diff --git a/docs/plans/2026-02-18-gateway-ui-redesign.md b/docs/plans/2026-02-18-gateway-ui-redesign.md new file mode 100644 index 0000000..ef05263 --- /dev/null +++ b/docs/plans/2026-02-18-gateway-ui-redesign.md @@ -0,0 +1,434 @@ +# Gateway UI Responsive Redesign — Implementation Plan + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** Redesign the Flynn gateway web frontend with Tailwind CSS, modern sans-serif typography, and swipeable mobile navigation optimized for dashboard monitoring. + +**Architecture:** Replace the existing 1740-line `style.css` with Tailwind utility classes applied directly in JS page renderers. Add CSS scroll-snap horizontal navigation for mobile (<768px). Desktop keeps a refined sidebar. All changes are in `src/gateway/ui/` — vanilla JS, no build step. + +**Tech Stack:** Tailwind CSS (CDN), Inter font (Google Fonts), vanilla JS ES modules. + +--- + +### Task 1: Update HTML Shell and Add Dependencies + +**Files:** +- Modify: `src/gateway/ui/index.html` +- Modify: `src/gateway/ui/manifest.webmanifest` + +**Step 1: Rewrite index.html with Tailwind CDN, fonts, and new shell structure** + +Replace the entire file: + +```html + + + + + + + Flynn + + + + + + + + + + + + + + +
+ + + + +
+
+ Flynn + + + +
+ +
+ + + + + +
+
+ + +
+ + +
+
+ + + +``` + +**Step 2: Update manifest theme color** + +In `manifest.webmanifest`, change `background_color` and `theme_color` to `#09090b`. + +**Step 3: Verify build** + +Run: `pnpm build` +Expected: Clean build (UI files are just copied). + +**Step 4: Commit** + +```bash +git add src/gateway/ui/index.html src/gateway/ui/manifest.webmanifest +git commit -m "feat(gateway-ui): add Tailwind CDN, Inter font, responsive shell" +``` + +--- + +### Task 2: Replace style.css with Minimal Base + +**Files:** +- Modify: `src/gateway/ui/style.css` + +**Step 1: Replace style.css with minimal overrides** + +Tailwind handles 90% of styling. Keep only: scrollbar customization, animations (spin, blink), hljs overrides, and a few component styles Tailwind can't cover (scroll-snap, streaming cursor). + +Write a new `style.css` (~120 lines) that covers: +- Custom scrollbar (webkit) +- `@keyframes spin` and `@keyframes blink` +- `.streaming-cursor::after` blinking cursor +- `.tool-event-body` toggle (display none/block) +- `.nav-link.active` state (since Tailwind can't do `[data-active]` easily in vanilla) +- Code block overrides for hljs inside messages +- Scroll-snap container for mobile swipe (future-proofed but not yet wired) +- Any remaining custom utility classes not covered by Tailwind + +**Step 2: Verify build** + +Run: `pnpm build` +Expected: Clean copy. + +**Step 3: Commit** + +```bash +git add src/gateway/ui/style.css +git commit -m "refactor(gateway-ui): replace monolithic CSS with Tailwind-compatible base" +``` + +--- + +### Task 3: Rewrite App Router for Responsive Navigation + +**Files:** +- Modify: `src/gateway/ui/app.js` + +**Step 1: Rewrite app.js** + +The router needs to: +- Keep hash-based routing +- Update desktop sidebar active states using Tailwind classes (`bg-blue-500/10 text-blue-500 border-l-blue-500`) +- Update mobile pill indicator (active pill gets `bg-blue-500 text-white`, others `bg-zinc-800 text-zinc-400`) +- Add mobile top padding to content area when mobile chrome is visible +- Wire pill click → `location.hash` navigation +- Keep page lifecycle (teardown/render) identical + +Connection status indicator needs to update both desktop and mobile elements. + +**Step 2: Verify build** + +Run: `pnpm build` + +**Step 3: Commit** + +```bash +git add src/gateway/ui/app.js +git commit -m "feat(gateway-ui): responsive router with mobile pill navigation" +``` + +--- + +### Task 4: Rewrite Dashboard Page with Tailwind + +**Files:** +- Modify: `src/gateway/ui/pages/dashboard.js` + +**Step 1: Rewrite all HTML template strings to use Tailwind classes** + +Key changes: +- Page title: `

` +- Section titles: `

` +- Stat cards: `
` +- Stats grid: `
` +- Section collapsible on mobile: wrap sections in `
` element with styled `` on small screens, open by default on desktop +- Tables: Tailwind classes for ``, `
`, `` — horizontal scroll wrapper for mobile: `
` +- Event stream: `
` +- Service cards grid: responsive grid +- Assistant health chips: compact grid with Tailwind +- All stat values use `font-mono` for numbers + +Keep all JS logic (fetching, timers, event handlers) identical. Only change the HTML template strings and class names. + +**Step 2: Verify build** + +Run: `pnpm build` + +**Step 3: Commit** + +```bash +git add src/gateway/ui/pages/dashboard.js +git commit -m "feat(gateway-ui): rewrite dashboard with Tailwind responsive layout" +``` + +--- + +### Task 5: Rewrite Chat Page with Tailwind + +**Files:** +- Modify: `src/gateway/ui/pages/chat.js` + +**Step 1: Rewrite all HTML template strings to use Tailwind classes** + +Key changes: +- Chat layout: `flex flex-col h-[calc(100vh-48px)] md:h-[calc(100vh-48px)] max-w-3xl` +- Chat header: `flex items-center gap-3 pb-3 border-b border-zinc-800 mb-3 flex-wrap` +- Messages container: `flex-1 overflow-y-auto flex flex-col gap-3 py-3` +- User messages: `self-end bg-blue-500/15 border border-blue-500/25 rounded-lg px-3.5 py-2.5 max-w-[85%]` +- Assistant messages: `self-start bg-zinc-900 border border-zinc-800 rounded-lg px-3.5 py-2.5 max-w-[85%]` +- On mobile (