ai-design-context 0.4.0

package/evidence/todo/2026-09-28-codex-paired-todo/layout-metrics.json

@@ -0,0 +1,133 @@
+{
+  "browserVersion": "153.0.8010.53",
+  "locale": "en-GB",
+  "deviceScaleFactor": 1,
+  "rows": [
+    {
+      "variant": "baseline",
+      "initial": {
+        "input": {
+          "x": 61.875,
+          "y": 286.671875,
+          "width": 239.3125,
+          "height": 34
+        },
+        "button": {
+          "x": 311.1875,
+          "y": 281.671875,
+          "width": 47.8125,
+          "height": 44
+        },
+        "firstRow": {
+          "x": 23,
+          "y": 426.671875,
+          "width": 344,
+          "height": 63
+        }
+      },
+      "saving": {
+        "input": {
+          "x": 61.875,
+          "y": 286.671875,
+          "width": 209.6875,
+          "height": 34
+        },
+        "button": {
+          "x": 281.5625,
+          "y": 281.671875,
+          "width": 77.4375,
+          "height": 44
+        },
+        "firstRow": {
+          "x": 23,
+          "y": 426.671875,
+          "width": 344,
+          "height": 63
+        }
+      },
+      "failure": {
+        "input": {
+          "x": 61.875,
+          "y": 286.671875,
+          "width": 239.3125,
+          "height": 34
+        },
+        "button": {
+          "x": 311.1875,
+          "y": 281.671875,
+          "width": 47.8125,
+          "height": 44
+        },
+        "firstRow": {
+          "x": 23,
+          "y": 448.671875,
+          "width": 344,
+          "height": 63
+        }
+      }
+    },
+    {
+      "variant": "ai-design-rules",
+      "initial": {
+        "input": {
+          "x": 52,
+          "y": 754.5,
+          "width": 242.546875,
+          "height": 44
+        },
+        "button": {
+          "x": 302.546875,
+          "y": 754.5,
+          "width": 62.453125,
+          "height": 44
+        },
+        "firstRow": {
+          "x": 20,
+          "y": 306.5,
+          "width": 350,
+          "height": 64.796875
+        }
+      },
+      "saving": {
+        "input": {
+          "x": 52,
+          "y": 754.5,
+          "width": 207.78125,
+          "height": 44
+        },
+        "button": {
+          "x": 267.78125,
+          "y": 754.5,
+          "width": 97.21875,
+          "height": 44
+        },
+        "firstRow": {
+          "x": 20,
+          "y": 306.5,
+          "width": 350,
+          "height": 64.796875
+        }
+      },
+      "failure": {
+        "input": {
+          "x": 52,
+          "y": 754.5,
+          "width": 232.0625,
+          "height": 44
+        },
+        "button": {
+          "x": 292.0625,
+          "y": 754.5,
+          "width": 72.9375,
+          "height": 44
+        },
+        "firstRow": {
+          "x": 20,
+          "y": 306.5,
+          "width": 350,
+          "height": 64.796875
+        }
+      }
+    }
+  ]
+}

package/evidence/todo/2026-09-28-codex-paired-todo/layout-probe.js

@@ -0,0 +1,15 @@
+async (page) => {
+  const rows=[];
+  for(const variant of ['baseline','ai-design-rules']) {
+    await page.goto(`http://127.0.0.1:4183/${variant}/`);
+    await page.setViewportSize({width:390,height:844});
+    await page.waitForFunction(()=>window.__benchmark);
+    await page.evaluate(()=>{window.__benchmark.reset('seed');document.activeElement.blur();window.scrollTo(0,0);window.__benchmark.setSaveDelay(1500);window.__benchmark.failNextSave();});
+    const input=variant==='baseline'?'#new-task':'#task-title';const button=variant==='baseline'?'#add-button':'#add-task';
+    const boxes=async()=>({input:await page.locator(input).boundingBox(),button:await page.locator(button).boundingBox(),firstRow:await page.locator('[data-task-id="t01"]').boundingBox()});
+    const initial=await boxes();await page.locator(input).fill('Buy apples');await page.locator(button).click();const saving=await boxes();
+    await page.waitForFunction(()=>!window.__benchmark.getState().pending);const failure=await boxes();
+    rows.push({variant,initial,saving,failure});
+  }
+  return {browserVersion:page.context().browser().version(),locale:await page.evaluate(()=>navigator.language),deviceScaleFactor:await page.evaluate(()=>devicePixelRatio),rows};
+}

