> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Prepare Viewer Overview
> Pre-implementation planning viewer with project organization and progress tracking
## 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:**
1. **Project Mode** (preferred): Folder-based with README.md manifest
2. **Document 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:**
1. **Priority 1**: Explicit frontmatter in README.md
```yaml theme={null}
---
status: in-progress
---
```
2. **Priority 2**: Content keywords (blocked, completed, in progress)
3. **Priority 3**: Default to "ready"
## Progress Tracking
Automatic checkbox counting in README.md:
**Example:**
```markdown theme={null}
## 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 docs
* **Design**: Purple dot, design/architecture docs
* **Dependency**: Orange dot, integration docs
* **General**: Gray dot, other planning docs
Type inference from filename keywords (code, design, dependency, etc.).
## Navigation
**Three Click Targets:**
1. **WIP/Wiki Toggle**: Switch data source (wip ↔ wiki)
2. **Project Card Headers**: Expand/collapse file list
3. **File 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:**
1. **OnIt Phase**: Document work in session files
```
wip/onit/2025-12-28-14-30-feature-exploration.md
```
2. **Prepare Phase**: Crystallize into structured project
```
wip/prepare/feature-implementation/
README.md
analysis.md
dependencies.md
```
3. **Graduate**: Move to wiki when planning complete
```
wiki/prepare/feature-implementation/
```
No automatic conversion - manual workflow by design. Human decides when work transitions to planning phase.
THE CENTER
Structure emerges from planning
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.