@tonyclaw/agent-inspector 2.1.14 → 2.1.16

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

@@ -34,7 +34,7 @@ import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/
 import type { CacheTrend } from "./cacheTrend";
 
 const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
-  success: "bg-emerald-400/[0.08] text-emerald-200 border-emerald-300/25",
+  success: "bg-slate-300/[0.08] text-slate-100 border-slate-300/20",
   client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
   server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
   pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25",
@@ -45,36 +45,31 @@ const STATUS_CUE_CLASSES: Record<
   {
     frame: string;
     dot: string;
-    rail: string;
   }
 > = {
   success: {
-    frame: "border-emerald-300/20 bg-emerald-300/[0.06] text-emerald-100",
-    dot: "bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,0.8)]",
-    rail: "bg-emerald-300/45 shadow-[0_0_22px_rgba(110,231,183,0.28)]",
+    frame: "border-cyan-200/15 bg-white/[0.04] text-slate-100",
+    dot: "bg-cyan-200/80 shadow-[0_0_14px_rgba(125,211,252,0.65)]",
   },
   client_error: {
     frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
     dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
-    rail: "bg-amber-300/50 shadow-[0_0_22px_rgba(252,211,77,0.28)]",
   },
   server_error: {
     frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
     dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
-    rail: "bg-rose-300/50 shadow-[0_0_22px_rgba(253,164,175,0.28)]",
   },
   pending: {
     frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
     dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
-    rail: "bg-cyan-300/50 shadow-[0_0_22px_rgba(103,232,249,0.28)]",
   },
 };
 
 const HEADER_ACTION_BUTTON_CLASS =
-  "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
+  "border border-input bg-background hover:bg-accent hover:text-accent-foreground size-8 text-muted-foreground shadow-none hover:text-cyan-100";
 
 const TELEMETRY_CHIP_CLASS =
