@agentprojectcontext/apx 1.58.0 → 1.60.0

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

@@ -0,0 +1,106 @@
+import { http } from "../http";
+
+// Where an integration record is stored. "global" targets the default project's
+// store (shared across projects); "project" targets the current project. A
+// project uses its own record when present, otherwise the global one.
+export type IntegrationScope = "project" | "global";
+
+// Status returned by a plugin's status endpoint. Common fields plus
+// plugin-specific extras (Asana adds user/workspace metadata).
+export interface IntegrationStatus {
+  slug: string;
+  status: string;
+  is_enabled: boolean;
+  user_name?: string | null;
+  user_email?: string | null;
+  workspace_gid?: string | null;
+  workspace_name?: string | null;
+}
+
+export interface PluginTool {
+  slug: string;
+  desc: string;
+}
+
+// One entry of the plugin catalog with its resolved status for this project.
+export interface CatalogEntry {
+  slug: string;
+  name: string;
+  type: string;
+  description: string;
+  auth: string;
+  tools?: PluginTool[];
+  coming_soon: boolean;
+  status: IntegrationStatus;
+  resolved_scope: IntegrationScope | null;
+}
+
+// A stored integration record (secrets redacted; `<key>_set` booleans instead).
+export interface IntegrationRecord {
+  slug: string;
+  name: string;
+  type: string;
+  description: string;
+  source: string;
+  status: string;
+  is_enabled: boolean;
+  config: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AsanaConfigureBody {
+  personalAccessToken?: string;
+  workspaceGid?: string;
+}
+
+export interface AsanaValidateResult {
+  ok: boolean;
+  user_name?: string | null;
+  user_email?: string | null;
+  workspace_gid?: string | null;
+  workspace_name?: string | null;
+  error?: string;
+}
+
+export interface AsanaWorkspaces {
+  workspaces: { gid: string; name: string }[];
+}
+
+const q = (scope: IntegrationScope) => `?scope=${scope}`;
+
+export const Integrations = {
+  catalog: (pid: string) =>
+    http.get<CatalogEntry[]>(`/projects/${pid}/integrations/catalog`),
+
+  list: (pid: string, scope: IntegrationScope = "project") =>
+    http.get<IntegrationRecord[]>(`/projects/${pid}/integrations${q(scope)}`),
+
+  status: (pid: string, slug: string, scope: IntegrationScope = "project") =>
+    http.get<IntegrationStatus>(`/projects/${pid}/integrations/${slug}${q(scope)}`),
+
+  configure: (pid: string, slug: string, scope: IntegrationScope, body: Record<string, unknown>) =>
+    http.post<IntegrationRecord>(`/projects/${pid}/integrations/${slug}/configure${q(scope)}`, body),
+
+  validate: (pid: string, slug: string, scope: IntegrationScope = "project") =>
+    http.post<AsanaValidateResult>(`/projects/${pid}/integrations/${slug}/validate${q(scope)}`, {}),
+
+  deactivate: (pid: string, slug: string, scope: IntegrationScope = "project") =>
+    http.post<IntegrationStatus>(`/projects/${pid}/integrations/${slug}/deactivate${q(scope)}`, {}),
+
+  action: <T>(pid: string, slug: string, action: string, scope: IntegrationScope = "project") =>
+    http.post<T>(`/projects/${pid}/integrations/${slug}/action/${action}${q(scope)}`, {}),
+
+  remove: (pid: string, slug: string, scope: IntegrationScope = "project") =>
+    http.del<void>(`/projects/${pid}/integrations/${slug}${q(scope)}`),
+
+  // ── Asana convenience wrappers ──────────────────────────────────────────────
+  asanaConfigure: (pid: string, scope: IntegrationScope, body: AsanaConfigureBody) =>
+    Integrations.configure(pid, "asana", scope, {
+      personal_access_token: body.personalAccessToken,
+      workspace_gid: body.workspaceGid,
+    }),
+  asanaValidate: (pid: string, scope: IntegrationScope) => Integrations.validate(pid, "asana", scope),
+  asanaWorkspaces: (pid: string, scope: IntegrationScope) =>
+    Integrations.action<AsanaWorkspaces>(pid, "asana", "workspaces", scope),
+};

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

@@ -9,6 +9,7 @@ export * from "./api/conversations";
 export * from "./api/routines";
 export * from "./api/tasks";
 export * from "./api/mcps";
+export * from "./api/integrations";
 export * from "./api/vars";
 export * from "./api/messages";
 export * from "./api/sessions";

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

@@ -3,8 +3,8 @@ import { useParams, Routes, Route, Navigate, useLocation, useNavigate } from "re
 import {
   Bot, Heart, Zap, Puzzle, FolderKanban, Settings,
   MessagesSquare, Send, KeyRound,
-  LayoutDashboard, Boxes, Cpu, ScrollText, History, Brain, FileCode2,
-  Building2, FileText, FolderTree,
+  LayoutDashboard, Boxes, Cpu, ScrollText, History, Brain, FileCode2, Cable,
+  Building2, FileText, FolderTree, Sparkles,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -25,6 +25,7 @@ import { AgentsTab } from "./project/AgentsTab";
 import { RoutinesTab } from "./project/RoutinesTab";
 import { TasksTab } from "./project/TasksTab";
 import { McpsTab } from "./project/McpsTab";
+import { IntegrationsTab } from "./project/IntegrationsTab";
 import { VarsTab } from "./project/VarsTab";
 import { ChatTab } from "./project/ChatTab";
 import { TelegramTab } from "./project/TelegramTab";
@@ -34,11 +35,12 @@ 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"
-  | "structure" | "docs" | "files";
+  | "agents" | "routines" | "tasks" | "mcps" | "integrations" | "vars" | "logs" | "memories" | "artifacts"
+  | "structure" | "docs" | "files" | "skills";
 
 export function ProjectScreen() {
   const navigate = useNavigate();
@@ -75,8 +77,10 @@ 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: "integrations", label: "Integrations",          icon: Cable },
             { key: "vars",      label: t("project.nav.vars"),      icon: KeyRound },
             { key: "artifacts", label: t("project.nav.artifacts"), icon: FileCode2 },
             { key: "config",    label: t("project.nav.config"),    icon: Settings },
@@ -97,6 +101,7 @@ export function ProjectScreen() {
           { 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 },
         ],
       },
       {
@@ -112,6 +117,7 @@ export function ProjectScreen() {
           { key: "routines",  label: t("project.nav.routines"),  icon: Heart },
           { key: "tasks",     label: t("project.nav.tasks"),     icon: Zap },
           { key: "mcps",      label: t("project.nav.mcps"),      icon: Puzzle },
+          { key: "integrations", label: "Integrations",          icon: Cable },
           { key: "vars",      label: t("project.nav.vars"),      icon: KeyRound },
           { key: "artifacts", label: t("project.nav.artifacts"), icon: FileCode2 },
           { key: "logs",      label: t("project.nav.logs"),      icon: ScrollText },
@@ -175,9 +181,11 @@ export function ProjectScreen() {
         <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} />} />
+        <Route path="integrations" element={<IntegrationsTab pid={pid} />} />
         <Route path="artifacts"    element={<ArtifactsTab pid={pid} />} />
         <Route path="vars"         element={<VarsTab pid={pid} />} />
         <Route path="threads"      element={<Navigate to={`/p/${pid}/chat`} replace />} />

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/IntegrationsTab.tsx

@@ -0,0 +1,146 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Network, Puzzle, Wrench } from "lucide-react";
+import { Integrations, type CatalogEntry, type IntegrationScope } from "../../lib/api";
+import { cn } from "../../lib/cn";
+import { Section } from "../../components/Section";
+import { Empty, Loading } from "../../components/ui";
+import { AsanaPlugin } from "../../components/integrations/AsanaPlugin";
+import { ComingSoonPlugin } from "../../components/integrations/ComingSoonPlugin";
+import { McpsTab } from "./McpsTab";
+
+type SubTab = "plugins" | "mcp" | "tools";
+
+const SUBTABS: { value: SubTab; label: string; icon: typeof Puzzle }[] = [
+  { value: "plugins", label: "Plugins", icon: Puzzle },
+  { value: "mcp", label: "MCP Servers", icon: Network },
+  { value: "tools", label: "Tools", icon: Wrench },
+];
+
+// Renders the live plugin (Asana) or a coming-soon placeholder per catalog entry.
+function PluginRow({ pid, scope, entry }: { pid: string; scope: IntegrationScope; entry: CatalogEntry }) {
+  if (entry.coming_soon) return <ComingSoonPlugin entry={entry} />;
+  if (entry.slug === "asana") return <AsanaPlugin pid={pid} scope={scope} />;
+  // Implemented plugin without a bespoke UI yet — fall back to the placeholder.
+  return <ComingSoonPlugin entry={entry} />;
+}
+
+function PluginsSection({ pid, scope }: { pid: string; scope: IntegrationScope }) {
+  const { data: catalog, isLoading } = useSWR(`integrations-catalog-${pid}`, () => Integrations.catalog(pid));
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">
+        Plugins de canal y servicio instalables por proyecto. Se guardan en el ámbito
+        seleccionado arriba.
+      </p>
+      {isLoading && <Loading />}
+      {(catalog || []).map((entry) => (
+        <PluginRow key={entry.slug} pid={pid} scope={scope} entry={entry} />
+      ))}
+      <div className="rounded-xl border border-dashed border-border p-6 text-center">
+        <p className="text-sm text-muted-foreground">Más plugins próximamente…</p>
+      </div>
+    </div>
+  );
+}
+
+function ToolsSection({ pid }: { pid: string }) {
+  const { data: catalog } = useSWR(`integrations-catalog-${pid}`, () => Integrations.catalog(pid));
+  const rows = (catalog || [])
+    .filter((c) => !c.coming_soon && (c.tools?.length ?? 0) > 0)
+    .flatMap((c) => (c.tools || []).map((t) => ({ ...t, plugin: c.name, active: c.status.is_enabled })));
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">
+        Tools que los plugins conectados exponen a los agentes de este proyecto.
+      </p>
+      {rows.length === 0 ? (
+        <Empty>No hay tools de integraciones. Conectá un plugin para habilitarlas.</Empty>
+      ) : (
+        <ul className="space-y-2">
+          {rows.map((t) => (
+            <li key={t.slug} className={cn("rounded-md border border-border bg-muted/30 px-3 py-2", !t.active && "opacity-55")}>
+              <div className="flex items-center gap-2">
+                <Wrench className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="font-mono text-xs text-foreground">{t.slug}</span>
+                <span className="ml-auto text-[10px] text-muted-foreground">{t.plugin}</span>
+                <span
+                  className={cn(
+                    "rounded border px-1.5 py-0.5 text-[10px]",
+                    t.active
+                      ? "border-emerald-700/40 bg-emerald-900/20 text-emerald-400"
+                      : "border-border bg-muted text-muted-foreground",
+                  )}
+                >
+                  {t.active ? "activo" : "inactivo"}
+                </span>
+              </div>
+              <p className="mt-0.5 pl-5 text-[10px] text-muted-foreground">{t.desc}</p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export function IntegrationsTab({ pid }: { pid: string }) {
+  const isBase = String(pid) === "0";
+  const [tab, setTab] = useState<SubTab>("plugins");
+  // On the base project, project scope IS the global (default) store.
+  const [scope, setScope] = useState<IntegrationScope>(isBase ? "global" : "project");
+
+  return (
+    <Section
+      title="Integrations"
+      description="Plugins, MCP servers y tools disponibles para este proyecto"
+    >
+      {/* Scope selector — a real project can use its own integrations or the
+          global (default-project) ones. */}
+      {!isBase && (
+        <div className="mb-4 flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">Ámbito:</span>
+          {(["project", "global"] as const).map((s) => (
+            <button
+              key={s}
+              onClick={() => setScope(s)}
+              className={cn(
+                "rounded-md border px-2.5 py-1 text-xs transition-colors",
+                scope === s
+                  ? "border-primary/50 bg-primary/10 text-foreground"
+                  : "border-border bg-muted/30 text-muted-foreground hover:bg-muted/50",
+              )}
+            >
+              {s === "project" ? "Este proyecto" : "Global (default)"}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Sub-tabs */}
+      <div className="mb-4 inline-flex rounded-lg border border-border bg-muted/30 p-0.5">
+        {SUBTABS.map((s) => {
+          const Icon = s.icon;
+          return (
+            <button
+              key={s.value}
+              onClick={() => setTab(s.value)}
+              className={cn(
+                "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs transition-colors",
+                tab === s.value ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="h-3.5 w-3.5" /> {s.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {tab === "plugins" && <PluginsSection pid={pid} scope={scope} />}
+      {tab === "mcp" && <McpsTab pid={pid} />}
+      {tab === "tools" && <ToolsSection pid={pid} />}
+    </Section>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { useProject } from "../../hooks/useProjects";
+import { Loading } from "../../components/ui";
+import { SkillsManager } from "../../components/settings/SkillsManager";
+
+// Per-project skills view: the Claude-Desktop-style manager locked to THIS
+// project's scope so you can enable/disable and add skills while working in it.
+// The base project (pid "0" = super-agent admin) manages the "default" scope.
+export function SkillsTab({ pid }: { pid: string }) {
+  const { project } = useProject(pid);
+  const scope = pid === "0" ? "default" : project?.path;
+  if (!scope) return <Loading />;
+  return <SkillsManager scope={scope} />;
+}