@tonyclaw/llm-inspector 1.16.4 → 1.17.0

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

@@ -1,38 +1,54 @@
 import {
+  AlertTriangle,
   ArrowDown,
   ArrowUp,
+  Check,
   ChevronDown,
   ChevronRight,
+  ChevronsDown,
+  ChevronsUp,
   Clock,
+  Copy,
   FileTerminal,
   Globe,
   Loader2,
   MessageSquare,
+  OctagonAlert,
   Radio,
+  RotateCcw,
   Wrench,
   Zap,
 } from "lucide-react";
-import type { JSX } from "react";
+import type { JSX, MouseEvent } from "react";
 import { memo, useMemo } from "react";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { CacheTrend } from "./cacheTrend";
 
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
 const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
   success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
   client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
-  server_error: "",
+  server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
   pending: "bg-muted text-muted-foreground border-border",
 };
 
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatTimestamp(iso: string): string {
+  const d = new Date(iso);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+
 /**
  * Inline trend indicator: small arrow (green up / red down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
@@ -68,6 +84,23 @@ export type LogEntryHeaderProps = {
    * the corresponding cache span renders as it did before — no arrow.
    */
   cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
+  /** Re-send this request to the provider. Rendered in the header row when
+   *  `expanded` is true. */
+  onReplay?: () => void;
+  /** Copy the request body to the clipboard. Omit to hide the button. */
+  onCopyRequest?: (event: MouseEvent) => void;
+  /** Whether the latest copy of the request body succeeded (shows "Copied!"). */
+  requestCopied?: boolean;
+  /** Toggle the JSON bulk-expansion state for the request body. */
+  onToggleRequestExpansion?: () => void;
+  /** Current state of the JSON bulk-expansion button. `null` means the
+   *  request body is not JSON, so the button is hidden. */
+  requestExpansionState?: {
+    isExpanded: boolean;
+    isPending: boolean;
+  } | null;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds?: number;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -78,8 +111,18 @@ export const LogEntryHeader = memo(function ({
   onToggle,
   responseToolNames = null,
   cacheTrend = null,
+  onReplay,
+  onCopyRequest,
+  requestCopied = false,
+  onToggleRequestExpansion,
+  requestExpansionState = null,
+  slowResponseThresholdSeconds = 0,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
+  const isSlowResponse =
+    log.elapsedMs !== null &&
+    slowResponseThresholdSeconds > 0 &&
+    log.elapsedMs > slowResponseThresholdSeconds * 1000;
 
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
   const toolNamesJoined = useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);
@@ -89,10 +132,13 @@ export const LogEntryHeader = memo(function ({
       <div
         role="button"
         tabIndex={0}
+        data-nav-id={`log-${log.id}`}
+        data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
           "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
           "hover:bg-muted/50",
           "select-none",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
         onKeyDown={(e) => {
@@ -107,6 +153,17 @@ export const LogEntryHeader = memo(function ({
           #{log.id}
         </span>
 
+        {/* Timestamp */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+              <Clock className="size-3" />
+              <span className="font-mono tabular-nums">{formatTimestamp(log.timestamp)}</span>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>{log.timestamp}</TooltipContent>
+        </Tooltip>
+
         {/* Model — logo icon only, model name in tooltip */}
         {log.model !== null && (
           <Tooltip>
@@ -119,46 +176,51 @@ export const LogEntryHeader = memo(function ({
           </Tooltip>
         )}
 
-        {/* Response Status — only shown for non-200 or pending */}
+        {/* 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. */}
         {statusCategory !== "success" && (
-          <>
+          <Badge
+            variant="outline"
+            className={cn(
+              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1",
+              STATUS_BADGE_CLASSES[statusCategory],
+            )}
+          >
             {statusCategory === "server_error" ? (
-              <Badge
-                variant="destructive"
-                className="text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums"
-              >
-                {log.responseStatus}
-              </Badge>
+              <OctagonAlert className="size-3" aria-label="Server error" />
+            ) : statusCategory === "client_error" ? (
+              <AlertTriangle className="size-3" aria-label="Client error" />
             ) : statusCategory === "pending" ? (
-              <Badge
-                variant="outline"
-                className={cn(
-                  "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
-                  STATUS_BADGE_CLASSES[statusCategory],
-                )}
-              >
-                <Loader2 className="size-3 animate-spin" />
-              </Badge>
-            ) : (
-              <Badge
-                variant="outline"
-                className={cn(
-                  "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
-                  STATUS_BADGE_CLASSES[statusCategory],
-                )}
-              >
-                {log.responseStatus}
-              </Badge>
-            )}
-          </>
+              <Loader2 className="size-3 animate-spin" aria-label="Pending" />
+            ) : null}
+            {log.responseStatus}
+          </Badge>
         )}
 
         {/* Elapsed time */}
         {log.elapsedMs !== null && (
-          <span className="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>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className={cn(
+                  "flex items-center gap-1 text-xs shrink-0",
+                  isSlowResponse ? "text-amber-400" : "text-muted-foreground",
+                )}
+              >
+                <Clock className="size-3" />
+                <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
+                {isSlowResponse && <AlertTriangle className="size-3" aria-label="Slow response" />}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isSlowResponse
+                ? `Slow response: ${formatElapsed(log.elapsedMs)} exceeds ${formatElapsed(
+                    slowResponseThresholdSeconds * 1000,
+                  )}`
+                : "Elapsed response time"}
+            </TooltipContent>
+          </Tooltip>
         )}
 
         {/* Token counts */}
@@ -279,6 +341,85 @@ export const LogEntryHeader = memo(function ({
         {/* Spacer */}
         <span className="flex-1 min-w-0" />
 
+        {/* Header actions — only when expanded, so the collapsed view stays
+            compact. Buttons stop propagation so they don't toggle the log. */}
+        {expanded && (
+          <span
+            className="flex items-center gap-1.5 shrink-0"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            {requestExpansionState !== null && onToggleRequestExpansion !== undefined && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    onClick={onToggleRequestExpansion}
+                    disabled={requestExpansionState.isPending}
+                    aria-pressed={requestExpansionState.isExpanded}
+                    aria-label={
+                      requestExpansionState.isExpanded ? "Collapse all JSON" : "Expand all JSON"
+                    }
+                  >
+                    {requestExpansionState.isExpanded ? (
+                      <ChevronsUp className="size-3.5" />
+                    ) : (
+                      <ChevronsDown className="size-3.5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {requestExpansionState.isExpanded
+                    ? "Collapse all JSON nodes"
+                    : "Expand all JSON nodes"}
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {onCopyRequest !== undefined && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    onClick={onCopyRequest}
+                    aria-label="Copy request body"
+                  >
+                    {requestCopied ? (
+                      <Check className="size-3.5 text-emerald-500" />
+                    ) : (
+                      <Copy className="size-3.5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {requestCopied ? "Copied to clipboard" : "Copy request body"}
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {onReplay !== undefined && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    onClick={onReplay}
+                    aria-label="Replay request"
+                  >
+                    <RotateCcw className="size-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Re-send this request to the provider</TooltipContent>
+              </Tooltip>
+            )}
+          </span>
+        )}
+
         {/* Expand chevron */}
         {expanded ? (
           <ChevronDown className="size-4 text-muted-foreground shrink-0" />

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

@@ -1,7 +1,7 @@
 import { type JSX, useMemo } from "react";
 import { cn } from "../../lib/utils";
 import type { StopReason } from "../../lib/stopReason";
-import { getCrabVariant } from "../ui/crab-variants";
+import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
   stopReason: StopReason;
@@ -9,6 +9,8 @@ export type ThreadConnectorProps = {
   isFirst: boolean;
   /** True when this entry starts a new turn (first overall, or after end_turn/stop). */
   isTurnStart: boolean;
+  /** True when this entry is the turn's only request. */
+  isOnlyEntry?: boolean;
   /** Seed for crab variant selection (0-11). */
   crabIndex?: number;
   /** When true the crab is clickable (collapse / expand a turn). */
@@ -28,13 +30,16 @@ export function ThreadConnector({
   isPending,
   isFirst,
   isTurnStart,
+  isOnlyEntry = false,
   crabIndex = 0,
   collapsible = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
   const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
+  const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
 
   const interactiveProps =
     collapsible && onToggle
@@ -68,7 +73,17 @@ export function ThreadConnector({
       {/* Crab — pinned to the fixed offset above so it never drifts
        *  when the LogEntry expands / collapses.  Clickable when the
        *  turn is collapsible (replaces the old chevron toggle). */}
-      {isBoundary ? (
+      {isFusedBoundary ? (
+        <span title="Start and end of turn">
+          <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
           title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
           {...interactiveProps}

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

@@ -1,14 +1,15 @@
 import { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ChevronRight, Clock, Zap } from "lucide-react";
+import { AlertTriangle, ChevronRight, Clock, Zap } from "lucide-react";
 import { isTurnBoundary } from "../../lib/stopReason";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { getCrabVariant } from "../ui/crab-variants";
 import { ProviderLogo, detectProvider, type Provider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import { ThreadConnector } from "./ThreadConnector";
-import type { TurnEntry } from "./viewerState";
+import { isTurnCollapsible, type TurnEntry } from "./viewerState";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -19,6 +20,7 @@ type TurnGroupProps = {
   entries: TurnEntry[];
   viewMode: "simple" | "full";
   strip: boolean;
+  slowResponseThresholdSeconds: number;
   cacheTrends?: Map<number, CacheTrendEntry>;
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
@@ -29,6 +31,7 @@ export const TurnGroup = memo(function TurnGroup({
   entries,
   viewMode,
   strip,
+  slowResponseThresholdSeconds,
   cacheTrends,
   onCompareWithPrevious,
   comparisonPredecessors,
@@ -38,17 +41,20 @@ export const TurnGroup = memo(function TurnGroup({
   const lastStop = entries[lastIdx]?.stopReason ?? null;
   const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
   const isPending = entries[lastIdx]?.log.responseStatus === null;
-  const collapsible = isComplete && !isPending;
+  const isSingleLog = entries.length === 1;
+  const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
   const [collapsed, setCollapsed] = useState(false);
 
   // Auto-collapse when the turn finishes (transitions from incomplete → complete)
-  const prevCompleteRef = useRef(isComplete);
+  const prevCompleteRef = useRef(false);
   useEffect(() => {
-    if (isComplete && !prevCompleteRef.current) {
+    if (!collapsible) {
+      setCollapsed(false);
+    } else if (isComplete && !prevCompleteRef.current) {
       setCollapsed(true);
     }
     prevCompleteRef.current = isComplete;
-  }, [isComplete]);
+  }, [collapsible, isComplete]);
 
   const toggleCollapse = useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
@@ -99,6 +105,10 @@ export const TurnGroup = memo(function TurnGroup({
   const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
 
   const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+  const aggregateIsSlow =
+    aggregate.hasElapsed &&
+    slowResponseThresholdSeconds > 0 &&
+    aggregate.totalElapsed > slowResponseThresholdSeconds * 1000;
 
   // ResizeObserver → re-render connectors when any LogEntry height changes
   const [layoutVersion, setLayoutVersion] = useState(0);
@@ -124,11 +134,30 @@ export const TurnGroup = memo(function TurnGroup({
       className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
     >
       {collapsed ? (
-        /* ---- Collapsed: dual-crab + summary ---- */
-        <div className="flex items-stretch">
-          {/* Dual-crab connector */}
+        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
+        <div
+          data-nav-id={`turn-collapsed-${entries[0]?.log.id ?? turnIndex}`}
+          data-nav-action="expand"
+          role="button"
+          tabIndex={0}
+          className="flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg"
+          onClick={toggleCollapse}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggleCollapse();
+            }
+          }}
+        >
+          {/* Turn number */}
+          <div className="w-5 shrink-0 flex items-start pt-1.5">
+            <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
+              {turnIndex + 1}
+            </span>
+          </div>
+
+          {/* Dual-crab connector for collapsed multi-request turns. */}
           <div className="w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5">
-            {/* Start turn crab (clickable to expand) */}
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
             <span
               role="button"
@@ -149,18 +178,15 @@ export const TurnGroup = memo(function TurnGroup({
               <StartCrab
                 className={cn(
                   "size-3.5 text-emerald-400",
-                  "animate-crab-appear",
-                  "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+                  "animate-crab-appear drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
                 )}
               />
             </span>
 
-            {/* Connecting line between the two crabs */}
             <div className="flex-1 flex justify-center min-h-0">
               <div className="w-0.5 bg-muted-foreground/30 h-full" />
             </div>
 
-            {/* End turn crab (clickable to expand) */}
             <span
               role="button"
               tabIndex={0}
@@ -180,76 +206,91 @@ export const TurnGroup = memo(function TurnGroup({
               <EndCrab
                 className={cn(
                   "size-3.5 text-amber-400",
-                  "animate-crab-settle",
-                  "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
+                  "animate-crab-settle drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
                 )}
               />
             </span>
           </div>
 
-          {/* Summary content — card-like appearance matching LogEntry */}
-          <div
-            className={cn(
-              "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs cursor-pointer",
-              bgClass,
-            )}
-            onClick={toggleCollapse}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                toggleCollapse();
-              }
-            }}
-          >
-            {/* ID range */}
-            <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
-              #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
-            </span>
-
-            {/* Request count */}
-            <span className="text-muted-foreground shrink-0">
-              {entries.length} request{entries.length > 1 ? "s" : ""}
-            </span>
+          {/* Summary content — hidden for single-log turns. */}
+          {entries.length > 1 && (
+            <div
+              className={cn(
+                "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs",
+                bgClass,
+              )}
+            >
+              {/* ID range */}
+              <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
+                #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
+              </span>
 
-            {/* Model logos — one per unique provider */}
-            {uniqueProviders.length > 0 && (
-              <span className="flex items-center gap-0.5 shrink-0">
-                {uniqueProviders.map((p) => (
-                  <ProviderLogo key={p} provider={p} className="size-4" />
-                ))}
+              {/* Request count */}
+              <span className="text-muted-foreground shrink-0">
+                {entries.length} request{entries.length > 1 ? "s" : ""}
               </span>
-            )}
 
-            {/* Elapsed */}
-            {aggregate.hasElapsed && (
-              <span className="flex items-center gap-1 text-muted-foreground shrink-0">
-                <Clock className="size-3" />
-                <span className="font-mono tabular-nums">
-                  {formatElapsed(aggregate.totalElapsed)}
+              {/* Model logos — one per unique provider */}
+              {uniqueProviders.length > 0 && (
+                <span className="flex items-center gap-0.5 shrink-0">
+                  {uniqueProviders.map((p) => (
+                    <ProviderLogo key={p} provider={p} className="size-4" />
+                  ))}
                 </span>
-              </span>
-            )}
+              )}
+
+              {/* Elapsed */}
+              {aggregate.hasElapsed && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        className={cn(
+                          "flex items-center gap-1 shrink-0",
+                          aggregateIsSlow ? "text-amber-400" : "text-muted-foreground",
+                        )}
+                      >
+                        <Clock className="size-3" />
+                        <span className="font-mono tabular-nums">
+                          {formatElapsed(aggregate.totalElapsed)}
+                        </span>
+                        {aggregateIsSlow && (
+                          <AlertTriangle className="size-3" aria-label="Slow response" />
+                        )}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {aggregateIsSlow
+                        ? `Slow response: ${formatElapsed(
+                            aggregate.totalElapsed,
+                          )} exceeds ${formatElapsed(slowResponseThresholdSeconds * 1000)}`
+                        : "Total elapsed response time"}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
 
-            {/* Tokens */}
-            {aggregate.hasTokens && (
-              <span className="flex items-center gap-1 shrink-0">
-                <Zap className="size-3 text-muted-foreground" />
-                <span className="font-mono tabular-nums">
-                  <span className="text-blue-400">IN {formatTokens(aggregate.totalInput)}</span>
-                  {" / "}
-                  <span className="text-amber-400">OUT {formatTokens(aggregate.totalOutput)}</span>
+              {/* Tokens */}
+              {aggregate.hasTokens && (
+                <span className="flex items-center gap-1 shrink-0">
+                  <Zap className="size-3 text-muted-foreground" />
+                  <span className="font-mono tabular-nums">
+                    <span className="text-blue-400">IN {formatTokens(aggregate.totalInput)}</span>
+                    {" / "}
+                    <span className="text-amber-400">
+                      OUT {formatTokens(aggregate.totalOutput)}
+                    </span>
+                  </span>
                 </span>
-              </span>
-            )}
+              )}
 
-            {/* Spacer */}
-            <span className="flex-1 min-w-0" />
+              {/* Spacer */}
+              <span className="flex-1 min-w-0" />
 
-            {/* Expand chevron */}
-            <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-          </div>
+              {/* Expand chevron */}
+              <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+            </div>
+          )}
         </div>
       ) : (
         /* ---- Expanded: full entries ---- */
@@ -259,13 +300,23 @@ export const TurnGroup = memo(function TurnGroup({
 
           return (
             <div key={log.id} className="flex items-stretch">
+              {isTurnStart ? (
+                <div className="w-5 shrink-0 flex items-start pt-1.5">
+                  <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
+                    {turnIndex + 1}
+                  </span>
+                </div>
+              ) : (
+                <div className="w-5 shrink-0" />
+              )}
               <ThreadConnector
                 stopReason={reason}
                 isPending={log.responseStatus === null}
                 isFirst={visibleIdx === 0}
                 isTurnStart={isTurnStart}
+                isOnlyEntry={isSingleLog}
                 crabIndex={log.id % 12}
-                collapsible={collapsible && entries.length > 1 && isTurnStart}
+                collapsible={collapsible && isTurnStart}
                 onToggle={toggleCollapse}
               />
               <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>
@@ -273,6 +324,7 @@ export const TurnGroup = memo(function TurnGroup({
                   log={log}
                   viewMode={viewMode}
                   strip={strip}
+                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
                   cacheTrend={cacheTrends?.get(log.id) ?? null}
                   onCompareWithPrevious={
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined