@swarmclawai/swarmclaw 0.3.1 → 0.4.5

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

@@ -168,6 +168,115 @@ function heartbeatSummary(text: string): string {
   return clean.length > 180 ? `${clean.slice(0, 180)}...` : clean
 }
 
+const IMAGE_ATTACH_RE = /\.(png|jpg|jpeg|gif|webp|svg|bmp|ico)$/i
+const PREVIEWABLE_ATTACH_RE = /\.(html?|svg)$/i
+const FILE_TYPE_COLORS: Record<string, string> = {
+  html: 'text-orange-400', htm: 'text-orange-400', svg: 'text-emerald-400',
+  js: 'text-yellow-400', jsx: 'text-yellow-400', ts: 'text-blue-400', tsx: 'text-blue-400',
+  py: 'text-green-400', json: 'text-amber-300', css: 'text-purple-400', scss: 'text-pink-400',
+  md: 'text-text-2', txt: 'text-text-3', pdf: 'text-red-400',
+}
+
+function parseAttachmentUrl(filePath?: string, fileUrl?: string) {
+  const url = fileUrl || (filePath ? `/api/uploads/${filePath.split('/').pop()}` : '')
+  const rawName = filePath?.split('/').pop() || fileUrl?.split('/').pop() || 'file'
+  const filename = rawName.replace(/^[a-f0-9]+-/, '').split('?')[0]
+  return { url, filename }
+}
+
+function AttachmentChip({ url, filename, isUserMsg }: { url: string; filename: string; isUserMsg?: boolean }) {
+  const isImage = IMAGE_ATTACH_RE.test(filename)
+  if (isImage) {
+    return (
+      <img src={url} alt="Attached" className="max-w-[240px] rounded-[12px] mb-2 border border-white/10"
+        onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
+    )
+  }
+
+  const ext = filename.split('.').pop()?.toLowerCase() || ''
+  const colorClass = FILE_TYPE_COLORS[ext] || 'text-text-3'
+  const isPreviewable = PREVIEWABLE_ATTACH_RE.test(filename)
+
+  // Solid bg so chip is readable on both user (purple) and assistant bubbles
+  const chipBg = isUserMsg
+    ? 'bg-[rgba(0,0,0,0.25)] border-white/[0.12]'
+    : 'bg-[rgba(255,255,255,0.04)] border-white/[0.08]'
+  const iconBg = isUserMsg ? 'bg-white/[0.12]' : 'bg-white/[0.05]'
+  const btnBg = isUserMsg
+    ? 'bg-white/[0.12] hover:bg-white/[0.18] text-white/80'
+    : 'bg-white/[0.06] hover:bg-white/[0.10] text-text-3'
+
+  return (
+    <div className={`flex items-center gap-3 px-4 py-2.5 mb-2 rounded-[12px] border ${chipBg}`}>
+      <div className={`flex items-center justify-center w-8 h-8 rounded-[8px] shrink-0 ${iconBg} ${colorClass}`}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+        </svg>
+      </div>
+      <div className="flex flex-col flex-1 min-w-0">
+        <span className={`text-[13px] font-500 truncate ${isUserMsg ? 'text-white' : 'text-text'}`}>{filename}</span>
+        <span className={`text-[11px] uppercase tracking-wide ${isUserMsg ? 'text-white/50' : 'text-text-3/70'}`}>{ext || 'file'}</span>
+      </div>
+      {isPreviewable && (
+        <a href={url} target="_blank" rel="noopener noreferrer"
+          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 ${
+            isUserMsg ? 'bg-white/[0.15] hover:bg-white/[0.22] text-white' : 'bg-accent-soft hover:bg-accent-soft/80 text-accent-bright'
+          }`}
+          title="Preview in new tab">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+          Preview
+        </a>
+      )}
+      <a href={url} download={filename}
+        className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 ${btnBg}`}>
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="7 10 12 15 17 10" />
+          <line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+        Download
+      </a>
+    </div>
+  )
+}
+
+function renderAttachments(message: Message) {
+  const isUser = message.role === 'user'
+  const seen = new Set<string>()
+  const chips: { url: string; filename: string }[] = []
+
+  // Primary attachment
+  if (message.imagePath || message.imageUrl) {
+    const primary = parseAttachmentUrl(message.imagePath, message.imageUrl)
+    if (primary.url) {
+      seen.add(primary.url)
+      chips.push(primary)
+    }
+  }
+
+  // Additional attached files
+  if (message.attachedFiles?.length) {
+    for (const fp of message.attachedFiles) {
+      const att = parseAttachmentUrl(fp)
+      if (att.url && !seen.has(att.url)) {
+        seen.add(att.url)
+        chips.push(att)
+      }
+    }
+  }
+
+  if (!chips.length) return null
+  return (
+    <div className="flex flex-col">
+      {chips.map((c) => <AttachmentChip key={c.url} url={c.url} filename={c.filename} isUserMsg={isUser} />)}
+    </div>
+  )
+}
+
 interface Props {
   message: Message
   assistantName?: string
@@ -240,48 +349,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
 
       {/* Message bubble */}
       <div className={`max-w-[85%] md:max-w-[72%] ${isUser ? 'bubble-user px-5 py-3.5' : isHeartbeat ? 'bubble-ai px-4 py-3' : 'bubble-ai px-5 py-3.5'}`}>
-        {(message.imagePath || message.imageUrl) && (() => {
-          const url = message.imageUrl || `/api/uploads/${message.imagePath?.split('/').pop()}`
-          const rawName = message.imagePath?.split('/').pop() || message.imageUrl?.split('/').pop() || 'file'
-          const filename = rawName.replace(/^[a-f0-9]+-/, '').split('?')[0]
-          const isImage = /\.(png|jpg|jpeg|gif|webp|svg|bmp|ico)$/i.test(filename)
-          if (isImage) {
-            return (
-              <img src={url} alt="Attached" className="max-w-[240px] rounded-[12px] mb-3 border border-white/10"
-                onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
-            )
-          }
-          const isPreviewable = /\.(html?|svg)$/i.test(filename)
-          return (
-            <div className="flex items-center gap-3 px-4 py-3 mb-3 rounded-[12px] border border-white/10 bg-white/[0.03]">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14 2 14 8 20 8" />
-              </svg>
-              <span className="text-[13px] text-text-2 font-500 truncate flex-1">{filename}</span>
-              {isPreviewable && (
-                <a href={url} target="_blank" rel="noopener noreferrer"
-                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-accent-soft hover:bg-accent-soft/80 text-accent-bright text-[11px] font-600 no-underline transition-colors shrink-0"
-                  title="Preview in new tab">
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Preview
-                </a>
-              )}
-              <a href={url} download={filename}
-                className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-white/[0.06] hover:bg-white/[0.10] text-text-3 text-[11px] font-600 no-underline transition-colors shrink-0">
-                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-                Download
-              </a>
-            </div>
-          )
-        })()}
+        {renderAttachments(message)}
 
         {isHeartbeat ? (
           <div className="flex flex-col gap-2">

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

@@ -2,6 +2,7 @@
 
 import { useState, useMemo } from 'react'
 import type { ToolEvent } from '@/stores/use-chat-store'
+import { useAppStore } from '@/stores/use-app-store'
 
 const TOOL_COLORS: Record<string, string> = {
   execute_command: '#F59E0B',
@@ -13,8 +14,11 @@ const TOOL_COLORS: Record<string, string> = {
   delete_file: '#EF4444',
   edit_file: '#10B981',
   send_file: '#10B981',
+  create_document: '#10B981',
+  create_spreadsheet: '#10B981',
   web_search: '#3B82F6',
   web_fetch: '#3B82F6',
+  delegate_to_agent: '#6366F1',
   delegate_to_claude_code: '#6366F1',
   delegate_to_codex_cli: '#0EA5E9',
   delegate_to_opencode_cli: '#14B8A6',
@@ -58,11 +62,14 @@ export const TOOL_LABELS: Record<string, string> = {
   delete_file: 'Delete File',
   edit_file: 'Edit File',
   send_file: 'Send File',
+  create_document: 'Create Document',
+  create_spreadsheet: 'Create Spreadsheet',
   web_search: 'Web Search',
   web_fetch: 'Web Fetch',
   claude_code: 'Claude Code',
   codex_cli: 'Codex CLI',
   opencode_cli: 'OpenCode CLI',
+  delegate_to_agent: 'Agent Delegation',
   delegate_to_claude_code: 'Claude Code',
   delegate_to_codex_cli: 'Codex CLI',
   delegate_to_opencode_cli: 'OpenCode CLI',
@@ -76,7 +83,7 @@ export const TOOL_LABELS: Record<string, string> = {
   manage_documents: 'Documents',
   manage_webhooks: 'Webhooks',
   manage_connectors: 'Connectors',
-  manage_sessions: 'Sessions',
+  manage_sessions: 'Chats',
   memory: 'Memory',
   browser: 'Browser',
 }
@@ -91,15 +98,18 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   delete_file: 'Delete files or directories (when explicitly enabled)',
   edit_file: 'Edit existing files with find-and-replace',
   send_file: 'Send files to the user (images, PDFs, videos, documents, etc.)',
+  create_document: 'Render markdown content into PDF, HTML, or image',
+  create_spreadsheet: 'Create Excel or CSV files from structured data',
   web_search: 'Search the web for information',
   web_fetch: 'Fetch and read web page content',
   claude_code: 'Enable delegation to Claude Code CLI',
   codex_cli: 'Enable delegation to OpenAI Codex CLI',
   opencode_cli: 'Enable delegation to OpenCode CLI',
+  delegate_to_agent: 'Delegate a task to another agent',
   delegate_to_claude_code: 'Delegate complex coding tasks to Claude Code',
   delegate_to_codex_cli: 'Delegate complex coding tasks to Codex CLI',
   delegate_to_opencode_cli: 'Delegate complex coding tasks to OpenCode CLI',
-  whoami_tool: 'Reveal the current session and agent identity context',
+  whoami_tool: 'Reveal the current agent and chat context',
   connector_message_tool: 'Send proactive outbound messages via running connectors',
   search_history_tool: 'Search chat history for relevant prior context',
   manage_tasks: 'Create, update, and manage tasks on the board',
@@ -109,7 +119,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   manage_documents: 'Upload and search indexed documents',
   manage_webhooks: 'Register and manage inbound webhooks',
   manage_connectors: 'Manage chat platform connectors (Slack, Discord, etc.)',
-  manage_sessions: 'Create and manage chat sessions',
+  manage_sessions: 'Create and manage agent chats',
   memory: 'Store and recall information across conversations',
   browser: 'Browse the web, take screenshots, and interact with pages',
 }
@@ -181,6 +191,7 @@ function getInputPreview(name: string, input: string): string {
       return ''
     }
     if (name === 'send_file') return parsed.filePath || ''
+    if (name === 'delegate_to_agent') return `${parsed.agentName}: ${(parsed.task || '').slice(0, 80)}`
 
     if (parsed.command) return parsed.command
     if (parsed.filePath) return parsed.filePath
@@ -280,6 +291,24 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
 
   const hasMedia = media.images.length > 0 || media.videos.length > 0 || media.pdfs.length > 0 || media.files.length > 0
 
+  // Parse delegation info for clickable agent link
+  const delegationInfo = useMemo(() => {
+    if (event.name !== 'delegate_to_agent') return null
+    try {
+      const parsed = JSON.parse(event.input)
+      return { agentName: parsed.agentName || '', agentId: parsed.agentId || '', task: parsed.task || '' }
+    } catch { return null }
+  }, [event.name, event.input])
+
+  const handleAgentClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (delegationInfo?.agentId) {
+      const store = useAppStore.getState()
+      store.setActiveView('agents')
+      store.setCurrentAgent(delegationInfo.agentId)
+    }
+  }
+
   return (
     <div className="w-full text-left">
       <button
@@ -303,9 +332,24 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
           <span className="text-[12px] font-700 uppercase tracking-wider shrink-0" style={{ color }}>
             {label}
           </span>
-          <span className="text-[12px] text-text-2 font-mono truncate flex-1">
-            {inputPreview}
-          </span>
+          {delegationInfo ? (
+            <span className="text-[12px] text-text-2 font-mono truncate flex-1">
+              <span
+                role="link"
+                tabIndex={0}
+                onClick={handleAgentClick}
+                onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as any)}
+                className="text-accent-bright hover:underline cursor-pointer font-600"
+              >
+                {delegationInfo.agentName}
+              </span>
+              {delegationInfo.task && <span className="text-text-3">: {delegationInfo.task.slice(0, 80)}</span>}
+            </span>
+          ) : (
+            <span className="text-[12px] text-text-2 font-mono truncate flex-1">
+              {inputPreview}
+            </span>
+          )}
           {hasMedia && !expanded && (
             <span className="text-[10px] text-text-3/50 font-500 shrink-0">
               {media.images.length > 0 && `${media.images.length} image${media.images.length > 1 ? 's' : ''}`}

package/src/components/chat/tool-request-banner.tsx

@@ -3,15 +3,7 @@
 import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
-
-const TOOL_LABELS: Record<string, string> = {
-  shell: 'Shell', files: 'Files', edit_file: 'Edit File', process: 'Process',
-  web_search: 'Web Search', web_fetch: 'Web Fetch', browser: 'Browser', memory: 'Memory',
-  claude_code: 'Claude Code', codex_cli: 'Codex CLI', opencode_cli: 'OpenCode CLI',
-  orchestrator: 'Orchestrator', manage_agents: 'Agents', manage_tasks: 'Tasks', manage_schedules: 'Schedules',
-  manage_skills: 'Skills', manage_documents: 'Documents', manage_webhooks: 'Webhooks',
-  manage_connectors: 'Connectors', manage_sessions: 'Sessions', manage_secrets: 'Secrets',
-}
+import { TOOL_LABELS } from '@/lib/tool-definitions'
 
 interface Props {
   text: string

package/src/components/chat/voice-overlay.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { VoiceConversationState } from '@/hooks/use-voice-conversation'
+
+interface VoiceOverlayProps {
+  state: VoiceConversationState
+  interimText: string
+  transcript: string
+  onStop: () => void
+}
+
+const STATE_LABELS: Record<VoiceConversationState, string> = {
+  idle: '',
+  listening: 'Listening...',
+  processing: 'Processing...',
+  speaking: 'Speaking...',
+}
+
+export function VoiceOverlay({ state, interimText, transcript, onStop }: VoiceOverlayProps) {
+  if (state === 'idle') return null
+
+  return (
+    <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-bg/90 backdrop-blur-sm">
+      {/* Animated indicator */}
+      <div className="relative">
+        <div className={`w-20 h-20 rounded-full flex items-center justify-center ${
+          state === 'listening'
+            ? 'bg-accent/20 animate-pulse'
+            : state === 'speaking'
+              ? 'bg-green-500/20'
+              : 'bg-yellow-500/20'
+        }`}>
+          <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+            state === 'listening'
+              ? 'bg-accent/30'
+              : state === 'speaking'
+                ? 'bg-green-500/30'
+                : 'bg-yellow-500/30'
+          }`}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className={
+              state === 'listening' ? 'text-accent-bright' : state === 'speaking' ? 'text-green-400' : 'text-yellow-400'
+            }>
+              {state === 'speaking' ? (
+                <>
+                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+                </>
+              ) : (
+                <>
+                  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+                  <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                  <line x1="12" x2="12" y1="19" y2="22" />
+                </>
+              )}
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-[14px] font-500 text-text-2">{STATE_LABELS[state]}</div>
+
+      {/* Transcript display */}
+      {(transcript || interimText) && (
+        <div className="max-w-md px-6 text-center">
+          {transcript && <p className="text-[14px] text-text-1 mb-1">{transcript}</p>}
+          {interimText && <p className="text-[13px] text-text-3/60 italic">{interimText}</p>}
+        </div>
+      )}
+
+      {/* Stop button */}
+      <button
+        onClick={onStop}
+        className="mt-2 px-5 py-2 rounded-lg bg-red-500/10 text-red-400 text-[13px] font-600 hover:bg-red-500/20 transition-colors"
+      >
+        Stop Voice
+      </button>
+    </div>
+  )
+}

package/src/components/connectors/connector-list.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { Connector } from '@/types'
 import { ConnectorPlatformBadge, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
@@ -24,14 +25,8 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
     setLoaded(true)
   }, [loadConnectors, loadAgents])
 
-  useEffect(() => {
-    const bootstrap = setTimeout(() => { void refresh() }, 0)
-    const poll = setInterval(() => { void loadConnectors() }, 15_000)
-    return () => {
-      clearTimeout(bootstrap)
-      clearInterval(poll)
-    }
-  }, [refresh, loadConnectors])
+  useEffect(() => { void refresh() }, [refresh])
+  useWs('connectors', loadConnectors, 15_000)
 
   // Auto-clear error after 5s
   useEffect(() => {
@@ -109,8 +104,12 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
         const agent = agents[c.agentId]
         const isRunning = c.status === 'running'
         const isToggling = toggling === c.id
-        // Can only toggle if connector has credentials (or is WhatsApp which uses QR)
-        const hasCredentials = c.platform === 'whatsapp' || !!c.credentialId
+        // Can only toggle if connector has credentials (or uses non-token auth modes).
+        const hasCredentials = c.platform === 'whatsapp'
+          || c.platform === 'openclaw'
+          || c.platform === 'signal'
+          || (c.platform === 'bluebubbles' && (!!c.credentialId || !!c.config?.password))
+          || !!c.credentialId
         return (
           <div
             key={c.id}

package/src/components/connectors/connector-sheet.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { api } from '@/lib/api-client'
+import { useWs } from '@/hooks/use-ws'
 import { toast } from 'sonner'
 import type { Connector, ConnectorPlatform } from '@/types'
 import { ConnectorPlatformBadge } from '@/components/shared/connector-platform-icon'
@@ -113,7 +114,7 @@ const PLATFORMS: {
     tokenHelp: 'Required when your OpenClaw gateway is auth-protected',
     configFields: [
       { key: 'wsUrl', label: 'WebSocket URL', placeholder: 'ws://localhost:18789', help: 'OpenClaw gateway WebSocket endpoint (root URL, not /ws)' },
-      { key: 'sessionKey', label: 'Session Key Filter', placeholder: 'main', help: 'Optional. If set, only inbound events for this OpenClaw session are processed.' },
+      { key: 'sessionKey', label: 'Chat Key Filter', placeholder: 'main', help: 'Optional. If set, only inbound events for this OpenClaw session are processed.' },
       { key: 'nodeId', label: 'Client Label', placeholder: 'swarmclaw', help: 'Optional display label shown in OpenClaw presence metadata.' },
       { key: 'role', label: 'Gateway Role', placeholder: 'operator', help: 'Optional role claim for connect handshake. Default is operator.' },
       { key: 'scopes', label: 'Scopes (CSV)', placeholder: 'operator.read,operator.write', help: 'Optional comma-separated scopes for OpenClaw connect.' },
@@ -121,6 +122,28 @@ const PLATFORMS: {
       { key: 'tickIntervalMs', label: 'Tick Interval Override (ms)', placeholder: '30000', help: 'Optional watchdog interval override when policy tick is unavailable.' },
     ],
   },
+  {
+    id: 'bluebubbles',
+    label: 'BlueBubbles',
+    color: '#2E89FF',
+    setupSteps: [
+      'Run BlueBubbles server on your macOS host and enable the REST API',
+      'Copy the BlueBubbles server password',
+      'After saving the connector, point BlueBubbles webhook to /api/connectors/<connector-id>/webhook',
+      'Optionally set dmPolicy=pairing to require explicit sender approval for new DMs',
+    ],
+    tokenLabel: 'BlueBubbles Password',
+    tokenHelp: 'Server password used for /api/v1/ping and /api/v1/message/text',
+    configFields: [
+      { key: 'serverUrl', label: 'Server URL', placeholder: 'http://127.0.0.1:1234', help: 'BlueBubbles server URL (no trailing /api path needed)' },
+      { key: 'chatIds', label: 'Allowed Chat IDs', placeholder: 'iMessage;-;+15551234567', help: 'Optional comma-separated chat IDs/guid fragments. Leave empty for all chats.' },
+      { key: 'dmPolicy', label: 'DM Policy', placeholder: 'open | allowlist | pairing | disabled', help: 'Access policy for direct-message senders. Default: open.' },
+      { key: 'allowFrom', label: 'Allowed Sender IDs', placeholder: '+15551234567,test@example.com', help: 'Optional comma-separated sender IDs for allowlist/pairing mode.' },
+      { key: 'outboundTarget', label: 'Default Outbound Target', placeholder: 'iMessage;-;+15551234567', help: 'Used when proactive sends omit "to".' },
+      { key: 'webhookSecret', label: 'Webhook Secret', placeholder: 'optional-shared-secret', help: 'Optional secret required by /api/connectors/{id}/webhook (header: x-connector-secret or ?secret=...)' },
+      { key: 'timeoutMs', label: 'Request Timeout (ms)', placeholder: '10000', help: 'Optional BlueBubbles API timeout in milliseconds.' },
+    ],
+  },
   {
     id: 'matrix',
     label: 'Matrix',
@@ -145,13 +168,14 @@ const PLATFORMS: {
     setupSteps: [
       'Create a Google Cloud project and enable the Google Chat API',
       'Create a service account and download the JSON key file',
-      'In Google Chat Admin, configure the bot with your app URL',
+      'In Google Chat Admin, configure event delivery to /api/connectors/<connector-id>/webhook',
       'Paste the full service account JSON as the bot token',
     ],
     tokenLabel: 'Service Account JSON',
     tokenHelp: 'Paste the full service account JSON key file contents',
     configFields: [
       { key: 'spaceIds', label: 'Space IDs', placeholder: 'spaces/AAAA123', help: 'Comma-separated Google Chat space IDs' },
+      { key: 'webhookSecret', label: 'Webhook Secret', placeholder: 'optional-shared-secret', help: 'Optional secret required by /api/connectors/{id}/webhook (header: x-connector-secret or ?secret=...)' },
     ],
   },
   {
@@ -162,13 +186,14 @@ const PLATFORMS: {
       'Register a bot in the Azure Bot Framework portal',
       'Note the Microsoft App ID and generate an App Secret',
       'Set up a public HTTPS endpoint for webhook delivery',
-      'Configure the messaging endpoint in Azure to your notify URL',
+      'After saving the connector, point Azure to /api/connectors/<connector-id>/webhook',
     ],
     tokenLabel: 'App Secret',
     tokenHelp: 'Microsoft App Secret from Azure Bot registration',
     configFields: [
       { key: 'appId', label: 'Microsoft App ID', placeholder: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', help: 'Azure Bot Framework App ID' },
-      { key: 'notifyUrl', label: 'Notify URL', placeholder: 'https://your-server.com/api/teams/webhook', help: 'Public HTTPS endpoint for receiving messages' },
+      { key: 'notifyUrl', label: 'Notify URL', placeholder: 'https://your-server.com/api/connectors/<id>/webhook', help: 'Public HTTPS endpoint for receiving messages (informational)' },
+      { key: 'webhookSecret', label: 'Webhook Secret', placeholder: 'optional-shared-secret', help: 'Optional secret required by /api/connectors/{id}/webhook (header: x-connector-secret or ?secret=...)' },
     ],
   },
   {
@@ -255,35 +280,29 @@ export function ConnectorSheet() {
 
   // Poll for QR code when WhatsApp connector is running or connecting
   const isWaRunning = editing?.platform === 'whatsapp' && (editing?.status === 'running' || waConnecting)
-  useEffect(() => {
-    if (!editing || !isWaRunning) {
-      return
-    }
-    let cancelled = false
-    const poll = async () => {
-      try {
-        const data = await api<any>('GET', `/connectors/${editing.id}`)
-        if (!cancelled) {
-          setQrDataUrl(data.qrDataUrl || null)
-          setWaAuthenticated(data.authenticated ?? false)
-          setWaHasCreds(data.hasCredentials ?? false)
-          // Sync store with the individual endpoint's runtime status
-          if (data.status === 'running' && editing.status !== 'running') {
-            // Store is stale — update it directly
-            const store = useAppStore.getState()
-            const updated = { ...store.connectors }
-            if (updated[editing.id]) {
-              updated[editing.id] = { ...updated[editing.id], status: 'running' as const }
-              useAppStore.setState({ connectors: updated })
-            }
-          }
+  const pollWaStatus = useCallback(async () => {
+    if (!editing) return
+    try {
+      const data = await api<any>('GET', `/connectors/${editing.id}`)
+      setQrDataUrl(data.qrDataUrl || null)
+      setWaAuthenticated(data.authenticated ?? false)
+      setWaHasCreds(data.hasCredentials ?? false)
+      if (data.status === 'running' && editing.status !== 'running') {
+        const store = useAppStore.getState()
+        const updated = { ...store.connectors }
+        if (updated[editing.id]) {
+          updated[editing.id] = { ...updated[editing.id], status: 'running' as const }
+          useAppStore.setState({ connectors: updated })
         }
-      } catch { /* ignore */ }
-    }
-    poll()
-    const interval = setInterval(poll, 2000)
-    return () => { cancelled = true; clearInterval(interval) }
-  }, [editing?.id, isWaRunning])
+      }
+    } catch { /* ignore */ }
+  }, [editing?.id, editing?.status])
+
+  useEffect(() => {
+    if (editing && isWaRunning) pollWaStatus()
+  }, [editing?.id, isWaRunning, pollWaStatus])
+
+  useWs('connectors', pollWaStatus, isWaRunning ? 2000 : undefined)
 
   const handleSave = async () => {
     if (!agentId) return
@@ -371,7 +390,7 @@ export function ConnectorSheet() {
                 <div>
                   <div className={`text-[14px] font-600 ${platform === p.id ? 'text-text' : 'text-text-2'}`}>{p.label}</div>
                   <div className="text-[11px] text-text-3 mt-0.5">
-                    {p.id === 'whatsapp' ? 'QR code pairing' : p.id === 'openclaw' ? 'WebSocket gateway' : p.id === 'signal' ? 'signal-cli binary' : p.id === 'matrix' ? 'Access token' : p.id === 'googlechat' ? 'Service account' : p.id === 'teams' ? 'Bot Framework' : 'Bot token'}
+                    {p.id === 'whatsapp' ? 'QR code pairing' : p.id === 'openclaw' ? 'WebSocket gateway' : p.id === 'bluebubbles' ? 'iMessage bridge' : p.id === 'signal' ? 'signal-cli binary' : p.id === 'matrix' ? 'Access token' : p.id === 'googlechat' ? 'Service account' : p.id === 'teams' ? 'Bot Framework' : 'Bot token'}
                   </div>
                 </div>
               </button>
@@ -557,7 +576,7 @@ export function ConnectorSheet() {
 
       {/* Platform-specific config */}
       {platformConfig.configFields.map((field) => {
-        const isTagField = field.key === 'allowedJids' || field.key === 'channelIds' || field.key === 'chatIds'
+        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)
           return (
@@ -737,7 +756,7 @@ export function ConnectorSheet() {
           </div>
           <p className="text-[11px] text-text-3">
             {waHasCreds
-              ? 'Reconnecting with saved session, this should only take a moment'
+              ? 'Reconnecting with saved credentials, this should only take a moment'
               : 'Connecting to WhatsApp, QR code will appear shortly'}
           </p>
           {waHasCreds && (