@tonyclaw/agent-inspector 3.0.34 → 3.0.36

package/.output/server/index.mjs

@@ -20,149 +20,149 @@ const assets = {
   "/assets/agent-inspector-58K1_MsC.ico": {
     "type": "image/vnd.microsoft.icon",
     "etag": '"38fa-ZD8kPABHYjPIkcH82FMY6iZM7fI"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 14586,
     "path": "../public/assets/agent-inspector-58K1_MsC.ico"
   },
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/index-CeoArIMR.js": {
+  "/assets/index-D4Atppe6.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"265-iG+bHZT7/ULlrZW/1ZSYAtcjIsI"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 613,
-    "path": "../public/assets/index-CeoArIMR.js"
-  },
-  "/assets/CompareDrawer-hkDPH0fn.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"502d-j82GwBVhdwVcb9z/MxlsIrTZXSE"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 20525,
-    "path": "../public/assets/CompareDrawer-hkDPH0fn.js"
+    "etag": '"9f-D+eRvMqRLb5QR3vMAz0DZLw+A50"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 159,
+    "path": "../public/assets/index-D4Atppe6.js"
   },
-  "/assets/index-DD2OkbP7.js": {
+  "/assets/index-CmGZ17BL.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1cd2d-0g3VnsCjtKogp0g96cN3B82HjjQ"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "etag": '"1cd2d-0pcUF6d6HAJaUrV9kHVsiVQREjs"',
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 118061,
-    "path": "../public/assets/index-DD2OkbP7.js"
+    "path": "../public/assets/index-CmGZ17BL.js"
   },
-  "/assets/index-4H-j0aS5.js": {
+  "/assets/index-CjODQxYY.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"9f-EPsXMJ/jAAP83THn1v79SiDRJ1A"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 159,
-    "path": "../public/assets/index-4H-j0aS5.js"
+    "etag": '"265-KTSIOcuxU5V5YzdEzDoIWAhykFw"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 613,
+    "path": "../public/assets/index-CjODQxYY.js"
   },
-  "/assets/index-D17dU-mX.css": {
+  "/assets/index-BQqVblQv.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"2a4f0-2SuF12/r8Z0Yq4rQKaI4iHNWq5k"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 173296,
-    "path": "../public/assets/index-D17dU-mX.css"
+    "etag": '"2b0c7-DAZZG+g1Z71NTob4Ki58V+cY8IE"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 176327,
+    "path": "../public/assets/index-BQqVblQv.css"
   },
-  "/assets/json-viewer-hDs5IHIL.js": {
+  "/assets/jszip.min-C-avw0w1.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1ae2-PQEdFz2fZwriCG7cEf/qSrG7oKo"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 6882,
-    "path": "../public/assets/json-viewer-hDs5IHIL.js"
-  },
-  "/assets/index-sBAb_qFx.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"5c73b-/pjDaGh7AA9FeJ/lju/zUAOG2So"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 378683,
-    "path": "../public/assets/index-sBAb_qFx.js"
+    "etag": '"17b79-B5ORObElRCcrSZqbp9zKZAKRDFw"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 97145,
+    "path": "../public/assets/jszip.min-C-avw0w1.js"
   },
-  "/assets/jszip.min-DVJw8OAI.js": {
+  "/assets/json-viewer-CuYTDXFj.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"17b79-37rRTNBb0GVJjXONKNi2Kobg1W0"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 97145,
-    "path": "../public/assets/jszip.min-DVJw8OAI.js"
+    "etag": '"1ae2-NlF0Mop+pYLwG1w3RhlEIHd3f6M"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 6882,
+    "path": "../public/assets/json-viewer-CuYTDXFj.js"
   },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
+  "/assets/CompareDrawer-BF8Yk4Nq.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"502d-+CRLcQPk56apbzopyjIK7OeC+64"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 20525,
+    "path": "../public/assets/CompareDrawer-BF8Yk4Nq.js"
+  },
   "/assets/qwen-mMn3f5ul.webp": {
     "type": "image/webp",
     "etag": '"1b1a-Tw+b2ynhJQl9WztaK3ajSL85yaU"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 6938,
     "path": "../public/assets/qwen-mMn3f5ul.webp"
   },
-  "/assets/RequestAnatomy-CLWPhe7O.js": {
+  "/assets/index-D444FJGM.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"43f3-Wg1lZmNyHt1EedGWEheYo/AcQ4k"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 17395,
-    "path": "../public/assets/RequestAnatomy-CLWPhe7O.js"
+    "etag": '"5c73b-zkVN5YAn6bcio0NCH5Zu7oxkCwg"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 378683,
+    "path": "../public/assets/index-D444FJGM.js"
   },
