320 lines
13 KiB
TypeScript
320 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
|
|
type ProtocolDebugEvent = {
|
|
id: string;
|
|
at: number;
|
|
payload: Record<string, unknown>;
|
|
};
|
|
|
|
type TaskBoundaryDecision = {
|
|
taskType?: string;
|
|
taskMode?: string;
|
|
reason?: string;
|
|
confidence?: number;
|
|
shouldUseCanvasContext?: boolean;
|
|
shouldUseHistoryImages?: boolean;
|
|
shouldUseWorkflowMemory?: boolean;
|
|
shouldAllowExecution?: boolean;
|
|
};
|
|
|
|
type AgentModelSlot = {
|
|
slot?: string;
|
|
modelId?: string;
|
|
displayName?: string;
|
|
providerType?: string;
|
|
providerKey?: string;
|
|
source?: string;
|
|
reason?: string;
|
|
locked?: boolean;
|
|
};
|
|
|
|
type ProviderHealthSnapshot = {
|
|
providerKey?: string;
|
|
providerType?: string;
|
|
lastEventType?: string;
|
|
lastError?: string;
|
|
consecutiveFailures?: number;
|
|
updatedAt?: number;
|
|
};
|
|
|
|
function asRecord(value: unknown): Record<string, unknown> | null {
|
|
return value && typeof value === "object" && !Array.isArray(value)
|
|
? (value as Record<string, unknown>)
|
|
: null;
|
|
}
|
|
|
|
function toTaskBoundaryDecision(value: unknown): TaskBoundaryDecision | null {
|
|
const record = asRecord(value);
|
|
if (!record) return null;
|
|
return {
|
|
taskType: typeof record.taskType === "string" ? record.taskType : undefined,
|
|
taskMode: typeof record.taskMode === "string" ? record.taskMode : undefined,
|
|
reason: typeof record.reason === "string" ? record.reason : undefined,
|
|
confidence:
|
|
typeof record.confidence === "number" && Number.isFinite(record.confidence)
|
|
? record.confidence
|
|
: undefined,
|
|
shouldUseCanvasContext:
|
|
typeof record.shouldUseCanvasContext === "boolean"
|
|
? record.shouldUseCanvasContext
|
|
: undefined,
|
|
shouldUseHistoryImages:
|
|
typeof record.shouldUseHistoryImages === "boolean"
|
|
? record.shouldUseHistoryImages
|
|
: undefined,
|
|
shouldUseWorkflowMemory:
|
|
typeof record.shouldUseWorkflowMemory === "boolean"
|
|
? record.shouldUseWorkflowMemory
|
|
: undefined,
|
|
shouldAllowExecution:
|
|
typeof record.shouldAllowExecution === "boolean"
|
|
? record.shouldAllowExecution
|
|
: undefined,
|
|
};
|
|
}
|
|
|
|
function toAgentModelSlots(value: unknown) {
|
|
const record = asRecord(value);
|
|
if (!record) return [] as AgentModelSlot[];
|
|
|
|
const slots: AgentModelSlot[] = [];
|
|
for (const [slotName, slotValue] of Object.entries(record)) {
|
|
const slotRecord = asRecord(slotValue);
|
|
if (!slotRecord) continue;
|
|
slots.push({
|
|
slot: slotName,
|
|
modelId: typeof slotRecord.modelId === "string" ? slotRecord.modelId : undefined,
|
|
displayName:
|
|
typeof slotRecord.displayName === "string" ? slotRecord.displayName : undefined,
|
|
providerType:
|
|
typeof slotRecord.providerType === "string" ? slotRecord.providerType : undefined,
|
|
providerKey:
|
|
typeof slotRecord.providerKey === "string" ? slotRecord.providerKey : undefined,
|
|
source: typeof slotRecord.source === "string" ? slotRecord.source : undefined,
|
|
reason: typeof slotRecord.reason === "string" ? slotRecord.reason : undefined,
|
|
locked: typeof slotRecord.locked === "boolean" ? slotRecord.locked : undefined,
|
|
});
|
|
}
|
|
return slots;
|
|
}
|
|
|
|
function toProviderHealthSnapshot(value: unknown): ProviderHealthSnapshot | null {
|
|
const record = asRecord(value);
|
|
if (!record) return null;
|
|
return {
|
|
providerKey: typeof record.providerKey === "string" ? record.providerKey : undefined,
|
|
providerType: typeof record.providerType === "string" ? record.providerType : undefined,
|
|
lastEventType:
|
|
typeof record.lastEventType === "string" ? record.lastEventType : undefined,
|
|
lastError: typeof record.lastError === "string" ? record.lastError : undefined,
|
|
consecutiveFailures:
|
|
typeof record.consecutiveFailures === "number" ? record.consecutiveFailures : undefined,
|
|
updatedAt: typeof record.updatedAt === "number" ? record.updatedAt : undefined,
|
|
};
|
|
}
|
|
|
|
export function ProtocolDebugPanel({
|
|
enabled,
|
|
events,
|
|
onClear,
|
|
}: {
|
|
enabled: boolean;
|
|
events: ProtocolDebugEvent[];
|
|
onClear?: () => void;
|
|
}) {
|
|
if (!enabled) return null;
|
|
|
|
const groupedEvents = useMemo(() => {
|
|
const groups = new Map<string, ProtocolDebugEvent[]>();
|
|
for (const event of events) {
|
|
const key = String(event.payload.phase || event.payload.type || "unknown");
|
|
const list = groups.get(key) || [];
|
|
list.push(event);
|
|
groups.set(key, list);
|
|
}
|
|
return Array.from(groups.entries()).map(([phase, items]) => ({
|
|
phase,
|
|
items,
|
|
}));
|
|
}, [events]);
|
|
|
|
const latestTaskBoundary = useMemo(() => {
|
|
for (let index = events.length - 1; index >= 0; index -= 1) {
|
|
const payload = events[index]?.payload;
|
|
const boundary = toTaskBoundaryDecision(payload?.taskBoundary);
|
|
if (boundary?.taskType) return boundary;
|
|
}
|
|
return null;
|
|
}, [events]);
|
|
|
|
const latestModelSlotSummary = useMemo(() => {
|
|
for (let index = events.length - 1; index >= 0; index -= 1) {
|
|
const payload = events[index]?.payload;
|
|
const slots = toAgentModelSlots(payload?.modelSlots);
|
|
if (slots.length > 0) {
|
|
return {
|
|
slots,
|
|
providerHealth: toProviderHealthSnapshot(payload?.providerHealth),
|
|
};
|
|
}
|
|
}
|
|
return null;
|
|
}, [events]);
|
|
|
|
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">
|
|
<div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border/60 bg-background px-3 py-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-md bg-muted px-2 py-1 text-[11px] text-muted-foreground">
|
|
总事件 {events.length}
|
|
</span>
|
|
<span className="rounded-md bg-muted px-2 py-1 text-[11px] text-muted-foreground">
|
|
阶段 {groupedEvents.length}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="rounded-md border border-border px-2 py-1 text-[11px] text-foreground hover:bg-muted"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
onClear?.();
|
|
}}
|
|
>
|
|
清空
|
|
</button>
|
|
</div>
|
|
{(latestTaskBoundary || latestModelSlotSummary) && (
|
|
<div className="grid gap-2 md:grid-cols-2">
|
|
{latestTaskBoundary && (
|
|
<div className="rounded-lg border border-border/60 bg-background px-3 py-2">
|
|
<div className="mb-2 text-[11px] font-medium text-foreground">当前任务边界</div>
|
|
<div className="flex flex-wrap gap-2 text-[11px] text-muted-foreground">
|
|
<span className="rounded-md bg-muted px-2 py-1">
|
|
type: {latestTaskBoundary.taskType || "unknown"}
|
|
</span>
|
|
<span className="rounded-md bg-muted px-2 py-1">
|
|
mode: {latestTaskBoundary.taskMode || "unknown"}
|
|
</span>
|
|
{typeof latestTaskBoundary.confidence === "number" && (
|
|
<span className="rounded-md bg-muted px-2 py-1">
|
|
confidence: {latestTaskBoundary.confidence}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-2 text-[11px] leading-relaxed text-muted-foreground">
|
|
{latestTaskBoundary.reason || "无原因说明"}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
|
|
<span className="rounded-md border border-border px-2 py-1">
|
|
canvas {latestTaskBoundary.shouldUseCanvasContext ? "on" : "off"}
|
|
</span>
|
|
<span className="rounded-md border border-border px-2 py-1">
|
|
history {latestTaskBoundary.shouldUseHistoryImages ? "on" : "off"}
|
|
</span>
|
|
<span className="rounded-md border border-border px-2 py-1">
|
|
workflow {latestTaskBoundary.shouldUseWorkflowMemory ? "on" : "off"}
|
|
</span>
|
|
<span className="rounded-md border border-border px-2 py-1">
|
|
execution {latestTaskBoundary.shouldAllowExecution ? "yes" : "no"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{latestModelSlotSummary && (
|
|
<div className="rounded-lg border border-border/60 bg-background px-3 py-2">
|
|
<div className="mb-2 text-[11px] font-medium text-foreground">当前模型槽位</div>
|
|
<div className="space-y-2">
|
|
{latestModelSlotSummary.slots.map((slot) => (
|
|
<div
|
|
key={`${slot.slot}-${slot.modelId}`}
|
|
className="rounded-md border border-border/60 px-2 py-2"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-md bg-muted px-2 py-1 text-[11px] font-medium text-foreground">
|
|
{slot.slot}
|
|
</span>
|
|
<span className="text-[11px] text-foreground">
|
|
{slot.displayName || slot.modelId || "unknown"}
|
|
</span>
|
|
{slot.locked && (
|
|
<span className="rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground">
|
|
locked
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mt-1 text-[11px] text-muted-foreground">
|
|
provider: {slot.providerType || "unknown"} · source: {slot.source || "unknown"}
|
|
</div>
|
|
{slot.reason && (
|
|
<div className="mt-1 text-[11px] text-muted-foreground">
|
|
reason: {slot.reason}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
{latestModelSlotSummary.providerHealth && (
|
|
<div className="rounded-md border border-border/60 px-2 py-2 text-[11px] text-muted-foreground">
|
|
provider health: {latestModelSlotSummary.providerHealth.lastEventType || "unknown"}
|
|
{typeof latestModelSlotSummary.providerHealth.consecutiveFailures === "number" &&
|
|
` · failures ${latestModelSlotSummary.providerHealth.consecutiveFailures}`}
|
|
{latestModelSlotSummary.providerHealth.providerType &&
|
|
` · ${latestModelSlotSummary.providerHealth.providerType}`}
|
|
{latestModelSlotSummary.providerHealth.lastError && (
|
|
<div className="mt-1 break-words">
|
|
{latestModelSlotSummary.providerHealth.lastError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{events.length === 0 ? (
|
|
<div className="rounded-lg border border-dashed border-border/60 px-3 py-2 text-muted-foreground">
|
|
暂无协议调试事件
|
|
</div>
|
|
) : (
|
|
groupedEvents.map((group) => (
|
|
<details
|
|
key={group.phase}
|
|
className="overflow-hidden rounded-lg border border-border/60 bg-background"
|
|
open
|
|
>
|
|
<summary className="cursor-pointer border-b border-border/60 px-3 py-2 font-medium">
|
|
{group.phase}
|
|
{" · "}
|
|
{group.items.length} 条
|
|
</summary>
|
|
<div className="space-y-2 px-2 py-2">
|
|
{group.items.map((event) => (
|
|
<div
|
|
key={event.id}
|
|
className="overflow-hidden rounded-md border border-border/60"
|
|
>
|
|
<div className="border-b border-border/60 px-3 py-1.5 text-[11px] font-medium text-foreground">
|
|
{new Date(event.at).toLocaleTimeString()}
|
|
</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>
|
|
</details>
|
|
</div>
|
|
);
|
|
}
|