Create a Multi-Agent Task Assignment page where users can visually manage up to 7 AI agents, assign tasks to each agent, define agent roles, pass prompts, and control which agents are active in a workflow.

This page acts as the control center for configuring how multiple AI agents collaborate on a single user goal.

🎯 Objectives

• Display 7 configurable agents

• Allow users to:

  • Assign roles (Planner, Researcher, Executor, etc.)
  • Pass custom prompts to each agent
  • Enable / disable agents
  • Add or remove optional agents

• Provide a clean, intuitive UX for agent orchestration

🖥️ Page: Multi-Agent Configuration Dashboard

🧠 Default Agents (7)

Each agent card represents one AI agent:

1. Planner Agent
2. Research Agent
3. Reasoning Agent
4. Tool/Execution Agent
5. Validation Agent
6. Memory Agent
7. Observer / Monitor Agent

(Names editable by user)

🧱 Agent Card UI (Each Agent)

Fields

• Agent Name (editable)
• Agent Type (dropdown)
• System Prompt (textarea)
• Task / Instruction Input
• Tools Allowed (checkboxes or tags)
• Priority / Order (number)
• Active Toggle (Enable / Disable)
• Remove Agent (if optional)

Agent Types (Selectable)

• Planner
• Researcher
• Executor
• Validator
• Critic
• Memory
• Custom

⚙️ Page Features

• Add new agent (up to 7)
• Remove agent (except mandatory core agent)
• Drag & reorder agents (execution order)
• Validate prompts before submission
• Save configuration as draft
• Submit configuration to backend

🔄 Data Flow (Frontend)

1. User configures agents

2. User assigns prompt/task to each agent

3. User submits configuration

4. Payload sent to backend Orchestration API

5. UI shows:

   • Saved state
   • Validation errors
   • Submission success

📦 API Integration (Expected)

{
  "runName": "Wallet Risk Analysis",
  "agents": [
    {
      "agentId": "planner",
      "name": "Planner Agent",
      "type": "planner",
      "prompt": "Break down the user goal into steps",
      "tools": [],
      "priority": 1,
      "isActive": true
    }
  ]
}

✅ Acceptance Criteria

• Page displays up to 7 agent cards
• Agents can be added, removed, reordered
• Prompts and roles editable
• Validation before submit
• Clean UI (no clutter)
• Backend payload matches API contract
• No console errors

🛠️ Tech Stack

• React
• State management (Context / Zustand / Redux)
• Form validation
• Drag & Drop (optional)

📎 Notes

• Keep UI scalable for future agent types
• Agent cards should be reusable components
• Do not hardcode agent logic on frontend