devmethod-ai 0.1.0-rc.2 → 0.2.0

package/examples/pocket-tasks/public/app.js

@@ -0,0 +1,84 @@
+'use strict';
+const $ = selector => document.querySelector(selector);
+let tasks = [], filter = 'all', busy = false, editing = null;
+const status = message => { $('#status').textContent = message; };
+function showError(message, canReload = true) { $('#error').textContent = message; $('#error').hidden = !message; $('#retry').hidden = !message || !canReload; }
+async function api(path = '', options = {}) {
+  const response = await fetch(`/api/tasks${path}`, { ...options, headers: { 'Content-Type': 'application/json' } });
+  if (response.status === 204) return;
+  const result = await response.json();
+  if (!response.ok) { const error = new Error(result.error || 'Request failed.'); error.status = response.status; throw error; }
+  return result;
+}
+function setBusy(value) {
+  busy = value;
+  document.querySelectorAll('button,input').forEach(element => { element.disabled = value; });
+  $('#tasks').setAttribute('aria-busy', String(value));
+}
+function button(label, action, className = '') {
+  const element = document.createElement('button'); element.type = 'button'; element.textContent = label; element.className = className; element.addEventListener('click', action); return element;
+}
+function render() {
+  const list = $('#tasks'); list.replaceChildren();
+  const visible = tasks.filter(task => filter === 'all' || task.done === (filter === 'completed'));
+  $('#count').textContent = `${tasks.length} ${tasks.length === 1 ? 'task' : 'tasks'} · ${tasks.filter(task => !task.done).length} active`;
+  $('#empty').hidden = visible.length > 0;
+  $('#empty').textContent = tasks.length === 0 ? 'No tasks yet. Add your first above.' : `No ${filter} tasks.`;
+  for (const task of visible) {
+    const row = document.createElement('li'); row.className = `task${task.done ? ' done' : ''}`;
+    if (editing === task.id) {
+      const form = document.createElement('form'); form.className = 'edit-form';
+      const label = document.createElement('label'); label.htmlFor = 'edit-title'; label.textContent = 'Edit task title';
+      const controls = document.createElement('div'); controls.className = 'edit-row';
+      const input = document.createElement('input'); input.id = 'edit-title'; input.value = task.title; input.maxLength = 120; input.required = true;
+      const save = document.createElement('button'); save.type = 'submit'; save.textContent = 'Save'; save.className = 'primary';
+      const cancel = button('Cancel', () => { editing = null; render(); focusEdit(task.id); });
+      form.addEventListener('submit', event => { event.preventDefault(); mutate(`/${task.id}`, 'PATCH', { title: input.value }, 'Task updated.', () => focusEdit(task.id)); });
+      input.addEventListener('keydown', event => { if (event.key === 'Escape') { editing = null; render(); focusEdit(task.id); } });
+      controls.append(input, save, cancel); form.append(label, controls); row.append(form);
+    } else {
+      const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = task.done; checkbox.setAttribute('aria-label', `Mark ${task.title} ${task.done ? 'active' : 'completed'}`);
+      checkbox.addEventListener('change', () => mutate(`/${task.id}`, 'PATCH', { done: checkbox.checked }, task.done ? 'Task reopened.' : 'Task completed.', () => { const next = document.querySelector(`[data-toggle="${task.id}"]`); (next || $('#new-title')).focus(); }));
+      checkbox.dataset.toggle = task.id;
+      const title = document.createElement('span'); title.className = 'task-title'; title.textContent = task.title;
+      const actions = document.createElement('div'); actions.className = 'actions';
+      const edit = button('Edit', () => { editing = task.id; render(); $('#edit-title').focus(); }); edit.dataset.edit = task.id; edit.setAttribute('aria-label', `Edit ${task.title}`);
+      const remove = button('Delete', () => mutate(`/${task.id}`, 'DELETE', undefined, 'Task deleted.', () => $('#new-title').focus()), 'delete'); remove.setAttribute('aria-label', `Delete ${task.title}`);
+      actions.append(edit, remove); row.append(checkbox, title, actions);
+    }
+    list.append(row);
+  }
+  document.querySelectorAll('[data-filter]').forEach(element => element.setAttribute('aria-pressed', String(element.dataset.filter === filter)));
+}
+function focusEdit(id) { (document.querySelector(`[data-edit="${id}"]`) || $('#new-title')).focus(); }
+async function mutate(path, method, body, message, focus) {
+  if (busy) return;
+  setBusy(true); showError(''); status('Saving…');
+  try {
+    const result = await api(path, { method, ...(body === undefined ? {} : { body: JSON.stringify(body) }) });
+    if (method === 'POST') { tasks.push(result.task); $('#new-title').value = ''; }
+    else if (method === 'PATCH') tasks = tasks.map(task => task.id === result.task.id ? result.task : task);
+    else tasks = tasks.filter(task => `/${task.id}` !== path);
+    editing = null; render(); status(message);
+  } catch (error) {
+    if (error.status >= 400 && error.status < 500) {
+      showError(error.message, false); status('Change rejected. Correct the input and try again.');
+      document.querySelectorAll('[data-toggle]').forEach(checkbox => { checkbox.checked = tasks.find(task => task.id === checkbox.dataset.toggle).done; });
+      focus = () => ($('#edit-title') || $('#new-title')).focus();
+    } else {
+      showError(`${error.message} Reload to check saved state before retrying a change.`); status('Change could not be confirmed.'); render();
+    }
+  }
+  finally { setBusy(false); focus?.(); }
+}
+async function load() {
+  if (busy) return;
+  setBusy(true); showError(''); status('Loading tasks…'); $('#empty').hidden = true;
+  try { tasks = (await api()).tasks; editing = null; render(); status('Tasks loaded.'); }
+  catch (error) { showError(error.message); status('Tasks could not be loaded.'); }
+  finally { setBusy(false); }
+}
+$('#add-form').addEventListener('submit', event => { event.preventDefault(); mutate('', 'POST', { title: $('#new-title').value }, 'Task added.', () => $('#new-title').focus()); });
+document.querySelectorAll('[data-filter]').forEach(element => element.addEventListener('click', () => { filter = element.dataset.filter; editing = null; render(); status(`Showing ${filter} tasks.`); }));
+$('#retry').addEventListener('click', load);
+load();

