@tonyclaw/agent-inspector 2.1.14 → 2.1.16

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

@@ -7,7 +7,6 @@ import {
   Loader2,
   MessageSquare,
   Trash2,
-  User,
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
@@ -17,8 +16,9 @@ import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
 import { ConfirmDialog } from "../ui/confirm-dialog";
-import { ProviderLogo, type Provider } from "../providers/ProviderLogo";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import type { Provider } from "../providers/ProviderLogo";
+import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
+import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 export type ConversationHeaderProps = {
@@ -31,8 +31,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 +50,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 +75,8 @@ export function ConversationHeader({
   userAgent,
   clientPid,
   clientProjectFolder,
+  showClientIdentity = true,
+  showProcessMetadata = true,
   timeDisplayFormat,
   onClear,
 }: ConversationHeaderProps): JSX.Element {
@@ -89,6 +95,22 @@ export function ConversationHeader({
     },
     [conversationId],
   );
+  const providerLogoItems =
+    providers?.map(({ provider, models }) => ({
+      provider,
+      tooltip: models.length === 1 ? (models[0] ?? provider) : models.join(", "),
+    })) ?? [];
+  const clientApp = detectClientApp({ userAgent, conversationId, clientProjectFolder });
+  const detectedClientLabel = clientAppLabel(clientApp);
+  const hasUserAgent = userAgent !== null && userAgent !== undefined && userAgent !== "";
+  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;
 
   return (
     <div
@@ -97,10 +119,10 @@ 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-center gap-3 rounded-[8px] px-3 py-2 transition-colors",
+        "hover:border-cyan-200/20",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
+        "sticky top-0 z-10 mb-2",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
       )}
       onClick={onToggle}
@@ -112,34 +134,28 @@ export function ConversationHeader({
         }
       }}
     >
-      {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
-      {expanded ? (
-        <ChevronDown className="size-4 text-muted-foreground shrink-0" />
-      ) : isLoading ? (
-        <Loader2 className="size-4 animate-spin text-muted-foreground shrink-0" />
-      ) : (
-        <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-      )}
+      {/* Provider logos: first visual element whenever model/provider logos are available. */}
+      <ProviderLogoStack items={providerLogoItems} ariaLabel="Models used in this session" />
 
       {/* Session identifier.
-          - Real session id (e.g. `sess_abc123...`) → render the id with the
+          - 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
+          - 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("|") ? (
+      {isFallbackConversation && showProcessMetadata ? (
         <>
           {clientPid !== null && clientPid !== undefined ? (
             <span
-              className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+              className="shrink-0 font-mono text-xs font-semibold text-violet-200"
               title={`PID ${clientPid}`}
             >
               PID {clientPid}
             </span>
           ) : (
-            <span className="text-purple-400/90 font-mono text-xs font-semibold shrink-0">
+            <span className="shrink-0 font-mono text-xs font-semibold text-violet-200">
               {conversationId}
             </span>
           )}
@@ -157,16 +173,14 @@ export function ConversationHeader({
       ) : (
         <>
           <span
-            className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+            className="shrink-0 font-mono text-xs font-semibold text-violet-200"
             title={conversationId}
           >
-            {conversationId.length > 24
-              ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
-              : conversationId}
+            {isFallbackConversation ? "sessionless" : compactSessionLabel}
           </span>
-          {clientPid !== null && clientPid !== undefined && (
+          {showProcessMetadata && clientPid !== null && clientPid !== undefined && (
             <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"
+              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}
@@ -175,41 +189,17 @@ export function ConversationHeader({
         </>
       )}
 
-      {/* User-Agent */}
-      {userAgent !== null && userAgent !== undefined && userAgent !== "" && (
+      {/* Client app / User-Agent */}
+      {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
         <span
           className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
-          title={userAgent}
+          title={clientTooltip ?? clientDisplayLabel}
         >
-          <User className="size-3" />
-          <span className="font-mono tabular-nums truncate max-w-[120px]">{userAgent}</span>
-        </span>
-      )}
-
-      {/* Provider logos — one per unique provider used in this session. When
-         a session switched models mid-stream (e.g. claude-3-5 → deepseek-v4)
-         multiple logos appear side-by-side; tooltip lists every distinct
-         model name. */}
-      {providers !== undefined && providers.length > 0 && (
-        <TooltipProvider delayDuration={150}>
-          <span
-            className="flex items-center gap-0.5 shrink-0"
-            aria-label="Models used in this session"
-          >
-            {providers.map(({ provider, models }) => (
-              <Tooltip key={provider}>
-                <TooltipTrigger asChild>
-                  <span className="shrink-0">
-                    <ProviderLogo provider={provider} className="size-4" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {models.length === 1 ? models[0] : models.join(", ")}
-                </TooltipContent>
-              </Tooltip>
-            ))}
+          <ClientLogo client={clientApp} className="size-5" />
+          <span className="font-mono tabular-nums truncate max-w-[120px]">
+            {clientDisplayLabel}
           </span>
-        </TooltipProvider>
+        </span>
       )}
 
       {/* Time range */}
@@ -252,7 +242,7 @@ export function ConversationHeader({
         }}
         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"
+        className="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"
       >
         <ExternalLink className="size-3.5" />
       </button>
@@ -264,12 +254,26 @@ export function ConversationHeader({
           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"
+          className="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"
         >
           <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>
+
       <ConfirmDialog
         open={confirmOpen}
         onOpenChange={setConfirmOpen}
@@ -320,10 +324,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";

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

@@ -75,7 +75,7 @@ const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
 
 const TAB_TRIGGER_CLASS =
-  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-cyan-400/[0.05] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-cyan-300/[0.04] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+  "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:border-white/10 hover:bg-white/[0.045] hover:text-foreground data-[state=active]:border-cyan-200/25 data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 
 function createEmptyBodyPreviewState(totalBytes: number | null = null): BodyPreviewState {
   return {
@@ -140,7 +140,7 @@ function ExpandedPanel({
   return (
     <div
       className={cn(
-        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-cyan-300/10 bg-[#05070a] p-3 shadow-[0_16px_45px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.05)]",
+        "border border-border bg-card shadow-sm inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
         className,
       )}
     >
@@ -151,7 +151,7 @@ function ExpandedPanel({
 
 function EmptyState({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <div className="rounded-md border border-dashed border-white/10 bg-white/[0.02] px-3 py-5 text-center text-xs italic text-muted-foreground">
+    <div className="border border-border bg-muted/40 rounded-md border-dashed px-3 py-5 text-center text-xs italic text-muted-foreground">
       {children}
     </div>
   );
@@ -159,7 +159,7 @@ function EmptyState({ children }: { children: ReactNode }): JSX.Element {
 
 function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <pre className="inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-white/10 bg-black/30 p-3 font-mono text-xs leading-relaxed text-muted-foreground">
+    <pre className="border border-border bg-card shadow-sm inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground">
       {children}
     </pre>
   );
@@ -231,7 +231,7 @@ function BodyPreviewNotice({
             type="button"
             variant="outline"
             size="sm"
-            className="h-7 border-white/10 bg-black/20 text-xs text-cyan-100 hover:border-cyan-300/35 hover:bg-cyan-400/10"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-cyan-100"
             onClick={onLoadMore}
           >
             {actionLabel}
@@ -257,13 +257,13 @@ function HeaderRows({
   if (entries.length === 0) return <EmptyState>{emptyLabel}</EmptyState>;
 
   return (
-    <div className="overflow-hidden rounded-md border border-white/10 bg-black/20 font-mono text-xs">
+    <div className="border border-border bg-card shadow-sm overflow-hidden rounded-[8px] font-mono text-xs">
       {entries.map(([key, value]) => (
         <div
           key={key}
-          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/5 last:border-b-0"
+          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/10 last:border-b-0"
         >
-          <div className="min-w-0 truncate border-r border-white/5 bg-white/[0.03] px-2.5 py-2 font-semibold text-cyan-200">
+          <div className="min-w-0 truncate border-r border-white/10 bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200">
             {key}
           </div>
           <div className="min-w-0 truncate px-2.5 py-2 text-muted-foreground" title={value}>
@@ -277,6 +277,8 @@ function HeaderRows({
 
 export type LogEntryProps = {
   log: CapturedLog;
+  /** Human-facing ordinal inside the current session. Internal lookups still use `log.id`. */
+  displayNumber: number;
   viewMode?: "simple" | "full";
   /** Live "strip Claude Code billing header" flag, sourced once at the viewer
    * container. Hoisted out of `LogEntry` so a single SWR subscription serves
@@ -295,6 +297,8 @@ export type LogEntryProps = {
   cacheTrend?: CacheTrendEntry | null;
   /** Callback to open CompareDrawer with this log and its immediate predecessor. */
   onCompareWithPrevious?: (log: CapturedLog) => void;
+  /** Show client PID/project metadata on the log header row. */
+  showClientMetadata?: boolean;
 };
 
 function DiffToggleButton({
@@ -314,7 +318,7 @@ function DiffToggleButton({
             "h-8 border-white/10 text-xs shadow-none",
             active
               ? "bg-cyan-300 text-black hover:bg-cyan-200"
-              : "bg-[#0a0d11] text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100",
+              : "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-cyan-100",
           )}
           onClick={onClick}
           aria-pressed={active}
@@ -361,12 +365,14 @@ const HeadersDiffContent = memo(function ({
 
 export const LogEntry = memo(function ({
   log,
+  displayNumber,
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   cacheTrend = null,
   onCompareWithPrevious,
+  showClientMetadata = true,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
@@ -429,7 +435,7 @@ export const LogEntry = memo(function ({
   );
 
   // Headers are rendered as a flat list, so we copy them as pretty-printed JSON.
-  // Only build the string when there's at least one entry — empty headers would
+  // Only build the string when there's at least one entry; empty headers would
   // otherwise copy "{}", which is misleading.
   const headersText = useMemo(
     () =>
@@ -715,16 +721,16 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div
         className={cn(
-          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
+          "border border-border bg-card shadow-sm relative mb-2 overflow-hidden rounded-[8px] transition-[background-color,border-color,box-shadow]",
           expanded
-            ? "border-cyan-300/25 shadow-[0_24px_80px_rgba(0,0,0,0.34),0_0_0_1px_rgba(103,232,249,0.04),inset_0_1px_0_rgba(255,255,255,0.06)]"
-            : "border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.16)] hover:border-cyan-300/15",
+            ? "border-cyan-200/25 shadow-[0_24px_80px_rgba(0,0,0,0.36),0_0_0_1px_rgba(103,232,249,0.05),inset_0_1px_0_rgba(255,255,255,0.14)]"
+            : "hover:border-cyan-200/18",
         )}
       >
         <div
           className={cn(
             "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
-            expanded ? "bg-cyan-300/45 shadow-[0_0_20px_rgba(103,232,249,0.28)]" : "bg-white/10",
+            expanded ? "bg-cyan-200/55 shadow-[0_0_20px_rgba(103,232,249,0.26)]" : "bg-white/12",
           )}
           aria-hidden="true"
         />
@@ -734,12 +740,14 @@ export const LogEntry = memo(function ({
         />
         <LogEntryHeader
           log={displayLog}
+          displayNumber={displayNumber}
           messageCount={requestAnalysis.messageCount}
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
           onToggle={handleToggleExpanded}
           cacheTrend={cacheTrend}
           slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          showClientMetadata={showClientMetadata}
           timeDisplayFormat={timeDisplayFormat}
           activeTab={activeTab}
           tabActions={tabActions}
@@ -754,18 +762,18 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div
-            className="relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2"
+            className="relative border-t border-white/10 bg-black/[0.18] pt-2"
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
           >
             <div
-              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-cyan-300/[0.035] to-transparent"
+              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/[0.05] to-transparent"
               aria-hidden="true"
             />
             <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
               <TabsList
                 variant="line"
-                className="inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-cyan-300/10 bg-black/10 p-0"
+                className="border border-border bg-muted/40 inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
               >
                 {viewMode === "full" && (
                   <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
@@ -1051,7 +1059,12 @@ export const LogEntry = memo(function ({
         )}
       </div>
       <Suspense fallback={null}>
-        <LazyReplayDialog log={displayLog} open={replayOpen} onOpenChange={setReplayOpen} />
+        <LazyReplayDialog
+          log={displayLog}
+          displayNumber={displayNumber}
+          open={replayOpen}
+          onOpenChange={setReplayOpen}
+        />
       </Suspense>
     </TooltipProvider>
   );