@tonyclaw/agent-inspector 3.0.21 → 3.0.22

package/.output/server/index.mjs

@@ -17,124 +17,124 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
-  "/assets/CompareDrawer-BhQ8UZBt.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"4bc4-q7/WZBBoHI4QCp2aBIrQbpS+ZwA"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 19396,
-    "path": "../public/assets/CompareDrawer-BhQ8UZBt.js"
-  },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-09T07:33:08.149Z",
+    "mtime": "2026-07-09T12:37:18.744Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/index-Cu0STzXy.js": {
+  "/assets/CompareDrawer-CaDAbX9q.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"265-Y2kn4+kLz0UCilDKDhsxBE8vpnc"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 613,
-    "path": "../public/assets/index-Cu0STzXy.js"
+    "etag": '"4bc4-9djCiW/2Q9xO0RFf4a2mC6kHtIE"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 19396,
+    "path": "../public/assets/CompareDrawer-CaDAbX9q.js"
   },
-  "/assets/json-viewer-Bjmt-Mdw.js": {
+  "/assets/index-Pz9T7cS9.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae7-tt6uImcLjdS2gr8kUpKvBHv82YY"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 6887,
-    "path": "../public/assets/json-viewer-Bjmt-Mdw.js"
+    "etag": '"265-G8z2PAgLrqD9mCoBT80CeMoLvDc"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 613,
+    "path": "../public/assets/index-Pz9T7cS9.js"
   },
   "/assets/agent-inspector-58K1_MsC.ico": {
     "type": "image/vnd.microsoft.icon",
     "etag": '"38fa-ZD8kPABHYjPIkcH82FMY6iZM7fI"',
-    "mtime": "2026-07-09T07:33:08.149Z",
+    "mtime": "2026-07-09T12:37:18.744Z",
     "size": 14586,
     "path": "../public/assets/agent-inspector-58K1_MsC.ico"
   },
