Layout

┌─────────────────────────────────────────────────────┐
│  Header: Project path │ Branch │ Title │ Panel toggles │ Status │
├─────────────────────────────────────────────────────┤
│  Tabs: Chat │ Terminal │ Database │ Deployments       │
├──────────────────────────┬──────────────────────────┤
│                          │                          │
│    Main Content Area     │    Right Panel           │
│    (Chat or Terminal)    │    (File Viewer, Git,    │
│                          │     Browser, CLAUDE.md)  │
│                          │                          │
├──────────────────────────┴──────────────────────────┤
│  Terminal Panel (toggleable)                        │
└─────────────────────────────────────────────────────┘

Session Header

The header bar shows:

• Project path — Shortened path (e.g., ~/Projects/my-app)
• Git branch — Current branch name (if the project is a git repo)
• Session title — Auto-generated from your first message, or renamed manually
• Panel toggle buttons — Quick toggles for each panel (see below)
• Status dot — Color-coded session state

Panel Toggle Buttons

View Mode Tabs

The tabs below the header switch between content views:

• Chat — Visual chat interface (uses SDK backend)
• Terminal — Full Claude CLI terminal (uses CLI backend)
• Database — Database explorer (only visible when Supabase is integrated)
• Deployments — Deployment history (only visible when Vercel is integrated)

Switching Between Chat and Terminal

Switching between Chat and Terminal changes the backend:

• Chat mode uses the Claude SDK — a programmatic API connection
• Terminal mode uses the Claude CLI — a PTY running the actual claude command

When you switch, a confirmation dialog appears because the backend change restarts the session. Your conversation history is preserved.

Tip: The Chat and Terminal modes are two views of the same underlying Claude interaction. Chat mode gives you a richer UI with tool call cards and plan approvals. Terminal mode gives you the raw CLI experience.

Right Panels

The right side of the workspace can show one of these panels (mutually exclusive — opening one closes the others):

• File Viewer — Opens when you click a file path in chat or from the file explorer. Shows syntax-highlighted code with tabs for multiple files.
• Git Panel — Branch info, staged/unstaged changes, and diff viewer
• CLAUDE.md Panel — View the project's Claude instructions file
• Browser Preview — Embedded webview showing your dev server

The File Explorer is a separate rightmost panel that can coexist with any of the above panels.

Each panel is independently resizable using drag handles between them.

Bottom Terminal Panel

An independent terminal panel can be toggled at the bottom of the workspace (Cmd+J or `Cmd+``):

• This is a separate shell from the Claude terminal — use it for running your own commands
• Supports multiple terminal tabs (click + to add)
• Each tab runs its own shell process
• Resizable by dragging the top edge
• Closing the last tab closes the panel

Panel State Persistence

Panel states are sticky per session:

• Which panels are open, their sizes, and positions are saved per session
• When you switch between sessions, each session restores its own panel layout
• Browser preview and file explorer states persist across app restarts