Function TaskOutput

apps/vis/web/src/components/tasks/TasksTab.tsx:188–257

({ sessionId, taskId }: { sessionId: string; taskId: string })

}

function TaskOutput({ sessionId, taskId }: { sessionId: string; taskId: string }) {
  // Progressive byte-window paging: fetch the first window on mount, then
  // append subsequent windows on demand via the server-provided exact
  // `nextOffset` cursor. Keeps arbitrarily large logs readable in full.
  const [content, setContent] = useState('');
  const [cursor, setCursor] = useState(0);
  const [size, setSize] = useState(0);
  const [eof, setEof] = useState(false);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [started, setStarted] = useState(false);

  const loadFrom = useCallback(
    async (offset: number) => {
      setLoading(true);
      setErr(null);
      try {
        const w = await api.getTaskOutput(sessionId, taskId, offset);
        setContent((prev) => (offset === 0 ? w.content : prev + w.content));
        setCursor(w.nextOffset);
        setSize(w.size);
        setEof(w.eof);
      } catch (error) {
        setErr(error instanceof Error ? error.message : String(error));
      } finally {
        setLoading(false);
      }
    },
    [sessionId, taskId],
  );

  useEffect(() => {
    if (started) return;
    setStarted(true);
    void loadFrom(0);
  }, [started, loadFrom]);

  return (
    <div className="border-t border-border bg-[var(--color-surface-0)]">
      <div className="flex items-center gap-2 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.1em] text-fg-3">
        <span>output.log</span>
        <span className="tabular">
          {formatBytes(Math.min(cursor, size))} / {formatBytes(size)}
        </span>
        {!eof && cursor > 0 ? (
          <span className="text-[var(--color-sev-warning)]">· more below</span>
        ) : null}
        <span className="ml-auto"><CopyButton value={content} label="copy" /></span>
      </div>
      {err !== null ? (
        <div className="border-t border-border px-3 py-2 font-mono text-[11px] text-[var(--color-sev-error)]">
          {err}
        </div>
      ) : null}
      <pre className="max-h-[480px] overflow-auto whitespace-pre-wrap break-words border-t border-border px-3 py-2 font-mono text-[11px] leading-[1.5] text-fg-1">
        {content || (loading ? 'loading log…' : '(empty)')}
      </pre>
      {!eof && cursor > 0 ? (