ELNOR REPO READER TEXT MIRROR
Original path: Current Specs/DOC20/DOC20_BUILD_DELTA.md
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z

---

# DOC20 Build Delta — Living Changelog

**Document:** DOC20_BUILD_DELTA.md  
**Purpose:** Running log of all implementation changes made during build sessions that diverge from, extend, or refine DOC20 and Q_UNIFIED_WORKSPACE_V8_0_1.jsx. Any future session coding from DOC20 or the mockup MUST reconcile against this document first.  
**App location:** `~/Developer/q-dashboard/`  
**Last updated:** 2026-04-15

---

## Session: 2026-04-13 through 2026-04-15

### DELTA-001 — Dark Mode System (NEW — not in DOC20 or V8_0_1)

**What:** Complete dark mode implementation with toggle, mutable theme object, and CSS overrides.  
**Why:** User requested dark mode during build; not in original spec.

**Architecture:**
- `src/styles/theme.ts` — Exports mutable `colors` object. `lightColors` and `darkColors` const objects. `setDarkMode(dark)` calls `Object.assign(colors, dark ? darkColors : lightColors)` so all components reading `colors.X` get updated values on re-render.
- `src/context/DataProvider.tsx` — `darkMode` boolean state + `setDarkMode` callback that: (1) updates React state, (2) mutates `colors` object, (3) toggles `body.dark-mode` CSS class, (4) sets `body.style.backgroundColor` and `body.style.colorScheme`.
- `src/components/Layout/NavRail.tsx` — Moon/Sun toggle button at bottom of nav rail. Uses `darkMode` from context.
- `src/index.css` — `body.dark-mode, body.dark-mode #root { color: #e8ebf0; background-color: #1e2028; }` **CRITICAL: The `#root` selector is required** because `html, body, #root { color: #1A1D21 }` has higher specificity than `body.dark-mode` alone. Without it, all inherited text stays dark.
- `src/index.css` — Dark mode scrollbar overrides, dark mode `.chat-markdown` overrides (blockquote, code, pre, links).
- `src/styles/editor.css` — Full set of `body.dark-mode .tiptap-editor` overrides for: text color, caret, headings, placeholders, blockquotes, code, pre, tables, links, marks/highlights, selection, track changes colors.

**Dark color palette (full values):**
```
bgApp: '#1e2028'       bgPanel: '#252830'      bgPanelAlt: '#282b34'
bgCard: '#2c2f38'      bgInput: '#33363f'      bgSidebar: '#151820'
textPri: '#e8ebf0'     textSec: '#b0b8c4'      textTer: '#939ba6'
accentBtn: '#6b9be0'   warn: '#FBBF24'         error: '#F87171'
border: '#3a3f4a'      borderLight: '#33363f'   green: '#4ADE80'
neutral: '#A1A8B4'     purple: '#B49BFA'
```

**Files touched:** theme.ts, DataProvider.tsx, NavRail.tsx, index.css, editor.css

---

### DELTA-002 — Highlight Text Color in Dark Mode

**What:** `body.dark-mode .tiptap-editor mark { color: #1A1D21 !important; }` forces dark text on all highlighted/marked text in dark mode.  
**Why:** TipTap Highlight extension applies pastel background-color via inline style. In dark mode, inherited text color is white — unreadable on yellow/green/pink backgrounds.  
**Note:** `!important` is required because the inherited color from `#root` would otherwise persist. The background-color is untouched — TipTap's inline style handles it correctly for both modes.

**File:** `src/styles/editor.css` (line ~437)

---

### DELTA-003 — Track Changes System (mark-based, unified)

**What:** Replaced the original dual-system (decoration-based for mock data + separate mark-based for live edits) with a single unified mark-based track changes system.  
**Why:** Two competing systems caused bugs — accepted changes kept their styling, reviewer filtering didn't work, etc.

