@sean.holung/minicode 0.3.5 → 0.3.6

package/dist/src/web/app.js

@@ -1523,10 +1523,135 @@ function resolveGraphNodeIds(nodes, symbolName) {
   return [...nodes.entries()].filter(([id, node]) => matchesGraphNodeQuery(query, node, id)).map(([id]) => id).sort((a, b2) => compareGraphNodeIds(a, b2, nodes));
 }
 
+// src/shared/graph-search.ts
+function getGraphNodeFilePath(node) {
+  return node.filePath || node.file || "";
+}
+function buildGraphFileIndex(nodes) {
+  const files = /* @__PURE__ */ new Map();
+  for (const [id, node] of nodes) {
+    const filePath = getGraphNodeFilePath(node);
+    if (!filePath) continue;
+    const existing = files.get(filePath);
+    if (existing) {
+      existing.push(id);
+    } else {
+      files.set(filePath, [id]);
+    }
+  }
+  for (const symbolIds of files.values()) {
+    symbolIds.sort((a, b2) => compareGraphNodeIds(a, b2, nodes));
+  }
+  return files;
+}
+function compareGraphFilePaths(a, b2, fileIndex) {
+  const countDifference = (fileIndex.get(b2)?.length ?? 0) - (fileIndex.get(a)?.length ?? 0);
+  if (countDifference !== 0) {
+    return countDifference;
+  }
+  return a.localeCompare(b2, void 0, { sensitivity: "base" });
+}
+function matchesGraphFileQuery(query, filePath) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return false;
+  }
+  return filePath.toLowerCase().includes(normalizedQuery);
+}
+function buildGraphSearchResults({
+  query,
+  symbolIds,
+  nodes,
+  fileIndex,
+  symbolLimit = 12,
+  fileLimit = 8
+}) {
+  const normalizedQuery = query.trim().toLowerCase();
+  const showDefaultResults = normalizedQuery.length < 2;
+  const rankedFiles = [...fileIndex.keys()].sort((a, b2) => compareGraphFilePaths(a, b2, fileIndex));
+  const symbolResults = symbolIds.filter((id) => {
+    if (showDefaultResults) {
+      return true;
+    }
+    return matchesGraphNodeQuery(normalizedQuery, nodes.get(id) || {}, id);
+  }).slice(0, symbolLimit).map((id) => {
+    const node = nodes.get(id) || {};
+    return {
+      type: "symbol",
+      id,
+      label: getGraphNodeLabel(node, id),
+      subtitle: getGraphNodeFilePath(node),
+      kind: (node.kind || "symbol").toLowerCase()
+    };
+  });
+  const fileResults = rankedFiles.filter((filePath) => {
+    if (showDefaultResults) {
+      return true;
+    }
+    return matchesGraphFileQuery(normalizedQuery, filePath);
+  }).slice(0, fileLimit).map((filePath) => {
+    const symbolCount = fileIndex.get(filePath)?.length ?? 0;
+    return {
+      type: "file",
+      id: filePath,
+      label: filePath,
+      subtitle: `${symbolCount} symbol${symbolCount === 1 ? "" : "s"}`,
+      kind: "file",
+      symbolCount
+    };
+  });
+  return [...symbolResults, ...fileResults];
+}
+
+// src/shared/graph-selection.ts
+function buildGraphEdgeId(edge) {
+  return `${edge.source}->${edge.target}:${edge.kind}`;
+}
+function buildGraphEdgeIndex(edges) {
+  const edgeIndex2 = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const sourceEdges = edgeIndex2.get(edge.source);
+    if (sourceEdges) {
+      sourceEdges.push(edge);
+    } else {
+      edgeIndex2.set(edge.source, [edge]);
+    }
+    const targetEdges = edgeIndex2.get(edge.target);
+    if (targetEdges) {
+      targetEdges.push(edge);
+    } else {
+      edgeIndex2.set(edge.target, [edge]);
+    }
+  }
+  return edgeIndex2;
+}
+function buildFileFocusedSelection({
+  filePath,
+  fileIndex,
+  edgeIndex: edgeIndex2
+}) {
+  const fileSymbolIds = fileIndex.get(filePath) || [];
+  const nodeIds = /* @__PURE__ */ new Set();
+  const edges = /* @__PURE__ */ new Map();
+  for (const symbolId of fileSymbolIds) {
+    nodeIds.add(symbolId);
+    for (const edge of edgeIndex2.get(symbolId) || []) {
+      nodeIds.add(edge.source);
+      nodeIds.add(edge.target);
+      edges.set(buildGraphEdgeId(edge), edge);
+    }
+  }
+  return {
+    nodeIds: [...nodeIds],
+    edges: [...edges.values()]
+  };
+}
+
 // src/web/graph.ts
 var cy = null;
 var graphNodes = /* @__PURE__ */ new Map();
 var graphEdges = [];
