@swarmclawai/swarmclaw 0.2.0

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

@@ -0,0 +1,299 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { Message } from '@/types'
+import { useChatStore } from '@/stores/use-chat-store'
+import { useAppStore } from '@/stores/use-app-store'
+import { MessageBubble } from './message-bubble'
+import { StreamingBubble } from './streaming-bubble'
+import { ThinkingIndicator } from './thinking-indicator'
+
+function dateSeparator(ts: number): string {
+  const d = new Date(ts)
+  const today = new Date()
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+  if (d.toDateString() === today.toDateString()) return 'Today'
+  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+interface Props {
+  messages: Message[]
+  streaming: boolean
+}
+
+export function MessageList({ messages, streaming }: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false)
+  const needsSnapRef = useRef(true)
+  const prevSessionIdRef = useRef<string | null>(null)
+  const streamText = useChatStore((s) => s.streamText)
+  const retryLastMessage = useChatStore((s) => s.retryLastMessage)
+  const session = useAppStore((s) => {
+    const id = s.currentSessionId
+    return id ? s.sessions[id] : null
+  })
+  const agents = useAppStore((s) => s.agents)
+  const agent = session?.agentId ? agents[session.agentId] : null
+  const appSettings = useAppStore((s) => s.appSettings)
+  const assistantName = agent?.name
+    || (session?.provider === 'claude-cli' ? undefined : session?.model || session?.provider)
+    || undefined
+
+  const showOk = appSettings.heartbeatShowOk ?? false
+  const showAlerts = appSettings.heartbeatShowAlerts ?? true
+
+  // Unread count tracking
+  const unreadRef = useRef(0)
+  const [unreadCount, setUnreadCount] = useState(0)
+  const prevMsgCountRef = useRef(messages.length)
+
+  // In-thread search
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [searchIdx, setSearchIdx] = useState(0)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  const isHeartbeatMessage = (msg: Message) =>
+    msg.role === 'assistant' && (msg.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(msg.text || ''))
+  const isHeartbeatOk = (msg: Message) =>
+    msg.suppressed === true || (msg.kind === 'heartbeat' && /^\s*HEARTBEAT_OK\b/i.test(msg.text || ''))
+
+  const displayedMessages: Message[] = []
+  for (const msg of messages) {
+    const isHeartbeat = isHeartbeatMessage(msg)
+
+    // Visibility filtering based on settings
+    if (isHeartbeat) {
+      if (!showAlerts) continue // Hide all heartbeat messages
+      if (!showOk && isHeartbeatOk(msg)) continue // Hide OK messages
+    }
+
+    const last = displayedMessages[displayedMessages.length - 1]
+    const lastIsHeartbeat = !!last && isHeartbeatMessage(last)
+    if (isHeartbeat && lastIsHeartbeat) {
+      displayedMessages[displayedMessages.length - 1] = msg
+    } else {
+      displayedMessages.push(msg)
+    }
+  }
+
+  // Search matches
+  const searchMatches = searchQuery.trim()
+    ? displayedMessages
+        .map((msg, i) => ({ msg, i }))
+        .filter(({ msg }) => msg.text.toLowerCase().includes(searchQuery.toLowerCase()))
+    : []
+
+  // Track whether user is at/near bottom so we know whether to auto-scroll on new content
+  const wasAtBottomRef = useRef(true)
+
+  const isNearBottom = useCallback((el: HTMLDivElement) => {
+    return el.scrollHeight - el.scrollTop - el.clientHeight < 200
+  }, [])
+
+  const updateScrollState = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const nearBottom = isNearBottom(el)
+    wasAtBottomRef.current = nearBottom
+    setShowScrollToBottom(!nearBottom)
+    if (nearBottom && unreadRef.current > 0) {
+      unreadRef.current = 0
+      setUnreadCount(0)
+    }
+  }, [isNearBottom])
+
+  // Track unread messages arriving while scrolled up
+  useEffect(() => {
+    const newCount = messages.length - prevMsgCountRef.current
+    prevMsgCountRef.current = messages.length
+    if (newCount > 0 && scrollRef.current && !isNearBottom(scrollRef.current)) {
+      unreadRef.current += newCount
+      setUnreadCount(unreadRef.current)
+    }
+  }, [messages.length, isNearBottom])
+
+  // Detect session switch during render (no extra useEffect, no dep-array mismatch)
+  const sessionId = session?.id ?? null
+  if (sessionId !== prevSessionIdRef.current) {
+    prevSessionIdRef.current = sessionId
+    needsSnapRef.current = true
+    wasAtBottomRef.current = true
+  }
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    if (needsSnapRef.current && messages.length > 0) {
+      // First render after session switch — snap instantly, no visible scroll
+      needsSnapRef.current = false
+      el.scrollTop = el.scrollHeight
+      setShowScrollToBottom(false)
+      wasAtBottomRef.current = true
+      return
+    }
+    // Auto-scroll if user was at bottom before new content arrived
+    if (wasAtBottomRef.current) {
+      el.scrollTop = el.scrollHeight
+    }
+    updateScrollState()
+  }, [messages.length, streamText, isNearBottom, updateScrollState])
+
+  const handleScrollToBottom = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
+    setShowScrollToBottom(false)
+    unreadRef.current = 0
+    setUnreadCount(0)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const handler = () => handleScrollToBottom()
+    window.addEventListener('swarmclaw:scroll-bottom', handler)
+    return () => window.removeEventListener('swarmclaw:scroll-bottom', handler)
+  }, [handleScrollToBottom])
+
+  // Ctrl+F search toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        e.preventDefault()
+        setSearchOpen((v) => {
+          if (!v) setTimeout(() => searchInputRef.current?.focus(), 50)
+          else { setSearchQuery(''); setSearchIdx(0) }
+          return !v
+        })
+      }
+      if (e.key === 'Escape' && searchOpen) {
+        setSearchOpen(false)
+        setSearchQuery('')
+        setSearchIdx(0)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [searchOpen])
+
+  return (
+    <div className="relative flex-1 min-h-0">
+      {/* In-thread search bar */}
+      {searchOpen && (
+        <div className="absolute top-0 left-0 right-0 z-20 flex items-center gap-2 px-6 md:px-12 lg:px-16 py-2 bg-surface/95 backdrop-blur-sm border-b border-white/[0.06]">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => { setSearchQuery(e.target.value); setSearchIdx(0) }}
+            placeholder="Search in conversation..."
+            className="flex-1 bg-transparent text-text text-[13px] outline-none placeholder:text-text-3/50"
+            style={{ fontFamily: 'inherit' }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                if (e.shiftKey) setSearchIdx((v) => Math.max(0, v - 1))
+                else setSearchIdx((v) => Math.min(searchMatches.length - 1, v + 1))
+              }
+            }}
+          />
+          {searchQuery && (
+            <span className="text-[11px] text-text-3 tabular-nums shrink-0">
+              {searchMatches.length > 0 ? `${searchIdx + 1}/${searchMatches.length}` : '0 results'}
+            </span>
+          )}
+          <button
+            onClick={() => setSearchIdx((v) => Math.max(0, v - 1))}
+            disabled={!searchMatches.length}
+            aria-label="Previous match"
+            className="p-1 rounded-[6px] text-text-3 hover:text-text-2 hover:bg-white/[0.04] disabled:opacity-30 cursor-pointer border-none bg-transparent transition-colors"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m18 15-6-6-6 6" /></svg>
+          </button>
+          <button
+            onClick={() => setSearchIdx((v) => Math.min(searchMatches.length - 1, v + 1))}
+            disabled={!searchMatches.length}
+            aria-label="Next match"
+            className="p-1 rounded-[6px] text-text-3 hover:text-text-2 hover:bg-white/[0.04] disabled:opacity-30 cursor-pointer border-none bg-transparent transition-colors"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m6 9 6 6 6-6" /></svg>
+          </button>
+          <button
+            onClick={() => { setSearchOpen(false); setSearchQuery(''); setSearchIdx(0) }}
+            aria-label="Close search"
+            className="p-1 rounded-[6px] text-text-3 hover:text-text-2 hover:bg-white/[0.04] cursor-pointer border-none bg-transparent transition-colors"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+          </button>
+        </div>
+      )}
+
+      <div
+        ref={scrollRef}
+        onScroll={updateScrollState}
+        className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6"
+      >
+        <div className="flex flex-col gap-6">
+          {displayedMessages.map((msg, i) => {
+            const isLastAssistant = msg.role === 'assistant' && !streaming
+              && displayedMessages.slice(i + 1).every((m) => m.role !== 'assistant')
+            const isSearchMatch = searchQuery && searchMatches.some((m) => m.i === i)
+            const isCurrentMatch = searchQuery && searchMatches[searchIdx]?.i === i
+
+            // Date separator
+            const prevMsg = i > 0 ? displayedMessages[i - 1] : null
+            const showDateSep = msg.time && (!prevMsg?.time || new Date(msg.time).toDateString() !== new Date(prevMsg.time).toDateString())
+
+            return (
+              <div key={`${msg.time}-${i}`}>
+                {showDateSep && (
+                  <div className="flex items-center gap-4 py-2 mb-2">
+                    <div className="flex-1 h-px bg-white/[0.06]" />
+                    <span className="text-[10px] font-600 text-text-3/50 uppercase tracking-[0.1em]">
+                      {dateSeparator(msg.time)}
+                    </span>
+                    <div className="flex-1 h-px bg-white/[0.06]" />
+                  </div>
+                )}
+                <div className={isCurrentMatch ? 'ring-1 ring-amber-400/50 rounded-[16px] bg-amber-400/[0.04]' : isSearchMatch ? 'bg-white/[0.02] rounded-[16px]' : ''}>
+                  <MessageBubble
+                    message={msg}
+                    assistantName={assistantName}
+                    isLast={isLastAssistant}
+                    onRetry={isLastAssistant ? retryLastMessage : undefined}
+                  />
+                </div>
+              </div>
+            )
+          })}
+          {streaming && !streamText && <ThinkingIndicator assistantName={assistantName} />}
+          {streaming && streamText && <StreamingBubble text={streamText} assistantName={assistantName} />}
+        </div>
+      </div>
+      {showScrollToBottom && (
+        <button
+          onClick={handleScrollToBottom}
+          className="absolute right-6 md:right-12 lg:right-16 bottom-5 inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/[0.08] bg-[#171a2b]/95 text-text-2 text-[12px] font-600 hover:bg-[#1e2238] transition-colors shadow-lg cursor-pointer"
+          title="Scroll to latest messages"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+            <path d="M12 5v14" />
+            <path d="m19 12-7 7-7-7" />
+          </svg>
+          Latest
+          {unreadCount > 0 && (
+            <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-accent-bright text-white text-[10px] font-700">
+              {unreadCount}
+            </span>
+          )}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/chat/session-debug-panel.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { Message } from '@/types'
+import { IconButton } from '@/components/shared/icon-button'
+
+interface Props {
+  messages: Message[]
+  open: boolean
+  onClose: () => void
+}
+
+type EventType = 'user' | 'assistant' | 'delegation' | 'agent_result' | 'system' | 'error' | 'tool_call'
+
+interface DebugEvent {
+  type: EventType
+  label: string
+  detail: string
+  time: number
+}
+
+function classifyMessage(msg: Message): DebugEvent {
+  const text = msg.text || ''
+
+  if (msg.role === 'user') {
+    if (text.startsWith('[System]')) {
+      return { type: 'system', label: 'System', detail: text.replace('[System] ', ''), time: msg.time }
+    }
+    if (text.startsWith('[Agent ')) {
+      const match = text.match(/\[Agent (.+?) result\]/)
+      return { type: 'agent_result', label: `Agent: ${match?.[1] || 'Unknown'}`, detail: text.replace(/\[Agent .+? result\]:?\n?/, ''), time: msg.time }
+    }
+    if (text.startsWith('[Memory search')) {
+      return { type: 'system', label: 'Memory Search', detail: text.replace('[Memory search results]:\n', ''), time: msg.time }
+    }
+    return { type: 'user', label: 'User', detail: text, time: msg.time }
+  }
+
+  // assistant
+  if (text.startsWith('[Delegating to ')) {
+    const match = text.match(/\[Delegating to (.+?)\]/)
+    return { type: 'delegation', label: `Delegate: ${match?.[1] || 'Unknown'}`, detail: text.replace(/\[Delegating to .+?\]:?\s?/, ''), time: msg.time }
+  }
+  if (text.startsWith('[Error]')) {
+    return { type: 'error', label: 'Error', detail: text.replace('[Error] ', ''), time: msg.time }
+  }
+  if (text.startsWith('Starting task:')) {
+    return { type: 'system', label: 'Task Start', detail: text, time: msg.time }
+  }
+  return { type: 'assistant', label: 'Assistant', detail: text, time: msg.time }
+}
+
+const TYPE_COLORS: Record<EventType, string> = {
+  user: '#6366F1',
+  assistant: '#a0a0b0',
+  delegation: '#F59E0B',
+  agent_result: '#10B981',
+  system: '#6B7280',
+  error: '#EF4444',
+  tool_call: '#8B5CF6',
+}
+
+const TYPE_ICONS: Record<EventType, string> = {
+  user: 'U',
+  assistant: 'AI',
+  delegation: 'D',
+  agent_result: 'R',
+  system: 'S',
+  error: '!',
+  tool_call: 'T',
+}
+
+function fmtTime(ts: number) {
+  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+export function SessionDebugPanel({ messages, open, onClose }: Props) {
+  const [filter, setFilter] = useState<EventType | 'all'>('all')
+  const [expandedIdx, setExpandedIdx] = useState<number | null>(null)
+
+  const events = messages.map(classifyMessage)
+  const filtered = filter === 'all' ? events : events.filter((e) => e.type === filter)
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    setExpandedIdx(null)
+  }, [messages.length])
+
+  if (!open) return null
+
+  const filters: { id: EventType | 'all'; label: string }[] = [
+    { id: 'all', label: 'All' },
+    { id: 'delegation', label: 'Delegations' },
+    { id: 'agent_result', label: 'Results' },
+    { id: 'error', label: 'Errors' },
+    { id: 'system', label: 'System' },
+  ]
+
+  return (
+    <div className="absolute inset-0 z-30 bg-bg/95 backdrop-blur-xl flex flex-col">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-5 py-3 border-b border-white/[0.06] shrink-0">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6366F1" strokeWidth="2" strokeLinecap="round">
+          <path d="M12 20V10" />
+          <path d="M18 20V4" />
+          <path d="M6 20v-4" />
+        </svg>
+        <span className="font-display text-[16px] font-600 tracking-[-0.02em] flex-1">Session Debug</span>
+        <span className="text-[12px] text-text-3 font-mono">{events.length} events</span>
+        <IconButton onClick={onClose} aria-label="Close debug panel">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </IconButton>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-2 px-5 py-3 border-b border-white/[0.04] overflow-x-auto shrink-0">
+        {filters.map((f) => (
+          <button
+            key={f.id}
+            onClick={() => setFilter(f.id)}
+            className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border whitespace-nowrap
+              ${filter === f.id
+                ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Event timeline */}
+      <div className="flex-1 overflow-y-auto px-5 py-4">
+        <div className="relative">
+          {/* Timeline line */}
+          <div className="absolute left-[15px] top-0 bottom-0 w-px bg-white/[0.06]" />
+
+          {filtered.map((event, i) => {
+            const color = TYPE_COLORS[event.type]
+            const expanded = expandedIdx === i
+            return (
+              <button
+                key={i}
+                onClick={() => setExpandedIdx(expanded ? null : i)}
+                className="w-full text-left relative pl-10 pb-4 group cursor-pointer"
+              >
+                {/* Dot */}
+                <div
+                  className="absolute left-[10px] top-1 w-[11px] h-[11px] rounded-full border-2"
+                  style={{ borderColor: color, backgroundColor: expanded ? color : 'transparent' }}
+                />
+
+                {/* Content */}
+                <div className="flex items-center gap-2 mb-0.5">
+                  <span className="text-[11px] font-700 uppercase tracking-wider" style={{ color }}>
+                    {event.label}
+                  </span>
+                  <span className="text-[10px] text-text-3/70 font-mono">{fmtTime(event.time)}</span>
+                </div>
+
+                <p className={`text-[12px] text-text-3 leading-[1.5] ${expanded ? 'whitespace-pre-wrap' : 'line-clamp-2'}`}>
+                  {event.detail}
+                </p>
+
+                {!expanded && event.detail.length > 150 && (
+                  <span className="text-[11px] text-accent-bright/60 mt-1 inline-block">click to expand</span>
+                )}
+              </button>
+            )
+          })}
+
+          {filtered.length === 0 && (
+            <p className="text-center text-[13px] text-text-3 py-12">No events matching filter</p>
+          )}
+        </div>
+      </div>
+
+      {/* Stats bar */}
+      <div className="flex items-center gap-4 px-5 py-3 border-t border-white/[0.06] shrink-0">
+        {(['delegation', 'agent_result', 'error'] as EventType[]).map((type) => {
+          const count = events.filter((e) => e.type === type).length
+          if (!count) return null
+          return (
+            <span key={type} className="flex items-center gap-1.5 text-[11px] font-mono" style={{ color: TYPE_COLORS[type] }}>
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: TYPE_COLORS[type] }} />
+              {count} {type === 'delegation' ? 'delegations' : type === 'agent_result' ? 'results' : 'errors'}
+            </span>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,85 @@
+'use client'
+
+import { useMemo } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import { AiAvatar } from '@/components/shared/avatar'
+import { CodeBlock } from './code-block'
+import { ToolCallBubble } from './tool-call-bubble'
+import { useChatStore } from '@/stores/use-chat-store'
+
+interface Props {
+  text: string
+  assistantName?: string
+}
+
+export function StreamingBubble({ text, assistantName }: Props) {
+  const rendered = useMemo(() => text, [text])
+  const toolEvents = useChatStore((s) => s.toolEvents)
+
+  return (
+    <div
+      className="flex flex-col items-start"
+      style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}
+    >
+      <div className="flex items-center gap-2.5 mb-2 px-1">
+        <AiAvatar size="sm" />
+        <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
+        <span className="w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
+      </div>
+
+      {/* Tool call events */}
+      {toolEvents.length > 0 && (
+        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+          {toolEvents.map((event) => (
+            <ToolCallBubble key={event.id} event={event} />
+          ))}
+        </div>
+      )}
+
+      {rendered && (
+        <div className="max-w-[85%] md:max-w-[72%] bubble-ai px-5 py-3.5">
+          <div className="msg-content streaming-cursor text-[15px] leading-[1.7] break-words text-text">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeHighlight]}
+              components={{
+                pre({ children }) {
+                  return <pre>{children}</pre>
+                },
+                code({ className, children }) {
+                  const isBlock = className?.startsWith('language-') || className?.startsWith('hljs')
+                  if (isBlock) {
+                    return <CodeBlock className={className}>{children}</CodeBlock>
+                  }
+                  return <code className={className}>{children}</code>
+                },
+                a({ href, children }) {
+                  if (!href) return <>{children}</>
+                  const ytMatch = href.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/)
+                  if (ytMatch) {
+                    return (
+                      <div className="my-2">
+                        <iframe
+                          src={`https://www.youtube-nocookie.com/embed/${ytMatch[1]}`}
+                          className="w-full aspect-video rounded-[10px] border border-white/10"
+                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                          allowFullScreen
+                          title="YouTube video"
+                        />
+                      </div>
+                    )
+                  }
+                  return <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>
+                },
+              }}
+            >
+              {rendered}
+            </ReactMarkdown>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/chat/thinking-indicator.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { AiAvatar } from '@/components/shared/avatar'
+
+interface Props {
+  assistantName?: string
+}
+
+export function ThinkingIndicator({ assistantName }: Props) {
+  return (
+    <div className="flex flex-col items-start"
+      style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}>
+      <div className="flex items-center gap-2.5 mb-2 px-1">
+        <AiAvatar size="sm" />
+        <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
+      </div>
+      <div className="bubble-ai px-6 py-5">
+        <div className="flex gap-2">
+          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+          <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+        </div>
+      </div>
+    </div>
+  )
+}