Project Structure

Understanding the project layout helps navigate and extend Uranus effectively.

Directory Overview

uranus/manage/
├── src/                    # Frontend source code
│   ├── main.tsx           # React entry point
│   ├── App.tsx            # Router configuration
│   ├── worker.ts          # Cloudflare Worker entry
│   ├── agent/             # Durable Object implementation
│   ├── pages/             # React page components
│   ├── components/        # Reusable UI components
│   ├── contexts/          # React Context providers
│   ├── hooks/             # Custom React hooks
│   └── lib/               # Utility libraries
├── functions/             # Cloudflare Pages Functions (API)
│   └── api/               # API route handlers
├── lib/                   # Shared backend utilities
├── migrations/            # Database migration files
├── public/                # Static assets
├── dist/                  # Build output
├── schema.sql            # Database schema
├── wrangler.toml         # Cloudflare configuration
├── vite.config.ts        # Vite build configuration
├── tailwind.config.ts    # Tailwind CSS configuration
└── package.json          # Dependencies and scripts

Frontend (src/)

Entry Points

File	Purpose
main.tsx	React DOM rendering, app initialization
App.tsx	React Router configuration, route definitions
worker.ts	Cloudflare Worker entry, request routing

Pages (src/pages/)

pages/
├── index.tsx              # Dashboard home
├── Login.tsx              # Authentication page
├── Signup.tsx             # User registration
└── agents/                # Agent-specific pages
    ├── state.tsx          # State management UI
    ├── sql.tsx            # SQL query editor
    ├── schedules.tsx      # Task scheduling
    ├── calendar.tsx       # Calendar view
    ├── websocket.tsx      # WebSocket monitoring
    ├── mcp.tsx            # MCP server management
    ├── chat.tsx           # AI chat interface
    ├── tools.tsx          # Tool configuration
    ├── contacts.tsx       # Contact directory
    ├── workflows.tsx      # Visual workflow editor
    ├── services.tsx       # Service integrations
    ├── context.tsx        # Context management
    ├── browser.tsx        # Browser control
    └── settings.tsx       # Agent settings

Components (src/components/)

components/
├── ui/                    # Radix UI components
│   ├── button.tsx
│   ├── input.tsx
│   ├── dialog.tsx
│   ├── dropdown-menu.tsx
│   ├── tabs.tsx
│   └── ...               # 20+ UI primitives
├── layout/
│   └── DashboardLayout.tsx # Main layout wrapper
├── ProtectedRoute.tsx     # Auth route guard
└── scheduling/
    └── CronBuilder.tsx    # Cron expression builder

Contexts (src/contexts/)

Context	Purpose
AuthContext.tsx	User authentication state
AgentContext.tsx	Current agent selection

Hooks (src/hooks/)

Hook	Purpose
useAgent.ts	Agent data fetching and state
use-mobile.tsx	Mobile device detection
index.ts	Hook exports

Library (src/lib/)

File	Purpose
types.ts	TypeScript type definitions
api-client.ts	Frontend API client
db.ts	Database utilities
auth.ts	Authentication helpers
response.ts	HTTP response helpers
browserbase.ts	Browserbase integration
novnc-browser.ts	NoVNC browser client
workflow-codegen.ts	Workflow code generation

Backend (functions/api/)

API Route Structure

functions/api/
├── agents/
│   ├── index.ts           # GET/POST /api/agents
│   └── [id].ts            # GET/PUT/DELETE /api/agents/:id
├── workflows/
│   ├── index.ts           # List/create workflows
│   ├── [id].ts            # CRUD workflow
│   └── execute.ts         # Trigger execution
├── schedules/
│   ├── index.ts           # List/create schedules
│   └── [id].ts            # CRUD schedule
├── calendar/
│   ├── index.ts           # Calendar tasks
│   └── [id].ts            # CRUD calendar task
├── chat.ts                # Chat messages & AI
├── state.ts               # Agent state
├── sql/
│   ├── execute.ts         # Execute SQL
│   └── schema.ts          # Get schema
├── browser/
│   ├── index.ts           # Browser sessions
│   └── [id]/
│       ├── execute.ts     # Browser actions
│       ├── live-view.ts   # Live view
│       └── takeover.ts    # Human takeover
├── contacts/
│   ├── index.ts           # Contact list
│   └── [id].ts            # CRUD contact
├── sources/
│   ├── index.ts           # Data sources
│   ├── search.ts          # RAG search
│   └── [id].ts            # CRUD source
├── mcp/
│   └── index.ts           # MCP servers
├── gateways/
│   ├── index.ts           # Gateways
│   └── [id].ts            # CRUD gateway
├── conversations/
│   └── index.ts           # Conversations
├── agent-connections/
│   └── index.ts           # A2A connections
├── tools/
│   └── index.ts           # Agent tools
├── services/
│   └── [id].ts            # Service config
├── metrics.ts             # System metrics
└── logs.ts                # Event logs

Durable Object (src/agent/)

agent/
└── index.ts               # DashboardAgent class
    ├── constructor()      # Initialize state
    ├── fetch()            # HTTP request handler
    ├── webSocketMessage() # WebSocket handler
    ├── webSocketClose()   # Connection cleanup
    └── alarm()            # Scheduled execution

Shared Library (lib/)

File	Purpose
types.ts	Backend type definitions
db.ts	Database query helpers
response.ts	HTTP response utilities
auth.ts	Authentication logic
browserbase.ts	Browserbase SDK wrapper
novnc-browser.ts	NoVNC integration

Configuration Files

wrangler.toml

name = "cloudflare-agents-pages"
main = "src/worker.ts"
compatibility_date = "2024-12-05"

[vars]
ENVIRONMENT = "development"

[[d1_databases]]
binding = "DB"
database_name = "agents-dashboard"

[[r2_buckets]]
binding = "BUCKET"
bucket_name = "agents-dashboard-files"

[[durable_objects.bindings]]
name = "AGENT"
class_name = "DashboardAgent"

[[vectorize]]
binding = "VECTORIZE"
index_name = "agents-dashboard-embeddings"

vite.config.ts

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: './dist'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

tailwind.config.ts

export default {
  darkMode: ['class'],
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        sidebar: { /* custom colors */ }
      }
    }
  }
}

Database Files

File	Purpose
schema.sql	Main database schema
migrations/002_multi_agent.sql	Multi-agent support
migrations/003_agent_auth.sql	Access control
migrations/004_workflow_executions.sql	Execution tracking
migrations/005_cloudflare_settings.sql	CF integration
migrations/006_browser_actions_types.sql	Browser actions
migrations/007_puppeteer_action_types.sql	Puppeteer actions

Build Output

dist/
├── index.html            # Entry HTML
├── assets/
│   ├── index-[hash].js   # Main bundle
│   ├── index-[hash].css  # Styles
│   └── ...               # Chunks
└── ...                   # Static assets