@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/tasks/task-column.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useCallback } from 'react'
 import { TaskCard } from './task-card'
+import { createTask } from '@/lib/tasks'
+import { useAppStore } from '@/stores/use-app-store'
 import type { BoardTask, BoardTaskStatus } from '@/types'
 
 const COLUMN_CONFIG: Record<BoardTaskStatus, { label: string; color: string; dot: string }> = {
@@ -17,11 +19,18 @@ interface Props {
   status: BoardTaskStatus
   tasks: BoardTask[]
   onDrop: (taskId: string, newStatus: BoardTaskStatus) => void
+  selectionMode?: boolean
+  selectedIds?: Set<string>
+  onToggleSelect?: (id: string) => void
+  onSelectAll?: () => void
 }
 
-export function TaskColumn({ status, tasks, onDrop }: Props) {
+export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds, onToggleSelect, onSelectAll }: Props) {
   const config = COLUMN_CONFIG[status]
   const [dragOver, setDragOver] = useState(false)
+  const [quickAddValue, setQuickAddValue] = useState('')
+  const [adding, setAdding] = useState(false)
+  const loadTasks = useAppStore((s) => s.loadTasks)
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault()
@@ -42,6 +51,21 @@ export function TaskColumn({ status, tasks, onDrop }: Props) {
     }
   }, [onDrop, status])
 
