@frockbot/plugin-computer 0.2.3 → 0.2.4

package/src/client/ComputerViewerOverlay.vue

@@ -14,6 +14,8 @@ import { computerKey, type ComputerState } from "../shared.ts";
 import { dialogFocusWrapTarget } from "./dialog-focus.ts";
 import {
   createComputerViewerActions,
+  decodeComputerViewerFrameMessageV1,
+  type ComputerViewerFrameStateV1,
   viewerUrlForControlV1,
 } from "./viewer.ts";
 
@@ -22,6 +24,13 @@ const state = computed(() => computer.value);
 const busy = ref(false);
 const confirming = ref(false);
 const confirmDialog = ref<HTMLElement>();
+const viewerFrame = ref<HTMLIFrameElement>();
+const frameState = ref<"loading" | ComputerViewerFrameStateV1>("loading");
+const frameMessage = ref("Loading viewer frame…");
+const elapsedSeconds = ref(0);
+let elapsedTimer: ReturnType<typeof setInterval> | undefined;
+let localProgressStartedAt = Date.now();
+let elapsedWasActive = false;
 let restoreFocus: HTMLElement | undefined;
 const focusable = 'button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const actions = createComputerViewerActions(
@@ -42,13 +51,73 @@ const viewerSrc = computed(() =>
     ? viewerUrlForControlV1(state.value.viewerUrl, isHuman.value)
     : undefined,
 );
+const opening = computed(
+  () =>
+    state.value.phase === "provisioning" || state.value.phase === "updating",
+);
+const progressSteps = computed(
+  () =>
+    state.value.progress?.steps ?? [
+      {
+        version: 1 as const,
+        id: state.value.phase,
+        label: state.value.message,
+        status: "active" as const,
+      },
+    ],
+);
+const progressPosition = computed(() => {
+  const progress = state.value.progress;
+  return progress ? `Step ${progress.index} of ${progress.total}` : undefined;
+});
 const statusLabel = computed(() => {
+  if (hasViewer.value && frameState.value !== "connected") {
+    return frameMessage.value;
+  }
   if (isHuman.value) return "Your control";
   if (state.value.phase === "ready") return "View only";
   if (state.value.phase === "updating") return state.value.message;
   return state.value.phase.replaceAll("-", " ");
 });
 
+function updateElapsed(): void {
+  const durableStart = state.value.progress?.startedAt;
+  const parsed = durableStart ? Date.parse(durableStart) : Number.NaN;
+  const startedAt = Number.isFinite(parsed) ? parsed : localProgressStartedAt;
+  elapsedSeconds.value = Math.max(
+    0,
+    Math.floor((Date.now() - startedAt) / 1_000),
+  );
+}
+
+function syncElapsed(): void {
+  if (elapsedTimer !== undefined) clearInterval(elapsedTimer);
+  elapsedTimer = undefined;
+  if (!state.value.expanded || !opening.value) {
+    elapsedSeconds.value = 0;
+    return;
+  }
+  updateElapsed();
+  elapsedTimer = setInterval(updateElapsed, 1_000);
+}
+
+function handleFrameLoad(): void {
+  if (frameState.value === "loading") {
+    frameState.value = "connecting";
+    frameMessage.value = "Connecting to desktop…";
+  }
+}
+
+function handleViewerMessage(event: MessageEvent): void {
+  if (event.source !== viewerFrame.value?.contentWindow) return;
+  const source = state.value.viewerUrl;
+  if (!source || event.origin !== new URL(source).origin) return;
+  const message = decodeComputerViewerFrameMessageV1(event.data);
+  if (!message) return;
+  frameState.value = message.state;
+  frameMessage.value = message.message;
+}
+
 async function invoke(action: () => Promise<void>): Promise<void> {
   if (busy.value) return;
   busy.value = true;
@@ -115,10 +184,33 @@ watch(
     if (!expanded) confirming.value = false;
   },
 );
