@swarmclawai/swarmclaw 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swarmclawai/swarmclaw",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Self-hosted AI agent orchestration dashboard — manage LLM providers, orchestrate agent swarms, schedule tasks, and bridge agents to chat platforms.",
   "license": "MIT",
   "repository": {

package/src/app/page.tsx

@@ -5,6 +5,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { initAudioContext } from '@/lib/tts'
 import { getStoredAccessKey, clearStoredAccessKey, api } from '@/lib/api-client'
 import { connectWs, disconnectWs } from '@/lib/ws-client'
+import { fetchWithTimeout } from '@/lib/fetch-timeout'
 import { useWs } from '@/hooks/use-ws'
 import { AccessKeyGate } from '@/components/auth/access-key-gate'
 import { UserPicker } from '@/components/auth/user-picker'
@@ -12,6 +13,8 @@ import { SetupWizard } from '@/components/auth/setup-wizard'
 import { AppLayout } from '@/components/layout/app-layout'
 import { useViewRouter } from '@/hooks/use-view-router'
 
+const AUTH_CHECK_TIMEOUT_MS = 8_000
+
 function FullScreenLoader() {
   return (
     <div className="h-full flex flex-col items-center justify-center bg-bg overflow-hidden select-none">
@@ -158,11 +161,11 @@ export default function Home() {
     }
 
     try {
-      const res = await fetch('/api/auth', {
+      const res = await fetchWithTimeout('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ key }),
-      })
+      }, AUTH_CHECK_TIMEOUT_MS)
       if (res.ok) {
         setAuthenticated(true)
       } else {
@@ -171,8 +174,9 @@ export default function Home() {
       }
     } catch {
       setAuthenticated(true)
+    } finally {
+      setAuthChecked(true)
     }
-    setAuthChecked(true)
   }, [])
 
   // After auth, try to restore username from server settings

package/src/components/auth/access-key-gate.tsx

@@ -2,11 +2,14 @@
 
 import { useState, useEffect } from 'react'
 import { setStoredAccessKey } from '@/lib/api-client'
+import { fetchWithTimeout } from '@/lib/fetch-timeout'
 
 interface AccessKeyGateProps {
   onAuthenticated: () => void
 }
 
+const AUTH_CHECK_TIMEOUT_MS = 8_000
+
 export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const [key, setKey] = useState('')
   const [error, setError] = useState('')
@@ -19,16 +22,22 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const [copied, setCopied] = useState(false)
 
   useEffect(() => {
-    fetch('/api/auth')
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.firstTime && data.key) {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const res = await fetchWithTimeout('/api/auth', {}, AUTH_CHECK_TIMEOUT_MS)
+        const data = await res.json().catch(() => ({}))
+        if (!cancelled && data.firstTime && data.key) {
           setFirstTime(true)
           setGeneratedKey(data.key)
         }
-      })
-      .catch((err) => console.error('Auth check failed:', err))
-      .finally(() => setChecking(false))
+      } catch (err) {
+        console.error('Auth check failed:', err)
+      } finally {
+        if (!cancelled) setChecking(false)
+      }
+    })()
+    return () => { cancelled = true }
   }, [])
 
   const handleCopyKey = async () => {
@@ -44,14 +53,16 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const handleClaimKey = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/api/auth', {
+      const res = await fetchWithTimeout('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ key: generatedKey }),
-      })
+      }, AUTH_CHECK_TIMEOUT_MS)
       if (res.ok) {
         setStoredAccessKey(generatedKey)
         onAuthenticated()
+      } else {
+        setError('Invalid access key')
       }
     } catch {
       setError('Connection failed')
@@ -69,11 +80,11 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
     setError('')
 
     try {
-      const res = await fetch('/api/auth', {
+      const res = await fetchWithTimeout('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ key: trimmed }),
-      })
+      }, AUTH_CHECK_TIMEOUT_MS)
       if (res.ok) {
         setStoredAccessKey(trimmed)
         onAuthenticated()

package/src/components/chat/message-bubble.tsx

@@ -90,6 +90,12 @@ const STATUS_COLORS: Record<string, string> = {
   blocked: '#EF4444',
 }
 
+function isGeneratedBrowserScreenshot(url: string): boolean {
+  const match = url.match(/\/api\/uploads\/([^/?#]+)/)
+  if (!match?.[1]) return false
+  return /^(browser|screenshot)-\d+\./i.test(match[1])
+}
+
 // AttachmentChip, parseAttachmentUrl, regex constants, and FILE_TYPE_COLORS
 // are now imported from @/components/shared/attachment-chip
 
@@ -162,6 +168,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     // Collect URLs from the visible (last) tool event to avoid showing duplicates
     const lastOutput = toolEvents[toolEvents.length - 1]?.output || ''
     const visibleMedia = extractMedia(lastOutput)
+    const hasNamedVisibleImage = visibleMedia.images.some((url) => !isGeneratedBrowserScreenshot(url))
     const seen = new Set<string>([
       ...visibleMedia.images,
       ...visibleMedia.videos,
@@ -175,7 +182,10 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     for (const ev of toolEvents.slice(0, -1)) {
       if (!ev.output) continue
       const m = extractMedia(ev.output)
-      for (const url of m.images) { if (!seen.has(url)) { seen.add(url); images.push(url) } }
+      for (const url of m.images) {
+        if (hasNamedVisibleImage && isGeneratedBrowserScreenshot(url)) continue
+        if (!seen.has(url)) { seen.add(url); images.push(url) }
+      }
       for (const url of m.videos) { if (!seen.has(url)) { seen.add(url); videos.push(url) } }
       for (const p of m.pdfs) { if (!seen.has(p.url)) { seen.add(p.url); pdfs.push(p) } }
       for (const f of m.files) { if (!seen.has(f.url)) { seen.add(f.url); files.push(f) } }

package/src/components/chat/tool-call-bubble.test.ts

@@ -0,0 +1,28 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { extractMedia } from './tool-call-bubble'
+
+describe('extractMedia', () => {
+  it('dedupes browser-* screenshot variants when screenshot-* exists', () => {
+    const output = [
+      '![Screenshot](/api/uploads/browser-1772498741525.png)',
+      '![Screenshot](/api/uploads/screenshot-1772498741526.png)',
+      'Saved to: example_screenshot.png',
+    ].join('\n')
+
+    const media = extractMedia(output)
+    assert.deepEqual(media.images, ['/api/uploads/screenshot-1772498741526.png'])
+    assert.equal(media.cleanText, 'Saved to: example_screenshot.png')
+  })
+
+  it('keeps browser-* screenshot when it is the only image artifact', () => {
+    const output = [
+      '![Screenshot](/api/uploads/browser-1772498741525.png)',
+      'Saved to: example_screenshot.png',
+    ].join('\n')
+
+    const media = extractMedia(output)
+    assert.deepEqual(media.images, ['/api/uploads/browser-1772498741525.png'])
+    assert.equal(media.cleanText, 'Saved to: example_screenshot.png')
+  })
+})

package/src/components/chat/tool-call-bubble.tsx

@@ -265,6 +265,7 @@ export function extractMedia(output: string): { images: string[]; videos: string
   const videos: string[] = []
   const pdfs: { name: string; url: string }[] = []
   const files: { name: string; url: string }[] = []
+  const imageEntries: Array<{ filename: string; url: string }> = []
 
   // Extract ![alt](/api/uploads/filename) — detect videos vs images by extension
   let cleanText = output.replace(/!\[([^\]]*)\]\(\/api\/uploads\/([^)]+)\)/g, (_match, _alt, filename) => {
@@ -272,7 +273,7 @@ export function extractMedia(output: string): { images: string[]; videos: string
     if (/\.(mp4|webm|mov|avi)$/i.test(filename)) {
       videos.push(url)
     } else {
-      images.push(url)
+      imageEntries.push({ filename, url })
     }
     return ''
   })
@@ -291,6 +292,17 @@ export function extractMedia(output: string): { images: string[]; videos: string
   // Clean up leftover whitespace
   cleanText = cleanText.replace(/\n{3,}/g, '\n\n').trim()
 
+  // Playwright screenshot calls can surface both browser-*.png and screenshot-*.png
+  // for the same capture; prefer screenshot-* to avoid duplicate UI images.
+  const hasScreenshotVariant = imageEntries.some((entry) => /^screenshot-\d+\./i.test(entry.filename))
+  const seenImages = new Set<string>()
+  for (const entry of imageEntries) {
+    if (hasScreenshotVariant && /^browser-\d+\./i.test(entry.filename)) continue
+    if (seenImages.has(entry.url)) continue
+    seenImages.add(entry.url)
+    images.push(entry.url)
+  }
+
   return { images, videos, pdfs, files, cleanText }
 }
 

package/src/components/chatrooms/chatroom-input.tsx

@@ -5,6 +5,7 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { FilePreview } from '@/components/shared/file-preview'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { uploadImage } from '@/lib/upload'
+import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 import type { Agent } from '@/types'
 
 interface Props {
@@ -33,7 +34,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
   const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
     if (!chatroomId) return
-    const draft = localStorage.getItem(`sc_draft_cr_${chatroomId}`)
+    const draft = safeStorageGet(`sc_draft_cr_${chatroomId}`)
     setText(draft || '')
   }, [chatroomId])
 
@@ -42,8 +43,8 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
     if (!chatroomId) return
     if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
     draftTimerRef.current = setTimeout(() => {
-      if (text) localStorage.setItem(`sc_draft_cr_${chatroomId}`, text)
-      else localStorage.removeItem(`sc_draft_cr_${chatroomId}`)
+      if (text) safeStorageSet(`sc_draft_cr_${chatroomId}`, text)
+      else safeStorageRemove(`sc_draft_cr_${chatroomId}`)
     }, 300)
     return () => { if (draftTimerRef.current) clearTimeout(draftTimerRef.current) }
   }, [text, chatroomId])
@@ -167,7 +168,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
       if ((text.trim() || pendingFiles.length) && !disabled) {
         onSend(text)
         setText('')
-        if (chatroomId) localStorage.removeItem(`sc_draft_cr_${chatroomId}`)
+        if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
         setShowMentions(false)
       }
     }
@@ -294,7 +295,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
             if ((text.trim() || pendingFiles.length) && !disabled) {
               onSend(text)
               setText('')
-              if (chatroomId) localStorage.removeItem(`sc_draft_cr_${chatroomId}`)
+              if (chatroomId) safeStorageRemove(`sc_draft_cr_${chatroomId}`)
               setShowMentions(false)
             }
           }}

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

@@ -8,6 +8,7 @@ import { useAutoResize } from '@/hooks/use-auto-resize'
 import { useSpeechRecognition } from '@/hooks/use-speech-recognition'
 import { FilePreview } from '@/components/shared/file-preview'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 
 interface Props {
   streaming: boolean
@@ -36,7 +37,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
   const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
     if (!sessionId) return
-    const draft = localStorage.getItem(`sc_draft_${sessionId}`)
+    const draft = safeStorageGet(`sc_draft_${sessionId}`)
     setValue(draft || '')
   }, [sessionId])
 
@@ -45,8 +46,8 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     if (!sessionId) return
     if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
     draftTimerRef.current = setTimeout(() => {
-      if (value) localStorage.setItem(`sc_draft_${sessionId}`, value)
-      else localStorage.removeItem(`sc_draft_${sessionId}`)
+      if (value) safeStorageSet(`sc_draft_${sessionId}`, value)
+      else safeStorageRemove(`sc_draft_${sessionId}`)
     }, 300)
     return () => { if (draftTimerRef.current) clearTimeout(draftTimerRef.current) }
   }, [value, sessionId])
