@frockbot/plugin-shell 0.3.0 → 0.3.2

package/src/client/styles.css

@@ -49,6 +49,15 @@
   --panel-current: var(--panel-surface-width);
 }
 
+/*
+ * An Applet needs room a summary column does not have, and how much is the
+ * User's: `--applet-panel-width` is the width they last dragged, written by
+ * the component and remembered per browser.
+ */
+.app-shell.panel-open.panel-applet {
+  --panel-current: var(--applet-panel-width, 480px);
+}
+
 /* Sidebar */
 
 .sidebar {
@@ -577,6 +586,44 @@
  * message being composed, not a separate control.
  */
 
+/*
+ * The focused Applet, on a phone, while its panel is closed.
+ *
+ * It sits above the composer rather than inside it: the composer's row is the
+ * message and the send control, and squeezing a third thing into it is what
+ * makes a phone composer unusable.
+ */
+.applet-chip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  display: inline-flex;
+  max-width: 100%;
+  height: var(--frock-control-md);
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid var(--frock-border-strong);
+  border-radius: 999px;
+  color: var(--frock-text);
+  background: var(--frock-surface-raised);
+  box-shadow: var(--frock-shadow-control);
+  font-size: var(--frock-text-sm);
+  cursor: pointer;
+}
+
+.applet-chip-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.applet-chip-action {
+  flex: 0 0 auto;
+  color: var(--frock-action-primary);
+  font-weight: 600;
+}
+
 .composer-body {
   display: flex;
   width: 100%;
@@ -702,6 +749,50 @@
   flex-direction: column;
 }
 
+.panel-applet .right-panel-content {
+  width: var(--applet-panel-width, 480px);
+}
+
+/*
+ * The Applet panel's drag edge. It is 8px of grab area over a 1px seam, it
+ * takes focus, and the arrow keys resize by the same amounts the drag does, so
+ * the width is not a mouse-only setting.
+ */
+.applet-panel-handle {
+  position: absolute;
+  z-index: 16;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  width: 8px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.applet-panel-handle::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 2px;
+  background: transparent;
+  content: "";
+  transition: background-color var(--frock-motion-fast);
+}
+
+.applet-panel-handle:hover::after,
+.applet-panel-handle:focus-visible::after {
+  background: var(--frock-action-primary);
+}
+
+.applet-panel-handle:focus-visible {
+  outline: 2px solid var(--frock-border-focus);
+  outline-offset: -2px;
+}
+
 .right-panel-header {
   display: flex;
   height: var(--frock-titlebar-height);
@@ -788,6 +879,11 @@
     width: var(--panel-surface-width);
   }
 
+  .app-shell.panel-applet .right-panel {
+    width: var(--applet-panel-width, 480px);
+    max-width: 100%;
+  }
+
   /*
    * A parked panel is hidden as well as off-canvas: it is not something to
    * tab into, read out, or hit-test, and `visibility` is the one property that
@@ -894,15 +990,25 @@
 
   /* The right panel is a drawer too, and on a phone it takes the whole width. */
   .right-panel,
