@tonyclaw/agent-inspector 2.1.15 → 2.1.17

package/src/components/providers/ProviderForm.tsx

@@ -6,7 +6,13 @@ import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig, ProviderModelMetadata } from "../../lib/providerContract";
 import { copyTextToClipboard } from "../../lib/clipboard";
 import { maskApiKey } from "../../lib/mask";
-import { buildUpstreamUrl } from "../../lib/upstreamUrl";
+import {
+  PATH_V1_CHAT_COMPLETIONS,
+  PATH_V1_MESSAGES,
+  PATH_V1_RESPONSES,
+  previewUpstreamUrl,
+  type UpstreamUrlPreview,
+} from "../../lib/upstreamUrl";
 import { formatContextWindowInput, parseContextWindowTokensInput } from "../../lib/utils";
 
 const ZHIPU_PROVIDER_KEYWORDS = ["zhipu", "zhipuai", "bigmodel", "z.ai", "zai", "glm"];
@@ -17,9 +23,9 @@ const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "z.ai coding",
   "zai coding",
 ];
-const ANTHROPIC_MESSAGES_ENDPOINT = "/v1/messages";
-const OPENAI_CHAT_COMPLETIONS_ENDPOINT = "/v1/chat/completions";
-const OPENAI_RESPONSES_ENDPOINT = "/v1/responses";
+const ANTHROPIC_MESSAGES_ENDPOINT = PATH_V1_MESSAGES;
+const OPENAI_CHAT_COMPLETIONS_ENDPOINT = PATH_V1_CHAT_COMPLETIONS;
+const OPENAI_RESPONSES_ENDPOINT = PATH_V1_RESPONSES;
 
 // Known provider presets - maps provider name keywords to their API URLs
 const KNOWN_PROVIDER_PRESETS: Record<
@@ -107,7 +113,7 @@ const MINIMAX_MODELS = [
 ];
 
 // Alibaba model options
-const ALIBABA_MODELS = ["glm-5", "glm-5.1", "glm-5.2", "qwen3.6-plus", "qwen3.7-max"];
+const ALIBABA_MODELS = ["qwen3.6-plus", "qwen3.7-max"];
 
 // ZhipuAI / Z.AI model options
 const ZHIPU_MODELS = [
@@ -275,25 +281,45 @@ function stripEndpointSuffix(value: string | undefined, endpoint: string): strin
     : trimmed;
 }
 
