@agentprojectcontext/apx 1.57.0 → 1.58.0

package/src/interfaces/web/src/i18n/en.ts

@@ -32,6 +32,10 @@ export const en = {
     hide:         "Hide",
     copy:         "Copy",
     run:          "Run",
+    refresh:      "Refresh",
+    view_all:     "View all",
+    saved:        "Saved.",
+    deleted:      "Deleted.",
     pager_prev:   "Previous",
     pager_next:   "Next",
     pager_page:   "Page {page} of {total}",
@@ -292,10 +296,14 @@ export const en = {
       vars:     "Variables",
       logs:     "Logs",
       memories: "Memories",
+      structure: "Structure",
+      docs:     "Docs",
+      files:    "Files",
     },
 
     sections: {
       workspace: "Workspace",
+      content: "Content",
       automation: "Automation",
       knowledge: "Conversations",
       config: "Config",
@@ -304,11 +312,18 @@ export const en = {
     overview: {
       tasks_open: "Open tasks",
       routines:   "Routines",
+      routines_active: "Active routines",
       agents:     "Agents",
       mcps:       "MCPs",
       artifacts:  "Artifacts",
       chat:       "Chat (super-agent)",
       chat_value: "open",
+      roster:     "Team",
+      no_agents:  "No agents yet.",
+      orchestrators: "Orchestrators",
+      specialists: "Specialists",
+      recent_tasks: "Recent tasks",
+      no_activity: "No open tasks.",
     },
 
     artifacts: {
@@ -1301,6 +1316,95 @@ export const en = {
     role_assigned:         "{name} → {role}",
   },
 
+  agents_form: {
+    emoji:           "Emoji",
+    area:            "Area",
+    role:            "Role",
+    no_role:         "— no role —",
+    autonomy:        "Autonomy",
+    autonomy_hint:   "How much the agent can do without asking for confirmation.",
+    auto_total:      "Total",
+    auto_automatico: "Auto",
+    auto_permiso:    "Permission",
+  },
+
+  structure: {
+    title:            "Structure",
+    subtitle:         "Company areas and roles. Areas group agents; roles define their function.",
+    info:             "Areas are optional groupings. Roles define an agent's function and may belong to an area.",
+    empty:            "No areas or roles yet. Create the first one above.",
+    new_area:         "New area",
+    new_role:         "New role",
+    edit_area:        "Edit area",
+    edit_role:        "Edit role",
+    create_area:      "Create area",
+    create_role:      "Create role",
+    name:             "Name",
+    slug:             "Slug",
+    goal:             "Goal",
+    goal_hint:        "What this area exists for (optional).",
+    area:             "Area",
+    description:      "Description",
+    no_area:          "— no area —",
+    roles:            "Roles",
+    add_role:         "role",
+    no_roles:         "no roles",
+    general_roles:    "General roles",
+    delete_area:      "Delete area",
+    delete_role:      "Delete role",
+    delete_area_desc: "Delete area \"{name}\"? Its roles are detached, not deleted.",
+    delete_role_desc: "Delete role \"{name}\"?",
+  },
+
+  files: {
+    docs_label:    "Docs",
+    files_label:   "Files",
+    new_doc:       "New document",
+    new_doc_hint:  "Folders allowed: cases/onboarding/spec.md",
+    empty:         "No files.",
+    docs_empty:    "No documentation yet. Create the first document.",
+    truncated:     "Listing truncated (too many files).",
+    select_prompt: "Pick a file to view it.",
+    save:          "Save",
+    saved:         "Saved.",
+    deleted:       "Deleted.",
+    created:       "Document created.",
+    edit:          "Edit",
+    preview:       "Preview",
+    discard:       "Discard",
+    no_preview:    "No preview for this file.",
+    too_large:     "File too large to display.",
+    path_label:    "File path",
+    path_example:  "e.g. cases/onboarding/spec.md",
+    create:        "Create",
+  },
+
+  tasks: {
+    state_open:      "open",
+    state_done:      "done",
+    state_dropped:   "dropped",
+    status_pending:   "pending",
+    status_running:   "running",
+    status_in_review: "in review",
+    status_blocked:   "blocked",
+    done_label:      "done",
+    dropped_label:   "dropped",
+    detail_title:    "Task detail",
+    field_title:     "Title",
+    field_prompt:    "Prompt",
+    field_status:    "Status",
+    field_agent:     "Agent",
+    field_creator:   "Created by",
+    field_source:    "Source",
+    field_created:   "Created",
+    field_updated:   "Updated",
+    field_done:      "Completed",
+    prompt_ph:       "Task description / prompt…",
+    toggle_prompt:   "Prompt",
+    view_thread:     "View thread",
+    mark_done:       "Complete",
+  },
+
   agents_ui: {
     model_router_default:    "model: router default",
     slug_kebab_hint:         "kebab-case, e.g. reviewer, my-agent, content-writer",

package/src/interfaces/web/src/i18n/es.ts

@@ -33,6 +33,10 @@ export const es = {
     hide:         "Ocultar",
     copy:         "Copiar",
     run:          "Ejecutar",
+    refresh:      "Refrescar",
+    view_all:     "Ver todo",
+    saved:        "Guardado.",
+    deleted:      "Eliminado.",
     pager_prev:   "Anterior",
     pager_next:   "Siguiente",
     pager_page:   "Página {page} de {total}",
@@ -293,10 +297,14 @@ export const es = {
       vars:     "Variables",
       logs:     "Logs",
       memories: "Memorias",
+      structure: "Estructura",
+      docs:     "Docs",
+      files:    "Archivos",
     },
 
     sections: {
       workspace: "Workspace",
+      content: "Contenido",
       automation: "Automatización",
       knowledge: "Conversaciones",
       config: "Config",
@@ -305,11 +313,18 @@ export const es = {
     overview: {
       tasks_open: "Tasks abiertas",
       routines:   "Rutinas",
+      routines_active: "Rutinas activas",
       agents:     "Agents",
       mcps:       "MCPs",
       artifacts:  "Artifacts",
       chat:       "Chat (super-agent)",
       chat_value: "abrir",
+      roster:     "Equipo",
+      no_agents:  "Todavía no hay agentes.",
+      orchestrators: "Orquestadores",
+      specialists: "Especialistas",
+      recent_tasks: "Tasks recientes",
+      no_activity: "No hay tasks abiertas.",
     },
 
     artifacts: {
@@ -1299,6 +1314,95 @@ export const es = {
     role_assigned:         "{name} → {role}",
   },
 
+  agents_form: {
+    emoji:           "Emoji",
+    area:            "Área",
+    role:            "Rol",
+    no_role:         "— sin rol —",
+    autonomy:        "Autonomía",
+    autonomy_hint:   "Cuánto puede hacer el agente sin pedir confirmación.",
+    auto_total:      "Total",
+    auto_automatico: "Auto",
+    auto_permiso:    "Permiso",
+  },
+
+  structure: {
+    title:            "Estructura",
+    subtitle:         "Áreas y roles de la empresa. Las áreas agrupan agentes; los roles definen su función.",
+    info:             "Las áreas son agrupaciones opcionales. Los roles definen la función de un agente y pueden pertenecer a un área.",
+    empty:            "Todavía no hay áreas ni roles. Creá el primero arriba.",
+    new_area:         "Nueva área",
+    new_role:         "Nuevo rol",
+    edit_area:        "Editar área",
+    edit_role:        "Editar rol",
+    create_area:      "Crear área",
+    create_role:      "Crear rol",
+    name:             "Nombre",
+    slug:             "Slug",
+    goal:             "Objetivo",
+    goal_hint:        "Para qué existe esta área (opcional).",
+    area:             "Área",
+    description:      "Descripción",
+    no_area:          "— sin área —",
+    roles:            "Roles",
+    add_role:         "rol",
+    no_roles:         "sin roles",
+    general_roles:    "Roles generales",
+    delete_area:      "Borrar área",
+    delete_role:      "Borrar rol",
+    delete_area_desc: "¿Borrar el área \"{name}\"? Sus roles quedan sin área, no se eliminan.",
+    delete_role_desc: "¿Borrar el rol \"{name}\"?",
+  },
+
+  files: {
+    docs_label:    "Docs",
+    files_label:   "Archivos",
+    new_doc:       "Nuevo documento",
+    new_doc_hint:  "Podés usar carpetas: cases/onboarding/spec.md",
+    empty:         "No hay archivos.",
+    docs_empty:    "Todavía no hay documentación. Creá el primer documento.",
+    truncated:     "Listado recortado (demasiados archivos).",
+    select_prompt: "Elegí un archivo para verlo.",
+    save:          "Guardar",
+    saved:         "Guardado.",
+    deleted:       "Eliminado.",
+    created:       "Documento creado.",
+    edit:          "Editar",
+    preview:       "Preview",
+    discard:       "Descartar",
+    no_preview:    "No hay preview para este archivo.",
+    too_large:     "Archivo demasiado grande para mostrar.",
+    path_label:    "Ruta del archivo",
+    path_example:  "ej. cases/onboarding/spec.md",
+    create:        "Crear",
+  },
+
+  tasks: {
+    state_open:      "abiertas",
+    state_done:      "hechas",
+    state_dropped:   "descartadas",
+    status_pending:   "pendiente",
+    status_running:   "corriendo",
+    status_in_review: "en revisión",
+    status_blocked:   "bloqueada",
+    done_label:      "hecha",
+    dropped_label:   "descartada",
+    detail_title:    "Detalle de task",
+    field_title:     "Título",
+    field_prompt:    "Prompt",
+    field_status:    "Estado",
+    field_agent:     "Agente",
+    field_creator:   "Creada por",
+    field_source:    "Origen",
+    field_created:   "Creada",
+    field_updated:   "Actualizada",
+    field_done:      "Completada",
+    prompt_ph:       "Descripción / prompt de la task…",
+    toggle_prompt:   "Prompt",
+    view_thread:     "Ver conversación",
+    mark_done:       "Completar",
+  },
+
   agents_ui: {
     model_router_default:    "modelo: default del router",
     slug_kebab_hint:         "kebab-case, ej. reviewer, my-agent, content-writer",

package/src/interfaces/web/src/lib/api/organization.ts

@@ -0,0 +1,18 @@
+import { http } from "../http";
+import type { Organization, OrgArea, OrgRole } from "../../types/daemon";
+
+export const Org = {
+  get: (pid: string) => http.get<Organization>(`/projects/${pid}/organization`),
+  createArea: (pid: string, body: { name: string; slug?: string; goal?: string | null }) =>
+    http.post<OrgArea>(`/projects/${pid}/organization/areas`, body),
+  updateArea: (pid: string, slug: string, patch: { name?: string; goal?: string | null }) =>
+    http.patch<OrgArea>(`/projects/${pid}/organization/areas/${encodeURIComponent(slug)}`, patch),
+  removeArea: (pid: string, slug: string) =>
+    http.del<{ ok: boolean }>(`/projects/${pid}/organization/areas/${encodeURIComponent(slug)}`),
+  createRole: (pid: string, body: { name: string; slug?: string; area?: string | null; description?: string | null }) =>
+    http.post<OrgRole>(`/projects/${pid}/organization/roles`, body),
+  updateRole: (pid: string, slug: string, patch: { name?: string; area?: string | null; description?: string | null }) =>
+    http.patch<OrgRole>(`/projects/${pid}/organization/roles/${encodeURIComponent(slug)}`, patch),
+  removeRole: (pid: string, slug: string) =>
+    http.del<{ ok: boolean }>(`/projects/${pid}/organization/roles/${encodeURIComponent(slug)}`),
+};

package/src/interfaces/web/src/lib/api/projectFiles.ts

@@ -0,0 +1,19 @@
+import { http } from "../http";
+import type { FileTreeResponse, FileContent } from "../../types/daemon";
+
+export type FileScope = "project" | "docs";
+
+// Project file browser + docs editor. `scope` picks the sandbox: the whole
+// repo ("project") or the docs subfolder ("docs"). Same store, different root.
+export const ProjectFiles = {
+  tree: (pid: string, scope: FileScope = "project") =>
+    http.get<FileTreeResponse>(`/projects/${pid}/fs/tree?scope=${scope}`),
+  read: (pid: string, path: string, scope: FileScope = "project") =>
+    http.get<FileContent>(`/projects/${pid}/fs/file?scope=${scope}&path=${encodeURIComponent(path)}`),
+  write: (pid: string, path: string, content: string, scope: FileScope = "project") =>
+    http.put<{ ok: boolean; path: string; bytes: number }>(`/projects/${pid}/fs/file`, { scope, path, content }),
+  mkdir: (pid: string, path: string, scope: FileScope = "project") =>
+    http.post<{ ok: boolean; path: string }>(`/projects/${pid}/fs/dir`, { scope, path }),
+  remove: (pid: string, path: string, scope: FileScope = "project") =>
+    http.del<{ ok: boolean }>(`/projects/${pid}/fs/entry?scope=${scope}&path=${encodeURIComponent(path)}`),
+};

package/src/interfaces/web/src/lib/api/tasks.ts

@@ -1,11 +1,20 @@
 import { http, unwrapPage } from "../http";
-import type { TaskEntry } from "../../types/daemon";
+import type { TaskEntry, TaskStatus } from "../../types/daemon";
 
 export interface GlobalTaskEntry extends TaskEntry {
   project_id: number;
   project_name: string;
 }
 
+export interface TaskSummary {
+  open: number;
+  done: number;
+  dropped: number;
+  overdue: number;
+  total: number;
+  status: Record<TaskStatus, number>;
+}
+
 export const Tasks = {
   // Full sets (no pagination) — unwrapped to plain arrays for non-paged callers.
   list:   (pid: string, state: TaskEntry["state"] | "all" = "open") =>
@@ -18,9 +27,15 @@ export const Tasks = {
     http.get<unknown>(`/projects/${pid}/tasks?state=${state}&limit=${limit}&offset=${offset}`).then((b) => unwrapPage<TaskEntry>(b)),
   globalPage: ({ state, limit, offset }: { state: TaskEntry["state"] | "all"; limit: number; offset: number }) =>
     http.get<unknown>(`/tasks?state=${state}&limit=${limit}&offset=${offset}`).then((b) => unwrapPage<GlobalTaskEntry>(b)),
+  get:    (pid: string, id: string) => http.get<TaskEntry>(`/projects/${pid}/tasks/${id}`),
   add:    (pid: string, body: Partial<TaskEntry>) =>
     http.post<TaskEntry>(`/projects/${pid}/tasks`, body),
+  patch:  (pid: string, id: string, patch: Partial<TaskEntry>) =>
+    http.patch<TaskEntry>(`/projects/${pid}/tasks/${id}`, { patch }),
+  status: (pid: string, id: string, status: TaskStatus) =>
+    http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/status`, { status }),
   done:   (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/done`),
   drop:   (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/drop`),
   reopen: (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/reopen`),
+  summary: (pid: string) => http.get<TaskSummary>(`/projects/${pid}/tasks-summary`),
 };

package/src/interfaces/web/src/lib/api.ts

@@ -24,6 +24,8 @@ export * from "./api/deck";
 export * from "./api/code";
 export * from "./api/artifacts";
 export * from "./api/skills";
+export * from "./api/organization";
+export * from "./api/projectFiles";
 
 // Re-export the daemon types so older imports of "../lib/api" still work.
 export type {

package/src/interfaces/web/src/lib/slug.ts

@@ -0,0 +1,11 @@
+// Kebab-case a free-text name into a slug. Mirrors the backend's slugifyName
+// (core/stores/organization.js) so a name typed in the web produces the same
+// slug the daemon would derive.
+export function slugify(name: string): string {
+  return String(name || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-{2,}/g, "-");
+}

package/src/interfaces/web/src/screens/ProjectScreen.tsx

@@ -4,6 +4,7 @@ import {
   Bot, Heart, Zap, Puzzle, FolderKanban, Settings,
   MessagesSquare, Send, KeyRound,
   LayoutDashboard, Boxes, Cpu, ScrollText, History, Brain, FileCode2,
+  Building2, FileText, FolderTree,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -30,10 +31,14 @@ import { TelegramTab } from "./project/TelegramTab";
 import { MemoriesTab } from "./project/MemoriesTab";
 import { ArtifactsTab } from "./project/ArtifactsTab";
 import { AgentDetailScreen } from "./project/AgentDetailScreen";
+import { StructureTab } from "./project/StructureTab";
+import { DocsTab } from "./project/DocsTab";
+import { FilesTab } from "./project/FilesTab";
 
 type NavKey =
   | "" | "chat" | "config" | "telegram"
-  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "logs" | "memories" | "artifacts";
+  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "logs" | "memories" | "artifacts"
+  | "structure" | "docs" | "files";
 
 export function ProjectScreen() {
   const navigate = useNavigate();
@@ -79,6 +84,9 @@ export function ProjectScreen() {
         },
       ];
     }
+    // Structure (org roles/areas) is only meaningful for company/enterprise
+    // projects — gate it on the project kind.
+    const isCompany = project?.kind === "company";
     return [
       {
         title: t("project.sections.workspace"),
@@ -87,9 +95,17 @@ export function ProjectScreen() {
           { key: "telegram", label: t("project.nav.telegram"),  icon: Send },
           { key: "chat",     label: t("project.nav.chat"),      icon: MessagesSquare },
           { key: "agents",   label: t("project.nav.agents"),    icon: Bot },
+          ...(isCompany ? [{ key: "structure", label: t("project.nav.structure"), icon: Building2 }] : []),
           { key: "memories", label: t("project.nav.memories"),  icon: Brain },
         ],
       },
+      {
+        title: t("project.sections.content"),
+        items: [
+          { key: "docs",  label: t("project.nav.docs"),  icon: FileText },
+          { key: "files", label: t("project.nav.files"), icon: FolderTree },
+        ],
+      },
       {
         title: t("project.sections.automation"),
         items: [
@@ -108,7 +124,7 @@ export function ProjectScreen() {
         ],
       },
     ];
-  }, [isBase]);
+  }, [isBase, project?.kind]);
 
   // First path segment after /p/:pid — so deep routes like agents/:slug still
   // highlight the "agents" nav item.
@@ -155,6 +171,9 @@ export function ProjectScreen() {
         <Route path="telegram"     element={<TelegramTab pid={pid} />} />
         <Route path="agents"       element={<AgentsTab pid={pid} />} />
         <Route path="agents/:slug" element={<AgentDetailScreen pid={pid} />} />
+        <Route path="structure"    element={<StructureTab pid={pid} />} />
+        <Route path="docs"         element={<DocsTab pid={pid} />} />
+        <Route path="files"        element={<FilesTab pid={pid} />} />
         <Route path="memories"     element={<MemoriesTab pid={pid} />} />
         <Route path="routines"     element={<RoutinesTab pid={pid} />} />
         <Route path="tasks"        element={isBase ? <GlobalTasksTab /> : <TasksTab pid={pid} />} />

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

@@ -12,8 +12,11 @@ import { Badge, Button, Field, Input, Loading, Switch, Textarea } from "../../co
 import { Tip } from "../../components/ui/tip";
 import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
+import { EmojiInput, AutonomyPicker, AreaRoleFields } from "../../components/agents/AgentFormFields";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import type { AgentAutonomy } from "../../types/daemon";
 import { AgentBrainGraph, type BrainNode } from "./AgentBrainGraph";
 
 type TabKey = "overview" | "memories" | "records" | "sleep" | "brain" | "config";
@@ -28,7 +31,7 @@ function buildTabs(): { key: TabKey; label: string; icon: typeof Bot }[] {
   ];
 }
 
-function typeOptions() {
+export function typeOptions() {
   return [
     { value: "", label: t("agents_ui.type_none") },
     { value: "orchestrator", label: t("agents_ui.type_orchestrator"), description: t("agents_ui.type_orchestrator_desc") },
@@ -205,9 +208,11 @@ function AgentConfigForm({
   onDeleted: () => void;
 }) {
   const toast = useToast();
+  const [emoji, setEmoji] = useState(agent.emoji || "");
   const [type, setType] = useState(agent.type || "");
   const [area, setArea] = useState(agent.area || "");
   const [role, setRole] = useState(agent.role || "");
+  const [autonomy, setAutonomy] = useState<AgentAutonomy | "">(agent.autonomy || "");
   const [model, setModel] = useState(agent.model || "");
   const [parent, setParent] = useState(agent.parent || "");
   const [isMaster, setIsMaster] = useState(!!agent.is_master);
@@ -216,14 +221,17 @@ function AgentConfigForm({
   const [description, setDescription] = useState(agent.description || "");
   const [system, setSystem] = useState(agent.system || "");
   const [busy, setBusy] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
 
   const save = async () => {
     setBusy(true);
     try {
       await Agents.update(pid, agent.slug, {
+        emoji: emoji || null,
         type: type || null,
         area: area || null,
         role: role || null,
+        autonomy: autonomy || null,
         model: model || null,
         parent: parent || null,
         is_master: isMaster || type === "orchestrator",
@@ -239,20 +247,23 @@ function AgentConfigForm({
   };
 
   const del = async () => {
-    if (!confirm(t("project.agent_detail.delete_confirm", { slug: agent.slug }))) return;
-    try { await Agents.remove(pid, agent.slug); toast.success(t("project.agent_detail.delete_success")); onDeleted(); }
-    catch (e) { toast.error((e as Error).message); }
+    await Agents.remove(pid, agent.slug);
+    toast.success(t("project.agent_detail.delete_success"));
+    onDeleted();
   };
 
   return (
     <Section title={t("project.agent_detail.config_title")} description={`.apc/agents/${agent.slug}.md — ${t("agents_ui.config_def_desc")}`}>
       <div className="space-y-3">
-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-[80px_1fr] gap-3">
+          <Field label={t("agents_form.emoji")}><EmojiInput value={emoji} onChange={setEmoji} /></Field>
           <Field label={t("project.agent_detail.type_label")}><UiSelect value={type} onChange={setType} options={typeOptions()} /></Field>
-          <Field label={t("project.agent_detail.area_label")} hint={t("project.agent_detail.area_hint")}><Input value={area} onChange={(e) => setArea(e.target.value)} placeholder={t("project.agent_detail.area_ph")} /></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.agent_detail.role_label")}><Input value={role} onChange={(e) => setRole(e.target.value)} placeholder="Operations Lead" /></Field>
           <Field label={t("project.agent_detail.parent_label")}>
             <UiSelect
               value={parent}
@@ -261,10 +272,10 @@ function AgentConfigForm({
               options={[{ value: "", label: t("project.agent_detail.none_parent") }, ...agents.filter((x) => x.slug !== agent.slug).map((x) => ({ value: x.slug, label: x.slug }))]}
             />
           </Field>
+          <Field label={t("project.agent_detail.model_label")} hint={t("project.agent_detail.model_hint")}>
+            <Input value={model} onChange={(e) => setModel(e.target.value)} placeholder={t("project.agent_detail.model_ph")} />
+          </Field>
         </div>
-        <Field label={t("project.agent_detail.model_label")} hint={t("project.agent_detail.model_hint")}>
-          <Input value={model} onChange={(e) => setModel(e.target.value)} placeholder={t("project.agent_detail.model_ph")} />
-        </Field>
         <Field label={t("project.agent_detail.skills_label")}><Input value={skills} onChange={(e) => setSkills(e.target.value)} placeholder="skill-a, skill-b" /></Field>
         <ToolsPicker value={tools} onChange={setTools} />
         <Field label={t("project.agent_detail.bio_label")}><Textarea rows={2} value={description} onChange={(e) => setDescription(e.target.value)} /></Field>
@@ -274,10 +285,19 @@ function AgentConfigForm({
         <Switch checked={isMaster} onChange={setIsMaster} label={t("project.agent_detail.master_label")} />
 
         <div className="flex items-center justify-between border-t border-border pt-3">
-          <Button variant="destructive" onClick={del}><Trash2 size={13} /> {t("project.agent_detail.delete_btn")}</Button>
+          <Button variant="destructive" onClick={() => setConfirmDelete(true)}><Trash2 size={13} /> {t("project.agent_detail.delete_btn")}</Button>
           <Button variant="primary" loading={busy} onClick={save}><Save size={13} /> {t("project.agent_detail.save_btn")}</Button>
         </div>
       </div>
+
+      <ConfirmDialog
+        open={confirmDelete}
+        onClose={() => setConfirmDelete(false)}
+        onConfirm={del}
+        title={t("project.agent_detail.delete_btn")}
+        description={t("project.agent_detail.delete_confirm", { slug: agent.slug })}
+        confirmLabel={t("project.agent_detail.delete_btn")}
+      />
     </Section>
   );
 }

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

@@ -8,8 +8,11 @@ import { Section } from "../../components/Section";
 import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch, Textarea } from "../../components/ui";
 import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
+import { EmojiInput, AutonomyPicker, AreaRoleFields } from "../../components/agents/AgentFormFields";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+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);
@@ -224,7 +227,7 @@ function AgentCard({
     >
       <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)}>
-          <Icon className="size-4 text-white" />
+          {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>
@@ -250,7 +253,7 @@ function ListView({ agents, onOpen, onChat }: { agents: AgentEntry[]; onOpen: (s
         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)}>
-              <Icon className="size-4 text-white" />
+              {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">
@@ -282,7 +285,11 @@ function CreateAgentDialog({
 }: { open: boolean; onClose: () => void; onCreated: () => void; pid: string; agents: AgentEntry[] }) {
   const toast = useToast();
   const [slug, setSlug] = useState("");
+  const [emoji, setEmoji] = useState("");
+  const [type, setType] = useState("");
   const [role, setRole] = useState("");
+  const [area, setArea] = useState("");
+  const [autonomy, setAutonomy] = useState<AgentAutonomy | "">("");
   const [model, setModel] = useState("");
   const [language, setLanguage] = useState("");
   const [description, setDescription] = useState("");
@@ -293,8 +300,9 @@ function CreateAgentDialog({
   const [busy, setBusy] = useState(false);
 
   const reset = () => {
-    setSlug(""); setRole(""); setModel(""); setLanguage("");
-    setDescription(""); setSkills(""); setTools(""); setIsMaster(false); setParent("");
+    setSlug(""); setEmoji(""); setType(""); setRole(""); setArea(""); setAutonomy("");
+    setModel(""); setLanguage(""); setDescription(""); setSkills(""); setTools("");
+    setIsMaster(false); setParent("");
   };
 
   const submit = async () => {
@@ -303,13 +311,17 @@ function CreateAgentDialog({
     try {
       await Agents.create(pid, {
         slug,
+        emoji: emoji || undefined,
+        type: type || undefined,
         role: role || undefined,
+        area: area || undefined,
+        autonomy: autonomy || undefined,
         model: model || undefined,
         language: language || undefined,
         description: description || undefined,
         skills: csv(skills),
         tools: csv(tools),
-        is_master: isMaster,
+        is_master: isMaster || type === "orchestrator",
         parent: parent || undefined,
       });
       toast.success(t("project.agents.create_success", { slug }));
@@ -334,10 +346,15 @@ function CreateAgentDialog({
       }
     >
       <div className="space-y-3">
-        <div className="grid grid-cols-2 gap-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>
-          <Field label={t("project.agents.role_label")}><Input value={role} onChange={(e) => setRole(e.target.value)} placeholder={t("project.agents.role_ph")} /></Field>
+          <Field label={t("project.agent_detail.type_label")}><UiSelect value={type} onChange={setType} options={typeOptions()} /></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>