@@ -65,7 +66,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     }
     onSend(text || 'See attached file(s).')
     setValue('')
-    if (sessionId) localStorage.removeItem(`sc_draft_${sessionId}`)
+    if (sessionId) safeStorageRemove(`sc_draft_${sessionId}`)
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }

package/src/components/layout/app-layout.tsx

@@ -58,6 +58,7 @@ import { ChatArea } from '@/components/chat/chat-area'
 import { CanvasPanel } from '@/components/canvas/canvas-panel'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { api } from '@/lib/api-client'
+import { safeStorageGet, safeStorageSet } from '@/lib/safe-storage'
 import type { AppView } from '@/types'
 
 const RAIL_EXPANDED_KEY = 'sc_rail_expanded'
@@ -118,9 +119,8 @@ export function AppLayout() {
   }, [handleShortcutKey])
 
   useEffect(() => {
-    if (typeof window === 'undefined') return
-    if (localStorage.getItem(STAR_NOTIFICATION_KEY)) return
-    localStorage.setItem(STAR_NOTIFICATION_KEY, '1')
+    if (safeStorageGet(STAR_NOTIFICATION_KEY)) return
+    safeStorageSet(STAR_NOTIFICATION_KEY, '1')
     void api('POST', '/notifications', {
       type: 'info',
       title: 'Enjoying SwarmClaw?',
@@ -143,15 +143,14 @@ export function AppLayout() {
   }, [appSettings.themeHue])
 
   const [railExpanded, setRailExpanded] = useState(() => {
-    if (typeof window === 'undefined') return true
-    const stored = localStorage.getItem(RAIL_EXPANDED_KEY)
+    const stored = safeStorageGet(RAIL_EXPANDED_KEY)
     return stored === null ? true : stored === 'true'
   })
 
   const toggleRail = () => {
     const next = !railExpanded
     setRailExpanded(next)
-    localStorage.setItem(RAIL_EXPANDED_KEY, String(next))
+    safeStorageSet(RAIL_EXPANDED_KEY, String(next))
   }
 
   const handleSwitchUser = () => {

package/src/components/logs/log-list.tsx

@@ -5,6 +5,7 @@ import { api } from '@/lib/api-client'
 import { useWs } from '@/hooks/use-ws'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { safeStorageGetJson, safeStorageSet } from '@/lib/safe-storage'
 
 interface LogEntry {
   time: string
@@ -38,10 +39,9 @@ export function LogList() {
   const [selected, setSelected] = useState<LogEntry | null>(null)
   const [creatingTask, setCreatingTask] = useState(false)
   const [taskAgentId, setTaskAgentId] = useState('')
-  const [savedFilters, setSavedFilters] = useState<Array<{ name: string; levels: string[]; search: string }>>(() => {
-    if (typeof window === 'undefined') return []
-    try { return JSON.parse(localStorage.getItem('sc_log_filters') || '[]') } catch { return [] }
-  })
+  const [savedFilters, setSavedFilters] = useState<Array<{ name: string; levels: string[]; search: string }>>(
+    () => safeStorageGetJson<Array<{ name: string; levels: string[]; search: string }>>('sc_log_filters', []),
+  )
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const agents = useAppStore((s) => s.agents)
@@ -169,7 +169,7 @@ export function LogList() {
                   onClick={(e) => {
                     e.stopPropagation()
                     const next = savedFilters.filter((_, j) => j !== i)
-                    localStorage.setItem('sc_log_filters', JSON.stringify(next))
+                    safeStorageSet('sc_log_filters', JSON.stringify(next))
                     setSavedFilters(next)
                   }}
                   className="text-accent-bright/50 hover:text-red-400 ml-0.5"
@@ -232,9 +232,9 @@ export function LogList() {
               const name = prompt('Filter name:')
               if (!name?.trim()) return
               const filter = { name: name.trim(), levels: levelFilter, search }
-              const existing = JSON.parse(localStorage.getItem('sc_log_filters') || '[]')
+              const existing = safeStorageGetJson<Array<{ name: string; levels: string[]; search: string }>>('sc_log_filters', [])
               existing.push(filter)
-              localStorage.setItem('sc_log_filters', JSON.stringify(existing))
+              safeStorageSet('sc_log_filters', JSON.stringify(existing))
               setSavedFilters(existing)
             }}
             className="px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-white/[0.04] text-text-3 hover:text-accent-bright hover:bg-accent-soft"

package/src/components/sessions/new-session-sheet.tsx

@@ -13,6 +13,7 @@ import { SheetFooter } from '@/components/shared/sheet-footer'
 import { inputClass } from '@/components/shared/form-styles'
 import type { ProviderType, SessionTool } from '@/types'
 import { SectionLabel } from '@/components/shared/section-label'
+import { safeStorageGet, safeStorageRemove, safeStorageSet } from '@/lib/safe-storage'
 
 export function NewSessionSheet() {
   const open = useAppStore((s) => s.newSessionOpen)
@@ -64,7 +65,7 @@ export function NewSessionSheet() {
       setOllamaMode('local')
       // Auto-select last used agent, or default agent if no history
       const agentsList = Object.values(agents)
-      const lastAgentId = typeof window !== 'undefined' ? localStorage.getItem('swarmclaw-last-agent') : null
+      const lastAgentId = safeStorageGet('swarmclaw-last-agent')
       const lastAgent = lastAgentId ? agentsList.find((a) => a.id === lastAgentId) : null
       const defaultAgent = lastAgent || agentsList.find((a) => a.id === 'default') || agentsList[0]
       if (defaultAgent) {
@@ -153,9 +154,9 @@ export function NewSessionSheet() {
     )
     // Remember agent selection for next time
     if (selectedAgentId) {
-      localStorage.setItem('swarmclaw-last-agent', selectedAgentId)
+      safeStorageSet('swarmclaw-last-agent', selectedAgentId)
     } else {
-      localStorage.removeItem('swarmclaw-last-agent')
+      safeStorageRemove('swarmclaw-last-agent')
     }
     updateSessionInStore(s)
     setCurrentSession(s.id)

package/src/hooks/use-media-query.ts

@@ -2,17 +2,43 @@
 
 import { useCallback, useSyncExternalStore } from 'react'
 
+function supportsMatchMedia(): boolean {
+  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+}
+
+function getMatch(query: string): boolean {
+  if (!supportsMatchMedia()) return false
+  try {
+    return window.matchMedia(query).matches
+  } catch {
+    return false
+  }
+}
+
 export function useMediaQuery(query: string): boolean {
   const subscribe = useCallback(
     (callback: () => void) => {
-      const mql = window.matchMedia(query)
-      mql.addEventListener('change', callback)
-      return () => mql.removeEventListener('change', callback)
+      if (!supportsMatchMedia()) return () => {}
+
+      let mql: MediaQueryList
+      try {
+        mql = window.matchMedia(query)
+      } catch {
+        return () => {}
+      }
+
+      if (typeof mql.addEventListener === 'function') {
+        mql.addEventListener('change', callback)
+        return () => mql.removeEventListener('change', callback)
+      }
+
+      mql.addListener(callback)
+      return () => mql.removeListener(callback)
     },
     [query],
   )
 
-  const getSnapshot = () => window.matchMedia(query).matches
+  const getSnapshot = () => getMatch(query)
 
   // Return false during SSR — matches initial client render before hydration
   const getServerSnapshot = () => false

package/src/lib/api-client.ts

@@ -1,39 +1,27 @@
+import { fetchWithTimeout } from '@/lib/fetch-timeout'
+import { safeStorageGet, safeStorageSet, safeStorageRemove } from '@/lib/safe-storage'
+
 const ACCESS_KEY_STORAGE = 'sc_access_key'
 const DEFAULT_API_TIMEOUT_MS = 12_000
 const DEFAULT_GET_RETRIES = 2
 const RETRY_DELAY_BASE_MS = 300
 
 export function getStoredAccessKey(): string {
-  if (typeof window === 'undefined') return ''
-  return localStorage.getItem(ACCESS_KEY_STORAGE) || ''
+  return safeStorageGet(ACCESS_KEY_STORAGE) || ''
 }
 
 export function setStoredAccessKey(key: string) {
-  localStorage.setItem(ACCESS_KEY_STORAGE, key)
+  safeStorageSet(ACCESS_KEY_STORAGE, key)
 }
 
 export function clearStoredAccessKey() {
-  localStorage.removeItem(ACCESS_KEY_STORAGE)
+  safeStorageRemove(ACCESS_KEY_STORAGE)
 }
 
 function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
-async function fetchWithTimeout(
-  input: RequestInfo | URL,
-  init: RequestInit,
-  timeoutMs: number,
-): Promise<Response> {
-  const controller = new AbortController()
-  const timer = setTimeout(() => controller.abort(), timeoutMs)
-  try {
-    return await fetch(input, { ...init, signal: controller.signal })
-  } finally {
-    clearTimeout(timer)
-  }
-}
-
 function isAbortError(err: unknown): boolean {
   if (!err || typeof err !== 'object') return false
   return (err as { name?: string }).name === 'AbortError'

package/src/lib/fetch-timeout.ts

@@ -0,0 +1,17 @@
+const MIN_TIMEOUT_MS = 1_000
+
+export async function fetchWithTimeout(
+  input: RequestInfo | URL,
+  init: RequestInit = {},
+  timeoutMs: number,
+): Promise<Response> {
+  const boundedTimeout = Math.max(MIN_TIMEOUT_MS, Math.trunc(timeoutMs))
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), boundedTimeout)
+
+  try {
+    return await fetch(input, { ...init, signal: controller.signal })
+  } finally {
+    clearTimeout(timer)
+  }
+}

package/src/lib/notification-sounds.ts

@@ -1,3 +1,5 @@
+import { safeStorageGet, safeStorageSet } from '@/lib/safe-storage'
+
 let ctx: AudioContext | null = null
 
 function ensureCtx(): AudioContext | null {
@@ -48,11 +50,9 @@ export function playError() {
 const LS_KEY = 'sc_sound_notifications'
 
 export function getSoundEnabled(): boolean {
-  if (typeof window === 'undefined') return false
-  return localStorage.getItem(LS_KEY) === '1'
+  return safeStorageGet(LS_KEY) === '1'
 }
 
 export function setSoundEnabled(v: boolean) {
-  if (typeof window === 'undefined') return
-  localStorage.setItem(LS_KEY, v ? '1' : '0')
+  safeStorageSet(LS_KEY, v ? '1' : '0')
 }

package/src/lib/safe-storage.ts

@@ -0,0 +1,42 @@
+function canUseLocalStorage(): boolean {
+  return typeof window !== 'undefined' && !!window.localStorage
+}
+
+export function safeStorageGet(key: string): string | null {
+  if (!canUseLocalStorage()) return null
+  try {
+    return window.localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+export function safeStorageSet(key: string, value: string): boolean {
+  if (!canUseLocalStorage()) return false
+  try {
+    window.localStorage.setItem(key, value)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function safeStorageRemove(key: string): boolean {
+  if (!canUseLocalStorage()) return false
+  try {
+    window.localStorage.removeItem(key)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function safeStorageGetJson<T>(key: string, fallback: T): T {
+  const raw = safeStorageGet(key)
+  if (!raw) return fallback
+  try {
+    return JSON.parse(raw) as T
+  } catch {
+    return fallback
+  }
+}

package/src/lib/server/session-tools/web-output.test.ts

@@ -0,0 +1,29 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { dedupeScreenshotMarkdownLines } from './web-output'
+
+describe('dedupeScreenshotMarkdownLines', () => {
+  it('prefers screenshot-* image when both browser-* and screenshot-* variants are present', () => {
+    const parts = [
+      '![Screenshot](/api/uploads/browser-1772498741525.png)',
+      '![Screenshot](/api/uploads/screenshot-1772498741526.png)',
+      'Saved to: example_screenshot.png',
+    ]
+
+    const next = dedupeScreenshotMarkdownLines(parts)
+    assert.deepEqual(next, [
+      '![Screenshot](/api/uploads/screenshot-1772498741526.png)',
+      'Saved to: example_screenshot.png',
+    ])
+  })
+
+  it('keeps single image output untouched', () => {
+    const parts = [
+      '![Screenshot](/api/uploads/browser-1772498741525.png)',
+      'Saved to: example_screenshot.png',
+    ]
+
+    const next = dedupeScreenshotMarkdownLines(parts)
+    assert.deepEqual(next, parts)
+  })
+})

package/src/lib/server/session-tools/web-output.ts

@@ -0,0 +1,16 @@
+export function dedupeScreenshotMarkdownLines(parts: string[]): string[] {
+  const imageLineRe = /^!\[[^\]]*]\(\/api\/uploads\/([^)]+)\)$/
+  const imageLines = parts
+    .map((line, index) => ({ line: line.trim(), index }))
+    .map((entry) => {
+      const match = entry.line.match(imageLineRe)
+      return match ? { ...entry, filename: match[1] } : null
+    })
+    .filter((entry): entry is { line: string; index: number; filename: string } => !!entry)
+
+  if (imageLines.length <= 1) return parts
+
+  const preferred = imageLines.find((entry) => !entry.filename.startsWith('browser-')) || imageLines[0]
+  const keepIndex = preferred.index
+  return parts.filter((_, index) => !imageLines.some((entry) => entry.index === index) || index === keepIndex)
+}

package/src/lib/server/session-tools/web.ts

@@ -8,6 +8,7 @@ import type { ToolBuildContext } from './context'
 import { spawnSync } from 'child_process'
 import { safePath, truncate, MAX_OUTPUT, findBinaryOnPath } from './context'
 import { getSearchProvider } from './search-providers'
+import { dedupeScreenshotMarkdownLines } from './web-output'
 
 // ---------------------------------------------------------------------------
 // Search result compression — summarize verbose results before injecting into context
@@ -277,7 +278,8 @@ export function buildWebTools(bctx: ToolBuildContext): StructuredToolInterface[]
       }
 
       if (Array.isArray(content)) {
-        const parts: string[] = []
+        let parts: string[] = []
+        const isScreenshotTool = toolName === 'browser_take_screenshot'
         const contentHasBinaryImage = content.some((c) => c.type === 'image' && !!c.data)
         for (const c of content) {
           if (c.type === 'image' && c.data) {
@@ -334,6 +336,8 @@ export function buildWebTools(bctx: ToolBuildContext): StructuredToolInterface[]
             }
           }
         }
+        if (isScreenshotTool) parts = dedupeScreenshotMarkdownLines(parts)
+
         if (savedPaths.length > 0) {
           const unique = Array.from(new Set(savedPaths))
           const rendered = unique.map((p) => path.relative(cwd, p) || '.').join(', ')

package/src/lib/view-routes.ts

@@ -49,7 +49,11 @@ export function parsePath(pathname: string): { view: AppView; id: string | null
     if (pathname.startsWith(path + '/')) {
       const rest = pathname.slice(path.length + 1)
       if (rest && !rest.includes('/') && VIEWS_WITH_ID.has(view)) {
-        return { view, id: decodeURIComponent(rest) }
+        try {
+          return { view, id: decodeURIComponent(rest) }
+        } catch {
+          return null
+        }
       }
     }
   }

package/src/stores/use-app-store.ts

@@ -7,6 +7,7 @@ import { fetchAgents } from '../lib/agents'
 import { fetchSchedules } from '../lib/schedules'
 import { fetchTasks } from '../lib/tasks'
 import { api } from '../lib/api-client'
+import { safeStorageGet, safeStorageGetJson, safeStorageRemove, safeStorageSet } from '../lib/safe-storage'
 
 interface AppState {
   currentUser: string | null
@@ -209,14 +210,13 @@ export const useAppStore = create<AppState>((set, get) => ({
   currentUser: null,
   _hydrated: false,
   hydrate: () => {
-    if (typeof window === 'undefined') return
-    const user = localStorage.getItem('sc_user')
-    const savedAgentId = localStorage.getItem('sc_agent')
+    const user = safeStorageGet('sc_user')
+    const savedAgentId = safeStorageGet('sc_agent')
     set({ currentUser: user, currentAgentId: savedAgentId, _hydrated: true })
   },
   setUser: (user) => {
-    if (user) localStorage.setItem('sc_user', user)
-    else localStorage.removeItem('sc_user')
+    if (user) safeStorageSet('sc_user', user)
+    else safeStorageRemove('sc_user')
     set({ currentUser: user })
   },
 
@@ -324,11 +324,11 @@ export const useAppStore = create<AppState>((set, get) => ({
   setCurrentAgent: async (id) => {
     if (!id) {
       set({ currentAgentId: null })
-      if (typeof window !== 'undefined') localStorage.removeItem('sc_agent')
+      safeStorageRemove('sc_agent')
       return
     }
     set({ currentAgentId: id })
-    if (typeof window !== 'undefined') localStorage.setItem('sc_agent', id)
+    safeStorageSet('sc_agent', id)
     try {
       const user = get().currentUser || 'default'
       const session = await api<Session>('POST', `/agents/${id}/thread`, { user })
@@ -628,13 +628,11 @@ export const useAppStore = create<AppState>((set, get) => ({
   },
 
   // Unread tracking
-  lastReadTimestamps: typeof window !== 'undefined'
-    ? (() => { try { return JSON.parse(localStorage.getItem('sc_last_read') || '{}') } catch { return {} } })()
-    : {},
+  lastReadTimestamps: safeStorageGetJson<Record<string, number>>('sc_last_read', {}),
   markChatRead: (id) => {
     const ts = { ...get().lastReadTimestamps, [id]: Date.now() }
     set({ lastReadTimestamps: ts })
-    try { localStorage.setItem('sc_last_read', JSON.stringify(ts)) } catch { /* ignore */ }
+    safeStorageSet('sc_last_read', JSON.stringify(ts))
   },
 
   // Notifications