From dbb936e623359ab32b5f30f71d3dab2915efd596 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 13 Jun 2026 23:35:23 +0100
Subject: [PATCH] Converge standalone machine actions on ActionIconButton

---
 .../subsystems/frontend-primitives.md         |  3 ++
 .../internal/subsystems/unified-resources.md  |  5 +++
 .../scripts/shared-template-registry.json     | 32 ++++++++++++++++++-
 .../SharedPrimitives.guardrails.test.ts       | 29 +++++++++++++++++
 .../standalone/AgentsMachinesTable.tsx        | 12 +++----
 5 files changed, 74 insertions(+), 7 deletions(-)

diff --git a/docs/release-control/v6/internal/subsystems/frontend-primitives.md b/docs/release-control/v6/internal/subsystems/frontend-primitives.md
index 8cd2c4c97..0601ac585 100644
--- a/docs/release-control/v6/internal/subsystems/frontend-primitives.md
+++ b/docs/release-control/v6/internal/subsystems/frontend-primitives.md
@@ -557,6 +557,9 @@ not a replacement status card, CTA band, or page-local nested card.
    disabled treatment, title fallback, and accessible name wiring must come
    from that shared primitive rather than page-local `<button>` plus inline SVG
    shells.
+   Standalone machine row action triggers follow the same rule: the Machines
+   table owns remove-agent semantics and menu placement, while
+   `ActionIconButton` owns the compact muted trigger chrome.
    AI Chat follows that same boundary for drawer header controls, session row
    actions, transcript fallback close/download actions, activity-dock queued
    follow-up controls, composer send, footer help/route actions, and compact
diff --git a/docs/release-control/v6/internal/subsystems/unified-resources.md b/docs/release-control/v6/internal/subsystems/unified-resources.md
index bbcfbe818..7583a64dc 100644
--- a/docs/release-control/v6/internal/subsystems/unified-resources.md
+++ b/docs/release-control/v6/internal/subsystems/unified-resources.md
@@ -913,6 +913,11 @@ AI-only summary payloads, or page-local heuristics.
     provider-owned nodes must not become machine-page members through
     hostname, `agent` platform scope, or agent telemetry alone; those facts
     surface as facets on the owning provider page.
+    `AgentsMachinesTable.tsx` may own row membership, resource-derived menu
+    eligibility, and remove-agent semantics for these projected rows, but the
+    compact row action trigger chrome stays under the frontend-primitives
+    `ActionIconButton` boundary rather than becoming a unified-resource-local
+    button shell.
     The default tab for each platform path must point at a sub-tab whose
     canonical unified-resource projection actually populates, and visible
     workflow subtabs must stay evidence-gated by the same canonical row or
diff --git a/frontend-modern/scripts/shared-template-registry.json b/frontend-modern/scripts/shared-template-registry.json
index 9e831b4b3..2e7ae9d76 100644
--- a/frontend-modern/scripts/shared-template-registry.json
+++ b/frontend-modern/scripts/shared-template-registry.json
@@ -1259,7 +1259,8 @@
         { "path": "src/components/Alerts/ResourceTable.tsx" },
         { "path": "src/components/AI/Chat/index.tsx" },
         { "path": "src/components/Settings/RolesPanel.tsx" },
-        { "path": "src/components/Settings/SSOProvidersPanel.tsx" }
+        { "path": "src/components/Settings/SSOProvidersPanel.tsx" },
+        { "path": "src/features/standalone/AgentsMachinesTable.tsx" }
       ],
       "forbiddenPatterns": [
         {
@@ -1306,6 +1307,12 @@
             "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30"
           ]
         },
