@tonyclaw/agent-inspector 2.1.15 → 2.1.17

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { type ReactNode, useCallback, useState } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -18,9 +18,37 @@ import type { CapturedLog } from "../../contracts";
 import { ConfirmDialog } from "../ui/confirm-dialog";
 import type { Provider } from "../providers/ProviderLogo";
 import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
-import { ProviderLogoStack, ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
+import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
+const HEADER_ACTION_BUTTON_CLASS =
+  "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+
+function HeaderMetric({
+  icon,
+  children,
+  title,
+  className,
+}: {
+  icon: ReactNode;
+  children: ReactNode;
+  title?: string;
+  className?: string;
+}): JSX.Element {
+  return (
+    <span
+      className={cn(
+        "border border-border bg-muted/30 inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        className,
+      )}
+      title={title}
+    >
+      {icon}
+      <span className="min-w-0 font-mono tabular-nums">{children}</span>
+    </span>
+  );
+}
+
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;
@@ -31,8 +59,8 @@ export type ConversationHeaderProps = {
   expanded: boolean;
   onToggle: () => void;
   /** Unique providers whose models appear in this group, with their distinct
-   * model names. Rendered as a row of provider logos next to the header —
-   * one per provider so model-switching inside a single session is visible
+   * model names. Rendered as a row of provider logos next to the header, one
+   * per provider so model-switching inside a single session is visible.
    * at a glance. `undefined` hides the strip (default). */
   providers?: { provider: Provider; models: string[] }[];
   /** When true and the group is collapsed, show a spinner instead of the
@@ -50,6 +78,10 @@ export type ConversationHeaderProps = {
    * Only shown as a secondary label when the session lacks a real
    * `sessionId` (the same fallback path used for `clientPid`). */
   clientProjectFolder?: string | null;
+  /** Show IDE identity in the header. Parent IDE rows can disable this to avoid repetition. */
+  showClientIdentity?: boolean;
+  /** Show process/project metadata in the header. Parent process rows can disable this. */
+  showProcessMetadata?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs in this group. After confirmation the parent removes them
@@ -71,6 +103,8 @@ export function ConversationHeader({
   userAgent,
   clientPid,
   clientProjectFolder,
+  showClientIdentity = true,
+  showProcessMetadata = true,
   timeDisplayFormat,
   onClear,
 }: ConversationHeaderProps): JSX.Element {
@@ -100,6 +134,14 @@ export function ConversationHeader({
   const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
   const clientTooltip =
     detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
+  const isFallbackConversation = conversationId.startsWith("PID:") || conversationId.includes("|");
+  const compactSessionLabel =
+    conversationId.length > 24
+      ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
+      : conversationId;
+
+  const timeLabel = formatTimestampRange(startTime, endTime, timeDisplayFormat);
+  const callsLabel = `${totalCalls} call${totalCalls !== 1 ? "s" : ""}`;
 
   return (
     <div
@@ -108,11 +150,11 @@ export function ConversationHeader({
       data-nav-id={`conv-${conversationId}`}
       data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
-        "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
-        "hover:bg-muted/50",
+        "border border-border bg-card shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
+        "hover:border-cyan-200/20",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+        "sticky top-0 z-10 mb-2",
+        "focus-visible:ring-1 focus-visible:ring-cyan-300/35 focus-visible:outline-none",
       )}
       onClick={onToggle}
       onKeyDown={(e) => {
@@ -124,143 +166,134 @@ export function ConversationHeader({
       }}
     >
       {/* Provider logos: first visual element whenever model/provider logos are available. */}
-      <ProviderLogoStack items={providerLogoItems} ariaLabel="Models used in this session" />
-
-      {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
-      <span className={ROW_CHEVRON_SLOT_CLASS}>
-        {expanded ? (
-          <ChevronDown className="size-4 shrink-0" />
-        ) : isLoading ? (
-          <Loader2 className="size-4 shrink-0 animate-spin" />
-        ) : (
-          <ChevronRight className="size-4 shrink-0" />
-        )}
-      </span>
+      <ProviderLogoStack
+        items={providerLogoItems}
+        ariaLabel="Models used in this session"
+        className="mt-0.5"
+      />
 
-      {/* Session identifier.
-          - Real session id (e.g. `sess_abc123...`) → render the id with the
-            standard ellipsis truncation; show `PID <n>` as a secondary pill
-            when we know the originating process.
-          - Fallback id (no sessionId was emitted) → the conversationId is
-            already a synthesized `PID:<n>|<folder>` marker; render the PID
-            as the primary identifier (purple, same weight as a real id)
-            and the project folder as a secondary muted label. */}
-      {conversationId.startsWith("PID:") || conversationId.includes("|") ? (
-        <>
-          {clientPid !== null && clientPid !== undefined ? (
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          {isFallbackConversation && showProcessMetadata ? (
+            clientPid !== null && clientPid !== undefined ? (
+              <span
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200"
+                title={`PID ${clientPid}`}
+              >
+                PID {clientPid}
+              </span>
+            ) : (
+              <span
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200"
+                title={conversationId}
+              >
+                {conversationId}
+              </span>
+            )
+          ) : (
             <span
-              className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
-              title={`PID ${clientPid}`}
+              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200"
+              title={conversationId}
             >
-              PID {clientPid}
-            </span>
-          ) : (
-            <span className="text-purple-400/90 font-mono text-xs font-semibold shrink-0">
-              {conversationId}
+              {isFallbackConversation ? "sessionless" : compactSessionLabel}
             </span>
           )}
-          {clientProjectFolder !== null &&
+
+          {!isFallbackConversation &&
+            showProcessMetadata &&
+            clientPid !== null &&
+            clientPid !== undefined && (
+              <span
+                className="border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
+                title={`Client process ID ${clientPid}`}
+              >
+                PID {clientPid}
+              </span>
+            )}
+
+          {isFallbackConversation &&
+            showProcessMetadata &&
+            clientProjectFolder !== null &&
             clientProjectFolder !== undefined &&
             clientProjectFolder !== "" && (
               <span
-                className="text-muted-foreground text-xs font-mono truncate max-w-[200px] shrink-0"
+                className="min-w-0 max-w-[240px] truncate font-mono text-xs text-muted-foreground"
                 title={clientProjectFolder}
               >
                 {clientProjectFolder}
               </span>
             )}
-        </>
-      ) : (
-        <>
-          <span
-            className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
-            title={conversationId}
-          >
-            {conversationId.length > 24
-              ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
-              : conversationId}
-          </span>
-          {clientPid !== null && clientPid !== undefined && (
+
+          {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              className="text-muted-foreground text-xs font-mono tabular-nums shrink-0 px-1.5 py-0.5 rounded border border-border bg-muted/40"
-              title={`Client process ID ${clientPid}`}
+              className="border border-border bg-muted/30 inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground"
+              title={clientTooltip ?? clientDisplayLabel}
             >
-              PID {clientPid}
+              <ClientLogo client={clientApp} className="size-4 shrink-0" />
+              <span className="truncate font-mono tabular-nums">{clientDisplayLabel}</span>
             </span>
           )}
-        </>
-      )}
-
-      {/* Client app / User-Agent */}
-      {clientDisplayLabel !== null && clientDisplayLabel !== "" && (
-        <span
-          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
-          title={clientTooltip ?? clientDisplayLabel}
-        >
-          <ClientLogo client={clientApp} className="size-5" />
-          <span className="font-mono tabular-nums truncate max-w-[120px]">
-            {clientDisplayLabel}
-          </span>
-        </span>
-      )}
-
-      {/* Time range */}
-      <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-        <Clock className="size-3" />
-        <span className="font-mono tabular-nums">
-          {formatTimestampRange(startTime, endTime, timeDisplayFormat)}
         </span>
-      </span>
 
-      {/* Total calls */}
-      <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-        <MessageSquare className="size-3" />
-        <span className="font-mono tabular-nums">
-          {totalCalls} call{totalCalls !== 1 ? "s" : ""}
+        <span className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5">
+          <HeaderMetric icon={<Clock className="size-3 shrink-0" />} title={timeLabel}>
+            {timeLabel}
+          </HeaderMetric>
+          <HeaderMetric icon={<MessageSquare className="size-3 shrink-0" />}>
+            {callsLabel}
+          </HeaderMetric>
+          <HeaderMetric icon={<Zap className="size-3 shrink-0" />} className="max-w-full">
+            <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
+            {" / "}
+            <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
+          </HeaderMetric>
         </span>
       </span>
 
-      {/* Token counts */}
-      <span className="flex items-center gap-1 text-xs shrink-0">
-        <Zap className="size-3 text-muted-foreground" />
-        <span className="font-mono tabular-nums">
-          <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
-          {" / "}
-          <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
-        </span>
-      </span>
-
-      {/* Spacer */}
-      <span className="flex-1 min-w-0" />
-
-      {/* Open this session in a new tab - deep link to /session/$id */}
-      <button
-        type="button"
-        onClick={handleOpenInNewTab}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleOpenInNewTab(e);
-          }
-        }}
-        aria-label={`Open session ${conversationId} in a new tab`}
-        title="Open this session in a new tab"
-        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer"
-      >
-        <ExternalLink className="size-3.5" />
-      </button>
-
-      {/* Per-group Clear - does not toggle the group's expand state */}
-      {onClear !== undefined && (
+      <span className="flex shrink-0 items-start gap-1.5">
+        {/* Open this session in a new tab - deep link to /session/$id */}
         <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-8 rounded hover:bg-muted cursor-pointer"
+          onClick={handleOpenInNewTab}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleOpenInNewTab(e);
+            }
+          }}
+          aria-label={`Open session ${conversationId} in a new tab`}
+          title="Open this session in a new tab"
+          className={HEADER_ACTION_BUTTON_CLASS}
         >
-          <Trash2 className="size-3.5" />
+          <ExternalLink className="size-3.5" />
         </button>
-      )}
+
+        {/* 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={HEADER_ACTION_BUTTON_CLASS}
+          >
+            <Trash2 className="size-3.5" />
+          </button>
+        )}
+
+        {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
+        <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"
+          aria-hidden="true"
+        >
+          {expanded ? (
+            <ChevronDown className="size-4 shrink-0" />
+          ) : isLoading ? (
+            <Loader2 className="size-4 shrink-0 animate-spin" />
+          ) : (
+            <ChevronRight className="size-4 shrink-0" />
+          )}
+        </span>
+      </span>
 
       <ConfirmDialog
         open={confirmOpen}
@@ -312,10 +345,10 @@ export function hasMixedApiFormat(logs: CapturedLog[]): boolean {
 }
 
 export function getConversationId(log: CapturedLog): string {
-  if (log.isTest === true) return "provider-test";
   if (log.sessionId !== null && log.sessionId !== "" && log.sessionId !== undefined) {
     return log.sessionId;
   }
+  if (log.isTest === true) return "provider-test";
   const hasPid = log.clientPid !== null && log.clientPid !== undefined;
   const hasFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== undefined;
   if (!hasPid && !hasFolder) return "default";