-  .app-shell.panel-surface .right-panel {
+  .app-shell.panel-surface .right-panel,
+  .app-shell.panel-applet .right-panel {
     width: 100%;
   }
 
   .right-panel-content,
+  .panel-applet .right-panel-content,
   .panel-surface-view {
     width: 100%;
   }
 
+  /*
+   * A focused Applet on a phone is a full-height sheet, not a wider column:
+   * there is one column, so the canvas is the whole of it while it is open.
+   */
+  .app-shell.panel-open.panel-applet {
+    --applet-panel-width: 100%;
+  }
+
   /* There is no window chrome to drag and no traffic lights to clear. */
   .brand {
     padding-left: 0;

package/src/composition-views.ts

@@ -39,7 +39,26 @@ export type CompositionMemberManifestReaderV1 = (
   member: CompositionMemberV1,
 ) => Promise<FrockBotManifest | undefined>;
 
-/** Project iframe Contributions from either Bot or Catalog provenance. */
+/** What the shell attributes an iframe page to, by where its code came from. */
+function iframeProvenanceV1(
+  member: CompositionMemberV1,
+): PackageIframeCompositionV1["contributions"][number]["provenance"] {
+  if (member.provenance.kind === "bot") return "Bot-authored";
+  if (member.provenance.kind === "first-party") return "FrockBot";
+  return "User-installed";
+}
+
+/**
+ * Project iframe Contributions from every artifact-backed member.
+ *
+ * The test is the artifact, not the provenance. "Every Contribution kind is
+ * resolved from the manifest and an artifact, never from a switch over Package
+ * identity" — a first-party Package that ships as an artifact-backed member
+ * (ADR 0022 decision 8) has a manifest the Bot object holds and pages the
+ * anonymous origin can serve, so there is nothing left for a provenance test
+ * to decide. A first-party member with no artifact is in-process code whose
+ * client Contribution is a compiled module, and it has no iframe page to show.
+ */
 export async function projectPackageIframeCompositionV1(input: {
   botId: string;
   generation: CompositionGenerationV1;
@@ -47,7 +66,7 @@ export async function projectPackageIframeCompositionV1(input: {
 }): Promise<PackageIframeCompositionV1> {
   const contributions: PackageIframeCompositionV1["contributions"] = [];
   for (const member of input.generation.members) {
-    if (member.provenance.kind === "first-party") continue;
+    if (member.artifact === undefined) continue;
     const manifest = await input.readMemberManifest(member);
     if (!manifest) continue;
     const client = manifest.contributions.client;
@@ -55,10 +74,16 @@ export async function projectPackageIframeCompositionV1(input: {
     contributions.push({
       packageId: member.packageId,
       displayName: manifest.displayName,
-      provenance:
-        member.provenance.kind === "bot" ? "Bot-authored" : "User-installed",
-      artifact: { ...client.artifact },
-      mounts: client.mounts.map((mount) => ({ ...mount })),
+      provenance: iframeProvenanceV1(member),
+      pages: client.pages.map((page) => ({
+        id: page.id,
+        artifact: { ...page.artifact },
+        mounts: page.mounts.map((mount) => ({ ...mount })),
+      })),
+      entries: (client.entries ?? []).map((entry) => ({
+        ...entry,
+        opens: { ...entry.opens },
+      })),
       declaredTools: (manifest.tools ?? []).map((tool) => tool.name),
     });
   }

package/src/shared.ts

@@ -14,6 +14,9 @@ import type {
   CatalogIndexEntryV1,
 } from "@frockbot/catalog-core";
 import type {
+  AppletBuildViewV1,
+  AppletSourceViewV1,
+  AppletSummaryV1,
   PackageIframeCatalogV1,
   PackageIframeContributionViewV1,
   SendToUserPayloadV1,
@@ -193,6 +196,39 @@ export interface FrockBotWebData {
   tasks: TaskViewV1[];
   /** Sandboxed pages in the selected Bot's active fail-closed Composition. */
   packageUi?: PackageIframeCatalogV1;
+  /**
+   * The Applets this User owns. Account-wide, like every other Package-shaped
+   * capability: an Applet belongs to the User, and every Bot they own sees it.
+   */
+  applets: AppletSummaryV1[];
+  /**
+   * The Session's focused Applet id, as the Bot Durable Object recorded it.
+   * `null` is a value — the Session deliberately has no Applet in the canvas —
+   * and `undefined` means it has not been read yet.
+   */
+  focusedAppletId?: string | null;
+  /** The focused Applet joined with the list. Derived; never written to. */
+  readonly focusedApplet?: AppletSummaryV1;
+  /** Where the focused Applet's live UI is, and the credential to open it. */
+  appletViewer?: {
+    appletId: string;
+    token: string;
+    expiresAt: string;
+    socketUrl: string;
+    uiUrl: string;
+    generationId: string;
+  };
+  /** The focused Applet's source, for the canvas's building state. */
+  appletSource?: AppletSourceViewV1;
+  /** The outcome the Bot last recorded for `applet check` or `applet build`. */
+  appletBuild?: AppletBuildViewV1;
+  /**
+   * How the canvas's own read went. `loading` is the first read of a focused
+   * Applet, `failed` is a read the User can retry, and `ready` says the canvas
+   * has everything it needs to draw either of its states.
+   */
+  appletCanvas: "idle" | "loading" | "ready" | "failed";
+  appletCanvasError?: string;
   /**
    * The User's MCP servers: state, tool count, last handshake, instructions,
    * failure, and the durable refusal ledger. Absent until it is loaded, and
@@ -247,6 +283,22 @@ export interface FrockBotWebData {
   /** Refreshes {@link FrockBotWebData.tasks} for the active Bot. */
   loadTasks(): Promise<void>;
   loadPackageUi(): Promise<void>;
+  /** Refreshes {@link FrockBotWebData.applets} for the signed-in User. */
+  loadApplets(): Promise<void>;
+  /** Refreshes the Session's focused Applet for the active Bot. */
+  loadFocusedApplet(): Promise<void>;
+  /**
+   * Focuses one Applet for this Session, or clears the focus. The backend is
+   * the authority: what the canvas then shows is the focus that was recorded,
+   * never the one the click asked for.
+   */
+  setFocusedApplet(appletId: string | null): Promise<void>;
+  /**
+   * Re-reads what the canvas draws for the focused Applet: its source, the
+   * last recorded check or build outcome, and a viewer credential once a
+   * generation is active.
+   */
+  refreshAppletCanvas(): Promise<void>;
   callPackageUiTool(
     contribution: PackageIframeContributionViewV1,
     name: string,