@swarmclawai/swarmclaw 0.5.3 → 0.6.2

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  openDelay = 300,
+  closeDelay = 150,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return (
+    <HoverCardPrimitive.Root
+      data-slot="hover-card"
+      openDelay={openDelay}
+      closeDelay={closeDelay}
+      {...props}
+    />
+  )
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+function HoverCardContent({
+  className,
+  sideOffset = 8,
+  children,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "rounded-[12px] w-[260px] z-50 p-3 border border-white/[0.08] shadow-xl backdrop-blur-xl bg-[rgba(16,16,28,0.95)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </HoverCardPrimitive.Content>
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/components/usage/metrics-dashboard.tsx

@@ -57,6 +57,13 @@ function formatCost(n: number): string {
   return `$${n.toFixed(4)}`
 }
 
+function formatDuration(ms: number): string {
+  if (!ms) return '—'
+  if (ms < 60_000) return `${Math.round(ms / 1000)}s`
+  if (ms < 3600_000) return `${Math.round(ms / 60_000)}m`
+  return `${(ms / 3600_000).toFixed(1)}h`
+}
+
 function formatBucketLabel(bucket: string, range: Range): string {
   if (range === '24h') {
     // "2026-03-01T14" → "14:00"
@@ -128,7 +135,24 @@ export function MetricsDashboard() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // --- Task metrics ---
+  const [taskMetrics, setTaskMetrics] = useState<{
+    wip: number; completedCount: number; avgCycleMs: number
+    velocity: { bucket: string; count: number }[]
+    byAgent: { agentName: string; completed: number; failed: number }[]
+  } | null>(null)
+
+  const loadTaskMetrics = useCallback(async () => {
+    try {
+      const res = await api<typeof taskMetrics>('GET', `/tasks/metrics?range=${range}`)
+      setTaskMetrics(res)
+    } catch { /* ignore */ }
+  }, [range])
+
+  useEffect(() => { loadTaskMetrics() }, [loadTaskMetrics])
+
   useWs('usage', loadData, 30_000)
+  useWs('tasks', loadTaskMetrics, 15_000)
 
   const completionRate = computeCompletionRate(tasks)
 
@@ -154,20 +178,20 @@ export function MetricsDashboard() {
 
   const tooltipStyle = {
     contentStyle: {
-      background: '#1a1a2e',
+      background: 'var(--color-surface)',
       border: '1px solid rgba(255,255,255,0.08)',
       borderRadius: 8,
       fontSize: 12,
-      color: '#e0e0e0',
+      color: 'var(--color-text)',
     },
-    itemStyle: { color: '#e0e0e0' },
-    labelStyle: { color: '#a0a0b0' },
+    itemStyle: { color: 'var(--color-text)' },
+    labelStyle: { color: 'var(--color-text-2)' },
   }
 
   return (
     <div className="flex-1 flex flex-col h-full overflow-y-auto">
       <div className="px-8 pt-6 pb-4 shrink-0">
-        <h1 className="font-display text-[28px] font-800 tracking-[-0.03em]">Usage</h1>
+        <h1 className="font-display text-[28px] font-700 tracking-[-0.03em]">Usage</h1>
         <p className="text-[13px] text-text-3 mt-1">Token usage, cost tracking &amp; agent performance</p>
       </div>
 
@@ -192,7 +216,10 @@ export function MetricsDashboard() {
 
       {loading && !data ? (
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-text-3 text-[13px]">Loading metrics…</p>
+          <div className="flex items-center gap-3">
+            <span className="w-5 h-5 rounded-full border-2 border-text-3/20 border-t-accent-bright animate-spin" />
+            <span className="text-[14px] text-text-3">Loading metrics...</span>
+          </div>
         </div>
       ) : (
         <div className="px-8 pb-8 space-y-6">
@@ -276,6 +303,63 @@ export function MetricsDashboard() {
             </ChartCard>
           </div>
 
+          {/* Task KPIs */}
+          {taskMetrics && (
+            <>
+              <h3 className="font-display text-[16px] font-700 text-text mt-2">Task Performance</h3>
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                <StatCard label="Tasks Completed" value={String(taskMetrics.completedCount)} />
+                <StatCard label="Avg Cycle Time" value={formatDuration(taskMetrics.avgCycleMs)} />
+                <StatCard label="WIP" value={String(taskMetrics.wip)} />
+                <StatCard label="Completion Rate" value={`${completionRate}%`} />
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <ChartCard title="Task Velocity">
+                  {taskMetrics.velocity.length > 0 ? (
+                    <ResponsiveContainer width="100%" height={280}>
+                      <BarChart data={taskMetrics.velocity.map((v) => ({ ...v, label: formatBucketLabel(v.bucket, range) }))} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                        <XAxis dataKey="label" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
+                        <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
+                        <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [value ?? 0, 'Completed']} />
+                        <Bar dataKey="count" fill="#34D399" radius={[4, 4, 0, 0]} />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    <EmptyChart />
+                  )}
+                </ChartCard>
+
+                <ChartCard title="Tasks by Agent">
+                  {taskMetrics.byAgent.length > 0 ? (
+                    <ResponsiveContainer width="100%" height={280}>
+                      <BarChart
+                        data={taskMetrics.byAgent.slice(0, 8).map((a) => ({
+                          name: a.agentName.length > 12 ? a.agentName.slice(0, 12) + '…' : a.agentName,
+                          completed: a.completed,
+                          failed: a.failed,
+                        }))}
+                        margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
+                      >
+                        <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
+                        <XAxis dataKey="name" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
+                        <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
+                        <Tooltip {...tooltipStyle} />
+                        <Bar dataKey="completed" fill="#34D399" radius={[4, 4, 0, 0]} stackId="a" name="Completed" />
+                        <Bar dataKey="failed" fill="#F87171" radius={[4, 4, 0, 0]} stackId="a" name="Failed" />
+                        <Legend verticalAlign="bottom" iconType="circle" iconSize={8}
+                          formatter={(value: string) => <span style={{ color: '#a0a0b0', fontSize: 11 }}>{value}</span>} />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  ) : (
+                    <EmptyChart />
+                  )}
+                </ChartCard>
+              </div>
+            </>
+          )}
+
           {/* Provider Health */}
           {data?.providerHealth && Object.keys(data.providerHealth).length > 0 && (
             <div>

package/src/components/usage/usage-list.tsx

@@ -98,7 +98,7 @@ export function UsageList() {
                   </div>
                   <div className="mt-2 h-1 rounded-full bg-white/[0.04] overflow-hidden">
                     <div
-                      className="h-full rounded-full bg-[#6366F1]/60"
+                      className="h-full rounded-full bg-accent-bright/60"
                       style={{ width: `${Math.max(pct, 1)}%` }}
                     />
                   </div>

package/src/components/webhooks/webhook-sheet.tsx

@@ -389,7 +389,7 @@ export function WebhookSheet() {
           <button
             onClick={handleSave}
             disabled={saving}
-            className="px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+            className="px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
             style={{ fontFamily: 'inherit' }}
           >
             {saving ? 'Saving...' : editing ? 'Update' : 'Create'}

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

@@ -48,7 +48,7 @@ interface UseContinuousSpeechOptions {
 
 export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
   const { lang, silenceDelayMs = 800, onUtterance } = options
-  const [state, setState] = useState<ContinuousSpeechState>('idle')
+  const [state, _setState] = useState<ContinuousSpeechState>('idle')
   const [transcript, setTranscript] = useState('')
   const [interimText, setInterimText] = useState('')
 
@@ -56,6 +56,12 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
   const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const activeRef = useRef(false)
   const accumulatedRef = useRef('')
+  const stateRef = useRef<ContinuousSpeechState>('idle')
+
+  const setState = useCallback((next: ContinuousSpeechState) => {
+    stateRef.current = next
+    _setState(next)
+  }, [])
 
   const clearSilenceTimer = () => {
     if (silenceTimerRef.current) {
@@ -122,7 +128,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
 
     recog.onend = () => {
       // Auto-restart if still active (browser may stop recognition periodically)
-      if (activeRef.current && state !== 'waitingForResponse') {
+      if (activeRef.current && stateRef.current !== 'waitingForResponse') {
         try { recog.start() } catch { /* noop */ }
       }
     }
@@ -156,7 +162,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
     setTranscript('')
     setInterimText('')
     accumulatedRef.current = ''
-  }, [])
+  }, [setState])
 
   const pause = useCallback(() => {
     clearSilenceTimer()
@@ -172,7 +178,7 @@ export function useContinuousSpeech(options: UseContinuousSpeechOptions) {
     setInterimText('')
     setState('listening')
     startRecognition()
-  }, [startRecognition])
+  }, [startRecognition, setState])
 
   const supported = typeof window !== 'undefined' &&
     !!((window as unknown as WindowWithSpeechRecognition).SpeechRecognition || (window as unknown as WindowWithSpeechRecognition).webkitSpeechRecognition)

package/src/hooks/use-view-router.ts

@@ -2,48 +2,98 @@
 
 import { useEffect, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
-import { VIEW_TO_PATH, PATH_TO_VIEW, DEFAULT_VIEW } from '@/lib/view-routes'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
+import { parsePath, buildPath, DEFAULT_VIEW } from '@/lib/view-routes'
+
+/** Map a view to the relevant entity ID from stores */
+function getIdForView(view: string): string | null {
+  if (view === 'agents') return useAppStore.getState().currentAgentId
+  if (view === 'chatrooms') return useChatroomStore.getState().currentChatroomId
+  return null
+}
+
+/** Apply a parsed route to the stores */
+function applyRoute(view: string, id: string | null) {
+  if (view === 'agents') useAppStore.getState().setCurrentAgent(id)
+  if (view === 'chatrooms') useChatroomStore.getState().setCurrentChatroom(id)
+}
 
 export function useViewRouter() {
   const fromPopstate = useRef(false)
+  const suppressPush = useRef(false)
 
-  // Mount: read pathname → set active view
+  // Mount: read pathname → set active view + entity ID
   useEffect(() => {
-    const view = PATH_TO_VIEW[window.location.pathname]
-    if (view) {
-      useAppStore.getState().setActiveView(view)
+    const parsed = parsePath(window.location.pathname)
+    if (parsed) {
+      suppressPush.current = true
+      useAppStore.getState().setActiveView(parsed.view)
+      applyRoute(parsed.view, parsed.id)
+      suppressPush.current = false
     } else {
       useAppStore.getState().setActiveView(DEFAULT_VIEW)
-      window.history.replaceState(null, '', VIEW_TO_PATH[DEFAULT_VIEW])
+      window.history.replaceState(null, '', buildPath(DEFAULT_VIEW))
     }
   }, [])
 
-  // State→URL: push new path when activeView changes
+  // State→URL: push new path when activeView or entity ID changes
   useEffect(() => {
-    let prev = useAppStore.getState().activeView
-    const unsub = useAppStore.subscribe((state) => {
-      const next = state.activeView
-      if (next === prev) return
-      prev = next
+    let prevView = useAppStore.getState().activeView
+    let prevId = getIdForView(prevView)
+
+    const unsubApp = useAppStore.subscribe((state) => {
+      if (suppressPush.current) return
+      const nextView = state.activeView
+      const nextId = getIdForView(nextView)
+
+      if (nextView === prevView && nextId === prevId) return
+      prevView = nextView
+      prevId = nextId
+
+      if (fromPopstate.current) {
+        fromPopstate.current = false
+        return
+      }
+      const targetPath = buildPath(nextView, nextId)
+      if (window.location.pathname !== targetPath) {
+        window.history.pushState(null, '', targetPath)
+      }
+    })
+
+    const unsubChatroom = useChatroomStore.subscribe((state) => {
+      if (suppressPush.current) return
+      const currentView = useAppStore.getState().activeView
+      if (currentView !== 'chatrooms') return
+      const nextId = state.currentChatroomId
+      if (nextId === prevId) return
+      prevId = nextId
+
       if (fromPopstate.current) {
         fromPopstate.current = false
         return
       }
-      const targetPath = VIEW_TO_PATH[next]
-      if (targetPath && window.location.pathname !== targetPath) {
+      const targetPath = buildPath('chatrooms', nextId)
+      if (window.location.pathname !== targetPath) {
         window.history.pushState(null, '', targetPath)
       }
     })
-    return unsub
+
+    return () => {
+      unsubApp()
+      unsubChatroom()
+    }
   }, [])
 
-  // Popstate: browser back/forward → update view
+  // Popstate: browser back/forward → update view + entity ID
   useEffect(() => {
     const onPopstate = () => {
-      const view = PATH_TO_VIEW[window.location.pathname]
-      if (view) {
+      const parsed = parsePath(window.location.pathname)
+      if (parsed) {
         fromPopstate.current = true
-        useAppStore.getState().setActiveView(view)
+        suppressPush.current = true
+        useAppStore.getState().setActiveView(parsed.view)
+        applyRoute(parsed.view, parsed.id)
+        suppressPush.current = false
       }
     }
     window.addEventListener('popstate', onPopstate)

package/src/hooks/use-voice-conversation.ts

@@ -1,40 +1,68 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useContinuousSpeech } from './use-continuous-speech'
 import { SentenceAccumulator, AudioChunkQueue, fetchStreamTts } from '@/lib/tts-stream'
 import { useChatStore } from '@/stores/use-chat-store'
 
 export type VoiceConversationState = 'idle' | 'listening' | 'processing' | 'speaking'
 
+/** Max time to wait in 'processing' before falling back to listening (30s). */
+const PROCESSING_TIMEOUT_MS = 30_000
+
 export function useVoiceConversation() {
-  const [active, setActive] = useState(false)
   const [voiceState, setVoiceState] = useState<VoiceConversationState>('idle')
   const accumulatorRef = useRef<SentenceAccumulator | null>(null)
   const queueRef = useRef<AudioChunkQueue | null>(null)
+  const activeRef = useRef(false)
+  const processingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [resumeNeeded, setResumeNeeded] = useState(0)
   const sendMessage = useChatStore((s) => s.sendMessage)
 
+  const clearProcessingTimer = () => {
+    if (processingTimerRef.current) {
+      clearTimeout(processingTimerRef.current)
+      processingTimerRef.current = null
+    }
+  }
+
   const speech = useContinuousSpeech({
     onUtterance: useCallback((text: string) => {
       setVoiceState('processing')
-      // Send the transcribed text as a chat message
       sendMessage(text)
+      // Safety net: if no stream events arrive within timeout, resume listening
+      clearProcessingTimer()
+      processingTimerRef.current = setTimeout(() => {
+        if (activeRef.current) {
+          setVoiceState('listening')
+          setResumeNeeded((n) => n + 1)
+        }
+      }, PROCESSING_TIMEOUT_MS)
     }, [sendMessage]),
   })
 
+  // When resumeNeeded increments, call speech.resume
+  useEffect(() => {
+    if (resumeNeeded > 0) speech.resume()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resumeNeeded])
+
   // Called by the chat store's onStreamEvent callback
   const handleStreamEvent = useCallback((event: { t: string; text?: string }) => {
-    if (!active) return
+    if (!activeRef.current) return
 
     if (event.t === 'd' && event.text) {
+      clearProcessingTimer()
       setVoiceState('speaking')
       if (!accumulatorRef.current) {
         const queue = new AudioChunkQueue()
         queueRef.current = queue
         queue.onComplete = () => {
           // Resume listening after TTS playback finishes
-          setVoiceState('listening')
-          speech.resume()
+          if (activeRef.current) {
+            setVoiceState('listening')
+            speech.resume()
+          }
         }
         accumulatorRef.current = new SentenceAccumulator((sentence) => {
           queue.enqueue(fetchStreamTts(sentence))
@@ -42,16 +70,30 @@ export function useVoiceConversation() {
       }
       accumulatorRef.current.push(event.text)
     } else if (event.t === 'done') {
+      clearProcessingTimer()
       // Flush remaining text to TTS
       if (accumulatorRef.current) {
         accumulatorRef.current.flush()
         accumulatorRef.current = null
+      } else {
+        // No text was streamed (empty response or error) — resume listening
+        if (activeRef.current) {
+          setVoiceState('listening')
+          speech.resume()
+        }
+      }
+    } else if (event.t === 'err') {
+      // Error from the LLM — resume listening instead of staying stuck
+      clearProcessingTimer()
+      if (activeRef.current) {
+        setVoiceState('listening')
+        speech.resume()
       }
     }
-  }, [active, speech])
+  }, [speech])
 
   const start = useCallback(() => {
-    setActive(true)
+    activeRef.current = true
     setVoiceState('listening')
     // Register the stream event handler on the chat store
     useChatStore.setState({ onStreamEvent: handleStreamEvent, voiceConversationActive: true })
@@ -59,8 +101,9 @@ export function useVoiceConversation() {
   }, [speech, handleStreamEvent])
 
   const stop = useCallback(() => {
-    setActive(false)
+    activeRef.current = false
     setVoiceState('idle')
+    clearProcessingTimer()
     speech.stop()
     queueRef.current?.stop()
     queueRef.current = null
@@ -69,7 +112,7 @@ export function useVoiceConversation() {
   }, [speech])
 
   return {
-    active,
+    active: activeRef.current || voiceState !== 'idle',
     state: voiceState,
     interimText: speech.interimText,
     transcript: speech.transcript,

package/src/hooks/use-ws.ts

@@ -32,8 +32,10 @@ export function useWs(topic: string, handler: () => void, fallbackMs?: number) {
     let fallbackId: ReturnType<typeof setInterval> | null = null
     const cb = () => handlerRef.current()
 
-    // When page becomes visible again, fire an immediate refresh
-    if (isActive) {
+    // When page becomes visible again, fire an immediate refresh —
+    // but only for topics that use fallback polling (i.e. data-fetch topics).
+    // Event-only topics (like heartbeat pulses) should never fire from this effect.
+    if (isActive && fallbackMsRef.current && fallbackMsRef.current > 0) {
       cb()
     }
 

package/src/instrumentation.ts

@@ -2,9 +2,23 @@ export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     const { startScheduler } = await import('./lib/server/scheduler')
     const { resumeQueue } = await import('./lib/server/queue')
-    const { initWsServer } = await import('./lib/server/ws-hub')
+    const { initWsServer, closeWsServer } = await import('./lib/server/ws-hub')
+    const { stopDaemon } = await import('./lib/server/daemon-state')
     startScheduler()
     resumeQueue()
     initWsServer()
+
+    // Graceful shutdown: stop background services and close WS connections
+    let shuttingDown = false
+    const shutdown = async (signal: string) => {
+      if (shuttingDown) return
+      shuttingDown = true
+      console.log(`[server] ${signal} received, shutting down gracefully...`)
+      stopDaemon({ source: signal })
+      await closeWsServer()
+      process.exit(0)
+    }
+    process.on('SIGTERM', () => shutdown('SIGTERM'))
+    process.on('SIGINT', () => shutdown('SIGINT'))
   }
 }

package/src/lib/chat.ts

@@ -4,6 +4,7 @@ import { getStoredAccessKey } from './api-client'
 interface StreamChatOptions {
   internal?: boolean
   queueMode?: 'followup' | 'steer' | 'collect'
+  replyToId?: string
 }
 
 export async function streamChat(
@@ -39,6 +40,7 @@ export async function streamChat(
       attachedFiles,
       internal: !!opts?.internal,
       queueMode: opts?.queueMode,
+      ...(opts?.replyToId ? { replyToId: opts.replyToId } : {}),
     }),
   })
 

package/src/lib/memory.ts

@@ -40,3 +40,6 @@ export const updateMemory = (id: string, data: Partial<MemoryEntry>) =>
 
 export const deleteMemory = (id: string) =>
   api<string>('DELETE', `/memory/${id}`)
+
+export const getMemoryCounts = () =>
+  api<Record<string, number>>('GET', '/memory?counts=true')

package/src/lib/providers/anthropic.ts

@@ -23,9 +23,9 @@ function fileToContentBlocks(filePath: string): any[] {
   return [{ type: 'text', text: `[Attached file: ${filePath.split('/').pop()}]` }]
 }
 
-export function streamAnthropicChat({ session, message, imagePath, apiKey, systemPrompt, write, active, loadHistory, onUsage }: StreamChatOptions): Promise<string> {
+export function streamAnthropicChat({ session, message, imagePath, imageUrl, apiKey, systemPrompt, write, active, loadHistory, onUsage }: StreamChatOptions): Promise<string> {
   return new Promise((resolve) => {
-    const messages = buildMessages(session, message, imagePath, loadHistory)
+    const messages = buildMessages(session, message, imagePath, loadHistory, imageUrl)
     const model = session.model || 'claude-sonnet-4-6'
     let usageInput = 0
     let usageOutput = 0
@@ -122,14 +122,19 @@ export function streamAnthropicChat({ session, message, imagePath, apiKey, syste
   })
 }
 
-function buildMessages(session: any, message: string, imagePath: string | undefined, loadHistory: (id: string) => any[]) {
+function urlToImageBlock(url: string): { type: string; source: { type: string; url: string } } {
+  return { type: 'image', source: { type: 'url', url } }
+}
+
+function buildMessages(session: any, message: string, imagePath: string | undefined, loadHistory: (id: string) => any[], imageUrl?: string) {
   const msgs: Array<{ role: string; content: any }> = []
 
   if (loadHistory) {
     const history = loadHistory(session.id).slice(-40)
     for (const m of history) {
-      if (m.role === 'user' && m.imagePath) {
-        const blocks = fileToContentBlocks(m.imagePath)
+      if (m.role === 'user' && (m.imagePath || m.imageUrl)) {
+        const blocks = m.imagePath ? fileToContentBlocks(m.imagePath) : []
+        if (m.imageUrl) blocks.push(urlToImageBlock(m.imageUrl))
         msgs.push({ role: 'user', content: [...blocks, { type: 'text', text: m.text }] })
       } else {
         msgs.push({ role: m.role, content: m.text })
@@ -138,8 +143,9 @@ function buildMessages(session: any, message: string, imagePath: string | undefi
   }
 
   // Current message with optional attachment
-  if (imagePath) {
-    const blocks = fileToContentBlocks(imagePath)
+  if (imagePath || imageUrl) {
+    const blocks = imagePath ? fileToContentBlocks(imagePath) : []
+    if (imageUrl) blocks.push(urlToImageBlock(imageUrl))
     msgs.push({ role: 'user', content: [...blocks, { type: 'text', text: message }] })
   } else {
     msgs.push({ role: 'user', content: message })

package/src/lib/providers/index.ts

@@ -22,6 +22,7 @@ export interface StreamChatOptions {
   session: any
   message: string
   imagePath?: string
+  imageUrl?: string
   apiKey?: string | null
   systemPrompt?: string
   write: (data: string) => void