Embed computers

// SERVER. The API key never leaves this file.
export async function GET() {
  const res = await fetch(
    `https://www.orgo.ai/api/computers/${process.env.ORGO_COMPUTER_ID}`,
    {
      headers: { Authorization: `Bearer ${process.env.ORGO_API_KEY}` },
      cache: 'no-store',
    },
  );
  const computer = await res.json();

  // Only the per-computer password crosses to the browser.
  return Response.json(
    { instanceId: computer.fly_instance_id, password: computer.vnc_password },
    { headers: { 'Cache-Control': 'no-store' } },
  );
}

import RFB from '@novnc/novnc/lib/rfb';

const { instanceId, password } = await fetch('/api/computer').then((r) => r.json());

const rfb = new RFB(
  document.getElementById('screen'),
  `wss://www.orgo.ai/desktops/${instanceId}/ws/websockify?token=${encodeURIComponent(password)}`,
  { credentials: { password } },
);

rfb.viewOnly = false;      // true renders the screen without sending input
rfb.scaleViewport = true;  // fit the screen to its container
rfb.qualityLevel = 6;      // 0 to 9
rfb.compressLevel = 2;     // 0 to 9

// Answer the VNC auth challenge when the proxy forwards it.
rfb.addEventListener('credentialsrequired', () => rfb.sendCredentials({ password }));
rfb.addEventListener('securityfailure', (e) => console.error('VNC auth failed', e.detail));

// The close code is the only signal a rejected connection gives you.
rfb._sock._websocket.addEventListener('close', (e) => console.log('closed', e.code));

'use client';
import { useEffect, useState } from 'react';
import { ComputerDisplay } from 'orgo-vnc';

export default function Screen() {
  const [creds, setCreds] = useState<{ instanceId: string; password: string } | null>(null);

  // Fetched per session from your own server, never bundled.
  useEffect(() => {
    fetch('/api/computer')
      .then((r) => r.json())
      .then(setCreds)
      .catch(() => setCreds(null));
  }, []);

  if (!creds) return null;

  return (
    <ComputerDisplay
      instanceId={creds.instanceId}
      password={creds.password}
      onError={(message) => console.error(message)}
      onClose={(code, info) => {
        if (info?.retryable) scheduleReconnect();
      }}
      style={{ width: 1280, height: 720 }}
    />
  );
}