jh-web-gateway 2.2.0 → 2.3.0

package/dist/{tui-GRDJWXQL.js → tui-QXRXB44O.js}

@@ -12,14 +12,14 @@ import {
   startServer,
   updateConfig,
   validateConfig
-} from "./chunk-Y2NMKJOG.js";
+} from "./chunk-E6JMUHPA.js";
 
 // src/tui/index.ts
 import React10 from "react";
 import { render } from "ink";
 
 // src/tui/App.tsx
-import { useState as useState9, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { useState as useState9, useRef as useRef2, useEffect as useEffect6 } from "react";
 import { Box as Box11, useInput as useInput9 } from "ink";
 
 // src/tui/AppContext.tsx
@@ -42,7 +42,9 @@ var initialState = {
   config: defaultConfig,
   serverHandle: null,
   chromeState: null,
-  tokenRefresher: null
+  tokenRefresher: null,
+  requestTracker: null,
+  requestQueue: null
 };
 var AppContext = createContext(null);
 function AppProvider({ children }) {
@@ -81,6 +83,12 @@ function AppProvider({ children }) {
   const setConfig = (config) => {
     setState((prev) => ({ ...prev, config }));
   };
+  const setRequestTracker = (requestTracker) => {
+    setState((prev) => ({ ...prev, requestTracker }));
+  };
+  const setRequestQueue = (requestQueue) => {
+    setState((prev) => ({ ...prev, requestQueue }));
+  };
   const value = {
     state,
     navigate,
@@ -90,7 +98,9 @@ function AppProvider({ children }) {
     setServerHandle,
     setChromeState,
     setTokenRefresher,
-    setConfig
+    setConfig,
+    setRequestTracker,
+    setRequestQueue
   };
   return /* @__PURE__ */ jsx(AppContext.Provider, { value, children });
 }
@@ -137,6 +147,100 @@ function FooterBar({ shortcuts }) {
 // src/tui/components/QuitDialog.tsx
 import { Box as Box3, Text as Text3, useInput } from "ink";
 
+// src/core/request-activity-tracker.ts
+var RequestActivityTracker = class {
+  entries = /* @__PURE__ */ new Map();
+  orderedIds = [];
+  listeners = /* @__PURE__ */ new Set();
+  maxCompleted;
+  constructor(maxCompleted = 50) {
+    this.maxCompleted = maxCompleted;
+  }
+  /** Called by middleware when a request arrives. */
+  start(id, method, path) {
+    if (this.entries.has(id)) return;
+    const entry = {
+      id,
+      method,
+      path,
+      status: "active",
+      statusCode: null,
+      startTime: Date.now(),
+      endTime: null,
+      elapsedMs: null
+    };
+    this.entries.set(id, entry);
+    this.orderedIds.unshift(id);
+    this.notify();
+  }
+  /** Called by middleware when a response is sent. */
+  end(id, statusCode) {
+    const entry = this.entries.get(id);
+    if (!entry) return;
+    const endTime = Date.now();
+    entry.status = statusCode >= 200 && statusCode < 300 ? "completed" : "error";
+    entry.statusCode = statusCode;
+    entry.endTime = endTime;
+    entry.elapsedMs = endTime - entry.startTime;
+    this.prune();
+    this.notify();
+  }
+  /** Subscribe to state changes. Returns unsubscribe function. */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /** Get current snapshot of entries (most-recent-first). */
+  getEntries() {
+    return this.orderedIds.map((id) => this.entries.get(id)).filter(Boolean);
+  }
+  /** Get a single entry by ID. */
+  getEntry(id) {
+    return this.entries.get(id);
+  }
+  /** Clear all entries. */
+  clear() {
+    this.entries.clear();
+    this.orderedIds = [];
+    this.notify();
+  }
+  /** Notify all listeners with current entries snapshot. */
+  notify() {
+    const snapshot = this.getEntries();
+    for (const listener of this.listeners) {
+      try {
+        listener(snapshot);
+      } catch (err) {
+        console.error("[RequestActivityTracker] subscriber error:", err);
+      }
+    }
+  }
+  /** Remove oldest completed entries beyond maxCompleted. */
+  prune() {
+    const completed = this.orderedIds.filter((id) => {
+      const e = this.entries.get(id);
+      return e && e.status !== "active";
+    });
+    while (completed.length > this.maxCompleted) {
+      const oldestId = completed.pop();
+      this.entries.delete(oldestId);
+      const idx = this.orderedIds.indexOf(oldestId);
+      if (idx !== -1) this.orderedIds.splice(idx, 1);
+    }
+  }
+};
+function formatElapsed(ms) {
+  const seconds = Math.round(ms / 100) / 10;
+  return `${seconds.toFixed(1)}s`;
+}
+function formatQueueDepth(n, online) {
+  if (!online) return "Queue: offline";
+  if (n === 0) return "Queue: idle";
+  return `Queue: ${n} pending`;
+}
+
 // src/tui/services/gateway-lifecycle.ts
 async function startGatewayForTui(config, options, callbacks) {
   const maxPages = options.pages ?? 1;
@@ -201,20 +305,24 @@ async function startGatewayForTui(config, options, callbacks) {
       maxWaitMs: config.maxQueueWaitMs
     });
     await pool.init(state.browser, seedPage);
+    const { queue: requestQueue, release } = await pool.acquire();
+    release();
+    const tracker = new RequestActivityTracker();
     const credentialHolder = new CredentialHolder();
     if (config.credentials) {
       credentialHolder.set(config.credentials);
     }
     const serverHandle = await startServer(config, {
       getPool: () => pool,
-      getCredentials: () => credentialHolder.get()
+      getCredentials: () => credentialHolder.get(),
+      requestTracker: tracker
     });
     const tokenRefresher = new TokenRefresher(credentialHolder, config.cdpUrl);
     tokenRefresher.start();
     const baseUrl = `http://127.0.0.1:${config.port}`;
     const apiKey = config.auth.token ?? null;
     callbacks.onSuccess({ baseUrl, apiKey });
-    return { serverHandle, chromeState: state, tokenRefresher };
+    return { serverHandle, chromeState: state, tokenRefresher, tracker, requestQueue };
   } catch (err) {
     const error = err instanceof Error ? err : new Error(String(err));
     callbacks.onError(error);
@@ -222,8 +330,9 @@ async function startGatewayForTui(config, options, callbacks) {
     throw error;
   }
 }
-async function stopGateway(serverHandle, chromeState, tokenRefresher) {
+async function stopGateway(serverHandle, chromeState, tokenRefresher, tracker) {
   tokenRefresher.stop();
+  if (tracker) tracker.clear();
   await serverHandle.close();
   const chromeManager = new ChromeManager();
   await chromeManager.disconnect(chromeState);
@@ -271,15 +380,10 @@ var PANEL_SHORTCUTS = {
     { key: "b", label: "Back" },
     { key: "q", label: "Quit" }
   ],
-  model: [
-    { key: "\u2191\u2193", label: "Navigate" },
-    { key: "Enter", label: "Select" },
-    { key: "b", label: "Back" },
-    { key: "q", label: "Quit" }
-  ],
   chat: [
     { key: "Enter", label: "Send" },
-    { key: "b", label: "Back" },
+    { key: "\u2191\u2193", label: "Model" },
+    { key: "Esc", label: "Back" },
     { key: "q", label: "Quit" }
   ],
   info: [
@@ -433,7 +537,7 @@ function SplashScreen({ onComplete }) {
     /* @__PURE__ */ jsx5(Starfield, { rows: termRows, cols: termCols, tick }),
     /* @__PURE__ */ jsx5(Box4, { width: "100%", justifyContent: "flex-end", paddingRight: 2, children: /* @__PURE__ */ jsxs4(Text4, { dimColor: true, color: "cyan", children: [
       "v",
-      "2.2.0"
+      "2.3.0"
     ] }) }),
     /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", alignItems: "flex-start", paddingLeft: 2, children: [
       JHU_LOGO_LINES.map((line, i) => {
@@ -466,7 +570,6 @@ import { Box as Box5, Text as Text5, useInput as useInput3 } from "ink";
 // src/tui/types.ts
 var MENU_ITEMS = [
   { id: "gateway", label: "Start Gateway", description: "Launch Chrome, authenticate, and start the HTTP server" },
-  { id: "model", label: "Model", description: "Select the active AI model" },
   { id: "chat", label: "Chat", description: "Send a test message to the running gateway" },
   { id: "info", label: "Server Info", description: "View and copy the server URL and API key" },
   { id: "settings", label: "Settings", description: "View and edit gateway configuration" },
@@ -543,7 +646,7 @@ function phaseColor(status) {
   }
 }
 function GatewayPanel() {
-  const { state, navigate, setGatewayStatus, setGatewayError, setServerHandle, setChromeState, setTokenRefresher } = useAppContext();
+  const { state, navigate, setGatewayStatus, setGatewayError, setServerHandle, setChromeState, setTokenRefresher, setRequestTracker, setRequestQueue } = useAppContext();
   const { gatewayStatus, gatewayError, config, serverHandle, chromeState, tokenRefresher } = state;
   const [phases, setPhases] = useState4([]);
   const [starting, setStarting] = useState4(false);
@@ -596,6 +699,8 @@ function GatewayPanel() {
       setServerHandle(result.serverHandle);
       setChromeState(result.chromeState);
       setTokenRefresher(result.tokenRefresher);
+      setRequestTracker(result.tracker);
+      setRequestQueue(result.requestQueue);
       setGatewayStatus("running");
     } catch (err) {
       const message = err instanceof Error ? err.message : String(err);
@@ -604,22 +709,24 @@ function GatewayPanel() {
     } finally {
       setStarting(false);
     }
-  }, [starting, stopping, config, setGatewayStatus, setGatewayError, setServerHandle, setChromeState, setTokenRefresher]);
+  }, [starting, stopping, config, setGatewayStatus, setGatewayError, setServerHandle, setChromeState, setTokenRefresher, setRequestTracker, setRequestQueue]);
   const handleStop = useCallback2(async () => {
     if (stopping || starting || !serverHandle || !chromeState || !tokenRefresher) return;
     setStopping(true);
     try {
-      await stopGateway(serverHandle, chromeState, tokenRefresher);
+      await stopGateway(serverHandle, chromeState, tokenRefresher, state.requestTracker ?? void 0);
       setServerHandle(null);
       setChromeState(null);
       setTokenRefresher(null);
+      setRequestTracker(null);
+      setRequestQueue(null);
       setGatewayStatus("stopped");
       setGatewayError(null);
       setPhases([]);
     } finally {
       setStopping(false);
     }
-  }, [stopping, starting, serverHandle, chromeState, tokenRefresher, setGatewayStatus, setGatewayError, setServerHandle, setChromeState, setTokenRefresher]);
+  }, [stopping, starting, serverHandle, chromeState, tokenRefresher, state.requestTracker, setGatewayStatus, setGatewayError, setServerHandle, setChromeState, setTokenRefresher, setRequestTracker, setRequestQueue]);
   useInput4((_input, key) => {
     if (key.return) {
       if (gatewayStatus === "running") {
@@ -671,69 +778,42 @@ function GatewayPanel() {
   ] });
 }
 
-// src/tui/panels/ModelSelector.tsx
+// src/tui/panels/ChatPanel.tsx
 import { useState as useState5, useEffect as useEffect3 } from "react";
 import { Box as Box7, Text as Text7, useInput as useInput5 } from "ink";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var MODELS = Object.keys(MODEL_ENDPOINT_MAP);
-function ModelSelector({ activeModel, onSelect, onBack }) {
-  const [focusedIndex, setFocusedIndex] = useState5(() => {
+function ChatPanel() {
+  const { state, navigate, setActiveModel } = useAppContext();
+  const { gatewayStatus, config, activeModel } = state;
+  const gatewayRunning = gatewayStatus === "running";
+  const [input, setInput] = useState5("");
+  const [loading, setLoading] = useState5(false);
+  const [lastMessage, setLastMessage] = useState5(null);
+  const [lastUserInput, setLastUserInput] = useState5(null);
+  const [showModelPicker, setShowModelPicker] = useState5(false);
+  const [modelFocusIndex, setModelFocusIndex] = useState5(() => {
     const idx = MODELS.indexOf(activeModel);
     return idx >= 0 ? idx : 0;
   });
   const [confirmationModel, setConfirmationModel] = useState5(null);
+  const [cursorVisible, setCursorVisible] = useState5(true);
+  useEffect3(() => {
+    const id = setInterval(() => setCursorVisible((v) => !v), 530);
+    return () => clearInterval(id);
+  }, []);
   useEffect3(() => {
     if (confirmationModel !== null) {
       const timer = setTimeout(() => setConfirmationModel(null), 1500);
       return () => clearTimeout(timer);
     }
   }, [confirmationModel]);
-  useInput5((input, key) => {
-    if (key.downArrow) {
-      setFocusedIndex((i) => wrapIndex(i, 1, MODELS.length));
-    } else if (key.upArrow) {
-      setFocusedIndex((i) => wrapIndex(i, -1, MODELS.length));
-    } else if (key.return) {
-      const selected = MODELS[focusedIndex];
-      updateConfig({ defaultModel: selected }).catch(() => {
-      });
-      onSelect(selected);
-      setConfirmationModel(selected);
-    } else if (input === "b" || key.escape) {
-      onBack();
+  useEffect3(() => {
+    if (showModelPicker) {
+      const idx = MODELS.indexOf(activeModel);
+      setModelFocusIndex(idx >= 0 ? idx : 0);
     }
-  });
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", padding: 1, children: [
-    /* @__PURE__ */ jsx8(Box7, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text7, { bold: true, children: "Select Model" }) }),
-    /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", children: MODELS.map((model, index) => {
-      const isFocused = index === focusedIndex;
-      const isActive = model === activeModel;
-      return /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsxs7(Text7, { color: isFocused ? "cyan" : void 0, bold: isFocused, children: [
-        isFocused ? "> " : "  ",
-        /* @__PURE__ */ jsx8(Text7, { color: isActive ? "green" : "gray", children: isActive ? "\u25CF" : "\u25CB" }),
-        " ",
-        model
-      ] }) }, model);
-    }) }),
-    confirmationModel !== null && /* @__PURE__ */ jsx8(Box7, { marginTop: 1, children: /* @__PURE__ */ jsxs7(Text7, { color: "green", children: [
-      "\u2713 Selected: ",
-      confirmationModel
-    ] }) })
-  ] });
-}
-
-// src/tui/panels/ChatPanel.tsx
-import { useState as useState6 } from "react";
-import { Box as Box8, Text as Text8, useInput as useInput6 } from "ink";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function ChatPanel() {
-  const { state, navigate } = useAppContext();
-  const { gatewayStatus, config, activeModel } = state;
-  const gatewayRunning = gatewayStatus === "running";
-  const [input, setInput] = useState6("");
-  const [loading, setLoading] = useState6(false);
-  const [lastMessage, setLastMessage] = useState6(null);
-  const [lastUserInput, setLastUserInput] = useState6(null);
+  }, [showModelPicker, activeModel]);
   const handleSubmit = async (value) => {
     if (!gatewayRunning) {
       navigate("gateway");
@@ -791,7 +871,24 @@ function ChatPanel() {
       setLoading(false);
     }
   };
-  useInput6((_input, key) => {
+  useInput5((_input, key) => {
+    if (showModelPicker) {
+      if (key.downArrow) {
+        setModelFocusIndex((i) => wrapIndex(i, 1, MODELS.length));
+      } else if (key.upArrow) {
+        setModelFocusIndex((i) => wrapIndex(i, -1, MODELS.length));
+      } else if (key.return) {
+        const selected = MODELS[modelFocusIndex];
+        updateConfig({ defaultModel: selected }).catch(() => {
+        });
+        setActiveModel(selected);
+        setConfirmationModel(selected);
+        setShowModelPicker(false);
+      } else if (key.escape) {
+        setShowModelPicker(false);
+      }
+      return;
+    }
     if (!gatewayRunning) {
       if (key.return) navigate("gateway");
       else if (_input === "b" || key.escape) navigate("menu");
@@ -801,6 +898,15 @@ function ChatPanel() {
       if (!loading) navigate("menu");
       return;
     }
+    if ((key.upArrow || key.downArrow) && !loading) {
+      setShowModelPicker(true);
+      if (key.upArrow) {
+        setModelFocusIndex((i) => wrapIndex(i, -1, MODELS.length));
+      } else {
+        setModelFocusIndex((i) => wrapIndex(i, 1, MODELS.length));
+      }
+      return;
+    }
     if (key.return) {
       void handleSubmit(input);
       return;
@@ -815,42 +921,63 @@ function ChatPanel() {
     }
   });
   if (!gatewayRunning) {
-    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", padding: 1, children: [
-      /* @__PURE__ */ jsx9(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx9(Text8, { bold: true, children: "Chat" }) }),
-      /* @__PURE__ */ jsx9(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: "Gateway is not running. Press Enter to start it." }) }),
-      /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "[b/Esc] Back" }) })
+    return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", padding: 1, children: [
+      /* @__PURE__ */ jsx8(Box7, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text7, { bold: true, children: "Chat" }) }),
+      /* @__PURE__ */ jsx8(Box7, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text7, { color: "yellow", children: "Gateway is not running. Press Enter to start it." }) }),
+      /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "[b/Esc] Back" }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", padding: 1, children: [
-    /* @__PURE__ */ jsxs8(Box8, { marginBottom: 1, children: [
-      /* @__PURE__ */ jsx9(Text8, { bold: true, children: "Chat" }),
-      /* @__PURE__ */ jsxs8(Text8, { dimColor: true, children: [
-        "  Model: ",
-        activeModel
-      ] })
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsxs7(Box7, { marginBottom: 1, children: [
+      /* @__PURE__ */ jsx8(Text7, { bold: true, children: "Chat" }),
+      /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "  Model: " }),
+      /* @__PURE__ */ jsx8(Text7, { color: "green", children: activeModel }),
+      confirmationModel !== null && /* @__PURE__ */ jsx8(Text7, { color: "green", children: "  \u2713 Switched!" }),
+      !showModelPicker && /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "  [\u2191\u2193] change" })
     ] }),
