# Sprint 6: UX & Editor Polish — Plan > **Goal:** Transform Whetstone from a feature-complete prototype into a > polished, discoverable, accessible editor that users actually enjoy using. > Address accumulated structural debt, add visual refinement, improve > onboarding, and integrate the security/semantic feature requests. > > **Prerequisites:** Sprint 5 Phase 5a–5b complete (library-aware coding flow). > Sprint 5 Phases 5c–5f may still be in progress — Sprint 6 work is > independent and can proceed in parallel. > > **Key themes:** > 1. Structural refactor — enforce architecture limits, enable faster UI iteration > 2. Theme engine and visual design system > 3. Editor UX enhancements (multi-cursor, find/replace, diagnostics) > 4. Onboarding, discoverability, and documentation > 5. Security vulnerability awareness (from feature requests) > 6. Accessibility and performance --- ## Phase 6a: Structural Refactor (Steps 166–170) The foundation: main.cpp is 2600+ lines and EditorState.h is 1800+ lines, both far over the architecture limits (1500 and 600 respectively). Fix this first — all UX work becomes easier when panels are modular. - [x] **Step 166: Extract main.cpp into panel headers** Create `editor/src/panels/` directory. Extract each major UI section from main.cpp's render loop into its own header with a `renderXxx(EditorState&)` free function: - `panels/MenuBarPanel.h` — menu bar and toolbar - `panels/ExplorerPanel.h` — file tree and workspace browser - `panels/EditorPanel.h` — code editor area, tabs, split view - `panels/BottomPanel.h` — output, AST, terminal, problems, agents tabs - `panels/StatusBarPanel.h` — status bar with mode/language/position - `panels/SidePanels.h` — outline, dependencies, library browser, etc. main.cpp reduced to: init, event loop, docking layout, panel dispatch. Target: main.cpp under 800 lines. *New:* `panels/` directory with 6+ headers. *Modifies:* `main.cpp` - [x] **Step 167: Split EditorState into focused sub-states** Break the 1800-line EditorState.h into composable sub-structs: - `SearchState` — find/replace, project search, go-to-line fields - `AgentState` — WebSocket server, agent log, permissions - `BuildState` — build system, errors, run state - `LibraryState` — dependency panel, library browser, composition panel - `EmacsState` — packages, function index, keybinding state, org doc - `UIFlags` — panel visibility toggles, bottom tab selection EditorState composes these via named members. Target: EditorState.h under 400 lines, each sub-state under 200 lines. *Modifies:* `EditorState.h`. *New:* sub-state headers or inline structs. - [x] **Step 168: Split oversized component headers** Enforce the 600-line limit on remaining violators: - `CodeEditorWidget.h` (1112 lines): extract rendering helpers into `CodeEditorRendering.h`, selection logic into `CodeEditorSelection.h` - `ast/Parser.h` (1093 lines): extract per-language CST-to-AST into `ast/PythonParser.h`, `ast/CppParser.h`, `ast/ElispParser.h` etc. - `SyntaxHighlighter.h` (762 lines): extract language keyword tables into `SyntaxLanguages.h` - `ast/CppGenerator.h` (708 lines): extract helper functions All files under 600 lines after split. *Modifies:* 5+ oversized headers - [x] **Step 169: Notification / toast system** Replace ad-hoc `outputLog +=` with a structured notification system. `NotificationSystem.h`: - Notification types: Success, Warning, Error, Info - Toast popups in bottom-right corner, auto-dismiss after 4s (configurable) - Notification history accessible from status bar icon - Click toast to navigate to source (e.g., click error toast → jump to line) - Panels use `notify(level, message)` instead of appending to outputLog *New:* `NotificationSystem.h`. *Modifies:* panels that use outputLog - [x] **Step 170: UI event bus for decoupled updates** Create `UIEventBus.h` — lightweight pub/sub for UI events: - Events: ASTChanged, BufferSwitched, DiagnosticsUpdated, ThemeChanged, SettingsChanged, FileModified, AgentConnected, NotificationPosted - Panels subscribe to events they care about - Replaces polling patterns and tightly-coupled re-render triggers - Debounce support for high-frequency events (typing, diagnostics) *New:* `UIEventBus.h`. *Modifies:* panels to subscribe instead of poll --- ## Phase 6b: Theme Engine & Visual Design (Steps 171–176) Full visual customization. Ship with popular themes. Make the editor look professional and feel personal. - [x] **Step 171: Theme engine core** `ThemeEngine.h` with theme data model: - Color categories: editor (bg, fg, cursor, selection, currentLine), syntax (keyword, string, comment, number, type, function, operator), gutter (bg, lineNumber, marker colors), panels (bg, border, header), annotations (per-strategy colors), statusBar, scrollbar, tooltip - Load from JSON files in `~/.whetstone/themes/` - Bundled themes embedded as defaults - Hot-reload on file change - `ThemeEngine::getColor(ThemeColor::Keyword)` API for all panels *New:* `ThemeEngine.h` - [x] **Step 172: Bundled theme pack** Ship 7 themes, each a JSON file with full color definitions: - **Whetstone Dark** (default) — custom dark theme with annotation-aware accent colors - **Whetstone Light** — clean light theme - **Monokai Pro** — warm dark with vivid syntax colors - **Solarized Dark** / **Solarized Light** - **Dracula** - **Nord** Each theme tested with all annotation types visible. *New:* 7 theme JSON files - [x] **Step 173: Theme gallery UI** Settings > Themes section with visual browser: - Grid of theme cards showing name + color swatch preview - Live preview on hover (entire editor updates temporarily) - "Apply" confirms, "Reset" reverts to previous - "Open Themes Folder" button for custom theme creation - Active theme highlighted with checkmark *Modifies:* Settings panel, `ThemeEngine.h` - [x] **Step 174: Icon system** `IconSet.h` — consistent icons rendered via ImGui drawing primitives: - File type icons (Python, C++, JS, Rust, Go, Java, Elisp, JSON, etc.) - Panel icons (explorer, outline, terminal, agents, dependencies, etc.) - Diagnostic icons (error circle, warning triangle, info, hint lightbulb) - Annotation strategy icons (distinct shapes, not just colors) - Icons scale with zoom level - Theme-aware: icon colors adapt to current theme *New:* `IconSet.h` - [x] **Step 175: Typography and spacing** Configurable typography beyond just font size: - Code font family selection (from system monospace fonts or bundled) - UI font separate from code font - Line height multiplier (1.0–2.0) - Letter spacing adjustment - Consistent panel padding/margins defined in theme - Settings UI for all typography options *Modifies:* `SettingsManager.h`, `CodeEditorWidget.h`, `ThemeEngine.h` - [x] **Step 176: Smooth UI transitions** Subtle animations that make the editor feel polished: - Panel open/close: smooth slide (not instant pop) - Tab switch: brief cross-fade on editor content - Tooltip: fade in after delay, fade out on leave - Notification toasts: slide in from right, fade out on dismiss - Search match highlight: brief pulse on "next result" navigation - Cursor blink: configurable rate, smooth fade (not hard on/off) All animations respect a "Reduce Motion" accessibility setting. *New:* `AnimationUtils.h`. *Modifies:* panels using transitions --- ## Phase 6c: Editor UX Enhancements (Steps 177–183) Core editing improvements that make daily use smooth. - [x] **Step 177: Enhanced find/replace** Upgrade the find/replace bar: - Match count display ("3 of 17 results") - Live regex preview with captured groups highlighted - Replace preview: show inline what the replacement will look like - Find-in-selection mode - Toggle buttons with clear visual state: Match Case [Aa], Whole Word [W], Regex [.*] - Ctrl+H opens replace (Ctrl+F opens find-only) - Preserve search history (last 10 queries, accessible via dropdown) *Modifies:* `CodeEditorWidget.h`, find/replace rendering - [x] **Step 178: Multi-cursor editing** Support for multiple simultaneous cursors: - Ctrl+D: select next occurrence of current selection (add cursor) - Alt+Click: add cursor at click position - Ctrl+Alt+Up/Down: add cursor above/below - Alt+Shift+Drag: column/rectangular selection - All cursors type, delete, and navigate simultaneously - Escape to collapse to single cursor - Works with auto-indent and bracket completion *Modifies:* `CodeEditorWidget.h` - [x] **Step 179: Rainbow brackets and delimiter intelligence** Smart bracket handling: - Rainbow bracket coloring: nested brackets get rotating colors (configurable, theme-aware, toggleable) - Bracket pair highlight: matching bracket highlighted on cursor adjacency - Bracket scope highlight: subtle background tint for current block - Auto-surround: select text then type `(` → wraps selection in parens - Configurable auto-close per language (e.g., disable for Lisps) *Modifies:* `CodeEditorWidget.h`, `EditorMode.h` - [x] **Step 180: Rich tooltip system** Replace basic ImGui tooltips with rich formatted tooltips: - Markdown rendering in tooltips (bold, code, lists) - Multi-section tooltips (e.g., type info + docs + source link) - "Pin" button to keep tooltip open while reading - Click-through links in tooltips (navigate to definition) - Configurable hover delay (default 500ms) - Max width/height with scrolling for long content *New:* `RichTooltip.h`. *Modifies:* hover handlers in editor/panels - [x] **Step 181: Enhanced status bar** Context-rich status bar showing everything relevant at a glance: - Left: mode indicator (Text/Structured), language selector (clickable), encoding (UTF-8, clickable to change), line ending (LF/CRLF, clickable) - Center: notification area (last toast message, click for history) - Right: Ln/Col, selection count (chars/lines), zoom %, git branch/status - Background color subtly adapts to state (normal, error, running) - Each segment is clickable for relevant actions *Modifies:* `panels/StatusBarPanel.h` (extracted in Step 166) - [x] **Step 182: Improved diagnostics experience** Make errors and warnings easier to understand and act on: - Problems panel with sortable columns (Severity, Source, File, Message) - Group by file with collapsible sections - Quick-fix actions inline ("Apply suggestion" button on fixable diagnostics) - "Fix All" button for batch-applicable fixes of same type - Peek view: Ctrl+Shift+M shows diagnostic inline without leaving context - Diagnostic count badges on file tabs (red dot = errors, yellow = warnings) *Modifies:* diagnostic rendering, `panels/BottomPanel.h` - [x] **Step 183: Tab and panel drag-and-drop** Fluid drag interactions for workspace customization: - Drag tabs to reorder within the tab bar - Drag tab to split view (left/right/top/bottom drop zones) - Drag files from explorer to specific tab position - Drag panel headers to rearrange docked layout - Visual feedback during drag: ghost preview, drop zone highlights - Double-click tab → rename (for untitled files) *Modifies:* tab rendering, `LayoutManager.h` --- ## Phase 6d: Onboarding & Discoverability (Steps 184–189) Help users discover what Whetstone can do. Reduce the learning curve without being annoying. - [x] **Step 184: First-run experience** Interactive setup wizard on first launch (no session.json found): 1. "Welcome to Whetstone" splash with logo 2. Choose layout preset (VSCode/Emacs/JetBrains) with visual previews 3. Choose theme (grid of 4 most popular themes) 4. Choose keybinding profile with common shortcut preview 5. "Open Example Project" or "Open Folder" or "New File" Settings persisted immediately. Can be re-run from Help > Setup Wizard. *New:* `FirstRunWizard.h` - [x] **Step 185: Contextual feature hints** Non-intrusive discovery system: - Hints appear as subtle bar below toolbar, not modal dialogs - Triggered by context: first time opening annotations panel → "Tip: Right-click a function to add memory annotations" - First time connecting an agent → "Tip: Agents can query and modify your AST via the JSON-RPC API" - Max 1 hint per session, max 3 per day - "Got it" dismisses, "Don't show tips" disables permanently - Hint state tracked in `~/.whetstone/hints.json` *New:* `FeatureHints.h` - [x] **Step 186: Keyboard shortcut reference** Dedicated shortcut panel (Ctrl+K Ctrl+S to open): - Full list grouped by category (File, Edit, View, Navigate, Annotate, Agent, Debug) - Search/filter box - Shows current keybinding profile's mappings - "Record Keys" mode: press any key combo → shows what it does - Highlights customized vs default bindings - Export to printable HTML/PDF *New:* `ShortcutReference.h` - [x] **Step 187: In-editor help system** Help > Documentation opens a dockable panel: - Searchable documentation browser - Sections: Getting Started, Annotation Reference, Language Support, Agent API Quick Reference, Keyboard Shortcuts - Annotation Reference: every annotation type with code examples, valid strategies, language-specific behavior - Content authored in Markdown, rendered in ImGui with basic formatting (headings, code blocks, lists, bold/italic) - "Open in Browser" button for full online docs *New:* `HelpPanel.h`, `MarkdownRenderer.h` - [x] **Step 188: Enhanced command palette** Upgrade the existing command palette: - Commands grouped by category with section headers - "Recently Used" section pinned at top (last 5 commands) - Context-aware: shows different commands based on active panel - Inline parameter input: "Go to Line" → type number inline - ">" prefix for commands, no prefix for file search (like VSCode) - Fuzzy matching highlights matched characters *Modifies:* `CommandPalette.h` - [x] **Step 189: Guided workflow wizards** Multi-step wizards for complex operations: - **"Annotate File"** wizard: iterates through unannotated functions, shows inference suggestions, user confirms/skips each. Summary at end. - **"Cross-Language Project"** wizard: select source language → target → preview annotation adaptation → confirm → new tab with projected code - **"Connect Agent"** wizard: endpoint URL → test connection → set permissions → show API capabilities - Each wizard shows step progress (Step 2 of 4) and allows Back/Skip *New:* `WizardFramework.h`, wizard implementations --- ## Phase 6e: Security & Library UX (Steps 190–195) Integrate the security vulnerability awareness and semantic annotation feature requests with polished UX. - [x] **Step 190: Vulnerability knowledge base** `VulnerabilityDatabase.h`: - Data model: `VulnerabilityRecord` (ecosystem, package, affected_versions, severity, CVE ID, summary, references, fix_versions) - Parse OSV (Open Source Vulnerabilities) JSON format - Local cache in `~/.whetstone/vuln_cache/` with TTL (default 24h) - Offline mode: use cached data when no network - Lookup: `query(ecosystem, package, version) → vector` - Background refresh on editor startup (non-blocking) *New:* `VulnerabilityDatabase.h` - [x] **Step 191: Dependency security badges** Enhance the Dependencies panel with security awareness: - Warning badge (shield icon) on packages with known vulnerabilities - Badge color by max severity: red (Critical/High), orange (Medium), gray (Low) - Click badge → expandable advisory details (CVE, severity, summary, affected versions, fixed version) - "Upgrade to Safe Version" button (writes to dependency file) - "Ignore" option with reason (persisted to `.whetstone/vuln_ignore.json`) *Modifies:* `DependencyPanel.h`, `VulnerabilityDatabase.h` - [x] **Step 192: Security diagnostics integration** Security findings appear alongside other diagnostics: - Problems panel: `[Security]` tagged diagnostics with severity - Gutter: shield icon on `import` lines of vulnerable packages - Tooltip on gutter icon shows vulnerability summary - Agent hints: when `preferImports` is active, deprioritize vulnerable package symbols in completion ranking - Configurable: "Block vulnerable imports" option (default off, warns only) *Modifies:* diagnostic rendering, `PrimitivesRegistry.h` - [x] **Step 193: Semantic annotation tags for libraries** `SemanticTags.h`: - Predefined tag vocabulary: `@serialize`, `@crypto`, `@io`, `@network`, `@math`, `@collection`, `@concurrency`, `@test`, `@ui`, `@parse` - Tag storage: `~/.whetstone/semantic_tags.json` mapping `{ library: { symbol: [tags...] } }` - Auto-tag common libraries (numpy→@math, requests→@network, cryptography→@crypto, json→@serialize, etc.) - Tag inference from function names and docstrings (heuristic) - Tags attached to `ExternalModule` / `TypeSignature` AST nodes *New:* `SemanticTags.h` - [x] **Step 194: Semantic-filtered library browser** Enhance Library Browser with tag-based discovery: - Tag filter bar above symbol list: click tags to filter - Active tags shown as chips, click X to remove - Symbol list shows tag badges next to each item - "Show @crypto functions" → filters across all imported libraries - Completion ranking boosted when tag matches user's context (editing a serialize function → @serialize symbols rank higher) - Agent prompts include semantic tag context for better suggestions *Modifies:* `LibraryBrowserPanel.h`, completion system - [x] **Step 195: Security & semantic UX tests** End-to-end tests: 1. Add vulnerable package → badge appears → advisory details correct 2. Security diagnostic appears in Problems panel with correct severity 3. Semantic tag auto-assignment for numpy → @math 4. Library browser tag filter reduces visible symbols correctly 5. Agent completion deprioritizes vulnerable package symbols 6. "Upgrade to Safe Version" writes correct version to dependency file *New:* `step195_test.cpp` --- ## Phase 6f: Accessibility & Performance (Steps 196–201) Make Whetstone usable by everyone and fast with large files. - [x] **Step 196: High contrast and colorblind modes** Accessibility-first visual options: - "High Contrast" theme (WCAG AAA contrast ratios, bold borders) - Colorblind-safe annotation markers: use **shapes** (circle, triangle, square, diamond, star) in addition to colors - Diagnostic markers use patterns (solid, striped, dotted) not just color - Configurable: "Use shapes for annotations" toggle (default on) - Test: all information conveyed by color also conveyed by shape/pattern *New:* High contrast theme. *Modifies:* annotation/diagnostic rendering - [x] **Step 197: Keyboard navigation completeness audit** Ensure every feature is keyboard-accessible: - All panels navigable with Tab/Shift+Tab - Focus ring indicator on active element (visible in all themes) - Escape consistently returns focus to editor from any panel - All context menu actions have keyboard alternatives - F6 cycles between major panels (editor, explorer, bottom, side) - All dialog buttons reachable via Tab, Enter to confirm, Escape to cancel - Audit checklist: test every panel with mouse unplugged *Modifies:* all panels for focus handling - [x] **Step 198: Virtual scrolling for large files** Performance optimization for files with 10k+ lines: - Only render visible lines + small buffer (±50 lines) - Virtual scroll: total scroll range = total lines, rendered = viewport - Syntax highlighting computed lazily (visible range + prefetch ahead) - Line number gutter only draws visible range - Smooth scroll maintained at all file sizes - Benchmark: 50k line file opens in <500ms, scrolls at 60fps *Modifies:* `CodeEditorWidget.h` - [x] **Step 199: Large file handling** Graceful degradation for very large files: - Files >1MB: show size warning, offer "Open in Text Mode" - Files >5MB: auto-open in Text Mode (no AST sync, no annotations) - Files >10MB: disable syntax highlighting, show "Large File Mode" badge - Memory usage indicator in status bar - Configurable thresholds in Settings - "Reopen in Structured Mode" option if user wants full features *Modifies:* buffer opening logic, `panels/StatusBarPanel.h` - [x] **Step 200: Startup and panel performance** Faster startup and smoother runtime: - Lazy-load panels: only parse/render on first show - Background grammar loading (don't block editor open for tree-sitter init) - Session restore: open tabs immediately with cached text, parse AST asynchronously - Debounce settings: configurable delays for LSP requests, diagnostics, syntax highlighting refresh - Frame time budget monitor in debug builds (warn if frame >16ms) *Modifies:* initialization code, panel rendering - [x] **Step 201: Sprint 6 integration tests** Comprehensive tests covering the full Sprint 6 feature set: 1. Panel extraction: main.cpp compiles and all panels render 2. Theme switch: all annotation colors, syntax colors, panel colors update 3. Multi-cursor: 3 cursors typing simultaneously produce correct text 4. First-run wizard: all settings persisted correctly 5. Vulnerability badge: shows on import of vulnerable package 6. Keyboard-only: complete a full workflow without mouse 7. Large file (50k lines): opens, scrolls, searches within time budget 8. Notification toast: appears, auto-dismisses, appears in history *New:* `step201_test.cpp` --- ## Summary | Phase | Steps | Description | |-------|-------|-------------| | 6a | 166–170 | Structural refactor (panel extraction, state split, notifications, event bus) | | 6b | 171–176 | Theme engine & visual design (themes, icons, typography, animations) | | 6c | 177–183 | Editor UX enhancements (find/replace, multi-cursor, brackets, tooltips, diagnostics) | | 6d | 184–189 | Onboarding & discoverability (first-run, hints, shortcuts, help, wizards) | | 6e | 190–195 | Security & library UX (vulnerability DB, security badges, semantic tags) | | 6f | 196–201 | Accessibility & performance (high contrast, keyboard nav, virtual scroll, large files) | **Total: 36 steps across 6 phases.** --- ## Context for Agents ### What exists after Sprint 5 (prerequisites): - 65+ header files in editor/src/ with 20 AST headers - Library-aware constructive coding flow (PrimitivesRegistry, library completion) - 8+ language grammars with syntax highlighting - LSP client, WebSocket agent server, cross-language projection - Dependencies panel, Library Browser, Composition Builder - Emacs ecosystem integration (packages, functions, keybindings) - Full test coverage (step-per-test pattern, real assertions) ### Architecture principles (reinforced in Sprint 6): 1. **600-line header limit** — split files that exceed this 2. **1500-line main.cpp limit** — extract panels to `panels/` directory 3. **50-field struct limit** — compose sub-structs for large state 4. **Panel extraction pattern** — `void renderXxx(EditorState&)` free functions 5. **Event-driven updates** — use UIEventBus, not polling 6. **Notification system** — use `notify()`, not `outputLog +=` 7. **Theme-aware rendering** — use `ThemeEngine::getColor()`, not hardcoded colors ### Key new files introduced in Sprint 6: | File | What it does | |------|-------------| | `panels/*.h` | Extracted panel rendering functions | | `ThemeEngine.h` | Theme loading, color lookup, hot-reload | | `IconSet.h` | Consistent file/panel/diagnostic icons | | `NotificationSystem.h` | Toast notifications with history | | `UIEventBus.h` | Pub/sub for decoupled panel updates | | `RichTooltip.h` | Markdown-capable hover tooltips | | `VulnerabilityDatabase.h` | CVE/OSV lookup and caching | | `SemanticTags.h` | Library symbol semantic annotations | | `FirstRunWizard.h` | First-launch setup experience | | `FeatureHints.h` | Contextual tip system | | `HelpPanel.h` | In-editor documentation browser | | `MarkdownRenderer.h` | Markdown rendering in ImGui | | `WizardFramework.h` | Multi-step wizard UI component | | `ShortcutReference.h` | Keyboard shortcut browser panel | | `AnimationUtils.h` | Smooth transitions and easing functions | ### Build notes: - No new external dependencies required for Phase 6a–6d - Phase 6e (vulnerability DB): may add a JSON HTTP client for OSV API (or reuse existing HTTP if available), otherwise offline-first with bundled snapshot - All themes are JSON data files, no code changes needed to add more --- ## Sprint 7 Preview (for planning) **Sprint 7: MCP Bridge & Synthetic Training Data** Planned themes (to be fully specified after Sprint 6): 1. Document the JSON-RPC agent API with schemas and examples 2. MCP server wrapper exposing editor operations as MCP tools/resources 3. Synthetic interaction trace generator for fine-tuning tool-use models 4. Agent API evaluation harness (test suites for LLM tool use accuracy) 5. Claude/Codex-specific tool definitions and prompts 6. Training data pipeline: record real sessions → anonymize → export