@swarmclawai/swarmclaw 0.6.7 → 0.7.0

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { updateTask, archiveTask } from '@/lib/tasks'
@@ -20,9 +20,10 @@ interface TaskCardProps {
   selectionMode?: boolean
   selected?: boolean
   onToggleSelect?: (id: string) => void
+  index?: number
 }
 
-export function TaskCard({ task, selectionMode, selected, onToggleSelect }: TaskCardProps) {
+export function TaskCard({ task, selectionMode, selected, onToggleSelect, index = 0 }: TaskCardProps) {
   const agents = useAppStore((s) => s.agents)
   const projects = useAppStore((s) => s.projects)
   const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
@@ -32,6 +33,15 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
   const setActiveView = useAppStore((s) => s.setActiveView)
   const [dragging, setDragging] = useState(false)
   const [confirmArchive, setConfirmArchive] = useState(false)
+  const [allowDrag, setAllowDrag] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const isCoarsePointer = typeof window.matchMedia === 'function'
+      ? window.matchMedia('(pointer: coarse)').matches
+      : 'ontouchstart' in window
+    setAllowDrag(!isCoarsePointer)
+  }, [])
 
   const tasks = useAppStore((s) => s.tasks)
   const agent = agents[task.agentId]
@@ -85,9 +95,9 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
 
   return (
     <div
-      draggable={!selectionMode}
-      onDragStart={selectionMode ? undefined : handleDragStart}
-      onDragEnd={selectionMode ? undefined : handleDragEnd}
+      draggable={!selectionMode && allowDrag}
+      onDragStart={selectionMode || !allowDrag ? undefined : handleDragStart}
+      onDragEnd={selectionMode || !allowDrag ? undefined : handleDragEnd}
       onClick={(e) => {
         if (selectionMode && onToggleSelect) {
           e.stopPropagation()
@@ -98,9 +108,13 @@ export function TaskCard({ task, selectionMode, selected, onToggleSelect }: Task
         }
       }}
       className={`py-3 px-4 rounded-[14px] border border-l-[3px] ${borderColor} bg-surface hover:bg-surface-2 transition-all group
-        ${selectionMode ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing'}
+        ${selectionMode || !allowDrag ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing'} touch-pan-y
         ${dragging ? 'opacity-40 scale-[0.97]' : ''}
-        ${selected ? 'border-accent-bright/40 bg-accent-bright/[0.04] ring-1 ring-accent-bright/20' : 'border-white/[0.06]'}`}
+        ${selected ? 'border-accent-bright/40 bg-accent-bright/[0.04] ring-1 ring-accent-bright/20 shadow-lg' : 'border-white/[0.06] hover:border-white/[0.12] hover:scale-[1.01] hover:shadow-md'}`}
+      style={{
+        animation: 'spring-in 0.5s var(--ease-spring) both',
+        animationDelay: `${Math.min(index * 0.05, 0.4)}s`
+      }}
     >
       <div className="flex items-start gap-3 mb-3">
         {/* Selection checkbox */}

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

@@ -68,7 +68,7 @@ export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds,
 
   return (
     <div
-      className={`flex-1 min-w-[240px] max-w-[320px] flex flex-col rounded-[16px] transition-colors duration-150 ${
+      className={`flex-1 min-w-[240px] max-w-[320px] min-h-0 flex flex-col rounded-[16px] transition-colors duration-150 ${
         dragOver ? 'bg-accent-bright/[0.04] ring-1 ring-accent-bright/20' : ''
       }`}
       onDragOver={handleDragOver}
@@ -109,11 +109,12 @@ export function TaskColumn({ status, tasks, onDrop, selectionMode, selectedIds,
         </div>
       )}
 
-      <div className="flex flex-col gap-3 flex-1 overflow-y-auto pr-1 px-1 pb-2">
-        {tasks.map((task) => (
+      <div className="flex flex-col gap-3 flex-1 min-h-0 overflow-y-auto overscroll-y-contain touch-pan-y pr-1 px-1 pb-2">
+        {tasks.map((task, idx) => (
           <TaskCard
             key={task.id}
             task={task}
+            index={idx}
             selectionMode={selectionMode}
             selected={selectedIds?.has(task.id)}
             onToggleSelect={onToggleSelect}

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

@@ -62,7 +62,7 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
   }
 
   return (
-    <div className="flex-1 flex flex-col overflow-y-auto">
+    <div className="flex-1 min-h-0 flex flex-col overflow-y-auto overscroll-y-contain touch-pan-y">
       {/* Search + clear */}
       {sorted.length > 0 && (
         <div className="px-3 py-2 shrink-0 flex flex-col gap-2">

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

@@ -10,7 +10,7 @@ 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 type { BoardTask, TaskComment, TaskQualityGateConfig } from '@/types'
 import { SectionLabel } from '@/components/shared/section-label'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 
@@ -22,6 +22,16 @@ function fmtTime(ts: number) {
   return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
+function normalizeGateNumber(value: unknown, fallback: number, min: number, max: number): number {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number.parseInt(value, 10)
+      : Number.NaN
+  if (!Number.isFinite(parsed)) return fallback
+  return Math.max(min, Math.min(max, Math.trunc(parsed)))
+}
+
 export function TaskSheet() {
   const open = useAppStore((s) => s.taskSheetOpen)
   const setOpen = useAppStore((s) => s.setTaskSheetOpen)
@@ -59,6 +69,12 @@ export function TaskSheet() {
   const [dueAt, setDueAt] = useState<string>('')
   const [customFields, setCustomFields] = useState<Record<string, string | number | boolean>>({})
   const [priority, setPriority] = useState<'low' | 'medium' | 'high' | 'critical' | ''>('')
+  const [qualityGateEnabled, setQualityGateEnabled] = useState(true)
+  const [qualityGateMinResultChars, setQualityGateMinResultChars] = useState(80)
+  const [qualityGateMinEvidenceItems, setQualityGateMinEvidenceItems] = useState(2)
+  const [qualityGateRequireVerification, setQualityGateRequireVerification] = useState(false)
+  const [qualityGateRequireArtifact, setQualityGateRequireArtifact] = useState(false)
+  const [qualityGateRequireReport, setQualityGateRequireReport] = useState(false)
 
   const editing = editingId ? tasks[editingId] : null
   const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
@@ -68,6 +84,12 @@ export function TaskSheet() {
       loadAgents()
       loadProjects()
       loadSettings()
+      const defaultGateEnabled = appSettings.taskQualityGateEnabled ?? true
+      const defaultGateMinResult = normalizeGateNumber(appSettings.taskQualityGateMinResultChars, 80, 10, 2000)
+      const defaultGateMinEvidence = normalizeGateNumber(appSettings.taskQualityGateMinEvidenceItems, 2, 0, 8)
+      const defaultGateRequireVerification = appSettings.taskQualityGateRequireVerification ?? false
+      const defaultGateRequireArtifact = appSettings.taskQualityGateRequireArtifact ?? false
+      const defaultGateRequireReport = appSettings.taskQualityGateRequireReport ?? false
       if (editing) {
         setTitle(editing.title)
         setDescription(editing.description)
@@ -83,6 +105,13 @@ export function TaskSheet() {
         setDueAt(editing.dueAt ? new Date(editing.dueAt).toISOString().slice(0, 10) : '')
         setCustomFields(editing.customFields || {})
         setPriority(editing.priority || '')
+        const gate = (editing.qualityGate || null) as TaskQualityGateConfig | null
+        setQualityGateEnabled(gate?.enabled ?? defaultGateEnabled)
+        setQualityGateMinResultChars(normalizeGateNumber(gate?.minResultChars, defaultGateMinResult, 10, 2000))
+        setQualityGateMinEvidenceItems(normalizeGateNumber(gate?.minEvidenceItems, defaultGateMinEvidence, 0, 8))
+        setQualityGateRequireVerification(gate?.requireVerification ?? defaultGateRequireVerification)
+        setQualityGateRequireArtifact(gate?.requireArtifact ?? defaultGateRequireArtifact)
+        setQualityGateRequireReport(gate?.requireReport ?? defaultGateRequireReport)
       } else {
         setTitle('')
         setDescription('')
@@ -98,6 +127,12 @@ export function TaskSheet() {
         setDueAt('')
         setCustomFields({})
         setPriority('')
+        setQualityGateEnabled(defaultGateEnabled)
+        setQualityGateMinResultChars(defaultGateMinResult)
+        setQualityGateMinEvidenceItems(defaultGateMinEvidence)
+        setQualityGateRequireVerification(defaultGateRequireVerification)
+        setQualityGateRequireArtifact(defaultGateRequireArtifact)
+        setQualityGateRequireReport(defaultGateRequireReport)
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -116,6 +151,17 @@ export function TaskSheet() {
   }
 
   const handleSave = async () => {
+    const qualityGate: TaskQualityGateConfig | null = qualityGateEnabled
+      ? {
+          enabled: true,
+          minResultChars: qualityGateMinResultChars,
+          minEvidenceItems: qualityGateMinEvidenceItems,
+          requireVerification: qualityGateRequireVerification,
+          requireArtifact: qualityGateRequireArtifact,
+          requireReport: qualityGateRequireReport,
+        }
+      : null
+
     // 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 = {
@@ -124,6 +170,7 @@ export function TaskSheet() {
       tags, blockedBy, dueAt: dueAt ? new Date(dueAt).getTime() : null,
       customFields: Object.keys(customFields).length > 0 ? customFields : undefined,
       priority: priority || undefined,
+      qualityGate,
     } as Partial<BoardTask> & { title: string; description: string; agentId: string }
     try {
       if (editing) {
@@ -363,6 +410,19 @@ export function TaskSheet() {
           </div>
         )}
 
+        {editing.qualityGate?.enabled && (
+          <div className="mb-8">
+            <SectionLabel>Quality Gate</SectionLabel>
+            <div className="p-4 rounded-[14px] border border-white/[0.06] bg-surface space-y-1.5 text-[12px] text-text-2">
+              <p>Min result chars: {editing.qualityGate.minResultChars ?? 80}</p>
+              <p>Min evidence signals: {editing.qualityGate.minEvidenceItems ?? 2}</p>
+              <p>Verification required: {(editing.qualityGate.requireVerification ?? false) ? 'Yes' : 'No'}</p>
+              <p>Artifact required: {(editing.qualityGate.requireArtifact ?? false) ? 'Yes' : 'No'}</p>
+              <p>Task report required: {(editing.qualityGate.requireReport ?? false) ? 'Yes' : 'No'}</p>
+            </div>
+          </div>
+        )}
+
         {/* Images (thumbnails only, no remove/upload) */}
         {editing.images && editing.images.length > 0 && (
           <div className="mb-8">
@@ -797,6 +857,75 @@ export function TaskSheet() {
         />
       </div>
 
+      <div className="mb-8">
+        <SectionLabel>Quality Gate</SectionLabel>
+        <p className="text-[12px] text-text-3 mb-3">
+          Checks that must pass before this task can be marked completed.
+        </p>
+        <div className="p-4 rounded-[14px] border border-white/[0.06] bg-surface">
+          <button
+            onClick={() => setQualityGateEnabled((prev) => !prev)}
+            className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${qualityGateEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+          >
+            <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${qualityGateEnabled ? 'translate-x-[18px]' : ''}`} />
+          </button>
+          <span className="ml-2 text-[12px] text-text-2">{qualityGateEnabled ? 'Enabled' : 'Disabled'}</span>
+
+          {qualityGateEnabled && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
+              <div>
+                <label className="block text-[11px] text-text-3 mb-1.5">Min Result Chars</label>
+                <input
+                  type="number"
+                  min={10}
+                  max={2000}
+                  value={qualityGateMinResultChars}
+                  onChange={(e) => setQualityGateMinResultChars(normalizeGateNumber(e.target.value, 80, 10, 2000))}
+                  className={inputClass}
+                  style={{ fontFamily: 'inherit' }}
+                />
+              </div>
+              <div>
+                <label className="block text-[11px] text-text-3 mb-1.5">Min Evidence Signals</label>
+                <input
+                  type="number"
+                  min={0}
+                  max={8}
+                  value={qualityGateMinEvidenceItems}
+                  onChange={(e) => setQualityGateMinEvidenceItems(normalizeGateNumber(e.target.value, 2, 0, 8))}
+                  className={inputClass}
+                  style={{ fontFamily: 'inherit' }}
+                />
+              </div>
+              <label className="flex items-center gap-2 text-[12px] text-text-2">
+                <input
+                  type="checkbox"
+                  checked={qualityGateRequireVerification}
+                  onChange={(e) => setQualityGateRequireVerification(e.target.checked)}
+                />
+                Require verification evidence (tests/lint/build)
+              </label>
+              <label className="flex items-center gap-2 text-[12px] text-text-2">
+                <input
+                  type="checkbox"
+                  checked={qualityGateRequireArtifact}
+                  onChange={(e) => setQualityGateRequireArtifact(e.target.checked)}
+                />
+                Require artifact evidence (upload URL or task artifacts)
+              </label>
+              <label className="flex items-center gap-2 text-[12px] text-text-2 md:col-span-2">
+                <input
+                  type="checkbox"
+                  checked={qualityGateRequireReport}
+                  onChange={(e) => setQualityGateRequireReport(e.target.checked)}
+                />
+                Require generated task report
+              </label>
+            </div>
+          )}
+        </div>
+      </div>
+
       {/* Custom Fields */}
       {appSettings.taskCustomFieldDefs && appSettings.taskCustomFieldDefs.length > 0 && (
         <div className="mb-8">

package/src/components/ui/dialog.tsx

@@ -64,6 +64,7 @@ function DialogContent({
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         )}
+        style={{ animation: 'spring-in 0.4s var(--ease-spring)' }}
         {...props}
       >
         {children}

package/src/components/ui/sheet.tsx

@@ -71,6 +71,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
           className
         )}
+        style={{ animation: 'spring-in 0.4s var(--ease-spring)' }}
         {...props}
       >
         {children}

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

@@ -9,6 +9,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { BoardTask } from '@/types'
+import { HintTip } from '@/components/shared/hint-tip'
 
 type Range = '24h' | '7d' | '30d'
 
@@ -66,11 +67,9 @@ function formatDuration(ms: number): string {
 
 function formatBucketLabel(bucket: string, range: Range): string {
   if (range === '24h') {
-    // "2026-03-01T14" → "14:00"
     const hour = bucket.split('T')[1]
     return hour ? `${hour}:00` : bucket
   }
-  // "2026-03-01" → "Mar 1"
   const parts = bucket.split('-')
   if (parts.length === 3) {
     const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
@@ -118,11 +117,8 @@ export function MetricsDashboard() {
     try {
       const res = await api<UsageResponse>('GET', `/usage?range=${range}`)
       setData(res)
-    } catch {
-      // ignore
-    } finally {
-      setLoading(false)
-    }
+    } catch { /* ignore */ }
+    setLoading(false)
   }, [range])
 
   useEffect(() => {
@@ -135,7 +131,6 @@ export function MetricsDashboard() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // --- Task metrics ---
   const [taskMetrics, setTaskMetrics] = useState<{
     wip: number; completedCount: number; avgCycleMs: number
     velocity: { bucket: string; count: number }[]
@@ -156,7 +151,6 @@ export function MetricsDashboard() {
 
   const completionRate = computeCompletionRate(tasks)
 
-  // Prepare chart data
   const timeSeriesFormatted = (data?.timeSeries ?? []).map((pt) => ({
     ...pt,
     label: formatBucketLabel(pt.bucket, range),
@@ -190,13 +184,13 @@ export function MetricsDashboard() {
 
   return (
     <div className="flex-1 flex flex-col h-full overflow-y-auto">
-      <div className="px-8 pt-6 pb-4 shrink-0">
+      <div className="px-8 pt-6 pb-4 shrink-0" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
         <h1 className="font-display text-[28px] font-700 tracking-[-0.03em]">Usage</h1>
         <p className="text-[13px] text-text-3 mt-1">Token usage, cost tracking &amp; agent performance</p>
       </div>
 
       {/* Range tabs */}
-      <div className="px-8 pb-4 shrink-0">
+      <div className="px-8 pb-4 shrink-0" style={{ animation: 'fade-up 0.5s var(--ease-spring) 0.05s both' }}>
         <div className="flex gap-1 bg-surface-2 rounded-[10px] p-1 w-fit">
           {RANGES.map((r) => (
             <button
@@ -207,6 +201,7 @@ export function MetricsDashboard() {
                   ? 'bg-accent-soft text-accent-bright'
                   : 'text-text-3 hover:text-text-2'
               }`}
+              style={range === r ? { animation: 'spring-in 0.3s var(--ease-spring)' } : undefined}
             >
               {RANGE_LABELS[r]}
             </button>
@@ -225,31 +220,33 @@ export function MetricsDashboard() {
         <div className="px-8 pb-8 space-y-6">
           {/* Stats cards */}
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            <StatCard label="Total Tokens" value={formatTokens(data?.totalTokens ?? 0)} />
-            <StatCard label="Total Cost" value={formatCost(data?.totalCost ?? 0)} />
-            <StatCard label="Requests" value={String(data?.records.length ?? 0)} />
-            <StatCard label="Completion Rate" value={`${completionRate}%`} />
+            <StatCard label="Total Tokens" value={formatTokens(data?.totalTokens ?? 0)} index={0} />
+            <StatCard label="Total Cost" value={formatCost(data?.totalCost ?? 0)} index={1} />
+            <StatCard label="Requests" value={String(data?.records.length ?? 0)} index={2} />
+            <StatCard label="Completion Rate" value={`${completionRate}%`} index={3} />
           </div>
 
           {/* Token usage over time */}
-          <ChartCard title="Token Usage Over Time">
-            {timeSeriesFormatted.length > 0 ? (
-              <ResponsiveContainer width="100%" height={280}>
-                <LineChart data={timeSeriesFormatted} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
-                  <XAxis dataKey="label" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
-                  <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
-                  <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatTokens(value ?? 0), 'Tokens']} />
-                  <Line type="monotone" dataKey="tokens" stroke="#818CF8" strokeWidth={2} dot={false} activeDot={{ r: 4, fill: '#818CF8' }} />
-                </LineChart>
-              </ResponsiveContainer>
-            ) : (
-              <EmptyChart />
-            )}
-          </ChartCard>
+          <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both' }}>
+            <ChartCard title="Token Usage Over Time">
+              {timeSeriesFormatted.length > 0 ? (
+                <ResponsiveContainer width="100%" height={280}>
+                  <LineChart data={timeSeriesFormatted} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                    <XAxis dataKey="label" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
+                    <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
+                    <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatTokens(value ?? 0), 'Tokens']} />
+                    <Line type="monotone" dataKey="tokens" stroke="#818CF8" strokeWidth={2} dot={false} activeDot={{ r: 4, fill: '#818CF8' }} />
+                  </LineChart>
+                </ResponsiveContainer>
+              ) : (
+                <EmptyChart />
+              )}
+            </ChartCard>
+          </div>
 
           {/* Cost by provider + cost by agent */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.25s both' }}>
             <ChartCard title="Cost by Provider">
               {providerData.length > 0 ? (
                 <ResponsiveContainer width="100%" height={280}>
@@ -293,16 +290,16 @@ export function MetricsDashboard() {
 
           {/* Task KPIs */}
           {taskMetrics && (
-            <>
+            <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
               <h3 className="font-display text-[16px] font-700 text-text mt-2">Task Performance</h3>
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                <StatCard label="Tasks Completed" value={String(taskMetrics.completedCount)} />
-                <StatCard label="Avg Cycle Time" value={formatDuration(taskMetrics.avgCycleMs)} />
-                <StatCard label="WIP" value={String(taskMetrics.wip)} />
-                <StatCard label="Completion Rate" value={`${completionRate}%`} />
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
+                <StatCard label="Tasks Completed" value={String(taskMetrics.completedCount)} index={0} />
+                <StatCard label="Avg Cycle Time" value={formatDuration(taskMetrics.avgCycleMs)} index={1} />
+                <StatCard label="WIP" value={String(taskMetrics.wip)} index={2} />
+                <StatCard label="Completion Rate" value={`${completionRate}%`} index={3} />
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                 <ChartCard title="Task Velocity">
                   {taskMetrics.velocity.length > 0 ? (
                     <ResponsiveContainer width="100%" height={280}>
@@ -345,20 +342,44 @@ export function MetricsDashboard() {
                   )}
                 </ChartCard>
               </div>
-            </>
+            </div>
           )}
 
+          {/* Latency by Provider */}
+          <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.35s both' }}>
+            <ChartCard title="Average Latency by Provider (ms)">
+              {providerData.some(p => (data?.providerHealth?.[p.name]?.avgLatencyMs ?? 0) > 0) ? (
+                <ResponsiveContainer width="100%" height={280}>
+                  <BarChart data={providerData.map(p => ({ ...p, latency: Math.round(data?.providerHealth?.[p.name]?.avgLatencyMs || 0) }))} layout="vertical" margin={{ top: 5, right: 30, bottom: 5, left: 40 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" horizontal={false} />
+                    <XAxis type="number" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
+                    <YAxis dataKey="name" type="category" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} width={80} />
+                    <Tooltip {...tooltipStyle} cursor={{ fill: 'rgba(255,255,255,0.04)' }} />
+                    <Bar dataKey="latency" radius={[0, 4, 4, 0]}>
+                      {providerData.map((_entry, index) => (
+                        <Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              ) : (
+                <EmptyChart />
+              )}
+            </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 style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
+              <h3 className="font-display text-[14px] font-600 text-text-2 mb-3 flex items-center gap-2">Provider Health <HintTip text="API reliability and performance across your configured providers" /></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]) => (
+                  .map(([name, h], idx) => (
                     <div
                       key={name}
-                      className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04] flex flex-col gap-3"
+                      className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04] flex flex-col gap-3 hover:bg-surface transition-all hover:scale-[1.02]"
+                      style={{ animation: 'spring-in 0.5s var(--ease-spring) both', animationDelay: `${0.45 + idx * 0.03}s` }}
                     >
                       <div className="flex items-center justify-between">
                         <p className="text-[14px] font-600 text-text">{name}</p>
@@ -367,13 +388,13 @@ export function MetricsDashboard() {
                       <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="text-text-3 flex items-center gap-1">Error Rate <HintTip text="Percentage of API calls that failed" /></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-3 flex items-center gap-1">Avg Latency <HintTip text="Average response time from the provider" /></span>
                             <span className="text-text font-500 text-right">{Math.round(h.avgLatencyMs)}ms</span>
                           </>
                         )}
@@ -401,9 +422,12 @@ export function MetricsDashboard() {
   )
 }
 
-function StatCard({ label, value }: { label: string; value: string }) {
+function StatCard({ label, value, index = 0 }: { label: string; value: string; index?: number }) {
   return (
-    <div className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04]">
+    <div
+      className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04] hover:bg-surface transition-all hover:scale-[1.02]"
+      style={{ animation: 'spring-in 0.6s var(--ease-spring) both', animationDelay: `${0.1 + index * 0.05}s` }}
+    >
       <p className="text-[11px] font-500 text-text-3 uppercase tracking-[0.05em] mb-1">{label}</p>
       <p className="text-[22px] font-display font-700 tracking-[-0.02em] text-text">{value}</p>
     </div>
@@ -412,7 +436,7 @@ function StatCard({ label, value }: { label: string; value: string }) {
 
 function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="bg-surface-2 rounded-[12px] p-5 border border-white/[0.04]">
+    <div className="bg-surface-2 rounded-[12px] p-5 border border-white/[0.04] hover:border-white/[0.1] transition-colors">
       <h3 className="font-display text-[14px] font-600 text-text-2 mb-4">{title}</h3>
       {children}
     </div>