-    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginBottom: 1, minHeight: 6, children: [
-      lastUserInput && /* @__PURE__ */ jsx9(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsxs8(Text8, { color: "cyan", children: [
+    showModelPicker && /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, children: [
+      /* @__PURE__ */ jsxs7(Box7, { marginBottom: 1, children: [
+        /* @__PURE__ */ jsx8(Text7, { bold: true, color: "cyan", children: "Select Model" }),
+        /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "  [\u2191\u2193] Navigate  [Enter] Select  [Esc] Cancel" })
+      ] }),
+      MODELS.map((model, index) => {
+        const isFocused = index === modelFocusIndex;
+        const isActive = model === activeModel;
+        return /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsxs7(Text7, { color: isFocused ? "cyan" : void 0, bold: isFocused, children: [
+          isFocused ? "> " : "  ",
+          /* @__PURE__ */ jsx8(Text7, { color: isActive ? "green" : "gray", children: isActive ? "\u25CF" : "\u25CB" }),
+          " ",
+          model
+        ] }) }, model);
+      })
+    ] }),
+    !showModelPicker && /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginBottom: 1, minHeight: 6, children: [
+      lastUserInput && /* @__PURE__ */ jsx8(Box7, { marginBottom: 1, children: /* @__PURE__ */ jsxs7(Text7, { color: "cyan", children: [
         "You: ",
         lastUserInput
       ] }) }),
-      loading && /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: "Thinking\u2026" }) }),
-      !loading && lastMessage?.role === "assistant" && /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsxs8(Text8, { color: "green", children: [
+      loading && /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsx8(Text7, { color: "yellow", children: "Thinking\u2026" }) }),
+      !loading && lastMessage?.role === "assistant" && /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsxs7(Text7, { color: "green", children: [
         "Assistant: ",
         lastMessage.content
       ] }) }),
