@tonyclaw/agent-inspector 2.1.15 → 2.1.17

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,7 @@
 import {
   type ChangeEvent,
   type JSX,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -24,8 +25,10 @@ import {
   Download,
   FileJson,
   Gauge,
+  Flag,
   Plus,
   Siren,
+  Timer,
   Trash2,
   Upload,
 } from "lucide-react";
@@ -37,6 +40,7 @@ import { copyTextToClipboard } from "../lib/clipboard";
 import type { InspectorGroupEvidence, InspectorGroupMember } from "../lib/groupContract";
 import type { CaptureMode, TimeDisplayFormat } from "../lib/runtimeConfig";
 import { formatTimestampRange } from "../lib/timeDisplay";
+import { extractStopReason, type StopReason } from "../lib/stopReason";
 import { cn, formatContextWindowTokens, formatTokens } from "../lib/utils";
 import { useProviders } from "../lib/useProviders";
 import packageJson from "../../package.json";
@@ -47,6 +51,7 @@ import { crabVariants } from "./ui/crab-variants";
 import { McpLogo } from "./ui/mcp-logo";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import type { TransientToastInput } from "./ui/transient-toast";
 import { AlertsDialog } from "./alerts/AlertsDialog";
 import { GroupsDialog } from "./groups/GroupsDialog";
 import { SettingsDialog } from "./providers/SettingsDialog";
@@ -54,7 +59,7 @@ import { computeCacheTrends } from "./proxy-viewer/cacheTrend";
 import { LazyCompareDrawer } from "./proxy-viewer/lazy";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 import { ConversationGroupList } from "./proxy-viewer/ConversationGroupList";
-import { buildValidPredecessors } from "./proxy-viewer/viewerState";
+import { buildTurnGroups, buildValidPredecessors } from "./proxy-viewer/viewerState";
 import { useKeyboardNavigation } from "./proxy-viewer/useKeyboardNavigation";
 import { SegmentBar } from "./proxy-viewer/anatomy/SegmentBar";
 import type {
@@ -169,16 +174,34 @@ function getFirstUserAgent(logs: CapturedLog[]): string | null {
 }
 
 type SessionSlateStatus = "rolling" | "clear" | "watch" | "failed";
+type SessionSlateMetricTone = "neutral" | "cool" | "watch" | "danger";
+
+type ConversationLogs = {
+  logs: CapturedLog[];
+};
 
 type SessionSlateStats = {
   status: SessionSlateStatus;
   statusLabel: string;
   modelLabel: string;
+  providerLabel: string;
   requests: number;
+  turns: number;
   failures: number;
+  pending: number;
   slow: number;
+  lengthStops: number;
   timeRange: string | null;
   tokenLabel: string;
+  finishLabel: string;
+  finishDetail: string;
+  finishTone: SessionSlateMetricTone;
+  outcomeLabel: string;
+  outcomeDetail: string;
+  outcomeTone: SessionSlateMetricTone;
+  slowestLabel: string;
+  slowestDetail: string;
+  heaviestDetail: string;
 };
 
 function hasLogFailure(log: CapturedLog): boolean {
@@ -199,25 +222,237 @@ function getModelLabel(logs: readonly CapturedLog[]): string {
   return `${sorted.length} models`;
 }
 
-function buildSessionSlateStats({
+function getProviderLabel(logs: readonly CapturedLog[]): string {
+  const providers = new Set<string>();
+  for (const log of logs) {
+    if (
+      log.providerName !== null &&
+      log.providerName !== undefined &&
+      log.providerName.length > 0
+    ) {
+      providers.add(log.providerName);
+    }
+  }
+  const sorted = [...providers].sort();
+  if (sorted.length === 0) return "Provider unknown";
+  if (sorted.length === 1) return sorted[0] ?? "Provider unknown";
+  return `${sorted.length} providers`;
+}
+
+function formatElapsedMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) {
+    const seconds = ms / 1000;
+    return `${seconds < 10 ? seconds.toFixed(1) : seconds.toFixed(0)}s`;
+  }
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds}s`;
+}
+
+function formatTokenPair(inputTokens: number, outputTokens: number): string {
+  return `${formatTokens(inputTokens)} in / ${formatTokens(outputTokens)} out`;
+}
+
+function countSessionTurns(
+  logs: CapturedLog[],
+  conversationGroups: readonly ConversationLogs[],
+): number {
+  if (logs.length === 0) return 0;
+  if (conversationGroups.length === 0) return buildTurnGroups(logs).length;
+
+  let turns = 0;
+  for (const group of conversationGroups) {
+    turns += buildTurnGroups(group.logs).length;
+  }
+  return turns;
+}
+
+type FinishSummary = {
+  label: string;
+  detail: string;
+  tone: SessionSlateMetricTone;
+};
+
+type SessionOutcomeSummary = {
+  label: string;
+  detail: string;
+  tone: SessionSlateMetricTone;
+};
+
+type FailureSummary = {
+  logNumber: number;
+  status: number | null;
+  error: string | null;
+};
+
+function summarizeFinishReason({
+  stopReason,
+  pending,
+  lastFailureLogNumber,
+}: {
+  stopReason: StopReason;
+  pending: number;
+  lastFailureLogNumber: number | null;
+}): FinishSummary {
+  if (pending > 0) {
+    return {
+      label: "In flight",
+      detail: `${pending} request${pending === 1 ? "" : "s"} pending`,
+      tone: "cool",
+    };
+  }
+
+  if (lastFailureLogNumber !== null && stopReason === null) {
+    return {
+      label: "Error",
+      detail: `Last failed request #${lastFailureLogNumber}`,
+      tone: "danger",
+    };
+  }
+
+  switch (stopReason) {
+    case "end_turn":
+      return { label: "End turn", detail: "Assistant completed the turn", tone: "neutral" };
+    case "stop":
+      return { label: "Stop", detail: "Model reached a stop condition", tone: "neutral" };
+    case "length":
+      return { label: "Output limit", detail: "Turn ended at max output tokens", tone: "watch" };
+    case "tool_use":
+      return { label: "Tool call", detail: "Assistant requested a tool", tone: "cool" };
+    case null:
+      return { label: "Unknown", detail: "No finish reason captured", tone: "neutral" };
+  }
+}
+
+function isClientAbortError(error: string | null): boolean {
+  if (error === null) return false;
+  const lower = error.toLowerCase();
+  return (
+    lower.includes("abort") ||
+    lower.includes("cancel") ||
+    lower.includes("client disconnected") ||
+    lower.includes("stream disconnected") ||
+    lower.includes("connection closed")
+  );
+}
+
+function summarizeSessionOutcome({
+  pending,
+  failures,
+  lengthStops,
+  stopReason,
+  lastFailure,
+}: {
+  pending: number;
+  failures: number;
+  lengthStops: number;
+  stopReason: StopReason;
+  lastFailure: FailureSummary | null;
+}): SessionOutcomeSummary {
+  if (
+    lastFailure !== null &&
+    (lastFailure.status === 499 || isClientAbortError(lastFailure.error))
+  ) {
+    return {
+      label: "Client aborted",
+      detail: `Request #${lastFailure.logNumber} ended before completion`,
+      tone: "watch",
+    };
+  }
+
+  if (pending > 0) {
+    return {
+      label: "In flight",
+      detail: `${pending} request${pending === 1 ? "" : "s"} still running`,
+      tone: "cool",
+    };
+  }
+
+  if (lastFailure !== null && lastFailure.status !== null && lastFailure.status >= 500) {
+    return {
+      label: "Provider error",
+      detail: `Request #${lastFailure.logNumber} returned HTTP ${lastFailure.status}`,
+      tone: "danger",
+    };
+  }
+
+  if (failures > 0 && lastFailure !== null) {
+    return {
+      label: "Failed",
+      detail: `Request #${lastFailure.logNumber} needs attention`,
+      tone: "danger",
+    };
+  }
+
+  if (lengthStops > 0 || stopReason === "length") {
+    return {
+      label: "Output limited",
+      detail: "Model stopped at the output token limit",
+      tone: "watch",
+    };
+  }
+
+  switch (stopReason) {
+    case "end_turn":
+    case "stop":
+      return { label: "Completed", detail: "Assistant completed normally", tone: "neutral" };
+    case "tool_use":
+      return { label: "Tool requested", detail: "Assistant handed off to a tool", tone: "cool" };
+    case null:
+      return { label: "Unknown", detail: "No terminal signal captured", tone: "neutral" };
+  }
+}
+
+export function buildSessionSlateStats({
   logs,
+  conversationGroups,
   isLoading,
   timeDisplayFormat,
   slowResponseThresholdSeconds,
 }: {
   logs: CapturedLog[];
+  conversationGroups: readonly ConversationLogs[];
   isLoading: boolean;
   timeDisplayFormat: TimeDisplayFormat;
   slowResponseThresholdSeconds: number;
 }): SessionSlateStats {
   let failures = 0;
+  let pending = 0;
   let slow = 0;
+  let lengthStops = 0;
   let totalIn = 0;
   let totalOut = 0;
+  let terminalStopReason: StopReason = null;
+  let lastFailureLogNumber: number | null = null;
+  let lastFailure: FailureSummary | null = null;
+  let slowestMs: number | null = null;
+  let slowestLogNumber: number | null = null;
+  let heaviestTokens = 0;
+  let heaviestInputTokens = 0;
+  let heaviestOutputTokens = 0;
+  let heaviestLogNumber: number | null = null;
   const slowThresholdMs = slowResponseThresholdSeconds * 1000;
 
-  for (const log of logs) {
-    if (hasLogFailure(log)) failures += 1;
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === undefined) continue;
+    const logNumber = index + 1;
+    const stopReason = extractStopReason(log);
+    if (stopReason !== null) terminalStopReason = stopReason;
+    if (stopReason === "length") lengthStops += 1;
+
+    if (hasLogFailure(log)) {
+      failures += 1;
+      lastFailureLogNumber = logNumber;
+      lastFailure = {
+        logNumber,
+        status: log.responseStatus,
+        error: log.error ?? null,
+      };
+    }
+    if (log.responseStatus === null) pending += 1;
     if (
       slowResponseThresholdSeconds > 0 &&
       log.elapsedMs !== null &&
@@ -227,15 +462,30 @@ function buildSessionSlateStats({
     }
     if (log.inputTokens !== null) totalIn += log.inputTokens;
     if (log.outputTokens !== null) totalOut += log.outputTokens;
+    if (log.elapsedMs !== null && (slowestMs === null || log.elapsedMs > slowestMs)) {
+      slowestMs = log.elapsedMs;
+      slowestLogNumber = logNumber;
+    }
+
+    const inputTokens = log.inputTokens ?? 0;
+    const outputTokens = log.outputTokens ?? 0;
+    const requestTokens = inputTokens + outputTokens;
+    if (requestTokens > heaviestTokens) {
+      heaviestTokens = requestTokens;
+      heaviestInputTokens = inputTokens;
+      heaviestOutputTokens = outputTokens;
+      heaviestLogNumber = logNumber;
+    }
   }
 
-  const status: SessionSlateStatus = isLoading
-    ? "rolling"
-    : failures > 0
-      ? "failed"
-      : slow > 0
-        ? "watch"
-        : "clear";
+  const status: SessionSlateStatus =
+    isLoading || (pending > 0 && failures === 0)
+      ? "rolling"
+      : failures > 0
+        ? "failed"
+        : slow > 0 || lengthStops > 0
+          ? "watch"
+          : "clear";
   const statusLabel =
     status === "rolling"
       ? "Rolling"
@@ -244,87 +494,169 @@ function buildSessionSlateStats({
         : status === "watch"
           ? "Watch"
           : "Clear";
+  const finish = summarizeFinishReason({
+    stopReason: terminalStopReason,
+    pending,
+    lastFailureLogNumber,
+  });
+  const outcome = summarizeSessionOutcome({
+    pending,
+    failures,
+    lengthStops,
+    stopReason: terminalStopReason,
+    lastFailure,
+  });
 
   return {
     status,
     statusLabel,
     modelLabel: getModelLabel(logs),
+    providerLabel: getProviderLabel(logs),
     requests: logs.length,
+    turns: countSessionTurns(logs, conversationGroups),
     failures,
+    pending,
     slow,
+    lengthStops,
     timeRange: formatTimeRange(logs, timeDisplayFormat),
     tokenLabel: `${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`,
+    finishLabel: finish.label,
+    finishDetail: finish.detail,
+    finishTone: finish.tone,
+    outcomeLabel: outcome.label,
+    outcomeDetail: outcome.detail,
+    outcomeTone: outcome.tone,
+    slowestLabel: slowestMs === null ? "n/a" : formatElapsedMs(slowestMs),
+    slowestDetail: slowestLogNumber === null ? "Latency pending" : `Request #${slowestLogNumber}`,
+    heaviestDetail:
+      heaviestLogNumber === null
+        ? "Tokens pending"
+        : `#${heaviestLogNumber} ${formatTokenPair(heaviestInputTokens, heaviestOutputTokens)}`,
   };
 }
 
-function slateStatusClass(status: SessionSlateStatus): string {
+function slateMetricToneClass(tone: SessionSlateMetricTone): string {
+  switch (tone) {
+    case "cool":
+      return "text-cyan-100";
+    case "danger":
+      return "text-red-100";
+    case "watch":
+      return "text-amber-100";
+    case "neutral":
+      return "text-foreground";
+  }
+}
+
+function statusMetricTone(status: SessionSlateStatus): SessionSlateMetricTone {
   switch (status) {
     case "rolling":
-      return "border-cyan-400/35 bg-cyan-500/10 text-cyan-200";
+      return "cool";
     case "failed":
-      return "border-red-400/35 bg-red-500/10 text-red-100";
+      return "danger";
     case "watch":
-      return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+      return "watch";
     case "clear":
-      return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+      return "neutral";
   }
 }
 
+function requestHealthDetail(stats: SessionSlateStats): string {
+  if (stats.pending > 0) return `${stats.pending} pending / ${stats.failures} failed`;
+  if (stats.lengthStops > 0) return `${stats.lengthStops} output limit / ${stats.failures} failed`;
+  return `${stats.failures} failed / ${stats.slow} slow`;
+}
+
+function SessionSlateMetric({
+  label,
+  value,
+  detail,
+  icon,
+  tone = "neutral",
+}: {
+  label: string;
+  value: string;
+  detail: string;
+  icon?: ReactNode;
+  tone?: SessionSlateMetricTone;
+}): JSX.Element {
+  return (
+    <div className="min-w-0 border-t border-white/10 px-4 py-3">
+      <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
+        {icon}
+        {label}
+      </div>
+      <div className={cn("mt-2 font-mono text-sm font-semibold", slateMetricToneClass(tone))}>
+        {value}
+      </div>
+      <div className="mt-1 font-mono text-[11px] leading-snug text-muted-foreground">{detail}</div>
+    </div>
+  );
+}
+
 function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Element | null {
   if (stats.requests === 0) return null;
 
   return (
-    <div className="mb-4 rounded-md border border-border bg-[#0c0d0f] shadow-[0_14px_50px_rgba(0,0,0,0.25)]">
-      <div className="grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]">
-        <div className="col-span-2 border-b border-border/70 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r">
-          <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
-            <Clapperboard className="size-3.5 text-cyan-300" />
-            Opening Slate
-          </div>
-          <div className="mt-2 min-w-0 truncate font-mono text-sm font-semibold text-foreground">
-            {stats.modelLabel}
-          </div>
-          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-            {stats.timeRange ?? "Timeline pending"}
-          </div>
-        </div>
-        <div className="border-r border-b border-border/70 px-4 py-3 md:border-b-0">
-          <div className="text-[10px] uppercase text-muted-foreground">Status</div>
-          <div
-            className={cn(
-              "mt-2 inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-semibold",
-              slateStatusClass(stats.status),
-            )}
-          >
-            {stats.statusLabel}
-          </div>
-        </div>
-        <div className="border-b border-border/70 px-4 py-3 md:border-b-0 md:border-r">
-          <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
-          <div className="mt-2 font-mono text-xl font-semibold text-foreground">
-            {stats.requests}
-          </div>
-        </div>
-        <div className="border-r border-border/70 px-4 py-3 md:border-r">
-          <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
-            <Siren className="size-3 text-red-300" />
-            Failure
-          </div>
-          <div className="mt-2 font-mono text-xl font-semibold text-red-100">{stats.failures}</div>
-        </div>
-        <div className="px-4 py-3">
-          <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
-            <Gauge className="size-3 text-amber-200" />
-            Tempo
-          </div>
-          <div className="mt-2 font-mono text-sm font-semibold text-foreground">
-            {stats.slow} slow
+    <div className="border border-border bg-card shadow-sm mb-4 overflow-hidden rounded-[8px]">
+      <div className="px-4 py-3">
+        <div className="flex flex-wrap items-end justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
+              <Clapperboard className="size-3.5 text-slate-300" />
+              Flight Recorder
+            </div>
+            <div className="mt-2 min-w-0 font-mono text-sm font-semibold text-foreground">
+              {stats.modelLabel}
+            </div>
           </div>
-          <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-            {stats.tokenLabel}
+          <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
+            <span className="min-w-0 font-mono">{stats.providerLabel}</span>
+            <span className="min-w-0 font-mono">{stats.timeRange ?? "Timeline pending"}</span>
           </div>
         </div>
       </div>
+      <div className="grid grid-cols-2 border-t border-white/10 md:grid-cols-3 2xl:grid-cols-6">
+        <SessionSlateMetric
+          label="Status"
+          value={stats.statusLabel}
+          detail={requestHealthDetail(stats)}
+          tone={statusMetricTone(stats.status)}
+        />
+        <SessionSlateMetric
+          label="Turns"
+          value={String(stats.turns)}
+          detail={stats.finishLabel}
+          icon={<Flag className="size-3 text-muted-foreground" />}
+          tone={stats.finishTone}
+        />
+        <SessionSlateMetric
+          label="Requests"
+          value={String(stats.requests)}
+          detail={`${stats.failures} failed / ${stats.slow} slow`}
+          icon={<Siren className="size-3 text-muted-foreground" />}
+          tone={stats.failures > 0 ? "danger" : "neutral"}
+        />
+        <SessionSlateMetric
+          label="Peak"
+          value={stats.slowestLabel}
+          detail={stats.slowestDetail}
+          icon={<Timer className="size-3 text-muted-foreground" />}
+          tone={stats.slow > 0 ? "watch" : "neutral"}
+        />
+        <SessionSlateMetric
+          label="Tokens"
+          value={stats.tokenLabel}
+          detail={stats.heaviestDetail}
+          icon={<Gauge className="size-3 text-muted-foreground" />}
+        />
+        <SessionSlateMetric
+          label="Outcome"
+          value={stats.outcomeLabel}
+          detail={stats.outcomeDetail}
+          tone={stats.outcomeTone}
+        />
+      </div>
     </div>
   );
 }
@@ -411,7 +743,7 @@ function sessionRiskBarClass(risk: ContextRiskLevel): string {
     case "unknown":
       return "bg-muted-foreground/50";
     case "ok":
-      return "bg-emerald-400";
+      return "bg-cyan-300";
   }
 }
 
@@ -470,7 +802,7 @@ function evidenceChipClass(value: string): string {
     normalized.includes("complete") ||
     normalized.includes("accept")
   ) {
-    return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+    return "border-cyan-300/25 bg-cyan-400/10 text-cyan-100";
   }
   return "border-border/70 bg-background/70 text-muted-foreground";
 }
@@ -513,11 +845,11 @@ function SessionMembershipPanel({
   );
 
   return (
-    <div className="mb-3 overflow-hidden rounded-md border border-border bg-[#0c0d0f] text-xs">
+    <div className="border border-border bg-card shadow-sm mb-3 rounded-[8px] text-xs">
       <button
         type="button"
         onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/30"
+        className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-white/[0.04]"
         aria-expanded={open}
       >
         <div className="min-w-0 flex-1">
@@ -555,7 +887,7 @@ function SessionMembershipPanel({
         )}
       </button>
       {open && (
-        <div className="space-y-2 border-t border-border/70 px-3 py-2">
+        <div className="space-y-2 border-t border-white/10 px-3 py-2">
           {memberships.map((membership) => {
             const member = membership.member;
             const metadataRows = getMemberMetadataRows(member);
@@ -595,7 +927,7 @@ function SessionMembershipPanel({
                     {metadataRows.map((row) => (
                       <div
                         key={row.key}
-                        className="min-w-0 rounded border border-border/60 px-2 py-1"
+                        className="border border-border bg-muted/40 min-w-0 rounded-md px-2 py-1"
                       >
                         <div className="font-mono text-[10px] text-muted-foreground">{row.key}</div>
                         <div
@@ -653,7 +985,7 @@ function LogPaginationButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45"
+      className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45"
       title={title}
     >
       {icon}
@@ -679,8 +1011,8 @@ function LogPaginationBar({
       className={cn(
         "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
         embedded
-          ? "border-t border-border/70 pt-2"
-          : "mb-3 rounded-md border border-border bg-muted/10 px-2",
+          ? "border-t border-white/10 pt-2"
+          : "border border-border bg-card shadow-sm mb-3 rounded-[8px] px-2",
       )}
     >
       <div className="w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1">
@@ -738,7 +1070,7 @@ function sessionRiskClass(risk: ContextRiskLevel): string {
     case "unknown":
       return "text-muted-foreground";
     case "ok":
-      return "text-emerald-300";
+      return "text-cyan-200";
   }
 }
 
@@ -749,7 +1081,7 @@ function sessionHealthClass(level: ContextHealthLevel): string {
     case "optimizable":
       return "border-amber-400/25 bg-amber-400/8 text-amber-100";
     case "ok":
-      return "border-emerald-400/25 bg-emerald-400/8 text-emerald-100";
+      return "border-cyan-300/25 bg-cyan-400/8 text-cyan-100";
   }
 }
 
@@ -812,12 +1144,12 @@ function CopyableCommand({ command }: { command: string }): JSX.Element {
   }, [command]);
 
   return (
-    <div className="inline-flex items-center gap-2 bg-muted rounded-md px-3 py-2">
-      <pre className="text-blue-500 font-mono text-sm m-0">{command}</pre>
+    <div className="border border-border bg-muted/40 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2">
+      <pre className="m-0 overflow-x-auto font-mono text-sm text-cyan-200">{command}</pre>
       <button
         type="button"
         onClick={handleCopy}
-        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 cursor-pointer"
+        className="shrink-0 cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
         aria-label="Copy command"
       >
         {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
@@ -831,8 +1163,8 @@ function McpReadyBadge(): JSX.Element {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <span className="inline-flex h-7 items-center gap-2 rounded-md border border-cyan-400/30 bg-cyan-500/10 px-2.5 font-mono text-[11px] font-medium text-cyan-300 shadow-[0_0_16px_rgba(34,211,238,0.08)]">
-            <span className="size-1.5 rounded-full bg-emerald-300 shadow-[0_0_8px_rgba(110,231,183,0.8)]" />
+          <span className="border border-border bg-muted/40 inline-flex h-7 items-center gap-2 rounded-md px-2.5 font-mono text-[11px] font-medium text-cyan-200">
+            <span className="size-1.5 rounded-full bg-cyan-200 shadow-[0_0_8px_rgba(125,211,252,0.75)]" />
             MCP Ready
             <span className="hidden text-cyan-200/70 sm:inline">/api/mcp</span>
           </span>
@@ -846,6 +1178,40 @@ function McpReadyBadge(): JSX.Element {
   );
 }
 
+function SidebarPanel({
+  label,
+  children,
+  className,
+}: {
+  label: string;
+  children: ReactNode;
+  className?: string;
+}): JSX.Element {
+  return (
+    <section className={cn("border border-border bg-card shadow-sm rounded-[8px]", className)}>
+      <div className="border-b border-white/10 px-3 py-2">
+        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-white/40">
+          {label}
+        </div>
+      </div>
+      <div className="p-3">{children}</div>
+    </section>
+  );
+}
+
+function SidebarMetric({ label, value }: { label: string; value: string | number }): JSX.Element {
+  return (
+    <div className="border border-border bg-muted/40 min-w-0 rounded-md px-2 py-2">
+      <div className="truncate font-mono text-lg font-semibold leading-6 text-slate-100">
+        {value}
+      </div>
+      <div className="mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-white/35">
+        {label}
+      </div>
+    </div>
+  );
+}
+
 const CRAB_VARIANT_COLORS = [
   "text-amber-500",
   "text-rose-500",
@@ -909,7 +1275,7 @@ function BrandHeader({
 }): JSX.Element {
   if (compact) {
     return (
-      <div className="pb-3">
+      <div className="border border-border bg-card shadow-sm rounded-[8px] p-3">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 items-start gap-2">
             <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
@@ -972,7 +1338,7 @@ function SessionContextLogButton({ label, logId }: { label: string; logId: numbe
     <button
       type="button"
       onClick={() => openLogContext(logId)}
-      className="inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+      className="inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
       title={`Open Context for ${formatLogReference(logId)}`}
     >
       {label} {formatLogReference(logId)}
@@ -1009,7 +1375,7 @@ function SessionContextProgressBar({
       title="Open latest Context details"
     >
       <span
-        className="relative block h-2.5 overflow-hidden rounded-full border border-border/70 bg-background transition-colors group-hover:border-foreground/30"
+        className="relative block h-2.5 overflow-hidden rounded-full border border-white/10 bg-black/25 transition-colors group-hover:border-cyan-200/35"
         role="meter"
         aria-label={ariaLabel}
         aria-valuemin={0}
@@ -1044,7 +1410,7 @@ function SessionModelContextRow({ summary }: { summary: SessionModelContextSumma
   };
 
   return (
-    <div className="grid gap-x-4 gap-y-2 border-t border-border/60 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]">
+    <div className="grid gap-x-4 gap-y-2 border-t border-white/10 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]">
       <div className="min-w-0">
         <div className="flex min-w-0 items-center gap-2">
           <button
@@ -1099,7 +1465,7 @@ function SessionModelContextRow({ summary }: { summary: SessionModelContextSumma
                 <TrendIcon
                   className={cn(
                     "size-3",
-                    trend !== null && trend > 0 ? "text-amber-300" : "text-emerald-300",
+                    trend !== null && trend > 0 ? "text-amber-300" : "text-cyan-300",
                   )}
                 />
               )}
@@ -1137,7 +1503,7 @@ function SessionContextSummaryPanel({
 }): JSX.Element | null {
   if (summary.models.length === 0) return null;
   return (
-    <div className="mt-3 border-t border-border/70 pt-2">
+    <div className="mt-3 border-t border-white/10 pt-2">
       <div className="mb-1 flex items-center justify-between gap-2">
         <div className="text-[11px] font-semibold uppercase tracking-normal text-muted-foreground">
           Session Context
@@ -1205,12 +1571,12 @@ function SessionContextBar({
   }, []);
 
   return (
-    <div className="mb-3 rounded-md border border-border bg-muted/15 px-3 py-2 text-xs">
+    <div className="border border-border bg-card shadow-sm mb-3 rounded-[8px] px-3 py-2 text-xs">
       <div className="flex flex-wrap items-center gap-2">
         {showBackLink && (
           <a
             href="/"
-            className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
             aria-label="Back to all sessions"
             title="Back to all sessions"
           >
@@ -1247,7 +1613,7 @@ function SessionContextBar({
           <button
             type="button"
             onClick={() => setDetailsOpen((value) => !value)}
-            className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background/60 px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground"
             aria-expanded={detailsOpen}
             title={detailsOpen ? "Hide context details" : "Show context details"}
           >
@@ -1262,7 +1628,7 @@ function SessionContextBar({
         <button
           type="button"
           onClick={handleCopyLink}
-          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
           aria-label={copied ? "Copied session link" : "Copy session link"}
           title={copied ? "Copied session link" : "Copy session link"}
         >
@@ -1286,6 +1652,8 @@ export type ProxyViewerProps = {
   /** Clear only the logs whose ids are passed. Called by the per-group
    *  Clear button on each conversation header. */
   onClearGroup: (ids: number[]) => void;
+  /** Surface short-lived action feedback without adding sticky page chrome. */
+  onNotify?: (notice: TransientToastInput) => void;
   onImportLogs?: (file: File) => Promise<ImportLogsResponse>;
   viewMode: "simple" | "full";
   captureMode: CaptureMode;
@@ -1319,6 +1687,7 @@ export function ProxyViewer({
   onModelChange,
   onClearAll,
   onClearGroup,
+  onNotify,
   onImportLogs,
   viewMode,
   captureMode,
@@ -1375,13 +1744,17 @@ export function ProxyViewer({
       try {
         const result = await exportLogsAsZip(logs, mode);
         if (!result.ok) {
-          setExportError(result.message);
+          if (onNotify !== undefined) {
+            onNotify({ message: result.message, tone: "error" });
+          } else {
+            setExportError(result.message);
+          }
         }
       } finally {
         setExporting(null);
       }
     },
-    [logs],
+    [logs, onNotify],
   );
   const handleImportClick = useCallback(() => {
     importInputRef.current?.click();
@@ -1399,18 +1772,26 @@ export function ProxyViewer({
       void onImportLogs(file)
         .then((result) => {
           const skipped = result.skipped > 0 ? `, skipped ${String(result.skipped)}` : "";
-          setImportStatus(
-            `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`,
-          );
+          const message = `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`;
+          if (onNotify !== undefined) {
+            onNotify({ message, tone: "success" });
+          } else {
+            setImportStatus(message);
+          }
         })
         .catch((err: unknown) => {
-          setImportError(err instanceof Error ? err.message : "Failed to import logs");
+          const message = err instanceof Error ? err.message : "Failed to import logs";
+          if (onNotify !== undefined) {
+            onNotify({ message, tone: "error" });
+          } else {
+            setImportError(message);
+          }
         })
         .finally(() => {
           setImporting(false);
         });
     },
-    [onImportLogs],
+    [onImportLogs, onNotify],
   );
   // Close the compare drawer when the user changes the session or model
   // filter, since the predecessor relationship may no longer be meaningful.
@@ -1452,11 +1833,12 @@ export function ProxyViewer({
     () =>
       buildSessionSlateStats({
         logs,
+        conversationGroups: groups,
         isLoading,
         timeDisplayFormat,
         slowResponseThresholdSeconds,
       }),
-    [isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat],
+    [groups, isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat],
   );
   const handleCompareWithPrevious = useCallback(
     (log: CapturedLog) => {
@@ -1467,38 +1849,30 @@ export function ProxyViewer({
   );
 
   return (
-    <div className="min-h-screen w-full bg-[#070809] text-foreground">
+    <div className="bg-background min-h-screen w-full text-foreground">
       <div className="grid min-h-screen w-full grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)]">
-        <aside className="border-b border-border bg-[#090a0c] lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r">
+        <aside className="bg-background border-b lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r">
           <div className="space-y-4 p-4">
             <BrandHeader compact={true} crabEntrancePhase={crabEntrancePhase} />
 
-            <div className="grid grid-cols-3 gap-2 border-y border-border/70 py-3">
-              <div className="min-w-0">
-                <div className="font-mono text-lg font-semibold text-foreground">{logs.length}</div>
-                <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
-              </div>
-              <div className="min-w-0">
-                <div className="font-mono text-lg font-semibold text-foreground">
-                  {formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
-                </div>
-                <div className="text-[10px] uppercase text-muted-foreground">Input</div>
-              </div>
-              <div className="min-w-0">
-                <div className="font-mono text-lg font-semibold text-foreground">
-                  {formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
-                </div>
-                <div className="text-[10px] uppercase text-muted-foreground">Output</div>
+            <SidebarPanel label="Session">
+              <div className="grid grid-cols-3 gap-2">
+                <SidebarMetric label="Requests" value={logs.length} />
+                <SidebarMetric
+                  label="Input"
+                  value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
+                />
+                <SidebarMetric
+                  label="Output"
+                  value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
+                />
               </div>
-            </div>
+            </SidebarPanel>
 
-            <div className="space-y-2">
-              <div className="text-[10px] font-semibold uppercase tracking-normal text-muted-foreground">
-                Workspace
-              </div>
-              <div className="rounded-md border border-border bg-[#0c0d0f] px-3 py-2">
+            <SidebarPanel label="Workspace">
+              <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
                 <div
-                  className="font-mono text-xs font-semibold text-purple-300"
+                  className="truncate font-mono text-xs font-semibold text-cyan-100"
                   title={activeScopeLabel}
                 >
                   {activeScopeLabel}
@@ -1507,7 +1881,7 @@ export function ProxyViewer({
                   {isPinnedSessionPage ? "Session workspace" : "Live workspace"}
                 </div>
               </div>
-            </div>
+            </SidebarPanel>
 
             {hasSessionContext && sessionContextScope !== null && (
               <SessionContextBar
@@ -1527,44 +1901,43 @@ export function ProxyViewer({
                 <SessionMembershipPanel memberships={sessionMemberships} />
               )}
 
-            <div className="space-y-2">
-              <div className="text-[10px] font-semibold uppercase tracking-normal text-muted-foreground">
-                Filters
-              </div>
-              {!hideSessionFilter && (
-                <Select value={selectedSession} onValueChange={onSessionChange}>
-                  <SelectTrigger className="h-9 w-full text-xs">
-                    <SelectValue placeholder="All sessions" />
+            <SidebarPanel label="Filters">
+              <div className="space-y-2">
+                {!hideSessionFilter && (
+                  <Select value={selectedSession} onValueChange={onSessionChange}>
+                    <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs">
+                      <SelectValue placeholder="All sessions" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All sessions</SelectItem>
+                      {sessions.map((s) => (
+                        <SelectItem key={s} value={s}>
+                          {truncateSessionId(s)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+                <Select value={selectedModel} onValueChange={onModelChange}>
+                  <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs">
+                    <SelectValue placeholder="All models" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="__all__">All sessions</SelectItem>
-                    {sessions.map((s) => (
-                      <SelectItem key={s} value={s}>
-                        {truncateSessionId(s)}
+                    <SelectItem value="__all__">All models</SelectItem>
+                    {models.map((m) => (
+                      <SelectItem key={m} value={m}>
+                        {m}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-              )}
-              <Select value={selectedModel} onValueChange={onModelChange}>
-                <SelectTrigger className="h-9 w-full text-xs">
-                  <SelectValue placeholder="All models" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__all__">All models</SelectItem>
-                  {models.map((m) => (
-                    <SelectItem key={m} value={m}>
-                      {m}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+              </div>
+            </SidebarPanel>
           </div>
         </aside>
 
         <main className="min-w-0">
-          <div className="sticky top-0 z-30 border-b border-border bg-[#08090b]/95 px-4 py-3 shadow-[0_12px_40px_rgba(0,0,0,0.24)] backdrop-blur lg:px-5">
+          <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-30 border-b px-4 py-3 lg:px-5">
             <div className="flex flex-wrap items-center gap-2">
               <div className="min-w-[180px] flex-1">
                 <div className="text-sm font-semibold text-foreground">Logs</div>
@@ -1585,7 +1958,7 @@ export function ProxyViewer({
                     type="button"
                     onClick={handleImportClick}
                     disabled={importing}
-                    className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                    className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                     title="Import Agent Inspector export"
                   >
                     {importing ? (
@@ -1606,7 +1979,7 @@ export function ProxyViewer({
                     void handleExport("redacted");
                   }}
                   disabled={exporting !== null}
-                  className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Export redacted logs as JSON ZIP"
                 >
                   {exporting === "redacted" ? (
@@ -1626,7 +1999,7 @@ export function ProxyViewer({
                     void handleExport("raw");
                   }}
                   disabled={exporting !== null}
-                  className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Export raw logs without redaction"
                 >
                   {exporting === "raw" ? (
@@ -1642,7 +2015,7 @@ export function ProxyViewer({
               <button
                 type="button"
                 onClick={onClearAll}
-                className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground"
                 title="Clear all logs"
               >
                 <Trash2 className="size-3.5" />
@@ -1650,18 +2023,18 @@ export function ProxyViewer({
               </button>
             </div>
             <LogPaginationBar logs={logs} pagination={pagination} embedded={true} />
-            {exportError !== null && (
+            {onNotify === undefined && exportError !== null && (
               <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                 {exportError}
               </div>
             )}
-            {importError !== null && (
+            {onNotify === undefined && importError !== null && (
               <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                 {importError}
               </div>
             )}
-            {importStatus !== null && importError === null && (
-              <div className="mt-2 rounded-md border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200">
+            {onNotify === undefined && importStatus !== null && importError === null && (
+              <div className="mt-2 rounded-md border border-cyan-400/25 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100">
                 {importStatus}
               </div>
             )}
@@ -1672,7 +2045,7 @@ export function ProxyViewer({
             {logs.length === 0 ? (
               selectedSession !== "__all__" ? (
                 <div className="py-16 text-center text-muted-foreground">
-                  <div className="mx-auto max-w-xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8">
+                  <div className="border border-border bg-card shadow-sm mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8">
                     <p className="text-sm font-medium">
                       {isLoading ? "Loading session data..." : "Session not found"}
                     </p>
@@ -1706,7 +2079,7 @@ export function ProxyViewer({
                 </div>
               ) : (
                 <div className="py-16 text-center text-muted-foreground">
-                  <div className="mx-auto max-w-2xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8">
+                  <div className="border border-border bg-card shadow-sm mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8">
                     <p className="text-sm">No requests captured yet.</p>
                     <div className="flex flex-col items-center gap-2">
                       <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />
@@ -1736,8 +2109,7 @@ export function ProxyViewer({
                     onCompareWithPrevious={handleCompareWithPrevious}
                     comparisonPredecessors={comparisonPredecessors}
                     onClearGroup={onClearGroup}
-                    standalone={groups.length === 1}
-                    hasPinnedSessionContext={hasSessionContext}
+                    defaultExpanded={groups.length === 1}
                     timeDisplayFormat={timeDisplayFormat}
                   />
                 </div>