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

internal/web/settings_handlers.go

@@ -50,6 +50,14 @@ func (s *Server) handlePostSettings(c *gin.Context) {
 	if req.AWURL == "" {
 		req.AWURL = s.settings.AWURL
 	}
+	// Likewise preserve ambient fields when a caller omits them, so a partial
+	// POST never clobbers a configured ambient dial.
+	if req.AmbientMode == "" {
+		req.AmbientMode = s.settings.AmbientMode
+	}
+	if req.AmbientCadenceSecs <= 0 {
+		req.AmbientCadenceSecs = s.settings.AmbientCadenceSecs
+	}
 	s.settingsMu.Unlock()
 	if apply == nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "settings not wired"})

internal/web/settings_handlers_test.go

@@ -6,8 +6,10 @@ import (
 	"net/http/httptest"
 	"os"
 	"path/filepath"
+	"strings"
 	"testing"
 
+	"keel/internal/harness"
 	"keel/internal/settings"
 )
 
@@ -220,3 +222,30 @@ func TestBrowseBadDirIs400(t *testing.T) {
 		t.Fatalf("status = %d, want 400", w.Code)
 	}
 }
+
+func TestPostSettingsPreservesBlankAmbientFields(t *testing.T) {
+	h := harness.New(harness.Services{}, map[string]harness.Factory{})
+	s := NewServer(h)
+	dir := t.TempDir()
+	path := filepath.Join(dir, "settings.json")
+	current := settings.Settings{AIBackend: "claude", AmbientMode: "status", AmbientCadenceSecs: 120}
+	s.SetSettings(path, current, func(settings.Settings) error { return nil })
+
+	// A POST that omits the ambient fields must not blank them.
+	body := `{"ai_backend":"claude"}`
+	w := httptest.NewRecorder()
+	req := httptest.NewRequest(http.MethodPost, "/settings", strings.NewReader(body))
+	req.Header.Set("Content-Type", "application/json")
+	s.Router().ServeHTTP(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("status = %d body = %s", w.Code, w.Body.String())
+	}
+	saved, err := settings.Load(path)
+	if err != nil {
+		t.Fatalf("load: %v", err)
+	}
+	if saved.AmbientMode != "status" || saved.AmbientCadenceSecs != 120 {
+		t.Fatalf("ambient fields not preserved: mode=%q cadence=%d", saved.AmbientMode, saved.AmbientCadenceSecs)
+	}
+}

internal/web/static/app.css

@@ -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

@@ -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

@@ -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>