rspace-online/backlog/tasks/task-39 - Port-MycelialIntelligence-system-global-AI-bar-shape.md

id	title	status	assignee	created_date	updated_date	labels	milestone	dependencies	references	priority
TASK-39	Port MycelialIntelligence system (global AI bar + shape)	Done		2026-02-18 19:51	2026-02-28 00:29	shape-port phase-5 ai infrastructure	m-0	TASK-25	canvas-website/src/ui/MycelialIntelligenceBar.tsx canvas-website/src/shapes/MycelialIntelligenceShapeUtil.tsx	high

Description

Port the MycelialIntelligence system from canvas-website to rspace-online. This is a GLOBAL UI element (not just a shape).

Sources:

• canvas-website/src/ui/MycelialIntelligenceBar.tsx (2,231 lines) — the main AI bar
• canvas-website/src/shapes/MycelialIntelligenceShapeUtil.tsx (69 lines) — backward-compat shape

Target: rspace-online/lib/mycelial-intelligence-bar.ts (Web Component) + rspace-online/lib/folk-mycelial-intelligence.ts (shape)

This is the largest single migration item. Implement in phases:

Phase A: Basic chat UI bar (fixed bottom bar with prompt input + response display) Phase B: Canvas context awareness (knows selected shapes, viewport contents) Phase C: Shape creation/modification via AI commands (create shapes, edit properties) Phase D: Full tool integration (all AI capabilities available through bar)

The bar should be added as a persistent element in canvas.html, independent of the shape system.

Acceptance Criteria

• #1 AI bar renders as persistent bottom UI element
• #2 Chat prompt sends to LLM and displays responses
• #3 Bar is context-aware of selected shapes and canvas state
• #4 Can create/modify shapes via AI commands
• #5 Backward-compat folk-mycelial-intelligence shape exists
• #6 Toolbar button toggles bar visibility

Implementation Notes

Phase A partially complete via rstack-mi header bar (shared/components/rstack-mi.ts). Context-aware MI bar now gathers open shapes, active tab, page title and sends to /api/mi/ask. Present in header across all *.rspace.online pages. Commits: f8bd09d, 59f2be3. Remaining: Phase B-D (deeper canvas integration, shape creation via AI, full tool integration) still To Do.

Phase B-D implemented (2026-02-27):

Phase B — Deep Canvas Context:

• lib/mi-canvas-bridge.ts: Singleton collecting shapes, connections, viewport, shape groups from live canvas
• website/canvas.html: Wired bridge to selection (pointerdown), viewport (pan/zoom), deselection
• rstack-mi.ts: #gatherContext() reads bridge for selected shapes, connections, viewport, shape groups, type stats
• server/index.ts: System prompt includes selected shapes, connections, viewport zoom/pan, shape groups, type counts

Phase C — Shape Creation/Modification:

• lib/mi-actions.ts: [MI_ACTION:{...}] parser + action types (create/update/delete/connect/move/transform/navigate)
• lib/mi-action-executor.ts: Executes actions against canvas via window.__canvasApi with $N backreferences
• website/canvas.html: Exposes window.__canvasApi (newShape, findFreePosition, SHAPE_DEFAULTS, sync)
• rstack-mi.ts: Parses actions from response, executes them, shows confirmation chips
• server/index.ts: Action/transform syntax documentation in system prompt

Phase D — Transforms + Tool Suggestions:

• lib/mi-selection-transforms.ts: 15 transforms (align, distribute, arrange, match-size) on window.__miSelectionTransforms
• lib/mi-tool-schema.ts: 23 tool hints with keyword scoring, suggestTools() returns top 3 matches
• rstack-mi.ts: Tool suggestion chips below responses, clickable to create shapes

All exported from lib/index.ts. Commits: d850a76, 0c00a69.

Final Summary

MI Phases A-D complete. The MI bar is context-aware of the full canvas state (selection, connections, viewport, shape groups), can create/modify/delete/connect shapes via [MI_ACTION:{...}] protocol with $N backreferences, supports 15 selection transforms (align, distribute, arrange, match-size), and suggests relevant tools as clickable chips. 5 new lib files, 4 modified files, ~900 lines added. Deployed to production.