@nanobpm/nano-workforce 0.193.2 → 0.194.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.194.0](https://github.com/nanobpm/nano-workforce/compare/v0.193.2...v0.194.0) (2026-09-30)
+
+### Features
+
+* **cockpit:** collapse agent-history turns behind a timestamped heading ([#832](https://github.com/nanobpm/nano-workforce/issues/832)) ([812907d](https://github.com/nanobpm/nano-workforce/commit/812907d13c49dc8a008bb8682d7d58f04c8ba323)), closes [#831](https://github.com/nanobpm/nano-workforce/issues/831)
+
 ## [0.193.2](https://github.com/nanobpm/nano-workforce/compare/v0.193.1...v0.193.2) (2026-09-29)
 
 ### Bug Fixes

package/app/agentic/cockpit/agent-history-render.test.ts

@@ -63,6 +63,8 @@ test("renderAgentHistory renders turns with role, text, tool calls and per-turn
         text: "on it",
         toolCalls: [{ toolCallId: "t-1", toolName: "grep", elementId: "tool" }],
         metrics: "12 in \u00b7 4 out \u00b7 900ms",
+        producedAt: "2024-05-01T12:34:56.789Z",
+        time: "12:34:56",
       },
     ],
   };
@@ -78,6 +80,28 @@ test("renderAgentHistory renders turns with role, text, tool calls and per-turn
   assert.equal(host.byClass("cockpit-agent-turn-metrics")[0]?.text(), "12 in \u00b7 4 out \u00b7 900ms");
 });
 