+watch(
+  () => state.value.viewerUrl,
+  () => {
+    frameState.value = "loading";
+    frameMessage.value = "Loading viewer frame…";
+  },
+);
+watch(
+  [() => state.value.expanded, opening, () => state.value.progress?.startedAt],
+  ([expanded, active]) => {
+    if (expanded && active && !elapsedWasActive) {
+      localProgressStartedAt = Date.now();
+    }
+    elapsedWasActive = Boolean(expanded && active);
+    syncElapsed();
+  },
+  { immediate: true },
+);
 
-onMounted(() => window.addEventListener("keydown", handleWindowKeydown));
+onMounted(() => {
+  window.addEventListener("keydown", handleWindowKeydown);
+  window.addEventListener("message", handleViewerMessage);
+});
 onBeforeUnmount(() => {
   window.removeEventListener("keydown", handleWindowKeydown);
+  window.removeEventListener("message", handleViewerMessage);
+  if (elapsedTimer !== undefined) clearInterval(elapsedTimer);
   restoreFocus?.focus();
 });
 </script>
@@ -178,26 +270,52 @@ onBeforeUnmount(() => {
       <div class="computer-screen computer-screen-expanded">
         <iframe
           v-if="viewerSrc"
+          ref="viewerFrame"
           :src="viewerSrc"
           title="Computer"
           sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts"
           referrerpolicy="no-referrer"
+          @load="handleFrameLoad"
         />
         <div v-else class="computer-placeholder">
           <strong v-if="state.phase === 'unconfigured'"
             >Computer not configured</strong
           >
-          <strong v-else-if="state.phase === 'provisioning'"
-            >Preparing computer…</strong
-          >
-          <strong v-else-if="state.phase === 'updating'"
-            >Updating computer…</strong
-          >
+          <template v-else-if="opening">
+            <strong>
+              {{
+                state.phase === "updating"
+                  ? "Updating computer…"
+                  : "Preparing computer…"
+              }}
+            </strong>
+            <div
+              class="computer-progress-track"
+              role="progressbar"
+              :aria-label="state.message"
+            >
+              <span />
+            </div>
+            <div class="computer-progress-meta">
+              <span v-if="progressPosition">{{ progressPosition }}</span>
+              <span>{{ elapsedSeconds }}s elapsed</span>
+            </div>
+            <ol class="computer-progress-steps">
+              <li
+                v-for="step in progressSteps"
+                :key="step.id"
+                :class="`step-${step.status}`"
+              >
+                <span aria-hidden="true" />
+                {{ step.label }}
+              </li>
+            </ol>
+          </template>
           <strong v-else-if="state.phase === 'disconnected'"
             >Viewer disconnected</strong
           >
           <strong v-else>Persistent Computer</strong>
-          <p>{{ state.message }}</p>
+          <p v-if="!opening">{{ state.message }}</p>
           <UiButton
             v-if="state.phase === 'idle' || state.phase === 'disconnected'"
             :disabled="busy"

package/src/client/application.test.ts

@@ -8,6 +8,7 @@ import { nextTick, ref } from "vue";
 import { computerKey, type ComputerState } from "../shared.js";
 import {
   createComputerClientPlugin,
+  ACTIVE_PROJECTION_POLL_INTERVAL_MS,
   PROJECTION_POLL_INTERVAL_MS,
   VIEWER_REFRESH_INTERVAL_MS,
   type ComputerClientRuntime,
@@ -125,6 +126,26 @@ function mountHostedProvider() {
               : phase === "updating"
                 ? "Updating the Computer runtime"
                 : "Computer ready",
+          ...(phase === "updating"
+            ? {
+                progress: {
+                  version: 1,
+                  kind: "update",
+                  startedAt: "2026-09-02T00:00:00.000Z",
+                  updatedAt: "2026-09-02T00:00:02.000Z",
+                  index: 1,
+                  total: 2,
+                  steps: [
+                    {
+                      version: 1,
+                      id: "runtime",
+                      label: "Updating the Computer runtime",
+                      status: "active",
+                    },
+                  ],
+                },
+              }
+            : {}),
           ...(phase === "idle" ||
           phase === "disconnected" ||
           phase === "updating"
@@ -222,6 +243,7 @@ describe("hosted Computer provider", () => {
     await mounted.state.openViewer();
     expect(mounted.state).toMatchObject({ phase: "ready", expanded: true });
     expect(postedTypes(mounted.calls)).toEqual(["connect"]);
+    expect(mounted.runtime.count(ACTIVE_PROJECTION_POLL_INTERVAL_MS)).toBe(0);
     mounted.dispose();
   });
 
@@ -267,9 +289,20 @@ describe("hosted Computer provider", () => {
       viewerUrl: undefined,
     });
     expect(postedTypes(mounted.calls)).toEqual(["connect"]);
+    expect(mounted.runtime.count(ACTIVE_PROJECTION_POLL_INTERVAL_MS)).toBe(1);
+
+    const readsBeforeFastPoll = mounted.calls.filter(
+      ([, method]) => !method,
+    ).length;
+    mounted.runtime.tick(ACTIVE_PROJECTION_POLL_INTERVAL_MS);
+    await flush();
+    expect(postedTypes(mounted.calls)).toEqual(["connect"]);
+    expect(
+      mounted.calls.filter(([, method]) => !method).length,
+    ).toBeGreaterThan(readsBeforeFastPoll);
 
-    // Every poll while open asks again, so the durable `updating` record is
-    // not the last word once the host has finished.
+    // Rejoin remains deliberately slower than the progress reads, so the
+    // durable `updating` record is not the last word once the host finishes.
     mounted.setReady();
     mounted.runtime.tick(PROJECTION_POLL_INTERVAL_MS);
     await flush();
@@ -279,6 +312,7 @@ describe("hosted Computer provider", () => {
       expanded: true,
       viewerUrl: "https://viewer.invalid/secret#view_only=1",
     });
+    expect(mounted.runtime.count(ACTIVE_PROJECTION_POLL_INTERVAL_MS)).toBe(0);
 
     // Once ready, polls go back to reading only.
     mounted.runtime.tick(PROJECTION_POLL_INTERVAL_MS);

package/src/client/application.ts

@@ -24,6 +24,7 @@ import {
 import "./styles.css";
 
 export const PROJECTION_POLL_INTERVAL_MS = 20_000;
+export const ACTIVE_PROJECTION_POLL_INTERVAL_MS = 1_500;
 export const VIEWER_REFRESH_INTERVAL_MS = 30_000;
 const CONTROL_REFRESH_INTERVAL_MS = 30_000;
 
@@ -90,6 +91,8 @@ export function createComputerClientPlugin(
     let controlHeartbeat: unknown;
     let viewerHeartbeat: unknown;
     let projectionPoll: unknown;
+    let projectionPollInterval: number | undefined;
+    let updateRejoin: unknown;
     let controlRequest: Promise<void> | undefined;
 
     const state = ref<ComputerState>({
@@ -108,6 +111,8 @@ export function createComputerClientPlugin(
       Object.assign(state.value, machine);
       syncControlHeartbeat();
       syncViewerHeartbeat();
+      syncProjectionPoll();
+      syncUpdateRejoin();
     }
 
     function stopControlHeartbeat(): void {
@@ -155,27 +160,67 @@ export function createComputerClientPlugin(
     function stopProjectionPoll(): void {
       if (projectionPoll !== undefined) runtime.clearInterval(projectionPoll);
       projectionPoll = undefined;
+      projectionPollInterval = undefined;
     }
 
     function syncProjectionPoll(): void {
+      if (!shell.value.activeBotId || !runtime.isVisible()) {
+        stopProjectionPoll();
+        return;
+      }
+      const interval =
+        machine.expanded &&
+        (machine.phase === "provisioning" ||
+          machine.phase === "updating" ||
+          machine.phase === "taking-control")
+          ? ACTIVE_PROJECTION_POLL_INTERVAL_MS
+          : PROJECTION_POLL_INTERVAL_MS;
+      if (projectionPoll !== undefined && projectionPollInterval === interval) {
+        return;
+      }
       stopProjectionPoll();
-      if (!shell.value.activeBotId || !runtime.isVisible()) return;
+      projectionPollInterval = interval;
       projectionPoll = runtime.setInterval(() => {
         const selectedBotId = shell.value.activeBotId;
         if (!selectedBotId || !runtime.isVisible()) return;
-        // The `updating` record is written when the host refused a connect
-        // mid-update; it only changes when someone connects again. While the
-        // User has the Computer open, rejoin the update each poll so the
-        // viewer arrives the moment the host finishes (P4).
-        if (machine.phase === "updating" && machine.expanded) {
-          void execute("connect").catch(() => {
-            // A refusal keeps the updating phase; the next poll asks again.
-          });
-          return;
-        }
+        // Projection reads are wake-free. Expanded operations read quickly so
+        // durable provider progress is visible without inventing client state.
         void load(selectedBotId).catch((error) =>
           apply({ type: "failed", message: errorMessage(error) }),
         );
+      }, interval);
+    }
+
+    function stopUpdateRejoin(): void {
+      if (updateRejoin !== undefined) runtime.clearInterval(updateRejoin);
+      updateRejoin = undefined;
+    }
+
+    function syncUpdateRejoin(): void {
+      if (
+        updateRejoin !== undefined ||
+        machine.phase !== "updating" ||
+        !machine.expanded ||
+        !shell.value.activeBotId ||
+        !runtime.isVisible()
+      ) {
+        if (
+          machine.phase !== "updating" ||
+          !machine.expanded ||
+          !shell.value.activeBotId ||
+          !runtime.isVisible()
+        ) {
+          stopUpdateRejoin();
+        }
+        return;
+      }
+      // An update only advances when a connect rejoins the host operation.
+      // Keep that effect cadence at 20s; only the durable reads accelerate.
+      updateRejoin = runtime.setInterval(() => {
+        if (!runtime.isVisible()) return;
+        void execute("connect").catch(() => {
+          // A refusal keeps the updating phase; the next interval rejoins.
+        });
       }, PROJECTION_POLL_INTERVAL_MS);
     }
 
@@ -320,6 +365,7 @@ export function createComputerClientPlugin(
       (selectedBotId) => {
         stopControlHeartbeat();
         stopViewerHeartbeat();
+        stopUpdateRejoin();
         machine = initialComputerMachineState();
         Object.assign(state.value, machine);
         syncProjectionPoll();
@@ -332,6 +378,7 @@ export function createComputerClientPlugin(
     );
     const stopVisibility = runtime.onVisibilityChange(() => {
       syncProjectionPoll();
+      syncUpdateRejoin();
       const selectedBotId = shell.value.activeBotId;
       if (!selectedBotId || !runtime.isVisible()) return;
       void load(selectedBotId).catch((error) =>
@@ -349,6 +396,7 @@ export function createComputerClientPlugin(
         stopControlHeartbeat();
         stopViewerHeartbeat();
         stopProjectionPoll();
+        stopUpdateRejoin();
       },
     ];
   };

package/src/client/state-machine.test.ts

@@ -186,6 +186,39 @@ describe("Computer client state machine", () => {
     expect(changed.screenshots[0]).not.toBe(first);
   });
 
+  test("projects durable opening progress without inventing a client step", () => {
+    const progress = {
+      version: 1 as const,
+      kind: "connect" as const,
+      startedAt: "2026-09-03T00:00:00.000Z",
+      updatedAt: "2026-09-03T00:00:02.000Z",
+      index: 3,
+      total: 5,
+      steps: [
+        {
+          version: 1 as const,
+          id: "starting-desktop",
+          label: "Starting the desktop",
+          status: "active" as const,
+        },
+      ],
+    };
+    const state = transitionComputerState(initialComputerMachineState(), {
+      type: "projection-received",
+      projection: {
+        version: 1,
+        botId: "scout",
+        providerLabel: "Fake Computer",
+        phase: "provisioning",
+        message: "Starting the desktop",
+        progress,
+        screenshots: [],
+      },
+    });
+
+    expect(state.progress).toEqual(progress);
+  });
+
   test("reset explicitly clears viewer secrets from an existing projection", () => {
     const projected = {
       ...initialComputerMachineState(),

package/src/client/state-machine.ts

@@ -1,6 +1,7 @@
 import type {
   ComputerDoctorViewV1,
   ComputerPhase,
+  ComputerProgressViewV1,
   ComputerProjectionV1,
   ComputerScreenshotViewV1,
 } from "../protocol.js";
@@ -10,6 +11,7 @@ export interface ComputerMachineState {
   botId: string;
   providerLabel: string;
   message: string;
+  progress?: ComputerProgressViewV1;
   viewerUrl?: string;
   expanded: boolean;
   takingControl: boolean;
@@ -45,6 +47,7 @@ export function initialComputerMachineState(): ComputerMachineState {
     botId: "unconfigured",
     providerLabel: "unconfigured",
     message: "No Computer provider is configured for this host",
+    progress: undefined,
     viewerUrl: undefined,
     expanded: false,
     takingControl: false,
@@ -70,6 +73,7 @@ export function transitionComputerState(
         botId: event.botId,
         providerLabel: event.providerLabel,
         message: event.message,
+        progress: undefined,
         viewerUrl: undefined,
         takingControl: false,
       };
@@ -79,6 +83,7 @@ export function transitionComputerState(
         ...state,
         phase: "provisioning",
         message: "Waking and preparing the Computer…",
+        progress: undefined,
         viewerUrl: undefined,
         takingControl: false,
       };
@@ -87,6 +92,7 @@ export function transitionComputerState(
         ...state,
         phase: "ready",
         message: "Computer ready",
+        progress: undefined,
         viewerUrl: event.viewerUrl,
         takingControl: false,
       };
@@ -95,6 +101,7 @@ export function transitionComputerState(
         ...state,
         phase: "updating",
         message: event.message,
+        progress: undefined,
         takingControl: false,
       };
     case "take-control-requested":
@@ -102,12 +109,14 @@ export function transitionComputerState(
         ...state,
         phase: "taking-control",
         message: "Pausing new agent computer actions…",
+        progress: undefined,
       };
     case "control-acquired":
       return {
         ...state,
         phase: "human-control",
         message: "You have control. Release when finished with private data.",
+        progress: undefined,
         takingControl: true,
       };
     case "control-released":
@@ -115,6 +124,7 @@ export function transitionComputerState(
         ...state,
         phase: "ready",
         message: "Computer ready",
+        progress: undefined,
         takingControl: false,
       };
     case "viewer-expanded":
@@ -126,6 +136,7 @@ export function transitionComputerState(
         ...state,
         phase: "disconnected",
         message: event.message,
+        progress: undefined,
         viewerUrl: undefined,
       };
     case "failed":
@@ -133,6 +144,7 @@ export function transitionComputerState(
         ...state,
         phase: "error",
         message: event.message,
+        progress: undefined,
         takingControl: event.takingControl ?? state.takingControl,
       };
     case "doctor-updated":
@@ -155,6 +167,7 @@ export function transitionComputerState(
         botId: projection.botId,
         providerLabel: projection.providerLabel,
         message: projection.message,
+        progress: projection.progress,
         viewerUrl:
           projection.phase === "disconnected"
             ? undefined

package/src/client/styles.css

@@ -191,6 +191,7 @@ button.computer-screen {
   border: 0;
   background: var(--frock-surface);
   pointer-events: none;
+  touch-action: none;
 }
 
 .computer-screen-expanded iframe {
@@ -229,6 +230,85 @@ button.computer-screen {
   background-size: 18px 18px;
 }
 
+.computer-progress-track {
+  position: relative;
+  overflow: hidden;
+  width: min(320px, 70vw);
+  height: 4px;
+  margin: 18px 0 10px;
+  border-radius: 999px;
+  background: var(--frock-viewer-status-surface);
+}
+
+.computer-progress-track > span {
+  position: absolute;
+  width: 42%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--frock-computer-accent);
+  animation: computer-progress 1.25s ease-in-out infinite;
+}
+
+.computer-progress-meta {
+  display: flex;
+  width: min(320px, 70vw);
+  justify-content: space-between;
+  gap: 14px;
+  color: var(--frock-viewer-content-muted);
+  font-size: var(--frock-text-xs);
+}
+
+.computer-progress-steps {
+  display: grid;
+  width: min(320px, 70vw);
+  gap: 6px;
+  margin: 16px 0 0;
+  padding: 0;
+  color: var(--frock-viewer-content-muted);
+  font-size: var(--frock-text-sm);
+  list-style: none;
+  text-align: left;
+}
+
+.computer-progress-steps li {
+  display: grid;
+  grid-template-columns: 9px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+}
+
+.computer-progress-steps li > span {
+  width: 7px;
+  height: 7px;
+  border: 1px solid var(--frock-viewer-status-border);
+  border-radius: 999px;
+}
+
+.computer-progress-steps .step-active {
+  color: var(--frock-viewer-content-text);
+}
+
+.computer-progress-steps .step-active > span {
+  border-color: var(--frock-computer-accent);
+  background: var(--frock-computer-accent);
+  box-shadow: 0 0 0 3px var(--frock-computer-focus);
+}
+
+.computer-progress-steps .step-complete > span {
+  border-color: var(--frock-success);
+  background: var(--frock-success);
+}
+
+@keyframes computer-progress {
+  from {
+    transform: translateX(-110%);
+  }
+
+  to {
+    transform: translateX(350%);
+  }
+}
+
 .computer-mark {
   display: grid;
   width: 28px;

package/src/client/viewer.ts

@@ -1,5 +1,48 @@
 import type { ComputerState } from "../shared.js";
 
+export const COMPUTER_VIEWER_FRAME_STATES = [
+  "connecting",
+  "connected",
+  "reconnecting",
+  "error",
+] as const;
+
+export type ComputerViewerFrameStateV1 =
+  (typeof COMPUTER_VIEWER_FRAME_STATES)[number];
+
+export interface ComputerViewerFrameMessageV1 {
+  type: "frockbot-viewer";
+  state: ComputerViewerFrameStateV1;
+  message: string;
+}
+
+/** Decodes the secret-free status message emitted by the framed viewer. */
+export function decodeComputerViewerFrameMessageV1(
+  value: unknown,
+): ComputerViewerFrameMessageV1 | undefined {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return undefined;
+  }
+  const candidate = value as Record<string, unknown>;
+  if (
+    Object.keys(candidate).some(
+      (key) => key !== "type" && key !== "state" && key !== "message",
+    ) ||
+    candidate.type !== "frockbot-viewer" ||
+    !COMPUTER_VIEWER_FRAME_STATES.some((state) => state === candidate.state) ||
+    typeof candidate.message !== "string" ||
+    !candidate.message ||
+    candidate.message.length > 200
+  ) {
+    return undefined;
+  }
+  return {
+    type: "frockbot-viewer",
+    state: candidate.state as ComputerViewerFrameStateV1,
+    message: candidate.message,
+  };
+}
+
 /**
  * Changes only noVNC's client-visible input fence on one minted session.
  *