@swarmclawai/swarmclaw 0.6.7 → 0.7.0

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

@@ -11,6 +11,8 @@ import { StreamingBubble } from './streaming-bubble'
 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'
@@ -511,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]" />
@@ -573,13 +582,46 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
 
 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)
-  if (!cards.length) return null
+
+  // Find tasks associated with this session that need approval
+  const pendingTasks = Object.values(tasks).filter((t) => {
+    if (!t.pendingApproval) return false
+    return t.sessionId === sessionId || (agentId && t.agentId === agentId)
+  })
+
+  // 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">
       {cards.map((a) => (
         <ExecApprovalCard key={a.id} approval={a} />
       ))}
-    </>
+      {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/session-debug-panel.tsx

@@ -3,6 +3,8 @@
 import { useState, useEffect } from 'react'
 import type { Message } from '@/types'
 import { IconButton } from '@/components/shared/icon-button'
+import { CheckpointTimeline } from './checkpoint-timeline'
+import { useAppStore } from '@/stores/use-app-store'
 
 interface Props {
   messages: Message[]
@@ -60,23 +62,16 @@ const TYPE_COLORS: Record<EventType, string> = {
   tool_call: '#8B5CF6',
 }
 
-const TYPE_ICONS: Record<EventType, string> = {
-  user: 'U',
-  assistant: 'AI',
-  delegation: 'D',
-  agent_result: 'R',
-  system: 'S',
-  error: '!',
-  tool_call: 'T',
-}
-
 function fmtTime(ts: number) {
   return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
 }
 
 export function SessionDebugPanel({ messages, open, onClose }: Props) {
+  const [tab, setTab] = useState<'log' | 'timeline'>('log')
   const [filter, setFilter] = useState<EventType | 'all'>('all')
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null)
+  
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
 
   const events = messages.map(classifyMessage)
   const filtered = filter === 'all' ? events : events.filter((e) => e.type === filter)
@@ -105,8 +100,23 @@ export function SessionDebugPanel({ messages, open, onClose }: Props) {
           <path d="M18 20V4" />
           <path d="M6 20v-4" />
         </svg>
-        <span className="font-display text-[16px] font-600 tracking-[-0.02em] flex-1">Session Debug</span>
-        <span className="text-[12px] text-text-3 font-mono">{events.length} events</span>
+        <span className="font-display text-[16px] font-600 tracking-[-0.02em] flex-1">Session X-Ray</span>
+        
+        <div className="flex bg-white/[0.04] p-0.5 rounded-[8px] mr-2">
+           <button 
+             onClick={() => setTab('log')}
+             className={`px-3 py-1 rounded-[6px] text-[11px] font-600 transition-all ${tab === 'log' ? 'bg-white/[0.08] text-text shadow-sm' : 'text-text-3 hover:text-text-2'}`}
+           >
+             Event Log
+           </button>
+           <button 
+             onClick={() => setTab('timeline')}
+             className={`px-3 py-1 rounded-[6px] text-[11px] font-600 transition-all ${tab === 'timeline' ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:text-text-2'}`}
+           >
+             Time Travel
+           </button>
+        </div>
+
         <IconButton onClick={onClose} aria-label="Close debug panel">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
             <line x1="18" y1="6" x2="6" y2="18" />
@@ -115,82 +125,94 @@ export function SessionDebugPanel({ messages, open, onClose }: Props) {
         </IconButton>
       </div>
 
-      {/* Filters */}
-      <div className="flex gap-2 px-5 py-3 border-b border-white/[0.04] overflow-x-auto shrink-0">
-        {filters.map((f) => (
-          <button
-            key={f.id}
-            onClick={() => setFilter(f.id)}
-            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border whitespace-nowrap
-              ${filter === f.id
-                ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
-            style={{ fontFamily: 'inherit' }}
-          >
-            {f.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Event timeline */}
-      <div className="flex-1 overflow-y-auto px-5 py-4">
-        <div className="relative">
-          {/* Timeline line */}
-          <div className="absolute left-[15px] top-0 bottom-0 w-px bg-white/[0.06]" />
-
-          {filtered.map((event, i) => {
-            const color = TYPE_COLORS[event.type]
-            const expanded = expandedIdx === i
-            return (
+      {tab === 'log' ? (
+        <>
+          {/* Filters */}
+          <div className="flex gap-2 px-5 py-3 border-b border-white/[0.04] overflow-x-auto shrink-0">
+            {filters.map((f) => (
               <button
-                key={i}
-                onClick={() => setExpandedIdx(expanded ? null : i)}
-                className="w-full text-left relative pl-10 pb-4 group cursor-pointer"
+                key={f.id}
+                onClick={() => setFilter(f.id)}
+                className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border whitespace-nowrap
+                  ${filter === f.id
+                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                    : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+                style={{ fontFamily: 'inherit' }}
               >
-                {/* Dot */}
-                <div
-                  className="absolute left-[10px] top-1 w-[11px] h-[11px] rounded-full border-2"
-                  style={{ borderColor: color, backgroundColor: expanded ? color : 'transparent' }}
-                />
-
-                {/* Content */}
-                <div className="flex items-center gap-2 mb-0.5">
-                  <span className="text-[11px] font-700 uppercase tracking-wider" style={{ color }}>
-                    {event.label}
-                  </span>
-                  <span className="text-[10px] text-text-3/70 font-mono">{fmtTime(event.time)}</span>
-                </div>
-
-                <p className={`text-[12px] text-text-3 leading-[1.5] ${expanded ? 'whitespace-pre-wrap' : 'line-clamp-2'}`}>
-                  {event.detail}
-                </p>
-
-                {!expanded && event.detail.length > 150 && (
-                  <span className="text-[11px] text-accent-bright/60 mt-1 inline-block">click to expand</span>
-                )}
+                {f.label}
               </button>
-            )
-          })}
-
-          {filtered.length === 0 && (
-            <p className="text-center text-[13px] text-text-3 py-12">No events matching filter</p>
-          )}
+            ))}
+          </div>
+
+          {/* Event timeline */}
+          <div className="flex-1 overflow-y-auto px-5 py-4">
+            <div className="relative">
+              {/* Timeline line */}
+              <div className="absolute left-[15px] top-0 bottom-0 w-px bg-white/[0.06]" />
+
+              {filtered.map((event, i) => {
+                const color = TYPE_COLORS[event.type]
+                const expanded = expandedIdx === i
+                return (
+                  <button
+                    key={i}
+                    onClick={() => setExpandedIdx(expanded ? null : i)}
+                    className="w-full text-left relative pl-10 pb-4 group cursor-pointer"
+                  >
+                    {/* Dot */}
+                    <div
+                      className="absolute left-[10px] top-1 w-[11px] h-[11px] rounded-full border-2"
+                      style={{ borderColor: color, backgroundColor: expanded ? color : 'transparent' }}
+                    />
+
+                    {/* Content */}
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <span className="text-[11px] font-700 uppercase tracking-wider" style={{ color }}>
+                        {event.label}
+                      </span>
+                      <span className="text-[10px] text-text-3/70 font-mono">{fmtTime(event.time)}</span>
+                    </div>
+
+                    <p className={`text-[12px] text-text-3 leading-[1.5] ${expanded ? 'whitespace-pre-wrap' : 'line-clamp-2'}`}>
+                      {event.detail}
+                    </p>
+
+                    {!expanded && event.detail.length > 150 && (
+                      <span className="text-[11px] text-accent-bright/60 mt-1 inline-block">click to expand</span>
+                    )}
+                  </button>
+                )
+              })}
+
+              {filtered.length === 0 && (
+                <p className="text-center text-[13px] text-text-3 py-12">No events matching filter</p>
+              )}
+            </div>
+          </div>
+
+          {/* Stats bar */}
+          <div className="flex items-center gap-4 px-5 py-3 border-t border-white/[0.06] shrink-0">
+            {(['delegation', 'agent_result', 'error'] as EventType[]).map((type) => {
+              const count = events.filter((e) => e.type === type).length
+              if (!count) return null
+              return (
+                <span key={type} className="flex items-center gap-1.5 text-[11px] font-mono" style={{ color: TYPE_COLORS[type] }}>
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: TYPE_COLORS[type] }} />
+                  {count} {type === 'delegation' ? 'delegations' : type === 'agent_result' ? 'results' : 'errors'}
+                </span>
+              )
+            })}
+          </div>
+        </>
+      ) : (
+        <div className="flex-1 overflow-y-auto">
+           {currentSessionId ? (
+             <CheckpointTimeline sessionId={currentSessionId} />
+           ) : (
+             <div className="p-12 text-center text-text-3">No active session</div>
+           )}
         </div>
-      </div>
-
-      {/* Stats bar */}
-      <div className="flex items-center gap-4 px-5 py-3 border-t border-white/[0.06] shrink-0">
-        {(['delegation', 'agent_result', 'error'] as EventType[]).map((type) => {
-          const count = events.filter((e) => e.type === type).length
-          if (!count) return null
-          return (
-            <span key={type} className="flex items-center gap-1.5 text-[11px] font-mono" style={{ color: TYPE_COLORS[type] }}>
-              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: TYPE_COLORS[type] }} />
-              {count} {type === 'delegation' ? 'delegations' : type === 'agent_result' ? 'results' : 'errors'}
-            </span>
-          )
-        })}
-      </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>