npm - crewforth - Versions diffs - 3.0.3 → 3.1.0-rc.1 - Mend

crewforth 3.0.3 → 3.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/CHANGELOG.md +211 -0
package/README.md +3 -3
package/VERSION +1 -1
package/adopt.sh +86 -34
package/kit/CLAUDE.md +1 -1
package/kit/README.md +1 -1
package/kit/agents/crew-commit-agent.md +7 -3
package/kit/agents/crew-frontend-expert.md +4 -4
package/kit/agents/crew-performance-expert.md +1 -1
package/kit/agents/crew-review-agent.md +1 -1
package/kit/eval/doctor.sh +57 -3
package/kit/eval/golden-routing.txt +13 -0
package/kit/eval/lib/git-bash.sh +11 -2
package/kit/eval/parser-conformance.sh +1 -0
package/kit/eval/routing-eval.sh +7 -3
package/kit/eval/smoke-test.sh +2545 -214
package/kit/hooks/commit-msg +1 -1
package/kit/hooks/context-usage.sh +7 -1
package/kit/hooks/guard-bash.sh +1608 -103
package/kit/hooks/guard-commit-scan.sh +138 -19
package/kit/hooks/guard-powershell.sh +89 -15
package/kit/hooks/guard-write.sh +98 -22
package/kit/hooks/no-bash-guard.ps1 +71 -0
package/kit/hooks/pre-commit +5 -2
package/kit/hooks/prompt-approval.sh +484 -0
package/kit/hooks/route-hint.sh +13 -5
package/kit/hooks/session-rehydrate.sh +18 -0
package/kit/hooks/skill-trust.sh +17 -2
package/kit/owned-blobs.tsv +43 -0
package/kit/settings.json +20 -4
package/kit/skills/a11y/SKILL.md +1 -0
package/kit/skills/crew-doctor/SKILL.md +2 -2
package/kit/skills/frontend/SKILL.md +3 -3
package/kit/skills/frontend-flutter/SKILL.md +94 -0
package/kit/skills/frontend-flutter/references/adaptive-and-accessible.md +55 -0
package/kit/skills/frontend-flutter/references/platform-async-release.md +59 -0
package/kit/skills/frontend-flutter/references/rebuilds-and-performance.md +36 -0
package/kit/studio/server/hooks/studio-gate.sh +35 -1
package/kit/studio/server/index.js +14 -4
package/kit/studio/server/lib/graph.js +64 -3
package/kit/studio/server/lib/kit.js +16 -2
package/kit/studio/server/lib/permissions.js +77 -2
package/kit/studio/server/lib/projects.js +60 -7
package/kit/studio/server/lib/session.js +16 -2
package/kit/studio/web/app.js +1765 -573
package/kit/studio/web/approvals.js +124 -0
package/kit/studio/web/canvas.js +932 -885
package/kit/studio/web/chat.js +322 -145
package/kit/studio/web/convo.js +174 -0
package/kit/studio/web/dock.js +221 -0
package/kit/studio/web/graph-plan.js +457 -0
package/kit/studio/web/icons/builtin.svg +1 -0
package/kit/studio/web/index.html +116 -50
package/kit/studio/web/inspect.js +110 -0
package/kit/studio/web/list-plan.js +112 -0
package/kit/studio/web/list.js +157 -0
package/kit/studio/web/liveness.js +66 -0
package/kit/studio/web/nav.js +237 -0
package/kit/studio/web/newsession.js +235 -0
package/kit/studio/web/press.js +65 -0
package/kit/studio/web/style.css +1281 -1014
package/kit/studio/web/theme.js +43 -0
package/kit/studio/web/timeline-plan.js +291 -0
package/kit/studio/web/timeline.js +400 -0
package/kit/studio/web/tokens.css +131 -0
package/kit/studio/web/toolbar-fit.js +35 -0
package/package.json +5 -4

package/kit/studio/web/index.html CHANGED Viewed