**Implementation:**
- `src/components/Content/TrackChangesPlugin.ts` — NEW FILE (673 lines). Custom TipTap extension with `InsertionMark` and `DeletionMark`. CSS class-based rendering (`tc-insertion`, `tc-deletion`, `tc-author-you`, `tc-author-agent`). Exported functions: `acceptMarkedChange`, `rejectMarkedChange`, `acceptAll`, `rejectAll`, `getChangeAtCursor`, `getTrackedChangeCount`, `getReviewers`.
- `src/styles/editor.css` — Track changes CSS classes with light AND dark mode variants. Visibility toggle classes: `.tc-markup-hidden`, `.tc-hide-you`, `.tc-hide-agent`.
- `src/components/Content/NoteEditor.tsx` — Imports TrackChangesPlugin, wires up toolbar (eye icon with count badge, reviewer toggle dropdown), right-click context menu with Accept/Reject per change.

**Key fix:** `nodesBetween` callback — returning `false` prevents descending into children. Changed to `return undefined` for non-text nodes so text marks are actually found.

**Track changes dark mode colors:**
- You (insertion/deletion): `#7db4f0` (lighter blue)
- Agent insertion: `#4ADE80` (bright green)
- Agent deletion: `#F87171` (bright red)

**Files:** TrackChangesPlugin.ts (new), NoteEditor.tsx, editor.css

---

### DELTA-004 — Tab Group Header Styling

**What:** Tab group headers use solid colored background with white text. Consistent between NavPane and HorizontalTabBar.  
**Why:** Went through multiple iterations (colored pill, tinted background with dark text, tinted with border-left) before settling on the current approach.

**Final design:**
- **HorizontalTabBar** — Solid colored pill: `backgroundColor: group.color`, `color: '#fff'`, `fontSize: 10.5`, `fontWeight: 700`, `borderRadius: 4`, `opacity: darkMode ? 0.8 : 1`. Outer container has `borderBottom: 2px solid ${group.color}` connecting to group tabs.
- **NavPane (main tab list)** — Full-width colored bar: `backgroundColor: g.color`, `opacity: darkMode ? 0.85 : 0.9`, white text and icons. Chevron and dots menu also white.
- **NavPane (Tab Groups dropdown)** — Same full-width colored bar with `borderRadius: radii.sm`.
- **Expanded tab list left border:** `borderLeft: 2px solid ${g.color}90` (56% opacity — bright enough to see clearly).

**Files:** HorizontalTabBar.tsx, NavPane.tsx

---

### DELTA-005 — PDF Viewer (NEW — extends DOC20)

**What:** Full PDF viewer with pdfjs-dist v4.10.38 rendering, pdf-lib modification, and extensive tooling.  
**Why:** DOC20 spec describes document viewing but the implementation is entirely new.

**Key decisions:**
- pdfjs-dist **v4.10.38** (not v5) — v5 requires `Map.getOrInsertComputed` which is too new for current browsers.
- **React StrictMode compatibility** — Uses `cancelled` flag pattern instead of `loadingTask.destroy()` which killed the shared worker.
- **IntersectionObserver** for lazy page rendering with 200% root margin.
- **pdf-lib** for save/export with annotations (highlights, text, redaction, signatures).

**New files:** PdfViewer.tsx (1139 lines), PdfOrganize.tsx (257 lines), PdfCombine.tsx (232 lines)

**Tools:** select, highlight, text, sign, redact, area-select, sticky notes, bookmarks, find/search.

---

### DELTA-006 — Comments & Ask Right Panel (rewrite)

**What:** Complete rewrite of RightPanel with two tabs — Comments and Ask.  
**Why:** Original was placeholder; now fully functional per spec with inline chat pattern.

**Comments tab:** Open/resolved sections, edit/delete/resolve/reply per comment, "Send All to Elnor" button, agent config dropdown.  
**Ask tab:** Document title header, Agent expander (agent/model/think selectors), Include expander (checkbox multi-select: Document, All Comments, Select Comments, Session Clips), chat message area with auto-scroll, input bar with attach/memory/voice buttons.

**File:** RightPanel.tsx (~500 lines rewritten)

---

### DELTA-007 — Floating Palette (rewrite)

**What:** Complete rewrite with chat/note/todo modes, selector dropdowns, and Electron drag support.  
**Why:** Original was basic; now matches spec with full functionality.

