@tonyclaw/agent-inspector 2.1.15 → 2.1.16

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

@@ -392,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
@@ -404,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>
@@ -416,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>
@@ -424,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">
@@ -794,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">

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>
       )}