sign-off-axi 0.6.6 → 0.6.7

package/README.md

@@ -78,7 +78,18 @@ What you send on a card (an answer, a note, a new round, a comment) shows its tr
 
 ### Plans and reports, on their own pages
 
-<!-- MARKER: report-writing and the report gallery for design output are not described here yet; they land with the report kit PRs. -->
+An agent writes a report as data and the board draws it: `sign-off-axi report init <folder> --purpose <kind>` writes `report.json`, and each section takes `blocks` to show a point rather than tell it.
+
+| Block | What it draws |
+| --- | --- |
+| `callout` | a note, warning or question set apart |
+| `beats` | a stepper of pictures, each with a time, title and words |
+| `video` | a short film with its poster |
+| `table` | the same measures for each option |
+| `compare` | before and after |
+| `evidence` | captures, each marked Fixed, In progress or Waiting on you |
+
+Design output (screens a model made) goes in a `gallery` on the section: `report init --gallery`. Every picture and film is a file beside `report.json`, and post pins it. A page an agent writes itself (`report init --page`) is refused when it brings its own colours, three or more, or a card inside a card; reports already on the board stay as filed.
 
 <table>
   <tr>
@@ -150,8 +161,8 @@ One line on what the agent runs per kind; the full reference is [docs/question-k
 | Proof update | `post --type evidence --media shot.png` | the capture, its result, Pass / Fail / Needs work |
 | Proof with a file to install | `post --type evidence --media shot.png --attach app.apk` | the capture, and the file with its size and a Download button (any type, up to 1 GB, `SIGN_OFF_ATTACH_MAX_MB` to change) |
 | Explainer video | `post --type explainer --media clip.mp4 --chapter 0:00=Start` | a player with chapter buttons, then Yes or No |
-| Report | `report init <folder>`, fill `report.json`, then `post --kind report --from <folder>/report.json` | one scroll: the answer and a picture, what I understood, what I found, the next step; numbers under their part, one bar (Agree, Disagree, Comment, Ask) that acts on the part in view, and one Activity of every note, ask, reply and read |
-| Design output report | `report init <folder> --gallery`, put the screenshots under the board's folder, fill the gallery (label, model, run time, a caption and device per frame), then `post --kind report` | a swipeable strip of options on a phone, a row on a desk: each option's phone and desktop frame side by side, the caption with the model and run time under each, a tap to open full size with Previous and Next |
+| Report | `report init <folder> --purpose <kind>` (always: research, plan, decision, audit, incident, status or other), fill `report.json`, then `post --kind report --from <folder>/report.json` | one scroll: the answer and a picture, what I understood, what I found, the next step; numbers under their part, one bar (Agree, Disagree, Comment, Ask) that acts on the part in view, and one Activity of every note, ask, reply and read |
+| Design output report | `report init <folder> --purpose <kind> --gallery`, put the screenshots under the board's folder, fill the gallery (label, model, run time, a caption and device per frame), then `post --kind report` | a swipeable strip of options on a phone, a row on a desk: each option's phone and desktop frame side by side, the caption with the model and run time under each, a tap to open full size with Previous and Next |
 | Report kit blocks | add `blocks` to a section of `report.json`: `callout`, `beats` (a stepper), `video`, `table`, `compare` (before and after), `evidence` rows, with files under the board's folder | the board draws each in its own type and colours, light and dark: full width, one gutter, no card inside a card; a gallery and a video may run wider than the reading column on a desk |
 | Diagram, interactive page | `post --type diagram --view flow.svg` | the picture on the card; interactive pages run sandboxed, and open full screen at phone or desktop width |
 | Plan | `report init <folder> --plan`, fill `plan.json`, then `post --kind plan --from plan.json` | the same scroll, plus each decision with my pick and a Go ahead |

package/dist/cli.js

@@ -14,7 +14,7 @@ import { parseArgs } from 'node:util';
 import { encode } from '@toon-format/toon';
 import { acknowledgeOwner, checkOwner, deliveries, dispatchOwners, registerOwner } from './owner.js';
 import { AxiError, runAxiCli } from 'axi-sdk-js';
-import { ATTACH_DEFAULT_MB, ATTACH_MAX, ATTACH_NAME, guardOf, plainAsk, CHAPTERS_MAX, SIGNED_IN, CLEARED, InputError, MEDIA_MAX, NOTE_MAX, REPLY, answersPath, appendAnnotation, appendPartComment, annotationsPath, markCommentsRead, readPartComments, replyComment, asks, appendAnswer, appendDismissed, DISCARD_REASONS, readDiscards, UNDO_MS, appendPromoted, appendSendBack, appendTicket, readTickets, rollUp, appendTicketComment, ticketCommentFault, ticketFault, appendProject, readProjects, projectFault, iconPathFault, iconContentFault, ICON_BYTES, ICON_TYPES, PRIORITIES, REPORT_PARTS, REPORT_PURPOSES, appendDesignAnswer, answerLines, appendMark, readTrail, trailPath, appendMessage, appendRound, awaitsVerdict, lapsed, askEngagement, checkEngagement, markEngagementSeen, appendRead, appendOpened, readOpened, answerDeeper, askDeeper, deeperPath, guidePart, markDeeperRead, readDeeper, readReads, screenViews, seenAt, isKey, loadDecisions, markDelivered, markSeen, messagesPath, readAnnotations, readAnswers, reading, readDismissed, readItems, readPromoted, sameDecision, readMessages, readRounds, roundsPath, sameRound, seenBy, seenPath, sentIds, unreadable as reasonOf, writeItems } from './store.js';
+import { ATTACH_DEFAULT_MB, ATTACH_MAX, ATTACH_NAME, guardOf, plainAsk, CHAPTERS_MAX, SIGNED_IN, CLEARED, InputError, MEDIA_MAX, NOTE_MAX, REPLY, answersPath, appendAnnotation, appendPartComment, annotationsPath, markCommentsRead, readPartComments, replyComment, asks, appendAnswer, appendDismissed, DISCARD_REASONS, readDiscards, UNDO_MS, appendPromoted, appendKind, readKinds, appendSendBack, appendTicket, readTickets, rollUp, appendTicketComment, ticketCommentFault, ticketFault, appendProject, readProjects, projectFault, iconPathFault, iconContentFault, ICON_BYTES, ICON_TYPES, PRIORITIES, REPORT_PARTS, REPORT_PURPOSES, appendDesignAnswer, answerLines, appendMark, readTrail, trailPath, appendMessage, appendRound, awaitsVerdict, lapsed, askEngagement, checkEngagement, markEngagementSeen, appendRead, appendOpened, readOpened, answerDeeper, askDeeper, deeperPath, guidePart, markDeeperRead, readDeeper, readReads, screenViews, seenAt, isKey, loadDecisions, markDelivered, markSeen, messagesPath, readAnnotations, readAnswers, reading, readDismissed, readItems, readPromoted, sameDecision, readMessages, readRounds, roundsPath, sameRound, seenBy, seenPath, sentIds, unreadable as reasonOf, writeItems } from './store.js';
 import { ContractError, KINDS, MEDIA_BYTES, REPORT_INIT, checkMessage, diagramPages, diagramViews, galleryFrames, guided, kitWarnings, mediaFiles, parseMessage, reportPage } from './contract.js';
 import { faults, isStill } from './evidence-text.js';
 import { copiesOf, differs } from './images.js';
@@ -124,7 +124,7 @@ examples:
     validate: `usage: sign-off-axi validate <message.json>... [--kind <kind>] [--expect-invalid]
 Checks message files against the communication contract without posting them: ${CONTRACT}
 A message is one JSON object with "contract": 1, its "kind" and its "schema". This build checks kinds ask, evidence, gate and finding at schema 1, design at schema 2 (schema 1 still passes), report at schema 5 (schemas 2 to 4 still pass) and plan at schema 3 (schemas 1 and 2 still pass).
-A report 3 to 5 and a plan 2 or 3 are guided pages: fields the board draws as one scroll, no page of your own (see report init). A report 5 names what it is for in "purpose".
+A report 3 to 5 and a plan 2 or 3 are guided pages: fields the board draws as one scroll, no page of your own (see report init). Every report names what it is for in "purpose", required on a report 5 and on any new report, and so is its "project".
 An evidence message's media paths read from the message file's folder: each file must be there, inside it, and 50 MB or less.
 A report is a page to tap through: its "view" (.html) and "preview" (its picture, beside it) are checked for their shape here; the files themselves are checked at post, from the board file's folder, filled with no FILL: lines left (see report init).
 A plan's "view" (.html) is checked for its shape here; the file itself is checked at post, from the board file's folder.
@@ -380,8 +380,10 @@ examples:
   sign-off-axi feedback fleet-dashboard-full --reply "The colours now come from the new tokens." --link https://github.com/owner/repo/pull/245
   sign-off-axi feedback fleet-dashboard-full --acted --link https://github.com/owner/repo/pull/245
 `,
-    report: `usage: sign-off-axi report init <folder> [--purpose research|plan|decision|audit|incident|status|other] [--plan] [--page] [--gallery]
-Writes the guided template to fill: <folder>/report.json, or <folder>/plan.json with --plan. A file already there is kept.
+    report: `usage: sign-off-axi report init <folder> --purpose research|plan|decision|audit|incident|status|other [--page] [--gallery]
+       sign-off-axi report init <folder> --plan
+       sign-off-axi report kind <key> <kind> --project <name> --by <who> [--board board.json]   (or --from <file> of key<TAB>kind<TAB>project lines)
+Writes the guided template to fill: <folder>/report.json (--purpose is required), or <folder>/plan.json with --plan. A file already there is kept.
 Every report names what it is for in "purpose", its kind: research (research and discovery), plan (implementation plan), decision (decision and recommendation),
 audit, incident (incident and retro), status, or other. --purpose fills it in and writes that kind's parts to fill, one section each, which post then requires
 (research: question, scope, method, sources with links and a user report, options, findings with their confidence, not-checked, recommendation, open-questions;
@@ -392,7 +394,7 @@ Numbers sit behind a Details tap; every part has a Go deeper button that asks yo
 Replace every FILL: line, then post it: post --kind report --from <folder>/report.json, or post --kind plan --from <folder>/plan.json --filer <your id>.
 A report is for an explanation the user asked for, or a concept, design or trade-off they must understand. Proof that something works is evidence.
 --gallery adds a gallery to the first section: a design output's options, each with its model, run time and a phone and a desktop frame (an image or page, as a path from the board file's folder), which the board draws as a swipeable strip with each frame opening full size.
---page writes the older scaffold page instead, for a report that needs a page of its own (report schema 2). It is:
+--page (with --purpose) writes the older scaffold page instead, for a demo to tap that no block of the kit can show (report schema 2); post it with --type report --purpose <kind>. The board owns the colours: post refuses a page that writes out three or more colours of its own, or draws a card inside a card, on its first post. It is:
 Writes a report page to fill: <folder>/index.html and its card picture <folder>/preview.svg. A file already there is kept.
 The page is one self-contained file, phone first, light and dark, in four parts, each one idea:
   1. the answer in one plain sentence and a picture of it   2. a diagram of how it works
@@ -400,8 +402,10 @@ The page is one self-contained file, phone first, light and dark, in four parts,
 Replace every FILL: line, open the page in a browser 390 px wide and look: mostly text means it is not ready.
 Then post it with the command it prints; the paths are from the board file's folder, so make the folder under it, such as .sign-off/mocks/<key>.
 A report is for an explanation the user asked for, or a concept, design or trade-off they must understand. Proof that something works is evidence.
+report kind sets the kind and the project of a report posted before every report had them, and records --by, who set it; the board itself is not changed, only <board>.kinds.jsonl. All the lines of --from are checked before the first is written.
 examples:
-  sign-off-axi report init .sign-off/mocks/sign-in-flow
+  sign-off-axi report init .sign-off/reports/sign-in-flow --purpose research
+  sign-off-axi report kind sign-in-flow research --project Beacon --by agent-41
 `,
     init: `usage: sign-off-axi init [dir] [--agent auto|<name>[,<name>]...]
 Writes a repo's sign-off setup under <dir>/.sign-off/ (config, an empty board, mocks/ and evidence/ folders, and a .gitignore keeping media and answer files out of git). A file that is already there is kept, never changed, except that a given --agent replaces the config's agent: line; a re-run adds what is missing.
@@ -511,6 +515,18 @@ const CONTRACT_TYPES = ['decision', 'ask', 'evidence', 'report', 'plan', 'design
 const asSent = ({ filed: _filed, announced: _announced, ...rest }) => rest;
 /** A report names its own `filed` time, so only the notice record goes. */
 const asReport = ({ announced: _announced, ...rest }) => rest;
+/** The projects the board knows, for a refusal that names them. */
+const knownProjects = (file) => { const all = existsSync(file) ? readProjects(file).map((p) => p.name) : []; return all.length ? `known projects: ${all.join(', ')}` : 'no project is registered on this board yet (sign-off-axi project --name <project> --icon <picture>), so name the one the report is about'; };
+/** A new report names its kind and its project, whatever its schema; one already on the board stays a re-post of its own key (an older one is named with report kind). */
+function newReportFields(m, file) {
+    if (m?.kind !== 'report')
+        return;
+    if (!Object.hasOwn(m, 'purpose')) {
+        throw new ContractError(`report ${m.key} has no kind: "purpose" is required, what the report is for`, `Set "purpose" to one of ${REPORT_PURPOSES.join(', ')}; ${REPORT_INIT} --purpose <kind> writes a report with it filled in`);
+    }
+    if (!Object.hasOwn(m, 'project'))
+        throw new ContractError(`report ${m.key} has no project: "project" is required, so its row shows the project's icon`, `Set "project" to the project the report is about; ${knownProjects(file)}`);
+}
 /** Items of a --from file that carry contract or kind are contract messages: each is checked against its kind's rules before anything is stored.
  * A new item of a contract kind must carry them (contract section 2). A --replace feed replaces the stored item, so an item under an existing key
  * that changed is checked again; an unchanged item, a board-format one and every item outside a --replace feed are not checked again. */
@@ -551,6 +567,8 @@ function contractItems(items, from, file, replace = false) {
         }
         try {
             checkMessage(check);
+            if (!held)
+                newReportFields(check, file);
             if ((check.kind === 'report' || check.kind === 'plan') && !guided(check))
                 reportPage(check, dirname(file));
             if (guided(check))
@@ -1139,12 +1157,12 @@ async function locked(lock, fn, busy = 'another raise is still writing the board
 const mockFile = (path) => path.split('?')[0];
 /** Posts an item. `raise` is the alias for `post --type decision`: same flags as before, same output. */
 function post(args, cmd = 'post') {
-    const typed = cmd === 'post' ? { replace: { type: 'boolean' }, kind: { type: 'string' }, type: { type: 'string' }, tradeoff: { type: 'string' }, mock: { type: 'string', multiple: true },
+    const typed = cmd === 'post' ? { replace: { type: 'boolean' }, kind: { type: 'string' }, purpose: { type: 'string' }, project: { type: 'string' }, type: { type: 'string' }, tradeoff: { type: 'string' }, mock: { type: 'string', multiple: true },
         media: { type: 'string', multiple: true }, attach: { type: 'string', multiple: true }, link: { type: 'string', multiple: true }, view: { type: 'string' }, preview: { type: 'string' }, chapter: { type: 'string', multiple: true },
         ...Object.fromEntries(SIGNIN_FIELDS.map((f) => [f, { type: 'string' }])) } : {};
     const { file, named, values, on } = parse(cmd, args, { from: { type: 'string' }, filer: { type: 'string' }, 'ask-ref': { type: 'string' }, ticket: { type: 'string' }, priority: { type: 'string' }, ...typed,
         ...Object.fromEntries(RAISE_FIELDS.map((f) => [f, { type: 'string', multiple: MANY.includes(f) }])) });
-    const given = [...RAISE_FIELDS, 'type', 'tradeoff', 'mock', 'media', 'attach', 'link', 'view', 'preview', 'chapter', ...SIGNIN_FIELDS].filter((f) => values[f] !== undefined);
+    const given = [...RAISE_FIELDS, 'type', 'purpose', 'project', 'tradeoff', 'mock', 'media', 'attach', 'link', 'view', 'preview', 'chapter', ...SIGNIN_FIELDS].filter((f) => values[f] !== undefined);
     // Only a design takes --link more than once (one per option); any other type keeps its one item link, the last given.
     const optionLinks = values.link ?? [];
     if (values.type !== 'design' && optionLinks.length)
@@ -1850,15 +1868,21 @@ function postReport(file, named, on, values) {
     const odd = ['option', 'recommend', 'default', 'close', 'detail', 'mock', 'tradeoff', 'media', 'chapter'].find((f) => values[f] !== undefined);
     if (odd)
         throw fail(`--${odd} does not apply to --type report: a report takes no answer`, 'VALIDATION_ERROR', 'Run `sign-off-axi post --help`');
+    if (values.purpose === undefined)
+        throw fail(`a report needs --purpose <kind>, what it is for: ${REPORT_PURPOSES.join(', ')}`, 'VALIDATION_ERROR', 'sign-off-axi post --type report --purpose research --title "<the answer>" --about "<why it matters>" --view <page>.html --preview <picture>.svg');
+    if (!REPORT_PURPOSES.includes(values.purpose))
+        throw fail(`--purpose ${values.purpose} must be one of ${REPORT_PURPOSES.join(', ')}`, 'VALIDATION_ERROR', 'sign-off-axi post --type report --purpose research --title "<the answer>" ...');
+    if (values.project === undefined)
+        throw fail(`a report needs --project <name>, the project it is about; ${knownProjects(file)}`, 'VALIDATION_ERROR', 'sign-off-axi post --type report --purpose research --project Beacon --title "<the answer>" ...');
     const missing = ['title', 'about', 'view', 'preview'].filter((f) => values[f] === undefined).map((f) => `--${f}`);
     if (missing.length) {
-        throw fail(`a report is a page to tap through, not text: ${missing.join(' and ').replace(/ and (?=.* and )/g, ', ')} ${missing.length > 1 ? 'are' : 'is'} missing`, 'VALIDATION_ERROR', `Run \`${REPORT_INIT} --page\` to make the page and its picture, fill them, then post --type report --title "<the answer>" --about "<why it matters>" --view <folder>/index.html --preview <folder>/preview.svg`);
+        throw fail(`a report is a page to tap through, not text: ${missing.join(' and ').replace(/ and (?=.* and )/g, ', ')} ${missing.length > 1 ? 'are' : 'is'} missing`, 'VALIDATION_ERROR', `Run \`${REPORT_INIT} --page\` to make the page and its picture, fill them, then post --type report --purpose <kind> --project <name> --title "<the answer>" --about "<why it matters>" --view <folder>/index.html --preview <folder>/preview.svg`);
     }
     const key = values.key ?? slug(values.title), had = existsSync(file) ? readItems(file).items.find((i) => i?.key === key) : undefined;
     // Posting the same report again is a no-op, so it keeps the time it was first filed.
     const filed = (had?.kind === 'report' && had.filed) || new Date().toISOString().replace(/\.\d+Z$/, 'Z');
     const { title, about, view, preview, link } = values;
-    return postKind(file, named, on, values, { contract: 1, kind: 'report', schema: 2, key, title, about, view, preview, ...(link !== undefined && { link }), filed });
+    return postKind(file, named, on, values, { contract: 1, kind: 'report', schema: 2, key, title, about, view, preview, purpose: values.purpose, project: values.project, ...(link !== undefined && { link }), filed });
 }
 /** Posts one contract message (docs/contract.md), from a file or from stdin with --from -: checked against --kind, then stored like a raised item.
  * `built` is a message post --type report made from its flags. */
@@ -1890,12 +1914,14 @@ async function postKind(file, named, on, values, built) {
         // A new ask is held to the question standard, and so is a new design's title; a card already on the board still re-posts as it was.
         const existing = !built && ['ask', 'design'].includes(kind) && existsSync(file) && readItems(file).items.some((i) => i?.key === m.key);
         checkMessage(m, built ? 'report' : kind, !built && kind === 'ask' && !existing, !built && kind === 'design' && !existing);
+        if (!(existsSync(file) && readItems(file).items.some((i) => i?.key === m.key)))
+            newReportFields(m, file);
         // Media paths read from the message file's folder, or from the current folder for stdin.
         if (m.kind === 'evidence')
             sources = mediaFiles(m, from === '-' ? process.cwd() : dirname(resolve(from)));
         // A report's or plan's page is served from the board file's folder, as --view is.
         if ((m.kind === 'report' || m.kind === 'plan') && !guided(m))
-            reportPage(m, dirname(file));
+            reportPage(m, dirname(file), !(existsSync(file) && readItems(file).items.some((i) => i?.key === m.key)));
         if (guided(m)) {
             diagramPages(m, dirname(file));
             for (const w of kitWarnings(m))
@@ -2584,18 +2610,27 @@ const kindSections = (purpose) => REPORT_PARTS[purpose].map(([part, name]) => {
 function report(args) {
     let parsed;
     try {
-        parsed = parseArgs({ args, allowPositionals: true, strict: true, options: { plan: { type: 'boolean' }, page: { type: 'boolean' }, purpose: { type: 'string' }, gallery: { type: 'boolean' } } });
+        parsed = parseArgs({ args, allowPositionals: true, strict: true, options: { plan: { type: 'boolean' }, page: { type: 'boolean' }, purpose: { type: 'string' }, gallery: { type: 'boolean' }, project: { type: 'string' }, board: { type: 'string' }, by: { type: 'string' }, from: { type: 'string' } } });
     }
     catch (e) {
         throw fail(e.message, 'VALIDATION_ERROR', 'Run `sign-off-axi report --help`');
     }
     const [sub, dir, extra] = parsed.positionals, { plan, page, purpose, gallery } = parsed.values;
+    if (parsed.values.project !== undefined && sub !== 'kind')
+        throw fail('--project belongs to report kind; a new report carries its project in report.json', 'VALIDATION_ERROR', 'sign-off-axi report kind <key> <kind> --project <name> --by <who>');
+    if (sub === 'kind')
+        return reportKind(parsed.positionals.slice(1), parsed.values);
+    if (parsed.values.board !== undefined || parsed.values.by !== undefined || parsed.values.from !== undefined)
+        throw fail('--board, --by and --from belong to report kind', 'VALIDATION_ERROR', 'sign-off-axi report kind <key> <kind> --by <who>');
+    if (purpose !== undefined && plan)
+        throw fail('--purpose does not go with --plan: a plan is always an implementation plan', 'VALIDATION_ERROR', 'sign-off-axi report init <folder> --plan');
     if (gallery && (plan || page))
-        throw fail(`--gallery does not go with --${plan ? 'plan' : 'page'}: a gallery is a section of a guided report`, 'VALIDATION_ERROR', 'sign-off-axi report init <folder> --gallery');
-    if (purpose !== undefined && (plan || page))
-        throw fail(`--purpose does not go with --${plan ? 'plan' : 'page'}: ${plan ? 'a plan is always an implementation plan' : 'a page report has no purpose field'}`, 'VALIDATION_ERROR', 'sign-off-axi report init <folder> --purpose research');
+        throw fail(`--gallery does not go with --${plan ? 'plan' : 'page'}: a gallery is a section of a guided report`, 'VALIDATION_ERROR', 'sign-off-axi report init <folder> --purpose research --gallery');
     if (purpose !== undefined && !REPORT_PURPOSES.includes(purpose))
         throw fail(`--purpose ${purpose} must be one of ${REPORT_PURPOSES.join(', ')}`, 'VALIDATION_ERROR', 'sign-off-axi report init <folder> --purpose research');
+    if (sub === 'init' && !plan && purpose === undefined) {
+        throw fail(`report init needs --purpose <kind>, what the report is for: ${REPORT_PURPOSES.join(', ')}`, 'VALIDATION_ERROR', 'sign-off-axi report init <folder> --purpose research');
+    }
     if (sub !== 'init' || dir === undefined || extra !== undefined || (plan && page)) {
         throw fail(sub !== 'init' ? `unknown report command ${sub ?? '(none)'}` : extra !== undefined ? `unexpected argument ${extra}: report init takes one folder` : plan && page ? '--plan and --page do not go together' : 'report init needs the folder to write the template in', 'VALIDATION_ERROR', 'sign-off-axi report init <folder> [--plan]');
     }
@@ -2622,7 +2657,6 @@ function report(args) {
             created.push(shellPath(path));
         }
         return toon({ folder: shellPath(out), created: created.length ? created : 'nothing new (re-run is a no-op)', kept }, [
-            ...(plan || purpose ? [] : [`Set "purpose" to what the report is for: ${REPORT_PURPOSES.join(', ')} (or run report init again with --purpose <kind> in a new folder)`]),
             `Replace every FILL: line in ${kind}.json with your own words: the answer first, one picture (bars, steps or tiles), what you understood, then the sections${plan ? ' and the decisions' : ''}`,
             `${plan ? 'A plan' : 'A design or architecture report'} needs one real diagram: a flow or architecture drawing as inline SVG, in light and dark, as "diagram" on the visual (see the skill)`,
             ...(gallery ? ['Save each option\'s screenshots (or pages) under the board file\'s folder, a phone frame 390 wide and a desktop frame 1280 wide, and fill the gallery: its label, model, run time (UTC), and per frame its path from that folder and a caption'] : []),
@@ -2642,10 +2676,51 @@ function report(args) {
     return toon({ folder: shellPath(out), created: created.length ? created : 'nothing new (re-run is a no-op)', kept }, [
         'Replace every FILL: line: the answer and its picture first, then the diagram, the steps to tap, and the folded detail',
         'Open index.html in a browser 390 px wide and look before posting: mostly text means it is not ready',
-        served ? `Run \`sign-off-axi post ${shellPath(board)} --type report --title "<the answer>" --about "<why it matters>" --view ${rel}/index.html --preview ${rel}/preview.svg\``
-            : `Run \`sign-off-axi post <board.json> --type report --title "<the answer>" --about "<why it matters>" --view <path>/index.html --preview <path>/preview.svg\`, both paths from the board file's folder, which must hold this folder`,
+        served ? `Run \`sign-off-axi post ${shellPath(board)} --type report --purpose ${purpose} --project <name> --title "<the answer>" --about "<why it matters>" --view ${rel}/index.html --preview ${rel}/preview.svg\``
+            : `Run \`sign-off-axi post <board.json> --type report --purpose ${purpose} --project <name> --title "<the answer>" --about "<why it matters>" --view <path>/index.html --preview <path>/preview.svg\`, both paths from the board file's folder, which must hold this folder`,
     ]);
 }
+/** report kind <key> <kind> --by <who>, or --from <file>: one `key<TAB>kind<TAB>project` line each, with a note after if you like. Sets the kind and the project of reports posted before every report had one, and records who set it.
+ *  Every key is checked before the first is written, so a bad line changes nothing. */
+function reportKind(given, values) {
+    const example = 'sign-off-axi report kind sign-in-flow research --project Beacon --by agent-41', { by, from, project } = values;
+    if (by === undefined || !by.trim() || by.length > 80)
+        throw fail('report kind needs --by <who set it>, in 80 characters or fewer', 'VALIDATION_ERROR', example);
+    if (from !== undefined === given.length > 0)
+        throw fail(from !== undefined ? '--from takes the place of <key> <kind>' : 'report kind needs <key> <kind> --project <name>, or --from <file> with one `key<TAB>kind<TAB>project` line each', 'VALIDATION_ERROR', example);
+    let pairs = [[...given, project]];
+    if (from !== undefined) {
+        let text;
+        try {
+            text = readFileSync(from, 'utf8');
+        }
+        catch (e) {
+            throw fail(`${from} ${reasonOf(e.code)}`, 'NOT_FOUND', 'Check the path names a readable file');
+        }
+        pairs = text.split('\n').filter((l) => l.trim() && !l.startsWith('#')).map((l) => l.split('\t').map((x) => x.trim()));
+    }
+    const file = values.board === undefined ? boardHere() : resolve(values.board), items = readItems(file).items, reports = new Map(items.filter((i) => i?.kind === 'report').map((i) => [i.key, i]));
+    const set = readKinds(file, warn), rows = pairs.map(([key, kind, name, _why, ...rest], n) => {
+        const at = from === undefined ? '' : `${from} line ${n + 1}: `;
+        if (key === undefined || kind === undefined || !name || rest.length)
+            throw fail(`${at}expected <key> <kind> <project>`, 'VALIDATION_ERROR', example);
+        if (!REPORT_PURPOSES.includes(kind))
+            throw fail(`${at}${kind} is not a report kind: use one of ${REPORT_PURPOSES.join(', ')}`, 'VALIDATION_ERROR', example);
+        if (name.length > 40)
+            throw fail(`${at}project ${name} is over 40 characters`, 'VALIDATION_ERROR', example);
+        const d = reports.get(key);
+        if (!d)
+            throw fail(`${at}${key} is not a report on ${tilde(file)}`, 'NOT_FOUND', 'Run `sign-off-axi list` for the keys; a plan is always an implementation plan and needs no kind');
+        for (const [what, has, now] of [['kind', d.purpose, kind], ['project', d.project, name]])
+            if (has !== undefined && has !== now)
+                throw fail(`${at}${key} already has its ${what} ${has} in the report itself`, 'VALIDATION_ERROR', 'Only a report posted without one is named with report kind');
+        return { key, kind, project: name, same: (d.purpose ?? set.get(key)?.purpose) === kind && (d.project ?? set.get(key)?.project) === name };
+    });
+    const changed = rows.filter((r) => !r.same);
+    for (const r of changed)
+        appendKind(file, r.key, r.kind, r.project, by);
+    return toon({ board: tilde(file), by, changed: changed.length, unchanged: rows.length - changed.length, reports: changed.map(({ key, kind, project }) => ({ key, kind, project })) }, [changed.length ? 'The board shows each kind and project on its row and head now' : 'Every report named already had that kind and project']);
+}
 /** `notify check|test`: whether device notifications can work from this setup, and one real test notice. Never prints the token. */
 async function notify(args) {
     const mode = ['check', 'test'].includes(args[0]) ? args.shift() : 'check';
@@ -3176,13 +3251,13 @@ const state = () => {
     const rounds = readRounds(file, warn).map(({ comments: _, ...r }) => r);
     // The board file is read once for the whole state: it can hold thousands of items.
     const { extra } = readItems(file), fed = extra.readonly === true || extra.answers_only === true, items = loadDecisions(file);
-    const lines = items.some((d) => d.type === 'design') ? answerLines(file) : [];
+    const lines = items.some((d) => d.type === 'design') ? answerLines(file) : [], kinds = readKinds(file, warn);
     return {
         file,
         mockBase: `/mock/${loopback(bind) ? 'local' : mockPass(tokenOf(file))}/`,
         // Who filed an item stays in the file, except as `by`, the name a card's thread says posted it and took its answer: never a bare session id, which names nobody.
         // A sign-in's start command stays on this host too: the page only learns that a tap makes a new link, and how the last run went.
-        decisions: items.filter((d) => !fakeEvidence(d)).map(({ filer, start, ...d }) => ({ ...d, ...(filer && !SESSION_ID.test(filer) && { by: filer }), ...(plainAsk(d) && guardOf(d) && { guard: guardOf(d) }), ...(d.type === 'design' && answers[d.key]?.answer === 'approve' && { status: 'approved' }), ...(d.type === 'design' && designState(d, answers[d.key], lines)), ...(start && { start: true, run: signinState(d.key) }), evidenceCard: d.evidence ? evidenceCard(d.evidence) : null,
+        decisions: items.filter((d) => !fakeEvidence(d)).map(({ filer, start, ...d }) => ({ ...d, ...(d.kind === 'report' && kinds.has(d.key) && { purpose: d.purpose ?? kinds.get(d.key).purpose, project: d.project ?? kinds.get(d.key).project, kind_by: kinds.get(d.key).by }), ...(filer && !SESSION_ID.test(filer) && { by: filer }), ...(plainAsk(d) && guardOf(d) && { guard: guardOf(d) }), ...(d.type === 'design' && answers[d.key]?.answer === 'approve' && { status: 'approved' }), ...(d.type === 'design' && designState(d, answers[d.key], lines)), ...(start && { start: true, run: signinState(d.key) }), evidenceCard: d.evidence ? evidenceCard(d.evidence) : null,
             ...(d.mocks && { mocks: d.mocks.map((m) => ({ ...m, hash: mockHash(m.path) })) }) })),
         readonly: extra.readonly === true,
         answers_only: extra.answers_only === true,

package/dist/contract.js

@@ -3,6 +3,7 @@ import { createHash } from 'node:crypto';
 import { accessSync, constants, readFileSync, realpathSync, statSync } from 'node:fs';
 import { dirname, isAbsolute, relative, resolve, sep } from 'node:path';
 import { CAPTION_MAX, EVIDENCE_STATUSES, GUARDS, isKey, MEDIA_MAX, PRIORITIES, REPORT_FORMS, REPORT_PARTS, REPORT_PURPOSES } from './store.js';
+import { nestedCard, ownColours } from './pagestyle.js';
 /** A message that does not match: what is wrong, and the one line that says how to fix it. */
 export class ContractError extends Error {
     help;
@@ -23,7 +24,7 @@ export const KINDS = Object.keys(SCHEMAS);
 const COMMON = ['contract', 'kind', 'schema', 'key', 'title', 'filer', 'ticket', 'priority', 'link', 'about'];
 const FIELDS = {
     ask: [...COMMON, 'ask_ref', 'detail', 'why', 'options', 'recommend_value', 'recommend_reason', 'default_if_silent', 'silent_by', 'guard', 'close', 'merges', 'proof', 'report'],
-    report: [...COMMON, 'filed', 'group', 'decided', 'form', 'video', 'asked_by', 'view', 'preview'],
+    report: [...COMMON, 'filed', 'group', 'decided', 'form', 'video', 'asked_by', 'purpose', 'project', 'view', 'preview'],
     evidence: [...COMMON, 'media', 'run', 'status', 'captions'],
     gate: [...COMMON, 'run', 'options', 'recommend_value', 'close'],
     finding: [...COMMON, 'cause', 'incidents', 'days', 'evidence_ids', 'change_kind', 'proposal', 'options', 'recommend_value'],
@@ -36,7 +37,7 @@ const DESIGN_1 = [...COMMON, 'group', 'filed', 'status', 'preview', 'journeys',
 export const FRAME_ROLES = ['today', 'proposed', 'built', 'target'];
 const GUIDE = ['understood', 'visual', 'sections', 'next'];
 const GUIDE_FIELDS = {
-    report: [...COMMON, 'filed', 'group', 'decided', 'asked_by', 'purpose', ...GUIDE],
+    report: [...COMMON, 'filed', 'group', 'decided', 'asked_by', 'purpose', 'project', ...GUIDE],
     plan: [...COMMON, 'project', 'decisions', ...GUIDE],
 };
 /** A done-done run: its id, full commit and the four Checks lines. */
@@ -57,6 +58,7 @@ const KIT_TONES = ['note', 'warn', 'ask'];
 export const MEDIA_BYTES = 50_000_000;
 /** The command that makes a report's page, named in every refusal of a report without one. */
 export const REPORT_INIT = 'sign-off-axi report init <folder>';
+const KIT_HELP = `Draw the report with the board's own blocks instead: run \`${REPORT_INIT} --purpose <kind>\` and add \`blocks\` to a section (callout, beats, video, table, compare, evidence). A page of your own may use the system colours (Canvas, CanvasText, GrayText) and no cards`;
 const PAGE_HELP = `Run \`${REPORT_INIT} --page\` to make the page, fill it, then post it with "view" and "preview"`;
 const GUIDE_HELP = `Run \`${REPORT_INIT}\` to write report.json, fill every FILL: line, then post it with \`post --kind report --from <folder>/report.json\``;
 /** Parses one message; a field written twice in any object refuses it, since plain JSON.parse keeps the last one quietly. */
@@ -495,8 +497,7 @@ export function checkMessage(m, want, flags = false, fresh = false) {
         throw bad('schema', `${m.schema} of ${m.kind} is not in this sign-off-axi`, `Upgrade sign-off-axi, or post ${m.kind} schema ${SCHEMAS[m.kind]}`);
     if (g && /FILL:/.test(JSON.stringify(m)))
         throw bad('message', 'still has FILL: lines from the template', 'Replace every FILL: line with your own words, then post again');
-    // A guided report 5 names what it is for; report 4 and older have no purpose field.
-    const fields = (guided(m) ? GUIDE_FIELDS[m.kind] : m.kind === 'design' && m.schema === 1 ? DESIGN_1 : FIELDS[m.kind]).filter((f) => f !== 'purpose' || (m.kind === 'report' && m.schema >= 5)), extra = Object.keys(m).find((f) => !fields.includes(f));
+    const fields = (guided(m) ? GUIDE_FIELDS[m.kind] : m.kind === 'design' && m.schema === 1 ? DESIGN_1 : FIELDS[m.kind]), extra = Object.keys(m).find((f) => !fields.includes(f));
     if (extra === 'options' && m.kind === 'report')
         throw bad('options', 'is not a field of report: a report takes no answer', 'Remove "options", or post an ask to get an answer');
     if (extra === 'options' && m.kind === 'plan')
@@ -558,6 +559,8 @@ export function checkMessage(m, want, flags = false, fresh = false) {
         }
         if (Object.hasOwn(m, 'group'))
             text('group', m.group, 40, 'the section it belongs to, in 40 characters or fewer, or leave it out');
+        if (Object.hasOwn(m, 'project'))
+            text('project', m.project, 40, 'the project it is about, in 40 characters or fewer');
         if (Object.hasOwn(m, 'decided'))
             text('decided', m.decided, 200, 'what was decided, in 200 characters or fewer, or leave it out');
         if (Object.hasOwn(m, 'form') && !REPORT_FORMS.includes(m.form))
@@ -566,13 +569,12 @@ export function checkMessage(m, want, flags = false, fresh = false) {
             text('video', m.video, 10, 'the video length such as "0:28", in 10 characters or fewer, or leave it out');
         if (Object.hasOwn(m, 'asked_by'))
             text('asked_by', m.asked_by, 40, 'who asked for it, such as "You asked" or "Docs agent", in 40 characters or fewer, or leave it out');
-        if (m.schema >= 5) {
-            const set = `Set "purpose" to what this report is for, one of ${REPORT_PURPOSES.join(', ')}`;
-            if (!Object.hasOwn(m, 'purpose'))
-                throw bad('purpose', 'is required: the kind of report, which the board shows on its row and head', set);
-            if (!REPORT_PURPOSES.includes(m.purpose))
-                throw bad('purpose', `${show(m.purpose)} is not one of ${REPORT_PURPOSES.join(', ')}`, set);
-        }
+        // A report 5 must name what it is for; an older one may, and a new post of one must (newReportKind).
+        const set = `Set "purpose" to what this report is for, one of ${REPORT_PURPOSES.join(', ')}`;
+        if (m.schema >= 5 && !Object.hasOwn(m, 'purpose'))
+            throw bad('purpose', 'is required: the kind of report, which the board shows on its row and head', set);
+        if (Object.hasOwn(m, 'purpose') && !REPORT_PURPOSES.includes(m.purpose))
+            throw bad('purpose', `${show(m.purpose)} is not one of ${REPORT_PURPOSES.join(', ')}`, set);
         // A report is a page to tap through and a picture of it for the card: text alone is a status note, not a report.
         if (g) {
             guide(1);
@@ -1052,7 +1054,7 @@ export function diagramPages(m, base) {
 const BLOCK_CHARS = 240;
 /** A report's or plan's page, and a report's picture, from `base`, the board file's folder: each a file of 5 MB or less
  * whose real path stays inside that folder, and a page filled in the ladder shape the scaffold gives. The first broken rule throws. */
-export function reportPage(m, base) {
+export function reportPage(m, base, fresh = false) {
     const at = isKey(m.key) ? `key ${m.key}: ` : '';
     // A board not made yet has no folder, so its page is not there either.
     let root = resolve(base);
@@ -1101,6 +1103,15 @@ export function reportPage(m, base) {
         throw bad(`${page} has no folded detail`, 'Fold the detail into <details><summary>Details</summary>...</details> at the end');
     if (/<(script|img|iframe|link|video|audio|source)\b[^>]*\b(src|href)\s*=\s*["']?\s*(https?:)?\/\//i.test(html))
         throw bad(`${page} loads something from the web, which the board blocks`, 'Put scripts, styles and pictures in the page or beside it');
+    // The look rules bind a report posted for the first time: one already on the board is shown as it was filed, and is re-rendered through the kit instead.
+    if (fresh) {
+        const colours = ownColours(html);
+        if (colours.length > 2)
+            throw bad(`${page} draws its own colour palette (${colours.slice(0, 4).join(', ')}${colours.length > 4 ? ', ...' : ''}), but the board owns the colours`, KIT_HELP);
+        const nested = nestedCard(html);
+        if (nested)
+            throw bad(`${page} puts a card inside a card (${nested}), but the board draws one level of card at most`, KIT_HELP);
+    }
     // A block is one paragraph or list item; about five lines on a phone is the most a reader takes in at once.
     const long = [...html.matchAll(/<(p|li|dd|blockquote)\b[^>]*>([\s\S]*?)<\/\1>/gi)].map((b) => b[2].replace(/<[^>]*>/g, '').replace(/&[a-z#0-9]+;/gi, ' ').replace(/\s+/g, ' ').trim())
         .find((t) => [...t].length > BLOCK_CHARS);

package/dist/pagestyle.js

@@ -0,0 +1,73 @@
+/** The look rules for a page an agent writes for a report (report schema 2, `--page`): the board owns the palette and the card, so a page that brings its own is refused. */
+const COLOUR = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\(/gi;
+const PLAIN = new Set(['#fff', '#ffffff', '#000', '#000000']);
+const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
+const CONTROLS = new Set(['button', 'summary', 'input', 'select', 'textarea', 'kbd', 'code', 'pre', 'th', 'td', 'img', 'video', 'canvas']);
+/** The CSS a page declares: its style blocks and its style attributes, with comments gone. */
+function css(html) {
+    const blocks = [...html.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1]);
+    const inline = [...html.matchAll(/\sstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/gi)].map((m) => m[1] ?? m[2]);
+    return [...blocks, ...inline].join('\n').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+/** The colours a page writes out by hand (a hex, rgb, hsl and the like), black and white aside; one accent is a choice, three or more are a palette. */
+export function ownColours(html) {
+    const seen = new Set();
+    for (const [c] of css(html).matchAll(COLOUR)) {
+        const v = c.toLowerCase();
+        if (v.endsWith('(') || !PLAIN.has(v))
+            seen.add(v);
+    }
+    return [...seen];
+}
+/** A length in a border-radius that rounds a box into a card: 8 px or more. A percentage is a circle or a pill, never a card. */
+function rounded(value) {
+    return [...value.matchAll(/(\d*\.?\d+)(px|rem|em)\b/g)].some((m) => parseFloat(m[1]) * (m[2] === 'px' ? 1 : 16) >= 8);
+}
+/** The compounds (a tag, .class or #id, joined) of the CSS rules that draw a card: round corners with a fill, an edge or a shadow. */
+function cardRules(sheet) {
+    const out = [];
+    for (const [, selectors, body] of sheet.matchAll(/([^{}@]+)\{([^{}]*)\}/g)) {
+        const d = new Map([...body.matchAll(/([a-z-]+)\s*:\s*([^;]+)/gi)].map((m) => [m[1].toLowerCase(), m[2].trim()]));
+        const radius = [...d].some(([k, v]) => /^border(-\w+)*-radius$/.test(k) && rounded(v));
+        const drawn = [...d].some(([k, v]) => (k === 'box-shadow' && v !== 'none') || (/^border(-top|-right|-bottom|-left)?$/.test(k) && !/^(0|none)\b/.test(v)) || (/^background(-color)?$/.test(k) && !/^(none|transparent|inherit)\b/.test(v)));
+        if (!radius || !drawn)
+            continue;
+        for (const s of selectors.split(',')) {
+            const last = s.trim().split(/[\s>+~]+/).pop() ?? '';
+            if (last && !last.includes(':') && !CONTROLS.has(last))
+                out.push(last);
+        }
+    }
+    return out;
+}
+/** A card inside a card: the first element drawn as one that sits in another, as "section.panel in .wrap", or undefined when there is none. */
+export function nestedCard(html) {
+    const cards = cardRules(css(html));
+    if (!cards.length)
+        return undefined;
+    const is = (tag, attrs, compound) => {
+        const t = /^[a-z][a-z0-9]*/i.exec(compound)?.[0], id = /#([\w-]+)/.exec(compound)?.[1];
+        const want = [...compound.matchAll(/\.([\w-]+)/g)].map((m) => m[1]);
+        const have = (/\sclass\s*=\s*(?:"([^"]*)"|'([^']*)')/i.exec(attrs) ?? []).slice(1).join(' ').split(/\s+/);
+        return (!t || t.toLowerCase() === tag) && (!id || new RegExp(`\\sid\\s*=\\s*["']?${id}["'\\s>]`, 'i').test(attrs + ' ')) && want.every((w) => have.includes(w));
+    };
+    const body = html.replace(/<!--[\s\S]*?-->/g, '').replace(/<(script|style)\b[\s\S]*?<\/\1>/gi, '').replace(/<svg\b[\s\S]*?<\/svg>/gi, '<svg></svg>');
+    const stack = [];
+    for (const [, close, name, attrs] of body.matchAll(/<(\/?)([a-z][a-z0-9]*)\b([^>]*)>/gi)) {
+        const tag = name.toLowerCase();
+        if (close) {
+            const at = stack.map((s) => s.tag).lastIndexOf(tag);
+            if (at >= 0)
+                stack.length = at;
+            continue;
+        }
+        if (VOID.has(tag) || attrs.endsWith('/'))
+            continue;
+        const card = cards.find((c) => is(tag, ' ' + attrs, c));
+        const outer = card && stack.find((s) => s.card);
+        if (outer)
+            return `${card} in ${outer.card}`;
+        stack.push({ tag, card });
+    }
+    return undefined;
+}

package/dist/store.js

@@ -290,7 +290,7 @@ export function loadDecisions(path, board) {
             ...(d.kind === 'gate' && d.run && { run: { run_id: d.run.run_id, commit: d.run.commit } }),
             // So is a finding's proposal, with the counts and records behind it.
             ...(d.kind === 'finding' && { finding: { cause: d.cause, incidents: d.incidents, days: d.days, evidence_ids: d.evidence_ids, change_kind: d.change_kind, proposal: d.proposal } }),
-            ...(plan && { sections: d.sections, decisions: d.decisions, ...(d.project && { project: d.project }) }),
+            ...(plan && { sections: d.sections, decisions: d.decisions }), ...((plan || report) && d.project && { project: d.project }),
             ...(engagement && { engagement: { kind: d.kind, schema: d.schema, filer: d.filer, revision: documentRevision(d) } }),
             ...(guided && { guided: true, understood: d.understood, visual: d.visual, next: d.next, ...(report && { sections: d.sections }) }),
             ...(design && { kind: 'design', type: 'design', group: d.group, filed: d.filed, status: d.status, preview: d.preview, journeys: d.journeys, ...(d.accepts && { accepts: d.accepts }), ...(d.reviewed && { reviewed: d.reviewed }), ...(d.options && { options: d.options, recommend_value: d.recommend }) }),
@@ -551,6 +551,30 @@ export function readDiscards(decisionsPath) {
             ? [{ key: x.key, reason: x.reason, at: x.at, last: !after.length }] : [];
     });
 }
+/** The kind and project an agent read an older report's words and set for it, one line per key and change: who set it and when. The report's own file is never rewritten. */
+export const kindsPath = (decisionsPath) => decisionsPath.replace(/\.json$/, '') + '.kinds.jsonl';
+export function appendKind(decisionsPath, key, purpose, project, by) {
+    const line = { key, purpose, project, by, at: now() };
+    appendLine(kindsPath(decisionsPath), line);
+    return line;
+}
+/** Every report's set kind as its latest line says. A torn or unknown line is skipped and reported through warn. */
+export function readKinds(decisionsPath, warn = () => { }) {
+    const kinds = new Map();
+    readRaw(kindsPath(decisionsPath)).split('\n').forEach((line, n) => {
+        try {
+            const x = line && JSON.parse(line);
+            if (x && typeof x.key === 'string' && REPORT_PURPOSES.includes(x.purpose) && isText(x.project) && typeof x.by === 'string')
+                kinds.set(x.key, x);
+            else if (x)
+                throw new Error('not a kind');
+        }
+        catch {
+            warn(`skipped unreadable line ${n + 1} in ${kindsPath(decisionsPath)}`);
+        }
+    });
+    return kinds;
+}
 /** Design reviews Main has put to the user, one line per key and change. A design a lead posts is reviewed under Designs and is no ask of the user's
  *  until the promote command names it here; no post, feed or board request writes this log. */
 export const promotedPath = (decisionsPath) => decisionsPath.replace(/\.json$/, '') + '.promoted.jsonl';

package/fixtures/contract/report.v2/page/index.html

@@ -10,38 +10,40 @@
 <style>
   :root {
     color-scheme: light dark;
-    --bg: #F7F7F8; --surface: #FFFFFF; --line: #E2E2E6; --text: #16161A; --muted: #5C5C66;
-    --accent: #5B5BD6; --accent-soft: #ECECFD; --on-accent: #FFFFFF; --ok: #1E7034;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root { --bg: #111114; --surface: #1C1C21; --line: #2E2E36; --text: #EDEDF0; --muted: #A4A4AE; --accent: #9491FF; --accent-soft: #26264A; --on-accent: #111114; --ok: #51CF66; }
+    /* No palette of its own: the browser's system colours follow light and dark, so the page needs no colour written out. A report the board can draw
+       itself (report init without --page) needs no page at all. */
+    --bg: Canvas; --text: CanvasText; --muted: GrayText; --line: color-mix(in srgb, CanvasText 18%, Canvas);
+    --accent: CanvasText; --soft: color-mix(in srgb, CanvasText 7%, Canvas); --on-accent: Canvas;
   }
+  @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
   * { box-sizing: border-box; }
-  body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+  body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.4706 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.022em; }
   main { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; display: grid; gap: 1rem; }
-  section { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem 1rem; display: grid; gap: 0.75rem; }
+  section { border-top: 1px solid var(--line); padding: 1.25rem 0; display: grid; gap: 0.75rem; }
+  section:first-child { border-top: 0; }
   h1 { font-size: 1.625rem; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
-  h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
+  h2 { font-size: 0.9375rem; font-weight: 600; color: var(--muted); margin: 0; }
   p { margin: 0; }
   .lead { font-size: 1.125rem; }
+  .asof { font-size: 0.9375rem; color: var(--muted); }
   svg { width: 100%; height: auto; display: block; }
   svg text { fill: var(--text); font: 600 15px system-ui, sans-serif; }
-  .box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
+  .box { fill: var(--soft); stroke: var(--accent); stroke-width: 2; }
   .arrow { stroke: var(--muted); stroke-width: 2.5; fill: none; marker-end: url(#tip); }
   #tip path { fill: var(--muted); }
   /* Try it: tap a step, or Back and Next; the line shows where you are. */
   .track { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
   .track::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 50%; border-top: 2px solid var(--line); }
-  .track button { position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: 700 1.0625rem system-ui, sans-serif; cursor: pointer; }
+  .track button { position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); color: var(--muted); font: 700 1.0625rem system-ui, sans-serif; cursor: pointer; }
   .track .done { border-color: var(--accent); color: var(--accent); }
   .track .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
-  .stage { min-height: 7.5rem; border-radius: 0.75rem; background: var(--accent-soft); padding: 1rem; display: grid; gap: 0.375rem; align-content: start; }
+  .stage { min-height: 7.5rem; border-radius: 0.75rem; background: var(--soft); padding: 1rem; display: grid; gap: 0.375rem; align-content: start; }
   .stage .count { font-size: 0.875rem; color: var(--muted); }
   .stage h3 { margin: 0; font-size: 1.1875rem; }
   .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
   .nav button { min-height: 3rem; border-radius: 0.75rem; font: 650 1.0625rem system-ui, sans-serif; cursor: pointer; border: 2px solid var(--accent); }
   .back { background: transparent; color: var(--accent); }
-  .next { background: var(--accent); color: var(--on-accent); }
+  .next { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
   button:disabled { opacity: 0.4; cursor: default; }
   button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
   summary { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; font-weight: 650; cursor: pointer; list-style: none; }

package/fixtures/contract/report.v2/valid-full.json

@@ -1 +1 @@
-{"contract":1,"kind":"report","schema":2,"key":"new-sign-in","title":"How the new sign-in works","filer":"sign-off-builder","link":"https://example.com/pr/44","about":"Sign-in now asks for a code after the password, so a stolen password alone opens nothing.","filed":"2026-10-13T07:19:00Z","group":"Sign-in","decided":"Umer keeps the code step.","form":"before-after","video":"0:28","asked_by":"You asked","view":"page/index.html","preview":"page/preview.svg"}
+{"contract":1,"kind":"report","schema":2,"key":"new-sign-in","title":"How the new sign-in works","purpose":"other","project":"Beacon","filer":"sign-off-builder","link":"https://example.com/pr/44","about":"Sign-in now asks for a code after the password, so a stolen password alone opens nothing.","filed":"2026-10-13T07:19:00Z","group":"Sign-in","decided":"Umer keeps the code step.","form":"before-after","video":"0:28","asked_by":"You asked","view":"page/index.html","preview":"page/preview.svg"}

package/fixtures/contract/report.v2/valid-minimal.json

@@ -4,6 +4,8 @@
   "schema": 2,
   "key": "why-two-step-sign-in",
   "title": "Why sign-in takes two steps",
+  "purpose": "other",
+  "project": "Beacon",
   "about": "A stolen password alone no longer opens the account.\nUmer has nothing to do.",
   "filed": "2026-10-12T23:59:59Z",
   "view": "page/index.html",

package/fixtures/contract/report.v3/valid-full.json

@@ -4,6 +4,8 @@
   "schema": 3,
   "key": "sign-in-faster",
   "title": "Sign-in now takes 2.8 minutes",
+  "purpose": "other",
+  "project": "Beacon",
   "group": "Beacon",
   "filer": "agent-41",
   "asked_by": "Release agent",

package/fixtures/contract/report.v3/valid-minimal.json

@@ -4,6 +4,8 @@
   "schema": 3,
   "key": "digest-ran",
   "title": "The weekly digest ran",
+  "purpose": "other",
+  "project": "Beacon",
   "filed": "2026-10-19T08:00:00Z",
   "about": "Sent to 412 readers with no failures.",
   "understood": [{"label": "You asked", "text": "Send the weekly digest."}],

package/fixtures/contract/report.v4/valid-full.json

@@ -4,6 +4,8 @@
   "schema": 4,
   "key": "sign-in-faster",
   "title": "Sign-in now takes 2.8 minutes",
+  "purpose": "other",
+  "project": "Beacon",
   "group": "Beacon",
   "filer": "agent-41",
   "ticket": "T-29",

package/fixtures/contract/report.v4/valid-minimal.json

@@ -4,6 +4,8 @@
   "schema": 4,
   "key": "digest-ran",
   "title": "The weekly digest ran",
+  "purpose": "other",
+  "project": "Beacon",
   "filed": "2026-10-19T08:00:00Z",
   "about": "Sent to 412 readers with no failures.",
   "understood": [

package/fixtures/contract/report.v5/valid-full.json

@@ -12,6 +12,7 @@
   "next": {"heading": "Say go and I wire ntfy in", "lines": ["The first slice sends one test push to Umer's phone.", "The proof lands as an update under Evidence."]},
   "key": "push-service",
   "title": "Which push service fits a team of two",
+  "project": "Beacon",
   "purpose": "research",
   "group": "Beacon",
   "about": "Five services compared on cost, delivery on a phone and setup time. Two fit; one is free up to our size.",

package/fixtures/contract/report.v5/valid-minimal.json

@@ -12,6 +12,7 @@
   "next": {"heading": "Say go and I wire ntfy in", "lines": ["The first slice sends one test push to Umer's phone.", "The proof lands as an update under Evidence."]},
   "key": "release-stands",
   "title": "Where the 0.6 release stands",
+  "project": "Beacon",
   "purpose": "status",
   "group": "Release",
   "about": "Four of five parts are done; the last waits on one review.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sign-off-axi",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "One review board for evidence, quick yes/no decisions and retro changes.",
   "type": "module",
   "bin": { "sign-off-axi": "dist/cli.js" },

package/skills/sign-off-axi/SKILL.md

@@ -121,7 +121,7 @@ npx -y sign-off-axi raise --ask-ref <captain-message-id-or-hold-id> --title "Whi
   - `accepts` names the frame Yes approves. The triager's verdict goes in `reviewed`. `post --help` gives the shape, and the package's fixtures/contract/design.v2 has examples.
 - Report: an in-depth explainer, only when the user asked for an explanation, or a concept, design or trade-off must be understood. A merge, a PR outcome, a receipt, a verdict or a status note is never a report.
 - A report is fields the board draws as one scroll, never a text card and never a page you build. Run `npx -y sign-off-axi report init .sign-off/reports/<key> --purpose <kind>`, replace every `FILL:` line in `report.json`, then `npx -y sign-off-axi post --kind report --from .sign-off/reports/<key>/report.json --filer <id>`. Text you leave as `FILL:` is refused.
-- Every report says what it is for in `purpose`, its kind, and post refuses one without it. Pick the one that fits: `research` (research and discovery: a question, the options, sources), `plan` (implementation plan: how the work gets built, step by step), `decision` (decision and recommendation: one choice weighed), `audit` (what was checked against a standard, and what to fix), `incident` (incident and retro: what went wrong, why, what changes), `status` (where the work stands), or `other` when none fits. The board shows the kind on the report's row and head, with a line on what it is for, and the user filters Reports by it.
+- Every report says what it is for in `purpose`, its kind, and `report init` and post refuse a report without it; a report posted before that is named once with `report kind <key> <kind> --by <your id>`. Pick the one that fits: `research` (research and discovery: a question, the options, sources), `plan` (implementation plan: how the work gets built, step by step), `decision` (decision and recommendation: one choice weighed), `audit` (what was checked against a standard, and what to fix), `incident` (incident and retro: what went wrong, why, what changes), `status` (where the work stands), or `other` when none fits. The board shows the kind on the report's row and head, with a line on what it is for, and the user filters Reports by it.
 - A plan is the same, with the questions the person decides: `report init .sign-off/plans/<key> --plan`, fill `plan.json`, `post --kind plan --from <file> --filer <id>`, then `wait --filer <id>`. The person can press **Go ahead** and accept every pick you recommended, so recommend what you would do and say in `quiet` what happens if they stay quiet.
 - Write each part for the reader, in the order the board shows it: *What this is* (the answer and one picture: bars, steps or tiles, or the diagram a design, architecture or plan report needs), *What I understood* (the request in your words, so they can say it is off), *What I found*, *What I recommend* (plans), *What you decide* (plans, at most five questions, each with your pick and why), *Next step*.
   - Answer first: the heading of the picture is the answer, one plain sentence.
@@ -141,9 +141,33 @@ npx -y sign-off-axi raise --ask-ref <captain-message-id-or-hold-id> --title "Whi
 - Open the board at 390 px wide and look before you tell the person it is there: the first screen must give the answer and the picture.
 - A report about design output (screens, mocks or options a model made) always carries a gallery, never a pasted picture: run `report init <folder> --purpose <kind> --gallery`, save each option's screenshots under the board file's folder (a phone frame 390 wide, a desktop frame 1280 wide, light copies not needed), and fill the gallery on the first section: per option its `label`, the `model` that made it and `ran` (UTC), and per frame its `device` (`phone` or `desktop`), `src` and a `caption` saying what it shows. Post refuses a frame with no caption or device. The board draws the options as a strip to swipe (a row on a desk) with both frames side by side and a tap to open full size.
 - Show a report's parts with the board's own blocks, never your own HTML or CSS: add `blocks` to a section: `callout` (a note, warning or question set apart), `beats` (a stepper of pictures, each with a time, title and words), `video` (a film with its poster), `table`, `compare` (before and after) and `evidence` rows (a status of `fixed`, `progress` or `waiting`). Name the files next to the board file; post pins them. Post warns when your first paragraph repeats `about`: say something new there.
-- Only if you must keep an HTML page of your own (a demo to tap), run `report init <folder> --page` and post it with `--type report --view --preview`.
+- Write a report with the board's kit (next chapter), never as a page of your own. A page is only for a demo the reader must tap that no block can show (see `report init <folder> --page --purpose <kind>`).
 
-<!-- MARKER: report-writing chapter and the report gallery for design output are not described here yet; they land with the report kit PRs. -->
+## Write a report with the board's kit
+
+You hand the board words, files and rows; the board draws them in its own type and colours, light and dark, full width in one gutter. Never write HTML, CSS, a colour or a card for a report: a page of your own will not match the board, and a plan or report you want read has to look like the rest of it.
+
+1. `npx -y sign-off-axi report init .sign-off/reports/<key> --purpose <kind>` (add `--gallery` for design output), then fill every `FILL:` line. A report with nothing in it to show needs no blocks.
+2. Show a part with a block instead of a paragraph: add `blocks` (1 to 12, in the order given) to the section. Save each picture or film next to `report.json` and name it by path; post pins the files.
+3. Post: `post --kind report --from .sign-off/reports/<key>/report.json --filer <id>`. Open the board at 390 px wide, light and dark, and look before you say it is there.
+
+Pick the block by what the reader must see:
+
+| Block | Use it for | Fields |
+| --- | --- | --- |
+| `callout` | one thing set apart: a caveat, a warning, a question | `tone` (`note`, `warn` or `ask`), `title` (60), `text` (280) |
+| `beats` | a sequence the reader steps through: a film's scenes, a flow | `beats`, 2 to 12, each `image`, `time`, `title` (80), `text` (280) |
+| `video` | a short film | `src` (.mp4 or .webm, 50 MB), `poster`, `length`, `caption` |
+| `table` | the same measures for 2 or more options | `columns` (2 to 5), `rows` (up to 30, one cell per column, 120 each) |
+| `compare` | before and after | `before` and `after`, each `image` and `caption` (80) |
+| `evidence` | captures with a state for each | `rows`, each `image`, `title`, `note`, `status` (`fixed`, `progress` or `waiting`) |
+
+- One idea per block, one block per point; a table beats three paragraphs of numbers, and a stepper beats a numbered list of screens.
+- Say something new in each part. Post warns, and does not refuse, when a section's first paragraph repeats `about`.
+- Options a model made are a gallery, not a row of pictures: see the design-output rule above. `gallery` and `blocks` can share a section, the gallery first.
+- Images are .png, .jpg, .jpeg or .webp; a path has no `..`, `?`, `#` or backslash.
+- Sentence case in every heading and label; no capitals shouted, no colour words, no markup in any field.
+- A page of your own (`report init --page`) is held to the board's look at its first post: post refuses one that writes out three or more colours of its own or draws a card inside a card, and says to use blocks. The scaffold already draws neither; keep to the system colours (Canvas, CanvasText, GrayText). A report already on the board stays as it was filed.
 
 ## Follow your report kind's workflow
 

package/web/index.html

@@ -3231,7 +3231,7 @@
    *  or, filed by a tool that is itself a project on the board (its icon set with project --icon), that project. */
   const projectName = (d) => d.project || d.group || (d.type === 'evidence' ? projectOf(d) : d.proof && projectOf(state.decisions.find((x) => x.key === d.proof) ?? {}))
     || (ticketOf(d) && tkProject(ticketOf(d))) || (d.by && (state.projects ?? []).find((p) => p.name.toLowerCase() === d.by.toLowerCase())?.name) || undefined;
-  /** One project picture and tile for every list; use the pinned record, with a kind icon when the project picture is unavailable. */
+  /** One project picture and tile for every list; use the pinned record, with a neutral project icon when the project has none. */
   function projectPic(name, fallback = () => glyph('layers')) {
     const p = name && (state.projects ?? []).find((p) => p.name.toLowerCase() === name.toLowerCase());
     if (!p?.icon) return fallback();
@@ -3241,7 +3241,7 @@
   }
   const projectTile = (name, fallback) => el('span', { class: 'ui-icon', role: 'img', 'aria-label': name || 'No project' }, projectPic(name, fallback));
   const cardTile = (d) => {
-    const design = d.kind === 'design' || d.type === 'design', tile = projectTile(projectName(d), () => design ? icon('designs') : d.type === 'plan' ? icon('plan') : d.kind === 'report' || d.type === 'explainer' ? kindSvg(kindOf(d)) : icon(d.type === 'evidence' ? 'evidence' : d.reply ? 'reply' : 'yesno'));
+    const design = d.kind === 'design' || d.type === 'design', tile = projectTile(projectName(d), () => design ? icon('designs') : d.type === 'plan' ? icon('plan') : d.kind === 'report' || d.type === 'explainer' ? glyph('layers') : icon(d.type === 'evidence' ? 'evidence' : d.reply ? 'reply' : 'yesno'));
     const frame = design && designFrame(d);
     if (frame) { const img = el('img', { class: 'design-thumb', src: src(designUrl(d, frame)), alt: '' }); img.onerror = () => img.replaceWith(projectPic(projectName(d), () => icon('designs'))); tile.replaceChildren(img); }
     return tile;
@@ -3645,15 +3645,11 @@
     status: ['Status', 'Status', 'Where the work stands now and what comes next.', '<path d="M3 12h4l3-7 4 14 3-7h4"/>'],
     other: ['Report', 'Other report', 'An explainer of one idea.', '<path d="M12 7v13M4 18a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h4.5A3.5 3.5 0 0 1 12 7.5 3.5 3.5 0 0 1 15.5 4H20a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>'],
   };
-  /** A best guess at an older report's kind from its words, first match wins; it is never written back. */
-  const GUESS = [['incident', /\b(incident|outage|retro|post-?mortem|went wrong|broke|regression)/i], ['audit', /\b(audit|checked against|compliance|conform)/i],
-    ['plan', /\b(plan|slices?|roll ?out|migrat|step by step)/i], ['status', /\b(status|stands|progress|this week|weekly|so far)\b/i],
-    ['decision', /\b(should we|recommend|decid|decision|instead of|versus|vs\.)/i], ['research', /\b(research|compar|which|survey|options|study|discover|benchmark)/i]];
-  /** A report's kind: the one it was posted with; a plan is always an implementation plan; an older report gets the best guess from its title, what it says and its section heads. */
-  const kindOf = (d) => (KINDS[d.purpose] ? d.purpose : d.type === 'plan' ? 'plan' : GUESS.find(([, re]) => re.test([d.title, d.about, ...(d.sections ?? []).map((s) => s.heading)].join(' ')))?.[0] ?? 'other');
+  /** A report's kind: the one it was posted with or an agent set; a plan is always an implementation plan. A report with none shows as other. */
+  const kindOf = (d) => (KINDS[d.purpose] ? d.purpose : d.type === 'plan' ? 'plan' : 'other');
   const kindSvg = (k) => { const s = el('span', { class: 'rkg', 'aria-hidden': 'true' }); s.innerHTML = `<svg viewBox="0 0 24 24">${KINDS[k][3]}</svg>`; return s; };
   /** The kind's chip: its icon and its short name on a row, its full name on a report's head. */
-  const kindChip = (d, full) => { const k = kindOf(d); return el('span', { class: `rkc k-${k}`, 'data-kind': k }, kindSvg(k), (full ? KINDS[k][1] : KINDS[k][0]) + (!KINDS[d.purpose] && d.type !== 'plan' ? ' · kind guessed' : '')); };
+  const kindChip = (d, full) => { const k = kindOf(d); return el('span', { class: `rkc k-${k}`, 'data-kind': k }, kindSvg(k), (full ? KINDS[k][1] : KINDS[k][0])); };
   /** The kind's tile in the filter and its pill: its icon on the same treatment as its chip; Every kind is the filter's own drawing. */
   const kindTile = (k) => (k ? el('span', { class: `rkt k-${k}` }, kindSvg(k)) : el('span', { class: 'rkt k-all' }, evGlyph('filter')));
   /** One line under a report's title: what this kind of report is for. */
@@ -3718,8 +3714,8 @@
   function report(d, i = 0) {
     const n = d.steps?.length;
     // Keep the kind and ticket readable on line two; read progress sits quietly below while unread.
-    const t = ticketOf(d), ticket = d.ticket || t?.title || 'No ticket';
-    const meta = el('span', { class: 'rp-meta' }, kindChip(d), el('span', { class: 'rp-ticket', title: t ? `${t.id}: ${t.title}` : ticket }, ticket));
+    const t = ticketOf(d), ticket = d.ticket || t?.title;
+    const meta = el('span', { class: 'rp-meta' }, kindChip(d), ticket ? el('span', { class: 'rp-ticket', title: t ? `${t.id}: ${t.title}` : ticket }, ticket) : '');
     const face = uiRow({ tile: cardTile(d), title: plain(title(d)), priority: d.priority, after: trailBadge(d.key), meta });
     if (unread(d)) face[1].append(el('span', { class: 'rp-progress', role: 'progressbar', 'aria-label': 'Report read', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': String(readPct(d)) },
       kindOf(d) === 'plan' && kindParts(d).length ? partsStrip(d) : el('span', { class: 'ui-bar' }, el('i', { style: `width: ${readPct(d)}%` })), el('span', { class: 'pct sr-only' }, `${readPct(d)}%`)));

package/web/report-template.json

@@ -7,6 +7,7 @@
   "purpose": "FILL: what this report is for: research, plan, decision, audit, incident, status or other",
   "filed": "FILL: UTC time",
   "about": "FILL: why it matters, in 2 sentences",
+  "project": "FILL: the project this report is about",
   "group": "FILL: section name",
   "understood": [
     {

package/web/report.html

@@ -10,40 +10,40 @@
 <style>
   :root {
     color-scheme: light dark;
-    /* The board's Spacious tokens: --accent is the blue for text and lines, --action the blue a button is filled with. */
-    --bg: #F5F5F7; --surface: #FFFFFF; --line: #D2D2D7; --text: #1D1D1F; --muted: #6E6E73;
-    --accent: #0066CC; --action: #0071E3; --accent-soft: #E6F1FC; --on-accent: #FFFFFF; --ok: #17702F;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root { --bg: #000000; --surface: #161617; --line: #424245; --text: #F5F5F7; --muted: #86868B; --accent: #2997FF; --accent-soft: #19304A; --ok: #30D158; }
+    /* No palette of its own: the browser's system colours follow light and dark, so the page needs no colour written out. A report the board can draw
+       itself (report init without --page) needs no page at all. */
+    --bg: Canvas; --text: CanvasText; --muted: GrayText; --line: color-mix(in srgb, CanvasText 18%, Canvas);
+    --accent: CanvasText; --soft: color-mix(in srgb, CanvasText 7%, Canvas); --on-accent: Canvas;
   }
+  @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
   * { box-sizing: border-box; }
   body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.4706 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.022em; }
   main { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; display: grid; gap: 1rem; }
-  section { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem 1rem; display: grid; gap: 0.75rem; }
+  section { border-top: 1px solid var(--line); padding: 1.25rem 0; display: grid; gap: 0.75rem; }
+  section:first-child { border-top: 0; }
   h1 { font-size: 1.625rem; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
-  h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
+  h2 { font-size: 0.9375rem; font-weight: 600; color: var(--muted); margin: 0; }
   p { margin: 0; }
   .lead { font-size: 1.125rem; }
   .asof { font-size: 0.9375rem; color: var(--muted); }
   svg { width: 100%; height: auto; display: block; }
   svg text { fill: var(--text); font: 600 15px system-ui, sans-serif; }
-  .box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
+  .box { fill: var(--soft); stroke: var(--accent); stroke-width: 2; }
   .arrow { stroke: var(--muted); stroke-width: 2.5; fill: none; marker-end: url(#tip); }
   #tip path { fill: var(--muted); }
   /* Try it: tap a step, or Back and Next; the line shows where you are. */
   .track { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
   .track::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 50%; border-top: 2px solid var(--line); }
-  .track button { position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: 700 1.0625rem system-ui, sans-serif; cursor: pointer; }
+  .track button { position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); color: var(--muted); font: 700 1.0625rem system-ui, sans-serif; cursor: pointer; }
   .track .done { border-color: var(--accent); color: var(--accent); }
-  .track .on { background: var(--action); border-color: var(--action); color: var(--on-accent); }
-  .stage { min-height: 7.5rem; border-radius: 0.75rem; background: var(--accent-soft); padding: 1rem; display: grid; gap: 0.375rem; align-content: start; }
+  .track .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  .stage { min-height: 7.5rem; border-radius: 0.75rem; background: var(--soft); padding: 1rem; display: grid; gap: 0.375rem; align-content: start; }
   .stage .count { font-size: 0.875rem; color: var(--muted); }
   .stage h3 { margin: 0; font-size: 1.1875rem; }
   .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
   .nav button { min-height: 3rem; border-radius: 0.75rem; font: 650 1.0625rem system-ui, sans-serif; cursor: pointer; border: 2px solid var(--accent); }
   .back { background: transparent; color: var(--accent); }
-  .next { background: var(--action); border-color: var(--action); color: var(--on-accent); }
+  .next { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
   button:disabled { opacity: 0.4; cursor: default; }
   button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
   summary { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; font-weight: 650; cursor: pointer; list-style: none; }