@@ -4,82 +4,148 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Crewforth Studio</title>
+<link rel="stylesheet" href="/tokens.css">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <header class="bar">
-  <div class="brand">
+  <button id="menu-btn" class="btn icon ghost" type="button" aria-label="Open the navigator" aria-expanded="false">
+    <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4h11M2.5 8h11M2.5 12h11"/></svg>
+  </button>
+  <a id="home" class="brand" href="/" title="Back to the latest session">
     <svg class="brand-mark" viewBox="0 0 200 200" aria-hidden="true">
       <polyline points="44,58 86,100 44,142" stroke-width="21" class="bar-1"/>
       <polyline points="80,58 122,100 80,142" stroke-width="21" class="bar-2"/>
       <polyline points="116,58 158,100 116,142" stroke-width="24" class="bar-3"/>
     </svg>
     <h1>Crewforth <span class="brand-accent">Studio</span></h1>
-  </div>
-  <div class="bar-mid">
-    <span id="graph-summary" class="meta"></span>
-    <span id="kitline" class="kitline"></span>
-  </div>
-  <div class="bar-right">
-    <button id="continue-session" class="ghost primary" type="button" hidden
-            title="Start a new session holding a copy of this conversation. It does not write into the original.">⑂ fork &amp; continue</button>
-    <button id="new-session" class="ghost primary" type="button">+ session</button>
-    <span id="pulse" class="pulse">connecting</span>
-      <button id="fullscreen" class="ghost" type="button" title="Full screen (f)" aria-label="Full screen">⛶</button>
-    <button id="theme" class="ghost" type="button" aria-label="Toggle theme">◐</button>
-  </div>
+  </a>
+  <span class="bar-sep" aria-hidden="true"></span>
+  <nav id="crumb" class="crumb" aria-label="Breadcrumb"></nav>
+  <span class="bar-fill"></span>
+  <div id="graph-summary" class="chips" role="group" aria-label="Session summary"></div>
+  <span class="bar-sep" aria-hidden="true"></span>
+  <span id="pulse" class="live" role="status" data-state="connecting"><span class="dot"></span><strong>Connecting</strong><span class="live-detail"></span></span>
+  <button id="theme" class="btn icon ghost" type="button" aria-label="Switch theme">
+    <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M13 9.5A5.5 5.5 0 0 1 6.5 3a5.5 5.5 0 1 0 6.5 6.5z"/></svg>
+  </button>
+  <button id="fullscreen" class="btn icon ghost" type="button" title="Full screen (f)" aria-label="Full screen">
+    <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 6V3h3M10 3h3v3M13 10v3h-3M6 13H3v-3"/></svg>
+  </button>
+  <button id="new-session" class="btn primary" type="button">
+    <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg><span>New session</span>
+  </button>
 </header>
