Architecture

app/start/
├── page.tsx              # Main page with providers
├── components/
│   ├── TopHeader.tsx     # Navigation header
│   ├── LeftSidebar.tsx   # Prompt and settings
│   ├── TldrawCanvas.tsx  # tldraw integration
│   ├── SandboxPanel.tsx  # Preview and terminal
│   ├── SeemodAIPanel.tsx # AI chat interface
│   ├── ModelSelector.tsx # AI model selection
│   └── brainstorm/       # Plan mode components
└── lib/
    ├── sandbox-context.tsx
    ├── generation-context.tsx
    └── editor-context.tsx

// lib/sandbox/factory.ts
export function createSandboxProvider(): SandboxProvider {
  const provider = process.env.SANDBOX_PROVIDER || 'modal';
  
  switch (provider) {
    case 'modal':
      return new ModalProvider();
    case 'e2b':
      return new E2BProvider();
    case 'vercel':
      return new VercelProvider();
    default:
      throw new Error(`Unknown provider: ${provider}`);
  }
}

// Using @opencode-ai/sdk
const client = createOpencodeClient({ baseUrl: opencodeUrl });

// Session management
const session = await client.session.create({
  body: { title: 'Seemodo Session' }
});

// Send prompt
await client.session.prompt({
  path: { id: session.id },
  body: { 
    parts: [{ type: 'text', text: message }],
    model: { providerID: 'vercel', modelID: 'claude-sonnet-4' }
  }
});

// Event stream
const eventSource = new EventSource(`${opencodeUrl}/event`);
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // Handle tool calls, text, errors
};

seemodo-app/
├── app/                        # Next.js App Router
│   ├── page.tsx               # Home page
│   ├── layout.tsx             # Root layout
│   ├── start/                 # Visual canvas
│   │   ├── page.tsx
│   │   ├── components/
│   │   └── lib/
│   ├── generation/            # Code IDE
│   ├── account/               # User account
│   └── api/                   # API routes
├── components/                 # Shared components
│   ├── ui/                    # Base UI components
│   └── shared/                # Shared features
├── lib/                       # Utilities and logic
│   ├── sandbox/               # Sandbox providers
│   ├── ai/                    # AI configuration
│   ├── subscription/          # Credits system
│   └── contexts/              # React contexts
├── config/                    # Configuration
│   └── app.config.ts
├── modal-backend/             # Modal sandbox code
│   ├── main.py               # Modal app
│   ├── server.py             # FastAPI server
│   ├── agent.py              # AI agent
│   └── vite-app/             # Template project
├── styles/                    # CSS and design system
└── types/                     # TypeScript types