apteva 0.4.32 → 0.4.44

package/src/web/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { DashboardIcon, ActivityIcon, AgentsIcon, TasksIcon, ConnectionsIcon, McpIcon, SkillsIcon, TestsIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
+import { DashboardIcon, ThreadsIcon, AgentsIcon, ActivityIcon, TasksIcon, ConnectionsIcon, McpIcon, SkillsIcon, TestsIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
 import { useAuth } from "../../context";
 import type { Route } from "../../types";
 
@@ -39,20 +39,22 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
       {/* Sidebar - hidden on mobile unless open, always visible on md+ */}
       <aside
         className={`
-          fixed inset-y-0 left-0 z-50 w-64 bg-[#0a0a0a] border-r border-[#1a1a1a] p-4 flex flex-col transform transition-transform duration-200 ease-in-out
+          fixed inset-y-0 left-0 z-50 w-64 p-4 flex flex-col transform transition-transform duration-200 ease-in-out
           md:relative md:w-56 md:translate-x-0 md:z-auto
           ${isOpen ? "translate-x-0" : "-translate-x-full"}
         `}
+        style={{ backgroundColor: "var(--color-bg)", borderRight: "1px solid var(--color-border)" }}
       >
         {/* Mobile header with close button */}
         <div className="flex items-center justify-between mb-4 md:hidden">
           <div className="flex items-center gap-2">
-            <span className="text-[#f97316]">&gt;_</span>
+            <span style={{ color: "var(--color-accent)" }}>&gt;_</span>
             <span className="text-lg tracking-wider">apteva</span>
           </div>
           <button
             onClick={onClose}
-            className="p-2 text-[#666] hover:text-[#e0e0e0] transition"
+            className="p-2 transition"
+            style={{ color: "var(--color-text-muted)" }}
           >
             <CloseIcon />
           </button>
@@ -72,6 +74,12 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
             onClick={() => handleNavigate("agents")}
             badge={agentCount > 0 ? String(agentCount) : undefined}
           />
+          <NavButton
+            icon={<ThreadsIcon />}
+            label="Threads"
+            active={route === "threads"}
+            onClick={() => handleNavigate("threads")}
+          />
           <NavButton
             icon={<ActivityIcon />}
             label="Activity"
@@ -131,26 +139,31 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
 
         {/* User profile - pinned to bottom */}
         {user && (
-          <div className="relative border-t border-[#1a1a1a] pt-3 mt-3">
+          <div className="relative pt-3 mt-3" style={{ borderTop: "1px solid var(--color-border)" }}>
             <button
               onClick={() => setShowUserMenu(!showUserMenu)}
-              className="w-full flex items-center gap-3 px-3 py-2 rounded hover:bg-[#111] transition"
+              className="w-full flex items-center gap-3 px-3 py-2 rounded transition"
+              style={{ color: "var(--color-text)" }}
+              onMouseEnter={e => e.currentTarget.style.backgroundColor = "var(--color-surface)"}
+              onMouseLeave={e => e.currentTarget.style.backgroundColor = "transparent"}
             >
-              <div className="w-8 h-8 rounded-full bg-[#f97316] flex items-center justify-center text-black font-medium text-sm flex-shrink-0">
+              <div className="w-8 h-8 rounded-full flex items-center justify-center text-black font-medium text-sm flex-shrink-0" style={{ backgroundColor: "var(--color-accent)" }}>
                 {user.username.charAt(0).toUpperCase()}
               </div>
               <div className="flex-1 min-w-0 text-left">
                 <p className="text-sm font-medium truncate">{user.username}</p>
-                <p className="text-xs text-[#555]">{user.role}</p>
+                <p className="text-xs" style={{ color: "var(--color-text-faint)" }}>{user.role}</p>
               </div>
             </button>
             {showUserMenu && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowUserMenu(false)} />
-                <div className="absolute left-3 bottom-full mb-1 w-48 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50">
+                <div className="absolute left-3 bottom-full mb-1 w-48 rounded-lg shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
                   <button
                     onClick={handleLogout}
-                    className="w-full px-4 py-2.5 text-left text-sm text-red-400 hover:bg-[#1a1a1a] transition rounded-lg"
+                    className="w-full px-4 py-2.5 text-left text-sm text-red-400 transition rounded-lg"
+                    onMouseEnter={e => e.currentTarget.style.backgroundColor = "var(--color-surface-raised)"}
+                    onMouseLeave={e => e.currentTarget.style.backgroundColor = "transparent"}
                   >
                     Sign out
                   </button>
@@ -176,16 +189,28 @@ function NavButton({ icon, label, active, onClick, badge }: NavButtonProps) {
   return (
     <button
       onClick={onClick}
-      className={`w-full flex items-center gap-3 px-3 py-2 rounded font-medium transition ${
-        active
-          ? "bg-[#111] text-[#e0e0e0]"
-          : "text-[#666] hover:bg-[#111] hover:text-[#888]"
-      }`}
+      className="w-full flex items-center gap-3 px-3 py-2 rounded font-medium transition"
+      style={{
+        backgroundColor: active ? "var(--color-surface)" : "transparent",
+        color: active ? "var(--color-text)" : "var(--color-text-muted)",
+      }}
+      onMouseEnter={e => {
+        if (!active) {
+          e.currentTarget.style.backgroundColor = "var(--color-surface)";
+          e.currentTarget.style.color = "var(--color-text-secondary)";
+        }
+      }}
+      onMouseLeave={e => {
+        if (!active) {
+          e.currentTarget.style.backgroundColor = "transparent";
+          e.currentTarget.style.color = "var(--color-text-muted)";
+        }
+      }}
     >
       {icon}
       {label}
       {badge && (
-        <span className="ml-auto bg-[#333] text-[#888] text-xs px-2 py-0.5 rounded-full">
+        <span className="ml-auto text-xs px-2 py-0.5 rounded-full" style={{ backgroundColor: "var(--color-surface-raised)", color: "var(--color-text-secondary)" }}>
           {badge}
         </span>
       )}

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

@@ -10,6 +10,12 @@ interface IntegrationApp {
   logo: string | null;
   categories: string[];
   authSchemes: string[];
+  providerSlug?: string;
+  credentialFields?: {
+    name: string;
+    description?: string;
+    required?: boolean;
+  }[];
 }
 
 interface ConnectedAccount {
@@ -68,9 +74,10 @@ export function IntegrationsPanel({
   const [error, setError] = useState<string | null>(null);
   // For auth method selection (when app supports both OAuth and API Key)
   const [authMethodModal, setAuthMethodModal] = useState<{ app: IntegrationApp } | null>(null);
-  // For API Key modal
+  // For API Key / credential modal
   const [apiKeyModal, setApiKeyModal] = useState<{ app: IntegrationApp } | null>(null);
   const [apiKeyInput, setApiKeyInput] = useState("");
+  const [credentialInputs, setCredentialInputs] = useState<Record<string, string>>({});
   // For MCP config creation modal
   const [mcpConfigModal, setMcpConfigModal] = useState<{ app: IntegrationApp } | null>(null);
   const [mcpConfigName, setMcpConfigName] = useState("");
@@ -153,17 +160,18 @@ export function IntegrationsPanel({
   }, [pendingConnection, authFetch, providerId, projectId, fetchData, onConnectionComplete]);
 
   // Initiate connection
-  const connectApp = async (app: IntegrationApp, apiKey?: string, forceOAuth?: boolean) => {
+  const connectApp = async (app: IntegrationApp, apiKey?: string, forceOAuth?: boolean, fields?: Record<string, string>) => {
     // If app supports multiple auth methods and user hasn't chosen, show choice
-    if (hasMultipleAuthMethods(app) && !apiKey && !forceOAuth) {
+    if (hasMultipleAuthMethods(app) && !apiKey && !fields && !forceOAuth) {
       setAuthMethodModal({ app });
       return;
     }
 
-    // If app supports API key (and user didn't choose OAuth), show API key modal
-    if (supportsApiKey(app) && !apiKey && !forceOAuth) {
+    // If app supports API key (and user didn't choose OAuth), show credential modal
+    if (supportsApiKey(app) && !apiKey && !fields && !forceOAuth) {
       setApiKeyModal({ app });
       setApiKeyInput("");
+      setCredentialInputs({});
       return;
     }
 
@@ -173,7 +181,13 @@ export function IntegrationsPanel({
     try {
       // Build request body
       const body: any = { appSlug: app.slug };
-      if (apiKey) {
+      if (fields && Object.keys(fields).length > 0) {
+        // Multi-field credentials
+        body.credentials = {
+          authScheme: "API_KEY",
+          fields,
+        };
+      } else if (apiKey) {
         body.credentials = {
           authScheme: "API_KEY",
           apiKey,
@@ -231,11 +245,21 @@ export function IntegrationsPanel({
     }
   };
 
-  // Handle API key form submission
+  // Handle API key / credential form submission
   const handleApiKeySubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!apiKeyModal || !apiKeyInput.trim()) return;
-    connectApp(apiKeyModal.app, apiKeyInput.trim());
+    if (!apiKeyModal) return;
+    const hasFields = apiKeyModal.app.credentialFields && apiKeyModal.app.credentialFields.length > 0;
+    if (hasFields) {
+      // Check required fields are filled
+      const requiredFields = apiKeyModal.app.credentialFields!.filter(f => f.required !== false);
+      const allFilled = requiredFields.every(f => credentialInputs[f.name]?.trim());
+      if (!allFilled) return;
+      connectApp(apiKeyModal.app, undefined, false, credentialInputs);
+    } else {
+      if (!apiKeyInput.trim()) return;
+      connectApp(apiKeyModal.app, apiKeyInput.trim());
+    }
   };
 
   // Disconnect (called after confirmation)
@@ -291,6 +315,20 @@ export function IntegrationsPanel({
         return;
       }
 
+      // Auto-add the server locally
+      let autoAdded = false;
+      if (data.config?.id) {
+        try {
+          const addRes = await authFetch(
+            `/api/integrations/${providerId}/configs/${data.config.id}/add${projectParam}`,
+            { method: "POST" }
+          );
+          autoAdded = addRes.ok;
+        } catch {
+          // Non-fatal — server was still created on the provider
+        }
+      }
+
       setMcpConfigSuccess(mcpConfigName);
       onConnectionComplete?.();
     } catch (e) {
@@ -311,17 +349,23 @@ export function IntegrationsPanel({
     });
   };
 
-  // Check if app is connected
-  const isConnected = (appSlug: string) => {
+  // Check if app is connected (also matches via providerSlug for multi-toolkit providers)
+  const isConnected = (app: IntegrationApp) => {
     return connectedAccounts.some(
-      (a) => a.appId === appSlug && a.status === "active"
+      (a) => a.status === "active" && (
+        a.appId === app.slug ||
+        (app.providerSlug && a.appId === app.providerSlug)
+      )
     );
   };
 
-  // Get connection for app (prefer active account)
-  const getConnection = (appSlug: string) => {
-    return connectedAccounts.find((a) => a.appId === appSlug && a.status === "active")
-      || connectedAccounts.find((a) => a.appId === appSlug);
+  // Get connection for app (prefer active account, also matches via providerSlug)
+  const getConnection = (app: IntegrationApp) => {
+    return connectedAccounts.find((a) => a.appId === app.slug && a.status === "active")
+      || (app.providerSlug && connectedAccounts.find((a) => a.appId === app.providerSlug && a.status === "active"))
+      || connectedAccounts.find((a) => a.appId === app.slug)
+      || (app.providerSlug && connectedAccounts.find((a) => a.appId === app.providerSlug))
+      || undefined;
   };
 
   // Filter apps
@@ -337,11 +381,11 @@ export function IntegrationsPanel({
   });
 
   // Group by connected/not connected
-  const connectedApps = filteredApps.filter((app) => isConnected(app.slug));
-  const availableApps = filteredApps.filter((app) => !isConnected(app.slug));
+  const connectedApps = filteredApps.filter((app) => isConnected(app));
+  const availableApps = filteredApps.filter((app) => !isConnected(app));
 
   if (loading) {
-    return <div className="text-center py-8 text-[#666]">Loading apps...</div>;
+    return <div className="text-center py-8 text-[var(--color-text-muted)]">Loading apps...</div>;
   }
 
   return (
@@ -349,7 +393,7 @@ export function IntegrationsPanel({
       {/* Auth Method Choice Modal */}
       {authMethodModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-md mx-4">
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
               {authMethodModal.app.logo && (
                 <img
@@ -360,7 +404,7 @@ export function IntegrationsPanel({
               )}
               <div>
                 <h3 className="font-medium">Connect {authMethodModal.app.name}</h3>
-                <p className="text-xs text-[#666]">Choose how to authenticate</p>
+                <p className="text-xs text-[var(--color-text-muted)]">Choose how to authenticate</p>
               </div>
             </div>
             <div className="space-y-3">
@@ -369,11 +413,12 @@ export function IntegrationsPanel({
                   setAuthMethodModal(null);
                   setApiKeyModal({ app: authMethodModal.app });
                   setApiKeyInput("");
+                  setCredentialInputs({});
                 }}
-                className="w-full text-left p-3 bg-[#0a0a0a] hover:bg-[#1a1a1a] border border-[#333] hover:border-[#f97316] rounded-lg transition"
+                className="w-full text-left p-3 bg-[var(--color-bg)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] hover:border-[var(--color-accent)] rounded-lg transition"
               >
                 <div className="font-medium text-sm">API Key</div>
-                <div className="text-xs text-[#666] mt-0.5">
+                <div className="text-xs text-[var(--color-text-muted)] mt-0.5">
                   Enter your {authMethodModal.app.name} API key directly
                 </div>
               </button>
@@ -382,17 +427,17 @@ export function IntegrationsPanel({
                   setAuthMethodModal(null);
                   connectApp(authMethodModal.app, undefined, true);
                 }}
-                className="w-full text-left p-3 bg-[#0a0a0a] hover:bg-[#1a1a1a] border border-[#333] hover:border-[#f97316] rounded-lg transition"
+                className="w-full text-left p-3 bg-[var(--color-bg)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] hover:border-[var(--color-accent)] rounded-lg transition"
               >
                 <div className="font-medium text-sm">OAuth</div>
-                <div className="text-xs text-[#666] mt-0.5">
+                <div className="text-xs text-[var(--color-text-muted)] mt-0.5">
                   Sign in with your {authMethodModal.app.name} account
                 </div>
               </button>
             </div>
             <button
               onClick={() => setAuthMethodModal(null)}
-              className="w-full text-sm text-[#666] hover:text-white mt-4 py-2 transition"
+              className="w-full text-sm text-[var(--color-text-muted)] hover:text-white mt-4 py-2 transition"
             >
               Cancel
             </button>
@@ -400,10 +445,10 @@ export function IntegrationsPanel({
         </div>
       )}
 
-      {/* API Key Modal */}
+      {/* API Key / Credentials Modal */}
       {apiKeyModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-md mx-4">
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
               {apiKeyModal.app.logo && (
                 <img
@@ -414,30 +459,63 @@ export function IntegrationsPanel({
               )}
               <div>
                 <h3 className="font-medium">Connect {apiKeyModal.app.name}</h3>
-                <p className="text-xs text-[#666]">Enter your API key to connect</p>
+                <p className="text-xs text-[var(--color-text-muted)]">
+                  {apiKeyModal.app.credentialFields?.length
+                    ? "Enter your credentials to connect"
+                    : "Enter your API key to connect"}
+                </p>
               </div>
             </div>
             <form onSubmit={handleApiKeySubmit}>
-              <input
-                type="password"
-                value={apiKeyInput}
-                onChange={(e) => setApiKeyInput(e.target.value)}
-                placeholder="Enter API Key..."
-                className="w-full bg-[#0a0a0a] border border-[#333] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:border-[#f97316]"
-                autoFocus
-              />
+              {apiKeyModal.app.credentialFields && apiKeyModal.app.credentialFields.length > 0 ? (
+                <div className="space-y-3 mb-4">
+                  {apiKeyModal.app.credentialFields.map((field, idx) => (
+                    <div key={field.name}>
+                      <label className="block text-xs text-[var(--color-text-secondary)] mb-1">
+                        {field.name.replace(/([A-Z])/g, " $1").replace(/[-_]/g, " ").replace(/\b\w/g, c => c.toUpperCase()).trim()}
+                        {field.required !== false && <span className="text-red-400 ml-0.5">*</span>}
+                      </label>
+                      {field.description && (
+                        <p className="text-[10px] text-[var(--color-text-faint)] mb-1">{field.description}</p>
+                      )}
+                      <input
+                        type="password"
+                        value={credentialInputs[field.name] || ""}
+                        onChange={(e) => setCredentialInputs(prev => ({ ...prev, [field.name]: e.target.value }))}
+                        placeholder={`Enter ${field.name}...`}
+                        className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded-lg px-4 py-2 focus:outline-none focus:border-[var(--color-accent)]"
+                        autoFocus={idx === 0}
+                      />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <input
+                  type="password"
+                  value={apiKeyInput}
+                  onChange={(e) => setApiKeyInput(e.target.value)}
+                  placeholder="Enter API Key..."
+                  className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:border-[var(--color-accent)]"
+                  autoFocus
+                />
+              )}
               <div className="flex gap-2">
                 <button
                   type="button"
                   onClick={() => setApiKeyModal(null)}
-                  className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+                  className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
-                  disabled={!apiKeyInput.trim() || connecting === apiKeyModal.app.slug}
-                  className="flex-1 text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition disabled:opacity-50"
+                  disabled={
+                    connecting === apiKeyModal.app.slug ||
+                    (apiKeyModal.app.credentialFields?.length
+                      ? !apiKeyModal.app.credentialFields.filter(f => f.required !== false).every(f => credentialInputs[f.name]?.trim())
+                      : !apiKeyInput.trim())
+                  }
+                  className="flex-1 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white px-4 py-2 rounded transition disabled:opacity-50"
                 >
                   {connecting === apiKeyModal.app.slug ? "Connecting..." : "Connect"}
                 </button>
@@ -450,7 +528,7 @@ export function IntegrationsPanel({
       {/* MCP Config Creation Modal */}
       {mcpConfigModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-md mx-4">
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-md mx-4">
             {mcpConfigSuccess ? (
               <>
                 <div className="text-center mb-4">
@@ -458,11 +536,8 @@ export function IntegrationsPanel({
                     <span className="text-green-400 text-2xl">✓</span>
                   </div>
                   <h3 className="font-medium text-lg">MCP Config Created!</h3>
-                  <p className="text-sm text-[#888] mt-2">
-                    "{mcpConfigSuccess}" has been created successfully.
-                  </p>
-                  <p className="text-xs text-[#666] mt-2">
-                    You can now add it to your agents from the MCP Configs tab.
+                  <p className="text-sm text-[var(--color-text-secondary)] mt-2">
+                    "{mcpConfigSuccess}" has been created and added to your servers.
                   </p>
                 </div>
                 <button
@@ -470,7 +545,7 @@ export function IntegrationsPanel({
                     setMcpConfigModal(null);
                     setMcpConfigSuccess(null);
                   }}
-                  className="w-full text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition"
+                  className="w-full text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white px-4 py-2 rounded transition"
                 >
                   Done
                 </button>
@@ -487,19 +562,19 @@ export function IntegrationsPanel({
                   )}
                   <div>
                     <h3 className="font-medium">Create MCP Config</h3>
-                    <p className="text-xs text-[#666]">
+                    <p className="text-xs text-[var(--color-text-muted)]">
                       Create an MCP config for {mcpConfigModal.app.name}
                     </p>
                   </div>
                 </div>
                 <form onSubmit={(e) => { e.preventDefault(); createMcpConfig(); }}>
-                  <label className="block text-xs text-[#888] mb-1">Config Name</label>
+                  <label className="block text-xs text-[var(--color-text-secondary)] mb-1">Config Name</label>
                   <input
                     type="text"
                     value={mcpConfigName}
                     onChange={(e) => setMcpConfigName(e.target.value)}
                     placeholder="Enter config name..."
-                    className="w-full bg-[#0a0a0a] border border-[#333] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:border-[#f97316]"
+                    className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:border-[var(--color-accent)]"
                     autoFocus
                     maxLength={30}
                   />
@@ -507,14 +582,14 @@ export function IntegrationsPanel({
                     <button
                       type="button"
                       onClick={() => setMcpConfigModal(null)}
-                      className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+                      className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
                     >
                       Cancel
                     </button>
                     <button
                       type="submit"
                       disabled={!mcpConfigName.trim() || mcpConfigCreating}
-                      className="flex-1 text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition disabled:opacity-50"
+                      className="flex-1 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white px-4 py-2 rounded transition disabled:opacity-50"
                     >
                       {mcpConfigCreating ? "Creating..." : "Create Config"}
                     </button>
@@ -529,12 +604,12 @@ export function IntegrationsPanel({
       {/* Confirmation Modal */}
       {confirmModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-sm mx-4">
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-sm mx-4">
             <p className="text-center mb-4">{confirmModal.message}</p>
             <div className="flex gap-2">
               <button
                 onClick={() => setConfirmModal(null)}
-                className="flex-1 text-sm bg-[#1a1a1a] hover:bg-[#222] border border-[#333] px-4 py-2 rounded transition"
+                className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
               >
                 Cancel
               </button>
@@ -574,14 +649,14 @@ export function IntegrationsPanel({
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search apps..."
-          className="w-full bg-[#111] border border-[#333] rounded-lg px-4 py-2 focus:outline-none focus:border-[#f97316]"
+          className="w-full bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg px-4 py-2 focus:outline-none focus:border-[var(--color-accent)]"
         />
       </div>
 
       {/* Connected Apps */}
       {connectedApps.length > 0 && (
         <div>
-          <h3 className="text-sm font-medium text-[#888] mb-3">
+          <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">
             Connected ({connectedApps.length})
           </h3>
           <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
@@ -589,14 +664,19 @@ export function IntegrationsPanel({
               <AppCard
                 key={app.id}
                 app={app}
-                connection={getConnection(app.slug)}
+                connection={getConnection(app)}
                 onConnect={() => connectApp(app)}
                 onDisconnect={() => {
-                  const conn = getConnection(app.slug);
+                  const conn = getConnection(app);
                   if (conn) handleDisconnect(conn);
                 }}
                 onCreateMcpConfig={hideMcpConfig ? undefined : () => openMcpConfigModal(app)}
                 onBrowseTriggers={onBrowseTriggers ? () => onBrowseTriggers(app.slug) : undefined}
+                onUpdateKey={supportsApiKey(app) ? () => {
+                  setApiKeyModal({ app });
+                  setApiKeyInput("");
+                  setCredentialInputs({});
+                } : undefined}
                 connecting={connecting === app.slug}
               />
             ))}
@@ -606,11 +686,11 @@ export function IntegrationsPanel({
 
       {/* Available Apps */}
       <div>
-        <h3 className="text-sm font-medium text-[#888] mb-3">
+        <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">
           Available Apps ({availableApps.length})
         </h3>
         {availableApps.length === 0 ? (
-          <p className="text-[#666] text-sm">
+          <p className="text-[var(--color-text-muted)] text-sm">
             {search ? "No apps match your search" : "No apps available"}
           </p>
         ) : (
@@ -626,7 +706,7 @@ export function IntegrationsPanel({
           </div>
         )}
         {availableApps.length > 50 && (
-          <p className="text-xs text-[#555] mt-3 text-center">
+          <p className="text-xs text-[var(--color-text-faint)] mt-3 text-center">
             Showing first 50 of {availableApps.length} apps. Use search to find more.
           </p>
         )}
@@ -643,6 +723,7 @@ function AppCard({
   onDisconnect,
   onCreateMcpConfig,
   onBrowseTriggers,
+  onUpdateKey,
   connecting,
 }: {
   app: IntegrationApp;
@@ -651,6 +732,7 @@ function AppCard({
   onDisconnect?: () => void;
   onCreateMcpConfig?: () => void;
   onBrowseTriggers?: () => void;
+  onUpdateKey?: () => void;
   connecting: boolean;
 }) {
   const isConnected = connection?.status === "active";
@@ -660,13 +742,13 @@ function AppCard({
 
   return (
     <div
-      className={`bg-[#111] border rounded-lg p-3 transition ${
-        isConnected ? "border-green-500/30" : "border-[#1a1a1a] hover:border-[#333]"
+      className={`bg-[var(--color-surface)] border rounded-lg p-3 transition ${
+        isConnected ? "border-green-500/30" : "border-[var(--color-border)] hover:border-[var(--color-border-light)]"
       }`}
     >
       <div className="flex items-start gap-3">
         {/* Logo */}
-        <div className="w-10 h-10 rounded bg-[#1a1a1a] flex items-center justify-center flex-shrink-0 overflow-hidden">
+        <div className="w-10 h-10 rounded bg-[var(--color-surface-raised)] flex items-center justify-center flex-shrink-0 overflow-hidden">
           {app.logo ? (
             <img
               src={app.logo}
@@ -689,7 +771,7 @@ function AppCard({
               <span className="text-xs text-green-400">✓</span>
             )}
             {!isConnected && hasApiKey && !hasOAuth && (
-              <span className="text-[10px] bg-[#222] text-[#888] px-1.5 py-0.5 rounded" title="Requires API Key">
+              <span className="text-[10px] bg-[var(--color-surface-raised)] text-[var(--color-text-secondary)] px-1.5 py-0.5 rounded" title="Requires API Key">
                 API Key
               </span>
             )}
@@ -700,7 +782,7 @@ function AppCard({
             )}
           </div>
           {app.description && (
-            <p className="text-xs text-[#666] line-clamp-2 mt-0.5">
+            <p className="text-xs text-[var(--color-text-muted)] line-clamp-2 mt-0.5">
               {app.description}
             </p>
           )}
@@ -709,7 +791,7 @@ function AppCard({
               {app.categories.slice(0, 2).map((cat) => (
                 <span
                   key={cat}
-                  className="text-[10px] bg-[#1a1a1a] text-[#555] px-1.5 py-0.5 rounded"
+                  className="text-[10px] bg-[var(--color-surface-raised)] text-[var(--color-text-faint)] px-1.5 py-0.5 rounded"
                 >
                   {cat}
                 </span>
@@ -739,10 +821,19 @@ function AppCard({
                 Browse Triggers
               </button>
             )}
+            {onUpdateKey && (
+              <button
+                onClick={onUpdateKey}
+                className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-accent)] transition px-2"
+                title="Update API Key"
+              >
+                Key
+              </button>
+            )}
             {onDisconnect && (
               <button
                 onClick={onDisconnect}
-                className="text-xs text-[#666] hover:text-red-400 transition px-2"
+                className="text-xs text-[var(--color-text-muted)] hover:text-red-400 transition px-2"
                 title="Disconnect"
               >
                 ×
@@ -753,7 +844,7 @@ function AppCard({
           <button
             onClick={onConnect}
             disabled={connecting}
-            className="w-full text-xs bg-[#1a1a1a] hover:bg-[#222] border border-[#333] hover:border-[#f97316] px-3 py-1.5 rounded transition disabled:opacity-50"
+            className="w-full text-xs bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] hover:border-[var(--color-accent)] px-3 py-1.5 rounded transition disabled:opacity-50"
           >
             {connecting ? "Connecting..." : (hasApiKey && !hasOAuth) ? "Enter API Key" : "Connect"}
           </button>