@swarmclawai/swarmclaw 0.5.2 → 0.6.0

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

@@ -0,0 +1,223 @@
+'use client'
+
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
+import type { AppNotification } from '@/types'
+
+function timeAgo(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  return `${Math.floor(diff / 86_400_000)}d ago`
+}
+
+const TYPE_COLORS: Record<AppNotification['type'], string> = {
+  info: 'border-l-blue-400',
+  success: 'border-l-emerald-400',
+  warning: 'border-l-amber-400',
+  error: 'border-l-red-400',
+}
+
+const TYPE_ICONS: Record<AppNotification['type'], string> = {
+  info: 'i',
+  success: '\u2713',
+  warning: '!',
+  error: '\u2717',
+}
+
+const TYPE_ICON_COLORS: Record<AppNotification['type'], string> = {
+  info: 'text-blue-400',
+  success: 'text-emerald-400',
+  warning: 'text-amber-400',
+  error: 'text-red-400',
+}
+
+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)
+
+  const notifications = useAppStore((s) => s.notifications)
+  const unreadCount = useAppStore((s) => s.unreadNotificationCount)
+  const loadNotifications = useAppStore((s) => s.loadNotifications)
+  const markRead = useAppStore((s) => s.markNotificationRead)
+  const markAllRead = useAppStore((s) => s.markAllNotificationsRead)
+  const clearRead = useAppStore((s) => s.clearReadNotifications)
+
+  useEffect(() => {
+    loadNotifications()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleWsNotification = useCallback(() => {
+    loadNotifications()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  useWs('notifications', handleWsNotification, 30_000)
+
+  // Close panel when clicking outside
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (
+        panelRef.current && !panelRef.current.contains(e.target as Node) &&
+        buttonRef.current && !buttonRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const handleNotificationClick = (n: AppNotification) => {
+    if (!n.read) {
+      markRead(n.id)
+    }
+    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={
+          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={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={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>
+        )}
+      </button>
+
+      {open && (
+        <div
+          ref={panelRef}
+          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 */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.04] shrink-0">
+            <span className="text-[13px] font-600 text-text">Notifications</span>
+            <div className="flex items-center gap-2">
+              {unreadCount > 0 && (
+                <button
+                  onClick={markAllRead}
+                  className="text-[11px] font-500 text-text-3 hover:text-text cursor-pointer bg-transparent border-none transition-colors"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Mark all read
+                </button>
+              )}
+              {notifications.some((n) => n.read) && (
+                <button
+                  onClick={clearRead}
+                  className="text-[11px] font-500 text-text-3 hover:text-text cursor-pointer bg-transparent border-none transition-colors"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Clear read
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* List */}
+          <div className="flex-1 overflow-y-auto">
+            {notifications.length === 0 ? (
+              <div className="flex items-center justify-center py-10 text-[13px] text-text-3/50">
+                No notifications
+              </div>
+            ) : (
+              notifications.map((n) => (
+                <button
+                  key={n.id}
+                  onClick={() => handleNotificationClick(n)}
+                  className={`w-full text-left px-4 py-3 border-l-[3px] border-b border-b-white/[0.03] bg-transparent
+                    hover:bg-white/[0.03] transition-colors cursor-pointer border-t-0 border-r-0
+                    ${TYPE_COLORS[n.type]}
+                    ${n.read ? 'opacity-50' : ''}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <div className="flex items-start gap-2.5">
+                    <span className={`text-[12px] font-700 mt-0.5 shrink-0 w-4 text-center ${TYPE_ICON_COLORS[n.type]}`}>
+                      {TYPE_ICONS[n.type]}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-[12px] font-600 text-text truncate flex-1">{n.title}</span>
+                        <span className="text-[10px] text-text-3/50 shrink-0">{timeAgo(n.createdAt)}</span>
+                      </div>
+                      {n.message && (
+                        <p className="text-[11px] text-text-3 mt-0.5 leading-relaxed line-clamp-2 m-0">
+                          {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)}` : ''}
+                        </span>
+                      )}
+                    </div>
+                    {!n.read && (
+                      <span className="w-2 h-2 rounded-full bg-blue-400 mt-1.5 shrink-0" />
+                    )}
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,296 @@
+'use client'
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import type { AppView } from '@/types'
+
+interface SearchResult {
+  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> = {
+  agent: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2',
+  task: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2',
+  session: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
+  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> = {
+  agent: 'agents',
+  task: 'tasks',
+  session: 'agents',
+  schedule: 'schedules',
+  webhook: 'webhooks',
+  skill: 'skills',
+  message: 'agents',
+}
+
+const TYPE_LABELS: Record<SearchResult['type'], string> = {
+  agent: 'Agent',
+  task: 'Task',
+  session: 'Chat',
+  schedule: 'Schedule',
+  webhook: 'Webhook',
+  skill: 'Skill',
+  message: 'Message',
+}
+
+export function SearchDialog() {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [selectedIdx, setSelectedIdx] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const setActiveView = useAppStore((s) => s.setActiveView)
+  const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
+  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 setEditingScheduleId = useAppStore((s) => s.setEditingScheduleId)
+  const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const setEditingWebhookId = useAppStore((s) => s.setEditingWebhookId)
+  const setWebhookSheetOpen = useAppStore((s) => s.setWebhookSheetOpen)
+  const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
+  const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
+
+  // Global Cmd+K / Ctrl+K listener
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setOpen((v) => !v)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  // Listen for custom event from sidebar button
+  useEffect(() => {
+    const handler = () => setOpen(true)
+    window.addEventListener('swarmclaw:open-search', handler)
+    return () => window.removeEventListener('swarmclaw:open-search', handler)
+  }, [])
+
+  // Reset on open
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setResults([])
+      setSelectedIdx(0)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  // Debounced search
+  const doSearch = useCallback(async (q: string) => {
+    if (q.trim().length < 2) {
+      setResults([])
+      setLoading(false)
+      return
+    }
+    setLoading(true)
+    try {
+      const data = await api<{ results: SearchResult[] }>('GET', `/search?q=${encodeURIComponent(q)}`)
+      setResults(data.results)
+      setSelectedIdx(0)
+    } catch {
+      setResults([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const handleQueryChange = (value: string) => {
+    setQuery(value)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => doSearch(value), 300)
+  }
+
+  // Navigate to a result
+  const navigateTo = useCallback((result: SearchResult) => {
+    setOpen(false)
+    const view = TYPE_VIEW_MAP[result.type]
+    setActiveView(view)
+    setSidebarOpen(true)
+
+    switch (result.type) {
+      case 'agent':
+        setEditingAgentId(result.id)
+        setAgentSheetOpen(true)
+        break
+      case 'task':
+        setEditingTaskId(result.id)
+        setTaskSheetOpen(true)
+        break
+      case 'session':
+        setCurrentSession(result.id)
+        setActiveView('agents')
+        break
+      case 'message':
+        setCurrentSession(result.id)
+        setActiveView('agents')
+        break
+      case 'schedule':
+        setEditingScheduleId(result.id)
+        setScheduleSheetOpen(true)
+        break
+      case 'webhook':
+        setEditingWebhookId(result.id)
+        setWebhookSheetOpen(true)
+        break
+      case 'skill':
+        setEditingSkillId(result.id)
+        setSkillSheetOpen(true)
+        break
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIdx((i) => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && results[selectedIdx]) {
+      e.preventDefault()
+      navigateTo(results[selectedIdx])
+    }
+  }
+
+  // Scroll selected into view
+  useEffect(() => {
+    if (!listRef.current) return
+    const el = listRef.current.children[selectedIdx] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIdx])
+
+  return (
+    <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"
+        onKeyDown={handleKeyDown}
+      >
+        <DialogTitle className="sr-only">Search</DialogTitle>
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06]">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
+            <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) => handleQueryChange(e.target.value)}
+            placeholder="Search agents, tasks, schedules..."
+            className="flex-1 bg-transparent border-none outline-none text-[14px] text-text placeholder:text-text-3/60 font-[inherit]"
+            autoFocus
+          />
+          <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 shrink-0">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="max-h-[360px] overflow-y-auto py-1">
+          {loading && query.length >= 2 && (
+            <div className="px-4 py-8 text-center text-[13px] text-text-3">
+              Searching...
+            </div>
+          )}
+          {!loading && query.length >= 2 && results.length === 0 && (
+            <div className="px-4 py-8 text-center text-[13px] text-text-3">
+              No results found
+            </div>
+          )}
+          {!loading && query.length < 2 && (
+            <div className="px-4 py-8 text-center text-[13px] text-text-3/60">
+              Type at least 2 characters to search
+            </div>
+          )}
+          {results.map((result, idx) => (
+            <button
+              key={`${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
+                ${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-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'}>
+                  <path d={TYPE_ICONS[result.type]} />
+                  {TYPE_EXTRA_PATHS[result.type] && <path d={TYPE_EXTRA_PATHS[result.type]} />}
+                </svg>
+              </div>
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-500 text-text truncate">{result.title}</span>
+                  {result.status && (
+                    <span className="px-1.5 py-0.5 rounded-[4px] bg-white/[0.06] text-[10px] font-500 text-text-3 shrink-0">
+                      {result.status}
+                    </span>
+                  )}
+                </div>
+                {result.description && (
+                  <p className="text-[11px] text-text-3 truncate mt-0.5 m-0">{result.description}</p>
+                )}
+              </div>
+              {/* Type label */}
+              <span className="text-[10px] text-text-3/60 uppercase tracking-wider shrink-0">
+                {TYPE_LABELS[result.type]}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* Footer hint */}
+        {results.length > 0 && (
+          <div className="flex items-center gap-3 px-4 py-2 border-t border-white/[0.06] text-[11px] text-text-3/50">
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px] font-mono">↑↓</kbd>
+              navigate
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px] font-mono">↵</kbd>
+              open
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px] font-mono">esc</kbd>
+              close
+            </span>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

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'}`} />