@swarmclawai/swarmclaw 0.6.7 → 0.7.0

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
@@ -189,7 +192,7 @@ export function HomeView() {
     <div className="flex-1 overflow-y-auto">
       <div className="max-w-[800px] mx-auto px-6 py-10">
         {/* Header */}
-        <div className="mb-10">
+        <div className="mb-10" style={{ animation: 'spring-in 0.6s var(--ease-spring)' }}>
           <h1 className="font-display text-[28px] font-700 text-text tracking-[-0.03em]">
             SwarmClaw
           </h1>
@@ -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" index={0} />
+          <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} hint="Tasks currently running or queued for execution" index={1} />
+          <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} hint="Estimated API cost for today across all providers" index={2} />
+          <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} hint="Active bridges to chat platforms (Discord, Slack, etc.)" index={3} />
         </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>
+          <div className="mb-10 px-1" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
+            <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>
@@ -226,7 +247,7 @@ export function HomeView() {
 
         {/* Notifications banner */}
         {unreadNotifications.length > 0 && (
-          <section className="mb-8">
+          <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.35s both' }}>
             <div className="rounded-[14px] border border-amber-400/20 bg-amber-400/[0.04] overflow-hidden">
               <div className="flex items-center gap-2 px-4 py-2.5 border-b border-amber-400/10">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-amber-400">
@@ -262,7 +283,7 @@ export function HomeView() {
         )}
 
         {/* Connector Status */}
-        <section className="mb-8">
+        <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
           <SectionHeader label="Connectors" onViewAll={allConnectors.length > 0 ? () => setActiveView('connectors') : undefined} />
           {allConnectors.length > 0 ? (
             <div className="flex gap-2 flex-wrap">
@@ -286,7 +307,7 @@ export function HomeView() {
         </section>
 
         {/* Two-column layout: Running Tasks + Upcoming Schedules */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.45s both' }}>
           {/* Running Tasks */}
           <section>
             <SectionHeader label="Running Tasks" onViewAll={runningTasks.length > 0 ? () => setActiveView('tasks') : undefined} />
@@ -352,7 +373,7 @@ export function HomeView() {
         </div>
 
         {/* Pinned Agents */}
-        <section className="mb-8">
+        <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.5s both' }}>
           <SectionHeader label="Pinned Agents" />
           {pinnedAgents.length > 0 ? (
             <div className="flex gap-3 overflow-x-auto pb-2">
@@ -417,7 +438,7 @@ export function HomeView() {
         </section>
 
         {/* Recent Chats */}
-        <section className="mb-8">
+        <section className="mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.55s both' }}>
           <SectionHeader label="Recent Chats" />
           {recentChats.length > 0 ? (
             <div className="flex flex-col gap-1">
@@ -465,7 +486,7 @@ export function HomeView() {
 
         {/* Activity Feed */}
         {recentActivity.length > 0 && (
-          <section className="mb-10">
+          <section className="mb-10" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.6s both' }}>
             <SectionHeader label="Recent Activity" />
             <div className="flex flex-col gap-0.5">
               {recentActivity.map((entry) => (
@@ -505,10 +526,19 @@ function SectionHeader({ label, onViewAll }: { label: string; onViewAll?: () =>
   )
 }
 
-function StatCard({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
+function StatCard({ label, value, accent, hint, index = 0 }: { label: string; value: string; accent?: boolean; hint?: string; index?: number }) {
   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>
+    <div
+      className="px-4 py-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06] hover:bg-white/[0.05] transition-all hover:scale-[1.02] active:scale-[0.98] cursor-default"
+      style={{
+        animation: 'spring-in 0.6s var(--ease-spring) both',
+        animationDelay: `${0.1 + index * 0.05}s`
+      }}
+    >
+      <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/input/chat-input.tsx

@@ -15,13 +15,14 @@ interface Props {
   streaming: boolean
   onSend: (text: string) => void
   onStop: () => void
+  pluginChatActions?: Array<{ id: string; label: string; action: string; value: string; tooltip?: string }>
 }
 
 // FilePreview is now imported from @/components/shared/file-preview
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10 MB
 
-export function ChatInput({ streaming, onSend, onStop }: Props) {
+export function ChatInput({ streaming, onSend, onStop, pluginChatActions = [] }: Props) {
   const [value, setValue] = useState('')
   const { ref: textareaRef, resize } = useAutoResize()
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -219,6 +220,26 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
               <span className="hidden sm:inline">Image</span>
             </button>
 
+            {/* Plugin Chat Actions */}
+            {pluginChatActions.map((action) => (
+              <Tooltip key={action.id}>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => {
+                      if (action.action === 'message') onSend(action.value)
+                      else if (action.action === 'link') window.open(action.value, '_blank')
+                    }}
+                    className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-emerald-500/[0.05]
+                      text-emerald-400 text-[13px] cursor-pointer hover:text-emerald-300 hover:bg-emerald-500/[0.1] transition-all duration-200"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {action.label}
+                  </button>
+                </TooltipTrigger>
+                {action.tooltip && <TooltipContent>{action.tooltip}</TooltipContent>}
+              </Tooltip>
+            ))}
+
             {micSupported && (
               <button
                 onClick={toggleRecording}

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

@@ -5,6 +5,7 @@ import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { Badge } from '@/components/ui/badge'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { EmptyState } from '@/components/shared/empty-state'
 import type { MemoryEntry } from '@/types'
 
 export function KnowledgeList() {
@@ -81,7 +82,7 @@ export function KnowledgeList() {
     <div className="flex-1 flex flex-col overflow-y-auto">
       {/* Search — only show when there are entries */}
       {entries.length > 0 && (
-        <div className="px-5 py-2 shrink-0">
+        <div className="px-5 py-2 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
           <input
             type="text"
             value={search}
@@ -96,7 +97,7 @@ export function KnowledgeList() {
 
       {/* Tag filters */}
       {uniqueTags.length > 0 && (
-        <div className="px-5 pb-1.5 shrink-0">
+        <div className="px-5 pb-1.5 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.05s both' }}>
           <div className="flex gap-1 flex-wrap">
             <button
               onClick={() => setActiveTag(null)}
@@ -124,7 +125,7 @@ export function KnowledgeList() {
       {/* Entries */}
       {entries.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3 px-5 pb-6">
-          {entries.map((entry) => {
+          {entries.map((entry, idx) => {
             const meta = entry.metadata as { tags?: string[]; scope?: 'global' | 'agent'; agentIds?: string[] } | undefined
             const tags = meta?.tags || []
             const entryScope = meta?.scope || 'global'
@@ -136,7 +137,11 @@ export function KnowledgeList() {
             return (
               <div
                 key={entry.id}
-                className="p-3 rounded-[12px] border border-white/[0.04] bg-transparent hover:bg-surface-2 transition-all relative group"
+                className="p-3 rounded-[12px] border border-white/[0.04] bg-transparent hover:bg-surface-2 transition-all relative group hover:scale-[1.01] hover:border-white/[0.1]"
+                style={{
+                  animation: 'spring-in 0.5s var(--ease-spring) both',
+                  animationDelay: `${0.1 + idx * 0.03}s`
+                }}
               >
                 <div className="flex items-start justify-between gap-2 mb-1">
                   <span className="font-display text-[13px] font-600 text-text truncate">{entry.title}</span>
@@ -197,7 +202,7 @@ export function KnowledgeList() {
           })}
         </div>
       ) : error ? (
-        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
           <p className="font-display text-[14px] font-600 text-text-2">Couldn&apos;t load knowledge</p>
           <p className="text-[12px] text-text-3/60">{error}</p>
           <button
@@ -209,23 +214,17 @@ export function KnowledgeList() {
           </button>
         </div>
       ) : loaded ? (
-        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
-          <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
+        <EmptyState
+          icon={
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
               <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
               <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
             </svg>
-          </div>
-          <p className="font-display text-[15px] font-600 text-text-2">No knowledge entries yet</p>
-          <p className="text-[13px] text-text-3/50">Add shared knowledge for your agents</p>
-          <button
-            onClick={() => openSheet()}
-            className="mt-1 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
-            style={{ fontFamily: 'inherit' }}
-          >
-            + Add Knowledge
-          </button>
-        </div>
+          }
+          title="No knowledge entries yet"
+          subtitle="Add shared knowledge for your agents"
+          action={{ label: '+ Add Knowledge', onClick: () => openSheet() }}
+        />
       ) : null}
     </div>
   )

package/src/components/knowledge/knowledge-sheet.tsx

@@ -6,6 +6,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { MemoryEntry } from '@/types'
+import { toast } from 'sonner'
 
 const ACCEPTED_TYPES = '.txt,.md,.csv,.json,.jsonl,.html,.xml,.yaml,.yml,.toml,.py,.js,.ts,.tsx,.jsx,.go,.rs,.java,.c,.cpp,.h,.rb,.php,.sh,.sql,.log,.pdf'
 
@@ -91,21 +92,22 @@ export function KnowledgeSheet() {
       })
       if (!res.ok) {
         const err = await res.json().catch(() => ({ error: 'Upload failed' }))
-        console.error('Upload failed:', err.error)
+        toast.error(err.error || 'Upload failed')
         return
       }
       const result: UploadResult = await res.json()
       if (!title.trim()) setTitle(result.title)
       setContent(result.content)
       setUploadedFile({ name: result.filename, url: result.url, size: result.size })
+      toast.success('Document content extracted')
 
       // Auto-tag based on file extension
       const ext = file.name.split('.').pop()?.toLowerCase() || ''
       if (ext && !tags.includes(ext)) {
         setTags((prev) => prev ? `${prev}, ${ext}` : ext)
       }
-    } catch (err) {
-      console.error('Upload error:', err)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Upload failed')
     } finally {
       setUploading(false)
     }
@@ -168,13 +170,15 @@ export function KnowledgeSheet() {
 
       if (editingId) {
         await api('PUT', `/knowledge/${editingId}`, payload)
+        toast.success('Knowledge entry updated')
       } else {
         await api('POST', '/knowledge', payload)
+        toast.success('Knowledge entry created')
       }
 
       onClose()
-    } catch {
-      // silent
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save knowledge')
     } finally {
       setSaving(false)
     }

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { Component, useState, useEffect, useCallback } from 'react'
+import { Component, useState, useEffect, useCallback, useMemo } from 'react'
 import type { ReactNode, ErrorInfo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useMediaQuery } from '@/hooks/use-media-query'
@@ -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'
@@ -62,6 +63,8 @@ import { CanvasPanel } from '@/components/canvas/canvas-panel'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { api } from '@/lib/api-client'
 import { safeStorageGet, safeStorageSet } from '@/lib/safe-storage'
+import { useApprovalStore } from '@/stores/use-approval-store'
+import { useWs } from '@/hooks/use-ws'
 import type { AppView } from '@/types'
 
 const RAIL_EXPANDED_KEY = 'sc_rail_expanded'
@@ -89,9 +92,37 @@ export function AppLayout() {
   const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
   const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
   const tasks = useAppStore((s) => s.tasks)
+  const approvals = useAppStore((s) => s.approvals)
+  const loadApprovals = useAppStore((s) => s.loadApprovals)
+  const execApprovals = useApprovalStore((s) => s.approvals)
+  const loadExecApprovals = useApprovalStore((s) => s.loadApprovals)
+  const pruneExecApprovals = useApprovalStore((s) => s.pruneExpired)
   const isDesktop = useMediaQuery('(min-width: 768px)')
   const hasSelectedSession = !!(currentSessionId && sessions[currentSessionId])
-  const pendingApprovalCount = Object.values(tasks).filter((t) => t.pendingApproval).length
+  
+  const pendingApprovalCount = useMemo(() => {
+    const taskCount = Object.values(tasks).filter((t) => t.pendingApproval).length
+    const sessionCount = Object.values(approvals).filter((a) => a.status === 'pending').length
+    const execCount = Object.keys(execApprovals).length
+    return taskCount + sessionCount + execCount
+  }, [tasks, approvals, execApprovals])
+
+  useEffect(() => {
+    loadApprovals()
+    void loadExecApprovals()
+    const interval = setInterval(() => {
+      loadApprovals()
+      void loadExecApprovals()
+      pruneExecApprovals()
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [loadApprovals, loadExecApprovals, pruneExecApprovals])
+
+  useWs('approvals', loadApprovals, 10000)
+  useWs('openclaw:approvals', () => {
+    void loadExecApprovals()
+    pruneExecApprovals()
+  }, 10000)
 
   const appSettings = useAppStore((s) => s.appSettings)
   const [agentViewMode, setAgentViewMode] = useState<'chat' | 'config'>('chat')
@@ -145,6 +176,14 @@ export function AppLayout() {
     }
   }, [appSettings.themeHue])
 
+  const [pluginSidebarItems, setPluginSidebarItems] = useState<Array<{ id: string; label: string; href: string }>>([])
+
+  useEffect(() => {
+    api<Array<{ id: string; label: string; href: string }>>('GET', '/plugins/ui?type=sidebar').then(items => {
+      if (Array.isArray(items)) setPluginSidebarItems(items)
+    }).catch(() => {})
+  }, [])
+
   const [railExpanded, setRailExpanded] = useState(() => {
     const stored = safeStorageGet(RAIL_EXPANDED_KEY)
     return stored === null ? true : stored === 'true'
@@ -198,10 +237,11 @@ export function AppLayout() {
 
   const swipeHandlers = useSwipe({
     onSwipe: (dir) => {
+      if (isDesktop) return
       if (dir === 'right') setSidebarOpen(true)
       else setSidebarOpen(false)
     },
-    leftSwipeEnabled: sidebarOpen,
+    leftSwipeEnabled: !isDesktop && sidebarOpen,
   })
 
   const currentSession = currentSessionId ? sessions[currentSessionId] : null
@@ -222,15 +262,15 @@ export function AppLayout() {
   return (
     <div
       className="h-full flex overflow-hidden"
-      onTouchStart={swipeHandlers.onTouchStart}
-      onTouchMove={swipeHandlers.onTouchMove}
-      onTouchEnd={swipeHandlers.onTouchEnd}
+      onTouchStart={isDesktop ? undefined : swipeHandlers.onTouchStart}
+      onTouchMove={isDesktop ? undefined : swipeHandlers.onTouchMove}
+      onTouchEnd={isDesktop ? undefined : swipeHandlers.onTouchEnd}
     >
       {/* Desktop: Navigation rail (expandable) */}
       {isDesktop && (
         <div
-          className="shrink-0 bg-raised border-r border-white/[0.04] flex flex-col py-4 transition-all duration-200 overflow-visible"
-          style={{ width: railExpanded ? 180 : 60 }}
+          className="shrink-0 bg-raised border-r border-white/[0.04] flex flex-col py-4 min-h-0 transition-all duration-300 overflow-visible"
+          style={{ width: railExpanded ? 180 : 60, transitionTimingFunction: 'var(--ease-spring)' }}
         >
           {/* Logo + collapse toggle */}
           <div className={`flex items-center mb-4 shrink-0 ${railExpanded ? 'px-4 gap-3' : 'justify-center'}`}>
@@ -331,8 +371,9 @@ export function AppLayout() {
             </RailTooltip>
           )}
 
-          {/* Nav items */}
-          <div className={`flex flex-col gap-0.5 ${railExpanded ? 'px-3' : 'items-center'}`}>
+          <div className="flex-1 min-h-0 flex flex-col overflow-y-auto overscroll-contain touch-pan-y">
+            {/* Nav items */}
+            <div className={`flex flex-col gap-0.5 ${railExpanded ? 'px-3' : 'items-center'}`}>
             <NavItem view="home" label="Home" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('home')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" />
@@ -369,6 +410,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" />
@@ -434,12 +481,12 @@ export function AppLayout() {
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><polyline points="10 9 9 9 8 9" />
               </svg>
             </NavItem>
-          </div>
+            </div>
 
-          <div className="flex-1" />
+            <div className="flex-1" />
 
-          {/* Bottom: Docs + Daemon + Settings + User */}
-          <div className={`flex flex-col gap-1 ${railExpanded ? 'px-3' : 'items-center'}`}>
+            {/* Bottom: Docs + Daemon + Settings + User */}
+            <div className={`flex flex-col gap-1 ${railExpanded ? 'px-3' : 'items-center'}`}>
             {railExpanded ? (
               <a
                 href="https://swarmclaw.ai/docs"
@@ -536,15 +583,16 @@ export function AppLayout() {
                 </button>
               </RailTooltip>
             )}
+            </div>
           </div>
         </div>
       )}
 
       {/* Desktop: Side panel (wallets has its own built-in sidebar) */}
-      {isDesktop && sidebarOpen && activeView !== 'wallets' && (
+      {isDesktop && sidebarOpen && activeView !== 'wallets' && activeView !== 'approvals' && (
         <div
-          className="w-[280px] shrink-0 bg-raised border-r border-white/[0.04] flex flex-col h-full"
-          style={{ animation: 'panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}
+          className="w-[280px] shrink-0 bg-raised border-r border-white/[0.04] flex flex-col h-full min-h-0 overflow-hidden touch-pan-y"
+          style={{ animation: 'panel-in 0.3s var(--ease-spring)' }}
         >
           <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>
@@ -611,7 +659,7 @@ export function AppLayout() {
         <div className="fixed inset-0 z-50">
           <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setSidebarOpen(false)} />
           <div
-            className="absolute inset-y-0 left-0 w-[300px] bg-raised shadow-[4px_0_60px_rgba(0,0,0,0.7)] flex flex-col"
+            className="absolute inset-y-0 left-0 w-[300px] bg-raised shadow-[4px_0_60px_rgba(0,0,0,0.7)] flex flex-col min-h-0 overflow-hidden touch-pan-y"
             style={{ animation: 'slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1)' }}
           >
             <div className="flex items-center gap-3 px-5 py-4 shrink-0">
@@ -652,6 +700,17 @@ export function AppLayout() {
                   {v}
                 </button>
               ))}
+              {/* Dynamic Plugin Items */}
+              {pluginSidebarItems.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => window.open(item.href, '_blank')}
+                  className="py-2 px-2.5 rounded-[10px] text-[11px] font-600 capitalize cursor-pointer transition-all bg-emerald-500/[0.05] text-emerald-400/80 hover:text-emerald-400 border border-emerald-400/10"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {item.label}
+                </button>
+              ))}
             </div>
             {activeView !== 'logs' && activeView !== 'usage' && activeView !== 'runs' && activeView !== 'settings' && (
             <div className="px-4 py-2.5 shrink-0">
@@ -742,6 +801,8 @@ export function AppLayout() {
             </div>
           ) : activeView === 'tasks' && isDesktop ? (
             <TaskBoard />
+          ) : activeView === 'approvals' ? (
+            <ApprovalsPanel />
           ) : activeView === 'memory' ? (
             <MemoryBrowser />
           ) : activeView === 'activity' ? (
@@ -900,6 +961,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 +1100,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 }) {
@@ -1154,7 +1222,7 @@ function NavItem({ view, label, expanded, active, sidebarOpen, onClick, badge, c
             </span>
           )}
         </span>
-        <span className="truncate">{label}</span>
+        <span className="truncate" style={{ animation: 'spring-in 0.4s var(--ease-spring)' }}>{label}</span>
       </button>
     )
   }