apteva 0.2.7 → 0.2.9

package/src/web/components/mcp/McpPage.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { McpIcon } from "../common/Icons";
+import { useAuth } from "../../context";
+import { useConfirm, useAlert } from "../common/Modal";
 import type { McpTool, McpToolCallResult } from "../../types";
+import { IntegrationsPanel } from "./IntegrationsPanel";
 
 interface McpServer {
   id: string;
@@ -10,30 +13,38 @@ interface McpServer {
   command: string | null;
   args: string | null;
   env: Record<string, string>;
+  url: string | null;
+  headers: Record<string, string>;
   port: number | null;
   status: "stopped" | "running";
+  source: string | null; // "composio", "smithery", or null for local
   created_at: string;
 }
 
 interface RegistryServer {
+  id: string;
   name: string;
+  fullName: string;
   description: string;
-  vendor: string;
-  sourceUrl: string;
+  version?: string;
+  repository?: string;
   npmPackage: string | null;
-  githubStars: number | null;
+  remoteUrl: string | null;
+  transport: string;
 }
 
 export function McpPage() {
+  const { authFetch } = useAuth();
   const [servers, setServers] = useState<McpServer[]>([]);
   const [loading, setLoading] = useState(true);
   const [showAdd, setShowAdd] = useState(false);
   const [selectedServer, setSelectedServer] = useState<McpServer | null>(null);
-  const [activeTab, setActiveTab] = useState<"servers" | "registry">("servers");
+  const [activeTab, setActiveTab] = useState<"servers" | "hosted" | "registry">("servers");
+  const { confirm, ConfirmDialog } = useConfirm();
 
   const fetchServers = async () => {
     try {
-      const res = await fetch("/api/mcp/servers");
+      const res = await authFetch("/api/mcp/servers");
       const data = await res.json();
       setServers(data.servers || []);
     } catch (e) {
@@ -44,11 +55,11 @@ export function McpPage() {
 
   useEffect(() => {
     fetchServers();
-  }, []);
+  }, [authFetch]);
 
   const startServer = async (id: string) => {
     try {
-      await fetch(`/api/mcp/servers/${id}/start`, { method: "POST" });
+      await authFetch(`/api/mcp/servers/${id}/start`, { method: "POST" });
       fetchServers();
     } catch (e) {
       console.error("Failed to start server:", e);
@@ -57,7 +68,7 @@ export function McpPage() {
 
   const stopServer = async (id: string) => {
     try {
-      await fetch(`/api/mcp/servers/${id}/stop`, { method: "POST" });
+      await authFetch(`/api/mcp/servers/${id}/stop`, { method: "POST" });
       fetchServers();
     } catch (e) {
       console.error("Failed to stop server:", e);
@@ -65,9 +76,10 @@ export function McpPage() {
   };
 
   const deleteServer = async (id: string) => {
-    if (!confirm("Delete this MCP server?")) return;
+    const confirmed = await confirm("Delete this MCP server?", { confirmText: "Delete", title: "Delete Server" });
+    if (!confirmed) return;
     try {
-      await fetch(`/api/mcp/servers/${id}`, { method: "DELETE" });
+      await authFetch(`/api/mcp/servers/${id}`, { method: "DELETE" });
       if (selectedServer?.id === id) {
         setSelectedServer(null);
       }
@@ -78,6 +90,8 @@ export function McpPage() {
   };
 
   return (
+    <>
+    {ConfirmDialog}
     <div className="flex-1 overflow-auto p-6">
       <div className="max-w-6xl">
         {/* Header */}
@@ -110,6 +124,16 @@ export function McpPage() {
           >
             My Servers
           </button>
+          <button
+            onClick={() => setActiveTab("hosted")}
+            className={`px-4 py-2 rounded text-sm font-medium transition ${
+              activeTab === "hosted"
+                ? "bg-[#1a1a1a] text-white"
+                : "text-[#666] hover:text-[#888]"
+            }`}
+          >
+            Hosted Services
+          </button>
           <button
             onClick={() => setActiveTab("registry")}
             className={`px-4 py-2 rounded text-sm font-medium transition ${
@@ -161,17 +185,21 @@ export function McpPage() {
               <div className="flex gap-6">
                 {/* Server List */}
                 <div className={`space-y-3 ${selectedServer ? "w-1/2" : "w-full"}`}>
-                  {servers.map(server => (
-                    <McpServerCard
-                      key={server.id}
-                      server={server}
-                      selected={selectedServer?.id === server.id}
-                      onSelect={() => setSelectedServer(server.status === "running" ? server : null)}
-                      onStart={() => startServer(server.id)}
-                      onStop={() => stopServer(server.id)}
-                      onDelete={() => deleteServer(server.id)}
-                    />
-                  ))}
+                  {servers.map(server => {
+                    const isRemote = server.type === "http" && server.url;
+                    const isAvailable = isRemote || server.status === "running";
+                    return (
+                      <McpServerCard
+                        key={server.id}
+                        server={server}
+                        selected={selectedServer?.id === server.id}
+                        onSelect={() => setSelectedServer(isAvailable ? server : null)}
+                        onStart={() => startServer(server.id)}
+                        onStop={() => stopServer(server.id)}
+                        onDelete={() => deleteServer(server.id)}
+                      />
+                    );
+                  })}
                 </div>
 
                 {/* Tools Panel */}
@@ -188,6 +216,11 @@ export function McpPage() {
           </>
         )}
 
+        {/* Hosted Services Tab */}
+        {activeTab === "hosted" && (
+          <HostedServices onServerAdded={fetchServers} />
+        )}
+
         {/* Browse Registry Tab */}
         {activeTab === "registry" && (
           <RegistryBrowser
@@ -232,6 +265,7 @@ export function McpPage() {
         />
       )}
     </div>
+    </>
   );
 }
 
@@ -250,28 +284,50 @@ function McpServerCard({
   onStop: () => void;
   onDelete: () => void;
 }) {
+  // Remote/hosted servers (http type with url) are always available
+  const isRemote = server.type === "http" && server.url;
+  const isAvailable = isRemote || server.status === "running";
+
+  // Determine what to show as the server info
+  const getServerInfo = () => {
+    if (isRemote) {
+      // Show source (composio, smithery) or just "remote"
+      const source = server.source || "remote";
+      return `${source} • http`;
+    }
+    return `${server.type} • ${server.package || server.command || "custom"}${
+      server.status === "running" && server.port ? ` • :${server.port}` : ""
+    }`;
+  };
+
   return (
     <div
       className={`bg-[#111] border rounded-lg p-4 cursor-pointer transition ${
         selected ? "border-[#f97316]" : "border-[#1a1a1a] hover:border-[#333]"
       }`}
-      onClick={server.status === "running" ? onSelect : undefined}
+      onClick={isAvailable ? onSelect : undefined}
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className={`w-2 h-2 rounded-full ${
-            server.status === "running" ? "bg-green-400" : "bg-[#444]"
+            isAvailable ? "bg-green-400" : "bg-[#444]"
           }`} />
           <div>
             <h3 className="font-medium">{server.name}</h3>
-            <p className="text-sm text-[#666]">
-              {server.type} • {server.package || server.command || "custom"}
-              {server.status === "running" && server.port && ` • :${server.port}`}
-            </p>
+            <p className="text-sm text-[#666]">{getServerInfo()}</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          {server.status === "running" ? (
+          {isRemote ? (
+            // Remote servers: no start/stop, just delete
+            <button
+              onClick={(e) => { e.stopPropagation(); onDelete(); }}
+              className="text-sm text-[#666] hover:text-red-400 px-3 py-1 transition"
+            >
+              Remove
+            </button>
+          ) : server.status === "running" ? (
+            // Local running server: tools + stop + delete
             <>
               <button
                 onClick={(e) => { e.stopPropagation(); onSelect(); }}
@@ -285,21 +341,30 @@ function McpServerCard({
               >
                 Stop
               </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onDelete(); }}
+                className="text-sm text-[#666] hover:text-red-400 px-3 py-1 transition"
+              >
+                Delete
+              </button>
             </>
           ) : (
-            <button
-              onClick={(e) => { e.stopPropagation(); onStart(); }}
-              className="text-sm text-[#666] hover:text-green-400 px-3 py-1 transition"
-            >
-              Start
-            </button>
+            // Local stopped server: start + delete
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); onStart(); }}
+                className="text-sm text-[#666] hover:text-green-400 px-3 py-1 transition"
+              >
+                Start
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onDelete(); }}
+                className="text-sm text-[#666] hover:text-red-400 px-3 py-1 transition"
+              >
+                Delete
+              </button>
+            </>
           )}
-          <button
-            onClick={(e) => { e.stopPropagation(); onDelete(); }}
-            className="text-sm text-[#666] hover:text-red-400 px-3 py-1 transition"
-          >
-            Delete
-          </button>
         </div>
       </div>
     </div>
@@ -313,6 +378,7 @@ function ToolsPanel({
   server: McpServer;
   onClose: () => void;
 }) {
+  const { authFetch } = useAuth();
   const [tools, setTools] = useState<McpTool[]>([]);
   const [serverInfo, setServerInfo] = useState<{ name: string; version: string } | null>(null);
   const [loading, setLoading] = useState(true);
@@ -324,7 +390,7 @@ function ToolsPanel({
       setLoading(true);
       setError(null);
       try {
-        const res = await fetch(`/api/mcp/servers/${server.id}/tools`);
+        const res = await authFetch(`/api/mcp/servers/${server.id}/tools`);
         const data = await res.json();
         if (!res.ok) {
           setError(data.error || "Failed to fetch tools");
@@ -340,7 +406,7 @@ function ToolsPanel({
     };
 
     fetchTools();
-  }, [server.id]);
+  }, [server.id, authFetch]);
 
   return (
     <div className="bg-[#111] border border-[#1a1a1a] rounded-lg overflow-hidden">
@@ -414,6 +480,7 @@ function ToolTester({
   tool: McpTool;
   onBack: () => void;
 }) {
+  const { authFetch } = useAuth();
   const [args, setArgs] = useState<string>("{}");
   const [result, setResult] = useState<McpToolCallResult | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -451,7 +518,7 @@ function ToolTester({
 
     try {
       const parsedArgs = JSON.parse(args);
-      const res = await fetch(`/api/mcp/servers/${serverId}/tools/${encodeURIComponent(tool.name)}/call`, {
+      const res = await authFetch(`/api/mcp/servers/${serverId}/tools/${encodeURIComponent(tool.name)}/call`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ arguments: parsedArgs }),
@@ -564,6 +631,7 @@ function RegistryBrowser({
 }: {
   onInstall: (server: RegistryServer) => void;
 }) {
+  const { authFetch } = useAuth();
   const [search, setSearch] = useState("");
   const [servers, setServers] = useState<RegistryServer[]>([]);
   const [loading, setLoading] = useState(false);
@@ -575,7 +643,7 @@ function RegistryBrowser({
     setLoading(true);
     setError(null);
     try {
-      const res = await fetch(`/api/mcp/registry?search=${encodeURIComponent(query)}&limit=20`);
+      const res = await authFetch(`/api/mcp/registry?search=${encodeURIComponent(query)}&limit=20`);
       const data = await res.json();
       if (!res.ok) {
         setError(data.error || "Failed to search registry");
@@ -610,11 +678,11 @@ function RegistryBrowser({
       return;
     }
 
-    setInstalling(server.name);
+    setInstalling(server.id);
     setError(null);
 
     try {
-      const res = await fetch("/api/mcp/servers", {
+      const res = await authFetch("/api/mcp/servers", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -676,7 +744,7 @@ function RegistryBrowser({
         <div className="grid gap-4 md:grid-cols-2">
           {servers.map((server) => (
             <div
-              key={server.name}
+              key={server.id}
               className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4 hover:border-[#333] transition"
             >
               <div className="flex items-start justify-between gap-3">
@@ -685,37 +753,37 @@ function RegistryBrowser({
                   <p className="text-sm text-[#666] mt-1 line-clamp-2">
                     {server.description || "No description"}
                   </p>
-                  <div className="flex items-center gap-3 mt-2 text-xs text-[#555]">
-                    {server.vendor && <span>by {server.vendor}</span>}
-                    {server.githubStars !== null && server.githubStars > 0 && (
-                      <span>★ {server.githubStars.toLocaleString()}</span>
-                    )}
+                  <div className="flex items-center gap-2 mt-2 text-xs text-[#555]">
+                    {server.version && <span>v{server.version}</span>}
+                    <span className={`px-1.5 py-0.5 rounded ${
+                      server.npmPackage ? "bg-green-500/10 text-green-400" : "bg-blue-500/10 text-blue-400"
+                    }`}>
+                      {server.npmPackage ? "npm" : "remote"}
+                    </span>
                   </div>
-                  {server.npmPackage && (
-                    <code className="text-xs text-[#666] bg-[#0a0a0a] px-2 py-0.5 rounded mt-2 inline-block truncate max-w-full">
-                      {server.npmPackage}
-                    </code>
-                  )}
+                  <code className="text-xs text-[#555] bg-[#0a0a0a] px-2 py-0.5 rounded mt-2 inline-block truncate max-w-full">
+                    {server.npmPackage || server.fullName}
+                  </code>
                 </div>
                 <div className="flex-shrink-0">
                   {server.npmPackage ? (
                     <button
                       onClick={() => installServer(server)}
-                      disabled={installing === server.name}
+                      disabled={installing === server.id}
                       className="text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-3 py-1.5 rounded transition disabled:opacity-50"
                     >
-                      {installing === server.name ? "Adding..." : "Add"}
+                      {installing === server.id ? "Adding..." : "Add"}
                     </button>
-                  ) : (
+                  ) : server.repository ? (
                     <a
-                      href={server.sourceUrl}
+                      href={server.repository}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="text-sm text-[#666] hover:text-[#f97316] transition"
                     >
                       View →
                     </a>
-                  )}
+                  ) : null}
                 </div>
               </div>
             </div>
@@ -749,6 +817,325 @@ function RegistryBrowser({
   );
 }
 
+// Hosted MCP Services (Composio, Smithery, etc.)
+interface ComposioConfig {
+  id: string;
+  name: string;
+  toolkits: string[];
+  toolsCount: number;
+  mcpUrl: string;
+  createdAt?: string;
+}
+
+function HostedServices({ onServerAdded }: { onServerAdded?: () => void }) {
+  const { authFetch } = useAuth();
+  const [subTab, setSubTab] = useState<"configs" | "connect">("configs");
+  const [composioConnected, setComposioConnected] = useState(false);
+  const [smitheryConnected, setSmitheryConnected] = useState(false);
+  const [composioConfigs, setComposioConfigs] = useState<ComposioConfig[]>([]);
+  const [addedServers, setAddedServers] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(true);
+  const [loadingConfigs, setLoadingConfigs] = useState(false);
+  const [addingConfig, setAddingConfig] = useState<string | null>(null);
+  const { alert, AlertDialog } = useAlert();
+
+  const fetchStatus = async () => {
+    try {
+      const [providersRes, serversRes] = await Promise.all([
+        authFetch("/api/providers"),
+        authFetch("/api/mcp/servers"),
+      ]);
+      const providersData = await providersRes.json();
+      const serversData = await serversRes.json();
+
+      const providers = providersData.providers || [];
+      const servers = serversData.servers || [];
+
+      // Track which Composio config IDs are already added as servers
+      // Extract config ID from URLs like https://backend.composio.dev/v3/mcp/{configId}/mcp?user_id=...
+      const composioConfigIds = new Set(
+        servers
+          .filter((s: any) => s.source === "composio" && s.url)
+          .map((s: any) => {
+            const match = s.url.match(/\/v3\/mcp\/([^/]+)/);
+            return match ? match[1] : null;
+          })
+          .filter(Boolean)
+      );
+      setAddedServers(composioConfigIds);
+
+      const composio = providers.find((p: any) => p.id === "composio");
+      const smithery = providers.find((p: any) => p.id === "smithery");
+      setComposioConnected(composio?.hasKey || false);
+      setSmitheryConnected(smithery?.hasKey || false);
+
+      if (composio?.hasKey) {
+        fetchComposioConfigs();
+      }
+    } catch (e) {
+      console.error("Failed to fetch providers:", e);
+    }
+    setLoading(false);
+  };
+
+  const fetchComposioConfigs = async () => {
+    setLoadingConfigs(true);
+    try {
+      const res = await authFetch("/api/integrations/composio/configs");
+      const data = await res.json();
+      setComposioConfigs(data.configs || []);
+    } catch (e) {
+      console.error("Failed to fetch Composio configs:", e);
+    }
+    setLoadingConfigs(false);
+  };
+
+  const addComposioConfig = async (configId: string) => {
+    setAddingConfig(configId);
+    try {
+      const res = await authFetch(`/api/integrations/composio/configs/${configId}/add`, {
+        method: "POST",
+      });
+      if (res.ok) {
+        // Mark as added by config ID
+        setAddedServers(prev => new Set([...prev, configId]));
+        onServerAdded?.();
+      } else {
+        const data = await res.json();
+        await alert(data.error || "Failed to add config", { title: "Error", variant: "error" });
+      }
+    } catch (e) {
+      console.error("Failed to add config:", e);
+    }
+    setAddingConfig(null);
+  };
+
+  const isConfigAdded = (configId: string) => {
+    return addedServers.has(configId);
+  };
+
+  useEffect(() => {
+    fetchStatus();
+  }, [authFetch]);
+
+  if (loading) {
+    return <div className="text-center py-8 text-[#666]">Loading...</div>;
+  }
+
+  const hasAnyConnection = composioConnected || smitheryConnected;
+
+  if (!hasAnyConnection) {
+    return (
+      <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-8 text-center">
+        <p className="text-[#888] mb-2">No hosted MCP services connected</p>
+        <p className="text-sm text-[#666] mb-4">
+          Connect Composio or Smithery in Settings to access cloud-based MCP servers.
+        </p>
+        <a
+          href="/settings"
+          className="inline-block bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-4 py-2 rounded text-sm font-medium transition"
+        >
+          Go to Settings →
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <>
+    {AlertDialog}
+    <div className="space-y-6">
+      {/* Sub-tabs for Composio */}
+      {composioConnected && (
+        <div className="flex gap-1 bg-[#0a0a0a] border border-[#222] rounded-lg p-1 w-fit">
+          <button
+            onClick={() => setSubTab("configs")}
+            className={`px-4 py-2 rounded text-sm font-medium transition ${
+              subTab === "configs"
+                ? "bg-[#1a1a1a] text-white"
+                : "text-[#666] hover:text-[#888]"
+            }`}
+          >
+            MCP Configs
+          </button>
+          <button
+            onClick={() => setSubTab("connect")}
+            className={`px-4 py-2 rounded text-sm font-medium transition ${
+              subTab === "connect"
+                ? "bg-[#1a1a1a] text-white"
+                : "text-[#666] hover:text-[#888]"
+            }`}
+          >
+            Connect Apps
+          </button>
+        </div>
+      )}
+
+      {/* Connect Apps Tab */}
+      {composioConnected && subTab === "connect" && (
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h2 className="font-medium">Connect Apps via Composio</h2>
+              <p className="text-sm text-[#666] mt-1">
+                Connect your accounts to enable tools in MCP configs
+              </p>
+            </div>
+          </div>
+          <IntegrationsPanel
+            providerId="composio"
+            onConnectionComplete={() => {
+              // Refresh configs after connecting an app
+              fetchComposioConfigs();
+            }}
+          />
+        </div>
+      )}
+
+      {/* MCP Configs Tab */}
+      {composioConnected && subTab === "configs" && (
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <h2 className="font-medium">Composio MCP Configs</h2>
+              <span className="text-xs text-green-400">Connected</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={fetchComposioConfigs}
+                disabled={loadingConfigs}
+                className="text-xs text-[#666] hover:text-[#888] transition"
+              >
+                {loadingConfigs ? "Loading..." : "Refresh"}
+              </button>
+              <a
+                href="https://app.composio.dev/mcp_configs"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-[#666] hover:text-[#f97316] transition"
+              >
+                Create Config →
+              </a>
+            </div>
+          </div>
+
+          {loadingConfigs ? (
+            <div className="text-center py-6 text-[#666]">Loading configs...</div>
+          ) : composioConfigs.length === 0 ? (
+            <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4 text-center">
+              <p className="text-sm text-[#666]">No MCP configs found</p>
+              <p className="text-xs text-[#555] mt-2">
+                First <button onClick={() => setSubTab("connect")} className="text-[#f97316] hover:text-[#fb923c]">connect some apps</button>, then create a config.
+              </p>
+              <a
+                href="https://app.composio.dev/mcp_configs"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-[#f97316] hover:text-[#fb923c] mt-2 inline-block"
+              >
+                Create in Composio →
+              </a>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {composioConfigs.map((config) => {
+                const added = isConfigAdded(config.id);
+                const isAdding = addingConfig === config.id;
+                return (
+                  <div
+                    key={config.id}
+                    className={`bg-[#111] border rounded-lg p-3 transition flex items-center justify-between ${
+                      added ? "border-green-500/30" : "border-[#1a1a1a] hover:border-[#333]"
+                    }`}
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-sm">{config.name}</span>
+                        <span className="text-xs text-[#555]">{config.toolsCount} tools</span>
+                        {added && (
+                          <span className="text-xs text-green-400">Added</span>
+                        )}
+                      </div>
+                      {config.toolkits.length > 0 && (
+                        <div className="flex flex-wrap gap-1 mt-1">
+                          {config.toolkits.slice(0, 4).map((toolkit) => (
+                            <span
+                              key={toolkit}
+                              className="text-xs bg-[#1a1a1a] text-[#666] px-1.5 py-0.5 rounded"
+                            >
+                              {toolkit}
+                            </span>
+                          ))}
+                          {config.toolkits.length > 4 && (
+                            <span className="text-xs text-[#555]">+{config.toolkits.length - 4}</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 ml-3">
+                      {added ? (
+                        <span className="text-xs text-[#555] px-2 py-1">In Servers</span>
+                      ) : (
+                        <button
+                          onClick={() => addComposioConfig(config.id)}
+                          disabled={isAdding}
+                          className="text-xs bg-[#f97316] hover:bg-[#fb923c] text-black px-3 py-1 rounded font-medium transition disabled:opacity-50"
+                        >
+                          {isAdding ? "Adding..." : "Add"}
+                        </button>
+                      )}
+                      <a
+                        href={`https://app.composio.dev/mcp_configs/${config.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-xs text-[#666] hover:text-[#888] transition"
+                      >
+                        Edit
+                      </a>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Smithery - placeholder for when we have API support */}
+      {smitheryConnected && (
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <h2 className="font-medium">Smithery</h2>
+              <span className="text-xs text-green-400">Connected</span>
+            </div>
+            <a
+              href="https://smithery.ai/servers"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-[#666] hover:text-[#f97316] transition"
+            >
+              View Servers →
+            </a>
+          </div>
+          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4 text-center">
+            <p className="text-sm text-[#666]">
+              Smithery servers can be added from the Registry tab.
+            </p>
+          </div>
+        </div>
+      )}
+
+      <div className="p-3 bg-[#0a0a0a] border border-[#222] rounded text-xs text-[#666]">
+        <strong className="text-[#888]">Tip:</strong> Connect apps first, then add MCP configs to make tools available to your agents.
+        {" · "}
+        <a href="/settings" className="text-[#f97316] hover:text-[#fb923c]">Add more providers in Settings</a>
+      </div>
+    </div>
+    </>
+  );
+}
+
 // Parse command and extract credential placeholders
 function parseCommandForCredentials(cmd: string): {
   cleanCommand: string;
@@ -810,6 +1197,7 @@ function AddServerModal({
   onClose: () => void;
   onAdded: () => void;
 }) {
+  const { authFetch } = useAuth();
   const [mode, setMode] = useState<"npm" | "command">("npm");
   const [name, setName] = useState("");
   const [pkg, setPkg] = useState("");
@@ -941,7 +1329,7 @@ function AddServerModal({
         body.env = env;
       }
 
-      const res = await fetch("/api/mcp/servers", {
+      const res = await authFetch("/api/mcp/servers", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),