-  "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]";
+  "border border-border bg-muted/40 flex h-7 items-center gap-1 rounded-md px-2 text-xs";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -100,7 +95,7 @@ function statusCueLabel(category: StatusCategory, status: number | null): string
 }
 
 /**
- * Inline trend indicator: small arrow (green up / red down) plus the absolute
+ * Inline trend indicator: small arrow (up / down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
  */
 function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Element | null {
@@ -110,7 +105,7 @@ function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Eleme
   const sign = isUp ? "+" : "-";
   return (
     <span className="flex items-center gap-0.5 text-muted-foreground tabular-nums">
-      <Icon className={isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400"} />
+      <Icon className={isUp ? "size-3 text-cyan-300" : "size-3 text-rose-400"} />
       <span className="font-mono">
         {sign}
         {formatTokens(trend.delta)}
@@ -121,12 +116,12 @@ function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Eleme
 
 /**
  * Per-tab action bundle surfaced in the header when the tab is active.
- * - `copyText === null` → Copy button hidden (e.g. tab has no body to copy)
- * - `expansion === null` → Expand-all button hidden (e.g. flat dict, or
+ * - `copyText === null` - Copy button hidden (e.g. tab has no body to copy)
+ * - `expansion === null` - Expand-all button hidden (e.g. flat dict, or
  *   not valid JSON). When present, the button reflects the JSON viewer's
  *   bulk-expansion state and the caller is responsible for forwarding the
  *   matching `bulkDepth` / `bulkRevision` to the underlying viewer.
- * - `diffWithRaw` / `diffWithPrevious` → optional Diff buttons. Undefined
+ * - `diffWithRaw` / `diffWithPrevious` - optional Diff buttons. Undefined
  *   means "not applicable" (hidden). Today only the Request tab sets them.
  */
 export type HeaderTabAction = {
@@ -155,6 +150,8 @@ export type HeaderTabActions = Record<string, HeaderTabAction | undefined>;
 
 export type LogEntryHeaderProps = {
   log: CapturedLog;
+  /** Human-facing ordinal inside the current session. Internal actions still use `log.id`. */
+  displayNumber: number;
   /** Number of messages in the request (supports both Anthropic and OpenAI formats). */
   messageCount?: number | null;
   /** Number of tools defined in the request (supports both Anthropic and OpenAI formats). */
@@ -178,12 +175,15 @@ export type LogEntryHeaderProps = {
   onReplay?: () => void;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds?: number;
+  /** Show client PID/project metadata on each log row. Parent process rows can disable this. */
+  showClientMetadata?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
 };
 
 export const LogEntryHeader = memo(function ({
   log,
+  displayNumber,
   messageCount = null,
   toolCount = null,
   expanded,
@@ -193,6 +193,7 @@ export const LogEntryHeader = memo(function ({
   tabActions,
   onReplay,
   slowResponseThresholdSeconds = 0,
+  showClientMetadata = true,
   timeDisplayFormat,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -229,9 +230,9 @@ export const LogEntryHeader = memo(function ({
         className={cn(
           "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
           expanded
-            ? "bg-[linear-gradient(90deg,#0f1720_0%,#090d12_50%,#07090d_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"
-            : "bg-[#080b10] hover:bg-[#0b1016]",
-          "select-none before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/10",
+            ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]"
+            : "bg-transparent hover:bg-white/[0.035]",
+          "select-none before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-white/12",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
@@ -242,40 +243,28 @@ export const LogEntryHeader = memo(function ({
           }
         }}
       >
-        <span
-          className={cn(
-            "absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full transition-colors",
-            statusCue.rail,
-          )}
-          aria-hidden="true"
-        />
         {/* Request ID */}
         <span
           className={cn(
-            "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-2 font-mono shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+            "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
             statusCue.frame,
           )}
         >
           <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
-          <span className="text-[9px] font-semibold uppercase tracking-normal text-current/65">
-            Shot
+          <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
+            #{displayNumber}
           </span>
-          <span className="text-xs font-semibold tabular-nums">#{log.id}</span>
         </span>
 
         {/* Request start time */}
-        <span className="flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-muted-foreground text-xs shrink-0">
+        <span className="border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground">
           <Clock className="size-3" />
           <span className="font-mono tabular-nums" title={log.timestamp}>
             {formatTimestamp(log.timestamp, timeDisplayFormat)}
           </span>
         </span>
 
-        {/* Model logo moved to the session/conversation header — per-log rows
-            no longer render the logo (sessions with many logs would show the
-            same provider logo dozens of times). */}
-
-        {/* Response Status — only shown for non-200 or pending. Each category
+        {/* Response Status - only shown for non-200 or pending. Each category
             carries a distinct icon in addition to color so the meaning is
             legible without color perception. */}
         <Badge
@@ -317,7 +306,7 @@ export const LogEntryHeader = memo(function ({
         )}
 
         {/* Elapsed time. Tooltip is only shown when this log exceeded the slow-
-            response threshold — for normal-speed logs the elapsed value is
+            response threshold - for normal-speed logs the elapsed value is
             self-explanatory, so we skip the tooltip wrapper to keep the row
             quiet. */}
         {log.elapsedMs !== null &&
@@ -362,7 +351,7 @@ export const LogEntryHeader = memo(function ({
         {log.streaming && tokenRateLabel !== null && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-emerald-300")}>
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
                 <Gauge className="size-3" />
                 <span className="font-mono tabular-nums">{tokenRateLabel}</span>
               </span>
@@ -382,7 +371,7 @@ export const LogEntryHeader = memo(function ({
                   log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
                 )}
               >
-                IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"}
+                IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"}
               </span>
               <span className="text-muted-foreground">/</span>
               <span
@@ -391,7 +380,7 @@ export const LogEntryHeader = memo(function ({
                   log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
                 )}
               >
-                OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"}
+                OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"}
               </span>
             </span>
           </span>
@@ -400,7 +389,7 @@ export const LogEntryHeader = memo(function ({
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
           <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
             <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
-            <span className="font-mono tabular-nums text-emerald-400">
+            <span className="font-mono tabular-nums text-cyan-300">
               KV Cache +{formatTokens(log.cacheCreationInputTokens)}
             </span>
           </span>
@@ -444,7 +433,7 @@ export const LogEntryHeader = memo(function ({
         )}
 
         {/* Client info (PID + project folder) */}
-        {(hasClientPid || hasClientProjectFolder) && (
+        {showClientMetadata && (hasClientPid || hasClientProjectFolder) && (
           <Tooltip>
             <TooltipTrigger asChild>
               <span className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}>
@@ -477,7 +466,7 @@ export const LogEntryHeader = memo(function ({
         {/* Spacer */}
         <span className="flex-1 min-w-0" />
 
-        {/* Header actions — only when expanded, so the collapsed view stays
+        {/* Header actions - only when expanded, so the collapsed view stays
             compact. Buttons stop propagation so they don't toggle the log. */}
         {expanded && (
           <span
@@ -576,7 +565,7 @@ export const LogEntryHeader = memo(function ({
                             aria-label={action.copyCopied ? "Copied" : action.copyLabel}
                           >
                             {action.copyCopied ? (
-                              <Check className="size-3.5 text-emerald-500" />
+                              <Check className="size-3.5 text-cyan-300" />
                             ) : (
                               <Copy className="size-3.5" />
                             )}
@@ -609,12 +598,16 @@ export const LogEntryHeader = memo(function ({
           </span>
         )}
 
-        {/* Expand chevron */}
-        {expanded ? (
-          <ChevronDown className="size-4 text-muted-foreground shrink-0" />
-        ) : (
-          <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-        )}
+        <span
+          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-slate-200"
+          aria-hidden="true"
+        >
+          {expanded ? (
+            <ChevronDown className="size-4 shrink-0" />
+          ) : (
+            <ChevronRight className="size-4 shrink-0" />
+          )}
+        </span>
       </div>
     </TooltipProvider>
   );

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

@@ -0,0 +1,60 @@
+import type { JSX } from "react";
+import { cn } from "../../lib/utils";
+import { ProviderLogo, type Provider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+
+const MAX_VISIBLE_LOGOS = 3;
+
+export const ROW_CHEVRON_SLOT_CLASS =
+  "flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground";
+
+export type ProviderLogoStackItem = {
+  provider: Provider;
+  tooltip: string;
+};
+
+export function ProviderLogoStack({
+  items,
+  ariaLabel,
+  className,
+}: {
+  items: readonly ProviderLogoStackItem[];
+  ariaLabel: string;
+  className?: string;
+}): JSX.Element {
+  if (items.length === 0) {
+    return (
+      <span className={cn("flex h-8 w-12 shrink-0 items-center", className)} aria-hidden="true" />
+    );
+  }
+
+  const visibleItems = items.slice(0, MAX_VISIBLE_LOGOS);
+  const overflowCount = items.length - visibleItems.length;
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <span className={cn("flex h-8 w-12 shrink-0 items-center", className)} aria-label={ariaLabel}>
+        {visibleItems.map((item, index) => (
+          <Tooltip key={`${item.provider}-${String(index)}`}>
+            <TooltipTrigger asChild>
+              <span
+                className={cn(
+                  "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md",
+                  index > 0 && "-ml-2",
+                )}
+              >
+                <ProviderLogo provider={item.provider} className="size-4" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{item.tooltip}</TooltipContent>
+          </Tooltip>
+        ))}
+        {overflowCount > 0 && (
+          <span className="border border-border bg-muted/40 -ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md px-1 font-mono text-[10px] text-muted-foreground">
+            +{overflowCount}
+          </span>
+        )}
+      </span>
+    </TooltipProvider>
+  );
+}

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

@@ -35,6 +35,7 @@ type ReplayResult = z.infer<typeof ReplayResultSchema>;
 
 type ReplayDialogProps = {
   log: CapturedLog;
+  displayNumber: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 };
@@ -159,7 +160,12 @@ function ReplayComparisonTable({
   );
 }
 
-export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JSX.Element {
+export function ReplayDialog({
+  log,
+  displayNumber,
+  open,
+  onOpenChange,
+}: ReplayDialogProps): JSX.Element {
   const { providers } = useProviders();
   const originalBody = log.rawRequestBody ?? "{}";
   const [modifiedBody, setModifiedBody] = useState<string>(() => {
@@ -310,7 +316,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <RotateCcw className="size-4" />
-            Replay Request #{log.id}
+            <span title={`Log ID ${String(log.id)}`}>Replay Request #{displayNumber}</span>
           </DialogTitle>
         </DialogHeader>
 

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

@@ -101,7 +101,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
+      <div className="border border-border bg-card shadow-sm 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="inline-flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            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"
             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.02] px-2.5 py-2">
+            <div className="space-y-2 border-t border-white/10 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="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
+                <ScrollArea className="border border-border bg-card shadow-sm 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="mb-3 overflow-hidden rounded-md border border-white/10 bg-[#080b0f] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
+    <section className="border border-border bg-card shadow-sm 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" />
@@ -242,7 +242,7 @@ export const RequestTools = memo(function RequestTools({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-7 border border-white/10 bg-black/20 px-2 text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100"
+          className="h-7 px-2 text-muted-foreground hover:text-cyan-100"
           onClick={() => setExpanded((value) => !value)}
           aria-expanded={expanded}
         >
@@ -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-black/10 px-3 py-2">
+      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 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/15 px-3 py-3">
-          <label className="flex h-8 items-center gap-2 rounded-md border border-white/10 bg-[#06080b] px-2 text-xs">
+        <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">
             <Search className="size-3.5 shrink-0 text-muted-foreground" />
             <input
               value={query}

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

@@ -1,6 +1,6 @@
 import { type JSX, useMemo } from "react";
 import { cn } from "../../lib/utils";
-import type { StopReason } from "../../lib/stopReason";
+import { isTurnBoundary, type StopReason } from "../../lib/stopReason";
 import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
@@ -18,10 +18,24 @@ export type ThreadConnectorProps = {
   onToggle?: () => void;
 };
 
+function boundaryTitle(stopReason: StopReason): string {
+  switch (stopReason) {
+    case "end_turn":
+      return "End of Turn (Anthropic)";
+    case "stop":
+      return "End of Turn (OpenAI)";
+    case "length":
+      return "End of Turn (length limit)";
+    case "tool_use":
+    case null:
+      return "End of Turn";
+  }
+}
+
 /**
  * Vertical timeline connector.  Top spacer uses a calc() that
  * mixes rem (py-1 + half-line) and px (border) so the crab
- * centre-line matches the LogEntry `#id` index regardless of the
+ * centre-line matches the LogEntry display number regardless of the
  * root font-size.  The bottom spacer is flex-1 so the outgoing
  * line adapts to whatever height the LogEntry occupies.
  */
@@ -35,7 +49,7 @@ export function ThreadConnector({
   collapsible = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
-  const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
   const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
@@ -77,17 +91,14 @@ export function ThreadConnector({
         <span title="Start and end of turn">
           <FusedCrab
             className={cn(
-              "size-3.5 text-[#80FF00]",
+              "size-3.5 text-cyan-300/90",
               "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]",
+              "drop-shadow-[0_0_4px_rgba(103,232,249,0.35)]",
             )}
           />
         </span>
       ) : isBoundary ? (
-        <span
-          title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
-          {...interactiveProps}
-        >
+        <span title={boundaryTitle(stopReason)} {...interactiveProps}>
           <Crab
             className={cn(
               "size-3.5 text-amber-400",
@@ -100,9 +111,9 @@ export function ThreadConnector({
         <span title="Start of turn" {...interactiveProps}>
           <Crab
             className={cn(
-              "size-3.5 text-emerald-400",
+              "size-3.5 text-cyan-300/85",
               "animate-crab-appear",
-              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+              "drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]",
             )}
           />
         </span>