@frockbot/plugin-shell 0.1.4 → 0.2.0

package/src/client/FrockBotApp.vue

@@ -23,9 +23,11 @@ import {
   type WebChatMessage,
   type WebTaskChip,
   type WebToolAttachment,
+  type WebToolActivity,
 } from "../shared.js";
 import { ComposerDraftStore } from "./composer-draft.js";
 import SendPayloadView from "./SendPayloadView.vue";
+import PackageIframeHost from "./PackageIframeHost.vue";
 import type { ClientSkillCatalogEntryV1 } from "../skill-protocol.js";
 import {
   nextSkillHighlightV1,
@@ -189,6 +191,30 @@ function attachmentsOf(message: WebChatMessage): WebToolAttachment[] {
   return message.tools.flatMap((tool) => tool.attachments ?? []);
 }
 
+function iframeEntriesFor(tool: WebToolActivity) {
+  const slot = `frockbot.tool-result:${tool.name}`;
+  return (state.value.packageUi?.contributions ?? [])
+    .flatMap((contribution) =>
+      contribution.mounts
+        .filter((mount) => mount.slot === slot)
+        .map((mount) => ({ contribution, slot, order: mount.order ?? 0 })),
+    )
+    .sort(
+      (left, right) =>
+        left.order - right.order ||
+        left.contribution.packageId.localeCompare(right.contribution.packageId),
+    );
+}
+
+function toolResultState(tool: WebToolActivity): unknown {
+  if (tool.text === undefined) return { status: tool.status };
+  try {
+    return JSON.parse(tool.text) as unknown;
+  } catch {
+    return { content: tool.text, isError: tool.status === "failed" };
+  }
+}
+
 /** The Workspace read route for one encoded `WorkspacePathV1`. */
 function workspaceFileUrl(path: string): string {
   const botId = state.value.activeBotId ?? "";
@@ -251,6 +277,7 @@ function isVisible(message: WebChatMessage): boolean {
   // visible act was dispatching a subagent.
   return (
     message.text.length > 0 ||
+    message.tools.some((tool) => iframeEntriesFor(tool).length > 0) ||
     message.sends.length > 0 ||
     (message.tasks?.length ?? 0) > 0 ||
     message.status === "streaming"
@@ -687,6 +714,17 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               <div v-if="message.text" class="message-bubble">
                 <UiMarkdown :text="message.text" />
               </div>
+              <template v-for="tool in message.tools" :key="tool.id">
+                <PackageIframeHost
+                  v-for="entry in iframeEntriesFor(tool)"
+                  :key="`${tool.id}:${entry.contribution.packageId}`"
+                  class="message-package-iframe"
+                  :contribution="entry.contribution"
+                  :slot="entry.slot"
+                  :state-name="`tool:${tool.name}`"
+                  :state-value="toolResultState(tool)"
+                />
+              </template>
               <!--
                 A binary a tool filed in the Workspace, drawn from the
                 Workspace read route. The thread carries the path, never the

package/src/client/PackageIframeHost.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import {
+  decodePackageIframePageMessageV1,
+  packageIframeToolAllowedV1,
+  type PackageIframeContributionViewV1,
+  type PackageIframeHostMessageV1,
+} from "@frockbot/kernel-contracts";
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { frockBotWebDataKey } from "../shared.js";
+import { postPackageIframeHostMessage } from "./package-iframe-host-message.js";
+
+const props = defineProps<{
+  contribution: PackageIframeContributionViewV1;
+  slot: string;
+  stateName: string;
+  stateValue: unknown;
+}>();
+const providedWeb = inject(frockBotWebDataKey);
+if (!providedWeb) throw new Error("Package iframe host data was not provided");
+const web = providedWeb;
+const frame = ref<HTMLIFrameElement>();
+const height = ref(240);
+const failure = ref<string>();
+const lastStateWireByName = new Map<string, string>();
+const catalog = computed(() => web.value.packageUi);
+const source = computed(() => {
+  const origin = catalog.value?.artifactOrigin;
+  return origin
+    ? `${origin}/packages/${props.contribution.artifact.contentHash}.html`
+    : "about:blank";
+});
+
+const THEME_TOKEN_NAMES = [
+  "surface",
+  "surface-raised",
+  "surface-subtle",
+  "text",
+  "text-muted",
+  "border",
+  "accent-surface",
+  "accent-text",
+  "radius-card",
+] as const;
+
+function themeTokens(): Record<string, string> {
+  const styles = getComputedStyle(document.documentElement);
+  return Object.fromEntries(
+    THEME_TOKEN_NAMES.map((name) => [
+      name,
+      styles.getPropertyValue(`--frock-${name}`).trim(),
+    ]),
+  );
+}
+
+function post(message: PackageIframeHostMessageV1): void {
+  const target = frame.value?.contentWindow;
+  if (!target) return;
+  try {
+    postPackageIframeHostMessage(target, message, lastStateWireByName);
+  } catch (error) {
+    failure.value =
+      error instanceof Error ? error.message : "Package page state is invalid";
+  }
+}
+
+function initialize(): void {
+  const botId = web.value.activeBotId;
+  if (!botId) return;
+  lastStateWireByName.clear();
+  post({
+    schemaVersion: 1,
+    type: "init",
+    themeTokens: themeTokens(),
+    packageId: props.contribution.packageId,
+    botId,
+    slot: props.slot,
+  });
+  post({
+    schemaVersion: 1,
+    type: "state",
+    name: props.stateName,
+    value: props.stateValue,
+  });
+}
+
+watch(
+  () => [props.stateName, props.stateValue] as const,
+  () =>
+    post({
+      schemaVersion: 1,
+      type: "state",
+      name: props.stateName,
+      value: props.stateValue,
+    }),
+  { deep: true },
+);
+
+async function onMessage(event: MessageEvent): Promise<void> {
+  if (!frame.value?.contentWindow || event.source !== frame.value.contentWindow)
+    return;
+  let message;
+  try {
+    message = decodePackageIframePageMessageV1(event.data);
+  } catch {
+    return;
+  }
+  if (message.type === "resize") {
+    height.value = Math.min(1_200, Math.max(96, Math.round(message.height)));
+    return;
+  }
+  if (!packageIframeToolAllowedV1(props.contribution, message.name)) {
+    failure.value = `This Package did not declare ${message.name}.`;
+    return;
+  }
+  failure.value = undefined;
+  try {
+    const result = await web.value.callPackageUiTool(
+      props.contribution,
+      message.name,
+      message.input,
+    );
+    post({
+      schemaVersion: 1,
+      type: "state",
+      name: `tool:${message.name}`,
+      value: result,
+    });
+  } catch (error) {
+    failure.value = error instanceof Error ? error.message : "Tool call failed";
+    post({
+      schemaVersion: 1,
+      type: "state",
+      name: `tool:${message.name}`,
+      value: { isError: true, content: failure.value },
+    });
+  }
+}
+
+onMounted(() => window.addEventListener("message", onMessage));
+onBeforeUnmount(() => window.removeEventListener("message", onMessage));
+</script>
+
+<template>
+  <section class="package-iframe-frame">
+    <header class="package-iframe-attribution">
+      <strong>{{ contribution.displayName }}</strong>
+      <span>{{ contribution.provenance }} Package</span>
+    </header>
+    <!-- Load eagerly because lazy iframes defer the init/resize handshake until the browser decides the frame is near the viewport, which headless Chromium may never do. -->
+    <iframe
+      ref="frame"
+      :title="`${contribution.displayName} Package page`"
+      :src="source"
+      :style="{ height: `${height}px` }"
+      sandbox="allow-scripts"
+      credentialless
+      referrerpolicy="no-referrer"
+      @load="initialize"
+    />
+    <p v-if="failure" class="package-iframe-failure" role="alert">
+      {{ failure }}
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.package-iframe-frame {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--frock-border);
+  border-radius: var(--frock-radius-card);
+  background: var(--frock-surface);
+}
+
+.package-iframe-attribution {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 36px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--frock-border);
+  color: var(--frock-text);
+  background: var(--frock-surface-subtle);
+  font-size: var(--frock-text-xs);
+}
+
+.package-iframe-attribution span,
+.package-iframe-failure {
+  color: var(--frock-text-muted);
+}
+
+iframe {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  border: 0;
+  background: transparent;
+}
+
+.package-iframe-failure {
+  margin: 0;
+  padding: 8px 12px;
+  border-top: 1px solid var(--frock-danger-border);
+  color: var(--frock-danger-text);
+  font-size: var(--frock-text-xs);
+}
+
+@media (max-width: 640px) {
+  .package-iframe-attribution {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 2px;
+  }
+}
+</style>

package/src/client/PackageIframeSettings.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { frockBotWebDataKey } from "../shared.js";
+import PackageIframeHost from "./PackageIframeHost.vue";
+
+const providedWeb = inject(frockBotWebDataKey);
+if (!providedWeb)
+  throw new Error("Package iframe settings data was not provided");
+const web = providedWeb;
+const slot = "frockbot.bot-settings-sections";
+const contributions = computed(() =>
+  (web.value.packageUi?.contributions ?? [])
+    .flatMap((contribution) =>
+      contribution.mounts
+        .filter((mount) => mount.slot === slot)
+        .map((mount) => ({ contribution, order: mount.order ?? 0 })),
+    )
+    .sort(
+      (left, right) =>
+        left.order - right.order ||
+        left.contribution.packageId.localeCompare(right.contribution.packageId),
+    ),
+);
+
+function settingsFor(packageId: string): Record<string, unknown> {
+  const installation = web.value.userSettings?.packages.find(
+    (candidate) => candidate.packageId === packageId,
+  );
+  return installation?.values ?? {};
+}
+</script>
+
+<template>
+  <div v-if="contributions.length > 0" class="package-iframe-settings">
+    <PackageIframeHost
+      v-for="entry in contributions"
+      :key="entry.contribution.packageId"
+      :contribution="entry.contribution"
+      :slot="slot"
+      state-name="settings"
+      :state-value="settingsFor(entry.contribution.packageId)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.package-iframe-settings {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+</style>

package/src/client/SendPayloadView.vue

@@ -19,7 +19,6 @@
  */
 import { UiButton, UiMarkdown } from "@frockbot/client-ui";
 import { computed, inject, ref } from "vue";
-import { settingsLinkV1 } from "../settings-links.js";
 import { frockBotWebDataKey, type WebSendPayload } from "../shared.js";
 
 const props = defineProps<{ send: WebSendPayload }>();
@@ -39,17 +38,6 @@ const widget = computed(() =>
 const attachment = computed(() =>
   payload.value?.type === "attachment" ? payload.value : undefined,
 );
-/**
- * The connect card. It carries no URL and never will: the Bot recorded a
- * pending decision, and only the User — in Settings, where the host authors
- * the link at the moment they press it — can complete one. So this draws the
- * request and points at the place the decision is made, and is deliberately
- * not a button that authorizes anything.
- */
-const connectCard = computed(() =>
-  payload.value?.type === "connect-card" ? payload.value : undefined,
-);
-const connectionsLink = settingsLinkV1({ anchor: "user-packages" });
 const approval = computed(() =>
   payload.value?.type === "approval" ? payload.value : undefined,
 );
@@ -115,21 +103,6 @@ const unsupported = computed(
     </p>
   </section>
 
-  <section
-    v-else-if="connectCard"
-    class="send-connect-card"
-    aria-label="Connection request"
-  >
-    <p class="send-connect-title">{{ connectCard.title }}</p>
-    <p v-if="connectCard.body" class="send-connect-body">
-      {{ connectCard.body }}
-    </p>
-    <p class="send-connect-help">
-      Open Settings → Plugins to authorize it. Only you can complete this.
-      <a :href="connectionsLink">{{ connectionsLink }}</a>
-    </p>
-  </section>
-
   <section
     v-else-if="approval"
     class="send-approval"
@@ -221,39 +194,6 @@ const unsupported = computed(
   list-style: none;
 }
 
-.send-connect-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border: 1px solid var(--frock-border);
-  border-radius: var(--frock-radius-card);
-  background: var(--frock-surface-raised);
-  padding: 0.75rem 1rem;
-}
-
-.send-connect-title {
-  margin: 0;
-  color: var(--frock-text);
-  font-weight: 600;
-  font-size: var(--frock-text-base);
-  line-height: var(--frock-leading-snug);
-}
-
-.send-connect-body {
-  margin: 0;
-  color: var(--frock-text);
-  font-size: var(--frock-text-sm);
-  line-height: var(--frock-leading-normal);
-}
-
-.send-connect-help {
-  margin: 0;
-  color: var(--frock-text-muted);
-  font-size: var(--frock-text-sm);
-  line-height: var(--frock-leading-normal);
-  overflow-wrap: anywhere;
-}
-
 .send-widget-options li {
   border: 1px solid var(--frock-border);
   border-radius: var(--frock-radius-control);

package/src/client/index.test.ts

@@ -395,6 +395,125 @@ describe("Bot selection", () => {
     expect(provided.value.activeBotId).toBe("new");
     expect(provided.value.botSettings?.botId).toBe("new");
   });
+
+  test("loads sandboxed Package UI and transports only declared iframe tools", async () => {
+    Object.defineProperty(globalThis, "window", {
+      configurable: true,
+      value: {
+        location: { href: "https://app.example/" },
+        history: { replaceState: () => undefined },
+      },
+    });
+    const contribution = {
+      packageId: "weather-page",
+      displayName: "Sydney Weather",
+      provenance: "Bot-authored" as const,
+      artifact: {
+        contentHash: "a".repeat(64),
+        size: 1,
+        mediaType: "text/html" as const,
+        bundlerVersion: "frockbot-inline-html@1",
+      },
+      mounts: [{ slot: "frockbot.bot-settings-sections", order: 20 }],
+      declaredTools: ["weather_lookup"],
+    };
+    const requests: Array<{
+      path: string;
+      method?: string;
+      body?: string;
+    }> = [];
+    const slots: string[] = [];
+    let provided: Ref<FrockBotWebData> | undefined;
+    await shellClientPlugin({
+      transport: {
+        turn: () => Promise.resolve({ runId: "run", text: "", events: [] }),
+        readConfiguration: (query) => {
+          if (query.type !== "bot/get")
+            throw new Error("unexpected User query");
+          return Promise.resolve(initializeBotSettingsV1(query.botId));
+        },
+        hostedRequest: (path, method, body) => {
+          requests.push({ path, method, body });
+          if (path.endsWith("/package-ui")) {
+            return Promise.resolve({
+              schemaVersion: 1,
+              botId: "primary",
+              generationId: "generation-ui",
+              artifactOrigin: "https://ui.app.example",
+              contributions: [contribution],
+            });
+          }
+          if (path.endsWith("/package-ui/tools")) {
+            return Promise.resolve({
+              schemaVersion: 1,
+              runId: "run-iframe-tool",
+              text: "Sydney Weather",
+              events: [],
+            });
+          }
+          return Promise.resolve({});
+        },
+      },
+      slot: (registration) => {
+        slots.push(registration.slot);
+        return () => {};
+      },
+      inject: () => {
+        throw new Error("unexpected client provider injection");
+      },
+      provide: (_key, value) => {
+        provided = value as Ref<FrockBotWebData>;
+        return () => {};
+      },
+    });
+    if (!provided) throw new Error("shell data was not provided");
+    provided.value.userSettings = {
+      schemaVersion: 1,
+      revision: 1,
+      profile: { name: "User" },
+      packages: [],
+      connections: [],
+    };
+
+    await provided.value.selectBot("primary");
+
+    expect(slots).toContain("frockbot.bot-settings-sections");
+    expect(requests.filter(({ path }) => path.endsWith("/package-ui"))).toEqual(
+      [
+        {
+          path: "/api/bots/primary/package-ui",
+          method: undefined,
+          body: undefined,
+        },
+      ],
+    );
+    expect(provided.value.packageUi?.contributions).toEqual([contribution]);
+
+    expect(
+      await provided.value.callPackageUiTool(contribution, "weather_lookup", {
+        city: "Sydney",
+      }),
+    ).toEqual({ content: "Sydney Weather", isError: false });
+    const toolRequest = requests.find(({ path }) =>
+      path.endsWith("/package-ui/tools"),
+    );
+    expect(toolRequest?.method).toBe("POST");
+    expect(JSON.parse(toolRequest?.body ?? "null")).toEqual({
+      schemaVersion: 1,
+      commandId: expect.any(String),
+      generationId: "generation-ui",
+      packageId: "weather-page",
+      name: "weather_lookup",
+      input: { city: "Sydney" },
+    });
+
+    const requestCount = requests.length;
+    await expect(
+      provided.value.callPackageUiTool(contribution, "package_author", {}),
+    ).rejects.toThrow("did not declare");
+    expect(requests).toHaveLength(requestCount);
+  });
+
   test("preserves load failures and ignores stale User settings", async () => {
     let provided: Ref<FrockBotWebData> | undefined;
     const older = Promise.withResolvers<UserSettingsViewV1>();

package/src/client/index.ts

@@ -17,7 +17,12 @@ import type {
   ConnectionCommandV1,
 } from "@frockbot/connection-core";
 import { decodeFrockBotManifest } from "@frockbot/kernel-composition";
-import { decodeSendToUserPayloadV1 } from "@frockbot/kernel-contracts";
+import {
+  decodePackageIframeCatalogV1,
+  packageIframeToolAllowedV1,
+  decodeSendToUserPayloadV1,
+  type PackageIframeContributionViewV1,
+} from "@frockbot/kernel-contracts";
 import { createClientSurfaceRegistry } from "@frockbot/client-ui";
 import type {
   BotNameProvenanceV1,
@@ -48,6 +53,7 @@ import {
 import { MCP_OAUTH_CONNECTION_TYPE_ID } from "@frockbot/plugin-mcp/agent";
 import { decodeStartConnectionResultV1 } from "@frockbot/connection-core";
 import { decodeClientSkillCatalogV1 } from "../skill-protocol.js";
+import { decodeClientTurnV1 } from "../run-protocol.js";
 import {
   decodeApprovalDecisionReceiptV1,
   decodeApprovalListViewV1,
@@ -69,6 +75,7 @@ import {
   type WebToolActivity,
 } from "../shared.js";
 import FrockBotApp from "./FrockBotApp.vue";
+import PackageIframeSettings from "./PackageIframeSettings.vue";
 import { modelRuntimeLabel } from "./model-presentation.js";
 import { showClientNotificationV1 } from "./notify.js";
 import "@frockbot/client-core/fonts.css";
@@ -1095,6 +1102,7 @@ export const shellClientPlugin: ClientPlugin = (ctx) => {
     skillCatalog: [],
     approvals: [],
     tasks: [],
+    packageUi: undefined,
     async selectBot(botId: string): Promise<void> {
       // Re-selecting the open Bot is not a switch: aborting the live Turn and
       // clearing the transcript would discard state the User is watching.
@@ -1113,6 +1121,7 @@ export const shellClientPlugin: ClientPlugin = (ctx) => {
       web.value.skillCatalog = [];
       web.value.approvals = [];
       web.value.tasks = [];
+      web.value.packageUi = undefined;
       const url = URL.parse(window.location.href);
       if (url) {
         url.searchParams.set("bot", botId);
@@ -1196,6 +1205,68 @@ export const shellClientPlugin: ClientPlugin = (ctx) => {
           web.value.tasks = [];
       }
     },
+    async loadPackageUi(): Promise<void> {
+      const read = ctx.transport.hostedRequest;
+      const botId = web.value.activeBotId;
+      if (!read || !botId) return;
+      const generation = selectionGeneration;
+      try {
+        const catalog = decodePackageIframeCatalogV1(
+          await read(`/api/bots/${encodeURIComponent(botId)}/package-ui`),
+        );
+        if (
+          generation !== selectionGeneration ||
+          web.value.activeBotId !== botId
+        )
+          return;
+        web.value.packageUi = catalog;
+      } catch {
+        if (
+          generation === selectionGeneration &&
+          web.value.activeBotId === botId
+        ) {
+          web.value.packageUi = undefined;
+        }
+      }
+    },
+    async callPackageUiTool(
+      contribution: PackageIframeContributionViewV1,
+      name: string,
+      input: unknown,
+    ): Promise<unknown> {
+      const post = ctx.transport.hostedRequest;
+      const botId = web.value.activeBotId;
+      const catalog = web.value.packageUi;
+      if (!post || !botId || !catalog || catalog.botId !== botId) {
+        throw new Error("Package UI is unavailable");
+      }
+      if (!packageIframeToolAllowedV1(contribution, name)) {
+        throw new Error(
+          `Package "${contribution.packageId}" did not declare tool "${name}"`,
+        );
+      }
+      const turn = decodeClientTurnV1(
+        await post(
+          `/api/bots/${encodeURIComponent(botId)}/package-ui/tools`,
+          "POST",
+          JSON.stringify({
+            schemaVersion: 1,
+            commandId: crypto.randomUUID(),
+            generationId: catalog.generationId,
+            packageId: contribution.packageId,
+            name,
+            input,
+          }),
+        ),
+      );
+      await deliverNotifications(botId);
+      const result = turn.events.findLast(
+        (event) => event.type === "tool/result",
+      );
+      return result?.type === "tool/result"
+        ? { content: result.content, isError: result.isError === true }
+        : { content: turn.text, isError: false };
+    },
     /**
      * Explicit, authenticated cancellation of one subagent from the client.
      *
@@ -1288,6 +1359,7 @@ export const shellClientPlugin: ClientPlugin = (ctx) => {
         updateModelLabel();
         updateSettingsLoadError("bot");
         await deliverNotifications(botId, generation);
+        await web.value.loadPackageUi();
       } catch (error) {
         if (
           generation !== selectionGeneration ||
@@ -2153,6 +2225,11 @@ export const shellClientPlugin: ClientPlugin = (ctx) => {
       order: 10_000,
       component: FrockBotApp,
     }),
+    ctx.slot({
+      slot: "frockbot.bot-settings-sections",
+      order: 10_000,
+      component: PackageIframeSettings,
+    }),
     () => {
       activeRequest?.abort();
       admissionObserver?.abort();