nexus-prime 7.9.13 → 7.9.15

package/dist/dashboard/app/styles/context-log.css

@@ -0,0 +1,167 @@
+.context-log-shell {
+    display: grid;
+    grid-template-columns: 260px minmax(0, 1fr);
+    gap: 14px;
+    align-items: start;
+}
+
+.context-log-rail,
+.context-log-summary,
+.context-log-row,
+.context-log-decision {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.context-log-rail {
+    padding: 10px;
+    max-height: calc(100vh - 150px);
+    overflow-y: auto;
+}
+
+.context-log-rail-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+}
+
+.context-log-run {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 8px 9px;
+    margin-bottom: 6px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-panel);
+    color: var(--text-muted);
+    text-align: left;
+    cursor: pointer;
+}
+
+.context-log-run.active {
+    border-color: rgba(0,255,136,0.38);
+    background: rgba(0,255,136,0.06);
+    color: var(--text-main);
+}
+
+.context-log-run span,
+.context-log-row-head span {
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+}
+
+.context-log-run small {
+    color: var(--text-dim);
+    font-size: 0.72rem;
+}
+
+.context-log-main {
+    min-width: 0;
+}
+
+.context-log-summary {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(90px, 1fr));
+    gap: 10px;
+    padding: 14px;
+    margin-bottom: 14px;
+}
+
+.context-log-kpi span,
+.context-log-selection span {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.context-log-kpi strong {
+    color: var(--text-main);
+    font-size: 1rem;
+}
+
+.context-log-selection {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.context-log-selection > div,
+.context-log-refs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-width: 0;
+}
+
+.context-log-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    gap: 14px;
+}
+
+.context-log-row,
+.context-log-decision {
+    padding: 10px 12px;
+    margin-bottom: 8px;
+}
+
+.context-log-row-head {
+    display: grid;
+    grid-template-columns: auto auto minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 7px;
+    color: var(--accent);
+}
+
+.context-log-row-head time {
+    justify-self: end;
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+}
+
+.context-log-row p,
+.context-log-decision p {
+    margin: 0 0 8px;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    line-height: 1.45;
+}
+
+.context-log-decision strong {
+    display: block;
+    margin-bottom: 6px;
+    color: var(--text-main);
+    font-size: 0.82rem;
+    line-height: 1.35;
+}
+
+.context-log-empty {
+    color: var(--text-dim);
+    font-size: 0.72rem;
+}
+
+@media (max-width: 980px) {
+    .context-log-shell,
+    .context-log-grid,
+    .context-log-selection {
+        grid-template-columns: 1fr;
+    }
+    .context-log-summary {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}

package/dist/dashboard/app/styles/memory.css

@@ -58,6 +58,51 @@
 }
 .mem-search-row input { flex: 1; border: none; outline: none; font-size: 0.78rem; color: var(--text-main); min-width: 0; }
 .mem-search-row input::placeholder { color: var(--text-dim); }
+.memory-selection-panel {
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-panel);
+}
+.memory-selection-empty {
+    padding: 8px 12px;
+    color: var(--text-dim);
+    font-size: 0.78rem;
+}
+.memory-selection-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 12px 6px;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+}
+.memory-selection-head strong {
+    color: var(--accent);
+    font-family: var(--font-mono);
+}
+.memory-selection-actions,
+.memory-selection-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.memory-selection-chips {
+    padding: 0 12px 8px;
+}
+.memory-code-block {
+    margin: 0 12px 10px;
+    max-height: 180px;
+    overflow: auto;
+    padding: 9px 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: rgba(0,0,0,0.32);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    line-height: 1.45;
+    white-space: pre-wrap;
+}
 #mem-list { max-height: 290px; overflow-y: auto; }
 .mem-item {
     display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
@@ -65,6 +110,24 @@
 }
 .mem-item:last-child { border-bottom: none; }
 .mem-item:hover { background: var(--bg-panel); }
+.mem-item.selected { background: rgba(0,255,136,0.05); }
+.mem-select-btn {
+    flex-shrink: 0;
+    min-width: 62px;
+    padding: 3px 6px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-elevated);
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    cursor: pointer;
+}
+.mem-select-btn.active {
+    color: var(--accent);
+    border-color: rgba(0,255,136,0.32);
+    background: rgba(0,255,136,0.08);
+}
 .tier-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
 .t-working  { background: var(--accent); }
 .t-episodic { background: var(--secondary); }

package/dist/dashboard/app/styles/workforce.css

