@swarmclawai/swarmclaw 0.6.7 → 0.6.8

package/src/components/agents/agent-sheet.tsx

@@ -16,6 +16,7 @@ import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { randomSoul } from '@/lib/soul-suggestions'
 import { SectionLabel } from '@/components/shared/section-label'
 import { SoulLibraryPicker } from './soul-library-picker'
+import { HintTip } from '@/components/shared/hint-tip'
 
 const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
 
@@ -109,6 +110,7 @@ export function AgentSheet() {
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
   const [uploading, setUploading] = useState(false)
   const [thinkingLevel, setThinkingLevel] = useState<'' | 'minimal' | 'low' | 'medium' | 'high'>('')
+  const [autoRecovery, setAutoRecovery] = useState(false)
   const [voiceId, setVoiceId] = useState('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
@@ -193,6 +195,7 @@ export function AgentSheet() {
         setAvatarSeed(editing.avatarSeed || crypto.randomUUID().slice(0, 8))
         setAvatarUrl(editing.avatarUrl || null)
         setThinkingLevel(editing.thinkingLevel || '')
+        setAutoRecovery(editing.autoRecovery || false)
         setVoiceId(editing.elevenLabsVoiceId || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
@@ -235,6 +238,7 @@ export function AgentSheet() {
         setProjectId(undefined)
         setAvatarSeed('')
         setThinkingLevel('')
+        setAutoRecovery(false)
         setVoiceId('')
         setHeartbeatEnabled(false)
         setHeartbeatIntervalSec('')
@@ -334,6 +338,7 @@ export function AgentSheet() {
       avatarSeed: avatarSeed.trim() || undefined,
       avatarUrl: avatarUrl || null,
       thinkingLevel: thinkingLevel || undefined,
+      autoRecovery,
       elevenLabsVoiceId: voiceId.trim() || null,
       heartbeatEnabled,
       heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
@@ -653,8 +658,9 @@ export function AgentSheet() {
 
       {/* Thinking Level */}
       <div className="mb-8">
-        <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">
           Thinking Level <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+          <HintTip text="Higher levels produce more thoughtful responses but cost more tokens" />
         </label>
         <select
           value={thinkingLevel}
@@ -671,6 +677,20 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Controls reasoning depth. Anthropic models use extended thinking; OpenAI o-series uses reasoning_effort. Others get system prompt guidance.</p>
       </div>
 
+      {/* Auto-Recovery */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-1.5">
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Guardian Auto-Recovery <HintTip text="Automatically resets the agent's workspace if it gets into a broken state" /></label>
+          <div
+            onClick={() => setAutoRecovery(!autoRecovery)}
+            className={`w-9 h-5 rounded-full transition-all relative cursor-pointer ${autoRecovery ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+          >
+            <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all ${autoRecovery ? 'left-[18px]' : 'left-0.5'}`} />
+          </div>
+        </div>
+        <p className="text-[11px] text-text-3/70">If this agent critically fails a task that modifies the workspace, SwarmClaw Guardian will automatically perform a <code className="text-[10px] bg-white/[0.05] px-1 rounded">git reset --hard</code> to restore the last known good state.</p>
+      </div>
+
       {/* ElevenLabs Voice ID */}
       {appSettings.elevenLabsEnabled && (
         <div className="mb-8">
@@ -692,7 +712,7 @@ export function AgentSheet() {
       {/* Heartbeat Configuration */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Heartbeat</label>
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Heartbeat <HintTip text="Periodically runs a background prompt to keep the agent active and aware" /></label>
           <button
             type="button"
             onClick={() => setHeartbeatEnabled(!heartbeatEnabled)}
@@ -704,7 +724,7 @@ export function AgentSheet() {
         {heartbeatEnabled && (
           <div className="space-y-4 mt-3">
             <div>
-              <label className="block text-[12px] text-text-3/70 mb-1.5">Interval</label>
+              <label className="flex items-center gap-1.5 text-[12px] text-text-3/70 mb-1.5">Interval <HintTip text="Minutes between each heartbeat check" /></label>
               <select
                 value={heartbeatIntervalSec}
                 onChange={(e) => setHeartbeatIntervalSec(e.target.value)}
@@ -746,7 +766,7 @@ export function AgentSheet() {
       {/* Monthly Budget */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Monthly Budget</label>
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Monthly Budget <HintTip text="Set a spending limit for this agent's API usage" /></label>
           <button
             type="button"
             onClick={() => setBudgetEnabled(!budgetEnabled)}
@@ -774,7 +794,7 @@ export function AgentSheet() {
               </div>
             </div>
             <div>
-              <label className="block text-[12px] text-text-3/70 mb-1.5">When exceeded</label>
+              <label className="flex items-center gap-1.5 text-[12px] text-text-3/70 mb-1.5">When exceeded <HintTip text="Warn shows an alert but keeps running; Block stops the agent from making API calls" /></label>
               <div className="flex gap-2">
                 <button
                   type="button"
@@ -835,6 +855,7 @@ export function AgentSheet() {
         <div className="mb-8">
           <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
             Soul / Personality <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+            <HintTip text="The agent's voice and tone — how it talks, not what it knows" />
             {soul !== soulInitial && soulSaveState === 'idle' && (
               <span className="inline-flex items-center gap-1 normal-case tracking-normal text-[10px] text-amber-400 font-600">
                 <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
@@ -889,7 +910,7 @@ export function AgentSheet() {
       {provider !== 'openclaw' && (
         <div className="mb-8">
           <div className="flex items-center gap-2 mb-3">
-            <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">System Prompt</label>
+            <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">System Prompt <HintTip text="Instructions that tell the agent what it can do, what tools to use, and how to behave" /></label>
             <button onClick={() => promptFileRef.current?.click()} className="shrink-0 px-2 py-1 rounded-[8px] border border-white/[0.08] bg-surface text-[11px] text-text-3 hover:text-text-2 cursor-pointer transition-colors" style={{ fontFamily: 'inherit' }}>Upload .md</button>
             <input ref={promptFileRef} type="file" accept=".md,.txt,.markdown" onChange={handleFileUpload(setSystemPrompt)} className="hidden" />
           </div>

package/src/components/agents/soul-library-picker.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { SOUL_LIBRARY, SOUL_ARCHETYPES, searchSouls, type SoulTemplate } from '@/lib/soul-library'
+import { api } from '@/lib/api-client'
 
 interface SoulLibraryPickerProps {
   open: boolean
@@ -13,8 +14,48 @@ interface SoulLibraryPickerProps {
 export function SoulLibraryPicker({ open, onClose, onSelect }: SoulLibraryPickerProps) {
   const [query, setQuery] = useState('')
   const [archetype, setArchetype] = useState('All')
+  const [source, setSource] = useState<'library' | 'forge'>('library')
+  const [customSouls, setCustomSouls] = useState<SoulTemplate[]>([])
+  const [loading, setLoading] = useState(false)
 
-  const results = useMemo(() => searchSouls(query, archetype), [query, archetype])
+  const results = useMemo(() => {
+    if (source === 'library') {
+      return searchSouls(query, archetype)
+    } else {
+      let filtered = customSouls
+      if (archetype && archetype !== 'All') {
+        filtered = filtered.filter(s => s.archetype === archetype)
+      }
+      if (query) {
+        const q = query.toLowerCase()
+        filtered = filtered.filter(s => 
+          s.name.toLowerCase().includes(q) || 
+          s.soul.toLowerCase().includes(q) ||
+          s.tags.some(t => t.toLowerCase().includes(q))
+        )
+      }
+      return filtered
+    }
+  }, [query, archetype, source, customSouls])
+
+  useEffect(() => {
+    if (open && source === 'forge') {
+      const load = async () => {
+        setLoading(true)
+        try {
+          const res = await api<SoulTemplate[]>('GET', '/souls')
+          // Filter out the built-in ones from the API result since we show them in 'library' tab
+          const libraryIds = new Set(SOUL_LIBRARY.map(s => s.id))
+          setCustomSouls(res.filter(s => !libraryIds.has(s.id)))
+        } catch (err) {
+          console.error('Failed to load custom souls', err)
+        } finally {
+          setLoading(false)
+        }
+      }
+      load()
+    }
+  }, [open, source])
 
   const handleSelect = (template: SoulTemplate) => {
     onSelect(template.soul)
@@ -23,9 +64,25 @@ export function SoulLibraryPicker({ open, onClose, onSelect }: SoulLibraryPicker
 
   return (
     <BottomSheet open={open} onClose={onClose}>
-      <div className="mb-6">
-        <h2 className="font-display text-[24px] font-700 tracking-[-0.03em] mb-1">Soul Library</h2>
-        <p className="text-[13px] text-text-3">Browse personality templates for your agent</p>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h2 className="font-display text-[24px] font-700 tracking-[-0.03em] mb-1">Soul Library</h2>
+          <p className="text-[13px] text-text-3">Browse personality templates for your agent</p>
+        </div>
+        <div className="flex bg-white/[0.04] p-1 rounded-[12px] border border-white/[0.04]">
+           <button 
+             onClick={() => setSource('library')}
+             className={`px-3 py-1.5 rounded-[10px] text-[12px] font-600 transition-all ${source === 'library' ? 'bg-white/[0.08] text-text shadow-sm' : 'text-text-3 hover:text-text-2'}`}
+           >
+             Verified
+           </button>
+           <button 
+             onClick={() => setSource('forge')}
+             className={`px-3 py-1.5 rounded-[10px] text-[12px] font-600 transition-all ${source === 'forge' ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:text-text-2'}`}
+           >
+             SwarmForge
+           </button>
+        </div>
       </div>
 
       {/* Search */}
@@ -34,7 +91,7 @@ export function SoulLibraryPicker({ open, onClose, onSelect }: SoulLibraryPicker
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          placeholder="Search personalities..."
+          placeholder={source === 'library' ? "Search verified personalities..." : "Search SwarmForge / Custom..."}
           className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none focus-glow"
           style={{ fontFamily: 'inherit' }}
         />
@@ -59,31 +116,45 @@ export function SoulLibraryPicker({ open, onClose, onSelect }: SoulLibraryPicker
 
       {/* Results grid */}
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[60vh] overflow-y-auto pb-4">
-        {results.map((template) => (
+        {loading ? (
+          <div className="col-span-2 py-12 flex flex-col items-center gap-3">
+             <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-accent-bright" />
+             <p className="text-[13px] text-text-3">Stoking the forge...</p>
+          </div>
+        ) : results.map((template) => (
           <button
             key={template.id}
             onClick={() => handleSelect(template)}
-            className="text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 hover:border-accent-bright/20 transition-all cursor-pointer group"
+            className={`text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer group 
+              ${source === 'forge' ? 'hover:border-accent-bright/20' : 'hover:border-white/[0.12]'}`}
             style={{ fontFamily: 'inherit' }}
           >
             <div className="flex items-start gap-2 mb-2">
-              <h4 className="text-[14px] font-600 text-text group-hover:text-accent-bright transition-colors">
+              <h4 className={`text-[14px] font-600 text-text transition-colors ${source === 'forge' ? 'group-hover:text-accent-bright' : ''}`}>
                 {template.name}
               </h4>
               <span className="px-1.5 py-0.5 rounded-[5px] bg-white/[0.06] text-text-3 text-[10px] font-600 shrink-0">
                 {template.archetype}
               </span>
             </div>
-            <p className="text-[12px] text-text-3 mb-2">{template.description}</p>
+            <p className="text-[12px] text-text-3 mb-2 line-clamp-2">{template.description}</p>
             <p className="text-[11px] text-text-3/60 line-clamp-2 italic">{template.soul}</p>
           </button>
         ))}
-        {results.length === 0 && (
-          <p className="text-[13px] text-text-3 col-span-2 text-center py-8">No personalities match your search</p>
+        {!loading && results.length === 0 && (
+          <div className="col-span-2 text-center py-12">
+             <div className="w-12 h-12 rounded-full bg-white/[0.03] flex items-center justify-center mx-auto mb-3">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/40"><path d="M12 2a4 4 0 0 1 4 4v2a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Z"/><path d="M16 14H8a4 4 0 0 0-4 4v2h16v-2a4 4 0 0 0-4-4Z"/></svg>
+             </div>
+             <p className="text-[14px] font-600 text-text-2">No personalities match</p>
+             <p className="text-[12px] text-text-3/50 mt-1">{source === 'forge' ? 'Be the first to forge a custom soul in this category!' : 'Try a different search term.'}</p>
+          </div>
         )}
       </div>
 
-      <p className="text-[11px] text-text-3/50 mt-4 text-center">{SOUL_LIBRARY.length} personalities available</p>
+      <p className="text-[11px] text-text-3/50 mt-4 text-center">
+        {source === 'library' ? `${SOUL_LIBRARY.length} verified templates` : `${customSouls.length} custom souls in your forge`}
+      </p>
     </BottomSheet>
   )
 }

package/src/components/chat/activity-moment.tsx

@@ -7,6 +7,7 @@ const NOTABLE_TOOLS: Record<string, { label: string; color: string; icon: 'brain
   memory_tool: { label: 'Committed to memory', color: '#A855F7', icon: 'brain' },
   manage_tasks: { label: 'Created a task', color: '#EC4899', icon: 'clipboard' },
   manage_schedules: { label: 'Scheduled something', color: '#EC4899', icon: 'clipboard' },
+  schedule_wake: { label: 'Set a reminder', color: '#F59E0B', icon: 'clipboard' },
   manage_agents: { label: 'Created an agent', color: '#EC4899', icon: 'clipboard' },
   delegate_to_claude_code: { label: 'Delegated to Claude Code', color: '#38BDF8', icon: 'delegate' },
   delegate_to_codex_cli: { label: 'Delegated to Codex', color: '#38BDF8', icon: 'delegate' },
@@ -24,6 +25,7 @@ function extractSnippet(toolName: string, toolInput: string): string | null {
     if ((toolName === 'memory' || toolName === 'memory_tool') && parsed.key) return parsed.key
     if (toolName === 'manage_tasks' && parsed.title) return parsed.title
     if (toolName === 'manage_schedules' && parsed.name) return parsed.name
+    if (toolName === 'schedule_wake' && parsed.message) return parsed.message
     if (toolName === 'manage_agents' && parsed.name) return parsed.name
     if (toolName === 'delegate_to_agent' && (parsed.agentName || parsed.agentId)) return parsed.agentName || parsed.agentId
     if (toolName === 'check_delegation_status' && parsed.agentName) return parsed.agentName

package/src/components/chat/checkpoint-timeline.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import { toast } from 'sonner'
+
+interface Checkpoint {
+  checkpointId: string
+  parentCheckpointId?: string
+  metadata: Record<string, unknown>
+  createdAt: number
+  values?: Record<string, unknown>
+}
+
+interface Props {
+  sessionId: string
+}
+
+export function CheckpointTimeline({ sessionId }: Props) {
+  const [checkpoints, setCheckpoints] = useState<Checkpoint[]>([])
+  const [loading, setLoading] = useState(true)
+  const [restoringId, setRestoringId] = useState<string | null>(null)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const data = await api<Checkpoint[]>('GET', `/sessions/${sessionId}/checkpoints`)
+      setCheckpoints(data)
+    } catch (err) {
+      console.error('Failed to load checkpoints', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const handleRestore = async (checkpoint: Checkpoint) => {
+    if (!confirm('Restore session to this point? This will delete all subsequent history.')) return
+    
+    setRestoringId(checkpoint.checkpointId)
+    try {
+      await api('POST', `/sessions/${sessionId}/restore`, {
+        checkpointId: checkpoint.checkpointId,
+        timestamp: checkpoint.createdAt
+      })
+      toast.success('Session restored successfully')
+      await loadSessions()
+      await load()
+    } catch (err) {
+      toast.error('Failed to restore session')
+      console.error(err)
+    } finally {
+      setRestoringId(null)
+    }
+  }
+
+  if (loading) {
+    return <div className="p-8 text-center text-text-3 text-[13px]">Retrieving history...</div>
+  }
+
+  if (checkpoints.length === 0) {
+    return (
+      <div className="p-8 text-center">
+        <p className="text-text-3 text-[13px]">No checkpoints found for this session.</p>
+        <p className="text-[11px] text-text-3/50 mt-1">Only LangGraph-orchestrated sessions support time travel.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 p-5">
+      {checkpoints.map((cp, i) => (
+        <div 
+          key={cp.checkpointId}
+          className="group relative flex flex-col gap-2 p-3 rounded-[12px] border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] transition-all"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <span className="text-[11px] font-700 text-accent-bright uppercase tracking-wider">
+                {i === 0 ? 'Current State' : `Point ${checkpoints.length - i}`}
+              </span>
+              <span className="text-[10px] text-text-3 font-mono">
+                {new Date(cp.createdAt).toLocaleString()}
+              </span>
+            </div>
+            {i > 0 && (
+              <button
+                onClick={() => handleRestore(cp)}
+                disabled={!!restoringId}
+                className="px-3 py-1 rounded-[6px] bg-accent-soft text-accent-bright text-[11px] font-600 border-none cursor-pointer hover:brightness-110 disabled:opacity-50"
+              >
+                {restoringId === cp.checkpointId ? 'Restoring...' : 'Restore here'}
+              </button>
+            )}
+          </div>
+          
+          {cp.values && Array.isArray(cp.values.messages) && cp.values.messages.length > 0 && (
+            <div className="mt-1 p-2 rounded-[8px] bg-black/20 text-[11px] text-text-3 line-clamp-2 italic">
+              Last message: {String((cp.values.messages[cp.values.messages.length - 1] as Record<string, unknown>)?.content ?? 'Empty state')}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/chat/message-list.tsx

@@ -11,6 +11,7 @@ import { StreamingBubble } from './streaming-bubble'
 import { ThinkingIndicator } from './thinking-indicator'
 import { SuggestionsBar } from './suggestions-bar'
 import { ExecApprovalCard } from './exec-approval-card'
+import { TaskApprovalCard } from './task-approval-card'
 import { HeartbeatMoment, ActivityMoment, isNotableTool } from './activity-moment'
 import { useApprovalStore } from '@/stores/use-approval-store'
 import { useWs } from '@/hooks/use-ws'
@@ -573,13 +574,28 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
 
 function ApprovalCards({ agentId }: { agentId?: string | null }) {
   const approvals = useApprovalStore((s) => s.approvals)
+  const tasks = useAppStore((s) => s.tasks)
+  const sessionId = useAppStore((s) => s.currentSessionId)
+
   const cards = Object.values(approvals).filter((a) => !agentId || a.agentId === agentId)
-  if (!cards.length) return null
+  
+  // Find tasks associated with this session that need approval
+  const pendingTasks = Object.values(tasks).filter((t) => {
+    if (!t.pendingApproval) return false
+    // Show if matches the current session OR the current agent
+    return t.sessionId === sessionId || (agentId && t.agentId === agentId)
+  })
+
+  if (!cards.length && !pendingTasks.length) return null
+
   return (
-    <>
+    <div className="flex flex-col gap-2">
       {cards.map((a) => (
         <ExecApprovalCard key={a.id} approval={a} />
       ))}
-    </>
+      {pendingTasks.map((t) => (
+        <TaskApprovalCard key={t.id} task={t} />
+      ))}
+    </div>
   )
 }