@tonyclaw/llm-inspector 1.18.1 → 1.18.2

package/src/components/ProxyViewerContainer.tsx

@@ -62,6 +62,12 @@ function filterLogs(
 
 const DEBOUNCE_MS = 50;
 
+function buildLogsStreamUrl(sessionId: string | undefined): string {
+  if (sessionId === undefined) return "/api/logs/stream";
+  const params = new URLSearchParams({ sessionId });
+  return `/api/logs/stream?${params.toString()}`;
+}
+
 export function ProxyViewerContainer({
   initialSessionId,
 }: {
@@ -142,12 +148,7 @@ export function ProxyViewerContainer({
       eventSourceRef.current.close();
     }
 
-    // Stable, unfiltered connection. The frontend derives filtered views
-    // from the complete set, so the SSE never needs to reopen on filter
-    // change. If the in-memory set ever grows past what the client can
-    // handle, swap this back to a parameterized URL and reconnect on
-    // filter change.
-    const es = new EventSource("/api/logs/stream");
+    const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
 
     es.onmessage = (event: MessageEvent) => {
@@ -193,7 +194,7 @@ export function ProxyViewerContainer({
       }
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3000);
     };
-  }, [scheduleUpdate]);
+  }, [initialSessionId, scheduleUpdate]);
 
   useEffect(() => {
     connectSSE();
@@ -214,9 +215,22 @@ export function ProxyViewerContainer({
   }, [connectSSE]);
 
   const handleClearAll = useCallback(() => {
+    if (initialSessionId !== undefined && allLogs.length === 0) return;
     void (async () => {
       try {
-        const res = await fetch("/api/logs", { method: "DELETE" });
+        const body =
+          initialSessionId === undefined
+            ? undefined
+            : JSON.stringify({ ids: allLogs.map((log) => log.id) });
+        const res = await fetch("/api/logs", {
+          method: "DELETE",
+          ...(body === undefined
+            ? {}
+            : {
+                headers: { "Content-Type": "application/json" },
+                body,
+              }),
+        });
         if (!res.ok) {
           setError("Failed to clear logs");
           return;
@@ -228,7 +242,7 @@ export function ProxyViewerContainer({
         setError(err instanceof Error ? err.message : "Unknown error clearing logs");
       }
     })();
-  }, []);
+  }, [allLogs, initialSessionId]);
 
   const handleClearGroup = useCallback((ids: number[]) => {
     if (ids.length === 0) return;
@@ -290,6 +304,7 @@ export function ProxyViewerContainer({
         slowResponseThresholdSeconds={slowResponseThresholdSeconds}
         // Session filter is the URL's job when `initialSessionId` was given.
         hideSessionFilter={initialSessionId !== undefined}
+        pinnedSessionId={initialSessionId}
       />
     </>
   );

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

@@ -11,6 +11,7 @@ import {
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
+import { getSessionPath } from "../../lib/sessionUrl";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
@@ -35,7 +36,7 @@ export type ConversationHeaderProps = {
   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). */
+   * mixed formats - the per-log badges are shown instead). */
   hideApiFormat?: boolean;
   /** When true and the group is collapsed, show a spinner instead of the
    * expand chevron to indicate an in-flight request inside the group. */
@@ -78,23 +79,7 @@ export function ConversationHeader({
   const handleOpenInNewTab = useCallback(
     (e: React.MouseEvent | React.KeyboardEvent): void => {
       e.stopPropagation();
-      // Base64url-encode the session id so the path contains only
-      // unreserved characters (A-Z a-z 0-9 - _) that survive Vite's
-      // URL normalisation without triggering a redirect loop.
-      // Falls back to percent-encoding when the id contains non-Latin-1
-      // characters (e.g. CJK paths in PID|folder format) that btoa()
-      // rejects.
-      let encoded: string;
-      try {
-        encoded = btoa(conversationId).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-      } catch {
-        // Non-Latin-1 characters in the id — fall back to percent-encoding.
-        // These URLs may not survive Vite's URL normalisation but the
-        // situation is rare enough (CJK paths) to accept the edge case.
-        encoded = encodeURIComponent(conversationId);
-      }
-      const url = `/session/${encoded}`;
-      window.open(url, "_blank", "noopener,noreferrer");
+      window.open(getSessionPath(conversationId), "_blank", "noopener,noreferrer");
     },
     [conversationId],
   );
@@ -121,7 +106,7 @@ export function ConversationHeader({
         }
       }}
     >
-      {/* Expand chevron — shows spinner when collapsed and group has pending logs */}
+      {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
       {expanded ? (
         <ChevronDown className="size-4 text-muted-foreground shrink-0" />
       ) : isLoading ? (
@@ -138,7 +123,7 @@ export function ConversationHeader({
         {conversationId.startsWith("PID:") || conversationId.includes("|")
           ? conversationId
           : conversationId.length > 24
-            ? conversationId.slice(0, 12) + "…" + conversationId.slice(-12)
+            ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
             : conversationId}
       </span>
 
@@ -197,7 +182,7 @@ export function ConversationHeader({
       {/* Spacer */}
       <span className="flex-1 min-w-0" />
 
-      {/* Open this session in a new tab — deep link to /session/$id */}
+      {/* Open this session in a new tab - deep link to /session/$id */}
       <button
         type="button"
         onClick={handleOpenInNewTab}
@@ -213,7 +198,7 @@ export function ConversationHeader({
         <ExternalLink className="size-3.5" />
       </button>
 
-      {/* Per-group Clear — does not toggle the group's expand state */}
+      {/* Per-group Clear - does not toggle the group's expand state */}
       {onClear !== undefined && (
         <button
           type="button"

package/src/components/ui/mcp-logo.tsx

@@ -0,0 +1,20 @@
+import type { JSX } from "react";
+import { cn } from "../../lib/utils";
+import McpLogoPng from "../../assets/logos/mcp.png";
+
+/**
+ * Official Model Context Protocol logo (from Wikimedia Commons). The PNG
+ * is a black-on-white raster of the official mark — flipped to a white
+ * silhouette on the dark header via `invert` so it reads against the
+ * app background.
+ */
+export function McpLogo({ className }: { className?: string }): JSX.Element {
+  return (
+    <img
+      src={McpLogoPng}
+      alt="Model Context Protocol"
+      aria-hidden="true"
+      className={cn("inline-block size-8 object-contain invert", className)}
+    />
+  );
+}

package/src/lib/sessionUrl.ts

@@ -0,0 +1,44 @@
+const B64URL_RE = /^[A-Za-z0-9_-]+$/;
+
+function bytesToBinary(bytes: Uint8Array): string {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return binary;
+}
+
+function binaryToBytes(binary: string): Uint8Array {
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+export function encodeSessionIdForPath(sessionId: string): string {
+  const bytes = new TextEncoder().encode(sessionId);
+  const base64 = btoa(bytesToBinary(bytes));
+  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+export function decodeSessionIdFromPath(encoded: string): string {
+  if (encoded.startsWith("%")) {
+    return decodeURIComponent(encoded);
+  }
+  if (!B64URL_RE.test(encoded)) {
+    return encoded;
+  }
+  try {
+    const padded = encoded.padEnd(Math.ceil(encoded.length / 4) * 4, "=");
+    const base64 = padded.replace(/-/g, "+").replace(/_/g, "/");
+    const binary = atob(base64);
+    return new TextDecoder().decode(binaryToBytes(binary));
+  } catch {
+    return encoded;
+  }
+}
+
+export function getSessionPath(sessionId: string): string {
+  return `/session/${encodeSessionIdForPath(sessionId)}`;
+}

package/src/routes/session/$sessionId.tsx

@@ -1,71 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { ProxyViewerContainer } from "../../components/ProxyViewerContainer";
-
-/**
- * Base64url-decode a path segment back to the original conversation id.
- * Base64url uses `-` instead of `+`, `_` instead of `/`, and omits padding.
- *
- * Falls back to `decodeURIComponent` for legacy percent-encoded URLs (e.g.
- * plain UUIDs or "default" that survived the Vite dev-server redirect).
- */
-/** Only characters that can appear in a base64url-encoded payload. */
-const B64URL_RE = /^[A-Za-z0-9_-]+$/;
-
-function b64urlDecode(encoded: string): string {
-  // Legacy percent-encoded URLs — may still work for simple ids.
-  if (encoded.startsWith("%")) {
-    return decodeURIComponent(encoded);
-  }
-  // Guard against non-base64url input — atob() doesn't always throw on invalid
-  // input in all browsers and can return binary garbage.
-  if (!B64URL_RE.test(encoded)) {
-    return encoded;
-  }
-  try {
-    const base64 = encoded.replace(/-/g, "+").replace(/_/g, "/");
-    const decoded = atob(base64);
-    // atob() on a random alphanum string can produce binary garbage in
-    // browsers that auto-pad. Check that every character is printable
-    // (tab, newline, carriage return, and space through DEL are fine;
-    // anything else — control chars, high bytes — signals garbage).
-    for (let i = 0; i < decoded.length; i++) {
-      const c = decoded.charCodeAt(i);
-      if (c < 0x09 || c === 0x0b || c === 0x0c || (c > 0x0d && c < 0x20) || c >= 0x7f) {
-        return encoded;
-      }
-    }
-    return decoded;
-  } catch {
-    return encoded;
-  }
-}
-
-/** Base64url-encode a conversation id so the path survives Vite's URL
- *  normalisation (which `decodeURI`s the path and 307-redirects when the
- *  result differs — causing an infinite redirect for chars like `{` `"` `}`).
- */
-function b64urlEncode(raw: string): string {
-  return btoa(raw).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
+import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../lib/sessionUrl";
 
 /**
  * Per-session deep link: opens a page that is pre-scoped to a single
- * session id, sharing the same SSE stream and `useStripConfig` settings
- * as the main `/` view.
- *
- * The session id is base64url-encoded in the URL so JSON session blobs
- * (e.g. Claude Code's
- * `{"device_id":"...","account_uuid":"","session_id":"..."}`) survive
- * the Vite dev-server's URL normalisation without triggering a redirect
- * loop.
+ * session id. The path segment is base64url-encoded so JSON session blobs
+ * and Unicode project paths survive dev-server URL normalization.
  */
 export const Route = createFileRoute("/session/$sessionId")({
   component: SessionViewerRoute,
   parseParams: (params) => ({
-    sessionId: b64urlDecode(params.sessionId),
+    sessionId: decodeSessionIdFromPath(params.sessionId),
   }),
   stringifyParams: (params) => ({
-    sessionId: b64urlEncode(params.sessionId),
+    sessionId: encodeSessionIdForPath(params.sessionId),
   }),
 });