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

Komari-Inspired Fleet Workbench Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Improve Fleet density and scanability with a five-metric resource strip, tag groups, and a flatter node-card hierarchy while preserving the approved left sidebar and fluid responsive geometry.

Architecture: Extend FleetPage using values already present in FleetSnapshot and messageStates, then keep all new visual ownership in the existing final Fleet cascade section. Existing search, advanced tag filtering, operations, and responsive grid contracts remain the source of behavior.

Tech Stack: React 19, TypeScript, animal-island-ui, CSS Grid, Vitest, Testing Library, Chrome DevTools Protocol E2E.

Global Constraints

• Keep overview and search in the desktop left sidebar.
• Keep 16px to 24px outer gutters and the existing 390 / 768 / 1024 / 1440 / 1920 responsive matrix.
• Use only existing snapshot and message-summary data; render missing measurements as --.
• Do not add dependencies, backgrounds, glass cards, diagonal stripes, fixed footers, or another theme override block.
• Keep checkboxes hidden outside batch mode and position them beside card status in batch mode.

---

Task 1: Lock Fleet information architecture in component tests

Files:

• Modify: apps/web/src/fleet/fleet-page.test.tsx
• Modify: apps/web/src/fleet/fleet-page.tsx

Interfaces:

• Consumes: FleetSnapshot, FleetMessageLoadState, existing tag filter state, and Progress.

• Produces: .fleet-health-strip, .fleet-group-tabs, .fleet-card-facts, .fleet-card-resources, and stable accessible region/group names.

• Step 1: Write failing component tests

Add assertions for a 节点资源健康 region containing 在线率, 平均 CPU, 平均内存, 最高温度, and 短信通道; verify tag-group buttons filter cards; verify card facts precede resource rows and resource rows precede latest SMS; verify the checkbox is inside .fleet-card-header-meta only in batch mode.

• Step 2: Run the focused test and verify RED

Run: corepack pnpm --filter @multi-simadmin/web test -- src/fleet/fleet-page.test.tsx

Expected: FAIL because the health strip, tag-group row, facts/resources structure, and header checkbox placement do not exist.

• Step 3: Implement the minimal React structure

Compute known CPU, memory, and temperature aggregates with useMemo; derive online rate and readable SMS-channel count; render missing aggregate values as --. Add tag buttons that reuse setTag, move the batch checkbox into .fleet-card-header-meta, place metadata tags before facts, and split facts from full-width CPU/memory resource rows.

• Step 4: Run focused tests and verify GREEN

Run: corepack pnpm --filter @multi-simadmin/web test -- src/fleet/fleet-page.test.tsx

Expected: all Fleet tests pass.

---

Task 2: Consolidate the warm, dense visual hierarchy

Files:

• Modify: apps/web/src/styles.css
• Modify: scripts/real-browser-e2e.mjs

Interfaces:

• Consumes: the Task 1 class names and the existing .fleet-workspace, .fleet-sidebar, .fleet-card-grid, and .app-layout contracts.

• Produces: one final Fleet style owner and browser geometry checks for the new structures.

• Step 1: Add failing Chrome geometry assertions

Extend fleetLayout(cdp) to return health-strip, group-row, first-card, first-resource-row, and checkbox bounds. Require each structure to remain within the results pane and viewport; in batch mode require the checkbox center to sit in the card's upper-right quadrant.

• Step 2: Run browser verification and verify RED

Run: corepack pnpm --filter @multi-simadmin/web build followed by node scripts/real-browser-e2e.mjs --clean-dist.

Expected: FAIL because the new structures do not yet have stable responsive geometry.

• Step 3: Implement styles in the existing final cascade section

Style the health strip as a compact five-column hairline surface, the tag row as an overflow-safe segmented control, and cards as flat warm panels with a 12px radius. Make facts a compact two-column rail, resources two full-width aligned rows, and checkbox/status a stable upper-right group. Add 960px and 560px adaptations without changing the established card-column breakpoints.

• Step 4: Run complete verification

Run:

corepack pnpm --filter @multi-simadmin/web test
corepack pnpm --filter @multi-simadmin/web typecheck
corepack pnpm --filter @multi-simadmin/web build
$env:E2E_SCREENSHOT_DIR='artifacts/komari-fleet-review'; node scripts/real-browser-e2e.mjs --clean-dist
corepack pnpm lint
corepack pnpm exec prettier --check apps/web/src/fleet/fleet-page.tsx apps/web/src/fleet/fleet-page.test.tsx apps/web/src/styles.css scripts/real-browser-e2e.mjs docs/superpowers/specs/2026-07-30-komari-inspired-fleet-workbench-design.md docs/superpowers/plans/2026-07-30-komari-inspired-fleet-workbench.md

Expected: tests, typecheck, build, Chrome E2E, lint, and formatting pass.

• Step 5: Inspect screenshots and restore the local build

Inspect 390px, 1440px, and 1920px Fleet screenshots for clipping, hierarchy, and card density. Rebuild without --clean-dist, confirm http://127.0.0.1:8789/ returns 200, and confirm the automation schedules endpoint remains reachable.