design(d215): run trace frames at 1440 and 390 (TASK-757)

docs/design/artboards/d215/cap/measure_after.js

@@ -18,7 +18,7 @@ const fs = require('fs');
 const HERE = __dirname;
 const TARGETS = path.join(HERE, '..', 'targets.json');
 
-const SURFACES = ['settings', 'agent-settings', 'agent-memory', 'board', 'connectors', 'chat', 'sidebar', 'byo', 'byo-handoff', 'firstrun-welcome', 'firstrun-waiting', 'firstrun-connected', 'firstrun-error', 'activity-queue', 'activity-empty', 'activity-error', 'profile-person', 'profile-empty', 'profile-error', 'taskrecord-log', 'taskrecord-empty', 'taskrecord-error'];
+const SURFACES = ['settings', 'agent-settings', 'agent-memory', 'board', 'connectors', 'chat', 'sidebar', 'byo', 'byo-handoff', 'firstrun-welcome', 'firstrun-waiting', 'firstrun-connected', 'firstrun-error', 'activity-queue', 'activity-empty', 'activity-error', 'profile-person', 'profile-empty', 'profile-error', 'taskrecord-log', 'taskrecord-empty', 'taskrecord-error', 'runtrace-done', 'runtrace-live', 'runtrace-error'];
 // byo-handoff is drawn but can't be captured on prod: reaching it issues a real key. The first-run
 // dialog is a latch-gated overlay, and the Scout welcome only exists in a brand-new pod, so neither is measured on prod.
 const PROD_SURFACES = SURFACES.filter(s => s !== 'byo-handoff' && !s.startsWith('firstrun-'));

docs/design/artboards/d215/cap/measure_after.test.js

@@ -29,7 +29,7 @@ test('--only with an unknown surface throws', () => {
 
 test('the committed targets.json passes its own validation', () => {
   const t = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'targets.json'), 'utf8'));
-  assert.strictEqual(Object.keys(t).length, 44);
+  assert.strictEqual(Object.keys(t).length, 50);
   validateTargets(t);
 });
 
@@ -39,7 +39,7 @@ test('an empty or partial measurement is refused', () => {
   const partial = { ...t }; delete partial['board-390'];
   assert.throws(() => validateTargets(partial), /missing board-390/);
   assert.throws(() => validateTargets({ ...t, 'chat-1440': { helperWords: NaN, innerRatio: 2 } }), /invalid chat-1440/);
-  assert.strictEqual(EXPECTED.length, 44);
+  assert.strictEqual(EXPECTED.length, 50);
 });
 
 // A page whose SPA shell answers 200 and then redirects to `landsOn`. Its metrics would score

docs/design/artboards/d215/index.html

@@ -670,6 +670,12 @@
 .app.m .v2-rec dl { grid-template-columns: minmax(0, 1fr); }
 .app.m .v2-rec dd { margin-bottom: 4px; }
 .app.m .v2-run-trace__summary .b { height: 44px; }
+/* runtrace: turns and tool-call cards. */
+.v2-run-trace__turns { border-radius: 0; background: none; box-shadow: none; overflow: visible; gap: 12px; }
+.v2-run-trace__turns > li { display: grid; gap: 6px; padding-top: 4px; }
+.v2-run-trace__turns h2 { margin: 0; font: 700 15px/1.2 var(--f-display); color: var(--ink); }
+.v2-run-trace__meta { margin: 0; font: 500 11.5px/1.5 var(--f-mono); color: var(--mu); }
+.v2-run-trace__turns .v2-run-trace__call { display: grid; gap: 4px; padding: 11px 14px; border-radius: 12px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--d); }
 </style>
 
 <svg width="0" height="0" style="position:absolute" aria-hidden="true">
@@ -782,7 +788,7 @@ <h1>Same look. <em>Less said.</em></h1>
   <li><svg viewBox="0 0 24 24"><use href="#i-grid"/></svg><b>One screen first</b><span>Repeated blocks become a table; rare settings collapse.</span></li>
 </ol>
 <nav class="toc" aria-label="Surfaces">
