feat(web-ui): migrate drifted buttons to canonical Button + add raw-<…

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"

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}

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}

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={() => {

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}

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}

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"

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}

web-ui/app/_components/SessionWatcher.tsx

@@ -213,13 +213,15 @@ 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}
           className="flex-1 border border-[color:var(--ink)] bg-[color:var(--ink)] px-3 py-2 text-[11px] uppercase tracking-[0.16em] text-[color:var(--paper)] transition hover:border-[color:var(--accent)] hover:bg-[color:var(--accent)]"
         >
           {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"

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>
   );