- 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
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.
- 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/
- 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
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
- 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
- Added MIME type mappings for .otf, .woff, and .woff2 font formats
- Fixed missing break statement after .wav case (was falling through to .mp4)
- Fonts now load correctly in editor preview without 404 errors
- Resolves OTS parsing error messages in console
The web server was already serving project directory files correctly,
but browsers were rejecting font files due to missing/incorrect MIME types.
Related to TASK-006
