@uniqbit/mate-core 0.18.1-canary.4 → 0.18.1

package/src/cli/commands/studio/views/document.tsx

@@ -11,6 +11,7 @@ import {
   switchView,
   toHref,
 } from "../selection";
+import { REPORTS_ROUTE, VAULT_CHANGES_ROUTE, VAULT_DIR_ROUTE, VAULT_FILTER_ROUTE } from "../routes";
 import { STUDIO_CLIENT_SCRIPT, STUDIO_PREPAINT_SCRIPT } from "./client";
 import { CompanionPicker } from "./companion-picker";
 import { CompanionSelector } from "./companion-selector";
@@ -18,6 +19,8 @@ import { Dashboard } from "./dashboard/index";
 import { CompanionError } from "./error";
 import { formatCollectedAt, type StudioPage, type StudioVaultPage } from "./model";
 import type { VaultTreeNode } from "../vault";
+import { Reports } from "./reports/index";
+import { specActionOffers } from "../actions";
 import { Specs } from "./specs/index";
 import { SelectionFields } from "./selection-fields";
 import { STUDIO_STYLES } from "./styles";
@@ -55,6 +58,10 @@ const VIEW_DETAILS = {
     eyebrow: "Companion files",
     title: "Vault",
   },
+  reports: {
+    eyebrow: "Agent output",
+    title: "Reports",
+  },
 } as const;
 
 /**
@@ -99,6 +106,7 @@ function StudioShell({ page }: { page: StudioPage }) {
         className="shell"
         data-companion={page.companion ? companionDigest(page.companion.path) : undefined}
         data-terminal={page.terminal ? "" : undefined}
+        {...reportAttributes(page)}
       >
         <Sidebar page={page} />
         <main className="main">
@@ -109,10 +117,27 @@ function StudioShell({ page }: { page: StudioPage }) {
       </div>
       {page.terminal ? <TerminalDrawerButton /> : null}
       <div className="toast" id="studio-toast" data-shown="false" />
+      <div className="toast toast-report" id="reports-toast" data-shown="false" role="status">
+        <span id="reports-toast-title" />
+        <a id="reports-toast-open">Open</a>
+      </div>
     </>
   );
 }
 
+/** What the page client needs to follow the shown companion's reports; nothing without one. */
+function reportAttributes(page: StudioPage): Record<string, string> {
+  if (!page.companion) return {};
+  const digest = companionDigest(page.companion.path);
+  const query = new URLSearchParams({ companion: digest });
+  const events = new URLSearchParams({ companion: digest, scope: "reports" });
+  return {
+    "data-reports-url": `${REPORTS_ROUTE}?${query}`,
+    "data-reports-events-url": `${VAULT_CHANGES_ROUTE}?${events}`,
+    "data-reports-view-url": toHref(switchView(page.selection, "reports"), "/"),
+  };
+}
+
 function Content({ page }: { page: StudioPage }) {
   if (!page.companion) {
     return <CompanionPicker inventory={page.inventory} selection={page.selection} />;
@@ -121,6 +146,7 @@ function Content({ page }: { page: StudioPage }) {
     return <CompanionError companionPath={page.error.companionPath} reason={page.error.reason} />;
   }
   if (page.selection.view === "vault") return <Vault page={page} selection={page.selection} />;
+  if (page.selection.view === "reports") return <Reports />;
   if (!page.payload) {
     return (
       <section className="panel">
@@ -131,7 +157,15 @@ function Content({ page }: { page: StudioPage }) {
   if (page.selection.view === "workflow") {
     return <Workflow payload={page.payload} />;
   }
-  if (page.selection.view === "specs") return <Specs payload={page.payload} />;
+  if (page.selection.view === "specs") {
+    const { payload } = page;
+    return (
+      <Specs
+        payload={payload}
+        actions={specActionOffers(payload.companionPath, payload.skillInventory, page.terminal)}
+      />
+    );
+  }
   if (page.selection.view === "skills") return <Skills skills={page.payload.skillInventory} />;
   return <Dashboard payload={page.payload} />;
 }
@@ -185,6 +219,7 @@ const VIEW_NAV: readonly (readonly [StudioView, string])[] = [
   ["specs", "Specs"],
   ["workflow", "Workflow"],
   ["skills", "Skills"],
+  ["reports", "Reports"],
 ];
 
 /**
@@ -201,6 +236,11 @@ function ViewNav({ selection }: { selection: StudioSelection }) {
             <SelectionFields selection={switchView(selection, view)} />
             <button type="submit" aria-pressed={selection.view === view}>
               <span>{label}</span>
+              {view === "reports" ? (
+                <span id="reports-badge" className="nav-badge" hidden>
+                  new
+                </span>
+              ) : null}
             </button>
           </form>
         ))}
@@ -266,6 +306,83 @@ export function renderVaultView(page: StudioPage): string {
   );
 }
 
+/** A folder's entries, for a folder the page did not expand; `null` when the listed tree lacks it. */
+export function renderVaultChildren(page: StudioPage): string | null {
+  const { selection, vault } = page;
+  if (!vault?.tree || selection.view !== "vault" || !selection.openDir) return null;
+  const folder = findDirectory(vault.tree, selection.openDir);
+  if (!folder) return null;
+  const nobody = new Set<string>();
+  return String(
+    <>
+      {(folder.children ?? []).toSorted(byKindThenName).map((child) => (
+        <VaultNode key={child.path} node={child} selection={selection} expanded={nobody} />
+      ))}
+    </>,
+  );
+}
+
+/** Most matches a filter shows; the rest are counted, not rendered. */
+export const VAULT_FILTER_LIMIT = 200;
+
+function matchingFiles(
+  tree: VaultTreeNode[],
+  needle: string,
+): { shown: VaultTreeNode[]; total: number } {
+  const shown: VaultTreeNode[] = [];
+  let total = 0;
+  const stack = [...tree].reverse();
+  while (stack.length > 0) {
+    const node = stack.pop()!;
+    if (node.kind === "directory") {
+      for (let index = (node.children?.length ?? 0) - 1; index >= 0; index -= 1) {
+        stack.push(node.children![index]!);
+      }
+    } else if (segments(node.path).join("/").toLowerCase().includes(needle)) {
+      total += 1;
+      if (shown.length < VAULT_FILTER_LIMIT) shown.push(node);
+    }
+  }
+  return { shown, total };
+}
+
+/** Name-filter results over the whole listed tree, bounded; never touches the disk. */
+export function renderVaultMatches(page: StudioPage, query: string): string {
+  const { selection, vault } = page;
+  const needle = query.trim().toLowerCase();
+  if (!vault?.tree || selection.view !== "vault" || !needle) return "";
+  const { shown, total } = matchingFiles(vault.tree, needle);
+  return String(
+    <>
+      {shown.length === 0 ? (
+        <p className="empty">No files match.</p>
+      ) : (
+        <nav className="vault-tree vault-results" aria-label="Matching files">
+          {shown.map((node) => (
+            <VaultFileLink
+              key={node.path}
+              node={node}
+              selection={selection}
+              label={segments(node.path).join("/")}
+            />
+          ))}
+        </nav>
+      )}
+      {total > shown.length ? (
+        <p className="note" data-vault-more>
+          {total - shown.length} more match{total - shown.length === 1 ? "" : "es"}; refine the
+          filter.
+        </p>
+      ) : null}
+    </>,
+  );
+}
+
+/** The selection a read-only vault route is addressed by: no one-shot refresh. */
+function plain(selection: StudioVaultSelection): StudioVaultSelection {
+  return { ...selection, refresh: false };
+}
+
 function segments(relative: string): string[] {
   return relative.split(/[\\/]/).filter(Boolean);
 }
@@ -326,11 +443,19 @@ function Vault({ page, selection }: { page: StudioPage; selection: StudioVaultSe
       className="vault-layout"
       data-vault-layout
       data-vault-view={vault.tree === null ? toHref(selection, "/api/vault/view") : undefined}
+      data-vault-refresh-url={toHref(refresh(selection), "/api/vault/view")}
+      data-vault-filter-url={toHref(plain(selection), VAULT_FILTER_ROUTE)}
+      data-vault-changes-url={toHref(plain(selection), VAULT_CHANGES_ROUTE)}
     >
       <aside className="panel vault-tree-panel" id="vault-tree-panel" aria-label="Files">
         <div className="vault-tree-head">
           <strong>Files</strong>
+          <RefreshTree selection={selection} />
         </div>
+        <p id="vault-stale" className="note vault-warning" role="status" hidden>
+          Files changed — refresh tree.
+        </p>
+        <p id="vault-refresh-status" className="note vault-warning" role="status" hidden />
         <input
           type="search"
           id="vault-filter"
@@ -339,6 +464,7 @@ function Vault({ page, selection }: { page: StudioPage; selection: StudioVaultSe
           aria-label="Go to file"
           hidden
         />
+        <div id="vault-filter-results" data-vault-filter-results hidden />
         <VaultTreeSlot vault={vault} selection={selection} />
       </aside>
       <div className="vault-main">
@@ -362,9 +488,10 @@ function Vault({ page, selection }: { page: StudioPage; selection: StudioVaultSe
   );
 }
 
+/** The refresh that keeps the tree and filter data current; without script it is a plain reload. */
 function RefreshTree({ selection }: { selection: StudioVaultSelection }) {
   return (
-    <form method="get" action="/" data-studio-navigation>
+    <form method="get" action="/" data-studio-navigation data-vault-refresh>
       <SelectionFields selection={refresh(selection)} />
       <button type="submit">Refresh tree</button>
     </form>
@@ -382,7 +509,6 @@ function VaultTreeSlot({
     return (
       <div data-vault-slot="tree">
         <p className="note vault-warning">The files could not be listed: {vault.failure}</p>
-        <RefreshTree selection={selection} />
       </div>
     );
   }
@@ -395,11 +521,12 @@ function VaultTreeSlot({
   }
   const expanded = expandedPaths(selection);
   return (
-    <div data-vault-slot="tree">
+    <div data-vault-slot="tree" data-vault-generation={vault.generation ?? undefined}>
       {vault.warning ? (
         <p className="note vault-warning">{vault.warning}. The tree may be out of date.</p>
-      ) : null}
-      {!vault.watching ? <RefreshTree selection={selection} /> : null}
+      ) : vault.watching ? null : (
+        <p className="note vault-warning">The tree may be out of date.</p>
+      )}
       {vault.tree.length === 0 ? (
         <p className="empty">This companion has no markdown files.</p>
       ) : (
@@ -431,6 +558,9 @@ function VaultNode({
         open={open}
         data-vault-dir={key}
         data-vault-expanded={open ? "" : undefined}
+        data-vault-children-url={
+          open ? undefined : toHref(openFolder(selection, key), VAULT_DIR_ROUTE)
+        }
       >
         <summary
           aria-current={
@@ -442,27 +572,45 @@ function VaultNode({
           <span>{node.name}</span>
         </summary>
         <div className="vault-children">
-          {(node.children ?? []).toSorted(byKindThenName).map((child) => (
-            <VaultNode key={child.path} node={child} selection={selection} expanded={expanded} />
-          ))}
+          {open
+            ? (node.children ?? [])
+                .toSorted(byKindThenName)
+                .map((child) => (
+                  <VaultNode
+                    key={child.path}
+                    node={child}
+                    selection={selection}
+                    expanded={expanded}
+                  />
+                ))
+            : null}
         </div>
       </details>
     );
   }
+  return <VaultFileLink node={node} selection={selection} label={node.name} />;
+}
+
+/** A plain link: no form, no hidden fields, no handler of its own. */
+function VaultFileLink({
+  node,
+  selection,
+  label,
+}: {
+  node: VaultTreeNode;
+  selection: StudioVaultSelection;
+  label: string;
+}) {
   return (
-    <form
-      method="get"
-      action="/"
+    <a
       className="vault-file"
-      data-studio-navigation
-      data-vault-entry={key}
+      href={toHref(openFile(selection, node.path))}
+      data-vault-entry={segments(node.path).join("/")}
+      aria-current={selection.openPath === node.path ? "page" : undefined}
     >
-      <SelectionFields selection={openFile(selection, node.path)} />
-      <button type="submit" aria-current={selection.openPath === node.path ? "page" : undefined}>
-        <FileIcon />
-        <span>{node.name}</span>
-      </button>
-    </form>
+      <FileIcon />
+      <span>{label}</span>
+    </a>
   );
 }
 

package/src/cli/commands/studio/views/model.ts

@@ -41,6 +41,8 @@ export interface StudioVaultPage {
   overwritten: VaultFile | null;
   watching: boolean;
   warning: string | null;
+  /** The listing generation `tree` was taken at; absent while the tree is deferred. */
+  generation?: number | null;
 }
 
 /**

package/src/cli/commands/studio/views/reports/index.tsx

@@ -0,0 +1,49 @@
+/** @jsxImportSource hono/jsx */
+
+/**
+ * The list, frame and empty note are filled by the page client from
+ * `GET /api/reports`; titles are written as text, never markup.
+ */
+export function Reports() {
+  return (
+    <section className="panel reports-panel" data-reports-view>
+      <div className="section-header">
+        <div>
+          <h3>Hosted reports</h3>
+          <p className="section-note">Reports published by agent sessions Studio started.</p>
+        </div>
+      </div>
+      <div className="reports-layout">
+        <div className="reports-side">
+          <ul id="reports-list" className="reports-list" aria-label="Reports" />
+          <template id="reports-item-template">
+            <li>
+              <button type="button" data-report-id="">
+                <span data-report-title />
+                <span className="report-time" data-report-time />
+              </button>
+            </li>
+          </template>
+          <p id="reports-empty" className="empty">
+            No hosted reports yet.
+          </p>
+        </div>
+        <div className="reports-main">
+          <div className="reports-bar">
+            <a id="reports-open" target="_blank" rel="noopener noreferrer" hidden>
+              Open in new tab
+            </a>
+          </div>
+          <iframe
+            id="reports-frame"
+            className="reports-frame"
+            title="Hosted report"
+            sandbox="allow-scripts allow-modals"
+            referrerPolicy="no-referrer"
+            hidden
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/cli/commands/studio/views/specs/index.tsx

@@ -1,8 +1,10 @@
 /** @jsxImportSource hono/jsx */
 
+import { SUBJECT_PATTERN, type SpecActionOffer } from "../../actions";
 import type { StudioCompanionPayload, StudioSpec } from "../../payload";
 import { Warnings } from "../warnings";
 
+const NO_ACTIONS: SpecActionOffer[] = [];
 const UNASSIGNED_AREA = "unassigned";
 
 /** A spec binds one Area or several, so it appears under each of them. */
@@ -27,19 +29,70 @@ function specStatus(spec: StudioSpec): { label: string; invalid: boolean } {
 
 interface SpecsProps {
   payload: StudioCompanionPayload;
+  /** Skill actions offered on each spec row; none by default. */
+  actions?: SpecActionOffer[];
 }
 
 /** Its own view: an Area map is read on its own, not alongside the changes. */
-export function Specs({ payload }: SpecsProps) {
+export function Specs({ payload, actions = NO_ACTIONS }: SpecsProps) {
   return (
     <>
-      <SpecsByArea specs={payload.specs} />
+      <SpecsByArea specs={payload.specs} actions={actions} />
       <Warnings warnings={payload.warnings} />
     </>
   );
 }
 
-function SpecsByArea({ specs }: { specs: StudioSpec[] }) {
+function SpecActions({ capability, actions }: { capability: string; actions: SpecActionOffer[] }) {
+  if (!SUBJECT_PATTERN.test(capability)) return null;
+  return (
+    <span className="spec-actions">
+      {actions.map(({ action, runAgents, copyAgents }) => (
+        <>
+          {runAgents.length > 0 ? (
+            <button
+              type="button"
+              className="button spec-action"
+              data-studio-action={action.id}
+              data-studio-subject={capability}
+              data-studio-agents={runAgents.join(" ")}
+            >
+              {action.label}
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className="runway-step-copy spec-copy"
+            aria-label="Copy prompt"
+            title="Copy prompt"
+            data-studio-copy-prompt={action.id}
+            data-prompt-claude={
+              copyAgents.includes("claude") ? action.prompts.claude(capability) : undefined
+            }
+            data-prompt-opencode={
+              copyAgents.includes("opencode") ? action.prompts.opencode(capability) : undefined
+            }
+          >
+            <svg
+              viewBox="0 0 16 16"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              aria-hidden="true"
+            >
+              <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" />
+              <path d="M10.5 3.5v-.5a1.5 1.5 0 0 0-1.5-1.5H3.5A1.5 1.5 0 0 0 2 3v5.5A1.5 1.5 0 0 0 3.5 10H4" />
+            </svg>
+          </button>
+        </>
+      ))}
+    </span>
+  );
+}
+
+function SpecsByArea({ specs, actions }: { specs: StudioSpec[]; actions: SpecActionOffer[] }) {
   const groups = groupSpecsByArea(specs);
 
   return (
@@ -81,12 +134,15 @@ function SpecsByArea({ specs }: { specs: StudioSpec[] }) {
                           </span>
                         </div>
                       </div>
-                      <span
-                        className={
-                          status.invalid ? "spec-status spec-status-invalid" : "spec-status"
-                        }
-                      >
-                        {status.label}
+                      <span className="spec-card-end">
+                        <SpecActions capability={spec.capability} actions={actions} />
+                        <span
+                          className={
+                            status.invalid ? "spec-status spec-status-invalid" : "spec-status"
+                          }
+                        >
+                          {status.label}
+                        </span>
                       </span>
                     </div>
                   );

package/src/cli/commands/studio/views/styles.ts

@@ -201,6 +201,17 @@ ul.plain li:last-child { border-bottom: 0; }
   opacity: 0; transition: opacity .16s; pointer-events: none; z-index: 20;
 }
 .toast[data-shown="true"] { opacity: 1; }
+.toast-report { display: flex; gap: 10px; align-items: center; bottom: 64px; }
+.toast-report[data-shown="true"] { pointer-events: auto; }
+.toast-report a { color: inherit; font-weight: 700; text-decoration: underline; }
+.nav-badge { padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #0e1116; font-size: .6rem; font-weight: 750; text-transform: uppercase; }
+.reports-layout { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 12px; min-height: 60vh; }
+.reports-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.reports-list button { width: 100%; padding: 8px 10px; text-align: left; font-size: .78rem; }
+.reports-list button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.reports-list .report-time { display: block; color: var(--muted); font-size: .66rem; }
+.reports-main { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
+.reports-frame { width: 100%; height: 100%; min-height: 60vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
 
 .warnings { border-color: var(--warn); }
 .error { border-color: var(--bad); }
@@ -276,6 +287,11 @@ ul.plain li:last-child { border-bottom: 0; }
 .spec-card-row:first-child { padding-top: 0; }
 .spec-card-row strong { overflow: hidden; font-family: var(--mono); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
 .spec-card-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .7rem; }
+.spec-card-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
+.spec-copy { display: inline-flex; align-items: center; align-self: center; padding: 4px 6px; }
+.spec-actions { display: inline-flex; gap: 6px; }
+.spec-action { padding: 3px 7px; font-size: .68rem; }
+html[data-agent-viewed] [data-studio-action] { display: none; }
 .spec-status { padding: 2px 5px; border: 1px solid var(--done); background: var(--done-soft); color: var(--done); font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }
 .spec-status-invalid { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
 
@@ -375,12 +391,13 @@ ul.plain li:last-child { border-bottom: 0; }
 .vault-directory > summary::-webkit-details-marker { display: none; }
 .vault-directory > summary:hover, .vault-directory > summary[aria-current="page"] { background: var(--accent-soft); }
 .vault-children { display: grid; gap: 1px; margin-left: 11px; padding-left: 8px; border-left: 1px solid var(--border-soft); }
-.vault-file { display: contents; }
-.vault-file[hidden], .vault-directory[hidden] { display: none; }
-.vault-file button { display: flex; align-items: center; gap: 6px; width: 100%; overflow: hidden; padding: 4px 6px 4px 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: .8rem; text-align: left; white-space: nowrap; }
-.vault-file button span, .vault-directory > summary span { overflow: hidden; text-overflow: ellipsis; }
-.vault-file button:hover { background: var(--accent-soft); }
-.vault-file button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.vault-directory[hidden] { display: none; }
+#vault-tree-panel[data-vault-filtering] [data-vault-slot="tree"] { display: none; }
+.vault-tree-head form { margin: 0; }
+.vault-file { display: flex; text-decoration: none; align-items: center; gap: 6px; width: 100%; overflow: hidden; padding: 4px 6px 4px 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: .8rem; text-align: left; white-space: nowrap; }
+.vault-file span, .vault-directory > summary span { overflow: hidden; text-overflow: ellipsis; }
+.vault-file:hover { background: var(--accent-soft); }
+.vault-file[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
 .vault-bar { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 12px; }
 .vault-tree-toggle { flex: none; padding: 5px 10px; font-size: .78rem; }
 .vault-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
@@ -460,6 +477,9 @@ ul.plain li:last-child { border-bottom: 0; }
 .terminal-target { margin: 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
 .terminal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .terminal-actions .button { padding: 6px 9px; font-size: .78rem; }
+.terminal-choice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .78rem; }
+.terminal-choice[hidden] { display: none; }
+.terminal-choice .button { padding: 6px 9px; font-size: .78rem; }
 .terminal-status { margin: 0; color: var(--muted); font-size: 12px; }
 .terminal-view { flex: 1; min-height: 160px; background: #000; border-radius: 8px; padding: 6px; overflow: hidden; }
 .terminal-sessions-footer { flex: none; display: grid; gap: 6px; max-height: 28vh; overflow-y: auto; }

package/src/cli/commands/studio/views/terminal.tsx

@@ -103,6 +103,13 @@ export function TerminalSidebar({ terminal }: { terminal: StudioTerminalPage })
               Reconnect
             </button>
           </div>
+          <div
+            className="terminal-choice"
+            id="terminal-action-choice"
+            role="group"
+            aria-label="Choose an agent"
+            hidden
+          />
           <p className="terminal-status" id="terminal-status" role="status">
             Connecting…
           </p>
@@ -288,6 +295,16 @@ export const STUDIO_TERMINAL_SCRIPT = `(function () {
   function status(text) { if (statusNode) statusNode.textContent = text; }
   function state(name) { panel.setAttribute("data-terminal-state", name); }
   function currentSession() { return load(${JSON.stringify(TERMINAL_SESSION_KEY)}); }
+  var root = document.documentElement;
+  var choice = document.getElementById("terminal-action-choice");
+  var AGENT_LABELS = ${JSON.stringify(AGENT_LABELS)};
+  /** Which agent this connection views, or "pending" until a stored session reattaches; the page hides run buttons while set. */
+  function viewing(agent) {
+    if (agent) root.setAttribute("data-agent-viewed", agent);
+    else root.removeAttribute("data-agent-viewed");
+    if (agent && choice) choice.hidden = true;
+  }
+  if (currentSession()) viewing("pending");
   function size() { return { cols: term.cols, rows: term.rows }; }
   function send(message) {
     if (ws && ws.readyState === 1) { ws.send(JSON.stringify(message)); return true; }
@@ -317,28 +334,34 @@ export const STUDIO_TERMINAL_SCRIPT = `(function () {
       try { message = JSON.parse(event.data); } catch (error) { return; }
       if (message.type === "ready") {
         store(${JSON.stringify(TERMINAL_SESSION_KEY)}, message.sessionId);
+        viewing(message.agent);
         term.reset();
         state("connected");
         status("Connected to " + message.agent + " in " + message.companionPath + ".");
         term.focus();
       } else if (message.type === "exit") {
         store(${JSON.stringify(TERMINAL_SESSION_KEY)}, null);
+        viewing(null);
         state("detached");
         status("The agent exited with status " + message.status + ".");
       } else if (message.type === "ended") {
         store(${JSON.stringify(TERMINAL_SESSION_KEY)}, null);
+        viewing(null);
         state("detached");
         status("The session ended" + (message.reason ? ": " + message.reason : "") + ".");
       } else if (message.type === "detached") {
+        viewing(null);
         state("detached");
         status("Detached (" + message.reason + "); the agent keeps running.");
       } else if (message.type === "takenOver") {
+        viewing(null);
         takenOver = true;
         state("detached");
         status("Another tab took over this session.");
         if (reconnectButton) reconnectButton.hidden = false;
       } else if (message.type === "gone") {
         store(${JSON.stringify(TERMINAL_SESSION_KEY)}, null);
+        viewing(null);
         state("detached");
         status("That session no longer exists.");
       } else if (message.type === "error") {
@@ -371,12 +394,47 @@ export const STUDIO_TERMINAL_SCRIPT = `(function () {
     send({ type: "resize", cols: next.cols, rows: next.rows });
   });
 
+  /** \`task\` carries a registered action and subject; the server builds the prompt from them. */
+  function startAgent(agent, task) {
+    var dims = size();
+    var message = { type: "start", agent: agent, companion: companion, tabId: tabId, cols: dims.cols, rows: dims.rows };
+    if (task) { message.action = task.action; message.subject = task.subject; }
+    if (!send(message)) { pending = message; connect(); }
+  }
   Array.prototype.forEach.call(document.querySelectorAll("[data-terminal-start]"), function (button) {
-    button.addEventListener("click", function () {
-      var dims = size();
-      var message = { type: "start", agent: button.getAttribute("data-terminal-start"), companion: companion, tabId: tabId, cols: dims.cols, rows: dims.rows };
-      if (!send(message)) { pending = message; connect(); }
+    button.addEventListener("click", function () { startAgent(button.getAttribute("data-terminal-start")); });
+  });
+
+  /** The sidebar script owns collapse and drawer state, so reveal the terminal through its controls. */
+  function revealTerminal() {
+    var expand = document.getElementById("terminal-expand");
+    if (root.hasAttribute("data-terminal-collapsed") && expand) expand.click();
+    var opener = document.getElementById("terminal-drawer-open");
+    if (opener && !panel.hasAttribute("data-drawer-open") && getComputedStyle(opener).display !== "none") opener.click();
+  }
+  function showChoice(agents, task) {
+    if (!choice) return;
+    while (choice.firstChild) choice.removeChild(choice.firstChild);
+    var label = document.createElement("span");
+    label.textContent = "Run " + task.action + " with:";
+    choice.appendChild(label);
+    agents.forEach(function (agent) {
+      choice.appendChild(button(AGENT_LABELS[agent], function () {
+        choice.hidden = true;
+        startAgent(agent, task);
+      }));
     });
+    choice.appendChild(button("Cancel", function () { choice.hidden = true; }));
+    choice.hidden = false;
+  }
+  document.addEventListener("studio:terminal-action", function (event) {
+    var task = event.detail || {};
+    var agents = (task.agents || []).filter(function (agent) { return AGENT_LABELS[agent]; });
+    if (!agents.length) return;
+    revealTerminal();
+    if (root.hasAttribute("data-agent-viewed")) { status("End the current session first."); return; }
+    if (agents.length === 1) startAgent(agents[0], task);
+    else showChoice(agents, task);
   });
   if (reconnectButton) reconnectButton.addEventListener("click", function () { attempts = 0; connect(); });
 

package/src/cli/commands/studio/views/vault/state.ts

@@ -38,5 +38,6 @@ export async function vaultState(
     watching: tree?.watching ?? false,
     warning: tree?.warning ?? null,
     failure,
+    generation: tree?.generation ?? null,
   };
 }