Mark Henderson
e0844b5f2e
Five focused improvements rolled into one deploy:
1. Pre-allocated preview ports + Traefik labels.
Bake docker labels for ports 3000-3009 into every dev-container
compose at ensureDevContainer() time. Each port has its own
subdomain: preview-<slot>-<projectSlug>-<token>.preview.vibnai.com.
Token is derived from projectId so URLs are stable across restarts
but not enumerable across projects. Joins the coolify external
network so Traefik can reach the container.
This avoids the runtime compose-mutation approach (which would
have required a Coolify redeploy on every dev_server.start, ~30s
latency). The trade-off is a hard cap of 10 concurrent dev servers
per project — fine for the "frontend + API" scenario, the only one
we can practically envision.
Wildcard DNS + Traefik DNS-01 cert remain a manual one-time setup
(see vibn-dev/PREVIEWS.md).
2. dev_server.start: port-collision handling.
Detect listeners via `ss` + `lsof` before launching. Three outcomes:
- port out of slot range → PortOutOfRangeError → 400 with allowedRange
- port owned by a different process → PortBusyError → 409
- port owned by a tracked vibn dev server (same project) → kill
the stale row and reuse the slot (most-recent-write-wins; matches
AI mental model when it does an edit-restart loop)
Surfaced via dedicated MCP error codes so the AI can recover
intelligently instead of looping the same start call.
3. gitea_file_{read,write,delete}: hard-removed from AI tool list.
These tools competed with fs.* and tempted the AI into the slow
path. Pulled from VIBN_TOOL_DEFINITIONS but kept in the MCP
dispatcher for 30 days for any external clients still using them.
System prompt rewritten to make Path B the only documented way to
author code; gitea_repo_* + gitea_branches_* remain because they
handle one-time orchestration with no fs.* equivalent.
4. System prompt: HMR + preview-port discipline.
New section covering Vite HMR (clientPort:443 wss), Next dev
(-H 0.0.0.0), and Express (HOST=0.0.0.0). Explicit "ports must be
3000-3009" rule + "if PORT_BUSY don't blindly retry" guidance.
5. Cron docs (vibn-dev/CRON.md).
/etc/cron.d/vibn-path-b template + smoke commands for autosave
and idle-sweep. Wires both 5-minute jobs that already have admin
endpoints (POST /api/admin/path-b/{autosave,idle-sweep}).
MCP version bump 2.6.0 -> 2.7.0. Smoke test: 65 tool defs (down from
68 after gitea_file_* removal), all accepted by Gemini.
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