@swarmclawai/swarmclaw 0.7.8 → 0.8.0

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

@@ -4,6 +4,7 @@ import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import { useCallback, useEffect, useState, type ReactNode } from 'react'
 import type { Agent } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 import { AgentAvatar } from './agent-avatar'
 import { AgentFilesEditor } from './agent-files-editor'
 import { OpenClawSkillsPanel } from './openclaw-skills-panel'
@@ -11,6 +12,7 @@ import { PermissionPresetSelector } from './permission-preset-selector'
 import { ExecConfigPanel } from './exec-config-panel'
 import { SandboxEnvPanel } from './sandbox-env-panel'
 import { CronJobForm } from './cron-job-form'
+import { toast } from 'sonner'
 
 interface Props {
   agent: Agent
@@ -87,6 +89,12 @@ export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAge
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 min-w-0">
               <h3 className="font-display text-[16px] font-700 text-text truncate tracking-[-0.02em]">{agent.name}</h3>
+              {agent.disabled === true && (
+                <span className="inline-flex items-center gap-1 rounded-[7px] border border-amber-400/15 bg-amber-400/[0.1] px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-amber-300">
+                  <span className="w-1.5 h-1.5 rounded-full bg-amber-300" />
+                  Disabled
+                </span>
+              )}
               {agent.heartbeatEnabled && (
                 <span className="inline-flex items-center gap-1 rounded-[7px] border border-emerald-400/15 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-emerald-300">
                   <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
@@ -189,13 +197,32 @@ interface OverviewTabProps {
 }
 
 function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: OverviewTabProps) {
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const [availabilitySaving, setAvailabilitySaving] = useState(false)
   const summaryStats = [
     { label: 'Provider', value: PROVIDER_LABELS[agent.provider] || agent.provider.replace(/-/g, ' ') },
     { label: 'Model', value: agent.model || 'Default' },
     { label: 'Plugins', value: String(agent.plugins?.length ?? 0) },
     { label: 'Heartbeat', value: agent.heartbeatEnabled ? `Every ${agent.heartbeatIntervalSec ?? DEFAULT_HEARTBEAT_INTERVAL_SEC}s` : 'Off' },
+    { label: 'Status', value: agent.disabled === true ? 'Disabled' : 'Enabled' },
   ]
 
+  const handleToggleAvailability = useCallback(async () => {
+    if (availabilitySaving) return
+    setAvailabilitySaving(true)
+    try {
+      const nextDisabled = agent.disabled !== true
+      await api('PUT', `/agents/${agent.id}`, { disabled: nextDisabled })
+      await Promise.all([loadAgents(), loadSessions()])
+      toast.success(nextDisabled ? `${agent.name} disabled` : `${agent.name} enabled`)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to update agent availability')
+    } finally {
+      setAvailabilitySaving(false)
+    }
+  }, [agent.disabled, agent.id, agent.name, availabilitySaving, loadAgents, loadSessions])
+
   return (
     <div className="p-4 flex flex-col gap-4">
       <div className={panelCardClass('p-4 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))]')}>
@@ -259,6 +286,20 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
                 Edit Agent
               </button>
             )}
+            <button
+              onClick={() => void handleToggleAvailability()}
+              disabled={availabilitySaving}
+              className={`w-full px-3 py-2.5 rounded-[10px] text-[12px] font-700 border cursor-pointer transition-all text-left disabled:opacity-50 ${
+                agent.disabled === true
+                  ? 'text-emerald-300 bg-emerald-400/[0.06] border-emerald-400/[0.12] hover:bg-emerald-400/[0.1]'
+                  : 'text-amber-300 bg-amber-400/[0.06] border-amber-400/[0.12] hover:bg-amber-400/[0.1]'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {availabilitySaving
+                ? (agent.disabled === true ? 'Enabling Agent...' : 'Disabling Agent...')
+                : (agent.disabled === true ? 'Enable Agent' : 'Disable Agent')}
+            </button>
             {(onClearHistory || onDeleteAgent || onDeleteChat) && (
               <>
                 <SectionLabel>Danger Zone</SectionLabel>

package/src/components/canvas/canvas-panel.tsx

@@ -1,8 +1,11 @@
 'use client'
 
 import { useEffect, useState, useCallback } from 'react'
+import ReactMarkdown from 'react-markdown'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
+import { normalizeCanvasContent } from '@/lib/canvas-content'
+import type { CanvasContent, CanvasDocument } from '@/types'
 
 interface CanvasPanelProps {
   sessionId: string
@@ -10,86 +13,254 @@ interface CanvasPanelProps {
   onClose: () => void
 }
 
+const THEME_STYLES: Record<NonNullable<CanvasDocument['theme']>, { accent: string; chip: string }> = {
+  slate: { accent: 'text-sky-300', chip: 'bg-sky-500/10 text-sky-300 border-sky-500/20' },
+  sky: { accent: 'text-sky-300', chip: 'bg-sky-500/10 text-sky-300 border-sky-500/20' },
+  emerald: { accent: 'text-emerald-300', chip: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20' },
+  amber: { accent: 'text-amber-300', chip: 'bg-amber-500/10 text-amber-300 border-amber-500/20' },
+  rose: { accent: 'text-rose-300', chip: 'bg-rose-500/10 text-rose-300 border-rose-500/20' },
+}
+
+function toneClass(tone?: string): string {
+  switch (tone) {
+    case 'positive': return 'text-emerald-300'
+    case 'negative': return 'text-rose-300'
+    case 'warning': return 'text-amber-300'
+    default: return 'text-text'
+  }
+}
+
+function intentClass(intent?: string): string {
+  switch (intent) {
+    case 'primary': return 'bg-sky-500 text-white border-sky-400/30'
+    case 'success': return 'bg-emerald-500 text-white border-emerald-400/30'
+    case 'danger': return 'bg-rose-500 text-white border-rose-400/30'
+    default: return 'bg-white/[0.03] text-text-2 border-white/[0.08]'
+  }
+}
+
+function StructuredCanvasView({ document }: { document: CanvasDocument }) {
+  const theme = THEME_STYLES[document.theme || 'slate']
+  return (
+    <div className="h-full overflow-y-auto bg-bg px-5 py-5">
+      <div className="max-w-4xl mx-auto space-y-4">
+        {(document.title || document.subtitle) && (
+          <div className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+            {document.title && <h2 className={`font-display text-[22px] font-700 tracking-[-0.03em] ${theme.accent}`}>{document.title}</h2>}
+            {document.subtitle && <p className="mt-1 text-[13px] text-text-3/70">{document.subtitle}</p>}
+          </div>
+        )}
+
+        {document.blocks.map((block, index) => {
+          if (block.type === 'markdown') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="max-w-none text-[14px] leading-6 text-text-2/90 [&_h1]:font-display [&_h1]:text-[24px] [&_h1]:text-text [&_h2]:font-display [&_h2]:text-[20px] [&_h2]:text-text [&_h3]:font-display [&_h3]:text-[18px] [&_h3]:text-text [&_p]:my-3 [&_ul]:my-3 [&_ul]:pl-5 [&_li]:my-1 [&_code]:rounded [&_code]:bg-black/[0.2] [&_code]:px-1.5 [&_code]:py-0.5">
+                  <ReactMarkdown>{block.markdown}</ReactMarkdown>
+                </div>
+              </section>
+            )
+          }
+
+          if (block.type === 'metrics') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
+                  {block.items.map((item) => (
+                    <div key={item.label} className="rounded-[14px] border border-white/[0.08] bg-black/[0.14] px-4 py-3">
+                      <div className="text-[11px] uppercase tracking-[0.08em] text-text-3/60">{item.label}</div>
+                      <div className={`mt-1 text-[24px] font-display font-700 tracking-[-0.03em] ${toneClass(item.tone)}`}>{item.value}</div>
+                      {item.detail && <div className="mt-1 text-[12px] text-text-3/65">{item.detail}</div>}
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )
+          }
+
+          if (block.type === 'cards') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {block.items.map((item) => (
+                    <div key={item.title} className="rounded-[14px] border border-white/[0.08] bg-black/[0.14] px-4 py-3">
+                      <div className={`text-[15px] font-700 ${toneClass(item.tone)}`}>{item.title}</div>
+                      {item.body && <p className="mt-2 text-[13px] leading-6 text-text-2/85 whitespace-pre-wrap">{item.body}</p>}
+                      {item.meta && <div className="mt-3 text-[11px] text-text-3/60">{item.meta}</div>}
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )
+          }
+
+          if (block.type === 'table') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4 overflow-hidden">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="overflow-x-auto rounded-[12px] border border-white/[0.08]">
+                  <table className="min-w-full text-left text-[13px]">
+                    <thead className="bg-black/[0.18]">
+                      <tr>
+                        {block.table.columns.map((column) => (
+                          <th key={column} className="px-3 py-2.5 font-700 text-text-2">{column}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {block.table.rows.map((row, rowIndex) => (
+                        <tr key={rowIndex} className="border-t border-white/[0.06]">
+                          {row.map((cell, cellIndex) => (
+                            <td key={cellIndex} className="px-3 py-2.5 text-text-3/80">{cell == null ? '—' : String(cell)}</td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                {block.table.caption && <div className="mt-2 text-[11px] text-text-3/60">{block.table.caption}</div>}
+              </section>
+            )
+          }
+
+          if (block.type === 'code') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <pre className="overflow-x-auto rounded-[14px] border border-white/[0.08] bg-black/[0.25] p-4 text-[12px] leading-6 text-text-2">
+                  <code>{block.code}</code>
+                </pre>
+                {block.language && <div className={`mt-2 inline-flex rounded-full border px-2 py-1 text-[10px] font-700 uppercase tracking-[0.08em] ${theme.chip}`}>{block.language}</div>}
+              </section>
+            )
+          }
+
+          if (block.type === 'actions') {
+            return (
+              <section key={`${block.type}-${index}`} className="rounded-[18px] border border-white/[0.08] bg-white/[0.03] px-5 py-4">
+                {block.title && <div className={`mb-3 text-[11px] font-700 uppercase tracking-[0.08em] ${theme.accent}`}>{block.title}</div>}
+                <div className="flex flex-wrap gap-2">
+                  {block.items.map((item) => (
+                    item.href ? (
+                      <a
+                        key={item.label}
+                        href={item.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className={`inline-flex items-center rounded-[12px] border px-3 py-2 text-[12px] font-700 transition-all hover:brightness-110 ${intentClass(item.intent)}`}
+                      >
+                        {item.label}
+                      </a>
+                    ) : (
+                      <div key={item.label} className={`inline-flex items-center rounded-[12px] border px-3 py-2 text-[12px] font-700 ${intentClass(item.intent)}`}>
+                        {item.label}
+                      </div>
+                    )
+                  ))}
+                </div>
+                {block.items.some((item) => item.note) && (
+                  <div className="mt-3 space-y-1">
+                    {block.items.filter((item) => item.note).map((item) => (
+                      <div key={`${item.label}-note`} className="text-[11px] text-text-3/60">{item.label}: {item.note}</div>
+                    ))}
+                  </div>
+                )}
+              </section>
+            )
+          }
+
+          return null
+        })}
+      </div>
+    </div>
+  )
+}
+
 export function CanvasPanel({ sessionId, agentName, onClose }: CanvasPanelProps) {
-  const [content, setContent] = useState<string | null>(null)
+  const [content, setContent] = useState<CanvasContent>(null)
+  const [loaded, setLoaded] = useState(false)
 
   const loadCanvas = useCallback(async () => {
     try {
-      const res = await api<{ content: string | null }>('GET', `/canvas/${sessionId}`)
-      setContent(res.content)
-    } catch { /* ignore */ }
+      const res = await api<{ content: CanvasContent }>('GET', `/canvas/${sessionId}`)
+      setContent(normalizeCanvasContent(res.content))
+    } catch {
+      setContent(null)
+    } finally {
+      setLoaded(true)
+    }
   }, [sessionId])
 
-  useEffect(() => { loadCanvas() }, [loadCanvas]) // eslint-disable-line react-hooks/set-state-in-effect
+  useEffect(() => { loadCanvas() }, [loadCanvas])
   useWs(`canvas:${sessionId}`, loadCanvas, 10_000)
 
-  if (!content) return (
-    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
-          <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
+  const header = (
+    <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
+        <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
+      </svg>
+      <span className="text-[13px] font-600 text-text flex-1 truncate">
+        Canvas{agentName ? ` — ${agentName}` : ''}
+      </span>
+      <button
+        onClick={loadCanvas}
+        className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+        title="Refresh"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
         </svg>
-        <span className="text-[13px] font-600 text-text flex-1 truncate">
-          Canvas{agentName ? ` — ${agentName}` : ''}
-        </span>
-        <button
-          onClick={onClose}
-          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
-          title="Close canvas"
-          aria-label="Close canvas"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <div className="flex-1 flex items-center justify-center">
-        <div className="text-center">
-          <div className="w-8 h-8 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin mx-auto mb-3" />
-          <span className="text-[13px] text-text-3">Loading canvas...</span>
-        </div>
-      </div>
+      </button>
+      <button
+        onClick={onClose}
+        className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
+        title="Close canvas"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
     </div>
   )
 
-  return (
-    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
-      {/* Toolbar */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
-          <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8" /><path d="M12 17v4" />
-        </svg>
-        <span className="text-[13px] font-600 text-text flex-1 truncate">
-          Canvas{agentName ? ` — ${agentName}` : ''}
-        </span>
-        <button
-          onClick={loadCanvas}
-          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
-          title="Refresh"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-          </svg>
-        </button>
-        <button
-          onClick={onClose}
-          className="p-1.5 rounded-[6px] hover:bg-white/[0.06] transition-colors cursor-pointer border-none bg-transparent text-text-3 hover:text-text-2"
-          title="Close canvas"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
+  if (!loaded) {
+    return (
+      <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
+        {header}
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="w-8 h-8 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin mx-auto mb-3" />
+            <span className="text-[13px] text-text-3">Loading canvas...</span>
+          </div>
+        </div>
       </div>
+    )
+  }
 
-      {/* Sandboxed iframe */}
+  return (
+    <div className="flex flex-col h-full border-l border-white/[0.06] bg-bg min-w-[400px]">
+      {header}
       <div className="flex-1 overflow-hidden">
-        <iframe
-          sandbox="allow-scripts allow-same-origin"
-          srcDoc={content}
-          className="w-full h-full border-none bg-white"
-          title="Agent Canvas"
-        />
+        {!content ? (
+          <div className="h-full flex items-center justify-center text-center px-6">
+            <div>
+              <div className="text-[14px] font-600 text-text-2">No canvas content yet</div>
+              <p className="mt-1 text-[12px] text-text-3/60">Agents can present HTML or structured documents here.</p>
+            </div>
+          </div>
+        ) : typeof content === 'string' ? (
+          <iframe
+            sandbox="allow-scripts allow-same-origin"
+            srcDoc={content}
+            className="w-full h-full border-none bg-white"
+            title="Agent Canvas"
+          />
+        ) : (
+          <StructuredCanvasView document={content} />
+        )}
       </div>
     </div>
   )

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

@@ -1,10 +1,12 @@
 'use client'
 
+import { useState } from 'react'
 import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
 import type { Session } from '@/types'
 import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { ConnectorPlatformBadge, getSessionConnector } from '@/components/shared/connector-platform-icon'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { toast } from 'sonner'
@@ -44,18 +46,26 @@ export function ChatCard({ session, active, onClick }: Props) {
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
   const lastReadTimestamps = useAppStore((s) => s.lastReadTimestamps)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [deleting, setDeleting] = useState(false)
   const isTyping = streamingSessionId === session.id
 
-  const handleDelete = async (e: React.MouseEvent) => {
+  const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation()
-    if (!confirm(`Delete chat session "${session.name}"?`)) return
-    
+    setConfirmDelete(true)
+  }
+
+  const handleDelete = async () => {
+    setDeleting(true)
     try {
       await api('DELETE', `/chats/${session.id}`)
       removeSession(session.id)
       toast.success('Session deleted')
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete session')
+    } finally {
+      setDeleting(false)
+      setConfirmDelete(false)
     }
   }
 
@@ -84,14 +94,15 @@ export function ChatCard({ session, active, onClick }: Props) {
     && agent?.heartbeatEnabled !== false
 
   return (
-    <div
-      onClick={onClick}
-      className={`group/card relative py-3.5 px-4 cursor-pointer rounded-[14px]
-        transition-all duration-200 active:scale-[0.98]
-        ${active
-          ? 'bg-accent-soft border border-accent-bright/10'
-          : 'bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03]'}`}
-    >
+    <>
+      <div
+        onClick={onClick}
+        className={`group/card relative py-3.5 px-4 cursor-pointer rounded-[14px]
+          transition-all duration-200 active:scale-[0.98]
+          ${active
+            ? 'bg-accent-soft border border-accent-bright/10'
+            : 'bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03]'}`}
+      >
       {active && (
         <div className="absolute left-0 top-3.5 bottom-3.5 w-[2.5px] rounded-full bg-accent-bright" />
       )}
@@ -134,7 +145,7 @@ export function ChatCard({ session, active, onClick }: Props) {
           {timeAgo(session.lastActiveAt)}
         </span>
         <button
-          onClick={handleDelete}
+          onClick={handleDeleteClick}
           className="shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150
             text-text-3 hover:text-red-400 p-0.5 -mr-1 cursor-pointer bg-transparent border-none"
           title="Delete chat"
@@ -163,6 +174,18 @@ export function ChatCard({ session, active, onClick }: Props) {
       ) : (
         <div className="text-[13px] text-text-2/50 truncate mt-1 leading-relaxed">{preview}</div>
       )}
-    </div>
+      </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Chat?"
+        message={`Delete chat session "${session.name}"?`}
+        confirmLabel={deleting ? 'Deleting...' : 'Delete'}
+        confirmDisabled={deleting}
+        cancelDisabled={deleting}
+        danger
+        onConfirm={() => { void handleDelete() }}
+        onCancel={() => { if (!deleting) setConfirmDelete(false) }}
+      />
+    </>
   )
 }

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

@@ -10,8 +10,8 @@ import { ChatToolToggles } from './chat-tool-toggles'
 import { api } from '@/lib/api-client'
 import {
   ConnectorPlatformIcon,
-  CONNECTOR_PLATFORM_META,
   getSessionConnector,
+  resolveConnectorPlatformMeta,
 } from '@/components/shared/connector-platform-icon'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ModelCombobox } from '@/components/shared/model-combobox'
@@ -34,6 +34,23 @@ function Tip({ label, children, side = 'bottom' }: { label: string; children: Re
   )
 }
 
+function getAgentWalletIds(agent: { walletIds?: string[]; walletId?: string | null } | null | undefined): string[] {
+  const ids = Array.isArray(agent?.walletIds)
+    ? agent.walletIds.filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+    : []
+  const legacy = typeof agent?.walletId === 'string' && agent.walletId.trim()
+    ? [agent.walletId.trim()]
+    : []
+  return [...new Set([...ids, ...legacy])]
+}
+
+function getAgentActiveWalletId(agent: { activeWalletId?: string | null; walletIds?: string[]; walletId?: string | null } | null | undefined): string | null {
+  const walletIds = getAgentWalletIds(agent)
+  if (typeof agent?.activeWalletId === 'string' && walletIds.includes(agent.activeWalletId)) return agent.activeWalletId
+  if (typeof agent?.walletId === 'string' && walletIds.includes(agent.walletId)) return agent.walletId
+  return walletIds[0] || null
+}
+
 function HeaderChip({
   children,
   title,
@@ -129,7 +146,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const loadConnectors = useAppStore((s) => s.loadConnectors)
   const agent = session.agentId ? agents[session.agentId] : null
   const connector = getSessionConnector(session, connectors)
-  const connectorMeta = connector ? CONNECTOR_PLATFORM_META[connector.platform] : null
+  const connectorMeta = connector ? resolveConnectorPlatformMeta(connector.platform) : null
   const connectorPresence = connector?.presence
   const providers = useAppStore((s) => s.providers)
   const loadProviders = useAppStore((s) => s.loadProviders)
@@ -152,8 +169,10 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const renameInputRef = useRef<HTMLInputElement>(null)
   const renameContainerRef = useRef<HTMLSpanElement>(null)
   const setWalletPanelAgentId = useAppStore((s) => s.setWalletPanelAgentId)
-  const [walletBalance, setWalletBalance] = useState<number | null>(null)
+  const [walletBalance, setWalletBalance] = useState<{ formatted: string; symbol: string; assets?: number } | null>(null)
   const [headerWidgets, setHeaderWidgets] = useState<Array<{ id: string; label: string; icon?: string }>>([])
+  const agentWalletIds = useMemo(() => getAgentWalletIds(agent), [agent])
+  const activeWalletId = useMemo(() => getAgentActiveWalletId(agent), [agent])
 
   useEffect(() => {
     api<Array<{ id: string; label: string; icon?: string }>>('GET', `/plugins/ui?type=header&sessionId=${session.id}`).then(widgets => {
@@ -162,17 +181,25 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   }, [session.id])
 
   const fetchWalletBalance = useCallback(async () => {
-    if (!agent?.walletId) {
+    if (!activeWalletId) {
       setWalletBalance(null)
       return
     }
     try {
-      const data = await api<{ balanceSol?: number }>('GET', `/wallets/${agent.walletId}`)
-      setWalletBalance(data.balanceSol ?? null)
+      const data = await api<{ balanceFormatted?: string; balanceSymbol?: string; portfolioSummary?: { nonZeroAssets?: number } }>('GET', `/wallets/${activeWalletId}`)
+      if (data.balanceFormatted && data.balanceSymbol) {
+        setWalletBalance({
+          formatted: data.balanceFormatted,
+          symbol: data.balanceSymbol,
+          assets: typeof data.portfolioSummary?.nonZeroAssets === 'number' ? data.portfolioSummary.nonZeroAssets : undefined,
+        })
+      } else {
+        setWalletBalance(null)
+      }
     } catch {
       setWalletBalance(null)
     }
-  }, [agent?.walletId])
+  }, [activeWalletId])
 
   useEffect(() => {
     void fetchWalletBalance()
@@ -237,17 +264,19 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
         title: 'Open wallets',
       }
     }
-    if (!agent.walletId) {
+    if (agentWalletIds.length === 0) {
       return {
         label: 'Create wallet',
         title: 'Create wallet',
       }
     }
     return {
-      label: walletBalance !== null ? `${walletBalance.toFixed(3)} SOL` : 'Wallet',
-      title: 'View wallet',
+      label: agentWalletIds.length > 1
+        ? (walletBalance ? `${walletBalance.formatted} ${walletBalance.symbol}${walletBalance.assets && walletBalance.assets > 1 ? ` +${walletBalance.assets - 1}` : ''} / ${agentWalletIds.length}` : `${agentWalletIds.length} wallets`)
+        : (walletBalance ? `${walletBalance.formatted} ${walletBalance.symbol}${walletBalance.assets && walletBalance.assets > 1 ? ` +${walletBalance.assets - 1}` : ''}` : 'Wallet'),
+      title: agentWalletIds.length > 1 ? 'View wallets' : 'View wallet',
     }
-  }, [agent?.id, agent?.walletId, walletBalance])
+  }, [agent?.id, agentWalletIds, walletBalance])
 
   const handleHeaderWidgetClick = (widgetId: string) => {
     if (widgetId === 'wallet-status') {
@@ -389,17 +418,16 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     setHeartbeatSaving(true)
     try {
       if (session.agentId) {
-        // Save to agent with both formats so the cascade resolves correctly
+        // Save the cadence without implicitly toggling heartbeat on.
         await api('PUT', `/agents/${session.agentId}`, {
           heartbeatInterval: formatDuration(sec),
           heartbeatIntervalSec: sec,
-          heartbeatEnabled: true,
         })
         // Clear stale session-level overrides
         await api('PUT', `/chats/${session.id}`, { heartbeatIntervalSec: null, heartbeatEnabled: null })
         await Promise.all([loadAgents(), loadSessions()])
       } else {
-        await api('PUT', `/chats/${session.id}`, { heartbeatIntervalSec: sec, heartbeatEnabled: true })
+        await api('PUT', `/chats/${session.id}`, { heartbeatIntervalSec: sec })
         await loadSessions()
       }
     } finally {
@@ -960,7 +988,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                   </button>
                   {Array.from(connectorSources.entries()).map(([cid, info]) => {
                     const active = connectorFilter === cid
-                    const meta = CONNECTOR_PLATFORM_META[info.platform as keyof typeof CONNECTOR_PLATFORM_META]
+                    const meta = resolveConnectorPlatformMeta(info.platform)
                     return (
                       <button
                         key={cid}
@@ -969,7 +997,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                           active ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:bg-white/[0.06]'
                         }`}
                       >
-                        <ConnectorPlatformIcon platform={info.platform as keyof typeof CONNECTOR_PLATFORM_META} size={12} />
+                        <ConnectorPlatformIcon platform={info.platform} size={12} />
                         {info.connectorName || meta?.label || info.platform}
                       </button>
                     )