@swarmclawai/swarmclaw 0.7.2 → 0.7.4

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/agent-picker-list.tsx

@@ -12,7 +12,7 @@ interface Props {
   onSelect: (agentId: string) => void
   /** Show a "None" option at the top for optional single-select */
   noneOption?: { label: string; onSelect: () => void }
-  /** Show orchestrator badge */
+  /** Show delegation-capable badge */
   showOrchBadge?: boolean
   /** Max height of the scrollable list */
   maxHeight?: number
@@ -76,7 +76,7 @@ export function AgentPickerList({
             <span className={`text-[13px] font-600 flex-1 truncate ${active ? 'text-accent-bright' : 'text-text-2'}`}>
               {a.name}
             </span>
-            {showOrchBadge && a.isOrchestrator && (
+            {showOrchBadge && a.platformAssignScope === 'all' && (
               <span className="text-[10px] text-text-3/60 flex items-center gap-0.5">
                 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M16 3h5v5"/><path d="M21 3l-7 7"/><path d="M8 21H3v-5"/><path d="M3 21l7-7"/></svg>
               </span>

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>
   )
 }

package/src/components/shared/command-palette.tsx

@@ -6,8 +6,10 @@ import { useAppStore } from '@/stores/use-app-store'
 interface CommandItem {
   id: string
   label: string
-  category: 'agent' | 'chat' | 'task' | 'nav'
-  onSelect: () => void
+  description?: string
+  keywords?: string[]
+  category: 'agent' | 'chat' | 'task' | 'nav' | 'setting'
+  onSelect: () => void | Promise<void>
 }
 
 export function CommandPalette() {
@@ -20,13 +22,22 @@ export function CommandPalette() {
   const agents = useAppStore((s) => s.agents)
   const sessions = useAppStore((s) => s.sessions)
   const tasks = useAppStore((s) => s.tasks)
+  const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
   const setCurrentSession = useAppStore((s) => s.setCurrentSession)
   const setActiveView = useAppStore((s) => s.setActiveView)
-  const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
-  const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
 
+  const openSettingsSection = useCallback((tabId?: string, sectionId?: string) => {
+    setActiveView('settings')
+    setOpen(false)
+    window.setTimeout(() => {
+      window.dispatchEvent(new CustomEvent('swarmclaw:settings-focus', {
+        detail: { tabId, sectionId },
+      }))
+    }, 80)
+  }, [setActiveView])
+
   // Register keyboard shortcut
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -54,32 +65,89 @@ export function CommandPalette() {
   const items = useMemo<CommandItem[]>(() => {
     const result: CommandItem[] = []
 
-    // Navigation items
-    const views = ['agents', 'tasks', 'chatrooms', 'schedules', 'connectors', 'providers', 'secrets', 'settings', 'memory', 'skills'] as const
-    for (const v of views) {
+    const views = [
+      { id: 'home', label: 'Home', description: 'Overview and triage', keywords: ['dashboard', 'overview', 'activity'] },
+      { id: 'agents', label: 'Agents', description: 'Agent chats and configuration', keywords: ['chat', 'assistant', 'default'] },
+      { id: 'tasks', label: 'Tasks', description: 'Task board and approvals', keywords: ['board', 'queue', 'backlog', 'approval'] },
+      { id: 'projects', label: 'Projects', description: 'Scoped workspaces for agents and tasks', keywords: ['workspace', 'scope'] },
+      { id: 'chatrooms', label: 'Chatrooms', description: 'Shared multi-agent conversations', keywords: ['group', 'room', 'mentions'] },
+      { id: 'schedules', label: 'Schedules', description: 'Recurring and timed automations', keywords: ['cron', 'automation', 'interval'] },
+      { id: 'connectors', label: 'Connectors', description: 'Bridges to Slack, Discord, Telegram, and more', keywords: ['discord', 'slack', 'telegram', 'whatsapp'] },
+      { id: 'memory', label: 'Memory', description: 'Stored agent memory and retrieval', keywords: ['knowledge', 'vector', 'retrieval'] },
+      { id: 'knowledge', label: 'Knowledge', description: 'Shared knowledge base', keywords: ['docs', 'entries', 'facts'] },
+      { id: 'providers', label: 'Providers', description: 'Model providers and endpoints', keywords: ['openai', 'anthropic', 'ollama', 'endpoint'] },
+      { id: 'secrets', label: 'Secrets', description: 'Credentials and encrypted secrets', keywords: ['api key', 'token', 'credential'] },
+      { id: 'settings', label: 'Settings', description: 'General app configuration', keywords: ['preferences', 'theme', 'heartbeat'] },
+    ] as const
+    for (const view of views) {
       result.push({
-        id: `nav:${v}`,
-        label: `Go to ${v}`,
+        id: `nav:${view.id}`,
+        label: `Go to ${view.label}`,
+        description: view.description,
+        keywords: [...view.keywords],
         category: 'nav',
-        onSelect: () => { setActiveView(v); setOpen(false) },
+        onSelect: () => { setActiveView(view.id); setOpen(false) },
       })
     }
 
-    // Agents
+    result.push(
+      {
+        id: 'setting:default-agent',
+        label: 'Default Agent Shortcut',
+        description: 'Choose which agent the sidebar shortcut opens',
+        keywords: ['main chat', 'default agent', 'shortcut'],
+        category: 'setting',
+        onSelect: () => openSettingsSection('general', 'user-preferences'),
+      },
+      {
+        id: 'setting:automation',
+        label: 'Automation Limits',
+        description: 'Heartbeat, autonomy, and delegation controls',
+        keywords: ['loops', 'coordination', 'delegation', 'heartbeat', 'automation'],
+        category: 'setting',
+        onSelect: () => openSettingsSection('agents', 'runtime-loop'),
+      },
+      {
+        id: 'setting:providers',
+        label: 'Provider Credentials',
+        description: 'Manage providers, endpoints, and secrets',
+        keywords: ['openai', 'anthropic', 'api keys', 'credentials', 'providers'],
+        category: 'setting',
+        onSelect: () => openSettingsSection('integrations', 'providers'),
+      },
+      {
+        id: 'setting:voice',
+        label: 'Voice & Search',
+        description: 'Voice output and web search defaults',
+        keywords: ['voice', 'tts', 'web search', 'search'],
+        category: 'setting',
+        onSelect: () => openSettingsSection('memory', 'voice'),
+      },
+    )
+
     for (const agent of Object.values(agents)) {
       result.push({
         id: `agent:${agent.id}`,
         label: agent.name,
+        description: `Open ${agent.name}'s chat`,
+        keywords: [agent.provider, agent.model, agent.description || ''].filter(Boolean),
         category: 'agent',
-        onSelect: () => { setEditingAgentId(agent.id); setAgentSheetOpen(true); setOpen(false) },
+        onSelect: async () => {
+          await setCurrentAgent(agent.id)
+          setActiveView('agents')
+          setOpen(false)
+        },
       })
     }
 
     // Chats (sessions)
     for (const session of Object.values(sessions)) {
+      const sessionAgent = session.agentId ? agents[session.agentId] : null
       result.push({
         id: `chat:${session.id}`,
         label: session.name || 'Untitled chat',
+        description: sessionAgent ? `Recent chat with ${sessionAgent.name}` : 'Direct model chat',
+        keywords: [session.provider, session.model, sessionAgent?.name || ''].filter(Boolean),
         category: 'chat',
         onSelect: () => { setCurrentSession(session.id); setActiveView('agents'); setOpen(false) },
       })
@@ -91,19 +159,25 @@ export function CommandPalette() {
       result.push({
         id: `task:${task.id}`,
         label: task.title,
+        description: `${task.status.charAt(0).toUpperCase() + task.status.slice(1)} task`,
+        keywords: [task.status, task.agentId || ''].filter(Boolean),
         category: 'task',
         onSelect: () => { setEditingTaskId(task.id); setTaskSheetOpen(true); setOpen(false) },
       })
     }
 
     return result
-  }, [agents, sessions, tasks, setActiveView, setCurrentSession, setEditingAgentId, setAgentSheetOpen, setEditingTaskId, setTaskSheetOpen])
+  }, [agents, openSettingsSection, sessions, setActiveView, setCurrentAgent, setCurrentSession, setEditingTaskId, setTaskSheetOpen, tasks])
 
   const filtered = useMemo(() => {
     if (!query.trim()) return items.slice(0, 20)
     const q = query.toLowerCase()
     return items
-      .filter((item) => item.label.toLowerCase().includes(q))
+      .filter((item) =>
+        item.label.toLowerCase().includes(q)
+        || item.description?.toLowerCase().includes(q)
+        || item.keywords?.some((keyword) => keyword.toLowerCase().includes(q)),
+      )
       .slice(0, 20)
   }, [items, query])
 
@@ -132,7 +206,7 @@ export function CommandPalette() {
 
   if (!open) return null
 
-  const categoryLabel = { agent: 'Agents', chat: 'Chats', task: 'Tasks', nav: 'Navigation' } as const
+  const categoryLabel = { agent: 'Agents', chat: 'Chats', task: 'Tasks', nav: 'Navigation', setting: 'Settings' } as const
   const categoryIcon = {
     agent: (
       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -154,6 +228,12 @@ export function CommandPalette() {
         <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
       </svg>
     ),
+    setting: (
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+      </svg>
+    ),
   }
 
   // Group by category
@@ -183,14 +263,14 @@ export function CommandPalette() {
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0 relative z-10">
             <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg>
-          <input
-            ref={inputRef}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Search agents, chats, tasks..."
-            className="flex-1 bg-transparent border-none outline-none text-[14px] text-text-1 placeholder:text-text-3/50"
-          />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search chats, agents, tasks, settings..."
+              className="flex-1 bg-transparent border-none outline-none text-[14px] text-text-1 placeholder:text-text-3/50"
+            />
           <kbd className="hidden md:inline-flex items-center px-1.5 py-0.5 rounded-[6px] bg-white/[0.06] text-[11px] text-text-3 font-500">
             esc
           </kbd>
@@ -220,7 +300,14 @@ export function CommandPalette() {
                         <div className="absolute left-0 top-1 bottom-1 w-1 rounded-r-full bg-accent-bright" style={{ animation: 'spring-in 0.3s var(--ease-spring)' }} />
                       )}
                       <span className="shrink-0 text-text-3">{categoryIcon[item.category as keyof typeof categoryIcon]}</span>
-                      <span className="text-[13px] font-500 truncate">{item.label}</span>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-[13px] font-500 truncate">{item.label}</div>
+                        {item.description && (
+                          <div className={`text-[11px] truncate ${idx === selectedIndex ? 'text-accent-bright/75' : 'text-text-3/55'}`}>
+                            {item.description}
+                          </div>
+                        )}
+                      </div>
                     </button>
                   )
                 })}

package/src/components/shared/confirm-dialog.tsx

@@ -1,5 +1,14 @@
 'use client'
 
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
 interface Props {
   open: boolean
   title: string
@@ -11,37 +20,43 @@ interface Props {
 }
 
 export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm', danger, onConfirm, onCancel }: 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/80 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative glass rounded-[20px] p-6 w-full max-w-[380px]
-        shadow-[0_24px_80px_rgba(0,0,0,0.5)]"
-        style={{ animation: 'fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}>
-        <h3 className="font-display text-[18px] font-700 tracking-[-0.02em] mb-2">{title}</h3>
-        <p className="text-[13px] text-text-2 mb-6 leading-relaxed">{message}</p>
-        <div className="flex gap-2.5">
-          <button
-            onClick={onCancel}
-            className="flex-1 py-2.5 rounded-[12px] border border-white/[0.06] bg-transparent text-text-2 text-[13px] font-600 cursor-pointer
-              hover:bg-surface transition-all duration-200"
-            style={{ fontFamily: 'inherit' }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            className={`flex-1 py-2.5 rounded-[12px] border-none text-[13px] font-600 cursor-pointer active:scale-[0.97] transition-all duration-200
-              ${danger
-                ? 'bg-danger text-white shadow-[0_4px_20px_rgba(244,63,94,0.2)]'
-                : 'bg-accent-bright text-white shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
-            style={{ fontFamily: 'inherit' }}
-          >
-            {confirmLabel}
-          </button>
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onCancel() }}>
+      <DialogContent
+        className="sm:max-w-[400px] rounded-[20px] border-white/[0.06] bg-raised p-0 shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
+      >
+        <div className="p-6">
+          <DialogHeader className="text-left">
+            <DialogTitle className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">
+              {title}
+            </DialogTitle>
+            <DialogDescription className="mt-2 text-[13px] leading-relaxed text-text-2">
+              {message}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="mt-6">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="flex-1 rounded-[12px] border border-white/[0.06] bg-transparent px-4 py-2.5 text-[13px] font-600 text-text-2 transition-all duration-200 hover:bg-surface"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              className={`flex-1 rounded-[12px] border-none px-4 py-2.5 text-[13px] font-600 text-white transition-all duration-200 active:scale-[0.98]
+                ${danger
+                  ? 'bg-danger shadow-[0_4px_20px_rgba(244,63,94,0.2)]'
+                  : 'bg-accent-bright shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {confirmLabel}
+            </button>
+          </DialogFooter>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }