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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-01 20:26:24 -04:00
parent 326990d69a
commit ce201c57bb
3 changed files with 142 additions and 5 deletions
@@ -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 = () => {
-    const next = prompt('Profile file path (blank = default):', k.path || '');
-    if (next !== null) post('/knowledge/path', { path: next.trim() });
-  };
+  document.getElementById('knowChange').onclick = openSettings;
 }

 // 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;