Overview WikiPrepareViewer displays planning documentation in a structured, project-based format. The “prepare” phase represents work between ideation (OnIt) and verification (Prove), focusing on detailed planning before implementation.
┌─────────────────────────────────────────────────────┐ │ Work-Wiki Workflow Stages │ ├─────────────────────────────────────────────────────┤ │ │ │ OnIt → Prepare → Prove → Research │ │ (ideate) (plan) (verify) (archive) │ │ │ │ Prepare: Planning before implementation │ │ │ └─────────────────────────────────────────────────────┘
Architecture Dual Mode System:
Project Mode (preferred): Folder-based with README.md manifestDocument Mode (legacy): Flat files with timestamp naming
Class Structure: WikiBaseViewer (580 lines, abstract) ↓ extends WikiPrepareViewer (789 lines, concrete) - documents: PrepareDocument[] - projects: PrepareProject[]
2.25x larger than OnIt (789 vs 350 lines) due to dual mode support and project features.
Data Models PrepareProject (Modern) Structure:
Folder-based organization
README.md as project manifest
Multiple files per project
Status from frontmatter
Progress from checkbox counting
┌───────────────────────────────────────────────────────────────────────┐ │ PrepareProject │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ name: string // Folder name │ │ path: string // Full path │ │ displayName: string // Human-readable │ │ status: 'ready' | 'in-progress' | 'blocked' | 'completed' │ │ files: WikiDocument[] // Project files │ │ progress: { │ │ total: number // Total checkboxes │ │ completed: number // Checked boxes │ │ percentage: number // Completion % │ │ } │ │ modifiedAt: number // Latest modification │ │ │ └───────────────────────────────────────────────────────────────────────┘
Example Structure: wip/prepare/ project-alpha/ README.md ← Manifest (status, checkboxes) analysis.md dependencies.md implementation.md
PrepareDocument (Legacy) Structure:
Flat file structure
Timestamp-based naming
Single file per document
Analysis type inference
┌───────────────────────────────────────────────────────────────────────┐ │ PrepareDocument extends WikiDocument │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ date: string // "2025-12-28" │ │ time: string // "14:30" │ │ featureName: string // Extracted from filename │ │ analysisType: 'code' | 'design' | 'dependency' | 'general' │ │ implementationReady: boolean │ │ │ └───────────────────────────────────────────────────────────────────────┘
Filename Pattern: YYYY-MM-DD-HH-MM-feature-name.md
Status System Four Project States: Status Color Meaning Ready Green Planning complete, ready to implement In Progress Blue Planning ongoing Blocked Red Cannot proceed, needs resolution Completed Gray Implementation done, for reference
Status Extraction:
Priority 1 : Explicit frontmatter in README.md
--- status : in-progress ---
Priority 2 : Content keywords (blocked, completed, in progress)Priority 3 : Default to “ready”
Progress Tracking Automatic checkbox counting in README.md:
Example: ## Tasks - [ x ] Define API endpoints ← Completed - [ x ] Create data models ← Completed - [ ] Write migration scripts ← Incomplete - [ ] Test database connections ← Incomplete Progress: 2/4 (50%)
Patterns:
Unchecked: - [ ]
Checked: - [x] or - [X] (case-insensitive)
Display format: [2/4 50%] in project card header.
Rendering Modes Project Mode (Preferred) Card-based UI: ┌─────────────────────────────────────────────────────┐ │ v Project Alpha [Ready] [2/4 50%] │ ├─────────────────────────────────────────────────────┤ │ > README.md 1.2KB │ │ > analysis.md 3.4KB │ │ > dependencies.md 2.1KB │ └─────────────────────────────────────────────────────┘
Features:
Expandable project cards
File list within each project
Status badges with progress indicators
First project auto-expanded
Document Mode (Legacy) Type-grouped list: ┌─────────────────────────────────────────────────────┐ │ ● Code Analysis (3) │ │ > 2025-12-28 14:30 - api-code-review │ │ > 2025-12-27 10:15 - implementation-plan │ │ │ │ ● Design (2) │ │ > 2025-12-26 09:00 - architecture-design │ └─────────────────────────────────────────────────────┘
Analysis Types:
Code : Blue dot, code analysis docsDesign : Purple dot, design/architecture docsDependency : Orange dot, integration docsGeneral : Gray dot, other planning docs
Type inference from filename keywords (code, design, dependency, etc.).
Navigation Three Click Targets:
WIP/Wiki Toggle : Switch data source (wip ↔ wiki)Project Card Headers : Expand/collapse file listFile Accordion Headers : Load document content inline
Event Propagation:
File accordion clicks use stopPropagation() to prevent card toggle
Critical for nested click handlers (files inside cards)
Sticky Headers:
Project headers stick during content scroll
Calculated position accounts for viewer header height
State Management ┌───────────────────────────────────────────────────────────────────────┐ │ STATE PROPERTIES │ ├───────────────────────────────────────────────────────────────────────┤ │ │ │ documents: PrepareDocument[] = [] // Legacy flat files │ │ projects: PrepareProject[] = [] // Modern folder-based │ │ │ │ LOADING STRATEGY: │ │ ───────────────── │ │ init() │ │ │ │ │ ├── await loadPrepareProjects() // Load folders first │ │ │ │ │ ├── await loadPrepareDocuments() // Load legacy files │ │ │ │ │ └── render() // Prioritize projects │ │ │ │ RENDER PRIORITY: │ │ ──────────────── │ │ 1. If projects.length > 0 → Project mode │ │ 2. Else if documents.length > 0 → Document mode │ │ 3. Else → Empty state │ │ │ └───────────────────────────────────────────────────────────────────────┘
Comparison with OnIt Feature OnIt Prepare Lines of code 350 789 Data arrays 1 (sessions) 2 (projects, documents) File structure Flat only Folders + flat Status states 3 4 (projects) + 2 (docs) Progress tracking No Yes (checkboxes) Frontmatter parsing No Yes Display modes 1 (list) 2 (cards + list) Render methods 7 12 Filename patterns 6 1
Prepare is more complex due to dual mode support and project organization features.
Workflow Integration OnIt → Prepare Transition:
OnIt Phase : Document work in session fileswip/onit/2025-12-28-14-30-feature-exploration.md
Prepare Phase : Crystallize into structured projectwip/prepare/feature-implementation/ README.md analysis.md dependencies.md
Graduate : Move to wiki when planning completewiki/prepare/feature-implementation/
No automatic conversion - manual workflow by design. Human decides when work transitions to planning phase.
THE CENTER Structure emerges from planning
Technical Credibility Uses YAML frontmatter parsing for status. Regex-based checkbox counting. Dual data model supports gradual migration. Extends WikiBaseViewer for shared infrastructure. Implements SMPC principle: complexity only where needed.
