@tonyclaw/agent-inspector 3.0.6 → 3.0.7

package/.output/server/index.mjs

@@ -35,117 +35,117 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
-  "/assets/CompareDrawer-DsvO6QyJ.js": {
+  "/assets/alibaba-TTwafVwX.svg": {
+    "type": "image/svg+xml",
+    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
+    "mtime": "2026-07-07T03:30:05.671Z",
+    "size": 5915,
+    "path": "../public/assets/alibaba-TTwafVwX.svg"
+  },
+  "/assets/index-C29Olfzt.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4bbf-neNUNNWS2aRLlwwzlzUnpCV9X7Q"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 19391,
-    "path": "../public/assets/CompareDrawer-DsvO6QyJ.js"
+    "etag": '"74-s+7/jMd3WYqZzQ3XOcigwii5CRc"',
+    "mtime": "2026-07-07T03:30:05.671Z",
+    "size": 116,
+    "path": "../public/assets/index-C29Olfzt.js"
   },
-  "/assets/index-0pt1umWP.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"2281f-b6adbSBuuyRm1qef8XcY8zI8Tvw"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 141343,
-    "path": "../public/assets/index-0pt1umWP.css"
+  "/assets/CompareDrawer-C0Kbsm-Q.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"4bc3-3/VJbR0ecEp8fqbT2a5kapBN4fQ"',
+    "mtime": "2026-07-07T03:30:05.672Z",
+    "size": 19395,
+    "path": "../public/assets/CompareDrawer-C0Kbsm-Q.js"
   },
-  "/assets/index-DSUEOPbC.js": {
+  "/assets/json-viewer-B0QRbMSf.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"74-OxAYH3UQoN48eatHx4yL09xqgvs"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 116,
-    "path": "../public/assets/index-DSUEOPbC.js"
+    "etag": '"1ae6-HDeKTwqcL77vuf9Xf8Mztpyi9c0"',
+    "mtime": "2026-07-07T03:30:05.672Z",
+    "size": 6886,
+    "path": "../public/assets/json-viewer-B0QRbMSf.js"
   },
-  "/assets/index-zfZUz67K.js": {
+  "/assets/index-BEsqvywM.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2c-L9qOZ3f8PNUAGiT0rnnoST6YWfg"',
-    "mtime": "2026-07-07T03:16:53.329Z",
+    "etag": '"1cd2c-4JNStjVbTapY8ZiFdMrGpVJbzaM"',
+    "mtime": "2026-07-07T03:30:05.672Z",
     "size": 118060,
-    "path": "../public/assets/index-zfZUz67K.js"
+    "path": "../public/assets/index-BEsqvywM.js"
   },
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-07T03:16:53.328Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  "/assets/index-DgANE0r3.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"22822-3pXTBm3VZrblIU9z3J9JDN7tcyw"',
+    "mtime": "2026-07-07T03:30:05.671Z",
+    "size": 141346,
+    "path": "../public/assets/index-DgANE0r3.css"
   },
-  "/assets/json-viewer-_4r1LBBE.js": {
+  "/assets/main-CuKZD7n0.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae6-Irtd3+8DFA2Z/Oz+6RoXClR8clw"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 6886,
-    "path": "../public/assets/json-viewer-_4r1LBBE.js"
+    "etag": '"512fd-5AcmxJQrVhDjQwawGVXebWzVm+8"',
+    "mtime": "2026-07-07T03:30:05.672Z",
+    "size": 332541,
+    "path": "../public/assets/main-CuKZD7n0.js"
   },
-  "/assets/ReplayDialog-CQlLX1Uo.js": {
+  "/assets/ReplayDialog-CM3dhP8v.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"31d6-QUb3xhIgyzB/nFNkjGPh1V87D+8"',
-    "mtime": "2026-07-07T03:16:53.329Z",
+    "etag": '"31d6-9NTEpX75drhjb91rAk+PyzE3Ffs"',
+    "mtime": "2026-07-07T03:30:05.672Z",
     "size": 12758,
-    "path": "../public/assets/ReplayDialog-CQlLX1Uo.js"
+    "path": "../public/assets/ReplayDialog-CM3dhP8v.js"
   },
