Skip to main content

​
Problem

The agents page at rover.so1.io/agents used a generic SaaS card layout with emoji icons (hammer, megaphone, brain, etc.) that was completely disconnected from the SO1 Mars habitat theme. The page looked like it belonged to a different product entirely — no visor glass, no system panels, no telemetry text, no scan lines. Meanwhile, the SO1 landing page (so1.io) fully embodied the Mars survival aesthetic with system panels, CRT scan-line overlays, monospace telemetry text, NOMINAL status indicators, and a deep-space color palette. The contrast was jarring.

​
Solution

Redesigned both the agents list page and agent detail page to use the existing Mars habitat design system:

​
List Page (/agents)

  • Header: Replaced generic “Agents” heading with a life-support-style header — monospace status line (“Zoid Council // All systems nominal”), “EVA Team” title, and atmospheric subtitle
  • Cards: Replaced <div> cards with system-panel components — CRT scan-line overlay, corner rivets, hover glow, translateY lift
  • Icons: Removed all emoji. Each agent now has a Lucide icon mapped by agent ID (Hammer for Anvil, Brain for Cortex, Shield for Sentinel, etc.)
  • Colors: Each agent has a unique accent color for name text and panel glow (blue for Anvil, amber for Bard, violet for Cortex, etc.)
  • Status: Replaced colored pill badges with NOMINAL-style status indicators — pulsing dot + monospace uppercase label (ACTIVE/OFFLINE/DEV)
  • Tags: Domain tags use monospace font with subtle glass-morphism borders
  • Council links: Displayed as telemetry-style italic text (“Council link: sentinel, cortex. 3 workflows online.”)
  • Navigation: “Details” link replaced with “Open hatch” — matching the landing page’s hatch metaphor
  • Error states: “Failed to load agents” → “Uplink failure”, “Loading agents…” → “Establishing uplink…”

​
Detail Page (/agents/[agentId])

  • Breadcrumb: Monospace uppercase “EVA Team” with tracking
  • Header: System panel with agent icon in a glass container, colored agent name, status indicator
  • Sections: All section headers use monospace uppercase with wide tracking
  • Runbooks: Each runbook is a mini system panel with amber accent glow
  • Workflows: System panel cards with violet accent, monospace “Run” button
  • Empty state: Watney notebook component (lined paper with red margin)
  • Council links: Glass-morphism pill links with hover state

​
Design Tokens Used

All from existing globals.css — no new CSS added:
ComponentCSS Class
Card container.system-panel
Corner hardware.rivet .rivet-tl/tr/bl/br
Status pulsepulse-nominal animation
Empty states.watney-notebook
Glow tint--panel-glow CSS custom property

​
Icon Registry

AgentLucide IconAccent Color
AnvilHammerBlue
BardMegaphoneAmber
VaultLockYellow
CortexBrainViolet
TempoHeartPulseEmerald
CompassCompassSky
SentinelShieldRed
AtlasMapOrange

​
Key Decisions

  1. No data model changes: The emoji field remains in the agent config and API. Icons are mapped client-side by agent ID. This avoids breaking the API contract or requiring BFF changes.
  2. Reused existing CSS: All visual effects (scan lines, rivets, glow, pulse) come from the existing system-panel and watney-notebook classes in rover’s globals.css. Zero new CSS was added.
  3. Cards are links: The entire agent card is now a <Link> element, making the whole surface clickable rather than requiring the user to find a small “Details” link.
  4. Monospace everywhere: All status text, section headers, tags, and telemetry use font-mono to match the landing page’s CRT terminal aesthetic.

​
Outcome

The agents page now feels like Mark Watney’s central intelligence hub — a wall of system panels showing his deployed EVA team, each with their own glow color and pulsing status indicator. The page is visually consistent with the SO1 landing page and the elevator/visor theme used elsewhere in the rover console.

​
Files Changed

  • platform-tools/so1-rover/src/app/(auth)/agents/page.tsx — Full rewrite
  • platform-tools/so1-rover/src/app/(auth)/agents/[agentId]/page.tsx — Full rewrite