Mark Henderson
b6eaa85733
CRITICAL: every Vibn project was rendering every other project's
services in the same workspace (Twenty CRM, n8n, all databases,
all secrets). Tenancy was effectively broken — cross-project data
exposure inside a workspace.
Root cause:
- Coolify's POST /projects validates `description` against a strict
allowlist (letters, numbers, spaces, and `- _ . , ! ? ( ) ' " + = * / @ &`).
- Our description "Vibn project: <name> (workspace: <slug>)" contains
two colons. Every project-create on Coolify returned 422.
- lib/projects.ts caught that 422 and fell back to
`workspace.coolify_project_uuid` so deploys "weren't blocked."
- That UUID is shared by every Vibn project in the workspace, so
listServicesInProject(coolifyProjectUuid) returned the union of
all projects' services, applications, and databases for any
project in the workspace. The Product, Hosting, and Infrastructure
tabs all rendered cross-tenant data as if it were the current
project's.
Fixes (defense in depth — fix at every layer):
1. lib/coolify.ts createProject(): sanitize the description against
Coolify's allowlist at the boundary so no caller can ever ship
a description that 422s. Replaces disallowed chars with `-`,
collapses runs, caps at 255 chars.
2. lib/projects.ts ensureProjectCoolifyProject():
- Pre-sanitize the description we pass (belt + suspenders).
- Detect when `stored === workspace.coolify_project_uuid` (the
legacy bad state) and re-provision a dedicated project.
- REMOVE the workspace-UUID fallback on create failure. A 422
now leaves coolifyProjectUuid null and the UI shows an empty
state, which is correct: better to surface "no resources" than
to lie about which project owns what.
- Export sanitizeCoolifyDescription helper for reuse.
3. /api/projects/[projectId]/anatomy/route.ts: SELF-HEAL on every
read. If the project's stored Coolify UUID matches the
workspace's UUID, we treat it as missing, re-provision a
dedicated Coolify project on the fly (idempotent — reuses the
existing one if found by name), persist the new UUID, and
continue serving with the corrected scope. If provisioning
fails we fall back to undefined, NOT the workspace UUID, so
no cross-tenant data ever surfaces again.
The self-heal means existing already-broken projects will fix
themselves on the next page load — no manual data migration needed.
Made-with: Cursor
VIBN Frontend
AI-Powered Development Platform - Track, manage, and deploy your AI-coded projects with ease.
🎨 Features
Built with Plane.so design patterns:
- ✅ Resizable Sidebar - Collapsible sidebar with peek-on-hover
- ✅ Dashboard Layout - Clean, modern interface following Plane's style
- ✅ Overview Page - Project stats, recent activity, and getting started guide
- ✅ Sessions - Track AI coding sessions with conversation history
- ✅ Features - Plan and track product features
- ✅ API Map - Auto-generated API endpoint documentation
- ✅ Architecture - Living architecture docs and ADRs (Architectural Decision Records)
- ✅ Analytics - Cost analysis, token usage, and performance metrics
- ✅ Porter Integration - One-click deployment for AI-coded tools
🛠️ Tech Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Notifications: Sonner
🚀 Getting Started
Quick Start
# 1. Install dependencies
npm install
# 2. Setup environment variables (see SETUP.md for details)
cp .env.template .env.local
# Edit .env.local with your Firebase credentials
# 3. Start development server
npm run dev
📖 For detailed setup instructions, see SETUP.md
Build
npm run build
npm start
📁 Project Structure
vibn-frontend/
├── app/
│ ├── (dashboard)/
│ │ └── [projectId]/
│ │ ├── layout.tsx # Main dashboard layout
│ │ ├── overview/page.tsx # Dashboard home
│ │ ├── sessions/page.tsx # AI coding sessions
│ │ ├── features/page.tsx # Feature planning
│ │ ├── api-map/page.tsx # API documentation
│ │ ├── architecture/ # Architecture docs
│ │ └── analytics/page.tsx # Cost & metrics
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home redirect
├── components/
│ ├── sidebar/
│ │ ├── resizable-sidebar.tsx # Resizable sidebar wrapper
│ │ └── project-sidebar.tsx # Sidebar content
│ └── ui/ # shadcn/ui components
└── lib/
└── utils.ts # Utility functions
🎯 Routes
/[projectId]/overview- Project dashboard/[projectId]/sessions- AI coding sessions/[projectId]/features- Feature planning/[projectId]/api-map- API endpoint map/[projectId]/architecture- Architecture documentation/[projectId]/analytics- Cost and metrics
📊 Components
Resizable Sidebar
Based on Plane's sidebar pattern:
- Drag-to-resize (200px - 400px)
- Collapse/expand button
- Peek-on-hover when collapsed
- Smooth transitions
Dashboard Pages
All pages follow consistent patterns:
- Header with title and actions
- Content area with cards
- Responsive layout
- Empty states with CTAs
🔄 Next Steps
- Connect to Database - Wire up PostgreSQL data
- Build API Routes - Create Next.js API routes for data fetching
- Real-time Updates - Add live session tracking
- Porter Integration - Implement deployment workflows
- Authentication - Add user auth and project management
🎨 Design System
Following Plane.so patterns:
- Clean, minimal interface
- Consistent spacing and typography
- Subtle animations
- Dark mode support (via Tailwind)
- Accessible components (via shadcn/ui)
📝 Notes
- Built for Porter hosting deployment
- Designed for AI vibe-coded project management
- Real data integration coming next
- Backend API in
/vibn-backendfolder
Status: ✅ Frontend scaffolded and running Next: Connect to PostgreSQL database and build API layer