All 5 points addressed. Updated plan: molty-personal-page-plan.md
1) Clean rebuild confirmed. The page IS already from scratch. Reset commit dbe1f53 deleted the old 509+794 line files entirely. Grep confirms zero dead imports, CSS, configs, or sub-components anywhere. No Phase 0 needed.
2) Plan renamed to plans/molty-personal-page-plan.md. Old elevation plan deleted.
3) Key plan sections below.
4) Signature interaction: Interactive Architecture Walkthrough. Click "See the message flow" (or any node) → 5-step guided walkthrough showing how a message travels from Swap's phone → Molty Server → Claude Code and back. Node highlighting, step descriptions, Next/Previous controls. This is the "unmistakably Molty" moment — no other page has it.
5) API resilience updated. Only /api/health fires on mount. Pulse/projects/plans defer until after first paint. Every data section has three states (skeleton → data → graceful empty). Page is a valid experience with zero APIs responding.
Component Architecture:
- 6+ sub-components, each <150 lines, own CSS
- Single content config file for all text
- Editing config changes rendered page without touching components
Signature Interaction (Architecture Walkthrough):
- "See the message flow" button triggers 5-step walkthrough
- Each step highlights relevant node + shows description
- Next/Previous controls + direct node click navigation
- Keyboard navigable, works on mobile, reduced-motion safe
Memory & Projects:
- Projects with name, description, links to detail pages
- Plans with title, status badge, links
- Three states: skeleton (loading), populated (success), graceful empty (failure)
API Resilience:
- Health fires on mount; pulse/projects/plans defer after first paint
- All calls have 5s timeout, no polling
- Page looks premium with all APIs down — no errors, no broken layout
SEO: Page title, meta description, OG tags, Twitter card, Telegram preview
components/molty/
MoltyPage.tsx ← orchestrator (~100-150 lines)
MoltyHero.tsx ← hero section
MoltyCapabilities.tsx ← accordion cards
MoltyArchitecture.tsx ← diagram + walkthrough
MoltyDemo.tsx ← chat demo
MoltyProjects.tsx ← memory & projects (NEW)
MoltyStatus.tsx ← live status grid
MoltyTerminal.tsx ← Ask Molty + typewriter
MoltyPalette.tsx ← command palette
MoltyDebug.tsx ← Konami overlay
(each with own .css)
data/
molty-content.ts ← all text, Q&A, chat scripts
| Risk | Impact | Mitigation |
|---|---|---|
| Component split regressions | High | Extract one section at a time, screenshot compare, build verify after each |
| API returns unexpected shape | Med | Type guards + fallback to empty state. Empty states designed to look intentional |
| API failures degrade quality | Med | 3 visual states per section. Page looks premium in ALL states |
| Walkthrough adds complexity | Med | Additive to existing diagram. Simple linear steps, no branching |
| Too many API calls slow paint | Med | Only health on mount. Everything else deferred via requestIdleCallback |
Mobile (3 min):
- Single column at 375px, no horizontal scroll
- Architecture walkthrough works in vertical layout
- Command palette input doesn't trigger iOS zoom (16px+)
- All touch targets 44px+
Accessibility (2 min):
- Tab through entire page — every interactive element gets focus outline
- Walkthrough keyboard navigable (Tab → Enter → arrow keys)
- Reduced motion disables ALL animations
- Screen reader can navigate via headings and landmarks
Performance:
- Zero new npm deps
- < 3KB gzip bundle increase
- 4 API calls total (1 immediate, 3 deferred)
- No polling, no layout shift
Review the full plan on GitHub and let me know what to revise.