taskchef 7.26.0 → 7.26.1

package/src/dashboard/react/components/ActivityTimeline.tsx

@@ -31,7 +31,10 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
             <Stack gap={7}>
               <Box className="taskchef-turn-heading">
                 <StatusBadge status={presentation.status} />
-                <RelativeTime label="Turn update time" value={presentation.updatedAt} />
+                <Box className="taskchef-turn-timing">
+                  <RelativeTime label="Turn update time" value={presentation.updatedAt} />
+                  <TurnReportedWork turn={turn} />
+                </Box>
               </Box>
               {presentation.sourceLabel && <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>}
               <Box>
@@ -63,7 +66,6 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
                   title={usage.title}
                   value={usage.cost.value}
                 />
-                <TurnReportedWorkMetric turn={turn} />
               </Box>
               {usage.note && <Text c="dimmed" size="xs">{usage.note}</Text>}
               <Text c="dimmed" className="taskchef-mono" size="xs">Turn ref: {identity ?? "—"}</Text>
@@ -75,16 +77,20 @@ export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef:
   );
 }
 
-function TurnReportedWorkMetric({ turn }: { turn: TaskTurn }) {
+function TurnReportedWork({ turn }: { turn: TaskTurn }) {
   const now = useLiveNow(turn.result === null);
   const elapsed = turnReportedWorkView(turn, now);
   return (
-    <TurnMetric
-      accessibleLabel={elapsed.accessibleLabel}
-      label={elapsed.label}
+    <Text
+      aria-label={elapsed.accessibleLabel}
+      c="dimmed"
+      className="taskchef-turn-duration"
+      size="xs"
       title={elapsed.title}
-      value={elapsed.value}
-    />
+    >
+      <span className="taskchef-field-label">{elapsed.label}</span>
+      <span>{elapsed.value}</span>
+    </Text>
   );
 }
 

package/src/dashboard/react/components/TaskDetail.test.tsx

@@ -70,11 +70,15 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     <MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>,
   );
   const metrics = container.querySelector(".taskchef-turn-metrics") as HTMLElement;
+  const timing = container.querySelector(".taskchef-turn-timing") as HTMLElement;
   expect(metrics).not.toBeNull();
+  expect(timing).not.toBeNull();
   expect(within(metrics).getByText("Tokens").nextSibling).toHaveTextContent("330");
   expect(within(metrics).getByText("Estimated cost").nextSibling).toHaveTextContent("$0.12");
-  expect(within(metrics).getByText("Elapsed").nextSibling).toHaveTextContent("18m 32s");
-  expect(within(metrics).getByLabelText(/completed turn reported wall-clock elapsed time/i)).toBeVisible();
+  expect(within(metrics).queryByText("Elapsed")).not.toBeInTheDocument();
+  expect(within(timing).getByLabelText(/^Turn update time:/i)).toBeVisible();
+  expect(within(timing).getByLabelText(/completed turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed18m 32s");
   cleanup();
   }
 
@@ -89,7 +93,8 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
   vi.spyOn(window, "clearInterval").mockImplementation(() => undefined);
   const task = fixtureTask();
   render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
-  expect(screen.getByText("Elapsed so far").nextSibling).toHaveTextContent("18m 32s");
+  expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed so far18m 32s");
   expect(screen.getByText("Tokens").nextSibling).toHaveTextContent("Pending");
   expect(screen.getByText("Estimated cost").nextSibling).toHaveTextContent("Pending");
 
@@ -98,7 +103,8 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     tick?.();
   });
 
-  expect(screen.getByText("Elapsed so far").nextSibling).toHaveTextContent("18m 34s");
+  expect(screen.getByLabelText(/current turn reported wall-clock elapsed time/i))
+    .toHaveTextContent("Elapsed so far18m 34s");
   cleanup();
   vi.restoreAllMocks();
   }
@@ -126,8 +132,8 @@ test("covers terminal, active, and unavailable timeline metrics", () => {
     },
   });
   render(<MantineProvider><ActivityTimeline highlightTurnRef={null} task={task} /></MantineProvider>);
-  expect(screen.getByText("Elapsed").nextSibling).toHaveTextContent("Unavailable");
-  expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i)).toBeVisible();
+  expect(screen.getByLabelText(/elapsed unavailable.*reported wall-clock/i))
+    .toHaveTextContent("ElapsedUnavailable");
   expect(screen.getByText("Manual dashboard turns do not have usage boundaries.")).toBeVisible();
   expect(screen.getByLabelText(/tokens unavailable: manual dashboard turns/i)).toBeVisible();
   }

package/src/dashboard/react/styles.css

@@ -81,7 +81,9 @@ body {
 .taskchef-turn { background: var(--taskchef-surface-muted); }
 .taskchef-turn-highlighted { border-color: var(--mantine-color-teal-6); box-shadow: inset 3px 0 var(--mantine-color-teal-6); outline: 3px solid color-mix(in srgb, var(--mantine-color-teal-6) 22%, transparent); }
 .taskchef-turn-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.taskchef-turn-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
+.taskchef-turn-timing { display: flex; align-items: center; justify-content: flex-end; gap: var(--mantine-spacing-sm); min-width: 0; }
+.taskchef-turn-duration { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
+.taskchef-turn-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mantine-spacing-xs); }
 .taskchef-turn-metric { min-width: 0; overflow-wrap: anywhere; }
 .taskchef-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
 .taskchef-code-panel { max-height: 280px; margin: 0; padding: 12px; overflow: auto; border-radius: var(--mantine-radius-md); background: var(--taskchef-surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@@ -123,6 +125,8 @@ body {
   .taskchef-metadata { grid-template-columns: 1fr; }
   .taskchef-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .taskchef-turn-metrics { grid-template-columns: 1fr; }
+  .taskchef-turn-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .taskchef-turn-timing { flex-wrap: wrap; justify-content: flex-start; }
   .taskchef-metadata dt { padding-bottom: 0; border-bottom: 0; }
 }