@tonyclaw/agent-inspector 3.0.9 → 3.0.11

package/src/components/providers/SettingsDialog.tsx

@@ -74,13 +74,13 @@ export function SettingsDialog(): JSX.Element {
           <span className="sr-only">Settings</span>
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+      <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
 
         <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden">
-          <TabsList>
+          <TabsList className="w-full justify-start bg-muted/35">
             <TabsTrigger value="providers">Providers</TabsTrigger>
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
             <TabsTrigger value="storage">Storage</TabsTrigger>
@@ -88,7 +88,7 @@ export function SettingsDialog(): JSX.Element {
             <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
           </TabsList>
 
-          <div className="mt-4 flex-1 overflow-x-hidden overflow-y-auto pr-3">
+          <div className="mt-4 flex-1 overflow-x-hidden overflow-y-auto pr-2">
             <TabsContent value="providers">
               <ProvidersPanel
                 externalProviders={providers}
@@ -198,7 +198,7 @@ function StorageSettingsTab(): JSX.Element {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-3">
-        <div>
+        <div className="min-w-0">
           <h3 className="text-sm font-semibold">Log storage</h3>
           <p className="text-xs text-muted-foreground">
             Inspect local log and streaming chunk footprint before exporting or clearing sessions.
@@ -232,25 +232,25 @@ function StorageSettingsTab(): JSX.Element {
             copiedId={copiedId}
             onCopy={handleCopy}
           />
-          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
+          <div className="rounded-md bg-muted/20 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="border border-border bg-muted/40 rounded-md px-3 py-2">
+          <div className="rounded-md bg-muted/20 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="border border-border bg-muted/40 rounded-md px-3 py-2">
+          <div className="rounded-md bg-muted/20 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="border border-border bg-muted/40 rounded-md px-3 py-2">
+          <div className="rounded-md bg-muted/20 px-3 py-2">
             <div className="font-medium">Session archives</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.sessionArchiveFileCount.toLocaleString()} files /{" "}
@@ -280,7 +280,7 @@ function CopyableSetupValue({
 }): JSX.Element {
   const copied = copiedId === id;
   return (
-    <div className="border border-border bg-muted/40 min-w-0 rounded-md px-3 py-2">
+    <div className="min-w-0 rounded-md border border-border/45 bg-muted/15 px-3 py-2 transition-colors hover:bg-muted/25">
       <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>
@@ -383,7 +383,7 @@ function OnboardingSettingsTab(): JSX.Element {
           />
         ))}
       </div>
-      <div className="grid gap-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+      <div className="grid gap-2 rounded-md bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
         <div className="flex items-center gap-2">
           <Check className="size-3.5 text-emerald-500" />
           <span>Provider test creates a traceable memory probe session.</span>
@@ -574,7 +574,7 @@ function McpSettingsTab(): JSX.Element {
         <Terminal className="size-4 text-muted-foreground" />
         <h3 className="text-sm font-semibold">MCP access</h3>
       </div>
-      <div className="grid gap-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+      <div className="grid gap-2 rounded-md bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
         <div>
           Use Streamable HTTP when the client supports URL-based MCP. Use the stdio bridge only for
           stdio-only clients. Configure one entry for the same Inspector instance.
@@ -680,12 +680,8 @@ function ProxySettingsTab(): JSX.Element {
       <div className="space-y-1">
         <h3 className="text-sm font-semibold">Claude Code billing header</h3>
         <p className="text-xs text-muted-foreground">
-          When enabled, the proxy strips the synthetic <code>x-anthropic-billing-header</code> text
-          block that Claude Code prepends to the system prompt before forwarding to upstream.
-          Improves prefix-cache hit rates against third-party upstreams. The default at startup is
-          controlled by the <code>AGENT_INSPECTOR_STRIP_CLAUDE_CODE_BILLING_HEADER</code>{" "}
-          environment variable; your choice is persisted to <code>config.json</code> and overrides
-          the env var for subsequent requests.
+          Strip Claude Code's synthetic billing block before upstream forwarding. This can improve
+          prefix-cache hits with third-party providers and is persisted to <code>config.json</code>.
         </p>
       </div>
 
@@ -710,8 +706,8 @@ function ProxySettingsTab(): JSX.Element {
           Slow response threshold
         </label>
         <p className="text-xs text-muted-foreground">
-          Logs whose elapsed time exceeds this many seconds show a warning icon next to the
-          duration. Set to <code>0</code> to disable the indicator.
+          Show a slow marker when elapsed time exceeds this many seconds. Use <code>0</code> to
+          disable it.
         </p>
         <div className="flex items-center gap-2">
           <input
@@ -739,8 +735,7 @@ function ProxySettingsTab(): JSX.Element {
           Provider test timeout
         </label>
         <p className="text-xs text-muted-foreground">
-          Provider Test waits this many seconds per configured model before aborting slow probes.
-          The full test window scales with model count.
+          Abort slow Provider Test probes after this many seconds per model.
         </p>
         <div className="flex items-center gap-2">
           <input
@@ -768,7 +763,7 @@ function ProxySettingsTab(): JSX.Element {
           Time display
         </label>
         <p className="text-xs text-muted-foreground">
-          Controls timestamps in session summaries, conversation headers, and log rows.
+          Controls timestamps in session summaries, headers, and log rows.
         </p>
         <select
           id="time-display-format"

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

@@ -335,26 +335,16 @@ export const LogEntryHeader = memo(function ({
 
           {/* Streaming timing */}
           {log.streaming && firstChunkLabel !== null && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
-                  <Radio className="size-3" />
-                  <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>Time to first streaming chunk</TooltipContent>
-            </Tooltip>
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
+              <Radio className="size-3" />
+              <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
+            </span>
           )}
           {log.streaming && tokenRateLabel !== null && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
-                  <Gauge className="size-3" />
-                  <span className="font-mono tabular-nums">{tokenRateLabel}</span>
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>Output token throughput after first chunk</TooltipContent>
-            </Tooltip>
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
+              <Gauge className="size-3" />
+              <span className="font-mono tabular-nums">{tokenRateLabel}</span>
+            </span>
           )}
 
           {/* Token counts */}
@@ -431,35 +421,19 @@ export const LogEntryHeader = memo(function ({
 
           {/* Client info (PID + project folder) */}
           {showClientMetadata && (hasClientPid || hasClientProjectFolder) && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}
-                >
-                  <FileTerminal className="size-3" />
-                  {hasClientProjectFolder ? (
-                    <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
-                  ) : (
-                    <span className="font-mono tabular-nums">PID {log.clientPid}</span>
-                  )}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                {hasClientCwd
-                  ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}`
-                  : `Process ID: ${log.clientPid ?? "?"}`}
-              </TooltipContent>
-            </Tooltip>
+            <span className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}>
+              <FileTerminal className="size-3" />
+              {hasClientProjectFolder ? (
+                <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
+              ) : (
+                <span className="font-mono tabular-nums">PID {log.clientPid}</span>
+              )}
+            </span>
           )}
 
           {/* Streaming indicator */}
           {showStandaloneStreamingIndicator && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Radio className="size-3 text-muted-foreground/60 shrink-0" />
-              </TooltipTrigger>
-              <TooltipContent>Request used SSE streaming</TooltipContent>
-            </Tooltip>
+            <Radio className="size-3 shrink-0 text-muted-foreground/60" />
           )}
         </span>
 

package/src/components/ui/tooltip.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 function TooltipProvider({
-  delayDuration = 0,
+  delayDuration = 600,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (

package/src/routes/api/logs.ts

@@ -14,9 +14,9 @@ import {
   searchLogsPage,
 } from "../../proxy/logSearch";
 
-const DeleteBodySchema = z
+export const DeleteLogsBodySchema = z
   .object({
-    ids: z.array(z.number().int().positive()).optional(),
+    ids: z.array(z.number().int().nonnegative()).optional(),
   })
   .optional();
 
@@ -114,12 +114,12 @@ export const Route = createFileRoute("/api/logs")({
         );
       },
       DELETE: async ({ request }: { request: Request }) => {
-        let body: z.infer<typeof DeleteBodySchema> = undefined;
+        let body: z.infer<typeof DeleteLogsBodySchema> = undefined;
         try {
           const raw = await request.text();
           if (raw !== "") {
             const parsed: unknown = JSON.parse(raw);
-            const result = DeleteBodySchema.safeParse(parsed);
+            const result = DeleteLogsBodySchema.safeParse(parsed);
             if (!result.success) {
               return Response.json(
                 { error: "Invalid request body", details: result.error.format() },
@@ -132,7 +132,16 @@ export const Route = createFileRoute("/api/logs")({
           return Response.json({ error: "Invalid JSON body" }, { status: 400 });
         }
 
-        if (body?.ids !== undefined && body.ids.length > 0) {
+        if (body?.ids !== undefined) {
+          if (body.ids.length === 0) {
+            return Response.json({
+              success: true,
+              cleared: 0,
+              logFilesRewritten: 0,
+              chunkFilesDeleted: 0,
+              sessionArchiveLogsDeleted: 0,
+            });
+          }
           const result = await clearPersistedLogsByIds(body.ids);
           return Response.json({
             success: true,