Skip to content

Continue WebGPU electric flow implementation#34

Closed
sid597 wants to merge 6 commits intofull-editorfrom
claude/webgpu-electric-flow-dXi0L
Closed

Continue WebGPU electric flow implementation#34
sid597 wants to merge 6 commits intofull-editorfrom
claude/webgpu-electric-flow-dXi0L

Conversation

@sid597
Copy link
Copy Markdown
Owner

@sid597 sid597 commented Jan 16, 2026

No description provided.

- Ctrl+K toggles command panel at bottom of screen
- Focus routing: keyboard input goes to active region (editor or panel)
- Command panel features:
  - Background rect at fixed screen position
  - Text input with blinking caret
  - Placeholder text when empty ("Type a task...")
  - Blue prompt prefix ("> ")
  - Left/Right arrow navigation
  - Backspace/Delete support
  - Enter submits command and closes panel
  - Escape closes panel
  - Click to position cursor
- Separate text rendering flows for editor vs command panel
  to avoid re-tokenizing editor on every panel keystroke
Option A - AI Integration:
- Add server-side Claude API call with mock fallback when no API key
- Add command panel (Ctrl+K) for typing AI prompts
- Add AI response panel (Ctrl+J) showing results on right side
- Wire Enter in command panel to trigger AI request
- Add loading indicator during AI processing
- Add Ctrl+Shift+C to copy AI response to clipboard
- External event dispatch system for async AI responses

Option C - Multi-Region UI:
- Add status bar at bottom showing line:col and focus mode
- Add file tree sidebar (Ctrl+B) with sample files
- Dynamic editor region adjustment when panels open/close
- Click handling for file tree items
- Editor text/caret/selection positions shift with file tree

Technical changes:
- calc-editor-x helper for dynamic layout based on panel state
- External events flow merged into main event loop
- AI request callback passed from Electric to Missionary loop
- Electric ProcessAIRequest function for server-side API calls
Merge features from electric_flow_old.cljc:
- Ctrl+Wheel zoom around cursor (10%-500%)
- Middle-mouse button panning
- Keyboard shortcuts: Ctrl+0 reset, Ctrl+/- zoom
- Zoom level displayed in status bar

Technical changes:
- scroll-x, scroll-y, zoom state in initial state
- Pan-start tracking for smooth panning
- Wheel event includes cursor position and ctrl state
- draw-frame! now accepts zoom parameter
- update-camera uses zoom for GPU rendering
Features:
- Ctrl+Shift+I: Toggle live value inspector
- Shows inline value annotations after top-level expressions
- Color-coded by type (green=number, orange=string, cyan=keyword, etc.)
- Values truncated at 40 chars with ellipsis
- "INSPECT" indicator in status bar when active

Implementation:
- find-all-top-level-forms: Parse AST to find top-level expressions
- evaluate-form-safely: SCI evaluation with type detection
- inspect-all-values: Combine parsing + evaluation with positions
- Value annotations rendered as ghost text after expressions

This enables immediate visual feedback of code evaluation results,
reducing the abstraction distance between code and its behavior.
Features:
- Ctrl+Shift+S: Toggle scrub mode
- find-all-literals: Detects numbers, colors, and 2D vectors
- find-literal-at-position: Hit testing for hover
- Scrub event handlers: start-scrub, scrub-update, end-scrub

State additions:
- scrub-mode: boolean to enable/disable
- scrubbing?: currently dragging a number?
- scrub-literal: the literal being modified
- hover-literal: literal under mouse cursor
- all-literals: cached literals in document

This lays the groundwork for Bret Victor style direct manipulation
where numbers become draggable, colors become clickable swatches,
and vectors become movable points.
Complete number scrubbing feature for Bret Victor-style direct manipulation:

- Add mousemove hover detection for literals in scrub mode
- Wire mousedown to start scrubbing on number literals
- Implement live value updates during scrubbing (1px = 0.1 change)
- Add highlight rect for hovered literals (green for numbers)
- Add active scrubbing highlight (brighter green)
- Add SCRUB indicator in status bar (Ctrl+Shift+S to toggle)
- Fix end-col calculation to use exclusive range for proper hit detection

Features:
- Toggle scrub mode with Ctrl+Shift+S
- Hover over numbers to see green highlight
- Click and drag to scrub values in real-time
- Source code updates live as you drag
- Literal positions refresh after each scrub
@sid597 sid597 closed this Jan 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants