feat(website): implement public website for PRD v1.0

.attempt.json

@@ -0,0 +1,17 @@
+{
+  "lane": "website",
+  "prd_version": "v1.0",
+  "run_id": "71c6fdc7",
+  "lane_root": "products/website",
+  "dist_dir": "products/website/dist",
+  "tool": "cursor",
+  "agent": "a",
+  "model": "claude-opus-4",
+  "worktree_path": "/Users/chrisklapp/.cursor/worktrees/klappy.dev/edj",
+  "branch": "run/website/prd-v1.0/cursor/a/claude-opus-4/temp",
+  "target_branch": "run/website/prd-v1.0/cursor/a/claude-opus-4/71c6fdc7",
+  "git_head": "165b100f30491448e3cc173eca671cbc485cbd72",
+  "is_detached": false,
+  "registered_at": "2026-01-20T01:05:26.581Z",
+  "runs_dir": "attempts/website/prd-v1.0/_runs/71c6fdc7"
+}

attempts/website/prd-v1.0/_runs/71c6fdc7/ATTEMPT.md

@@ -0,0 +1,58 @@
+# Attempt — Website Lane (Run 71c6fdc7)
+
+## Summary
+
+Built a React-based public website for klappy.dev that implements ODD (Outcome-Driven Development) principles. The site loads content from the manifest.json, renders markdown content, and provides progressive disclosure navigation with 7 or fewer nav items on first load.
+
+## Approach
+
+### Stack
+- **Framework:** React 18 with Vite
+- **Styling:** CSS custom properties implementing visual interface contracts
+- **Routing:** Hash-based routing for deep links
+- **Markdown:** marked library for content rendering
+
+### PRD Requirements Addressed
+
+1. **Load manifest.json** — App fetches `/content/manifest.json` on load and uses resources for navigation and content
+2. **≤7 nav items** — Navigation shows exactly 7 items (Home, What is ODD?, Why This Exists, Projects, Constraints, About Me, FAQ)
+3. **Mobile usable** — Responsive design with hamburger menu for mobile, no horizontal scrolling
+4. **Markdown rendering** — Full markdown support including tables, code blocks, blockquotes
+5. **Deep links** — Hash routing (`#/path/to/content.md`) supports shareable URLs
+6. **Progressive disclosure** — Tier 0/1 content surfaced first, deeper content accessible via navigation
+
+### Visual Interface Contracts Implemented
+
+- **color-system@1.0.0** — Full token implementation including dark mode support
+- **typography@1.0.0** — Modular scale, font families, weights, line heights
+- **spacing@1.0.0** — Base-8 spacing scale with semantic tokens
+
+## Files Created
+
+| File | Purpose |
+|------|---------|
+| `products/website/index.html` | Vite HTML entry point |
+| `products/website/vite.config.js` | Vite configuration for lane build |
+| `products/website/src/main.jsx` | React entry point |
+| `products/website/src/index.css` | Visual interface tokens + base styles |
+| `products/website/src/App.jsx` | Main app with routing and layout |
+| `products/website/src/components/Navigation.jsx` | ≤7 item nav with mobile support |
+| `products/website/src/components/Home.jsx` | Home page with tier-based content cards |
+| `products/website/src/components/ContentPage.jsx` | Markdown renderer with metadata badges |
+
+## Tradeoffs
+
+1. **Hash routing vs History API** — Chose hash routing for simplicity and guaranteed deep link support without server configuration
+2. **CSS-in-JS vs CSS files** — Used inline styles in components for colocation, but global tokens in index.css
+3. **No router library** — Implemented minimal routing to reduce bundle size and complexity
+
+## What Could Be Better
+
+- Add search functionality
+- Implement table of contents for long documents
+- Add syntax highlighting for code blocks
+- Consider adding smooth scroll to anchor links
+
+## Evidence
+
+See `EVIDENCE.md` for screenshots and proof.

attempts/website/prd-v1.0/_runs/71c6fdc7/EVIDENCE.md

