diff --git a/web-ui/app/_components/AgentUnavailableBanner.tsx b/web-ui/app/_components/AgentUnavailableBanner.tsx
index ef4c6dc08..7de7cc735 100644
--- a/web-ui/app/_components/AgentUnavailableBanner.tsx
+++ b/web-ui/app/_components/AgentUnavailableBanner.tsx
@@ -78,6 +78,7 @@ export function AgentUnavailableBanner(
         <p className="mt-2 text-[color:var(--danger)]">{error}</p>
       )}
       <div className="mt-3 flex gap-2">
+        {/* eslint-disable-next-line no-restricted-syntax -- warning-outline action; §10 has no warning variant */}
         <button
           type="button"
           className="rounded border border-[color:var(--warning)] bg-[color:var(--bg-elevated)] px-3 py-1 text-xs font-medium text-[color:var(--warning)] hover:bg-[color:var(--warning)]/10 disabled:opacity-50"
@@ -86,6 +87,7 @@ export function AgentUnavailableBanner(
         >
           {t('actionReSnapshot')}
         </button>
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke filled danger (bg-elevated); §4.2 danger variant is transparent */}
         <button
           type="button"
           className="rounded border border-[color:var(--danger-edge)] bg-[color:var(--bg-elevated)] px-3 py-1 text-xs font-medium text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8 disabled:opacity-50"
diff --git a/web-ui/app/_components/AuthBadge.tsx b/web-ui/app/_components/AuthBadge.tsx
index e5d21fd73..5f2356a84 100644
--- a/web-ui/app/_components/AuthBadge.tsx
+++ b/web-ui/app/_components/AuthBadge.tsx
@@ -180,6 +180,7 @@ export function AuthBadge(): React.ReactElement | null {
               </div>
             </div>
             <div className="border-t border-[color:var(--border)] pt-2">
+              {/* eslint-disable-next-line no-restricted-syntax -- justify-between menu row with bespoke spinner, not a §4.2 CTA */}
               <button
                 type="button"
                 onClick={handleLogout}
diff --git a/web-ui/app/_components/ChatTabs.tsx b/web-ui/app/_components/ChatTabs.tsx
index f234f82fd..125c78640 100644
--- a/web-ui/app/_components/ChatTabs.tsx
+++ b/web-ui/app/_components/ChatTabs.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { useTranslations } from 'next-intl';
 import type { ChatSession } from '../_lib/chatSessions';
+import { Button } from './ui/Button';
 import {
   isStreamActive,
   useStreamRecord,
@@ -67,14 +68,15 @@ export function ChatTabs({
           disabled={disabled === true && session.id === activeId}
         />
       ))}
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        size="sm"
         onClick={onCreate}
-        className="ml-1 shrink-0 rounded border border-[color:var(--border)] px-2 py-1 font-medium text-[color:var(--fg)] transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--bg-elevated)]"
+        className="ml-1 shrink-0"
         title={t('newChatTitle')}
       >
         + {t('newChat')}
-      </button>
+      </Button>
       </div>
       <StreamAnnouncer sessions={sessions} activeId={activeId} />
     </>
@@ -349,6 +351,7 @@ function Tab({
         </>
       )}
       {canClose && !editing && (
+        // eslint-disable-next-line no-restricted-syntax -- icon-only chrome (× close glyph)
         <button
           type="button"
           onClick={onClickClose}
diff --git a/web-ui/app/_components/CreateIssueButton.tsx b/web-ui/app/_components/CreateIssueButton.tsx
index 41a9afef1..6b2aefdc2 100644
--- a/web-ui/app/_components/CreateIssueButton.tsx
+++ b/web-ui/app/_components/CreateIssueButton.tsx
@@ -23,6 +23,7 @@ import {
   initDiagnosticsCapture,
 } from '../_lib/diagnosticsBuffer';
 import { Markdown } from './Markdown';
+import { Button } from './ui/Button';
 
 const CATEGORIES: readonly IssueCategory[] = ['bug', 'feature', 'improvement'];
 const MAX_TEXT = 5000;
@@ -324,6 +325,7 @@ export function CreateIssueButton(): React.ReactElement {
                 ? t('previewTitle')
                 : t('dialogTitle')}
           </h2>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only modal close chrome, not a §4.2 Button candidate */}
           <button
             type="button"
             onClick={close}
@@ -350,6 +352,7 @@ export function CreateIssueButton(): React.ReactElement {
                     ? t('connectedAs', { login: status.login })
                     : t('repoNote')}
                   {' · '}
+                  {/* eslint-disable-next-line no-restricted-syntax -- inline text link (disconnect), not a §4.2 Button candidate */}
                   <button
                     type="button"
                     onClick={() => void onDisconnect()}
@@ -387,14 +390,16 @@ export function CreateIssueButton(): React.ReactElement {
                   <span className="text-[color:var(--fg)]">
                     {t('connectIntro')}
                   </span>
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="shrink-0"
                     onClick={() => void onConnect()}
-                    disabled={connecting}
-                    className="shrink-0 rounded border border-[color:var(--border-strong)] px-3 py-1 text-[color:var(--fg-strong)] hover:bg-[color:var(--bg-inverse)] hover:text-[color:var(--fg-on-dark)] disabled:opacity-50"
+                    busy={connecting}
+                    busyLabel={t('connecting')}
                   >
-                    {connecting ? t('connecting') : t('connectGithub')}
-                  </button>
+                    {t('connectGithub')}
+                  </Button>
                 </div>
               )}
             </div>
@@ -505,6 +510,7 @@ export function CreateIssueButton(): React.ReactElement {
                   </span>
                   <div className="flex gap-1">
                     {(['edit', 'preview'] as const).map((tab) => (
+                      // eslint-disable-next-line no-restricted-syntax -- segmented tab selector (edit/preview), not a §4.2 Button candidate
                       <button
                         key={tab}
                         type="button"
@@ -597,68 +603,61 @@ export function CreateIssueButton(): React.ReactElement {
         <div className="flex justify-end gap-2 border-t border-[color:var(--border)] px-4 py-3">
           {step === 'compose' && (
             <>
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="sm"
                 onClick={close}
                 disabled={busy}
-                className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
               >
                 {t('cancel')}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                size="sm"
                 onClick={() => void onContinue()}
-                disabled={busy || text.trim().length === 0}
-                className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)] disabled:opacity-50"
+                disabled={text.trim().length === 0}
+                busy={busy}
+                busyLabel={t('reformulating')}
               >
-                {busy ? t('reformulating') : t('reformulate')}
-              </button>
+                {t('reformulate')}
+              </Button>
             </>
           )}
           {step === 'preview' && (
             <>
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                size="sm"
                 onClick={() => {
                   setStep('compose');
                   setError(null);
                 }}
                 disabled={busy}
-                className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
               >
                 {t('back')}
-              </button>
-              <button
-                type="button"
+              </Button>
+              <Button
+                size="sm"
                 onClick={() => void onCreate()}
                 disabled={
-                  busy ||
                   !connected ||
                   title.trim().length === 0 ||
                   body.trim().length === 0
                 }
-                className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)] disabled:opacity-50"
+                busy={busy}
+                busyLabel={t('creating')}
               >
-                {busy ? t('creating') : t('create')}
-              </button>
+                {t('create')}
+              </Button>
             </>
           )}
           {step === 'done' && (
             <>
-              <button
-                type="button"
-                onClick={reset}
-                className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)]"
-              >
+              <Button variant="secondary" size="sm" onClick={reset}>
                 {t('createAnother')}
-              </button>
-              <button
-                type="button"
-                onClick={close}
-                className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)]"
-              >
+              </Button>
+              <Button size="sm" onClick={close}>
                 {t('dismiss')}
-              </button>
+              </Button>
             </>
           )}
         </div>
