@swarmclawai/swarmclaw 0.8.4 → 0.8.7

package/src/components/shared/settings/section-user-preferences.tsx

@@ -1,12 +1,43 @@
 'use client'
 
+import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { SettingsSectionProps } from './types'
 
+function buildWhatsAppContactId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  return `wa-contact-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+}
+
 export function UserPreferencesSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const agents = useAppStore((s) => s.agents)
   const sortedAgents = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
+  const whatsappApprovedContacts = Array.isArray(appSettings.whatsappApprovedContacts) ? appSettings.whatsappApprovedContacts : []
+  const [nextWhatsAppLabel, setNextWhatsAppLabel] = useState('')
+  const [nextWhatsAppPhone, setNextWhatsAppPhone] = useState('')
+
+  const addWhatsAppContact = () => {
+    const phone = nextWhatsAppPhone.trim()
+    if (!phone) return
+    const label = nextWhatsAppLabel.trim() || phone
+    patchSettings({
+      whatsappApprovedContacts: [
+        ...whatsappApprovedContacts,
+        { id: buildWhatsAppContactId(), label, phone },
+      ],
+    })
+    setNextWhatsAppLabel('')
+    setNextWhatsAppPhone('')
+  }
+
+  const removeWhatsAppContact = (id: string) => {
+    patchSettings({
+      whatsappApprovedContacts: whatsappApprovedContacts.filter((entry) => entry.id !== id),
+    })
+  }
 
   return (
     <div className="mb-10">
@@ -51,6 +82,7 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
         </p>
         <div className="flex flex-wrap gap-2">
           <button
+            type="button"
             onClick={() => patchSettings({ defaultAgentId: null })}
             className={`flex items-center gap-2 px-3 py-2 rounded-[10px] text-[12px] font-600 cursor-pointer transition-all border
               ${!appSettings.defaultAgentId
@@ -76,6 +108,81 @@ export function UserPreferencesSection({ appSettings, patchSettings, inputClass
           ))}
         </div>
       </div>
+
+      <div className="mt-6">
+        <label className="text-[12px] font-600 text-text-2 block mb-1.5">WhatsApp Approved Users</label>
+        <p className="text-[11px] text-text-3/60 mb-3">
+          These numbers or JIDs are globally approved for WhatsApp DMs. They bypass per-connector pairing and are merged into WhatsApp allowlists.
+        </p>
+
+        {whatsappApprovedContacts.length > 0 ? (
+          <div className="space-y-2 mb-3">
+            {whatsappApprovedContacts.map((entry) => (
+              <div
+                key={entry.id}
+                className="flex items-center justify-between gap-3 rounded-[12px] border border-white/[0.06] bg-white/[0.03] px-3 py-2"
+              >
+                <div className="min-w-0">
+                  <div className="text-[12px] font-600 text-text truncate">{entry.label}</div>
+                  <div className="text-[11px] text-text-3/70 truncate">{entry.phone}</div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeWhatsAppContact(entry.id)}
+                  className="shrink-0 px-2.5 py-1.5 rounded-[8px] bg-white/[0.04] text-[11px] text-text-3 hover:text-text hover:bg-white/[0.08] transition-colors border-none cursor-pointer"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Remove
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="mb-3 rounded-[12px] border border-dashed border-white/[0.08] bg-white/[0.02] px-3 py-3 text-[11px] text-text-3/70">
+            No globally approved WhatsApp users yet.
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_auto] gap-2">
+          <input
+            type="text"
+            value={nextWhatsAppLabel}
+            onChange={(e) => setNextWhatsAppLabel(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                addWhatsAppContact()
+              }
+            }}
+            placeholder="Label (e.g. Family, Alice)"
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+          <input
+            type="text"
+            value={nextWhatsAppPhone}
+            onChange={(e) => setNextWhatsAppPhone(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                addWhatsAppContact()
+              }
+            }}
+            placeholder="+15551234567 or 15551234567@s.whatsapp.net"
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+          <button
+            type="button"
+            onClick={addWhatsAppContact}
+            disabled={!nextWhatsAppPhone.trim()}
+            className="px-3 py-2 rounded-[10px] text-[12px] font-600 border border-white/[0.06] bg-white/[0.04] text-text transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer hover:bg-white/[0.08]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Add User
+          </button>
+        </div>
+      </div>
     </div>
   )
 }

package/src/components/shared/settings/settings-page.tsx

@@ -72,6 +72,8 @@ const TABS: Tab[] = [
   },
 ]
 
