multi-simadmin/docs/superpowers/specs/2026-07-30-komari-inspired-fleet-workbench-design.md

Komari-Inspired Fleet Workbench Design

Date: 2026-07-30

Status: Approved, card structure revised

Intent

Use the reference monitor's information density and scan order without copying its photographic background, glass treatment, striped cards, red decoration, fixed footer, or broken mobile overflow. SimAdmin remains a warm operations workbench: cream surfaces, brown typography, mint status accents, restrained elevation, and direct operational controls.

Layout Contract

• The desktop Fleet overview and search remain in the fixed left sidebar. They must not move into the center content pane.
• The top-level application remains fluid with 16px to 24px outer gutters and no global maximum width.
• The existing responsive card matrix remains 1 / 2 / 2 / 3 / 4 columns at 390 / 768 / 1024 / 1440 / 1920 pixels.
• At 960px and below, the sidebar stacks above results and remains collapsible without horizontal overflow.

Main Results Pane

• A compact five-metric resource health strip appears above the tag groups: online rate, average CPU, average memory, highest temperature, and readable SMS channels.
• The strip reports only values already available in the Fleet snapshot and message-summary state. Missing measurements render as -- rather than invented zero values.
• A horizontal tag group row provides 全部节点 plus available instance tags. It updates the existing tag filter and does not duplicate search ownership.
• The result count, sort control, and batch controls retain their current behavior.

Node Card Structure

The node card is a warm SimAdmin adaptation of the reference monitor card. It borrows the reference's stable top-to-bottom telemetry rhythm, not its striped decoration, glass surface, red frame, photographic background, or footer treatment.

1. A compact header owns identity and controls: status-aware avatar, node name, dashboard affordance, status tag, optional batch checkbox, and a single icon action-menu trigger.
2. Origin, instance tags, and capability tags form one compact metadata flow immediately below the header. They must not render as separate card sections.
3. Phone number and maximum temperature share one quiet hardware facts strip. Values align to the outer edges and missing values remain explicit.
4. CPU and memory render as uniform, full-width telemetry rows. Every row uses the same label column, progress track, and right-aligned tabular value.
5. Latest SMS becomes a compact card footer: message state/direction and number on the left, timestamp on the right. Empty and unavailable states occupy the same geometry.
6. Service restart and system reboot move into the header action menu. The destructive system reboot item uses semantic danger color, while the menu trigger remains visually secondary.

The batch checkbox is hidden outside batch-selection mode. In selection mode it remains in the header control cluster beside the status and action menu, so identity geometry does not shift unpredictably.

Interaction Contract

• The card title remains the primary link to the instance dashboard.
• The origin remains a separate external link and cannot activate card navigation.
• The action trigger is a 44px icon button with an accessible name, aria-haspopup="menu", and accurate aria-expanded state.
• Menu commands keep the existing confirmation and operation-client behavior. Choosing a command closes the menu before the confirmation flow starts.
• Operation progress or errors render below the SMS footer without restoring the old full-width action bar.
• Keyboard focus is always visible. Reduced-motion removes card movement and progress animation.

Visual System

• Cards use a flat cream surface, one warm hairline border, a 12px radius, and no decorative glow or default drop shadow.
• Hover changes border and surface tone with a subtle translateY(-1px) response; selected cards use a mint inset ring.
• Progress tracks are quiet warm-neutral rails with solid mint fills. No animated diagonal stripes are introduced.
• Section hierarchy comes from spacing, weight, a single hardware strip, one footer hairline, and tabular numerals rather than stacked dividers or nested cards.
• The card action menu may use a restrained warm elevation because it floats above the card; the card itself remains shadowless.
• Motion stays between 120ms and 220ms and is removed under prefers-reduced-motion.

Cascade Ownership

Fleet workbench refinements live in the existing final approved cascade section at the end of apps/web/src/styles.css. New Fleet selectors must not be appended as another theme experiment. Earlier legacy rules may remain for unrelated screens, but the final section is the single owner of Fleet layout, health strip, grouping row, card, resource, SMS, and selection geometry.

Acceptance

• Component tests verify all five health metrics, tag group filtering, card content order, checkbox placement semantics, and menu-only restart controls.
• Real Chrome verifies the left/stacked sidebar relationship and 1 / 2 / 2 / 3 / 4 card matrix at all five viewport widths.
• Chrome geometry verifies the health strip, tag groups, resource rows, card menu trigger, and cards stay within the viewport.
• Screenshots are reviewed at 390px, 1440px, and 1920px.