Skip to main content

​
Rendering Pipeline

The render system transforms parsed OnitSession data into interactive HTML through a hierarchical method structure. 
┌─────────────────────────────────────────────────┐
│  Render Flow                                    │
├─────────────────────────────────────────────────┤
│                                                 │
│  render()                                       │
│    ↓                                            │
│  renderHeader() + count                         │
│    ↓                                            │
│  sessions.length > 0?                           │
│    ↓              ↓                             │
│  renderSessionList()  renderEmptyMessage()      │
│    ↓                                            │
│  container.innerHTML = combined HTML            │
│    ↓                                            │
│  attachEventListeners()                         │
│                                                 │
└─────────────────────────────────────────────────┘

​
Render Methods

Method Inventory (7 total):
MethodPurpose
render()Main orchestrator
renderSessionList()Session accordion container
renderSessionItemHtml()Individual session item
createStatusIconElement()Status icon SVG
getStatusBgColor()Background color for status
getStatusTextColor()Text color for status
renderEmptyMessage()Empty state display
The base class provides renderHeader() and getViewerStyles() for consistent UI across all wiki viewers.

​
Session Item Structure

Each session renders as an accordion item with status indicators and metadata. Visual Layout: 
┌─────────────────────────────────────────────────┐
│ [>]  [●]  session-name          14:30  [active] │
│  ↑    ↑         ↑                 ↑        ↑    │
│ arrow dot      name             date    status  │
│                                                 │
│ (collapsed - click to expand)                   │
└─────────────────────────────────────────────────┘
Element Breakdown:
  • Arrow icon: 16×16px, rotates 90° when expanded
  • Status dot: 6×6px circle, color matches status badge
  • Session name: Flex:1, truncates with ellipsis
  • Date/time: 11px font, never truncates
  • Status badge: 10px font, 2px padding, rounded corners

​
Status Visualization

Three status types with consistent color coding:
StatusColorRGBBackgroundIcon
ActiveGreenrgb(16, 185, 129)15% opacityCheckCircle
CompletedBluergb(59, 130, 246)15% opacityCheckCircle
ArchivedGrayrgb(107, 114, 128)15% opacityPackage
Status is determined automatically:
  • Active: modifiedAt within 24 hours
  • Completed: In WIP folder, older than 24 hours
  • Archived: In wiki folder (not WIP)

​
Date Formatting

Smart date display based on recency: Formatting Logic: 
┌─────────────────────────────────────────────────┐
│  Date Display Decision                          │
├─────────────────────────────────────────────────┤
│                                                 │
│  Unknown date?                                  │
│    YES → formatRelativeTime() or ""             │
│    NO  → Check modification time                │
│                                                 │
│  Modified < 24h ago?                            │
│    YES → Show time (HH:MM)                      │
│                                                 │
│  Modified < 48h ago?                            │
│    YES → Show "yesterday"                       │
│                                                 │
│  Modified > 48h ago?                            │
│    YES → Show date (YYYY-MM-DD)                 │
│                                                 │
└─────────────────────────────────────────────────┘
Examples:
  • Modified 2 hours ago: “14:30”
  • Modified yesterday: “yesterday”
  • Modified 3 days ago: “2025-12-25”

​
Event System

Two-layer event handling with base class integration.

​
Toggle Listeners

Inherited from WikiBaseViewer, handles WIP/Wiki switching: Flow:
  1. User clicks [WIP] or [Wiki] button
  2. Get data-mode attribute
  3. Update isWip flag
  4. Call refresh() (reload data + re-render)
Effect:
  • Changes filesystem path (wip/onit/ ↔ wiki/onit/)
  • Loads different session set
  • Resets all UI state (accordion expansions lost)

​
Accordion Listeners

Handles session expansion/collapse with content loading: Flow:
  1. User clicks session header
  2. Query .wiki-accordion-item wrapper
  3. Get data-doc-path attribute
  4. Call toggleAccordion() from base class
Accordion State Machine: 
┌─────────────────────────────────────────────────┐
│  Accordion States                               │
├─────────────────────────────────────────────────┤
│                                                 │
│  CLOSED (initial)                               │
│    ↓ Click header                               │
│  LOADING                                        │
│    ↓ Content loads                              │
│  EXPANDED (content visible)                     │
│    ↓ Click header again                         │
│  COLLAPSED (cached)                             │
│    ↓ Click header again                         │
│  EXPANDED (instant - from cache)                │
│                                                 │
└─────────────────────────────────────────────────┘
Key Features:
  • Content caching: No re-load on re-expand
  • Sticky headers: Header sticks during scroll
  • Smooth scrolling: scrollIntoView() on expand

​
Sticky Header Behavior

When accordion expands, its header becomes sticky below the viewer header. Calculation: 
// From WikiBaseViewer
const viewerHeader = container.querySelector(".wiki-viewer-header");
let stickyTop = 0;
if (viewerHeader) stickyTop += viewerHeader.offsetHeight;

header.style.position = "sticky";
header.style.top = `${stickyTop}px`;  // ~40px for OnIt
This keeps the session header visible when scrolling through long content.

​
Empty State

Context-aware empty state message based on current mode: WIP Mode: 
No OnIt sessions found

Create a new session with /niia-onit
Wiki Mode: 
No OnIt sessions found

Graduate WIP sessions to archive them here
The message guides users toward the appropriate action for each context.

​
Refresh Mechanism

Complete data reload and UI re-render: Refresh Flow: 
async refresh(): Promise<void> {
  await this.loadSessions();  // Reload from filesystem
  this.render();              // Replace entire DOM
}
State Loss on Refresh:
  • All accordion expansions collapse
  • Cached content is discarded
  • Scroll position may reset
  • Only first session expanded (default)
Trade-off: Simplicity over state preservation (SMPC principle).

​
Content Export

The getContent() method provides plain text export for clipboard: Format: 
[2025-12-28 14:30] feature-work (active)
[2025-12-27 10:15] bug-fix (completed)
[unknown 00:00] legacy-topic (completed)
Pattern: [{date} {time}] {sessionName} ({status}) Separator: Newline (\n) Use cases: Copy to clipboard, export to file
THE CENTER
Simple interactions preserve focus on content

Technical Credibility

Uses CSS custom properties for theming. Implements accordion pattern from WikiBaseViewer. Status colors match Tailwind’s color palette for consistency. All render methods are synchronous except content loading via IPC.