**Key patterns:**
- `WebkitAppRegion: 'drag'` on header for Electron frameless window dragging.
- Three exclusive modes with shared selector dropdown pattern.
- Todo mode: subtasks, expand/collapse, done section, calendar/delete hover buttons.
- Note mode: font size dropdown, B/I/list toolbar, copy/export.
- Screenshot capture button in chat mode.

**File:** FloatingPalette.tsx (~550 lines)  
**Electron:** `electron/main.cjs` — Palette window creation, minimize main on open/restore on close.

---

### DELTA-008 — Content Block System (NoteModules)

**What:** Embeddable content blocks within notes — TodoModule, ThreadModule, FeedModule, BarModule, CalendarModule.  
**Why:** DOC20 spec describes these blocks; implementation is new.

**New files:** NoteModules.tsx (752 lines), CalendarModule.tsx (937 lines)

**CalendarModule:** Month/List/Day views, event editor with full fields (title, date, time, calendar, location, recurring, color, notes, reminders, attachments), settings panel with 3 tabs (Instructions, Sources, Sync), agent activation indicator.

---

### DELTA-009 — NavPane UI Refinements

**What:** Extensive styling work on the nav pane layout.

**Changes from mockup:**
- Section headers (PAGES/TABS/WORKSPACES) centered via absolute positioning.
- Chevrons moved to right side of section headers.
- Tab close buttons functional (remove tab, select adjacent on close).
- Workspace save/load preserves full state: tabs, activeTabId, splitMode, splitTabs, rightOpen, rightTab.
- NewTabMenu shared component used for plus-button dropdowns.
- Viewport-aware dropdown positioning.
- Active tab: `borderLeft: 2px solid accentBtn`, `backgroundColor: accentBtn + '12'`.
- Utility tab auto-creation: click a page item creates one non-pinned utility tab of that type.

**File:** NavPane.tsx (~630 lines, 307 lines changed from original)

---

### DELTA-010 — NoteEditor Toolbar Conformity

**What:** Doc/web toolbars match notes toolbar pattern. Toolbar width-responsive tiers via ResizeObserver.

**Changes from mockup:**
- Indent/outdent merged into List dropdown with: Bullet, Numbered, Outline (A/1/a/i), Task.
- Outline list uses `CustomOrderedList` extension with `class: 'outline-list'` attribute.
- Badge counts removed from toolbar buttons (per user feedback).
- Share icon added (from Shared/Icons.tsx).
- Zoom level via CSS `transform: scale()` with `transformOrigin: 'top center'`.

**File:** NoteEditor.tsx (1479 lines changed from ~200 original)

---

### DELTA-011 — Split View & ContentRenderer

**What:** Dual-pane split view with independent tab bars, resize handle, and RightPanel in both panes.

**Changes:**
- `MainWorkspace.tsx` — Split layout with left/right panes, each with own HorizontalTabBar + ContentRenderer + RightPanel.
- `ContentRenderer.tsx` — Accepts `tabsOverride`/`activeTabIdOverride` props for split pane independence.
- NewTabMenu integration for split pane plus button.

**Files:** MainWorkspace.tsx, ContentRenderer.tsx

---

### DELTA-012 — Shared Components (NEW)

**New files created:**
- `src/components/Shared/NewTabMenu.tsx` — Consistent plus-button dropdown across NavPane, HorizontalTabBar, MainWorkspace. Create section + Open section + file picker.
- `src/components/Browser/ContextMenus.tsx` — TabContextMenu (close/duplicate/pin/group), GroupContextMenu (rename/color/ungroup/delete), WorkspaceContextMenu (rename/color/pin/delete).
- `src/components/Shared/Icons.tsx` — Added Share and Moon icons to the icon set.

---

### DELTA-013 — Dependencies Added

**package.json additions:**
```
pdfjs-dist: ^4.10.38    — PDF rendering
pdf-lib: ^1.17.1        — PDF modification
@tiptap/* (20+ pkgs)    — Rich text editor extensions
tiptap-markdown: ^0.9.0 — Markdown serialization
docx: ^9.6.1            — Word export
tesseract.js: ^7.0.0    — OCR (placeholder)
rehype-highlight: ^7.0.0 — Code highlighting
remark-gfm: ^4.0.0      — GitHub Flavored Markdown
```

