> ## 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.
# OnIt-Prepare Integration
> Shared patterns and workflow transitions between OnIt and Prepare viewers
## Integration Overview
WikiOnitViewer and WikiPrepareViewer share significant infrastructure through WikiBaseViewer inheritance while serving distinct purposes in the work-wiki workflow.
```
┌─────────────────────────────────────────────────────┐
│ Shared Base Architecture │
├─────────────────────────────────────────────────────┤
│ │
│ WikiBaseViewer (580 lines) │
│ ↓ extends ↓ extends │
│ WikiOnitViewer WikiPrepareViewer │
│ (350 lines) (789 lines) │
│ │
│ Shared: │
│ - Accordion system │
│ - Toggle buttons │
│ - Document loading │
│ - Settings management │
│ │
└─────────────────────────────────────────────────────┘
```
## Shared Infrastructure
### Base Class Properties
**Inherited by both viewers:**
* `container`: DOM mount point
* `projectSlug`: Project identifier (e.g., "monolex-006")
* `category`: Wiki category ("onit", "prepare")
* `isWip`: WIP vs Wiki mode flag
* `settings`: User preferences from localStorage
* `currentDocument`: Currently selected document path
### Base Class Methods
**18 protected methods shared:**
**Core Initialization:**
* `initBase()`: Setup container, projectSlug, settings
* `loadDocuments()`: IPC call to list documents
* `getBasePath()`: Path calculation (wip vs wiki)
* `loadSettings()`: Load from localStorage
**Document Operations:**
* `loadDocumentContent()`: Read file via IPC
* `graduateDocument()`: Move wip → wiki
* `toggleAccordion()`: Expand/collapse with caching
* `renderDocumentInline()`: Markdown rendering
**Rendering Helpers:**
* `getViewerStyles()`: Font, size, opacity
* `renderHeader()`: Title, icon, count
* `renderToggleButtons()`: WIP/Wiki buttons
* `getToggleButtonStyle()`: Active state styling
## Code Reuse Analysis
**OnIt Reuse:**
* Own code: 350 lines
* Reused: \~240 lines from base
* Effective total: \~590 lines
* Reuse ratio: 41%
**Prepare Reuse:**
* Own code: 789 lines
* Reused: \~240 lines from base
* Effective total: \~1029 lines
* Reuse ratio: 23%
OnIt has higher reuse ratio due to simpler requirements. Prepare's lower ratio reflects additional features (projects, progress, dual display).
## Shared Patterns
### Initialization Pattern
Both follow identical lifecycle:
```
┌───────────────────────────────────────────────────────────────────────┐
│ COMMON INITIALIZATION PATTERN │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ init(container, projectSlug, category) │
│ │ │
│ ├── STEP 1: Base initialization │
│ │ initBase(container, projectSlug) │
│ │ │
│ ├── STEP 2: Set category │
│ │ this.category = category │
│ │ │
│ ├── STEP 3: Load data (viewer-specific) │
│ │ await this.loadData() │
│ │ │
│ └── STEP 4: Render UI │
│ this.render() │
│ │
│ DIFFERENCE: │
│ OnIt: Single loadSessions() call │
│ Prepare: Dual loadProjects() + loadDocuments() calls │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
### Refresh Pattern
Identical refresh implementation:
```
┌───────────────────────────────────────────────────────────────────────┐
│ REFRESH PATTERN │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ refresh() │
│ │ │
│ ├── await this.loadData() ← Reload from filesystem │
│ │ │
│ └── this.render() ← Replace entire DOM │
│ │
│ Both completely replace state and DOM on refresh. │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
### Event Listener Pattern
Both use base class toggle listeners plus viewer-specific handlers:
**OnIt:**
1. `attachToggleListeners()` (base)
2. Session accordion headers
**Prepare:**
1. `attachToggleListeners()` (base)
2. Project card headers
3. File accordion headers (with `stopPropagation()`)
## Data Model Comparison
### OnIt Session
```
┌───────────────────────────────────────────────────────────────────────┐
│ OnitSession extends WikiDocument │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ date: string // "2025-12-28" │
│ time: string // "14:30:45" │
│ sessionName: string │
│ pattern: 1 | 2 | 3 | 4 | 5 | 6 │
│ sortKey: string │
│ status: 'active' | 'completed' | 'archived' │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
### Prepare Project
```
┌───────────────────────────────────────────────────────────────────────┐
│ PrepareProject (NOT extending WikiDocument) │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ name: string │
│ displayName: string │
│ status: 'ready' | 'in-progress' | 'blocked' | 'completed' │
│ files: WikiDocument[] │
│ progress: { total, completed, percentage } │
│ modifiedAt: number │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
### Prepare Document
```
┌───────────────────────────────────────────────────────────────────────┐
│ PrepareDocument extends WikiDocument │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ date: string // "2025-12-28" │
│ time: string // "14:30" │
│ featureName: string │
│ analysisType: 'code' | 'design' | 'dependency' | 'general' │
│ implementationReady: boolean │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
## Status Systems
### OnIt (3 states, time-based)
| Status | Trigger | Color |
| --------- | ---------------------- | ----- |
| Active | Modified \< 24h | Green |
| Completed | Modified > 24h, in WIP | Blue |
| Archived | In wiki folder | Gray |
**Automatic determination** based on modification time and location.
### Prepare Project (4 states, explicit)
| Status | Source | Color |
| ----------- | ----------- | ----- |
| Ready | Frontmatter | Green |
| In Progress | Frontmatter | Blue |
| Blocked | Frontmatter | Red |
| Completed | Frontmatter | Gray |
**Explicit declaration** in README.md frontmatter, with keyword fallback.
## Filename Parsing
### OnIt: 6-Pattern External Parser
Handles historical variety:
* Pattern 1-3: Timestamp variations (with/without seconds)
* Pattern 4: Date only
* Pattern 5: Prefix format
* Pattern 6: Fallback (no date)
**Coverage:** 100% of 1,873 files
### Prepare: Single-Pattern Inline
Simple regex:
```
/^(\d{4}-\d{2}-\d{2})-(\d{2}-\d{2})-(.+)\.md$/
```
**Rationale:** Newer category with consistent naming from start.
**SMPC Principle:** Use complexity only where needed.
## Render Architecture
### OnIt (7 methods, flat list)
**Hierarchy:**
```
Header
↓
Session List
↓
Session Items (accordion)
```
Single display mode, 2-level hierarchy.
### Prepare (12 methods, dual mode)
**Project Mode Hierarchy:**
```
Header
↓
Project Cards
↓
Project Files (accordion)
```
**Document Mode Hierarchy:**
```
Header
↓
Type Groups
↓
Document Items (accordion)
```
Dual display mode, 3-level hierarchy (project mode).
## Workflow Transitions
### OnIt → Prepare Flow
**Stage 1: Active Work (OnIt)**
```
wip/onit/2025-12-28-14-30-feature-exploration.md
Content:
- Exploration notes
- Quick discoveries
- TODO items
- Questions
```
**Stage 2: Structured Planning (Prepare)**
```
wip/prepare/feature-implementation/
README.md ← Status, checkboxes
analysis.md ← References OnIt notes
dependencies.md
implementation.md
```
**Stage 3: Graduate to Wiki**
```
wiki/prepare/feature-implementation/
```
**No automatic conversion** - manual workflow by design. Human decides transition timing.
## Path Calculation
Both use identical base class path logic:
```
┌───────────────────────────────────────────────────────────────────────┐
│ PATH CALCULATION (WikiBaseViewer.getBasePath) │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ BASE = "~/Library/Application Support/monolex/protocols/niia/work" │
│ │
│ FORMULA: │
│ folder = isWip ? "wip" : "wiki" │
│ path = "{base}/{projectSlug}/{folder}/{category}" │
│ │
│ EXAMPLES: │
│ OnIt WIP: .../monolex-006/wip/onit │
│ OnIt Wiki: .../monolex-006/wiki/onit │
│ Prepare WIP: .../monolex-006/wip/prepare │
│ Prepare Wiki:.../monolex-006/wiki/prepare │
│ │
│ Ensures consistent behavior across all viewers. │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
## Global Registration
Both register on window object for dynamic instantiation:
```
┌───────────────────────────────────────────────────────────────────────┐
│ WINDOW GLOBAL REGISTRATION │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ REGISTRATION: │
│ window.WikiOnitViewer = WikiOnitViewer │
│ window.WikiPrepareViewer = WikiPrepareViewer │
│ │
│ USAGE (Tab Controller): │
│ ┌────────────────────────────────┐ │
│ │ category === 'onit'? │ │
│ └───────────────┬────────────────┘ │
│ ┌───────┴───────┐ │
│ │ │ │
│ YES NO │
│ │ │ │
│ ▼ ▼ │
│ new WikiOnitViewer() new WikiPrepareViewer() │
│ │ │ │
│ └───────┬───────┘ │
│ │ │
│ ▼ │
│ await viewer.init(container, projectSlug, category) │
│ │
└───────────────────────────────────────────────────────────────────────┘
```
## Feature Matrix
| Feature | OnIt | Prepare |
| ------------------- | ---------- | ------------- |
| **Metrics** | | |
| Lines of code | 350 | 789 |
| Data arrays | 1 | 2 |
| Render methods | 7 | 12 |
| Base reuse ratio | 41% | 23% |
| **Parsing** | | |
| Filename patterns | 6 | 1 |
| Parser location | External | Inline |
| **Status** | | |
| Status states | 3 | 4 (projects) |
| Determination | Time-based | Frontmatter |
| **Display** | | |
| Display modes | 1 | 2 |
| Visual hierarchy | 2 levels | 3 levels |
| Default expand | None | First project |
| **Features** | | |
| Progress tracking | No | Yes |
| Frontmatter parsing | No | Yes |
| Type grouping | No | Yes |
## Integration Principles
**Shared Infrastructure:**
* Common base enables consistent UX
* Accordion system preserves content inline
* Toggle mechanism supports document lifecycle
**Specialized Implementation:**
* OnIt: Simple, chronological, session-based
* Prepare: Complex, project-based, progress-tracked
**SMPC Application:**
* Shared patterns for common behavior
* Specialized code only where needed
* External parser for OnIt's complexity
* Inline parser for Prepare's simplicity
THE CENTER
Integration enables workflow continuity
Shared WikiBaseViewer abstract class (580 lines). TypeScript inheritance with protected members. Consistent IPC patterns via Tauri commands. Single source of truth for path calculation. Window global registration for dynamic instantiation.