-  <a href="#s-sidebar">Sidebar controls</a><a href="#s-chat">Pod chat</a><a href="#s-board">Task board</a><a href="#s-memory">Memory</a><a href="#s-agent">Agent settings</a><a href="#s-settings">Settings</a><a href="#s-connectors">Connectors</a><a href="#s-byo">Bring your own</a><a href="#s-firstrun">First run</a><a href="#s-activity">Activity</a><a href="#s-profile">Profile</a><a href="#s-taskrecord">Task record</a><a href="#s-dark">Dark mode</a>
+  <a href="#s-sidebar">Sidebar controls</a><a href="#s-chat">Pod chat</a><a href="#s-board">Task board</a><a href="#s-memory">Memory</a><a href="#s-agent">Agent settings</a><a href="#s-settings">Settings</a><a href="#s-connectors">Connectors</a><a href="#s-byo">Bring your own</a><a href="#s-firstrun">First run</a><a href="#s-activity">Activity</a><a href="#s-profile">Profile</a><a href="#s-taskrecord">Task record</a><a href="#s-runtrace">Run trace</a><a href="#s-dark">Dark mode</a>
 </nav>
 
 <section class="surf" id="s-sidebar">
@@ -1132,6 +1138,32 @@ <h1>Same look. <em>Less said.</em></h1>
   </div>
 </section>
 