package/examples/GENERATED_INDEX.md

@@ -0,0 +1,8 @@
+# Generated Examples Index
+
+This file is generated from registry metadata. Do not edit manually.
+
+| ID | Alias | Title | Category | Status | Maturity | File Path | Implements | Validates |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| REF-00001 | REF-TODO-BENCHMARK | Todo App Benchmark Reference Project | consumer | draft | reviewed | examples/todo-app-benchmark.md | PROMPT-TODO-BENCHMARK / PROMPT-00003 Todo App Benchmark Prompt | PROMPT-TODO-BENCHMARK / PROMPT-00003 Todo App Benchmark Prompt<br>PAT-001 / PAT-00001 Daily Home Surface<br>PAT-002 / PAT-00002 Quick Capture<br>PAT-003 / PAT-00003 Mobile Primary Action<br>PAT-004 / PAT-00004 Progressive Detail<br>PAT-005 / PAT-00005 Context-Preserving Preview<br>PAT-006 / PAT-00006 Object Status List |
+| REF-00002 | REF-CONSEQUENTIAL-ACTION-CONFIRMATION | Consequential Action Confirmation Reference Project | fintech | active | validated | examples/consequential-action-confirmation-reference.md | PROMPT-CONSEQUENTIAL-ACTION-REVIEW / PROMPT-00006 Consequential Action Review Prompt | HIGH-RISK-OPERATIONAL-FLOWS / RESEARCH-00012 High-Risk Operational Flows<br>UX-006 / RULE-00017 Confirm Consequential Actions With Preserved Context<br>PAT-007 / PAT-00007 Consequential Action Confirmation<br>PROMPT-CONSEQUENTIAL-ACTION-REVIEW / PROMPT-00006 Consequential Action Review Prompt |

package/examples/INDEX.md

@@ -0,0 +1,16 @@
+# Examples Index
+
+Reference projects use generic product archetypes and benchmark-backed evidence.
+
+The Todo App Benchmark Reference Project is a `draft` / `seed` object backed by one directional benchmark run. It is not a production or general-quality claim.
+
+Use `examples/GENERATED_INDEX.md` for registry-backed reference project navigation. It may be empty until public reference archetypes are added.
+
+## Contribution Rule
+
+A future reference project must be:
+
+- generic enough for public OSS;
+- backed by benchmark evidence or a reproducible scenario;
+- free of private product, customer, author, or commercial project details;
+- connected to rules and patterns through registry metadata.

package/examples/README.md

@@ -0,0 +1,15 @@
+# Examples
+
+Reference projects use generic product archetypes and benchmark-backed evidence.
+
+The Todo App Benchmark Reference Project is a `draft` / `seed` object backed by one directional benchmark run. It is not a production or general-quality claim.
+
+Current public validation should use:
+
+- `benchmarks/`
+- `evidence/`
+- generated registry reports
+
+`examples/todo-reference/` is a runnable fixture for visual and interaction QA. It does not replace a paired benchmark run or change the directional status of `REF-00001`.
+
+Do not add author-specific, private, or commercial project examples.

package/examples/consequential-action-confirmation-reference.md