+        {
+          "path": "src/features/standalone/AgentsMachinesTable.tsx",
+          "patterns": [
+            "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+          ]
+        },
         {
           "path": "src/components/Settings/SSOProvidersPanel.tsx",
           "patterns": [
@@ -3186,6 +3193,29 @@
         "scripts/shared-template-audit.mjs"
       ]
     },
+    {
+      "id": "standalone-agent-machine-action-icon-local-shell",
+      "category": "action-button",
+      "summary": "Standalone machine row action triggers must not recreate local muted h-7 icon-button shells; compose ActionIconButton.",
+      "canonical": {
+        "path": "src/components/shared/Button.tsx",
+        "export": "ActionIconButton"
+      },
+      "scopes": ["src/features/standalone/AgentsMachinesTable.tsx"],
+      "extensions": [".tsx"],
+      "allPatterns": [
+        "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+      ],
+      "legacyReason": "Retired migration debt. Standalone machine action triggers compose ActionIconButton for shared icon-action size, tone, focus, title, and accessible-label behavior.",
+      "allowedPaths": [],
+      "ignoredPaths": ["src/components/shared/Button.test.tsx"],
+      "proof": [
+        "src/components/shared/SharedPrimitives.guardrails.test.ts",
+        "src/components/shared/Button.test.tsx",
+        "src/features/standalone/__tests__/AgentsMachinesTable.test.tsx",
+        "scripts/shared-template-audit.mjs"
+      ]
+    },
     {
       "id": "ai-chat-action-icon-header-local-shell",
       "category": "action-button",
diff --git a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
index a8e3e15a1..060535d9b 100644
--- a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
+++ b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
@@ -2982,6 +2982,9 @@ describe('shared primitive guardrails', () => {
     const alertResourceActionGuard = registry.patternGuards?.find(
       (guard) => guard.id === 'alert-resource-action-local-svg-button-shell',
     );
+    const standaloneAgentMachineActionGuard = registry.patternGuards?.find(
+      (guard) => guard.id === 'standalone-agent-machine-action-icon-local-shell',
+    );
     const aiChatActionIconHeaderGuard = registry.patternGuards?.find(
       (guard) => guard.id === 'ai-chat-action-icon-header-local-shell',
     );
@@ -3835,6 +3838,7 @@ describe('shared primitive guardrails', () => {
       'src/components/AI/Chat/index.tsx',
       'src/components/Settings/RolesPanel.tsx',
       'src/components/Settings/SSOProvidersPanel.tsx',
+      'src/features/standalone/AgentsMachinesTable.tsx',
     ]);
     expect(actionIconRule?.forbiddenPatterns).toEqual(
       expect.arrayContaining([
@@ -3886,6 +3890,12 @@ describe('shared primitive guardrails', () => {
             'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
           ]),
         }),
+        expect.objectContaining({
+          path: 'src/features/standalone/AgentsMachinesTable.tsx',
+          patterns: expect.arrayContaining([
+            'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60',
+          ]),
+        }),
         expect.objectContaining({
           path: 'src/components/Settings/SSOProvidersPanel.tsx',
           patterns: expect.arrayContaining([
@@ -3913,6 +3923,20 @@ describe('shared primitive guardrails', () => {
       'src/components/shared/Button.test.tsx',
       'src/components/shared/SharedPrimitives.guardrails.test.ts',
     ]);
+    expect(standaloneAgentMachineActionGuard?.canonical?.path).toBe(
+      'src/components/shared/Button.tsx',
+    );
+    expect(standaloneAgentMachineActionGuard?.canonical?.export).toBe('ActionIconButton');
+    expect(standaloneAgentMachineActionGuard?.allPatterns).toEqual([
+      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60',
+    ]);
+    expect(standaloneAgentMachineActionGuard?.scopes).toEqual([
+      'src/features/standalone/AgentsMachinesTable.tsx',
+    ]);
+    expect(standaloneAgentMachineActionGuard?.allowedPaths ?? []).toHaveLength(0);
+    expect(standaloneAgentMachineActionGuard?.ignoredPaths).toEqual([
+      'src/components/shared/Button.test.tsx',
+    ]);
     for (const guard of [
       aiChatActionIconHeaderGuard,
       aiChatActionIconAccentGuard,
@@ -4079,6 +4103,11 @@ describe('shared primitive guardrails', () => {
     ]) {
       expect(aiChatSource).not.toContain(retiredActionIconShell);
     }
+    expect(agentsMachinesTableSource).toContain('@/components/shared/Button');
+    expect(agentsMachinesTableSource).toContain('ActionIconButton');
+    expect(agentsMachinesTableSource).not.toContain(
+      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60',
+    );
     expect(resourceDetailDrawerDebugTabSource).toContain('@/components/shared/Button');
     expect(resourceDetailDrawerDebugTabSource).not.toContain(
       'rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium text-base-content',
diff --git a/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx b/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx
index bccd6e049..c0e7c4eb9 100644
--- a/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx
+++ b/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx
@@ -17,6 +17,7 @@ import { MonitoringAPI } from '@/api/monitoring';
 import { EnhancedCPUBar } from '@/components/Workloads/EnhancedCPUBar';
 import { StackedDiskBar } from '@/components/Workloads/StackedDiskBar';
 import { StackedMemoryBar } from '@/components/Workloads/StackedMemoryBar';
+import { ActionIconButton } from '@/components/shared/Button';
 import { ColumnPicker } from '@/components/shared/ColumnPicker';
 import { StatusDot } from '@/components/shared/StatusDot';
 import { TemperatureGauge } from '@/components/shared/TemperatureGauge';
@@ -720,12 +721,11 @@ const AgentMachineActionsCell: Component<{
         if (event.key === 'Escape' && props.menuOpen) props.onToggleMenu();
       }}
     >
-      <button
+      <ActionIconButton
         ref={triggerRef}
-        type="button"
-        class="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
-        title="Machine actions"
-        aria-label={`Machine actions for ${props.name}`}
+        label={`Machine actions for ${props.name}`}
+        tone="muted"
+        size="sm"
         aria-haspopup="menu"
         aria-expanded={props.menuOpen ? 'true' : 'false'}
         onClick={(event) => {
@@ -735,7 +735,7 @@ const AgentMachineActionsCell: Component<{
         }}
       >
         <MoreHorizontalIcon class="h-3.5 w-3.5" />
-      </button>
+      </ActionIconButton>
 
       <Show when={props.menuOpen}>
         <Portal mount={document.body}>