@swarmclawai/swarmclaw 0.4.0 → 0.5.0

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo, useRef } from 'react'
 import type { Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -13,11 +13,22 @@ 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+/, '~')
 }
 
+function formatDuration(sec: number): string {
+  if (sec >= 3600) {
+    const h = Math.floor(sec / 3600)
+    const m = Math.floor((sec % 3600) / 60)
+    return m > 0 ? `${h}h${m}m` : `${h}h`
+  }
+  if (sec >= 60) return `${Math.floor(sec / 60)}m`
+  return `${sec}s`
+}
+
 const PROVIDER_LABELS: Record<string, string> = {
   'claude-cli': 'CLI',
   openai: 'OpenAI',
@@ -34,14 +45,20 @@ interface Props {
   mobile?: boolean
   browserActive?: boolean
   onStopBrowser?: () => void
+  onVoiceToggle?: () => void
+  voiceActive?: boolean
+  voiceSupported?: boolean
 }
 
-export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser }: 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)
@@ -49,18 +66,26 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
   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)
+  const [hbDropdownOpen, setHbDropdownOpen] = useState(false)
+  const hbDropdownRef = useRef<HTMLDivElement>(null)
   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(() => {
@@ -102,11 +127,53 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     setTimeout(() => setCopied(false), 2000)
   }
 
-  const heartbeatEnabled = session.heartbeatEnabled !== false
   const heartbeatSupported = (session.tools?.length ?? 0) > 0
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
-  const heartbeatIntervalRaw = session.heartbeatIntervalSec ?? appSettings.heartbeatIntervalSec ?? 120
-  const heartbeatIntervalSec = Number.isFinite(Number(heartbeatIntervalRaw)) ? Math.max(0, Math.trunc(Number(heartbeatIntervalRaw))) : 120
+  const { heartbeatEnabled, heartbeatIntervalSec, heartbeatExplicitOptIn } = useMemo(() => {
+    // Resolve through the same cascade as the backend: settings → agent → session
+    const parseDur = (v: unknown): number | null => {
+      if (v === null || v === undefined) return null
+      if (typeof v === 'number') return Number.isFinite(v) ? Math.max(0, Math.min(86400, Math.trunc(v))) : null
+      if (typeof v !== 'string') return null
+      const t = v.trim().toLowerCase()
+      if (!t) return null
+      const n = Number(t)
+      if (Number.isFinite(n)) return Math.max(0, Math.min(86400, Math.trunc(n)))
+      const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/)
+      if (!m || (!m[1] && !m[2] && !m[3])) return null
+      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: { heartbeatInterval?: string | number | null; heartbeatIntervalSec?: number | null }): number | null => {
+      const dur = parseDur(obj.heartbeatInterval)
+      if (dur !== null) return dur
+      const sec = parseDur(obj.heartbeatIntervalSec)
+      if (sec !== null) return sec
+      return null
+    }
+    // Global defaults
+    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) ?? 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) ?? sec
+    }
+    return {
+      heartbeatEnabled: enabled && sec > 0,
+      heartbeatIntervalSec: sec,
+      heartbeatExplicitOptIn: explicitOptIn,
+    }
+  }, [appSettings, agent, session])
+  const heartbeatWillRun = heartbeatEnabled && (loopIsOngoing || heartbeatExplicitOptIn)
   const isMainSession = session.name === '__main__'
   const missionState = session.mainLoopState || {}
   const missionPaused = missionState.paused === true
@@ -119,23 +186,40 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     if (!heartbeatSupported || heartbeatSaving) return
     setHeartbeatSaving(true)
     try {
-      await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: !heartbeatEnabled })
-      await loadSessions()
+      const next = !heartbeatEnabled
+      if (session.agentId) {
+        await api('PUT', `/agents/${session.agentId}`, { heartbeatEnabled: next })
+        // Clear any stale session-level override so the agent value wins
+        await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: null })
+        await Promise.all([loadAgents(), loadSessions()])
+      } else {
+        await api('PUT', `/sessions/${session.id}`, { heartbeatEnabled: next })
+        await loadSessions()
+      }
     } finally {
       setHeartbeatSaving(false)
     }
   }
 
-  const handleCycleHeartbeatInterval = async () => {
+  const handleSelectHeartbeatInterval = async (sec: number) => {
     if (!heartbeatSupported || heartbeatSaving) return
-    const presets = [30, 60, 120, 300, 600]
-    const current = heartbeatIntervalSec
-    const idx = presets.indexOf(current)
-    const next = idx === -1 ? 120 : presets[(idx + 1) % presets.length]
+    setHbDropdownOpen(false)
     setHeartbeatSaving(true)
     try {
-      await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: next, heartbeatEnabled: true })
-      await loadSessions()
+      if (session.agentId) {
+        // Save to agent with both formats so the cascade resolves correctly
+        await api('PUT', `/agents/${session.agentId}`, {
+          heartbeatInterval: formatDuration(sec),
+          heartbeatIntervalSec: sec,
+          heartbeatEnabled: true,
+        })
+        // Clear stale session-level overrides
+        await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: null, heartbeatEnabled: null })
+        await Promise.all([loadAgents(), loadSessions()])
+      } else {
+        await api('PUT', `/sessions/${session.id}`, { heartbeatIntervalSec: sec, heartbeatEnabled: true })
+        await loadSessions()
+      }
     } finally {
       setHeartbeatSaving(false)
     }