+  const handleQuickAdd = async () => {
+    const title = quickAddValue.trim()
+    if (!title || adding) return
+    setAdding(true)
+    try {
+      await createTask({ title, description: '', agentId: '', status })
+      await loadTasks()
+      setQuickAddValue('')
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  const selectedCount = tasks.filter((t) => selectedIds?.has(t.id)).length
+
   return (
     <div
       className={`flex-1 min-w-[240px] max-w-[320px] flex flex-col rounded-[16px] transition-colors duration-150 ${
@@ -51,14 +75,49 @@ export function TaskColumn({ status, tasks, onDrop }: Props) {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="flex items-center gap-2.5 px-2 mb-4">
+      <div className="flex items-center gap-2.5 px-2 mb-3">
         <div className={`w-2 h-2 rounded-full ${config.dot}`} />
         <span className={`font-display text-[13px] font-600 ${config.color}`}>{config.label}</span>
         <span className="text-[12px] text-text-3 ml-auto">{tasks.length}</span>
+        {selectionMode && tasks.length > 0 && (
+          <button
+            onClick={onSelectAll}
+            className={`text-[10px] font-600 px-1.5 py-0.5 rounded-[5px] cursor-pointer border-none transition-colors
+              ${selectedCount === tasks.length && selectedCount > 0
+                ? 'bg-accent-bright/20 text-accent-bright'
+                : 'bg-white/[0.04] text-text-3 hover:bg-white/[0.08]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {selectedCount === tasks.length && selectedCount > 0 ? 'All' : 'Select all'}
+          </button>
+        )}
       </div>
+
+      {/* Quick add input */}
+      {(status === 'backlog' || status === 'queued') && (
+        <div className="px-1 mb-2">
+          <input
+            type="text"
+            value={quickAddValue}
+            onChange={(e) => setQuickAddValue(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') handleQuickAdd() }}
+            placeholder={`+ Add to ${config.label.toLowerCase()}...`}
+            className="w-full px-3 py-2 rounded-[10px] bg-white/[0.02] border border-dashed border-white/[0.08] text-[12px] text-text placeholder:text-text-3/30 outline-none focus:border-white/[0.15] focus:bg-white/[0.03] transition-colors"
+            style={{ fontFamily: 'inherit' }}
+            disabled={adding}
+          />
+        </div>
+      )}
+
       <div className="flex flex-col gap-3 flex-1 overflow-y-auto pr-1 px-1 pb-2">
         {tasks.map((task) => (
-          <TaskCard key={task.id} task={task} />
+          <TaskCard
+            key={task.id}
+            task={task}
+            selectionMode={selectionMode}
+            selected={selectedIds?.has(task.id)}
+            onToggleSelect={onToggleSelect}
+          />
         ))}
         {tasks.length === 0 && (
           <div className={`text-[12px] text-text-3/50 text-center py-8 rounded-[12px] border border-dashed transition-colors ${

package/src/components/tasks/task-list.tsx

@@ -5,6 +5,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { BoardTaskStatus } from '@/types'
+import { EmptyState } from '@/components/shared/empty-state'
 
 const STATUS_DOT: Record<BoardTaskStatus, string> = {
   backlog: 'bg-white/20',
@@ -88,9 +89,16 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
       )}
 
       {filtered.length === 0 && (
-        <div className="text-center text-text-3 text-[13px] py-12 px-6">
-          {sorted.length === 0 ? 'No tasks yet' : 'No matching tasks'}
-        </div>
+        <EmptyState
+          icon={
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="text-accent-bright">
+              <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" opacity="0.2" />
+              <path d="M9 11l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          }
+          title={sorted.length === 0 ? 'No tasks yet' : 'No matching tasks'}
+          subtitle={sorted.length === 0 ? 'Create tasks and assign agents to run them' : 'Try adjusting your search'}
+        />
       )}
       {filtered.map((task) => {
         const agent = agents[task.agentId]
@@ -101,7 +109,7 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
               setEditingTaskId(task.id)
               setTaskSheetOpen(true)
             }}
-            className="w-full text-left px-5 py-3.5 border-none bg-transparent cursor-pointer hover:bg-white/[0.03] transition-all"
+            className="w-full text-left py-3.5 px-4 rounded-[14px] border border-transparent bg-transparent cursor-pointer hover:bg-white/[0.03] transition-all"
             style={{ fontFamily: 'inherit' }}
           >
             <div className="flex items-center gap-2.5">

package/src/components/tasks/task-sheet.tsx

@@ -4,8 +4,12 @@ import { useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createTask, updateTask, archiveTask, unarchiveTask } from '@/lib/tasks'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { DirBrowser } from '@/components/shared/dir-browser'
+import { SheetFooter } from '@/components/shared/sheet-footer'
+import { inputClass } from '@/components/shared/form-styles'
 import type { BoardTask, TaskComment } from '@/types'
+import { SectionLabel } from '@/components/shared/section-label'
 
 function fmtTime(ts: number) {
   const d = new Date(ts)
@@ -25,6 +29,10 @@ export function TaskSheet() {
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
 
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
+
   const appSettings = useAppStore((s) => s.appSettings)
   const loadSettings = useAppStore((s) => s.loadSettings)
 
@@ -36,6 +44,7 @@ export function TaskSheet() {
   const [uploading, setUploading] = useState(false)
   const [cwd, setCwd] = useState('')
   const [file, setFile] = useState<string | null>(null)
+  const [projectId, setProjectId] = useState('')
   const [tags, setTags] = useState<string[]>([])
   const [tagInput, setTagInput] = useState('')
   const [blockedBy, setBlockedBy] = useState<string[]>([])
@@ -43,16 +52,18 @@ export function TaskSheet() {
   const [customFields, setCustomFields] = useState<Record<string, string | number | boolean>>({})
 
   const editing = editingId ? tasks[editingId] : null
-  const agentList = Object.values(agents)
+  const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
 
   useEffect(() => {
     if (open) {
       loadAgents()
+      loadProjects()
       loadSettings()
       if (editing) {
         setTitle(editing.title)
         setDescription(editing.description)
         setAgentId(editing.agentId)
+        setProjectId(editing.projectId || '')
         setImages(editing.images || [])
         setCwd(editing.cwd || '')
         setFile(editing.file || null)
@@ -64,6 +75,7 @@ export function TaskSheet() {
         setTitle('')
         setDescription('')
         setAgentId(agentList[0]?.id || '')
+        setProjectId(activeProjectFilter || '')
         setImages([])
         setCwd('')
         setFile(null)
@@ -89,12 +101,14 @@ export function TaskSheet() {
   }
 
   const handleSave = async () => {
-    const payload: Partial<BoardTask> & { title: string; description: string; agentId: string } = {
-      title: title.trim() || 'Untitled Task', description, agentId, images,
+    // projectId uses null (not undefined) so the API can distinguish "clear" from "not sent"
+    // projectId uses null (not undefined) so the API can distinguish "clear" from "not sent"
+    const payload = {
+      title: title.trim() || 'Untitled Task', description, agentId, projectId: projectId || null, images,
       cwd: cwd || undefined, file: file || undefined,
       tags, blockedBy, dueAt: dueAt ? new Date(dueAt).getTime() : null,
       customFields: Object.keys(customFields).length > 0 ? customFields : undefined,
-    }
+    } as Partial<BoardTask> & { title: string; description: string; agentId: string }
     if (editing) {
       await updateTask(editing.id, payload)
     } else {
@@ -159,8 +173,6 @@ export function TaskSheet() {
     setCommentText('')
   }
 
-  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}>
       <div className="mb-10">
@@ -173,7 +185,7 @@ export function TaskSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Title</label>
+        <SectionLabel>Title</SectionLabel>
         <input
           type="text"
           value={title}
@@ -185,7 +197,7 @@ export function TaskSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Description</label>
+        <SectionLabel>Description</SectionLabel>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
@@ -198,9 +210,7 @@ export function TaskSheet() {
 
       {/* Images */}
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Images <span className="normal-case tracking-normal font-normal text-text-3">(optional — reference designs, mockups, etc.)</span>
-        </label>
+        <SectionLabel>Images <span className="normal-case tracking-normal font-normal text-text-3">(optional — reference designs, mockups, etc.)</span></SectionLabel>
         {images.length > 0 && (
           <div className="flex gap-2 flex-wrap mb-3">
             {images.map((url, i) => (
@@ -229,33 +239,48 @@ export function TaskSheet() {
       </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>
-        {agentList.length > 0 ? (
-          <div className="flex flex-wrap gap-2">
-            {agentList.map((p) => (
-              <button
-                key={p.id}
-                onClick={() => setAgentId(p.id)}
-                className={`px-4 py-3 rounded-[12px] text-[14px] font-600 cursor-pointer transition-all border
-                  ${agentId === p.id
-                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                    : 'bg-surface border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                {p.name}
-              </button>
-            ))}
-          </div>
-        ) : (
-          <p className="text-[13px] text-text-3">No agents configured. Create one in Agents first.</p>
-        )}
+        <SectionLabel>Agent</SectionLabel>
+        <AgentPickerList
+          agents={agentList}
+          selected={agentId}
+          onSelect={(id) => setAgentId(id)}
+        />
+      </div>
+
+      {/* Project (optional) */}
+      <div className="mb-8">
+        <SectionLabel>Project <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span></SectionLabel>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => setProjectId('')}
+            className={`px-4 py-3 rounded-[12px] text-[14px] font-600 cursor-pointer transition-all border
+              ${!projectId
+                ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                : 'bg-surface border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            None
+          </button>
+          {Object.values(projects).map((p) => (
+            <button
+              key={p.id}
+              onClick={() => setProjectId(p.id)}
+              className={`px-4 py-3 rounded-[12px] text-[14px] font-600 cursor-pointer transition-all border flex items-center gap-2
+                ${projectId === p.id
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-surface border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: p.color || '#6366F1' }} />
+              {p.name}
+            </button>
+          ))}
+        </div>
       </div>
 
       {/* Directory (optional) */}
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Directory <span className="normal-case tracking-normal font-normal text-text-3">(optional — project to work in)</span>
-        </label>
+        <SectionLabel>Directory <span className="normal-case tracking-normal font-normal text-text-3">(optional — project to work in)</span></SectionLabel>
         <DirBrowser
           value={cwd || null}
           file={file}
