Files
ThothII/frontend/src/shell/ElapsedTimer.tsx
T
marcopanandClaude Opus 4.8 56ed8b29bd feat(workflow-bar): processing-only elapsed timer + optimistic phase paint on resume
Timer now accumulates only while the harness works, pausing while a gate awaits
the reviewer and freezing when finalized (keyed per session, in-memory). Resume
now colours the re-entry phase immediately from the manifest's phase (1..8),
mirroring the F1 paint for new questions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 14:13:02 +02:00

47 lines
1.6 KiB
TypeScript

import { useEffect, useRef, useState } from "react";
function fmt(ms: number): string {
const total = Math.max(0, Math.floor(ms / 1000));
return `${Math.floor(total / 60)}m ${total % 60}s`;
}
/**
* Processing-time indicator: accumulates ONLY the time the harness/model is
* actively working (`running`), pausing while a gate waits on the reviewer and
* freezing when the session ends. The parent keys this component on the session id,
* so it remounts (and restarts at zero) per session. In-memory: a page reload
* restarts the count.
*/
export function ElapsedTimer({ running }: { running: boolean }) {
const [accumMs, setAccumMs] = useState(0);
const runStartRef = useRef<number | null>(null);
const [, tick] = useState(0);
useEffect(() => {
if (!running) return;
runStartRef.current = Date.now();
const t = setInterval(() => tick((n) => n + 1), 1000);
return () => {
// Fold the just-finished run into the accumulator (setState re-renders so the
// frozen total shows), then stop ticking.
if (runStartRef.current != null) {
const started = runStartRef.current;
runStartRef.current = null;
setAccumMs((ms) => ms + (Date.now() - started));
}
clearInterval(t);
};
}, [running]);
const live = running && runStartRef.current != null ? Date.now() - runStartRef.current : 0;
return (
<span
className="shrink-0 tabular-nums text-xs text-muted-foreground"
aria-label="Processing time"
title="Processing time (excludes time spent waiting on the reviewer)"
>
{fmt(accumMs + live)}
</span>
);
}