feat: subagent selection from existing agents + UI cleanup

README.md

@@ -210,6 +210,15 @@ tests/
 | `/rag`             | RagPage      | Browse MinIO folders and files with breadcrumb navigation                      |
 | `/settings`        | SettingsPage | Theme, chat, LLM provider, and reset preferences (persisted to `localStorage`) |
 
+## Agent Configuration
+
+The agent creation/edit form (in `CreateAgentDialog`) reflects the current backend schema. The following UI changes have been made:
+
+- **General section** — A new **Description** text input is available alongside the agent name. Tools are no longer managed here; they are configured exclusively via MCP servers (see the MCP servers section of the form).
+- **Debug toggle removed** — The Debug toggle has been removed from the form.
+- **Tools section removed** — Tools are managed via MCP servers only. The dedicated "Tools" section no longer appears in the form.
+- **Subagents section** — A new **"Add from existing agents"** dropdown lets you select an existing agent as a subagent reference (populating `agent_ref`). When a subagent references an existing agent, a **`ref:`** badge is displayed next to its name and the name field becomes read-only (the name is derived from the referenced agent).
+
 ## RAG File Browser
 
 The `/rag` page provides a MinIO-backed file browser with three tabs: Browse, Query, and Classical. The browse tab uses breadcrumb navigation driven by `useFolders` and `useFiles`, and supports the following file/folder management actions alongside read and upload:

src/application/App.tsx

@@ -8,6 +8,7 @@ const AgentsPage = lazy(() => import("@/application/pages/AgentsPage"));
 const RagPage = lazy(() => import("@/application/pages/RagPage"));
 const SkillsPage = lazy(() => import("@/application/pages/SkillsPage"));
 const MemoriesPage = lazy(() => import("@/application/pages/MemoriesPage"));
