@stage-labs/metro 0.1.0-beta.233 → 0.1.0-beta.234

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stage-labs/metro",
-  "version": "0.1.0-beta.233",
+  "version": "0.1.0-beta.234",
   "description": "The metro command line: run your agent on this machine, relaying its chat channels and connectors to Claude Code.",
   "license": "MIT",
   "repository": {

package/runtime/marketplace/plugin/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "metro",
-  "version": "0.1.0-beta.233",
+  "version": "0.1.0-beta.234",
   "description": "Metro for Claude Code, installed by the metro daemon on this machine: every connector the agent holds as its own MCP server relayed through the daemon, the orchestrator-only guard on the main thread, and the standing rules loaded at each session start. No vendor credential ever sits in a config file.",
   "author": {
     "name": "Bonustrack",

package/runtime/marketplace/plugin/STAGE.md

@@ -57,3 +57,19 @@ Move it from Backlog or To-do to In progress, then In review, then Done. Use Blo
   ]}}}
   ```
 - A tap comes back to you as a reply to the frame: `Frame action: deploy {"version":"2.4","note":"…"} (tapped "Deploy")`. The values of the fields (`Input`, `Select`, `Checkbox`, …) are added to the payload by their `name`. `Button.onClickAction`, `ListViewItem.onClickAction`, a `Card` `confirm`/`cancel` (`{"label", "action"}`) and a `Form` `onSubmitAction` send one. Answer it like any message.
+- Screens: send `screens` instead of `widget` to put several screens in one frame, e.g. a list and a page per item. Each screen is a widget, or `{"title", "widget"}` for its own title in Stage's top bar. `start` names the first screen and is required. The action `{"type": "frame.open", "payload": {"screen": "<id>"}}` opens a screen and `{"type": "frame.back"}` goes back. They stay in Stage: no message comes to you. Stage's back arrow goes to the previous screen, and to the chat from the first one. Every other action comes to you as usual, with `screen` (the screen it was tapped on) in its payload. At most 50 screens and 64K characters for all of them; `start` and every `frame.open` must name a screen. Example:
+  ```json
+  {"line": "…", "frame": {"title": "Open invoices", "start": "home", "screens": {
+    "home": {"type": "ListView", "children": [
+      {"type": "ListViewItem", "onClickAction": {"type": "frame.open", "payload": {"screen": "inv-1"}},
+        "children": [{"type": "Text", "value": "Acme, CHF 420"}]}
+    ]},
+    "inv-1": {"title": "Acme", "widget": {"type": "Card", "children": [
+      {"type": "Title", "value": "Invoice 1040, CHF 420"},
+      {"type": "Row", "children": [
+        {"type": "Button", "label": "Back", "color": "secondary", "onClickAction": {"type": "frame.back"}},
+        {"type": "Button", "label": "Pay", "onClickAction": {"type": "invoice.pay", "payload": {"id": 1040}}}
+      ]}
+    ]}}
+  }}}
+  ```

package/runtime/node_modules/@metro-labs/daemon/src/claude/setup.ts

@@ -164,6 +164,7 @@ const PRIOR_STAGE: ReadonlySet<string> = new Set([
   'dd7d30474765de3865ddc87c1cf3220161ded09502027cdff18597e5df0aab43',
   '47439ecbe661ca70471a6839ab30a963714c296ad8c14ca23c6eebc3929038cc',
   'e3b8f9bbdb205311bc643aaf91d9d903a91204fd5b55ca949b85cdfa6fd00136',
+  '08a30f5cd5cf8013ab70c1fa9e1109018c0337552296a8efe5c0cf543b284991',
 ]);
 const PRIOR_MEMORY: ReadonlySet<string> = new Set();
 

package/runtime/node_modules/@metro-labs/daemon/src/mcp/tool-schemas.ts

@@ -73,7 +73,8 @@ export const COMMON_TOOLS: ToolDef[] = [
             'Stage (XMTP) only: a frame, a small interactive view that Stage shows as a card (title and ' +
             'description) and opens full screen. `widget` is OpenAI ChatKit widget JSON (a Card, ListView ' +
             'or Basic root, 64K characters at most); a missing `title` or `description` is taken from the ' +
-            'widget. A tap comes back to you as a reply to the frame: "Frame action: <type> <payload ' +
+            'widget. Or give `screens` instead of `widget` for several screens in one frame. A tap comes back ' +
+            'to you as a reply to the frame: "Frame action: <type> <payload ' +
             "JSON>\". It is sent after the text, and the message_id returned is the frame's. The stage " +
             'skill lists the widget nodes, with an example.',
           properties: {
@@ -84,10 +85,18 @@ export const COMMON_TOOLS: ToolDef[] = [
                 '{"type":"Button","label":"Ship it","onClickAction":{"type":"deploy","payload":{"env":"prod"}}}]}.',
               additionalProperties: true,
             },
+            screens: {
+              type: 'object',
+              description:
+                'Instead of `widget`: up to 50 screens by id, each a widget or {"title", "widget"}, 64K ' +
+                'characters in all. An action {"type":"frame.open","payload":{"screen":"<id>"}} opens a ' +
+                'screen and {"type":"frame.back"} goes back, in Stage, with no message to you.',
+              additionalProperties: true,
+            },
+            start: { type: 'string', description: 'Required with `screens`: the id of the first screen.' },
             title: { type: 'string', description: 'Card title in the chat (200 characters at most).' },
             description: { type: 'string', description: 'Card description in the chat (1000 characters at most).' },
           },
-          required: ['widget'],
         },
       },
       required: ['line'],

package/runtime/node_modules/@metro-labs/xmtp/src/codecs.ts

@@ -173,7 +173,9 @@ export const ContentTypeFrame: ContentTypeId = {
 export interface FrameContent {
   title?: string;
   description?: string;
-  widget: Record<string, unknown>;
+  widget?: Record<string, unknown>;
+  screens?: Record<string, unknown>;
+  start?: string;
 }
 export const frameFallback = (c: FrameContent): string => {
   const head = c.title ? `Frame: ${c.title}` : 'Frame';

package/runtime/node_modules/@metro-labs/xmtp/src/emit-payloads.ts

@@ -312,7 +312,6 @@ function frameEnvelope(
     const frame: FrameContent = {
       ...(typeof f.title === 'string' ? { title: f.title } : {}),
       ...(typeof f.description === 'string' ? { description: f.description } : {}),
-      widget: typeof f.widget === 'object' && f.widget !== null ? f.widget : {},
     };
     return { ...base, text: frameFallback(frame), payload: { contentType: typeId, frame: c } };
   }

package/runtime/node_modules/@metro-labs/xmtp/src/frames.ts

@@ -2,6 +2,9 @@ import { TrainError } from '@metro-labs/core/train-error';
 import type { FrameActionContent, FrameContent } from './codecs.js';
 
 export const FRAME_MAX_CHARS = 64 * 1024;
+export const FRAME_MAX_SCREENS = 50;
+const MAX_SCREEN_ID = 120;
+const FRAME_OPEN = 'frame.open';
 const MAX_TITLE = 200;
 const MAX_DESCRIPTION = 1000;
 const SUMMARY_SCAN = 80;
@@ -62,27 +65,103 @@ function parseJson(raw: unknown, name: string): unknown {
   }
 }
 
-function parseWidget(raw: unknown): Node {
-  const widget = parseJson(raw, 'frame widget');
+function checkSize(value: unknown, name: string): void {
+  const chars = JSON.stringify(value).length;
+  if (chars > FRAME_MAX_CHARS) throw bad(`${name} is ${chars} characters; the limit is ${FRAME_MAX_CHARS}`);
+}
+
+function parseWidget(raw: unknown, name = 'frame widget'): Node {
+  const widget = parseJson(raw, name);
   if (!isNode(widget) || typeof widget.type !== 'string' || widget.type === '')
-    throw bad('frame widget must be a ChatKit widget object with a `type` (Card, ListView or Basic)');
-  const chars = JSON.stringify(widget).length;
-  if (chars > FRAME_MAX_CHARS)
-    throw bad(`frame widget is ${chars} characters; the limit is ${FRAME_MAX_CHARS}`);
+    throw bad(`${name} must be a ChatKit widget object with a \`type\` (Card, ListView or Basic)`);
+  checkSize(widget, name);
   return widget;
 }
 
