From 6bbed0d16258b9783447d44512bc8b056b9c7023 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Fri, 10 Apr 2026 02:30:51 -0700
Subject: [PATCH 1/3] feat: add react/forbid-elements lint rule and migrate all
 raw HTML elements

Adds oxlint react/forbid-elements rule banning raw <button>, <input>,
<textarea>, <select>, and <table> in favor of the @executor/react UI
components. Migrates all 19 affected files to use Button, Input, and
Textarea components with appropriate variants and sizes.
---
 .oxlintrc.jsonc                               | 15 +++++-
 apps/cloud/src/routes/billing.tsx             |  6 ++-
 apps/cloud/src/routes/billing_.plans.tsx      |  9 ++--
 apps/cloud/src/web/shell.tsx                  | 27 ++++++----
 apps/local/src/web/shell.tsx                  | 19 ++++---
 .../src/react/AddGoogleDiscoverySource.tsx    | 18 ++++---
 .../plugins/mcp/src/react/AddMcpSource.tsx    | 19 ++++---
 packages/react/src/components/code-block.tsx  | 26 ++++++----
 .../src/components/expandable-code-block.tsx  |  8 +--
 packages/react/src/components/input.tsx       |  1 +
 .../react/src/components/native-select.tsx    |  1 +
 packages/react/src/components/sidebar.tsx     |  1 +
 packages/react/src/components/table.tsx       |  1 +
 packages/react/src/components/textarea.tsx    |  1 +
 packages/react/src/components/tool-detail.tsx | 29 +++++------
 packages/react/src/components/tool-tree.tsx   | 27 +++++-----
 packages/react/src/pages/source-detail.tsx    | 50 ++++++++++---------
 packages/react/src/pages/sources.tsx          | 13 ++---
 .../react/src/plugins/secret-header-auth.tsx  |  6 ++-
 19 files changed, 164 insertions(+), 113 deletions(-)

diff --git a/.oxlintrc.jsonc b/.oxlintrc.jsonc
index d52e4b6610..d7ad9c9193 100644
--- a/.oxlintrc.jsonc
+++ b/.oxlintrc.jsonc
@@ -1,6 +1,19 @@
 {
-  "ignorePatterns": [".astro/"],
+  "plugins": ["react"],
   "rules": {
     "typescript/no-explicit-any": "error",
+    "react/forbid-elements": [
+      "error",
+      {
+        "forbid": [
+          { "element": "button", "message": "Use <Button> from @executor/react" },
+          { "element": "input", "message": "Use <Input> from @executor/react" },
+          { "element": "textarea", "message": "Use <Textarea> from @executor/react" },
+          { "element": "select", "message": "Use <Select> or <NativeSelect> from @executor/react" },
+          { "element": "table", "message": "Use <Table> from @executor/react" }
+        ]
+      }
+    ],
   },
+  "ignorePatterns": [".astro/"],
 }
