@frockbot/plugin-shell 0.3.1 → 0.3.3

package/src/client/FrockBotApp.vue

@@ -27,6 +27,7 @@ import {
 } from "../shared.js";
 import { ComposerDraftStore } from "./composer-draft.js";
 import SendPayloadView from "./SendPayloadView.vue";
+import AppletCanvas from "./AppletCanvas.vue";
 import PackageIframeHost from "./PackageIframeHost.vue";
 import type { ClientSkillCatalogEntryV1 } from "../skill-protocol.js";
 import {
@@ -127,11 +128,113 @@ function closeDrawers(): void {
   if (!panelSurface.value) rightPanelOpen.value = false;
 }
 
+/*
+ * Escape, wherever the focus is.
+ *
+ * A drawer's own trigger disappears when the drawer opens, so focus can land
+ * back on the document body — outside this component's element — and a handler
+ * bound to the root would never see the key. The window is where "give the
+ * conversation back" has to be heard.
+ */
 function onRootKeydown(event: KeyboardEvent): void {
-  if (event.key !== "Escape" || !navOpen.value) return;
+  if (event.key !== "Escape" || event.defaultPrevented) return;
+  if (navOpen.value) {
+    event.preventDefault();
+    closeNav();
+    return;
+  }
+  // An open overlay owns Escape; closing the panel underneath it would be a
+  // second dismissal the User did not ask for.
+  if (overlaySurface.value) return;
+  // On a phone the right panel covers the conversation, so Escape gives the
+  // conversation back — the same thing tapping the scrim does.
+  if (phoneLayout.value && rightPanelOpen.value && !panelSurface.value) {
+    event.preventDefault();
+    rightPanelOpen.value = false;
+  }
+}
+
+/*
+ * The Applet canvas.
+ *
+ * A Session with a focused Applet gives the right panel to the canvas; without
+ * one the panel keeps the content its plugins put there. The canvas is wider
+ * than a summary column, and how much wider is the User's: the width they drag
+ * is theirs and is remembered per browser, which is a per-viewer convenience
+ * rather than durable state and belongs in local storage.
+ */
+const APPLET_PANEL_WIDTH_KEY = "frockbot.applet-panel-width";
+const APPLET_PANEL_MIN = 320;
+const APPLET_PANEL_MAX = 900;
+const APPLET_PANEL_DEFAULT = 480;
+
+function readStoredPanelWidth(): number {
+  try {
+    const stored = Number(window.localStorage.getItem(APPLET_PANEL_WIDTH_KEY));
+    if (!Number.isFinite(stored) || stored <= 0) return APPLET_PANEL_DEFAULT;
+    return Math.min(APPLET_PANEL_MAX, Math.max(APPLET_PANEL_MIN, stored));
+  } catch {
+    return APPLET_PANEL_DEFAULT;
+  }
+}
+
+const appletPanelWidth = ref(
+  typeof window === "undefined" ? APPLET_PANEL_DEFAULT : readStoredPanelWidth(),
+);
+const appletCanvasOpen = computed(() =>
+  Boolean(state.value.focusedAppletId && !panelSurface.value),
+);
+
+function storePanelWidth(width: number): void {
+  try {
+    window.localStorage.setItem(APPLET_PANEL_WIDTH_KEY, String(width));
+  } catch {
+    // A browser that refuses storage still resizes; it just forgets.
+  }
+}
+
+function setPanelWidth(width: number): void {
+  appletPanelWidth.value = Math.min(
+    APPLET_PANEL_MAX,
+    Math.max(APPLET_PANEL_MIN, Math.round(width)),
+  );
+}
+
+function onPanelHandlePointerDown(event: PointerEvent): void {
+  if (phoneLayout.value) return;
+  const target = event.currentTarget as HTMLElement;
+  target.setPointerCapture(event.pointerId);
+  const move = (moveEvent: PointerEvent) => {
+    setPanelWidth(window.innerWidth - moveEvent.clientX);
+  };
+  const stop = () => {
+    target.removeEventListener("pointermove", move);
+    target.removeEventListener("pointerup", stop);
+    target.removeEventListener("pointercancel", stop);
+    storePanelWidth(appletPanelWidth.value);
+  };
+  target.addEventListener("pointermove", move);
+  target.addEventListener("pointerup", stop);
+  target.addEventListener("pointercancel", stop);
+}
+
+/** The keyboard's way to do what the drag does. */
+function onPanelHandleKeydown(event: KeyboardEvent): void {
+  const step = event.shiftKey ? 64 : 16;
+  if (event.key === "ArrowLeft") setPanelWidth(appletPanelWidth.value + step);
+  else if (event.key === "ArrowRight")
+    setPanelWidth(appletPanelWidth.value - step);
+  else return;
   event.preventDefault();
-  closeNav();
+  storePanelWidth(appletPanelWidth.value);
 }
+
+/** The phone's way into a focused Applet while the panel is closed. */
+const appletChip = computed(() =>
+  phoneLayout.value && !rightPanelOpen.value && state.value.focusedAppletId
+    ? (state.value.focusedApplet?.displayName ?? "Applet")
+    : 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
@@ -167,16 +270,26 @@ const macDesktop =
 const botName = computed(
   () => state.value.botSettings?.profile.name ?? "Barebones",
 );
-const isRunning = computed(() => Boolean(state.value.activeRunId));
+/** A Turn is executing. The composer stays open; only Stop depends on this. */
+const isRunning = computed(() => Boolean(state.value.runningRunId));
 const isConnecting = computed(() => state.value.connection !== "ready");
+/**
+ * Sending while the Bot is working is the point: the message supersedes the
+ * running Turn. So the only things that close the composer are the ones that
+ * would make any message impossible.
+ */
 const canSend = computed(
   () =>
     state.value.connection === "ready" &&
     state.value.modelReady &&
     Boolean(state.value.activeBotId) &&
-    !isRunning.value &&
     draft.value.trim().length > 0,
 );
+/**
+ * Stop takes the button only while there is nothing to send. The moment the
+ * User has typed something, sending it is what they mean by interrupting.
+ */
+const showStop = computed(() => isRunning.value && !canSend.value);
 
 /*
  * Tool activity is internal to the Turn. A Turn that produced only tool calls
@@ -192,12 +305,26 @@ function attachmentsOf(message: WebChatMessage): WebToolAttachment[] {
 }
 
 function iframeEntriesFor(tool: WebToolActivity) {
-  const slot = `frockbot.tool-result:${tool.name}`;
+  const separator = tool.name.indexOf("/");
+  const namespace = separator < 0 ? undefined : tool.name.slice(0, separator);
+  const toolName = separator < 0 ? tool.name : tool.name.slice(separator + 1);
+  const slot = `frockbot.tool-result:${toolName}`;
   return (state.value.packageUi?.contributions ?? [])
+    .filter(
+      (contribution) =>
+        namespace === undefined || contribution.packageId === namespace,
+    )
     .flatMap((contribution) =>
-      contribution.mounts
-        .filter((mount) => mount.slot === slot)
-        .map((mount) => ({ contribution, slot, order: mount.order ?? 0 })),
+      contribution.pages.flatMap((page) =>
+        page.mounts
+          .filter((mount) => mount.slot === slot)
+          .map((mount) => ({
+            contribution,
+            page,
+            slot,
+            order: mount.order ?? 0,
+          })),
+      ),
     )
     .sort(
       (left, right) =>
@@ -387,12 +514,14 @@ onMounted(() => {
   window.addEventListener("popstate", applySettingsDeepLink);
   window.addEventListener("hashchange", applySettingsDeepLink);
   phoneLayoutMedia?.addEventListener("change", onPhoneLayoutChange);
+  window.addEventListener("keydown", onRootKeydown);
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener("popstate", applySettingsDeepLink);
   window.removeEventListener("hashchange", applySettingsDeepLink);
   phoneLayoutMedia?.removeEventListener("change", onPhoneLayoutChange);
+  window.removeEventListener("keydown", onRootKeydown);
 });
 
 watch(
@@ -584,16 +713,18 @@ function handleComposerKeydown(event: KeyboardEvent): void {
 </script>
 
 <template>
-  <div class="frockbot-root" @keydown="onRootKeydown">
+  <div class="frockbot-root">
     <div
       class="app-shell"
       :class="{
         'panel-open': rightPanelOpen,
         'panel-surface': Boolean(panelSurface),
+        'panel-applet': appletCanvasOpen,
         'mac-desktop': macDesktop,
         'phone-layout': phoneLayout,
         'nav-open': navOpen,
       }"
+      :style="{ '--applet-panel-width': `${appletPanelWidth}px` }"
     >
       <aside
         class="sidebar"
@@ -683,7 +814,10 @@ function handleComposerKeydown(event: KeyboardEvent): void {
             :id="turnAnchors.get(message.id)"
             :key="message.id"
             class="message"
-            :class="`message-${message.role}`"
+            :class="[
+              `message-${message.role}`,
+              { 'message-pending': message.pending },
+            ]"
           >
             <p v-if="message.role === 'system'" class="message-system-line">
               {{ message.text }}
@@ -713,12 +847,12 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               <template v-for="tool in message.tools" :key="tool.id">
                 <PackageIframeHost
                   v-for="entry in iframeEntriesFor(tool)"
-                  :key="`${tool.id}:${entry.contribution.packageId}`"
+                  :key="`${tool.id}:${entry.contribution.packageId}:${entry.page.id}`"
                   class="message-package-iframe"
                   :contribution="entry.contribution"
+                  :page="entry.page"
                   :slot="entry.slot"
-                  :state-name="`tool:${tool.name}`"
-                  :state-value="toolResultState(tool)"
+                  :states="{ [`tool:${tool.name}`]: toolResultState(tool) }"
                 />
               </template>
               <!--
@@ -870,6 +1004,21 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               </span>
             </li>
           </ul>
+          <!--
+            The phone's way back to a focused Applet. The panel is a drawer
+            here, so with it closed there is nothing on screen that says an
+            Applet is in play; this chip both says so and opens it.
+          -->
+          <button
+            v-if="appletChip"
+            type="button"
+            class="applet-chip"
+            @click="toggleRightPanel"
+          >
+            <UiIcon name="applets" size="sm" />
+            <span class="applet-chip-name">Applet: {{ appletChip }}</span>
+            <span class="applet-chip-action">Open</span>
+          </button>
           <div class="composer-body">
             <ul v-if="attachedSkills.length > 0" class="skill-chips">
               <li v-for="entry in attachedSkills" :key="entry.ref">
@@ -896,7 +1045,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
                     ? 'Model unavailable'
                     : `Message ${botName}`
               "
-              :disabled="isConnecting || !state.modelReady || isRunning"
+              :disabled="isConnecting || !state.modelReady"
               rows="1"
               role="combobox"
               :aria-expanded="skillPopoverOpen"
@@ -909,7 +1058,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
             />
           </div>
           <UiIconButton
-            v-if="isRunning"
+            v-if="showStop"
             class="stop-button"
             icon="stop"
             label="Stop generating"
@@ -936,15 +1085,40 @@ function handleComposerKeydown(event: KeyboardEvent): void {
           Both layers live in one stack so panel plugins keep their state
           while a surface holds their place.
         -->
+        <!--
+          The edge the User drags to make room for an Applet. It is a real
+          control, not a hairline: it takes focus and the arrow keys do what
+          the drag does.
+        -->
+        <div
+          v-if="appletCanvasOpen && !phoneLayout"
+          class="applet-panel-handle"
+          role="separator"
+          tabindex="0"
+          aria-orientation="vertical"
+          aria-label="Resize the Applet panel"
+          :aria-valuenow="appletPanelWidth"
+          :aria-valuemin="320"
+          :aria-valuemax="900"
+          @pointerdown="onPanelHandlePointerDown"
+          @keydown="onPanelHandleKeydown"
+        />
         <div class="right-panel-stack">
           <Transition name="panel-swap">
             <div v-show="!panelSurface" class="right-panel-content">
-              <header class="right-panel-header">
-                <k-slot name="frockbot.bot-actions" />
-              </header>
-              <div class="right-panel-body">
-                <k-slot name="frockbot.right-panel" />
-              </div>
+              <!--
+                A focused Applet takes the panel; with none, the panel is the
+                one its plugins have always drawn.
+              -->
+              <AppletCanvas v-if="appletCanvasOpen" />
+              <template v-else>
+                <header class="right-panel-header">
+                  <k-slot name="frockbot.bot-actions" />
+                </header>
+                <div class="right-panel-body">
+                  <k-slot name="frockbot.right-panel" />
+                </div>
+              </template>
             </div>
           </Transition>
           <Transition name="panel-swap">

package/src/client/PackageEntryTrigger.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/**
+ * One declarative Package entry in the sidebar.
+ *
+ * Everything drawn here is manifest data — the label, the icon name, and the
+ * page the entry opens — so a Package reaches the sidebar without running any
+ * code in the app origin. The icon is looked up in the shared set; a Package
+ * naming an icon this client does not have falls back to the generic one
+ * rather than drawing nothing.
+ */
+import { clientSurfaceRegistryKey } from "@frockbot/client-core";
+import { UiIcon, uiIconPaths, type UiIconName } from "@frockbot/client-ui";
+import { computed, inject } from "vue";
+import type { PackageIframeEntryV1 } from "./package-iframe-entries.js";
+
+const props = defineProps<{ entry: PackageIframeEntryV1 }>();
+const surfaces = inject(clientSurfaceRegistryKey);
+if (!surfaces) throw new Error("client surface registry was not provided");
+
+const icon = computed<UiIconName>(() =>
+  Object.hasOwn(uiIconPaths, props.entry.entry.icon)
+    ? (props.entry.entry.icon as UiIconName)
+    : "plugins",
+);
+
+function open(): void {
+  if (surfaces?.has(props.entry.surfaceId))
+    surfaces.open(props.entry.surfaceId);
+}
+</script>
+
+<template>
+  <button class="package-entry-trigger" type="button" @click="open">
+    <span class="package-entry-trigger__icon"><UiIcon :name="icon" /></span>
+    {{ entry.entry.label }}
+  </button>
+</template>
+
+<style scoped>
+.package-entry-trigger {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+  gap: 10px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--frock-radius-control);
+  color: var(--frock-text);
+  background: transparent;
+  font-size: var(--frock-text-md);
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--frock-motion-fast);
+}
+
+.package-entry-trigger:hover {
+  background: var(--frock-fill-hover);
+}
+
+.package-entry-trigger:active {
+  background: var(--frock-fill-pressed);
+}
+
+.package-entry-trigger__icon {
+  display: grid;
+  width: var(--frock-avatar-sm);
+  height: var(--frock-avatar-sm);
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 8px;
+  color: var(--frock-action-primary);
+  background: var(--frock-surface);
+  box-shadow: inset 0 0 0 1px var(--frock-border);
+}
+</style>