stack/docs/JARVIS_FE_MIGRATION.md

Jarvis Frontend Migration Plan

Overview

Cherry-pick high-value components from mosaic/jarvis into mosaic/stack to accelerate frontend development.

Source: ~/src/jarvis-fe/apps/web/src/
Target: ~/src/mosaic-stack/apps/web/src/

Stack Compatibility ✅

Aspect	Jarvis	Mosaic Stack	Compatible
Next.js	16.1.1	16.1.6	✅
React	19.2.0	19.0.0	✅
TypeScript	~5.x	5.8.2	✅
Tailwind	Yes	Yes	✅
Auth	better-auth	better-auth	✅

Migration Phases

Phase 1: Dependencies (Pre-requisite)

Add missing packages to mosaic-stack:

pnpm add @xyflow/react elkjs mermaid @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Phase 2: Core Infrastructure

Component	Source	Target	Priority
ThemeProvider.tsx	providers/	providers/	P0
ThemeToggle.tsx	components/	components/layout/	P0
globals.css (theme vars)	app/	app/	P0

Phase 3: Chat/Jarvis Overlay (#42)

Component	Source	Target	Notes
Chat.tsx	components/	components/chat/	Main chat UI
ChatInput.tsx	components/	components/chat/	Input with attachments
MessageList.tsx	components/	components/chat/	Message rendering
ConversationSidebar.tsx	components/	components/chat/	History panel
BackendStatusBanner.tsx	components/	components/chat/	Connection status

Adaptation needed:

• Update API endpoints to mosaic-stack backend
• Integrate with existing auth context
• Connect to Brain/Ideas API for semantic search

Phase 4: Mindmap/Visual Editor

Component	Source	Target	Notes
mindmap/ReactFlowEditor.tsx	components/	components/mindmap/	Main editor
mindmap/MindmapViewer.tsx	components/	components/mindmap/	Read-only view
mindmap/MermaidViewer.tsx	components/	components/mindmap/	Mermaid diagrams
mindmap/nodes/*.tsx	components/	components/mindmap/nodes/	Custom node types
mindmap/controls/*.tsx	components/	components/mindmap/controls/	Toolbar/export

Adaptation needed:

• Connect to Knowledge module for entries
• Map node types to Mosaic entities (Task, Idea, Project)
• Update save/load to use Mosaic API

Phase 5: Admin/Settings Enhancement

Component	Source	Target	Notes
admin/Header.tsx	components/	components/admin/	Already exists, compare
admin/Sidebar.tsx	components/	components/admin/	Already exists, compare
HeaderMenu.tsx	components/	components/layout/	Navigation dropdown
HeaderActions.tsx	components/	components/layout/	Quick actions

Action: Compare and merge best patterns from both.

Phase 6: Integrations

Component	Source	Target	Notes
integrations/OAuthButton.tsx	components/	components/integrations/	OAuth flow UI
settings/integrations/page.tsx	app/	app/	Integration settings

Execution Plan

Agent 1: Dependencies & Theme (15 min)

• Add missing npm packages
• Copy theme infrastructure
• Verify dark/light mode works

Agent 2: Chat Components (30 min)

• Copy chat components
• Update imports and paths
• Adapt API calls to mosaic-stack endpoints
• Create placeholder chat route

Agent 3: Mindmap Components (30 min)

• Copy mindmap components
• Update imports and paths
• Connect to Knowledge API
• Create mindmap route

Agent 4: Polish & Integration (20 min)

• Code review all copied components
• Fix TypeScript errors
• Update component exports
• Test basic functionality

Files to Skip (Already Better in Mosaic)

• kanban/* (already implemented with tests)
• Most app/ routes (different structure)
• Auth providers (already configured)

Success Criteria

1. ✅ Theme toggle works (dark/light)
2. ✅ Chat UI renders (even if not connected)
3. ✅ Mindmap editor loads with ReactFlow
4. ✅ No TypeScript errors
5. ✅ Build passes

Risks

• API mismatch: Jarvis uses different API structure — need adapter layer
• State management: May need to reconcile different patterns
• Styling conflicts: CSS variable names may differ

Notes

• Keep jarvis-fe repo for reference, don't modify it
• All work in mosaic-stack on feature branch
• Create PR for review before merge