@agentprojectcontext/apx 1.60.1 → 1.62.0

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

@@ -1,28 +1,27 @@
 import { useState } from "react";
 import useSWR from "swr";
-import { Network, Puzzle, Wrench } from "lucide-react";
+import { 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 { PluginConnect } from "../../components/integrations/PluginConnect";
 import { ComingSoonPlugin } from "../../components/integrations/ComingSoonPlugin";
-import { McpsTab } from "./McpsTab";
+import { t } from "../../i18n";
 
-type SubTab = "plugins" | "mcp" | "tools";
+type SubTab = "plugins" | "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 },
+const SUBTABS: { value: SubTab; labelKey: "integrations.tab_plugins" | "integrations.tab_tools"; icon: typeof Puzzle }[] = [
+  { value: "plugins", labelKey: "integrations.tab_plugins", icon: Puzzle },
+  { value: "tools", labelKey: "integrations.tab_tools", icon: Wrench },
 ];
 
-// Renders the live plugin (Asana) or a coming-soon placeholder per catalog entry.
+// Renders a connectable plugin (via the generic PluginConnect, driven by its
+// `ui` descriptor) or a coming-soon placeholder. MCP servers are NOT shown here
+// — they have their own top-level "MCPs" nav item.
 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} />;
+  if (entry.coming_soon || !entry.ui) return <ComingSoonPlugin entry={entry} />;
+  return <PluginConnect pid={pid} scope={scope} entry={entry} />;
 }
 
 function PluginsSection({ pid, scope }: { pid: string; scope: IntegrationScope }) {
@@ -30,16 +29,13 @@ function PluginsSection({ pid, scope }: { pid: string; scope: IntegrationScope }
 
   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>
+      <p className="text-xs text-muted-foreground">{t("integrations.plugins_hint")}</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>
+        <p className="text-sm text-muted-foreground">{t("integrations.more_soon")}</p>
       </div>
     </div>
   );
@@ -49,35 +45,33 @@ 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 })));
+    .flatMap((c) => (c.tools || []).map((tool) => ({ ...tool, 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>
+      <p className="text-xs text-muted-foreground">{t("integrations.tools_hint")}</p>
       {rows.length === 0 ? (
-        <Empty>No hay tools de integraciones. Conectá un plugin para habilitarlas.</Empty>
+        <Empty>{t("integrations.tools_empty")}</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")}>
+          {rows.map((tool) => (
+            <li key={tool.slug} className={cn("rounded-md border border-border bg-muted/30 px-3 py-2", !tool.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="font-mono text-xs text-foreground">{tool.slug}</span>
+                <span className="ml-auto text-[10px] text-muted-foreground">{tool.plugin}</span>
                 <span
                   className={cn(
                     "rounded border px-1.5 py-0.5 text-[10px]",
-                    t.active
+                    tool.active
                       ? "border-emerald-700/40 bg-emerald-900/20 text-emerald-400"
                       : "border-border bg-muted text-muted-foreground",
                   )}
                 >
-                  {t.active ? "activo" : "inactivo"}
+                  {tool.active ? t("integrations.tool_active") : t("integrations.tool_inactive")}
                 </span>
               </div>
-              <p className="mt-0.5 pl-5 text-[10px] text-muted-foreground">{t.desc}</p>
+              <p className="mt-0.5 pl-5 text-[10px] text-muted-foreground">{tool.desc}</p>
             </li>
           ))}
         </ul>
@@ -93,15 +87,12 @@ export function IntegrationsTab({ pid }: { pid: string }) {
   const [scope, setScope] = useState<IntegrationScope>(isBase ? "global" : "project");
 
   return (
-    <Section
-      title="Integrations"
-      description="Plugins, MCP servers y tools disponibles para este proyecto"
-    >
+    <Section title={t("integrations.title")} description={t("integrations.description")}>
       {/* 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>
+          <span className="text-xs text-muted-foreground">{t("integrations.scope_label")}</span>
           {(["project", "global"] as const).map((s) => (
             <button
               key={s}
@@ -113,7 +104,7 @@ export function IntegrationsTab({ pid }: { pid: string }) {
                   : "border-border bg-muted/30 text-muted-foreground hover:bg-muted/50",
               )}
             >
-              {s === "project" ? "Este proyecto" : "Global (default)"}
+              {s === "project" ? t("integrations.scope_project") : t("integrations.scope_global")}
             </button>
           ))}
         </div>
@@ -132,14 +123,13 @@ export function IntegrationsTab({ pid }: { pid: string }) {
                 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}
+              <Icon className="h-3.5 w-3.5" /> {t(s.labelKey)}
             </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/McpsTab.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import {
-  CheckCircle2, FlaskConical, Pencil, Plus, ScrollText, Terminal, Trash2, X, XCircle,
+  ChevronDown, FlaskConical, Globe, Network, Pencil, Plus, ScrollText,
+  Terminal, Trash2, Wrench, X, XCircle,
 } from "lucide-react";
-import { Mcps, Vars, type McpAddBody, type McpScope, type McpTestResult, type McpLogsResult, type VarsList } from "../../lib/api";
+import { Mcps, Vars, type McpAddBody, type McpScope, type McpLogsResult, type VarsList } from "../../lib/api";
 import type { McpEntry } from "../../types/daemon";
+import { cn } from "../../lib/cn";
 import { Section } from "../../components/Section";
 import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch } from "../../components/ui";
 import { Tip } from "../../components/ui/tip";
@@ -19,6 +21,31 @@ type DialogMode =
   | { kind: "new" }
   | { kind: "edit"; entry: McpEntry };
 
+// Per-row live test state: mirrors PandaProject's MCP cards — a colored dot +
+// tool count come from the last on-demand test (tools/list) of each server.
+type McpResult = { busy?: boolean; ok?: boolean; error?: string; tools?: { name: string; description: string }[] };
+
+// Short one-liner describing how a server connects (http url or stdio command),
+// shown under the name like Panda's config summary. Prefers an explicit
+// description in the raw config when present.
+function mcpSummary(m: McpEntry): string {
+  const raw = (m as unknown as { raw?: Record<string, unknown> }).raw || {};
+  if (typeof raw.description === "string" && raw.description.trim()) return raw.description.trim();
+  if (m.transport === "http" && m.url) return m.url.length > 64 ? m.url.slice(0, 61) + "…" : m.url;
+  const cmd = [m.command, ...(m.args || [])].filter(Boolean).join(" ");
+  if (cmd) return "$ " + (cmd.length > 64 ? cmd.slice(0, 61) + "…" : cmd);
+  return "";
+}
+
+// Colored status dot: red on a failed test, emerald when tested-ok or enabled,
+// muted when disabled, amber while testing.
+function dotClass(enabled: boolean, res?: McpResult): string {
+  if (res?.busy) return "bg-amber-400 animate-pulse";
+  if (res?.ok === false) return "bg-red-400";
+  if (res?.ok) return "bg-emerald-400";
+  return enabled ? "bg-emerald-500/70" : "bg-slate-500";
+}
+
 const SOURCE_TONE: Record<string, "info" | "muted" | "success"> = {
   apc: "info",
   runtime: "success",
@@ -51,7 +78,8 @@ export function McpsTab({ pid }: { pid: string }) {
   const vars = useSWR<VarsList>(`/projects/${pid}/vars`, () => Vars.list(pid));
   const [dialog, setDialog] = useState<DialogMode>(null);
   const [activeMcp, setActiveMcp] = useState<string | null>(null);
-  const [testFor, setTestFor] = useState<{ name: string; result?: McpTestResult; busy?: boolean } | null>(null);
+  const [results, setResults] = useState<Record<string, McpResult>>({});
+  const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>({});
 
   const varNames = useMemo(
     () => (vars.data ? Object.keys(vars.data.effective).sort() : []),
@@ -75,12 +103,13 @@ export function McpsTab({ pid }: { pid: string }) {
 
   const runTest = async (name: string) => {
     setActiveMcp(name);
-    setTestFor({ name, busy: true });
+    setResults((prev) => ({ ...prev, [name]: { busy: true } }));
+    setExpandedTools((prev) => ({ ...prev, [name]: true }));
     try {
       const result = await Mcps.test(pid, name);
-      setTestFor({ name, result });
+      setResults((prev) => ({ ...prev, [name]: { ok: result.ok, error: result.error, tools: result.tools } }));
     } catch (e: any) {
-      setTestFor({ name, result: { ok: false, error: e?.message || "error" } });
+      setResults((prev) => ({ ...prev, [name]: { ok: false, error: e?.message || "error" } }));
     }
   };
 
@@ -122,6 +151,12 @@ export function McpsTab({ pid }: { pid: string }) {
               const writable = m.source === "apc" || m.source === "runtime" || m.source === "global";
               const scopeForRemove: McpScope = sourceToScope(m.source);
               const isActive = activeMcp === m.name;
+              const enabled = m.enabled !== false;
+              const res = results[m.name];
+              const tools = res?.tools || [];
+              const open = !!expandedTools[m.name];
+              const summary = mcpSummary(m);
+              const Icon = m.transport === "http" ? Globe : Network;
               return (
                 <li
                   key={`${m.source}-${m.name}`}
@@ -132,45 +167,79 @@ export function McpsTab({ pid }: { pid: string }) {
                   onClick={() => setActiveMcp(m.name)}
                   role="button"
                 >
-                  <div className="flex flex-wrap items-center gap-3">
-                    <span className="font-medium">{m.name}</span>
-                    <Badge tone={SOURCE_TONE[m.source] ?? "muted"} >{sourceLabel(m.source)}</Badge>
-                    <span className="ml-auto text-xs text-muted-fg">
-                      {(m.transport || "stdio").toUpperCase()}
-                    </span>
-                    <div onClick={(e) => e.stopPropagation()}>
-                      <Switch
-                        checked={m.enabled !== false}
-                        onChange={() => toggleEnabled(m)}
-                        label=""
-                      />
+                  <div className="flex items-start gap-3">
+                    {/* Icon + colored status dot */}
+                    <div className="relative mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-border bg-background">
+                      <Icon size={16} className="text-muted-fg" />
+                      <span className={cn("absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-card", dotClass(enabled, res))} />
+                    </div>
+
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="font-medium">{m.name}</span>
+                        <Badge tone={SOURCE_TONE[m.source] ?? "muted"}>{sourceLabel(m.source)}</Badge>
+                        <span className="ml-auto text-xs text-muted-fg">{(m.transport || "stdio").toUpperCase()}</span>
+                        <div onClick={(e) => e.stopPropagation()}>
+                          <Switch checked={enabled} onChange={() => toggleEnabled(m)} label="" />
+                        </div>
+                        <Tip content={t("project.mcps.test_btn")}>
+                          <Button size="sm" variant="ghost" onClick={(e) => { e.stopPropagation(); runTest(m.name); }} aria-label={t("project.mcps.test_btn")}>
+                            {res?.busy ? <FlaskConical size={13} className="animate-pulse" /> : <FlaskConical size={13} />}
+                          </Button>
+                        </Tip>
+                        <Tip content={t("project.mcps.logs_btn")}>
+                          <Button size="sm" variant="ghost" onClick={(e) => { e.stopPropagation(); setActiveMcp(m.name); }} aria-label={t("project.mcps.logs_btn")}>
+                            <ScrollText size={13} />
+                          </Button>
+                        </Tip>
+                        {writable && (
+                          <Tip content={t("project.mcps.edit_btn")}>
+                            <Button size="sm" variant="ghost" onClick={(e) => { e.stopPropagation(); setDialog({ kind: "edit", entry: m }); }} aria-label={t("project.mcps.edit_btn")}>
+                              <Pencil size={13} />
+                            </Button>
+                          </Tip>
+                        )}
+                        {writable && (
+                          <Button size="sm" variant="destructive" onClick={(e) => { e.stopPropagation(); remove(m.name, scopeForRemove); }}>
+                            <Trash2 size={13} />
+                          </Button>
+                        )}
+                      </div>
+
+                      {summary && <p className="mt-0.5 truncate font-mono text-xs text-muted-fg">{summary}</p>}
+
+                      {res?.ok === false && res.error && (
+                        <p className="mt-1 flex items-start gap-1 text-xs text-red-400">
+                          <XCircle size={12} className="mt-0.5 flex-shrink-0" /> <span className="break-words">{res.error}</span>
+                        </p>
+                      )}
+
+                      {tools.length > 0 && (
+                        <div className="mt-1.5" onClick={(e) => e.stopPropagation()}>
+                          <button
+                            type="button"
+                            onClick={() => setExpandedTools((prev) => ({ ...prev, [m.name]: !prev[m.name] }))}
+                            className="flex items-center gap-1 text-xs text-muted-fg transition-colors hover:text-fg"
+                          >
+                            <Wrench size={12} /> {t("project.mcps.tools_count", { n: tools.length })}
+                            <ChevronDown size={12} className={cn("transition-transform", open && "rotate-180")} />
+                          </button>
+                          {open && (
+                            <div className="mt-1.5 flex flex-wrap gap-1.5">
+                              {tools.slice(0, 40).map((tool) => (
+                                <Tip key={tool.name} content={tool.description || "—"}>
+                                  <span className="inline-flex items-center gap-1 rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px] text-muted-fg">
+                                    <Terminal size={10} /> {tool.name}
+                                  </span>
+                                </Tip>
+                              ))}
+                              {tools.length > 40 && <span className="text-[10px] text-muted-fg">… +{tools.length - 40}</span>}
+                            </div>
+                          )}
+                        </div>
+                      )}
                     </div>
-                    <Tip content={t("project.mcps.test_btn")}>
-                      <Button size="sm" variant="ghost" onClick={(e) => { e.stopPropagation(); runTest(m.name); }} aria-label={t("project.mcps.test_btn")}>
-                        <FlaskConical size={13} />
-                      </Button>
-                    </Tip>
-                    <Tip content={t("project.mcps.logs_btn")}>
-                      <Button size="sm" variant="ghost" onClick={(e) => { e.stopPropagation(); setActiveMcp(m.name); }} aria-label={t("project.mcps.logs_btn")}>
-                        <ScrollText size={13} />
-                      </Button>
-                    </Tip>
-                    {writable && (
-                      <Tip content={t("project.mcps.edit_btn")}>
-                        <Button size="sm" variant="ghost" onClick={(e) => { e.stopPropagation(); setDialog({ kind: "edit", entry: m }); }} aria-label={t("project.mcps.edit_btn")}>
-                          <Pencil size={13} />
-                        </Button>
-                      </Tip>
-                    )}
-                    {writable && (
-                      <Button size="sm" variant="destructive" onClick={(e) => { e.stopPropagation(); remove(m.name, scopeForRemove); }}>
-                        <Trash2 size={13} />
-                      </Button>
-                    )}
                   </div>
-                  {testFor?.name === m.name && (
-                    <TestResultRow result={testFor.result} busy={!!testFor.busy} onClose={() => setTestFor(null)} />
-                  )}
                 </li>
               );
             })}
@@ -190,49 +259,12 @@ export function McpsTab({ pid }: { pid: string }) {
       </div>
 
       <div className="lg:col-span-1">
-        <LogsPanel pid={pid} mcpName={activeMcp} runningTest={!!testFor?.busy} />
+        <LogsPanel pid={pid} mcpName={activeMcp} runningTest={!!(activeMcp && results[activeMcp]?.busy)} />
       </div>
     </div>
   );
 }
 
-function TestResultRow({
-  result,
-  busy,
-  onClose,
-}: { result?: McpTestResult; busy: boolean; onClose: () => void }) {
-  return (
-    <div className="mt-2 rounded border border-border/60 bg-background/40 p-2 text-xs">
-      <div className="mb-1 flex items-center gap-2">
-        {busy && <span className="text-muted-fg">{t("project.mcps.testing")}</span>}
-        {!busy && result?.ok && (
-          <span className="flex items-center gap-1 text-emerald-400">
-            <CheckCircle2 size={12} /> {t("project.mcps.test_ok", { n: String(result.tool_count ?? 0) })}
-          </span>
-        )}
-        {!busy && result && !result.ok && (
-          <span className="flex items-center gap-1 text-red-400">
-            <XCircle size={12} /> {result.error}
-          </span>
-        )}
-        <button className="ml-auto text-muted-fg hover:text-fg" onClick={onClose}>×</button>
-      </div>
-      {!busy && result?.ok && result.tools && result.tools.length > 0 && (
-        <ul className="space-y-0.5 font-mono">
-          {result.tools.slice(0, 10).map((tool) => (
-            <li key={tool.name} className="truncate">
-              <span className="text-primary">{tool.name}</span>
-              {tool.description && <span className="ml-2 text-muted-fg">— {tool.description}</span>}
-            </li>
-          ))}
-          {result.tools.length > 10 && (
-            <li className="text-muted-fg">… +{result.tools.length - 10}</li>
-          )}
-        </ul>
-      )}
-    </div>
-  );
-}
 
 // Right-side terminal-style live logs panel. Polls the daemon every 1.5s
 // while a test is running (or every 4s when idle and an MCP is pinned) so