pikasTech-HWLAB/web/hwlab-cloud-web/src/components/conversation/MessageTracePanel.tsx

import type { ReactElement } from "react";
import { useEffect, useMemo, useRef, useState } from "react";

import type { RunnerTrace, TraceEvent } from "../../types/domain";
import { formatBeijingTime, formatDuration, shortToken, toneClass } from "../../utils";
import { summarizeLastEvent } from "../../state/code-agent-status";

interface MessageTracePanelProps {
  trace: RunnerTrace;
  defaultOpen?: boolean;
  storageKey?: string;
}

const MAX_VISIBLE_ROWS = 32;

interface DisplayRow {
  key: string;
  label: string;
  body: string;
  tone: string;
  ts: string | null;
}

export function MessageTracePanel({ trace, defaultOpen, storageKey }: MessageTracePanelProps): ReactElement {
  const storedOpen = readStoredOpen(storageKey, defaultOpen ?? defaultTraceDetailsOpen(trace));
  const [open, setOpen] = useState<boolean>(storedOpen);
  const [follow, setFollow] = useState<boolean>(true);
  const listRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (storageKey) {
      try { window.localStorage.setItem(storageKey, open ? "1" : "0"); } catch { /* ignore */ }
    }
  }, [open, storageKey]);

  useEffect(() => {
    if (follow && listRef.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
  }, [trace, follow, open]);

  const events = Array.isArray(trace.events) ? trace.events : [];
  const last = summarizeLastEvent(trace);
  const rows = useMemo<DisplayRow[]>(() => displayRows(events), [events]);

  return (
    <details className={`message-trace tone-border-${toneClass(last.tone)}`} data-trace-ui-key={trace.traceId ?? "trace"} open={open} onToggle={(event) => setOpen((event.currentTarget as HTMLDetailsElement).open)}>
      <summary className="message-meta">
        <span>运行 trace · {trace.status ?? "unknown"} · {rows.length || trace.eventCount || 0} events</span>
        <span className={`message-trace-last tone-${toneClass(last.tone)}`}>last · {last.label}</span>
        {last.ts ? <span className="message-trace-time">{formatBeijingTime(last.ts, { withSeconds: true })}</span> : null}
      </summary>
      <div className="message-trace-toolbar" role="toolbar" aria-label="trace toolbar">
        <span className="message-trace-count">{traceCountText(trace, events.length, rows.length)}</span>
        <button type="button" className="command-button secondary" onClick={() => setFollow((value) => !value)}>{follow ? "跟随" : "已暂停"}</button>
        <button type="button" className="command-button secondary" onClick={() => { setFollow(true); if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight; }}>跳到底部</button>
        <span className="message-trace-toolbar-spacer" />
        <span className="message-trace-storage-key" title={storageKey ?? "no storage key"}>{shortToken(trace.traceId, 10)}</span>
      </div>
      <div
        className="message-trace-events"
        data-trace-ui-key={trace.traceId ?? "trace"}
        data-trace-status={trace.status ?? "source"}
        ref={listRef}
        onScroll={() => {
          const node = listRef.current;
          if (!node) return;
          if (node.scrollHeight - node.clientHeight - node.scrollTop > 24) setFollow(false);
        }}
      >
        {rows.length === 0 ? (
          <p className="message-trace-empty">trace={trace.traceId ?? "pending"}；等待后端事件。</p>
        ) : (
          <ol className="message-trace-list">
            {rows.map((row) => (
              <li key={row.key} className={`message-trace-row tone-border-${toneClass(row.tone)}`} data-trace-row-id={row.key}>
                <header className="message-trace-line">
                  <span className={`message-trace-tone tone-${toneClass(row.tone)}`} aria-hidden="true">●</span>
                  <span className="message-trace-label">{row.label}</span>
                  {row.ts ? <span className="message-trace-time">{formatBeijingTime(row.ts, { withSeconds: true })}</span> : null}
                </header>
                <pre className="message-trace-body message-copy-markdown">{row.body}</pre>
              </li>
            ))}
          </ol>
        )}
      </div>
    </details>
  );
}

function displayRows(events: TraceEvent[]): DisplayRow[] {
  if (events.length === 0) return [];
  const tail = events.slice(-MAX_VISIBLE_ROWS);
  return tail.map((event, index) => {
    const key = `${event.traceId ?? "event"}-${event.seq ?? index}-${event.ts ?? index}`;
    const label = String(event.label ?? event.kind ?? event.type ?? "event");
    const body = eventSummary(event);
    const tone = String(event.status ?? event.level ?? "source");
    const ts = event.ts ?? null;
    return { key, label, body, tone, ts };
  });
}

function eventSummary(event: TraceEvent): string {
  if (typeof event.text === "string" && event.text.trim()) return event.text;
  if (typeof event.message === "string" && event.message.trim()) return event.message;
  if (event.payload && typeof event.payload === "object") {
    try { return JSON.stringify(event.payload, null, 2); } catch { return String(event.payload); }
  }
  if (event.evidence && Array.isArray(event.evidence)) return event.evidence.join("\n");
  return "(empty event)";
}

function traceCountText(trace: RunnerTrace, events: number, rows: number): string {
  const rawTotal = Number.isInteger(trace.eventCount) ? trace.eventCount : events;
  if (rawTotal === events) return `${rows} 条事件`;
  return `${rows}/${rawTotal} 条事件（已折叠）`;
}

function defaultTraceDetailsOpen(trace: RunnerTrace): boolean {
  return ["running", "completed", "source", "failed", "timeout", "canceled", "error"].includes(String(trace.status ?? "").toLowerCase());
}

function readStoredOpen(key: string | undefined, fallback: boolean): boolean {
  if (!key || typeof window === "undefined") return fallback;
  try {
    const value = window.localStorage.getItem(key);
    if (value === "1") return true;
    if (value === "0") return false;
  } catch { /* ignore */ }
  return fallback;
}

export { formatDuration };