-  "/assets/index-D2iiZaNM.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"25cbf-gXyEinEYizYtkUYphvKg/JJAlXM"',
-    "mtime": "2026-07-09T07:33:08.149Z",
-    "size": 154815,
-    "path": "../public/assets/index-D2iiZaNM.css"
-  },
-  "/assets/index-DENY-gse.js": {
+  "/assets/index-DcFtdKF3.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2d-azZxx60qWI9z51uvMu8o3Zkmqqg"',
-    "mtime": "2026-07-09T07:33:08.150Z",
+    "etag": '"1cd2d-USsoPsp/IKbvu6AQ2mrDK0lM6jI"',
+    "mtime": "2026-07-09T12:37:18.745Z",
     "size": 118061,
-    "path": "../public/assets/index-DENY-gse.js"
+    "path": "../public/assets/index-DcFtdKF3.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-09T07:33:08.149Z",
+    "mtime": "2026-07-09T12:37:18.745Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/RequestAnatomy-DU8c0Ysb.js": {
+  "/assets/json-viewer-PNvFrOUw.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f3-tict+3CArhDH0oq7q3mampyiL4o"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 17395,
-    "path": "../public/assets/RequestAnatomy-DU8c0Ysb.js"
+    "etag": '"1ae7-HKTdBiQVby4QPNCyLeI2J993hKs"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 6887,
+    "path": "../public/assets/json-viewer-PNvFrOUw.js"
   },
-  "/assets/zhipuai-BPNAnxo-.svg": {
-    "type": "image/svg+xml",
-    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-09T07:33:08.149Z",
-    "size": 11256,
-    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+  "/assets/index-SqCROi0s.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"25d37-HOO9KmFYmR0YRmhfK7KT3R/Ziuo"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 154935,
+    "path": "../public/assets/index-SqCROi0s.css"
   },
-  "/assets/_sessionId-BeinzuQZ.js": {
+  "/assets/ReplayDialog-C5kb1Bj4.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36d-wyDMru6FvHjuW6fdH0fxfDL5csw"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 877,
-    "path": "../public/assets/_sessionId-BeinzuQZ.js"
+    "etag": '"3348-CSB9wd+aAH4G2USLbcotKg1PhPs"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 13128,
+    "path": "../public/assets/ReplayDialog-C5kb1Bj4.js"
   },
-  "/assets/StreamingChunkSequence-DvMcBgID.js": {
+  "/assets/RequestAnatomy-CbPNLnlL.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"e96-6BaPiEMr6EDDv+mO5wBLCpH1qYQ"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 3734,
-    "path": "../public/assets/StreamingChunkSequence-DvMcBgID.js"
+    "etag": '"43f3-R+BPu82QzCXvsVcsW6n+y0R+4vA"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 17395,
+    "path": "../public/assets/RequestAnatomy-CbPNLnlL.js"
   },
-  "/assets/ReplayDialog-CqUvVWFk.js": {
+  "/assets/index-BCHWOmF2.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3348-tWBPWrexRvJS3YQIdPt3HDAs1p0"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 13128,
-    "path": "../public/assets/ReplayDialog-CqUvVWFk.js"
+    "etag": '"5231f-Y7KcHI9eQF/JhCbtxjLP2+bqYp0"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 336671,
+    "path": "../public/assets/index-BCHWOmF2.js"
   },
-  "/assets/ResponseView-Ce2JAKBf.js": {
+  "/assets/StreamingChunkSequence-Cl8zJu0w.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"47fe-SBZtSFnLFU3zdUC9GzC5G68XDpI"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 18430,
-    "path": "../public/assets/ResponseView-Ce2JAKBf.js"
+    "etag": '"e96-AK9Wkk6ExZCudZ+MgmTX2CnRN7c"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 3734,
+    "path": "../public/assets/StreamingChunkSequence-Cl8zJu0w.js"
+  },
+  "/assets/zhipuai-BPNAnxo-.svg": {
+    "type": "image/svg+xml",
+    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
+    "mtime": "2026-07-09T12:37:18.744Z",
+    "size": 11256,
+    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/index-BMVjOrho.js": {
+  "/assets/_sessionId-BeN8-5Ho.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"5231f-+JWwi3Ne4jFZpTso0unc0dEWK7M"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 336671,
-    "path": "../public/assets/index-BMVjOrho.js"
+    "etag": '"36d-ETldorz407qqdoD94Bv1I3mmH9E"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 877,
+    "path": "../public/assets/_sessionId-BeN8-5Ho.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-09T07:33:08.150Z",
+    "mtime": "2026-07-09T12:37:18.745Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-GpMPUmJQ.js": {
+  "/assets/ResponseView-DyzW0Zfo.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"47fe-4kegTU4CX0Nurl3/j8IApFs6UII"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 18430,
+    "path": "../public/assets/ResponseView-DyzW0Zfo.js"
+  },
+  "/assets/ProxyViewerContainer-7ugZIMW0.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"bd7e1-Uddz5LuKxXdcrqA/GQwaawsmbAI"',
-    "mtime": "2026-07-09T07:33:08.150Z",
-    "size": 776161,
-    "path": "../public/assets/ProxyViewerContainer-GpMPUmJQ.js"
+    "etag": '"bd60a-o5dnZsvfsIHEVepLqg/IiNmDC0I"',
+    "mtime": "2026-07-09T12:37:18.745Z",
+    "size": 775690,
+    "path": "../public/assets/ProxyViewerContainer-7ugZIMW0.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "3.0.21",
+  "version": "3.0.22",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",

package/src/components/ProxyViewer.tsx

@@ -2328,7 +2328,7 @@ export function ProxyViewer({
         : selectedSession;
 
   return (
-    <div className="bg-background min-h-screen w-full text-foreground">
+    <div className="bg-background min-h-screen w-full text-foreground lg:h-screen lg:flex lg:flex-col lg:overflow-hidden">
       <button
         type="button"
         onClick={toggleDetailsPanelCollapsed}
@@ -2349,14 +2349,14 @@ export function ProxyViewer({
       {detailsPanelCollapsed && <FloatingInspectorLogo />}
       <div
         className={cn(
-          "grid min-h-screen w-full grid-cols-1",
+          "grid w-full min-w-0 grid-cols-1 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
           detailsPanelCollapsed
             ? "lg:grid-cols-[minmax(0,1fr)]"
             : "lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]",
         )}
       >
         {!detailsPanelCollapsed && (
-          <aside className="bg-background/95 order-1 border-b border-white/[0.045] lg:sticky lg:top-0 lg:order-2 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055]">
+          <aside className="bg-background/95 order-1 border-b border-white/[0.045] lg:order-2 lg:h-full lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055] inspector-scrollbar">
             <div className="space-y-4 p-4">
               <BrandHeader
                 compact={true}
@@ -2485,7 +2485,7 @@ export function ProxyViewer({
           </aside>
         )}
 
-        <main className="order-2 min-w-0 lg:order-1">
+        <main className="order-2 min-w-0 lg:order-1 lg:h-full lg:overflow-y-auto inspector-scrollbar">
           <div className="bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 lg:px-5">
             <div className="flex flex-wrap items-center gap-2">
               <div className="min-w-[180px] flex-1">

package/src/components/providers/ProviderCard.tsx

@@ -289,7 +289,6 @@ function ProviderCapabilitySummary({ provider }: { provider: ProviderConfig }):
 
   return (
     <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-      <span>Capabilities</span>
       {hasAnthropic && <CapabilityChip label="Anthropic" enabled={true} />}
       {hasChat && <CapabilityChip label="OpenAI Chat" enabled={true} />}
       {hasResponses && <CapabilityChip label="OpenAI Responses" enabled={true} />}
@@ -448,14 +447,6 @@ function ModelChip({ provider, model }: { provider: ProviderConfig; model: strin
   );
 }
 
-function modelResultsLabel(testResults: TestResults | undefined): string | null {
-  const models = testResults?.models;
-  if (models === undefined) return null;
-  const count = Object.keys(models).length;
-  if (count === 0) return null;
-  return `${count} model${count === 1 ? "" : "s"} tested`;
-}
-
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -662,7 +653,6 @@ export function ProviderCard({
     provider.modelMetadataUrl !== undefined && provider.modelMetadataUrl.trim() !== "";
   const metadataImportLabel = canRefreshMetadata ? "Refresh" : "Import defaults";
   const isTestingValue = isTesting ?? false;
-  const testedModelsLabel = modelResultsLabel(testResults);
   const providerSourceBadge =
     provider.source === "company" ? (
       <span className="shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100">
@@ -711,17 +701,12 @@ export function ProviderCard({
 
       <div className="flex flex-col gap-2 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
         <ProviderCapabilitySummary provider={provider} />
-        <div className="flex flex-wrap items-center gap-2">
-          <span>Key configured</span>
-          <span>{provider.authHeader === "x-api-key" ? "x-api-key" : "Bearer"}</span>
-          {testedModelsLabel !== null && <span>{testedModelsLabel}</span>}
-          {testResults?.testedAt !== undefined && (
-            <span className="inline-flex items-center gap-1">
-              <Clock className="size-3" />
-              {formatTimeAgo(testResults.testedAt)}
-            </span>
-          )}
-        </div>
+        {testResults?.testedAt !== undefined && (
+          <span className="inline-flex items-center gap-1">
+            <Clock className="size-3" />
+            {formatTimeAgo(testResults.testedAt)}
+          </span>
+        )}
       </div>
 
       {!hasContextMetadata && (

package/src/components/providers/ProvidersPanel.tsx

@@ -553,53 +553,49 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="sticky top-0 z-10 flex items-center justify-between gap-3 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur">
-        <h3 className="text-lg font-medium">Providers</h3>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => handleExport(false)}
-            className="gap-1 hover:bg-muted"
-          >
-            <Download className="size-3" />
-            Export
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleImportClick}
-            className="gap-1 hover:bg-muted"
-          >
-            <Upload className="size-3" />
-            Import
-          </Button>
-          <input
-            type="file"
-            ref={fileInputRef}
-            accept=".json"
-            onChange={handleFileChange}
-            style={{ display: "none" }}
-          />
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowImportWizard(true)}
-            className="gap-1"
-          >
-            <Scan className="size-3" />
-            Scan
-          </Button>
-          <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
-            <Plus className="size-4" />
-            Add Provider
-          </Button>
-        </div>
+      <div className="sticky top-0 z-10 flex items-center justify-end gap-2 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => handleExport(false)}
+          className="gap-1 hover:bg-muted"
+        >
+          <Download className="size-3" />
+          Export
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleImportClick}
+          className="gap-1 hover:bg-muted"
+        >
+          <Upload className="size-3" />
+          Import
+        </Button>
+        <input
+          type="file"
+          ref={fileInputRef}
+          accept=".json"
+          onChange={handleFileChange}
+          style={{ display: "none" }}
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setShowImportWizard(true)}
+          className="gap-1"
+        >
+          <Scan className="size-3" />
+          Scan
+        </Button>
+        <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
+          <Plus className="size-4" />
+          Add Provider
+        </Button>
       </div>
 
       {configPath !== null && (
         <div className="flex items-center gap-2 rounded-[8px] bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
-          <span className="shrink-0">Config:</span>
           <span className="font-mono truncate" title={configPath}>
             {configPath}
           </span>