@frockbot/plugin-shell 0.3.21 → 0.3.23

package/src/client/AppletCanvas.vue

@@ -22,6 +22,11 @@ import {
   appletSourceFingerprintV1,
   mostRecentlyChangedFileV1,
 } from "./applets-client.js";
+import {
+  appletIsBeingBuiltV1,
+  appletProgressToolsV1,
+  appletProgressV1,
+} from "./applet-progress.js";
 import { packageIframePagesForSlotV1 } from "./package-iframe-entries.js";
 import PackageIframeHost from "./PackageIframeHost.vue";
 
@@ -46,6 +51,26 @@ const isRunning = computed(() => Boolean(web.value.activeRunId));
 const canvasState = computed(() => web.value.appletCanvas);
 const failure = computed(() => web.value.appletCanvasError);
 
+/*
+ * What the Bot is doing to this Applet, in one line.
+ *
+ * A publish is minutes away from a create, and for all of it there is nothing
+ * to run. The panel used to answer that with one fixed line about the Applet
+ * not being live and a file list, which never changed and never said whether
+ * anything was happening. This is the sentence in between, projected from what
+ * the thread already shows: no new read, no new durable state.
+ */
+const progress = computed(() =>
+  appletProgressV1({
+    applet: applet.value ?? null,
+    source: source.value,
+    build: build.value,
+    tools: appletProgressToolsV1(web.value.messages),
+    running: isRunning.value,
+  }),
+);
+const beingBuilt = computed(() => appletIsBeingBuiltV1(progress.value));
+
 /** The Applets Package's right-panel page, when its Composition carries one. */
 const panelPage = computed(
   () => packageIframePagesForSlotV1(web.value.packageUi, RIGHT_PANEL_SLOT)[0],
@@ -212,8 +237,11 @@ async function clearFocus(): Promise<void> {
       /></span>
       <div class="applet-canvas-title">
         <strong>{{ applet?.displayName ?? "Applet" }}</strong>
+        <!--
+          While it is being built the line under the name is the pinned
+          building view below, not a copy of it here.
+        -->
         <small v-if="viewer">{{ generationLabel(viewer.generationId) }}</small>
-        <small v-else>Not published yet</small>
       </div>
       <div
         v-if="canShowApp"
@@ -255,6 +283,39 @@ async function clearFocus(): Promise<void> {
       />
     </header>
 
+    <!--
+      Where the work has got to, pinned under the header while the Applet is
+      still being built: one line a person can read, the reason it stopped when
+      it stopped, and the tail of whatever the check or the build printed —
+      which is the only thing that helps when the Bot is going round in circles
+      on a type error. It sits outside the scrolling column deliberately: a
+      person reading the source still wants to know what is happening to it.
+    -->
+    <section
+      v-if="applet && !loading && progress && beingBuilt"
+      class="applet-canvas-progress"
+      :class="{ 'applet-canvas-progress-wrong': Boolean(progress.failure) }"
+      data-testid="applet-canvas-progress"
+      role="status"
+    >
+      <p class="applet-canvas-progress-line">
+        <span
+          v-if="progress.working"
+          class="applet-canvas-progress-dot"
+          aria-hidden="true"
+        />
+        <UiIcon v-else-if="progress.failure" name="close" size="sm" />
+        <span>{{ progress.label }}</span>
+      </p>
+      <p v-if="progress.failure" class="applet-canvas-progress-failure">
+        {{ progress.failure }}
+      </p>
+      <pre
+        v-if="progress.output"
+        class="applet-canvas-progress-output"
+      ><code>{{ progress.output.join("\n") }}</code></pre>
+    </section>
+
     <div class="applet-canvas-body">
       <!-- Loading: the shape of what is coming, with a caption that says so. -->
       <div v-if="loading" class="applet-canvas-loading">
@@ -297,21 +358,6 @@ async function clearFocus(): Promise<void> {
             <span>This is taking longer than it should.</span>
             <button type="button" @click="retry">Try again</button>
           </div>
-          <p
-            v-if="build && build.status !== 'unknown'"
-            class="applet-canvas-build"
-            :class="`applet-canvas-build-${build.status}`"
-          >
-            <UiIcon
-              :name="build.status === 'passed' ? 'check' : 'close'"
-              size="sm"
-            />
-            <span
-              >{{ build.command === "build" ? "Build" : "Check" }}
-              {{ build.status
-              }}{{ build.summary ? `: ${build.summary}` : "" }}</span
-            >
-          </p>
           <div v-if="sortedFiles.length > 0" class="applet-canvas-files">
             <button
               v-for="file in sortedFiles"
@@ -573,28 +619,76 @@ async function clearFocus(): Promise<void> {
   white-space: pre;
 }
 
-.applet-canvas-build {
+/* Where the work has got to: the panel's own header for the building state. */
+.applet-canvas-progress {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--frock-border);
+  background: var(--frock-surface-subtle);
+}
+
+.applet-canvas-progress-wrong {
+  border-bottom-color: var(--frock-danger-border);
+  background: var(--frock-danger-surface);
+}
+
+.applet-canvas-progress-line {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin: 0;
-  padding: 6px 10px;
-  border: 1px solid var(--frock-border);
-  border-radius: var(--frock-radius-control);
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-xs);
+  color: var(--frock-text);
+  font-size: var(--frock-text-sm);
+  font-weight: 600;
+}
+
+.applet-canvas-progress-wrong .applet-canvas-progress-line {
+  color: var(--frock-danger-text);
+}
+
+/* The same "something is happening" the thread uses, at the size of a word. */
+.applet-canvas-progress-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--frock-action-primary);
+  animation: applet-progress-pulse 1.4s ease-in-out infinite;
 }
 
-.applet-canvas-build-passed {
-  border-color: var(--frock-success-border);
-  color: var(--frock-success);
-  background: var(--frock-success-surface);
+@keyframes applet-progress-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+
+  50% {
+    opacity: 1;
+  }
 }
 
-.applet-canvas-build-failed {
-  border-color: var(--frock-danger-border);
+.applet-canvas-progress-failure {
+  margin: 0;
   color: var(--frock-danger-text);
-  background: var(--frock-danger-surface);
+  font-size: var(--frock-text-sm);
+}
+
+.applet-canvas-progress-output {
+  max-height: 180px;
+  margin: 0;
+  overflow: auto;
+  padding: 8px 10px;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-control);
+  color: var(--frock-text-muted);
+  background: var(--frock-surface);
+  font-family: var(--frock-font-mono);
+  font-size: var(--frock-text-xs);
+  line-height: var(--frock-leading-snug);
+  white-space: pre;
 }
 
 .applet-canvas-failure {
@@ -686,5 +780,9 @@ async function clearFocus(): Promise<void> {
   .applet-app-leave-active {
     transition: none;
   }
+
+  .applet-canvas-progress-dot {
+    animation: none;
+  }
 }
 </style>

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);");
+  });
+});