Elnor Repo Reader

ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Current Mockups/V7_4_BUILD_NOTES (2).md
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z

---

# Q_UNIFIED_WORKSPACE — Build Notes (V7.4 through V7.6.7)
## Date: 2026-04-05
## Changes from V7.3, organized by DOC20 section impact

---

### 1. Note Canvas — Fully Editable with Module Islands
**DOC20 impact:** §6.14 (Notes Editor), §6.18.2 (Content Registry)
- Note content area is now fully `contentEditable` — all space between modules is typeable
- Modules (Task List, Inline Thread, Activity Feed, Notice Bar) render as bordered "island" components embedded in the flowing text
- Editable paragraph gaps are enforced between every module
- **New module type: "Note Block"** — a boxed, movable note module (distinct from ambient canvas text), added as first option in +Module picker
- Final editable area at bottom of note ensures you can always type below the last module
- Tiptap implementation note: modules would be custom NodeView extensions; ambient text is standard Tiptap paragraph content

### 2. Tab Groups — Auto-Save + Nav Section
**DOC20 impact:** §6.3 (Tab Bar), §6.4 (Browser Column — Nav tab)
- Tab groups auto-persist on creation and on any change (add/remove tab, rename, recolor)
- Removed "Save Group" from group context menu (no longer needed)
- Group context menu now: Rename, Change Color, Ungroup All, Close Group
- **New Nav tab section: "Tab Groups"** — collapsed by default, shows count badge, expands to list all groups with color dot, name, tab count. Clicking a group reveals it and switches to first tab.

### 3. Split Screen — Independent Panes
**DOC20 impact:** §6.3 (Tab Bar), new §6.XX (Split View)
- Split screen icon added to far right of tab bar (Columns icon)
- Toggles workspace into two side-by-side panes with draggable vertical divider
- Each pane has its own tab bar, own active tab, own content area
- Left pane retains browser column toggle; right pane does not
- Close button on right pane collapses back to single view with "tabs merged" toast
- Split focus tracked — clicking in a pane sets it as active
- Each pane independently supports its own right panel (Comments/Ask)

### 4. Tab Group Border Styling — Chrome-Style
**DOC20 impact:** §6.3 (Tab Bar — tab groups visual)
- Group color opacity increased (from `40` to `90` for inactive tabs)
- Active tab in group: top + left + right borders in group color, bottom border transparent (tab "pokes out" from group strip)
- Inactive tabs in group: bottom border only in group color
- Creates visual "snake" effect where the group color line wraps around the active tab

### 5. Document Title — Clickable + Right-Click Menu
**DOC20 impact:** §6.12 (Document Viewer toolbar)
- Document title in toolbar is now clickable → opens in default app (Preview.app, Word, etc.)
- Tooltip: "Click to open in default app"
- Right-click on title opens context menu:
  - Show in Finder (`shell.showItemInFolder()`)
  - Open in Default App (`shell.openPath()`)
  - Copy Ref (EC internal reference, e.g., `doc:sanli_expert_report:v2`)
  - Copy Path
  - Copy File Name
- "Ref" button also added to doc toolbar for quick ref copy

### 6. Ask {Agent} Panel — Simplified
**DOC20 impact:** §6.16 (Right Panel — Ask tab)
- **Compact top section** (collapsible):
  - Context reference: single line showing icon + title (no "PDF document" redundancy)
  - Agent + Send In on same row (horizontal space saved by using letter-badge instead of full avatar)
  - Agent selector: compact dropdown with letter badge
  - Send In selector: Inline / New Chat / Existing Chat (replaces old separate "Output mode" and "Send in" which were redundant)
- **"Send with" (replaces "Context scope"):**
  - "Document only" — just the content
  - "All comments & referenced portions" — document + all open comments + anchor text
  - "Select comments" — pick specific ones with checkboxes
- **"Additional instructions"** — single optional textarea (replaces the old mandatory "Instruction" + separate "Send with instructions" mode)
- **"Include session clips"** — single checkbox (replaces old multi-checkbox "Include" section; removed "Active project context" and "Pinned pages" as unnecessary)
- Config section collapses after first send to give response more room
- Inline agent response with "Continue in full chat →" link
- Bottom bar: single primary button label changes based on Send In mode

