@opengeni/react 7.4.0 → 7.5.0-canary.36919050519001

package/src/components/usage-meter.tsx

@@ -0,0 +1,382 @@
+import type { UsageAllowancePeriod, WorkspaceUsageResponse } from "@opengeni/sdk/usage-allowances";
+import type { ReactNode } from "react";
+
+import { useUsage, type UsageClientLike } from "../hooks/use-usage";
+import { cn } from "../lib/cn";
+import {
+  allowanceLabels,
+  allowanceResetSentence,
+  formatAllowanceInstant,
+  type AllowanceLabels,
+} from "../usage/allowance-copy";
+import {
+  summarizeUsage,
+  usagePercentLabel,
+  type UsageReading,
+  type UsageSummary,
+} from "../usage/summary";
+
+export type UsageMeterLabels = AllowanceLabels & {
+  /** Heading for the member's own ceiling. */
+  title: string;
+  /** Heading when only the shared workspace pool applies. */
+  workspaceTitle: string;
+  /** "38% left" — `percent` is preformatted ("38", "<1"). */
+  left: (percent: string) => string;
+  /** "62% used". */
+  used: (percent: string) => string;
+  limitReached: string;
+  /** Status chip beside a hero meter that is close to its limit. */
+  nearLimit: string;
+  /** "$13.00 left" for a hero meter with amounts. */
+  amountLeft: (amount: string) => string;
+  /** No ceiling applies to this member. */
+  unlimited: string;
+  loading: string;
+  error: string;
+  retry: string;
+  /** "$31.00 of $50.00 used" when the host passes `formatAmount`. */
+  amounts: (used: string, limit: string) => string;
+  /** The shared pool, under a member's own meter: "Workspace: 9% left". */
+  workspaceLine: (value: string) => string;
+};
+
+export const DEFAULT_USAGE_METER_LABELS: UsageMeterLabels = {
+  ...allowanceLabels(),
+  title: "Your usage",
+  workspaceTitle: "Workspace usage",
+  left: (percent) => `${percent}% left`,
+  used: (percent) => `${percent}% used`,
+  limitReached: "Limit reached",
+  nearLimit: "Near limit",
+  amountLeft: (amount) => `${amount} left`,
+  unlimited: "No usage limit",
+  loading: "Checking usage…",
+  error: "Couldn't load usage",
+  retry: "Try again",
+  amounts: (used, limit) => `${used} of ${limit} used`,
+  workspaceLine: (value) => `Workspace: ${value}`,
+};
+
+export type UsageMeterBaseProps = {
+  /** "left" (default) reads like a battery; "used" reads like spend. */
+  measure?: "left" | "used" | undefined;
+  /**
+   * Opt in to amounts. Receives USD micros; return your own unit ("$31.00",
+   * "3.1 credits", "1.5× plan"). Without it the meter shows only shares.
+   */
+  formatAmount?: ((micros: number) => string) | undefined;
+  labels?: Partial<UsageMeterLabels> | undefined;
+  /**
+   * `compact` is one line for menus and headers; `hero` leads a page with the
+   * amount (or share) left in large type. An empty `labels.title` hides the
+   * heading when the page already names it.
+   */
+  density?: "default" | "compact" | "hero" | undefined;
+  /** Show the shared pool under the member's own meter when it is the tighter one. Default true. */
+  showWorkspace?: boolean | undefined;
+  className?: string | undefined;
+};
+
+export type UsageMeterProps = UsageMeterBaseProps & {
+  /**
+   * A usage response you already loaded (for example from `useUsage`).
+   * Omit it to let the meter read `/usage/me` itself.
+   */
+  usage?: WorkspaceUsageResponse | null | undefined;
+  client?: UsageClientLike | undefined;
+  workspaceId?: string | undefined;
+  period?: UsageAllowancePeriod | undefined;
+  /** Re-read when this changes (see `useUsage`). */
+  refreshKey?: unknown;
+};
+
+/**
+ * The signed-in member's own usage: how much of their limit is left and when
+ * it resets. Shares only by default; hosts opt in to amounts.
+ */
+export function UsageMeter({
+  usage,
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: UsageMeterProps) {
+  if (usage !== undefined) {
+    return (
+      <UsageMeterView
+        {...view}
+        summary={usage ? summarizeUsage(usage) : null}
+        loading={usage === null}
+      />
+    );
+  }
+  return (
+    <LoadingUsageMeter
+      {...view}
+      client={client}
+      workspaceId={workspaceId}
+      period={period}
+      refreshKey={refreshKey}
+    />
+  );
+}
+
+function LoadingUsageMeter({
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: UsageMeterBaseProps &
+  Pick<UsageMeterProps, "client" | "workspaceId" | "period" | "refreshKey">) {
+  const state = useUsage({ client, workspaceId, period, refreshKey });
+  return (
+    <UsageMeterView
+      {...view}
+      summary={state.summary}
+      loading={state.loading && !state.summary}
+      error={state.summary ? null : state.error}
+      onRetry={() => void state.refresh()}
+    />
+  );
+}
+
+export type UsageMeterViewProps = UsageMeterBaseProps & {
+  summary: UsageSummary | null;
+  loading?: boolean | undefined;
+  error?: Error | null | undefined;
+  onRetry?: (() => void) | undefined;
+};
+
+const FILL: Record<UsageReading["status"], string> = {
+  ok: "bg-og-accent",
+  warning: "bg-og-status-waiting",
+  exhausted: "bg-og-danger",
+};
+
+function valueText(
+  reading: UsageReading,
+  measure: "left" | "used",
+  labels: UsageMeterLabels,
+): string {
+  if (reading.status === "exhausted") return labels.limitReached;
+  return measure === "left"
+    ? labels.left(usagePercentLabel(Math.max(0, 1 - reading.fraction)))
+    : labels.used(usagePercentLabel(reading.fraction));
+}
+
+/** Presentational meter for a summary you computed (`summarizeUsage`). */
+export function UsageMeterView({
+  summary,
+  loading = false,
+  error = null,
+  onRetry,
+  measure = "left",
+  formatAmount,
+  labels: overrides,
+  density = "default",
+  showWorkspace = true,
+  className,
+}: UsageMeterViewProps) {
+  const labels = { ...DEFAULT_USAGE_METER_LABELS, ...overrides };
+  const compact = density === "compact";
+  if (loading || error || !summary) {
+    return (
+      <div
+        className={cn("og-root min-w-0 text-og-sm", className)}
+        data-og-usage-meter={error ? "error" : "loading"}
+        aria-busy={loading || undefined}
+      >
+        {error ? (
+          <p className="flex flex-wrap items-center gap-x-2 text-og-fg-muted" role="alert">
+            {labels.error}
+            {onRetry ? (
+              <button
+                type="button"
+                onClick={onRetry}
+                className="rounded-og-sm text-og-fg underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-og-accent"
+              >
+                {labels.retry}
+              </button>
+            ) : null}
+          </p>
+        ) : (
+          <span className="text-og-fg-subtle">{labels.loading}</span>
+        )}
+      </div>
+    );
+  }
+  const primary = summary.member ?? summary.workspace;
+  if (!primary) {
+    return (
+      <div
+        className={cn("og-root min-w-0 text-og-sm text-og-fg-muted", className)}
+        data-og-usage-meter="unlimited"
+      >
+        {compact ? null : <span className="font-medium text-og-fg">{labels.title} · </span>}
+        {labels.unlimited}
+      </div>
+    );
+  }
+  const title = summary.member ? labels.title : labels.workspaceTitle;
+  const value = valueText(primary, measure, labels);
+  // The bar always fills with what's used, so "near the limit" reads as a
+  // nearly full bar whichever way the words count.
+  const fill = Math.min(1, Math.max(0, primary.fraction));
+  const reset = allowanceResetSentence(labels, primary.resetsAt);
+  const pool =
+    showWorkspace &&
+    summary.member &&
+    summary.workspace &&
+    (summary.binding?.scope === "workspace" || summary.workspace.status !== "ok")
+      ? summary.workspace
+      : null;
+  const meterProps = {
+    role: "meter" as const,
+    "aria-label": title || labels.title,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": Math.round(fill * 100),
+    "aria-valuetext": `${value}. ${reset}${
+      pool ? ` ${labels.workspaceLine(valueText(pool, measure, labels))}.` : ""
+    }`,
+  };
+  const bar = (
+    <span
+      aria-hidden
+      className={cn(
+        "relative block overflow-hidden rounded-full",
+        density === "hero" ? "h-1.5" : "h-1",
+        primary.status === "exhausted" ? "bg-og-danger/15" : "bg-og-surface-3",
+        compact ? "w-16 shrink-0" : "w-full",
+      )}
+    >
+      <span
+        className={cn("absolute inset-y-0 left-0 rounded-full", FILL[primary.status])}
+        style={{ width: `${Math.round(fill * 1000) / 10}%` }}
+      />
+    </span>
+  );
+  const valueClass = cn(
+    "shrink-0 whitespace-nowrap tabular-nums",
+    primary.status === "ok" ? "text-og-fg-muted" : "font-medium",
+    primary.status === "warning" && "text-og-status-waiting",
+    primary.status === "exhausted" && "text-og-danger",
+  );
+  if (compact) {
+    return (
+      <span
+        {...meterProps}
+        data-og-usage-meter={primary.status}
+        title={primary.resetsAt ? `${reset} ${formatAllowanceInstant(primary.resetsAt)}` : reset}
+        className={cn("og-root inline-flex min-w-0 items-center gap-2 text-og-xs", className)}
+      >
+        <span className={valueClass}>{value}</span>
+        {bar}
+      </span>
+    );
+  }
+  const amounts = formatAmount
+    ? labels.amounts(formatAmount(primary.used), formatAmount(primary.limit))
+    : null;
+  if (density === "hero") {
+    // Lead with what's left, even at zero; the chip names the state.
+    const headline = formatAmount
+      ? labels.amountLeft(formatAmount(primary.remaining))
+      : labels.left(usagePercentLabel(Math.max(0, 1 - primary.fraction)));
+    return (
+      <div
+        {...meterProps}
+        data-og-usage-meter={primary.status}
+        className={cn("og-root flex min-w-0 flex-col gap-3", className)}
+      >
+        {title ? <span className="text-og-sm font-medium text-og-fg-muted">{title}</span> : null}
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+          <span className="text-2xl leading-8 font-semibold tracking-[-0.5px] text-og-fg tabular-nums">
+            {headline}
+          </span>
+          {primary.status !== "ok" ? (
+            <span
+              className={cn(
+                "inline-flex h-[22px] items-center gap-1.5 rounded-full border px-2 text-og-xs font-medium",
+                primary.status === "warning"
+                  ? "border-og-status-waiting/30 text-og-status-waiting"
+                  : "border-og-danger/30 text-og-danger",
+              )}
+            >
+              <span
+                aria-hidden
+                className={cn(
+                  "size-1.5 rounded-full",
+                  primary.status === "warning" ? "bg-og-status-waiting" : "bg-og-danger",
+                )}
+              />
+              {primary.status === "warning" ? labels.nearLimit : labels.limitReached}
+            </span>
+          ) : null}
+        </div>
+        {bar}
+        <p className="text-og-xs text-og-fg-muted tabular-nums">
+          {[
+            amounts ?? labels.used(usagePercentLabel(primary.fraction)),
+            amounts ? `${usagePercentLabel(primary.fraction)}%` : null,
+          ]
+            .filter(Boolean)
+            .join(" · ")}{" "}
+          ·{" "}
+          <span title={primary.resetsAt ? formatAllowanceInstant(primary.resetsAt) : undefined}>
+            {reset}
+          </span>
+        </p>
+        {pool ? <PoolLine reading={pool} measure={measure} labels={labels} /> : null}
+      </div>
+    );
+  }
+  return (
+    <div
+      {...meterProps}
+      data-og-usage-meter={primary.status}
+      className={cn("og-root flex min-w-0 flex-col gap-2 text-og-sm", className)}
+    >
+      <div className="flex min-w-0 items-baseline justify-between gap-3">
+        <span className="min-w-0 truncate font-medium text-og-fg">{title}</span>
+        <span className={valueClass}>{value}</span>
+      </div>
+      {bar}
+      <div className="flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1 text-og-xs text-og-fg-subtle">
+        <span title={primary.resetsAt ? formatAllowanceInstant(primary.resetsAt) : undefined}>
+          {reset}
+        </span>
+        {amounts ? <span className="tabular-nums">{amounts}</span> : null}
+      </div>
+      {pool ? <PoolLine reading={pool} measure={measure} labels={labels} /> : null}
+    </div>
+  );
+}
+
+function PoolLine({
+  reading,
+  measure,
+  labels,
+}: {
+  reading: UsageReading;
+  measure: "left" | "used";
+  labels: UsageMeterLabels;
+}): ReactNode {
+  return (
+    <p
+      className={cn(
+        "text-og-xs",
+        reading.status === "exhausted"
+          ? "font-medium text-og-danger"
+          : reading.status === "warning"
+            ? "text-og-status-waiting"
+            : "text-og-fg-muted",
+      )}
+    >
+      {labels.workspaceLine(valueText(reading, measure, labels))}
+    </p>
+  );
+}

package/src/conversation-timeline.ts

@@ -8,7 +8,10 @@ export function conversationTimeline(
   queue: Pick<UseTurnQueueResult, "queue" | "snapshot" | "acceptedSteers">,
   composer: Pick<
     ComposerState,
-    "optimisticMessages" | "retryOptimisticMessage" | "removeOptimisticMessage"
+    | "optimisticMessages"
+    | "retryOptimisticMessage"
+    | "restoreOptimisticMessage"
+    | "removeOptimisticMessage"
   >,
 ): TimelineItem[] {
   const queued = new Set(
@@ -61,7 +64,12 @@ export function conversationTimeline(
         ...(message.error ? { error: message.error } : {}),
         ...(message.state === "failed"
           ? {
-              onRetry: () => composer.retryOptimisticMessage?.(message.clientEventId),
+              ...(message.retryable !== false && composer.retryOptimisticMessage
+                ? { onRetry: () => composer.retryOptimisticMessage?.(message.clientEventId) }
+                : {}),
+              ...(message.retryable === false && composer.restoreOptimisticMessage
+                ? { onEdit: () => composer.restoreOptimisticMessage?.(message.clientEventId) }
+                : {}),
               onRemove: () => composer.removeOptimisticMessage?.(message.clientEventId),
             }
           : {}),

package/src/desktop.ts

@@ -0,0 +1,24 @@
+import type { DesktopRfbFactory, DesktopRfbLike } from "@opengeni/sdk";
+import { registerDesktopViewer } from "./lib/workbench-peers";
+
+export { DesktopViewer } from "./components/desktop-viewer";
+export type { DesktopViewerProps } from "./components/desktop-viewer";
+export { useDesktopStream } from "./hooks/use-desktop-stream";
+export type { UseDesktopStreamOptions, UseDesktopStreamResult } from "./hooks/use-desktop-stream";
+export { registerDesktopViewer } from "./lib/workbench-peers";
+
+async function loadDesktop(): Promise<DesktopRfbFactory> {
+  const mod = (await import("@novnc/novnc")) as unknown as {
+    default: new (
+      target: HTMLElement,
+      url: string,
+      options: Parameters<DesktopRfbFactory>[2],
+    ) => DesktopRfbLike;
+  };
+  return (target, url, options) => new mod.default(target, url, options);
+}
+
+/** Opt in once on a VNC route; relay-frame viewers need no noVNC peer. */
+export function enableDesktopViewer(): void {
+  registerDesktopViewer(loadDesktop);
+}

package/src/editor.ts

@@ -0,0 +1,13 @@
+import { registerCodeEditor, type CodeEditorLanguages } from "./lib/workbench-peers";
+
+export { CodeEditor, languageForPath } from "./components/code-editor";
+export type { CodeEditorProps } from "./components/code-editor";
+export { registerCodeEditor } from "./lib/workbench-peers";
+export type { CodeEditorLanguage, CodeEditorLanguages } from "./lib/workbench-peers";
+
+const loadEditor = async () => ({ module: await import("@uiw/react-codemirror") });
+
+/** Only name installed grammar peers in host-supplied language loaders. */
+export function enableCodeEditor(languages?: CodeEditorLanguages): void {
+  registerCodeEditor(languages ? async () => ({ ...(await loadEditor()), languages }) : loadEditor);
+}

package/src/hooks/use-available-models.ts

@@ -72,7 +72,7 @@ export function useWorkspaceModelCatalog(
       }
       const [catalog, config] = await Promise.all([
         client.getWorkspaceModelCatalog(options.workspaceId, { signal }),
-        client.getClientConfig({ signal }),
+        client.getClientConfig({ signal, workspaceId: options.workspaceId }),
       ]);
       return {
         models: catalog.models,

package/src/hooks/use-composer.ts

@@ -15,6 +15,7 @@ import {
 } from "@opengeni/sdk";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useEmbeddedSession, type EmbeddedSessionClientOverride } from "../session-context";
+import { composerSubmissionCanRetry, composerSubmissionErrorMessage } from "../lib/format";
 import { useSessionEventTrigger, type SessionEventFeedOptions } from "./internal";
 
 export type ComposerPolicy = {
@@ -97,6 +98,8 @@ export type ComposerOptimisticMessage = {
   triggerEventId?: string | null | undefined;
   appliedQueueVersion?: number | null | undefined;
   error?: string | undefined;
+  /** False for a definitive refusal that requires changing payment or allowance settings. */
+  retryable?: boolean | undefined;
   outcomeUnknown?: boolean | undefined;
 };
 
@@ -185,7 +188,14 @@ function restoreOptimisticSendOperations(key: string | null): OptimisticSendOper
     error:
       operation.state === "sending"
         ? "Delivery was interrupted; retry to reconcile this message."
-        : operation.error,
+        : operation.error
+          ? composerSubmissionErrorMessage(new Error(operation.error))
+          : undefined,
+    retryable:
+      operation.state === "sending" || operation.outcomeUnknown
+        ? true
+        : (operation.retryable ??
+          (operation.error ? composerSubmissionCanRetry(new Error(operation.error)) : true)),
     input: operation.input,
     canRetry: !hasMcpCredentialUpdates,
   }));
@@ -433,6 +443,8 @@ export type ComposerState = {
   /** Locally acknowledged ordinary sends awaiting durable timeline reconciliation. */
   optimisticMessages?: ComposerOptimisticMessage[] | undefined;
   retryOptimisticMessage?: ((clientEventId: string) => void) | undefined;
+  /** Move a definitively refused message into an empty composer without resending it. */
+  restoreOptimisticMessage?: ((clientEventId: string) => void) | undefined;
   removeOptimisticMessage?: ((clientEventId: string) => void) | undefined;
   /** Supersede current direction with the draft. */
   steer: (text?: string) => Promise<boolean>;
@@ -1379,7 +1391,8 @@ export function useComposer(
               ? {
                   ...candidate,
                   state: "failed",
-                  error: problem.message,
+                  error: outcomeUnknown ? problem.message : composerSubmissionErrorMessage(problem),
+                  retryable: outcomeUnknown || composerSubmissionCanRetry(problem),
                   outcomeUnknown,
                 }
               : candidate,
@@ -2138,6 +2151,7 @@ export function useComposer(
           if (operation.outcomeUnknown) {
             return { ...operation, state: "sending", error: undefined };
           }
+          if (operation.retryable === false) return operation;
           const nextClientEventId = generateClientEventId();
           const currentPersonalResourceAttachment = resolveSendExtras(
             sendExtrasRef.current,
@@ -2167,6 +2181,7 @@ export function useComposer(
             occurredAt: new Date().toISOString(),
             state: "sending",
             error: undefined,
+            retryable: undefined,
             outcomeUnknown: false,
             canRetry: true,
           };
@@ -2573,6 +2588,42 @@ export function useComposer(
     );
   }, []);
 
+  const restoreOptimisticMessage = useCallback(
+    (clientEventId: string): void => {
+      if (
+        targetKeyRef.current !== targetKey ||
+        draftLoading ||
+        pendingOperationRef.current ||
+        hasDraftContent()
+      )
+        return;
+      const operation = optimisticSendsRef.current.find(
+        (candidate) => candidate.clientEventId === clientEventId,
+      );
+      if (!operation || operation.state !== "failed" || operation.outcomeUnknown) return;
+      // Restoring is a new draft edit, not a retry. Keep the user's current model
+      // selection and never copy credentials from the old rejected request.
+      localEditRevision.current += 1;
+      valueRef.current = operation.text;
+      restoredResourcesRef.current = [...operation.resources];
+      annotationsRef.current = cloneAnnotations(operation.annotations);
+      setValue(operation.text);
+      setRestoredResources(restoredResourcesRef.current);
+      setAnnotations(annotationsRef.current);
+      setError(null);
+      setOptimisticDraftShadow({
+        text: operation.text,
+        resources: restoredResourcesRef.current,
+        annotations: annotationsRef.current,
+        policy: policyRef.current ?? undefined,
+      });
+      replaceOptimisticSends((current) =>
+        current.filter((candidate) => candidate.clientEventId !== clientEventId),
+      );
+    },
+    [draftLoading, hasDraftContent, replaceOptimisticSends, setOptimisticDraftShadow, targetKey],
+  );
+
   const resolveDraftConflict = useCallback(
     async (choice: "keep_mine" | "use_remote"): Promise<void> => {
       const ownedTargetKey = targetKey;
@@ -2676,6 +2727,10 @@ export function useComposer(
     send,
     optimisticMessages: visibleOptimisticMessages,
     retryOptimisticMessage,
+    restoreOptimisticMessage:
+      !draftLoading && !pendingOperationRef.current && !hasDraftContent()
+        ? restoreOptimisticMessage
+        : undefined,
     removeOptimisticMessage,
     steer,
     steering: visibleSteering,

package/src/hooks/use-desktop-stream.ts

@@ -6,7 +6,15 @@ import {
   type DesktopRfbLike,
   type DesktopStreamCapability,
 } from "@opengeni/sdk";
-import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { desktopViewerPeers } from "../lib/workbench-peers";
 import { type DesktopWebSocketFactory, useRelayFrameStream } from "./use-relay-frame-stream";
 
 export type UseDesktopStreamOptions = {
@@ -17,7 +25,7 @@ export type UseDesktopStreamOptions = {
   /** Read-only by default (v1 ruling H). interactive only when cap.mode allows. */
   interactive?: boolean | undefined;
   scaleViewport?: boolean | undefined;
-  /** Custom RFB factory (tests / a WebRTC swap). Defaults to a lazy @novnc/novnc. */
+  /** Custom RFB factory. Otherwise call enableDesktopViewer() on the desktop subpath. */
   rfbFactory?: DesktopRfbFactory | undefined;
   /** Additional WebSocket protocols for an authenticated placement proxy. */
   webSocketProtocols?: string[] | undefined;
@@ -35,29 +43,6 @@ export type UseDesktopStreamResult = {
   sendKey?: ((keysym: number, code: string, down?: boolean) => boolean) | undefined;
 };
 
-/** Lazy-load @novnc/novnc's RFB as the default factory. Imported inside the
- *  connect effect so SSR / non-desktop bundles never pull the DOM-only lib.
- *  @novnc/novnc ships no types and a single `export default class RFB`. The
- *  specifier is STATIC (`import("@novnc/novnc")`) so Vite can pre-bundle and
- *  resolve it — a runtime-string indirection with `@vite-ignore` (the previous
- *  approach) hands the browser a bare specifier and throws
- *  "Failed to resolve module specifier '@novnc/novnc'". The dynamic form keeps
- *  it out of the SSR / non-desktop critical path while staying resolvable. */
-async function defaultRfbFactory(): Promise<DesktopRfbFactory> {
-  const mod = (await import("@novnc/novnc")) as unknown as {
-    default: new (
-      t: HTMLElement,
-      u: string,
-      o: {
-        credentials?: { password?: string | undefined } | undefined;
-        wsProtocols?: string[] | undefined;
-      },
-    ) => DesktopRfbLike;
-  };
-  const RFB = mod.default;
-  return (target, url, opts) => new RFB(target, url, opts);
-}
-
 /**
  * Drive the noVNC RFB lifecycle from a `DesktopStreamCapability`, using the
  * SDK's `desktop.ts` reducer + `desktopSocketUrl`. SSR-safe: the RFB import and
@@ -87,6 +72,12 @@ export function useDesktopStream(options: UseDesktopStreamOptions): UseDesktopSt
     webSocketProtocols,
     webSocketFactory,
   } = options;
+  const peerRevision = useSyncExternalStore(
+    desktopViewerPeers.subscribe,
+    desktopViewerPeers.revision,
+    desktopViewerPeers.revision,
+  );
+  const factoryRevision = rfbFactory ? 0 : peerRevision;
 
   // The self-hosted PNG-frame path. Always invoked (rules of hooks); dormant
   // unless `transport === "relay-frames"`, in which case it owns the surface.
@@ -188,7 +179,7 @@ export function useDesktopStream(options: UseDesktopStreamOptions): UseDesktopSt
 
     void (async () => {
       try {
-        const factory = rfbFactoryRef.current ?? (await defaultRfbFactory());
+        const factory = rfbFactoryRef.current ?? (await desktopViewerPeers.load());
         if (disposed) return;
         const socketUrl = desktopSocketUrl({ url });
         setBoth(nextDesktopState(stateRef.current, { type: "negotiated" }));
@@ -232,11 +223,11 @@ export function useDesktopStream(options: UseDesktopStreamOptions): UseDesktopSt
     };
     // ONLY a real transport change reconnects: a fresh url (rotation), a new
     // credential (RFB password OR bearer subprotocol), the transport flipping,
-    // or an explicit manual reconnect
+    // a newly registered default peer loader, or an explicit manual reconnect
     // (`nonce`). `interactive`/`scaleViewport`/`mode`/`rfbFactory` are read via
     // refs and applied live below — they must never re-open the socket.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url, token, transport, webSocketProtocolsKey, nonce]);
+  }, [url, token, transport, webSocketProtocolsKey, nonce, factoryRevision]);
 
   // Apply take-control / return-control to the OPEN connection in place. noVNC
   // honours `viewOnly` live, so flipping it neither blinks the surface nor drops