Skip to content

feat(master-ui): frontier-lab design system for control plane - #141

Merged
beinan merged 1 commit into
lance-format:mainfrom
beinan:master-ui-redesign
Jul 14, 2026
Merged

beinan merged 1 commit into
lance-format:mainfrom
beinan:master-ui-redesign

Conversation

@beinan

@beinan beinan commented Jul 14, 2026

Copy link
Copy Markdown
Collaborator

Summary

The control-plane UI shipped in #139 was bare inline-styled scaffolding with no design language. This gives it a real one, in the restrained, data-dense register of a frontier AI lab.

  • Design system (styles.css): near-black layered canvas, hairline borders, Inter + JetBrains Mono, a single electric-indigo accent, monospace numerics. Design tokens for surfaces/borders/status colors.
  • Layout: sticky branded topbar with a live-sync indicator, a 4-up stat strip (experiments / rows / fragments / needs-compaction), refined data grid with row hover and hot-fragment amber tinting.
  • Interactions: status pills (queued/running/done/failed), skeleton loaders, empty/error states, placeholder-preserving pagination, and a slide-in detail drawer with scrim + Escape-to-close replacing the old inline panel.

Screens

  • List: stat strip + searchable, paginated experiment grid with inline Compact + status.
  • Drawer: per-experiment storage metrics grid + accent Compact action with live status polling.

Test plan

  • npm run build (tsc + vite) clean; CSS bundled (~2.85 kB gzip)
  • End-to-end: master serves the bundled SPA + /api/v1 on one port; /, CSS asset, and /api/v1/experiments all verified against a seeded data dir

🤖 Generated with Claude Code

Replace the bare inline-styled scaffold with a proper design language:
a near-black layered canvas with hairline borders, Inter + JetBrains Mono
type, a single electric-indigo accent, and monospace numerics — the
restrained, data-dense register expected of a control plane.

- Add styles.css design system: tokens (surfaces/borders/status), sticky
  branded topbar with live-sync indicator, stat strip, refined data grid
  with hover + hot-fragment tinting, status pills (queued/running/done/
  failed), skeleton loaders, and a slide-in detail drawer with scrim.
- Rewrite App.tsx around the system: stat cards aggregating the page,
  compact-value/relative-time formatting, keyboard-dismissable drawer,
  placeholder-preserving pagination, and empty/error/loading states.

UI builds clean (tsc + vite). Verified end-to-end: master serves the
bundled SPA and API together on one port.

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
@beinan
beinan merged commit c2e4650 into lance-format:main Jul 14, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant