@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/screens/project/AgentsTab.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { Activity, Bot, Crown, Eye, GitBranch, Heart, List, MessagesSquare, Plus, Send, Sparkles, Upload, Wrench, Zap } from "lucide-react";
@@ -9,14 +9,20 @@ import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch, Textarea }
 import { Tip } from "../../components/ui/tip";
 import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
-import { EmojiInput, AutonomyPicker, AreaRoleFields } from "../../components/agents/AgentFormFields";
+import { AutonomyPicker, AreaRoleFields, AgentIconPicker } from "../../components/agents/AgentFormFields";
+import { AgentModelSelect } from "../../components/agents/AgentModelSelect";
+import { AgentModelBadge } from "../../components/agents/AgentModelBadge";
+import { INHERIT_MODEL, isInheritedModel } from "../../components/agents/modelCatalog";
+import { BlobAvatar } from "../../components/agents/BlobAvatar";
+import { isBlobKey } from "../../components/agents/blobPresets";
 import { cn } from "../../lib/cn";
+import { slugify } from "../../lib/slug";
 import { t } from "../../i18n";
+import { toneText, toneTextHover } from "../../lib/tone";
 import type { AgentAutonomy } from "../../types/daemon";
 import { typeOptions } from "./AgentDetailScreen";
 
 const LANGS = ["", "es", "en", "pt", "fr", "it", "de"];
