@swarmclawai/swarmclaw 0.4.0 → 0.5.0

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 { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 
 const TOOL_COLORS: Record<string, string> = {
@@ -14,6 +15,8 @@ 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',
@@ -60,6 +63,8 @@ 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',
@@ -79,7 +84,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',
 }
@@ -94,6 +99,8 @@ 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',
@@ -103,7 +110,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   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',
@@ -113,7 +120,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',
 }
@@ -245,6 +252,61 @@ function extractMedia(output: string): { images: string[]; videos: string[]; pdf
   return { images, videos, pdfs, files, cleanText }
 }
 
+import type { AppSettings } from '@/types'
+
+/** Settings keys that can be quick-fixed from error output */
+const TIMEOUT_SETTINGS: Array<{ pattern: RegExp; settingKey: keyof AppSettings; label: string; increment: number }> = [
+  { pattern: /Claude Code CLI timed out/i, settingKey: 'claudeCodeTimeoutSec', label: 'Claude Code Timeout', increment: 600 },
+  { pattern: /Codex CLI timed out|OpenCode CLI timed out/i, settingKey: 'cliProcessTimeoutSec', label: 'CLI Process Timeout', increment: 600 },
+  { pattern: /command timed out|shell.*timed out/i, settingKey: 'shellCommandTimeoutSec', label: 'Shell Timeout', increment: 60 },
+]
+
+/** Inline quick-fix button for timeout errors */
+function TimeoutQuickFix({ event }: { event: ToolEvent }) {
+  const [applied, setApplied] = useState(false)
+  if (event.status !== 'error' || !event.output) return null
+
+  const match = TIMEOUT_SETTINGS.find((s) => s.pattern.test(event.output || ''))
+  if (!match) return null
+
+  const handleIncrease = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const store = useAppStore.getState()
+    const current = (store.appSettings[match.settingKey] as number) || 0
+    const newValue = current + match.increment
+    await store.updateSettings({ [match.settingKey]: newValue })
+    setApplied(true)
+  }
+
+  if (applied) {
+    const store = useAppStore.getState()
+    const val = store.appSettings[match.settingKey] as number
+    return (
+      <div className="flex items-center gap-2 mt-2 text-[12px] text-emerald-400 font-500">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+        {match.label} increased to {val}s
+      </div>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleIncrease}
+      className="mt-2 flex items-center gap-1.5 px-3 py-1.5 rounded-[8px] text-[12px] font-600
+        bg-amber-500/10 border border-amber-500/20 text-amber-400 hover:bg-amber-500/20
+        cursor-pointer transition-all"
+      style={{ fontFamily: 'inherit' }}
+    >
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+      Increase {match.label}
+    </button>
+  )
+}
+
 export function ToolCallBubble({ event }: { event: ToolEvent }) {
   const [expanded, setExpanded] = useState(false)
   const [imgExpanded, setImgExpanded] = useState(false)
@@ -332,7 +394,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
                 role="link"
                 tabIndex={0}
                 onClick={handleAgentClick}
-                onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as any)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as unknown as React.MouseEvent)}
                 className="text-accent-bright hover:underline cursor-pointer font-600"
               >
                 {delegationInfo.agentName}
@@ -377,6 +439,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
                     {formattedCleanOutput}
                   </pre>
                 )}
+                <TimeoutQuickFix event={event} />
               </>
             )}
           </div>
@@ -391,23 +454,39 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
               <img
                 src={src}
                 alt={`Screenshot ${i + 1}`}
+                loading="lazy"
                 className={`rounded-[10px] border border-white/10 cursor-pointer transition-all duration-200 hover:border-white/25 ${imgExpanded ? 'max-w-full' : 'max-w-[400px]'}`}
                 onClick={(e) => { e.stopPropagation(); setImgExpanded(!imgExpanded) }}
                 onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
               />
-              <a
-                href={src}
-                download
-                onClick={(e) => e.stopPropagation()}
-                className="absolute top-2 right-2 opacity-0 group-hover/img:opacity-100 transition-opacity bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80"
-                title="Download"
-              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" 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>
-              </a>
+              <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover/img:opacity-100 transition-opacity">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    useChatStore.getState().setPreviewContent({ type: 'image', url: src, title: `${label} — Screenshot` })
+                  }}
+                  className="bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80 border-none cursor-pointer"
+                  title="Open in side panel"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" />
+                    <line x1="12" y1="3" x2="12" y2="21" />
+                  </svg>
+                </button>
+                <a
+                  href={src}
+                  download
+                  onClick={(e) => e.stopPropagation()}
+                  className="bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80"
+                  title="Download"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" 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>
+                </a>
+              </div>
             </div>
           ))}
         </div>
@@ -417,7 +496,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
       {media.videos.length > 0 && (
         <div className="mt-2 flex flex-col gap-2">
           {media.videos.map((src, i) => (
-            <video key={i} src={src} controls playsInline className="max-w-full rounded-[10px] border border-white/10" />
+            <video key={i} src={src} controls playsInline preload="none" className="max-w-full rounded-[10px] border border-white/10" />
           ))}
         </div>
       )}
