projectkeeper 0.0.0-stage → 1.0.0

package/ui/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="color-scheme" content="dark">
+  <title>ProjectKeeper</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2323211d'/%3E%3Cpath d='M23 8H12l-5 8 5 8h11M14 8v16M7 16h16' fill='none' stroke='%23e3b76f' stroke-width='2'/%3E%3C/svg%3E">
+  <link rel="stylesheet" href="/styles.css">
+  <!-- Increment K: the process view, the popover's lineage and versions, the generation bands (CKC-24, §6.3, §6.4). -->
+  <link rel="stylesheet" href="/k-process.css">
+  <!-- Increment K: AS's renderers (Code, the round tree, the scope additions; ui/k/*.js). They also attach it
+       themselves when mounted; linked here so the views never flash unstyled on first paint. -->
+  <link rel="stylesheet" href="/k/k-views.css">
+  <!-- Themes (Spec §6.16): the frozen WorkflowKeeper board, then ProjectKeeper's own layer for it. Both hrefs are set by
+       theme.js from the choice kept in this browser; empty, they are the factory look. The guard is always last: it
+       pins the shell's layout and says no colour (themes/guard.css). -->
+  <link rel="stylesheet" id="theme-board" href="">
+  <link rel="stylesheet" id="theme-pk" href="">
+  <link rel="stylesheet" href="/themes/guard.css">
+</head>
+<body>
+  <div id="app" class="shell"></div>
+  <dialog id="dialog" aria-labelledby="dialog-title"></dialog>
+  <div id="toast" role="status" aria-live="polite"></div>
+  <script src="/vendor/cytoscape/dist/cytoscape.min.js"></script>
+  <script src="/vendor/dagre/dist/dagre.min.js"></script>
+  <script src="/vendor/cytoscape-dagre/dist/cytoscape-dagre.js"></script>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>

package/ui/k/code-view.js

