@swarmclawai/swarmclaw 0.6.0 → 0.6.3

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

@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import { useWs } from '@/hooks/use-ws'
+import { api } from '@/lib/api-client'
+
+interface CanvasPanelProps {
+  sessionId: string
+  agentName?: string
+  onClose: () => void
+}
+
+export function CanvasPanel({ sessionId, agentName, onClose }: CanvasPanelProps) {
+  const [content, setContent] = useState<string | null>(null)
+
+  const loadCanvas = useCallback(async () => {
+    try {
+      const res = await api<{ content: string | null }>('GET', `/canvas/${sessionId}`)
+      setContent(res.content)
+    } catch { /* ignore */ }
+  }, [sessionId])
+
+  useEffect(() => { loadCanvas() }, [loadCanvas]) // eslint-disable-line react-hooks/set-state-in-effect
+  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" />
+        </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>
+    </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>
+      </div>
+
+      {/* Sandboxed iframe */}
+      <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"
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/chat/activity-moment.tsx

@@ -11,6 +11,8 @@ const NOTABLE_TOOLS: Record<string, { label: string; color: string; icon: 'brain
   delegate_to_claude_code: { label: 'Delegated to Claude Code', color: '#38BDF8', icon: 'delegate' },
   delegate_to_codex_cli: { label: 'Delegated to Codex', color: '#38BDF8', icon: 'delegate' },
   delegate_to_opencode_cli: { label: 'Delegated to OpenCode', color: '#38BDF8', icon: 'delegate' },
+  delegate_to_agent: { label: 'Delegating task', color: '#6366F1', icon: 'delegate' },
+  check_delegation_status: { label: 'Checking delegation', color: '#6366F1', icon: 'delegate' },
   web_search: { label: 'Searched the web', color: '#22C55E', icon: 'search' },
   connector_message_tool: { label: 'Sent a message', color: '#F97316', icon: 'message' },
 }
@@ -23,6 +25,8 @@ function extractSnippet(toolName: string, toolInput: string): string | null {
     if (toolName === 'manage_tasks' && parsed.title) return parsed.title
     if (toolName === 'manage_schedules' && parsed.name) return parsed.name
     if (toolName === 'manage_agents' && parsed.name) return parsed.name
+    if (toolName === 'delegate_to_agent' && (parsed.agentName || parsed.agentId)) return parsed.agentName || parsed.agentId
+    if (toolName === 'check_delegation_status' && parsed.agentName) return parsed.agentName
     if (toolName.startsWith('delegate_to_') && parsed.task) return parsed.task
     if (toolName === 'web_search' && parsed.query) return parsed.query
     if (toolName === 'connector_message_tool' && parsed.to) return parsed.to
@@ -104,8 +108,8 @@ export function ActivityMoment({ toolName, toolInput, onDismiss }: Props) {
       <div
         className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] shadow-lg whitespace-nowrap"
         style={{
-          background: `${config.color}18`,
-          border: `1px solid ${config.color}30`,
+          background: 'var(--card)',
+          border: `1px solid ${config.color}40`,
         }}
       >
         <MomentIcon icon={config.icon} color={config.color} />
@@ -153,8 +157,8 @@ export function HeartbeatMoment({ onDismiss }: { onDismiss: () => void }) {
       <div
         className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] shadow-lg whitespace-nowrap"
         style={{
-          background: 'rgba(34,197,94,0.1)',
-          border: '1px solid rgba(34,197,94,0.2)',
+          background: 'var(--card)',
+          border: '1px solid rgba(34,197,94,0.3)',
         }}
       >
         <svg width="11" height="11" viewBox="0 0 24 24" fill="#22c55e">

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

@@ -1,10 +1,10 @@
 'use client'
 
-import { useEffect, useCallback, useState, useRef } from 'react'
+import { useEffect, useCallback, useState, useRef, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { useChatStore } from '@/stores/use-chat-store'
-import { fetchMessages, clearMessages, deleteSession, devServer, checkBrowser, stopBrowser } from '@/lib/sessions'
+import { fetchMessages, fetchMessagesPaginated, clearMessages, deleteSession, devServer, checkBrowser, stopBrowser } from '@/lib/sessions'
 import { uploadImage } from '@/lib/upload'
 import { deleteAgent } from '@/lib/agents'
 import { useMediaQuery } from '@/hooks/use-media-query'
@@ -17,6 +17,7 @@ import { useVoiceConversation } from '@/hooks/use-voice-conversation'
 import { ChatInput } from '@/components/input/chat-input'
 import { ChatPreviewPanel } from './chat-preview-panel'
 import { InspectorPanel } from '@/components/agents/inspector-panel'
+import { HeartbeatHistoryPanel } from './heartbeat-history-panel'
 import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
@@ -47,6 +48,8 @@ export function ChatArea() {
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const inspectorOpen = useAppStore((s) => s.inspectorOpen)
+  const sidebarOpen = useAppStore((s) => s.sidebarOpen)
+  const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
   const currentAgent = session?.agentId ? agents[session.agentId] ?? null : null
 
   const voice = useVoiceConversation()
@@ -60,6 +63,28 @@ export function ChatArea() {
   const [confirmClear, setConfirmClear] = useState(false)
   const [confirmDeleteAgent, setConfirmDeleteAgent] = useState(false)
   const [browserActive, setBrowserActive] = useState(false)
+  const [heartbeatHistoryOpen, setHeartbeatHistoryOpen] = useState(false)
+  const [messagesLoading, setMessagesLoading] = useState(true)
+  const [connectorFilter, setConnectorFilter] = useState<string | null>(null)
+
+  // Collect unique connector sources from messages for filter UI
+  const { connectorSources, hasDirectMessages } = useMemo(() => {
+    const sources = new Map<string, { platform: string; connectorName: string }>()
+    let hasDirect = false
+    for (const msg of messages) {
+      if (msg.source?.connectorId && !sources.has(msg.source.connectorId)) {
+        sources.set(msg.source.connectorId, {
+          platform: msg.source.platform,
+          connectorName: msg.source.connectorName,
+        })
+      } else if (!msg.source?.connectorId && msg.role === 'user') {
+        hasDirect = true
+      }
+    }
+    return { connectorSources: sources, hasDirectMessages: hasDirect }
+  }, [messages])
+  // Show source filter when there are genuinely multiple sources (2+ connectors, or connector + direct)
+  const hasMultipleSources = connectorSources.size > 1 || (connectorSources.size > 0 && hasDirectMessages)
   const [isDragging, setIsDragging] = useState(false)
   const dragCounter = useRef(0)
   const setPendingImage = useChatStore((s) => s.setPendingImage)
@@ -69,13 +94,19 @@ export function ChatArea() {
     const chatState = useChatStore.getState()
     const preserveLocalStream = chatState.streaming && chatState.streamingSessionId === sessionId
     // Clear stale state from the previous session, but keep active local stream state for this session.
+    setMessagesLoading(true)
     setMessages([])
     if (!preserveLocalStream) {
       useChatStore.setState({ streaming: false, streamingSessionId: null, streamText: '', toolEvents: [] })
     }
-    fetchMessages(sessionId).then(setMessages).catch((err) => {
+    fetchMessagesPaginated(sessionId, 100).then((data) => {
+      setMessages(data.messages)
+      useChatStore.setState({ hasMoreMessages: data.hasMore, totalMessages: data.total })
+    }).catch((err) => {
       console.error('Failed to load messages:', err)
       setMessages(session?.messages || [])
+    }).finally(() => {
+      setMessagesLoading(false)
     })
     // If server reports session is still active, show streaming state
     if (session?.active) {
@@ -125,12 +156,13 @@ export function ChatArea() {
             return !isHeartbeat && !!m.text?.trim()
           })
           if (latestAssistant?.text) {
-            void speak(latestAssistant.text)
+            void speak(latestAssistant.text, currentAgent?.elevenLabsVoiceId)
           }
         }
       }
       if (isServerActiveRef.current) await loadSessions()
     } catch (err) { console.error('Failed to refresh messages:', err) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId])
 
   // Subscribe to WS messages for this session — always subscribe when session exists,
@@ -198,10 +230,6 @@ export function ChatArea() {
     setCurrentSession(null)
   }, [sessionId])
 
-  const handleBack = useCallback(() => {
-    setCurrentSession(null)
-  }, [])
-
   const handlePrompt = useCallback((text: string) => {
     sendMessage(text)
   }, [sendMessage])
@@ -244,7 +272,7 @@ export function ChatArea() {
 
   const streamingForThisSession = streaming && (!streamingSessionId || streamingSessionId === session.id)
   const isMainChat = session.name === '__main__'
-  const isEmpty = !messages.length && !streamingForThisSession
+  const isEmpty = !messages.length && !streamingForThisSession && !messagesLoading
 
   return (
     <div className="flex-1 flex h-full min-h-0 min-w-0">
@@ -261,12 +289,18 @@ export function ChatArea() {
           streaming={streamingForThisSession}
           onStop={stopStreaming}
           onMenuToggle={() => setMenuOpen(!menuOpen)}
-          onBack={handleBack}
+          onBack={sidebarOpen ? () => setSidebarOpen(false) : undefined}
           browserActive={browserActive}
           onStopBrowser={handleStopBrowser}
           voiceActive={voice.active}
           voiceSupported={voice.supported}
           onVoiceToggle={handleVoiceToggle}
+          heartbeatHistoryOpen={heartbeatHistoryOpen}
+          onToggleHeartbeatHistory={() => setHeartbeatHistoryOpen((v) => !v)}
+          connectorSources={connectorSources}
+          connectorFilter={connectorFilter}
+          onConnectorFilterChange={setConnectorFilter}
+          hasMultipleSources={hasMultipleSources}
         />
       )}
       {!isDesktop && (
@@ -281,11 +315,25 @@ export function ChatArea() {
           voiceActive={voice.active}
           voiceSupported={voice.supported}
           onVoiceToggle={handleVoiceToggle}
+          connectorSources={connectorSources}
+          connectorFilter={connectorFilter}
+          onConnectorFilterChange={setConnectorFilter}
+          hasMultipleSources={hasMultipleSources}
         />
       )}
       <DevServerBar status={devServerStatus} onStop={handleStopDevServer} />
 
-      {isEmpty ? (
+      {messagesLoading && !messages.length ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-3" style={{ animation: 'fade-in 0.2s ease' }}>
+            <div className="relative w-10 h-10">
+              <div className="absolute inset-0 rounded-full border-2 border-white/[0.06]" />
+              <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent-bright animate-spin" />
+            </div>
+            <span className="text-[13px] text-text-3/50 font-500">Loading messages...</span>
+          </div>
+        </div>
+      ) : isEmpty ? (
         <div className="flex-1 flex flex-col items-center justify-center px-6 pb-4 relative">
           {/* Atmospheric background glow */}
           <div className="absolute inset-0 pointer-events-none overflow-hidden">
@@ -336,7 +384,7 @@ export function ChatArea() {
           </div>
         </div>
       ) : (
-        <MessageList messages={messages} streaming={streamingForThisSession} />
+        <MessageList messages={messages} streaming={streamingForThisSession} connectorFilter={connectorFilter} />
       )}
 
       {voice.active && (
@@ -361,19 +409,9 @@ export function ChatArea() {
       />
 
       <Dropdown open={menuOpen} onClose={() => setMenuOpen(false)}>
-        {session.agentId && agents[session.agentId] && (
-          <DropdownItem onClick={() => { setMenuOpen(false); setEditingAgentId(session.agentId!); setAgentSheetOpen(true) }}>
-            Edit Agent
-          </DropdownItem>
-        )}
         <DropdownItem onClick={() => { setMenuOpen(false); setConfirmClear(true) }}>
           Clear History
         </DropdownItem>
-        {session.agentId && agents[session.agentId] && !isMainChat && (
-          <DropdownItem danger onClick={() => { setMenuOpen(false); setConfirmDeleteAgent(true) }}>
-            Delete Agent
-          </DropdownItem>
-        )}
         {!isMainChat && (
           <DropdownItem danger onClick={() => { setMenuOpen(false); setConfirmDelete(true) }}>
             Delete Chat
@@ -432,7 +470,21 @@ export function ChatArea() {
       <ChatPreviewPanel content={previewContent} onClose={() => setPreviewContent(null)} />
     )}
     {isDesktop && inspectorOpen && currentAgent && (
-      <InspectorPanel agent={currentAgent} />
+      <InspectorPanel
+        agent={currentAgent}
+        onEditAgent={() => { setEditingAgentId(session.agentId!); setAgentSheetOpen(true) }}
+        onClearHistory={() => setConfirmClear(true)}
+        onDeleteAgent={!isMainChat ? () => setConfirmDeleteAgent(true) : undefined}
+        onDeleteChat={!isMainChat ? () => setConfirmDelete(true) : undefined}
+        isMainChat={isMainChat}
+      />
+    )}
+    {isDesktop && heartbeatHistoryOpen && currentAgent?.heartbeatEnabled && (
+      <HeartbeatHistoryPanel
+        messages={messages}
+        agentHeartbeatGoal={currentAgent.heartbeatGoal ?? undefined}
+        onClose={() => setHeartbeatHistoryOpen(false)}
+      />
     )}
     </div>
   )
@@ -442,7 +494,7 @@ function PromptIcon({ type }: { type: string }) {
   const cls = "w-5 h-5"
   switch (type) {
     case 'book':
-      return <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ color: '#818CF8' }}><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
+      return <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ color: 'var(--color-accent-bright)' }}><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
     case 'link':
       return <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ color: '#F472B6' }}><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" /><line x1="8" y1="12" x2="16" y2="12" /></svg>
     case 'bot':