multi-simadmin/docs/superpowers/plans/2026-07-30-warm-telemetry-node-card.md

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

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

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

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:

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.