@swarmclawai/swarmclaw 0.5.2 → 0.6.0

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

@@ -2,20 +2,45 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import type { Agent, BoardTask, Schedule } from '@/types'
+
+function relativeDate(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`
+  if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)}d ago`
+  return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+interface ProjectStats {
+  agents: number
+  tasks: number
+  completedTasks: number
+  schedules: number
+  lastActivity: number
+}
 
 export function ProjectList() {
   const projects = useAppStore((s) => s.projects)
   const loadProjects = useAppStore((s) => s.loadProjects)
-  const agents = useAppStore((s) => s.agents)
-  const tasks = useAppStore((s) => s.tasks)
+  const agents = useAppStore((s) => s.agents) as Record<string, Agent>
+  const tasks = useAppStore((s) => s.tasks) as Record<string, BoardTask>
+  const schedules = useAppStore((s) => s.schedules) as Record<string, Schedule>
   const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
   const setEditingProjectId = useAppStore((s) => s.setEditingProjectId)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const setActiveProjectFilter = useAppStore((s) => s.setActiveProjectFilter)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+  const loadSchedules = useAppStore((s) => s.loadSchedules)
   const [search, setSearch] = useState('')
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => { loadProjects() }, [])
+  useEffect(() => {
+    loadProjects()
+    loadTasks()
+    loadSchedules()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const filtered = useMemo(() => {
     return Object.values(projects)
@@ -26,97 +51,208 @@ export function ProjectList() {
       .sort((a, b) => b.updatedAt - a.updatedAt)
   }, [projects, search])
 
-  const entityCounts = useMemo(() => {
-    const counts: Record<string, { agents: number; tasks: number }> = {}
+  const statsMap = useMemo(() => {
+    const map: Record<string, ProjectStats> = {}
     for (const p of Object.values(projects)) {
-      counts[p.id] = { agents: 0, tasks: 0 }
+      map[p.id] = { agents: 0, tasks: 0, completedTasks: 0, schedules: 0, lastActivity: p.updatedAt }
     }
     for (const a of Object.values(agents)) {
-      if (a.projectId && counts[a.projectId]) counts[a.projectId].agents++
+      if (a.projectId && map[a.projectId]) {
+        map[a.projectId].agents++
+        if (a.updatedAt && a.updatedAt > map[a.projectId].lastActivity) {
+          map[a.projectId].lastActivity = a.updatedAt
+        }
+      }
     }
     for (const t of Object.values(tasks)) {
-      if (t.projectId && counts[t.projectId]) counts[t.projectId].tasks++
+      if (t.projectId && map[t.projectId]) {
+        map[t.projectId].tasks++
+        if (t.status === 'completed') map[t.projectId].completedTasks++
+        if (t.updatedAt && t.updatedAt > map[t.projectId].lastActivity) {
+          map[t.projectId].lastActivity = t.updatedAt
+        }
+      }
+    }
+    for (const s of Object.values(schedules)) {
+      if (s.projectId && map[s.projectId]) {
+        map[s.projectId].schedules++
+      }
     }
-    return counts
-  }, [projects, agents, tasks])
+    return map
+  }, [projects, agents, tasks, schedules])
+
+  // Summary stats
+  const totalProjects = Object.keys(projects).length
+  const totalTasks = Object.values(tasks).filter((t) => t.projectId).length
+  const totalCompleted = Object.values(tasks).filter((t) => t.projectId && t.status === 'completed').length
 
   if (!filtered.length && !search) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
-        <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+        <div className="w-14 h-14 rounded-[16px] bg-accent-soft flex items-center justify-center mb-1">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-accent-bright">
             <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7-7H4a2 2 0 0 0-2 2v17Z" />
             <path d="M14 2v7h7" />
           </svg>
         </div>
-        <p className="font-display text-[15px] font-600 text-text-2">No projects yet</p>
-        <p className="text-[13px] text-text-3/50">Group agents, tasks, and schedules into projects</p>
+        <p className="font-display text-[16px] font-600 text-text-2">No projects yet</p>
+        <p className="text-[13px] text-text-3/60 max-w-[280px]">
+          Projects group your agents, tasks, and schedules together. Create one to get organized.
+        </p>
         <button
           onClick={() => { setEditingProjectId(null); setProjectSheetOpen(true) }}
-          className="inline-flex items-center gap-1.5 px-4 py-2 text-[13px] font-500 text-white bg-accent rounded-lg hover:bg-accent-bright transition-colors"
+          className="inline-flex items-center gap-1.5 px-5 py-2.5 text-[13px] font-600 text-white bg-accent-bright rounded-[10px] hover:brightness-110 transition-all cursor-pointer border-none"
+          style={{ fontFamily: 'inherit' }}
         >
-          <span className="text-lg leading-none">+</span> New Project
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          New Project
         </button>
       </div>
     )
   }
 
   return (
-    <div className="flex-1 flex flex-col h-full overflow-y-auto">
-      <div className="p-4 pb-0">
-        <div className="flex items-center gap-2 mb-4">
+    <div className="flex-1 flex flex-col h-full overflow-hidden">
+      {/* Header with search and new button */}
+      <div className="px-5 pt-5 pb-3 shrink-0">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h2 className="font-display text-[20px] font-700 text-text tracking-[-0.02em]">Projects</h2>
+            <p className="text-[12px] text-text-3/60 mt-0.5">
+              {totalProjects} project{totalProjects !== 1 ? 's' : ''}
+              {totalTasks > 0 && <> &middot; {totalCompleted}/{totalTasks} tasks done</>}
+            </p>
+          </div>
+          <button
+            onClick={() => { setEditingProjectId(null); setProjectSheetOpen(true) }}
+            className="inline-flex items-center gap-1.5 px-3.5 py-2 text-[12px] font-600 text-white bg-accent-bright rounded-[10px] hover:brightness-110 transition-all cursor-pointer border-none"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+              <line x1="12" y1="5" x2="12" y2="19" />
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+            New
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="relative">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="absolute left-3 top-1/2 -translate-y-1/2 text-text-3/50">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
           <input
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search projects..."
-            className="flex-1 px-3 py-2 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40"
+            className="w-full pl-9 pr-3 py-2.5 rounded-[10px] bg-white/[0.04] border border-white/[0.06] text-[13px] text-text placeholder:text-text-3/40 focus:outline-none focus:border-accent-bright/30 transition-colors"
             style={{ fontFamily: 'inherit' }}
           />
         </div>
       </div>
-      <div className="flex-1 overflow-y-auto px-4 pb-4 space-y-2">
-        {filtered.map((project) => {
-          const counts = entityCounts[project.id] || { agents: 0, tasks: 0 }
-          const isActive = activeProjectFilter === project.id
-          return (
-            <div
-              key={project.id}
-              className={`group relative p-4 rounded-xl border transition-colors cursor-pointer ${
-                isActive
-                  ? 'bg-accent/10 border-accent/30'
-                  : 'bg-white/[0.03] border-white/[0.06] hover:bg-white/[0.06]'
-              }`}
-              onClick={() => setActiveProjectFilter(isActive ? null : project.id)}
-            >
-              <div className="flex items-start justify-between gap-3">
-                <div className="flex items-center gap-2.5 min-w-0">
-                  {project.color && (
-                    <div className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: project.color }} />
-                  )}
-                  <div className="min-w-0">
-                    <div className="font-display text-[14px] font-600 text-text-1 truncate">{project.name}</div>
-                    {project.description && (
-                      <p className="text-[12px] text-text-3/60 mt-0.5 line-clamp-2">{project.description}</p>
+
+      {/* Project cards */}
+      <div className="flex-1 overflow-y-auto px-5 pb-5">
+        <div className="grid gap-3">
+          {filtered.map((project) => {
+            const stats = statsMap[project.id] || { agents: 0, tasks: 0, completedTasks: 0, schedules: 0, lastActivity: project.updatedAt }
+            const isActive = activeProjectFilter === project.id
+            const progressPct = stats.tasks > 0 ? Math.round((stats.completedTasks / stats.tasks) * 100) : 0
+
+            return (
+              <div
+                key={project.id}
+                className={`group relative rounded-[14px] border transition-all duration-200 cursor-pointer overflow-hidden
+                  ${isActive
+                    ? 'bg-white/[0.06] border-accent-bright/30 shadow-[0_0_20px_rgba(99,102,241,0.08)]'
+                    : 'bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05] hover:border-white/[0.1]'}`}
+                onClick={() => setActiveProjectFilter(isActive ? null : project.id)}
+              >
+                {/* Color accent stripe */}
+                <div className="absolute left-0 top-0 bottom-0 w-1 rounded-l-[14px]" style={{ backgroundColor: project.color || '#6B7280' }} />
+
+                <div className="pl-5 pr-4 py-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-display text-[14px] font-600 text-text truncate">{project.name}</h3>
+                        {isActive && (
+                          <span className="shrink-0 text-[9px] font-700 uppercase tracking-wider text-accent-bright bg-accent-soft px-1.5 py-0.5 rounded-[5px]">
+                            active filter
+                          </span>
+                        )}
+                      </div>
+                      {project.description && (
+                        <p className="text-[12px] text-text-3/60 mt-1 line-clamp-2 leading-relaxed">{project.description}</p>
+                      )}
+                    </div>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setEditingProjectId(project.id); setProjectSheetOpen(true) }}
+                      className="opacity-0 group-hover:opacity-100 p-1.5 rounded-[8px] hover:bg-white/[0.08] transition-all text-text-3/50 hover:text-text-2 cursor-pointer bg-transparent border-none shrink-0"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {/* Stats row */}
+                  <div className="flex items-center gap-4 mt-3 text-[11px] text-text-3/50">
+                    <span className="flex items-center gap-1.5">
+                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                        <circle cx="9" cy="7" r="4" />
+                      </svg>
+                      {stats.agents} agent{stats.agents !== 1 ? 's' : ''}
+                    </span>
+                    <span className="flex items-center gap-1.5">
+                      <svg width="11" height="11" 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>
+                      {stats.completedTasks}/{stats.tasks} task{stats.tasks !== 1 ? 's' : ''}
+                    </span>
+                    {stats.schedules > 0 && (
+                      <span className="flex items-center gap-1.5">
+                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                          <circle cx="12" cy="12" r="10" />
+                          <polyline points="12 6 12 12 16 14" />
+                        </svg>
+                        {stats.schedules} schedule{stats.schedules !== 1 ? 's' : ''}
+                      </span>
                     )}
+                    <span className="ml-auto text-text-3/40">
+                      {relativeDate(stats.lastActivity)}
+                    </span>
                   </div>
+
+                  {/* Progress bar */}
+                  {stats.tasks > 0 && (
+                    <div className="mt-3 flex items-center gap-2.5">
+                      <div className="flex-1 h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+                        <div
+                          className="h-full rounded-full transition-all duration-500"
+                          style={{
+                            width: `${progressPct}%`,
+                            backgroundColor: progressPct === 100 ? '#22C55E' : (project.color || '#6366F1'),
+                          }}
+                        />
+                      </div>
+                      <span className={`text-[10px] font-mono font-600 ${progressPct === 100 ? 'text-emerald-400' : 'text-text-3/50'}`}>
+                        {progressPct}%
+                      </span>
+                    </div>
+                  )}
                 </div>
-                <button
-                  onClick={(e) => { e.stopPropagation(); setEditingProjectId(project.id); setProjectSheetOpen(true) }}
-                  className="opacity-0 group-hover:opacity-100 p-1.5 rounded-md hover:bg-white/[0.08] transition-all text-text-3/50 hover:text-text-2"
-                >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                    <path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
-                  </svg>
-                </button>
               </div>
-              <div className="flex items-center gap-3 mt-2.5 text-[11px] text-text-3/50">
-                <span>{counts.agents} agent{counts.agents !== 1 ? 's' : ''}</span>
-                <span>{counts.tasks} task{counts.tasks !== 1 ? 's' : ''}</span>
-              </div>
-            </div>
-          )
-        })}
+            )
+          })}
+        </div>
       </div>
     </div>
   )

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

