99 lines
5.4 KiB
Markdown
99 lines
5.4 KiB
Markdown
# 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.
|