@geminilight/mindos 0.1.0

package/app/components/Sidebar.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Search, PanelLeftClose, PanelLeftOpen, Menu, X, Settings } from 'lucide-react';
+import FileTree from './FileTree';
+import SearchModal from './SearchModal';
+import AskModal from './AskModal';
+import SettingsModal from './SettingsModal';
+import { FileNode } from '@/lib/types';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface SidebarProps {
+  fileTree: FileNode[];
+  collapsed?: boolean;
+  onCollapse?: () => void;
+  onExpand?: () => void;
+}
+
+const Logo = ({ id }: { id: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40" fill="none" className="w-8 h-4 text-[var(--amber)]" aria-hidden="true">
+    <defs>
+      <linearGradient id={`grad-human-${id}`} x1="35" y1="20" x2="5" y2="20" gradientUnits="userSpaceOnUse">
+        <stop offset="0%" stopColor="currentColor" stopOpacity="0.8"/>
+        <stop offset="100%" stopColor="currentColor" stopOpacity="0.3"/>
+      </linearGradient>
+      <linearGradient id={`grad-agent-${id}`} x1="35" y1="20" x2="75" y2="20" gradientUnits="userSpaceOnUse">
+        <stop offset="0%" stopColor="currentColor" stopOpacity="0.8"/>
+        <stop offset="100%" stopColor="currentColor" stopOpacity="1"/>
+      </linearGradient>
+    </defs>
+    <path d="M35,20 C25,35 8,35 8,20 C8,5 25,5 35,20" stroke={`url(#grad-human-${id})`} strokeWidth="3" strokeDasharray="2 4" strokeLinecap="round"/>
+    <path d="M35,20 C45,2 75,2 75,20 C75,38 45,38 35,20" stroke={`url(#grad-agent-${id})`} strokeWidth="4.5" strokeLinecap="round"/>
+    <path d="M35,17.5 Q35,20 37.5,20 Q35,20 35,22.5 Q35,20 32.5,20 Q35,20 35,17.5 Z" fill="#FEF3C7"/>
+  </svg>
+);
+
+export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExpand }: SidebarProps) {
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [askOpen, setAskOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const { t } = useLocale();
+
+  const pathname = usePathname();
+  const currentFile = pathname.startsWith('/view/')
+    ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
+    : undefined;
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setSearchOpen(v => !v); }
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') { e.preventDefault(); setAskOpen(v => !v); }
+      if ((e.metaKey || e.ctrlKey) && e.key === ',') { e.preventDefault(); setSettingsOpen(v => !v); }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  useEffect(() => { setMobileOpen(false); }, [pathname]);
+
+  const sidebarContent = (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
+        <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+          <Logo id="desktop" />
+          <span className="font-semibold text-foreground text-sm tracking-wide" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>MindOS</span>
+        </Link>
+        {/* Mobile close */}
+        <button onClick={() => setMobileOpen(false)} className="md:hidden p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
+          <X size={16} />
+        </button>
+        {/* Desktop action buttons — trimmed to 4 */}
+        <div className="hidden md:flex items-center gap-1">
+          <button onClick={() => setSearchOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.searchTitle} aria-label={t.sidebar.searchTitle}>
+            <Search size={15} />
+          </button>
+          <button onClick={() => setSettingsOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.settingsTitle} aria-label={t.sidebar.settingsTitle}>
+            <Settings size={15} />
+          </button>
+          <button onClick={onCollapse} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.collapseTitle} aria-label={t.sidebar.collapseTitle}>
+            <PanelLeftClose size={15} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
+        <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} />
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <aside className={`sidebar-panel hidden md:flex fixed top-0 left-0 h-screen w-[280px] z-30 bg-card border-r border-border flex-col transition-transform duration-300 ${collapsed ? '-translate-x-full' : 'translate-x-0'}`}>
+        {sidebarContent}
+      </aside>
+
+      {collapsed && (
+        <button onClick={onExpand} className="hidden md:flex fixed top-4 left-0 z-30 items-center justify-center w-6 h-10 bg-card border border-border rounded-r-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.sidebar.expandTitle}>
+          <PanelLeftOpen size={14} />
+        </button>
+      )}
+
+      {/* Mobile navbar */}
+      <header className="md:hidden fixed top-0 left-0 right-0 z-30 bg-card border-b border-border flex items-center justify-between px-3 py-2" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
+        <button onClick={() => setMobileOpen(true)} className="p-2.5 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
+          <Menu size={20} />
+        </button>
+        <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+          <Logo id="mobile" />
+          <span className="font-semibold text-foreground text-sm tracking-wide">MindOS</span>
+        </Link>
+        <div className="flex items-center gap-0.5">
+          <button onClick={() => setSearchOpen(true)} className="p-2.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
+            <Search size={20} />
+          </button>
+          <button onClick={() => setSettingsOpen(true)} className="p-2.5 -mr-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.settingsTitle}>
+            <Settings size={20} />
+          </button>
+        </div>
+      </header>
+
+      {mobileOpen && <div className="md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />}
+
+      <aside className={`md:hidden fixed top-0 left-0 h-screen w-[85vw] max-w-[320px] z-50 bg-card border-r border-border flex flex-col transition-transform duration-300 ease-in-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}>
+        {sidebarContent}
+      </aside>
+
+      <SearchModal open={searchOpen} onClose={() => setSearchOpen(false)} />
+      <AskModal open={askOpen} onClose={() => setAskOpen(false)} currentFile={currentFile} />
+      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+    </>
+  );
+}

package/app/components/SidebarLayout.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useState } from 'react';
+import Sidebar from './Sidebar';
+import AskFab from './AskFab';
+import { FileNode } from '@/lib/types';
+
+interface SidebarLayoutProps {
+  fileTree: FileNode[];
+  children: React.ReactNode;
+}
+
+export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <>
+      <Sidebar
+        fileTree={fileTree}
+        collapsed={collapsed}
+        onCollapse={() => setCollapsed(true)}
+        onExpand={() => setCollapsed(false)}
+      />
+      <main
+        className={`min-h-screen transition-all duration-300 pt-[52px] md:pt-0 ${
+          collapsed ? 'md:pl-0' : 'md:pl-[280px]'
+        }`}
+      >
+        <div className="min-h-screen bg-background">
+          {children}
+        </div>
+      </main>
+      <AskFab />
+    </>
+  );
+}

package/app/components/TableOfContents.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { ChevronRight } from 'lucide-react';
+import GithubSlugger from 'github-slugger';
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+function parseHeadings(content: string): Heading[] {
+  const slugger = new GithubSlugger();
+  const lines = content.split('\n');
+  const headings: Heading[] = [];
+  for (const line of lines) {
+    const match = line.match(/^(#{1,4})\s+(.+)/);
+    if (match) {
+      const level = match[1].length;
+      const text = match[2].trim();
+      const id = slugger.slug(text);
+      headings.push({ id, text, level });
+    }
+  }
+  return headings;
+}
+
+const TOPBAR_H = 44;
+const SCROLL_OFFSET = TOPBAR_H + 12;
+const NAV_W = 212;
+
+interface TableOfContentsProps {
+  content: string;
+}
+
+export default function TableOfContents({ content }: TableOfContentsProps) {
+  const headings = parseHeadings(content);
+  const [activeId, setActiveId] = useState<string>('');
+  const [collapsed, setCollapsed] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (headings.length === 0) return;
+    const timer = setTimeout(() => {
+      const elements = headings
+        .map(h => document.getElementById(h.id))
+        .filter(Boolean) as HTMLElement[];
+      if (elements.length === 0) return;
+      observerRef.current?.disconnect();
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) { setActiveId(entry.target.id); break; }
+          }
+        },
+        { rootMargin: `-${SCROLL_OFFSET}px 0% -70% 0%`, threshold: 0 }
+      );
+      elements.forEach(el => observerRef.current?.observe(el));
+    }, 150);
+    return () => { clearTimeout(timer); observerRef.current?.disconnect(); };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [content]);
+
+  if (headings.length < 2) return null;
+
+  const minLevel = Math.min(...headings.map(h => h.level));
+
+  const handleClick = (e: React.MouseEvent, id: string) => {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    const top = el.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
+    window.scrollTo({ top, behavior: 'smooth' });
+    setActiveId(id);
+  };
+
+  return (
+    <aside
+      className="hidden xl:block fixed right-0 z-10"
+      style={{
+        top: TOPBAR_H,
+        height: `calc(100vh - ${TOPBAR_H}px)`,
+        // Always reserve full width so content margin doesn't jump
+        width: NAV_W,
+        // Slide the entire panel off the right edge when collapsed
+        transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
+        transition: 'transform 200ms ease-in-out',
+      }}
+    >
+      {/* Collapse / expand button — tab attached to left edge of the panel */}
+      <button
+        onClick={() => setCollapsed(v => !v)}
+        className="absolute top-6 flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
+        style={{
+          left: -20,           // sticks out to the left of the panel
+          background: 'var(--background)',
+        }}
+        title={collapsed ? 'Expand TOC' : 'Collapse TOC'}
+      >
+        <ChevronRight
+          size={11}
+          className="text-muted-foreground/60 transition-transform duration-200"
+          style={{ transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
+        />
+      </button>
+
+      {/* Nav list */}
+      <nav
+        className="flex flex-col gap-0.5 overflow-y-auto py-5 pl-2 pr-3 h-full border-l border-border"
+        style={{ background: 'var(--background)' }}
+      >
+        <p
+          className="text-[10px] font-semibold uppercase tracking-wider px-2 mb-1"
+          style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}
+        >
+          On this page
+        </p>
+        {headings.map((heading, i) => {
+          const indent = (heading.level - minLevel) * 14;
+          const isActive = activeId === heading.id;
+          const isNested = heading.level > minLevel;
+          return (
+            <a
+              key={`${heading.id}-${i}`}
+              href={`#${heading.id}`}
+              onClick={(e) => handleClick(e, heading.id)}
+              className="block text-xs py-1 rounded transition-colors duration-100 leading-snug"
+              style={{
+                paddingLeft: `${8 + indent}px`,
+                paddingRight: '8px',
+                borderLeft: isNested ? '1px solid var(--border)' : 'none',
+                marginLeft: isNested ? '8px' : '0',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                ...(isActive
+                  ? { color: 'var(--amber)', background: 'var(--amber-dim)' }
+                  : { color: 'var(--muted-foreground)' }
+                )
+              }}
+            >
+              {heading.text}
+            </a>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}

package/app/components/ThemeToggle.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+export default function ThemeToggle() {
+  const [dark, setDark] = useState(true);
+
+  useEffect(() => {
+    const stored = localStorage.getItem('theme');
+    const isDark = stored
+      ? stored === 'dark'
+      : window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setDark(isDark);
+    document.documentElement.classList.toggle('dark', isDark);
+  }, []);
+
+  const toggle = () => {
+    const next = !dark;
+    setDark(next);
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('theme', next ? 'dark' : 'light');
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="p-1.5 rounded-lg hover:bg-zinc-800 text-zinc-500 hover:text-zinc-300 transition-colors"
+      title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {dark ? <Sun size={15} /> : <Moon size={15} />}
+    </button>
+  );
+}

package/app/components/WysiwygEditor.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Link from '@tiptap/extension-link';
+import { Table } from '@tiptap/extension-table';
+import { TableRow } from '@tiptap/extension-table';
+import { TableCell } from '@tiptap/extension-table';
+import { TableHeader } from '@tiptap/extension-table';
+import { Markdown } from 'tiptap-markdown';
+
+interface WysiwygEditorProps {
+  value: string;
+  onChange: (markdown: string) => void;
+}
+
+export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: { HTMLAttributes: { class: 'not-prose' } },
+      }),
+      Markdown.configure({
+        html: true,
+        transformPastedText: true,
+        transformCopiedText: true,
+      }),
+      Placeholder.configure({ placeholder: 'Start writing…' }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Link.configure({ openOnClick: false, autolink: true }),
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableHeader,
+      TableCell,
+    ],
+    content: value,
+    editorProps: {
+      attributes: {
+        class: 'prose max-w-none focus:outline-none wysiwyg-editor',
+      },
+    },
+    onUpdate({ editor }) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const md = (editor.storage as any).markdown?.getMarkdown?.() ?? editor.getText();
+      onChangeRef.current(md);
+    },
+    immediatelyRender: false,
+  });
+
+  // Sync external value changes (e.g. cancel → revert) without full re-mount
+  const lastMd = useRef(value);
+  useEffect(() => {
+    if (!editor || value === lastMd.current) return;
+    lastMd.current = value;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const current = (editor.storage as any).markdown?.getMarkdown?.() ?? '';
+    if (current !== value) {
+      editor.commands.setContent(value);
+    }
+  }, [editor, value]);
+
+  return (
+    <div className="wysiwyg-wrapper h-full overflow-y-auto px-8 py-6">
+      <EditorContent editor={editor} />
+    </div>
+  );
+}

