@frockbot/plugin-computer 0.0.0 → 0.1.0

package/src/client/ComputerCard.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { parse } from "@vue/compiler-sfc";
+import type { ComputerState } from "../shared.js";
+import {
+  createComputerViewerActions,
+  viewerUrlForControlV1,
+} from "./viewer.js";
+
+const overlaySource = readFileSync(
+  new URL("./ComputerViewerOverlay.vue", import.meta.url),
+  "utf8",
+);
+const cardSource = readFileSync(
+  new URL("./ComputerCard.vue", import.meta.url),
+  "utf8",
+);
+
+describe("Computer viewer", () => {
+  test("keeps one noVNC session view-only until human control is held", () => {
+    const minted =
+      "https://sprite.invalid/vnc.html#autoconnect=1&view_only=1&path=websockify%3Ftoken%3Dsecret";
+    const viewOnly = new URL(viewerUrlForControlV1(minted, false));
+    const interactive = new URL(viewerUrlForControlV1(minted, true));
+
+    expect(new URLSearchParams(viewOnly.hash.slice(1)).get("view_only")).toBe(
+      "1",
+    );
+    expect(
+      new URLSearchParams(interactive.hash.slice(1)).get("view_only"),
+    ).toBe("0");
+    expect(interactive.origin + interactive.pathname).toBe(
+      viewOnly.origin + viewOnly.pathname,
+    );
+    expect(new URLSearchParams(interactive.hash.slice(1)).get("path")).toBe(
+      "websockify?token=secret",
+    );
+  });
+
+  test("requires confirmation before taking control and Escape closes through shared state", async () => {
+    let confirmations = false;
+    let takeControl = 0;
+    let closeViewer = 0;
+    const state = {
+      takeControl: () => {
+        takeControl += 1;
+        return Promise.resolve();
+      },
+      closeViewer: () => {
+        closeViewer += 1;
+        return Promise.resolve();
+      },
+    } as ComputerState;
+    const actions = createComputerViewerActions(
+      () => state,
+      (open) => {
+        confirmations = open;
+      },
+    );
+
+    actions.requestTakeControl();
+    expect(confirmations).toBe(true);
+    expect(takeControl).toBe(0);
+    await actions.confirmTakeControl();
+    expect(confirmations).toBe(false);
+    expect(takeControl).toBe(1);
+
+    await actions.escape();
+    expect(closeViewer).toBe(1);
+  });
+
+  test("the Vue overlay binds the computed viewer src and confirm dialog", () => {
+    const parsed = parse(overlaySource, {
+      filename: "ComputerViewerOverlay.vue",
+    });
+    expect(parsed.errors).toEqual([]);
+    const template = parsed.descriptor.template?.content ?? "";
+
+    expect(template).toContain(':src="viewerSrc"');
+    expect(template).toContain('@click="actions.requestTakeControl"');
+    expect(template).toContain('role="alertdialog"');
+    expect(template).toContain(
+      "The Bot will be fenced from this desktop until you release control.",
+    );
+  });
+
+  test("the card shows the update phase label", () => {
+    const parsed = parse(cardSource, { filename: "ComputerCard.vue" });
+    expect(parsed.errors).toEqual([]);
+    const template = parsed.descriptor.template?.content ?? "";
+
+    expect(template).toContain("state.phase === 'updating'");
+    expect(template).toContain("Updating computer…");
+    expect(template).toContain("{{ state.message }}");
+  });
+});