@@ -0,0 +1,64 @@
+# Evidence — Website Lane (Run 71c6fdc7)
+
+## Screenshots
+
+### 01-home-desktop.png
+Home page on desktop viewport (1280x800). Shows:
+- Navigation with exactly 7 items
+- Hero section with call-to-action buttons
+- "Start Here" section with Tier 0 content cards
+- "Go Deeper" section with Tier 1 content cards
+
+![Home Desktop](screenshots/01-home-desktop.png)
+
+### 02-odd-page.png
+ODD Manifesto page showing markdown content rendering:
+- Content fetched from `/content/odd/README.md`
+- Proper heading hierarchy
+- Readable typography
+- Metadata badges showing tier and stability
+
+![ODD Page](screenshots/02-odd-page.png)
+
+### 03-home-mobile.png
+Home page on mobile viewport (375x812). Shows:
+- Responsive layout without horizontal scrolling
+- Mobile navigation (hamburger menu visible)
+- Content properly stacked for mobile reading
+
+![Home Mobile](screenshots/03-home-mobile.png)
+
+## PRD Success Criteria Verification
+
+| Criteria | Status | Evidence |
+|----------|--------|----------|
+| First load shows ≤7 nav items | ✅ PASS | Screenshot 01: Navigation shows exactly 7 items |
+| Mobile usable without horizontal scrolling | ✅ PASS | Screenshot 03: Mobile layout fits screen |
+| Canon discoverable without file paths | ✅ PASS | Screenshots show human-readable titles, not paths |
+| No agent instructions in UI | ✅ PASS | Screenshots show no CLI/process language |
+| Deep links work | ✅ PASS | Screenshot 02: Hash URL `#/odd/README.md` loads content |
+| Progressive disclosure tiers | ✅ PASS | Screenshots 01 shows Tier 0/1 content organization |
+
+## Build Output
+
+- Build command: `npm run build -- --lane website`
+- Output directory: `products/website/dist/`
+- Evidence available at: `/_evidence/`
+
+## Deployment URLs
+
+**LIVE DEPLOYMENT VERIFIED:**
+
+- Preview URL: https://website-attempt-test.klappy-dev-website.pages.dev/
+- Evidence URL: https://website-attempt-test.klappy-dev-website.pages.dev/_evidence/
+- Cloudflare Project: `klappy-dev-website`
+
+### Verification Results
+
+| Requirement | Status | Details |
+|-------------|--------|---------|
+| Branch pushed | ✅ PASS | Commit d1be3bd pushed to origin |
+| Cloudflare builds | ✅ PASS | klappy-dev-website project deployed |
+| App loads | ✅ PASS | HTTP 200 at preview URL |
+| /_evidence/ works | ✅ PASS | HTTP 200, index.html/json served |
+| Screenshots present | ✅ PASS | 3 screenshots in evidence |

attempts/website/prd-v1.0/_runs/71c6fdc7/META.json

@@ -0,0 +1,22 @@
+{
+  "lane": "website",
+  "prd_version": "v1.0",
+  "epoch_id": "E0003-evidence-first-era",
+  "run_id": "71c6fdc7",
+  "attempt": null,
+  "lane_root": "products/website",
+  "dist_dir": "products/website/dist",
+  "tool": "cursor",
+  "agent": "a",
+  "model": "claude-opus-4",
+  "worktree_path": "/Users/chrisklapp/.cursor/worktrees/klappy.dev/edj",
+  "branch": "run/website/prd-v1.0/cursor/a/claude-opus-4/temp",
+  "target_branch": "run/website/prd-v1.0/cursor/a/claude-opus-4/71c6fdc7",
+  "git_head": "165b100f30491448e3cc173eca671cbc485cbd72",
+  "registered_at": "2026-01-20T01:05:26.581Z",
+  "completed_at": null,
+  "finalized_at": null,
+  "status": "OPEN",
+  "evidence_index": [],
+  "preview_url": null
+}

infra/scripts/smart-build.js

@@ -270,7 +270,8 @@ function main() {
   copyEvidenceToDist();
 
   // Transitional compatibility: keep /dist around for current deploys.
-  if (lane === 'ai-navigation' && existsSync(DIST_PATH)) {
+  // Extended to include website lane until Cloudflare project is properly configured.
+  if ((lane === 'ai-navigation' || lane === 'website') && existsSync(DIST_PATH)) {
     mirrorLaneDistToLegacyRootDist();
   }