@@ -0,0 +1,230 @@
+// §6.17 the Code view: the current version's code territories by product area (CKC-25, §1.19).
+// Pure rendering: the CodeView comes in as a parameter; anything more goes through ctx.
+import { h, fmtTime } from '../app.js';
+
+const ensureStyle = () => {
+  if (document.getElementById('k-views-css')) return;
+  const link = document.createElement('link');
+  link.id = 'k-views-css';
+  link.rel = 'stylesheet';
+  link.href = '/k/k-views.css';
+  document.head.append(link);
+};
+
+const num = (n) => Number(n).toLocaleString('en-US');
+const short = (commit) => (commit ? commit.slice(0, 7) : '—');
+const day = (occurred) => (occurred && occurred.at ? occurred.at.slice(0, 10) : '—');
+
+// D74/D54: "also serves N" stays one chip; the list opens on hover, and a click pins it open.
+const alsoServesChip = (list) => {
+  const el = h('span', { class: 'kv-also' },
+    h('button', {
+      class: 'kv-tag kv-blue', type: 'button',
+      onClick: (e) => { e.stopPropagation(); el.classList.toggle('kv-open'); },
+    }, `also serves ${list.length}`),
+    h('ul', { class: 'kv-also-list' }, list.map((a) => h('li', {}, a.areaName))),
+  );
+  return el;
+};
+
+const terrNames = (ids, byId, counts) => ids.length
+  ? ids.map((id) => `${byId.get(id)?.name ?? id}${counts?.[id] != null ? ` (${num(counts[id])})` : ''}`).join(', ')
+  : null;
+
+// The work items behind one generation's share of the lines (TerritoryView.generations[].works): one chip, the list
+// opens on hover and a click pins it — the same pattern as "also serves N" (D74).
+const genWorksChip = (g) => {
+  const el = h('span', { class: 'kv-also kv-genworks' },
+    h('button', {
+      class: 'kv-tag', type: 'button', title: 'Which work items made these lines',
+      onClick: (e) => { e.stopPropagation(); el.classList.toggle('kv-open'); },
+    }, `${g.works.length} work${g.works.length === 1 ? '' : 's'}`),
+    h('ul', { class: 'kv-also-list' }, g.works.map((w) => h('li', {}, `${w.label} · ${num(w.lines)} lines`))),
+  );
+  return el;
+};
+
+/** The anomalies that judge code by its references (§1.19): their `Inferred` is the ledger's reach, not a guess. */
+const BY_REFERENCES = new Set(['Unreferenced', 'Looks residual, is live']);
+
+const plural = (n, one, many = `${one}s`) => `${num(n)} ${n === 1 ? one : many}`;
+
+// How deep the ledger reads one language (CodeView.levels; §1.16, §6.17; D98 补), in what was measured: the TypeScript
+// compiler's languages to symbols; the code engine's to symbols, with the imports it resolved to a file of the repository
+// and those it left unresolved naming one; a language nothing reads, its files and sizes only. Where a file is not read or
+// a reference was left unresolved, residual calls there are Inferred; the ledger's own words for that are on hover.
+function levelText(l) {
+  if (!l.readBy) return 'not read: files and sizes only (residual calls here are Inferred)';
+  const measured = [
+    l.read < l.files ? `${num(l.read)} of ${num(l.files)} files read` : null,
+    l.imports ? `${plural(l.imports.resolved, 'import')} resolved` : null,
+    l.imports ? `${num(l.imports.unresolvedNamingRepoFiles)} left unresolved naming a repository file` : null,
+    l.namedButUnreferenced ? `${plural(l.namedButUnreferenced, 'file')} named by other files but reached by no counted reference` : null,
+    l.parseErrors ? `${plural(l.parseErrors, 'file')} not parsed in full` : null,
+  ].filter(Boolean);
+  return `read by the ${l.readBy === 'compiler' ? 'TypeScript compiler' : 'code engine'}: symbols${measured.length ? `, ${measured.join(', ')}` : ''}${l.complete ? '' : ' (residual calls here are Inferred)'}`;
+}
+
+function anomalyView(a, ctx) {
+  const okTone = a.kind === 'Looks residual, is live';
+  const sb = a.sendBackId ? ctx.getSendBack?.(a.sendBackId) : null;
+  // The notes behind noteIds, by title when the view names them (TerritoryAnomalyView.notes); a bare id otherwise.
+  const notes = a.notes?.length ? a.notes : a.noteIds.map((id) => ({ id, title: null, ask: null, status: null }));
+  let sbBox = null;
+  return h('div', { class: `kv-anomaly ${okTone ? 'kv-ok' : 'kv-lit'}`, dataset: { kind: a.kind } },
+    h('div', {},
+      h('span', { class: 'kv-kind' }, `${okTone ? '✓' : '⚑'} ${a.kind}`),
+      a.basis === 'Inferred' ? h('span', { class: 'kv-tag kv-purple', title: BY_REFERENCES.has(a.kind) ? 'The ledger left references here unresolved, or reads none of them: this call is judged, not computed' : 'Judged from the material, not shown by the ledger alone' }, 'Inferred') : null),
+    h('p', { class: 'kv-anomaly-text' }, a.text),
+    h('details', { class: 'kv-evid-wrap' },
+      h('summary', { class: 'kv-text-btn' }, `basis · ${a.evidence.length}`),
+      h('ul', { class: 'kv-evid' }, a.evidence.map((e) => h('li', {},
+        h('span', {}, `${e.kind} · ${e.label}`),
+        e.line ? h('span', { class: 'kv-line' }, `“${e.line}”`) : null)))),
+    h('div', { class: 'kv-anomaly-acts' },
+      // From the anomaly to its notes (§6.17 "从异常跳到相关的 note 与送回").
+      notes.map((n) => h('button', { class: 'btn small kv-btn kv-note', type: 'button', dataset: { note: n.id }, title: n.title ? `${n.ask ?? 'Note'}${n.status && n.status !== 'Current' ? ` · ${n.status}` : ''} — open the note` : 'Open the note', onClick: () => ctx.openNote(n.id) },
+        n.title ? `✎ ${n.title.length > 48 ? `${n.title.slice(0, 47)}…` : n.title}` : 'Note')),
+      sb ? (sbBox = h('div', { class: 'kv-sendback', dataset: { sendback: sb.id } },
+        h('div', {}, h('span', { class: 'kv-stage' }, `↩ ${sb.stage} · back to ${sb.to}`), h('span', { class: 'kv-muted' }, ` ${sb.suggestion}`)),
+        h('div', { class: 'kv-sendback-acts' },
+          sb.stage === 'Suggested'
+            ? h('button', { class: 'btn small kv-btn', type: 'button', onClick: () => ctx.copy(sb.copyForAgent) }, 'Copy for agent')
+            : null,
+          // …and to its send-back: the whole of it beside the anomaly — where, the evidence and its lines, where to.
+          ctx.openSendBack ? h('button', { class: 'btn small kv-btn kv-open-sb', type: 'button', title: 'Open the send-back: the problem, its evidence and the original lines, where it goes back to', onClick: () => ctx.openSendBack(sb, sbBox) }, 'Open send-back') : null))) : a.sendBackId ? h('span', { class: 'kv-none', title: a.sendBackId }, 'Send-back not found') : null));
+}
+
+function drillRow(t, repo, ctx, workLabels) {
+  const td = h('td', { colspan: '5' }, h('div', { class: 'kv-doc-loading' }, 'Loading files…'));
+  const tr = h('tr', { class: 'kv-drill', dataset: { tid: t.id } }, td);
+  const draw = (detail) => {
+    td.replaceChildren();
+    if (!detail || !detail.files) {
+      td.append(h('div', { class: 'kv-none' }, 'No file detail for this territory.'));
+      return;
+    }
+    const refList = (refs) => refs.length === 0
+      ? h('span', { class: 'kv-none' }, 'none')
+      : h('span', { class: 'kv-reflist', title: refs.join('\n') }, refs.length <= 2 ? refs.map((r) => r.split('/').pop()).join(', ') : `${refs.slice(0, 2).map((r) => r.split('/').pop()).join(', ')} +${refs.length - 2}`);
+    td.append(h('table', { class: 'kv-files' },
+      h('thead', {}, h('tr', {},
+        h('th', {}, 'File'), h('th', {}, 'Lines'), h('th', {}, 'Referenced by'), h('th', {}, 'References'), h('th', {}, 'Last commit'), h('th', {}, 'Work'))),
+      h('tbody', {}, detail.files.map((f) => h('tr', { dataset: { path: f.path } },
+        h('td', {}, h('button', { class: 'kv-text-btn kv-mono', type: 'button', onClick: () => ctx.openFile(t.repo ?? repo, f.path) }, f.path),
+          f.generated ? h('span', { class: 'kv-tag kv-purple', title: 'Generated code' }, 'generated') : null),
+        h('td', { class: 'kv-muted' }, num(f.lines)),
+        h('td', {}, refList(f.importedBy)),
+        h('td', {}, refList(f.imports)),
+        h('td', { class: 'kv-muted' }, f.lastCommit ? h('span', { title: f.lastCommit.subject }, `${day(f.lastCommit.occurred)} · ${short(f.lastCommit.commit)}`) : '—'),
+        h('td', {}, f.workId
+          ? h('button', { class: 'kv-tag', type: 'button', onClick: () => ctx.openWork(f.workId) }, f.workLabel ?? workLabels.get(f.workId) ?? f.workId)
+          : h('span', { class: 'kv-none' }, '—')))))));
+  };
+  ctx.fetchTerritory(t.id).then(draw, (e) => { td.replaceChildren(h('div', { class: 'kv-none' }, `Could not load: ${e.message}`)); });
+  return tr;
+}
+
+export function renderCodeView(container, codeView, ctx) {
+  ensureStyle();
+  container.replaceChildren();
+  const byId = new Map(codeView.territories.map((t) => [t.id, t]));
+  const workLabels = new Map();
+  for (const t of codeView.territories) for (const b of t.builtBy) if (b.workId) workLabels.set(b.workId, b.label);
+  const drillOpen = new Set();
+
+  const groups = [];
+  for (const t of codeView.territories) {
+    const key = t.row.kind === 'area' ? t.row.areaId : t.row.kind;
+    const last = groups[groups.length - 1];
+    if (last && last.key === key) last.territories.push(t);
+    else groups.push({ key, row: t.row, territories: [t] });
+  }
+
+  const terrCells = (t) => {
+    const deps = terrNames(t.dependsOn, byId, t.dependsOnCounts);
+    const depsBy = terrNames(t.dependedBy, byId, t.dependedByCounts);
+    const built = t.builtBy.map((b) => b.workId
+      ? h('button', { class: 'kv-tag', type: 'button', title: `${b.label} · merge ${b.commits.map(short).join(', ')}`, onClick: () => ctx.openWork(b.workId) }, `${b.label.split(' ')[0]} ×${b.files}`)
+      : h('span', { class: 'kv-tag', title: `${b.label} · ${b.commits.map(short).join(', ')}` }, `— ×${b.files}`));
+    const drill = () => {
+      const name = `${t.name} · ${t.paths.join(' ')}`;
+      const row = container.querySelector(`tr.kv-drill[data-tid="${t.id}"]`);
+      if (row) { row.remove(); drillOpen.delete(t.id); return; }
+      drillOpen.add(t.id);
+      const anchor = container.querySelector(`tr[data-terr="${t.id}"]`);
+      anchor?.after(drillRow(t, codeView.version.repo, ctx, workLabels));
+    };
+    return [
+      h('td', { class: 'kv-col-terr' },
+        h('div', { class: 'kv-tblock' },
+          h('div', {},
+            h('button', { class: 'kv-text-btn kv-tname', type: 'button', title: 'Drill down to files', onClick: drill }, t.name),
+            t.paths.map((p) => h('span', { class: 'kv-path kv-mono' }, ` ${p} `)),
+            h('span', { class: 'kv-size' }, `· ${num(t.size.files)} files · ${num(t.size.lines)} lines`)),
+          h('div', { class: 'kv-muted' }, t.summary),
+          // A path the current version no longer has (CKC-25 AC-10): the numbers count only what is left.
+          t.gonePaths?.length ? h('div', { class: 'kv-gone', title: 'Deleted or moved since the territory was drawn; the next round’s cross-check draws it again on the current paths' },
+            `⚠ ${t.gonePaths.length === t.paths.length ? 'Its code is gone from the current version' : 'Not in the current version'}: `, t.gonePaths.map((p) => h('span', { class: 'kv-mono' }, `${p} `))) : null,
+          t.size.generatedLines
+            ? h('div', { class: 'kv-generated' }, `generated: ${num(t.size.generatedFiles)} file · ${num(t.size.generatedLines)} lines; handwritten ≈ ${num(t.size.lines - t.size.generatedLines)} lines`)
+            : null,
+          deps || depsBy ? h('div', { class: 'kv-deps kv-muted' },
+            deps ? h('div', {}, `depends on: ${deps}`) : null,
+            depsBy ? h('div', {}, `depended by: ${depsBy}`) : null) : null,
+          t.alsoServes.length ? h('div', { class: 'kv-deps' }, alsoServesChip(t.alsoServes)) : null)),
+      h('td', { class: 'kv-col-built' },
+        h('div', {}, built),
+        t.generations.length ? h('div', { class: 'kv-gens kv-muted' }, 'made in: ', t.generations.slice(0, 2).map((g, i) => h('span', {}, i ? ' · ' : null, `${g.name} ${Math.round(g.share * 100)}%`, g.works?.length ? [' ', genWorksChip(g)] : null))) : null,
+        t.tests ? h('div', { style: 'margin-top:3px' }, h('span', { class: 'kv-tag kv-green' }, `tests ${t.tests}`)) : null,
+        t.lastChange ? h('div', { class: 'kv-faint', style: 'margin-top:3px' }, `last change ${day(t.lastChange.occurred)} · `, h('span', { class: 'kv-mono', title: t.lastChange.subject }, short(t.lastChange.commit))) : null),
+      h('td', { class: 'kv-col-use' },
+        // `Not known` (§1.16): no code, or code nothing reaches whose references the ledger reads none of — stated as it
+        // stands, neither in use nor residual, so no ⚠ and no lit tone. `In use, not in current plan`: current code
+        // references it and nothing current in the plan points at it — in use, so not lit, and said apart from `In current plan`.
+        t.currentUse === 'Not known'
+          ? h('span', { class: 'kv-use kv-unknown', title: 'The ledger reads the references of none of this territory’s code, or it holds none: nothing is claimed about its use either way' }, t.currentUse)
+          : t.currentUse === 'In use, not in current plan'
+            ? h('span', { class: 'kv-use kv-unplanned', title: 'Current code references it, and no current work item changed it and no current requirement, design, decision, plan or work points at its area' }, t.currentUse)
+            : h('span', {
+              class: `kv-use ${t.currentUse === 'Unreferenced' ? 'kv-lit-red' : t.currentUse === 'Previous generation only' ? 'kv-lit' : ''}`,
+              title: t.currentUse === 'In current plan' ? 'Current code references it, and current work or requirements point at it' : '',
+            }, t.currentUse === 'In current plan' ? t.currentUse : `⚠ ${t.currentUse}`)),
+      h('td', { class: 'kv-col-state' },
+        t.anomalies.length ? t.anomalies.map((a) => anomalyView(a, ctx)) : h('span', { class: 'kv-none' }, '—')),
+    ];
+  };
+
+  const body = [];
+  for (const g of groups) {
+    const label = g.row.kind === 'area' ? g.row.areaName : g.row.kind === 'shared' ? 'Shared base' : 'Not product code';
+    g.territories.forEach((t, i) => {
+      body.push(h('tr', { dataset: { terr: t.id, rowKind: g.row.kind } },
+        i === 0 ? h('td', { class: 'kv-area-cell', rowspan: String(g.territories.length) },
+          h('div', { class: g.row.kind === 'area' ? 'kv-area-name' : 'kv-muted' }, label),
+          // The area's one line as Product intent writes it (TerritoryView.row.areaLine), when the view carries it.
+          g.row.kind === 'area' && g.row.areaLine ? h('div', { class: 'kv-muted kv-arealine' }, g.row.areaLine) : null) : null,
+        terrCells(t)));
+    });
+  }
+
+  container.append(h('div', { class: 'kv-code', dataset: { kv: 'code' } },
+    h('div', { class: 'kv-head' },
+      h('h2', {}, 'Code'),
+      h('div', { class: 'kv-chips' },
+        h('span', { class: 'kv-chip' }, 'Current version: ', h('b', {}, codeView.version.repo), codeView.version.branch ? ` · ${codeView.version.branch}` : '', ' · ', h('span', { class: 'kv-mono' }, short(codeView.version.commit)), ` · ${day(codeView.version.occurred)}`),
+        h('span', { class: 'kv-chip kv-levels' }, 'Ledger code structure: ', codeView.levels.length
+          ? codeView.levels.map((l, i) => [i ? ' · ' : null, h('span', { class: 'kv-level', dataset: { lang: l.language, readBy: l.readBy ?? 'none' }, title: l.gaps.length ? l.gaps.join('\n') : null },
+            h('b', {}, l.language), ` — ${levelText(l)}`)])
+          : 'no code in the current version'),
+        h('span', { class: 'kv-chip' }, 'Generated: ', h('b', {}, fmtTime(codeView.generatedAt))))),
+    h('table', { class: 'kv-table' },
+      h('thead', {}, h('tr', {},
+        h('th', {}, 'Product area'),
+        h('th', {}, 'Code territories (current version)'),
+        h('th', {}, 'Built by · verified'),
+        h('th', {}, 'Used by current plan'),
+        h('th', {}, 'State & anomalies'))),
+      h('tbody', {}, body))));
+  return container;
+}