+<section class="surf" id="s-runtrace">
+  <div class="shead"><h2>Run trace</h2><span class="route">/v2/pods/:podId/runs/:runId</span><div class="nums"><span class="num">helper words done <b>–</b> → <i>57</i></span><span class="num">live <b>–</b> → <i>61</i></span><span class="num">scroll 390 <b>–</b> → <i>1.0×</i></span></div></div>
+  <div class="row1 row1--even">
+    <figure><figcaption><b>Succeeded · 1440</b><span>two turns, a grant trail</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="runtrace-done" data-vp="1440"><div class="app d"><div class="sh sh--page"><nav class="rail"><div class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></div><div class="nav on" title="Pods"><svg class="i" viewBox="0 0 24 24"><use href="#i-layers"/></svg></div><div class="nav" title="Agents"><svg class="i" viewBox="0 0 24 24"><use href="#i-team"/></svg></div><div class="nav" title="Needs you"><svg class="i" viewBox="0 0 24 24"><use href="#i-activity"/></svg><span class="bd">3</span></div><div class="nav" title="Artifacts"><svg class="i" viewBox="0 0 24 24"><use href="#i-file"/></svg></div><div class="nav" title="Connectors"><svg class="i" viewBox="0 0 24 24"><use href="#i-plug"/></svg></div><div class="nav" title="Settings"><svg class="i" viewBox="0 0 24 24"><use href="#i-gear"/></svg></div><div class="sp"></div><div class="nav" title="Feedback"><svg class="i" viewBox="0 0 24 24"><use href="#i-feedback"/></svg></div><div class="seg seg--ic seg--rail" role="group" aria-label="Theme"><button type="button" data-t="light" title="Light" aria-label="Light" aria-pressed="false"><svg class="i" viewBox="0 0 24 24"><use href="#i-sun"/></svg></button><button type="button" data-t="dark" title="Dark" aria-label="Dark" aria-pressed="false"><svg class="i" viewBox="0 0 24 24"><use href="#i-moon"/></svg></button></div><span class="av av--36"><svg viewBox="0 0 40 40"><use href="#av-alex"/></svg></span></nav><div class="pane"><div class="ph"><h1>Run trace</h1><span class="sp"></span><button class="b b-g b-sm"><svg class="i" viewBox="0 0 24 24"><use href="#i-back"/></svg>Back to pod</button></div><div class="pbody"><div class="v2-run-trace v2-rec"><p class="v2-run-trace__retention">Cards have a 30-day default retention. Pod policy and storage limits can change it. This trace persists after the card expires.</p><div class="v2-run-trace__summary"><div class="v2-run-trace__sumtop"><strong>Kai</strong><span>Succeeded · Task assignment</span></div><span class="v2-run-trace__sub">Recorded turns: 2 · 5,412 tokens</span><time class="v2-run-trace__sub">11/1/2026, 9:02:11 AM</time><code>run_8f31c0</code></div><ol class="v2-run-trace__turns"><li><h2>Turn 1</h2><p class="v2-run-trace__meta">claude-sonnet-5-5 · 2140 ms · 3,106 tokens</p><div class="v2-run-trace__call"><div class="v2-task-record__top"><strong>slack.post</strong><span>ok · 412 ms</span></div><code>Call c_77a1</code><dl><dt>Grant</dt><dd>g_41c2</dd><dt>Credential owner</dt><dd>Dana Okafor</dd><dt>Outcome</dt><dd>ok</dd></dl></div><div class="v2-run-trace__call"><div class="v2-task-record__top"><strong>read_file</strong><span>ok · 38 ms</span></div><p class="v2-run-trace__sub">Built-in tool. No connector credential.</p></div></li><li><h2>Turn 2</h2><p class="v2-run-trace__meta">Asked claude-sonnet-5-5, answered by claude-haiku-5-5 · 1210 ms · 2,306 tokens</p><p class="v2-run-trace__sub">No tool calls.</p></li></ol></div></div></div></div></div></div></figure>
+    <figure><figcaption><b>Running, size-limited · 1440</b><span>in progress</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="runtrace-live" data-vp="1440"><div class="app d"><div class="sh sh--page"><nav class="rail"><div class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></div><div class="nav on" title="Pods"><svg class="i" viewBox="0 0 24 24"><use href="#i-layers"/></svg></div><div class="nav" title="Agents"><svg class="i" viewBox="0 0 24 24"><use href="#i-team"/></svg></div><div class="nav" title="Needs you"><svg class="i" viewBox="0 0 24 24"><use href="#i-activity"/></svg><span class="bd">3</span></div><div class="nav" title="Artifacts"><svg class="i" viewBox="0 0 24 24"><use href="#i-file"/></svg></div><div class="nav" title="Connectors"><svg class="i" viewBox="0 0 24 24"><use href="#i-plug"/></svg></div><div class="nav" title="Settings"><svg class="i" viewBox="0 0 24 24"><use href="#i-gear"/></svg></div><div class="sp"></div><div class="nav" title="Feedback"><svg class="i" viewBox="0 0 24 24"><use href="#i-feedback"/></svg></div><div class="seg seg--ic seg--rail" role="group" aria-label="Theme"><button type="button" data-t="light" title="Light" aria-label="Light" aria-pressed="false"><svg class="i" viewBox="0 0 24 24"><use href="#i-sun"/></svg></button><button type="button" data-t="dark" title="Dark" aria-label="Dark" aria-pressed="false"><svg class="i" viewBox="0 0 24 24"><use href="#i-moon"/></svg></button></div><span class="av av--36"><svg viewBox="0 0 40 40"><use href="#av-alex"/></svg></span></nav><div class="pane"><div class="ph"><h1>Run trace</h1><span class="sp"></span><button class="b b-g b-sm"><svg class="i" viewBox="0 0 24 24"><use href="#i-back"/></svg>Back to pod</button></div><div class="pbody"><div class="v2-run-trace v2-rec"><p class="v2-run-trace__retention">Cards have a 30-day default retention. Pod policy and storage limits can change it. This trace persists after the card expires.</p><div class="v2-run-trace__summary"><div class="v2-run-trace__sumtop"><strong>Ivy</strong><span>Running · Heartbeat</span></div><span class="v2-run-trace__sub">Recorded turns: 1 · 1,874 tokens</span><time class="v2-run-trace__sub">11/1/2026, 9:40:02 AM</time><code>run_2b90de</code><p class="v2-run-trace__sub">This run is still in progress. <button class="b b-s b-sm">Refresh trace</button></p></div><p class="v2-run-trace__note" role="status">This stored trace was size-limited. 3 turns and 8 tool calls are omitted. Large content fields are also capped.</p><ol class="v2-run-trace__turns"><li><h2>Turn 1</h2><p class="v2-run-trace__meta">claude-haiku-5-5 · 980 ms · 1,874 tokens</p><div class="v2-run-trace__call"><div class="v2-task-record__top"><strong>read_file</strong><span>ok · 41 ms</span></div><p class="v2-run-trace__sub">Built-in tool. No connector credential.</p></div></li></ol></div></div></div></div></div></div></figure>
+  </div>
+  <div class="row1 row1--even" style="margin-top:18px">
+    <figure><figcaption><b>Not available · 1440</b><span>trace is gone or no access</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="runtrace-error" data-vp="1440"><div class="app d"><div class="sh sh--page"><nav class="rail"><div class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></div><div class="nav on" title="Pods"><svg class="i" viewBox="0 0 24 24"><use href="#i-layers"/></svg></div><div class="nav" title="Agents"><svg class="i" viewBox="0 0 24 24"><use href="#i-team"/></svg></div><div class="nav" title="Needs you"><svg class="i" viewBox="0 0 24 24"><use href="#i-activity"/></svg><span class="bd">3</span></div><div class="nav" title="Artifacts"><svg class="i" viewBox="0 0 24 24"><use href="#i-file"/></svg></div><div class="nav" title="Connectors"><svg class="i" viewBox="0 0 24 24"><use href="#i-plug"/></svg></div><div class="nav" title="Settings"><svg class="i" viewBox="0 0 24 24"><use href="#i-gear"/></svg></div><div class="sp"></div><div class="nav" title="Feedback"><svg class="i" viewBox="0 0 24 24"><use href="#i-feedback"/></svg></div><div class="seg seg--ic seg--rail" role="group" aria-label="Theme"><button type="button" data-t="light" title="Light" aria-label="Light" aria-pressed="false"><svg class="i" viewBox="0 0 24 24"><use href="#i-sun"/></svg></button><button type="button" data-t="dark" title="Dark" aria-label="Dark" aria-pressed="false"><svg class="i" viewBox="0 0 24 24"><use href="#i-moon"/></svg></button></div><span class="av av--36"><svg viewBox="0 0 40 40"><use href="#av-alex"/></svg></span></nav><div class="pane"><div class="ph"><h1>Run trace</h1><span class="sp"></span><button class="b b-g b-sm"><svg class="i" viewBox="0 0 24 24"><use href="#i-back"/></svg>Back to pod</button></div><div class="pbody"><div class="v2-run-trace v2-rec"><div class="v2-run-trace__alert" role="alert"><p>This trace is unavailable, or you no longer have access to its pod.</p></div></div></div></div></div></div></div></figure>
+    <div class="notes"><ul>
+<li><b>Summary first, then turns.</b> Who ran, how it ended and what started it, then the counts, the start time and the run id in mono. A turn is a heading, a mono line for model, time and tokens, and its tool calls as small cards.</li>
+<li><b>A tool call says where its credential came from.</b> A brokered call shows grant, credential owner and outcome; a built-in tool says so in one line, and a call with no trail says "Broker trail unavailable."</li>
+<li><b>The retention line leads.</b> Cards expire after 30 days by default; the trace does not. It is the first thing under the title so nobody reads a missing card as a missing trace.</li>
+<li><b>At 390</b> the back key becomes a 44px row, and the grant fields stack key over value.</li>
+</ul><h3>Each state, one line</h3><table class="ctl">
+<tr><td>Succeeded</td><td>Served-model line appears only when the answering model differs from the one asked for.</td></tr>
+<tr><td>Running, size-limited</td><td>A running or queued run shows "still in progress" with <span class="cd">Refresh trace</span>. The size-limit line names what was left out: turns, calls, or large fields only.</td></tr>
+<tr><td>Not available</td><td>One line. A network failure shows "Could not load the run trace" with <span class="cd">Try again</span>; a 404 does not.</td></tr>
+</table></div>
+  </div>
+  <div class="row2 row2--even">
+    <figure><figcaption><b>Succeeded · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="runtrace-done" data-vp="390"><div class="app m"><div class="mtop"><h1>Run trace</h1><span class="sp"></span></div><div class="mbody2"><div class="v2-run-trace v2-rec"><div class="v2-run-trace__back-m"><button class="b b-g b-sm"><svg class="i" viewBox="0 0 24 24"><use href="#i-back"/></svg>Back to pod</button></div><p class="v2-run-trace__retention">Cards have a 30-day default retention. Pod policy and storage limits can change it. This trace persists after the card expires.</p><div class="v2-run-trace__summary"><div class="v2-run-trace__sumtop"><strong>Kai</strong><span>Succeeded · Task assignment</span></div><span class="v2-run-trace__sub">Recorded turns: 2 · 5,412 tokens</span><time class="v2-run-trace__sub">11/1/2026, 9:02:11 AM</time><code>run_8f31c0</code></div><ol class="v2-run-trace__turns"><li><h2>Turn 1</h2><p class="v2-run-trace__meta">claude-sonnet-5-5 · 2140 ms · 3,106 tokens</p><div class="v2-run-trace__call"><div class="v2-task-record__top"><strong>slack.post</strong><span>ok · 412 ms</span></div><code>Call c_77a1</code><dl><dt>Grant</dt><dd>g_41c2</dd><dt>Credential owner</dt><dd>Dana Okafor</dd><dt>Outcome</dt><dd>ok</dd></dl></div></li></ol></div></div><div class="mtab"><div class="on"><svg class="i" viewBox="0 0 24 24"><use href="#i-layers"/></svg><span>Pods</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-activity"/></svg><span class="bd">3</span><span>Needs you</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-team"/></svg><span>Team</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-gear"/></svg><span>Settings</span></div></div></div></div></figure>
+    <figure><figcaption><b>Running, size-limited · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="runtrace-live" data-vp="390"><div class="app m"><div class="mtop"><h1>Run trace</h1><span class="sp"></span></div><div class="mbody2"><div class="v2-run-trace v2-rec"><div class="v2-run-trace__back-m"><button class="b b-g b-sm"><svg class="i" viewBox="0 0 24 24"><use href="#i-back"/></svg>Back to pod</button></div><p class="v2-run-trace__retention">Cards have a 30-day default retention. Pod policy and storage limits can change it. This trace persists after the card expires.</p><div class="v2-run-trace__summary"><div class="v2-run-trace__sumtop"><strong>Ivy</strong><span>Running · Heartbeat</span></div><span class="v2-run-trace__sub">Recorded turns: 1 · 1,874 tokens</span><time class="v2-run-trace__sub">11/1/2026, 9:40:02 AM</time><code>run_2b90de</code><p class="v2-run-trace__sub">This run is still in progress. <button class="b b-s b-sm">Refresh trace</button></p></div><p class="v2-run-trace__note" role="status">This stored trace was size-limited. 3 turns and 8 tool calls are omitted. Large content fields are also capped.</p><ol class="v2-run-trace__turns"><li><h2>Turn 1</h2><p class="v2-run-trace__meta">claude-haiku-5-5 · 980 ms · 1,874 tokens</p><div class="v2-run-trace__call"><div class="v2-task-record__top"><strong>read_file</strong><span>ok · 41 ms</span></div><p class="v2-run-trace__sub">Built-in tool. No connector credential.</p></div></li></ol></div></div><div class="mtab"><div class="on"><svg class="i" viewBox="0 0 24 24"><use href="#i-layers"/></svg><span>Pods</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-activity"/></svg><span class="bd">3</span><span>Needs you</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-team"/></svg><span>Team</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-gear"/></svg><span>Settings</span></div></div></div></div></figure>
+    <figure><figcaption><b>Not available · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="runtrace-error" data-vp="390"><div class="app m"><div class="mtop"><h1>Run trace</h1><span class="sp"></span></div><div class="mbody2"><div class="v2-run-trace v2-rec"><div class="v2-run-trace__back-m"><button class="b b-g b-sm"><svg class="i" viewBox="0 0 24 24"><use href="#i-back"/></svg>Back to pod</button></div><div class="v2-run-trace__alert" role="alert"><p>This trace is unavailable, or you no longer have access to its pod.</p></div></div></div><div class="mtab"><div class="on"><svg class="i" viewBox="0 0 24 24"><use href="#i-layers"/></svg><span>Pods</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-activity"/></svg><span class="bd">3</span><span>Needs you</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-team"/></svg><span>Team</span></div><div class=""><svg class="i" viewBox="0 0 24 24"><use href="#i-gear"/></svg><span>Settings</span></div></div></div></div></figure>
+  </div>
+</section>
+
 <section class="surf" id="s-dark">
   <div class="shead"><h2>Dark mode</h2><span class="route">one dark value per token</span></div>
   <div class="dm">

docs/design/artboards/d215/targets.json

@@ -174,5 +174,29 @@
  "taskrecord-error-390": {
   "helperWords": 0,
   "innerRatio": 1
+ },
+ "runtrace-done-1440": {
+  "helperWords": 57,
+  "innerRatio": 1
+ },
+ "runtrace-live-1440": {
+  "helperWords": 61,
+  "innerRatio": 1
+ },
+ "runtrace-error-1440": {
+  "helperWords": 0,
+  "innerRatio": 1
+ },
+ "runtrace-done-390": {
+  "helperWords": 40,
+  "innerRatio": 1
+ },
+ "runtrace-live-390": {
+  "helperWords": 61,
+  "innerRatio": 1
+ },
+ "runtrace-error-390": {
+  "helperWords": 0,
+  "innerRatio": 1
  }
 }