@swarmclawai/swarmclaw 0.4.5 → 0.5.0

package/src/components/settings/gateway-connection-panel.tsx

@@ -0,0 +1,278 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+import type { GatewayReloadMode } from '@/types'
+
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected'
+
+interface ConfigIssue {
+  id: string
+  severity: 'warning' | 'error'
+  title: string
+  description: string
+  repairAction?: string
+}
+
+export function GatewayConnectionPanel() {
+  const [url, setUrl] = useState('')
+  const [token, setToken] = useState('')
+  const [status, setStatus] = useState<ConnectionStatus>('disconnected')
+  const [error, setError] = useState('')
+  const [reloadMode, setReloadMode] = useState<GatewayReloadMode>('hot')
+  const [reloadSaving, setReloadSaving] = useState(false)
+  const [issues, setIssues] = useState<ConfigIssue[]>([])
+  const [repairingId, setRepairingId] = useState<string | null>(null)
+
+  const checkStatus = useCallback(async () => {
+    try {
+      const res = await api<{ connected: boolean }>('GET', '/openclaw/gateway')
+      setStatus(res.connected ? 'connected' : 'disconnected')
+    } catch {
+      setStatus('disconnected')
+    }
+  }, [])
+
+  const loadReloadMode = useCallback(async () => {
+    try {
+      const res = await api<{ ok: boolean; result: GatewayReloadMode }>('POST', '/openclaw/gateway', {
+        method: 'gateway.reload-mode.get',
+        params: {},
+      })
+      if (res.ok && res.result) setReloadMode(res.result)
+    } catch {
+      // ignore — gateway may not be connected
+    }
+  }, [])
+
+  const loadIssues = useCallback(async () => {
+    try {
+      const res = await api<{ issues: ConfigIssue[] }>('GET', '/openclaw/config-sync')
+      setIssues(res.issues ?? [])
+    } catch {
+      // ignore
+    }
+  }, [])
+
+  useEffect(() => {
+    checkStatus()
+  }, [checkStatus])
+
+  useEffect(() => {
+    if (status === 'connected') {
+      loadReloadMode()
+      loadIssues()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+
+  const handleConnect = async () => {
+    setStatus('connecting')
+    setError('')
+    try {
+      const res = await api<{ ok: boolean; error?: string }>('POST', '/openclaw/gateway', {
+        method: 'gateway.connect',
+        params: { url: url || undefined, token: token || undefined },
+      })
+      if (res.ok) {
+        setStatus('connected')
+      } else {
+        setStatus('disconnected')
+        setError(res.error || 'Connection failed')
+      }
+    } catch (err: unknown) {
+      setStatus('disconnected')
+      setError(err instanceof Error ? err.message : 'Connection failed')
+    }
+  }
+
+  const handleDisconnect = async () => {
+    setError('')
+    try {
+      await api('POST', '/openclaw/gateway', {
+        method: 'gateway.disconnect',
+        params: {},
+      })
+      setStatus('disconnected')
+      setIssues([])
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Disconnect failed')
+    }
+  }
+
+  const handleReloadModeChange = async (mode: GatewayReloadMode) => {
+    setReloadSaving(true)
+    try {
+      await api('POST', '/openclaw/gateway', {
+        method: 'gateway.reload-mode.set',
+        params: { mode },
+      })
+      setReloadMode(mode)
+    } catch {
+      // ignore
+    } finally {
+      setReloadSaving(false)
+    }
+  }
+
+  const handleRepair = async (issueId: string) => {
+    setRepairingId(issueId)
+    try {
+      await api('POST', '/openclaw/config-sync', { issueId })
+      await loadIssues()
+    } catch {
+      // ignore
+    } finally {
+      setRepairingId(null)
+    }
+  }
+
+  const dotColor = status === 'connected'
+    ? 'bg-emerald-400'
+    : status === 'connecting'
+      ? 'bg-amber-400 animate-pulse'
+      : 'bg-red-400'
+
+  const reloadModes: { value: GatewayReloadMode; label: string; desc: string }[] = [
+    { value: 'hot', label: 'Hot', desc: 'Only reload changed agents' },
+    { value: 'hybrid', label: 'Hybrid', desc: 'Hot + restart stale sessions' },
+    { value: 'full', label: 'Full', desc: 'Restart all agents on change' },
+  ]
+
+  const actionableIssues = issues.filter((i) => i.id !== 'no-connection')
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex items-center gap-2">
+        <span className={`w-2 h-2 rounded-full ${dotColor}`} />
+        <span className="text-[13px] font-600 text-text capitalize">{status}</span>
+        {actionableIssues.length > 0 && (
+          <span className="ml-auto px-2 py-0.5 rounded-[6px] bg-amber-400/10 text-amber-400 text-[10px] font-700">
+            {actionableIssues.length} issue{actionableIssues.length !== 1 ? 's' : ''}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Gateway URL</label>
+        <input
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          placeholder="ws://127.0.0.1:18789"
+          className="w-full px-3 py-2 rounded-[10px] border border-white/[0.06] bg-black/20 text-[13px] text-text font-mono outline-none placeholder:text-text-3/40 focus:border-white/[0.12] transition-colors"
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Token (optional)</label>
+        <input
+          type="password"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+          placeholder="Access token"
+          className="w-full px-3 py-2 rounded-[10px] border border-white/[0.06] bg-black/20 text-[13px] text-text font-mono outline-none placeholder:text-text-3/40 focus:border-white/[0.12] transition-colors"
+        />
+      </div>
+
+      <div className="flex gap-2">
+        {status !== 'connected' ? (
+          <button
+            onClick={handleConnect}
+            disabled={status === 'connecting'}
+            className="px-4 py-2 rounded-[10px] border-none bg-accent-bright text-white text-[12px] font-600 cursor-pointer disabled:opacity-40 transition-all hover:brightness-110"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {status === 'connecting' ? 'Connecting...' : 'Connect'}
+          </button>
+        ) : (
+          <button
+            onClick={handleDisconnect}
+            className="px-4 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-red-400 text-[12px] font-600 cursor-pointer transition-all hover:bg-red-400/10"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Disconnect
+          </button>
+        )}
+        <button
+          onClick={checkStatus}
+          className="px-4 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04]"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Refresh
+        </button>
+      </div>
+
+      {error && (
+        <p className="text-[12px] text-red-400">{error}</p>
+      )}
+
+      {/* Reload Mode Toggle (F21) */}
+      {status === 'connected' && (
+        <div className="flex flex-col gap-2 pt-2 border-t border-white/[0.04]">
+          <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Reload Mode</label>
+          <div className="flex gap-1">
+            {reloadModes.map((rm) => (
+              <button
+                key={rm.value}
+                onClick={() => handleReloadModeChange(rm.value)}
+                disabled={reloadSaving}
+                className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border
+                  ${reloadMode === rm.value
+                    ? 'bg-accent-soft text-accent-bright border-accent-bright/30'
+                    : 'bg-transparent text-text-3 border-white/[0.06] hover:border-white/[0.12]'
+                  }`}
+                style={{ fontFamily: 'inherit' }}
+                title={rm.desc}
+              >
+                {rm.label}
+              </button>
+            ))}
+          </div>
+          <p className="text-[10px] text-text-3/40">
+            {reloadModes.find((r) => r.value === reloadMode)?.desc}
+          </p>
+        </div>
+      )}
+
+      {/* Config Issues (F19) */}
+      {actionableIssues.length > 0 && (
+        <div className="flex flex-col gap-2 pt-2 border-t border-white/[0.04]">
+          <label className="text-[11px] font-600 uppercase tracking-wider text-text-3/50">Config Issues</label>
+          {actionableIssues.map((issue) => (
+            <div
+              key={issue.id}
+              className={`flex items-start gap-3 p-3 rounded-[10px] border ${
+                issue.severity === 'error'
+                  ? 'bg-red-400/[0.04] border-red-400/20'
+                  : 'bg-amber-400/[0.04] border-amber-400/20'
+              }`}
+            >
+              <span className={`mt-0.5 w-2 h-2 rounded-full shrink-0 ${
+                issue.severity === 'error' ? 'bg-red-400' : 'bg-amber-400'
+              }`} />
+              <div className="flex-1 min-w-0">
+                <p className={`text-[12px] font-600 ${
+                  issue.severity === 'error' ? 'text-red-400' : 'text-amber-400'
+                }`}>
+                  {issue.title}
+                </p>
+                <p className="text-[11px] text-text-3/60 mt-0.5">{issue.description}</p>
+              </div>
+              {issue.repairAction && (
+                <button
+                  onClick={() => handleRepair(issue.repairAction!)}
+                  disabled={repairingId === issue.repairAction}
+                  className="shrink-0 px-3 py-1 rounded-[7px] border-none bg-accent-bright text-white text-[10px] font-600 cursor-pointer disabled:opacity-40 transition-all hover:brightness-110"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {repairingId === issue.repairAction ? 'Repairing...' : 'Repair'}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/avatar.tsx

@@ -34,11 +34,22 @@ export function Avatar({ user, size = 'md' }: Props) {
   )
 }
 
-export function AiAvatar({ size = 'md' }: { size?: 'sm' | 'md' }) {
+export type AiMood = 'idle' | 'thinking' | 'tool' | 'error' | 'success'
+
+const moodAnimClass: Record<AiMood, string> = {
+  idle: '',
+  thinking: 'ai-mood-pulse',
+  tool: 'ai-mood-glow',
+  error: 'ai-mood-shake',
+  success: 'ai-mood-bounce',
+}
+
+export function AiAvatar({ size = 'md', mood }: { size?: 'sm' | 'md'; mood?: AiMood }) {
   const s = size === 'sm' ? 'w-6 h-6' : 'w-8 h-8'
   const iconSize = size === 'sm' ? 12 : 16
+  const animCls = mood ? moodAnimClass[mood] : ''
   return (
-    <div className={`${s} rounded-[8px] bg-accent-soft flex items-center justify-center shrink-0`}>
+    <div className={`${s} rounded-[8px] bg-accent-soft flex items-center justify-center shrink-0 ${animCls}`}>
       <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" className="text-accent-bright">
         <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z"
           fill="currentColor" />

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

@@ -32,6 +32,7 @@ export function SettingsPage() {
     loadSettings()
     loadSecrets()
     loadAgents()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const credList = Object.values(credentials)

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

@@ -44,7 +44,7 @@ export function TaskBoard() {
       <div className="flex items-center justify-between px-8 pt-6 pb-4 shrink-0">
         <div>
           <h1 className="font-display text-[28px] font-800 tracking-[-0.03em]">Task Board</h1>
-          <p className="text-[13px] text-text-3 mt-1">Create tasks and assign orchestrators to run them sequentially</p>
+          <p className="text-[13px] text-text-3 mt-1">Create tasks and assign agents to run them</p>
         </div>
         <div className="flex items-center gap-3">
           <select

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

@@ -35,7 +35,7 @@ export function TaskSheet() {
   const [file, setFile] = useState<string | null>(null)
 
   const editing = editingId ? tasks[editingId] : null
-  const orchestrators = Object.values(agents).filter((p) => p.isOrchestrator)
+  const agentList = Object.values(agents)
 
   useEffect(() => {
     if (open) {
@@ -50,7 +50,7 @@ export function TaskSheet() {
       } else {
         setTitle('')
         setDescription('')
-        setAgentId(orchestrators[0]?.id || '')
+        setAgentId(agentList[0]?.id || '')
         setImages([])
         setCwd('')
         setFile(null)
@@ -58,12 +58,12 @@ export function TaskSheet() {
     }
   }, [open, editingId])
 
-  // Update default agent when orchestrators load (only if no agent selected yet)
+  // Update default agent when agents load (only if no agent selected yet)
   useEffect(() => {
-    if (open && !editing && !agentId && orchestrators.length) {
-      setAgentId(orchestrators[0].id)
+    if (open && !editing && !agentId && agentList.length) {
+      setAgentId(agentList[0].id)
     }
-  }, [open, editing, agentId, orchestrators.length, agents])
+  }, [open, editing, agentId, agentList.length, agents])
 
   const onClose = () => {
     setOpen(false)
@@ -145,7 +145,7 @@ export function TaskSheet() {
           {editing ? 'Edit Task' : 'New Task'}
         </h2>
         <p className="text-[14px] text-text-3">
-          {editing ? `Status: ${editing.status}` : 'Create a task and assign an orchestrator'}
+          {editing ? `Status: ${editing.status}` : 'Create a task and assign an agent'}
         </p>
       </div>
 
@@ -166,7 +166,7 @@ export function TaskSheet() {
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
-          placeholder="Detailed task instructions for the orchestrator..."
+          placeholder="Detailed task instructions for the agent..."
           rows={4}
           className={`${inputClass} resize-y min-h-[100px]`}
           style={{ fontFamily: 'inherit' }}
@@ -206,10 +206,10 @@ export function TaskSheet() {
       </div>
 
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Orchestrator</label>
-        {orchestrators.length > 0 ? (
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Agent</label>
+        {agentList.length > 0 ? (
           <div className="flex flex-wrap gap-2">
-            {orchestrators.map((p) => (
+            {agentList.map((p) => (
               <button
                 key={p.id}
                 onClick={() => setAgentId(p.id)}
@@ -224,7 +224,7 @@ export function TaskSheet() {
             ))}
           </div>
         ) : (
-          <p className="text-[13px] text-text-3">No orchestrator agents configured. Create one in Agents first.</p>
+          <p className="text-[13px] text-text-3">No agents configured. Create one in Agents first.</p>
         )}
       </div>
 

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

@@ -4,6 +4,42 @@ import { useCallback, useRef, useState } from 'react'
 
 export type ContinuousSpeechState = 'idle' | 'listening' | 'cooldown' | 'waitingForResponse'
 
+interface SpeechRecognitionResult {
+  isFinal: boolean
+  [index: number]: { transcript: string }
+}
+
+interface SpeechRecognitionResultList {
+  readonly length: number
+  [index: number]: SpeechRecognitionResult
+}
+
+interface SpeechRecognitionEvent {
+  resultIndex: number
+  results: SpeechRecognitionResultList
+}
+
+interface SpeechRecognitionErrorEvent {
+  error: string
+}
+
+interface SpeechRecognitionInstance {
+  continuous: boolean
+  interimResults: boolean
+  maxAlternatives: number
+  lang: string
+  onresult: ((e: SpeechRecognitionEvent) => void) | null
+  onerror: ((e: SpeechRecognitionErrorEvent) => void) | null
+  onend: (() => void) | null
+  start(): void
+  stop(): void
+}
+
+interface WindowWithSpeechRecognition {
+  SpeechRecognition?: new () => SpeechRecognitionInstance
+  webkitSpeechRecognition?: new () => SpeechRecognitionInstance
+}
+
 interface UseContinuousSpeechOptions {
   lang?: string
   silenceDelayMs?: number
@@ -16,7 +52,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
   const [transcript, setTranscript] = useState('')
   const [interimText, setInterimText] = useState('')
 
-  const recogRef = useRef<any>(null)
+  const recogRef = useRef<SpeechRecognitionInstance | null>(null)
   const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const activeRef = useRef(false)
   const accumulatedRef = useRef('')
@@ -29,7 +65,8 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
   }
 
   const startRecognition = useCallback(() => {
-    const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+    const w = window as unknown as WindowWithSpeechRecognition
+    const SR = w.SpeechRecognition || w.webkitSpeechRecognition
     if (!SR) return
 
     if (recogRef.current) {
@@ -42,7 +79,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
     recog.maxAlternatives = 1
     recog.lang = lang || navigator.language || 'en-US'
 
-    recog.onresult = (e: any) => {
+    recog.onresult = (e: SpeechRecognitionEvent) => {
       clearSilenceTimer()
       let interim = ''
       let final = ''
@@ -77,7 +114,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
       }
     }
 
-    recog.onerror = (e: any) => {
+    recog.onerror = (e: SpeechRecognitionErrorEvent) => {
       // '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)
@@ -138,7 +175,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
   }, [startRecognition])
 
   const supported = typeof window !== 'undefined' &&
-    !!((window as any).SpeechRecognition || (window as any).webkitSpeechRecognition)
+    !!((window as unknown as WindowWithSpeechRecognition).SpeechRecognition || (window as unknown as WindowWithSpeechRecognition).webkitSpeechRecognition)
 
   return { state, transcript, interimText, start, stop, pause, resume, supported }
 }

package/src/hooks/use-openclaw-gateway.ts

@@ -0,0 +1,63 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useWs } from './use-ws'
+
+/** Call an OpenClaw gateway RPC method via the proxy route. */
+export function useOpenClawRpc<T = unknown>(method: string | null, params?: unknown) {
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const paramsRef = useRef(params)
+  paramsRef.current = params
+
+  const fetch = useCallback(async () => {
+    if (!method) return
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await api<{ ok: boolean; result: T; error?: string }>('POST', '/openclaw/gateway', {
+        method,
+        params: paramsRef.current,
+      })
+      if (res.error) {
+        setError(res.error)
+      } else {
+        setData(res.result)
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }, [method])
+
+  useEffect(() => { fetch() }, [fetch])
+
+  return { data, loading, error, refetch: fetch }
+}
+
+/** Subscribe to an OpenClaw event topic via the WS hub. */
+export function useOpenClawEvent(topic: string, handler: () => void) {
+  useWs(`openclaw:${topic}`, handler)
+}
+
+/** Check gateway connection status. */
+export function useOpenClawConnected() {
+  const [connected, setConnected] = useState(false)
+
+  const check = useCallback(async () => {
+    try {
+      const res = await api<{ connected: boolean }>('GET', '/openclaw/gateway')
+      setConnected(res.connected)
+    } catch {
+      setConnected(false)
+    }
+  }, [])
+
+  useEffect(() => { check() }, [check])
+  useWs('openclaw:agents', check)
+
+  return connected
+}

package/src/lib/notification-sounds.ts

@@ -0,0 +1,58 @@
+let ctx: AudioContext | null = null
+
+function ensureCtx(): AudioContext | null {
+  if (!ctx) {
+    try { ctx = new AudioContext() } catch { return null }
+  }
+  if (ctx.state === 'suspended') ctx.resume()
+  return ctx
+}
+
+function tone(freq: number, duration: number, type: OscillatorType = 'sine', delay = 0) {
+  const c = ensureCtx()
+  if (!c) return
+  const osc = c.createOscillator()
+  const gain = c.createGain()
+  osc.type = type
+  osc.frequency.value = freq
+  gain.gain.setValueAtTime(0.12, c.currentTime + delay)
+  gain.gain.exponentialRampToValueAtTime(0.001, c.currentTime + delay + duration / 1000)
+  osc.connect(gain)
+  gain.connect(c.destination)
+  osc.start(c.currentTime + delay)
+  osc.stop(c.currentTime + delay + duration / 1000)
+}
+
+/** Two ascending tones: C5 → E5 */
+export function playStreamStart() {
+  tone(523, 80, 'sine', 0)
+  tone(659, 80, 'sine', 0.09)
+}
+
+/** Two descending tones: E5 → C5 */
+export function playStreamEnd() {
+  tone(659, 80, 'sine', 0)
+  tone(523, 80, 'sine', 0.09)
+}
+
+/** Single ding: A5 */
+export function playToolComplete() {
+  tone(880, 120, 'triangle')
+}
+
+/** Low buzz: A3 */
+export function playError() {
+  tone(220, 200, 'square')
+}
+
+const LS_KEY = 'sc_sound_notifications'
+
+export function getSoundEnabled(): boolean {
+  if (typeof window === 'undefined') return false
+  return localStorage.getItem(LS_KEY) === '1'
+}
+
+export function setSoundEnabled(v: boolean) {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(LS_KEY, v ? '1' : '0')
+}