+test("renderAgentHistory renders each turn collapsed: a <details> whose <summary> heading carries the timestamp (#831)", () => {
+  const host = new FakeElement("div");
+  renderAgentHistory(host, doc, {
+    agentInstanceKey: "ai-1",
+    count: 1,
+    turns: [{ historyItemKey: "h-1", loopIteration: 1, role: "ASSISTANT", text: "on it", toolCalls: [], producedAt: "2024-05-01T12:34:56.789Z", time: "12:34:56" }],
+  });
+  const turn = host.byClass("cockpit-agent-turn")[0];
+  assert.equal(turn?.tagName, "details");
+  // Collapsed by default: no `open` attribute — the native <summary> toggles it on click.
+  assert.equal(turn?.getAttribute("open"), undefined);
+  const heading = host.byClass("cockpit-agent-turn-meta")[0];
+  assert.equal(heading?.tagName, "summary");
+  const time = host.byClass("cockpit-agent-turn-time")[0];
+  assert.equal(time?.tagName, "time");
+  assert.equal(time?.text(), "12:34:56");
+  assert.equal(time?.getAttribute("datetime"), "2024-05-01T12:34:56.789Z");
+  // The details body sits inside the collapsible turn, not in the heading.
+  const body = host.byClass("cockpit-agent-turn-body")[0];
+  assert.equal(body?.byClass("cockpit-agent-turn-text")[0]?.text(), "on it");
+});
+
 test("renderAgentHistory renders an empty history state", () => {
   const host = new FakeElement("div");
   renderAgentHistory(host, doc, { agentInstanceKey: "ai-9", count: 0, turns: [] });

package/app/agentic/cockpit/agent-history-render.ts

@@ -106,19 +106,32 @@ export function renderAgentSessions(
   return { root };
 }
 
+/**
+ * One turn as a native collapsible: a `<details>` (collapsed by default — no `open`) whose `<summary>`
+ * heading (role, iteration, timestamp, metrics) toggles the turn's details body on click (#831).
+ */
 function turnBlock(doc: DocumentLike, t: AgentTurnView): ElementLike {
-  const block = el(doc, "div", "cockpit-agent-turn");
+  const block = el(doc, "details", "cockpit-agent-turn");
   block.setAttribute("data-history-item-key", t.historyItemKey);
   block.setAttribute("data-role", t.role);
   block.setAttribute("data-loop-iteration", String(t.loopIteration));
 
-  const meta = el(doc, "div", "cockpit-agent-turn-meta");
+  const meta = el(doc, "summary", "cockpit-agent-turn-meta");
   meta.appendChild(el(doc, "span", "cockpit-agent-turn-role", t.role));
   meta.appendChild(el(doc, "span", "cockpit-agent-turn-iter", `#${t.loopIteration}`));
+  if (t.time !== undefined) {
+    const time = el(doc, "time", "cockpit-agent-turn-time", t.time);
+    if (t.producedAt !== undefined) {
+      time.setAttribute("datetime", t.producedAt);
+      time.setAttribute("title", t.producedAt);
+    }
+    meta.appendChild(time);
+  }
   if (t.metrics !== undefined) meta.appendChild(el(doc, "span", "cockpit-agent-turn-metrics", t.metrics));
   block.appendChild(meta);
 
-  if (t.text !== "") block.appendChild(el(doc, "pre", "cockpit-agent-turn-text", t.text));
+  const body = el(doc, "div", "cockpit-agent-turn-body");
+  if (t.text !== "") body.appendChild(el(doc, "pre", "cockpit-agent-turn-text", t.text));
 
   if (t.toolCalls.length > 0) {
     const tools = el(doc, "ul", "cockpit-agent-turn-tools");
@@ -127,8 +140,9 @@ function turnBlock(doc: DocumentLike, t: AgentTurnView): ElementLike {
       li.setAttribute("data-tool-call-id", call.toolCallId);
       tools.appendChild(li);
     }
-    block.appendChild(tools);
+    body.appendChild(tools);
   }
+  block.appendChild(body);
   return block;
 }
 

package/app/agentic/cockpit/agent-history-view.test.ts

@@ -96,6 +96,22 @@ test("agentHistoryView projects turns in transport order with text, tool calls a
   assert.equal(view.turns[1]?.metrics, "12 in \u00b7 4 out \u00b7 900ms");
 });
 
+test("agentHistoryView carries each turn's producedAt timestamp (absent when unreported)", () => {
+  const view = agentHistoryView({
+    agentInstanceKey: "ai-1",
+    count: 2,
+    records: [
+      { historyItemKey: "h-0", agentInstanceKey: "ai-1", loopIteration: 0, role: "USER", commitStatus: "COMMITTED", content: [], toolCalls: [], producedAt: "2024-05-01T12:34:56.789Z" },
+      { historyItemKey: "h-1", agentInstanceKey: "ai-1", loopIteration: 1, role: "ASSISTANT", commitStatus: "COMMITTED", content: [], toolCalls: [] },
+    ],
+  });
+  assert.equal(view.turns[0]?.producedAt, "2024-05-01T12:34:56.789Z");
+  // UTC: the heading is locale-free, so the expected value is fixed regardless of the runner's timezone.
+  assert.equal(view.turns[0]?.time, "12:34:56");
+  assert.equal(view.turns[1]?.producedAt, undefined);
+  assert.equal(view.turns[1]?.time, undefined);
+});
+
 test("agentHistoryView read-as-absence: an empty history yields zero turns", () => {
   const view = agentHistoryView({ agentInstanceKey: "ai-9", count: 0, records: [] });
   assert.equal(view.count, 0);

package/app/agentic/cockpit/agent-history-view.ts

@@ -63,6 +63,10 @@ export interface AgentTurnView {
   readonly toolCalls: readonly AgentTurnToolCallView[];
   /** A compact per-turn token/duration rollup, when metrics exist. */
   readonly metrics?: string;
+  /** When the turn was produced (ISO-8601), when the engine reports it. */
+  readonly producedAt?: string;
+  /** The turn's compact heading timestamp (`HH:MM:SS`, UTC), when `producedAt` parses. */
+  readonly time?: string;
 }
 
 /** The full renderable history for one agent instance: its rolled-up header + ordered turns. */
@@ -113,6 +117,16 @@ function turnMetrics(r: AgentHistoryRecord): string | undefined {
   return dur !== undefined ? `${base} \u00b7 ${dur}` : base;
 }
 
+/** A compact `HH:MM:SS` heading timestamp in UTC for an ISO instant; undefined when unparseable. */
+export function turnTime(iso: string | undefined): string | undefined {
+  if (iso === undefined || iso === "") return undefined;
+  const ms = Date.parse(iso);
+  if (!Number.isFinite(ms)) return undefined;
+  const d = new Date(ms);
+  const pad = (n: number): string => String(n).padStart(2, "0");
+  return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+}
+
 /** The textual content of a turn: TEXT blocks joined in order (non-textual/empty blocks dropped). */
 function turnText(r: AgentHistoryRecord): string {
   const texts: string[] = [];
@@ -156,6 +170,7 @@ export function agentSessionsView(report: AgentInstanceListReport): AgentSession
 /** Project one engine {@link AgentHistoryRecord} onto a renderable {@link AgentTurnView}. */
 export function agentTurnView(r: AgentHistoryRecord): AgentTurnView {
   const metrics = turnMetrics(r);
+  const time = turnTime(r.producedAt);
   return {
     historyItemKey: r.historyItemKey,
     loopIteration: r.loopIteration,
@@ -167,6 +182,8 @@ export function agentTurnView(r: AgentHistoryRecord): AgentTurnView {
       ...(c.elementId !== undefined && c.elementId !== "" ? { elementId: c.elementId } : {}),
     })),
     ...(metrics !== undefined ? { metrics } : {}),
+    ...(r.producedAt !== undefined && r.producedAt !== "" ? { producedAt: r.producedAt } : {}),
+    ...(time !== undefined ? { time } : {}),
   };
 }
 

package/app/agentic/cockpit/mount.test.ts

@@ -303,6 +303,7 @@ test("agent-history panel renders the engine run list and a selected run's turns
         content: [{ contentType: "TEXT", text: "did the thing" }],
         toolCalls: [{ toolCallId: "t-1", toolName: "grep", elementId: "tool", arguments: {} }],
         metrics: { inputTokens: 12, outputTokens: 4, reasoningTokenCount: 0, cacheCreationTokenCount: 0, cacheReadTokenCount: 0, durationMs: 900 },
+        producedAt: "2024-05-01T12:34:56.789Z",
       },
     ],
   };