@@ -0,0 +1,83 @@
+---
+id: REF-00002
+alias: REF-CONSEQUENTIAL-ACTION-CONFIRMATION
+slug: consequential-action-confirmation-reference
+title: Consequential Action Confirmation Reference Project
+object_type: reference_project
+status: active
+version: 0.1.0
+category: fintech
+tags:
+  - reference-project
+  - confirmation
+  - wallet
+  - agentic-ui
+last_reviewed_at: 2026-08-12
+maturity: validated
+risk_level: high
+relationships:
+  - type: implements
+    target: PROMPT-00006
+  - type: implements
+    target: PAT-00007
+  - type: validates
+    target: RESEARCH-00012
+  - type: validates
+    target: RULE-00017
+  - type: validates
+    target: PAT-00007
+  - type: validates
+    target: PROMPT-00006
+---
+
+# Consequential Action Confirmation Reference Project
+
+## Product Context
+
+This reference project defines a reviewable wallet withdrawal and agent-approval flow for validating high-risk operational guidance. It is a specification reference, not a runnable financial product and not legal, compliance, trading, or security policy.
+
+The core object is a `WithdrawalRequest`. Its critical fields are asset, amount, fee, provider, destination, selected account, server-requested challenge, execution state, and final request identifier.
+
+## Patterns Used
+
+- `PAT-00007` / `PAT-007` Consequential Action Confirmation
+- `PAT-00005` / `PAT-005` Context-Preserving Preview when the source form or object list must remain inspectable
+- `PAT-00006` / `PAT-006` Object Status List when multiple affected objects or challenge states must be compared
+
+## Rules Applied
+
+- `RULE-00017` / `UX-006` Confirm Consequential Actions With Preserved Context
+- `RULE-00007` / `UX-003` Preserve Context During Inspection
+- `RULE-00010` / `A11Y-002` Textual Input Error Recovery
+- `RULE-00016` / `UX-005` Expose Agent Work And Intervention when an agent assists or initiates the action
+
+## Research Influence
+
+- `RESEARCH-00012` / High-Risk Operational Flows
+- `RESEARCH-00011` / Contextual And Observable Agentic Interfaces
+- `RESEARCH-00006` / Textual Error Recovery
+
+## Reference Flow
+
+1. The user enters withdrawal details: asset, amount, provider, destination, and optional note.
+2. The product computes fee, limit, balance impact, and available execution path.
+3. The confirmation surface repeats the critical object and consequence: asset, amount, fee, destination, provider, account, expected status, and reversibility.
+4. If the server requires 2FA, passkey, KYC, email approval, or another challenge, the challenge is added without clearing withdrawal details.
+5. During pending execution, the reviewed object remains visible and duplicate submission is blocked.
+6. On error, the failed challenge or blocked prerequisite is named in product language, entered data remains available, and the recovery action is explicit.
+7. On success, the terminal state shows the request identifier, next status, expected user action, and route to history.
+8. If an agent prepared the action, the agent cannot execute the withdrawal or external side effect without explicit approval and an interruptible pre-execution state.
+
+## Validation Questions
+
+- Does every confirmation keep the affected object and side effects visible?
+- Does every challenge add only the missing confirmation field?
+- Can the user cancel, edit critical inputs, retry, or inspect the terminal result?
+- Does the flow avoid raw backend codes as product copy?
+- For agent-assisted work, is explicit approval required before execution and is the audit trail inspectable?
+
+## Evidence Limits
+
+- This validates a specification-level contract and review prompt, not a shipped wallet implementation.
+- It does not validate backend policy, financial compliance, fraud controls, custody safety, or trading suitability.
+- A future rendered fixture should test keyboard traversal, mobile sheet behavior, focus recovery, reduced motion, and failure copy before promoting this pattern toward canonical maturity.

package/examples/todo-app-benchmark.md

