Redesign command center UI to match Squadron design system#28
Merged
Conversation
Ports the "quiet" mission-control aesthetic from the Squadron design bundle across every list/detail page while keeping DEFCON 5 intact: - Surface palette rebuilt around the design tokens (dark #0a0c10/#11141a/ #161a22/#1d222c with hairline borders; warm off-white + pure-white in light). DEFCON 5 retuned to the docs site's exact green-on-black CRT palette plus scanline overlay and sharp green scrollbars. - New shared page shell: 22px title + mono submeta, inline stats strip with filter chips and search, full-width grid/table. Applied to Missions, Agents, Skills, Tools, Variables, Costs. - New quiet card family (MissionCard, AgentCard, SkillCard) plus a 'mid' tone on MiniGraph that preserves node colors without neon glow. - Sidebar rebuilt with a stacked-chevron Squadron mark, compact workspace picker (status dot + version), hairline-stroke nav icons, and a live footer strip (running/queued counts). - Folders and Config pages restyled with mono uppercase headers, hairline dividers, and a fixed header + internal scroll (via h-svh on SidebarInset).
- ConfigPage: file tree now uses bg-background (matches main surface instead of the sidebar tone), items and directory labels densified, selected row gets solid bg-accent + ring for much clearer active state. - MissionHistory: ported to the shared shell (mono submeta, inline stats strip with filter chips + search), new StatusPill with tone-tinted dot and pulsing-blue for running. - vite.config.ts: strict port 8087, proxy /api and /ws to the commander on :8086 so HMR works alongside the Go backend.
- MissionsPage: new Configured/History view toggle driven by ?view= param. Drops the standalone sidebar History entry and redirects /history to /missions?view=history. Removes the Failed filter chip. Poll tightened to 3s and runMission invalidates the history query immediately for snappy visual feedback. - MissionCard: no more status dot on the header; status text is now "N running" (primary, bold) or "last run X ago" or "never run". Running cards get a living primary-tinted breathing halo via new .sqd-card-live keyframe. - MiniGraph quiet tone: mint palette (emerald-400/70 dots, -500/35 edges) with a breathing emphasis ring via new .sqd-node-ring keyframe. - AppSidebar: History nav entry removed, unused IconHistory deleted. Footer history poll bumped to 3s so the running/queued counter matches.
- /api/info now returns { baseUrl, version }. Version is overridable via
-ldflags "-X commander/internal/api.Version=..." and falls back to the
first 7 chars of the VCS revision (or "dev" when no build info is
available).
- AppSidebar surfaces it above the running/queued line as a small mono
"COMMAND CENTER · vX" section tag.
- Rewrote the sidebar's instance Select: custom trigger content (no
SelectValue) so long hostnames truncate with ellipsis, and the
duplicate status dot inside SelectItem options is gone.
- MissionDetail's "N runs" button links to
/missions?view=history&q=<missionName> so clicking it opens the history
tab pre-filtered to that mission's runs. MissionsPage seeds the search
input from ?q= on mount and clears it when the view toggle flips.
- Missions stats strip: dropped the "failed" counter per design feedback.
- Add web/src/components/ui-shell.tsx with FilterChip, SearchBox, InlineStat (one accent map replaces the 5 per-page variants), and Dot. Migrate Missions, Agents, Skills, Tools, Variables, Costs, and the three card files to use them — dedupes ~200 LOC of copy-paste. - Add .sqd-card-grid utility in index.css, replacing inline gridTemplateColumns style on 3 pages. - Move formatTimeAgo + formatSchedule into lib/mission-utils.tsx alongside formatTime/formatDuration. - Delete orphaned entity-card.tsx and page-stats.tsx (no remaining imports after the redesign). - Memoize buildMissionMiniGraph / buildAgentMiniGraph / buildSkillMiniGraph inside each page's enriched useMemo so dagre layout no longer recomputes on every search-box keystroke. - Cache commanderVersion() behind sync.Once; debug.ReadBuildInfo now runs once per process instead of per /api/info request. - Add refetchIntervalInBackground: false to the instance/instances polls on MissionsPage, AgentsPage, SkillsPage, and AppSidebar (matches the already-quieted history poll). - Drop vestigial emphasizeId from MissionCard's graph prop (callsite never populated it) and strip narration comments from MissionsPage.
- AppSidebar: replace the eight hand-rolled nav SVGs with their lucide counterparts (Rocket, Bot, Sparkles, Puzzle, DollarSign, KeyRound, FileCode, FolderOpen), all at size-3.5 with strokeWidth=1.75. - Brand: swap the hand-rolled stacked-chevron mark for the provided squadron-logo.svg (served from web/public/). Header row is now centered (justify-center) with the logo and wordmark tightly aligned via leading-none. - Load Black Ops One, JetBrains Mono, and Inter from Google Fonts in index.html (previously the CSS referenced JBM without loading it). - New .sqd-brand utility class applies Black Ops One at 0.08em tracking; the Squadron wordmark picks it up in uppercase caps.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
What changed
Theme / palette (index.css)
--background #0a0c10,--sidebar #11141a,--card #161a22, hover#1d222c, hairlinergba(255,255,255,0.06).#f6f6f4page, pure-white cards,rgba(15,20,30,0.08)hairlines.bg #0a1f0a / elevated #0d2a0d / inset #081808,fg #4ade80 / bright #86efac / dim #6b8f71, lime#a3e635primary, green hairline border, CRT scanline overlay, sharp green scrollbars, brighter headings.Shared shell (Missions, Agents, Skills, Tools, Variables, Costs)
{instance} · N …submeta.⌕ Search …box as a single baseline row.rounded-sm bg-card.New card components
mission-card.tsx— status-light header (animated ping when running), mono name, description, quiet hairline DAG preview, meta row withN tasks · N agents · inputs · schedule · last-run-ago.agent-card.tsx/skill-card.tsx— mid-tone mini-graph (colored pills without the neon glow) with mono meta: model · tools · skills · scope for agents; tools · usage · scope for skills.MiniGraph (mini-graph.tsx)
toneprop:loud(existing glowing pills),mid(pills without glow),quiet(small neutral dots + hairline edges with optional single accent node). Default staysloudso existing callers are untouched.Sidebar (AppSidebar.tsx)
v-tag + reload + theme toggle.{N} running · {N} queuedpulled fromgetMissionHistory.Costs (CostsPage.tsx)
Panelwith mono uppercase headers; horizontal bars thinned toh-1.5; recent-runs table restyled.Folders / Config
FileBrowserPage.tsx— mono breadcrumbs with chevron separators, live dir/file counts, table in hairline card with mono uppercase column headers.ConfigPage.tsx— title + mono path on a single baseline row with toolbar buttons, amber "unsaved" chip, tighter mono file tree, dir groups in uppercase.SidebarInsetah-svh overflow-y-autoscroll container in AppLayout.tsx and pinning ConfigPage toh-full overflow-hiddenso each sub-pane scrolls internally.Notes for reviewer
index.css). Tailwind color remaps for DEFCON 5 are untouched.EntityCardandPageStatsare left in place — still used by nothing specific to the redesigned pages. Future cleanup could remove them.tsc -bboth pass cleanly on all touched files. Remaining lint noise inSkillDetail.tsx/ConfigPage.tsxis pre-existing (not introduced here).Test plan
running, Variablesoverridden, etc.).