Add settings gear, overlay, and file-browser modal to the UI
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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); }
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user