@@ -0,0 +1,117 @@
+---
+id: REF-00001
+alias: REF-TODO-BENCHMARK
+slug: todo-app-benchmark-reference
+title: Todo App Benchmark Reference Project
+object_type: reference_project
+status: draft
+version: 0.1.0
+category: consumer
+tags:
+  - reference-project
+  - benchmark
+  - todo
+last_reviewed_at: 2026-07-15
+maturity: reviewed
+risk_level: high
+relationships:
+  - type: implements
+    target: PROMPT-00003
+  - type: implements
+    target: PAT-00001
+  - type: implements
+    target: PAT-00002
+  - type: implements
+    target: PAT-00003
+  - type: implements
+    target: PAT-00004
+  - type: implements
+    target: PAT-00005
+  - type: implements
+    target: PAT-00006
+  - type: validates
+    target: PROMPT-00003
+  - type: validates
+    target: PAT-00001
+  - type: validates
+    target: PAT-00002
+  - type: validates
+    target: PAT-00003
+  - type: validates
+    target: PAT-00004
+  - type: validates
+    target: PAT-00005
+  - type: validates
+    target: PAT-00006
+---
+
+# Todo App Benchmark Reference Project
+
+## Product Context
+
+This reference project records the AI Design Context output for the public Todo App benchmark: a responsive consumer product for quickly capturing, seeing, completing, and inspecting everyday tasks.
+
+The core object is `Task`. Its required fields are a title and completion state; note, due time, repeat, list, and priority remain optional and secondary.
+
+## Benchmark Evidence
+
+- Scenario: `benchmarks/todo-app.md`
+- Run: `evidence/todo/2026-06-25-codex-gpt-5/`
+- AI Design Context artifact: `evidence/todo/2026-06-25-codex-gpt-5/ai-design-rules/generated-output.md`
+- Comparative evaluation: `evidence/todo/2026-06-25-codex-gpt-5/EVALUATION.md`
+
+The evaluation reports a directional score difference of `+2.09` for this run. It is not evidence of general product-quality improvement.
+
+## Runnable Reference Fixture
+
+`examples/todo-reference/` is a local HTML, CSS, and JavaScript fixture for inspecting the documented task flow at mobile and desktop widths. It is a QA aid for the rule and pattern coverage below, not a replacement for the historical benchmark output and not comparative benchmark evidence.
+
+## Fixture Review Evidence
+
+- Review: `reviews/todo-reference-fixture-review.md`
+- Desktop default: `examples/todo-reference/review-evidence/2026-07-15/desktop-default.png`
+- Desktop detail: `examples/todo-reference/review-evidence/2026-07-15/desktop-detail.png`
+- Mobile error recovery: `examples/todo-reference/review-evidence/2026-07-15/mobile-error.png`
+- Mobile detail sheet: `examples/todo-reference/review-evidence/2026-07-15/mobile-detail.png`
+
+This evidence confirms rendered fixture behavior for the reviewed flows. It does not turn the historical Markdown benchmark output into a rendered, independently evaluated benchmark result.
+
+## Patterns Used
+
+- `PAT-00001` / `PAT-001` Daily Home Surface
+- `PAT-00002` / `PAT-002` Quick Capture
+- `PAT-00003` / `PAT-003` Mobile Primary Action
+- `PAT-00004` / `PAT-004` Progressive Detail
+- `PAT-00005` / `PAT-005` Context-Preserving Preview
+- `PAT-00006` / `PAT-006` Object Status List
+
+## Rules Applied
+
+- `RULE-00001` / `PRD-001` Daily Actions First
+- `RULE-00002` / `PRD-002` Low-Friction Capture Before Organization
+- `RULE-00003` / `IA-001` One Stable Home Surface
+- `RULE-00004` / `IA-002` Define The Object Model Before Screens
+- `RULE-00005` / `UX-001` Thumb-Zone Primary Actions
+- `RULE-00006` / `UX-002` Progressively Disclose Power
+- `RULE-00007` / `UX-003` Preserve Context During Inspection
+- `RULE-00008` / `VIS-001` Semantic Tokens Only
+- `RULE-00009` / `A11Y-001` 44x44 Touch Targets
+
+## Validation Questions
+
+- Does the first viewport prioritize Today and quick capture over dashboard summaries?
+- Can a user add, complete, and inspect a task while optional metadata remains secondary?
+- Does failed save preserve task text and expose a specific retry or edit path?
+- Does the same `Task` model survive the mobile bottom-sheet and desktop side-panel variants?
+- Does a rendered implementation preserve these claims under mobile, desktop, slow-network, keyboard, and assistive-technology testing?
+
+## Evidence Limits
+
+- The historical benchmark artifact is Markdown, not a rendered implementation.
+- The fixture screenshots are not paired baseline-vs-rules benchmark evidence and include no runtime performance measurements.
+- The same model generated and evaluated both outputs.
+- The baseline ran in a repository-aware conversation, so isolation is incomplete.
+
+## Next Validation
+
+Repeat the scenario in a clean session with paired rendered outputs, mobile and desktop screenshots, measured loading behavior, and at least one independent evaluator. Keep this object at `draft` / `reviewed` until that evidence exists.

