@swarmclawai/swarmclaw 0.6.8 → 0.7.0

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

@@ -4,6 +4,7 @@ import {
   DEFAULT_AGENT_LOOP_RECURSION_LIMIT,
   DEFAULT_CLAUDE_CODE_TIMEOUT_SEC,
   DEFAULT_CLI_PROCESS_TIMEOUT_SEC,
+  DEFAULT_DELEGATION_MAX_DEPTH,
   DEFAULT_LEGACY_ORCHESTRATOR_MAX_TURNS,
   DEFAULT_ONGOING_LOOP_MAX_ITERATIONS,
   DEFAULT_ONGOING_LOOP_MAX_RUNTIME_MINUTES,
@@ -130,6 +131,24 @@ export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: S
           </div>
         )}
 
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
+          <div>
+            <label className="flex items-center gap-1.5 font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Delegation Depth <HintTip text="Maximum delegation chain depth for delegate_to_agent and spawn_subagent to prevent runaway fan-out" /></label>
+            <input
+              type="number"
+              min={1}
+              max={12}
+              value={appSettings.delegationMaxDepth ?? DEFAULT_DELEGATION_MAX_DEPTH}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ delegationMaxDepth: Number.isFinite(n) ? n : DEFAULT_DELEGATION_MAX_DEPTH })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+
         <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Execution Timeouts (Seconds)</label>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
           <div>
@@ -178,6 +197,131 @@ 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] mt-6 mb-3">LLM Response Cache</label>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
+          <div className="md:col-span-3 flex items-center gap-3">
+            <button
+              onClick={() => patchSettings({ responseCacheEnabled: !(appSettings.responseCacheEnabled ?? true) })}
+              className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.responseCacheEnabled ?? true) ? '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 ${(appSettings.responseCacheEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+            </button>
+            <span className="text-[12px] text-text-2">Enable deterministic cache (TTL + LRU) for non-tool model responses</span>
+          </div>
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">TTL (seconds)</label>
+            <input
+              type="number"
+              min={5}
+              max={604800}
+              value={appSettings.responseCacheTtlSec ?? 900}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ responseCacheTtlSec: Number.isFinite(n) ? n : 900 })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">Max Entries</label>
+            <input
+              type="number"
+              min={1}
+              max={20000}
+              value={appSettings.responseCacheMaxEntries ?? 500}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ responseCacheMaxEntries: Number.isFinite(n) ? n : 500 })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Task Quality Gate Defaults</label>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
+          <div className="md:col-span-3 flex items-center gap-3">
+            <button
+              onClick={() => patchSettings({ taskQualityGateEnabled: !(appSettings.taskQualityGateEnabled ?? true) })}
+              className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.taskQualityGateEnabled ?? true) ? '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 ${(appSettings.taskQualityGateEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+            </button>
+            <span className="text-[12px] text-text-2">Enable quality gate checks before tasks can be marked complete</span>
+          </div>
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">Min Result Chars</label>
+            <input
+              type="number"
+              min={10}
+              max={2000}
+              value={appSettings.taskQualityGateMinResultChars ?? 80}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ taskQualityGateMinResultChars: Number.isFinite(n) ? n : 80 })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">Min Evidence Signals</label>
+            <input
+              type="number"
+              min={0}
+              max={8}
+              value={appSettings.taskQualityGateMinEvidenceItems ?? 2}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ taskQualityGateMinEvidenceItems: Number.isFinite(n) ? n : 2 })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div className="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-2">
+            <label className="flex items-center gap-2 text-[12px] text-text-2">
+              <input
+                type="checkbox"
+                checked={appSettings.taskQualityGateRequireVerification ?? false}
+                onChange={(e) => patchSettings({ taskQualityGateRequireVerification: e.target.checked })}
+              />
+              Require verification evidence
+            </label>
+            <label className="flex items-center gap-2 text-[12px] text-text-2">
+              <input
+                type="checkbox"
+                checked={appSettings.taskQualityGateRequireArtifact ?? false}
+                onChange={(e) => patchSettings({ taskQualityGateRequireArtifact: e.target.checked })}
+              />
+              Require artifact evidence
+            </label>
+            <label className="flex items-center gap-2 text-[12px] text-text-2">
+              <input
+                type="checkbox"
+                checked={appSettings.taskQualityGateRequireReport ?? false}
+                onChange={(e) => patchSettings({ taskQualityGateRequireReport: e.target.checked })}
+              />
+              Require task report
+            </label>
+          </div>
+        </div>
+
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Integrity Monitor</label>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => patchSettings({ integrityMonitorEnabled: !(appSettings.integrityMonitorEnabled ?? true) })}
+            className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.integrityMonitorEnabled ?? true) ? '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 ${(appSettings.integrityMonitorEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+          </button>
+          <span className="text-[12px] text-text-2">
+            Watch critical identity/config files for drift and raise alerts.
+          </span>
+        </div>
       </div>
     </div>
   )

