grilling-workbench 0.2.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "grilling-workbench",
+  "version": "0.2.0",
+  "description": "Local question forms with whole-form submission and event-driven agent delivery",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PavingLayer/grilling-workbench.git"
+  },
+  "homepage": "https://github.com/PavingLayer/grilling-workbench#readme",
+  "bugs": { "url": "https://github.com/PavingLayer/grilling-workbench/issues" },
+  "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" },
+  "type": "module",
+  "bin": { "grilling-workbench": "bin/grilling-workbench.js" },
+  "files": ["bin/", "src/", "public/", "data/questions.json", "skills/", "docs/*.md"],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "node src/dev.js",
+    "start": "node src/dev.js",
+    "check": "node --check bin/grilling-workbench.js && node --check src/dev.js && node --check src/cli.js && node --check src/runtime.js && node --check src/core.js && node --check src/server.js && node --check src/storage.js && node --check src/delivery.js && node --check src/monitor.js && node --check src/submission-socket.js && node --check public/app.js",
+    "test": "node --test test/*.test.js",
+    "test:package": "node scripts/test-package.js && node scripts/test-package.js --npx"
+  },
+  "devDependencies": {
+    "fast-check": "^4.9.0"
+  }
+}

package/public/app.js

@@ -0,0 +1,345 @@
+import { transition, draftFor, questionById, hasAnswer, isStale, statusFor, progress, formSubmitted, makeReview as makeSubmission, formatSubmission } from '/core.js';
+
+const app = document.querySelector('#app');
+const dialog = document.querySelector('#app-dialog');
+const escape = value => String(value ?? '').replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]);
+let state, version, currentId, running = false, error = '', conflict = false, connectionWarning = '';
+let pending = [], shownSubmission = null, receivedIds = new Set();
+let toastTimer, modalMode = '', refreshing = false, sidebarCollapsed = false;
+const narrowViewport = matchMedia('(max-width: 640px)');
+const iconPaths = {
+  check: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+  clear: '<path d="m4 13 9-9a2 2 0 0 1 3 0l5 5a2 2 0 0 1 0 3l-8 8H9l-5-4a2 2 0 0 1 0-3Z"/><path d="m8 9 9 9M13 20h8"/>',
+  balance: '<path d="M12 3v17M7 21h10M4 7h16M6 7l-4 8h8L6 7Zm12 0-4 8h8l-4-8Z"/>',
+  list: '<path d="M9 6h12M9 12h12M9 18h12M3 6h1M3 12h1M3 18h1"/>',
+  left: '<path d="m14 5-7 7 7 7"/>',
+  right: '<path d="M4 12h16m-6-6 6 6-6 6"/>',
+};
+const icon = name => `<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${iconPaths[name]}</svg>`;
+
+function toast(message) {
+  const notice = document.querySelector('#notice');
+  notice.textContent = message;
+  notice.hidden = false;
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { notice.hidden = true; }, 5000);
+}
+
+async function request(path, options) {
+  const response = await fetch(path, { cache: 'no-store', signal: AbortSignal.timeout(10000), ...options });
+  const data = await response.json();
+  if (!response.ok) throw Object.assign(new Error(data.error || 'The local server could not complete this request.'), { status: response.status });
+  return data;
+}
+
+function saveText() {
+  if (error) return 'Not saved';
+  if (connectionWarning) return 'Refresh unavailable';
+  return pending.length ? 'Saving…' : 'Saved';
+}
+
+function badge(id) {
+  return `<span class="badge">${hasAnswer(state.drafts[id]) ? 'Answered' : 'Not answered'}</span>`;
+}
+
+function renderChrome() {
+  if (!state) return;
+  const stats = progress(state);
+  const save = document.querySelector('#save-state');
+  if (save) { save.innerHTML = `${icon(error || connectionWarning || pending.length ? 'clock' : 'check')}<span>${escape(saveText())}</span>`; save.classList.toggle('warning', Boolean(error || connectionWarning || pending.length)); save.title = error || connectionWarning || (pending.length ? 'Saving your changes' : 'Saved on this computer'); }
+  document.querySelector('#session-title').textContent = state.questionnaire.title;
+  document.querySelector('#session-title').title = state.questionnaire.description;
+  document.querySelector('#demo-label').hidden = !state.questionnaire.id.includes('demo');
+  document.querySelector('#progress-label').innerHTML = `<strong>${stats.answered} of ${stats.total}</strong> answered`;
+  const meter = document.querySelector('progress');
+  meter.max = stats.total; meter.value = stats.answered;
+  meter.setAttribute('aria-label', 'Answered questions');
+  document.querySelector('#footer-status').textContent = formSubmitted(state) ? 'Form submitted' : `${stats.total - stats.answered} not answered`;
+  document.querySelector('#compact-progress').textContent = `${stats.answered} of ${stats.total} answered · ${formSubmitted(state) ? 'Form submitted' : `${stats.total - stats.answered} not answered`}`;
+  const sidebar = document.querySelector('#sidebar-questions');
+  const list = questionItems();
+  if (sidebar.innerHTML !== list) { const scroll = sidebar.scrollTop; sidebar.innerHTML = list; sidebar.scrollTop = scroll; }
+  document.querySelector('#question-badges').innerHTML = badge(currentId);
+  document.querySelector('[data-action="clear"]').disabled = !hasAnswer(draftFor(state, currentId));
+  document.querySelector('#history-button').textContent = `Submissions (${state.submissions.length})`;
+  document.querySelector('#history-button').hidden = !state.submissions.length;
+  // Draft autosaves must not toggle the submit button while the user types.
+  document.querySelector('#submit-form').disabled = conflict || pending.some(item => item.action.type === 'submit');
+  const warning = document.querySelector('#save-warning');
+  warning.hidden = !error && !connectionWarning;
+  warning.innerHTML = warning.hidden ? '' : `<p>${escape(error || connectionWarning)} Your work in this tab is retained. Unsaved changes will be lost if you close or reload it.</p><button class="button small" data-action="${conflict ? 'load-saved' : 'retry'}">${conflict ? 'Load saved version…' : 'Retry saving'}</button><button class="button small" data-action="recover">Download recovery copy</button>`;
+}
+
+function oldAnswer(draft) {
+  return `${draft.question.title}\n${draft.question.context}\n\n${draft.optionIds.map(id => { const o = draft.question.options.find(item => item.id === id); return `${o.label}\n${o.description}\nBenefit: ${o.benefit}\nTrade-off: ${o.tradeoff}`; }).join('\n\n')}${draft.text ? `\n\n${draft.text}` : ''}`;
+}
+
+function render() {
+  if (!state) return;
+  const focused = document.activeElement;
+  const textFocus = focused?.id === 'answer-text' ? { start: focused.selectionStart, end: focused.selectionEnd } : null;
+  const mainScroll = document.querySelector('.main')?.scrollTop || 0;
+  const sidebarScroll = document.querySelector('#sidebar-questions')?.scrollTop || 0;
+  currentId = questionById(state, currentId) ? currentId : state.questionnaire.questions[0].id;
+  const q = questionById(state, currentId), draft = draftFor(state, currentId);
+  const index = state.questionnaire.questions.findIndex(item => item.id === currentId);
+  const stale = isStale(state, currentId) && hasAnswer(draft);
+  const canAdopt = draft.optionIds.every(id => q.options.some(o => o.id === id)) && (q.type !== 'single' || draft.optionIds.length <= 1) && (q.type !== 'text' || !draft.optionIds.length);
+  document.title = `${state.questionnaire.title} · Workbench`;
+  app.innerHTML = `<div class="workspace">
+    <aside class="sidebar" id="question-sidebar" aria-label="Question sidebar"><div class="sidebar-heading">Questions <span>${state.questionnaire.questions.length}</span></div><nav id="sidebar-questions" class="sidebar-questions" aria-label="Questions"></nav><div class="sidebar-summary"><progress class="progress-track" aria-label="Submitted questions" max="1" value="0"></progress><p><span id="progress-label"></span><span aria-hidden="true"> · </span><span id="footer-status"></span></p><button id="history-button" class="button sidebar-button" data-action="history" hidden></button></div></aside>
+    <main class="main"><div class="form-content"><p class="compact-progress" id="compact-progress"></p>
+    <div id="save-warning" class="alert" role="alert" hidden></div>
+    <article class="question-sheet" id="question" aria-labelledby="question-title"><div class="question-meta"><span class="question-position">Question ${index + 1} of ${state.questionnaire.questions.length}</span><button class="button small question-selector" id="question-selector" data-action="questions" aria-haspopup="dialog" aria-controls="app-dialog">Question ${index + 1} of ${state.questionnaire.questions.length} <span aria-hidden="true">▾</span></button><span id="question-badges"></span></div><h1 id="question-title" tabindex="-1">${escape(q.title)}</h1><p class="question-context">${escape(q.context)}</p>
+    ${stale ? `<div class="alert"><p><strong>This question was updated.</strong> Your earlier answer is kept below. ${canAdopt ? 'Review the new wording, then keep or edit your answer.' : 'An earlier choice is no longer available. Choose a new answer to continue.'}</p><details><summary>Earlier question and answer</summary><div class="old-answer">${escape(oldAnswer(draft))}</div></details>${canAdopt ? '<button class="button small" data-action="adopt">Keep my answer with this wording</button>' : ''}</div>` : ''}
+    ${q.type !== 'text' ? `<p class="answer-hint">${q.type === 'single' ? 'Choose one, or write your own answer below.' : 'Choose any that apply, or write your own answer below.'}</p><fieldset class="options" aria-labelledby="question-title">${q.options.map(o => `<label class="option ${draft.optionIds.includes(o.id) ? 'selected' : ''}" id="option-${escape(q.id)}-${escape(o.id)}"><span class="option-top"><input type="${q.type === 'single' ? 'radio' : 'checkbox'}" name="answer-option" value="${escape(o.id)}" ${draft.optionIds.includes(o.id) ? 'checked' : ''} aria-labelledby="label-${escape(q.id)}-${escape(o.id)}"><span class="option-title" id="label-${escape(q.id)}-${escape(o.id)}">${escape(o.label)}</span>${o.recommended ? '<span class="badge recommended">Recommended</span>' : ''}</span><div class="option-body"><p class="option-description">${escape(o.description)}</p><div class="tradeoffs"><p><strong class="offers">${icon('check')} Offers</strong><span>${escape(o.benefit)}</span></p><p><strong class="tradeoff">${icon('balance')} Trade-off</strong><span>${escape(o.tradeoff)}</span></p></div></div></label>`).join('')}</fieldset>` : ''}
+    <label for="answer-text" class="field-label">${q.type === 'text' ? 'Your answer' : 'Your answer <span class="optional">In your own words</span>'}</label><textarea id="answer-text" maxlength="20000" rows="${q.type === 'text' ? 7 : 3}">${escape(draft.text)}</textarea>
+    <div class="question-actions"><button class="button" data-action="defer">${icon('clock')}Answer later</button><button class="button" data-action="clear" ${hasAnswer(draft) ? '' : 'disabled'}>${icon('clear')}Clear answer</button></div></article></div></main>
+    </div><footer class="footer-bar"><nav class="footer-buttons ${index === state.questionnaire.questions.length - 1 ? 'last-question' : ''}" aria-label="Question navigation"><button class="button previous-question" ${index > 0 ? `data-go="${escape(state.questionnaire.questions[index - 1].id)}"` : 'disabled'} aria-label="Previous question">${icon('left')}<span>Previous</span></button><button class="button ${index === state.questionnaire.questions.length - 1 ? 'primary' : ''}" id="submit-form" data-action="submit">${icon('check')}Submit form</button>${index < state.questionnaire.questions.length - 1 ? `<button class="button primary" data-go="${escape(state.questionnaire.questions[index + 1].id)}">Next question ${icon('right')}</button>` : ''}</nav></footer>`;
+  renderChrome();
+  document.querySelector('.main').scrollTop = mainScroll;
+  document.querySelector('#sidebar-questions').scrollTop = sidebarScroll;
+  if (textFocus) { const field = document.querySelector('#answer-text'); field.focus({ preventScroll: true }); field.setSelectionRange(textFocus.start, textFocus.end); }
+}
+
+function stage(action, redraw = true) {
+  try { state = transition(state, action); }
+  catch (failure) { toast(failure.message); return; }
+  pending.push({ requestId: crypto.randomUUID(), action });
+  if (redraw) render(); else renderChrome();
+  void flush();
+}
+
+async function flush() {
+  if (running || conflict) return;
+  running = true;
+  try {
+    while (pending.length) {
+      const item = pending[0];
+      item.version ??= version;
+      const result = await request('/api/actions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(item) });
+      version = result.version;
+      pending.shift();
+      if (!pending.length) state = result.state;
+      error = ''; connectionWarning = '';
+      renderChrome();
+    }
+  } catch (failure) {
+    error = failure.message;
+    conflict = failure.status === 409;
+  } finally {
+    running = false;
+    renderChrome();
+    if (modalMode === 'saving') {
+      if (pending.length || error) renderSaveFailure();
+      else showSubmission(shownSubmission);
+    }
+  }
+}
+
+function navigate(id) {
+  currentId = id;
+  history.replaceState(null, '', `#${encodeURIComponent(id)}`);
+  render();
+  document.querySelector('.main').scrollTop = 0;
+  document.querySelector('#sidebar-questions [aria-current="step"]')?.scrollIntoView({ block: 'nearest' });
+  document.querySelector('#question-title').focus({ preventScroll: true });
+}
+
+function readAnswer() {
+  return { optionIds: [...document.querySelectorAll('input[name="answer-option"]:checked')].map(input => input.value), text: document.querySelector('#answer-text').value };
+}
+
+app.addEventListener('input', event => {
+  if (event.target.id === 'answer-text') stage({ type: 'edit', questionId: currentId, answer: readAnswer() }, false);
+});
+app.addEventListener('change', event => {
+  if (event.target.name === 'answer-option') {
+    const optionId = event.target.value;
+    stage({ type: 'edit', questionId: currentId, answer: readAnswer() });
+    [...document.querySelectorAll('[name="answer-option"]')].find(input => input.value === optionId)?.focus({ preventScroll: true });
+  }
+});
+app.addEventListener('click', event => {
+  const go = event.target.closest('[data-go]');
+  if (go) return navigate(go.dataset.go);
+  const action = event.target.closest('[data-action]')?.dataset.action;
+  if (action === 'defer') {
+    const index = state.questionnaire.questions.findIndex(q => q.id === currentId);
+    if (index < state.questionnaire.questions.length - 1) navigate(state.questionnaire.questions[index + 1].id);
+    else showQuestions();
+  }
+  if (action === 'clear') stage({ type: 'edit', questionId: currentId, answer: { optionIds: [], text: '' } });
+  if (action === 'adopt') stage({ type: 'adopt', questionId: currentId });
+  if (action === 'submit') submitForm();
+  if (action === 'questions') showQuestions();
+  if (action === 'history') showHistory();
+  if (action === 'recover') downloadRecovery();
+  if (action === 'retry') retry();
+  if (action === 'load-saved') loadSaved();
+});
+
+function openDialog(html, mode) {
+  modalMode = mode;
+  dialog.innerHTML = html;
+  if (!dialog.open) dialog.showModal();
+  const heading = dialog.querySelector('#dialog-title');
+  heading.tabIndex = -1;
+  heading.focus({ preventScroll: true });
+}
+const dialogHead = (title, description = '') => `<div class="dialog-head"><div><h2 id="dialog-title">${title}</h2>${description ? `<p>${description}</p>` : ''}</div><button class="close" data-modal="close" aria-label="Close dialog">×</button></div>`;
+
+function showQuestions() {
+  const stats = progress(state);
+  openDialog(`${dialogHead('Questions', `${stats.answered} of ${stats.total} answered · ${stats.total - stats.answered} not answered`)}<nav class="question-list" aria-label="All questions">${questionItems()}</nav>${state.submissions.length ? `<div class="dialog-foot"><button class="button" data-modal="history">Submissions (${state.submissions.length})</button></div>` : ''}`, 'questions');
+  dialog.querySelector('[aria-current="step"]')?.scrollIntoView({ block: 'nearest' });
+}
+
+function questionItems() {
+  return state.questionnaire.questions.map((q, index) => {
+    const status = statusFor(state, q.id);
+    const answered = hasAnswer(state.drafts[q.id]);
+    const updated = isStale(state, q.id) && hasAnswer(state.drafts[q.id]);
+    return `<button class="nav-item ${q.id === currentId ? 'active' : ''} ${status} " data-go="${escape(q.id)}" title="${escape(q.title)}" ${q.id === currentId ? 'aria-current="step"' : ''}><span class="nav-dot" aria-hidden="true">${status === 'submitted' ? '✓' : ''}</span><span class="nav-number">${String(index + 1).padStart(2, '0')}</span><span class="nav-text"><span class="nav-title">${escape(state.questionnaire.navigationLabels?.[q.id] || q.title)}</span><span class="nav-status">${answered ? 'Answered' : 'Not answered'}${updated ? ' · Updated' : ''}</span></span></button>`;
+  }).join('');
+}
+
+function updateSidebarToggle() {
+  document.body.classList.toggle('sidebar-collapsed', sidebarCollapsed);
+  const toggle = document.querySelector('#toggle-sidebar');
+  toggle.setAttribute('aria-expanded', String(!sidebarCollapsed && !narrowViewport.matches));
+  toggle.setAttribute('aria-label', narrowViewport.matches ? 'Show questions' : sidebarCollapsed ? 'Show question sidebar' : 'Hide question sidebar');
+}
+document.querySelector('#toggle-sidebar').addEventListener('click', () => {
+  if (!state) return;
+  if (narrowViewport.matches) return showQuestions();
+  sidebarCollapsed = !sidebarCollapsed;
+  updateSidebarToggle();
+});
+narrowViewport.addEventListener('change', updateSidebarToggle);
+updateSidebarToggle();
+
+function submitForm() {
+  if (conflict || pending.some(item => item.action.type === 'submit')) return;
+  let snapshot;
+  try {
+    // Capture exactly what is in the form at the explicit click, including edits
+    // still saving. The existing queue persists those edits before this snapshot.
+    snapshot = makeSubmission(state, crypto.randomUUID(), new Date().toISOString());
+  } catch (failure) {
+    const changed = state.questionnaire.questions.find(q => hasAnswer(state.drafts[q.id]) && isStale(state, q.id));
+    if (changed) navigate(changed.id);
+    toast(failure.message);
+    return;
+  }
+  shownSubmission = snapshot;
+  openDialog(`${dialogHead('Submitting form')}<div class="dialog-body"><p role="status">Saving your whole form…</p></div>`, 'saving');
+  stage({ type: 'submit', review: snapshot });
+}
+
+function renderSaveFailure() {
+  openDialog(`${dialogHead('Your form is not saved yet')}<div class="dialog-body"><p>Your confirmed form is retained in this tab. ${escape(error)}</p><p>Keep this page open or download a recovery copy before leaving.</p><button class="button" data-modal="recover">Download recovery copy</button></div><div class="dialog-foot"><button class="button" data-modal="close">Back to form</button>${!conflict ? '<button class="button primary" data-modal="retry">Retry saving</button>' : ''}</div>`, 'save-failed');
+}
+
+function renderReceipt() {
+  const status = document.querySelector('#delivery-status');
+  if (status && shownSubmission) status.textContent = receivedIds.has(shownSubmission.id) ? 'Received by the agent in chat.' : 'Saved. Waiting for the agent to receive this form.';
+}
+
+async function refreshReceipt() {
+  if (!state?.submissions.length) return;
+  try {
+    const receipts = await request('/api/delivery');
+    receivedIds = new Set(receipts.received.map(r => r.submissionId));
+    renderReceipt();
+  } catch {
+    const status = document.querySelector('#delivery-status');
+    if (status) status.textContent = 'Your form is saved. Agent receipt could not be checked yet.';
+  }
+}
+
+function showSubmission(submission) {
+  shownSubmission = submission;
+  openDialog(`${dialogHead('Form submitted', 'Your entire form is saved. You can continue in chat without copying or pasting anything.')}<div class="dialog-body"><div class="success-symbol" aria-hidden="true">✓</div><p id="delivery-status" role="status"></p><details class="submission-details"><summary>View submitted form</summary><pre class="export-text">${escape(formatSubmission(submission))}</pre></details></div><div class="dialog-foot"><button class="button primary" data-modal="close">Back to form</button></div>`, 'submission');
+  render(); renderReceipt(); void refreshReceipt();
+}
+
+function showHistory() {
+  const saved = state.submissions.filter(s => !pending.some(item => item.action.type === 'submit' && item.action.review.id === s.id));
+  openDialog(`${dialogHead('Submitted answers', 'Earlier submissions keep their original questions and answers.')}<div class="dialog-body">${saved.map(s => `<button class="history-item" data-submission="${escape(s.id)}"><strong>Form · ${escape(new Date(s.createdAt).toLocaleString())}</strong><span>${s.answers.map(a => escape(a.question.title)).join('<br>')}</span></button>`).join('') || '<p>No saved submissions yet.</p>'}</div>`, 'history');
+}
+
+dialog.addEventListener('click', async event => {
+  const go = event.target.closest('[data-go]');
+  if (go) { dialog.close(); navigate(go.dataset.go); return; }
+  const prior = event.target.closest('[data-submission]');
+  if (prior) return showSubmission(state.submissions.find(s => s.id === prior.dataset.submission));
+  const action = event.target.closest('[data-modal]')?.dataset.modal;
+  if (action === 'close') dialog.close();
+  if (action === 'history') showHistory();
+  if (action === 'recover') downloadRecovery();
+  if (action === 'retry') { modalMode = 'saving'; retry(); }
+
+});
+dialog.addEventListener('close', () => {
+  const wasQuestionPicker = modalMode === 'questions';
+  modalMode = '';
+  const candidates = wasQuestionPicker ? ['#question-selector', '#toggle-sidebar'] : ['#submit-form:not(:disabled)', '#history-button:not([hidden])', '#toggle-sidebar'];
+  const returnTarget = candidates.map(selector => document.querySelector(selector)).find(element => element?.getClientRects().length);
+  returnTarget?.focus({ preventScroll: true });
+});
+
+function downloadRecovery() {
+  const blob = new Blob([JSON.stringify({ version, state, pending }, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a'); link.href = url; link.download = 'workbench-recovery.json'; link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+async function retry() {
+  error = ''; connectionWarning = '';
+  if (pending.length) await flush(); else await refresh();
+  renderChrome();
+}
+
+async function loadSaved() {
+  if (!confirm('Replace this tab’s unsaved changes with the saved version? Download a recovery copy first if you want to keep them.')) return;
+  try {
+    const result = await request('/api/session');
+    state = result.state; version = result.version; pending = []; error = ''; conflict = false; connectionWarning = '';
+    dialog.close(); render();
+  } catch (failure) { error = failure.message; renderChrome(); }
+}
+
+async function refresh() {
+  void refreshReceipt();
+  if (running || pending.length || conflict || refreshing) return;
+  refreshing = true;
+  try {
+    const result = await request('/api/session');
+    // A poll begun before typing must never replace a newly staged answer.
+    if (running || pending.length || conflict || result.version < version) return;
+    connectionWarning = '';
+    if (result.version !== version) {
+      state = result.state; version = result.version;
+      render();
+      if (modalMode === 'questions') showQuestions();
+    } else renderChrome();
+  } catch (failure) { connectionWarning = failure.message; renderChrome(); }
+  finally { refreshing = false; }
+}
+
+async function start() {
+  try {
+    const result = await request('/api/session'); state = result.state; version = result.version;
+    currentId = decodeURIComponent(location.hash.slice(1)) || state.questionnaire.questions[0].id;
+    render();
+    setInterval(refresh, 2500);
+  } catch (failure) {
+    app.innerHTML = `<div class="loading alert"><h1>Could not open the form</h1><p>${escape(failure.message)}</p><button class="button" id="retry-start">Try again</button></div>`;
+    document.querySelector('#retry-start').addEventListener('click', start);
+  }
+}
+window.addEventListener('beforeunload', event => { if (pending.length) { event.preventDefault(); event.returnValue = ''; } });
+void start();

package/public/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="A local question-answering workbench. Keep drafts, revisit questions, and submit the whole form in one action.">
+  <title>Reading room · Workbench</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2300656b'/%3E%3Cpath d='M8 9v14h6V9m4 0v14h6V9' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E">
+  <link rel="stylesheet" href="/styles.css">
+  <script type="module" src="/app.js"></script>
+</head>
+<body>
+  <a class="skip-link" href="#question">Skip to question</a>
+  <header class="topbar"><div class="brand-area"><button id="toggle-sidebar" class="menu-button" aria-label="Hide question sidebar" aria-expanded="true" aria-controls="question-sidebar"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button><span class="brand">Workbench</span></div><div class="session-bar"><div class="session-name"><span class="session-prefix">Session:</span> <strong id="session-title">Opening questions…</strong><span id="demo-label" class="demo-label" hidden>Demo</span></div><span id="save-state" class="save-indicator" role="status" aria-live="polite"></span></div></header>
+  <div id="app"><p class="loading" role="status">Opening your questions…</p></div>
+  <dialog id="app-dialog" aria-labelledby="dialog-title"></dialog>
+  <div id="notice" class="toast" role="status" aria-live="polite" hidden></div>
+</body>
+</html>

package/public/styles.css

@@ -0,0 +1,212 @@
+:root {
+  color-scheme: light;
+  --ink: #20282d;
+  --muted: #626c72;
+  --line: #d9dfe2;
+  --paper: #fff;
+  --canvas: #fff;
+  --blue: #00676d;
+  --blue-soft: #eef8f8;
+  --green: #177548;
+  --amber: #a56909;
+  --sidebar-width: 196px;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  color: var(--ink);
+  background: var(--canvas);
+  font-synthesis: none;
+}
+* { box-sizing: border-box; }
+html { height: 100%; }
+body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
+button, input, textarea { font: inherit; }
+button, a, input, textarea { touch-action: manipulation; }
+button { cursor: pointer; border: 0; background: none; color: inherit; }
+button:disabled { cursor: not-allowed; opacity: .42; }
+a { color: inherit; text-decoration: none; }
+button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
+  outline: 3px solid #57b3bf; outline-offset: 3px;
+}
+p { line-height: 1.55; margin: 0 0 1rem; }
+h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 650; letter-spacing: -.015em; }
+h1 { font-size: 1.375rem; }
+h2 { font-size: 1.25rem; }
+h3 { font-size: 1rem; }
+.icon, .menu-button svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
+.topbar { height: 64px; flex: 0 0 64px; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); border-bottom: 1px solid var(--line); background: white; }
+.brand-area { background: #191e22; color: #f7f8f8; display: flex; align-items: center; gap: 9px; padding: 0 14px; }
+.brand { font-weight: 600; font-size: 1.125rem; letter-spacing: -.025em; }
+.menu-button { display: grid; place-items: center; border-radius: 4px; width: 30px; height: 34px; padding: 5px; }
+.menu-button:hover { background: #343d42; }
+.session-bar { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-width: 0; padding: 0 28px; }
+.session-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .875rem; }
+.session-prefix { color: var(--muted); }
+#session-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
+.demo-label { color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font-size: .75rem; padding: 1px 5px; margin-left: 2px; }
+.save-indicator { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: .875rem; color: var(--green); }
+.save-indicator.warning { color: var(--amber); }
+#app { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
+.workspace { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 0; }
+.sidebar { min-height: 0; display: flex; flex-direction: column; background: #272e33; color: #f3f5f5; border-right: 1px solid #323a40; }
+.sidebar-heading { flex-shrink: 0; padding: 21px 16px 19px; border-bottom: 1px solid #42494d; font-size: .875rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
+.sidebar-heading > span { color: #b8c1c6; font-weight: 400; font-size: .75rem; }
+.sidebar-questions { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #89969b #272e33; }
+.nav-item { display: grid; grid-template-columns: 12px 20px minmax(0, 1fr); gap: 8px; text-align: left; padding: 15px 14px; align-items: start; width: 100%; color: #f1f4f4; }
+.nav-item:hover { background: #343e44; }
+.nav-item.active { background: #00666c; color: white; }
+.nav-text { min-width: 0; }
+.nav-title { font-size: .875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 500; }
+.nav-number { font-size: .8125rem; line-height: 1.55; font-variant-numeric: tabular-nums; color: #d5dce0; }
+.nav-dot { width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: #b5bdc1; color: #203027; display: grid; place-items: center; font-size: .625rem; line-height: 1; }
+.nav-item.active .nav-dot { background: transparent; border: 1.5px solid white; }
+.nav-item.draft .nav-dot { background: #69c9cd; }
+.nav-item.deferred .nav-dot { background: #e1b759; }
+.nav-item.submitted .nav-dot { background: #a3d547; }
+.nav-status { font-size: .75rem; color: #b6c1c6; display: block; margin-top: 4px; line-height: 1.35; }
+.nav-item.active .nav-status, .nav-item.active .nav-number { color: #e0f0f1; }
+.sidebar-summary { flex-shrink: 0; padding: 16px; border-top: 1px solid #42494d; }
+.sidebar-summary p { margin: 12px 0 0; font-size: .75rem; line-height: 1.6; }
+#progress-label strong { color: #a3d547; font-weight: 650; }
+.progress-track { display: block; width: 100%; height: 3px; appearance: none; border: 0; background: #505b60; border-radius: 2px; overflow: hidden; }
+.progress-track::-webkit-progress-bar { background: #505b60; }
+.progress-track::-webkit-progress-value { background: #a3d547; }
+.progress-track::-moz-progress-bar { background: #a3d547; }
+.button.sidebar-button { width: 100%; min-height: 36px; padding: 8px; margin-top: 14px; background: transparent; color: #e3eaed; border-color: #69757b; font-size: .8125rem; }
+.button.sidebar-button:hover { background: #3c464c; }
+.main { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 30px 32px; scrollbar-gutter: stable; }
+.form-content { max-width: 940px; margin: 0 auto; }
+.question-sheet { background: white; }
+.question-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
+.question-position { color: var(--blue); font-size: .875rem; font-weight: 550; }
+.button.question-selector, .compact-progress { display: none; }
+.question-context { margin: 15px 0 18px; color: #515b62; font-size: 1rem; }
+.answer-hint { margin: 0 0 13px; font-size: .875rem; color: var(--muted); }
+.badge { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #f0f3f4; color: #5e6b72; font-size: .75rem; line-height: 1.5; font-weight: 500; }
+.badge.recommended { color: #00676d; border: 1px solid #a0d0d3; background: #f0fafa; border-radius: 12px; padding: 2px 8px; white-space: nowrap; }
+.badge.submitted { color: var(--green); background: #edf7f0; }
+.badge.deferred { color: var(--amber); background: #fff5e0; margin-left: 5px; }
+.options { border: 1px solid var(--line); padding: 0; margin: 0; min-width: 0; }
+.option { display: block; padding: 20px 18px 16px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background .12s; }
+.option:last-child { border-bottom: 0; }
+.option:hover { background: #f8fbfb; }
+.option.selected { background: #f0f9f9; box-shadow: inset 3px 0 var(--blue); }
+.option-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+.option input { accent-color: var(--blue); height: 22px; width: 22px; flex: 0 0 22px; margin: 1px 0 0; }
+.option-title { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; flex: 1; min-width: 120px; }
+.option-body { margin: 10px 0 0 34px; }
+.option-description { font-size: 1rem; line-height: 1.55; margin: 0 0 12px; color: #424d54; }
+.tradeoffs p { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 0; margin: 0; border-bottom: 1px solid #e5e9eb; font-size: .9375rem; line-height: 1.5; }
+.tradeoffs p:last-child { border: 0; padding-bottom: 0; }
+.tradeoffs strong { display: flex; align-items: center; gap: 8px; font-weight: 550; font-size: .875rem; padding-top: 1px; }
+.tradeoffs .offers { color: var(--blue); }
+.tradeoffs .tradeoff { color: #ad7000; }
+.tradeoffs .icon { width: 18px; height: 18px; flex-basis: 18px; }
+.field-label { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; font-weight: 500; margin: 23px 0 10px; }
+.optional { font-weight: 400; color: var(--muted); }
+textarea { resize: vertical; display: block; width: 100%; border: 1px solid #aeb9bf; border-radius: 4px; padding: 12px; color: var(--ink); background: white; line-height: 1.55; min-height: 84px; }
+textarea::placeholder { color: #7c878c; }
+.question-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
+.button { border: 1px solid #92a2ab; background: white; border-radius: 4px; padding: 10px 16px; font-size: .875rem; font-weight: 500; display: inline-flex; gap: 10px; justify-content: center; align-items: center; min-height: 44px; color: #33454f; }
+.button:hover { background: #f0f6f6; }
+.button.primary { background: var(--blue); color: white; border-color: var(--blue); font-weight: 600; }
+.button.primary:hover { background: #00535a; }
+.button.small { padding: 6px 10px; min-height: 34px; }
+.question-actions .button { min-width: 145px; }
+.footer-bar { background: white; border-top: 1px solid #cbd3d7; padding: 19px 22px max(19px, env(safe-area-inset-bottom)); z-index: 5; }
+.footer-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
+.footer-buttons.last-question { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.footer-buttons .button { min-height: 46px; }
+.alert { padding: 16px; border: 1px solid #e1cc98; background: #fffaf0; border-radius: 5px; font-size: .875rem; line-height: 1.6; margin: 0 0 18px; color: #795a20; }
+.alert p { margin: 0 0 10px; }
+.alert .button { margin: 4px 6px 0 0; }
+.alert details { margin: 12px 0; }
+.old-answer { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 10px; }
+.loading { margin: 50px auto; padding: 24px; max-width: 700px; }
+.skip-link { position: absolute; left: 12px; top: -100px; padding: 12px; background: white; z-index: 20; }
+.skip-link:focus { top: 10px; }
+dialog { color: var(--ink); border: 1px solid var(--line); border-radius: 8px; max-width: 740px; width: calc(100% - 32px); padding: 0; max-height: 88dvh; box-shadow: 0 20px 70px #10191c40; }
+dialog::backdrop { background: #111c2470; }
+.dialog-head { padding: 22px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
+.dialog-head h2 { font-size: 1.25rem; }
+.dialog-head p { font-size: .875rem; color: var(--muted); margin: 7px 0 0; }
+.close { font-size: 1.5rem; padding: 0 6px; color: var(--muted); }
+.dialog-body { padding: 22px 26px; }
+.dialog-foot { position: sticky; bottom: 0; padding: 16px 26px; background: white; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
+.question-list { display: grid; gap: 2px; padding: 8px; max-height: min(60dvh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.question-list .nav-item { color: var(--ink); border-radius: 4px; }
+.question-list .nav-item:hover { background: #f0f5f5; }
+.question-list .nav-item.active { background: #e5f4f4; color: var(--blue); }
+.question-list .nav-title { display: block; overflow: visible; }
+.question-list .nav-status, .question-list .nav-number { color: var(--muted); }
+.question-list .nav-item.active .nav-dot { border-color: var(--blue); }
+.submission-details summary { cursor: pointer; font-size: .875rem; color: var(--muted); }
+.export-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .875rem; line-height: 1.6; background: #f6f8f8; border: 1px solid var(--line); padding: 16px; border-radius: 5px; max-height: 340px; overflow: auto; margin-top: 16px; }
+.pending-list { font-size: .875rem; color: var(--muted); line-height: 1.6; margin-top: 16px; }
+.success-symbol { height: 42px; width: 42px; display: grid; place-items: center; background: #eaf5ef; color: var(--green); border-radius: 50%; font-size: 1.5rem; margin-bottom: 14px; }
+.toast { position: fixed; bottom: 104px; left: 50%; transform: translateX(-50%); padding: 12px 18px; background: #26363d; color: white; border-radius: 5px; box-shadow: 0 5px 30px #0002; max-width: 90vw; font-size: .875rem; z-index: 30; }
+.muted { color: var(--muted); }
+.history-item { display: block; width: 100%; text-align: left; border-bottom: 1px solid var(--line); padding: 16px 0; }
+.history-item strong { display: block; margin-bottom: 5px; }
+.history-item span { font-size: .875rem; color: var(--muted); }
+.sidebar-collapsed .workspace { grid-template-columns: minmax(0, 1fr); }
+.sidebar-collapsed .sidebar, .sidebar-collapsed .question-position { display: none; }
+.sidebar-collapsed .question-selector { display: inline-flex; }
+.sidebar-collapsed .compact-progress { display: block; color: var(--muted); font-size: .8125rem; margin-bottom: 14px; }
+@media (min-width: 1200px) {
+  :root { --sidebar-width: 228px; }
+  .main { padding: 32px 42px; }
+  .nav-item { padding: 16px 18px; }
+}
+@media (max-width: 850px) {
+  .session-bar { padding: 0 20px; gap: 12px; }
+  .session-prefix { display: none; }
+  .main { padding: 26px 22px 28px; }
+  .option { padding: 18px 16px 16px; }
+  .option-top { gap: 10px; }
+  .option-body { margin-left: 32px; }
+  .tradeoffs p { grid-template-columns: 92px minmax(0, 1fr); }
+}
+@media (max-width: 640px) {
+  :root { --sidebar-width: 168px; }
+  .topbar { height: 58px; flex-basis: 58px; }
+  .brand-area { gap: 5px; padding: 0 10px; }
+  .brand { font-size: 1rem; }
+  .session-bar { gap: 8px; padding: 0 12px; }
+  .session-name { font-size: .8125rem; }
+  .demo-label { display: none; }
+  .save-indicator { font-size: .75rem; gap: 4px; }
+  .save-indicator .icon { width: 16px; height: 16px; flex-basis: 16px; }
+  .workspace { grid-template-columns: minmax(0, 1fr); }
+  .sidebar, .question-position { display: none; }
+  .button.question-selector { display: inline-flex; }
+  .compact-progress { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: 14px; }
+  .main { padding: 22px 16px 26px; }
+  .option-top .badge.recommended { margin-left: 32px; }
+  .option-top .option-title { flex-basis: calc(100% - 34px); }
+  .tradeoffs p { grid-template-columns: 1fr; gap: 5px; }
+  .tradeoffs strong { gap: 7px; }
+  .question-actions .button { min-width: 0; }
+  .footer-bar { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
+  .footer-buttons { gap: 10px; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
+  .footer-buttons.last-question { grid-template-columns: 44px minmax(0, 1fr); }
+  .footer-buttons .button { padding: 10px 8px; gap: 7px; font-size: .875rem; }
+  .previous-question span { display: none; }
+  .dialog-head, .dialog-body { padding: 20px; }
+  .dialog-foot { padding: 16px 20px; }
+  .toast { bottom: 90px; }
+}
+@media (max-width: 420px) {
+  .topbar { grid-template-columns: 146px minmax(0, 1fr); }
+  .brand-area { padding: 0 8px; gap: 2px; }
+  .brand { font-size: .9375rem; }
+  .session-bar { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
+  .session-name { width: 100%; }
+  .option { padding: 16px 12px; }
+  .option-body { margin-left: 0; }
+  .question-actions { gap: 8px; }
+  .question-actions .button { padding: 10px; font-size: .8125rem; }
+  .footer-buttons .button .icon { width: 18px; height: 18px; flex-basis: 18px; }
+  #submit-form .icon { display: none; }
+}
+[hidden] { display: none !important; }
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }