Live: redesign live.setkernel.com, responsive and worth showing off #17

Raghav, 2026-10-13: "live.setkernel.com is not responsive at all, the design looks like AI slop… make it genuinely interesting for people to see, and what I can showcase as well. Fully responsive with the modern futuristic thing, desktop / tablet / mobile."

This is the top priority for the public page. Build lead: @orion-setkernel. Design review: @lyra-setkernel (frontend lead). Raghav decides.

What's wrong today (checked on a 375×812 phone)

• The flow drawing has min-width: 640px (public/style.css). On a phone it's cut off and scrolls sideways inside its box, and the tiles are clipped.
• It looks like a generic dark dashboard: bordered cards everywhere, small grey text, a wall of numbers.
• When the agents are idle, nothing happens. There's nothing to watch or show anyone.

What it must become

A page people want to watch and share, telling one story: four AI engineers are building real software right now. Raghav uses it to show what setkernel does.

• A distinct identity, grounded in the subject. Suggested direction (take it, or propose something better in the PR): the agents are named after stars (Vega, Rigel, Lyra, Orion), so make it a living night sky.
  • Each agent is a star whose glow and pulse follow its activity.
  • Every Claude request, GitHub action, team-chat post or CI result is a pulse of light travelling between the agent and where the work went.
  • A line forms between two stars when one reviews the other's work.
  • Futuristic but restrained.
• Avoid the AI-slop tells:
  • bordered cards on everything;
  • purple-blue gradients, glassmorphism, neon-on-black cyberpunk;
  • emoji as icons;
  • everything centred;
  • tiny grey text;
  • a grid of stat tiles as the main event.
• Hierarchy:
  1. One line of what's happening now ("Rigel is working on an issue in setkernel-live").
  2. The live visualisation.
  3. Today in a few big, meaningful numbers.
  4. The recent-work stream, with times.
  5. A short, honest "what you're looking at": real events, about a minute behind, private projects unnamed, a person reviews everything.
• Never dead.
  • When the agents are quiet, say so and show what they last did ("quiet since 14:02").
  • Offer a replay of the last hour or 24 h. That needs a small capped replay buffer of already-allowlisted events in the Durable Object, with tests.
  • A clearly labelled ?demo mode replays sample data, so Raghav can show it any time.
• Fully responsive, 320 px to 3840 px: phone portrait and landscape, tablet, laptop, desktop, and a big TV or wall screen.
  • The visualisation re-lays out for each (for example vertical on phones).
  • No horizontal scrolling anywhere. Touch targets at least 44 px. Readable type at every size.
  • A wall mode for big screens (?wall or a fullscreen button).
• Quality
  • No framework needed: vanilla JS, or a tiny library bundled by Wrangler. Canvas or SVG.
  • Smooth on a mid-range phone; pause when the tab is hidden; respect prefers-reduced-motion.
  • Lighthouse (mobile) at least 90 for Performance, Accessibility and Best Practices.
  • Keep the strict CSP. Self-hosted fonts: coordinate with Live: self-host the fonts (no visitor data to Google) #12.
• Privacy rules unchanged.
  • Only allowlisted fields; textContent only.
  • Nothing new leaves sk-obs01. Worker-side changes are fine only for the replay buffer and display, with tests.

Fold in

• Live: per-agent counts on each tile #2: per-agent counts.
• Live: status line accessibility (after #8) #11: status accessibility.
• Anything from PRs Live: show helper use (subagents, skills) #6 (helper glow), Live: last 24 hours of activity #7 (24 h chart) and Live: social preview, favicon and accessibility #8 (social preview, favicon, aria-live) that hasn't merged by the time you start. Build it into the new design, and comment on that PR that it's superseded.

Build on main. If #12 (fonts) or #14 (CI on the page) merges first, keep its behaviour in the new design.

Deliver

• Screenshots: commit them in docs/design/, taken with Playwright from a local preview with sample data, at 375×812, 812×375 (phone landscape), 768×1024, 1440×900 and 2560×1440. Show them in the PR description through their repo paths (docs/design/...png), so Raghav can see them without running anything. A short GIF or WebM of the motion, if you can.
• Design notes in the PR: concept, type, colour, motion, how each size adapts, and what you rejected and why.
• Lighthouse: mobile scores in the PR.
• Checks: npm run validate passes, with tests for any new logic (the replay buffer, demo mode).

Tracking: setkernel/hq#105