@swarmclawai/swarmclaw 0.5.3 → 0.6.2

package/src/components/shared/keyboard-shortcuts-dialog.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+
+interface Shortcut {
+  keys: string[]
+  description: string
+}
+
+interface ShortcutGroup {
+  title: string
+  shortcuts: Shortcut[]
+}
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent)
+const MOD = isMac ? '\u2318' : 'Ctrl'
+
+const GROUPS: ShortcutGroup[] = [
+  {
+    title: 'Navigation',
+    shortcuts: [
+      { keys: [MOD, 'K'], description: 'Open search' },
+      { keys: [MOD, 'Shift', 'A'], description: 'Switch agent' },
+      { keys: [MOD, 'N'], description: 'New chat' },
+      { keys: [MOD, 'Shift', 'T'], description: 'Jump to tasks' },
+    ],
+  },
+  {
+    title: 'Chat',
+    shortcuts: [
+      { keys: ['Enter'], description: 'Send message' },
+      { keys: ['Shift', 'Enter'], description: 'New line' },
+      { keys: ['Esc'], description: 'Cancel reply / close' },
+    ],
+  },
+  {
+    title: 'General',
+    shortcuts: [
+      { keys: ['?'], description: 'Show keyboard shortcuts' },
+    ],
+  },
+]
+
+function Kbd({ children }: { children: string }) {
+  return (
+    <kbd className="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-[5px] bg-white/[0.08] border border-white/[0.1] text-[11px] font-mono text-text-2 leading-none">
+      {children}
+    </kbd>
+  )
+}
+
+export function KeyboardShortcutsDialog() {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      // Ctrl+/ or Cmd+/
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault()
+        setOpen((v) => !v)
+        return
+      }
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+      if ((e.target as HTMLElement)?.isContentEditable) return
+      if (e.key === '?' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault()
+        setOpen((v) => !v)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-[420px] p-0 bg-surface/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+      >
+        <DialogTitle className="sr-only">Keyboard shortcuts</DialogTitle>
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-white/[0.06]">
+          <span className="text-[14px] font-600 text-text">Keyboard Shortcuts</span>
+          <kbd className="px-1.5 py-0.5 rounded-[5px] bg-white/[0.06] border border-white/[0.08] text-[10px] font-mono text-text-3">
+            ESC
+          </kbd>
+        </div>
+        <div className="py-2 max-h-[400px] overflow-y-auto">
+          {GROUPS.map((group) => (
+            <div key={group.title} className="px-5 py-2">
+              <h3 className="text-[11px] font-700 uppercase tracking-wider text-text-3/60 mb-2">
+                {group.title}
+              </h3>
+              <div className="flex flex-col gap-1.5">
+                {group.shortcuts.map((shortcut) => (
+                  <div
+                    key={shortcut.description}
+                    className="flex items-center justify-between py-1"
+                  >
+                    <span className="text-[13px] text-text-2">{shortcut.description}</span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.map((key, i) => (
+                        <Kbd key={i}>{key}</Kbd>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/shared/notification-center.tsx

@@ -34,7 +34,25 @@ const TYPE_ICON_COLORS: Record<AppNotification['type'], string> = {
   error: 'text-red-400',
 }
 
-export function NotificationCenter() {
+function resolveHttpUrl(raw: string | undefined): string | null {
+  if (!raw) return null
+  try {
+    const parsed = new URL(raw)
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.toString() : null
+  } catch {
+    return null
+  }
+}
+
+export function NotificationCenter({
+  variant = 'icon',
+  align = 'right',
+  direction = 'down',
+}: {
+  variant?: 'icon' | 'row'
+  align?: 'left' | 'right'
+  direction?: 'up' | 'down'
+}) {
   const [open, setOpen] = useState(false)
   const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -76,27 +94,42 @@ export function NotificationCenter() {
     if (!n.read) {
       markRead(n.id)
     }
-    // If there's an entity, we could navigate - for now just mark as read
+    const actionUrl = resolveHttpUrl(n.actionUrl)
+    if (actionUrl) {
+      window.open(actionUrl, '_blank', 'noopener,noreferrer')
+    }
     setOpen(false)
   }
 
+  const isRow = variant === 'row'
+  const panelAlignClass = align === 'left' ? 'left-0' : 'right-0'
+  const panelDirectionClass = direction === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'
+
   return (
     <div className="relative">
       <button
         ref={buttonRef}
         onClick={() => setOpen((v) => !v)}
-        className="relative flex items-center justify-center w-8 h-8 rounded-[8px] bg-transparent hover:bg-white/[0.05] transition-colors cursor-pointer border-none"
+        className={
+          isRow
+            ? 'relative w-full flex items-center gap-2.5 px-3 py-2 rounded-[10px] text-[13px] font-500 cursor-pointer transition-all bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04] border-none'
+            : 'relative flex items-center justify-center w-8 h-8 rounded-[8px] bg-transparent hover:bg-white/[0.05] transition-colors cursor-pointer border-none'
+        }
         aria-label="Notifications"
         title={unreadCount > 0 ? `${unreadCount} unread notifications` : 'Notifications'}
       >
         {/* Bell icon */}
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-2">
+        <svg width={isRow ? '16' : '16'} height={isRow ? '16' : '16'} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={isRow ? 'text-text-3 shrink-0' : 'text-text-2'}>
           <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
           <path d="M13.73 21a2 2 0 0 1-3.46 0" />
         </svg>
+        {isRow && <span className="text-[13px] font-500">Notifications</span>}
         {/* Badge */}
         {unreadCount > 0 && (
-          <span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 flex items-center justify-center rounded-full bg-red-500 text-[10px] font-700 text-white px-1 leading-none">
+          <span className={isRow
+            ? 'ml-auto min-w-[18px] h-[18px] flex items-center justify-center rounded-full bg-red-500 text-[10px] font-700 text-white px-1 leading-none'
+            : 'absolute -top-0.5 -right-0.5 min-w-[16px] h-4 flex items-center justify-center rounded-full bg-red-500 text-[10px] font-700 text-white px-1 leading-none'}
+          >
             {unreadCount > 99 ? '99+' : unreadCount}
           </span>
         )}
@@ -105,7 +138,7 @@ export function NotificationCenter() {
       {open && (
         <div
           ref={panelRef}
-          className="absolute right-0 top-full mt-2 w-[340px] max-h-[460px] bg-raised border border-white/[0.06] rounded-[14px] shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl z-90 flex flex-col overflow-hidden"
+          className={`absolute ${panelAlignClass} ${panelDirectionClass} w-[340px] max-h-[460px] bg-raised border border-white/[0.06] rounded-[14px] shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl z-90 flex flex-col overflow-hidden`}
           style={{ animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)' }}
         >
           {/* Header */}
@@ -164,6 +197,11 @@ export function NotificationCenter() {
                           {n.message}
                         </p>
                       )}
+                      {resolveHttpUrl(n.actionUrl) && (
+                        <span className="inline-block mt-1 text-[11px] text-accent-bright/90">
+                          {n.actionLabel || 'Open link'}
+                        </span>
+                      )}
                       {n.entityType && (
                         <span className="inline-block mt-1 text-[10px] text-text-3/40 font-mono">
                           {n.entityType}{n.entityId ? `:${n.entityId.slice(0, 8)}` : ''}

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

@@ -0,0 +1,115 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { api } from '@/lib/api-client'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+}
+
+export function ProfileSheet({ open, onClose }: Props) {
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+  const setUser = useAppStore((s) => s.setUser)
+  const currentUser = useAppStore((s) => s.currentUser)
+
+  const [name, setName] = useState('')
+  const [avatarSeed, setAvatarSeed] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setName(appSettings.userName || currentUser || '')
+      setAvatarSeed(appSettings.userAvatarSeed || '')
+    }
+  }, [open, appSettings.userName, appSettings.userAvatarSeed, currentUser])
+
+  const handleSave = async () => {
+    const trimmed = name.trim()
+    if (!trimmed || saving) return
+    setSaving(true)
+    try {
+      await api('PUT', '/settings', {
+        userName: trimmed.toLowerCase(),
+        userAvatarSeed: avatarSeed.trim() || undefined,
+      })
+      setUser(trimmed.toLowerCase())
+      await loadSettings()
+      onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSignOut = () => {
+    setUser(null)
+    onClose()
+  }
+
+  return (
+    <BottomSheet open={open} onClose={onClose}>
+      <div className="p-6 max-w-[400px] mx-auto">
+        <h2 className="font-display text-[18px] font-700 text-text mb-6 text-center">Profile</h2>
+
+        {/* Avatar preview */}
+        <div className="flex justify-center mb-6">
+          <AgentAvatar seed={avatarSeed || null} name={name || '?'} size={72} />
+        </div>
+
+        {/* Avatar seed */}
+        <div className="mb-4">
+          <label className="block text-[12px] font-600 text-text-2 mb-1.5">Avatar</label>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={avatarSeed}
+              onChange={(e) => setAvatarSeed(e.target.value)}
+              placeholder="Avatar seed (any text)"
+              className="flex-1 px-3 py-2 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[13px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+            />
+            <button
+              type="button"
+              onClick={() => setAvatarSeed(Math.random().toString(36).slice(2, 10))}
+              className="px-3 py-2 rounded-[8px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] shrink-0"
+            >
+              Randomize
+            </button>
+          </div>
+        </div>
+
+        {/* Name */}
+        <div className="mb-6">
+          <label className="block text-[12px] font-600 text-text-2 mb-1.5">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Your name"
+            className="w-full px-3 py-2 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[13px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+          />
+        </div>
+
+        {/* Save */}
+        <button
+          onClick={handleSave}
+          disabled={!name.trim() || saving}
+          className="w-full py-2.5 rounded-[8px] text-[13px] font-600 bg-accent-bright text-white hover:bg-accent-bright/90 transition-all disabled:opacity-50 cursor-pointer mb-4"
+        >
+          {saving ? 'Saving...' : 'Save'}
+        </button>
+
+        {/* Sign out */}
+        <button
+          onClick={handleSignOut}
+          className="w-full text-center text-[12px] text-text-3 hover:text-text-2 transition-all cursor-pointer bg-transparent border-none"
+        >
+          Sign in as different user
+        </button>
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/shared/reply-quote.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+interface Props {
+  senderName: string
+  text: string
+  onClick?: () => void
+}
+
+export function ReplyQuote({ senderName, text, onClick }: Props) {
+  const truncated = text.length > 120 ? text.slice(0, 120) + '...' : text
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-start gap-2 mb-1.5 text-left w-full bg-transparent border-none p-0 cursor-pointer group/reply"
+    >
+      <div className="w-0.5 shrink-0 self-stretch rounded-full bg-accent-bright/50" />
+      <div className="min-w-0 flex-1">
+        <span className="text-[11px] font-600 text-accent-bright">{senderName}</span>
+        <p className="text-[12px] text-text-3 leading-[1.4] break-words m-0 group-hover/reply:text-text-2 transition-colors">
+          {truncated}
+        </p>
+      </div>
+    </button>
+  )
+}

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

@@ -7,11 +7,12 @@ import { api } from '@/lib/api-client'
 import type { AppView } from '@/types'
 
 interface SearchResult {
-  type: 'task' | 'agent' | 'session' | 'schedule' | 'webhook' | 'skill'
+  type: 'task' | 'agent' | 'session' | 'schedule' | 'webhook' | 'skill' | 'message'
   id: string
   title: string
   description?: string
   status?: string
+  messageIndex?: number
 }
 
 const TYPE_ICONS: Record<SearchResult['type'], string> = {
@@ -21,11 +22,13 @@ const TYPE_ICONS: Record<SearchResult['type'], string> = {
   schedule: 'M12 6v6l4 2',
   webhook: 'M22 12h-4l-3 7L9 5l-3 7H2',
   skill: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z',
+  message: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
 }
 
 const TYPE_EXTRA_PATHS: Partial<Record<SearchResult['type'], string>> = {
   agent: 'M12 7a4 4 0 1 0 0-0.01',
   schedule: 'M12 12a10 10 0 1 0 0-0.01',
+  message: 'M8 10h8',
 }
 
 const TYPE_VIEW_MAP: Record<SearchResult['type'], AppView> = {
@@ -35,15 +38,17 @@ const TYPE_VIEW_MAP: Record<SearchResult['type'], AppView> = {
   schedule: 'schedules',
   webhook: 'webhooks',
   skill: 'skills',
+  message: 'agents',
 }
 
 const TYPE_LABELS: Record<SearchResult['type'], string> = {
   agent: 'Agent',
   task: 'Task',
-  session: 'Session',
+  session: 'Chat',
   schedule: 'Schedule',
   webhook: 'Webhook',
   skill: 'Skill',
+  message: 'Message',
 }
 
 export function SearchDialog() {
@@ -68,7 +73,7 @@ export function SearchDialog() {
   const setWebhookSheetOpen = useAppStore((s) => s.setWebhookSheetOpen)
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
   const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
-  const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
 
   // Global Cmd+K / Ctrl+K listener
   useEffect(() => {
@@ -91,12 +96,12 @@ export function SearchDialog() {
 
   // Reset on open
   useEffect(() => {
-    if (open) {
-      setQuery('')
-      setResults([])
-      setSelectedIdx(0)
-      setTimeout(() => inputRef.current?.focus(), 50)
-    }
+    if (!open) return
+    setQuery('')
+    setResults([])
+    setSelectedIdx(0)
+    const timer = setTimeout(() => inputRef.current?.focus(), 50)
+    return () => clearTimeout(timer)
   }, [open])
 
   // Debounced search
@@ -141,8 +146,18 @@ export function SearchDialog() {
         setTaskSheetOpen(true)
         break
       case 'session':
-        void setCurrentAgent(null)
+        setCurrentSession(result.id)
+        setActiveView('agents')
+        break
+      case 'message':
+        setCurrentSession(result.id)
         setActiveView('agents')
+        // Scroll to the matched message after the chat renders
+        if (result.messageIndex != null) {
+          setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('swarmclaw:scroll-to-message', { detail: { index: result.messageIndex } }))
+          }, 300)
+        }
         break
       case 'schedule':
         setEditingScheduleId(result.id)
@@ -185,7 +200,7 @@ export function SearchDialog() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         showCloseButton={false}
-        className="sm:max-w-[520px] p-0 bg-[#1a1a2e]/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+        className="sm:max-w-[520px] p-0 bg-surface/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
         onKeyDown={handleKeyDown}
       >
         <DialogTitle className="sr-only">Search</DialogTitle>
@@ -199,6 +214,7 @@ export function SearchDialog() {
             value={query}
             onChange={(e) => handleQueryChange(e.target.value)}
             placeholder="Search agents, tasks, schedules..."
+            aria-label="Search"
             className="flex-1 bg-transparent border-none outline-none text-[14px] text-text placeholder:text-text-3/60 font-[inherit]"
             autoFocus
           />
@@ -226,18 +242,18 @@ export function SearchDialog() {
           )}
           {results.map((result, idx) => (
             <button
-              key={`${result.type}-${result.id}`}
+              key={result.type === 'message' ? `${result.type}-${result.id}-${result.messageIndex}` : `${result.type}-${result.id}`}
               onClick={() => navigateTo(result)}
               onMouseEnter={() => setSelectedIdx(idx)}
-              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors border-none bg-transparent
+              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors border-none bg-transparent focus-visible:ring-1 focus-visible:ring-accent-bright/50 focus-visible:ring-inset
                 ${idx === selectedIdx ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`}
               style={{ fontFamily: 'inherit' }}
             >
               {/* Type icon */}
               <div className={`w-8 h-8 rounded-[8px] flex items-center justify-center shrink-0
-                ${idx === selectedIdx ? 'bg-[#6366F1]/20' : 'bg-white/[0.04]'}`}>
+                ${idx === selectedIdx ? 'bg-accent-bright/20' : 'bg-white/[0.04]'}`}>
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
-                  className={idx === selectedIdx ? 'text-[#818CF8]' : 'text-text-3'}>
+                  className={idx === selectedIdx ? 'text-accent-bright' : 'text-text-3'}>
                   <path d={TYPE_ICONS[result.type]} />
                   {TYPE_EXTRA_PATHS[result.type] && <path d={TYPE_EXTRA_PATHS[result.type]} />}
                 </svg>

package/src/components/shared/section-label.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  children: React.ReactNode
+  className?: string
+}
+
+export function SectionLabel({ children, className = '' }: Props) {
+  return (
+    <label className={`block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3 ${className}`}>
+      {children}
+    </label>
+  )
+}

package/src/components/shared/settings/plugin-manager.tsx

@@ -103,7 +103,7 @@ export function PluginManager() {
                   <div
                     onClick={() => togglePlugin(p.filename, !p.enabled)}
                     className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0
-                      ${p.enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                      ${p.enabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                   >
                     <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200
                       ${p.enabled ? 'left-[22px]' : 'left-0.5'}`} />

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

@@ -1,5 +1,9 @@
 'use client'
 
+import { useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import toast from 'react-hot-toast'
 import type { SettingsSectionProps } from './types'
 
 interface EmbeddingSectionProps extends SettingsSectionProps {
@@ -7,6 +11,12 @@ interface EmbeddingSectionProps extends SettingsSectionProps {
 }
 
 export function EmbeddingSection({ appSettings, patchSettings, inputClass, credList }: EmbeddingSectionProps) {
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const [addingKey, setAddingKey] = useState(false)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [newKeyValue, setNewKeyValue] = useState('')
+  const [savingKey, setSavingKey] = useState(false)
+
   return (
     <div className="mb-10">
       <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -60,20 +70,45 @@ export function EmbeddingSection({ appSettings, patchSettings, inputClass, credL
             </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>
+              {credList.filter((c) => c.provider === 'openai').length > 0 && !addingKey ? (
+                <div className="flex gap-2 items-center">
+                  <select
+                    value={appSettings.embeddingCredentialId || ''}
+                    onChange={(e) => patchSettings({ embeddingCredentialId: e.target.value || null })}
+                    className={`${inputClass} appearance-none cursor-pointer flex-1`}
+                    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>
+                  <button type="button" onClick={() => setAddingKey(true)} className="text-accent-bright text-[11px] font-600 cursor-pointer bg-transparent border-none hover:brightness-110 transition-all" style={{ fontFamily: 'inherit' }}>+ New</button>
+                </div>
               ) : (
-                <p className="text-[12px] text-text-3/60">No OpenAI API keys configured.</p>
+                <div className="space-y-2">
+                  <input type="text" value={newKeyName} onChange={e => setNewKeyName(e.target.value)} placeholder="Key name (optional)" className={inputClass} style={{ fontFamily: 'inherit' }} />
+                  <input type="password" value={newKeyValue} onChange={e => setNewKeyValue(e.target.value)} placeholder="sk-..." className={inputClass} style={{ fontFamily: 'inherit' }} />
+                  <div className="flex gap-2">
+                    <button type="button" disabled={savingKey || !newKeyValue.trim()} onClick={async () => {
+                      setSavingKey(true)
+                      try {
+                        const cred = await api<{ id: string }>('POST', '/credentials', { provider: 'openai', name: newKeyName.trim() || 'OpenAI key', apiKey: newKeyValue.trim() })
+                        await loadCredentials()
+                        patchSettings({ embeddingCredentialId: cred.id })
+                        setAddingKey(false)
+                        setNewKeyName('')
+                        setNewKeyValue('')
+                      } 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" style={{ fontFamily: 'inherit' }}>
+                      {savingKey ? 'Saving...' : 'Save Key'}
+                    </button>
+                    {credList.filter(c => c.provider === 'openai').length > 0 && (
+                      <button type="button" onClick={() => { setAddingKey(false); setNewKeyName(''); setNewKeyValue('') }} className="px-4 py-1.5 rounded-[8px] bg-surface-2 text-text-2 text-[12px] font-600 cursor-pointer border-none hover:bg-surface-3 transition-all" style={{ fontFamily: 'inherit' }}>Cancel</button>
+                    )}
+                  </div>
+                </div>
               )}
             </div>
           </>