@@ -427,7 +506,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
         <div className="mt-2 flex flex-col gap-2">
           {media.pdfs.map((file, i) => (
             <div key={i} className="rounded-[10px] border border-white/10 overflow-hidden">
-              <iframe src={file.url} className="w-full h-[400px] bg-white" title={file.name} />
+              <iframe src={file.url} loading="lazy" className="w-full h-[400px] bg-white" title={file.name} />
               <a
                 href={file.url}
                 download

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

@@ -1,7 +1,8 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
 import { api } from '@/lib/api-client'
 import { TOOL_LABELS } from '@/lib/tool-definitions'
 
@@ -15,6 +16,7 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const [granted, setGranted] = useState<Set<string>>(new Set())
+  const continueSentRef = useRef(false)
 
   const toolRequests: { toolId: string; reason: string }[] = []
   const seen = new Set<string>()
@@ -53,7 +55,23 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
     const updated = [...currentTools, toolId]
     await api('PUT', `/sessions/${sid}`, { tools: updated })
     await loadSessions()
-    setGranted((prev) => new Set(prev).add(toolId))
+    const newGranted = new Set(granted).add(toolId)
+    setGranted(newGranted)
+
+    // Auto-continue: once all requested tools are granted, send a follow-up message
+    const allGranted = toolRequests.every(
+      (r) => newGranted.has(r.toolId) || updated.includes(r.toolId),
+    )
+    if (allGranted && !continueSentRef.current) {
+      continueSentRef.current = true
+      // Small delay to let the session update propagate
+      setTimeout(() => {
+        const { streaming, sendMessage } = useChatStore.getState()
+        if (!streaming) {
+          sendMessage('Continue')
+        }
+      }, 300)
+    }
   }
 
   return (

package/src/components/chat/trace-block.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { useState } from 'react'
+import type { ChatTraceBlock } from '@/types'
+
+interface Props {
+  trace: ChatTraceBlock
+}
+
+export function TraceBlock({ trace }: Props) {
+  const [collapsed, setCollapsed] = useState(trace.collapsed !== false)
+
+  const bgColor = trace.type === 'thinking'
+    ? 'bg-purple-500/[0.04] border-purple-500/10'
+    : trace.type === 'tool-call'
+      ? 'bg-sky-500/[0.04] border-sky-500/10'
+      : 'bg-emerald-500/[0.04] border-emerald-500/10'
+
+  const labelColor = trace.type === 'thinking'
+    ? 'text-purple-400/70'
+    : trace.type === 'tool-call'
+      ? 'text-sky-400/70'
+      : 'text-emerald-400/70'
+
+  const icon = trace.type === 'thinking'
+    ? '...'
+    : trace.type === 'tool-call'
+      ? '>'
+      : '<'
+
+  return (
+    <div className={`my-1 rounded-[8px] border ${bgColor} overflow-hidden`}>
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className={`w-full flex items-center gap-2 px-3 py-1.5 text-left cursor-pointer border-none bg-transparent transition-colors hover:bg-white/[0.02] ${labelColor}`}
+        style={{ fontFamily: 'inherit' }}
+      >
+        <span className="font-mono text-[10px] w-4 shrink-0">{collapsed ? '+' : '-'}</span>
+        <span className="font-mono text-[10px] shrink-0">{icon}</span>
+        <span className="text-[11px] font-600 truncate">
+          {trace.label || trace.type.replace('-', ' ')}
+        </span>
+      </button>
+      {!collapsed && (
+        <div className="px-3 pb-2">
+          <pre className={`text-[11px] leading-relaxed whitespace-pre-wrap break-words m-0 ${
+            trace.type === 'thinking'
+              ? 'text-text-3/60 italic'
+              : 'text-text-3/70 font-mono'
+          }`}>
+            {trace.content.length > 2000
+              ? trace.content.slice(0, 2000) + '\n... (truncated)'
+              : trace.content}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** Parse message text with [[prefix]] markers into text and trace blocks */
+export function parseTraceBlocks(text: string): Array<{ type: 'text'; content: string } | ChatTraceBlock> {
+  const blocks: Array<{ type: 'text'; content: string } | ChatTraceBlock> = []
+  const regex = /\[\[(thinking|tool|tool-result|trace|meta)\]\]([\s\S]*?)(?=\[\[(thinking|tool|tool-result|trace|meta)\]\]|$)/g
+
+  let lastEnd = 0
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(text)) !== null) {
+    // Add any text before this match
+    if (match.index > lastEnd) {
+      const before = text.slice(lastEnd, match.index).trim()
+      if (before) blocks.push({ type: 'text', content: before })
+    }
+
+    const prefix = match[1]
+    const content = match[2].trim()
+    if (content) {
+      if (prefix === 'thinking' || prefix === 'trace') {
+        blocks.push({ type: 'thinking', content, collapsed: true })
+      } else if (prefix === 'tool') {
+        const firstLine = content.split('\n')[0] || ''
+        blocks.push({ type: 'tool-call', content, label: firstLine.slice(0, 60), collapsed: true })
+      } else if (prefix === 'tool-result') {
+        blocks.push({ type: 'tool-result', content, collapsed: true })
+      }
+      // meta is ignored
+    }
+
+    lastEnd = match.index + match[0].length
+  }
+
+  // Add remaining text
+  if (lastEnd === 0) {
+    // No trace markers found
+    if (text.trim()) blocks.push({ type: 'text', content: text })
+  } else if (lastEnd < text.length) {
+    const remaining = text.slice(lastEnd).trim()
+    if (remaining) blocks.push({ type: 'text', content: remaining })
+  }
+
+  return blocks
+}

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

@@ -104,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

@@ -114,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.' },
@@ -122,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',
@@ -146,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=...)' },
     ],
   },
   {
@@ -163,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=...)' },
     ],
   },
   {
@@ -366,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>
@@ -552,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 (
@@ -732,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 && (