### 7. Status Bar — Bigger + Zoom Slider
**DOC20 impact:** §6.17 (Status Bar)
- Font bumped from 10px to 11px, padding from 3px to 5px
- **Zoom slider** (Word-style): minus button, range slider, plus button, percentage label
  - Click percentage to reset to 100%
  - Range: 50% to 200%
  - Zoom applies to content area via CSS `transform: scale()` with width compensation
- "New Session" and zoom controls on right side
- Status bar spans full workspace width (does not extend under right panel — zoom applies to content only)

### 8. Browser Column Tabs — Improved Styling
**DOC20 impact:** §6.4 (Browser Column — mode tabs)
- Label font increased from 10.5px to 11.5px
- Active tab: fontWeight 700 (was 650), background matches panel, subtle border outline (top + sides), rounded top corners, slight negative margin to overlap border
- Inactive tabs: lighter background, no border, lower font weight
- Better visual differentiation between active and inactive states

### 9. "Knowledge Manager" → "Knowledge"
**DOC20 impact:** §6.4 (Nav tab), [+] menu, any reference to this page name
- Label shortened everywhere: Nav tab pages list, [+] dropdown Open section
- Page title when opened as utility tab: "Knowledge"

### 10. Per-Tab Right Panel State
**DOC20 impact:** §6.16 (Right Panel state management)
- Right panel state (comments, ask, agent response) resets on tab switch
- Utility tabs: right panel auto-closes on switch (no Comments tab shown for utility pages, only Ask tab available if reopened)
- Content tabs: panel closes, state resets, can be reopened fresh for new tab

### 11. Bookmarks Bar
**DOC20 impact:** §6.19 (Embedded Browser), new subsection for bookmarks bar
- Thin horizontal bar below web browser toolbar (URL bar)
- Populated from special "Bookmarks Bar" folder in bookmark tree (marked with `isBar: true`)
- Shows favicon-style color badge + title for each bookmark
- "⋯" button at end for editing bar contents
- Visibility toggled via settings (bmBarVisible state)
- Only visible on web tab type