package/app/components/ask/FileChip.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { X, FileText, Table, Paperclip } from 'lucide-react';
+
+interface FileChipProps {
+  path: string;
+  onRemove: () => void;
+  variant?: 'kb' | 'upload';
+}
+
+export default function FileChip({ path, onRemove, variant = 'kb' }: FileChipProps) {
+  const name = path.split('/').pop() ?? path;
+  const isCsv = name.endsWith('.csv');
+  const Icon = variant === 'upload' ? Paperclip : isCsv ? Table : FileText;
+  const iconClass = variant === 'upload' ? 'text-zinc-400' : isCsv ? 'text-emerald-400' : 'text-zinc-400';
+
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border border-border bg-muted text-foreground max-w-[220px]">
+      <Icon size={11} className={`${iconClass} shrink-0`} />
+      <span className="truncate" title={path}>{name}</span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="text-muted-foreground hover:text-foreground ml-0.5 shrink-0"
+      >
+        <X size={10} />
+      </button>
+    </span>
+  );
+}

package/app/components/ask/MentionPopover.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { FileText, Table } from 'lucide-react';
+
+interface MentionPopoverProps {
+  results: string[];
+  selectedIndex: number;
+  onSelect: (filePath: string) => void;
+}
+
+export default function MentionPopover({ results, selectedIndex, onSelect }: MentionPopoverProps) {
+  if (results.length === 0) return null;
+
+  return (
+    <div className="mx-4 mb-1 border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+      {results.map((f, idx) => {
+        const name = f.split('/').pop() ?? f;
+        const isCsv = name.endsWith('.csv');
+        return (
+          <button
+            key={f}
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onSelect(f);
+            }}
+            className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
+              idx === selectedIndex
+                ? 'bg-accent text-foreground'
+                : 'text-muted-foreground hover:bg-muted'
+            }`}
+          >
+            {isCsv ? (
+              <Table size={13} className="text-emerald-400 shrink-0" />
+            ) : (
+              <FileText size={13} className="text-zinc-400 shrink-0" />
+            )}
+            <span className="truncate flex-1">{name}</span>
+            <span className="text-[10px] text-muted-foreground/50 truncate max-w-[140px] shrink-0">
+              {f.split('/').slice(0, -1).join('/')}
+            </span>
+          </button>
+        );
+      })}
+      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-[10px] text-muted-foreground/50">
+        <span>↑↓ navigate</span>
+        <span>↵ select</span>
+        <span>ESC dismiss</span>
+      </div>
+    </div>
+  );
+}

package/app/components/ask/MessageList.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { Sparkles, Loader2, AlertCircle } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { Message } from '@/lib/types';
+
+function AssistantMessage({ content, isStreaming }: { content: string; isStreaming: boolean }) {
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none text-foreground
+      prose-p:my-1 prose-p:leading-relaxed
+      prose-headings:font-semibold prose-headings:my-2
+      prose-ul:my-1 prose-li:my-0.5
+      prose-ol:my-1
+      prose-code:text-[0.8em] prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
+      prose-pre:bg-muted prose-pre:text-foreground prose-pre:text-xs
+      prose-blockquote:border-l-amber-400 prose-blockquote:text-muted-foreground
+      prose-a:text-amber-500 prose-a:no-underline hover:prose-a:underline
+      prose-strong:text-foreground prose-strong:font-semibold
+      prose-table:text-xs prose-th:py-1 prose-td:py-1
+    ">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      {isStreaming && (
+        <span className="inline-block w-1.5 h-3.5 bg-amber-400 ml-0.5 align-middle animate-pulse rounded-sm" />
+      )}
+    </div>
+  );
+}
+
+interface MessageListProps {
+  messages: Message[];
+  isLoading: boolean;
+  loadingPhase: 'connecting' | 'thinking' | 'streaming';
+  emptyPrompt: string;
+  suggestions: readonly string[];
+  onSuggestionClick: (text: string) => void;
+  labels: {
+    connecting: string;
+    thinking: string;
+    generating: string;
+  };
+}
+
+export default function MessageList({
+  messages,
+  isLoading,
+  loadingPhase,
+  emptyPrompt,
+  suggestions,
+  onSuggestionClick,
+  labels,
+}: MessageListProps) {
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4 min-h-0">
+      {messages.length === 0 && (
+        <div className="mt-6 space-y-3">
+          <p className="text-center text-sm text-muted-foreground/60">{emptyPrompt}</p>
+          <div className="flex flex-col gap-2 px-2">
+            {suggestions.map((s, i) => (
+              <button
+                key={i}
+                type="button"
+                onClick={() => onSuggestionClick(s)}
+                className="text-left text-xs px-3 py-2 rounded-lg border border-border bg-muted/50 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              >
+                {s}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      {messages.map((m, i) => (
+        <div key={i} className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+          {m.role === 'assistant' && (
+            <div
+              className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-0.5"
+              style={{ background: 'var(--amber-dim)' }}
+            >
+              <Sparkles size={12} style={{ color: 'var(--amber)' }} />
+            </div>
+          )}
+          {m.role === 'user' ? (
+            <div
+              className="max-w-[85%] px-3 py-2 rounded-xl rounded-br-sm text-sm leading-relaxed whitespace-pre-wrap"
+              style={{ background: 'var(--amber)', color: '#131210' }}
+            >
+              {m.content}
+            </div>
+          ) : m.content.startsWith('__error__') ? (
+            <div className="max-w-[85%] px-3 py-2.5 rounded-xl rounded-bl-sm border border-red-500/20 bg-red-500/8 text-sm">
+              <div className="flex items-start gap-2 text-red-400">
+                <AlertCircle size={14} className="shrink-0 mt-0.5" />
+                <span className="leading-relaxed">{m.content.slice(9)}</span>
+              </div>
+            </div>
+          ) : (
+            <div className="max-w-[85%] px-3 py-2 rounded-xl rounded-bl-sm bg-muted text-foreground text-sm">
+              {m.content ? (
+                <AssistantMessage content={m.content} isStreaming={isLoading && i === messages.length - 1} />
+              ) : isLoading && i === messages.length - 1 ? (
+                <div className="flex items-center gap-2 py-1">
+                  <Loader2 size={14} className="animate-spin" style={{ color: 'var(--amber)' }} />
+                  <span className="text-xs text-muted-foreground animate-pulse">
+                    {loadingPhase === 'connecting'
+                      ? labels.connecting
+                      : loadingPhase === 'thinking'
+                        ? labels.thinking
+                        : labels.generating}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          )}
+        </div>
+      ))}
+      <div ref={endRef} />
+    </div>
+  );
+}