felixm/antidrift
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(web): ambient banner, snooze/focus actions, settings controls

Browse Source
This commit is contained in:
Felix Martin
2026-06-05 21:51:49 -04:00
parent fa178a1fd2
commit aaed1ad265
5 changed files with 82 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+15
View File
@@ -190,3 +190,18 @@ input[type="checkbox"] {
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.ambient-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 8px 0;
padding: 10px 14px;
border-radius: 10px;
background: #3a2a00;
color: #ffd479;
border: 1px solid #6b4f00;
}
.ambient-banner .ambient-line { font-weight: 600; }
.ambient-banner .ambient-actions { display: flex; gap: 8px; flex-shrink: 0; }
internal/web/static/app.js
+29
View File
@@ -381,10 +381,27 @@ function renderOffscreen(m) {
if (retryBtn) retryBtn.onclick = () => post('/mode/offscreen/start');
}
// updateAmbient shows the always-on drift banner whenever the server reports an
// ambient coaching line, regardless of the active mode. It clears when empty.
function updateAmbient(env) {
const el = document.getElementById('ambientBanner');
const line = (env && env.ambient) || '';
if (!line) { el.hidden = true; el.innerHTML = ''; return; }
el.hidden = false;
el.innerHTML = `<span class="ambient-line">⚠ ${esc(line)}</span>
<span class="ambient-actions">
<button type="button" class="btn btn-ghost" id="ambientSnooze">Snooze 1h</button>
<button type="button" class="btn btn-primary" id="ambientFocus">Start focus</button>
</span>`;
document.getElementById('ambientSnooze').onclick = () => post('/ambient/snooze');
document.getElementById('ambientFocus').onclick = () => post('/mode/focus/start');
}
// route dispatches the state envelope to the active mode's renderer. On a mode
// switch it resets the focus in-place trackers so stale DOM never leaks across.
function route(env) {
const am = (env && env.active_mode) || '';
updateAmbient(env);
if (am !== renderedMode) {
renderedMode = am;
renderedState = null;
@@ -420,6 +437,14 @@ function openSettings() {
<button type="button" class="btn btn-ghost" id="setBrowse">Browse…</button>
</div>
<div id="browsePane" class="browse" hidden></div>
<label>Ambient coach</label>
<select id="setAmbient">
<option value="notify">notify (status + toast)</option>
<option value="status">status only</option>
<option value="off">off</option>
</select>
<label>Ambient check every (seconds)</label>
<input id="setAmbientCadence" type="number" min="30" placeholder="300">
<div id="setError" class="set-error"></div>
<div class="modal-actions">
<button type="button" class="btn btn-ghost" id="setCancel">Cancel</button>
@@ -429,6 +454,8 @@ function openSettings() {
document.getElementById('setBackend').value = s.ai_backend || 'claude';
document.getElementById('setMarvin').value = s.marvin_cmd || '';
document.getElementById('setKnow').value = s.knowledge_path || '';
document.getElementById('setAmbient').value = s.ambient_mode || 'notify';
document.getElementById('setAmbientCadence').value = s.ambient_cadence_secs || 300;
ov.hidden = false;
document.getElementById('setCancel').onclick = closeSettings;
document.getElementById('setSave').onclick = saveSettings;
@@ -454,6 +481,8 @@ function saveSettings() {
ai_backend: document.getElementById('setBackend').value,
marvin_cmd: document.getElementById('setMarvin').value.trim(),
knowledge_path: document.getElementById('setKnow').value.trim(),
ambient_mode: document.getElementById('setAmbient').value,
ambient_cadence_secs: parseInt(document.getElementById('setAmbientCadence').value, 10) || 300,
};
post('/settings', body).then(r => {
if (r.ok) { closeSettings(); return; }
internal/web/static/index.html
+1
View File
@@ -11,6 +11,7 @@
<body>
<main id="app">
<h1>Keel <button id="gear" type="button" class="gear" title="Settings" aria-label="Settings">⚙</button></h1>
<div id="ambientBanner" class="ambient-banner" hidden></div>
<div class="card" id="view">connecting…</div>
<div id="settingsOverlay" class="overlay" hidden></div>
</main>