@swarmclawai/swarmclaw 0.3.0 → 0.4.0

package/src/components/agents/agent-sheet.tsx

@@ -5,38 +5,10 @@ import { useAppStore } from '@/stores/use-app-store'
 import { createAgent, updateAgent, deleteAgent } from '@/lib/agents'
 import { api } from '@/lib/api-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
-import { AiGenBlock } from '@/components/shared/ai-gen-block'
 import { toast } from 'sonner'
+import { ModelCombobox } from '@/components/shared/model-combobox'
 import type { ProviderType, ClaudeSkill } from '@/types'
-
-const AVAILABLE_TOOLS: { id: string; label: string; description: string }[] = [
-  { id: 'shell', label: 'Shell', description: 'Execute commands in the working directory' },
-  { id: 'files', label: 'Files', description: 'Read, write, list, move, copy, and send files' },
-  { id: 'copy_file', label: 'Copy File', description: 'Copy files within the working directory' },
-  { id: 'move_file', label: 'Move File', description: 'Move/rename files within the working directory' },
-  { id: 'delete_file', label: 'Delete File', description: 'Delete files/directories (disabled by default)' },
-  { id: 'edit_file', label: 'Edit File', description: 'Search-and-replace editing within files' },
-  { id: 'process', label: 'Process', description: 'Monitor and control long-running shell commands' },
-  { id: 'web_search', label: 'Web Search', description: 'Search the web via DuckDuckGo' },
-  { id: 'web_fetch', label: 'Web Fetch', description: 'Fetch and extract text from URLs' },
-  { id: 'claude_code', label: 'Claude Code', description: 'Delegate complex tasks to Claude Code CLI' },
-  { id: 'codex_cli', label: 'Codex CLI', description: 'Delegate complex tasks to OpenAI Codex CLI' },
-  { id: 'opencode_cli', label: 'OpenCode CLI', description: 'Delegate complex tasks to OpenCode CLI' },
-  { id: 'browser', label: 'Browser', description: 'Playwright — browse, scrape, interact with web pages' },
-  { id: 'memory', label: 'Memory', description: 'Store and retrieve long-term memories across sessions' },
-]
-
-const PLATFORM_TOOLS: { id: string; label: string; description: string }[] = [
-  { id: 'manage_agents', label: 'Agents', description: 'Create, edit, and delete agents' },
-  { id: 'manage_tasks', label: 'Tasks', description: 'Create, edit, and delete tasks' },
-  { id: 'manage_schedules', label: 'Schedules', description: 'Create, edit, and delete schedules' },
-  { id: 'manage_skills', label: 'Skills', description: 'Create, edit, and delete skills' },
-  { id: 'manage_documents', label: 'Documents', description: 'Upload, search, and delete indexed documents' },
-  { id: 'manage_webhooks', label: 'Webhooks', description: 'Register webhooks that trigger agent sessions' },
-  { id: 'manage_connectors', label: 'Connectors', description: 'Create, edit, and delete connectors' },
-  { id: 'manage_sessions', label: 'Sessions', description: 'List sessions, send messages, and spawn session work' },
-  { id: 'manage_secrets', label: 'Secrets', description: 'Store and retrieve encrypted service secrets' },
-]
+import { AVAILABLE_TOOLS, PLATFORM_TOOLS } from '@/lib/tool-definitions'
 
 const NATIVE_CAPABILITY_PROVIDER_IDS = new Set<ProviderType>(['claude-cli', 'codex-cli', 'opencode-cli', 'openclaw'])
 
