@tonyclaw/agent-inspector 3.0.27 → 3.0.29

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

@@ -1,12 +1,20 @@
-import { type JSX, useCallback, useMemo, useState } from "react";
+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, detectClientApp, type ClientApp } from "../clients/ClientLogo";
+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,
@@ -23,7 +31,7 @@ export type ProcessGroupData = {
   logs: CapturedLog[];
 };
 
-export type IdeGroupData = {
+export type ClientGroupData = {
   id: string;
   client: ClientApp;
   label: string;
@@ -40,7 +48,7 @@ type MutableProcessGroup = {
   logs: CapturedLog[];
 };
 
-type MutableIdeGroup = {
+type MutableClientGroup = {
   id: string;
   client: ClientApp;
   label: string;
@@ -109,9 +117,9 @@ function groupClient(group: ConversationGroupData): ClientApp {
 }
 
 function fallbackClientLabel(userAgent: string | null): string {
-  if (userAgent === null || userAgent === "") return "Unknown IDE";
+  if (userAgent === null || userAgent === "") return "Unknown client";
   const firstToken = userAgent.split(/[ /;]/)[0] ?? "";
-  if (firstToken === "") return "Unknown IDE";
+  if (firstToken === "") return "Unknown client";
   return firstToken;
 }
 
@@ -139,28 +147,56 @@ 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 latestTimestamp(logs: readonly CapturedLog[]): string {
+  let latest = "";
+  for (const log of logs) {
+    if (log.timestamp > latest) latest = log.timestamp;
+  }
+  return latest;
 }
 
-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 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[],
-): IdeGroupData[] {
-  const ideGroups = new Map<string, MutableIdeGroup>();
+): 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 ideGroup = ideGroups.get(currentIdeKey);
+    let clientGroup = clientGroups.get(currentIdeKey);
 
-    if (ideGroup === undefined) {
-      ideGroup = {
+    if (clientGroup === undefined) {
+      clientGroup = {
         id: currentIdeKey,
         client,
         label: clientLabel(client, userAgent),
@@ -168,14 +204,14 @@ export function buildConversationHierarchy(
         processes: new Map(),
         logs: [],
       };
-      ideGroups.set(currentIdeKey, ideGroup);
+      clientGroups.set(currentIdeKey, clientGroup);
     }
 
-    ideGroup.logs.push(...group.logs);
+    clientGroup.logs.push(...group.logs);
 
     const clientPid = firstClientPid(group.logs);
     const currentProcessKey = `${currentIdeKey}:${processKey(clientPid, projectFolder)}`;
-    let processGroup = ideGroup.processes.get(currentProcessKey);
+    let processGroup = clientGroup.processes.get(currentProcessKey);
 
     if (processGroup === undefined) {
       processGroup = {
@@ -185,37 +221,37 @@ export function buildConversationHierarchy(
         sessions: [],
         logs: [],
       };
-      ideGroup.processes.set(currentProcessKey, processGroup);
+      clientGroup.processes.set(currentProcessKey, processGroup);
     }
 
     processGroup.sessions.push(group);
     processGroup.logs.push(...group.logs);
   }
 
-  const hierarchy: IdeGroupData[] = [];
+  const hierarchy: ClientGroupData[] = [];
 
-  for (const ideGroup of ideGroups.values()) {
-    const processes: ProcessGroupData[] = sortByFirstLogTime(
-      [...ideGroup.processes.values()].map((processGroup) => ({
+  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: sortByFirstLogTime(processGroup.sessions),
+        sessions: sortByOperationalPriority(processGroup.sessions),
         logs: sortLogsByTimestamp(processGroup.logs),
       })),
     );
 
     hierarchy.push({
-      id: ideGroup.id,
-      client: ideGroup.client,
-      label: ideGroup.label,
-      userAgent: ideGroup.userAgent,
+      id: clientGroup.id,
+      client: clientGroup.client,
+      label: clientGroup.label,
+      userAgent: clientGroup.userAgent,
       processes,
-      logs: sortLogsByTimestamp(ideGroup.logs),
+      logs: sortLogsByTimestamp(clientGroup.logs),
     });
   }
 
-  return sortByFirstLogTime(hierarchy);
+  return sortByOperationalPriority(hierarchy);
 }
 
 function formatTokenCount(count: number): string {
@@ -248,6 +284,51 @@ function countSessions(processes: readonly ProcessGroupData[]): number {
   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
@@ -273,44 +354,30 @@ function SummaryChip({
   return (
     <span
       className={cn(
-        "bg-white/[0.045] inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
+        "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 tracking-[0.12em] text-white/35">
-        {label}
-      </span>
-      <span className="font-mono tabular-nums text-slate-100">{value}</span>
+      <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 PendingTurnBadge({
-  count,
-  label = "Turn open",
-}: {
-  count: number;
-  label?: string;
-}): JSX.Element {
+function AncestorActivityIndicator({ count }: { count: number }): JSX.Element {
+  const label = `${count} open turn${count === 1 ? "" : "s"}`;
   return (
     <span
-      className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-md bg-amber-300/[0.10] px-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-amber-100/90 ring-1 ring-amber-200/10"
-      title={`${count} turn${count !== 1 ? "s" : ""} not finished yet`}
+      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" />
-      {label}
-      {count > 1 && <span className="tabular-nums">x{count}</span>}
-    </span>
-  );
-}
-
-function LoadingSweep(): JSX.Element {
-  return (
-    <span
-      className="pointer-events-none absolute inset-x-3 bottom-0 h-px overflow-hidden rounded-full bg-white/[0.06]"
-      aria-hidden="true"
-    >
-      <span className="absolute inset-y-0 left-0 w-1/3 animate-pulse rounded-full bg-amber-200/65 shadow-[0_0_14px_rgba(252,211,77,0.32)]" />
+      {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>
   );
 }
@@ -320,13 +387,45 @@ export function ConversationGroupList({
   ...groupProps
 }: ConversationGroupListProps): JSX.Element {
   const hierarchy = useMemo(() => buildConversationHierarchy(groups), [groups]);
-  const [collapsedIdeIds, setCollapsedIdeIds] = useState<ReadonlySet<string>>(() => new Set());
-  const [collapsedProcessIds, setCollapsedProcessIds] = useState<ReadonlySet<string>>(
+  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]);
 
-  const toggleIde = useCallback((id: string) => {
-    setCollapsedIdeIds((previous) => {
+  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);
@@ -350,14 +449,14 @@ export function ConversationGroupList({
   }, []);
 
   return (
-    <div className="space-y-4">
-      {hierarchy.map((ideGroup) => (
-        <IdeGroupSection
-          key={ideGroup.id}
-          group={ideGroup}
-          collapsed={collapsedIdeIds.has(ideGroup.id)}
+    <div className="space-y-2">
+      {hierarchy.map((clientGroup) => (
+        <ClientGroupSection
+          key={clientGroup.id}
+          group={clientGroup}
+          collapsed={collapsedClientIds.has(clientGroup.id)}
           collapsedProcessIds={collapsedProcessIds}
-          onToggleIde={() => toggleIde(ideGroup.id)}
+          onToggleClient={() => toggleClient(clientGroup.id)}
           onToggleProcess={toggleProcess}
           conversationProps={groupProps}
         />
@@ -366,18 +465,18 @@ export function ConversationGroupList({
   );
 }
 
-function IdeGroupSection({
+function ClientGroupSection({
   group,
   collapsed,
   collapsedProcessIds,
-  onToggleIde,
+  onToggleClient,
   onToggleProcess,
   conversationProps,
 }: {
-  group: IdeGroupData;
+  group: ClientGroupData;
   collapsed: boolean;
   collapsedProcessIds: ReadonlySet<string>;
-  onToggleIde: () => void;
+  onToggleClient: () => void;
   onToggleProcess: (id: string) => void;
   conversationProps: Omit<ConversationGroupProps, "group" | "expanded" | "onExpandedChange">;
 }): JSX.Element {
@@ -390,64 +489,64 @@ function IdeGroupSection({
   return (
     <section
       className={cn(
-        "bg-card/75 shadow-sm relative isolate overflow-hidden rounded-[8px]",
-        isWorking && "bg-card/85",
+        "relative isolate overflow-hidden rounded-[8px] bg-card/65",
+        isWorking && "bg-card/80",
       )}
       data-ide-group={group.id}
     >
       <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}
+        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="bg-white/[0.045] inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200">
-            <Monitor className="size-5" />
+          <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-10 rounded-[8px] text-cyan-100" />
+          <ClientLogo client={group.client} className="size-9 rounded-md" decorative={true} />
         )}
 
-        <span className="min-w-0 flex-1">
+        <span className="min-w-0">
           <span className="flex min-w-0 items-center gap-2">
             <span
-              className="truncate text-sm font-semibold text-slate-50"
+              className="truncate text-sm font-semibold text-foreground"
               title={group.userAgent ?? group.label}
             >
               {group.label}
             </span>
-            <span className="rounded 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 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 && <PendingTurnBadge count={pendingTurnCount} label="Turn open" />}
+            {isWorking && <AncestorActivityIndicator count={pendingTurnCount} />}
           </span>
-          <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+          <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} log{logCount !== 1 ? "s" : ""}
-            </span>
+            <span>{logCount} req</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="bg-white/[0.045] hover:bg-white/[0.075] 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 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>
-      {isWorking && <LoadingSweep />}
 
       {!collapsed && (
-        <div className="space-y-3 px-3 pb-3 pt-2 sm:px-4">
+        <div className="space-y-0.5 px-2 pb-2 pt-0.5">
           {group.processes.map((processGroup) => (
             <ProcessGroupSection
               key={processGroup.id}
@@ -483,74 +582,71 @@ function ProcessGroupSection({
   const processLabel =
     group.clientPid !== null && group.clientPid !== undefined
       ? `PID ${group.clientPid}`
-      : "process";
+      : "Process unavailable";
 
   return (
-    <section className="relative pl-5">
-      <span className="absolute bottom-1 left-2 top-1 w-px bg-white/[0.055]" aria-hidden="true" />
-      <div className="bg-black/[0.10] relative 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="bg-white/[0.045] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100">
-            <Cpu className="size-4" />
-          </span>
+    <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 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>
-              {isWorking && <PendingTurnBadge count={pendingTurnCount} label="Turn open" />}
-              {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 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>
-            <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" : ""}
+            {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>
-                {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 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="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200">
+        <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>
-        </button>
-        {isWorking && <LoadingSweep />}
-
-        {!collapsed && (
-          <div className="space-y-2 p-2 pt-1 sm:p-3 sm:pt-2">
-            {group.sessions.map((session) => (
-              <ConversationGroup
-                key={session.id}
-                group={session}
-                {...conversationProps}
-                showClientIdentity={false}
-                showLogClientMetadata={false}
-                showProcessMetadata={false}
-              />
-            ))}
-          </div>
-        )}
-      </div>
+        </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>
   );
 }