memhouse 0.0.1 → 0.3.0

package/ui/src/components/AiAuditCard.jsx

@@ -0,0 +1,254 @@
+import { useState, useEffect, useRef } from 'react'
+import { ShieldCheck, Loader2, CheckCircle2, AlertTriangle, RefreshCw, Info, ChevronRight, ChevronDown, Brush, FileText, FlaskConical, Bot, Lock, Puzzle, Plug, Package } from 'lucide-react'
+import { fetchCheckAi } from '../lib/api'
+import SectionTitle from './SectionTitle'
+
+const GRADE_COLORS = {
+  'A+': '#22c55e', A: '#22c55e',
+  'B+': '#4ade80', B: '#4ade80',
+  'C+': '#facc15', C: '#facc15',
+  'D+': '#f97316', D: '#f97316',
+  F: '#ef4444',
+}
+
+const SECTION_ICONS = {
+  'Repo Hygiene': Brush,
+  'Grounding Docs': FileText,
+  'Testing': FlaskConical,
+  'Agent Configs': Bot,
+  'AI Context': Lock,
+  'Prompts & Skills': Puzzle,
+  'MCP': Plug,
+  'AI Dependencies': Package,
+  'AI Deps': Package,
+}
+
+function Tip({ missing }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const weighted = missing.filter(f => f.weight > 0)
+  const items = weighted.length > 0 ? weighted : missing.slice(0, 5)
+  if (items.length === 0) return null
+
+  return (
+    <span ref={ref} className="relative flex-shrink-0">
+      <button
+        onClick={(e) => { e.stopPropagation(); setOpen(!open) }}
+        className="flex items-center justify-center w-4 h-4 rounded-full transition hover:opacity-80"
+        style={{ color: 'var(--c-text3)', background: 'var(--c-bg3)' }}
+      >
+        <Info size={10} />
+      </button>
+      {open && (
+        <div
+          className="absolute right-0 top-6 z-50 w-64 p-2.5 rounded shadow-lg"
+          style={{ background: 'var(--c-bg)', border: '1px solid var(--c-border)', boxShadow: '0 4px 24px rgba(0,0,0,0.3)' }}
+        >
+          <div className="text-[11px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>How to improve</div>
+          <div className="space-y-1">
+            {items.map(f => (
+              <div key={f.id} className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
+                <span style={{ color: 'var(--c-text)' }}>+ {f.label}</span>
+                {f.weight > 0 && <span style={{ color: 'var(--c-text3)' }}> ({f.weight}pt)</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </span>
+  )
+}
+
+export default function AiAuditCard({ folder }) {
+  console.log('AiAuditCard rendering, folder:', folder)
+  const [audit, setAudit] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [expanded, setExpanded] = useState(new Set())
+
+  const runAudit = async () => {
+    if (!folder) return
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchCheckAi(folder)
+      if (result.error) throw new Error(result.error)
+      setAudit(result)
+    } catch (e) {
+      setError(e.message)
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    console.log('AiAuditCard useEffect triggered, folder:', folder)
+    runAudit()
+  }, [folder])
+
+  if (loading) {
+    return (
+      <div className="card p-4">
+        <div className="flex items-center gap-2">
+          <Loader2 size={14} className="animate-spin" style={{ color: 'var(--c-accent)' }} />
+          <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Running AI readiness audit...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="card p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AlertTriangle size={14} style={{ color: '#ef4444' }} />
+            <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Audit failed: {error}</span>
+          </div>
+          <button
+            onClick={runAudit}
+            className="flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded transition hover:opacity-80"
+            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+          >
+            <RefreshCw size={10} />
+            Retry
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (!audit) return null
+
+  const gradeColor = GRADE_COLORS[audit.grade] || 'var(--c-text2)'
+  const sections = audit.sections || {}
+  const findings = audit.findings || []
+
+  const findingsBySection = {}
+  for (const f of findings) {
+    const sec = f.section || 'Other'
+    if (!findingsBySection[sec]) findingsBySection[sec] = []
+    findingsBySection[sec].push(f)
+  }
+
+  return (
+    <div className="card p-4 space-y-3">
+      {/* Header row */}
+      <div className="flex items-center gap-3">
+        <ShieldCheck size={16} style={{ color: gradeColor }} />
+        <div>
+          <SectionTitle>ai readiness audit</SectionTitle>
+          <div className="text-[10px] -mt-1.5" style={{ color: 'var(--c-text3)' }}>powered by <code style={{ fontFamily: 'JetBrains Mono, monospace' }}>npx check-ai</code></div>
+        </div>
+        <div className="flex items-center gap-2 ml-auto">
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>
+            {audit.checks?.passed || 0}/{audit.checks?.total || 0} checks
+            &middot; {audit.points?.earned || 0}/{audit.points?.max || 0} pts
+          </span>
+          <button
+            onClick={runAudit}
+            className="flex items-center gap-1 px-2 py-1 text-[11px] rounded transition hover:opacity-80"
+            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+          >
+            <RefreshCw size={10} />
+          </button>
+        </div>
+      </div>
+
+      {/* Score row */}
+      <div className="flex items-center gap-3">
+        <div
+          className="w-11 h-11 rounded-lg flex items-center justify-center text-base font-black flex-shrink-0"
+          style={{ background: `${gradeColor}15`, color: gradeColor, border: `1.5px solid ${gradeColor}30` }}
+        >
+          {audit.grade}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-base font-bold" style={{ color: 'var(--c-white)' }}>{audit.score}</span>
+            <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>/10</span>
+            <span className="text-[11px] ml-1" style={{ color: 'var(--c-text2)' }}>{audit.label}</span>
+          </div>
+          <div className="w-full h-2 rounded-full overflow-hidden mt-1" style={{ background: 'var(--c-code-bg)' }}>
+            <div className="h-full rounded-full" style={{ width: `${((audit.score || 0) / 10 * 100).toFixed(1)}%`, background: gradeColor }} />
+          </div>
+        </div>
+      </div>
+
+      {/* Section rows */}
+      <div>
+        {Object.entries(sections).map(([name, sec]) => {
+          const Icon = SECTION_ICONS[name] || FileText
+          const sectionFindings = findingsBySection[name] || []
+          const passed = sectionFindings.filter(f => f.found)
+          const missing = sectionFindings.filter(f => !f.found)
+          const pct = sec.pct || 0
+          const barColor = pct >= 70 ? '#22c55e' : pct >= 40 ? '#facc15' : pct > 0 ? '#f97316' : 'var(--c-text3)'
+
+          // Build description from found findings
+          const details = []
+          for (const f of passed) {
+            if (f.detail) details.push(f.detail)
+            else if (f.matchedPath) details.push(f.matchedPath)
+            else if (f.matches && f.matches.length > 0) details.push(f.matches.join(', '))
+            else details.push(f.label)
+          }
+          const desc = details.length > 0
+            ? details.slice(0, 3).join(' · ') + (details.length > 3 ? ' …' : '')
+            : 'none detected'
+
+          const isOpen = expanded.has(name)
+          const toggle = () => setExpanded(prev => {
+            const next = new Set(prev)
+            if (next.has(name)) next.delete(name)
+            else next.add(name)
+            return next
+          })
+
+          return (
+            <div key={name} style={{ borderBottom: '1px solid var(--c-border)' }}>
+              {/* Main row — clickable */}
+              <div className="flex items-center gap-2.5 py-2 cursor-pointer transition hover:bg-[var(--c-bg3)]" onClick={toggle}>
+                {isOpen
+                  ? <ChevronDown size={12} style={{ color: 'var(--c-text3)', flexShrink: 0 }} />
+                  : <ChevronRight size={12} style={{ color: 'var(--c-text3)', flexShrink: 0 }} />
+                }
+                <Icon size={14} style={{ color: 'var(--c-text3)', flexShrink: 0 }} />
+                <span className="text-[12px] font-medium w-32 flex-shrink-0" style={{ color: 'var(--c-white)' }}>{name}</span>
+                <span className="text-[11px] flex-1 truncate" style={{ color: passed.length > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+                  {desc}
+                </span>
+                <span className="text-[11px] flex-shrink-0" style={{ color: 'var(--c-text3)' }}>{passed.length}/{sectionFindings.length}</span>
+                <div className="w-20 h-2 rounded-full overflow-hidden flex-shrink-0" style={{ background: 'var(--c-code-bg)' }}>
+                  <div className="h-full rounded-full" style={{ width: `${pct}%`, background: barColor }} />
+                </div>
+                <span className="text-[11px] w-9 text-right font-bold flex-shrink-0" style={{ color: barColor }}>{pct}%</span>
+                {missing.length > 0 && <Tip missing={missing} />}
+              </div>
+              {/* Expanded: found findings */}
+              {isOpen && passed.length > 0 && (
+                <div className="flex flex-wrap gap-x-4 gap-y-0.5 pb-2 pl-12">
+                  {passed.map(f => (
+                    <span key={f.id} className="inline-flex items-center gap-1.5 text-[11px] py-0.5">
+                      <CheckCircle2 size={10} style={{ color: '#22c55e', flexShrink: 0 }} />
+                      <span style={{ color: 'var(--c-text)' }}>{f.label}</span>
+                      {f.matchedPath && <span style={{ color: 'var(--c-text3)' }}>{f.matchedPath}</span>}
+                      {f.detail && <span style={{ color: 'var(--c-text2)' }}>— {f.detail}</span>}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/ui/src/components/AnimatedLoader.jsx

@@ -0,0 +1,14 @@
+import AnimatedLogo from './AnimatedLogo'
+
+export default function AnimatedLoader({ label = 'Loading...' }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 gap-3">
+      <div style={{ opacity: 0.7 }}>
+        <AnimatedLogo size={32} />
+      </div>
+      {label && (
+        <span className="text-[12px]" style={{ color: 'var(--c-text3)' }}>{label}</span>
+      )}
+    </div>
+  )
+}

package/ui/src/components/AnimatedLogo.jsx

@@ -0,0 +1,96 @@
+export default function AnimatedLogo({ size = 22 }) {
+  // Carousel: a horizontal strip of bots slides left continuously.
+  // The viewport shows one bot at a time. The next bot pushes the current one out.
+  // 5 slots (4 bots + repeat of first) for seamless loop.
+  const step = 28 // each bot cell width
+  // Keyframes: hold on each bot, then slide to the next.
+  // 4 stops: 0→1→2→3→0 (repeat first = slot 4)
+  // Each stop: 5% slide + 20% hold = 25% per bot
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      style={{ overflow: 'hidden' }}
+    >
+      <style>{`
+        @keyframes carousel {
+          0%    { transform: translateX(0); }
+          5%    { transform: translateX(0); }
+          25%   { transform: translateX(-${step}px); }
+          30%   { transform: translateX(-${step}px); }
+          50%   { transform: translateX(-${step * 2}px); }
+          55%   { transform: translateX(-${step * 2}px); }
+          75%   { transform: translateX(-${step * 3}px); }
+          80%   { transform: translateX(-${step * 3}px); }
+          100%  { transform: translateX(-${step * 4}px); }
+        }
+        .carousel-strip { animation: carousel 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+      `}</style>
+
+      <g className="carousel-strip">
+        {/* Slot 0: Bot 1 — indigo */}
+        <g transform="translate(0, 0)" stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 8V4H8"/>
+          <rect width="16" height="12" x="4" y="8" rx="2"/>
+          <path d="M2 14h2"/>
+          <path d="M20 14h2"/>
+          <path d="M15 13v2"/>
+          <path d="M9 13v2"/>
+        </g>
+
+        {/* Slot 1: Bot 2 — pink */}
+        <g transform={`translate(${step}, 0)`} stroke="#f472b6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 6V2H8"/>
+          <path d="M15 11v2"/>
+          <path d="M2 12h2"/>
+          <path d="M20 12h2"/>
+          <path d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/>
+          <path d="M9 11v2"/>
+        </g>
+
+        {/* Slot 2: Bot 3 — emerald */}
+        <g transform={`translate(${step * 2}, 0)`} stroke="#34d399" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M6 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2l0-4"/>
+          <path d="M12 2v2"/>
+          <path d="M9 12v9"/>
+          <path d="M15 12v9"/>
+          <path d="M5 16l4-2"/>
+          <path d="M15 14l4 2"/>
+          <path d="M9 18h6"/>
+          <path d="M10 8v.01"/>
+          <path d="M14 8v.01"/>
+        </g>
+
+        {/* Slot 3: Bot 4 — amber */}
+        <g transform={`translate(${step * 3}, 0)`} stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 20v2"/>
+          <path d="M12 2v2"/>
+          <path d="M17 20v2"/>
+          <path d="M17 2v2"/>
+          <path d="M2 12h2"/>
+          <path d="M2 17h2"/>
+          <path d="M2 7h2"/>
+          <path d="M20 12h2"/>
+          <path d="M20 17h2"/>
+          <path d="M20 7h2"/>
+          <path d="M7 20v2"/>
+          <path d="M7 2v2"/>
+          <rect x="4" y="4" width="16" height="16" rx="2"/>
+          <rect x="8" y="8" width="8" height="8" rx="1"/>
+        </g>
+
+        {/* Slot 4: Repeat Bot 1 for seamless loop — indigo */}
+        <g transform={`translate(${step * 4}, 0)`} stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 8V4H8"/>
+          <rect width="16" height="12" x="4" y="8" rx="2"/>
+          <path d="M2 14h2"/>
+          <path d="M20 14h2"/>
+          <path d="M15 13v2"/>
+          <path d="M9 13v2"/>
+        </g>
+      </g>
+    </svg>
+  )
+}

package/ui/src/components/ChatSidebar.jsx

@@ -0,0 +1,226 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { X, Download, Send, Search } from 'lucide-react'
+import { fetchChat, BASE } from '../lib/api'
+import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
+import MessageContent, { ROLE_CONFIG } from './MessageRenderer'
+import TokenTimeline from './TokenTimeline'
+
+export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, username }) {
+  const [chat, setChat] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [msgFilter, setMsgFilter] = useState('')
+  const scrollRef = useRef(null)
+  const msgCountRef = useRef(0)
+
+  useEffect(() => {
+    if (!chatId) return
+    setLoading(true)
+    setChat(null)
+    setError(null)
+    msgCountRef.current = 0
+    const doFetch = fetchFn || fetchChat
+    doFetch(chatId).then(data => {
+      setChat(data)
+      msgCountRef.current = data?.messages?.length || 0
+      setLoading(false)
+    }).catch(e => {
+      // Without this, a failed initial fetch leaves the spinner forever and
+      // surfaces as an unhandled rejection.
+      setError(e?.message || 'Failed to load session')
+      setLoading(false)
+    })
+
+    // Poll for new messages while sidebar is open
+    const iv = setInterval(() => {
+      doFetch(chatId).then(data => {
+        if (data?.messages?.length !== msgCountRef.current) {
+          msgCountRef.current = data?.messages?.length || 0
+          setChat(data)
+        }
+      }).catch(() => {})
+    }, 10000)
+    return () => clearInterval(iv)
+  }, [chatId, fetchFn])
+
+  // Scroll to bottom when chat loads or new messages arrive
+  useEffect(() => {
+    if (!loading && chat && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [loading, chat])
+
+  // Reset filter when chat changes
+  useEffect(() => {
+    setMsgFilter('')
+  }, [chatId])
+
+  const handleScrollToMessage = useCallback((msgIndex) => {
+    if (!scrollRef.current) return
+    const el = scrollRef.current.querySelector(`[data-msg-index="${msgIndex}"]`)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      el.style.outline = '1.5px solid var(--c-accent)'
+      el.style.outlineOffset = '2px'
+      setTimeout(() => { el.style.outline = 'none' }, 1500)
+    }
+  }, [])
+
+  if (!chatId) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 transition-opacity"
+        style={{ background: 'rgba(0,0,0,0.3)' }}
+        onClick={onClose}
+      />
+
+      {/* Sidebar */}
+      <div
+        className="fixed top-0 right-0 bottom-0 z-50 flex flex-col shadow-2xl sidebar-slide-in"
+        style={{
+          width: 'min(580px, 90vw)',
+          background: 'var(--c-bg)',
+          borderLeft: '1px solid var(--c-border)',
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-3 px-4 py-3 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <button onClick={onClose} className="p-1 rounded transition hover:bg-[var(--c-bg3)]" style={{ color: 'var(--c-text2)' }}>
+            <X size={14} />
+          </button>
+          {chat && (
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium truncate" style={{ color: 'var(--c-white)' }}>
+                {chat.name || '(untitled)'}
+              </div>
+              <div className="flex items-center gap-2 text-[11px]" style={{ color: 'var(--c-text2)' }}>
+                <span className="inline-flex items-center gap-1">
+                  <span className="w-1.5 h-1.5 rounded-full" style={{ background: editorColor(chat.source) }} />
+                  {editorLabel(chat.source)}
+                </span>
+                {chat.mode && <span>· {chat.mode}</span>}
+                <span>{formatDateTime(chat.createdAt)}</span>
+              </div>
+            </div>
+          )}
+          {chat && !fetchFn && (
+            <a
+              href={`${BASE}/api/chats/${encodeURIComponent(chat.id)}/markdown`}
+              download
+              className="flex items-center gap-1 px-2 py-1 text-[11px] transition shrink-0"
+              style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+            >
+              <Download size={11} /> .md
+            </a>
+          )}
+          {extraHeader}
+        </div>
+
+        {/* Stats row */}
+        {chat?.stats && (
+          <div className="flex items-center gap-3 px-4 py-2 text-[11px] shrink-0" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text2)' }}>
+            <span>{chat.stats.totalMessages} msgs</span>
+            {chat.stats.toolCalls?.length > 0 && <span>{chat.stats.toolCalls.length} tools</span>}
+            {chat.stats.totalInputTokens > 0 && <span>{formatNumber(chat.stats.totalInputTokens)} in</span>}
+            {chat.stats.totalOutputTokens > 0 && <span>{formatNumber(chat.stats.totalOutputTokens)} out</span>}
+            {chat.createdAt && chat.lastUpdatedAt && (() => {
+              const ms = new Date(chat.lastUpdatedAt).getTime() - new Date(chat.createdAt).getTime()
+              if (ms <= 0) return null
+              const mins = Math.floor(ms / 60000)
+              const label = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`
+              return <span>{label}</span>
+            })()}
+            {chat.stats.models?.length > 0 && (
+              <span className="ml-auto font-mono truncate" style={{ color: 'var(--c-accent)', opacity: 0.7 }}>
+                {[...new Set(chat.stats.models)].join(', ')}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Token Timeline */}
+        {chat && chat.messages.length > 0 && (
+          <TokenTimeline
+            messages={chat.messages}
+            createdAt={chat.createdAt}
+            lastUpdatedAt={chat.lastUpdatedAt}
+            onScrollToMessage={handleScrollToMessage}
+          />
+        )}
+
+        {/* Search bar */}
+        {chat && chat.messages.length > 0 && (
+          <div className="shrink-0 px-4 py-2" style={{ borderBottom: '1px solid var(--c-border)' }}>
+            <div className="relative">
+              <Search size={11} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <input
+                type="text"
+                placeholder="Filter messages..."
+                value={msgFilter}
+                onChange={e => setMsgFilter(e.target.value)}
+                className="w-full pl-7 pr-3 py-1 text-[12px] outline-none"
+                style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Messages */}
+        <div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-thin px-4 py-3 space-y-2">
+          {loading && (
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>Loading conversation...</div>
+          )}
+          {!loading && !chat && (
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
+              {error ? `Failed to load conversation: ${error}` : 'Conversation not found.'}
+            </div>
+          )}
+          {!loading && chat && chat.messages.length === 0 && (
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
+              {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
+            </div>
+          )}
+          {!loading && chat && chat.messages
+            .filter(msg => !msgFilter || msg.content.toLowerCase().includes(msgFilter.toLowerCase()))
+            .map((msg, i) => {
+              const cfg = ROLE_CONFIG[msg.role] || ROLE_CONFIG.system
+              const Icon = cfg.icon
+              return (
+                <div key={i} data-msg-index={i} className="rounded-r px-3 py-2" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg, transition: 'outline 0.3s' }}>
+                  <div className="flex items-center gap-1.5 text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>
+                    <Icon size={11} />
+                    <span className="font-medium">{msg.role === 'user' && (username || chat?.username) ? (username || chat.username) : cfg.label}</span>
+                    {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}
+                  </div>
+                  <div className="text-[12px]" style={{ color: 'var(--c-text)' }}>
+                    <MessageContent content={msg.content} toolCallDetails={chat.toolCallDetails || []} />
+                  </div>
+                </div>
+              )
+            })}
+        </div>
+
+        {/* Fake disabled chat input */}
+        <div className="shrink-0 px-4 py-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <div
+            className="flex items-center gap-2 px-3 py-2.5 rounded-lg"
+            style={{
+              background: 'var(--c-bg3)',
+              border: '1px solid var(--c-border)',
+              opacity: 0.5,
+              cursor: 'not-allowed',
+            }}
+          >
+            <span className="flex-1 text-[12px]" style={{ color: 'var(--c-text3)' }}>
+              Message is read-only...
+            </span>
+            <Send size={13} style={{ color: 'var(--c-text3)' }} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}