@swarmclawai/swarmclaw 1.2.6 → 1.2.8

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

@@ -16,6 +16,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'
@@ -1139,7 +1140,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 +1164,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 +1334,85 @@ function AutomationsSection({ schedules, agent }: { schedules: Array<{ id: strin
   )
 }
 
-// ─── Sandbox Config Section ──────────────────────────────────────
+// ─── Execute Config Section ──────────────────────────────────────
+
+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 SandboxConfigSection({ agent }: { agent: Agent }) {
+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 +1423,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 +1446,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/message-list.tsx

@@ -10,6 +10,7 @@ import { selectActiveSessionId } from '@/stores/slices/session-slice'
 import { api } from '@/lib/app/api-client'
 import { buildStreamingAwareMessageList } from '@/lib/chat/chat-streaming-state'
 import { dedupeMessagesForDisplay } from '@/lib/chat/chat-display'
+import { mergeQueuedTranscriptMessages } from '@/lib/chat/queued-message-queue'
 import { shouldShowDateSeparator } from '@/lib/chat/message-list-utils'
 import { errorMessage } from '@/lib/shared-utils'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
@@ -190,7 +191,9 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   const assistantRenderId = useChatStore((s) => s.assistantRenderId)
   const thinkingStartTime = useChatStore((s) => s.thinkingStartTime)
   const hasLiveArtifacts = useChatStore(selectHasLiveArtifacts)
+  const messageStartIndex = useChatStore((s) => s.messageStartIndex)
   const setMessages = useChatStore((s) => s.setMessages)
+  const queuedMessages = useChatStore((s) => s.queuedMessages)
   const retryLastMessage = useChatStore((s) => s.retryLastMessage)
   const editAndResend = useChatStore((s) => s.editAndResend)
   const sendMessage = useChatStore((s) => s.sendMessage)
@@ -234,20 +237,23 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   // Use refs for callbacks so transcriptNodes memo doesn't bust on every messages change
   const messagesCallbackRef = useRef(messages)
   messagesCallbackRef.current = messages
+  const messageStartIndexRef = useRef(messageStartIndex)
+  messageStartIndexRef.current = messageStartIndex
   const sessionIdRef = useRef(sessionId)
   sessionIdRef.current = sessionId
 
-  const toggleBookmark = useCallback(async (index: number) => {
+  const toggleBookmark = useCallback(async (absoluteIndex: number) => {
     const sid = sessionIdRef.current
     const msgs = messagesCallbackRef.current
+    const localIndex = absoluteIndex - messageStartIndexRef.current
     if (!sid) return
-    const msg = msgs[index]
+    const msg = msgs[localIndex]
     if (!msg) return
     const next = !msg.bookmarked
     try {
-      await api('PUT', `/chats/${sid}/messages`, { messageIndex: index, bookmarked: next })
+      await api('PUT', `/chats/${sid}/messages`, { messageIndex: absoluteIndex, bookmarked: next })
       const updated = [...msgs]
-      updated[index] = { ...updated[index], bookmarked: next }
+      updated[localIndex] = { ...updated[localIndex], bookmarked: next }
       setMessages(updated)
     } catch (err: unknown) {
       console.error('Failed to toggle bookmark:', errorMessage(err))
@@ -298,21 +304,26 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
     return dedupeMessagesForDisplay(displayedMessages)
   }, [messages, showAlerts, showOk])
 
+  const displayedMessages = useMemo(
+    () => mergeQueuedTranscriptMessages(baseDisplayedMessages, queuedMessages, sessionId),
+    [baseDisplayedMessages, queuedMessages, sessionId],
+  )
+
   const latestPersistedStreamingMessage = useMemo(() => {
-    for (let i = baseDisplayedMessages.length - 1; i >= 0; i -= 1) {
-      const candidate = baseDisplayedMessages[i]
+    for (let i = displayedMessages.length - 1; i >= 0; i -= 1) {
+      const candidate = displayedMessages[i]
       if (candidate.role === 'assistant' && candidate.streaming === true) {
         return candidate
       }
     }
     return null
-  }, [baseDisplayedMessages])
+  }, [displayedMessages])
 
   const currentRunHasCompletedAssistant = useMemo(
     () => (
       streaming
       && thinkingStartTime > 0
-      && baseDisplayedMessages.some((message) => (
+      && displayedMessages.some((message) => (
         message.role === 'assistant'
         && message.streaming !== true
         && message.kind !== 'system'
@@ -321,7 +332,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
         && message.time >= thinkingStartTime
       ))
     ),
-    [baseDisplayedMessages, streaming, thinkingStartTime],
+    [displayedMessages, streaming, thinkingStartTime],
   )
 
   const showLiveStreamRow = streaming
@@ -330,14 +341,14 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
     && (hasLiveArtifacts || !!latestPersistedStreamingMessage)
 
   const streamingAwareMessages = useMemo(() => (
-    buildStreamingAwareMessageList(baseDisplayedMessages, {
+    buildStreamingAwareMessageList(displayedMessages, {
       localStreaming: streaming,
       hasLiveArtifacts,
       assistantRenderId,
       showLiveRow: showLiveStreamRow,
       syntheticAssistant: latestPersistedStreamingMessage,
     })
-  ), [assistantRenderId, baseDisplayedMessages, hasLiveArtifacts, latestPersistedStreamingMessage, showLiveStreamRow, streaming])
+  ), [assistantRenderId, displayedMessages, hasLiveArtifacts, latestPersistedStreamingMessage, showLiveStreamRow, streaming])
 
   const filteredMessages = useMemo(() => {
     let nextMessages = bookmarkFilter
@@ -367,23 +378,26 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   const originalIndexMap = useMemo(() => {
     const indexMap = new Map<Message, number>()
     messages.forEach((msg, index) => {
-      indexMap.set(msg, index)
+      indexMap.set(msg, messageStartIndex + index)
     })
     return indexMap
-  }, [messages])
+  }, [messageStartIndex, messages])
 
-  const handleDeleteMessage = useCallback(async (messageIndex: number) => {
+  const handleDeleteMessage = useCallback(async (absoluteIndex: number) => {
     const sid = sessionIdRef.current
     const msgs = messagesCallbackRef.current
-    if (!sid || messageIndex < 0) return
+    const localIndex = absoluteIndex - messageStartIndexRef.current
+    if (!sid || absoluteIndex < 0 || localIndex < 0) return
     try {
-      await api('DELETE', `/chats/${sid}/messages`, { messageIndex })
-      setMessages(msgs.filter((_: Message, idx: number) => idx !== messageIndex))
+      await api('DELETE', `/chats/${sid}/messages`, { messageIndex: absoluteIndex })
+      setMessages(
+        msgs.filter((_: Message, idx: number) => idx !== localIndex),
+        { totalMessages: Math.max(0, totalMessages - 1) },
+      )
     } catch {
       // best-effort
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [setMessages, totalMessages])
 
   // Snapshot the settled count at memo time so it's captured in the closure.
   // Messages up to this count appear instantly; only new ones get entrance animations.

package/src/components/gateways/gateway-sheet.tsx

@@ -118,11 +118,14 @@ export function GatewaySheet() {
     setInvokeParamsText('{}')
   }, [open, editing, gatewayProfiles.length])
 
+  const refreshRef = useRef(refreshGatewayTopologyMutation)
+  refreshRef.current = refreshGatewayTopologyMutation
+
   const loadNodesAndDevices = useCallback(async (profileId: string) => {
     setNodesLoading(true)
     setNodesError('')
     try {
-      const result = await refreshGatewayTopologyMutation.mutateAsync(profileId)
+      const result = await refreshRef.current.mutateAsync(profileId)
       setNodes(result.nodes)
       setNodePairings(result.nodePairings)
       setDevicePairings(result.devicePairings)
@@ -136,7 +139,7 @@ export function GatewaySheet() {
     } finally {
       setNodesLoading(false)
     }
-  }, [refreshGatewayTopologyMutation])
+  }, [])
 
   useEffect(() => {
     if (!open || !editing?.id) return

package/src/lib/agent-execute-defaults.test.ts

@@ -0,0 +1,24 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import {
+  DEFAULT_AGENT_EXECUTE_CONFIG,
+  normalizeAgentExecuteConfig,
+} from '@/lib/agent-execute-defaults'
+
+test('normalizeAgentExecuteConfig defaults to sandbox with network enabled', () => {
+  const normalized = normalizeAgentExecuteConfig(undefined)
+
+  assert.equal(normalized.backend, 'sandbox')
+  assert.equal(normalized.network?.enabled, true)
+  assert.equal(normalized.timeout, DEFAULT_AGENT_EXECUTE_CONFIG.timeout)
+})
+
+test('normalizeAgentExecuteConfig preserves explicit host backend and clamps timeout', () => {
+  const normalized = normalizeAgentExecuteConfig({
+    backend: 'host',
+    timeout: 999,
+  })
+
+  assert.equal(normalized.backend, 'host')
+  assert.equal(normalized.timeout, 300)
+})

package/src/lib/agent-execute-defaults.ts

@@ -0,0 +1,62 @@
+import type { Agent } from '@/types'
+
+export type AgentExecuteConfig = NonNullable<Agent['executeConfig']>
+
+export const DEFAULT_AGENT_EXECUTE_CONFIG: AgentExecuteConfig = {
+  backend: 'sandbox',
+  network: {
+    enabled: true,
+  },
+  timeout: 30,
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+  return value as Record<string, unknown>
+}
+
+function normalizeStringList(value: unknown): string[] | undefined {
+  if (!Array.isArray(value)) return undefined
+  const values = value
+    .filter((entry): entry is string => typeof entry === 'string' && entry.trim().length > 0)
+    .map((entry) => entry.trim())
+  return values.length > 0 ? values : undefined
+}
+
+function normalizePositiveInt(value: unknown, fallback: number, min: number, max: number): number {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number.parseInt(value, 10)
+      : Number.NaN
+  if (!Number.isFinite(parsed)) return fallback
+  return Math.max(min, Math.min(max, Math.trunc(parsed)))
+}
+
+export function normalizeAgentExecuteConfig(config: Agent['executeConfig'] | unknown): AgentExecuteConfig {
+  const input = asRecord(config)
+  const networkInput = asRecord(input?.network)
+  const runtimesInput = asRecord(input?.runtimes)
+  const defaultNetworkEnabled = DEFAULT_AGENT_EXECUTE_CONFIG.network?.enabled ?? true
+  const allowedUrls = normalizeStringList(networkInput?.allowedUrls)
+  const credentials = normalizeStringList(input?.credentials)
+
+  return {
+    backend: input?.backend === 'host' ? 'host' : DEFAULT_AGENT_EXECUTE_CONFIG.backend,
+    network: {
+      enabled: networkInput?.enabled === false ? false : defaultNetworkEnabled,
+      ...(allowedUrls ? { allowedUrls } : {}),
+    },
+    ...(runtimesInput
+      ? {
+          runtimes: {
+            ...(typeof runtimesInput.python === 'boolean' ? { python: runtimesInput.python } : {}),
+            ...(typeof runtimesInput.javascript === 'boolean' ? { javascript: runtimesInput.javascript } : {}),
+            ...(typeof runtimesInput.sqlite === 'boolean' ? { sqlite: runtimesInput.sqlite } : {}),
+          },
+        }
+      : {}),
+    timeout: normalizePositiveInt(input?.timeout, DEFAULT_AGENT_EXECUTE_CONFIG.timeout ?? 30, 1, 300),
+    ...(credentials ? { credentials } : {}),
+  }
+}