# 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.

- [x] **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.

- [x] **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.

- [x] **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.

- [x] **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.

- [x] **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.

- [x] **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.

- [x] **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.

- [x] **Step 4: Run complete verification**

Run:

```powershell
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.

- [x] **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.