Add landing/docs blueprints and site plan

Add website blueprints and planning/implementation tracking for the new marketing site and docs.

- Added blueprints: context/blueprints/blueprint-landing-page.md and blueprint-docs-page.md (detailed requirements & acceptance criteria).
- Added site plan: context/plans/build-site.md (19 tasks across tiers) and moved several context/sites/* files into context/plans/ (renamed). Deleted old context/sites/build-site.md.
- New implementation tracking: context/impl/impl-website.md with task table for landing + docs; updated context/impl/impl-cli.md task list and timestamps.
- Commands/docs updates: commands/build.md (argument hint now includes [FILE] and adds scoped impl-file reading rule) and commands/inspect.md (add Restore Archived Impl Tracking instructions to recover archived impl-*.md files).
- Misc: updated context/blueprints/blueprint-overview.md metadata and domain table to reference the website blueprints; added ignores to .gitignore (/.playwright-mcp, current-site-full.png); modified scripts/setup-build.sh.

These changes prepare the repo for implementing a zero-build, two-file gh-pages site (index.html + docs.html) and ensure the build/inspect workflows handle scoped impl files and archived implementation tracking.
This commit is contained in:
Julius Brussee
2026-04-01 14:11:53 +02:00
parent aeb01889c3
commit abc76e20ca
16 changed files with 758 additions and 198 deletions
+2
View File
@@ -3,3 +3,5 @@
.DS_Store
/.superpowers
/docs
/.playwright-mcp
current-site-full.png
+2 -2
View File
@@ -1,7 +1,7 @@
---
name: bp-build
description: "Implement a build site or plan — automatically parallelizes independent tasks and progresses through tiers autonomously"
argument-hint: "[--filter PATTERN] [--peer-review] [--max-iterations N] [--completion-promise TEXT]"
argument-hint: "[FILE] [--filter PATTERN] [--peer-review] [--max-iterations N] [--completion-promise TEXT]"
allowed-tools: ["Bash(${CLAUDE_PLUGIN_ROOT}/scripts/setup-build.sh:*)", "Bash(git *)"]
---
@@ -23,7 +23,7 @@ Once the setup script completes (outputs the ralph prompt), you run the executio
### Each Wave
1. **Read state**: Read the build site/plan + all `context/impl/impl-*.md` files + `context/impl/dead-ends.md`. If this is the first wave of a new tier, capture the tier start ref: `TIER_START_REF=$(git rev-parse HEAD)`
1. **Read state**: Read the build site/plan + scoped `context/impl/impl-*.md` files + `context/impl/dead-ends.md`. **Scoping rule:** only read impl files that contain `Build site: <this site's path>` (or matching basename). Ignore impl files declaring a different build site. If no scoped files exist, fall back to reading all impl files. If this is the first wave of a new tier, capture the tier start ref: `TIER_START_REF=$(git rev-parse HEAD)`
2. **Compute frontier**: Find all tasks that are NOT done AND whose `blockedBy` dependencies are ALL done
3. **Report**:
```
+19
View File
@@ -194,6 +194,25 @@ If new requirements were added to blueprints, add corresponding tasks to the sit
4. Update the `last_edited` date in frontmatter
5. Update the summary table at the bottom
### Restore Archived Impl Tracking
If the verdict is **REVISE** or **REJECT** and `context/impl/` has no `impl-*.md` files (they were archived by a previous `/bp:build` run), restore them so the next build cycle knows which tasks are already done:
1. Find the most recent archive: `ls -td context/impl/archive/*/ 2>/dev/null | head -1`
2. If found, copy all `impl-*.md` files (NOT `loop-log.md` or `peer-review-findings.md`) back to `context/impl/`:
```bash
LATEST_ARCHIVE=$(ls -td context/impl/archive/*/ 2>/dev/null | head -1)
if [[ -n "$LATEST_ARCHIVE" ]]; then
for f in "$LATEST_ARCHIVE"/impl-*.md; do
[[ -f "$f" ]] && cp "$f" context/impl/
done
echo "♻️ Restored impl tracking from $LATEST_ARCHIVE"
fi
```
3. Report the restoration to the user
This ensures the next `/bp:build` cycle can compute the correct frontier (skipping already-done tasks).
### Update Impl Tracking
For each peer review finding (bugs, security, performance):
+192
View File
@@ -0,0 +1,192 @@
---
created: "2026-04-01T11:50:00Z"
last_edited: "2026-04-01T11:50:00Z"
---
# Blueprint: Documentation Page
## Scope
A single-file (`docs.html`) documentation page with sticky sidebar navigation, deployed alongside `index.html` on the `gh-pages` branch. Contains the full Blueprint reference: overview, quick start, commands, methodology, Codex integration, skills reference, configuration, and file structure. Shares the same visual identity as the landing page. Zero dependencies, zero build step.
## Requirements
### R1: Shared Visual Identity
**Description:** The docs page must use the same design language as the landing page for a cohesive experience.
**Acceptance Criteria:**
- [ ] Same CSS custom properties (color palette, fonts, glassmorphism values) as landing page R1
- [ ] Same background treatment (near-black with noise texture + faint grid)
- [ ] Same font stack (display font for headings, monospace for code/annotations, system sans for body)
- [ ] Glassmorphism card and surface treatments match landing page
- [ ] `-webkit-font-smoothing: antialiased` applied to root
### R2: Page Layout
**Description:** Three-column docs layout with sticky navigation.
**Acceptance Criteria:**
- [ ] Desktop (>=1024px): left sidebar (240px, sticky) + main content (flexible, max ~780px) + right sidebar (200px, sticky "On this page" TOC)
- [ ] Tablet (<1024px): left sidebar collapses to hamburger menu overlay, right sidebar hidden, main content full-width
- [ ] Mobile (<768px): full-width content, hamburger nav menu
- [ ] Main content area has comfortable reading line-length (60-75 characters)
- [ ] Content area centered with consistent horizontal padding
### R3: Top Bar
**Description:** Fixed top navigation bar.
**Acceptance Criteria:**
- [ ] Fixed at top of viewport, glassmorphism blur background
- [ ] Left: "Blueprint" text logo (links to `index.html`)
- [ ] Right: "GitHub" link + version badge pill `v2.1.0`
- [ ] Hamburger menu button visible on tablet/mobile (hidden on desktop)
- [ ] Height ~56px, z-index above sidebar and content
### R4: Left Sidebar Navigation
**Description:** Sticky sidebar with the full documentation tree and scrollspy.
**Acceptance Criteria:**
- [ ] Sticky positioning, scrolls independently of main content
- [ ] Top: filter input (monospace, subtle border, placeholder "Filter...") that narrows visible nav items via substring match
- [ ] Navigation tree with collapsible sections (chevron indicators):
- Overview
- Quick Start (children: Greenfield, Brownfield)
- Commands (children: all 10 `/bp:*` commands)
- Methodology (children: DABI Lifecycle, Blueprints as Source of Truth, Scientific Method Applied)
- Codex Integration (children: Design Challenge, Tier Gate, Speculative Review, Command Safety Gate, Graceful Degradation)
- Skills Reference (children: all 13 skills)
- Configuration (children: Settings Reference, File Structure)
- [ ] Bottom: "Back to Home" link to `index.html`
- [ ] Scrollspy: active section highlighted with blue accent (left border or text color change) as user scrolls through content
- [ ] Clicking a nav item smooth-scrolls to that section
- [ ] URL hash updates on scroll and on nav click for deep linking (e.g., `docs.html#commands-bp-draft`)
### R5: Right Sidebar (On This Page)
**Description:** Contextual table of contents for the currently active section.
**Acceptance Criteria:**
- [ ] Shows H3 headings within the current active top-level section
- [ ] Scrollspy highlights the current H3
- [ ] Clicking scrolls to that H3
- [ ] Updates when the user scrolls into a different top-level section
- [ ] Hidden on tablet and mobile (right sidebar only visible >=1024px)
- [ ] Heading: "On this page" in monospace, muted
### R6: Overview Section
**Description:** Introduction to what Blueprint is and the DABI lifecycle.
**Acceptance Criteria:**
- [ ] Content explains: what Blueprint is, who it's for, the core idea (specification layer between intent and code)
- [ ] Brief DABI lifecycle summary with the 4 phases
- [ ] Links to each phase's detailed section in Commands and Methodology
- [ ] Content derived from README "The Idea" and "How It Works" intro sections
### R7: Quick Start Section
**Description:** Getting started guides for greenfield and brownfield projects.
**Acceptance Criteria:**
- [ ] Two subsections: Greenfield and Brownfield
- [ ] Each shows a full annotated conversation example (terminal-style code blocks)
- [ ] Greenfield example: `/bp:draft``/bp:architect``/bp:build` with sample output
- [ ] Brownfield example: `/bp:draft --from-code``/bp:architect --filter``/bp:build` with sample output
- [ ] Content derived from README "Quick Start" section
### R8: Commands Section
**Description:** Reference for all Blueprint slash commands.
**Acceptance Criteria:**
- [ ] Each command gets its own subsection with:
- Command name in monospace heading (e.g., `/bp:draft`)
- Phase badge (Draft, Architect, Build, Inspect, or "Utility")
- One-line description
- Usage example in terminal code block
- Flags/options table if applicable (e.g., `--from-code`, `--filter`)
- Links to related commands
- [ ] Commands covered: `/bp:draft`, `/bp:architect`, `/bp:build`, `/bp:inspect`, `/bp:research`, `/bp:progress`, `/bp:gap-analysis`, `/bp:revise`, `/bp:codex-review`, `/bp:help`
- [ ] Content derived from README "Commands" section + individual command descriptions
### R9: Methodology Section
**Description:** The Blueprint methodology and philosophy.
**Acceptance Criteria:**
- [ ] Three subsections: The DABI Lifecycle, Blueprints as Source of Truth, Scientific Method Applied
- [ ] DABI Lifecycle: detailed walkthrough of each phase with what it produces and why
- [ ] Blueprints as Source of Truth: explains why specs drive development, not memory
- [ ] Scientific Method: maps hypothesis→test→observe→refine to blueprints→gates→loops→revision
- [ ] Content derived from README "Methodology" and "Why Blueprint" sections
### R10: Codex Integration Section
**Description:** Full documentation of the Codex adversarial review system.
**Acceptance Criteria:**
- [ ] Five subsections: Design Challenge, Tier Gate, Speculative Review, Command Safety Gate, Graceful Degradation
- [ ] Each subsection explains: what it does, when it triggers, how it works, configuration options
- [ ] Design Challenge: the pre-build blueprint review flow
- [ ] Tier Gate: severity levels (P0-P3), gate modes, fix cycle behavior
- [ ] Speculative Review: background review overlapping with build, timeout behavior
- [ ] Command Safety Gate: allowlist/blocklist, Codex classification, verdict cache
- [ ] Graceful Degradation: behavior when Codex is not installed
- [ ] Content derived from README "Codex Adversarial Review" section
### R11: Skills Reference Section
**Description:** Reference for all 13 Blueprint skills.
**Acceptance Criteria:**
- [ ] Each skill gets a card/entry with: name, one-line description, when to use it
- [ ] Skills covered: Blueprint Writing, Convergence Monitoring, Peer Review, Validation-First Design, Context Architecture, Revision, Brownfield Adoption, Speculative Pipeline, Prompt Pipeline, Implementation Tracking, Documentation Inversion, Peer Review Loop, Core Methodology
- [ ] Content derived from README skills list + individual skill descriptions in `skills/` directory
### R12: Configuration Section
**Description:** Settings reference and file structure documentation.
**Acceptance Criteria:**
- [ ] Settings Reference: table of all Codex settings (codex_review, codex_model, tier_gate_mode, command_gate, command_gate_timeout, speculative_review, speculative_review_timeout) with values, defaults, and purpose
- [ ] File Structure: the `context/` directory tree with descriptions of each directory and file type
- [ ] Content derived from README "Configuration" and "File Structure" sections
### R13: Content Styling
**Description:** Consistent styling for all documentation content elements.
**Acceptance Criteria:**
- [ ] Headings (H2, H3): display font with a 3px left border-accent in blue
- [ ] Code blocks: glassmorphism terminal treatment matching landing page, with span-class-based syntax coloring (blue for commands, green for output, red for errors)
- [ ] Tables: glassmorphism rows with alternating subtle background opacity
- [ ] Inline code: monospace with subtle blue background pill
- [ ] Links: accent blue, underline on hover
- [ ] Command entries: card format with glassmorphism surface
- [ ] `text-wrap: balance` on headings, `text-wrap: pretty` on body paragraphs
- [ ] `font-variant-numeric: tabular-nums` on any numeric content
### R14: Responsive Design
**Description:** The docs page must work across all viewport sizes.
**Acceptance Criteria:**
- [ ] Breakpoints: mobile (<768px), tablet (768-1023px), desktop (>=1024px)
- [ ] Layout adapts per R2 (three-column → two-column → single-column)
- [ ] Hamburger menu on tablet/mobile opens a slide-in overlay with the full nav tree
- [ ] Code blocks use `overflow-x: auto` for horizontal scroll on narrow viewports
- [ ] Tables scroll horizontally in a container on mobile
- [ ] Body text minimum 16px
- [ ] `viewport` meta tag: `width=device-width, initial-scale=1`
- [ ] No horizontal scrollbar on page body at any viewport
### R15: Accessibility
**Description:** The docs page must be accessible.
**Acceptance Criteria:**
- [ ] Semantic HTML: `<nav>` for sidebars, `<main>` for content, `<section>` for each docs section
- [ ] All text meets WCAG AA contrast ratio (4.5:1) against background
- [ ] Keyboard-navigable: all nav items, links, buttons, and the filter input reachable via Tab
- [ ] Visible focus indicators on all interactive elements
- [ ] `aria-current="true"` on the active scrollspy nav item
- [ ] Hamburger menu is a `<button>` with `aria-expanded` and `aria-controls`
- [ ] Filter input has an associated `<label>` (can be visually hidden)
- [ ] Skip-to-content link for keyboard users
- [ ] Heading hierarchy: h1 (page title) → h2 (sections) → h3 (subsections), no skips
### R16: Performance
**Description:** The docs page must load fast.
**Acceptance Criteria:**
- [ ] Single `docs.html` file — all CSS inline in `<style>`, all JS inline in `<script>`
- [ ] Total file size under 80KB (uncompressed) — more content than landing page, but still lean
- [ ] No external dependencies except optional Google Fonts (shared with landing page, `font-display: swap`)
- [ ] JS is minimal: IntersectionObserver for scrollspy, sidebar toggle, filter function, hash management
- [ ] No images — all visuals are CSS or inline SVG
## Out of Scope
- No full-text search (filter is substring match on nav item names only)
- No JavaScript framework or build system
- No versioned docs (single version only)
- No edit-on-GitHub links
- No analytics or tracking
- Content is a reformatted presentation of existing README and skill files — no new technical writing
## Cross-References
- See also: blueprint-landing-page.md (shares visual identity system, linked from docs top bar and "Back to Home")
- Landing page R1 (Visual Identity) is the source of truth for shared design tokens
## Changelog
@@ -0,0 +1,175 @@
---
created: "2026-04-01T11:50:00Z"
last_edited: "2026-04-01T11:50:00Z"
---
# Blueprint: Marketing Landing Page
## Scope
A single-file (`index.html`) premium marketing landing page for the Blueprint Claude Code plugin, deployed to the `gh-pages` branch. Replaces the current site at `juliusbrussee.github.io/blueprint/`. Zero dependencies, zero build step. The page communicates what Blueprint does, why it matters, and how to install it through 8 scroll-driven sections with a "neon blueprint evolved" visual identity.
## Requirements
### R1: Visual Identity System
**Description:** The page must establish a cohesive "neon blueprint evolved" design language used consistently across all sections.
**Acceptance Criteria:**
- [ ] CSS custom properties define the full color palette: near-black background (`~#0a0e1a`), neon-blue primary accent, red diagnostic, green pass, muted text colors, glassmorphism surface values
- [ ] Background uses a subtle noise texture + very faint grid (grid line opacity ~0.03-0.04)
- [ ] A distinctive display font is used for headings (loaded via Google Fonts or self-hosted), with monospace for annotations/code and system sans-serif for body text
- [ ] `-webkit-font-smoothing: antialiased` is applied to the root
- [ ] All interactive elements (buttons, links, copy actions) have glassmorphism surface treatment: `backdrop-filter: blur()`, semi-transparent rgba background, subtle border
- [ ] Glow effects use `text-shadow` and `box-shadow` with accent color at low opacity — never harsh or garish
### R2: Hero Section
**Description:** Full-viewport hero section that immediately communicates what Blueprint is and provides the install command.
**Acceptance Criteria:**
- [ ] Section fills 100vh, content is centered vertically and horizontally
- [ ] Contains, top to bottom: version badge pill (`v2.1.0`), title ("Blueprint" in display font ~72px desktop), subtitle, DABI pipeline SVG diagram, install terminal block, two links (GitHub + Docs)
- [ ] DABI pipeline SVG shows the full flow: YOU → DRAFT → ARCHITECT → fan-out to 3 agents → MERGE → main
- [ ] Pipeline SVG boxes have glassmorphism fills
- [ ] A glowing particle traces the pipeline path on page load using SVG `<animateMotion>` with glow `drop-shadow` filter
- [ ] Install terminal block has glassmorphism surface, monospace text showing the two install commands, and a copy button
- [ ] Copy button copies both commands to clipboard and morphs text to "COPIED" with green color change, reverting after 2s
- [ ] Hero loads with a staggered animation sequence: badge → title → subtitle → pipeline → install → links, with 50-100ms stagger delays
### R3: Problem Section
**Description:** Communicates the 4 pain points Blueprint solves using diagnostic-styled cards.
**Acceptance Criteria:**
- [ ] Section label in monospace: "THE PROBLEM"
- [ ] Headline text: "AI coding agents are powerful. They fail in predictable ways."
- [ ] 2x2 grid of cards (1-column on mobile) for: Context Lost, No Validation, Single Agent, No Iteration
- [ ] Each card has: glassmorphism surface with red-tinted border, monospace title in neon-red with glow, one-line description, horizontal severity bar
- [ ] Severity bars fill from 0% to target width on scroll-trigger, using `ease-out` timing over 800ms
- [ ] Cards stagger in on scroll with 80ms delay between each, using `translateY(12px)` entrance
### R4: How It Works Section (DABI Phases)
**Description:** Explains the 4-phase workflow with visual phase cards.
**Acceptance Criteria:**
- [ ] Section label: "HOW IT WORKS"
- [ ] 4 phase cards in horizontal row (vertical stack on mobile): Draft, Architect, Build, Inspect
- [ ] Each card shows: large phase letter (48px, blue glow), phase name, command in monospace pill, one-line description
- [ ] Cards connected by animated glow lines with a subtle pulse traveling along them
- [ ] Below cards: paragraph explaining the blueprint-as-source-of-truth concept
- [ ] Cards stagger from left to right on scroll (100ms delay between each)
### R5: Dual-Model Advantage Section
**Description:** Showcases the Codex adversarial review system — Blueprint's key differentiator.
**Acceptance Criteria:**
- [ ] Section label: "ADVERSARIAL REVIEW"
- [ ] Headline: "Two models. Different blind spots. Higher confidence."
- [ ] Subheadline explaining Claude + Codex dual-model approach
- [ ] Three full-width cards stacked vertically:
- Design Challenge (badge: PRE-BUILD): diagram showing Claude drafts → Reviewer approves → Codex challenges → User reviews
- Tier Gate (badge: BUILD-TIME): severity table with P0-P3 levels and colored indicators
- Command Safety (badge: RUNTIME): flow diagram command → fast-path → Codex classifies → verdict
- [ ] Each card has glassmorphism surface and a colored badge
- [ ] Below cards: note that all Codex features are additive and Blueprint works without Codex
- [ ] Cards stagger in vertically on scroll (100ms between each)
- [ ] Mini diagrams inside cards draw themselves after card is visible (+300ms)
### R6: Ralph Loop Section
**Description:** Animated visualization of the build iteration loop.
**Acceptance Criteria:**
- [ ] Section label: "THE BUILD LOOP"
- [ ] Contained in a glassmorphism panel with subtle scanline overlay
- [ ] Elliptical loop SVG with 5 nodes: READ, IMPLEMENT, VALIDATE, COMMIT, NEXT TASK
- [ ] Glowing particle continuously orbits the loop path via SVG `<animateMotion>` with `drop-shadow` glow filter
- [ ] VALIDATE node has a branching FAIL path in red
- [ ] COMMIT node pulses green as particle passes
- [ ] Metrics readout bar below SVG: Iterations (animated counter 1→18), Tasks (34), Pass Rate (100%), Status (COMPLETE)
- [ ] Iteration counter animates on scroll trigger, loops every 3s
- [ ] Elliptical path draws itself on scroll (stroke-dashoffset, 2s)
### R7: Parallel Execution Section
**Description:** Visualizes the wave-based parallel build system.
**Acceptance Criteria:**
- [ ] Section label: "PARALLEL EXECUTION"
- [ ] Headline: "Independent tasks run simultaneously. Wave by wave."
- [ ] Animated wave visualization showing Wave 1 (3 task cards: Schema, Auth, Config) → dependency arrows → Wave 2 (2 task cards: Users, Health)
- [ ] Task cards are glassmorphism with monospace content showing task ID, name, and agent assignment
- [ ] Wave 1 cards stagger in (80ms between), pause 400ms, dependency arrows draw, Wave 2 cards stagger in
- [ ] "BUILD COMPLETE" badge fades in at bottom with green glow after wave animation completes
- [ ] Below: note about circuit breakers and failure handling
### R8: Get Started Section
**Description:** The conversion section — makes installing Blueprint unmissable.
**Acceptance Criteria:**
- [ ] Section label: "GET STARTED"
- [ ] Headline: "Two commands. You're building from blueprints."
- [ ] Large glassmorphism terminal block (max-width ~700px) with fake terminal chrome (three dots + title bar)
- [ ] Typewriter animation types both install commands at ~40ms/char with random jitter
- [ ] Blinking cursor follows insertion point during typewriter
- [ ] Copy button in terminal: "COPY" → "COPIED ✓" with green glow, `scale(0.97)` on `:active`
- [ ] Requirements line: "Requires Claude Code, git, macOS/Linux."
- [ ] Optional line: "Recommended: Codex for adversarial review, tmux for parallel agents."
- [ ] Two CTA buttons: "View on GitHub →" (primary, blue glow) and "Read the Docs →" (secondary, links to docs.html)
- [ ] `<noscript>` fallback shows full commands without typewriter
### R9: Footer
**Description:** Minimal branded footer.
**Acceptance Criteria:**
- [ ] Single centered line in monospace, muted: "Blueprint — MIT License · Built by Julius Brussee"
- [ ] "Julius Brussee" links to GitHub profile
- [ ] Faint horizontal accent line above footer text
### R10: Animation Infrastructure
**Description:** Scroll-triggered animation system and motion design standards.
**Acceptance Criteria:**
- [ ] All section animations triggered by `IntersectionObserver` with `threshold: 0.15`
- [ ] Sections receive a `.visible` class when triggered; observer unobserves after triggering
- [ ] All entrance animations use custom `ease-out` curve: `cubic-bezier(0.23, 1, 0.32, 1)`
- [ ] UI animation durations stay under 300ms (except SVG path draws and particle traces)
- [ ] SVG path animations use `stroke-dasharray`/`stroke-dashoffset` technique
- [ ] `@media (prefers-reduced-motion: reduce)` disables all motion, shows all content immediately with full opacity
- [ ] No animation libraries — pure CSS + minimal JS (IntersectionObserver + typewriter + counter)
- [ ] All animations use `transform` and `opacity` only (GPU-composited) except stroke-dashoffset
### R11: Responsive Design
**Description:** The page must work across all viewport sizes.
**Acceptance Criteria:**
- [ ] Breakpoints: mobile (<768px), desktop (>=768px)
- [ ] Mobile: all grids collapse to single column, horizontal card rows become vertical stacks
- [ ] Pipeline SVG in hero: horizontally scrollable container on mobile with `overflow-x: auto`
- [ ] Terminal blocks use `overflow-x: auto` on mobile for long commands
- [ ] Body text minimum 16px (avoids iOS auto-zoom)
- [ ] `viewport` meta tag: `width=device-width, initial-scale=1`
- [ ] No horizontal scrollbar on the page body at any viewport width
- [ ] Touch targets meet 44x44px minimum
### R12: Accessibility
**Description:** The page must be accessible to all users.
**Acceptance Criteria:**
- [ ] All SVG diagrams have `role="img"` and descriptive `aria-label`
- [ ] Semantic HTML: `<header>`, `<section>`, `<footer>` with `aria-labelledby` on sections
- [ ] All text meets WCAG AA contrast ratio (4.5:1) against the background — decorative elements exempt
- [ ] Keyboard-navigable: all links and buttons reachable via Tab with visible focus indicators (2px solid accent, 2px offset)
- [ ] Copy button is a real `<button>` element with `aria-label`
- [ ] Typewriter text has `<noscript>` fallback
- [ ] `prefers-reduced-motion` fully supported (R10)
- [ ] Heading hierarchy: sequential h1→h2→h3, no level skips
- [ ] Skip-to-content link for keyboard users
### R13: Performance
**Description:** The page must load fast with no external dependencies beyond fonts.
**Acceptance Criteria:**
- [ ] Single `index.html` file — all CSS inline in `<style>`, all JS inline in `<script>`
- [ ] Total file size under 60KB (uncompressed)
- [ ] No external dependencies except optional Google Fonts (loaded with `font-display: swap`)
- [ ] Font preload via `<link rel="preload">` for the display font
- [ ] No images — all visuals are CSS or inline SVG
- [ ] JS is minimal: IntersectionObserver setup, typewriter function, counter function, copy function
## Out of Scope
- No JavaScript framework or build system
- No analytics or tracking
- No dark/light mode toggle (inherently dark)
- No interactive elements beyond links and the copy button
- No blog, search, or dynamic content
- No custom domain setup (just `gh-pages` branch deployment)
## Cross-References
- See also: blueprint-docs-page.md (linked from hero and Get Started sections)
- Docs page shares the same visual identity system (R1)
## Changelog
+12 -47
View File
@@ -1,61 +1,26 @@
---
created: "2026-03-17T00:00:00Z"
last_edited: "2026-03-20T00:00:00Z"
created: "2026-04-01T11:50:00Z"
last_edited: "2026-04-01T11:50:00Z"
---
# Spec Overview
# Blueprint Overview
## Project
**blueprint-monitor** — A Go TUI application for managing multiple parallel Claude Code agents executing Blueprint sites. Replaces the current bash/tmux launcher with a flicker-free, claude-squad-style interface that adds Blueprint-specific progress tracking.
Premium GitHub Pages website for the Blueprint Claude Code plugin. Two static HTML files deployed to the `gh-pages` branch: a marketing landing page and a single-page documentation reference. "Neon blueprint evolved" visual identity — dark backgrounds, glassmorphism surfaces, neon-blue accents, scroll-driven animations. Zero dependencies, zero build step.
## Domain Index
| Domain | Spec File | Requirements | Status | Description |
| Domain | Blueprint File | Requirements | Status | Description |
|--------|-----------|-------------|--------|-------------|
| tmux | blueprint-tmux.md | 5 | DRAFT | Detached tmux session lifecycle, capture, attach/detach |
| worktree | blueprint-worktree.md | 4 | DRAFT | Git worktree creation, diff stats, discovery |
| site | blueprint-site.md | 5 | DRAFT | Site file discovery, parsing, task status tracking |
| session | blueprint-session.md | 6 | DRAFT | Instance model, lifecycle, persistence, progress |
| tui | blueprint-tui.md | 11 | DRAFT | Bubbletea TUI with list, tabs, overlays, Blueprint progress |
| cli | blueprint-cli.md | 5 | DRAFT | Binary, subcommands, config |
| spec-sync | blueprint-spec-sync.md | 4 | DRAFT | Living specs — bidirectional revision, changelog, drift detection |
| build-lifecycle | blueprint-build-lifecycle.md | 5 | DRAFT | Worktree freshness, env forwarding, failure recovery, archive on stop |
| Marketing Landing Page | blueprint-landing-page.md | 13 | DRAFT | 8-section scroll experience: hero, problem, DABI phases, Codex review, Ralph Loop, parallel execution, install, footer |
| Documentation Page | blueprint-docs-page.md | 16 | DRAFT | Single-page docs with sidebar nav: overview, quick start, commands, methodology, Codex integration, skills, configuration |
## Cross-Reference Map
| Domain A | Interacts With | Interaction Type |
|----------|---------------|-----------------|
| session | tmux | session creates and controls tmux sessions |
| session | worktree | session creates worktrees for isolation |
| session | site | session reads site for progress data |
| tui | session | TUI displays and controls sessions |
| tui | tmux | TUI captures pane content for preview |
| tui | site | TUI displays site progress |
| tui | worktree | TUI displays diff stats |
| cli | tui | CLI launches TUI |
| cli | session | CLI loads/saves session state |
| cli | tmux | kill command cleans up tmux sessions |
| cli | worktree | kill/status commands interact with worktrees |
| spec-sync | site | drift detection reads task-to-requirement mappings |
| spec-sync | build-lifecycle | worktree changes must be on main before revise scans |
| build-lifecycle | worktree | builds on existing worktree creation primitives |
| build-lifecycle | session | instance lifecycle triggers build lifecycle operations |
| Marketing Landing Page | Documentation Page | Navigation links (hero + Get Started link to docs.html) |
| Documentation Page | Marketing Landing Page | Navigation link (top bar logo + "Back to Home" link to index.html) |
| Marketing Landing Page | Documentation Page | Shared visual identity (CSS custom properties, font stack, glassmorphism treatment) |
## Dependency Graph
```
Tier 0 (no dependencies): tmux, worktree, site
Tier 1 (depends on Tier 0): session (depends on tmux, worktree, site)
Tier 2 (depends on Tier 1): tui (depends on session, tmux, site, worktree)
Tier 3 (depends on Tier 2): cli (depends on tui, session)
Tier 0 (no dependencies): spec-sync R2 (changelog format), build-lifecycle R1/R2 (rebase, env vars)
Tier 1 (depends on Tier 0): spec-sync R1 (revision, depends on R2), build-lifecycle R3 (recovery, depends on R1/R2)
Tier 2 (depends on Tier 1): spec-sync R3 (overview consistency), spec-sync R4 (drift detection), build-lifecycle R4 (health check)
```
## Technology Stack
- **Language:** Go 1.22+
- **TUI framework:** charmbracelet/bubbletea
- **Styling:** charmbracelet/lipgloss
- **Components:** charmbracelet/bubbles (spinner, viewport, textinput)
- **PTY:** creack/pty
- **Tmux:** exec.Command wrapping tmux CLI
- **Git:** exec.Command wrapping git CLI
1. Marketing Landing Page — no dependencies (can be implemented first; establishes the visual identity system that docs page inherits)
2. Documentation Page — soft dependency on Landing Page R1 (shared visual identity); can be implemented in parallel if design tokens are agreed upfront
+5
View File
@@ -9,3 +9,8 @@ last_edited: "2026-03-19T00:00:00Z"
| T-051 | DONE | Parse --autoyes/-y flag in runMonitor, pass to tui.Run. |
| T-052 | DONE | Status command computes progress from site+impl files via computeWorktreeProgress(). |
| T-056 | DONE | Preflight checks program binary (claude by default) via LookPath. |
| T-001 | DONE | Go module init: go.mod with github.com/julb/blueprint-monitor, bubbletea/lipgloss deps, cmd/blueprint/main.go. |
| T-039 | DONE | Monitor command: `blueprint` or `blueprint monitor` launches TUI. --program and --autoyes flags. Preflight checks. Loads persisted instances. |
| T-040 | DONE | Status command: `blueprint status` prints per-worktree progress with icon and done/total counts. |
| T-041 | DONE | Kill command: kills tmux sessions, removes worktrees, clears state, reports counts. |
| T-042 | DONE | Debug/reset/version commands. `blueprint debug` prints state path, `blueprint reset` clears state, `blueprint version` prints version. |
+29
View File
@@ -0,0 +1,29 @@
---
created: "2026-04-01T14:00:00Z"
last_edited: "2026-04-01T14:00:00Z"
---
# Implementation Tracking: Website (Landing Page + Docs)
Build site: context/plans/build-site.md
| Task | Status | Notes |
|------|--------|-------|
| T-001 | DONE | Landing page foundation: CSS design system, animation infra, semantic HTML shell. gh-pages branch. |
| T-002 | DONE | Hero section: title, pipeline SVG, particle animation, install block, copy button. |
| T-003 | DONE | Problem section: 4 diagnostic cards with severity bars. |
| T-004 | DONE | How It Works: 4 DABI phase cards. |
| T-005 | NOT STARTED | Adversarial Review: 3 review cards with mini diagrams. Missing from current index.html. |
| T-006 | DONE | Ralph Loop: elliptical SVG, orbiting particle, metrics. |
| T-007 | NOT STARTED | Parallel Execution: wave visualization with task cards. Missing from current index.html. |
| T-008 | DONE | Get Started + Footer: terminal, typewriter, CTAs, footer. |
| T-009 | NOT STARTED | Docs page foundation: shared identity, layout, top bar. No docs.html exists yet. |
| T-010 | NOT STARTED | Docs left sidebar: nav tree, filter, collapsible sections, scrollspy. |
| T-011 | NOT STARTED | Docs right sidebar: "On this page" TOC + content styling system. |
| T-012 | NOT STARTED | Docs content: Overview + Quick Start. |
| T-013 | NOT STARTED | Docs content: Commands reference (all 10 commands). |
| T-014 | NOT STARTED | Docs content: Methodology (DABI, source of truth, scientific method). |
| T-015 | NOT STARTED | Docs content: Codex Integration (5 subsections). |
| T-016 | NOT STARTED | Docs content: Skills Reference + Configuration. |
| T-017 | NOT STARTED | Landing page polish: responsive, a11y, perf audit. |
| T-018 | NOT STARTED | Docs page polish: responsive, a11y, perf audit. |
| T-019 | NOT STARTED | Cross-page integration: nav links, deep links, consistency. |
+188
View File
@@ -0,0 +1,188 @@
---
created: "2026-04-01T12:00:00Z"
last_edited: "2026-04-01T12:00:00Z"
---
# Build Site
19 tasks across 5 tiers from 2 blueprints.
**Skill Instructions:** All implementation subagents MUST invoke the following skills before writing any code:
- `emil-design-eng` — animation decisions, easing curves, component polish
- `make-interfaces-feel-better` — typography, surfaces, stagger animations, press feedback
- `ui-ux-pro-max` — accessibility, touch targets, contrast, responsive rules
- `frontend-design` — bold aesthetic direction, distinctive font choices, visual composition
**Implementation context:** Both files deploy to the `gh-pages` branch. Each task works on either `index.html` (landing page) or `docs.html` (docs page). The current site exists at `juliusbrussee.github.io/blueprint/` — the current `index.html` is in the `gh-pages` branch for reference. All content derives from the existing README.md and skill files in the repo.
---
## Tier 0 — No Dependencies (Start Here)
| Task | Title | Blueprint | Requirement | Effort |
|------|-------|-----------|-------------|--------|
| T-001 | Landing page foundation: scaffold + design system + animation infra | blueprint-landing-page.md | R1, R10, R11, R12, R13 (partial) | L |
**T-001 details:** Create the `index.html` skeleton with:
- Full CSS design system: custom properties (colors, fonts, glassmorphism tokens), near-black background with noise texture + faint grid, display font loading via Google Fonts with `font-display: swap` and `<link rel="preload">`, monospace + sans-serif fallbacks, `-webkit-font-smoothing: antialiased`
- Base reset, responsive breakpoints (mobile <768px, desktop >=768px), `viewport` meta tag
- Animation infrastructure: `.section``.visible` IntersectionObserver, CSS animation utility classes (`.animate-fade`, stagger delays), custom `ease-out` curve `cubic-bezier(0.23, 1, 0.32, 1)`, `@media (prefers-reduced-motion: reduce)` disabling all motion
- Semantic HTML shell: `<!DOCTYPE html>`, `<head>` with meta/OG tags, `<body>` with empty `<section>` placeholders for all 8 sections, `<footer>`
- Skip-to-content link, heading hierarchy started (h1 in hero, h2 for sections)
- All CSS inline in `<style>`, all JS inline in `<script>`
---
## Tier 1 — Depends on Tier 0
| Task | Title | Blueprint | Requirement | blockedBy | Effort |
|------|-------|-----------|-------------|-----------|--------|
| T-002 | Hero section: title, pipeline SVG, particle, install block | blueprint-landing-page.md | R2 | T-001 | L |
| T-003 | Problem section: 4 diagnostic cards with severity bars | blueprint-landing-page.md | R3 | T-001 | M |
| T-004 | How It Works: 4 DABI phase cards with glow connections | blueprint-landing-page.md | R4 | T-001 | M |
| T-005 | Dual-Model Advantage: 3 review cards with mini diagrams | blueprint-landing-page.md | R5 | T-001 | L |
| T-006 | Ralph Loop: elliptical SVG, orbiting particle, metrics | blueprint-landing-page.md | R6 | T-001 | L |
| T-007 | Parallel Execution: wave visualization with task cards | blueprint-landing-page.md | R7 | T-001 | M |
| T-008 | Get Started + Footer: terminal, typewriter, CTAs, footer | blueprint-landing-page.md | R8, R9 | T-001 | M |
| T-009 | Docs page foundation: shared identity, layout, top bar | blueprint-docs-page.md | R1, R2, R3, R13, R14, R15, R16 (partial) | T-001 | L |
**T-002 details:** Full hero section — 100vh centered layout. Version badge pill. "Blueprint" title in display font at ~72px with glow text-shadow. Subtitle. DABI pipeline SVG: boxes (YOU, DRAFT, ARCHITECT, AGENT 1/2/3, MERGE) with glassmorphism fills, dashed connecting paths, glowing particle tracing the full pipeline via `<animateMotion>` with `drop-shadow` filter. Install terminal block with glassmorphism surface, two commands in monospace, copy button that morphs "COPY" → "COPIED ✓" with green flash (reverts after 2s). Two links: "View on GitHub →", "Read the Docs →". Staggered load animation: badge → title → subtitle → pipeline → install → links (50-100ms delays). Copy button has `scale(0.97)` on `:active`.
**T-003 details:** "THE PROBLEM" section. Headline: "AI coding agents are powerful. They fail in predictable ways." 2×2 card grid (1-col mobile). Cards: glassmorphism + red-tinted border, neon-red monospace title with glow, description, severity bar (fills 70-90% on scroll, `ease-out` 800ms). Stagger: 80ms between cards, `translateY(12px)` entrance.
**T-004 details:** "HOW IT WORKS" section. 4 horizontal cards (vertical mobile): Draft, Architect, Build, Inspect. Large phase letter (48px, blue glow), name, `/bp:*` command pill, one-liner. Connected by animated glow lines with traveling pulse. Paragraph below about blueprints as source of truth. Stagger: 100ms between cards.
**T-005 details:** "ADVERSARIAL REVIEW" section. Headline + subheadline. 3 stacked full-width cards: Design Challenge (PRE-BUILD badge, Claude→Reviewer→Codex→User flow diagram), Tier Gate (BUILD-TIME badge, P0-P3 severity table with colored dots), Command Safety (RUNTIME badge, command→fast-path→classify→verdict flow). Glassmorphism cards with colored badges. Note about additive features. Stagger: 100ms. Mini diagrams draw after card visible (+300ms).
**T-006 details:** "THE BUILD LOOP" section. Glassmorphism panel with scanline overlay. Elliptical SVG loop, 5 nodes (READ, IMPLEMENT, VALIDATE, COMMIT, NEXT TASK). Glowing particle orbits continuously via `<animateMotion>` + `drop-shadow`. FAIL branch in red from VALIDATE. COMMIT pulses green on particle pass. Metrics readout bar: Iterations (animated 1→18 counter, loops 3s), Tasks (34), Pass Rate (100%), Status (COMPLETE). Path draws on scroll (stroke-dashoffset, 2s).
**T-007 details:** "PARALLEL EXECUTION" section. Wave visualization: Wave 1 = 3 task cards (T-001 Schema/Agent A, T-002 Auth/Agent A, T-003 Config/Agent B), dependency arrows, Wave 2 = 2 task cards (T-004 Users/Agent A, T-005 Health/Agent B). Glassmorphism cards, monospace content. Wave 1 staggers (80ms), pause 400ms, arrows draw, Wave 2 staggers. "BUILD COMPLETE" badge fades in with green glow. Note about circuit breakers.
**T-008 details:** "GET STARTED" section + footer. Headline: "Two commands. You're building from blueprints." Large glassmorphism terminal (max-width ~700px) with fake chrome (3 dots + title). Typewriter animation (~40ms/char + jitter) for both commands. Blinking cursor. Copy button: "COPY" → "COPIED ✓", green glow, `scale(0.97)`. Requirements + optional line. Two CTA buttons: GitHub (primary glow) + Docs (secondary). `<noscript>` fallback. Footer: centered monospace line "Blueprint — MIT License · Built by Julius Brussee" with link, faint accent line above.
**T-009 details:** Create `docs.html` skeleton. Copy CSS design system from T-001 (same custom properties, fonts, background). 3-column layout: left sidebar 240px sticky, main content flexible max ~780px, right sidebar 200px sticky. Top bar: fixed, glassmorphism blur, "Blueprint" logo → index.html, GitHub link + version badge, hamburger button on <1024px. Responsive: tablet collapses left sidebar to hamburger overlay + hides right sidebar, mobile full-width + hamburger. Semantic HTML: `<nav>`, `<main>`, `<section>`. Skip-to-content link. Meta tags. All CSS/JS inline.
---
## Tier 2 — Depends on Tier 1
| Task | Title | Blueprint | Requirement | blockedBy | Effort |
|------|-------|-----------|-------------|-----------|--------|
| T-010 | Docs left sidebar: nav tree, filter, collapsible sections, scrollspy | blueprint-docs-page.md | R4 | T-009 | M |
| T-011 | Docs right sidebar: "On this page" TOC + content styling system | blueprint-docs-page.md | R5, R13 | T-009 | M |
**T-010 details:** Left sidebar navigation. Filter input (monospace, placeholder "Filter...", substring match hides non-matching items). Full nav tree with collapsible sections + chevron indicators: Overview, Quick Start (Greenfield, Brownfield), Commands (10 children), Methodology (3 children), Codex Integration (5 children), Skills Reference (13 children), Configuration (2 children). "Back to Home" link at bottom. Scrollspy: IntersectionObserver on content sections, active item gets blue accent (left border + text color). Click → smooth-scroll. URL hash updates on scroll + click for deep linking.
**T-011 details:** Right sidebar "On this page" heading in monospace muted. Dynamically shows H3s within current active top-level section. Scrollspy highlights current H3. Click scrolls to H3. Updates when user scrolls to different section. Hidden <1024px. Content styling: H2/H3 with 3px blue left border, glassmorphism code blocks with span-class syntax coloring, glassmorphism table rows with alternating bg, inline code as blue-bg pill, accent-blue links with hover underline, command entries as cards. `text-wrap: balance` on headings, `text-wrap: pretty` on body, `tabular-nums` on numbers.
---
## Tier 3 — Depends on Tier 2
| Task | Title | Blueprint | Requirement | blockedBy | Effort |
|------|-------|-----------|-------------|-----------|--------|
| T-012 | Docs content: Overview + Quick Start | blueprint-docs-page.md | R6, R7 | T-010, T-011 | M |
| T-013 | Docs content: Commands reference (all 10 commands) | blueprint-docs-page.md | R8 | T-010, T-011 | M |
| T-014 | Docs content: Methodology (DABI, source of truth, scientific method) | blueprint-docs-page.md | R9 | T-010, T-011 | M |
| T-015 | Docs content: Codex Integration (5 subsections) | blueprint-docs-page.md | R10 | T-010, T-011 | M |
| T-016 | Docs content: Skills Reference + Configuration | blueprint-docs-page.md | R11, R12 | T-010, T-011 | M |
**T-012 details:** Overview section: what Blueprint is, who it's for, specification layer concept, brief DABI summary with links to Commands/Methodology sections. Quick Start: Greenfield subsection (annotated `/bp:draft``/bp:architect``/bp:build` conversation) and Brownfield subsection (`--from-code``--filter` conversation). Content from README "The Idea", "How It Works" intro, and "Quick Start".
**T-013 details:** Commands section with 10 command entries. Each: monospace heading, phase badge (Draft/Architect/Build/Inspect/Utility), description, terminal usage example, flags/options table where applicable, related command links. Commands: `/bp:draft` (flags: `--from-code`), `/bp:architect` (flags: `--filter`), `/bp:build` (flags: `--peer-review`), `/bp:inspect`, `/bp:research`, `/bp:progress`, `/bp:gap-analysis`, `/bp:revise`, `/bp:codex-review`, `/bp:help`. Content from README "Commands" + CLI help.
**T-014 details:** Methodology section. DABI Lifecycle: detailed phase walkthrough with what each produces. Blueprints as Source of Truth: why specs drive development. Scientific Method Applied: hypothesis→test→observe→refine mapped to blueprints→gates→loops→revision. Content from README "Methodology" and "Why Blueprint".
**T-015 details:** Codex Integration section. 5 subsections: Design Challenge (pre-build review flow, critical vs advisory findings, auto-fix loop), Tier Gate (P0-P3 severity, gate modes table, fix cycle), Speculative Review (background review, timeout, fallback), Command Safety Gate (allowlist/blocklist, classification, verdict cache), Graceful Degradation (behavior without Codex). Content from README "Codex Adversarial Review".
**T-016 details:** Skills Reference: 13 skill cards with name, description, when to use. Skills: Blueprint Writing, Convergence Monitoring, Peer Review, Validation-First Design, Context Architecture, Revision, Brownfield Adoption, Speculative Pipeline, Prompt Pipeline, Implementation Tracking, Documentation Inversion, Peer Review Loop, Core Methodology. Configuration: settings table (7 settings with values/defaults/purpose), file structure tree with descriptions. Content from README skills list + "Configuration" + "File Structure".
---
## Tier 4 — Final Polish (Depends on All Prior)
| Task | Title | Blueprint | Requirement | blockedBy | Effort |
|------|-------|-----------|-------------|-----------|--------|
| T-017 | Landing page polish: responsive, a11y, perf audit | blueprint-landing-page.md | R11, R12, R13 | T-002T-008 | M |
| T-018 | Docs page polish: responsive, a11y, perf audit | blueprint-docs-page.md | R14, R15, R16 | T-010T-016 | M |
| T-019 | Cross-page integration: nav links, deep links, consistency | both | cross-ref | T-017, T-018 | S |
**T-017 details:** Audit landing page against all R11, R12, R13 acceptance criteria. Test at 375px, 768px, 1440px. Verify: grids collapse on mobile, SVGs scroll horizontally, terminal blocks scroll, touch targets >=44px, no body horizontal scroll. Accessibility: all SVGs have `role="img"` + `aria-label`, semantic HTML, WCAG AA contrast on all text, keyboard nav with visible focus, heading hierarchy, skip link works. Performance: verify single file, check size <60KB, no external deps beyond fonts.
**T-018 details:** Audit docs page against R14, R15, R16. Test at 375px, 768px, 1024px, 1440px. Verify: layout adapts (3-col → hamburger), code blocks scroll, tables scroll, body text >=16px, no body horizontal scroll. Accessibility: semantic `<nav>`/`<main>`/`<section>`, contrast, keyboard nav, `aria-current` on scrollspy, hamburger `aria-expanded`, filter label, focus indicators, heading hierarchy, skip link. Performance: single file, <80KB, minimal JS.
**T-019 details:** Verify all cross-page links work: index.html "Read the Docs →" links to docs.html, docs.html "Blueprint" logo links to index.html, docs.html "Back to Home" links to index.html, docs.html GitHub link correct. Test deep links (docs.html#commands-bp-draft etc). Verify CSS custom properties and font loading are consistent across both files. Spot-check visual consistency (same glassmorphism treatment, same colors, same fonts rendering identically).
---
## Dependency Graph
```mermaid
graph LR
T-001 --> T-002
T-001 --> T-003
T-001 --> T-004
T-001 --> T-005
T-001 --> T-006
T-001 --> T-007
T-001 --> T-008
T-001 --> T-009
T-009 --> T-010
T-009 --> T-011
T-010 --> T-012
T-010 --> T-013
T-010 --> T-014
T-010 --> T-015
T-010 --> T-016
T-011 --> T-012
T-011 --> T-013
T-011 --> T-014
T-011 --> T-015
T-011 --> T-016
T-002 --> T-017
T-003 --> T-017
T-004 --> T-017
T-005 --> T-017
T-006 --> T-017
T-007 --> T-017
T-008 --> T-017
T-012 --> T-018
T-013 --> T-018
T-014 --> T-018
T-015 --> T-018
T-016 --> T-018
T-017 --> T-019
T-018 --> T-019
```
---
## Summary
| Tier | Tasks | Effort |
|------|-------|--------|
| 0 | 1 (T-001) | 1L |
| 1 | 8 (T-002T-009) | 4L, 4M |
| 2 | 2 (T-010T-011) | 2M |
| 3 | 5 (T-012T-016) | 5M |
| 4 | 3 (T-017T-019) | 2M, 1S |
**Total: 19 tasks, 5 tiers**
### Parallelization Potential
- **Tier 1:** 8 tasks can run in parallel (7 landing page sections + docs foundation)
- **Tier 2:** 2 tasks can run in parallel
- **Tier 3:** 5 tasks can run in parallel
- **Tier 4:** T-017 and T-018 can run in parallel; T-019 waits for both
### Build Wave Estimate
- Wave 1: T-001 (foundation) — 1 agent
- Wave 2: T-002T-009 (sections + docs scaffold) — 3-4 agents with grouped packets
- Wave 3: T-010T-011 (docs nav) — 1-2 agents
- Wave 4: T-012T-016 (docs content) — 2-3 agents
- Wave 5: T-017T-019 (polish + integration) — 2 agents
-131
View File
@@ -1,131 +0,0 @@
---
created: "2026-03-17T00:00:00Z"
last_edited: "2026-03-19T00:00:00Z"
---
# Feature Site
42 tasks across 6 tiers from 6 specs.
---
## Tier 0 — No Dependencies (Start Here)
| Task | Title | Spec | Requirement | Effort |
|------|-------|------|------------|--------|
| T-001 | Go module init, go.mod with dependencies | spec-cli.md | R1 | S |
| T-002 | Tmux session create/kill/exists | spec-tmux.md | R1 | M |
| T-003 | Tmux pane content capture | spec-tmux.md | R2 | S |
| T-004 | Git worktree create/detect/remove | spec-worktree.md | R1 | M |
| T-005 | Site file discovery and name derivation | spec-site.md | R1 | M |
| T-006 | Site markdown parsing (tasks, tiers, table rows) | spec-site.md | R2 | M |
| T-007 | Session instance model and status enum | spec-session.md | R1 | S |
| T-008 | Command executor abstraction (for testability) | spec-tmux.md | R1 | S |
---
## Tier 1 — Depends on Tier 0
| Task | Title | Spec | Requirement | blockedBy | Effort |
|------|-------|------|------------|-----------|--------|
| T-009 | PTY-based tmux attach/detach with Ctrl+Q | spec-tmux.md | R3 | T-002 | L |
| T-010 | Tmux status detection (active/prompt via content hashing) | spec-tmux.md | R4 | T-002, T-003 | M |
| T-011 | Tmux input injection (keystrokes, prompts) | spec-tmux.md | R5 | T-002 | S |
| T-012 | Git diff stats (files changed, insertions, deletions) | spec-worktree.md | R2 | T-004 | S |
| T-013 | Worktree discovery (scan sibling dirs) | spec-worktree.md | R3 | T-004 | S |
| T-014 | Task status tracking from impl files | spec-site.md | R3 | T-005, T-006 | M |
| T-015 | Site status classification (done/in-progress/available) | spec-site.md | R4 | T-005, T-014 | S |
| T-016 | Site multi-candidate ranking and selection | spec-site.md | R6 | T-005, T-014 | M |
| T-017 | Progress summary string generation | spec-site.md | R5 | T-014, T-015 | S |
| T-018 | Bubbletea app shell (alt-screen, mouse, resize) | spec-tui.md | R1 | T-001 | M |
| T-019 | Lipgloss styles and constants | spec-tui.md | R1 | T-001 | S |
---
## Tier 2 — Depends on Tier 1
| Task | Title | Spec | Requirement | blockedBy | Effort |
|------|-------|------|------------|-----------|--------|
| T-020 | Session lifecycle (create, start with worktree+tmux) | spec-session.md | R2 | T-002, T-004, T-007, T-011 | L |
| T-021 | Session persistence (save/load JSON) | spec-session.md | R3 | T-007, T-013 | M |
| T-022 | Auto-yes mode (permission prompt auto-approve) | spec-session.md | R5 | T-010, T-011 | S |
| T-023 | SDD progress integration on instance | spec-session.md | R6 | T-007, T-014 | S |
| T-024 | Instance list component | spec-tui.md | R2 | T-018, T-019, T-007 | M |
| T-025 | Tabbed content window component | spec-tui.md | R3 | T-018, T-019 | M |
| T-026 | Bottom menu component | spec-tui.md | R7 | T-018, T-019 | S |
| T-027 | Overlay components (text input, confirmation, help) | spec-tui.md | R10 | T-018, T-019 | M |
| T-028 | Branch push from worktree | spec-worktree.md | R4 | T-004, T-012 | S |
---
## Tier 3 — Depends on Tier 2
| Task | Title | Spec | Requirement | blockedBy | Effort |
|------|-------|------|------------|-----------|--------|
| T-029 | Preview tab (capture + render tmux snapshots) | spec-tui.md | R4 | T-025, T-003, T-020 | M |
| T-030 | Diff tab (git diff rendering with scroll) | spec-tui.md | R5 | T-025, T-012 | M |
| T-031 | Terminal tab (separate tmux session per instance) | spec-tui.md | R6 | T-025, T-002, T-009 | L |
| T-032 | New instance flow (name input → start) | spec-tui.md | R8 | T-024, T-027, T-020 | M |
| T-033 | SDD progress display in instance list | spec-tui.md | R9 | T-024, T-023, T-017 | M |
| T-034 | Staggered launch for multiple instances | spec-session.md | R4 | T-020 | S |
| T-035 | Site picker integration | spec-tui.md | R11 | T-027, T-005, T-015 | M |
| T-036 | Key handling: kill, push, checkout, resume | spec-tui.md | R8 | T-024, T-027, T-020, T-028 | M |
---
## Tier 4 — Depends on Tier 3
| Task | Title | Spec | Requirement | blockedBy | Effort |
|------|-------|------|------------|-----------|--------|
| T-037 | Wire app.Update to route all key events | spec-tui.md | R1 | T-029, T-030, T-031, T-032, T-033, T-036 | L |
| T-038 | Wire app.View to compose all components | spec-tui.md | R1 | T-024, T-025, T-026, T-027, T-029, T-030, T-031, T-033 | M |
| T-039 | Monitor command (launch TUI with preflight) | spec-cli.md | R2 | T-018, T-021, T-037 | M |
---
## Tier 5 — Depends on Tier 4
| Task | Title | Spec | Requirement | blockedBy | Effort |
|------|-------|------|------------|-----------|--------|
| T-040 | Status command (print progress, exit) | spec-cli.md | R3 | T-013, T-014, T-017 | S |
| T-041 | Kill command (cleanup sessions, worktrees, branches) | spec-cli.md | R4 | T-002, T-004, T-039 | S |
| T-042 | Config file and debug/reset/version commands | spec-cli.md | R5 | T-039 | S |
---
## Summary
| Tier | Tasks | Effort |
|------|-------|--------|
| 0 | 8 | 2S, 5M, 1S |
| 1 | 11 | 4S, 5M, 1L, 1S |
| 2 | 9 | 3S, 5M, 1L |
| 3 | 8 | 1S, 5M, 1L, 1M |
| 4 | 3 | 1L, 2M |
| 5 | 3 | 3S |
**Total: 42 tasks, 6 tiers**
---
## Tier 6 — Inspection Fixes (depends on Tier 5)
| Task | Title | Spec | Requirement | blockedBy | Effort | Finding |
|------|-------|------|------------|-----------|--------|---------|
| T-043 | Wire tick loop: capture, diff, progress, auto-yes, status | spec-tui.md | R12 | T-037 | L | F-001 |
| T-044 | Instantiate PreviewTab/DiffTab/TerminalTab in App, pipe to TabContent | spec-tui.md | R12 | T-029, T-030, T-031, T-037 | M | F-002 |
| T-045 | Handle ActionOpen: tmux attach/detach with TUI suspend | spec-tui.md | R13 | T-009, T-037 | M | F-003 |
| T-046 | Handle ActionPush: branch push with confirmation overlay | spec-tui.md | R13 | T-028, T-027, T-037 | S | F-006 |
| T-047 | Handle ActionCheckout/ActionResume | spec-tui.md | R13 | T-037 | S | F-006 |
| T-048 | Handle ActionScrollUp/Down for preview and diff tabs | spec-tui.md | R13 | T-029, T-030, T-037 | S | F-008 |
| T-049 | Integrate SitePicker into new-instance flow | spec-tui.md | R11 | T-035, T-032 | M | F-007 |
| T-050 | Validate persistence on load (tmux/worktree existence) | spec-session.md | R3 | T-021 | S | F-009 |
| T-051 | Parse --autoyes/-y flag, pass to TUI and AutoYes | spec-cli.md | R2 | T-039 | S | F-010 |
| T-052 | Status command: show progress counts from site tracking | spec-cli.md | R3 | T-040, T-014, T-017 | S | F-012 |
| T-053 | Instance list: add branch name and diff stats to rows | spec-tui.md | R2 | T-024, T-012 | S | F-011 |
| T-054 | DiffTab: apply scrollPos to Content() output | spec-tui.md | R5 | T-030 | S | F-014 |
| T-055 | Context-adaptive menu items | spec-tui.md | R7 | T-026 | S | F-013 |
| T-056 | Preflight check for program binary | spec-cli.md | R2 | T-039 | S | F-015 |
**Inspection additions: 14 tasks, 1 tier**
**New total: 56 tasks, 7 tiers**
+134 -18
View File
@@ -14,6 +14,7 @@ MAX_ITERATIONS=20
COMPLETION_PROMISE="BLUEPRINT COMPLETE"
CODEX_MODEL="gpt-5.4"
REVIEW_INTERVAL=2
EXPLICIT_FILE=""
while [[ $# -gt 0 ]]; do
case $1 in
@@ -22,7 +23,11 @@ while [[ $# -gt 0 ]]; do
Blueprint Build — Run the implementation loop
USAGE:
/blueprint build [OPTIONS]
/blueprint build [FILE] [OPTIONS]
ARGUMENTS:
FILE Path to build site file (optional)
Accepts @path or plain path (@ prefix is stripped)
OPTIONS:
--filter <pattern> Scope to blueprints/build site matching pattern
@@ -35,8 +40,9 @@ OPTIONS:
EXAMPLES:
/blueprint build
/blueprint build context/plans/build-site.md
/blueprint build @context/sites/build-site-v2.md
/blueprint build --filter v2
/blueprint build --peer-review
/blueprint build --peer-review --max-iterations 30
HELP_EOF
exit 0
@@ -71,10 +77,25 @@ HELP_EOF
COMPLETION_PROMISE="$2"
shift 2
;;
*)
echo "❌ Unexpected argument: $1" >&2
-*)
echo "❌ Unknown option: $1" >&2
exit 1
;;
*)
# Positional argument: treat as explicit file path
# Strip leading @ (Claude Code convention)
arg="${1#@}"
if [[ -n "$EXPLICIT_FILE" ]]; then
echo "❌ Unexpected argument: $1 (file already set to $EXPLICIT_FILE)" >&2
exit 1
fi
if [[ ! -f "$arg" ]]; then
echo "❌ File not found: $arg" >&2
exit 1
fi
EXPLICIT_FILE="$arg"
shift
;;
esac
done
@@ -96,6 +117,17 @@ FRONTIER_FILE=""
ALL_CANDIDATES=()
SITE_DIR=""
# ─── Explicit file path bypasses discovery ─────────────────────────────────
if [[ -n "$EXPLICIT_FILE" ]]; then
FRONTIER_FILE="$EXPLICIT_FILE"
echo "📋 Build site: $FRONTIER_FILE"
fi
# ─── Discovery (only if no explicit file) ──────────────────────────────────
if [[ -z "$FRONTIER_FILE" ]]; then
for candidate_dir in "context/plans" "context/sites"; do
if [[ -d "$candidate_dir" ]]; then
while IFS= read -r -d '' f; do
@@ -153,11 +185,41 @@ else
task_count=$(grep -cE '\|\s*T-([A-Za-z0-9]+-)*[0-9]+\s*\|' "$f" 2>/dev/null || echo "?")
done_count=0
if [[ -d "context/impl" ]]; then
for task_id in $(grep -oE 'T-([A-Za-z0-9]+-)*[0-9]+' "$f" 2>/dev/null | sort -u); do
if grep -rlq "$task_id.*DONE\|DONE.*$task_id" context/impl/ 2>/dev/null; then
done_count=$((done_count + 1))
# Find impl files scoped to this build site (have "Build site: <path>" line)
SCOPED_IMPL_FILES=()
UNSCOPED_IMPL_FILES=()
for impl_f in context/impl/impl-*.md; do
[[ ! -f "$impl_f" ]] && continue
declared_site=$(sed -n 's/^Build site:[[:space:]]*\([^[:space:]]*\).*/\1/p' "$impl_f" 2>/dev/null | head -1)
if [[ -n "$declared_site" ]]; then
# Impl file declares a build site — only include if it matches this candidate
if [[ "$declared_site" == "$f" || "$(basename "$declared_site")" == "$(basename "$f")" ]]; then
SCOPED_IMPL_FILES+=("$impl_f")
fi
# else: declared for a different site, skip entirely
else
UNSCOPED_IMPL_FILES+=("$impl_f")
fi
done
# Search scoped files first; fall back to unscoped only if no scoped files exist
SEARCH_FILES=("${SCOPED_IMPL_FILES[@]+"${SCOPED_IMPL_FILES[@]}"}")
if [[ ${#SEARCH_FILES[@]} -eq 0 ]]; then
SEARCH_FILES=("${UNSCOPED_IMPL_FILES[@]+"${UNSCOPED_IMPL_FILES[@]}"}")
fi
if [[ ${#SEARCH_FILES[@]} -gt 0 ]]; then
for task_id in $(grep -oE 'T-([A-Za-z0-9]+-)*[0-9]+' "$f" 2>/dev/null | sort -u); do
for impl_f in "${SEARCH_FILES[@]}"; do
if grep -qE "(\b${task_id}\b.*DONE|DONE.*\b${task_id}\b)" "$impl_f" 2>/dev/null; then
done_count=$((done_count + 1))
break # count each task only once
fi
done
done
fi
# Safety cap: done can't exceed total
if [[ "$task_count" =~ ^[0-9]+$ ]] && [[ $done_count -gt $task_count ]]; then
done_count=$task_count
fi
fi
echo " ${IDX}. $(basename "$f")${done_count}/${task_count} tasks done"
IDX=$((IDX + 1))
@@ -170,7 +232,13 @@ fi
echo "📋 Build site: $FRONTIER_FILE"
fi # end discovery block (skipped when EXPLICIT_FILE is set)
# ─── Auto-archive previous cycle ────────────────────────────────────────────
#
# Only archive if ALL tasks in the selected build site are DONE in impl tracking.
# If incomplete tasks remain (e.g. after inspect added new tasks), keep impl files
# so the next build cycle knows what's already done.
ARCHIVE_COUNT=0
if [[ -d "context/impl" ]]; then
@@ -181,18 +249,58 @@ if [[ -d "context/impl" ]]; then
done
if [[ "$HAS_OLD" == "true" ]]; then
ARCHIVE_DIR="context/impl/archive/$(date -u +%Y%m%d-%H%M%S)"
mkdir -p "$ARCHIVE_DIR"
# Check if the build site still has incomplete tasks (scoped to relevant impl files)
SHOULD_ARCHIVE=true
if [[ -n "$FRONTIER_FILE" && -f "$FRONTIER_FILE" ]]; then
# Find impl files associated with this build site
ARCHIVE_CHECK_FILES=()
ARCHIVE_UNSCOPED_FILES=()
for impl_f in context/impl/impl-*.md; do
[[ ! -f "$impl_f" ]] && continue
declared_site=$(sed -n 's/^Build site:[[:space:]]*\([^[:space:]]*\).*/\1/p' "$impl_f" 2>/dev/null | head -1)
if [[ -n "$declared_site" ]]; then
if [[ "$declared_site" == "$FRONTIER_FILE" || "$(basename "$declared_site")" == "$(basename "$FRONTIER_FILE")" ]]; then
ARCHIVE_CHECK_FILES+=("$impl_f")
fi
else
ARCHIVE_UNSCOPED_FILES+=("$impl_f")
fi
done
CHECK_FILES=("${ARCHIVE_CHECK_FILES[@]+"${ARCHIVE_CHECK_FILES[@]}"}")
if [[ ${#CHECK_FILES[@]} -eq 0 ]]; then
CHECK_FILES=("${ARCHIVE_UNSCOPED_FILES[@]+"${ARCHIVE_UNSCOPED_FILES[@]}"}")
fi
for task_id in $(grep -oE 'T-([A-Za-z0-9]+-)*[0-9]+' "$FRONTIER_FILE" 2>/dev/null | sort -u); do
FOUND_DONE=false
for impl_f in "${CHECK_FILES[@]+"${CHECK_FILES[@]}"}"; do
if grep -qE "(\b${task_id}\b.*DONE|DONE.*\b${task_id}\b)" "$impl_f" 2>/dev/null; then
FOUND_DONE=true
break
fi
done
if [[ "$FOUND_DONE" == "false" ]]; then
SHOULD_ARCHIVE=false
break
fi
done
fi
for f in context/impl/loop-log.md context/impl/peer-review-findings.md context/peer-review-findings.md; do
[[ -f "$f" ]] && mv "$f" "$ARCHIVE_DIR/" && ARCHIVE_COUNT=$((ARCHIVE_COUNT + 1))
done
for f in context/impl/impl-*.md; do
[[ -f "$f" ]] && [[ "$(basename "$f")" != "CLAUDE.md" ]] && mv "$f" "$ARCHIVE_DIR/" && ARCHIVE_COUNT=$((ARCHIVE_COUNT + 1))
done
if [[ "$SHOULD_ARCHIVE" == "true" ]]; then
ARCHIVE_DIR="context/impl/archive/$(date -u +%Y%m%d-%H%M%S)"
mkdir -p "$ARCHIVE_DIR"
if [[ $ARCHIVE_COUNT -gt 0 ]]; then
echo "📦 Archived $ARCHIVE_COUNT files from previous cycle → $ARCHIVE_DIR/"
for f in context/impl/loop-log.md context/impl/peer-review-findings.md context/peer-review-findings.md; do
[[ -f "$f" ]] && mv "$f" "$ARCHIVE_DIR/" && ARCHIVE_COUNT=$((ARCHIVE_COUNT + 1))
done
for f in context/impl/impl-*.md; do
[[ -f "$f" ]] && [[ "$(basename "$f")" != "CLAUDE.md" ]] && mv "$f" "$ARCHIVE_DIR/" && ARCHIVE_COUNT=$((ARCHIVE_COUNT + 1))
done
if [[ $ARCHIVE_COUNT -gt 0 ]]; then
echo "📦 Archived $ARCHIVE_COUNT files from previous cycle → $ARCHIVE_DIR/"
fi
else
echo "♻️ Incomplete tasks found — keeping impl tracking from previous cycle"
fi
fi
fi
@@ -331,7 +439,9 @@ unblocked task, read its blueprint, implement it, validate, commit.
## Read These First (every iteration)
1. \`context/impl/loop-log.md\` — your iteration history (if exists)
2. \`$FRONTIER_FILE\` — the task dependency graph
3. Any \`context/impl/impl-*.md\` files — per-domain progress
3. Impl tracking files in \`context/impl/\` — but ONLY files that are scoped to this build site.
An impl file is scoped if it contains \`Build site: $FRONTIER_FILE\` (or the matching basename).
Ignore impl files that declare a different build site. If no scoped files exist, read all impl files.
## Blueprints (read when implementing a specific requirement)
$(echo -e "$SPEC_LISTING")
@@ -367,11 +477,17 @@ created: \"{CURRENT_DATE_UTC}\"
last_edited: \"{CURRENT_DATE_UTC}\"
---
# Implementation Tracking: {domain}
Build site: $FRONTIER_FILE
| Task | Status | Notes |
|------|--------|-------|
| T-001 | DONE | what was done |
\`\`\`
The \`Build site:\` line is REQUIRED — it scopes this impl file to the correct build site
so task IDs don't collide across different build sites.
Append to \`context/impl/loop-log.md\` (create if missing):
\`\`\`markdown