@@ -668,6 +667,7 @@ export function CreateIssueButton(): React.ReactElement {
 
   return (
     <>
+      {/* eslint-disable-next-line no-restricted-syntax -- icon-only header trigger (GitHub glyph), not a §4.2 Button candidate */}
       <button
         type="button"
         onClick={() => {
diff --git a/web-ui/app/_components/IssueReportCard.tsx b/web-ui/app/_components/IssueReportCard.tsx
index 701a68399..b7954b5e1 100644
--- a/web-ui/app/_components/IssueReportCard.tsx
+++ b/web-ui/app/_components/IssueReportCard.tsx
@@ -227,6 +227,7 @@ function PrimaryButton({
   onClick: () => void;
 }): React.ReactElement {
   return (
+    // eslint-disable-next-line no-restricted-syntax -- warning-filled action; §4.2 has no warning variant
     <button
       type="button"
       onClick={onClick}
diff --git a/web-ui/app/_components/KgWalkPane.tsx b/web-ui/app/_components/KgWalkPane.tsx
index 43a3c1623..5a3fb702e 100644
--- a/web-ui/app/_components/KgWalkPane.tsx
+++ b/web-ui/app/_components/KgWalkPane.tsx
@@ -269,6 +269,7 @@ export function KgWalkPane({ walk }: Props): React.ReactElement | null {
   // Launcher chip when the pane is closed.
   if (!win.open) {
     return (
+      // eslint-disable-next-line no-restricted-syntax -- bespoke accent pill, no §4.2 variant
       <button
         type="button"
         onClick={win.openWindow}
@@ -326,6 +327,7 @@ export function KgWalkPane({ walk }: Props): React.ReactElement | null {
               </span>
             )}
           </span>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (maximize/restore glyph) */}
           <button
             type="button"
             onClick={win.toggleMaximized}
@@ -339,6 +341,7 @@ export function KgWalkPane({ walk }: Props): React.ReactElement | null {
               <Maximize2 size={14} aria-hidden />
             )}
           </button>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (× close glyph) */}
           <button
             type="button"
             onClick={win.close}
diff --git a/web-ui/app/_components/Nav.tsx b/web-ui/app/_components/Nav.tsx
index 2592fb130..af107b75a 100644
--- a/web-ui/app/_components/Nav.tsx
+++ b/web-ui/app/_components/Nav.tsx
@@ -364,6 +364,7 @@ function ClusterDropdown({
       onMouseEnter={hoverOpen}
       onMouseLeave={hoverClose}
     >
+      {/* eslint-disable-next-line no-restricted-syntax -- menu trigger (aria-haspopup/aria-expanded), text-link styling */}
       <button
         type="button"
         aria-haspopup="menu"
diff --git a/web-ui/app/_components/PlanDagPane.tsx b/web-ui/app/_components/PlanDagPane.tsx
index 80f39540b..e5444e49d 100644
--- a/web-ui/app/_components/PlanDagPane.tsx
+++ b/web-ui/app/_components/PlanDagPane.tsx
@@ -82,6 +82,7 @@ export function PlanDagPane({ plan }: Props): React.ReactElement | null {
   // Launcher chip when the pane is closed.
   if (!open) {
     return (
+      // eslint-disable-next-line no-restricted-syntax -- bespoke accent pill, no §4.2 variant
       <button
         type="button"
         onClick={openWindow}
@@ -130,6 +131,7 @@ export function PlanDagPane({ plan }: Props): React.ReactElement | null {
               {t('badgeProgress', { done: doneCount, total: totalSteps })}
             </span>
           </span>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (maximize/restore glyph) */}
           <button
             type="button"
             onClick={toggleMaximized}
@@ -143,6 +145,7 @@ export function PlanDagPane({ plan }: Props): React.ReactElement | null {
               <Maximize2 size={14} aria-hidden />
             )}
           </button>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (× close glyph) */}
           <button
             type="button"
             onClick={close}
diff --git a/web-ui/app/_components/SessionWatcher.tsx b/web-ui/app/_components/SessionWatcher.tsx
index a6cab41d4..8fd7e8fb3 100644
--- a/web-ui/app/_components/SessionWatcher.tsx
+++ b/web-ui/app/_components/SessionWatcher.tsx
@@ -213,6 +213,7 @@ function SessionWarningCard({
         {t('warningBody', { time: formatClock(remaining) })}
       </p>
       <div className="mt-4 flex items-center gap-2">
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke ink-fill CTA (paper/ink palette + uppercase tracking), not §4.2 primary */}
         <button
           type="button"
           onClick={relogin}
@@ -220,6 +221,7 @@ function SessionWarningCard({
         >
           {t('warningCta')}
         </button>
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke bordered dismiss (paper/ink palette + uppercase tracking), not §4.2 secondary */}
         <button
           type="button"
           onClick={onDismiss}
@@ -269,6 +271,7 @@ function SessionExpiredOverlay(): React.ReactElement {
         <p className="mt-2 text-[13px] leading-relaxed text-[color:var(--muted-ink)]">
           {t('expiredBody')}
         </p>
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke ink-fill CTA (paper/ink palette + uppercase tracking), not §4.2 primary */}
         <button
           ref={ctaRef}
           type="button"
diff --git a/web-ui/app/_components/admin/SkillEditor.tsx b/web-ui/app/_components/admin/SkillEditor.tsx
index 2e283c169..d793520d3 100644
--- a/web-ui/app/_components/admin/SkillEditor.tsx
+++ b/web-ui/app/_components/admin/SkillEditor.tsx
@@ -20,6 +20,7 @@ import {
   supportDetail,
 } from '../../_lib/scanFailure';
 import { Field, inputCls, SaveButton } from '../../admin/builder/panels/InspectorControls';
+import { Button } from '../ui/Button';
 import { SkillCapabilityBindings } from './SkillCapabilityBindings';
 import { SkillVerdictBadge } from './SkillVerdictBadge';
 
@@ -146,24 +147,24 @@ export function SkillEditor({
       <div className="flex items-center gap-2">
         <SkillVerdictBadge severity={severity} />
         {canRunDeepScan && (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void runDeepScan()}
             disabled={scanPending}
-            className="rounded-md border border-[color:var(--border)] px-2 py-0.5 text-xs text-[color:var(--fg-muted)]"
           >
             {t('verdict.runDeepScan')}
-          </button>
+          </Button>
         )}
         {showWhy && !alreadyAcked && (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            size="sm"
             onClick={() => void acknowledge()}
             disabled={ackPending}
-            className="rounded-md border border-[color:var(--border)] px-2 py-0.5 text-xs text-[color:var(--fg-muted)]"
           >
             {t('verdict.acknowledge')}
-          </button>
+          </Button>
         )}
         {alreadyAcked && (
           <span className="text-xs text-[color:var(--fg-muted)]">
@@ -254,13 +255,9 @@ export function SkillEditor({
           pending={pending}
           label={willFork ? t('editor.forkAndSave') : t('editor.save')}
         />
-        <button
-          type="button"
-          onClick={download}
-          className="rounded-md border border-[color:var(--border)] px-3 py-1.5 text-sm text-[color:var(--fg-muted)]"
-        >
+        <Button variant="secondary" onClick={download}>
           {t('editor.export')}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/web-ui/app/_components/admin/SkillImportModal.tsx b/web-ui/app/_components/admin/SkillImportModal.tsx
index b262ee2f5..00c3f2bc8 100644
--- a/web-ui/app/_components/admin/SkillImportModal.tsx
+++ b/web-ui/app/_components/admin/SkillImportModal.tsx
@@ -9,6 +9,7 @@ import {
   type SkillImportResult,
 } from '../../_lib/agentBuilder';
 import { supportDetail } from '../../_lib/scanFailure';
+import { Button } from '../ui/Button';
 
 /**
  * Import a SKILL.md (paste or file) into the skills registry. Shows a dry-run
@@ -77,6 +78,7 @@ export function SkillImportModal({
         <h2 className="text-lg font-semibold text-[color:var(--fg-strong)]">{t('title')}</h2>
         <p className="text-xs text-[color:var(--fg-muted)]">{t('hint')}</p>
 
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke dashed file-dropzone affordance, not a §4.2 Button variant */}
         <button
           type="button"
           onClick={() => inputRef.current?.click()}
@@ -146,31 +148,20 @@ export function SkillImportModal({
         )}
 
         <div className="flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md border border-[color:var(--border)] px-3 py-1.5 text-sm text-[color:var(--fg-muted)]"
-          >
+          <Button variant="secondary" onClick={onClose}>
             {t('cancel')}
-          </button>
+          </Button>
           {!preview ? (
-            <button
-              type="button"
+            <Button
               disabled={busy || !raw.trim()}
               onClick={() => void runPreview()}
-              className="rounded-md bg-[color:var(--accent)] px-3 py-1.5 text-sm text-white disabled:opacity-50"
             >
               {t('preview')}
-            </button>
+            </Button>
           ) : (
-            <button
-              type="button"
-              disabled={busy}
-              onClick={() => void confirm()}
-              className="rounded-md bg-[color:var(--accent)] px-3 py-1.5 text-sm text-white disabled:opacity-50"
-            >
+            <Button disabled={busy} onClick={() => void confirm()}>
               {t('confirm')}
-            </button>
+            </Button>
           )}
         </div>
       </div>
diff --git a/web-ui/app/_components/admin/SkillsRegistry.tsx b/web-ui/app/_components/admin/SkillsRegistry.tsx
index 96cf98df0..2c31ecfc7 100644
--- a/web-ui/app/_components/admin/SkillsRegistry.tsx
+++ b/web-ui/app/_components/admin/SkillsRegistry.tsx
@@ -13,6 +13,7 @@ import {
   type SkillResource,
   type SkillVerdictSeverity,
 } from '../../_lib/agentBuilder';
+import { Button } from '../ui/Button';
 import { SkillEditor } from './SkillEditor';
 import { SkillImportModal } from './SkillImportModal';
 import { SKILL_VERDICT_LABEL_KEY, SkillVerdictBadge } from './SkillVerdictBadge';
@@ -142,13 +143,9 @@ export function SkillsRegistry({
               </option>
             ))}
           </select>
-          <button
-            type="button"
-            onClick={() => setImporting(true)}
-            className="shrink-0 rounded-md bg-[color:var(--accent)] px-3 py-2 text-sm text-white"
-          >
+          <Button className="shrink-0" onClick={() => setImporting(true)}>
             {t('import')}
-          </button>
+          </Button>
         </div>
         {filtered.length === 0 ? (
           <p className="text-sm text-[color:var(--fg-muted)]">{t('empty')}</p>
@@ -156,6 +153,7 @@ export function SkillsRegistry({
           <ul className="flex flex-col gap-1">
             {filtered.map((s) => (
               <li key={s.id}>
+                {/* eslint-disable-next-line no-restricted-syntax -- selectable list row (active/selected state), not a §4.2 Button candidate */}
                 <button
                   type="button"
                   onClick={() => void select(s)}
@@ -205,18 +203,18 @@ export function SkillsRegistry({
                   </div>
                 )}
               </div>
-              <button
-                type="button"
+              <Button
+                variant="danger"
+                className="shrink-0"
                 onClick={() => {
                   const totalUsedBy =
                     (detail?.usedByCount ?? 0) + (detail?.usedByAgentsCount ?? 0);
                   if (totalUsedBy > 0) setConfirmingDelete(true);
                   else void onDelete(selected.id);
                 }}
-                className="shrink-0 rounded-md border border-[color:var(--danger-edge)] px-3 py-1.5 text-sm text-[color:var(--danger)]"
               >
                 {t('delete')}
-              </button>
+              </Button>
             </div>
             {confirmingDelete && (
               <div className="flex items-center justify-between gap-2 rounded-md border border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 px-3 py-2 text-xs text-[color:var(--danger)]">
@@ -226,20 +224,20 @@ export function SkillsRegistry({
                   })}
                 </span>
                 <span className="flex shrink-0 gap-2">
-                  <button
-                    type="button"
+                  <Button
+                    variant="danger"
+                    size="sm"
                     onClick={() => void onDelete(selected.id)}
-                    className="rounded-md border border-[color:var(--danger-edge)] px-2 py-1"
                   >
                     {t('confirmDeleteAction')}
-                  </button>
-                  <button
-                    type="button"
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
                     onClick={() => setConfirmingDelete(false)}
-                    className="rounded-md border border-[color:var(--border)] px-2 py-1 text-[color:var(--fg-muted)]"
                   >
                     {t('cancel')}
-                  </button>
+                  </Button>
                 </span>
               </div>
             )}
diff --git a/web-ui/app/_components/chat/AgentDetailsModal.tsx b/web-ui/app/_components/chat/AgentDetailsModal.tsx
index 63676a361..14b0fac55 100644
--- a/web-ui/app/_components/chat/AgentDetailsModal.tsx
+++ b/web-ui/app/_components/chat/AgentDetailsModal.tsx
@@ -91,6 +91,7 @@ export function AgentDetailsModal({
                   {agent.id} · {t('callCount', { count: calls.length })}
                 </p>
               </div>
+              {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (× close glyph) */}
               <button
                 type="button"
                 onClick={onClose}
@@ -123,6 +124,7 @@ export function AgentDetailsModal({
               <p className="text-[11px] leading-relaxed text-[color:var(--fg-muted)]">
                                 {t('footerNote')}
               </p>
+              {/* eslint-disable-next-line no-restricted-syntax -- bespoke ghost-pill close (bg-elevated hover, keeps fg-strong), not §4.2 ghost */}
               <button
                 type="button"
                 onClick={onClose}
diff --git a/web-ui/app/_components/chat/AutoPromotedBanner.tsx b/web-ui/app/_components/chat/AutoPromotedBanner.tsx
index f41449e1d..2e56262dc 100644
--- a/web-ui/app/_components/chat/AutoPromotedBanner.tsx
+++ b/web-ui/app/_components/chat/AutoPromotedBanner.tsx
@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import type { MemorableKind } from '../../_lib/api';
+import { Button } from '../ui/Button';
 
 interface Props {
   /** External_id of the auto-promoted MK (e.g. `mk:<uuid>`). */
@@ -80,15 +81,16 @@ export function AutoPromotedBanner({
       >
         {t('view')}
       </a>
-      <button
-        type="button"
+      <Button
+        variant="danger"
         onClick={() => void discard()}
-        disabled={busy}
-        className="rounded border border-[color:var(--danger-edge)] px-1 py-0.5 text-[10px] text-[color:var(--danger)] hover:bg-[color:var(--danger)]/8 disabled:opacity-50"
+        busy={busy}
+        busyLabel={t('discarding')}
         title={t('discardTitle')}
+        className="px-1 py-0.5 text-[10px]"
       >
-        {busy ? t('discarding') : t('discard')}
-      </button>
+        {t('discard')}
+      </Button>
       {error !== null && (
         <span className="text-[color:var(--danger)]">⚠ {error}</span>
       )}
diff --git a/web-ui/app/_components/chat/DirectLineStickyBanner.tsx b/web-ui/app/_components/chat/DirectLineStickyBanner.tsx
index 108c29be4..ce5267c1c 100644
--- a/web-ui/app/_components/chat/DirectLineStickyBanner.tsx
+++ b/web-ui/app/_components/chat/DirectLineStickyBanner.tsx
@@ -39,6 +39,7 @@ export function DirectLineStickyBanner({
       <span className="text-[color:var(--accent)]">
         {t('stickyActive', { label: session.label })}
       </span>
+      {/* eslint-disable-next-line no-restricted-syntax -- bespoke accent-ring action (ring-1 accent), no §4.2 variant */}
       <button
         type="button"
         onClick={onExit}
diff --git a/web-ui/app/_components/chat/NudgeCard.tsx b/web-ui/app/_components/chat/NudgeCard.tsx
index 152550518..996cd9c00 100644
--- a/web-ui/app/_components/chat/NudgeCard.tsx
+++ b/web-ui/app/_components/chat/NudgeCard.tsx
@@ -127,6 +127,7 @@ export function NudgeCard({
       </p>
       <div className="mt-2 flex items-center gap-2">
         {nudge.cta ? (
+          // eslint-disable-next-line no-restricted-syntax -- warning-filled CTA; §4.2 has no warning variant
           <button
             type="button"
             disabled={acknowledged}
@@ -144,6 +145,7 @@ export function NudgeCard({
             {acknowledged ? t('ackTriggered') : nudge.cta.label}
           </button>
         ) : null}
+        {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare text-color, hover underline, no border/bg) */}
         <button
           type="button"
           onClick={() => onSuppressClick?.(nudge.id)}
diff --git a/web-ui/app/_components/chat/SaveMemoryButton.tsx b/web-ui/app/_components/chat/SaveMemoryButton.tsx
index 25501f50b..575681ce6 100644
--- a/web-ui/app/_components/chat/SaveMemoryButton.tsx
+++ b/web-ui/app/_components/chat/SaveMemoryButton.tsx
@@ -9,6 +9,7 @@ import {
   type MemorableKind,
 } from '../../_lib/api';
 import type { PalaiaExcerpt } from '../../_lib/chatSessions';
+import { Button } from '../ui/Button';
 
 const KINDS: readonly MemorableKind[] = [
   'decision',
@@ -168,6 +169,7 @@ export function SaveMemoryButton({
 
   return (
     <>
+      {/* eslint-disable-next-line no-restricted-syntax -- transparent bordered chip (--fg-muted text, no bg-elevated fill); diverges from §4.2 secondary */}
       <button
         type="button"
         onClick={() => {
@@ -213,6 +215,7 @@ export function SaveMemoryButton({
                   </span>
                 )}
               </div>
+              {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (✕ close glyph) */}
               <button
                 type="button"
                 onClick={close}
@@ -286,6 +289,7 @@ export function SaveMemoryButton({
                     <ul className="flex flex-col gap-1">
                       {palaiaExcerpt.excerpts.map((excerpt, idx) => (
                         <li key={`${idx}-${excerpt.slice(0, 24)}`}>
+                          {/* eslint-disable-next-line no-restricted-syntax -- full-width selection tile/row (text-left excerpt insert) */}
                           <button
                             type="button"
                             onClick={() => insertExcerpt(excerpt)}
@@ -330,22 +334,23 @@ export function SaveMemoryButton({
                 )}
 
                 <div className="flex justify-end gap-2">
-                  <button
-                    type="button"
+                  <Button
+                    variant="secondary"
+                    size="sm"
                     onClick={close}
                     disabled={busy}
-                    className="rounded border border-[color:var(--border)] px-3 py-1 text-xs hover:border-[color:var(--border-strong)] disabled:opacity-50"
                   >
                     {t('cancel')}
-                  </button>
-                  <button
-                    type="button"
+                  </Button>
+                  <Button
+                    size="sm"
                     onClick={() => void submit()}
-                    disabled={busy || summary.trim().length === 0}
-                    className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)] disabled:opacity-50"
+                    disabled={summary.trim().length === 0}
+                    busy={busy}
+                    busyLabel={t('saving')}
                   >
-                    {busy ? t('saving') : t('save')}
-                  </button>
+                    {t('save')}
+                  </Button>
                 </div>
               </>
             ) : (
@@ -372,13 +377,9 @@ export function SaveMemoryButton({
                   >
                     {t('openDetail')}
                   </a>
-                  <button
-                    type="button"
-                    onClick={close}
-                    className="rounded bg-[color:var(--bg-inverse)] px-3 py-1 text-xs text-[color:var(--fg-on-dark)] hover:bg-[color:var(--fg-muted)]"
-                  >
+                  <Button size="sm" onClick={close}>
                     {t('close')}
-                  </button>
+                  </Button>
                 </div>
               </>
             )}
diff --git a/web-ui/app/_components/dashboard/DashboardOnboarding.tsx b/web-ui/app/_components/dashboard/DashboardOnboarding.tsx
index c5a361b53..fb622861f 100644
--- a/web-ui/app/_components/dashboard/DashboardOnboarding.tsx
+++ b/web-ui/app/_components/dashboard/DashboardOnboarding.tsx
@@ -249,6 +249,7 @@ export function DashboardOnboarding({
   if (hidden) {
     return (
       <div className="flex justify-end">
+        {/* eslint-disable-next-line no-restricted-syntax -- inline text link (re-enable), not a §4.2 Button candidate */}
         <button
           type="button"
           onClick={() => setHiddenPersisted(false)}
@@ -308,6 +309,7 @@ export function DashboardOnboarding({
             })}
           </p>
         </div>
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only dismiss chrome, not a §4.2 Button candidate */}
         <button
           type="button"
           onClick={() => setHiddenPersisted(true)}
@@ -369,6 +371,7 @@ export function DashboardOnboarding({
             <span>
               {t('caseChosen', { name: t(`cases.${selectedCase.id}.name`) })}
             </span>
+            {/* eslint-disable-next-line no-restricted-syntax -- inline text link (change selection), not a §4.2 Button candidate */}
             <button
               type="button"
               onClick={() => setSelectedCaseId(null)}
@@ -488,6 +491,7 @@ function ChooseCase({
         {BUSINESS_CASES.map((c) => {
           const Icon = CASE_ICON[c.id] ?? Briefcase;
           return (
+            // eslint-disable-next-line no-restricted-syntax -- full-card selection tile, not a §4.2 Button candidate
             <button
               key={c.id}
               type="button"
@@ -591,6 +595,7 @@ function BringYourSkills(): React.ReactElement {
             <Hammer className="size-3.5" aria-hidden />
             {t('toBuilder')}
           </Link>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline text link (import another), not a §4.2 Button candidate */}
           <button
             type="button"
             onClick={() => setImporting(true)}
@@ -600,6 +605,7 @@ function BringYourSkills(): React.ReactElement {
           </button>
         </div>
       ) : (
+        // eslint-disable-next-line no-restricted-syntax -- bespoke accent-outline pill CTA; no clean §4.2 variant (ghost has no border, primary is filled), kept per the issue's per-component-pass guidance
         <button
           type="button"
           onClick={() => setImporting(true)}
diff --git a/web-ui/app/_components/devjobs/DevJobPhaseRail.tsx b/web-ui/app/_components/devjobs/DevJobPhaseRail.tsx
index 21bbfe79f..453277c6b 100644
--- a/web-ui/app/_components/devjobs/DevJobPhaseRail.tsx
+++ b/web-ui/app/_components/devjobs/DevJobPhaseRail.tsx
@@ -206,6 +206,7 @@ export function DevJobPhaseRail({
                   className={`h-px w-4 ${idx <= activeIndex ? 'bg-[color:var(--border-strong)]' : 'bg-[color:var(--divider)]'}`}
                 />
               ) : null}
+              {/* eslint-disable-next-line no-restricted-syntax -- stateful segmented selector (role=tab, aria-selected/aria-current) */}
               <button
                 type="button"
                 role="tab"
diff --git a/web-ui/app/_components/mcp/McpConnectModal.tsx b/web-ui/app/_components/mcp/McpConnectModal.tsx
index da6780a53..139d1b881 100644
--- a/web-ui/app/_components/mcp/McpConnectModal.tsx
+++ b/web-ui/app/_components/mcp/McpConnectModal.tsx
@@ -52,6 +52,7 @@ export function McpConnectModal({
           <h2 className="text-base font-semibold text-[color:var(--fg-strong)]">
             {t('mcpAuth.modalTitle', { server: serverName })}
           </h2>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (✕ close glyph) */}
           <button
             type="button"
             onClick={onClose}
diff --git a/web-ui/app/_components/onboarding/OnboardingModal.tsx b/web-ui/app/_components/onboarding/OnboardingModal.tsx
index db795d7a0..24784c938 100644
--- a/web-ui/app/_components/onboarding/OnboardingModal.tsx
+++ b/web-ui/app/_components/onboarding/OnboardingModal.tsx
@@ -89,6 +89,7 @@ export function OnboardingModal({
       aria-modal="true"
       aria-label={t('ariaLabel')}
     >
+      {/* eslint-disable-next-line no-restricted-syntax -- full-screen dismiss backdrop (inset-0 overlay), not a CTA */}
       <button
         type="button"
         onClick={busy ? undefined : () => setDismissed(true)}
@@ -118,6 +119,7 @@ export function OnboardingModal({
               {t('intro', { count: installedCount })}
             </p>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (× close glyph) */}
           <button
             type="button"
             onClick={() => setDismissed(true)}
@@ -162,6 +164,7 @@ export function OnboardingModal({
             {t('exportSuffix')}
           </div>
           {phase.kind === 'done' ? (
+            // eslint-disable-next-line no-restricted-syntax -- bespoke ink-palette CTA (paper/ink + uppercase tracking), not §4.2 variant
             <button
               type="button"
               onClick={() => setDismissed(true)}
@@ -217,6 +220,7 @@ function ProfileGrid({
                 {t('pluginCount', { count: profile.plugin_count })}
               </span>
             </div>
+            {/* eslint-disable-next-line no-restricted-syntax -- bespoke ink-fill CTA (paper/ink + uppercase tracking + manual busy dots), not §4.2 variant */}
             <button
               type="button"
               onClick={() => onApply(profile.id)}
@@ -360,6 +364,7 @@ function ErrorBody({
           <div className="mt-1 break-all text-[11px] font-mono">{message}</div>
         </div>
       </div>
+      {/* eslint-disable-next-line no-restricted-syntax -- bespoke ink-palette CTA (paper/ink + uppercase tracking), not §4.2 variant */}
       <button
         type="button"
         onClick={onRetry}
diff --git a/web-ui/app/_components/store/AdminUiPanel.tsx b/web-ui/app/_components/store/AdminUiPanel.tsx
index 101e5edf1..de790f42c 100644
--- a/web-ui/app/_components/store/AdminUiPanel.tsx
+++ b/web-ui/app/_components/store/AdminUiPanel.tsx
@@ -44,6 +44,7 @@ function useAdminUi(): AdminUiCtx {
 export function AdminUiToggle(): React.ReactElement {
   const { open, toggle, panelId } = useAdminUi();
   return (
+    // eslint-disable-next-line no-restricted-syntax -- stateful toggle/segmented selector (aria-expanded, open/closed variants)
     <button
       type="button"
       onClick={toggle}
diff --git a/web-ui/app/_components/store/CredentialsEditor.tsx b/web-ui/app/_components/store/CredentialsEditor.tsx
index 24c497cac..26e9c3ab9 100644
--- a/web-ui/app/_components/store/CredentialsEditor.tsx
+++ b/web-ui/app/_components/store/CredentialsEditor.tsx
@@ -480,6 +480,7 @@ export function CredentialsEditor({
                   })()
                 )}
                 {isStored && !isMultiselect ? (
+                  // eslint-disable-next-line no-restricted-syntax -- icon-only chrome (size-7 trashcan, Trash2 icon only)
                   <button
                     type="button"
                     onClick={() =>
@@ -786,6 +787,7 @@ function MultiselectField({
           </span>
         ) : null}
         {status === 'loaded' ? (
+          // eslint-disable-next-line no-restricted-syntax -- inline text link (underlined bare text, no border/bg)
           <button
             type="button"
             onClick={() => void load()}
diff --git a/web-ui/app/_components/store/InstallButton.tsx b/web-ui/app/_components/store/InstallButton.tsx
index d31fe0390..d402985ed 100644
--- a/web-ui/app/_components/store/InstallButton.tsx
+++ b/web-ui/app/_components/store/InstallButton.tsx
@@ -526,6 +526,7 @@ function InstalledPanel({
       <PrivacyModePicker pluginId={pluginId} />
 
       {state.kind === 'idle' && (
+        // eslint-disable-next-line no-restricted-syntax -- inline text link (bare text + icon, no border/bg)
         <button
           type="button"
           onClick={() => setState({ kind: 'confirming' })}
@@ -601,6 +602,7 @@ function InstalledPanel({
           <p className="text-[12px] text-[color:var(--danger,#b03030)]">
             {t('uninstallFailed', { message: state.message })}
           </p>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare text, no border/bg) */}
           <button
             type="button"
             onClick={() => setState({ kind: 'idle' })}
@@ -666,6 +668,7 @@ function InstallDrawer({
       aria-modal="true"
       aria-label={t('drawerAria', { name: pluginName })}
     >
+      {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (full-bleed modal backdrop/scrim, no text) */}
       <button
         type="button"
         onClick={onClose}
@@ -697,6 +700,7 @@ function InstallDrawer({
               </p>
             ) : null}
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare uppercase text, no border/bg) */}
           <button
             type="button"
             onClick={onClose}
diff --git a/web-ui/app/_components/store/RequiresWizard.tsx b/web-ui/app/_components/store/RequiresWizard.tsx
index 43222fc9f..e42bc32c7 100644
--- a/web-ui/app/_components/store/RequiresWizard.tsx
+++ b/web-ui/app/_components/store/RequiresWizard.tsx
@@ -119,6 +119,7 @@ export function RequiresWizard({
       aria-modal="true"
       aria-label={t('dialogAria', { name: targetPluginName })}
     >
+      {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (full-bleed modal backdrop/scrim, no text) */}
       <button
         type="button"
         onClick={installing ? undefined : onClose}
@@ -147,6 +148,7 @@ export function RequiresWizard({
               {t('intro')}
             </p>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (close ×, X icon only) */}
           <button
             type="button"
             onClick={onClose}
diff --git a/web-ui/app/_components/store/SelfExtensionPanel.tsx b/web-ui/app/_components/store/SelfExtensionPanel.tsx
index ebdb4d13f..7eae78fda 100644
--- a/web-ui/app/_components/store/SelfExtensionPanel.tsx
+++ b/web-ui/app/_components/store/SelfExtensionPanel.tsx
@@ -356,6 +356,7 @@ export function SelfExtensionPanel({ agentId }: { agentId: string }): React.Reac
                     >
                       {t('confirmDeny')}
                     </Button>
+                    {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare text, no border/bg) */}
                     <button
                       type="button"
                       onClick={() => {
diff --git a/web-ui/app/_components/store/UploadDropzone.tsx b/web-ui/app/_components/store/UploadDropzone.tsx
index 4f10c66c2..a5156e0f1 100644
--- a/web-ui/app/_components/store/UploadDropzone.tsx
+++ b/web-ui/app/_components/store/UploadDropzone.tsx
@@ -242,6 +242,7 @@ function UploadingRow({
           style={{ width: `${pct}%` }}
         />
       </div>
+      {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare text, no border/bg) */}
       <button
         type="button"
         onClick={onCancel}
@@ -291,6 +292,7 @@ function SuccessRow({
         </p>
       )}
       <div className="mt-3 flex gap-3">
+        {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare text, no border/bg) */}
         <button
           type="button"
           onClick={onDismiss}
@@ -323,6 +325,7 @@ function ErrorRow({
         </span>
       </div>
       <p className="mt-2 text-sm text-[color:var(--fg-strong)]">{message}</p>
+      {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare text, no border/bg) */}
       <button
         type="button"
         onClick={onDismiss}
diff --git a/web-ui/app/admin/builder/panels/InspectorPanel.tsx b/web-ui/app/admin/builder/panels/InspectorPanel.tsx
index d66cbb7a8..92865a91a 100644
--- a/web-ui/app/admin/builder/panels/InspectorPanel.tsx
+++ b/web-ui/app/admin/builder/panels/InspectorPanel.tsx
@@ -351,6 +351,7 @@ function PersonaSkillsSection({
                     {s.slug}
                   </span>
                 )}
+                {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (× remove glyph) */}
                 <button
                   type="button"
                   onClick={() => void handleRemove(id)}
diff --git a/web-ui/app/admin/builder/panels/PalettePanel.tsx b/web-ui/app/admin/builder/panels/PalettePanel.tsx
index 82fd7d8ca..c1e1f8c48 100644
--- a/web-ui/app/admin/builder/panels/PalettePanel.tsx
+++ b/web-ui/app/admin/builder/panels/PalettePanel.tsx
@@ -48,6 +48,7 @@ export function PalettePanel({
           {t(`nodes.${kind}`)}
         </div>
       ))}
+      {/* eslint-disable-next-line no-restricted-syntax -- bespoke dashed add affordance, no §4.2 variant */}
       <button
         type="button"
         onClick={() => setImporting(true)}
diff --git a/web-ui/app/admin/dev-platform/_components/ToolCallCard.tsx b/web-ui/app/admin/dev-platform/_components/ToolCallCard.tsx
index 4a6e317f6..d49abae7f 100644
--- a/web-ui/app/admin/dev-platform/_components/ToolCallCard.tsx
+++ b/web-ui/app/admin/dev-platform/_components/ToolCallCard.tsx
@@ -39,6 +39,7 @@ export function ToolCallCard({ entry }: { entry: ToolCallEntry }): React.ReactEl
 
   return (
     <div className="my-1 rounded-md border border-[color:var(--border)] px-2 py-1.5 font-mono text-xs">
+      {/* eslint-disable-next-line no-restricted-syntax -- chevron/expander (aria-expanded) */}
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
diff --git a/web-ui/app/admin/duplicates/[id]/page.tsx b/web-ui/app/admin/duplicates/[id]/page.tsx
index f84c9d1b7..187568b64 100644
--- a/web-ui/app/admin/duplicates/[id]/page.tsx
+++ b/web-ui/app/admin/duplicates/[id]/page.tsx
@@ -165,6 +165,7 @@ export default function DuplicateDetailPage(): React.ReactElement {
               )}
               <div className="grid gap-2 sm:grid-cols-1">
                 {(['keep_a', 'keep_b', 'not_duplicate'] as const).map((r) => (
+                  // eslint-disable-next-line no-restricted-syntax -- selection tile/row (label + description)
                   <button
                     key={r}
                     type="button"
diff --git a/web-ui/app/admin/duplicates/excerpt/[id]/page.tsx b/web-ui/app/admin/duplicates/excerpt/[id]/page.tsx
index 5a76cbcb0..d4de33a37 100644
--- a/web-ui/app/admin/duplicates/excerpt/[id]/page.tsx
+++ b/web-ui/app/admin/duplicates/excerpt/[id]/page.tsx
@@ -171,6 +171,7 @@ export default function ExcerptDuplicateDetailPage(): React.ReactElement {
               )}
               <div className="grid gap-2 sm:grid-cols-1">
                 {(['keep_a', 'keep_b', 'not_duplicate'] as const).map((r) => (
+                  // eslint-disable-next-line no-restricted-syntax -- selection tile/row (label + description)
                   <button
                     key={r}
                     type="button"
diff --git a/web-ui/app/admin/duplicates/page.tsx b/web-ui/app/admin/duplicates/page.tsx
index 21975f334..ae764f9a5 100644
--- a/web-ui/app/admin/duplicates/page.tsx
+++ b/web-ui/app/admin/duplicates/page.tsx
@@ -219,6 +219,7 @@ export default function DuplicatesListPage(): React.ReactElement {
       {/* Slice 12 — Tab switcher MK | Excerpt */}
       <div className="mb-6 flex flex-wrap gap-2 border-b border-[color:var(--border)]">
         {(['memories', 'excerpts'] as const).map((tabKey) => (
+          // eslint-disable-next-line no-restricted-syntax -- stateful toggle/segmented selector
           <button
             key={tabKey}
             type="button"
@@ -363,6 +364,7 @@ export default function DuplicatesListPage(): React.ReactElement {
 
       <div className="mb-4 flex flex-wrap gap-2">
         {(['open', 'resolved', 'dismissed', 'all'] as const).map((s) => (
+          // eslint-disable-next-line no-restricted-syntax -- stateful toggle/segmented selector
           <button
             key={s}
             type="button"
@@ -572,6 +574,7 @@ export default function DuplicatesListPage(): React.ReactElement {
         {/* Slice 12 — Status filter for Excerpts */}
         <div className="mb-4 flex flex-wrap gap-2">
           {(['open', 'resolved', 'dismissed', 'all'] as const).map((s) => (
+            // eslint-disable-next-line no-restricted-syntax -- stateful toggle/segmented selector
             <button
               key={s}
               type="button"
diff --git a/web-ui/app/admin/inconsistencies/[id]/page.tsx b/web-ui/app/admin/inconsistencies/[id]/page.tsx
index 22420317e..22efaaa9c 100644
--- a/web-ui/app/admin/inconsistencies/[id]/page.tsx
+++ b/web-ui/app/admin/inconsistencies/[id]/page.tsx
@@ -161,6 +161,7 @@ export default function InconsistencyDetailPage(): React.ReactElement {
               )}
               <div className="grid gap-2 sm:grid-cols-2">
                 {(['a_wins', 'b_wins', 'both', 'dismiss'] as const).map((r) => (
+                  // eslint-disable-next-line no-restricted-syntax -- selection tile/row (label + description)
                   <button
                     key={r}
                     type="button"
diff --git a/web-ui/app/admin/inconsistencies/page.tsx b/web-ui/app/admin/inconsistencies/page.tsx
index a1132fdf5..2e028df27 100644
--- a/web-ui/app/admin/inconsistencies/page.tsx
+++ b/web-ui/app/admin/inconsistencies/page.tsx
@@ -300,6 +300,7 @@ export default function InconsistenciesListPage(): React.ReactElement {
 
       <div className="mb-4 flex flex-wrap gap-2">
         {(['open', 'resolved', 'dismissed', 'all'] as const).map((s) => (
+          // eslint-disable-next-line no-restricted-syntax -- stateful toggle/segmented selector
           <button
             key={s}
             type="button"
diff --git a/web-ui/app/admin/kg-lifecycle/page.tsx b/web-ui/app/admin/kg-lifecycle/page.tsx
index 7f334b04d..c1a6d6bdd 100644
--- a/web-ui/app/admin/kg-lifecycle/page.tsx
+++ b/web-ui/app/admin/kg-lifecycle/page.tsx
@@ -406,6 +406,7 @@ function ActionCard({
       <p className="mb-4 flex-1 text-sm text-[color:var(--fg-muted)]">
         {description}
       </p>
+      {/* eslint-disable-next-line no-restricted-syntax -- bespoke highlight-token action (border/bg/text all --highlight); no §4.2 variant maps to --highlight */}
       <button
         type="button"
         disabled={busy}
diff --git a/web-ui/app/admin/mcp/page.tsx b/web-ui/app/admin/mcp/page.tsx
index d0159b643..a3215ed90 100644
--- a/web-ui/app/admin/mcp/page.tsx
+++ b/web-ui/app/admin/mcp/page.tsx
@@ -483,6 +483,7 @@ function ServerRows({
     <>
       <tr className="border-b border-[color:var(--border)]/60">
         <td className={tdCls}>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline text link (underline-on-hover, no border/bg) */}
           <button className="text-left underline-offset-2 hover:underline" onClick={onToggle}>
             {server.name}
           </button>
@@ -1497,6 +1498,7 @@ function GrantsPane({
               key={g.key}
               className="rounded-lg border border-[color:var(--border)] bg-[color:var(--card)]/40"
             >
+              {/* eslint-disable-next-line no-restricted-syntax -- chevron/expander (aria-expanded) */}
               <button
                 type="button"
                 onClick={() => toggleGroup(g.key)}
diff --git a/web-ui/app/admin/providers/_components/LlmAccessTabs.tsx b/web-ui/app/admin/providers/_components/LlmAccessTabs.tsx
index b33bbfb1b..bdb5dc336 100644
--- a/web-ui/app/admin/providers/_components/LlmAccessTabs.tsx
+++ b/web-ui/app/admin/providers/_components/LlmAccessTabs.tsx
@@ -52,6 +52,7 @@ export function LlmAccessTabs({
         {tabs.map((tabDef) => {
           const active = tabDef.key === tab;
           return (
+            // eslint-disable-next-line no-restricted-syntax -- role=tab / aria-selected stateful tab
             <button
               key={tabDef.key}
               type="button"
diff --git a/web-ui/app/admin/providers/_components/ProvidersPanel.tsx b/web-ui/app/admin/providers/_components/ProvidersPanel.tsx
index 8b1994b3b..12c2a39af 100644
--- a/web-ui/app/admin/providers/_components/ProvidersPanel.tsx
+++ b/web-ui/app/admin/providers/_components/ProvidersPanel.tsx
@@ -331,6 +331,7 @@ function ProviderRow({
           {/* Explicit re-probe. Only offered where there is a credential to
               probe — the CLI provider authenticates on the Subscriptions tab. */}
           {!p.toolLess && p.status !== 'no_key' && (
+            // eslint-disable-next-line no-restricted-syntax -- inline text link (bare accent text, no border/bg)
             <button
               type="button"
               onClick={() => void runVerify()}
@@ -354,6 +355,7 @@ function ProviderRow({
             // installed, preserving the old behaviour on older servers.
             cliMissing ? (
               <span className="flex items-center gap-2">
+                {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare muted text, no border/bg) */}
                 <button
                   type="button"
                   disabled
@@ -367,6 +369,7 @@ function ProviderRow({
                 </span>
               </span>
             ) : (
+              // eslint-disable-next-line no-restricted-syntax -- inline text link (bare accent text, no border/bg)
               <button
                 type="button"
                 onClick={onSwitchToSubscriptions}
@@ -379,6 +382,7 @@ function ProviderRow({
             !editing &&
             (p.connected ? (
               <span className="flex items-center gap-3">
+                {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare accent text, no border/bg) */}
                 <button
                   type="button"
                   onClick={() => setEditing(true)}
@@ -387,6 +391,7 @@ function ProviderRow({
                 >
                   {t('providers.changeKey')} →
                 </button>
+                {/* eslint-disable-next-line no-restricted-syntax -- inline text link (bare danger text, no border/bg) */}
                 <button
                   type="button"
                   onClick={() => void removeKey()}
@@ -398,6 +403,7 @@ function ProviderRow({
                 {saveStatus === 'saving' && <StatusChip status={saveStatus} t={t} />}
               </span>
             ) : (
+              // eslint-disable-next-line no-restricted-syntax -- inline text link (bare accent text, no border/bg)
               <button
                 type="button"
                 onClick={() => setEditing(true)}
diff --git a/web-ui/app/admin/subscription-clis/_components/SubscriptionClisPanel.tsx b/web-ui/app/admin/subscription-clis/_components/SubscriptionClisPanel.tsx
index b676af582..165bb1938 100644
--- a/web-ui/app/admin/subscription-clis/_components/SubscriptionClisPanel.tsx
+++ b/web-ui/app/admin/subscription-clis/_components/SubscriptionClisPanel.tsx
@@ -131,6 +131,7 @@ export function SubscriptionClisPanel({
           {t('explainer.singleOperator')}
         </p>
         <p className="mt-3 text-sm">
+          {/* eslint-disable-next-line no-restricted-syntax -- inline text link (underline, no border/bg) */}
           <button
             type="button"
             onClick={onSwitchToProviders}
diff --git a/web-ui/app/admin/usage/page.tsx b/web-ui/app/admin/usage/page.tsx
index 5c0a4d0e2..1029eb037 100644
--- a/web-ui/app/admin/usage/page.tsx
+++ b/web-ui/app/admin/usage/page.tsx
@@ -129,6 +129,7 @@ export default function UsageDashboardPage(): React.ReactElement {
         </div>
         <div className="flex gap-1 rounded-lg border border-[color:var(--border)] p-1">
           {RANGES.map((r) => (
+            // eslint-disable-next-line no-restricted-syntax -- stateful toggle/segmented selector
             <button
               key={r.key}
               type="button"
diff --git a/web-ui/app/chat/page.tsx b/web-ui/app/chat/page.tsx
index bf2fed5c3..c1187720e 100644
--- a/web-ui/app/chat/page.tsx
+++ b/web-ui/app/chat/page.tsx
@@ -526,6 +526,7 @@ export default function ChatPage(): React.ReactElement {
               KG-walk (indigo) auto-opens the right pane on KG access; Plan (sky)
               auto-opens the left pane on plan fetch/extend. Both default ON. */}
           <div className="flex flex-wrap items-center gap-2">
+            {/* eslint-disable-next-line no-restricted-syntax -- role="switch" toggle pill (stateful), not a §4.2 Button candidate */}
             <button
               type="button"
               role="switch"
@@ -551,6 +552,7 @@ export default function ChatPage(): React.ReactElement {
                 ].join(' ')}
               />
             </button>
+            {/* eslint-disable-next-line no-restricted-syntax -- role="switch" toggle pill (stateful), not a §4.2 Button candidate */}
             <button
               type="button"
               role="switch"
@@ -684,6 +686,7 @@ export default function ChatPage(): React.ReactElement {
           {/* §5.3 Spotlight: the composer is the stage — radial accent glow
               behind it, three-stop showcase glow on the focused input. */}
           <div className="lume-spotlight-stage flex items-end gap-2">
+            {/* eslint-disable-next-line no-restricted-syntax -- icon-only composer reset chrome, not a §4.2 Button candidate */}
             <button
               type="button"
               onClick={requestReset}
@@ -708,6 +711,7 @@ export default function ChatPage(): React.ReactElement {
             />
             {sending ? (
               <>
+                {/* eslint-disable-next-line no-restricted-syntax -- warning-outline steer action; §10 forbids a warning Button variant and mapping to danger/secondary would mis-signal caution (documented §2.6 exception) */}
                 <button
                   type="button"
                   onClick={() => {
@@ -823,6 +827,7 @@ function ChatIntro(): React.ReactElement {
   return (
     <div className="b5-hero-bg border-b border-[color:var(--border)] px-6 py-4">
       <div className="mx-auto max-w-4xl">
+        {/* eslint-disable-next-line no-restricted-syntax -- chevron disclosure header (aria-expanded), not a §4.2 Button candidate */}
         <button
           type="button"
           onClick={() => setChatIntroCollapsedPersisted(!collapsed)}
diff --git a/web-ui/app/conductor/_components/ConditionBuilder.tsx b/web-ui/app/conductor/_components/ConditionBuilder.tsx
index e82046b8f..1a669cb46 100644
--- a/web-ui/app/conductor/_components/ConditionBuilder.tsx
+++ b/web-ui/app/conductor/_components/ConditionBuilder.tsx
@@ -145,6 +145,7 @@ export function ConditionBuilder(props: {
     <div className="grid gap-2">
       <div className="flex items-center justify-between">
         <span className="text-[12px] text-[color:var(--fg-muted)]">{props.label}</span>
+        {/* eslint-disable-next-line no-restricted-syntax -- inline accent text link toggling rows/advanced, not a §4.2 CTA */}
         <button
           type="button"
           className="text-[11px] text-[color:var(--accent)] hover:underline"
@@ -200,6 +201,7 @@ export function ConditionBuilder(props: {
                   onChange={(e) => setRow(i, { value: e.target.value })}
                 />
               )}
+              {/* eslint-disable-next-line no-restricted-syntax -- icon-only (✕) remove-row control, no text label */}
               <button
                 type="button"
                 className="px-1 text-[13px] text-[color:var(--danger)] hover:opacity-80"
diff --git a/web-ui/app/conductor/_components/ConductorRolesSection.tsx b/web-ui/app/conductor/_components/ConductorRolesSection.tsx
index f90dc508c..0c3f078bb 100644
--- a/web-ui/app/conductor/_components/ConductorRolesSection.tsx
+++ b/web-ui/app/conductor/_components/ConductorRolesSection.tsx
@@ -82,6 +82,7 @@ export function ConductorRolesSection({
                 {t('assignButton')}
               </Button>
               {role.holders.map((h) => (
+                // eslint-disable-next-line no-restricted-syntax -- removable holder-token chip (✕ + id), not a §4.2 CTA
                 <button
                   key={h}
                   className="rounded-md border border-[color:var(--border)] px-2 py-1 font-mono text-[11px] text-[color:var(--fg-muted)]"
diff --git a/web-ui/app/conductor/_components/ConductorRunTrace.tsx b/web-ui/app/conductor/_components/ConductorRunTrace.tsx
index 6a62876b2..3a756a1c6 100644
--- a/web-ui/app/conductor/_components/ConductorRunTrace.tsx
+++ b/web-ui/app/conductor/_components/ConductorRunTrace.tsx
@@ -187,6 +187,7 @@ export function ConductorRunHistory({ slug, onClose }: { slug: string; onClose:
         <ul className="grid gap-2">
           {runs.map((r) => (
             <li key={r.id}>
+              {/* eslint-disable-next-line no-restricted-syntax -- full-width run-list row selector opening a trace, not a §4.2 CTA */}
               <button
                 className="flex w-full items-center justify-between gap-3 rounded-md border border-[color:var(--border)] px-3 py-2 text-left hover:bg-white/5"
                 onClick={() => void openRun(r.id)}
diff --git a/web-ui/app/conductor/_components/KeyValueEditor.tsx b/web-ui/app/conductor/_components/KeyValueEditor.tsx
index 4172606a5..185c6f297 100644
--- a/web-ui/app/conductor/_components/KeyValueEditor.tsx
+++ b/web-ui/app/conductor/_components/KeyValueEditor.tsx
@@ -108,6 +108,7 @@ export function KeyValueEditor(props: {
     <div className="grid gap-2">
       <div className="flex items-center justify-between">
         <span className="text-[12px] text-[color:var(--fg-muted)]">{props.label}</span>
+        {/* eslint-disable-next-line no-restricted-syntax -- inline accent text link toggling rows/advanced, not a §4.2 CTA */}
         <button
           type="button"
           className="text-[11px] text-[color:var(--accent)] hover:underline"
@@ -132,6 +133,7 @@ export function KeyValueEditor(props: {
             <div key={row.id} className="grid grid-cols-[1fr_1fr_auto] items-center gap-1">
               <input className={gcInput} value={row.key} placeholder={t('kvKey')} onChange={(e) => setRow(i, { key: e.target.value })} />
               <input className={gcInput} value={row.value} placeholder={t('kvValue')} onChange={(e) => setRow(i, { value: e.target.value })} />
+              {/* eslint-disable-next-line no-restricted-syntax -- icon-only (✕) remove-row control, no text label */}
               <button
                 type="button"
                 className="px-1 text-[13px] text-[color:var(--danger)] hover:opacity-80"
diff --git a/web-ui/app/conductor/_components/TemplateGallery.tsx b/web-ui/app/conductor/_components/TemplateGallery.tsx
index a750b5781..45750eff1 100644
--- a/web-ui/app/conductor/_components/TemplateGallery.tsx
+++ b/web-ui/app/conductor/_components/TemplateGallery.tsx
@@ -224,6 +224,7 @@ export function TemplateGallery({
         {FACETS.map(([key, labelKey]) => {
           const active = facet === key;
           return (
+            // eslint-disable-next-line no-restricted-syntax -- aria-pressed facet-filter selector chip (accent-fill active state), not a §4.2 CTA
             <button
               key={key}
               type="button"
@@ -265,6 +266,7 @@ export function TemplateGallery({
             {useCases.map((useCase) => {
               const active = useCaseFilter === useCase;
               return (
+                // eslint-disable-next-line no-restricted-syntax -- aria-pressed use-case toggle chip (bespoke accent state), not a §4.2 CTA
                 <button
                   key={useCase}
                   type="button"
diff --git a/web-ui/app/conductor/_components/TemplateUpdateHint.tsx b/web-ui/app/conductor/_components/TemplateUpdateHint.tsx
index 73abad52b..99b79f91e 100644
--- a/web-ui/app/conductor/_components/TemplateUpdateHint.tsx
+++ b/web-ui/app/conductor/_components/TemplateUpdateHint.tsx
@@ -28,6 +28,7 @@ export function TemplateUpdateHint({
   return (
     <div className="mt-1 flex flex-wrap items-center gap-x-3 text-[12px] text-[color:var(--warning)]">
       <span>{t('templateUpdateHint', { version: hint.version, latestVersion: hint.latestVersion })}</span>
+      {/* eslint-disable-next-line no-restricted-syntax -- inline warning-colored underlined text link (§10 no warning variant) */}
       <button
         type="button"
         className="cursor-pointer underline underline-offset-2 hover:text-[color:var(--fg-strong)]"
diff --git a/web-ui/app/error.tsx b/web-ui/app/error.tsx
index 8b60f1c36..ede221219 100644
--- a/web-ui/app/error.tsx
+++ b/web-ui/app/error.tsx
@@ -62,15 +62,13 @@ export default function Error({
         </h1>
         <p className="text-sm text-[color:var(--fg-muted)]">{t('description')}</p>
         <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
-          <button
-            type="button"
+          <Button
             onClick={() => {
               reset();
             }}
-            className="rounded bg-[color:var(--bg-inverse)] px-4 py-2 text-sm font-medium text-[color:var(--fg-on-dark)] transition hover:bg-[color:var(--fg-muted)]"
           >
             {t('reload')}
-          </button>
+          </Button>
         </div>
 
         {/*
diff --git a/web-ui/app/global-error.tsx b/web-ui/app/global-error.tsx
index f770b1249..7bb2f439d 100644
--- a/web-ui/app/global-error.tsx
+++ b/web-ui/app/global-error.tsx
@@ -45,6 +45,7 @@ export default function GlobalError({
             The app failed to load. Try reloading. · Die App konnte nicht geladen
             werden. Bitte neu laden.
           </p>
+          {/* eslint-disable-next-line no-restricted-syntax -- global-error must not import app code (documented exception) */}
           <button
             type="button"
             onClick={() => {
diff --git a/web-ui/app/graph/_components/DetailPanel.tsx b/web-ui/app/graph/_components/DetailPanel.tsx
index fbefea2c6..5e94a43c9 100644
--- a/web-ui/app/graph/_components/DetailPanel.tsx
+++ b/web-ui/app/graph/_components/DetailPanel.tsx
@@ -69,6 +69,7 @@ export default function DetailPanel({
             ✎ manual
           </span>
         ) : null}
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only close (×) chrome, not a text CTA */}
         <button
           type="button"
           onClick={onClose}
diff --git a/web-ui/app/graph/_components/GraphCanvas.tsx b/web-ui/app/graph/_components/GraphCanvas.tsx
index 2c9b91efd..77360888a 100644
--- a/web-ui/app/graph/_components/GraphCanvas.tsx
+++ b/web-ui/app/graph/_components/GraphCanvas.tsx
@@ -943,6 +943,7 @@ function IconBtn({
   children: React.ReactNode;
 }): React.ReactElement {
   return (
+    // eslint-disable-next-line no-restricted-syntax -- icon-only canvas control (fit/zoom/re-layout) chrome, not a text CTA
     <button
       type="button"
       title={title}
diff --git a/web-ui/app/graph/_components/ListView.tsx b/web-ui/app/graph/_components/ListView.tsx
index 269ccead7..dd08bbc14 100644
--- a/web-ui/app/graph/_components/ListView.tsx
+++ b/web-ui/app/graph/_components/ListView.tsx
@@ -89,6 +89,7 @@ function TurnCard({
       {entities.length > 0 ? (
         <div className="flex flex-wrap gap-1">
           {entities.map((e) => (
+            // eslint-disable-next-line no-restricted-syntax -- bespoke entity pill (per-type accent/success ring), no §4.2 variant
             <button
               key={e.id}
               type="button"
@@ -247,6 +248,7 @@ function ToolCallRow({
         <span className="flex flex-wrap items-center gap-1">
           <span className="text-[color:var(--fg-subtle)]">↳</span>
           {tc.producedEntities.map((e) => (
+            // eslint-disable-next-line no-restricted-syntax -- bespoke success-tinted entity pill, no §4.2 variant
             <button
               key={e.id}
               type="button"
diff --git a/web-ui/app/graph/_components/MemoryAclSection.tsx b/web-ui/app/graph/_components/MemoryAclSection.tsx
index d9873e5f2..ebc7545f1 100644
--- a/web-ui/app/graph/_components/MemoryAclSection.tsx
+++ b/web-ui/app/graph/_components/MemoryAclSection.tsx
@@ -195,6 +195,7 @@ export default function MemoryAclSection({
   return (
     <div className="mt-3 border-t border-[color:var(--border)] pt-3">
       <div className="mb-2 flex gap-1 text-[10px] font-semibold uppercase tracking-wide">
+        {/* eslint-disable-next-line no-restricted-syntax -- segmented tab selector with active-state styling */}
         <button
           type="button"
           onClick={() => setTab('owners')}
@@ -206,6 +207,7 @@ export default function MemoryAclSection({
         >
           Owners ({owners.length})
         </button>
+        {/* eslint-disable-next-line no-restricted-syntax -- segmented tab selector with active-state styling */}
         <button
           type="button"
           onClick={() => setTab('audit')}
@@ -235,6 +237,7 @@ export default function MemoryAclSection({
                   <span className="grow truncate font-mono text-[10px]">
                     {id}
                   </span>
+                  {/* eslint-disable-next-line no-restricted-syntax -- icon-only remove (×) chrome, not a text CTA */}
                   <button
                     type="button"
                     disabled={busy}
diff --git a/web-ui/app/graph/page.tsx b/web-ui/app/graph/page.tsx
index d4cc370e0..087e23264 100644
--- a/web-ui/app/graph/page.tsx
+++ b/web-ui/app/graph/page.tsx
@@ -516,6 +516,7 @@ export default function GraphPage(): React.ReactElement {
               </div>
             </div>
           )}
+          {/* eslint-disable-next-line no-restricted-syntax -- inline low-emphasis text link (no fill/border/padding), not a CTA */}
           <button
             type="button"
             onClick={() => void refresh()}
@@ -525,6 +526,7 @@ export default function GraphPage(): React.ReactElement {
           </button>
         </div>
 
+        {/* eslint-disable-next-line no-restricted-syntax -- selection tile with active-state border/fill + multi-line content, not a text CTA */}
         <button
           type="button"
           onClick={() => {
@@ -548,6 +550,7 @@ export default function GraphPage(): React.ReactElement {
           </span>
         </button>
 
+        {/* eslint-disable-next-line no-restricted-syntax -- selection tile with active-state border/fill + multi-line content, not a text CTA */}
         <button
           type="button"
           onClick={() => {
@@ -871,6 +874,7 @@ function SessionCard({
     : new Set<string>();
 
   return (
+    // eslint-disable-next-line no-restricted-syntax -- session-card selection tile with active-state border + multi-line content, not a text CTA
     <button
       type="button"
       onClick={onClick}
@@ -951,6 +955,7 @@ function ModeBtn({
   disabled?: boolean;
 }): React.ReactElement {
   return (
+    // eslint-disable-next-line no-restricted-syntax -- segmented mode selector with active-state styling
     <button
       type="button"
       onClick={onClick}
@@ -997,6 +1002,7 @@ function FilterChip({
       'border-[color:var(--danger-edge)] bg-[color:var(--danger)]/8 text-[color:var(--danger)]',
   };
   return (
+    // eslint-disable-next-line no-restricted-syntax -- toggleable filter chip with active-state styling (●/○), not a text CTA
     <button
       type="button"
       onClick={onClick}
diff --git a/web-ui/app/memories/[id]/page.tsx b/web-ui/app/memories/[id]/page.tsx
index ce40ff95d..edc1b4e3a 100644
--- a/web-ui/app/memories/[id]/page.tsx
+++ b/web-ui/app/memories/[id]/page.tsx
@@ -655,6 +655,7 @@ export default function MemoryDetailPage(): React.ReactElement {
               <h2 className="text-xs font-semibold uppercase tracking-wider text-[color:var(--fg-muted)]">
                 {t('detail.auditHeading')}
               </h2>
+              {/* eslint-disable-next-line no-restricted-syntax -- inline hover-underline text link (no fill/border/padding), not a CTA */}
               <button
                 type="button"
                 onClick={() => void loadAudit()}
diff --git a/web-ui/app/memories/page.tsx b/web-ui/app/memories/page.tsx
index a00d64b97..550916a55 100644
--- a/web-ui/app/memories/page.tsx
+++ b/web-ui/app/memories/page.tsx
@@ -89,6 +89,7 @@ export default function MemoriesPage(): React.ReactElement {
             const active = filter === k;
             const label = k === 'all' ? t('list.filterAll') : t(`kinds.${k}`);
             return (
+              // eslint-disable-next-line no-restricted-syntax -- segmented kind-filter selector with active-state styling
               <button
                 key={k}
                 type="button"
diff --git a/web-ui/app/memory/page.tsx b/web-ui/app/memory/page.tsx
index 21d83ab4e..353c68474 100644
--- a/web-ui/app/memory/page.tsx
+++ b/web-ui/app/memory/page.tsx
@@ -162,6 +162,7 @@ export default function MemoryPage(): React.ReactElement {
             {crumbs.map((c, i) => (
               <span key={c.path} className="flex items-center gap-1">
                 {i > 0 && <span className="text-[color:var(--fg-subtle)]">/</span>}
+                {/* eslint-disable-next-line no-restricted-syntax -- inline breadcrumb path link, not a text CTA */}
                 <button
                   type="button"
                   onClick={() => setCwd(c.path)}
@@ -172,6 +173,7 @@ export default function MemoryPage(): React.ReactElement {
               </span>
             ))}
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline low-emphasis text link (no fill/border/padding), not a CTA */}
           <button
             type="button"
             onClick={() => void loadDir(cwd)}
@@ -182,6 +184,7 @@ export default function MemoryPage(): React.ReactElement {
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto">
           {parent !== null && (
+            // eslint-disable-next-line no-restricted-syntax -- full-width file-browser navigation row, not a text CTA
             <button
               type="button"
               onClick={() => setCwd(parent)}
@@ -209,6 +212,7 @@ export default function MemoryPage(): React.ReactElement {
             const name = basename(e.virtualPath);
             const activeFile = selected === e.virtualPath;
             return (
+              // eslint-disable-next-line no-restricted-syntax -- file-browser selection row with active-state styling, not a text CTA
               <button
                 key={e.virtualPath}
                 type="button"
diff --git a/web-ui/app/operator/agents/_components/AgentsDashboard.tsx b/web-ui/app/operator/agents/_components/AgentsDashboard.tsx
index 8fa0bc8cc..870142ec2 100644
--- a/web-ui/app/operator/agents/_components/AgentsDashboard.tsx
+++ b/web-ui/app/operator/agents/_components/AgentsDashboard.tsx
@@ -517,6 +517,7 @@ function AgentCard(props: {
   return (
     <article className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)]">
       <header className="flex items-start justify-between gap-4 px-4 py-3">
+        {/* eslint-disable-next-line no-restricted-syntax -- chevron expand/collapse card-header toggle (aria-expanded), not a §4.2 CTA */}
         <button
           type="button"
           className="flex flex-1 items-start gap-2 text-left"
@@ -608,6 +609,7 @@ function AgentCard(props: {
 
           <div className="mb-4 flex flex-wrap items-center gap-2">
             <span className="text-xs text-[color:var(--fg-muted)]">{t('sessionsLabel')}</span>
+            {/* eslint-disable-next-line no-restricted-syntax -- warning-outline drain action (§10 no warning variant) */}
             <button
               type="button"
               className="rounded border border-[color:var(--warning)] bg-[color:var(--warning)]/10 px-2 py-1 text-xs text-[color:var(--warning)] hover:bg-[color:var(--warning)]/10"
diff --git a/web-ui/app/operator/agents/_components/PluginsDnd.tsx b/web-ui/app/operator/agents/_components/PluginsDnd.tsx
index f89642336..d8050137f 100644
--- a/web-ui/app/operator/agents/_components/PluginsDnd.tsx
+++ b/web-ui/app/operator/agents/_components/PluginsDnd.tsx
@@ -385,6 +385,7 @@ export function PluginsDnd(props: PluginsDndProps): React.ReactElement {
                   <p className="text-[10px] uppercase tracking-wide text-[color:var(--warning)]">
                     {t('orphanPluginsHeading')} ({orphans.length})
                   </p>
+                  {/* eslint-disable-next-line no-restricted-syntax -- warning-outline orphan detach-all action (§10 no warning variant) */}
                   <button
                     type="button"
                     className="rounded border border-[color:var(--warning)] bg-[color:var(--bg-elevated)] px-2 py-0 text-[10px] text-[color:var(--warning)] hover:bg-[color:var(--warning)]/10"
@@ -416,6 +417,7 @@ export function PluginsDnd(props: PluginsDndProps): React.ReactElement {
                     <span className="text-[10px] uppercase text-[color:var(--warning)]">
                       {t('orphanPluginBadge')}
                     </span>
+                    {/* eslint-disable-next-line no-restricted-syntax -- warning-outline per-orphan detach action (§10 no warning variant) */}
                     <button
                       type="button"
                       className="ml-auto rounded border border-[color:var(--warning)] bg-[color:var(--bg-elevated)] px-2 py-0 text-[10px] hover:bg-[color:var(--warning)]/10"
@@ -595,6 +597,7 @@ function DraggablePluginTile(props: {
     <div ref={setNodeRef} style={style} className="select-none">
       <div className="rounded border border-[color:var(--border)] bg-[color:var(--bg-elevated)]">
         <div className="flex items-start gap-2 px-2 py-2">
+          {/* eslint-disable-next-line no-restricted-syntax -- dnd drag handle (icon-only GripVertical + drag listeners), not a §4.2 CTA */}
           <button
             type="button"
             {...attributes}
diff --git a/web-ui/app/operator/channels/_components/ChannelsDashboard.tsx b/web-ui/app/operator/channels/_components/ChannelsDashboard.tsx
index 246f9c394..dcfde7d71 100644
--- a/web-ui/app/operator/channels/_components/ChannelsDashboard.tsx
+++ b/web-ui/app/operator/channels/_components/ChannelsDashboard.tsx
@@ -158,6 +158,7 @@ export function ChannelsDashboard({ initial }: Props): React.ReactElement {
                   </select>
                 </label>
                 {c.stale && (
+                  // eslint-disable-next-line no-restricted-syntax -- warning-outline clear-stale-binding action (§10 no warning variant)
                   <button
                     type="button"
                     className="rounded border border-[color:var(--warning)] bg-[color:var(--warning)]/10 px-2 py-1 text-xs text-[color:var(--warning)] hover:bg-[color:var(--warning)]/10"
diff --git a/web-ui/app/routines/_components/RoutineRow.tsx b/web-ui/app/routines/_components/RoutineRow.tsx
index a022f1c63..4c85f3989 100644
--- a/web-ui/app/routines/_components/RoutineRow.tsx
+++ b/web-ui/app/routines/_components/RoutineRow.tsx
@@ -66,6 +66,7 @@ export function RoutineRow({ routine }: Props): React.ReactElement {
     <>
       <tr className="border-t border-[color:var(--border)] align-top">
         <td className="px-4 py-3">
+          {/* eslint-disable-next-line no-restricted-syntax -- chevron row-details expand/collapse toggle (aria-expanded), not a §4.2 CTA */}
           <button
             type="button"
             onClick={handleDetailsToggle}
@@ -156,6 +157,7 @@ export function RoutineRow({ routine }: Props): React.ReactElement {
                   {routine.lastRunError}
                 </div>
               ) : null}
+              {/* eslint-disable-next-line no-restricted-syntax -- chevron run-history expand/collapse toggle (aria-expanded), not a §4.2 CTA */}
               <button
                 type="button"
                 onClick={handleToggle}
diff --git a/web-ui/app/routines/_components/RoutineTemplateEditor.tsx b/web-ui/app/routines/_components/RoutineTemplateEditor.tsx
index a9f71272a..7e5babe22 100644
--- a/web-ui/app/routines/_components/RoutineTemplateEditor.tsx
+++ b/web-ui/app/routines/_components/RoutineTemplateEditor.tsx
@@ -283,6 +283,7 @@ export function RoutineTemplateEditor({ routine }: Props): React.ReactElement {
         >
           {t('discard')}
         </Button>
+        {/* eslint-disable-next-line no-restricted-syntax -- warning-outline clear-editor action (§10 no warning variant) */}
         <button
           type="button"
           onClick={handleClear}
@@ -294,6 +295,7 @@ export function RoutineTemplateEditor({ routine }: Props): React.ReactElement {
 
         <span className="ml-auto" />
 
+        {/* eslint-disable-next-line no-restricted-syntax -- preview open/close toggle (aria-expanded), not a §4.2 CTA */}
         <button
           type="button"
           onClick={(): void => setPreviewOpen((v) => !v)}
diff --git a/web-ui/app/routines/_components/RunTraceViewer.tsx b/web-ui/app/routines/_components/RunTraceViewer.tsx
index dc6823320..6bab87051 100644
--- a/web-ui/app/routines/_components/RunTraceViewer.tsx
+++ b/web-ui/app/routines/_components/RunTraceViewer.tsx
@@ -129,6 +129,7 @@ function CollapsibleNode({
   const [expanded, setExpanded] = useState(defaultExpanded);
   return (
     <div style={{ paddingLeft: depth === 0 ? 0 : 16 }}>
+      {/* eslint-disable-next-line no-restricted-syntax -- chevron collapsible JSON-node toggle, not a §4.2 CTA */}
       <button
         type="button"
         onClick={(): void => setExpanded((v) => !v)}
@@ -207,6 +208,7 @@ function StringLine({
       {tooLong && !expanded ? (
         <>
           <span className="text-[color:var(--ok)]">…</span>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline accent show-more text link expanding a truncated string, not a §4.2 CTA */}
           <button
             type="button"
             onClick={(): void => setExpanded(true)}
@@ -219,6 +221,7 @@ function StringLine({
       {tooLong && expanded ? (
         <>
           <span className="text-[color:var(--ok)]">&quot;</span>
+          {/* eslint-disable-next-line no-restricted-syntax -- inline accent show-less text link collapsing an expanded string, not a §4.2 CTA */}
           <button
             type="button"
             onClick={(): void => setExpanded(false)}
diff --git a/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx b/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx
index 9f7c46986..5324db1f2 100644
--- a/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx
+++ b/web-ui/app/store/builder/[id]/_components/BuilderChatPane.tsx
@@ -806,6 +806,7 @@ function ToolCard({
   const pending = item.output === null;
   return (
     <div className="rounded-md border border-[color:var(--divider)] bg-[color:var(--bg-soft)]/60 text-[12px]">
+      {/* eslint-disable-next-line no-restricted-syntax -- full-width disclosure toggle row (chevron + tool name), not a CTA */}
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
diff --git a/web-ui/app/store/builder/[id]/_components/ConflictBanner.tsx b/web-ui/app/store/builder/[id]/_components/ConflictBanner.tsx
index a605cf073..d5f1d03a8 100644
--- a/web-ui/app/store/builder/[id]/_components/ConflictBanner.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ConflictBanner.tsx
@@ -65,6 +65,7 @@ export function ConflictBanner({
               {w.axes.join(' × ')}
             </p>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only dismiss button (X), no text */}
           <button
             type="button"
             onClick={() =>
diff --git a/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx b/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx
index 5222bae47..6ad36a18b 100644
--- a/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/InstallDiffModal.tsx
@@ -145,6 +145,7 @@ export function InstallDiffModal({
       aria-modal="true"
       aria-label={t('publishTitle')}
     >
+      {/* eslint-disable-next-line no-restricted-syntax -- full-screen modal overlay/backdrop dismiss button, no text */}
       <button
         type="button"
         onClick={handleClose}
@@ -176,6 +177,7 @@ export function InstallDiffModal({
               {draft.spec.version} {t('publishLeadSuffix')}
             </p>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only header close button (X), no text */}
           <button
             type="button"
             onClick={handleClose}
@@ -249,19 +251,14 @@ export function InstallDiffModal({
         </div>
 
         <footer className="flex items-center justify-end gap-3 border-t border-[color:var(--rule)] px-6 py-4">
-          <button
-            type="button"
+          <Button
+            variant="ghost"
             onClick={handleClose}
             disabled={busy}
-            className={cn(
-              'rounded-md px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.18em]',
-              'text-[color:var(--fg-muted)] transition-colors',
-              'hover:bg-[color:var(--bg-soft)] hover:text-[color:var(--fg-strong)]',
-              'disabled:opacity-40 disabled:cursor-not-allowed',
-            )}
+            className="text-[12px] font-semibold uppercase tracking-[0.18em]"
           >
             {t('back')}
-          </button>
+          </Button>
           <Button
             variant="primary"
             onClick={() => void handleInstall()}
diff --git a/web-ui/app/store/builder/[id]/_components/ManifestDiffSidebar.tsx b/web-ui/app/store/builder/[id]/_components/ManifestDiffSidebar.tsx
index fc334f974..9cd606346 100644
--- a/web-ui/app/store/builder/[id]/_components/ManifestDiffSidebar.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ManifestDiffSidebar.tsx
@@ -66,6 +66,7 @@ export function ManifestDiffSidebar({
 
   if (collapsed) {
     return (
+      // eslint-disable-next-line no-restricted-syntax -- vertical collapsed-rail toggle (rotated label + chevron), bespoke chrome
       <button
         type="button"
         onClick={() => onToggle(false)}
@@ -92,6 +93,7 @@ export function ManifestDiffSidebar({
           ) : null}
         </div>
         <div className="flex items-center gap-1">
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only refresh control (RefreshCcw), no text */}
           <button
             type="button"
             onClick={() => void refresh()}
@@ -100,6 +102,7 @@ export function ManifestDiffSidebar({
           >
             <RefreshCcw className="size-3" aria-hidden />
           </button>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only collapse chevron control, no text */}
           <button
             type="button"
             onClick={() => onToggle(true)}
diff --git a/web-ui/app/store/builder/[id]/_components/PagePreviewFrame.tsx b/web-ui/app/store/builder/[id]/_components/PagePreviewFrame.tsx
index bc331139b..fdc63ecfb 100644
--- a/web-ui/app/store/builder/[id]/_components/PagePreviewFrame.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PagePreviewFrame.tsx
@@ -100,6 +100,7 @@ export function PagePreviewFrame({
           {loading ? (
             <span className="text-[color:var(--fg-muted)]">{t('loading')}</span>
           ) : null}
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only refresh control (RefreshCw), no text */}
           <button
             type="button"
             onClick={onRefresh}
diff --git a/web-ui/app/store/builder/[id]/_components/PagesList.tsx b/web-ui/app/store/builder/[id]/_components/PagesList.tsx
index 37829b0fa..20607d6d0 100644
--- a/web-ui/app/store/builder/[id]/_components/PagesList.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PagesList.tsx
@@ -241,6 +241,7 @@ function SortableRow({
       className="rounded-md border border-[color:var(--border)] bg-[color:var(--bg)]"
     >
       <div className="flex w-full items-center gap-2 px-3 py-2 text-[12px]">
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only drag handle (GripVertical) with dnd-kit listeners */}
         <button
           type="button"
           {...attributes}
@@ -250,6 +251,7 @@ function SortableRow({
         >
           <GripVertical className="size-3" />
         </button>
+        {/* eslint-disable-next-line no-restricted-syntax -- full-row disclosure toggle (chevron + page label), not a CTA */}
         <button
           type="button"
           onClick={onToggle}
@@ -266,6 +268,7 @@ function SortableRow({
           <span className="text-[color:var(--fg-muted)]">{route.path}</span>
         </button>
         <ModeBadge mode={route.render_mode} />
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only delete control (Trash2), no text */}
         <button
           type="button"
           onClick={onRemove}
diff --git a/web-ui/app/store/builder/[id]/_components/PaneCard.tsx b/web-ui/app/store/builder/[id]/_components/PaneCard.tsx
index e7831c667..e3caa3342 100644
--- a/web-ui/app/store/builder/[id]/_components/PaneCard.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PaneCard.tsx
@@ -190,6 +190,7 @@ export function PaneCard({
               <div className="ml-auto flex shrink-0 items-center gap-2 text-[11px] text-[color:var(--fg-muted)]">
                 {meta}
                 {onMaximize ? (
+                  // eslint-disable-next-line no-restricted-syntax -- icon-only maximize/restore chrome toggle, no §4.2 variant
                   <button
                     type="button"
                     onClick={onMaximize}
@@ -212,6 +213,7 @@ export function PaneCard({
                     )}
                   </button>
                 ) : null}
+                {/* eslint-disable-next-line no-restricted-syntax -- icon-only collapse chrome button, no §4.2 variant */}
                 <button
                   type="button"
                   onClick={onToggleCollapsed}
diff --git a/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx b/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx
index 5a40f0b85..a3db25ab7 100644
--- a/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PersonaPillar.tsx
@@ -316,6 +316,7 @@ export function PersonaPillar({
 
       {/* Extended axes — collapsible */}
       <div className="space-y-3" data-testid="persona-extended-axes">
+        {/* eslint-disable-next-line no-restricted-syntax -- collapsible section disclosure toggle (aria-expanded/aria-controls + chevron), not a §4.2 CTA */}
         <button
           type="button"
           onClick={() => setExtendedOpen((v) => !v)}
diff --git a/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx b/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx
index 181a895fe..61ceeb046 100644
--- a/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PersonaTemplateGallery.tsx
@@ -123,6 +123,7 @@ export function PersonaTemplateGallery({
           {PERSONA_TEMPLATES.map((tpl) => {
             const active = selectedId === tpl.id;
             return (
+              // eslint-disable-next-line no-restricted-syntax -- selection tile (aria-pressed multi-line template card), not a §4.2 CTA
               <button
                 key={tpl.id}
                 type="button"
@@ -155,6 +156,7 @@ export function PersonaTemplateGallery({
               </button>
             );
           })}
+          {/* eslint-disable-next-line no-restricted-syntax -- selection tile (aria-pressed "custom" template card), not a §4.2 CTA */}
           <button
             type="button"
             data-testid="gallery-card-custom"
diff --git a/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx b/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx
index 607ced155..84542360d 100644
--- a/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx
+++ b/web-ui/app/store/builder/[id]/_components/PreviewChatPane.tsx
@@ -418,6 +418,7 @@ export function PreviewChatPane({
           aria-hidden
         />
         <span>{t('agentLabel')}</span>
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke uppercase mini pill with conditional warning-state fill, no §4.2 variant */}
         <button
           type="button"
           onClick={() => setSecretsOpen(true)}
@@ -435,6 +436,7 @@ export function PreviewChatPane({
             ? `(${String(bufferedSecretKeys.length)}/${String(setupFields.length)})`
             : ''}
         </button>
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke uppercase mini pill toolbar button (px-2/py-0.5/text-[10px]), no §4.2 variant */}
         <button
           type="button"
           onClick={() => void onRefresh()}
@@ -492,6 +494,7 @@ export function PreviewChatPane({
             </div>
           </div>
           {onClearAgentStuck ? (
+            // eslint-disable-next-line no-restricted-syntax -- bespoke uppercase mini dismiss chip inside warning banner, no §4.2 variant
             <button
               type="button"
               onClick={onClearAgentStuck}
@@ -824,6 +827,7 @@ function ToolCard({
   const pending = item.output === null;
   return (
     <div className="rounded-md border border-[color:var(--divider)] bg-[color:var(--bg-soft)]/60 text-[12px]">
+      {/* eslint-disable-next-line no-restricted-syntax -- full-width tool-card disclosure toggle row (aria-expanded + chevron), not a §4.2 CTA */}
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
diff --git a/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx b/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx
index 55cd24b28..fa7a49589 100644
--- a/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx
+++ b/web-ui/app/store/builder/[id]/_components/QualityPanel.tsx
@@ -71,6 +71,7 @@ export function QualityPanel({ draftId, refetchKey }: QualityPanelProps): React.
       className="space-y-2 rounded border border-[color:var(--border)] p-3"
     >
       <header className="flex items-center justify-between">
+        {/* eslint-disable-next-line no-restricted-syntax -- stateful expand/collapse toggle (aria-expanded + ▾/▸ glyph), not a §4.2 CTA */}
         <button
           type="button"
           data-testid="quality-toggle"
diff --git a/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx b/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx
index 40fc3af34..bc80e4b5d 100644
--- a/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SecretsDrawer.tsx
@@ -157,6 +157,7 @@ export function SecretsDrawer({
               <h2 className="font-display text-[18px] leading-none text-[color:var(--fg-strong)]">
                 {t('title')}
               </h2>
+              {/* eslint-disable-next-line no-restricted-syntax -- icon-only close-drawer chrome button, no §4.2 variant */}
               <button
                 type="button"
                 onClick={onClose}
diff --git a/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx b/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx
index 2eded695d..2639a882c 100644
--- a/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SetupFieldsEditor.tsx
@@ -252,6 +252,7 @@ function SetupFieldRow({
           </label>
         </div>
         <div className="flex items-end justify-end">
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only remove control (Trash2 glyph, no text label) */}
           <button
             type="button"
             onClick={onRemove}
diff --git a/web-ui/app/store/builder/[id]/_components/SimpleWorkspace.tsx b/web-ui/app/store/builder/[id]/_components/SimpleWorkspace.tsx
index 54558663f..e31cf6808 100644
--- a/web-ui/app/store/builder/[id]/_components/SimpleWorkspace.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SimpleWorkspace.tsx
@@ -197,6 +197,7 @@ export function SimpleWorkspace({
 
           {/* Persona — opt-in, collapsed by default to keep things calm. */}
           <div className="overflow-hidden rounded-lg border border-[color:var(--divider)]">
+            {/* eslint-disable-next-line no-restricted-syntax -- full-width expand/collapse disclosure header (aria-expanded, icon + text + chevron) */}
             <button
               type="button"
               onClick={() => setPersonaOpen((v) => !v)}
diff --git a/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx b/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx
index 0143d3665..224108825 100644
--- a/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SlotEditor.tsx
@@ -544,6 +544,7 @@ function TemplateSlotsPanel({
                 ) : null}
               </div>
               {!filled && onPrefillBuilderChat ? (
+                // eslint-disable-next-line no-restricted-syntax -- bespoke accent pill chip (uppercase accent-tint, icon + text + arrow), no §4.2 variant
                 <button
                   type="button"
                   onClick={(e) => {
diff --git a/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx b/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx
index a0cc20a46..b992fe2e8 100644
--- a/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx
+++ b/web-ui/app/store/builder/[id]/_components/SpecEditor.tsx
@@ -514,6 +514,7 @@ function ArrayField({
                 title={malformed ? t('array.malformedTooltip') : undefined}
               >
                 <span className="break-all">{labelText}</span>
+                {/* eslint-disable-next-line no-restricted-syntax -- icon-only chip-remove control (X glyph, no text label) */}
                 <button
                   type="button"
                   onClick={() => onRemove(i)}
diff --git a/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx b/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx
index d5d32b756..440945b3b 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolBulkImportModal.tsx
@@ -105,6 +105,7 @@ export function ToolBulkImportModal({
               {t('title')}
             </h2>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only modal close control (X glyph, no text label) */}
           <button
             type="button"
             onClick={onClose}
@@ -197,6 +198,7 @@ function TabBtn({
   children: React.ReactNode;
 }): React.ReactElement {
   return (
+    // eslint-disable-next-line no-restricted-syntax -- segmented tab selector (active-state toggle for import format)
     <button
       type="button"
       onClick={onClick}
diff --git a/web-ui/app/store/builder/[id]/_components/ToolForm.tsx b/web-ui/app/store/builder/[id]/_components/ToolForm.tsx
index fe5a24d23..60b406934 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolForm.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolForm.tsx
@@ -304,6 +304,7 @@ function InputSchemaSection({
           aria-label={t('schemaModeLabel')}
           className="inline-flex overflow-hidden rounded border border-[color:var(--border)]"
         >
+          {/* eslint-disable-next-line no-restricted-syntax -- segmented tab selector (role=tab, aria-selected toggle) */}
           <button
             role="tab"
             aria-selected={tab === 'form'}
@@ -318,6 +319,7 @@ function InputSchemaSection({
           >
             {t('tabForm')}
           </button>
+          {/* eslint-disable-next-line no-restricted-syntax -- segmented tab selector (role=tab, aria-selected toggle) */}
           <button
             role="tab"
             aria-selected={tab === 'json'}
diff --git a/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx b/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx
index 11c8d2ee1..6cacf5c16 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolInputSchemaRow.tsx
@@ -80,6 +80,7 @@ export function ToolInputSchemaRow({
       )}
     >
       <div className="flex flex-wrap items-center gap-2 px-2 py-2">
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only expand/collapse toggle (chevron glyph, aria-expanded) */}
         <button
           type="button"
           onClick={() => setExpanded((p) => !p)}
@@ -131,6 +132,7 @@ export function ToolInputSchemaRow({
           />
           required
         </label>
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only remove control (X glyph, no text label) */}
         <button
           type="button"
           onClick={onRemove}
@@ -218,6 +220,7 @@ function DescriptionInput({
         <ul className="mt-1 flex flex-wrap gap-1">
           {matches.map((m) => (
             <li key={m.$id}>
+              {/* eslint-disable-next-line no-restricted-syntax -- bespoke entity-suggestion chip (accent-tint autocomplete pill), no §4.2 variant */}
               <button
                 type="button"
                 onClick={() => {
@@ -429,6 +432,7 @@ function EnumValuesEditor({
               className="inline-flex items-center gap-1 rounded bg-[color:var(--bg)] px-2 py-0.5 font-mono-num text-[11px] text-[color:var(--fg-strong)]"
             >
               {v}
+              {/* eslint-disable-next-line no-restricted-syntax -- icon-only chip-remove control (X glyph, no text label) */}
               <button
                 type="button"
                 onClick={() => onChange(values.filter((_, j) => j !== i))}
diff --git a/web-ui/app/store/builder/[id]/_components/ToolList.tsx b/web-ui/app/store/builder/[id]/_components/ToolList.tsx
index d70cf77fc..b0c8f60bc 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolList.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolList.tsx
@@ -298,6 +298,7 @@ function SortableRow({
       )}
     >
       <div className="flex items-center gap-2 px-2 py-2">
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only drag handle; dnd-kit listeners/attributes spread on it */}
         <button
           type="button"
           aria-label={t('reorderHandle')}
@@ -307,6 +308,7 @@ function SortableRow({
         >
           <GripVertical className="size-3.5" aria-hidden />
         </button>
+        {/* eslint-disable-next-line no-restricted-syntax -- expandable list-row header (chevron + tool id), not a CTA */}
         <button
           type="button"
           onClick={onToggle}
@@ -335,6 +337,7 @@ function SortableRow({
           ) : null}
         </button>
         {onTest ? (
+          // eslint-disable-next-line no-restricted-syntax -- icon-only play/test control (Play glyph, no text)
           <button
             type="button"
             onClick={onTest}
@@ -345,6 +348,7 @@ function SortableRow({
             <Play className="size-3" aria-hidden />
           </button>
         ) : null}
+        {/* eslint-disable-next-line no-restricted-syntax -- icon-only remove control (X glyph, no text) */}
         <button
           type="button"
           onClick={onRemove}
diff --git a/web-ui/app/store/builder/[id]/_components/ToolTemplatesModal.tsx b/web-ui/app/store/builder/[id]/_components/ToolTemplatesModal.tsx
index 83769b7c5..f71d81887 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolTemplatesModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolTemplatesModal.tsx
@@ -79,6 +79,7 @@ export function ToolTemplatesModal({
               {t('title')}
             </h2>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only modal close control (X glyph, no text) */}
           <button
             type="button"
             onClick={onClose}
@@ -100,6 +101,7 @@ export function ToolTemplatesModal({
               key={tpl.id}
               className="flex items-center justify-between gap-2 rounded border border-[color:var(--border)] bg-[color:var(--bg)] px-3 py-2 hover:border-[color:var(--accent)]"
             >
+              {/* eslint-disable-next-line no-restricted-syntax -- multi-line template selection tile (label/blurb/id), not a text CTA */}
               <button
                 type="button"
                 onClick={() => {
@@ -126,6 +128,7 @@ export function ToolTemplatesModal({
                 </span>
               </button>
               {tpl.source === 'personal' ? (
+                // eslint-disable-next-line no-restricted-syntax -- icon-only delete control (Trash2 glyph, no text)
                 <button
                   type="button"
                   onClick={() => {
diff --git a/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx b/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx
index 53aba4b24..c92f04fd2 100644
--- a/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx
+++ b/web-ui/app/store/builder/[id]/_components/ToolTestModal.tsx
@@ -123,6 +123,7 @@ export function ToolTestModal({
               {t('subtitle')}
             </p>
           </div>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only modal close control (X glyph, no text) */}
           <button
             type="button"
             onClick={onClose}
diff --git a/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx b/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx
index e4d739bb8..1b9b23d41 100644
--- a/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx
+++ b/web-ui/app/store/builder/[id]/_components/VersionsTab.tsx
@@ -308,15 +308,15 @@ function SmallButton({
   danger,
   disabled,
 }: SmallButtonProps): React.ReactElement {
-  const base =
-    'rounded-md px-2 py-1 text-xs hover:border-current disabled:opacity-50 disabled:cursor-not-allowed';
-  const cls = danger
-    ? `${base} border border-[var(--danger)] text-[var(--danger)]`
-    : `${base} border border-[var(--border)]`;
   return (
-    <button type="button" onClick={onClick} disabled={disabled} className={cls}>
+    <Button
+      variant={danger ? 'danger' : 'secondary'}
+      size="sm"
+      onClick={onClick}
+      disabled={disabled}
+    >
       {children}
-    </button>
+    </Button>
   );
 }
 
@@ -568,14 +568,13 @@ function RollbackModal({
         <Button variant="secondary" onClick={onClose}>
           {t('cancel')}
         </Button>
-        <button
-          type="button"
+        <Button
+          variant="danger"
           onClick={() => void submit()}
           disabled={!matches || busy}
-          className="rounded-md bg-[var(--danger)] px-3 py-2 text-sm font-medium text-[color:var(--fg-on-dark)] disabled:opacity-50"
         >
           {t('rollbackExecute')}
-        </button>
+        </Button>
       </div>
     </ModalShell>
   );
@@ -611,6 +610,7 @@ function ModalShell({
       >
         <div className="mb-3 flex items-center justify-between">
           <h2 className="text-base font-semibold">{title}</h2>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only glyph close (× multiplication sign, no text label) */}
           <button
             type="button"
             onClick={onClose}
diff --git a/web-ui/app/store/builder/[id]/_components/Workspace.tsx b/web-ui/app/store/builder/[id]/_components/Workspace.tsx
index cdecbfc6f..d6cb4550d 100644
--- a/web-ui/app/store/builder/[id]/_components/Workspace.tsx
+++ b/web-ui/app/store/builder/[id]/_components/Workspace.tsx
@@ -1284,6 +1284,7 @@ function MobilePaneTabs({
         const isActive = it.id === active;
         const w = warnings[it.id];
         return (
+          // eslint-disable-next-line no-restricted-syntax -- segmented tablist tab (role=tab, stateful aria-selected active state)
           <button
             key={it.id}
             type="button"
@@ -1505,6 +1506,7 @@ function ViewModeToggle({
         // the tooltip on the inactive one.
         const lockedTitle = disabled ? tw('viewModeLockedTitle') : it.title;
         return (
+          // eslint-disable-next-line no-restricted-syntax -- segmented view-mode tablist tab (role=tab, stateful aria-selected active state)
           <button
             key={it.id}
             type="button"
@@ -1660,6 +1662,7 @@ function AutoFixToggle({
 }): React.ReactElement {
   const tw = useTranslations('builder.workspace');
   return (
+    // eslint-disable-next-line no-restricted-syntax -- stateful toggle switch (role=switch, aria-checked), custom label+pill layout
     <button
       type="button"
       role="switch"
@@ -1747,6 +1750,7 @@ function AutoFixIndicator({
           {tw('autoFixStoppedBody')}
         </div>
       </div>
+      {/* eslint-disable-next-line no-restricted-syntax -- icon-only dismiss control (X glyph, no text) */}
       <button
         type="button"
         onClick={onDismiss}
@@ -1833,6 +1837,7 @@ function EditorTabs({
         const active = t === current;
         const warningCount = warnings?.[t] ?? 0;
         return (
+          // eslint-disable-next-line no-restricted-syntax -- segmented editor-tab tablist tab (role=tab, stateful aria-selected active state)
           <button
             key={t}
             type="button"
@@ -1979,6 +1984,7 @@ function BuildStatusStrip({
                   })
                 : tw('buildErrorsHeading', { count: errors.length })}
             </span>
+            {/* eslint-disable-next-line no-restricted-syntax -- icon-only close control (X glyph, no text) */}
             <button
               type="button"
               onClick={() => setErrorsExpanded(false)}
@@ -2010,6 +2016,7 @@ function BuildStatusStrip({
           {tw('buildStatusLabel')}
         </span>
         {canExpand ? (
+          // eslint-disable-next-line no-restricted-syntax -- stateful build-status pill toggle (aria-expanded), bespoke pill styling, no §4.2 variant
           <button
             type="button"
             onClick={() => setErrorsExpanded((v) => !v)}
diff --git a/web-ui/app/store/builder/_components/DraftRow.tsx b/web-ui/app/store/builder/_components/DraftRow.tsx
index 2164d47a2..06b59f440 100644
--- a/web-ui/app/store/builder/_components/DraftRow.tsx
+++ b/web-ui/app/store/builder/_components/DraftRow.tsx
@@ -127,6 +127,7 @@ export function DraftRow({ draft, deleted = false }: DraftRowProps): React.React
               maxLength={200}
               className="w-full rounded-md border border-[color:var(--border)] bg-[color:var(--bg)] px-2 py-1 font-display text-[20px] leading-tight text-[color:var(--fg-strong)] focus:border-[color:var(--accent)] focus:outline-none"
             />
+            {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (Check icon, p-2, no text) */}
             <button
               type="submit"
               aria-label={t('save')}
@@ -135,6 +136,7 @@ export function DraftRow({ draft, deleted = false }: DraftRowProps): React.React
             >
               <Check className="size-4" aria-hidden />
             </button>
+            {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (X icon, p-2, no text) */}
             <button
               type="button"
               aria-label={t('cancel')}
@@ -154,6 +156,7 @@ export function DraftRow({ draft, deleted = false }: DraftRowProps): React.React
               {draft.name}
             </h3>
             {!deleted && (
+              // eslint-disable-next-line no-restricted-syntax -- icon-only chrome (Pencil icon, p-1, no text)
               <button
                 type="button"
                 aria-label={t('rename')}
@@ -224,6 +227,7 @@ export function DraftRow({ draft, deleted = false }: DraftRowProps): React.React
               {t('workspace')}
               <ArrowRight className="size-3.5" aria-hidden />
             </Link>
+            {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (Trash2 icon, p-2, no text) */}
             <button
               type="button"
               onClick={onDelete}
diff --git a/web-ui/app/store/builder/_components/ExportDraftButton.tsx b/web-ui/app/store/builder/_components/ExportDraftButton.tsx
index 89bdd16c1..92f71c17f 100644
--- a/web-ui/app/store/builder/_components/ExportDraftButton.tsx
+++ b/web-ui/app/store/builder/_components/ExportDraftButton.tsx
@@ -68,6 +68,7 @@ export function ExportDraftButton({
 
   return (
     <div className="relative">
+      {/* eslint-disable-next-line no-restricted-syntax -- chevron/expander (aria-haspopup + aria-expanded menu trigger) */}
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
@@ -132,6 +133,7 @@ function ExportMenuItem({
   onClick: () => void;
 }): React.ReactElement {
   return (
+    // eslint-disable-next-line no-restricted-syntax -- selection tile/row (role=menuitem, full-width flex-col label+hint)
     <button
       type="button"
       role="menuitem"
diff --git a/web-ui/app/store/builder/_components/ImportBundleButton.tsx b/web-ui/app/store/builder/_components/ImportBundleButton.tsx
index ef74c7801..d9b3ea272 100644
--- a/web-ui/app/store/builder/_components/ImportBundleButton.tsx
+++ b/web-ui/app/store/builder/_components/ImportBundleButton.tsx
@@ -132,6 +132,7 @@ function ImportBundleModal({
           <h2 className="text-base font-semibold text-[color:var(--fg-strong)]">
             {t('modal.title')}
           </h2>
+          {/* eslint-disable-next-line no-restricted-syntax -- icon-only chrome (close ×, no text label) */}
           <button
             type="button"
             onClick={onClose}
@@ -147,6 +148,7 @@ function ImportBundleModal({
           })}
         </p>
 
+        {/* eslint-disable-next-line no-restricted-syntax -- bespoke dashed file-dropzone affordance (click + drag-drop picker) */}
         <button
           type="button"
           onClick={() => inputRef.current?.click()}
diff --git a/web-ui/eslint.config.mjs b/web-ui/eslint.config.mjs
index 1476dbe4c..07c376bfb 100644
--- a/web-ui/eslint.config.mjs
+++ b/web-ui/eslint.config.mjs
@@ -29,6 +29,29 @@ const eslintConfig = [
       'react-hooks/set-state-in-effect': 'warn',
     },
   },
+  {
+    // Lume Button gate (issue #290). Raw <button> drifts back in with every
+    // new feature; the material layer keeps the look but not the §6.4 press
+    // feel, and per-call className soup re-diverges from the §4.2 variants.
+    // Flag every raw <button> so a real button goes through the canonical
+    // <Button> (app/_components/ui/Button.tsx). Deliberate non-candidates —
+    // tabs/toggles, icon-only chrome, text-as-link, or a bespoke affordance
+    // with no §4.2 variant — carry an inline
+    // `eslint-disable-next-line no-restricted-syntax` with a one-line reason.
+    // Note: <motion.button> inside the component itself is a member
+    // expression, not `button`, so it is not matched here.
+    files: ['app/**/*.{ts,tsx}'],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: "JSXOpeningElement[name.name='button']",
+          message:
+            'Use the canonical <Button> (app/_components/ui/Button.tsx) for real buttons — it encodes the visual-spec §4.2 variants, §6.4 press/hover feel, and §7.3 busy recipe. For a deliberate non-candidate (tab/toggle, icon-only chrome, text link, or a bespoke affordance with no §4.2 variant), add `eslint-disable-next-line no-restricted-syntax` with a short reason.',
+        },
+      ],
+    },
+  },
 ];
 
 export default eslintConfig;