@tonyclaw/agent-inspector 4.0.1 → 4.0.2

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

@@ -1,208 +0,0 @@
-import { useState, memo, useCallback, useEffect, useMemo } from "react";
-import type { JSX } from "react";
-import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
-import type { CapturedLog } from "../../contracts";
-import { ConversationHeader, type ConversationGroupData } from "./ConversationHeader";
-import { detectProvider } from "../providers/ProviderLogo";
-import { TurnGroupList } from "./TurnGroupList";
-import { AgentTraceSummary } from "./AgentTraceSummary";
-import type { CacheTrendEntry } from "./cacheTrend";
-import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
-import { buildTurnGroups } from "./viewerState";
-
-export type ConversationGroupProps = {
-  group: ConversationGroupData;
-  viewMode?: "simple" | "full";
-  /** Live strip-Claude-Code-billing-header flag from the viewer container. */
-  strip: boolean;
-  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
-  slowResponseThresholdSeconds: number;
-  /**
-   * Pre-computed per-log cache token trend map (keyed by `log.id`) shared
-   * across the whole viewer. Each `LogEntry` looks up its own entry.
-   */
-  cacheTrends?: Map<number, CacheTrendEntry>;
-  /** Callback to open CompareDrawer with a log and its immediate predecessor. */
-  onCompareWithPrevious: (log: CapturedLog) => void;
-  comparisonPredecessors: Map<number, CapturedLog>;
-  /** Initial expansion state. Single-session pages use this to show logs under the session header. */
-  defaultExpanded?: boolean;
-  /** Controls whether timestamps render as compact local time or full ISO strings. */
-  timeDisplayFormat: TimeDisplayFormat;
-  /** Clear all logs that belong to this group from the current view. */
-  onClearGroup: (ids: number[]) => void;
-  /** Show IDE identity in the session header. */
-  showClientIdentity?: boolean;
-  /** Show process/project metadata in the session header. */
-  showProcessMetadata?: boolean;
-  /** Show client PID/project metadata on individual log rows. */
-  showLogClientMetadata?: boolean;
-  /** Optional controlled expansion state used by virtualized lists. */
-  expanded?: boolean;
-  /** Optional controlled expansion setter used by virtualized lists. */
-  onExpandedChange?: (expanded: boolean) => void;
-};
-
-function computeStats(logs: CapturedLog[]): {
-  totalInputTokens: number;
-  totalOutputTokens: number;
-} {
-  let totalInput = 0;
-  let totalOutput = 0;
-  for (const log of logs) {
-    if (log.inputTokens !== null) totalInput += log.inputTokens;
-    if (log.outputTokens !== null) totalOutput += log.outputTokens;
-  }
-  return { totalInputTokens: totalInput, totalOutputTokens: totalOutput };
-}
-
-/** Bucket each log's model under its detected provider and return one entry
- *  per provider with the deduplicated model names. Used by the session
- *  header to render one logo per provider used in the session. */
-function collectProviders(logs: CapturedLog[]): {
-  provider: import("../providers/ProviderLogo").Provider;
-  models: string[];
-}[] {
-  const buckets = new Map<import("../providers/ProviderLogo").Provider, Set<string>>();
-  for (const log of logs) {
-    if (log.model === null) continue;
-    const provider = detectProvider(log.model);
-    if (provider === "unknown") continue;
-    let models = buckets.get(provider);
-    if (models === undefined) {
-      models = new Set();
-      buckets.set(provider, models);
-    }
-    models.add(log.model);
-  }
-  return [...buckets.entries()].map(([provider, models]) => ({
-    provider,
-    models: [...models],
-  }));
-}
-
-export function getFirstClientPid(logs: readonly CapturedLog[]): number | null {
-  for (const log of logs) {
-    const pid = log.clientPid;
-    if (pid !== null && pid !== undefined) return pid;
-  }
-  return null;
-}
-
-export function getFirstClientProjectFolder(logs: readonly CapturedLog[]): string | null {
-  for (const log of logs) {
-    const projectFolder = log.clientProjectFolder;
-    if (projectFolder !== null && projectFolder !== undefined && projectFolder !== "") {
-      return projectFolder;
-    }
-  }
-  return null;
-}
-
-export const ConversationGroup = memo(function ({
-  group,
-  viewMode = "simple",
-  strip,
-  slowResponseThresholdSeconds,
-  cacheTrends,
-  onCompareWithPrevious,
-  comparisonPredecessors,
-  onClearGroup,
-  showClientIdentity = true,
-  showProcessMetadata = true,
-  showLogClientMetadata = true,
-  defaultExpanded = false,
-  timeDisplayFormat,
-  expanded: controlledExpanded,
-  onExpandedChange,
-}: ConversationGroupProps): JSX.Element {
-  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-  const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = useCallback(
-    (nextExpanded: boolean) => {
-      if (onExpandedChange !== undefined) {
-        onExpandedChange(nextExpanded);
-        return;
-      }
-      setInternalExpanded(nextExpanded);
-    },
-    [onExpandedChange],
-  );
-
-  useEffect(() => {
-    if (!defaultExpanded || controlledExpanded !== undefined) return;
-    setInternalExpanded(true);
-  }, [controlledExpanded, defaultExpanded]);
-
-  const stats = useMemo(() => computeStats(group.logs), [group.logs]);
-  const providers = useMemo(() => collectProviders(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 isLoading = group.logs.some((log) => log.responseStatus === null);
-  const clientPid = useMemo(() => getFirstClientPid(group.logs), [group.logs]);
-  const clientProjectFolder = useMemo(() => getFirstClientProjectFolder(group.logs), [group.logs]);
-
-  // Pre-compute stop reasons for each log — used by turnIndices
-  const turnGroups = useMemo(() => buildTurnGroups(group.logs), [group.logs]);
-
-  useEffect(() => {
-    const handleLogFocusRequest = (event: Event): void => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (!group.logs.some((log) => log.id === request.logId)) return;
-      setExpanded(true);
-    };
-
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [group.logs, setExpanded]);
-
-  return (
-    <div className="mb-1.5">
-      <ConversationHeader
-        conversationId={group.conversationId}
-        startTime={startTime}
-        endTime={endTime}
-        totalCalls={group.logs.length}
-        totalInputTokens={stats.totalInputTokens}
-        totalOutputTokens={stats.totalOutputTokens}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-        providers={providers}
-        isLoading={isLoading}
-        userAgent={group.logs[0]?.userAgent ?? null}
-        clientPid={clientPid}
-        clientProjectFolder={clientProjectFolder}
-        showClientIdentity={showClientIdentity}
-        showProcessMetadata={showProcessMetadata}
-        timeDisplayFormat={timeDisplayFormat}
-        onClear={() => onClearGroup(group.logs.map((l) => l.id))}
-      />
-
-      {expanded && (
-        <div>
-          <AgentTraceSummary
-            logs={group.logs}
-            scopeId={group.conversationId}
-            slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-            showRollupMetrics={false}
-            timeDisplayFormat={timeDisplayFormat}
-          />
-          <TurnGroupList
-            turnGroups={turnGroups}
-            viewMode={viewMode}
-            strip={strip}
-            slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-            timeDisplayFormat={timeDisplayFormat}
-            cacheTrends={cacheTrends}
-            onCompareWithPrevious={onCompareWithPrevious}
-            comparisonPredecessors={comparisonPredecessors}
-            showLogClientMetadata={showLogClientMetadata}
-          />
-        </div>
-      )}
-    </div>
-  );
-});