@sean.holung/minicode 0.3.2 → 0.3.3

package/dist/src/web/app.js

@@ -1231,14 +1231,100 @@ function renderMarkdownInto(el, text) {
   }
 }
 
-// src/web/graph.ts
-var cy = null;
-var graphNodes = /* @__PURE__ */ new Map();
-var graphEdges = [];
-var edgeIndex = /* @__PURE__ */ new Map();
-var pinnedNames = /* @__PURE__ */ new Set();
-var allSymbolNames = [];
-var initialized = false;
+// src/web/analysis-helpers.ts
+function findingTypeLabel(type) {
+  switch (type) {
+    case "cycle":
+      return "Cycle";
+    case "fanInOutlier":
+      return "High fan-in";
+    case "fanOutOutlier":
+      return "High fan-out";
+    case "hotspot":
+      return "Hotspot";
+    case "fileCoupling":
+      return "File coupling";
+  }
+}
+function findingSeverityLabel(severity) {
+  switch (severity) {
+    case "high":
+      return "High";
+    case "warning":
+      return "Warning";
+    case "info":
+      return "Info";
+  }
+}
+function buildFindingMetricChips(finding) {
+  switch (finding.type) {
+    case "cycle":
+      return [
+        `${Number(finding.metrics.cycleSize ?? finding.symbols.length)} symbols`,
+        `${Number(finding.metrics.edgeCount ?? 0)} edges`,
+        `${Number(finding.metrics.fileCount ?? finding.files.length)} files`
+      ];
+    case "fanInOutlier":
+      return [
+        `fan-in ${Number(finding.metrics.fanIn ?? 0)}`,
+        `threshold ${Number(finding.metrics.threshold ?? 0)}`
+      ];
+    case "fanOutOutlier":
+      return [
+        `fan-out ${Number(finding.metrics.fanOut ?? 0)}`,
+        `threshold ${Number(finding.metrics.threshold ?? 0)}`
+      ];
+    case "hotspot":
+      return [
+        `degree ${Number(finding.metrics.totalDegree ?? 0)}`,
+        `${Number(finding.metrics.fanIn ?? 0)} in`,
+        `${Number(finding.metrics.fanOut ?? 0)} out`
+      ];
+    case "fileCoupling":
+      return [
+        `coupling ${Number(finding.metrics.totalCoupling ?? 0)}`,
+        `instability ${Number(finding.metrics.instability ?? 0)}`
+      ];
+  }
+}
+function buildFindingGraphContext(finding, edges) {
+  const selectedSymbols = new Set(finding.symbols);
+  const edgeIds = /* @__PURE__ */ new Set();
+  for (const edge of edges) {
+    const touchesSelected = selectedSymbols.has(edge.source) || selectedSymbols.has(edge.target);
+    const internalToSelection = selectedSymbols.has(edge.source) && selectedSymbols.has(edge.target);
+    if (finding.type === "cycle" && internalToSelection || finding.type !== "cycle" && touchesSelected) {
+      edgeIds.add(`${edge.source}->${edge.target}:${edge.kind}`);
+    }
+  }
+  return {
+    nodes: [...selectedSymbols].sort((a, b2) => a.localeCompare(b2)),
+    edgeIds: [...edgeIds].sort((a, b2) => a.localeCompare(b2))
+  };
+}
+function countFindingsByType(findings) {
+  return findings.reduce(
+    (counts, finding) => {
+      counts[finding.type] += 1;
+      return counts;
+    },
+    {
+      cycle: 0,
+      fanInOutlier: 0,
+      fanOutOutlier: 0,
+      hotspot: 0,
+      fileCoupling: 0
+    }
+  );
+}
+function filterFindings(findings, filter) {
+  if (filter === "all") {
+    return findings;
+  }
+  return findings.filter((finding) => finding.type === filter);
+}
+
+// src/shared/graph-styles.ts
 var KIND_COLORS = {
   function: { border: "#7aa2f7", bg: "rgba(122,162,247,0.15)" },
   class: { border: "#bb9af7", bg: "rgba(187,154,247,0.15)" },
@@ -1254,6 +1340,121 @@ var EDGE_STYLES = {
   implements: { lineStyle: "dashed", opacity: 0.6, color: "#2ac3de", width: 1.5 },
   references: { lineStyle: "dotted", opacity: 0.3, color: "#565f89", width: 1 }
 };
+function buildStylesheet() {
+  const styles = [
+    {
+      selector: "node",
+      style: {
+        "label": "data(label)",
+        "font-size": 11,
+        "color": "#c0caf5",
+        "text-valign": "bottom",
+        "text-halign": "center",
+        "text-margin-y": 5,
+        "width": 20,
+        "height": 20,
+        "shape": "roundrectangle",
+        "border-width": 1.5,
+        "border-color": "#565f89",
+        "background-color": "rgba(34,35,54,0.8)",
+        "font-family": "'JetBrains Mono', monospace",
+        "text-wrap": "none"
+      }
+    },
+    {
+      selector: "edge",
+      style: {
+        "width": 1,
+        "line-color": "#565f89",
+        "target-arrow-color": "#565f89",
+        "target-arrow-shape": "triangle",
+        "arrow-scale": 0.6,
+        "curve-style": "bezier",
+        "opacity": 0.4
+      }
+    }
+  ];
+  for (const [kind, colors] of Object.entries(KIND_COLORS)) {
+    styles.push({
+      selector: `node.${kind}`,
+      style: {
+        "color": colors.border,
+        "border-color": colors.border,
+        "background-color": colors.bg
+      }
+    });
+  }
+  for (const [kind, s] of Object.entries(EDGE_STYLES)) {
+    styles.push({
+      selector: `edge.${kind}`,
+      style: {
+        "line-style": s.lineStyle,
+        "line-color": s.color,
+        "target-arrow-color": s.color,
+        "opacity": s.opacity,
+        "width": s.width
+      }
+    });
+  }
+  styles.push({ selector: "node.pinned", style: { "border-color": "#e0af68", "border-width": 3 } });
+  styles.push({ selector: "node.faded", style: { "opacity": 0.15 } });
+  styles.push({ selector: "edge.faded", style: { "opacity": 0.05 } });
+  styles.push({ selector: "node.highlighted", style: { "border-width": 2.5, "z-index": 10 } });
+  styles.push({ selector: "edge.highlighted", style: { "opacity": 0.9, "width": 2, "z-index": 10 } });
+  styles.push({
+    selector: "node.analysis-flagged",
+    style: {
+      "border-style": "double",
+      "border-width": 3,
+      "overlay-color": "#7dcfff",
+      "overlay-opacity": 0.05
+    }
+  });
+  styles.push({
+    selector: "node.analysis-selected",
+    style: {
+      "border-color": "#f7768e",
+      "border-width": 4,
+      "background-color": "rgba(247,118,142,0.18)",
+      "z-index": 30
+    }
+  });
+  styles.push({
+    selector: "edge.analysis-flagged",
+    style: {
+      "opacity": 0.55,
+      "width": 1.75
+    }
+  });
+  styles.push({
+    selector: "edge.analysis-selected",
+    style: {
+      "line-color": "#f7768e",
+      "target-arrow-color": "#f7768e",
+      "opacity": 0.95,
+      "width": 3,
+      "z-index": 30
+    }
+  });
+  styles.push({ selector: "node.agent-pulse", style: { "border-color": "#ff9e64", "border-width": 4, "background-color": "rgba(255,158,100,0.25)" } });
+  styles.push({ selector: "node.search-match", style: { "border-color": "#e0af68", "border-width": 2.5 } });
+  styles.push({ selector: "node.expanded", style: { "border-width": 2.5 } });
+  styles.push({ selector: "node.hover-target", style: { "border-width": 3, "width": 24, "height": 24, "overlay-color": "#c0caf5", "overlay-opacity": 0.08, "z-index": 20 } });
+  return styles;
+}
+
+// src/web/graph.ts
+var cy = null;
+var graphNodes = /* @__PURE__ */ new Map();
+var graphEdges = [];
+var edgeIndex = /* @__PURE__ */ new Map();
+var pinnedNames = /* @__PURE__ */ new Set();
+var allSymbolNames = [];
+var initialized = false;
+var analysisReport = null;
+var activeAnalysisFindingId = null;
+var activeAnalysisFilter = "all";
+var analysisExplanationCache = /* @__PURE__ */ new Map();
 var LAYOUT_OPTIONS = {
   name: "cose",
   nodeRepulsion: function() {
@@ -1322,9 +1523,11 @@ async function initGraph() {
     setupToolbar();
     if (pinnedNames.size > 0) {
       for (const name of pinnedNames) {
-        addNodeAndNeighbors(name);
+        addNodeNeighborhood(name, 1);
       }
       runLayout();
+    } else {
+      showOnboardingHint(cyEl);
     }
   } catch (err) {
     console.error("Graph init failed:", err);
@@ -1334,22 +1537,28 @@ async function initGraph() {
 }
 function highlightAgentActivity(symbolName) {
   if (!cy) return;
-  const node = findNode(symbolName);
-  if (node) {
-    node.addClass("agent-pulse");
-    setTimeout(() => node.removeClass("agent-pulse"), 2e3);
-    return;
-  }
-  expandNodeAndLayout(symbolName);
-  const added = findNode(symbolName);
-  if (added) {
-    added.addClass("agent-pulse");
-    setTimeout(() => added.removeClass("agent-pulse"), 2e3);
-  }
+  void focusSymbolInGraph(symbolName, {
+    maxDegrees: 0,
+    pulse: true,
+    pulseDuration: 2e3,
+    animate: false,
+    openDetail: true
+  });
 }
 function resizeGraph() {
   if (cy) cy.resize();
 }
+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>';
+  container.appendChild(hint);
+}
+function removeOnboardingHint() {
+  const hint = document.querySelector(".graph-onboarding");
+  if (hint) hint.remove();
+}
 function buildEdgeIndex() {
   edgeIndex.clear();
   for (const edge of graphEdges) {
@@ -1367,23 +1576,77 @@ function buildEdgeIndex() {
     tgtList.push(edge);
   }
 }
-function addNodeAndNeighbors(symbolId) {
-  addNodeToGraph(symbolId);
-  const edges = edgeIndex.get(symbolId) || [];
-  for (const edge of edges) {
-    const neighbor = edge.source === symbolId ? edge.target : edge.source;
-    addNodeToGraph(neighbor);
-    addEdgeToGraph(edge);
+function addNodeNeighborhood(symbolId, maxDegrees = 1) {
+  const visited = /* @__PURE__ */ new Set();
+  let frontier = /* @__PURE__ */ new Set([symbolId]);
+  for (let degree = 0; degree <= maxDegrees; degree += 1) {
+    const next = /* @__PURE__ */ new Set();
+    for (const currentId of frontier) {
+      if (visited.has(currentId)) continue;
+      visited.add(currentId);
+      addNodeToGraph(currentId);
+      if (degree === maxDegrees) continue;
+      const edges = edgeIndex.get(currentId) || [];
+      for (const edge of edges) {
+        const neighbor = edge.source === currentId ? edge.target : edge.source;
+        addNodeToGraph(neighbor);
+        addEdgeToGraph(edge);
+        if (!visited.has(neighbor)) {
+          next.add(neighbor);
+        }
+      }
+    }
+    frontier = next;
+    if (frontier.size === 0) break;
   }
 }
-function expandNodeAndLayout(symbolId) {
-  addNodeAndNeighbors(symbolId);
+function renderNodeNeighborhoodAndLayout(symbolId, maxDegrees = 1) {
+  if (!cy) return;
+  const beforeNodeCount = cy.nodes().length;
+  addNodeNeighborhood(symbolId, maxDegrees);
   connectExistingNodes();
-  runLayout();
+  refreshAnalysisGraphState();
+  if (cy.nodes().length > beforeNodeCount) {
+    runLayout();
+  }
+}
+async function focusSymbolInGraph(symbolId, options = {}) {
+  if (!cy) return;
+  const {
+    maxDegrees = 0,
+    pulse = false,
+    pulseDuration = 1500,
+    animate = false,
+    zoom = 1.2,
+    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);
+  }
+  if (openDetail) {
+    const detailEl = document.getElementById("symbol-detail");
+    if (detailEl) {
+      await showDetail(node, detailEl);
+    }
+  }
+}
+function expandNodeAndLayout(symbolId) {
+  renderNodeNeighborhoodAndLayout(symbolId, 1);
 }
 function addNodeToGraph(id) {
   if (!cy) return;
   if (cy.getElementById(id).length > 0) return;
+  removeOnboardingHint();
   const nodeData = graphNodes.get(id);
   if (!nodeData) return;
   const kind = (nodeData.kind || "function").toLowerCase();
@@ -1435,71 +1698,348 @@ function findNode(name) {
   });
   return match.length > 0 ? match : null;
 }
-function buildStylesheet() {
-  const styles = [
-    {
-      selector: "node",
-      style: {
-        "label": "data(label)",
-        "font-size": 11,
-        "color": "#c0caf5",
-        "text-valign": "bottom",
-        "text-halign": "center",
-        "text-margin-y": 5,
-        "width": 20,
-        "height": 20,
-        "shape": "roundrectangle",
-        "border-width": 1.5,
-        "border-color": "#565f89",
-        "background-color": "rgba(34,35,54,0.8)",
-        "font-family": "'JetBrains Mono', monospace",
-        "text-wrap": "none"
-      }
-    },
-    {
-      selector: "edge",
-      style: {
-        "width": 1,
-        "line-color": "#565f89",
-        "target-arrow-color": "#565f89",
-        "target-arrow-shape": "triangle",
-        "arrow-scale": 0.6,
-        "curve-style": "bezier",
-        "opacity": 0.4
-      }
-    }
+function getAnalysisPanelEls() {
+  return {
+    panel: document.getElementById("analysis-panel"),
+    status: document.getElementById("analysis-status"),
+    summary: document.getElementById("analysis-summary"),
+    findings: document.getElementById("analysis-findings")
+  };
+}
+function setAnalysisStatus(message, tone = "info") {
+  const { status } = getAnalysisPanelEls();
+  status.textContent = message;
+  status.classList.remove("hidden", "error");
+  if (tone === "error") {
+    status.classList.add("error");
+  }
+}
+function clearAnalysisStatus() {
+  const { status } = getAnalysisPanelEls();
+  status.textContent = "";
+  status.classList.add("hidden");
+  status.classList.remove("error");
+}
+function clearAnalysisGraphClasses() {
+  if (!cy) return;
+  cy.elements().removeClass("analysis-flagged");
+  cy.elements().removeClass("analysis-selected");
+}
+function refreshAnalysisGraphState() {
+  const { panel } = getAnalysisPanelEls();
+  if (!cy || !analysisReport || panel.classList.contains("hidden")) {
+    clearAnalysisGraphClasses();
+    return;
+  }
+  clearAnalysisGraphClasses();
+  const candidateNodeIds = /* @__PURE__ */ new Set();
+  const candidateEdgeIds = /* @__PURE__ */ new Set();
+  for (const finding of getVisibleAnalysisFindings()) {
+    const context = buildFindingGraphContext(finding, graphEdges);
+    for (const nodeId of context.nodes) candidateNodeIds.add(nodeId);
+    for (const edgeId of context.edgeIds) candidateEdgeIds.add(edgeId);
+  }
+  for (const nodeId of candidateNodeIds) {
+    cy.getElementById(nodeId).addClass("analysis-flagged");
+  }
+  for (const edgeId of candidateEdgeIds) {
+    cy.getElementById(edgeId).addClass("analysis-flagged");
+  }
+  if (!activeAnalysisFindingId) return;
+  const activeFinding = getVisibleAnalysisFindings().find((finding) => finding.id === activeAnalysisFindingId);
+  if (!activeFinding) return;
+  const activeContext = buildFindingGraphContext(activeFinding, graphEdges);
+  for (const nodeId of activeContext.nodes) {
+    cy.getElementById(nodeId).addClass("analysis-selected");
+  }
+  for (const edgeId of activeContext.edgeIds) {
+    cy.getElementById(edgeId).addClass("analysis-selected");
+  }
+}
+function getVisibleAnalysisFindings() {
+  return analysisReport ? filterFindings(analysisReport.findings, activeAnalysisFilter) : [];
+}
+function renderAnalysisSummary(report) {
+  const { summary } = getAnalysisPanelEls();
+  const counts = countFindingsByType(report.findings);
+  const cards = [
+    { label: "Findings", value: report.summary.findingCount, filter: "all" },
+    { label: "Cycles", value: counts.cycle, filter: "cycle" },
+    { label: "Hotspots", value: counts.hotspot, filter: "hotspot" },
+    { label: "Coupling", value: counts.fileCoupling, filter: "fileCoupling" }
   ];
-  for (const [kind, colors] of Object.entries(KIND_COLORS)) {
-    styles.push({
-      selector: `node.${kind}`,
-      style: {
-        "color": colors.border,
-        "border-color": colors.border,
-        "background-color": colors.bg
-      }
+  summary.innerHTML = cards.map((card) => `
+    <button
+      class="analysis-summary-card ${card.filter === activeAnalysisFilter ? "active" : ""}"
+      data-filter="${card.filter}"
+      type="button"
+    >
+      <span class="analysis-summary-value">${card.value}</span>
+      <span class="analysis-summary-label">${escapeHtml(card.label)}</span>
+    </button>
+  `).join("");
+  summary.querySelectorAll(".analysis-summary-card").forEach((el) => {
+    el.addEventListener("click", () => {
+      const filter = el.dataset.filter || "all";
+      setAnalysisFilter(filter);
     });
+  });
+}
+function renderAnalysisFindings(report) {
+  const { findings } = getAnalysisPanelEls();
+  const visibleFindings = filterFindings(report.findings, activeAnalysisFilter);
+  if (visibleFindings.length === 0) {
+    findings.innerHTML = `
+      <div class="analysis-empty">
+        No ${escapeHtml(activeAnalysisFilter === "all" ? "structural outliers" : findingTypeLabel(activeAnalysisFilter).toLowerCase())} cleared the current thresholds for this graph snapshot.
+      </div>
+    `;
+    return;
   }
-  for (const [kind, s] of Object.entries(EDGE_STYLES)) {
-    styles.push({
-      selector: `edge.${kind}`,
-      style: {
-        "line-style": s.lineStyle,
-        "line-color": s.color,
-        "target-arrow-color": s.color,
-        "opacity": s.opacity,
-        "width": s.width
-      }
+  findings.innerHTML = visibleFindings.map((finding) => {
+    const metricChips = buildFindingMetricChips(finding).map((chip) => `<span class="analysis-metric-chip">${escapeHtml(chip)}</span>`).join("");
+    const fileBadges = finding.files.slice(0, 3).map((file) => `<span class="analysis-file-badge">${escapeHtml(file)}</span>`).join("");
+    const rationale = finding.rationale.slice(0, 2).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
+    return `
+      <article class="analysis-finding" data-finding-id="${escapeHtml(finding.id)}">
+        <div class="analysis-finding-header">
+          <div>
+            <h3 class="analysis-finding-title">${escapeHtml(finding.title)}</h3>
+          </div>
+          <div class="analysis-finding-meta">
+            <span class="analysis-type-badge">${escapeHtml(findingTypeLabel(finding.type))}</span>
+            <span class="analysis-severity-badge ${escapeHtml(finding.severity)}">${escapeHtml(findingSeverityLabel(finding.severity))}</span>
+          </div>
+        </div>
+        <p class="analysis-finding-summary">${escapeHtml(finding.summary)}</p>
+        <div class="analysis-chip-row">${metricChips}</div>
+        ${fileBadges ? `<div class="analysis-file-row">${fileBadges}</div>` : ""}
+        ${rationale ? `<ul class="analysis-rationale">${rationale}</ul>` : ""}
+        <div class="analysis-finding-actions">
+          <button class="header-btn analysis-select-btn" type="button">Inspect in graph</button>
+          <button class="header-btn analysis-explain-btn" type="button">Explain this finding</button>
+        </div>
+        <div class="analysis-explanation hidden">
+          <div class="analysis-explanation-label">AI interpretation</div>
+          <div class="analysis-explanation-note">Advisory explanation grounded in the deterministic finding and affected symbols.</div>
+          <div class="detail-explain-content analysis-explanation-content"></div>
+        </div>
+      </article>
+    `;
+  }).join("");
+  findings.querySelectorAll(".analysis-finding").forEach((el) => {
+    el.addEventListener("click", () => {
+      const id = el.dataset.findingId || "";
+      void selectAnalysisFinding(id);
     });
+  });
+  findings.querySelectorAll(".analysis-select-btn").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const parent = button.closest(".analysis-finding");
+      const id = parent?.dataset.findingId || "";
+      void selectAnalysisFinding(id);
+    });
+  });
+  findings.querySelectorAll(".analysis-explain-btn").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const parent = button.closest(".analysis-finding");
+      if (!parent) return;
+      const id = parent.dataset.findingId || "";
+      void explainAnalysisFinding(id, parent);
+    });
+  });
+}
+function setActiveFindingCard(findingId) {
+  const { findings } = getAnalysisPanelEls();
+  findings.querySelectorAll(".analysis-finding").forEach((el) => {
+    el.classList.toggle("active", el.dataset.findingId === findingId);
+  });
+}
+function setAnalysisFilter(filter) {
+  const nextFilter = activeAnalysisFilter === filter ? "all" : filter;
+  activeAnalysisFilter = nextFilter;
+  if (!analysisReport) {
+    return;
+  }
+  const visibleFindings = filterFindings(analysisReport.findings, activeAnalysisFilter);
+  if (activeAnalysisFindingId && !visibleFindings.some((finding) => finding.id === activeAnalysisFindingId)) {
+    activeAnalysisFindingId = null;
+  }
+  renderAnalysisSummary(analysisReport);
+  renderAnalysisFindings(analysisReport);
+  refreshAnalysisGraphState();
+  setActiveFindingCard(activeAnalysisFindingId);
+}
+async function runStructuralAnalysis() {
+  const { panel, findings } = getAnalysisPanelEls();
+  panel.classList.remove("hidden");
+  findings.innerHTML = '<div class="analysis-empty">Running structural analysis on the current dependency graph...</div>';
+  setAnalysisStatus("Analyzing the current graph snapshot...");
+  try {
+    const res = await fetch("/api/analysis");
+    if (!res.ok) {
+      throw new Error(res.status === 404 ? "No project index available for analysis yet." : `Analysis request failed (${res.status})`);
+    }
+    const report = await res.json();
+    analysisReport = report;
+    activeAnalysisFindingId = null;
+    activeAnalysisFilter = "all";
+    analysisExplanationCache.clear();
+    clearAnalysisStatus();
+    setAnalysisStatus(
+      `Analyzed ${report.summary.symbolCount} symbols across ${report.summary.fileCount} files. These are graph-derived structural signals.`
+    );
+    renderAnalysisSummary(report);
+    renderAnalysisFindings(report);
+    refreshAnalysisGraphState();
+  } catch (error) {
+    analysisReport = null;
+    activeAnalysisFindingId = null;
+    activeAnalysisFilter = "all";
+    analysisExplanationCache.clear();
+    clearAnalysisGraphClasses();
+    getAnalysisPanelEls().summary.innerHTML = "";
+    const message = error instanceof Error ? error.message : "Failed to run structural analysis.";
+    findings.innerHTML = `<div class="analysis-empty">${escapeHtml(message)}</div>`;
+    setAnalysisStatus(message, "error");
+  }
+}
+async function streamExplanationInto(request, content, loadingLabel, unavailableText, failureText, onComplete) {
+  content.innerHTML = `<span class="explain-status"><span class="explain-spinner"></span> ${escapeHtml(loadingLabel)}</span>`;
+  let streaming = false;
+  let rawText = "";
+  function showToolStatus(toolName, input) {
+    if (streaming) return;
+    const arg = input.name || input.path || input.symbol || input.query || "";
+    content.innerHTML = `<span class="explain-status"><span class="explain-spinner"></span> ${escapeHtml(toolName)}(${escapeHtml(String(arg))})</span>`;
+  }
+  function startStreaming() {
+    if (streaming) return;
+    streaming = true;
+    rawText = "";
+    content.textContent = "";
+  }
+  function finalize() {
+    if (!rawText) return;
+    onComplete?.(rawText);
+    renderMarkdownInto(content, rawText);
+  }
+  try {
+    const res = await request();
+    if (!res.ok || !res.body) {
+      content.textContent = unavailableText;
+      return;
+    }
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        const payload = line.slice(6);
+        if (payload === "[DONE]") {
+          finalize();
+          return;
+        }
+        try {
+          const event = JSON.parse(payload);
+          if (event.type === "tool_call_start") {
+            showToolStatus(event.name, event.input || {});
+          } else if (event.type === "streaming_chunk" && event.content) {
+            startStreaming();
+            rawText += event.content;
+            content.textContent = rawText;
+            content.scrollTop = content.scrollHeight;
+          } else if (event.type === "error") {
+            startStreaming();
+            rawText += `
+[Error: ${event.message}]`;
+            content.textContent = rawText;
+          }
+        } catch {
+        }
+      }
+    }
+    finalize();
+  } catch {
+    if (!streaming) {
+      content.textContent = failureText;
+    } else {
+      finalize();
+    }
+  }
+}
+async function selectAnalysisFinding(findingId) {
+  if (!analysisReport || !cy) return;
+  const finding = analysisReport.findings.find((item) => item.id === findingId);
+  if (!finding) return;
+  const beforeNodeCount = cy.nodes().length;
+  for (const symbol of finding.symbols) {
+    addNodeNeighborhood(symbol, 1);
+  }
+  connectExistingNodes();
+  activeAnalysisFindingId = findingId;
+  refreshAnalysisGraphState();
+  setActiveFindingCard(findingId);
+  const afterNodeCount = cy.nodes().length;
+  if (afterNodeCount > beforeNodeCount) {
+    runLayout();
+  }
+  const primarySymbol = finding.symbols[0];
+  if (!primarySymbol) return;
+  const primaryNode = cy.getElementById(primarySymbol);
+  if (primaryNode.length > 0) {
+    if (finding.symbols.length > 1) {
+      cy.fit(80);
+    } else {
+      cy.animate({ center: { eles: primaryNode }, zoom: 1.35 }, { duration: 300 });
+    }
+    primaryNode.flashClass("highlighted", 1200);
+    await showDetail(primaryNode, document.getElementById("symbol-detail"));
+  }
+}
+async function explainAnalysisFinding(findingId, findingEl) {
+  await selectAnalysisFinding(findingId);
+  const explanationEl = findingEl.querySelector(".analysis-explanation");
+  const contentEl = findingEl.querySelector(".analysis-explanation-content");
+  if (!explanationEl || !contentEl) return;
+  explanationEl.classList.remove("hidden");
+  const cached = analysisExplanationCache.get(findingId);
+  if (cached) {
+    renderMarkdownInto(contentEl, cached);
+    return;
+  }
+  if (findingEl.dataset.explaining === "true") {
+    return;
+  }
+  findingEl.dataset.explaining = "true";
+  try {
+    await streamExplanationInto(
+      () => fetch("/api/analysis/explain", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ findingId })
+      }),
+      contentEl,
+      "Interpreting deterministic finding...",
+      "(analysis explanation unavailable)",
+      "(analysis explanation failed)",
+      (markdown) => {
+        if (!markdown.includes("[Error:")) {
+          analysisExplanationCache.set(findingId, markdown);
+        }
+      }
+    );
+  } finally {
+    delete findingEl.dataset.explaining;
   }
-  styles.push({ selector: "node.pinned", style: { "border-color": "#e0af68", "border-width": 3 } });
-  styles.push({ selector: "node.faded", style: { "opacity": 0.15 } });
-  styles.push({ selector: "edge.faded", style: { "opacity": 0.05 } });
-  styles.push({ selector: "node.highlighted", style: { "border-width": 2.5, "z-index": 10 } });
-  styles.push({ selector: "edge.highlighted", style: { "opacity": 0.9, "width": 2, "z-index": 10 } });
-  styles.push({ selector: "node.agent-pulse", style: { "border-color": "#ff9e64", "border-width": 4, "background-color": "rgba(255,158,100,0.25)" } });
-  styles.push({ selector: "node.search-match", style: { "border-color": "#e0af68", "border-width": 2.5 } });
-  styles.push({ selector: "node.expanded", style: { "border-width": 2.5 } });
-  return styles;
 }
 function setupInteractions(cyInst, detailEl) {
   cyInst.on("tap", "node", function(evt) {
@@ -1514,16 +2054,22 @@ function setupInteractions(cyInst, detailEl) {
       expandNodeAndLayout(id);
     }
   });
+  const containerEl = cyInst.container();
   cyInst.on("mouseover", "node", function(evt) {
     if (!cy) return;
     const node = evt.target;
     const neighborhood = node.closedNeighborhood();
     cy.elements().not(neighborhood).addClass("faded");
     neighborhood.addClass("highlighted");
+    node.addClass("hover-target");
+    containerEl.style.cursor = "pointer";
   });
-  cyInst.on("mouseout", "node", function() {
+  cyInst.on("mouseout", "node", function(evt) {
     if (!cy) return;
+    const node = evt.target;
+    node.removeClass("hover-target");
     cy.elements().removeClass("faded highlighted");
+    containerEl.style.cursor = "";
   });
   cyInst.on("tap", function(evt) {
     if (evt.target === cyInst) {
@@ -1678,7 +2224,7 @@ async function loadDepsAndRefs(name, detailEl) {
       const items = refs.references || refs || [];
       refsEl.innerHTML = items.length ? items.map((r) => {
         const id = typeof r === "string" ? r : r.from || r.qualifiedName || r.name || "";
-        const label = id.split(".").pop() || id;
+        const label = typeof r === "string" ? id : r.name || id.split(".").pop() || id;
         const kind = typeof r === "string" ? "" : r.kind || "";
         return `<a class="detail-link" data-target="${escapeHtml(id)}">${escapeHtml(label)} <span style="opacity:0.5">${escapeHtml(kind)}</span></a>`;
       }).join("") : '<span class="detail-empty">None</span>';
@@ -1744,74 +2290,13 @@ async function explainSymbol(name, detailEl) {
   const section = detailEl.querySelector("#detail-explain");
   const content = section.querySelector(".detail-explain-content");
   section.classList.remove("hidden");
-  content.innerHTML = '<span class="explain-status"><span class="explain-spinner"></span> Researching...</span>';
-  let streaming = false;
-  let rawText = "";
-  function showToolStatus(toolName, input) {
-    if (streaming) return;
-    const arg = input.name || input.path || input.symbol || input.query || "";
-    content.innerHTML = `<span class="explain-status"><span class="explain-spinner"></span> ${escapeHtml(toolName)}(${escapeHtml(String(arg))})</span>`;
-  }
-  function startStreaming() {
-    if (streaming) return;
-    streaming = true;
-    rawText = "";
-    content.textContent = "";
-  }
-  function finalize() {
-    if (rawText) {
-      renderMarkdownInto(content, rawText);
-    }
-  }
-  try {
-    const res = await fetch(`/api/symbols/${encodeURIComponent(name)}/explain`);
-    if (!res.ok || !res.body) {
-      content.textContent = "(explain unavailable)";
-      return;
-    }
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = "";
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split("\n");
-      buffer = lines.pop() || "";
-      for (const line of lines) {
-        if (!line.startsWith("data: ")) continue;
-        const payload = line.slice(6);
-        if (payload === "[DONE]") {
-          finalize();
-          return;
-        }
-        try {
-          const event = JSON.parse(payload);
-          if (event.type === "tool_call_start") {
-            showToolStatus(event.name, event.input || {});
-          } else if (event.type === "streaming_chunk" && event.content) {
-            startStreaming();
-            rawText += event.content;
-            content.textContent = rawText;
-            content.scrollTop = content.scrollHeight;
-          } else if (event.type === "error") {
-            startStreaming();
-            rawText += `
-[Error: ${event.message}]`;
-            content.textContent = rawText;
-          }
-        } catch {
-        }
-      }
-    }
-    finalize();
-  } catch {
-    if (!streaming) {
-      content.textContent = "(explain failed)";
-    } else {
-      finalize();
-    }
-  }
+  await streamExplanationInto(
+    () => fetch(`/api/symbols/${encodeURIComponent(name)}/explain`),
+    content,
+    "Researching...",
+    "(explain unavailable)",
+    "(explain failed)"
+  );
 }
 async function togglePin(name, node, btnEl) {
   const wasPinned = pinnedNames.has(name);
@@ -1838,9 +2323,13 @@ async function togglePin(name, node, btnEl) {
 }
 function setupToolbar() {
   const searchInput = document.getElementById("graph-search");
+  const analyzeBtn = document.getElementById("graph-analyze");
   const fitBtn = document.getElementById("graph-fit");
   const relayoutBtn = document.getElementById("graph-relayout");
   const clearBtn = document.getElementById("graph-clear");
+  const analysisCloseBtn = document.getElementById("analysis-close");
+  const analysisRerunBtn = document.getElementById("analysis-rerun");
+  const analysisPanel = document.getElementById("analysis-panel");
   let searchTimeout;
   const dropdown = document.createElement("div");
   dropdown.className = "search-dropdown hidden";
@@ -1875,17 +2364,15 @@ function setupToolbar() {
     dropdown.querySelectorAll(".search-result").forEach((el) => {
       el.addEventListener("click", () => {
         const id = el.dataset.id || "";
-        expandNodeAndLayout(id);
         searchInput.value = "";
         dropdown.classList.add("hidden");
-        if (!cy) return;
-        const targetNode = cy.getElementById(id);
-        if (targetNode.length) {
-          setTimeout(() => {
-            cy.animate({ center: { eles: targetNode }, zoom: 1.2 }, { duration: 300 });
-            targetNode.flashClass("highlighted", 1500);
-          }, 350);
-        }
+        void focusSymbolInGraph(id, {
+          maxDegrees: 1,
+          animate: true,
+          zoom: 1.2,
+          flashDuration: 1500,
+          openDetail: true
+        });
       });
     });
   }
@@ -1925,6 +2412,19 @@ function setupToolbar() {
       cy.fit(40);
     }
   });
+  analyzeBtn.addEventListener("click", () => {
+    void runStructuralAnalysis();
+  });
+  analysisRerunBtn.addEventListener("click", () => {
+    void runStructuralAnalysis();
+  });
+  analysisCloseBtn.addEventListener("click", () => {
+    analysisPanel.classList.add("hidden");
+    activeAnalysisFindingId = null;
+    clearAnalysisStatus();
+    clearAnalysisGraphClasses();
+    setActiveFindingCard(null);
+  });
   relayoutBtn.addEventListener("click", () => {
     runLayout();
   });
@@ -1932,6 +2432,9 @@ function setupToolbar() {
     if (!cy) return;
     cy.elements().remove();
     document.getElementById("symbol-detail").classList.add("hidden");
+    const cyEl = document.getElementById("cy");
+    if (cyEl) showOnboardingHint(cyEl);
+    refreshAnalysisGraphState();
   });
 }
 
@@ -1943,15 +2446,33 @@ var sendBtn = document.getElementById("send-btn");
 var cancelBtn = document.getElementById("cancel-btn");
 var statusBadge = document.getElementById("status-badge");
 var modelInfo = document.getElementById("model-info");
+var modelBtn = document.getElementById("model-btn");
+var modelDropdown = document.getElementById("model-dropdown");
+var modelList = document.getElementById("model-list");
 var sessionBtn = document.getElementById("session-btn");
 var sessionDropdown = document.getElementById("session-dropdown");
 var sessionList = document.getElementById("session-list");
+var sessionUpdateRow = document.getElementById("session-update-row");
+var sessionUpdateBtn = document.getElementById("session-update-btn");
 var saveBtn = document.getElementById("save-btn");
 var saveLabelInput = document.getElementById("save-label");
+var contextFill = document.getElementById("context-fill");
+var contextLabel = document.getElementById("context-label");
+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 settingsPath = document.getElementById("settings-path");
+var settingsList = document.getElementById("settings-list");
+var settingsBanner = document.getElementById("settings-banner");
+var settingsSaveBtn = document.getElementById("settings-save");
+var settingsResetBtn = document.getElementById("settings-reset");
 var ws;
 var currentAssistantEl = null;
 var assistantText = "";
 var hadToolCalls = false;
+var settingsPayload = null;
+var activeSavedSession = null;
 var TOOL_RESULT_MAX = 500;
 function connect() {
   const protocol = location.protocol === "https:" ? "wss:" : "ws:";
@@ -1959,6 +2480,7 @@ function connect() {
   ws.onopen = () => {
     setStatus("ready");
     fetchStatus();
+    fetchContext();
   };
   ws.onclose = () => {
     setStatus("error");
@@ -1983,11 +2505,29 @@ function setBusy(busy) {
     setStatus("ready");
   }
 }
+var configOverlay = document.getElementById("config-overlay");
 async function fetchStatus() {
   try {
     const res = await fetch("/api/status");
     const data = await res.json();
-    modelInfo.textContent = `${data.model} \xB7 ${data.provider}`;
+    modelInfo.textContent = data.model || "Select model";
+    modelInfo.classList.toggle("placeholder", !data.model);
+    activeModel = data.model;
+    if (data.needsSetup) {
+      configOverlay.classList.remove("hidden");
+      chatInput.disabled = true;
+      sendBtn.disabled = true;
+      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 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");
+      }
+    } else {
+      configOverlay.classList.add("hidden");
+      chatInput.disabled = false;
+    }
   } catch {
   }
 }
@@ -2067,6 +2607,20 @@ function handleServerMessage(msg) {
     case "busy":
       addMessage("Agent is busy. Please wait for the current turn to finish.", "error");
       break;
+    case "context_status":
+      updateContextIndicator(
+        msg.contextTokens,
+        msg.maxContextTokens
+      );
+      break;
+    case "model_changed": {
+      const changedModel = msg.model;
+      modelInfo.textContent = changedModel || "Select model";
+      modelInfo.classList.toggle("placeholder", !changedModel);
+      activeModel = changedModel;
+      void fetchStatus();
+      break;
+    }
   }
 }
 function addMessage(text, type, markdown = false) {
@@ -2131,6 +2685,27 @@ function finalizeToolCall(name, result, elapsedMs) {
     resultEl.textContent = truncated;
   }
 }
+function updateContextIndicator(contextTokens, maxContextTokens) {
+  const pct = maxContextTokens > 0 ? Math.min(100, Math.round(contextTokens / maxContextTokens * 100)) : 0;
+  contextFill.style.width = pct + "%";
+  contextFill.classList.remove("warn", "critical");
+  if (pct >= 80) {
+    contextFill.classList.add("critical");
+  } else if (pct >= 60) {
+    contextFill.classList.add("warn");
+  }
+  contextLabel.textContent = pct + "%";
+  const indicator = document.getElementById("context-indicator");
+  indicator.title = `Context: ~${contextTokens.toLocaleString()} / ${maxContextTokens.toLocaleString()} tokens (${pct}%)`;
+}
+async function fetchContext() {
+  try {
+    const res = await fetch("/api/context");
+    const data = await res.json();
+    updateContextIndicator(data.contextTokens, data.maxContextTokens);
+  } catch {
+  }
+}
 function addUsageInfo(usage) {
   const el = document.createElement("div");
   el.className = "usage-info";
@@ -2140,6 +2715,227 @@ function addUsageInfo(usage) {
 function scrollToBottom() {
   messagesEl.scrollTop = messagesEl.scrollHeight;
 }
+function closeHeaderMenus() {
+  modelDropdown.classList.add("hidden");
+  sessionDropdown.classList.add("hidden");
+}
+function isSettingsModalOpen() {
+  return !settingsModal.classList.contains("hidden");
+}
+function formatSettingsValue(value) {
+  return value === null ? "(unset)" : String(value);
+}
+function setSettingsBanner(message, tone) {
+  settingsBanner.textContent = message;
+  settingsBanner.className = `settings-banner ${tone}`;
+}
+function clearSettingsBanner() {
+  settingsBanner.textContent = "";
+  settingsBanner.className = "settings-banner hidden";
+}
+function createSettingsControl(entry, inputId) {
+  const value = entry.persistedValue;
+  if (entry.type === "boolean") {
+    const select = document.createElement("select");
+    select.id = inputId;
+    select.className = "settings-select";
+    select.dataset.settingKey = entry.key;
+    select.innerHTML = `
+      <option value="">Use default</option>
+      <option value="true">True</option>
+      <option value="false">False</option>
+    `;
+    select.value = value === null ? "" : String(value);
+    select.disabled = entry.overriddenByEnv;
+    return select;
+  }
+  if (entry.type === "enum") {
+    const select = document.createElement("select");
+    select.id = inputId;
+    select.className = "settings-select";
+    select.dataset.settingKey = entry.key;
+    const unsetOption = document.createElement("option");
+    unsetOption.value = "";
+    unsetOption.textContent = "Use default";
+    select.appendChild(unsetOption);
+    for (const optionValue of entry.values ?? []) {
+      const option = document.createElement("option");
+      option.value = optionValue;
+      option.textContent = optionValue;
+      select.appendChild(option);
+    }
+    select.value = value === null ? "" : String(value);
+    select.disabled = entry.overriddenByEnv;
+    return select;
+  }
+  const input = document.createElement("input");
+  input.id = inputId;
+  input.className = "settings-control";
+  input.dataset.settingKey = entry.key;
+  input.type = entry.type === "number" ? "number" : "text";
+  if (entry.type === "number") {
+    input.step = "any";
+    input.inputMode = "numeric";
+  }
+  input.placeholder = "Use default";
+  input.value = value === null ? "" : String(value);
+  input.disabled = entry.overriddenByEnv;
+  return input;
+}
+function renderSettings() {
+  if (!settingsPayload) {
+    return;
+  }
+  settingsPath.textContent = settingsPayload.configPath;
+  settingsList.innerHTML = "";
+  for (const entry of settingsPayload.entries) {
+    const item = document.createElement("section");
+    item.className = "settings-item";
+    if (entry.overriddenByEnv) {
+      item.classList.add("is-disabled");
+    }
+    const header = document.createElement("div");
+    header.className = "settings-item-header";
+    const heading = document.createElement("div");
+    const title = document.createElement("div");
+    title.className = "settings-item-title";
+    title.textContent = entry.key;
+    const description = document.createElement("div");
+    description.className = "settings-item-description";
+    description.textContent = entry.description;
+    heading.append(title, description);
+    const badges = document.createElement("div");
+    badges.className = "settings-item-badges";
+    const envBadge = document.createElement("span");
+    envBadge.className = "settings-badge env";
+    envBadge.textContent = `Env: ${entry.envVar}`;
+    badges.appendChild(envBadge);
+    if (entry.overriddenByEnv) {
+      const overrideBadge = document.createElement("span");
+      overrideBadge.className = "settings-badge override";
+      overrideBadge.textContent = "Env override active";
+      badges.appendChild(overrideBadge);
+    }
+    header.append(heading, badges);
+    const meta = document.createElement("div");
+    meta.className = "settings-item-meta";
+    meta.innerHTML = `
+      <div class="settings-meta-block">
+        <span class="settings-meta-label">Effective</span>
+        <div class="settings-meta-value">${escapeHtml(formatSettingsValue(entry.effectiveValue))}</div>
+      </div>
+      <div class="settings-meta-block">
+        <span class="settings-meta-label">Saved</span>
+        <div class="settings-meta-value">${escapeHtml(formatSettingsValue(entry.persistedValue))}</div>
+      </div>
+    `;
+    const controls = document.createElement("div");
+    controls.className = "settings-item-controls";
+    const inputId = `setting-${entry.key}`;
+    const label = document.createElement("label");
+    label.className = "settings-help";
+    label.htmlFor = inputId;
+    label.textContent = "Saved in your global minicode config";
+    const control = createSettingsControl(entry, inputId);
+    controls.append(label, control);
+    if (entry.overriddenByEnv) {
+      const overrideHelp = document.createElement("div");
+      overrideHelp.className = "settings-help settings-help-warning";
+      overrideHelp.textContent = entry.envSource === "home-dotenv" && entry.envSourcePath ? `Defined by ${entry.envVar} in ${entry.envSourcePath}. Update or remove that env var there to manage this setting here.` : `${entry.envVar} is currently defined by the running environment. Remove or update that env var to manage this setting here.`;
+      controls.appendChild(overrideHelp);
+    }
+    item.append(header, meta, controls);
+    settingsList.appendChild(item);
+  }
+  updateSettingsActions();
+}
+async function loadSettings() {
+  settingsList.innerHTML = '<div class="dropdown-empty">Loading settings...</div>';
+  settingsSaveBtn.disabled = true;
+  settingsResetBtn.disabled = true;
+  settingsSaveBtn.textContent = "Save settings";
+  clearSettingsBanner();
+  try {
+    const res = await fetch("/api/config");
+    if (!res.ok) {
+      throw new Error(`Failed to load settings (${res.status})`);
+    }
+    const data = await res.json();
+    settingsPayload = data.settings;
+    renderSettings();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to load settings";
+    settingsList.innerHTML = '<div class="dropdown-empty">Failed to load settings</div>';
+    setSettingsBanner(message, "error");
+  }
+}
+function readSettingsControlValue(entry) {
+  const control = settingsList.querySelector(`[data-setting-key="${entry.key}"]`);
+  if (!control) {
+    throw new Error(`Missing control for ${entry.key}`);
+  }
+  if (entry.type === "boolean" || entry.type === "enum") {
+    const value = control.value.trim();
+    return value === "" ? null : entry.type === "boolean" ? value === "true" : value;
+  }
+  const rawValue = control.value.trim();
+  if (rawValue === "") {
+    return null;
+  }
+  if (entry.type === "number") {
+    const parsed = Number(rawValue);
+    if (!Number.isFinite(parsed)) {
+      throw new Error(`Expected a number for "${entry.key}".`);
+    }
+    return parsed;
+  }
+  return rawValue;
+}
+function collectSettingsUpdates() {
+  if (!settingsPayload) {
+    return {};
+  }
+  const updates = {};
+  for (const entry of settingsPayload.entries) {
+    const nextValue = readSettingsControlValue(entry);
+    const baseline = entry.persistedValue;
+    if (nextValue !== baseline) {
+      updates[entry.key] = nextValue;
+    }
+  }
+  return updates;
+}
+function updateSettingsActions() {
+  if (!settingsPayload) {
+    settingsSaveBtn.disabled = true;
+    settingsResetBtn.disabled = true;
+    settingsSaveBtn.textContent = "Save settings";
+    return;
+  }
+  try {
+    const changeCount = Object.keys(collectSettingsUpdates()).length;
+    settingsSaveBtn.disabled = changeCount === 0;
+    settingsResetBtn.disabled = changeCount === 0;
+    settingsSaveBtn.textContent = changeCount === 0 ? "Save settings" : `Save ${changeCount} change${changeCount === 1 ? "" : "s"}`;
+  } catch {
+    settingsSaveBtn.disabled = true;
+    settingsResetBtn.disabled = false;
+    settingsSaveBtn.textContent = "Save settings";
+  }
+}
+function openSettings() {
+  closeHeaderMenus();
+  settingsModal.classList.remove("hidden");
+  settingsModal.setAttribute("aria-hidden", "false");
+  document.body.classList.add("modal-open");
+  void loadSettings();
+}
+function closeSettings() {
+  settingsModal.classList.add("hidden");
+  settingsModal.setAttribute("aria-hidden", "true");
+  document.body.classList.remove("modal-open");
+  clearSettingsBanner();
+}
 chatForm.addEventListener("submit", (e) => {
   e.preventDefault();
   const message = chatInput.value.trim();
@@ -2162,10 +2958,57 @@ chatInput.addEventListener("keydown", (e) => {
     chatForm.dispatchEvent(new Event("submit"));
   }
 });
+var activeModel = "";
+modelBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  const isOpen = !modelDropdown.classList.contains("hidden");
+  modelDropdown.classList.toggle("hidden");
+  sessionDropdown.classList.add("hidden");
+  if (!isOpen) {
+    refreshModelList();
+  }
+});
+document.addEventListener("click", (e) => {
+  if (!modelDropdown.contains(e.target) && e.target !== modelBtn) {
+    modelDropdown.classList.add("hidden");
+  }
+});
+async function refreshModelList() {
+  try {
+    const res = await fetch("/api/models");
+    const data = await res.json();
+    activeModel = data.activeModel;
+    if (!data.models || data.models.length === 0) {
+      modelList.innerHTML = '<div class="dropdown-empty">No models available</div>';
+      return;
+    }
+    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));
+      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();
+}
 sessionBtn.addEventListener("click", (e) => {
   e.stopPropagation();
   const isOpen = !sessionDropdown.classList.contains("hidden");
   sessionDropdown.classList.toggle("hidden");
+  modelDropdown.classList.add("hidden");
   if (!isOpen) {
     refreshSessionList();
   }
@@ -2176,7 +3019,9 @@ document.addEventListener("click", (e) => {
   }
 });
 saveBtn.addEventListener("click", async () => {
-  const label = saveLabelInput.value.trim() || void 0;
+  const requestedLabel = saveLabelInput.value.trim();
+  const label = requestedLabel || activeSavedSession?.label || void 0;
+  const isUpdatingCurrentSession = !!activeSavedSession && (requestedLabel.length === 0 || requestedLabel === activeSavedSession.label);
   try {
     const res = await fetch("/api/sessions/save", {
       method: "POST",
@@ -2186,8 +3031,11 @@ saveBtn.addEventListener("click", async () => {
     if (res.ok) {
       const data = await res.json();
       saveLabelInput.value = "";
-      addMessage(`Session saved: "${data.label}"`, "thinking");
-      refreshSessionList();
+      addMessage(
+        `${isUpdatingCurrentSession ? "Session updated" : "Session saved"}: "${data.label}"`,
+        "thinking"
+      );
+      void refreshSessionList();
     }
   } catch {
   }
@@ -2203,6 +3051,16 @@ async function refreshSessionList() {
     const res = await fetch("/api/sessions");
     const data = await res.json();
     const sessions = data.sessions;
+    activeSavedSession = sessions.find((session) => session.id === data.currentSessionId) ?? null;
+    if (activeSavedSession) {
+      sessionUpdateRow.classList.remove("hidden");
+      sessionUpdateBtn.textContent = `Update "${activeSavedSession.label}"`;
+      sessionUpdateBtn.title = `Save changes back to "${activeSavedSession.label}"`;
+    } else {
+      sessionUpdateRow.classList.add("hidden");
+      sessionUpdateBtn.textContent = "Update current saved session";
+      sessionUpdateBtn.title = "";
+    }
     if (!sessions || sessions.length === 0) {
       sessionList.innerHTML = '<div class="dropdown-empty">No saved sessions</div>';
       return;
@@ -2210,12 +3068,15 @@ async function refreshSessionList() {
     sessionList.innerHTML = "";
     for (const s of sessions) {
       const el = document.createElement("div");
-      el.className = "session-item";
-      el.innerHTML = `<span class="session-label">${escapeHtml(s.label)}</span><span class="session-meta">${s.messageCount} msgs</span>`;
+      const isActive = activeSavedSession?.id === s.id;
+      el.className = "session-item" + (isActive ? " active" : "");
+      el.innerHTML = `<span class="session-label">${escapeHtml(s.label)}</span><span class="session-meta">${s.messageCount} msgs${isActive ? ' <span class="session-active-badge">\u2022 active</span>' : ""}</span>`;
       el.addEventListener("click", () => loadSession(s.label));
       sessionList.appendChild(el);
     }
   } catch {
+    activeSavedSession = null;
+    sessionUpdateRow.classList.add("hidden");
     sessionList.innerHTML = '<div class="dropdown-empty">Failed to load sessions</div>';
   }
 }
@@ -2230,10 +3091,97 @@ async function loadSession(label) {
       sessionDropdown.classList.add("hidden");
       messagesEl.innerHTML = "";
       addMessage(`Session "${label}" restored`, "thinking");
+      void refreshSessionList();
     }
   } catch {
   }
 }
+sessionUpdateBtn.addEventListener("click", async () => {
+  if (!activeSavedSession) {
+    return;
+  }
+  try {
+    sessionUpdateBtn.disabled = true;
+    const res = await fetch("/api/sessions/save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ label: activeSavedSession.label })
+    });
+    if (res.ok) {
+      const data = await res.json();
+      addMessage(`Session updated: "${data.label}"`, "thinking");
+      await refreshSessionList();
+    }
+  } catch {
+  } finally {
+    sessionUpdateBtn.disabled = false;
+  }
+});
+settingsBtn.addEventListener("click", () => {
+  openSettings();
+});
+settingsCloseBtn.addEventListener("click", () => {
+  closeSettings();
+});
+settingsBackdrop.addEventListener("click", () => {
+  closeSettings();
+});
+settingsResetBtn.addEventListener("click", () => {
+  clearSettingsBanner();
+  renderSettings();
+});
+settingsSaveBtn.addEventListener("click", async () => {
+  if (!settingsPayload) {
+    return;
+  }
+  let updates;
+  try {
+    updates = collectSettingsUpdates();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to read settings";
+    setSettingsBanner(message, "error");
+    return;
+  }
+  if (Object.keys(updates).length === 0) {
+    setSettingsBanner("No changes to save.", "info");
+    return;
+  }
+  settingsSaveBtn.disabled = true;
+  settingsSaveBtn.textContent = "Saving...";
+  try {
+    const res = await fetch("/api/config", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        updates
+      })
+    });
+    const body = await res.json();
+    if (!res.ok) {
+      throw new Error("error" in body ? body.error : `Failed to save settings (${res.status})`);
+    }
+    settingsPayload = body.settings;
+    renderSettings();
+    setSettingsBanner(body.message, "success");
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to save settings";
+    setSettingsBanner(message, "error");
+    updateSettingsActions();
+  }
+});
+settingsList.addEventListener("input", () => {
+  clearSettingsBanner();
+  updateSettingsActions();
+});
+settingsList.addEventListener("change", () => {
+  clearSettingsBanner();
+  updateSettingsActions();
+});
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && isSettingsModalOpen()) {
+    closeSettings();
+  }
+});
 var chatPane = document.getElementById("chat-pane");
 var divider = document.getElementById("pane-divider");
 divider.addEventListener("mousedown", (e) => {