@swarmclawai/swarmclaw 0.6.2 → 0.6.4

package/README.md

@@ -1,7 +1,8 @@
 # SwarmClaw
 
 [![CI](https://github.com/swarmclawai/swarmclaw/actions/workflows/ci.yml/badge.svg)](https://github.com/swarmclawai/swarmclaw/actions/workflows/ci.yml)
-[![Release](https://img.shields.io/github/v/release/swarmclawai/swarmclaw?sort=semver)](https://github.com/swarmclawai/swarmclaw/releases)
+[![Release](https://img.shields.io/github/v/tag/swarmclawai/swarmclaw)](https://github.com/swarmclawai/swarmclaw/releases)
+[![npm](https://img.shields.io/npm/v/%40swarmclawai%2Fswarmclaw?label=npm)](https://www.npmjs.com/package/@swarmclawai/swarmclaw)
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/swarmclawai/swarmclaw/main/public/branding/swarmclaw-org-avatar.png" alt="SwarmClaw lobster logo" width="120" />
@@ -22,48 +23,6 @@ Inspired by [OpenClaw](https://github.com/openclaw).
 - Review agent system prompts before giving them shell or browser tools
 - Repeated failed access key attempts are rate-limited to slow brute-force attacks
 
-## Features
-
-- **15 Built-in Providers** — Claude Code CLI, OpenAI Codex CLI, OpenCode CLI, Anthropic, OpenAI, Google Gemini, DeepSeek, Groq, Together AI, Mistral AI, xAI (Grok), Fireworks AI, Ollama, plus custom OpenAI-compatible endpoints
-- **OpenClaw Gateway** — Per-agent toggle to connect any agent to a local or remote OpenClaw gateway. Each agent gets its own gateway URL and token — run a swarm of OpenClaws from one dashboard. The `openclaw` CLI ships as a bundled dependency (no separate install needed)
-- **OpenClaw Control Plane** — Built-in gateway connection controls, reload mode switching (hot/hybrid/full), config issue detection/repair, remote history sync, and live execution approval handling
-- **Agent Builder** — Create agents with custom personalities (soul), system prompts, tools, and skills. AI-powered generation from a description
-- **Agent Inspector Panel** — Per-agent side panel for OpenClaw file editing (`SOUL.md`, `IDENTITY.md`, `USER.md`, etc.), guided personality editing, skill install/enable/remove, permission presets, sandbox env allowlist, and cron automations
-- **Agent Fleet Management** — Avatar seeds with generated avatars, running/approval fleet filters, soft-delete agent trash with restore/permanent delete, and approval counters in agent cards
-- **Agent Tools** — Shell, process control for long-running commands, files, edit file, send file, web search, web fetch, CLI delegation (Claude/Codex/OpenCode), Playwright browser automation, sub-agent spawning, canvas presentation, direct HTTP requests, git operations, persistent memory, and sandboxed code execution (JS/TS via Deno, Python)
-- **Platform Tools** — Agents can manage other agents, tasks, schedules, skills, connectors, sessions, and encrypted secrets via built-in platform tools
-- **Orchestration** — Multi-agent workflows powered by LangGraph with automatic sub-agent routing, checkpointed execution, and rich delegation cards that link to sub-agent chat threads
-- **Agentic Execution Policy** — Tool-first autonomous action loop with progress updates, evidence-driven answers, and better use of platform tools for long-lived work
-- **Runtime Date/Time Grounding** — Session, orchestrator, chatroom, and connector prompts include authoritative current timestamp context to reduce stale-date behavior
-- **Task Board** — Queue and track agent tasks with status, comments, results, and archiving. Strict capability policy pauses tasks for human approval before tool execution
-- **Task Metrics API** — Built-in analytics endpoint for WIP, cycle times, throughput velocity, completion/failure by agent, and priority distribution
-- **Background Daemon** — Auto-processes queued tasks and scheduled jobs with a 30s heartbeat plus recurring health monitoring
-- **Scheduling** — Cron-based agent scheduling with human-friendly presets
-- **Loop Runtime Controls** — Switch between bounded and ongoing loops with configurable step caps, runtime guards, heartbeat cadence, and timeout budgets
-- **Session Run Queue** — Per-session queued runs with followup/steer/collect modes, collect coalescing for bursty inputs, and run-state APIs
-- **Chat Iteration Workflow** — Edit-and-resend user turns, fork a new session from any message, bookmark key messages, use contextual follow-up suggestion chips, and auto-continue after tool access grants
-- **Agent Chatrooms** — Multi-agent room conversations with `@mention` routing, chained agent replies, reactions, and file/image-aware chat context
-- **Live Chat Telemetry** — Thinking/tool/responding stream phases, live main-loop status badges, connector activity presence, tone indicator, and optional sound notifications
-- **Global Search Palette** — `Cmd/Ctrl+K` search across agents, tasks, sessions, schedules, webhooks, and skills from anywhere in the app
-- **Notification Center** — Real-time in-app notifications for task/schedule/daemon events with unread tracking, mark-all/clear-read controls, and optional action links
-- **Preview-Rich Chat UI** — Side preview panel for tool outputs (image/browser/html/code), inline code/PDF previews for attachments, and image lightbox support
-- **Voice Settings** — Per-instance ElevenLabs API key + voice ID for TTS replies, plus configurable speech recognition language for chat input
-- **Chat Connectors** — Bridge agents to Discord, Slack, Telegram, WhatsApp, BlueBubbles (iMessage), Signal, Microsoft Teams, Google Chat, Matrix, and OpenClaw with media-aware inbound handling
-- **Skills System** — Discover local skills, import skills from URL, and load OpenClaw `SKILL.md` files (frontmatter-compatible)
-- **Execution Logging** — Structured audit trail for triggers, tool calls, file ops, commits, and errors in a dedicated `logs.db`
-- **Context Management** — Auto-compaction of conversation history when approaching context limits, with manual `context_status` and `context_summarize` tools for agents
-- **Memory** — Per-agent and per-session memory with hybrid FTS5 + vector embeddings search, relevance-based memory recall injected into runs, and periodic auto-journaling for durable execution context
-- **Cost Tracking** — Per-message token counting and cost estimation displayed in the chat header
-- **Provider Health Metrics** — Usage dashboard surfaces provider request volume, success rates, models used, and last-used timestamps
-- **Model Failover** — Automatic key rotation on rate limits and auth errors with configurable fallback credentials
-- **Plugin System** — Extend agent behavior with JS plugins (hooks: beforeAgentStart, afterAgentComplete, beforeToolExec, afterToolExec, onMessage)
-- **Secrets Vault** — Encrypted storage for API keys and service tokens
-- **Custom Providers** — Add any OpenAI-compatible API as a provider
-- **MCP Servers** — Connect agents to any Model Context Protocol server. Per-agent server selection with tool discovery and per-tool disable toggles
-- **Sandboxed Code Execution** — Agents can write and run JS/TS (Deno) or Python scripts in an isolated sandbox with network access, scoped filesystem, and artifact output
-- **Real-Time Sync** — WebSocket push notifications for instant UI updates across tabs and devices (fallback to polling when WS is unavailable)
-- **Mobile-First UI** — Responsive glass-themed dark interface, works on phone and desktop
-
 ## Requirements
 
 - **Node.js** 22.6+
@@ -88,7 +47,7 @@ curl -fsSL https://raw.githubusercontent.com/swarmclawai/swarmclaw/main/install.
 ```
 
 The installer resolves the latest stable release tag and installs that version by default.
-To pin a version: `SWARMCLAW_VERSION=v0.6.1 curl ... | bash`
+To pin a version: `SWARMCLAW_VERSION=v0.6.2 curl ... | bash`
 
 Or run locally from the repo (friendly for non-technical users):
 
@@ -146,6 +105,48 @@ Notes:
 - OpenClaw is configured per-agent via the **OpenClaw Gateway** toggle (not in the setup wizard).
 - You can skip setup and configure everything later in the sidebar.
 
+## Features
+
+- **15 Built-in Providers** — Claude Code CLI, OpenAI Codex CLI, OpenCode CLI, Anthropic, OpenAI, Google Gemini, DeepSeek, Groq, Together AI, Mistral AI, xAI (Grok), Fireworks AI, Ollama, plus custom OpenAI-compatible endpoints
+- **OpenClaw Gateway** — Per-agent toggle to connect any agent to a local or remote OpenClaw gateway. Each agent gets its own gateway URL and token — run a swarm of OpenClaws from one dashboard. The `openclaw` CLI ships as a bundled dependency (no separate install needed)
+- **OpenClaw Control Plane** — Built-in gateway connection controls, reload mode switching (hot/hybrid/full), config issue detection/repair, remote history sync, and live execution approval handling
+- **Agent Builder** — Create agents with custom personalities (soul), system prompts, tools, and skills. AI-powered generation from a description
+- **Agent Inspector Panel** — Per-agent side panel for OpenClaw file editing (`SOUL.md`, `IDENTITY.md`, `USER.md`, etc.), guided personality editing, skill install/enable/remove, permission presets, sandbox env allowlist, and cron automations
+- **Agent Fleet Management** — Avatar seeds with generated avatars, running/approval fleet filters, soft-delete agent trash with restore/permanent delete, and approval counters in agent cards
+- **Agent Tools** — Shell, process control for long-running commands, files, edit file, send file, web search, web fetch, CLI delegation (Claude/Codex/OpenCode), Playwright browser automation, sub-agent spawning, canvas presentation, direct HTTP requests, git operations, persistent memory, and sandboxed code execution (JS/TS via Deno, Python)
+- **Platform Tools** — Agents can manage other agents, tasks, schedules, skills, connectors, sessions, and encrypted secrets via built-in platform tools
+- **Orchestration** — Multi-agent workflows powered by LangGraph with automatic sub-agent routing, checkpointed execution, and rich delegation cards that link to sub-agent chat threads
+- **Agentic Execution Policy** — Tool-first autonomous action loop with progress updates, evidence-driven answers, and better use of platform tools for long-lived work
+- **Runtime Date/Time Grounding** — Session, orchestrator, chatroom, and connector prompts include authoritative current timestamp context to reduce stale-date behavior
+- **Task Board** — Queue and track agent tasks with status, comments, results, and archiving. Strict capability policy pauses tasks for human approval before tool execution
+- **Task Metrics API** — Built-in analytics endpoint for WIP, cycle times, throughput velocity, completion/failure by agent, and priority distribution
+- **Background Daemon** — Auto-processes queued tasks and scheduled jobs with a 30s heartbeat plus recurring health monitoring
+- **Scheduling** — Cron-based agent scheduling with human-friendly presets
+- **Loop Runtime Controls** — Switch between bounded and ongoing loops with configurable step caps, runtime guards, heartbeat cadence, and timeout budgets
+- **Session Run Queue** — Per-session queued runs with followup/steer/collect modes, collect coalescing for bursty inputs, and run-state APIs
+- **Chat Iteration Workflow** — Edit-and-resend user turns, fork a new session from any message, bookmark key messages, use contextual follow-up suggestion chips, and auto-continue after tool access grants
+- **Agent Chatrooms** — Multi-agent room conversations with `@mention` routing, chained agent replies, reactions, and file/image-aware chat context
+- **Live Chat Telemetry** — Thinking/tool/responding stream phases, live main-loop status badges, connector activity presence, tone indicator, and optional sound notifications
+- **Global Search Palette** — `Cmd/Ctrl+K` search across agents, tasks, sessions, schedules, webhooks, and skills from anywhere in the app
+- **Notification Center** — Real-time in-app notifications for task/schedule/daemon events with unread tracking, mark-all/clear-read controls, and optional action links
+- **Preview-Rich Chat UI** — Side preview panel for tool outputs (image/browser/html/code), inline code/PDF previews for attachments, and image lightbox support
+- **Voice Settings** — Per-instance ElevenLabs API key + voice ID for TTS replies, plus configurable speech recognition language for chat input
+- **Chat Connectors** — Bridge agents to Discord, Slack, Telegram, WhatsApp, BlueBubbles (iMessage), Signal, Microsoft Teams, Google Chat, Matrix, and OpenClaw with media-aware inbound handling
+- **Skills System** — Discover local skills, import skills from URL, and load OpenClaw `SKILL.md` files (frontmatter-compatible)
+- **Execution Logging** — Structured audit trail for triggers, tool calls, file ops, commits, and errors in a dedicated `logs.db`
+- **Context Management** — Auto-compaction of conversation history when approaching context limits, with manual `context_status` and `context_summarize` tools for agents
+- **Memory** — Per-agent and per-session memory with hybrid FTS5 + vector embeddings search, relevance-based memory recall injected into runs, and periodic auto-journaling for durable execution context
+- **Cost Tracking** — Per-message token counting and cost estimation displayed in the chat header
+- **Provider Health Metrics** — Usage dashboard surfaces provider request volume, success rates, models used, and last-used timestamps
+- **Model Failover** — Automatic key rotation on rate limits and auth errors with configurable fallback credentials
+- **Plugin System** — Extend agent behavior with JS plugins (hooks: beforeAgentStart, afterAgentComplete, beforeToolExec, afterToolExec, onMessage)
+- **Secrets Vault** — Encrypted storage for API keys and service tokens
+- **Custom Providers** — Add any OpenAI-compatible API as a provider
+- **MCP Servers** — Connect agents to any Model Context Protocol server. Per-agent server selection with tool discovery and per-tool disable toggles
+- **Sandboxed Code Execution** — Agents can write and run JS/TS (Deno) or Python scripts in an isolated sandbox with network access, scoped filesystem, and artifact output
+- **Real-Time Sync** — WebSocket push notifications for instant UI updates across tabs and devices (fallback to polling when WS is unavailable)
+- **Mobile-First UI** — Responsive glass-themed dark interface, works on phone and desktop
+
 ## Configuration
 
 All config lives in `.env.local` (auto-generated):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swarmclawai/swarmclaw",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Self-hosted AI agent orchestration dashboard — manage LLM providers, orchestrate agent swarms, schedule tasks, and bridge agents to chat platforms.",
   "license": "MIT",
   "repository": {

package/src/app/api/tts/route.ts

@@ -1,41 +1,21 @@
 import { NextResponse } from 'next/server'
-import { loadSettings } from '@/lib/server/storage'
+import { explainElevenLabsError, resolveElevenLabsConfig, synthesizeElevenLabsMp3 } from '@/lib/server/elevenlabs'
 
 export async function POST(req: Request) {
-  const settings = loadSettings()
-  const ELEVENLABS_KEY = settings.elevenLabsApiKey || process.env.ELEVENLABS_API_KEY
-  const ELEVENLABS_VOICE = settings.elevenLabsVoiceId || process.env.ELEVENLABS_VOICE || 'JBFqnCBsd6RMkjVDRZzb'
-
-  if (!ELEVENLABS_KEY) {
-    return new NextResponse('No ElevenLabs API key. Set one in Settings > Voice.', { status: 500 })
+  try {
+    const { text, voiceId } = await req.json()
+    if (!String(text || '').trim()) {
+      return new NextResponse('No text provided', { status: 400 })
+    }
+    resolveElevenLabsConfig(voiceId)
+    const audioBuffer = await synthesizeElevenLabsMp3({ text: String(text || ''), voiceId })
+    return new NextResponse(new Uint8Array(audioBuffer), {
+      headers: {
+        'Content-Type': 'audio/mpeg',
+        'Cache-Control': 'no-cache',
+      },
+    })
+  } catch (err: unknown) {
+    return new NextResponse(explainElevenLabsError(err), { status: 500 })
   }
-
-  const { text, voiceId } = await req.json()
-  const voice = voiceId || ELEVENLABS_VOICE
-  const apiRes = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voice}`, {
-    method: 'POST',
-    headers: {
-      'xi-api-key': ELEVENLABS_KEY,
-      'Content-Type': 'application/json',
-      'Accept': 'audio/mpeg',
-    },
-    body: JSON.stringify({
-      text,
-      model_id: 'eleven_multilingual_v2',
-      voice_settings: { stability: 0.5, similarity_boost: 0.75 },
-    }),
-  })
-
-  if (!apiRes.ok) {
-    const err = await apiRes.text()
-    return new NextResponse(err, { status: apiRes.status })
-  }
-
-  const audioBuffer = await apiRes.arrayBuffer()
-  return new NextResponse(audioBuffer, {
-    headers: {
-      'Content-Type': 'audio/mpeg',
-      'Cache-Control': 'no-cache',
-    },
-  })
 }

package/src/app/api/tts/stream/route.ts

@@ -1,49 +1,20 @@
-import { loadSettings } from '@/lib/server/storage'
+import { explainElevenLabsError, requestElevenLabsMp3Stream } from '@/lib/server/elevenlabs'
 
 export async function POST(req: Request) {
-  const settings = loadSettings()
-  const ELEVENLABS_KEY = settings.elevenLabsApiKey || process.env.ELEVENLABS_API_KEY
-  const ELEVENLABS_VOICE = settings.elevenLabsVoiceId || process.env.ELEVENLABS_VOICE || 'JBFqnCBsd6RMkjVDRZzb'
-
-  if (!ELEVENLABS_KEY) {
-    return new Response('No ElevenLabs API key. Set one in Settings > Voice.', { status: 500 })
-  }
-
-  const { text, voiceId } = await req.json()
-  if (!text?.trim()) {
-    return new Response('No text provided', { status: 400 })
-  }
-
-  const voice = voiceId || ELEVENLABS_VOICE
-  const apiRes = await fetch(
-    `https://api.elevenlabs.io/v1/text-to-speech/${voice}/stream`,
-    {
-      method: 'POST',
+  try {
+    const { text, voiceId } = await req.json()
+    if (!String(text || '').trim()) {
+      return new Response('No text provided', { status: 400 })
+    }
+    const apiRes = await requestElevenLabsMp3Stream({ text: String(text || ''), voiceId })
+    return new Response(apiRes.body, {
       headers: {
-        'xi-api-key': ELEVENLABS_KEY,
-        'Content-Type': 'application/json',
-        'Accept': 'audio/mpeg',
+        'Content-Type': 'audio/mpeg',
+        'Transfer-Encoding': 'chunked',
+        'Cache-Control': 'no-cache',
       },
-      body: JSON.stringify({
-        text: text.slice(0, 2000),
-        model_id: 'eleven_multilingual_v2',
-        voice_settings: { stability: 0.5, similarity_boost: 0.75 },
-        output_format: 'mp3_22050_32',
-      }),
-    },
-  )
-
-  if (!apiRes.ok) {
-    const err = await apiRes.text()
-    return new Response(err, { status: apiRes.status })
+    })
+  } catch (err: unknown) {
+    return new Response(explainElevenLabsError(err), { status: 500 })
   }
-
-  // Pipe the streaming response directly
-  return new Response(apiRes.body, {
-    headers: {
-      'Content-Type': 'audio/mpeg',
-      'Transfer-Encoding': 'chunked',
-      'Cache-Control': 'no-cache',
-    },
-  })
 }

package/src/app/page.tsx

@@ -5,6 +5,7 @@ import { useAppStore } from '@/stores/use-app-store'
 import { initAudioContext } from '@/lib/tts'
 import { getStoredAccessKey, clearStoredAccessKey, api } from '@/lib/api-client'
 import { connectWs, disconnectWs } from '@/lib/ws-client'
+import { fetchWithTimeout } from '@/lib/fetch-timeout'
 import { useWs } from '@/hooks/use-ws'
 import { AccessKeyGate } from '@/components/auth/access-key-gate'
 import { UserPicker } from '@/components/auth/user-picker'
@@ -12,6 +13,8 @@ import { SetupWizard } from '@/components/auth/setup-wizard'
 import { AppLayout } from '@/components/layout/app-layout'
 import { useViewRouter } from '@/hooks/use-view-router'
 
+const AUTH_CHECK_TIMEOUT_MS = 8_000
+
 function FullScreenLoader() {
   return (
     <div className="h-full flex flex-col items-center justify-center bg-bg overflow-hidden select-none">
@@ -158,11 +161,11 @@ export default function Home() {
     }
 
     try {
-      const res = await fetch('/api/auth', {
+      const res = await fetchWithTimeout('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ key }),
-      })
+      }, AUTH_CHECK_TIMEOUT_MS)
       if (res.ok) {
         setAuthenticated(true)
       } else {
@@ -171,8 +174,9 @@ export default function Home() {
       }
     } catch {
       setAuthenticated(true)
+    } finally {
+      setAuthChecked(true)
     }
-    setAuthChecked(true)
   }, [])
 
   // After auth, try to restore username from server settings

package/src/components/auth/access-key-gate.tsx

@@ -2,11 +2,14 @@
 
 import { useState, useEffect } from 'react'
 import { setStoredAccessKey } from '@/lib/api-client'
+import { fetchWithTimeout } from '@/lib/fetch-timeout'
 
 interface AccessKeyGateProps {
   onAuthenticated: () => void
 }
 
+const AUTH_CHECK_TIMEOUT_MS = 8_000
+
 export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const [key, setKey] = useState('')
   const [error, setError] = useState('')
@@ -19,16 +22,22 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const [copied, setCopied] = useState(false)
 
   useEffect(() => {
-    fetch('/api/auth')
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.firstTime && data.key) {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const res = await fetchWithTimeout('/api/auth', {}, AUTH_CHECK_TIMEOUT_MS)
+        const data = await res.json().catch(() => ({}))
+        if (!cancelled && data.firstTime && data.key) {
           setFirstTime(true)
           setGeneratedKey(data.key)
         }
-      })
-      .catch((err) => console.error('Auth check failed:', err))
-      .finally(() => setChecking(false))
+      } catch (err) {
+        console.error('Auth check failed:', err)
+      } finally {
+        if (!cancelled) setChecking(false)
+      }
+    })()
+    return () => { cancelled = true }
   }, [])
 
   const handleCopyKey = async () => {
@@ -44,14 +53,16 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
   const handleClaimKey = async () => {
     setLoading(true)
     try {
-      const res = await fetch('/api/auth', {
+      const res = await fetchWithTimeout('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ key: generatedKey }),
-      })
+      }, AUTH_CHECK_TIMEOUT_MS)
       if (res.ok) {
         setStoredAccessKey(generatedKey)
         onAuthenticated()
+      } else {
+        setError('Invalid access key')
       }
     } catch {
       setError('Connection failed')
@@ -69,11 +80,11 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
     setError('')
 
     try {
-      const res = await fetch('/api/auth', {
+      const res = await fetchWithTimeout('/api/auth', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ key: trimmed }),
-      })
+      }, AUTH_CHECK_TIMEOUT_MS)
       if (res.ok) {
         setStoredAccessKey(trimmed)
         onAuthenticated()

package/src/components/chat/chat-area.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useCallback, useState, useRef } from 'react'
+import { useEffect, useCallback, useState, useRef, useMemo } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -65,6 +65,26 @@ export function ChatArea() {
   const [browserActive, setBrowserActive] = useState(false)
   const [heartbeatHistoryOpen, setHeartbeatHistoryOpen] = useState(false)
   const [messagesLoading, setMessagesLoading] = useState(true)
+  const [connectorFilter, setConnectorFilter] = useState<string | null>(null)
+
+  // Collect unique connector sources from messages for filter UI
+  const { connectorSources, hasDirectMessages } = useMemo(() => {
+    const sources = new Map<string, { platform: string; connectorName: string }>()
+    let hasDirect = false
+    for (const msg of messages) {
+      if (msg.source?.connectorId && !sources.has(msg.source.connectorId)) {
+        sources.set(msg.source.connectorId, {
+          platform: msg.source.platform,
+          connectorName: msg.source.connectorName,
+        })
+      } else if (!msg.source?.connectorId && msg.role === 'user') {
+        hasDirect = true
+      }
+    }
+    return { connectorSources: sources, hasDirectMessages: hasDirect }
+  }, [messages])
+  // Show source filter when there are genuinely multiple sources (2+ connectors, or connector + direct)
+  const hasMultipleSources = connectorSources.size > 1 || (connectorSources.size > 0 && hasDirectMessages)
   const [isDragging, setIsDragging] = useState(false)
   const dragCounter = useRef(0)
   const setPendingImage = useChatStore((s) => s.setPendingImage)
@@ -277,6 +297,10 @@ export function ChatArea() {
           onVoiceToggle={handleVoiceToggle}
           heartbeatHistoryOpen={heartbeatHistoryOpen}
           onToggleHeartbeatHistory={() => setHeartbeatHistoryOpen((v) => !v)}
+          connectorSources={connectorSources}
+          connectorFilter={connectorFilter}
+          onConnectorFilterChange={setConnectorFilter}
+          hasMultipleSources={hasMultipleSources}
         />
       )}
       {!isDesktop && (
@@ -291,6 +315,10 @@ export function ChatArea() {
           voiceActive={voice.active}
           voiceSupported={voice.supported}
           onVoiceToggle={handleVoiceToggle}
+          connectorSources={connectorSources}
+          connectorFilter={connectorFilter}
+          onConnectorFilterChange={setConnectorFilter}
+          hasMultipleSources={hasMultipleSources}
         />
       )}
       <DevServerBar status={devServerStatus} onStop={handleStopDevServer} />
@@ -356,7 +384,7 @@ export function ChatArea() {
           </div>
         </div>
       ) : (
-        <MessageList messages={messages} streaming={streamingForThisSession} />
+        <MessageList messages={messages} streaming={streamingForThisSession} connectorFilter={connectorFilter} />
       )}
 
       {voice.active && (

package/src/components/chat/chat-header.tsx

@@ -53,9 +53,13 @@ interface Props {
   voiceSupported?: boolean
   heartbeatHistoryOpen?: boolean
   onToggleHeartbeatHistory?: () => void
+  connectorSources?: Map<string, { platform: string; connectorName: string }>
+  connectorFilter?: string | null
+  onConnectorFilterChange?: (filter: string | null) => void
+  hasMultipleSources?: boolean
 }
 
-export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported, heartbeatHistoryOpen, onToggleHeartbeatHistory }: Props) {
+export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported, heartbeatHistoryOpen, onToggleHeartbeatHistory, connectorSources, connectorFilter, onConnectorFilterChange, hasMultipleSources }: Props) {
   const ttsEnabled = useChatStore((s) => s.ttsEnabled)
   const toggleTts = useChatStore((s) => s.toggleTts)
   const soundEnabled = useChatStore((s) => s.soundEnabled)
@@ -89,6 +93,8 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const [heartbeatSaving, setHeartbeatSaving] = useState(false)
   const [hbDropdownOpen, setHbDropdownOpen] = useState(false)
   const hbDropdownRef = useRef<HTMLDivElement>(null)
+  const [sourceDropdownOpen, setSourceDropdownOpen] = useState(false)
+  const sourceDropdownRef = useRef<HTMLDivElement>(null)
   const [mainLoopSaving, setMainLoopSaving] = useState(false)
   const [mainLoopError, setMainLoopError] = useState('')
   const [mainLoopNotice, setMainLoopNotice] = useState('')
@@ -399,6 +405,15 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     return () => document.removeEventListener('mousedown', handler)
   }, [hbDropdownOpen])
 
+  useEffect(() => {
+    if (!sourceDropdownOpen) return
+    const handler = (e: MouseEvent) => {
+      if (sourceDropdownRef.current && !sourceDropdownRef.current.contains(e.target as Node)) setSourceDropdownOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [sourceDropdownOpen])
+
   useEffect(() => {
     if (!modelSwitcherOpen) return
     const handler = (e: MouseEvent) => {
@@ -439,10 +454,11 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
     return () => clearTimeout(timer)
   }, [mainLoopNotice])
 
-  // Context bar shows for tools, mission controls, memories, task links, resume handles, browser
+  // Context bar shows for tools, mission controls, memories, source filter, task links, resume handles, browser
   const hasToolToggles = ((agent?.tools?.length ?? 0) > 0) || ((session.tools?.length ?? 0) > 0)
   const hasMemoryLink = !!(agent && session.tools?.includes('memory'))
-  const hasContextBar = !!(hasToolToggles || isMainSession || hasMemoryLink || linkedTask || resumeHandle || (isOpenClawAgent && openclawSessionKey) || browserActive)
+  const hasSourceFilter = !!hasMultipleSources
+  const hasContextBar = !!(hasToolToggles || isMainSession || hasMemoryLink || hasSourceFilter || linkedTask || resumeHandle || (isOpenClawAgent && openclawSessionKey) || browserActive)
 
   return (
     <header
@@ -863,6 +879,57 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               Memories
             </button>
           )}
+          {hasSourceFilter && onConnectorFilterChange && connectorSources && (
+            <div className="relative shrink-0" ref={sourceDropdownRef}>
+              <button
+                onClick={() => setSourceDropdownOpen((o) => !o)}
+                className={`flex items-center gap-1 px-2 py-1 rounded-[7px] transition-colors cursor-pointer border-none text-[10px] font-600 shrink-0 ${
+                  connectorFilter
+                    ? 'bg-accent-soft/60 text-accent-bright/80 hover:bg-accent-soft'
+                    : 'bg-white/[0.03] text-text-3/50 hover:bg-white/[0.06] hover:text-text-3/70'
+                }`}
+                title="Filter by message source"
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                  <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+                </svg>
+                {connectorFilter
+                  ? (connectorSources.get(connectorFilter)?.connectorName || 'Source')
+                  : 'Source'}
+                <svg width="7" height="7" viewBox="0 0 16 16" fill="none" className="opacity-40">
+                  <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
+              </button>
+              {sourceDropdownOpen && (
+                <div className="absolute top-full left-0 mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[140px]">
+                  <button
+                    onClick={() => { onConnectorFilterChange(null); setSourceDropdownOpen(false) }}
+                    className={`w-full text-left px-3 py-1.5 text-[11px] font-600 transition-colors cursor-pointer border-none flex items-center gap-2 ${
+                      !connectorFilter ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:bg-white/[0.06]'
+                    }`}
+                  >
+                    All Sources
+                  </button>
+                  {Array.from(connectorSources.entries()).map(([cid, info]) => {
+                    const active = connectorFilter === cid
+                    const meta = CONNECTOR_PLATFORM_META[info.platform as keyof typeof CONNECTOR_PLATFORM_META]
+                    return (
+                      <button
+                        key={cid}
+                        onClick={() => { onConnectorFilterChange(active ? null : cid); setSourceDropdownOpen(false) }}
+                        className={`w-full text-left px-3 py-1.5 text-[11px] font-600 transition-colors cursor-pointer border-none flex items-center gap-2 ${
+                          active ? 'bg-accent-soft text-accent-bright' : 'text-text-3 hover:bg-white/[0.06]'
+                        }`}
+                      >
+                        <ConnectorPlatformIcon platform={info.platform as keyof typeof CONNECTOR_PLATFORM_META} size={12} />
+                        {info.connectorName || meta?.label || info.platform}
+                      </button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )}
           {isOpenClawAgent && openclawSessionKey && (
             <>
               <button

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

@@ -90,6 +90,12 @@ const STATUS_COLORS: Record<string, string> = {
   blocked: '#EF4444',
 }
 
+function isGeneratedBrowserScreenshot(url: string): boolean {
+  const match = url.match(/\/api\/uploads\/([^/?#]+)/)
+  if (!match?.[1]) return false
+  return /^(browser|screenshot)-\d+\./i.test(match[1])
+}
+
 // AttachmentChip, parseAttachmentUrl, regex constants, and FILE_TYPE_COLORS
 // are now imported from @/components/shared/attachment-chip
 
@@ -162,6 +168,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     // Collect URLs from the visible (last) tool event to avoid showing duplicates
     const lastOutput = toolEvents[toolEvents.length - 1]?.output || ''
     const visibleMedia = extractMedia(lastOutput)
+    const hasNamedVisibleImage = visibleMedia.images.some((url) => !isGeneratedBrowserScreenshot(url))
     const seen = new Set<string>([
       ...visibleMedia.images,
       ...visibleMedia.videos,
@@ -175,7 +182,10 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     for (const ev of toolEvents.slice(0, -1)) {
       if (!ev.output) continue
       const m = extractMedia(ev.output)
-      for (const url of m.images) { if (!seen.has(url)) { seen.add(url); images.push(url) } }
+      for (const url of m.images) {
+        if (hasNamedVisibleImage && isGeneratedBrowserScreenshot(url)) continue
+        if (!seen.has(url)) { seen.add(url); images.push(url) }
+      }
       for (const url of m.videos) { if (!seen.has(url)) { seen.add(url); videos.push(url) } }
       for (const p of m.pdfs) { if (!seen.has(p.url)) { seen.add(p.url); pdfs.push(p) } }
       for (const f of m.files) { if (!seen.has(f.url)) { seen.add(f.url); files.push(f) } }