@swarmclawai/swarmclaw 0.8.4 → 0.8.7

package/src/components/chat/swarm-status-card.tsx

@@ -0,0 +1,346 @@
+'use client'
+
+import { memo, useCallback, useState } from 'react'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { useAppStore } from '@/stores/use-app-store'
+
+// ---------------------------------------------------------------------------
+// Types (mirror server-side SwarmSnapshot for the UI)
+// ---------------------------------------------------------------------------
+
+type MemberStatus = 'initializing' | 'ready' | 'running' | 'waiting' | 'completed' | 'failed' | 'cancelled' | 'timed_out' | 'spawn_error'
+type SwarmStatus = 'spawning' | 'running' | 'completed' | 'partial' | 'failed'
+
+export interface SwarmMemberData {
+  index: number
+  agentId: string
+  agentName: string
+  jobId: string
+  sessionId: string
+  task: string
+  status: MemberStatus
+  resultPreview: string | null
+  error: string | null
+  durationMs: number
+}
+
+export interface SwarmStatusData {
+  swarmId: string
+  parentSessionId: string | null
+  parentAgentName: string
+  parentAgentSeed: string | null
+  parentAgentAvatarUrl?: string | null
+  status: SwarmStatus
+  createdAt: number
+  completedAt: number | null
+  memberCount: number
+  completedCount: number
+  failedCount: number
+  members: SwarmMemberData[]
+}
+
+// ---------------------------------------------------------------------------
+// Status config
+// ---------------------------------------------------------------------------
+
+const SWARM_STATUS_CONFIG: Record<SwarmStatus, { label: string; color: string; bg: string; border: string }> = {
+  spawning: { label: 'Spawning', color: '#818CF8', bg: 'rgba(99,102,241,0.06)', border: 'rgba(99,102,241,0.12)' },
+  running:  { label: 'Running',  color: '#818CF8', bg: 'rgba(99,102,241,0.06)', border: 'rgba(99,102,241,0.12)' },
+  completed:{ label: 'All completed', color: '#34D399', bg: 'rgba(52,211,153,0.05)', border: 'rgba(52,211,153,0.12)' },
+  partial:  { label: 'Partial',  color: '#FBBF24', bg: 'rgba(251,191,36,0.05)', border: 'rgba(251,191,36,0.12)' },
+  failed:   { label: 'Failed',   color: '#F43F5E', bg: 'rgba(244,63,94,0.05)', border: 'rgba(244,63,94,0.12)' },
+}
+
+const MEMBER_STATUS_CONFIG: Record<MemberStatus, { label: string; color: string; dotColor: string }> = {
+  initializing: { label: 'Initializing', color: '#A78BFA', dotColor: '#A78BFA' },
+  ready:        { label: 'Queued',        color: '#818CF8', dotColor: '#818CF8' },
+  running:      { label: 'Running',       color: '#60A5FA', dotColor: '#60A5FA' },
+  waiting:      { label: 'Waiting',       color: '#818CF8', dotColor: '#818CF8' },
+  completed:    { label: 'Completed',     color: '#34D399', dotColor: '#34D399' },
+  failed:       { label: 'Failed',        color: '#F43F5E', dotColor: '#F43F5E' },
+  cancelled:    { label: 'Cancelled',     color: '#6B7280', dotColor: '#6B7280' },
+  timed_out:    { label: 'Timed out',     color: '#F59E0B', dotColor: '#F59E0B' },
+  spawn_error:  { label: 'Spawn failed',  color: '#F43F5E', dotColor: '#F43F5E' },
+}
+
+// ---------------------------------------------------------------------------
+// Swarm icon
+// ---------------------------------------------------------------------------
+
+function SwarmIcon({ size = 16, color = '#818CF8' }: { size?: number; color?: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" className="shrink-0">
+      {/* Center bee */}
+      <circle cx="12" cy="12" r="2.5" fill={color} opacity="0.9" />
+      {/* Orbital bees */}
+      <circle cx="6" cy="8" r="1.5" fill={color} opacity="0.6" />
+      <circle cx="18" cy="8" r="1.5" fill={color} opacity="0.6" />
+      <circle cx="6" cy="16" r="1.5" fill={color} opacity="0.6" />
+      <circle cx="18" cy="16" r="1.5" fill={color} opacity="0.6" />
+      {/* Connection lines */}
+      <line x1="8" y1="9" x2="10" y2="11" stroke={color} strokeWidth="0.8" opacity="0.3" />
+      <line x1="16" y1="9" x2="14" y2="11" stroke={color} strokeWidth="0.8" opacity="0.3" />
+      <line x1="8" y1="15" x2="10" y2="13" stroke={color} strokeWidth="0.8" opacity="0.3" />
+      <line x1="16" y1="15" x2="14" y2="13" stroke={color} strokeWidth="0.8" opacity="0.3" />
+    </svg>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Member status dot
+// ---------------------------------------------------------------------------
+
+function StatusDot({ status }: { status: MemberStatus }) {
+  const cfg = MEMBER_STATUS_CONFIG[status]
+  const isActive = status === 'running' || status === 'initializing' || status === 'waiting'
+  return (
+    <span
+      className="shrink-0 rounded-full"
+      style={{
+        width: 7,
+        height: 7,
+        backgroundColor: cfg.dotColor,
+        ...(isActive ? { animation: 'swarm-pulse 1.5s ease-in-out infinite' } : {}),
+      }}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Member card
+// ---------------------------------------------------------------------------
+
+const SwarmMemberCard = memo(function SwarmMemberCard({
+  member,
+  agents,
+}: {
+  member: SwarmMemberData
+  agents: Record<string, any>
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const cfg = MEMBER_STATUS_CONFIG[member.status]
+  const agent = agents[member.agentId]
+  const avatarSeed = agent?.avatarSeed || member.agentId
+  const avatarUrl = agent?.avatarUrl || null
+  const hasContent = !!(member.resultPreview || member.error)
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`
+    return `${(ms / 1000).toFixed(1)}s`
+  }
+
+  return (
+    <div
+      className="rounded-[10px] overflow-hidden transition-all"
+      style={{
+        background: 'rgba(255,255,255,0.015)',
+        border: `1px solid rgba(255,255,255,0.05)`,
+        animation: `swarm-member-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) ${member.index * 80}ms both`,
+      }}
+    >
+      {/* Header */}
+      <button
+        type="button"
+        className="w-full flex items-center gap-2 px-3 py-2 bg-transparent border-none cursor-pointer text-left"
+        onClick={() => hasContent && setExpanded(!expanded)}
+        disabled={!hasContent}
+      >
+        <AgentAvatar seed={avatarSeed} avatarUrl={avatarUrl} name={member.agentName} size={20} />
+        <StatusDot status={member.status} />
+        <div className="flex flex-col gap-0 min-w-0 flex-1">
+          <span className="text-[11px] font-600 text-text-2 truncate">
+            {member.agentName}
+          </span>
+          <span className="text-[10px] truncate" style={{ color: cfg.color }}>
+            {cfg.label}
+            {member.durationMs > 0 && member.status !== 'running' && (
+              <span className="text-text-3/50 ml-1">
+                {formatDuration(member.durationMs)}
+              </span>
+            )}
+          </span>
+        </div>
+        {hasContent && (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            className="shrink-0 text-text-3/30 transition-transform"
+            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        )}
+      </button>
+
+      {/* Expanded content */}
+      {expanded && hasContent && (
+        <div
+          className="px-3 pb-2.5 pt-0"
+          style={{ borderTop: '1px solid rgba(255,255,255,0.04)' }}
+        >
+          {member.error && (
+            <div className="text-[11px] text-rose-400/80 leading-relaxed break-words mt-1.5">
+              {member.error}
+            </div>
+          )}
+          {member.resultPreview && !member.error && (
+            <div className="text-[11px] text-text-3/70 leading-relaxed break-words mt-1.5 max-h-[120px] overflow-y-auto">
+              {member.resultPreview}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+})
+
+// ---------------------------------------------------------------------------
+// Aggregate summary bar
+// ---------------------------------------------------------------------------
+
+function SwarmSummaryBar({ data }: { data: SwarmStatusData }) {
+  const cfg = SWARM_STATUS_CONFIG[data.status]
+  const isTerminal = data.status === 'completed' || data.status === 'partial' || data.status === 'failed'
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`
+    if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`
+    return `${(ms / 60_000).toFixed(1)}m`
+  }
+
+  const durationMs = data.completedAt
+    ? data.completedAt - data.createdAt
+    : Date.now() - data.createdAt
+
+  return (
+    <div
+      className="flex items-center gap-2 px-3 py-2 rounded-[8px]"
+      style={{ background: `${cfg.color}08` }}
+    >
+      <span className="text-[11px] font-700" style={{ color: cfg.color }}>
+        {data.completedCount}/{data.memberCount} completed
+      </span>
+      {data.failedCount > 0 && (
+        <span className="text-[11px] font-600 text-rose-400/70">
+          {data.failedCount} failed
+        </span>
+      )}
+      {isTerminal && (
+        <span className="text-[10px] text-text-3/40 ml-auto">
+          {formatDuration(durationMs)}
+        </span>
+      )}
+      {!isTerminal && (
+        <span
+          className="text-[10px] ml-auto"
+          style={{ color: cfg.color, opacity: 0.6 }}
+        >
+          in progress...
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export const SwarmStatusCard = memo(function SwarmStatusCard({
+  data,
+}: {
+  data: SwarmStatusData
+}) {
+  const cfg = SWARM_STATUS_CONFIG[data.status]
+  const agents = useAppStore((s) => s.agents || {})
+  const isActive = data.status === 'spawning' || data.status === 'running'
+
+  return (
+    <div
+      className="rounded-[14px] overflow-hidden"
+      style={{
+        background: cfg.bg,
+        border: `1px solid ${cfg.border}`,
+        animation: 'delegation-handoff-in 0.45s cubic-bezier(0.16, 1, 0.3, 1)',
+      }}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center gap-2.5 px-4 py-3"
+        style={{
+          borderBottom: `1px solid ${cfg.border}`,
+        }}
+      >
+        <SwarmIcon size={18} color={cfg.color} />
+        <div className="shrink-0">
+          <AgentAvatar
+            seed={data.parentAgentSeed}
+            avatarUrl={data.parentAgentAvatarUrl}
+            name={data.parentAgentName}
+            size={22}
+          />
+        </div>
+        <div className="flex flex-col gap-0 min-w-0 flex-1">
+          <span className="text-[12px] font-700" style={{ color: cfg.color }}>
+            Swarm spawned by {data.parentAgentName}
+          </span>
+          <span className="text-[10px] text-text-3/50">
+            {data.memberCount} agent{data.memberCount !== 1 ? 's' : ''}
+            {' · '}
+            {new Date(data.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+          </span>
+        </div>
+        {isActive && (
+          <span
+            className="shrink-0 w-2 h-2 rounded-full"
+            style={{
+              backgroundColor: cfg.color,
+              animation: 'swarm-pulse 1.5s ease-in-out infinite',
+            }}
+          />
+        )}
+      </div>
+
+      {/* Members grid */}
+      <div className="px-3 py-2.5 flex flex-col gap-1.5">
+        {data.members.map((member) => (
+          <SwarmMemberCard
+            key={member.index}
+            member={member}
+            agents={agents}
+          />
+        ))}
+      </div>
+
+      {/* Summary bar */}
+      <div className="px-3 pb-3">
+        <SwarmSummaryBar data={data} />
+      </div>
+    </div>
+  )
+})
+
+// ---------------------------------------------------------------------------
+// CSS keyframes (inject once)
+// ---------------------------------------------------------------------------
+
+const SWARM_STYLES = `
+@keyframes swarm-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.85); }
+}
+@keyframes swarm-member-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+`
+
+/** Call this once in a layout or the component tree root */
+export function SwarmStatusStyles() {
+  return <style dangerouslySetInnerHTML={{ __html: SWARM_STYLES }} />
+}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useMemo } from 'react'
+import { memo, useMemo, useState } from 'react'
 import type { ToolEvent } from '@/stores/use-chat-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
@@ -19,6 +19,7 @@ const TOOL_COLORS: Record<string, string> = {
   create_spreadsheet: '#10B981',
   web_search: '#3B82F6',
   web_fetch: '#3B82F6',
+  spawn_subagent: '#8B5CF6',
   delegate_to_agent: '#6366F1',
   check_delegation_status: '#6366F1',
   delegate_to_claude_code: '#6366F1',
@@ -72,6 +73,7 @@ export const TOOL_LABELS: Record<string, string> = {
   claude_code: 'Claude Code',
   codex_cli: 'Codex CLI',
   opencode_cli: 'OpenCode CLI',
+  spawn_subagent: 'Subagent',
   delegate_to_agent: 'Agent Delegation',
   check_delegation_status: 'Check Delegation',
   delegate_to_claude_code: 'Claude Code',
@@ -110,6 +112,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   claude_code: 'Enable delegation to Claude Code CLI',
   codex_cli: 'Enable delegation to OpenAI Codex CLI',
   opencode_cli: 'Enable delegation to OpenCode CLI',
+  spawn_subagent: 'Spawn native subagents with lineage tracking and batch support',
   delegate_to_agent: 'Delegate a task to another agent',
   check_delegation_status: 'Check the status of a delegated task',
   delegate_to_claude_code: 'Delegate complex coding tasks to Claude Code',
@@ -210,7 +213,7 @@ function formatToolOutput(toolName: string, raw: string): string {
 }
 
 /** Extract a human-readable preview from tool input */
-function getInputPreview(name: string, input: string): string {
+export function getInputPreview(name: string, input: string): string {
   try {
     let parsed = JSON.parse(input)
     // Unwrap LangChain's { input: ... } wrapper
@@ -262,6 +265,25 @@ function getInputPreview(name: string, input: string): string {
   }
 }
 
+export function getToolLabel(name: string, input: string): string {
+  if (name === 'browser') {
+    try {
+      let parsed = JSON.parse(input)
+      if (parsed?.input && Object.keys(parsed).length === 1) {
+        const inner = typeof parsed.input === 'string' ? JSON.parse(parsed.input) : parsed.input
+        if (typeof inner === 'object' && inner !== null) parsed = inner
+      }
+      const action = parsed?.action || ''
+      const sub = BROWSER_ACTION_LABELS[action]
+      return sub ? `Browser · ${sub}` : 'Browser'
+    } catch {
+      return 'Browser'
+    }
+  }
+
+  return TOOL_LABELS[name] || name.replace(/_/g, ' ')
+}
+
 /** Extract embedded images, videos, PDFs, and file links from tool output */
 export function extractMedia(output: string): { images: string[]; videos: string[]; pdfs: { name: string; url: string }[]; files: { name: string; url: string }[]; cleanText: string } {
   const images: string[] = []
@@ -364,29 +386,14 @@ function TimeoutQuickFix({ event }: { event: ToolEvent }) {
   )
 }
 
-export function ToolCallBubble({ event }: { event: ToolEvent }) {
+export const ToolCallBubble = memo(function ToolCallBubble({ event }: { event: ToolEvent }) {
   const [imgExpanded, setImgExpanded] = useState(false)
   const isError = event.status === 'error'
   const color = isError ? '#F43F5E' : (TOOL_COLORS[event.name] || '#6366F1')
   const isRunning = event.status === 'running'
+  const statusLabel = isRunning ? 'Running' : (isError ? 'Failed' : 'Done')
 
-  // For browser tool, extract the action to show a more specific label
-  const label = useMemo(() => {
-    if (event.name === 'browser') {
-      try {
-        let parsed = JSON.parse(event.input)
-        // Unwrap LangChain {input: "..."} wrapper — inner value is a stringified JSON
-        if (parsed?.input && Object.keys(parsed).length === 1) {
-          const inner = typeof parsed.input === 'string' ? JSON.parse(parsed.input) : parsed.input
-          if (typeof inner === 'object' && inner !== null) parsed = inner
-        }
-        const action = parsed?.action || ''
-        const sub = BROWSER_ACTION_LABELS[action]
-        return sub ? `Browser · ${sub}` : 'Browser'
-      } catch { return 'Browser' }
-    }
-    return TOOL_LABELS[event.name] || event.name.replace(/_/g, ' ')
-  }, [event.name, event.input])
+  const label = useMemo(() => getToolLabel(event.name, event.input), [event.input, event.name])
 
   const inputPreview = useMemo(() => getInputPreview(event.name, event.input), [event.name, event.input])
   const formattedInput = useMemo(() => formatJson(event.input), [event.input])
@@ -422,9 +429,15 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
   }
 
   return (
-    <div className="w-full text-left">
-      <details open={isError || isRunning || undefined} className="group/tool">
+    <div
+      className="w-full text-left"
+      data-testid="tool-call-card"
+      data-tool-name={event.name}
+      data-tool-status={event.status}
+    >
+      <details open={isError || isRunning} className="group/tool">
         <summary
+          data-testid="tool-call-summary"
           className="w-full text-left rounded-[12px] border bg-surface/80 backdrop-blur-sm transition-all duration-200 hover:bg-surface-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden"
           style={{ borderLeft: `3px solid ${color}`, borderColor: `${color}33` }}
         >
@@ -462,6 +475,17 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
                 {inputPreview}
               </span>
             )}
+            <span
+              className={`shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-600 uppercase tracking-[0.08em] ${
+                isRunning
+                  ? 'border-current/20 bg-white/[0.05] text-text-3'
+                  : isError
+                    ? 'border-rose-500/25 bg-rose-500/10 text-rose-300'
+                    : 'border-emerald-500/25 bg-emerald-500/10 text-emerald-300'
+              }`}
+            >
+              {statusLabel}
+            </span>
             {hasMedia && (
               <span className="text-[10px] text-text-3/50 font-500 shrink-0 group-open/tool:hidden">
                 {media.images.length > 0 && `${media.images.length} image${media.images.length > 1 ? 's' : ''}`}
@@ -504,6 +528,7 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
         <div className="mt-2 flex flex-col gap-2">
           {media.images.map((src, i) => (
             <div key={i} className="relative group/img">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src={src}
                 alt={`Screenshot ${i + 1}`}
@@ -605,4 +630,4 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
       )}
     </div>
   )
-}
+})

package/src/components/chatrooms/chatroom-list.tsx

@@ -3,12 +3,14 @@
 import { useEffect, useCallback, useMemo, useState } from 'react'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { useAppStore } from '@/stores/use-app-store'
+import { useNow } from '@/hooks/use-now'
 import { useWs } from '@/hooks/use-ws'
 import type { Chatroom } from '@/types'
 import { EmptyState } from '@/components/shared/empty-state'
 
-function formatRoomTime(ts: number): string {
-  const diff = Date.now() - ts
+function formatRoomTime(ts: number, now: number | null): string {
+  if (!now) return 'recently'
+  const diff = now - ts
   if (diff < 60_000) return 'Now'
   if (diff < 3_600_000) return `${Math.max(1, Math.floor(diff / 60_000))}m`
   if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h`
@@ -16,6 +18,7 @@ function formatRoomTime(ts: number): string {
 }
 
 export function ChatroomList() {
+  const now = useNow()
   const chatrooms = useChatroomStore((s) => s.chatrooms)
   const currentChatroomId = useChatroomStore((s) => s.currentChatroomId)
   const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
@@ -72,15 +75,15 @@ export function ChatroomList() {
 
   const filtered = useMemo(() => {
     const query = search.trim().toLowerCase()
-    const now = Date.now()
     return enriched.filter((item) => {
       if (query && !item.searchText.includes(query)) return false
+      if (!now) return filter === 'unread' ? item.unreadCount > 0 : true
       if (filter === 'active') return now - item.chatroom.updatedAt < 3_600_000
       if (filter === 'recent') return now - item.chatroom.updatedAt < 86_400_000
       if (filter === 'unread') return item.unreadCount > 0
       return true
     })
-  }, [enriched, filter, search])
+  }, [enriched, filter, now, search])
 
   return (
     <div className="flex-1 overflow-y-auto">
@@ -170,7 +173,7 @@ export function ChatroomList() {
                             </span>
                           )}
                           <span className="ml-auto shrink-0 text-[10px] font-mono text-text-3/55">
-                            {formatRoomTime(lastMsg?.time || chatroom.updatedAt)}
+                            {formatRoomTime(lastMsg?.time || chatroom.updatedAt, now)}
                           </span>
                         </div>
                         <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[11px] text-text-3">

package/src/components/chatrooms/chatroom-message.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { useNow } from '@/hooks/use-now'
 import { CodeBlock } from '@/components/chat/code-block'
 import { ReactionPicker } from './reaction-picker'
 import { ReplyQuote } from '@/components/shared/reply-quote'
@@ -40,8 +41,8 @@ interface Props {
   momentOverlay?: React.ReactNode
 }
 
-function formatRelativeTime(ts: number): string {
-  const now = Date.now()
+function formatRelativeTime(ts: number, now: number | null): string {
+  if (!now) return 'recently'
   const diffSec = Math.floor((now - ts) / 1000)
   if (diffSec < 60) return 'just now'
   const diffMin = Math.floor(diffSec / 60)
@@ -62,11 +63,11 @@ function getMemberRoleFromChatroom(chatroom: Chatroom | undefined, agentId: stri
   return member?.role || 'member'
 }
 
-function isAgentMutedInChatroom(chatroom: Chatroom | undefined, agentId: string): boolean {
+function isAgentMutedInChatroom(chatroom: Chatroom | undefined, agentId: string, now: number | null): boolean {
   if (!chatroom?.members?.length) return false
   const member = chatroom.members.find((m) => m.agentId === agentId)
   if (!member?.mutedUntil) return false
-  return new Date(member.mutedUntil).getTime() > Date.now()
+  return !!now && new Date(member.mutedUntil).getTime() > now
 }
 
 function roleBadgeStyle(role: string): { label: string; className: string } | null {
@@ -136,6 +137,7 @@ function renderChatroomAttachments(message: ChatroomMessage) {
 }
 
 export function ChatroomMessageBubble({ message, agents, onToggleReaction, onReply, onTogglePin, onTransfer, onDeleteMessage, onMuteAgent, onUnmuteAgent, onSetRole, chatroom, pinnedMessageIds, streamingAgentIds, messages, grouped: isGrouped, momentOverlay }: Props) {
+  const now = useNow({ enabled: false })
   const [showPicker, setShowPicker] = useState(false)
   const [showTransferPicker, setShowTransferPicker] = useState(false)
   const [showModMenu, setShowModMenu] = useState(false)
@@ -213,7 +215,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
         {!isGrouped && (() => {
           const role = !isUser ? getMemberRoleFromChatroom(chatroom, message.senderId) : 'member'
           const badge = !isUser ? roleBadgeStyle(role) : null
-          const muted = !isUser ? isAgentMutedInChatroom(chatroom, message.senderId) : false
+          const muted = !isUser ? isAgentMutedInChatroom(chatroom, message.senderId, now) : false
           return (
             <div className="flex items-baseline gap-2 mb-0.5">
               {!isUser && agent ? (
@@ -241,7 +243,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
                   Muted
                 </span>
               )}
-              <span className="label-mono" title={new Date(message.time).toLocaleString()}>{formatRelativeTime(message.time)}</span>
+              <span className="label-mono" title={new Date(message.time).toISOString()}>{formatRelativeTime(message.time, now)}</span>
             </div>
           )
         })()}
@@ -352,6 +354,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
                 }
                 return (
                   <a href={src} download target="_blank" rel="noopener noreferrer" className="block my-2">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={src} alt={alt || 'Image'} loading="lazy" className="max-w-full max-h-[400px] rounded-[8px] border border-white/[0.06]" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
                   </a>
                 )
@@ -476,7 +479,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
               </button>
             )}
             {onMuteAgent && onUnmuteAgent && (() => {
-              const muted = isAgentMutedInChatroom(chatroom, message.senderId)
+              const muted = isAgentMutedInChatroom(chatroom, message.senderId, now)
               return muted ? (
                 <button
                   onClick={() => {