-<div class="shell">
-  <button id="side-show" class="side-rail" type="button"
-          title="Show the sidebar" aria-label="Show the sidebar" hidden>
-    <span class="side-rail-arrow">›</span>
-    <span class="side-rail-label">sessions</span>
-  </button>
-  <aside class="side">
-    <section class="side-block" data-sect="fleet">
-      <div class="side-head">
-        <button class="twisty" type="button" data-fold="fleet" aria-expanded="true"
-                aria-label="Collapse Fleet">▾</button>
-        <h2 data-fold-for="fleet">Fleet</h2><span id="fleet-meta" class="meta"></span>
-        <button id="side-wide" class="ghost pin" type="button" title="Widen the sidebar">⇥</button>
-        <button id="side-hide" class="ghost pin" type="button" title="Collapse the sidebar">‹</button>
-      </div>
-      <div id="fleet" class="fleet" role="list" data-fold-body="fleet"></div>
-      <div class="side-head reach-head" hidden id="reach-head">
-        <button class="twisty" type="button" data-fold="reach" aria-expanded="true"
-                aria-label="Collapse Reachable elsewhere">▾</button>
-        <h2 data-fold-for="reach">Reachable elsewhere</h2><span id="reach-meta" class="meta"></span>
-      </div>
-      <div id="reach" class="fleet" role="list" data-fold-body="reach"></div>
-    </section>
-    <section class="side-block grow" data-sect="sessions">
-      <div class="side-head">
-        <button class="twisty" type="button" data-fold="sessions" aria-expanded="true"
-                aria-label="Collapse Projects">▾</button>
-        <h2 data-fold-for="sessions">Projects</h2><span id="sessions-meta" class="meta"></span>
-      </div>
-      <div class="side-filter" data-fold-body="sessions">
-        <input id="filter" type="search" placeholder="filter projects…" autocomplete="off" spellcheck="false">
-      </div>
-      <div id="sessions" class="sessions" role="tree" data-fold-body="sessions"></div>
-    </section>
+<div class="shell no-chat">
+  <nav id="side-rail" class="side-rail" aria-label="Navigator, collapsed" hidden>
+    <button class="rail-btn" type="button" data-rail-tab="projects" aria-label="Projects">
+      <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4.5A1.5 1.5 0 0 1 3.5 3h3l1.5 1.5h4.5A1.5 1.5 0 0 1 14 6v5.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 11.5z"/></svg>
+    </button>
+    <button class="rail-btn" type="button" data-rail-tab="live" aria-label="Live sessions">
+      <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8h3l2-4 3 8 2-4h3"/></svg>
+    </button>
+    <button class="rail-btn" type="button" data-rail-tab="machines" aria-label="Machines">
+      <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="3" width="12" height="8" rx="1.5"/><path d="M6 14h4M8 11v3"/></svg>
+    </button>
+    <span class="rail-fill"></span>
+    <button id="side-show" class="rail-btn" type="button" title="Expand the navigator (])" aria-label="Expand the navigator">
+      <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
+    </button>
+  </nav>
+  <aside class="side" aria-label="Projects and sessions">
+    <div class="nav-top">
+      <label class="nav-search">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/></svg>
+        <input id="filter" type="search" placeholder="Search projects and sessions"
+               aria-label="Search projects and sessions" autocomplete="off" spellcheck="false">
+      </label>
+      <button id="side-hide" class="btn icon ghost sm" type="button" title="Collapse the navigator ([)" aria-label="Collapse the navigator">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M10 4l-4 4 4 4"/></svg>
+      </button>
+    </div>
+    <div class="seg" role="tablist" aria-label="Navigator">
+      <button class="seg-btn" type="button" role="tab" id="tab-projects" data-tab="projects" aria-controls="sessions" aria-selected="true">Projects</button>
+      <button class="seg-btn" type="button" role="tab" id="tab-live" data-tab="live" aria-controls="fleet" aria-selected="false">Live <span id="live-count" class="badge" hidden></span></button>
+      <button class="seg-btn" type="button" role="tab" id="tab-machines" data-tab="machines" aria-controls="reach" aria-selected="false">Machines</button>
+    </div>
+    <div id="sessions" class="nav-list" role="tabpanel" aria-labelledby="tab-projects" aria-busy="true"><div class="skel" aria-hidden="true"><span></span><span></span><span></span><span></span></div></div>
+    <div id="fleet" class="nav-list" role="tabpanel" aria-labelledby="tab-live" hidden></div>
+    <div id="reach" class="nav-list" role="tabpanel" aria-labelledby="tab-machines" hidden></div>
+    <div id="other-machines" class="nav-foot" hidden></div>
   </aside>
   <div class="resizer" id="resizer" role="separator" aria-orientation="vertical"
        aria-label="Resize sidebar" tabindex="0"></div>
   <main class="stage">
