@swarmclawai/swarmclaw 1.2.6 → 1.2.9

package/src/components/agents/inspector-panel.tsx

@@ -6,7 +6,6 @@ import type { Agent, MemoryEntry, Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { api } from '@/lib/app/api-client'
-import { dedup } from '@/lib/shared-utils'
 import { AgentAvatar } from './agent-avatar'
 import { AgentFilesEditor } from './agent-files-editor'
 import { OpenClawSkillsPanel } from './openclaw-skills-panel'
@@ -16,6 +15,7 @@ import { SandboxEnvPanel } from './sandbox-env-panel'
 import { CronJobForm } from './cron-job-form'
 import { toast } from 'sonner'
 import { StatusDot } from '@/components/ui/status-dot'
+import { normalizeAgentExecuteConfig } from '@/lib/agent-execute-defaults'
 import { normalizeAgentSandboxConfig } from '@/lib/agent-sandbox-defaults'
 import { getEnabledToolIds, getEnabledExtensionIds, getEnabledCapabilityIds } from '@/lib/capability-selection'
 import { searchMemory } from '@/lib/memory'
@@ -204,25 +204,6 @@ function ToggleSwitch({ on, onChange, disabled }: { on: boolean; onChange: () =>
   )
 }
 
-// --- Wallet helpers (extracted from chat-header) ---
-
-function getAgentWalletIds(agent: { walletIds?: string[]; walletId?: string | null } | null | undefined): string[] {
-  const ids = Array.isArray(agent?.walletIds)
-    ? agent.walletIds.filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
-    : []
-  const legacy = typeof agent?.walletId === 'string' && agent.walletId.trim()
-    ? [agent.walletId.trim()]
-    : []
-  return dedup([...ids, ...legacy])
-}
-
-function getAgentActiveWalletId(agent: { activeWalletId?: string | null; walletIds?: string[]; walletId?: string | null } | null | undefined): string | null {
-  const walletIds = getAgentWalletIds(agent)
-  if (typeof agent?.activeWalletId === 'string' && walletIds.includes(agent.activeWalletId)) return agent.activeWalletId
-  if (typeof agent?.walletId === 'string' && walletIds.includes(agent.walletId)) return agent.walletId
-  return walletIds[0] || null
-}
-
 // --- Main component ---
 
 export function InspectorPanel({ agent, session, onEditAgent, onDuplicateAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: Props) {
@@ -344,7 +325,6 @@ function DashboardTab({ agent, session }: { agent: Agent; session: Session }) {
       <IdentityCard agent={agent} />
       {agent.provider === 'openclaw' && <OpenClawActionsSection agent={agent} />}
       <HeartbeatSection agent={agent} session={session} />
-      <WalletSection agent={agent} />
       <ToolsSection agent={agent} session={session} />
       <AudioSection />
       <MemorySection agentId={agent.id} />
@@ -612,68 +592,6 @@ function HeartbeatSection({ agent, session }: { agent: Agent; session: Session }
   )
 }
 
-// ─── Wallet Section ──────────────────────────────────────────────
-
-function WalletSection({ agent }: { agent: Agent }) {
-  const setWalletPanelAgentId = useAppStore((s) => s.setWalletPanelAgentId)
-  const navigateTo = useNavigate()
-  const agentWalletIds = useMemo(() => getAgentWalletIds(agent), [agent])
-  const activeWalletId = useMemo(() => getAgentActiveWalletId(agent), [agent])
-  const [walletBalance, setWalletBalance] = useState<{ formatted: string; symbol: string; assets?: number } | null>(null)
-
-  useEffect(() => {
-    if (!activeWalletId) return
-    let cancelled = false
-    api<{ balanceFormatted?: string; balanceSymbol?: string; portfolioSummary?: { nonZeroAssets?: number } }>('GET', `/wallets/${activeWalletId}?cached=1`)
-      .then((data) => {
-        if (cancelled) return
-        if (data.balanceFormatted && data.balanceSymbol) {
-          setWalletBalance({
-            formatted: data.balanceFormatted,
-            symbol: data.balanceSymbol,
-            assets: typeof data.portfolioSummary?.nonZeroAssets === 'number' ? data.portfolioSummary.nonZeroAssets : undefined,
-          })
-        }
-      })
-      .catch(() => {})
-    return () => { cancelled = true }
-  }, [activeWalletId])
-
-  if (agentWalletIds.length === 0) return null
-
-  const handleClick = () => {
-    setWalletPanelAgentId(agent.id)
-    navigateTo('wallets')
-  }
-
-  return (
-    <div className={panelCardClass('p-4')}>
-      <SectionLabel>Wallet</SectionLabel>
-      <button
-        type="button"
-        onClick={handleClick}
-        className="flex items-center gap-2 w-full bg-transparent border-none cursor-pointer text-left group"
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50 shrink-0">
-          <rect x="2" y="6" width="20" height="14" rx="2" />
-          <path d="M22 10H18a2 2 0 0 0 0 4h4" />
-        </svg>
-        {walletBalance ? (
-          <span className="text-[13px] text-text-2 font-600 group-hover:text-accent-bright transition-colors">
-            {walletBalance.formatted} {walletBalance.symbol}
-            {walletBalance.assets && walletBalance.assets > 1 ? ` +${walletBalance.assets - 1} assets` : ''}
-          </span>
-        ) : (
-          <span className="text-[13px] text-text-3/50 group-hover:text-text-3 transition-colors">View wallet</span>
-        )}
-        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="ml-auto text-text-3/30 group-hover:text-text-3/60 transition-colors shrink-0">
-          <polyline points="9 18 15 12 9 6" />
-        </svg>
-      </button>
-    </div>
-  )
-}
-
 // ─── Tools Section ───────────────────────────────────────────────
 
 function ToolsSection({ agent, session }: { agent: Agent; session: Session }) {
@@ -1139,7 +1057,8 @@ function ConfigTab({ agent }: { agent: Agent }) {
   const isOpenClaw = agent.provider === 'openclaw'
   const schedules = useAppStore((s) => s.schedules)
   const agentSchedules = Object.values(schedules).filter((s) => s.agentId === agent.id)
-  const [sandboxOpen, setSandboxOpen] = useState(false)
+  const [executeOpen, setExecuteOpen] = useState(false)
+  const [browserSandboxOpen, setBrowserSandboxOpen] = useState(false)
   const [openclawOpen, setOpenclawOpen] = useState(false)
   const [detailsOpen, setDetailsOpen] = useState(false)
 
@@ -1162,9 +1081,14 @@ function ConfigTab({ agent }: { agent: Agent }) {
       {/* Automations section */}
       <AutomationsSection schedules={agentSchedules} agent={agent} />
 
-      {/* Sandbox (collapsible) */}
-      <CollapsibleSection title="Sandbox" open={sandboxOpen} onToggle={() => setSandboxOpen((v) => !v)}>
-        <SandboxConfigSection agent={agent} />
+      {/* Execute (collapsible) */}
+      <CollapsibleSection title="Execute" open={executeOpen} onToggle={() => setExecuteOpen((v) => !v)}>
+        <ExecuteToolConfigSection agent={agent} />
+      </CollapsibleSection>
+
+      {/* Browser sandbox (collapsible) */}
+      <CollapsibleSection title="Browser Sandbox" open={browserSandboxOpen} onToggle={() => setBrowserSandboxOpen((v) => !v)}>
+        <BrowserSandboxSection agent={agent} />
       </CollapsibleSection>
 
       {/* OpenClaw settings (collapsible, OpenClaw only) */}
@@ -1327,13 +1251,85 @@ function AutomationsSection({ schedules, agent }: { schedules: Array<{ id: strin
   )
 }
 
-// ─── Sandbox Config Section ──────────────────────────────────────
+// ─── Execute Config Section ──────────────────────────────────────
 
-function SandboxConfigSection({ agent }: { agent: Agent }) {
+function ExecuteToolConfigSection({ agent }: { agent: Agent }) {
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const [saving, setSaving] = useState(false)
+  const config = normalizeAgentExecuteConfig(agent.executeConfig)
+
+  const update = useCallback(async (patch: Partial<NonNullable<typeof agent.executeConfig>>) => {
+    setSaving(true)
+    try {
+      const next = {
+        ...config,
+        ...patch,
+        network: {
+          ...(config.network || {}),
+          ...((patch.network as Record<string, unknown> | undefined) || {}),
+        },
+      }
+      await api('PUT', `/agents/${agent.id}`, { executeConfig: next })
+      await loadAgents()
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to update execute config')
+    } finally {
+      setSaving(false)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agent.id, config])
+
+  return (
+    <div className="pt-3 flex flex-col gap-3">
+      <div className="text-[11px] text-text-3/60">
+        `execute` uses just-bash in sandbox mode by default. Host mode is explicit and required for persistent writes.
+      </div>
+      <div>
+        <label className="text-[10px] text-text-3/50 block mb-1">Backend</label>
+        <select
+          value={config.backend || 'sandbox'}
+          onChange={(e) => void update({ backend: e.target.value as 'sandbox' | 'host' })}
+          disabled={saving}
+          className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text outline-none cursor-pointer focus:border-accent-bright/30"
+        >
+          <option value="sandbox">sandbox (just-bash)</option>
+          <option value="host">host (real bash)</option>
+        </select>
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-[11px] text-text-3/60">Allow network in sandbox mode</span>
+        <ToggleSwitch
+          on={config.network?.enabled !== false}
+          onChange={() => void update({ network: { ...(config.network || {}), enabled: config.network?.enabled === false } })}
+          disabled={saving}
+        />
+      </div>
+      <div>
+        <label className="text-[10px] text-text-3/50 block mb-1">Timeout (seconds)</label>
+        <input
+          type="number"
+          defaultValue={config.timeout || 30}
+          min={1}
+          max={300}
+          onBlur={(e) => void update({ timeout: Math.max(1, Math.min(300, Number(e.target.value) || 30)) })}
+          className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text font-mono outline-none focus:border-accent-bright/30"
+        />
+      </div>
+      <div className="text-[11px] text-text-3/50">
+        `shell` remains the host command/process tool. Use `execute` for sandboxed one-shot scripts.
+      </div>
+    </div>
+  )
+}
+
+// ─── Browser Sandbox Section ─────────────────────────────────────
+
+function BrowserSandboxSection({ agent }: { agent: Agent }) {
   const loadAgents = useAppStore((s) => s.loadAgents)
   const [saving, setSaving] = useState(false)
   const [dockerAvailable, setDockerAvailable] = useState<boolean | null>(null)
   const config = normalizeAgentSandboxConfig(agent.sandboxConfig)
+  const browserEnabled = config.enabled && config.browser?.enabled !== false
 
   useEffect(() => {
     api<{ docker?: { available: boolean; version?: string | null } }>('GET', '/setup/doctor')
@@ -1344,7 +1340,16 @@ function SandboxConfigSection({ agent }: { agent: Agent }) {
   const update = useCallback(async (patch: Partial<NonNullable<typeof agent.sandboxConfig>>) => {
     setSaving(true)
     try {
-      const next = { ...config, ...patch }
+      const next = {
+        ...config,
+        ...patch,
+        browser: patch.browser === null
+          ? null
+          : {
+              ...(config.browser || {}),
+              ...((patch.browser as Record<string, unknown> | undefined) || {}),
+            },
+      }
       await api('PUT', `/agents/${agent.id}`, { sandboxConfig: next })
       await loadAgents()
     } catch (err: unknown) {
@@ -1358,69 +1363,98 @@ function SandboxConfigSection({ agent }: { agent: Agent }) {
   return (
     <div className="pt-3">
       <div className="flex items-center justify-between mb-3">
-        <span className="text-[12px] text-text-2">Prefer Docker sandboxes</span>
-        <ToggleSwitch on={config.enabled} onChange={() => void update({ enabled: !config.enabled })} disabled={saving} />
+        <span className="text-[12px] text-text-2">Use Docker browser sandbox</span>
+        <ToggleSwitch
+          on={browserEnabled}
+          onChange={() => void update({
+            enabled: !browserEnabled,
+            browser: {
+              ...(config.browser || {}),
+              enabled: !browserEnabled,
+            },
+          })}
+          disabled={saving}
+        />
       </div>
       {dockerAvailable === false && (
         <div className="text-[11px] text-amber-400/80 bg-amber-400/[0.06] rounded-[8px] px-2.5 py-2 mb-3 border border-amber-400/10">
-          Docker is not detected. SwarmClaw will fall back to host execution.
+          Docker is not detected. Browser automation will use the host Playwright runtime.
         </div>
       )}
       {dockerAvailable === true && (
         <div className="text-[11px] text-emerald-400/70 mb-3 flex items-center gap-1.5">
-          <StatusDot status="online" size="sm" /> Docker available
+          <StatusDot status="online" size="sm" /> Docker available for browser sandboxing
         </div>
       )}
-      {config.enabled && (
+      {browserEnabled && (
         <div className="flex flex-col gap-2.5 mt-1">
           <div>
-            <label className="text-[10px] text-text-3/50 block mb-1">Image</label>
-            <input
-              type="text"
-              defaultValue={config.image || 'node:22-slim'}
-              onBlur={(e) => void update({ image: e.target.value.trim() || 'node:22-slim' })}
-              className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text font-mono outline-none focus:border-accent-bright/30"
-            />
+            <label className="text-[10px] text-text-3/50 block mb-1">Scope</label>
+            <select
+              defaultValue={config.scope || 'session'}
+              onChange={(e) => void update({ scope: e.target.value as 'session' | 'agent' })}
+              className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text outline-none cursor-pointer focus:border-accent-bright/30"
+            >
+              <option value="session">session</option>
+              <option value="agent">agent</option>
+            </select>
           </div>
           <div>
-            <label className="text-[10px] text-text-3/50 block mb-1">Network</label>
+            <label className="text-[10px] text-text-3/50 block mb-1">Mode</label>
             <select
-              defaultValue={config.network || 'none'}
-              onChange={(e) => void update({ network: e.target.value as 'none' | 'bridge' })}
+              defaultValue={config.mode === 'non-main' ? 'non-main' : 'all'}
+              onChange={(e) => void update({ mode: e.target.value as 'all' | 'non-main' })}
+              className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text outline-none cursor-pointer focus:border-accent-bright/30"
+            >
+              <option value="all">all sessions</option>
+              <option value="non-main">non-main sessions only</option>
+            </select>
+          </div>
+          <div>
+            <label className="text-[10px] text-text-3/50 block mb-1">Workspace access</label>
+            <select
+              defaultValue={config.workspaceAccess || 'rw'}
+              onChange={(e) => void update({ workspaceAccess: e.target.value as 'ro' | 'rw' })}
+              className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text outline-none cursor-pointer focus:border-accent-bright/30"
+            >
+              <option value="rw">read/write</option>
+              <option value="ro">read-only</option>
+            </select>
+          </div>
+          <div>
+            <label className="text-[10px] text-text-3/50 block mb-1">Browser network</label>
+            <select
+              defaultValue={config.browser?.network || 'bridge'}
+              onChange={(e) => void update({ browser: { ...(config.browser || {}), network: e.target.value as 'none' | 'bridge' } })}
               className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text outline-none cursor-pointer focus:border-accent-bright/30"
             >
               <option value="none">none (isolated)</option>
               <option value="bridge">bridge (internet access)</option>
             </select>
           </div>
-          <div className="grid grid-cols-2 gap-2">
-            <div>
-              <label className="text-[10px] text-text-3/50 block mb-1">Memory (MB)</label>
-              <input
-                type="number"
-                defaultValue={config.memoryMb || 512}
-                min={64}
-                max={8192}
-                onBlur={(e) => void update({ memoryMb: Math.max(64, Math.min(8192, Number(e.target.value) || 512)) })}
-                className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text font-mono outline-none focus:border-accent-bright/30"
-              />
-            </div>
-            <div>
-              <label className="text-[10px] text-text-3/50 block mb-1">CPUs</label>
-              <input
-                type="number"
-                defaultValue={config.cpus || 1.0}
-                min={0.25}
-                max={8}
-                step={0.25}
-                onBlur={(e) => void update({ cpus: Math.max(0.25, Math.min(8, Number(e.target.value) || 1)) })}
-                className="w-full rounded-[8px] border border-white/[0.06] bg-black/[0.14] px-2.5 py-1.5 text-[12px] text-text font-mono outline-none focus:border-accent-bright/30"
-              />
-            </div>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-text-3/60">Headless browser</span>
+            <ToggleSwitch
+              on={config.browser?.headless !== false}
+              onChange={() => void update({ browser: { ...(config.browser || {}), headless: config.browser?.headless === false } })}
+              disabled={saving}
+            />
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-[11px] text-text-3/60">Read-only root filesystem</span>
-            <ToggleSwitch on={config.readonlyRoot ?? false} onChange={() => void update({ readonlyRoot: !config.readonlyRoot })} disabled={saving} />
+            <span className="text-[11px] text-text-3/60">Enable noVNC observer</span>
+            <ToggleSwitch
+              on={config.browser?.enableNoVnc !== false}
+              onChange={() => void update({ browser: { ...(config.browser || {}), enableNoVnc: config.browser?.enableNoVnc === false } })}
+              disabled={saving}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-[11px] text-text-3/60">Mount uploads into sandbox browser</span>
+            <ToggleSwitch
+              on={config.browser?.mountUploads !== false}
+              onChange={() => void update({ browser: { ...(config.browser || {}), mountUploads: config.browser?.mountUploads === false } })}
+              disabled={saving}
+            />
           </div>
         </div>
       )}

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

@@ -57,6 +57,7 @@ export function ChatArea() {
   const refreshSession = useAppStore((s) => s.refreshSession)
   const appSettings = useAppStore((s) => s.appSettings)
   const messages = useChatStore((s) => s.messages)
+  const messageStartIndex = useChatStore((s) => s.messageStartIndex)
   const setMessages = useChatStore((s) => s.setMessages)
   const streaming = useChatStore((s) => s.streaming)
   const streamingSessionId = useChatStore((s) => s.streamingSessionId)
@@ -179,15 +180,15 @@ export function ChatArea() {
     const preserveLocalStream = chatState.streaming && chatState.streamingSessionId === requestedSessionId
     // Clear stale messages immediately so the skeleton loader shows instead of
     // the previous chat's messages flashing briefly during the fetch.
-    if (!preserveLocalStream) setMessages([])
+    if (!preserveLocalStream) setMessages([], { startIndex: 0, totalMessages: 0 })
     setMessagesLoading(true)
     if (!preserveLocalStream) {
       useChatStore.setState({ streaming: false, streamingSessionId: null, streamSource: null, streamText: '', assistantRenderId: null, toolEvents: [] })
     }
     fetchMessagesPaginated(requestedSessionId, 100).then((data) => {
       if (cancelled || selectActiveSessionId(useAppStore.getState()) !== requestedSessionId) return
-      setMessages(data.messages)
-      useChatStore.setState({ hasMoreMessages: data.hasMore, totalMessages: data.total })
+      setMessages(data.messages, { startIndex: data.startIndex, totalMessages: data.total })
+      useChatStore.setState({ hasMoreMessages: data.hasMore })
     }).catch((err) => {
       if (cancelled || selectActiveSessionId(useAppStore.getState()) !== requestedSessionId) return
       console.error('Failed to load messages:', err)
@@ -197,6 +198,12 @@ export function ChatArea() {
         fallbackSession?.messages?.length
           ? fallbackSession.messages
           : (fallbackLastMessage ? [fallbackLastMessage] : []),
+        {
+          startIndex: 0,
+          totalMessages: fallbackSession?.messages?.length
+            ? fallbackSession.messages.length
+            : (fallbackLastMessage ? 1 : 0),
+        },
       )
     }).finally(() => {
       if (cancelled || selectActiveSessionId(useAppStore.getState()) !== requestedSessionId) return
@@ -268,6 +275,8 @@ export function ChatArea() {
   const shouldPollMessages = !!sessionId && (isServerActive || isOngoingMonitored)
   const messagesRef = useRef(messages)
   messagesRef.current = messages
+  const messageStartIndexRef = useRef(messageStartIndex)
+  messageStartIndexRef.current = messageStartIndex
   const isServerActiveRef = useRef(isServerActive)
   isServerActiveRef.current = isServerActive
   const ttsEnabledRef = useRef(ttsEnabled)
@@ -287,8 +296,9 @@ export function ChatArea() {
       if (currentChatState.streaming && currentChatState.streamingSessionId === sessionId && currentChatState.streamSource === 'local') return
       const previous = messagesRef.current
       if (messagesDiffer(msgs, previous)) {
-        const newMsgs = msgs.length > previous.length ? msgs.slice(previous.length) : []
-        setMessages(msgs)
+        const previousEndIndex = messageStartIndexRef.current + previous.length
+        const newMsgs = msgs.length > previousEndIndex ? msgs.slice(previousEndIndex) : []
+        setMessages(msgs, { startIndex: 0, totalMessages: msgs.length })
         if (ttsEnabledRef.current && typeof document !== 'undefined' && document.visibilityState === 'visible') {
           const latestAssistant = [...newMsgs].reverse().find((m) => {
             if (m.role !== 'assistant') return false
@@ -305,15 +315,34 @@ export function ChatArea() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId])
 
+  // Targeted message fetch that bypasses the streaming guard — used by
+  // refreshQueue to ensure persisted messages appear before sending queue
+  // items are cleaned up by timeout.
+  const syncMessagesForQueue = useCallback(async () => {
+    if (!sessionId) return
+    try {
+      const msgs = await fetchMessages(sessionId)
+      if (messagesDiffer(msgs, messagesRef.current)) {
+        setMessages(msgs, { startIndex: 0, totalMessages: msgs.length })
+      }
+    } catch (err) { console.error('Failed to sync messages for queue:', err) }
+  }, [sessionId, setMessages])
+
   const refreshQueue = useCallback(async () => {
     if (!sessionId) return
     try {
       await loadQueuedMessages(sessionId)
+      // If there are "sending" queue items, fetch messages so persisted
+      // versions appear before the queue item gets cleaned up.
+      const chatState = useChatStore.getState()
+      const hasSendingItems = chatState.queuedMessages.some(
+        (item) => item.sessionId === sessionId && item.sending,
+      )
+      if (hasSendingItems) void syncMessagesForQueue()
       // Bridge the gap between "queue item disappears" and "isServerActive propagates".
       // If the server picked up a queued run, immediately show the thinking indicator
       // so users don't see a blank gap waiting for loadSessions to propagate.
       const refreshedSession = useAppStore.getState().sessions[sessionId]
-      const chatState = useChatStore.getState()
       if (
         refreshedSession?.currentRunId
         && !chatState.streaming
@@ -324,7 +353,7 @@ export function ChatArea() {
     } catch (err) {
       console.error('Failed to refresh queue:', err)
     }
-  }, [loadQueuedMessages, sessionId, startServerStreamingPlaceholder])
+  }, [loadQueuedMessages, syncMessagesForQueue, sessionId, startServerStreamingPlaceholder])
 
   // Subscribe to WS messages for this session — always subscribe when session exists,
   // only enable fallback polling when actively needed
@@ -369,7 +398,7 @@ export function ChatArea() {
       && (state.streamingSessionId === sessionId || state.streamingSessionId == null)
     ) {
       // Server finished — clear all streaming state and fetch final messages
-      fetchMessages(sessionId).then(setMessages).catch(() => {})
+      fetchMessages(sessionId).then((msgs) => setMessages(msgs, { startIndex: 0, totalMessages: msgs.length })).catch(() => {})
       markSessionLocallyIdle(sessionId)
       useChatStore.setState({ streaming: false, streamingSessionId: null, streamSource: null, streamText: '', displayText: '', assistantRenderId: null, streamPhase: 'thinking', streamToolName: '', thinkingText: '', thinkingStartTime: 0 })
     }
@@ -404,7 +433,7 @@ export function ChatArea() {
     setConfirmClear(false)
     if (!sessionId) return
     await clearMessages(sessionId)
-    setMessages([])
+    setMessages([], { startIndex: 0, totalMessages: 0 })
     await refreshSession(sessionId)
   }, [refreshSession, sessionId, setMessages])
 

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

@@ -15,7 +15,6 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { timeAgoShort } from '@/lib/time-format'
 import { toast } from 'sonner'
 import { getEnabledCapabilityIds } from '@/lib/capability-selection'
-import { getMissionPath } from '@/lib/app/navigation'
 
 function shortPath(p: string): string {
   return (p || '').replace(/^\/Users\/\w+/, '~')
@@ -80,7 +79,6 @@ export function ChatCard({ session, active, onClick }: Props) {
     : session.name
   const connector = getSessionConnector(session, connectors)
   const queuedCount = Math.max(session.queuedCount ?? 0, optimisticQueuedCount)
-  const mission = session.missionSummary || null
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
   const explicitOptIn = session.heartbeatEnabled === true || agent?.heartbeatEnabled === true
   const intervalRaw = session.heartbeatIntervalSec ?? agent?.heartbeatIntervalSec ?? appSettings.heartbeatIntervalSec ?? DEFAULT_HEARTBEAT_INTERVAL_SEC
@@ -199,35 +197,6 @@ export function ChatCard({ session, active, onClick }: Props) {
           <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
           {queuedCount} queued {queuedCount === 1 ? 'message' : 'messages'} waiting
         </div>
-      ) : mission ? (
-        <div className="mt-1 flex items-center gap-2">
-          <div className={`min-w-0 truncate text-[13px] leading-relaxed flex items-center gap-1.5 ${
-            mission.status === 'waiting' || mission.status === 'failed' || mission.status === 'cancelled'
-              ? 'text-amber-300/75'
-              : mission.status === 'completed'
-                ? 'text-emerald-300/75'
-                : 'text-sky-300/75'
-          }`}>
-            <span className={`w-1.5 h-1.5 rounded-full ${
-              mission.status === 'waiting' || mission.status === 'failed' || mission.status === 'cancelled'
-                ? 'bg-amber-400'
-                : mission.status === 'completed'
-                  ? 'bg-emerald-400'
-                  : 'bg-sky-400'
-            }`} />
-            <span className="truncate">{mission.waitingReason || mission.currentStep || mission.objective}</span>
-          </div>
-          <button
-            type="button"
-            onClick={(event) => {
-              event.stopPropagation()
-              router.push(getMissionPath(mission.id))
-            }}
-            className="shrink-0 rounded-[8px] border border-white/[0.08] px-2 py-1 text-[10px] font-700 uppercase tracking-[0.08em] text-text-2 transition-colors hover:bg-white/[0.05]"
-          >
-            Mission
-          </button>
-        </div>
       ) : (
         <div className="text-[13px] text-text-2/50 truncate mt-1 leading-relaxed">{preview}</div>
       )}