52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
type ProtocolDebugEvent = {
|
|
id: string;
|
|
at: number;
|
|
payload: Record<string, unknown>;
|
|
};
|
|
|
|
export function ProtocolDebugPanel({
|
|
enabled,
|
|
events,
|
|
}: {
|
|
enabled: boolean;
|
|
events: ProtocolDebugEvent[];
|
|
}) {
|
|
if (!enabled) return null;
|
|
|
|
return (
|
|
<div className="mx-auto mt-2 w-full max-w-4xl px-2 md:px-4">
|
|
<details className="rounded-xl border border-border/60 bg-muted/30 p-3 text-xs">
|
|
<summary className="cursor-pointer select-none font-medium text-foreground">
|
|
Protocol Debug
|
|
</summary>
|
|
<div className="mt-3 space-y-2">
|
|
{events.length === 0 ? (
|
|
<div className="rounded-lg border border-dashed border-border/60 px-3 py-2 text-muted-foreground">
|
|
暂无协议调试事件
|
|
</div>
|
|
) : (
|
|
events.map((event) => (
|
|
<div
|
|
key={event.id}
|
|
className="overflow-hidden rounded-lg border border-border/60 bg-background"
|
|
>
|
|
<div className="border-b border-border/60 px-3 py-2 font-medium">
|
|
{new Date(event.at).toLocaleTimeString()}
|
|
{" · "}
|
|
{String(event.payload.phase || event.payload.type || "unknown")}
|
|
</div>
|
|
<pre className="overflow-x-auto px-3 py-2 whitespace-pre-wrap break-words text-[11px] leading-relaxed text-muted-foreground">
|
|
{JSON.stringify(event.payload, null, 2)}
|
|
</pre>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
);
|
|
}
|
|
|