@tonyclaw/llm-inspector 1.14.9 → 1.15.0

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

@@ -1,18 +1,14 @@
-import { useState, memo, useMemo, useEffect } from "react";
+import { useState, memo, useMemo } from "react";
 import type { JSX } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
 import { extractStopReason } from "../../lib/stopReason";
-import { cn } from "../../lib/utils";
 import {
   ConversationHeader,
-  getConversationId,
   getGroupApiFormat,
   hasMixedApiFormat,
   type ConversationGroupData,
-  type ViewMode,
 } from "./ConversationHeader";
-import { LogEntry } from "./LogEntry";
-import { ThreadConnector } from "./ThreadConnector";
+import { TurnGroup } from "./TurnGroup";
 import type { CacheTrendEntry } from "./cacheTrend";
 
 export type ConversationGroupProps = {
@@ -27,8 +23,8 @@ export type ConversationGroupProps = {
   cacheTrends?: Map<number, CacheTrendEntry>;
   /** Callback to open CompareDrawer with a log and its immediate predecessor. */
   onCompareWithPrevious: (log: CapturedLog) => void;
-  /** Default display mode for new groups (from global toggle). */
-  defaultGroupViewMode?: ViewMode;
+  /** When true, skip the group header and render content directly. */
+  standalone?: boolean;
 };
 
 function computeStats(logs: CapturedLog[]): {
@@ -50,23 +46,16 @@ export const ConversationGroup = memo(function ({
   strip,
   cacheTrends,
   onCompareWithPrevious,
-  defaultGroupViewMode = "thread",
+  standalone = false,
 }: ConversationGroupProps): JSX.Element {
-  const [expanded, setExpanded] = useState(false);
-  const [groupViewMode, setGroupViewMode] = useState<ViewMode>(defaultGroupViewMode);
-
-  // Sync local view mode when global toggle changes (it only acts as default on mount otherwise)
-  useEffect(() => {
-    setGroupViewMode(defaultGroupViewMode);
-  }, [defaultGroupViewMode]);
-
+  const [expanded, setExpanded] = useState(standalone);
   const stats = computeStats(group.logs);
   const startTime = group.logs[0]?.timestamp ?? new Date().toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
   const mixed = hasMixedApiFormat(group.logs);
   const isLoading = group.logs.some((log) => log.responseStatus === null);
 
-  // Pre-compute stop reasons for each log — used by ThreadConnector
+  // Pre-compute stop reasons for each log — used by turnIndices
   const stopReasons = useMemo(() => group.logs.map((log) => extractStopReason(log)), [group.logs]);
 
   // Compute turn indices for alternating background colours
@@ -82,6 +71,31 @@ export const ConversationGroup = memo(function ({
     return indices;
   }, [stopReasons]);
 
+  // Group logs into turns for collapsible turn display
+  const turnGroups = useMemo(() => {
+    const groups: { logs: CapturedLog[]; turnIndex: number }[] = [];
+    let currentGroup: CapturedLog[] = [];
+    let currentTurn = 0;
+
+    for (let i = 0; i < group.logs.length; i++) {
+      const turnIdx = turnIndices[i] ?? 0;
+      const log = group.logs[i];
+      if (!log) continue;
+      if (turnIdx !== currentTurn) {
+        if (currentGroup.length > 0) {
+          groups.push({ logs: currentGroup, turnIndex: currentTurn });
+        }
+        currentGroup = [log];
+        currentTurn = turnIdx;
+      } else {
+        currentGroup.push(log);
+      }
+    }
+    if (currentGroup.length > 0) {
+      groups.push({ logs: currentGroup, turnIndex: currentTurn });
+    }
+    return groups;
+  }, [group.logs, turnIndices]);
   const displayId =
     group.conversationId.startsWith("PID:") || group.conversationId.includes("|")
       ? group.conversationId
@@ -91,71 +105,38 @@ export const ConversationGroup = memo(function ({
 
   return (
     <div className="mb-4">
-      <ConversationHeader
-        conversationId={displayId}
-        startTime={startTime}
-        endTime={endTime}
-        totalCalls={group.logs.length}
-        totalInputTokens={stats.totalInputTokens}
-        totalOutputTokens={stats.totalOutputTokens}
-        apiFormat={getGroupApiFormat(group.logs)}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-        hideApiFormat={mixed}
-        isLoading={isLoading}
-        userAgent={group.logs[0]?.userAgent ?? null}
-        viewMode={groupViewMode}
-        onToggleViewMode={() => setGroupViewMode((prev) => (prev === "thread" ? "flat" : "thread"))}
-      />
+      {!standalone && (
+        <ConversationHeader
+          conversationId={displayId}
+          startTime={startTime}
+          endTime={endTime}
+          totalCalls={group.logs.length}
+          totalInputTokens={stats.totalInputTokens}
+          totalOutputTokens={stats.totalOutputTokens}
+          apiFormat={getGroupApiFormat(group.logs)}
+          expanded={expanded}
+          onToggle={() => setExpanded(!expanded)}
+          hideApiFormat={mixed}
+          isLoading={isLoading}
+          userAgent={group.logs[0]?.userAgent ?? null}
+        />
+      )}
 
-      {expanded && groupViewMode === "flat" && (
-        <div className="pl-4 border-l-2 border-muted ml-3">
-          {group.logs.map((log) => (
-            <LogEntry
-              key={log.id}
-              log={log}
+      {expanded && (
+        <div>
+          {turnGroups.map((tg) => (
+            <TurnGroup
+              key={tg.turnIndex}
+              logs={tg.logs}
               viewMode={viewMode}
               strip={strip}
-              cacheTrend={cacheTrends?.get(log.id) ?? null}
-              onCompareWithPrevious={() => onCompareWithPrevious(log)}
+              cacheTrends={cacheTrends}
+              onCompareWithPrevious={onCompareWithPrevious}
+              turnIndex={tg.turnIndex}
             />
           ))}
         </div>
       )}
-
-      {expanded && groupViewMode === "thread" && (
-        <div className="ml-3">
-          {group.logs.map((log, idx) => {
-            const isTurnStart =
-              idx === 0 || stopReasons[idx - 1] === "end_turn" || stopReasons[idx - 1] === "stop";
-            return (
-              <div key={log.id} className="flex items-stretch">
-                <ThreadConnector
-                  stopReason={stopReasons[idx] ?? null}
-                  isPending={log.responseStatus === null}
-                  isFirst={idx === 0}
-                  isLast={idx === group.logs.length - 1}
-                  isTurnStart={isTurnStart}
-                />
-                <div
-                  className={cn(
-                    "flex-1 min-w-0 mb-2 rounded-lg",
-                    (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25",
-                  )}
-                >
-                  <LogEntry
-                    log={log}
-                    viewMode={viewMode}
-                    strip={strip}
-                    cacheTrend={cacheTrends?.get(log.id) ?? null}
-                    onCompareWithPrevious={() => onCompareWithPrevious(log)}
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
     </div>
   );
 });

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

@@ -1,13 +1,4 @@
-import {
-  ChevronDown,
-  ChevronRight,
-  Clock,
-  GitBranch,
-  Loader2,
-  MessageSquare,
-  User,
-  Zap,
-} from "lucide-react";
+import { ChevronDown, ChevronRight, Clock, Loader2, MessageSquare, User, Zap } from "lucide-react";
 import type { JSX } from "react";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
@@ -37,10 +28,6 @@ export type ConversationHeaderProps = {
   /** When true and the group is collapsed, show a spinner instead of the
    * expand chevron to indicate an in-flight request inside the group. */
   isLoading?: boolean;
-  /** Current display mode for this group (flat cards or threaded timeline). */
-  viewMode?: ViewMode;
-  /** Toggle between flat and thread display modes for this group. */
-  onToggleViewMode?: () => void;
   /** User-Agent string from the first log in the group. */
   userAgent?: string | null;
 };
@@ -62,8 +49,6 @@ export function ConversationHeader({
   onToggle,
   hideApiFormat = false,
   isLoading = false,
-  viewMode,
-  onToggleViewMode,
   userAgent,
 }: ConversationHeaderProps): JSX.Element {
   return (
@@ -93,30 +78,6 @@ export function ConversationHeader({
         <ChevronRight className="size-4 text-muted-foreground shrink-0" />
       )}
 
-      {/* Thread/flat view toggle — only shown when expanded */}
-      {expanded && onToggleViewMode !== undefined && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleViewMode();
-          }}
-          className={cn(
-            "px-1.5 py-0.5 rounded text-[10px] font-mono transition-colors shrink-0 cursor-pointer",
-            viewMode === "thread"
-              ? "bg-amber-500/15 text-amber-400 border border-amber-500/30"
-              : "bg-muted text-muted-foreground border border-border hover:text-foreground",
-          )}
-          title={
-            viewMode === "thread"
-              ? "Thread view — click for flat view"
-              : "Flat view — click for thread view"
-          }
-        >
-          <GitBranch className="size-3" />
-        </button>
-      )}
-
       {/* Conversation ID */}
       <span
         className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"

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

@@ -155,7 +155,7 @@ export const LogEntryHeader = memo(function ({
 
       {/* Elapsed time */}
       {log.elapsedMs !== null && (
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+        <span className="hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0">
           <Clock className="size-3" />
           <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
         </span>
@@ -260,7 +260,7 @@ export const LogEntryHeader = memo(function ({
       {/* Origin */}
       {log.origin !== null && (
         <span
-          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
+          className="hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0"
           title={`Origin: ${log.origin}`}
         >
           <Globe className="size-3" />
@@ -275,7 +275,7 @@ export const LogEntryHeader = memo(function ({
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
+              <span className="hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
                 <FileTerminal className="size-3" />
                 {log.clientProjectFolder !== null ? (
                   <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>

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

@@ -1,79 +1,103 @@
-import type { JSX } from "react";
+import { type JSX, useMemo } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import type { StopReason } from "../../lib/stopReason";
+import { getCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
   stopReason: StopReason;
   isPending: boolean;
   isFirst: boolean;
-  isLast: boolean;
   /** True when this entry starts a new turn (first overall, or after end_turn/stop). */
   isTurnStart: boolean;
+  /** Seed for crab variant selection (0-11). */
+  crabIndex?: number;
+  /** When true, the boundary marker is clickable to collapse/expand the turn. */
+  collapsible?: boolean;
+  collapsed?: boolean;
+  onToggle?: () => void;
 };
 
 /**
  * Vertical timeline connector for thread view. Uses flexbox layout (no
  * absolute positioning) so the connector naturally tracks its sibling
  * LogEntry height — no scroll jitter.
+ *
+ * Markers use the CrabLogo. At turn starts the crab is static (amber),
+ * during processing it "crawls" downward with a bounce animation, and
+ * at turn boundaries it stops with a glow.
  */
 export function ThreadConnector({
   stopReason,
   isPending,
   isFirst,
-  isLast: _isLast,
   isTurnStart,
+  crabIndex = 0,
+  collapsible = false,
+  collapsed = false,
+  onToggle,
 }: ThreadConnectorProps): JSX.Element {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
-  const isToolUse = stopReason === "tool_use";
+  const isRunning = isPending && !isBoundary;
+  const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
 
   return (
     <div className="flex flex-col items-center w-6 shrink-0">
-      {/* Top: incoming line from previous entry, or empty spacer for first.
-           Fixed height so the marker stays near the LogEntry header row. */}
-      <div className="flex justify-center h-4">
+      {/* Top: incoming line */}
+      <div className="flex justify-center h-2.5">
         {!isFirst && <div className="w-0.5 bg-muted-foreground/30" />}
       </div>
 
-      {/* Center marker — aligned with the LogEntry header row */}
+      {/* Collapse toggle — sits above the crab, no overlap */}
+      {collapsible && (
+        <button
+          type="button"
+          onClick={onToggle}
+          title={collapsed ? "Expand turn" : "Collapse turn"}
+          className="cursor-pointer flex justify-center py-0.5"
+        >
+          {collapsed ? (
+            <ChevronRight className="size-3 text-muted-foreground hover:text-foreground transition-colors" />
+          ) : (
+            <ChevronDown className="size-3 text-muted-foreground hover:text-foreground transition-colors" />
+          )}
+        </button>
+      )}
+
+      {/* Center marker — CrabLogo */}
       <div className="flex items-center justify-center py-0.5">
         {isBoundary ? (
-          <div
-            className={cn(
-              "size-2.5 rounded-full border-2",
-              "bg-background border-amber-400",
-              "shadow-[0_0_6px_rgba(251,191,36,0.4)]",
-            )}
+          <span
             title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
-          />
-        ) : isToolUse ? (
-          <div
-            className={cn(
-              "size-2 rounded-full",
-              isTurnStart
-                ? "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]"
-                : "bg-muted-foreground/25",
-            )}
-            title={isTurnStart ? "Tool Use — start of turn" : "Tool Use — turn continues"}
-          />
-        ) : isPending ? (
-          <div
-            className="size-2.5 rounded-full border-2 border-dashed border-muted-foreground/30 animate-pulse"
-            title="Response pending"
-          />
+          >
+            <Crab
+              className={cn(
+                "size-3.5 text-amber-400",
+                "animate-crab-settle",
+                "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
+              )}
+            />
+          </span>
+        ) : isTurnStart ? (
+          <span title="Start of turn">
+            <Crab
+              className={cn(
+                "size-3.5 text-emerald-400",
+                "animate-crab-appear",
+                "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+              )}
+            />
+          </span>
+        ) : isRunning ? (
+          <span title="Processing…">
+            <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
+          </span>
         ) : (
-          <div
-            className={cn(
-              "size-1.5 rounded-full",
-              isTurnStart
-                ? "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]"
-                : "bg-muted-foreground/30",
-            )}
-          />
+          <Crab className="size-3.5 text-muted-foreground/40" />
         )}
       </div>
 
-      {/* Bottom: outgoing line to next entry, or short terminator at boundaries.
-           flex-1 fills the remaining height of the LogEntry card. */}
+      {/* Bottom: outgoing line */}
       <div className="flex-1 flex justify-center min-h-1">
         {isBoundary ? (
           <div className="w-0.5 bg-muted-foreground/10 h-4" />

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

@@ -0,0 +1,83 @@
+import { useState, useMemo, type JSX, useCallback } from "react";
+import type { CapturedLog } from "../../proxy/schemas";
+import { cn } from "../../lib/utils";
+import { extractStopReason, isTurnBoundary } from "../../lib/stopReason";
+import { LogEntry } from "./LogEntry";
+import { ThreadConnector } from "./ThreadConnector";
+import type { CacheTrendEntry } from "./cacheTrend";
+
+type TurnGroupProps = {
+  logs: CapturedLog[];
+  viewMode: "simple" | "full";
+  strip: boolean;
+  cacheTrends?: Map<number, CacheTrendEntry>;
+  onCompareWithPrevious: (log: CapturedLog) => void;
+  /** Turn index for alternating background colours. */
+  turnIndex?: number;
+};
+
+export function TurnGroup({
+  logs,
+  viewMode,
+  strip,
+  cacheTrends,
+  onCompareWithPrevious,
+  turnIndex = 0,
+}: TurnGroupProps): JSX.Element {
+  const stopReasons = useMemo(() => logs.map((l) => extractStopReason(l)), [logs]);
+  const lastIdx = logs.length - 1;
+  const lastStop = stopReasons[lastIdx] ?? null;
+  const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
+  const isPending = logs[lastIdx]?.responseStatus === null;
+  const collapsible = isComplete && !isPending;
+  const [collapsed, setCollapsed] = useState(false);
+
+  const toggleCollapse = useCallback(() => {
+    if (collapsible) setCollapsed((prev) => !prev);
+  }, [collapsible]);
+
+  // When collapsed, only show the boundary entry
+  const visibleLogs = useMemo(() => {
+    if (!collapsed) return logs;
+    const last = logs[lastIdx];
+    return last !== undefined ? [last] : [];
+  }, [logs, collapsed, lastIdx]);
+
+  const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+
+  return (
+    <div
+      className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
+    >
+      {visibleLogs.map((log, visibleIdx) => {
+        const originalIdx = collapsed ? lastIdx : visibleIdx;
+        const reason = stopReasons[originalIdx] ?? null;
+        const isBoundary = reason === "end_turn" || reason === "stop";
+
+        return (
+          <div key={log.id} className="flex items-stretch">
+            <ThreadConnector
+              stopReason={reason}
+              isPending={log.responseStatus === null}
+              isFirst={originalIdx === 0}
+              isTurnStart={originalIdx === 0}
+              crabIndex={log.id % 12}
+              collapsible={collapsible && isBoundary && logs.length > 1}
+              collapsed={collapsed}
+              onToggle={toggleCollapse}
+            />
+            <div className={cn("flex-1 min-w-0 mb-2 rounded-lg", bgClass)}>
+              <LogEntry
+                log={log}
+                viewMode={viewMode}
+                strip={strip}
+                cacheTrend={cacheTrends?.get(log.id) ?? null}
+                onCompareWithPrevious={() => onCompareWithPrevious(log)}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}