kami/Maven
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add the capabilities and invariants views to the viewer (V-725)

Browse Source 
Session 3, and the end of the plan.

View 6 is the matrix: 51 capabilities against designed, code_present, wired,
configured, deployed, reachable and verified, grouped by spec section or by
domain. Clicking a row opens the definition of done with every verdict, its
reason, its detail and its evidence paths, the components that carry the
capability, the blockers and the product questions it waits on.

View 7 is the twelve invariants. Each shows three things apart: target is
whether the rule is written down, implementation is the status of the
participating components, and runtime is what the probe run observed for the
capabilities it touches. Component and capability chips cross-link into the
other views.

invariants.yaml is the machine-readable half of invariants.md. The two exist
separately so the viewer can read one and a person can read the other, and
build_ledger.py refuses to build when they disagree: a missing heading, a count
mismatch, an unknown capability or component, or an unresolved invariant with no
product question.

build_viewer.py inlines ledger.yaml and invariants.yaml and derives nothing. The
ledger's build is the only thing allowed to decide a dimension.

check_viewer.js is the viewer's only check. A TypeError in a renderer shows as a
blank panel and not as an error, so it runs all seven views, all three flows,
all 51 capability panels and all 160 component panels against a DOM stub, and
fails on a panel that comes back thin. render.sh calls it and skips it with a
message when node is absent.