+    <div id="phone-head" class="phone-head"></div>
+    <div class="toolbar" role="toolbar" aria-label="Canvas">
+      <div class="seg tb-views" role="tablist" aria-label="View">
+        <button id="view-graph" class="seg-btn" type="button" role="tab" aria-label="Graph view" aria-selected="true" aria-controls="canvas">
+          <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><circle cx="3.5" cy="8" r="1.8"/><circle cx="12.5" cy="4" r="1.8"/><circle cx="12.5" cy="12" r="1.8"/><path d="M5.2 7.3L10.8 4.7M5.2 8.7l5.6 2.6"/></svg><span class="tb-words">Graph</span>
+        </button>
+        <button id="view-timeline" class="seg-btn" type="button" role="tab" aria-label="Timeline view" aria-selected="false" aria-controls="timeline">
+          <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h7M5 8h9M3 12h6"/></svg><span class="tb-words">Timeline</span>
+        </button>
+        <button id="view-list" class="seg-btn" type="button" role="tab" aria-label="List view" aria-selected="false" aria-controls="list">
+          <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M5 4h9M5 8h9M5 12h9M2 4h.01M2 8h.01M2 12h.01"/></svg><span class="tb-words">List</span>
+        </button>
+      </div>
+      <button id="tb-group" data-view="graph timeline" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Group <span>Workflow run</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <button id="tb-density" data-view="graph" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Density <span>Auto</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <button id="tb-show" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Show <span>All</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <button id="tb-options" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu" aria-label="View options"><span class="tb-name">View<span class="tb-more"> options</span></span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <span id="foot-note" class="toolbar-note" role="status"></span>
+      <span class="toolbar-fill"></span>
+      <span class="tb-follow" data-view="timeline" hidden>
+        <span class="sub" aria-hidden="true">Follow now</span>
+        <button id="tb-follow" class="switch" type="button" role="switch" aria-checked="true" aria-label="Follow now"><span></span></button>
+      </span>
+      <button id="tb-range-out" class="btn icon sm ghost" type="button" data-view="timeline" aria-label="Show more time" hidden>
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10"/></svg>
+      </button>
+      <span id="tb-range" class="tb-zoom tb-range" data-view="timeline" hidden>15m</span>
+      <button id="tb-range-in" class="btn icon sm ghost" type="button" data-view="timeline" aria-label="Show less time" hidden>
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>
+      </button>
+      <button id="tb-expand" data-view="graph" class="btn sm" type="button" aria-label="Expand all groups">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 6l5 5 5-5"/></svg><span class="tb-words">Expand all</span>
+      </button>
+      <button id="tb-fold" data-view="graph" class="btn sm" type="button" aria-label="Fold all groups">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg><span class="tb-words">Fold all</span>
+      </button>
+      <button id="tb-zoom-out" data-view="graph" class="btn icon sm ghost" type="button" aria-label="Zoom out">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10"/></svg>
+      </button>
+      <button id="tb-zoom" data-view="graph" class="tb-zoom" type="button" title="Back to 100%" aria-label="Zoom 100%. Back to 100%">100%</button>
+      <button id="tb-zoom-in" data-view="graph" class="btn icon sm ghost" type="button" aria-label="Zoom in">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>
+      </button>
+      <button id="tb-fit" data-view="graph" class="btn sm" type="button" aria-label="Fit the graph to the view">
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 5.5v-3h3M10.5 2.5h3v3M13.5 10.5v3h-3M5.5 13.5h-3v-3"/></svg><span class="tb-words">Fit</span>
+      </button>
+    </div>
+    <div id="stage-note" class="stage-note" role="status" hidden></div>
+    <div id="attention" class="attention" role="region" aria-label="Needs attention" hidden></div>
     <div id="canvas" class="canvas"></div>
-    <aside id="inspector" class="inspector" hidden></aside>
+    <div id="timeline" role="tabpanel" aria-labelledby="view-timeline" hidden></div>
+    <div id="list" role="tabpanel" aria-labelledby="view-list" hidden></div>
+    <div id="first-run" class="first-run" hidden></div>
+    <div id="dock" role="region" aria-label="Waiting for approval" hidden></div>
   </main>
+  <aside id="inspector" class="inspector" aria-label="Selected node" hidden></aside>
   <div class="resizer" id="chat-split" role="separator" aria-orientation="vertical"
        aria-label="Resize conversation" tabindex="0" hidden></div>
   <section id="chat" class="chat" hidden></section>
+  <section id="new-panel" class="newpanel" aria-label="New session" hidden></section>
 </div>
-<footer class="foot"><span id="foot-note">starting…</span></footer>
+<div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
+<div id="menu" class="menu" role="menu" hidden></div>
 <script type="module" src="/app.js"></script>
 </body>

package/kit/studio/web/inspect.js ADDED Viewed

