import {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
  type FormEvent,
} from 'react';
import {
  ArrowLeft,
  ArrowRight,
  ChevronDown,
  ChevronUp,
  Globe2,
  RefreshCw,
  X,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  closeAgentBrowser,
  deriveAgentBrowserDiagnostics,
  getAgentBrowserState,
  navigateAgentBrowser,
  openAgentBrowser,
  presentAgentBrowser,
  readAgentBrowserEvents,
  setAgentBrowserDiagnostics,
} from '@/lib/agent-browser';
import { subscribeHostEvent } from '@/lib/host-events';
import { cn } from '@/lib/utils';
import type { CodingConversationMetadata } from '@/types/coding-project';
import { useWorkPreview } from './use-work-preview';
import { usePreviewClearance } from './use-preview-clearance';
import { codingRecovery, type CodingRecoveryAction } from '../../../shared/coding-recovery';
import type { WorkPreviewResult } from '../../../shared/coding-work-preview';
import type {
  AgentBrowserBounds,
  AgentBrowserCdpEvent,
  AgentBrowserSnapshot,
} from '../../../shared/agent-browser';

type DiagnosticsTab = 'console' | 'network';

export interface AgentBrowserPanelProps {
  projectId: string | null;
  open: boolean;
  onOpenChange(open: boolean): void;
  embedded?: boolean;
  teacherBubble?: HTMLElement | null;
  teacherIntroduction?: HTMLElement | null;
  conversationId?: string | null;
  onWorkConversation?(conversation: CodingConversationMetadata): void;
  workRevision?: number;
  onWorkResult?(result: WorkPreviewResult): void;
  onRecovery?(action: CodingRecoveryAction, work: boolean): Promise<void> | void;
}

const EVENT_METHODS = [
  'Runtime.consoleAPICalled',
  'Runtime.exceptionThrown',
  'Log.entryAdded',
  'Network.requestWillBeSent',
  'Network.responseReceived',
  'Network.loadingFinished',
  'Network.loadingFailed',
];
const MAX_RENDERED_EVENTS = 500;
const EVENT_WAIT_MS = 5_000;
const EVENT_DRAIN_DELAY_MS = 100;
const EVENT_EMPTY_DELAY_MS = 250;

function normalizeAddress(value: string): string | null {
  const trimmed = value.trim();
  if (!trimmed) return null;
  return /^[a-z][a-z\d+.-]*:\/\//i.test(trimmed)
    ? trimmed
    : `http://${trimmed}`;
}

function readBounds(element: HTMLElement | null): AgentBrowserBounds | undefined {
  if (!element) return undefined;
  const rect = element.getBoundingClientRect();
  const bounds = {
    x: Math.round(rect.left),
    y: Math.round(rect.top),
    width: Math.round(rect.width),
    height: Math.round(rect.height),
  };
  return bounds.width > 0 && bounds.height > 0 ? bounds : undefined;
}

function browserIsActive(snapshot: AgentBrowserSnapshot | null): boolean {
  return Boolean(
    snapshot?.browserId
    && snapshot.state !== 'closed'
    && snapshot.state !== 'closing',
  );
}

function modalOccludesBrowser(): boolean {
  return Array.from(
    document.querySelectorAll<HTMLElement>('[role="dialog"], [role="alertdialog"], #coding-consultation-dock'),
  ).some((element) => {
    if (element.hidden || element.getAttribute('data-state') === 'closed') return false;
    const style = window.getComputedStyle(element);
    if (element.id === 'coding-consultation-dock' && style.position !== 'absolute' && style.position !== 'fixed') return false;
    return style.display !== 'none' && style.visibility !== 'hidden';
  });
}

function formatTime(timestamp: number): string {
  const date = new Date(timestamp);
  return Number.isNaN(date.getTime())
    ? '--:--:--'
    : date.toLocaleTimeString('zh-CN', { hour12: false });
}

function consoleTone(level: string): string {
  if (level === 'error' || level === 'assert') return 'text-destructive';
  if (level === 'warning' || level === 'warn') return 'text-amber-700';
  return 'text-foreground';
}

function statusTone(status?: number): string {
  if (status === undefined) return 'text-muted-foreground';
  if (status >= 500) return 'text-destructive';
  if (status >= 400) return 'text-amber-700';
  return 'text-emerald-700';
}