-  "/assets/ReplayDialog-DYQdKnLy.js": {
+  "/assets/ReplayDialog-NRgCp09o.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"3294-90kP+CETr8WHL5RmUsvcJ/FHlTY"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "etag": '"3294-kzcFg9LNlXsgRjIa5iHlaZbAVlI"',
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 12948,
-    "path": "../public/assets/ReplayDialog-DYQdKnLy.js"
+    "path": "../public/assets/ReplayDialog-NRgCp09o.js"
+  },
+  "/assets/RequestAnatomy-BPiUptQ-.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"43f3-cO/hDMy+ALC5MMo6P1yyZj88Ipk"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 17395,
+    "path": "../public/assets/RequestAnatomy-BPiUptQ-.js"
+  },
+  "/assets/ResponseView-C6oCKVyP.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"44d3-YmDPkb3gUJiajQ+jbXmXrfn1C5M"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 17619,
+    "path": "../public/assets/ResponseView-C6oCKVyP.js"
   },
-  "/assets/StreamingChunkSequence-pUlWbVcB.js": {
+  "/assets/StreamingChunkSequence-B90BNPvD.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"e96-/dVcId1nGykIm1ReQ62rXUT6AN8"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "etag": '"e96-eBbmQGKi+oHgss6vvW/qKLZgrNU"',
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 3734,
-    "path": "../public/assets/StreamingChunkSequence-pUlWbVcB.js"
+    "path": "../public/assets/StreamingChunkSequence-B90BNPvD.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/ResponseView-CmKzB3ef.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"44d3-05qR9H/eXW9ZtOHJhxHUM+wxZ/M"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 17619,
-    "path": "../public/assets/ResponseView-CmKzB3ef.js"
-  },
-  "/assets/_sessionId-CUxLgyb5.js": {
+  "/assets/_sessionId-B7pqqX6S.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"36d-rCOhsxI24nRIkr1biRxEHtsdWk8"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "etag": '"36d-q6h6VsxlCrCcH/FaDU8jpTNnCIM"',
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 877,
-    "path": "../public/assets/_sessionId-CUxLgyb5.js"
+    "path": "../public/assets/_sessionId-B7pqqX6S.js"
   },
-  "/assets/_sessionId-DHvUgaat.js": {
+  "/assets/_sessionId-c3quqe4s.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"a2-IuBoZZoRJ53UCnSpx4C89INhIUw"',
-    "mtime": "2026-07-14T01:21:45.705Z",
+    "etag": '"a2-6qWx+FNRDTotJD3uVbxVOqGMdyg"',
+    "mtime": "2026-07-14T02:44:56.239Z",
     "size": 162,
-    "path": "../public/assets/_sessionId-DHvUgaat.js"
+    "path": "../public/assets/_sessionId-c3quqe4s.js"
   },
-  "/assets/InspectorPet-CA5p_sKZ.js": {
+  "/assets/InspectorPet-D01knLHJ.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"818f0-VpiGl1j1C0JNPkZZVlocyChM5to"',
-    "mtime": "2026-07-14T01:21:45.707Z",
+    "etag": '"818f0-r8VAyeNE92Czne01v4lzux0Md0c"',
+    "mtime": "2026-07-14T02:44:56.241Z",
     "size": 530672,
-    "path": "../public/assets/InspectorPet-CA5p_sKZ.js"
+    "path": "../public/assets/InspectorPet-D01knLHJ.js"
   },
