@swarmclawai/swarmclaw 0.6.4 → 0.6.7

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

@@ -10,13 +10,35 @@ import { ChatroomTypingBar } from './chatroom-typing-bar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { HeartbeatMoment, ActivityMoment, isNotableTool } from '@/components/chat/activity-moment'
-import type { Chatroom, ChatroomMessage, Agent } from '@/types'
+import type { Chatroom, ChatroomMessage, ChatroomMember, Agent } from '@/types'
 
 function navigateToAgent(agentId: string) {
   useAppStore.getState().setActiveView('agents')
   useAppStore.getState().setCurrentAgent(agentId)
 }
 
+function getRoleBadge(role: string) {
+  if (role === 'admin') return { label: 'Admin', className: 'bg-purple-500/20 text-purple-400 border-purple-500/30' }
+  if (role === 'moderator') return { label: 'Mod', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' }
+  return null
+}
+
+function getMemberFromChatroom(chatroom: Chatroom, agentId: string): ChatroomMember | undefined {
+  if (chatroom.members?.length) return chatroom.members.find((m) => m.agentId === agentId)
+  return undefined
+}
+
+function getMemberRole(chatroom: Chatroom, agentId: string): string {
+  const member = getMemberFromChatroom(chatroom, agentId)
+  return member?.role || 'member'
+}
+
+function isAgentMuted(chatroom: Chatroom, agentId: string): boolean {
+  const member = getMemberFromChatroom(chatroom, agentId)
+  if (!member?.mutedUntil) return false
+  return new Date(member.mutedUntil).getTime() > Date.now()
+}
+
 type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; name: string; input: string }
 
 /** Subscribe to a single agent heartbeat topic — one hook call per agent */