-      !loading && lastMessage?.role === "error" && /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsx9(Text8, { color: "red", children: lastMessage.content }) })
+      !loading && lastMessage?.role === "error" && /* @__PURE__ */ jsx8(Box7, { children: /* @__PURE__ */ jsx8(Text7, { color: "red", children: lastMessage.content }) })
     ] }),
-    /* @__PURE__ */ jsx9(Box8, { borderStyle: "round", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsxs8(Text8, { children: [
-      input.length > 0 ? input : /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "Type a message and press Enter\u2026" }),
-      /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: "\u2588" })
-    ] }) }),
-    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "[Enter] Send  [b/Esc] Back" }) })
+    !showModelPicker && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx8(Box7, { borderStyle: "round", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsx8(Text7, { children: input.length > 0 ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        input,
+        /* @__PURE__ */ jsx8(Text7, { color: "cyan", children: cursorVisible ? "\u2588" : " " })
+      ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(Text7, { color: "cyan", children: cursorVisible ? "\u2588" : " " }),
+        /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "Type a message and press Enter\u2026" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx8(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "[Enter] Send  [\u2191\u2193] Model  [Esc] Back" }) })
+    ] })
   ] });
 }
 
 // src/tui/panels/InfoPanel.tsx
-import { useState as useState7, useEffect as useEffect4 } from "react";
+import { useState as useState7, useEffect as useEffect5 } from "react";
 import { Box as Box9, Text as Text9, useInput as useInput7 } from "ink";
 
 // src/tui/utils/clipboard.ts
