Files

Mark Henderson 40bf8428cd VIBN Frontend for Coolify deployment

2026-02-15 19:25:52 -08:00

8.9 KiB

Raw Blame History

🎨 Frontend Structure - Complete Map

/[workspace]/                           # Workspace-level pages
├── /projects                           # Projects list
├── /project/[projectId]/               # Individual project pages
├── /connections                        # GitHub/API connections
├── /keys                              # API key management
└── /new-project/new                   # Create new project

📱 Core Pages (Active & Working)

1. AI Chat ✅

/[workspace]/project/[projectId]/v_ai_chat

File: app/[workspace]/project/[projectId]/v_ai_chat/page.tsx

Features:

✅ Real-time chat with AI (6 modes)
✅ Vector search integration (retrieves from AlloyDB)
✅ Conversation history (Firestore)
✅ "Analyze Context" button (batch extraction)
✅ Mode badge showing current AI mode
✅ Artifacts badge (shows what AI is using)
✅ File attachments (not yet wired to backend)

What AI Can Access:

Knowledge items (documents, AI chats)
Vector search (50 chunks from AlloyDB)
GitHub repo analysis
Product model, MVP plan, Marketing plan
Extractions

2. Context Management ✅

/[workspace]/project/[projectId]/context

File: app/[workspace]/project/[projectId]/context/page.tsx

Features:

✅ Upload documents
✅ Connect GitHub repos
✅ Import AI chat transcripts (hidden per your request)
✅ View all connected sources
✅ See document summaries

What Happens:

Upload doc → Firestore + AlloyDB chunking
Connect GitHub → Repo analysis + tree view
Everything becomes searchable by AI

3. Code Viewer ✅

/[workspace]/project/[projectId]/code

File: app/[workspace]/project/[projectId]/code/page.tsx

Features:

✅ Browse connected GitHub repo
✅ File tree navigation
✅ View file contents with syntax highlighting
✅ Line numbers
⚠️ AI can reference but not directly read files yet

4. Projects List ✅

/[workspace]/projects

File: app/[workspace]/projects/page.tsx

Features:

✅ View all projects
✅ Create new project
✅ Filter/search projects
✅ Quick actions

5. Project Overview ✅

/[workspace]/project/[projectId]/overview

File: app/[workspace]/project/[projectId]/overview/page.tsx

Features:

✅ Project stats
✅ Recent activity
✅ Phase progress
✅ Quick access to sections

6. Connections ✅

/[workspace]/connections

File: app/[workspace]/connections/page.tsx

Features:

✅ GitHub OAuth integration
✅ Connect/disconnect repos
✅ View connected accounts

7. Vision Page ✅

/[workspace]/project/[projectId]/vision

File: app/[workspace]/project/[projectId]/vision/page.tsx

Features:

✅ View canonical product model
✅ See vision artifacts
⚠️ Currently read-only (no editing UI yet)

🚧 Pages with Placeholder UI

These exist but show mock/placeholder data:

Design System 🔨

/[workspace]/project/[projectId]/design

File: app/[workspace]/project/[projectId]/design/page.tsx

Status: Mock UI (not connected to backend)

Shows placeholder screens
Design variation concepts
Not integrated with AI yet

API Map 🔨

/[workspace]/project/[projectId]/api-map

Status: Mock UI

Placeholder API endpoints
Not generated from actual data

Architecture 🔨

/[workspace]/project/[projectId]/architecture

Status: Mock UI

Placeholder architecture diagrams
Not AI-generated yet

Features 🔨

/[workspace]/project/[projectId]/features

Status: Mock UI

Placeholder feature list
Not synced with MVP plan

Plan 🔨

/[workspace]/project/[projectId]/plan

Status: Mock UI

Shows placeholder tasks
Not connected to MVP plan data

Progress 🔨

/[workspace]/project/[projectId]/progress

Status: Mock UI

Placeholder progress tracking

Deployment 🔨

/[workspace]/project/[projectId]/deployment

Status: Mock UI

Placeholder deployment info

Automation 🔨

/[workspace]/project/[projectId]/automation

Status: Mock UI

Placeholder automation workflows

Analytics 🔨

/[workspace]/project/[projectId]/analytics

Status: Mock UI

Placeholder analytics dashboards

Sessions 🔨

/[workspace]/project/[projectId]/sessions

Status: Mock UI

Placeholder work sessions

🎯 Layout Components

Main Layout

app/[workspace]/project/[projectId]/layout.tsx

Structure:

