Add settings gear, overlay, and file-browser modal to the UI

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

internal/web/static/app.css

@@ -127,3 +127,46 @@ input:focus { outline: 0; border-color: var(--accent); }
 .enforce-note { opacity: 0.8; font-size: 0.85em; }
 .enforce-toggle { display: flex; align-items: center; gap: 0.4em; }
 .hint { opacity: 0.7; font-size: 0.85em; margin: 0.2em 0 0.6em; }
+
+/* Settings: header gear + overlay modal */
+.gear {
+  background: none; border: 0; color: var(--ink-dim); cursor: pointer;
+  font-size: 14px; padding: 0 4px; vertical-align: middle;
+}
+.gear:hover { color: var(--accent); }
+
+.overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,.5);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding: 8vh 16px; z-index: 10;
+}
+.overlay[hidden] { display: none; }
+.modal {
+  width: 100%; max-width: 520px; background: var(--panel);
+  border: 1px solid var(--line); border-radius: 14px; padding: 20px;
+}
+.modal h2 { margin: 0 0 12px; font-size: 16px; }
+.modal-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }
+.modal-actions .btn { margin-top: 0; }
+.path-row { display: flex; gap: 8px; align-items: center; }
+.path-row input { flex: 1; }
+.path-row .btn { margin-top: 0; white-space: nowrap; }
+.set-error { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 1em; }
+
+.browse {
+  margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
+  background: var(--bg); max-height: 260px; overflow-y: auto;
+}
+.browse[hidden] { display: none; }
+.browse-dir {
+  padding: 8px 10px; font-size: 12px; color: var(--ink-dim);
+  font-family: ui-monospace, monospace; border-bottom: 1px solid var(--line);
+  position: sticky; top: 0; background: var(--bg);
+}
+.browse-list { list-style: none; margin: 0; padding: 4px 0; }
+.browse-list button {
+  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
+  color: var(--ink); font: inherit; font-size: 13px; padding: 5px 12px;
+  font-family: ui-monospace, monospace;
+}
+.browse-list button:hover { background: var(--line); color: var(--accent); }

internal/web/static/app.js

@@ -181,10 +181,7 @@ function updatePlanningKnowledge(k) {
   else line = 'profile unreadable';
   el.innerHTML =
     `<span class="knowline meta">${line}</span> <button type="button" class="link" id="knowChange">change</button>`;
-  document.getElementById('knowChange').onclick = () => {
+  document.getElementById('knowChange').onclick = openSettings;
-    const next = prompt('Profile file path (blank = default):', k.path || '');
-    if (next !== null) post('/knowledge/path', { path: next.trim() });
-  };
 }
 
 // reflectionBlock renders the reviewer's recap on the Review screen. idle/nil or
@@ -314,3 +311,99 @@ function render(state) {
 const es = new EventSource('/events');
 es.onmessage = (e) => render(JSON.parse(e.data));
 es.onerror = () => { view.textContent = 'disconnected — is antidriftd running?'; };
+
+// ---- Settings overlay ----
+function openSettings() {
+  fetch('/settings').then(r => r.json()).then(s => {
+    const ov = document.getElementById('settingsOverlay');
+    ov.innerHTML = `
+      <div class="modal">
+        <h2>Settings</h2>
+        <label>AI backend</label>
+        <select id="setBackend">
+          <option value="claude">claude</option>
+          <option value="codex">codex</option>
+        </select>
+        <label>Marvin tasks command</label>
+        <input id="setMarvin" placeholder="uv run am">
+        <label>Knowledge profile path</label>
+        <div class="path-row">
+          <input id="setKnow" placeholder="~/.antidrift/knowledge.md">
+          <button type="button" class="btn btn-ghost" id="setBrowse">Browse…</button>
+        </div>
+        <div id="browsePane" class="browse" hidden></div>
+        <div id="setError" class="set-error"></div>
+        <div class="modal-actions">
+          <button type="button" class="btn btn-ghost" id="setCancel">Cancel</button>
+          <button type="button" class="btn btn-primary" id="setSave">Save</button>
+        </div>
+      </div>`;
+    document.getElementById('setBackend').value = s.ai_backend || 'claude';
+    document.getElementById('setMarvin').value = s.marvin_cmd || '';
+    document.getElementById('setKnow').value = s.knowledge_path || '';
+    ov.hidden = false;
+    document.getElementById('setCancel').onclick = closeSettings;
+    document.getElementById('setSave').onclick = saveSettings;
+    document.getElementById('setBrowse').onclick = () =>
+      loadBrowse(parentDir(document.getElementById('setKnow').value));
+  });
+}
+
+function closeSettings() {
+  const ov = document.getElementById('settingsOverlay');
+  ov.hidden = true;
+  ov.innerHTML = '';
+}
+
+function saveSettings() {
+  const body = {
+    ai_backend: document.getElementById('setBackend').value,
+    marvin_cmd: document.getElementById('setMarvin').value.trim(),
+    knowledge_path: document.getElementById('setKnow').value.trim(),
+  };
+  post('/settings', body).then(r => {
+    if (r.ok) { closeSettings(); return; }
+    return r.json().then(e => {
+      document.getElementById('setError').textContent = e.error || 'save failed';
+    });
+  });
+}
+
+function parentDir(path) {
+  if (!path) return '';
+  return path.replace(/\/[^/]*$/, '');
+}
+
+function loadBrowse(dir) {
+  const pane = document.getElementById('browsePane');
+  pane.hidden = false;
+  fetch('/fs/browse?dir=' + encodeURIComponent(dir || '')).then(r => {
+    if (!r.ok) return r.json().then(e => { throw new Error(e.error || 'cannot read directory'); });
+    return r.json();
+  }).then(d => {
+    const items = [];
+    if (d.parent && d.parent !== d.dir) {
+      items.push(`<li><button type="button" data-dir="${d.parent}">../</button></li>`);
+    }
+    for (const e of d.entries) {
+      if (e.is_dir) {
+        items.push(`<li><button type="button" data-dir="${e.path}">${e.name}/</button></li>`);
+      } else {
+        items.push(`<li><button type="button" data-file="${e.path}">${e.name}</button></li>`);
+      }
+    }
+    pane.innerHTML = `<div class="browse-dir">${d.dir}</div><ul class="browse-list">${items.join('')}</ul>`;
+    pane.querySelectorAll('button[data-dir]').forEach(b =>
+      b.onclick = () => loadBrowse(b.getAttribute('data-dir')));
+    pane.querySelectorAll('button[data-file]').forEach(b =>
+      b.onclick = () => {
+        document.getElementById('setKnow').value = b.getAttribute('data-file');
+        pane.hidden = true;
+        pane.innerHTML = '';
+      });
+  }).catch(err => {
+    pane.innerHTML = `<div class="set-error">${err.message}</div>`;
+  });
+}
+
+document.getElementById('gear').onclick = openSettings;

internal/web/static/index.html

@@ -10,8 +10,9 @@
 </head>
 <body>
 <main id="app">
-  <h1>AntiDrift</h1>
+  <h1>AntiDrift <button id="gear" type="button" class="gear" title="Settings" aria-label="Settings">⚙</button></h1>
   <div class="card" id="view">connecting…</div>
+  <div id="settingsOverlay" class="overlay" hidden></div>
 </main>
 <script src="/app.js"></script>
 </body>