@@ -893,6 +1020,93 @@ async function copyToClipboard(text) {
   });
 }
 
+// src/tui/components/RequestTracker.tsx
+import { useState as useState6, useEffect as useEffect4 } from "react";
+import { Box as Box8, Text as Text8, useInput as useInput6 } from "ink";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function getSpinnerFrame() {
+  return SPINNER_FRAMES[Math.floor(Date.now() / 100) % SPINNER_FRAMES.length];
+}
+function RequestEntryRow({ entry, tick: _tick }) {
+  const elapsed = entry.status === "active" ? formatElapsed(Date.now() - entry.startTime) : entry.elapsedMs !== null ? formatElapsed(entry.elapsedMs) : "";
+  if (entry.status === "active") {
+    return /* @__PURE__ */ jsxs8(Text8, { children: [
+      /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: getSpinnerFrame() }),
+      " ",
+      /* @__PURE__ */ jsx9(Text8, { children: entry.method }),
+      " ",
+      /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: entry.path }),
+      "  ",
+      /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: elapsed })
+    ] });
+  }
+  const codeColor = entry.statusCode !== null && entry.statusCode >= 200 && entry.statusCode < 300 ? "green" : "red";
+  return /* @__PURE__ */ jsxs8(Text8, { children: [
+    /* @__PURE__ */ jsx9(Text8, { color: codeColor, children: entry.statusCode ?? "???" }),
+    " ",
+    /* @__PURE__ */ jsx9(Text8, { children: entry.method }),
+    " ",
+    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: entry.path }),
+    "  ",
+    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: elapsed })
+  ] });
+}
+var VISIBLE_ROWS = 8;
+function RequestTracker() {
+  const { state } = useAppContext();
+  const { requestTracker: tracker, requestQueue: queue, gatewayStatus } = state;
+  const online = gatewayStatus === "running";
+  const [entries, setEntries] = useState6([]);
+  useEffect4(() => {
+    if (!tracker) {
+      setEntries([]);
+      return;
+    }
+    setEntries(tracker.getEntries());
+    const unsub = tracker.subscribe((snapshot) => setEntries(snapshot));
+    return unsub;
+  }, [tracker]);
+  const [tick, setTick] = useState6(0);
+  const hasActive = entries.some((e) => e.status === "active");
+  useEffect4(() => {
+    if (!hasActive) return;
+    const id = setInterval(() => setTick((t) => t + 1), 200);
+    return () => clearInterval(id);
+  }, [hasActive]);
+  const [scrollOffset, setScrollOffset] = useState6(0);
+  const maxOffset = Math.max(0, entries.length - VISIBLE_ROWS);
+  useEffect4(() => {
+    setScrollOffset((prev) => Math.min(prev, maxOffset));
+  }, [maxOffset]);
+  useInput6((_input, key) => {
+    if (_input === "j" || key.downArrow) {
+      setScrollOffset((prev) => Math.min(prev + 1, maxOffset));
+    }
+    if (_input === "k" || key.upArrow) {
+      setScrollOffset((prev) => Math.max(prev - 1, 0));
+    }
+  });
+  const visibleEntries = entries.slice(scrollOffset, scrollOffset + VISIBLE_ROWS);
+  const queueDepth = formatQueueDepth(queue?.pending ?? 0, online);
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx9(Text8, { bold: true, children: "Server Activity" }),
+    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: queueDepth }),
+    !online && /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "red", children: "Gateway offline" }) }),
+    online && entries.length === 0 && /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "No recent activity" }) }),
+    entries.length > 0 && /* @__PURE__ */ jsx9(Box8, { height: VISIBLE_ROWS, overflowY: "hidden", flexDirection: "column", marginTop: 1, children: visibleEntries.map((entry) => /* @__PURE__ */ jsx9(RequestEntryRow, { entry, tick }, entry.id)) }),
+    entries.length > VISIBLE_ROWS && /* @__PURE__ */ jsxs8(Text8, { dimColor: true, children: [
+      "\u2191\u2193/jk to scroll (",
+      scrollOffset + 1,
+      "\u2013",
+      Math.min(scrollOffset + VISIBLE_ROWS, entries.length),
+      " of ",
+      entries.length,
+      ")"
+    ] })
+  ] });
+}
+
 // src/tui/panels/InfoPanel.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function InfoPanel() {
