@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,652 +0,0 @@
-import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
-import { ChevronDown, ChevronRight, Cpu, FolderOpen, Loader2, Monitor } from "lucide-react";
-import type { CapturedLog } from "../../contracts";
-import { cn, formatTokens } from "../../lib/utils";
-import {
-  ClientLogo,
-  clientAppLabel,
-  clientAppTypeLabel,
-  detectClientApp,
-  type ClientApp,
-} from "../clients/ClientLogo";
-import { ConversationGroup, type ConversationGroupProps } from "./ConversationGroup";
-import type { ConversationGroupData } from "./ConversationHeader";
-
-const VIRTUALIZE_GROUP_THRESHOLD = 30;
-const COLLAPSED_CLIENTS_STORAGE_KEY = "agent-inspector.hierarchy.collapsedClients";
-const COLLAPSED_PROCESSES_STORAGE_KEY = "agent-inspector.hierarchy.collapsedProcesses";
-
-type ConversationGroupListProps = Omit<
-  ConversationGroupProps,
-  "group" | "expanded" | "onExpandedChange"
-> & {
-  groups: ConversationGroupData[];
-};
-
-export type ProcessGroupData = {
-  id: string;
-  clientPid: number | null;
-  clientProjectFolder: string | null;
-  sessions: ConversationGroupData[];
-  logs: CapturedLog[];
-};
-
-export type ClientGroupData = {
-  id: string;
-  client: ClientApp;
-  label: string;
-  userAgent: string | null;
-  processes: ProcessGroupData[];
-  logs: CapturedLog[];
-};
-
-type MutableProcessGroup = {
-  id: string;
-  clientPid: number | null;
-  clientProjectFolder: string | null;
-  sessions: ConversationGroupData[];
-  logs: CapturedLog[];
-};
-
-type MutableClientGroup = {
-  id: string;
-  client: ClientApp;
-  label: string;
-  userAgent: string | null;
-  processes: Map<string, MutableProcessGroup>;
-  logs: CapturedLog[];
-};
-
-export function shouldVirtualizeConversationGroups(groupCount: number): boolean {
-  return groupCount > VIRTUALIZE_GROUP_THRESHOLD;
-}
-
-export function hasPendingLogs(logs: readonly CapturedLog[]): boolean {
-  return logs.some((log) => log.responseStatus === null);
-}
-
-export function countPendingTurns(logs: readonly CapturedLog[]): number {
-  return logs.filter((log) => log.responseStatus === null).length;
-}
-
-export function findConversationGroupIndexForLog(
-  groups: readonly ConversationGroupData[],
-  logId: number,
-): number | null {
-  for (let index = 0; index < groups.length; index++) {
-    const group = groups[index];
-    if (group !== undefined && group.logs.some((log: CapturedLog) => log.id === logId)) {
-      return index;
-    }
-  }
-  return null;
-}
-
-function firstUserAgent(logs: readonly CapturedLog[]): string | null {
-  for (const log of logs) {
-    const userAgent = log.userAgent;
-    if (userAgent !== null && userAgent !== undefined && userAgent !== "") return userAgent;
-  }
-  return null;
-}
-
-function firstClientPid(logs: readonly CapturedLog[]): number | null {
-  for (const log of logs) {
-    const clientPid = log.clientPid;
-    if (clientPid !== null && clientPid !== undefined) return clientPid;
-  }
-  return null;
-}
-
-function firstClientProjectFolder(logs: readonly CapturedLog[]): string | null {
-  for (const log of logs) {
-    const projectFolder = log.clientProjectFolder;
-    if (projectFolder !== null && projectFolder !== undefined && projectFolder !== "") {
-      return projectFolder;
-    }
-  }
-  return null;
-}
-
-function groupClient(group: ConversationGroupData): ClientApp {
-  return detectClientApp({
-    userAgent: firstUserAgent(group.logs),
-    conversationId: group.conversationId,
-    clientProjectFolder: firstClientProjectFolder(group.logs),
-  });
-}
-
-function fallbackClientLabel(userAgent: string | null): string {
-  if (userAgent === null || userAgent === "") return "Unknown client";
-  const firstToken = userAgent.split(/[ /;]/)[0] ?? "";
-  if (firstToken === "") return "Unknown client";
-  return firstToken;
-}
-
-function clientLabel(client: ClientApp, userAgent: string | null): string {
-  const knownLabel = clientAppLabel(client);
-  if (knownLabel !== null) return knownLabel;
-  return fallbackClientLabel(userAgent);
-}
-
-function bucketKey(value: string | number | null): string {
-  if (value === null || value === "") return "unknown";
-  return String(value);
-}
-
-function ideKey(client: ClientApp, userAgent: string | null, projectFolder: string | null): string {
-  if (client !== "unknown") return client;
-  return `unknown:${bucketKey(userAgent)}:${bucketKey(projectFolder)}`;
-}
-
-function processKey(clientPid: number | null, projectFolder: string | null): string {
-  return `${bucketKey(clientPid)}:${bucketKey(projectFolder)}`;
-}
-
-function sortLogsByTimestamp(logs: readonly CapturedLog[]): CapturedLog[] {
-  return [...logs].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
-}
-
-function latestTimestamp(logs: readonly CapturedLog[]): string {
-  let latest = "";
-  for (const log of logs) {
-    if (log.timestamp > latest) latest = log.timestamp;
-  }
-  return latest;
-}
-
-export function operationalPriority(logs: readonly CapturedLog[]): number {
-  if (hasPendingLogs(logs)) return 0;
-  if (
-    logs.some(
-      (log) =>
-        (log.error !== null && log.error !== undefined) ||
-        (log.responseStatus !== null &&
-          log.responseStatus !== undefined &&
-          log.responseStatus >= 400),
-    )
-  ) {
-    return 1;
-  }
-  return 2;
-}
-
-function sortByOperationalPriority<T extends { id: string; logs: readonly CapturedLog[] }>(
-  items: readonly T[],
-): T[] {
-  return [...items].sort((left, right) => {
-    const priorityDifference = operationalPriority(left.logs) - operationalPriority(right.logs);
-    if (priorityDifference !== 0) return priorityDifference;
-    const recencyDifference = latestTimestamp(right.logs).localeCompare(latestTimestamp(left.logs));
-    if (recencyDifference !== 0) return recencyDifference;
-    return left.id.localeCompare(right.id);
-  });
-}
-
-export function buildConversationHierarchy(
-  groups: readonly ConversationGroupData[],
-): ClientGroupData[] {
-  const clientGroups = new Map<string, MutableClientGroup>();
-
-  for (const group of groups) {
-    const userAgent = firstUserAgent(group.logs);
-    const projectFolder = firstClientProjectFolder(group.logs);
-    const client = groupClient(group);
-    const currentIdeKey = ideKey(client, userAgent, projectFolder);
-    let clientGroup = clientGroups.get(currentIdeKey);
-
-    if (clientGroup === undefined) {
-      clientGroup = {
-        id: currentIdeKey,
-        client,
-        label: clientLabel(client, userAgent),
-        userAgent,
-        processes: new Map(),
-        logs: [],
-      };
-      clientGroups.set(currentIdeKey, clientGroup);
-    }
-
-    clientGroup.logs.push(...group.logs);
-
-    const clientPid = firstClientPid(group.logs);
-    const currentProcessKey = `${currentIdeKey}:${processKey(clientPid, projectFolder)}`;
-    let processGroup = clientGroup.processes.get(currentProcessKey);
-
-    if (processGroup === undefined) {
-      processGroup = {
-        id: currentProcessKey,
-        clientPid,
-        clientProjectFolder: projectFolder,
-        sessions: [],
-        logs: [],
-      };
-      clientGroup.processes.set(currentProcessKey, processGroup);
-    }
-
-    processGroup.sessions.push(group);
-    processGroup.logs.push(...group.logs);
-  }
-
-  const hierarchy: ClientGroupData[] = [];
-
-  for (const clientGroup of clientGroups.values()) {
-    const processes: ProcessGroupData[] = sortByOperationalPriority(
-      [...clientGroup.processes.values()].map((processGroup) => ({
-        id: processGroup.id,
-        clientPid: processGroup.clientPid,
-        clientProjectFolder: processGroup.clientProjectFolder,
-        sessions: sortByOperationalPriority(processGroup.sessions),
-        logs: sortLogsByTimestamp(processGroup.logs),
-      })),
-    );
-
-    hierarchy.push({
-      id: clientGroup.id,
-      client: clientGroup.client,
-      label: clientGroup.label,
-      userAgent: clientGroup.userAgent,
-      processes,
-      logs: sortLogsByTimestamp(clientGroup.logs),
-    });
-  }
-
-  return sortByOperationalPriority(hierarchy);
-}
-
-function formatTokenCount(count: number): string {
-  if (count <= 0) return "0";
-  return formatTokens(count);
-}
-
-function tokenTotals(logs: readonly CapturedLog[]): {
-  inputTokens: number;
-  outputTokens: number;
-} {
-  let inputTokens = 0;
-  let outputTokens = 0;
-
-  for (const log of logs) {
-    if (log.inputTokens !== null && log.inputTokens !== undefined) inputTokens += log.inputTokens;
-    if (log.outputTokens !== null && log.outputTokens !== undefined) {
-      outputTokens += log.outputTokens;
-    }
-  }
-
-  return { inputTokens, outputTokens };
-}
-
-function countSessions(processes: readonly ProcessGroupData[]): number {
-  let sessions = 0;
-  for (const processGroup of processes) {
-    sessions += processGroup.sessions.length;
-  }
-  return sessions;
-}
-
-function readStoredIdSet(storageKey: string): ReadonlySet<string> | null {
-  if (typeof window === "undefined") return null;
-  try {
-    const storedValue = window.localStorage.getItem(storageKey);
-    if (storedValue === null) return null;
-    const parsed: unknown = JSON.parse(storedValue);
-    if (!Array.isArray(parsed)) return null;
-    return new Set(parsed.filter((value): value is string => typeof value === "string"));
-  } catch {
-    return null;
-  }
-}
-
-function persistIdSet(storageKey: string, values: ReadonlySet<string>): void {
-  try {
-    window.localStorage.setItem(storageKey, JSON.stringify([...values]));
-  } catch {
-    // Local storage can be unavailable in hardened browser profiles.
-  }
-}
-
-function removeIds(values: ReadonlySet<string>, ids: ReadonlySet<string>): ReadonlySet<string> {
-  let changed = false;
-  const next = new Set(values);
-  for (const id of ids) {
-    if (next.delete(id)) changed = true;
-  }
-  return changed ? next : values;
-}
-
-export function buildDefaultCollapsedProcessIds(
-  hierarchy: readonly ClientGroupData[],
-): ReadonlySet<string> {
-  const collapsedIds = new Set<string>();
-  for (const clientGroup of hierarchy) {
-    for (let index = 1; index < clientGroup.processes.length; index++) {
-      const processGroup = clientGroup.processes[index];
-      if (processGroup !== undefined && !hasPendingLogs(processGroup.logs)) {
-        collapsedIds.add(processGroup.id);
-      }
-    }
-  }
-  return collapsedIds;
-}
-
-function shortProjectPath(projectFolder: string | null): string | null {
-  if (projectFolder === null || projectFolder === "") return null;
-  const parts = projectFolder
-    .replaceAll("\\", "/")
-    .split("/")
-    .filter((part) => part !== "");
-  const leaf = parts[parts.length - 1];
-  if (leaf === undefined) return projectFolder;
-  const parent = parts[parts.length - 2];
-  if (parent === undefined) return leaf;
-  return `${parent}/${leaf}`;
-}
-
-function SummaryChip({
-  label,
-  value,
-  className,
-}: {
-  label: string;
-  value: string;
-  className?: string;
-}): JSX.Element {
-  return (
-    <span
-      className={cn(
-        "inline-flex h-7 items-center gap-1 rounded-md bg-[var(--inspector-surface-low)] px-2 text-xs text-muted-foreground",
-        className,
-      )}
-    >
-      <span className="font-mono text-[10px] uppercase text-muted-foreground/70">{label}</span>
-      <span className="font-mono tabular-nums text-foreground">{value}</span>
-    </span>
-  );
-}
-
-function AncestorActivityIndicator({ count }: { count: number }): JSX.Element {
-  const label = `${count} open turn${count === 1 ? "" : "s"}`;
-  return (
-    <span
-      className="relative inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-medium)] text-[var(--inspector-status-watch)] ring-1 ring-border/50"
-      aria-label={label}
-      title={label}
-    >
-      <Loader2 className="size-3 animate-spin" />
-      {count > 1 && (
-        <span className="absolute translate-x-2 -translate-y-2 rounded bg-card px-0.5 font-mono text-[8px] tabular-nums text-[var(--inspector-status-watch)]">
-          {count}
-        </span>
-      )}
-    </span>
-  );
-}
-
-export function ConversationGroupList({
-  groups,
-  ...groupProps
-}: ConversationGroupListProps): JSX.Element {
-  const hierarchy = useMemo(() => buildConversationHierarchy(groups), [groups]);
-  const [collapsedClientIds, setCollapsedClientIds] = useState<ReadonlySet<string>>(
-    () => new Set(),
-  );
-  const [collapsedProcessIds, setCollapsedProcessIds] = useState<ReadonlySet<string>>(() =>
-    buildDefaultCollapsedProcessIds(hierarchy),
-  );
-  const [storedCollapseStateLoaded, setStoredCollapseStateLoaded] = useState(false);
-
-  useEffect(() => {
-    const storedClientIds = readStoredIdSet(COLLAPSED_CLIENTS_STORAGE_KEY);
-    const storedProcessIds = readStoredIdSet(COLLAPSED_PROCESSES_STORAGE_KEY);
-    if (storedClientIds !== null) setCollapsedClientIds(storedClientIds);
-    if (storedProcessIds !== null) setCollapsedProcessIds(storedProcessIds);
-    setStoredCollapseStateLoaded(true);
-  }, []);
-
-  useEffect(() => {
-    if (!storedCollapseStateLoaded) return;
-    persistIdSet(COLLAPSED_CLIENTS_STORAGE_KEY, collapsedClientIds);
-    persistIdSet(COLLAPSED_PROCESSES_STORAGE_KEY, collapsedProcessIds);
-  }, [collapsedClientIds, collapsedProcessIds, storedCollapseStateLoaded]);
-
-  useEffect(() => {
-    const activeClientIds = new Set(
-      hierarchy.filter((group) => hasPendingLogs(group.logs)).map((group) => group.id),
-    );
-    const activeProcessIds = new Set(
-      hierarchy.flatMap((group) =>
-        group.processes
-          .filter((process) => hasPendingLogs(process.logs))
-          .map((process) => process.id),
-      ),
-    );
-    setCollapsedClientIds((previous) => removeIds(previous, activeClientIds));
-    setCollapsedProcessIds((previous) => removeIds(previous, activeProcessIds));
-  }, [hierarchy]);
-
-  const toggleClient = useCallback((id: string) => {
-    setCollapsedClientIds((previous) => {
-      const next = new Set(previous);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  const toggleProcess = useCallback((id: string) => {
-    setCollapsedProcessIds((previous) => {
-      const next = new Set(previous);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  return (
-    <div className="space-y-2">
-      {hierarchy.map((clientGroup) => (
-        <ClientGroupSection
-          key={clientGroup.id}
-          group={clientGroup}
-          collapsed={collapsedClientIds.has(clientGroup.id)}
-          collapsedProcessIds={collapsedProcessIds}
-          onToggleClient={() => toggleClient(clientGroup.id)}
-          onToggleProcess={toggleProcess}
-          conversationProps={groupProps}
-        />
-      ))}
-    </div>
-  );
-}
-
-function ClientGroupSection({
-  group,
-  collapsed,
-  collapsedProcessIds,
-  onToggleClient,
-  onToggleProcess,
-  conversationProps,
-}: {
-  group: ClientGroupData;
-  collapsed: boolean;
-  collapsedProcessIds: ReadonlySet<string>;
-  onToggleClient: () => void;
-  onToggleProcess: (id: string) => void;
-  conversationProps: Omit<ConversationGroupProps, "group" | "expanded" | "onExpandedChange">;
-}): JSX.Element {
-  const totals = tokenTotals(group.logs);
-  const sessionCount = countSessions(group.processes);
-  const logCount = group.logs.length;
-  const pendingTurnCount = countPendingTurns(group.logs);
-  const isWorking = pendingTurnCount > 0;
-
-  return (
-    <section
-      className={cn(
-        "relative isolate overflow-hidden rounded-[8px] bg-card/65",
-        isWorking && "bg-card/80",
-      )}
-      data-ide-group={group.id}
-    >
-      <button
-        type="button"
-        className="grid w-full min-w-0 grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-[var(--inspector-surface-low)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        onClick={onToggleClient}
-        aria-expanded={!collapsed}
-      >
-        {group.client === "unknown" ? (
-          <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground">
-            <Monitor className="size-4" />
-          </span>
-        ) : (
-          <ClientLogo client={group.client} className="size-9 rounded-md" decorative={true} />
-        )}
-
-        <span className="min-w-0">
-          <span className="flex min-w-0 items-center gap-2">
-            <span
-              className="truncate text-sm font-semibold text-foreground"
-              title={group.userAgent ?? group.label}
-            >
-              {group.label}
-            </span>
-            <span className="rounded bg-[var(--inspector-surface-medium)] px-1.5 py-0.5 font-mono text-[9px] uppercase text-muted-foreground">
-              {clientAppTypeLabel(group.client)}
-            </span>
-            {isWorking && <AncestorActivityIndicator count={pendingTurnCount} />}
-          </span>
-          <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
-            <span>
-              {group.processes.length} process{group.processes.length !== 1 ? "es" : ""}
-            </span>
-            <span>
-              {sessionCount} session{sessionCount !== 1 ? "s" : ""}
-            </span>
-            <span>{logCount} req</span>
-          </span>
-        </span>
-
-        <span className="flex shrink-0 items-center gap-2">
-          {collapsed && (
-            <span className="hidden shrink-0 items-center gap-2 md:flex">
-              <SummaryChip label="IN" value={formatTokenCount(totals.inputTokens)} />
-              <SummaryChip label="OUT" value={formatTokenCount(totals.outputTokens)} />
-            </span>
-          )}
-          <span className="inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors group-hover:bg-[var(--inspector-surface-medium)]">
-            {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
-          </span>
-        </span>
-      </button>
-
-      {!collapsed && (
-        <div className="space-y-0.5 px-2 pb-2 pt-0.5">
-          {group.processes.map((processGroup) => (
-            <ProcessGroupSection
-              key={processGroup.id}
-              group={processGroup}
-              collapsed={collapsedProcessIds.has(processGroup.id)}
-              onToggle={() => onToggleProcess(processGroup.id)}
-              conversationProps={conversationProps}
-            />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}
-
-function ProcessGroupSection({
-  group,
-  collapsed,
-  onToggle,
-  conversationProps,
-}: {
-  group: ProcessGroupData;
-  collapsed: boolean;
-  onToggle: () => void;
-  conversationProps: Omit<ConversationGroupProps, "group" | "expanded" | "onExpandedChange">;
-}): JSX.Element {
-  const totals = tokenTotals(group.logs);
-  const projectLabel = shortProjectPath(group.clientProjectFolder);
-  const sessionCount = group.sessions.length;
-  const logCount = group.logs.length;
-  const pendingTurnCount = countPendingTurns(group.logs);
-  const isWorking = pendingTurnCount > 0;
-  const processLabel =
-    group.clientPid !== null && group.clientPid !== undefined
-      ? `PID ${group.clientPid}`
-      : "Process unavailable";
-
-  return (
-    <section className="relative pl-3">
-      <button
-        type="button"
-        className="grid w-full min-w-0 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-2.5 rounded-md bg-[var(--inspector-surface-low)] px-2.5 py-2 text-left transition-colors hover:bg-[var(--inspector-surface-medium)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        onClick={onToggle}
-        aria-expanded={!collapsed}
-      >
-        <span className="inline-flex size-8 shrink-0 items-center justify-center text-[var(--inspector-status-watch)]">
-          <Cpu className="size-4" />
-        </span>
-
-        <span className="min-w-0">
-          <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-            <span className="font-mono text-xs font-semibold tabular-nums text-foreground">
-              {processLabel}
-            </span>
-            {isWorking && <AncestorActivityIndicator count={pendingTurnCount} />}
-            {projectLabel !== null && (
-              <span
-                className="inline-flex min-w-0 items-center gap-1 text-[11px] text-muted-foreground"
-                title={group.clientProjectFolder ?? projectLabel}
-              >
-                <FolderOpen className="size-3 shrink-0" />
-                <span className="truncate font-mono">{projectLabel}</span>
-              </span>
-            )}
-          </span>
-          <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
-            <span>
-              {sessionCount} session{sessionCount !== 1 ? "s" : ""}
-            </span>
-            <span>{logCount} req</span>
-          </span>
-        </span>
-
-        <span className="flex shrink-0 items-center gap-2">
-          {collapsed && (
-            <span className="hidden shrink-0 items-center gap-2 md:flex">
-              <SummaryChip label="IN" value={formatTokenCount(totals.inputTokens)} />
-              <SummaryChip label="OUT" value={formatTokenCount(totals.outputTokens)} />
-            </span>
-          )}
-          <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-md bg-[var(--inspector-surface-low)] text-muted-foreground transition-colors hover:bg-[var(--inspector-surface-medium)]">
-            {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
-          </span>
-        </span>
-      </button>
-
-      {!collapsed && (
-        <div className="space-y-1 pb-1 pl-3 pr-1 pt-1">
-          {group.sessions.map((session) => (
-            <ConversationGroup
-              key={session.id}
-              group={session}
-              {...conversationProps}
-              showClientIdentity={false}
-              showLogClientMetadata={false}
-              showProcessMetadata={false}
-            />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}