put the open task log and the followed run in the url
task-logs was a clean move — the detail fetch already keyed off the id, so only its source changed. activity needed one decision: its two row kinds stream through different query params, so the url carries the id and the screen derives task= or path= from the registry row. the sse effect now depends on that derived string rather than a fresh object, so the 3s poll cannot re-open the stream. an id that has left the registry says so instead of waiting for output forever. /activity also had no page-title rule and read 'Officer'. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router';
|
||||
import { useClient } from 'hooks/useClient';
|
||||
import { Radio, FileText, Activity as ActivityIcon } from 'lucide-react';
|
||||
|
||||
@@ -10,10 +11,14 @@ type ProgressLine = { phase?: string; status?: string; pct?: number; detail?: st
|
||||
const POLL_MS = 3000;
|
||||
const MAX_LINES = 600;
|
||||
|
||||
// Which run you are following is `/activity/:id`. The two row kinds stream through different query
|
||||
// params (`task=` for a harness file, `path=` for a detached job), so the URL carries the id only and
|
||||
// the screen re-derives the param from the registry row — one address shape for both kinds.
|
||||
export const ActivityScreen = () => {
|
||||
const { token, get } = useClient();
|
||||
const [reg, setReg] = useState<Registry>({ tasks: [], detached: [] });
|
||||
const [selected, setSelected] = useState<{ label: string; query: string } | null>(null);
|
||||
const [regLoaded, setRegLoaded] = useState(false);
|
||||
const selectedId = useParams<{ id: string }>().id ?? null;
|
||||
const [lines, setLines] = useState<string[]>([]);
|
||||
const [progress, setProgress] = useState<ProgressLine | null>(null);
|
||||
const esRef = useRef<EventSource | null>(null);
|
||||
@@ -22,19 +27,24 @@ export const ActivityScreen = () => {
|
||||
// Poll the registry (harness task files + announced detached jobs).
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
const tick = () => get<Registry>('/activity/tasks').then((r) => alive && setReg(r)).catch(() => {});
|
||||
const tick = () => get<Registry>('/activity/tasks').then((r) => { if (alive) { setReg(r); setRegLoaded(true); } }).catch(() => {});
|
||||
tick();
|
||||
const iv = setInterval(tick, POLL_MS);
|
||||
return () => { alive = false; clearInterval(iv); };
|
||||
}, []);
|
||||
|
||||
// The row backing the open id, and the stream query it implies. A string rather than the row object,
|
||||
// so the 3s registry poll — which replaces every row — does not tear down and re-open the stream.
|
||||
const row = selectedId ? (reg.tasks.find((t) => t.id === selectedId) ?? reg.detached.find((d) => d.id === selectedId)) : undefined;
|
||||
const query = !row ? null : row.source === 'harness' ? `task=${encodeURIComponent(row.id)}` : `path=${encodeURIComponent(row.path)}`;
|
||||
|
||||
// Live-tail the selected task via SSE (EventSource can't set headers → token in the query string).
|
||||
useEffect(() => {
|
||||
esRef.current?.close();
|
||||
setLines([]);
|
||||
setProgress(null);
|
||||
if (!selected) return;
|
||||
const es = new EventSource(`/api/activity/stream?${selected.query}&token=${encodeURIComponent(token ?? '')}`);
|
||||
if (!query) return;
|
||||
const es = new EventSource(`/api/activity/stream?${query}&token=${encodeURIComponent(token ?? '')}`);
|
||||
esRef.current = es;
|
||||
es.onmessage = (ev) => {
|
||||
try {
|
||||
@@ -44,7 +54,7 @@ export const ActivityScreen = () => {
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
return () => es.close();
|
||||
}, [selected, token]);
|
||||
}, [query, token]);
|
||||
|
||||
useEffect(() => { scrollRef.current?.scrollTo(0, scrollRef.current.scrollHeight); }, [lines]);
|
||||
|
||||
@@ -61,30 +71,30 @@ export const ActivityScreen = () => {
|
||||
<div className="mb-1 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Background tasks</div>
|
||||
{reg.tasks.length === 0 && <p className="px-2 py-1 text-xs text-muted-foreground">none running</p>}
|
||||
{reg.tasks.map((t) => (
|
||||
<button key={t.id} type="button" onClick={() => setSelected({ label: t.id, query: `task=${encodeURIComponent(t.id)}` })} className={rowCls(selected?.label === t.id)} title={t.cwd}>
|
||||
<Link key={t.id} to={`/activity/${encodeURIComponent(t.id)}`} className={rowCls(selectedId === t.id)} title={t.cwd}>
|
||||
<span className={`inline-block h-2 w-2 shrink-0 rounded-full ${t.active ? 'bg-emerald-500 animate-pulse' : 'bg-muted-foreground/40'}`} />
|
||||
<span className="truncate font-mono text-xs">{t.id}</span>
|
||||
</button>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{reg.detached.length > 0 && (
|
||||
<div className="mb-1 mt-4 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Detached</div>
|
||||
)}
|
||||
{reg.detached.map((d) => (
|
||||
<button key={d.id} type="button" onClick={() => setSelected({ label: d.id, query: `path=${encodeURIComponent(d.path)}` })} className={rowCls(selected?.label === d.id)} title={d.path}>
|
||||
<Link key={d.id} to={`/activity/${encodeURIComponent(d.id)}`} className={rowCls(selectedId === d.id)} title={d.path}>
|
||||
<FileText size={13} className="shrink-0" />
|
||||
<span className="truncate">{d.id}</span>
|
||||
</button>
|
||||
</Link>
|
||||
))}
|
||||
</aside>
|
||||
|
||||
<main className="flex min-w-0 flex-1 flex-col">
|
||||
{selected ? (
|
||||
{selectedId ? (
|
||||
<>
|
||||
<div className="shrink-0 border-b border-border p-3">
|
||||
<div className="flex items-center gap-2 text-sm text-foreground">
|
||||
<Radio size={14} className="text-primary" />
|
||||
<span className="truncate font-mono">{selected.label}</span>
|
||||
<span className="truncate font-mono">{selectedId}</span>
|
||||
</div>
|
||||
{progress && (
|
||||
<div className="mt-2">
|
||||
@@ -105,7 +115,14 @@ export const ActivityScreen = () => {
|
||||
</div>
|
||||
<div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto bg-black/30 p-3 font-mono text-xs text-foreground/80">
|
||||
{lines.length === 0 ? (
|
||||
<span className="text-muted-foreground">waiting for output…</span>
|
||||
<span className="text-muted-foreground">
|
||||
{query ? 'waiting for output…' : regLoaded ? (
|
||||
<>
|
||||
no run called <span className="font-mono">{selectedId}</span> is in the registry — it finished, or it never started.{' '}
|
||||
<Link to="/activity" className="underline">Back to the list</Link>
|
||||
</>
|
||||
) : 'loading…'}
|
||||
</span>
|
||||
) : (
|
||||
lines.map((l, i) => <div key={i} className="whitespace-pre-wrap break-words">{l}</div>)
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user