- TokenPicker: searchable grouped dropdown for selecting design tokens
with colour swatch previews, clear button, category filtering, custom
group override support (noodl-core-ui)
- PreviewTokenInjector: singleton service that injects project design
tokens as a <style id='noodl-design-tokens'> into the preview webview
via executeJavaScript on every dom-ready and tokensChanged event
- CanvasView: calls notifyDomReady() after valid dom-ready sessions and
clearWebview() on dispose
- ProjectDesignTokenContext: attaches PreviewTokenInjector to the
StyleTokensModel on mount
Phase 5 BYOB now at 43% (3/7 tasks complete):
- TASK-007A: LocalSQL Adapter ✅
- TASK-007B: Local Backend Server ✅
- TASK-007C: WorkflowRunner ✅
- TASK-007D: Launcher UI ✅
Schema viewer/editor will be developed separately.
Use window.require('electron').ipcRenderer.invoke() pattern which is
consistent with how GitHubOAuthService and other IPC calls work.
This fixes 'No IPC transport available' error when using local backends.
Electron doesn't support browser prompt()/confirm() APIs.
Replaced with:
- Inline TextInput form for creating local backends
- useConfirmationDialog hook for delete confirmations
Fixes console error when clicking + button on Local Backends section.
TASK-007D: Local Backends UI Integration
- useLocalBackends hook for IPC communication
- LocalBackendCard component for backend management
- Enhanced BackendServicesPanel with Local Backends section
- Add useLocalBackends hook for IPC communication with local backend server
- Create LocalBackendCard component for managing local SQLite backends
- Add 'Local Backends' section to BackendServicesPanel
- Support start/stop/delete operations for local backends
- Display status, endpoint URL, and port information
Part of TASK-007D: Launcher Integration
TASK-007C: Workflow Runtime Integration
- Add WorkflowRunner class to manage CloudRunner instances
- Integrate WorkflowRunner with LocalBackendServer
- Add workflow IPC handlers to BackendManager:
- backend:update-workflow - Deploy/update a workflow
- backend:reload-workflows - Hot reload all workflows
- backend:workflow-status - Get workflow status
- LocalBackendServer now handles /functions/:name endpoints via WorkflowRunner
- WorkflowRunner loads .workflow.json files from backends/{id}/workflows/
- Phase 11 PROGRESS.md: Mark CF11-004/005 complete, TASK-007B complete
- TASK-007 README: Update testing checklist with completion status
- Both docs now accurately reflect current implementation state
When better-sqlite3 native module isn't installed/buildable, the adapter
now falls back to an in-memory mock implementation. This allows development
and testing without native compilation.
- Add setupBackendIPC() call in app.on('ready')
- Add backendManager.stopAll() cleanup on app before-quit
- Backend IPC now available for renderer process
Test with DevTools:
await require('@electron/remote').ipcRenderer.invoke('backend:list')
await require('@electron/remote').ipcRenderer.invoke('backend:create', 'Test')
await require('@electron/remote').ipcRenderer.invoke('backend:start', backendId)
TASK-007B: Local Backend Server (Phase 5 BYOB)
- Add LocalBackendServer with REST API for database CRUD
- Support /api/:table endpoints for query, create, update, delete
- Support /api/:table/:id for single record operations
- Support /api/_schema for schema management
- Support /api/_batch for batch operations
- Add placeholder for /functions/:name (CloudRunner integration)
- Add BackendManager for backend lifecycle (create, start, stop, delete)
- Add IPC handlers for renderer process communication
- Backends stored in ~/.noodl/backends/{id}/
Next: Integration with main process, UI for backend management
CF11-004: Execution Storage Schema (Phase 11)
- Add TypeScript types for executions, steps, queries, and stats
- Add SQLite schema with workflow_executions and execution_steps tables
- Implement ExecutionStore class with full CRUD operations
- Support query filtering by workflow, status, trigger type, date range
- Support pagination with limit/offset
- Add retention utilities (cleanup by age, count, total)
- Add aggregated statistics (success rate, avg duration)
- Add unit tests with MockDatabase for all operations
Uses synchronous SQLite (better-sqlite3 compatible interface) for
performant local storage of execution history data.
TASK-007A: LocalSQL Adapter (Phase 5/Phase 11 shared foundation)
- Add LocalSQLAdapter implementing CloudStore interface with SQLite backend
- Add QueryBuilder for Parse-style query to SQL translation
- Add SchemaManager for table creation, migrations, and exports
- Support all CloudStore methods: query, fetch, create, save, delete
- Support aggregate, distinct, increment, count operations
- Support relations via junction tables
- Add schema export to PostgreSQL and Supabase formats
- Add comprehensive unit tests for QueryBuilder
This adapter enables:
- Local offline database for development
- Foundation for Phase 11 execution history storage
- Schema migration path to production databases
- Created PHASE-C-COMPLETE.md with full architecture overview
- Updated CHANGELOG with Session 2 details
- Complete feature summary and testing checklist
- Ready for manual testing and user feedback
Phase A-C Status: COMPLETE ✅
Next: Phase D (Testing & Polish)
Wired up complete code generation and I/O detection pipeline:
- Created BlocklyEditorGlobals to expose detectIO and generateCode
- Runtime node accesses detectIO via window.NoodlEditor
- Dynamic port updates based on workspace changes
- Full integration between editor and runtime
- Auto-initialization via side-effect import
Complete flow now works:
1. User edits blocks in BlocklyWorkspace
2. Workspace JSON saved to node parameter
3. IODetector scans workspace for inputs/outputs/signals
4. Dynamic ports created automatically
5. Code generated for runtime execution
Next: Testing and verification
Full integration of canvas tabs into NodeGraphEditor:
- Added renderCanvasTabs() method to render React tab system
- Added handleBlocklyWorkspaceChange() for workspace persistence
- Added cleanup in dispose() for React roots
- Added event listener for LogicBuilder.OpenTab events
- Tabs now render above canvas with provider wrapping
Ready for Phase C Steps 6-7 (property panel + code generation)
- Updated nodegrapheditor.html template with canvas-tabs-root
- Added imports for CanvasTabsProvider and CanvasTabs
- Added canvasTabsRoot property to NodeGraphEditor class
Next: Add render logic and event handlers
Created complete tab system foundation:
- CanvasTabsContext: React Context for tab state management
- CanvasTabs component: Tab UI with canvas/Blockly switching
- Theme-aware SCSS styling using design tokens
- Full TypeScript types and exports
Next: Integrate into NodeGraphEditor, add property panel button
- Updated PHASE-B1-COMPLETE.md with test results and bugfix info
- Updated CHANGELOG.md with testing confirmation
- Added color scheme learning to LEARNINGS.md
- Phase B1 is complete and tested successfully
Changed category from 'Logic' to 'CustomCode' and color from 'purple' to 'javascript' to match Expression node pattern. This ensures the node picker can find the correct color scheme.
Fixes: EditorNode crash 'Cannot read properties of undefined (reading text)'
Issue: colors prop was undefined because color scheme 'purple' doesn't exist
- Created IODetector utility to scan workspaces for I/O blocks
- Implemented Logic Builder runtime node with:
- Dynamic port detection from workspace
- Code execution context with Noodl API access
- Signal input triggers for logic execution
- Error handling and reporting
- Registered node in runtime and added to Custom Code category
The node should now appear in the node picker under Custom Code.
Next: Phase C - Tab system prototype
Part of TASK-012: Blockly Visual Logic Integration
