@tonyclaw/agent-inspector 2.1.17 → 2.1.19

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

@@ -44,13 +44,13 @@ const CATEGORY_LABELS: Record<RequestToolCategory, string> = {
 };
 
 const CATEGORY_CLASSES: Record<RequestToolCategory, string> = {
-  file: "border-blue-400/20 bg-blue-400/5 text-blue-300",
-  shell: "border-teal-400/20 bg-teal-400/5 text-teal-300",
-  browser: "border-cyan-400/20 bg-cyan-400/5 text-cyan-300",
-  web: "border-sky-400/20 bg-sky-400/5 text-sky-300",
-  mcp: "border-violet-400/20 bg-violet-400/5 text-violet-300",
-  code: "border-emerald-400/20 bg-emerald-400/5 text-emerald-300",
-  other: "border-muted-foreground/20 bg-muted/30 text-muted-foreground",
+  file: "border-transparent bg-blue-400/5 text-blue-300",
+  shell: "border-transparent bg-teal-400/5 text-teal-300",
+  browser: "border-transparent bg-cyan-400/5 text-cyan-300",
+  web: "border-transparent bg-sky-400/5 text-sky-300",
+  mcp: "border-transparent bg-violet-400/5 text-violet-300",
+  code: "border-transparent bg-emerald-400/5 text-emerald-300",
+  other: "border-transparent bg-muted/30 text-muted-foreground",
 };
 
 function CategoryIcon({ category }: { category: RequestToolCategory }): JSX.Element {
@@ -101,7 +101,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border border-border bg-card shadow-sm rounded-[8px]">
+      <div className="bg-white/[0.035] rounded-[8px]">
         <div className="flex min-w-0 items-center gap-2 px-2.5 py-2">
           <button
             type="button"
@@ -140,7 +140,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
           </button>
           <button
             type="button"
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={nameCopy.copy}
             aria-label={nameCopy.copied ? "Copied tool name" : "Copy tool name"}
           >
@@ -153,13 +153,13 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
         </div>
         <CollapsibleContent>
           {open && (
-            <div className="space-y-2 border-t border-white/10 bg-white/[0.025] px-2.5 py-2">
+            <div className="space-y-2 bg-white/[0.025] px-2.5 py-2">
               {tool.description !== null && (
                 <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
               )}
               <RequiredParameters names={tool.requiredParameters} />
               {tool.schema !== null && (
-                <ScrollArea className="border border-border bg-card shadow-sm max-h-64 rounded-[8px] p-2">
+                <ScrollArea className="bg-black/[0.16] max-h-64 rounded-[8px] p-2">
                   <Suspense
                     fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
                   >
@@ -203,7 +203,7 @@ export const RequestTools = memo(function RequestTools({
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
 
   return (
-    <section className="border border-border bg-card shadow-sm mb-3 overflow-hidden rounded-[8px]">
+    <section className="bg-black/[0.10] mb-3 overflow-hidden rounded-[8px]">
       <div className="flex min-w-0 flex-wrap items-center gap-2 px-3 py-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <Wrench className="size-4 shrink-0 text-sky-300/80" />
@@ -251,7 +251,7 @@ export const RequestTools = memo(function RequestTools({
         </Button>
       </div>
 
-      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-white/[0.025] px-3 py-2">
+      <div className="flex min-w-0 flex-wrap gap-1.5 bg-white/[0.025] px-3 py-2">
         {previewTools.map((tool) => (
           <Badge
             key={tool.name}
@@ -272,8 +272,8 @@ export const RequestTools = memo(function RequestTools({
       </div>
 
       {expanded && (
-        <div className="space-y-2 border-t border-white/10 bg-black/10 px-3 py-3">
-          <label className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 items-center gap-2 rounded-md px-2 text-xs">
+        <div className="space-y-2 bg-black/10 px-3 py-3">
+          <label className="bg-white/[0.045] hover:bg-white/[0.075] flex h-8 items-center gap-2 rounded-md px-2 text-xs">
             <Search className="size-3.5 shrink-0 text-muted-foreground" />
             <input
               value={query}

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

@@ -1,6 +1,7 @@
-import type { JSX, KeyboardEvent, MouseEvent } from "react";
+import { type JSX, type KeyboardEvent, type MouseEvent, useMemo } from "react";
 import { isTurnBoundary, type StopReason } from "../../lib/stopReason";
 import { cn } from "../../lib/utils";
+import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
   stopReason: StopReason;
@@ -10,13 +11,13 @@ export type ThreadConnectorProps = {
   isTurnStart: boolean;
   /** True when this entry is the turn's only request. */
   isOnlyEntry?: boolean;
-  /** When true the timeline marker is clickable (collapse / expand a turn). */
+  /** Seed for crab variant selection (0-11). */
+  crabIndex?: number;
+  /** When true the crab is clickable (collapse / expand a turn). */
   collapsible?: boolean;
   onToggle?: () => void;
 };
 
-type MarkerTone = "start" | "end" | "fused" | "running" | "idle";
-
 function boundaryTitle(stopReason: StopReason): string {
   switch (stopReason) {
     case "end_turn":
@@ -31,77 +32,8 @@ function boundaryTitle(stopReason: StopReason): string {
   }
 }
 
-function markerTone({
-  isFusedBoundary,
-  isBoundary,
-  isTurnStart,
-  isRunning,
-}: {
-  isFusedBoundary: boolean;
-  isBoundary: boolean;
-  isTurnStart: boolean;
-  isRunning: boolean;
-}): MarkerTone {
-  if (isFusedBoundary) return "fused";
-  if (isBoundary) return "end";
-  if (isTurnStart) return "start";
-  if (isRunning) return "running";
-  return "idle";
-}
-
-function markerClass(tone: MarkerTone, interactive: boolean): string {
-  const base =
-    "inline-flex size-3.5 items-center justify-center rounded-full border transition-colors";
-  const cursor = interactive ? "cursor-pointer hover:border-cyan-200/70 hover:bg-cyan-300/20" : "";
-
-  switch (tone) {
-    case "start":
-      return cn(base, cursor, "border-cyan-300/50 bg-cyan-300/12 text-cyan-200");
-    case "end":
-      return cn(base, cursor, "border-amber-300/55 bg-amber-300/12 text-amber-200");
-    case "fused":
-      return cn(
-        base,
-        cursor,
-        "border-slate-200/50 bg-slate-200/10 text-slate-100 ring-2 ring-cyan-300/15",
-      );
-    case "running":
-      return cn(
-        base,
-        cursor,
-        "border-amber-300/45 bg-amber-300/10 text-amber-200 ring-2 ring-amber-300/10",
-      );
-    case "idle":
-      return cn(base, cursor, "border-muted-foreground/25 bg-muted/30 text-muted-foreground/60");
-  }
-}
-
-function markerInnerClass(tone: MarkerTone): string {
-  switch (tone) {
-    case "running":
-      return "size-1.5 rounded-full bg-current animate-pulse";
-    case "idle":
-      return "size-1 rounded-full bg-current opacity-55";
-    case "start":
-    case "end":
-    case "fused":
-      return "size-1.5 rounded-full bg-current";
-  }
-}
-
-function markerTitle(tone: MarkerTone, stopReason: StopReason): string {
-  switch (tone) {
-    case "start":
-      return "Start of turn";
-    case "end":
-      return boundaryTitle(stopReason);
-    case "fused":
-      return "Single-request turn";
-    case "running":
-      return "Processing";
-    case "idle":
-      return "Request in turn";
-  }
+function crabShellClass(interactive: boolean): string {
+  return interactive ? "cursor-pointer transition-transform hover:scale-110" : "";
 }
 
 export function ThreadConnector({
@@ -110,22 +42,24 @@ export function ThreadConnector({
   isFirst,
   isTurnStart,
   isOnlyEntry = false,
+  crabIndex = 0,
   collapsible = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
   const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
-  const tone = markerTone({ isFusedBoundary, isBoundary, isTurnStart, isRunning });
   const interactive = collapsible && onToggle !== undefined;
+  const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
+  const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
 
-  const handleMarkerClick = (event: MouseEvent<HTMLSpanElement>): void => {
+  const handleCrabClick = (event: MouseEvent<HTMLSpanElement>): void => {
     if (!interactive || onToggle === undefined) return;
     event.stopPropagation();
     onToggle();
   };
 
-  const handleMarkerKeyDown = (event: KeyboardEvent<HTMLSpanElement>): void => {
+  const handleCrabKeyDown = (event: KeyboardEvent<HTMLSpanElement>): void => {
     if (!interactive || onToggle === undefined) return;
     if (event.key !== "Enter" && event.key !== " ") return;
     event.preventDefault();
@@ -135,19 +69,69 @@ export function ThreadConnector({
   return (
     <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
       <div className="flex justify-center h-[calc(0.75rem-8px)]">
-        {!isFirst && <div className="w-0.5 bg-muted-foreground/30 h-full" />}
+        {!isFirst && <div className="w-px bg-muted-foreground/18 h-full" />}
       </div>
 
-      <span
-        role={interactive ? "button" : undefined}
-        tabIndex={interactive ? 0 : undefined}
-        title={markerTitle(tone, stopReason)}
-        className={markerClass(tone, interactive)}
-        onClick={handleMarkerClick}
-        onKeyDown={handleMarkerKeyDown}
-      >
-        <span className={markerInnerClass(tone)} />
-      </span>
+      {isFusedBoundary ? (
+        <span
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          title="Single-request turn"
+          className={crabShellClass(interactive)}
+          onClick={handleCrabClick}
+          onKeyDown={handleCrabKeyDown}
+        >
+          <FusedCrab
+            className={cn(
+              "size-3.5 text-[#80FF00]",
+              "animate-crab-settle",
+              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]",
+            )}
+          />
+        </span>
+      ) : isBoundary ? (
+        <span
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          title={boundaryTitle(stopReason)}
+          className={crabShellClass(interactive)}
+          onClick={handleCrabClick}
+          onKeyDown={handleCrabKeyDown}
+        >
+          <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
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          title="Start of turn"
+          className={crabShellClass(interactive)}
+          onClick={handleCrabClick}
+          onKeyDown={handleCrabKeyDown}
+        >
+          <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>
+      ) : (
+        <span title="Request in turn">
+          <Crab className="size-3.5 text-muted-foreground/40" />
+        </span>
+      )}
 
       <div className="flex-1 flex justify-center min-h-0">
         {!isBoundary && (
@@ -155,8 +139,8 @@ export function ThreadConnector({
             className={cn(
               "w-0.5 h-full",
               isPending
-                ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
-                : "bg-muted-foreground/30",
+                ? "border-dashed bg-transparent border-l border-muted-foreground/14"
+                : "bg-muted-foreground/18",
             )}
           />
         )}

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

@@ -14,7 +14,7 @@ function ToolTraceEventRow({ event }: { event: ToolTraceEvent }): JSX.Element {
   return (
     <div
       key={event.id}
-      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs"
+      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md bg-white/[0.035] px-2.5 py-1.5 text-xs"
     >
       <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
       <span className="font-mono font-semibold text-foreground/80">{event.name}</span>

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

@@ -143,7 +143,7 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, [entries, lastIdx]);
 
-  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
+  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.008]" : "bg-cyan-300/[0.008]";
   const aggregateIsSlow =
     aggregate.maxElapsed !== null &&
     slowResponseThresholdSeconds > 0 &&
@@ -194,10 +194,8 @@ export const TurnGroup = memo(function TurnGroup({
       aria-label={collapsed ? undefined : turnLabel}
       data-nav-id={collapsed ? undefined : `turn-${String(firstLogId)}`}
       className={cn(
-        "rounded-[8px] border transition-[border-color,box-shadow]",
-        isPending
-          ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]"
-          : "border-transparent",
+        "rounded-[8px] transition-[background-color,box-shadow]",
+        isPending ? "bg-amber-300/[0.018] shadow-[0_0_0_1px_rgba(252,211,77,0.035)]" : "",
         !collapsed &&
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
       )}
@@ -226,16 +224,14 @@ export const TurnGroup = memo(function TurnGroup({
 
           <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <span className="size-2 rounded-full border border-cyan-300/45 bg-cyan-300/20" />
+            <span className="size-2 rounded-full bg-cyan-300/45" />
             <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-px bg-muted-foreground/25 h-full" />
+              <div className="w-px bg-muted-foreground/14 h-full" />
             </div>
             <span
               className={cn(
-                "size-2 rounded-full border",
-                isComplete
-                  ? "border-amber-300/45 bg-amber-300/20"
-                  : "border-muted-foreground/30 bg-muted/30",
+                "size-2 rounded-full",
+                isComplete ? "bg-amber-300/45" : "bg-muted-foreground/25",
               )}
             />
           </div>
@@ -244,8 +240,8 @@ export const TurnGroup = memo(function TurnGroup({
           {entries.length > 1 && (
             <div
               className={cn(
-                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
-                "border border-border bg-card shadow-sm transition-colors hover:border-cyan-200/20",
+                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs",
+                "bg-card/80 transition-colors hover:bg-card",
                 bgClass,
               )}
             >
@@ -318,7 +314,7 @@ export const TurnGroup = memo(function TurnGroup({
               <span className="flex-1 min-w-0" />
 
               <span
-                className="border border-input bg-background inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
+                className="bg-white/[0.045] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
                 aria-hidden="true"
               >
                 <ChevronRight className="size-4 shrink-0" />
@@ -349,6 +345,7 @@ export const TurnGroup = memo(function TurnGroup({
                 isFirst={visibleIdx === 0}
                 isTurnStart={isTurnStart}
                 isOnlyEntry={isSingleLog}
+                crabIndex={log.id % 12}
                 collapsible={collapsible && isTurnStart}
                 onToggle={toggleCollapse}
               />