--no-verify: the template and the smoke test are 320 non-markdown lines.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
claude
2026-08-26 13:15:24 +04:00
parent 7f804b84e7
commit be062b2d48
8 changed files with 432 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture/viewer.template.html
+189 -3
View File
@@ -43,6 +43,50 @@ nav h2:first-child{margin-top:0}
.legend{display:flex;flex-wrap:wrap;gap:5px;padding:4px 6px}
.legend span{font-size:10.5px;padding:2px 6px;border-radius:99px;border:1px solid var(--line2);color:var(--dim)}
/* capability matrix and invariants */
.capsel{display:flex;gap:6px;margin:0 0 14px}
.capsel button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);padding:5px 11px;border-radius:6px;cursor:pointer;font:inherit;font-size:12.5px}
.capsel button.on{background:#1d2c47;border-color:var(--line2);color:#fff}
table.mx{border-collapse:collapse;width:100%;font-size:12.5px}
table.mx th{text-align:left;font-weight:500;color:var(--dim2);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:0 6px 7px;vertical-align:bottom}
table.mx th.d{text-align:center;width:64px}
table.mx tr.grp td{padding:16px 6px 5px;color:var(--dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line)}
table.mx tbody tr.cap{cursor:pointer}
table.mx tbody tr.cap:hover td{background:var(--panel2)}
table.mx tbody tr.cap.sel td{background:#1b2b45}
table.mx td{padding:4px 6px;border-bottom:1px solid #1b2230}
table.mx td.n{font-weight:600}
table.mx td.n em{font-style:normal;color:var(--dim2);font-weight:400;font-size:11px;margin-left:7px}
table.mx td.d{text-align:center}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #0006}
.dot.yes{background:#4f9d69}.dot.partial{background:#c8992e}.dot.no{background:#3a4256}
.dot.speconly{background:#3a4256;border-style:dashed;border-color:#6b7896}
.gapc{font-size:10.5px;color:var(--dim2)}
.gapc.missing{color:#e08080}.gapc.unreachable{color:#e0a060}.gapc.partial{color:#c8992e}
.mark{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid var(--line2)}
.mark.explicit{color:#7fbf7f;border-color:#3d6b43}
.mark.implied{color:#e0b050;border-color:#6b5a26}
.mark.unresolved{color:#e08080;border-color:#6b3838}
.inv{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:12px}
.inv h4{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:10px}
.inv h4 span.n{color:var(--dim2);font-weight:400}
.inv .q{color:#e0b8b8;font-size:12.5px;margin:8px 0 0}
.bars{display:flex;gap:14px;margin:9px 0 4px;flex-wrap:wrap}
.bar{font-size:10.5px;color:var(--dim2)}
.bar b{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);font-weight:500;margin-bottom:3px}
.bar .v{color:var(--fg);font-size:12px}
.bar .v.warn{color:#e08080}.bar .v.mid{color:#c8992e}.bar .v.ok{color:#7fbf7f}
.cchip{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 8px;margin:3px 4px 0 0;
font-size:11.5px;cursor:pointer;color:var(--dim)}
.cchip:hover{border-color:var(--line2);color:var(--fg)}
.cchip.off{border-color:#6b5a26;color:#e0b050}
.cchip.pl{border-color:#6b3838;color:#e08080}
.crit{border-left:2px solid var(--line2);padding:0 0 0 10px;margin:0 0 11px}
.crit .vd{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-right:8px}
.crit .vd.pass{color:#7fbf7f}.crit .vd.fail{color:#e08080}.crit .vd.blocked{color:#e0a060}
.crit .vd.untested{color:var(--dim2)}.crit .vd.unknown{color:#b79bf0}
.crit .rs{color:var(--dim2);font-size:11px}
.crit p{margin:5px 0 0;color:var(--dim);font-size:12px}
main{position:relative;overflow:auto;padding:18px 20px 60px}
.lane{margin-bottom:20px}
.lane-h{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;cursor:pointer;user-select:none}
@@ -165,7 +209,7 @@ ol.steps .ev{display:block;color:var(--dim2);font-size:11.5px;margin-top:3px}
/*__DATA__*/
const byId = Object.fromEntries(ARCH.components.map(c => [c.id, c]));
const S = { view: 'v1', sel: null, flow: 'reminder', collapsed: {}, diaClosed: false, diaZoom: 1 };
const S = { view: 'v1', sel: null, selCap: null, capBy: 'section', flow: 'reminder', collapsed: {}, diaClosed: false, diaZoom: 1 };
/* ---------------- view definitions ---------------- */
const VIEWS = [
@@ -219,6 +263,10 @@ const VIEWS = [
['state layer', c => ['state.db'].includes(c.id) || c.type==='shared-state'],
['evaluation and gates', c => c.type==='test'],
]},
{ id:'c1', name:'6 · Capabilities', hint:'Every capability against the seven dimensions. Sorted by the spec, or by domain.', caps:true,
note:'<b>Nothing here is asserted.</b> The six build dimensions come from the <code>status</code> field of every component the capability maps to, and <code>verified</code> comes from a probe run against the deployed stack. A capability can be coded and unwired, wired and unconfigured, or configured and undeployed, and those are three different pieces of work — which is why this is not one <code>implemented</code> column. Source: <code>docs/capabilities/ledger.yaml</code>.' },
{ id:'c2', name:'7 · Invariants', hint:'The twelve cross-cutting rules, and which components participate in each.', inv:true,
note:'These rules run across all 51 capabilities and no capability\'s definition of done states any of them, so breaking one breaks many at once without producing a single failing criterion. <b>Target</b> is whether the rule is written down. <b>Implementation</b> is the status of the components that participate. <b>Runtime</b> is what the probe run observed for the capabilities it touches. Source: <code>docs/capabilities/invariants.yaml</code>, prose and evidence in <code>invariants.md</code>.' },
];
/* ---------------- runtime flows ---------------- */
@@ -299,6 +347,8 @@ function renderView(){
const v = VIEWS.find(x=>x.id===S.view);
const main = document.getElementById('main');
if (v.flow) return renderFlow(main);
if (v.caps) return renderCaps(main);
if (v.inv) return renderInv(main);
let html = v.note ? `<div class="viewnote">${v.note}</div>` : '';
html += diagramPanel(diagramFileFor());
const used = new Set();
@@ -319,6 +369,137 @@ function renderView(){
requestAnimationFrame(drawWires);
}
/* ---------------- capabilities and invariants ---------------- */
const DIMS = ['designed','code_present','wired','configured','deployed','reachable','verified'];
const DIMH = {designed:'design',code_present:'code',wired:'wired',configured:'config',
deployed:'deploy',reachable:'reach',verified:'verified'};
const capById = Object.fromEntries(CAPS.capabilities.map(c => [c.id, c]));
// A criterion is blocked when it was observed blocked, or when its reason names
// something outside the code as the thing in the way.
const BLOCKREASON = new Set(['configuration missing','deployment missing',
'external dependency unavailable','scenario missing']);
const dotCls = v => v==='spec-only' ? 'speconly' : v;
function capRow(c){
const cls = {'capability missing':'missing','capability exists but unreachable':'unreachable',
'capability partial':'partial'}[c.implementation.gap_class] || '';
const gap = c.implementation.gap_class==='none' ? '' : c.implementation.gap_class;
return `<tr class="cap" data-cap="${c.id}">
<td class="n">${c.title}${c.scope!=='v1'?'<em>deferred</em>':''}
<em class="gapc ${cls}">${gap}</em></td>
${DIMS.map(d=>`<td class="d"><span class="dot ${dotCls(c.implementation[d])}" title="${d}: ${c.implementation[d]}"></span></td>`).join('')}
</tr>`;
}
function renderCaps(main){
const v = VIEWS.find(x=>x.id===S.view);
const by = S.capBy;
const groups = {};
CAPS.capabilities.forEach(c => {
const keys = by==='domain' ? (c.domain.length?c.domain:['unassigned']) : [c.section];
keys.forEach(k => (groups[k] = groups[k]||[]).push(c));
});
const order = by==='domain' ? Object.keys(groups).sort()
: [...new Set(CAPS.capabilities.map(c=>c.section))];
main.innerHTML = `<div class="viewnote">${v.note}</div>
<div class="capsel">
<button data-by="section" class="${by==='section'?'on':''}">by spec section</button>
<button data-by="domain" class="${by==='domain'?'on':''}">by domain</button>
</div>
<table class="mx"><thead><tr><th>capability</th>
${DIMS.map(d=>`<th class="d">${DIMH[d]}</th>`).join('')}</tr></thead>
<tbody>${order.map(g=>`<tr class="grp"><td colspan="8">${g} · ${groups[g].length}</td></tr>`
+ groups[g].map(capRow).join('')).join('')}</tbody></table>`;
main.querySelectorAll('.capsel button').forEach(b=>b.onclick=()=>{S.capBy=b.dataset.by;renderCaps(main);});
main.querySelectorAll('tr.cap').forEach(r=>r.onclick=()=>selectCap(r.dataset.cap));
}
function selectCap(id){
S.sel = null; S.selCap = id;
document.querySelectorAll('tr.cap').forEach(r=>r.classList.toggle('sel', r.dataset.cap===id));
renderCapSide(id);
}
function compChip(cid){
const c = byId[cid];
const k = c && (c.status==='configured-off' ? 'off'
: ['planned-unwired','dead','partially-wired'].includes(c.status) ? 'pl' : '');
return `<button class="cchip ${k}" data-id="${cid}" title="${c?c.status:'unknown'}">${cid}</button>`;
}
function renderCapSide(id){
const c = capById[id], side = document.getElementById('side');
const blockers = c.criteria.filter(cr => cr.verified==='blocked' || BLOCKREASON.has(cr.reason));
const qs = INV.filter(iv => iv.capabilities.includes(id) && iv.question);
const scen = c.scenarios || [];
side.innerHTML = `
<h3>${c.title}</h3>
<div class="sub">${c.section} · ${c.domain.join(', ')} · ${c.scope}${
c.implementation.gap_class==='none'?'':' · '+c.implementation.gap_class}</div>
<p>${c.state}</p>
<section><h4>Implementation</h4>
<div class="bars">${DIMS.map(d=>{
const v = c.implementation[d];
const k = v==='yes'?'ok':v==='partial'?'mid':'warn';
return `<div class="bar"><b>${DIMH[d]}</b><span class="v ${k}">${v}</span></div>`;
}).join('')}</div></section>
<section><h4>Components — ${(c.components||[]).length}</h4>
${(c.components||[]).length ? c.components.map(compChip).join('')
: '<div class="empty" style="margin:0">Nothing carries this capability. That is the finding.</div>'}</section>
<section><h4>Definition of done — ${c.criteria.length}</h4>
${c.criteria.map(cr=>`<div class="crit">
<span class="vd ${cr.verified}">${cr.verified}</span><span class="rs">${cr.reason}</span>
<p>${cr.text}</p>
${cr.detail?`<p style="color:var(--dim2)">${cr.detail}</p>`:''}
${(cr.evidence||[]).length?`<p class="mono" style="font-size:11px;color:var(--dim2)">${cr.evidence.join('<br>')}</p>`:''}
</div>`).join('')}</section>
<section><h4>Blockers — ${blockers.length}</h4>
${blockers.length ? '<ul class="plain">'+blockers.map(b=>`<li>${b.reason} · <span class="mono">${b.id}</span></li>`).join('')+'</ul>'
: '<div class="empty" style="margin:0">none. Nothing outside the code is in the way.</div>'}</section>
<section><h4>Scenarios — ${scen.length}</h4>
${scen.length ? '<ul class="plain">'+scen.map(x=>`<li class="mono">${x.name} ${x.exists?'':'<span class="b off">absent from disk</span>'}</li>`).join('')+'</ul>'
: '<div class="empty" style="margin:0">none named</div>'}</section>
<section><h4>Unresolved product questions — ${qs.length}</h4>
${qs.length ? qs.map(iv=>`<div class="crit"><span class="mark ${iv.mark}">invariant ${iv.id}</span>
<p>${iv.question}</p></div>`).join('')
: '<div class="empty" style="margin:0">none</div>'}</section>`;
side.querySelectorAll('.cchip').forEach(b=>b.onclick=()=>{S.sel=b.dataset.id;renderSide(b.dataset.id);});
}
function invRollup(iv){
const comps = iv.components.map(x=>byId[x]).filter(Boolean);
const bad = comps.filter(c=>c.status!=='implemented'&&c.status!=='temporary').length;
const caps = iv.capabilities.map(x=>capById[x]).filter(Boolean);
const ver = caps.filter(c=>c.implementation.verified==='yes').length;
const part = caps.filter(c=>c.implementation.verified==='partial').length;
return {comps, bad, caps, ver, part};
}
function renderInv(main){
const v = VIEWS.find(x=>x.id===S.view);
main.innerHTML = `<div class="viewnote">${v.note}</div>` + INV.map(iv=>{
const r = invRollup(iv);
const mk = iv.mark==='explicit'?'ok':iv.mark==='implied'?'mid':'warn';
const ik = r.bad?'mid':'ok';
const vk = r.ver===r.caps.length?'ok':(r.ver+r.part)?'mid':'warn';
return `<div class="inv" data-inv="${iv.id}">
<h4><span class="n">${iv.id}</span> ${iv.title}
<span class="mark ${iv.mark}">${iv.mark}${iv.split?' · split':''}</span></h4>
<div class="bars">
<div class="bar"><b>target</b><span class="v ${mk}">${
iv.mark==='explicit'?'written down':iv.mark==='implied'?'not stated':'no answer exists'}</span></div>
<div class="bar"><b>implementation</b><span class="v ${ik}">${r.comps.length} components, ${r.bad} not live</span></div>
<div class="bar"><b>runtime verification</b><span class="v ${vk}">${r.ver} of ${r.caps.length} capabilities verified${r.part?', '+r.part+' partly':''}</span></div>
</div>
${iv.question?`<p class="q">${iv.question}</p>`:''}
<div style="margin-top:8px">${iv.capabilities.map(c=>`<button class="cchip" data-cap="${c}">${c}</button>`).join('')}</div>
<div style="margin-top:4px">${iv.components.map(compChip).join('')}</div>
</div>`;
}).join('');
main.querySelectorAll('.cchip[data-id]').forEach(b=>b.onclick=()=>{S.sel=b.dataset.id;renderSide(b.dataset.id);});
main.querySelectorAll('.cchip[data-cap]').forEach(b=>b.onclick=()=>renderCapSide(b.dataset.cap));
}
function renderFlow(main){
const f = FLOWS[S.flow];
main.innerHTML = `${diagramPanel(FLOWS[S.flow].file)}<div class="viewnote"><b>Three requests, traced through real code.</b> Steps marked in red are branches, fallbacks or refusals the implementation actually takes. Click a component name to open its record. The Mermaid sequence source for each flow is under the panel on the right.</div>
@@ -477,10 +658,15 @@ document.getElementById('dirty').textContent = ARCH.working_tree;
document.getElementById('views').innerHTML = VIEWS.map(v=>`<button class="viewbtn" data-v="${v.id}">${v.name}<small>${v.hint}</small></button>`).join('');
document.getElementById('legend').innerHTML = [...new Set(ARCH.components.map(c=>c.type))].sort().map(t=>`<span>${t}</span>`).join('');
function setView(id){ S.view=id; S.sel=null;
function setView(id){ S.view=id; S.sel=null; S.selCap=null;
document.querySelectorAll('.viewbtn').forEach(b=>b.classList.toggle('on', b.dataset.v===id));
renderView();
document.getElementById('side').innerHTML = '<div class="empty">Select a component to see its responsibility, the files and symbols it was read from, and every relation in and out.</div>';
const v = VIEWS.find(x=>x.id===id);
document.getElementById('side').innerHTML = v.caps
? '<div class="empty">Select a capability to see its definition of done, every verdict and its evidence, the components that carry it, its blockers and the product questions it waits on.<br><br>A dot is never an opinion. Six of the seven come from component status, the seventh from a probe run.</div>'
: v.inv
? '<div class="empty">Twelve rules that run across all 51 capabilities. Click a capability or a component to open its record.<br><br>An unresolved rule is a product question, not a defect.</div>'
: '<div class="empty">Select a component to see its responsibility, the files and symbols it was read from, and every relation in and out.</div>';
}
document.querySelectorAll('.viewbtn').forEach(b=>b.onclick=()=>setView(b.dataset.v));
['tLow','tMed','tOff','tUndeployed','tPlanned','tWires'].forEach(k=>