@@ -334,6 +335,17 @@ test("agent-history panel renders the engine run list and a selected run's turns
       assert(transcript != null, "the selected run's history rendered");
       assert((transcript?.textContent ?? "").includes("did the thing"), "the turn text rendered");
       assert((transcript?.textContent ?? "").includes("grep"), "the tool call rendered");
+      // #831 — each turn renders as a collapsed native <details> whose <summary> heading carries the
+      // UTC timestamp. Assert the browser twin mirrors the typed renderer so mount.js can't regress.
+      const turn = transcript?.querySelector(".cockpit-agent-turn");
+      assertEquals(turn?.tagName?.toLowerCase(), "details", "the turn is a <details>");
+      assertEquals(turn?.hasAttribute("open"), false, "collapsed by default: no open attribute");
+      const summary = turn?.querySelector(".cockpit-agent-turn-meta");
+      assertEquals(summary?.tagName?.toLowerCase(), "summary", "the heading is a <summary>");
+      const time = turn?.querySelector(".cockpit-agent-turn-time");
+      assertEquals(time?.tagName?.toLowerCase(), "time", "the timestamp is a <time>");
+      assertEquals(time?.textContent, "12:34:56", "the heading shows the UTC HH:MM:SS");
+      assertEquals(time?.getAttribute("datetime"), "2024-05-01T12:34:56.789Z", "the <time> carries the ISO instant");
     } finally {
       handle.dispose();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/nano-workforce",
-  "version": "0.193.2",
+  "version": "0.194.0",
   "description": "Nano Workforce — an Agent Graph Orchestration application for Agentic SDLC: durable BPMN processes that coordinate a graph of AI agents across the software delivery lifecycle.",
   "type": "module",
   "main": "main.ts",

package/pages/cockpit/cockpit.css

@@ -316,9 +316,24 @@
   display: flex;
   gap: 8px;
   align-items: baseline;
-  margin-bottom: 4px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.cockpit-agent-turn-meta::-webkit-details-marker { display: none; }
+
+.cockpit-agent-turn-meta::before {
+  content: "\25B8";
+  color: var(--cockpit-muted);
+  font-size: 11px;
+  width: 10px;
 }
 
+.cockpit-agent-turn[open] > .cockpit-agent-turn-meta::before { content: "\25BE"; }
+
+.cockpit-agent-turn-body { margin-top: 4px; padding-left: 18px; }
+
 .cockpit-agent-turn-role {
   font-size: 11px;
   text-transform: uppercase;
@@ -327,6 +342,7 @@
 }
 
 .cockpit-agent-turn-iter,
+.cockpit-agent-turn-time,
 .cockpit-agent-turn-metrics {
   font-size: 11px;
   color: var(--cockpit-muted);

package/pages/cockpit/mount.js

@@ -574,6 +574,15 @@ function turnMetrics(m) {
   return dur != null ? `${base} \u00b7 ${dur}` : base;
 }
 
+function turnTime(iso) {
+  if (iso == null || iso === "") return undefined;
+  const ms = Date.parse(iso);
+  if (!Number.isFinite(ms)) return undefined;
+  const d = new Date(ms);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+}
+
 function agentHistoryView(report) {
   const turns = (report.records ?? []).map((r) => ({
     historyItemKey: r.historyItemKey,
@@ -582,6 +591,8 @@ function agentHistoryView(report) {
     text: turnText(r),
     toolCalls: (r.toolCalls ?? []).map((c) => ({ toolCallId: c.toolCallId, toolName: c.toolName, elementId: c.elementId })),
     metrics: turnMetrics(r.metrics),
+    producedAt: r.producedAt != null && r.producedAt !== "" ? r.producedAt : undefined,
+    time: turnTime(r.producedAt),
   }));
   return {
     agentInstanceKey: report.agentInstanceKey,
@@ -639,17 +650,28 @@ function renderAgentSessions(host, doc, view, onSelect, activeInstanceKey) {
   host.appendChild(root);
 }
 
+// One turn as a native collapsible <details> (collapsed by default); its <summary> heading (role,
+// iteration, timestamp, metrics) toggles the details body on click (#831).
 function agentTurnBlock(doc, t) {
-  const block = el(doc, "div", "cockpit-agent-turn");
+  const block = el(doc, "details", "cockpit-agent-turn");
   block.setAttribute("data-history-item-key", t.historyItemKey);
   block.setAttribute("data-role", t.role);
   block.setAttribute("data-loop-iteration", String(t.loopIteration));
-  const meta = el(doc, "div", "cockpit-agent-turn-meta");
+  const meta = el(doc, "summary", "cockpit-agent-turn-meta");
   meta.appendChild(el(doc, "span", "cockpit-agent-turn-role", t.role));
   meta.appendChild(el(doc, "span", "cockpit-agent-turn-iter", `#${t.loopIteration}`));
+  if (t.time != null) {
+    const time = el(doc, "time", "cockpit-agent-turn-time", t.time);
+    if (t.producedAt != null) {
+      time.setAttribute("datetime", t.producedAt);
+      time.setAttribute("title", t.producedAt);
+    }
+    meta.appendChild(time);
+  }
   if (t.metrics != null) meta.appendChild(el(doc, "span", "cockpit-agent-turn-metrics", t.metrics));
   block.appendChild(meta);
-  if (t.text !== "") block.appendChild(el(doc, "pre", "cockpit-agent-turn-text", t.text));
+  const body = el(doc, "div", "cockpit-agent-turn-body");
+  if (t.text !== "") body.appendChild(el(doc, "pre", "cockpit-agent-turn-text", t.text));
   if (t.toolCalls.length > 0) {
     const tools = el(doc, "ul", "cockpit-agent-turn-tools");
     for (const call of t.toolCalls) {
@@ -657,8 +679,9 @@ function agentTurnBlock(doc, t) {
       li.setAttribute("data-tool-call-id", call.toolCallId);
       tools.appendChild(li);
     }
-    block.appendChild(tools);
+    body.appendChild(tools);
   }
+  block.appendChild(body);
   return block;
 }