93 lines
2.9 KiB
Markdown
93 lines
2.9 KiB
Markdown
---
|
|
id: task-5
|
|
title: 'Phase 4: Advanced Shapes - Video Chat, Notes, Workflows'
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-01-02 16:04'
|
|
labels:
|
|
- migration
|
|
- shapes
|
|
- advanced
|
|
dependencies: []
|
|
priority: medium
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Port remaining complex shapes:
|
|
|
|
1. **folk-video-chat** - Video conferencing (Daily.co)
|
|
- Meeting creation, recording, permissions
|
|
- WebRTC integration
|
|
|
|
2. **folk-obs-note** - Rich markdown from Obsidian
|
|
- MDX editing, vault sync
|
|
- Change detection, save/sync
|
|
|
|
3. **folk-holon** - Holosphere node with H3 geo-indexing
|
|
- Hierarchical geospatial indexing
|
|
- Connection management
|
|
|
|
4. **folk-workflow-block** - Visual workflow automation
|
|
- Typed input/output ports
|
|
- Connection support via folk-arrow
|
|
- Execution state visualization
|
|
|
|
5. **folk-zine-generator** - AI zine creation
|
|
- 5-phase workflow
|
|
- Page generation with feedback loop
|
|
|
|
Simplifications:
|
|
- Use existing folk-arrow for connections
|
|
- Workflows use event-based execution instead of complex state machines
|
|
- Obsidian sync can be optional/pluggable
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 folk-video-chat with WebRTC (native getUserMedia instead of Daily.co)
|
|
- [x] #2 folk-obs-note with markdown editing
|
|
- [x] #3 folk-workflow-block with typed ports
|
|
- [x] #4 Workflow execution via folk-arrow connections (port-click events for wiring)
|
|
<!-- AC:END -->
|
|
|
|
## Implementation Notes
|
|
|
|
### Completed Components
|
|
|
|
**folk-video-chat.ts** (WebRTC Video Chat)
|
|
- Native WebRTC using `navigator.mediaDevices.getUserMedia`
|
|
- Room-based joining with participant management
|
|
- Mute/video toggle, recording indicator
|
|
- Status bar with participant count
|
|
- Join screen with room name input
|
|
|
|
**folk-obs-note.ts** (Rich Markdown Note)
|
|
- Three view modes: Edit, Preview, Split
|
|
- Toolbar with formatting buttons: H1, H2, Bold, Italic, Code, Link, List, Quote
|
|
- Basic markdown rendering for preview
|
|
- Word/character count display
|
|
- Save status indicator with auto-save
|
|
- Resizable content areas
|
|
|
|
**folk-workflow-block.ts** (Visual Workflow Automation)
|
|
- Four block types: trigger, action, condition, output
|
|
- Five port types: string, number, boolean, any, trigger
|
|
- Execution states: idle, running, success, error (with visual indicators)
|
|
- Typed ports with color coding
|
|
- Port click events dispatch for folk-arrow connection wiring
|
|
- Run button for manual execution
|
|
|
|
### Canvas Integration
|
|
- All components registered with `.define()` in canvas.html
|
|
- Toolbar buttons: 📹 Call, 📓 Rich Note, ⚙️ Workflow
|
|
- CSS styling for all components
|
|
- createShapeElement cases for each type
|
|
- Automerge sync via toJSON() serialization
|
|
|
|
### Simplifications Made
|
|
- Used native WebRTC instead of Daily.co (simpler, no external dependency)
|
|
- Markdown rendering is basic (full MDX support can be added later)
|
|
- folk-holon and folk-zine-generator deferred to future tasks
|