@swarmclawai/swarmclaw 0.6.4 → 0.6.7

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

@@ -68,7 +68,7 @@ function AssignAgentPicker({ projectId, onClose }: { projectId: string; onClose:
               className="w-full flex items-center gap-2.5 px-3 py-2 rounded-[8px] text-left hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none"
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={a.avatarSeed} name={a.name} size={22} />
+              <AgentAvatar seed={a.avatarSeed} avatarUrl={a.avatarUrl} name={a.name} size={22} />
               <div className="min-w-0 flex-1">
                 <div className="text-[12px] text-text truncate">{a.name}</div>
                 <div className="text-[10px] text-text-3/40 truncate">{a.model || a.provider}</div>
@@ -312,7 +312,7 @@ export function ProjectDetail() {
                     className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer bg-transparent border-none text-left p-0"
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={28} />
                     <div className="min-w-0 flex-1">
                       <div className="text-[13px] font-600 text-text truncate">{agent.name}</div>
                       <div className="text-[11px] text-text-3/50 truncate">{agent.model || agent.provider}</div>
@@ -381,7 +381,7 @@ export function ProjectDetail() {
                     <span className="text-[13px] text-text truncate flex-1">{task.title}</span>
                     {agent && (
                       <span className="shrink-0 flex items-center gap-1.5 text-[11px] text-text-3/40">
-                        <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={16} />
+                        <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                         {agent.name}
                       </span>
                     )}
@@ -448,7 +448,7 @@ export function ProjectDetail() {
                       </span>
                       {agent && (
                         <span className="shrink-0 flex items-center gap-1.5 text-[11px] text-text-3/40">
-                          <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={16} />
+                          <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                         </span>
                       )}
                       {schedule.nextRunAt && (

package/src/components/schedules/schedule-list.tsx

@@ -3,6 +3,16 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { ScheduleCard } from './schedule-card'
+import { SCHEDULE_TEMPLATES, FEATURED_TEMPLATE_IDS } from '@/lib/schedule-templates'
+import { Newspaper, HeartPulse, PenLine, FileText } from 'lucide-react'
+
+const FEATURED_ICONS: Record<string, React.ComponentType<{ className?: string; size?: number }>> = {
+  Newspaper, HeartPulse, PenLine, FileText,
+}
+
+const featuredTemplates = SCHEDULE_TEMPLATES.filter((t) =>
+  (FEATURED_TEMPLATE_IDS as readonly string[]).includes(t.id),
+)
 
 interface Props {
   inSidebar?: boolean
@@ -12,6 +22,7 @@ export function ScheduleList({ inSidebar }: Props) {
   const schedules = useAppStore((s) => s.schedules)
   const loadSchedules = useAppStore((s) => s.loadSchedules)
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const setTemplatePrefill = useAppStore((s) => s.setScheduleTemplatePrefill)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const [search, setSearch] = useState('')
 
@@ -39,15 +50,50 @@ export function ScheduleList({ inSidebar }: Props) {
         <p className="font-display text-[15px] font-600 text-text-2">No schedules yet</p>
         <p className="text-[13px] text-text-3/50">Automate tasks with cron or intervals</p>
         {!inSidebar && (
-          <button
-            onClick={() => setScheduleSheetOpen(true)}
-            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white
-              text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
-              shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
-            style={{ fontFamily: 'inherit' }}
-          >
-            + New Schedule
-          </button>
+          <>
+            <button
+              onClick={() => setScheduleSheetOpen(true)}
+              className="mt-3 px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white
+                text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
+                shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
+              style={{ fontFamily: 'inherit' }}
+            >
+              + New Schedule
+            </button>
+            <div className="mt-6 w-full max-w-lg">
+              <p className="text-[12px] text-text-3/40 uppercase tracking-wider font-600 mb-3">Quick start</p>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
+                {featuredTemplates.map((tpl) => {
+                  const IconComp = FEATURED_ICONS[tpl.icon] || FileText
+                  return (
+                    <button
+                      key={tpl.id}
+                      onClick={() => {
+                        setTemplatePrefill({
+                          name: tpl.name,
+                          taskPrompt: tpl.defaults.taskPrompt,
+                          scheduleType: tpl.defaults.scheduleType,
+                          cron: tpl.defaults.cron,
+                          intervalMs: tpl.defaults.intervalMs,
+                        })
+                        setScheduleSheetOpen(true)
+                      }}
+                      className="flex flex-col items-center gap-2 p-4 rounded-[14px] border border-white/[0.06]
+                        bg-surface cursor-pointer transition-all duration-200 hover:bg-surface-2
+                        hover:border-white/[0.1] active:scale-[0.97]"
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      <div className="w-8 h-8 rounded-[8px] bg-accent-soft flex items-center justify-center">
+                        <IconComp size={14} className="text-accent-bright" />
+                      </div>
+                      <span className="text-[12px] font-600 text-text-2">{tpl.name}</span>
+                      <span className="text-[11px] text-text-3/50 leading-[1.3]">{tpl.description}</span>
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          </>
         )}
       </div>
     )

package/src/components/schedules/schedule-sheet.tsx

@@ -9,6 +9,16 @@ import { inputClass } from '@/components/shared/form-styles'
 import type { ScheduleType, ScheduleStatus } from '@/types'
 import cronstrue from 'cronstrue'
 import { SectionLabel } from '@/components/shared/section-label'
+import { SCHEDULE_TEMPLATES, type ScheduleTemplate } from '@/lib/schedule-templates'
+import {
+  Newspaper, BarChart3, HeartPulse, PenLine, Trash2,
+  Activity, ShieldCheck, DatabaseBackup, FileText,
+} from 'lucide-react'
+
+const TEMPLATE_ICONS: Record<string, React.ComponentType<{ className?: string; size?: number }>> = {
+  Newspaper, BarChart3, HeartPulse, PenLine, Trash2,
+  Activity, ShieldCheck, DatabaseBackup, FileText,
+}
 
 const CRON_PRESETS = [
   { label: 'Every hour', cron: '0 * * * *' },
@@ -44,8 +54,30 @@ function formatDate(d: Date): string {
     ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
-const STEPS = ['What', 'When', 'Review'] as const
-type Step = 0 | 1 | 2
+const STEPS_CREATE = ['Template', 'What', 'When', 'Review'] as const
+const STEPS_EDIT = ['What', 'When', 'Review'] as const
+type Step = 0 | 1 | 2 | 3
+
+function applyTemplate(
+  tpl: ScheduleTemplate,
+  setters: {
+    setName: (v: string) => void
+    setTaskPrompt: (v: string) => void
+    setScheduleType: (v: ScheduleType) => void
+    setCron: (v: string) => void
+    setIntervalMs: (v: number) => void
+    setCustomCron: (v: boolean) => void
+  },
+) {
+  setters.setName(tpl.name)
+  setters.setTaskPrompt(tpl.defaults.taskPrompt)
+  setters.setScheduleType(tpl.defaults.scheduleType)
+  if (tpl.defaults.cron) {
+    setters.setCron(tpl.defaults.cron)
+    setters.setCustomCron(!CRON_PRESETS.some((p) => p.cron === tpl.defaults.cron))
+  }
+  if (tpl.defaults.intervalMs) setters.setIntervalMs(tpl.defaults.intervalMs)
+}
 
 export function ScheduleSheet() {
   const open = useAppStore((s) => s.scheduleSheetOpen)
@@ -56,6 +88,8 @@ export function ScheduleSheet() {
   const loadSchedules = useAppStore((s) => s.loadSchedules)
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const templatePrefill = useAppStore((s) => s.scheduleTemplatePrefill)
+  const setTemplatePrefill = useAppStore((s) => s.setScheduleTemplatePrefill)
 
   const [step, setStep] = useState<Step>(0)
   const [name, setName] = useState('')
@@ -68,13 +102,21 @@ export function ScheduleSheet() {
   const [customCron, setCustomCron] = useState(false)
 
   const editing = editingId ? schedules[editingId] : null
+  const isCreating = !editing
+  const steps = isCreating ? STEPS_CREATE : STEPS_EDIT
   const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
 
+  // Compute which logical step we're on (template step only exists in create mode)
+  const templateStep = isCreating ? 0 : -1
+  const whatStep = isCreating ? 1 : 0
+  const whenStep = isCreating ? 2 : 1
+  const reviewStep = isCreating ? 3 : 2
+
   useEffect(() => {
     if (open) {
       loadAgents()
-      setStep(0)
       if (editing) {
+        setStep(0)
         setName(editing.name || '')
         setAgentId(editing.agentId)
         setTaskPrompt(editing.taskPrompt)
@@ -83,7 +125,22 @@ export function ScheduleSheet() {
         setIntervalMs(editing.intervalMs || 3600000)
         setStatus(editing.status)
         setCustomCron(!CRON_PRESETS.some((p) => p.cron === editing.cron))
+      } else if (templatePrefill) {
+        // Opened from a quick-start card with pre-filled values
+        setName(templatePrefill.name)
+        setTaskPrompt(templatePrefill.taskPrompt)
+        setScheduleType(templatePrefill.scheduleType)
+        if (templatePrefill.cron) {
+          setCron(templatePrefill.cron)
+          setCustomCron(!CRON_PRESETS.some((p) => p.cron === templatePrefill.cron))
+        }
+        if (templatePrefill.intervalMs) setIntervalMs(templatePrefill.intervalMs)
+        setAgentId('')
+        setStatus('active')
+        setStep(1) // Skip template picker, go to "What" step
+        setTemplatePrefill(null)
       } else {
+        setStep(0) // Start at template picker
         setName('')
         setAgentId('')
         setTaskPrompt('')
@@ -153,15 +210,17 @@ export function ScheduleSheet() {
 
       {/* Step indicator */}
       <div className="flex items-center gap-2 mb-10">
-        {STEPS.map((label, i) => (
+        {steps.map((label, i) => (
           <div key={label} className="flex items-center gap-2">
             {i > 0 && <div className={`w-8 h-px ${i <= step ? 'bg-accent-bright/40' : 'bg-white/[0.06]'}`} />}
             <button
               onClick={() => {
-                // Allow going back, but only forward if valid
                 if (i < step) setStep(i as Step)
-                else if (i === 1 && step === 0 && step0Valid) setStep(1)
-                else if (i === 2 && step === 1 && step1Valid) setStep(2)
+                else if (i === step + 1) {
+                  if (step === whatStep && step0Valid) setStep(i as Step)
+                  else if (step === whenStep && step1Valid) setStep(i as Step)
+                  else if (step === templateStep) setStep(i as Step)
+                }
               }}
               className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-[8px] text-[12px] font-600 cursor-pointer transition-all border-none
                 ${i === step
@@ -189,8 +248,50 @@ export function ScheduleSheet() {
         ))}
       </div>
 
-      {/* Step 0: What */}
-      {step === 0 && (
+      {/* Template Picker (create only) */}
+      {step === templateStep && isCreating && (
+        <div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
+            {SCHEDULE_TEMPLATES.map((tpl) => {
+              const IconComp = TEMPLATE_ICONS[tpl.icon] || FileText
+              return (
+                <button
+                  key={tpl.id}
+                  onClick={() => {
+                    const setters = { setName, setTaskPrompt, setScheduleType, setCron, setIntervalMs, setCustomCron }
+                    applyTemplate(tpl, setters)
+                    setStep(whatStep as Step)
+                  }}
+                  className="flex items-start gap-3.5 p-4 rounded-[14px] border border-white/[0.06] bg-surface
+                    text-left cursor-pointer transition-all duration-200 hover:bg-surface-2 hover:border-white/[0.1]
+                    active:scale-[0.98]"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <div className="w-9 h-9 rounded-[10px] bg-accent-soft flex items-center justify-center shrink-0 mt-0.5">
+                    <IconComp size={16} className="text-accent-bright" />
+                  </div>
+                  <div className="min-w-0">
+                    <div className="text-[14px] font-600 text-text mb-0.5">{tpl.name}</div>
+                    <div className="text-[12px] text-text-3/70 leading-[1.4]">{tpl.description}</div>
+                    <div className="mt-1.5 text-[11px] text-text-3/40 capitalize">{tpl.category}</div>
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+          <button
+            onClick={() => setStep(whatStep as Step)}
+            className="w-full py-3.5 rounded-[14px] border border-dashed border-white/[0.08] bg-transparent
+              text-text-3 text-[14px] font-600 cursor-pointer transition-all hover:bg-surface hover:text-text-2 hover:border-white/[0.12]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Start from scratch
+          </button>
+        </div>
+      )}
+
+      {/* Step: What */}
+      {step === whatStep && (
         <div>
           <div className="mb-8">
             <SectionLabel>Name</SectionLabel>
@@ -221,8 +322,8 @@ export function ScheduleSheet() {
         </div>
       )}
 
-      {/* Step 1: When */}
-      {step === 1 && (
+      {/* Step: When */}
+      {step === whenStep && (
         <div>
           <div className="mb-8">
             <SectionLabel>Schedule Type</SectionLabel>
@@ -334,8 +435,8 @@ export function ScheduleSheet() {
         </div>
       )}
 
-      {/* Step 2: Review */}
-      {step === 2 && (
+      {/* Step: Review */}
+      {step === reviewStep && (
         <div className="mb-8">
           <div className="p-5 rounded-[16px] bg-surface border border-white/[0.06] space-y-4">
             <div>
@@ -381,7 +482,7 @@ export function ScheduleSheet() {
             Delete
           </button>
         )}
-        {step > 0 && (
+        {step > (isCreating ? templateStep : 0) && step !== templateStep && (
           <button
             onClick={() => setStep((step - 1) as Step)}
             className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
@@ -391,17 +492,27 @@ export function ScheduleSheet() {
           </button>
         )}
         <div className="flex-1" />
-        <button
-          onClick={onClose}
-          className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
-          style={{ fontFamily: 'inherit' }}
-        >
-          Cancel
-        </button>
-        {step < 2 ? (
+        {step !== templateStep && (
+          <button
+            onClick={onClose}
+            className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Cancel
+          </button>
+        )}
+        {step === templateStep && isCreating ? (
+          <button
+            onClick={onClose}
+            className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Cancel
+          </button>
+        ) : step < reviewStep ? (
           <button
             onClick={() => setStep((step + 1) as Step)}
-            disabled={step === 0 ? !step0Valid : !step1Valid}
+            disabled={step === whatStep ? !step0Valid : !step1Valid}
             className="py-3.5 px-8 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
             style={{ fontFamily: 'inherit' }}
           >

package/src/components/secrets/secret-sheet.tsx

@@ -161,7 +161,7 @@ export function SecretSheet() {
                       }`}
                       style={{ fontFamily: 'inherit' }}
                     >
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                       <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                       {selected && (
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">

package/src/components/secrets/secrets-list.tsx

@@ -102,7 +102,7 @@ export function SecretsList({ inSidebar }: Props) {
                 <div className="flex items-center gap-1.5 mt-1.5 pl-[22px]">
                   <div className="flex items-center -space-x-1.5">
                     {scopedAgents.slice(0, 5).map((agent) => (
-                      <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                      <AgentAvatar key={agent.id} seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} className="ring-1 ring-surface" />
                     ))}
                   </div>
                   {scopedAgents.length > 5 && (

package/src/components/sessions/session-card.tsx

@@ -86,7 +86,7 @@ export function SessionCard({ session, active, onClick }: Props) {
       <div className="flex items-center gap-2.5">
         {agent && (
           <div className="relative shrink-0">
-            <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+            <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
             {(heartbeatEnabled || session.active) && (
               <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 ring-2 ring-[#0f0f1a]" />
             )}

package/src/components/shared/agent-picker-list.tsx

@@ -72,7 +72,7 @@ export function AgentPickerList({
             {active && (
               <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
             )}
-            <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={28} />
+            <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={28} />
             <span className={`text-[13px] font-600 flex-1 truncate ${active ? 'text-accent-bright' : 'text-text-2'}`}>
               {a.name}
             </span>

package/src/components/shared/agent-switch-dialog.tsx

@@ -115,7 +115,7 @@ export function AgentSwitchDialog() {
                 ${idx === selectedIdx ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
+              <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={28} />
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   <span className="text-[13px] font-500 text-text truncate">{agent.name}</span>

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

@@ -0,0 +1,237 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+interface CommandItem {
+  id: string
+  label: string
+  category: 'agent' | 'chat' | 'task' | 'nav'
+  onSelect: () => void
+}
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const agents = useAppStore((s) => s.agents)
+  const sessions = useAppStore((s) => s.sessions)
+  const tasks = useAppStore((s) => s.tasks)
+  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)
+
+  // Register keyboard shortcut
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setOpen((v) => !v)
+      }
+      if (e.key === 'Escape' && open) {
+        setOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [open])
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setSelectedIndex(0)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  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) {
+      result.push({
+        id: `nav:${v}`,
+        label: `Go to ${v}`,
+        category: 'nav',
+        onSelect: () => { setActiveView(v); setOpen(false) },
+      })
+    }
+
+    // Agents
+    for (const agent of Object.values(agents)) {
+      result.push({
+        id: `agent:${agent.id}`,
+        label: agent.name,
+        category: 'agent',
+        onSelect: () => { setEditingAgentId(agent.id); setAgentSheetOpen(true); setOpen(false) },
+      })
+    }
+
+    // Chats (sessions)
+    for (const session of Object.values(sessions)) {
+      if (session.name === '__main__') continue
+      result.push({
+        id: `chat:${session.id}`,
+        label: session.name || 'Untitled chat',
+        category: 'chat',
+        onSelect: () => { setCurrentSession(session.id); setActiveView('agents'); setOpen(false) },
+      })
+    }
+
+    // Tasks
+    for (const task of Object.values(tasks)) {
+      if (task.status === 'archived') continue
+      result.push({
+        id: `task:${task.id}`,
+        label: task.title,
+        category: 'task',
+        onSelect: () => { setEditingTaskId(task.id); setTaskSheetOpen(true); setOpen(false) },
+      })
+    }
+
+    return result
+  }, [agents, sessions, tasks, setActiveView, setCurrentSession, setEditingAgentId, setAgentSheetOpen, setEditingTaskId, setTaskSheetOpen])
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return items.slice(0, 20)
+    const q = query.toLowerCase()
+    return items
+      .filter((item) => item.label.toLowerCase().includes(q))
+      .slice(0, 20)
+  }, [items, query])
+
+  // Reset selection when results change
+  useEffect(() => { setSelectedIndex(0) }, [filtered])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && filtered[selectedIndex]) {
+      e.preventDefault()
+      filtered[selectedIndex].onSelect()
+    }
+  }, [filtered, selectedIndex])
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (!listRef.current) return
+    const el = listRef.current.children[selectedIndex] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex])
+
+  if (!open) return null
+
+  const categoryLabel = { agent: 'Agents', chat: 'Chats', task: 'Tasks', nav: 'Navigation' } as const
+  const categoryIcon = {
+    agent: (
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+      </svg>
+    ),
+    chat: (
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      </svg>
+    ),
+    task: (
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+      </svg>
+    ),
+    nav: (
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+    ),
+  }
+
+  // Group by category
+  const grouped = new Map<string, CommandItem[]>()
+  for (const item of filtered) {
+    const group = grouped.get(item.category) || []
+    group.push(item)
+    grouped.set(item.category, group)
+  }
+
+  let flatIndex = 0
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-start justify-center pt-[15vh]">
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={() => setOpen(false)} />
+      <div
+        className="relative w-full max-w-[520px] mx-4 bg-raised rounded-[16px] border border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] overflow-hidden"
+        style={{ animation: 'fade-in 0.15s ease' }}
+      >
+        {/* 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) => 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"
+          />
+          <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>
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="max-h-[360px] overflow-y-auto py-2">
+          {filtered.length === 0 ? (
+            <div className="px-4 py-8 text-center text-[13px] text-text-3/50">No results found</div>
+          ) : (
+            Array.from(grouped.entries()).map(([category, groupItems]) => (
+              <div key={category}>
+                <div className="px-4 py-1.5 text-[11px] font-600 text-text-3/50 uppercase tracking-wider">
+                  {categoryLabel[category as keyof typeof categoryLabel]}
+                </div>
+                {groupItems.map((item) => {
+                  const idx = flatIndex++
+                  return (
+                    <button
+                      key={item.id}
+                      onClick={item.onSelect}
+                      className={`w-full flex items-center gap-3 px-4 py-2.5 text-left border-none cursor-pointer transition-colors
+                        ${idx === selectedIndex ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-2 hover:bg-white/[0.04]'}`}
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      <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>
+                    </button>
+                  )
+                })}
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer hint */}
+        <div className="px-4 py-2 border-t border-white/[0.06] flex items-center gap-4 text-[11px] text-text-3/40">
+          <span className="flex items-center gap-1">
+            <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px]">&uarr;&darr;</kbd> navigate
+          </span>
+          <span className="flex items-center gap-1">
+            <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px]">&crarr;</kbd> select
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/connector-platform-icon.tsx

@@ -23,6 +23,7 @@ export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string;
   teams: { label: 'Teams', color: '#6264A7' },
   googlechat: { label: 'Google Chat', color: '#00AC47' },
   matrix: { label: 'Matrix', color: '#0DBD8B' },
+  email: { label: 'Email', color: '#EA4335' },
 }
 
 export function getConnectorPlatformLabel(platform: ConnectorPlatform): string {