Function TurnCard

apps/vis/web/src/components/analysis/TimelineTab.tsx:234–280

({ turn }: { turn: TurnNode })

}

function TurnCard({ turn }: { turn: TurnNode }) {
  const [open, setOpen] = useState(turn.index === 0);
  const totalTokens = turn.tokens.inputOther + turn.tokens.output + turn.tokens.inputCacheRead + turn.tokens.inputCacheCreation;
  return (
    <div className="border border-border bg-surface-0">
      <button
        type="button"
        onClick={() => { setOpen((v) => !v); }}
        className="flex w-full flex-wrap items-center gap-2 px-3 py-2 text-left hover:bg-surface-1"
      >
        <span className="text-fg-3">{open ? '▾' : '▸'}</span>
        <Pill tone={turn.trigger === 'steer' ? 'turn' : 'conversation'} variant="outline">
          turn {turn.index}{turn.trigger === 'steer' ? ' (steer)' : ''}
        </Pill>
        {turn.originKind && turn.originKind !== 'user' ? (
          <Pill tone="meta" variant="outline">{turn.originKind}</Pill>
        ) : null}
        {turn.cancelled ? <Pill tone="warning">cancelled</Pill> : null}
        {turn.toolErrorCount > 0 ? <Pill tone="error">{turn.toolErrorCount} err</Pill> : null}
        <span className="min-w-0 flex-1 truncate font-mono text-[12px] text-fg-1" title={turn.promptText}>
          {turn.promptText || '(no prompt text)'}
        </span>
        <span className="flex shrink-0 items-center gap-3 font-mono text-[11px] text-fg-3 tabular">
          <span>{turn.steps.length} steps</span>
          <span>{turn.toolCallCount} tools</span>
          <span title="total tokens processed this turn">{formatTokens(totalTokens)} tok</span>
          <span title="active execution time">{formatDuration(turn.durationMs)}</span>
        </span>
      </button>

      {open ? (
        <div className="border-t border-border px-3 py-2">
          {turn.waitBeforeMs !== undefined && turn.waitBeforeMs >= 1000 ? (
            <div className="mb-2 font-mono text-[10px] text-fg-3">
              ⏱ waited {formatDuration(turn.waitBeforeMs)} before this turn
            </div>
          ) : null}
          <div className="flex flex-col gap-1.5">
            {turn.steps.map((step) => (
              <StepRow key={step.uuid} step={step} turnDurationMs={turn.durationMs} />
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function StepRow({ step, turnDurationMs }: { step: StepNode; turnDurationMs?: number }) {
  const widthPct = turnDurationMs && step.durationMs ? Math.max(2, (step.durationMs / turnDurationMs) * 100) : 0;