Add a public signature registry and refresh manifesto sections

.impeccable/critique/2026-06-24T11-10-02Z__app-src-pages-index-astro.md

@@ -0,0 +1,94 @@
+---
+target: app/src/pages/index.astro
+total_score: 34
+p0_count: 0
+p1_count: 0
+timestamp: 2026-06-24T11-10-02Z
+slug: app-src-pages-index-astro
+---
+# Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 3 | Signing affordances are clear; animated reveal needed to keep content visible during load. |
+| 2 | Match System / Real World | 4 | The citable-standard metaphor fits the manifesto well. |
+| 3 | User Control and Freedom | 3 | Anchor links and GitHub exit are clear; long-scroll orientation depends on desktop index. |
+| 4 | Consistency and Standards | 4 | Tokens, spacing, and document sections are coherent. |
+| 5 | Error Prevention | 3 | Mobile overflow risk could cause accidental horizontal panning. |
+| 6 | Recognition Rather Than Recall | 3 | Values and principles are strongly structured; signature wall needed more robust mobile wrapping. |
+| 7 | Flexibility and Efficiency | 3 | Desktop sticky index works; mobile relies on linear reading. |
+| 8 | Aesthetic and Minimalist Design | 4 | Distinct standard/document register without generic AI landing tropes. |
+| 9 | Error Recovery | 3 | External signing path is explicit; no major in-page recovery issues found. |
+| 10 | Help and Documentation | 4 | GitHub/signing links and manifesto structure are direct. |
+| **Total** | | **34/40** | **Strong, with responsive robustness fixes applied.** |
+
+# Anti-Patterns Verdict
+
+The surface does not read as generic AI slop. The strongest qualities are the restrained black-and-blue document system, the citable structure, and the refusal of purple gradients, glass cards, and metric hero tropes.
+
+Deterministic scan: clean. `detect.mjs --json app/src/pages/index.astro app/src/components app/src/styles/sections app/src/styles/tokens.css` returned `[]`.
+
+Browser evidence: Playwright screenshots and DOM measurements found mobile horizontal overflow before fixes, mainly from full-width signature cards and focus panels with gutter bleed. Immediate screenshots also showed hero copy could be temporarily invisible while reveal animations completed.
+
+# Overall Impression
+
+The page already has a strong product-positioned brand register: a manifesto as a published standard. The biggest opportunity was not reinvention, but hardening: keep the visual conviction while removing fragile responsive behavior and animation-gated readability.
+
+# What's Working
+
+- The cover has a confident typographic identity and a single clear signing CTA.
+- The document layout makes the manifesto feel citable rather than promotional.
+- The palette is restrained but specific: ice paper, navy ink, electric blue accent.
+
+# Priority Issues
+
+## [P2] Animation-gated hero readability
+
+Why it matters: screenshots, slow tabs, or paused animations could show blank hero/CTA text during the first load moment.
+
+Fix: keep cover words visible by default and animate transform only.
+
+Status: fixed in `app/src/styles/sections/cover.css`.
+
+## [P2] Mobile horizontal overflow
+
+Why it matters: a manifesto should feel stable and readable on phones; horizontal panning undermines trust.
+
+Fix: remove horizontal focus-panel bleed, add `min-width: 0` / `max-width: 100%` to grid and panel children, and make signature cards fluid.
+
+Status: fixed in `values.css`, `principles.css`, `value-art.css`, `terminal.css`, and `signature.css`.
+
+## [P3] Display typography exceeded the skill ceiling
+
+Why it matters: the hero was visually strong but slightly over-scaled and tightly tracked, risking cramped letterforms and lower polish.
+
+Fix: lower the desktop and mobile clamp ceiling and relax letter-spacing to `-0.035em`.
+
+Status: fixed in `cover.css` and value folio spacing.
+
+## [P3] Values intro copy was awkward
+
+Why it matters: small grammar defects reduce authority on a standards page.
+
+Fix: rewrite the heading and lede to cleaner English.
+
+Status: fixed in `Values.astro`.
+
+# Persona Red Flags
+
+**First-time AI-assisted developer**: before the fix, the mobile page could feel horizontally unstable in the signature wall. That is now fixed; the main remaining risk is that the page is long and linear without the desktop index.
+
+**Engineering lead evaluating credibility**: grammar in the values intro and over-tight hero type weakened authority. Both were tightened.
+
+**Keyboard-only reader**: focus states and skip link are present. The critique did not find a blocking keyboard issue in the inspected surface.
+
+# Minor Observations
+
+- The decorative watermark still extends beyond the viewport visually on mobile, but it no longer creates page scroll width.
+- Desktop sticky index remains hidden on mobile; acceptable for now, but a compact section jumper could improve long-scroll navigation.
+- Terminal/code panels intentionally keep internal horizontal scrolling for preformatted code.
+
+# Questions to Consider
+
+- Should mobile get a compact section index, or is the manifesto intended to read strictly top-to-bottom there?
+- Should the signature wall be shortened or progressively expanded on mobile to reduce the very long final section?