-const csv = (s: string) => s.split(",").map((x) => x.trim()).filter(Boolean);
 
 function agentVisual(a: AgentEntry) {
   return a.is_master
@@ -48,12 +54,20 @@ function AgentStatRow({ stats, className }: { stats?: AgentStats; className?: st
   );
 }
 
+// Canonical area key. Agents historically stored the display name (`Growth`)
+// while the org chart uses the slug (`growth`); grouping by the raw string
+// split one area into two pills that looked identical (CSS uppercase).
+function areaKey(area: string | null | undefined): string | null {
+  if (!area) return null;
+  return slugify(area) || area;
+}
+
 // Group agents by their area (category). Named areas sort alphabetically;
 // uncategorized agents fall to the end.
 function groupByArea(agents: AgentEntry[]): { area: string | null; agents: AgentEntry[] }[] {
   const map = new Map<string | null, AgentEntry[]>();
   for (const a of agents) {
-    const k = a.area || null;
+    const k = areaKey(a.area);
     if (!map.has(k)) map.set(k, []);
     map.get(k)!.push(a);
   }
@@ -62,6 +76,29 @@ function groupByArea(agents: AgentEntry[]): { area: string | null; agents: Agent
     .map(([area, agents]) => ({ area, agents }));
 }
 
+// How many columns a group of N sibling agents packs into: 1, 1×2, 2×2, 2×3,
+// 3×3… — keeps a group squarish instead of one tall column or one wide row.
+function siblingGridCols(n: number): number {
+  if (n <= 2) return n;
+  if (n <= 4) return 2;
+  if (n <= 9) return 3;
+  return 4;
+}
+
+// Sibling agents inside one area. Columns are `max-content` (never fr), so a
+// group is only as wide as its cards and can't squash them when it sits beside
+// other areas.
+function AgentGrid({ count, children }: { count: number; children: ReactNode }) {
+  return (
+    <div
+      className="grid items-start justify-items-center gap-x-5 gap-y-8"
+      style={{ gridTemplateColumns: `repeat(${siblingGridCols(count)}, max-content)` }}
+    >
+      {children}
+    </div>
+  );
+}
+
 // Build parent→children map with panda's single-orchestrator fallback: if there
 // is exactly one master and an agent has no explicit parent, treat it as a child.
 function buildTree(agents: AgentEntry[]) {
@@ -88,7 +125,6 @@ function buildTree(agents: AgentEntry[]) {
 
 export function AgentsTab({ pid }: { pid: string }) {
   const navigate = useNavigate();
-  const toast = useToast();
   const list = useSWR(`/api/projects/${pid}/agents?stats=1`, () => Agents.list(pid, { stats: true }));
   const [view, setView] = useState<"hierarchy" | "list">("hierarchy");
   const [creating, setCreating] = useState(false);
@@ -123,12 +159,12 @@ export function AgentsTab({ pid }: { pid: string }) {
     >
       {list.isLoading && <Loading />}
       {!list.isLoading && agents.length === 0 && (
-        <Empty>{t("project.agents.empty_text")}</Empty>
+        <Empty icon={Bot}>{t("project.agents.empty_text")}</Empty>
       )}
 
       {!list.isLoading && agents.length > 0 && (
         view === "hierarchy"
-          ? <HierarchyView roots={roots} childrenByParent={childrenByParent} onOpen={open} onChat={chat} />
+          ? <HierarchyView pid={pid} roots={roots} childrenByParent={childrenByParent} onOpen={open} onChat={chat} onAgentSaved={() => list.mutate()} />
           : <ListView agents={agents} onOpen={open} onChat={chat} />
       )}
 
@@ -175,7 +211,7 @@ function ImportVaultDialog({
       footer={<Button variant="ghost" onClick={onClose}>{t("common.close")}</Button>}
     >
       {vault.isLoading && <Loading />}
-      {!vault.isLoading && items.length === 0 && <Empty>{t("project.agents.import_empty")}</Empty>}
+      {!vault.isLoading && items.length === 0 && <Empty icon={Upload}>{t("project.agents.import_empty")}</Empty>}
       <ul className="space-y-2">
         {items.map((a) => {
           const already = existing.includes(a.slug);
@@ -201,71 +237,226 @@ function ImportVaultDialog({
   );
 }
 
+// Real connector lines for the hierarchy: cards stay in normal (fixed) flow
+// layout, and an SVG overlay behind them draws animated bezier edges from each
+// parent's bottom edge to each child's top edge. Positions are measured from
+// the DOM (ResizeObserver), so the lines always land on the cards regardless
+// of wrapping or category grouping — no graph library, matching the hand-built
+// d3+SVG approach of AgentBrainGraph.
+const EDGE_COLOR = "#34d399"; // emerald — APX brand accent
+const EDGE_ROOT_COLOR = "#a78bfa"; // violet — edges leaving an orchestrator
+
+interface EdgePath { key: string; d: string; color: string; dur: string; begin: string }
+
+function HierarchyEdges({ paths }: { paths: EdgePath[] }) {
+  return (
+    <svg className="pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible" aria-hidden>
+      <defs>
+        <filter id="agent-edge-glow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="3" />
+        </filter>
+      </defs>
+      {paths.map((p) => (
+        <g key={p.key}>
+          {/* soft glow under the line */}
+          <path d={p.d} fill="none" stroke={p.color} strokeWidth={4} opacity={0.18} filter="url(#agent-edge-glow)" />
+          {/* animated dotted line (marching ants) */}
+          <path d={p.d} fill="none" stroke={p.color} strokeWidth={1.5} strokeLinecap="round" strokeDasharray="1.5 7" opacity={0.75}>
+            <animate attributeName="stroke-dashoffset" from="17" to="0" dur="1.4s" repeatCount="indefinite" />
+          </path>
+          {/* energy pulse travelling parent → child */}
+          <circle r={4.5} fill={p.color} opacity={0.25} filter="url(#agent-edge-glow)">
+            <animateMotion dur={p.dur} begin={p.begin} repeatCount="indefinite" path={p.d} />
+          </circle>
+          <circle r={2} fill={p.color} opacity={0.9}>
+            <animateMotion dur={p.dur} begin={p.begin} repeatCount="indefinite" path={p.d} />
+          </circle>
+        </g>
+      ))}
+    </svg>
+  );
+}
+
 function HierarchyView({
-  roots, childrenByParent, onOpen, onChat,
+  pid, roots, childrenByParent, onOpen, onChat, onAgentSaved,
 }: {
+  pid: string;
   roots: AgentEntry[];
   childrenByParent: Map<string, AgentEntry[]>;
   onOpen: (slug: string) => void;
   onChat: (slug: string) => void;
+  onAgentSaved: () => void;
 }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const nodeRefs = useRef(new Map<string, HTMLDivElement>());
+  const [paths, setPaths] = useState<EdgePath[]>([]);
+
+  const edges = useMemo(() => {
+    const out: { from: string; to: string; fromMaster: boolean }[] = [];
+    const walk = (node: AgentEntry) => {
+      for (const child of childrenByParent.get(node.slug) || []) {
+        out.push({ from: node.slug, to: child.slug, fromMaster: !!node.is_master });
+        walk(child);
+      }
+    };
+    for (const root of roots) walk(root);
+    return out;
+  }, [roots, childrenByParent]);
+
+  const setNodeRef = (slug: string) => (el: HTMLDivElement | null) => {
+    if (el) nodeRefs.current.set(slug, el);
+    else nodeRefs.current.delete(slug);
+  };
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const compute = () => {
+      const base = container.getBoundingClientRect();
+      const next: EdgePath[] = [];
+      edges.forEach((e, i) => {
+        const a = nodeRefs.current.get(e.from)?.getBoundingClientRect();
+        const b = nodeRefs.current.get(e.to)?.getBoundingClientRect();
+        if (!a || !b) return;
+        const x1 = a.left + a.width / 2 - base.left;
+        const y1 = a.bottom - base.top;
+        const x2 = b.left + b.width / 2 - base.left;
+        const y2 = b.top - base.top;
+        const bend = Math.min(Math.max((y2 - y1) * 0.6, 24), 90);
+        next.push({
+          key: `${e.from}->${e.to}`,
+          d: `M ${x1} ${y1} C ${x1} ${y1 + bend}, ${x2} ${y2 - bend}, ${x2} ${y2}`,
+          color: e.fromMaster ? EDGE_ROOT_COLOR : EDGE_COLOR,
+          dur: `${(2.8 + (i % 5) * 0.4).toFixed(1)}s`,
+          begin: `${((i * 0.5) % 2.5).toFixed(1)}s`,
+        });
+      });
+      setPaths(next);
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(container);
+    nodeRefs.current.forEach((el) => ro.observe(el));
+    return () => ro.disconnect();
+  }, [edges]);
+
   return (
-    <div className="space-y-8">
-      {roots.map((root) => {
-        const kids = childrenByParent.get(root.slug) || [];
-        const groups = groupByArea(kids);
-        const categorized = groups.some((g) => g.area);
-        return (
-          <div key={root.slug} className="flex flex-col items-center">
-            <AgentCard agent={root} onOpen={onOpen} onChat={onChat} wide />
-            {kids.length > 0 && (
-              <>
-                <div className="h-5 w-px bg-border" />
-                {/* When children carry a category (area), lay them out grouped
-                    under a heading per category; otherwise keep the flat row. */}
-                <div className="flex flex-col gap-6 border-t border-border pt-5">
-                  {groups.map((g) => (
-                    <div key={g.area ?? "__none"} className="flex flex-col items-center gap-3">
-                      {categorized && (
-                        <span className="rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-fg">
-                          {g.area || t("agents_ui.uncategorized")} · {g.agents.length}
-                        </span>
-                      )}
-                      <div className="flex flex-wrap items-start justify-center gap-4">
-                        {g.agents.map((k) => (
-                          <div key={k.slug} className="flex flex-col items-center">
-                            <AgentCard agent={k} onOpen={onOpen} onChat={onChat} />
-                            {(childrenByParent.get(k.slug) || []).length > 0 && (
-                              <>
-                                <div className="h-4 w-px bg-border" />
-                                <div className="flex flex-wrap justify-center gap-3 border-t border-border pt-4">
-                                  {(childrenByParent.get(k.slug) || []).map((gc) => (
-                                    <AgentCard key={gc.slug} agent={gc} onOpen={onOpen} onChat={onChat} compact />
-                                  ))}
-                                </div>
-                              </>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
+    <div ref={containerRef} className="relative">
+      <HierarchyEdges paths={paths} />
+      <div className="relative z-10 space-y-12">
+        {roots.map((root) => (
+          <HierarchyBranch
+            key={root.slug}
+            pid={pid}
+            agent={root}
+            depth={0}
+            childrenByParent={childrenByParent}
+            setNodeRef={setNodeRef}
+            onOpen={onOpen}
+            onChat={onChat}
+            onAgentSaved={onAgentSaved}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function AreaPill({ area, count }: { area: string | null; count: number }) {
+  return (
+    <span className="rounded-full border border-border bg-card px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-fg">
+      {area || t("agents_ui.uncategorized")} · {count}
+    </span>
+  );
+}
+
+// One agent + its descendants. Areas sit side by side in one row; the agents
+// of each area pack into their own compact grid. Parent→child links grow down.
+function HierarchyBranch({
+  pid, agent, depth, childrenByParent, setNodeRef, onOpen, onChat, onAgentSaved,
+}: {
+  pid: string;
+  agent: AgentEntry;
+  depth: number;
+  childrenByParent: Map<string, AgentEntry[]>;
+  setNodeRef: (slug: string) => (el: HTMLDivElement | null) => void;
+  onOpen: (slug: string) => void;
+  onChat: (slug: string) => void;
+  onAgentSaved: () => void;
+}) {
+  const kids = childrenByParent.get(agent.slug) || [];
+  const groups = groupByArea(kids);
+  const categorized = groups.some((g) => g.area);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div ref={setNodeRef(agent.slug)}>
+        <AgentCard
+          pid={pid}
+          agent={agent}
+          onOpen={onOpen}
+          onChat={onChat}
+          onModelSaved={onAgentSaved}
+          wide={depth === 0}
+          compact={depth >= 2}
+        />
+      </div>
+      {kids.length > 0 && (
+        categorized ? (
+          <div className="mt-12 flex flex-row flex-wrap items-start justify-center gap-x-10 gap-y-12">
+            {groups.map((g) => (
+              <div key={g.area ?? "__none"} className="flex flex-col items-center gap-3">
+                <AreaPill area={g.area} count={g.agents.length} />
+                <AgentGrid count={g.agents.length}>
+                  {g.agents.map((k) => (
+                    <HierarchyBranch
+                      key={k.slug}
+                      pid={pid}
+                      agent={k}
+                      depth={depth + 1}
+                      childrenByParent={childrenByParent}
+                      setNodeRef={setNodeRef}
+                      onOpen={onOpen}
+                      onChat={onChat}
+                      onAgentSaved={onAgentSaved}
+                    />
                   ))}
-                </div>
-              </>
-            )}
+                </AgentGrid>
+              </div>
+            ))}
           </div>
-        );
-      })}
+        ) : (
+          <div className="mt-12">
+            <AgentGrid count={kids.length}>
+              {kids.map((k) => (
+                <HierarchyBranch
+                  key={k.slug}
+                  pid={pid}
+                  agent={k}
+                  depth={depth + 1}
+                  childrenByParent={childrenByParent}
+                  setNodeRef={setNodeRef}
+                  onOpen={onOpen}
+                  onChat={onChat}
+                  onAgentSaved={onAgentSaved}
+                />
+              ))}
+            </AgentGrid>
+          </div>
+        )
+      )}
     </div>
   );
 }
 
 function AgentCard({
-  agent, onOpen, onChat, wide, compact,
+  pid, agent, onOpen, onChat, onModelSaved, wide, compact,
 }: {
+  pid: string;
   agent: AgentEntry;
   onOpen: (slug: string) => void;
   onChat: (slug: string) => void;
+  onModelSaved: () => void;
   wide?: boolean;
   compact?: boolean;
 }) {
@@ -280,20 +471,59 @@ function AgentCard({
       onClick={() => onOpen(agent.slug)}
     >
       <div className="flex items-center gap-2">
-        <div className={cn("flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br", gradient)}>
-          {agent.emoji ? <span className="text-base leading-none">{agent.emoji}</span> : <Icon className="size-4 text-white" />}
-        </div>
-        <span className="truncate text-sm font-semibold">{agent.slug}</span>
-      </div>
-      <div className="mt-2 flex flex-wrap items-center gap-1">
-        {agent.is_master && <Badge tone="success"><Crown size={9} /> {t("project.agents.orchestrator")}</Badge>}
-        {agent.role && <Badge>{agent.role}</Badge>}
-        {agent.model && !compact && <Badge tone="info">{agent.model}</Badge>}
+        {isBlobKey(agent.icon) ? (
+          <BlobAvatar preset={agent.icon} size={32} seed={agent.slug} className="shrink-0" />
+        ) : (
+          <div className={cn("flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br", gradient)}>
+            {agent.emoji ? <span className="text-base leading-none">{agent.emoji}</span> : <Icon className="size-4 text-white" />}
+          </div>
+        )}
+        {/* Name is what the agent is CALLED; the slug is its immutable handle
+            (filename, delegation, a2a ids), kept as a small subtitle when it
+            differs so both are visible. */}
+        <span className="min-w-0">
+          <span className="block truncate text-sm font-semibold">{agent.name || agent.slug}</span>
+          {agent.name && agent.name !== agent.slug && (
+            <span className="block truncate text-[10px] leading-tight text-muted-fg">{agent.slug}</span>
+          )}
+        </span>
       </div>
+      {/* Role is a LABEL, description is the sentence. They were collapsed into
+          one un-clipped badge, and since people (and create_agent) write a whole
+          description into Role — "Investigador de precios de servicios
+          automotrices en Argentina" — it spilled out past the card border and
+          the actual description was never shown at all. So the role badge is
+          clipped to the card and the description sits under it, at two lines. */}
+      {(agent.is_master || agent.role) && (
+        <div className="mt-2 flex min-w-0 flex-wrap items-center gap-1">
+          {agent.is_master && <Badge tone="success"><Crown size={9} /> {t("project.agents.orchestrator")}</Badge>}
+          {agent.role && (
+            <Badge className="min-w-0 max-w-full shrink">
+              <span className="min-w-0 truncate" title={agent.role}>{agent.role}</span>
+            </Badge>
+          )}
+        </div>
+      )}
+      {/* Skipped when it only repeats the role — two lines of the same sentence
+          is worse than one. */}
+      {agent.description && agent.description !== agent.role && (
+        <p className="mt-1.5 line-clamp-2 text-[11px] leading-snug text-muted-fg" title={agent.description}>
+          {agent.description}
+        </p>
+      )}
       <AgentStatRow stats={agent.stats} className="mt-2" />
+      {/* The model badge closes this row: it only gets the width left over by
+          View/Chat and truncates, so a long id can't widen the card. */}
       <div className="mt-2 flex items-center gap-3 border-t border-border pt-2 text-xs text-muted-fg" onClick={(e) => e.stopPropagation()}>
-        <button onClick={() => onOpen(agent.slug)} className="flex items-center gap-1 hover:text-foreground"><Eye size={12} /> {t("project.agents.view")}</button>
-        <button onClick={() => onChat(agent.slug)} className="flex items-center gap-1 text-emerald-500 hover:text-emerald-400"><Send size={12} /> {t("project.agents.chat")}</button>
+        <button onClick={() => onOpen(agent.slug)} className="flex shrink-0 items-center gap-1 hover:text-foreground"><Eye size={12} /> {t("project.agents.view")}</button>
+        <button onClick={() => onChat(agent.slug)} className={`flex shrink-0 items-center gap-1 ${toneText.emerald} ${toneTextHover.emerald}`}><Send size={12} /> {t("project.agents.chat")}</button>
+        <AgentModelBadge
+          pid={pid}
+          slug={agent.slug}
+          model={agent.model}
+          onSaved={onModelSaved}
+          className="ml-auto"
+        />
       </div>
     </div>
   );
@@ -307,16 +537,21 @@ function ListView({ agents, onOpen, onChat }: { agents: AgentEntry[]; onOpen: (s
         const { gradient, Icon } = agentVisual(a);
         return (
           <div key={a.slug} data-testid={`agent-card-${a.slug}`} className="flex cursor-pointer items-center gap-4 rounded-xl border border-border bg-muted/30 p-3 hover:border-muted-fg/50" onClick={() => onOpen(a.slug)}>
-            <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br", gradient)}>
-              {a.emoji ? <span className="text-lg leading-none">{a.emoji}</span> : <Icon className="size-4 text-white" />}
-            </div>
+            {isBlobKey(a.icon) ? (
+              <BlobAvatar preset={a.icon} size={36} seed={a.slug} className="shrink-0" />
+            ) : (
+              <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br", gradient)}>
+                {a.emoji ? <span className="text-lg leading-none">{a.emoji}</span> : <Icon className="size-4 text-white" />}
+              </div>
+            )}
             <div className="min-w-0 flex-1">
               <div className="flex flex-wrap items-center gap-2">
-                <span className="text-sm font-semibold">{a.slug}</span>
+                <span className="text-sm font-semibold">{a.name || a.slug}</span>
+                {a.name && a.name !== a.slug && <span className="text-[10px] text-muted-fg">{a.slug}</span>}
                 {a.is_master && <Badge tone="success"><Crown size={10} /> {t("project.agents.orchestrator")}</Badge>}
                 {a.role && <Badge>{a.role}</Badge>}
                 {a.model && <Badge tone="info">{a.model}</Badge>}
-                {a.parent && <span className="text-[10px] text-violet-400">↳ {a.parent}</span>}
+                {a.parent && <span className={`text-[10px] ${toneText.violet}`}>↳ {a.parent}</span>}
               </div>
               {a.description && <p className="mt-1 truncate text-xs text-muted-fg">{a.description}</p>}
               <div className="mt-1 flex flex-wrap gap-1">
@@ -327,7 +562,7 @@ function ListView({ agents, onOpen, onChat }: { agents: AgentEntry[]; onOpen: (s
             <AgentStatRow stats={a.stats} className="hidden shrink-0 sm:flex" />
             <div className="flex shrink-0 items-center gap-3 text-xs text-muted-fg" onClick={(e) => e.stopPropagation()}>
               <button onClick={() => onOpen(a.slug)} className="flex items-center gap-1 hover:text-foreground"><Eye size={12} /> {t("project.agents.view")}</button>
-              <button onClick={() => onChat(a.slug)} className="flex items-center gap-1 text-emerald-500 hover:text-emerald-400"><Send size={12} /> {t("project.agents.chat")}</button>
+              <button onClick={() => onChat(a.slug)} className={`flex items-center gap-1 ${toneText.emerald} ${toneTextHover.emerald}`}><Send size={12} /> {t("project.agents.chat")}</button>
             </div>
           </div>
         );
@@ -341,23 +576,23 @@ function CreateAgentDialog({
 }: { open: boolean; onClose: () => void; onCreated: () => void; pid: string; agents: AgentEntry[] }) {
   const toast = useToast();
   const [slug, setSlug] = useState("");
-  const [emoji, setEmoji] = useState("");
+  const [name, setName] = useState("");
+  const [icon, setIcon] = useState("");
   const [type, setType] = useState("");
   const [role, setRole] = useState("");
   const [area, setArea] = useState("");
   const [autonomy, setAutonomy] = useState<AgentAutonomy | "">("");
-  const [model, setModel] = useState("");
+  const [model, setModel] = useState(INHERIT_MODEL);
   const [language, setLanguage] = useState("");
   const [description, setDescription] = useState("");
-  const [skills, setSkills] = useState("");
-  const [tools, setTools] = useState("");
+  const [system, setSystem] = useState("");
   const [isMaster, setIsMaster] = useState(false);
   const [parent, setParent] = useState("");
   const [busy, setBusy] = useState(false);
 
   const reset = () => {
-    setSlug(""); setEmoji(""); setType(""); setRole(""); setArea(""); setAutonomy("");
-    setModel(""); setLanguage(""); setDescription(""); setSkills(""); setTools("");
+    setSlug(""); setName(""); setIcon(""); setType(""); setRole(""); setArea(""); setAutonomy("");
+    setModel(INHERIT_MODEL); setLanguage(""); setDescription(""); setSystem("");
     setIsMaster(false); setParent("");
   };
 
@@ -365,18 +600,21 @@ function CreateAgentDialog({
     if (!/^[a-z][a-z0-9_-]*$/.test(slug)) { toast.error(t("project.agents.slug_invalid")); return; }
     setBusy(true);
     try {
+      // Skills and tools are deliberately absent: a new agent inherits the
+      // project's enabled skills and the daemon's default tool set, then gets
+      // tuned in the agent's Config tab.
       await Agents.create(pid, {
         slug,
-        emoji: emoji || undefined,
+        name: name || undefined,
+        icon: icon || undefined,
         type: type || undefined,
         role: role || undefined,
         area: area || undefined,
         autonomy: autonomy || undefined,
-        model: model || undefined,
+        model: isInheritedModel(model) ? INHERIT_MODEL : model,
         language: language || undefined,
         description: description || undefined,
-        skills: csv(skills),
-        tools: csv(tools),
+        system: system || undefined,
         is_master: isMaster || type === "orchestrator",
         parent: parent || undefined,
       });
@@ -402,24 +640,34 @@ function CreateAgentDialog({
       }
     >
       <div className="space-y-3">
-        <div className="grid grid-cols-[80px_1fr_1fr] gap-3">
-          <Field label={t("agents_form.emoji")}><EmojiInput value={emoji} onChange={setEmoji} /></Field>
-          <Field label={t("project.agents.slug_label")}><Input autoFocus data-testid="agent-slug" value={slug} onChange={(e) => setSlug(e.target.value)} placeholder={t("project.agents.slug_ph")} /></Field>
+        <div className="grid grid-cols-2 gap-3">
+          <Field label={t("agents_form.name")} hint={t("agents_form.name_hint")}>
+            <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder={t("agents_form.name_ph")} />
+          </Field>
+          <Field label={t("project.agents.slug_label")} hint={t("agents_form.slug_hint")}>
+            <Input data-testid="agent-slug" value={slug} onChange={(e) => setSlug(e.target.value)} placeholder={t("project.agents.slug_ph")} />
+          </Field>
+        </div>
+        <Field label={t("project.agents.desc_label")}>
+          <Textarea rows={2} value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t("project.agents.desc_ph")} />
+        </Field>
+        <Field label={t("project.agent_detail.system_label")} hint={t("project.agent_detail.system_hint")}>
+          <Textarea rows={8} className="font-mono text-xs" value={system} onChange={(e) => setSystem(e.target.value)} placeholder="You are…" />
+        </Field>
+        <Field label={t("agents_form.icon")}>
+          <AgentIconPicker icon={icon} onIcon={setIcon} />
+        </Field>
+        <div className="grid grid-cols-2 gap-3">
           <Field label={t("project.agent_detail.type_label")}><UiSelect value={type} onChange={setType} options={typeOptions()} /></Field>
+          <Field label={t("project.agents.lang_label")}><UiSelect value={language} onChange={setLanguage} options={LANGS.map((l) => ({ value: l, label: l || "—" }))} /></Field>
         </div>
         <AreaRoleFields pid={pid} area={area} role={role} onArea={setArea} onRole={setRole} />
         <Field label={t("agents_form.autonomy")} hint={t("agents_form.autonomy_hint")}>
           <AutonomyPicker value={autonomy} onChange={setAutonomy} />
         </Field>
-        <div className="grid grid-cols-2 gap-3">
-          <Field label={t("project.agents.model_label")} hint={t("project.agents.model_hint")}><Input value={model} onChange={(e) => setModel(e.target.value)} /></Field>
-          <Field label={t("project.agents.lang_label")}><UiSelect value={language} onChange={setLanguage} options={LANGS.map((l) => ({ value: l, label: l || "—" }))} /></Field>
-        </div>
-        <Field label={t("project.agents.desc_label")}><Textarea rows={2} value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t("project.agents.desc_ph")} /></Field>
-        <div className="grid grid-cols-2 gap-3">
-          <Field label={t("project.agents.skills_label")}><Input value={skills} onChange={(e) => setSkills(e.target.value)} placeholder={t("project.agents.skills_ph")} /></Field>
-          <Field label={t("project.agents.tools_label")}><Input value={tools} onChange={(e) => setTools(e.target.value)} placeholder={t("project.agents.tools_ph")} /></Field>
-        </div>
+        <Field label={t("project.agents.model_label")} hint={t("project.agents.model_hint")}>
+          <AgentModelSelect value={model} onChange={setModel} />
+        </Field>
         <div className="grid grid-cols-2 items-end gap-3">
           <Field label={t("project.agents.parent_label")} hint={t("project.agents.parent_hint")}>
             <UiSelect
@@ -431,6 +679,9 @@ function CreateAgentDialog({
           </Field>
           <Switch checked={isMaster} onChange={setIsMaster} label={t("project.agents.master_label")} />
         </div>
+        <p className="rounded-lg border border-border bg-muted/30 p-2.5 text-[11px] text-muted-fg">
+          {t("agents_form.create_defaults_note")}
+        </p>
       </div>
     </Dialog>
   );

package/src/interfaces/web/src/screens/project/ArtifactsTab.tsx

@@ -12,7 +12,7 @@ export function ArtifactsTab({ pid }: { pid: string }) {
 
   const toCode = (params: Record<string, string>) => {
     const qs = new URLSearchParams({ pid, ...params }).toString();
-    navigate(`/m/code?${qs}`);
+    navigate(`/code?${qs}`);
   };
 
   return (