Orbit - Mission Control for AI Development

Overview

You are building **Orbit**, a comprehensive "Mission Control" desktop application for developers using AI coding assistants. The app enforces a **strategy-first workflow** where context drives code, bridging rapid prototyping (Bolt.new) and robust engineering (VS Code + AI assistants).

**Core Philosophy: "Context is King"** - Most AI workflows fail because the model forgets the **Why** (Vision) and **Who** (User) while focusing on the **How** (Code). This app enforces a workflow where Strategy is the "Source of Truth" that drives the Code.

**Target User**: Developers who use AI coding assistants (Copilot, Claude Code, ChatGPT) and want to maintain context consistency throughout their development lifecycle.

---

Technical Stack

---

Architecture Principles

1. Local-First Design

The app uses `localStorage` with a custom wrapper (`src/lib/localStorage.ts`) that mimics the Supabase API pattern:

```typescript

import { supabase } from '../lib/supabase';

// Query data

const { data, error } = await supabase

.from('projects')

.select('*')

.eq('user_id', userId);

// Insert data

const { data, error } = await supabase

.from('tasks')

.insert({ title: 'New Task', project_id: projectId })

.select()

.single();

```

**Key file**: `src/lib/supabase.ts` exports `localDb` as `supabase` for drop-in compatibility.

2. Component Organization

```

src/components/

├── auth/ # AuthForm, AuthGuard (currently bypassed with mock user)

├── layout/ # Sidebar, ProjectSelector

├── stages/ # Main stage components (one per workflow stage)

│ ├── vision/ # VisionStage subcomponents

│ ├── research/ # ResearchStage subcomponents

│ ├── strategy/ # StrategyStage subcomponents

│ ├── terminal/ # Terminal-related components

│ └── workbench/ # WorkbenchStage subcomponents

└── ui/ # Reusable UI primitives (Button, Card, Input, Textarea)

```

3. Stage-Based Workflow

1. **Vision** - Define project vision and user personas

2. **Research** - Competitive research and app analysis

3. **Workbench** - Build with AI assistants using context clipping

4. **Prompt Library** - Manage prompt templates

5. **Testing** - Validation and deployment preparation

6. **Settings** - MCP server configuration

---

Coding Standards

TypeScript Rules

```typescript

// Good

interface ButtonProps {

onClick: () => void;

children: React.ReactNode;

variant?: 'primary' | 'secondary' | 'ghost';

}

export const Button: React.FC<ButtonProps> = ({ onClick, children, variant = 'primary' }) => {

// ...

};

```

React Patterns

Import Order

```typescript

// 1. React imports first

import React, { useState, useEffect } from 'react';

// 2. Third-party imports

import { SomeIcon } from 'lucide-react';

// 3. Local imports - contexts

import { useApp } from '../../contexts/AppContext';

// 4. Local imports - components

import { Button } from '../ui/Button';

// 5. Local imports - utilities

import { supabase } from '../../lib/supabase';

```

---

Design System

Color Palette (Tailwind Classes)

**Primary (Slate)** - Used for backgrounds, text, and primary actions:

**Accent (Zinc)** - Used for borders and subtle highlights:

Custom CSS Classes

Defined in `index.css`:

```css

.btn - Base button styles

.btn-primary - Primary action button (bg-primary-700)

.btn-secondary - Secondary action button (bg-accent-800)

.btn-ghost - Transparent button with hover state

.input - Text input styling

.textarea - Multiline input (extends .input)

.card - Container with border and shadow

.card-hover - Card with hover effects

.label - Form label styling

.divider - Horizontal separator

```

Component Usage Examples

**Buttons:**

```tsx

// Primary action

<button className="btn-primary">Save</button>

// Secondary action

<button className="btn-secondary">Cancel</button>

// Subtle action

<button className="btn-ghost">More Options</button>

```

**Cards:**

```tsx

<div className="card p-6">

<h3 className="text-lg font-semibold text-primary-100 mb-4">Title</h3>

<p className="text-primary-400">Content</p>

</div>

```

**Form Fields:**

```tsx

<label className="label">Field Name</label>

<input className="input" placeholder="Enter value..." />

<label className="label">Description</label>

<textarea className="textarea" rows={4} />

```

Typography

Spacing

---

Data Operations

Available Tables

Query Patterns

```typescript

// Select with filter

const { data, error } = await supabase

.from('projects')

.select('*')

.eq('user_id', userId);

// Insert

const { data, error } = await supabase

.from('tasks')

.insert({ title: 'New Task', project_id: projectId })

.select()

.single();

// Update

const { data, error } = await supabase

.from('visions')

.update({ problem: 'Updated problem' })

.eq('id', visionId)

.select()

.single();

// Delete

const { error } = await supabase

.from('tasks')

.delete()

.eq('id', taskId);

```

---

Implementation Guidelines

When Creating Components

1. Place in appropriate directory based on function

2. Use existing UI primitives from `src/components/ui/`

3. Accept `className` prop for customization

4. Include proper TypeScript interface for props

Problem Solving Approach

1. **Start simple** - Implement the simplest solution that works first

2. **Iterate** - Add complexity only when specifically requested

3. **Highlight issues** - Point out potential edge cases or problems

4. **Suggest tests** - Recommend testing approaches for new features

5. **Ask questions** - Clarify ambiguous requirements before implementing

What NOT To Do

---

Current Implementation Status

**Completed:**

**Known Limitations:**

---

Development Commands

```bash

Run development server

npm run dev

Type checking

npm run typecheck

Linting

npm run lint

Build for production

npm run build

```

---

Key Constraints