package/src/components/skills/clawhub-browser.tsx

@@ -23,6 +23,7 @@ interface SearchResponse {
   skills: ClawHubSkill[]
   total: number
   page: number
+  nextCursor?: string | null
 }
 
 interface ClawHubBrowserProps {

package/src/components/skills/skill-list.tsx

@@ -163,10 +163,14 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
 
         {hubSkills.length > 0 && (
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-            {hubSkills.map((skill) => (
+            {hubSkills.map((skill, idx) => (
               <div
                 key={skill.id}
-                className="p-4 rounded-[14px] border border-white/[0.06] bg-surface"
+                className="p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:border-white/[0.12] transition-all hover:scale-[1.01]"
+                style={{
+                  animation: 'spring-in 0.5s var(--ease-spring) both',
+                  animationDelay: `${idx * 0.03}s`
+                }}
               >
                 <div className="flex items-start justify-between gap-2">
                   <div className="min-w-0 flex-1">
@@ -225,21 +229,22 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
     <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
       {/* Sidebar: ClawHub button + Sheet */}
       {inSidebar && (
-        <>
+        <div style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
           <button
             onClick={() => setClawHubOpen(true)}
-            className="w-full mb-3 py-2.5 px-4 rounded-[12px] border border-dashed border-white/[0.1] text-[13px] font-600 text-text-3 hover:text-accent-bright hover:border-accent-bright/30 transition-all cursor-pointer bg-transparent"
+            className="w-full mb-3 py-2.5 px-4 rounded-[12px] border border-dashed border-white/[0.1] text-[13px] font-600 text-text-3 hover:text-accent-bright hover:border-accent-bright/30 transition-all cursor-pointer bg-transparent relative overflow-hidden group/hub"
             style={{ fontFamily: 'inherit' }}
           >
-            Browse ClawHub Skills
+            <span className="relative z-10">Browse ClawHub Skills</span>
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover/hub:animate-[shimmer-bar_2s_infinite]" />
           </button>
           <ClawHubBrowser open={clawHubOpen} onOpenChange={setClawHubOpen} onInstalled={() => loadSkills()} />
-        </>
+        </div>
       )}
 
       {/* Full-width: tabs */}
       {!inSidebar && (
-        <div className="flex gap-1 mb-4">
+        <div className="flex gap-1 mb-4" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
           <button onClick={() => setTab('skills')} className={tabClass('skills')} style={{ fontFamily: 'inherit' }}>
             My Skills
           </button>
@@ -251,7 +256,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
 
       {(!inSidebar && tab === 'clawhub') ? renderClawHub() : (
         skillList.length === 0 ? (
-          <div className="text-center py-12">
+          <div className="text-center py-12" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
             <p className="text-[13px] text-text-3/60">No skills yet</p>
             <button
               onClick={() => setSkillSheetOpen(true)}
@@ -263,7 +268,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
           </div>
         ) : (
           <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-            {skillList.map((skill) => {
+            {skillList.map((skill, idx) => {
               const skillScope = skill.scope || 'global'
               const skillAgentIds = skill.agentIds || []
               const scopeLabel = skillScope === 'global' ? 'Global' : `${skillAgentIds.length} agent(s)`
@@ -271,10 +276,23 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
                 ? skillAgentIds.map((id) => agents[id]).filter(Boolean)
                 : []
               return (
-                <button
+                <div
                   key={skill.id}
                   onClick={() => handleEdit(skill.id)}
-                  className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      handleEdit(skill.id)
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
+                  className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer hover:border-white/[0.12] hover:scale-[1.01]"
+                  style={{
+                    fontFamily: 'inherit',
+                    animation: 'spring-in 0.5s var(--ease-spring) both',
+                    animationDelay: `${idx * 0.05}s`
+                  }}
                 >
                   <div className="flex items-center justify-between mb-1">
                     <span className="font-display text-[14px] font-600 text-text truncate">{skill.name}</span>
@@ -282,6 +300,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
                       <span className="text-[10px] font-mono text-text-3/50">{skill.filename}</span>
                       {!inSidebar && (
                         <button
+                          type="button"
                           onClick={(e) => handleDelete(e, skill.id)}
                           className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
                           title="Delete"
@@ -317,7 +336,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
                       )}
                     </div>
                   )}
-                </button>
+                </div>
               )
             })}
           </div>

package/src/components/skills/skill-sheet.tsx

@@ -5,6 +5,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
+import { toast } from 'sonner'
 
 export function SkillSheet() {
   const open = useAppStore((s) => s.skillSheetOpen)
@@ -121,20 +122,32 @@ export function SkillSheet() {
       scope,
       agentIds: scope === 'agent' ? agentIds : [],
     }
-    if (editing) {
-      await api('PUT', `/skills/${editing.id}`, data)
-    } else {
-      await api('POST', '/skills', data)
+    try {
+      if (editing) {
+        await api('PUT', `/skills/${editing.id}`, data)
+        toast.success('Skill updated successfully')
+      } else {
+        await api('POST', '/skills', data)
+        toast.success('Skill created successfully')
+      }
+      await loadSkills()
+      onClose()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save skill')
     }
-    await loadSkills()
-    onClose()
   }
 
   const handleDelete = async () => {
-    if (editing) {
+    if (!editing) return
+    if (!confirm(`Delete skill "${editing.name}"? This will remove it from all assigned agents.`)) return
+    
+    try {
       await api('DELETE', `/skills/${editing.id}`)
+      toast.success('Skill deleted')
       await loadSkills()
       onClose()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to delete skill')
     }
   }
 

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

@@ -1,33 +1,114 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useApprovalStore } from '@/stores/use-approval-store'
 import { api } from '@/lib/api-client'
 import { toast } from 'sonner'
+import { useWs } from '@/hooks/use-ws'
+import { ExecApprovalCard } from '@/components/chat/exec-approval-card'
+import { getApprovalPayload, getApprovalTitle } from '@/lib/approval-display'
+import type { ApprovalRequest } from '@/types'
 
+const CATEGORY_LABELS: Record<string, string> = {
+  tool_access: 'Plugin Access',
+  wallet_transfer: 'Wallet Transfer',
+  plugin_scaffold: 'Plugin Creation',
+  plugin_install: 'Plugin Install',
+  task_tool: 'Task Plugin Call',
+}
+
+const CATEGORY_ICONS: Record<string, string> = {
+  tool_access: '🔑',
+  wallet_transfer: '💰',
+  plugin_scaffold: '🔌',
+  plugin_install: '📦',
+  task_tool: '🤖',
+}
 
 export function ApprovalsPanel() {
   const tasks = useAppStore((s) => s.tasks)
   const agents = useAppStore((s) => s.agents)
+  const serverApprovals = useAppStore((s) => s.approvals)
   const loadTasks = useAppStore((s) => s.loadTasks)
+  const loadServerApprovals = useAppStore((s) => s.loadApprovals)
+
+  const execApprovals = useApprovalStore((s) => s.approvals)
+  const loadExecApprovals = useApprovalStore((s) => s.loadApprovals)
+  const pruneExecApprovals = useApprovalStore((s) => s.pruneExpired)
+
+  const refreshServerApprovals = useCallback(() => {
+    void loadServerApprovals()
+  }, [loadServerApprovals])
+
+  const refreshExecApprovals = useCallback(() => {
+    void loadExecApprovals()
+    pruneExecApprovals()
+  }, [loadExecApprovals, pruneExecApprovals])
+
+  useEffect(() => {
+    refreshServerApprovals()
+    refreshExecApprovals()
+    const interval = setInterval(() => {
+      refreshServerApprovals()
+      refreshExecApprovals()
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [refreshServerApprovals, refreshExecApprovals])
 
-  const pendingApprovals = useMemo(() => {
+  useWs('approvals', refreshServerApprovals, 5000)
+  useWs('openclaw:approvals', refreshExecApprovals, 5000)
+
+  const taskApprovals = useMemo(() => {
     return Object.values(tasks)
       .filter((t) => t.pendingApproval)
-      .sort((a, b) => b.updatedAt - a.updatedAt)
+      .map((t) => ({
+        id: t.id,
+        category: 'task_tool' as const,
+        agentId: t.agentId,
+        sessionId: null,
+        taskId: t.id,
+        title: `Task Plugin Call: ${t.pendingApproval?.toolName || 'unknown'}`,
+        description: t.title,
+        data: t.pendingApproval?.args ?? {},
+        createdAt: t.updatedAt,
+        updatedAt: t.updatedAt,
+        status: 'pending' as const,
+      }))
   }, [tasks])
 
-  const handleDecision = async (taskId: string, approved: boolean) => {
+  const sessionApprovals = useMemo(() => {
+    return Object.values(serverApprovals)
+      .filter((a) => a.status === 'pending')
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+  }, [serverApprovals])
+
+  const workflowApprovals = useMemo(() => {
+    return [...sessionApprovals, ...taskApprovals].sort((a, b) => b.updatedAt - a.updatedAt)
+  }, [sessionApprovals, taskApprovals])
+
+  const sortedExecApprovals = useMemo(() => {
+    return Object.values(execApprovals).sort((a, b) => b.createdAtMs - a.createdAtMs)
+  }, [execApprovals])
+
+  const pendingCount = sortedExecApprovals.length + workflowApprovals.length
+
+  const handleDecision = async (req: ApprovalRequest, approved: boolean) => {
     try {
-      await api('POST', `/tasks/${taskId}/approve`, { approved })
-      toast.success(approved ? 'Tool execution approved' : 'Tool execution rejected')
-      loadTasks()
+      if (req.category === 'task_tool') {
+        await api('POST', `/tasks/${req.id}/approve`, { approved })
+        void loadTasks()
+      } else {
+        await api('POST', '/approvals', { id: req.id, approved })
+        refreshServerApprovals()
+      }
+      toast.success(approved ? 'Action approved' : 'Action rejected')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to submit decision')
     }
   }
 
-  if (pendingApprovals.length === 0) {
+  if (pendingCount === 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">
@@ -37,8 +118,8 @@ export function ApprovalsPanel() {
           </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 className="text-[13px] text-text-3/60 max-w-[320px]">
+          Your swarm is operating autonomously. Actions requiring oversight will appear here.
         </p>
       </div>
     )
@@ -46,74 +127,97 @@ export function ApprovalsPanel() {
 
   return (
     <div className="flex-1 overflow-y-auto px-6 py-8">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-3xl 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>
+            <p className="text-[13px] text-text-3">Execution and plugin governance requests pending review</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
+            {pendingCount} 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>
+        {sortedExecApprovals.length > 0 && (
+          <div className="mb-6">
+            <h2 className="text-[12px] font-700 uppercase tracking-[0.1em] text-amber-400/90 mb-2">Execution Approvals</h2>
+            <div className="grid grid-cols-1 gap-3">
+              {sortedExecApprovals.map((approval) => (
+                <ExecApprovalCard key={approval.id} approval={approval} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {workflowApprovals.length > 0 && (
+          <div>
+            <h2 className="text-[12px] font-700 uppercase tracking-[0.1em] text-amber-400/90 mb-2">Plugin Workflow Approvals</h2>
+            <div className="grid grid-cols-1 gap-4">
+              {workflowApprovals.map((req) => {
+                const agent = req.agentId ? agents[req.agentId] : null
+                const icon = CATEGORY_ICONS[req.category] || '⚠️'
+                const categoryLabel = CATEGORY_LABELS[req.category] || req.category
+                const payload = getApprovalPayload(req)
+                const payloadText = JSON.stringify(payload, null, 2)
+
+                return (
+                  <div key={req.id} className="bg-surface rounded-[16px] border border-white/[0.06] overflow-hidden">
+                    <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]">{icon}</span>
+                        </div>
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <h3 className="text-[13px] font-600 text-text">{getApprovalTitle(req)}</h3>
+                            <span className="px-1.5 py-0.5 rounded-[4px] bg-white/[0.04] text-[9px] font-600 text-text-3/60 uppercase tracking-wider">
+                              {categoryLabel}
+                            </span>
+                          </div>
+                          <p className="text-[11px] text-text-3">
+                            {agent?.name || 'System'}
+                          </p>
+                        </div>
+                      </div>
+                      <span className="text-[10px] text-text-3/50 font-mono">
+                        {new Date(req.updatedAt).toLocaleString()}
+                      </span>
                     </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="p-5">
+                      {req.description && (
+                        <p className="text-[13px] text-text-2/90 mb-4">{req.description}</p>
+                      )}
+
+                      <div className="bg-black/30 rounded-[10px] border border-white/[0.04] p-4 mb-5 overflow-x-auto max-h-[250px] overflow-y-auto">
+                        <pre className="text-[12px] font-mono text-text-2/80 whitespace-pre-wrap break-all leading-relaxed">
+                          {payloadText === '{}' ? 'No structured payload provided.' : payloadText}
+                        </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 className="flex items-center justify-end gap-3 pt-4 border-t border-white/[0.04]">
+                        <button
+                          onClick={() => handleDecision(req, 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 cursor-pointer"
+                          style={{ fontFamily: 'inherit' }}
+                        >
+                          Reject
+                        </button>
+                        <button
+                          onClick={() => handleDecision(req, 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)] cursor-pointer"
+                          style={{ fontFamily: 'inherit' }}
+                        >
+                          Approve
+                        </button>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )