Fix drift sync: per-window verdicts, forgiving class match, event-driven status bar

Three independent defects made the focus state feel flaky and let the OS
status bar disagree with the web UI:

- Status file lagged the web by up to a minute: it rendered only on a 60s
  ticker with no hook into state changes. notify() now fans out to multiple
  listeners (AddOnChange) and the writer has a coalesced Wake() so drift
  reaches the bar as promptly as the browser.

- A brief off-task visit could latch drift for the whole session. Sibling
  windows of one app (a browser's reading tab vs its chat tab) share a window
  class, but the judge verdict was cached by class alone, so one tab's verdict
  poisoned the rest and never re-judged. Cache is now keyed by class + scrubbed
  title (judgedWindows) so siblings are judged independently.

- Allowed-class matching was exact equality, so a short token ("brave") never
  matched the real WM_CLASS ("Brave-browser") and every window was routed to
  the LLM. Matching is now substring-based, and planning surfaces the live
  window class with a click-to-add chip so users pick a token that matches.

Also fix the planning checkbox alignment: the global full-width input rule was
stretching the "Enforce focus" checkbox; scope it out for checkboxes.

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

internal/web/static/app.css

@@ -73,6 +73,12 @@ input {
   border-radius: 8px; color: var(--ink); font: inherit;
 }
 input:focus { outline: 0; border-color: var(--accent); }
+/* Checkboxes must opt out of the full-width text-input styling above, which
+   otherwise stretches the box across the row and shoves its label adrift. */
+input[type="checkbox"] {
+  width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--accent);
+}
+.enforce-toggle { justify-content: flex-start; }
 
 .btn {
   margin-top: 16px; padding: 10px 16px; border: 0; border-radius: 8px;

internal/web/static/app.js

@@ -120,6 +120,24 @@ function updateActiveDrift(state) {
     <span class="status-meta">on task · ${switches} switches</span>`;
 }
 
+// updatePlanningWindowHint shows the live foreground window class so the user
+// can copy the exact token into the allowed-apps field — class names are
+// otherwise invisible, and a non-matching token silently disables on-task
+// matching. Clicking the chip appends the class if not already listed.
+function updatePlanningWindowHint(state) {
+  const el = document.getElementById('appHint');
+  if (!el) return;
+  const cls = state.evidence && state.evidence.current && state.evidence.current.class;
+  if (!cls) { el.innerHTML = ''; return; }
+  el.innerHTML = `current window: <button type="button" class="link" id="addClass">${esc(cls)}</button>`;
+  document.getElementById('addClass').onclick = () => {
+    const apps = document.getElementById('apps');
+    if (!apps) return;
+    const have = apps.value.split(',').map(s => s.trim()).filter(Boolean);
+    if (!have.includes(cls)) { have.push(cls); apps.value = have.join(', '); }
+  };
+}
+
 function updatePlanningCoach(coach) {
   const statusEl = document.getElementById('coachStatus');
   if (!statusEl) return;
@@ -213,6 +231,7 @@ function render(state) {
     updatePlanningTasks(state.tasks);
     updatePlanningKnowledge(state.knowledge);
     updatePlanningReflection(state.reflection);
+    updatePlanningWindowHint(state);
     return;
   }
   if (rs === 'active' && renderedState === 'active') {
@@ -248,6 +267,7 @@ function render(state) {
         <label>Minutes</label><input id="mins" type="number" min="1" value="25">
         <label>Allowed apps (comma-separated window classes)</label>
         <input id="apps" placeholder="e.g. code, firefox">
+        <div id="appHint" class="hint"></div>
         <label class="enforce-toggle"><input id="enforce" type="checkbox"> Enforce focus</label>
         <p class="hint">Minimize off-task windows when you drift.</p>
         <button id="start" class="btn btn-primary" disabled>Start commitment</button>
@@ -272,6 +292,7 @@ function render(state) {
     updatePlanningTasks(state.tasks);
     updatePlanningKnowledge(state.knowledge);
     updatePlanningReflection(state.reflection);
+    updatePlanningWindowHint(state);
 
   } else if (rs === 'active') {
     const c = state.commitment || {};