@@ -145,6 +145,27 @@
 .kc-worker { font-size: 0.65rem; color: var(--text-dim); font-family: var(--font-mono); margin-top: 3px; display: block; }
 .kanban-overflow { font-size: 0.7rem; color: var(--text-dim); text-align: center; padding: 4px; }
 .kanban-empty { color: var(--text-dim); font-size: 0.8rem; padding: 20px; text-align: center; }
+.kanban-empty-panel {
+    min-height: 110px;
+    border: 1px dashed var(--border);
+    border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+.kanban-empty-title {
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    color: var(--text-dim);
+}
+.kanban-empty-sub {
+    max-width: 360px;
+    font-size: 0.74rem;
+    line-height: 1.45;
+    opacity: 0.75;
+}
 
 /* ── Sortie timeline ── */
 .sortie-scroll { display: flex; flex-direction: column; gap: 8px; padding: 10px; }

package/dist/dashboard/app/views/board.js

@@ -49,6 +49,16 @@ function animCounter(id, target) {
 function chipHtml(text, mod='') {
     return `<span class="chip ${esc(mod)}">${esc(String(text))}</span>`;
 }
+function miniListHtml(items, limit = 5) {
+    const arr = Array.isArray(items) ? items.filter(Boolean) : [];
+    if (!arr.length) return '<span class="muted">—</span>';
+    const shown = arr.slice(0, limit).map(item => chipHtml(String(item).replace(/^.*\//, ''))).join('');
+    const more = arr.length > limit ? chipHtml('+' + (arr.length - limit), 'muted') : '';
+    return `<div class="decision-spine-list">${shown}${more}</div>`;
+}
+function decisionSpineUrl(runId) {
+    return '/api/runs/' + encodeURIComponent(runId) + '/decision-spine';
+}
 function catColor(cat) {
     const m = {memory:'#00d4ff',tokens:'#00ff88',runtime:'#ffd14d',pod:'#b05cff',
                shield:'#ff5f57',mcp:'#52525b',clients:'#a1a1aa',system:'#a1a1aa',
@@ -467,16 +477,27 @@ function kcardHtml(c, stage) {
         <div class="kcard-meta">${role}${opBadge}${tok}</div>${tm}</div>`;
 }
 
+function kanbanEmptyHtml(stage) {
+    const copy = {
+        planning: ['No work in flight', 'Run a goal to see decomposition here.'],
+        hiring: ['No hires pending', 'Worker selection appears when a run needs operatives.'],
+        running: ['No active workers', 'Dispatched work appears here while it executes.'],
+        ghostpass: ['No review pending', 'Ghost-pass waits here only when a patch exists.'],
+        done: ['No completed runs yet', 'Finished runs land here with their final state.'],
+    }[stage] || ['No work here', 'This lane will populate when the run reaches it.'];
+    return `<div class="kb-empty">
+        <span class="kb-empty-title">${esc(copy[0])}</span>
+        <span class="kb-empty-sub">${esc(copy[1])}</span>
+    </div>`;
+}
+
 function renderKanban() {
     const cols = buildKanbanCols();
     for (const s of ['planning','hiring','running','ghostpass','done']) {
         const body=$('kb-'+s), cnt=$('kc-'+s); if (!body) continue;
         const cards=cols[s]||[];
         if (cnt) cnt.textContent=String(cards.length);
-        const emptyHtml = s==='planning'
-            ? `<div class="kb-empty"><span class="kb-empty-txt">No work in flight</span></div>`
-            : `<div class="kb-empty"><span class="kb-empty-txt">empty</span></div>`;
-        body.innerHTML = cards.length ? cards.map(c=>kcardHtml(c,s)).join('') : emptyHtml;
+        body.innerHTML = cards.length ? cards.map(c=>kcardHtml(c,s)).join('') : kanbanEmptyHtml(s);
     }
     // Click delegation
     document.querySelectorAll('.kcard[data-runid]').forEach(el => {
@@ -543,14 +564,34 @@ function renderToolHealth() {
 }
 
 /* ── Run drawer helper ── */
+function loadDecisionSpine(runId) {
+    if (!runId) return Promise.resolve(null);
+    return api(decisionSpineUrl(runId), 0).then(spine => {
+        if (spine?.artifacts) {
+            S.lastDecisionSpine = spine;
+            renderOrchestrationPipeline();
+            return spine;
+        }
+        return null;
+    });
+}
+
 function _openRunDrawer(runId) {
     const run = S.runs.find(r=>r.id===runId||r.runId===runId);
     if (!run) {
         openDrawer({ title: 'Run '+runId, body: '<div class="empty"><div class="empty-title">Loading…</div></div>' });
-        api('/api/runs/'+encodeURIComponent(runId),0).then(d=>{ if(d){ const b=document.getElementById('drawer-body'); if(b) b.innerHTML=_buildRunHtml(d); } });
+        api('/api/runs/'+encodeURIComponent(runId),0).then(d=>{
+            const b=document.getElementById('drawer-body');
+            if(d && b) b.innerHTML=_buildRunHtml(d);
+            loadDecisionSpine(runId).then(spine => { if (d && spine && b) b.innerHTML=_buildRunHtml({...d, decisionSpine: spine}); });
+        });
         return;
     }
     openDrawer({ title: 'Run '+String(runId).slice(-6), body: _buildRunHtml(run) });
+    loadDecisionSpine(runId).then(spine => {
+        const b=document.getElementById('drawer-body');
+        if (spine && b) b.innerHTML=_buildRunHtml({...run, decisionSpine: spine});
+    });
 }
 
 function _buildRunHtml(r) {
@@ -558,8 +599,100 @@ function _buildRunHtml(r) {
     const op = S.synapseHealth.find(o => o.currentRunId===(r.id||r.runId)||(r.goal&&(o.goal===r.goal||(o.role&&r.goal?.toLowerCase().includes(o.role?.toLowerCase())))));
     const opSection = op ? `<div class="dsec"><div class="dsec-title">Operative</div>${drows([['Name',op.name||op.role||op.id],['Status',op.status||'—'],['Budget used',op.budgetUsed!=null?fmtNum(op.budgetUsed)+'t':'—'],['Team',op.team||op.strikeName||'—']])}</div>` : '';
     const tokDisplay = r.tokensUsed ? `<span style="color:var(--accent);font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--weight-semibold)">${fmtNum(r.tokensUsed)}t</span>` : '—';
+    const spineSection = r.decisionSpine ? _buildDecisionSpineHtml(r.decisionSpine) : '';
     return `<div class="dsec"><div class="dsec-title">Run details</div>${drows([['ID',(r.id||r.runId||'').slice(-12)],['Status',r.status],['Goal',r.goal||r.mandate],['Created',r.createdAt?new Date(r.createdAt).toLocaleString():'—'],['Completed',r.completedAt?new Date(r.completedAt).toLocaleString():'—']])}</div>
-    <div class="dsec"><div class="dsec-title">Token cost</div><div style="padding:var(--space-2) 0">${tokDisplay}</div></div>${opSection}`;
+    <div class="dsec"><div class="dsec-title">Token cost</div><div style="padding:var(--space-2) 0">${tokDisplay}</div></div>${spineSection}${opSection}`;
+}
+
+function _buildDecisionSpineHtml(spine) {
+    const artifacts = spine?.artifacts || {};
+    const brief = artifacts.requestBrief || {};
+    const plan = artifacts.selectionPlan || {};
+    const contextLog = Array.isArray(artifacts.contextLog) ? artifacts.contextLog : [];
+    const decisionLog = Array.isArray(artifacts.decisionLog) ? artifacts.decisionLog : [];
+    const selected = spine?.summary?.selected || plan.selected || {};
+    const model = spine?.summary?.modelRoute || plan.modelRoute || brief.modelPolicy || {};
+    const latestDecision = spine?.summary?.latestDecision || decisionLog[decisionLog.length - 1] || null;
+    const prompt = brief.rewrittenPrompt || brief.rawPrompt || '';
+    return `<div class="dsec decision-spine">
+        <div class="dsec-title">Decision spine <a class="decision-spine-full-link" href="#context-log">Open full log</a></div>
+        ${prompt ? `<div class="decision-spine-prompt">${esc(prompt)}</div>` : ''}
+        <div class="decision-spine-grid">
+            <div class="decision-spine-card">
+                <div class="decision-spine-k">Intent</div>
+                <div class="decision-spine-v">${esc(brief.intent || plan.intent || spine?.summary?.intent || '—')}</div>
+                <div class="decision-spine-sub">${esc(brief.risk || spine?.summary?.risk || 'risk: —')}</div>
+            </div>
+            <div class="decision-spine-card">
+                <div class="decision-spine-k">Model route</div>
+                <div class="decision-spine-v">${esc(model.workerTier || '—')}</div>
+                <div class="decision-spine-sub">${esc(model.reviewerTier ? 'review ' + model.reviewerTier : model.reason || '—')}</div>
+            </div>
+            <div class="decision-spine-card">
+                <div class="decision-spine-k">Context</div>
+                <div class="decision-spine-v">${fmtNum(contextLog.length)} events</div>
+                <div class="decision-spine-sub">${fmtNum(decisionLog.length)} decisions</div>
+            </div>
+        </div>
+        <div class="decision-spine-block"><span>Files</span>${miniListHtml(selected.files || plan.candidates?.files || [])}</div>
+        <div class="decision-spine-block"><span>Skills</span>${miniListHtml(selected.skills || plan.candidates?.skills || [])}</div>
+        <div class="decision-spine-block"><span>Crew</span>${miniListHtml([...(selected.crews || []), ...(selected.specialists || [])], 6)}</div>
+        ${latestDecision ? `<div class="decision-spine-latest">${esc(latestDecision.verb || 'decision')} · ${esc(latestDecision.decision || '')}</div>` : ''}
+        ${_buildDecisionSpineLogBrowser(contextLog, decisionLog)}
+    </div>`;
+}
+
+function _buildDecisionSpineLogBrowser(contextLog, decisionLog) {
+    const contextRows = contextLog.slice(0, 6).map(entry => `
+        <div class="decision-spine-log-row">
+            <div class="decision-spine-log-head">
+                <span>${esc(entry.phase || 'context')}</span>
+                <span>${esc(entry.actor || 'system')}</span>
+            </div>
+            <div class="decision-spine-log-reason">${esc(entry.reason || '—')}</div>
+            ${miniListHtml([...(entry.contextRefs || []), ...(entry.fileRefs || []), ...(entry.evidenceRefs || [])], 7)}
+        </div>`).join('');
+    const decisionRows = decisionLog.slice(0, 6).map(entry => `
+        <div class="decision-spine-log-row">
+            <div class="decision-spine-log-head">
+                <span>${esc(entry.verb || 'decision')}</span>
+                <span>${esc(entry.surface || entry.actor || 'runtime')}</span>
+            </div>
+            <div class="decision-spine-log-reason">${esc(entry.decision || '—')}</div>
+            <div class="decision-spine-log-ref">${esc(entry.reason || '')}</div>
+        </div>`).join('');
+    if (!contextRows && !decisionRows) return '';
+    return `<div class="decision-spine-browser">
+        <div class="decision-spine-browser-col">
+            <div class="decision-spine-browser-title">Context log</div>
+            ${contextRows || '<div class="decision-spine-empty">—</div>'}
+        </div>
+        <div class="decision-spine-browser-col">
+            <div class="decision-spine-browser-title">Decision log</div>
+            ${decisionRows || '<div class="decision-spine-empty">—</div>'}
+        </div>
+    </div>`;
+}
+
+function _buildDecisionSpineMiniHtml(spine) {
+    const artifacts = spine?.artifacts || {};
+    const brief = artifacts.requestBrief || {};
+    const plan = artifacts.selectionPlan || {};
+    const selected = spine?.summary?.selected || plan.selected || {};
+    const model = spine?.summary?.modelRoute || plan.modelRoute || brief.modelPolicy || {};
+    return `<div class="decision-spine-mini">
+        <div class="decision-spine-mini-head">Decision Spine · run ${esc((spine.runId || '').slice(-8))}</div>
+        <div class="decision-spine-mini-row">
+            <span>intent ${esc(brief.intent || plan.intent || spine?.summary?.intent || '—')}</span>
+            <span>model ${esc(model.workerTier || '—')}</span>
+            <span>ctx ${fmtNum(spine?.summary?.contextEvents || artifacts.contextLog?.length || 0)}</span>
+            <span>decisions ${fmtNum(spine?.summary?.decisions || artifacts.decisionLog?.length || 0)}</span>
+        </div>
+        <div class="decision-spine-mini-lists">
+            ${miniListHtml(selected.skills || plan.candidates?.skills || [], 4)}
+            ${miniListHtml(selected.files || plan.candidates?.files || [], 4)}
+        </div>
+    </div>`;
 }
 
 /* ─── Orchestration pipeline (decomposition + completion live signal) ─── */
@@ -574,8 +707,10 @@ export function handleOrchestrationEvent(evt) {
     const payload = evt.payload || evt;
     if (evt.type === 'orchestration.decomposed') {
         S.lastDecomposition = { ...payload, ts: evt.time || Date.now() };
+        loadDecisionSpine(payload.runId || payload.id);
     } else if (evt.type === 'orchestration.completed') {
         S.lastCompletion = { ...payload, ts: evt.time || Date.now() };
+        loadDecisionSpine(payload.runId || payload.id);
     }
     renderOrchestrationPipeline();
 }
@@ -585,7 +720,8 @@ function renderOrchestrationPipeline() {
     if (!host) return;
     const dec = S.lastDecomposition;
     const cmp = S.lastCompletion;
-    if (!dec && !cmp) {
+    const spine = S.lastDecisionSpine;
+    if (!dec && !cmp && !spine) {
         host.style.display = 'none';
         return;
     }
@@ -618,11 +754,13 @@ function renderOrchestrationPipeline() {
             <div style="font-size:12px;color:var(--muted);margin-bottom:6px">${esc(cmp.result || '')}</div>
             <div>${chip('verified', `${cmp.verifiedWorkers ?? 0}/${cmp.totalWorkers ?? 0}`)}${chip('saved', `${fmtNum(cmp.savedTokens ?? 0)} t`)}${chip('compression', `${cmp.compressionPct ?? 0}%`)}${chip('duration', `${Math.round((cmp.durationMs ?? 0) / 100) / 10}s`)}</div>
         </div>` : '';
+    const spineBlock = spine ? _buildDecisionSpineMiniHtml(spine) : '';
     const headerNote = same ? '' : (dec && cmp ? '<div style="font-size:11px;color:var(--muted);margin-bottom:6px">Showing latest decomposition + most recent completion (different runs)</div>' : '');
     host.innerHTML = `
         <div class="shd" style="margin-bottom:8px">Orchestration Pipeline</div>
         ${headerNote}
         ${decBlock}
         ${cmpBlock}
+        ${spineBlock}
     `;
 }

package/dist/dashboard/app/views/context-log.js

@@ -0,0 +1,158 @@
+/**
+ * context-log.js — Standalone decision-spine context and decision browser.
+ */
+
+import { S } from '../state.js';
+import { api, bustCache } from '../api.js';
+
+const $ = id => document.getElementById(id);
+const esc = s => s == null ? '' : String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+function fmtTs(ts) {
+    if (!ts) return '—';
+    try { return new Date(ts).toLocaleString(); } catch { return '—'; }
+}
+
+function runIdOf(run) {
+    return run?.runId || run?.id || '';
+}
+
+function spineUrl(runId) {
+    return '/api/runs/' + encodeURIComponent(runId) + '/decision-spine';
+}
+
+function chips(items, limit = 12) {
+    const values = (items || []).filter(Boolean).slice(0, limit);
+    if (!values.length) return '<span class="context-log-empty">—</span>';
+    return values.map(value => `<span class="chip chip-muted">${esc(String(value).replace(/^.*\//, ''))}</span>`).join('');
+}
+
+function summaryCard(spine) {
+    const artifacts = spine?.artifacts || {};
+    const brief = artifacts.requestBrief || {};
+    const plan = artifacts.selectionPlan || {};
+    const model = spine?.summary?.modelRoute || plan.modelRoute || brief.modelPolicy || {};
+    const selected = spine?.summary?.selected || plan.selected || {};
+    return `<div class="context-log-summary">
+        <div class="context-log-kpi"><span>Intent</span><strong>${esc(brief.intent || plan.intent || spine?.summary?.intent || '—')}</strong></div>
+        <div class="context-log-kpi"><span>Risk</span><strong>${esc(brief.risk || '—')}</strong></div>
+        <div class="context-log-kpi"><span>Model</span><strong>${esc(model.workerTier || '—')}${model.reviewerTier ? ` / ${esc(model.reviewerTier)}` : ''}</strong></div>
+        <div class="context-log-kpi"><span>Events</span><strong>${esc(spine?.summary?.contextEvents ?? artifacts.contextLog?.length ?? 0)}</strong></div>
+        <div class="context-log-kpi"><span>Decisions</span><strong>${esc(spine?.summary?.decisions ?? artifacts.decisionLog?.length ?? 0)}</strong></div>
+        <div class="context-log-selection">
+            <div><span>Files</span>${chips(selected.files, 18)}</div>
+            <div><span>Skills</span>${chips(selected.skills, 18)}</div>
+            <div><span>Specialists</span>${chips(selected.specialists, 18)}</div>
+        </div>
+    </div>`;
+}
+
+function contextRows(entries) {
+    if (!entries?.length) {
+        return '<div class="empty"><div class="empty-title">No context events for this run</div></div>';
+    }
+    return entries.map(entry => {
+        const refs = [
+            ...(entry.contextRefs || []),
+            ...(entry.memoryRefs || []),
+            ...(entry.fileRefs || []),
+            ...(entry.evidenceRefs || []),
+        ];
+        return `<article class="context-log-row">
+            <div class="context-log-row-head">
+                <span>${esc(entry.phase || 'context')}</span>
+                <span>${esc(entry.actor || 'system')}</span>
+                <time>${esc(fmtTs(entry.createdAt))}</time>
+            </div>
+            <p>${esc(entry.reason || '')}</p>
+            <div class="context-log-refs">${chips(refs, 24)}</div>
+        </article>`;
+    }).join('');
+}
+
+function decisionRows(entries) {
+    if (!entries?.length) {
+        return '<div class="empty"><div class="empty-title">No decisions for this run</div></div>';
+    }
+    return `<div class="context-log-decision-list">${entries.map(entry => `
+        <article class="context-log-decision">
+            <div class="context-log-row-head">
+                <span>${esc(entry.verb || 'decision')}</span>
+                <span>${esc(entry.surface || entry.actor || 'runtime')}</span>
+                <time>${esc(fmtTs(entry.createdAt))}</time>
+            </div>
+            <strong>${esc(entry.decision || '')}</strong>
+            <p>${esc(entry.reason || '')}</p>
+            <div class="context-log-refs">${chips([entry.beforeRef, entry.afterRef].filter(Boolean), 6)}</div>
+        </article>
+    `).join('')}</div>`;
+}
+
+function renderRunRail(runs) {
+    if (!runs.length) return '<div class="empty"><div class="empty-title">No runs recorded</div></div>';
+    return runs.map(run => {
+        const id = runIdOf(run);
+        const active = id === S.contextLogSelectedRunId;
+        return `<button class="context-log-run ${active ? 'active' : ''}" data-context-run="${esc(id)}">
+            <span>${esc(String(id).slice(-10) || 'run')}</span>
+            <small>${esc(run.state || run.status || 'queued')} · ${esc(fmtTs(run.createdAt))}</small>
+        </button>`;
+    }).join('');
+}
+
+export async function load() {
+    const runs = await api('/api/runs?limit=30', 3000);
+    S.contextLogRuns = Array.isArray(runs) ? runs : [];
+    if (!S.contextLogSelectedRunId) {
+        S.contextLogSelectedRunId = runIdOf(S.contextLogRuns[0]) || null;
+    }
+    if (S.contextLogSelectedRunId) {
+        S.contextLogSpine = await api(spineUrl(S.contextLogSelectedRunId), 0);
+    } else {
+        S.contextLogSpine = null;
+    }
+    render();
+}
+
+export function render() {
+    const host = $('context-log-view');
+    if (!host) return;
+    const spine = S.contextLogSpine;
+    const artifacts = spine?.artifacts || {};
+    const contextLog = artifacts.contextLog || [];
+    const decisionLog = artifacts.decisionLog || [];
+    host.innerHTML = `<div class="context-log-shell">
+        <aside class="context-log-rail">
+            <div class="context-log-rail-head">
+                <span>Runs</span>
+                <button class="btn btn-sm" id="context-log-refresh-btn">Refresh</button>
+            </div>
+            ${renderRunRail(S.contextLogRuns || [])}
+        </aside>
+        <section class="context-log-main">
+            ${spine ? summaryCard(spine) : '<div class="empty"><div class="empty-title">Select a run</div></div>'}
+            <div class="context-log-grid">
+                <div>
+                    <div class="shd">Context events</div>
+                    ${contextRows(contextLog)}
+                </div>
+                <div>
+                    <div class="shd">Decisions</div>
+                    ${decisionRows(decisionLog)}
+                </div>
+            </div>
+        </section>
+    </div>`;
+    host.querySelectorAll('[data-context-run]').forEach(button => {
+        button.addEventListener('click', async () => {
+            S.contextLogSelectedRunId = button.dataset.contextRun || null;
+            if (S.contextLogSelectedRunId) bustCache(spineUrl(S.contextLogSelectedRunId));
+            await load();
+        });
+    });
+    $('context-log-refresh-btn')?.addEventListener('click', async () => {
+        bustCache('/api/runs?limit=30');
+        if (S.contextLogSelectedRunId) bustCache(spineUrl(S.contextLogSelectedRunId));
+        await load();
+    });
+}