@frockbot/plugin-user-machine 0.0.0 → 0.1.0

package/src/client/MachineSurface.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+// The Computer surface: the user's own machines, and how one is registered.
+//
+// Three states are rendered rather than reasoned about:
+//
+//   * **connected** — the backend says this machine polled inside the presence
+//     TTL. Nothing here computes it.
+//   * **revoked** — the row stays, as evidence. A revoked machine is not
+//     deleted, because "failures observable in durable state" applies to a
+//     decision the user made as much as to one a program made.
+//   * **this computer** — only inside the desktop shell, where an agent exists
+//     to hand a code to. In a browser the code is shown instead, because a
+//     browser cannot register itself.
+import { UiButton, UiField } from "@frockbot/client-ui";
+import { computed, inject, onMounted, ref } from "vue";
+import { machinesStateKey } from "./state.js";
+
+const providedState = inject(machinesStateKey);
+if (!providedState) {
+  throw new Error("Registered machine client services were not provided");
+}
+const machines = providedState;
+const typedCode = ref("");
+
+const rows = computed(() => machines.value.view?.machines ?? []);
+const agent = computed(() => machines.value.agent);
+
+/** The machine row this app itself is, when it is one. */
+const thisMachineId = computed(() => agent.value?.machineId);
+
+function when(value: string): string {
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? value : new Date(parsed).toLocaleString();
+}
+
+function state(machine: { connected: boolean; revokedAt?: string }): string {
+  if (machine.revokedAt) return "Revoked";
+  return machine.connected ? "Connected" : "Offline";
+}
+
+async function submitCode(): Promise<void> {
+  const code = typedCode.value.trim();
+  if (!code) return;
+  await machines.value.enterCode(code);
+  typedCode.value = "";
+}
+
+onMounted(() => machines.value.load());
+</script>
+
+<template>
+  <div class="machines-surface">
+    <header>
+      <h2>Registered machines</h2>
+      <p>
+        A registered machine runs the FrockBot desktop app and dials out to this
+        deployment. A Bot can read files and run commands on one only after you
+        approve each action, and only while the app is running.
+      </p>
+    </header>
+
+    <section class="machines-pairing">
+      <div v-if="machines.desktop" class="machines-pairing__desktop">
+        <div class="machines-pairing__row">
+          <span class="machines-pairing__text">
+            <strong>This computer</strong>
+            <small v-if="agent?.enrolled">
+              Paired as {{ agent.label }} · agent
+              {{ agent.running ? "running" : "stopped" }}
+            </small>
+            <small v-else>Not paired yet</small>
+          </span>
+          <UiButton
+            v-if="!agent?.enrolled"
+            type="button"
+            :disabled="machines.busy"
+            @click="machines.pairThisComputer()"
+          >
+            Pair this computer
+          </UiButton>
+          <UiButton
+            v-else
+            type="button"
+            :disabled="machines.busy"
+            @click="machines.forgetThisComputer()"
+          >
+            Forget on this computer
+          </UiButton>
+        </div>
+        <p v-if="agent?.lastError" class="machines-surface__note" role="status">
+          {{ agent.lastError }}
+        </p>
+        <form class="machines-pairing__code" @submit.prevent="submitCode">
+          <UiField label="Pairing code" hint="from another device's settings">
+            <input
+              v-model="typedCode"
+              type="text"
+              autocomplete="off"
+              spellcheck="false"
+              placeholder="Paste a pairing code"
+            />
+          </UiField>
+          <UiButton
+            type="submit"
+            :disabled="machines.busy || !typedCode.trim()"
+          >
+            Pair with this code
+          </UiButton>
+        </form>
+      </div>
+
+      <div v-else class="machines-pairing__browser">
+        <div class="machines-pairing__row">
+          <span class="machines-pairing__text">
+            <strong>Register a machine</strong>
+            <small>
+              Ask for a code here, then paste it into the FrockBot desktop app
+              on the machine you want to register.
+            </small>
+          </span>
+          <UiButton
+            type="button"
+            :disabled="machines.busy"
+            @click="machines.requestCode()"
+          >
+            Get a pairing code
+          </UiButton>
+        </div>
+        <p v-if="machines.offer" class="machines-pairing__offer">
+          <code>{{ machines.offer.code }}</code>
+          <small>
+            One use only, expires {{ when(machines.offer.expiresAt) }}
+          </small>
+        </p>
+      </div>
+    </section>
+
+    <p v-if="machines.error" class="machines-surface__error" role="alert">
+      {{ machines.error }}
+    </p>
+
+    <div v-if="rows.length" class="machines-list">
+      <article
+        v-for="machine in rows"
+        :key="machine.machineId"
+        class="machine-card"
+      >
+        <div class="machine-card__text">
+          <strong>
+            {{ machine.label }}
+            <span v-if="machine.machineId === thisMachineId">(this one)</span>
+          </strong>
+          <small
+            >{{ machine.platform }} ·
+            {{ machine.capabilities.join(", ") }}</small
+          >
+          <small>Last seen {{ when(machine.lastSeenAt) }}</small>
+        </div>
+        <span
+          class="machine-card__state"
+          :data-state="state(machine).toLowerCase()"
+        >
+          {{ state(machine) }}
+        </span>
+        <UiButton
+          v-if="!machine.revokedAt"
+          type="button"
+          :disabled="machines.busy"
+          @click="machines.revoke(machine.machineId)"
+        >
+          Revoke
+        </UiButton>
+      </article>
+    </div>
+    <p v-else-if="!machines.error" class="machines-surface__note">
+      No machines are registered yet.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.machines-surface {
+  padding: 24px;
+}
+
+.machines-surface h2 {
+  margin: 0;
+  font-family: var(--frock-font-display);
+}
+
+.machines-surface header p,
+.machines-surface__note {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-base);
+  line-height: 1.5;
+}
+
+.machines-pairing {
+  display: grid;
+  gap: 12px;
+  margin-top: 20px;
+  padding: 14px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-subtle);
+}
+
+.machines-pairing__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.machines-pairing__text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.machines-pairing__text strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-md);
+  font-weight: 600;
+}
+
+.machines-pairing__text small,
+.machines-pairing__offer small {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.machines-pairing__code {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.machines-pairing__code > :first-child {
+  flex: 1 1 auto;
+}
+
+.machines-pairing__offer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+}
+
+.machines-pairing__offer code {
+  overflow-wrap: anywhere;
+  color: var(--frock-text);
+  font-size: var(--frock-text-sm);
+}
+
+.machines-list {
+  display: grid;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.machine-card {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-card);
+}
+
+.machine-card__text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.machine-card__text small {
+  margin-top: 4px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.machine-card__state {
+  font-size: var(--frock-text-sm);
+  font-weight: 700;
+}
+
+.machine-card__state[data-state="connected"] {
+  color: var(--frock-success);
+}
+
+.machine-card__state[data-state="offline"] {
+  color: var(--frock-text-muted);
+}
+
+.machine-card__state[data-state="revoked"] {
+  color: var(--frock-danger-text);
+}
+
+.machines-surface__error {
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-sm);
+}
+</style>

package/src/client/index.test.ts

@@ -0,0 +1,244 @@
+// The Computer settings section's store, driven without a DOM.
+//
+// The house pattern: build a `ClientPluginContext` by hand, run the plugin,
+// take the state ref it provided and the slots it mounted, and drive the store
+// against a recorded transport. What is proved here is what the section
+// promises — every read decoded at the seam, every refusal surfaced verbatim,
+// and the desktop half absent when there is no desktop.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  ClientPluginContext,
+  ClientSlotRegistration,
+} from "@frockbot/client-core";
+import { clientSurfaceRegistryKey } from "@frockbot/client-core";
+import { createClientSurfaceRegistry } from "@frockbot/client-ui";
+import { MACHINE_SURFACE_ID_V1, userMachineClientPlugin } from "./index.js";
+import { machinesStateKey, type MachinesClientState } from "./state.js";
+
+const MACHINE = {
+  machineId: "m-1",
+  label: "Tims-M5-MacBook-Pro.local",
+  platform: "macos",
+  capabilities: ["exec", "files"],
+  connected: true,
+  lastSeenAt: "2026-09-01T00:00:00.000Z",
+  registeredAt: "2026-08-31T00:00:00.000Z",
+};
+
+const LIST = {
+  schemaVersion: 1,
+  machines: [MACHINE],
+  serverTime: "2026-09-01T00:00:10.000Z",
+};
+
+const OFFER = {
+  schemaVersion: 1,
+  code: "pairing-code",
+  machineId: "m-2",
+  expiresAt: "2026-09-01T00:05:00.000Z",
+};
+
+const AGENT_STATUS = {
+  schemaVersion: 1,
+  enrolled: true,
+  running: true,
+  machineId: "m-1",
+  label: "Tims-M5-MacBook-Pro.local",
+  origin: "https://bot.example.com",
+  failures: 0,
+};
+
+interface Bridge {
+  status(): Promise<unknown>;
+  pair(code: string): Promise<unknown>;
+  unpair(): Promise<unknown>;
+}
+
+function mount(
+  overrides: {
+    hostedRequest?: ClientPluginContext["transport"]["hostedRequest"];
+    bridge?: Bridge;
+  } = {},
+): {
+  state: { value: MachinesClientState };
+  slots: ClientSlotRegistration[];
+  calls: Array<[string, string | undefined, string | undefined]>;
+  surfaces: ReturnType<typeof createClientSurfaceRegistry>;
+  dispose(): void;
+} {
+  const slots: ClientSlotRegistration[] = [];
+  const calls: Array<[string, string | undefined, string | undefined]> = [];
+  const surfaces = createClientSurfaceRegistry();
+  let state: unknown;
+  const globals = globalThis as { frockbotMachineAgent?: Bridge };
+  if (overrides.bridge) globals.frockbotMachineAgent = overrides.bridge;
+  else delete globals.frockbotMachineAgent;
+  const context: ClientPluginContext = {
+    transport: {
+      turn: () => Promise.resolve({ runId: "run", text: "", events: [] }),
+      hostedRequest:
+        overrides.hostedRequest ??
+        ((path, method, body) => {
+          calls.push([path, method, body]);
+          if (path === "/api/machines/pair") return Promise.resolve(OFFER);
+          if (path.endsWith("/revoke")) {
+            return Promise.resolve({
+              ...LIST,
+              machines: [
+                { ...MACHINE, connected: false, revokedAt: LIST.serverTime },
+              ],
+            });
+          }
+          return Promise.resolve(LIST);
+        }),
+    },
+    inject: (key) => {
+      if (key !== clientSurfaceRegistryKey) {
+        throw new Error("unexpected client provider");
+      }
+      return surfaces as never;
+    },
+    provide: (key, value) => {
+      if (key === machinesStateKey) state = value;
+      return () => {};
+    },
+    slot: (registration) => {
+      slots.push(registration);
+      return () => slots.splice(slots.indexOf(registration), 1);
+    },
+  };
+  const disposers = userMachineClientPlugin(context);
+  if (!Array.isArray(disposers)) throw new Error("expected registrations");
+  return {
+    state: state as { value: MachinesClientState },
+    slots,
+    calls,
+    surfaces,
+    dispose: () => {
+      delete globals.frockbotMachineAgent;
+      for (const dispose of disposers.toReversed()) dispose();
+    },
+  };
+}
+
+describe("registered machines client contribution", () => {
+  test("mounts one settings section and one surface", () => {
+    const mounted = mount();
+    expect(mounted.slots.map((slot) => slot.slot)).toEqual([
+      "frockbot.user-settings-sections",
+    ]);
+    expect(mounted.surfaces.has(MACHINE_SURFACE_ID_V1)).toBe(true);
+    mounted.dispose();
+    expect(mounted.surfaces.has(MACHINE_SURFACE_ID_V1)).toBe(false);
+  });
+
+  test("loads the registry and decodes it at the seam", async () => {
+    const mounted = mount();
+    await mounted.state.value.load();
+    expect(mounted.calls[0]).toEqual(["/api/machines", undefined, undefined]);
+    expect(mounted.state.value.view?.machines[0]).toMatchObject({
+      machineId: "m-1",
+      connected: true,
+    });
+    // Presence came from the backend; nothing here recomputed it.
+    expect(mounted.state.value.desktop).toBe(false);
+    mounted.dispose();
+  });
+
+  test("a browser can mint a code but cannot pair itself", async () => {
+    const mounted = mount();
+    await mounted.state.value.requestCode("Tims-M5-MacBook-Pro.local");
+    expect(mounted.calls[0]).toEqual([
+      "/api/machines/pair",
+      "POST",
+      JSON.stringify({ label: "Tims-M5-MacBook-Pro.local" }),
+    ]);
+    expect(mounted.state.value.offer?.code).toBe("pairing-code");
+
+    await mounted.state.value.pairThisComputer();
+    expect(mounted.state.value.error).toBe(
+      "This client is not the desktop app",
+    );
+    mounted.dispose();
+  });
+
+  test("the desktop shell mints a code and hands it to its own agent", async () => {
+    const handed: string[] = [];
+    const mounted = mount({
+      bridge: {
+        status: () => Promise.resolve(AGENT_STATUS),
+        pair: (code) => {
+          handed.push(code);
+          return Promise.resolve(AGENT_STATUS);
+        },
+        unpair: () =>
+          Promise.resolve({
+            schemaVersion: 1,
+            enrolled: false,
+            running: false,
+            failures: 0,
+          }),
+      },
+    });
+
+    expect(mounted.state.value.desktop).toBe(true);
+    await mounted.state.value.pairThisComputer();
+
+    expect(handed).toEqual(["pairing-code"]);
+    expect(mounted.state.value.agent?.enrolled).toBe(true);
+    // The code is one-time: once spent it is not left on screen.
+    expect(mounted.state.value.offer).toBeUndefined();
+    expect(mounted.calls.map(([path]) => path)).toEqual([
+      "/api/machines/pair",
+      "/api/machines",
+    ]);
+
+    await mounted.state.value.forgetThisComputer();
+    expect(mounted.state.value.agent?.enrolled).toBe(false);
+    mounted.dispose();
+  });
+
+  test("a code typed by hand reaches the agent as it was typed", async () => {
+    const handed: string[] = [];
+    const mounted = mount({
+      bridge: {
+        status: () => Promise.resolve(AGENT_STATUS),
+        pair: (code) => {
+          handed.push(code);
+          return Promise.resolve(AGENT_STATUS);
+        },
+        unpair: () => Promise.resolve(AGENT_STATUS),
+      },
+    });
+    await mounted.state.value.enterCode("  typed-code  ");
+    expect(handed).toEqual(["typed-code"]);
+    mounted.dispose();
+  });
+
+  test("revoking takes the registry back from the authority", async () => {
+    const mounted = mount();
+    await mounted.state.value.revoke("m-1");
+    expect(mounted.calls[0]).toEqual([
+      "/api/machines/m-1/revoke",
+      "POST",
+      "{}",
+    ]);
+    expect(mounted.state.value.view?.machines[0]?.revokedAt).toBeDefined();
+    expect(mounted.state.value.view?.machines[0]?.connected).toBe(false);
+    mounted.dispose();
+  });
+
+  test("a refusal is surfaced rather than swallowed", async () => {
+    const mounted = mount({
+      hostedRequest: () =>
+        Promise.reject(new Error("machine registration is not configured")),
+    });
+    await mounted.state.value.load();
+    expect(mounted.state.value.error).toBe(
+      "machine registration is not configured",
+    );
+    expect(mounted.state.value.busy).toBe(false);
+    mounted.dispose();
+  });
+});