@unoverse-platform/studio 0.1.0

package/screens/TemplatesView.tsx

@@ -0,0 +1,1005 @@
+/**
+ * Templates view — renders a TEMPLATE definition (layout) and fills its
+ * ComponentSlots from a mock conversation seeded into the store.
+ *
+ * This is the visual proof of the slot system: select KeyService → its
+ * Card slot fills with a real card; slots whose component type isn't
+ * migrated yet (StreamingText, KenBurnsImage) show their Skeleton fallback.
+ * Toggle "complete" to flip streamingState; "clear" to see the all-skeleton state.
+ */
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { useAuth } from "react-oidc-context";
+import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
+import { ComponentStore } from "@unoverse/sdk";
+import { StreamedUnoverseTemplate, useUnoverseConnection, computeAppWidth, resolveActiveLayout, type ResolvedTheme, type UseVoiceServiceConfig } from "@unoverse/sdk";
+import { client, authedFetch, hasAuth, UNOVERSE_BASE } from "studio-host";
+
+// Per-APP test conversation: each app chats in its own conversation id, so testing
+// one client's app never inherits another's agent history/memory (the "BPP answers
+// about SAB" trap — same workflow, polluted shared context).
+// …and a fresh conversation per PAGE LOAD: the nonce is minted once per module load,
+// so refreshing the page naturally starts a NEW conversation (fresh agent thread,
+// fresh durable surfaces) — history never outlives the screen it happened on.
+const SESSION_NONCE = Math.random().toString(36).slice(2, 8);
+const chatIdFor = (app: string) => `demo-${app.toLowerCase()}-${SESSION_NONCE}`;
+
+// Dev "channel" config — the workbench stands in for a real channel. In LIVE mode
+// it opens the Gravity data plane (WS component stream + REST execute) against the
+// configured server/workflow/node; in MOCK mode it seeds a fake conversation.
+// These are editable in the toolbar (LIVE mode) and persisted across refreshes.
+// Dev workbench serves /api + /ws/gravity + /stream on the merged uWS at :4205
+// (the retired gateway was :4100). Prod uses the page origin.
+const CONN_DEFAULTS = { server: "localhost:4205", workflowId: "wf-r4jzo7", triggerNode: "inputtrigger1", token: "" };
+const CONN_KEY = "unoverse.workbench.conn";
+
+function loadConn(): typeof CONN_DEFAULTS {
+  try {
+    const saved = JSON.parse(localStorage.getItem(CONN_KEY) ?? "{}");
+    // Migration: drop the retired gateway port so the new default applies.
+    if (saved.server === "localhost:4100") delete saved.server;
+    return { ...CONN_DEFAULTS, ...saved };
+  } catch {
+    return { ...CONN_DEFAULTS };
+  }
+}
+
+interface PropDef {
+  default?: unknown;
+}
+interface Def {
+  name: string;
+  // The client org this app belongs to (server-injected) — names its theme (`<org>/light`).
+  org?: string;
+  description?: string;
+  // A native service the template binds (UNOVERSE_SPEC §2e-1) — e.g. "voice". The channel
+  // instantiates the matching service and feeds its neutral state + actions to the template.
+  service?: string;
+  props?: Record<string, PropDef>;
+  // Present when this template is an MCP app: the workflow it calls (from its manifest).
+  binding?: { workflow?: string; trigger?: string };
+  // true = on load, also fire the workflow (Mode B); false/absent = just load (Mode A).
+  autoTrigger?: boolean;
+  // MOCK-preview hint: the component(s) this app's workflow streams. When present, the
+  // mock seeds ONLY these (so a template previews the real app). Absent → seed NOTHING:
+  // the template renders its own default/welcome state (the default view), not a dump of
+  // the whole component catalog.
+  previewComponents?: string[];
+  // Layout height mode. Absent/true = FLUID (the template fills the stage height — chat /
+  // assistant / voice). false = size to CONTENT (the frame shrinks to the rendered
+  // component — focused widget apps like Bank Transfer).
+  fluidHeight?: boolean;
+  // The template's layer views, enumerated from its `states/` folder (UNOVERSE_LAYERS.md §7).
+  // `when` = the state's root visibleWhen selector; `where` = a reaction-contract surface's
+  // component-state selector (STATE_MODEL §5b) — the viewer lists AND activates by them.
+  states?: { name: string; when?: unknown; where?: unknown }[];
+  // TEMPLATE LAYOUTS (name-sync, docs/design/05): the composed arrangements of a
+  // multi-layout template + its default. The viewer shows these as a pill row (the
+  // template-tier twin of a component's faces); activation = the same selector a
+  // reaction surface uses (put a component into the view of the layout's name).
+  layouts?: Record<string, unknown>;
+  defaultLayout?: string;
+  // The definition tree (components: used to resolve a state's Switch discriminant).
+  root?: unknown;
+  // The full MCP-app manifest (present when the template folder carries manifest.json).
+  app?: {
+    name: string;
+    description?: string;
+    // Spatial-discovery selection text — ranked against user intent by findIntent.
+    whenToUse?: string;
+    category?: string;
+    version?: string;
+    binding?: { workflow?: string; trigger?: string };
+    autoTrigger?: boolean;
+    default?: boolean;
+    inputSchema?: Record<string, unknown>;
+    // Per-STATE mock seeding: `{ "<state>": ["coursecard", "coursecard"] }` — the
+    // author decides what each state's preview shows (a repeated name = several
+    // instances). Supersedes the legacy flat `previewComponents`.
+    preview?: Record<string, string[]>;
+    previewComponents?: string[];
+    fluidHeight?: boolean;
+    // The app's named default state on load (the single authored field, OPEN name):
+    // "template" = fluid · "focus" = fit content + opens in focus on load · "component" =
+    // inline card · anything future. `fluidHeight` above is derived from it.
+    // `mode` = pre-rename alias, read as fallback.
+    defaultState?: string;
+    mode?: string;
+  };
+}
+
+const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
+  { id: "mobile", label: "Mobile", w: 390 },
+  { id: "tablet", label: "Tablet", w: 768 },
+  { id: "desktop", label: "Desktop", w: 1280 },
+  { id: "full", label: "Full", w: null },
+];
+
+export function TemplatesView({ theme: defaultTheme, themeName, org = "all" }: { theme: ResolvedTheme; themeName: string; org?: string }) {
+  // MOCK (default, offline) vs LIVE (real Gravity data plane). A fresh store per
+  // mode keeps the two paths from bleeding into each other.
+  const [live, setLive] = useState(false);
+  const [templates, setTemplates] = useState<Def[]>([]);
+  const [components, setComponents] = useState<Def[]>([]);
+  const [selected, setSelected] = usePersistentState<string | null>("wb:templates:selected", null);
+  // A fresh store per mode AND per app selection: a catch-all template accumulates
+  // whatever's seeded, so switching apps must start clean (no stale components linger).
+  // The active layer view (Storybook-style state picker). Recreating the store on change
+  // starts it clean so the seed effect re-derives the state (UNOVERSE_LAYERS.md §7).
+  const [activeState, setActiveState] = useState<{ name: string; when?: unknown; where?: unknown } | null>(null);
+  // Selecting a template lands on its FIRST state — the def's natural default (a voice
+  // layout's idle, a chat layout's welcome). No synthetic "default" entry: the first
+  // authored layer IS the default view.
+  // The LAYOUT axis (multi-layout templates): the picked non-default layout pill, or
+  // null = the default layout. Independent of the local-state axis — any layout can
+  // combine with any local state (a voice List layout while agent-speaking).
+  const [activeLayout, setActiveLayout] = useState<string | null>(null);
+  useEffect(() => {
+    const t = templates.find((x) => x.name === selected);
+    setActiveState(t?.states?.filter((s) => !(t.layouts && s.name in t.layouts!))[0] ?? null);
+    setActiveLayout(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, templates]);
+  useEffect(() => { if (live) { setActiveState(null); setActiveLayout(null); } }, [live]); // states are mock-only — clear when going live
+  // PICKING a state = jump there and seed its preview scenario (seedKey forces a fresh
+  // store). MOVING between states organically (clicking inside the preview) keeps the
+  // store — the template simply transitions, exactly like the runtime.
+  const [seedKey, setSeedKey] = useState(0);
+  const store = useMemo(() => new ComponentStore(), [live, selected, seedKey]);
+  // THE HOST'S JOB: the stage wrapper's width is DERIVED from component views
+  // (computeAppWidth), so this view must re-render on every store write — otherwise a
+  // panel surface opens (a card's setValue) and the app doesn't widen, clipping the
+  // panel. The SDK subtree has its own subscriptions; this one is for the host chrome.
+  const storeVersion = useSyncExternalStore(
+    useCallback((cb) => store.subscribe(cb), [store]),
+    useCallback(() => store.getVersion(), [store]),
+  );
+  const spatial = useRegistryToggles("template");
+  const [seeded, setSeeded] = useState<string[]>([]);
+  const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:templates:meta", false); // MCP details panel
+  const [copiedUri, setCopiedUri] = useState(false);
+  const [version, setVersion] = useState(0); // local bump to reflect store changes in the toolbar
+  const [stageWidth, setStageWidth] = useState<number | null>(null); // default Full — testing should see the real channel width
+  const [connOpen, setConnOpen] = useState(false); // Live connection popover
+  // LIVE output inspector — the last submitted app output, projected through the
+  // component's declared `outputs` (the same object the held tool call returns to
+  // the calling LLM). Shown as a subtle dismissible card over the stage.
+  const [lastOutput, setLastOutput] = useState<{ at: string; data: Record<string, unknown> } | null>(null);
+  useEffect(() => setLastOutput(null), [selected, live]);
+
+  // Editable connection target (server/workflow/node), persisted across refreshes.
+  // `conn*` is the APPLIED value the hook uses; inputs commit on blur/Enter so we
+  // don't reconnect on every keystroke.
+  const [connCfg, setConnCfg] = useState(loadConn);
+  const applyConn = (patch: Partial<typeof CONN_DEFAULTS>) => {
+    setConnCfg((c) => {
+      const next = { ...c, ...patch };
+      try {
+        localStorage.setItem(CONN_KEY, JSON.stringify(next));
+      } catch {
+        /* ignore */
+      }
+      return next;
+    });
+  };
+
+  // OIDC session (undefined when no AuthProvider is mounted — env unset).
+  const auth = useAuth();
+  // Token source: prefer the real OIDC access token; fall back to a pasted JWT.
+  const authToken = auth?.user?.access_token;
+  const token = authToken || connCfg.token;
+
+  const config = useMemo(
+    () => ({
+      apiUrl: `http://${connCfg.server}`,
+      // Component stream rides the Unoverse `/stream` MCP endpoint (§5b). In the canvas
+      // the path that reaches Unoverse is UNOVERSE_BASE (/unoverse-mcp proxy in dev, the
+      // explicit gated URL in prod) — always absolute there. In local Studio UNOVERSE_BASE
+      // is "" (a folder, not a universe; its origin serves no /stream), so the stream goes
+      // to the CONNECTED universe — same base the apiUrl above uses. An empty string here
+      // threw `Invalid URL` inside the SDK and killed the stream silently.
+      streamUrl: UNOVERSE_BASE || `http://${connCfg.server}`,
+      // A real JWT makes the workbench a proper authenticated channel: it rides the
+      // MCP stream's `Authorization` header and the REST `Authorization` header, so the
+      // workflow gets full user context (incl. the email claim → CRM join). See
+      // docs/AUTH_TOKEN_FLOW.md. Blank → no token (server must run with DISABLE_AUTH=true).
+      getAccessToken: token ? async () => token : undefined,
+    }),
+    [connCfg.server, token],
+  );
+  // The APP decides which workflow runs: the selected template's manifest binding
+  // (workflow + trigger) drives the connection. No manual entry — MCP decides.
+  const selectedDef = useMemo(() => templates.find((t) => t.name === selected), [templates, selected]);
+  // THE TEMPLATE'S ACTIVE STATE, derived live (docs/design/04: one state at a time —
+  // the latest surfaced view; else the conversation/welcome base). The nav highlights
+  // THIS, not the picked seed: clicking a card inside the preview IS moving to the
+  // other state, and Studio simply follows the same transition the runtime makes.
+  const liveStateName = useMemo(() => {
+    void storeVersion; // recompute on every store write
+    const states = selectedDef?.states ?? [];
+    const claims = new Map<string, string>(); // view -> state name
+    for (const s of states) {
+      const eq = (s.where as { eq?: unknown } | undefined)?.eq;
+      if (typeof eq === "string") claims.set(eq, s.name);
+    }
+    let view = "";
+    let at = -1;
+    for (const turn of store.getResponses())
+      for (const p of turn.components) {
+        const { chatId, nodeId } = store.split(p);
+        const v = (store.get(chatId, nodeId) as Record<string, unknown>)?.defaultState;
+        if (typeof v === "string" && claims.has(v) && store.touchOf(p) > at) {
+          at = store.touchOf(p);
+          view = v;
+        }
+      }
+    if (view) return claims.get(view) ?? null;
+    const base = store.getTimeline().length === 0 ? "isEmpty" : "hasMessages";
+    return states.find((s) => s.when === base)?.name ?? null;
+  }, [storeVersion, store, selectedDef]);
+  // The preview renders under the SELECTED APP'S ORG theme — a SAB app is SAB-red, a
+  // BPP app cobalt, whatever the header org scope shows. The header toggle picks the
+  // light/dark variant; the app's org picks whose brand. Falls back to the app-level
+  // theme until the fetch resolves (or for org-less templates).
+  const [orgTheme, setOrgTheme] = useState<ResolvedTheme | null>(null);
+  const themeOrg = selectedDef?.org ?? "default";
+  useEffect(() => {
+    let alive = true;
+    setOrgTheme(null);
+    client
+      .readTheme(`${themeOrg}/${themeName}`)
+      .then((t) => alive && setOrgTheme(t))
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [themeOrg, themeName]);
+  const theme = orgTheme ?? defaultTheme;
+  const binding = selectedDef?.binding;
+  // The session userId MUST be the token's `sub` when a token rides the connection —
+  // the server binds the audio socket to the verified identity and REJECTS an
+  // INIT_SESSION claiming anyone else (AUTH_TOKEN_FLOW.md; the June audit's WS
+  // finding). "dev" is only for a universe with auth off, where no token exists.
+  const tokenSub = useMemo(() => {
+    if (!token) return undefined;
+    try {
+      return JSON.parse(atob(token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))).sub as string | undefined;
+    } catch {
+      return undefined;
+    }
+  }, [token]);
+  const session = useMemo(
+    () => ({
+      workflowId: binding?.workflow ?? "",
+      targetTriggerNode: binding?.trigger ?? "",
+      userId: tokenSub ?? "dev",
+      conversationId: chatIdFor(selected ?? "app"),
+      chatId: chatIdFor(selected ?? "app"),
+    }),
+    [binding?.workflow, binding?.trigger, tokenSub],
+  );
+
+  // The data-plane connection. Open it only when: Live mode, authenticated (or no OIDC),
+  // AND the selected app actually has a workflow binding (a plain template with no app
+  // has nothing to call).
+  const canConnect = live && Boolean(binding?.workflow) && (!hasAuth || Boolean(auth?.isAuthenticated));
+  const rawConn = useUnoverseConnection(config, session, store, { enabled: canConnect });
+  // HARD INVARIANT (workbench doc Mode A — "Mock does not connect with server"): a Mock
+  // session must NEVER reach the backend. The SDK only gates the inbound SSE stream on
+  // `enabled`; its outbound trigger/sendMessage/sendAction (REST `…/execute`) do NOT — so
+  // a stale/racing/future caller could still fire the workflow. Neutralise the outbound
+  // calls whenever we're not connecting. Belt-and-braces over the per-call `live` guards.
+  const conn = useMemo(
+    () => (canConnect ? rawConn : { ...rawConn, trigger: () => {}, sendMessage: () => {}, sendAction: () => {}, resolveElicitation: () => false }),
+    [canConnect, rawConn],
+  );
+
+  // The `voice` native service (§2e-1) now lives INSIDE the SDK renderer (shared by every
+  // host — see StreamedUnoverseTemplate). The host only DECLARES the app is voice (off its
+  // manifest `service`) and hands the renderer the connection identity it already holds;
+  // the renderer owns the service + answers startCall/endCall/toggleMute. No host wiring.
+  const isVoice = selectedDef?.service === "voice";
+  const voiceConfig = useMemo<UseVoiceServiceConfig | undefined>(
+    () =>
+      isVoice
+        ? {
+            // START_CALL REST triggers the workflow on the gateway. The audio WS lane is
+            // derived by the SDK from the client's server origin (see the renderer) — the
+            // host passes NO wsUrl, so every host (incl. srcdoc iframes) is identical.
+            apiUrl: `http://${connCfg.server}`,
+            getAccessToken: token ? async () => token : undefined,
+            session: {
+              userId: session.userId,
+              conversationId: session.conversationId,
+              chatId: session.chatId,
+              workflowId: session.workflowId,
+              targetTriggerNode: session.targetTriggerNode,
+            },
+            // Producer wiring (STATE_MODEL §4): the service writes its state into TEMPLATE
+            // STATE on this store — templates read callState/isMuted/… from the global bag.
+            store,
+          }
+        : undefined,
+    [isVoice, connCfg.server, token, session, store],
+  );
+
+  // "Load the app → it calls its workflow" — but ONLY for apps with autoTrigger (Mode B).
+  // Mode A apps (autoTrigger false/absent) just load the template and wait. Fires once the
+  // live connection is ready, no user turn; resets on app/Live change so re-selecting re-runs.
+  const [triggered, setTriggered] = useState(false);
+  useEffect(() => setTriggered(false), [selected, live]);
+  useEffect(() => {
+    if (live && conn.isReady && binding?.workflow && selectedDef?.autoTrigger && !triggered) {
+      setTriggered(true);
+      conn.trigger();
+    }
+  }, [live, conn.isReady, conn, binding?.workflow, selectedDef?.autoTrigger, triggered]);
+
+  // Turn-complete detection (the "state" the StreamingText streaming preamble reads).
+  // The MCP data plane streams components but carries NO turn-complete signal, so the
+  // store's streamingState never flips off "streaming" on its own → the streaming
+  // preamble (dots + progressText) would show forever. We derive completion from the
+  // answer TEXT settling: once a response's text is non-empty and stops growing for a
+  // beat, mark it complete. Keying on text (not on any store event) means the agent's
+  // tool-call/thinking PAUSES — when no text exists yet — never false-complete it.
+  useEffect(() => {
+    if (!live) return;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let lastText = "";
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const unsub = store.subscribe(() => {
+      const resp = store.latestResponse();
+      if (!resp || resp.streamingState !== "streaming") {
+        clear();
+        lastText = "";
+        return;
+      }
+      // Aggregate the streamed prose across the turn's text-bearing components.
+      let text = "";
+      for (const p of resp.components) {
+        const { chatId, nodeId } = store.split(p);
+        const d = store.get(chatId, nodeId);
+        if (typeof d.text === "string") text += d.text;
+        if (typeof d.markdown === "string") text += d.markdown;
+      }
+      if (!text) {
+        // No answer text yet → still thinking/tool-calling. Keep streaming.
+        clear();
+        return;
+      }
+      if (text !== lastText) {
+        // Text is still growing → reset the settle window.
+        lastText = text;
+        clear();
+        timer = setTimeout(() => store.completeResponse(chatIdFor(selected ?? "app")), 1200);
+      }
+    });
+    return () => {
+      clear();
+      unsub();
+    };
+  }, [store, live]);
+
+  const defaultsOf = (d: Def) =>
+    Object.fromEntries(Object.entries(d.props ?? {}).map(([k, v]) => [k, v.default]));
+
+  // Seed the given components into the latest response, so any slot that matches fills;
+  // unmatched slots skeleton. The SET is chosen by the caller — scoped to the selected
+  // app's `previewComponents` when declared (see the seed effect below).
+  // ARRIVAL CONTRACT (STATE_MODEL §5b): a component streams in WITH its state already
+  // set — the seed carries the def's `state` block (its initial values). EXCEPT
+  // `defaultState`: in the preview the SELECTED STATE CHIP is the state controller —
+  // seeding always lands inline (the universal default), and the template's focus
+  // state chip writes `focused` into the slice (the where-activation below), exactly
+  // what a real arrival-in-focus or a component's own expand button would do.
+  function seed(comps: Def[]) {
+    // nodeId is per-INSTANCE (`name-i`), so previewComponents may repeat a name to
+    // seed several instances — e.g. ["coursecard", "coursecard"] previews a rail of cards.
+    comps.forEach((c, i) =>
+      store.apply({
+        type: "COMPONENT_INIT",
+        chatId: chatIdFor(selected ?? "app"),
+        nodeId: `${c.name}-${i}`,
+        component: {
+          type: c.name,
+          props: { ...defaultsOf(c), ...((c as { state?: Record<string, unknown> }).state ?? {}), defaultState: "inline" },
+        },
+      }),
+    );
+    setSeeded(comps.map((c) => c.name));
+    setVersion((v) => v + 1);
+  }
+
+  // Which components to mock for the current selection: ONLY an app's declared
+  // previewComponents. No declaration → seed nothing, so the template renders its own
+  // default/welcome state (the default view) instead of a dump of the whole catalog.
+  const seedSet = (tmpls: Def[], comps: Def[], sel: string | null): Def[] => {
+    const t = tmpls.find((t) => t.name === sel);
+    // The declaration lives in the app manifest (app.previewComponents); the def-level
+    // field is the legacy envelope home. Names are case-insensitive like every rx name,
+    // and each ENTRY seeds one instance — a repeated name previews several (a card rail).
+    const pc = t?.app?.previewComponents ?? t?.previewComponents ?? [];
+    return pc
+      .map((name) => comps.find((c) => c.name.toLowerCase() === name.toLowerCase()))
+      .filter((c): c is Def => Boolean(c));
+  };
+
+  useEffect(() => {
+    Promise.all([
+      // The header's org scope filters the list ("all" → every org's apps, each
+      // tagged); the selected app's org still picks its own preview theme.
+      // Components are universal — one catalog.
+      authedFetch(`/dev/templates${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`).then((r) => (r.ok ? r.json() : { templates: [] })),
+      authedFetch("/dev/components").then((r) => (r.ok ? r.json() : { components: [] })),
+    ])
+      .then(([t, c]) => {
+        const tl: Def[] = t.templates ?? [];
+        const cl: Def[] = c.components ?? [];
+        setTemplates(tl);
+        setComponents(cl);
+        if (live) setSeeded([]);
+        // Restore the persisted selection across reloads if it still exists; else first.
+        // MOCK seeding is handled by the scoped seed effect below (keyed on the selection),
+        // so the preview shows just the selected app's component(s), not the whole catalog.
+        if (tl[0]) setSelected((s) => (s && tl.some((t) => t.name === s) ? s : tl[0].name));
+      })
+      .catch(() => {
+        setTemplates([]);
+        setComponents([]);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [live, org]);
+
+  // MOCK seeding — scoped to the selected app's `preview` map (manifest): the author
+  // declares what each STATE's preview shows. The store is fresh per selection (keyed
+  // on [live, selected]), so each app starts clean. No declaration for the picked
+  // state → the legacy flat previewComponents, else the sample fallback below.
+  useEffect(() => {
+    if (live || !components.length || !selected) return;
+    const when = activeState?.when;
+    // TWO AXES compose (name-sync, docs/design/05): the LAYOUT pill picks the surfaced
+    // view (seeds components into it) while the LOCAL state picks the template's own
+    // condition (callState, hasMessages) — any layout × any state. `activeLayout` is
+    // the non-default layout pill, or null (default layout, no surfaced component).
+    const layoutSel = activeLayout ? { field: "defaultState", eq: activeLayout } : undefined;
+    // A picked state activates by its selector (UNOVERSE_LAYERS.md §7):
+    //  • "isEmpty"  → leave the store pristine (the template's empty/welcome layer)
+    //  • "hasMessages" / a component state / default → seed the mock conversation
+    //  • { field, eq } (template-state selector, e.g. defaultState="focus") → set it after seeding
+    // An explicit preview entry for the state OVERRIDES all of it — the author decided.
+    const previewMap = selectedDef?.app?.preview;
+    const entry = activeLayout ? previewMap?.[activeLayout] : activeState ? previewMap?.[activeState.name] : undefined;
+    const wantEmpty = !entry && !activeLayout && typeof when === "string" && when === "isEmpty";
+    // A COMPONENT is only seeded for a reaction-contract state (select.where) — the
+    // surface needs one to grab (Focus). Plain template states (welcome, conversation)
+    // preview the TEMPLATE's own chrome; a component in the transcript there is noise.
+    const wantComponent = Boolean(layoutSel) || Boolean((activeState?.where as { field?: string } | undefined)?.field);
+    let seededSet: Def[] = [];
+    if (!wantEmpty) {
+      const byName = (name: string) => components.find((c) => c.name.toLowerCase() === name.toLowerCase());
+      const set = entry
+        ? entry.map(byName).filter((c): c is Def => Boolean(c))
+        : wantComponent
+          ? seedSet(templates, components, selected)
+          : [];
+      // Seed when there's preview content OR a picked state that needs a live conversation.
+      if (set.length || activeState) {
+        store.addUserMessage(chatIdFor(selected ?? "app"), "Show me this app");
+        // Component states need a body to grab; app declares no previewComponents →
+        // fall back to the SAMPLE ANSWER (the Markdown component's own default content)
+        // so the conversation still previews a real assistant turn.
+        const sample = components.filter((c) => c.name.toLowerCase() === "markdownrenderer");
+        seededSet = set.length ? set : sample;
+        seed(seededSet);
+        // A mock preview is a FINISHED turn — complete it so streaming chrome
+        // ("Writing…", dots) doesn't hang forever (mock has no settle watcher).
+        store.completeResponse(chatIdFor(selected ?? "app"));
+      }
+    }
+    if (when && typeof when === "object" && "field" in (when as object)) {
+      const c = when as { field: string; eq?: unknown };
+      store.mergeTemplateState({ [c.field]: c.eq ?? true });
+    } else if (typeof when === "string" && when !== "isEmpty" && when !== "hasMessages") {
+      store.mergeTemplateState({ [when]: true });
+    }
+    // Reaction-contract activation (STATE_MODEL §5b): the surface (or the layout pill —
+    // same selector) reacts to COMPONENT state, so activate it the way the runtime
+    // does — put a seeded component INTO that view. Same write the component's own
+    // buttons perform.
+    const whereSel = layoutSel ?? (activeState?.where as { field?: string; eq?: unknown } | undefined);
+    if (whereSel?.field) {
+      // Every seeded instance enters the previewed state — the author's `preview`
+      // map already said exactly what belongs here (a multi-instance surface like a
+      // card rail previews full; a limit:1 surface shows the newest).
+      seededSet.forEach((c, i) => store.mergeComponentState(chatIdFor(selected ?? "app"), `${c.name}-${i}`, { [whereSel.field!]: whereSel.eq ?? true }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store, selected, components, templates, live, activeState, activeLayout]);
+
+  return (
+    <div className="grid min-h-0 flex-1 grid-cols-[190px_1fr] overflow-hidden">
+      {/* NAVIGATOR */}
+      <nav className="flex min-h-0 min-w-0 flex-col overflow-auto border-r border-gray-700 bg-[#2c2c2e] p-2">
+        <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Apps</div>
+        {templates.length === 0 && (
+          <div className="p-2 text-xs text-gray-400">No apps yet — add one under rx/orgs/&lt;client&gt;/templates/.</div>
+        )}
+        {templates.map((t) => (
+          <div key={`${t.org ?? ""}/${t.name}`}>
+            <button
+              onClick={() => setSelected(t.name)}
+              className={`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm transition ${
+                selected === t.name ? "bg-emerald-500/15 text-emerald-300" : "text-gray-300 hover:bg-white/5"
+              }`}
+            >
+              <span className="min-w-0 flex-1 truncate">{t.name}</span>
+              {/* Org badge only in the cross-org ("all") view — scoped, it's redundant */}
+              {org === "all" && t.org && (
+                <span className="shrink-0 rounded bg-white/10 px-1.5 py-px text-[9px] font-bold uppercase tracking-wider text-gray-400">
+                  {t.org}
+                </span>
+              )}
+            </button>
+            {/* Storybook-style layer views — the template's states/ folder (UNOVERSE_LAYERS.md §7).
+                Mock view only: states are a preview affordance, not a live control. LAYOUTS are
+                NOT listed here — they get the toolbar pill row (the component-faces treatment);
+                the rail keeps only the template's LOCAL states. */}
+            {!live && selected === t.name && (t.states?.length ?? 0) > 0 && (
+              <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
+                {t.states!.filter((s) => !(t.layouts && s.name in t.layouts!)).map((s) => (
+                  <button
+                    key={s.name}
+                    onClick={() => {
+                      setActiveState(s);
+                      setSeedKey((k) => k + 1); // picking = jump + reseed that scenario
+                    }}
+                    title={`state: ${s.name}`}
+                    className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
+                      (liveStateName ?? activeState?.name) === s.name ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
+                    }`}
+                  >
+                    {s.name}
+                  </button>
+                ))}
+              </div>
+            )}
+            {/* A seeded component's OWN states are its business — design/step them in the
+                COMPONENTS view. The template rail lists only the TEMPLATE's states. */}
+          </div>
+        ))}
+      </nav>
+
+      {/* MAIN */}
+      <div className="flex min-h-0 min-w-0 flex-col">
+        {/* toolbar */}
+        <div className="flex items-center gap-3 border-b px-4 py-2 text-[11px]" style={{ borderColor: theme.color["border.subtle"], color: theme.color["text.secondary"], background: theme.color["surface.base"] }}>
+          <span className="font-medium uppercase tracking-wider opacity-60">{selected ?? "template"}</span>
+          {/* TEMPLATE LAYOUTS (name-sync) — the faces pill row, template tier: the default
+              layout first, then each named layout. Picking one runs the SAME activation a
+              reaction surface uses (its served `where` selector seeds a component into the
+              view of that name), so the preview machinery needs zero special-casing. */}
+          {!live && selectedDef?.layouts && (
+            <div className="flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
+              {[selectedDef.defaultLayout ?? "main",
+                // AUTHORED ORDER: the served states list is already stateOrder-ranked —
+                // rank layout pills by it; anything unranked falls to the end.
+                ...(selectedDef.states ?? []).map((s) => s.name).filter((n) => n !== (selectedDef.defaultLayout ?? "main") && selectedDef.layouts && n in selectedDef.layouts!),
+                ...Object.keys(selectedDef.layouts).filter((n) => n !== (selectedDef.defaultLayout ?? "main") && !(selectedDef.states ?? []).some((s) => s.name === n)),
+              ].map((n) => {
+                const isDefault = n === (selectedDef.defaultLayout ?? "main");
+                const on = isDefault ? !activeLayout : activeLayout === n;
+                return (
+                  <button
+                    key={n}
+                    onClick={() => {
+                      setActiveLayout(isDefault ? null : n); // the layout AXIS only — the local state stays put
+                      setSeedKey((k) => k + 1);
+                    }}
+                    className="rounded px-2 py-0.5 font-medium capitalize transition"
+                    style={on ? { background: theme.color["surface.base"], color: theme.color["text.primary"] } : { color: theme.color["text.secondary"] }}
+                  >
+                    {n}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+          {selected && <ToggleSwitch on={spatial.isEnabled(selected)} onClick={() => spatial.toggle(selected)} label="Spatial" />}
+          {selected && (
+            <button
+              onClick={() => setMetaOpen((o) => !o)}
+              className="flex items-center gap-1 rounded border px-2 py-0.5 font-medium"
+              style={{ borderColor: theme.color["border.subtle"], color: metaOpen ? theme.color["text.primary"] : theme.color["text.secondary"], background: metaOpen ? theme.color["surface.sunken"] : "transparent" }}
+              title="Show the MCP app manifest"
+            >
+              {selectedDef?.app ? "ⓘ MCP app" : "ⓘ Details"} <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+            </button>
+          )}
+
+          {/* MOCK ⇄ LIVE — live opens the Gravity data plane against the dev workflow */}
+          <div className="flex items-center gap-1 rounded p-0.5" style={{ background: theme.color["border.subtle"] }}>
+            {[
+              { id: "mock", label: "Mock", on: !live },
+              { id: "live", label: "Live", on: live },
+            ].map((m) => (
+              <button
+                key={m.id}
+                onClick={() => setLive(m.id === "live")}
+                className="rounded px-2 py-0.5 font-medium transition"
+                style={m.on ? { background: theme.color["surface.base"], color: theme.color["text.primary"] } : { color: theme.color["text.secondary"] }}
+              >
+                {m.label}
+              </button>
+            ))}
+          </div>
+          {live ? (
+            // Live connection: one status chip → popover with the labeled target fields.
+            // Identity/sign-in lives in the HEADER (AuthButton); the token flows from the
+            // same session, so it's NOT repeated here. The pasted-JWT field appears only
+            // when OIDC isn't configured (the no-header-login fallback).
+            <div className="relative">
+              <button
+                onClick={() => setConnOpen((o) => !o)}
+                className="flex items-center gap-1.5 rounded border px-2 py-0.5 font-medium"
+                style={{ borderColor: theme.color["border.subtle"], color: theme.color["text.secondary"] }}
+                title="Live connection settings"
+              >
+                <span
+                  className="inline-block h-2 w-2 shrink-0 rounded-full"
+                  style={{ background: conn.isReady ? "#22c55e" : conn.isConnected ? "#eab308" : "#9ca3af" }}
+                />
+                <span className="font-medium">{conn.isReady ? "Connected" : conn.isConnected ? "Connecting…" : "Offline"}</span>
+                {binding?.workflow && <span className="font-mono text-[10px] opacity-60">· {binding.workflow}</span>}
+                <span className="opacity-60">▾</span>
+              </button>
+              {connOpen && (
+                <>
+                  <div className="fixed inset-0 z-10" onClick={() => setConnOpen(false)} />
+                  <div
+                    className="absolute left-0 top-full z-20 mt-1 w-64 rounded border p-3 shadow-xl"
+                    style={{ background: theme.color["surface.base"], borderColor: theme.color["border.subtle"] }}
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <span className="text-[10px] font-semibold uppercase tracking-wider opacity-60">Live connection</span>
+                      <span className="text-[10px]" style={{ color: conn.isReady ? "#22c55e" : conn.isConnected ? "#eab308" : theme.color["text.tertiary"] }}>
+                        {conn.isReady ? "ready" : conn.isConnected ? "connecting…" : "offline"}
+                      </span>
+                    </div>
+                    {/* Read-only: the app decides. Server is environment; Workflow + Trigger
+                        come from the selected app's manifest binding (no manual entry). */}
+                    {(
+                      [
+                        { label: "Server", value: connCfg.server, note: "environment" },
+                        { label: "Workflow", value: binding?.workflow ?? "— no app binding", note: "from app" },
+                        { label: "Trigger node", value: binding?.trigger ?? "—", note: "from app" },
+                      ]
+                    ).map((f) => (
+                      <div key={f.label} className="mb-2">
+                        <span className="mb-0.5 block text-[10px] opacity-70">
+                          {f.label} <span className="opacity-50">· {f.note}</span>
+                        </span>
+                        <div
+                          className="w-full rounded border bg-transparent px-1.5 py-1 font-mono text-[10px]"
+                          style={{ borderColor: theme.color["border.subtle"], color: theme.color["text.primary"] }}
+                        >
+                          {f.value}
+                        </div>
+                      </div>
+                    ))}
+                    {!hasAuth && (
+                      <label className="block">
+                        <span className="mb-0.5 block text-[10px] opacity-70">JWT token</span>
+                        <input
+                          type="password"
+                          defaultValue={connCfg.token}
+                          placeholder="paste a JWT (or DISABLE_AUTH=true)"
+                          onBlur={(e) => e.target.value !== connCfg.token && applyConn({ token: e.target.value.trim() })}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+                          }}
+                          className="w-full rounded border bg-transparent px-1.5 py-1 font-mono text-[10px] focus:outline-none"
+                          style={{ borderColor: theme.color["border.subtle"], color: theme.color["text.primary"] }}
+                        />
+                      </label>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          ) : (
+            <span className="opacity-60">seeded: {seeded.length ? seeded.join(", ") : "—"}</span>
+          )}
+
+          {/* Responsive viewport presets — simulate the channel/device width */}
+          <div className="ml-auto flex items-center gap-1 rounded p-0.5" style={{ background: theme.color["border.subtle"] }}>
+            {VIEWPORTS.map((v) => (
+              <button
+                key={v.id}
+                onClick={() => setStageWidth(v.w)}
+                className="rounded px-2 py-0.5 font-medium transition"
+                style={
+                  stageWidth === v.w
+                    ? { background: theme.color["surface.base"], color: theme.color["text.primary"] }
+                    : { color: theme.color["text.secondary"] }
+                }
+              >
+                {v.label}
+              </button>
+            ))}
+          </div>
+          <span className="tabular-nums" style={{ color: theme.color["text.tertiary"] }}>{stageWidth ? `${stageWidth}px` : "100%"}</span>
+        </div>
+
+        {/* MCP APP DETAILS — the selected template's manifest (discovery meta + binding). */}
+        {metaOpen && selected && (() => {
+          const app = selectedDef?.app;
+          const accent = theme.color["action.primary"] ?? "#6366f1";
+          const warn = theme.color["status.warning"] ?? "#d97706";
+          const ok = theme.color["status.success"] ?? "#22c55e";
+          const sub = theme.color["text.secondary"];
+          const muted = theme.color["text.tertiary"];
+          const uri = `unoverse://apps/${selectedDef?.org ? `${selectedDef.org}/` : ""}${selected.toLowerCase()}`;
+          const initials = (app?.name ?? selected).split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+          const fields = app
+            ? [
+                { label: "Workflow", value: app.binding?.workflow || "unbound", mono: true, tone: app.binding?.workflow ? undefined : warn },
+                { label: "Trigger", value: app.binding?.trigger || "—", mono: true },
+                { label: "Auto-trigger", value: app.autoTrigger ? "On load" : "On message", dot: app.autoTrigger ? ok : muted },
+                { label: "Layout", value: selected, mono: true },
+                { label: "Default state", value: (() => { const v = app.defaultState ?? app.mode ?? "template"; return v.charAt(0).toUpperCase() + v.slice(1); })(), dot: (app.defaultState ?? app.mode ?? "template") === "template" ? ok : muted },
+                { label: "Input params", value: Object.keys(((app.inputSchema as { properties?: Record<string, unknown> })?.properties) ?? {}).join(", ") || "—", mono: true },
+              ]
+            : [];
+          return (
+            <div className="border-b px-5 py-4" style={{ borderColor: theme.color["border.subtle"], background: theme.color["surface.base"] }}>
+              {app ? (
+                <div className="mx-auto flex max-w-5xl flex-col gap-4">
+                  {/* Identity row */}
+                  <div className="flex items-start gap-3.5">
+                    <div
+                      className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[13px] font-bold tracking-tight"
+                      style={{ background: `${accent}1a`, color: accent, border: `1px solid ${accent}33` }}
+                    >
+                      {initials}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h2 className="text-[17px] font-semibold leading-tight tracking-tight" style={{ color: theme.color["text.primary"] }}>{app.name}</h2>
+                        {app.category && (
+                          <span className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide" style={{ background: `${accent}14`, color: accent }}>
+                            {app.category}
+                          </span>
+                        )}
+                        {app.version && <span className="font-mono text-[10px]" style={{ color: muted }}>v{app.version}</span>}
+                      </div>
+                      {app.description && (
+                        <p className="mt-1 max-w-3xl text-[13px] leading-relaxed" style={{ color: sub }}>{app.description}</p>
+                      )}
+                      {app.whenToUse && (
+                        <div
+                          className="mt-2 max-w-3xl rounded-r pl-3 py-1.5"
+                          style={{ borderLeft: `3px solid ${accent}`, background: theme.color["surface.sunken"] }}
+                        >
+                          <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider" style={{ color: accent }}>
+                            When to use
+                          </div>
+                          <p className="text-[15px] font-medium leading-relaxed" style={{ color: theme.color["text.primary"] }}>{app.whenToUse}</p>
+                        </div>
+                      )}
+                    </div>
+                    <button
+                      onClick={() => { void navigator.clipboard?.writeText(uri); setCopiedUri(true); setTimeout(() => setCopiedUri(false), 1200); }}
+                      className="group flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 font-mono text-[10px] transition"
+                      style={{ background: theme.color["surface.sunken"], border: `1px solid ${theme.color["border.subtle"]}`, color: muted }}
+                      title="Copy app URI"
+                    >
+                      {copiedUri ? <span style={{ color: ok }}>✓ copied</span> : <><span style={{ color: muted }}>{uri}</span><span className="opacity-50 group-hover:opacity-100">⧉</span></>}
+                    </button>
+                  </div>
+
+                  {/* Stat grid */}
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+                    {fields.map((f) => (
+                      <div
+                        key={f.label}
+                        className="flex flex-col gap-1 rounded-lg px-3 py-2.5"
+                        style={{ background: theme.color["surface.sunken"], border: `1px solid ${theme.color["border.subtle"]}` }}
+                      >
+                        <span className="text-[9.5px] font-semibold uppercase tracking-[0.08em]" style={{ color: muted }}>{f.label}</span>
+                        <span className="flex items-center gap-1.5 truncate" title={String(f.value)}>
+                          {"dot" in f && f.dot && <span className="h-1.5 w-1.5 shrink-0 rounded-full" style={{ background: f.dot }} />}
+                          <span className={`truncate ${f.mono ? "font-mono text-[11px]" : "text-[12px]"}`} style={{ color: f.tone ?? theme.color["text.primary"] }}>{f.value}</span>
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="mx-auto flex max-w-5xl items-start gap-3.5">
+                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[13px] font-bold" style={{ background: theme.color["surface.sunken"], color: muted, border: `1px solid ${theme.color["border.subtle"]}` }}>
+                    {initials}
+                  </div>
+                  <div className="text-[13px] leading-relaxed" style={{ color: sub }}>
+                    <span className="font-semibold" style={{ color: theme.color["text.primary"] }}>Plain template</span> — not yet a discoverable MCP app.
+                    <br />Add a <code className="rounded px-1 font-mono text-[11px]" style={{ background: theme.color["surface.sunken"] }}>manifest.json</code> beside{" "}
+                    <code className="rounded px-1 font-mono text-[11px]" style={{ background: theme.color["surface.sunken"] }}>{selected.toLowerCase()}.json</code> to give it a name, description, and workflow binding.
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })()}
+
+        {/* STAGE — templates are full-screen layouts; render in a centered device frame */}
+        <section className="flex min-h-0 flex-1 justify-center overflow-auto p-6 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden" style={{ background: theme.color["surface.sunken"] ?? "#f3f4f6" }} data-store-version={version} data-store-width={storeVersion}>
+          {selected && (
+            <div
+              // The host just provides the DEVICE BOX; the template's own layout DATA fills it
+              // (a template surface fills its container — see StreamedUnoverseTemplate). Per-
+              // template height mode (manifest `fluidHeight`, default true): FLUID gives a
+              // full-height box (chat/voice fill it); CONTENT gives an auto-height box that
+              // wraps the rendered component (widget apps like Bank Transfer) — `self-start`
+              // so the flex stage doesn't stretch it.
+              className={`shrink-0 overflow-hidden transition-[width] duration-200 ${
+                (selectedDef?.fluidHeight ?? true) ? "" : "self-start"
+              }`}
+              style={{
+                width: stageWidth ?? "100%",
+                maxWidth: "100%",
+                ...((selectedDef?.fluidHeight ?? true) ? { height: "100%" } : {}),
+                background: theme.color["surface.base"],
+                border: `1px solid ${theme.color["border.subtle"]}`,
+                borderRadius: 8,
+                boxShadow: theme.shadow["lg"],
+              }}
+            >
+              {/* THE HOST'S JOB (twin of the embed page's unoverse:size handler): render the
+                  app at its STATE-OWNED width — the layout root's `appWidth` (the core
+                  surface's constant width) plus any occupied panel slot's `appWidth`
+                  (computeAppWidth; manifest width/focusWidth = legacy fallback). Raw CSS —
+                  min()/vw OK; vw resolves against the real viewport, so maxWidth clamps it
+                  to the device box. Without this the preview lies about the channel width. */}
+              <div
+                style={{
+                  // TRUE width, never clamped: a panel is its declared width always, so
+                  // an app wider than the device box CLIPS at the edge (like a real
+                  // too-small screen) — it must never squeeze into garbage.
+                  width: computeAppWidth(resolveActiveLayout(selectedDef as never, store), store, theme?.appSize) ?? "100%",
+                  margin: "0 auto",
+                  transition: "width 200ms",
+                  ...((selectedDef?.fluidHeight ?? true) ? { height: "100%" } : {}),
+                }}
+              >
+              <StreamedUnoverseTemplate
+                client={client}
+                store={store}
+                // The workflow can SELECT the template (WORKFLOW_STARTED metadata.template →
+                // store.activeTemplate); that overrides the manual pick. Loaded via the
+                // official resources/read unoverse://templates/{name} (templates = MCP apps).
+                uri={`unoverse://templates/${selectedDef?.org ? `${selectedDef.org}/` : ""}${conn.activeTemplate ?? selected}`}
+                theme={theme}
+                // Voice state arrives via TEMPLATE STATE (the service is a producer inside
+                // the renderer); startCall/endCall/toggleMute are answered there too.
+                props={undefined}
+                voice={voiceConfig}
+                onAction={(action, data, meta) => {
+                  // Controlled composer: the Input emits "input" on every keystroke → the
+                  // shared draft. A send button (or Enter) emits "sendMessage".
+                  if (action === "input") {
+                    store.setDraft(typeof data?.text === "string" ? data.text : "");
+                    return;
+                  }
+                  // Disclosure (FAQ pill, etc.) is a self-contained COMPONENT — it holds its own
+                  // open/closed state via setValue on its slice. No channel glue, no store plane.
+                  if (action !== "sendMessage") {
+                    // Any OTHER named server action (submit, selectCourse…) goes over the
+                    // DATA PLANE (user_action) with the firing component's identity +
+                    // submitted state. A submission RESOLVES the component's WAITING node
+                    // execution — the node returns the answers as standard promise output
+                    // and the workflow continues (UNOVERSE_NODE_RUNTIME § Component
+                    // outputs). No new workflow run is fired.
+                    const t = typeof action === "string" ? action : (action as { type?: string })?.type;
+                    if (!t || !live) return;
+                    // Native first: if the server is ELICITING on this session (§3.3),
+                    // the submitted state answers it — one accept completes the waiting
+                    // node and the held tool call. Else fall back to user_action.
+                    const state = (meta?.state ?? data) as Record<string, unknown>;
+                    // Inspector capture (BEFORE the elicitation branch so both rungs
+                    // record): project through the app component's declared `outputs`;
+                    // no declaration → show the full submitted state.
+                    {
+                      const pcName = (selectedDef?.app?.previewComponents ?? selectedDef?.previewComponents ?? [])[0];
+                      const outs = pcName
+                        ? (components.find((c) => c.name.toLowerCase() === pcName.toLowerCase()) as (Def & { outputs?: Record<string, unknown> }) | undefined)?.outputs
+                        : undefined;
+                      const keys = outs ? Object.keys(outs) : null;
+                      setLastOutput({
+                        at: new Date().toLocaleTimeString(),
+                        data: keys ? Object.fromEntries(keys.filter((k) => state[k] !== undefined).map((k) => [k, state[k]])) : state,
+                      });
+                    }
+                    if (conn.resolveElicitation(state)) return;
+                    conn.sendAction(t, {
+                      componentNodeId: meta?.nodeId,
+                      // The component's OWN chatId is the TURN id — the waiting node
+                      // execution is keyed `<turn>:<nodeId>`.
+                      componentChatId: meta?.chatId,
+                      componentState: state,
+                    });
+                    return;
+                  }
+                  // A suggestion naming an APP launches it instead of sending its text (same
+                  // contract as the embedded channel): look up that app's manifest binding in
+                  // the loaded list, pre-open the focus surface as the loading state, and fire
+                  // ITS trigger — no user turn, nothing printed to the conversation.
+                  const appRef = typeof (data as Record<string, unknown>)?.app === "string" ? ((data as Record<string, unknown>).app as string).toLowerCase() : "";
+                  if (appRef) {
+                    const target = templates.find((t) => `${(t.org ?? "").toLowerCase()}/${t.name.toLowerCase()}` === appRef || t.name.toLowerCase() === appRef);
+                    const b = target?.app?.binding ?? target?.binding;
+                    if (!b?.trigger) {
+                      console.error("[workbench] app launch: no binding for", appRef);
+                      return;
+                    }
+                    // Write the app's declared default state (open NAME) into template state
+                    // on load — templates branch on `defaultState` by name. "template" apps
+                    // ARE the surface, so there's nothing to write.
+                    const declared = target?.app?.defaultState ?? target?.app?.mode ?? "template";
+                    if (declared !== "template") store.mergeTemplateState({ defaultState: declared });
+                    if (live) conn.trigger({ app: appRef, metadata: { targetTriggerNode: b.trigger } });
+                    else console.warn("[workbench] app launch is LIVE-only (mock has no workflow):", appRef);
+                    return;
+                  }
+                  const text = (typeof data?.text === "string" && data.text) || store.getDraft();
+                  if (!text.trim()) return;
+                  if (live) {
+                    // LIVE: optimistic user turn + REST workflow trigger (components stream back over WS).
+                    conn.sendMessage(text);
+                  } else {
+                    // MOCK: append a user turn locally + open the assistant turn so the
+                    // avatar + thinking dots show immediately (mirrors the live path).
+                    store.addUserMessage(chatIdFor(selected ?? "app"), text);
+                    store.startResponse(chatIdFor(selected ?? "app"));
+                  }
+                  store.setDraft(""); // clear the composer after sending
+                  setVersion((v) => v + 1);
+                }}
+              />
+              </div>
+            </div>
+          )}
+
+          {/* LIVE OUTPUT INSPECTOR — subtle, right edge. The last submitted app output:
+              exactly what the waiting node returned and the held tool call carried back
+              to the calling LLM. Dev chrome only — never part of the rendered app. */}
+          {live && lastOutput && (
+            <div
+              className="fixed bottom-5 right-5 z-50 w-80 rounded-xl border shadow-lg"
+              style={{ background: theme.color["surface.base"], borderColor: theme.color["border.subtle"] }}
+            >
+              <div className="flex items-center justify-between px-3.5 pt-2.5">
+                <div className="text-[11px] font-semibold uppercase tracking-wide" style={{ color: theme.color["text.tertiary"] }}>
+                  Output · {lastOutput.at}
+                </div>
+                <button
+                  className="cursor-pointer border-0 bg-transparent p-0 text-xs leading-none"
+                  style={{ color: theme.color["text.tertiary"] }}
+                  onClick={() => setLastOutput(null)}
+                  aria-label="Dismiss output"
+                >
+                  ✕
+                </button>
+              </div>
+              <pre className="m-0 max-h-64 overflow-auto px-3.5 py-2.5 text-[11px] leading-relaxed" style={{ color: theme.color["text.primary"] }}>
+                {JSON.stringify(lastOutput.data, null, 2)}
+              </pre>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}