export function AgentBrowserPanel({
  projectId,
  open,
  onOpenChange,
  embedded = false,
  teacherBubble,
  teacherIntroduction,
  conversationId,
  onWorkConversation,
  workRevision,
  onWorkResult,
  onRecovery,
}: AgentBrowserPanelProps) {
  const [snapshot, setSnapshot] = useState<AgentBrowserSnapshot | null>(null);
  const [address, setAddress] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [occluded, setOccluded] = useState(false);
  const [diagnosticsOpen, setDiagnosticsOpen] = useState(false);
  const [activeTab, setActiveTab] = useState<DiagnosticsTab>('console');
  const [events, setEvents] = useState<AgentBrowserCdpEvent[]>([]);
  const viewportRef = useRef<HTMLDivElement | null>(null);
  const panelRef = useRef<HTMLElement | null>(null);
  usePreviewClearance(panelRef, viewportRef, teacherBubble, embedded && open, teacherIntroduction);
  const addressInputRef = useRef<HTMLInputElement | null>(null);
  const eventCursorRef = useRef(0);
  const snapshotGenerationRef = useRef(0);
  const presentationRetries = useRef(0);
  const [presentationRevision, setPresentationRevision] = useState(0);
  const [presentationFailed, setPresentationFailed] = useState(false);
  const wasOpenRef = useRef(open);
  const browserActive = browserIsActive(snapshot);
  const diagnostics = useMemo(() => deriveAgentBrowserDiagnostics(events), [events]);

  const applySnapshot = useCallback((next: AgentBrowserSnapshot) => {
    // A slow foreground state read must not replace a newly restored view.
    if (next.generation < snapshotGenerationRef.current) return;
    snapshotGenerationRef.current = next.generation;
    setSnapshot(next);
    if (browserIsActive(next)) setError(null);
    if (next.url && document.activeElement !== addressInputRef.current) {
      setAddress(next.url);
    }
  }, []);

  const work = useWorkPreview({
    projectId, conversationId, enabled: embedded && open, revision: workRevision,
    onResult: (result) => {
      if (result.status === 'empty') {
        setError(null);
        setPresentationFailed(false);
        presentationRetries.current = 0;
      }
      if (result.browser) applySnapshot(result.browser);
      if (result.conversation) onWorkConversation?.(result.conversation);
      onWorkResult?.(result);
    },
  });
  const workEmpty = embedded && work.result?.status === 'empty';
  const workPending = embedded && (work.result?.status !== 'ready' || presentationFailed);
  const recovery = codingRecovery(work.result?.errorCode, true);
  const transportFailure = ['NETWORK', 'TIMEOUT'].includes(work.result?.errorCode ?? '');
  const showBrowser = work.showBrowser;
  const restoreWork = work.restore;

  const retryPresentation = useCallback(() => {
    presentationRetries.current = 0;
    setPresentationFailed(false);
    setError(null);
    setPresentationRevision((value) => value + 1);
    restoreWork();
  }, [restoreWork]);

  useEffect(() => {
    if (embedded && open && snapshot && !browserActive && !presentationFailed && work.result?.status === 'ready') {
      restoreWork();
    }
  }, [browserActive, embedded, open, presentationFailed, restoreWork, snapshot, work.result?.status]);

  useEffect(() => {
    snapshotGenerationRef.current = 0;
    setSnapshot(null);
    setAddress('');
    setError(null);
    presentationRetries.current = 0;
    setPresentationFailed(false);
    setDiagnosticsOpen(false);
    setEvents([]);
    eventCursorRef.current = 0;
  }, [projectId]);

  useEffect(() => {
    if (!projectId) return undefined;
    const unsubscribeShow = subscribeHostEvent<AgentBrowserSnapshot>(
      'agent-browser:show',
      (next) => {
        if (next.projectId !== projectId) return;
        applySnapshot(next);
        if (workEmpty) restoreWork();
        onOpenChange(true);
      },
    );
    const unsubscribeState = subscribeHostEvent<AgentBrowserSnapshot>(
      'agent-browser:state',
      (next) => {
        if (next.projectId && next.projectId !== projectId) return;
        applySnapshot(next);
      },
    );
    return () => {
      unsubscribeShow();
      unsubscribeState();
    };
  }, [applySnapshot, onOpenChange, projectId, restoreWork, workEmpty]);

  useEffect(() => {
    if (!open || !projectId) return undefined;
    let cancelled = false;
    void getAgentBrowserState(projectId)
      .then((next) => {
        if (!cancelled) applySnapshot(next);
      })
      .catch(() => {
        if (!cancelled) setSnapshot(null);
      });
    return () => {
      cancelled = true;
    };
  }, [applySnapshot, open, projectId]);

  useEffect(() => {
    if (!open || !projectId) return undefined;
    let cancelled = false;
    const syncAfterResume = () => {
      if (document.visibilityState === 'hidden') return;
      void getAgentBrowserState(projectId)
        .then((next) => {
          if (!cancelled) applySnapshot(next);
        })
        .catch(() => {
          if (!cancelled) setSnapshot(null);
        });
    };
    window.addEventListener('focus', syncAfterResume);
    document.addEventListener('visibilitychange', syncAfterResume);
    return () => {
      cancelled = true;
      window.removeEventListener('focus', syncAfterResume);
      document.removeEventListener('visibilitychange', syncAfterResume);
    };
  }, [applySnapshot, open, projectId]);

  useEffect(() => {
    const wasOpen = wasOpenRef.current;
    wasOpenRef.current = open;
    if (!wasOpen || open || !projectId) return;
    // Switching the central workspace tab must preserve the running work page.
    if (embedded) return;
    setSnapshot(null);
    setDiagnosticsOpen(false);
    setEvents([]);
    eventCursorRef.current = 0;
    void closeAgentBrowser(projectId).catch(() => undefined);
  }, [embedded, open, projectId]);

  useEffect(() => () => {
    if (projectId) void closeAgentBrowser(projectId).catch(() => undefined);
  }, [projectId]);

  useEffect(() => {
    eventCursorRef.current = 0;
    setEvents([]);
  }, [snapshot?.browserId, snapshot?.generation]);

  useEffect(() => {
    if (!open) {
      setOccluded(false);
      return undefined;
    }
    const update = () => setOccluded(modalOccludesBrowser());
    update();
    window.addEventListener('resize', update);
    const observer = new MutationObserver(update);
    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ['class', 'data-state', 'hidden', 'style'],
      childList: true,
      subtree: true,
    });
    return () => {
      observer.disconnect();
      window.removeEventListener('resize', update);
    };
  }, [open]);

  useEffect(() => {
    if (!projectId || !browserActive) return undefined;
    if (!open || occluded || workPending) {
      void presentAgentBrowser({ projectId, visible: false }).catch(() => undefined);
      return undefined;
    }
    const viewport = viewportRef.current;
    if (!viewport) return undefined;
    let cancelled = false;
    let timer: number | null = null;
    let lastBounds = '';
    const schedule = () => {
      if (timer !== null) window.clearTimeout(timer);
      timer = window.setTimeout(() => {
        timer = null;
        const bounds = readBounds(viewport);
        if (!bounds) return;
        const key = `${bounds.x}:${bounds.y}:${bounds.width}:${bounds.height}`;
        if (key === lastBounds) return;
        lastBounds = key;
        void presentAgentBrowser({ projectId, visible: true, bounds })
          .then((next) => {
            if (!cancelled) {
              applySnapshot(next);
              if (browserIsActive(next) && next.visible) presentationRetries.current = 0;
            }
          })
          .catch((cause) => {
            if (!cancelled) {
              if (embedded) {
                if (presentationRetries.current++ < 2) {
                  setSnapshot(null);
                  setPresentationRevision((value) => value + 1);
                  restoreWork();
                } else {
                  setPresentationFailed(true);
                }
              } else setError(cause instanceof Error ? cause.message : '无法显示开发浏览器');
            }
          });
      }, 50);
    };
    const observer = typeof ResizeObserver === 'undefined'
      ? null
      : new ResizeObserver(schedule);
    observer?.observe(viewport);
    window.addEventListener('resize', schedule);
    schedule();
    return () => {
      cancelled = true;
      if (timer !== null) window.clearTimeout(timer);
      observer?.disconnect();
      window.removeEventListener('resize', schedule);
      void presentAgentBrowser({ projectId, visible: false }).catch(() => undefined);
    };
  }, [applySnapshot, browserActive, embedded, occluded, open, presentationRevision, projectId, restoreWork, snapshot?.generation, workPending]);

  useEffect(() => {
    if (embedded || !open || !diagnosticsOpen || !projectId || snapshot?.state !== 'attached') {
      return undefined;
    }
    let cancelled = false;
    void setAgentBrowserDiagnostics({ projectId, enabled: true })
      .then((next) => {
        if (!cancelled) applySnapshot(next);
      })
      .catch(() => undefined);
    return () => {
      cancelled = true;
      void setAgentBrowserDiagnostics({ projectId, enabled: false }).catch(() => undefined);
    };
  }, [applySnapshot, diagnosticsOpen, embedded, open, projectId, snapshot?.browserId, snapshot?.generation, snapshot?.state]);

  useEffect(() => {
    if (embedded || !open || !diagnosticsOpen || !projectId || snapshot?.state !== 'attached') {
      return undefined;
    }
    let cancelled = false;
    let inFlight = false;
    let timer: number | null = null;
    const poll = async () => {
      if (inFlight) return;
      inFlight = true;
      let retryDelay = EVENT_EMPTY_DELAY_MS;
      try {
        const page = await readAgentBrowserEvents({
          projectId,
          after: eventCursorRef.current,
          methods: EVENT_METHODS,
          limit: 200,
          waitMs: EVENT_WAIT_MS,
        });
        if (cancelled) return;
        eventCursorRef.current = page.nextCursor;
        setEvents((current) => {
          const base = page.gap ? [] : current;
          return [...base, ...page.events].slice(-MAX_RENDERED_EVENTS);
        });
        retryDelay = page.events.length > 0 || page.hasMore
          ? EVENT_DRAIN_DELAY_MS
          : EVENT_EMPTY_DELAY_MS;
      } catch {
        // The state event or the next explicit open reports actionable failures.
      } finally {
        inFlight = false;
        if (!cancelled) {
          timer = window.setTimeout(() => {
            timer = null;
            void poll();
          }, retryDelay);
        }
      }
    };
    void poll();
    return () => {
      cancelled = true;
      if (timer !== null) window.clearTimeout(timer);
    };
  }, [diagnosticsOpen, embedded, open, projectId, snapshot?.generation, snapshot?.state]);

  const runBrowserAction = useCallback(async (
    action: () => Promise<AgentBrowserSnapshot>,
  ) => {
    setBusy(true);
    setError(null);
    try {
      applySnapshot(await action());
      presentationRetries.current = 0;
      setPresentationFailed(false);
      showBrowser();
    } catch (cause) {
      if (embedded) {
        setSnapshot(null);
        setPresentationRevision((value) => value + 1);
        restoreWork();
      } else setError(cause instanceof Error ? cause.message : '开发浏览器操作失败');
    } finally {
      setBusy(false);
    }
  }, [applySnapshot, embedded, restoreWork, showBrowser]);

  const handleOpenAddress = useCallback((event?: FormEvent) => {
    event?.preventDefault();
    if (!projectId) return;
    const url = normalizeAddress(address);
    if (!url) return;
    setAddress(url);
    void runBrowserAction(() => browserActive
      ? navigateAgentBrowser({ projectId, action: 'url', url })
      : openAgentBrowser({ projectId, url, bounds: readBounds(viewportRef.current) }));
  }, [address, browserActive, projectId, runBrowserAction]);

  const handleNavigate = useCallback((action: 'back' | 'forward' | 'reload') => {
    if (!projectId || !browserActive) return;
    void runBrowserAction(() => navigateAgentBrowser({ projectId, action }));
  }, [browserActive, projectId, runBrowserAction]);

  if (!open) return null;

  return (
    <aside
      ref={panelRef}
      className={cn(embedded ? 'relative flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden bg-background' : 'relative flex w-[400px] min-w-[300px] max-w-[48vw] shrink-0 flex-col overflow-hidden border-l border-border/80 bg-background shadow-[-16px_0_32px_hsl(220_20%_16%_/_0.06)] max-[900px]:fixed max-[900px]:inset-y-10 max-[900px]:right-0 max-[900px]:z-40 max-[900px]:max-w-[min(92vw,420px)]')}
      data-testid="agent-browser-panel"
      aria-label={embedded ? '作品预览' : '开发浏览器'}
    >
      {!embedded && <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border/70 px-2.5">
        <span className="flex h-6 w-6 items-center justify-center rounded-md bg-brand-soft text-brand">
          <Globe2 className="h-3.5 w-3.5" aria-hidden="true" />
        </span>
        <h2 className="min-w-0 flex-1 truncate text-xs font-semibold">开发浏览器</h2>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className="h-8 w-8 rounded-md text-muted-foreground"
          aria-label="关闭开发浏览器"
          onClick={() => onOpenChange(false)}
        >
          <X className="h-4 w-4" aria-hidden="true" />
        </Button>
      </div>}

      <form className="flex h-10 shrink-0 items-center gap-1 border-b border-border/70 px-2" onSubmit={handleOpenAddress}>
        <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-md" aria-label="后退" disabled={!snapshot?.canGoBack || busy} onClick={() => handleNavigate('back')}>
          <ArrowLeft className="h-3.5 w-3.5" aria-hidden="true" />
        </Button>
        <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-md" aria-label="前进" disabled={!snapshot?.canGoForward || busy} onClick={() => handleNavigate('forward')}>
          <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
        </Button>
        <Button type="button" variant="ghost" size="icon" className="h-7 w-7 rounded-md" aria-label="刷新网页" disabled={!browserActive || busy} onClick={() => handleNavigate('reload')}>
          <RefreshCw className={cn('h-3.5 w-3.5', busy && 'animate-spin')} aria-hidden="true" />
        </Button>
        <input
          ref={addressInputRef}
          value={address}
          onChange={(event) => setAddress(event.target.value)}
          aria-label="网页地址"
          className="h-7 min-w-0 flex-1 rounded-lg border border-border/90 bg-surface-input px-2.5 text-[11px] font-medium outline-none focus:border-brand/40 focus:ring-2 focus:ring-brand/15"
          placeholder={embedded ? '作品打开后会显示地址' : '输入 URL'}
          spellCheck={false}
        />
      </form>

      {error && !workEmpty ? (
        <p role="alert" className="shrink-0 border-b border-destructive/15 bg-destructive/5 px-3 py-2 text-xs text-destructive">
          {error}
        </p>
      ) : null}

      <div
        ref={viewportRef}
        className="relative min-h-[180px] flex-1 bg-surface-tertiary"
        data-testid="agent-browser-viewport"
        aria-label={embedded ? '作品画面' : '开发浏览器页面'}
      >
        {!browserActive || workPending ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-6 text-center text-muted-foreground">
            <span className="flex h-12 w-12 items-center justify-center rounded-xl border border-border/70 bg-background shadow-soft">
              <Globe2 className="h-5 w-5" aria-hidden="true" />
            </span>
            <p role="status" className="text-[13px] font-semibold text-foreground">{embedded
              ? workEmpty ? '还没有作品，快和老师聊聊吧' : presentationFailed ? '作品画面暂时没能显示' : work.result?.status === 'failed' ? '作品还没有打开' : work.result?.status === 'waiting' ? '等当前步骤完成，就帮你打开作品' : '正在打开你的作品…'
              : '开始浏览'}</p>
            {!workEmpty && <p className="text-xs leading-6">{embedded
              ? presentationFailed ? '点“重新打开作品”，接着看你的作品。' : work.result?.message ?? '准备好后，页面会自动出现在这里。'
              : '输入 URL，或等待智能体打开调试页面'}</p>}
            {embedded && <div className="flex gap-2">
              {!workEmpty && (presentationFailed ? <Button variant="outline" size="sm" onClick={retryPresentation}>重新打开作品</Button> : work.result?.status === 'failed' && <Button variant="outline" size="sm" onClick={async () => {
                if (transportFailure || recovery.action === 'check-work' || recovery.action === 'refresh') work.retry();
                else try { await onRecovery?.(recovery.action, true); }
                catch { setError('暂时没能继续，请稍后再点一次。'); }
              }}>{transportFailure ? '再试一次' : recovery.label}</Button>)}
              <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>回到操作对话</Button>
            </div>}
          </div>
        ) : null}
      </div>

      {!embedded && <section
        className="flex shrink-0 flex-col overflow-hidden border-t border-border/80 bg-background"
        style={{ height: diagnosticsOpen ? '240px' : '42px' }}
        data-state={diagnosticsOpen ? 'open' : 'closed'}
        data-testid="agent-browser-diagnostics"
      >
        <div className="flex h-10 shrink-0 items-center justify-between border-b border-border/70 bg-surface-input px-1.5">
          <div className="flex min-w-0 items-center">
            {(['console', 'network'] as const).map((tab) => (
              <button
                key={tab}
                type="button"
                role="tab"
                aria-selected={activeTab === tab}
                className={cn(
                  'h-10 border-b-2 px-2.5 text-[11px] font-medium',
                  activeTab === tab
                    ? 'border-brand text-foreground'
                    : 'border-transparent text-muted-foreground hover:text-foreground',
                )}
                onClick={() => {
                  setActiveTab(tab);
                  setDiagnosticsOpen(true);
                }}
              >
                {tab === 'console'
                  ? `Console ${diagnostics.console.length}`
                  : `Network ${diagnostics.network.length}`}
              </button>
            ))}
          </div>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-8 w-8 rounded-md text-muted-foreground"
            aria-label={diagnosticsOpen ? '收起调试面板' : '展开调试面板'}
            onClick={() => setDiagnosticsOpen((current) => !current)}
          >
            {diagnosticsOpen
              ? <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
              : <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />}
          </Button>
        </div>

        {diagnosticsOpen ? (
          <div className="min-h-0 flex-1 overflow-hidden">
            {activeTab === 'console' ? (
              <div role="log" aria-label="Console 日志" className="h-full overflow-auto font-mono text-[10px] tabular-nums">
                {diagnostics.console.length === 0 ? (
                  <p className="p-3 font-sans text-muted-foreground">暂无 Console 记录</p>
                ) : diagnostics.console.map((entry) => (
                  <div key={entry.id} className={cn('flex gap-2 border-b border-border/60 px-2 py-1.5 leading-4', consoleTone(entry.level))}>
                    <span className="shrink-0 text-muted-foreground">{formatTime(entry.timestamp)}</span>
                    <span className="shrink-0 font-semibold uppercase">{entry.level}</span>
                    <span className="min-w-0 whitespace-pre-wrap break-all">{entry.text || '(empty)'}</span>
                  </div>
                ))}
              </div>
            ) : (
              <div className="h-full overflow-auto" aria-label="Network 请求">
                {diagnostics.network.length === 0 ? (
                  <p className="p-3 text-[10px] text-muted-foreground">暂无 Network 请求</p>
                ) : (
                  <table className="w-full table-fixed text-left font-mono text-[10px] tabular-nums">
                    <thead className="sticky top-0 bg-surface-input">
                      <tr className="border-b border-border/70">
                        <th className="w-12 px-2 py-1.5 font-semibold">方法</th>
                        <th className="w-12 px-1 py-1.5 font-semibold">状态</th>
                        <th className="px-1 py-1.5 font-semibold">地址</th>
                        <th className="w-14 px-2 py-1.5 text-right font-semibold">耗时</th>
                      </tr>
                    </thead>
                    <tbody>
                      {diagnostics.network.map((entry) => (
                        <tr key={`${entry.requestId}:${entry.sequence}`} className="border-b border-border/60">
                          <td className="truncate px-2 py-1.5 font-semibold">{entry.method}</td>
                          <td className={cn('truncate px-1 py-1.5 font-semibold', statusTone(entry.status))}>
                            {entry.errorText ? '失败' : entry.status ?? '…'}
                          </td>
                          <td className="truncate px-1 py-1.5" title={entry.url}>{entry.url}</td>
                          <td className="px-2 py-1.5 text-right">
                            {entry.durationMs === undefined ? '…' : `${Math.round(entry.durationMs)}ms`}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>
            )}
          </div>
        ) : null}
      </section>}
    </aside>
  );
}