@tonyclaw/agent-inspector 2.0.3 → 2.0.5

package/src/components/proxy-viewer/AgentTraceSummary.tsx

@@ -1,28 +1,90 @@
 import { useCallback, useMemo, useState, type JSX } from "react";
-import { AlertTriangle, Brain, Clock, Loader2, MessageSquare, Wrench, Zap } from "lucide-react";
+import {
+  AlertTriangle,
+  Brain,
+  ChevronDown,
+  ChevronRight,
+  CircleCheck,
+  Clock,
+  FileSearch,
+  Loader2,
+  MessageSquare,
+  Pencil,
+  RefreshCw,
+  Save,
+  ShieldCheck,
+  UploadCloud,
+  Wrench,
+  X,
+  XCircle,
+  Zap,
+} from "lucide-react";
 import { z } from "zod";
-import { formatTokens } from "../../lib/utils";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import { formatTimestampRange } from "../../lib/timeDisplay";
+import { cn, formatTokens } from "../../lib/utils";
 import { parseJsonResponse, readApiError } from "../../lib/apiClient";
-import { KnowledgeCandidateSchema, type KnowledgeCandidate } from "../../knowledge/types";
+import {
+  KnowledgeCandidateSchema,
+  type KnowledgeCandidate,
+  type KnowledgeCandidateStatus,
+} from "../../knowledge/types";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
-import { buildTraceSummary } from "./viewerState";
+import { buildTraceSummary, extractToolTraceEvents, type TraceSummary } from "./viewerState";
 
 const CandidateResponseSchema = z.object({
   candidates: z.array(KnowledgeCandidateSchema),
 });
 
+const CandidatePromotionResponseSchema = z.object({
+  candidate: KnowledgeCandidateSchema,
+});
+
+const CandidatePromotionFailureResponseSchema = z.object({
+  error: z.string().optional(),
+  candidate: KnowledgeCandidateSchema.optional(),
+});
+
+const CandidateUpdateResponseSchema = z.object({
+  candidate: KnowledgeCandidateSchema,
+});
+
+type CandidateDraftUpdate = {
+  type: KnowledgeCandidate["type"];
+  title: string;
+  content: string;
+  tags: string[];
+};
+
 type CandidateLoadState =
   | { status: "idle"; error: null }
   | { status: "loading"; error: null }
   | { status: "ready"; error: null }
   | { status: "failed"; error: string };
 
