[Phase 3] Frontend: React 19 + Tailwind v4 + Split-screen UI

sleepy commented

2026-05-21 17:28:03 +02:00

Owner

Implement the frontend web UI.

Acceptance Criteria

frontend/vite.config.ts — Vite + React + Tailwind v4
frontend/index.html — HTML entry point
frontend/src/main.tsx — React root render
frontend/src/App.tsx — main app with mode toggle, theme toggle, layout
frontend/src/components/Header.tsx — mode toggle, theme toggle, settings
frontend/src/components/ChatPanel.tsx — main chat panel with streaming messages
frontend/src/components/OocSidebar.tsx — OOC channel (DM mode only)
frontend/src/components/InputBar.tsx — text input + send
frontend/src/components/DiceRoller.tsx — inline dice notation parser + results
frontend/src/components/SettingsModal.tsx — edit config from UI
frontend/src/components/ToolCallBanner.tsx — shows active tool calls
frontend/src/hooks/useAgent.ts — agent integration + event streaming via WebSocket
frontend/src/hooks/useWebSocket.ts — WS connection to backend
frontend/src/hooks/useDiceRoller.ts — dice rolling logic
frontend/src/context/AppContext.tsx — mode, messages, theme state
frontend/src/styles/index.css — Tailwind imports + custom fantasy theme
Split-screen CSS Grid layout (main chat + OOC sidebar in DM mode)
Light/dark theme toggle with parchment/dark aesthetic

Design Direction

Bold, fantasy-themed UI. Avoid generic AI aesthetics.

Typography: distinctive display + body font pairing (no Arial/Inter/Roboto)
Color: cohesive palette — warm parchment tones for light, deep obsidian for dark
Motion: staggered reveals, hover states, tool call animations
Spatial: generous spacing, clear hierarchy, asymmetric accent elements

API Contract

Backend WebSocket (ws://localhost:3000/ws) sends events:

{ type: "message_update", delta: string }
{ type: "tool_execution_start", toolName: string, args: object }
{ type: "tool_execution_end", toolName: string, result: string }
{ type: "message_complete" }

Backend REST endpoints:

POST /api/search — { query, entityType?, topK? } → { results: SearchResult[] }
POST /api/roll — { notation } → { roll: DiceRoll }
GET /api/config → Config (sanitized)
POST /api/config — { config } → { success: boolean }

See project.md sections 3, 8, 12 for full spec.

Implement the frontend web UI. ## Acceptance Criteria - [ ] `frontend/vite.config.ts` — Vite + React + Tailwind v4 - [ ] `frontend/index.html` — HTML entry point - [ ] `frontend/src/main.tsx` — React root render - [ ] `frontend/src/App.tsx` — main app with mode toggle, theme toggle, layout - [ ] `frontend/src/components/Header.tsx` — mode toggle, theme toggle, settings - [ ] `frontend/src/components/ChatPanel.tsx` — main chat panel with streaming messages - [ ] `frontend/src/components/OocSidebar.tsx` — OOC channel (DM mode only) - [ ] `frontend/src/components/InputBar.tsx` — text input + send - [ ] `frontend/src/components/DiceRoller.tsx` — inline dice notation parser + results - [ ] `frontend/src/components/SettingsModal.tsx` — edit config from UI - [ ] `frontend/src/components/ToolCallBanner.tsx` — shows active tool calls - [ ] `frontend/src/hooks/useAgent.ts` — agent integration + event streaming via WebSocket - [ ] `frontend/src/hooks/useWebSocket.ts` — WS connection to backend - [ ] `frontend/src/hooks/useDiceRoller.ts` — dice rolling logic - [ ] `frontend/src/context/AppContext.tsx` — mode, messages, theme state - [ ] `frontend/src/styles/index.css` — Tailwind imports + custom fantasy theme - [ ] Split-screen CSS Grid layout (main chat + OOC sidebar in DM mode) - [ ] Light/dark theme toggle with parchment/dark aesthetic ## Design Direction Bold, fantasy-themed UI. Avoid generic AI aesthetics. - Typography: distinctive display + body font pairing (no Arial/Inter/Roboto) - Color: cohesive palette — warm parchment tones for light, deep obsidian for dark - Motion: staggered reveals, hover states, tool call animations - Spatial: generous spacing, clear hierarchy, asymmetric accent elements ## API Contract Backend WebSocket (`ws://localhost:3000/ws`) sends events: - `{ type: "message_update", delta: string }` - `{ type: "tool_execution_start", toolName: string, args: object }` - `{ type: "tool_execution_end", toolName: string, result: string }` - `{ type: "message_complete" }` Backend REST endpoints: - `POST /api/search` — `{ query, entityType?, topK? }` → `{ results: SearchResult[] }` - `POST /api/roll` — `{ notation }` → `{ roll: DiceRoll }` - `GET /api/config` → `Config` (sanitized) - `POST /api/config` — `{ config }` → `{ success: boolean }` See `project.md` sections 3, 8, 12 for full spec.

sleepy referenced this issue from a commit

2026-05-21 17:46:20 +02:00

feat: Phase 3 frontend — React 19, Tailwind v4, split-screen UI (#5)

sleepy referenced this issue from a commit

2026-05-21 17:47:34 +02:00

feat: Phase 3 frontend — React 19, Tailwind v4, split-screen UI (#5)

sleepy closed this issue

2026-05-21 18:12:51 +02:00