@debonet/idd 0.0.0-stage → 0.1.1

package/specs/questions-page.md

@@ -0,0 +1,169 @@
+# Questions page
+
+Statement ids: complete
+
+## Purpose
+
+Claude Code's questionnaire, the page the human answers on: it draws a
+project's questions as cards, saves each answer to its store as he taps or
+types, and sends the session one message when he presses Done. Its store is
+where his answers reach a Claude Code session; the project's answer file
+(`specs/project-files.md`) is their record.
+
+## His words
+
+> {#m-0pmw3x} From his instructions file `~/.claude/CLAUDE.md`, section
+> "Questions for me go on a web questions page", as read 2026-11-04:
+> "Answers are saved in the page's `db` (`answers/<sId>`) as I tap, and are
+> not sent one by one. When I press the page's **Done: evaluate my answers**
+> button, it sends one comment starting `DONE:` listing every answered
+> question still in the open list, then redraws the page itself so they move
+> into "Already answered"."
+
+> {#m-3hliqv} From the same section: "Every save on the page writes
+> `pending/<sId>` as well as `answers/<sId>` (phase 1; the template does
+> this), so a question I answer or change is in `pending/` until you act on
+> it, whether or not a comment reached you."
+
+> {#m-hq9v8b} From the same section: "`sBody` is inserted as HTML. Escape
+> any markup you quote in it (`&lt;form&gt;`), or the page draws it live and
+> the card breaks."
+
+> {#m-ic301q} RULING (CEO) 2026-10-14 (AIOS): "Your question 43 is
+> malformed. There's nothing for me to click on/edit"
+
+> {#m-pnt1kf} RULING (CEO) 2026-10-12 (AIOS): "When you ask new question:
+> 1) collapse the group of already-answered questions. 2) open the local
+> browser to the page"
+
+## Terms
+
+* {#d-jftp0w <m-0pmw3x@96f952f} **Answered question** — a question whose saved answer
+  holds a chosen option or a non-empty note.
+* {#d-7ydizp <m-0pmw3x@96f952f} **Open question** — a question that is not an answered
+  question.
+* {#d-u5x224 <m-3hliqv@12040c4} **Pending answer** — a question whose `pending/<id>`
+  document exists in the page's store: an answer saved on the page that the
+  session has not yet incorporated.
+
+## API
+
+* {#p-tnv4q6 >specs/project-files.md} The questions the page draws, their ids,
+  titles, bodies and options, are a project's question file as
+  `specs/project-files.md` gives it, put into the page by
+  `idd build` (`specs/idd-page.md`).
+* {#s-a73a0q <m-0pmw3x@96f952f} **The answer document.** Each save writes the document
+  `answers/<id>` in the page's store, `<id>` the question's id, holding
+  exactly `sChoice`, the chosen option's key or `""` when none is chosen,
+  `sNote`, the note field's text, and `dtm`, the time of the save as an ISO
+  8601 string.
+* {#s-8ety6a <m-3hliqv@12040c4} **The pending document.** The same save then writes
+  `pending/<id>` holding the same three members with the same values.
+  {#s-gwaqfz <m-3hliqv@12040c4} It writes `pending/<id>` only after `answers/<id>` is
+  written, so a pending answer always has its answer document.
+* {#s-dv6vxh <m-3hliqv@12040c4} **The page never clears the queue.** The page never
+  deletes or empties a `pending/` document; only the session does
+  (`specs/guidance/session.md`, The pending queue).
+* {#s-0kblei <m-0pmw3x@96f952f} **One message.** Pressing Done sends at most one comment,
+  whose first line is `DONE: incorporate these answers now:` and each further
+  line names one question as `<id> (<title>): <key> | note: <note>`, with
+  `-` in place of `<key>` when no option is chosen and with ` | note: <note>`
+  left out when the note is empty.
+* {#s-ju5n0u <m-0pmw3x@96f952f} **Nothing else is sent.** A choice, a note edit or a save
+  sends no comment and no message of any kind; the Done comment is the only
+  thing the page sends the session.
+
+## What the page draws
+
+* {#s-qk26bo <arch} **The title.** The page's document title and its heading are
+  the title of the project's page file (`specs/project-files.md`).
+* {#s-b7wxuw <m-ic301q@19b1856} **A card per question.** Each question is drawn as one
+  card showing its id, its title, its body, one choice per option showing the
+  option's key and text, the option's tag under its text when it has one,
+  and one note field.
+* {#s-6c80ki <m-hq9v8b@ca2df04,m-ic301q@19b1856} **Question content is safe text.**
+  Titles, option text and tags are never interpreted as markup. A body is plain
+  text with backtick-delimited code spans and blank-line paragraph breaks; HTML
+  such as `<form>` remains literal text. Every card's options and note field
+  are drawn regardless of its body.
+* {#s-9zo30l <arch} **Code spans.** Text between a pair of backticks in a body is
+  drawn in the code style, without the backticks.
+* {#s-kz7e3u <arch} **Paragraphs.** A blank line in a body starts a new paragraph.
+* {#s-46ya3e <m-0pmw3x@96f952f} **Open questions first.** Open questions are drawn first,
+  in the order of the question file.
+* {#s-3l5xjx <m-0pmw3x@96f952f,m-pnt1kf@f4f0fc4} **The answered group.** Answered questions are
+  drawn inside one group, below the open questions, whose heading reads
+  `Already answered (<n>)` with `<n>` their count; {#s-psnlzg <m-pnt1kf@f4f0fc4} the
+  group is collapsed each time the page draws it; {#s-ni4dwa <arch} inside it the
+  questions are in the reverse of the question file's order, the last
+  question in the file first. {#s-ztak58 <arch} With no answered question there is
+  no group.
+* {#s-k1cfvs <arch} **Saved state.** A card whose saved answer holds a choice shows
+  `Saved: <key>` under its note field.
+* {#s-0kjwif <arch} **The Done button.** The page shows one button labelled
+  `Done: incorporate my answers` above the questions.
+
+## Saving
+
+* {#s-c9g0sj <m-0pmw3x@96f952f} **A choice saves.** Choosing an option saves that question's
+  answer at once.
+* {#s-vodny0 <m-0pmw3x@96f952f} **A note saves.** Typing in a note field saves that
+  question's answer within one second after the last keystroke.
+* {#s-14wp7m <arch} **Nothing moves while he works.** A save does not move any card
+  between the open questions and the answered group; cards move only when
+  the page loads and after a Done comment is sent.
+* {#s-mhf10z <m-0pmw3x@96f952f} **Loading.** When the page loads with its store
+  available, it reads every `answers/` document, shows each saved choice and
+  note on its card, and splits the questions into open and answered by them.
+* {#s-rnlgmp <arch} **No store.** When the page's store is not available, the page
+  shows a line above the questions saying saving is not available here, each
+  attempted save shows `Not saved:` and a reason on its card, and nothing is
+  written.
+* {#s-z7et0u <arch} **A failed save.** A save whose write fails shows `Not saved:`
+  and the failure's message on its card; when the `answers/` write fails, no
+  `pending/` document is written for it.
+
+## Done
+
+* {#s-sjn8r1 <arch} **Notes are flushed first.** Pressing Done first saves every
+  question whose note field's text differs from its last saved note, and
+  composes the comment only after those saves, so the comment holds every
+  character typed before the press.
+* {#s-fz9dor <m-3hliqv@12040c4,m-0pmw3x@96f952f} **Which questions it names.** The Done comment
+  names every question that has a pending answer when Done is pressed, in
+  the order of the question file.
+* {#s-8pbkpq <arch} **Nothing to name.** With no pending answer, the page sends no
+  comment and shows `Nothing newly answered.` beside the button.
+* {#s-exa326 <m-0pmw3x@96f952f} **After sending.** Once the comment is sent, the page
+  redraws so every answered question it named is in the answered group,
+  scrolls to its top, and shows `Sent <n> answers to Claude.` beside the
+  button, `<n>` the number of questions named.
+* {#s-h65nig <arch} **One thread per load.** The first Done comment of a page load
+  starts a thread anchored at the page's header; every later Done comment of
+  the same load is sent into that thread.
+* {#s-xtwuep <arch} **When the session cannot be reached.** When the page cannot
+  send comments, or the comment service reports that it cannot send to
+  Claude now, the page sends nothing, moves no card, and shows beside the
+  button a line telling him to tell Claude "done".
+* {#s-49jzsg <arch} **A failed send.** When sending fails, the page moves no card
+  and shows `Not sent` with the failure's code beside the button.
+
+## Hand check
+
+* {#i-wup5vo <m-0pmw3x@96f952f,m-3hliqv@12040c4,m-pnt1kf@f4f0fc4} **Do:** in a scratch project, run
+  `idd init "Scratch Open Questions"`, add two questions to its question
+  file, one with a body holding `<form>`, run `idd build`, publish the
+  built page as a Claude Code artifact with comments and store enabled, and
+  open it signed in to claude.ai. Tap an option on the first question, type
+  a note on the second, and press Done straight after typing. **Look for:**
+  the second card shows `<form>` as text with its options drawn; a thread
+  on the page holds one comment opening `DONE: incorporate these answers now:`
+  with one line per question, the note complete; the session's store
+  listing shows `pending/q1` and `pending/q2`; after a reload both questions
+  sit in a collapsed `Already answered (2)` group.
+
+## Dependencies
+
+* {#p-ctfrwf >specs/project-files.md} The question file and the page file it
+  draws from.
+* {#p-ro6feq >specs/idd-page.md} The command that builds the page.

package/specs/themes.md

@@ -0,0 +1,114 @@
+# Themes
+
+Statement ids: complete
+
+## Purpose
+
+The hosted questionnaire's built-in and project-provided visual themes and
+per-project theme preference.
+
+## His words
+
+> {#m-qqilfo} RULING (CEO), 2026-11-09: “Ok, create a few themes:
+>
+> 1) light (like what's there now)
+> 2) dark
+> 3) retro (should look like a 1980's green crt and font)
+> 4) silk (something really subtle)
+>
+> Separate theme can be chosen for each project.
+>
+> Themes should be completely modular.
+>
+> A project can supply its own additional themes by having them in its idd
+> repository. The projects themes should be the default if the user hasn't
+> specifically chosen a different theme for this project.
+>
+> Themes should largely be css, but we can have a "hook" for adding content in
+> certain places in the page (header, footer, etc)”
+
+> {#m-fjqj3t} “The dashboard should either be independently themeable (preferred)
+> or should match the splash page. Either way, the splash page theme should be
+> a theming option.”
+
+> {#m-rakcji} THOUGHT (CEO), 2026-11-13: “Theme choice should be shared
+> across browsers, but not across users. Perhaps we should maintain a list of
+> <user>,<theme> in the idd-<branch> directory on github, unless there is
+> another way (e.g. is there github-user storage offered?)”
+
+## Built-in themes
+
+* {#s-ncz9te <m-qqilfo@d782597} The viewer offers the light, dark, retro, silk, and editorial
+  built-in themes on the splash page, dashboard, and every project questionnaire.
+* {#s-c51zaj <m-qqilfo@d782597} Retro uses a green CRT appearance and period-style
+  typography; silk uses subtle colors and decoration.
+
+## Project themes
+
+* {#s-h3kyvr <m-qqilfo@d782597} A project's IDD branch may add themes through
+  `idd/themes.json` and one CSS file at `idd/themes/<id>.css` for each theme.
+* {#s-w4m2ek <m-qqilfo@d782597} `idd/themes.json` is a JSON object with exactly
+  `defaultThemeId` and `themes`; `defaultThemeId` names one theme in the
+  `themes` array, and each theme object has exactly `id`, `name`, `stylesheet`,
+  and optional `hooks` members. Theme ids are unique lowercase letters,
+  digits, and hyphens, and project themes cannot reuse a built-in theme id.
+  `stylesheet` is exactly `idd/themes/<id>.css`. `hooks` may contain only
+  `header`, `beforeQuestions`, `afterQuestions`, and `footer`, each with a
+  plain-text string value.
+* {#s-oz1uov <m-qqilfo@d782597} The viewer offers the project's themes alongside the
+  built-in themes, and uses the project's default when the user has no valid
+  saved preference for that questionnaire. If the manifest or default is
+  absent or invalid, the viewer uses light.
+* {#s-svvpd7 <m-qqilfo@d782597} The project default may name a theme supplied by that
+  project; the user can choose any offered built-in or project theme for the
+  current questionnaire.
+* {#s-b7uom8 <m-qqilfo@d782597} Each theme is a separate CSS module loaded only while that
+  theme is selected; changing themes does not replace questionnaire data or
+  another project's theme.
+
+## Theme choice and content hooks
+
+* {#s-6bc09d <m-qqilfo@d782597} The questionnaire page lets the user choose a theme for
+  that project and code branch. The viewer saves the choice under the
+  authenticated GitHub user, repository and branch identity, and keeps that
+  preference when the user returns to the questionnaire in another browser.
+* {#s-jl9nzo <m-rakcji@fd6be8a} A project theme preference is keyed to the
+  authenticated GitHub user's immutable account id and the repository and
+  branch identity; two users may choose different themes for the same project.
+  The splash, dashboard and project theme choices are stored in Firestore and
+  shared across browsers for that user. The hosted service does not expose one
+  user's preferences to another user.
+* {#s-wmmbpw <m-rakcji@fd6be8a} The browser reads and writes the signed-in user's
+  theme choices through `/api/theme-preferences`, authenticating with its
+  in-memory GitHub access token. The service verifies the token's GitHub user
+  id before reading or writing that user's preference record. Theme preference
+  data contains only theme ids and project/repository branch keys;
+  it contains no access tokens or answers.
+* {#s-6io4k8 <arch} Before sign-in, the splash page uses a browser-local
+  theme choice. After sign-in, the user's saved splash theme replaces that
+  browser-local choice.
+* {#s-eydwk6 <m-fjqj3t@17d6d3e} The splash page and dashboard each have an independent built-in theme
+  selector in the content area directly below the site header; changing either
+  site theme leaves the other surface's theme and each project's questionnaire
+  theme unchanged. Each selector is a compact inline row displayed as
+  `Theme [ selected theme ]`. Theme changes, including the change between
+  splash, dashboard, and questionnaire surfaces, animate together over about
+  1.2 seconds.
+* {#s-7jgi72 <m-fjqj3t@17d6d3e} The splash page and dashboard both default to Editorial.
+  Each can use any built-in theme, and their theme ids are saved separately in
+  the browser.
+* {#s-mn6l2h <arch} A saved project theme preference contains only the theme id and
+  project identity; it never contains an authentication token or answer data.
+* {#s-9cwnxc <arch} A saved site theme preference contains only the selected page-surface
+  key and built-in theme id; it never contains an authentication token or answer
+  data.
+* {#s-sk0afi <m-qqilfo@d782597} A theme can provide plain-text content at the page header,
+  before the questions, after the questions, and the page footer. The viewer
+  renders that content as text and never interprets it as HTML or JavaScript.
+* {#s-5ref5b <arch} Theme styles and hook content cannot execute JavaScript or load
+  resources from outside the page's origin.
+
+## Dependencies
+
+* {#p-bac5t2 >specs/hosted-questionnaire.md} The hosted page, its browser/server
+  boundary, and the repository data branch.

package/templates/questions-page.html

@@ -0,0 +1,337 @@
+<!-- @implements s-a73a0q@cf94207 -->
+<!-- @implements s-8ety6a@6d34bce -->
+<!-- @implements s-gwaqfz@8785440 -->
+<!-- @implements s-dv6vxh@19ba3a0 -->
+<!-- @implements s-0kblei@baea47d -->
+<!-- @implements s-ju5n0u@9402d80 -->
+<!-- @implements s-qk26bo@e7ce6af -->
+<!-- @implements s-b7wxuw@a925940 -->
+<!-- @implements s-6c80ki@be769aa -->
+<!-- @implements s-9zo30l@4099111 -->
+<!-- @implements s-kz7e3u@0399bde -->
+<!-- @implements s-46ya3e@47b9134 -->
+<!-- @implements s-3l5xjx@8adaada -->
+<!-- @implements s-psnlzg@b3b8b04 -->
+<!-- @implements s-ni4dwa@4a9d3fa -->
+<!-- @implements s-ztak58@59cb7a9 -->
+<!-- @implements s-k1cfvs@1bbdfbf -->
+<!-- @implements s-0kjwif@46e7a60 -->
+<!-- @implements s-c9g0sj@c577f27 -->
+<!-- @implements s-vodny0@013dbe7 -->
+<!-- @implements s-14wp7m@c9d69b9 -->
+<!-- @implements s-mhf10z@629fbf3 -->
+<!-- @implements s-rnlgmp@7d6e87c -->
+<!-- @implements s-z7et0u@a677c46 -->
+<!-- @implements s-sjn8r1@6b791d6 -->
+<!-- @implements s-fz9dor@8d9d508 -->
+<!-- @implements s-8pbkpq@8105718 -->
+<!-- @implements s-exa326@eb8afdd -->
+<!-- @implements s-h65nig@3fa5cbd -->
+<!-- @implements s-xtwuep@adea03c -->
+<!-- @implements s-49jzsg@75d6179 -->
+<!-- @tested-by test/questions-page-draw.test.js -->
+<!-- @tested-by test/questions-page-save.test.js -->
+<!-- @tested-by test/questions-page-done.test.js -->
+  <!-- @checks i-wup5vo@090a4c2 -->
+<title></title>
+<style>
+:root {
+  --bg: #f6f7f9;
+  --card: #ffffff;
+  --fg: #1d2330;
+  --muted: #5d6677;
+  --line: #d9dee7;
+  --accent: #2b5fd9;
+  --accent-soft: #e6edfc;
+  --ok: #1f7a4d;
+  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+}
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
+  --bg: #12151b; --card: #1b2029; --fg: #e6e9ef; --muted: #9aa3b4; --line: #2c3340;
+  --accent: #7ea2ff; --accent-soft: #232d44; --ok: #5cc28f; color-scheme: dark } }
+:root[data-theme="dark"] {
+  --bg: #12151b; --card: #1b2029; --fg: #e6e9ef; --muted: #9aa3b4; --line: #2c3340;
+  --accent: #7ea2ff; --accent-soft: #232d44; --ok: #5cc28f; color-scheme: dark }
+body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.45; padding-inline: 16px; padding-block: 20px 48px; }
+main { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
+h1 { font-size: 1.35rem; margin: 0; text-wrap: balance; }
+.lede { color: var(--muted); margin: 4px 0 0; font-size: 0.95rem; }
+.q { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
+.q h2 { font-size: 1.02rem; margin: 0; text-wrap: balance; }
+.num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }
+.q p { margin: 0; font-size: 0.95rem; white-space: pre-wrap; }
+code { font-family: var(--font-mono); font-size: 0.86em; background: var(--accent-soft); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
+.opts { display: grid; gap: 8px; }
+.opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; }
+.opt input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
+.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
+.opt span { min-width: 0; }
+.tag { font-size: 0.75rem; color: var(--muted); display: block; margin-top: 2px; }
+textarea { width: 100%; box-sizing: border-box; min-height: 52px; font: inherit; font-size: 0.95rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
+textarea:focus-visible, .opt:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
+.status { font-size: 0.8rem; color: var(--muted); min-height: 1em; }
+.status.ok { color: var(--ok); }
+details.answered { display: grid; gap: 18px; }
+details.answered > summary { cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 10px 0; }
+details.answered[open] > summary { margin-bottom: 18px; }
+.stack { display: grid; gap: 18px; }
+#banner { font-size: 0.85rem; color: var(--muted); }
+.sendbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
+.sendbar button { font: inherit; font-size: 0.9rem; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--fg); cursor: pointer; }
+</style>
+
+<main>
+  <header>
+    <h1 id="heading"></h1>
+    <p class="lede">Tap an answer; it saves as you go. Add a note if neither option is right. Press Done when you want Claude to read your answers.</p>
+    <p id="banner"></p>
+    <div class="sendbar"><button id="done" type="button">Done: incorporate my answers</button><span id="sendstate"></span></div>
+  </header>
+  <div id="list"></div>
+</main>
+
+<script>
+const aPage = __PAGE__;
+const vaQuestion = aPage.questions;
+const msNoteDebounce = 700;
+const aAnswer = {};
+const aDraft = {};
+const aCard = {};
+const aTimer = {};
+const spSave = new Set();
+const asIdPending = new Set();
+const eList = document.getElementById("list");
+const eBanner = document.getElementById("banner");
+const eSendState = document.getElementById("sendstate");
+let db = null;
+let comments = null;
+let sIdThread = null;
+let bBusy = false;
+
+document.title = aPage.title;
+document.getElementById("heading").textContent = aPage.title;
+
+function feMake(sTag, sClass, sText) {
+  const e = document.createElement(sTag);
+  if (sClass) e.className = sClass;
+  if (sText !== undefined) e.textContent = sText;
+  return e;
+}
+
+function fbAnswered(a) {
+  return !!(a && (a.sChoice || a.sNote));
+}
+
+function fAppendSpan(eP, sText) {
+  sText.split(/`([^`]+)`/).forEach((s, n) => {
+    if (n % 2) eP.appendChild(feMake("code", "", s));
+    else if (s) eP.appendChild(document.createTextNode(s));
+  });
+}
+
+function fAppendBody(eQ, sBody) {
+  sBody.split(/\n\s*\n/).filter((s) => s.trim()).forEach((sPara) => {
+    const eP = document.createElement("p");
+    fAppendSpan(eP, sPara);
+    eQ.appendChild(eP);
+  });
+}
+
+function feOption(aQ, aO, sChoice, fOnChange) {
+  const eLabel = feMake("label", "opt");
+  const eIn = document.createElement("input");
+  eIn.type = "radio";
+  eIn.name = aQ.id;
+  eIn.value = aO.key;
+  eIn.checked = sChoice === aO.key;
+  eIn.addEventListener("change", fOnChange);
+  const eText = document.createElement("span");
+  eText.appendChild(feMake("b", "", aO.key + ". "));
+  eText.appendChild(document.createTextNode(aO.text));
+  if (aO.tag) eText.appendChild(feMake("span", "tag", aO.tag));
+  eLabel.appendChild(eIn);
+  eLabel.appendChild(eText);
+  return { eLabel, eIn };
+}
+
+function feCard(aQ) {
+  const aState = aDraft[aQ.id] || aAnswer[aQ.id] || {};
+  const eQ = feMake("section", "q");
+  eQ.appendChild(feMake("div", "num", aQ.id));
+  eQ.appendChild(feMake("h2", "", aQ.title));
+  fAppendBody(eQ, aQ.body);
+  const eOpts = feMake("div", "opts");
+  const vcRadio = aQ.options.map((aO) => {
+    const aOpt = feOption(aQ, aO, aState.sChoice, () => fpSave(aQ.id));
+    eOpts.appendChild(aOpt.eLabel);
+    return aOpt.eIn;
+  });
+  eQ.appendChild(eOpts);
+  const eNote = document.createElement("textarea");
+  eNote.placeholder = "Note (optional)";
+  eNote.value = aState.sNote || "";
+  eNote.addEventListener("input", () => {
+    clearTimeout(aTimer[aQ.id]);
+    aTimer[aQ.id] = setTimeout(() => fpSave(aQ.id), msNoteDebounce);
+  });
+  eQ.appendChild(eNote);
+  const eStatus = feMake("div", "status");
+  eQ.appendChild(eStatus);
+  aCard[aQ.id] = { eQ, vcRadio, eNote, eStatus };
+  return eQ;
+}
+
+function fStatus(sId, sMsg) {
+  const e = aCard[sId].eStatus;
+  const a = aAnswer[sId];
+  if (sMsg) { e.textContent = sMsg; e.className = "status"; }
+  else if (a && a.sChoice) { e.textContent = "Saved: " + a.sChoice; e.className = "status ok"; }
+  else { e.textContent = ""; e.className = "status"; }
+}
+
+function fRender() {
+  eList.textContent = "";
+  Object.keys(aCard).forEach((sId) => delete aCard[sId]);
+  const vaOpen = vaQuestion.filter((aQ) => !fbAnswered(aAnswer[aQ.id]));
+  const vaDone = vaQuestion.filter((aQ) => fbAnswered(aAnswer[aQ.id])).reverse();
+  const eOpen = feMake("div", "stack");
+  vaOpen.forEach((aQ) => eOpen.appendChild(feCard(aQ)));
+  eList.appendChild(eOpen);
+  if (vaDone.length) {
+    const eGroup = feMake("details", "answered");
+    eGroup.appendChild(feMake("summary", "", "Already answered (" + vaDone.length + ")"));
+    const eDone = feMake("div", "stack");
+    vaDone.forEach((aQ) => eDone.appendChild(feCard(aQ)));
+    eGroup.appendChild(eDone);
+    eList.appendChild(eGroup);
+  }
+  vaQuestion.forEach((aQ) => fStatus(aQ.id));
+}
+
+async function fpxError(fp) {
+  try { await fp(); return null; }
+  catch (x) { return x || new Error("try again"); }
+}
+
+function fsFailure(x) {
+  return (x && x.message) || "try again";
+}
+
+async function fpWrite(sId) {
+  const aNow = aCard[sId];
+  const eChecked = aNow.vcRadio.find((e) => e.checked);
+  const aNext = { sChoice: eChecked ? eChecked.value : "", sNote: aNow.eNote.value, dtm: new Date().toISOString() };
+  clearTimeout(aTimer[sId]);
+  await pStore;
+  if (!db) { fStatus(sId, "Not saved: saving is not available here."); return; }
+  fStatus(sId, "Saving…");
+  const xAnswer = await fpxError(() => db.doc("answers/" + sId).set(aNext));
+  if (xAnswer) { aDraft[sId] = aNext; fStatus(sId, "Not saved: " + fsFailure(xAnswer)); return; }
+  aAnswer[sId] = aNext;
+  delete aDraft[sId];
+  const xPending = await fpxError(() => db.doc("pending/" + sId).set({ ...aNext }));
+  if (xPending) { fStatus(sId, "Not saved: " + fsFailure(xPending)); return; }
+  asIdPending.add(sId);
+  fStatus(sId);
+}
+
+function fpSave(sId) {
+  const p = fpWrite(sId);
+  spSave.add(p);
+  p.then(() => spSave.delete(p));
+  return p;
+}
+
+async function fpaDocs(sCollection) {
+  const aSnap = await db.collection(sCollection).get();
+  const a = {};
+  (aSnap.docs || []).forEach((d) => {
+    a[d.id] = typeof d.data === "function" ? d.data() : d.data;
+  });
+  return a;
+}
+
+async function fpStart() {
+  try { db = (await window.claude?.use?.("db")) || null; } catch (x) { db = null; }
+  if (!db) {
+    eBanner.textContent = "Saving is not available here; open this page signed in on claude.ai.";
+  } else {
+    try { Object.assign(aAnswer, await fpaDocs("answers")); } catch (x) { }
+  }
+  fRender();
+}
+
+async function fpComments() {
+  try { comments = (await window.claude?.use?.("comments")) || null; } catch (x) { comments = null; }
+}
+
+const pStore = fpStart();
+const pComments = fpComments();
+
+async function fpFlush() {
+  Object.keys(aTimer).forEach((sId) => clearTimeout(aTimer[sId]));
+  await Promise.all([...spSave]);
+  const vaStale = vaQuestion.filter((aQ) => aCard[aQ.id].eNote.value !== ((aAnswer[aQ.id] || {}).sNote || ""));
+  await Promise.all(vaStale.map((aQ) => fpSave(aQ.id)));
+  await Promise.all([...spSave]);
+}
+
+async function fpaPending() {
+  if (!db) return {};
+  try { return await fpaDocs("pending"); }
+  catch (x) {
+    const a = {};
+    asIdPending.forEach((sId) => { a[sId] = aAnswer[sId]; });
+    return a;
+  }
+}
+
+function fsLine(aQ, a) {
+  return aQ.id + " (" + aQ.title + "): " + (a.sChoice || "-") + (a.sNote ? " | note: " + a.sNote : "");
+}
+
+async function fpSendComment(sText) {
+  const eHeader = document.querySelector("main header");
+  const aRes = sIdThread
+    ? await comments.sendToClaude({ threadId: sIdThread, text: sText })
+    : await comments.sendToClaude({ anchor: await comments.anchorFor(eHeader), text: sText });
+  sIdThread = aRes.threadId;
+}
+
+async function fpbCanSend() {
+  await pComments;
+  if (!comments) return false;
+  try { return (await comments.canSendToClaude()) === "available"; }
+  catch (x) { return false; }
+}
+
+async function fpSend() {
+  await pStore;
+  await fpFlush();
+  const aPending = await fpaPending();
+  const vaNamed = vaQuestion.filter((aQ) => aQ.id in aPending);
+  if (!vaNamed.length) { eSendState.textContent = "Nothing newly answered."; return; }
+  if (!(await fpbCanSend())) {
+    eSendState.textContent = "Claude can't be reached from this view; tell Claude \"done\".";
+    return;
+  }
+  const vsLine = vaNamed.map((aQ) => fsLine(aQ, aAnswer[aQ.id] || aPending[aQ.id]));
+  const xSend = await fpxError(() => fpSendComment("DONE: incorporate these answers now:\n" + vsLine.join("\n")));
+  if (xSend) {
+    eSendState.textContent = "Not sent (" + (xSend.code || "error") + "); tell Claude \"done\".";
+    return;
+  }
+  eSendState.textContent = "Sent " + vaNamed.length + " answers to Claude.";
+  fRender();
+  window.scrollTo(0, 0);
+}
+
+async function fpDone() {
+  if (bBusy) return;
+  bBusy = true;
+  try { await fpSend(); } finally { bBusy = false; }
+}
+
+document.getElementById("done").addEventListener("click", fpDone);
+</script>