apteva 0.4.4 → 0.4.5

package/src/web/components/settings/SettingsPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { CheckIcon, CloseIcon, PlusIcon } from "../common/Icons";
 import { Modal, useConfirm } from "../common/Modal";
+import { Select } from "../common/Select";
 import { useProjects, useAuth, type Project } from "../../context";
 import type { Provider } from "../../types";
 
@@ -91,6 +92,7 @@ function SettingsNavItem({
 
 function ProvidersSettings() {
   const { authFetch } = useAuth();
+  const { projects, projectsEnabled } = useProjects();
   const [providers, setProviders] = useState<Provider[]>([]);
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [apiKey, setApiKey] = useState("");
@@ -213,7 +215,7 @@ function ProvidersSettings() {
           </p>
         </div>
 
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {llmProviders.map(provider => (
             <ProviderKeyCard
               key={provider.id}
@@ -251,7 +253,7 @@ function ProvidersSettings() {
           </p>
         </div>
 
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {integrations.map(provider => (
             <IntegrationKeyCard
               key={provider.id}
@@ -275,6 +277,9 @@ function ProvidersSettings() {
               onApiKeyChange={setApiKey}
               onSave={saveKey}
               onDelete={() => deleteKey(provider.id)}
+              projectsEnabled={projectsEnabled}
+              projects={projects}
+              onRefresh={fetchProviders}
             />
           ))}
         </div>
@@ -932,6 +937,22 @@ function ProviderKeyCard({
   );
 }
 
+interface IntegrationKey {
+  id: string;
+  provider_id: string;
+  key_hint: string;
+  is_valid: boolean;
+  project_id: string | null;
+  name: string | null;
+  created_at: string;
+}
+
+interface IntegrationKeyCardProps extends ProviderKeyCardProps {
+  projectsEnabled: boolean;
+  projects: Array<{ id: string; name: string; color: string }>;
+  onRefresh: () => void;
+}
+
 function IntegrationKeyCard({
   provider,
   isEditing,
@@ -945,20 +966,195 @@ function IntegrationKeyCard({
   onApiKeyChange,
   onSave,
   onDelete,
-}: ProviderKeyCardProps) {
+  projectsEnabled,
+  projects,
+  onRefresh,
+}: IntegrationKeyCardProps) {
+  const { authFetch } = useAuth();
+  const [keys, setKeys] = useState<IntegrationKey[]>([]);
+  const [selectedProjectId, setSelectedProjectId] = useState<string>("");
+  const [expanded, setExpanded] = useState(false);
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  // Fetch all keys for this provider
+  const fetchKeys = async () => {
+    try {
+      const res = await authFetch(`/api/keys/${provider.id}`);
+      const data = await res.json();
+      setKeys(data.keys || []);
+    } catch (e) {
+      console.error("Failed to fetch keys:", e);
+    }
+  };
+
+  useEffect(() => {
+    if (projectsEnabled) {
+      fetchKeys();
+    }
+  }, [provider.id, projectsEnabled]);
+
+  const handleSaveWithProject = async () => {
+    if (!apiKey) return;
+
+    try {
+      const res = await authFetch(`/api/keys/${provider.id}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          key: apiKey,
+          project_id: selectedProjectId || null,
+        }),
+      });
+
+      if (res.ok) {
+        onApiKeyChange("");
+        setSelectedProjectId("");
+        onCancelEdit();
+        fetchKeys();
+        onRefresh();
+      }
+    } catch (e) {
+      console.error("Failed to save key:", e);
+    }
+  };
+
+  const handleDeleteKey = async (keyId: string, keyName: string | null) => {
+    const confirmed = await confirm(
+      `Are you sure you want to remove this API key${keyName ? ` (${keyName})` : ""}?`,
+      { confirmText: "Remove", title: "Remove API Key" }
+    );
+    if (!confirmed) return;
+
+    try {
+      await authFetch(`/api/keys/by-id/${keyId}`, { method: "DELETE" });
+      fetchKeys();
+      onRefresh();
+    } catch (e) {
+      console.error("Failed to delete key:", e);
+    }
+  };
+
+  const globalKey = keys.find(k => !k.project_id);
+  const projectKeys = keys.filter(k => k.project_id);
+  const getProjectName = (projectId: string) => projects.find(p => p.id === projectId)?.name || "Unknown";
+  const getProjectColor = (projectId: string) => projects.find(p => p.id === projectId)?.color || "#666";
+
+  // Simple view when projects not enabled
+  if (!projectsEnabled) {
+    return (
+      <div className={`bg-[#111] border rounded-lg p-4 ${
+        provider.hasKey ? 'border-[#f97316]/20' : 'border-[#1a1a1a]'
+      }`}>
+        <div className="flex items-center justify-between mb-2">
+          <div>
+            <h3 className="font-medium">{provider.name}</h3>
+            <p className="text-sm text-[#666]">{provider.description || "MCP integration"}</p>
+          </div>
+          {provider.hasKey ? (
+            <span className="text-[#f97316] text-xs flex items-center gap-1 bg-[#f97316]/10 px-2 py-1 rounded">
+              <CheckIcon className="w-3 h-3" />
+              {provider.keyHint}
+            </span>
+          ) : (
+            <span className="text-[#666] text-xs bg-[#1a1a1a] px-2 py-1 rounded">
+              Not configured
+            </span>
+          )}
+        </div>
+
+        <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
+          {isEditing ? (
+            <div className="space-y-3">
+              <input
+                type="password"
+                value={apiKey}
+                onChange={e => onApiKeyChange(e.target.value)}
+                placeholder={provider.hasKey ? "Enter new API key..." : "Enter API key..."}
+                autoFocus
+                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
+              />
+              {error && <p className="text-red-400 text-sm">{error}</p>}
+              {success && <p className="text-green-400 text-sm">{success}</p>}
+              <div className="flex gap-2">
+                <button
+                  onClick={onCancelEdit}
+                  className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={onSave}
+                  disabled={!apiKey || saving}
+                  className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
+                >
+                  {testing ? "Validating..." : saving ? "Saving..." : "Save"}
+                </button>
+              </div>
+            </div>
+          ) : provider.hasKey ? (
+            <div className="flex items-center justify-between">
+              <a
+                href={provider.docsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-[#3b82f6] hover:underline"
+              >
+                View docs
+              </a>
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={onStartEdit}
+                  className="text-sm text-[#888] hover:text-[#e0e0e0]"
+                >
+                  Update key
+                </button>
+                <button
+                  onClick={onDelete}
+                  className="text-red-400 hover:text-red-300 text-sm"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <a
+                href={provider.docsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-[#3b82f6] hover:underline"
+              >
+                Get API key
+              </a>
+              <button
+                onClick={onStartEdit}
+                className="text-sm text-[#f97316] hover:text-[#fb923c]"
+              >
+                + Add key
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Enhanced view with project support
   return (
+    <>
+    {ConfirmDialog}
     <div className={`bg-[#111] border rounded-lg p-4 ${
-      provider.hasKey ? 'border-[#f97316]/20' : 'border-[#1a1a1a]'
+      keys.length > 0 ? 'border-[#f97316]/20' : 'border-[#1a1a1a]'
     }`}>
       <div className="flex items-center justify-between mb-2">
         <div>
           <h3 className="font-medium">{provider.name}</h3>
           <p className="text-sm text-[#666]">{provider.description || "MCP integration"}</p>
         </div>
-        {provider.hasKey ? (
+        {keys.length > 0 ? (
           <span className="text-[#f97316] text-xs flex items-center gap-1 bg-[#f97316]/10 px-2 py-1 rounded">
             <CheckIcon className="w-3 h-3" />
-            {provider.keyHint}
+            {keys.length} key{keys.length !== 1 ? "s" : ""}
           </span>
         ) : (
           <span className="text-[#666] text-xs bg-[#1a1a1a] px-2 py-1 rounded">
@@ -967,6 +1163,58 @@ function IntegrationKeyCard({
         )}
       </div>
 
+      {/* Keys List */}
+      {keys.length > 0 && (
+        <div className="mt-3 space-y-2">
+          {/* Global Key */}
+          {globalKey && (
+            <div className="flex items-center justify-between text-sm bg-[#0a0a0a] rounded px-3 py-2">
+              <div className="flex items-center gap-2">
+                <span className="text-[#888]">Global</span>
+                <span className="text-[#555]">·</span>
+                <span className="text-[#666] font-mono text-xs">{globalKey.key_hint}</span>
+              </div>
+              <button
+                onClick={() => handleDeleteKey(globalKey.id, "Global")}
+                className="text-red-400 hover:text-red-300 text-xs"
+              >
+                Remove
+              </button>
+            </div>
+          )}
+
+          {/* Project Keys - show first 2, expand for more */}
+          {projectKeys.slice(0, expanded ? undefined : 2).map(key => (
+            <div key={key.id} className="flex items-center justify-between text-sm bg-[#0a0a0a] rounded px-3 py-2">
+              <div className="flex items-center gap-2 min-w-0">
+                <span
+                  className="w-2 h-2 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: getProjectColor(key.project_id!) }}
+                />
+                <span className="text-[#888] truncate">{key.name || getProjectName(key.project_id!)}</span>
+                <span className="text-[#555]">·</span>
+                <span className="text-[#666] font-mono text-xs">{key.key_hint}</span>
+              </div>
+              <button
+                onClick={() => handleDeleteKey(key.id, key.name || getProjectName(key.project_id!))}
+                className="text-red-400 hover:text-red-300 text-xs flex-shrink-0 ml-2"
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+
+          {projectKeys.length > 2 && !expanded && (
+            <button
+              onClick={() => setExpanded(true)}
+              className="text-xs text-[#666] hover:text-[#888] w-full text-center py-1"
+            >
+              Show {projectKeys.length - 2} more...
+            </button>
+          )}
+        </div>
+      )}
+
       <div className="mt-3 pt-3 border-t border-[#1a1a1a]">
         {isEditing ? (
           <div className="space-y-3">
@@ -974,50 +1222,40 @@ function IntegrationKeyCard({
               type="password"
               value={apiKey}
               onChange={e => onApiKeyChange(e.target.value)}
-              placeholder={provider.hasKey ? "Enter new API key..." : "Enter API key..."}
+              placeholder="Enter API key..."
               autoFocus
               className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
             />
+
+            <Select
+              value={selectedProjectId}
+              onChange={setSelectedProjectId}
+              placeholder="Global (all projects)"
+              options={[
+                { value: "", label: "Global (all projects)" },
+                ...projects.map(p => ({ value: p.id, label: p.name }))
+              ]}
+            />
+
             {error && <p className="text-red-400 text-sm">{error}</p>}
             {success && <p className="text-green-400 text-sm">{success}</p>}
+
             <div className="flex gap-2">
               <button
-                onClick={onCancelEdit}
+                onClick={() => {
+                  onCancelEdit();
+                  setSelectedProjectId("");
+                }}
                 className="flex-1 px-3 py-1.5 border border-[#333] rounded text-sm hover:border-[#666]"
               >
                 Cancel
               </button>
               <button
-                onClick={onSave}
+                onClick={handleSaveWithProject}
                 disabled={!apiKey || saving}
                 className="flex-1 px-3 py-1.5 bg-[#f97316] text-black rounded text-sm font-medium disabled:opacity-50"
               >
-                {testing ? "Validating..." : saving ? "Saving..." : "Save"}
-              </button>
-            </div>
-          </div>
-        ) : provider.hasKey ? (
-          <div className="flex items-center justify-between">
-            <a
-              href={provider.docsUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm text-[#3b82f6] hover:underline"
-            >
-              View docs
-            </a>
-            <div className="flex items-center gap-3">
-              <button
-                onClick={onStartEdit}
-                className="text-sm text-[#888] hover:text-[#e0e0e0]"
-              >
-                Update key
-              </button>
-              <button
-                onClick={onDelete}
-                className="text-red-400 hover:text-red-300 text-sm"
-              >
-                Remove
+                {saving ? "Saving..." : "Save"}
               </button>
             </div>
           </div>
@@ -1029,7 +1267,7 @@ function IntegrationKeyCard({
               rel="noopener noreferrer"
               className="text-sm text-[#3b82f6] hover:underline"
             >
-              Get API key
+              {keys.length > 0 ? "View docs" : "Get API key"}
             </a>
             <button
               onClick={onStartEdit}
@@ -1041,6 +1279,7 @@ function IntegrationKeyCard({
         )}
       </div>
     </div>
+    </>
   );
 }