@swarmclawai/swarmclaw 0.6.3 → 0.6.6

package/src/components/chatrooms/chatroom-input.tsx

@@ -5,6 +5,7 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { FilePreview } from '@/components/shared/file-preview'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { uploadImage } from '@/lib/upload'
+import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 import type { Agent } from '@/types'
 
 interface Props {
@@ -33,7 +34,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
   const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
     if (!chatroomId) return
-    const draft = localStorage.getItem(`sc_draft_cr_${chatroomId}`)
+    const draft = safeStorageGet(`sc_draft_cr_${chatroomId}`)
     setText(draft || '')
   }, [chatroomId])
 
@@ -42,8 +43,8 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
     if (!chatroomId) return
     if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
     draftTimerRef.current = setTimeout(() => {
-      if (text) localStorage.setItem(`sc_draft_cr_${chatroomId}`, text)
-      else localStorage.removeItem(`sc_draft_cr_${chatroomId}`)
+      if (text) safeStorageSet(`sc_draft_cr_${chatroomId}`, text)
+      else safeStorageRemove(`sc_draft_cr_${chatroomId}`)
     }, 300)
     return () => { if (draftTimerRef.current) clearTimeout(draftTimerRef.current) }
   }, [text, chatroomId])
@@ -167,7 +168,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
       if ((text.trim() || pendingFiles.length) && !disabled) {
         onSend(text)
         setText('')
-        if (chatroomId) localStorage.removeItem(`sc_draft_cr_${chatroomId}`)
+        if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
         setShowMentions(false)
       }
     }
