@arjunkhera/atlas 0.3.24 → 0.3.25

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "Atlas: the delivery lifecycle, its crews and the Atlas tools, for any repository.",
   "author": {
     "name": "Arjun Khera"

package/door/cli.mjs

@@ -25,6 +25,7 @@ import { install, upgrade, doctor } from './lib/install.mjs';
 import { checkPaths, LIMITS } from './lib/ste.mjs';
 import { checkDesignFolder, designFolderOf, repoRootFrom } from './lib/design.mjs';
 import { writeDesignPage, readTracker } from './lib/design-build.mjs';
+import { writeViewPage, viewCapabilities } from './lib/view.mjs';
 import { loadPrivateTerms } from './lib/privacy.mjs';
 import { checkCommand as testsCheck, writeCommand as testsWrite } from './lib/tests.mjs';
 import { proofCommand as testsProof } from './lib/proof.mjs';
@@ -59,6 +60,10 @@ const HELP = `atlas — the door into a repo's Atlas files
       --out <file>                     the page; default docs/artifacts/<folder name>.html
       --draft                          build even when the check has findings, and mark the page a draft
 
+  atlas view build --product <id>      build the project view page of one product: the four views, read live from the tracker
+      --name <name>                    the product's name on the page; default the id with a capital
+      --out <file>                     the page; default docs/artifacts/<id>-view.html
+
   atlas tests check --root <area>      run the link check on the tests of an area
       --halves <list>                  static, lint, run; default all three
       --evidence <dir>                 where the evidence files are; default <area>/test/evidence
@@ -120,6 +125,7 @@ export const FLAGS = Object.freeze({
   check: { root: 'optional', repo: 'value', 'fail-on': 'value' },
   ste: { share: 'switch', terms: 'value' },
   design: { tracker: 'value', out: 'value', draft: 'switch', root: 'optional' },
+  view: { product: 'value', name: 'value', out: 'value' },
   tests: { root: 'optional', halves: 'value', evidence: 'value', 'guards-from': 'value', tests: 'value', 'dry-run': 'switch', run: 'value', own: 'value', base: 'value', covers: 'switch', findings: 'value', repo: 'value', max: 'value', bot: 'value', since: 'value', out: 'value', text: 'switch', json: 'switch' },
   install: { local: 'switch', from: 'value', 'skip-global': 'switch', yes: 'switch' },
   upgrade: { version: 'optional', yes: 'switch' },
@@ -296,6 +302,16 @@ function designCommand(chosen) {
   return count ? 1 : 0;
 }
 
+function viewCommand(chosen) {
+  if (chosen._[1] !== 'build' || chosen._.length > 2) throw new Error('use atlas view build --product <id>');
+  const product = chosen.product;
+  const out = resolve(chosen.out ?? join('docs', 'artifacts', `${product}-view.html`));
+  const page = writeViewPage(out, { packageRoot: PACKAGE_ROOT, product, name: chosen.name, version: ATLAS_VERSION });
+  line(`Wrote ${out}: the project view of ${page.name} (product ${page.product}). It holds no records; it reads them at open.`);
+  line(`Publish it with this capability, and no other: ${JSON.stringify(viewCapabilities())}`);
+  return 0;
+}
+
 async function testsCommand(chosen) {
   const root = rootOf(chosen);
   const what = chosen._[1];
@@ -343,6 +359,7 @@ export async function main(argv = process.argv.slice(2)) {
     case 'check': return checkCommand(chosen);
     case 'ste': return steCommand(chosen);
     case 'design': return designCommand(chosen);
+    case 'view': return viewCommand(chosen);
     case 'tests': return testsCommand(chosen);
     default: throw new Error(`there is no verb "${command}". Run "atlas help".`);
   }

package/door/lib/view.mjs

@@ -0,0 +1,46 @@
+// The project view page builder: `atlas view build`. It puts the view rules
+// (work/lib/view-rules.mjs) and one product id into the page template
+// (view/page.html), and writes one page. The page holds no record data: it
+// reads the tracker at open, through the viewer's Engram connector.
+// Design: docs/design-docs/project-view (tracker item 6dd1761a).
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+
+// The one connector grant the page needs, for the Artifact publish. Both
+// tools only read.
+export const VIEW_CONNECTOR = Object.freeze({ server: 'Engram', tools: Object.freeze(['entities_list', 'get']) });
+export const viewCapabilities = () => ({ mcp: { servers: [{ server: VIEW_CONNECTOR.server, tools: [...VIEW_CONNECTOR.tools] }] } });
+
+const PRODUCT_ID = /^[a-z0-9][a-z0-9-]{0,63}$/;
+const quoted = (value) => JSON.stringify(String(value)).slice(1, -1).replace(/</g, '\\u003c');
+const plain = (value) => String(value).replace(/[&<>"]/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[ch]);
+
+export function buildViewPage({ packageRoot, product, name, version }) {
+  if (!PRODUCT_ID.test(String(product ?? ''))) throw new Error('give a product id: atlas view build --product <id>, such as atlas');
+  const label = String(name ?? '').trim() || product.charAt(0).toUpperCase() + product.slice(1);
+  if (label.length > 80) throw new Error('--name is at most 80 characters');
+  const template = readFileSync(join(packageRoot, 'view', 'page.html'), 'utf8');
+  const rules = readFileSync(join(packageRoot, 'work', 'lib', 'view-rules.mjs'), 'utf8');
+  if (/<\/script/i.test(rules)) throw new Error('view-rules.mjs holds "</script", so it cannot go into a page');
+  const swaps = {
+    '/*@@VIEW_RULES@@*/': rules,
+    '@@PRODUCT@@': quoted(product),
+    '@@PRODUCT_NAME@@': quoted(label),
+    '@@ATLAS_VERSION@@': quoted(version ?? ''),
+    '@@TITLE@@': plain(`${label} project view`),
+  };
+  let html = template;
+  for (const [mark, value] of Object.entries(swaps)) {
+    if (!html.includes(mark)) throw new Error(`the page template has no ${mark}`);
+    html = html.split(mark).join(value);
+  }
+  if (/@@[A-Z_]+@@/.test(html)) throw new Error('the page template has a mark the builder does not fill');
+  return { html, product, name: label };
+}
+
+export function writeViewPage(out, options) {
+  const page = buildViewPage(options);
+  mkdirSync(dirname(out), { recursive: true });
+  writeFileSync(out, page.html);
+  return page;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arjunkhera/atlas",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "Atlas: the delivery lifecycle, its crews and the Atlas tools, as a Claude Code plugin for any repository.",
   "type": "module",
   "license": "UNLICENSED",
@@ -21,6 +21,7 @@
     "work/",
     "shape/",
     "tests/",
+    "view/",
     "skills/",
     "agents/",
     ".claude-plugin/",

package/skills/lead/SKILL.md

@@ -102,6 +102,7 @@ set. A test keeps the two lists equal.
 | `atlas ste` | Before each publish; `--share` before a page goes to anyone else |
 | `atlas tests` | `write` puts the test kit in an area. `check` runs before a merge. `proof`, `verdict`, `named`, `covers` and `rerun` read the results of a run. `sweep` and `issues` run the daily sweep |
 | `atlas design` | `folder` to learn where designs live; `check` before you show a design; `build` to make its page |
+| `atlas view` | `build --product <id>` makes the project view page of one product, when the owner asks for it or after an Atlas release changes it. Publish it with only the grant the command prints |
 
 A person merges every file that `atlas tooling` writes.
 A person merges every file that `atlas tests write` writes.

package/view/page.html

@@ -0,0 +1,563 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>@@TITLE@@</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&amp;family=IBM+Plex+Mono:wght@400;500&amp;family=Source+Serif+4:opsz,wght@8..60,600&amp;display=swap">
+<style>
+/* The project view: the four views locked on the canvas "Project view"
+   (9 to 14 October 2026). Every colour is a token; the dark set mirrors the
+   light set. Built by `atlas view build`; do not edit a built copy. */
+:root{color-scheme:light;
+--paper:#fbfbf9;--card:#ffffff;--ink:#1b1f1d;--body:#3d4743;--muted:#5b6661;--quiet:#6b7570;
+--line:#e3e5e1;--line-soft:#f0f1ee;--line-strong:#c9cec9;--rail:#f0f2ef;--hover:#f6f8fc;
+--link-ink:#1b3566;--link-bg:#f4f6fa;--link-line:#c6d4ec;--sel-bg:#eef3fb;--sel-bar:#2a4d8f;
+--go:#2a4d8f;--go-bg:#dbe5f5;--done:#2f6b57;--done-bg:#cfe3d8;--done-ink:#1f5a46;--ready-bg:#e7f1ec;
+--you-ink:#7a4300;--you-bg:#fdf3e3;--you-bar:#e9a64a;--you-mark:#b8650f;--before:#b8650f;--after:#7d9bd0;
+--grey-bg:#f0f2ef;--est-a:#eceeeb;--est-b:#ffffff;--est-line:#b8bfbb;--danger:#8f2a24;--danger-bg:#fbeceb;
+--shadow:0 1px 2px rgba(27,31,29,.12);--menu-shadow:0 8px 24px rgba(27,31,29,.16)}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
+--paper:#151816;--card:#1d211f;--ink:#e8ebe8;--body:#c9cfcb;--muted:#a3ada8;--quiet:#8f9a95;
+--line:#2f3532;--line-soft:#262b28;--line-strong:#3d4440;--rail:#232825;--hover:#232a33;
+--link-ink:#b9cdf0;--link-bg:#1f2735;--link-line:#3a4b68;--sel-bg:#1f2a3b;--sel-bar:#7fa2e0;
+--go:#7fa2e0;--go-bg:#24324a;--done:#7cc3a6;--done-bg:#1f3a30;--done-ink:#a6dcc4;--ready-bg:#1f3329;
+--you-ink:#f0c58a;--you-bg:#3a2c18;--you-bar:#c98a35;--you-mark:#e0a050;--before:#e0a050;--after:#7f9fd6;
+--grey-bg:#262b28;--est-a:#2a302d;--est-b:#1d211f;--est-line:#4a524e;--danger:#f0a39d;--danger-bg:#3a2220;
+--shadow:0 1px 2px rgba(0,0,0,.5);--menu-shadow:0 8px 24px rgba(0,0,0,.5)}}
+:root[data-theme="dark"]{color-scheme:dark;
+--paper:#151816;--card:#1d211f;--ink:#e8ebe8;--body:#c9cfcb;--muted:#a3ada8;--quiet:#8f9a95;
+--line:#2f3532;--line-soft:#262b28;--line-strong:#3d4440;--rail:#232825;--hover:#232a33;
+--link-ink:#b9cdf0;--link-bg:#1f2735;--link-line:#3a4b68;--sel-bg:#1f2a3b;--sel-bar:#7fa2e0;
+--go:#7fa2e0;--go-bg:#24324a;--done:#7cc3a6;--done-bg:#1f3a30;--done-ink:#a6dcc4;--ready-bg:#1f3329;
+--you-ink:#f0c58a;--you-bg:#3a2c18;--you-bar:#c98a35;--you-mark:#e0a050;--before:#e0a050;--after:#7f9fd6;
+--grey-bg:#262b28;--est-a:#2a302d;--est-b:#1d211f;--est-line:#4a524e;--danger:#f0a39d;--danger-bg:#3a2220;
+--shadow:0 1px 2px rgba(0,0,0,.5);--menu-shadow:0 8px 24px rgba(0,0,0,.5)}
+*{box-sizing:border-box}
+body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14px;line-height:1.45}
+button{font-family:inherit;color:inherit;font-size:inherit}
+.wrap{max-width:1440px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:12px}
+.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px}
+.brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
+.brand b{font-family:"Source Serif 4",Georgia,serif;font-size:17px;font-weight:600}
+.sep{color:var(--quiet)}
+.needs{border:0;font-size:13px;padding:6px 12px;min-height:32px;border-radius:99px;background:var(--you-bg);color:var(--you-ink);cursor:pointer}
+.needs.zero{background:var(--grey-bg);color:var(--muted)}
+.tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
+.switch{display:flex;flex-wrap:wrap;gap:4px;background:var(--rail);border-radius:8px;padding:3px}
+.switch button{border:0;padding:6px 12px;min-height:34px;border-radius:6px;background:transparent;color:var(--body);cursor:pointer}
+.switch button[aria-pressed="true"]{background:var(--card);box-shadow:var(--shadow);color:var(--ink);font-weight:600}
+.meta{font-size:12px;color:var(--quiet);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.ghost{border:1px solid var(--line-strong);background:var(--card);border-radius:6px;padding:4px 10px;min-height:30px;cursor:pointer;font-size:12px}
+.card{background:var(--card);border:1px solid var(--line-strong);border-radius:10px}
+.banner{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 14px;background:var(--link-bg);border:1px solid var(--link-line);border-radius:10px;font-size:13px}
+.banner b{color:var(--link-ink)}
+.k-before{color:var(--before);font-weight:600}.k-after{color:var(--link-ink);font-weight:600}
+.notice{padding:16px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);display:flex;flex-direction:column;gap:6px}
+.notice.bad{border-color:var(--danger);background:var(--danger-bg)}
+.group{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;font-size:12px;font-weight:600;letter-spacing:.06em;padding:8px 16px;background:var(--grey-bg);color:var(--body);text-align:left;cursor:pointer;min-height:34px}
+.group.you{background:var(--you-bg);color:var(--you-ink)}
+.row{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 6px;min-height:42px;border-bottom:1px solid var(--line-soft);background:var(--card);box-shadow:inset 3px 0 0 transparent;transition:opacity .15s}
+.row:hover{background:var(--hover)}
+.row.sel{background:var(--sel-bg);box-shadow:inset 3px 0 0 var(--sel-bar)}
+.row.before{box-shadow:inset 3px 0 0 var(--before)}.row.after{box-shadow:inset 3px 0 0 var(--after)}
+.row.dim{opacity:.4}
+.indent{flex:none;align-self:stretch}
+.caret{width:28px;height:28px;flex:none;border:0;background:none;cursor:pointer;color:var(--muted);padding:0;font-size:12px}
+.caret.none{visibility:hidden}
+.dot{width:14px;height:14px;flex:none;border-radius:99px;border:1.5px solid var(--quiet)}
+.dot.proposed{border-style:dashed}
+.dot.active{border-color:var(--go);background:conic-gradient(var(--go) 0 40%,transparent 0)}
+.dot.done{border-color:var(--done);background:var(--done)}
+.dot.dropped{opacity:.5}
+.dot.blocked{background:linear-gradient(135deg,transparent 44%,var(--quiet) 44% 56%,transparent 56%)}
+.dot.paused{background:linear-gradient(90deg,transparent 30%,var(--quiet) 30% 42%,transparent 42% 58%,var(--quiet) 58% 70%,transparent 70%)}
+.body{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
+.title{border:0;background:none;padding:4px 0;cursor:pointer;text-align:left;min-width:0;max-width:100%;color:var(--ink)}
+.title.l0{font-weight:600}.title.l1{font-weight:500}
+.title.grey{color:var(--muted)}
+.tag{font-size:12px;padding:1px 8px;border-radius:99px;white-space:nowrap;background:var(--grey-bg);color:var(--body)}
+.tag.ready{background:var(--ready-bg);color:var(--done-ink)}
+.tag.you{background:var(--you-bg);color:var(--you-ink)}
+.tag.go{background:var(--go-bg);color:var(--link-ink)}
+.tag.with{background:transparent;color:var(--quiet);border:1px solid var(--line)}
+.tag.done{background:var(--done-bg);color:var(--done-ink)}
+.chip{border:1px solid var(--link-line);background:var(--link-bg);color:var(--link-ink);font-size:12px;padding:2px 8px;min-height:26px;border-radius:99px;cursor:pointer;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
+.chip:hover{filter:brightness(.96)}
+.count{font-size:12px;color:var(--quiet);flex:none}
+.dots{flex:none;width:32px;height:32px;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;position:relative}
+.dots:hover,.dots[aria-expanded="true"]{border-color:var(--line-strong);background:var(--card)}
+.menu{position:absolute;z-index:20;min-width:210px;background:var(--card);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--menu-shadow);padding:6px;display:flex;flex-direction:column}
+.menu .h{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--quiet);padding:6px 8px 2px}
+.menu button{border:0;background:none;text-align:left;padding:7px 8px;min-height:34px;border-radius:5px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
+.menu button:hover{background:var(--hover)}
+.menu .k{color:var(--quiet);font-family:"IBM Plex Mono",monospace;font-size:11px}
+.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
+.split{display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,7fr);gap:12px;align-items:start}
+@media (max-width:900px){.split{grid-template-columns:1fr}}
+.stack{display:flex;flex-direction:column;gap:10px}
+.panel{background:var(--card);border:1px solid var(--line-strong);border-radius:10px}
+.phead{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
+.pl{display:flex;gap:10px;min-width:0}
+.badge{flex:none;width:24px;height:24px;border-radius:6px;background:var(--ink);color:var(--card);font-family:"IBM Plex Mono",monospace;font-size:12px;display:flex;align-items:center;justify-content:center}
+.path{font-size:12px;color:var(--quiet)}
+.phead h2{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:19px;font-weight:600}
+.pr{display:flex;align-items:flex-start;gap:4px;position:relative;flex:none}
+.facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 12px;padding:12px 14px;font-size:13px}
+.facts>span:nth-child(odd){color:var(--quiet)}
+.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:0 14px 8px;border-bottom:1px solid var(--line)}
+.tabs button{border:0;background:none;padding:6px 10px;min-height:32px;border-radius:6px;cursor:pointer;color:var(--body)}
+.tabs button[aria-pressed="true"]{background:var(--rail);color:var(--ink);font-weight:600}
+.entries{display:flex;flex-direction:column}
+.entry{padding:10px 14px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px;font-size:13px}
+.entry .eh{display:flex;justify-content:space-between;gap:8px;color:var(--quiet);font-size:12px}
+.entry .ev{white-space:pre-wrap;overflow-wrap:anywhere}
+.opts{display:flex;flex-wrap:wrap;gap:6px}
+.fold1{padding:10px 14px;font-size:13px;color:var(--body)}
+.empty{padding:14px;color:var(--quiet);font-size:13px}
+.cols{display:flex;overflow-x:auto;align-items:stretch}
+.col{flex:0 0 280px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:300px}
+.colh{display:flex;justify-content:space-between;padding:10px 12px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--quiet);border-bottom:1px solid var(--line)}
+.citem{border-bottom:1px solid var(--line-soft);padding:6px 10px;display:flex;flex-direction:column;gap:4px}
+.citem.sel{background:var(--sel-bg);box-shadow:inset 3px 0 0 var(--sel-bar)}
+.citem.dim{opacity:.4}
+.citem>button{border:0;background:none;display:flex;justify-content:space-between;gap:8px;text-align:left;cursor:pointer;padding:2px 0;min-height:30px;align-items:center}
+.citem .sub{display:block;font-size:12px;color:var(--quiet)}
+.selpane{flex:1 0 340px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:300px}
+.watch{display:flex;flex-direction:column;gap:8px}
+.watch .h{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--quiet)}
+.pins{display:flex;flex-wrap:wrap;gap:8px}
+.pin{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-strong);background:var(--card);border-radius:8px;min-width:240px;max-width:360px}
+.pin .t{display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}
+.tl{overflow-x:auto}
+.tlin{min-width:760px}
+.tlh,.tlr{display:flex}
+.tll{flex:0 0 300px;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;border-right:1px solid var(--line);min-width:0}
+@media (max-width:700px){.tll{flex-basis:200px}}
+.tlg{flex:1 1 auto;position:relative;min-height:40px}
+.tlh{border-bottom:1px solid var(--line);background:var(--rail)}
+.tlh .tll{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--quiet);padding:10px}
+.tick{position:absolute;top:0;height:40px;display:flex;align-items:center;padding-left:4px;font-size:11px;color:var(--muted);border-left:1px solid var(--line)}
+.tlr{border-bottom:1px solid var(--line-soft);min-height:40px}
+.tlr.sel{background:var(--sel-bg)}.tlr.dim{opacity:.42}
+.tlr .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
+.b{position:absolute;top:9px;height:22px;border-radius:4px;font-size:11px;line-height:20px;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:1px}
+.b.parent{top:13px;height:14px;line-height:12px}
+.b.done{background:var(--done-bg);border:1px solid var(--done);color:var(--done-ink)}
+.b.going{background:var(--go-bg);border:1px solid var(--go);color:var(--link-ink)}
+.b.planned{background:var(--card);border:1.5px solid var(--go);color:var(--link-ink)}
+.b.estimate{background:repeating-linear-gradient(135deg,var(--est-a) 0 4px,var(--est-b) 4px 8px);border:1px solid var(--est-line);color:var(--body)}
+.m-ask{position:absolute;top:14px;width:11px;height:11px;transform:rotate(45deg);background:var(--you-mark);margin-left:-5px}
+.m-wait{position:absolute;top:32px;height:4px;border-radius:2px;background:var(--you-bar)}
+.m-dead{position:absolute;top:4px;bottom:4px;width:2px;background:var(--danger)}
+.today{position:absolute;top:0;bottom:0;width:2px;background:var(--you-mark);pointer-events:none}
+.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--body);align-items:center}
+.legend span{display:flex;align-items:center;gap:6px}
+.sw{width:26px;height:12px;border-radius:3px;display:inline-block}
+.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--card);padding:10px 14px;border-radius:8px;box-shadow:var(--menu-shadow);max-width:min(92vw,560px);display:flex;flex-direction:column;gap:6px;font-size:13px}
+.toast textarea{width:100%;min-height:64px;font:12px "IBM Plex Mono",monospace;color:var(--ink);background:var(--card);border-radius:6px;border:0;padding:6px}
+.foot{font-size:12px;color:var(--quiet)}
+.needlist .entry{cursor:pointer}
+.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+</style>
+</head>
+<body>
+<div class="wrap" id="app"><div class="notice">Loading the tracker…</div></div>
+<script type="module">
+// ---- The view rules, from packages/atlas/work/lib/view-rules.mjs ----
+/*@@VIEW_RULES@@*/
+// ---- The page ----
+const PRODUCT = "@@PRODUCT@@";
+const PRODUCT_NAME = "@@PRODUCT_NAME@@";
+const ATLAS_VERSION = "@@ATLAS_VERSION@@";
+const SERVER = 'Engram';
+const PAGE = 200, MAX_RECORDS = 2000;
+// DAY comes from the view rules above.
+const VIEWS = [['outline', 'E1 · Outline'], ['detail', 'E3 · Outline and detail'], ['columns', 'E2 · Columns'], ['timeline', 'Timeline']];
+
+const store = { get(key) { try { return localStorage.getItem(`atlas-view:${PRODUCT}:${key}`); } catch { return null; } }, set(key, value) { try { localStorage.setItem(`atlas-view:${PRODUCT}:${key}`, value); } catch {} } };
+const S = { view: VIEWS.some(([key]) => key === store.get('view')) ? store.get('view') : 'outline', sel: null, closed: {}, opened: {}, showClosed: false, stack: [], folded: {}, tabs: {}, path: [], pins: [], menu: null, needs: false, model: null, error: null, readAt: null, loading: true, cut: false };
+
+// ---- Small DOM helpers. Every text from the tracker goes in as text. ----
+function h(tag, attrs, ...kids) {
+  const el = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs ?? {})) {
+    if (value === undefined || value === null || value === false) continue;
+    if (key === 'class') el.className = value;
+    else if (key === 'style') el.setAttribute('style', value);
+    else if (key.startsWith('on')) el.addEventListener(key.slice(2), value);
+    else el.setAttribute(key, value === true ? '' : String(value));
+  }
+  for (const kid of kids.flat(Infinity)) if (kid !== null && kid !== undefined && kid !== false) el.append(kid instanceof Node ? kid : document.createTextNode(String(kid)));
+  return el;
+}
+const set = (patch) => { Object.assign(S, patch); render(); };
+const M = () => S.model;
+const titleOf = (id) => M().items.get(id)?.title ?? id;
+const short = (text, max = 42) => oneLine(text, max);
+const dateOf = (value) => (value ? String(value).slice(0, 10) : '');
+
+// ---- Reading the tracker through the Engram connector ----
+function payloadOf(result) {
+  let value = result?.payload;
+  if (typeof value === 'string') {
+    // Engram adds a line after its JSON that marks the data as untrusted.
+    const cut = value.indexOf('<<<');
+    try { value = JSON.parse(cut >= 0 ? value.slice(0, cut) : value); } catch { value = null; }
+  }
+  if (value && Array.isArray(value.entities)) return value;
+  for (const block of result?.content ?? []) {
+    if (block?.type !== 'text') continue;
+    const text = String(block.text ?? ''); const cut = text.indexOf('<<<');
+    try { const parsed = JSON.parse(cut >= 0 ? text.slice(0, cut) : text); if (parsed && Array.isArray(parsed.entities)) return parsed; } catch {}
+  }
+  throw Object.assign(new Error('The connector answered in a shape this page does not read.'), { code: 'shape' });
+}
+async function load() {
+  set({ loading: true, error: null });
+  let mcp = null;
+  try { mcp = await window.claude?.use?.('mcp'); } catch { mcp = null; }
+  if (!mcp) { set({ loading: false, error: { code: 'no_mcp' } }); return; }
+  const records = []; let offset = 0, total = Infinity;
+  try {
+    while (offset < total && offset < MAX_RECORDS) {
+      const result = await mcp.callTool(SERVER, 'entities_list', { tag: `product:${PRODUCT}`, state: 'active', limit: PAGE, offset, order: 'created_at_asc' });
+      const page = payloadOf(result);
+      total = Number(page.total ?? page.entities.length);
+      records.push(...page.entities);
+      if (!page.entities.length) break;
+      offset += page.entities.length;
+    }
+  } catch (error) { set({ loading: false, error: { code: error?.code ?? 'upstream_error', message: error?.message ?? String(error) } }); return; }
+  const readAt = new Date().toISOString();
+  const model = buildModel(records, { product: PRODUCT, now: readAt });
+  const opened = {};
+  for (const id of model.groups.find((g) => g.key === 'active')?.ids ?? []) opened[id] = true;
+  set({ loading: false, model, readAt, cut: total > MAX_RECORDS, opened: Object.keys(S.opened).length ? S.opened : opened, stack: S.stack.filter((id) => model.items.has(id)) });
+}
+
+// ---- Copy a line for a thread. The page never writes to the tracker. ----
+let toastTimer = null;
+function toast(text, line) {
+  document.querySelector('.toast')?.remove();
+  const box = h('div', { class: 'toast', role: 'status' }, h('span', {}, text), line ? h('textarea', { readonly: true, 'aria-label': 'The line to paste in a thread' }, line) : null);
+  document.body.append(box);
+  clearTimeout(toastTimer); toastTimer = setTimeout(() => box.remove(), line ? 9000 : 3000);
+}
+async function copyLine(line) {
+  S.menu = null; render();
+  try { await navigator.clipboard.writeText(line); toast('Copied. Paste it in a thread, and the lead does it.'); }
+  catch { toast('Copy it from here, then paste it in a thread:', line); }
+}
+const ask = {
+  question: (id) => `${PRODUCT_NAME}: ask me a question on item ${id} (${titleOf(id)}): `,
+  link: (id) => `${PRODUCT_NAME}: add a link to item ${id} (${titleOf(id)}): `,
+  split: (id) => `${PRODUCT_NAME}: split item ${id} (${titleOf(id)}) into parts: `,
+  park: (id) => `${PRODUCT_NAME}: park item ${id} (${titleOf(id)}), because `,
+  id: (id) => `${titleOf(id)} · item ${id}`,
+  answer: (question, item, option) => `${PRODUCT_NAME}: answer question ${question} on item ${item} (${titleOf(item)}): ${option}`,
+};
+
+// ---- Shared pieces: the state of a row, its chips, the chain ----
+function lightOf(id) {
+  if (!S.sel || !M().items.has(S.sel)) return '';
+  if (id === S.sel) return 'sel';
+  const chain = M().chainOf(S.sel);
+  if (chain.before.includes(id)) return 'before';
+  if (chain.after.includes(id)) return 'after';
+  return 'dim';
+}
+function focus(id) {
+  const patch = { sel: id, menu: null };
+  const opened = { ...S.opened };
+  for (const parent of M().ancestorsOf(id)) opened[parent] = true;
+  patch.opened = opened;
+  const group = M().groups.find((g) => g.ids.includes(M().ancestorsOf(id).at(-1) ?? id));
+  if (group?.folded) patch.showClosed = true;
+  if (S.view === 'detail' && !S.stack.includes(id)) patch.stack = [id, ...S.stack].slice(0, 3);
+  if (S.view === 'columns') patch.path = [...M().ancestorsOf(id).reverse(), id];
+  set(patch);
+  requestAnimationFrame(() => document.querySelector(`[data-id="${CSS.escape(id)}"]`)?.scrollIntoView({ block: 'nearest' }));
+}
+function statusBits(id, { compact = false } = {}) {
+  const st = M().stateOf(id);
+  const out = [];
+  if (st.kind === 'ready') out.push(h('span', { class: 'tag ready' }, 'Ready to start'));
+  if (st.kind === 'doing') out.push(h('span', { class: 'tag go' }, `Going on${st.stage ? ` · ${st.stage}` : ''}`));
+  if (st.questions.length) out.push(h('span', { class: 'tag you' }, `Waits on you${compact ? '' : `: ${short(st.questions[0].fields?.text ?? st.questions[0].title, 48)}`}`));
+  for (const row of st.blockers) out.push(h('button', { class: 'chip', onclick: (event) => { event.stopPropagation(); focus(row.item); }, title: `Blocked by ${row.title ?? row.item}. Click to light its chain.` }, `Blocked by ${short(row.title ?? row.item, compact ? 22 : 40)}`));
+  if (st.waitsWith) out.push(h('span', { class: 'tag with' }, `waits with ${short(titleOf(st.waitsWith), 32)}`));
+  if (st.kind === 'paused') out.push(h('span', { class: 'tag' }, 'Paused'));
+  if (st.kind === 'done') out.push(h('span', { class: 'tag done' }, 'Done'));
+  if (st.kind === 'dropped') out.push(h('span', { class: 'tag' }, 'Dropped'));
+  if (!compact && st.blocks.length && !['done', 'dropped'].includes(st.kind)) out.push(h('span', { class: 'tag' }, `Blocks ${st.blocks.length === 1 ? short(st.blocks[0].title, 30) : `${st.blocks.length} items`}`));
+  return out;
+}
+const dotOf = (id) => { const st = M().stateOf(id); return h('span', { class: `dot ${st.lifecycle} ${st.kind === 'blocked' || st.kind === 'waits-with' ? 'blocked' : ''}`, 'aria-hidden': 'true' }); };
+const indentOf = (depth) => h('span', { class: 'indent', style: `width:${depth * 20}px;background:repeating-linear-gradient(90deg,transparent 0 13px,var(--line) 13px 14px,transparent 14px 20px)` });
+
+function menuFor(id, where, extra = []) {
+  const key = `${where}:${id}`;
+  const open = S.menu === key;
+  const button = h('button', { class: 'dots', 'aria-label': `Actions for ${titleOf(id)}`, 'aria-haspopup': 'menu', 'aria-expanded': open ? 'true' : 'false', title: 'Actions', onclick: (event) => { event.stopPropagation(); set({ menu: open ? null : key }); } }, h('span', { 'aria-hidden': 'true' }, '⋯'));
+  if (!open) return button;
+  const item = (label, fn, hint) => h('button', { role: 'menuitem', onclick: (event) => { event.stopPropagation(); fn(); } }, h('span', {}, label), hint ? h('span', { class: 'k' }, hint) : null);
+  const viewItems = extra.length ? extra : [item('Light its chain', () => focus(id)), item('Open in E3', () => { set({ view: 'detail' }); focus(id); })];
+  const menu = h('div', { class: 'menu', role: 'menu', style: 'right:0;top:36px', onclick: (event) => event.stopPropagation() },
+    h('span', { class: 'h' }, 'View'), viewItems, h('hr'),
+    h('span', { class: 'h' }, 'Add · copies a line'), item('Ask a question', () => copyLine(ask.question(id))), item('Add a link', () => copyLine(ask.link(id))), item('Split into parts', () => copyLine(ask.split(id))), h('hr'),
+    h('span', { class: 'h' }, 'Item · copies a line'), item('Park', () => copyLine(ask.park(id))), item('Copy item id', () => copyLine(ask.id(id))));
+  return h('span', { class: 'pr' }, button, menu);
+}
+
+// ---- E1 and the outline half of E3: one tree ----
+function visibleIds() {
+  const out = [];
+  const walk = (id, depth) => { out.push([id, depth]); if (S.opened[id]) for (const kid of M().childrenOf(id)) walk(kid, depth + 1); };
+  for (const group of M().groups) if (!group.folded || S.showClosed) for (const id of group.ids) walk(id, 0);
+  return out;
+}
+function outline({ withAdd = false } = {}) {
+  const box = h('div', { class: 'card', style: 'overflow:hidden' });
+  for (const group of M().groups) {
+    if (!group.ids.length) continue;
+    const shut = group.folded && !S.showClosed;
+    box.append(h('button', { class: 'group', 'aria-expanded': shut ? 'false' : 'true', onclick: () => group.folded && set({ showClosed: !S.showClosed }) }, h('span', {}, `${group.folded ? (shut ? '▸ ' : '▾ ') : ''}${group.name.toUpperCase()}`), h('span', {}, String(group.ids.length))));
+    if (shut) continue;
+    const walk = (id, depth) => {
+      const kids = M().childrenOf(id);
+      const light = lightOf(id);
+      box.append(h('div', { class: `row ${light}`, 'data-id': id },
+        indentOf(depth),
+        h('button', { class: `caret ${kids.length ? '' : 'none'}`, 'aria-label': S.opened[id] ? 'Close the parts' : 'Open the parts', 'aria-expanded': kids.length ? String(!!S.opened[id]) : null, onclick: () => set({ opened: { ...S.opened, [id]: !S.opened[id] } }) }, S.opened[id] ? '▾' : '▸'),
+        dotOf(id),
+        h('span', { class: 'body' }, h('button', { class: `title l${Math.min(depth, 2)} ${['blocked', 'waits-with'].includes(M().stateOf(id).kind) ? 'grey' : ''}`, onclick: () => (S.view === 'detail' ? set({ sel: id, stack: [id, ...S.stack.filter((x) => x !== id)].slice(0, 3) }) : set({ sel: S.sel === id ? null : id })) }, M().items.get(id).title), statusBits(id)),
+        kids.length ? h('span', { class: 'count' }, `${kids.length} part${kids.length === 1 ? '' : 's'}`) : null,
+        withAdd ? h('button', { class: 'dots', 'aria-label': 'Open this item as well', title: 'Open as well', onclick: () => set({ stack: [...S.stack.filter((x) => x !== id), id].slice(-3) }) }, '+') : menuFor(id, 'row')));
+      if (S.opened[id]) for (const kid of kids) walk(kid, depth + 1);
+    };
+    for (const id of group.ids) walk(id, 0);
+  }
+  return box;
+}
+function chainBanner() {
+  if (!S.sel || !M().items.has(S.sel)) return null;
+  const chain = M().chainOf(S.sel);
+  const names = (ids) => (ids.length ? ids.map((id) => short(titleOf(id), 36)).join(', ') : 'Nothing');
+  return h('div', { class: 'banner' }, h('b', {}, `Chain of ${short(titleOf(S.sel), 60)}`), h('span', {}, h('span', { class: 'k-before' }, 'Before it: '), names(chain.before)), h('span', {}, h('span', { class: 'k-after' }, 'Waits on it: '), names(chain.after)), h('button', { class: 'ghost', onclick: () => set({ sel: null }) }, 'Clear'));
+}
+
+// ---- E3: the detail stack ----
+const TABS = [['questions', 'Questions'], ['decisions', 'Decisions'], ['parts', 'Parts'], ['links', 'Links'], ['delivery', 'Delivery'], ['history', 'History']];
+function facts(d) {
+  const st = M().stateOf(d.id);
+  const rows = [['Lifecycle', d.lifecycle], ['Step', d.stage || '—'], ['Size', d.tier || '—'], ['Driver', d.driver || '—'], ['Next step', d.next_step || '—']];
+  if (d.waits_on && d.waits_on.on && d.waits_on.on !== 'nothing') rows.push(['Waits on', `${d.waits_on.on}${d.waits_on.note ? `: ${d.waits_on.note}` : ''}`]);
+  rows.push(['Starts', st.blockers.length ? statusBits(d.id).filter((el) => el.classList?.contains('chip')) : (st.waitsWith ? `with ${titleOf(st.waitsWith)}` : (st.kind === 'ready' ? 'Ready to start' : '—'))]);
+  if (d.plan && (d.plan.start || d.plan.end || d.plan.deadline)) rows.push(['Planned', [d.plan.start && `start ${d.plan.start}`, d.plan.end && `end ${d.plan.end}`, d.plan.deadline && `deadline ${d.plan.deadline}`].filter(Boolean).join(' · ')]);
+  if (d.origin?.text) rows.push(['Your words', `"${short(d.origin.text, 240)}" (${d.origin.date ?? ''})`]);
+  rows.push(['Made', dateOf(d.created_at)]);
+  if (d.locked_at) rows.push(['Locked', dateOf(d.locked_at)]);
+  if (d.delivered_at) rows.push(['Delivered', dateOf(d.delivered_at)]);
+  rows.push(['Item id', d.id]);
+  return h('div', { class: 'facts' }, rows.map(([k, v]) => [h('span', {}, k), h('span', { style: 'overflow-wrap:anywhere' }, v)]));
+}
+function entries(d, tab) {
+  const list = h('div', { class: 'entries' });
+  const entry = (k, meta, v, more) => list.append(h('div', { class: 'entry' }, h('div', { class: 'eh' }, h('b', { style: 'color:var(--ink);font-weight:500' }, k), h('span', {}, meta)), v ? h('div', { class: 'ev' }, v) : null, more));
+  if (tab === 'questions') for (const q of d.questions) {
+    const opts = Array.isArray(q.fields?.context?.options) ? q.fields.context.options : [];
+    entry(q.fields?.status === 'open' ? 'Open question' : 'Answered', `${q.fields?.cost ?? ''} · asked ${dateOf(q.fields?.asked_at)}`, q.fields?.text ?? q.title,
+      q.fields?.status === 'open' && opts.length ? h('div', { class: 'opts' }, opts.map((opt) => h('button', { class: 'chip', onclick: () => copyLine(ask.answer(q.id, d.id, opt)), title: 'Copies your answer for a thread' }, short(opt, 60)))) : null);
+  }
+  if (tab === 'decisions') for (const row of d.decisions) entry(row.fields?.kind ?? 'decision', row.fields?.date ?? '', row.fields?.text ?? row.title, row.fields?.source ? h('div', { class: 'path' }, row.fields.source) : null);
+  if (tab === 'parts') for (const id of d.parts) list.append(h('div', { class: 'entry', style: 'flex-direction:row;align-items:center;gap:8px' }, dotOf(id), h('button', { class: 'title', onclick: () => focus(id) }, titleOf(id)), statusBits(id, { compact: true })));
+  if (tab === 'links') for (const link of d.links) entry(`${link.kind ?? 'link'}${link.role ? ` · ${link.role}` : ''}`, dateOf(link.added_at), link.note || '', h('a', { href: link.url, target: '_blank', rel: 'noopener noreferrer', style: 'overflow-wrap:anywhere' }, link.url));
+  if (tab === 'delivery') for (const mark of d.marks) entry(mark.fields?.verdict ?? mark.fields?.kind ?? 'mark', dateOf(mark.fields?.marked_at), (mark.fields?.prs ?? []).map((pr) => pr.url).join('\n') || mark.fields?.reason || '');
+  if (tab === 'history') for (const edit of d.edits) entry(edit.by ?? 'edit', dateOf(edit.at), edit.reason ?? '');
+  if (!list.children.length) list.append(h('div', { class: 'empty' }, 'Nothing here yet.'));
+  return list;
+}
+function panel(id, index) {
+  const d = M().detailOf(id);
+  const folded = !!S.folded[id];
+  const counts = { questions: d.questions.length, decisions: d.decisions.length, parts: d.parts.length, links: d.links.length, delivery: d.marks.length, history: d.edits.length };
+  const tab = S.tabs[id] ?? (counts.questions ? 'questions' : 'parts');
+  const close = () => set({ stack: S.stack.filter((x) => x !== id), menu: null });
+  const parent = M().parentOf(id);
+  const extra = [
+    h('button', { role: 'menuitem', onclick: () => set({ stack: [id], menu: null }) }, h('span', {}, 'Open alone'), h('span', { class: 'k' }, 'O')),
+    parent ? h('button', { role: 'menuitem', onclick: () => set({ stack: [...S.stack.filter((x) => x !== parent), parent].slice(-3), menu: null }) }, h('span', {}, 'Open the parent too'), h('span', { class: 'k' }, 'P')) : null,
+    h('button', { role: 'menuitem', onclick: () => { focus(id); } }, h('span', {}, 'Light its chain')),
+    h('button', { role: 'menuitem', onclick: close }, h('span', {}, 'Close'), h('span', { class: 'k' }, 'Esc')),
+  ].filter(Boolean);
+  return h('section', { class: 'panel', 'aria-label': d.title },
+    h('div', { class: 'phead' },
+      h('div', { class: 'pl' }, h('span', { class: 'badge' }, 'ABC'[index]), h('div', {}, d.path.length ? h('div', { class: 'path' }, d.path.join(' / ')) : null, h('h2', {}, d.title), h('div', { class: 'body', style: 'margin-top:4px' }, statusBits(id)))),
+      h('div', { class: 'pr' }, h('button', { class: 'dots', 'aria-label': folded ? 'Unfold this panel' : 'Fold this panel', title: 'Fold', onclick: () => set({ folded: { ...S.folded, [id]: !folded } }) }, folded ? '▸' : '▾'), menuFor(id, 'panel', extra))),
+    folded ? h('div', { class: 'fold1' }, d.next_step ? `Next: ${short(d.next_step, 140)}` : `${d.lifecycle}${d.stage ? ` · ${d.stage}` : ''}`) : [
+      facts(d),
+      h('div', { class: 'tabs', role: 'group', 'aria-label': 'Records of this item' }, TABS.map(([key, label]) => h('button', { 'aria-pressed': String(tab === key), onclick: () => set({ tabs: { ...S.tabs, [id]: key } }) }, `${label} ${counts[key]}`))),
+      entries(d, tab),
+    ]);
+}
+function detailView() {
+  const stack = S.stack.filter((id) => M().items.has(id));
+  return h('div', { class: 'split' }, outline({ withAdd: true }),
+    h('div', { class: 'stack' }, stack.length ? stack.map(panel) : h('div', { class: 'notice' }, h('b', {}, 'Click a row to read it.'), h('span', {}, 'Press + on a row to open it as well, up to three. Fold a panel to one line to keep several in view.'))));
+}
+
+// ---- E2: columns ----
+function columnsView() {
+  const path = S.path.filter((id) => M().items.has(id));
+  const cols = [];
+  const live = M().groups.filter((g) => !g.folded).flatMap((g) => g.ids);
+  const closed = M().groups.filter((g) => g.folded).flatMap((g) => g.ids);
+  cols.push({ title: PRODUCT_NAME.toUpperCase(), ids: S.showClosed ? [...live, ...closed] : live, foot: closed.length });
+  path.forEach((id) => { const kids = M().childrenOf(id); if (kids.length) cols.push({ title: short(titleOf(id), 30).toUpperCase(), ids: kids }); });
+  const sel = path.at(-1) ?? null;
+  const wrap = h('div', { class: 'card cols' });
+  cols.forEach((col, level) => {
+    const box = h('div', { class: 'col' }, h('div', { class: 'colh' }, h('span', {}, col.title), h('span', {}, String(col.ids.length))));
+    for (const id of col.ids) {
+      const kids = M().childrenOf(id).length;
+      const onPath = path[level] === id;
+      const light = lightOf(id);
+      box.append(h('div', { class: `citem ${onPath ? 'sel' : ''} ${light === 'dim' ? 'dim' : ''}`, 'data-id': id },
+        h('button', { onclick: () => set({ path: [...path.slice(0, level), id], sel: id }) }, h('span', {}, h('span', {}, M().items.get(id).title), h('span', { class: 'sub' }, `${M().stateOf(id).lifecycle}${kids ? ` · ${kids} part${kids === 1 ? '' : 's'}` : ''}`)), h('span', { 'aria-hidden': 'true' }, kids ? '›' : '')),
+        h('span', { class: 'body' }, statusBits(id, { compact: true }))));
+    }
+    if (col.foot && level === 0) box.append(h('button', { class: 'group', onclick: () => set({ showClosed: !S.showClosed }) }, h('span', {}, S.showClosed ? 'Hide done and dropped' : `Show done and dropped (${col.foot})`)));
+    wrap.append(box);
+  });
+  if (sel) {
+    const d = M().detailOf(sel);
+    const pinned = S.pins.includes(sel);
+    const extra = [
+      h('button', { role: 'menuitem', onclick: () => set({ pins: pinned ? S.pins.filter((x) => x !== sel) : [...S.pins, sel], menu: null }) }, h('span', {}, pinned ? 'Stop watching' : 'Watch below')),
+      h('button', { role: 'menuitem', onclick: () => { set({ view: 'detail', stack: [sel, ...S.stack.filter((x) => x !== sel)].slice(0, 3), menu: null }); } }, h('span', {}, 'Open in E3')),
+      h('button', { role: 'menuitem', onclick: () => focus(sel) }, h('span', {}, 'Light its chain')),
+    ];
+    wrap.append(h('div', { class: 'selpane' },
+      h('div', { style: 'display:flex;justify-content:space-between;gap:8px' }, h('div', {}, h('div', { class: 'path' }, 'Selected'), h('h2', { style: 'margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:19px' }, d.title)), menuFor(sel, 'pane', extra)),
+      h('div', { class: 'body' }, statusBits(sel)), facts(d),
+      d.questions.filter((q) => q.fields?.status === 'open').length ? h('div', {}, h('div', { class: 'path' }, 'OPEN QUESTIONS'), d.questions.filter((q) => q.fields?.status === 'open').map((q) => h('div', { class: 'entry' }, q.fields?.text ?? q.title))) : null));
+  } else wrap.append(h('div', { class: 'selpane' }, h('div', { class: 'empty' }, 'Pick an item. Each level opens a new column to the right.')));
+  const out = [wrap];
+  if (S.pins.length) out.push(h('div', { class: 'watch' }, h('span', { class: 'h' }, 'WATCHING · SEVERAL ITEMS AT ONCE'), h('div', { class: 'pins' }, S.pins.filter((id) => M().items.has(id)).map((id) => {
+    const d = M().detailOf(id); const q = d.questions.find((row) => row.fields?.status === 'open');
+    return h('div', { class: 'pin' }, h('span', { class: 't' }, h('b', {}, d.title), h('span', { class: 'path' }, `${d.lifecycle}${d.stage ? ` · ${d.stage}` : ''}`), h('span', {}, `Next: ${short(d.next_step || '—', 120)}`), q ? h('span', { class: 'tag you' }, `? ${short(q.fields?.text, 80)}`) : null), h('button', { class: 'dots', 'aria-label': 'Stop watching', onclick: () => set({ pins: S.pins.filter((x) => x !== id) }) }, '×'));
+  }))));
+  return out;
+}
+
+// ---- Timeline ----
+function timelineView() {
+  const rows = visibleIds().filter(([id]) => M().spanOf(id).bars.length || M().childrenOf(id).length || M().stateOf(id).lifecycle === 'paused');
+  const now = Date.parse(M().now);
+  const spans = rows.map(([id]) => M().spanOf(id));
+  let from = Math.min(now - 7 * DAY, ...spans.map((s) => s.from));
+  from = Math.max(from, now - 30 * DAY);
+  let to = Math.max(now + 7 * DAY, ...spans.map((s) => s.to)) + DAY;
+  to = Math.min(to, now + 120 * DAY);
+  from = Math.floor(from / DAY) * DAY; to = Math.ceil(to / DAY) * DAY;
+  const pct = (at) => (Math.min(Math.max(at, from), to) - from) / (to - from) * 100;
+  const days = (to - from) / DAY;
+  const step = days <= 21 ? 1 : days <= 45 ? 3 : days <= 90 ? 7 : 14;
+  const ticks = [];
+  for (let at = from; at < to; at += step * DAY) { if (Math.abs(pct(at) - pct(now)) < 3) continue; const d = new Date(at); ticks.push(h('span', { class: 'tick', style: `left:${pct(at)}%` }, d.getUTCDate() === 1 || at === from || step >= 7 ? d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' }) : String(d.getUTCDate()))); }
+  const label = (bar) => ({ done: 'Done', going: 'going on', planned: 'planned', estimate: 'estimate' })[bar.kind];
+  const body = h('div', { class: 'tlin' }, h('div', { class: 'tlh' }, h('div', { class: 'tll' }, 'ITEMS AND PARTS'), h('div', { class: 'tlg', style: 'height:40px' }, ticks)));
+  for (const [id, depth] of rows) {
+    const span = M().spanOf(id);
+    const kids = M().childrenOf(id);
+    const light = lightOf(id);
+    const bars = span.bars.map((bar) => { const width = Math.max(pct(bar.to) - pct(bar.from), 0.8); return h('span', { class: `b ${bar.kind}`, style: `left:${pct(bar.from)}%;width:calc(${width}% - 2px)`, title: `${label(bar)}: ${dateOf(new Date(bar.from).toISOString())} to ${dateOf(new Date(bar.to).toISOString())}` }, width >= 6 ? label(bar) : ''); });
+    if (!span.bars.length && kids.length && span.to > span.from) bars.push(h('span', { class: 'b parent estimate', style: `left:${pct(span.from)}%;width:calc(${Math.max(pct(span.to) - pct(span.from), 0.8)}% - 2px)`, title: 'Its parts' }));
+    if (!span.bars.length && M().stateOf(id).lifecycle === 'paused') bars.push(h('span', { class: 'tag', style: `position:absolute;top:10px;left:${pct(now)}%;margin-left:6px` }, 'Paused, no date'));
+    for (const mark of span.marks) {
+      if (mark.kind === 'asked') { bars.push(h('span', { class: 'm-ask', style: `left:${pct(mark.at)}%`, title: `Question asked ${dateOf(new Date(mark.at).toISOString())}` })); bars.push(h('span', { class: 'm-wait', style: `left:${pct(mark.at)}%;width:${pct(mark.until) - pct(mark.at)}%`, title: 'Waits on you' })); }
+      if (mark.kind === 'deadline') bars.push(h('span', { class: 'm-dead', style: `left:${pct(mark.at + DAY)}%`, title: `Deadline ${dateOf(new Date(mark.at).toISOString())}` }));
+    }
+    const st = M().stateOf(id);
+    body.append(h('div', { class: `tlr ${light}`, 'data-id': id },
+      h('div', { class: 'tll' }, indentOf(depth),
+        h('button', { class: `caret ${kids.length ? '' : 'none'}`, 'aria-label': S.opened[id] ? 'Close the parts' : 'Open the parts', onclick: () => set({ opened: { ...S.opened, [id]: !S.opened[id] } }) }, S.opened[id] ? '▾' : '▸'),
+        h('button', { class: `title l${Math.min(depth, 2)} ${st.blockers.length ? 'grey' : ''}`, onclick: () => set({ sel: S.sel === id ? null : id }), title: M().items.get(id).title }, M().items.get(id).title),
+        st.blockers.slice(0, 1).map((row) => h('button', { class: 'chip', style: 'font-size:11px;min-height:22px', onclick: () => focus(row.item), title: `Blocked by ${row.title}` }, `after ${short(row.title ?? row.item, 14)}`))),
+      h('div', { class: 'tlg' }, bars)));
+  }
+  const grid = h('div', { class: 'card tl' }, h('div', { style: 'position:relative' }, body));
+  const todayWrap = body.querySelector('.tlh');
+  body.style.position = 'relative';
+  const line = h('span', { class: 'today', style: `left:calc(300px + (100% - 300px) * ${pct(now) / 100})` });
+  body.append(line);
+  if (todayWrap) todayWrap.querySelector('.tlg').append(h('span', { class: 'tick', style: `left:${pct(now)}%;color:var(--you-mark);font-weight:600;border-left:2px solid var(--you-mark)` }, 'Today'));
+  const legend = h('div', { class: 'legend' },
+    h('span', {}, h('i', { class: 'sw', style: 'background:var(--done-bg);border:1px solid var(--done)' }), 'Done'),
+    h('span', {}, h('i', { class: 'sw', style: 'background:var(--go-bg);border:1px solid var(--go)' }), 'Going on'),
+    h('span', {}, h('i', { class: 'sw', style: 'background:var(--card);border:1.5px solid var(--go)' }), 'Your planned dates'),
+    h('span', {}, h('i', { class: 'sw', style: 'background:repeating-linear-gradient(135deg,var(--est-a) 0 4px,var(--est-b) 4px 8px);border:1px solid var(--est-line)' }), `Estimate from the size: hotfix ${ESTIMATE_DAYS.hotfix} day, standard ${ESTIMATE_DAYS.standard}, initiative ${ESTIMATE_DAYS.initiative}`),
+    h('span', {}, h('i', { class: 'sw', style: 'height:4px;background:var(--you-bar)' }), 'Waits on you'),
+    h('span', {}, h('i', { style: 'width:10px;height:10px;transform:rotate(45deg);background:var(--you-mark);display:inline-block' }), 'Question asked'));
+  return [grid, legend];
+}
+
+// ---- Needs you ----
+function needsPanel() {
+  const rows = M().needsYou;
+  return h('div', { class: 'card needlist' }, h('div', { class: 'colh' }, h('span', {}, `NEEDS YOU · ${rows.length}`), h('button', { class: 'ghost', onclick: () => set({ needs: false }) }, 'Close')),
+    rows.length ? rows.map((row, index) => h('div', { class: 'entry', role: 'button', tabindex: '0', onclick: () => { set({ needs: false, view: 'detail', stack: [row.item.id, ...S.stack.filter((x) => x !== row.item.id)].slice(0, 3), tabs: { ...S.tabs, [row.item.id]: 'questions' } }); focus(row.item.id); }, onkeydown: (event) => { if (event.key === 'Enter') event.currentTarget.click(); } },
+      h('div', { class: 'ev' }, h('b', {}, `${index + 1}. `), short(row.question.fields?.text ?? row.question.title, 200)),
+      h('div', { class: 'eh' }, h('span', {}, `${short(row.item.title, 80)} · ${row.lifecycle}`), h('span', {}, `${row.cost}: ${COST_MEANING[row.cost] ?? ''} · asked ${dateOf(row.asked_at)}`)))) : h('div', { class: 'empty' }, 'Nothing needs you: no open question on a proposed, active or paused item.'));
+}
+
+// ---- Errors: say which, and how to fix it ----
+function errorView(error) {
+  const fix = {
+    no_mcp: ['This page cannot reach your connectors here.', 'Open it on claude.ai, as a page of your own. A saved copy or a preview cannot read the tracker.'],
+    server_not_connected: ['The Engram connector is not connected.', 'Add Engram in claude.ai, Settings, Connectors. Then reload this page.'],
+    needs_reauth: ['Your Engram sign-in has lapsed.', 'Reconnect Engram in claude.ai, Settings, Connectors. Then reload this page.'],
+    not_in_manifest: ['This page is not allowed to read Engram.', 'Allow Engram for this page when claude.ai asks, then reload. The page asks only for two read tools.'],
+    consent_required: ['This page is not allowed to read Engram yet.', 'Reload, and allow Engram when claude.ai asks.'],
+    not_granted: ['This page is not allowed to read Engram.', 'Reload, and allow Engram when claude.ai asks.'],
+    selection_required: ['You have more than one Engram connector.', 'Pick one when claude.ai asks, then reload.'],
+    blocked_by_policy: ['A policy blocks this page from Engram.', 'Ask the person who runs your claude.ai settings.'],
+    server_unavailable: ['Engram did not answer.', 'Wait a moment and reload. Engram may be restarting.'],
+    shape: ['Engram answered in a shape this page does not read.', 'Rebuild the page with the newest Atlas: atlas view build.'],
+  }[error.code] ?? ['The tracker could not be read.', error.message ?? 'Reload the page to try again.'];
+  return h('div', { class: 'notice bad', role: 'alert' }, h('b', {}, fix[0]), h('span', {}, fix[1]), h('span', { class: 'foot' }, `Code: ${error.code}. The page shows nothing rather than an empty view that looks true.`), h('div', {}, h('button', { class: 'ghost', onclick: load }, 'Reload')));
+}
+
+function render() {
+  const app = document.getElementById('app');
+  const scroll = window.scrollY;
+  const head = h('header', { class: 'bar' },
+    h('span', { class: 'brand' }, h('b', {}, 'Atlas'), h('span', { class: 'sep' }, '/'), h('span', {}, `Product: ${PRODUCT_NAME}`)),
+    S.model ? h('button', { class: `needs ${S.model.needsYou.length ? '' : 'zero'}`, 'aria-expanded': String(S.needs), onclick: () => set({ needs: !S.needs }) }, `Needs you · ${S.model.needsYou.length}`) : null);
+  const kids = [head];
+  if (S.error) kids.push(errorView(S.error));
+  else if (S.loading && !S.model) kids.push(h('div', { class: 'notice' }, 'Reading the tracker…'));
+  if (S.model) {
+    kids.push(h('div', { class: 'tools' },
+      h('nav', { class: 'switch', 'aria-label': 'View' }, VIEWS.map(([key, label]) => h('button', { 'aria-pressed': String(S.view === key), onclick: () => { store.set('view', key); set({ view: key, menu: null }); } }, label))),
+      h('span', { class: 'meta' }, S.loading ? 'Reading…' : `Read ${new Date(S.readAt).toLocaleString('en-GB', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}`, h('button', { class: 'ghost', onclick: load }, 'Refresh'))));
+    if (S.cut) kids.push(h('div', { class: 'notice' }, `This product has more than ${MAX_RECORDS} records. The page read the first ${MAX_RECORDS}.`));
+    if (S.needs) kids.push(needsPanel());
+    kids.push(chainBanner());
+    if (S.view === 'outline') kids.push(outline());
+    if (S.view === 'detail') kids.push(detailView());
+    if (S.view === 'columns') kids.push(columnsView());
+    if (S.view === 'timeline') kids.push(timelineView());
+    kids.push(h('div', { class: 'foot' }, `Read only. The ⋯ menu copies a line for a thread, and the lead writes. Built by Atlas ${ATLAS_VERSION}. ${S.model.all.length} items.`));
+  }
+  app.replaceChildren(...kids.flat().filter(Boolean));
+  window.scrollTo(0, scroll);
+}
+document.addEventListener('click', () => { if (S.menu) set({ menu: null }); });
+document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && (S.menu || S.sel)) set(S.menu ? { menu: null } : { sel: null }); });
+render();
+load();
+</script>
+</body>
+</html>

package/work/lib/questions.mjs

@@ -5,16 +5,13 @@
 // The verbs run behind the same door, the same journal and the same registry
 // checks as slice L1. Every record carries request_id and writer.
 import protectedPaths from '../protected-paths.json' with { type: 'json' };
-import { refuse, text, oneOf, isoDate, url, stringList, LIVE_LIFECYCLES } from './verb-fields.mjs';
+import { refuse, text, oneOf, isoDate, url, stringList } from './verb-fields.mjs';
+import { COSTS, COST_MEANING, ROW_LINE_MAX, oneLine, needsYou } from './view-rules.mjs';
+
+// R5 (the costs), R8 (the row width), the blocker rules and the needs-you
+// order live in view-rules.mjs, which the project view page also runs.
+export { COSTS, COST_MEANING, ROW_LINE_MAX, oneLine, CLEARED_LIFECYCLES, blockersOf, blocksOf } from './view-rules.mjs';
 
-// R5: the cost of waiting is a closed vocabulary, ranked. Index 0 costs most.
-export const COSTS = Object.freeze(['blocked-merge', 'paused-item', 'spend', 'date']);
-export const COST_MEANING = Object.freeze({
-  'blocked-merge': 'a merge waits on the answer',
-  'paused-item': 'the item is stopped until the answer comes',
-  spend: 'money runs while the answer waits',
-  date: 'a date is at risk',
-});
 // 'sweep' is the kind the slice L5 sweep record carries. It is a decision like
 // any other: the owner's words, dated, listing the items (design finding R7).
 export const DECISION_KINDS = Object.freeze(['decision', 'priority', 'answer', 'sweep']);
@@ -24,18 +21,9 @@ export const QUESTION_READ_VERBS = Object.freeze(['needs_me']);
 
 // R8: the row budget. Three visible lines; everything else folds under it.
 export const ROW_LINES = 3;
-export const ROW_LINE_MAX = 160;
 const MAX_OPEN_QUESTIONS = 500;
 const MAX_RENDERED = 20_000;
 
-export const oneLine = (value, max = ROW_LINE_MAX) => {
-  const flat = String(value ?? '').replace(/\s+/g, ' ').trim();
-  // Cut by code point, so a cut never leaves half an emoji: Postgres refuses
-  // a lone surrogate, and the whole write with it.
-  const chars = Array.from(flat);
-  return chars.length > max ? `${chars.slice(0, max - 1).join('')}…` : flat;
-};
-
 // R12: a scrub by pattern in receipt keep. The patterns are the ones the
 // sub-agents deny, in work/protected-paths.json. A (?i) prefix is Python and
 // Go spelling; JavaScript takes it as a flag.
@@ -101,28 +89,8 @@ export function waitsOnLine(waits) {
   return `waits on ${what}${waits.item ? ` ${waits.item}` : ''}${waits.note ? `: ${waits.note}` : ''}`;
 }
 
-// Work item additions, slice 2: the items that block an item, the items it
-// blocks, and one phrase for a row. lookup gives an item record by id, or
-// undefined when the view did not load it. A blocker that is delivered or
-// dropped no longer blocks; the row shows it as cleared.
-export const CLEARED_LIFECYCLES = Object.freeze(['done', 'dropped']);
-export function blockersOf(item, lookup) {
-  const list = Array.isArray(item?.fields?.blocked_by) ? item.fields.blocked_by : [];
-  return list.filter((entry) => entry && typeof entry.item === 'string').map((entry) => {
-    const other = lookup(entry.item);
-    // A blocker the view cannot find is archived or gone, so it blocks no more.
-    if (!other) return { item: entry.item, title: null, state: 'gone', cleared: true, ...(entry.note ? { note: entry.note } : {}) };
-    const lifecycle = other.fields?.lifecycle ?? 'unknown';
-    const cleared = CLEARED_LIFECYCLES.includes(lifecycle);
-    return { item: entry.item, title: oneLine(other.title, 60), state: cleared ? 'cleared' : (lifecycle === 'active' ? (other.fields?.stage ?? 'active') : lifecycle), cleared, ...(entry.note ? { note: entry.note } : {}) };
-  });
-}
-// Only a live item is still held up, so a delivered or dropped one leaves the
-// "blocks" list.
-export function blocksOf(item, all) {
-  return all.filter((other) => other.id !== item.id && LIVE_LIFECYCLES.includes(other.fields?.lifecycle) && Array.isArray(other.fields?.blocked_by) && other.fields.blocked_by.some((entry) => entry?.item === item.id))
-    .map((other) => ({ item: other.id, title: oneLine(other.title, 60) }));
-}
+// Work item additions, slice 2: one phrase for a row, from blockersOf and
+// blocksOf in view-rules.mjs.
 export function blockedPhrase(blockers, blocks) {
   const parts = [];
   if (blockers.length) parts.push(`blocked by: ${blockers.map((row) => `${row.title ?? row.item} (${row.state})`).join(', ')}`);
@@ -323,20 +291,14 @@ export function createQuestionVerbs(core) {
         catch (error) { items.set(id, null); unreadable.set(id, error?.status === 404 ? 'the item is not in the graph' : `the graph did not answer: ${error?.message ?? String(error)}`); }
       }
       const readAt = now();
-      const kept = [], omitted = [];
-      for (const row of open) {
-        const item = items.get(row.fields.item) ?? null;
-        const lifecycle = item?.fields?.lifecycle ?? 'unknown';
-        // Release 0.2.3: a question on a
-        // proposed or paused item still needs him, so it is a row. D3 rule 1
-        // kept active items only, and it hid real questions. A question on a
-        // done or dropped item is named, not dropped in silence.
-        if (!LIVE_LIFECYCLES.includes(lifecycle)) { omitted.push({ question_id: row.id, item: row.fields.item, item_lifecycle: lifecycle, reason: item ? `the item is ${lifecycle}; only a proposed, active or paused item can still need you` : (unreadable.get(row.fields.item) ?? 'the item cannot be read') }); continue; }
-        const cost = row.fields.cost;
-        const rank = COSTS.indexOf(cost);
+      // The order and the filter are the view rules, so the project view page
+      // gives the same rows from the same records.
+      const ordered = needsYou(open, (id) => items.get(id));
+      const omitted = ordered.omitted.map(({ question, item, lifecycle }) => ({ question_id: question.id, item: question.fields.item, item_lifecycle: lifecycle, reason: item ? `the item is ${lifecycle}; only a proposed, active or paused item can still need you` : (unreadable.get(question.fields.item) ?? 'the item cannot be read') }));
+      const kept = ordered.kept.map(({ question: row, item, lifecycle, cost, cost_rank: costRank }) => {
         const asked = row.fields.asked_by ?? {};
-        kept.push({
-          question_id: row.id, product: row.fields.product, item: item.id, item_lifecycle: lifecycle, cost, cost_rank: rank === -1 ? COSTS.length : rank,
+        return {
+          question_id: row.id, product: row.fields.product, item: item.id, item_lifecycle: lifecycle, cost, cost_rank: costRank,
           asked_at: row.fields.asked_at ?? row.created_at ?? '', asked_by: asked.agent ?? 'unknown',
           lines: [
             oneLine(row.fields.text),
@@ -345,9 +307,8 @@ export function createQuestionVerbs(core) {
           ],
           folded: { question: row.fields.text, context: row.fields.context ?? {}, asked_by: asked, item_title: item.title, item_stage: item.fields.stage ?? '', item_next_step: item.fields.next_step ?? '', item_waits_on: item.fields.waits_on ?? null },
           citation: { question: row.id, item: item.id, read_at: readAt },
-        });
-      }
-      kept.sort((a, b) => a.cost_rank - b.cost_rank || String(a.asked_at).localeCompare(String(b.asked_at)) || a.question_id.localeCompare(b.question_id));
+        };
+      });
       const products = [...new Set(kept.map((row) => row.product))].sort();
       const byProduct = products.map((product) => ({ product, rows: kept.filter((row) => row.product === product) }));
       const render = byProduct.map((group) => [`${group.product} — needs you (${group.rows.length})`, ...group.rows.flatMap((row, index) => row.lines.map((line, position) => `${position === 0 ? `${index + 1}. ` : '   '}${line}`))].join('\n')).join('\n\n');

package/work/lib/verb-fields.mjs

@@ -5,9 +5,9 @@
 import { createHash } from 'node:crypto';
 
 export const MAX_TEXT = 20_000;
-// The lifecycles a view counts as live work (release 0.2.3). A dropped item is
-// closed by the owner's word, and no live list names it.
-export const LIVE_LIFECYCLES = Object.freeze(['proposed', 'active', 'paused']);
+// The lifecycles a view counts as live work live in view-rules.mjs, which the
+// project view page also runs.
+export { LIVE_LIFECYCLES } from './view-rules.mjs';
 
 export class VerbError extends Error {
   constructor(message, code = 'refused') { super(message); this.name = 'VerbError'; this.code = code; }

package/work/lib/view-rules.mjs

@@ -0,0 +1,279 @@
+// The view rules: how tracker records become rows. One module, read by two
+// readers. The Atlas tools import it in a session (needs_me, in_flight, the
+// roundup). The project view page holds a copy of this file, put in by
+// `atlas view build`, and runs it in the viewer's browser. Design:
+// docs/design-docs/project-view (tracker item 6dd1761a).
+//
+// So this file imports nothing and touches no Node API, no DOM and no
+// network. Every function takes plain records, as Engram returns them, and
+// returns plain data.
+
+// The lifecycles a view counts as live work (release 0.2.3). A dropped item
+// is closed by the owner's word, and no live list names it.
+export const LIVE_LIFECYCLES = Object.freeze(['proposed', 'active', 'paused']);
+// A blocker that is delivered or dropped no longer blocks.
+export const CLEARED_LIFECYCLES = Object.freeze(['done', 'dropped']);
+// R5: the cost of waiting is a closed vocabulary, ranked. Index 0 costs most.
+export const COSTS = Object.freeze(['blocked-merge', 'paused-item', 'spend', 'date']);
+export const COST_MEANING = Object.freeze({
+  'blocked-merge': 'a merge waits on the answer',
+  'paused-item': 'the item is stopped until the answer comes',
+  spend: 'money runs while the answer waits',
+  date: 'a date is at risk',
+});
+// R8: one row line holds at most this many characters.
+export const ROW_LINE_MAX = 160;
+// The striped estimate of the Timeline, in days, from the size of an item.
+// The canvas board set hotfix 1 and standard 2; initiative is the design's.
+export const ESTIMATE_DAYS = Object.freeze({ hotfix: 1, standard: 2, initiative: 5 });
+// The order of the top level: live work first, closed work folded at the end.
+export const GROUPS = Object.freeze([
+  { key: 'active', name: 'In flight', lifecycles: ['active'] },
+  { key: 'proposed', name: 'Proposed', lifecycles: ['proposed'] },
+  { key: 'paused', name: 'Paused', lifecycles: ['paused'] },
+  { key: 'closed', name: 'Done and dropped', lifecycles: ['done', 'dropped'], folded: true },
+]);
+
+const DAY = 86_400_000;
+
+export const oneLine = (value, max = ROW_LINE_MAX) => {
+  const flat = String(value ?? '').replace(/\s+/g, ' ').trim();
+  // Cut by code point, so a cut never leaves half an emoji: Postgres refuses
+  // a lone surrogate, and the whole write with it.
+  const chars = Array.from(flat);
+  return chars.length > max ? `${chars.slice(0, max - 1).join('')}…` : flat;
+};
+
+// Work item additions, slice 2: the items that block an item, the items it
+// blocks. lookup gives an item record by id, or undefined when the view did
+// not load it.
+export function blockersOf(item, lookup) {
+  const list = Array.isArray(item?.fields?.blocked_by) ? item.fields.blocked_by : [];
+  return list.filter((entry) => entry && typeof entry.item === 'string').map((entry) => {
+    const other = lookup(entry.item);
+    // A blocker the view cannot find is archived or gone, so it blocks no more.
+    if (!other) return { item: entry.item, title: null, state: 'gone', cleared: true, ...(entry.note ? { note: entry.note } : {}) };
+    const lifecycle = other.fields?.lifecycle ?? 'unknown';
+    const cleared = CLEARED_LIFECYCLES.includes(lifecycle);
+    return { item: entry.item, title: oneLine(other.title, 60), state: cleared ? 'cleared' : (lifecycle === 'active' ? (other.fields?.stage ?? 'active') : lifecycle), cleared, ...(entry.note ? { note: entry.note } : {}) };
+  });
+}
+// Only a live item is still held up, so a delivered or dropped one leaves the
+// "blocks" list.
+export function blocksOf(item, all) {
+  return all.filter((other) => other.id !== item.id && LIVE_LIFECYCLES.includes(other.fields?.lifecycle) && Array.isArray(other.fields?.blocked_by) && other.fields.blocked_by.some((entry) => entry?.item === item.id))
+    .map((other) => ({ item: other.id, title: oneLine(other.title, 60) }));
+}
+
+// "Needs you": every open question on a live item, ordered by what waiting
+// costs, then by age, then by id. needs_me and the page both call this, so
+// the two lists are the same list. itemOf gives the item record, null when it
+// cannot be read, or undefined when the reader did not load it.
+export function needsYou(questions, itemOf) {
+  const kept = [], omitted = [];
+  for (const question of questions) {
+    if (question?.fields?.status !== 'open') continue;
+    const item = itemOf(question.fields.item) ?? null;
+    const lifecycle = item?.fields?.lifecycle ?? 'unknown';
+    // Release 0.2.3: a question on a proposed or paused item still needs the
+    // owner. A question on a done or dropped item is named, not dropped in
+    // silence.
+    if (!LIVE_LIFECYCLES.includes(lifecycle)) { omitted.push({ question, item, lifecycle }); continue; }
+    const rank = COSTS.indexOf(question.fields.cost);
+    kept.push({ question, item, lifecycle, cost: question.fields.cost, cost_rank: rank === -1 ? COSTS.length : rank, asked_at: question.fields.asked_at ?? question.created_at ?? '' });
+  }
+  kept.sort((a, b) => a.cost_rank - b.cost_rank || String(a.asked_at).localeCompare(String(b.asked_at)) || a.question.id.localeCompare(b.question.id));
+  return { kept, omitted };
+}
+
+// Sort one product's records by kind. The tags say the kind; an item is a
+// record with a lifecycle and none of the other tags.
+const KIND_TAGS = Object.freeze({ 'atlas-question': 'questions', 'atlas-decision': 'decisions', 'atlas-mark': 'marks', 'atlas-receipt': 'receipts', 'atlas-registry': 'registry' });
+export function classify(records) {
+  const out = { items: [], questions: [], decisions: [], marks: [], receipts: [], registry: [], other: [] };
+  for (const record of records) {
+    if (!record || typeof record.id !== 'string') continue;
+    if (record.state && record.state !== 'active') continue;
+    const tags = Array.isArray(record.tags) ? record.tags : [];
+    const kind = tags.map((tag) => KIND_TAGS[tag]).find(Boolean);
+    if (kind) out[kind].push(record);
+    else if (typeof record.fields?.lifecycle === 'string') out.items.push(record);
+    else out.other.push(record);
+  }
+  return out;
+}
+
+const time = (value) => { const at = Date.parse(value ?? ''); return Number.isNaN(at) ? null : at; };
+const day = (value) => (/^\d{4}-\d{2}-\d{2}$/.test(String(value ?? '')) ? time(`${value}T00:00:00Z`) : null);
+
+// The whole model of one product: the tree, the state of each row, the
+// chain, needs you, the detail of an item, and the Timeline bars.
+export function buildModel(records, { product = null, now = new Date().toISOString() } = {}) {
+  const sorted = classify(records);
+  const items = new Map(sorted.items.filter((item) => !product || !item.fields?.product || item.fields.product === product).map((item) => [item.id, item]));
+  const all = [...items.values()];
+  const lookup = (id) => items.get(id);
+  const lifecycleOf = (id) => items.get(id)?.fields?.lifecycle ?? 'unknown';
+
+  // Parts: split_from names the parent. A parent the view did not load makes
+  // the part a top-level row, so nothing hides.
+  const parentOf = (id) => { const parent = items.get(id)?.fields?.split_from; return typeof parent === 'string' && items.has(parent) && parent !== id ? parent : null; };
+  const kids = new Map();
+  for (const item of all) {
+    const parent = parentOf(item.id);
+    if (!parent) continue;
+    if (!kids.has(parent)) kids.set(parent, []);
+    kids.get(parent).push(item);
+  }
+  for (const list of kids.values()) list.sort((a, b) => (a.fields?.split_index ?? 0) - (b.fields?.split_index ?? 0) || a.title.localeCompare(b.title));
+  const childrenOf = (id) => (kids.get(id) ?? []).map((item) => item.id);
+  const ancestorsOf = (id) => { const out = []; const seen = new Set([id]); let at = parentOf(id); while (at && !seen.has(at)) { out.push(at); seen.add(at); at = parentOf(at); } return out; };
+  const depthOf = (id) => ancestorsOf(id).length;
+
+  const modified = (item) => String(item.updated_at ?? item.modified_at ?? item.created_at ?? '');
+  const roots = all.filter((item) => !parentOf(item.id)).sort((a, b) => modified(b).localeCompare(modified(a)) || a.title.localeCompare(b.title));
+  const groups = GROUPS.map((group) => ({ key: group.key, name: group.name, folded: !!group.folded, ids: roots.filter((item) => group.lifecycles.includes(item.fields?.lifecycle)).map((item) => item.id) }));
+  const known = new Set(GROUPS.flatMap((group) => group.lifecycles));
+  const strays = roots.filter((item) => !known.has(item.fields?.lifecycle)).map((item) => item.id);
+  if (strays.length) groups[groups.length - 1].ids.push(...strays);
+
+  const need = needsYou(sorted.questions, (id) => (items.has(id) ? items.get(id) : null));
+  const openQuestionsOf = (id) => need.kept.filter((row) => row.item?.id === id).map((row) => row.question);
+
+  const openBlockers = (id) => blockersOf(items.get(id), lookup).filter((row) => !row.cleared);
+  const blockedAncestor = (id) => ancestorsOf(id).find((parent) => openBlockers(parent).length > 0) ?? null;
+
+  // One state per row, the words of the locked "A with D" board.
+  function stateOf(id) {
+    const item = items.get(id);
+    const lifecycle = lifecycleOf(id);
+    const blockers = openBlockers(id);
+    const waitsWith = blockers.length ? null : blockedAncestor(id);
+    const questions = openQuestionsOf(id);
+    const blocks = blocksOf(item, all);
+    let kind;
+    if (lifecycle === 'done' || lifecycle === 'dropped') kind = lifecycle;
+    else if (blockers.length) kind = 'blocked';
+    else if (waitsWith) kind = 'waits-with';
+    else if (questions.length) kind = 'you';
+    else if (lifecycle === 'paused') kind = 'paused';
+    else if (lifecycle === 'active') kind = 'doing';
+    else kind = 'ready';
+    return { id, kind, lifecycle, stage: item.fields?.stage ?? '', tier: item.fields?.tier ?? 'standard', blockers, waitsWith, questions, blocks, ready: kind === 'ready' };
+  }
+
+  // The chain of D: what must finish before an item (its blockers and its
+  // parents' blockers, all the way back), and what waits on it (the items
+  // it blocks, all the way on, with their parts).
+  const dependentsOf = (id) => all.filter((other) => Array.isArray(other.fields?.blocked_by) && other.fields.blocked_by.some((entry) => entry?.item === id)).map((other) => other.id);
+  function chainOf(id) {
+    const before = [], after = [];
+    const up = (at) => {
+      for (const holder of [at, ...ancestorsOf(at)]) {
+        for (const row of blockersOf(items.get(holder), lookup)) {
+          if (!items.has(row.item) || before.includes(row.item) || row.item === id) continue;
+          before.push(row.item); up(row.item);
+        }
+      }
+    };
+    const down = (at) => {
+      for (const next of dependentsOf(at)) {
+        if (after.includes(next) || next === id) continue;
+        after.push(next);
+        const parts = (from) => { for (const kid of childrenOf(from)) { if (!after.includes(kid)) { after.push(kid); parts(kid); } } };
+        parts(next);
+        down(next);
+      }
+    };
+    up(id); down(id);
+    return { before, after };
+  }
+
+  const decisionsOf = (id) => sorted.decisions.filter((row) => (Array.isArray(row.fields?.items) && row.fields.items.includes(id))).sort((a, b) => String(b.fields?.date ?? '').localeCompare(String(a.fields?.date ?? '')));
+  const marksOf = (id) => sorted.marks.filter((row) => row.fields?.item === id).sort((a, b) => String(a.fields?.marked_at ?? '').localeCompare(String(b.fields?.marked_at ?? '')));
+  const questionsOf = (id) => sorted.questions.filter((row) => row.fields?.item === id).sort((a, b) => String(b.fields?.asked_at ?? '').localeCompare(String(a.fields?.asked_at ?? '')));
+
+  function detailOf(id) {
+    const item = items.get(id);
+    if (!item) return null;
+    const fields = item.fields ?? {};
+    return {
+      id, title: item.title, path: ancestorsOf(id).reverse().map((parent) => items.get(parent).title),
+      lifecycle: fields.lifecycle ?? 'unknown', stage: fields.stage ?? '', tier: fields.tier ?? '', driver: fields.driver ?? '',
+      next_step: fields.next_step ?? '', summary: fields.summary ?? '', scope: fields.scope?.text ?? '',
+      origin: fields.origin ?? null, waits_on: fields.waits_on ?? null, plan: fields.plan ?? null,
+      links: Array.isArray(fields.links) ? fields.links : [], tags: Array.isArray(item.tags) ? item.tags : [],
+      edits: Array.isArray(fields.edits) ? [...fields.edits].reverse() : [],
+      parts: childrenOf(id), questions: questionsOf(id), decisions: decisionsOf(id), marks: marksOf(id),
+      created_at: item.created_at ?? '', locked_at: fields.locked_at ?? '', delivered_at: fields.delivered_at ?? '',
+    };
+  }
+
+  // The Timeline of the locked board: real bars for work that happened, a
+  // striped estimate for the rest, from the size field. A planned date the
+  // owner set replaces the estimate. All times are epoch milliseconds.
+  const nowAt = time(now) ?? 0;
+  const startOf = (item) => day(item.fields?.plan?.start) ?? time(item.fields?.locked_at) ?? time(item.created_at) ?? nowAt;
+  const memo = new Map();
+  function spanOf(id, guard = new Set()) {
+    if (memo.has(id)) return memo.get(id);
+    if (guard.has(id)) return { from: nowAt, to: nowAt, kind: 'none', bars: [] };
+    guard.add(id);
+    const item = items.get(id);
+    const fields = item.fields ?? {};
+    const lifecycle = fields.lifecycle;
+    const plan = fields.plan ?? {};
+    const planStart = day(plan.start), planEnd = day(plan.end);
+    const estimate = (ESTIMATE_DAYS[fields.tier] ?? ESTIMATE_DAYS.standard) * DAY;
+    const bars = [];
+    if (lifecycle === 'done') {
+      const to = time(fields.delivered_at) ?? time(item.updated_at ?? item.modified_at) ?? nowAt;
+      bars.push({ kind: 'done', from: Math.min(startOf(item), to), to });
+    } else if (lifecycle === 'dropped') {
+      // A dropped item draws no bar.
+    } else if (lifecycle === 'active') {
+      const from = Math.min(startOf(item), nowAt);
+      bars.push({ kind: 'going', from, to: nowAt });
+      if (planEnd !== null && planEnd > nowAt) bars.push({ kind: 'planned', from: nowAt, to: planEnd + DAY });
+      else if (planEnd === null) bars.push({ kind: 'estimate', from: nowAt, to: nowAt + estimate });
+    } else if (lifecycle === 'proposed' || (lifecycle === 'paused' && planStart !== null)) {
+      if (planStart !== null || planEnd !== null) {
+        const from = planStart ?? Math.max(nowAt, (planEnd ?? nowAt) - estimate + DAY);
+        bars.push({ kind: 'planned', from, to: planEnd !== null ? planEnd + DAY : from + estimate });
+      } else {
+        // The estimate starts after every open blocker ends, and not before
+        // its parent can start.
+        let from = nowAt;
+        for (const holder of [id, ...ancestorsOf(id)]) {
+          for (const row of blockersOf(items.get(holder), lookup)) {
+            if (row.cleared || !items.has(row.item)) continue;
+            from = Math.max(from, spanOf(row.item, guard).to);
+          }
+        }
+        bars.push({ kind: 'estimate', from, to: from + estimate });
+      }
+    }
+    // A parent with parts spans its parts.
+    const parts = childrenOf(id).map((kid) => spanOf(kid, guard)).filter((span) => span.bars.length);
+    let from = bars.length ? Math.min(...bars.map((bar) => bar.from)) : null;
+    let to = bars.length ? Math.max(...bars.map((bar) => bar.to)) : null;
+    if (parts.length) {
+      from = Math.min(from ?? Infinity, ...parts.map((span) => span.from));
+      to = Math.max(to ?? -Infinity, ...parts.map((span) => span.to));
+    }
+    const marks = [];
+    for (const question of openQuestionsOf(id)) { const at = time(question.fields?.asked_at ?? question.created_at); if (at !== null) marks.push({ kind: 'asked', at, until: nowAt, question: question.id }); }
+    const deadline = day(plan.deadline);
+    if (deadline !== null) marks.push({ kind: 'deadline', at: deadline });
+    const span = { from: from ?? nowAt, to: to ?? nowAt, bars, marks, kind: lifecycle, hasParts: parts.length > 0 };
+    memo.set(id, span);
+    return span;
+  }
+
+  return {
+    product, now, items, all, groups, roots: roots.map((item) => item.id),
+    lookup, parentOf, childrenOf, ancestorsOf, depthOf, stateOf, chainOf, detailOf, spanOf,
+    needsYou: need.kept, needsYouOmitted: need.omitted,
+    questions: sorted.questions, decisions: sorted.decisions, marks: sorted.marks,
+  };
+}