@tonyclaw/llm-inspector 1.15.0 → 1.16.0

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

@@ -1,7 +1,6 @@
 import { useState, memo, useMemo } from "react";
 import type { JSX } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
-import { extractStopReason } from "../../lib/stopReason";
 import {
   ConversationHeader,
   getGroupApiFormat,
@@ -10,6 +9,7 @@ import {
 } from "./ConversationHeader";
 import { TurnGroup } from "./TurnGroup";
 import type { CacheTrendEntry } from "./cacheTrend";
+import { buildTurnGroups, shouldRenderConversationContent } from "./viewerState";
 
 export type ConversationGroupProps = {
   group: ConversationGroupData;
@@ -23,8 +23,11 @@ export type ConversationGroupProps = {
   cacheTrends?: Map<number, CacheTrendEntry>;
   /** Callback to open CompareDrawer with a log and its immediate predecessor. */
   onCompareWithPrevious: (log: CapturedLog) => void;
+  comparisonPredecessors: Map<number, CapturedLog>;
   /** When true, skip the group header and render content directly. */
   standalone?: boolean;
+  /** Clear all logs that belong to this group. */
+  onClearGroup: (ids: number[]) => void;
 };
 
 function computeStats(logs: CapturedLog[]): {
@@ -46,56 +49,19 @@ export const ConversationGroup = memo(function ({
   strip,
   cacheTrends,
   onCompareWithPrevious,
+  comparisonPredecessors,
+  onClearGroup,
   standalone = false,
 }: ConversationGroupProps): JSX.Element {
-  const [expanded, setExpanded] = useState(standalone);
-  const stats = computeStats(group.logs);
+  const [expanded, setExpanded] = useState(false);
+  const stats = useMemo(() => computeStats(group.logs), [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 turnIndices
-  const stopReasons = useMemo(() => group.logs.map((log) => extractStopReason(log)), [group.logs]);
-
-  // Compute turn indices for alternating background colours
-  const turnIndices = useMemo(() => {
-    const indices: number[] = [];
-    let turn = 0;
-    for (let i = 0; i < stopReasons.length; i++) {
-      if (i > 0 && (stopReasons[i - 1] === "end_turn" || stopReasons[i - 1] === "stop")) {
-        turn++;
-      }
-      indices.push(turn);
-    }
-    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 turnGroups = useMemo(() => buildTurnGroups(group.logs), [group.logs]);
   const displayId =
     group.conversationId.startsWith("PID:") || group.conversationId.includes("|")
       ? group.conversationId
@@ -104,7 +70,7 @@ export const ConversationGroup = memo(function ({
         : group.conversationId;
 
   return (
-    <div className="mb-4">
+    <div className="mb-2">
       {!standalone && (
         <ConversationHeader
           conversationId={displayId}
@@ -119,19 +85,21 @@ export const ConversationGroup = memo(function ({
           hideApiFormat={mixed}
           isLoading={isLoading}
           userAgent={group.logs[0]?.userAgent ?? null}
+          onClear={() => onClearGroup(group.logs.map((l) => l.id))}
         />
       )}
 
-      {expanded && (
-        <div>
+      {shouldRenderConversationContent(standalone, expanded) && (
+        <div className="max-h-[70vh] overflow-y-auto">
           {turnGroups.map((tg) => (
             <TurnGroup
               key={tg.turnIndex}
-              logs={tg.logs}
+              entries={tg.entries}
               viewMode={viewMode}
               strip={strip}
               cacheTrends={cacheTrends}
               onCompareWithPrevious={onCompareWithPrevious}
+              comparisonPredecessors={comparisonPredecessors}
               turnIndex={tg.turnIndex}
             />
           ))}

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

@@ -1,8 +1,19 @@
-import { ChevronDown, ChevronRight, Clock, Loader2, MessageSquare, User, Zap } from "lucide-react";
+import { useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Loader2,
+  MessageSquare,
+  Trash2,
+  User,
+  Zap,
+} from "lucide-react";
 import type { JSX } from "react";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
+import { ConfirmDialog } from "../ui/confirm-dialog";
 
 const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
   anthropic: "Anthropic",
@@ -30,6 +41,9 @@ export type ConversationHeaderProps = {
   isLoading?: boolean;
   /** User-Agent string from the first log in the group. */
   userAgent?: string | null;
+  /** Clear all logs in this group. After confirmation the parent removes them
+   *  from the in-memory store; this header is then unmounted. */
+  onClear?: () => void;
 };
 
 function formatTimestamp(iso: string): string {
@@ -50,7 +64,16 @@ export function ConversationHeader({
   hideApiFormat = false,
   isLoading = false,
   userAgent,
+  onClear,
 }: ConversationHeaderProps): JSX.Element {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const handleClearClick = (e: React.MouseEvent | React.KeyboardEvent): void => {
+    e.stopPropagation();
+    if (onClear === undefined) return;
+    setConfirmOpen(true);
+  };
+
   return (
     <div
       role="button"
@@ -59,10 +82,11 @@ export function ConversationHeader({
         "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
         "hover:bg-muted/50",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-muted/30",
+        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
       )}
       onClick={onToggle}
       onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           onToggle();
@@ -142,6 +166,31 @@ export function ConversationHeader({
 
       {/* Spacer */}
       <span className="flex-1 min-w-0" />
+
+      {/* Per-group Clear — does not toggle the group's expand state */}
+      {onClear !== undefined && (
+        <button
+          type="button"
+          onClick={handleClearClick}
+          aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
+          title="Clear this group"
+          className="text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-6 rounded hover:bg-muted cursor-pointer"
+        >
+          <Trash2 className="size-3.5" />
+        </button>
+      )}
+
+      <ConfirmDialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title="Clear this group?"
+        description={`This will remove ${totalCalls} request${totalCalls !== 1 ? "s" : ""} from this conversation. This action cannot be undone.`}
+        confirmLabel="Clear"
+        variant="destructive"
+        onConfirm={() => {
+          onClear?.();
+        }}
+      />
     </div>
   );
 }
@@ -178,11 +227,15 @@ export function hasMixedApiFormat(logs: CapturedLog[]): boolean {
 }
 
 export function getConversationId(log: CapturedLog): string {
-  if (log.sessionId !== null && log.sessionId !== "") {
+  if (log.isTest === true) return "provider-test";
+  if (log.sessionId !== null && log.sessionId !== "" && log.sessionId !== undefined) {
     return log.sessionId;
   }
-  const pid = log.clientPid !== null ? `PID:${log.clientPid}` : "unknown";
-  const folder = log.clientProjectFolder !== null ? log.clientProjectFolder : "no-folder";
+  const hasPid = log.clientPid !== null && log.clientPid !== undefined;
+  const hasFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== undefined;
+  if (!hasPid && !hasFolder) return "default";
+  const pid = hasPid ? `PID:${log.clientPid}` : "unknown";
+  const folder = hasFolder ? log.clientProjectFolder : "no-folder";
   return `${pid}|${folder}`;
 }