package/ui/k/draft-view.js

@@ -0,0 +1,93 @@
+// §3.11 a session's draft where the owner drills into a session (CKC-23 AC-18; D88): the owner's lines verbatim, each
+// with its kind — chat, decision or confirmation — what a confirmation answers and what it confirms, and the agents'
+// intents and reports as claims. Opened from an object's sessions (a work item's session sources) and from the
+// session-drafts step of the round that wrote it. Pure rendering over SessionDraftView / SessionDraftRef
+// (src/model/views-k.ts); fetching and opening an original go through ctx.
+import { h, fmtTime, openDialog } from '../app.js';
+
+const KIND_TONE = { Decision: 'amber', Confirmation: 'green', Chat: '' };
+const shortId = (id) => (id && id.length > 12 ? id.slice(0, 8) : id);
+const span = (from, to) => (from ? `${fmtTime(from)}${to && to !== from ? ` – ${fmtTime(to)}` : ''}` : 'time not recorded');
+const plural = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+/** The counts of one draft, in words: the owner's lines and how they were read. */
+export function draftCounts(d) {
+  const lines = d.ownerLines ?? d.counts?.lines ?? 0;
+  const n = typeof lines === 'number' ? lines : lines.length;
+  const parts = [plural(n, 'owner line')];
+  const c = d.counts ?? d;
+  if (c.decisions) parts.push(plural(c.decisions, 'decision'));
+  if (c.confirmations) parts.push(plural(c.confirmations, 'confirmation'));
+  if (c.chat) parts.push(`${c.chat} chat`);
+  if (c.unjudged) parts.push(`${c.unjudged} not yet classified`);
+  return parts.join(' · ');
+}
+
+/** One session as a list names it: host, session, when; with its draft, or saying it has none yet. */
+export function draftRefLine(ref, ctx) {
+  const head = `${ref.host} session ${shortId(ref.sessionId)}`;
+  return h('div', { class: 'kd-ref', dataset: { draft: ref.id ?? '', session: ref.sessionId } },
+    ref.id
+      ? h('button', { class: 'text-btn kd-open', title: 'Open the draft of this session: the owner’s words verbatim, and what the agents said, as claims', onClick: (e) => { e.stopPropagation(); void ctx.openDraft(ref.id); } }, `Session draft · ${head}`)
+      : h('span', { class: 'kd-none', title: 'This session is among the sources, and the round has not drafted it yet' }, `${head} · not drafted yet`),
+    ' ', h('span', { class: 'faint' }, `${span(ref.startedAt, ref.endedAt)}${ref.id ? ` · ${draftCounts(ref)}` : ''}`));
+}
+
+/** The popover's and the full details' block: the sessions an object stands on, each openable (a work item's sessions). */
+export function sessionsBlock(refs, ctx) {
+  if (!refs || !refs.length) return null;
+  return h('div', { class: 'kp-block kd-sessions' },
+    h('h4', {}, `Sessions (${refs.length})`),
+    ...refs.map((r) => draftRefLine(r, ctx)));
+}
+
+/** One owner line: when, where, its kind, the words verbatim; a confirmation with what it answers and confirms. */
+function ownerLine(l, ctx) {
+  const kind = l.kind
+    ? h('span', { class: `tag ${KIND_TONE[l.kind] ?? ''} kd-kind`, title: l.kind === 'Confirmation' ? 'A decision: the owner said yes to what the agent proposed' : l.kind === 'Decision' ? 'The owner decided something' : 'The owner talking, not deciding' }, l.kind)
+    : h('span', { class: 'tag kd-kind kd-unjudged', title: 'The round has not classified this line yet' }, 'Not yet classified');
+  return h('div', { class: `kd-line${l.kind ? ` kd-${l.kind.toLowerCase()}` : ''}`, dataset: { ref: l.ref } },
+    h('div', { class: 'kd-line-head' },
+      h('span', { class: 'kd-when' }, l.at ? fmtTime(l.at) : 'time not recorded'), ' ',
+      h('span', { class: 'faint mono', title: 'Its place in the session' }, /^\d+$/.test(l.ref) ? `[${l.ref}]` : l.ref), ' ', kind,
+      l.sourceId && ctx.openSource ? h('button', { class: 'text-btn kd-orig', title: 'Read this part of the session as it was read', onClick: () => ctx.openSource(l.sourceId) }, 'Original') : null),
+    h('div', { class: 'kd-text', title: 'The owner’s words, verbatim' }, l.text),
+    l.kind === 'Confirmation' ? h('div', { class: 'kd-confirm' },
+      l.answers ? h('div', {}, h('small', { class: 'faint' }, 'Answers — the agent message just before, verbatim'),
+        l.answers.length > 700
+          ? h('details', { class: 'fold' }, h('summary', {}, `${l.answers.slice(0, 200)}…`), h('blockquote', { class: 'quote kd-answers' }, l.answers))
+          : h('blockquote', { class: 'quote kd-answers' }, l.answers)) : null,
+      l.confirms ? h('div', { class: 'kd-confirms' }, h('small', { class: 'faint' }, 'Confirms — in the Keeper’s words'), ' ', l.confirms) : null) : null);
+}
+
+/** The draft, read in the dialog (§6.4's reading surface). */
+export function draftBody(d, ctx) {
+  const c = d.counts;
+  return [
+    h('dl', { class: 'kv kd-meta' },
+      h('dt', {}, 'Session'), h('dd', { class: 'mono' }, `${d.session.host} · ${d.session.sessionId}`),
+      h('dt', {}, 'When'), h('dd', {}, span(d.session.startedAt, d.session.endedAt)),
+      d.session.file ? h('dt', {}, 'Log') : null, d.session.file ? h('dd', { class: 'mono faint' }, d.session.file) : null,
+      h('dt', {}, 'Owner’s lines'), h('dd', { class: 'kd-counts' }, draftCounts(d)),
+      h('dt', {}, 'Drafted'), h('dd', {}, (d.writtenBy ?? []).map((w, i) => [i ? ' · ' : null, `${w.roundLabel ?? 'a round'} ${fmtTime(w.at)}`]))),
+    h('h4', { class: 'kd-h' }, `The owner’s words (${c.lines})`),
+    c.lines ? h('div', { class: 'kd-lines' }, ...d.ownerLines.map((l) => ownerLine(l, ctx))) : h('div', { class: 'faint' }, 'The owner said nothing in this session.'),
+    h('h4', { class: 'kd-h' }, `What the agents said they did or meant to do (${d.agentSummary.length})`),
+    d.agentSummary.length
+      ? h('div', { class: 'kd-claims' }, ...d.agentSummary.map((s) => h('div', { class: 'kd-claim' },
+        h('span', { class: 'tag purple', title: 'An agent’s account of itself: a claim, until the ledger or the code shows it' }, 'Claimed'), ' ',
+        h('b', {}, s.who), ' ', h('span', { class: 'faint' }, s.at ? fmtTime(s.at) : ''), h('div', { class: 'kd-claim-text' }, s.summary))))
+      : h('div', { class: 'faint' }, 'No summary of the agents was written.'),
+    h('p', { class: 'faint kd-foot' }, 'The owner’s words and their times are taken from the session by the program, verbatim; which lines are decisions, and the agents’ summary, are the Keeper’s reading.'),
+  ];
+}
+
+/** Opens one draft in the dialog: `ctx.fetchDraft(key)` gives the SessionDraftView, `ctx.openSource(id)` an original. */
+export async function openDraft(key, ctx) {
+  let d;
+  try { d = await ctx.fetchDraft(key); } catch (e) { openDialog('Session draft', [h('p', { class: 'muted' }, `Could not load: ${e.message}`)]); return null; }
+  if (!d) { openDialog('Session draft', [h('p', { class: 'muted' }, 'No draft of this session yet.')]); return null; }
+  const dialog = openDialog(`Session draft · ${d.session.host} ${shortId(d.session.sessionId)}`, draftBody(d, ctx));
+  dialog.classList.add('draft-dialog');
+  return dialog;
+}

