@swarmclawai/swarmclaw 0.6.2 → 0.6.4

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

@@ -6,7 +6,6 @@ import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
 import { ThinkingIndicator } from './thinking-indicator'
@@ -47,9 +46,10 @@ function dateSeparator(ts: number): string {
 interface Props {
   messages: Message[]
   streaming: boolean
+  connectorFilter?: string | null
 }
 
-export function MessageList({ messages, streaming }: Props) {
+export function MessageList({ messages, streaming, connectorFilter = null }: Props) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
   const snapUntilRef = useRef(0)
@@ -119,9 +119,7 @@ export function MessageList({ messages, streaming }: Props) {
   // Bookmark filter
   const [bookmarkFilter, setBookmarkFilter] = useState(false)
 
-  // Connector source filter
-  const [connectorFilter, setConnectorFilter] = useState<string | null>(null)
-  const [connectorFilterCollapsed, setConnectorFilterCollapsed] = useState(false)
+  // Connector filtering is handled via connectorFilter prop from chat-area
 
   const toggleBookmark = useCallback(async (index: number) => {
     if (!sessionId) return
@@ -181,17 +179,6 @@ export function MessageList({ messages, streaming }: Props) {
     }
   }
 
-  // Collect unique connector sources for filter UI
-  const connectorSources = new Map<string, { platform: string; connectorName: string }>()
-  for (const msg of displayedMessages) {
-    if (msg.source?.connectorId && !connectorSources.has(msg.source.connectorId)) {
-      connectorSources.set(msg.source.connectorId, {
-        platform: msg.source.platform,
-        connectorName: msg.source.connectorName,
-      })
-    }
-  }
-
   // Apply bookmark + connector filter
   let filteredMessages = bookmarkFilter
     ? displayedMessages.filter((msg) => msg.bookmarked)
@@ -407,61 +394,6 @@ export function MessageList({ messages, streaming }: Props) {
         </div>
       )}
 
-      {/* Connector source filter — shown when connector messages exist */}
-      {connectorSources.size > 0 && (
-        <div className="flex items-center gap-1.5 px-6 md:px-12 lg:px-16 py-1.5 border-b border-white/[0.04]">
-          <button
-            onClick={() => setConnectorFilterCollapsed((c) => !c)}
-            className="flex items-center gap-1 text-[10px] text-text-3/50 uppercase tracking-wider font-600 mr-1 bg-transparent border-none cursor-pointer hover:text-text-3/70 transition-colors p-0"
-            title={connectorFilterCollapsed ? 'Expand source filter' : 'Collapse source filter'}
-          >
-            <svg
-              width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
-              className="transition-transform duration-200"
-              style={{ transform: connectorFilterCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)' }}
-            >
-              <polyline points="6 9 12 15 18 9" />
-            </svg>
-            Source
-            {connectorFilterCollapsed && connectorFilter && (
-              <span className="text-accent-bright/70 normal-case tracking-normal">
-                ({connectorSources.get(connectorFilter)?.connectorName || connectorFilter})
-              </span>
-            )}
-          </button>
-          {!connectorFilterCollapsed && (
-            <>
-              <button
-                onClick={() => setConnectorFilter(null)}
-                className={`px-2 py-1 rounded-[6px] text-[11px] font-600 cursor-pointer border-none transition-all ${
-                  !connectorFilter ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]'
-                }`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                All
-              </button>
-              {Array.from(connectorSources.entries()).map(([cid, info]) => {
-                const active = connectorFilter === cid
-                const meta = CONNECTOR_PLATFORM_META[info.platform as keyof typeof CONNECTOR_PLATFORM_META]
-                return (
-                  <button
-                    key={cid}
-                    onClick={() => setConnectorFilter(active ? null : cid)}
-                    className={`flex items-center gap-1.5 px-2 py-1 rounded-[6px] text-[11px] font-600 cursor-pointer border-none transition-all ${
-                      active ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]'
-                    }`}
-                    style={{ fontFamily: 'inherit' }}
-                  >
-                    <ConnectorPlatformIcon platform={info.platform as keyof typeof CONNECTOR_PLATFORM_META} size={12} />
-                    {info.connectorName || meta?.label || info.platform}
-                  </button>
-                )
-              })}
-            </>
-          )}
-        </div>
-      )}
-
       <div
         ref={scrollRef}
         onScroll={updateScrollState}

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/connectors/connector-sheet.tsx

@@ -222,6 +222,21 @@ const PLATFORMS: {
   },
 ]
 
+const COMMON_CONFIG_FIELDS: { key: string; label: string; placeholder: string; help?: string }[] = [
+  {
+    key: 'taskFollowups',
+    label: 'Task Follow-ups',
+    placeholder: 'true | false',
+    help: 'Enable automatic connector follow-up messages when this agent completes or fails a task.',
+  },
+  {
+    key: 'taskFollowupTemplate',
+    label: 'Task Follow-up Template',
+    placeholder: 'Task {status}: {title}\\n\\n{summary}',
+    help: 'Optional placeholders: {status}, {title}, {summary}, {taskId}.',
+  },
+]
+
 export function ConnectorSheet() {
   const open = useAppStore((s) => s.connectorSheetOpen)
   const setOpen = useAppStore((s) => s.setConnectorSheetOpen)
@@ -625,7 +640,7 @@ export function ConnectorSheet() {
       )}
 
       {/* Platform-specific config */}
-      {platformConfig.configFields.map((field) => {
+      {[...platformConfig.configFields, ...COMMON_CONFIG_FIELDS].map((field) => {
         const isTagField = field.key === 'allowedJids' || field.key === 'channelIds' || field.key === 'chatIds' || field.key === 'allowFrom'
         if (isTagField) {
           const tags = (config[field.key] || '').split(',').map((s) => s.trim()).filter(Boolean)

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