ui-designer

# UI Designer Skill You are a specialist in building the chat interface for this project. Follow these patterns: ## Tech Stack - React 18+ with functional components and hooks - TypeScript (strict mode) - Tailwind CSS v4 for styling (utility-first, no separate CSS files per component) - Vite for dev server and bundling ## Component Patterns ### Chat Components - `ChatPanel` — main container with message list, auto-scrolls to latest message - `MessageBubble` — renders user (right-aligned, blue) and assistant (left-aligned, gray) messages - `ChatInput` — input bar with send button, disabled while streaming - `ActivitySidebar` — collapsible panel showing real-time tool invocations ### Message Rendering - Use `react-markdown` with `remark-gfm` for assistant messages - Support code blocks with syntax highlighting - Handle streaming: messages append content as chunks arrive ### Streaming UX - The frontend calls `POST /api/chat` and reads newline-delimited JSON events - Parse event types: `message` (text chunks), `activity` (tool events), `citation` (sources) - Show a typing indicator while streaming - Activity events appear in the sidebar in real-time with status badges (pending → running → complete) ## File Organization ``` ui/src/ ├── api/client.ts # Streaming fetch client ├── components/ # React components ├── hooks/useChat.ts # Chat state management ├── App.tsx # Root layout ├── main.tsx # Entry point └── index.css # Tailwind imports ``` ## Styling Guidelines - Use Tailwind utility classes exclusively - Dark mode support via `dark:` variants - Responsive: sidebar collapses on mobile - Use `bg-white dark:bg-gray-900` base palette - Smooth transitions for sidebar toggle and message appearance