@frockbot/plugin-shell 0.1.3 → 0.2.0

package/src/client/FrockBotApp.vue

@@ -2,7 +2,6 @@
 import { clientSurfaceRegistryKey } from "@frockbot/client-core";
 import {
   announceUiAnchor,
-  UiButton,
   UiIcon,
   UiIconButton,
   UiMarkdown,
@@ -24,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,
@@ -168,33 +169,6 @@ const botName = computed(
 );
 const isRunning = computed(() => Boolean(state.value.activeRunId));
 const isConnecting = computed(() => state.value.connection !== "ready");
-const needsModel = computed(() => state.value.modelSource === "none");
-const hasConnectedModelProvider = computed(() => {
-  const user = state.value.userSettings;
-  if (!user) return false;
-  return user.connections.some((connection) => {
-    if (connection.state !== "ready") return false;
-    const installed = user.packages.some(
-      (pkg) =>
-        pkg.packageId === connection.packageId && pkg.state === "installed",
-    );
-    const pkg = state.value.pluginCatalog.find(
-      (candidate) => candidate.packageId === connection.packageId,
-    );
-    const connectionType = pkg?.connectionTypes.find(
-      (candidate) => candidate.id === connection.connectionTypeId,
-    );
-    return Boolean(
-      installed &&
-      pkg?.capabilities.some(
-        (capability) =>
-          capability.kind === "model" &&
-          connectionType?.capabilities.includes(capability.id) &&
-          capability.connectionTypes.includes(connectionType.id),
-      ),
-    );
-  });
-});
 const canSend = computed(
   () =>
     state.value.connection === "ready" &&
@@ -217,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 ?? "";
@@ -279,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"
@@ -380,17 +379,6 @@ const applySettingsDeepLink = (): void => {
   if (anchor) void nextTick(() => announceUiAnchor(anchor));
 };
 
-function openModelSetup(): void {
-  const registry = surfaces;
-  if (!registry) return;
-  if (hasConnectedModelProvider.value && registry.has("user-settings")) {
-    registry.open("user-settings");
-    void nextTick(() => announceUiAnchor("user-default-model"));
-    return;
-  }
-  if (registry.has("plugins")) registry.open("plugins");
-}
-
 onMounted(() => {
   void web.value.loadPluginCatalog();
   void scrollToLatest("auto");
@@ -665,15 +653,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
           /></span>
           <div class="workspace-title">
             <strong>{{ botName }}</strong>
-            <small v-if="!needsModel">{{ state.modelLabel }}</small>
-            <button
-              v-else
-              type="button"
-              class="model-setup-link"
-              @click="openModelSetup"
-            >
-              Choose a model
-            </button>
+            <small>{{ state.modelLabel }}</small>
           </div>
           <k-slot name="frockbot.header-actions" />
         </header>
@@ -690,27 +670,16 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               {{
                 state.modelReady
                   ? `${botName} is ready.`
-                  : needsModel
-                    ? `${botName} needs a model.`
-                    : `${botName} isn't ready.`
+                  : `${botName} isn't ready.`
               }}
             </h1>
             <p>
               {{
                 state.modelReady
                   ? "Start with a conversation. Cordis plugins can add the rest."
-                  : needsModel
-                    ? "Pick a default to start chatting."
-                    : "Check this Bot's model Connection."
+                  : "Check this Bot's model Connection."
               }}
             </p>
-            <UiButton
-              v-if="needsModel"
-              variant="primary"
-              @click="openModelSetup"
-            >
-              Choose a model
-            </UiButton>
           </div>
           <article
             v-for="message in messages"
@@ -745,8 +714,19 @@ 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 a durable root, drawn from the
+                A binary a tool filed in the Workspace, drawn from the
                 Workspace read route. The thread carries the path, never the
                 bytes, so a long conversation costs paths and the image is
                 fetched only when it is on screen.
@@ -894,16 +874,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
               </span>
             </li>
           </ul>
-          <UiButton
-            v-if="!isRunning && !isConnecting && needsModel"
-            type="button"
-            class="composer-model-setup"
-            variant="primary"
-            @click="openModelSetup"
-          >
-            Choose a model
-          </UiButton>
-          <div v-else class="composer-body">
+          <div class="composer-body">
             <ul v-if="attachedSkills.length > 0" class="skill-chips">
               <li v-for="entry in attachedSkills" :key="entry.ref">
                 <button
@@ -950,7 +921,7 @@ function handleComposerKeydown(event: KeyboardEvent): void {
             @click="web.stopRun()"
           />
           <UiIconButton
-            v-else-if="!needsModel || isConnecting"
+            v-else
             type="submit"
             icon="arrow-up"
             label="Send message"

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);