┌─────────────────────────────────────────┐
│  Workspace Left Rail                    │
├──────────┬──────────────────────────────┤
│ Project  │  Main Content Area           │
│ Sidebar  │  (Your active page)          │
│          │                              │
│          │                              │
└──────────┴──────────────────────────────┘

Features:

Persistent left rail (workspace navigation)
Project sidebar (section navigation)
Toast notifications (Sonner)

🔗 Key UI Components

WorkspaceLeftRail

components/layout/workspace-left-rail.tsx

Navigation:

Projects
Connections
Keys
MCP (Model Context Protocol)

ProjectSidebar

components/layout/project-sidebar.tsx

Sections:

Overview
AI Chat ✅
Context ✅
Code ✅
Vision ✅
Plan 🔨
Design 🔨
Features 🔨
API Map 🔨
Architecture 🔨
Progress 🔨
Analytics 🔨
Deployment 🔨
Automation 🔨
Sessions 🔨
Settings

RightPanel

components/layout/right-panel.tsx

Features:

Quick AI chat access (collapsed by default)
Context-aware to current project
⚠️ Currently not implemented (references only)

🎨 UI Library

Using shadcn/ui components:

Card, Button, Input, Textarea
Dialog, Sheet, Tabs, Badge
Dropdown, Select, Tooltip
Toast notifications (Sonner)

Styling:

Tailwind CSS
Dark mode ready (not enabled)
Responsive (mobile not optimized yet)

📊 Data Flow

Frontend Pages
    ↓
API Routes (/app/api/*)
    ↓
Server Helpers (/lib/server/*)
    ↓
Databases:
    ├─ Firestore (metadata, chat history, projects)
    ├─ AlloyDB (vector chunks for search)
    └─ Firebase Storage (uploaded files)
    ↓
AI Services:
    ├─ Gemini (chat, extraction, embeddings)
    └─ GitHub API (repo analysis)

✅ What's Fully Working

AI Chat - Complete with vector search
Context Management - Upload, connect, view
Code Viewer - Browse GitHub repos
GitHub Integration - OAuth, repo connection
Document Upload - With AlloyDB chunking
Conversation History - Persists across refreshes
Batch Extraction - "Analyze Context" button
Mode-Based AI - 6 modes with smart routing

🚧 What Needs Work

High Priority:

Vision Page - Make it editable, not just read-only
Plan Page - Connect to actual MVP plan data
Features Page - Sync with canonicalProductModel
RightPanel AI Chat - Implement collapsed quick access

Medium Priority:

Design Page - Generate actual design suggestions
API Map Page - Generate from product model
Architecture Page - AI-generated architecture
Progress Page - Real task tracking

Low Priority:

Analytics - Usage tracking
Deployment - Deployment tracking
Automation - Workflow automation
Sessions - Work session tracking

🎯 Recommended Focus

For immediate user value:

✅ AI Chat with vector search (DONE!)
✅ Context upload & management (DONE!)
✅ GitHub integration (DONE!)
🔨 Vision Page editing - Let users refine product model
🔨 Plan Page with real data - Show actual MVP plan

The core loop works:

Upload context → AI analyzes → Chat with AI → Get answers
                                    ↓
                            (grounded in your docs)

Everything else is enhancement on top of this working foundation! 🚀

🔗 Quick Links

Start AI Chat: http://localhost:3000/marks-account/project/YOUR_PROJECT_ID/v_ai_chat
Upload Context: http://localhost:3000/marks-account/project/YOUR_PROJECT_ID/context
View Code: http://localhost:3000/marks-account/project/YOUR_PROJECT_ID/code
Projects List: http://localhost:3000/marks-account/projects

Replace YOUR_PROJECT_ID with 4QzuyYxmvDfV6YB9kwtJ (your current project).

8.9 KiB Raw Blame History

🎨 Frontend Structure - Complete Map

🗺️ Main Navigation Structure

📱 Core Pages (Active & Working)

1. AI Chat ✅

2. Context Management ✅

3. Code Viewer ✅

4. Projects List ✅

5. Project Overview ✅

6. Connections ✅

7. Vision Page ✅

🚧 Pages with Placeholder UI

Design System 🔨

API Map 🔨

Architecture 🔨

Features 🔨

Plan 🔨

Progress 🔨

Deployment 🔨

Automation 🔨

Analytics 🔨

Sessions 🔨

🎯 Layout Components

Main Layout

🔗 Key UI Components

WorkspaceLeftRail

ProjectSidebar

RightPanel

🎨 UI Library

📊 Data Flow

✅ What's Fully Working

🚧 What Needs Work

High Priority:

Medium Priority:

Low Priority:

🎯 Recommended Focus

🔗 Quick Links

8.9 KiB

Raw Blame History