@tonyclaw/agent-inspector 2.0.27 → 2.0.29

package/.output/server/index.mjs

@@ -35,103 +35,103 @@ const headers = ((m) => function headersRouteRule(event) {
   }
 });
 const assets = {
-  "/assets/index-CQT4higx.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"74-gWIAXMUZANjNHlWTIO5NeVHxrXg"',
-    "mtime": "2026-06-30T01:22:22.129Z",
-    "size": 116,
-    "path": "../public/assets/index-CQT4higx.js"
-  },
-  "/assets/CompareDrawer-B_p6vmMQ.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"49fe-MtnQEnhved8xLSD42VJ6I1PWK+E"',
-    "mtime": "2026-06-30T01:22:22.129Z",
-    "size": 18942,
-    "path": "../public/assets/CompareDrawer-B_p6vmMQ.js"
-  },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "mtime": "2026-06-30T09:01:48.556Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/index-DsiKfWCp.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"1a3d5-pnLJEAiyUUKlRw5OUnvwf1dCQeI"',
-    "mtime": "2026-06-30T01:22:22.129Z",
-    "size": 107477,
-    "path": "../public/assets/index-DsiKfWCp.css"
+  "/assets/index-BhQGSdhG.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"74-1e7gU3IOVaEjblxPQfgH61GRjlw"',
+    "mtime": "2026-06-30T09:01:48.556Z",
+    "size": 116,
+    "path": "../public/assets/index-BhQGSdhG.js"
+  },
+  "/assets/CompareDrawer-DcqxlgSQ.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"49fe-+D2I+/9sd7EYksKARn3HVY2eJf0"',
+    "mtime": "2026-06-30T09:01:48.556Z",
+    "size": 18942,
+    "path": "../public/assets/CompareDrawer-DcqxlgSQ.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "mtime": "2026-06-30T09:01:48.556Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/ReplayDialog-BmprJ6D3.js": {
+  "/assets/index-CwlHPmgL.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"1a3f0-E2f0kOdSBi1RhjoK38+CSij/apg"',
+    "mtime": "2026-06-30T09:01:48.556Z",
+    "size": 107504,
+    "path": "../public/assets/index-CwlHPmgL.css"
+  },
+  "/assets/ReplayDialog-CBcnPgx1.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"318c-AmdKZr32QndralPtdyOHXT6ma8g"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "etag": '"318c-Wq35vSCO67O3pnw6riReoXT9gOg"',
+    "mtime": "2026-06-30T09:01:48.557Z",
     "size": 12684,
-    "path": "../public/assets/ReplayDialog-BmprJ6D3.js"
+    "path": "../public/assets/ReplayDialog-CBcnPgx1.js"
   },
-  "/assets/RequestAnatomy-DqO0_SVJ.js": {
+  "/assets/RequestAnatomy-DSgSqCYt.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4485-Dn6zXY3u3Xh6+Mf8Wqy0LovvrJc"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "etag": '"4485-rBai6wnmYHf662t3omQFALcwHSw"',
+    "mtime": "2026-06-30T09:01:48.557Z",
     "size": 17541,
-    "path": "../public/assets/RequestAnatomy-DqO0_SVJ.js"
+    "path": "../public/assets/RequestAnatomy-DSgSqCYt.js"
   },
-  "/assets/ResponseView-FZbPNdHa.js": {
+  "/assets/ResponseView-CjqzBSoF.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"30d0-Vy37cZ6aojvHWlD+tTR85FfRRSM"',
-    "mtime": "2026-06-30T01:22:22.131Z",
+    "etag": '"30d0-13nPwe9jIZSSl43vTEhXlswXwn8"',
+    "mtime": "2026-06-30T09:01:48.557Z",
     "size": 12496,
-    "path": "../public/assets/ResponseView-FZbPNdHa.js"
+    "path": "../public/assets/ResponseView-CjqzBSoF.js"
   },
-  "/assets/StreamingChunkSequence-BZPzfJWj.js": {
+  "/assets/StreamingChunkSequence-DdBBKolI.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d57-pfsl61xCHzpslTaweknYjZ2A3D4"',
-    "mtime": "2026-06-30T01:22:22.131Z",
+    "etag": '"d57-9H1QMwesXGWHkYNTPJ/9zDoslX0"',
+    "mtime": "2026-06-30T09:01:48.557Z",
     "size": 3415,
-    "path": "../public/assets/StreamingChunkSequence-BZPzfJWj.js"
-  },
-  "/assets/zhipuai-BPNAnxo-.svg": {
-    "type": "image/svg+xml",
-    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-30T01:22:22.129Z",
-    "size": 11256,
-    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+    "path": "../public/assets/StreamingChunkSequence-DdBBKolI.js"
   },