@@ -86,7 +86,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
               <span className="font-display text-[14px] font-600 text-text truncate">{item.name}</span>
               <div className="flex items-center gap-2 shrink-0">
                 <span className={`text-[10px] font-600 px-2 py-0.5 rounded-[5px] uppercase tracking-wider
-                  ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-[#6366F1]/10 text-[#6366F1]'}`}>
+                  ${item.type === 'builtin' ? 'bg-white/[0.04] text-text-3' : 'bg-accent-bright/10 text-[#6366F1]'}`}>
                   {item.type === 'builtin' ? 'Built-in' : 'Custom'}
                 </span>
                 {!inSidebar && item.type === 'custom' && (
@@ -94,7 +94,7 @@ export function ProviderList({ inSidebar }: { inSidebar?: boolean }) {
                     <div
                       onClick={(e) => handleToggle(e, item.id, item.isEnabled)}
                       className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
-                        ${item.isEnabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                        ${item.isEnabled ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
                     >
                       <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
                         ${item.isEnabled ? 'left-[18px]' : 'left-0.5'}`} />

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

@@ -342,7 +342,7 @@ export function ProviderSheet() {
             <div
               onClick={() => setRequiresApiKey(!requiresApiKey)}
               className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer
-                ${requiresApiKey ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                ${requiresApiKey ? '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
                 ${requiresApiKey ? 'left-[22px]' : 'left-0.5'}`} />
@@ -441,7 +441,7 @@ export function ProviderSheet() {
             <div
               onClick={() => setIsEnabled(!isEnabled)}
               className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer
-                ${isEnabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                ${isEnabled ? '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
                 ${isEnabled ? 'left-[22px]' : 'left-0.5'}`} />
@@ -485,7 +485,7 @@ export function ProviderSheet() {
           <button
             onClick={handleSave}
             disabled={isBuiltin ? false : (!name.trim() || !baseUrl.trim())}
-            className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] 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"
+            className="flex-1 py-3.5 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' }}
           >
             {editing ? 'Save' : 'Create'}

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

@@ -3,6 +3,7 @@
 import type { Schedule } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
+import { cronToHuman } from '@/lib/cron-human'
 
 const STATUS_COLORS: Record<string, string> = {
   active: 'text-emerald-400 bg-emerald-400/[0.08]',
@@ -70,7 +71,7 @@ export function ScheduleCard({ schedule, inSidebar }: Props) {
             <div
               onClick={handleToggle}
               className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
-                ${schedule.status === 'active' ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                ${schedule.status === 'active' ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
             >
               <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
                 ${schedule.status === 'active' ? 'left-[18px]' : 'left-0.5'}`} />
@@ -95,7 +96,7 @@ export function ScheduleCard({ schedule, inSidebar }: Props) {
       <div className="text-[12px] text-text-3/70 mt-1.5 truncate">
         {agent?.name || 'Unknown agent'} &middot; {schedule.scheduleType}
         {!inSidebar && schedule.scheduleType === 'cron' && schedule.cron && (
-          <span className="font-mono text-text-3/50 ml-1">({schedule.cron})</span>
+          <span className="text-text-3/50 ml-1" title={schedule.cron}>({cronToHuman(schedule.cron)})</span>
         )}
         {!inSidebar && schedule.scheduleType === 'interval' && schedule.intervalMs && (
           <span className="text-text-3/50 ml-1">

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

@@ -41,7 +41,7 @@ export function ScheduleList({ inSidebar }: Props) {
         {!inSidebar && (
           <button
             onClick={() => setScheduleSheetOpen(true)}
-            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white
+            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' }}

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

@@ -4,8 +4,12 @@ import { useEffect, useState, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createSchedule, updateSchedule, deleteSchedule } from '@/lib/schedules'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { SheetFooter } from '@/components/shared/sheet-footer'
+import { inputClass } from '@/components/shared/form-styles'
 import type { ScheduleType, ScheduleStatus } from '@/types'
 import cronstrue from 'cronstrue'
+import { SectionLabel } from '@/components/shared/section-label'
 
 const CRON_PRESETS = [
   { label: 'Every hour', cron: '0 * * * *' },
@@ -62,7 +66,7 @@ export function ScheduleSheet() {
   const [customCron, setCustomCron] = useState(false)
 
   const editing = editingId ? schedules[editingId] : null
-  const agentList = Object.values(agents)
+  const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
 
   useEffect(() => {
     if (open) {
@@ -125,8 +129,6 @@ export function ScheduleSheet() {
     }
   }
 
-  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"
-
   return (
     <BottomSheet open={open} onClose={onClose} wide>
       <div className="mb-10">
@@ -137,22 +139,22 @@ export function ScheduleSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
+        <SectionLabel>Name</SectionLabel>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Daily keyword research" className={inputClass} style={{ fontFamily: 'inherit' }} />
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Agent</label>
-        <select value={agentId || ''} onChange={(e) => setAgentId(e.target.value)} className={`${inputClass} appearance-none cursor-pointer`} style={{ fontFamily: 'inherit' }}>
-          <option value="">Select agent...</option>
-          {agentList.map((p) => (
-            <option key={p.id} value={p.id}>{p.name}{p.isOrchestrator ? ' (Orchestrator)' : ''}</option>
-          ))}
-        </select>
+        <SectionLabel>Agent</SectionLabel>
+        <AgentPickerList
+          agents={agentList}
+          selected={agentId}
+          onSelect={(id) => setAgentId(id)}
+          showOrchBadge={true}
+        />
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Task Prompt</label>
+        <SectionLabel>Task Prompt</SectionLabel>
         <textarea
           value={taskPrompt}
           onChange={(e) => setTaskPrompt(e.target.value)}
@@ -164,7 +166,7 @@ export function ScheduleSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Schedule Type</label>
+        <SectionLabel>Schedule Type</SectionLabel>
         <div className="grid grid-cols-3 gap-3">
           {(['cron', 'interval', 'once'] as ScheduleType[]).map((t) => (
             <button
@@ -185,7 +187,7 @@ export function ScheduleSheet() {
 
       {scheduleType === 'cron' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Schedule</label>
+          <SectionLabel>Schedule</SectionLabel>
 
           {/* Preset buttons */}
           <div className="flex flex-wrap gap-2 mb-4">
@@ -239,7 +241,7 @@ export function ScheduleSheet() {
 
       {scheduleType === 'interval' && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Interval (minutes)</label>
+          <SectionLabel>Interval (minutes)</SectionLabel>
           <input
             type="number"
             value={Math.round(intervalMs / 60000)}
@@ -252,7 +254,7 @@ export function ScheduleSheet() {
 
       {editing && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Status</label>
+          <SectionLabel>Status</SectionLabel>
           <div className="flex gap-2">
             {(['active', 'paused'] as ScheduleStatus[]).map((s) => (
               <button
@@ -271,19 +273,17 @@ export function ScheduleSheet() {
         </div>
       )}
 
-      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
-        {editing && (
+      <SheetFooter
+        onCancel={onClose}
+        onSave={handleSave}
+        saveLabel={editing ? 'Save' : 'Create'}
+        saveDisabled={!name.trim() || !agentId}
+        left={editing && (
           <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
             Delete
           </button>
         )}
-        <button onClick={onClose} className="flex-1 py-3.5 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>
-        <button onClick={handleSave} disabled={!name.trim() || !agentId} className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] 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' }}>
-          {editing ? 'Save' : 'Create'}
-        </button>
-      </div>
+      />
     </BottomSheet>
   )
 }