v0.dev Prompt: Session Coordination Platform

Use this prompt directly in v0.dev to generate the initial UI components.

Prompt 1: Dashboard Page

Create a Next.js 14 dashboard for Claude Code session management with:

1. **Header** with title "Session Coordination Platform" and sync status indicator
2. **Stats cards row** showing: Total Sessions, Total Tokens, Active Forks, Last Sync
3. **Filter bar** with:
   - Search input (full-text search)
   - Path filter dropdown (populated from unique launch_paths)
   - Date range picker (since X days)
   - Machine filter dropdown
   - Status filter (active/completed/archived)
4. **Sessions grid** showing cards with:
   - Session ID (truncated)
   - Launch path
   - Created date (relative time)
   - Message count badge
   - Token usage (input/output)
   - Fork indicator (if has parent/children)
   - Tags
5. **Pagination** at bottom

Use shadcn/ui components. Dark mode compatible.
Data should come from /api/sessions endpoint.

Prompt 2: Session Detail Page

Create a session detail page (/session/[id]) with:

1. **Breadcrumb**: Dashboard > Session > [session_id]
2. **Header section**:
   - Session ID (full)
   - Launch path with copy button
   - Created/Updated timestamps
   - Status badge
   - Export dropdown (Markdown, JSON)
3. **Stats bar**: Message count, Input tokens, Output tokens, Duration
4. **Two-column layout**:
   - **Left (narrow)**: Message navigation list
     - Show message # and role icon
     - Highlight current message
     - Search within session
   - **Right (main)**: Message viewer
     - Role indicator (User/Assistant)
     - Content with markdown rendering
     - Code blocks with syntax highlighting
     - Collapsible "thinking" sections
     - Timestamp and token count per message
5. **Tags section**: Editable tag pills with add button
6. **Fork info panel** (if applicable):
   - Parent session link
   - Child sessions list
   - Fork point indicator

Use shadcn/ui, react-markdown, react-syntax-highlighter.

Prompt 3: Fork Tree Visualization

Create an interactive fork tree visualization page (/forks) with:

1. **Header**: "Session Fork Tree"
2. **Controls bar**:
   - Root session selector dropdown
   - Zoom controls
   - Layout toggle (horizontal/vertical)
   - Filter by date range
3. **Main canvas** using react-flow:
   - Nodes represent sessions
   - Node content: session_id (truncated), date, status color
   - Edges show parent→child relationships
   - Edge labels show fork point (message index)
   - Click node to open session detail panel
   - Hover for session preview tooltip
4. **Side panel** (collapsible):
   - Selected session details
   - Quick navigation to session page
   - Fork point message preview

Node colors:
- Green: active
- Gray: completed
- Yellow: has children
- Blue: currently selected

Use @xyflow/react (react-flow).

Prompt 4: Search Page

Create a search page (/search) with:

1. **Large search input** with real-time search
2. **Filter panel** (collapsible sidebar):
   - Role filter (User/Assistant/All)
   - Path filter
   - Date range
   - Session status
3. **Results list**:
   - Group by session
   - Show message with query highlighted
   - Context (message before/after)
   - Click to navigate to message in session
4. **Result count and pagination**
5. **Search tips** when no query

Use shadcn/ui Command component for search.
Highlight matches with <mark> tags.

Prompt 5: Sync Status Page

Create a sync management page (/sync) with:

1. **Machine list** showing:
   - Machine ID
   - Last sync time
   - Sessions synced count
   - Status indicator
2. **Sync controls**:
   - "Sync Now" button with loading state
   - "Configure Machine" button
3. **Sync history table**:
   - Timestamp
   - Machine
   - Sessions added/updated
   - Status (success/failed)
4. **CLI setup instructions** collapsible section:
   - Installation command
   - Configuration steps
   - Example usage

Include a "Add Machine" dialog for onboarding.

Prompt 6: API Routes Structure

Generate Next.js 14 API routes for session management:

1. /api/sessions (GET, POST)
   - GET: List with filters (path, since, machine, status)
   - POST: Create/sync session

2. /api/sessions/[id] (GET, PUT, DELETE)
   - GET: Full session with messages
   - PUT: Update metadata/tags
   - DELETE: Remove session

3. /api/sessions/[id]/export (GET)
   - Query param: format=md|json
   - Return downloadable file

4. /api/search (GET)
   - Query params: q, path, since, role
   - Return matches with context

5. /api/forks (GET)
   - Return fork graph data

6. /api/sync (POST)
   - Accept bulk session upload
   - Return sync results

Use Drizzle ORM with Neon Postgres.
Include proper error handling and validation.

Prompt 7: Narrative Integration Components

Create components for narrative intelligence integration:

1. **AnalysisBadge**: Shows which analyses were run on a session
   - Character arc, Thematic, Emotional classification
   - Click to view analysis results

2. **ThreeUniversePanel**: Shows three-universe analysis
   - Engineer perspective card
   - Ceremony perspective card
   - Story Engine perspective card
   - Lead universe indicator
   - Coherence score visualization

3. **NarrativeBeatCard**: Links session to structural tension chart
   - Chart ID reference
   - Beat type
   - Description
   - Created timestamp

4. **AnalysisDrawer**: Slide-out panel showing full analysis
   - Tabs for different analysis types
   - Markdown rendering for results
   - Export analysis button

These integrate with /api/narrative/* endpoints.

Combined Implementation Prompt

For generating the complete application in one go:

Create a Next.js 14 application called "Session Coordination Platform" for managing Claude Code sessions.

Tech stack:
- Next.js 14 App Router
- shadcn/ui components
- Tailwind CSS (dark mode)
- Drizzle ORM
- Neon Postgres
- Upstash Redis
- react-flow for visualization

Pages:
1. / - Dashboard with session grid, stats, filters
2. /session/[id] - Session detail with message viewer
3. /forks - Interactive fork tree visualization
4. /search - Full-text search with filters
5. /sync - Machine management and sync controls

Key features:
- Full-text search across messages
- Fork relationship tracking and visualization
- Session export to Markdown/JSON
- Tag management
- Multi-machine sync support
- Dark mode

Database schema for sessions, messages, forks, tags, narrative_beats.
Include all API routes for CRUD and search operations.

Use these prompts sequentially or combine as needed for v0.dev