### 12. Floating Command Palette ("Quick Command Window")
**DOC20 impact:** New §6.20 (Quick Command Window)
- Toggle: ⚡ button in left nav rail (bottom), or keyboard shortcut ⌥Space (noted in UI)
- Dark floating window: 560px wide, centered on screen, dark theme (#1a1d23 background)
- Rounded corners (12px), heavy drop shadow, modal with backdrop
- **Three modes** via top tab bar:
  
  **💬 Chat mode:**
  - Persistent Quick Command chat — scrollable message history
  - Input bar with send button at bottom
  - Screen capture toggle (camera icon, top right) — when on, shows 📸 indicator on messages
  - "New Thread" button — archives current thread, starts fresh
  - "Open in Q ↗" link — opens chat in full Q workspace
  - Status line shows capture state
  
  **📝 Note mode:**
  - Quick scratchpad textarea (200px height)
  - Auto-saves to "Today Note" (configurable)
  - Save button for explicit save
  - Minimal chrome — just write and save
  
  **⌘ Command mode:**
  - Search input for commands, entities, actions
  - Quick Actions list:
    - "Watch my actions" (DOC3 demonstration mode trigger, highlighted with accent color, ⌥W shortcut)
    - New note, Search knowledge graph, Run standing procedure, Open Settings
  - Recent items list (recent files, chats)
  - Keyboard navigation hints in footer (↑↓ to navigate, ↵ to select, Esc to close)

**Architectural notes for DOC20 spec:**
- Quick Command Window is a separate Electron `BrowserWindow` with `alwaysOnTop: true`, `frame: false`
- Chat persistence: dedicated chat with `chat_type: "quick_command"`, stored in same chat store, visible in Q's chat list with ⚡ indicator
- Screen capture: uses DOC3 §4.3 screenshot adapter infrastructure in single-frame mode, attached as ephemeral context to chat message, purged after 24h
- "Watch my actions" trigger sends `learn.session.start` command to EC (same as Q's Learn page)
- Escape key or clicking backdrop closes the window (hides, not destroys)

---

## Items NOT in this mockup (deferred):

- Full web browser settings panel expansion (DOC20 §6.19 subsections)
- Chrome extension support UI
- Native app companion windows
- Full notes folder tree management (simplified in V7.4 for space)
- Full bookmark folder management (simplified)
- Right chat column replacement (awaiting separate mockup from Will)

---

## V7.5 Fixes (2026-04-05)

### Chat Tab Color Change
- Changed `tabColors.chat` from `#2E8B57` (green) to `#0891B2` (teal/cyan)
- Prevents visual confusion with green tab group colors (e.g., Paramount Research group)

### Doc Toolbar — Merged to Single Line
- Title + all toolbar items now on ONE line (was two lines)
- Title: `maxWidth: 200px`, `text-overflow: ellipsis`, `title` attribute shows full name + path on hover
- Removed: Markup toggle, tracked changes counter, version dropdown label (these are note-editing features, not applicable to read-only document viewer)
- Kept: clock icon for version history (icon only, no label)
- Save As dropdown: now functional (uses `openDrop==="save"` toggle)
- Ask {Agent} button at far right of the same row

### Split Pane — Full Independent Workspace
- Tab bar: same height (36px), same `borderRadius: "8px 8px 0 0"` styling as main pane
- [+] button on right pane tab bar for adding new tabs
- Close (X) button per tab + close-split button at far right
- Full content-type toolbar below tabs: doc icon, truncated title, PDF badge, toolbar buttons (Copy, Ref, Find, Pin, Comments), Ask {Agent} button
- Content area: same padding and typography as main pane
- Structurally identical to left pane, minus browser column toggle

### Icon Sets (noted for future)
- Current: hand-drawn SVG Lucide-style paths
- Recommended options: Phosphor Icons (clean, thin weight, Bloomberg-like crispness), Heroicons (Tailwind team), Tabler Icons (consistent 1.5px stroke)
- Swap would only require changing SVG `d` paths in the `I` object

---

## V7.6 Fixes (2026-04-05)

### Chat Tab Color
- Changed from `#0891B2` (teal) to `#1a5276` (deep navy blue)
- Now clearly distinct from green tab group colors and green doc tab color

### Browser Toggle Removed from Tab Bar
- The `<I.Sidebar>` button that was on the far left of the tab bar has been removed
- It was redundant — the same toggle exists on the left nav rail
- Frees up horizontal space in the tab bar

### Split View — Full Architectural Restructure
**DOC20 impact:** §6.3 (Tab Bar), new §6.XX (Split View) — significant rewrite needed
- When split mode is active, the workspace `flexDirection` switches from `column` to `row`
- Two fully independent pane columns render side by side:
  - **Left pane:** full tab bar (with tabs, [+] button, split toggle on far right), toolbar, content, status bar with zoom
  - **Right pane:** full tab bar (with tabs, [+] button, close-split X), full toolbar (identical controls to left), content, status bar with independent zoom
- Both tab bars render at the **same vertical level** (same `minHeight:36`, same `alignItems:"flex-end"`)
- Right pane toolbar includes ALL controls: Copy, Save As (dropdown), To Note, Ref, Search, Open External, Print, Pin, Comments, Version dropdown (v1/v2), Ask {Agent}
- Draggable divider (5px) between panes
- Split focus tracked (`splitFocus` state) — Ask {Agent} panel attaches to whichever pane has focus
- Close split: X button on right pane tab bar, or toggle the split icon on left pane tab bar

### Zoom Fix — Content Only
**DOC20 impact:** §6.17 (Status Bar / zoom behavior)
- `transform: scale()` now wraps only the content body (`<div>` inside the scrollable area), NOT the toolbar
- Toolbars, tab bars, and status bars are unaffected by zoom
- Each pane has independent zoom controls in its status bar

### Notes Settings Dropdown Restored
- Full dropdown restored from V7.3: Auto-save (On), Spell check (On), Show word count (Off), Default agent display, Template selector, "All note settings…" link
- Uses `openDrop==="settings"` toggle (was missing in V7.4/V7.5)

### Doc Toolbar — Version Dropdown
- Added working version dropdown (`openDrop==="ver"`): shows "v2 (current)" and "v1" options
- Removed Markup toggle and tracked changes counter from doc viewer (these are note-editing features)

### Right Panel Per-Pane Attachment
- When split mode is active, the right panel (Comments/Ask) only appears on the focused pane
- Controlled by `splitFocus==="left"` conditional
- When not in split mode, right panel behaves normally (always attached to main pane)

---

## V7.6.1 (2026-04-05) — Split Pane Functionality
**DOC20 impact:** §6.XX (Split View), §6.3 (Tab Bar)

### Right Pane [+] Dropdown
- Right pane [+] button now has full dropdown matching left pane: New Note, New Chat, New Web Tab, Open Document
- Uses separate `splitNewTabDrop` state

### Right Pane Ask & Comment Buttons
- Ask and Comment buttons on right pane toolbar now open the right panel
- Sets `splitFocus` to "right" before opening panel

### Close Split Merges Tabs
- When closing split view, right pane tabs are appended to the main tab bar via `setTabs(p=>[...p,...splitTabs])`

### "Markup" → "Track"
- Changed label in both note toolbar locations (active/conditional)

### Divider Drag Direction Fixed
- Formula changed from `startW + delta` to `startW - delta` so dragging right expands the left pane (shrinks right)

---

## V7.6.2 (2026-04-05) — Split Pane Independence
**DOC20 impact:** §6.XX (Split View), §6.16 (Right Panel)

### Grouped Tabs Compress
- Group container div now has `minWidth:0, flexShrink:1, overflow:"hidden"` so grouped tabs shrink when pane narrows

### Independent Right Pane Panel
- Right pane has its own Ask/Comments panel rendered INSIDE the right pane (not on left side)
- Uses separate state: `splitRightOpen`, `splitRightTab`
- Comments tab shows "No comments" placeholder + "Add comment" input
- Ask tab shows context reference, instruction textarea, and Ask button
- Fully independent from left pane's panel

### Left [+] Dropdown Positioning
- Changed from `left:0` to `right:0` so dropdown stays within left pane boundary when split

---

## V7.6.3 (2026-04-05) — Feature Restoration
**DOC20 impact:** §6.14 (Notes Editor), §6.16 (Right Panel — Comments)

### Comment Panel Restored from V7.3
- Colored left border per author (`borderLeft: 3px solid ${cm.color}`)
- Text-link actions (Reply, Resolve, Edit, Delete) instead of button components
- Inline delete confirmation (Delete? Yes/No)
- "Send to agent" button with spark icon
- Active card highlighting via `activeComment` state
- Reply section with Enter-to-submit
- Reply bubbles with colored left borders and alternate background

### Note Headings Fixed
- Removed wrapper `<div>` around h2 headings — they flow naturally in note content
- Added `outline:"none"` so no blue browser focus highlight

### Note Block Simplified
- No "📝 Note Block" header — just an empty bordered canvas
- Drag handle and delete X appear on hover only (opacity transition)

### Doc Version Dropdown — Icon Removed
- Removed `<I.Clock>` icon, just shows "v2" text dropdown

### Module Rename Restored
- Task List and Activity Feed headers are clickable to rename (inline `<input>` with Enter/blur to save)
- Uses `editingTitle` state, matching V7.3 behavior

---

## V7.6.4 (2026-04-05) — Browser & Notes Mode Restoration
**DOC20 impact:** §6.4 (Browser Column — all modes), §6.14 (Notes Editor — folder management)

### Browser Tab Fully Restored from V7.3
All features carried over verbatim:
- Search bar with "This View / Everywhere" toggle
- Collections row (colored dots with + button, clear button)
- Scope chips: Collection, Project, Bucket, Places, Saved Views, Folders (dashed border)
- **Project scope:** project list with colored dots, "No Project" option
- **Folders scope:** recursive folder tree (`renderBFolders`) with create subfolder, delete confirm, drag-drop targets, expand/collapse
- **Places scope:** place list with path tooltips, add/remove, file browser with breadcrumb navigation, folder/file listing with type badges and sizes
- **Saved Views scope:** system views (Current, Recent, No Project) + user-created views
- Draggable splitter between scope panel and results (60-400px range)
- ALL type chips (full `typeChips` array, not truncated), with clear button
- Sort dropdown with save-view option (save icon + name input)
- Results list with pin indicators, type labels (colored uppercase), status badges, time stamps
- Footer showing scope + sort info

### Notes Tab Fully Restored from V7.3
All features carried over verbatim:
- Folder tree (`renderNoteFolders`) with recursive rendering
- Drag-drop folders, create/rename/delete folders
- Notes list with comments count, pinned indicators, modification time
- Context menu on notes (Archive, Delete)
- "All Notes" flat list with secondary sort dropdown
- Footer with note count

### Helper Functions Restored
- `renderBFolders(parentId, depth, isOverlay)` — recursive browser folder tree with all management actions
- `renderNoteFolders(parentId, depth)` — recursive note folder tree with all management actions

---

## V7.6.5 (2026-04-05) — Ask Panel Fixes
**DOC20 impact:** §6.16 (Right Panel — Ask tab)

### Attachment Option Added
- "Attach" button with paperclip icon below instruction textarea
- "Drag files or click" hint text

### Inline Response with Follow-up Chat
- After agent responds inline, a follow-up input bar appears below the response
- Send button right in the follow-up bar for continued conversation
- "Continue in full chat →" link below response

### Visual Separator
- Clear `borderTop` line between config section and instruction area

### Send-In Dropdown Deduplicated
- "New chat" appears once (was duplicated)
- Separator lines between: Inline / New chat / Recent chats sections
- "Recent" header above chat list

### Recent Chats Populate Dropdown
- Send-in dropdown shows top 6 from `recentConvos` with color dots and names
- Replaces old hardcoded `chats` array

### Label Fixes
- "Select comments" → "Select comments + references"
- "All comments & referenced portions" → "All comments + references"

---

## V7.6.6 (2026-04-05) — Bubble Menu Restoration
**DOC20 impact:** §6.14 (Notes Editor — text selection), §6.12 (Document Viewer — text selection), §6.19 (Web Browser — text selection)

### Text Selection Popup Restored from V7.3
- Agent selector (colored dot + agent name) with separator
- "Ask" button with spark icon
- **Web tabs:** Summarize + Clip buttons
- **Note tabs:** Rewrite, Expand, Shorten buttons
- Positioning uses full `editorRef.clientWidth` calculation (not hardcoded 500)
- Close X button

---

## V7.6.7 (2026-04-05) — Floating Command Palette Overhaul
**DOC20 impact:** New §6.20 (Quick Command Window) — all sub-sections

### Toggle Repositioned (14.1)
- Moved from bottom of left rail to top (right below Q logo)
- Brighter color: #bbb idle, #5b8dd9 active (was #888)

### Dark Scrollbar (14.2)
- Scoped CSS class `fp-scroll` for palette-only scrollbar styling
- 4px width, dark track (transparent), dark thumb (#3a3f4a), subtle hover (#555)

### Chat Font Bumped (14.3)
- Message text: 13px (was 12px)
- Author names: 11px (was 10px)

### Settings Icon (14.4)
- Gear icon in palette header bar (all modes)
- Shows model/think level on click (Gemini 2.5 Pro / Standard)
- **Spec note for DOC20 §6.20:** Settings dropdown should include: model selector (from DOC11 model registry), thinking level (None/Standard/Extended), temperature preset

### Resizable Window (14.5)
- CSS `resize: "both"` on palette container
- Min height 300px, max height 520px
- **Spec note:** In Electron build, resize via `BrowserWindow.setMinimumSize()` / drag handles

### Always on Top (14.6)
- Comment in code noting Electron `alwaysOnTop: true, frame: false`
- Cannot demonstrate in mockup artifact

### Multi-line Chat Input (14.7)
- `<textarea rows={2}>` replaces single-line `<input>`
- Shift+Enter for newline, Enter to send
- Resizable up to 100px max height
- Min height 36px

### Attachment Button (14.8)
- Paperclip icon button to left of chat textarea
- Opens file picker on click

### Note Toolbar (14.9)
- Compact formatting row: Bold (B), Italic (I), List icon, Copy All, More (⋯)
- "More" shows export options: Markdown, PDF, Send to Note
- **Spec note for DOC20 §6.20:** Consider adding: heading levels, checkbox/list toggle, horizontal rule, code block

### Note Naming (14.10)
- Editable title `<input>` at top of note view
- Default: "Quick Note"
- Persists as the note title when saved to ELNOR Notes

### Pop-in to Q (14.11)
- External link icon (↗) in note toolbar header
- Opens the note or chat as a tab in Q via `openTab()`
- **Spec note:** This is bidirectional — notes created in the palette should appear in Q's Notes browser, and vice versa

### Auto-save (14.12)
- Removed manual "Save" button
- Removed "Quick Note → saves to ELNOR Notes" explainer text
- Shows "Auto-saved" in footer
- **Spec note for DOC20 §6.20:** Auto-save interval: debounced 2 seconds after last keystroke, same as main Notes editor

### Tab Labels Simplified (14.13)
- "Chat" and "Note" — no emoji icons (was "💬 Chat" and "📝 Note")
- "⌘ Command" keeps its icon — it's a different interaction mode

### Command Mode (14.14)
- Unchanged in this build
- **Spec note for DOC20 §6.20:** Future expansion: entity graph search results, natural language command parsing, standing procedure browser with search, keyboard navigation (↑↓ arrows), recently used commands section

---

## Cumulative Outstanding Items (not yet built)

These items were discussed but deferred or noted for future work:

### To-Do List Improvements
- Completed items should move to collapsible "Done" section at bottom (was in V7.3, lost in rebuild)
- Edit/delete individual task items (no UI for this currently)
- Subtask expand toggle: reposition from far right to near checkbox for better discoverability
- Restore V7.3's `active`/`done` split in task block renderer

### Font
- IBM Plex Sans is declared but not loaded — falling back to system font
- Need `@import` from Google Fonts to render actual IBM Plex Sans

### Icon Set
- Current: hand-drawn SVG Lucide-style paths
- Consider: Phosphor Icons (thin weight, Bloomberg-like crispness), Heroicons, Tabler Icons
- Swap requires only changing SVG `d` paths in the `I` object

### Web Browser Settings
- Full DOC20 §6.19 expansion not yet in mockup: privacy controls, credential vault, download prefs, reader mode defaults, content extraction, site permissions, proxy, user agent, cookies
- Chrome extension support UI

### Native App Companion Windows
- "Companion App" pattern (managed side-by-side via macOS window management APIs)
- Deferred — needs separate spec section in DOC20

### Version Dropdown Unification
- Docs have version dropdown (v1/v2); notes do not
- Consider unifying: notes could also have version history

### Toolbar Collapse Behavior
- When columns narrow, toolbar items overflow instead of collapsing
- Desired: Word-style progressive collapse (shrink → multi-row → category dropdowns)
- Deferred until TipTap integration when toolbar will be rebuilt

### Right Chat Column
- Placeholder in mockup — awaiting separate chat panel mockup from Will to merge

---

## V7.6.8 (2026-04-05) — Font + To-Do List Restoration
**DOC20 impact:** §6.14 (Notes Editor — Task List module), global typography

### IBM Plex Sans Font Loaded
- Added `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap')` to global style tag
- All UI now renders in actual IBM Plex Sans (was falling back to system font)

### Task List Restored from V7.3
Full V7.3 task block renderer carried over:
- **Active/Done split:** Active tasks listed first, completed tasks in collapsible "Done (N)" section at bottom
- **Collapsible Done section:** Uses native `<details>/<summary>` — click to expand, unchecking moves task back to active list
- **Collapsed state:** Shows "N open" badge, drag handle, delete button
- **Subtask expand toggle repositioned:** Chevron (▸) placed immediately right of checkbox (was far right ▾), more discoverable
- **Subtask count:** Shows "completed/total" badge on right side of task row
- **Subtask add input:** Styled with ghost checkbox + underline input ("Add subtask…")
- **@Agent button:** "@ {agent.name}" button at bottom of expanded task subtask area for asking agent about the task
- **Add task input:** Ghost checkbox + underline input at bottom of task list ("Add task…")
- **Editable title:** Click title to rename (inline input, Enter/blur to save)
- **Delete with hover color change:** X button turns red on hover