+var fileToSymbolIds = /* @__PURE__ */ new Map();
 var edgeIndex = /* @__PURE__ */ new Map();
 var pinnedNames = /* @__PURE__ */ new Set();
 var allSymbolNames = [];
@@ -1585,7 +1710,8 @@ async function initGraph() {
       target: e.target || e.to || "",
       kind: (e.kind || e.type || "references").toLowerCase()
     }));
-    buildEdgeIndex();
+    edgeIndex = buildGraphEdgeIndex(graphEdges);
+    fileToSymbolIds = buildGraphFileIndex(graphNodes);
     allSymbolNames = Array.from(graphNodes.keys()).sort();
     const pinned = focusData.pinned || [];
     for (const f of pinned) {
@@ -1632,30 +1758,13 @@ function showOnboardingHint(container) {
   if (container.querySelector(".graph-onboarding")) return;
   const hint = document.createElement("div");
   hint.className = "graph-onboarding";
-  hint.innerHTML = '<div class="graph-onboarding-icon">&#9670; &#8212; &#9670;</div><div class="graph-onboarding-title">Code dependency graph</div><div class="graph-onboarding-subtitle">Search for a symbol above to start exploring.<br/>Nodes expand on click to reveal connections.</div>';
+  hint.innerHTML = '<div class="graph-onboarding-icon">&#9670; &#8212; &#9670;</div><div class="graph-onboarding-title">Code dependency graph</div><div class="graph-onboarding-subtitle">Search for a symbol or file above to start exploring.<br/>Nodes expand on click to reveal connections.</div>';
   container.appendChild(hint);
 }
 function removeOnboardingHint() {
   const hint = document.querySelector(".graph-onboarding");
   if (hint) hint.remove();
 }
-function buildEdgeIndex() {
-  edgeIndex.clear();
-  for (const edge of graphEdges) {
-    let srcList = edgeIndex.get(edge.source);
-    if (!srcList) {
-      srcList = [];
-      edgeIndex.set(edge.source, srcList);
-    }
-    srcList.push(edge);
-    let tgtList = edgeIndex.get(edge.target);
-    if (!tgtList) {
-      tgtList = [];
-      edgeIndex.set(edge.target, tgtList);
-    }
-    tgtList.push(edge);
-  }
-}
 function addNodeNeighborhood(symbolId, maxDegrees = 1) {
   const visited = /* @__PURE__ */ new Set();
   let frontier = /* @__PURE__ */ new Set([symbolId]);
@@ -1690,6 +1799,30 @@ function renderNodeNeighborhoodAndLayout(symbolId, maxDegrees = 1) {
     runLayout();
   }
 }
+function focusFileInGraph(filePath) {
+  if (!cy) return;
+  const selection = buildFileFocusedSelection({
+    filePath,
+    fileIndex: fileToSymbolIds,
+    edgeIndex
+  });
+  cy.elements().remove();
+  document.getElementById("symbol-detail")?.classList.add("hidden");
+  if (selection.nodeIds.length === 0) {
+    const cyEl = document.getElementById("cy");
+    if (cyEl) showOnboardingHint(cyEl);
+    refreshAnalysisGraphState();
+    return;
+  }
+  for (const symbolId of selection.nodeIds) {
+    addNodeToGraph(symbolId);
+  }
+  for (const edge of selection.edges) {
+    addEdgeToGraph(edge);
+  }
+  refreshAnalysisGraphState();
+  runLayout();
+}
 async function focusSymbolInGraph(symbolId, options = {}) {
   await focusSymbolsInGraph([symbolId], options);
 }
@@ -2442,27 +2575,32 @@ function setupToolbar() {
   searchInput.parentNode.style.position = "relative";
   searchInput.parentNode.appendChild(dropdown);
   const rankedSymbols = allSymbolNames.slice().sort((a, b2) => compareGraphNodeIds(a, b2, graphNodes));
-  function showDropdownResults(matches) {
-    if (matches.length === 0) {
+  function showDropdownResults(results) {
+    if (results.length === 0) {
       dropdown.classList.add("hidden");
       return;
     }
-    dropdown.innerHTML = matches.map((name) => {
-      const node = graphNodes.get(name);
-      const kind = node ? (node.kind || "").toLowerCase() : "";
-      const shortName = getGraphNodeLabel(node || {}, name);
-      const kindColor = KIND_COLORS[kind] ? KIND_COLORS[kind].border : "#565f89";
-      return `<div class="search-result" data-id="${escapeHtml(name)}">
-        <span class="search-result-name">${escapeHtml(shortName)}</span>
-        <span class="search-result-kind" style="color:${kindColor}">${kind}</span>
+    dropdown.innerHTML = results.map((result) => {
+      const kindColor = result.type === "file" ? "var(--accent)" : KIND_COLORS[result.kind] ? KIND_COLORS[result.kind].border : "#565f89";
+      return `<div class="search-result" data-id="${escapeHtml(result.id)}" data-type="${result.type}">
+        <div class="search-result-body">
+          <span class="search-result-name">${escapeHtml(result.label)}</span>
+          <span class="search-result-subtitle">${escapeHtml(result.subtitle)}</span>
+        </div>
+        <span class="search-result-kind${result.type === "file" ? " file" : ""}" style="color:${kindColor}">${escapeHtml(result.kind)}</span>
       </div>`;
     }).join("");
     dropdown.classList.remove("hidden");
     dropdown.querySelectorAll(".search-result").forEach((el) => {
       el.addEventListener("click", () => {
         const id = el.dataset.id || "";
+        const type = el.dataset.type || "symbol";
         searchInput.value = "";
         dropdown.classList.add("hidden");
+        if (type === "file") {
+          focusFileInGraph(id);
+          return;
+        }
         void focusSymbolInGraph(id, {
           maxDegrees: 1,
           animate: true,
@@ -2473,23 +2611,22 @@ function setupToolbar() {
       });
     });
   }
+  function updateDropdownResults() {
+    const results = buildGraphSearchResults({
+      query: searchInput.value,
+      symbolIds: rankedSymbols,
+      nodes: graphNodes,
+      fileIndex: fileToSymbolIds
+    });
+    showDropdownResults(results);
+  }
   searchInput.addEventListener("focus", () => {
-    if (searchInput.value.trim().length < 2) {
-      showDropdownResults(rankedSymbols.slice(0, 20));
-    }
+    updateDropdownResults();
   });
   searchInput.addEventListener("input", () => {
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(() => {
-      const query = searchInput.value.trim().toLowerCase();
-      if (query.length < 2) {
-        showDropdownResults(rankedSymbols.slice(0, 20));
-        return;
-      }
-      const matches = rankedSymbols.filter((name) => {
-        return matchesGraphNodeQuery(query, graphNodes.get(name) || {}, name);
-      }).slice(0, 15);
-      showDropdownResults(matches);
+      updateDropdownResults();
     }, 150);
   });
   searchInput.addEventListener("keydown", (e) => {
@@ -2572,25 +2709,45 @@ var settingsBtn = document.getElementById("settings-btn");
 var settingsModal = document.getElementById("settings-modal");
 var settingsBackdrop = document.getElementById("settings-backdrop");
 var settingsCloseBtn = document.getElementById("settings-close");
+var openRouterConnectModal = document.getElementById("openrouter-connect-modal");
+var openRouterConnectBackdrop = document.getElementById("openrouter-connect-backdrop");
+var openRouterConnectCloseBtn = document.getElementById("openrouter-connect-close");
+var openRouterConnectCancelBtn = document.getElementById("openrouter-connect-cancel");
+var openRouterConnectContinueBtn = document.getElementById("openrouter-connect-continue");
+var openRouterPersistCheckbox = document.getElementById("openrouter-persist-checkbox");
 var settingsPath = document.getElementById("settings-path");
 var settingsList = document.getElementById("settings-list");
 var settingsBanner = document.getElementById("settings-banner");
+var settingsOpenRouterSession = document.getElementById("settings-openrouter-session");
+var settingsOpenRouterSessionMeta = document.getElementById("settings-openrouter-session-meta");
 var settingsSaveBtn = document.getElementById("settings-save");
 var settingsResetBtn = document.getElementById("settings-reset");
+var disconnectOpenRouterBtn = document.getElementById("disconnect-openrouter-btn");
+var connectOpenRouterButtons = Array.from(
+  document.querySelectorAll("[data-openrouter-connect]")
+);
+var configOverlaySpotlight = document.getElementById("config-overlay-spotlight");
+var configOverlayIntro = document.getElementById("config-overlay-intro");
+var configConnectStatus = document.getElementById("config-connect-status");
 var ws;
 var currentAssistantEl = null;
 var assistantText = "";
 var hadToolCalls = false;
 var settingsPayload = null;
 var activeSavedSession = null;
+var activeBaseUrl = "";
+var sessionOpenRouterConnected = false;
 var sessionRefreshTracker = createLatestRequestTracker();
 var TOOL_RESULT_MAX = 500;
+var OPENROUTER_PKCE_VERIFIER_KEY = "minicode:openrouter:pkce-verifier";
+var OPENROUTER_PERSIST_TO_ENV_KEY = "minicode:openrouter:persist-to-env";
 function connect() {
   const protocol = location.protocol === "https:" ? "wss:" : "ws:";
   ws = new WebSocket(`${protocol}//${location.host}`);
   ws.onopen = () => {
     setStatus("ready");
     fetchStatus();
+    refreshModelList();
     fetchContext();
   };
   ws.onclose = () => {
@@ -2617,6 +2774,127 @@ function setBusy(busy) {
   }
 }
 var configOverlay = document.getElementById("config-overlay");
+function setConfigConnectStatus(message, tone) {
+  if (!configConnectStatus) {
+    return;
+  }
+  configConnectStatus.textContent = message;
+  configConnectStatus.className = `config-connect-status ${tone}`;
+}
+function clearConfigConnectStatus() {
+  if (!configConnectStatus) {
+    return;
+  }
+  configConnectStatus.textContent = "";
+  configConnectStatus.className = "config-connect-status hidden";
+}
+function encodeBase64Url(bytes) {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+function createPkceVerifier() {
+  const bytes = new Uint8Array(32);
+  crypto.getRandomValues(bytes);
+  return encodeBase64Url(bytes);
+}
+async function createPkceChallenge(verifier) {
+  const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier));
+  return encodeBase64Url(new Uint8Array(digest));
+}
+async function startOpenRouterConnect(persistToEnv) {
+  const verifier = createPkceVerifier();
+  const challenge = await createPkceChallenge(verifier);
+  sessionStorage.setItem(OPENROUTER_PKCE_VERIFIER_KEY, verifier);
+  sessionStorage.setItem(OPENROUTER_PERSIST_TO_ENV_KEY, persistToEnv ? "1" : "0");
+  setConfigConnectStatus("Redirecting to OpenRouter\u2026", "info");
+  const callbackUrl = new URL(location.pathname, location.origin).toString();
+  const authUrl = new URL("https://openrouter.ai/auth");
+  authUrl.searchParams.set("callback_url", callbackUrl);
+  authUrl.searchParams.set("code_challenge", challenge);
+  authUrl.searchParams.set("code_challenge_method", "S256");
+  location.assign(authUrl.toString());
+}
+async function maybeHandleOpenRouterCallback() {
+  const url = new URL(location.href);
+  const code = url.searchParams.get("code");
+  if (!code) {
+    return;
+  }
+  const cleanedUrl = `${url.pathname}${url.hash}`;
+  history.replaceState({}, document.title, cleanedUrl);
+  const codeVerifier = sessionStorage.getItem(OPENROUTER_PKCE_VERIFIER_KEY);
+  const persistToEnv = sessionStorage.getItem(OPENROUTER_PERSIST_TO_ENV_KEY) === "1";
+  sessionStorage.removeItem(OPENROUTER_PKCE_VERIFIER_KEY);
+  sessionStorage.removeItem(OPENROUTER_PERSIST_TO_ENV_KEY);
+  if (!codeVerifier) {
+    setConfigConnectStatus(
+      "OpenRouter sign-in could not be completed because the local PKCE verifier was missing. Start the connect flow again.",
+      "error"
+    );
+    return;
+  }
+  for (const button of connectOpenRouterButtons) {
+    button.disabled = true;
+  }
+  setConfigConnectStatus("Connecting OpenRouter to this serve session\u2026", "info");
+  try {
+    const res = await fetch("/api/openrouter/connect", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ code, codeVerifier, persistToEnv })
+    });
+    const body = await res.json();
+    if (!res.ok) {
+      throw new Error("error" in body ? body.error : `Failed to connect OpenRouter (${res.status})`);
+    }
+    activeBaseUrl = body.baseUrl;
+    addMessage(body.message, "thinking");
+    const statusTone = body.persistWarning ? "info" : body.needsSetup ? "info" : "success";
+    setConfigConnectStatus(body.message, statusTone);
+    await fetchStatus();
+    await refreshModelList();
+    const onlyModelMissing = body.needsSetup && body.missing.length === 1 && body.missing[0]?.includes("MODEL");
+    if (onlyModelMissing) {
+      modelDropdown.classList.remove("hidden");
+      sessionDropdown.classList.add("hidden");
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to connect OpenRouter";
+    setConfigConnectStatus(message, "error");
+  } finally {
+    for (const button of connectOpenRouterButtons) {
+      button.disabled = false;
+    }
+  }
+}
+async function disconnectOpenRouter() {
+  disconnectOpenRouterBtn.disabled = true;
+  clearSettingsBanner();
+  try {
+    const res = await fetch("/api/openrouter/disconnect", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" }
+    });
+    const body = await res.json();
+    if (!res.ok) {
+      throw new Error("error" in body ? body.error : `Failed to disconnect OpenRouter (${res.status})`);
+    }
+    activeBaseUrl = body.baseUrl;
+    addMessage(body.message, "thinking");
+    setSettingsBanner(body.message, body.disconnected ? "success" : "info");
+    clearConfigConnectStatus();
+    await fetchStatus();
+    await refreshModelList();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to disconnect OpenRouter";
+    setSettingsBanner(message, "error");
+  } finally {
+    disconnectOpenRouterBtn.disabled = false;
+  }
+}
 async function fetchStatus() {
   try {
     const res = await fetch("/api/status");
@@ -2624,6 +2902,9 @@ async function fetchStatus() {
     modelInfo.textContent = data.model || "Select model";
     modelInfo.classList.toggle("placeholder", !data.model);
     activeModel = data.model;
+    activeBaseUrl = data.baseUrl ?? "";
+    sessionOpenRouterConnected = data.sessionOpenRouterConnected ?? false;
+    renderOpenRouterSessionControls();
     if (data.needsSetup) {
       configOverlay.classList.remove("hidden");
       chatInput.disabled = true;
@@ -2631,6 +2912,11 @@ async function fetchStatus() {
       const missingEl = document.getElementById("config-missing");
       if (missingEl && data.missing && data.missing.length > 0) {
         const isOnlyModelMissing = data.missing.length === 1 && data.missing[0].includes("MODEL");
+        const hasPersistedOpenRouter = isOnlyModelMissing && (data.baseUrl ?? "").includes("openrouter");
+        if (configOverlayIntro) {
+          configOverlayIntro.textContent = hasPersistedOpenRouter ? "OpenRouter is already configured. Select a model to continue:" : "minicode needs a model provider to run. Configure one of the following:";
+        }
+        configOverlaySpotlight?.classList.toggle("hidden", hasPersistedOpenRouter);
         const hint = isOnlyModelMissing ? ` \u2014 select one from the <strong>model dropdown</strong> above, or set it in config` : "";
         missingEl.innerHTML = `<strong>Missing:</strong> ${data.missing.map(escapeHtml).join(", ")}${hint}`;
         missingEl.classList.remove("hidden");
@@ -2638,6 +2924,16 @@ async function fetchStatus() {
     } else {
       configOverlay.classList.add("hidden");
       chatInput.disabled = false;
+      sendBtn.disabled = false;
+      const missingEl = document.getElementById("config-missing");
+      if (missingEl) {
+        missingEl.classList.add("hidden");
+        missingEl.innerHTML = "";
+      }
+      if (configOverlayIntro) {
+        configOverlayIntro.textContent = "minicode needs a model provider to run. Configure one of the following:";
+      }
+      configOverlaySpotlight?.classList.remove("hidden");
     }
   } catch {
   }
@@ -2746,6 +3042,50 @@ function addMessage(text, type, markdown = false) {
   scrollToBottom();
   return el;
 }
+function clearChatTranscript() {
+  messagesEl.innerHTML = "";
+  currentAssistantEl = null;
+  assistantText = "";
+  hadToolCalls = false;
+}
+function stringifyToolInput(input) {
+  const entries = Object.entries(input).flatMap(([key, value]) => {
+    if (value === void 0 || value === null) {
+      return [];
+    }
+    if (typeof value === "string") {
+      return [[key, value]];
+    }
+    return [[key, JSON.stringify(value)]];
+  });
+  return Object.fromEntries(entries);
+}
+function addToolResultPreview(name, result) {
+  const toolEls = messagesEl.querySelectorAll(`.tool-call[data-tool-name="${name}"]`);
+  if (toolEls.length === 0) {
+    addToolCall(name, {});
+  }
+  finalizeToolCall(name, result);
+}
+function renderLoadedSessionMessages(messages) {
+  clearChatTranscript();
+  for (const message of messages) {
+    if (message.role === "user") {
+      addMessage(message.content, "user");
+      continue;
+    }
+    if (message.role === "assistant") {
+      if (message.content.trim().length > 0) {
+        addMessage(message.content, "assistant", true);
+      }
+      for (const toolCall of message.toolCalls ?? []) {
+        addToolCall(toolCall.name, stringifyToolInput(toolCall.input));
+      }
+      continue;
+    }
+    addToolResultPreview(message.toolName, message.content);
+  }
+}
 function summarizeToolInput(name, input) {
   const key = input.path ?? input.file_path ?? input.command ?? input.query ?? input.pattern ?? input.name ?? input.old_string;
   if (typeof key === "string") {
@@ -2786,7 +3126,7 @@ function finalizeToolCall(name, result, elapsedMs) {
   if (!el) return;
   const timeEl = el.querySelector(".tool-time");
   if (timeEl) {
-    timeEl.textContent = `${elapsedMs}ms`;
+    timeEl.textContent = elapsedMs && elapsedMs > 0 ? `${elapsedMs}ms` : "";
   }
   const resultEl = el.querySelector(".tool-result");
   if (resultEl && result) {
@@ -2833,6 +3173,13 @@ function closeHeaderMenus() {
 function isSettingsModalOpen() {
   return !settingsModal.classList.contains("hidden");
 }
+function isOpenRouterConnectModalOpen() {
+  return !openRouterConnectModal.classList.contains("hidden");
+}
+function syncModalOpenState() {
+  const anyModalOpen = isSettingsModalOpen() || isOpenRouterConnectModalOpen();
+  document.body.classList.toggle("modal-open", anyModalOpen);
+}
 function formatSettingsValue(value) {
   return value === null ? "(unset)" : String(value);
 }
@@ -2844,6 +3191,17 @@ function clearSettingsBanner() {
   settingsBanner.textContent = "";
   settingsBanner.className = "settings-banner hidden";
 }
+function renderOpenRouterSessionControls() {
+  if (sessionOpenRouterConnected) {
+    settingsOpenRouterSession.classList.remove("hidden");
+    settingsOpenRouterSessionMeta.textContent = activeBaseUrl ? `Endpoint: ${activeBaseUrl}. This session-only connection overrides your original provider settings until you disconnect or restart serve.` : "This session-only connection overrides your original provider settings until you disconnect or restart serve.";
+    disconnectOpenRouterBtn.disabled = false;
+    return;
+  }
+  settingsOpenRouterSession.classList.add("hidden");
+  settingsOpenRouterSessionMeta.textContent = "";
+  disconnectOpenRouterBtn.disabled = false;
+}
 function createSettingsControl(entry, inputId) {
   const value = entry.persistedValue;
   if (entry.type === "boolean") {
@@ -3038,15 +3396,29 @@ function openSettings() {
   closeHeaderMenus();
   settingsModal.classList.remove("hidden");
   settingsModal.setAttribute("aria-hidden", "false");
-  document.body.classList.add("modal-open");
+  syncModalOpenState();
   void loadSettings();
 }
 function closeSettings() {
   settingsModal.classList.add("hidden");
   settingsModal.setAttribute("aria-hidden", "true");
-  document.body.classList.remove("modal-open");
+  syncModalOpenState();
   clearSettingsBanner();
 }
+function openOpenRouterConnectModal() {
+  closeHeaderMenus();
+  openRouterConnectModal.classList.remove("hidden");
+  openRouterConnectModal.setAttribute("aria-hidden", "false");
+  openRouterPersistCheckbox.checked = false;
+  openRouterConnectContinueBtn.disabled = false;
+  syncModalOpenState();
+}
+function closeOpenRouterConnectModal() {
+  openRouterConnectModal.classList.add("hidden");
+  openRouterConnectModal.setAttribute("aria-hidden", "true");
+  openRouterConnectContinueBtn.disabled = false;
+  syncModalOpenState();
+}
 chatForm.addEventListener("submit", (e) => {
   e.preventDefault();
   const message = chatInput.value.trim();
@@ -3089,31 +3461,63 @@ async function refreshModelList() {
     const res = await fetch("/api/models");
     const data = await res.json();
     activeModel = data.activeModel;
+    const hasActiveModel = !!activeModel && data.models.some((model) => model.id === activeModel);
     if (!data.models || data.models.length === 0) {
+      modelInfo.textContent = "Select model";
+      modelInfo.classList.add("placeholder");
       modelList.innerHTML = '<div class="dropdown-empty">No models available</div>';
       return;
     }
+    if (hasActiveModel) {
+      modelInfo.textContent = activeModel;
+      modelInfo.classList.remove("placeholder");
+    } else {
+      modelInfo.textContent = "Select model";
+      modelInfo.classList.add("placeholder");
+    }
     modelList.innerHTML = "";
     for (const m2 of data.models) {
       const el = document.createElement("div");
       el.className = "model-item" + (m2.id === activeModel ? " active" : "");
       el.textContent = m2.name ?? m2.id;
       el.title = m2.id;
-      el.addEventListener("click", () => switchModel(m2.id));
+      el.addEventListener("click", () => {
+        void switchModel(m2.id);
+      });
       modelList.appendChild(el);
     }
   } catch {
     modelList.innerHTML = '<div class="dropdown-empty">Failed to load models</div>';
   }
 }
-function switchModel(modelId) {
-  ws.send(JSON.stringify({ type: "switch_model", model: modelId }));
-  modelInfo.textContent = modelId || "Select model";
-  modelInfo.classList.toggle("placeholder", !modelId);
-  activeModel = modelId;
-  modelDropdown.classList.add("hidden");
-  addMessage(`Model switched to: ${modelId}`, "thinking");
-  void fetchStatus();
+async function switchModel(modelId) {
+  try {
+    const res = await fetch("/api/model", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: modelId,
+        persistToHomeEnv: true
+      })
+    });
+    const body = await res.json();
+    if (!res.ok) {
+      throw new Error("error" in body ? body.error : `Failed to switch model (${res.status})`);
+    }
+    modelInfo.textContent = modelId || "Select model";
+    modelInfo.classList.toggle("placeholder", !modelId);
+    activeModel = modelId;
+    modelDropdown.classList.add("hidden");
+    if (body.persistedToEnv) {
+      addMessage(`Model switched to: ${modelId}. Saved as the default in ~/.minicode/.env.`, "thinking");
+    } else {
+      addMessage(`Model switched to: ${modelId}`, "thinking");
+    }
+    await fetchStatus();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to switch model";
+    addMessage(message, "error");
+  }
 }
 sessionBtn.addEventListener("click", (e) => {
   e.stopPropagation();
@@ -3209,9 +3613,12 @@ async function loadSession(label) {
       body: JSON.stringify({ label })
     });
     if (res.ok) {
+      const body = await res.json();
       sessionDropdown.classList.add("hidden");
-      messagesEl.innerHTML = "";
-      addMessage(`Session "${label}" restored`, "thinking");
+      renderLoadedSessionMessages(body.messages);
+      if (body.messages.length === 0) {
+        addMessage(`Session "${body.label}" restored`, "thinking");
+      }
       void refreshSessionList();
     }
   } catch {
@@ -3247,9 +3654,19 @@ settingsCloseBtn.addEventListener("click", () => {
 settingsBackdrop.addEventListener("click", () => {
   closeSettings();
 });
+openRouterConnectBackdrop.addEventListener("click", () => {
+  closeOpenRouterConnectModal();
+});
+openRouterConnectCloseBtn.addEventListener("click", () => {
+  closeOpenRouterConnectModal();
+});
+openRouterConnectCancelBtn.addEventListener("click", () => {
+  closeOpenRouterConnectModal();
+});
 settingsResetBtn.addEventListener("click", () => {
   clearSettingsBanner();
   renderSettings();
+  renderOpenRouterSessionControls();
 });
 settingsSaveBtn.addEventListener("click", async () => {
   if (!settingsPayload) {
@@ -3298,11 +3715,31 @@ settingsList.addEventListener("change", () => {
   clearSettingsBanner();
   updateSettingsActions();
 });
+disconnectOpenRouterBtn.addEventListener("click", () => {
+  void disconnectOpenRouter();
+});
 document.addEventListener("keydown", (event) => {
-  if (event.key === "Escape" && isSettingsModalOpen()) {
+  if (event.key !== "Escape") {
+    return;
+  }
+  if (isOpenRouterConnectModalOpen()) {
+    closeOpenRouterConnectModal();
+    return;
+  }
+  if (isSettingsModalOpen()) {
     closeSettings();
   }
 });
+for (const button of connectOpenRouterButtons) {
+  button.addEventListener("click", () => {
+    openOpenRouterConnectModal();
+  });
+}
+openRouterConnectContinueBtn.addEventListener("click", () => {
+  openRouterConnectContinueBtn.disabled = true;
+  closeOpenRouterConnectModal();
+  void startOpenRouterConnect(openRouterPersistCheckbox.checked);
+});
 var chatPane = document.getElementById("chat-pane");
 var divider = document.getElementById("pane-divider");
 divider.addEventListener("mousedown", (e) => {
@@ -3337,3 +3774,4 @@ graphToggle.addEventListener("click", () => {
 });
 connect();
 initGraph();
+void maybeHandleOpenRouterCallback();