@swarmclawai/swarmclaw 0.2.0

package/src/components/chat/code-block.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { useCallback, useState, type ReactNode } from 'react'
+
+function extractText(node: ReactNode): string {
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (!node) return ''
+  if (Array.isArray(node)) return node.map(extractText).join('')
+  if (typeof node === 'object' && 'props' in node) {
+    return extractText((node as any).props.children)
+  }
+  return ''
+}
+
+interface Props {
+  children: ReactNode
+  className?: string
+}
+
+const PREVIEWABLE = new Set(['html', 'htm', 'svg'])
+
+export function CodeBlock({ children, className }: Props) {
+  const [copied, setCopied] = useState(false)
+  const [previewing, setPreviewing] = useState(false)
+  const language = className?.replace(/hljs\s*/g, '').replace(/language-/g, '').trim() || ''
+  const canPreview = PREVIEWABLE.has(language)
+
+  const getText = useCallback(() => extractText(children), [children])
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(getText()).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }, [getText])
+
+  const handlePreview = useCallback(() => {
+    setPreviewing((v) => !v)
+  }, [])
+
+  const handleOpenTab = useCallback(() => {
+    const text = getText()
+    const blob = new Blob([text], { type: language === 'svg' ? 'image/svg+xml' : 'text/html' })
+    window.open(URL.createObjectURL(blob), '_blank')
+  }, [getText, language])
+
+  const handleSave = useCallback(() => {
+    const text = getText()
+    const ext = language || 'txt'
+    const blob = new Blob([text], { type: 'text/plain' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = `code.${ext}`
+    a.click()
+  }, [getText, language])
+
+  return (
+    <div className="relative group/code">
+      <div className="flex items-center justify-between px-4 py-2 bg-black/30 border-b border-white/[0.03]">
+        <span className="text-[10px] font-600 uppercase tracking-[0.08em] text-text-3 font-mono">{language}</span>
+        <div className="flex items-center gap-1">
+          {canPreview && (
+            <>
+              <button
+                onClick={handlePreview}
+                className={`flex items-center gap-1.5 text-[10px] font-600 bg-transparent border-none cursor-pointer
+                  transition-all duration-200 px-2 py-0.5 rounded-[6px]
+                  ${previewing ? 'text-accent-bright' : 'text-text-3/50 hover:text-text-2 hover:bg-white/[0.04]'}`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                <svg width="10" height="10" 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>
+                {previewing ? 'Code' : 'Preview'}
+              </button>
+              <button
+                onClick={handleOpenTab}
+                className="flex items-center gap-1.5 text-[10px] font-600 bg-transparent border-none cursor-pointer
+                  transition-all duration-200 px-2 py-0.5 rounded-[6px] text-text-3/50 hover:text-text-2 hover:bg-white/[0.04]"
+                style={{ fontFamily: 'inherit' }}
+                title="Open in new tab"
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                  <polyline points="15 3 21 3 21 9" />
+                  <line x1="10" y1="14" x2="21" y2="3" />
+                </svg>
+                Open
+              </button>
+            </>
+          )}
+          <button
+            onClick={handleSave}
+            className="flex items-center gap-1.5 text-[10px] font-600 bg-transparent border-none cursor-pointer
+              transition-all duration-200 px-2 py-0.5 rounded-[6px] text-text-3/50 hover:text-text-2 hover:bg-white/[0.04]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="10" height="10" 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>
+            Save
+          </button>
+          <button
+            onClick={handleCopy}
+            className={`flex items-center gap-1.5 text-[10px] font-600 bg-transparent border-none cursor-pointer
+              transition-all duration-200 px-2 py-0.5 rounded-[6px]
+              ${copied
+                ? 'text-success'
+                : 'text-text-3/50 hover:text-text-2 hover:bg-white/[0.04]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {copied ? (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+                Copied
+              </>
+            ) : (
+              <>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                Copy
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+      {canPreview && previewing ? (
+        <iframe
+          srcDoc={getText()}
+          sandbox="allow-scripts"
+          className="w-full border-none bg-white rounded-b-[8px]"
+          style={{ minHeight: 300, maxHeight: 600 }}
+          title="Code preview"
+        />
+      ) : (
+        <code className={className}>{children}</code>
+      )}
+    </div>
+  )
+}

package/src/components/chat/dev-server-bar.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { DevServerStatus } from '@/types'
+
+interface Props {
+  status: DevServerStatus | null
+  onStop: () => void
+}
+
+export function DevServerBar({ status, onStop }: Props) {
+  if (!status) return null
+
+  return (
+    <div className="flex items-center gap-2.5 px-4 py-2 bg-success/[0.04] border-b border-white/[0.04] shrink-0">
+      <span className="w-[5px] h-[5px] rounded-full bg-success shrink-0"
+        style={{ animation: 'pulse 2s ease infinite' }} />
+      {status.url ? (
+        <a
+          href={status.url}
+          target="_blank"
+          rel="noreferrer"
+          className="text-success font-mono text-[11px] flex-1 no-underline hover:underline"
+        >
+          {status.url}
+        </a>
+      ) : (
+        <span className="text-success font-mono text-[11px] flex-1">Starting...</span>
+      )}
+      <button
+        onClick={onStop}
+        className="px-2.5 py-1 rounded-[8px] border border-danger/15 bg-transparent
+          text-danger text-[11px] font-600 cursor-pointer hover:bg-danger-soft transition-all duration-200"
+        style={{ fontFamily: 'inherit' }}
+      >
+        Stop
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,486 @@
+'use client'
+
+import { memo, useState, useCallback, useEffect } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import type { Message } from '@/types'
+import { useAppStore } from '@/stores/use-app-store'
+import { AiAvatar } from '@/components/shared/avatar'
+import { CodeBlock } from './code-block'
+import { ToolCallBubble } from './tool-call-bubble'
+import { ToolRequestBanner } from './tool-request-banner'
+import { api } from '@/lib/api-client'
+
+const FILE_PATH_RE = /^(\/[\w./-]+\.\w{1,10})$/
+const DIR_PATH_RE = /^(\/[\w./-]+)\/?$/
+const PREVIEWABLE_EXT = /\.(html?|svg|css|js|jsx|ts|tsx|json|md|txt|py|sh)$/i
+const SERVEABLE_EXT = /\.(html?|svg|css|js|jsx|ts|tsx)$/i
+
+function FilePathChip({ filePath }: { filePath: string }) {
+  const canPreview = PREVIEWABLE_EXT.test(filePath)
+  const canServe = SERVEABLE_EXT.test(filePath)
+  const serveUrl = `/api/files/serve?path=${encodeURIComponent(filePath)}`
+
+  const [serverState, setServerState] = useState<{
+    running: boolean; url?: string; loading: boolean; type?: string; framework?: string
+  }>({ running: false, loading: false })
+
+  // Check if a server is already running for this path on mount
+  useEffect(() => {
+    if (!canServe) return
+    api<{ running: boolean; url?: string; type?: string }>('POST', '/preview-server', { action: 'status', path: filePath })
+      .then((res) => { if (res.running) setServerState({ running: true, url: res.url, type: res.type, loading: false }) })
+      .catch((err) => console.error('Dev server check failed:', err))
+  }, [filePath, canServe])
+
+  const handleStartServer = async () => {
+    setServerState((s) => ({ ...s, loading: true }))
+    try {
+      const res = await api<{ running: boolean; url?: string; type?: string; framework?: string }>('POST', '/preview-server', { action: 'start', path: filePath })
+      setServerState({ running: res.running, url: res.url, type: res.type, framework: res.framework, loading: false })
+    } catch {
+      setServerState((s) => ({ ...s, loading: false }))
+    }
+  }
+
+  const handleStopServer = async () => {
+    setServerState((s) => ({ ...s, loading: true }))
+    try {
+      await api('POST', '/preview-server', { action: 'stop', path: filePath })
+      setServerState({ running: false, loading: false })
+    } catch {
+      setServerState((s) => ({ ...s, loading: false }))
+    }
+  }
+
+  const frameworkLabel = serverState.framework
+    ? serverState.framework.charAt(0).toUpperCase() + serverState.framework.slice(1)
+    : null
+
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-[8px] bg-white/[0.06] border border-white/[0.08] font-mono text-[13px]">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/50 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-sky-400">{filePath}</span>
+      {canPreview && !serverState.running && (
+        <a
+          href={serveUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-white/[0.06] hover:bg-white/[0.10] text-[10px] font-600 text-text-3 hover:text-text-2 no-underline transition-colors cursor-pointer"
+          title="Open file"
+        >
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+            <polyline points="15 3 21 3 21 9" />
+            <line x1="10" y1="14" x2="21" y2="3" />
+          </svg>
+          Open
+        </a>
+      )}
+      {canServe && !serverState.running && (
+        <button
+          onClick={handleStartServer}
+          disabled={serverState.loading}
+          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-400 text-[10px] font-600 border-none cursor-pointer transition-colors disabled:opacity-50"
+          title="Start preview server — auto-detects npm projects (React, Next, Vite, etc.) and runs the dev command"
+        >
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+          {serverState.loading ? 'Starting...' : 'Serve'}
+        </button>
+      )}
+      {canServe && serverState.running && (
+        <>
+          {frameworkLabel && (
+            <span className="px-1.5 py-0.5 rounded-[4px] bg-indigo-500/15 text-indigo-300 text-[9px] font-700 uppercase tracking-wider">
+              {frameworkLabel}
+            </span>
+          )}
+          {serverState.type === 'npm' && (
+            <span className="px-1.5 py-0.5 rounded-[4px] bg-amber-500/15 text-amber-300 text-[9px] font-700 uppercase tracking-wider">
+              npm
+            </span>
+          )}
+          <a
+            href={serverState.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-400 text-[10px] font-600 no-underline transition-colors"
+            title="Open preview server"
+          >
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" style={{ animation: 'pulse 2s ease infinite' }} />
+            {serverState.url}
+          </a>
+          <button
+            onClick={handleStopServer}
+            disabled={serverState.loading}
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-red-500/15 hover:bg-red-500/25 text-red-400 text-[10px] font-600 border-none cursor-pointer transition-colors disabled:opacity-50"
+            title="Stop preview server"
+          >
+            <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
+              <rect x="4" y="4" width="16" height="16" rx="2" />
+            </svg>
+            Stop
+          </button>
+        </>
+      )}
+    </span>
+  )
+}
+
+function fmtTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function relativeTime(ts: number): string {
+  const now = Date.now()
+  const diff = now - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  const d = new Date(ts)
+  const today = new Date()
+  if (d.toDateString() === today.toDateString()) return fmtTime(ts)
+  if (diff < 604_800_000) return d.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' })
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+function heartbeatSummary(text: string): string {
+  const clean = (text || '')
+    .replace(/\bHEARTBEAT_OK\b/gi, '')
+    .replace(/\*\*(.*?)\*\*/g, '$1')
+    .replace(/\*(.*?)\*/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/\[(.*?)\]\([^)]+\)/g, '$1')
+    .replace(/\bHeartbeat Response\s*:\s*/gi, '')
+    .replace(/\bCurrent (State|Status)\s*:\s*/gi, '')
+    .replace(/\bRecent Progress\s*:\s*/gi, '')
+    .replace(/\bNext (Step|Immediate Step)\s*:\s*/gi, '')
+    .replace(/\bStatus\s*:\s*/gi, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!clean) return 'No new status update.'
+  return clean.length > 180 ? `${clean.slice(0, 180)}...` : clean
+}
+
+interface Props {
+  message: Message
+  assistantName?: string
+  isLast?: boolean
+  onRetry?: () => void
+}
+
+export const MessageBubble = memo(function MessageBubble({ message, assistantName, isLast, onRetry }: Props) {
+  const isUser = message.role === 'user'
+  const isHeartbeat = !isUser && (message.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(message.text || ''))
+  const currentUser = useAppStore((s) => s.currentUser)
+  const [copied, setCopied] = useState(false)
+  const [heartbeatExpanded, setHeartbeatExpanded] = useState(false)
+  const [toolEventsExpanded, setToolEventsExpanded] = useState(false)
+  const toolEvents = message.toolEvents || []
+  const hasToolEvents = !isUser && toolEvents.length > 0
+  const visibleToolEvents = toolEventsExpanded ? [...toolEvents].reverse() : toolEvents.slice(-1)
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(message.text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }, [message.text])
+
+  return (
+    <div
+      className={`group ${isUser ? 'flex flex-col items-end' : 'flex flex-col items-start'}`}
+      style={{ animation: `${isUser ? 'msg-in-right' : 'msg-in-left'} 0.35s cubic-bezier(0.16, 1, 0.3, 1)` }}
+    >
+      {/* Sender label + timestamp */}
+      <div className={`flex items-center gap-2.5 mb-2 px-1 ${isUser ? 'flex-row-reverse' : ''}`}>
+        {!isUser && <AiAvatar size="sm" />}
+        <span className={`text-[12px] font-600 ${isUser ? 'text-accent-bright/70' : 'text-text-3'}`}>
+          {isUser ? (currentUser ? currentUser.charAt(0).toUpperCase() + currentUser.slice(1) : 'You') : (assistantName || 'Claude')}
+        </span>
+        <span className="text-[11px] text-text-3/70 font-mono" title={message.time ? new Date(message.time).toLocaleString() : ''}>
+          {message.time ? relativeTime(message.time) : ''}
+        </span>
+      </div>
+
+      {/* Tool call events (assistant messages only) */}
+      {hasToolEvents && (
+        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+          {toolEvents.length > 1 && (
+            <button
+              type="button"
+              onClick={() => setToolEventsExpanded((v) => !v)}
+              className="self-start px-2.5 py-1 rounded-[8px] bg-white/[0.04] hover:bg-white/[0.07] text-[11px] text-text-3 border border-white/[0.06] cursor-pointer transition-colors"
+            >
+              {toolEventsExpanded ? 'Show latest only' : `Show all tool calls (${toolEvents.length})`}
+            </button>
+          )}
+          <div className={`${toolEventsExpanded ? 'max-h-[320px] overflow-y-auto pr-1 flex flex-col gap-2' : 'flex flex-col gap-2'}`}>
+            {visibleToolEvents.map((event, i) => (
+              <ToolCallBubble
+                key={`${message.time}-tool-${toolEventsExpanded ? `all-${i}` : `latest-${toolEvents.length - 1}`}`}
+                event={{
+                  id: `${message.time}-${toolEventsExpanded ? i : toolEvents.length - 1}`,
+                  name: event.name,
+                  input: event.input,
+                  output: event.output,
+                  status: event.error ? 'error' : 'done',
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 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>
+          )
+        })()}
+
+        {isHeartbeat ? (
+          <div className="flex flex-col gap-2">
+            <button
+              type="button"
+              onClick={() => setHeartbeatExpanded((v) => !v)}
+              className="w-full rounded-[12px] px-3.5 py-3 border border-white/[0.10] bg-white/[0.02] text-left hover:bg-white/[0.04] transition-colors cursor-pointer"
+            >
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex items-center gap-2">
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                  <span className="text-[11px] uppercase tracking-[0.08em] text-text-2 font-600">Heartbeat</span>
+                </div>
+                <span className="text-[11px] text-text-3">{heartbeatExpanded ? 'Collapse' : 'Expand'}</span>
+              </div>
+              <p className="text-[13px] text-text-2/90 leading-[1.5] mt-1.5">{heartbeatSummary(message.text)}</p>
+            </button>
+            {heartbeatExpanded && (
+              <div className="msg-content text-[14px] leading-[1.7] text-text break-words px-3 py-2 rounded-[10px] border border-white/[0.08] bg-black/20">
+                <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>
+                    },
+                  }}
+                >
+                  {message.text}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className={`msg-content text-[15px] break-words ${isUser ? 'leading-[1.6] text-white/95' : 'leading-[1.7] 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>
+                  }
+                  // Detect file/dir paths in inline code and make them interactive
+                  const text = typeof children === 'string' ? children : ''
+                  if (text && (FILE_PATH_RE.test(text) || (DIR_PATH_RE.test(text) && text.split('/').length > 2))) {
+                    return <FilePathChip filePath={text.replace(/\/$/, '')} />
+                  }
+                  return <code className={className}>{children}</code>
+                },
+                img({ src, alt }) {
+                  if (!src || typeof src !== 'string') return null
+                  const isVideo = /\.(mp4|webm|mov|avi)$/i.test(src)
+                  if (isVideo) {
+                    return (
+                      <video src={src} controls className="max-w-full rounded-[10px] border border-white/10 my-2" />
+                    )
+                  }
+                  return (
+                    <a href={src} download target="_blank" rel="noopener noreferrer" className="block my-2">
+                      <img src={src} alt={alt || 'File'} className="max-w-full rounded-[10px] border border-white/10 hover:border-white/25 transition-colors cursor-pointer" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
+                    </a>
+                  )
+                },
+                a({ href, children }) {
+                  if (!href) return <>{children}</>
+                  // Internal app links: #task:<id> and #schedule:<id>
+                  const taskMatch = href.match(/^#task:(.+)$/)
+                  if (taskMatch) {
+                    return (
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          const store = useAppStore.getState()
+                          await store.loadTasks(true)
+                          store.setEditingTaskId(taskMatch[1])
+                          store.setTaskSheetOpen(true)
+                        }}
+                        className="inline-flex items-center gap-1 text-purple-400 hover:text-purple-300 underline cursor-pointer bg-transparent border-none p-0 font-inherit text-inherit"
+                      >
+                        {children}
+                      </button>
+                    )
+                  }
+                  const schedMatch = href.match(/^#schedule:(.+)$/)
+                  if (schedMatch) {
+                    return (
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          const store = useAppStore.getState()
+                          await store.loadSchedules()
+                          store.setEditingScheduleId(schedMatch[1])
+                          store.setScheduleSheetOpen(true)
+                        }}
+                        className="inline-flex items-center gap-1 text-amber-400 hover:text-amber-300 underline cursor-pointer bg-transparent border-none p-0 font-inherit text-inherit"
+                      >
+                        {children}
+                      </button>
+                    )
+                  }
+                  const isUpload = href.startsWith('/api/uploads/')
+                  if (isUpload) {
+                    const uploadIsHtml = /\.(html?|svg)$/i.test(href.split('?')[0])
+                    return (
+                      <span className="inline-flex items-center gap-1.5">
+                        <a href={href} download className="inline-flex items-center gap-1.5 text-sky-400 hover:text-sky-300 underline">
+                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0">
+                            <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>
+                          {children}
+                        </a>
+                        {uploadIsHtml && (
+                          <a href={href} target="_blank" rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-accent-soft hover:bg-accent-soft/80 text-accent-bright text-[10px] font-600 no-underline transition-colors"
+                            title="Preview in new tab">
+                            <svg width="10" height="10" 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>
+                        )}
+                      </span>
+                    )
+                  }
+                  // YouTube embed
+                  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>
+                },
+              }}
+            >
+              {message.text}
+            </ReactMarkdown>
+          </div>
+        )}
+      </div>
+
+      {/* Tool access request banners */}
+      {!isUser && <ToolRequestBanner
+        text={message.text || ''}
+        toolOutputs={toolEvents.map((e) => e.output || '').filter(Boolean)}
+      />}
+
+      {/* Action buttons */}
+      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
+        <button
+          onClick={handleCopy}
+          aria-label="Copy message"
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
+            text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+          style={{ fontFamily: 'inherit' }}
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+        {!isUser && isLast && onRetry && (
+          <button
+            onClick={onRetry}
+            aria-label="Retry message"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <polyline points="23 4 23 10 17 10" />
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+            </svg>
+            Retry
+          </button>
+        )}
+      </div>
+    </div>
+  )
+})