@tonyclaw/agent-inspector 2.1.8 → 2.1.10

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

@@ -16,18 +16,11 @@ import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
-import { Badge } from "../ui/badge";
 import { ConfirmDialog } from "../ui/confirm-dialog";
 import { ProviderLogo, type Provider } from "../providers/ProviderLogo";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import { resolveLogFormat } from "./log-formats";
 
-const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
-  anthropic: "Anthropic",
-  openai: "OpenAI",
-  unknown: "Unknown",
-};
-
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;
@@ -35,12 +28,8 @@ export type ConversationHeaderProps = {
   totalCalls: number;
   totalInputTokens: number;
   totalOutputTokens: number;
-  apiFormat: "anthropic" | "openai" | "unknown";
   expanded: boolean;
   onToggle: () => void;
-  /** Hide the API format badge on the header (used when the group contains
-   * mixed formats - the per-log badges are shown instead). */
-  hideApiFormat?: boolean;
   /** Unique providers whose models appear in this group, with their distinct
    * model names. Rendered as a row of provider logos next to the header —
    * one per provider so model-switching inside a single session is visible
@@ -51,6 +40,16 @@ export type ConversationHeaderProps = {
   isLoading?: boolean;
   /** User-Agent string from the first log in the group. */
   userAgent?: string | null;
+  /** Process ID of the client that issued the first log in the group, used
+   * to render the session identifier. When `conversationId` is a real
+   * session id this is shown as a secondary pill; when `conversationId` is
+   * a fallback (no sessionId was emitted by the client, e.g. `PID:123|/cwd`)
+   * the PID is shown as the primary identifier instead. */
+  clientPid?: number | null;
+  /** Project folder of the client that issued the first log in the group.
+   * Only shown as a secondary label when the session lacks a real
+   * `sessionId` (the same fallback path used for `clientPid`). */
+  clientProjectFolder?: string | null;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs in this group. After confirmation the parent removes them
@@ -65,13 +64,13 @@ export function ConversationHeader({
   totalCalls,
   totalInputTokens,
   totalOutputTokens,
-  apiFormat,
   expanded,
   onToggle,
-  hideApiFormat = false,
   providers,
   isLoading = false,
   userAgent,
+  clientPid,
+  clientProjectFolder,
   timeDisplayFormat,
   onClear,
 }: ConversationHeaderProps): JSX.Element {
@@ -122,17 +121,59 @@ export function ConversationHeader({
         <ChevronRight className="size-4 text-muted-foreground shrink-0" />
       )}
 
-      {/* Conversation ID */}
-      <span
-        className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
-        title={conversationId}
-      >
-        {conversationId.startsWith("PID:") || conversationId.includes("|")
-          ? conversationId
-          : conversationId.length > 24
-            ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
-            : conversationId}
-      </span>
+      {/* Session identifier.
+          - Real session id (e.g. `sess_abc123...`) → render the id with the
+            standard ellipsis truncation; show `PID <n>` as a secondary pill
+            when we know the originating process.
+          - Fallback id (no sessionId was emitted) → the conversationId is
+            already a synthesized `PID:<n>|<folder>` marker; render the PID
+            as the primary identifier (purple, same weight as a real id)
+            and the project folder as a secondary muted label. */}
+      {conversationId.startsWith("PID:") || conversationId.includes("|") ? (
+        <>
+          {clientPid !== null && clientPid !== undefined ? (
+            <span
+              className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+              title={`PID ${clientPid}`}
+            >
+              PID {clientPid}
+            </span>
+          ) : (
+            <span className="text-purple-400/90 font-mono text-xs font-semibold shrink-0">
+              {conversationId}
+            </span>
+          )}
+          {clientProjectFolder !== null &&
+            clientProjectFolder !== undefined &&
+            clientProjectFolder !== "" && (
+              <span
+                className="text-muted-foreground text-xs font-mono truncate max-w-[200px] shrink-0"
+                title={clientProjectFolder}
+              >
+                {clientProjectFolder}
+              </span>
+            )}
+        </>
+      ) : (
+        <>
+          <span
+            className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+            title={conversationId}
+          >
+            {conversationId.length > 24
+              ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
+              : conversationId}
+          </span>
+          {clientPid !== null && clientPid !== undefined && (
+            <span
+              className="text-muted-foreground text-xs font-mono tabular-nums shrink-0 px-1.5 py-0.5 rounded border border-border bg-muted/40"
+              title={`Client process ID ${clientPid}`}
+            >
+              PID {clientPid}
+            </span>
+          )}
+        </>
+      )}
 
       {/* User-Agent */}
       {userAgent !== null && userAgent !== undefined && userAgent !== "" && (
@@ -145,21 +186,6 @@ export function ConversationHeader({
         </span>
       )}
 
-      {/* API Format Badge */}
-      {!hideApiFormat && (
-        <Badge
-          variant="outline"
-          className={cn(
-            "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
-            apiFormat === "openai" && "border-blue-500/40 text-blue-400",
-            apiFormat === "anthropic" && "border-orange-500/40 text-orange-400",
-            apiFormat === "unknown" && "border-muted text-muted-foreground",
-          )}
-        >
-          {API_FORMAT_LABELS[apiFormat]}
-        </Badge>
-      )}
-
       {/* Provider logos — one per unique provider used in this session. When
          a session switched models mid-stream (e.g. claude-3-5 → deepseek-v4)
          multiple logos appear side-by-side; tooltip lists every distinct

package/src/proxy/socketTracker.ts

@@ -31,6 +31,43 @@ const SocketSchema = z
 // Deduplicate concurrent lookups for the same port
 const inflight = new Map<number, Promise<ClientInfo>>();
 
+// --- Recent-client scan cache -------------------------------------------
+// `getClientInfo` no longer needs a per-request client port; it scans all
+// current connections to our listen port and returns the freshest. We cache
+// the result for a short window so a burst of requests from one client
+// converges on a single subprocess call.
+const RECENT_CLIENT_TTL_MS = 1000;
+let recentInflight: Promise<ClientInfo> | null = null;
+let recentCache: ClientInfo | null = null;
+let recentCacheExpiresAt = 0;
+
+/** The port the proxy is listening on. Falls back to the dev default. */
+function getProxyPort(): number {
+  // The proxy server exposes its chosen port via the `PROXY_PORT` env var.
+  // Default to the well-known dev port so the scan still works in dev mode
+  // (where `proxy.ts` reads from `getConfig()` instead of an env var).
+  const raw = process.env["PROXY_PORT"];
+  if (raw !== undefined) {
+    const parsed = parseInt(raw, 10);
+    if (Number.isInteger(parsed) && parsed > 0 && parsed <= 65_535) return parsed;
+  }
+  return 25947;
+}
+
+function getRecentClientFromCache(): ClientInfo | null {
+  if (recentCache === null) return null;
+  if (Date.now() >= recentCacheExpiresAt) {
+    recentCache = null;
+    return null;
+  }
+  return recentCache;
+}
+
+function setRecentClientCache(info: ClientInfo): void {
+  recentCache = info;
+  recentCacheExpiresAt = Date.now() + RECENT_CLIENT_TTL_MS;
+}
+
 function evictCacheIfNeeded(): void {
   while (cache.size > MAX_CACHE_SIZE) {
     const oldestKey = cache.keys().next().value;
@@ -54,17 +91,62 @@ function setCache(port: number, info: ClientInfo): void {
 }
 
 /**
- * Get the remote port from a Request's underlying socket.
- * Works with Bun, Node.js, and Nitro's event.node.req.
+ * Best-effort remote-port extraction across runtimes. Tries, in order:
+ * 1. TanStack Start / Nitro: `request.context.nitro.node.req.socket` (h3
+ *    wraps the underlying Node request, where the socket lives).
+ * 2. Bun-style: `request.socket` accessor.
+ * 3. Direct `socket` / `connection` properties on the request (legacy Node
+ *    IncomingMessage-style wrapping).
+ * Returns `null` when nothing matches — the caller will then leave `pid`
+ * (and downstream `clientPid`) as `null`.
  */
 export function extractRemotePort(request: Request): number | null {
+  const candidateSockets: unknown[] = [];
+
+  // 1) Nitro / h3 path. TanStack Start attaches the h3 event under
+  //    `request.context.nitro`, and the underlying Node request lives at
+  //    `event.node.req`. The socket may be on `req.socket` or
+  //    `req.connection` depending on the Node version / TLS config.
+  const requestAsUnknown: unknown = request;
+  const ctx = pick(requestAsUnknown, "context");
+  const nitro = pick(ctx, "nitro");
+  const node = pick(nitro, "node");
+  const innerReq = pick(node, "req");
+  const sock = pick(innerReq, "socket") ?? pick(innerReq, "connection");
+  if (sock !== undefined) candidateSockets.push(sock);
+
+  // 2) Bun-style direct socket accessor on the Request.
   const descriptor = Object.getOwnPropertyDescriptor(request, "socket");
-  if (descriptor === undefined || descriptor.get !== undefined) return null;
-  const parsed = SocketSchema.safeParse(descriptor.value);
-  if (!parsed.success) return null;
-  const remotePort = parsed.data.remotePort;
-  if (remotePort === undefined || remotePort === null) return null;
-  return remotePort;
+  if (descriptor !== undefined && descriptor.get === undefined) {
+    candidateSockets.push(descriptor.value);
+  }
+
+  // 3) Raw socket/connection properties on the request itself.
+  const directSocket = pick(requestAsUnknown, "socket");
+  if (directSocket !== undefined) candidateSockets.push(directSocket);
+  const directConnection = pick(requestAsUnknown, "connection");
+  if (directConnection !== undefined) candidateSockets.push(directConnection);
+
+  for (const candidate of candidateSockets) {
+    const parsed = SocketSchema.safeParse(candidate);
+    if (!parsed.success) continue;
+    const remotePort = parsed.data.remotePort;
+    if (remotePort === undefined || remotePort === null) continue;
+    return remotePort;
+  }
+  return null;
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return value !== undefined && value !== null && typeof value === "object";
+}
+
+/** Read a property from an `unknown` without triggering lint rules that
+ *  forbid type assertions. Returns `undefined` for non-object inputs or
+ *  when the property is missing. */
+function pick(value: unknown, key: string): unknown {
+  if (!isObject(value)) return undefined;
+  return value[key];
 }
 
 /**
@@ -226,37 +308,193 @@ async function lookupProcessInfo(
 }
 
 /**
- * Get client info (PID, CWD, project folder) from a request's source port.
- * Deduplicates concurrent lookups for the same port and caches results.
+ * Scan the OS connection table for the freshest client→proxy connection and
+ * return the matching PID plus its cwd/projectFolder.
  */
-export async function getClientInfo(request: Request): Promise<ClientInfo> {
-  const port = extractRemotePort(request);
-  if (port === null) {
+async function lookupRecentClient(): Promise<ClientInfo> {
+  const port = getProxyPort();
+  const platform = process.platform;
+  try {
+    if (platform === "win32") {
+      // Get-NetTCPConnection gives us CreationTime on the client-side
+      // (-RemotePort) entries, which we sort descending to pick the freshest.
+      const psScript = [
+        `$rows = Get-NetTCPConnection -RemotePort ${port} -State Established -ErrorAction SilentlyContinue`,
+        `if ($rows) {`,
+        `  $rows = $rows | Sort-Object CreationTime -Descending`,
+        `  $top = $rows | Select-Object -First 1`,
+        `  if ($top) { Write-Output ("$($top.OwningProcess)|$($top.LocalPort)") }`,
+        `}`,
+      ].join("; ");
+      const { stdout } = await execFileAsync(
+        "powershell.exe",
+        ["-NoProfile", "-NonInteractive", "-ExecutionPolicy", "Bypass", "-Command", psScript],
+        { windowsHide: true, timeout: 3000, maxBuffer: 16 * 1024 },
+      );
+      const trimmed = stdout.trim();
+      if (trimmed === "") return { port: null, pid: null, cwd: null, projectFolder: null };
+      const [pidStr, portStr] = trimmed.split("|");
+      const pid = parseInt(pidStr ?? "", 10);
+      const clientPort = parseInt(portStr ?? "", 10);
+      if (!Number.isInteger(pid) || pid <= 0) {
+        return { port: null, pid: null, cwd: null, projectFolder: null };
+      }
+      const { cwd, projectFolder } = await lookupProcessInfo(pid);
+      return {
+        port: Number.isInteger(clientPort) && clientPort > 0 ? clientPort : null,
+        pid,
+        cwd,
+        projectFolder,
+      };
+    }
+
+    // Unix: netstat with -p prints `pid/program` next to each entry. Pick
+    // the row matching our proxy port on the remote side (i.e. the client's
+    // ephemeral port + the proxy's listen port). When multiple clients are
+    // connected we take the highest ephemeral port — Linux/macOS assign
+    // ports in ascending order, so the largest one is the freshest.
+    const { stdout } = await execAsync(
+      `netstat -tanp 2>/dev/null | grep ':${port}' | grep ESTAB || ss -tanp 2>/dev/null | grep ':${port}' | grep ESTAB`,
+      { shell: "/bin/sh" },
+    );
+    const lines = stdout
+      .trim()
+      .split("\n")
+      .filter((line) => line.includes("ESTAB"));
+    const clientPid = pickNewestClientPidFromNetstat(lines, port);
+    if (clientPid === null) {
+      return { port: null, pid: null, cwd: null, projectFolder: null };
+    }
+    const { cwd, projectFolder } = await lookupProcessInfo(clientPid);
+    return { port: null, pid: clientPid, cwd, projectFolder };
+  } catch (err) {
+    logger.debug(`[socketTracker] Recent-client lookup failed for port ${port}:`, String(err));
     return { port: null, pid: null, cwd: null, projectFolder: null };
   }
+}
+
+/** Parse the output of `netstat -tanp` (or `ss -tanp`) and return the PID
+ *  on the most recently opened client-side connection to `proxyPort`. */
+function pickNewestClientPidFromNetstat(lines: string[], proxyPort: number): number | null {
+  const proxyToken = `:${proxyPort}`;
+  type Row = { pid: number; localPort: number; order: number };
+  const candidates: Row[] = [];
+  let order = 0;
+  for (const line of lines) {
+    order++;
+    const cols = line.trim().split(/\s+/);
+    if (cols.length < 7) continue;
+    const localAddr = cols[3] ?? "";
+    const remoteAddr = cols[4] ?? "";
+    const pidField = cols[6] ?? "";
+    // Client-side rows: `RemoteAddress` (5th col) is the proxy's listen port;
+    // `LocalAddress` (4th col) is the client's ephemeral port.
+    if (!remoteAddr.endsWith(proxyToken)) continue;
+    const pidMatch = pidField.match(/^(\d+)/);
+    if (pidMatch === null) continue;
+    const pid = parseInt(pidMatch[1] ?? "", 10);
+    if (!Number.isInteger(pid) || pid <= 0) continue;
+    const localPortMatch = localAddr.match(/:(\d+)$/);
+    const localPort = localPortMatch !== null ? parseInt(localPortMatch[1] ?? "", 10) : 0;
+    candidates.push({ pid, localPort, order });
+  }
+  if (candidates.length === 0) return null;
+  candidates.sort((a, b) => b.localPort - a.localPort || b.order - a.order);
+  return candidates[0]?.pid ?? null;
+}
+
+/** Custom request headers the client (or a wrapper script) may set so we
+ *  can identify the originating process without scanning the OS connection
+ *  table. Recognized names:
+ *   - `X-Agent-Inspector-Client-Pid`
+ *   - `X-Agent-Inspector-Client-Port`
+ *   - `X-Agent-Inspector-Client-Cwd`
+ *   - `X-Agent-Inspector-Client-Project-Folder`
+ *  Clients should set these via a small launcher script that exports the
+ *  values from `$$` and `pwd` before invoking the AI tool, e.g.:
+ *
+ *      curl -H "X-Agent-Inspector-Client-Pid: $$" \
+ *           -H "X-Agent-Inspector-Client-Cwd: $(pwd)" ...
+ */
+const CLIENT_HEADERS = {
+  pid: "x-agent-inspector-client-pid",
+  port: "x-agent-inspector-client-port",
+  cwd: "x-agent-inspector-client-cwd",
+  projectFolder: "x-agent-inspector-client-project-folder",
+} as const;
+
+/** Try to read a positive-integer value out of a header. Returns `null` for
+ *  missing / malformed values. */
+function readIntHeader(headers: Headers, name: string): number | null {
+  const raw = headers.get(name);
+  if (raw === null || raw === "") return null;
+  const parsed = parseInt(raw, 10);
+  if (!Number.isInteger(parsed) || parsed < 0) return null;
+  return parsed;
+}
+
+/** Read client-supplied headers. Returns `null` when no PID header is
+ *  present — caller falls back to OS scanning. */
+function readClientHeaders(request: Request): ClientInfo | null {
+  const pid = readIntHeader(request.headers, CLIENT_HEADERS.pid);
+  if (pid === null || pid === 0) return null;
+  const port = readIntHeader(request.headers, CLIENT_HEADERS.port);
+  const cwd = request.headers.get(CLIENT_HEADERS.cwd);
+  const projectFolder = request.headers.get(CLIENT_HEADERS.projectFolder);
+  return {
+    pid,
+    port: port !== null && port > 0 ? port : null,
+    cwd: cwd !== null && cwd !== "" ? cwd : null,
+    projectFolder: projectFolder !== null && projectFolder !== "" ? projectFolder : null,
+  };
+}
+
+/**
+ * Get client info (PID, CWD, project folder) for the request that triggered
+ * this call. The TanStack Start fetch-API `Request` does not expose the
+ * underlying TCP socket (no `request.socket`, no `event.node.req`), so we
+ * cannot derive the per-request client port from the request itself.
+ *
+ * Strategy: enumerate the OS-level TCP connections to our proxy's listen
+ * port and pick the most recently established client-side connection. This
+ * is essentially "who is currently talking to us" — for a session with many
+ * rapid-fire requests the same client holds a long-lived connection, so
+ * consecutive lookups within the cache TTL converge on the same PID.
+ *
+ * Deduplicates concurrent lookups with a single in-flight promise. Results
+ * are cached by PID for `RECENT_CLIENT_TTL_MS` to avoid spawning a
+ * `Get-NetTCPConnection` / `ss` subprocess on every single request.
+ */
+export async function getClientInfo(request: Request): Promise<ClientInfo> {
+  // Preferred path: explicit client identity in headers. AI coding tools
+  // (or the wrapper scripts that launch them) attach
+  // `X-Agent-Inspector-Client-Pid` (and optionally …-Cwd /
+  // …-Project-Folder / …-Port) so we never have to guess.
+  const fromHeaders = readClientHeaders(request);
+  if (fromHeaders !== null) return fromHeaders;
 
-  // Check cache first
-  const cached = getFromCache(port);
-  if (cached) return cached;
+  // Fallback: scan the OS connection table for the most recently opened
+  // client→proxy connection. Best-effort — in environments with many
+  // long-lived keep-alive connections (browsers, background processes) the
+  // picked connection may not belong to the current request.
+  const cached = getRecentClientFromCache();
+  if (cached !== null) return cached;
 
-  // Deduplicate concurrent lookups for the same port
-  const existing = inflight.get(port);
+  const existing = recentInflight;
   if (existing) return existing;
 
-  const promise = lookupClientInfo(port)
+  const promise = lookupRecentClient()
     .then((info) => {
-      setCache(port, info);
-      inflight.delete(port);
+      setRecentClientCache(info);
+      recentInflight = null;
       return info;
     })
     .catch((err) => {
-      inflight.delete(port);
-      logger.debug(`[socketTracker] Lookup failed for port ${port}:`, String(err));
-      const fallback: ClientInfo = { port, pid: null, cwd: null, projectFolder: null };
-      setCache(port, fallback);
-      return fallback;
+      recentInflight = null;
+      logger.debug(`[socketTracker] Recent-client lookup failed:`, String(err));
+      return { port: null, pid: null, cwd: null, projectFolder: null };
     });
 
-  inflight.set(port, promise);
+  recentInflight = promise;
   return promise;
 }

package/.output/public/assets/_sessionId-xBBbFH1M.js

@@ -1 +0,0 @@
-import{R as s,j as e}from"./main-Dc2qVWpb.js";import{P as i}from"./ProxyViewerContainer-BiZ2_tMC.js";function t(){const{sessionId:o}=s.useParams();return e.jsx(i,{initialSessionId:o},o)}export{t as component};

package/.output/public/assets/index-6udjwQO1.js

@@ -1 +0,0 @@
-import{P as o}from"./ProxyViewerContainer-BiZ2_tMC.js";import"./main-Dc2qVWpb.js";const r=o;export{r as component};