# 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:

```bash
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