package/examples/todo-reference/README.md

@@ -0,0 +1,29 @@
+# Todo Reference Fixture
+
+This runnable fixture demonstrates the Todo reference project's existing task flow at desktop and mobile widths. It is a QA aid, not a baseline-vs-rules benchmark result and not evidence for changing benchmark scores.
+
+## Covered Behaviour
+
+- today-first task list and quick capture;
+- textual error recovery for an empty submission;
+- an asynchronous save state without a layout jump;
+- completion state;
+- detail inspection that keeps the list visible on desktop and behind a mobile sheet;
+- visible keyboard focus, accessible names, 44px controls, and reduced-motion handling.
+
+## Run Locally
+
+```bash
+python3 -m http.server 4173 --directory examples/todo-reference
+```
+
+Open `http://127.0.0.1:4173` and use the Playwright CLI for a reproducible check:
+
+```bash
+export PWCLI="$HOME/.codex/skills/playwright/scripts/playwright_cli.sh"
+"$PWCLI" --session todo-reference open http://127.0.0.1:4173
+"$PWCLI" --session todo-reference resize 390 844
+"$PWCLI" --session todo-reference snapshot
+```
+
+Capture files generated by the Playwright CLI are local QA artifacts. Promote screenshots into a benchmark evidence run only together with the matched baseline output, metadata, evaluator notes, and rubric evaluation required by `docs/BENCHMARK.md`.

package/examples/todo-reference/app.js