@@ -193,6 +277,52 @@ 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) => {
+      if (hbDropdownRef.current && !hbDropdownRef.current.contains(e.target as Node)) setHbDropdownOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [hbDropdownOpen])
+
   useEffect(() => {
     if (session.name.startsWith('connector:')) {
       void loadConnectors()
@@ -223,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)
@@ -242,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}
@@ -267,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 && (
@@ -276,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 && (
@@ -285,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" />
@@ -292,13 +511,28 @@ 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" />
               <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
             </svg>
           </IconButton>
-          <IconButton onClick={(e) => { e.stopPropagation(); onMenuToggle() }} aria-label="Session menu">
+          {voiceSupported && onVoiceToggle && (
+            <IconButton onClick={onVoiceToggle} active={voiceActive} aria-label="Toggle voice conversation">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                <line x1="12" x2="12" y1="19" y2="22" />
+              </svg>
+            </IconButton>
+          )}
+          <IconButton onClick={(e) => { e.stopPropagation(); onMenuToggle() }} aria-label="Chat menu">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
               <circle cx="12" cy="6" r="1" />
               <circle cx="12" cy="12" r="1" />
@@ -320,25 +554,44 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 onClick={handleToggleHeartbeat}
                 disabled={heartbeatSaving}
                 className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] transition-colors cursor-pointer border-none
-                  ${heartbeatEnabled ? 'bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-400' : 'bg-white/[0.04] hover:bg-white/[0.07] text-text-3'}`}
-                title={loopIsOngoing ? 'Toggle heartbeat for this session' : 'Global loop mode is bounded; heartbeats are paused'}
+                  ${heartbeatWillRun ? 'bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-400' : 'bg-white/[0.04] hover:bg-white/[0.07] text-text-3'}`}
+                title={heartbeatWillRun ? 'Toggle heartbeat' : !heartbeatEnabled ? 'Heartbeat disabled — click to enable' : 'Heartbeat enabled but paused (bounded loop mode, no explicit opt-in)'}
               >
-                <span className={`w-1.5 h-1.5 rounded-full ${heartbeatEnabled ? 'bg-emerald-400' : 'bg-text-3/40'}`} />
+                <span className={`w-1.5 h-1.5 rounded-full ${heartbeatWillRun ? 'bg-emerald-400' : 'bg-text-3/40'}`} />
                 <span className="text-[11px] font-600">
-                  HB {heartbeatEnabled ? 'On' : 'Off'}
+                  HB {heartbeatWillRun ? 'On' : 'Off'}
                 </span>
-                {!loopIsOngoing && (
+                {heartbeatEnabled && !loopIsOngoing && !heartbeatExplicitOptIn && (
                   <span className="text-[10px] text-text-3/50">(bounded)</span>
                 )}
               </button>
-              <button
-                onClick={handleCycleHeartbeatInterval}
-                disabled={heartbeatSaving}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-text-3 transition-colors cursor-pointer border-none"
-                title="Cycle heartbeat interval for this session"
-              >
-                <span className="text-[11px] font-600">{heartbeatIntervalSec}s</span>
-              </button>
+              <div className="relative" ref={hbDropdownRef}>
+                <button
+                  onClick={() => setHbDropdownOpen((o) => !o)}
+                  disabled={heartbeatSaving}
+                  className="flex items-center gap-1 px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-text-3 transition-colors cursor-pointer border-none"
+                  title="Set heartbeat interval"
+                >
+                  <span className="text-[11px] font-600">{formatDuration(heartbeatIntervalSec)}</span>
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/50">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </button>
+                {hbDropdownOpen && (
+                  <div className="absolute top-full left-0 mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[80px]">
+                    {[30, 60, 120, 300, 600, 1800, 3600].map((sec) => (
+                      <button
+                        key={sec}
+                        onClick={() => handleSelectHeartbeatInterval(sec)}
+                        className={`w-full text-left px-3 py-1.5 text-[11px] font-600 transition-colors cursor-pointer border-none
+                          ${sec === heartbeatIntervalSec ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:bg-white/[0.06]'}`}
+                      >
+                        {formatDuration(sec)}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
             </>
           )}
           {isMainSession && (
@@ -427,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')}
@@ -467,7 +743,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
             <button
               onClick={onStopBrowser}
               className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-[#3B82F6]/10 hover:bg-[#F43F5E]/15 transition-colors cursor-pointer group"
-              title="Stop browser session"
+              title="Stop browser"
             >
               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-[#3B82F6] group-hover:text-[#F43F5E]">
                 <rect x="3" y="3" width="18" height="14" rx="2" />

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>
+  )
+}