# 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 (