package/ui/k/k-views.css

@@ -0,0 +1,224 @@
+/* Increment K views: Code (§6.17), a round's tree (§6.9, §3.10), Project-scope additions (§6.7).
+   Own layer only (§6.16): reads the theme's --pk-* tokens with factory fallbacks, adds no colors of its own.
+   Cards use the one card material (--pk-card-*). Text on a card is the card's ink: --kv-ink is --pk-card-text
+   (a1's card is light parchment with dark ink, the others are dark cards with light text); muted/faint are the
+   same ink at 76%/58%, no new colors. Color-coded markers always pair a shape/word with the color. */
+.kv-card, .kv-table {
+  --kv-ink: var(--pk-card-text, #e7e7df);
+  --kv-muted: color-mix(in srgb, var(--kv-ink) 76%, transparent);
+  --kv-faint: color-mix(in srgb, var(--kv-ink) 58%, transparent);
+  /* family hues pulled halfway to the card's ink: readable as text on both light and dark cards */
+  --kv-accent: color-mix(in srgb, var(--pk-accent, #d8a24a) 55%, var(--kv-ink));
+  --kv-green: color-mix(in srgb, var(--pk-green, #7ec88a) 55%, var(--kv-ink));
+  --kv-blue: color-mix(in srgb, var(--pk-blue, #8aa8e8) 55%, var(--kv-ink));
+  --kv-red: color-mix(in srgb, var(--pk-red, #e08a8a) 55%, var(--kv-ink));
+  --kv-purple: color-mix(in srgb, var(--pk-purple, #b99ae0) 55%, var(--kv-ink));
+}
+.kv-card {
+  background: var(--pk-card-bg, var(--pk-surface, #1e1e1a));
+  background-image: var(--pk-card-texture, none);
+  border: 1px solid var(--pk-card-border, var(--pk-line, #3a3a33));
+  border-radius: var(--pk-card-radius, var(--pk-radius, 8px));
+  box-shadow: var(--pk-card-shadow, none);
+  color: var(--kv-ink);
+}
+.kv-muted { color: var(--kv-muted, var(--pk-text-muted, #a5a59b)); }
+.kv-faint { color: var(--kv-faint, var(--pk-text-faint, #7f7f76)); }
+.kv-mono { font-family: var(--pk-font-mono, ui-monospace, monospace); font-size: 0.92em; }
+.kv-strong { color: var(--kv-ink, var(--pk-text-strong, #fff)); }
+
+/* Buttons are the app's own keys (.btn.small): each theme paints them, so on a1's parchment card they are its
+   brass-lettered keys like every other button there (the card's ink on the dark key read about 1:1). .kv-btn only
+   names them for the views' checks. */
+.kv-btn { white-space: nowrap; }
+.kv-text-btn { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; color: var(--pk-accent, #7aa2f7); text-align: left; }
+.kv-text-btn:hover { text-decoration: underline; }
+.kv-card .kv-text-btn, .kv-table .kv-text-btn { color: var(--kv-accent); }
+
+.kv-tag {
+  display: inline-block; padding: 0 6px; border-radius: var(--pk-radius-sm, 4px);
+  background: var(--pk-raised, #242420); color: var(--pk-text-muted, #a5a59b);
+  font-size: 0.86em; line-height: 1.6; white-space: nowrap; border: 0;
+}
+button.kv-tag { cursor: pointer; font: inherit; font-size: 0.86em; }
+button.kv-tag:hover { color: var(--pk-text-strong, #fff); outline: 1px solid var(--pk-line-strong, #4a4a42); }
+.kv-tag.kv-green { background: var(--pk-green-bg, #1d2b1e); color: var(--pk-green, #7ec88a); }
+.kv-tag.kv-blue { background: var(--pk-blue-bg, #1c2433); color: var(--pk-blue, #8aa8e8); }
+.kv-tag.kv-purple { background: var(--pk-purple-bg, #2a2333); color: var(--pk-purple, #b99ae0); }
+.kv-tag.kv-amber { background: var(--pk-accent-soft, #33291c); color: var(--pk-accent, #d8a24a); }
+.kv-tag.kv-red { background: var(--pk-red-bg, #331f1f); color: var(--pk-red, #e08a8a); }
+.kv-tag.kv-strike { text-decoration: line-through; opacity: 0.75; }
+
+/* ─────────── Code view ─────────── */
+.kv-code { padding: 10px 14px 18px; overflow: auto; }
+.kv-head { margin: 2px 0 12px; }
+.kv-head h2 { margin: 0 0 6px; }
+.kv-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
+.kv-chip { color: var(--pk-text-muted, #a5a59b); font-size: 0.92em; }
+.kv-chip b { color: var(--pk-text, #e8e8e2); font-weight: 600; }
+
+.kv-table { width: 100%; border-collapse: collapse; background: var(--pk-card-bg, var(--pk-surface, #1e1e1a)); background-image: var(--pk-card-texture, none); border: 1px solid var(--pk-card-border, var(--pk-line, #3a3a33)); border-radius: var(--pk-card-radius, var(--pk-radius, 8px)); box-shadow: var(--pk-card-shadow, none); color: var(--kv-ink); }
+.kv-table th {
+  text-align: left; font-weight: 600; font-size: 0.86em; letter-spacing: 0.02em;
+  color: var(--kv-muted); padding: 8px 10px;
+  border-bottom: 1px solid var(--pk-card-line, var(--pk-line, #3a3a33));
+  background: var(--pk-card-head-bg, transparent);
+}
+.kv-table td { vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--pk-card-line, var(--pk-line-soft, #2e2e28)); }
+.kv-table tr:last-child td { border-bottom: 0; }
+.kv-area-cell { width: 15%; border-right: 1px solid var(--pk-card-line, var(--pk-line, #3a3a33)); }
+.kv-area-name { font-weight: 600; color: var(--kv-ink); }
+.kv-col-terr { width: 37%; }
+.kv-col-built { width: 20%; }
+.kv-col-use { width: 10%; }
+.kv-col-state { width: 18%; }
+
+.kv-tname { font-weight: 600; font-size: 1em; }
+.kv-tblock + .kv-tblock { margin-top: 6px; }
+.kv-path { color: var(--kv-faint); }
+.kv-size { color: var(--kv-muted); }
+.kv-generated { color: var(--kv-purple); }
+.kv-deps { margin-top: 3px; font-size: 0.92em; }
+.kv-gens { margin-top: 3px; font-size: 0.92em; }
+
+.kv-also { position: relative; display: inline-block; }
+.kv-also-list {
+  display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 180px;
+  padding: 6px 8px; margin: 0; list-style: none;
+  background: var(--pk-card-bg, var(--pk-raised, #242420));
+  background-image: var(--pk-card-texture, none);
+  border: 1px solid var(--pk-card-border, var(--pk-line-strong, #4a4a42));
+  border-radius: var(--pk-card-radius, var(--pk-radius, 8px));
+  box-shadow: var(--pk-card-shadow, var(--pk-shadow-float, 0 8px 24px rgba(0,0,0,0.35)));
+}
+.kv-also:hover .kv-also-list, .kv-also.kv-open .kv-also-list { display: block; }
+.kv-also-list li { padding: 2px 0; color: var(--pk-card-text, #e8e8e2); font-size: 0.92em; white-space: nowrap; }
+
+.kv-use { display: inline-flex; align-items: center; gap: 5px; font-size: 0.92em; color: var(--kv-muted); }
+.kv-use.kv-lit { color: var(--kv-accent); font-weight: 600; }
+.kv-use.kv-lit-red { color: var(--kv-red); font-weight: 600; }
+
+.kv-anomaly { padding: 6px 8px; border-radius: var(--pk-radius-sm, 4px); font-size: 0.92em; }
+.kv-anomaly + .kv-anomaly { margin-top: 6px; }
+.kv-anomaly.kv-lit { background: color-mix(in srgb, var(--pk-accent, #d8a24a) 12%, transparent); border-left: 3px solid var(--pk-accent, #d8a24a); }
+.kv-anomaly.kv-ok { background: color-mix(in srgb, var(--pk-green, #7ec88a) 12%, transparent); border-left: 3px solid var(--pk-green, #7ec88a); }
+.kv-anomaly .kv-kind { font-weight: 600; }
+.kv-anomaly.kv-lit .kv-kind { color: var(--kv-accent); }
+.kv-anomaly.kv-ok .kv-kind { color: var(--kv-green); }
+.kv-anomaly-text { margin: 2px 0 0; color: var(--kv-ink); }
+.kv-anomaly-acts { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
+.kv-evid { margin-top: 4px; font-size: 0.9em; color: var(--kv-muted); }
+.kv-evid li { margin: 1px 0; }
+.kv-evid .kv-line { display: block; padding-left: 12px; color: var(--kv-faint); }
+.kv-sendback { margin-top: 6px; padding: 5px 7px; border: 1px dashed var(--pk-blue, #8aa8e8); border-radius: var(--pk-radius-sm, 4px); }
+.kv-sendback .kv-stage { color: var(--kv-blue); font-weight: 600; }
+
+.kv-drill td { background: color-mix(in srgb, var(--kv-ink) 5%, var(--pk-card-bg, var(--pk-ground, #191916))); padding: 8px 12px; }
+.kv-files { width: 100%; border-collapse: collapse; font-size: 0.92em; }
+.kv-files th { text-align: left; font-weight: 600; color: var(--kv-faint); padding: 4px 8px; border-bottom: 1px solid var(--pk-card-line, var(--pk-line, #3a3a33)); }
+.kv-files td { padding: 4px 8px; border-bottom: 1px solid var(--pk-card-line, var(--pk-line-soft, #2e2e28)); vertical-align: top; }
+.kv-files tr:last-child td { border-bottom: 0; }
+.kv-reflist { color: var(--kv-muted); }
+.kv-none { color: var(--kv-faint, var(--pk-text-faint, #7f7f76)); }
+
+/* ─────────── round tree ─────────── */
+.kv-rounds { padding: 10px 14px 18px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
+.kv-round { padding: 10px 12px 12px; }
+.kv-round-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
+.kv-round-title { font-weight: 700; font-size: 1.05em; color: var(--kv-ink); }
+.kv-round-meta { color: var(--kv-muted); font-size: 0.92em; }
+.kv-round-note { margin-top: 4px; color: var(--kv-faint); font-size: 0.9em; }
+
+.kv-steps { list-style: none; margin: 10px 0 0; padding: 0; }
+.kv-step { border-top: 1px solid var(--pk-card-line, var(--pk-line-soft, #2e2e28)); padding: 8px 0 8px 14px; position: relative; }
+.kv-step::before { content: ''; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 3px; background: var(--pk-line-strong, #4a4a42); }
+.kv-step.kv-failed::before { background: var(--pk-red, #e08a8a); }
+.kv-digs { border: 1px dashed var(--pk-card-line, var(--pk-line, #3a3a33)); border-radius: var(--pk-radius-sm, 4px); margin: 4px 0; }
+.kv-digs-head { padding: 6px 10px 0; color: var(--kv-faint); font-size: 0.88em; }
+.kv-digs .kv-step { padding-left: 22px; }
+.kv-step-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
+.kv-step-label { font-weight: 600; color: var(--kv-ink); }
+.kv-step-path { color: var(--kv-accent); }
+.kv-model { color: var(--kv-faint); font-size: 0.88em; }
+.kv-status { font-size: 0.88em; color: var(--kv-green); }
+.kv-status.kv-bad { color: var(--kv-red); }
+
+.kv-timing { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; font-size: 0.88em; color: var(--kv-muted); }
+.kv-bar { display: inline-flex; width: 180px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--pk-raised, #242420); vertical-align: middle; }
+.kv-bar span { display: block; height: 100%; }
+.kv-seg-gen { background: var(--pk-accent, #d8a24a); }
+.kv-seg-tool { background: var(--pk-blue, #8aa8e8); }
+.kv-seg-queue { background: var(--pk-purple, #b99ae0); }
+.kv-seg-parse { background: var(--pk-red, #e08a8a); }
+.kv-seg-other { background: var(--pk-line-strong, #4a4a42); }
+.kv-legend { display: inline-flex; gap: 4px; align-items: center; }
+.kv-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
+.kv-usage { margin-top: 3px; font-size: 0.88em; color: var(--kv-muted); }
+.kv-docs { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
+.kv-doc-panel { margin: 6px 0 2px; padding: 8px 12px; border: 1px solid var(--pk-card-line, var(--pk-line, #3a3a33)); border-radius: var(--pk-radius-sm, 4px); background: color-mix(in srgb, var(--kv-ink) 5%, var(--pk-card-bg, var(--pk-ground, #191916))); color: var(--kv-ink); max-width: 960px; }
+.kv-doc-panel h1, .kv-doc-panel h2, .kv-doc-panel h3 { margin: 8px 0 4px; }
+.kv-doc-panel table { border-collapse: collapse; }
+.kv-doc-panel th, .kv-doc-panel td { border: 1px solid var(--pk-card-line, var(--pk-line-soft, #2e2e28)); padding: 3px 8px; }
+.kv-doc-loading { color: var(--kv-faint); }
+
+.kv-round-sum { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
+.kv-sum-cell { padding: 7px 9px; border: 1px solid var(--pk-card-line, var(--pk-line-soft, #2e2e28)); border-radius: var(--pk-radius-sm, 4px); font-size: 0.9em; }
+.kv-sum-title { font-weight: 600; color: var(--kv-muted); font-size: 0.88em; margin-bottom: 3px; }
+.kv-sum-cell ul { margin: 0; padding-left: 16px; }
+.kv-sum-cell li { margin: 1px 0; }
+.kv-sum-cell.kv-lit { border-color: var(--pk-accent, #d8a24a); }
+.kv-sum-cell.kv-lit .kv-sum-title { color: var(--kv-accent); }
+
+/* ─────────── Project scope additions ─────────── */
+.kv-scope { padding: 10px 14px 18px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
+.kv-section { padding: 9px 12px 11px; }
+.kv-section > h3 { margin: 0 0 7px; font-size: 1em; color: var(--kv-ink); }
+.kv-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 0.92em; }
+.kv-kv dt { color: var(--kv-muted); margin: 0; }
+.kv-kv dd { margin: 0; color: var(--kv-ink); }
+.kv-mini { width: 100%; border-collapse: collapse; font-size: 0.92em; }
+.kv-mini th { text-align: left; font-weight: 600; color: var(--kv-faint); padding: 3px 8px 3px 0; border-bottom: 1px solid var(--pk-card-line, var(--pk-line, #3a3a33)); }
+.kv-mini td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--pk-card-line, var(--pk-line-soft, #2e2e28)); vertical-align: top; }
+.kv-mini tr:last-child td { border-bottom: 0; }
+.kv-missing { color: var(--kv-accent); }
+.kv-history { color: var(--kv-faint); text-decoration: line-through; }
+.kv-note-block { padding: 8px 10px; border: 1px dashed var(--pk-card-border, var(--pk-line, #3a3a33)); border-radius: var(--pk-radius-sm, 4px); color: var(--kv-muted); font-size: 0.92em; }
+.kv-note-block b { color: var(--kv-ink); }
+
+/* ─────────── QC AY: the jumps and the honest states of Code; the drafts of a round ─────────── */
+.kv-gone { margin-top: 3px; color: var(--kv-accent); font-size: 0.92em; }
+.kv-use.kv-unplanned { color: var(--kv-ink); }
+.kv-sendback-acts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
+.kv-table tr.kv-target > td { box-shadow: inset 3px 0 0 var(--pk-accent, #d8a24a); }
+.kv-drafts { margin-top: 5px; font-size: 0.9em; }
+.kv-drafts > summary { cursor: pointer; }
+.kv-draft-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.kv-draft-list li { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
+
+/* ─────────── QC AY package C: what package A added, in sight ─────────── */
+/* What the ledger keeps without reading it (Project scope, ScopeKView ledger.notRead). */
+.kv-notread { display: flex; flex-direction: column; gap: 4px; }
+.kv-notread-paths { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; display: flex; flex-direction: column; gap: 1px; }
+/* The sweeps the program added to a deepening (RoundView.sweepsAdded): the round's note and each step's tag. */
+.kv-sweeps-added ul { margin: 2px 0 0; padding-left: 18px; }
+.kv-sweeps-added li { margin: 1px 0; }
+/* What of a round did not finish (the coverage's failure list): each with why, and Retry or Continue. */
+.kv-failures { color: var(--kv-red); }
+.kv-failures ul { margin: 2px 0 0; padding-left: 18px; }
+.kv-failures li { margin: 3px 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
+.kv-fail-reason { color: var(--kv-ink); overflow-wrap: anywhere; min-width: 0; flex: 1 1 320px; }
+.kv-added-tag { cursor: help; }
+/* A deepening read by reading assignments: each sweep with its reading line, its assignments under it. */
+.kv-dig-path { padding: 6px 10px 2px; border-top: 1px dashed var(--pk-card-line, var(--pk-line, #3a3a33)); }
+.kv-dig-path:first-of-type { border-top: 0; }
+.kv-dig-path-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 0.94em; }
+.kv-reading { margin-top: 3px; font-size: 0.88em; color: var(--kv-muted); overflow-wrap: anywhere; }
+.kv-accounted { margin-top: 3px; }
+.kv-accounted > summary { cursor: pointer; }
+.kv-accounted ul { margin: 4px 0 2px; padding-left: 18px; }
+.kv-accounted li { margin: 2px 0; }
+.kv-dig-path .kv-step { padding-left: 12px; }
+/* D99: the main agent's stages, its lanes and the coverage check sit under its step, in the same frames as the sweeps. */
+.kv-main-body { margin-top: 6px; }
+.kv-stages { margin: 2px 0 6px; }
+.kv-coverage-body { padding: 6px 10px 6px; }