@agentprojectcontext/apx 1.59.0 → 1.60.1

package/src/interfaces/web/src/components/integrations/AsanaPlugin.tsx

@@ -0,0 +1,275 @@
+import { useState } from "react";
+import useSWR from "swr";
+import {
+  AlertCircle, CheckCircle2, ChevronDown, ExternalLink, Eye, EyeOff, Loader2, WifiOff, X,
+} from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Integrations, type IntegrationScope, type IntegrationStatus } from "../../lib/api";
+import { PluginCard } from "./PluginCard";
+import { PluginToolsSection, type PluginTool } from "./PluginToolsSection";
+
+function AsanaLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18.833 9.637a4.167 4.167 0 1 1 0 8.333 4.167 4.167 0 0 1 0-8.333zm-13.666 0a4.167 4.167 0 1 1 0 8.333 4.167 4.167 0 0 1 0-8.333zM12 2a4.167 4.167 0 1 1 0 8.333A4.167 4.167 0 0 1 12 2z" />
+    </svg>
+  );
+}
+
+const ASANA_TOOLS: PluginTool[] = [
+  { slug: "asana_list_projects", desc: "Listar proyectos del workspace" },
+  { slug: "asana_list_tasks", desc: "Listar tareas de un proyecto" },
+  { slug: "asana_create_task", desc: "Crear una tarea" },
+  { slug: "asana_update_task", desc: "Actualizar estado o campos de una tarea" },
+];
+
+const HELP_STEPS = [
+  "Abrí app.asana.com/0/my-apps en el navegador.",
+  'Bajá hasta la sección "Personal access tokens" (no tus apps OAuth).',
+  'Hacé clic en "+ New access token".',
+  "Dale un nombre y confirmá.",
+  'Copiá el token completo — empieza con "1/..." y tiene un ":" en el medio.',
+  "Pegalo en el campo de abajo.",
+];
+
+type Step = "idle" | "saving" | "validating" | "done";
+
+export function AsanaPlugin({ pid, scope }: { pid: string; scope: IntegrationScope }) {
+  const [expanded, setExpanded] = useState(false);
+  const [pat, setPat] = useState("");
+  const [showPat, setShowPat] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  const [step, setStep] = useState<Step>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [workspaces, setWorkspaces] = useState<{ gid: string; name: string }[]>([]);
+  const [selectedWorkspace, setSelectedWorkspace] = useState("");
+
+  const key = `asana-status-${pid}-${scope}`;
+  const { data: status, mutate, isLoading } = useSWR<IntegrationStatus>(
+    key,
+    () => Integrations.status(pid, "asana", scope),
+    { shouldRetryOnError: false },
+  );
+
+  const isActive = status?.status === "active" && status.is_enabled;
+  const busy = step === "saving" || step === "validating";
+
+  async function handleConnect() {
+    if (!pat.trim()) return;
+    setStep("saving");
+    setError(null);
+    try {
+      await Integrations.asanaConfigure(pid, scope, { personalAccessToken: pat.trim() });
+      setStep("validating");
+      const result = await Integrations.asanaValidate(pid, scope);
+      await mutate();
+      if (!result.workspace_gid) {
+        const ws = await Integrations.asanaWorkspaces(pid, scope);
+        if (ws.workspaces.length > 1) setWorkspaces(ws.workspaces);
+      }
+      setStep("done");
+      setPat("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Error al conectar con Asana");
+      setStep("idle");
+    }
+  }
+
+  async function handleSelectWorkspace() {
+    if (!selectedWorkspace) return;
+    setStep("saving");
+    setError(null);
+    try {
+      await Integrations.asanaConfigure(pid, scope, { workspaceGid: selectedWorkspace });
+      await Integrations.asanaValidate(pid, scope);
+      await mutate();
+      setWorkspaces([]);
+      setStep("done");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Error al seleccionar workspace");
+      setStep("idle");
+    }
+  }
+
+  async function handleDeactivate() {
+    setError(null);
+    try {
+      await Integrations.deactivate(pid, "asana", scope);
+      await mutate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Error al desactivar");
+    }
+  }
+
+  return (
+    <PluginCard
+      icon={
+        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl border border-rose-500/30 bg-gradient-to-br from-rose-500/20 to-pink-500/20">
+          <AsanaLogo className="h-6 w-6 text-rose-400" />
+        </div>
+      }
+      title="Asana"
+      description="Conectá tu workspace de Asana para que los agentes creen, actualicen y consulten tareas"
+      hasTools
+      badges={
+        <span
+          className={cn(
+            "flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px]",
+            isActive
+              ? "border-emerald-700 bg-emerald-900/20 text-emerald-400"
+              : "border-border bg-muted text-muted-foreground",
+          )}
+        >
+          <span className={cn("h-1.5 w-1.5 rounded-full", isActive ? "bg-emerald-400" : "bg-muted-foreground")} />
+          {isLoading ? "..." : isActive ? "Activo" : status?.status === "error" ? "Error" : "No configurado"}
+        </span>
+      }
+      rightContent={
+        isActive && status?.workspace_name ? (
+          <span className="max-w-[120px] truncate font-mono text-[10px] text-muted-foreground">
+            {status.workspace_name}
+          </span>
+        ) : null
+      }
+      expanded={expanded}
+      onToggle={() => setExpanded((v) => !v)}
+    >
+      <div className="space-y-4 p-4">
+        {error && (
+          <div className="flex items-center gap-2 rounded-lg border border-red-700/30 bg-red-900/20 px-3 py-2.5 text-xs text-red-300">
+            <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />
+            <span className="flex-1">{error}</span>
+            <button onClick={() => setError(null)}><X className="h-3.5 w-3.5" /></button>
+          </div>
+        )}
+
+        {isActive && (
+          <div className="space-y-1 rounded-xl border border-emerald-700/30 bg-emerald-900/10 p-3">
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
+              <span className="text-xs font-medium text-emerald-300">Conectado como {status?.user_name}</span>
+            </div>
+            {status?.user_email && <p className="pl-5 text-[10px] text-muted-foreground">{status.user_email}</p>}
+            {status?.workspace_name && (
+              <p className="pl-5 text-[10px] text-muted-foreground">Workspace: {status.workspace_name}</p>
+            )}
+          </div>
+        )}
+
+        {workspaces.length > 1 && (
+          <div className="space-y-2">
+            <p className="text-[11px] text-muted-foreground">Seleccioná el workspace a usar:</p>
+            <div className="flex gap-2">
+              <select
+                value={selectedWorkspace}
+                onChange={(e) => setSelectedWorkspace(e.target.value)}
+                className="flex-1 rounded-lg border border-border bg-background px-2 py-1.5 text-xs outline-none focus:border-rose-500/50"
+              >
+                <option value="">Seleccionar workspace...</option>
+                {workspaces.map((ws) => (
+                  <option key={ws.gid} value={ws.gid}>{ws.name}</option>
+                ))}
+              </select>
+              <button
+                onClick={handleSelectWorkspace}
+                disabled={!selectedWorkspace || busy}
+                className="rounded-lg border border-rose-700/50 px-3 py-1.5 text-xs text-rose-400 transition-all hover:bg-rose-900/20 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : "Confirmar"}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {(!isActive || step === "idle") && workspaces.length === 0 && (
+          <div className="space-y-3">
+            <p className="mb-1 text-xs font-semibold text-foreground">Credenciales Asana</p>
+
+            <div className="overflow-hidden rounded-lg border border-border">
+              <button
+                type="button"
+                onClick={() => setShowHelp((v) => !v)}
+                className="flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-muted/40"
+              >
+                <span className="text-[11px] text-muted-foreground">
+                  ¿Cómo obtener el token? ·{" "}
+                  <a
+                    href="https://app.asana.com/0/my-apps"
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="inline-flex items-center gap-0.5 text-rose-400 hover:underline"
+                  >
+                    app.asana.com/0/my-apps <ExternalLink className="h-2.5 w-2.5" />
+                  </a>
+                </span>
+                <ChevronDown className={cn("h-3.5 w-3.5 flex-shrink-0 text-muted-foreground transition-transform", showHelp && "rotate-180")} />
+              </button>
+              {showHelp && (
+                <div className="space-y-1.5 border-t border-border px-3 pb-3 pt-2.5">
+                  {HELP_STEPS.map((s, i) => (
+                    <div key={i} className="flex items-start gap-2">
+                      <span className="mt-0.5 flex-shrink-0 font-mono text-[10px] text-rose-400/70">{i + 1}.</span>
+                      <p className="text-[11px] text-muted-foreground">{s}</p>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label className="mb-1 block text-[10px] text-muted-foreground">Personal Access Token</label>
+              <div className="relative">
+                <input
+                  type={showPat ? "text" : "password"}
+                  placeholder="1/1234567890abcdef:..."
+                  value={pat}
+                  onChange={(e) => setPat(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && handleConnect()}
+                  className="w-full rounded-lg border border-border bg-background px-3 py-2 pr-14 font-mono text-xs outline-none placeholder:text-muted-foreground/60 focus:border-rose-500/50"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPat((v) => !v)}
+                  className="absolute right-2.5 top-1/2 flex -translate-y-1/2 items-center gap-0.5 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  {showPat ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                  {showPat ? "Ocultar" : "Ver"}
+                </button>
+              </div>
+            </div>
+
+            {step === "validating" && (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" /> Verificando token con Asana...
+              </div>
+            )}
+
+            <button
+              onClick={handleConnect}
+              disabled={!pat.trim() || busy}
+              className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-rose-700/50 px-3 py-2 text-xs text-rose-400 transition-all hover:bg-rose-900/20 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {busy ? (
+                <><Loader2 className="h-3.5 w-3.5 animate-spin" />{step === "saving" ? "Guardando..." : "Validando..."}</>
+              ) : isActive ? "Reconectar" : "Conectar"}
+            </button>
+          </div>
+        )}
+
+        <PluginToolsSection pid={pid} tools={ASANA_TOOLS} isActive={!!isActive} />
+
+        {isActive && (
+          <div className="flex justify-end border-t border-border pt-2">
+            <button
+              onClick={handleDeactivate}
+              className="flex items-center gap-1.5 rounded-lg border border-red-700/50 px-3 py-1.5 text-xs text-red-400 transition-all hover:bg-red-900/20"
+            >
+              <WifiOff className="h-3.5 w-3.5" /> Desactivar
+            </button>
+          </div>
+        )}
+      </div>
+    </PluginCard>
+  );
+}

package/src/interfaces/web/src/components/integrations/ComingSoonPlugin.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Github, MessageCircle, Mic, Puzzle } from "lucide-react";
+import type { CatalogEntry } from "../../lib/api";
+import { PluginCard } from "./PluginCard";
+
+const ICONS: Record<string, { icon: typeof Puzzle; className: string; wrap: string }> = {
+  github: { icon: Github, className: "text-slate-200", wrap: "border-slate-500/30 from-slate-500/20 to-slate-700/20" },
+  whatsapp: { icon: MessageCircle, className: "text-[#25D366]", wrap: "border-[#25D366]/30 from-[#25D366]/20 to-[#128C7E]/20" },
+  "local-transcription": { icon: Mic, className: "text-orange-400", wrap: "border-orange-500/30 from-orange-500/20 to-amber-500/20" },
+};
+
+// Placeholder card for catalog plugins that are declared but not yet wired to a
+// live service module (github/whatsapp/transcription). Keeps the Integrations
+// page complete and makes it obvious what's on the roster.
+export function ComingSoonPlugin({ entry }: { entry: CatalogEntry }) {
+  const [expanded, setExpanded] = useState(false);
+  const cfg = ICONS[entry.slug] || { icon: Puzzle, className: "text-muted-foreground", wrap: "border-border from-muted to-muted" };
+  const Icon = cfg.icon;
+
+  return (
+    <PluginCard
+      icon={
+        <div className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl border bg-gradient-to-br ${cfg.wrap}`}>
+          <Icon className={`h-6 w-6 ${cfg.className}`} />
+        </div>
+      }
+      title={entry.name}
+      description={entry.description}
+      badges={
+        <span className="rounded-full border border-border bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+          Próximamente
+        </span>
+      }
+      expanded={expanded}
+      onToggle={() => setExpanded((v) => !v)}
+    >
+      <div className="p-4 text-xs text-muted-foreground">
+        Este plugin está declarado en el catálogo pero todavía no está conectable en APX. La
+        infraestructura de <span className="font-mono">{entry.slug}</span> se va a portar de forma
+        nativa en una próxima iteración.
+      </div>
+    </PluginCard>
+  );
+}

package/src/interfaces/web/src/components/integrations/PluginCard.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import { ChevronRight, Wrench } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Tip } from "../ui";
+
+// Collapsible card shell for one integration plugin. Ported from PandaProject's
+// PluginCard but restyled onto APX's design tokens (border/card/muted).
+export function PluginCard({
+  icon,
+  title,
+  description,
+  badges,
+  rightContent,
+  hasTools,
+  expanded,
+  onToggle,
+  children,
+}: {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  badges?: ReactNode;
+  rightContent?: ReactNode;
+  hasTools?: boolean;
+  expanded: boolean;
+  onToggle: () => void;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-border bg-card">
+      <button
+        type="button"
+        className="flex w-full items-center gap-4 p-4 text-left transition-colors hover:bg-muted/40"
+        onClick={onToggle}
+      >
+        {icon}
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <p className="text-sm font-semibold text-foreground">{title}</p>
+            {badges}
+            {hasTools && (
+              <Tip content="Esta integración expone tools para los agentes">
+                <span>
+                  <Wrench className="h-3 w-3 text-muted-foreground" />
+                </span>
+              </Tip>
+            )}
+          </div>
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">{description}</p>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-2">
+          {rightContent}
+          <ChevronRight
+            className={cn("h-4 w-4 text-muted-foreground transition-transform", expanded && "rotate-90")}
+          />
+        </div>
+      </button>
+      {expanded && children && <div className="border-t border-border">{children}</div>}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/integrations/PluginToolsSection.tsx

@@ -0,0 +1,39 @@
+import { Wrench } from "lucide-react";
+
+export interface PluginTool {
+  slug: string;
+  desc: string;
+}
+
+// Lists the agent tools a connected plugin exposes. Read-only: the tools are
+// registered in APX's tool registry (category "integrations") and become
+// callable for any agent whose role gate allows them, or via discover_tools().
+export function PluginToolsSection({ tools, isActive }: { pid: string; tools: PluginTool[]; isActive: boolean }) {
+  if (!isActive) return null;
+
+  return (
+    <div className="space-y-2.5 rounded-xl border border-border bg-muted/30 p-3">
+      <div className="flex items-center justify-between">
+        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+          Tools para agentes
+        </p>
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        {tools.map((t) => (
+          <div
+            key={t.slug}
+            className="flex items-center gap-1.5 rounded-lg border border-border bg-background px-2 py-1"
+          >
+            <Wrench className="h-2.5 w-2.5 flex-shrink-0 text-muted-foreground" />
+            <span className="font-mono text-[10px] text-foreground">{t.slug}</span>
+            <span className="text-[10px] text-muted-foreground/60">·</span>
+            <span className="text-[10px] text-muted-foreground">{t.desc}</span>
+          </div>
+        ))}
+      </div>
+      <p className="text-[10px] text-muted-foreground/70">
+        Disponibles para los agentes que las tengan permitidas, o vía <span className="font-mono">discover_tools</span>.
+      </p>
+    </div>
+  );
+}

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.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,7 +3,7 @@ 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,
+  LayoutDashboard, Boxes, Cpu, ScrollText, History, Brain, FileCode2, Cable,
   Building2, FileText, FolderTree, Sparkles,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
@@ -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";
@@ -38,7 +39,7 @@ import { SkillsTab } from "./project/SkillsTab";
 
 type NavKey =
   | "" | "chat" | "config" | "telegram"
-  | "agents" | "routines" | "tasks" | "mcps" | "vars" | "logs" | "memories" | "artifacts"
+  | "agents" | "routines" | "tasks" | "mcps" | "integrations" | "vars" | "logs" | "memories" | "artifacts"
   | "structure" | "docs" | "files" | "skills";
 
 export function ProjectScreen() {
@@ -79,6 +80,7 @@ export function ProjectScreen() {
             { 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 },
@@ -115,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 },
@@ -182,6 +185,7 @@ export function ProjectScreen() {
         <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 />} />