@swarmclawai/swarmclaw 0.2.0

package/src/components/shared/settings/section-embedding.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+interface EmbeddingSectionProps extends SettingsSectionProps {
+  credList: Array<{ id: string; name: string; provider: string }>
+}
+
+export function EmbeddingSection({ appSettings, patchSettings, inputClass, credList }: EmbeddingSectionProps) {
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Embeddings
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Enable semantic search for agent memory. Requires an embedding model provider.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Provider</label>
+        <div className="grid grid-cols-4 gap-2 mb-5">
+          {[
+            { id: null, name: 'Off' },
+            { id: 'local' as const, name: 'Local (Free)' },
+            { id: 'openai' as const, name: 'OpenAI' },
+            { id: 'ollama' as const, name: 'Ollama' },
+          ].map((p) => (
+            <button
+              key={String(p.id)}
+              onClick={() => patchSettings({ embeddingProvider: p.id, embeddingModel: null, embeddingCredentialId: null })}
+              className={`py-3 px-3 rounded-[12px] text-center cursor-pointer transition-all text-[13px] font-600 border
+                ${(appSettings.embeddingProvider || null) === p.id
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-bg border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {p.name}
+            </button>
+          ))}
+        </div>
+
+        {appSettings.embeddingProvider === 'local' && (
+          <p className="text-[12px] text-text-3/80 mb-5">
+            Runs <span className="text-text-2 font-600">all-MiniLM-L6-v2</span> locally in Node.js — no API key, no cost, works offline. Model downloads once (~23MB).
+          </p>
+        )}
+
+        {appSettings.embeddingProvider === 'openai' && (
+          <>
+            <div className="mb-5">
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Model</label>
+              <select
+                value={appSettings.embeddingModel || 'text-embedding-3-small'}
+                onChange={(e) => patchSettings({ embeddingModel: e.target.value })}
+                className={`${inputClass} appearance-none cursor-pointer`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                <option value="text-embedding-3-small">text-embedding-3-small</option>
+                <option value="text-embedding-3-large">text-embedding-3-large</option>
+              </select>
+            </div>
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">API Key</label>
+              {credList.filter((c) => c.provider === 'openai').length > 0 ? (
+                <select
+                  value={appSettings.embeddingCredentialId || ''}
+                  onChange={(e) => patchSettings({ embeddingCredentialId: e.target.value || null })}
+                  className={`${inputClass} appearance-none cursor-pointer`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <option value="">Select a key...</option>
+                  {credList.filter((c) => c.provider === 'openai').map((c) => (
+                    <option key={c.id} value={c.id}>{c.name}</option>
+                  ))}
+                </select>
+              ) : (
+                <p className="text-[12px] text-text-3/60">No OpenAI API keys configured.</p>
+              )}
+            </div>
+          </>
+        )}
+
+        {appSettings.embeddingProvider === 'ollama' && (
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Model</label>
+            <input
+              type="text"
+              value={appSettings.embeddingModel || 'nomic-embed-text'}
+              onChange={(e) => patchSettings({ embeddingModel: e.target.value })}
+              placeholder="nomic-embed-text"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Uses your local Ollama instance for embeddings</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/shared/settings/section-heartbeat.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import type { SettingsSectionProps } from './types'
+
+export function HeartbeatSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const [disablingHeartbeats, setDisablingHeartbeats] = useState(false)
+  const [heartbeatBulkNotice, setHeartbeatBulkNotice] = useState('')
+
+  const handleDisableAllHeartbeats = async () => {
+    if (disablingHeartbeats) return
+    setDisablingHeartbeats(true)
+    setHeartbeatBulkNotice('')
+    try {
+      const result = await api<{
+        ok: boolean
+        updatedSessions: number
+        cancelledQueued: number
+        abortedRunning: number
+      }>('POST', '/sessions/heartbeat', { action: 'disable_all' })
+      await loadSessions()
+      setHeartbeatBulkNotice(
+        `Stopped heartbeat on ${result.updatedSessions} session(s); cancelled ${result.cancelledQueued} queued run(s), aborted ${result.abortedRunning} running run(s).`,
+      )
+    } catch (err: any) {
+      setHeartbeatBulkNotice(err?.message || 'Failed to disable heartbeat for all sessions.')
+    } finally {
+      setDisablingHeartbeats(false)
+    }
+  }
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Heartbeat
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Configure ongoing heartbeat checks for long-lived sessions.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Interval</label>
+            <input
+              type="text"
+              value={appSettings.heartbeatInterval ?? appSettings.heartbeatIntervalSec ?? '30m'}
+              onChange={(e) => {
+                const val = e.target.value.trim()
+                patchSettings({ heartbeatInterval: val || null })
+              }}
+              placeholder="30m"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Duration string (e.g. 30m, 1h) or seconds. Set to 0 to disable.</p>
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Prompt</label>
+            <input
+              type="text"
+              value={appSettings.heartbeatPrompt || ''}
+              onChange={(e) => patchSettings({ heartbeatPrompt: e.target.value || null })}
+              placeholder="Leave blank for default"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Heartbeat Model</label>
+            <input
+              type="text"
+              value={appSettings.heartbeatModel || ''}
+              onChange={(e) => patchSettings({ heartbeatModel: e.target.value || null })}
+              placeholder="Leave blank for session default"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Ack Threshold (chars)</label>
+            <input
+              type="number"
+              min={0}
+              value={appSettings.heartbeatAckMaxChars ?? 300}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ heartbeatAckMaxChars: Number.isFinite(n) ? Math.max(0, n) : 300 })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Responses under this length are suppressed as HEARTBEAT_OK.</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Show OK Messages</label>
+            <button
+              onClick={() => patchSettings({ heartbeatShowOk: !(appSettings.heartbeatShowOk ?? false) })}
+              className={`px-3 py-2 rounded-[10px] border text-[12px] font-600 transition-colors cursor-pointer ${
+                appSettings.heartbeatShowOk
+                  ? 'border-emerald-400/25 bg-emerald-500/10 text-emerald-300'
+                  : 'border-white/[0.08] bg-white/[0.03] text-text-3'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {appSettings.heartbeatShowOk ? 'On' : 'Off'}
+            </button>
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Show Alert Messages</label>
+            <button
+              onClick={() => patchSettings({ heartbeatShowAlerts: !(appSettings.heartbeatShowAlerts ?? true) })}
+              className={`px-3 py-2 rounded-[10px] border text-[12px] font-600 transition-colors cursor-pointer ${
+                (appSettings.heartbeatShowAlerts ?? true)
+                  ? 'border-emerald-400/25 bg-emerald-500/10 text-emerald-300'
+                  : 'border-white/[0.08] bg-white/[0.03] text-text-3'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {(appSettings.heartbeatShowAlerts ?? true) ? 'On' : 'Off'}
+            </button>
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Delivery Target</label>
+            <input
+              type="text"
+              value={appSettings.heartbeatTarget || ''}
+              onChange={(e) => patchSettings({ heartbeatTarget: e.target.value || null })}
+              placeholder="none, last, or channel ID"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+
+        <div>
+          <p className="text-[11px] text-text-3/60 mt-2">
+            Internal ping text used for ongoing sessions. Leave blank to use the default.
+          </p>
+          <div className="mt-4 flex items-center gap-2.5">
+            <button
+              onClick={handleDisableAllHeartbeats}
+              disabled={disablingHeartbeats}
+              className="px-3.5 py-2 rounded-[10px] border border-rose-400/25 bg-rose-500/10 text-rose-300 hover:bg-rose-500/16 transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed text-[12px] font-600"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {disablingHeartbeats ? 'Stopping\u2026' : 'Stop All Session Heartbeats'}
+            </button>
+            <span className="text-[11px] text-text-3/70">
+              Disables heartbeat on every session and cancels queued heartbeat runs.
+            </span>
+          </div>
+          {heartbeatBulkNotice && (
+            <p className="text-[11px] text-text-3/70 mt-2">{heartbeatBulkNotice}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/settings/section-memory.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+export function MemorySection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Memory Retrieval
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Guardrails for memory graph traversal and lookup fan-out. These limits are enforced server-side.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">
+              Reference Depth
+            </label>
+            <input
+              type="number"
+              min={0}
+              max={12}
+              value={appSettings.memoryReferenceDepth ?? appSettings.memoryMaxDepth ?? 3}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                const depth = Number.isFinite(n) ? Math.max(0, Math.min(12, n)) : 3
+                patchSettings({ memoryReferenceDepth: depth, memoryMaxDepth: depth })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">How far linked memory traversal can go.</p>
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">
+              Max Per Lookup
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={200}
+              value={appSettings.maxMemoriesPerLookup ?? appSettings.memoryMaxPerLookup ?? 20}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                const perLookup = Number.isFinite(n) ? Math.max(1, Math.min(200, n)) : 20
+                patchSettings({ maxMemoriesPerLookup: perLookup, memoryMaxPerLookup: perLookup })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Total memories returned in one retrieval call.</p>
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">
+              Max Linked Expansion
+            </label>
+            <input
+              type="number"
+              min={0}
+              max={1000}
+              value={appSettings.maxLinkedMemoriesExpanded ?? 60}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                const linked = Number.isFinite(n) ? Math.max(0, Math.min(1000, n)) : 60
+                patchSettings({ maxLinkedMemoriesExpanded: linked })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Caps how many linked nodes can be expanded per lookup.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/settings/section-orchestrator.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { useAppStore } from '@/stores/use-app-store'
+import type { SettingsSectionProps } from './types'
+
+const NON_LANGGRAPH_PROVIDER_IDS = new Set(['claude-cli', 'codex-cli', 'opencode-cli'])
+
+export function OrchestratorSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const providers = useAppStore((s) => s.providers)
+  const credentials = useAppStore((s) => s.credentials)
+  const credList = Object.values(credentials)
+
+  const lgProviders = providers.filter((p) => !NON_LANGGRAPH_PROVIDER_IDS.has(String(p.id)))
+  const hasConfiguredLgProvider = !!appSettings.langGraphProvider && lgProviders.some((p) => p.id === appSettings.langGraphProvider)
+  const lgProvider = hasConfiguredLgProvider ? appSettings.langGraphProvider! : (lgProviders[0]?.id || 'anthropic')
+  const lgProviderInfo = lgProviders.find((p) => p.id === lgProvider) || providers.find((p) => p.id === lgProvider)
+  const lgCredentials = credList.filter((c) => c.provider === lgProvider)
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Orchestrator Engine
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        The LLM provider used by orchestrators for tool calling, agent generation, and task delegation.
+      </p>
+
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        {/* Provider picker */}
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Provider</label>
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mb-5">
+          {lgProviders.map((p) => (
+            <button
+              key={p.id}
+              onClick={() => patchSettings({ langGraphProvider: p.id, langGraphModel: '', langGraphCredentialId: null, langGraphEndpoint: null })}
+              className={`py-3 px-3 rounded-[12px] text-center cursor-pointer transition-all text-[13px] font-600 border
+                ${lgProvider === p.id
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-bg border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {p.name}
+            </button>
+          ))}
+        </div>
+        {lgProviders.length === 0 && (
+          <p className="text-[12px] text-text-3/60 mb-5">
+            No orchestration-compatible providers available. Add an API provider in Providers.
+          </p>
+        )}
+
+        {/* Model picker */}
+        {lgProviderInfo && lgProviderInfo.models.length > 0 && (
+          <div className="mb-5">
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Model</label>
+            <select
+              value={appSettings.langGraphModel || lgProviderInfo.models[0]}
+              onChange={(e) => patchSettings({ langGraphModel: e.target.value })}
+              className={`${inputClass} appearance-none cursor-pointer`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {lgProviderInfo.models.map((m) => (
+                <option key={m} value={m}>{m}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {(lgProviderInfo?.requiresEndpoint || !!appSettings.langGraphEndpoint) && (
+          <div className="mb-5">
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Endpoint Override</label>
+            <input
+              type="text"
+              value={appSettings.langGraphEndpoint || ''}
+              onChange={(e) => patchSettings({ langGraphEndpoint: e.target.value || null })}
+              placeholder={lgProviderInfo?.defaultEndpoint || 'https://api.example.com/v1'}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <p className="text-[11px] text-text-3/60 mt-2">Leave empty to use the provider default endpoint.</p>
+          </div>
+        )}
+
+        {/* API Key picker */}
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">API Key</label>
+          {lgCredentials.length > 0 ? (
+            <select
+              value={appSettings.langGraphCredentialId || ''}
+              onChange={(e) => patchSettings({ langGraphCredentialId: e.target.value || null })}
+              className={`${inputClass} appearance-none cursor-pointer`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <option value="">Select a key...</option>
+              {lgCredentials.map((c) => (
+                <option key={c.id} value={c.id}>{c.name}</option>
+              ))}
+            </select>
+          ) : (
+            <p className="text-[12px] text-text-3/60">
+              No {lgProvider} API keys configured. Add one below in the Providers section.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/settings/section-providers.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { createCredential, deleteCredential } from '@/lib/sessions'
+import { toast } from 'sonner'
+import type { ProviderType } from '@/types'
+import type { SettingsSectionProps } from './types'
+
+export function ProvidersSection({ inputClass }: SettingsSectionProps) {
+  const providers = useAppStore((s) => s.providers)
+  const credentials = useAppStore((s) => s.credentials)
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+
+  const credList = Object.values(credentials)
+
+  const [addProvider, setAddProvider] = useState<ProviderType | null>(null)
+  const [newName, setNewName] = useState('')
+  const [newKey, setNewKey] = useState('')
+  const [deleting, setDeleting] = useState<string | null>(null)
+
+  const handleAdd = async () => {
+    if (!addProvider || !newKey.trim()) return
+    try {
+      await createCredential(addProvider, newName || `${addProvider} key`, newKey)
+      await loadCredentials()
+      setAddProvider(null)
+      setNewName('')
+      setNewKey('')
+      toast.success('API key added')
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to add API key')
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteCredential(id)
+      await loadCredentials()
+      setDeleting(null)
+      toast.success('API key deleted')
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to delete API key')
+    }
+  }
+
+  return (
+    <>
+      {/* Providers */}
+      <div className="mb-8">
+        <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-5">
+          Providers
+        </h3>
+        <div className="space-y-4">
+          {providers.map((p) => {
+            const providerCreds = credList.filter((c) => c.provider === p.id)
+            return (
+              <div key={p.id} className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="font-display text-[17px] font-600 tracking-[-0.01em]">{p.name}</span>
+                  <span className={`text-[12px] font-600 px-3 py-1 rounded-[8px]
+                    ${p.requiresApiKey
+                      ? providerCreds.length > 0 ? 'text-success bg-success/[0.1]' : 'text-text-3 bg-white/[0.04]'
+                      : 'text-success bg-success/[0.1]'}`}>
+                    {p.requiresApiKey
+                      ? providerCreds.length > 0 ? 'Connected' : 'No key'
+                      : p.optionalApiKey
+                        ? providerCreds.length > 0 ? 'Local + Cloud' : 'Local'
+                        : p.requiresEndpoint ? 'Local' : 'Built-in'}
+                  </span>
+                </div>
+                <div className="text-[13px] text-text-2/50 font-mono">
+                  {p.models.slice(0, 3).join(', ')}
+                  {p.models.length > 3 && ` +${p.models.length - 3} more`}
+                </div>
+
+                {(p.requiresApiKey || p.optionalApiKey) && providerCreds.length > 0 && (
+                  <div className="mt-5 space-y-2.5">
+                    {providerCreds.map((cred) => (
+                      <div key={cred.id} className="flex items-center gap-3 py-3 px-4 rounded-[12px] bg-bg border border-white/[0.06]">
+                        <span className="text-[14px] font-500 flex-1 truncate">{cred.name}</span>
+                        {deleting === cred.id ? (
+                          <div className="flex gap-2">
+                            <button
+                              onClick={() => setDeleting(null)}
+                              className="px-3 py-1.5 text-[13px] font-600 bg-transparent border-none text-text-3 cursor-pointer hover:text-text-2 transition-colors"
+                              style={{ fontFamily: 'inherit' }}
+                            >
+                              Keep
+                            </button>
+                            <button
+                              onClick={() => handleDelete(cred.id)}
+                              className="px-3 py-1.5 text-[13px] font-600 bg-danger text-white border-none cursor-pointer rounded-[8px] transition-colors hover:brightness-110"
+                              style={{ fontFamily: 'inherit' }}
+                            >
+                              Delete
+                            </button>
+                          </div>
+                        ) : (
+                          <button
+                            onClick={() => setDeleting(cred.id)}
+                            className="px-3 py-1.5 text-[13px] font-500 bg-transparent border-none text-text-3 cursor-pointer hover:text-danger transition-colors"
+                            style={{ fontFamily: 'inherit' }}
+                          >
+                            Remove
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {(p.requiresApiKey || p.optionalApiKey) && (
+                  <button
+                    onClick={() => setAddProvider(p.id)}
+                    className="mt-5 w-full py-3 rounded-[12px] border border-dashed border-white/[0.1]
+                      bg-transparent text-text-3 text-[13px] font-600 cursor-pointer
+                      hover:border-accent-bright/30 hover:text-accent-bright hover:bg-accent-soft transition-all duration-200"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    + Add API Key{p.optionalApiKey && !p.requiresApiKey ? ' (for cloud)' : ''}
+                  </button>
+                )}
+
+                {p.requiresEndpoint && (
+                  <div className="mt-5 text-[13px] text-text-3/50 font-mono">
+                    Endpoint: {(p as any).defaultEndpoint || 'http://localhost:11434'}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Add key form */}
+      {addProvider && (
+        <div className="mb-8 p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+          <div className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-4">
+            New {providers.find((p) => p.id === addProvider)?.name} API Key
+          </div>
+          <div className="space-y-4">
+            <input
+              type="text"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder="Key name (optional)"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <input
+              type="password"
+              value={newKey}
+              onChange={(e) => setNewKey(e.target.value)}
+              placeholder="sk-..."
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <div className="flex gap-3 pt-2">
+              <button
+                onClick={() => { setAddProvider(null); setNewName(''); setNewKey('') }}
+                className="flex-1 py-3 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 transition-colors"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleAdd}
+                disabled={!newKey.trim()}
+                className="flex-1 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Save Key
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}