package/examples/pocket-tasks/public/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Pocket Tasks</title><link rel="stylesheet" href="/styles.css"><script src="/app.js" defer></script></head>
+<body><main>
+<header><span class="eyebrow">A LITTLE SPACE TO GET THINGS DONE</span><h1>Pocket Tasks<span aria-hidden="true">.</span></h1><p>Clear your head. Start with one small thing.</p></header>
+<section class="workspace" aria-label="Your tasks">
+<form id="add-form"><label for="new-title">What needs doing?</label><div class="add-row"><input id="new-title" name="title" maxlength="120" required placeholder="e.g. Plan tomorrow’s walk" autocomplete="off"><button type="submit" class="primary">Add task</button></div></form>
+<div class="toolbar"><div class="filters" role="group" aria-label="Filter tasks"><button type="button" data-filter="all" aria-pressed="true">All</button><button type="button" data-filter="active" aria-pressed="false">Active</button><button type="button" data-filter="completed" aria-pressed="false">Completed</button></div><span id="count">0 tasks</span></div>
+<p id="status" role="status" aria-live="polite">Loading tasks…</p><div id="error" role="alert" hidden></div><button id="retry" type="button" hidden>Reload tasks</button>
+<ul id="tasks" aria-label="Task list"></ul><p id="empty" hidden>No tasks yet. Add your first above.</p>
+</section><footer>Stored on this computer. One task at a time.</footer>
+</main></body></html>

package/examples/pocket-tasks/public/styles.css

@@ -0,0 +1 @@
+:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#213e39;background:#f4f6f1;font-synthesis:none;line-height:1.5}*{box-sizing:border-box}body{margin:0}main{max-width:820px;margin:64px auto;padding:0 28px}header{margin-bottom:32px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;color:#5a7067}h1{font-size:clamp(36px,7vw,54px);letter-spacing:-2px;margin:12px 0 8px;line-height:1.1}h1 span{color:#bf651b}header p{color:#5b6e64;margin:0}.workspace{background:white;border:1px solid #dbe4d8;border-radius:20px;padding:28px;box-shadow:0 16px 40px #23463208}label{display:block;font-weight:650;font-size:14px;margin-bottom:10px}.add-row{display:flex;gap:10px}input[type=text],input:not([type]){min-width:0;flex:1;width:100%;border:1px solid #b8c9bf;background:#fbfcfa;border-radius:9px;padding:12px;font:inherit;color:inherit}button{border:1px solid #cdd8cf;border-radius:8px;background:#fff;padding:10px 14px;color:#29483e;font:inherit;font-size:14px;font-weight:650;cursor:pointer;min-height:44px}button:hover{background:#edf3ec}.primary{background:#285743;color:#fff;border-color:#285743}.primary:hover{background:#1c4232}button:disabled,input:disabled{opacity:.65;cursor:wait}:focus-visible{outline:3px solid #b2671d;outline-offset:3px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e7ece5;margin-top:26px;padding-bottom:18px}.filters{display:flex;gap:5px;flex-wrap:wrap}.filters button{border-color:transparent;font-size:13px;padding:8px 12px}.filters button[aria-pressed=true]{background:#e7f0e7;color:#17452f;border-color:#b5cbb7}#count{font-size:12px;color:#617567;white-space:nowrap}#status{font-size:13px;color:#4d695a;margin:16px 0 0;min-height:20px}#error{color:#8d281d;background:#fff0ec;padding:12px;margin-top:12px;border-radius:8px}#tasks{list-style:none;margin:8px 0 0;padding:0}.task{display:flex;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid #e8ece6}.task:last-child{border-bottom:0}.task input[type=checkbox]{width:22px;height:22px;flex-shrink:0;accent-color:#285743;cursor:pointer}.task-title{flex:1;min-width:0;overflow-wrap:anywhere}.task.done .task-title{text-decoration:line-through;color:#718076}.actions{display:flex;gap:6px}.actions button{font-size:12px;padding:8px 10px}.delete{color:#8b4030}.edit-form{width:100%}.edit-row{display:flex;gap:8px;flex-wrap:wrap}.edit-row input{flex-basis:200px}#empty{text-align:center;color:#667c6e;padding:32px 4px}footer{font-size:12px;color:#647569;text-align:center;margin-top:24px}[hidden]{display:none!important}@media(max-width:540px){main{margin:28px auto;padding:0 16px}.workspace{padding:18px;border-radius:14px}.add-row{flex-direction:column}.toolbar{align-items:flex-start;flex-direction:column;gap:6px}.task{flex-wrap:wrap;gap:10px}.task-title{flex-basis:calc(100% - 40px)}.actions{margin-left:32px}.edit-row input{flex-basis:100%}.eyebrow{font-size:9px;letter-spacing:1px}}

package/examples/pocket-tasks/server.mjs

