@sean.holung/minicode 0.3.4 → 0.3.6

package/dist/src/web/app.js

@@ -1443,10 +1443,215 @@ function buildStylesheet() {
   return styles;
 }
 
+// src/shared/graph-symbols.ts
+function dedupe(values) {
+  return [...new Set(values.filter((value) => value.length > 0))];
+}
+function stripCollisionSuffix(value) {
+  const hashIndex = value.indexOf("#");
+  return hashIndex >= 0 ? value.slice(0, hashIndex) : value;
+}
+function stripDisplayKindSuffix(value) {
+  return value.replace(/\s+\([^()]+\)$/, "");
+}
+function getGraphNodeId(node, fallbackId = "") {
+  return node.qualifiedName || node.id || fallbackId || node.name || "";
+}
+function getGraphNodeLabel(node, fallbackId = "") {
+  const label = node.name?.trim();
+  if (label && label.length > 0) {
+    return label;
+  }
+  const id = getGraphNodeId(node, fallbackId);
+  return id.split(".").pop() || id;
+}
+function getGraphNodeAliases(node, fallbackId = "") {
+  const id = getGraphNodeId(node, fallbackId);
+  const label = getGraphNodeLabel(node, fallbackId);
+  const shortId = id.split(".").pop() || id;
+  return dedupe([
+    id,
+    node.id ?? "",
+    node.qualifiedName ?? "",
+    label,
+    stripDisplayKindSuffix(label),
+    shortId,
+    stripCollisionSuffix(shortId),
+    stripCollisionSuffix(id)
+  ]);
+}
+function compareLabels(a, b2) {
+  return a.localeCompare(b2, void 0, { sensitivity: "base" });
+}
+function compareGraphNodeIds(a, b2, nodes) {
+  const nodeA = nodes.get(a);
+  const nodeB = nodes.get(b2);
+  const exportedA = nodeA ? Number(!!nodeA.exported) : 0;
+  const exportedB = nodeB ? Number(!!nodeB.exported) : 0;
+  if (exportedA !== exportedB) {
+    return exportedB - exportedA;
+  }
+  const labelA = getGraphNodeLabel(nodeA ?? {}, a);
+  const labelB = getGraphNodeLabel(nodeB ?? {}, b2);
+  const labelComparison = compareLabels(labelA, labelB);
+  if (labelComparison !== 0) {
+    return labelComparison;
+  }
+  return compareLabels(a, b2);
+}
+function matchesGraphNodeQuery(query, node, fallbackId = "") {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return false;
+  }
+  return getGraphNodeAliases(node, fallbackId).some(
+    (alias) => alias.toLowerCase().includes(normalizedQuery)
+  );
+}
+function resolveGraphNodeIds(nodes, symbolName) {
+  const query = symbolName.trim();
+  if (query.length === 0) {
+    return [];
+  }
+  if (nodes.has(query)) {
+    return [query];
+  }
+  const exactMatches = [...nodes.entries()].filter(([id, node]) => getGraphNodeAliases(node, id).includes(query)).map(([id]) => id).sort((a, b2) => compareGraphNodeIds(a, b2, nodes));
+  if (exactMatches.length > 0) {
+    return exactMatches;
+  }
+  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 = [];
@@ -1505,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) {
@@ -1537,7 +1743,7 @@ async function initGraph() {
 }
 function highlightAgentActivity(symbolName) {
   if (!cy) return;
-  void focusSymbolInGraph(symbolName, {
+  void focusResolvedSymbolsInGraph(symbolName, {
     maxDegrees: 0,
     pulse: true,
     pulseDuration: 2e3,
@@ -1552,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]);
@@ -1610,7 +1799,41 @@ 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);
+}
+async function focusResolvedSymbolsInGraph(symbolName, options = {}) {
+  const matches = resolveGraphNodeIds(graphNodes, symbolName);
+  if (matches.length === 0) {
+    return;
+  }
+  await focusSymbolsInGraph(matches, options);
+}
+async function focusSymbolsInGraph(symbolIds, options = {}) {
   if (!cy) return;
   const {
     maxDegrees = 0,
@@ -1621,21 +1844,38 @@ async function focusSymbolInGraph(symbolId, options = {}) {
     flashDuration = 1200,
     openDetail = false
   } = options;
-  renderNodeNeighborhoodAndLayout(symbolId, maxDegrees);
-  const node = findNode(symbolId);
-  if (!node) return;
-  if (animate) {
-    cy.animate({ center: { eles: node }, zoom }, { duration: 300 });
-  }
-  if (pulse) {
-    node.addClass("agent-pulse");
-    setTimeout(() => node.removeClass("agent-pulse"), pulseDuration);
-  } else {
-    node.flashClass("highlighted", flashDuration);
+  const uniqueIds = [...new Set(symbolIds)];
+  let addedNodes = false;
+  for (const symbolId of uniqueIds) {
+    const beforeNodeCount = cy.nodes().length;
+    addNodeNeighborhood(symbolId, maxDegrees);
+    if (cy.nodes().length > beforeNodeCount) {
+      addedNodes = true;
+    }
+  }
+  connectExistingNodes();
+  refreshAnalysisGraphState();
+  if (addedNodes) {
+    runLayout();
   }
-  if (openDetail) {
+  const nodes = uniqueIds.map((symbolId) => findNode(symbolId)).filter((node) => node !== null);
+  if (nodes.length === 0) return;
+  const primaryNode = nodes[0];
+  if (animate && primaryNode) {
+    cy.animate({ center: { eles: primaryNode }, zoom }, { duration: 300 });
+  }
+  for (const node of nodes) {
+    if (pulse) {
+      node.addClass("agent-pulse");
+      setTimeout(() => node.removeClass("agent-pulse"), pulseDuration);
+    } else {
+      node.flashClass("highlighted", flashDuration);
+    }
+  }
+  if (openDetail && primaryNode && uniqueIds.length === 1) {
     const detailEl = document.getElementById("symbol-detail");
     if (detailEl) {
+      const node = primaryNode;
       await showDetail(node, detailEl);
     }
   }
@@ -1650,7 +1890,7 @@ function addNodeToGraph(id) {
   const nodeData = graphNodes.get(id);
   if (!nodeData) return;
   const kind = (nodeData.kind || "function").toLowerCase();
-  const name = nodeData.name || id.split(".").pop() || id;
+  const name = getGraphNodeLabel(nodeData, id);
   const file = nodeData.filePath || nodeData.file || "";
   cy.add({
     data: {
@@ -1691,11 +1931,10 @@ function findNode(name) {
   if (!cy) return null;
   const node = cy.getElementById(name);
   if (node.length > 0) return node;
-  const match = cy.nodes().filter((n) => {
-    const nName = n.data("name") || "";
-    const qName = n.data("qualifiedName") || "";
-    return nName === name || qName.endsWith("." + name);
-  });
+  const matchingIds = new Set(resolveGraphNodeIds(graphNodes, name));
+  const match = cy.nodes().filter(
+    (n) => matchingIds.has(n.data("qualifiedName") || n.data("id") || "")
+  );
   return match.length > 0 ? match : null;
 }
 function getAnalysisPanelEls() {
@@ -2335,37 +2574,33 @@ function setupToolbar() {
   dropdown.className = "search-dropdown hidden";
   searchInput.parentNode.style.position = "relative";
   searchInput.parentNode.appendChild(dropdown);
-  const rankedSymbols = allSymbolNames.slice().sort((a, b2) => {
-    const nodeA = graphNodes.get(a);
-    const nodeB = graphNodes.get(b2);
-    const expA = nodeA ? !!nodeA.exported : false;
-    const expB = nodeB ? !!nodeB.exported : false;
-    if (expA !== expB) return expA ? -1 : 1;
-    const nameA = (a.split(".").pop() || "").toLowerCase();
-    const nameB = (b2.split(".").pop() || "").toLowerCase();
-    return nameA.localeCompare(nameB);
-  });
-  function showDropdownResults(matches) {
-    if (matches.length === 0) {
+  const rankedSymbols = allSymbolNames.slice().sort((a, b2) => compareGraphNodeIds(a, b2, graphNodes));
+  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 = name.split(".").pop() || 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,
@@ -2376,24 +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) => {
-        const shortName = (name.split(".").pop() || "").toLowerCase();
-        return shortName.includes(query) || name.toLowerCase().includes(query);
-      }).slice(0, 15);
-      showDropdownResults(matches);
+      updateDropdownResults();
     }, 150);
   });
   searchInput.addEventListener("keydown", (e) => {
@@ -2438,6 +2671,20 @@ function setupToolbar() {
   });
 }
 
+// src/web/request-tracker.ts
+function createLatestRequestTracker() {
+  let latestToken = 0;
+  return {
+    begin() {
+      latestToken += 1;
+      return latestToken;
+    },
+    isCurrent(token) {
+      return token === latestToken;
+    }
+  };
+}
+
 // src/web/app.ts
 var messagesEl = document.getElementById("messages");
 var chatForm = document.getElementById("chat-form");
@@ -2462,24 +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 = () => {
@@ -2506,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");
@@ -2513,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;
@@ -2520,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");
@@ -2527,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 {
   }
@@ -2635,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") {
@@ -2675,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) {
@@ -2722,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);
 }
@@ -2733,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") {
@@ -2927,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();
@@ -2978,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();
@@ -3023,6 +3538,7 @@ saveBtn.addEventListener("click", async () => {
   const label = requestedLabel || activeSavedSession?.label || void 0;
   const isUpdatingCurrentSession = !!activeSavedSession && (requestedLabel.length === 0 || requestedLabel === activeSavedSession.label);
   try {
+    saveBtn.setAttribute("disabled", "true");
     const res = await fetch("/api/sessions/save", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -3035,9 +3551,11 @@ saveBtn.addEventListener("click", async () => {
         `${isUpdatingCurrentSession ? "Session updated" : "Session saved"}: "${data.label}"`,
         "thinking"
       );
-      void refreshSessionList();
+      await refreshSessionList();
     }
   } catch {
+  } finally {
+    saveBtn.removeAttribute("disabled");
   }
 });
 saveLabelInput.addEventListener("keydown", (e) => {
@@ -3047,9 +3565,13 @@ saveLabelInput.addEventListener("keydown", (e) => {
   }
 });
 async function refreshSessionList() {
+  const requestToken = sessionRefreshTracker.begin();
   try {
     const res = await fetch("/api/sessions");
     const data = await res.json();
+    if (!sessionRefreshTracker.isCurrent(requestToken)) {
+      return;
+    }
     const sessions = data.sessions;
     activeSavedSession = sessions.find((session) => session.id === data.currentSessionId) ?? null;
     if (activeSavedSession) {
@@ -3075,6 +3597,9 @@ async function refreshSessionList() {
       sessionList.appendChild(el);
     }
   } catch {
+    if (!sessionRefreshTracker.isCurrent(requestToken)) {
+      return;
+    }
     activeSavedSession = null;
     sessionUpdateRow.classList.add("hidden");
     sessionList.innerHTML = '<div class="dropdown-empty">Failed to load sessions</div>';
@@ -3088,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 {
@@ -3126,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) {
@@ -3177,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) => {
@@ -3216,3 +3774,4 @@ graphToggle.addEventListener("click", () => {
 });
 connect();
 initGraph();
+void maybeHandleOpenRouterCallback();