-function previewEndpointUrl(baseUrl: string, endpoint: string): string | null {
+function previewEndpointUrl(
+  baseUrl: string,
+  endpoint: string,
+  providerName: string,
+): UpstreamUrlPreview | null {
   const trimmed = baseUrl.trim();
-  return trimmed === "" ? null : buildUpstreamUrl(trimmed, endpoint);
+  return trimmed === "" ? null : previewUpstreamUrl(trimmed, endpoint, { providerName });
 }
 
 function EndpointUrlPreview({
   baseUrl,
   endpoint,
+  providerName,
 }: {
   baseUrl: string;
   endpoint: string;
+  providerName: string;
 }): JSX.Element | null {
-  const finalUrl = previewEndpointUrl(baseUrl, endpoint);
-  if (finalUrl === null) return null;
+  const preview = previewEndpointUrl(baseUrl, endpoint, providerName);
+  if (preview === null) return null;
 
   return (
-    <div className="rounded-md border border-border/70 bg-muted/35 px-3 py-2 text-xs">
+    <div className="border border-border bg-muted/40 rounded-md px-3 py-2 text-xs">
       <div className="text-muted-foreground">Final URL</div>
-      <div className="break-all font-mono text-foreground">{finalUrl}</div>
+      <div className="break-all font-mono text-foreground">{preview.finalUrl}</div>
+      {preview.diagnostics.length > 0 && (
+        <div className="mt-2 space-y-1">
+          {preview.diagnostics.map((diagnostic) => (
+            <div
+              key={`${diagnostic.severity}:${diagnostic.message}`}
+              className={
+                diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground"
+              }
+            >
+              {diagnostic.message}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
@@ -656,7 +682,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           }
           className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
         >
-          <option value="">—</option>
+          <option value="">Unspecified</option>
           <option value="personal">个人 (Personal)</option>
           <option value="company">公司 (Company)</option>
         </select>
@@ -681,7 +707,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           <p className="text-xs text-destructive">{errors.modelMetadataUrl}</p>
         )}
         {modelMetadataUrl.trim() === "" && (
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2 text-xs text-muted-foreground">
             Built-in limits cover DeepSeek v4 pro/flash, MiniMax M3/M2.7/M2.5/M2.1, and GLM coding
             models. Use a registry URL for private or custom model limits.
           </div>
@@ -729,7 +755,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             className="text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0"
             aria-label="Copy API key"
           >
-            {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+            {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
           </button>
         </div>
         {errors.apiKey !== undefined && <p className="text-xs text-destructive">{errors.apiKey}</p>}
@@ -751,7 +777,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
               ref={(el) => {
                 modelRowRefs.current[i] = el;
               }}
-              className="space-y-2 rounded-md border border-border bg-muted/10 p-2"
+              className="border border-border bg-card shadow-sm space-y-2 rounded-[8px] p-2"
             >
               <div className="flex items-center gap-2">
                 <div className="relative flex-1">
@@ -775,7 +801,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                         <ChevronDown className="size-4" />
                       </button>
                       {openModelDropdown === i && (
-                        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-popover border border-border rounded-md shadow-md max-h-48 overflow-y-auto">
+                        <div className="bg-popover text-popover-foreground absolute left-0 right-0 top-full z-50 mt-1 max-h-48 overflow-y-auto rounded-md border shadow-md">
                           {suggestedModels.map((opt) => (
                             <button
                               key={opt}
@@ -784,7 +810,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                                 updateModel(i, opt);
                                 setOpenModelDropdown(null);
                               }}
-                              className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                              className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-white/[0.06]"
                             >
                               {opt}
                             </button>
@@ -899,7 +925,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       </div>
 
       <div className="space-y-2">
-        <div className="flex gap-1 border-b border-border">
+        <div className="border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1">
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -945,7 +971,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
             Anthropic Base URL
           </label>
-          <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+          <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
             <input
               id="provider-anthropic-base-url"
               type="text"
@@ -955,16 +981,20 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                 setAnthropicBaseUrl(e.target.value);
               }}
               placeholder="https://api.anthropic.com"
-              className="min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
             />
-            <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+            <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
               {ANTHROPIC_MESSAGES_ENDPOINT}
             </span>
           </div>
           {errors.anthropicBaseUrl !== undefined && (
             <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
           )}
-          <EndpointUrlPreview baseUrl={anthropicBaseUrl} endpoint={ANTHROPIC_MESSAGES_ENDPOINT} />
+          <EndpointUrlPreview
+            baseUrl={anthropicBaseUrl}
+            endpoint={ANTHROPIC_MESSAGES_ENDPOINT}
+            providerName={name}
+          />
           <p className="text-xs text-muted-foreground">
             Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic
             format.
@@ -978,7 +1008,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
               OpenAI Chat Base URL
             </label>
-            <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+            <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
               <input
                 id="provider-openai-base-url"
                 type="text"
@@ -988,9 +1018,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   setOpenaiBaseUrl(e.target.value);
                 }}
                 placeholder="https://api.openai.com"
-                className="min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
               />
-              <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+              <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
                 {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
               </span>
             </div>
@@ -1000,6 +1030,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <EndpointUrlPreview
               baseUrl={openaiBaseUrl}
               endpoint={OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+              providerName={name}
             />
             <p className="text-xs text-muted-foreground">
               OpenAI Chat Completions-compatible base URL. Leave empty if this provider only
@@ -1010,7 +1041,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <label htmlFor="provider-openai-responses-base-url" className="text-sm font-medium">
               OpenAI Responses Base URL
             </label>
-            <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+            <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
               <input
                 id="provider-openai-responses-base-url"
                 type="text"
@@ -1020,9 +1051,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   setOpenaiResponsesBaseUrl(e.target.value);
                 }}
                 placeholder="https://api.openai.com"
-                className="min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                className="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
               />
-              <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+              <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
                 {OPENAI_RESPONSES_ENDPOINT}
               </span>
             </div>
@@ -1032,6 +1063,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <EndpointUrlPreview
               baseUrl={openaiResponsesBaseUrl}
               endpoint={OPENAI_RESPONSES_ENDPOINT}
+              providerName={name}
             />
             <p className="text-xs text-muted-foreground">
               Optional Responses-compatible base URL. Set only when the provider supports the
@@ -1058,7 +1090,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         </p>
       </div>
 
-      <div className="sticky bottom-0 bg-card border-t flex gap-2 justify-end pt-2 pb-2">
+      <div className="border border-border bg-background/95 shadow-sm sticky bottom-0 flex justify-end gap-2 rounded-[8px] px-3 py-2">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
           Cancel
         </Button>

package/src/components/providers/ProviderLogo.tsx

@@ -26,12 +26,17 @@ const PROVIDER_MAP: Record<string, Provider> = {
   "deepseek-": "deepseek",
   MiniMax: "minimax",
   qwen: "qwen",
-  "glm-": "zhipuai",
 };
 
+function isGlmModel(modelLower: string): boolean {
+  const normalized = modelLower.replace(/[_\s]+/g, "-");
+  return normalized.split(/[/:@]/).some((segment) => segment.startsWith("glm-"));
+}
+
 export function detectProvider(model: string | null): Provider {
   if (model === null) return "unknown";
   const modelLower = model.toLowerCase();
+  if (isGlmModel(modelLower)) return "zhipuai";
   for (const [prefix, provider] of Object.entries(PROVIDER_MAP)) {
     if (modelLower.startsWith(prefix.toLowerCase())) {
       return provider;

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}
@@ -631,7 +631,7 @@ export function ProvidersPanel({
                   }
                 >
                   {configPathCopied ? (
-                    <Check className="size-3 text-green-500" />
+                    <Check className="size-3 text-cyan-300" />
                   ) : (
                     <Copy className="size-3" />
                   )}
@@ -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

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