Thinking trace

'use client';

import * as React from 'react';
import { ThinkingTrace, type TraceStatus, type TraceStep } from './thinking-trace';

type Frame = { at: number; status: TraceStatus; steps: TraceStep[]; query?: string; more?: number };

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d={d} stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
const FILE = (
  <Icon d="M9.333 1.667H4.667A1.333 1.333 0 0 0 3.333 3v10a1.333 1.333 0 0 0 1.334 1.333h6.666A1.333 1.333 0 0 0 12.667 13V5L9.333 1.667ZM9.333 1.667V5h3.334" />
);
const PENCIL = (
  <Icon d="M8 13.333h6M11 2.333a1.414 1.414 0 0 1 2 2L4.667 12.667 2 13.333l.667-2.666L11 2.333Z" />
);
const TERMINAL = <Icon d="m2.667 11.333 4-4-4-4M8 12.667h5.333" />;

const PLAN = [
  'Read the brief',
  'Find the open tickets',
  'Group them by team',
  'Draft the summary',
  'Check the numbers',
];
const PLAN_DETAIL = ['3 pages', '18 found', '4 teams', undefined, undefined];

const planAt = (doneCount: number): TraceStep[] =>
  PLAN.map((label, i) => ({
    label,
    detail: i < doneCount ? PLAN_DETAIL[i] : undefined,
    status: i < doneCount ? 'done' : i === doneCount ? 'running' : 'pending',
  }));

const STEPS: Frame[] = [
  ...[0, 1, 2, 3, 4].map((n) => ({ at: n * 700, status: 'running' as const, steps: planAt(n) })),
  { at: 3500, status: 'done', steps: planAt(5) },
];

const THOUGHTS = [
  'The trip is three days long, so the plan needs one area per day.',
  'They arrive at noon on day one, so that day stays close to the station.',
  'Rain is likely on day two, so a museum and a covered market fit best.',
];
const REASONING: Frame[] = [
  { at: 0, status: 'running', steps: [] },
  ...THOUGHTS.map((_, i) => ({
    at: 400 + i * 800,
    status: 'running' as const,
    steps: THOUGHTS.slice(0, i + 1).map((l) => ({ label: l })),
  })),
  { at: 2900, status: 'done', steps: THOUGHTS.map((l) => ({ label: l })) },
];

const SOURCES: TraceStep[] = [
  { label: 'Kyoto in three days', detail: 'slowtrips.blog', href: 'https://example.com/kyoto-three-days' },
  {
    label: 'A calm guide to Higashiyama',
    detail: 'lanternguide.com',
    href: 'https://example.com/higashiyama',
  },
  { label: 'Where to eat near the river', detail: 'rivermaps.org', href: 'https://example.com/river' },
  {
    label: 'Tea houses that open early',
    detail: 'teahouse-notes.net',
    href: 'https://example.com/tea-houses',
  },
];
const QUERY = 'quiet places to stay in Kyoto';
const sourcesAt = (count: number, runningLast: boolean): TraceStep[] =>
  SOURCES.slice(0, count).map((s, i) => ({
    ...s,
    status: runningLast && i === count - 1 ? 'running' : 'done',
  }));
const SEARCH: Frame[] = [
  { at: 0, status: 'running', steps: [] },
  { at: 300, status: 'running', steps: [], query: QUERY },
  ...[1, 2, 3, 4].map((n) => ({
    at: 300 + n * 550,
    status: 'running' as const,
    steps: sourcesAt(n, true),
    query: QUERY,
  })),
  { at: 2800, status: 'running', steps: sourcesAt(4, false), query: QUERY, more: 4 },
  { at: 3100, status: 'done', steps: sourcesAt(4, false), query: QUERY, more: 4 },
];

const THEME_DIFF = [
  { text: 'export const theme = {' },
  { text: 'radius: 8,', kind: 'remove' as const },
  { text: 'radius: 10,', kind: 'add' as const },
  { text: 'gap: 12,', kind: 'add' as const },
  { text: '};' },
];
const TOOL_ROWS: TraceStep[] = [
  { label: 'Read', argument: 'src/theme.ts', icon: FILE },
  { label: 'Edited', argument: 'src/theme.ts', icon: PENCIL, additions: 2, deletions: 1, output: THEME_DIFF },
  { label: 'Edited', argument: 'src/button.tsx', icon: PENCIL, additions: 12, deletions: 3 },
  { label: 'Ran', argument: 'pnpm test', icon: TERMINAL },
];
const toolsAt = (count: number, last: 'running' | 'done' | 'error'): TraceStep[] =>
  TOOL_ROWS.slice(0, count).map((s, i) => ({ ...s, status: i === count - 1 ? last : 'done' }));
const TOOLS: Frame[] = [
  { at: 0, status: 'running', steps: [] },
  ...[1, 2, 3, 4].flatMap((n) => [
    { at: n * 700 - 400, status: 'running' as const, steps: toolsAt(n, 'running') },
    { at: n * 700, status: 'running' as const, steps: toolsAt(n, n === 4 ? 'running' : 'done') },
  ]),
  { at: 3600, status: 'error', steps: toolsAt(4, 'error') },
];

const TRACES = [
  { variant: 'steps' as const, frames: STEPS, duration: 9000 },
  { variant: 'reasoning' as const, frames: REASONING, duration: 7000 },
  { variant: 'search' as const, frames: SEARCH, duration: 3000 },
  { variant: 'tools' as const, frames: TOOLS, duration: 8000 },
];

type Shown = Frame & { startedAt?: number; duration?: number; run: number };
const atRest = (): Shown[] =>
  TRACES.map((t) => ({ ...(t.frames[t.frames.length - 1] as Frame), duration: t.duration, run: 0 }));

export default function ThinkingTraceDemo({ replay = 0 }: { replay?: number }) {
  const [shown, setShown] = React.useState<Shown[]>(atRest);

  React.useEffect(() => {
    if (replay === 0) return;
    const startedAt = Date.now();
    const timers = TRACES.flatMap((trace, t) =>
      trace.frames.map((frame) =>
        window.setTimeout(
          () => setShown((list) => list.map((s, i) => (i === t ? { ...frame, startedAt, run: replay } : s))),
          frame.at,
        ),
      ),
    );
    return () => {
      for (const id of timers) window.clearTimeout(id);
    };
  }, [replay]);

  return (
    <div className="flex w-full max-w-[480px] flex-col gap-xl">
      {shown.map((trace, i) => (
        <ThinkingTrace
          // A new key per run, so each replay starts from a fresh first render.
          key={`${TRACES[i]?.variant}-${trace.run}`}
          variant={TRACES[i]?.variant}
          status={trace.status}
          steps={trace.steps}
          query={trace.query}
          more={trace.more}
          startedAt={trace.startedAt}
          duration={trace.duration}
        />
      ))}
    </div>
  );
}