+type TraceInsightKind = "session" | "tool" | "slow" | "failure" | "candidate";
+
+type TraceInsight = {
+  kind: TraceInsightKind;
+  title: string;
+  detail: string;
+  logId: number | null;
+};
+
+const CANDIDATE_STATUS_CLASSES: Record<KnowledgeCandidateStatus, string> = {
+  draft: "border-amber-500/30 bg-amber-500/10 text-amber-500",
+  promoted: "border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
+  failed: "border-destructive/30 bg-destructive/10 text-destructive",
+};
+
 type AgentTraceSummaryProps = {
   logs: CapturedLog[];
   scopeId: string;
   slowResponseThresholdSeconds: number;
+  showRollupMetrics: boolean;
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 function formatElapsed(ms: number | null): string {
@@ -31,60 +93,492 @@ function formatElapsed(ms: number | null): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
-function formatTimeRange(startedAt: string | null, endedAt: string | null): string | null {
+function formatTimeRange(
+  startedAt: string | null,
+  endedAt: string | null,
+  timeDisplayFormat: TimeDisplayFormat,
+): string | null {
   if (startedAt === null || endedAt === null) return null;
-  const format = (iso: string): string =>
-    new Date(iso).toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-    });
-  return `${format(startedAt)} - ${format(endedAt)}`;
+  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
+}
+
+function formatCandidateCount(count: number): string {
+  return `${String(count)} candidate${count === 1 ? "" : "s"}`;
+}
+
+function getLogAnchor(logId: number): string {
+  return `log-${String(logId)}`;
 }
 
-function scrollToLog(logId: number): void {
-  const target = document.getElementById(`log-${String(logId)}`);
+function jumpToLog(logId: number): void {
+  const anchor = getLogAnchor(logId);
+  const target = document.getElementById(anchor);
+  window.history.replaceState(null, "", `#${anchor}`);
   if (!(target instanceof HTMLElement)) return;
   target.scrollIntoView({ block: "center", behavior: "smooth" });
   target.focus({ preventScroll: true });
-  if (target.getAttribute("data-nav-action") === "expand") {
-    target.click();
+}
+
+function firstFailureLog(logs: CapturedLog[]): CapturedLog | null {
+  for (const log of logs) {
+    if (log.responseStatus !== null && log.responseStatus >= 400) return log;
   }
+  return null;
 }
 
-function CandidateList({ candidates }: { candidates: KnowledgeCandidate[] }): JSX.Element | null {
-  if (candidates.length === 0) return null;
+function slowestLog(logs: CapturedLog[]): CapturedLog | null {
+  let current: CapturedLog | null = null;
+  let currentElapsed = -1;
+  for (const log of logs) {
+    if (log.elapsedMs === null) continue;
+    if (log.elapsedMs > currentElapsed) {
+      current = log;
+      currentElapsed = log.elapsedMs;
+    }
+  }
+  return current;
+}
+
+function firstToolLog(logs: CapturedLog[]): CapturedLog | null {
+  for (const log of logs) {
+    if (extractToolTraceEvents(log).length > 0) return log;
+  }
+  return null;
+}
+
+function buildTraceInsights(input: {
+  logs: CapturedLog[];
+  scopeId: string;
+  summary: TraceSummary;
+  candidates: KnowledgeCandidate[];
+}): TraceInsight[] {
+  const insights: TraceInsight[] = [
+    {
+      kind: "session",
+      title: `${String(input.summary.llmCallCount)} LLM call${
+        input.summary.llmCallCount === 1 ? "" : "s"
+      }`,
+      detail: `Scope ${input.scopeId}`,
+      logId: input.logs[0]?.id ?? null,
+    },
+  ];
+
+  const toolLog = firstToolLog(input.logs);
+  if (input.summary.toolCallCount > 0 && toolLog !== null) {
+    insights.push({
+      kind: "tool",
+      title: `${String(input.summary.toolCallCount)} tool call${
+        input.summary.toolCallCount === 1 ? "" : "s"
+      }`,
+      detail: `First tool evidence at #${String(toolLog.id)}`,
+      logId: toolLog.id,
+    });
+  }
+
+  const failure = firstFailureLog(input.logs);
+  if (failure !== null) {
+    insights.push({
+      kind: "failure",
+      title: `Failure #${String(failure.responseStatus)}`,
+      detail: `First failed request is #${String(failure.id)}`,
+      logId: failure.id,
+    });
+  }
+
+  const slowest = slowestLog(input.logs);
+  if (slowest !== null && input.summary.maxElapsedMs !== null) {
+    insights.push({
+      kind: "slow",
+      title: `Slowest ${formatElapsed(input.summary.maxElapsedMs)}`,
+      detail: `Max latency observed at #${String(slowest.id)}`,
+      logId: slowest.id,
+    });
+  }
+
+  if (input.candidates.length > 0) {
+    const draftCount = input.candidates.filter((candidate) => candidate.status === "draft").length;
+    const promotedCount = input.candidates.filter(
+      (candidate) => candidate.status === "promoted",
+    ).length;
+    insights.push({
+      kind: "candidate",
+      title: `${String(input.candidates.length)} memory candidate${
+        input.candidates.length === 1 ? "" : "s"
+      }`,
+      detail: `${String(draftCount)} draft / ${String(promotedCount)} promoted`,
+      logId: input.candidates[0]?.logIds[0] ?? null,
+    });
+  }
+
+  return insights;
+}
+
+function insightIcon(kind: TraceInsightKind): JSX.Element {
+  switch (kind) {
+    case "session":
+      return <MessageSquare className="size-3.5 text-blue-400" />;
+    case "tool":
+      return <Wrench className="size-3.5 text-sky-400/70" />;
+    case "slow":
+      return <Clock className="size-3.5 text-amber-400" />;
+    case "failure":
+      return <XCircle className="size-3.5 text-destructive" />;
+    case "candidate":
+      return <Brain className="size-3.5 text-emerald-400" />;
+  }
+}
+
+function TraceInsights({ insights }: { insights: TraceInsight[] }): JSX.Element | null {
+  if (insights.length === 0) return null;
   return (
-    <div className="mt-2 grid gap-1.5">
-      {candidates.map((candidate) => (
-        <div
-          key={candidate.id}
-          className="rounded-md border border-border/80 bg-background/60 px-2.5 py-2"
+    <div className="mt-2 grid gap-1.5 border-t border-border/70 pt-2 md:grid-cols-2 xl:grid-cols-3">
+      {insights.map((insight) => (
+        <button
+          key={`${insight.kind}-${insight.title}`}
+          type="button"
+          className={cn(
+            "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs",
+            "text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+          onClick={() => {
+            if (insight.logId !== null) jumpToLog(insight.logId);
+          }}
+          disabled={insight.logId === null}
         >
-          <div className="flex min-w-0 items-center gap-2">
-            <Badge variant="outline" className="h-5 px-1.5 text-[10px] font-mono">
-              {candidate.type}
-            </Badge>
-            <span className="min-w-0 flex-1 truncate text-xs font-medium" title={candidate.title}>
-              {candidate.title}
-            </span>
-            <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
-              {candidate.status}
-            </span>
+          {insightIcon(insight.kind)}
+          <span className="min-w-0">
+            <span className="block truncate font-medium text-foreground/90">{insight.title}</span>
+            <span className="block truncate font-mono text-[10px]">{insight.detail}</span>
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function candidateStatusLabel(status: KnowledgeCandidateStatus): string {
+  switch (status) {
+    case "draft":
+      return "Draft";
+    case "promoted":
+      return "Promoted";
+    case "failed":
+      return "Failed";
+  }
+}
+
+function candidatePromoteLabel(candidate: KnowledgeCandidate, promoting: boolean): string {
+  if (promoting) return "Promoting";
+  switch (candidate.status) {
+    case "draft":
+      return "Promote";
+    case "failed":
+      return "Retry";
+    case "promoted":
+      return "Promoted";
+  }
+}
+
+function redactionLabel(candidate: KnowledgeCandidate): string {
+  if (!candidate.redaction.redacted) return "No sensitive pattern matched";
+  return `Redacted ${candidate.redaction.patterns.join(", ")}`;
+}
+
+function previewText(value: string, maxLength: number): string {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) return normalized;
+  return `${normalized.slice(0, maxLength - 3)}...`;
+}
+
+function logRangeLabel(logIds: number[]): string {
+  const first = logIds[0];
+  const last = logIds[logIds.length - 1];
+  if (first === undefined) return "No evidence logs";
+  if (last === undefined || first === last) return `#${String(first)}`;
+  return `#${String(first)}-#${String(last)}`;
+}
+
+function tagsToText(tags: string[]): string {
+  return tags.join(", ");
+}
+
+function textToTags(value: string): string[] {
+  return value
+    .split(",")
+    .map((tag) => tag.trim())
+    .filter((tag) => tag.length > 0);
+}
+
+function CandidateItem({
+  candidate,
+  isPromoting,
+  isUpdating,
+  onPromoteCandidate,
+  onUpdateCandidate,
+}: {
+  candidate: KnowledgeCandidate;
+  isPromoting: boolean;
+  isUpdating: boolean;
+  onPromoteCandidate: (candidateId: string) => void;
+  onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+}): JSX.Element {
+  const [editing, setEditing] = useState(false);
+  const [draftType, setDraftType] = useState<KnowledgeCandidate["type"]>(candidate.type);
+  const [draftTitle, setDraftTitle] = useState(candidate.title);
+  const [draftContent, setDraftContent] = useState(candidate.content);
+  const [draftTags, setDraftTags] = useState(tagsToText(candidate.tags));
+  const [localError, setLocalError] = useState<string | null>(null);
+  const canPromote = candidate.status !== "promoted";
+  const canEdit = candidate.status !== "promoted";
+
+  const resetDraft = useCallback(() => {
+    setDraftType(candidate.type);
+    setDraftTitle(candidate.title);
+    setDraftContent(candidate.content);
+    setDraftTags(tagsToText(candidate.tags));
+    setLocalError(null);
+  }, [candidate.content, candidate.tags, candidate.title, candidate.type]);
+
+  const saveDraft = useCallback(async () => {
+    const title = draftTitle.trim();
+    const content = draftContent.trim();
+    const tags = textToTags(draftTags);
+    if (title.length === 0) {
+      setLocalError("Title is required.");
+      return;
+    }
+    if (content.length === 0) {
+      setLocalError("Content is required.");
+      return;
+    }
+    if (tags.length === 0) {
+      setLocalError("At least one tag is required.");
+      return;
+    }
+    setLocalError(null);
+    const saved = await onUpdateCandidate(candidate.id, {
+      type: draftType,
+      title,
+      content,
+      tags,
+    });
+    if (saved) setEditing(false);
+  }, [candidate.id, draftContent, draftTags, draftTitle, draftType, onUpdateCandidate]);
+
+  if (editing) {
+    return (
+      <div className="rounded-md border border-border/80 bg-background/60 px-2.5 py-2">
+        <div className="grid gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <select
+              value={draftType}
+              disabled={isUpdating}
+              onChange={(event) => {
+                const parsed = KnowledgeCandidateSchema.shape.type.safeParse(
+                  event.currentTarget.value,
+                );
+                if (parsed.success) setDraftType(parsed.data);
+              }}
+              className="h-7 rounded-md border border-input bg-background px-2 text-xs"
+              aria-label="Candidate type"
+            >
+              <option value="episode">episode</option>
+              <option value="procedure">procedure</option>
+              <option value="preference">preference</option>
+              <option value="project-fact">project-fact</option>
+            </select>
+            <input
+              value={draftTitle}
+              disabled={isUpdating}
+              onChange={(event) => setDraftTitle(event.currentTarget.value)}
+              className="h-7 min-w-[220px] flex-1 rounded-md border border-input bg-background px-2 text-xs"
+              aria-label="Candidate title"
+            />
           </div>
-          <div className="mt-1 flex flex-wrap items-center gap-1.5">
-            {candidate.logIds.map((logId) => (
-              <button
-                key={logId}
-                type="button"
-                onClick={() => scrollToLog(logId)}
-                className="rounded border border-border px-1.5 py-0.5 font-mono text-[10px] text-blue-400 transition-colors hover:bg-muted hover:text-blue-300"
-              >
-                #{logId}
-              </button>
-            ))}
+          <textarea
+            value={draftContent}
+            disabled={isUpdating}
+            onChange={(event) => setDraftContent(event.currentTarget.value)}
+            className="min-h-28 rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed"
+            aria-label="Candidate content"
+          />
+          <input
+            value={draftTags}
+            disabled={isUpdating}
+            onChange={(event) => setDraftTags(event.currentTarget.value)}
+            className="h-7 rounded-md border border-input bg-background px-2 text-xs"
+            aria-label="Candidate tags"
+          />
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground">
+              <ShieldCheck className="size-3" />
+              Saving reruns Inspector redaction before promotion.
+            </span>
+            <span className="flex-1" />
+            {localError !== null && (
+              <span className="text-[10px] text-destructive">{localError}</span>
+            )}
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 px-2 text-xs"
+              disabled={isUpdating}
+              onClick={() => {
+                resetDraft();
+                setEditing(false);
+              }}
+            >
+              <X className="size-3.5" />
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 gap-1.5 px-2 text-xs"
+              disabled={isUpdating}
+              onClick={() => {
+                void saveDraft();
+              }}
+            >
+              {isUpdating ? (
+                <RefreshCw className="size-3.5 animate-spin" />
+              ) : (
+                <Save className="size-3.5" />
+              )}
+              Save
+            </Button>
           </div>
         </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border/80 bg-background/60 px-2.5 py-2">
+      <div className="flex min-w-0 items-center gap-2">
+        <Badge variant="outline" className="h-5 px-1.5 text-[10px] font-mono">
+          {candidate.type}
+        </Badge>
+        <span className="min-w-0 flex-1 truncate text-xs font-medium" title={candidate.title}>
+          {candidate.title}
+        </span>
+        <Badge
+          variant="outline"
+          className={cn(
+            "h-5 shrink-0 px-1.5 text-[10px] font-mono",
+            CANDIDATE_STATUS_CLASSES[candidate.status],
+          )}
+        >
+          {candidateStatusLabel(candidate.status)}
+        </Badge>
+      </div>
+      <p
+        className="mt-1 text-[11px] leading-relaxed text-muted-foreground"
+        title={candidate.content}
+      >
+        {previewText(candidate.content, 360)}
+      </p>
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
+        <span className="inline-flex items-center gap-1">
+          <FileSearch className="size-3" />
+          {logRangeLabel(candidate.logIds)}
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <ShieldCheck className="size-3" />
+          {redactionLabel(candidate)}
+        </span>
+        {candidate.status === "promoted" && (
+          <span className="inline-flex items-center gap-1 text-emerald-500">
+            <CircleCheck className="size-3" />
+            {candidate.openClawMemoryId ?? "OpenClaw"}
+          </span>
+        )}
+        {candidate.status === "failed" && candidate.error !== null && (
+          <span className="inline-flex items-center gap-1 text-destructive">
+            <XCircle className="size-3" />
+            {candidate.error}
+          </span>
+        )}
+      </div>
+      <div className="mt-1 flex flex-wrap items-center gap-1.5">
+        {candidate.logIds.map((logId) => (
+          <a
+            key={logId}
+            href={`#${getLogAnchor(logId)}`}
+            onClick={(event) => {
+              event.preventDefault();
+              jumpToLog(logId);
+            }}
+            className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={`Jump to evidence log ${String(logId)}`}
+          >
+            #{logId}
+          </a>
+        ))}
+        <span className="flex-1" />
+        {canEdit && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-6 gap-1.5 px-2 text-[10px]"
+            disabled={isUpdating || isPromoting}
+            onClick={() => setEditing(true)}
+          >
+            <Pencil className="size-3" />
+            Review
+          </Button>
+        )}
+        <Button
+          type="button"
+          variant={canPromote ? "outline" : "ghost"}
+          size="sm"
+          className="h-6 gap-1.5 px-2 text-[10px]"
+          onClick={() => onPromoteCandidate(candidate.id)}
+          disabled={!canPromote || isPromoting || isUpdating}
+        >
+          {isPromoting ? (
+            <RefreshCw className="size-3 animate-spin" />
+          ) : canPromote ? (
+            <UploadCloud className="size-3" />
+          ) : (
+            <CircleCheck className="size-3" />
+          )}
+          {candidatePromoteLabel(candidate, isPromoting)}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function CandidateList({
+  candidates,
+  promotingCandidateIds,
+  updatingCandidateIds,
+  onPromoteCandidate,
+  onUpdateCandidate,
+}: {
+  candidates: KnowledgeCandidate[];
+  promotingCandidateIds: ReadonlySet<string>;
+  updatingCandidateIds: ReadonlySet<string>;
+  onPromoteCandidate: (candidateId: string) => void;
+  onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+}): JSX.Element | null {
+  if (candidates.length === 0) return null;
+  return (
+    <div className="mt-2 grid gap-1.5">
+      {candidates.map((candidate) => (
+        <CandidateItem
+          key={candidate.id}
+          candidate={candidate}
+          isPromoting={promotingCandidateIds.has(candidate.id)}
+          isUpdating={updatingCandidateIds.has(candidate.id)}
+          onPromoteCandidate={onPromoteCandidate}
+          onUpdateCandidate={onUpdateCandidate}
+        />
       ))}
     </div>
   );
@@ -94,19 +588,34 @@ export function AgentTraceSummary({
   logs,
   scopeId,
   slowResponseThresholdSeconds,
+  showRollupMetrics,
+  timeDisplayFormat,
 }: AgentTraceSummaryProps): JSX.Element | null {
   const [candidates, setCandidates] = useState<KnowledgeCandidate[]>([]);
+  const [candidatesExpanded, setCandidatesExpanded] = useState(true);
   const [candidateState, setCandidateState] = useState<CandidateLoadState>({
     status: "idle",
     error: null,
   });
+  const [promotingCandidateIds, setPromotingCandidateIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const [updatingCandidateIds, setUpdatingCandidateIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const hasCandidates = candidates.length > 0;
   const summary = useMemo(
     () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
     [candidates.length, logs, slowResponseThresholdSeconds],
   );
+  const traceInsights = useMemo(
+    () => buildTraceInsights({ logs, scopeId, summary, candidates }),
+    [candidates, logs, scopeId, summary],
+  );
+  const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
   const timeRange = useMemo(
-    () => formatTimeRange(summary.startedAt, summary.endedAt),
-    [summary.endedAt, summary.startedAt],
+    () => formatTimeRange(summary.startedAt, summary.endedAt, timeDisplayFormat),
+    [summary.endedAt, summary.startedAt, timeDisplayFormat],
   );
 
   const createCandidates = useCallback(() => {
@@ -128,7 +637,12 @@ export function AgentTraceSummary({
         }
         const parsed = await parseJsonResponse(response, CandidateResponseSchema);
         setCandidates(parsed.candidates);
-        setCandidateState({ status: "ready", error: null });
+        setCandidatesExpanded(parsed.candidates.length > 0);
+        setCandidateState(
+          parsed.candidates.length > 0
+            ? { status: "ready", error: null }
+            : { status: "failed", error: "No candidate was generated for this trace scope." },
+        );
       } catch (error) {
         setCandidateState({
           status: "failed",
@@ -138,44 +652,159 @@ export function AgentTraceSummary({
     })();
   }, [candidateState.status, logs.length, scopeId]);
 
+  const promoteCandidate = useCallback((candidateId: string) => {
+    setPromotingCandidateIds((current) => {
+      if (current.has(candidateId)) return current;
+      const next = new Set(current);
+      next.add(candidateId);
+      return next;
+    });
+
+    void (async () => {
+      try {
+        const response = await fetch(
+          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}/promote`,
+          { method: "POST" },
+        );
+        const raw: unknown = await response.json().catch(() => null);
+        const parsed = CandidatePromotionResponseSchema.safeParse(raw);
+        if (response.ok && parsed.success) {
+          setCandidates((current) =>
+            current.map((candidate) =>
+              candidate.id === parsed.data.candidate.id ? parsed.data.candidate : candidate,
+            ),
+          );
+          setCandidateState({ status: "ready", error: null });
+          return;
+        }
+
+        const failure = CandidatePromotionFailureResponseSchema.safeParse(raw);
+        if (failure.success && failure.data.candidate !== undefined) {
+          setCandidates((current) =>
+            current.map((candidate) =>
+              candidate.id === failure.data.candidate?.id ? failure.data.candidate : candidate,
+            ),
+          );
+        }
+        setCandidateState({
+          status: "failed",
+          error: failure.success
+            ? (failure.data.error ?? "Candidate promotion failed")
+            : `Candidate promotion failed with ${String(response.status)}`,
+        });
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate promotion failed",
+        });
+      } finally {
+        setPromotingCandidateIds((current) => {
+          const next = new Set(current);
+          next.delete(candidateId);
+          return next;
+        });
+      }
+    })();
+  }, []);
+
+  const updateCandidate = useCallback(
+    async (candidateId: string, update: CandidateDraftUpdate): Promise<boolean> => {
+      setUpdatingCandidateIds((current) => {
+        if (current.has(candidateId)) return current;
+        const next = new Set(current);
+        next.add(candidateId);
+        return next;
+      });
+
+      try {
+        const response = await fetch(
+          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}`,
+          {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(update),
+          },
+        );
+        if (!response.ok) {
+          const message = await readApiError(
+            response,
+            `Candidate update failed with ${String(response.status)}`,
+          );
+          setCandidateState({ status: "failed", error: message });
+          return false;
+        }
+
+        const parsed = await parseJsonResponse(response, CandidateUpdateResponseSchema);
+        setCandidates((current) =>
+          current.map((candidate) =>
+            candidate.id === parsed.candidate.id ? parsed.candidate : candidate,
+          ),
+        );
+        setCandidateState({ status: "ready", error: null });
+        return true;
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate update failed",
+        });
+        return false;
+      } finally {
+        setUpdatingCandidateIds((current) => {
+          const next = new Set(current);
+          next.delete(candidateId);
+          return next;
+        });
+      }
+    },
+    [],
+  );
+
   if (logs.length === 0) return null;
 
   return (
     <section className="mb-2 rounded-lg border border-border bg-muted/10 px-3 py-2">
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs">
-        <span className="inline-flex items-center gap-1.5 font-semibold text-foreground">
-          <MessageSquare className="size-3.5 text-blue-400" />
-          {summary.llmCallCount} LLM
-        </span>
+        {showRollupMetrics && (
+          <span className="inline-flex items-center gap-1.5 font-semibold text-foreground">
+            <MessageSquare className="size-3.5 text-blue-400" />
+            {summary.llmCallCount} LLM
+          </span>
+        )}
         <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-          <Wrench className="size-3.5 text-amber-400" />
+          <Wrench className="size-3.5 text-sky-400/70" />
           {summary.toolCallCount} tools
         </span>
-        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-          <Zap className="size-3.5 text-emerald-400" />
-          <span className="font-mono">
-            {formatTokens(summary.totalInputTokens)} / {formatTokens(summary.totalOutputTokens)}
+        {showRollupMetrics && (
+          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+            <Zap className="size-3.5 text-emerald-400" />
+            <span className="font-mono">
+              {formatTokens(summary.totalInputTokens)} / {formatTokens(summary.totalOutputTokens)}
+            </span>
           </span>
-        </span>
+        )}
         {(summary.totalCacheCreationInputTokens > 0 || summary.totalCacheReadInputTokens > 0) && (
           <span className="inline-flex items-center gap-1.5 text-muted-foreground">
             <Zap className="size-3.5 text-purple-400" />
             <span className="font-mono">
-              +{formatTokens(summary.totalCacheCreationInputTokens)} / ~
+              KV Cache +{formatTokens(summary.totalCacheCreationInputTokens)} / ~
               {formatTokens(summary.totalCacheReadInputTokens)}
             </span>
           </span>
         )}
-        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-          <Clock className="size-3.5" />
-          <span className="font-mono">{formatElapsed(summary.totalElapsedMs)}</span>
-          {summary.maxElapsedMs !== null && (
-            <span className="font-mono text-muted-foreground/70">
-              max {formatElapsed(summary.maxElapsedMs)}
-            </span>
-          )}
-        </span>
-        {timeRange !== null && (
+        {showElapsedSummary && (
+          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+            <Clock className="size-3.5" />
+            {showRollupMetrics && (
+              <span className="font-mono">{formatElapsed(summary.totalElapsedMs)}</span>
+            )}
+            {summary.maxElapsedMs !== null && (
+              <span className="font-mono text-muted-foreground/70">
+                max {formatElapsed(summary.maxElapsedMs)}
+              </span>
+            )}
+          </span>
+        )}
+        {showRollupMetrics && timeRange !== null && (
           <span className="font-mono text-muted-foreground/70">{timeRange}</span>
         )}
         {(summary.failedCallCount > 0 ||
@@ -190,9 +819,11 @@ export function AgentTraceSummary({
           </span>
         )}
         <span className="flex-1" />
-        <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
-          {summary.knowledgeCandidateCount} memory
-        </Badge>
+        {hasCandidates && (
+          <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
+            {formatCandidateCount(summary.knowledgeCandidateCount)}
+          </Badge>
+        )}
         <Button
           type="button"
           variant="outline"
@@ -208,11 +839,39 @@ export function AgentTraceSummary({
           )}
           Candidate
         </Button>
+        {hasCandidates && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground"
+            onClick={() => setCandidatesExpanded((value) => !value)}
+            aria-expanded={candidatesExpanded}
+            aria-label={
+              candidatesExpanded ? "Collapse memory candidates" : "Expand memory candidates"
+            }
+          >
+            {candidatesExpanded ? (
+              <ChevronDown className="size-3.5" />
+            ) : (
+              <ChevronRight className="size-3.5" />
+            )}
+          </Button>
+        )}
       </div>
       {candidateState.status === "failed" && (
         <p className="mt-2 text-xs text-destructive">{candidateState.error}</p>
       )}
-      <CandidateList candidates={candidates} />
+      <TraceInsights insights={traceInsights} />
+      {candidatesExpanded && (
+        <CandidateList
+          candidates={candidates}
+          promotingCandidateIds={promotingCandidateIds}
+          updatingCandidateIds={updatingCandidateIds}
+          onPromoteCandidate={promoteCandidate}
+          onUpdateCandidate={updateCandidate}
+        />
+      )}
     </section>
   );
 }