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>
47 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
}
|