📋 Main Task (parent_id: null)
├── 🔹 Subtask 1 (parent_id: main_task_id)
│   ├── 🔸 Sub-subtask 1.1
│   └── 🔸 Sub-subtask 1.2
└── 🔹 Subtask 2
    └── 🔸 Sub-subtask 2.1

User: "Build a landing page for my product"

Agent creates:
1. Research product information
2. Design page layout
3. Write HTML structure
4. Add CSS styling
5. Create JavaScript interactions
6. Test responsiveness
7. Generate final files

User: "Create a React component for a login form"

Agent creates files:
├── LoginForm.tsx (React component)
├── LoginForm.module.css (Styles)
├── types.ts (TypeScript types)
└── README.md (Documentation)

// Workspace state structure
{
  todos: [
    {
      id: "todo_123",
      task: "Complete analysis",
      description: "Analyze dataset and generate report",
      status: "in_progress",
      parent_id: null,
      created_at: "2025-11-25T10:00:00Z"
    }
  ],
  files: {
    "analysis.py": "import pandas as pd\n...",
    "results.json": "{\"findings\": [...]}",
    "report.md": "# Analysis Report\n..."
  },
  current_todo_id: "todo_123"
}

Chat Settings → HITL Mode → Toggle On/Off

User: "Switch to HITL mode"
Agent: "Switched to Human-in-the-Loop mode. I'll ask for approval before actions."

User: "Go back to auto mode"
Agent: "Switched to Auto mode. I'll work independently."

User: "Create a todo app with React and Firebase"

Workspace:
📋 Tasks:
├── ✅ Plan application structure
├── ✅ Set up React project
├── ⏳ Create components
│   ├── ✅ App.tsx
│   ├── ✅ TodoList.tsx
│   ├── ⏳ TodoItem.tsx
│   └── ⏳ AddTodo.tsx
├── ⏳ Implement Firebase integration
└── ⏳ Add styling and deploy

📁 Files:
├── App.tsx
├── TodoList.tsx
├── TodoItem.tsx
├── firebase.config.ts
├── styles.css
└── README.md

User: "Analyze sales data and find trends"

Workspace:
📋 Tasks:
├── ✅ Load and validate dataset
├── ✅ Clean and preprocess data
├── ✅ Exploratory data analysis
├── ⏳ Statistical analysis
├── ⏳ Generate visualizations
└── ⏳ Write comprehensive report

📁 Files:
├── sales_data_cleaned.csv
├── analysis.py
├── statistics.json
├── plot_sales_trend.png
├── plot_regional_breakdown.png
└── analysis_report.md

User: "Write documentation for our API"

Workspace:
📋 Tasks:
├── ✅ Analyze API endpoints
├── ✅ Draft introduction
├── ⏳ Document authentication
├── ⏳ Write endpoint references
├── ⏳ Add code examples
└── ⏳ Create getting started guide

📁 Files:
├── introduction.md
├── authentication.md
├── endpoints.md
├── examples.md
├── getting-started.md
└── full-documentation.md

User: "Research best practices for microservices architecture"

Workspace:
📋 Tasks:
├── ✅ Research microservices patterns
├── ✅ Analyze pros and cons
├── ✅ Review case studies
├── ⏳ Compare technologies
└── ⏳ Create implementation plan

📁 Files:
├── research-notes.md
├── architecture-patterns.md
├── technology-comparison.md
├── case-studies.md
└── implementation-plan.md

{
  id: "task_2",
  task: "Write tests",
  depends_on: ["task_1"], // Must complete task_1 first
  status: "pending"
}

{
  id: "task_3",
  task: "Fix critical bug",
  priority: "high", // high, medium, low
  status: "in_progress"
}

Template: React Component
├── Component.tsx
├── Component.module.css
├── Component.test.tsx
└── index.ts