docs: add gateway UI responsive redesign design
Approved design for modernizing the gateway frontend with Tailwind CSS, responsive mobile-first layout, and swipeable page navigation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
@@ -0,0 +1,151 @@
|
||||
# Gateway UI Responsive Redesign
|
||||
|
||||
**Date:** 2026-02-18
|
||||
**Status:** Approved
|
||||
|
||||
## Goal
|
||||
|
||||
Redesign the Flynn gateway web frontend for a modern, responsive, mobile-friendly experience with monitoring dashboard as the primary mobile use case.
|
||||
|
||||
## Decisions
|
||||
|
||||
- **Visual style:** Modern minimal (Linear/Vercel aesthetic), dark theme
|
||||
- **CSS framework:** Tailwind CSS via CDN (Play CDN for zero build step)
|
||||
- **Mobile navigation:** Swipeable pages via CSS scroll-snap with pill indicator
|
||||
- **Dependencies:** Tailwind CDN only; no JS frameworks or gesture libraries
|
||||
- **Approach:** Full rewrite of style.css → Tailwind utility classes in JS page renderers
|
||||
|
||||
## Visual Language
|
||||
|
||||
### Typography
|
||||
- **Body/UI:** Inter (sans-serif) via Google Fonts CDN
|
||||
- **Code/technical values:** JetBrains Mono (monospace) — session IDs, code blocks, config values only
|
||||
|
||||
### Color Palette (Tailwind zinc scale)
|
||||
| Role | Token | Value |
|
||||
|------|-------|-------|
|
||||
| Background deepest | zinc-950 | #09090b |
|
||||
| Background card | zinc-900 | #18181b |
|
||||
| Background elevated | zinc-800 | #27272a |
|
||||
| Accent | blue-500 | #3b82f6 |
|
||||
| Success | green-500 | #22c55e |
|
||||
| Warning | amber-500 | #f59e0b |
|
||||
| Error | red-500 | #ef4444 |
|
||||
| Text primary | zinc-50 | #fafafa |
|
||||
| Text secondary | zinc-400 | #a1a1aa |
|
||||
| Text muted | zinc-600 | #52525b |
|
||||
|
||||
### Spacing
|
||||
- Tailwind 4px scale
|
||||
- Cards: `p-4` (16px) mobile, `p-6` (24px) desktop
|
||||
- Grid gaps: `gap-4` consistent
|
||||
- Touch targets: minimum 44px
|
||||
|
||||
### Borders & Depth
|
||||
- `border-zinc-800` subtle borders
|
||||
- `ring-1 ring-zinc-800` for cards
|
||||
- No drop shadows — layered backgrounds create depth
|
||||
|
||||
## Layout & Navigation
|
||||
|
||||
### Desktop (≥1024px)
|
||||
- Fixed left sidebar: 64px collapsed (icons only), 240px expanded on hover or pin
|
||||
- Logo at top, 5 nav items with icons + labels, connection status at bottom
|
||||
- Main content with max-width constraint for readability
|
||||
|
||||
### Tablet (768px–1023px)
|
||||
- Sidebar: 64px icon-only strip (always collapsed)
|
||||
- Content fills remaining width
|
||||
- Grids: 3 → 2 columns
|
||||
|
||||
### Mobile (<768px)
|
||||
- **No sidebar.** Replaced with:
|
||||
- Top bar: logo + connection indicator + current page title
|
||||
- Swipeable horizontal page container (`scroll-snap-type: x mandatory`)
|
||||
- Pill indicator bar showing page position (tappable to jump)
|
||||
- Page order: Dashboard → Chat → Sessions → Usage → Settings
|
||||
- Each page is `100vw` wide, `scroll-snap-align: start`
|
||||
- JS manages page lifecycle (teardown old page, render new page on snap)
|
||||
|
||||
## Page Designs
|
||||
|
||||
### Dashboard (Primary Mobile Target)
|
||||
- **Stat cards:** Horizontally scrollable strip on mobile, grid on desktop. Compact: large value, small label, optional trend.
|
||||
- **Service status:** Colored pill badges in a compact row. Green/amber/red dots + name.
|
||||
- **Session analytics:** CSS-only bar chart for daily trend. Badge list for top tools/topics.
|
||||
- **Model performance:** Horizontal-scroll table, sticky first column.
|
||||
- **Event stream:** Collapsible, 5 most recent visible by default.
|
||||
- **Active requests:** Only shown when in-flight, with animated indicator.
|
||||
- **Mobile pattern:** All sections are collapsible accordion-style. Headers + summary visible, tap to expand.
|
||||
|
||||
### Chat
|
||||
- Full-height message area, bottom-anchored input
|
||||
- Full-width messages on mobile (no side margins)
|
||||
- Assistant messages: lighter card background. User messages: accent-tinted.
|
||||
- Tool events: compact inline chips (expandable on tap)
|
||||
- Slash command popup: bottom-sheet on mobile, floating on desktop
|
||||
- File attachment: bottom sheet (mobile), drag-drop zone (desktop)
|
||||
- Auto-growing textarea with always-visible send button on mobile
|
||||
|
||||
### Sessions
|
||||
- **Mobile:** Card list (not table). Each card: session ID, channel badge, message count, last activity. Tap to expand history.
|
||||
- **Desktop:** Table with inline history viewer.
|
||||
|
||||
### Usage
|
||||
- Summary stat cards in scrollable strip (mobile) or grid (desktop)
|
||||
- Per-session: stacked cards (mobile), table (desktop)
|
||||
- Auto-refresh every 30s
|
||||
|
||||
### Settings
|
||||
- Sectioned form: each group in its own card
|
||||
- Toggle switches for booleans, full-width inputs for text
|
||||
- 44px minimum touch targets
|
||||
- Sections: PA Mode, Push Notifications, Hook Patterns, Tools, Services, Config
|
||||
|
||||
## Technical Approach
|
||||
|
||||
### Tailwind Setup
|
||||
```html
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Font Loading
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
### Swipe Navigation (Mobile)
|
||||
CSS scroll-snap container wrapping all page divs. JS `IntersectionObserver` or `scrollend` event detects which page is visible and updates the pill indicator + triggers page lifecycle.
|
||||
|
||||
### Migration Strategy
|
||||
1. Replace `style.css` with a minimal base (resets, custom utilities not in Tailwind)
|
||||
2. Rewrite `index.html` shell with Tailwind classes
|
||||
3. Rewrite each page renderer (JS) to emit Tailwind-classed HTML
|
||||
4. Update `app.js` router for scroll-snap container on mobile
|
||||
5. Test each page at all breakpoints
|
||||
|
||||
### Files Modified
|
||||
- `src/gateway/ui/index.html` — new shell, Tailwind CDN, fonts
|
||||
- `src/gateway/ui/style.css` — reduced to minimal base (~100 lines)
|
||||
- `src/gateway/ui/app.js` — responsive router, swipe container, pill indicator
|
||||
- `src/gateway/ui/pages/dashboard.js` — Tailwind classes, accordion, scrollable stats
|
||||
- `src/gateway/ui/pages/chat.js` — Tailwind classes, bottom-sheet slash popup
|
||||
- `src/gateway/ui/pages/sessions.js` — card list on mobile
|
||||
- `src/gateway/ui/pages/usage.js` — card layout on mobile
|
||||
- `src/gateway/ui/pages/settings.js` — form card layout
|
||||
- `src/gateway/ui/sw.js` — update cache version
|
||||
- `src/gateway/ui/manifest.webmanifest` — update theme color to zinc-950
|
||||
Reference in New Issue
Block a user