+const VALID_TAB_IDS = TABS.map((t) => t.id)
+
 export function SettingsPage() {
   const loadProviders = useAppStore((s) => s.loadProviders)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
@@ -81,13 +83,7 @@ export function SettingsPage() {
   const loadSecrets = useAppStore((s) => s.loadSecrets)
   const loadAgents = useAppStore((s) => s.loadAgents)
   const credentials = useAppStore((s) => s.credentials)
-  const validTabIds = TABS.map((t) => t.id)
-  const [activeTab, setActiveTabRaw] = useState(() => {
-    if (typeof window === 'undefined') return 'general'
-    const params = new URLSearchParams(window.location.search)
-    const tab = params.get('tab')
-    return tab && validTabIds.includes(tab) ? tab : 'general'
-  })
+  const [activeTab, setActiveTabRaw] = useState('general')
   const contentRef = useRef<HTMLDivElement>(null)
   const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({})
   const [pendingSectionId, setPendingSectionId] = useState<string | null>(null)
@@ -109,6 +105,14 @@ export function SettingsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const tab = params.get('tab')
+    if (tab && VALID_TAB_IDS.includes(tab)) {
+      setActiveTabRaw(tab)
+    }
+  }, [])
+
   // Scroll to top when switching tabs
   useEffect(() => {
     contentRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
@@ -124,8 +128,8 @@ export function SettingsPage() {
       id: 'user-preferences',
       tabId: 'general',
       title: 'Profile & Default Chat',
-      description: 'User identity, language, and which agent your sidebar shortcut opens.',
-      keywords: ['profile', 'default chat', 'default agent', 'shortcut', 'user', 'language', 'main chat'],
+      description: 'User identity, language, default-chat behavior, and global WhatsApp approvals.',
+      keywords: ['profile', 'default chat', 'default agent', 'shortcut', 'user', 'language', 'main chat', 'whatsapp', 'contacts', 'approved users'],
       render: () => <UserPreferencesSection {...sectionProps} />,
     },
     {

package/src/components/skills/clawhub-browser.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { api } from '@/lib/api-client'
 import { toast } from 'sonner'
+import { useMountedRef } from '@/hooks/use-mounted-ref'
 
 interface ClawHubSkill {
   id: string
@@ -33,6 +34,7 @@ interface ClawHubBrowserProps {
 }
 
 export function ClawHubBrowser({ open, onOpenChange, onInstalled }: ClawHubBrowserProps) {
+  const mountedRef = useMountedRef()
   const [query, setQuery] = useState('')
   const [skills, setSkills] = useState<ClawHubSkill[]>([])
   const [page, setPage] = useState(1)
@@ -41,12 +43,16 @@ export function ClawHubBrowser({ open, onOpenChange, onInstalled }: ClawHubBrows
   const [error, setError] = useState<string | null>(null)
   const [installing, setInstalling] = useState<string | null>(null)
   const [searched, setSearched] = useState(false)
+  const searchRequestIdRef = useRef(0)
 
   const search = useCallback(async (q: string, p: number, append = false) => {
+    const requestId = searchRequestIdRef.current + 1
+    searchRequestIdRef.current = requestId
     setLoading(true)
     setError(null)
     try {
       const res = await api<SearchResponse>('GET', `/clawhub/search?q=${encodeURIComponent(q)}&page=${p}`)
+      if (!mountedRef.current || searchRequestIdRef.current !== requestId) return
       if (append) {
         setSkills(prev => [...prev, ...res.skills])
       } else {
@@ -56,11 +62,14 @@ export function ClawHubBrowser({ open, onOpenChange, onInstalled }: ClawHubBrows
       setPage(res.page)
       setSearched(true)
     } catch (err) {
+      if (!mountedRef.current || searchRequestIdRef.current !== requestId) return
       setError(err instanceof Error ? err.message : 'Failed to search ClawHub')
     } finally {
-      setLoading(false)
+      if (mountedRef.current && searchRequestIdRef.current === requestId) {
+        setLoading(false)
+      }
     }
-  }, [])
+  }, [mountedRef])
 
   useEffect(() => {
     if (open) {
@@ -101,7 +110,9 @@ export function ClawHubBrowser({ open, onOpenChange, onInstalled }: ClawHubBrows
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Install failed')
     } finally {
-      setInstalling(null)
+      if (mountedRef.current) {
+        setInstalling(null)
+      }
     }
   }
 

package/src/components/skills/skill-list.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { Badge } from '@/components/ui/badge'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ClawHubBrowser } from './clawhub-browser'
 import { toast } from 'sonner'
+import { useMountedRef } from '@/hooks/use-mounted-ref'
 
 interface ClawHubSkill {
   id: string
@@ -26,6 +27,7 @@ interface SearchResponse {
 }
 
 export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
+  const mountedRef = useMountedRef()
   const skills = useAppStore((s) => s.skills)
   const loadSkills = useAppStore((s) => s.loadSkills)
   const agents = useAppStore((s) => s.agents)
@@ -45,6 +47,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
   const [hubSearched, setHubSearched] = useState(false)
   const [hubError, setHubError] = useState<string | null>(null)
   const [installing, setInstalling] = useState<string | null>(null)
+  const hubSearchRequestIdRef = useRef(0)
 
   useEffect(() => {
     loadSkills()
@@ -67,10 +70,13 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
 
   // Embedded ClawHub search
   const searchHub = useCallback(async (q: string, p: number, append = false) => {
+    const requestId = hubSearchRequestIdRef.current + 1
+    hubSearchRequestIdRef.current = requestId
     setHubLoading(true)
     setHubError(null)
     try {
       const res = await api<SearchResponse>('GET', `/clawhub/search?q=${encodeURIComponent(q)}&page=${p}`)
+      if (!mountedRef.current || hubSearchRequestIdRef.current !== requestId) return
       if (append) {
         setHubSkills(prev => [...prev, ...res.skills])
       } else {
@@ -80,11 +86,14 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
       setHubPage(res.page)
       setHubSearched(true)
     } catch (err) {
+      if (!mountedRef.current || hubSearchRequestIdRef.current !== requestId) return
       setHubError(err instanceof Error ? err.message : 'Failed to search ClawHub')
     } finally {
-      setHubLoading(false)
+      if (mountedRef.current && hubSearchRequestIdRef.current === requestId) {
+        setHubLoading(false)
+      }
     }
-  }, [])
+  }, [mountedRef])
 
   useEffect(() => {
     if (!inSidebar && tab === 'clawhub' && !hubSearched) {
@@ -111,7 +120,9 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Install failed')
     } finally {
-      setInstalling(null)
+      if (mountedRef.current) {
+        setInstalling(null)
+      }
     }
   }
 

package/src/components/tasks/approvals-panel.tsx

@@ -9,6 +9,7 @@ import { useWs } from '@/hooks/use-ws'
 import { ExecApprovalCard } from '@/components/chat/exec-approval-card'
 import { getApprovalPayload, getApprovalTitle } from '@/lib/approval-display'
 import type { AppSettings, ApprovalCategory, ApprovalRequest } from '@/types'
+import { dedup } from '@/lib/shared-utils'
 
 const CATEGORY_LABELS: Record<string, string> = {
   tool_access: 'Plugin Access',
@@ -137,7 +138,7 @@ export function ApprovalsPanel() {
   const searchTerm = search.trim().toLowerCase()
 
   const workflowCategories = useMemo(() => (
-    Array.from(new Set(workflowApprovals.map((req) => req.category))).sort()
+    dedup(workflowApprovals.map((req) => req.category)).sort()
   ), [workflowApprovals])
 
   const filteredExecApprovals = useMemo(() => {

package/src/components/tasks/task-board.tsx

@@ -10,7 +10,9 @@ import { Skeleton } from '@/components/shared/skeleton'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { inputClass } from '@/components/shared/form-styles'
+import { useNow } from '@/hooks/use-now'
 import type { BoardTask, BoardTaskStatus } from '@/types'
+import { dedup } from '@/lib/shared-utils'
 import { toast } from 'sonner'
 
 const ACTIVE_COLUMNS: BoardTaskStatus[] = ['backlog', 'queued', 'running', 'completed', 'failed']
@@ -18,8 +20,8 @@ type BoardViewMode = 'board' | 'list'
 type AttentionFilter = 'all' | 'needs-attention' | 'approval' | 'blocked' | 'overdue' | 'failed'
 type TaskScopeFilter = 'user-facing' | 'all' | 'agent'
 
-function isTaskOverdue(task: BoardTask): boolean {
-  return !!task.dueAt && task.dueAt < Date.now() && task.status !== 'completed' && task.status !== 'archived'
+function isTaskOverdue(task: BoardTask, now: number | null): boolean {
+  return !!now && !!task.dueAt && task.dueAt < now && task.status !== 'completed' && task.status !== 'archived'
 }
 
 function isInternalAgentTask(task: BoardTask): boolean {
@@ -33,10 +35,10 @@ function isTaskRelevantToAgent(task: BoardTask, agentId: string): boolean {
     || task.delegatedByAgentId === agentId
 }
 
-function matchesAttentionFilter(task: BoardTask, filter: AttentionFilter): boolean {
+function matchesAttentionFilter(task: BoardTask, filter: AttentionFilter, now: number | null): boolean {
   const blocked = !!task.blockedBy?.length
   const pendingApproval = !!task.pendingApproval
-  const overdue = isTaskOverdue(task)
+  const overdue = isTaskOverdue(task, now)
   const failed = task.status === 'failed'
   if (filter === 'all') return true
   if (filter === 'approval') return pendingApproval
@@ -46,17 +48,18 @@ function matchesAttentionFilter(task: BoardTask, filter: AttentionFilter): boole
   return blocked || pendingApproval || overdue || failed
 }
 
-function attentionRank(task: BoardTask): number {
+function attentionRank(task: BoardTask, now: number | null): number {
   if (task.pendingApproval) return 0
   if (task.status === 'failed') return 1
   if (task.blockedBy?.length) return 2
-  if (isTaskOverdue(task)) return 3
+  if (isTaskOverdue(task, now)) return 3
   if (task.status === 'running') return 4
   if (task.status === 'queued') return 5
   return 6
 }
 
 export function TaskBoard() {
+  const now = useNow()
   const tasks = useAppStore((s) => s.tasks)
   const loadTasks = useAppStore((s) => s.loadTasks)
   const loadAgents = useAppStore((s) => s.loadAgents)
@@ -145,21 +148,10 @@ export function TaskBoard() {
   const bulkStatusRef = useRef<HTMLDivElement>(null)
 
   // URL-based filter state
-  const [filterAgentId, setFilterAgentId] = useState<string>(() => {
-    if (typeof window === 'undefined') return ''
-    return new URLSearchParams(window.location.search).get('agent') || ''
-  })
-  const [filterTag, setFilterTag] = useState<string>(() => {
-    if (typeof window === 'undefined') return ''
-    return new URLSearchParams(window.location.search).get('tag') || ''
-  })
-  const [taskScopeFilter, setTaskScopeFilter] = useState<TaskScopeFilter>(() => {
-    if (typeof window === 'undefined') return 'user-facing'
-    const params = new URLSearchParams(window.location.search)
-    if (params.get('agent')) return 'agent'
-    const raw = params.get('taskView')
-    return raw === 'all' ? 'all' : 'user-facing'
-  })
+  const [filterAgentId, setFilterAgentId] = useState<string>('')
+  const [filterTag, setFilterTag] = useState<string>('')
+  const [taskScopeFilter, setTaskScopeFilter] = useState<TaskScopeFilter>('user-facing')
+  const [filtersHydrated, setFiltersHydrated] = useState(false)
   const [viewMode, setViewMode] = useState<BoardViewMode>('board')
   const [attentionFilter, setAttentionFilter] = useState<AttentionFilter>('all')
   const [githubImportOpen, setGitHubImportOpen] = useState(false)
@@ -172,19 +164,25 @@ export function TaskBoard() {
   const [githubImportError, setGitHubImportError] = useState<string | null>(null)
   const [githubImportResult, setGitHubImportResult] = useState<GitHubIssueImportResult | null>(null)
 
-  // Seed activeProjectFilter from URL on mount
+  // Seed URL-backed filters after hydration so the initial tree stays deterministic.
   useEffect(() => {
-    if (typeof window === 'undefined') return
-    const urlProject = new URLSearchParams(window.location.search).get('project')
-    if (urlProject && !activeProjectFilter) {
-      setActiveProjectFilter(urlProject)
-    }
+    const params = new URLSearchParams(window.location.search)
+    const urlAgent = params.get('agent') || ''
+    const urlTag = params.get('tag') || ''
+    const urlProject = params.get('project')
+    const rawTaskView = params.get('taskView')
+
+    setFilterAgentId(urlAgent)
+    setFilterTag(urlTag)
+    setTaskScopeFilter(urlAgent ? 'agent' : rawTaskView === 'all' ? 'all' : 'user-facing')
+    if (urlProject && !activeProjectFilter) setActiveProjectFilter(urlProject)
+    setFiltersHydrated(true)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   // Sync filters to URL
   useEffect(() => {
-    if (typeof window === 'undefined') return
+    if (!filtersHydrated) return
     const params = new URLSearchParams()
     if (taskScopeFilter === 'agent' && filterAgentId) params.set('agent', filterAgentId)
     else if (taskScopeFilter === 'all') params.set('taskView', 'all')
@@ -193,7 +191,7 @@ export function TaskBoard() {
     const qs = params.toString()
     const newUrl = `${window.location.pathname}${qs ? `?${qs}` : ''}`
     window.history.replaceState(null, '', newUrl)
-  }, [filterAgentId, filterTag, activeProjectFilter, taskScopeFilter])
+  }, [activeProjectFilter, filterAgentId, filterTag, filtersHydrated, taskScopeFilter])
 
   const [loaded, setLoaded] = useState(Object.keys(tasks).length > 0)
   useEffect(() => {
@@ -202,7 +200,7 @@ export function TaskBoard() {
   useWs('tasks', loadTasks, 5000)
 
   // Collect all unique tags across tasks
-  const allTags = Array.from(new Set(Object.values(tasks).flatMap((t) => t.tags || []))).sort()
+  const allTags = dedup(Object.values(tasks).flatMap((t) => t.tags || [])).sort()
 
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 
@@ -217,9 +215,9 @@ export function TaskBoard() {
 
   const matchesBaseFilters = useCallback((task: BoardTask) => {
     if (!matchesScopeFilters(task)) return false
-    if (!matchesAttentionFilter(task, attentionFilter)) return false
+    if (!matchesAttentionFilter(task, attentionFilter, now)) return false
     return true
-  }, [attentionFilter, matchesScopeFilters])
+  }, [attentionFilter, matchesScopeFilters, now])
 
   const scopedTasks = useMemo(
     () => Object.values(tasks).filter(matchesScopeFilters),
@@ -230,13 +228,13 @@ export function TaskBoard() {
     scopedTasks
       .filter(matchesBaseFilters)
       .sort((a, b) => {
-        const rankDiff = attentionRank(a) - attentionRank(b)
+        const rankDiff = attentionRank(a, now) - attentionRank(b, now)
         if (rankDiff !== 0) return rankDiff
         const dueDiff = (a.dueAt || Number.MAX_SAFE_INTEGER) - (b.dueAt || Number.MAX_SAFE_INTEGER)
         if (dueDiff !== 0) return dueDiff
         return b.updatedAt - a.updatedAt
       })
-  ), [scopedTasks, matchesBaseFilters])
+  ), [scopedTasks, matchesBaseFilters, now])
 
   const tasksByStatus = useCallback((status: BoardTaskStatus) =>
     filteredTasks
@@ -334,12 +332,12 @@ export function TaskBoard() {
       running: all.filter((t) => t.status === 'running').length,
       completed: all.filter((t) => t.status === 'completed').length,
       failed: all.filter((t) => t.status === 'failed').length,
-      overdue: all.filter((t) => isTaskOverdue(t)).length,
+      overdue: all.filter((t) => isTaskOverdue(t, now)).length,
       blocked: all.filter((t) => (t.blockedBy?.length || 0) > 0).length,
       approvals: all.filter((t) => !!t.pendingApproval).length,
-      attention: all.filter((t) => matchesAttentionFilter(t, 'needs-attention')).length,
+      attention: all.filter((t) => matchesAttentionFilter(t, 'needs-attention', now)).length,
     }
-  }, [scopedTasks])
+  }, [now, scopedTasks])
 
   const activeScopeLabel = useMemo(() => {
     if (taskScopeFilter === 'all') return 'All tasks'

package/src/components/tasks/task-sheet.tsx

@@ -11,6 +11,7 @@ import { DirBrowser } from '@/components/shared/dir-browser'
 import { SheetFooter } from '@/components/shared/sheet-footer'
 import { inputClass } from '@/components/shared/form-styles'
 import type { BoardTask, TaskComment, TaskQualityGateConfig } from '@/types'
+import { dedup, errorMessage } from '@/lib/shared-utils'
 import { SectionLabel } from '@/components/shared/section-label'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 
@@ -187,7 +188,7 @@ export function TaskSheet() {
         }
       }
     } catch (err: unknown) {
-      setDepError(err instanceof Error ? err.message : String(err))
+      setDepError(errorMessage(err))
       return
     }
     setDepError(null)
@@ -208,7 +209,7 @@ export function TaskSheet() {
       const data = await res.json()
       if (data.url) setImages((prev) => [...prev, data.url])
     } catch (err: unknown) {
-      console.error('Image upload failed:', err instanceof Error ? err.message : String(err))
+      console.error('Image upload failed:', errorMessage(err))
     }
     setUploading(false)
     e.target.value = ''
@@ -758,7 +759,7 @@ export function TaskSheet() {
             list="tag-suggestions"
           />
           <datalist id="tag-suggestions">
-            {Array.from(new Set(Object.values(tasks).flatMap((t) => t.tags || [])))
+            {dedup(Object.values(tasks).flatMap((t) => t.tags || []))
               .filter((t) => !tags.includes(t) && t.includes(tagInput.toLowerCase()))
               .slice(0, 10)
               .map((t) => <option key={t} value={t} />)}