@@ -273,9 +298,7 @@ export function TaskSheet() {
 
       {/* Tags */}
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Tags <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
-        </label>
+        <SectionLabel>Tags <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span></SectionLabel>
         {tags.length > 0 && (
           <div className="flex flex-wrap gap-1.5 mb-3">
             {tags.map((tag) => (
@@ -315,9 +338,7 @@ export function TaskSheet() {
 
       {/* Dependencies */}
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Blocked By <span className="normal-case tracking-normal font-normal text-text-3">(tasks that must complete first)</span>
-        </label>
+        <SectionLabel>Blocked By <span className="normal-case tracking-normal font-normal text-text-3">(tasks that must complete first)</span></SectionLabel>
         <select
           multiple
           value={blockedBy}
@@ -346,9 +367,7 @@ export function TaskSheet() {
 
       {/* Due Date */}
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Due Date <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
-        </label>
+        <SectionLabel>Due Date <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span></SectionLabel>
         <input
           type="date"
           value={dueAt}
@@ -361,7 +380,7 @@ export function TaskSheet() {
       {/* Custom Fields */}
       {appSettings.taskCustomFieldDefs && appSettings.taskCustomFieldDefs.length > 0 && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Custom Fields</label>
+          <SectionLabel>Custom Fields</SectionLabel>
           <div className="space-y-4">
             {appSettings.taskCustomFieldDefs.map((def) => (
               <div key={def.key}>
@@ -396,7 +415,7 @@ export function TaskSheet() {
 
       {editing?.result && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Result</label>
+          <SectionLabel>Result</SectionLabel>
           <div className="p-4 rounded-[14px] border border-white/[0.06] bg-surface text-[13px] text-text-2 whitespace-pre-wrap max-h-[200px] overflow-y-auto">
             {editing.result}
           </div>
@@ -405,7 +424,7 @@ export function TaskSheet() {
 
       {editing && (editing.claudeResumeId || editing.codexResumeId || editing.opencodeResumeId || editing.cliResumeId) && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">CLI Sessions</label>
+          <SectionLabel>CLI Sessions</SectionLabel>
           <div className="flex flex-wrap gap-2">
             {editing.claudeResumeId && (
               <div className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/[0.06] bg-surface">
@@ -447,9 +466,7 @@ export function TaskSheet() {
       {/* Comments */}
       {editing && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-            Comments {editing.comments?.length ? `(${editing.comments.length})` : ''}
-          </label>
+          <SectionLabel>Comments {editing.comments?.length ? `(${editing.comments.length})` : ''}</SectionLabel>
 
           {editing.comments && editing.comments.length > 0 && (
             <div className="space-y-3 mb-4 max-h-[300px] overflow-y-auto">
@@ -489,29 +506,29 @@ export function TaskSheet() {
         </div>
       )}
 
-      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
-        {editing && editing.status !== 'archived' && (
-          <button onClick={handleArchive} className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-3 text-[15px] font-600 cursor-pointer hover:bg-white/[0.04] transition-all" style={{ fontFamily: 'inherit' }}>
-            Archive
-          </button>
-        )}
-        {editing && editing.status === 'archived' && (
-          <button onClick={handleUnarchive} className="py-3.5 px-6 rounded-[14px] border border-accent-bright/20 bg-transparent text-accent-bright text-[15px] font-600 cursor-pointer hover:bg-accent-bright/10 transition-all" style={{ fontFamily: 'inherit' }}>
-            Unarchive
-          </button>
-        )}
-        {editing && editing.status === 'backlog' && (
-          <button onClick={handleQueue} className="py-3.5 px-6 rounded-[14px] border border-amber-500/20 bg-transparent text-amber-400 text-[15px] font-600 cursor-pointer hover:bg-amber-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
-            Queue
-          </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={!title.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>
+      <SheetFooter
+        onCancel={onClose}
+        onSave={handleSave}
+        saveLabel={editing ? 'Save' : 'Create'}
+        saveDisabled={!title.trim() || !agentId}
+        left={<>
+          {editing && editing.status !== 'archived' && (
+            <button onClick={handleArchive} className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-3 text-[15px] font-600 cursor-pointer hover:bg-white/[0.04] transition-all" style={{ fontFamily: 'inherit' }}>
+              Archive
+            </button>
+          )}
+          {editing && editing.status === 'archived' && (
+            <button onClick={handleUnarchive} className="py-3.5 px-6 rounded-[14px] border border-accent-bright/20 bg-transparent text-accent-bright text-[15px] font-600 cursor-pointer hover:bg-accent-bright/10 transition-all" style={{ fontFamily: 'inherit' }}>
+              Unarchive
+            </button>
+          )}
+          {editing && editing.status === 'backlog' && (
+            <button onClick={handleQueue} className="py-3.5 px-6 rounded-[14px] border border-amber-500/20 bg-transparent text-amber-400 text-[15px] font-600 cursor-pointer hover:bg-amber-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
+              Queue
+            </button>
+          )}
+        </>}
+      />
     </BottomSheet>
   )
 }

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  openDelay = 300,
+  closeDelay = 150,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return (
+    <HoverCardPrimitive.Root
+      data-slot="hover-card"
+      openDelay={openDelay}
+      closeDelay={closeDelay}
+      {...props}
+    />
+  )
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+  className,
+  sideOffset = 8,
+  children,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "rounded-[12px] w-[260px] z-50 p-3 border border-white/[0.08] shadow-xl backdrop-blur-xl bg-[rgba(16,16,28,0.95)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </HoverCardPrimitive.Content>
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/components/usage/metrics-dashboard.tsx

@@ -18,6 +18,16 @@ interface TimePoint {
   cost: number
 }
 
+interface ProviderHealthEntry {
+  totalRequests: number
+  successCount: number
+  errorCount: number
+  errorRate: number
+  avgLatencyMs: number
+  lastUsed: number
+  models: string[]
+}
+
 interface UsageResponse {
   records: unknown[]
   totalTokens: number
@@ -25,6 +35,7 @@ interface UsageResponse {
   byAgent: Record<string, { tokens: number; cost: number }>
   byProvider: Record<string, { tokens: number; cost: number }>
   timeSeries: TimePoint[]
+  providerHealth?: Record<string, ProviderHealthEntry>
 }
 
 const RANGES: Range[] = ['24h', '7d', '30d']
@@ -62,6 +73,25 @@ function formatBucketLabel(bucket: string, range: Range): string {
   return bucket
 }
 
+function formatRelativeTime(ts: number): string {
+  if (!ts) return 'Never'
+  const diff = Date.now() - ts
+  const seconds = Math.floor(diff / 1000)
+  if (seconds < 60) return 'Just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+function errorRateColor(rate: number): string {
+  if (rate < 0.05) return 'text-emerald-400'
+  if (rate < 0.2) return 'text-amber-400'
+  return 'text-red-400'
+}
+
 function computeCompletionRate(tasks: Record<string, BoardTask>): number {
   const all = Object.values(tasks)
   const eligible = all.filter((t) => t.status !== 'backlog' && t.status !== 'archived')
@@ -245,6 +275,54 @@ export function MetricsDashboard() {
               )}
             </ChartCard>
           </div>
+
+          {/* Provider Health */}
+          {data?.providerHealth && Object.keys(data.providerHealth).length > 0 && (
+            <div>
+              <h3 className="font-display text-[14px] font-600 text-text-2 mb-3">Provider Health</h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {Object.entries(data.providerHealth)
+                  .sort(([, a], [, b]) => b.totalRequests - a.totalRequests)
+                  .map(([name, h]) => (
+                    <div
+                      key={name}
+                      className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04] flex flex-col gap-3"
+                    >
+                      <div className="flex items-center justify-between">
+                        <p className="text-[14px] font-600 text-text">{name}</p>
+                        <span className="text-[11px] text-text-3">{formatRelativeTime(h.lastUsed)}</span>
+                      </div>
+                      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-[12px]">
+                        <span className="text-text-3">Requests</span>
+                        <span className="text-text font-500 text-right">{h.totalRequests}</span>
+                        <span className="text-text-3">Error Rate</span>
+                        <span className={`font-500 text-right ${errorRateColor(h.errorRate)}`}>
+                          {(h.errorRate * 100).toFixed(1)}%
+                        </span>
+                        {h.avgLatencyMs > 0 && (
+                          <>
+                            <span className="text-text-3">Avg Latency</span>
+                            <span className="text-text font-500 text-right">{Math.round(h.avgLatencyMs)}ms</span>
+                          </>
+                        )}
+                      </div>
+                      {h.models.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5 pt-1">
+                          {h.models.map((m) => (
+                            <span
+                              key={m}
+                              className="px-2 py-0.5 rounded-[6px] bg-white/[0.06] text-[11px] text-text-3 font-500"
+                            >
+                              {m}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>

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

@@ -98,7 +98,7 @@ export function UsageList() {
                   </div>
                   <div className="mt-2 h-1 rounded-full bg-white/[0.04] overflow-hidden">
                     <div
-                      className="h-full rounded-full bg-[#6366F1]/60"
+                      className="h-full rounded-full bg-accent-bright/60"
                       style={{ width: `${Math.max(pct, 1)}%` }}
                     />
                   </div>

package/src/components/webhooks/webhook-sheet.tsx

@@ -389,7 +389,7 @@ export function WebhookSheet() {
           <button
             onClick={handleSave}
             disabled={saving}
-            className="px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+            className="px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
             style={{ fontFamily: 'inherit' }}
           >
             {saving ? 'Saving...' : editing ? 'Update' : 'Create'}