@swarmclawai/swarmclaw 0.6.7 → 0.6.8

package/src/components/chat/session-debug-panel.tsx

@@ -3,6 +3,8 @@
 import { useState, useEffect } from 'react'
 import type { Message } from '@/types'
 import { IconButton } from '@/components/shared/icon-button'
+import { CheckpointTimeline } from './checkpoint-timeline'
+import { useAppStore } from '@/stores/use-app-store'
 
 interface Props {
   messages: Message[]
@@ -60,23 +62,16 @@ const TYPE_COLORS: Record<EventType, string> = {
   tool_call: '#8B5CF6',
 }
 
-const TYPE_ICONS: Record<EventType, string> = {
-  user: 'U',
-  assistant: 'AI',
-  delegation: 'D',
-  agent_result: 'R',
-  system: 'S',
-  error: '!',
-  tool_call: 'T',
-}
-
 function fmtTime(ts: number) {
   return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
 }
 
 export function SessionDebugPanel({ messages, open, onClose }: Props) {
+  const [tab, setTab] = useState<'log' | 'timeline'>('log')
   const [filter, setFilter] = useState<EventType | 'all'>('all')
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null)
+  
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
 
   const events = messages.map(classifyMessage)
   const filtered = filter === 'all' ? events : events.filter((e) => e.type === filter)
@@ -105,8 +100,23 @@ export function SessionDebugPanel({ messages, open, onClose }: Props) {
           <path d="M18 20V4" />
           <path d="M6 20v-4" />
         </svg>
-        <span className="font-display text-[16px] font-600 tracking-[-0.02em] flex-1">Session Debug</span>
-        <span className="text-[12px] text-text-3 font-mono">{events.length} events</span>
+        <span className="font-display text-[16px] font-600 tracking-[-0.02em] flex-1">Session X-Ray</span>
+        
+        <div className="flex bg-white/[0.04] p-0.5 rounded-[8px] mr-2">
+           <button 
+             onClick={() => setTab('log')}
+             className={`px-3 py-1 rounded-[6px] text-[11px] font-600 transition-all ${tab === 'log' ? 'bg-white/[0.08] text-text shadow-sm' : 'text-text-3 hover:text-text-2'}`}
+           >
+             Event Log
+           </button>
+           <button 
+             onClick={() => setTab('timeline')}
+             className={`px-3 py-1 rounded-[6px] text-[11px] font-600 transition-all ${tab === 'timeline' ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:text-text-2'}`}
+           >
+             Time Travel
+           </button>
+        </div>
+
         <IconButton onClick={onClose} aria-label="Close debug panel">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
             <line x1="18" y1="6" x2="6" y2="18" />
@@ -115,82 +125,94 @@ export function SessionDebugPanel({ messages, open, onClose }: Props) {
         </IconButton>
       </div>
 
-      {/* Filters */}
-      <div className="flex gap-2 px-5 py-3 border-b border-white/[0.04] overflow-x-auto shrink-0">
-        {filters.map((f) => (
-          <button
-            key={f.id}
-            onClick={() => setFilter(f.id)}
-            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border whitespace-nowrap
-              ${filter === f.id
-                ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
-            style={{ fontFamily: 'inherit' }}
-          >
-            {f.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Event timeline */}
-      <div className="flex-1 overflow-y-auto px-5 py-4">
-        <div className="relative">
-          {/* Timeline line */}
-          <div className="absolute left-[15px] top-0 bottom-0 w-px bg-white/[0.06]" />
-
-          {filtered.map((event, i) => {
-            const color = TYPE_COLORS[event.type]
-            const expanded = expandedIdx === i
-            return (
+      {tab === 'log' ? (
+        <>
+          {/* Filters */}
+          <div className="flex gap-2 px-5 py-3 border-b border-white/[0.04] overflow-x-auto shrink-0">
+            {filters.map((f) => (
               <button
-                key={i}
-                onClick={() => setExpandedIdx(expanded ? null : i)}
-                className="w-full text-left relative pl-10 pb-4 group cursor-pointer"
+                key={f.id}
+                onClick={() => setFilter(f.id)}
+                className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border whitespace-nowrap
+                  ${filter === f.id
+                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                    : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+                style={{ fontFamily: 'inherit' }}
               >
-                {/* Dot */}
-                <div
-                  className="absolute left-[10px] top-1 w-[11px] h-[11px] rounded-full border-2"
-                  style={{ borderColor: color, backgroundColor: expanded ? color : 'transparent' }}
-                />
-
-                {/* Content */}
-                <div className="flex items-center gap-2 mb-0.5">
-                  <span className="text-[11px] font-700 uppercase tracking-wider" style={{ color }}>
-                    {event.label}
-                  </span>
-                  <span className="text-[10px] text-text-3/70 font-mono">{fmtTime(event.time)}</span>
-                </div>
-
-                <p className={`text-[12px] text-text-3 leading-[1.5] ${expanded ? 'whitespace-pre-wrap' : 'line-clamp-2'}`}>
-                  {event.detail}
-                </p>
-
-                {!expanded && event.detail.length > 150 && (
-                  <span className="text-[11px] text-accent-bright/60 mt-1 inline-block">click to expand</span>
-                )}
+                {f.label}
               </button>
-            )
-          })}
-
-          {filtered.length === 0 && (
-            <p className="text-center text-[13px] text-text-3 py-12">No events matching filter</p>
-          )}
+            ))}
+          </div>
+
+          {/* Event timeline */}
+          <div className="flex-1 overflow-y-auto px-5 py-4">
+            <div className="relative">
+              {/* Timeline line */}
+              <div className="absolute left-[15px] top-0 bottom-0 w-px bg-white/[0.06]" />
+
+              {filtered.map((event, i) => {
+                const color = TYPE_COLORS[event.type]
+                const expanded = expandedIdx === i
+                return (
+                  <button
+                    key={i}
+                    onClick={() => setExpandedIdx(expanded ? null : i)}
+                    className="w-full text-left relative pl-10 pb-4 group cursor-pointer"
+                  >
+                    {/* Dot */}
+                    <div
+                      className="absolute left-[10px] top-1 w-[11px] h-[11px] rounded-full border-2"
+                      style={{ borderColor: color, backgroundColor: expanded ? color : 'transparent' }}
+                    />
+
+                    {/* Content */}
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <span className="text-[11px] font-700 uppercase tracking-wider" style={{ color }}>
+                        {event.label}
+                      </span>
+                      <span className="text-[10px] text-text-3/70 font-mono">{fmtTime(event.time)}</span>
+                    </div>
+
+                    <p className={`text-[12px] text-text-3 leading-[1.5] ${expanded ? 'whitespace-pre-wrap' : 'line-clamp-2'}`}>
+                      {event.detail}
+                    </p>
+
+                    {!expanded && event.detail.length > 150 && (
+                      <span className="text-[11px] text-accent-bright/60 mt-1 inline-block">click to expand</span>
+                    )}
+                  </button>
+                )
+              })}
+
+              {filtered.length === 0 && (
+                <p className="text-center text-[13px] text-text-3 py-12">No events matching filter</p>
+              )}
+            </div>
+          </div>
+
+          {/* Stats bar */}
+          <div className="flex items-center gap-4 px-5 py-3 border-t border-white/[0.06] shrink-0">
+            {(['delegation', 'agent_result', 'error'] as EventType[]).map((type) => {
+              const count = events.filter((e) => e.type === type).length
+              if (!count) return null
+              return (
+                <span key={type} className="flex items-center gap-1.5 text-[11px] font-mono" style={{ color: TYPE_COLORS[type] }}>
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: TYPE_COLORS[type] }} />
+                  {count} {type === 'delegation' ? 'delegations' : type === 'agent_result' ? 'results' : 'errors'}
+                </span>
+              )
+            })}
+          </div>
+        </>
+      ) : (
+        <div className="flex-1 overflow-y-auto">
+           {currentSessionId ? (
+             <CheckpointTimeline sessionId={currentSessionId} />
+           ) : (
+             <div className="p-12 text-center text-text-3">No active session</div>
+           )}
         </div>
-      </div>
-
-      {/* Stats bar */}
-      <div className="flex items-center gap-4 px-5 py-3 border-t border-white/[0.06] shrink-0">
-        {(['delegation', 'agent_result', 'error'] as EventType[]).map((type) => {
-          const count = events.filter((e) => e.type === type).length
-          if (!count) return null
-          return (
-            <span key={type} className="flex items-center gap-1.5 text-[11px] font-mono" style={{ color: TYPE_COLORS[type] }}>
-              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: TYPE_COLORS[type] }} />
-              {count} {type === 'delegation' ? 'delegations' : type === 'agent_result' ? 'results' : 'errors'}
-            </span>
-          )
-        })}
-      </div>
+      )}
     </div>
   )
 }

package/src/components/chat/task-approval-card.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useState } from 'react'
+import type { BoardTask } from '@/types'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import { toast } from 'sonner'
+
+interface Props {
+  task: BoardTask
+}
+
+export function TaskApprovalCard({ task }: Props) {
+  const [resolving, setResolving] = useState(false)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+
+  const handleResolve = async (approved: boolean) => {
+    setResolving(true)
+    try {
+      await api('POST', `/tasks/${task.id}/approve`, { approved })
+      toast.success(approved ? 'Tool execution approved' : 'Tool execution rejected')
+      await loadTasks()
+      await loadSessions()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to submit decision')
+    } finally {
+      setResolving(false)
+    }
+  }
+
+  if (!task.pendingApproval) return null
+
+  const { toolName, args } = task.pendingApproval
+
+  return (
+    <div className="my-2 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] p-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-5 h-5 rounded-full bg-amber-500/20 flex items-center justify-center">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-amber-400">
+            <path d="M12 9v2m0 4h.01" />
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          </svg>
+        </div>
+        <span className="text-[12px] font-700 text-amber-400 uppercase tracking-wider">Orchestration Intervention Required</span>
+      </div>
+
+      <p className="text-[13px] text-text-2 mb-3 font-500">
+        Agent requested to use <span className="text-amber-400 font-600 font-mono">{toolName}</span>:
+      </p>
+
+      <div className="bg-black/30 rounded-[10px] border border-white/[0.04] p-3 mb-4 overflow-x-auto max-h-[200px] overflow-y-auto">
+        <pre className="text-[11px] font-mono text-text-2/80 leading-relaxed whitespace-pre-wrap break-all">
+          {JSON.stringify(args, null, 2)}
+        </pre>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => handleResolve(true)}
+          disabled={resolving}
+          className="flex-1 px-4 py-2 rounded-[10px] bg-emerald-500 text-[#000] text-[12px] font-700 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {resolving ? 'Applying...' : 'Approve'}
+        </button>
+        <button
+          onClick={() => handleResolve(false)}
+          disabled={resolving}
+          className="px-4 py-2 rounded-[10px] bg-white/[0.04] border border-white/[0.08] text-text-3 text-[12px] font-600 hover:bg-white/[0.08] active:scale-[0.98] transition-all disabled:opacity-50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Reject
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/tool-call-bubble.tsx

@@ -29,6 +29,7 @@ const TOOL_COLORS: Record<string, string> = {
   search_history_tool: '#8B5CF6',
   manage_tasks: '#EC4899',
   manage_schedules: '#EC4899',
+  schedule_wake: '#F59E0B',
   manage_agents: '#EC4899',
   manage_skills: '#EC4899',
   manage_documents: '#EC4899',
@@ -81,6 +82,7 @@ export const TOOL_LABELS: Record<string, string> = {
   search_history_tool: 'Search History',
   manage_tasks: 'Tasks',
   manage_schedules: 'Schedules',
+  schedule_wake: 'Set Reminder',
   manage_agents: 'Agents',
   manage_skills: 'Skills',
   manage_documents: 'Documents',
@@ -118,6 +120,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   search_history_tool: 'Search chat history for relevant prior context',
   manage_tasks: 'Create, update, and manage tasks on the board',
   manage_schedules: 'Create and manage cron schedules',
+  schedule_wake: 'Set a timer to wake up in this chat later',
   manage_agents: 'Create and configure other agents',
   manage_skills: 'Create and manage agent skills',
   manage_documents: 'Upload and search indexed documents',

package/src/components/connectors/connector-sheet.tsx

@@ -12,6 +12,7 @@ import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { ChatroomPickerList } from '@/components/shared/chatroom-picker-list'
 import { SheetFooter } from '@/components/shared/sheet-footer'
 import { SectionLabel } from '@/components/shared/section-label'
+import { HintTip } from '@/components/shared/hint-tip'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { ConnectorHealth } from '@/components/connectors/connector-health'
 
@@ -643,12 +644,18 @@ export function ConnectorSheet() {
       {/* Platform-specific config */}
       {[...platformConfig.configFields, ...COMMON_CONFIG_FIELDS].map((field) => {
         const isTagField = field.key === 'allowedJids' || field.key === 'channelIds' || field.key === 'chatIds' || field.key === 'allowFrom'
+        const fieldHint: Record<string, string> = {
+          channelIds: "Find these in your platform's developer settings. Leave empty to allow all channels",
+          chatIds: "Find these in your platform's developer settings. Leave empty to allow all channels",
+          allowedJids: "Phone numbers in international format (e.g. 447xxx). Leave empty to allow all",
+        }
         if (isTagField) {
           const tags = (config[field.key] || '').split(',').map((s) => s.trim()).filter(Boolean)
           return (
             <div key={field.key} className="mb-6">
-              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+              <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
                 {field.label} <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+                {fieldHint[field.key] && <HintTip text={fieldHint[field.key]} />}
               </label>
               {field.help && <p className="text-[12px] text-text-3/60 mb-2">{field.help}</p>}
               <div className="flex flex-wrap gap-2 mb-2">

package/src/components/home/home-view.tsx

@@ -1,12 +1,13 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { AreaChart, Area, ResponsiveContainer } from 'recharts'
+import { AreaChart, Area, ResponsiveContainer, Tooltip } from 'recharts'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
 import type { Agent, Session, ActivityEntry, BoardTask, AppNotification } from '@/types'
+import { HintTip } from '@/components/shared/hint-tip'
 
 function timeAgo(ts: number): string {
   const diff = Date.now() - ts
@@ -86,7 +87,7 @@ export function HomeView() {
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
   const setMessages = useChatStore((s) => s.setMessages)
   const [todayCost, setTodayCost] = useState(0)
-  const [costTrend, setCostTrend] = useState<{ cost: number }[]>([])
+  const [costTrend, setCostTrend] = useState<{ cost: number; bucket: string }[]>([])
 
   const allAgents = Object.values(agents).filter((a) => !a.trashedAt)
   const pinnedAgents = allAgents.filter((a) => a.pinned)
@@ -146,11 +147,13 @@ export function HomeView() {
     void loadSchedules()
     void loadNotifications()
     void loadConnectors()
-    api<{ records: Array<{ estimatedCost: number }>; timeSeries: Array<{ cost: number }> }>('GET', '/usage?range=7d')
+    api<{ records: Array<{ estimatedCost: number }>; timeSeries: Array<{ cost: number; bucket: string }> }>('GET', '/usage?range=7d')
       .then((data) => {
-        const total = (data.records || []).reduce((s, r) => s + (r.estimatedCost || 0), 0)
-        setTodayCost(total)
-        setCostTrend((data.timeSeries || []).map((pt) => ({ cost: pt.cost })))
+        const series = (data.timeSeries || []).map((pt: { cost: number; bucket?: string }) => ({ cost: pt.cost, bucket: pt.bucket || '' }))
+        setCostTrend(series)
+        const todayBucket = new Date().toISOString().slice(0, 10)
+        const todayPt = series.find((pt) => pt.bucket === todayBucket)
+        setTodayCost(todayPt?.cost || 0)
       })
       .catch(() => {})
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -200,25 +203,43 @@ export function HomeView() {
 
         {/* Quick Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
-          <StatCard label="Agents" value={String(agentCount)} />
-          <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} />
-          <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} />
-          <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} />
+          <StatCard label="Agents" value={String(agentCount)} hint="Total active agents configured in your dashboard" />
+          <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} hint="Tasks currently running or queued for execution" />
+          <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} hint="Estimated API cost for today across all providers" />
+          <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} hint="Active bridges to chat platforms (Discord, Slack, etc.)" />
         </div>
 
         {/* Cost trend sparkline */}
         {costTrend.length > 1 && (
           <div className="mb-10 px-1">
-            <p className="text-[10px] text-text-3/50 uppercase tracking-wider mb-1">7-day cost trend</p>
+            <p className="text-[10px] text-text-3/50 uppercase tracking-wider mb-1 flex items-center gap-1.5">
+              7-day cost trend <HintTip text="Daily API spend over the past week — hover for details" />
+            </p>
             <ResponsiveContainer width="100%" height={60}>
-              <AreaChart data={costTrend} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
+              <AreaChart data={costTrend} margin={{ top: 2, right: 0, bottom: 0, left: 0 }} style={{ cursor: 'crosshair' }}>
                 <defs>
                   <linearGradient id="costGrad" x1="0" y1="0" x2="0" y2="1">
                     <stop offset="0%" stopColor="#818CF8" stopOpacity={0.3} />
                     <stop offset="100%" stopColor="#818CF8" stopOpacity={0} />
                   </linearGradient>
                 </defs>
-                <Area type="monotone" dataKey="cost" stroke="#818CF8" strokeWidth={1.5} fill="url(#costGrad)" dot={false} />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (!active || !payload?.[0]) return null
+                    const d = payload[0].payload as { cost: number; bucket: string }
+                    const label = d.bucket
+                      ? new Date(d.bucket + 'T00:00:00').toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
+                      : ''
+                    return (
+                      <div className="rounded-[8px] bg-surface border border-white/[0.1] px-3 py-2 shadow-lg">
+                        <p className="text-[11px] text-text-3/70 m-0">{label}</p>
+                        <p className="text-[14px] font-600 text-text m-0 mt-0.5">${d.cost.toFixed(4)}</p>
+                      </div>
+                    )
+                  }}
+                  cursor={{ stroke: '#818CF8', strokeWidth: 1, strokeDasharray: '3 3' }}
+                />
+                <Area type="monotone" dataKey="cost" stroke="#818CF8" strokeWidth={1.5} fill="url(#costGrad)" dot={false} activeDot={{ r: 3, fill: '#818CF8', stroke: '#818CF8' }} />
               </AreaChart>
             </ResponsiveContainer>
           </div>
@@ -505,10 +526,13 @@ function SectionHeader({ label, onViewAll }: { label: string; onViewAll?: () =>
   )
 }
 
-function StatCard({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
+function StatCard({ label, value, accent, hint }: { label: string; value: string; accent?: boolean; hint?: string }) {
   return (
     <div className="px-4 py-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06]">
-      <p className="text-[11px] font-600 text-text-3/60 uppercase tracking-wider mb-1">{label}</p>
+      <p className="text-[11px] font-600 text-text-3/60 uppercase tracking-wider mb-1 flex items-center gap-1.5">
+        {label}
+        {hint && <HintTip text={hint} />}
+      </p>
       <p className={`font-display text-[20px] font-700 tracking-[-0.02em] ${accent ? 'text-accent-bright' : 'text-text'}`}>{value}</p>
     </div>
   )

package/src/components/layout/app-layout.tsx

@@ -18,6 +18,7 @@ import { MemoryBrowser } from '@/components/memory/memory-browser'
 import { TaskList } from '@/components/tasks/task-list'
 import { TaskSheet } from '@/components/tasks/task-sheet'
 import { TaskBoard } from '@/components/tasks/task-board'
+import { ApprovalsPanel } from '@/components/tasks/approvals-panel'
 import { SecretsList } from '@/components/secrets/secrets-list'
 import { SecretSheet } from '@/components/secrets/secret-sheet'
 import { ProviderList } from '@/components/providers/provider-list'
@@ -369,6 +370,12 @@ export function AppLayout() {
                 <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" /><rect x="9" y="3" width="6" height="4" rx="1" /><path d="M9 14l2 2 4-4" />
               </svg>
             </NavItem>
+            <NavItem view="approvals" label="Approvals" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('approvals')} badge={pendingApprovalCount}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <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>
+            </NavItem>
             <NavItem view="secrets" label="Secrets" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('secrets')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
@@ -548,7 +555,7 @@ export function AppLayout() {
         >
           <div className="flex items-center px-5 pt-5 pb-3 shrink-0">
             <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em] capitalize flex-1">{activeView}</h2>
-            {activeView === 'logs' || activeView === 'usage' || activeView === 'runs' ? null : activeView === 'memory' ? (
+            {activeView === 'logs' || activeView === 'usage' || activeView === 'runs' || activeView === 'approvals' ? null : activeView === 'memory' ? (
               <button
                 onClick={() => useAppStore.getState().setMemorySheetOpen(true)}
                 className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 text-accent-bright bg-accent-soft hover:bg-accent-bright/15 transition-all cursor-pointer"
@@ -653,7 +660,7 @@ export function AppLayout() {
                 </button>
               ))}
             </div>
-            {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && activeView !== 'settings' && (
+            {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && activeView !== 'settings' && activeView !== 'approvals' && (
             <div className="px-4 py-2.5 shrink-0">
               <button
                 onClick={() => {
@@ -742,6 +749,8 @@ export function AppLayout() {
             </div>
           ) : activeView === 'tasks' && isDesktop ? (
             <TaskBoard />
+          ) : activeView === 'approvals' ? (
+            <ApprovalsPanel />
           ) : activeView === 'memory' ? (
             <MemoryBrowser />
           ) : activeView === 'activity' ? (
@@ -900,6 +909,7 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
   schedules: 'Automated task schedules',
   memory: 'Long-term agent memory store',
   tasks: 'Task board for orchestrator jobs',
+  approvals: 'Pending tool execution approvals',
   secrets: 'API keys & credentials for orchestrators',
   providers: 'LLM providers & custom endpoints',
   skills: 'Reusable instruction sets for agents',
@@ -1038,6 +1048,12 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents' | 'home'>, { icon: str
     description: 'Agent crypto wallets for autonomous financial operations on Solana.',
     features: ['Create Solana wallets for agents', 'Per-transaction and daily spending limits', 'User approval for transactions', 'Balance tracking and transaction history'],
   },
+  approvals: {
+    icon: 'check-circle',
+    title: 'Approvals',
+    description: 'Review and approve pending tool executions from agents.',
+    features: ['Review tool calls before execution', 'Approve or reject agent actions', 'Full context for each pending approval'],
+  },
 }
 
 function ViewEmptyState({ view }: { view: AppView }) {