@@ -0,0 +1,110 @@
+// What the inspector says about the node that is selected.
+//
+// Functions of the server's data, with no page in them: the four tiles, what the agent is doing right now, which
+// skills it applied, who delegated to it. The rule they share is the panel's own: a value that was not read is
+// written "Not measured", with why — never as 0 and never as an empty list.
+const NOT_MEASURED = 'Not measured';
+export function fmtTokens(t) {
+  if (t == null) return null;
+  if (t < 1000) return `${t}`;
+  if (t < 1_000_000) return `${(t / 1000).toFixed(t < 10_000 ? 1 : 0)}k`;
+  return `${(t / 1_000_000).toFixed(2)}M`;
+}
+export function fmtDuration(ms) {
+  if (ms == null || !Number.isFinite(ms)) return null;
+  const s = Math.max(0, Math.round(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  return m < 60 ? `${m}m ${s % 60}s` : `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+/** How long the agent has been at it: the recorded duration when it has ended, the clock since it started while
+ *  it is still running, and null when neither was recorded. */
+export function elapsed(n, nowMs) {
+  if (n.durationMs != null) return n.durationMs;
+  if (n.startedAt != null && (n.status === 'running' || n.status === 'starting')) return Math.max(0, nowMs - n.startedAt);
+  if (n.startedAt != null && n.endedAt != null) return n.endedAt - n.startedAt;
+  return null;
+}
+/**
+ * The four tiles. A count the transcript gave is a count, zero included; a figure it did not give says so.
+ */
+export function tiles(n, nowMs) {
+  const el = elapsed(n, nowMs);
+  return [
+    { label: 'Tool calls', value: String(n.toolCount ?? 0), measured: n.toolCount != null },
+    {
+      label: 'Tokens',
+      value: n.tokens == null ? NOT_MEASURED : fmtTokens(n.tokens),
+      measured: n.tokens != null,
+      why: n.tokens == null ? 'the transcript carries no usage record for this agent yet' : null,
+    },
+    {
+      label: 'Elapsed',
+      value: el == null ? NOT_MEASURED : fmtDuration(el),
+      measured: el != null,
+      why: el == null ? 'no start time was recorded' : null,
+    },
+    { label: 'Errors', value: String(n.errors ?? 0), measured: n.errors != null, bad: (n.errors ?? 0) > 0 },
+  ].map((t) => (t.measured ? t : { ...t, value: NOT_MEASURED, why: t.why ?? 'not in the transcript' }));
+}
+/** "8m 20s · started 14:02" */
+export function timeLine(n, nowMs) {
+  const parts = [];
+  const el = elapsed(n, nowMs);
+  if (el != null) parts.push(fmtDuration(el));
+  if (n.startedAt != null) {
+    const d = new Date(n.startedAt);
+    parts.push(`started ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`);
+  }
+  return parts.join(' · ');
+}
+/**
+ * The tool the agent is running, with what it is running it on. "Right now" while the agent works; "Last tool"
+ * once it has stopped. The command comes from the agent's transcript, which may not be read yet.
+ */
+export function rightNow(n, detail) {
+  const live = n.status === 'running' || n.status === 'starting';
+  const last = detail?.timeline?.length ? detail.timeline[detail.timeline.length - 1] : null;
+  const tool = last?.name ?? n.lastTool ?? null;
+  if (!tool) return { heading: live ? 'Right now' : 'Last tool', tool: null, text: live ? 'No tool call yet' : 'No tool was called' };
+  return { heading: live ? 'Right now' : 'Last tool', tool, text: last?.label ?? '' };
+}
+/** The skills the agent invoked, in the order it first did, each once. */
+export function skillsOf(detail) {
+  const seen = [];
+  for (const step of detail?.timeline ?? []) {
+    if (step.name !== 'Skill' || !step.label) continue;
+    if (!seen.includes(step.label)) seen.push(step.label);
+  }
+  return seen;
+}
+/** Who handed this agent its work: the node it hangs from. */
+export function delegatedBy(n, nodes) {
+  const p = (nodes ?? []).find((x) => x.id === n.parentId) ?? null;
+  if (!p) return null;
+  if (p.kind === 'session') return { id: p.id, text: `Session${p.gitBranch ? ` · ${p.gitBranch}` : ''}` };
+  if (p.kind === 'workflow') return { id: p.id, text: `Workflow run · ${p.workflowId ?? p.id}` };
+  return { id: p.id, text: p.agentType ?? p.id };
+}
+/** The report, or the plain statement that there is none yet and why. */
+export function reportOf(n, detail) {
+  if (detail?.report) return { text: detail.report, present: true };
+  const live = n.status === 'running' || n.status === 'starting';
+  return {
+    present: false,
+    text: live ? 'Not reported yet — the agent is still running.' : 'Not reported — the transcript holds no closing text.',
+  };
+}
+export const TABS = ['overview', 'conversation', 'gates', 'stats'];
+export const TAB_WORD = { overview: 'Overview', conversation: 'Conversation', gates: 'Gates', stats: 'Stats' };

package/kit/studio/web/list-plan.js ADDED Viewed

@@ -0,0 +1,112 @@
+// What the List view shows: the session's agents by what they need from the reader, in a fixed order.
+//
+// Needs you, then Failed, then Running, then Done. The order never changes with the data, so the thing that
+// needs someone is always at the top. A status this panel has no word for is not put into one of the four: it
+// gets a section of its own, under its own name, after them.
+import { stateOf } from './graph-plan.js';
+const typeOf = (n) => n.agentType ?? 'unknown agent';
+/** "8m", "1h 4m", "40s": how long, in as little room as a row has. */
+export function short(ms) {
+  if (ms == null || !Number.isFinite(ms) || ms < 0) return null;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+const when = (n) => n.endedAt ?? n.updatedAt ?? n.startedAt ?? 0;
+/** One agent as a row: who, what it is on, and the one number worth the room. */
+function rowOf(n, now) {
+  const state = stateOf(n.status);
+  if (state === 'failed') {
+    const bits = [];
+    if (n.workflow) bits.push(`in ${n.workflow}`);
+    // The count the transcript gave. An agent can fail without a tool error; then there is none to report.
+    if (n.errors) bits.push(`${n.errors} ${n.errors === 1 ? 'error' : 'errors'}`);
+    if (n.status !== 'failed') bits.push(n.status);
+    return { id: n.id, node: n, type: typeOf(n), line: bits.join(' · ') || (n.description ?? ''), aside: null };
+  }
+  const live = state === 'live' || state === 'waking';
+  return {
+    id: n.id,
+    node: n,
+    type: typeOf(n),
+    line: n.description ?? '',
+    // How long it has been going. With no start recorded there is nothing to count from, and nothing is shown.
+    aside: state === 'waking' ? 'starting' : live && n.startedAt != null ? short(now - n.startedAt) : null,
+  };
+}
+/**
+ * The sections of the List, top to bottom. A section with nothing in it is left out.
+ *
+ * @param nodes    the graph's nodes
+ * @param queue    the approval queue (every session started here), as approvals.js orders it
+ * @param current  the session being looked at
+ * @param folded   Map sectionKey -> boolean, the viewer's own choices; a section not in it takes its default
+ */
+export function sections(nodes, { queue = [], current = null, folded = new Map(), now = 0 } = {}) {
+  const agents = (nodes ?? []).filter((n) => n.kind === 'agent');
+  const out = [];
+  // Needs you: every request waiting, this session's first. Each is a card that carries its own answers.
+  const cards = [...queue].sort((a, b) => Number(b.sessionId === current) - Number(a.sessionId === current) || (a.askedAt ?? 0) - (b.askedAt ?? 0));
+  if (cards.length) out.push({ key: 'needs', title: 'Needs you', count: cards.length, tone: 'waiting', cards, rows: [], folded: false, foldable: false });
+  const by = (pred, sort) => agents.filter(pred).sort(sort).map((n) => rowOf(n, now));
+  const newest = (a, b) => when(b) - when(a);
+  const oldest = (a, b) => (a.startedAt ?? Infinity) - (b.startedAt ?? Infinity) || String(a.id).localeCompare(String(b.id));
+  const fixed = [
+    { key: 'failed', title: 'Failed', tone: 'fail', rows: by((n) => stateOf(n.status) === 'failed', newest), foldedByDefault: false },
+    { key: 'running', title: 'Running', tone: 'busy', rows: by((n) => ['live', 'waking'].includes(stateOf(n.status)), oldest), foldedByDefault: false },
+    { key: 'done', title: 'Done', tone: 'good', rows: by((n) => stateOf(n.status) === 'done', newest), foldedByDefault: true },
+  ];
+  // Everything else, by the status the transcript wrote. `ended` and `stale` have words here; anything the panel
+  // does not recognise keeps its own.
+  const rest = new Map();
+  for (const n of agents) {
+    const s = stateOf(n.status);
+    if (s === 'failed' || s === 'live' || s === 'waking' || s === 'done') continue;
+    const key = String(n.status ?? 'unknown');
+    if (!rest.has(key)) rest.set(key, []);
+    rest.get(key).push(n);
+  }
+  const WORD = { ended: 'Ended', stale: 'Stale' };
+  for (const [status, members] of [...rest].sort((a, b) => a[0].localeCompare(b[0]))) {
+    fixed.push({
+      key: `status:${status}`, title: WORD[status] ?? status, tone: 'none', known: status in WORD,
+      rows: members.sort(newest).map((n) => rowOf(n, now)), foldedByDefault: true,
+    });
+  }
+  for (const s of fixed) {
+    if (!s.rows.length) continue;
+    out.push({
+      key: s.key, title: s.title, count: s.rows.length, tone: s.tone, cards: [], rows: s.rows,
+      folded: folded.has(s.key) ? folded.get(s.key) : s.foldedByDefault, foldable: true,
+    });
+  }
+  return out;
+}
+/** What a request card says under the agent's name. */
+export function wants(item) {
+  return `wants to run ${item.toolName}`;
+}
+/** Which view a window opens on when the viewer has not chosen one: the List on a phone, the graph elsewhere. */
+export function defaultView(stored, phone) {
+  if (stored === 'graph' || stored === 'timeline' || stored === 'list') return stored;
+  return phone ? 'list' : 'graph';
+}
+/** The graph and the Timeline are drawn for a wide window. On a phone they still open, and say so. */
+export function narrowWarning(view, phone) {
+  return phone && view !== 'list' ? 'Best on a wider screen' : null;
+}

package/kit/studio/web/list.js ADDED Viewed

@@ -0,0 +1,157 @@
+// The List view: one column, in the order of what needs the reader.
+//
+// What goes where is decided in list-plan.js. This file draws it. A waiting request is a card that carries its
+// own three answers, so in this view the approval dock is not needed and is not shown.
+import { sections, wants } from './list-plan.js';
+import { Press } from './press.js';
+import { remaining, asker, allowSessionLabel, VERDICTS } from './approvals.js';
+function mk(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+export class List {
+  /**
+   * @param hooks.tileOf(node)          the agent's mark
+   * @param hooks.onSelect(node)        a row was chosen
+   * @param hooks.onDecide(item, verdict)
+   * @param hooks.onLocate(item)        a request in another session: go to it
+   * @param hooks.dimmed(node)          is this agent outside what Show is showing
+   */
+  constructor(root, hooks = {}) {
+    this.root = root;
+    this.hooks = hooks;
+    // A redraw waits while a button is down on the view: the element under a press has to live to the release.
+    this.press = new Press(() => this.render());
+    if (typeof window !== 'undefined' && root.addEventListener) this.press.watch(root, window);
+    this.nodes = [];
+    this.queue = [];
+    this.current = null;
+    this.folded = new Map();
+    this.selected = null;
+    this.busy = new Set();
+    this.now = () => Date.now();
+    this.root.classList.add('ls');
+  }
+  setSession(id) { if (id !== this.current) { this.current = id; this.nodes = []; this.folded = new Map(); this.selected = null; this.render(); } }
+  setNodes(nodes) { this.nodes = nodes ?? []; this.render(); }
+  setQueue(queue) {
+    this.queue = queue ?? [];
+    for (const key of [...this.busy]) if (!this.queue.some((r) => r.key === key)) this.busy.delete(key);
+    this.render();
+  }
+  select(id) { this.selected = id; this.render(); }
+  /** An answer did not reach the server: the buttons come back. */
+  release(key) { this.busy.delete(key); this.render(); }
+  /** Once a second: the countdowns and the running times move. */
+  tick() { if (!this.root.hidden && (this.queue.length || this.nodes.some((n) => n.status === 'running'))) this.render(); }
+  render() {
+    if (this.root.hidden) return;
+    if (this.press.defer()) return;
+    const now = this.now();
+    const list = sections(this.nodes, { queue: this.queue, current: this.current, folded: this.folded, now });
+    if (!list.length) {
+      const empty = mk('div', 'ls-empty');
+      empty.append(mk('strong', null, 'No agents yet'),
+        mk('span', null, 'This session has not delegated to a subagent. When it does, each one is listed here.'));
+      this.root.replaceChildren(empty);
+      return;
+    }
+    const focused = this.root.contains?.(document.activeElement) ? document.activeElement.dataset?.key ?? null : null;
+    const top = this.root.scrollTop;
+    this.root.replaceChildren(...list.map((s) => this.#section(s, now)));
+    this.root.scrollTop = top;
+    if (focused) [...this.root.querySelectorAll('[data-key]')].find((el) => el.dataset.key === focused)?.focus();
+  }
+  #section(s, now) {
+    const sec = mk('section', 'ls-sec');
+    sec.dataset.tone = s.tone;
+    const head = mk(s.foldable ? 'button' : 'div', 'ls-head');
+    const dot = mk('span', 'dot');
+    dot.dataset.tone = s.tone;
+    head.append(dot, mk('span', 'ls-title', `${s.title} · ${s.count}`));
+    if (s.foldable) {
+      head.type = 'button';
+      head.dataset.key = `sec:${s.key}`;
+      head.setAttribute('aria-expanded', String(!s.folded));
+      head.append(mk('span', 'row-fill'), mk('span', 'sub', s.folded ? 'show' : 'hide'));
+      head.addEventListener('click', () => { this.folded.set(s.key, !s.folded); this.render(); });
+    }
+    sec.append(head);
+    for (const item of s.cards) sec.append(this.#card(item, now));
+    if (!s.folded) for (const r of s.rows) sec.append(this.#row(r));
+    return sec;
+  }
+  /** A waiting request: who wants what, how long is left, and the three answers. */
+  #card(item, now) {
+    const card = mk('div', 'ls-card');
+    const head = mk('div', 'ls-card-head');
+    const who = mk('div', 'ls-card-who');
+    who.append(mk('span', 'ls-name', asker(item)), mk('span', 'sub', wants(item)));
+    const r = remaining(item, now);
+    const clock = mk('span', 'ls-clock', r.known ? `${r.left}s` : '?');
+    clock.setAttribute('role', 'timer');
+    clock.setAttribute('aria-label', r.known ? `Auto-deny in ${r.left} seconds` : 'Time left not measured');
+    head.append(who, mk('span', 'row-fill'), clock);
+    card.append(head);
+    if (item.detail) card.append(mk('pre', 'ls-cmd', item.detail));
+    // A request from another session says which, and goes there.
+    if (item.sessionId !== this.current) {
+      const where = mk('button', 'ls-where', `in ${item.sessionName}`);
+      where.type = 'button';
+      where.addEventListener('click', () => this.hooks.onLocate?.(item));
+      card.append(where);
+    }
+    const sent = this.busy.has(item.key);
+    const acts = mk('div', 'ls-acts');
+    for (const [verdict, label, cls] of [
+      ['allow', VERDICTS.allow.label, 'btn primary'],
+      ['always', allowSessionLabel(item.toolName), 'btn'],
+      ['deny', VERDICTS.deny.label, 'btn'],
+    ]) {
+      const b = mk('button', cls, label);
+      b.type = 'button';
+      b.disabled = sent;
+      b.dataset.key = `card:${item.key}:${verdict}`;
+      b.addEventListener('click', () => {
+        if (this.busy.has(item.key)) return;
+        this.busy.add(item.key);
+        this.render();
+        this.hooks.onDecide?.(item, verdict);
+      });
+      acts.append(b);
+    }
+    card.append(acts);
+    return card;
+  }
+  #row(r) {
+    const row = mk('button', 'ls-row');
+    row.type = 'button';
+    row.dataset.key = `row:${r.id}`;
+    if (r.id === this.selected) row.classList.add('on');
+    if (this.hooks.dimmed?.(r.node)) row.classList.add('dim');
+    const tile = this.hooks.tileOf?.(r.node);
+    if (tile) row.append(tile);
+    const text = mk('span', 'ls-text');
+    text.append(mk('span', 'ls-name', r.type), mk('span', 'ls-line', r.line));
+    row.append(text);
+    if (r.aside) row.append(mk('span', 'sub ls-aside', r.aside));
+    const chev = mk('span', 'ls-chev');
+    chev.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>';
+    row.append(chev);
+    row.addEventListener('click', () => this.hooks.onSelect?.(r.node));
+    return row;
+  }
+}