Visko Orbis Stable tutorial

import { ViskoOrbisStableProvider } from "@reactor-models/visko-orbis-stable";

let cached: { jwt: string; expiresAt: number } | null = null;

// Memoized in module scope: returns the same JWT until shortly before its
// server-reported expiry. A session-scoped token can only operate sessions it
// created, so every Coordinator hop of a session must present the JWT that
// created the session — a resolver that re-mints per hop fails with a 403
// naming `authorization_details.resources.sessions.bind`.
async function fetchToken(): Promise<string> {
  const nowSeconds = Math.floor(Date.now() / 1000);
  // 60-second skew so we never hand the SDK a near-expired token.
  if (cached && cached.expiresAt - 60 > nowSeconds) {
    return cached.jwt;
  }
  const r = await fetch("/api/reactor/token", { method: "POST", cache: "no-store" });
  if (!r.ok) {
    const body = (await r.json().catch(() => ({}))) as { error?: string };
    throw new Error(body.error ?? `Token fetch failed: ${r.status}`);
  }
  const { jwt, expires_at } = (await r.json()) as { jwt: string; expires_at: number };
  cached = { jwt, expiresAt: expires_at };
  return jwt;
}

export function ViskoOrbisStableApp() {
  return (
    <ViskoOrbisStableProvider jwtToken={fetchToken}>{/* ...app tree... */}</ViskoOrbisStableProvider>
  );
}

const { setPrompt, start } = useViskoOrbisStable();
const [text, setText] = useState("");
// ...status / ready guard omitted...

// The two-call flow every entry point in this panel shares:
//   1. setPrompt registers the prompt
//   2. start begins generation
async function send(prompt: string) {
  await setPrompt({ prompt: prompt.trim() });
  await start();
}

const { uploadFile, setImage, setPrompt, start } = useViskoOrbisStable();

const ref = await uploadFile(file);
await setImage({ image: ref }); // resolves once decoded
await setPrompt({ prompt: scene.initial.text });
await start();

const TONE = {
  disconnected: { dot: "bg-zinc-500", label: "Disconnected" },
  connecting: { dot: "bg-amber-400 animate-pulse", label: "Placing session…" },
  waiting: { dot: "bg-amber-400 animate-pulse", label: "Placing session…" },
  priming: {
    dot: "bg-amber-400 animate-pulse",
    label: "Priming stream — first frames incoming…",
  },
  ready: { dot: "bg-active", label: "Connected" },
};

// Set by generation_started, cleared when videoTrack arrives.
const priming = false;
const effective = priming && status === "ready" ? "priming" : status;

const { status, pause, resume, reset } = useViskoOrbisStable();
const [snapshot, setSnapshot] = useState<ViskoOrbisStableStateMessage | null>(null);

useViskoOrbisStableState((msg) => setSnapshot(msg));

// Clear on disconnect. The SDK doesn't emit a final `state` on shutdown,
// so without this the next session inherits the old snapshot.
useEffect(() => {
  if (status !== "ready") setSnapshot(null);
}, [status]);

// Phase switch: while not started (or after reset), render null and
// let the setup panel take over.
if (status !== "ready" || !snapshot?.started) return null;

return (
  <>
    <p>{String(snapshot.current_prompt ?? "")}</p>
    <span>chunk {snapshot.current_chunk}</span>
    {snapshot.running ? (
      <button onClick={() => pause()}>Pause</button>
    ) : (
      <button onClick={() => resume()}>Resume</button>
    )}
    <button onClick={() => reset()}>Reset</button>
  </>
);

const [finished, setFinished] = useState(false);
useViskoOrbisStableGenerationComplete(() => setFinished(true));

// Clear the "finished" flag the moment a new run starts (started flips true).
useEffect(() => {
  if (snapshot?.started) setFinished(false);
}, [snapshot?.started]);

import { ViskoOrbisStableMainVideoView } from "@reactor-models/visko-orbis-stable";

export function Video() {
  return (
    <div className="rounded-lg border bg-black">
      <ViskoOrbisStableMainVideoView className="h-full w-full" videoObjectFit="contain" />
    </div>
  );
}

const { status, setPrompt } = useViskoOrbisStable();
const [snapshot, setSnapshot] = useState<ViskoOrbisStableStateMessage | null>(null);
useViskoOrbisStableState((msg) => setSnapshot(msg));

useEffect(() => {
  if (status !== "ready") setSnapshot(null);
}, [status]);

if (status !== "ready" || !snapshot?.started) return null;

// Match the active prompt against `initial` and every `evolutions[i].text`
// in the curated library. If nothing matches (free-text prompt), bail.
const scene = findSceneForPrompt(String(snapshot.current_prompt ?? ""));
if (!scene) return null;

return (
  <>
    <label>Steer the scene live</label>
    {scene.evolutions.map((evolution) => (
      <button key={evolution.title} onClick={() => setPrompt({ prompt: evolution.text })}>
        {evolution.title}
      </button>
    ))}
  </>
);

import {
  ClipDownloadButton,
  ClipPlayer,
  RecordingError,
  useReactor,
  type Clip,
} from "@reactor-team/js-sdk";

const { status, requestClip } = useReactor((s) => ({
  status: s.status,
  requestClip: s.requestClip,
}));
const [clip, setClip] = useState<Clip | null>(null);

async function snap() {
  try {
    setClip(await requestClip(durationSeconds));
  } catch (e) {
    if (e instanceof RecordingError) {
      // render e.code + e.reason (omitted)
    }
  }
}

return (
  <>
    <button onClick={snap}>Snap last {durationSeconds}s</button>
    {clip && (
      <Modal onClose={() => setClip(null)}>
        <ClipPlayer clip={clip} />
        <ClipDownloadButton clip={clip} filename={filename} />
      </Modal>
    )}
  </>
);

const [error, setError] = useState<{ command: string; reason: string } | null>(null);

useViskoOrbisStableCommandError((msg) => {
  setError({ command: msg.command, reason: msg.reason });
});

// Clear on the next state snapshot. Any state change implies the user
// has moved on from whatever triggered the error.
useViskoOrbisStableState(() => {
  setError(null);
});

if (!error) return null;

return (
  <div>
    <span>{error.command} failed</span>
    <p>{error.reason}</p>
  </div>
);