npm - @agentprojectcontext/apx - Versions diffs - 1.60.1 → 1.62.0 - Mend

@agentprojectcontext/apx 1.60.1 → 1.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-DFNV6BWh.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-HU-Wt2l9.css">
+    <script type="module" crossorigin src="/assets/index-CFcs16SV.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BuII-tAi.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/package-lock.json CHANGED Viewed

@@ -2218,9 +2218,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001800",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001800.tgz",
-      "integrity": "sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==",
+      "version": "1.0.30001802",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001802.tgz",
+      "integrity": "sha512-vmv8ub2xwTNmljSKf82mtCk5JH7hC+YgzLj3P5zotvA0tPQ9016tdNNOG8WRca1IxOnhSsivB+J0z5FeE5LOUw==",
       "dev": true,
       "funding": [
         {

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Github, MessageCircle, Mic, Puzzle } from "lucide-react";
 import type { CatalogEntry } from "../../lib/api";
+import { t } from "../../i18n";
 import { PluginCard } from "./PluginCard";
 const ICONS: Record<string, { icon: typeof Puzzle; className: string; wrap: string }> = {
@@ -28,17 +29,13 @@ export function ComingSoonPlugin({ entry }: { entry: CatalogEntry }) {
       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
+          {t("integrations.coming_soon")}
         </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>
+      <div className="p-4 text-xs text-muted-foreground">{t("integrations.coming_soon_body")}</div>
     </PluginCard>
   );
 }

package/src/interfaces/web/src/components/integrations/PluginConnect.tsx ADDED Viewed

@@ -0,0 +1,300 @@
+import { useState, type ReactNode } from "react";
+import useSWR from "swr";
+import { AlertCircle, CheckCircle2, ChevronDown, ExternalLink, Eye, EyeOff, Github, Loader2, WifiOff, X } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Integrations, type CatalogEntry, type IntegrationScope, type IntegrationStatus } from "../../lib/api";
+import { t } from "../../i18n";
+import type { TKey } from "../../i18n";
+import { PluginCard } from "./PluginCard";
+import { PluginToolsSection } from "./PluginToolsSection";
+// One generic component that renders any token-based plugin's config form from
+// its `ui` descriptor (structure) + i18n (all display text, keyed by slug). Asana
+// and GitHub share it; each keeps its own independent config + credentials.
+// Dynamic i18n lookup for computed per-slug keys (t is typed to known keys).
+const tk = (key: string, vars?: Record<string, string | number>) => t(key as TKey, vars);
+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>
+  );
+}
+type Accent = { text: string; border: string; hover: string; ring: string; wrap: string };
+const ACCENTS: Record<string, Accent> = {
+  rose: { text: "text-rose-400", border: "border-rose-700/50", hover: "hover:bg-rose-900/20", ring: "focus:border-rose-500/50", wrap: "border-rose-500/30 from-rose-500/20 to-pink-500/20" },
+  slate: { text: "text-slate-200", border: "border-slate-600/60", hover: "hover:bg-slate-700/30", ring: "focus:border-slate-400/60", wrap: "border-slate-500/30 from-slate-500/20 to-slate-700/20" },
+};
+function iconFor(slug: string, accent: Accent): ReactNode {
+  if (slug === "github") return <Github className={cn("h-6 w-6", accent.text)} />;
+  if (slug === "asana") return <AsanaLogo className={cn("h-6 w-6", accent.text)} />;
+  return <span className={cn("text-lg", accent.text)}>◆</span>;
+}
+type Step = "idle" | "saving" | "validating" | "done";
+type Opt = { value: string; label: string };
+export function PluginConnect({ pid, scope, entry }: { pid: string; scope: IntegrationScope; entry: CatalogEntry }) {
+  const ui = entry.ui!;
+  const accent = ACCENTS[ui.accent || "rose"] || ACCENTS.rose;
+  const [expanded, setExpanded] = useState(false);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [reveal, setReveal] = useState<Record<string, boolean>>({});
+  const [showHelp, setShowHelp] = useState<string | null>(null);
+  const [step, setStep] = useState<Step>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [selectOptions, setSelectOptions] = useState<Opt[]>([]);
+  const [selectValue, setSelectValue] = useState("");
+  const { data: status, mutate, isLoading } = useSWR<IntegrationStatus>(
+    `integration-status-${entry.slug}-${pid}-${scope}`,
+    () => Integrations.status(pid, entry.slug, scope),
+    { shouldRetryOnError: false },
+  );
+  const isActive = status?.status === "active" && status.is_enabled === true;
+  const busy = step === "saving" || step === "validating";
+  const showForm = !isActive && selectOptions.length === 0;
+  async function handleConnect() {
+    if (ui.configFields.some((f) => !values[f.key]?.trim())) return;
+    setStep("saving");
+    setError(null);
+    try {
+      await Integrations.configure(pid, entry.slug, scope, { ...values });
+      setStep("validating");
+      const result = (await Integrations.validate(pid, entry.slug, scope)) as unknown as Record<string, unknown>;
+      await mutate();
+      if (ui.select && !result[ui.select.key]) {
+        const data = (await Integrations.action(pid, entry.slug, ui.select.action, scope)) as Record<string, unknown>;
+        const list = (data[ui.select.listKey] as Record<string, unknown>[]) || [];
+        if (list.length > 1) {
+          setSelectOptions(list.map((o) => ({ value: String(o[ui.select!.valueKey]), label: String(o[ui.select!.labelKey]) })));
+        }
+      }
+      setStep("done");
+      setValues({});
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("integrations.err_connect"));
+      setStep("idle");
+    }
+  }
+  async function handleSelect() {
+    if (!selectValue || !ui.select) return;
+    setStep("saving");
+    setError(null);
+    try {
+      await Integrations.configure(pid, entry.slug, scope, { [ui.select.key]: selectValue });
+      await Integrations.validate(pid, entry.slug, scope);
+      await mutate();
+      setSelectOptions([]);
+      setStep("done");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("integrations.err_generic"));
+      setStep("idle");
+    }
+  }
+  async function handleDeactivate() {
+    setError(null);
+    try {
+      await Integrations.deactivate(pid, entry.slug, scope);
+      await mutate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("integrations.err_generic"));
+    }
+  }
+  const badgeLabel = isLoading
+    ? "…"
+    : isActive
+      ? t("integrations.status_active")
+      : status?.status === "error"
+        ? t("integrations.status_error")
+        : t("integrations.status_unconfigured");
+  return (
+    <PluginCard
+      icon={
+        <div className={cn("flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl border bg-gradient-to-br", accent.wrap)}>
+          {iconFor(entry.slug, accent)}
+        </div>
+      }
+      title={entry.name}
+      description={entry.description}
+      hasTools={(entry.tools?.length ?? 0) > 0}
+      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")} />
+          {badgeLabel}
+        </span>
+      }
+      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>
+        )}
+        {/* Connected summary */}
+        {isActive && selectOptions.length === 0 && (
+          <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">{t("integrations.connected")}</span>
+            </div>
+            {(ui.connectedFields || []).map((key) => {
+              const v = status?.[key];
+              if (!v) return null;
+              return (
+                <p key={key} className="pl-5 text-[10px] text-muted-foreground">
+                  {tk(`integrations.${entry.slug}.connected.${key}`)}: {String(v)}
+                </p>
+              );
+            })}
+          </div>
+        )}
+        {/* Post-validate selection (e.g. Asana workspace) */}
+        {selectOptions.length > 1 && ui.select && (
+          <div className="space-y-2">
+            <p className="text-[11px] text-muted-foreground">{tk(`integrations.${entry.slug}.select_label`)}:</p>
+            <div className="flex gap-2">
+              <select
+                value={selectValue}
+                onChange={(e) => setSelectValue(e.target.value)}
+                className={cn("flex-1 rounded-lg border border-border bg-background px-2 py-1.5 text-xs outline-none", accent.ring)}
+              >
+                <option value="">{t("integrations.select_placeholder")}</option>
+                {selectOptions.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
+              <button
+                onClick={handleSelect}
+                disabled={!selectValue || busy}
+                className={cn("rounded-lg border px-3 py-1.5 text-xs transition-all disabled:cursor-not-allowed disabled:opacity-50", accent.border, accent.text, accent.hover)}
+              >
+                {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t("integrations.confirm")}
+              </button>
+            </div>
+          </div>
+        )}
+        {/* Config form */}
+        {showForm && (
+          <div className="space-y-3">
+            <p className="text-xs font-semibold text-foreground">{t("integrations.credentials", { name: entry.name })}</p>
+            {ui.configFields.map((field) => (
+              <div key={field.key} className="space-y-2">
+                {field.help_url && (
+                  <div className="overflow-hidden rounded-lg border border-border">
+                    <button
+                      type="button"
+                      onClick={() => setShowHelp((v) => (v === field.key ? null : field.key))}
+                      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">
+                        {tk(`integrations.${entry.slug}.fields.${field.key}.help_label`)} ·{" "}
+                        <a
+                          href={field.help_url}
+                          target="_blank"
+                          rel="noreferrer"
+                          onClick={(e) => e.stopPropagation()}
+                          className={cn("inline-flex items-center gap-0.5 hover:underline", accent.text)}
+                        >
+                          {field.help_url_label} <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 === field.key && "rotate-180")} />
+                    </button>
+                    {showHelp === field.key && (
+                      <div className="space-y-1.5 border-t border-border px-3 pb-3 pt-2.5">
+                        {tk(`integrations.${entry.slug}.fields.${field.key}.help_steps`).split("\n").map((s, i) => (
+                          <div key={i} className="flex items-start gap-2">
+                            <span className={cn("mt-0.5 flex-shrink-0 font-mono text-[10px]", accent.text)}>{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">{tk(`integrations.${entry.slug}.fields.${field.key}.label`)}</label>
+                  <div className="relative">
+                    <input
+                      type={field.type === "password" && !reveal[field.key] ? "password" : "text"}
+                      placeholder={field.placeholder}
+                      value={values[field.key] || ""}
+                      onChange={(e) => setValues((v) => ({ ...v, [field.key]: e.target.value }))}
+                      onKeyDown={(e) => e.key === "Enter" && handleConnect()}
+                      className={cn("w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-xs outline-none placeholder:text-muted-foreground/60", field.type === "password" && "pr-14", accent.ring)}
+                    />
+                    {field.type === "password" && (
+                      <button
+                        type="button"
+                        onClick={() => setReveal((r) => ({ ...r, [field.key]: !r[field.key] }))}
+                        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"
+                      >
+                        {reveal[field.key] ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                        {reveal[field.key] ? t("integrations.hide") : t("integrations.reveal")}
+                      </button>
+                    )}
+                  </div>
+                </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" /> {t("integrations.verifying")}
+              </div>
+            )}
+            <button
+              onClick={handleConnect}
+              disabled={ui.configFields.some((f) => !values[f.key]?.trim()) || busy}
+              className={cn("flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-xs transition-all disabled:cursor-not-allowed disabled:opacity-50", accent.border, accent.text, accent.hover)}
+            >
+              {busy ? (
+                <><Loader2 className="h-3.5 w-3.5 animate-spin" />{step === "saving" ? t("integrations.saving") : t("integrations.validating")}</>
+              ) : t("integrations.connect")}
+            </button>
+          </div>
+        )}
+        {entry.tools && entry.tools.length > 0 && (
+          <PluginToolsSection pid={pid} tools={entry.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" /> {t("integrations.deactivate")}
+            </button>
+          </div>
+        )}
+      </div>
+    </PluginCard>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { Wrench } from "lucide-react";
+import { t } from "../../i18n";
 export interface PluginTool {
   slug: string;
@@ -15,25 +16,23 @@ export function PluginToolsSection({ tools, isActive }: { pid: string; tools: Pl
     <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
+          {t("integrations.tools_for_agents")}
         </p>
       </div>
       <div className="flex flex-wrap gap-1.5">
-        {tools.map((t) => (
+        {tools.map((tool) => (
           <div
-            key={t.slug}
+            key={tool.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="font-mono text-[10px] text-foreground">{tool.slug}</span>
             <span className="text-[10px] text-muted-foreground/60">·</span>
-            <span className="text-[10px] text-muted-foreground">{t.desc}</span>
+            <span className="text-[10px] text-muted-foreground">{tool.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>
+      <p className="text-[10px] text-muted-foreground/70">{t("integrations.tools_available_note")}</p>
     </div>
   );
 }

package/src/interfaces/web/src/components/settings/SkillsInspectorPanel.tsx CHANGED Viewed

@@ -97,7 +97,8 @@ export function SkillsInspectorPanel() {
   };
   return (
-    <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
+    <div className="space-y-6">
+      <div className="grid gap-6 lg:grid-cols-2 lg:items-start">
       <Section
         title={t("settings_ui.inspector_title")}
         description={t("settings_ui.inspector_desc")}
@@ -142,31 +143,6 @@ export function SkillsInspectorPanel() {
         </div>
       </Section>
-      <Section
-        title={t("settings_ui.thresholds_title")}
-        description={t("settings_ui.thresholds_desc")}
-      >
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          {knobs().map((k) => (
-            <Field key={k.key} label={k.label} hint={k.hint}>
-              <Input
-                type="number"
-                step={k.step}
-                min={k.min}
-                max={k.max}
-                defaultValue={String(cfg[k.key])}
-                disabled={busy}
-                onBlur={(ev) => {
-                  const n = Number(ev.target.value);
-                  if (Number.isFinite(n) && n !== cfg[k.key]) apply({ [k.key]: n });
-                }}
-                className="max-w-[12rem]"
-              />
-            </Field>
-          ))}
-        </div>
-      </Section>
       <Section
         title={t("settings_ui.test_title")}
         description={t("settings_ui.test_desc")}
@@ -226,6 +202,32 @@ export function SkillsInspectorPanel() {
           )}
         </div>
       </Section>
+      </div>
+      <Section
+        title={t("settings_ui.thresholds_title")}
+        description={t("settings_ui.thresholds_desc")}
+      >
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-4">
+          {knobs().map((k) => (
+            <Field key={k.key} label={k.label} hint={k.hint}>
+              <Input
+                type="number"
+                step={k.step}
+                min={k.min}
+                max={k.max}
+                defaultValue={String(cfg[k.key])}
+                disabled={busy}
+                onBlur={(ev) => {
+                  const n = Number(ev.target.value);
+                  if (Number.isFinite(n) && n !== cfg[k.key]) apply({ [k.key]: n });
+                }}
+                className="max-w-[12rem]"
+              />
+            </Field>
+          ))}
+        </div>
+      </Section>
     </div>
   );
 }

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

@@ -602,6 +602,7 @@ export const en = {
       logs_btn:    "Logs",
       testing:     "Testing…",
       test_ok:     "OK · {n} tools available",
+      tools_count: "{n} tools",
       logs_title:  "Logs · {name}",
       logs_empty:  "No logs yet. Start the MCP by calling a tool or running Test.",
       logs_events: "Recent events",
@@ -1789,4 +1790,60 @@ export const en = {
     err_load_conversation: "Could not load conversation.",
     err_stream:            "Stream error.",
   },
+  integrations: {
+    title:               "Integrations",
+    description:         "Plugins and tools available for this project",
+    tab_plugins:         "Plugins",
+    tab_tools:           "Tools",
+    scope_label:         "Scope:",
+    scope_project:       "This project",
+    scope_global:        "Global (default)",
+    plugins_hint:        "Channel & service plugins installable per project. Saved in the scope selected above.",
+    more_soon:           "More plugins coming soon…",
+    tools_hint:          "Tools that connected plugins expose to this project's agents.",
+    tools_empty:         "No integration tools yet. Connect a plugin to enable them.",
+    tool_active:         "active",
+    tool_inactive:       "inactive",
+    status_active:       "Active",
+    status_error:        "Error",
+    status_unconfigured: "Not configured",
+    connected:           "Connected",
+    connect:             "Connect",
+    deactivate:          "Deactivate",
+    saving:              "Saving...",
+    validating:          "Validating...",
+    verifying:           "Verifying token...",
+    confirm:             "Confirm",
+    select_placeholder:  "Select...",
+    reveal:              "Show",
+    hide:                "Hide",
+    credentials:         "{name} credentials",
+    coming_soon:         "Coming soon",
+    coming_soon_body:    "This plugin is declared in the catalog but isn't connectable in APX yet. It will be ported natively in a future iteration.",
+    tools_for_agents:    "Agent tools",
+    tools_available_note: "Available to agents that allow them, or via discover_tools.",
+    err_connect:         "Failed to connect",
+    err_generic:         "Something went wrong",
+    asana: {
+      select_label: "Select the workspace to use",
+      connected: { user_name: "Connected as", user_email: "Email", workspace_name: "Workspace" },
+      fields: {
+        personal_access_token: {
+          label: "Personal Access Token",
+          help_label: "How to get the token?",
+          help_steps: "Open app.asana.com/0/my-apps in your browser.\nScroll to the \"Personal access tokens\" section (not your OAuth apps).\nClick \"+ New access token\".\nGive it a name and confirm.\nCopy the full token — it starts with \"1/...\" and has a \":\" in the middle.\nPaste it in the field below.",
+        },
+      },
+    },
+    github: {
+      connected: { user_login: "Connected as", user_name: "Name" },
+      fields: {
+        token: {
+          label: "Personal Access Token",
+          help_label: "How to get the token?",
+          help_steps: "Open github.com/settings/tokens.\nGenerate a token (classic or fine-grained) with the \"repo\" scope.\nCopy the token — it starts with ghp_ or github_pat_.\nPaste it in the field below.",
+        },
+      },
+    },
+  },
 } as const;

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

@@ -620,6 +620,7 @@ export const es = {
       logs_btn:    "Logs",
       testing:     "Probando…",
       test_ok:     "OK · {n} tools disponibles",
+      tools_count: "{n} tools",
       logs_title:  "Logs · {name}",
       logs_empty:  "Sin logs todavía. Arrancá el MCP llamando un tool o probando.",
       logs_events: "Eventos recientes",
@@ -1787,6 +1788,62 @@ export const es = {
     err_load_conversation: "No se pudo cargar la conversación.",
     err_stream:            "Error de stream.",
   },
+  integrations: {
+    title:               "Integrations",
+    description:         "Plugins y tools disponibles para este proyecto",
+    tab_plugins:         "Plugins",
+    tab_tools:           "Tools",
+    scope_label:         "Ámbito:",
+    scope_project:       "Este proyecto",
+    scope_global:        "Global (default)",
+    plugins_hint:        "Plugins de canal y servicio instalables por proyecto. Se guardan en el ámbito seleccionado arriba.",
+    more_soon:           "Más plugins próximamente…",
+    tools_hint:          "Tools que los plugins conectados exponen a los agentes de este proyecto.",
+    tools_empty:         "No hay tools de integraciones. Conectá un plugin para habilitarlas.",
+    tool_active:         "activo",
+    tool_inactive:       "inactivo",
+    status_active:       "Activo",
+    status_error:        "Error",
+    status_unconfigured: "No configurado",
+    connected:           "Conectado",
+    connect:             "Conectar",
+    deactivate:          "Desactivar",
+    saving:              "Guardando...",
+    validating:          "Validando...",
+    verifying:           "Verificando token...",
+    confirm:             "Confirmar",
+    select_placeholder:  "Seleccionar...",
+    reveal:              "Ver",
+    hide:                "Ocultar",
+    credentials:         "Credenciales {name}",
+    coming_soon:         "Próximamente",
+    coming_soon_body:    "Este plugin está declarado en el catálogo pero todavía no está conectable en APX. Se va a portar de forma nativa en una próxima iteración.",
+    tools_for_agents:    "Tools para agentes",
+    tools_available_note: "Disponibles para los agentes que las tengan permitidas, o vía discover_tools.",
+    err_connect:         "Error al conectar",
+    err_generic:         "Ocurrió un error",
+    asana: {
+      select_label: "Seleccioná el workspace a usar",
+      connected: { user_name: "Conectado como", user_email: "Email", workspace_name: "Workspace" },
+      fields: {
+        personal_access_token: {
+          label: "Personal Access Token",
+          help_label: "¿Cómo obtener el token?",
+          help_steps: "Abrí app.asana.com/0/my-apps en el navegador.\nBajá hasta la sección \"Personal access tokens\" (no tus apps OAuth).\nHacé clic en \"+ New access token\".\nDale un nombre y confirmá.\nCopiá el token completo — empieza con \"1/...\" y tiene un \":\" en el medio.\nPegalo en el campo de abajo.",
+        },
+      },
+    },
+    github: {
+      connected: { user_login: "Conectado como", user_name: "Nombre" },
+      fields: {
+        token: {
+          label: "Personal Access Token",
+          help_label: "¿Cómo obtener el token?",
+          help_steps: "Abrí github.com/settings/tokens.\nGenerá un token (classic o fine-grained) con scope \"repo\".\nCopiá el token — empieza con ghp_ o github_pat_.\nPegalo en el campo de abajo.",
+        },
+      },
+    },
+  },
 } as const;
 export type EsStrings = typeof es;

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

@@ -6,15 +6,13 @@ import { http } from "../http";
 export type IntegrationScope = "project" | "global";
 // Status returned by a plugin's status endpoint. Common fields plus
-// plugin-specific extras (Asana adds user/workspace metadata).
+// plugin-specific extras (Asana adds user/workspace, GitHub adds user_login…),
+// so it carries an index signature for the generic component to read.
 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;
+  [key: string]: unknown;
 }
 export interface PluginTool {
@@ -22,6 +20,30 @@ export interface PluginTool {
   desc: string;
 }
+// Declarative UI descriptor (mirrors the plugin's `ui` in core). STRUCTURE ONLY
+// — display text is resolved from i18n keys (integrations.<slug>.*) by the
+// generic PluginConnect component. help_url/help_url_label are non-translatable.
+export interface PluginConfigField {
+  key: string;
+  type: "password" | "text";
+  placeholder?: string;
+  help_url?: string;
+  help_url_label?: string;
+}
+export interface PluginSelect {
+  key: string;
+  action: string;
+  listKey: string;
+  valueKey: string;
+  labelKey: string;
+}
+export interface PluginUi {
+  accent?: string;
+  configFields: PluginConfigField[];
+  select?: PluginSelect;
+  connectedFields?: string[];
+}
 // One entry of the plugin catalog with its resolved status for this project.
 export interface CatalogEntry {
   slug: string;
@@ -30,6 +52,7 @@ export interface CatalogEntry {
   description: string;
   auth: string;
   tools?: PluginTool[];
+  ui?: PluginUi | null;
   coming_soon: boolean;
   status: IntegrationStatus;
   resolved_scope: IntegrationScope | null;