@@ -904,7 +1118,7 @@ function InfoPanel() {
   const baseUrl = `http://127.0.0.1:${port}`;
   const [flash, setFlash] = useState7(null);
   const [clipboardFailed, setClipboardFailed] = useState7({});
-  useEffect4(() => {
+  useEffect5(() => {
     if (flash !== null) {
       const timer = setTimeout(() => setFlash(null), 1500);
       return () => clearTimeout(timer);
@@ -962,6 +1176,7 @@ function InfoPanel() {
       clipboardFailed.key && apiKey && /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Box9, { borderStyle: "single", borderColor: "yellow", paddingX: 1, children: /* @__PURE__ */ jsx10(Text9, { color: "yellow", children: apiKey }) }) })
     ] }),
     flash && /* @__PURE__ */ jsx10(Box9, { marginBottom: 1, children: /* @__PURE__ */ jsx10(Text9, { color: flash.startsWith("Copied") ? "green" : "yellow", children: flash }) }),
+    /* @__PURE__ */ jsx10(Box9, { marginBottom: 1, children: /* @__PURE__ */ jsx10(RequestTracker, {}) }),
     /* @__PURE__ */ jsx10(Box9, { children: /* @__PURE__ */ jsxs9(Text9, { dimColor: true, children: [
       "[c] Copy URL  ",
       apiKey ? "[k] Copy Key  " : "",
@@ -1145,14 +1360,14 @@ function SettingsPanel() {
 // src/tui/App.tsx
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function AppContent({ onRegisterShutdown }) {
-  const { state, navigate, setActiveModel } = useAppContext();
-  const { currentPanel, gatewayStatus, activeModel } = state;
+  const { state, navigate } = useAppContext();
+  const { currentPanel, gatewayStatus } = state;
   const [showQuit, setShowQuit] = useState9(false);
   const latestStateRef = useRef2(state);
-  useEffect5(() => {
+  useEffect6(() => {
     latestStateRef.current = state;
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (onRegisterShutdown) {
       onRegisterShutdown(async () => {
         const { gatewayStatus: status, serverHandle, chromeState, tokenRefresher } = latestStateRef.current;
@@ -1178,15 +1393,6 @@ function AppContent({ onRegisterShutdown }) {
         return /* @__PURE__ */ jsx12(MainMenu, { onQuit: () => setShowQuit(true) });
       case "gateway":
         return /* @__PURE__ */ jsx12(GatewayPanel, {});
-      case "model":
-        return /* @__PURE__ */ jsx12(
-          ModelSelector,
-          {
-            activeModel,
-            onSelect: (model) => setActiveModel(model),
-            onBack: () => navigate("menu")
-          }
-        );
       case "chat":
         return /* @__PURE__ */ jsx12(ChatPanel, {});
       case "info":
@@ -1264,4 +1470,4 @@ async function launchTui() {
 export {
   launchTui
 };
-//# sourceMappingURL=tui-GRDJWXQL.js.map
+//# sourceMappingURL=tui-QXRXB44O.js.map