+function parseScreen(id: string, raw: unknown): { screen: Node; widget: Node } {
+  const name = `frame screen "${id}"`;
+  const given = parseJson(raw, name);
+  if (!isNode(given) || given.type !== undefined || given.widget === undefined) {
+    const widget = parseWidget(given, name);
+    return { screen: widget, widget };
+  }
+  const widget = parseWidget(given.widget, `${name} widget`);
+  const title = clip(given.title, MAX_TITLE, `screen "${id}" title`);
+  return { screen: title ? { title, widget } : { widget }, widget };
+}
+
+function openTargets(root: unknown): string[] {
+  const targets: string[] = [];
+  const stack: unknown[] = [root];
+  while (stack.length > 0) {
+    const value = stack.pop();
+    if (Array.isArray(value)) stack.push(...(value as unknown[]));
+    else if (isNode(value)) {
+      if (value.type === FRAME_OPEN)
+        targets.push(isNode(value.payload) && typeof value.payload.screen === 'string' ? value.payload.screen : '');
+      stack.push(...Object.values(value));
+    }
+  }
+  return targets;
+}
+
+function screenIds(screens: Node): string[] {
+  const ids = Object.keys(screens);
+  if (ids.length === 0 || ids.length > FRAME_MAX_SCREENS)
+    throw bad(`frame screens must hold 1 to ${FRAME_MAX_SCREENS} screens, not ${ids.length}`);
+  const badId = ids.find((id) => id === '' || id.length > MAX_SCREEN_ID);
+  if (badId !== undefined) throw bad(`frame screen ids must be 1 to ${MAX_SCREEN_ID} characters`);
+  return ids;
+}
+
+function checkLinks(screens: Node, ids: string[], start: unknown): void {
+  if (typeof start !== 'string' || !ids.includes(start))
+    throw bad(`frame start is required with screens and must be one of their ids: ${ids.slice(0, 10).join(', ')}`);
+  const lost = openTargets(screens).find((target) => !ids.includes(target));
+  if (lost !== undefined)
+    throw bad(`frame.open goes to screen "${lost}", which is not in screens (${ids.slice(0, 10).join(', ')})`);
+}
+
+interface FrameBody {
+  content: Pick<FrameContent, 'widget' | 'screens' | 'start'>;
+  first: Node;
+}
+
+function parseScreens(raw: unknown, start: unknown): FrameBody {
+  const given = parseJson(raw, 'frame screens');
+  if (!isNode(given))
+    throw bad('frame screens must be an object of screen id to widget: {"home": {…}, "story": {"title": "…", "widget": {…}}}');
+  const ids = screenIds(given);
+  const parsed = ids.map((id) => [id, parseScreen(id, given[id])] as const);
+  const screens: Node = Object.fromEntries(parsed.map(([id, p]) => [id, p.screen]));
+  checkSize(screens, 'frame screens');
+  checkLinks(screens, ids, start);
+  const first = parsed.find(([id]) => id === start)?.[1];
+  if (!first || typeof start !== 'string') throw bad('frame start must name a screen');
+  return { content: { screens, start }, first: first.widget };
+}
+
+function frameBody(args: Node): FrameBody {
+  if (args.screens === undefined) {
+    const widget = parseWidget(args.widget);
+    return { content: { widget }, first: widget };
+  }
+  if (args.widget !== undefined) throw bad('frame takes `widget` or `screens`, not both');
+  return parseScreens(args.screens, args.start);
+}
+
 export function buildFrameContent(raw: unknown): { frame: FrameContent; title: string } {
   const args = parseJson(raw, 'frame');
-  if (!isNode(args)) throw bad('frame must be an object: {widget, title?, description?}');
-  const widget = parseWidget(args.widget);
-  const derived = frameSummary(widget);
+  if (!isNode(args))
+    throw bad('frame must be an object: {widget, title?, description?} or {screens, start, title?, description?}');
+  const body = frameBody(args);
+  const derived = frameSummary(body.first);
   const title = clip(args.title, MAX_TITLE, 'title') ?? derived.title?.slice(0, MAX_TITLE);
   const description = clip(args.description, MAX_DESCRIPTION, 'description') ?? derived.description?.slice(0, MAX_DESCRIPTION);
   const frame: FrameContent = {
     ...(title ? { title } : {}),
     ...(description && description !== title ? { description } : {}),
-    widget,
+    ...body.content,
   };
   return { frame, title: title ?? 'Frame' };
 }

package/runtime/runtime.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.1.0-beta.233"
+  "version": "0.1.0-beta.234"
 }