@swarmclawai/swarmclaw 0.6.8 → 0.7.0

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

@@ -5,7 +5,6 @@ import type { Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { IconButton } from '@/components/shared/icon-button'
-import { UsageBadge } from '@/components/shared/usage-badge'
 import { ChatToolToggles } from './chat-tool-toggles'
 import { api } from '@/lib/api-client'
 import {
@@ -17,6 +16,7 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ModelCombobox } from '@/components/shared/model-combobox'
 import { toast } from 'sonner'
 import type { ProviderType } from '@/types'
+import { copyTextToClipboard } from '@/lib/clipboard'
 import { useWs } from '@/hooks/use-ws'
 
 function shortPath(p: string): string {
@@ -67,7 +67,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const toggleSound = useChatStore((s) => s.toggleSound)
   const debugOpen = useChatStore((s) => s.debugOpen)
   const setDebugOpen = useChatStore((s) => s.setDebugOpen)
-  const lastUsage = useChatStore((s) => s.lastUsage)
   const agentStatus = useChatStore((s) => s.agentStatus)
   const agents = useAppStore((s) => s.agents)
   const tasks = useAppStore((s) => s.tasks)
@@ -109,18 +108,50 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const renameContainerRef = useRef<HTMLSpanElement>(null)
   const setWalletPanelAgentId = useAppStore((s) => s.setWalletPanelAgentId)
   const [walletBalance, setWalletBalance] = useState<number | null>(null)
+  const [headerWidgets, setHeaderWidgets] = useState<Array<{ id: string; label: string; icon?: string }>>([])
+
+  useEffect(() => {
+    api<Array<{ id: string; label: string; icon?: string }>>('GET', `/plugins/ui?type=header&sessionId=${session.id}`).then(widgets => {
+      if (Array.isArray(widgets)) setHeaderWidgets(widgets)
+    }).catch(() => {})
+  }, [session.id])
 
   const fetchWalletBalance = useCallback(async () => {
-    if (!agent?.walletId) { setWalletBalance(null); return }
+    if (!agent?.walletId) {
+      setWalletBalance(null)
+      return
+    }
     try {
       const data = await api<{ balanceSol?: number }>('GET', `/wallets/${agent.walletId}`)
       setWalletBalance(data.balanceSol ?? null)
-    } catch { setWalletBalance(null) }
+    } catch {
+      setWalletBalance(null)
+    }
   }, [agent?.walletId])
 
-  useEffect(() => { fetchWalletBalance() }, [fetchWalletBalance])
+  useEffect(() => {
+    void fetchWalletBalance()
+  }, [fetchWalletBalance])
   useWs('wallets', fetchWalletBalance)
 
+
+  const visibleHeaderWidgets = useMemo(() => {
+    const seen = new Set<string>()
+    return headerWidgets.filter((widget) => {
+      const key = widget.id || widget.label
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+  }, [headerWidgets])
+
+  const handleHeaderWidgetClick = (widgetId: string) => {
+    if (widgetId === 'wallet-status') {
+      if (agent?.id) setWalletPanelAgentId(agent.id)
+      setActiveView('wallets')
+    }
+  }
+
   // Find linked task for this session
   const linkedTask = useMemo(() => {
     return Object.values(tasks).find((t) => t.sessionId === session.id)
@@ -156,9 +187,11 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
 
   const handleCopySessionId = () => {
     if (!resumeHandle) return
-    navigator.clipboard.writeText(resumeHandle.command)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    void copyTextToClipboard(resumeHandle.command).then((copiedCommand) => {
+      if (!copiedCommand) return
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
   }
 
   const handleDismissResumeHandle = async (e: React.MouseEvent) => {
@@ -606,21 +639,37 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
           {/* Metadata tray: wallet · model · path · status */}
           <div className="flex items-center gap-1.5 min-w-0 overflow-hidden">
             <span className="text-text-3/10 text-[10px] select-none shrink-0">/</span>
-            {walletBalance !== null && (
-              <>
+            {visibleHeaderWidgets.map((widget) => {
+              const actionable = widget.id === 'wallet-status'
+              const walletLabel = walletBalance !== null
+                ? `${walletBalance.toFixed(3)} SOL`
+                : (widget.label || 'Wallet')
+              return (
                 <button
+                  key={widget.id}
                   type="button"
-                  onClick={() => { setWalletPanelAgentId(agent!.id); setActiveView('wallets') }}
-                  className="inline-flex items-center gap-1 shrink-0 bg-transparent border-none p-0.5 rounded-[4px] cursor-pointer text-[11px] text-text-3/45 font-mono hover:text-text-3/70 hover:bg-white/[0.04] transition-colors"
-                  title="View wallet"
+                  onClick={actionable ? () => handleHeaderWidgetClick(widget.id) : undefined}
+                  className={`inline-flex items-center gap-1 shrink-0 bg-transparent border-none p-0.5 rounded-[4px] text-[11px] font-mono transition-colors ${
+                    actionable ? 'cursor-pointer text-text-3/45 hover:text-text-3/70 hover:bg-white/[0.04]' : 'cursor-default text-text-3/55'
+                  }`}
+                  title={actionable ? 'View wallet' : widget.label}
                 >
-                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                    <rect x="2" y="6" width="20" height="14" rx="2" /><path d="M22 10H18a2 2 0 0 0 0 4h4" />
-                  </svg>
-                  {walletBalance.toFixed(3)} SOL
+                  {actionable ? (
+                    <>
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <rect x="2" y="6" width="20" height="14" rx="2" />
+                        <path d="M22 10H18a2 2 0 0 0 0 4h4" />
+                      </svg>
+                      {walletLabel}
+                    </>
+                  ) : (
+                    widget.label
+                  )}
                 </button>
-                <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
-              </>
+              )
+            })}
+            {visibleHeaderWidgets.length > 0 && (
+              <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
             )}
             {modelName && (
               <div className="relative shrink-0" ref={modelSwitcherRef}>
@@ -668,12 +717,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 )}
               </div>
             )}
-            {lastUsage && !streaming && (
-              <>
-                <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
-                <UsageBadge {...lastUsage} />
-              </>
-            )}
             <button
               type="button"
               onClick={() => { api('POST', '/files/open', { path: session.cwd }).catch(() => {}) }}
@@ -855,6 +898,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 <span className={`w-1.5 h-1.5 rounded-full ${missionPaused ? 'bg-amber-300' : 'bg-emerald-400'}`} />
                 {missionPaused ? 'Paused' : 'Live'}
               </button>
+
               <button
                 onClick={handleToggleMissionMode}
                 disabled={mainLoopSaving}

package/src/components/chat/chat-tool-toggles.tsx

@@ -8,8 +8,8 @@ import type { ToolDefinition } from '@/lib/tool-definitions'
 import type { Session } from '@/types'
 
 const TOOL_GROUPS: { label: string; tools: ToolDefinition[] }[] = [
-  { label: 'Tools', tools: AVAILABLE_TOOLS },
-  { label: 'Platform', tools: PLATFORM_TOOLS },
+  { label: 'Plugins', tools: AVAILABLE_TOOLS },
+  { label: 'Platform Plugins', tools: PLATFORM_TOOLS },
 ]
 
 const TOTAL_TOOL_COUNT = AVAILABLE_TOOLS.length + PLATFORM_TOOLS.length

package/src/components/chat/code-block.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useCallback, useState, type ReactNode } from 'react'
+import { copyTextToClipboard } from '@/lib/clipboard'
 
 function extractText(node: ReactNode): string {
   if (typeof node === 'string') return node
@@ -29,7 +30,8 @@ export function CodeBlock({ children, className }: Props) {
   const getText = useCallback(() => extractText(children), [children])
 
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(getText()).then(() => {
+    void copyTextToClipboard(getText()).then((copiedText) => {
+      if (!copiedText) return
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     })

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import type { PendingExecApproval, ExecApprovalDecision } from '@/types'
 import { useApprovalStore } from '@/stores/use-approval-store'
 
@@ -9,13 +10,19 @@ interface Props {
 
 export function ExecApprovalCard({ approval }: Props) {
   const resolveApproval = useApprovalStore((s) => s.resolveApproval)
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 5000)
+    return () => clearInterval(timer)
+  }, [])
 
   const handleResolve = (decision: ExecApprovalDecision) => {
     resolveApproval(approval.id, decision)
   }
 
   const alreadyResolved = approval.error?.includes('Already resolved') ?? false
-  const expired = approval.expiresAtMs < Date.now()
+  const expired = approval.expiresAtMs < now
   const disabled = !!approval.resolving || expired || alreadyResolved
 
   return (

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

@@ -6,6 +6,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import type { Message } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
 import { AiAvatar } from '@/components/shared/avatar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { CodeBlock } from './code-block'
@@ -17,6 +18,7 @@ import { FilePathChip, FILE_PATH_RE, DIR_PATH_RE } from './file-path-chip'
 import { TransferAgentPicker } from './transfer-agent-picker'
 import { DelegationBanner, DelegationSourceBanner, TaskCompletionCard, parseTaskCompletion } from './delegation-banner'
 import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
+import { copyTextToClipboard } from '@/lib/clipboard'
 
 /** Parse delegation-source metadata prefix from system messages */
 const DELEGATION_SOURCE_RE = /^\[delegation-source:([^:]*):([^:]*):([^\]]*)\]/
@@ -151,6 +153,33 @@ interface Props {
 export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, agentAvatarUrl, agentName, isLast, onRetry, messageIndex, onToggleBookmark, onEditResend, onFork, onTransferToAgent, momentOverlay }: Props) {
   const isUser = message.role === 'user'
   const isHeartbeat = !isUser && (message.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(message.text || ''))
+  const isPluginUI = !isUser && message.kind === 'plugin-ui'
+  const scaffoldRequest = useMemo(() => {
+    if (isUser) return null
+    try {
+      const data = JSON.parse(message.text)
+      if (data.type === 'plugin_scaffold_request') return data
+    } catch { /* ignore */ }
+    return null
+  }, [message.text, isUser])
+
+  const installRequest = useMemo(() => {
+    if (isUser) return null
+    try {
+      const data = JSON.parse(message.text)
+      if (data.type === 'plugin_install_request') return data
+    } catch { /* ignore */ }
+    return null
+  }, [message.text, isUser])
+
+  const walletRequest = useMemo(() => {
+    if (isUser) return null
+    try {
+      const data = JSON.parse(message.text)
+      if (data.type === 'plugin_wallet_transfer_request') return data
+    } catch { /* ignore */ }
+    return null
+  }, [message.text, isUser])
   const currentUser = useAppStore((s) => s.currentUser)
   const [copied, setCopied] = useState(false)
   const [heartbeatExpanded, setHeartbeatExpanded] = useState(false)
@@ -217,7 +246,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
   const displayText = delegationSource ? delegationSource.rest : message.text
 
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(message.text).then(() => {
+    void copyTextToClipboard(message.text).then((copiedText) => {
+      if (!copiedText) return
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     })
@@ -226,7 +256,6 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
   return (
     <div
       className={`group ${isUser ? 'flex flex-col items-end' : 'flex flex-col items-start relative pl-[44px]'}`}
-      style={{ animation: `${isUser ? 'msg-in-right' : 'msg-in-left'} 0.35s cubic-bezier(0.16, 1, 0.3, 1)` }}
     >
       {/* Avatar on spine (assistant) */}
       {!isUser && (
@@ -447,7 +476,138 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       <div className={`${isStructured ? 'max-w-[92%] md:max-w-[85%]' : 'max-w-[85%] md:max-w-[72%]'} ${isUser ? 'bubble-user px-5 py-3.5' : isHeartbeat ? 'bubble-ai px-4 py-3' : 'bubble-ai px-5 py-3.5'}`}>
         {renderAttachments(message)}
 
-        {isHeartbeat ? (
+        {walletRequest ? (
+          <div className="flex flex-col gap-3 p-4 rounded-[18px] bg-sky-500/[0.03] border border-sky-500/20 shadow-[0_0_20px_rgba(14,165,233,0.05)]">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="w-5 h-5 rounded-full bg-sky-500/20 flex items-center justify-center text-sky-400">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+                </svg>
+              </div>
+              <span className="text-[11px] font-700 uppercase tracking-wider text-sky-400/80">Wallet Transfer Request</span>
+            </div>
+            <p className="text-[13px] text-text-2/90 leading-relaxed">{walletRequest.message}</p>
+            <div className="p-3 rounded-[12px] bg-black/40 border border-white/5 flex flex-col gap-2">
+              <div className="flex justify-between items-center">
+                <span className="text-[11px] text-text-3/60 font-600 uppercase">Amount</span>
+                <span className="text-[13px] font-700 text-sky-400">{walletRequest.amountSol} SOL</span>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-[11px] text-text-3/60 font-600 uppercase">To Address</span>
+                <span className="text-[11px] font-mono text-text-2/70 break-all">{walletRequest.toAddress}</span>
+              </div>
+              {walletRequest.memo && (
+                <div className="flex flex-col gap-1 border-t border-white/5 pt-2">
+                  <span className="text-[11px] text-text-3/60 font-600 uppercase">Memo</span>
+                  <span className="text-[12px] text-text-3/80 italic">&quot;{walletRequest.memo}&quot;</span>
+                </div>
+              )}
+            </div>
+            <div className="flex gap-2 mt-1">
+              <button
+                onClick={() => useChatStore.getState().sendMessage(`I approve this transfer of ${walletRequest.amountSol} SOL to ${walletRequest.toAddress}. Proceed with wallet_tool and set approved=true.`)}
+                className="px-4 py-2 rounded-[12px] bg-sky-500 text-black text-[13px] font-700 hover:bg-sky-400 transition-all active:scale-[0.98]"
+              >
+                Approve & Send
+              </button>
+              <button
+                onClick={() => useChatStore.getState().sendMessage(`I do not approve this transaction. Cancel it.`)}
+                className="px-4 py-2 rounded-[12px] bg-white/[0.05] hover:bg-white/[0.1] text-text-2 text-[13px] font-600 transition-all border border-white/10"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+        ) : installRequest ? (
+          <div className="flex flex-col gap-3 p-4 rounded-[18px] bg-emerald-500/[0.03] border border-emerald-500/20 shadow-[0_0_20px_rgba(16,185,129,0.05)]">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+              </div>
+              <span className="text-[11px] font-700 uppercase tracking-wider text-emerald-400/80">Plugin Install Request</span>
+            </div>
+            <p className="text-[13px] text-text-2/90 leading-relaxed">{installRequest.message}</p>
+            <div className="p-3 rounded-[12px] bg-black/40 border border-white/5 flex flex-col gap-1">
+              <div className="text-[11px] text-text-3/60 font-600 uppercase tracking-tight">Source URL</div>
+              <div className="text-[12px] font-mono text-emerald-200/70 truncate">{installRequest.url}</div>
+            </div>
+            <div className="flex gap-2 mt-1">
+              <button
+                onClick={() => useChatStore.getState().sendMessage(`I approve the installation of the plugin from ${installRequest.url}. Proceed with install_request and set approved=true.`)}
+                className="px-4 py-2 rounded-[12px] bg-emerald-500 text-black text-[13px] font-700 hover:bg-emerald-400 transition-all active:scale-[0.98]"
+              >
+                Approve & Install
+              </button>
+              <button
+                onClick={() => useChatStore.getState().sendMessage(`I do not approve this plugin installation. Please stop.`)}
+                className="px-4 py-2 rounded-[12px] bg-white/[0.05] hover:bg-white/[0.1] text-text-2 text-[13px] font-600 transition-all border border-white/10"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+        ) : scaffoldRequest ? (
+          <div className="flex flex-col gap-3 p-4 rounded-[18px] bg-amber-500/[0.03] border border-amber-500/20 shadow-[0_0_20px_rgba(245,158,11,0.05)]">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="w-5 h-5 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-400">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+                </svg>
+              </div>
+              <span className="text-[11px] font-700 uppercase tracking-wider text-amber-400/80">Plugin Creation Request</span>
+            </div>
+            <p className="text-[13px] text-text-2/90 leading-relaxed">{scaffoldRequest.message}</p>
+            <div className="p-3 rounded-[12px] bg-black/40 border border-white/5">
+              <div className="text-[11px] font-mono text-text-3/60 mb-2 border-b border-white/5 pb-1">filename: {scaffoldRequest.filename}</div>
+              <div className="text-[12px] font-mono text-amber-200/70 max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all">
+                {scaffoldRequest.code}
+              </div>
+            </div>
+            <div className="flex gap-2 mt-1">
+              <button
+                onClick={() => useChatStore.getState().sendMessage(`I approve the creation of the plugin ${scaffoldRequest.filename}. Proceed with scaffold and set approved=true.`)}
+                className="px-4 py-2 rounded-[12px] bg-amber-500 text-black text-[13px] font-700 hover:bg-amber-400 transition-all active:scale-[0.98]"
+              >
+                Approve & Install
+              </button>
+              <button
+                onClick={() => useChatStore.getState().sendMessage(`I do not approve the creation of this plugin. Please find another way or stop.`)}
+                className="px-4 py-2 rounded-[12px] bg-white/[0.05] hover:bg-white/[0.1] text-text-2 text-[13px] font-600 transition-all border border-white/10"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+        ) : isPluginUI ? (
+          <div className="flex flex-col gap-2 p-4 rounded-[18px] bg-emerald-500/[0.03] border border-emerald-500/10 shadow-[0_0_20px_rgba(16,185,129,0.05)]">
+            <div className="flex items-center gap-2 mb-2">
+              <div className="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#10B981" strokeWidth="2.5">
+                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+                </svg>
+              </div>
+              <span className="text-[11px] font-700 uppercase tracking-wider text-emerald-400/80">Plugin UI Extension</span>
+            </div>
+            <div className="text-[14px] text-text-2/90 leading-relaxed">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.text}</ReactMarkdown>
+            </div>
+            <div className="flex gap-2 mt-2">
+              {tryParseJson(message.text)?.actions ? (tryParseJson(message.text)!.actions as Array<{ id: string; href: string; label: string }>).map((action) => (
+                <button
+                  key={action.id}
+                  onClick={() => window.open(action.href, '_blank')}
+                  className="px-3 py-1.5 rounded-[10px] bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 text-[11px] font-600 transition-all border border-emerald-500/10"
+                >
+                  {action.label}
+                </button>
+              )) : null}
+            </div>
+          </div>
+        ) : isHeartbeat ? (
           <div className="flex flex-col gap-2">
             <button
               type="button"
@@ -660,7 +820,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       )}
 
       {/* Action buttons */}
-      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
+      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-all duration-200 translate-y-2 md:group-hover:translate-y-0 ${isUser ? 'justify-end' : ''}`}>
         <button
           onClick={handleCopy}
           aria-label="Copy message"

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

@@ -12,6 +12,7 @@ import { ThinkingIndicator } from './thinking-indicator'
 import { SuggestionsBar } from './suggestions-bar'
 import { ExecApprovalCard } from './exec-approval-card'
 import { TaskApprovalCard } from './task-approval-card'
+import { SessionApprovalCard } from './session-approval-card'
 import { HeartbeatMoment, ActivityMoment, isNotableTool } from './activity-moment'
 import { useApprovalStore } from '@/stores/use-approval-store'
 import { useWs } from '@/hooks/use-ws'
@@ -512,7 +513,14 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
             }
 
             return (
-              <div key={`${msg.time}-${i}`} data-message-index={i}>
+              <div
+                key={`${sessionId}-${msg.time}-${i}`}
+                data-message-index={i}
+                style={{
+                  animation: `${msg.role === 'user' ? 'msg-in-right' : 'msg-in-left'} 0.4s var(--ease-spring) both`,
+                  animationDelay: `${Math.min(i * 0.05, 0.4)}s`
+                }}
+              >
                 {showDateSep && (
                   <div className="flex items-center gap-4 py-2 mb-2">
                     <div className="flex-1 h-px bg-white/[0.06]" />
@@ -576,17 +584,32 @@ function ApprovalCards({ agentId }: { agentId?: string | null }) {
   const approvals = useApprovalStore((s) => s.approvals)
   const tasks = useAppStore((s) => s.tasks)
   const sessionId = useAppStore((s) => s.currentSessionId)
+  const serverApprovals = useAppStore((s) => s.approvals)
 
   const cards = Object.values(approvals).filter((a) => !agentId || a.agentId === agentId)
-  
+
   // Find tasks associated with this session that need approval
   const pendingTasks = Object.values(tasks).filter((t) => {
     if (!t.pendingApproval) return false
-    // Show if matches the current session OR the current agent
     return t.sessionId === sessionId || (agentId && t.agentId === agentId)
   })
 
-  if (!cards.length && !pendingTasks.length) return null
+  // Server-side approvals (tool_access, wallet, plugin) matching this session/agent
+  // Exclude any that overlap with task-based approvals to prevent duplicates
+  const pendingTaskIds = new Set(pendingTasks.map((t) => t.id))
+  const sessionApprovalCards = Object.values(serverApprovals).filter((a) => {
+    if (a.status !== 'pending') return false
+    if (a.category === 'task_tool') return false // Already shown via TaskApprovalCard
+    if (a.category === 'tool_access') return false // Handled inline by ToolRequestBanner (with auto-continue)
+    if (a.taskId && pendingTaskIds.has(a.taskId)) return false // Dedupe with task card
+    return a.sessionId === sessionId || (agentId && a.agentId === agentId)
+  })
+
+  if (!cards.length && !pendingTasks.length && !sessionApprovalCards.length) return null
+
+  const handleSessionApprovalResolved = () => {
+    useAppStore.getState().loadApprovals()
+  }
 
   return (
     <div className="flex flex-col gap-2">
@@ -596,6 +619,9 @@ function ApprovalCards({ agentId }: { agentId?: string | null }) {
       {pendingTasks.map((t) => (
         <TaskApprovalCard key={t.id} task={t} />
       ))}
+      {sessionApprovalCards.map((a) => (
+        <SessionApprovalCard key={a.id} approval={a} onResolved={handleSessionApprovalResolved} />
+      ))}
     </div>
   )
 }

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

@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react'
+import type { ApprovalRequest } from '@/types'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import { toast } from 'sonner'
+import { getApprovalPayload, getApprovalTitle } from '@/lib/approval-display'
+
+interface Props {
+  approval: ApprovalRequest
+  onResolved?: () => void
+}
+
+export function SessionApprovalCard({ approval, onResolved }: Props) {
+  const [resolving, setResolving] = useState(false)
+  const loadApprovals = useAppStore((s) => s.loadApprovals)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+
+  const handleResolve = async (approved: boolean) => {
+    setResolving(true)
+    try {
+      await api('POST', '/approvals', { id: approval.id, approved })
+      toast.success(approved ? 'Action approved' : 'Action rejected')
+      await Promise.all([loadApprovals(), loadSessions()])
+      onResolved?.()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to submit decision')
+    } finally {
+      setResolving(false)
+    }
+  }
+
+  const payload = getApprovalPayload(approval)
+  const title = getApprovalTitle(approval)
+
+  return (
+    <div className="my-2 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] p-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-5 h-5 rounded-full bg-amber-500/20 flex items-center justify-center">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-amber-400">
+            <path d="M12 9v2m0 4h.01" />
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          </svg>
+        </div>
+        <span className="text-[12px] font-700 text-amber-400 uppercase tracking-wider">Approval Required</span>
+      </div>
+
+      <p className="text-[13px] text-text-2 mb-2 font-600">{title}</p>
+      {approval.description && (
+        <p className="text-[12px] text-text-3/90 mb-3">{approval.description}</p>
+      )}
+
+      <div className="bg-black/30 rounded-[10px] border border-white/[0.04] p-3 mb-4 overflow-x-auto max-h-[200px] overflow-y-auto">
+        <pre className="text-[11px] font-mono text-text-2/80 leading-relaxed whitespace-pre-wrap break-all">
+          {JSON.stringify(payload, null, 2)}
+        </pre>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => handleResolve(true)}
+          disabled={resolving}
+          className="flex-1 px-4 py-2 rounded-[10px] bg-emerald-500 text-[#000] text-[12px] font-700 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {resolving ? 'Applying...' : 'Approve'}
+        </button>
+        <button
+          onClick={() => handleResolve(false)}
+          disabled={resolving}
+          className="px-4 py-2 rounded-[10px] bg-white/[0.04] border border-white/[0.08] text-text-3 text-[12px] font-600 hover:bg-white/[0.08] active:scale-[0.98] transition-all disabled:opacity-50"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Reject
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/streaming-bubble.tsx

@@ -135,7 +135,7 @@ export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentAva
   return (
     <div
       className="flex flex-col items-start relative pl-[44px]"
-      style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}
+      style={{ animation: 'msg-in-left 0.4s var(--ease-spring) both' }}
     >
       <div className="absolute left-[4px] top-0 relative">
         {agentName ? <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
@@ -160,13 +160,14 @@ export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentAva
       {text && thinkingText && (
         <div className="max-w-[85%] md:max-w-[72%] mb-2">
           <details className="group rounded-[12px] border border-purple-500/15 bg-purple-500/[0.04]">
-            <summary className="flex items-center gap-2 px-3.5 py-2.5 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-purple-400/60 shrink-0 transition-transform group-open:rotate-90">
+            <summary className="flex items-center gap-2 px-3.5 py-2.5 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden relative overflow-hidden group-open:rounded-b-none">
+              <div className="absolute inset-0 bg-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity" style={{ animation: 'pulse-subtle 3s ease-in-out infinite' }} />
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-purple-400/60 shrink-0 transition-transform group-open:rotate-90 relative z-10">
                 <polyline points="9 18 15 12 9 6" />
               </svg>
-              <span className="text-[11px] font-600 text-purple-400/70 uppercase tracking-[0.05em]">Thinking</span>
+              <span className="text-[11px] font-600 text-purple-400/70 uppercase tracking-[0.05em] relative z-10">Thinking</span>
             </summary>
-            <div className="px-3.5 pb-3 pt-1 max-h-[300px] overflow-y-auto">
+            <div className="px-3.5 pb-3 pt-1 max-h-[300px] overflow-y-auto border-t border-white/[0.04]">
               <div className="text-[13px] leading-[1.6] text-text-3/70 whitespace-pre-wrap break-words">
                 {thinkingText}
               </div>