Skip to main content

​
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
Interface: 
interface 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
Interface: 
interface 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:
StatusColorMeaning
ReadyGreenPlanning complete, ready to implement
In ProgressBluePlanning ongoing
BlockedRedCannot proceed, needs resolution
CompletedGrayImplementation done, for reference
Status Extraction:
  1. Priority 1: Explicit frontmatter in README.md 
    ---
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: 
## 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.). 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: 
private documents: PrepareDocument[] = [];
private projects: PrepareProject[] = [];
Loading Strategy: 
async init() {
  await loadPrepareProjects();   // Load folders
  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

FeatureOnItPrepare
Lines of code350789
Data arrays1 (sessions)2 (projects, documents)
File structureFlat onlyFolders + flat
Status states34 (projects) + 2 (docs)
Progress trackingNoYes (checkboxes)
Frontmatter parsingNoYes
Display modes1 (list)2 (cards + list)
Render methods712
Filename patterns61
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

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.