@@ -0,0 +1,79 @@
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { resolve } from 'node:path';
+import { createStore } from './src/store.mjs';
+import { TaskError, validateBody } from './src/domain.mjs';
+
+const assets = new Map([
+  ['/', ['index.html', 'text/html; charset=utf-8']],
+  ['/styles.css', ['styles.css', 'text/css; charset=utf-8']],
+  ['/app.js', ['app.js', 'text/javascript; charset=utf-8']],
+]);
+function body(request) {
+  return new Promise((resolveBody, reject) => {
+    const chunks = []; let size = 0, exceeded = false;
+    request.on('data', chunk => {
+      size += chunk.length;
+      if (size > 16384) {
+        if (!exceeded) { exceeded = true; chunks.length = 0; reject(new TaskError('Request body exceeds 16 KiB.', 413)); }
+      } else if (!exceeded) chunks.push(chunk);
+    });
+    request.on('end', () => {
+      if (exceeded) return;
+      try { resolveBody(JSON.parse(Buffer.concat(chunks).toString('utf8'))); }
+      catch { reject(new TaskError('Malformed JSON.')); }
+    });
+    request.on('error', reject);
+  });
+}
+function validateLocalRequest(request) {
+  const expectedHost = `127.0.0.1:${request.socket.localPort}`;
+  const hostCount = request.rawHeaders.filter((_, index) => index % 2 === 0 && request.rawHeaders[index].toLowerCase() === 'host').length;
+  if (hostCount !== 1 || request.headers.host !== expectedHost) throw new TaskError('Use the local 127.0.0.1 address and server port.', 403);
+  if (!['POST', 'PATCH', 'DELETE'].includes(request.method)) return;
+  const originCount = request.rawHeaders.filter((_, index) => index % 2 === 0 && request.rawHeaders[index].toLowerCase() === 'origin').length;
+  if (originCount > 1 || (request.headers.origin !== undefined && request.headers.origin !== `http://${expectedHost}`) || request.headers['sec-fetch-site'] === 'cross-site') {
+    throw new TaskError('Cross-site changes are not permitted.', 403);
+  }
+}
+function requireJSON(request) {
+  if (request.headers['content-type']?.split(';', 1)[0].trim().toLowerCase() !== 'application/json') throw new TaskError('Content-Type must be application/json.', 415);
+}
+function json(response, status, value) {
+  response.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  response.end(value === undefined ? undefined : JSON.stringify(value));
+}
+export function createTaskServer({ dataFile }) {
+  const store = createStore(resolve(dataFile));
+  return createServer(async (request, response) => {
+    response.setHeader('X-Content-Type-Options', 'nosniff');
+    response.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'; base-uri 'none'; frame-ancestors 'none'");
+    try {
+      validateLocalRequest(request);
+      const pathname = new URL(request.url, 'http://127.0.0.1').pathname;
+      if (pathname === '/api/tasks' && request.method === 'GET') return json(response, 200, { tasks: await store.list() });
+      if (pathname === '/api/tasks' && request.method === 'POST') { requireJSON(request); return json(response, 201, { task: await store.create(validateBody(await body(request))) }); }
+      const match = /^\/api\/tasks\/([^/]+)$/.exec(pathname);
+      if (match && request.method === 'PATCH') { requireJSON(request); return json(response, 200, { task: await store.update(decodeURIComponent(match[1]), validateBody(await body(request), true)) }); }
+      if (match && request.method === 'DELETE') { await store.remove(decodeURIComponent(match[1])); return json(response, 204); }
+      if (request.method === 'GET' && assets.has(pathname)) {
+        const [file, type] = assets.get(pathname);
+        const content = await readFile(new URL(`./public/${file}`, import.meta.url));
+        response.writeHead(200, { 'Content-Type': type }); return response.end(content);
+      }
+      json(response, 404, { error: 'Not found.' });
+    } catch (error) {
+      const status = error instanceof TaskError ? error.status : error instanceof URIError ? 400 : 500;
+      json(response, status, { error: status === 500 ? 'Storage or server unavailable. Check local data and server permissions; existing data has not been reset.' : error.message });
+    }
+  });
+}
+if (process.argv[1] && import.meta.url === pathToFileURL(resolve(process.argv[1])).href) {
+  const port = Number(process.env.PORT ?? 4318);
+  if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error('PORT must be an integer from 0 to 65535.');
+  const server = createTaskServer({ dataFile: process.env.DATA_FILE ?? fileURLToPath(new URL('./data/tasks.json', import.meta.url)) });
+  server.on('error', error => { console.error(`Pocket Tasks could not start: ${error.message}`); process.exitCode = 1; });
+  server.listen(port, '127.0.0.1', () => console.log(`Pocket Tasks: http://127.0.0.1:${server.address().port}`));
+  for (const signal of ['SIGINT', 'SIGTERM']) process.on(signal, () => server.close());
+}

package/examples/pocket-tasks/src/domain.mjs

@@ -0,0 +1,31 @@
+export class TaskError extends Error {
+  constructor(message, status = 400) { super(message); this.status = status; }
+}
+export function title(value) {
+  if (typeof value !== 'string' || !value.trim() || value.trim().length > 120) {
+    throw new TaskError('Title must contain 1–120 characters.');
+  }
+  return value.trim();
+}
+export function validateBody(body, patch = false) {
+  if (!body || typeof body !== 'object' || Array.isArray(body)) throw new TaskError('Expected a JSON object.');
+  const result = {};
+  if (Object.hasOwn(body, 'title')) result.title = title(body.title);
+  if (patch && Object.hasOwn(body, 'done')) {
+    if (typeof body.done !== 'boolean') throw new TaskError('Done must be a boolean.');
+    result.done = body.done;
+  }
+  if (!patch && !Object.hasOwn(result, 'title')) throw new TaskError('A title is required.');
+  if (patch && !Object.keys(result).length) throw new TaskError('Provide title or done.');
+  return result;
+}
+export function validateStoredTasks(tasks) {
+  if (!Array.isArray(tasks)) throw new Error('Invalid stored task list');
+  const ids = new Set();
+  for (const task of tasks) {
+    if (!task || typeof task.id !== 'string' || !task.id || ids.has(task.id) ||
+      typeof task.done !== 'boolean' || typeof task.title !== 'string' || !task.title || task.title.length > 120 || task.title.trim() !== task.title) throw new Error('Invalid stored task');
+    ids.add(task.id);
+  }
+  return tasks;
+}

package/examples/pocket-tasks/src/store.mjs

@@ -0,0 +1,49 @@
+import { readFile, mkdir, open, rename, unlink } from 'node:fs/promises';
+import { dirname } from 'node:path';
+import { randomUUID } from 'node:crypto';
+import { TaskError, validateStoredTasks } from './domain.mjs';
+
+export function createStore(dataFile) {
+  let tail = Promise.resolve();
+  const enqueue = fn => {
+    const result = tail.then(fn);
+    tail = result.catch(() => {});
+    return result;
+  };
+  async function read() {
+    let raw;
+    try { raw = await readFile(dataFile, 'utf8'); }
+    catch (error) { if (error.code === 'ENOENT') return []; throw error; }
+    return validateStoredTasks(JSON.parse(raw));
+  }
+  async function save(tasks) {
+    await mkdir(dirname(dataFile), { recursive: true });
+    const temporary = `${dataFile}.${randomUUID()}.tmp`;
+    try {
+      const handle = await open(temporary, 'wx', 0o600);
+      try { await handle.writeFile(`${JSON.stringify(tasks, null, 2)}\n`); await handle.sync(); }
+      finally { await handle.close(); }
+      await rename(temporary, dataFile);
+    } finally { await unlink(temporary).catch(error => { if (error.code !== 'ENOENT') throw error; }); }
+  }
+  return {
+    list: () => enqueue(read),
+    create: input => enqueue(async () => {
+      const tasks = await read();
+      const task = { id: randomUUID(), title: input.title, done: false };
+      tasks.push(task); await save(tasks); return task;
+    }),
+    update: (id, input) => enqueue(async () => {
+      const tasks = await read();
+      const task = tasks.find(task => task.id === id);
+      if (!task) throw new TaskError('Task not found.', 404);
+      Object.assign(task, input); await save(tasks); return task;
+    }),
+    remove: id => enqueue(async () => {
+      const tasks = await read();
+      const index = tasks.findIndex(task => task.id === id);
+      if (index === -1) throw new TaskError('Task not found.', 404);
+      tasks.splice(index, 1); await save(tasks);
+    }),
+  };
+}

package/examples/pocket-tasks/tests/app.test.mjs

