@tonyclaw/agent-inspector 2.1.14 → 2.1.16

package/src/components/providers/ProvidersPanel.tsx

@@ -521,7 +521,7 @@ export function ProvidersPanel({
   if (showForm || editingProvider) {
     return (
       <div className="space-y-4">
-        <div className="flex items-center justify-between sticky top-0 bg-background z-10 pb-2">
+        <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-10 flex items-center justify-between rounded-[8px] px-3 py-2">
           <h3 className="text-lg font-medium">
             {editingProvider ? "Edit Provider" : "Add New Provider"}
           </h3>
@@ -540,7 +540,7 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between sticky top-0 z-10 bg-background pb-2">
+      <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-10 flex items-center justify-between rounded-[8px] px-3 py-2">
         <h3 className="text-lg font-medium">Providers</h3>
         <div className="flex items-center gap-2">
           <TooltipProvider>
@@ -608,7 +608,7 @@ export function ProvidersPanel({
       </div>
 
       {configPath !== null && (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-md px-3 py-2">
+        <div className="border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-xs text-muted-foreground">
           <span className="shrink-0">Config:</span>
           <span className="font-mono truncate" title={configPath}>
             {configPath}
@@ -644,14 +644,14 @@ export function ProvidersPanel({
       )}
 
       {error !== null && (
-        <div className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
+        <div className="border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-sm text-destructive">
           <AlertCircle className="size-4 shrink-0" />
           {error}
         </div>
       )}
 
       {providers.length === 0 ? (
-        <div className="text-center py-12 space-y-3">
+        <div className="border border-border bg-card shadow-sm space-y-3 rounded-[8px] py-12 text-center">
           <p className="text-sm text-muted-foreground">No providers configured yet.</p>
           <Button onClick={() => setShowForm(true)} variant="outline" size="sm">
             <Plus className="size-4" />
@@ -660,7 +660,7 @@ export function ProvidersPanel({
         </div>
       ) : (
         <div className="space-y-3">
-          <div className="flex gap-1 border-b border-border">
+          <div className="border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1">
             {(["all", "personal", "company"] as const).map((tab) => (
               <TooltipProvider key={tab}>
                 <Tooltip>

package/src/components/providers/SettingsDialog.tsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
+import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
@@ -61,7 +62,13 @@ export function SettingsDialog(): JSX.Element {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost" size="icon" className="size-8">
+        <Button
+          variant="ghost"
+          size="icon"
+          className={INSPECTOR_ICON_TRIGGER_CLASS}
+          aria-label="Settings"
+          title="Settings"
+        >
           <Settings className="size-4" />
           <span className="sr-only">Settings</span>
         </Button>
@@ -226,25 +233,25 @@ function StorageSettingsTab(): JSX.Element {
             copiedId={copiedId}
             onCopy={handleCopy}
           />
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">In-memory logs</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.memoryCount.toLocaleString()} loaded
             </div>
           </div>
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">Log files</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.logFileCount.toLocaleString()} files / {formatBytes(stats.logBytes)}
             </div>
           </div>
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">Streaming chunks</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.chunkFileCount.toLocaleString()} files / {formatBytes(stats.chunkBytes)}
             </div>
           </div>
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">Session archives</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.sessionArchiveFileCount.toLocaleString()} files /{" "}
@@ -274,7 +281,7 @@ function CopyableSetupValue({
 }): JSX.Element {
   const copied = copiedId === id;
   return (
-    <div className="min-w-0 rounded-md border border-border bg-muted/20 px-3 py-2">
+    <div className="border border-border bg-muted/40 min-w-0 rounded-md px-3 py-2">
       <div className="mb-1 text-xs font-medium text-muted-foreground">{label}</div>
       <div className="flex min-w-0 items-center gap-2">
         <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">{value}</code>

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

@@ -146,11 +146,29 @@ function firstToolLog(logs: CapturedLog[]): CapturedLog | null {
   return null;
 }
 
+function buildDisplayNumberByLogId(logs: readonly CapturedLog[]): Map<number, number> {
+  const result = new Map<number, number>();
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === undefined) continue;
+    result.set(log.id, index + 1);
+  }
+  return result;
+}
+
+function displayLogNumber(
+  logId: number,
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): string {
+  return String(displayNumberByLogId.get(logId) ?? logId);
+}
+
 function buildTraceInsights(input: {
   logs: CapturedLog[];
   scopeId: string;
   summary: TraceSummary;
   candidates: KnowledgeCandidate[];
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): TraceInsight[] {
   const insights: TraceInsight[] = [
     {
@@ -170,7 +188,7 @@ function buildTraceInsights(input: {
       title: `${String(input.summary.toolCallCount)} tool call${
         input.summary.toolCallCount === 1 ? "" : "s"
       }`,
-      detail: `First tool evidence at #${String(toolLog.id)}`,
+      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
       logId: toolLog.id,
     });
   }
@@ -180,7 +198,7 @@ function buildTraceInsights(input: {
     insights.push({
       kind: "failure",
       title: `Failure #${String(failure.responseStatus)}`,
-      detail: `First failed request is #${String(failure.id)}`,
+      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
       logId: failure.id,
     });
   }
@@ -190,7 +208,7 @@ function buildTraceInsights(input: {
     insights.push({
       kind: "slow",
       title: `Slowest ${formatElapsed(input.summary.maxElapsedMs)}`,
-      detail: `Max latency observed at #${String(slowest.id)}`,
+      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
       logId: slowest.id,
     });
   }
@@ -291,12 +309,16 @@ function previewText(value: string, maxLength: number): string {
   return `${normalized.slice(0, maxLength - 3)}...`;
 }
 
-function logRangeLabel(logIds: number[]): string {
+function logRangeLabel(
+  logIds: number[],
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): string {
   const first = logIds[0];
   const last = logIds[logIds.length - 1];
   if (first === undefined) return "No evidence logs";
-  if (last === undefined || first === last) return `#${String(first)}`;
-  return `#${String(first)}-#${String(last)}`;
+  const firstLabel = displayLogNumber(first, displayNumberByLogId);
+  if (last === undefined || first === last) return `#${firstLabel}`;
+  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
 }
 
 function tagsToText(tags: string[]): string {
@@ -316,12 +338,14 @@ function CandidateItem({
   isUpdating,
   onPromoteCandidate,
   onUpdateCandidate,
+  displayNumberByLogId,
 }: {
   candidate: KnowledgeCandidate;
   isPromoting: boolean;
   isUpdating: boolean;
   onPromoteCandidate: (candidateId: string) => void;
   onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): JSX.Element {
   const [editing, setEditing] = useState(false);
   const [draftType, setDraftType] = useState<KnowledgeCandidate["type"]>(candidate.type);
@@ -368,7 +392,7 @@ function CandidateItem({
 
   if (editing) {
     return (
-      <div className="rounded-md border border-border/80 bg-background/60 px-2.5 py-2">
+      <div className="border border-border bg-card shadow-sm rounded-[8px] px-2.5 py-2">
         <div className="grid gap-2">
           <div className="flex flex-wrap items-center gap-2">
             <select
@@ -380,7 +404,7 @@ function CandidateItem({
                 );
                 if (parsed.success) setDraftType(parsed.data);
               }}
-              className="h-7 rounded-md border border-input bg-background px-2 text-xs"
+              className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs"
               aria-label="Candidate type"
             >
               <option value="episode">episode</option>
@@ -392,7 +416,7 @@ function CandidateItem({
               value={draftTitle}
               disabled={isUpdating}
               onChange={(event) => setDraftTitle(event.currentTarget.value)}
-              className="h-7 min-w-[220px] flex-1 rounded-md border border-input bg-background px-2 text-xs"
+              className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 min-w-[220px] flex-1 rounded-md px-2 text-xs"
               aria-label="Candidate title"
             />
           </div>
@@ -400,14 +424,14 @@ function CandidateItem({
             value={draftContent}
             disabled={isUpdating}
             onChange={(event) => setDraftContent(event.currentTarget.value)}
-            className="min-h-28 rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground min-h-28 rounded-md px-2 py-1.5 font-mono text-[11px] leading-relaxed"
             aria-label="Candidate content"
           />
           <input
             value={draftTags}
             disabled={isUpdating}
             onChange={(event) => setDraftTags(event.currentTarget.value)}
-            className="h-7 rounded-md border border-input bg-background px-2 text-xs"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs"
             aria-label="Candidate tags"
           />
           <div className="flex flex-wrap items-center gap-2">
@@ -484,7 +508,7 @@ function CandidateItem({
       <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
         <span className="inline-flex items-center gap-1">
           <FileSearch className="size-3" />
-          {logRangeLabel(candidate.logIds)}
+          {logRangeLabel(candidate.logIds, displayNumberByLogId)}
         </span>
         <span className="inline-flex items-center gap-1">
           <ShieldCheck className="size-3" />
@@ -504,20 +528,24 @@ function CandidateItem({
         )}
       </div>
       <div className="mt-1 flex flex-wrap items-center gap-1.5">
-        {candidate.logIds.map((logId) => (
-          <a
-            key={logId}
-            href={`#${getLogAnchor(logId)}`}
-            onClick={(event) => {
-              event.preventDefault();
-              jumpToLog(logId);
-            }}
-            className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label={`Jump to evidence log ${String(logId)}`}
-          >
-            #{logId}
-          </a>
-        ))}
+        {candidate.logIds.map((logId) => {
+          const displayNumber = displayLogNumber(logId, displayNumberByLogId);
+          return (
+            <a
+              key={logId}
+              href={`#${getLogAnchor(logId)}`}
+              onClick={(event) => {
+                event.preventDefault();
+                jumpToLog(logId);
+              }}
+              className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`Jump to evidence log ${displayNumber}`}
+              title={`Log ID ${String(logId)}`}
+            >
+              #{displayNumber}
+            </a>
+          );
+        })}
         <span className="flex-1" />
         {canEdit && (
           <Button
@@ -560,12 +588,14 @@ function CandidateList({
   updatingCandidateIds,
   onPromoteCandidate,
   onUpdateCandidate,
+  displayNumberByLogId,
 }: {
   candidates: KnowledgeCandidate[];
   promotingCandidateIds: ReadonlySet<string>;
   updatingCandidateIds: ReadonlySet<string>;
   onPromoteCandidate: (candidateId: string) => void;
   onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): JSX.Element | null {
   if (candidates.length === 0) return null;
   return (
@@ -578,6 +608,7 @@ function CandidateList({
           isUpdating={updatingCandidateIds.has(candidate.id)}
           onPromoteCandidate={onPromoteCandidate}
           onUpdateCandidate={onUpdateCandidate}
+          displayNumberByLogId={displayNumberByLogId}
         />
       ))}
     </div>
@@ -608,9 +639,10 @@ export function AgentTraceSummary({
     () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
     [candidates.length, logs, slowResponseThresholdSeconds],
   );
+  const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(logs), [logs]);
   const traceInsights = useMemo(
-    () => buildTraceInsights({ logs, scopeId, summary, candidates }),
-    [candidates, logs, scopeId, summary],
+    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
+    [candidates, displayNumberByLogId, logs, scopeId, summary],
   );
   const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
   const timeRange = useMemo(
@@ -762,7 +794,7 @@ export function AgentTraceSummary({
   if (logs.length === 0) return null;
 
   return (
-    <section className="mb-2 rounded-lg border border-border bg-muted/10 px-3 py-2">
+    <section className="border border-border bg-card shadow-sm mb-2 rounded-[8px] px-3 py-2">
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs">
         {showRollupMetrics && (
           <span className="inline-flex items-center gap-1.5 font-semibold text-foreground">
@@ -870,6 +902,7 @@ export function AgentTraceSummary({
           updatingCandidateIds={updatingCandidateIds}
           onPromoteCandidate={promoteCandidate}
           onUpdateCandidate={updateCandidate}
+          displayNumberByLogId={displayNumberByLogId}
         />
       )}
     </section>

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

@@ -32,6 +32,10 @@ export type CompareDrawerProps = {
   left: CapturedLog;
   /** Log selected second (shown on the right). */
   right: CapturedLog;
+  /** Human-facing ordinal inside the left log's session. */
+  leftDisplayNumber: number;
+  /** Human-facing ordinal inside the right log's session. */
+  rightDisplayNumber: number;
   onClose: () => void;
 };
 
@@ -541,7 +545,15 @@ function ModeToggle({
   );
 }
 
-function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }): JSX.Element {
+function SideSummary({
+  log,
+  side,
+  displayNumber,
+}: {
+  log: CapturedLog;
+  side: "left" | "right";
+  displayNumber: number;
+}): JSX.Element {
   const conversationId = getConversationId(log);
   return (
     <div className="flex-1 min-w-0 space-y-1 text-xs">
@@ -557,7 +569,9 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
         >
           {side === "left" ? "← Left" : "Right →"}
         </Badge>
-        <span className="font-mono text-blue-400/80">#{log.id}</span>
+        <span className="font-mono text-blue-400/80" title={`Log ID ${String(log.id)}`}>
+          #{displayNumber}
+        </span>
         {log.model !== null && (
           <span className="font-mono text-muted-foreground truncate">{log.model}</span>
         )}
@@ -584,7 +598,13 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
   );
 }
 
-export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX.Element {
+export function CompareDrawer({
+  left,
+  right,
+  leftDisplayNumber,
+  rightDisplayNumber,
+  onClose,
+}: CompareDrawerProps): JSX.Element {
   // Memoize the diff so re-renders (e.g. parent re-renders) don't recompute.
   const ops = useMemo<DiffOp[]>(() => {
     const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
@@ -741,8 +761,8 @@ export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX
         {/* Header */}
         <div className="flex items-start gap-4 px-4 py-3 border-b border-border">
           <div className="flex-1 flex gap-4 min-w-0">
-            <SideSummary log={left} side="left" />
-            <SideSummary log={right} side="right" />
+            <SideSummary log={left} side="left" displayNumber={leftDisplayNumber} />
+            <SideSummary log={right} side="right" displayNumber={rightDisplayNumber} />
           </div>
           <div className="flex items-center gap-2 shrink-0">
             <ModeToggle mode={mode} onChange={setMode} />
@@ -799,7 +819,13 @@ export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX
                   })}
                 </div>
               ) : (
-                <SplitBody grouped={grouped} left={left} right={right} />
+                <SplitBody
+                  grouped={grouped}
+                  left={left}
+                  right={right}
+                  leftDisplayNumber={leftDisplayNumber}
+                  rightDisplayNumber={rightDisplayNumber}
+                />
               )}
             </div>
           </>
@@ -814,18 +840,22 @@ function SplitBody({
   grouped,
   left,
   right,
+  leftDisplayNumber,
+  rightDisplayNumber,
 }: {
   grouped: GroupedOp[];
   left: CapturedLog;
   right: CapturedLog;
+  leftDisplayNumber: number;
+  rightDisplayNumber: number;
 }): JSX.Element {
   return (
     <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs">
       {/* Column headers */}
       <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground">
         <span>Path</span>
-        <span>Left (Log #{left.id})</span>
-        <span>Right (Log #{right.id})</span>
+        <span title={`Log ID ${String(left.id)}`}>Left (Log #{leftDisplayNumber})</span>
+        <span title={`Log ID ${String(right.id)}`}>Right (Log #{rightDisplayNumber})</span>
       </div>
 
       {grouped.map((g, i) => {

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

@@ -8,7 +8,7 @@ import { TurnGroupList } from "./TurnGroupList";
 import { AgentTraceSummary } from "./AgentTraceSummary";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
-import { buildTurnGroups, shouldRenderConversationContent } from "./viewerState";
+import { buildTurnGroups } from "./viewerState";
 
 export type ConversationGroupProps = {
   group: ConversationGroupData;
@@ -25,14 +25,18 @@ export type ConversationGroupProps = {
   /** Callback to open CompareDrawer with a log and its immediate predecessor. */
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
-  /** When true, skip the group header and render content directly. */
-  standalone?: boolean;
-  /** When true, the route-level session context already shows rollup metrics. */
-  hasPinnedSessionContext?: boolean;
+  /** Initial expansion state. Single-session pages use this to show logs under the session header. */
+  defaultExpanded?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs that belong to this group. */
   onClearGroup: (ids: number[]) => void;
+  /** Show IDE identity in the session header. */
+  showClientIdentity?: boolean;
+  /** Show process/project metadata in the session header. */
+  showProcessMetadata?: boolean;
+  /** Show client PID/project metadata on individual log rows. */
+  showLogClientMetadata?: boolean;
   /** Optional controlled expansion state used by virtualized lists. */
   expanded?: boolean;
   /** Optional controlled expansion setter used by virtualized lists. */
@@ -104,13 +108,15 @@ export const ConversationGroup = memo(function ({
   onCompareWithPrevious,
   comparisonPredecessors,
   onClearGroup,
-  standalone = false,
-  hasPinnedSessionContext = false,
+  showClientIdentity = true,
+  showProcessMetadata = true,
+  showLogClientMetadata = true,
+  defaultExpanded = false,
   timeDisplayFormat,
   expanded: controlledExpanded,
   onExpandedChange,
 }: ConversationGroupProps): JSX.Element {
-  const [internalExpanded, setInternalExpanded] = useState(false);
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
   const expanded = controlledExpanded ?? internalExpanded;
   const setExpanded = useCallback(
     (nextExpanded: boolean) => {
@@ -122,12 +128,17 @@ export const ConversationGroup = memo(function ({
     },
     [onExpandedChange],
   );
+
+  useEffect(() => {
+    if (!defaultExpanded || controlledExpanded !== undefined) return;
+    setInternalExpanded(true);
+  }, [controlledExpanded, defaultExpanded]);
+
   const stats = useMemo(() => computeStats(group.logs), [group.logs]);
   const providers = useMemo(() => collectProviders(group.logs), [group.logs]);
   const startTime = group.logs[0]?.timestamp ?? new Date().toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
   const isLoading = group.logs.some((log) => log.responseStatus === null);
-  const showTraceRollupMetrics = standalone && !hasPinnedSessionContext;
   const clientPid = useMemo(() => getFirstClientPid(group.logs), [group.logs]);
   const clientProjectFolder = useMemo(() => getFirstClientProjectFolder(group.logs), [group.logs]);
 
@@ -136,7 +147,6 @@ export const ConversationGroup = memo(function ({
 
   useEffect(() => {
     const handleLogFocusRequest = (event: Event): void => {
-      if (standalone) return;
       const request = readLogFocusRequest(event);
       if (request === null) return;
       if (!group.logs.some((log) => log.id === request.logId)) return;
@@ -147,37 +157,37 @@ export const ConversationGroup = memo(function ({
     return () => {
       window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
     };
-  }, [group.logs, setExpanded, standalone]);
+  }, [group.logs, setExpanded]);
 
   return (
     <div className="mb-2">
-      {!standalone && (
-        <ConversationHeader
-          conversationId={group.conversationId}
-          startTime={startTime}
-          endTime={endTime}
-          totalCalls={group.logs.length}
-          totalInputTokens={stats.totalInputTokens}
-          totalOutputTokens={stats.totalOutputTokens}
-          expanded={expanded}
-          onToggle={() => setExpanded(!expanded)}
-          providers={providers}
-          isLoading={isLoading}
-          userAgent={group.logs[0]?.userAgent ?? null}
-          clientPid={clientPid}
-          clientProjectFolder={clientProjectFolder}
-          timeDisplayFormat={timeDisplayFormat}
-          onClear={() => onClearGroup(group.logs.map((l) => l.id))}
-        />
-      )}
+      <ConversationHeader
+        conversationId={group.conversationId}
+        startTime={startTime}
+        endTime={endTime}
+        totalCalls={group.logs.length}
+        totalInputTokens={stats.totalInputTokens}
+        totalOutputTokens={stats.totalOutputTokens}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+        providers={providers}
+        isLoading={isLoading}
+        userAgent={group.logs[0]?.userAgent ?? null}
+        clientPid={clientPid}
+        clientProjectFolder={clientProjectFolder}
+        showClientIdentity={showClientIdentity}
+        showProcessMetadata={showProcessMetadata}
+        timeDisplayFormat={timeDisplayFormat}
+        onClear={() => onClearGroup(group.logs.map((l) => l.id))}
+      />
 
-      {shouldRenderConversationContent(standalone, expanded) && (
+      {expanded && (
         <div>
           <AgentTraceSummary
             logs={group.logs}
             scopeId={group.conversationId}
             slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-            showRollupMetrics={showTraceRollupMetrics}
+            showRollupMetrics={false}
             timeDisplayFormat={timeDisplayFormat}
           />
           <TurnGroupList
@@ -189,6 +199,7 @@ export const ConversationGroup = memo(function ({
             cacheTrends={cacheTrends}
             onCompareWithPrevious={onCompareWithPrevious}
             comparisonPredecessors={comparisonPredecessors}
+            showLogClientMetadata={showLogClientMetadata}
           />
         </div>
       )}