package/src/client/ComputerCard.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useRpc } from "@cordisjs/client";
+import { UiIcon } from "@frockbot/client-ui";
+import { computed, inject, ref } from "vue";
+import { computerKey, type ComputerState } from "../shared.ts";
+
+const computer = inject(computerKey) ?? useRpc<ComputerState>();
+const state = computed(() => computer.value);
+const busy = ref(false);
+const screenshot = computed(() => state.value.screenshots?.[0]);
+
+async function open(): Promise<void> {
+  if (busy.value) return;
+  busy.value = true;
+  try {
+    await state.value.openViewer();
+  } catch {
+    // The shared state already holds the visible failure.
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <section class="computer-card">
+    <button
+      type="button"
+      class="computer-screen computer-screen-thumbnail"
+      :disabled="busy"
+      aria-label="Open computer in full window"
+      @click="open"
+    >
+      <img
+        v-if="screenshot"
+        :key="screenshot.contentHash"
+        :src="screenshot.url"
+        alt=""
+        draggable="false"
+      />
+      <span v-else class="computer-placeholder">
+        <UiIcon name="sparkle" size="lg" />
+        <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
+        >
+        <strong v-else-if="state.phase === 'disconnected'"
+          >Viewer disconnected</strong
+        >
+        <strong v-else>Persistent Computer</strong>
+        <span class="computer-placeholder-message">{{ state.message }}</span>
+      </span>
+    </button>
+  </section>
+</template>

package/src/client/ComputerStrip.test.ts

@@ -0,0 +1,54 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { parse } from "@vue/compiler-sfc";
+import {
+  initialComputerMachineState,
+  transitionComputerState,
+} from "./state-machine.js";
+
+test("the Vue strip keys its durable capture only by contentHash", () => {
+  const source = readFileSync(
+    new URL("./ComputerStrip.vue", import.meta.url),
+    "utf8",
+  );
+  const parsed = parse(source, { filename: "ComputerStrip.vue" });
+  expect(parsed.errors).toEqual([]);
+  const template = parsed.descriptor.template?.content ?? "";
+
+  expect(template).toContain(':key="screenshot.contentHash"');
+  expect(template).toContain(':src="screenshot.url"');
+  expect(template).not.toContain("viewerUrl");
+});
+
+test("a repeated screenshot projection preserves the rendered capture", () => {
+  const first = {
+    version: 1 as const,
+    path: "scout/latest.png",
+    capturedAt: "2026-09-02T00:00:00.000Z",
+    contentHash: "sha256:first",
+    url: "/workspace/first",
+  };
+  const state = {
+    ...initialComputerMachineState(),
+    screenshots: [first],
+  };
+  const project = (contentHash: string) => ({
+    type: "projection-received" as const,
+    projection: {
+      version: 1 as const,
+      botId: "scout",
+      providerLabel: "Fake Computer",
+      phase: "idle" as const,
+      message: "Computer available",
+      screenshots: [
+        { ...first, contentHash, url: `/workspace/${contentHash}` },
+      ],
+    },
+  });
+
+  const unchanged = transitionComputerState(state, project("sha256:first"));
+  const changed = transitionComputerState(unchanged, project("sha256:second"));
+
+  expect(unchanged.screenshots[0]).toBe(first);
+  expect(changed.screenshots[0]).not.toBe(first);
+});

package/src/client/ComputerStrip.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useRpc } from "@cordisjs/client";
+import { UiIcon } from "@frockbot/client-ui";
+import { computed, inject, ref } from "vue";
+import { computerKey, type ComputerState } from "../shared.ts";
+
+const computer = inject(computerKey) ?? useRpc<ComputerState>();
+const busy = ref(false);
+const state = computed(() => computer.value);
+const screenshot = computed(() => state.value.screenshots?.[0]);
+const phaseLabel = computed(() =>
+  state.value.phase === "updating"
+    ? state.value.message
+    : state.value.phase.replaceAll("-", " "),
+);
+
+async function open(): Promise<void> {
+  if (busy.value) return;
+  busy.value = true;
+  try {
+    await state.value.openViewer();
+  } catch {
+    // The shared state already holds the visible failure.
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="computer-strip"
+    :disabled="busy"
+    :aria-label="`Open Computer, ${phaseLabel}`"
+    @click="open"
+  >
+    <span class="computer-strip-capture">
+      <img
+        v-if="screenshot"
+        :key="screenshot.contentHash"
+        :src="screenshot.url"
+        alt=""
+        draggable="false"
+      />
+      <span v-else class="computer-strip-placeholder" aria-hidden="true">
+        <UiIcon name="sparkle" size="sm" />
+      </span>
+    </span>
+    <span class="computer-strip-phase">
+      <span class="computer-strip-dot" :class="`phase-${state.phase}`" />
+      <span>{{ phaseLabel }}</span>
+    </span>
+  </button>
+</template>

package/src/client/ComputerViewerOverlay.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { useRpc } from "@cordisjs/client";
+import { UiButton, UiIconButton } from "@frockbot/client-ui";
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { computerKey, type ComputerState } from "../shared.ts";
+import { dialogFocusWrapTarget } from "./dialog-focus.ts";
+import {
+  createComputerViewerActions,
+  viewerUrlForControlV1,
+} from "./viewer.ts";
+
+const computer = inject(computerKey) ?? useRpc<ComputerState>();
+const state = computed(() => computer.value);
+const busy = ref(false);
+const confirming = ref(false);
+const confirmDialog = ref<HTMLElement>();
+let restoreFocus: HTMLElement | undefined;
+const focusable = 'button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const actions = createComputerViewerActions(
+  () => state.value,
+  (open) => {
+    confirming.value = open;
+  },
+);
+const hasViewer = computed(
+  () =>
+    Boolean(state.value.viewerUrl) &&
+    state.value.phase !== "provisioning" &&
+    state.value.phase !== "updating",
+);
+const isHuman = computed(() => state.value.takingControl);
+const viewerSrc = computed(() =>
+  hasViewer.value && state.value.viewerUrl
+    ? viewerUrlForControlV1(state.value.viewerUrl, isHuman.value)
+    : undefined,
+);
+const statusLabel = computed(() => {
+  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("-", " ");
+});
+
+async function invoke(action: () => Promise<void>): Promise<void> {
+  if (busy.value) return;
+  busy.value = true;
+  try {
+    await action();
+  } catch {
+    // The shared state already projects the command's visible failure.
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function closeViewer(escape = false): Promise<void> {
+  try {
+    await (escape ? actions.escape() : actions.closeViewer());
+  } catch {
+    // A failed release remains visible in the still-open overlay.
+  }
+}
+
+function handleWindowKeydown(event: KeyboardEvent): void {
+  if (event.key !== "Escape" || !state.value.expanded) return;
+  event.preventDefault();
+  void closeViewer(true);
+}
+
+function handleConfirmKeydown(event: KeyboardEvent): void {
+  if (event.key !== "Tab" || !confirmDialog.value) return;
+  const controls = [
+    ...confirmDialog.value.querySelectorAll<HTMLElement>(focusable),
+  ];
+  const target = dialogFocusWrapTarget(
+    controls,
+    document.activeElement as HTMLElement | null,
+    event.shiftKey,
+  );
+  if (!target) return;
+  event.preventDefault();
+  target.focus();
+}
+
+watch(
+  confirming,
+  async (open, previous) => {
+    if (open && !previous) {
+      restoreFocus =
+        document.activeElement instanceof HTMLElement
+          ? document.activeElement
+          : undefined;
+      await nextTick();
+      confirmDialog.value
+        ?.querySelector<HTMLElement>("[autofocus], " + focusable)
+        ?.focus();
+    } else if (!open && previous) {
+      restoreFocus?.focus();
+      restoreFocus = undefined;
+    }
+  },
+  { flush: "post" },
+);
+watch(
+  () => state.value.expanded,
+  (expanded) => {
+    if (!expanded) confirming.value = false;
+  },
+);
+
+onMounted(() => window.addEventListener("keydown", handleWindowKeydown));
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleWindowKeydown);
+  restoreFocus?.focus();
+});
+</script>
+
+<template>
+  <div
+    v-if="state.expanded"
+    class="computer-overlay"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Computer"
+  >
+    <header class="computer-overlay-toolbar">
+      <div class="computer-overlay-identity">
+        <strong>Computer</strong>
+        <small>{{ state.botId }} · {{ state.providerLabel }}</small>
+      </div>
+      <div class="computer-overlay-actions">
+        <span class="computer-status" :class="`status-${state.phase}`">
+          {{ statusLabel }}
+        </span>
+        <UiButton
+          v-if="isHuman"
+          variant="primary"
+          :disabled="busy"
+          @click="invoke(state.releaseControl)"
+        >
+          Release control
+        </UiButton>
+        <UiButton
+          v-else-if="state.phase === 'disconnected'"
+          :disabled="busy"
+          @click="invoke(state.connect)"
+        >
+          Reconnect
+        </UiButton>
+        <UiButton
+          v-else-if="hasViewer"
+          :disabled="busy || state.phase === 'taking-control'"
+          @click="actions.requestTakeControl"
+        >
+          {{
+            state.phase === "taking-control" ? "Pausing Bot…" : "Take control"
+          }}
+        </UiButton>
+        <UiIconButton
+          icon="close"
+          label="Close full-window computer (Esc)"
+          variant="outlined"
+          shape="square"
+          @click="closeViewer()"
+        />
+      </div>
+    </header>
+
+    <main class="computer-overlay-stage" :class="{ 'human-control': isHuman }">
+      <div class="computer-screen computer-screen-expanded">
+        <iframe
+          v-if="viewerSrc"
+          :src="viewerSrc"
+          title="Computer"
+          sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts"
+          referrerpolicy="no-referrer"
+        />
+        <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
+          >
+          <strong v-else-if="state.phase === 'disconnected'"
+            >Viewer disconnected</strong
+          >
+          <strong v-else>Persistent Computer</strong>
+          <p>{{ state.message }}</p>
+          <UiButton
+            v-if="state.phase === 'idle' || state.phase === 'disconnected'"
+            :disabled="busy"
+            @click="invoke(state.connect)"
+          >
+            {{
+              state.phase === "disconnected" ? "Reconnect" : "Start computer"
+            }}
+          </UiButton>
+          <UiButton
+            v-else-if="state.phase === 'error'"
+            :disabled="busy"
+            @click="invoke(state.retry)"
+          >
+            Try again
+          </UiButton>
+        </div>
+      </div>
+    </main>
+
+    <div
+      v-if="confirming"
+      class="computer-confirm-backdrop"
+      @click.self="actions.cancelTakeControl"
+    >
+      <section
+        ref="confirmDialog"
+        class="computer-confirm-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="computer-confirm-title"
+        aria-describedby="computer-confirm-detail"
+        @keydown="handleConfirmKeydown"
+      >
+        <h2 id="computer-confirm-title">Take control of this Computer?</h2>
+        <p id="computer-confirm-detail">
+          The Bot will be fenced from this desktop until you release control.
+        </p>
+        <div class="computer-confirm-actions">
+          <UiButton @click="actions.cancelTakeControl">Cancel</UiButton>
+          <UiButton
+            autofocus
+            variant="primary"
+            @click="invoke(actions.confirmTakeControl)"
+          >
+            Take control
+          </UiButton>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>