342b490fe7
Decomposed "Foundation Setup - Install Dependencies & Configure Tailwind" phase into 6 executable tasks: 1. Install Tailwind CSS, PostCSS & Autoprefixer 2. Map MUI theme to Tailwind design tokens 3. Setup CSS variables for dynamic theming 4. Install Radix UI primitives 5. Initialize shadcn/ui and setup component directory 6. Move MUI to devDependencies and verify setup Tasks follow logical dependency chain with final human verification checkpoint before proceeding with component migration. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
135 lines
4.8 KiB
Markdown
135 lines
4.8 KiB
Markdown
# Frontend
|
|
|
|
`packages/web/` — React web UI for managing initiatives, agents, and content.
|
|
|
|
## Tech Stack
|
|
|
|
| Technology | Purpose |
|
|
|-----------|---------|
|
|
| React 19 | UI framework |
|
|
| TanStack Router | File-based routing |
|
|
| tRPC React Query | Type-safe API client with caching |
|
|
| Tailwind CSS | Utility-first styling |
|
|
| shadcn/ui | Component library (button, card, dialog, dropdown, input, label, textarea, badge, sonner) |
|
|
| Tiptap | Rich text editor (ProseMirror-based) |
|
|
| Lucide | Icon library |
|
|
|
|
## Path Alias
|
|
|
|
`@/*` maps to `./src/*` (configured in `tsconfig.app.json`).
|
|
|
|
## Routes
|
|
|
|
| Route | Component | Purpose |
|
|
|-------|-----------|---------|
|
|
| `/` | `routes/index.tsx` | Dashboard / initiative list |
|
|
| `/initiatives/$id` | `routes/initiatives/$initiativeId.tsx` | Initiative detail (tabbed) |
|
|
| `/settings` | `routes/settings/index.tsx` | Settings page |
|
|
|
|
## Initiative Detail Tabs
|
|
|
|
The initiative detail page has three tabs managed via local state (not URL params):
|
|
|
|
1. **Content Tab** — Page tree + Tiptap editor, proposal review
|
|
2. **Execution Tab** — Pipeline visualization, phase management, task dispatch
|
|
3. **Review Tab** — Pending proposals from agents
|
|
|
|
## Component Inventory (73 components)
|
|
|
|
### Core Components (`src/components/`)
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `InitiativeHeader` | Initiative name, project badges, merge config |
|
|
| `InitiativeContent` | Content tab with page tree + editor |
|
|
| `StatusBadge` | Colored status indicator |
|
|
| `TaskRow` | Task list item with status, priority, category |
|
|
| `QuestionForm` | Agent question form with options |
|
|
| `InboxDetailPanel` | Agent message detail + response form |
|
|
| `ProjectPicker` | Checkbox list for project selection |
|
|
| `RegisterProjectDialog` | Dialog to register new git project |
|
|
| `Skeleton` | Loading placeholder |
|
|
|
|
### Editor Components (`src/components/editor/`)
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `TiptapEditor` | Core rich text editor wrapper |
|
|
| `PageEditor` | Page content editor with auto-save |
|
|
| `PhaseContentEditor` | Phase content editor |
|
|
| `ContentProposalReview` | Accept/dismiss proposals from agents |
|
|
| `SlashCommandMenu` | Slash command popup in editor |
|
|
|
|
### Execution Components (`src/components/execution/`)
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `ExecutionTab` | Main execution view container |
|
|
| `ExecutionContext` | React context for execution state |
|
|
| `PhaseDetailPanel` | Phase detail with tasks, dependencies, breakdown |
|
|
| `PhaseSidebar` | Phase list sidebar |
|
|
| `TaskDetailPanel` | Task detail with agent status, output |
|
|
|
|
### Pipeline Components (`src/components/pipeline/`)
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `PipelineVisualization` | DAG visualization of phase pipeline |
|
|
| `PipelineNode` | Individual phase node in pipeline |
|
|
| `PipelineEdge` | Dependency edge between nodes |
|
|
|
|
### Review Components (`src/components/review/`)
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `ReviewTab` | Review tab container |
|
|
| `ProposalCard` | Individual proposal display |
|
|
|
|
### UI Primitives (`src/components/ui/`)
|
|
shadcn/ui components: badge, button, card, dialog, dropdown-menu, input, label, sonner, textarea.
|
|
|
|
## Custom Hooks (`src/hooks/`)
|
|
|
|
| Hook | Purpose |
|
|
|------|---------|
|
|
| `useRefineAgent` | Manages refine agent lifecycle for initiative |
|
|
| `useDecomposeAgent` | Manages decompose agent for phase breakdown |
|
|
| `useAgentOutput` | Subscribes to live agent output stream |
|
|
|
|
## tRPC Client
|
|
|
|
Configured in `src/lib/trpc.ts`. Uses `@trpc/react-query` with TanStack Query for caching and optimistic updates.
|
|
|
|
## Key User Flows
|
|
|
|
### Creating an Initiative
|
|
1. Dashboard → "New Initiative" → enter name, select projects
|
|
2. `createInitiative` mutation → auto-creates root page
|
|
3. Navigate to initiative detail
|
|
|
|
### Managing Content (Pages)
|
|
1. Content tab → page tree sidebar
|
|
2. Click page → Tiptap editor loads content
|
|
3. Edit → auto-saves via `updatePage` mutation
|
|
4. Use slash commands for formatting
|
|
|
|
### Refining Content with AI
|
|
1. Content tab → "Refine" button
|
|
2. `spawnArchitectRefine` mutation → agent analyzes pages
|
|
3. Agent creates proposals (page edits, new phases, tasks)
|
|
4. Proposals appear in review section → accept/dismiss each
|
|
|
|
### Pipeline Visualization
|
|
1. Execution tab → pipeline DAG shows phases as nodes
|
|
2. Drag to add dependencies between phases
|
|
3. Approve phases → queue for dispatch
|
|
4. Tasks auto-queued when phase starts
|
|
|
|
### Decomposing Phases
|
|
1. Select phase → "Breakdown" button
|
|
2. `spawnArchitectDecompose` mutation → agent creates task proposals
|
|
3. Accept proposals → tasks created under phase
|
|
4. View tasks in phase detail panel
|
|
|
|
## Shared Package
|
|
|
|
`packages/shared/` exports:
|
|
- `sortByPriorityAndQueueTime()` — priority-based task sorting
|
|
- `topologicalSort()` / `groupByPipelineColumn()` — phase DAG layout
|
|
- Shared type re-exports from `packages/shared/src/types.ts`
|