+const McpRegistryPage = lazy(() => import("@/application/pages/McpRegistryPage"));
 
 function PageFallback() {
   return (
@@ -28,6 +29,7 @@ function App() {
       <Route path="/rag" element={<RagPage />} />
       <Route path="/skills" element={<SkillsPage />} />
       <Route path="/memories" element={<MemoriesPage />} />
+      <Route path="/mcp-registry" element={<McpRegistryPage />} />
       <Route path="/settings" element={<SettingsPage />} />
     </Routes>
   );

src/application/components/agent/AgentCard.tsx

@@ -1,6 +1,5 @@
 import { Bot, Settings, Trash2 } from "lucide-react";
 import type { AgentConfigMetadata } from "@/domain/entities/agent/agentConfigMetadata";
-import StatusBadge from "@/application/components/shared/StatusBadge";
 import { Button } from "@/application/components/ui/button";
 
 interface AgentCardProps {
@@ -22,7 +21,6 @@ export default function AgentCard({ agent, onConfigure, onDelete }: Readonly<Age
         >
           <Bot className="h-6 w-6" />
         </div>
-        <StatusBadge status={agent.is_builtin ? "Active" : "Standby"} />
       </div>
 
       <h3 className="min-w-0 truncate font-display text-lg uppercase tracking-[0.06em] text-fg">

src/application/components/agent/AgentConfigForm.tsx

@@ -1,7 +1,6 @@
-import { useCallback, memo } from "react";
+import { useCallback, memo, useMemo } from "react";
 import { useForm, useFieldArray, useWatch, type Control } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Plus } from "lucide-react";
 import type { AgentConfig, SubAgentConfig } from "@/domain/entities/agent/agentConfig";
 import { BackendType } from "@/domain/entities/agent/agentConfig";
 import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
@@ -14,7 +13,6 @@ import {
 import { Button } from "@/application/components/ui/button";
 import { Input } from "@/application/components/ui/input";
 import { Label } from "@/application/components/ui/label";
-import { Switch } from "@/application/components/ui/switch";
 import { Textarea } from "@/application/components/ui/textarea";
 import {
   Accordion,
@@ -29,18 +27,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/application/components/ui/select";
-import StringListEditor from "./StringListEditor";
+import PillMultiSelect, {
+  type PillMultiSelectOption,
+} from "@/application/components/shared/PillMultiSelect";
 import { SkillPillMultiSelect, MemoryPillMultiSelect } from "./SkillMemorySelects";
-import McpServerEditor from "./McpServerEditor";
 import SubAgentEditor from "./SubAgentEditor";
 import HITLEditor from "./HITLEditor";
 import ResponseFormatEditor from "./ResponseFormatEditor";
+import { useMcpRegistry } from "@/application/hooks/mcpServer/useMcpRegistry";
+import { useAgents } from "@/application/hooks/agent/useAgents";
+import { mcpRegistryApi } from "@/infrastructure/api/mcpServer/mcpRegistryApi";
 import { AGENT_CONFIG_FORM_ID as FORM_ID } from "./formConstants";
 
 type SectionValue =
   | "general"
   | "system-prompt"
-  | "tools"
   | "backend"
   | "hitl"
   | "memory-skills"
@@ -53,7 +54,6 @@ const DEFAULT_OPEN_SECTIONS: SectionValue[] = ["general", "system-prompt"];
 const SECTION_META: Record<SectionValue, { label: string }> = {
   general: { label: "General" },
   "system-prompt": { label: "System Prompt" },
-  tools: { label: "Tools" },
   backend: { label: "Backend" },
   hitl: { label: "HITL" },
   "memory-skills": { label: "Memory & Skills" },
@@ -67,28 +67,6 @@ const BACKEND_STORAGE_OPTIONS: { label: string; value: "memory" | "postgres" }[]
   { value: "postgres", label: "postgres" },
 ];
 
-const EMPTY_MCP_SERVER: McpServerConfig = {
-  name: "",
-  transport: McpTransportType.STDIO,
-  command: undefined,
-  args: [],
-  url: undefined,
-  headers: {},
-  env: {},
-  auth_token: undefined,
-};
-
-const EMPTY_SUBAGENT: SubAgentConfig = {
-  name: "",
-  description: "",
-  instructions: undefined,
-  model: undefined,
-  tools: [],
-  skills: [],
-  mcp_servers: [],
-  response_format: undefined,
-};
-
 const DEFAULT_FORM_VALUES: AgentConfigFormData = {
   name: "",
   model: "",
@@ -150,6 +128,8 @@ export default function AgentConfigForm({
   const subagentsArray = useFieldArray({ control, name: "subagents" });
 
   const checkpointBackend = useWatch({ control, name: "backend.checkpoint_backend" });
+  const currentAgentName = useWatch({ control, name: "name" });
+  const { data: existingAgents } = useAgents();
 
   function handleFormSubmit(data: AgentConfigFormData) {
     const cleaned: AgentConfigFormData = {
@@ -161,8 +141,20 @@ export default function AgentConfigForm({
     onSubmit(cleaned);
   }
 
-  function addSubagent() {
-    subagentsArray.append({ ...EMPTY_SUBAGENT });
+  function addFromExistingAgent(agentName: string) {
+    const existing = (existingAgents ?? []).find((a) => a.name === agentName);
+    if (!existing) return;
+    subagentsArray.append({
+      name: agentName,
+      agent_ref: agentName,
+      description: existing.description ?? "",
+      instructions: undefined,
+      model: undefined,
+      tools: [],
+      skills: [],
+      mcp_servers: [],
+      response_format: undefined,
+    });
   }
 
   return (
@@ -185,6 +177,14 @@ export default function AgentConfigForm({
                 aria-invalid={!!errors.name}
               />
             </FormField>
+            <FormField id="description" label="Description">
+              <Input
+                id="description"
+                {...register("description")}
+                placeholder="Describe what this agent does…"
+                autoComplete="off"
+              />
+            </FormField>
             <FormField id="model" label="Model" error={errors.model?.message}>
               <Input
                 id="model"
@@ -195,16 +195,6 @@ export default function AgentConfigForm({
                 aria-invalid={!!errors.model}
               />
             </FormField>
-            <div className="flex items-center gap-3">
-              <Label htmlFor="debug" className="text-xs uppercase tracking-[0.1em]">
-                Debug
-              </Label>
-              <Switch
-                id="debug"
-                checked={useWatch({ control, name: "debug" })}
-                onCheckedChange={(v) => setValue("debug", v)}
-              />
-            </div>
           </AccordionContent>
         </AccordionItem>
 
@@ -232,18 +222,6 @@ export default function AgentConfigForm({
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem value="tools">
-          <SectionTrigger value="tools" />
-          <AccordionContent className="space-y-4">
-            <StringListEditor
-              label="Tools"
-              value={useWatch({ control, name: "tools" })}
-              onChange={(tools) => setValue("tools", tools)}
-              placeholder="Add tool…"
-            />
-          </AccordionContent>
-        </AccordionItem>
-
         <AccordionItem value="backend">
           <SectionTrigger value="backend" />
           <AccordionContent className="space-y-4">
@@ -309,6 +287,33 @@ export default function AgentConfigForm({
         <AccordionItem value="subagents">
           <SectionTrigger value="subagents" />
           <AccordionContent className="space-y-4">
+            {(existingAgents ?? []).length > 0 && (
+              <div className="space-y-2">
+                <Label className="text-xs uppercase tracking-[0.1em] text-muted">
+                  Add from existing agents
+                </Label>
+                <Select value="" onValueChange={(v) => addFromExistingAgent(v)}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select an existing agent…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(existingAgents ?? [])
+                      .filter(
+                        (agent) =>
+                          agent.name !== currentAgentName &&
+                          !subagentsArray.fields.some(
+                            (s) => (s as unknown as SubAgentConfig).agent_ref === agent.name,
+                          ),
+                      )
+                      .map((agent) => (
+                        <SelectItem key={agent.name} value={agent.name}>
+                          {agent.name}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
             {subagentsArray.fields.map((field, index) => (
               <SubAgentEditor
                 key={field.id}
@@ -318,7 +323,6 @@ export default function AgentConfigForm({
                 onRemove={() => subagentsArray.remove(index)}
               />
             ))}
-            <AddButton onClick={addSubagent} label="Add Subagent" />
           </AccordionContent>
         </AccordionItem>
 
@@ -382,25 +386,15 @@ function FormField({ id, label, error, children }: Readonly<FormFieldProps>) {
   );
 }
 
-interface AddButtonProps {
-  onClick: () => void;
-  label: string;
-}
-
-function AddButton({ onClick, label }: Readonly<AddButtonProps>) {
-  return (
-    <Button type="button" variant="outline" size="sm" onClick={onClick} className="w-full">
-      <Plus className="h-4 w-4" aria-hidden="true" />
-      {label}
-    </Button>
-  );
-}
-
-// Isolated MCP servers accordion item: owns its useFieldArray AND the
-// AccordionItem so the parent form's re-renders (triggered by useWatch on
-// unrelated fields) do NOT remount the McpServerEditor instances and steal
-// input focus. The whole AccordionItem is memoized so it only re-renders when
-// the MCP servers array itself changes.
+// Isolated MCP servers accordion item. MCP servers are now managed in their
+// own screen (MCP Registry page), so this section only lets users pick
+// registered servers via toggle pills — exactly like the Skills/Memories
+// sections. Selecting a pill reveals the server's config and embeds a full
+// McpServerConfig (the agent schema still requires the complete object) into
+// the form; deselecting removes the entry by name.
+//
+// The AccordionItem is memoized so parent form re-renders (from useWatch on
+// unrelated fields) do not recompute the registry options.
 const McpServersAccordionItem = memo(function McpServersAccordionItem({
   control,
   defaultValue,
@@ -409,32 +403,76 @@ const McpServersAccordionItem = memo(function McpServersAccordionItem({
   defaultValue: SectionValue[];
 }>) {
   const mcpServersArray = useFieldArray({ control, name: "mcp_servers" });
+  const { data: registryServers } = useMcpRegistry();
   const isOpen = defaultValue.includes("mcp-servers");
-  const addMcpServer = useCallback(
-    () => mcpServersArray.append({ ...EMPTY_MCP_SERVER }),
-    [mcpServersArray],
-  );
-  const updateMcpServer = useCallback(
-    (index: number, v: McpServerConfig) => mcpServersArray.update(index, v),
-    [mcpServersArray],
+
+  const fields = mcpServersArray.fields as unknown as McpServerConfig[];
+  const registryNames = useMemo(
+    () => new Set((registryServers ?? []).map((s) => s.name)),
+    [registryServers],
   );
-  const removeMcpServer = useCallback(
-    (index: number) => mcpServersArray.remove(index),
-    [mcpServersArray],
+  // Names currently embedded in the form: registry-selected + any legacy
+  // custom entry (name not in the registry). Legacy entries are surfaced as
+  // extra active pills so they can be removed — no invisible form data.
+  const selectedNames = fields.map((f) => f.name).filter((n) => n.length > 0);
+
+  const options = useMemo<PillMultiSelectOption[]>(() => {
+    const fromRegistry: PillMultiSelectOption[] = (registryServers ?? []).map((s) => ({
+      value: s.name,
+      label: s.name,
+      description: s.openapi_url ?? s.url ?? undefined,
+    }));
+    const legacy: PillMultiSelectOption[] = fields
+      .map((f) => f.name)
+      .filter((n) => n.length > 0 && !registryNames.has(n))
+      .map((n) => ({ value: n, label: `${n} (custom)` }));
+    return [...fromRegistry, ...legacy];
+  }, [registryServers, fields, registryNames]);
+
+  const handleRegistryChange = useCallback(
+    (next: string[]) => {
+      const prev = selectedNames;
+      // Newly selected names that exist in the registry → reveal + embed.
+      next
+        .filter((name) => !prev.includes(name) && registryNames.has(name))
+        .forEach((name) => {
+          void mcpRegistryApi.reveal(name).then((revealed) => {
+            mcpServersArray.append({
+              name: revealed.name,
+              transport: McpTransportType.HTTP,
+              command: undefined,
+              args: [],
+              url: revealed.url,
+              headers: revealed.headers,
+              env: revealed.env,
+              auth_token: revealed.auth_token ?? undefined,
+            });
+          });
+        });
+      // Deselected names → remove the embedded entry (registry or legacy).
+      prev
+        .filter((name) => !next.includes(name))
+        .forEach((name) => {
+          const idx = fields.findIndex((f) => f.name === name);
+          if (idx >= 0) mcpServersArray.remove(idx);
+        });
+    },
+    [selectedNames, registryNames, fields, mcpServersArray],
   );
+
   return (
     <AccordionItem value="mcp-servers">
       <SectionTrigger value="mcp-servers" />
       <AccordionContent className="space-y-4" data-state={isOpen ? "open" : "closed"}>
-        {mcpServersArray.fields.map((field, index) => (
-          <McpServerEditor
-            key={field.id}
-            value={field as unknown as McpServerConfig}
-            onChange={(v) => updateMcpServer(index, v)}
-            onRemove={() => removeMcpServer(index)}
+        <div className="space-y-2">
+          <Label className="text-xs uppercase tracking-[0.1em] text-muted">From registry</Label>
+          <PillMultiSelect
+            options={options}
+            selected={selectedNames}
+            onChange={handleRegistryChange}
+            emptyMessage="No registered servers. Add servers in the MCP Registry page first."
           />
-        ))}
-        <AddButton onClick={addMcpServer} label="Add MCP Server" />
+        </div>
       </AccordionContent>
     </AccordionItem>
   );