together-code/PLANNING_WORKFLOW.md

AI-powered coding assistant that plans, then builds

# 🧠 Planning-First Workflow

Together Code now implements a **planning-first approach** that breaks down complex requests into manageable steps before execution.

## ✨ How It Works

### 1. **Planning Phase**
When you request something, Together Code first creates a detailed plan:
```
⚡ TOGETHER CODE
AI coding agent powered by DeepSeek v3

What would you like me to build?
💬 Create a React todo app with TypeScript
```

### 2. **Plan Review**
The AI analyzes your request and creates a step-by-step plan:

```
📋 Project Plan

Build a React todo application with TypeScript including state management, 
CRUD operations, and local storage persistence.

Steps (0/5 completed):
⏳ 1. Set up project structure and TypeScript configuration (3-5 minutes)
   Create package.json, tsconfig.json, and basic folder structure
   
⏳ 2. Create todo data types and interfaces (2-3 minutes)
   Define TypeScript interfaces for Todo items and app state
   
⏳ 3. Build core Todo component with state management (5-7 minutes)
   Implement main TodoApp component with React hooks for state
   
⏳ 4. Add CRUD operations (add, edit, delete, toggle) (4-6 minutes)
   Create functions to manage todo items with proper state updates
   
⏳ 5. Implement local storage persistence (3-4 minutes)
   Add localStorage integration to persist todos between sessions

Review the plan above. Press:
  ✅ ENTER to approve and start execution
  📝 M to modify the plan
  ❌ ESC to cancel
```

### 3. **Step-by-Step Execution**
After approval, each step is executed individually:

```
📋 Project Plan

Build a React todo application with TypeScript...

Steps (1/5 completed):
✅ 1. Set up project structure and TypeScript configuration (3-5 minutes)
⚡ 2. Create todo data types and interfaces (2-3 minutes)
⏳ 3. Build core Todo component with state management (5-7 minutes)
⏳ 4. Add CRUD operations (add, edit, delete, toggle) (4-6 minutes)
⏳ 5. Implement local storage persistence (3-4 minutes)

⠋ Executing step with DeepSeek v3...
⏱️ 2s elapsed • 🔤 ~156 tokens
```

### 4. **Progress Tracking**
Watch as each step completes with real-time feedback:

```
✅ Files created:
  📄 src/types/Todo.ts
  📄 src/interfaces/AppState.ts

Steps (2/5 completed):
✅ 1. Set up project structure and TypeScript configuration
✅ 2. Create todo data types and interfaces  
⚡ 3. Build core Todo component with state management
⏳ 4. Add CRUD operations (add, edit, delete, toggle)
⏳ 5. Implement local storage persistence
```

### 5. **Completion & Continuation**
When finished, you can start new projects or make modifications:

```
🎉 All steps completed!

🎉 Project completed successfully!
Press ENTER to start a new request, ESC to exit
```

## 🎯 Key Benefits

### **Better Planning**
- Breaks complex requests into logical steps
- Shows estimated time for each step
- Provides clear project overview

### **User Control**
- Review and approve plans before execution
- Modify plans if needed
- See progress in real-time

### **Focused Execution**
- Each step is focused and achievable
- AI stays within step scope
- Better code quality per step

### **Transparency**
- Know exactly what will be built
- See which step is currently executing
- Track overall progress

## 🚀 Example Workflows

### Simple Request
```
User: "Create a React counter component"

Plan:
1. Create basic counter component structure
2. Add state management with hooks
3. Implement increment/decrement functions
4. Add styling and export

Result: Focused, well-structured component
```

### Complex Request
```
User: "Build a full-stack blog with authentication"

Plan:
1. Set up project structure
2. Create database schema
3. Build authentication system
4. Implement blog post CRUD
5. Create user interface
6. Add API endpoints
7. Connect frontend to backend
8. Add testing and deployment

Result: Systematic development with clear milestones
```

### Modification Request
```
User: "Add dark mode to the todo app"

Plan:
1. Create theme context and provider
2. Update component styles for themes
3. Add theme toggle component
4. Persist theme preference

Result: Focused enhancement without disrupting existing code
```

## 💡 Usage Tips

- **Be specific**: More detailed requests lead to better plans
- **Review carefully**: Take time to review the plan before approving
- **Iterate**: Use the completed project as context for further improvements
- **Modify when needed**: Press 'M' to adjust the plan if something doesn't look right

The planning-first approach ensures every project is well-thought-out and executed systematically, leading to better code quality and more predictable results!