Prepare Viewer Overview

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 manifest
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:

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 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:

WIP/Wiki Toggle: Switch data source (wip ↔ wiki)
Project Card Headers: Expand/collapse file list
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:

OnIt Phase: Document work in session files

wip/onit/2025-12-28-14-30-feature-exploration.md

Prepare Phase: Crystallize into structured project

wip/prepare/feature-implementation/
  README.md
  analysis.md
  dependencies.md

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.

Get Started

Articles

So Anthropic

User Guide

Philosophy

Applied Philosophy

Architecture

Gestalt Color

Transparency

Terminal Core

Features

VariableMD

Research

CodexMono

OpenCLIs

vpncli

MonoSurf

AI-CLIs

Prepare Viewer Overview

Overview

Architecture

Data Models

PrepareProject (Modern)

PrepareDocument (Legacy)

Status System

Progress Tracking

Rendering Modes

Project Mode (Preferred)

Document Mode (Legacy)

Navigation

State Management

Comparison with OnIt

Workflow Integration

Technical Credibility

​Overview

​Architecture

​Data Models

​PrepareProject (Modern)

​PrepareDocument (Legacy)

​Status System

​Progress Tracking

​Rendering Modes

​Project Mode (Preferred)

​Document Mode (Legacy)

​Navigation

​State Management

​Comparison with OnIt

​Workflow Integration

Technical Credibility

Overview

Architecture

Data Models

PrepareProject (Modern)

PrepareDocument (Legacy)

Status System

Progress Tracking

Rendering Modes

Project Mode (Preferred)

Document Mode (Legacy)

Navigation

State Management

Comparison with OnIt

Workflow Integration