Changeset 0.18.1 (#80)

docs/ROADMAP.md

@@ -68,7 +68,7 @@ v0.17.3 Notes Graph + Wikilinks ✅
           │
 v0.18.0 Memory ✅ (user + persona scopes, review pipeline)
           │
-v0.18.1 Side Panel Architecture (independent panels, dual-view)
+v0.18.1 Side Panel Architecture ✅ (single-slot, ctx.ui primitives, mermaid refactor)
           │
 v0.19.0 Projects / Workspaces + Notifications
           │
@@ -454,34 +454,45 @@ See [DESIGN-0.18.0.md](DESIGN-0.18.0.md) for full spec.
 
 ---
 
-## v0.18.1 — Side Panel Architecture
+## v0.18.1 — Side Panel Architecture ✅
 
-Refactor the side panel system so Notes, HTML/code previews, and future
-panels (knowledge base browser, search results) operate independently
-rather than sharing a single slot. Currently, opening Notes hides the
-preview panel and vice versa — this is confusing when reviewing AI-
-generated HTML/documents while also managing notes.
+Refactored the side panel from a shared-tab layout to independent
+single-slot panels. Any action fills the slot, replacing whatever was
+there — no tabs, no association between panel types. Extension UI
+primitives give browser extensions safe access to host app features.
 
 Depends on: Notes graph + wikilinks (v0.17.3). Prerequisite for: live
 collaboration (v0.23.0) where multiple panels need simultaneous visibility.
 
 **Panel System**
-- [ ] Panel registry: named panels with independent open/close state
-- [ ] Dual-view mode: two panels side-by-side (configurable split ratio)
-- [ ] Tab-persistent state: each panel remembers scroll position, open note, etc.
-- [ ] Panel priority: when space is tight (mobile), most-recently-opened wins
-- [ ] Keyboard shortcut: Ctrl/Cmd+\ cycles panels, Ctrl/Cmd+Shift+\ toggles dual
+- [x] Panel registry: named panels with independent open/close state
+- [x] Single-slot model: action-driven, each open replaces the previous
+- [x] Dual-view mode: two panels side-by-side (configurable split ratio via drag divider)
+- [x] Panel-persistent state: each panel remembers scroll position, open note, etc.
+- [x] Header label shows active panel name (replaces tab bar)
+- [x] Keyboard shortcut: Ctrl/Cmd+\ cycles panels, Ctrl/Cmd+Shift+\ toggles dual
 
 **Preview Panel**
-- [ ] Dedicated preview panel (independent of Notes)
-- [ ] HTML/document preview with iframe sandbox
-- [ ] Code output preview (extension-rendered blocks)
-- [ ] Live-updating during streaming responses
+- [x] Dedicated preview panel (independent of Notes)
+- [x] HTML/document preview with iframe sandbox
+- [x] Code output preview (extension-rendered blocks via pop-out)
+- [x] Live-updating during streaming responses (500ms debounce)
+
+**Extension UI Primitives**
+- [x] `ctx.ui.toast()` — toast notifications
+- [x] `ctx.ui.openPreview()` — load HTML into side panel preview
+- [x] `ctx.ui.isDark()` — theme detection
+- [x] `ctx.ui.isMobile()` — viewport width check
+- [x] `ctx.ui.isPanelOpen()` — side panel visibility
+- [x] `ctx.ui.confirm()` — modal confirm dialog
+- [x] Mermaid extension refactored to use primitives exclusively (zero direct globals)
+- [x] Context-aware expand: single button, fullscreen or side panel pop-out
 
 **Mobile**
-- [ ] Swipe navigation between panels
-- [ ] Bottom sheet mode for secondary panel
-- [ ] Graceful collapse to single-panel on narrow viewports
+- [x] Swipe navigation between panels
+- [x] Tap-to-close overlay
+- [x] Graceful collapse to single-panel on narrow viewports
+- [x] Enlarged touch targets, fullscreen close button (40px desktop, 48px mobile)
 
 ---