@swarmclawai/swarmclaw 0.7.3 → 0.7.4

package/src/components/memory/memory-sheet.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createMemory } from '@/lib/memory'
+import { getMemoryTierForCategory } from '@/lib/memory-presentation'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { SheetFooter } from '@/components/shared/sheet-footer'
@@ -24,6 +25,7 @@ export function MemorySheet() {
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [category, setCategory] = useState('note')
+  const [tier, setTier] = useState<'working' | 'durable' | 'archive'>(getMemoryTierForCategory('note'))
   const [agentId, setAgentId] = useState<string | null>(defaultAgentId)
   const [sharedWith, setSharedWith] = useState<string[]>([])
   const [saving, setSaving] = useState(false)
@@ -36,6 +38,7 @@ export function MemorySheet() {
     setTitle('')
     setContent('')
     setCategory('note')
+    setTier(getMemoryTierForCategory('note'))
     setSaving(false)
   } else if (!open && prevOpen) {
     setPrevOpen(false)
@@ -56,6 +59,11 @@ export function MemorySheet() {
         agentId,
         sessionId: null,
         sharedWith: sharedWith.length ? sharedWith : undefined,
+        metadata: {
+          tier,
+          scope: agentId ? 'agent' : 'global',
+          visibility: agentId ? (sharedWith.length ? 'shared' : 'private') : 'global',
+        },
       })
       triggerRefresh()
       onClose()
@@ -77,7 +85,7 @@ export function MemorySheet() {
 
       {/* Agent selector */}
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Assign to</label>
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Visibility</label>
         <div className="flex gap-2 flex-wrap">
           <button
             onClick={() => setAgentId(null)}
@@ -111,12 +119,12 @@ export function MemorySheet() {
         </div>
         {selectedAgent && (
           <p className="text-[11px] text-text-3/50 mt-2">
-            This memory will be available to <span className="text-text-2">{selectedAgent.name}</span> during conversations
+            Owned by <span className="text-text-2">{selectedAgent.name}</span>. Add collaborators below if other agents should be able to recall it too.
           </p>
         )}
         {!agentId && (
           <p className="text-[11px] text-text-3/50 mt-2">
-            Global memories are accessible to all agents
+            Global memories are accessible to every agent in the workspace.
           </p>
         )}
       </div>
@@ -167,7 +175,10 @@ export function MemorySheet() {
           {CATEGORIES.map((c) => (
             <button
               key={c}
-              onClick={() => setCategory(c)}
+              onClick={() => {
+                setCategory(c)
+                setTier(getMemoryTierForCategory(c))
+              }}
               className={`px-3 py-1.5 rounded-[8px] text-[12px] font-600 capitalize cursor-pointer transition-all border-none
                 ${category === c
                   ? 'bg-accent-soft text-accent-bright'
@@ -180,6 +191,23 @@ export function MemorySheet() {
         </div>
       </div>
 
+      <div className="mb-6">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Tier</label>
+        <select
+          value={tier}
+          onChange={(e) => setTier(e.target.value as typeof tier)}
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="working">Working: short-horizon, active context</option>
+          <option value="durable">Durable: keep this around as reusable knowledge</option>
+          <option value="archive">Archive: preserve, but keep less salient</option>
+        </select>
+        <p className="text-[11px] text-text-3/50 mt-2">
+          Tier controls how aggressively this memory should stay in active recall.
+        </p>
+      </div>
+
       {/* Content */}
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Content</label>

package/src/components/projects/project-detail.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { updateAgent } from '@/lib/agents'
@@ -102,7 +102,12 @@ export function ProjectDetail() {
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
 
   const [assignPickerOpen, setAssignPickerOpen] = useState(false)
-  const now = Date.now()
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => setNow(Date.now()), 60_000)
+    return () => window.clearInterval(intervalId)
+  }, [])
 
   const project = activeProjectFilter ? projects[activeProjectFilter] : null
 

package/src/components/providers/provider-list.tsx

@@ -10,19 +10,27 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
   const providerConfigs = useAppStore((s) => s.providerConfigs)
   const loadProviders = useAppStore((s) => s.loadProviders)
   const loadProviderConfigs = useAppStore((s) => s.loadProviderConfigs)
+  const gatewayProfiles = useAppStore((s) => s.gatewayProfiles)
+  const loadGatewayProfiles = useAppStore((s) => s.loadGatewayProfiles)
+  const externalAgents = useAppStore((s) => s.externalAgents)
+  const loadExternalAgents = useAppStore((s) => s.loadExternalAgents)
   const credentials = useAppStore((s) => s.credentials)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
   const setProviderSheetOpen = useAppStore((s) => s.setProviderSheetOpen)
   const setEditingProviderId = useAppStore((s) => s.setEditingProviderId)
+  const setGatewaySheetOpen = useAppStore((s) => s.setGatewaySheetOpen)
+  const setEditingGatewayId = useAppStore((s) => s.setEditingGatewayId)
   const [loaded, setLoaded] = useState(false)
 
   const refresh = useCallback(async () => {
-    await Promise.all([loadProviders(), loadProviderConfigs(), loadCredentials()])
+    await Promise.all([loadProviders(), loadProviderConfigs(), loadGatewayProfiles(), loadExternalAgents(), loadCredentials()])
     setLoaded(true)
-  }, [loadProviders, loadProviderConfigs, loadCredentials])
+  }, [loadProviders, loadProviderConfigs, loadGatewayProfiles, loadExternalAgents, loadCredentials])
 
   useEffect(() => { void refresh() }, [refresh])
   useWs('providers', loadProviders, 20_000)
+  useWs('gateways', loadGatewayProfiles, 20_000)
+  useWs('external_agents', loadExternalAgents, 20_000)
 
   const handleEdit = (id: string) => {
     setEditingProviderId(id)
@@ -41,6 +49,23 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
     await loadProviderConfigs()
   }
 
+  const handleEditGateway = (id: string | null) => {
+    setEditingGatewayId(id)
+    setGatewaySheetOpen(true)
+  }
+
+  const handleDeleteGateway = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/gateways/${id}`)
+    await loadGatewayProfiles()
+  }
+
+  const handleHealthCheckGateway = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('GET', `/gateways/${id}/health`)
+    await loadGatewayProfiles()
+  }
+
   // Merge built-in providers with custom configs
   const builtinItems = providers.map((p) => ({
     id: p.id,
@@ -74,6 +99,18 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
 
   return (
     <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Model Providers</div>
+        {!inSidebar && (
+          <button
+            type="button"
+            onClick={() => handleEditGateway(null)}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-700 text-text-2 hover:bg-white/[0.04] transition-all cursor-pointer"
+          >
+            + Gateway
+          </button>
+        )}
+      </div>
       <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
         {allItems.map((item, idx) => (
           <div
@@ -139,6 +176,125 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
           </div>
         ))}
       </div>
+
+      <div className="mt-8 mb-4 flex items-center justify-between">
+        <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">OpenClaw Gateways</div>
+        {!inSidebar && (
+          <button
+            type="button"
+            onClick={() => handleEditGateway(null)}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-700 text-text-2 hover:bg-white/[0.04] transition-all cursor-pointer"
+          >
+            + New Gateway
+          </button>
+        )}
+      </div>
+      <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
+        {gatewayProfiles.map((gateway, idx) => (
+          <div
+            key={gateway.id}
+            role="button"
+            tabIndex={0}
+            onClick={() => handleEditGateway(gateway.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                handleEditGateway(gateway.id)
+              }
+            }}
+            className="w-full text-left p-4 rounded-[14px] border transition-all duration-200
+              cursor-pointer hover:bg-white/[0.02] bg-surface border-white/[0.06] hover:border-white/[0.12] hover:scale-[1.01]"
+            style={{
+              animation: 'spring-in 0.5s var(--ease-spring) both',
+              animationDelay: `${(allItems.length + idx) * 0.04}s`,
+            }}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="min-w-0">
+                <div className="font-display text-[14px] font-600 text-text truncate">{gateway.name}</div>
+                <div className="text-[11px] text-text-3/60 font-mono truncate">{gateway.endpoint}</div>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                {gateway.isDefault && (
+                  <span className="text-[10px] font-700 px-2 py-0.5 rounded-[5px] bg-accent-bright/10 text-accent-bright uppercase tracking-wider">Default</span>
+                )}
+                <span className={`w-2 h-2 rounded-full ${
+                  gateway.status === 'healthy'
+                    ? 'bg-emerald-400'
+                    : gateway.status === 'degraded'
+                      ? 'bg-amber-400'
+                      : gateway.status === 'offline'
+                        ? 'bg-red-400'
+                        : 'bg-white/10'
+                }`} />
+              </div>
+            </div>
+            <div className="text-[12px] text-text-3/70">
+              {gateway.tags?.length ? gateway.tags.join(', ') : (gateway.notes || 'Dedicated OpenClaw control plane')}
+            </div>
+            {!inSidebar && (
+              <div className="mt-3 flex items-center gap-2">
+                <button onClick={(e) => void handleHealthCheckGateway(e, gateway.id)} className="px-2.5 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[11px] font-700 text-text-2 hover:bg-white/[0.04] cursor-pointer transition-all">
+                  Health
+                </button>
+                <button onClick={(e) => handleDeleteGateway(e, gateway.id)} className="px-2.5 py-1.5 rounded-[8px] border border-red-400/20 bg-red-400/[0.06] text-[11px] font-700 text-red-300 hover:bg-red-400/[0.1] cursor-pointer transition-all">
+                  Delete
+                </button>
+              </div>
+            )}
+          </div>
+        ))}
+        {gatewayProfiles.length === 0 && (
+          <div className="p-4 rounded-[14px] border border-dashed border-white/[0.08] text-[13px] text-text-3/70">
+            No gateway profiles yet. Add one to route OpenClaw agents by named control plane instead of a singleton default.
+          </div>
+        )}
+      </div>
+
+      {!inSidebar && (
+        <>
+          <div className="mt-8 mb-4 flex items-center justify-between">
+            <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">External Agent Runtimes</div>
+            <div className="text-[11px] text-text-3/60">Direct registration + heartbeat</div>
+          </div>
+          <div className="mb-3 rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-4 py-3 text-[12px] text-text-3/70">
+            External workers can register themselves at <code className="text-text-2">/api/external-agents/register</code> and then send heartbeats to
+            {' '}
+            <code className="text-text-2">/api/external-agents/&lt;id&gt;/heartbeat</code>.
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {externalAgents.map((runtime) => (
+              <div key={runtime.id} className="p-4 rounded-[14px] bg-surface border border-white/[0.06]">
+                <div className="flex items-center justify-between gap-3 mb-2">
+                  <div className="min-w-0">
+                    <div className="font-display text-[14px] font-600 text-text truncate">{runtime.name}</div>
+                    <div className="text-[11px] text-text-3/60 truncate">{runtime.sourceType} · {runtime.transport || 'custom'}</div>
+                  </div>
+                  <span className={`text-[10px] font-700 px-2 py-0.5 rounded-[5px] uppercase tracking-wider ${
+                    runtime.status === 'online'
+                      ? 'bg-emerald-400/10 text-emerald-300'
+                      : runtime.status === 'stale'
+                        ? 'bg-amber-400/10 text-amber-300'
+                        : 'bg-white/[0.04] text-text-3'
+                  }`}>
+                    {runtime.status}
+                  </span>
+                </div>
+                <div className="text-[12px] text-text-3/70">
+                  {runtime.provider || 'No provider'}
+                  {runtime.model ? ` · ${runtime.model}` : ''}
+                </div>
+                <div className="text-[11px] text-text-3/55 mt-2 font-mono truncate">{runtime.endpoint || runtime.workspace || runtime.id}</div>
+              </div>
+            ))}
+            {externalAgents.length === 0 && (
+              <div className="p-4 rounded-[14px] border border-dashed border-white/[0.08] text-[13px] text-text-3/70">
+                No external runtimes have registered yet.
+              </div>
+            )}
+          </div>
+        </>
+      )}
     </div>
   )
 }

package/src/components/providers/provider-sheet.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createProviderConfig, updateProviderConfig, deleteProviderConfig } from '@/lib/provider-config'
 import { api } from '@/lib/api-client'
+import { fetchProviderModelDiscovery } from '@/lib/provider-model-discovery-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { toast } from 'sonner'
 
@@ -35,10 +36,10 @@ export function ProviderSheet() {
   const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'pass' | 'fail'>('idle')
   const [testMessage, setTestMessage] = useState('')
 
-  // Ollama local models
-  const [localModels, setLocalModels] = useState<string[]>([])
-  const [localLoading, setLocalLoading] = useState(false)
-  const [localError, setLocalError] = useState('')
+  const [liveModels, setLiveModels] = useState<string[]>([])
+  const [liveLoading, setLiveLoading] = useState(false)
+  const [liveMessage, setLiveMessage] = useState('')
+  const [liveCached, setLiveCached] = useState(false)
 
   // Find editing provider in custom configs OR built-in list
   const editingCustom = editingId ? providerConfigs.find((c) => c.id === editingId) : null
@@ -50,8 +51,9 @@ export function ProviderSheet() {
     if (open) {
       loadCredentials()
       setNewModel('')
-      setLocalModels([])
-      setLocalError('')
+      setLiveModels([])
+      setLiveMessage('')
+      setLiveCached(false)
       setTestStatus('idle')
       setTestMessage('')
       if (editingCustom) {
@@ -79,28 +81,7 @@ export function ProviderSheet() {
         setIsEnabled(true)
       }
     }
-  }, [open, editingId])
-
-  // Fetch local Ollama models when editing Ollama provider
-  useEffect(() => {
-    if (!open || editingId !== 'ollama') return
-    setLocalLoading(true)
-    const endpoint = baseUrl || 'http://localhost:11434'
-    api<{ models: { name: string }[]; error?: string }>('GET', `/providers/ollama?endpoint=${encodeURIComponent(endpoint)}`)
-      .then((res) => {
-        if (res.error) {
-          setLocalError(res.error)
-          setLocalModels([])
-        } else {
-          setLocalModels(res.models.map((m) => m.name))
-        }
-      })
-      .catch(() => {
-        setLocalError('Failed to connect')
-        setLocalModels([])
-      })
-      .finally(() => setLocalLoading(false))
-  }, [open, editingId, baseUrl])
+  }, [open, editingId, credentials, editingBuiltin, editingCustom, loadCredentials])
 
   // Reset test status when connection params change
   useEffect(() => {
@@ -108,6 +89,12 @@ export function ProviderSheet() {
     setTestMessage('')
   }, [credentialId, baseUrl])
 
+  useEffect(() => {
+    setLiveModels([])
+    setLiveMessage('')
+    setLiveCached(false)
+  }, [editingId, credentialId, baseUrl, requiresApiKey])
+
   const handleTestConnection = async () => {
     setTestStatus('testing')
     setTestMessage('')
@@ -210,10 +197,43 @@ export function ProviderSheet() {
     setModels(list.join(', '))
   }
 
+  const handleLoadLiveModels = async (force = false) => {
+    if (!open) return
+    const providerId = editingId || 'custom'
+    setLiveLoading(true)
+    setLiveMessage('')
+    try {
+      const result = await fetchProviderModelDiscovery({
+        providerId,
+        credentialId,
+        endpoint: baseUrl,
+        force,
+        requiresApiKey: isBuiltin ? undefined : requiresApiKey,
+      })
+      setLiveModels(result.models)
+      setLiveCached(result.cached)
+      setLiveMessage(result.message || '')
+      if (!result.ok) {
+        toast.message(result.message || 'Live model discovery is unavailable.')
+        return
+      }
+      setModels(result.models.join(', '))
+      toast.success(`Loaded ${result.models.length} live model${result.models.length === 1 ? '' : 's'}`)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to load live models'
+      setLiveMessage(message)
+      toast.error(message)
+    } finally {
+      setLiveLoading(false)
+    }
+  }
+
   const credList = Object.values(credentials)
   const modelList = models.split(',').map((m) => m.trim()).filter(Boolean)
-  const isNew = !editing
   const showApiKey = isBuiltin ? editingBuiltin?.requiresApiKey || editingBuiltin?.optionalApiKey : requiresApiKey
+  const canDiscoverModels = isBuiltin
+    ? Boolean(editingBuiltin?.supportsModelDiscovery)
+    : !!baseUrl.trim()
 
   const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
 
@@ -254,26 +274,45 @@ export function ProviderSheet() {
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
           <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Models</label>
-          {isBuiltin && (
-            <button onClick={handleResetModels}
-              className="text-[11px] text-text-3 hover:text-text-2 transition-colors cursor-pointer bg-transparent border-none"
-              style={{ fontFamily: 'inherit' }}>
-              Reset to defaults
-            </button>
-          )}
+          <div className="flex items-center gap-3">
+            {canDiscoverModels && (
+              <button
+                onClick={() => { void handleLoadLiveModels(Boolean(liveModels.length)) }}
+                disabled={liveLoading}
+                className="text-[11px] text-accent-bright hover:brightness-110 transition-colors cursor-pointer bg-transparent border-none disabled:opacity-50 disabled:cursor-default"
+                style={{ fontFamily: 'inherit' }}
+              >
+                {liveLoading ? 'Loading live models...' : liveModels.length > 0 ? 'Refresh live list' : 'Load live models'}
+              </button>
+            )}
+            {isBuiltin && (
+              <button onClick={handleResetModels}
+                className="text-[11px] text-text-3 hover:text-text-2 transition-colors cursor-pointer bg-transparent border-none"
+                style={{ fontFamily: 'inherit' }}>
+                Reset to defaults
+              </button>
+            )}
+          </div>
         </div>
 
+        {(liveMessage || liveCached) && (
+          <p className="text-[11px] text-text-3/70 mb-3">
+            {liveMessage}
+            {liveCached ? ' Cached.' : ''}
+          </p>
+        )}
+
         {isBuiltin ? (
           <>
             <div className="flex flex-wrap gap-1.5 mb-3">
               {modelList.map((model, i) => {
-                const isLocal = editingId === 'ollama' && localModels.includes(model)
+                const isLive = liveModels.includes(model)
                 return (
                   <div key={`${model}-${i}`} className={`group/model flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border
-                    ${isLocal ? 'bg-emerald-500/[0.08] border-emerald-500/20' : 'bg-white/[0.04] border-white/[0.06]'}`}>
+                    ${isLive ? 'bg-emerald-500/[0.08] border-emerald-500/20' : 'bg-white/[0.04] border-white/[0.06]'}`}>
                     <span className="text-[12px] text-text-2 font-mono">{model}</span>
-                    {isLocal && (
-                      <span className="text-[9px] font-600 px-1.5 py-0.5 rounded-[4px] bg-emerald-500/15 text-emerald-400 uppercase tracking-wider">local</span>
+                    {isLive && (
+                      <span className="text-[9px] font-600 px-1.5 py-0.5 rounded-[4px] bg-emerald-500/15 text-emerald-400 uppercase tracking-wider">live</span>
                     )}
                     <button
                       onClick={() => handleRemoveModel(i)}
@@ -288,34 +327,6 @@ export function ProviderSheet() {
               })}
             </div>
 
-            {/* Ollama: show available local models not yet in the list */}
-            {editingId === 'ollama' && !localLoading && localModels.length > 0 && (() => {
-              const missing = localModels.filter((m) => !modelList.includes(m))
-              if (missing.length === 0) return null
-              return (
-                <div className="mb-3">
-                  <p className="text-[11px] text-text-3/60 mb-2">Available locally — click to add:</p>
-                  <div className="flex flex-wrap gap-1.5">
-                    {missing.map((m) => (
-                      <button key={m} onClick={() => { setModels(models ? models + ', ' + m : m) }}
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] bg-emerald-500/[0.05] border border-emerald-500/15
-                          hover:bg-emerald-500/10 transition-all cursor-pointer text-[12px] text-emerald-300/80 font-mono"
-                        style={{ fontFamily: 'inherit' }}>
-                        <span>+</span> {m}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )
-            })()}
-
-            {editingId === 'ollama' && localLoading && (
-              <p className="text-[11px] text-text-3/70 mb-3">Checking local Ollama instance...</p>
-            )}
-            {editingId === 'ollama' && localError && (
-              <p className="text-[11px] text-amber-400/60 mb-3">{localError}</p>
-            )}
-
             <div className="flex gap-2">
               <input
                 type="text"
@@ -431,13 +442,13 @@ export function ProviderSheet() {
                   onClick={async () => {
                     setSavingKey(true)
                     try {
-                      const cred = await api<any>('POST', '/credentials', { provider: editingId || name || 'custom', name: newKeyName.trim() || `${name || editingId || 'Custom'} key`, apiKey: newKeyValue.trim() })
+                      const cred = await api<{ id: string }>('POST', '/credentials', { provider: editingId || name || 'custom', name: newKeyName.trim() || `${name || editingId || 'Custom'} key`, apiKey: newKeyValue.trim() })
                       await loadCredentials()
                       setCredentialId(cred.id)
                       setAddingKey(false)
                       setNewKeyName('')
                       setNewKeyValue('')
-                    } catch (err: any) { toast.error(`Failed to save: ${err.message}`) }
+                    } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`) }
                     finally { setSavingKey(false) }
                   }}
                   className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40"

package/src/components/shared/bottom-sheet.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { XIcon } from 'lucide-react'
+import { Dialog as DialogPrimitive } from 'radix-ui'
 
 interface Props {
   open: boolean
@@ -10,21 +12,35 @@ interface Props {
 }
 
 export function BottomSheet({ open, onClose, children, wide }: Props) {
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-100 flex items-center justify-center p-6">
-      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
-      <div
-        className={`relative bg-raised w-full ${wide ? 'max-w-[640px]' : 'max-w-[520px]'} max-h-[85vh] flex flex-col
-          rounded-[24px] border border-white/[0.06]
-          shadow-[0_24px_80px_rgba(0,0,0,0.6),0_0_1px_rgba(255,255,255,0.05)]`}
-        style={{ animation: 'modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}
-      >
-        <div className="flex-1 overflow-y-auto px-8 pt-8 pb-8">
-          {children}
-        </div>
-      </div>
-    </div>
+    <DialogPrimitive.Root open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          className="fixed inset-0 z-100 bg-black/72 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        />
+        <DialogPrimitive.Content
+          className={`fixed inset-x-0 bottom-0 z-100 mx-auto flex max-h-[92vh] w-full flex-col bg-raised shadow-[0_24px_80px_rgba(0,0,0,0.6),0_0_1px_rgba(255,255,255,0.05)] outline-none
+            rounded-t-[24px] border border-white/[0.06]
+            data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom
+            sm:inset-x-auto sm:top-[50%] sm:bottom-auto sm:left-[50%] sm:w-[calc(100%-2rem)] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-[24px]
+            sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95
+            ${wide ? 'sm:max-w-[760px]' : 'sm:max-w-[560px]'}`}
+          style={{ animationDuration: '220ms' }}
+        >
+          <div className="relative shrink-0 px-4 pt-3 sm:px-5 sm:pt-5">
+            <div className="mx-auto h-1 w-10 rounded-full bg-white/[0.08] sm:hidden" />
+            <DialogPrimitive.Close
+              className="absolute right-3 top-2.5 inline-flex h-9 w-9 items-center justify-center rounded-[12px] border border-white/[0.06] bg-white/[0.03] text-text-3 transition-all hover:bg-white/[0.06] hover:text-text-2 focus:outline-none focus:ring-2 focus:ring-accent-bright/30 sm:right-4 sm:top-4"
+            >
+              <XIcon className="size-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          </div>
+          <div className="flex-1 overflow-y-auto px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-3 sm:px-8 sm:pb-8 sm:pt-5">
+            {children}
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
   )
 }