@frockbot/plugin-shell 0.3.22 → 0.3.23

package/src/client/FrockBotApp.vue

@@ -56,6 +56,7 @@ import {
 } from "./turn-limits.js";
 import SendPayloadView from "./SendPayloadView.vue";
 import AppletCanvas from "./AppletCanvas.vue";
+import { appletProgressToolsV1, appletProgressV1 } from "./applet-progress.js";
 import PackageIframeHost from "./PackageIframeHost.vue";
 import type { ClientSkillCatalogEntryV1 } from "../skill-protocol.js";
 import {
@@ -67,6 +68,14 @@ import {
   textWithoutSkillTriggerV1,
   type SkillPopoverStateV1,
 } from "./skill-invocation.js";
+import {
+  DEPLOYMENT_RELOAD_LABEL_V1,
+  DEPLOYMENT_UPDATED_MESSAGE_V1,
+  deploymentFollowV1,
+  deploymentReloadStoreV1,
+  readDeploymentReloadV1,
+  writeDeploymentReloadV1,
+} from "./deployment.js";
 
 const injectedWeb = inject(frockBotWebDataKey);
 if (!injectedWeb) throw new Error("shell client data was not provided");
@@ -264,6 +273,25 @@ const appletChip = computed(() =>
     ? (state.value.focusedApplet?.displayName ?? "Applet")
     : undefined,
 );
+/*
+ * What the Bot is doing to it, on the phone.
+ *
+ * There is no room beside the conversation here, so the chip carries the line
+ * the canvas would have shown and opens the canvas over the whole screen. It
+ * is the same projection and the same words: a person who moves between their
+ * phone and a laptop reads one story, not two.
+ */
+const appletChipStatus = computed(() => {
+  if (!appletChip.value) return undefined;
+  const progress = appletProgressV1({
+    applet: state.value.focusedApplet ?? null,
+    source: state.value.appletSource,
+    build: state.value.appletBuild,
+    tools: appletProgressToolsV1(state.value.messages),
+    running: Boolean(state.value.activeRunId),
+  });
+  return progress && progress.stage !== "published" ? progress : undefined;
+});
 /*
  * Skill invocation. `/` or `@` at a word boundary opens a popover over the
  * Bot's catalog; choosing one attaches a ref chip and removes the trigger from
@@ -411,6 +439,57 @@ let voiceTail = "";
 let voiceSendOnFinal = false;
 
 const dictating = computed(() => voiceState.value !== "idle");
+
+/*
+ * Following a release.
+ *
+ * A reload is destructive, so the shell only does it on its own when there is
+ * nothing to lose, and otherwise says so and waits. The bar is not an alert:
+ * nothing is wrong, there is just newer code to pick up.
+ */
+const reloadStore = deploymentReloadStoreV1();
+const lastReloadedAt = readDeploymentReloadV1(reloadStore);
+const updateBarVisible = ref(false);
+
+function followDeployment(): void {
+  const decision = deploymentFollowV1({
+    stale: state.value.deploymentStale,
+    turnRunning: Boolean(state.value.runningRunId),
+    draft: draft.value,
+    overlayOpen: Boolean(overlaySurface.value),
+    listening: dictating.value,
+    holds: state.value.reloadHolds,
+    now: Date.now(),
+    ...(lastReloadedAt === undefined ? {} : { reloadedAt: lastReloadedAt }),
+  });
+  updateBarVisible.value = decision === "offer";
+  if (decision !== "reload") return;
+  reloadNow();
+}
+
+function reloadNow(): void {
+  writeDeploymentReloadV1(reloadStore, Date.now());
+  /*
+   * `location.reload()` and nothing else. The Android shell runs this very
+   * bundle inside a WebView served from its own origin, so re-navigating to a
+   * URL this code built would leave that origin behind; reloading in place
+   * works the same way in both.
+   */
+  window.location.reload();
+}
+
+watch(
+  [
+    () => state.value.deploymentStale,
+    () => state.value.runningRunId,
+    () => state.value.reloadHolds,
+    draft,
+    overlaySurface,
+    dictating,
+  ],
+  () => followDeployment(),
+  { immediate: true },
+);
 const voiceButtonLabel = computed(() => voiceButtonLabelV1(voiceState.value));
 /**
  * The wave button takes the slot only when the slot is otherwise idle: an
@@ -1574,6 +1653,23 @@ function handleComposerKeydown(event: KeyboardEvent): void {
           </div>
         </Transition>
 
+        <Transition name="banner">
+          <!--
+            One bar at a time in this spot. A failed Turn is the more urgent
+            thing to read, and newer code is still there once it is dealt with.
+          -->
+          <div
+            v-if="updateBarVisible && !state.error && !state.activeRun"
+            class="update-banner"
+            role="status"
+          >
+            <span>{{ DEPLOYMENT_UPDATED_MESSAGE_V1 }}</span>
+            <button type="button" @click="reloadNow()">
+              {{ DEPLOYMENT_RELOAD_LABEL_V1 }}
+            </button>
+          </div>
+        </Transition>
+
         <!--
           No Bot, no composer. A disabled input under a made-up Bot name reads
           as a broken Bot; the first-run pane above points at making one.
@@ -1618,11 +1714,24 @@ function handleComposerKeydown(event: KeyboardEvent): void {
             v-if="appletChip"
             type="button"
             class="applet-chip"
+            data-testid="applet-chip"
             @click="toggleRightPanel"
           >
             <UiIcon name="applets" size="sm" />
-            <span class="applet-chip-name">Applet: {{ appletChip }}</span>
-            <span class="applet-chip-action">Open</span>
+            <span class="applet-chip-text">
+              <span class="applet-chip-name">Applet: {{ appletChip }}</span>
+              <span v-if="appletChipStatus" class="applet-chip-status">
+                <span
+                  v-if="appletChipStatus.working"
+                  class="applet-chip-dot"
+                  aria-hidden="true"
+                />
+                {{ appletChipStatus.failure ?? appletChipStatus.label }}
+              </span>
+            </span>
+            <span class="applet-chip-action">{{
+              appletChipStatus ? "Watch" : "Open"
+            }}</span>
           </button>
           <div class="composer-body">
             <ul v-if="attachedSkills.length > 0" class="skill-chips">

package/src/client/applet-building-view.test.ts

@@ -0,0 +1,69 @@
+/**
+ * The building view, as the two surfaces that draw it are written.
+ *
+ * Bun has no single-file-component loader, so a `.vue` file is read as text
+ * here — the same thing `ComputerCard.test.ts` does. It proves the wiring the
+ * unit tests for the projection cannot: that the panel and the phone chip both
+ * read the one projection, and that neither still shows the fixed line it used
+ * to show for the whole of a build.
+ */
+import { describe, expect, test } from "bun:test";
+import { parse } from "@vue/compiler-sfc";
+
+const canvas = await Bun.file(
+  new URL("./AppletCanvas.vue", import.meta.url),
+).text();
+const app = await Bun.file(
+  new URL("./FrockBotApp.vue", import.meta.url),
+).text();
+const styles = await Bun.file(new URL("./styles.css", import.meta.url)).text();
+
+describe("the Applet canvas while the Bot is still building", () => {
+  test("the file parses as a single-file component", () => {
+    expect(parse(canvas).errors).toEqual([]);
+  });
+
+  test("the panel draws the projection rather than a fixed line", () => {
+    expect(canvas).toContain('from "./applet-progress.js"');
+    expect(canvas).toContain('data-testid="applet-canvas-progress"');
+    expect(canvas).toContain("progress.label");
+    expect(canvas).toContain("progress.failure");
+    expect(canvas).toContain("progress.output");
+    // The line the panel used to show for minutes on end, whatever happened.
+    expect(canvas).not.toContain("Not published yet");
+  });
+
+  test("the progress block is announced and is gone once the Applet runs", () => {
+    expect(canvas).toContain('role="status"');
+    expect(canvas).toContain(
+      'v-if="applet && !loading && progress && beingBuilt"',
+    );
+  });
+
+  test("the build output is monospace and cannot grow without bound", () => {
+    expect(canvas).toContain("font-family: var(--frock-font-mono);");
+    expect(canvas).toContain("max-height: 180px;");
+  });
+
+  test("the working dot stops moving where motion is not wanted", () => {
+    expect(canvas).toContain("@media (prefers-reduced-motion: reduce)");
+    expect(canvas).toContain(
+      ".applet-canvas-progress-dot {\n    animation: none;",
+    );
+  });
+});
+
+describe("the phone's way in", () => {
+  test("the chip carries the same line and opens the same panel", () => {
+    expect(app).toContain('from "./applet-progress.js"');
+    expect(app).toContain("appletChipStatus");
+    // The one overlay: the right panel drawer, opened by the one toggle.
+    expect(app).toContain('class="applet-chip"');
+    expect(app).toContain('@click="toggleRightPanel"');
+  });
+
+  test("the chip has room for a second line", () => {
+    expect(styles).toContain(".applet-chip-status {");
+    expect(styles).toContain("min-height: var(--frock-control-md);");
+  });
+});

package/src/client/applet-progress.test.ts

@@ -0,0 +1,300 @@
+import { describe, expect, test } from "bun:test";
+import {
+  APPLET_PROGRESS_OUTPUT_LINES_V1,
+  appletCommandOutputV1,
+  appletIsBeingBuiltV1,
+  appletProgressV1,
+} from "./applet-progress.js";
+import type { WebToolActivity } from "../shared.js";
+
+const draft = {
+  appletId: "u1abc.todo",
+  displayName: "Weekly Todos",
+  status: "draft" as const,
+  tools: [],
+  createdAt: "2026-09-05T00:00:00.000Z",
+};
+const published = {
+  ...draft,
+  status: "published" as const,
+  currentGenerationId: "generation-2",
+};
+
+const sourceOf = (...paths: string[]) => ({
+  appletId: draft.appletId,
+  truncated: false,
+  files: paths.map((path) => ({
+    path,
+    text: "export default class {}",
+    generationId: "w-1",
+    changedAt: "2026-09-05T00:01:00.000Z",
+  })),
+});
+
+function tool(
+  name: string,
+  status: WebToolActivity["status"],
+  extra: Partial<WebToolActivity> = {},
+): WebToolActivity {
+  return { id: `${name}-${status}`, name, status, ...extra };
+}
+
+describe("what the Bot is doing to the focused Applet", () => {
+  test("no Applet is no line at all", () => {
+    expect(appletProgressV1({})).toBeUndefined();
+    expect(appletProgressV1({ applet: null })).toBeUndefined();
+  });
+
+  test("a draft nothing has been said about yet reads as still being built", () => {
+    // The same words the Applets list uses, so the two surfaces agree.
+    expect(appletProgressV1({ applet: draft })).toMatchObject({
+      stage: "unknown",
+      label: "Still being built",
+      working: false,
+    });
+  });
+
+  test("the create call is the first thing worth saying", () => {
+    expect(
+      appletProgressV1({
+        applet: draft,
+        tools: [tool("applets/applet_create", "completed")],
+      })?.stage,
+    ).toBe("created");
+  });
+
+  test("a native tool name counts the same as a namespaced one", () => {
+    expect(
+      appletProgressV1({
+        applet: draft,
+        tools: [tool("applet_create", "running")],
+      }),
+    ).toMatchObject({ stage: "created", working: true });
+  });
+
+  test("source on the Workspace means the Bot has been writing", () => {
+    expect(
+      appletProgressV1({
+        applet: draft,
+        source: sourceOf("server.ts", "ui.tsx"),
+        tools: [tool("applets/applet_create", "completed")],
+      })?.label,
+    ).toBe("Writing the code");
+  });
+
+  test("a check that passed moves the line on and shows what it printed", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      source: sourceOf("server.ts"),
+      tools: [
+        tool("computer_exec", "completed", {
+          text: "applet check: no problems found",
+        }),
+      ],
+    });
+    expect(progress).toMatchObject({
+      stage: "checking",
+      label: "The code checks out",
+      done: true,
+    });
+    expect(progress?.output).toEqual(["applet check: no problems found"]);
+    expect(progress?.failure).toBeUndefined();
+  });
+
+  test("a check that found errors is a failure in plain words", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("computer_exec", "failed", {
+          text: "ui.tsx:3:1 Unexpected any\napplet check: 1 error(s)",
+        }),
+      ],
+    });
+    expect(progress?.stage).toBe("checking");
+    expect(progress?.failure).toBe("The code has problems that need fixing.");
+    expect(progress?.output).toEqual([
+      "ui.tsx:3:1 Unexpected any",
+      "applet check: 1 error(s)",
+    ]);
+  });
+
+  test("a build is recognised by the files it says it wrote", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("computer_exec", "completed", {
+          text: [
+            "dist/server.js 0a1b2c3d4e5f",
+            "dist/ui.html f5e4d3c2b1a0",
+            "dist/manifest.json 1 tool(s): add_todo",
+          ].join("\n"),
+        }),
+      ],
+    });
+    expect(progress).toMatchObject({
+      stage: "building",
+      label: "Built and ready to go live",
+      done: true,
+    });
+    expect(progress?.output).toHaveLength(3);
+  });
+
+  test("a shell command that is not the Applet CLI says nothing", () => {
+    expect(
+      appletCommandOutputV1("total 0\ndrwxr-xr-x  2 box box"),
+    ).toBeUndefined();
+    expect(appletCommandOutputV1(undefined)).toBeUndefined();
+    expect(
+      appletProgressV1({
+        applet: draft,
+        source: sourceOf("server.ts"),
+        tools: [tool("computer_exec", "completed", { text: "hello" })],
+      })?.stage,
+    ).toBe("writing");
+  });
+
+  test("a shell command still running is the Bot working, not a new step", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      source: sourceOf("server.ts"),
+      tools: [tool("computer_exec", "running")],
+    });
+    expect(progress).toMatchObject({ stage: "writing", working: true });
+  });
+
+  test("output is bounded, newest lines kept", () => {
+    const lines = Array.from(
+      { length: 40 },
+      (_, index) => `ui.tsx:${index}:1 problem`,
+    );
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("computer_exec", "failed", {
+          text: [...lines, "applet check: 40 error(s)"].join("\n"),
+        }),
+      ],
+    });
+    expect(progress?.output).toHaveLength(APPLET_PROGRESS_OUTPUT_LINES_V1);
+    expect(progress?.output?.at(-1)).toBe("applet check: 40 error(s)");
+  });
+
+  test("a very long line is cut rather than allowed to run off the panel", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("computer_exec", "failed", {
+          text: `applet check: 1 error(s)\n${"x".repeat(500)}`,
+        }),
+      ],
+    });
+    expect(progress?.output?.at(-1)?.length).toBe(200);
+    expect(progress?.output?.at(-1)?.endsWith("…")).toBe(true);
+  });
+
+  test("a publish in flight is the last step, and clears an earlier complaint", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("computer_exec", "failed", { text: "applet check: 2 error(s)" }),
+        tool("applets/applet_publish", "running", {
+          input: { appletId: draft.appletId },
+        }),
+      ],
+    });
+    expect(progress).toMatchObject({
+      stage: "publishing",
+      label: "Getting it ready to open",
+      working: true,
+    });
+    expect(progress?.failure).toBeUndefined();
+  });
+
+  test("a publish that was refused says why, in the words it was refused with", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("applets/applet_publish", "failed", {
+          input: { appletId: draft.appletId },
+          text: 'Publishing u1abc.todo failed: "add_todo" is already a tool of "Shopping"',
+        }),
+      ],
+    });
+    expect(progress?.stage).toBe("publishing");
+    expect(progress?.failure).toBe(
+      'Publishing u1abc.todo failed: "add_todo" is already a tool of "Shopping"',
+    );
+  });
+
+  test("a publish of another Applet never moves this one's line", () => {
+    expect(
+      appletProgressV1({
+        applet: draft,
+        tools: [
+          tool("applets/applet_publish", "running", {
+            input: { appletId: "u1abc.other" },
+          }),
+        ],
+      })?.stage,
+    ).toBe("unknown");
+  });
+
+  test("a live Applet is ready, and the canvas stops showing progress", () => {
+    const progress = appletProgressV1({ applet: published });
+    expect(progress).toMatchObject({
+      stage: "published",
+      label: "Ready to use",
+      done: true,
+    });
+    expect(appletIsBeingBuiltV1(progress)).toBe(false);
+    expect(appletIsBeingBuiltV1(appletProgressV1({ applet: draft }))).toBe(
+      true,
+    );
+    expect(appletIsBeingBuiltV1(undefined)).toBe(false);
+  });
+
+  test("a step still going never claims it finished", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      tools: [
+        tool("computer_exec", "completed", {
+          text: "applet check: no problems found",
+        }),
+        tool("computer_exec", "running"),
+      ],
+    });
+    expect(progress).toMatchObject({ done: false, working: true });
+    expect(progress?.label).toBe("Checking the code");
+  });
+
+  test("a Turn still running says so even when no Applet tool has been called", () => {
+    expect(appletProgressV1({ applet: draft, running: true })?.working).toBe(
+      true,
+    );
+  });
+
+  test("the outcome the Applet authority recorded is used when it has one", () => {
+    const progress = appletProgressV1({
+      applet: draft,
+      build: {
+        status: "failed",
+        command: "build",
+        summary: "dist/manifest.json is invalid",
+        diagnostics: ["hashes.server must be a sha-256 hex digest"],
+      },
+    });
+    expect(progress).toMatchObject({
+      stage: "building",
+      failure: "dist/manifest.json is invalid",
+    });
+    expect(progress?.output).toEqual([
+      "hashes.server must be a sha-256 hex digest",
+    ]);
+  });
+
+  test("an unknown recorded outcome is not a step that happened", () => {
+    expect(
+      appletProgressV1({ applet: draft, build: { status: "unknown" } })?.stage,
+    ).toBe("unknown");
+  });
+});