AGENTS.md

@@ -0,0 +1,99 @@
+# AGENTS.md
+
+This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.
+
+## Ce que c'est
+
+Manifesto for AI-Driven Development — Astro 4 SSR app, dockerisée, avec store
+en mémoire (signatures, votes, feedback). Le worktree d'origine contenait un
+seul HTML monolithique : il a été migré vers `app/` (Astro + TypeScript +
+Vitest + Playwright). La migration est terminée — l'app Astro est désormais sa
+propre source de vérité (plus de parité 1:1 avec l'ancien `index.html`).
+
+Cousin de `../website/` (Astro, ai-driven-dev.fr) mais **totalement
+indépendant** : ne partage aucun asset ni config. Ne pas importer depuis
+`../website`.
+
+## Lancer / prévisualiser
+
+```bash
+# Dev (HMR)
+cd app && npm install && npm run dev
+
+# Production locale
+cd app && npm run build && PORT=4321 HOST=127.0.0.1 node ./dist/server/entry.mjs
+
+# Docker
+cd app && docker compose up -d --build
+# → http://localhost:4321
+```
+
+## Tests
+
+```bash
+cd app
+npm test                  # Vitest unit (store)
+npx playwright test       # Playwright e2e (api, sign, vote, visual)
+```
+
+## Architecture
+
+```
+app/
+├── Dockerfile, compose.yaml, .dockerignore
+├── astro.config.mjs       SSR + @astrojs/node standalone
+├── src/
+│   ├── content/           Données éditoriales : principles.ts, values.ts, terms.ts, seeds.ts
+│   ├── styles/
+│   │   ├── tokens.css     :root tokens oklch (uniquement)
+│   │   └── sections/*.css Styles par section (cover, values, principles, …)
+│   ├── lib/
+│   │   ├── store/         Interface + impl mémoire + provider singleton
+│   │   ├── api/client.ts  Fetch helpers typés (sign, vote, feedback, count)
+│   │   └── observers.ts   Reveal / terminal / value-art / parallax
+│   ├── components/
+│   │   ├── layout/Page.astro
+│   │   ├── sections/{Cover,Preamble,Values,Principles,Signature}.astro
+│   │   ├── values/{ValueArt,Quadrant}.astro
+│   │   ├── principles/{PrincipleGrid,PrincipleCard}.astro
+│   │   ├── terminal/TerminalAnim.astro
+│   │   ├── signature/{SignDialog,SignatureWall}.astro
+│   │   ├── voting/{VoteWidget,DownvoteDialog}.astro
+│   │   ├── tweaks/TweaksPanel.astro
+│   │   └── ClientApp.astro    Single client island (hydratation tweaks + sign + vote + observers)
+│   └── pages/
+│       ├── index.astro    Composition (≤ 60 LOC)
+│       └── api/
+│           ├── signatures.ts  GET count, POST sign
+│           ├── votes.ts       POST +1/-1
+│           └── feedback.ts    POST reason + alternative
+└── tests/
+    ├── check-component-loc.sh AC-6 — LOC budget
+    └── e2e/{api,sign,vote,visual}.spec.ts
+```
+
+## Règles d'architecture (voir `aidd_docs/rules/architecture/`)
+
+- `astro-components.md` — `.astro` ≤ 200 LOC, `index.astro` ≤ 60 LOC, VoteWidget réutilisé.
+- `api-routes.md` — JSON in/out, validation stricte, contrats versionnés.
+- `store-provider.md` — interface-first, swappable, framework-agnostic.
+- `styles-tokens.md` — `oklch()` uniquement, pas de hex/HSL hors `tokens.css`.
+- `docker.md` — multi-stage Node 22 alpine, non-root, port 4321.
+- `testing.md` — Vitest unit + Playwright e2e + régression visuelle du cover ≤ 1 % (snapshot Astro, plus de baseline).
+
+## Conventions
+
+- Couleurs : `oklch()` exclusivement, via variables CSS (`var(--accent)` etc.).
+- Données éditoriales : tableaux TypeScript dans `src/content/`, pas de hard-code dans le HTML.
+- Tweaks panel : écrit sur `documentElement` (indirection préservée).
+- Edit mode parent iframe : sentinelle `/*EDITMODE-BEGIN*/…/*EDITMODE-END*/`
+  préservée dans `src/components/ClientApp.astro` (ne pas renommer).
+
+## Édition du contenu
+
+- Ajouter/modifier un principe : `app/src/content/principles.ts`.
+- Ajouter/modifier une valeur : `app/src/content/values.ts` (le champ `quad` alimente le quadrant 2×2 de `Quadrant.astro`) + ASCII art dans `ValueArt.astro`.
+- Ajouter/modifier un terminal : `app/src/content/terms.ts`.
+- Modifier la palette par défaut : `app/src/styles/tokens.css`.
+
+Manifeste monolingue : anglais uniquement. Pas d'I18N.

PRODUCT.md

@@ -0,0 +1,33 @@
+# Product
+
+## Register
+
+brand
+
+## Users
+
+Software practitioners, engineering leads, product builders, and AI-assisted developers who want a shared standard for building software with AI while keeping human judgment, craft, and responsibility in the loop. They arrive to read, cite, share, or publicly sign the manifesto.
+
+## Product Purpose
+
+The site publishes the canonical Manifesto for AI-Driven Development, frames its four values and twelve principles, and turns agreement into a public Git-based signature. Success means visitors understand the standard quickly, trust the text enough to share or cite it, and can sign without ambiguity.
+
+## Brand Personality
+
+Precise, principled, and developer-native. The interface should feel like a citable standard with enough visual conviction to be memorable, not like a SaaS landing page or a generic AI tool.
+
+## Anti-references
+
+Avoid AI-product cliché: purple gradients, glass panels, hero metric blocks, generic dashboard chrome, decorative card grids, and empty "AI magic" language. Avoid editorial affectation that makes the manifesto feel like a magazine instead of a standard. Avoid hiding the text behind spectacle.
+
+## Design Principles
+
+- Treat the manifesto as the artifact: make the text readable, durable, and easy to cite.
+- Signal conviction without hype: strong hierarchy, restrained interaction, no generic AI theatrics.
+- Make signing feel public and intentional, not like a marketing conversion trick.
+- Keep developer trust high: visible structure, direct copy, clear GitHub affordances.
+- Preserve accessibility as part of the standard: keyboard paths, reduced motion, robust contrast, and responsive reading.
+
+## Accessibility & Inclusion
+
+Target WCAG AA for text contrast and interaction states. Motion must respect `prefers-reduced-motion`; the manifesto must remain readable with animations disabled, on narrow screens, and for keyboard-only users.

app/src/components/definition/VersusSchemas.astro

@@ -8,7 +8,7 @@
   <!-- 1 — METHOD -->
   <figure class="vsch">
     <figcaption class="vsch-cap">Method</figcaption>
-    <svg class="vsch-svg" viewBox="0 0 300 196" role="img"
+    <svg class="vsch-svg" viewBox="0 0 300 214" role="img"
       aria-label="AIDD moves plan, build, review gate, prod and loops back to iterate; vibe coding jumps prompt straight to prod, then regenerates.">
       <defs>
         <marker id="m1a" markerWidth="8" markerHeight="8" refX="5.5" refY="3" orient="auto"><path d="M0 .5 L6 3 L0 5.5" class="ah-a"/></marker>
@@ -33,15 +33,15 @@
       <text x="196" y="92" class="lbl lbl--a">review</text>
       <text x="258" y="88" class="lbl">prod</text>
 
-      <line x1="16" y1="112" x2="284" y2="112" class="rule-faint"/>
+      <line x1="16" y1="116" x2="284" y2="116" class="rule-faint"/>
 
       <!-- Vibe track -->
-      <text x="20" y="132" class="tag tag--m">VIBE CODING</text>
-      <path d="M76 150 H224" class="seg" marker-end="url(#m1m)"/>
-      <circle cx="70" cy="150" r="4.5" class="stn-m"/>
-      <circle cx="230" cy="150" r="4.5" class="stn-m"/>
-      <text x="70" y="144" class="lbl">prompt</text>
-      <text x="230" y="144" class="lbl">prod</text>
+      <text x="20" y="142" class="tag tag--m">VIBE CODING</text>
+      <path d="M76 164 H224" class="seg" marker-end="url(#m1m)"/>
+      <circle cx="70" cy="164" r="4.5" class="stn-m"/>
+      <circle cx="230" cy="164" r="4.5" class="stn-m"/>
+      <text x="70" y="186" class="lbl">prompt</text>
+      <text x="230" y="186" class="lbl">prod</text>
     </svg>
     <p class="vsch-note">Do not care about code quality.</p>
   </figure>

app/src/components/layout/SpecIndex.astro

@@ -16,7 +16,7 @@ const count = (await getCollection('signatories')).length;
       </svg>
       <span class="si-word">AIDD</span>
     </span>
-    <span class="si-ver">v1.0</span>
+    <span class="si-ver">v1.1</span>
   </div>
   <nav class="si-nav">
     <a class="si-link" href="#definition" data-spy="definition">Definition</a>

app/src/components/sections/Cover.astro

@@ -13,7 +13,7 @@
   <div class="cover-rule cover-rule-bottom" aria-hidden="true"></div>
 
   <div class="cover-stage">
-    <p class="cover-std reveal-word" style="--d:.02s">AIDD <span class="cs-sep">·</span> Manifesto <span class="cs-sep">·</span> v1.0 <span class="cs-sep">·</span> 2026</p>
+    <p class="cover-std reveal-word" style="--d:.02s">AIDD <span class="cs-sep">·</span> Manifesto <span class="cs-sep">·</span> v1.1 <span class="cs-sep">·</span> 2026</p>
 
     <h1 class="cover-title">
       <span class="line line-1"><span class="word reveal-word" style="--d:.12s">The</span></span>
@@ -28,9 +28,24 @@
     <div class="cover-foot reveal-word" style="--d:.72s">
       <p class="cover-lede">A standard for building software in the age of AI — written by developers, for developers.</p>
       <nav class="cover-cta" aria-label="Manifesto entry points">
-        <a class="cover-link cover-link-primary" href="#sign">Sign the manifesto</a>
+        <a class="cover-link cover-link-primary" href="#sign">
+          <span class="cover-link-icon cover-link-icon-aidd" aria-hidden="true">
+            <svg viewBox="0 0 100 100" focusable="false">
+              <line x1="8" y1="92" x2="28" y2="62" stroke="currentColor" stroke-width="14" stroke-linecap="round" />
+              <circle cx="42" cy="41" r="10" fill="currentColor" />
+              <line x1="60" y1="8" x2="92" y2="92" stroke="currentColor" stroke-width="22" stroke-linecap="round" />
+            </svg>
+          </span>
+          <span>Sign the manifesto</span>
+        </a>
         <a class="cover-link" href="https://github.com/ai-driven-dev/manifest" target="_blank" rel="noopener">
-          View on GitHub <span class="cl-ext" aria-hidden="true">↗</span>
+          <span class="cover-link-icon" aria-hidden="true">
+            <svg viewBox="0 0 16 16" focusable="false">
+              <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+            </svg>
+          </span>
+          <span>View on GitHub</span>
+          <span class="cl-ext" aria-hidden="true">↗</span>
         </a>
       </nav>
     </div>

app/src/components/sections/Signature.astro

@@ -1,20 +1,39 @@
 ---
+import { getCollection } from 'astro:content';
 import SignButton from '~/components/signature/SignButton.astro';
 import SignatureWall from '~/components/signature/SignatureWall.astro';
+
+const count = (await getCollection('signatories')).length;
+const registryCount = String(count).padStart(3, '0');
 ---
 <section id="sign" class="signature">
-  <div class="chapter-open reveal">
-    <div class="chapter-body">
-      <h2>Be part of the movement!</h2>
-      <div class="chapter-lede">
-        <svg class="fleuron" width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
-          <path d="M22 4 C 28 14, 40 14, 40 22 C 40 30, 28 30, 22 40 C 16 30, 4 30, 4 22 C 4 14, 16 14, 22 4 Z" stroke="currentColor" stroke-width="1" fill="none"/>
-          <circle cx="22" cy="22" r="2" fill="currentColor"/>
-        </svg>
-        <p>
-        Be among the first to sign the <strong>AI-Driven Development Manifesto</strong> and help shape the future of software development.
-        </p>
+  <div class="chapter-open signature-open reveal">
+    <svg class="signature-open-mark" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+      <line class="som-bar-small" x1="8" y1="92" x2="28" y2="62" stroke="currentColor" stroke-width="14" stroke-linecap="round" />
+      <circle class="som-dot" cx="42" cy="41" r="10" fill="currentColor" />
+      <line class="som-bar-big" x1="60" y1="8" x2="92" y2="92" stroke="currentColor" stroke-width="22" stroke-linecap="round" />
+    </svg>
+
+    <div class="chapter-body signature-open-body">
+      <div class="signature-open-copy">
+        <p class="signature-kicker">Public signature registry</p>
+        <h2>Be part of the movement!</h2>
+        <div class="chapter-lede">
+          <svg class="fleuron" width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
+            <path d="M22 4 C 28 14, 40 14, 40 22 C 40 30, 28 30, 22 40 C 16 30, 4 30, 4 22 C 4 14, 16 14, 22 4 Z" stroke="currentColor" stroke-width="1" fill="none"/>
+            <circle cx="22" cy="22" r="2" fill="currentColor"/>
+          </svg>
+          <p>
+          Be among the first to sign the <strong>AI-Driven Development Manifesto</strong> and help shape the future of software development.
+          </p>
+        </div>
       </div>
+
+      <aside class="signature-seal" aria-label={`${count} manifesto signatories`}>
+        <span class="signature-seal-label">AIDD registry</span>
+        <strong>{registryCount}</strong>
+        <span class="signature-seal-caption">{count === 1 ? 'signatory' : 'signatories'}</span>
+      </aside>
     </div>
   </div>
 

app/src/components/sections/Values.astro

@@ -6,13 +6,13 @@ import Icon from '~/components/Icon.astro';
 <section id="values" class="values">
   <div class="chapter-open reveal">
     <div class="chapter-body">
-      <h2> <span class="amp">4 values</span> of the<br> AI-Driven Development</h2>
+      <h2><span class="amp">4 values</span> of<br> AI-Driven Development</h2>
       <div class="chapter-lede">
         <svg class="fleuron" width="44" height="44" viewBox="0 0 44 44" fill="none" aria-hidden="true">
           <path d="M22 4 C 28 14, 40 14, 40 22 C 40 30, 28 30, 22 40 C 16 30, 4 30, 4 22 C 4 14, 16 14, 22 4 Z" stroke="currentColor" stroke-width="1" fill="none"/>
           <circle cx="22" cy="22" r="2" fill="currentColor"/>
         </svg>
-        <p>Despite being non technical, those values will guide you everytime you are using AI to code.</p>
+        <p>These non-technical values guide every AI-assisted coding session.</p>
       </div>
     </div>
   </div>