@swarmclawai/swarmclaw 0.4.5 → 0.5.0

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

@@ -13,6 +13,7 @@ import {
   CONNECTOR_PLATFORM_META,
   getSessionConnector,
 } from '@/components/shared/connector-platform-icon'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
 function shortPath(p: string): string {
   return (p || '').replace(/^\/Users\/\w+/, '~')
@@ -52,9 +53,12 @@ interface Props {
 export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported }: Props) {
   const ttsEnabled = useChatStore((s) => s.ttsEnabled)
   const toggleTts = useChatStore((s) => s.toggleTts)
+  const soundEnabled = useChatStore((s) => s.soundEnabled)
+  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)
   const setActiveView = useAppStore((s) => s.setActiveView)
@@ -63,12 +67,15 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const appSettings = useAppStore((s) => s.appSettings)
   const loadSessions = useAppStore((s) => s.loadSessions)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const inspectorOpen = useAppStore((s) => s.inspectorOpen)
+  const setInspectorOpen = useAppStore((s) => s.setInspectorOpen)
   const connectors = useAppStore((s) => s.connectors)
   const loadConnectors = useAppStore((s) => s.loadConnectors)
   const providerLabel = PROVIDER_LABELS[session.provider] || session.provider
   const agent = session.agentId ? agents[session.agentId] : null
   const connector = getSessionConnector(session, connectors)
   const connectorMeta = connector ? CONNECTOR_PLATFORM_META[connector.platform] : null
+  const connectorPresence = connector?.presence
   const modelName = session.model || agent?.model || ''
   const [copied, setCopied] = useState(false)
   const [heartbeatSaving, setHeartbeatSaving] = useState(false)
@@ -77,6 +84,8 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const [mainLoopSaving, setMainLoopSaving] = useState(false)
   const [mainLoopError, setMainLoopError] = useState('')
   const [mainLoopNotice, setMainLoopNotice] = useState('')
