# Warm Telemetry Node Card 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:** Replace the segmented Fleet node card with the approved warm telemetry card while preserving navigation, selection, restart behavior, and responsive matrix geometry.

**Architecture:** Keep Fleet data and operation execution in `FleetPage`; only restructure the card DOM and add one local menu-open state. Let the existing final Fleet cascade remain the single styling owner, replacing its card selectors instead of appending a new theme block. Extend the existing component and real-browser tests to lock semantic order, menu behavior, and geometry.

**Tech Stack:** React 19, TypeScript, animal-island-ui, Vitest, Testing Library, Vite, Playwright-driven real Chrome script.

## Global Constraints

- Preserve the desktop left sidebar and the 1 / 2 / 2 / 3 / 4 card matrix at 390 / 768 / 1024 / 1440 / 1920 pixels.
- Use the existing cream, warm-brown, mint, warning, and danger tokens; do not add photographic backgrounds, glass blur, diagonal stripes, red decorative borders, or card shadows.
- Keep the current dashboard link, external origin link, confirmation prompts, and operation-client behavior.
- The checkbox remains hidden outside batch mode and stays in the header control cluster when shown.
- Do not add dependencies, do not refactor unrelated modules, and do not commit the existing dirty worktree.

---

### Task 1: Lock The Card Semantic Contract

**Files:**

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

**Interfaces:**

- Consumes: `FleetPage`, `FleetSnapshot`, existing accessible card names and operation client injection.
- Produces: regression coverage for `.fleet-card-metadata`, `.fleet-card-hardware`, `.fleet-card-telemetry`, `.fleet-card-footer`, and the `实例操作 <name>` menu trigger.

- [ ] **Step 1: Replace the old section-order assertions with the approved scan order**

```tsx
const metadata = card.querySelector('.fleet-card-metadata')!;
const hardware = within(card).getByRole('group', { name: '节点硬件信息' });
const telemetry = within(card).getByRole('region', { name: '资源遥测' });
const footer = within(card).getByRole('region', { name: '短信状态' });
expect(metadata.compareDocumentPosition(hardware) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
expect(hardware.compareDocumentPosition(telemetry) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
expect(telemetry.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
```

- [ ] **Step 2: Assert restart controls are menu-only**

```tsx
expect(within(card).queryByRole('button', { name: '重启服务 Alpha modem' })).toBeNull();
const trigger = within(card).getByRole('button', { name: '实例操作 Alpha modem' });
expect(trigger.getAttribute('aria-expanded')).toBe('false');
fireEvent.click(trigger);
expect(within(card).getByRole('menuitem', { name: '重启服务 Alpha modem' })).toBeTruthy();
expect(within(card).getByRole('menuitem', { name: '系统重启 Alpha modem' })).toBeTruthy();
```

- [ ] **Step 3: 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 new regions and menu trigger do not exist and the old buttons are still visible.

### Task 2: Build The Warm Telemetry Card Structure

**Files:**

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

**Interfaces:**

- Consumes: `runCardAction(id, kind)`, `messageStates`, `Progress`, `Tag`, and `Icon`.
- Produces: `cardMenuId: string | undefined` state and accessible card action menus.

- [ ] **Step 1: Add local action-menu state**

```tsx
const [cardMenuId, setCardMenuId] = useState<string>();
```

- [ ] **Step 2: Replace the segmented card body**

Create the approved DOM order: `header`, `.fleet-card-metadata`, `.fleet-card-hardware`, `.fleet-card-telemetry`, and `.fleet-card-footer`. Move origin and both tag groups into metadata; keep phone and temperature in the hardware group; reuse the two existing `Progress` components in telemetry rows.

- [ ] **Step 3: Replace the bottom action bar with a header menu**

Use the existing `Icon name="more"`. The trigger must expose `aria-label`, `aria-haspopup="menu"`, and `aria-expanded`. Each menu item calls `setCardMenuId(undefined)` before `runCardAction` and preserves the current per-operation accessible labels.

- [ ] **Step 4: Run the focused test and verify GREEN**

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

Expected: all Fleet tests pass with no warnings.

### Task 3: Replace Card Styling And Verify Browser Geometry

**Files:**

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

**Interfaces:**

- Consumes: final Fleet cascade selectors and the new card class names from Task 2.
- Produces: a shadowless warm telemetry card, compact floating menu, and geometry assertions for every supported viewport.

- [ ] **Step 1: Update browser selectors before CSS**

Add assertions that `.fleet-card-telemetry`, `.fleet-card-footer`, and `.fleet-card-menu-trigger` stay inside each card and viewport, and that desktop card columns remain 3 at 1440px and 4 at 1920px.

- [ ] **Step 2: Run browser E2E and verify RED**

Run: `corepack pnpm run test:e2e:browser`

Expected: FAIL because the new selectors are not yet styled to the approved geometry.

- [ ] **Step 3: Replace the final Fleet card selector group**

Use one hairline outer border, 12px radius, no card shadow, compact header controls, one muted hardware strip, uniform telemetry grid rows, one footer hairline, and a floating warm menu. Remove final-cascade ownership of `.fleet-card-facts`, `.fleet-card-resources`, `.fleet-card-sms`, and `.fleet-card-admin-actions`.

- [ ] **Step 4: Run focused and full web verification**

Run:

```powershell
corepack pnpm --filter @multi-simadmin/web test
corepack pnpm --filter @multi-simadmin/web typecheck
corepack pnpm lint
corepack pnpm format:check
corepack pnpm --filter @multi-simadmin/web build
corepack pnpm run test:e2e:browser
```

Expected: all commands exit 0; real Chrome passes at 390, 768, 1024, 1440, and 1920 pixels and writes updated review screenshots.

- [ ] **Step 5: Inspect 390px, 1440px, and 1920px screenshots**

Confirm the left sidebar remains left on desktop, outer gutters remain fluid, no text or menu overlaps, no card has the former bottom action bar, and telemetry values align consistently.