---

### DELTA-014 — Electron Changes

**electron/main.cjs:**
- Palette window: frameless, alwaysOnTop, 680×520, dark background (#1a1d23).
- Toggle behavior: show palette minimizes main, hide palette restores main.
- globalShortcut completely removed (was causing conflicts with macOS Alt+Space).
- Loads `#/palette` route.

---

### DELTA-015 — Data Model Extensions

**src/types/index.ts additions:**
- `TodoTask.attachments?: { id, name, type }[]`
- `CalendarEvent` — full schema with location, notes, reminders, allDay, recurring, attachments
- `ContentBlock.type` — extended with 'calendar', 'feed', 'bar'
- `TrackedChange` — id, segId, author, oldText, newText, status
- `Workspace` — full schema with splitMode, splitTabs, browserMode, rightOpen, rightTab, isUnsaved

**src/data/mockContent.ts additions:**
- `tcColors` map for track changes author colors
- `initBlocks` with todo attachments, thread, calendar, feed blocks
- `initChanges` with pending tracked changes

---

## Known Issues & Future Considerations

1. **Electron app not packaged** — Dev server works, but `electron-builder` packaging not configured.
2. **Alt+Space shortcut** — Removed from app; may still trigger via macOS system shortcut (Spotlight/other).
3. **PDF text selection accuracy** — Fundamental limitation of pdfjs text layer positioning. Area Select tool is the reliable workaround.
4. **Dark mode flash** — On initial load, brief flash of light mode before dark mode applies (body class set in React, not in HTML).
5. **pdfjs-dist v4 vs v5** — Pinned to v4.10.38. If upgrading, verify `Map.getOrInsertComputed` browser support.

---

## File Change Summary

| File | Status | Lines Changed | Category |
|------|--------|--------------|----------|
| src/styles/theme.ts | Modified | +43 | Dark mode colors |
| src/index.css | Modified | +32 | Dark mode CSS, chat markdown |
| src/styles/editor.css | Modified | +80 | Dark mode editor, track changes, highlights |
| src/context/DataProvider.tsx | Modified | +29 | Dark mode state, workspace state |
| src/components/Layout/NavRail.tsx | Modified | +10 | Dark mode toggle button |
| src/components/Browser/NavPane.tsx | Modified | +307 | Tab groups, sections, workspaces |
| src/components/Tabs/HorizontalTabBar.tsx | Modified | +28 | Tab group pills, font size |
| src/components/Content/NoteEditor.tsx | Modified | +1479 | TipTap editor, toolbar, track changes |
| src/components/Content/DocumentView.tsx | Modified | +216 | Doc toolbar, PDF loading |
| src/components/Panel/RightPanel.tsx | Modified | +508 | Comments/Ask tabs |
| src/components/Palette/FloatingPalette.tsx | Modified | +494 | Chat/note/todo modes |
| src/components/Workspace/MainWorkspace.tsx | Modified | +60 | Split view |
| src/components/Browser/BrowserPane.tsx | Modified | +82 | Browser UI |
| src/components/Chat/ChatPanel.tsx | Unchanged | 0 | (uses colors correctly) |
| src/components/Content/TrackChangesPlugin.ts | **NEW** | 673 | Track changes system |
| src/components/Content/PdfViewer.tsx | **NEW** | 1139 | PDF viewer |
| src/components/Content/PdfOrganize.tsx | **NEW** | 257 | PDF page organizer |
| src/components/Content/PdfCombine.tsx | **NEW** | 232 | PDF combiner |
| src/components/Content/NoteModules.tsx | **NEW** | 752 | Content blocks |
| src/components/Content/CalendarModule.tsx | **NEW** | 937 | Calendar module |
| src/components/Shared/NewTabMenu.tsx | **NEW** | 110 | Shared tab menu |
| src/components/Browser/ContextMenus.tsx | **NEW** | 193 | Context menus |
| electron/main.cjs | Modified | +34 | Palette window |
| package.json | Modified | +33 | Dependencies |