@@ -0,0 +1,154 @@
+const tasks = [
+  { id: 1, title: 'Pick up fruit for breakfast', detail: 'Errand · before 18:00', complete: false },
+  { id: 2, title: 'Send the design review notes', detail: 'Work · 20 min', complete: false },
+  { id: 3, title: 'Book a dentist appointment', detail: 'Personal · this week', complete: false },
+];
+
+const taskList = document.querySelector('[data-task-list]');
+const emptyState = document.querySelector('[data-empty-state]');
+const taskSurface = document.querySelector('.task-surface');
+const remainingCount = document.querySelector('#remaining-count');
+const progressCopy = document.querySelector('#progress-copy');
+const captureForm = document.querySelector('[data-capture-form]');
+const taskInput = document.querySelector('#task-title');
+const captureError = document.querySelector('#capture-error');
+const addButton = document.querySelector('[data-add-task]');
+const saveStatus = document.querySelector('#save-status');
+const detailPanel = document.querySelector('[data-detail-panel]');
+const detailHeading = document.querySelector('#detail-heading');
+const detailStatus = document.querySelector('[data-detail-status]');
+const completeDetailButton = document.querySelector('[data-action="complete-detail"]');
+let selectedTaskId = null;
+let detailReturnFocus = null;
+let showEmpty = false;
+
+function activeTasks() {
+  return tasks.filter((task) => !task.complete);
+}
+
+function render() {
+  const visibleTasks = showEmpty ? [] : tasks;
+  taskList.hidden = visibleTasks.length === 0;
+  emptyState.hidden = visibleTasks.length !== 0;
+  taskList.replaceChildren(
+    ...visibleTasks.map((task) => {
+      const item = document.createElement('li');
+      item.className = `task-row${task.complete ? ' is-complete' : ''}`;
+
+      const taskMain = document.createElement('div');
+      taskMain.className = 'task-main';
+
+      const completeButton = document.createElement('button');
+      completeButton.className = 'complete-toggle';
+      completeButton.type = 'button';
+      completeButton.dataset.completeId = String(task.id);
+      completeButton.setAttribute('aria-pressed', String(task.complete));
+      completeButton.setAttribute(
+        'aria-label',
+        `${task.complete ? 'Mark incomplete' : 'Mark complete'}: ${task.title}`,
+      );
+      completeButton.textContent = task.complete ? '✓' : '';
+
+      const openButton = document.createElement('button');
+      openButton.className = 'task-open';
+      openButton.type = 'button';
+      openButton.dataset.openId = String(task.id);
+
+      const title = document.createElement('span');
+      title.className = 'task-title';
+      title.textContent = task.title;
+
+      const meta = document.createElement('span');
+      meta.className = 'task-meta';
+      meta.textContent = task.detail;
+
+      openButton.append(title, meta);
+      taskMain.append(completeButton, openButton);
+      item.append(taskMain);
+      return item;
+    }),
+  );
+
+  const remaining = activeTasks().length;
+  remainingCount.textContent = String(remaining);
+  progressCopy.textContent = remaining === 0 ? 'Everything is complete.' : 'A clear plan for the day.';
+}
+
+function openDetail(taskId, returnFocus = document.activeElement) {
+  const task = tasks.find((item) => item.id === taskId);
+  if (!task) return;
+  selectedTaskId = task.id;
+  detailReturnFocus = returnFocus instanceof HTMLElement ? returnFocus : null;
+  detailHeading.textContent = task.title;
+  detailStatus.textContent = task.complete ? 'Complete' : 'Open';
+  completeDetailButton.textContent = task.complete ? 'Mark incomplete' : 'Mark complete';
+  detailPanel.hidden = false;
+  detailPanel.querySelector('[data-action="close-detail"]').focus();
+}
+
+function closeDetail({ restoreFocus = true } = {}) {
+  detailPanel.hidden = true;
+  selectedTaskId = null;
+  const returnFocus = detailReturnFocus;
+  detailReturnFocus = null;
+  if (restoreFocus && returnFocus?.isConnected) returnFocus.focus();
+}
+
+function toggleComplete(taskId) {
+  const task = tasks.find((item) => item.id === taskId);
+  if (!task) return;
+  task.complete = !task.complete;
+  render();
+  if (selectedTaskId === task.id) {
+    openDetail(task.id, document.querySelector(`[data-open-id="${task.id}"]`));
+  }
+}
+
+captureForm.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const title = taskInput.value.trim();
+  captureError.hidden = true;
+  taskInput.removeAttribute('aria-invalid');
+
+  if (!title) {
+    captureError.textContent = 'Enter a task before adding it.';
+    captureError.hidden = false;
+    taskInput.setAttribute('aria-invalid', 'true');
+    taskInput.focus();
+    return;
+  }
+
+  taskSurface.setAttribute('aria-busy', 'true');
+  addButton.disabled = true;
+  saveStatus.textContent = 'Saving…';
+  window.setTimeout(() => {
+    tasks.unshift({ id: Date.now(), title, detail: 'Just added · Today', complete: false });
+    taskInput.value = '';
+    showEmpty = false;
+    taskSurface.setAttribute('aria-busy', 'false');
+    addButton.disabled = false;
+    saveStatus.textContent = 'Saved';
+    render();
+    window.setTimeout(() => { saveStatus.textContent = ''; }, 1800);
+  }, 420);
+});
+
+taskList.addEventListener('click', (event) => {
+  const completion = event.target.closest('[data-complete-id]');
+  const opener = event.target.closest('[data-open-id]');
+  if (completion) toggleComplete(Number(completion.dataset.completeId));
+  if (opener) openDetail(Number(opener.dataset.openId), opener);
+});
+
+document.querySelector('[data-action="toggle-empty"]').addEventListener('click', (event) => {
+  showEmpty = !showEmpty;
+  event.currentTarget.setAttribute('aria-pressed', String(showEmpty));
+  event.currentTarget.setAttribute('aria-label', showEmpty ? 'Show task list' : 'Show empty state');
+  closeDetail({ restoreFocus: false });
+  render();
+});
+document.querySelector('[data-action="focus-capture"]').addEventListener('click', () => taskInput.focus());
+document.querySelector('[data-action="close-detail"]').addEventListener('click', closeDetail);
+completeDetailButton.addEventListener('click', () => toggleComplete(selectedTaskId));
+
+render();

