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 pointprojectSlug: Project identifier (e.g., “monolex-006”)category: Wiki category (“onit”, “prepare”)isWip: WIP vs Wiki mode flagsettings: User preferences from localStoragecurrentDocument: Currently selected document path
Base Class Methods 18 protected methods shared: Core Initialization:
initBase(): Setup container, projectSlug, settingsloadDocuments(): IPC call to list documentsgetBasePath(): Path calculation (wip vs wiki)loadSettings(): Load from localStorage
Document Operations:
loadDocumentContent(): Read file via IPCgraduateDocument(): Move wip → wikitoggleAccordion(): Expand/collapse with cachingrenderDocumentInline(): Markdown rendering
Rendering Helpers:
getViewerStyles(): Font, size, opacityrenderHeader(): Title, icon, countrenderToggleButtons(): WIP/Wiki buttonsgetToggleButtonStyle(): 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:
attachToggleListeners() (base)Session accordion headers
Prepare:
attachToggleListeners() (base)Project card headers
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 filesPrepare: 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
Technical Credibility 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.
