@agentprojectcontext/apx 1.57.0 → 1.59.0

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",
@@ -1579,6 +1683,73 @@ export const es = {
     cfg_apx_storage_id:         "ID de storage APX",
   },
 
+  skills_page: {
+    title:               "Skills",
+    desc:                "Activá o desactivá qué skills carga cada agente. Elegí el scope: el super-agent (global) o un proyecto puntual.",
+    list_title:          "Skills instaladas",
+    list_desc:           "Las privadas de APX están siempre activas y no se pueden tocar.",
+    scope_label:         "Scope",
+    scope_super_agent:   "Super-agent (global)",
+    scope_hint:          "El super-agent usa el scope global. Cada proyecto puede sobrescribir skills de forma independiente.",
+    count_label:         "{n} skills · {on} activas",
+    empty:               "No hay skills. Creá una abajo o instalá con la CLI.",
+    source_builtin:      "APX",
+    source_global:       "Global",
+    source_project:      "Proyecto",
+    private_badge:       "Privada",
+    private_hint:        "Skill interna de APX — siempre activa, no se puede desactivar ni borrar.",
+    overridden_badge:    "Override",
+    inherited_hint:      "Heredada del global",
+    reset_to_global:     "Volver al global",
+    on:                  "activa",
+    off:                 "inactiva",
+    toggle_failed:       "No se pudo cambiar el estado: {msg}",
+    add_title:           "Agregar skill",
+    add_desc:            "Crea una skill de usuario en ~/.apx/skills/<slug>/SKILL.md. Queda disponible para todos los scopes.",
+    add_slug_label:      "Slug",
+    add_slug_ph:         "mi-skill",
+    add_desc_label:      "Descripción",
+    add_desc_ph:         "Una línea que explique cuándo usarla",
+    add_body_label:      "Cuerpo (Markdown)",
+    add_body_ph:         "# Mi skill\n\nInstrucciones para el agente…",
+    add_btn:             "Crear skill",
+    created_ok:          "Skill \"{slug}\" creada.",
+    create_failed:       "No se pudo crear: {msg}",
+    delete_btn:          "Borrar",
+    delete_confirm:      "¿Borrar la skill \"{slug}\"? No se puede deshacer.",
+    deleted_ok:          "Skill \"{slug}\" borrada.",
+    delete_failed:       "No se pudo borrar: {msg}",
+    inspector_section_title: "Skill Inspector (RAG por turno)",
+    inspector_section_desc:  "Config avanzada: RAG local que inyecta solo las skills que el mensaje necesita.",
+    scope_ph:            "— elegir scope —",
+    select_a_skill:      "Elegí una skill de la lista para ver su contenido.",
+    added_by:            "Agregado por",
+    activator:           "Activador",
+    by_apx:              "APX (built-in)",
+    by_you:              "Vos",
+    activator_value:     "Coincidencia semántica (RAG)",
+    tab_preview:         "Vista",
+    tab_source:          "Fuente",
+    add_menu:            "Agregar",
+    add_online:          "Crear con el editor",
+    add_online_hint:     "Escribí slug + descripción + contenido",
+    add_zip:             "Subir .zip",
+    add_zip_hint:        "Importar una skill empaquetada",
+    add_repo:            "Desde repo git",
+    add_repo_hint:       "Clonar desde una URL",
+    create_dialog_title: "Crear skill",
+    repo_dialog_title:   "Importar desde repo git",
+    repo_url_label:      "URL del repo",
+    repo_url_ph:         "https://github.com/usuario/mi-skill.git",
+    repo_url_hint:       "El repo (o su subcarpeta) debe tener un SKILL.md.",
+    import_btn:          "Importar",
+    imported_ok:         "Skill \"{slug}\" importada.",
+    import_failed:       "No se pudo importar: {msg}",
+    cancel:              "Cancelar",
+    manager_tab:         "Skills",
+    rag_tab:             "Config (RAG)",
+  },
+
   shared_ui: {
     skill_inspector_title: "Skill Inspector ({embedder}) eligió estas skills para este turno",
     tools_count:           "{n} tools",

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/skills.ts

@@ -1,16 +1,44 @@
 import { http } from "../http";
 
+export type SkillSource = "builtin" | "global" | "project" | string;
+
 export type SkillEntry = {
   slug: string;
-  source: "bundled" | "user" | "project" | string;
+  source: SkillSource;
   description: string;
+  /** Effective enabled state for the requested scope. */
+  enabled?: boolean;
+  /** Built-in APX skill — always active, never disableable. */
+  private?: boolean;
+  /** Whether THIS scope holds an explicit override (vs. inherited). */
+  overridden?: boolean;
 };
 
 export type SkillsList = {
   count: number;
+  /** Echoed scope key: "default" (super-agent) or a project path. */
+  scope?: string;
   skills: SkillEntry[];
 };
 
+export interface SkillDetail {
+  slug: string;
+  source: SkillSource;
+  description: string;
+  frontmatter: Record<string, string>;
+  body: string;
+  file: string;
+  enabled: boolean;
+  private: boolean;
+  overridden: boolean;
+}
+
+export interface CreateResult {
+  ok: boolean;
+  slug: string;
+  source: string;
+}
+
 export interface InspectorConfig {
   enabled: boolean;
   load_threshold: number;
@@ -62,16 +90,59 @@ export interface InspectResult {
 
 export const Skills = {
   /**
-   * List installed skills (bundled + user + optional project-scoped). The
-   * description is already condensed for one-line rendering.
+   * List installed skills (built-in + user + optional project-scoped), each
+   * annotated with `enabled`/`private` for the requested scope. Pass a project
+   * path to both scan that project's skills AND resolve enabled-state against
+   * it; omit it for the super-agent ("default") scope.
    */
-  list: (projectPath?: string) =>
-    http.get<SkillsList>(
-      projectPath
-        ? `/skills?project_path=${encodeURIComponent(projectPath)}`
-        : "/skills",
+  list: (projectPath?: string) => {
+    const qs = new URLSearchParams();
+    if (projectPath) {
+      qs.set("project_path", projectPath);
+      qs.set("scope", projectPath);
+    }
+    const q = qs.toString();
+    return http.get<SkillsList>(q ? `/skills?${q}` : "/skills");
+  },
+
+  /** Full body + frontmatter of a skill, for the viewer. */
+  detail: (slug: string, projectPath?: string) => {
+    const qs = projectPath ? `?project_path=${encodeURIComponent(projectPath)}` : "";
+    return http.get<SkillDetail>(`/skills/${encodeURIComponent(slug)}/detail${qs}`);
+  },
+
+  /**
+   * Enable/disable a skill for a scope. `enabled: null` clears the override so
+   * the skill inherits the super-agent default again. `scope` is "default" or a
+   * project path.
+   */
+  setEnabled: (body: { slug: string; enabled: boolean | null; scope?: string }) =>
+    http.put<{ ok: boolean; slug: string; scope: string; enabled: boolean | null }>(
+      "/skills/enabled",
+      body,
     ),
 
+  /**
+   * Create a user skill from the online editor. With `project_path` it lands in
+   * that project's .apc/skills/; otherwise in ~/.apx/skills/.
+   */
+  create: (body: { slug: string; description?: string; body?: string; project_path?: string }) =>
+    http.post<CreateResult>("/skills", body),
+
+  /** Import a skill from an uploaded .zip (base64-encoded). */
+  importZip: (body: { data: string; project_path?: string }) =>
+    http.post<CreateResult>("/skills/import/zip", body),
+
+  /** Import a skill by cloning a git repo. */
+  importRepo: (body: { url: string; project_path?: string }) =>
+    http.post<CreateResult>("/skills/import/repo", body),
+
+  /** Delete a user skill (global or project-scoped). */
+  remove: (slug: string, projectPath?: string) => {
+    const qs = projectPath ? `?project_path=${encodeURIComponent(projectPath)}` : "";
+    return http.del<{ ok: boolean; slug: string }>(`/skills/${encodeURIComponent(slug)}${qs}`);
+  },
+
   /** Skill Inspector config + index status. */
   inspector: () => http.get<InspectorState>("/skills/inspector"),
 

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, Sparkles,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -30,10 +31,15 @@ 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";
+import { SkillsTab } from "./project/SkillsTab";
 
 type NavKey =
   | "" | "chat" | "config" | "telegram"
-  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "logs" | "memories" | "artifacts";
+  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "logs" | "memories" | "artifacts"
+  | "structure" | "docs" | "files" | "skills";
 
 export function ProjectScreen() {
   const navigate = useNavigate();
@@ -70,6 +76,7 @@ export function ProjectScreen() {
           items: [
             { key: "agents",   label: t("project.nav.agents"),   icon: Bot },
             { key: "memories", label: t("project.nav.memories"), icon: Brain },
+            { key: "skills",   label: t("skills_page.title"),    icon: Sparkles },
             { key: "routines",  label: t("project.nav.routines"),  icon: Heart },
             { key: "mcps",      label: t("project.nav.mcps"),      icon: Puzzle },
             { key: "vars",      label: t("project.nav.vars"),      icon: KeyRound },
@@ -79,6 +86,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,7 +97,16 @@ 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 },
+          { key: "skills",   label: t("skills_page.title"),     icon: Sparkles },
+        ],
+      },
+      {
+        title: t("project.sections.content"),
+        items: [
+          { key: "docs",  label: t("project.nav.docs"),  icon: FileText },
+          { key: "files", label: t("project.nav.files"), icon: FolderTree },
         ],
       },
       {
@@ -108,7 +127,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,7 +174,11 @@ 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="skills"       element={<SkillsTab pid={pid} />} />
         <Route path="routines"     element={<RoutinesTab pid={pid} />} />
         <Route path="tasks"        element={isBase ? <GlobalTasksTab /> : <TasksTab pid={pid} />} />
         <Route path="mcps"         element={<McpsTab pid={pid} />} />

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

@@ -8,7 +8,7 @@ import { TabLayout } from "../components/common/TabLayout";
 import { IdentityPanel } from "../components/settings/IdentityPanel";
 import { SuperAgentPanel } from "../components/settings/SuperAgentPanel";
 import { MemoryPanel } from "../components/settings/MemoryPanel";
-import { SkillsInspectorPanel } from "../components/settings/SkillsInspectorPanel";
+import { SkillsSettings } from "../components/settings/SkillsSettings";
 import { ModelsTab } from "./base/ModelsTab";
 import { TelegramSettingsTabs } from "../components/settings/TelegramSettingsTabs";
 import { DevicesPanel } from "../components/settings/DevicesPanel";
@@ -37,7 +37,7 @@ const SECTIONS: TabSection[] = [
       { key: "super_agent", label: t("settings.tabs.super_agent"), icon: Bot },
       { key: "engines",     label: t("settings.tabs.engines"),     icon: Cpu },
       { key: "memory",      label: "Memory (RAG)",                 icon: Database },
-      { key: "skills",      label: "Skills (RAG)",                 icon: Sparkles },
+      { key: "skills",      label: t("skills_page.title"),         icon: Sparkles },
     ],
   },
   {
@@ -75,7 +75,7 @@ const PANELS: Record<TabKey, () => ReactElement> = {
   super_agent: () => <SuperAgentPanel />,
   engines:     () => <ModelsTab />,
   memory:      () => <MemoryPanel />,
-  skills:      () => <SkillsInspectorPanel />,
+  skills:      () => <SkillsSettings />,
   telegram:    () => <TelegramSettingsTabs />,
   devices:     () => <DevicesPanel />,
   voice:       () => <VoiceScreen />,

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>
   );
 }