package/examples/todo-reference/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="18" fill="#286248"/>
+  <path d="m18 33 9 9 19-21" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="7"/>
+</svg>

package/examples/todo-reference/index.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Runnable Todo reference fixture for visual and interaction QA." />
+    <title>Today — Todo reference fixture</title>
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main class="app-shell">
+      <section class="content-column">
+      <header class="app-header">
+        <div>
+          <p class="eyebrow">Tuesday, 14 July</p>
+          <h1>Today</h1>
+        </div>
+        <button class="icon-button" type="button" data-action="toggle-empty" aria-pressed="false" aria-label="Show empty state">
+          <span aria-hidden="true">⌁</span>
+        </button>
+      </header>
+
+      <section class="summary" aria-label="Today summary">
+        <p><strong id="remaining-count">3</strong> tasks left</p>
+        <p id="progress-copy">A clear plan for the day.</p>
+      </section>
+
+      <form class="quick-capture" data-capture-form novalidate>
+        <label class="sr-only" for="task-title">Add a task</label>
+        <input id="task-title" name="task-title" type="text" autocomplete="off" placeholder="What needs doing?" aria-describedby="capture-error" />
+        <button type="submit" data-add-task>Add task</button>
+        <p id="capture-error" class="form-error" role="alert" hidden></p>
+      </form>
+
+      <section class="task-surface" aria-labelledby="task-list-heading" aria-busy="false">
+        <div class="section-heading">
+          <h2 id="task-list-heading">Your tasks</h2>
+          <span id="save-status" class="save-status" aria-live="polite"></span>
+        </div>
+        <ul class="task-list" data-task-list></ul>
+        <div class="empty-state" data-empty-state hidden>
+          <span class="empty-icon" aria-hidden="true">✓</span>
+          <h2>Your day is clear</h2>
+          <p>Add the first small thing you want to remember.</p>
+          <button type="button" data-action="focus-capture">Add a task</button>
+        </div>
+      </section>
+      </section>
+
+      <aside class="detail-panel" data-detail-panel aria-labelledby="detail-heading" hidden>
+        <div class="detail-header">
+          <p class="eyebrow">Task details</p>
+          <button class="icon-button" type="button" data-action="close-detail" aria-label="Close task details">×</button>
+        </div>
+        <h2 id="detail-heading"></h2>
+        <dl class="detail-list">
+          <div><dt>Status</dt><dd data-detail-status></dd></div>
+          <div><dt>When</dt><dd data-detail-date>Today</dd></div>
+          <div><dt>Notes</dt><dd>Optional details stay here, not in the list.</dd></div>
+        </dl>
+        <button type="button" class="secondary-button" data-action="complete-detail">Mark complete</button>
+      </aside>
+    </main>
+    <script type="module" src="app.js"></script>
+  </body>
+</html>