feat(rollout): rollout framework presentational layer + Storybook

client/src/protoFleet/components/TargetSelectButton/TargetSelectButton.tsx

@@ -1,21 +1,28 @@
-import Button, { variants } from "@/shared/components/Button";
+import Button, { sizes, variants } from "@/shared/components/Button";
 import Row from "@/shared/components/Row";
 
 interface TargetSelectButtonProps {
   label: string;
   value: string;
   disabled?: boolean;
   onClick: () => void;
+  /**
+   * Button size for the value control. Defaults to `base` to preserve the
+   * curtailment/schedule modals' existing sizing; the firmware rollout Apply-to
+   * tables opt into `compact`.
+   */
+  size?: keyof typeof sizes;
 }
 
-function TargetSelectButton({ label, value, disabled = false, onClick }: TargetSelectButtonProps) {
+function TargetSelectButton({ label, value, disabled = false, onClick, size = sizes.base }: TargetSelectButtonProps) {
   return (
     <Row compact className="flex items-center justify-between gap-4">
       <span className="min-w-0 truncate text-emphasis-300 text-text-primary">{label}</span>
       <Button
         ariaLabel={`${label} ${value}`}
         text={value}
         variant={variants.secondary}
+        size={size}
         disabled={disabled}
         onClick={onClick}
       />

client/src/protoFleet/features/fleetManagement/components/FleetContextualSuggestion.stories.tsx

@@ -0,0 +1,92 @@
+import type { ComponentProps } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import FleetContextualSuggestion from "./FleetContextualSuggestion";
+import { Asic, Building, Fleet, Racks } from "@/shared/assets/icons";
+
+const meta = {
+  title: "Proto Fleet/Fleet Management/FleetContextualSuggestion",
+  component: FleetContextualSuggestion,
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof FleetContextualSuggestion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+type FleetContextualSuggestionProps = ComponentProps<typeof FleetContextualSuggestion>;
+
+const noop = () => undefined;
+
+const rackCreationArgs: FleetContextualSuggestionProps = {
+  icon: <Racks width="w-4" />,
+  title: "24 unassigned miners from 10.90.12.40-10.90.12.63 look like a rack.",
+  detail: "Seen in nearby IPs. Mostly Proto Rig.",
+  action: {
+    label: "Review",
+    onClick: noop,
+  },
+  onDismiss: noop,
+};
+
+const minerPairingArgs: FleetContextualSuggestionProps = {
+  icon: <Asic width="w-4" />,
+  title: "12 detected miners in 10.90.13.80-10.90.13.91 are ready to pair.",
+  detail: "Found during the latest network poll. All are reporting default credentials.",
+  action: {
+    label: "Review",
+    onClick: noop,
+  },
+  onDismiss: noop,
+};
+
+const containerCreationArgs: FleetContextualSuggestionProps = {
+  icon: <Fleet width="w-4" />,
+  title: "96 miners across 10.90.20.0/24 look like a container.",
+  detail: "Detected as four adjacent rack-sized cohorts with matching firmware and model.",
+  action: {
+    label: "Review",
+    onClick: noop,
+  },
+  onDismiss: noop,
+};
+
+const buildingGroupingArgs: FleetContextualSuggestionProps = {
+  icon: <Building width="w-4" />,
+  title: "4 rack-shaped cohorts in 10.90.0.0/20 look like Building B.",
+  detail: "Detected from configured IP ranges and contiguous rack groupings.",
+  action: {
+    label: "Review",
+    onClick: noop,
+  },
+  onDismiss: noop,
+};
+
+const examples = [rackCreationArgs, minerPairingArgs, containerCreationArgs, buildingGroupingArgs];
+
+export const AllExamples: Story = {
+  args: rackCreationArgs,
+  render: () => (
+    <div className="flex max-w-5xl flex-col gap-3">
+      {examples.map((example) => (
+        <FleetContextualSuggestion key={example.title} {...example} />
+      ))}
+    </div>
+  ),
+};
+
+export const RackCreation: Story = {
+  args: rackCreationArgs,
+};
+
+export const MinerPairing: Story = {
+  args: minerPairingArgs,
+};
+
+export const ContainerCreation: Story = {
+  args: containerCreationArgs,
+};
+
+export const BuildingGrouping: Story = {
+  args: buildingGroupingArgs,
+};

client/src/protoFleet/features/fleetManagement/components/FleetContextualSuggestion.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+
+import FleetContextualSuggestion from "./FleetContextualSuggestion";
+
+describe("FleetContextualSuggestion", () => {
+  test("renders contextual copy and dispatches action", async () => {
+    const user = userEvent.setup();
+    const onReview = vi.fn();
+    const onDismiss = vi.fn();
+
+    render(
+      <FleetContextualSuggestion
+        title="24 unassigned miners from 10.90.12.40-10.90.12.63 look like a rack."
+        detail="Seen in nearby IPs. Mostly Proto Rig."
+        action={{ label: "Review", onClick: onReview }}
+        onDismiss={onDismiss}
+      />,
+    );
+
+    expect(screen.getByText("24 unassigned miners from 10.90.12.40-10.90.12.63 look like a rack.")).toBeVisible();
+    expect(screen.getByText("Seen in nearby IPs. Mostly Proto Rig.")).toBeVisible();
+
+    await user.click(screen.getByRole("button", { name: "Review" }));
+    await user.click(screen.getByRole("button", { name: "Dismiss suggestion" }));
+
+    expect(onReview).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+});

client/src/protoFleet/features/fleetManagement/components/FleetContextualSuggestion.tsx

@@ -0,0 +1,81 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+
+import { DismissTiny, Info } from "@/shared/assets/icons";
+import Button, { type ButtonVariant, sizes, variants } from "@/shared/components/Button";
+
+export type FleetContextualSuggestionAction = {
+  label: string;
+  onClick: () => void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  testId?: string;
+};
+
+type FleetContextualSuggestionProps = {
+  className?: string;
+  title: string;
+  detail?: string;
+  icon?: ReactNode;
+  action: FleetContextualSuggestionAction;
+  onDismiss?: () => void;
+  testId?: string;
+};
+
+const renderAction = (action: FleetContextualSuggestionAction) => (
+  <Button
+    key={action.label}
+    variant={action.variant ?? variants.primary}
+    size={sizes.compact}
+    className="min-h-8"
+    onClick={action.onClick}
+    disabled={action.disabled}
+    testId={action.testId}
+  >
+    {action.label}
+  </Button>
+);
+
+const FleetContextualSuggestion = ({
+  className,
+  title,
+  detail,
+  icon = <Info width="w-4" />,
+  action,
+  onDismiss,
+  testId = "fleet-contextual-suggestion",
+}: FleetContextualSuggestionProps) => (
+  <div
+    className={clsx(
+      "flex flex-col gap-4 rounded-lg border border-border-5 bg-surface-elevated-base p-4 shadow-50 tablet:flex-row tablet:items-center tablet:justify-between",
+      className,
+    )}
+    data-testid={testId}
+  >
+    <div className="flex min-w-0 gap-3">
+      <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-core-primary-5 text-text-primary-70">
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <div className="text-emphasis-300 text-text-primary">{title}</div>
+        {detail ? <div className="mt-1 text-300 text-text-primary-70">{detail}</div> : null}
+      </div>
+    </div>
+    <div className="flex shrink-0 flex-wrap items-center gap-2 pl-11 tablet:justify-end tablet:pl-0">
+      {renderAction(action)}
+      {onDismiss ? (
+        <Button
+          variant={variants.ghost}
+          size={sizes.compact}
+          ariaLabel="Dismiss suggestion"
+          className="min-h-8"
+          prefixIcon={<DismissTiny />}
+          onClick={onDismiss}
+          testId={`${testId}-dismiss`}
+        />
+      ) : null}
+    </div>
+  </div>
+);
+
+export default FleetContextualSuggestion;

client/src/protoFleet/features/fleetManagement/components/RowActionsMenu/RowActionsMenu.tsx

@@ -1,4 +1,5 @@
 import { Fragment, type ReactNode, useCallback, useEffect, useState } from "react";
+import clsx from "clsx";
 
 import { Ellipsis } from "@/shared/assets/icons";
 import { iconSizes } from "@/shared/assets/icons/constants";
@@ -19,6 +20,7 @@ export interface RowAction {
   showGroupDivider?: boolean;
   hidden?: boolean;
   disabled?: boolean;
+  danger?: boolean;
   testId?: string;
 }
 
@@ -104,7 +106,7 @@ const RowActionsMenuInner = ({
     setPopoverRenderMode("portal-fixed");
   }, [setPopoverRenderMode]);
 
-  // Disabled hard-closes; re-enable doesn't resurrect — operator must reopen.
+  // Disabled hard-closes; re-enable doesn't resurrect, operator must reopen.
   const open = isOpen && !disabled;
 
   const setMenuOpen = useCallback(
@@ -146,6 +148,7 @@ const RowActionsMenuInner = ({
         <ActionSheet
           items={visibleActions.map((action) => ({
             disabled: action.disabled,
+            danger: action.danger,
             icon: action.icon,
             label: action.label,
             onClick: action.onClick,
@@ -178,7 +181,7 @@ const RowActionsMenuInner = ({
             <Fragment key={action.testId ?? `${action.label}-${index}`}>
               <div className="px-4">
                 <Row
-                  className="text-emphasis-300"
+                  className={clsx("text-emphasis-300", action.danger && "text-intent-critical-fill")}
                   prefixIcon={action.icon}
                   testId={action.testId}
                   onClick={() => {