-  "/assets/ProxyViewerContainer-BI8mJZEm.js": {
+  "/assets/ProxyViewerContainer-CArcMNg_.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"a4a42-eRjbKsgCYjq+wFcD2WQJDe9ckRE"',
-    "mtime": "2026-07-14T01:21:45.705Z",
-    "size": 674370,
-    "path": "../public/assets/ProxyViewerContainer-BI8mJZEm.js"
+    "etag": '"a5c85-A2Kc+m5Wq4OyxE9cc0eSnJ4E0q4"',
+    "mtime": "2026-07-14T02:44:56.239Z",
+    "size": 679045,
+    "path": "../public/assets/ProxyViewerContainer-CArcMNg_.js"
   }
 };
 function readAsset(id) {

package/package.json

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

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,7 @@
 import {
   type ChangeEvent,
   type JSX,
+  type KeyboardEvent,
   type ReactNode,
   useCallback,
   useEffect,
@@ -115,6 +116,228 @@ function truncateSessionId(id: string): string {
   return `${id.slice(0, 12)}...${id.slice(-12)}`;
 }
 
+type SessionSearchSuggestion = {
+  id: string;
+  label: string;
+  detail: string;
+  kind: "session" | "model" | "all";
+  value: string;
+};
+
+function normalizeSearchQuery(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+function includesSearchText(value: string | null | undefined, query: string): boolean {
+  return value !== null && value !== undefined && value.toLowerCase().includes(query);
+}
+
+function buildSessionSuggestionDetail(sessionId: string, logs: readonly CapturedLog[]): string {
+  const scopedLogs = logs.filter((log) => log.sessionId === sessionId);
+  if (scopedLogs.length === 0) return "Stored session";
+  const models = new Set<string>();
+  const providers = new Set<string>();
+  for (const log of scopedLogs) {
+    if (log.model !== null && log.model !== "") models.add(log.model);
+    if (
+      log.providerName !== null &&
+      log.providerName !== undefined &&
+      log.providerName.trim() !== ""
+    ) {
+      providers.add(log.providerName);
+    }
+  }
+  const modelLabel = models.size === 0 ? "unknown model" : [...models].slice(0, 2).join(", ");
+  const providerLabel =
+    providers.size === 0 ? "unknown provider" : [...providers].slice(0, 2).join(", ");
+  return `${String(scopedLogs.length)} req · ${providerLabel} · ${modelLabel}`;
+}
+
+function sessionMatchesSearchQuery(
+  sessionId: string,
+  logs: readonly CapturedLog[],
+  query: string,
+): boolean {
+  if (includesSearchText(sessionId, query)) return true;
+  return logs.some(
+    (log) =>
+      log.sessionId === sessionId &&
+      (includesSearchText(log.model, query) ||
+        includesSearchText(log.providerName, query) ||
+        includesSearchText(log.path, query)),
+  );
+}
+
+function buildSessionSearchSuggestions({
+  query,
+  sessions,
+  models,
+  logs,
+}: {
+  query: string;
+  sessions: readonly string[];
+  models: readonly string[];
+  logs: readonly CapturedLog[];
+}): SessionSearchSuggestion[] {
+  const normalizedQuery = normalizeSearchQuery(query);
+  const suggestions: SessionSearchSuggestion[] = [];
+
+  if (normalizedQuery === "") {
+    suggestions.push({
+      id: "all",
+      label: "All sessions",
+      detail: `${String(logs.length)} visible requests`,
+      kind: "all",
+      value: "__all__",
+    });
+    for (const session of sessions.slice(0, 5)) {
+      suggestions.push({
+        id: `session-${session}`,
+        label: truncateSessionId(session),
+        detail: buildSessionSuggestionDetail(session, logs),
+        kind: "session",
+        value: session,
+      });
+    }
+    return suggestions;
+  }
+
+  const matchingSessions = sessions.filter((session) =>
+    sessionMatchesSearchQuery(session, logs, normalizedQuery),
+  );
+  for (const session of matchingSessions.slice(0, 5)) {
+    suggestions.push({
+      id: `session-${session}`,
+      label: truncateSessionId(session),
+      detail: buildSessionSuggestionDetail(session, logs),
+      kind: "session",
+      value: session,
+    });
+  }
+
+  const matchingModels = models.filter((model) => includesSearchText(model, normalizedQuery));
+  for (const model of matchingModels.slice(0, 3)) {
+    suggestions.push({
+      id: `model-${model}`,
+      label: model,
+      detail: "Model filter",
+      kind: "model",
+      value: model,
+    });
+  }
+
+  return suggestions.slice(0, 7);
+}
+
+function buildAssistantQuestionFromSearch(query: string, selectedSession: string): string {
+  const trimmed = query.trim();
+  const scope =
+    selectedSession === "__all__" ? "all visible Inspector sessions" : `session ${selectedSession}`;
+  if (trimmed === "") {
+    return `Analyze ${scope}. What failed, slowed down, or deserves attention?`;
+  }
+  return `Search ${scope} for "${trimmed}" and explain the relevant failures, latency, token usage, provider behavior, and evidence.`;
+}
+
+function SessionSearchBox({
+  query,
+  suggestions,
+  selectedSession,
+  selectedModel,
+  onQueryChange,
+  onApplySuggestion,
+  onClear,
+  onAskAssistant,
+}: {
+  query: string;
+  suggestions: readonly SessionSearchSuggestion[];
+  selectedSession: string;
+  selectedModel: string;
+  onQueryChange: (value: string) => void;
+  onApplySuggestion: (suggestion: SessionSearchSuggestion) => void;
+  onClear: () => void;
+  onAskAssistant: () => void;
+}): JSX.Element {
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key !== "Enter") return;
+    const firstSuggestion = suggestions[0];
+    if (firstSuggestion === undefined) return;
+    event.preventDefault();
+    onApplySuggestion(firstSuggestion);
+  };
+
+  return (
+    <div className="rounded-xl bg-black/20 p-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
+      <div className="relative">
+        <Search className="pointer-events-none absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-cyan-100/70" />
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => onQueryChange(event.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Search sessions, models, providers..."
+          className="h-10 w-full rounded-full bg-black/30 px-9 pr-9 text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(103,232,249,0.13)] transition-colors placeholder:text-muted-foreground hover:bg-black/35 focus-visible:ring-1 focus-visible:ring-cyan-200/70"
+          aria-label="Search sessions and models"
+        />
+        {(query !== "" || selectedSession !== "__all__" || selectedModel !== "__all__") && (
+          <button
+            type="button"
+            onClick={onClear}
+            className="absolute right-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+            aria-label="Clear session search"
+            title="Clear search"
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      <div className="mt-2 flex flex-wrap gap-1.5">
+        <button
+          type="button"
+          onClick={onAskAssistant}
+          className="inline-flex h-7 items-center rounded-full bg-cyan-400/10 px-2.5 text-[11px] font-medium text-cyan-100 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.14)] transition-colors hover:bg-cyan-400/16"
+        >
+          Ask Assistant
+        </button>
+        {selectedSession !== "__all__" && (
+          <span className="inline-flex h-7 max-w-full items-center rounded-full bg-white/[0.045] px-2.5 font-mono text-[10px] text-muted-foreground">
+            session:{truncateSessionId(selectedSession)}
+          </span>
+        )}
+        {selectedModel !== "__all__" && (
+          <span className="inline-flex h-7 max-w-full items-center rounded-full bg-white/[0.045] px-2.5 text-[10px] text-muted-foreground">
+            model:{selectedModel}
+          </span>
+        )}
+      </div>
+
+      <div className="mt-2 space-y-1">
+        {suggestions.map((suggestion) => (
+          <button
+            key={suggestion.id}
+            type="button"
+            onClick={() => onApplySuggestion(suggestion)}
+            className="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-white/[0.045] focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+          >
+            <span className="min-w-0">
+              <span className="block truncate text-[11px] font-medium text-foreground">
+                {suggestion.label}
+              </span>
+              <span className="block truncate text-[10px] text-muted-foreground">
+                {suggestion.detail}
+              </span>
+            </span>
+            <span className="rounded-full bg-white/[0.045] px-2 py-0.5 text-[9px] uppercase tracking-[0.12em] text-muted-foreground">
+              {suggestion.kind}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function buildDisplayNumberByLogId(groups: readonly ConversationGroupData[]): Map<number, number> {
   const result = new Map<number, number>();
   for (const group of groups) {
@@ -1333,6 +1556,10 @@ export function ProxyViewer({
   const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = useState(false);
   const [petVisible, setPetVisible] = useState(true);
   const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = useState(false);
+  const [sessionSearchQuery, setSessionSearchQuery] = useState("");
+  const [assistantSuggestedQuestion, setAssistantSuggestedQuestion] = useState<string | undefined>(
+    undefined,
+  );
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const logListRef = useRef<HTMLDivElement>(null);
   const logListWrapperRef = useRef<HTMLDivElement>(null);
@@ -1572,11 +1799,16 @@ export function ProxyViewer({
       ? "Deletes every stored log, streaming chunk, and session archive entry across all sessions."
       : "Deletes every stored log, streaming chunk, and session archive entry for this session, including history that is not currently loaded.";
   const reloadSessionLabel = logs.length === 0 ? "Load" : "Reload";
-  const sessionInputValue = selectedSession === "__all__" ? "" : selectedSession;
-  const sessionSelectValue =
-    selectedSession === "__all__" || sessions.includes(selectedSession)
-      ? selectedSession
-      : "__typed__";
+  const sessionSearchSuggestions = useMemo(
+    () =>
+      buildSessionSearchSuggestions({
+        query: sessionSearchQuery,
+        sessions,
+        models,
+        logs,
+      }),
+    [logs, models, sessionSearchQuery, sessions],
+  );
   const activeScopeLabel =
     hasSessionContext && sessionContextScope !== null
       ? truncateSessionId(sessionContextScope.label)
@@ -1603,20 +1835,36 @@ export function ProxyViewer({
     },
     [comparisonPredecessors],
   );
-  const handleSessionInputChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = event.currentTarget.value.trim();
-      onSessionChange(value === "" ? "__all__" : value);
-    },
-    [onSessionChange],
-  );
-  const handleSessionSelectChange = useCallback(
-    (value: string) => {
-      if (value === "__typed__") return;
-      onSessionChange(value);
+  const handleApplySessionSearchSuggestion = useCallback(
+    (suggestion: SessionSearchSuggestion) => {
+      switch (suggestion.kind) {
+        case "all":
+          onSessionChange("__all__");
+          onModelChange("__all__");
+          setSessionSearchQuery("");
+          break;
+        case "session":
+          onSessionChange(suggestion.value);
+          setSessionSearchQuery(suggestion.value);
+          break;
+        case "model":
+          onModelChange(suggestion.value);
+          setSessionSearchQuery(suggestion.value);
+          break;
+      }
     },
-    [onSessionChange],
+    [onModelChange, onSessionChange],
   );
+  const handleClearSessionSearch = useCallback(() => {
+    setSessionSearchQuery("");
+    onSessionChange("__all__");
+    onModelChange("__all__");
+  }, [onModelChange, onSessionChange]);
+  const handleAskAssistantFromSearch = useCallback(() => {
+    setAssistantSuggestedQuestion(
+      buildAssistantQuestionFromSearch(sessionSearchQuery, selectedSession),
+    );
+  }, [selectedSession, sessionSearchQuery]);
   const labSessionId =
     pinnedSessionId !== undefined
       ? pinnedSessionId
@@ -1715,7 +1963,11 @@ export function ProxyViewer({
                 </div>
               </SidebarPanel>
 
-              <PiAgentPanel currentSessionId={labSessionId} logCount={logs.length} />
+              <PiAgentPanel
+                currentSessionId={labSessionId}
+                logCount={logs.length}
+                suggestedQuestion={assistantSuggestedQuestion}
+              />
 
               {hasSessionContext && sessionContextScope !== null && (
                 <SessionContextBar
@@ -1736,72 +1988,22 @@ export function ProxyViewer({
                 )}
 
               <SidebarPanel label="Filters">
-                <div className="space-y-2">
-                  {!hideSessionFilter && (
-                    <>
-                      <div className="relative">
-                        <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-                        <input
-                          type="search"
-                          value={sessionInputValue}
-                          onChange={handleSessionInputChange}
-                          placeholder="Paste session ID"
-                          className="bg-black/25 hover:bg-white/[0.045] focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:font-sans placeholder:text-muted-foreground focus-visible:ring-1"
-                          aria-label="Filter by session ID"
-                          title="Filter by exact session ID"
-                        />
-                        {sessionInputValue !== "" && (
-                          <button
-                            type="button"
-                            onClick={() => onSessionChange("__all__")}
-                            className="absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-                            aria-label="Clear session filter"
-                            title="Clear session filter"
-                          >
-                            <X className="size-3.5" />
-                          </button>
-                        )}
-                      </div>
-                      <Select value={sessionSelectValue} onValueChange={handleSessionSelectChange}>
-                        <SelectTrigger
-                          aria-label="Select a session"
-                          className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
-                        >
-                          <SelectValue placeholder="All sessions" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="__all__">All sessions</SelectItem>
-                          {sessionSelectValue === "__typed__" && (
-                            <SelectItem value="__typed__">
-                              Typed: {truncateSessionId(selectedSession)}
-                            </SelectItem>
-                          )}
-                          {sessions.map((s) => (
-                            <SelectItem key={s} value={s}>
-                              {truncateSessionId(s)}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </>
-                  )}
-                  <Select value={selectedModel} onValueChange={onModelChange}>
-                    <SelectTrigger
-                      aria-label="Select a model"
-                      className="bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
-                    >
-                      <SelectValue placeholder="All models" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="__all__">All models</SelectItem>
-                      {models.map((m) => (
-                        <SelectItem key={m} value={m}>
-                          {m}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
+                {hideSessionFilter ? (
+                  <p className="text-[11px] leading-5 text-muted-foreground">
+                    This session is pinned by the current URL.
+                  </p>
+                ) : (
+                  <SessionSearchBox
+                    query={sessionSearchQuery}
+                    suggestions={sessionSearchSuggestions}
+                    selectedSession={selectedSession}
+                    selectedModel={selectedModel}
+                    onQueryChange={setSessionSearchQuery}
+                    onApplySuggestion={handleApplySessionSearchSuggestion}
+                    onClear={handleClearSessionSearch}
+                    onAskAssistant={handleAskAssistantFromSearch}
+                  />
+                )}
               </SidebarPanel>
             </div>
           </aside>