-  "/assets/main-C_nEHNUM.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"512fd-52gkbjgsqFGOTrK9SwcjAR0fqb4"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 332541,
-    "path": "../public/assets/main-C_nEHNUM.js"
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-07-07T03:30:05.671Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/RequestAnatomy-m1q-uVTl.js": {
+  "/assets/RequestAnatomy-fa0JXy5p.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f2-kRHIkcpQkfNXmUqtzlXz5Bl+zf0"',
-    "mtime": "2026-07-07T03:16:53.329Z",
+    "etag": '"43f2-zAYk5x91KzRRJ64tCmBGM0YQM78"',
+    "mtime": "2026-07-07T03:30:05.672Z",
     "size": 17394,
-    "path": "../public/assets/RequestAnatomy-m1q-uVTl.js"
+    "path": "../public/assets/RequestAnatomy-fa0JXy5p.js"
   },
-  "/assets/ResponseView-DuLLeYSh.js": {
+  "/assets/StreamingChunkSequence-CGOun3Df.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"47fa-l3OUJeUgO0oj1UT9vgXjilhwNEw"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 18426,
-    "path": "../public/assets/ResponseView-DuLLeYSh.js"
-  },
-  "/assets/alibaba-TTwafVwX.svg": {
-    "type": "image/svg+xml",
-    "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-07T03:16:53.328Z",
-    "size": 5915,
-    "path": "../public/assets/alibaba-TTwafVwX.svg"
+    "etag": '"dd6-uVBRgD1iZ+bzNCittGBxPQnS57s"',
+    "mtime": "2026-07-07T03:30:05.672Z",
+    "size": 3542,
+    "path": "../public/assets/StreamingChunkSequence-CGOun3Df.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-07T03:16:53.328Z",
+    "mtime": "2026-07-07T03:30:05.671Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/_sessionId-CWP4pxOU.js": {
+  "/assets/_sessionId-D5fYH2C0.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36c-J74Y+Qo3HXpibkQqcgDBULVLGW4"',
-    "mtime": "2026-07-07T03:16:53.329Z",
+    "etag": '"36c-T0Z2CDujLBhIqkZaWr7QMjUQmLY"',
+    "mtime": "2026-07-07T03:30:05.672Z",
     "size": 876,
-    "path": "../public/assets/_sessionId-CWP4pxOU.js"
+    "path": "../public/assets/_sessionId-D5fYH2C0.js"
   },
-  "/assets/StreamingChunkSequence-CN4aRFBx.js": {
+  "/assets/ResponseView-Bq6sC7Ay.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"dd6-2UvXJrnPm4g6fFFFYJ49Epv69bE"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 3542,
-    "path": "../public/assets/StreamingChunkSequence-CN4aRFBx.js"
+    "etag": '"47fa-1d2SEiO5LDVauvFaf3awOUXVtu0"',
+    "mtime": "2026-07-07T03:30:05.672Z",
+    "size": 18426,
+    "path": "../public/assets/ResponseView-Bq6sC7Ay.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-07-07T03:16:53.328Z",
+    "mtime": "2026-07-07T03:30:05.671Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-CfP-komD.js": {
+  "/assets/ProxyViewerContainer-p-rpYyiF.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"b4969-/yQK6/qgiUKGLd4XgJTPqx6f2BU"',
-    "mtime": "2026-07-07T03:16:53.329Z",
-    "size": 739689,
-    "path": "../public/assets/ProxyViewerContainer-CfP-komD.js"
+    "etag": '"b4a83-phSZuesX9+pumw3nmK0JBX5WjYc"',
+    "mtime": "2026-07-07T03:30:05.672Z",
+    "size": 739971,
+    "path": "../public/assets/ProxyViewerContainer-p-rpYyiF.js"
   }
 };
 function readAsset(id) {

package/package.json

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

package/src/components/ProxyViewer.tsx

@@ -1294,12 +1294,12 @@ function BrandHeader({
   if (compact) {
     return (
       <div className="bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_44px_rgba(0,0,0,0.18)] rounded-[8px] p-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-start gap-2">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="flex min-w-fit items-start gap-2">
             <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
-            <div className="min-w-0">
-              <div className="flex min-w-0 items-baseline gap-2">
-                <span className="truncate text-base font-bold">Inspector</span>
+            <div className="min-w-fit">
+              <div className="flex min-w-fit flex-wrap items-baseline gap-x-2 gap-y-0.5">
+                <span className="whitespace-nowrap text-base font-bold">Agent Inspector</span>
                 <span className="hidden shrink-0 font-mono text-[11px] font-semibold text-muted-foreground sm:inline">
                   v{packageJson.version}
                 </span>
@@ -1324,13 +1324,13 @@ function BrandHeader({
   }
 
   return (
-    <div className="grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-6">
-      <div />
-      <h1 className="flex min-w-0 flex-col items-center gap-2 text-center">
-        <span className="flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap">
+    <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-3 pb-6">
+      <div className="min-w-10 flex-1" aria-hidden="true" />
+      <h1 className="flex min-w-fit flex-col items-center gap-2 text-center">
+        <span className="flex max-w-full flex-wrap items-end justify-center gap-x-2 gap-y-1">
           <CrabFamily compact={false} entrancePhase={crabEntrancePhase} />
-          <span className="flex min-w-0 items-baseline gap-2 pl-1">
-            <span className="truncate text-lg font-bold">Agent Inspector</span>
+          <span className="flex min-w-fit flex-wrap items-baseline justify-center gap-x-2 gap-y-0.5 pl-1">
+            <span className="whitespace-nowrap text-lg font-bold">Agent Inspector</span>
             <span className="shrink-0 font-mono text-xs font-semibold text-muted-foreground">
               v{packageJson.version}
             </span>
@@ -1338,12 +1338,12 @@ function BrandHeader({
           <Plus className="size-4 shrink-0 text-muted-foreground/70" aria-hidden="true" />
           <McpLogo className="size-10 shrink-0" />
         </span>
-        <span className="max-w-[calc(100vw-7rem)] text-sm font-semibold text-muted-foreground">
+        <span className="max-w-full text-sm font-semibold text-muted-foreground">
           Local First. Evidence First.
         </span>
         <McpReadyBadge />
       </h1>
-      <div className="justify-self-end flex items-center gap-1">
+      <div className="flex flex-1 justify-end gap-1">
         <AlertsDialog />
         <GroupsDialog />
         <AgentLabDialog currentSessionId={currentSessionId} logCount={logCount} />

package/src/components/alerts/AlertsDialog.tsx

@@ -304,7 +304,7 @@ function AlertList({
                     {categoryLabel(alert.category)}
                   </span>
                 </div>
-                <div className="mt-1 truncate text-sm font-semibold">{alert.title}</div>
+                <div className="mt-1 text-sm font-semibold leading-snug">{alert.title}</div>
                 <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                   {alert.message}
                 </div>
@@ -315,8 +315,8 @@ function AlertList({
                 </Badge>
               ) : null}
             </div>
-            <div className="mt-2 flex min-w-0 items-center justify-between gap-2 text-[11px] text-muted-foreground">
-              <span className="truncate">{providerModel(alert)}</span>
+            <div className="mt-2 flex min-w-0 items-start justify-between gap-2 text-[11px] text-muted-foreground">
+              <span className="min-w-0 leading-snug">{providerModel(alert)}</span>
               <span className="shrink-0">{formatTimestamp(alert.lastSeenAt)}</span>
             </div>
           </button>

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -130,13 +130,15 @@ function versionLabel(pkg: EcosystemPackage): string {
 function PackageStatusCard({ pkg }: { pkg: EcosystemPackage }): JSX.Element {
   return (
     <div className="rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="min-w-0">
-          <div className="flex min-w-0 items-center gap-2">
+          <div className="flex min-w-0 items-start gap-2">
             <PackageCheck className="size-4 shrink-0 text-white/55" />
-            <div className="truncate text-sm font-semibold">{pkg.name}</div>
+            <div className="text-sm font-semibold leading-snug">{pkg.name}</div>
+          </div>
+          <div className="mt-1 break-all font-mono text-[11px] leading-snug text-white/35">
+            {pkg.npmName}
           </div>
-          <div className="mt-1 truncate font-mono text-[11px] text-white/35">{pkg.npmName}</div>
         </div>
         <Badge className={cn("shrink-0", stateClassName(pkg.state))} variant="outline">
           {stateLabel(pkg.state)}
@@ -163,7 +165,7 @@ function WorkflowTile({ workflow }: { workflow: WorkflowCard }): JSX.Element {
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 items-center gap-2">
           <Icon className="size-4 shrink-0 text-cyan-200/75" />
-          <div className="truncate text-sm font-semibold">{workflow.title}</div>
+          <div className="text-sm font-semibold">{workflow.title}</div>
         </div>
         <span className="rounded bg-white/[0.04] px-2 py-0.5 font-mono text-[10px] text-white/45">
           {workflow.label}
@@ -187,13 +189,13 @@ function buildSessionCommand(sessionId: string | null): string {
 function RunnerPresetCard({ preset }: { preset: EcosystemRunnerPreset }): JSX.Element {
   return (
     <div className="rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="min-w-0">
-          <div className="flex min-w-0 items-center gap-2">
+          <div className="flex min-w-0 items-start gap-2">
             <Rocket className="size-4 shrink-0 text-cyan-200/75" />
-            <div className="truncate text-sm font-semibold">{preset.name}</div>
+            <div className="text-sm font-semibold leading-snug">{preset.name}</div>
           </div>
-          <div className="mt-1 font-mono text-[11px] text-white/35">
+          <div className="mt-1 break-all font-mono text-[11px] leading-snug text-white/35">
             {preset.binary} {preset.modelFlag}
             {preset.variantFlag !== null ? ` ${preset.variantFlag}` : ""}
           </div>

package/src/components/groups/GroupsDialog.tsx

@@ -598,7 +598,7 @@ function GroupList({
               )}
             >
               <div className="flex min-w-0 items-center justify-between gap-2">
-                <span className="min-w-0 truncate text-sm font-medium">{group.title}</span>
+                <span className="min-w-0 text-sm font-medium leading-snug">{group.title}</span>
                 <Badge variant="outline" className={statusClassName(group.status)}>
                   {statusLabel(group.status)}
                 </Badge>
@@ -673,7 +673,7 @@ function GroupDetails({
         <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div className="min-w-0 space-y-1">
             <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 className="min-w-0 truncate text-base font-semibold">{group.title}</h3>
+              <h3 className="min-w-0 text-base font-semibold leading-snug">{group.title}</h3>
               <Badge variant="outline" className={statusClassName(group.status)}>
                 {statusLabel(group.status)}
               </Badge>
@@ -1119,7 +1119,7 @@ function MemberRow({
         </div>
       </td>
       <td className="max-w-52 px-3 py-2">
-        <span className="block truncate">{providerModel(member)}</span>
+        <span className="block whitespace-normal leading-snug">{providerModel(member)}</span>
       </td>
       <td className="px-3 py-2">
         <Badge variant="outline" className={statusClassName(member.status)}>

package/src/components/providers/ImportWizardDialog.tsx

@@ -295,7 +295,7 @@ export function ImportWizardDialog({
                       <span className="text-[10px] text-muted-foreground">Already added</span>
                     )}
                   </div>
-                  <div className="text-xs text-muted-foreground mt-1 truncate">
+                  <div className="mt-1 text-xs leading-snug text-muted-foreground">
                     {p.models.slice(0, 4).join(", ")}
                     {p.models.length > 4 ? ` +${p.models.length - 4} more` : ""}
                   </div>

package/src/components/providers/ProviderCard.tsx

@@ -730,13 +730,13 @@ export function ProviderCard({
     <div
       className={`flex flex-col gap-3 rounded-[8px] border border-border bg-card p-4 shadow-sm transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`}
     >
-      <div className="flex items-start justify-between gap-2">
+      <div className="flex flex-wrap items-start justify-between gap-2">
         <div className="min-w-0 space-y-1">
-          <div className="flex min-w-0 items-center gap-2">
-            <span className="truncate font-medium">{provider.name}</span>
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <span className="font-medium leading-snug">{provider.name}</span>
             {providerSourceBadge}
           </div>
-          <div className="truncate text-xs text-muted-foreground">
+          <div className="text-xs leading-snug text-muted-foreground">
             {compactModelLabel(provider)}
           </div>
         </div>

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

@@ -573,7 +573,7 @@ function SideSummary({
           #{displayNumber}
         </span>
         {log.model !== null && (
-          <span className="font-mono text-muted-foreground truncate">{log.model}</span>
+          <span className="font-mono leading-snug text-muted-foreground">{log.model}</span>
         )}
       </div>
       <div className="flex items-center gap-3 text-muted-foreground font-mono">

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

@@ -237,11 +237,11 @@ export function ConversationHeader({
 
           {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              className="bg-white/[0.045] inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground"
+              className="bg-white/[0.045] inline-flex min-h-6 shrink-0 flex-wrap items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground"
               title={clientTooltip ?? clientDisplayLabel}
             >
               <ClientLogo client={clientApp} className="size-4 shrink-0" />
-              <span className="truncate font-mono tabular-nums">{clientDisplayLabel}</span>
+              <span className="font-mono leading-snug tabular-nums">{clientDisplayLabel}</span>
             </span>
           )}