@@ -54,9 +26,6 @@ export function AgentSheet() {
   const dynamicSkills = useAppStore((s) => s.skills)
   const mcpServers = useAppStore((s) => s.mcpServers)
   const loadSkills = useAppStore((s) => s.loadSkills)
-  const appSettings = useAppStore((s) => s.appSettings)
-  const loadSettings = useAppStore((s) => s.loadSettings)
-
   const [claudeSkills, setClaudeSkills] = useState<ClaudeSkill[]>([])
   const [claudeSkillsLoading, setClaudeSkillsLoading] = useState(false)
   const loadClaudeSkills = async () => {
@@ -91,6 +60,9 @@ export function AgentSheet() {
   const [capInput, setCapInput] = useState('')
   const [ollamaMode, setOllamaMode] = useState<'local' | 'cloud'>('local')
   const [openclawEnabled, setOpenclawEnabled] = useState(false)
+  const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
+  const [heartbeatInterval, setHeartbeatInterval] = useState('')
+  const [heartbeatModel, setHeartbeatModel] = useState('')
   const [addingKey, setAddingKey] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
   const [newKeyValue, setNewKeyValue] = useState('')
@@ -117,12 +89,6 @@ export function AgentSheet() {
     e.target.value = ''
   }
 
-  // AI generation state
-  const [aiPrompt, setAiPrompt] = useState('')
-  const [generating, setGenerating] = useState(false)
-  const [generated, setGenerated] = useState(false)
-  const [genError, setGenError] = useState('')
-
   const currentProvider = providers.find((p) => p.id === provider)
   const providerCredentials = Object.values(credentials).filter((c) => c.provider === provider)
   const openclawCredentials = Object.values(credentials).filter((c) => c.provider === 'openclaw')
@@ -140,11 +106,6 @@ export function AgentSheet() {
       loadCredentials()
       loadSkills()
       loadClaudeSkills()
-      loadSettings()
-      setAiPrompt('')
-      setGenerating(false)
-      setGenerated(false)
-      setGenError('')
       setTestStatus('idle')
       setTestMessage('')
       if (editing) {
@@ -169,6 +130,9 @@ export function AgentSheet() {
         setCapInput('')
         setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
         setOpenclawEnabled(editing.provider === 'openclaw')
+        setHeartbeatEnabled(editing.heartbeatEnabled || false)
+        setHeartbeatInterval(editing.heartbeatInterval != null ? String(editing.heartbeatInterval) : '')
+        setHeartbeatModel(editing.heartbeatModel || '')
       } else {
         setName('')
         setDescription('')
@@ -190,6 +154,9 @@ export function AgentSheet() {
         setCapInput('')
         setOllamaMode('local')
         setOpenclawEnabled(false)
+        setHeartbeatEnabled(false)
+        setHeartbeatInterval('')
+        setHeartbeatModel('')
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -246,29 +213,6 @@ export function AgentSheet() {
     return () => { cancelled = true }
   }, [openclawEnabled])
 
-  const handleGenerate = async () => {
-    if (!aiPrompt.trim()) return
-    setGenerating(true)
-    setGenError('')
-    try {
-      const result = await api<{ name?: string; description?: string; systemPrompt?: string; isOrchestrator?: boolean; error?: string }>('POST', '/agents/generate', { prompt: aiPrompt })
-      if (result.error) {
-        setGenError(result.error)
-      } else if (result.name || result.systemPrompt) {
-        if (result.name) setName(result.name)
-        if (result.description) setDescription(result.description)
-        if (result.systemPrompt) setSystemPrompt(result.systemPrompt)
-        if (result.isOrchestrator !== undefined) setIsOrchestrator(result.isOrchestrator)
-        setGenerated(true)
-      } else {
-        setGenError('AI returned empty response — try again')
-      }
-    } catch (err: unknown) {
-      setGenError(err instanceof Error ? err.message : 'Generation failed')
-    }
-    setGenerating(false)
-  }
-
   const onClose = () => {
     setOpen(false)
     setEditingId(null)
@@ -300,6 +244,9 @@ export function AgentSheet() {
       fallbackCredentialIds,
       platformAssignScope,
       capabilities,
+      heartbeatEnabled,
+      heartbeatInterval: heartbeatInterval.trim() || null,
+      heartbeatModel: heartbeatModel.trim() || null,
     }
     if (editing) {
       await updateAgent(editing.id, data)
@@ -450,14 +397,6 @@ export function AgentSheet() {
         </div>
       </div>
 
-      {/* AI Generation */}
-      {!editing && !openclawEnabled && <AiGenBlock
-        aiPrompt={aiPrompt} setAiPrompt={setAiPrompt}
-        generating={generating} generated={generated} genError={genError}
-        onGenerate={handleGenerate} appSettings={appSettings}
-        placeholder='Describe the agent you want, e.g. "An SEO keyword researcher that finds low-competition long-tail keywords"'
-      />}
-
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. SEO Researcher" className={inputClass} style={{ fontFamily: 'inherit' }} />
@@ -512,6 +451,47 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
       </div>}
 
+      {/* Heartbeat Configuration */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-3">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Heartbeat</label>
+          <button
+            type="button"
+            onClick={() => setHeartbeatEnabled(!heartbeatEnabled)}
+            className={`relative w-10 h-[22px] rounded-full transition-colors duration-200 cursor-pointer ${heartbeatEnabled ? 'bg-accent' : 'bg-white/[0.12]'}`}
+          >
+            <span className={`absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white transition-transform duration-200 ${heartbeatEnabled ? 'translate-x-[18px]' : ''}`} />
+          </button>
+        </div>
+        {heartbeatEnabled && (
+          <div className="space-y-4 mt-3">
+            <div>
+              <label className="block text-[12px] text-text-3/70 mb-1.5">Interval</label>
+              <input
+                type="text"
+                value={heartbeatInterval}
+                onChange={(e) => setHeartbeatInterval(e.target.value)}
+                placeholder="30s, 5m, 1h (default: 30m)"
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+            <div>
+              <label className="block text-[12px] text-text-3/70 mb-1.5">Model override <span className="text-text-3/50">(optional, cheaper model)</span></label>
+              <input
+                type="text"
+                value={heartbeatModel}
+                onChange={(e) => setHeartbeatModel(e.target.value)}
+                placeholder="e.g. gpt-4o-mini"
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+          </div>
+        )}
+        <p className="text-[11px] text-text-3/70 mt-1.5">Periodic check-in runs on idle sessions using this agent. Processes pending events and monitors status.</p>
+      </div>
+
       {provider !== 'openclaw' && (
         <div className="mb-8">
           <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -774,11 +754,14 @@ export function AgentSheet() {
       {!openclawEnabled && currentProvider && currentProvider.models.length > 0 && (
         <div className="mb-8">
           <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Model</label>
-          <select value={model} onChange={(e) => setModel(e.target.value)} className={`${inputClass} appearance-none cursor-pointer`} style={{ fontFamily: 'inherit' }}>
-            {currentProvider.models.map((m) => (
-              <option key={m} value={m}>{m}</option>
-            ))}
-          </select>
+          <ModelCombobox
+            providerId={currentProvider.id}
+            value={model}
+            onChange={setModel}
+            models={currentProvider.models}
+            defaultModels={currentProvider.defaultModels}
+            className={`${inputClass} cursor-pointer`}
+          />
         </div>
       )}
 

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useCallback, useState, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
 import { useChatStore } from '@/stores/use-chat-store'
 import { fetchMessages, clearMessages, deleteSession, devServer, checkBrowser, stopBrowser } from '@/lib/sessions'
 import { uploadImage } from '@/lib/upload'
@@ -90,33 +91,43 @@ export function ChatArea() {
   const isOrchestrated = session?.sessionType === 'orchestrated'
   const isServerActive = session?.active === true
   const isOngoingMonitored = appSettings.loopMode === 'ongoing' && !!session?.tools?.length
-  useEffect(() => {
-    if (!sessionId || (!isOrchestrated && !isServerActive && !isOngoingMonitored)) return
-    const interval = setInterval(async () => {
-      try {
-        const msgs = await fetchMessages(sessionId)
-        if (msgs.length > messages.length) {
-          const newMsgs = msgs.slice(messages.length)
-          setMessages(msgs)
-          if (ttsEnabled && typeof document !== 'undefined' && document.visibilityState === 'visible') {
-            const latestAssistant = [...newMsgs].reverse().find((m) => {
-              if (m.role !== 'assistant') return false
-              const isHeartbeat = m.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(m.text || '')
-              return !isHeartbeat && !!m.text?.trim()
-            })
-            if (latestAssistant?.text) {
-              void speak(latestAssistant.text)
-            }
+  const shouldPollMessages = !!sessionId && (isOrchestrated || isServerActive || isOngoingMonitored)
+  const messagesLenRef = useRef(messages.length)
+  messagesLenRef.current = messages.length
+  const isServerActiveRef = useRef(isServerActive)
+  isServerActiveRef.current = isServerActive
+  const ttsEnabledRef = useRef(ttsEnabled)
+  ttsEnabledRef.current = ttsEnabled
+
+  const refreshMessages = useCallback(async () => {
+    if (!sessionId) return
+    try {
+      const msgs = await fetchMessages(sessionId)
+      if (msgs.length > messagesLenRef.current) {
+        const newMsgs = msgs.slice(messagesLenRef.current)
+        setMessages(msgs)
+        if (ttsEnabledRef.current && typeof document !== 'undefined' && document.visibilityState === 'visible') {
+          const latestAssistant = [...newMsgs].reverse().find((m) => {
+            if (m.role !== 'assistant') return false
+            const isHeartbeat = m.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(m.text || '')
+            return !isHeartbeat && !!m.text?.trim()
+          })
+          if (latestAssistant?.text) {
+            void speak(latestAssistant.text)
           }
         }
-        // Check if session is still active on the server
-        if (isServerActive) {
-          await loadSessions()
-        }
-      } catch (err) { console.error('Failed to refresh messages:', err) }
-    }, 2000)
-    return () => clearInterval(interval)
-  }, [sessionId, isOrchestrated, isServerActive, isOngoingMonitored, messages.length])
+      }
+      if (isServerActiveRef.current) await loadSessions()
+    } catch (err) { console.error('Failed to refresh messages:', err) }
+  }, [sessionId])
+
+  // Subscribe to WS messages for this session — always subscribe when session exists,
+  // only enable fallback polling when actively needed
+  useWs(
+    sessionId ? `messages:${sessionId}` : '',
+    refreshMessages,
+    shouldPollMessages ? 2000 : undefined,
+  )
 
   // When server-active flag drops, stop the streaming indicator
   useEffect(() => {
@@ -136,14 +147,17 @@ export function ChatArea() {
 
   // Poll browser status while session has browser tools
   const hasBrowserTool = session?.tools?.includes('browser')
-  useEffect(() => {
+  const checkBrowserStatus = useCallback(() => {
     if (!sessionId || !hasBrowserTool) return
-    const interval = setInterval(() => {
-      checkBrowser(sessionId).then((r) => setBrowserActive(r.active)).catch(() => {})
-    }, 5000)
-    return () => clearInterval(interval)
+    checkBrowser(sessionId).then((r) => setBrowserActive(r.active)).catch(() => {})
   }, [sessionId, hasBrowserTool])
 
+  useWs(
+    hasBrowserTool && sessionId ? `browser:${sessionId}` : '',
+    checkBrowserStatus,
+    hasBrowserTool ? 5000 : undefined,
+  )
+
   const handleStopBrowser = useCallback(async () => {
     if (!sessionId) return
     await stopBrowser(sessionId)

package/src/components/chat/chat-tool-toggles.tsx

@@ -3,54 +3,16 @@
 import { useState, useRef, useEffect } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
+import { AVAILABLE_TOOLS, PLATFORM_TOOLS, TOOL_LABELS } from '@/lib/tool-definitions'
+import type { ToolDefinition } from '@/lib/tool-definitions'
 import type { Session } from '@/types'
 
-const TOOL_GROUPS: { label: string; tools: Record<string, string> }[] = [
-  {
-    label: 'Tools',
-    tools: {
-      shell: 'Shell',
-      files: 'Files',
-      edit_file: 'Edit File',
-      process: 'Process',
-      web_search: 'Web Search',
-      web_fetch: 'Web Fetch',
-      browser: 'Browser',
-      memory: 'Memory',
-    },
-  },
-  {
-    label: 'Delegation',
-    tools: {
-      claude_code: 'Claude Code',
-      codex_cli: 'Codex CLI',
-      opencode_cli: 'OpenCode CLI',
-    },
-  },
-  {
-    label: 'Platform',
-    tools: {
-      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',
-    },
-  },
+const TOOL_GROUPS: { label: string; tools: ToolDefinition[] }[] = [
+  { label: 'Tools', tools: AVAILABLE_TOOLS },
+  { label: 'Platform', tools: PLATFORM_TOOLS },
 ]
 
-// Flat lookup for display names
-const ALL_TOOLS: Record<string, string> = {}
-for (const g of TOOL_GROUPS) Object.assign(ALL_TOOLS, g.tools)
-
-const TOOL_HINTS: Record<string, string> = {
-  orchestrator: 'Can delegate tasks to other agents',
-}
+const TOTAL_TOOL_COUNT = AVAILABLE_TOOLS.length + PLATFORM_TOOLS.length
 
 interface Props {
   session: Session
@@ -87,7 +49,7 @@ export function ChatToolToggles({ session }: Props) {
   }
 
   const enabledCount = sessionTools.length
-  const totalCount = Object.keys(ALL_TOOLS).length
+  const totalCount = TOTAL_TOOL_COUNT
 
   return (
     <div className="relative" ref={ref}>
@@ -111,12 +73,12 @@ export function ChatToolToggles({ session }: Props) {
           {TOOL_GROUPS.map((group, gi) => (
             <div key={group.label} className={`px-3 pb-1 ${gi === 0 ? 'pt-3' : 'pt-1 border-t border-white/[0.04]'}`}>
               <p className="text-[10px] font-600 text-text-3/60 uppercase tracking-wider mb-2">{group.label}</p>
-              {Object.entries(group.tools).map(([toolId, label]) => {
-                const enabled = sessionTools.includes(toolId)
+              {group.tools.map((tool) => {
+                const enabled = sessionTools.includes(tool.id)
                 return (
-                  <label key={toolId} className="flex items-center gap-2.5 py-1.5 cursor-pointer">
+                  <label key={tool.id} className="flex items-center gap-2.5 py-1.5 cursor-pointer">
                     <div
-                      onClick={() => toggleTool(toolId)}
+                      onClick={() => toggleTool(tool.id)}
                       className={`w-8 h-[18px] rounded-full transition-all duration-200 relative cursor-pointer shrink-0
                         ${enabled ? 'bg-[#6366F1]' : 'bg-white/[0.12]'}`}
                     >
@@ -124,10 +86,7 @@ export function ChatToolToggles({ session }: Props) {
                         ${enabled ? 'left-[16px]' : 'left-[2px]'}`} />
                     </div>
                     <span className={`text-[12px] ${enabled ? 'text-text-2' : 'text-text-3/70'}`}>
-                      {label}
-                      {TOOL_HINTS[toolId] && (
-                        <span className="ml-2 text-[10px] text-text-3/70 font-400">{TOOL_HINTS[toolId]}</span>
-                      )}
+                      {tool.label}
                     </span>
                   </label>
                 )

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">