@@ -65,6 +87,10 @@ export function ChatroomView() {
   const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
   const setChatroomSheetOpen = useChatroomStore((s) => s.setChatroomSheetOpen)
   const setEditingChatroomId = useChatroomStore((s) => s.setEditingChatroomId)
+  const deleteMessage = useChatroomStore((s) => s.deleteMessage)
+  const muteAgent = useChatroomStore((s) => s.muteAgent)
+  const unmuteAgent = useChatroomStore((s) => s.unmuteAgent)
+  const setMemberRole = useChatroomStore((s) => s.setMemberRole)
   const agents = useAppStore((s) => s.agents) as Record<string, Agent>
   const scrollRef = useRef<HTMLDivElement>(null)
   const [pinsExpanded, setPinsExpanded] = useState(false)
@@ -183,23 +209,37 @@ export function ChatroomView() {
             {chatroom.description ? ` · ${chatroom.description}` : ''}
           </p>
         </div>
-        {/* Member avatars */}
+        {/* Member avatars with role badges */}
         <div className="flex -space-x-1.5 shrink-0">
-          {memberAgents.slice(0, 5).map((agent) => (
-            <Tooltip key={agent.id}>
-              <TooltipTrigger asChild>
-                <button
-                  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'} />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" sideOffset={6}>
-                {agent.name}
-              </TooltipContent>
-            </Tooltip>
-          ))}
+          {memberAgents.slice(0, 5).map((agent) => {
+            const role = getMemberRole(chatroom, agent.id)
+            const badge = getRoleBadge(role)
+            const muted = isAgentMuted(chatroom, agent.id)
+            return (
+              <Tooltip key={agent.id}>
+                <TooltipTrigger asChild>
+                  <button
+                    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 ${muted ? 'opacity-40' : ''}`}
+                  >
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                    {badge && (
+                      <span className={`absolute -bottom-1 -right-1 text-[7px] font-700 px-0.5 rounded border ${badge.className}`}>
+                        {badge.label[0]}
+                      </span>
+                    )}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={6}>
+                  <div className="flex items-center gap-1.5">
+                    <span>{agent.name}</span>
+                    {badge && <span className={`text-[9px] font-600 px-1 py-0.5 rounded border ${badge.className}`}>{badge.label}</span>}
+                    {muted && <span className="text-[9px] text-red-400">Muted</span>}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
           {memberAgents.length > 5 && (
             <div className="w-[22px] h-[22px] rounded-full bg-white/[0.08] flex items-center justify-center text-[9px] text-text-3">
               +{memberAgents.length - 5}
@@ -320,6 +360,11 @@ export function ChatroomView() {
                   onReply={(m: ChatroomMessage) => setReplyingTo(m)}
                   onTogglePin={togglePin}
                   onTransfer={handleTransfer}
+                  onDeleteMessage={(messageId, targetAgentId) => deleteMessage(messageId, targetAgentId)}
+                  onMuteAgent={(agentId) => muteAgent(agentId)}
+                  onUnmuteAgent={(agentId) => unmuteAgent(agentId)}
+                  onSetRole={(agentId, role) => setMemberRole(agentId, role)}
+                  chatroom={chatroom}
                   pinnedMessageIds={pinnedIds}
                   streamingAgentIds={streamingAgentIds}
                   messages={chatroom.messages}

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

@@ -0,0 +1,120 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { api } from '@/lib/api-client'
+import type { ConnectorHealthEvent, ConnectorHealthEventType } from '@/types'
+
+interface HealthResponse {
+  events: ConnectorHealthEvent[]
+  uptimePercent: number
+}
+
+const EVENT_CONFIG: Record<ConnectorHealthEventType, { color: string; label: string }> = {
+  started: { color: 'bg-green-400', label: 'Started' },
+  reconnected: { color: 'bg-green-400', label: 'Reconnected' },
+  stopped: { color: 'bg-white/30', label: 'Stopped' },
+  error: { color: 'bg-red-400', label: 'Error' },
+  disconnected: { color: 'bg-amber-400', label: 'Disconnected' },
+}
+
+function formatTimestamp(ts: string): string {
+  const d = new Date(ts)
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffMin = Math.floor(diffMs / 60_000)
+  const diffHr = Math.floor(diffMs / 3_600_000)
+  const diffDay = Math.floor(diffMs / 86_400_000)
+
+  if (diffMin < 1) return 'just now'
+  if (diffMin < 60) return `${diffMin}m ago`
+  if (diffHr < 24) return `${diffHr}h ago`
+  if (diffDay < 7) return `${diffDay}d ago`
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function uptimeBadgeColor(pct: number): string {
+  if (pct >= 99) return 'bg-green-500/15 text-green-400 border-green-500/20'
+  if (pct >= 95) return 'bg-amber-500/15 text-amber-400 border-amber-500/20'
+  return 'bg-red-500/15 text-red-400 border-red-500/20'
+}
+
+export function ConnectorHealth({ connectorId }: { connectorId: string }) {
+  const [data, setData] = useState<HealthResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      setLoading(true)
+      try {
+        const resp = await api<HealthResponse>('GET', `/connectors/${connectorId}/health`)
+        if (!cancelled) setData(resp)
+      } catch {
+        // ignore fetch errors
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [connectorId])
+
+  if (loading) {
+    return (
+      <div className="p-4 rounded-[14px] border border-white/[0.06] bg-white/[0.01]">
+        <div className="text-[13px] text-text-3 animate-pulse">Loading health data...</div>
+      </div>
+    )
+  }
+
+  if (!data || data.events.length === 0) {
+    return (
+      <div className="p-4 rounded-[14px] border border-white/[0.06] bg-white/[0.01]">
+        <div className="text-[13px] text-text-3">No health events recorded yet.</div>
+      </div>
+    )
+  }
+
+  // Show most recent events first (up to 50)
+  const recentEvents = [...data.events].reverse().slice(0, 50)
+
+  return (
+    <div className="p-4 rounded-[14px] border border-white/[0.06] bg-white/[0.01] space-y-4">
+      {/* Uptime badge */}
+      <div className="flex items-center justify-between">
+        <div className="text-[13px] font-600 text-text-2">Health Timeline</div>
+        <span className={`px-3 py-1 rounded-[8px] text-[12px] font-600 border ${uptimeBadgeColor(data.uptimePercent)}`}>
+          {data.uptimePercent}% uptime
+        </span>
+      </div>
+
+      {/* Timeline */}
+      <div className="relative pl-5">
+        {/* Vertical line */}
+        <div className="absolute left-[7px] top-2 bottom-2 w-px bg-white/[0.08]" />
+
+        <div className="space-y-3">
+          {recentEvents.map((ev) => {
+            const cfg = EVENT_CONFIG[ev.event] ?? { color: 'bg-white/30', label: ev.event }
+            return (
+              <div key={ev.id} className="relative flex items-start gap-3">
+                {/* Dot */}
+                <div className={`absolute left-[-13px] top-[6px] w-[10px] h-[10px] rounded-full ${cfg.color} ring-2 ring-surface shrink-0`} />
+                {/* Content */}
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[13px] font-600 text-text-2">{cfg.label}</span>
+                    <span className="text-[11px] text-text-3">{formatTimestamp(ev.timestamp)}</span>
+                  </div>
+                  {ev.message && (
+                    <p className="text-[12px] text-text-3/70 mt-0.5 leading-[1.4] break-words">{ev.message}</p>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

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/connectors/connector-sheet.tsx

@@ -13,6 +13,7 @@ import { ChatroomPickerList } from '@/components/shared/chatroom-picker-list'
 import { SheetFooter } from '@/components/shared/sheet-footer'
 import { SectionLabel } from '@/components/shared/section-label'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
+import { ConnectorHealth } from '@/components/connectors/connector-health'
 
 /** Auto-detect URLs in text and make them clickable links that open in a new tab */
 function linkify(text: string) {
@@ -655,6 +656,7 @@ export function ConnectorSheet() {
                   <span key={i} className="flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] bg-accent-soft/50 border border-accent-bright/20 text-[12px] font-mono text-accent-bright">
                     {tag}
                     <button
+                      aria-label={`Remove ${tag}`}
                       onClick={() => {
                         const next = tags.filter((_, j) => j !== i).join(',')
                         setConfig({ ...config, [field.key]: next })
@@ -860,6 +862,13 @@ export function ConnectorSheet() {
         </div>
       )}
 
+      {/* Health timeline (existing connectors only) */}
+      {editing && (
+        <div className="mb-6">
+          <ConnectorHealth connectorId={editing.id} />
+        </div>
+      )}
+
       {/* Actions */}
       <SheetFooter
         onCancel={() => { setOpen(false); setEditingId(null) }}

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
+import { AreaChart, Area, ResponsiveContainer } from 'recharts'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
@@ -85,6 +86,7 @@ export function HomeView() {
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
   const setMessages = useChatStore((s) => s.setMessages)
   const [todayCost, setTodayCost] = useState(0)
+  const [costTrend, setCostTrend] = useState<{ cost: number }[]>([])
 
   const allAgents = Object.values(agents).filter((a) => !a.trashedAt)
   const pinnedAgents = allAgents.filter((a) => a.pinned)
@@ -144,10 +146,11 @@ export function HomeView() {
     void loadSchedules()
     void loadNotifications()
     void loadConnectors()
-    api<{ records: Array<{ estimatedCost: number }> }>('GET', '/usage?range=24h')
+    api<{ records: Array<{ estimatedCost: number }>; timeSeries: Array<{ cost: number }> }>('GET', '/usage?range=7d')
       .then((data) => {
         const total = (data.records || []).reduce((s, r) => s + (r.estimatedCost || 0), 0)
         setTodayCost(total)
+        setCostTrend((data.timeSeries || []).map((pt) => ({ cost: pt.cost })))
       })
       .catch(() => {})
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -196,13 +199,31 @@ export function HomeView() {
         </div>
 
         {/* Quick Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-10">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
           <StatCard label="Agents" value={String(agentCount)} />
           <StatCard label="Active Tasks" value={String(activeTaskCount)} accent={activeTaskCount > 0} />
           <StatCard label="Today's Cost" value={`$${todayCost.toFixed(2)}`} />
           <StatCard label="Connectors" value={`${activeConnectorCount}/${allConnectors.length}`} accent={activeConnectorCount > 0} />
         </div>
 
+        {/* Cost trend sparkline */}
+        {costTrend.length > 1 && (
+          <div className="mb-10 px-1">
+            <p className="text-[10px] text-text-3/50 uppercase tracking-wider mb-1">7-day cost trend</p>
+            <ResponsiveContainer width="100%" height={60}>
+              <AreaChart data={costTrend} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
+                <defs>
+                  <linearGradient id="costGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#818CF8" stopOpacity={0.3} />
+                    <stop offset="100%" stopColor="#818CF8" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <Area type="monotone" dataKey="cost" stroke="#818CF8" strokeWidth={1.5} fill="url(#costGrad)" dot={false} />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
         {/* Notifications banner */}
         {unreadNotifications.length > 0 && (
           <section className="mb-8">
@@ -353,7 +374,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 +435,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 { toast } from 'sonner'
 import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 
 interface Props {
@@ -18,6 +19,8 @@ interface Props {
 
 // FilePreview is now imported from @/components/shared/file-preview
 
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10 MB
+
 export function ChatInput({ streaming, onSend, onStop }: Props) {
   const [value, setValue] = useState('')
   const { ref: textareaRef, resize } = useAutoResize()
@@ -90,6 +93,10 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
   )
 
   const uploadAndAdd = useCallback(async (file: File) => {
+    if (file.size > MAX_FILE_SIZE) {
+      toast.error(`File too large: ${(file.size / 1024 / 1024).toFixed(1)} MB (max 10 MB)`)
+      return
+    }
     try {
       const result = await uploadImage(file)
       addPendingFile({ file, path: result.path, url: result.url })
@@ -123,7 +130,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
   const hasContent = value.trim().length > 0 || pendingFiles.length > 0
 
   return (
-    <div className="shrink-0 px-6 md:px-12 lg:px-16 pb-4 pt-2"
+    <div className="shrink-0 px-4 md:px-12 lg:px-16 pb-4 pt-2 fixed bottom-0 left-0 right-0 z-20 bg-bg/95 backdrop-blur-md md:relative md:z-auto md:bg-transparent md:backdrop-blur-none"
       style={{ paddingBottom: 'max(16px, env(safe-area-inset-bottom))' }}>
       <div>
         {streaming && (

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

@@ -4,6 +4,7 @@ import { Component, useState, useEffect, useCallback } from 'react'
 import type { ReactNode, ErrorInfo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useMediaQuery } from '@/hooks/use-media-query'
+import { useSwipe } from '@/hooks/use-swipe'
 import { Avatar } from '@/components/shared/avatar'
 import { SettingsPage } from '@/components/shared/settings/settings-page'
 import { AgentList } from '@/components/agents/agent-list'
@@ -41,6 +42,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'
@@ -52,6 +54,7 @@ import { HomeView } from '@/components/home/home-view'
 import { NetworkBanner } from './network-banner'
 import { UpdateBanner } from './update-banner'
 import { MobileHeader } from './mobile-header'
+import { CommandPalette } from '@/components/shared/command-palette'
 import { DaemonIndicator } from './daemon-indicator'
 import { NotificationCenter } from '@/components/shared/notification-center'
 import { ChatArea } from '@/components/chat/chat-area'
@@ -193,6 +196,14 @@ export function AppLayout() {
     : Object.values(agents)[0]?.id || null
   const isMainChat = activeView === 'agents' && currentAgentId === defaultAgentId
 
+  const swipeHandlers = useSwipe({
+    onSwipe: (dir) => {
+      if (dir === 'right') setSidebarOpen(true)
+      else setSidebarOpen(false)
+    },
+    leftSwipeEnabled: sidebarOpen,
+  })
+
   const currentSession = currentSessionId ? sessions[currentSessionId] : null
   const hasCanvas = !!(currentSession?.canvasContent && canvasDismissedFor !== currentSessionId)
   const canvasAgentName = currentSession?.agentId && agents[currentSession.agentId] ? agents[currentSession.agentId].name : undefined
@@ -209,7 +220,12 @@ export function AppLayout() {
   }
 
   return (
-    <div className="h-full flex overflow-hidden">
+    <div
+      className="h-full flex overflow-hidden"
+      onTouchStart={swipeHandlers.onTouchStart}
+      onTouchMove={swipeHandlers.onTouchMove}
+      onTouchEnd={swipeHandlers.onTouchEnd}
+    >
       {/* Desktop: Navigation rail (expandable) */}
       {isDesktop && (
         <div
@@ -398,6 +414,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" />
@@ -519,8 +540,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)' }}
@@ -727,6 +748,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">
@@ -793,6 +816,7 @@ export function AppLayout() {
         </div>
       </ErrorBoundary>
 
+      <CommandPalette />
       <SearchDialog />
       <AgentSwitchDialog />
       <KeyboardShortcutsDialog />
@@ -886,6 +910,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',
@@ -895,7 +920,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[] }> = {
@@ -1007,6 +1032,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/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>
                 )