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

M4: cockpit HUD with state-driven accent

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Felix Martin
2026-05-31 21:10:03 -04:00
parent 76816ae188
commit f5da12362a
2 changed files with 204 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.js
+95 -55
View File
@@ -1,3 +1,4 @@
const app = document.getElementById('app');
const view = document.getElementById('view');
let countdownTimer = null;
let renderedState = null; // which runtime_state the DOM currently shows
@@ -18,6 +19,21 @@ function fmt(secs) {
return `${m}:${s}`;
}
// stateKey maps server state to the data-state accent bucket. Drift outranks
// a nudge, and a nudge the user already dismissed reverts to plain active.
function stateKey(state) {
const rs = state.runtime_state;
if (rs !== 'active') return rs || 'locked';
const d = state.drift || {};
if (d.status === 'drifting') return 'drift';
if (d.nudge && d.nudge !== dismissedNudge) return 'nudge';
return 'active';
}
function setStateAttr(state) {
app.dataset.state = stateKey(state);
}
function evidenceBlock(ev) {
if (!ev) return '';
const health = ev.available
@@ -27,52 +43,63 @@ function evidenceBlock(ev) {
? `${ev.current.class || '?'} · ${ev.current.title || ''}` : '—';
const rows = (ev.buckets || []).map(b =>
`<li><span>${(b.class || '?')} · ${b.title || ''}</span><span>${fmt(b.seconds)}</span></li>`).join('');
return `<div class="ev">
<div class="now">Now: ${now} &nbsp; ${health}</div>
return `<div class="band evidence">
<div class="now">now ${now} &nbsp; ${health}</div>
<ul class="buckets">${rows}</ul>
<div class="switches">Context switches: ${ev.switch_count || 0}</div>
<div class="switches">context switches: ${ev.switch_count || 0}</div>
</div>`;
}
function updateActiveDrift(drift) {
const el = document.getElementById('drift');
// updateActiveDrift owns the active status band: it renders on-task, nudge,
// drift, or pending content into #statusband and rebinds the buttons.
function updateActiveDrift(state) {
const el = document.getElementById('statusband');
if (!el) return;
const status = drift && drift.status;
if (status === 'drifting') {
el.innerHTML = `<div class="drift">
<div class="drift-title">⚠ Possible drift</div>
<div class="drift-reason">${drift.reason || ''}</div>
<div class="drift-actions">
<button id="refocus" type="button">Back to task</button>
<button id="ontask" type="button" class="secondary">This is on task</button>
<button id="enddrift" type="button" class="secondary">End session</button>
</div></div>`;
setStateAttr(state);
const drift = state.drift || {};
const switches = (state.evidence && state.evidence.switch_count) || 0;
if (drift.status === 'drifting') {
el.className = 'band statusband col';
el.innerHTML = `<div><span class="pill">Drift</span></div>
<div class="drift-reason">${drift.reason || 'This looks off task.'}</div>
<div class="band-actions">
<button id="refocus" type="button" class="btn btn-primary">Back to task</button>
<button id="ontask" type="button" class="btn btn-ghost">This is on task</button>
<button id="enddrift" type="button" class="btn btn-ghost">End session</button>
</div>`;
document.getElementById('refocus').onclick = () => post('/refocus');
document.getElementById('ontask').onclick = () => post('/ontask');
document.getElementById('enddrift').onclick = () => post('/complete');
return;
}
const nudge = (drift && drift.nudge) || '';
const nudge = drift.nudge || '';
if (!nudge) dismissedNudge = null; // trajectory recovered; allow future nudges
if (nudge && nudge !== dismissedNudge) {
el.innerHTML = `<div class="nudge">
<div class="nudge-title">Heads up</div>
el.className = 'band statusband col';
el.innerHTML = `<div><span class="pill">Heads up</span></div>
<div class="nudge-msg">${nudge}</div>
<div class="nudge-actions">
<button id="dismissnudge" type="button">Dismiss</button>
</div></div>`;
<div class="band-actions">
<button id="dismissnudge" type="button" class="btn btn-ghost">Dismiss</button>
</div>`;
document.getElementById('dismissnudge').onclick = () => {
dismissedNudge = nudge;
const e = document.getElementById('drift');
if (e) e.innerHTML = '';
setStateAttr(state);
updateActiveDrift(state);
};
return;
}
if (status === 'pending') {
el.innerHTML = `<div class="drift-hint">checking focus…</div>`;
if (drift.status === 'pending') {
el.className = 'band statusband';
el.innerHTML = `<span class="pill">Active</span><span class="status-meta">checking focus…</span>`;
return;
}
el.innerHTML = '';
el.className = 'band statusband';
el.innerHTML = `<span class="pill">Active</span>
<span class="status-meta">on task · ${switches} switches</span>`;
}
function updatePlanningCoach(coach) {
@@ -83,8 +110,6 @@ function updatePlanningCoach(coach) {
if (coach.status === 'error') { statusEl.textContent = coach.error || 'coach unavailable'; return; }
if (coach.status === 'ready' && coach.proposal) {
statusEl.textContent = 'AI suggestion applied — edit freely.';
// Pre-fill once per ready proposal so later manual edits are not clobbered
// by subsequent SSE ticks (idempotent via the dataset stamp below).
const stamp = JSON.stringify(coach.proposal);
if (statusEl.dataset.applied === stamp) return;
statusEl.dataset.applied = stamp;
@@ -102,34 +127,43 @@ function updatePlanningCoach(coach) {
}
function render(state) {
setStateAttr(state);
const rs = state.runtime_state;
if (rs === 'planning' && renderedState === 'planning') {
updatePlanningCoach(state.coach); // partial update only
updatePlanningCoach(state.coach);
return;
}
if (rs === 'active' && renderedState === 'active') {
updateActiveDrift(state.drift);
updateActiveDrift(state);
return;
}
if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
renderedState = rs;
if (rs === 'locked') {
view.innerHTML = `<span class="pill">Locked</span>
<p class="meta">No active commitment.</p>
<button id="plan">Start planning</button>`;
view.innerHTML = `<div class="band statusband"><span class="pill">Locked</span></div>
<div class="band">
<p class="meta">No active commitment.</p>
<button id="plan" class="btn btn-primary">Start planning</button>
</div>`;
document.getElementById('plan').onclick = () => post('/planning');
} else if (rs === 'planning') {
view.innerHTML = `<span class="pill">Planning</span>
<label>Rough intent</label>
<input id="intent" placeholder="e.g. work on the quarterly report">
<button id="sharpen" type="button">Sharpen</button>
<div id="coachStatus" class="meta"></div>
<label>Next action</label><input id="na" placeholder="What exactly will you do?">
<label>Success condition</label><input id="sc" placeholder="How do you know it's done?">
<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">
<button id="start" disabled>Start commitment</button>`;
view.innerHTML = `<div class="band statusband"><span class="pill">Planning</span></div>
<div class="band">
<label>Rough intent</label>
<input id="intent" placeholder="e.g. work on the quarterly report">
<button id="sharpen" type="button" class="btn btn-ghost">Sharpen</button>
<div id="coachStatus" class="meta"></div>
</div>
<div class="band">
<label>Next action</label><input id="na" placeholder="What exactly will you do?">
<label>Success condition</label><input id="sc" placeholder="How do you know it's done?">
<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">
<button id="start" class="btn btn-primary" disabled>Start commitment</button>
</div>`;
const na = document.getElementById('na'), sc = document.getElementById('sc'),
mins = document.getElementById('mins'), start = document.getElementById('start');
const check = () => { start.disabled = !(na.value.trim() && sc.value.trim() && +mins.value > 0); };
@@ -146,29 +180,35 @@ function render(state) {
if (intent) post('/coach', { intent });
};
updatePlanningCoach(state.coach);
} else if (rs === 'active') {
const c = state.commitment || {};
view.innerHTML = `<span class="pill">Active</span>
<div id="drift"></div>
<div class="timer" id="t">--:--</div>
<div class="action">${c.next_action || ''}</div>
<p class="meta">Done when: ${c.success_condition || ''}</p>
view.innerHTML = `<div class="band statusband" id="statusband"></div>
<div class="band"><div class="timer" id="t">--:--</div></div>
<div class="band">
<div class="action">${c.next_action || ''}</div>
<p class="meta">done when: ${c.success_condition || ''}</p>
</div>
${evidenceBlock(state.evidence)}
<button id="done">Complete</button>`;
<div class="band"><button id="done" class="btn btn-primary">Complete</button></div>`;
document.getElementById('done').onclick = () => post('/complete');
const t = document.getElementById('t');
const tick = () => { t.textContent = fmt((c.deadline_unix_secs || 0) - Date.now() / 1000); };
tick();
countdownTimer = setInterval(tick, 250);
updateActiveDrift(state.drift);
updateActiveDrift(state);
} else if (rs === 'review') {
const c = state.commitment || {};
view.innerHTML = `<span class="pill">Review</span>
<p class="action">Session ended</p>
<p class="meta">${c.next_action || ''}</p>
view.innerHTML = `<div class="band statusband"><span class="pill">Review</span></div>
<div class="band">
<div class="action">Session ended</div>
<p class="meta">${c.next_action || ''}</p>
</div>
${evidenceBlock(state.evidence)}
<button id="end">End</button>`;
<div class="band"><button id="end" class="btn btn-primary">End</button></div>`;
document.getElementById('end').onclick = () => post('/end');
} else {
view.textContent = rs;
}