highperfocused/agent
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Web UI redesign: shared header/sidebar, shadcn/ui, responsive layout, and dark mode #2

New Issue
Closed
opened 2026-03-12 14:36:30 +01:00 by highperfocused · 0 comments
highperfocused commented 2026-03-12 14:36:30 +01:00
Owner
Copy Link

Summary

The current built-in web UI (src/gateway/web-ui.ts) is a minimal single-page debug interface. We should redesign it into a consistent, production-ready app shell with reusable navigation.

Goals

  • Introduce a shared header and sidebar that remain consistent across all pages.
  • Build UI components with shadcn/ui.
  • Ensure a responsive experience for mobile and desktop.
  • Add light and dark mode with a user toggle and persisted preference.

Why

A consistent app shell improves navigation, scalability, and maintainability as the UI grows beyond a single page. Using shadcn/ui gives us reusable, accessible primitives and a coherent design system.

Proposed scope

  1. UI foundation
    • Introduce a frontend structure that supports reusable layouts (app shell).
    • Keep the gateway API integration (/v1/chat, /v1/chat/stream, conversation endpoints).
  2. Shared layout
    • Header: brand/title, active page context, theme toggle, optional session controls.
    • Sidebar: primary navigation and key actions.
    • Use the same shell on all web pages/routes.
  3. Responsive behavior
    • Desktop: persistent sidebar.
    • Mobile: collapsible sidebar (sheet/drawer) with hamburger trigger in header.
    • Validate common breakpoints (mobile/tablet/desktop).
  4. Theming
    • Light/dark mode toggle in header.
    • Persist theme selection (localStorage) and default to system preference.
    • Ensure readable contrast in both themes.
  5. Design consistency
    • shadcn/ui for shared primitives (button, input, sheet, dropdown/menu, tooltip, separator, scroll area, etc.).
    • Avoid one-off styling for core layout components.

Acceptance criteria

  • All pages use a shared layout with a consistent header + sidebar.
  • Sidebar is responsive: always visible on desktop, drawer/sheet on mobile.
  • UI is built with shadcn/ui components and design tokens.
  • Light/dark mode is fully functional, persisted, and works across pages.
  • Layout and interactions are keyboard accessible.
  • Works well on small screens (>=320px) and desktop.
  • docs/web-ui.md is updated with architecture/layout/theming details.

Implementation notes

  • Keep API contract unchanged; this is primarily a UI/UX architecture upgrade.
  • Prefer incremental delivery:
    1. Establish app shell + theme system
    2. Migrate chat page into shell
    3. Add additional pages/routes as needed
  • Include before/after screenshots or short screen recordings in the PR.
## Summary The current built-in web UI (`src/gateway/web-ui.ts`) is a minimal single-page debug interface. We should redesign it into a consistent, production-ready app shell with reusable navigation. ## Goals - Introduce a shared **header** and **sidebar** that remain consistent across all pages. - Build UI components with **shadcn/ui**. - Ensure a responsive experience for **mobile and desktop**. - Add **light and dark mode** with a user toggle and persisted preference. ## Why A consistent app shell improves navigation, scalability, and maintainability as the UI grows beyond a single page. Using shadcn/ui gives us reusable, accessible primitives and a coherent design system. ## Proposed scope 1. **UI foundation** - Introduce a frontend structure that supports reusable layouts (app shell). - Keep the gateway API integration (`/v1/chat`, `/v1/chat/stream`, conversation endpoints). 2. **Shared layout** - Header: brand/title, active page context, theme toggle, optional session controls. - Sidebar: primary navigation and key actions. - Use the same shell on all web pages/routes. 3. **Responsive behavior** - Desktop: persistent sidebar. - Mobile: collapsible sidebar (sheet/drawer) with hamburger trigger in header. - Validate common breakpoints (mobile/tablet/desktop). 4. **Theming** - Light/dark mode toggle in header. - Persist theme selection (localStorage) and default to system preference. - Ensure readable contrast in both themes. 5. **Design consistency** - shadcn/ui for shared primitives (button, input, sheet, dropdown/menu, tooltip, separator, scroll area, etc.). - Avoid one-off styling for core layout components. ## Acceptance criteria - [ ] All pages use a shared layout with a consistent header + sidebar. - [ ] Sidebar is responsive: always visible on desktop, drawer/sheet on mobile. - [ ] UI is built with shadcn/ui components and design tokens. - [ ] Light/dark mode is fully functional, persisted, and works across pages. - [ ] Layout and interactions are keyboard accessible. - [ ] Works well on small screens (>=320px) and desktop. - [ ] `docs/web-ui.md` is updated with architecture/layout/theming details. ## Implementation notes - Keep API contract unchanged; this is primarily a UI/UX architecture upgrade. - Prefer incremental delivery: 1. Establish app shell + theme system 2. Migrate chat page into shell 3. Add additional pages/routes as needed - Include before/after screenshots or short screen recordings in the PR.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
highperfocused
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: highperfocused/agent#2
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?