@tonyclaw/agent-inspector 2.1.15 → 2.1.16

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

@@ -1,20 +1,52 @@
-import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { type JSX, useCallback, useMemo, useState } from "react";
+import { ChevronDown, ChevronRight, Cpu, FolderOpen, Monitor } from "lucide-react";
 import type { CapturedLog } from "../../contracts";
+import { cn, formatTokens } from "../../lib/utils";
+import { ClientLogo, clientAppLabel, detectClientApp, type ClientApp } from "../clients/ClientLogo";
 import { ConversationGroup, type ConversationGroupProps } from "./ConversationGroup";
 import type { ConversationGroupData } from "./ConversationHeader";
-import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
 
 const VIRTUALIZE_GROUP_THRESHOLD = 30;
-const ESTIMATED_GROUP_HEIGHT = 112;
-const VIRTUAL_OVERSCAN = 6;
 
 type ConversationGroupListProps = Omit<
   ConversationGroupProps,
-  "group" | "standalone" | "expanded" | "onExpandedChange"
+  "group" | "expanded" | "onExpandedChange"
 > & {
   groups: ConversationGroupData[];
-  standalone: boolean;
+};
+
+export type ProcessGroupData = {
+  id: string;
+  clientPid: number | null;
+  clientProjectFolder: string | null;
+  sessions: ConversationGroupData[];
+  logs: CapturedLog[];
+};
+
+export type IdeGroupData = {
+  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 MutableIdeGroup = {
+  id: string;
+  client: ClientApp;
+  label: string;
+  userAgent: string | null;
+  processes: Map<string, MutableProcessGroup>;
+  logs: CapturedLog[];
 };
 
 export function shouldVirtualizeConversationGroups(groupCount: number): boolean {
@@ -34,111 +66,442 @@ export function findConversationGroupIndexForLog(
   return null;
 }
 
-export function ConversationGroupList({
-  groups,
-  standalone,
-  ...groupProps
-}: ConversationGroupListProps): JSX.Element {
-  if (!shouldVirtualizeConversationGroups(groups.length)) {
-    return (
-      <>
-        {groups.map((group) => (
-          <ConversationGroup key={group.id} group={group} standalone={standalone} {...groupProps} />
-        ))}
-      </>
+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 IDE";
+  const firstToken = userAgent.split(/[ /;]/)[0] ?? "";
+  if (firstToken === "") return "Unknown IDE";
+  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 firstTimestamp(logs: readonly CapturedLog[]): string {
+  return sortLogsByTimestamp(logs)[0]?.timestamp ?? "";
+}
+
+function sortByFirstLogTime<T extends { logs: readonly CapturedLog[] }>(items: readonly T[]): T[] {
+  return [...items].sort((a, b) => firstTimestamp(a.logs).localeCompare(firstTimestamp(b.logs)));
+}
+
+export function buildConversationHierarchy(
+  groups: readonly ConversationGroupData[],
+): IdeGroupData[] {
+  const ideGroups = new Map<string, MutableIdeGroup>();
+
+  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 ideGroup = ideGroups.get(currentIdeKey);
+
+    if (ideGroup === undefined) {
+      ideGroup = {
+        id: currentIdeKey,
+        client,
+        label: clientLabel(client, userAgent),
+        userAgent,
+        processes: new Map(),
+        logs: [],
+      };
+      ideGroups.set(currentIdeKey, ideGroup);
+    }
+
+    ideGroup.logs.push(...group.logs);
+
+    const clientPid = firstClientPid(group.logs);
+    const currentProcessKey = `${currentIdeKey}:${processKey(clientPid, projectFolder)}`;
+    let processGroup = ideGroup.processes.get(currentProcessKey);
+
+    if (processGroup === undefined) {
+      processGroup = {
+        id: currentProcessKey,
+        clientPid,
+        clientProjectFolder: projectFolder,
+        sessions: [],
+        logs: [],
+      };
+      ideGroup.processes.set(currentProcessKey, processGroup);
+    }
+
+    processGroup.sessions.push(group);
+    processGroup.logs.push(...group.logs);
+  }
+
+  const hierarchy: IdeGroupData[] = [];
+
+  for (const ideGroup of ideGroups.values()) {
+    const processes: ProcessGroupData[] = sortByFirstLogTime(
+      [...ideGroup.processes.values()].map((processGroup) => ({
+        id: processGroup.id,
+        clientPid: processGroup.clientPid,
+        clientProjectFolder: processGroup.clientProjectFolder,
+        sessions: sortByFirstLogTime(processGroup.sessions),
+        logs: sortLogsByTimestamp(processGroup.logs),
+      })),
     );
+
+    hierarchy.push({
+      id: ideGroup.id,
+      client: ideGroup.client,
+      label: ideGroup.label,
+      userAgent: ideGroup.userAgent,
+      processes,
+      logs: sortLogsByTimestamp(ideGroup.logs),
+    });
+  }
+
+  return sortByFirstLogTime(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 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 (
-    <VirtualizedConversationGroupList groups={groups} standalone={standalone} {...groupProps} />
+    <span
+      className={cn(
+        "border border-border bg-muted/40 inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-white/35">
+        {label}
+      </span>
+      <span className="font-mono tabular-nums text-slate-100">{value}</span>
+    </span>
   );
 }
 
-function VirtualizedConversationGroupList({
+export function ConversationGroupList({
   groups,
-  standalone,
   ...groupProps
 }: ConversationGroupListProps): JSX.Element {
-  const [expandedByGroupId, setExpandedByGroupId] = useState<ReadonlyMap<string, boolean>>(
-    () => new Map(),
+  const hierarchy = useMemo(() => buildConversationHierarchy(groups), [groups]);
+  const [collapsedIdeIds, setCollapsedIdeIds] = useState<ReadonlySet<string>>(() => new Set());
+  const [collapsedProcessIds, setCollapsedProcessIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
   );
 
-  const virtualizer = useWindowVirtualizer({
-    count: groups.length,
-    estimateSize: () => ESTIMATED_GROUP_HEIGHT,
-    overscan: VIRTUAL_OVERSCAN,
-    getItemKey: (index) => groups[index]?.id ?? index,
-  });
-
-  const setGroupExpanded = useCallback((groupId: string, expanded: boolean) => {
-    setExpandedByGroupId((previous) => {
-      const next = new Map(previous);
-      if (expanded) {
-        next.set(groupId, true);
+  const toggleIde = useCallback((id: string) => {
+    setCollapsedIdeIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) {
+        next.delete(id);
       } else {
-        next.delete(groupId);
+        next.add(id);
       }
       return next;
     });
   }, []);
 
-  const indexByLogId = useMemo(() => {
-    const result = new Map<number, number>();
-    for (let index = 0; index < groups.length; index++) {
-      const group = groups[index];
-      if (group === undefined) continue;
-      for (const log of group.logs) {
-        result.set(log.id, index);
+  const toggleProcess = useCallback((id: string) => {
+    setCollapsedProcessIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
       }
-    }
-    return result;
-  }, [groups]);
-
-  useEffect(() => {
-    const handleLogFocusRequest = (event: Event): void => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      const index = indexByLogId.get(request.logId);
-      if (index === undefined) return;
-      const group = groups[index];
-      if (group === undefined) return;
-      setGroupExpanded(group.id, true);
-      virtualizer.scrollToIndex(index, { align: "center" });
-    };
-
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [groups, indexByLogId, setGroupExpanded, virtualizer]);
+      return next;
+    });
+  }, []);
 
   return (
-    <div
-      className="relative w-full"
-      style={{ height: `${virtualizer.getTotalSize()}px` }}
-      data-virtualized-conversation-list="true"
+    <div className="space-y-4">
+      {hierarchy.map((ideGroup) => (
+        <IdeGroupSection
+          key={ideGroup.id}
+          group={ideGroup}
+          collapsed={collapsedIdeIds.has(ideGroup.id)}
+          collapsedProcessIds={collapsedProcessIds}
+          onToggleIde={() => toggleIde(ideGroup.id)}
+          onToggleProcess={toggleProcess}
+          conversationProps={groupProps}
+        />
+      ))}
+    </div>
+  );
+}
+
+function IdeGroupSection({
+  group,
+  collapsed,
+  collapsedProcessIds,
+  onToggleIde,
+  onToggleProcess,
+  conversationProps,
+}: {
+  group: IdeGroupData;
+  collapsed: boolean;
+  collapsedProcessIds: ReadonlySet<string>;
+  onToggleIde: () => 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;
+
+  return (
+    <section
+      className={cn("border border-border bg-card shadow-sm relative isolate rounded-[8px]")}
+      data-ide-group={group.id}
     >
-      {virtualizer.getVirtualItems().map((virtualItem) => {
-        const group = groups[virtualItem.index];
-        if (group === undefined) return null;
-        return (
-          <div
-            key={virtualItem.key}
-            data-index={virtualItem.index}
-            ref={virtualizer.measureElement}
-            className="absolute left-0 top-0 w-full"
-            style={{ transform: `translateY(${virtualItem.start}px)` }}
-          >
-            <ConversationGroup
-              group={group}
-              standalone={standalone}
-              expanded={expandedByGroupId.get(group.id) ?? false}
-              onExpandedChange={(expanded) => setGroupExpanded(group.id, expanded)}
-              {...groupProps}
+      <button
+        type="button"
+        className="flex w-full min-w-0 items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-white/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/45"
+        onClick={onToggleIde}
+        aria-expanded={!collapsed}
+      >
+        {group.client === "unknown" ? (
+          <span className="border border-border bg-muted/40 inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200">
+            <Monitor className="size-5" />
+          </span>
+        ) : (
+          <ClientLogo client={group.client} className="size-10 rounded-[8px] text-cyan-100" />
+        )}
+
+        <span className="min-w-0 flex-1">
+          <span className="flex min-w-0 items-center gap-2">
+            <span
+              className="truncate text-sm font-semibold text-slate-50"
+              title={group.userAgent ?? group.label}
+            >
+              {group.label}
+            </span>
+            <span className="rounded border border-cyan-200/15 bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75">
+              IDE
+            </span>
+          </span>
+          <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+            <span>
+              {group.processes.length} process{group.processes.length !== 1 ? "es" : ""}
+            </span>
+            <span>
+              {sessionCount} session{sessionCount !== 1 ? "s" : ""}
+            </span>
+            <span>
+              {logCount} log{logCount !== 1 ? "s" : ""}
+            </span>
+          </span>
+        </span>
+
+        <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="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">
+          {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
+        </span>
+      </button>
+
+      {!collapsed && (
+        <div className="space-y-3 border-t border-white/10 px-3 pb-3 pt-3 sm:px-4">
+          {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 processLabel =
+    group.clientPid !== null && group.clientPid !== undefined
+      ? `PID ${group.clientPid}`
+      : "process";
+
+  return (
+    <section className="relative pl-5">
+      <span className="absolute bottom-0 left-2 top-0 w-px bg-white/12" aria-hidden="true" />
+      <div className="border border-border bg-card shadow-sm overflow-hidden rounded-[8px]">
+        <button
+          type="button"
+          className="flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-white/[0.035] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/40"
+          onClick={onToggle}
+          aria-expanded={!collapsed}
+        >
+          <span className="border border-border bg-muted/40 inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100">
+            <Cpu className="size-4" />
+          </span>
+
+          <span className="min-w-0 flex-1">
+            <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-slate-100">
+                {processLabel}
+              </span>
+              {projectLabel !== null && (
+                <span
+                  className="inline-flex min-w-0 items-center gap-1 text-xs 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-xs text-muted-foreground">
+              <span>
+                {sessionCount} session{sessionCount !== 1 ? "s" : ""}
+              </span>
+              <span>
+                {logCount} log{logCount !== 1 ? "s" : ""}
+              </span>
+            </span>
+          </span>
+
+          <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="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-slate-200">
+            {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
+          </span>
+        </button>
+
+        {!collapsed && (
+          <div className="space-y-2 border-t border-white/10 p-2 sm:p-3">
+            {group.sessions.map((session) => (
+              <ConversationGroup
+                key={session.id}
+                group={session}
+                {...conversationProps}
+                showClientIdentity={false}
+                showLogClientMetadata={false}
+                showProcessMetadata={false}
+              />
+            ))}
           </div>
-        );
-      })}
-    </div>
+        )}
+      </div>
+    </section>
   );
 }