@@ -202,7 +203,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
                 selectedIndex === i + 1 ? 'bg-white/[0.08]' : 'hover:bg-white/[0.06]'
               }`}
             >
-              <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={20} />
+              <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
               <span className="text-[13px] text-text">{agent.name}</span>
             </button>
           ))}
@@ -294,7 +295,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
             if ((text.trim() || pendingFiles.length) && !disabled) {
               onSend(text)
               setText('')
-              if (chatroomId) localStorage.removeItem(`sc_draft_cr_${chatroomId}`)
+              if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
               setShowMentions(false)
             }
           }}

package/src/components/chatrooms/chatroom-message.tsx

@@ -172,7 +172,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
               className="bg-transparent border-none p-0 cursor-pointer transition-all duration-150 hover:scale-110 hover:-translate-y-0.5"
               style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={message.senderName} size={28} status={streamingAgentIds?.has(message.senderId) ? 'busy' : 'online'} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={message.senderName} size={28} status={streamingAgentIds?.has(message.senderId) ? 'busy' : 'online'} />
             </button>
           ) : (
             <div style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}>

package/src/components/chatrooms/chatroom-sheet.tsx

@@ -178,7 +178,7 @@ export function ChatroomSheet() {
                         selected ? 'bg-accent-soft/40' : 'hover:bg-white/[0.04]'
                       }`}
                     >
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                       <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                       {selected && (
                         <CheckIcon size={14} className="text-accent-bright shrink-0" />

package/src/components/chatrooms/chatroom-typing-bar.tsx

@@ -63,7 +63,7 @@ export function ChatroomTypingBar({ streamingAgents }: Props) {
         return (
           <div key={agentId} className="flex gap-2.5 px-4 py-1.5" style={{ animation: 'msg-in 0.2s ease-out both' }}>
             <div className="shrink-0 mt-0.5 w-7">
-              <AgentAvatar seed={agent?.avatarSeed || null} name={a.name} size={28} />
+              <AgentAvatar seed={agent?.avatarSeed || null} avatarUrl={agent?.avatarUrl} name={a.name} size={28} />
             </div>
             <div className="flex-1 min-w-0">
               <div className="flex items-baseline gap-2 mb-0.5">

package/src/components/chatrooms/chatroom-view.tsx

@@ -192,7 +192,7 @@ export function ChatroomView() {
                   onClick={() => navigateToAgent(agent.id)}
                   className="relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0"
                 >
-                  <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                  <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
                 </button>
               </TooltipTrigger>
               <TooltipContent side="bottom" sideOffset={6}>

package/src/components/connectors/connector-list.tsx

@@ -206,7 +206,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                   </>
                 ) : agent ? (
                   <>
-                    <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={24} />
+                    <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                     <div className="flex-1 min-w-0">
                       <span className="text-[12px] font-600 text-text-2 block truncate">{agent.name}</span>
                       <span className="text-[10px] text-text-3/60 block">{agent.provider}/{agent.model}</span>

package/src/components/home/home-view.tsx

@@ -353,7 +353,7 @@ export function HomeView() {
                     style={{ fontFamily: 'inherit' }}
                   >
                     <div className="relative">
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={36} />
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={36} />
                       <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-surface ${
                         isTyping ? 'bg-accent-bright animate-pulse'
                           : isOnline ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)]'
@@ -414,6 +414,7 @@ export function HomeView() {
                   >
                     <AgentAvatar
                       seed={agent?.avatarSeed}
+                      avatarUrl={agent?.avatarUrl}
                       name={displayName}
                       size={28}
                     />

package/src/components/input/chat-input.tsx

@@ -8,6 +8,7 @@ import { useAutoResize } from '@/hooks/use-auto-resize'
 import { useSpeechRecognition } from '@/hooks/use-speech-recognition'
 import { FilePreview } from '@/components/shared/file-preview'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 
 interface Props {
   streaming: boolean
@@ -36,7 +37,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
   const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
     if (!sessionId) return
-    const draft = localStorage.getItem(`sc_draft_${sessionId}`)
+    const draft = safeStorageGet(`sc_draft_${sessionId}`)
     setValue(draft || '')
   }, [sessionId])
 
@@ -45,8 +46,8 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     if (!sessionId) return
     if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
     draftTimerRef.current = setTimeout(() => {
-      if (value) localStorage.setItem(`sc_draft_${sessionId}`, value)
-      else localStorage.removeItem(`sc_draft_${sessionId}`)
+      if (value) safeStorageSet(`sc_draft_${sessionId}`, value)
+      else safeStorageRemove(`sc_draft_${sessionId}`)
     }, 300)
     return () => { if (draftTimerRef.current) clearTimeout(draftTimerRef.current) }
   }, [value, sessionId])
@@ -65,7 +66,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     }
     onSend(text || 'See attached file(s).')
     setValue('')
-    if (sessionId) localStorage.removeItem(`sc_draft_${sessionId}`)
+    if (sessionId) safeStorageRemove(`sc_draft_${sessionId}`)
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }

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

@@ -183,7 +183,7 @@ export function KnowledgeList() {
                     <div className="flex items-center gap-1.5">
                       <div className="flex items-center -space-x-1.5">
                         {scopedAgents.slice(0, 5).map((agent) => (
-                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} className="ring-1 ring-surface" />
                         ))}
                       </div>
                       {scopedAgents.length > 5 && (

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

@@ -360,7 +360,7 @@ export function KnowledgeSheet() {
                     }`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                     <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                     {selected && (
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">

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

@@ -41,6 +41,7 @@ import { PluginSheet } from '@/components/plugins/plugin-sheet'
 import { RunList } from '@/components/runs/run-list'
 import { ActivityFeed } from '@/components/activity/activity-feed'
 import { MetricsDashboard } from '@/components/usage/metrics-dashboard'
+import { WalletPanel } from '@/components/wallets/wallet-panel'
 import { ProjectList } from '@/components/projects/project-list'
 import { ProjectDetail } from '@/components/projects/project-detail'
 import { ProjectSheet } from '@/components/projects/project-sheet'
@@ -58,6 +59,7 @@ import { ChatArea } from '@/components/chat/chat-area'
 import { CanvasPanel } from '@/components/canvas/canvas-panel'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { api } from '@/lib/api-client'
+import { safeStorageGet, safeStorageSet } from '@/lib/safe-storage'
 import type { AppView } from '@/types'
 
 const RAIL_EXPANDED_KEY = 'sc_rail_expanded'
@@ -118,9 +120,8 @@ export function AppLayout() {
   }, [handleShortcutKey])
 
   useEffect(() => {
-    if (typeof window === 'undefined') return
-    if (localStorage.getItem(STAR_NOTIFICATION_KEY)) return
-    localStorage.setItem(STAR_NOTIFICATION_KEY, '1')
+    if (safeStorageGet(STAR_NOTIFICATION_KEY)) return
+    safeStorageSet(STAR_NOTIFICATION_KEY, '1')
     void api('POST', '/notifications', {
       type: 'info',
       title: 'Enjoying SwarmClaw?',
@@ -143,15 +144,14 @@ export function AppLayout() {
   }, [appSettings.themeHue])
 
   const [railExpanded, setRailExpanded] = useState(() => {
-    if (typeof window === 'undefined') return true
-    const stored = localStorage.getItem(RAIL_EXPANDED_KEY)
+    const stored = safeStorageGet(RAIL_EXPANDED_KEY)
     return stored === null ? true : stored === 'true'
   })
 
   const toggleRail = () => {
     const next = !railExpanded
     setRailExpanded(next)
-    localStorage.setItem(RAIL_EXPANDED_KEY, String(next))
+    safeStorageSet(RAIL_EXPANDED_KEY, String(next))
   }
 
   const handleSwitchUser = () => {
@@ -399,6 +399,11 @@ export function AppLayout() {
                 <line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" />
               </svg>
             </NavItem>
+            <NavItem view="wallets" label="Wallets" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('wallets')}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="2" y="6" width="20" height="14" rx="2" /><path d="M22 10H18a2 2 0 0 0 0 4h4" /><path d="M6 6V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2" />
+              </svg>
+            </NavItem>
             <NavItem view="runs" label="Runs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('runs')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
@@ -520,8 +525,8 @@ export function AppLayout() {
         </div>
       )}
 
-      {/* Desktop: Side panel */}
-      {isDesktop && sidebarOpen && (
+      {/* Desktop: Side panel (wallets has its own built-in sidebar) */}
+      {isDesktop && sidebarOpen && activeView !== 'wallets' && (
         <div
           className="w-[280px] shrink-0 bg-raised border-r border-white/[0.04] flex flex-col h-full"
           style={{ animation: 'panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}
@@ -728,6 +733,8 @@ export function AppLayout() {
             <ActivityFeed />
           ) : activeView === 'usage' ? (
             <MetricsDashboard />
+          ) : activeView === 'wallets' ? (
+            <WalletPanel />
           ) : activeView === 'chatrooms' ? (
             <div className="flex-1 flex h-full min-w-0">
               <div className="w-[280px] shrink-0 border-r border-white/[0.06] flex flex-col">
@@ -887,6 +894,7 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
   logs: 'Application logs & error tracking',
   plugins: 'Extend agent capabilities with custom plugins',
   usage: 'Usage metrics, cost tracking & agent performance',
+  wallets: 'Agent crypto wallets — hold funds, send SOL, manage spending',
   runs: 'Live run monitoring & history',
   settings: 'Manage providers, API keys & orchestrator engine',
   projects: 'Group agents, tasks & schedules into projects',
@@ -896,7 +904,7 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
 const FULL_WIDTH_VIEWS = new Set<AppView>([
   'home', 'chatrooms', 'schedules', 'secrets', 'providers', 'skills',
   'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins',
-  'usage', 'runs', 'logs', 'settings', 'activity', 'projects',
+  'usage', 'wallets', 'runs', 'logs', 'settings', 'activity', 'projects',
 ])
 
 const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents' | 'home'>, { icon: string; title: string; description: string; features: string[] }> = {
@@ -1008,6 +1016,12 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents' | 'home'>, { icon: str
     description: 'Audit trail of all entity mutations across the system.',
     features: ['Track agent, task, and connector changes', 'Filter by entity type and action', 'Real-time updates via WebSocket', 'Relative timestamps'],
   },
+  wallets: {
+    icon: 'wallet',
+    title: 'Wallets',
+    description: 'Agent crypto wallets for autonomous financial operations on Solana.',
+    features: ['Create Solana wallets for agents', 'Per-transaction and daily spending limits', 'User approval for transactions', 'Balance tracking and transaction history'],
+  },
 }
 
 function ViewEmptyState({ view }: { view: AppView }) {

package/src/components/logs/log-list.tsx

@@ -5,6 +5,7 @@ import { api } from '@/lib/api-client'
 import { useWs } from '@/hooks/use-ws'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { safeStorageGetJson, safeStorageSet } from '@/lib/safe-storage'
 
 interface LogEntry {
   time: string
@@ -38,10 +39,9 @@ export function LogList() {
   const [selected, setSelected] = useState<LogEntry | null>(null)
   const [creatingTask, setCreatingTask] = useState(false)
   const [taskAgentId, setTaskAgentId] = useState('')
-  const [savedFilters, setSavedFilters] = useState<Array<{ name: string; levels: string[]; search: string }>>(() => {
-    if (typeof window === 'undefined') return []
-    try { return JSON.parse(localStorage.getItem('sc_log_filters') || '[]') } catch { return [] }
-  })
+  const [savedFilters, setSavedFilters] = useState<Array<{ name: string; levels: string[]; search: string }>>(
+    () => safeStorageGetJson<Array<{ name: string; levels: string[]; search: string }>>('sc_log_filters', []),
+  )
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const agents = useAppStore((s) => s.agents)
@@ -169,7 +169,7 @@ export function LogList() {
                   onClick={(e) => {
                     e.stopPropagation()
                     const next = savedFilters.filter((_, j) => j !== i)
-                    localStorage.setItem('sc_log_filters', JSON.stringify(next))
+                    safeStorageSet('sc_log_filters', JSON.stringify(next))
                     setSavedFilters(next)
                   }}
                   className="text-accent-bright/50 hover:text-red-400 ml-0.5"
@@ -232,9 +232,9 @@ export function LogList() {
               const name = prompt('Filter name:')
               if (!name?.trim()) return
               const filter = { name: name.trim(), levels: levelFilter, search }
-              const existing = JSON.parse(localStorage.getItem('sc_log_filters') || '[]')
+              const existing = safeStorageGetJson<Array<{ name: string; levels: string[]; search: string }>>('sc_log_filters', [])
               existing.push(filter)
-              localStorage.setItem('sc_log_filters', JSON.stringify(existing))
+              safeStorageSet('sc_log_filters', JSON.stringify(existing))
               setSavedFilters(existing)
             }}
             className="px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-white/[0.04] text-text-3 hover:text-accent-bright hover:bg-accent-soft"

package/src/components/memory/memory-agent-list.tsx

@@ -120,7 +120,7 @@ export function MemoryAgentList() {
               {isActive && (
                 <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
               )}
-              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={28} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={28} />
               <span className={`text-[13px] font-600 flex-1 truncate ${isActive ? 'text-accent-bright' : 'text-text-2'}`}>
                 {agent.name}
               </span>

package/src/components/memory/memory-browser.tsx

@@ -163,6 +163,7 @@ export function MemoryBrowser() {
                     active={e.id === selectedMemoryId}
                     agentName={showAgent ? (agent?.name || null) : undefined}
                     agentAvatarSeed={showAgent ? (agent?.avatarSeed || null) : undefined}
+                    agentAvatarUrl={showAgent ? (agent?.avatarUrl || null) : undefined}
                     onClick={() => setSelectedMemoryId(e.id)}
                   />
                 )

package/src/components/memory/memory-card.tsx

@@ -17,10 +17,11 @@ interface Props {
   active?: boolean
   agentName?: string | null
   agentAvatarSeed?: string | null
+  agentAvatarUrl?: string | null
   onClick: () => void
 }
 
-export function MemoryCard({ entry, active, agentName, agentAvatarSeed, onClick }: Props) {
+export function MemoryCard({ entry, active, agentName, agentAvatarSeed, agentAvatarUrl, onClick }: Props) {
   return (
     <div
       onClick={onClick}
@@ -73,7 +74,7 @@ export function MemoryCard({ entry, active, agentName, agentAvatarSeed, onClick
       )}
       {agentName ? (
         <div className="flex items-center gap-1.5 mt-1.5">
-          <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={16} />
+          <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={16} />
           <span className="text-[10px] text-text-3/60 truncate">{agentName}</span>
         </div>
       ) : !entry.agentId ? (

package/src/components/memory/memory-detail.tsx

@@ -329,7 +329,7 @@ export function MemoryDetail() {
                           : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
                       style={{ fontFamily: 'inherit' }}
                     >
-                      <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={16} />
+                      <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                       <span className="truncate max-w-[100px]">{agent.name}</span>
                     </button>
                   ))}
@@ -360,7 +360,7 @@ export function MemoryDetail() {
                                 : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
                             style={{ fontFamily: 'inherit' }}
                           >
-                            <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={16} />
+                            <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                             <span className="truncate max-w-[100px]">{agent.name}</span>
                           </button>
                         )
@@ -406,7 +406,7 @@ export function MemoryDetail() {
                       const a = agents[aid]
                       return (
                         <span key={aid} className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-white/[0.03] text-[11px] text-text-3">
-                          <AgentAvatar seed={a?.avatarSeed || null} name={a?.name || aid} size={16} />
+                          <AgentAvatar seed={a?.avatarSeed || null} avatarUrl={a?.avatarUrl} name={a?.name || aid} size={16} />
                           {a?.name || aid}
                         </span>
                       )

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

@@ -104,7 +104,7 @@ export function MemorySheet() {
                   : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={20} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
               <span className="truncate max-w-[120px]">{agent.name}</span>
             </button>
           ))}
@@ -140,7 +140,7 @@ export function MemorySheet() {
                         : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={20} />
+                    <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
                     <span className="truncate max-w-[120px]">{agent.name}</span>
                   </button>
                 )

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

@@ -68,7 +68,7 @@ function AssignAgentPicker({ projectId, onClose }: { projectId: string; onClose:
               className="w-full flex items-center gap-2.5 px-3 py-2 rounded-[8px] text-left hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none"
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={a.avatarSeed} name={a.name} size={22} />
+              <AgentAvatar seed={a.avatarSeed} avatarUrl={a.avatarUrl} name={a.name} size={22} />
               <div className="min-w-0 flex-1">
                 <div className="text-[12px] text-text truncate">{a.name}</div>
                 <div className="text-[10px] text-text-3/40 truncate">{a.model || a.provider}</div>
@@ -312,7 +312,7 @@ export function ProjectDetail() {
                     className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer bg-transparent border-none text-left p-0"
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={28} />
                     <div className="min-w-0 flex-1">
                       <div className="text-[13px] font-600 text-text truncate">{agent.name}</div>
                       <div className="text-[11px] text-text-3/50 truncate">{agent.model || agent.provider}</div>
@@ -381,7 +381,7 @@ export function ProjectDetail() {
                     <span className="text-[13px] text-text truncate flex-1">{task.title}</span>
                     {agent && (
                       <span className="shrink-0 flex items-center gap-1.5 text-[11px] text-text-3/40">
-                        <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={16} />
+                        <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                         {agent.name}
                       </span>
                     )}
@@ -448,7 +448,7 @@ export function ProjectDetail() {
                       </span>
                       {agent && (
                         <span className="shrink-0 flex items-center gap-1.5 text-[11px] text-text-3/40">
-                          <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={16} />
+                          <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                         </span>
                       )}
                       {schedule.nextRunAt && (

package/src/components/secrets/secret-sheet.tsx

@@ -161,7 +161,7 @@ export function SecretSheet() {
                       }`}
                       style={{ fontFamily: 'inherit' }}
                     >
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                       <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                       {selected && (
                         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">

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

@@ -102,7 +102,7 @@ export function SecretsList({ inSidebar }: Props) {
                 <div className="flex items-center gap-1.5 mt-1.5 pl-[22px]">
                   <div className="flex items-center -space-x-1.5">
                     {scopedAgents.slice(0, 5).map((agent) => (
-                      <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                      <AgentAvatar key={agent.id} seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} className="ring-1 ring-surface" />
                     ))}
                   </div>
                   {scopedAgents.length > 5 && (

package/src/components/sessions/new-session-sheet.tsx

@@ -13,6 +13,7 @@ import { SheetFooter } from '@/components/shared/sheet-footer'
 import { inputClass } from '@/components/shared/form-styles'
 import type { ProviderType, SessionTool } from '@/types'
 import { SectionLabel } from '@/components/shared/section-label'
+import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 
 export function NewSessionSheet() {
   const open = useAppStore((s) => s.newSessionOpen)
@@ -64,7 +65,7 @@ export function NewSessionSheet() {
       setOllamaMode('local')
       // Auto-select last used agent, or default agent if no history
       const agentsList = Object.values(agents)
-      const lastAgentId = typeof window !== 'undefined' ? localStorage.getItem('swarmclaw-last-agent') : null
+      const lastAgentId = safeStorageGet('swarmclaw-last-agent')
       const lastAgent = lastAgentId ? agentsList.find((a) => a.id === lastAgentId) : null
       const defaultAgent = lastAgent || agentsList.find((a) => a.id === 'default') || agentsList[0]
       if (defaultAgent) {
@@ -153,9 +154,9 @@ export function NewSessionSheet() {
     )
     // Remember agent selection for next time
     if (selectedAgentId) {
-      localStorage.setItem('swarmclaw-last-agent', selectedAgentId)
+      safeStorageSet('swarmclaw-last-agent', selectedAgentId)
     } else {
-      localStorage.removeItem('swarmclaw-last-agent')
+      safeStorageRemove('swarmclaw-last-agent')
     }
     updateSessionInStore(s)
     setCurrentSession(s.id)

package/src/components/sessions/session-card.tsx

@@ -86,7 +86,7 @@ export function SessionCard({ session, active, onClick }: Props) {
       <div className="flex items-center gap-2.5">
         {agent && (
           <div className="relative shrink-0">
-            <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+            <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
             {(heartbeatEnabled || session.active) && (
               <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 ring-2 ring-[#0f0f1a]" />
             )}

package/src/components/shared/agent-picker-list.tsx

@@ -72,7 +72,7 @@ export function AgentPickerList({
             {active && (
               <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
             )}
-            <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={28} />
+            <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={28} />
             <span className={`text-[13px] font-600 flex-1 truncate ${active ? 'text-accent-bright' : 'text-text-2'}`}>
               {a.name}
             </span>

package/src/components/shared/agent-switch-dialog.tsx

@@ -115,7 +115,7 @@ export function AgentSwitchDialog() {
                 ${idx === selectedIdx ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
+              <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={28} />
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   <span className="text-[13px] font-500 text-text truncate">{agent.name}</span>

package/src/components/shared/settings/section-user-preferences.tsx

@@ -35,11 +35,11 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
         </div>
         <button
           type="button"
-          onClick={() => patchSettings({ suggestionsEnabled: appSettings.suggestionsEnabled === false })}
-          className={`relative w-9 h-5 rounded-full transition-colors ${appSettings.suggestionsEnabled !== false ? 'bg-accent-bright' : 'bg-white/[0.10]'}`}
+          onClick={() => patchSettings({ suggestionsEnabled: !appSettings.suggestionsEnabled })}
+          className={`relative w-9 h-5 rounded-full transition-colors ${appSettings.suggestionsEnabled ? 'bg-accent-bright' : 'bg-white/[0.10]'}`}
           style={{ fontFamily: 'inherit' }}
         >
-          <span className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${appSettings.suggestionsEnabled !== false ? 'translate-x-4' : ''}`} />
+          <span className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${appSettings.suggestionsEnabled ? 'translate-x-4' : ''}`} />
         </button>
       </div>
 
@@ -70,7 +70,7 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
                   : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={18} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={18} />
               {agent.name}
             </button>
           ))}

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

@@ -309,7 +309,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
                     <div className="flex items-center gap-1.5 mt-1.5">
                       <div className="flex items-center -space-x-1.5">
                         {scopedAgents.slice(0, 5).map((agent) => (
-                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} className="ring-1 ring-surface" />
                         ))}
                       </div>
                       {scopedAgents.length > 5 && (

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

@@ -255,7 +255,7 @@ export function SkillSheet() {
                     }`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                     <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                     {selected && (
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">

package/src/components/tasks/task-board.tsx

@@ -264,7 +264,7 @@ export function TaskBoard() {
             >
               {filterAgentId && agents[filterAgentId] ? (
                 <>
-                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} name={agents[filterAgentId].name} size={18} />
+                  <AgentAvatar seed={agents[filterAgentId].avatarSeed || null} avatarUrl={agents[filterAgentId].avatarUrl} name={agents[filterAgentId].name} size={18} />
                   {agents[filterAgentId].name}
                 </>
               ) : 'All Agents'}
@@ -290,7 +290,7 @@ export function TaskBoard() {
                       ${filterAgentId === a.id ? 'bg-white/[0.06] text-text' : 'bg-transparent text-text-3 hover:bg-white/[0.04]'}`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={20} />
+                    <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={20} />
                     {a.name}
                   </button>
                 ))}
@@ -480,7 +480,7 @@ export function TaskBoard() {
                     className="w-full flex items-center gap-2 px-3 py-2 text-[12px] font-600 cursor-pointer border-none text-left bg-transparent text-text-3 hover:bg-white/[0.06] hover:text-text transition-colors"
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={16} />
+                    <AgentAvatar seed={a.avatarSeed || null} avatarUrl={a.avatarUrl} name={a.name} size={16} />
                     {a.name}
                   </button>
                 ))}