@@ -0,0 +1,132 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp, readFile, writeFile, rm, readdir } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { once } from 'node:events';
+import { request as httpRequest } from 'node:http';
+import { createTaskServer } from '../server.mjs';
+import { validateBody } from '../src/domain.mjs';
+
+async function fixture(t) {
+  const dir = await mkdtemp(join(tmpdir(), 'pocket-tasks-'));
+  const file = join(dir, 'tasks.json');
+  const servers = [];
+  async function start() {
+    const server = createTaskServer({ dataFile: file }); servers.push(server);
+    server.listen(0, '127.0.0.1'); await once(server, 'listening');
+    const base = `http://127.0.0.1:${server.address().port}`;
+    return { server, call: (path = '/api/tasks', method = 'GET', payload) => fetch(`${base}${path}`, { method, headers: { 'Content-Type': 'application/json' }, ...(payload === undefined ? {} : { body: typeof payload === 'string' ? payload : JSON.stringify(payload) }) }) };
+  }
+  t.after(async () => { for (const server of servers) if (server.listening) await new Promise(resolve => server.close(resolve)); await rm(dir, { recursive: true, force: true }); });
+  return { dir, file, start, ...await start() };
+}
+
+test('domain normalizes titles and rejects invalid shapes/fields', () => {
+  assert.deepEqual(validateBody({ title: '  hello  ' }), { title: 'hello' });
+  assert.deepEqual(validateBody({ done: false }, true), { done: false });
+  for (const body of [null, [], {}, { title: '' }, { title: ' ' }, { title: 1 }, { title: 'x'.repeat(121) }]) assert.throws(() => validateBody(body));
+  for (const body of [null, [], {}, { extra: true }, { done: 'true' }, { title: ' ' }, { done: null }]) assert.throws(() => validateBody(body, true));
+  assert.equal(validateBody({ title: 'x'.repeat(120) }).title.length, 120);
+});
+
+test('HTTP CRUD and restart preserve titles, completion and deletion', async t => {
+  const f = await fixture(t);
+  assert.deepEqual(await (await f.call()).json(), { tasks: [] });
+  const created = await f.call('/api/tasks', 'POST', { title: '  <img src=x onerror=alert(1)>  ' });
+  assert.equal(created.status, 201); const { task } = await created.json();
+  assert.equal(task.title, '<img src=x onerror=alert(1)>'); assert.equal(task.done, false); assert.equal(typeof task.id, 'string');
+  const updated = await f.call(`/api/tasks/${task.id}`, 'PATCH', { title: ' Revised ', done: true });
+  assert.equal(updated.status, 200); assert.deepEqual((await updated.json()).task, { id: task.id, title: 'Revised', done: true });
+  await new Promise(resolve => f.server.close(resolve));
+  const restarted = await f.start();
+  assert.deepEqual((await (await restarted.call()).json()).tasks, [{ id: task.id, title: 'Revised', done: true }]);
+  assert.equal((await restarted.call(`/api/tasks/${task.id}`, 'PATCH', { done: false })).status, 200);
+  assert.equal((await restarted.call(`/api/tasks/${task.id}`, 'DELETE')).status, 204);
+  assert.deepEqual(JSON.parse(await readFile(f.file, 'utf8')), []);
+  assert.equal((await restarted.call(`/api/tasks/${task.id}`, 'DELETE')).status, 404);
+});
+
+test('bad HTTP input and oversized body never change persisted state', async t => {
+  const f = await fixture(t);
+  const { task } = await (await f.call('/api/tasks', 'POST', { title: 'Keep me' })).json();
+  const before = await readFile(f.file, 'utf8');
+  for (const payload of ['{', 'null', '[]', { title: false }, { title: '' }, { title: 'x'.repeat(121) }]) {
+    const response = await f.call('/api/tasks', 'POST', payload); assert.equal(response.status, 400); assert.equal(typeof (await response.json()).error, 'string');
+  }
+  for (const payload of [{}, { done: 1 }, { title: null }, { extra: 'value' }]) assert.equal((await f.call(`/api/tasks/${task.id}`, 'PATCH', payload)).status, 400);
+  const large = await f.call('/api/tasks', 'POST', { title: 'x'.repeat(17000) }); assert.equal(large.status, 413); assert.equal(typeof (await large.json()).error, 'string');
+  assert.equal((await f.call('/api/tasks/missing', 'PATCH', { done: true })).status, 404);
+  assert.equal(await readFile(f.file, 'utf8'), before);
+});
+
+test('concurrent mutations serialize without losing tasks or leaking temp files', async t => {
+  const f = await fixture(t);
+  const responses = await Promise.all(Array.from({ length: 20 }, (_, n) => f.call('/api/tasks', 'POST', { title: `Task ${n}` })));
+  assert.ok(responses.every(response => response.status === 201));
+  const tasks = (await (await f.call()).json()).tasks;
+  assert.equal(tasks.length, 20); assert.equal(new Set(tasks.map(task => task.id)).size, 20);
+  assert.deepEqual(await readdir(f.dir), ['tasks.json']);
+});
+
+test('malformed persisted data fails closed and recovers only after explicit repair', async t => {
+  const f = await fixture(t);
+  for (const malformed of ['{broken', '{}', '[{"id":"x","title":"","done":false}]', '[{"id":"x","title":"hello","done":"yes"}]', '[{"id":"x","title":"hello","done":false},{"id":"x","title":"again","done":true}]']) {
+    await writeFile(f.file, malformed);
+    assert.equal((await f.call()).status, 500);
+    assert.equal((await f.call('/api/tasks', 'POST', { title: 'New' })).status, 500);
+    assert.equal(await readFile(f.file, 'utf8'), malformed);
+  }
+  await writeFile(f.file, '[]');
+  assert.equal((await f.call('/api/tasks', 'POST', { title: 'Recovered' })).status, 201);
+});
+
+test('static allowlist serves UI and rejects private assets and unknown methods', async t => {
+  const f = await fixture(t);
+  const page = await f.call('/'); assert.equal(page.status, 200); assert.match(page.headers.get('content-type'), /text\/html/);
+  assert.match(page.headers.get('content-security-policy'), /script-src 'self'/);
+  assert.match(await page.text(), /aria-live="polite"/);
+  for (const path of ['/server.mjs', '/BRIEF.md', '/data/tasks.json', '/%2e%2e%2fserver.mjs', '/missing']) assert.equal((await f.call(path)).status, 404);
+  assert.equal((await f.call('/api/tasks', 'PUT', {})).status, 404);
+  const js = await (await f.call('/app.js')).text(); assert.ok(!js.includes('innerHTML'));
+});
+
+
+test('local HTTP boundary rejects cross-site writes, rebinding hosts and simple MIME without mutation', async t => {
+  const f = await fixture(t);
+  const { task } = await (await f.call('/api/tasks', 'POST', { title: 'Keep local' })).json();
+  const before = await readFile(f.file, 'utf8');
+  const port = f.server.address().port;
+  const send = (method, path, headers, payload = '{}') => new Promise((resolve, reject) => {
+    const request = httpRequest({ hostname: '127.0.0.1', port, method, path, headers: { ...headers, 'Content-Length': Buffer.byteLength(payload) } }, response => {
+      let text = ''; response.setEncoding('utf8'); response.on('data', chunk => { text += chunk; });
+      response.on('end', () => resolve({ status: response.statusCode, text }));
+    });
+    request.on('error', reject); request.end(payload);
+  });
+  const local = { Host: `127.0.0.1:${port}`, 'Content-Type': 'application/json' };
+  for (const headers of [
+    { ...local, Origin: 'https://attacker.example' },
+    { ...local, Origin: 'null' },
+    { ...local, Origin: `http://127.0.0.1:${port + 1}` },
+    { ...local, Origin: `http://127.0.0.1:${port}`, 'Sec-Fetch-Site': 'cross-site' },
+    { ...local, Host: `attacker.example:${port}` },
+    { ...local, Host: `127.0.0.1:${port + 1}` },
+    { ...local, Host: `localhost:${port}` },
+    { ...local, Host: `127.0.0.1:${port}.attacker.example` },
+  ]) {
+    for (const [method, path] of [['POST', '/api/tasks'], ['PATCH', `/api/tasks/${task.id}`], ['DELETE', `/api/tasks/${task.id}`]]) {
+      const response = await send(method, path, headers, JSON.stringify({ title: 'Injected' }));
+      assert.equal(response.status, 403); assert.equal(typeof JSON.parse(response.text).error, 'string');
+    }
+  }
+  for (const mime of ['text/plain', 'application/x-www-form-urlencoded', 'multipart/form-data', '']) {
+    for (const [method, path] of [['POST', '/api/tasks'], ['PATCH', `/api/tasks/${task.id}`]]) {
+      assert.equal((await send(method, path, { ...local, 'Content-Type': mime }, '{"title":"Injected"}')).status, 415);
+    }
+  }
+  assert.equal((await send('GET', '/api/tasks', { ...local, Host: `attacker.example:${port}` })).status, 403);
+  assert.equal(await readFile(f.file, 'utf8'), before);
+  assert.equal((await send('PATCH', `/api/tasks/${task.id}`, { ...local, Origin: `http://127.0.0.1:${port}`, 'Content-Type': 'application/json; charset=utf-8' }, '{"done":true}')).status, 200);
+  assert.equal((await send('PATCH', `/api/tasks/${task.id}`, local, '{"done":false}')).status, 200);
+});

