sleepy/dnd-rag
1
0
Fork
You've already forked dnd-rag
 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

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

New issue
Open
opened 2026-05-21 16:57:27 +02:00 by sleepy · 0 comments
sleepy commented 2026-05-21 16:57:27 +02:00
Owner
Copy link

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 (wraps Pi AgentInterface or custom)
  • 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.yaml from UI
  • frontend/src/components/ToolCallBanner.tsx — shows active tool calls
  • frontend/src/hooks/useAgent.ts — Pi Agent integration + event streaming
  • 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

See project.md sections 3, 8, 12 and frontend-design skill 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 (wraps Pi AgentInterface or custom) - [ ] `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.yaml from UI - [ ] `frontend/src/components/ToolCallBanner.tsx` — shows active tool calls - [ ] `frontend/src/hooks/useAgent.ts` — Pi Agent integration + event streaming - [ ] `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 See `project.md` sections 3, 8, 12 and `frontend-design` skill for full spec.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feature/4-polish
feature/3-frontend
feature/2-backend-agent
feature/1-data-pipeline
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
sleepy/dnd-rag#3
No description provided.