Implement Agent Card UI for multi-agent configuration

LocalMind-Frontend/src/app/routes/AppRoutes.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import HomePage from '../../features/Dashboard/V1/Component/Pages/HomePage'
 import LoginPage from '../../shared/component/v1/LoginPage'
+import Agents from "../../features/Dashboard/V1/Component/Pages/Agents";
+
 
 const AppRoutes: React.FC = () => {
   return (
@@ -17,6 +19,9 @@ const AppRoutes: React.FC = () => {
 
       {/* Forgot Password Page - TODO: Create ForgotPasswordPage component */}
       <Route path="/forgot-password" element={<LoginPage />} />
+      {/* Agents Page */}
+      <Route path="/agents" element={<Agents />} />
+
 
       {/* Chat Page */}
     </Routes>

LocalMind-Frontend/src/app/routes/UserRoutes.tsx

@@ -0,0 +1 @@
+import Agents from "../features/Dashboard/V1/Component/Pages/Agents";

LocalMind-Frontend/src/features/Dashboard/V1/Component/AgentCard.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+export type AgentType = "" | "planner" | "executor";
+
+export type Agent = {
+  id: string;
+  name: string;
+  type: AgentType;
+  systemPrompt: string;
+  task: string;
+  priority: number;
+  active: boolean;
+  tools: string[];
+};
+
+
+type Props = {
+  agent: Agent;
+  onChange: (agent: Agent) => void;
+  onRemove: () => void;
+};
+
+const AgentCard: React.FC<Props> = ({ agent, onChange, onRemove }) => {
+  return (
+    <div style={{ border: "1px solid #333", padding: 12, marginBottom: 12 }}>
+      <input
+        placeholder="Agent name"
+        value={agent.name}
+        onChange={(e) => onChange({ ...agent, name: e.target.value })}
+      />
+
+      <br />
+
+      <select
+        value={agent.type}
+        onChange={(e) => onChange({ ...agent, type: e.target.value })}
+      >
+        <option value="">Select type</option>
+        <option value="planner">Planner</option>
+        <option value="executor">Executor</option>
+      </select>
+
+      <br />
+
+      <textarea
+        placeholder="System prompt"
+        value={agent.systemPrompt}
+        onChange={(e) =>
+          onChange({ ...agent, systemPrompt: e.target.value })
+        }
+      />
+
+      <br />
+
+      <input
+        type="number"
+        value={agent.priority}
+        onChange={(e) =>
+          onChange({ ...agent, priority: Number(e.target.value) })
+        }
+      />
+
+      <br />
+
+      <label>
+        <input
+          type="checkbox"
+          checked={agent.active}
+          onChange={(e) =>
+            onChange({ ...agent, active: e.target.checked })
+          }
+        />
+        Enabled
+      </label>
+
+      <br />
+
+      <button onClick={onRemove}>Remove</button>
+    </div>
+  );
+};
+
+export default AgentCard;

LocalMind-Frontend/src/features/Dashboard/V1/Component/Pages/Agents.tsx

@@ -0,0 +1,77 @@
+import { useMemo, useState } from "react";
+import AgentCard from "../AgentCard";
+
+type AgentType = "" | "planner" | "executor";
+
+import type { Agent } from "./types";
+
+const MAX_AGENTS = 7;
+
+function createAgent(): Agent {
+  return {
+    id: typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+
+    name: "",
+    type: "",
+    systemPrompt: "",
+    task: "",
+    priority: 1,
+    active: true,
+    tools: [],
+  };
+}
+
+export default function Agents() {
+  const [agents, setAgents] = useState<Agent[]>([]);
+
+  const canAddMore = agents.length < MAX_AGENTS;
+
+  const headerText = useMemo(() => {
+    return `Agents (${agents.length}/${MAX_AGENTS})`;
+  }, [agents.length]);
+
+  const addAgent = () => {
+    setAgents((prev) => {
+      if (prev.length >= MAX_AGENTS) return prev;
+      return [...prev, createAgent()];
+    });
+  };
+
+   const updateAgent = (id: string, updated: Agent) => {
+    setAgents((prev) =>
+      prev.map((a) => (a.id === id ? updated : a))
+    );
+  };
+    const removeAgent = (id: string) => {
+    setAgents((prev) => prev.filter((a) => a.id !== id));
+  };
+
+  return (
+    <div style={{ display: "grid", gap: 12 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        <h1 style={{ margin: 0 }}>{headerText}</h1>
+
+        <div style={{ marginLeft: "auto" }}>
+          <button onClick={addAgent} disabled={!canAddMore}>
+            Add Agent
+          </button>
+        </div>
+      </div>
+
+      {agents.length === 0 ? (
+        <p style={{ opacity: 0.75, margin: 0 }}>
+          No agents yet. Click “Add Agent” to create one.
+        </p>
+      ) : (
+        agents.map((agent, index) => (
+          <AgentCard
+            key={agent.id}
+            agent={agent}
+                        onChange={(updated: Agent) => updateAgent(agent.id, updated)}
+            onRemove={() => removeAgent(agent.id)}
+          />
+        ))
+      )}
+    </div>
+  );
+}

LocalMind-Frontend/src/features/Dashboard/V1/Component/types.ts

@@ -0,0 +1,12 @@
+export type AgentType = "" | "planner" | "executor";
+
+export type Agent = {
+  id: string;
+  name: string;
+  type: AgentType;
+  systemPrompt: string;
+  task: string;
+  priority: number;
+  active: boolean;
+  tools: string[];
+};