feat(ui): add agent creation choice modal and full-page config

Replace the direct agent config dialog with a choice modal offering two
paths: "Ask the CEO to create a new agent" (opens pre-filled issue) or
"I want advanced configuration myself" (navigates to /agents/new).

- Extend NewIssueDefaults with title/description for pre-fill support
- Add /agents/new route with full-page agent configuration form
- NewAgentDialog now shows CEO recommendation modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/App.tsx

@@ -24,6 +24,7 @@ import { Inbox } from "./pages/Inbox";
 import { CompanySettings } from "./pages/CompanySettings";
 import { DesignGuide } from "./pages/DesignGuide";
 import { OrgChart } from "./pages/OrgChart";
+import { NewAgent } from "./pages/NewAgent";
 import { AuthPage } from "./pages/Auth";
 import { BoardClaimPage } from "./pages/BoardClaim";
 import { InviteLandingPage } from "./pages/InviteLanding";
@@ -101,6 +102,7 @@ function boardRoutes() {
       <Route path="agents/active" element={<Agents />} />
       <Route path="agents/paused" element={<Agents />} />
       <Route path="agents/error" element={<Agents />} />
+      <Route path="agents/new" element={<NewAgent />} />
       <Route path="agents/:agentId" element={<AgentDetail />} />
       <Route path="agents/:agentId/:tab" element={<AgentDetail />} />
       <Route path="agents/:agentId/runs/:runId" element={<AgentDetail />} />
@@ -214,6 +216,7 @@ export function App() {
           <Route path="issues" element={<UnprefixedBoardRedirect />} />
           <Route path="issues/:issueId" element={<UnprefixedBoardRedirect />} />
           <Route path="agents" element={<UnprefixedBoardRedirect />} />
+          <Route path="agents/new" element={<UnprefixedBoardRedirect />} />
           <Route path="agents/:agentId" element={<UnprefixedBoardRedirect />} />
           <Route path="agents/:agentId/:tab" element={<UnprefixedBoardRedirect />} />
           <Route path="agents/:agentId/runs/:runId" element={<UnprefixedBoardRedirect />} />

ui/src/components/NewAgentDialog.tsx

@@ -1,53 +1,20 @@
-import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@/lib/router";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
 import { agentsApi } from "../api/agents";
 import { queryKeys } from "../lib/queryKeys";
-import { AGENT_ROLES } from "@paperclipai/shared";
 import {
   Dialog,
   DialogContent,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import {
+import { Bot, Sparkles } from "lucide-react";
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Minimize2,
-  Maximize2,
-  Shield,
-  User,
-} from "lucide-react";
-import { cn, agentUrl } from "../lib/utils";
-import { roleLabels } from "./agent-config-primitives";
-import { AgentConfigForm, type CreateConfigValues } from "./AgentConfigForm";
-import { defaultCreateValues } from "./agent-config-defaults";
-import { getUIAdapter } from "../adapters";
-import { AgentIcon } from "./AgentIconPicker";
 
 export function NewAgentDialog() {
-  const { newAgentOpen, closeNewAgent } = useDialog();
+  const { newAgentOpen, closeNewAgent, openNewIssue } = useDialog();
-  const { selectedCompanyId, selectedCompany } = useCompany();
+  const { selectedCompanyId } = useCompany();
-  const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const [expanded, setExpanded] = useState(true);
-
-  // Identity
-  const [name, setName] = useState("");
-  const [title, setTitle] = useState("");
-  const [role, setRole] = useState("general");
-  const [reportsTo, setReportsTo] = useState("");
-
-  // Config values (managed by AgentConfigForm)
-  const [configValues, setConfigValues] = useState<CreateConfigValues>(defaultCreateValues);
-
-  // Popover states
-  const [roleOpen, setRoleOpen] = useState(false);
-  const [reportsToOpen, setReportsToOpen] = useState(false);
 
   const { data: agents } = useQuery({
     queryKey: queryKeys.agents.list(selectedCompanyId!),
@@ -55,287 +22,74 @@ export function NewAgentDialog() {
     enabled: !!selectedCompanyId && newAgentOpen,
   });
 
-  const {
+  const ceoAgent = (agents ?? []).find((a) => a.role === "ceo");
-    data: adapterModels,
-    error: adapterModelsError,
-    isLoading: adapterModelsLoading,
-    isFetching: adapterModelsFetching,
-  } = useQuery({
-    queryKey:
-      selectedCompanyId
-        ? queryKeys.agents.adapterModels(selectedCompanyId, configValues.adapterType)
-        : ["agents", "none", "adapter-models", configValues.adapterType],
-    queryFn: () => agentsApi.adapterModels(selectedCompanyId!, configValues.adapterType),
-    enabled: Boolean(selectedCompanyId) && newAgentOpen,
-  });
 
-  const isFirstAgent = !agents || agents.length === 0;
+  function handleAskCeo() {
-  const effectiveRole = isFirstAgent ? "ceo" : role;
+    closeNewAgent();
-  const [formError, setFormError] = useState<string | null>(null);
+    openNewIssue({
-
+      assigneeAgentId: ceoAgent?.id,
-  // Auto-fill for CEO
+      title: "Create a new agent",
-  useEffect(() => {
+      description: "(type in what kind of agent you want here)",
-    if (newAgentOpen && isFirstAgent) {
-      if (!name) setName("CEO");
-      if (!title) setTitle("CEO");
-    }
-  }, [newAgentOpen, isFirstAgent]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const createAgent = useMutation({
-    mutationFn: (data: Record<string, unknown>) =>
-      agentsApi.hire(selectedCompanyId!, data),
-    onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
-      reset();
-      closeNewAgent();
-      navigate(agentUrl(result.agent));
-    },
-    onError: (error) => {
-      setFormError(error instanceof Error ? error.message : "Failed to create agent");
-    },
-  });
-
-  function reset() {
-    setName("");
-    setTitle("");
-    setRole("general");
-    setReportsTo("");
-    setConfigValues(defaultCreateValues);
-    setExpanded(true);
-    setFormError(null);
-  }
-
-  function buildAdapterConfig() {
-    const adapter = getUIAdapter(configValues.adapterType);
-    return adapter.buildAdapterConfig(configValues);
-  }
-
-  function handleSubmit() {
-    if (!selectedCompanyId || !name.trim()) return;
-    setFormError(null);
-    if (configValues.adapterType === "opencode_local") {
-      const selectedModel = configValues.model.trim();
-      if (!selectedModel) {
-        setFormError("OpenCode requires an explicit model in provider/model format.");
-        return;
-      }
-      if (adapterModelsError) {
-        setFormError(
-          adapterModelsError instanceof Error
-            ? adapterModelsError.message
-            : "Failed to load OpenCode models.",
-        );
-        return;
-      }
-      if (adapterModelsLoading || adapterModelsFetching) {
-        setFormError("OpenCode models are still loading. Please wait and try again.");
-        return;
-      }
-      const discovered = adapterModels ?? [];
-      if (!discovered.some((entry) => entry.id === selectedModel)) {
-        setFormError(
-          discovered.length === 0
-            ? "No OpenCode models discovered. Run `opencode models` and authenticate providers."
-            : `Configured OpenCode model is unavailable: ${selectedModel}`,
-        );
-        return;
-      }
-    }
-    createAgent.mutate({
-      name: name.trim(),
-      role: effectiveRole,
-      ...(title.trim() ? { title: title.trim() } : {}),
-      ...(reportsTo ? { reportsTo } : {}),
-      adapterType: configValues.adapterType,
-      adapterConfig: buildAdapterConfig(),
-      runtimeConfig: {
-        heartbeat: {
-          enabled: configValues.heartbeatEnabled,
-          intervalSec: configValues.intervalSec,
-          wakeOnDemand: true,
-          cooldownSec: 10,
-          maxConcurrentRuns: 1,
-        },
-      },
-      budgetMonthlyCents: 0,
     });
   }
 
-  function handleKeyDown(e: React.KeyboardEvent) {
+  function handleAdvancedConfig() {
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+    closeNewAgent();
-      e.preventDefault();
+    navigate("/agents/new");
-      handleSubmit();
-    }
   }
 
-  const currentReportsTo = (agents ?? []).find((a) => a.id === reportsTo);
-
   return (
     <Dialog
       open={newAgentOpen}
       onOpenChange={(open) => {
-        if (!open) { reset(); closeNewAgent(); }
+        if (!open) closeNewAgent();
       }}
     >
       <DialogContent
         showCloseButton={false}
-        className={cn("p-0 gap-0 overflow-hidden", expanded ? "sm:max-w-2xl" : "sm:max-w-lg")}
+        className="sm:max-w-md p-0 gap-0 overflow-hidden"
-        onKeyDown={handleKeyDown}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span className="text-sm text-muted-foreground">Add a new agent</span>
-            {selectedCompany && (
-              <span className="bg-muted px-1.5 py-0.5 rounded text-xs font-medium">
-                {selectedCompany.name.slice(0, 3).toUpperCase()}
-              </span>
-            )}
-            <span className="text-muted-foreground/60">&rsaquo;</span>
-            <span>New agent</span>
-          </div>
-          <div className="flex items-center gap-1">
-            <Button variant="ghost" size="icon-xs" className="text-muted-foreground" onClick={() => setExpanded(!expanded)}>
-              {expanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
-            </Button>
-            <Button variant="ghost" size="icon-xs" className="text-muted-foreground" onClick={() => { reset(); closeNewAgent(); }}>
-              <span className="text-lg leading-none">&times;</span>
-            </Button>
-          </div>
-        </div>
-
-        <div className="overflow-y-auto max-h-[70vh]">
-          {/* Name */}
-          <div className="px-4 pt-4 pb-2 shrink-0">
-            <input
-              className="w-full text-lg font-semibold bg-transparent outline-none placeholder:text-muted-foreground/50"
-              placeholder="Agent name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              autoFocus
-            />
-          </div>
-
-          {/* Title */}
-          <div className="px-4 pb-2">
-            <input
-              className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
-              placeholder="Title (e.g. VP of Engineering)"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-            />
-          </div>
-
-          {/* Property chips: Role + Reports To */}
-          <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
-            {/* Role */}
-            <Popover open={roleOpen} onOpenChange={setRoleOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  className={cn(
-                    "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
-                    isFirstAgent && "opacity-60 cursor-not-allowed"
-                  )}
-                  disabled={isFirstAgent}
-                >
-                  <Shield className="h-3 w-3 text-muted-foreground" />
-                  {roleLabels[effectiveRole] ?? effectiveRole}
-                </button>
-              </PopoverTrigger>
-              <PopoverContent className="w-36 p-1" align="start">
-                {AGENT_ROLES.map((r) => (
-                  <button
-                    key={r}
-                    className={cn(
-                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                      r === role && "bg-accent"
-                    )}
-                    onClick={() => { setRole(r); setRoleOpen(false); }}
-                  >
-                    {roleLabels[r] ?? r}
-                  </button>
-                ))}
-              </PopoverContent>
-            </Popover>
-
-            {/* Reports To */}
-            <Popover open={reportsToOpen} onOpenChange={setReportsToOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  className={cn(
-                    "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
-                    isFirstAgent && "opacity-60 cursor-not-allowed"
-                  )}
-                  disabled={isFirstAgent}
-                >
-                  {currentReportsTo ? (
-                    <>
-                      <AgentIcon icon={currentReportsTo.icon} className="h-3 w-3 text-muted-foreground" />
-                      {`Reports to ${currentReportsTo.name}`}
-                    </>
-                  ) : (
-                    <>
-                      <User className="h-3 w-3 text-muted-foreground" />
-                      {isFirstAgent ? "Reports to: N/A (CEO)" : "Reports to..."}
-                    </>
-                  )}
-                </button>
-              </PopoverTrigger>
-              <PopoverContent className="w-48 p-1" align="start">
-                <button
-                  className={cn(
-                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                    !reportsTo && "bg-accent"
-                  )}
-                  onClick={() => { setReportsTo(""); setReportsToOpen(false); }}
-                >
-                  No manager
-                </button>
-                {(agents ?? []).map((a) => (
-                  <button
-                    key={a.id}
-                    className={cn(
-                      "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
-                      a.id === reportsTo && "bg-accent"
-                    )}
-                    onClick={() => { setReportsTo(a.id); setReportsToOpen(false); }}
-                  >
-                    <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
-                    {a.name}
-                    <span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
-                  </button>
-                ))}
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          {/* Shared config form (adapter + heartbeat) */}
-          <AgentConfigForm
-            mode="create"
-            values={configValues}
-            onChange={(patch) => setConfigValues((prev) => ({ ...prev, ...patch }))}
-            adapterModels={adapterModels}
-          />
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
-          <span className="text-xs text-muted-foreground">
-            {isFirstAgent ? "This will be the CEO" : ""}
-          </span>
-        </div>
-        {formError && (
-          <div className="px-4 pb-2 text-xs text-destructive">{formError}</div>
-        )}
-        <div className="flex items-center justify-end px-4 pb-3">
           <Button
-            size="sm"
+            variant="ghost"
-            disabled={!name.trim() || createAgent.isPending}
+            size="icon-xs"
-            onClick={handleSubmit}
+            className="text-muted-foreground"
+            onClick={closeNewAgent}
           >
-            {createAgent.isPending ? "Creating…" : "Create agent"}
+            <span className="text-lg leading-none">&times;</span>
           </Button>
         </div>
+
+        <div className="p-6 space-y-6">
+          {/* Recommendation */}
+          <div className="text-center space-y-3">
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent">
+              <Sparkles className="h-6 w-6 text-foreground" />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              We recommend letting your CEO handle agent setup — they know the
+              org structure and can configure reporting, permissions, and
+              adapters.
+            </p>
+          </div>
+
+          <Button className="w-full" size="lg" onClick={handleAskCeo}>
+            <Bot className="h-4 w-4 mr-2" />
+            Ask the CEO to create a new agent
+          </Button>
+
+          {/* Advanced link */}
+          <div className="text-center">
+            <button
+              className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors"
+              onClick={handleAdvancedConfig}
+            >
+              I want advanced configuration myself
+            </button>
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   );

ui/src/components/NewIssueDialog.tsx

@@ -332,7 +332,18 @@ export function NewIssueDialog() {
     setDialogCompanyId(selectedCompanyId);
 
     const draft = loadDraft();
-    if (draft && draft.title.trim()) {
+    if (newIssueDefaults.title) {
+      setTitle(newIssueDefaults.title);
+      setDescription(newIssueDefaults.description ?? "");
+      setStatus(newIssueDefaults.status ?? "todo");
+      setPriority(newIssueDefaults.priority ?? "");
+      setProjectId(newIssueDefaults.projectId ?? "");
+      setAssigneeId(newIssueDefaults.assigneeAgentId ?? "");
+      setAssigneeModelOverride("");
+      setAssigneeThinkingEffort("");
+      setAssigneeChrome(false);
+      setAssigneeUseProjectWorkspace(true);
+    } else if (draft && draft.title.trim()) {
       setTitle(draft.title);
       setDescription(draft.description);
       setStatus(draft.status || "todo");

ui/src/context/DialogContext.tsx

@@ -5,6 +5,8 @@ interface NewIssueDefaults {
   priority?: string;
   projectId?: string;
   assigneeAgentId?: string;
+  title?: string;
+  description?: string;
 }
 
 interface NewGoalDefaults {

ui/src/pages/NewAgent.tsx

@@ -0,0 +1,289 @@
+import { useState, useEffect } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@/lib/router";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { agentsApi } from "../api/agents";
+import { queryKeys } from "../lib/queryKeys";
+import { AGENT_ROLES } from "@paperclipai/shared";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Shield, User } from "lucide-react";
+import { cn, agentUrl } from "../lib/utils";
+import { roleLabels } from "../components/agent-config-primitives";
+import { AgentConfigForm, type CreateConfigValues } from "../components/AgentConfigForm";
+import { defaultCreateValues } from "../components/agent-config-defaults";
+import { getUIAdapter } from "../adapters";
+import { AgentIcon } from "../components/AgentIconPicker";
+
+export function NewAgent() {
+  const { selectedCompanyId, selectedCompany } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState("");
+  const [title, setTitle] = useState("");
+  const [role, setRole] = useState("general");
+  const [reportsTo, setReportsTo] = useState("");
+  const [configValues, setConfigValues] = useState<CreateConfigValues>(defaultCreateValues);
+  const [roleOpen, setRoleOpen] = useState(false);
+  const [reportsToOpen, setReportsToOpen] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const {
+    data: adapterModels,
+    error: adapterModelsError,
+    isLoading: adapterModelsLoading,
+    isFetching: adapterModelsFetching,
+  } = useQuery({
+    queryKey: selectedCompanyId
+      ? queryKeys.agents.adapterModels(selectedCompanyId, configValues.adapterType)
+      : ["agents", "none", "adapter-models", configValues.adapterType],
+    queryFn: () => agentsApi.adapterModels(selectedCompanyId!, configValues.adapterType),
+    enabled: Boolean(selectedCompanyId),
+  });
+
+  const isFirstAgent = !agents || agents.length === 0;
+  const effectiveRole = isFirstAgent ? "ceo" : role;
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Agents", href: "/agents" },
+      { label: "New Agent" },
+    ]);
+  }, [setBreadcrumbs]);
+
+  useEffect(() => {
+    if (isFirstAgent) {
+      if (!name) setName("CEO");
+      if (!title) setTitle("CEO");
+    }
+  }, [isFirstAgent]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const createAgent = useMutation({
+    mutationFn: (data: Record<string, unknown>) =>
+      agentsApi.hire(selectedCompanyId!, data),
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
+      navigate(agentUrl(result.agent));
+    },
+    onError: (error) => {
+      setFormError(error instanceof Error ? error.message : "Failed to create agent");
+    },
+  });
+
+  function buildAdapterConfig() {
+    const adapter = getUIAdapter(configValues.adapterType);
+    return adapter.buildAdapterConfig(configValues);
+  }
+
+  function handleSubmit() {
+    if (!selectedCompanyId || !name.trim()) return;
+    setFormError(null);
+    if (configValues.adapterType === "opencode_local") {
+      const selectedModel = configValues.model.trim();
+      if (!selectedModel) {
+        setFormError("OpenCode requires an explicit model in provider/model format.");
+        return;
+      }
+      if (adapterModelsError) {
+        setFormError(
+          adapterModelsError instanceof Error
+            ? adapterModelsError.message
+            : "Failed to load OpenCode models.",
+        );
+        return;
+      }
+      if (adapterModelsLoading || adapterModelsFetching) {
+        setFormError("OpenCode models are still loading. Please wait and try again.");
+        return;
+      }
+      const discovered = adapterModels ?? [];
+      if (!discovered.some((entry) => entry.id === selectedModel)) {
+        setFormError(
+          discovered.length === 0
+            ? "No OpenCode models discovered. Run `opencode models` and authenticate providers."
+            : `Configured OpenCode model is unavailable: ${selectedModel}`,
+        );
+        return;
+      }
+    }
+    createAgent.mutate({
+      name: name.trim(),
+      role: effectiveRole,
+      ...(title.trim() ? { title: title.trim() } : {}),
+      ...(reportsTo ? { reportsTo } : {}),
+      adapterType: configValues.adapterType,
+      adapterConfig: buildAdapterConfig(),
+      runtimeConfig: {
+        heartbeat: {
+          enabled: configValues.heartbeatEnabled,
+          intervalSec: configValues.intervalSec,
+          wakeOnDemand: true,
+          cooldownSec: 10,
+          maxConcurrentRuns: 1,
+        },
+      },
+      budgetMonthlyCents: 0,
+    });
+  }
+
+  const currentReportsTo = (agents ?? []).find((a) => a.id === reportsTo);
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div>
+        <h1 className="text-lg font-semibold">New Agent</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Advanced agent configuration
+        </p>
+      </div>
+
+      <div className="border border-border">
+        {/* Name */}
+        <div className="px-4 pt-4 pb-2">
+          <input
+            className="w-full text-lg font-semibold bg-transparent outline-none placeholder:text-muted-foreground/50"
+            placeholder="Agent name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoFocus
+          />
+        </div>
+
+        {/* Title */}
+        <div className="px-4 pb-2">
+          <input
+            className="w-full bg-transparent outline-none text-sm text-muted-foreground placeholder:text-muted-foreground/40"
+            placeholder="Title (e.g. VP of Engineering)"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+
+        {/* Property chips: Role + Reports To */}
+        <div className="flex items-center gap-1.5 px-4 py-2 border-t border-border flex-wrap">
+          <Popover open={roleOpen} onOpenChange={setRoleOpen}>
+            <PopoverTrigger asChild>
+              <button
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
+                  isFirstAgent && "opacity-60 cursor-not-allowed"
+                )}
+                disabled={isFirstAgent}
+              >
+                <Shield className="h-3 w-3 text-muted-foreground" />
+                {roleLabels[effectiveRole] ?? effectiveRole}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-36 p-1" align="start">
+              {AGENT_ROLES.map((r) => (
+                <button
+                  key={r}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                    r === role && "bg-accent"
+                  )}
+                  onClick={() => { setRole(r); setRoleOpen(false); }}
+                >
+                  {roleLabels[r] ?? r}
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+
+          <Popover open={reportsToOpen} onOpenChange={setReportsToOpen}>
+            <PopoverTrigger asChild>
+              <button
+                className={cn(
+                  "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
+                  isFirstAgent && "opacity-60 cursor-not-allowed"
+                )}
+                disabled={isFirstAgent}
+              >
+                {currentReportsTo ? (
+                  <>
+                    <AgentIcon icon={currentReportsTo.icon} className="h-3 w-3 text-muted-foreground" />
+                    {`Reports to ${currentReportsTo.name}`}
+                  </>
+                ) : (
+                  <>
+                    <User className="h-3 w-3 text-muted-foreground" />
+                    {isFirstAgent ? "Reports to: N/A (CEO)" : "Reports to..."}
+                  </>
+                )}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-48 p-1" align="start">
+              <button
+                className={cn(
+                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                  !reportsTo && "bg-accent"
+                )}
+                onClick={() => { setReportsTo(""); setReportsToOpen(false); }}
+              >
+                No manager
+              </button>
+              {(agents ?? []).map((a) => (
+                <button
+                  key={a.id}
+                  className={cn(
+                    "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
+                    a.id === reportsTo && "bg-accent"
+                  )}
+                  onClick={() => { setReportsTo(a.id); setReportsToOpen(false); }}
+                >
+                  <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
+                  {a.name}
+                  <span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
+                </button>
+              ))}
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* Shared config form */}
+        <AgentConfigForm
+          mode="create"
+          values={configValues}
+          onChange={(patch) => setConfigValues((prev) => ({ ...prev, ...patch }))}
+          adapterModels={adapterModels}
+        />
+
+        {/* Footer */}
+        <div className="border-t border-border px-4 py-3">
+          {isFirstAgent && (
+            <p className="text-xs text-muted-foreground mb-2">This will be the CEO</p>
+          )}
+          {formError && (
+            <p className="text-xs text-destructive mb-2">{formError}</p>
+          )}
+          <div className="flex items-center justify-end gap-2">
+            <Button variant="outline" size="sm" onClick={() => navigate("/agents")}>
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              disabled={!name.trim() || createAgent.isPending}
+              onClick={handleSubmit}
+            >
+              {createAgent.isPending ? "Creating…" : "Create agent"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}