package/examples/pocket-tasks/tests/ui-errors.test.mjs

@@ -0,0 +1,49 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+
+async function ui(failure) {
+  const nodes = new Map();
+  const element = () => ({ textContent: '', value: '', hidden: false, disabled: false, dataset: {}, setAttribute() {}, addEventListener() {}, replaceChildren() {}, append() {}, focus() { this.focused = true; } });
+  for (const selector of ['#status', '#error', '#retry', '#tasks', '#empty', '#count', '#add-form', '#new-title']) nodes.set(selector, element());
+  nodes.get('#new-title').value = '   ';
+  let calls = 0;
+  const context = vm.createContext({
+    document: { querySelector: selector => nodes.get(selector) ?? null, querySelectorAll: selector => selector === 'button,input' ? [nodes.get('#new-title'), nodes.get('#retry')] : [], createElement: element },
+    fetch: async () => {
+      calls += 1;
+      if (calls === 1) return { status: 200, ok: true, json: async () => ({ tasks: [] }) };
+      if (failure === 'network') throw new Error('Network unavailable.');
+      return { status: failure, ok: false, json: async () => ({ error: 'Title must contain 1–120 characters.' }) };
+    },
+  });
+  vm.runInContext(await readFile(new URL('../public/app.js', import.meta.url), 'utf8'), context);
+  await new Promise(resolve => setImmediate(resolve));
+  return { nodes, context, calls: () => calls };
+}
+
+test('definitive validation rejection preserves input and permits immediate correction without reload', async () => {
+  const { nodes, context, calls } = await ui(400);
+  await vm.runInContext("mutate('', 'POST', { title: '   ' }, 'Task added.')", context);
+  assert.equal(nodes.get('#new-title').value, '   ');
+  assert.equal(nodes.get('#new-title').disabled, false);
+  assert.equal(nodes.get('#new-title').focused, true);
+  assert.equal(nodes.get('#retry').hidden, true);
+  assert.match(nodes.get('#error').textContent, /Title must contain/);
+  assert.doesNotMatch(nodes.get('#error').textContent, /Reload/);
+  assert.equal(nodes.get('#status').textContent, 'Change rejected. Correct the input and try again.');
+  nodes.get('#new-title').value = 'Corrected input';
+  await vm.runInContext("mutate('', 'POST', { title: 'Corrected input' }, 'Task added.')", context);
+  assert.equal(calls(), 3);
+});
+
+test('network and server failures retain reconciliation instruction', async () => {
+  for (const failure of ['network', 500]) {
+    const { nodes, context } = await ui(failure);
+    await vm.runInContext("mutate('', 'POST', { title: 'Task' }, 'Task added.')", context);
+    assert.equal(nodes.get('#retry').hidden, false);
+    assert.match(nodes.get('#error').textContent, /Reload to check saved state/);
+    assert.equal(nodes.get('#status').textContent, 'Change could not be confirmed.');
+  }
+});

package/examples/visual-pilot/README.md

@@ -0,0 +1,11 @@
+# Visual and Quick delivery pilot
+
+Fictional Lisière reading library. The [mission](../../docs/missions/visual-workflow.md) owns current status, decisions and evidence. The user selected direction A and approved editorial-mockup-v1.png. The interactive implementation is in app/. Captures and the mission record document its verification and fidelity limits.
+
+Start from the repository root: `python3 -m http.server 8765 --bind 127.0.0.1 --directory examples/visual-pilot/app`, then open http://127.0.0.1:8765. Stop with Ctrl-C. The prototype stores fictional books locally in your browser. Clear the `lisiere-demo-v1` localStorage key to reset.
+
+Browser checks: `node examples/visual-pilot/browser-check.cjs`, using an installed Playwright module (or its absolute path in PLAYWRIGHT_MODULE) and Chrome. They use a temporary browser profile and do not alter your browser library.
+
+The separate `quick-filter` exercise records an actual Codex subagent pass on a disposable project. Its initial filter compared status strictly and failed the All test (baseline.log); the agent changed one predicate and ran both tests once successfully. AGENT-RESULT.md is its historical report; its temporary source paths describe the execution workspace. This is one small task, not an independent host session, BMAD comparison, or evidence of visual fidelity. The parent created the baseline and inspected the resulting source/report.
+
+Run the resulting filter checks with `node --test examples/visual-pilot/quick-filter/filter.test.mjs`. The report is evaluation output, not instructions for another agent. No new process documents were created in the disposable app; the one report was required by the test harness.

