@swarmclawai/swarmclaw 0.7.7 → 0.7.8

package/src/components/projects/project-sheet.tsx

@@ -12,6 +12,25 @@ const PROJECT_COLORS = [
 ]
 
 const inputClass = 'w-full px-3 py-2.5 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40 transition-colors'
+const sectionTitleClass = 'block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2'
+
+function listToText(values?: string[]) {
+  return Array.isArray(values) ? values.join('\n') : ''
+}
+
+function textToList(value: string) {
+  return value
+    .split('\n')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+}
+
+function parseOptionalInteger(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return undefined
+  const parsed = Number.parseInt(trimmed, 10)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
 
 export function ProjectSheet() {
   const open = useAppStore((s) => s.projectSheetOpen)
@@ -24,6 +43,15 @@ export function ProjectSheet() {
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [color, setColor] = useState<string | undefined>(undefined)
+  const [objective, setObjective] = useState('')
+  const [audience, setAudience] = useState('')
+  const [prioritiesText, setPrioritiesText] = useState('')
+  const [openObjectivesText, setOpenObjectivesText] = useState('')
+  const [capabilityHintsText, setCapabilityHintsText] = useState('')
+  const [credentialRequirementsText, setCredentialRequirementsText] = useState('')
+  const [successMetricsText, setSuccessMetricsText] = useState('')
+  const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
+  const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')
 
   const editing = editingId ? projects[editingId] : null
 
@@ -33,10 +61,28 @@ export function ProjectSheet() {
         setName(editing.name)
         setDescription(editing.description)
         setColor(editing.color)
+        setObjective(editing.objective || '')
+        setAudience(editing.audience || '')
+        setPrioritiesText(listToText(editing.priorities))
+        setOpenObjectivesText(listToText(editing.openObjectives))
+        setCapabilityHintsText(listToText(editing.capabilityHints))
+        setCredentialRequirementsText(listToText(editing.credentialRequirements))
+        setSuccessMetricsText(listToText(editing.successMetrics))
+        setHeartbeatPrompt(editing.heartbeatPrompt || '')
+        setHeartbeatIntervalSec(editing.heartbeatIntervalSec ? String(editing.heartbeatIntervalSec) : '')
       } else {
         setName('')
         setDescription('')
         setColor(PROJECT_COLORS[0])
+        setObjective('')
+        setAudience('')
+        setPrioritiesText('')
+        setOpenObjectivesText('')
+        setCapabilityHintsText('')
+        setCredentialRequirementsText('')
+        setSuccessMetricsText('')
+        setHeartbeatPrompt('')
+        setHeartbeatIntervalSec('')
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -52,6 +98,15 @@ export function ProjectSheet() {
       name: name.trim() || 'Unnamed Project',
       description,
       color,
+      objective: objective.trim() || undefined,
+      audience: audience.trim() || undefined,
+      priorities: textToList(prioritiesText),
+      openObjectives: textToList(openObjectivesText),
+      capabilityHints: textToList(capabilityHintsText),
+      credentialRequirements: textToList(credentialRequirementsText),
+      successMetrics: textToList(successMetricsText),
+      heartbeatPrompt: heartbeatPrompt.trim() || undefined,
+      heartbeatIntervalSec: parseOptionalInteger(heartbeatIntervalSec),
     }
     if (editing) {
       await updateProject(editing.id, data)
@@ -72,10 +127,10 @@ export function ProjectSheet() {
   }
 
   return (
-    <BottomSheet open={open} onClose={onClose}>
+    <BottomSheet open={open} onClose={onClose} wide>
       <h2 className="font-display text-[18px] font-700 text-text mb-6">{editing ? 'Edit Project' : 'New Project'}</h2>
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Name</label>
+        <label className={sectionTitleClass}>Name</label>
         <input
           type="text"
           value={name}
@@ -88,7 +143,7 @@ export function ProjectSheet() {
       </div>
 
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Description</label>
+        <label className={sectionTitleClass}>Description</label>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
@@ -99,8 +154,125 @@ export function ProjectSheet() {
         />
       </div>
 
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Objective</label>
+          <textarea
+            value={objective}
+            onChange={(e) => setObjective(e.target.value)}
+            placeholder="What durable outcome is this project driving?"
+            className={inputClass + ' min-h-[88px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={4}
+          />
+        </div>
+        <div>
+          <label className={sectionTitleClass}>Audience</label>
+          <textarea
+            value={audience}
+            onChange={(e) => setAudience(e.target.value)}
+            placeholder="Who is this project for?"
+            className={inputClass + ' min-h-[88px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={4}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Pilot Priorities</label>
+          <textarea
+            value={prioritiesText}
+            onChange={(e) => setPrioritiesText(e.target.value)}
+            placeholder={'One per line\nResearch the market\nBuild the pilot'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+          <p className="mt-2 text-[11px] text-text-3/45">One priority per line.</p>
+        </div>
+        <div>
+          <label className={sectionTitleClass}>Open Objectives</label>
+          <textarea
+            value={openObjectivesText}
+            onChange={(e) => setOpenObjectivesText(e.target.value)}
+            placeholder={'One per line\nDraft the research brief\nPrepare the rollout checklist'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+          <p className="mt-2 text-[11px] text-text-3/45">Use this for durable next outcomes, not one-off chat prompts.</p>
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Capability Hints</label>
+          <textarea
+            value={capabilityHintsText}
+            onChange={(e) => setCapabilityHintsText(e.target.value)}
+            placeholder={'One per line\nResearch\nWeb browsing\nInbox automation'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+        </div>
+        <div>
+          <label className={sectionTitleClass}>Credential Requirements</label>
+          <textarea
+            value={credentialRequirementsText}
+            onChange={(e) => setCredentialRequirementsText(e.target.value)}
+            placeholder={'One per line\nGmail app password\nCRM API token'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Success Metrics</label>
+          <textarea
+            value={successMetricsText}
+            onChange={(e) => setSuccessMetricsText(e.target.value)}
+            placeholder={'One per line\nReduce response time below 10 minutes\nIncrease qualified replies'}
+            className={inputClass + ' min-h-[96px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={4}
+          />
+        </div>
+        <div className="grid gap-4">
+          <div>
+            <label className={sectionTitleClass}>Heartbeat Prompt</label>
+            <textarea
+              value={heartbeatPrompt}
+              onChange={(e) => setHeartbeatPrompt(e.target.value)}
+              placeholder="What should the project heartbeat ask the agent to review?"
+              className={inputClass + ' min-h-[72px] resize-y'}
+              style={{ fontFamily: 'inherit' }}
+              rows={3}
+            />
+          </div>
+          <div>
+            <label className={sectionTitleClass}>Heartbeat Interval (seconds)</label>
+            <input
+              type="number"
+              min={0}
+              step={60}
+              value={heartbeatIntervalSec}
+              onChange={(e) => setHeartbeatIntervalSec(e.target.value)}
+              placeholder="1800"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+      </div>
+
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Color</label>
+        <label className={sectionTitleClass}>Color</label>
         <div className="flex items-center gap-2">
           {PROJECT_COLORS.map((c) => (
             <button

package/src/components/shared/settings/section-capability-policy.tsx

@@ -46,6 +46,44 @@ export function CapabilityPolicySection({ appSettings, patchSettings, inputClass
         </div>
 
         <div className="grid grid-cols-1 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <div className="text-[12px] font-600 text-text-2">Task Management</div>
+                  <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                    Controls the task board and agent access to durable backlog tracking. Internal queue execution still works underneath.
+                  </p>
+                </div>
+                <button
+                  onClick={() => patchSettings({ taskManagementEnabled: !(appSettings.taskManagementEnabled ?? true) })}
+                  className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.taskManagementEnabled ?? true) ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                  aria-label="Toggle task management"
+                >
+                  <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${(appSettings.taskManagementEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+                </button>
+              </div>
+            </div>
+
+            <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <div className="text-[12px] font-600 text-text-2">Project Management</div>
+                  <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                    Controls the project operating-system UI and agent access to durable project context for objectives, credentials, and heartbeat plans.
+                  </p>
+                </div>
+                <button
+                  onClick={() => patchSettings({ projectManagementEnabled: !(appSettings.projectManagementEnabled ?? true) })}
+                  className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${(appSettings.projectManagementEnabled ?? true) ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                  aria-label="Toggle project management"
+                >
+                  <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${(appSettings.projectManagementEnabled ?? true) ? 'translate-x-[18px]' : ''}`} />
+                </button>
+              </div>
+            </div>
+          </div>
+
           <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
             <div className="flex items-center justify-between gap-4">
               <div>

package/src/components/shared/settings/section-voice.tsx

@@ -5,6 +5,8 @@ import type { SettingsSectionProps } from './types'
 export function VoiceSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const enabled = appSettings.elevenLabsEnabled ?? false
   const hasApiKey = appSettings.elevenLabsApiKeyConfigured === true
+  const defaultVoiceId = typeof appSettings.elevenLabsVoiceId === 'string' ? appSettings.elevenLabsVoiceId.trim() : ''
+  const showVoiceConfig = enabled || hasApiKey || Boolean(defaultVoiceId)
 
   return (
     <div className="mb-10">
@@ -12,7 +14,7 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
         Voice
       </h3>
       <p className="text-[12px] text-text-3 mb-5">
-        Configure voice playback (TTS) and speech-to-text input.
+        Configure voice playback (TTS), the default ElevenLabs voice, and speech-to-text input.
       </p>
       <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
         {/* ElevenLabs toggle */}
@@ -30,7 +32,7 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
           </button>
         </div>
 
-        {enabled && (
+        {showVoiceConfig && (
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
             <div>
               <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">API Key</label>
@@ -56,11 +58,17 @@ export function VoiceSection({ appSettings, patchSettings, inputClass }: Setting
                 className={inputClass}
                 style={{ fontFamily: 'inherit' }}
               />
-              <p className="text-[11px] text-text-3/60 mt-1.5">Fallback voice when an agent has no override set.</p>
+              <p className="text-[11px] text-text-3/60 mt-1.5">Fallback voice when an agent has no override set. Agents can override this in their own create/edit sheet.</p>
             </div>
           </div>
         )}
 
+        {showVoiceConfig && !enabled && (
+          <p className="mb-5 rounded-[12px] border border-white/[0.06] bg-white/[0.03] px-3 py-2.5 text-[11px] text-text-3/70">
+            ElevenLabs credentials and default voice can be prepared here even while playback is turned off.
+          </p>
+        )}
+
         <div>
           <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Speech Recognition Language</label>
           <input

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

@@ -8,7 +8,7 @@ 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'
+import type { AppSettings, ApprovalCategory, ApprovalRequest } from '@/types'
 
 const CATEGORY_LABELS: Record<string, string> = {
   tool_access: 'Plugin Access',
@@ -28,6 +28,15 @@ const CATEGORY_ICONS: Record<string, string> = {
 
 type ApprovalScope = 'all' | 'execution' | 'workflow' | 'task'
 
+const AUTO_APPROVE_OPTIONS: Array<{ id: ApprovalCategory; label: string; description: string }> = [
+  { id: 'tool_access', label: 'Plugin Access', description: 'Auto-enable requested plugins for a chat.' },
+  { id: 'plugin_scaffold', label: 'Plugin Scaffold', description: 'Auto-create plugin files requested by agents.' },
+  { id: 'plugin_install', label: 'Plugin Install', description: 'Auto-install plugins from approved URLs.' },
+  { id: 'human_loop', label: 'Human Approval Requests', description: 'Auto-approve ask-human approval prompts.' },
+  { id: 'wallet_transfer', label: 'Wallet Transfers', description: 'Auto-approve wallet send requests. High risk.' },
+  { id: 'task_tool', label: 'Task Tool Calls', description: 'Auto-approve task-level tool approvals.' },
+]
+
 function relativeTime(ts: number): string {
   const diff = Date.now() - ts
   if (diff < 60_000) return 'just now'
@@ -39,9 +48,11 @@ function relativeTime(ts: number): string {
 export function ApprovalsPanel() {
   const tasks = useAppStore((s) => s.tasks)
   const agents = useAppStore((s) => s.agents)
+  const appSettings = useAppStore((s) => s.appSettings)
   const serverApprovals = useAppStore((s) => s.approvals)
   const loadTasks = useAppStore((s) => s.loadTasks)
   const loadServerApprovals = useAppStore((s) => s.loadApprovals)
+  const loadAppSettings = useAppStore((s) => s.loadSettings)
 
   const execApprovals = useApprovalStore((s) => s.approvals)
   const loadExecApprovals = useApprovalStore((s) => s.loadApprovals)
@@ -73,12 +84,17 @@ export function ApprovalsPanel() {
   const [scope, setScope] = useState<ApprovalScope>('all')
   const [categoryFilter, setCategoryFilter] = useState('all')
   const [now, setNow] = useState(() => Date.now())
+  const [savingSetting, setSavingSetting] = useState<string | null>(null)
 
   useEffect(() => {
     const intervalId = window.setInterval(() => setNow(Date.now()), 60_000)
     return () => window.clearInterval(intervalId)
   }, [])
 
+  useEffect(() => {
+    void loadAppSettings()
+  }, [loadAppSettings])
+
   const taskApprovals = useMemo(() => {
     return Object.values(tasks)
       .filter((t) => t.pendingApproval)
@@ -180,6 +196,23 @@ export function ApprovalsPanel() {
     },
   ]
 
+  const autoApproved = useMemo(() => new Set(appSettings.approvalAutoApproveCategories || []), [appSettings.approvalAutoApproveCategories])
+  const approvalsEnabled = appSettings.approvalsEnabled ?? true
+  const outboundApprovalEnabled = appSettings.safetyRequireApprovalForOutbound ?? false
+
+  const saveApprovalSettings = async (patch: Partial<AppSettings>, successMessage: string, key: string) => {
+    try {
+      setSavingSetting(key)
+      const settings = await api<AppSettings>('PUT', '/settings', patch)
+      useAppStore.setState({ appSettings: settings })
+      toast.success(successMessage)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to update approval settings')
+    } finally {
+      setSavingSetting((current) => (current === key ? null : current))
+    }
+  }
+
   const handleDecision = async (req: ApprovalRequest, approved: boolean) => {
     try {
       if (req.category === 'task_tool') {
@@ -195,23 +228,6 @@ export function ApprovalsPanel() {
     }
   }
 
-  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">
-          <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-[320px]">
-          Your swarm is operating autonomously. Actions requiring oversight will appear here.
-        </p>
-      </div>
-    )
-  }
-
   return (
     <div className="flex-1 overflow-y-auto px-6 py-8">
       <div className="max-w-3xl mx-auto">
@@ -237,6 +253,132 @@ export function ApprovalsPanel() {
           ))}
         </div>
 
+        <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] p-4 mb-6">
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3">
+              <div>
+                <h2 className="text-[13px] font-700 text-text">Approval Controls</h2>
+                <p className="text-[12px] text-text-3/70 mt-1 max-w-[640px]">
+                  Control whether actions queue for review, which approval types auto-run, and whether outbound connector sends need explicit confirmation.
+                </p>
+              </div>
+              <div className={`px-3 py-1.5 rounded-full text-[11px] font-700 ${
+                approvalsEnabled
+                  ? 'bg-amber-500/10 border border-amber-500/20 text-amber-300'
+                  : 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-300'
+              }`}>
+                {approvalsEnabled ? 'Manual approvals enabled' : 'Approvals disabled'}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="rounded-[12px] border border-white/[0.06] bg-black/20 px-4 py-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div>
+                    <div className="text-[12px] font-600 text-text-2">Platform Approvals</div>
+                    <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                      Turn this off to auto-approve workflow approvals across the app. Audit records are still kept.
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={savingSetting === 'approvalsEnabled'}
+                    onClick={() => {
+                      const next = !approvalsEnabled
+                      void saveApprovalSettings(
+                        { approvalsEnabled: next },
+                        next ? 'Platform approvals enabled' : 'Platform approvals disabled',
+                        'approvalsEnabled',
+                      )
+                    }}
+                    className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer disabled:opacity-50 ${approvalsEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                    aria-label="Toggle platform approvals"
+                  >
+                    <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${approvalsEnabled ? 'translate-x-[18px]' : ''}`} />
+                  </button>
+                </div>
+              </div>
+
+              <div className="rounded-[12px] border border-white/[0.06] bg-black/20 px-4 py-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div>
+                    <div className="text-[12px] font-600 text-text-2">Outbound Send Approvals</div>
+                    <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">
+                      Require explicit approval before agents send messages or media over connectors.
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={savingSetting === 'safetyRequireApprovalForOutbound'}
+                    onClick={() => {
+                      const next = !outboundApprovalEnabled
+                      void saveApprovalSettings(
+                        { safetyRequireApprovalForOutbound: next },
+                        next ? 'Outbound send approvals enabled' : 'Outbound send approvals disabled',
+                        'safetyRequireApprovalForOutbound',
+                      )
+                    }}
+                    className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer disabled:opacity-50 ${outboundApprovalEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+                    aria-label="Toggle outbound send approvals"
+                  >
+                    <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${outboundApprovalEnabled ? 'translate-x-[18px]' : ''}`} />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between gap-3 mb-2">
+                <div className="text-[12px] font-600 text-text-2">Auto-Approve Categories</div>
+                <div className="text-[11px] text-text-3/60">
+                  {autoApproved.size} enabled
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {AUTO_APPROVE_OPTIONS.map((option) => {
+                  const checked = autoApproved.has(option.id)
+                  return (
+                    <label
+                      key={option.id}
+                      className={`rounded-[12px] border px-3 py-3 cursor-pointer transition-all ${
+                        checked
+                          ? 'border-accent-bright/30 bg-accent-soft/60'
+                          : 'border-white/[0.06] bg-black/20 hover:bg-white/[0.04]'
+                      }`}
+                    >
+                      <div className="flex items-start gap-3">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          disabled={savingSetting === `auto:${option.id}`}
+                          onChange={(e) => {
+                            const next = new Set(appSettings.approvalAutoApproveCategories || [])
+                            if (e.target.checked) next.add(option.id)
+                            else next.delete(option.id)
+                            void saveApprovalSettings(
+                              { approvalAutoApproveCategories: [...next] },
+                              checked ? `${option.label} now requires approval` : `${option.label} will auto-approve`,
+                              `auto:${option.id}`,
+                            )
+                          }}
+                          className="mt-0.5"
+                        />
+                        <div>
+                          <div className="text-[12px] font-600 text-text-2">{option.label}</div>
+                          <p className="text-[11px] text-text-3/60 mt-1 leading-relaxed">{option.description}</p>
+                        </div>
+                      </div>
+                    </label>
+                  )
+                })}
+              </div>
+              <p className="text-[11px] text-text-3/60 mt-2">
+                Use category auto-approval when you still want the approval system on, but you do not want these request types to pause execution.
+              </p>
+            </div>
+          </div>
+        </div>
+
         <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] p-4 mb-6">
           <div className="flex flex-col lg:flex-row gap-3 lg:items-center lg:justify-between">
             <div className="flex flex-wrap gap-2">
@@ -411,6 +553,23 @@ export function ApprovalsPanel() {
             <p className="text-[12px] text-text-3/60">Try clearing the search or switching the queue scope.</p>
           </div>
         )}
+
+        {pendingCount === 0 && (
+          <div className="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-[360px]">
+              {approvalsEnabled
+                ? 'Your swarm is operating autonomously. Actions requiring oversight will appear here.'
+                : 'Approvals are currently disabled, so eligible requests will auto-run instead of queuing here.'}
+            </p>
+          </div>
+        )}
       </div>
     </div>
   )