@tonyclaw/llm-inspector 1.14.8 → 1.15.0

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

@@ -1,103 +1,116 @@
-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 = {
-  /** The stop reason extracted from this log entry's response. */
   stopReason: StopReason;
-  /** True when the response is still in-flight (responseStatus === null). */
   isPending: boolean;
-  /** True when this is the first entry in the group. */
   isFirst: boolean;
-  /** True when this is the last entry in the group. */
-  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;
 };
 
 /**
- * Renders the vertical timeline connector on the left side of a log entry
- * in thread view. A continuous line runs through intermediate entries, with:
- * - Line starts from the top for the first entry
- * - Line continues through intermediate entries
- * - Line ends at a turn-boundary dot/cap when stop_reason is end_turn/stop
- * - Dimmed/dashed line for pending (in-flight) entries
- * - A solid dot marks turn boundaries
+ * 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,
+  isTurnStart,
+  crabIndex = 0,
+  collapsible = false,
+  collapsed = false,
+  onToggle,
 }: ThreadConnectorProps): JSX.Element {
-  // Turn boundary: "end_turn" for Anthropic, "stop" for OpenAI
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
-  // Tool use: the turn continues
-  const isToolUse = stopReason === "tool_use";
-
-  // Compute classes for each segment of the connector:
-  // - top half line (from previous entry down to this entry's top)
-  // - center dot/circle (this entry's response marker)
-  // - bottom half line (from this entry's bottom down to the next entry)
-
-  const lineClass = cn(
-    "w-0.5 bg-muted-foreground/30",
-    isPending && "border-dashed bg-transparent border-l-2 border-muted-foreground/20",
-  );
+  const isRunning = isPending && !isBoundary;
+  const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
 
   return (
-    <div className="flex items-stretch h-full w-6 shrink-0 relative">
-      {/* Top line segment */}
-      <div className="absolute left-1/2 -translate-x-1/2 w-0.5 top-0 flex flex-col items-center">
-        {!isFirst && (
-          <div
-            className={cn("w-0.5 grow", "bg-muted-foreground/30", "h-4")}
-            style={{ minHeight: "0.5rem" }}
-          />
-        )}
-        {isFirst && <div className="h-4" />}
+    <div className="flex flex-col items-center w-6 shrink-0">
+      {/* Top: incoming line */}
+      <div className="flex justify-center h-2.5">
+        {!isFirst && <div className="w-0.5 bg-muted-foreground/30" />}
       </div>
 
-      {/* Center marker */}
-      <div className="absolute left-1/2 -translate-x-1/2 top-4 flex items-center justify-center z-10">
+      {/* 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="size-2 rounded-full bg-muted-foreground/25"
-            title="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="size-1.5 rounded-full bg-muted-foreground/30" />
+          <Crab className="size-3.5 text-muted-foreground/40" />
         )}
       </div>
 
-      {/* Bottom line segment */}
-      <div
-        className="absolute left-1/2 -translate-x-1/2 w-0.5 top-4 flex flex-col items-center"
-        style={{ bottom: 0 }}
-      >
-        {!isBoundary && (
+      {/* 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" />
+        ) : (
           <div
             className={cn(
-              "w-0.5 flex-1",
+              "w-0.5 h-full",
               isPending
                 ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
                 : "bg-muted-foreground/30",
             )}
           />
         )}
-        {isBoundary && <div className="w-0.5 h-4 bg-muted-foreground/10" />}
       </div>
     </div>
   );

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>
+  );
+}