@swarmclawai/swarmclaw 0.6.7 → 0.7.0

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

@@ -14,8 +14,10 @@ import { NATIVE_CAPABILITY_PROVIDER_IDS, NON_LANGGRAPH_PROVIDER_IDS } from '@/li
 import { AgentAvatar } from './agent-avatar'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { randomSoul } from '@/lib/soul-suggestions'
+import { copyTextToClipboard } from '@/lib/clipboard'
 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,12 +111,15 @@ 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)
   const [heartbeatModel, setHeartbeatModel] = useState('')
   const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
   const [budgetEnabled, setBudgetEnabled] = useState(false)
+  const [hourlyBudget, setHourlyBudget] = useState('')
+  const [dailyBudget, setDailyBudget] = useState('')
   const [monthlyBudget, setMonthlyBudget] = useState('')
   const [budgetAction, setBudgetAction] = useState<'warn' | 'block'>('warn')
   const [agentWallet, setAgentWallet] = useState<(Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }) | null>(null)
@@ -193,12 +198,19 @@ 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))
         setHeartbeatModel(editing.heartbeatModel || '')
         setHeartbeatPrompt(editing.heartbeatPrompt || '')
-        setBudgetEnabled(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0)
+        setBudgetEnabled(
+          (typeof editing.hourlyBudget === 'number' && editing.hourlyBudget > 0)
+          || (typeof editing.dailyBudget === 'number' && editing.dailyBudget > 0)
+          || (typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0),
+        )
+        setHourlyBudget(typeof editing.hourlyBudget === 'number' && editing.hourlyBudget > 0 ? String(editing.hourlyBudget) : '')
+        setDailyBudget(typeof editing.dailyBudget === 'number' && editing.dailyBudget > 0 ? String(editing.dailyBudget) : '')
         setMonthlyBudget(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0 ? String(editing.monthlyBudget) : '')
         setBudgetAction(editing.budgetAction || 'warn')
         // Load wallet if agent has one
@@ -235,12 +247,15 @@ export function AgentSheet() {
         setProjectId(undefined)
         setAvatarSeed('')
         setThinkingLevel('')
+        setAutoRecovery(false)
         setVoiceId('')
         setHeartbeatEnabled(false)
         setHeartbeatIntervalSec('')
         setHeartbeatModel('')
         setHeartbeatPrompt('')
         setBudgetEnabled(false)
+        setHourlyBudget('')
+        setDailyBudget('')
         setMonthlyBudget('')
         setBudgetAction('warn')
       }
@@ -311,6 +326,9 @@ export function AgentSheet() {
       const url = normalizedEndpoint.trim().replace(/\/+$/, '')
       normalizedEndpoint = /^(https?|wss?):\/\//i.test(url) ? url : `http://${url}`
     }
+    const parsedHourlyBudget = budgetEnabled && hourlyBudget ? Number(hourlyBudget) : null
+    const parsedDailyBudget = budgetEnabled && dailyBudget ? Number(dailyBudget) : null
+    const parsedMonthlyBudget = budgetEnabled && monthlyBudget ? Number(monthlyBudget) : null
     const data = {
       name: name.trim() || 'Unnamed Agent',
       description,
@@ -334,13 +352,16 @@ 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,
       heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
       heartbeatModel: heartbeatModel.trim() || null,
       heartbeatPrompt: heartbeatPrompt.trim() || null,
-      monthlyBudget: budgetEnabled && monthlyBudget ? Number(monthlyBudget) : null,
+      hourlyBudget: parsedHourlyBudget && parsedHourlyBudget > 0 ? parsedHourlyBudget : null,
+      dailyBudget: parsedDailyBudget && parsedDailyBudget > 0 ? parsedDailyBudget : null,
+      monthlyBudget: parsedMonthlyBudget && parsedMonthlyBudget > 0 ? parsedMonthlyBudget : null,
       budgetAction: budgetEnabled ? budgetAction : undefined,
     }
     if (editing) {
@@ -420,11 +441,14 @@ export function AgentSheet() {
         setTestStatus('fail')
         setTestMessage(result.message)
         setTestErrorCode(result.errorCode || null)
+        toast.error(result.message || 'Connection test failed')
         return false
       }
     } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Connection test failed'
       setTestStatus('fail')
-      setTestMessage(err instanceof Error ? err.message : 'Connection test failed')
+      setTestMessage(msg)
+      toast.error(msg)
       return false
     }
   }
@@ -532,7 +556,10 @@ export function AgentSheet() {
                       if (data.url) {
                         setAvatarUrl(data.url)
                         setAvatarSeed('')
+                        toast.success('Avatar image uploaded')
                       }
+                    } catch (err: unknown) {
+                      toast.error('Failed to upload image')
                     } finally {
                       setUploading(false)
                       e.target.value = ''
@@ -653,8 +680,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 +699,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 +734,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 +746,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)}
@@ -743,10 +785,10 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Periodic check-in runs on idle sessions using this agent. Processes pending events and monitors status.</p>
       </div>
 