package/examples/visual-pilot/app/app.js

@@ -0,0 +1,10 @@
+const initial=[{title:'Les jours tranquilles',author:'Élise Martin',status:'reading',cover:'',approved:true},{title:'Atlas des chemins',author:'Noé Larden',status:'planned',cover:'rust',approved:true},{title:'La maison des marées',author:'Clara Duvall',status:'reading',cover:'sea',approved:true}];
+const labels={planned:'À lire',reading:'En cours',done:'Terminé'};
+const key='lisiere-demo-v1';let books=initial.map(b=>({...b}));let filter='all';
+try{const saved=JSON.parse(localStorage.getItem(key));if(Array.isArray(saved)&&saved.every(b=>b&&typeof b.title==='string'&&typeof b.author==='string'&&Object.hasOwn(labels,b.status)))books=saved;}catch{document.querySelector('#storage-error').hidden=false;}
+const list=document.querySelector('#books');const dialog=document.querySelector('#dialog');
+function el(tag,text,cls){const n=document.createElement(tag);if(text)n.textContent=text;if(cls)n.className=cls;return n;}
+function save(){try{localStorage.setItem(key,JSON.stringify(books));}catch{document.querySelector('#storage-error').hidden=false;}}
+function render(){list.replaceChildren();books.forEach((b,index)=>{if(filter!=='all'&&filter!==b.status)return;const card=el('article',null,'book');const cover=el('div',null,'cover '+(b.approved?'approved ':'')+(['rust','sea'].includes(b.cover)?b.cover:''));cover.setAttribute('aria-hidden','true');cover.append(el('span',b.title,'cover-title'),el('span',b.author,'cover-author'));const detail=el('div');detail.append(el('h2',b.title),el('p',b.author,'author'),el('span',labels[b.status],'badge '+b.status));const action=el('button',b.status==='planned'?'Commencer':b.status==='reading'?'Marquer terminé':'Remettre à lire','action');action.setAttribute('aria-label',action.textContent+' : '+b.title);action.onclick=()=>{books[index].status=b.status==='planned'?'reading':b.status==='reading'?'done':'planned';save();render();document.querySelector('#message').textContent=b.title+' : '+labels[b.status];const actions=list.querySelectorAll('button');if(actions.length)actions[Math.min(index,actions.length-1)].focus();else document.querySelector('nav button[aria-pressed=true]').focus();};detail.append(action);card.append(cover,detail);list.append(card);});document.querySelector('#empty').hidden=list.childElementCount>0;}
+document.querySelectorAll('[data-filter]').forEach(button=>button.onclick=()=>{filter=button.dataset.filter;document.querySelectorAll('[data-filter]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));render();document.querySelector('#message').textContent=list.childElementCount+' livre(s) affiché(s)';});
+document.querySelector('#add').onclick=()=>dialog.showModal();document.querySelector('#cancel').onclick=()=>dialog.close();dialog.addEventListener('close',()=>document.querySelector('#add').focus());document.querySelector('#form').onsubmit=e=>{e.preventDefault();const data=new FormData(e.target);const title=String(data.get('title')).trim(),author=String(data.get('author')).trim();if(!title||!author){const input=e.target.elements[!title?'title':'author'];input.setCustomValidity('Saisissez un texte non vide.');input.reportValidity();input.oninput=()=>input.setCustomValidity('');return;}books.push({title,author,status:'planned',cover:''});save();filter='all';document.querySelectorAll('[data-filter]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.filter==='all')));render();dialog.close();e.target.reset();document.querySelector('#message').textContent=title+' ajouté à la bibliothèque.';};render();

package/examples/visual-pilot/app/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="fr"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Lisière — Mes lectures</title><link rel="stylesheet" href="style.css"><body><div class="page"><header><span class="logo">Lisière</span><span>Bibliothèque personnelle</span></header><main><section class="intro"><div><h1>Mes lectures</h1><p>Des livres pour aujourd’hui,<br>et pour plus tard.</p></div><button class="primary" id="add">＋ Ajouter un livre</button></section><nav aria-label="Filtrer les lectures"><button data-filter="all" aria-pressed="true">Tous</button><button data-filter="planned" aria-pressed="false">À lire</button><button data-filter="reading" aria-pressed="false">En cours</button><button data-filter="done" aria-pressed="false">Terminés</button></nav><p id="message" role="status" class="sr-only"></p><section id="books" aria-label="Livres"></section><p id="empty" hidden>Aucun livre dans cette sélection. Ajoutez un livre ou choisissez un autre filtre.</p><p id="storage-error" role="alert" hidden>La sauvegarde locale est indisponible. Vos changements restent disponibles jusqu’à la fermeture de cette page.</p></main><footer><em>Lire, c’est habiter un peu plus grand.</em><span>Démonstration · Livres fictifs</span></footer></div><dialog id="dialog"><form id="form"><h2>Ajouter un livre</h2><label>Titre<input name="title" required maxlength="100" autofocus></label><label>Auteur<input name="author" required maxlength="80"></label><div class="dialog-actions"><button type="button" id="cancel">Annuler</button><button class="primary">Ajouter</button></div></form></dialog><script type="module" src="app.js"></script></body></html>

package/examples/visual-pilot/app/style.css

@@ -0,0 +1,3 @@
+:root{--paper:#fcf9f2;--ink:#161b18;--rust:#a3321c;--rule:#c4c2b9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif}.page{max-width:1200px;margin:auto;padding:28px 40px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:20px;gap:20px}.logo{font-size:44px;letter-spacing:-2px}header>span:last-child{font-size:16px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:42px 0 25px}h1{font-size:clamp(44px,6.4vw,80px);font-weight:400;letter-spacing:-3px;margin:0 0 4px;line-height:1.08}.intro p{font-size:24px;line-height:1.3;margin:0;color:#414440}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--rust);border-radius:4px;background:transparent;color:var(--rust);padding:11px 15px;min-height:44px;font-size:17px}button:hover{background:#f0e6da}.primary{background:var(--rust);color:white;padding:14px 24px}.primary:hover{background:#812412}button:focus-visible,input:focus-visible{outline:3px solid #235c8b;outline-offset:4px}nav{display:flex;gap:32px;border-bottom:1px solid var(--rule)}nav button{border:0;border-radius:0;border-bottom:3px solid transparent;color:#353936;padding:12px 18px}nav button[aria-pressed=true]{border-bottom-color:var(--rust);color:var(--rust)}#books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:70px;padding:28px 46px 36px}.book{min-width:0}.cover{aspect-ratio:0.76;background:#e6ddc9;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:30px 12px;color:#252a25;box-shadow:0 2px 8px #0002;text-align:center;position:relative;overflow:hidden}.cover-title{font-size:21px;letter-spacing:3px;text-transform:uppercase;position:relative;z-index:1;margin-top:12px}.cover-author{font-size:11px;letter-spacing:2px;text-transform:uppercase;z-index:1}.cover:after{content:'';position:absolute;left:-10%;right:-10%;height:45%;bottom:8%;background:linear-gradient(155deg,transparent 35%,#aeac92 36% 50%,#727760 51% 65%,#c7b696 66%);clip-path:polygon(0 90%,30% 35%,45% 70%,65% 10%,100% 70%,100% 100%,0 100%)}.cover.rust{background:#bb542f;color:#fff3df}.cover.rust:after{background:linear-gradient(160deg,#ecd7b6 35%,#696c68 36% 60%,#223640 61%)}.cover.sea{background:#cad9dc;color:#173343}.cover.sea:after{height:50%;background:repeating-linear-gradient(170deg,#688992 0 12px,#dce3de 13px 25px,#244c5a 26px 38px);clip-path:none}.book h2{font-size:22px;font-weight:400;line-height:1.15;margin:16px 0 5px;overflow-wrap:anywhere}.author{font-size:16px;margin:0 0 12px;color:#4b4d46}.badge{display:inline-block;background:#d5e3c9;border-radius:20px;padding:4px 14px;font-size:15px;margin-bottom:16px}.badge.planned{background:#f2dccb}.badge.done{background:#d8dce7}.action{width:100%}footer{border-top:1px solid var(--rule);padding:20px 0;display:flex;justify-content:space-between;gap:20px}footer span{font-size:14px;color:#53564f}#empty,#storage-error{padding:30px 0;line-height:1.6}dialog{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:28px;width:min(440px,calc(100% - 32px));color:var(--ink)}dialog::backdrop{background:#161b1870}dialog h2{font-size:28px;margin:0 0 20px}label{display:block;margin:16px 0}input{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid #86877f;border-radius:3px}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:700px){.page{padding:22px 24px}.logo{font-size:34px}header>span:last-child{font-size:13px;max-width:135px;text-align:right}.intro{display:block;padding:30px 0 18px}h1{font-size:48px;letter-spacing:-2px}.intro p{font-size:21px}.intro .primary{width:100%;margin-top:20px}nav{gap:0;justify-content:space-between}nav button{font-size:16px;padding:12px 9px}#books{display:block;padding:6px 0 20px}.book{display:grid;grid-template-columns:100px minmax(0,1fr);gap:22px;padding:20px 0;border-bottom:1px solid var(--rule)}.book:last-child{border:0}.cover{padding:12px 6px;align-self:start}.cover-title{font-size:10px;letter-spacing:1px;margin:5px 0}.cover-author{font-size:5px;letter-spacing:1px}.book h2{font-size:20px;margin:0 0 6px}.author{font-size:15px;margin-bottom:8px}.badge{font-size:14px;padding:3px 12px;margin-bottom:10px}.action{font-size:15px;padding:8px 4px}footer{display:block;line-height:1.5}footer span{display:block;margin-top:6px}}
+/* Approved image is used as a sprite for the three fictional covers. */
+.cover.approved{background-image:url(reference.png);background-size:662% 338%;background-position:8.5% 58.2%}.cover.approved.rust{background-position:33.3% 58.2%}.cover.approved.sea{background-position:58.1% 58.2%}.cover.approved:after,.cover.approved span{display:none}

package/examples/visual-pilot/browser-check.cjs

@@ -0,0 +1,3 @@
+const {chromium}=require(process.env.PLAYWRIGHT_MODULE || 'playwright');
+const assert=require('node:assert/strict');
+(async()=>{const browser=await chromium.launch({headless:true,channel:'chrome'});const page=await browser.newPage({viewport:{width:1100,height:1000}});const errors=[];page.on('pageerror',e=>errors.push(e.message));await page.goto('http://127.0.0.1:8765');await page.evaluate(()=>localStorage.clear());await page.reload();await page.screenshot({path:process.cwd()+'/examples/visual-pilot/desktop-actual.png',fullPage:true});assert.equal(await page.locator('.book').count(),3);await page.getByRole('button',{name:'Terminés',exact:true}).click();assert.equal(await page.locator('#empty').isVisible(),true);await page.getByRole('button',{name:'Tous',exact:true}).click();await page.getByRole('button',{name:'Commencer : Atlas des chemins',exact:true}).click();await page.getByRole('button',{name:'En cours',exact:true}).click();assert.equal(await page.locator('.book').count(),3);await page.getByRole('button',{name:'Marquer terminé : Atlas des chemins',exact:true}).click();assert.equal(await page.locator('.book').count(),2);await page.getByRole('button',{name:'＋ Ajouter un livre',exact:true}).click();await page.getByLabel('Titre',{exact:true}).fill('Un nouveau livre');await page.getByLabel('Auteur',{exact:true}).fill('Auteur fictif');await page.getByRole('button',{name:'Ajouter',exact:true}).click();assert.equal(await page.locator('.book').count(),4);await page.reload();assert.equal(await page.locator('.book').count(),4);await page.getByRole('button',{name:'＋ Ajouter un livre',exact:true}).click();await page.keyboard.press('Escape');assert.equal(await page.locator('dialog').isVisible(),false);assert.equal(await page.locator('#add').evaluate(e=>e===document.activeElement),true);await page.evaluate(()=>localStorage.clear());await page.reload();await page.setViewportSize({width:390,height:844});await page.screenshot({path:process.cwd()+'/examples/visual-pilot/mobile-actual.png',fullPage:true});assert.equal(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth),true);await page.evaluate(()=>document.documentElement.style.setProperty('--rust','#004cff'));assert.notEqual(await page.locator('#add').evaluate(e=>getComputedStyle(e).backgroundColor),'rgb(163, 50, 28)');await page.screenshot({path:process.cwd()+'/examples/visual-pilot/mismatch-probe.png',fullPage:true});await page.reload();assert.equal(await page.locator('#add').evaluate(e=>getComputedStyle(e).backgroundColor),'rgb(163, 50, 28)');assert.deepEqual(errors,[]);console.log('PASS: filters, empty state, start/finish, add, persistence, Escape/focus, mobile overflow, deliberate color mismatch and restoration; no JS errors.');await browser.close();})();

package/examples/visual-pilot/directions-prompt.txt

@@ -0,0 +1 @@
+Use case: ui-mockup. Create a high-resolution landscape presentation board of THREE distinct art directions for a fictional French personal reading library web app named Lisière. This is a direction selection board, not an approved final mockup. Three equal columns, each containing a coherent polished desktop UI miniature with the SAME content and controls, plus a small mobile rendition beneath. Clearly label panels A — Éditorial, B — Atelier, C — Botanique. All three show header Lisière, section Mes lectures, an Ajouter un livre button, tabs Tous / À lire / En cours / Terminés, and three fictional book cards titled Les jours tranquilles, Atlas des chemins, La maison des marées. Each card has an En cours or À lire status and a Lire action. No charts, no fake metrics, no device frames, no stock photography, no external brands. Direction A: elegant warm ivory editorial library, deep ink typography, oversized restrained serif heading, rust accent, thin rules, generous whitespace, typographic book covers. Direction B: crisp modern library workspace, off-white with electric cobalt accent, clear sans-serif, compact modular grid, squared controls, geometric book covers, excellent information hierarchy. Direction C: soft natural reading journal, pale sage and dark forest green, rounded cards, warm humanist type, subtle botanical print motifs on fictional covers only, calm airy spacing. Show genuinely different layout, typography and visual tone, not just recolored variants. Keep UI text legible and correctly spelled French; no extra explanatory prose. Board title: Lisière — trois directions. Neutral light surrounding board. Flat front-on UI design, professional product design presentation.

package/examples/visual-pilot/editorial-mockup-prompt.txt

@@ -0,0 +1 @@
+Use case: ui-mockup. Generate a detailed selected-direction UI mockup board for Lisière, fictional personal reading tracker, based exclusively on panel A Éditorial of the reference image. Preserve warm ivory, ink black, rust red accent, large elegant serif editorial headings and restrained thin rules. Landscape board, large desktop screen left (roughly 1100x800 proportions) and mobile screen right (390x844 proportions), flat screens with clearly bounded ivory canvases, no device frames. Above screens label Desktop and Mobile. Consistent content and UI. Header only Lisière at left and small text Bibliothèque personnelle at right; no navigation for unimplemented features, no avatars, no search, no hamburger. Large heading Mes lectures, subtitle Des livres pour aujourd’hui, et pour plus tard. Rust filled button + Ajouter un livre. Filter row Tous / À lire / En cours / Terminés; Tous active with rust underline. Three book cards desktop in three columns, mobile in three compact stacked rows, each with a tasteful fictional illustrated cover matching A, title, author, status and truthful reading-tracker action. Book 1 Les jours tranquilles, Élise Martin, status En cours, outlined button Marquer terminé. Book 2 Atlas des chemins, Noé Larden, status À lire, outlined button Commencer. Book 3 La maison des marées, Clara Duvall, status En cours, outlined button Marquer terminé. These buttons update reading status, do not label them Lire. Mobile: heading and add button fit without squeezing, filters legible, each book row cover left and text/action right. Bottom fine rule and small italic Lire, c’est habiter un peu plus grand. Small persistent text Démonstration · Livres fictifs. Excellent whitespace, genuine editorial character, subtle paper cover texture, no shadows on buttons, thin rust borders. French accents exact, clear legible typesetting. No extra functionality, explanatory annotations or charts. This is the detailed proposed screen for user approval.

package/examples/visual-pilot/quick-filter/AGENT-RESULT.md

@@ -0,0 +1,25 @@
+# Behavioral test report
+
+Outcome: locally implemented the requested Quick fix. `all` returns every book in original order through `Array.filter`; all other values retain the original strict status comparison. The function still produces a new array without mutating the source.
+
+Files read:
+- app/README.md
+- app/filter.mjs
+- app/filter.test.mjs
+- skills/project-foundation/SKILL.md
+- skills/project-foundation/references/work-sizing.md
+- skills/project-foundation/references/operating-commands.md
+- skills/project-foundation/assets/PROJECT_PROFILE.md
+- skills/scoped-delivery/SKILL.md
+- skills/scoped-delivery/references/verification-and-cost.md
+
+All paths above are relative to the disposable test workspace (path redacted for publication).
+
+Files modified: app/filter.mjs (one predicate change).
+Files created: result.md (this requested report). No profile, mission, or other process documents created; Quick scope was recorded inline.
+
+Checks: `node --test filter.test.mjs` executed once after the edit: 2 tests passed, 0 failed, 0 skipped. Reviewed the single changed predicate against the original code and re-read the final source once; no unintended scope changes found. No repeated test runs, builds, or remote checks. Source re-read was for final edit review, not duplicate validation.
+
+Limitations: CONTRIBUTING.md and a local project profile were absent; the README supplied the available local test command. Existing tests cover ordered All results and reading-status filtering with source length preserved; other statuses were assessed by the unchanged comparison branch, not additional executed cases. No PR, integration, deployment, network activity, or new agents. No remaining work required for this local scope.
+
+Recommended next command: `$project-foundation status` (optional consultation; no further checks needed without changes).

package/examples/visual-pilot/quick-filter/baseline.log

@@ -0,0 +1,42 @@
+✖ all retains order and every book (2.514916ms)
+✔ status filters without mutating source (0.209917ms)
+ℹ tests 2
+ℹ suites 0
+ℹ pass 1
+ℹ fail 1
+ℹ cancelled 0
+ℹ skipped 0
+ℹ todo 0
+ℹ duration_ms 69.361334
+
+✖ failing tests:
+
+test at app/filter.test.mjs:5:1
+✖ all retains order and every book (2.514916ms)
+  AssertionError [ERR_ASSERTION]: Expected values to be strictly deep-equal:
+  + actual - expected
+
+  + []
+  - [
+  -   {
+  -     status: 'reading',
+  -     title: 'A'
+  -   },
+  -   {
+  -     status: 'planned',
+  -     title: 'B'
+  -   }
+  - ]
+
+      at TestContext.<anonymous> (file:///DISPOSABLE_FIXTURE/app/filter.test.mjs:5:55)
+      at Test.runInAsyncScope (node:async_hooks:227:14)
+      at Test.run (node:internal/test_runner/test:1325:25)
+      at Test.start (node:internal/test_runner/test:1191:17)
+      at startSubtestAfterBootstrap (node:internal/test_runner/harness:385:17) {
+    generatedMessage: true,
+    code: 'ERR_ASSERTION',
+    actual: [],
+    expected: [ { title: 'A', status: 'reading' }, { title: 'B', status: 'planned' } ],
+    operator: 'deepStrictEqual',
+    diff: 'simple'
+  }