@swarmclawai/swarmclaw 0.6.7 → 0.6.8

package/src/components/memory/memory-browser.tsx

@@ -5,6 +5,7 @@ import { searchMemory } from '@/lib/memory'
 import { useAppStore } from '@/stores/use-app-store'
 import { MemoryCard } from './memory-card'
 import { MemoryDetail } from './memory-detail'
+import { MemoryGraphView } from './memory-graph-view'
 import type { MemoryEntry } from '@/types'
 
 export function MemoryBrowser() {
@@ -19,6 +20,7 @@ export function MemoryBrowser() {
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const [viewMode, setViewMode] = useState<'list' | 'graph'>('list')
   const searchRef = useRef(search)
 
   // Derive the API agentId from the filter
@@ -102,12 +104,26 @@ export function MemoryBrowser() {
 
   return (
     <div className="flex-1 flex h-full min-w-0">
-      {/* Left: Memory card list */}
+      {/* Left: Memory card list or Graph Toggle */}
       <div className="w-[360px] shrink-0 border-r border-white/[0.06] flex flex-col overflow-hidden">
         {/* Header + search */}
         <div className="px-3 pt-3 pb-1 shrink-0">
           <div className="flex items-center gap-2 mb-2">
             <h3 className="font-display text-[13px] font-600 text-text-2 tracking-[-0.01em] flex-1 truncate">{filterLabel}</h3>
+            <div className="flex bg-white/[0.04] p-0.5 rounded-[8px]">
+               <button 
+                 onClick={() => setViewMode('list')}
+                 className={`p-1 rounded-[6px] transition-colors ${viewMode === 'list' ? 'bg-white/[0.08] text-text' : 'text-text-3 hover:text-text-2'}`}
+               >
+                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+               </button>
+               <button 
+                 onClick={() => setViewMode('graph')}
+                 className={`p-1 rounded-[6px] transition-colors ${viewMode === 'graph' ? 'bg-white/[0.08] text-text' : 'text-text-3 hover:text-text-2'}`}
+               >
+                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+               </button>
+            </div>
             <span className="text-[10px] font-mono tabular-nums text-text-3/50">{filtered.length}</span>
           </div>
           <input
@@ -150,56 +166,68 @@ export function MemoryBrowser() {
 
         {/* Cards */}
         <div className="flex-1 overflow-y-auto">
-          {filtered.length > 0 ? (
-            <div className="flex flex-col gap-0.5 px-2 pb-4">
-              {filtered.map((e) => {
-                // Show agent info on cards when in "All Memories" view
-                const showAgent = !memoryAgentFilter
-                const agent = showAgent && e.agentId ? agents[e.agentId] : null
-                return (
-                  <MemoryCard
-                    key={e.id}
-                    entry={e}
-                    active={e.id === selectedMemoryId}
-                    agentName={showAgent ? (agent?.name || null) : undefined}
-                    agentAvatarSeed={showAgent ? (agent?.avatarSeed || null) : undefined}
-                    agentAvatarUrl={showAgent ? (agent?.avatarUrl || null) : undefined}
-                    onClick={() => setSelectedMemoryId(e.id)}
-                  />
-                )
-              })}
-            </div>
-          ) : error ? (
-            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
-              <p className="font-display text-[14px] font-600 text-text-2">Couldn&apos;t load memories</p>
-              <p className="text-[12px] text-text-3/60">{error}</p>
-              <button
-                onClick={() => { void load(search) }}
-                className="px-3 py-1.5 rounded-[8px] bg-accent-soft text-accent-bright text-[12px] font-600 cursor-pointer border-none"
-                style={{ fontFamily: 'inherit' }}
-              >
-                Retry
-              </button>
-            </div>
-          ) : loaded ? (
-            <div className="flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
-              <div className="w-10 h-10 rounded-[12px] bg-accent-soft flex items-center justify-center">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
-                  <ellipse cx="12" cy="5" rx="9" ry="3" />
-                  <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
-                  <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
-                </svg>
+          {viewMode === 'list' ? (
+            filtered.length > 0 ? (
+              <div className="flex flex-col gap-0.5 px-2 pb-4">
+                {filtered.map((e) => {
+                  // Show agent info on cards when in "All Memories" view
+                  const showAgent = !memoryAgentFilter
+                  const agent = showAgent && e.agentId ? agents[e.agentId] : null
+                  return (
+                    <MemoryCard
+                      key={e.id}
+                      entry={e}
+                      active={e.id === selectedMemoryId}
+                      agentName={showAgent ? (agent?.name || null) : undefined}
+                      agentAvatarSeed={showAgent ? (agent?.avatarSeed || null) : undefined}
+                      agentAvatarUrl={showAgent ? (agent?.avatarUrl || null) : undefined}
+                      onClick={() => setSelectedMemoryId(e.id)}
+                    />
+                  )
+                })}
               </div>
-              <p className="font-display text-[14px] font-600 text-text-2">No memories yet</p>
-              <p className="text-[12px] text-text-3/50">Agents store knowledge here as they learn</p>
+            ) : error ? (
+              <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+                <p className="font-display text-[14px] font-600 text-text-2">Couldn&apos;t load memories</p>
+                <p className="text-[12px] text-text-3/60">{error}</p>
+                <button
+                  onClick={() => { void load(search) }}
+                  className="px-3 py-1.5 rounded-[8px] bg-accent-soft text-accent-bright text-[12px] font-600 cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Retry
+                </button>
+              </div>
+            ) : loaded ? (
+              <div className="flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+                <div className="w-10 h-10 rounded-[12px] bg-accent-soft flex items-center justify-center">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+                    <ellipse cx="12" cy="5" rx="9" ry="3" />
+                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+                  </svg>
+                </div>
+                <p className="font-display text-[14px] font-600 text-text-2">No memories yet</p>
+                <p className="text-[12px] text-text-3/50">Agents store knowledge here as they learn</p>
+              </div>
+            ) : null
+          ) : (
+            <div className="p-4 text-[12px] text-text-3 italic">
+              Graph view enabled in main area.
             </div>
-          ) : null}
+          )}
         </div>
       </div>
 
-      {/* Right: Detail */}
+      {/* Right: Detail or Graph */}
       <div className="flex-1 flex flex-col min-w-0">
-        <MemoryDetail />
+        {viewMode === 'graph' ? (
+          <div className="flex-1 p-4 flex flex-col">
+            <MemoryGraphView />
+          </div>
+        ) : (
+          <MemoryDetail />
+        )}
       </div>
     </div>
   )

package/src/components/memory/memory-graph-view.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+
+interface Node {
+  id: string
+  title: string
+  category: string
+  agentId?: string | null
+  x: number
+  y: number
+  vx: number
+  vy: number
+}
+
+interface Link {
+  source: string
+  target: string
+  type: string
+}
+
+export function MemoryGraphView() {
+  const [data, setData] = useState<{ nodes: Node[]; links: Link[] }>({ nodes: [], links: [] })
+  const [loading, setLoading] = useState(true)
+  const [hoveredNode, setHoveredNode] = useState<string | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const requestRef = useRef<number>(null)
+  
+  const selectedMemoryId = useAppStore((s) => s.selectedMemoryId)
+  const setSelectedMemoryId = useAppStore((s) => s.setSelectedMemoryId)
+  const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
+
+  useEffect(() => {
+    async function load() {
+      setLoading(true)
+      try {
+        const url = `/memory/graph${memoryAgentFilter ? `?agentId=${memoryAgentFilter}` : ''}`
+        const res = await api<{ nodes: Node[]; links: Link[] }>('GET', url)
+        
+        // Initialize positions
+        const nodes = res.nodes.map(n => ({
+          ...n,
+          x: Math.random() * 800,
+          y: Math.random() * 600,
+          vx: 0,
+          vy: 0
+        }))
+        
+        setData({ nodes, links: res.links })
+      } catch (err) {
+        console.error('Failed to load memory graph', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [memoryAgentFilter])
+
+  // Simple Force-Directed Simulation
+  useEffect(() => {
+    if (data.nodes.length === 0) return
+
+    const animate = () => {
+      setData(prev => {
+        const nodes = [...prev.nodes]
+        const links = prev.links
+        
+        // 1. Repulsion between all nodes
+        for (let i = 0; i < nodes.length; i++) {
+          for (let j = i + 1; j < nodes.length; j++) {
+            const dx = nodes[i].x - nodes[j].x
+            const dy = nodes[i].y - nodes[j].y
+            const distSq = dx * dx + dy * dy + 0.1
+            const force = 400 / distSq
+            const fx = dx * force
+            const fy = dy * force
+            nodes[i].vx += fx
+            nodes[i].vy += fy
+            nodes[j].vx -= fx
+            nodes[j].vy -= fy
+          }
+        }
+
+        // 2. Attraction along links
+        for (const link of links) {
+          const source = nodes.find(n => n.id === link.source)
+          const target = nodes.find(n => n.id === link.target)
+          if (source && target) {
+            const dx = target.x - source.x
+            const dy = target.y - source.y
+            const dist = Math.sqrt(dx * dx + dy * dy) + 0.1
+            const force = (dist - 100) * 0.02
+            const fx = (dx / dist) * force
+            const fy = (dy / dist) * force
+            source.vx += fx
+            source.vy += fy
+            target.vx -= fx
+            target.vy -= fy
+          }
+        }
+
+        // 3. Centering force
+        const cx = 400
+        const cy = 300
+        for (const node of nodes) {
+          node.vx += (cx - node.x) * 0.01
+          node.vy += (cy - node.y) * 0.01
+        }
+
+        // 4. Update positions with damping
+        for (const node of nodes) {
+          node.x += node.vx
+          node.y += node.vy
+          node.vx *= 0.8
+          node.vy *= 0.8
+        }
+
+        return { nodes, links }
+      })
+      requestRef.current = requestAnimationFrame(animate)
+    }
+
+    requestRef.current = requestAnimationFrame(animate)
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current)
+    }
+  }, [data.nodes.length])
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent-bright"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className="flex-1 relative overflow-hidden bg-black/20 rounded-[16px] border border-white/[0.06]">
+      <svg width="100%" height="100%" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
+        {/* Links */}
+        {data.links.map((link, i) => {
+          const s = data.nodes.find(n => n.id === link.source)
+          const t = data.nodes.find(n => n.id === link.target)
+          if (!s || !t) return null
+          return (
+            <line
+              key={i}
+              x1={s.x} y1={s.y}
+              x2={t.x} y2={t.y}
+              stroke="white"
+              strokeOpacity="0.1"
+              strokeWidth="1"
+            />
+          )
+        })}
+
+        {/* Nodes */}
+        {data.nodes.map(node => (
+          <g 
+            key={node.id} 
+            transform={`translate(${node.x},${node.y})`}
+            onMouseEnter={() => setHoveredNode(node.id)}
+            onMouseLeave={() => setHoveredNode(null)}
+            onClick={() => setSelectedMemoryId(node.id)}
+            className="cursor-pointer"
+          >
+            <circle
+              r={selectedMemoryId === node.id ? 8 : 5}
+              fill={node.category === 'knowledge' ? '#10B981' : '#6366F1'}
+              stroke="white"
+              strokeWidth={selectedMemoryId === node.id ? 2 : 0}
+              className="transition-all"
+            />
+            {(hoveredNode === node.id || selectedMemoryId === node.id) && (
+              <text
+                y="-12"
+                textAnchor="middle"
+                className="text-[10px] fill-text font-600 pointer-events-none"
+                style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))' }}
+              >
+                {node.title}
+              </text>
+            )}
+          </g>
+        ))}
+      </svg>
+      
+      {/* Legend */}
+      <div className="absolute bottom-4 left-4 p-3 bg-surface/80 backdrop-blur rounded-[12px] border border-white/[0.06] flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#10B981]" />
+          <span className="text-[11px] text-text-3">Knowledge</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#6366F1]" />
+          <span className="text-[11px] text-text-3">Note / Working</span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/plugins/plugin-list.tsx

@@ -191,7 +191,7 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
             Installed
           </button>
           <button onClick={() => setTab('marketplace')} className={tabClass('marketplace')} style={{ fontFamily: 'inherit' }}>
-            Marketplace
+            SwarmForge
           </button>
         </div>
       )}

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

@@ -10,6 +10,7 @@ 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 { HintTip } from '@/components/shared/hint-tip'
 import {
   Newspaper, BarChart3, HeartPulse, PenLine, Trash2,
   Activity, ShieldCheck, DatabaseBackup, FileText,
@@ -326,7 +327,10 @@ export function ScheduleSheet() {
       {step === whenStep && (
         <div>
           <div className="mb-8">
-            <SectionLabel>Schedule Type</SectionLabel>
+            <div className="flex items-center gap-2 mb-3">
+              <SectionLabel className="mb-0">Schedule Type</SectionLabel>
+              <HintTip text="Once: runs a single time. Interval: repeats every N minutes. Cron: advanced scheduling with cron syntax" />
+            </div>
             <div className="grid grid-cols-3 gap-3">
               {(['cron', 'interval', 'once'] as ScheduleType[]).map((t) => (
                 <button
@@ -347,7 +351,10 @@ export function ScheduleSheet() {
 
           {scheduleType === 'cron' && (
             <div className="mb-8">
-              <SectionLabel>Schedule</SectionLabel>
+              <div className="flex items-center gap-2 mb-3">
+                <SectionLabel className="mb-0">Schedule</SectionLabel>
+                <HintTip text="Standard cron format: minute hour day month weekday (e.g. 0 9 * * 1-5 = weekdays at 9am)" />
+              </div>
 
               {/* Preset buttons */}
               <div className="flex flex-wrap gap-2 mb-4">

package/src/components/shared/hint-tip.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+
+interface Props {
+  text: string
+  side?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+export function HintTip({ text, side = 'top' }: Props) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className="inline-flex items-center justify-center w-[14px] h-[14px] rounded-full border border-white/[0.12]
+            text-[9px] font-600 text-text-3/50 hover:text-text-3 hover:border-white/[0.2] transition-colors cursor-help select-none shrink-0"
+          aria-label="More info"
+        >
+          ?
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        side={side}
+        sideOffset={6}
+        className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[8px] px-2.5 py-1.5 text-[11px] max-w-[240px]"
+      >
+        {text}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/components/shared/settings/section-runtime-loop.tsx

@@ -12,6 +12,7 @@ import {
 } from '@/lib/runtime-loop'
 import type { LoopMode } from '@/types'
 import type { SettingsSectionProps } from './types'
+import { HintTip } from '@/components/shared/hint-tip'
 
 export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const loopMode: LoopMode = appSettings.loopMode === 'ongoing' ? 'ongoing' : 'bounded'
@@ -25,7 +26,7 @@ export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: S
         Choose bounded or ongoing agent loops and set safety guards for task execution.
       </p>
       <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
-        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Loop Mode</label>
+        <label className="flex items-center gap-1.5 font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Loop Mode <HintTip text="Bounded = fixed max steps. Ongoing = runs until the task completes (with a safety cap)" /></label>
         <div className="grid grid-cols-2 gap-2 mb-5">
           {([
             { id: 'bounded' as const, name: 'Bounded' },
@@ -48,7 +49,7 @@ export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: S
         {loopMode === 'bounded' ? (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
             <div>
-              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Agent Steps</label>
+              <label className="flex items-center gap-1.5 font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Agent Steps <HintTip text="Maximum actions an agent can take before stopping — prevents infinite loops" /></label>
               <input
                 type="number"
                 min={1}
@@ -63,7 +64,7 @@ export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: S
               />
             </div>
             <div>
-              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Orchestrator Steps</label>
+              <label className="flex items-center gap-1.5 font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Orchestrator Steps <HintTip text="Maximum tool calls the orchestrator can make when coordinating multiple agents" /></label>
               <input
                 type="number"
                 min={1}
@@ -78,7 +79,7 @@ export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: S
               />
             </div>
             <div>
-              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Legacy Turns</label>
+              <label className="flex items-center gap-1.5 font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Legacy Turns <HintTip text="Max conversation turns for older orchestration mode — increase if agents get cut off mid-task" /></label>
               <input
                 type="number"
                 min={1}

package/src/components/tasks/approvals-panel.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import { toast } from 'sonner'
+
+
+export function ApprovalsPanel() {
+  const tasks = useAppStore((s) => s.tasks)
+  const agents = useAppStore((s) => s.agents)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+
+  const pendingApprovals = useMemo(() => {
+    return Object.values(tasks)
+      .filter((t) => t.pendingApproval)
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+  }, [tasks])
+
+  const handleDecision = async (taskId: string, approved: boolean) => {
+    try {
+      await api('POST', `/tasks/${taskId}/approve`, { approved })
+      toast.success(approved ? 'Tool execution approved' : 'Tool execution rejected')
+      loadTasks()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to submit decision')
+    }
+  }
+
+  if (pendingApprovals.length === 0) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
+        <div className="w-16 h-16 rounded-[24px] bg-white/[0.02] border border-white/[0.04] flex items-center justify-center mb-6">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/40">
+            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+            <path d="m9 12 2 2 4-4"/>
+          </svg>
+        </div>
+        <h2 className="font-display text-[18px] font-600 text-text-2 mb-2">No pending approvals</h2>
+        <p className="text-[13px] text-text-3/60 max-w-[280px]">
+          Your swarm is operating autonomously. Any actions requiring human oversight will appear here.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto px-6 py-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-1">Approvals</h1>
+            <p className="text-[13px] text-text-3">Governance queue for manual tool interventions</p>
+          </div>
+          <div className="px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[11px] font-600">
+            {pendingApprovals.length} Pending
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4">
+          {pendingApprovals.map((task) => {
+            const agent = agents[task.agentId]
+            const argsString = JSON.stringify(task.pendingApproval!.args, null, 2)
+            
+            return (
+              <div key={task.id} className="bg-surface rounded-[16px] border border-white/[0.06] overflow-hidden">
+                {/* Header */}
+                <div className="px-5 py-3 border-b border-white/[0.04] flex items-center justify-between bg-surface-2/50">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-[8px] bg-white/[0.04] flex items-center justify-center">
+                      <span className="text-[14px]">{agent?.avatarSeed ? '🤖' : '🦞'}</span>
+                    </div>
+                    <div>
+                      <h3 className="text-[13px] font-600 text-text">{agent?.name || 'Unknown Agent'}</h3>
+                      <p className="text-[11px] text-text-3">Task: {task.title}</p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-text-3/50 font-mono">
+                    {new Date(task.updatedAt).toLocaleString()}
+                  </span>
+                </div>
+
+                {/* Body */}
+                <div className="p-5">
+                  <div className="flex items-center gap-2 mb-3">
+                    <span className="px-2 py-0.5 rounded-[6px] bg-accent-soft text-accent-bright text-[10px] font-mono font-600">
+                      {task.pendingApproval!.toolName}
+                    </span>
+                    <span className="text-[12px] text-text-3">requested permission to execute.</span>
+                  </div>
+
+                  <div className="bg-black/30 rounded-[10px] border border-white/[0.04] p-4 mb-5 overflow-x-auto">
+                    <pre className="text-[12px] font-mono text-text-2/80">
+                      {argsString}
+                    </pre>
+                  </div>
+
+                  <div className="flex items-center justify-end gap-3 pt-4 border-t border-white/[0.04]">
+                    <button
+                      onClick={() => handleDecision(task.id, false)}
+                      className="px-5 py-2 rounded-[10px] bg-transparent border border-red-500/30 text-red-400 text-[12px] font-600 hover:bg-red-500/10 transition-colors"
+                    >
+                      Reject
+                    </button>
+                    <button
+                      onClick={() => handleDecision(task.id, true)}
+                      className="px-5 py-2 rounded-[10px] bg-emerald-500 border border-emerald-400 text-[#000] text-[12px] font-700 hover:brightness-110 transition-all shadow-[0_0_15px_rgba(16,185,129,0.3)]"
+                    >
+                      Approve Execution
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

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'
 
@@ -348,10 +349,31 @@ export function MetricsDashboard() {
             </>
           )}
 
+          {/* Latency by Provider */}
+          <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>
+
           {/* 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>
+              <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)
@@ -367,13 +389,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>
                           </>
                         )}