@swarmclawai/swarmclaw 0.4.0 → 0.4.5

package/src/components/projects/project-sheet.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { createProject, updateProject, deleteProject } from '@/lib/projects'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { toast } from 'sonner'
+
+const PROJECT_COLORS = [
+  '#EF4444', '#F97316', '#EAB308', '#22C55E', '#06B6D4',
+  '#3B82F6', '#8B5CF6', '#EC4899', '#6B7280',
+]
+
+const inputClass = 'w-full px-3 py-2.5 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40 transition-colors'
+
+export function ProjectSheet() {
+  const open = useAppStore((s) => s.projectSheetOpen)
+  const setOpen = useAppStore((s) => s.setProjectSheetOpen)
+  const editingId = useAppStore((s) => s.editingProjectId)
+  const setEditingId = useAppStore((s) => s.setEditingProjectId)
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
+
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [color, setColor] = useState<string | undefined>(undefined)
+
+  const editing = editingId ? projects[editingId] : null
+
+  useEffect(() => {
+    if (open) {
+      if (editing) {
+        setName(editing.name)
+        setDescription(editing.description)
+        setColor(editing.color)
+      } else {
+        setName('')
+        setDescription('')
+        setColor(PROJECT_COLORS[0])
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, editingId])
+
+  const onClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    const data = {
+      name: name.trim() || 'Unnamed Project',
+      description,
+      color,
+    }
+    if (editing) {
+      await updateProject(editing.id, data)
+    } else {
+      await createProject(data)
+    }
+    await loadProjects()
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    if (editing) {
+      await deleteProject(editing.id)
+      await loadProjects()
+      onClose()
+      toast.success('Project deleted')
+    }
+  }
+
+  return (
+    <BottomSheet open={open} onClose={onClose}>
+      <h2 className="font-display text-[18px] font-700 text-text mb-6">{editing ? 'Edit Project' : 'New Project'}</h2>
+      <div className="mb-6">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="e.g. Marketing Site"
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+          autoFocus
+        />
+      </div>
+
+      <div className="mb-6">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="What is this project about?"
+          className={inputClass + ' min-h-[80px] resize-y'}
+          style={{ fontFamily: 'inherit' }}
+          rows={3}
+        />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Color</label>
+        <div className="flex items-center gap-2">
+          {PROJECT_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => setColor(c)}
+              className={`w-7 h-7 rounded-full transition-all ${color === c ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent scale-110' : 'hover:scale-105'}`}
+              style={{ backgroundColor: c }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={handleSave}
+          className="flex-1 py-2.5 rounded-lg bg-accent text-white text-[13px] font-600 hover:bg-accent-bright transition-colors"
+        >
+          {editing ? 'Update' : 'Create'} Project
+        </button>
+        {editing && (
+          <button
+            onClick={handleDelete}
+            className="px-4 py-2.5 rounded-lg bg-red-500/10 text-red-400 text-[13px] font-600 hover:bg-red-500/20 transition-colors"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/schedules/schedule-list.tsx

@@ -12,6 +12,7 @@ export function ScheduleList({ inSidebar }: Props) {
   const schedules = useAppStore((s) => s.schedules)
   const loadSchedules = useAppStore((s) => s.loadSchedules)
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const [search, setSearch] = useState('')
 
   useEffect(() => { loadSchedules() }, [])
@@ -20,10 +21,11 @@ export function ScheduleList({ inSidebar }: Props) {
     return Object.values(schedules)
       .filter((s) => {
         if (search && !s.name.toLowerCase().includes(search.toLowerCase())) return false
+        if (activeProjectFilter && s.projectId !== activeProjectFilter) return false
         return true
       })
       .sort((a, b) => b.createdAt - a.createdAt)
-  }, [schedules, search])
+  }, [schedules, search, activeProjectFilter])
 
   if (!filtered.length && !search) {
     return (

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

@@ -129,7 +129,7 @@ export function NewSessionSheet() {
   }
 
   const handleCreate = async () => {
-    const sessionName = name.trim() || 'New Session'
+    const sessionName = name.trim() || 'New Chat'
     const cwd = selectedDir || ''
     const resolvedCredentialId = currentProvider?.requiresApiKey
       ? credentialId
@@ -174,14 +174,14 @@ export function NewSessionSheet() {
     <BottomSheet open={open} onClose={onClose} wide>
       {/* Header */}
       <div className="mb-10">
-        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">New Session</h2>
-        <p className="text-[14px] text-text-3">Configure your AI session</p>
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">New Chat</h2>
+        <p className="text-[14px] text-text-3">Configure your AI chat</p>
       </div>
 
       {/* Name */}
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
-          Session Name
+          Chat Name
         </label>
         <input
           type="text"
@@ -373,7 +373,7 @@ export function NewSessionSheet() {
               <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
                 Tools <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
               </label>
-              <p className="text-[12px] text-text-3/60 mb-3">Allow this model to execute commands and access files in the session directory.</p>
+              <p className="text-[12px] text-text-3/60 mb-3">Allow this model to execute commands and access files in the working directory.</p>
               <div className="flex flex-wrap gap-2.5">
                 {([
                   { id: 'shell' as SessionTool, label: 'Shell' },
@@ -469,7 +469,7 @@ export function NewSessionSheet() {
             shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
           style={{ fontFamily: 'inherit' }}
         >
-          Create Session
+          Create Chat
         </button>
       </div>
     </BottomSheet>

package/src/components/sessions/session-card.tsx

@@ -117,7 +117,7 @@ export function SessionCard({ session, active, onClick }: Props) {
           onClick={handleDelete}
           className="shrink-0 opacity-0 group-hover/card:opacity-100 transition-opacity duration-150
             text-text-3 hover:text-red-400 p-0.5 -mr-1 cursor-pointer bg-transparent border-none"
-          title="Delete session"
+          title="Delete chat"
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />

package/src/components/sessions/session-list.tsx

@@ -89,7 +89,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
             <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="currentColor" />
           </svg>
         </div>
-        <p className="font-display text-[15px] font-600 text-text-2">No sessions yet</p>
+        <p className="font-display text-[15px] font-600 text-text-2">No chats yet</p>
         <p className="text-[13px] text-text-3/50">Create one to start chatting</p>
         {!inSidebar && (
           <button
@@ -99,7 +99,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
               shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
             style={{ fontFamily: 'inherit' }}
           >
-            + New Session
+            + New Chat
           </button>
         )}
       </div>
@@ -124,12 +124,12 @@ export function SessionList({ inSidebar, onSelect }: Props) {
         {filtered.length > 0 && (
           <button
             onClick={async () => {
-              if (!window.confirm(`Delete ${filtered.length} session${filtered.length === 1 ? '' : 's'}?`)) return
+              if (!window.confirm(`Delete ${filtered.length} chat${filtered.length === 1 ? '' : 's'}?`)) return
               await clearSessions(filtered.map((s) => s.id))
             }}
             className="ml-auto p-1.5 rounded-[8px] text-text-3/70 hover:text-red-400 hover:bg-red-400/[0.06]
               cursor-pointer transition-all bg-transparent border-none"
-            title="Clear all sessions"
+            title="Clear all chats"
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
@@ -154,7 +154,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
         <select
           value={sortMode}
           onChange={(e) => setSortMode(e.target.value as SortMode)}
-          aria-label="Sort sessions"
+          aria-label="Sort chats"
           className="px-2 py-2 rounded-[12px] border border-white/[0.04] bg-surface text-text
             text-[11px] outline-none cursor-pointer"
           style={{ fontFamily: 'inherit' }}
@@ -176,7 +176,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
               />
               <button
                 onClick={(e) => { e.stopPropagation(); togglePinSession(s.id) }}
-                aria-label={s.pinned ? 'Unpin session' : 'Pin session'}
+                aria-label={s.pinned ? 'Unpin chat' : 'Pin chat'}
                 className={`absolute top-2 right-2 p-1 rounded-[6px] border-none cursor-pointer transition-all
                   ${s.pinned
                     ? 'text-amber-400 bg-amber-400/10 opacity-100'
@@ -193,7 +193,7 @@ export function SessionList({ inSidebar, onSelect }: Props) {
       ) : (
         <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
           <p className="text-[13px] text-text-3/50">
-            No {typeFilter === 'orchestrated' ? 'AI' : typeFilter === 'active' ? 'active' : typeFilter} sessions{search ? ` matching "${search}"` : ''}
+            No {typeFilter === 'orchestrated' ? 'AI' : typeFilter === 'active' ? 'active' : typeFilter} chats{search ? ` matching "${search}"` : ''}
           </p>
         </div>
       )}

package/src/components/shared/connector-platform-icon.tsx

@@ -2,6 +2,7 @@ import type { Connector, ConnectorPlatform, Session } from '@/types'
 import { cn } from '@/lib/utils'
 import { BsMicrosoftTeams } from 'react-icons/bs'
 import {
+  SiApple,
   SiDiscord,
   SiGooglechat,
   SiMatrix,
@@ -17,6 +18,7 @@ export const CONNECTOR_PLATFORM_META: Record<ConnectorPlatform, { label: string;
   slack: { label: 'Slack', color: '#4A154B' },
   whatsapp: { label: 'WhatsApp', color: '#25D366' },
   openclaw: { label: 'OpenClaw', color: '#F97316' },
+  bluebubbles: { label: 'BlueBubbles', color: '#2E89FF' },
   signal: { label: 'Signal', color: '#3A76F0' },
   teams: { label: 'Teams', color: '#6264A7' },
   googlechat: { label: 'Google Chat', color: '#00AC47' },
@@ -62,6 +64,8 @@ export function ConnectorPlatformIcon({
       return <SiSlack size={size} className={className} />
     case 'whatsapp':
       return <SiWhatsapp size={size} className={className} />
+    case 'bluebubbles':
+      return <SiApple size={size} className={className} />
     case 'signal':
       return <SiSignal size={size} className={className} />
     case 'googlechat':

package/src/components/shared/settings/section-heartbeat.tsx

@@ -26,7 +26,7 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
         `Stopped heartbeat on ${result.updatedSessions} session(s); cancelled ${result.cancelledQueued} queued run(s), aborted ${result.abortedRunning} running run(s).`,
       )
     } catch (err: any) {
-      setHeartbeatBulkNotice(err?.message || 'Failed to disable heartbeat for all sessions.')
+      setHeartbeatBulkNotice(err?.message || 'Failed to disable heartbeat for all agents.')
     } finally {
       setDisablingHeartbeats(false)
     }

package/src/components/shared/settings/section-orchestrator.tsx

@@ -2,10 +2,9 @@
 
 import { useAppStore } from '@/stores/use-app-store'
 import { ModelCombobox } from '@/components/shared/model-combobox'
+import { NON_LANGGRAPH_PROVIDER_IDS } from '@/lib/provider-sets'
 import type { SettingsSectionProps } from './types'
 
-const NON_LANGGRAPH_PROVIDER_IDS = new Set(['claude-cli', 'codex-cli', 'opencode-cli'])
-
 export function OrchestratorSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
   const providers = useAppStore((s) => s.providers)
   const credentials = useAppStore((s) => s.credentials)

package/src/components/shared/settings/section-web-search.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+export function WebSearchSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const provider = appSettings.webSearchProvider || 'duckduckgo'
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Web Search
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Choose which search engine agents use for the <code className="text-[11px] font-mono text-text-2">web_search</code> tool.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <div className="mb-5">
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Search Provider</label>
+          <select
+            value={provider}
+            onChange={(e) => patchSettings({ webSearchProvider: e.target.value as typeof provider })}
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="duckduckgo">DuckDuckGo (default, no key required)</option>
+            <option value="google">Google (scraping, no key required)</option>
+            <option value="bing">Bing (scraping, no key required)</option>
+            <option value="searxng">SearXNG (self-hosted, no key required)</option>
+            <option value="tavily">Tavily (requires API key in Secrets)</option>
+            <option value="brave">Brave Search (requires API key in Secrets)</option>
+          </select>
+        </div>
+
+        {provider === 'searxng' && (
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">SearXNG URL</label>
+            <input
+              type="text"
+              value={appSettings.searxngUrl || ''}
+              onChange={(e) => patchSettings({ searxngUrl: e.target.value || undefined })}
+              placeholder="http://localhost:8080"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        )}
+
+        {(provider === 'tavily' || provider === 'brave') && (
+          <p className="text-[11px] text-text-3/70">
+            Add a secret named &quot;{provider}&quot; or &quot;{provider}_api_key&quot; in the Secrets section below.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,73 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { inputClass } from './utils'
+import { UserPreferencesSection } from './section-user-preferences'
+import { OrchestratorSection } from './section-orchestrator'
+import { RuntimeLoopSection } from './section-runtime-loop'
+import { CapabilityPolicySection } from './section-capability-policy'
+import { VoiceSection } from './section-voice'
+import { WebSearchSection } from './section-web-search'
+import { HeartbeatSection } from './section-heartbeat'
+import { EmbeddingSection } from './section-embedding'
+import { MemorySection } from './section-memory'
+import { SecretsSection } from './section-secrets'
+import { ProvidersSection } from './section-providers'
+import { PluginManager } from './plugin-manager'
+
+export function SettingsPage() {
+  const loadProviders = useAppStore((s) => s.loadProviders)
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+  const updateSettings = useAppStore((s) => s.updateSettings)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const credentials = useAppStore((s) => s.credentials)
+
+  useEffect(() => {
+    loadProviders()
+    loadCredentials()
+    loadSettings()
+    loadSecrets()
+    loadAgents()
+  }, [])
+
+  const credList = Object.values(credentials)
+  const patchSettings = updateSettings
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-y-auto">
+      <div className="w-full max-w-3xl mx-auto px-6 py-8">
+        <div className="mb-10">
+          <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">Settings</h2>
+          <p className="text-[14px] text-text-3">Manage providers, API keys & orchestrator engine</p>
+        </div>
+
+        <UserPreferencesSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <OrchestratorSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <RuntimeLoopSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <CapabilityPolicySection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <WebSearchSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <VoiceSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <HeartbeatSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <EmbeddingSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} credList={credList} />
+        <MemorySection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <SecretsSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+        <ProvidersSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+
+        <div className="mb-10">
+          <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+            Plugins
+          </h3>
+          <p className="text-[12px] text-text-3 mb-5">
+            Extend agent behavior with hooks. Install from the marketplace, a URL, or drop .js files into <code className="text-[11px] font-mono text-text-2">data/plugins/</code>.
+            <span className="text-text-3/70 ml-1">OpenClaw plugins are also supported.</span>
+          </p>
+          <PluginManager />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -29,6 +29,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
   const loadSkills = useAppStore((s) => s.loadSkills)
   const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const [clawHubOpen, setClawHubOpen] = useState(false)
 
   // Embedded ClawHub state (full-width only)
@@ -46,7 +47,7 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
     loadSkills()
   }, [])
 
-  const skillList = Object.values(skills)
+  const skillList = Object.values(skills).filter((s) => !activeProjectFilter || s.projectId === activeProjectFilter)
 
   const handleEdit = (id: string) => {
     setEditingSkillId(id)

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

@@ -21,6 +21,7 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
   const agents = useAppStore((s) => s.agents)
   const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
   const [search, setSearch] = useState('')
   const [clearing, setClearing] = useState(false)
 
@@ -28,8 +29,10 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
   useWs('tasks', loadTasks, 5000)
 
   const sorted = useMemo(() =>
-    Object.values(tasks).sort((a, b) => b.updatedAt - a.updatedAt),
-    [tasks],
+    Object.values(tasks)
+      .filter((t) => !activeProjectFilter || t.projectId === activeProjectFilter)
+      .sort((a, b) => b.updatedAt - a.updatedAt),
+    [tasks, activeProjectFilter],
   )
 
   const filtered = useMemo(() => {

package/src/hooks/use-continuous-speech.ts

@@ -0,0 +1,144 @@
+'use client'
+
+import { useCallback, useRef, useState } from 'react'
+
+export type ContinuousSpeechState = 'idle' | 'listening' | 'cooldown' | 'waitingForResponse'
+
+interface UseContinuousSpeechOptions {
+  lang?: string
+  silenceDelayMs?: number
+  onUtterance: (transcript: string) => void
+}
+
+export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
+  const { lang, silenceDelayMs = 800, onUtterance } = options
+  const [state, setState] = useState<ContinuousSpeechState>('idle')
+  const [transcript, setTranscript] = useState('')
+  const [interimText, setInterimText] = useState('')
+
+  const recogRef = useRef<any>(null)
+  const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const activeRef = useRef(false)
+  const accumulatedRef = useRef('')
+
+  const clearSilenceTimer = () => {
+    if (silenceTimerRef.current) {
+      clearTimeout(silenceTimerRef.current)
+      silenceTimerRef.current = null
+    }
+  }
+
+  const startRecognition = useCallback(() => {
+    const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+    if (!SR) return
+
+    if (recogRef.current) {
+      try { recogRef.current.stop() } catch { /* noop */ }
+    }
+
+    const recog = new SR()
+    recog.continuous = true
+    recog.interimResults = true
+    recog.maxAlternatives = 1
+    recog.lang = lang || navigator.language || 'en-US'
+
+    recog.onresult = (e: any) => {
+      clearSilenceTimer()
+      let interim = ''
+      let final = ''
+
+      for (let i = e.resultIndex; i < e.results.length; i++) {
+        const result = e.results[i]
+        if (result.isFinal) {
+          final += result[0].transcript
+        } else {
+          interim += result[0].transcript
+        }
+      }
+
+      if (final) {
+        accumulatedRef.current += (accumulatedRef.current ? ' ' : '') + final.trim()
+        setTranscript(accumulatedRef.current)
+        setInterimText('')
+
+        // Start silence timer — after delay, send the utterance
+        silenceTimerRef.current = setTimeout(() => {
+          if (!activeRef.current) return
+          const text = accumulatedRef.current.trim()
+          if (text) {
+            setState('waitingForResponse')
+            onUtterance(text)
+            accumulatedRef.current = ''
+            setTranscript('')
+          }
+        }, silenceDelayMs)
+      } else {
+        setInterimText(interim)
+      }
+    }
+
+    recog.onerror = (e: any) => {
+      // 'no-speech' is normal during silence; 'aborted' when stopping intentionally
+      if (e.error === 'no-speech' || e.error === 'aborted') return
+      console.warn('[continuous-speech] error:', e.error)
+    }
+
+    recog.onend = () => {
+      // Auto-restart if still active (browser may stop recognition periodically)
+      if (activeRef.current && state !== 'waitingForResponse') {
+        try { recog.start() } catch { /* noop */ }
+      }
+    }
+
+    recogRef.current = recog
+    try {
+      recog.start()
+      setState('listening')
+    } catch {
+      setState('idle')
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lang, silenceDelayMs, onUtterance])
+
+  const start = useCallback(() => {
+    activeRef.current = true
+    accumulatedRef.current = ''
+    setTranscript('')
+    setInterimText('')
+    startRecognition()
+  }, [startRecognition])
+
+  const stop = useCallback(() => {
+    activeRef.current = false
+    clearSilenceTimer()
+    if (recogRef.current) {
+      try { recogRef.current.stop() } catch { /* noop */ }
+      recogRef.current = null
+    }
+    setState('idle')
+    setTranscript('')
+    setInterimText('')
+    accumulatedRef.current = ''
+  }, [])
+
+  const pause = useCallback(() => {
+    clearSilenceTimer()
+    if (recogRef.current) {
+      try { recogRef.current.stop() } catch { /* noop */ }
+    }
+  }, [])
+
+  const resume = useCallback(() => {
+    if (!activeRef.current) return
+    accumulatedRef.current = ''
+    setTranscript('')
+    setInterimText('')
+    setState('listening')
+    startRecognition()
+  }, [startRecognition])
+
+  const supported = typeof window !== 'undefined' &&
+    !!((window as any).SpeechRecognition || (window as any).webkitSpeechRecognition)
+
+  return { state, transcript, interimText, start, stop, pause, resume, supported }
+}