rspace-online/backlog/tasks/task-5 - Phase-4-Advanced-Shapes-Video-Chat,-Notes,-Workflows.md

id	title	status	assignee	created_date	labels	dependencies	priority
task-5	Phase 4: Advanced Shapes - Video Chat, Notes, Workflows	Done		2026-01-02 16:04	migration shapes advanced		medium

Description

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

Acceptance Criteria

• #1 folk-video-chat with WebRTC (native getUserMedia instead of Daily.co)
• #2 folk-obs-note with markdown editing
• #3 folk-workflow-block with typed ports
• #4 Workflow execution via folk-arrow connections (port-click events for wiring)

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