-  "/assets/_sessionId-y2ATIp51.js": {
+  "/assets/_sessionId-wctOoGh_.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-Pjbf+xPeCq/pZGai1EzjS0QCV6Q"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "etag": '"d2-fiIvvYyX9jF4fd1W7HpowwQ2Zj4"',
+    "mtime": "2026-06-30T09:01:48.556Z",
     "size": 210,
-    "path": "../public/assets/_sessionId-y2ATIp51.js"
+    "path": "../public/assets/_sessionId-wctOoGh_.js"
   },
-  "/assets/main-CzItFZlM.js": {
+  "/assets/main-B6OLZCp9.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"51726-MNggoHWYk07f7qXrHiC/ZapXa7o"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "etag": '"51726-MaBaigWv6OLiiYg6fusFyN758Hw"',
+    "mtime": "2026-06-30T09:01:48.557Z",
     "size": 333606,
-    "path": "../public/assets/main-CzItFZlM.js"
+    "path": "../public/assets/main-B6OLZCp9.js"
+  },
+  "/assets/zhipuai-BPNAnxo-.svg": {
+    "type": "image/svg+xml",
+    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
+    "mtime": "2026-06-30T09:01:48.556Z",
+    "size": 11256,
+    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-30T01:22:22.129Z",
+    "mtime": "2026-06-30T09:01:48.556Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/ProxyViewerContainer-DItqh1EO.js": {
+  "/assets/ProxyViewerContainer-D650kQlv.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"af111-hYBEti7PXxO28eHLSM5rHWrM0Vg"',
-    "mtime": "2026-06-30T01:22:22.131Z",
-    "size": 717073,
-    "path": "../public/assets/ProxyViewerContainer-DItqh1EO.js"
+    "etag": '"af8bd-kLHfI4KjZ80Xpnq5/VoFdzyBH10"',
+    "mtime": "2026-06-30T09:01:48.557Z",
+    "size": 719037,
+    "path": "../public/assets/ProxyViewerContainer-D650kQlv.js"
   }
 };
 function readAsset(id) {

package/package.json

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

package/src/cli/networkHints.ts

@@ -0,0 +1,150 @@
+import { networkInterfaces } from "node:os";
+
+export type NetworkInterfaceMap = ReturnType<typeof networkInterfaces>;
+
+export type BindHost = string | undefined;
+
+export function localUrlForPort(port: number): string {
+  return `http://localhost:${String(port)}`;
+}
+
+function trimHost(host: BindHost): string | undefined {
+  const trimmed = host?.trim();
+  return trimmed === undefined || trimmed.length === 0 ? undefined : trimmed;
+}
+
+export function isWildcardHost(host: BindHost): boolean {
+  const trimmed = trimHost(host);
+  return trimmed === undefined || trimmed === "0.0.0.0" || trimmed === "::" || trimmed === "[::]";
+}
+
+export function isLoopbackHost(host: BindHost): boolean {
+  const trimmed = trimHost(host);
+  if (trimmed === undefined) return false;
+  return (
+    trimmed === "localhost" ||
+    trimmed === "::1" ||
+    trimmed === "[::1]" ||
+    trimmed.startsWith("127.")
+  );
+}
+
+function bracketIpv6(host: string): string {
+  if (!host.includes(":")) return host;
+  if (host.startsWith("[") && host.endsWith("]")) return host;
+  return `[${host}]`;
+}
+
+export function urlForHost(port: number, host: BindHost): string {
+  const trimmed = trimHost(host);
+  if (trimmed === undefined || isWildcardHost(trimmed)) return localUrlForPort(port);
+  return `http://${bracketIpv6(trimmed)}:${String(port)}`;
+}
+
+export function probeHostForBindHost(host: BindHost): string {
+  const trimmed = trimHost(host);
+  if (trimmed === undefined || isWildcardHost(trimmed)) return "127.0.0.1";
+  if (trimmed.startsWith("[") && trimmed.endsWith("]")) return trimmed.slice(1, -1);
+  return trimmed;
+}
+
+export function isValidBindHost(host: string): boolean {
+  const trimmed = host.trim();
+  if (trimmed.length === 0) return false;
+  if (/^https?:\/\//i.test(trimmed)) return false;
+  if (/[\s/\\]/.test(trimmed)) return false;
+  return true;
+}
+
+function isUsableAddress(address: string): boolean {
+  return address !== "0.0.0.0" && !address.startsWith("169.254.");
+}
+
+function is172Private(address: string): boolean {
+  const parts = address.split(".");
+  const second = Number(parts[1] ?? "");
+  return parts[0] === "172" && Number.isInteger(second) && second >= 16 && second <= 31;
+}
+
+function addressScore(address: string): number {
+  if (address.startsWith("192.168.")) return 0;
+  if (address.startsWith("10.")) return 1;
+  if (is172Private(address)) return 2;
+  return 3;
+}
+
+export function collectNetworkUrls(
+  port: number,
+  interfaces: NetworkInterfaceMap = networkInterfaces(),
+): string[] {
+  const addresses = new Set<string>();
+
+  for (const entries of Object.values(interfaces)) {
+    if (entries === undefined) continue;
+    for (const entry of entries) {
+      if (entry.family === "IPv4" && !entry.internal && isUsableAddress(entry.address)) {
+        addresses.add(entry.address);
+      }
+    }
+  }
+
+  return [...addresses]
+    .sort((left, right) => {
+      const score = addressScore(left) - addressScore(right);
+      return score !== 0 ? score : left.localeCompare(right);
+    })
+    .slice(0, 4)
+    .map((address) => `http://${address}:${String(port)}`);
+}
+
+export function networkUrlsForBindHost(
+  port: number,
+  host: BindHost,
+  interfaces: NetworkInterfaceMap = networkInterfaces(),
+): string[] {
+  if (isLoopbackHost(host)) return [];
+  if (isWildcardHost(host)) return collectNetworkUrls(port, interfaces);
+  return [urlForHost(port, host)];
+}
+
+export function formatAccessHintLines(
+  port: number,
+  networkUrls: readonly string[],
+  host: BindHost = undefined,
+): string[] {
+  const localUrl = localUrlForPort(port);
+  const hostLabel = isWildcardHost(host) ? "all interfaces (0.0.0.0)" : (trimHost(host) ?? "");
+  const lines = ["Access URLs:", `   Bind host:      ${hostLabel}`];
+
+  if (isLoopbackHost(host) || isWildcardHost(host)) {
+    lines.push(`   Local UI:       ${localUrl}`);
+    lines.push(`   Local proxy:    ${localUrl}/proxy`);
+    lines.push(`   Local MCP:      ${localUrl}/api/mcp`);
+  } else {
+    const boundUrl = urlForHost(port, host);
+    lines.push(`   Bound UI:       ${boundUrl}`);
+    lines.push(`   Bound proxy:    ${boundUrl}/proxy`);
+    lines.push(`   Bound MCP:      ${boundUrl}/api/mcp`);
+    lines.push("   Localhost:      may not work because the server is bound to a specific host");
+  }
+
+  const firstNetworkUrl = networkUrls[0];
+  if (isLoopbackHost(host)) {
+    lines.push("   Network:        disabled by loopback bind host");
+  } else if (firstNetworkUrl === undefined) {
+    lines.push("   Network:        no non-loopback IPv4 address detected");
+  } else {
+    lines.push(`   Network UI:     ${firstNetworkUrl}`);
+    lines.push(`   Network proxy:  ${firstNetworkUrl}/proxy`);
+    const moreUrls = networkUrls.slice(1);
+    if (moreUrls.length > 0) {
+      lines.push(`   Other IPs:      ${moreUrls.join(", ")}`);
+    }
+  }
+
+  lines.push(
+    "   Container note: if the coding agent is in another container or machine, replace localhost with a reachable host/IP and verify the port is reachable.",
+  );
+
+  return lines;
+}

package/src/cli.ts

@@ -4,6 +4,14 @@ import { createConnection } from "node:net";
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve as resolvePath } from "node:path";
 import { existsSync } from "node:fs";
+import {
+  formatAccessHintLines,
+  isValidBindHost,
+  localUrlForPort,
+  networkUrlsForBindHost,
+  probeHostForBindHost,
+  urlForHost,
+} from "./cli/networkHints.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -43,11 +51,11 @@ await runStart(process.argv.slice(2));
 // Legacy `start` behavior — start the proxy on the configured port. Extracted
 // into a function so the router above can keep the top-level flow readable.
 // -----------------------------------------------------------------------------
-async function isInspectorHealthy(port: number): Promise<boolean> {
+async function isInspectorHealthy(port: number, host?: string): Promise<boolean> {
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), LOCAL_PROBE_TIMEOUT_MS);
   try {
-    const response = await fetch(`http://127.0.0.1:${port}/api/health`, {
+    const response = await fetch(`${urlForHost(port, probeHostForBindHost(host))}/api/health`, {
       cache: "no-store",
       signal: controller.signal,
     });
@@ -59,11 +67,11 @@ async function isInspectorHealthy(port: number): Promise<boolean> {
   }
 }
 
-async function getRunningCaptureMode(port: number): Promise<CaptureMode | null> {
+async function getRunningCaptureMode(port: number, host?: string): Promise<CaptureMode | null> {
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), LOCAL_PROBE_TIMEOUT_MS);
   try {
-    const response = await fetch(`http://127.0.0.1:${port}/api/config`, {
+    const response = await fetch(`${urlForHost(port, probeHostForBindHost(host))}/api/config`, {
       cache: "no-store",
       signal: controller.signal,
     });
@@ -77,9 +85,9 @@ async function getRunningCaptureMode(port: number): Promise<CaptureMode | null>
   }
 }
 
-function isPortAcceptingConnections(port: number): Promise<boolean> {
+function isPortAcceptingConnections(port: number, host?: string): Promise<boolean> {
   return new Promise((resolve) => {
-    const socket = createConnection({ host: "127.0.0.1", port });
+    const socket = createConnection({ host: probeHostForBindHost(host), port });
     const finish = (value: boolean): void => {
       socket.removeAllListeners();
       socket.destroy();
@@ -99,10 +107,14 @@ function sleep(ms: number): Promise<void> {
   });
 }
 
-async function waitForInspectorHealthy(port: number, timeoutMs: number): Promise<boolean> {
+async function waitForInspectorHealthy(
+  port: number,
+  timeoutMs: number,
+  host?: string,
+): Promise<boolean> {
   const start = Date.now();
   while (Date.now() - start < timeoutMs) {
-    if (await isInspectorHealthy(port)) return true;
+    if (await isInspectorHealthy(port, host)) return true;
     await sleep(250);
   }
   return false;
@@ -179,13 +191,22 @@ function readCaptureMode(raw: unknown): CaptureMode | null {
   return typeof value === "string" ? parseCaptureMode(value) : null;
 }
 
+function printAccessHints(port: number, host?: string): void {
+  const networkUrls = networkUrlsForBindHost(port, host);
+  for (const line of formatAccessHintLines(port, networkUrls, host)) {
+    console.log(line);
+  }
+}
+
 async function runStart(args: string[]): Promise<void> {
   const envPort = process.env["PORT"];
   const portDefault = envPort !== undefined ? Number(envPort) : DEFAULT_PORT;
+  const envHost = process.env["NITRO_HOST"] ?? process.env["HOST"];
   const envMode =
     process.env["AGENT_INSPECTOR_CAPTURE_MODE"] ?? process.env["AGENT_INSPECTOR_MODE"];
 
   let port = portDefault;
+  let host = envHost !== undefined && envHost.trim().length > 0 ? envHost.trim() : undefined;
   let open = true;
   let openWasSpecified = false;
   let background = false;
@@ -206,8 +227,24 @@ async function runStart(args: string[]): Promise<void> {
     captureModeWasSpecified = true;
   }
 
+  if (host !== undefined && !isValidBindHost(host)) {
+    console.error(`Invalid host: ${host}. Use an IP or hostname without protocol/path.`);
+    process.exitCode = 1;
+    return;
+  }
+
   for (let i = 0; i < args.length; i++) {
     const arg = args[i] ?? "";
+    if (arg.startsWith("--host=")) {
+      const value = arg.slice(arg.indexOf("=") + 1).trim();
+      if (!isValidBindHost(value)) {
+        console.error(`Invalid host: ${value}. Use an IP or hostname without protocol/path.`);
+        process.exitCode = 1;
+        return;
+      }
+      host = value;
+      continue;
+    }
     if (arg.startsWith("--mode=") || arg.startsWith("--capture-mode=")) {
       const value = arg.slice(arg.indexOf("=") + 1);
       const parsedMode = parseCaptureMode(value);
@@ -226,6 +263,18 @@ async function runStart(args: string[]): Promise<void> {
         port = Number(args[i + 1]);
         i++;
         break;
+      case "--host":
+      case "-H": {
+        const value = args[i + 1]?.trim() ?? "";
+        if (!isValidBindHost(value)) {
+          console.error(`Invalid host: ${value}. Use an IP or hostname without protocol/path.`);
+          process.exitCode = 1;
+          return;
+        }
+        host = value;
+        i++;
+        break;
+      }
       case "--no-open":
         open = false;
         openWasSpecified = true;
@@ -348,12 +397,13 @@ async function runStart(args: string[]): Promise<void> {
 
   process.env["PORT"] = String(port);
 
-  const url = `http://localhost:${port}`;
+  const url = urlForHost(port, host);
 
-  if (!forceRestart && (await isInspectorHealthy(port))) {
+  if (!forceRestart && (await isInspectorHealthy(port, host))) {
     console.log(`agent-inspector is already running at ${url}`);
+    printAccessHints(port, host);
     if (captureModeWasSpecified) {
-      const runningMode = await getRunningCaptureMode(port);
+      const runningMode = await getRunningCaptureMode(port, host);
       if (runningMode !== null && runningMode !== captureMode) {
         console.log(`Existing instance capture mode is ${runningMode}; requested ${captureMode}.`);
         console.log(`Use --force-restart to restart with ${captureMode} mode.`);
@@ -366,7 +416,7 @@ async function runStart(args: string[]): Promise<void> {
     return;
   }
 
-  if (!forceRestart && (await isPortAcceptingConnections(port))) {
+  if (!forceRestart && (await isPortAcceptingConnections(port, host))) {
     console.error(`Port ${port} is already in use, but it is not a healthy agent-inspector.`);
     console.error(`Stop that process, choose --port <n>, or re-run with --force-restart.`);
     process.exitCode = 1;
@@ -380,6 +430,7 @@ async function runStart(args: string[]): Promise<void> {
   console.log(`Server running at ${url}`);
   console.log(`   Capture mode: ${captureMode}`);
   console.log(`   Proxy: ${url}/proxy`);
+  printAccessHints(port, host);
   console.log(``);
   console.log(`Route AI coding tools through the proxy:`);
   console.log(`   Claude Code:  ANTHROPIC_BASE_URL=${url}/proxy claude`);
@@ -388,6 +439,9 @@ async function runStart(args: string[]): Promise<void> {
   console.log(
     `   Direct HTTP:  curl ${url}/proxy/v1/messages -d '{"model":"...","messages":[...]}'`,
   );
+  console.log(
+    `   Remote/container tools: use the Network proxy URL above when shown; otherwise restart with --host 0.0.0.0 or a reachable IP.`,
+  );
   console.log(``);
   console.log(`Routing environment variables:`);
   console.log(`   ROUTES            JSON map of model prefix -> upstream URL`);
@@ -429,6 +483,10 @@ async function runStart(args: string[]): Promise<void> {
   if (providersJson !== undefined) {
     serverEnv["AGENT_INSPECTOR_PROVIDERS_JSON"] = providersJson;
   }
+  if (host !== undefined) {
+    serverEnv["HOST"] = host;
+    serverEnv["NITRO_HOST"] = host;
+  }
   serverEnv["AGENT_INSPECTOR_CAPTURE_MODE"] = captureMode;
   const serverProcess = spawn(serverCommand.command, serverCommand.args, {
     stdio: background ? ["ignore", "ignore", "ignore"] : "inherit",
@@ -439,8 +497,9 @@ async function runStart(args: string[]): Promise<void> {
 
   if (background) {
     serverProcess.unref();
-    if (await waitForInspectorHealthy(port, 5000)) {
+    if (await waitForInspectorHealthy(port, 5000, host)) {
       console.log(`agent-inspector background server is ready at ${url}`);
+      printAccessHints(port, host);
       return;
     }
     console.error(`agent-inspector background server did not become ready at ${url}.`);

package/src/components/ProxyViewer.tsx

@@ -783,6 +783,9 @@ export function ProxyViewer({
               <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">
+              Local First. Evidence First.
+            </span>
             <McpReadyBadge />
           </h1>
           <div className="justify-self-end">

package/src/components/providers/ProviderCard.tsx

@@ -87,6 +87,16 @@ function hasHeaderDetails(headers: Record<string, string> | undefined): boolean
   return formatHeaders(headers) !== undefined;
 }
 
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatTokenRate(tokensPerSecond: number): string {
+  if (tokensPerSecond >= 10) return `${tokensPerSecond.toFixed(0)}/s`;
+  return `${tokensPerSecond.toFixed(1)}/s`;
+}
+
 function hasDiagnosticDetails(result: TestResult): boolean {
   const debug = result.debug;
   return (
@@ -255,6 +265,7 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
   }
   if (result.success) {
     const tokenParts: ReactNode[] = [];
+    const timingParts: ReactNode[] = [];
     if (result.inputTokens !== undefined) {
       tokenParts.push(<span key="in">{result.inputTokens} in</span>);
     }
@@ -275,11 +286,29 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
         </span>,
       );
     }
+    if (result.firstChunkMs !== undefined && result.firstChunkMs !== null) {
+      timingParts.push(<span key="first">first {formatElapsed(result.firstChunkMs)}</span>);
+    }
+    if (result.totalStreamMs !== undefined && result.totalStreamMs !== null) {
+      timingParts.push(<span key="total">total {formatElapsed(result.totalStreamMs)}</span>);
+    }
+    if (
+      result.tokensPerSecond !== undefined &&
+      result.tokensPerSecond !== null &&
+      result.tokensPerSecond > 0
+    ) {
+      timingParts.push(<span key="rate">{formatTokenRate(result.tokensPerSecond)} tok/s</span>);
+    }
     const displayTokens: ReactNode[] = [];
     for (let i = 0; i < tokenParts.length; i++) {
       if (i > 0) displayTokens.push(", ");
       displayTokens.push(tokenParts[i]);
     }
+    const displayTiming: ReactNode[] = [];
+    for (let i = 0; i < timingParts.length; i++) {
+      if (i > 0) displayTiming.push(", ");
+      displayTiming.push(timingParts[i]);
+    }
     return (
       <TooltipProvider>
         <Tooltip>
@@ -290,6 +319,9 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
               {tokenParts.length > 0 && (
                 <span className="text-muted-foreground">({displayTokens})</span>
               )}
+              {timingParts.length > 0 && (
+                <span className="hidden text-muted-foreground lg:inline">({displayTiming})</span>
+              )}
             </div>
           </TooltipTrigger>
           <TooltipContent>Connection test passed</TooltipContent>

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

@@ -11,6 +11,7 @@ import {
   Copy,
   FileDiff,
   FileTerminal,
+  Gauge,
   Globe,
   History,
   Loader2,
@@ -45,6 +46,11 @@ function formatElapsed(ms: number): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
+function formatTokenRate(tokensPerSecond: number): string {
+  if (tokensPerSecond >= 10) return `${tokensPerSecond.toFixed(0)}/s`;
+  return `${tokensPerSecond.toFixed(1)}/s`;
+}
+
 /**
  * Inline trend indicator: small arrow (green up / red down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
@@ -148,6 +154,11 @@ export const LogEntryHeader = memo(function ({
     log.elapsedMs > slowResponseThresholdSeconds * 1000;
 
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
+  const firstChunkMs = log.firstChunkMs ?? null;
+  const tokensPerSecond = log.tokensPerSecond ?? null;
+  const firstChunkLabel = firstChunkMs === null ? null : formatElapsed(firstChunkMs);
+  const tokenRateLabel =
+    tokensPerSecond === null || tokensPerSecond <= 0 ? null : formatTokenRate(tokensPerSecond);
 
   return (
     <TooltipProvider>
@@ -238,11 +249,37 @@ export const LogEntryHeader = memo(function ({
                 ? `Slow response: ${formatElapsed(log.elapsedMs)} exceeds ${formatElapsed(
                     slowResponseThresholdSeconds * 1000,
                   )}`
-                : "Elapsed response time"}
+                : log.streaming
+                  ? "Total streaming response time"
+                  : "Elapsed response time"}
             </TooltipContent>
           </Tooltip>
         )}
 
+        {/* Streaming timing */}
+        {log.streaming && firstChunkLabel !== null && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs text-cyan-400 shrink-0">
+                <Radio className="size-3" />
+                <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Time to first streaming chunk</TooltipContent>
+          </Tooltip>
+        )}
+        {log.streaming && tokenRateLabel !== null && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs text-emerald-400 shrink-0">
+                <Gauge className="size-3" />
+                <span className="font-mono tabular-nums">{tokenRateLabel}</span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Output token throughput after first chunk</TooltipContent>
+          </Tooltip>
+        )}
+
         {/* Token counts */}
         {hasTokens && (
           <span className="flex items-center gap-1 text-xs shrink-0">