+  const [syncingHistory, setSyncingHistory] = useState(false)
+  const [syncResult, setSyncResult] = useState('')
 
   // Find linked task for this session
   const linkedTask = useMemo(() => {
@@ -135,7 +144,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
       const total = (m[1] ? parseInt(m[1]) * 3600 : 0) + (m[2] ? parseInt(m[2]) * 60 : 0) + (m[3] ? parseInt(m[3]) : 0)
       return Math.max(0, Math.min(86400, total))
     }
-    const resolveFrom = (obj: Record<string, any>): number | null => {
+    const resolveFrom = (obj: { heartbeatInterval?: string | number | null; heartbeatIntervalSec?: number | null }): number | null => {
       const dur = parseDur(obj.heartbeatInterval)
       if (dur !== null) return dur
       const sec = parseDur(obj.heartbeatIntervalSec)
@@ -143,20 +152,20 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
       return null
     }
     // Global defaults
-    let sec = resolveFrom(appSettings as Record<string, any>) ?? 1800
+    let sec = resolveFrom(appSettings) ?? 1800
     let enabled = sec > 0
     let explicitOptIn = false
     // Agent layer
     if (agent) {
       if (agent.heartbeatEnabled === false) enabled = false
       if (agent.heartbeatEnabled === true) { enabled = true; explicitOptIn = true }
-      sec = resolveFrom(agent as Record<string, any>) ?? sec
+      sec = resolveFrom(agent) ?? sec
     }
     // Session layer — only applies for non-agent chats (agent chats save directly to agent)
     if (!agent) {
       if (session.heartbeatEnabled === false) enabled = false
       if (session.heartbeatEnabled === true) { enabled = true; explicitOptIn = true }
-      sec = resolveFrom(session as Record<string, any>) ?? sec
+      sec = resolveFrom(session) ?? sec
     }
     return {
       heartbeatEnabled: enabled && sec > 0,
@@ -268,6 +277,43 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     void postMainLoopAction('clear_events')
   }
 
+  const isOpenClawAgent = agent?.provider === 'openclaw'
+  // Derive OpenClaw session key: agent sessions use "agent:<name>:main" convention
+  const openclawSessionKey = isOpenClawAgent && agent
+    ? `agent:${agent.name.toLowerCase().replace(/\s+/g, '-')}:main`
+    : null
+
+  const handleSyncHistory = async () => {
+    if (!openclawSessionKey || syncingHistory) return
+    setSyncingHistory(true)
+    setSyncResult('')
+    try {
+      const preview = await api<{ sessionKey: string; epoch: number; messages: Array<{ role: string; content: string; ts: number }> }>(
+        'GET', `/openclaw/history?sessionKey=${encodeURIComponent(openclawSessionKey)}`,
+      )
+      if (!preview?.messages?.length) {
+        setSyncResult('No new messages found.')
+        return
+      }
+      const result = await api<{ ok: boolean; merged: number }>(
+        'POST', '/openclaw/history',
+        { sessionKey: openclawSessionKey, epoch: preview.epoch, localSessionId: session.id },
+      )
+      setSyncResult(result.merged > 0 ? `Synced ${result.merged} message${result.merged !== 1 ? 's' : ''}.` : 'Already up to date.')
+      if (result.merged > 0) await loadSessions()
+    } catch (err: unknown) {
+      setSyncResult(err instanceof Error ? err.message : 'Sync failed.')
+    } finally {
+      setSyncingHistory(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!syncResult) return
+    const timer = setTimeout(() => setSyncResult(''), 3000)
+    return () => clearTimeout(timer)
+  }, [syncResult])
+
   useEffect(() => {
     if (!hbDropdownOpen) return
     const handler = (e: MouseEvent) => {
@@ -307,6 +353,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2.5">
+            {agent && <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />}
             <span className="font-display text-[16px] font-600 block truncate tracking-[-0.02em]">{
               session.name === '__main__' ? 'Main Chat'
               : session.name.startsWith('agent-thread:') ? (agent?.name || session.name)
@@ -326,6 +373,27 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 {connectorMeta.label}
               </span>
             )}
+            {connector && connectorPresence && (() => {
+              const lastAt = connectorPresence.lastMessageAt
+              if (!lastAt) return (
+                <span className="shrink-0 inline-flex items-center gap-1 text-[10px] text-text-3/50">
+                  <span className="w-1.5 h-1.5 rounded-full bg-text-3/40" />
+                  Inactive
+                </span>
+              )
+              const ago = Date.now() - lastAt
+              const isActive = ago < 5 * 60_000
+              const isRecent = ago < 30 * 60_000
+              const label = isActive ? 'Active' : isRecent ? `${Math.floor(ago / 60_000)}m ago` : 'Inactive'
+              const dotColor = isActive ? 'bg-emerald-400' : isRecent ? 'bg-amber-400' : 'bg-text-3/40'
+              const textColor = isActive ? 'text-emerald-400' : isRecent ? 'text-amber-300' : 'text-text-3/50'
+              return (
+                <span className={`shrink-0 inline-flex items-center gap-1 text-[10px] ${textColor}`}>
+                  <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
+                  {label}
+                </span>
+              )
+            })()}
             {session.provider && session.provider !== 'claude-cli' && (
               <span className="shrink-0 px-2.5 py-0.5 rounded-[7px] bg-accent-soft text-accent-bright text-[10px] font-700 uppercase tracking-wider">
                 {providerLabel}
@@ -351,6 +419,21 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               <>
                 <span className="text-[11px] text-text-3/60">·</span>
                 <span className="text-[11px] text-text-3/50 font-mono truncate shrink-0">{modelName}</span>
+                {session.conversationTone && session.conversationTone !== 'neutral' && (() => {
+                  const toneColors: Record<string, string> = {
+                    formal: 'bg-[#3B82F6]',
+                    casual: 'bg-emerald-400',
+                    empathetic: 'bg-purple-400',
+                    technical: 'bg-[#F59E0B]',
+                  }
+                  const color = toneColors[session.conversationTone] || ''
+                  return color ? (
+                    <span
+                      className={`w-2 h-2 rounded-full shrink-0 ${color}`}
+                      title={`Tone: ${session.conversationTone}`}
+                    />
+                  ) : null
+                })()}
               </>
             )}
             {lastUsage && !streaming && (
@@ -360,6 +443,50 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               </>
             )}
           </div>
+          {(() => {
+            const liveStatus = agentStatus || (missionState.status ? {
+              goal: missionState.goal ?? undefined,
+              status: missionState.status ?? undefined,
+              summary: missionState.summary ?? undefined,
+              nextAction: missionState.nextAction ?? undefined,
+            } : null)
+            if (!liveStatus) return null
+            const statusColors: Record<string, string> = {
+              idle: 'bg-text-3/40',
+              progress: 'bg-[#3B82F6]',
+              blocked: 'bg-amber-400',
+              ok: 'bg-emerald-400',
+            }
+            const dotColor = statusColors[liveStatus.status || ''] || 'bg-text-3/40'
+            return (
+              <div className="flex items-center gap-2 mt-0.5">
+                {liveStatus.goal && (
+                  <span className="text-[10px] text-text-3/60 font-mono truncate max-w-[240px]" title={liveStatus.goal}>
+                    {liveStatus.goal}
+                  </span>
+                )}
+                {liveStatus.status && (
+                  <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[5px] text-[9px] font-700 uppercase tracking-wider ${
+                    liveStatus.status === 'blocked' ? 'bg-amber-400/15 text-amber-300'
+                    : liveStatus.status === 'ok' ? 'bg-emerald-400/15 text-emerald-400'
+                    : liveStatus.status === 'progress' ? 'bg-[#3B82F6]/15 text-[#60A5FA]'
+                    : 'bg-white/[0.04] text-text-3/60'
+                  }`}>
+                    <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
+                    {liveStatus.status}
+                  </span>
+                )}
+                {liveStatus.nextAction && (
+                  <>
+                    <span className="text-[10px] text-text-3/40">→</span>
+                    <span className="text-[10px] text-text-3/50 font-mono truncate max-w-[200px]" title={liveStatus.nextAction}>
+                      {liveStatus.nextAction}
+                    </span>
+                  </>
+                )}
+              </div>
+            )
+          })()}
         </div>
         <div className="flex gap-1.5">
           {streaming && (
@@ -369,6 +496,14 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               </svg>
             </IconButton>
           )}
+          {agent && (
+            <IconButton onClick={() => setInspectorOpen(!inspectorOpen)} active={inspectorOpen} aria-label="Toggle inspector panel">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            </IconButton>
+          )}
           <IconButton onClick={() => setDebugOpen(!debugOpen)} active={debugOpen} aria-label="Toggle debug panel">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
               <path d="M12 20V10" />
@@ -376,6 +511,12 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               <path d="M6 20v-4" />
             </svg>
           </IconButton>
+          <IconButton onClick={toggleSound} active={soundEnabled} aria-label="Toggle sound notifications">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M18 8A6 6 0 0 1 18 16" />
+              <path d="M13 2L8 7H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4l5 5V2z" />
+            </svg>
+          </IconButton>
           <IconButton onClick={toggleTts} active={ttsEnabled} aria-label="Toggle text-to-speech">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
               <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
@@ -539,6 +680,29 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               </span>
             </button>
           )}
+          {isOpenClawAgent && openclawSessionKey && (
+            <>
+              <button
+                onClick={handleSyncHistory}
+                disabled={syncingHistory}
+                className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-indigo-500/10 hover:bg-indigo-500/15 transition-colors cursor-pointer border-none disabled:opacity-50"
+                title="Sync chat history from OpenClaw gateway"
+              >
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-indigo-400">
+                  <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                  <path d="M3 3v5h5" />
+                  <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                  <path d="M16 16h5v5" />
+                </svg>
+                <span className="text-[11px] font-600 text-indigo-400">
+                  {syncingHistory ? 'Syncing...' : 'Sync History'}
+                </span>
+              </button>
+              {syncResult && (
+                <span className="text-[10px] text-emerald-300/90">{syncResult}</span>
+              )}
+            </>
+          )}
           {linkedTask && (
             <button
               onClick={() => setActiveView('tasks')}

package/src/components/chat/chat-preview-panel.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { useCallback, useRef, useState } from 'react'
+import { CodeBlock } from './code-block'
+
+interface PreviewContent {
+  type: 'browser' | 'image' | 'code' | 'html'
+  url?: string
+  content?: string
+  title?: string
+}
+
+interface Props {
+  content: PreviewContent
+  onClose: () => void
+}
+
+export function ChatPreviewPanel({ content, onClose }: Props) {
+  const [width, setWidth] = useState(400)
+  const dragging = useRef(false)
+  const startX = useRef(0)
+  const startWidth = useRef(400)
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    dragging.current = true
+    startX.current = e.clientX
+    startWidth.current = width
+
+    const handleMouseMove = (ev: MouseEvent) => {
+      if (!dragging.current) return
+      const diff = startX.current - ev.clientX
+      const next = Math.max(300, Math.min(window.innerWidth * 0.5, startWidth.current + diff))
+      setWidth(next)
+    }
+
+    const handleMouseUp = () => {
+      dragging.current = false
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }, [width])
+
+  return (
+    <div
+      className="flex flex-col border-l border-white/[0.06] bg-bg shrink-0"
+      style={{ width, minWidth: 300, maxWidth: '50%', animation: 'fade-in 0.25s ease' }}
+    >
+      {/* Resize handle */}
+      <div
+        className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-accent-bright/20 transition-colors z-10"
+        style={{ position: 'relative', width: 4, minWidth: 4 }}
+        onMouseDown={handleMouseDown}
+      />
+
+      {/* Header */}
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/[0.06] shrink-0">
+        <span className="text-[12px] font-600 text-text-2 truncate flex-1">
+          {content.title || 'Preview'}
+        </span>
+        <button
+          onClick={onClose}
+          className="p-1 rounded-[6px] text-text-3 hover:text-text-2 hover:bg-white/[0.04] cursor-pointer border-none bg-transparent transition-colors"
+          aria-label="Close preview"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto min-h-0">
+        {content.type === 'browser' && content.url && (
+          <iframe
+            src={content.url}
+            className="w-full h-full border-none"
+            title={content.title || 'Browser Preview'}
+            sandbox="allow-scripts allow-same-origin"
+          />
+        )}
+        {content.type === 'html' && content.content && (
+          <iframe
+            srcDoc={content.content}
+            className="w-full h-full border-none"
+            title={content.title || 'HTML Preview'}
+            sandbox="allow-scripts"
+          />
+        )}
+        {content.type === 'image' && content.url && (
+          <div className="p-4 flex items-center justify-center h-full">
+            <img
+              src={content.url}
+              alt={content.title || 'Preview'}
+              className="max-w-full max-h-full rounded-[8px] object-contain"
+            />
+          </div>
+        )}
+        {content.type === 'code' && content.content && (
+          <div className="p-2">
+            <CodeBlock className={`language-${content.title?.split('.').pop() || 'text'}`}>
+              {content.content}
+            </CodeBlock>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,89 @@
+'use client'
+
+import type { PendingExecApproval, ExecApprovalDecision } from '@/types'
+import { useApprovalStore } from '@/stores/use-approval-store'
+
+interface Props {
+  approval: PendingExecApproval
+}
+
+export function ExecApprovalCard({ approval }: Props) {
+  const resolveApproval = useApprovalStore((s) => s.resolveApproval)
+
+  const handleResolve = (decision: ExecApprovalDecision) => {
+    resolveApproval(approval.id, decision)
+  }
+
+  const expired = approval.expiresAtMs < Date.now()
+  const disabled = !!approval.resolving || expired
+
+  return (
+    <div className="my-2 rounded-[12px] border border-amber-500/20 bg-amber-500/[0.04] p-3.5">
+      <div className="flex items-center gap-2 mb-2">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-amber-400 shrink-0">
+          <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>
+        <span className="text-[12px] font-600 text-amber-400">Execution Approval Required</span>
+      </div>
+
+      {approval.ask && (
+        <p className="text-[13px] text-text-2 mb-2">{approval.ask}</p>
+      )}
+
+      <div className="rounded-[8px] bg-black/20 px-3 py-2 mb-2 overflow-x-auto">
+        <code className="text-[12px] text-text font-mono whitespace-pre-wrap break-all">
+          {approval.command}
+        </code>
+      </div>
+
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-text-3/60 mb-3">
+        {approval.cwd && <span>cwd: {approval.cwd}</span>}
+        {approval.host && <span>host: {approval.host}</span>}
+        {approval.security && (
+          <span className={approval.security === 'high' ? 'text-red-400' : ''}>
+            security: {approval.security}
+          </span>
+        )}
+      </div>
+
+      {approval.error && (
+        <p className="text-[12px] text-red-400 mb-2">{approval.error}</p>
+      )}
+
+      {expired ? (
+        <p className="text-[12px] text-text-3/50 italic">Approval expired</p>
+      ) : (
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => handleResolve('allow-once')}
+            disabled={disabled}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-emerald-500/10 text-[12px] font-600
+              text-emerald-400 cursor-pointer hover:bg-emerald-500/20 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {approval.resolving ? '...' : 'Allow Once'}
+          </button>
+          <button
+            onClick={() => handleResolve('allow-always')}
+            disabled={disabled}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[12px] font-600
+              text-text-3 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Always Allow
+          </button>
+          <button
+            onClick={() => handleResolve('deny')}
+            disabled={disabled}
+            className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-[12px] font-600
+              text-red-400 cursor-pointer hover:bg-red-400/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Deny
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}