feat: add task duration tracking

tests/ui.test.ts

@@ -4,6 +4,7 @@ import { visibleWidth } from "@earendil-works/pi-tui";
 import { currentTaskLabel, currentTaskTokens } from "../src/herdr.ts";
 import { TaskState } from "../src/state.ts";
 import {
+  formatDuration,
   renderProgressHeader,
   renderTaskLine,
   renderToolResult,
@@ -23,7 +24,7 @@ function stripAnsi(text: string): string {
 }
 
 function fixture(): TaskState {
-  const state = new TaskState();
+  const state = new TaskState(() => 0);
   state.add([
     {
       name: "Build auth",
@@ -58,7 +59,7 @@ test("renders an adaptive progress bar and stays within width", () => {
 test("renders lightweight connectors without a detached root continuation", () => {
   const output = renderTree(fixture().list(), plainTheme as never, 80).map(stripAnsi);
   assert.deepEqual(output, [
-    "  ◉ 1. Build auth",
+    "  ◉ 1. Build auth · 00:00",
     "  ├─ ! 2. Resolve token issue",
     "  │  └─ ○ 3. Inspect provider response",
     "  └─ ○ 4. Add middleware",
@@ -66,6 +67,21 @@ test("renders lightweight connectors without a detached root continuation", () =
   ]);
 });
 
+test("formats compact timers and adds hours only when needed", () => {
+  assert.equal(formatDuration(0), "00:00");
+  assert.equal(formatDuration(65_432), "01:05");
+  assert.equal(formatDuration(3_599_999), "59:59");
+  assert.equal(formatDuration(3_600_000), "01:00:00");
+
+  let now = 0;
+  const state = new TaskState(() => now);
+  state.add([{ name: "Timed", status: "in-progress" }]);
+  now = 65_432;
+  const line = stripAnsi(renderTaskLine(state.get([1])[0]!, "  ", plainTheme as never, 24));
+  assert.match(line, / · 01:05$/);
+  assert.ok(visibleWidth(line) <= 24);
+});
+
 test("truncates every task row at narrow widths", () => {
   const lines = renderTree(fixture().list(), plainTheme as never, 20);
   assert.ok(lines.every((line) => visibleWidth(line) <= 20));
@@ -147,6 +163,51 @@ test("hides an empty widget and renders a populated one", () => {
   assert.ok(lines.every((line) => visibleWidth(line) <= 30));
 });
 
+test("live widgets request rerenders and dispose their interval", async () => {
+  let now = 0;
+  const state = new TaskState(() => now);
+  state.add([{ name: "Timed", status: "in-progress" }]);
+
+  let widget: unknown;
+  const ctx = {
+    ui: {
+      setWidget: (_id: string, content: unknown) => {
+        widget = content;
+      },
+    },
+  };
+  updateTaskWidget(state, ctx as never, true, 5);
+
+  let renderRequests = 0;
+  const component = (
+    widget as unknown as (
+      tui: { requestRender(): void },
+      theme: unknown,
+    ) => { render(width: number): string[]; dispose?(): void }
+  )(
+    {
+      requestRender() {
+        renderRequests += 1;
+      },
+    },
+    plainTheme,
+  );
+
+  try {
+    assert.match(stripAnsi(component.render(40)[1] ?? ""), / · 00:00$/);
+    now = 65_000;
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    assert.ok(renderRequests > 0);
+    assert.match(stripAnsi(component.render(40)[1] ?? ""), / · 01:05$/);
+  } finally {
+    component.dispose?.();
+  }
+
+  const requestsAfterDispose = renderRequests;
+  await new Promise((resolve) => setTimeout(resolve, 15));
+  assert.equal(renderRequests, requestsAfterDispose);
+});
+
 test("tool results collapse summaries and expand themed details", () => {
   const state = fixture();
   const details = { action: "list" as const, snapshot: state.snapshot(), affected: state.list() };