-      {/* Monthly Budget */}
+      {/* Spend Limits */}
       <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]">Spend Limits <HintTip text="Set hourly, daily, and monthly API spend limits for this agent" /></label>
           <button
             type="button"
             onClick={() => setBudgetEnabled(!budgetEnabled)}
@@ -757,24 +799,58 @@ export function AgentSheet() {
         </div>
         {budgetEnabled && (
           <div className="space-y-4 mt-3">
-            <div>
-              <label className="block text-[12px] text-text-3/70 mb-1.5">Budget cap (USD)</label>
-              <div className="relative">
-                <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
-                <input
-                  type="number"
-                  min="0.01"
-                  step="0.01"
-                  value={monthlyBudget}
-                  onChange={(e) => setMonthlyBudget(e.target.value)}
-                  placeholder="10.00"
-                  className={`${inputClass} pl-7`}
-                  style={{ fontFamily: 'inherit' }}
-                />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <div>
+                <label className="block text-[12px] text-text-3/70 mb-1.5">Hourly cap (USD)</label>
+                <div className="relative">
+                  <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={hourlyBudget}
+                    onChange={(e) => setHourlyBudget(e.target.value)}
+                    placeholder="0.50"
+                    className={`${inputClass} pl-7`}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-[12px] text-text-3/70 mb-1.5">Daily cap (USD)</label>
+                <div className="relative">
+                  <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={dailyBudget}
+                    onChange={(e) => setDailyBudget(e.target.value)}
+                    placeholder="5.00"
+                    className={`${inputClass} pl-7`}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-[12px] text-text-3/70 mb-1.5">Monthly cap (USD)</label>
+                <div className="relative">
+                  <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={monthlyBudget}
+                    onChange={(e) => setMonthlyBudget(e.target.value)}
+                    placeholder="20.00"
+                    className={`${inputClass} pl-7`}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                </div>
               </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"
@@ -806,8 +882,8 @@ export function AgentSheet() {
         )}
         <p className="text-[11px] text-text-3/70 mt-1.5">
           {budgetAction === 'block'
-            ? 'Cap monthly spend for this agent. When exceeded, chat runs are blocked until the next month.'
-            : 'Cap monthly spend for this agent. When exceeded, a warning is shown but runs continue.'}
+            ? 'When any configured cap is exceeded, runs are blocked until spend drops below that cap window.'
+            : 'When a configured cap is exceeded, a warning is shown but runs continue.'}
         </p>
       </div>
 
@@ -835,6 +911,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 +966,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>
@@ -1080,9 +1157,11 @@ export function AgentSheet() {
                     <button
                       type="button"
                       onClick={() => {
-                        navigator.clipboard.writeText((testDeviceId || openclawDeviceId)!)
-                        setConfigCopied(true)
-                        setTimeout(() => setConfigCopied(false), 2000)
+                        void copyTextToClipboard((testDeviceId || openclawDeviceId)!).then((copiedId) => {
+                          if (!copiedId) return
+                          setConfigCopied(true)
+                          setTimeout(() => setConfigCopied(false), 2000)
+                        })
                       }}
                       className="text-[12px] text-text-3/60 hover:text-text-3/80 transition-colors cursor-pointer bg-transparent border-none"
                     >
@@ -1286,11 +1365,11 @@ export function AgentSheet() {
         </div>
       )}
 
-      {/* Tools — hidden for providers that manage capabilities outside LangGraph */}
+      {/* Plugins — hidden for providers that manage capabilities outside LangGraph */}
       {!hasNativeCapabilities && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Tools</label>
-          <p className="text-[12px] text-text-3/60 mb-3">Enable tools for LangGraph agent sessions.</p>
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Plugins</label>
+          <p className="text-[12px] text-text-3/60 mb-3">Enable capabilities and plugins for this agent.</p>
           <div className="space-y-3">
             {AVAILABLE_TOOLS.map((t) => (
               <label key={t.id} className="flex items-center gap-3 cursor-pointer">
@@ -1313,7 +1392,7 @@ export function AgentSheet() {
       {/* Platform — hidden for providers that manage capabilities outside LangGraph */}
       {!hasNativeCapabilities && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Platform</label>
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Platform Plugins</label>
           <p className="text-[12px] text-text-3/60 mb-3">Allow this agent to manage platform resources directly.</p>
           <div className="space-y-3">
             {PLATFORM_TOOLS.map((t) => (
@@ -1601,4 +1680,3 @@ export function AgentSheet() {
     </>
   )
 }
-

package/src/components/agents/inspector-panel.tsx

@@ -173,7 +173,7 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
       )}
       {agent.tools && agent.tools.length > 0 && (
         <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Tools</label>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Plugins</label>
           <div className="flex flex-wrap gap-1">
             {agent.tools.map((tool) => (
               <span key={tool} className="px-2 py-0.5 rounded-[6px] text-[11px] font-600 bg-sky-400/[0.08] text-sky-400/70">

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>
   )
 }