# DeepCode New UI

Modern, intelligent UI for DeepCode - AI-powered code generation platform.

## Technology Stack

- **Backend**: FastAPI (Python)
- **Frontend**: React 18 + TypeScript + Vite
- **Styling**: Tailwind CSS + shadcn/ui
- **State Management**: Zustand
- **Real-time Communication**: WebSocket
- **Workflow Visualization**: React Flow
- **Code Display**: Monaco Editor

## Features

### Intelligent Features

1. **Real-time Streaming Output** - Watch code generation in real-time, like ChatGPT
2. **Smart Context Awareness** - Remembers conversation history, provides intelligent suggestions
3. **Adaptive Interface** - Layout adjusts based on task type
4. **Visual Workflow** - Draggable flow-chart style task visualization

### Design Style

- Clean, modern design inspired by Notion/Linear
- Light theme with blue accent colors
- Inter font for text, JetBrains Mono for code

## Project Structure

```
new_ui/
├── backend/                    # FastAPI Backend
│   ├── main.py                # Entry point
│   ├── config.py              # Configuration
│   ├── api/
│   │   ├── routes/            # REST API endpoints
│   │   └── websockets/        # WebSocket handlers
│   ├── services/              # Business logic
│   └── models/                # Pydantic models
│
├── frontend/                   # React Frontend
│   ├── src/
│   │   ├── components/        # React components
│   │   ├── pages/             # Page components
│   │   ├── hooks/             # Custom hooks
│   │   ├── stores/            # Zustand stores
│   │   ├── services/          # API client
│   │   └── types/             # TypeScript types
│   ├── package.json
│   └── vite.config.ts
│
└── scripts/
    ├── start_dev.sh           # Development startup
    └── build.sh               # Production build
```

## Quick Start

### Prerequisites

- Python 3.10+
- Node.js 18+
- npm or yarn

### Development

1. **Start both backend and frontend:**

```bash
cd new_ui
chmod +x scripts/start_dev.sh
./scripts/start_dev.sh
```

2. **Or start separately:**

Backend:
```bash
cd new_ui/backend
pip install -r requirements.txt  # First time only
uvicorn main:app --reload --port 8000
```

Frontend:
```bash
cd new_ui/frontend
npm install  # First time only
npm run dev
```

3. **Access the application:**
   - Frontend: http://localhost:5173
   - Backend API: http://localhost:8000
   - API Documentation: http://localhost:8000/docs

### Production Build

```bash
cd new_ui
chmod +x scripts/build.sh
./scripts/build.sh
```

## API Endpoints

### REST API

| Method | Endpoint | Description |
|--------|----------|-------------|
| POST | `/api/v1/workflows/paper-to-code` | Start paper-to-code workflow |
| POST | `/api/v1/workflows/chat-planning` | Start chat-based planning |
| GET | `/api/v1/workflows/status/{task_id}` | Get workflow status |
| POST | `/api/v1/requirements/questions` | Generate guiding questions |
| POST | `/api/v1/requirements/summarize` | Summarize requirements |
| POST | `/api/v1/files/upload` | Upload file |
| GET | `/api/v1/config/settings` | Get settings |
| GET | `/api/v1/sessions` | List persistent sessions |
| GET | `/api/v1/sessions/{session_id}` | Inspect one session |
| POST | `/api/v1/sessions` | Create a session |
| DELETE | `/api/v1/sessions/{session_id}` | Delete a session |

### WebSocket Endpoints

| Endpoint | Description |
|----------|-------------|
| `/ws/workflow/{task_id}` | Real-time workflow progress |
| `/ws/code-stream/{task_id}` | Streaming code output |
| `/ws/tasks/{task_id}/logs?channel=llm` | Tail one task log (`system`, `llm`, or `mcp`) |
| `/ws/sessions/{session_id}/logs` | Merge and stream logs from every task in a session |

## Configuration

The new UI reads from the unified DeepCode configuration file:

- `deepcode_config.json` - LLM providers, models, API keys, MCP servers, workspace, segmentation, logger (single source of truth)

## Integration

The new UI integrates with existing DeepCode components:

- `workflows/agent_orchestration_engine.py` - Core workflow execution
- `workflows/agents/` - Specialized agents
- `utils/llm_utils.py` - LLM provider management

## Browser Support

- Chrome (recommended)
- Firefox
- Safari
- Edge

## License

MIT License - see main DeepCode license.