diff --git a/apps/cloud/src/routes/billing.tsx b/apps/cloud/src/routes/billing.tsx
index b1a8d8a043..cb37392b41 100644
--- a/apps/cloud/src/routes/billing.tsx
+++ b/apps/cloud/src/routes/billing.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useCustomer, useListPlans } from "autumn-js/react";
+import { Button } from "@executor/react/components/button";
 
 export const Route = createFileRoute("/billing")({
   component: BillingPage,
@@ -87,13 +88,14 @@ function BillingPage() {
           </div>
           <div className="flex items-center gap-2">
             {activePlan && !isCanceling && (
-              <button
+              <Button
+                variant="ghost"
                 type="button"
                 onClick={() => openCustomerPortal()}
                 className="rounded-md px-3 py-1.5 text-[0.75rem] font-medium text-destructive transition-colors hover:bg-destructive/10"
               >
                 Cancel plan
-              </button>
+              </Button>
             )}
             <Link
               to="/billing/plans"
diff --git a/apps/cloud/src/routes/billing_.plans.tsx b/apps/cloud/src/routes/billing_.plans.tsx
index 359a07929b..f4d1fab614 100644
--- a/apps/cloud/src/routes/billing_.plans.tsx
+++ b/apps/cloud/src/routes/billing_.plans.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useCustomer, useListPlans } from "autumn-js/react";
+import { Button } from "@executor/react/components/button";
 
 export const Route = createFileRoute("/billing_/plans")({
   component: PlansPage,
@@ -149,16 +150,16 @@ function PlansPage() {
                         {isCurrent ? "Current plan" : "Scheduled"}
                       </div>
                     ) : isCanceling ? (
-                      <button
+                      <Button
                         type="button"
                         disabled={loadingPlan !== null}
                         onClick={() => openCustomerPortal()}
                         className="flex h-9 w-full items-center justify-center rounded-md bg-primary text-[0.8125rem] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
                       >
                         Resume
-                      </button>
+                      </Button>
                     ) : (
-                      <button
+                      <Button
                         type="button"
                         disabled={loadingPlan !== null}
                         onClick={async () => {
@@ -174,7 +175,7 @@ function PlansPage() {
                         ].join(" ")}
                       >
                         {loadingPlan === plan.id ? "Loading…" : label}
-                      </button>
+                      </Button>
                     )}
                   </div>
 
diff --git a/apps/cloud/src/web/shell.tsx b/apps/cloud/src/web/shell.tsx
index 4586fae377..2de558b72f 100644
--- a/apps/cloud/src/web/shell.tsx
+++ b/apps/cloud/src/web/shell.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { useAtomValue, Result } from "@effect-atom/atom-react";
 import { sourcesAtom } from "@executor/react/api/atoms";
 import { useScope } from "@executor/react/api/scope-context";
-
+import { Button } from "@executor/react/components/button";
 import { AUTH_PATHS } from "../auth/api";
 import { useAuth } from "./auth";
 
@@ -109,9 +109,11 @@ function UserFooter() {
           )}
         </div>
         <form action={AUTH_PATHS.logout} method="post">
-          <button
+          <Button
+            variant="ghost"
+            size="icon-xs"
             type="submit"
-            className="shrink-0 rounded-md p-1 text-muted-foreground/50 transition-colors hover:bg-sidebar-active hover:text-foreground"
+            className="shrink-0 text-muted-foreground/50 hover:bg-sidebar-active hover:text-foreground"
             title="Sign out"
           >
             <svg viewBox="0 0 16 16" fill="none" className="size-3.5">
@@ -123,7 +125,7 @@ function UserFooter() {
                 strokeLinejoin="round"
               />
             </svg>
-          </button>
+          </Button>
         </form>
       </div>
     </div>
@@ -196,6 +198,7 @@ export function Shell() {
       {/* Mobile sidebar overlay */}
       {mobileSidebarOpen && (
         <div className="fixed inset-0 z-50 flex md:hidden">
+          {/* oxlint-disable-next-line react/forbid-elements */}
           <button
             type="button"
             aria-label="Close navigation"
@@ -209,11 +212,13 @@ export function Shell() {
                   executor
                 </span>
               </Link>
-              <button
+              <Button
+                variant="ghost"
+                size="icon-sm"
                 type="button"
                 aria-label="Close navigation"
                 onClick={() => setMobileSidebarOpen(false)}
-                className="size-8 flex items-center justify-center rounded-md text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
+                className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
               >
                 <svg viewBox="0 0 16 16" className="size-3.5">
                   <path
@@ -223,7 +228,7 @@ export function Shell() {
                     strokeLinecap="round"
                   />
                 </svg>
-              </button>
+              </Button>
             </div>
             <SidebarContent
               pathname={pathname}
@@ -238,11 +243,13 @@ export function Shell() {
       <main className="flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
         {/* Mobile top bar */}
         <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
-          <button
+          <Button
+            variant="outline"
+            size="icon-sm"
             type="button"
             aria-label="Open navigation"
             onClick={() => setMobileSidebarOpen(true)}
-            className="size-8 flex items-center justify-center rounded-md border border-border bg-card hover:bg-accent/50"
+            className="bg-card hover:bg-accent/50"
           >
             <svg viewBox="0 0 16 16" className="size-4">
               <path
@@ -252,7 +259,7 @@ export function Shell() {
                 strokeLinecap="round"
               />
             </svg>
-          </button>
+          </Button>
           <Link to="/" className="flex items-center gap-1.5">
             <span className="font-display text-base tracking-tight text-foreground">executor</span>
           </Link>
diff --git a/apps/local/src/web/shell.tsx b/apps/local/src/web/shell.tsx
index 5f01f159af..e2de4c85e3 100644
--- a/apps/local/src/web/shell.tsx
+++ b/apps/local/src/web/shell.tsx
@@ -402,6 +402,7 @@ export function Shell() {
       {/* Mobile sidebar overlay */}
       {mobileSidebarOpen && (
         <div className="fixed inset-0 z-50 flex md:hidden">
+          {/* oxlint-disable-next-line react/forbid-elements */}
           <button
             type="button"
             aria-label="Close navigation"
@@ -415,11 +416,12 @@ export function Shell() {
                   executor
                 </span>
               </Link>
-              <button
-                type="button"
+              <Button
+                variant="ghost"
+                size="icon-sm"
                 aria-label="Close navigation"
                 onClick={() => setMobileSidebarOpen(false)}
-                className="size-8 flex items-center justify-center rounded-md text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
+                className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
               >
                 <svg viewBox="0 0 16 16" className="size-3.5">
                   <path
@@ -429,7 +431,7 @@ export function Shell() {
                     strokeLinecap="round"
                   />
                 </svg>
-              </button>
+              </Button>
             </div>
             <SidebarContent
               pathname={pathname}
@@ -447,11 +449,12 @@ export function Shell() {
       <main className="flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
         {/* Mobile top bar */}
         <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
-          <button
-            type="button"
+          <Button
+            variant="outline"
+            size="icon-sm"
             aria-label="Open navigation"
             onClick={() => setMobileSidebarOpen(true)}
-            className="size-8 flex items-center justify-center rounded-md border border-border bg-card hover:bg-accent/50"
+            className="bg-card hover:bg-accent/50"
           >
             <svg viewBox="0 0 16 16" className="size-4">
               <path
@@ -461,7 +464,7 @@ export function Shell() {
                 strokeLinecap="round"
               />
             </svg>
-          </button>
+          </Button>
           <Link to="/" className="flex items-center gap-1.5">
             <span className="font-display text-base tracking-tight text-foreground">executor</span>
           </Link>
diff --git a/packages/plugins/google-discovery/src/react/AddGoogleDiscoverySource.tsx b/packages/plugins/google-discovery/src/react/AddGoogleDiscoverySource.tsx
index ff1f23b186..89621e6958 100644
--- a/packages/plugins/google-discovery/src/react/AddGoogleDiscoverySource.tsx
+++ b/packages/plugins/google-discovery/src/react/AddGoogleDiscoverySource.tsx
@@ -481,7 +481,7 @@ export default function AddGoogleDiscoverySource(props: {
     } finally {
       setLoadingProbe(false);
     }
-  }, [discoveryUrl, doProbe, name]);
+  }, [discoveryUrl, doProbe, name, scopeId]);
 
   const autoProbed = useRef(false);
   useEffect(() => {
@@ -573,7 +573,7 @@ export default function AddGoogleDiscoverySource(props: {
       setError(e instanceof Error ? e.message : "Failed to add source");
       setAdding(false);
     }
-  }, [probe, doAdd, name, discoveryUrl, authKind, oauthAuth, props]);
+  }, [probe, doAdd, name, discoveryUrl, authKind, oauthAuth, props, scopeId]);
 
   const addDisabled =
     !probe || adding || (authKind === "oauth2" && (!canUseOAuth || oauthAuth === null));
@@ -598,11 +598,12 @@ export default function AddGoogleDiscoverySource(props: {
           {GOOGLE_DISCOVERY_TEMPLATES.map((template) => {
             const selected = template.id === selectedTemplateId;
             return (
-              <button
+              <Button
                 key={template.id}
+                variant="ghost"
                 type="button"
                 onClick={() => applyTemplate(template)}
-                className={`relative rounded-xl border px-4 py-3 text-left transition-colors ${
+                className={`relative h-auto rounded-xl border px-4 py-3 text-left transition-colors ${
                   selected
                     ? "border-primary bg-primary/5 shadow-[0_0_0_1px_rgba(0,0,0,0.02)]"
                     : "border-border bg-card hover:border-primary/30 hover:bg-card/80"
@@ -628,7 +629,7 @@ export default function AddGoogleDiscoverySource(props: {
                   </p>
                   <div className="h-px flex-1 bg-border/70" />
                 </div>
-              </button>
+              </Button>
             );
           })}
         </div>
@@ -737,12 +738,13 @@ export default function AddGoogleDiscoverySource(props: {
                   </p>
                   {canUseOAuth && (probe?.scopes.length ?? 0) > 0 && (
                     <CollapsibleTrigger asChild>
-                      <button
+                      <Button
+                        variant="link"
                         type="button"
-                        className="text-xs font-medium text-primary hover:underline"
+                        className="h-auto p-0 text-xs font-medium text-primary hover:underline"
                       >
                         {showScopes ? "Hide scopes" : "View scopes"}
-                      </button>
+                      </Button>
                     </CollapsibleTrigger>
                   )}
                 </div>
diff --git a/packages/plugins/mcp/src/react/AddMcpSource.tsx b/packages/plugins/mcp/src/react/AddMcpSource.tsx
index 041bc3028e..2768bfe427 100644
--- a/packages/plugins/mcp/src/react/AddMcpSource.tsx
+++ b/packages/plugins/mcp/src/react/AddMcpSource.tsx
@@ -8,6 +8,7 @@ import { Label } from "@executor/react/components/label";
 import { Badge } from "@executor/react/components/badge";
 import { RadioGroup, RadioGroupItem } from "@executor/react/components/radio-group";
 import { Spinner } from "@executor/react/components/spinner";
+import { Textarea } from "@executor/react/components/textarea";
 import { SecretHeaderAuthRow } from "@executor/react/plugins/secret-header-auth";
 import { useSecretPickerSecrets } from "@executor/react/plugins/use-secret-picker-secrets";
 import { probeMcpEndpoint, addMcpSource, startMcpOAuth } from "./atoms";
@@ -420,7 +421,7 @@ export default function AddMcpSource(props: {
         error: e instanceof Error ? e.message : "Failed to add source",
       });
     }
-  }, [probe, remoteAuthMode, remoteHeaderAuth, remoteHeaders, tokens, state.url, doAdd, props]);
+  }, [probe, remoteAuthMode, remoteHeaderAuth, remoteHeaders, tokens, state.url, doAdd, props, scopeId]);
 
   // ---- Stdio actions ----
 
@@ -483,7 +484,8 @@ export default function AddMcpSource(props: {
 
       {/* Transport toggle */}
       <div className="flex gap-1 rounded-lg border border-border bg-muted/30 p-1">
-        <button
+        <Button
+          variant="ghost"
           type="button"
           onClick={() => setTransport("remote")}
           className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
@@ -493,8 +495,9 @@ export default function AddMcpSource(props: {
           }`}
         >
           Remote
-        </button>
-        <button
+        </Button>
+        <Button
+          variant="ghost"
           type="button"
           onClick={() => setTransport("stdio")}
           className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
@@ -504,7 +507,7 @@ export default function AddMcpSource(props: {
           }`}
         >
           Stdio
-        </button>
+        </Button>
       </div>
 
       {transport === "remote" ? (
@@ -936,12 +939,12 @@ export default function AddMcpSource(props: {
                 Environment variables{" "}
                 <span className="text-muted-foreground font-normal">(optional)</span>
               </Label>
-              <textarea
+              <Textarea
                 value={stdioEnv}
-                onChange={(e) => setStdioEnv(e.target.value)}
+                onChange={(e) => setStdioEnv((e.target as HTMLTextAreaElement).value)}
                 placeholder={"KEY=value\nANOTHER=value"}
                 rows={3}
-                className="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="font-mono text-sm"
               />
               <p className="text-[12px] text-muted-foreground">One per line, KEY=value format.</p>
             </div>
diff --git a/packages/react/src/components/code-block.tsx b/packages/react/src/components/code-block.tsx
index 046f170be6..f2b870f3ba 100644
--- a/packages/react/src/components/code-block.tsx
+++ b/packages/react/src/components/code-block.tsx
@@ -3,6 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
 import { getHighlighter, resolveLang, THEME } from "../lib/shiki";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 
 // ---------------------------------------------------------------------------
 // Language detection
@@ -113,26 +114,28 @@ export function CodeBlock(props: {
           <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
             {title}
           </span>
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="icon-xs"
             onClick={handleCopy}
-            className="size-6 flex items-center justify-center text-muted-foreground/30 hover:text-muted-foreground transition-colors"
+            className="text-muted-foreground/30 hover:text-muted-foreground"
             title="Copy"
           >
             {copied ? <CheckIcon /> : <CopyIcon />}
-          </button>
+          </Button>
         </div>
       )}
       <div className="group relative">
         {!title && (
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="icon-xs"
             onClick={handleCopy}
             className="absolute right-2 top-2 z-10 rounded-md border border-border bg-card/90 p-1.5 text-muted-foreground/40 opacity-0 backdrop-blur-sm hover:text-foreground group-hover:opacity-100 transition-opacity"
             title="Copy to clipboard"
           >
             {copied ? <CheckIcon /> : <CopyIcon />}
-          </button>
+          </Button>
         )}
 
         <div
@@ -148,13 +151,14 @@ export function CodeBlock(props: {
 
         {isLong && !expanded && (
           <div className="absolute bottom-0 left-0 right-0 flex justify-center bg-gradient-to-t from-card/90 to-transparent pb-2 pt-8">
-            <button
-              type="button"
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => setExpanded(true)}
-              className="rounded-md border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors"
+              className="text-[11px] font-medium text-muted-foreground hover:text-foreground"
             >
               Show all ({lines.length} lines)
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/packages/react/src/components/expandable-code-block.tsx b/packages/react/src/components/expandable-code-block.tsx
index fb43428876..9247871a5b 100644
--- a/packages/react/src/components/expandable-code-block.tsx
+++ b/packages/react/src/components/expandable-code-block.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState, startTransition } from "react";
 import { getHighlighter, THEME } from "../lib/shiki";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 import type { ThemedToken } from "shiki/core";
 
 // ---------------------------------------------------------------------------
@@ -371,14 +372,15 @@ export function ExpandableCodeBlock(props: {
   return (
     <div className={cn("rounded-lg border border-border/40 bg-card/60 overflow-hidden", className)}>
       <div className="group relative">
-        <button
-          type="button"
+        <Button
+          variant="ghost"
+          size="icon-xs"
           onClick={handleCopy}
           className="absolute right-2 top-2 z-10 rounded-md border border-border bg-card/90 p-1.5 text-muted-foreground/40 opacity-0 backdrop-blur-sm hover:text-foreground group-hover:opacity-100 transition-opacity"
           title="Copy to clipboard"
         >
           {copied ? <CheckIcon /> : <CopyIcon />}
-        </button>
+        </Button>
 
         <pre className="overflow-auto p-3 font-mono text-[0.75rem] leading-6 !bg-transparent">
           <code>
diff --git a/packages/react/src/components/input.tsx b/packages/react/src/components/input.tsx
index 31e047d0c7..93dd42741c 100644
--- a/packages/react/src/components/input.tsx
+++ b/packages/react/src/components/input.tsx
@@ -4,6 +4,7 @@ import { cn } from "../lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
+    // oxlint-disable-next-line react/forbid-elements
     <input
       type={type}
       data-slot="input"
diff --git a/packages/react/src/components/native-select.tsx b/packages/react/src/components/native-select.tsx
index 0af6d10a81..6b970cdef1 100644
--- a/packages/react/src/components/native-select.tsx
+++ b/packages/react/src/components/native-select.tsx
@@ -13,6 +13,7 @@ function NativeSelect({
       className="group/native-select relative w-fit has-[select:disabled]:opacity-50"
       data-slot="native-select-wrapper"
     >
+      {/* oxlint-disable-next-line react/forbid-elements */}
       <select
         data-slot="native-select"
         data-size={size}
diff --git a/packages/react/src/components/sidebar.tsx b/packages/react/src/components/sidebar.tsx
index 3b360d0413..054c1a050a 100644
--- a/packages/react/src/components/sidebar.tsx
+++ b/packages/react/src/components/sidebar.tsx
@@ -263,6 +263,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar();
 
   return (
+    // oxlint-disable-next-line react/forbid-elements
     <button
       data-sidebar="rail"
       data-slot="sidebar-rail"
diff --git a/packages/react/src/components/table.tsx b/packages/react/src/components/table.tsx
index f86a030e8d..f14b654b35 100644
--- a/packages/react/src/components/table.tsx
+++ b/packages/react/src/components/table.tsx
@@ -7,6 +7,7 @@ import { cn } from "../lib/utils";
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
     <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      {/* oxlint-disable-next-line react/forbid-elements */}
       <table
         data-slot="table"
         className={cn("w-full caption-bottom text-sm", className)}
diff --git a/packages/react/src/components/textarea.tsx b/packages/react/src/components/textarea.tsx
index e498cb8968..1de0bcc307 100644
--- a/packages/react/src/components/textarea.tsx
+++ b/packages/react/src/components/textarea.tsx
@@ -4,6 +4,7 @@ import { cn } from "../lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
+    // oxlint-disable-next-line react/forbid-elements
     <textarea
       data-slot="textarea"
       className={cn(
diff --git a/packages/react/src/components/tool-detail.tsx b/packages/react/src/components/tool-detail.tsx
index c95c7d3b64..47acb8c24a 100644
--- a/packages/react/src/components/tool-detail.tsx
+++ b/packages/react/src/components/tool-detail.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { useAtomValue, Result } from "@effect-atom/atom-react";
 import { toolSchemaAtom } from "../api/atoms";
 import { ScopeId, ToolId } from "@executor/sdk";
-
+import { Button } from "./button";
 import { Markdown } from "./markdown";
 import { SchemaExplorer } from "./schema-explorer";
 import { ExpandableCodeBlock } from "./expandable-code-block";
@@ -16,19 +16,20 @@ function CopyButton(props: { text: string; label?: string }) {
   const [copied, setCopied] = useState(false);
 
   return (
-    <button
-      type="button"
+    <Button
+      variant="ghost"
+      size="icon-xs"
       onClick={() => {
         void navigator.clipboard.writeText(props.text).then(() => {
           setCopied(true);
           setTimeout(() => setCopied(false), 1500);
         });
       }}
-      className="size-6 shrink-0 flex items-center justify-center text-muted-foreground/30 hover:text-muted-foreground transition-colors"
+      className="shrink-0 text-muted-foreground/30 hover:text-muted-foreground transition-colors"
       title={props.label ?? "Copy"}
     >
       {copied ? <Check className="size-3.5 shrink-0" /> : <Copy className="size-3.5 shrink-0" />}
-    </button>
+    </Button>
   );
 }
 
@@ -80,7 +81,7 @@ export function ToolDetail(props: {
       outputTypeScript: v.outputTypeScript ? `type Output = ${v.outputTypeScript}` : null,
       definitions,
     };
-  }, [toolContract, props.toolName]);
+  }, [toolContract]);
 
   const crumbs = breadcrumbParts(props.toolName);
   const displayName = friendlyName(props.toolName);
@@ -112,34 +113,34 @@ export function ToolDetail(props: {
 
           {/* Tabs */}
           <div className="mt-3 flex gap-4" role="tablist">
-            <button
-              type="button"
+            <Button
+              variant="ghost"
               role="tab"
               aria-selected={tab === "schema"}
               onClick={() => setTab("schema")}
               className={[
-                "border-b-2 pb-2.5 text-sm font-medium transition-colors",
+                "border-b-2 pb-2.5 text-sm font-medium transition-colors rounded-none",
                 tab === "schema"
                   ? "border-primary text-foreground"
                   : "border-transparent text-muted-foreground/50 hover:text-muted-foreground",
               ].join(" ")}
             >
               Schema
-            </button>
-            <button
-              type="button"
+            </Button>
+            <Button
+              variant="ghost"
               role="tab"
               aria-selected={tab === "typescript"}
               onClick={() => setTab("typescript")}
               className={[
-                "border-b-2 pb-2.5 text-sm font-medium transition-colors",
+                "border-b-2 pb-2.5 text-sm font-medium transition-colors rounded-none",
                 tab === "typescript"
                   ? "border-primary text-foreground"
                   : "border-transparent text-muted-foreground/50 hover:text-muted-foreground",
               ].join(" ")}
             >
               TypeScript
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/packages/react/src/components/tool-tree.tsx b/packages/react/src/components/tool-tree.tsx
index a7ff984714..be6cf566dd 100644
--- a/packages/react/src/components/tool-tree.tsx
+++ b/packages/react/src/components/tool-tree.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "./button";
+import { Input } from "./input";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -161,8 +163,8 @@ function TreeNodeView(props: {
 
   return (
     <div>
-      <button
-        type="button"
+      <Button
+        variant="ghost"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open}
         className="group flex h-auto w-full items-center gap-1.5 rounded-md py-1 pr-2.5 text-[12px] hover:bg-accent/40 text-left"
@@ -184,7 +186,7 @@ function TreeNodeView(props: {
         <span className="shrink-0 tabular-nums text-[10px] text-muted-foreground/25">
           {leafCount}
         </span>
-      </button>
+      </Button>
 
       {open && hasChildren && (
         <div className="relative flex flex-col gap-px">
@@ -232,9 +234,9 @@ function ToolLeafItem(props: {
   }, [props.active]);
 
   return (
-    <button
+    <Button
       ref={ref}
-      type="button"
+      variant="ghost"
       onClick={props.onSelect}
       className={[
         "group flex h-auto w-full items-center gap-2 rounded-md py-1.5 pr-2.5 text-left",
@@ -255,7 +257,7 @@ function ToolLeafItem(props: {
       <span className="flex-1 truncate font-mono text-[12px]">
         {highlightMatch(label, props.search)}
       </span>
-    </button>
+    </Button>
   );
 }
 
@@ -313,21 +315,22 @@ export function ToolTree(props: {
               strokeLinecap="round"
             />
           </svg>
-          <input
+          <Input
             ref={searchRef}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder={`Filter ${props.tools.length} tools…`}
-            className="min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] shadow-none outline-none placeholder:text-muted-foreground/40"
+            className="min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] shadow-none outline-none placeholder:text-muted-foreground/40 h-auto rounded-none focus-visible:ring-0 focus-visible:border-transparent"
           />
           {search.length > 0 ? (
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              size="icon-xs"
               onClick={() => setSearch("")}
-              className="size-5 shrink-0 flex items-center justify-center text-muted-foreground/40 hover:text-foreground"
+              className="size-5 shrink-0 text-muted-foreground/40 hover:text-foreground"
             >
               ×
-            </button>
+            </Button>
           ) : (
             <kbd className="shrink-0 rounded border border-border bg-muted px-1 py-px text-[10px] leading-none text-muted-foreground/50">
               /
diff --git a/packages/react/src/pages/source-detail.tsx b/packages/react/src/pages/source-detail.tsx
index 841bf39e11..47b23b24da 100644
--- a/packages/react/src/pages/source-detail.tsx
+++ b/packages/react/src/pages/source-detail.tsx
@@ -13,6 +13,7 @@ import { ToolDetail, ToolDetailEmpty } from "../components/tool-detail";
 import type { ToolSummary } from "../components/tool-tree";
 import { useScope } from "../hooks/use-scope";
 import type { SourcePlugin } from "../plugins/source-plugin";
+import { Button } from "../components/button";
 
 export function SourceDetailPage(props: {
   namespace: string;
@@ -131,34 +132,34 @@ export function SourceDetailPage(props: {
 
         <div className="flex shrink-0 items-center gap-2">
           {canEdit && editPlugin && !editing && (
-            <button
-              type="button"
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => setEditing(true)}
-              className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1 text-[12px] font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50"
             >
               Edit
-            </button>
+            </Button>
           )}
 
           {editing && (
-            <button
-              type="button"
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => setEditing(false)}
-              className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1 text-[12px] font-medium text-foreground transition-colors hover:bg-accent"
             >
               Back to tools
-            </button>
+            </Button>
           )}
 
           {canRefresh && !editing && (
-            <button
-              type="button"
+            <Button
+              variant="outline"
+              size="sm"
               onClick={() => void handleRefresh()}
               disabled={refreshing}
-              className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1 text-[12px] font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50"
             >
               {refreshing ? "Refreshing..." : "Refresh"}
-            </button>
+            </Button>
           )}
 
           {canRemove &&
@@ -166,31 +167,32 @@ export function SourceDetailPage(props: {
             (confirmDelete ? (
               <div className="flex items-center gap-2">
                 <span className="text-[11px] font-medium text-destructive">Confirm?</span>
-                <button
-                  type="button"
+                <Button
+                  variant="outline"
+                  size="sm"
                   onClick={() => setConfirmDelete(false)}
                   disabled={deleting}
-                  className="inline-flex items-center rounded-md border border-border bg-background px-2.5 py-1 text-[12px] font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50"
                 >
                   Cancel
-                </button>
-                <button
-                  type="button"
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="sm"
                   onClick={() => void handleDelete()}
                   disabled={deleting}
-                  className="inline-flex items-center rounded-md border border-destructive/30 bg-destructive/10 px-2.5 py-1 text-[12px] font-medium text-destructive transition-colors hover:bg-destructive/20 disabled:opacity-50"
                 >
                   {deleting ? "Deleting..." : "Delete"}
-                </button>
+                </Button>
               </div>
             ) : (
-              <button
-                type="button"
+              <Button
+                variant="outline"
+                size="sm"
                 onClick={() => setConfirmDelete(true)}
-                className="inline-flex items-center rounded-md border border-destructive/30 bg-background px-2.5 py-1 text-[12px] font-medium text-destructive transition-colors hover:bg-destructive/10"
+                className="border-destructive/30 text-destructive hover:bg-destructive/10"
               >
                 Delete
-              </button>
+              </Button>
             ))}
         </div>
       </div>
diff --git a/packages/react/src/pages/sources.tsx b/packages/react/src/pages/sources.tsx
index 7c26dea35d..a78c23e37d 100644
--- a/packages/react/src/pages/sources.tsx
+++ b/packages/react/src/pages/sources.tsx
@@ -5,6 +5,8 @@ import { sourcesAtom, detectSource } from "../api/atoms";
 import { useScope } from "../hooks/use-scope";
 import type { SourcePlugin, SourcePreset } from "../plugins/source-plugin";
 import { McpInstallCard } from "../components/mcp-install-card";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
 
 const KIND_TO_PLUGIN_KEY: Record<string, string> = {
   openapi: "openapi",
@@ -79,11 +81,11 @@ export function SourcesPage(props: { sourcePlugins: readonly SourcePlugin[] }) {
           {/* URL detection input */}
           <div className="mt-5">
             <div className="flex gap-2">
-              <input
+              <Input
                 type="url"
                 value={url}
                 onChange={(e) => {
-                  setUrl(e.target.value);
+                  setUrl((e.target as HTMLInputElement).value);
                   setError(null);
                 }}
                 onKeyDown={(e) => {
@@ -91,15 +93,14 @@ export function SourcesPage(props: { sourcePlugins: readonly SourcePlugin[] }) {
                 }}
                 placeholder="Paste a URL to auto-detect source type..."
                 disabled={detecting}
-                className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+                className="flex-1"
               />
-              <button
+              <Button
                 onClick={handleDetect}
                 disabled={detecting || !url.trim()}
-                className="inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none"
               >
                 {detecting ? "Detecting..." : "Detect"}
-              </button>
+              </Button>
             </div>
             {error && <p className="mt-2 text-sm text-destructive">{error}</p>}
             <div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
diff --git a/packages/react/src/plugins/secret-header-auth.tsx b/packages/react/src/plugins/secret-header-auth.tsx
index cb0b8ee90b..9e0c4163c8 100644
--- a/packages/react/src/plugins/secret-header-auth.tsx
+++ b/packages/react/src/plugins/secret-header-auth.tsx
@@ -343,8 +343,10 @@ export function SecretHeaderAuthRow(props: {
 
       <div className="flex flex-wrap gap-1">
         {presets.map((preset) => (
-          <button
+          <Button
             key={preset.key}
+            variant="ghost"
+            size="sm"
             type="button"
             onClick={() =>
               onChange({
@@ -360,7 +362,7 @@ export function SecretHeaderAuthRow(props: {
             }`}
           >
             {preset.label}
-          </button>
+          </Button>
         ))}
       </div>
 

From 22cd8dad42ef5c33e3b962bd3bcd6cee9b686efa Mon Sep 17 00:00:00 2001
From: RhysSullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Fri, 10 Apr 2026 09:31:45 +0000
Subject: [PATCH 2/3] style: format

---
 .oxlintrc.jsonc                                 |  6 +++---
 packages/plugins/mcp/src/react/AddMcpSource.tsx | 12 +++++++++++-
 packages/react/src/pages/source-detail.tsx      | 12 ++----------
 packages/react/src/pages/sources.tsx            |  5 +----
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/.oxlintrc.jsonc b/.oxlintrc.jsonc
index d7ad9c9193..61ef8c5fe3 100644
--- a/.oxlintrc.jsonc
+++ b/.oxlintrc.jsonc
@@ -10,9 +10,9 @@
           { "element": "input", "message": "Use <Input> from @executor/react" },
           { "element": "textarea", "message": "Use <Textarea> from @executor/react" },
           { "element": "select", "message": "Use <Select> or <NativeSelect> from @executor/react" },
-          { "element": "table", "message": "Use <Table> from @executor/react" }
-        ]
-      }
+          { "element": "table", "message": "Use <Table> from @executor/react" },
+        ],
+      },
     ],
   },
   "ignorePatterns": [".astro/"],
diff --git a/packages/plugins/mcp/src/react/AddMcpSource.tsx b/packages/plugins/mcp/src/react/AddMcpSource.tsx
index 2768bfe427..672bd3f27b 100644
--- a/packages/plugins/mcp/src/react/AddMcpSource.tsx
+++ b/packages/plugins/mcp/src/react/AddMcpSource.tsx
@@ -421,7 +421,17 @@ export default function AddMcpSource(props: {
         error: e instanceof Error ? e.message : "Failed to add source",
       });
     }
-  }, [probe, remoteAuthMode, remoteHeaderAuth, remoteHeaders, tokens, state.url, doAdd, props, scopeId]);
+  }, [
+    probe,
+    remoteAuthMode,
+    remoteHeaderAuth,
+    remoteHeaders,
+    tokens,
+    state.url,
+    doAdd,
+    props,
+    scopeId,
+  ]);
 
   // ---- Stdio actions ----
 
diff --git a/packages/react/src/pages/source-detail.tsx b/packages/react/src/pages/source-detail.tsx
index 47b23b24da..1e9822d886 100644
--- a/packages/react/src/pages/source-detail.tsx
+++ b/packages/react/src/pages/source-detail.tsx
@@ -132,21 +132,13 @@ export function SourceDetailPage(props: {
 
         <div className="flex shrink-0 items-center gap-2">
           {canEdit && editPlugin && !editing && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setEditing(true)}
-            >
+            <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
               Edit
             </Button>
           )}
 
           {editing && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setEditing(false)}
-            >
+            <Button variant="outline" size="sm" onClick={() => setEditing(false)}>
               Back to tools
             </Button>
           )}
diff --git a/packages/react/src/pages/sources.tsx b/packages/react/src/pages/sources.tsx
index a78c23e37d..dccb4f7584 100644
--- a/packages/react/src/pages/sources.tsx
+++ b/packages/react/src/pages/sources.tsx
@@ -95,10 +95,7 @@ export function SourcesPage(props: { sourcePlugins: readonly SourcePlugin[] }) {
                 disabled={detecting}
                 className="flex-1"
               />
-              <Button
-                onClick={handleDetect}
-                disabled={detecting || !url.trim()}
-              >
+              <Button onClick={handleDetect} disabled={detecting || !url.trim()}>
                 {detecting ? "Detecting..." : "Detect"}
               </Button>
             </div>

From ec491d6737d0345d0a28fcc801b4fcbd8b48a0a3 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Fri, 10 Apr 2026 02:35:11 -0700
Subject: [PATCH 3/3] feat: ban raw <label> elements, migrate to Label
 component

---
 .oxlintrc.jsonc                                  |  1 +
 packages/plugins/mcp/src/react/AddMcpSource.tsx  | 12 ++++++------
 .../openapi/src/react/AddOpenApiSource.tsx       | 16 ++++++++--------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/.oxlintrc.jsonc b/.oxlintrc.jsonc
index 61ef8c5fe3..f2855e4318 100644
--- a/.oxlintrc.jsonc
+++ b/.oxlintrc.jsonc
@@ -11,6 +11,7 @@
           { "element": "textarea", "message": "Use <Textarea> from @executor/react" },
           { "element": "select", "message": "Use <Select> or <NativeSelect> from @executor/react" },
           { "element": "table", "message": "Use <Table> from @executor/react" },
+          { "element": "label", "message": "Use <Label> from @executor/react" },
         ],
       },
     ],
diff --git a/packages/plugins/mcp/src/react/AddMcpSource.tsx b/packages/plugins/mcp/src/react/AddMcpSource.tsx
index 672bd3f27b..0224724e95 100644
--- a/packages/plugins/mcp/src/react/AddMcpSource.tsx
+++ b/packages/plugins/mcp/src/react/AddMcpSource.tsx
@@ -616,7 +616,7 @@ export default function AddMcpSource(props: {
                 className="gap-1.5"
               >
                 {!probe.requiresOAuth && (
-                  <label
+                  <Label
                     className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                       remoteAuthMode === "none"
                         ? "border-primary/50 bg-primary/[0.03]"
@@ -628,10 +628,10 @@ export default function AddMcpSource(props: {
                     <span className="ml-auto text-[10px] text-muted-foreground">
                       no auth header
                     </span>
-                  </label>
+                  </Label>
                 )}
 
-                <label
+                <Label
                   className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                     remoteAuthMode === "header"
                       ? "border-primary/50 bg-primary/[0.03]"
@@ -643,10 +643,10 @@ export default function AddMcpSource(props: {
                   <span className="ml-auto text-[10px] text-muted-foreground">
                     use a secret-backed auth header
                   </span>
-                </label>
+                </Label>
 
                 {probe.requiresOAuth && (
-                  <label
+                  <Label
                     className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                       remoteAuthMode === "oauth2"
                         ? "border-primary/50 bg-primary/[0.03]"
@@ -658,7 +658,7 @@ export default function AddMcpSource(props: {
                     <span className="ml-auto text-[10px] text-muted-foreground">
                       sign in with the server&apos;s OAuth flow
                     </span>
-                  </label>
+                  </Label>
                 )}
               </RadioGroup>
 
diff --git a/packages/plugins/openapi/src/react/AddOpenApiSource.tsx b/packages/plugins/openapi/src/react/AddOpenApiSource.tsx
index 8c31dd62ab..8bbc5de02a 100644
--- a/packages/plugins/openapi/src/react/AddOpenApiSource.tsx
+++ b/packages/plugins/openapi/src/react/AddOpenApiSource.tsx
@@ -296,7 +296,7 @@ export default function AddOpenApiSource(props: {
                   {servers.map((s, i) => {
                     const url = s.url ?? "";
                     return (
-                      <label
+                      <Label
                         key={i}
                         className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                           baseUrl === url
@@ -306,7 +306,7 @@ export default function AddOpenApiSource(props: {
                       >
                         <RadioGroupItem value={url} />
                         <span className="font-mono text-xs text-foreground truncate">{url}</span>
-                      </label>
+                      </Label>
                     );
                   })}
                 </RadioGroup>
@@ -345,7 +345,7 @@ export default function AddOpenApiSource(props: {
                 className="gap-1.5"
               >
                 {presets.map((preset, i) => (
-                  <label
+                  <Label
                     key={i}
                     className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                       presetIndex === i
@@ -361,10 +361,10 @@ export default function AddOpenApiSource(props: {
                         {preset.secretHeaders.length > 1 ? "s" : ""}
                       </span>
                     )}
-                  </label>
+                  </Label>
                 ))}
 
-                <label
+                <Label
                   className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                     presetIndex === -2
                       ? "border-primary/50 bg-primary/[0.03]"
@@ -376,9 +376,9 @@ export default function AddOpenApiSource(props: {
                   <span className="ml-auto text-[10px] text-muted-foreground">
                     configure manually
                   </span>
-                </label>
+                </Label>
 
-                <label
+                <Label
                   className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 cursor-pointer transition-colors ${
                     presetIndex === -1
                       ? "border-primary/50 bg-primary/[0.03]"
@@ -388,7 +388,7 @@ export default function AddOpenApiSource(props: {
                   <RadioGroupItem value="-1" />
                   <span className="text-xs font-medium text-foreground">None</span>
                   <span className="ml-auto text-[10px] text-muted-foreground">skip auth</span>
-                </label>
+                </Label>
               </RadioGroup>
             )}