diff --git a/packages/plugin-game-theory/src/GameTheoryExplorer.tsx b/packages/plugin-game-theory/src/GameTheoryExplorer.tsx
index 10038e7..3597c71 100644
--- a/packages/plugin-game-theory/src/GameTheoryExplorer.tsx
+++ b/packages/plugin-game-theory/src/GameTheoryExplorer.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback } from "react";
 import { useGameTheoryData } from "./useGameTheoryData";
 import type { GTNode } from "./useGameTheoryData";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button, Select } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 
 const GT_SPINNER_ID = "gt-spinner-keyframes";
@@ -57,7 +57,8 @@ const NODE_SIZE = 30;
 /*  Helper: Section header                                             */
 /* ------------------------------------------------------------------ */
 
-function Section({ title, color, borderColor, sz, children }: { title: string; color: string; borderColor?: string; sz: (px: number) => number; children: React.ReactNode }) {
+function Section({ title, color, borderColor, children }: { title: string; color: string; borderColor?: string; children: React.ReactNode }) {
+  const { theme, sz } = useTheme();
   return (
     <div style={{ marginBottom: sz(16) }}>
       <div style={{
@@ -1135,7 +1136,7 @@ export function GameTheoryExplorer(_props: GameTheoryExplorerProps) {
           </div>
         )}
         {actions.length > 0 && (
-          <Section title="Actions" color={theme.text.subtle} sz={sz}>
+          <Section title="Actions" color={theme.text.subtle}>
             <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
               {actions.map(au => (
                 <span key={au} style={{
@@ -1150,7 +1151,7 @@ export function GameTheoryExplorer(_props: GameTheoryExplorerProps) {
           </Section>
         )}
         {payoffUris.length > 0 && (
-          <Section title="Payoffs" color={theme.text.subtle} sz={sz}>
+          <Section title="Payoffs" color={theme.text.subtle}>
             <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
               {payoffUris.map(pu => {
                 const plUri = data.payoffPlayer.get(pu);
@@ -1250,38 +1251,28 @@ export function GameTheoryExplorer(_props: GameTheoryExplorerProps) {
         alignItems: "center",
       }}>
         {([["tree", "\u229E Game Tree"], ["matrix", "\u229E Payoff Matrix"], ["sandbox", "\u229E Sandbox"]] as const).map(([m, label]) => (
-          <button
+          <Button
             key={m}
+            size="sm"
+            active={mode === m}
             onClick={() => setMode(m as ExplorerMode)}
-            style={{
-              padding: "5px 14px", borderRadius: 5, border: "none", cursor: "pointer",
-              background: mode === m ? theme.surface.cardHover : "transparent",
-              color: mode === m ? theme.text.primary : theme.text.faint,
-              fontFamily: theme.font.mono, fontSize: sz(11),
-              fontWeight: mode === m ? 600 : 400, transition: "all 0.15s",
-            }}
           >
             {label}
-          </button>
+          </Button>
         ))}
 
         <div style={{ flex: 1 }} />
 
         {games.length > 1 && (
-          <select
+          <Select
             value={activeGameUri || ""}
-            onChange={e => setSelectedGameUri(e.target.value || null)}
-            style={{
-              background: theme.surface.cardHover, border: `1px solid ${theme.border.medium}`,
-              borderRadius: 4, padding: "3px 8px", color: theme.text.secondary,
-              fontFamily: theme.font.mono, fontSize: sz(10),
-              outline: "none",
-            }}
+            onChange={v => setSelectedGameUri(v || null)}
+            style={{ fontSize: sz(10) }}
           >
             {games.map(g => (
               <option key={g.uri} value={g.uri}>{g.label}</option>
             ))}
-          </select>
+          </Select>
         )}
       </div>
 
@@ -1333,22 +1324,14 @@ export function GameTheoryExplorer(_props: GameTheoryExplorerProps) {
               }}>
                 Parameter Sandbox
               </div>
-              <button
-                onClick={resetOverrides}
-                style={{
-                  padding: "2px 8px", borderRadius: 3, border: `1px solid ${theme.border.medium}`,
-                  background: theme.surface.cardHover, color: theme.text.muted,
-                  fontFamily: theme.font.mono, fontSize: sz(9),
-                  cursor: "pointer",
-                }}
-              >
+              <Button size="sm" onClick={resetOverrides}>
                 Reset
-              </button>
+              </Button>
             </div>
 
             {/* Probability sliders */}
             {chanceActions.length > 0 && (
-              <Section title="Probabilities" color={theme.palette.cyan} sz={sz}>
+              <Section title="Probabilities" color={theme.palette.cyan}>
                 {chanceActions.map(ca => {
                   const val = probOverrides.get(ca.actionUri) ?? data.probabilities.get(ca.actionUri) ?? 0;
                   return (
@@ -1380,7 +1363,7 @@ export function GameTheoryExplorer(_props: GameTheoryExplorerProps) {
 
             {/* Payoff sliders */}
             {payoffEntries.length > 0 && (
-              <Section title="Payoffs" color={theme.palette.amber} sz={sz}>
+              <Section title="Payoffs" color={theme.palette.amber}>
                 {payoffEntries.map(pe => {
                   const val = utilOverrides.get(pe.payoffUri) ?? data.utilities.get(pe.payoffUri) ?? 0;
                   const col = playerColorMap.get(pe.playerUri) || theme.text.muted;
diff --git a/packages/plugin-hwsec/src/HwSecExplorer.tsx b/packages/plugin-hwsec/src/HwSecExplorer.tsx
index de21a40..49ee02f 100644
--- a/packages/plugin-hwsec/src/HwSecExplorer.tsx
+++ b/packages/plugin-hwsec/src/HwSecExplorer.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
-import { useTheme, LoadingState } from "@trustgraph/trustkit";
+import { useTheme, LoadingState, Input } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useHwSecData } from "./useHwSecData";
 import type { HwNode } from "./useHwSecData";
@@ -77,7 +77,7 @@ function securityKindLabel(kind: string): string {
 }
 
 function Section({ title, color, children }: { title: string; color: string; children: React.ReactNode }) {
-  const { sz } = useTheme();
+  const { theme, sz } = useTheme();
   return (
     <div style={{ marginBottom: 18 }}>
       <div style={{
@@ -735,20 +735,11 @@ export function HwSecExplorer(_props: HwSecExplorerProps) {
           Hardware Security Explorer
         </div>
 
-        <input
-          type="text"
+        <Input
           placeholder="Search entities..."
           value={searchTerm}
-          onChange={e => setSearchTerm(e.target.value)}
-          style={{
-            flex: 1, maxWidth: 300,
-            padding: "5px 10px", borderRadius: 6,
-            background: "rgba(255,255,255,0.03)",
-            border: `1px solid ${theme.border.default}`,
-            color: theme.text.primary, fontSize: sz(11),
-            fontFamily: theme.font.sans,
-            outline: "none",
-          }}
+          onChange={setSearchTerm}
+          style={{ flex: 1, maxWidth: 300, fontSize: sz(11) }}
         />
 
         <div style={{
diff --git a/packages/plugin-innovation/src/components/GtmAdvisor.tsx b/packages/plugin-innovation/src/components/GtmAdvisor.tsx
index bb4991e..09065fa 100644
--- a/packages/plugin-innovation/src/components/GtmAdvisor.tsx
+++ b/packages/plugin-innovation/src/components/GtmAdvisor.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from "react";
-import { useTheme, StreamingResponse } from "@trustgraph/trustkit";
+import { useTheme, StreamingResponse, Button, Input } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useInference } from "@trustgraph/react-state";
 import type { IINode } from "../useInnovationData";
@@ -112,18 +112,13 @@ function EntityPicker({
           >✕</span>
         </div>
       ) : (
-        <input
+        <Input
           value={search}
-          onChange={e => { setSearch(e.target.value); setOpen(true); }}
+          onChange={v => { setSearch(v); setOpen(true); }}
           onFocus={() => setOpen(true)}
           placeholder={placeholder}
           autoFocus={open}
-          style={{
-            width: "100%", padding: "8px 12px", borderRadius: 6, fontSize: sz(13),
-            background: "rgba(255,255,255,0.04)", border: `1px solid ${theme.border.default}`,
-            color: theme.text.primary, outline: "none",
-            fontFamily: theme.font.sans,
-          }}
+          style={{ fontSize: sz(13) }}
         />
       )}
       {open && matches.length > 0 && (
@@ -846,20 +841,13 @@ export function GtmAdvisor(props: GtmAdvisorProps) {
                     Use AI to synthesise the above intelligence into an actionable GTM plan
                   </div>
                 </div>
-                <button
+                <Button
                   onClick={handleGenerate}
                   disabled={isStreaming}
-                  style={{
-                    padding: "8px 20px", borderRadius: 6, cursor: "pointer",
-                    background: isStreaming ? "rgba(255,255,255,0.04)" : `${theme.palette.emerald}22`,
-                    color: isStreaming ? theme.text.faint : theme.palette.emerald,
-                    fontSize: sz(12), fontWeight: 600, border: `1px solid ${theme.palette.emerald}44`,
-                    fontFamily: theme.font.mono,
-                    transition: "all 0.15s",
-                  }}
+                  color={theme.palette.emerald}
                 >
                   {isStreaming ? "Generating..." : "Generate"}
-                </button>
+                </Button>
               </div>
             )}
 
diff --git a/packages/plugin-innovation/src/components/InnovationExplorer.tsx b/packages/plugin-innovation/src/components/InnovationExplorer.tsx
index 2091adc..1701761 100644
--- a/packages/plugin-innovation/src/components/InnovationExplorer.tsx
+++ b/packages/plugin-innovation/src/components/InnovationExplorer.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
-import { useTheme, LoadingState } from "@trustgraph/trustkit";
+import { useTheme, LoadingState, Button, Input } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useInnovationData } from "../useInnovationData";
 import type { IINode } from "../useInnovationData";
@@ -141,7 +141,7 @@ function matchesCategory(node: IINode, cat: CategoryFilter): boolean {
 }
 
 function Section({ title, color, children }: { title: string; color: string; children: React.ReactNode }) {
-  const { sz } = useTheme();
+  const { theme, sz } = useTheme();
   return (
     <div style={{ marginBottom: 16 }}>
       <div style={{
@@ -473,19 +473,14 @@ export function InnovationExplorer(_props: InnovationExplorerProps) {
         fontFamily: theme.font.mono, fontSize: sz(11),
       }}>
         {([["browse", "⊞ Browse"], ["pathfinder", "⇢ Pathfinder"], ["gtm", "🚀 GTM Advisor"]] as const).map(([m, label]) => (
-          <button
+          <Button
             key={m}
+            size="sm"
+            active={mode === m}
             onClick={() => setMode(m)}
-            style={{
-              padding: "5px 14px", borderRadius: 5, border: "none", cursor: "pointer",
-              background: mode === m ? "rgba(255,255,255,0.08)" : "transparent",
-              color: mode === m ? theme.text.primary : theme.text.faint,
-              fontFamily: theme.font.mono, fontSize: sz(11),
-              fontWeight: mode === m ? 600 : 400, transition: "all 0.15s",
-            }}
           >
             {label}
-          </button>
+          </Button>
         ))}
       </div>
 
@@ -541,34 +536,23 @@ export function InnovationExplorer(_props: InnovationExplorerProps) {
 
         {/* Search */}
         <div style={{ padding: "10px 12px 6px", borderBottom: `1px solid ${theme.border.subtle}` }}>
-          <input
+          <Input
             value={searchTerm}
-            onChange={e => setSearchTerm(e.target.value)}
+            onChange={setSearchTerm}
             placeholder="Search entities..."
-            style={{
-              width: "100%", padding: "7px 10px", borderRadius: 6, fontSize: sz(12),
-              background: "rgba(255,255,255,0.04)", border: `1px solid ${theme.border.default}`,
-              color: theme.text.primary, outline: "none",
-              fontFamily: theme.font.sans,
-            }}
           />
           {/* Category filters */}
           <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 8, marginBottom: 4 }}>
             {CATEGORIES.map(c => (
-              <button
+              <Button
                 key={c.key}
+                size="sm"
+                active={category === c.key}
                 onClick={() => setCategory(c.key)}
-                style={{
-                  padding: "3px 8px", borderRadius: 4, fontSize: sz(10), border: "none",
-                  cursor: "pointer",
-                  background: category === c.key ? `${c.color}22` : "transparent",
-                  color: category === c.key ? c.color : theme.text.faint,
-                  fontFamily: theme.font.mono,
-                  transition: "all 0.15s",
-                }}
+                style={category === c.key ? { background: `${c.color}22`, color: c.color } : { color: theme.text.faint }}
               >
                 {c.label}
-              </button>
+              </Button>
             ))}
           </div>
         </div>
diff --git a/packages/plugin-innovation/src/components/PathFinder.tsx b/packages/plugin-innovation/src/components/PathFinder.tsx
index 15feecb..73298fe 100644
--- a/packages/plugin-innovation/src/components/PathFinder.tsx
+++ b/packages/plugin-innovation/src/components/PathFinder.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from "react";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button, Input } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import type { IINode } from "../useInnovationData";
 
@@ -121,18 +121,13 @@ function EntityPicker({
           >✕</span>
         </div>
       ) : (
-        <input
+        <Input
           value={search}
-          onChange={e => { setSearch(e.target.value); setOpen(true); }}
+          onChange={v => { setSearch(v); setOpen(true); }}
           onFocus={() => setOpen(true)}
           placeholder={placeholder}
           autoFocus={open}
-          style={{
-            width: "100%", padding: "8px 12px", borderRadius: 6, fontSize: sz(13),
-            background: "rgba(255,255,255,0.04)", border: `1px solid ${theme.border.default}`,
-            color: theme.text.primary, outline: "none",
-            fontFamily: theme.font.sans,
-          }}
+          style={{ fontSize: sz(13) }}
         />
       )}
       {open && matches.length > 0 && (
@@ -755,23 +750,13 @@ export function PathFinder({ nodes, abbreviations, adjacency, onSelectNode }: Pa
             />
           </div>
           <div style={{ paddingTop: 16 }}>
-            <button
+            <Button
               onClick={handleFind}
               disabled={!startUri || !endUri || startUri === endUri || searching}
-              style={{
-                padding: "8px 20px", borderRadius: 6,
-                background: startUri && endUri && startUri !== endUri
-                  ? `${theme.palette.emerald}22` : "rgba(255,255,255,0.04)",
-                color: startUri && endUri && startUri !== endUri
-                  ? theme.palette.emerald : theme.text.faint,
-                fontSize: sz(12), fontWeight: 600, cursor: "pointer",
-                fontFamily: theme.font.mono,
-                transition: "all 0.15s",
-                border: `1px solid ${startUri && endUri ? theme.palette.emerald + "44" : theme.border.default}`,
-              }}
+              color={theme.palette.emerald}
             >
               {searching ? "Searching..." : "Find Paths"}
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/packages/plugin-law/src/LawExplorer.tsx b/packages/plugin-law/src/LawExplorer.tsx
index 5e08841..1ff14df 100644
--- a/packages/plugin-law/src/LawExplorer.tsx
+++ b/packages/plugin-law/src/LawExplorer.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, useEffect } from "react";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useLawData } from "./useLawData";
 import type {
@@ -1343,24 +1343,20 @@ export function LawExplorer(_props: LawExplorerProps) {
           overflow: "hidden",
         }}>
           {(["en", "lt"] as const).map(l => (
-            <button
+            <Button
               key={l}
+              size="sm"
+              active={lang === l}
               onClick={() => setLang(l)}
               style={{
-                padding: "4px 12px",
-                fontSize: sz(11),
-                fontWeight: 600,
-                fontFamily: theme.font.mono,
-                background: lang === l ? theme.palette.amber + "20" : "transparent",
-                color: lang === l ? theme.palette.amber : theme.text.subtle,
-                border: "none",
-                cursor: "pointer",
                 textTransform: "uppercase",
+                borderRadius: 0,
                 borderRight: l === "en" ? "1px solid rgba(255,255,255,0.1)" : "none",
+                ...(lang === l ? { background: theme.palette.amber + "20", color: theme.palette.amber } : {}),
               }}
             >
               {l}
-            </button>
+            </Button>
           ))}
         </div>
       </div>
@@ -1381,27 +1377,27 @@ export function LawExplorer(_props: LawExplorerProps) {
           {MODE_META.map(m => {
             const isActive = mode === m.key;
             return (
-              <button
+              <Button
                 key={m.key}
                 onClick={() => { setMode(m.key); setSelectedUri(null); }}
-                title={lang === "lt" ? m.lt : m.en}
+                active={isActive}
                 style={{
                   width: 40,
                   height: 40,
                   borderRadius: 8,
-                  border: "none",
-                  background: isActive ? theme.palette[m.paletteKey] + "18" : "transparent",
-                  color: isActive ? theme.palette[m.paletteKey] : theme.text.hint,
                   fontSize: sz(18),
-                  cursor: "pointer",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  transition: "all 0.15s ease",
+                  padding: 0,
+                  ...(isActive
+                    ? { background: theme.palette[m.paletteKey] + "18", color: theme.palette[m.paletteKey] }
+                    : { color: theme.text.hint }),
                 }}
+                title={lang === "lt" ? m.lt : m.en}
               >
                 {m.icon}
-              </button>
+              </Button>
             );
           })}
         </div>
diff --git a/packages/plugin-retail-brand/src/components/brand-analytics/BrandAnalytics.tsx b/packages/plugin-retail-brand/src/components/brand-analytics/BrandAnalytics.tsx
index 8bbe54d..70fc865 100644
--- a/packages/plugin-retail-brand/src/components/brand-analytics/BrandAnalytics.tsx
+++ b/packages/plugin-retail-brand/src/components/brand-analytics/BrandAnalytics.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, createContext, useContext } from "react";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button } from "@trustgraph/trustkit";
 import { withGlow } from "@trustgraph/trustkit";
 import { useBrandAnalytics, BUDGET_TIERS } from "../../hooks/useBrandAnalytics";
 import { useProductScorecard } from "../../hooks/useProductScorecard";
@@ -94,21 +94,21 @@ function Pill({ active, color, onClick, children }: {
   onClick: () => void;
   children: React.ReactNode;
 }) {
-  const { theme, sz } = useTheme();
+  const { theme } = useTheme();
   return (
-    <button
+    <Button
+      size="sm"
+      active={active}
       onClick={onClick}
       style={{
         background: active ? withGlow(color, 0.15) : "none",
         border: `1px solid ${active ? withGlow(color, 0.4) : theme.border.subtle}`,
-        borderRadius: 4,
         color: active ? color : theme.text.hint,
-        fontSize: sz(9), fontFamily: mono, padding: "2px 8px",
-        cursor: "pointer", flexShrink: 0,
+        flexShrink: 0,
       }}
     >
       {children}
-    </button>
+    </Button>
   );
 }
 
@@ -141,17 +141,9 @@ function FilterBar({
           </Pill>
         ))}
         <span style={{ flex: 1 }} />
-        <button
-          onClick={onRefresh}
-          disabled={isLoading}
-          style={{
-            background: "none", border: `1px solid ${theme.border.subtle}`,
-            borderRadius: 4, color: theme.text.muted,
-            fontSize: sz(9), fontFamily: mono, padding: "2px 8px", cursor: "pointer",
-          }}
-        >
+        <Button size="sm" onClick={onRefresh} disabled={isLoading}>
           {isLoading ? "Loading..." : "Refresh"}
-        </button>
+        </Button>
       </div>
       {categories.length > 0 && (
         <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
diff --git a/packages/plugin-retail-brand/src/components/retail/CartPanel.tsx b/packages/plugin-retail-brand/src/components/retail/CartPanel.tsx
index fab2a80..875e599 100644
--- a/packages/plugin-retail-brand/src/components/retail/CartPanel.tsx
+++ b/packages/plugin-retail-brand/src/components/retail/CartPanel.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button } from "@trustgraph/trustkit";
 import { withGlow } from "@trustgraph/trustkit";
 import type { CartItem } from "../../hooks/useRetailCart";
 import type { RecommendedProduct } from "../../hooks/useRetailBuild";
@@ -111,21 +111,14 @@ function ExtraItemRow({ item, onRemove }: { item: CartItem; onRemove: () => void
       }}>
         ${item.price.toFixed(0)}
       </span>
-      <button
+      <Button
+        size="sm"
         onClick={onRemove}
-        style={{
-          background: "none",
-          border: "none",
-          color: theme.text.hint,
-          cursor: "pointer",
-          fontSize: sz(12),
-          padding: "0 4px",
-          fontFamily: theme.font.mono,
-        }}
         title="Remove"
+        style={{ padding: "0 4px", color: theme.text.hint }}
       >
         x
-      </button>
+      </Button>
     </div>
   );
 }
@@ -185,23 +178,14 @@ function CrossSellCard({ product, onAdd }: { product: RecommendedProduct; onAdd:
         </div>
       </div>
       <div style={{ padding: "0 12px 10px" }}>
-        <button
+        <Button
           onClick={onAdd}
           disabled={!product.inStock}
-          style={{
-            width: "100%",
-            padding: "7px 0",
-            borderRadius: 6,
-            border: `1px solid ${product.inStock ? withGlow(theme.palette.cyan, 0.3) : theme.border.subtle}`,
-            background: product.inStock ? withGlow(theme.palette.cyan, 0.08) : theme.surface.card,
-            color: product.inStock ? theme.palette.cyan : theme.text.disabled,
-            fontSize: sz(11), fontWeight: 600,
-            fontFamily: theme.font.mono,
-            cursor: product.inStock ? "pointer" : "not-allowed",
-          }}
+          color={theme.palette.cyan}
+          style={{ width: "100%" }}
         >
           {product.inStock ? "Add to Cart" : "Unavailable"}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -370,24 +354,14 @@ export function CartPanel({
 
       {/* Place order button */}
       {isFinalized && (
-        <button
+        <Button
           onClick={onPlaceOrder}
-          style={{
-            width: "100%",
-            padding: "14px 0",
-            borderRadius: 8,
-            border: `1px solid ${theme.palette.emerald}`,
-            background: withGlow(theme.palette.emerald, 0.12),
-            color: theme.palette.emerald,
-            fontSize: sz(14),
-            fontWeight: 700,
-            fontFamily: theme.font.mono,
-            cursor: "pointer",
-            letterSpacing: 0.5,
-          }}
+          color={theme.palette.emerald}
+          size="lg"
+          style={{ width: "100%", letterSpacing: 0.5 }}
         >
           Place Order
-        </button>
+        </Button>
       )}
 
       <style>{`
diff --git a/packages/plugin-retail-brand/src/components/retail/ChatPanel.tsx b/packages/plugin-retail-brand/src/components/retail/ChatPanel.tsx
index bf1ea25..0f64c69 100644
--- a/packages/plugin-retail-brand/src/components/retail/ChatPanel.tsx
+++ b/packages/plugin-retail-brand/src/components/retail/ChatPanel.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button } from "@trustgraph/trustkit";
 import { withGlow } from "@trustgraph/trustkit";
 import type { ChatMessage } from "../../hooks/useRetailChat";
 
@@ -149,28 +149,21 @@ export function ChatPanel({
               }}
             >
               {suggestedPrompts.map((prompt) => (
-                <button
+                <Button
                   key={prompt}
                   onClick={() => {
                     setInput(prompt);
                     inputRef.current?.focus();
                   }}
                   style={{
-                    padding: "8px 14px",
-                    borderRadius: 8,
-                    border: `1px solid ${theme.border.medium}`,
-                    background: theme.surface.card,
-                    color: theme.text.muted,
-                    fontSize: sz(12),
-                    cursor: "pointer",
-                    fontFamily: theme.font.sans,
                     maxWidth: 320,
                     textAlign: "left",
                     lineHeight: 1.4,
+                    fontFamily: theme.font.sans,
                   }}
                 >
                   {prompt}
-                </button>
+                </Button>
               ))}
             </div>
           </div>
@@ -227,29 +220,14 @@ export function ChatPanel({
             lineHeight: 1.5,
           }}
         />
-        <button
+        <Button
           onClick={handleSubmit}
           disabled={!input.trim() || isQuerying}
-          style={{
-            padding: "10px 18px",
-            borderRadius: 8,
-            border: `1px solid ${theme.palette.emerald}44`,
-            background:
-              !input.trim() || isQuerying
-                ? theme.surface.card
-                : `${theme.palette.emerald}1a`,
-            color:
-              !input.trim() || isQuerying ? theme.text.disabled : theme.palette.emerald,
-            cursor:
-              !input.trim() || isQuerying ? "not-allowed" : "pointer",
-            fontSize: sz(13),
-            fontWeight: 600,
-            fontFamily: theme.font.mono,
-            whiteSpace: "nowrap",
-          }}
+          color={theme.palette.emerald}
+          style={{ whiteSpace: "nowrap" }}
         >
           {isQuerying ? "..." : "Send"}
-        </button>
+        </Button>
       </div>
 
       <style>{`
diff --git a/packages/plugin-retail-brand/src/components/retail/ProductCard.tsx b/packages/plugin-retail-brand/src/components/retail/ProductCard.tsx
index 845664a..3e5bb27 100644
--- a/packages/plugin-retail-brand/src/components/retail/ProductCard.tsx
+++ b/packages/plugin-retail-brand/src/components/retail/ProductCard.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button } from "@trustgraph/trustkit";
 import { withGlow } from "@trustgraph/trustkit";
 import type { RecommendedProduct } from "../../hooks/useRetailBuild";
 
@@ -186,23 +186,14 @@ export function ProductCard({ product, onSelect, rank }: ProductCardProps) {
 
       {/* Select button */}
       <div style={{ padding: "0 12px 10px" }}>
-        <button
+        <Button
           onClick={onSelect}
           disabled={!product.inStock}
-          style={{
-            width: "100%",
-            padding: "7px 0",
-            borderRadius: 6,
-            border: `1px solid ${product.inStock ? withGlow(theme.palette.blue, 0.3) : theme.border.subtle}`,
-            background: product.inStock ? withGlow(theme.palette.blue, 0.08) : theme.surface.card,
-            color: product.inStock ? theme.palette.blue : theme.text.disabled,
-            fontSize: sz(11), fontWeight: 600,
-            fontFamily: theme.font.mono,
-            cursor: product.inStock ? "pointer" : "not-allowed",
-          }}
+          color={theme.palette.blue}
+          style={{ width: "100%" }}
         >
           {product.inStock ? "Select" : "Unavailable"}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/packages/plugin-risk/src/RiskExplorer.tsx b/packages/plugin-risk/src/RiskExplorer.tsx
index 92b9d2b..4bac869 100644
--- a/packages/plugin-risk/src/RiskExplorer.tsx
+++ b/packages/plugin-risk/src/RiskExplorer.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
-import { useTheme, LoadingState } from "@trustgraph/trustkit";
+import { useTheme, LoadingState, Input } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useRiskData } from "./useRiskData";
 import type { RiskNode } from "./useRiskData";
@@ -53,7 +53,8 @@ function kindLabel(kind: string): string {
 
 /* ── shared sub-components ────────────────────────────────────────── */
 
-function Section({ title, color, children, sz }: { title: string; color: string; children: React.ReactNode; sz: (n: number) => number }) {
+function Section({ title, color, children }: { title: string; color: string; children: React.ReactNode }) {
+  const { theme, sz } = useTheme();
   return (
     <div style={{ marginBottom: 16 }}>
       <div style={{
@@ -389,7 +390,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
         </div>
 
         {/* Risk heat grid */}
-        <Section title="Risk Scores" color={theme.palette.rose} sz={sz}>
+        <Section title="Risk Scores" color={theme.palette.rose}>
           {sortedRisksByScore.length === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No risks loaded</div>
           ) : (
@@ -442,7 +443,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
         </Section>
 
         {/* Top actors */}
-        <Section title="Top Actors by Event Count" color={theme.palette.amber} sz={sz}>
+        <Section title="Top Actors by Event Count" color={theme.palette.amber}>
           {topActorsByEventCount.length === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No actors in time window</div>
           ) : (
@@ -493,7 +494,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
         </Section>
 
         {/* Most impacted assets */}
-        <Section title="Most Impacted Assets" color={theme.palette.blue} sz={sz}>
+        <Section title="Most Impacted Assets" color={theme.palette.blue}>
           {topAssetsByEventCount.length === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No assets in time window</div>
           ) : (
@@ -554,7 +555,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
       <div>
         {renderDetailHeader(node)}
 
-        <Section title="Connected Risks" color={theme.palette.rose} sz={sz}>
+        <Section title="Connected Risks" color={theme.palette.rose}>
           {conn.connRisks.size === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No risks in time window</div>
           ) : (
@@ -600,7 +601,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
           )}
         </Section>
 
-        <Section title="Impacted Assets" color={theme.palette.blue} sz={sz}>
+        <Section title="Impacted Assets" color={theme.palette.blue}>
           {conn.connAssets.size === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No assets in time window</div>
           ) : (
@@ -658,7 +659,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
           {renderDescription(node.uri)}
         </div>
 
-        <Section title="Threat Actors" color={theme.palette.amber} sz={sz}>
+        <Section title="Threat Actors" color={theme.palette.amber}>
           {conn.connActors.size === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No actors in time window</div>
           ) : (
@@ -676,7 +677,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
           )}
         </Section>
 
-        <Section title="Impacted Assets" color={theme.palette.blue} sz={sz}>
+        <Section title="Impacted Assets" color={theme.palette.blue}>
           {conn.connAssets.size === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No assets in time window</div>
           ) : (
@@ -707,7 +708,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
       <div>
         {renderDetailHeader(node)}
 
-        <Section title="Threat Actors" color={theme.palette.amber} sz={sz}>
+        <Section title="Threat Actors" color={theme.palette.amber}>
           {conn.connActors.size === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No actors in time window</div>
           ) : (
@@ -725,7 +726,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
           )}
         </Section>
 
-        <Section title="Associated Risks" color={theme.palette.rose} sz={sz}>
+        <Section title="Associated Risks" color={theme.palette.rose}>
           {conn.connRisks.size === 0 ? (
             <div style={{ fontSize: sz(11), color: theme.text.faint }}>No risks in time window</div>
           ) : (
@@ -805,7 +806,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
         </div>
 
         {/* Actor / Risk / Asset badges */}
-        <Section title="Actor" color={theme.palette.amber} sz={sz}>
+        <Section title="Actor" color={theme.palette.amber}>
           <div style={{ display: "flex", flexWrap: "wrap" }}>
             {eventActors.length === 0
               ? <span style={{ fontSize: sz(11), color: theme.text.faint }}>None</span>
@@ -815,7 +816,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
           </div>
         </Section>
 
-        <Section title="Risk" color={theme.palette.rose} sz={sz}>
+        <Section title="Risk" color={theme.palette.rose}>
           <div style={{ display: "flex", flexWrap: "wrap" }}>
             {eventRisks.length === 0
               ? <span style={{ fontSize: sz(11), color: theme.text.faint }}>None</span>
@@ -829,7 +830,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
           </div>
         </Section>
 
-        <Section title="Asset" color={theme.palette.blue} sz={sz}>
+        <Section title="Asset" color={theme.palette.blue}>
           <div style={{ display: "flex", flexWrap: "wrap" }}>
             {eventAssets.length === 0
               ? <span style={{ fontSize: sz(11), color: theme.text.faint }}>None</span>
@@ -841,7 +842,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
 
         {/* Incident Response */}
         {processes.length > 0 && (
-          <Section title="Incident Response" color={theme.palette.emerald} sz={sz}>
+          <Section title="Incident Response" color={theme.palette.emerald}>
             {processes.map(procUri => renderProcessDetail(procUri))}
           </Section>
         )}
@@ -1009,7 +1010,7 @@ export function RiskExplorer(_props: RiskExplorerProps) {
 
   function renderEventList(title: string, eventUris: string[]) {
     return (
-      <Section title={title} color={theme.palette.cyan} sz={sz}>
+      <Section title={title} color={theme.palette.cyan}>
         {eventUris.length === 0 ? (
           <div style={{ fontSize: sz(11), color: theme.text.faint }}>No events in time window</div>
         ) : (
@@ -1314,17 +1315,10 @@ export function RiskExplorer(_props: RiskExplorerProps) {
         }}>
           {/* Search */}
           <div style={{ padding: "10px 12px 8px", borderBottom: `1px solid ${theme.border.subtle}` }}>
-            <input
+            <Input
               value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
+              onChange={setSearchTerm}
               placeholder="Search actors, risks, assets..."
-              className="risk-explorer-search"
-              style={{
-                width: "100%", padding: "7px 10px", borderRadius: 6, fontSize: sz(12),
-                background: "rgba(255,255,255,0.04)", border: `1px solid ${theme.border.default}`,
-                color: theme.text.primary, outline: "none",
-                fontFamily: theme.font.sans,
-              }}
             />
           </div>
 
diff --git a/packages/plugin-solar-missions/src/SolarSystemExplorer.tsx b/packages/plugin-solar-missions/src/SolarSystemExplorer.tsx
index 4940edb..7467056 100644
--- a/packages/plugin-solar-missions/src/SolarSystemExplorer.tsx
+++ b/packages/plugin-solar-missions/src/SolarSystemExplorer.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback } from "react";
 import { useSolarMissions } from "./useSolarMissions";
 import type { SolarMission, MissionEvent, CelestialBody } from "./useSolarMissions";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 
 const SOLAR_SPINNER_ID = "solar-spinner-keyframes";
@@ -634,18 +634,17 @@ function MissionList({ missions, bodyMap, colorMap, hoveredMission, onSelect, on
           const isHovered = hoveredMission === m.uri;
           const targets = m.targetBodies.map(t => bodyMap.get(t)?.name || "").filter(Boolean).join(", ");
           return (
-            <button
+            <Button
               key={m.uri}
               onClick={() => onSelect(m.uri)}
               onMouseEnter={() => onHover(m.uri)}
               onMouseLeave={() => onHover(null)}
               style={{
                 display: "flex", alignItems: "flex-start", gap: 10,
-                padding: "10px 16px", border: "none",
+                padding: "10px 16px", borderRadius: 0,
                 borderBottom: `1px solid ${theme.border.default}`,
                 background: isHovered ? theme.surface.card : "transparent",
-                cursor: "pointer", textAlign: "left", width: "100%",
-                transition: "background 0.15s",
+                textAlign: "left", width: "100%",
               }}
             >
               <div style={{
@@ -689,7 +688,7 @@ function MissionList({ missions, bodyMap, colorMap, hoveredMission, onSelect, on
               }}>
                 {m.events.length} evt
               </div>
-            </button>
+            </Button>
           );
         })}
       </div>
@@ -714,16 +713,13 @@ function MissionDetail({ mission, bodyMap, color, selectedEvent, onEventClick, o
   return (
     <div style={{ flex: 1, overflowY: "auto" }}>
       <div style={{ padding: "16px 16px 0" }}>
-        <button
+        <Button
+          size="sm"
           onClick={onBack}
-          style={{
-            background: "none", border: "none", color: theme.text.subtle,
-            fontSize: sz(10), cursor: "pointer", padding: "2px 0", marginBottom: 14,
-            fontFamily: theme.font.mono,
-          }}
+          style={{ padding: "2px 0", marginBottom: 14, color: theme.text.subtle }}
         >
           &larr; All missions
-        </button>
+        </Button>
 
         <div style={{
           fontSize: sz(9), fontFamily: theme.font.mono,
@@ -794,16 +790,14 @@ function MissionDetail({ mission, bodyMap, color, selectedEvent, onEventClick, o
             const nearestName = bodyMap.get(evt.nearestBody)?.name || "";
             const evtLabel = evt.type.replace(/([a-z])([A-Z])/g, "$1 $2");
             return (
-              <button
+              <Button
                 key={evt.uri || i}
                 onClick={() => onEventClick(evt)}
+                active={isSelected}
                 style={{
                   display: "block", width: "100%", textAlign: "left",
                   padding: "8px 10px", marginBottom: 2,
-                  background: isSelected ? theme.surface.cardHover : "transparent",
-                  border: "none", borderRadius: 6,
-                  cursor: "pointer", position: "relative",
-                  transition: "background 0.15s",
+                  borderRadius: 6, position: "relative",
                 }}
               >
                 {/* Timeline dot */}
@@ -852,7 +846,7 @@ function MissionDetail({ mission, bodyMap, color, selectedEvent, onEventClick, o
                     <span>{evt.longitudeDeg.toFixed(0)}° lon</span>
                   </div>
                 )}
-              </button>
+              </Button>
             );
           })}
         </div>
@@ -862,7 +856,7 @@ function MissionDetail({ mission, bodyMap, color, selectedEvent, onEventClick, o
 }
 
 function Tag({ label, color }: { label: string; color: string }) {
-  const { sz } = useTheme();
+  const { theme, sz } = useTheme();
   return (
     <span style={{
       fontSize: sz(9), fontFamily: theme.font.mono,
diff --git a/packages/plugin-threat/src/ThreatExplorer.tsx b/packages/plugin-threat/src/ThreatExplorer.tsx
index 1fba4c4..0a0d710 100644
--- a/packages/plugin-threat/src/ThreatExplorer.tsx
+++ b/packages/plugin-threat/src/ThreatExplorer.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useRef } from "react";
 import { useSocket } from "@trustgraph/react-provider";
 import { useSessionStore } from "@trustgraph/react-state";
-import { useTheme } from "@trustgraph/trustkit";
+import { useTheme, Button, Input } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useOcsfData } from "./useOcsfData";
 import type { OcsfNode } from "./useOcsfData";
@@ -185,7 +185,7 @@ function formatDate(iso: string): string {
 /* ── sub-components ───────────────────────────────────────────────── */
 
 function Section({ title, color, children }: { title: string; color: string; children: React.ReactNode }) {
-  const { sz } = useTheme();
+  const { theme, sz } = useTheme();
   return (
     <div style={{ marginBottom: 16 }}>
       <div style={{
@@ -831,20 +831,15 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
           Sort
         </span>
         {sortOptions.map(opt => (
-          <span
+          <Button
             key={opt.key}
+            size="sm"
+            active={sortBy === opt.key}
             onClick={() => setSortBy(opt.key)}
-            style={{
-              fontSize: sz(9), padding: "2px 6px", borderRadius: 3, cursor: "pointer",
-              fontFamily: theme.font.mono,
-              background: sortBy === opt.key ? `${theme.palette.cyan}22` : "transparent",
-              color: sortBy === opt.key ? theme.palette.cyan : theme.text.faint,
-              border: sortBy === opt.key ? `1px solid ${theme.palette.cyan}33` : "1px solid transparent",
-              transition: "all 0.12s",
-            }}
+            style={sortBy === opt.key ? { background: `${theme.palette.cyan}22`, color: theme.palette.cyan, border: `1px solid ${theme.palette.cyan}33` } : {}}
           >
             {opt.label}
-          </span>
+          </Button>
         ))}
       </div>
     );
@@ -985,20 +980,12 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
 
         {/* Drill-down action */}
         <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
-          <button
+          <Button
             onClick={() => drillFromEvent(event.uri)}
-            style={{
-              padding: "6px 14px", borderRadius: 6, fontSize: sz(11),
-              fontFamily: theme.font.mono,
-              background: `${theme.palette.cyan}15`, border: `1px solid ${theme.palette.cyan}33`,
-              color: theme.palette.cyan, cursor: "pointer",
-              transition: "all 0.15s",
-            }}
-            onMouseEnter={e => { e.currentTarget.style.background = `${theme.palette.cyan}25`; }}
-            onMouseLeave={e => { e.currentTarget.style.background = `${theme.palette.cyan}15`; }}
+            color={theme.palette.cyan}
           >
             Drill Down to Raw Events
-          </button>
+          </Button>
         </div>
       </div>
     );
@@ -1100,20 +1087,12 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
         {/* Drill-down — only for actors and assets, not categories */}
         {node.kind !== "RiskCategory" && (
           <div style={{ marginTop: 16 }}>
-            <button
+            <Button
               onClick={() => drillFromPivot(node.uri)}
-              style={{
-                padding: "6px 14px", borderRadius: 6, fontSize: sz(11),
-                fontFamily: theme.font.mono,
-                background: `${theme.palette.cyan}15`, border: `1px solid ${theme.palette.cyan}33`,
-                color: theme.palette.cyan, cursor: "pointer",
-                transition: "all 0.15s",
-              }}
-              onMouseEnter={e => { e.currentTarget.style.background = `${theme.palette.cyan}25`; }}
-              onMouseLeave={e => { e.currentTarget.style.background = `${theme.palette.cyan}15`; }}
+              color={theme.palette.cyan}
             >
               Drill Down to Raw Events
-            </button>
+            </Button>
           </div>
         )}
       </div>
@@ -1293,17 +1272,13 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
               }}
             />
             <div style={{ padding: "4px 8px", borderTop: `1px solid ${theme.border.subtle}` }}>
-              <button
+              <Button
+                size="sm"
                 onClick={() => executeDrill(rawQuery)}
-                style={{
-                  padding: "4px 12px", borderRadius: 4, fontSize: sz(10),
-                  fontFamily: theme.font.mono,
-                  background: `${theme.palette.cyan}20`, border: `1px solid ${theme.palette.cyan}33`,
-                  color: theme.palette.cyan, cursor: "pointer",
-                }}
+                color={theme.palette.cyan}
               >
                 Execute
-              </button>
+              </Button>
             </div>
           </div>
 
@@ -1366,20 +1341,12 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
       <div style={{ marginTop: 20 }}>
         {/* Analyze button */}
         {!aiStreaming && !aiAnalysis && (
-          <button
+          <Button
             onClick={analyzeContext}
-            style={{
-              padding: "6px 14px", borderRadius: 6, fontSize: sz(11),
-              fontFamily: theme.font.mono,
-              background: `${theme.palette.emerald}15`, border: `1px solid ${theme.palette.emerald}33`,
-              color: theme.palette.emerald, cursor: "pointer",
-              transition: "all 0.15s",
-            }}
-            onMouseEnter={e => { e.currentTarget.style.background = `${theme.palette.emerald}25`; }}
-            onMouseLeave={e => { e.currentTarget.style.background = `${theme.palette.emerald}15`; }}
+            color={theme.palette.emerald}
           >
             Analyze This
-          </button>
+          </Button>
         )}
 
         {/* Streaming indicator */}
@@ -1463,17 +1430,9 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
 
             {/* Re-analyze button */}
             <div style={{ marginTop: 10 }}>
-              <button
-                onClick={analyzeContext}
-                style={{
-                  padding: "4px 10px", borderRadius: 4, fontSize: sz(9),
-                  fontFamily: theme.font.mono,
-                  background: "transparent", border: `1px solid ${theme.border.default}`,
-                  color: theme.text.faint, cursor: "pointer",
-                }}
-              >
+              <Button size="sm" onClick={analyzeContext}>
                 Re-analyze
-              </button>
+              </Button>
             </div>
           </div>
         )}
@@ -1510,20 +1469,14 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
           <span style={{ fontSize: sz(9), color: theme.text.faint, fontFamily: theme.font.mono }}>
             {findings.length > 0 ? `Follows finding #${findings.length}` : "First finding in chain"}
           </span>
-          <button
+          <Button
+            size="sm"
             onClick={recordFinding}
             disabled={!findingDraft.trim()}
-            style={{
-              padding: "4px 12px", borderRadius: 4, fontSize: sz(10),
-              fontFamily: theme.font.mono,
-              background: findingDraft.trim() ? `${theme.palette.purple}20` : "rgba(255,255,255,0.03)",
-              border: `1px solid ${findingDraft.trim() ? `${theme.palette.purple}33` : theme.border.default}`,
-              color: findingDraft.trim() ? theme.palette.purple : theme.text.disabled,
-              cursor: findingDraft.trim() ? "pointer" : "default",
-            }}
+            color={theme.palette.purple}
           >
             Record
-          </button>
+          </Button>
         </div>
       </div>
     );
@@ -1637,34 +1590,18 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
         {/* Action buttons */}
         {findings.length > 0 && !docStreaming && (
           <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
-            <button
+            <Button
               onClick={() => generateDoc("document")}
-              style={{
-                padding: "6px 14px", borderRadius: 6, fontSize: sz(11),
-                fontFamily: theme.font.mono,
-                background: `${theme.palette.purple}15`, border: `1px solid ${theme.palette.purple}33`,
-                color: theme.palette.purple, cursor: "pointer",
-                transition: "all 0.15s",
-              }}
-              onMouseEnter={e => { e.currentTarget.style.background = `${theme.palette.purple}25`; }}
-              onMouseLeave={e => { e.currentTarget.style.background = `${theme.palette.purple}15`; }}
+              color={theme.palette.purple}
             >
               Document Investigation
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={() => generateDoc("response-plan")}
-              style={{
-                padding: "6px 14px", borderRadius: 6, fontSize: sz(11),
-                fontFamily: theme.font.mono,
-                background: `${theme.palette.emerald}15`, border: `1px solid ${theme.palette.emerald}33`,
-                color: theme.palette.emerald, cursor: "pointer",
-                transition: "all 0.15s",
-              }}
-              onMouseEnter={e => { e.currentTarget.style.background = `${theme.palette.emerald}25`; }}
-              onMouseLeave={e => { e.currentTarget.style.background = `${theme.palette.emerald}15`; }}
+              color={theme.palette.emerald}
             >
               Write Incident Response Plan
-            </button>
+            </Button>
           </div>
         )}
 
@@ -1922,19 +1859,14 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
 
         <div style={{ display: "flex", gap: 6 }}>
           {findings.length > 0 && (
-            <button
+            <Button
+              size="sm"
+              active={showFindings}
               onClick={() => { setShowFindings(!showFindings); if (!showFindings) setSelectedEventUri(null); }}
-              style={{
-                padding: "4px 10px", borderRadius: 4, fontSize: sz(9),
-                fontFamily: theme.font.mono,
-                background: showFindings ? `${theme.palette.purple}20` : "transparent",
-                border: `1px solid ${showFindings ? `${theme.palette.purple}33` : theme.border.default}`,
-                color: showFindings ? theme.palette.purple : theme.text.faint,
-                cursor: "pointer",
-              }}
+              style={showFindings ? { background: `${theme.palette.purple}20`, color: theme.palette.purple, border: `1px solid ${theme.palette.purple}33` } : {}}
             >
               Investigation ({findings.length})
-            </button>
+            </Button>
           )}
           <div style={{
             display: "flex", gap: 10, fontSize: sz(10), color: theme.text.faint,
@@ -1957,16 +1889,10 @@ export function ThreatExplorer(_props: ThreatExplorerProps) {
         }}>
           {/* Search */}
           <div style={{ padding: "8px 12px", borderBottom: `1px solid ${theme.border.subtle}` }}>
-            <input
+            <Input
               value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
+              onChange={setSearchTerm}
               placeholder="Search events, actors, descriptions..."
-              style={{
-                width: "100%", padding: "7px 10px", borderRadius: 6, fontSize: sz(12),
-                background: "rgba(255,255,255,0.04)", border: `1px solid ${theme.border.default}`,
-                color: theme.text.primary, outline: "none",
-                fontFamily: theme.font.sans,
-              }}
             />
           </div>
 
diff --git a/packages/plugin-world-events/src/components/WorldEventsExplorer.tsx b/packages/plugin-world-events/src/components/WorldEventsExplorer.tsx
index f7bd9d4..12410ce 100644
--- a/packages/plugin-world-events/src/components/WorldEventsExplorer.tsx
+++ b/packages/plugin-world-events/src/components/WorldEventsExplorer.tsx
@@ -3,7 +3,7 @@ import { geoNaturalEarth1, geoPath, geoContains } from "d3-geo";
 import type { GeoPermissibleObjects } from "d3-geo";
 import { feature } from "topojson-client";
 import type { Topology } from "topojson-specification";
-import { useTheme, LoadingState } from "@trustgraph/trustkit";
+import { useTheme, LoadingState, Button } from "@trustgraph/trustkit";
 import type { Theme } from "@trustgraph/trustkit";
 import { useWorldEvents } from "../useWorldEvents";
 import type { WorldEvent, EventSummary, GridCell, SearchFilters } from "../useWorldEvents";
@@ -289,68 +289,56 @@ export function WorldEventsExplorer({
           const c = colorForType(et.type);
           const isActive = activeTypes.size === 0 || activeTypes.has(et.type);
           return (
-            <button
+            <Button
               key={et.type}
+              size="sm"
+              active={isActive}
               onClick={() => toggleType(et.type)}
               style={{
-                padding: "2px 8px",
                 borderRadius: 10,
                 border: `1px solid ${isActive ? c + "66" : theme.border.default}`,
                 background: isActive ? c + "15" : "transparent",
                 color: isActive ? c : theme.text.disabled,
-                fontSize: sz(9),
-                fontFamily: theme.font.mono,
-                cursor: "pointer",
-                transition: "all 0.15s",
                 opacity: isActive ? 1 : 0.5,
                 whiteSpace: "nowrap",
               }}
             >
               {et.label}
               <span style={{ marginLeft: 4, opacity: 0.5 }}>{et.count}</span>
-            </button>
+            </Button>
           );
         })}
 
         <div style={{ flex: 1 }} />
 
         {selectedCell && (
-          <button
+          <Button
+            size="sm"
             onClick={() => setSelectedCell(null)}
-            style={{
-              padding: "2px 8px", borderRadius: 10,
-              border: `1px solid ${theme.palette.cyan}44`, background: theme.palette.cyan + "15",
-              color: theme.palette.cyan, fontSize: sz(9), fontFamily: theme.font.mono, cursor: "pointer",
-            }}
+            style={{ borderRadius: 10, border: `1px solid ${theme.palette.cyan}44`, background: theme.palette.cyan + "15", color: theme.palette.cyan }}
           >
             Region {selectedCell.avgLat.toFixed(0)},{selectedCell.avgLon.toFixed(0)} x
-          </button>
+          </Button>
         )}
 
         {selectedCountry && (
-          <button
+          <Button
+            size="sm"
             onClick={() => { setSelectedCountry(null); setSelectedCell(null); }}
-            style={{
-              padding: "2px 8px", borderRadius: 10,
-              border: `1px solid ${theme.palette.amber}44`, background: theme.palette.amber + "15",
-              color: theme.palette.amber, fontSize: sz(9), fontFamily: theme.font.mono, cursor: "pointer",
-            }}
+            style={{ borderRadius: 10, border: `1px solid ${theme.palette.amber}44`, background: theme.palette.amber + "15", color: theme.palette.amber }}
           >
             {selectedCountry} x
-          </button>
+          </Button>
         )}
 
         {hasFilters && (
-          <button
+          <Button
+            size="sm"
             onClick={clearFilters}
-            style={{
-              padding: "2px 8px", borderRadius: 10,
-              border: `1px solid ${theme.border.default}`, background: "transparent",
-              color: theme.text.faint, fontSize: sz(9), fontFamily: theme.font.mono, cursor: "pointer",
-            }}
+            style={{ borderRadius: 10 }}
           >
             Clear all
-          </button>
+          </Button>
         )}
 
         <span style={{ fontSize: sz(9), color: theme.text.hint, fontFamily: theme.font.mono }}>
@@ -527,7 +515,7 @@ export function WorldEventsExplorer({
                     {listEvents.map(e => {
                       const c = colorForType(e.type);
                       return (
-                        <button
+                        <Button
                           key={e.id}
                           onClick={() => handleEventSelect(e)}
                           disabled={detailLoading}
@@ -536,16 +524,11 @@ export function WorldEventsExplorer({
                             alignItems: "flex-start",
                             gap: 8,
                             padding: "8px 14px",
-                            border: "none",
+                            borderRadius: 0,
                             borderBottom: `1px solid ${theme.border.default}`,
-                            background: "transparent",
-                            cursor: detailLoading ? "wait" : "pointer",
                             textAlign: "left",
                             width: "100%",
-                            transition: "background 0.15s",
                           }}
-                          onMouseEnter={(ev) => { (ev.target as HTMLElement).closest("button")!.style.background = "rgba(255,255,255,0.03)"; }}
-                          onMouseLeave={(ev) => { (ev.target as HTMLElement).closest("button")!.style.background = "transparent"; }}
                         >
                           <div style={{
                             width: 6, height: 6, borderRadius: 3,
@@ -570,7 +553,7 @@ export function WorldEventsExplorer({
                               {e.yearLabel}
                             </div>
                           </div>
-                        </button>
+                        </Button>
                       );
                     })}
                   </div>
@@ -605,16 +588,13 @@ function EventDetail({ event, typeColor, onBack, theme, sz, outcomeColors }: {
 
   return (
     <div style={{ padding: 20 }}>
-      <button
+      <Button
+        size="sm"
         onClick={onBack}
-        style={{
-          background: "none", border: "none", color: theme.text.hint,
-          fontSize: sz(10), cursor: "pointer", padding: "2px 0", marginBottom: 16,
-          fontFamily: theme.font.mono,
-        }}
+        style={{ padding: "2px 0", marginBottom: 16, color: theme.text.hint }}
       >
         &larr; Back to list
-      </button>
+      </Button>
 
       <div style={{
         fontSize: sz(9), fontFamily: theme.font.mono,
diff --git a/packages/trustkit/src/components/agent-config/ConfigEditor.tsx b/packages/trustkit/src/components/agent-config/ConfigEditor.tsx
index 60060ac..f5d6f50 100644
--- a/packages/trustkit/src/components/agent-config/ConfigEditor.tsx
+++ b/packages/trustkit/src/components/agent-config/ConfigEditor.tsx
@@ -5,6 +5,9 @@ import { useMcpToolInvoke } from "../../hooks/useMcpToolInvoke";
 import type { SelectedItem, AgentPattern, AgentTaskType, AgentTool, ToolArgument, McpTool, ToolService } from "./types";
 import { LoadingState } from "../common";
 import { useTheme } from "../../theme/ThemeContext";
+import { Button } from "../common/Button";
+import { Input } from "../common/Input";
+import { FormLabel } from "../common/FormLabel";
 
 interface ConfigEditorProps {
   selected: SelectedItem | null;
@@ -62,16 +65,9 @@ function Editor({ selected, onDelete }: { selected: SelectedItem; onDelete?: ()
         marginBottom: 16,
       }}>
         <div>
-          <div style={{
-            fontSize: sz(10),
-            fontFamily: theme.font.mono,
-            fontWeight: 600,
-            color: kindColor(selected.kind, theme.palette),
-            letterSpacing: "0.1em",
-            marginBottom: 4,
-          }}>
+          <FormLabel style={{ color: kindColor(selected.kind, theme.palette) }}>
             {kindLabel(selected.kind)}
-          </div>
+          </FormLabel>
           <div style={{
             fontSize: sz(18),
             fontWeight: 700,
@@ -80,24 +76,11 @@ function Editor({ selected, onDelete }: { selected: SelectedItem; onDelete?: ()
             {selected.key}
           </div>
         </div>
-        <button
-          onClick={handleDelete}
-          disabled={isDeleting}
-          style={{
-            padding: "5px 12px",
-            borderRadius: 4,
-            border: `1px solid ${theme.palette.rose}33`,
-            background: "transparent",
-            color: theme.palette.rose,
-            fontSize: sz(10),
-            fontFamily: theme.font.mono,
-            fontWeight: 600,
-            cursor: isDeleting ? "wait" : "pointer",
-            opacity: isDeleting ? 0.5 : 1,
-          }}
-        >
+        <Button size="md" onClick={handleDelete} disabled={isDeleting}
+          color={theme.palette.rose} active={false}
+          style={{ border: `1px solid ${theme.palette.rose}33`, color: theme.palette.rose }}>
           {isDeleting ? "Deleting..." : "Delete"}
-        </button>
+        </Button>
       </div>
 
       {selected.kind === "agent-pattern" && (
@@ -153,47 +136,14 @@ interface FieldsProps<T> {
 // ── Common form primitives ───────────────────────────────────────
 
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  const { theme, sz } = useTheme();
   return (
     <div style={{ marginBottom: 14 }}>
-      <div style={{
-        fontSize: sz(9),
-        fontFamily: theme.font.mono,
-        color: theme.text.faint,
-        letterSpacing: "0.1em",
-        textTransform: "uppercase",
-        marginBottom: 4,
-      }}>
-        {label}
-      </div>
+      <FormLabel>{label.toUpperCase()}</FormLabel>
       {children}
     </div>
   );
 }
 
-function TextInput({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) {
-  const { theme, sz } = useTheme();
-  return (
-    <input
-      type="text"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      style={{
-        width: "100%",
-        padding: "7px 10px",
-        borderRadius: 6,
-        border: `1px solid ${theme.border.default}`,
-        background: theme.surface.card,
-        color: theme.text.primary,
-        fontSize: sz(12),
-        fontFamily: theme.font.mono,
-        outline: "none",
-      }}
-    />
-  );
-}
-
 function TextArea({ value, onChange, rows = 3, placeholder }: { value: string; onChange: (v: string) => void; rows?: number; placeholder?: string }) {
   const { theme, sz } = useTheme();
   return (
@@ -219,50 +169,14 @@ function TextArea({ value, onChange, rows = 3, placeholder }: { value: string; o
   );
 }
 
-function NumberInput({ value, onChange }: { value: number; onChange: (v: number) => void }) {
-  const { theme, sz } = useTheme();
-  return (
-    <input
-      type="number"
-      value={value}
-      onChange={(e) => onChange(parseInt(e.target.value, 10) || 0)}
-      style={{
-        width: 100,
-        padding: "7px 10px",
-        borderRadius: 6,
-        border: `1px solid ${theme.border.default}`,
-        background: theme.surface.card,
-        color: theme.text.primary,
-        fontSize: sz(12),
-        fontFamily: theme.font.mono,
-        outline: "none",
-      }}
-    />
-  );
-}
-
 function SaveButton({ onClick, isDirty, isSaving, saveError }: { onClick: () => void; isDirty: boolean; isSaving?: boolean; saveError?: string | null }) {
   const { theme, sz } = useTheme();
   return (
     <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 12 }}>
-      <button
-        onClick={onClick}
-        disabled={!isDirty || isSaving}
-        style={{
-          padding: "7px 18px",
-          borderRadius: 6,
-          border: `1px solid ${isDirty ? theme.palette.emerald + "44" : theme.border.default}`,
-          background: isDirty ? `${theme.palette.emerald}1a` : "transparent",
-          color: isDirty ? theme.palette.emerald : theme.text.faint,
-          fontSize: sz(11),
-          fontFamily: theme.font.mono,
-          fontWeight: 600,
-          cursor: isDirty && !isSaving ? "pointer" : "default",
-          transition: "all 0.2s",
-        }}
-      >
+      <Button size="lg" onClick={onClick} disabled={!isDirty || isSaving}
+        color={theme.palette.emerald} active={isDirty}>
         {isSaving ? "Saving..." : "Save"}
-      </button>
+      </Button>
       {saveError && (
         <span style={{ fontSize: sz(11), color: theme.palette.red }}>{saveError}</span>
       )}
@@ -287,9 +201,11 @@ function PatternFields({ data, onSave, isSaving, saveError }: FieldsProps<AgentP
 
   return (
     <>
-      <Field label="Name"><TextInput value={name} onChange={setName} /></Field>
+      <Field label="Name"><Input value={name} onChange={setName} style={{ width: "100%" }} /></Field>
       <Field label="Description"><TextArea value={description} onChange={setDescription} rows={4} /></Field>
-      <Field label="Max Iterations"><NumberInput value={maxIterations} onChange={setMaxIterations} /></Field>
+      <Field label="Max Iterations">
+        <Input value={String(maxIterations)} onChange={(v) => setMaxIterations(parseInt(v, 10) || 0)} style={{ width: 100 }} />
+      </Field>
       <SaveButton
         onClick={() => onSave({ ...data, name, description, max_iterations: maxIterations })}
         isDirty={isDirty}
@@ -303,13 +219,12 @@ function PatternFields({ data, onSave, isSaving, saveError }: FieldsProps<AgentP
 // ── Task Type fields ─────────────────────────────────────────────
 
 function TaskTypeFields({ data, onSave, isSaving, saveError }: FieldsProps<AgentTaskType>) {
-  const { theme, sz } = useTheme();
+  const { theme } = useTheme();
   const [name, setName] = useState(data.name || "");
   const [description, setDescription] = useState(data.description || "");
   const [framing, setFraming] = useState(data.framing || "");
   const [validPatterns, setValidPatterns] = useState<string[]>(data.valid_patterns || []);
 
-  // Fetch all available patterns for the multi-select
   const { keys: patternKeys } = useConfigItems("agent-pattern");
 
   useEffect(() => {
@@ -333,32 +248,17 @@ function TaskTypeFields({ data, onSave, isSaving, saveError }: FieldsProps<Agent
 
   return (
     <>
-      <Field label="Name"><TextInput value={name} onChange={setName} /></Field>
+      <Field label="Name"><Input value={name} onChange={setName} style={{ width: "100%" }} /></Field>
       <Field label="Description"><TextArea value={description} onChange={setDescription} rows={3} /></Field>
       <Field label="Framing"><TextArea value={framing} onChange={setFraming} rows={4} placeholder="Text injected into the agent prompt for this task type" /></Field>
       <Field label="Valid Patterns">
         <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-          {patternKeys.map(p => {
-            const active = validPatterns.includes(p);
-            return (
-              <button
-                key={p}
-                onClick={() => togglePattern(p)}
-                style={{
-                  padding: "4px 10px",
-                  borderRadius: 4,
-                  border: `1px solid ${active ? theme.palette.cyan + "44" : theme.border.default}`,
-                  background: active ? `${theme.palette.cyan}1a` : "transparent",
-                  color: active ? theme.palette.cyan : theme.text.subtle,
-                  fontSize: sz(11),
-                  fontFamily: theme.font.mono,
-                  cursor: "pointer",
-                }}
-              >
-                {p}
-              </button>
-            );
-          })}
+          {patternKeys.map(p => (
+            <Button key={p} size="md" onClick={() => togglePattern(p)}
+              color={theme.palette.cyan} active={validPatterns.includes(p)}>
+              {p}
+            </Button>
+          ))}
         </div>
       </Field>
       <SaveButton
@@ -459,66 +359,40 @@ function ToolFields({ data, onSave, isSaving, saveError }: FieldsProps<AgentTool
 
   return (
     <>
-      <Field label="Name"><TextInput value={name} onChange={setName} /></Field>
+      <Field label="Name"><Input value={name} onChange={setName} style={{ width: "100%" }} /></Field>
       <Field label="Description"><TextArea value={description} onChange={setDescription} rows={3} placeholder="Shown to the LLM" /></Field>
       <Field label="Type">
         <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
           {TOOL_TYPES.map(t => (
-            <button
-              key={t}
-              onClick={() => setType(t)}
-              style={{
-                padding: "4px 10px",
-                borderRadius: 4,
-                border: `1px solid ${type === t ? theme.palette.emerald + "44" : theme.border.default}`,
-                background: type === t ? `${theme.palette.emerald}1a` : "transparent",
-                color: type === t ? theme.palette.emerald : theme.text.subtle,
-                fontSize: sz(10),
-                fontFamily: theme.font.mono,
-                cursor: "pointer",
-              }}
-            >
+            <Button key={t} size="sm" onClick={() => setType(t)}
+              color={theme.palette.emerald} active={type === t}>
               {t}
-            </button>
+            </Button>
           ))}
         </div>
       </Field>
 
       {/* Type-specific fields */}
       {type === "knowledge-query" && (
-        <Field label="Collection"><TextInput value={collection} onChange={setCollection} /></Field>
+        <Field label="Collection"><Input value={collection} onChange={setCollection} style={{ width: "100%" }} /></Field>
       )}
       {type === "prompt" && (
-        <Field label="Template ID"><TextInput value={templateId} onChange={setTemplateId} placeholder="e.g. extract-definitions" /></Field>
+        <Field label="Template ID"><Input value={templateId} onChange={setTemplateId} placeholder="e.g. extract-definitions" style={{ width: "100%" }} /></Field>
       )}
       {type === "mcp-tool" && (
-        <Field label="MCP Tool ID"><TextInput value={mcpToolId} onChange={setMcpToolId} /></Field>
+        <Field label="MCP Tool ID"><Input value={mcpToolId} onChange={setMcpToolId} style={{ width: "100%" }} /></Field>
       )}
       {type === "tool-service" && (
-        <Field label="Service ID"><TextInput value={service} onChange={setService} /></Field>
+        <Field label="Service ID"><Input value={service} onChange={setService} style={{ width: "100%" }} /></Field>
       )}
 
       <Field label="Arguments">
         <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
           {(["fields", "json"] as const).map(mode => (
-            <button
-              key={mode}
-              onClick={() => switchArgsMode(mode)}
-              style={{
-                padding: "3px 10px",
-                borderRadius: 4,
-                fontSize: sz(10),
-                fontFamily: theme.font.mono,
-                fontWeight: 600,
-                cursor: "pointer",
-                background: argsMode === mode ? theme.surface.cardHover : "transparent",
-                border: `1px solid ${argsMode === mode ? theme.border.default : "transparent"}`,
-                color: argsMode === mode ? theme.text.muted : theme.text.hint,
-                textTransform: "capitalize",
-              }}
-            >
+            <Button key={mode} size="sm" onClick={() => switchArgsMode(mode)}
+              active={argsMode === mode}>
               {mode === "fields" ? "Fields" : "JSON"}
-            </button>
+            </Button>
           ))}
         </div>
 
@@ -555,101 +429,33 @@ function ToolFields({ data, onSave, isSaving, saveError }: FieldsProps<AgentTool
               }}>
                 <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
                   <div style={{ flex: 2 }}>
-                    <div style={{ fontSize: sz(9), color: theme.text.hint, marginBottom: 2, fontFamily: theme.font.mono }}>NAME</div>
-                    <input
-                      type="text"
-                      value={arg.name}
-                      onChange={(e) => updateArg(i, "name", e.target.value)}
-                      placeholder="arg_name"
-                      style={{
-                        width: "100%",
-                        padding: "5px 8px",
-                        borderRadius: 4,
-                        border: `1px solid ${theme.border.default}`,
-                        background: "transparent",
-                        color: theme.text.primary,
-                        fontSize: sz(11),
-                        fontFamily: theme.font.mono,
-                        outline: "none",
-                      }}
-                    />
+                    <FormLabel>{`NAME`}</FormLabel>
+                    <Input value={arg.name} onChange={(v) => updateArg(i, "name", v)}
+                      placeholder="arg_name" style={{ width: "100%", background: "transparent" }} />
                   </div>
                   <div style={{ flex: 1 }}>
-                    <div style={{ fontSize: sz(9), color: theme.text.hint, marginBottom: 2, fontFamily: theme.font.mono }}>TYPE</div>
-                    <input
-                      type="text"
-                      value={arg.type}
-                      onChange={(e) => updateArg(i, "type", e.target.value)}
-                      placeholder="string"
-                      style={{
-                        width: "100%",
-                        padding: "5px 8px",
-                        borderRadius: 4,
-                        border: `1px solid ${theme.border.default}`,
-                        background: "transparent",
-                        color: theme.text.primary,
-                        fontSize: sz(11),
-                        fontFamily: theme.font.mono,
-                        outline: "none",
-                      }}
-                    />
+                    <FormLabel>{`TYPE`}</FormLabel>
+                    <Input value={arg.type} onChange={(v) => updateArg(i, "type", v)}
+                      placeholder="string" style={{ width: "100%", background: "transparent" }} />
                   </div>
-                  <button
-                    onClick={() => removeArg(i)}
-                    style={{
-                      alignSelf: "flex-end",
-                      padding: "5px 8px",
-                      borderRadius: 4,
-                      border: `1px solid ${theme.palette.rose}33`,
-                      background: "transparent",
-                      color: theme.palette.rose,
-                      fontSize: sz(10),
-                      fontFamily: theme.font.mono,
-                      cursor: "pointer",
-                    }}
-                  >
+                  <Button size="sm" onClick={() => removeArg(i)}
+                    color={theme.palette.rose} active={false}
+                    style={{ alignSelf: "flex-end", border: `1px solid ${theme.palette.rose}33`, color: theme.palette.rose }}>
                     ×
-                  </button>
+                  </Button>
                 </div>
                 <div>
-                  <div style={{ fontSize: sz(9), color: theme.text.hint, marginBottom: 2, fontFamily: theme.font.mono }}>DESCRIPTION</div>
-                  <input
-                    type="text"
-                    value={arg.description}
-                    onChange={(e) => updateArg(i, "description", e.target.value)}
-                    placeholder="What this argument does..."
-                    style={{
-                      width: "100%",
-                      padding: "5px 8px",
-                      borderRadius: 4,
-                      border: `1px solid ${theme.border.default}`,
-                      background: "transparent",
-                      color: theme.text.primary,
-                      fontSize: sz(11),
-                      fontFamily: theme.font.mono,
-                      outline: "none",
-                    }}
-                  />
+                  <FormLabel>{`DESCRIPTION`}</FormLabel>
+                  <Input value={arg.description} onChange={(v) => updateArg(i, "description", v)}
+                    placeholder="What this argument does..." style={{ width: "100%", background: "transparent" }} />
                 </div>
               </div>
             ))}
-            <button
-              onClick={addArg}
-              style={{
-                padding: "6px 12px",
-                borderRadius: 4,
-                border: `1px solid ${theme.palette.cyan}33`,
-                background: "transparent",
-                color: theme.palette.cyan,
-                fontSize: sz(10),
-                fontFamily: theme.font.mono,
-                fontWeight: 600,
-                cursor: "pointer",
-                alignSelf: "flex-start",
-              }}
-            >
+            <Button size="md" onClick={addArg}
+              color={theme.palette.cyan} active={false}
+              style={{ alignSelf: "flex-start", border: `1px solid ${theme.palette.cyan}33`, color: theme.palette.cyan }}>
               + Add argument
-            </button>
+            </Button>
           </div>
         )}
       </Field>
@@ -679,9 +485,9 @@ function McpToolFields({ data, onSave, isSaving, saveError, itemKey }: FieldsPro
 
   return (
     <>
-      <Field label="Remote Name"><TextInput value={remoteName} onChange={setRemoteName} /></Field>
-      <Field label="URL"><TextInput value={url} onChange={setUrl} placeholder="https://..." /></Field>
-      <Field label="Auth Token"><TextInput value={authToken} onChange={setAuthToken} placeholder="optional" /></Field>
+      <Field label="Remote Name"><Input value={remoteName} onChange={setRemoteName} style={{ width: "100%" }} /></Field>
+      <Field label="URL"><Input value={url} onChange={setUrl} placeholder="https://..." style={{ width: "100%" }} /></Field>
+      <Field label="Auth Token"><Input value={authToken} onChange={setAuthToken} placeholder="optional" style={{ width: "100%" }} /></Field>
       <SaveButton
         onClick={() => onSave({ "remote-name": remoteName, url, ...(authToken && { "auth-token": authToken }) })}
         isDirty={isDirty}
@@ -717,16 +523,7 @@ function McpToolTester({ toolKey }: { toolKey: string }) {
       paddingTop: 20,
       borderTop: `1px solid ${theme.border.default}`,
     }}>
-      <div style={{
-        fontSize: sz(10),
-        fontFamily: theme.font.mono,
-        fontWeight: 600,
-        color: theme.text.faint,
-        letterSpacing: "0.1em",
-        marginBottom: 12,
-      }}>
-        TEST
-      </div>
+      <FormLabel style={{ marginBottom: 12 }}>TEST</FormLabel>
 
       <Field label="Parameters (JSON)">
         <textarea
@@ -755,39 +552,14 @@ function McpToolTester({ toolKey }: { toolKey: string }) {
       </Field>
 
       <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
-        <button
-          onClick={handleRun}
-          disabled={isInvoking}
-          style={{
-            padding: "6px 14px",
-            borderRadius: 6,
-            border: `1px solid ${theme.palette.purple}44`,
-            background: isInvoking ? "transparent" : `${theme.palette.purple}1a`,
-            color: isInvoking ? theme.text.disabled : theme.palette.purple,
-            fontSize: sz(11),
-            fontFamily: theme.font.mono,
-            fontWeight: 600,
-            cursor: isInvoking ? "wait" : "pointer",
-          }}
-        >
+        <Button size="md" onClick={handleRun} disabled={isInvoking}
+          color={theme.palette.purple} active={!isInvoking}>
           {isInvoking ? "Running..." : "Run"}
-        </button>
+        </Button>
         {(response || error) && (
-          <button
-            onClick={reset}
-            style={{
-              padding: "6px 12px",
-              borderRadius: 6,
-              border: `1px solid ${theme.border.default}`,
-              background: "transparent",
-              color: theme.text.faint,
-              fontSize: sz(11),
-              fontFamily: theme.font.mono,
-              cursor: "pointer",
-            }}
-          >
+          <Button size="md" onClick={reset} active={false}>
             Clear
-          </button>
+          </Button>
         )}
       </div>
 
@@ -855,8 +627,8 @@ function ToolServiceFields({ data, onSave, isSaving, saveError }: FieldsProps<To
 
   return (
     <>
-      <Field label="Request Queue"><TextInput value={requestQueue} onChange={setRequestQueue} placeholder="non-persistent://tg/request/..." /></Field>
-      <Field label="Response Queue"><TextInput value={responseQueue} onChange={setResponseQueue} placeholder="non-persistent://tg/response/..." /></Field>
+      <Field label="Request Queue"><Input value={requestQueue} onChange={setRequestQueue} placeholder="non-persistent://tg/request/..." style={{ width: "100%" }} /></Field>
+      <Field label="Response Queue"><Input value={responseQueue} onChange={setResponseQueue} placeholder="non-persistent://tg/response/..." style={{ width: "100%" }} /></Field>
       <Field label="Config Params (JSON)">
         <textarea
           value={paramsJson}
diff --git a/packages/trustkit/src/components/common/Button.tsx b/packages/trustkit/src/components/common/Button.tsx
index b13b027..d1785df 100644
--- a/packages/trustkit/src/components/common/Button.tsx
+++ b/packages/trustkit/src/components/common/Button.tsx
@@ -2,7 +2,7 @@ import { useTheme } from "../../theme/ThemeContext";
 
 type ButtonSize = "sm" | "md" | "lg";
 
-interface ButtonProps {
+export interface ButtonProps {
   children: React.ReactNode;
   onClick?: () => void;
   disabled?: boolean;
@@ -10,6 +10,9 @@ interface ButtonProps {
   active?: boolean;
   size?: ButtonSize;
   style?: React.CSSProperties;
+  title?: string;
+  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 const sizeStyles: Record<ButtonSize, { padding: string; borderRadius: number }> = {
@@ -26,6 +29,9 @@ export function Button({
   active = true,
   size = "md",
   style,
+  title,
+  onMouseEnter,
+  onMouseLeave,
 }: ButtonProps) {
   const { theme, sz } = useTheme();
   const c = color ?? theme.palette.emerald;
@@ -35,6 +41,9 @@ export function Button({
     <button
       onClick={onClick}
       disabled={disabled}
+      title={title}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       style={{
         padding,
         borderRadius,
diff --git a/packages/trustkit/src/components/common/Input.tsx b/packages/trustkit/src/components/common/Input.tsx
index 241606c..1c37a55 100644
--- a/packages/trustkit/src/components/common/Input.tsx
+++ b/packages/trustkit/src/components/common/Input.tsx
@@ -8,12 +8,14 @@ interface InputProps {
   disabled?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
   autoFocus?: boolean;
   style?: React.CSSProperties;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  function Input({ value, onChange, placeholder, disabled, onSubmit, onCancel, autoFocus, style }, ref) {
+  function Input({ value, onChange, placeholder, disabled, onSubmit, onCancel, onFocus, onBlur, autoFocus, style }, ref) {
     const { theme, sz } = useTheme();
 
     return (
@@ -34,6 +36,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         placeholder={placeholder}
         disabled={disabled}
         autoFocus={autoFocus}
+        onFocus={onFocus}
+        onBlur={onBlur}
         style={{
           padding: "5px 8px",
           borderRadius: 4,
diff --git a/packages/trustkit/src/components/common/QueryWorkbench.tsx b/packages/trustkit/src/components/common/QueryWorkbench.tsx
new file mode 100644
index 0000000..ef16259
--- /dev/null
+++ b/packages/trustkit/src/components/common/QueryWorkbench.tsx
@@ -0,0 +1,291 @@
+import { useState, useCallback, useRef, useMemo } from "react";
+import { useTheme } from "../../theme/ThemeContext";
+import { SectionLabel } from "./SectionLabel";
+import { Button } from "./Button";
+import { SelectableListItem } from "./SelectableListItem";
+
+export interface QueryExample {
+  label: string;
+  query: string;
+}
+
+export interface QueryPresetItem {
+  key: string;
+  title: string;
+  description: string;
+  query: string;
+}
+
+export interface QueryWorkbenchProps<TResult> {
+  language: string;
+  defaultQuery: string;
+  examples: QueryExample[];
+  presets?: QueryPresetItem[];
+  onExecute?: (query: string) => Promise<TResult>;
+  renderResults: (result: TResult, elapsed: number | null, theme: ReturnType<typeof useTheme>) => React.ReactNode;
+  renderResultsHeader?: (result: TResult, elapsed: number | null) => React.ReactNode;
+  processResponse?: (result: TResult) => { error?: string };
+  notConnectedMessage?: string;
+}
+
+export function QueryWorkbench<TResult>({
+  language,
+  defaultQuery,
+  examples,
+  presets,
+  onExecute,
+  renderResults,
+  renderResultsHeader,
+  processResponse,
+  notConnectedMessage,
+}: QueryWorkbenchProps<TResult>) {
+  const themeCtx = useTheme();
+  const { theme, sz } = themeCtx;
+  const [query, setQuery] = useState(defaultQuery);
+  const [result, setResult] = useState<TResult | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [elapsed, setElapsed] = useState<number | null>(null);
+  const [showExamples, setShowExamples] = useState(false);
+  const [showPresets, setShowPresets] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const execute = useCallback(async () => {
+    if (!onExecute) {
+      setError(notConnectedMessage || `${language} endpoint not connected`);
+      return;
+    }
+    const trimmed = query.trim();
+    if (!trimmed) return;
+
+    setIsRunning(true);
+    setError(null);
+    setResult(null);
+    setElapsed(null);
+    const t0 = performance.now();
+
+    try {
+      const res = await onExecute(trimmed);
+      setElapsed(performance.now() - t0);
+      if (processResponse) {
+        const { error: resError } = processResponse(res);
+        if (resError) setError(resError);
+      }
+      setResult(res);
+    } catch (err) {
+      setElapsed(performance.now() - t0);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsRunning(false);
+    }
+  }, [query, onExecute, processResponse, notConnectedMessage, language]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      execute();
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const start = ta.selectionStart;
+      const end = ta.selectionEnd;
+      setQuery(query.substring(0, start) + "  " + query.substring(end));
+      requestAnimationFrame(() => {
+        ta.selectionStart = ta.selectionEnd = start + 2;
+      });
+    }
+  }, [execute, query]);
+
+  const lineCount = useMemo(() => query.split("\n").length, [query]);
+
+  const dropdownStyle: React.CSSProperties = {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: 4,
+    background: theme.surface.overlay,
+    border: `1px solid ${theme.border.default}`,
+    borderRadius: 6,
+    padding: 4,
+    zIndex: 20,
+    boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "var(--page-height)", overflow: "hidden" }}>
+      {/* Toolbar */}
+      <div style={{
+        padding: "8px 16px",
+        borderBottom: `1px solid ${theme.border.default}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+      }}>
+        <SectionLabel>{language} QUERY</SectionLabel>
+
+        <div style={{ position: "relative" }}>
+          <Button size="md" active={false}
+            onClick={() => { setShowExamples(!showExamples); setShowPresets(false); }}
+            style={{ padding: "4px 10px" }}>
+            Examples
+          </Button>
+          {showExamples && (
+            <div style={{ ...dropdownStyle, minWidth: 180 }}>
+              {examples.map((ex, i) => (
+                <SelectableListItem key={i} isSelected={false}
+                  onClick={() => { setQuery(ex.query); setShowExamples(false); }}
+                  style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
+                  {ex.label}
+                </SelectableListItem>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {presets && presets.length > 0 && (
+          <div style={{ position: "relative" }}>
+            <Button size="md" active={false}
+              onClick={() => { setShowPresets(!showPresets); setShowExamples(false); }}
+              style={{ padding: "4px 10px" }}>
+              Presets
+            </Button>
+            {showPresets && (
+              <div style={{ ...dropdownStyle, minWidth: 260 }}>
+                {presets.map((p) => (
+                  <SelectableListItem key={p.key} isSelected={false}
+                    onClick={() => { setQuery(p.query); setShowPresets(false); }}
+                    style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
+                    {p.title}
+                  </SelectableListItem>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        <div style={{ flex: 1 }} />
+
+        <Button size="md" active={false}
+          onClick={() => { setQuery(""); setResult(null); setError(null); setElapsed(null); }}
+          style={{ padding: "4px 10px" }}>
+          Clear
+        </Button>
+
+        <Button size="md" onClick={execute} disabled={isRunning || !onExecute}
+          color={theme.palette.emerald} active={!!onExecute}
+          style={{ padding: "4px 14px" }}>
+          {isRunning ? "Running…" : "Execute"}
+          <span style={{ marginLeft: 6, opacity: 0.5, fontWeight: 400 }}>Ctrl+Enter</span>
+        </Button>
+      </div>
+
+      {/* Editor */}
+      <div style={{
+        flex: "0 0 auto",
+        maxHeight: "40%",
+        minHeight: 120,
+        display: "flex",
+        borderBottom: `1px solid ${theme.border.default}`,
+      }}>
+        <div style={{
+          padding: "12px 0",
+          width: 40,
+          textAlign: "right",
+          paddingRight: 8,
+          color: theme.text.hint,
+          fontSize: sz(11),
+          fontFamily: theme.font.mono,
+          lineHeight: "1.5",
+          userSelect: "none",
+          borderRight: `1px solid ${theme.border.default}`,
+          overflow: "hidden",
+        }}>
+          {Array.from({ length: lineCount }, (_, i) => (
+            <div key={i}>{i + 1}</div>
+          ))}
+        </div>
+
+        <textarea
+          ref={textareaRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          spellCheck={false}
+          style={{
+            flex: 1,
+            padding: "12px 16px",
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            color: theme.text.primary,
+            fontSize: sz(12),
+            fontFamily: theme.font.mono,
+            lineHeight: "1.5",
+            resize: "none",
+            overflow: "auto",
+          }}
+        />
+      </div>
+
+      {/* Results area */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+        <div style={{
+          padding: "6px 16px",
+          borderBottom: `1px solid ${theme.border.default}`,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}>
+          <span style={{ fontSize: sz(9), color: theme.text.hint, fontFamily: theme.font.mono, textTransform: "uppercase", letterSpacing: "0.05em" }}>
+            Results
+          </span>
+          {error && (
+            <span style={{ fontSize: sz(9), color: theme.palette.rose, fontFamily: theme.font.mono }}>
+              Error{elapsed !== null && ` · ${(elapsed / 1000).toFixed(2)}s`}
+            </span>
+          )}
+          {result && !error && renderResultsHeader?.(result, elapsed)}
+          {result && !error && !renderResultsHeader && elapsed !== null && (
+            <span style={{ fontSize: sz(9), color: theme.text.faint, fontFamily: theme.font.mono }}>
+              {(elapsed / 1000).toFixed(2)}s
+            </span>
+          )}
+        </div>
+
+        <div style={{ flex: 1, overflow: "auto" }}>
+          {isRunning && (
+            <div style={{ padding: 32, textAlign: "center", color: theme.text.faint, fontSize: sz(12), fontFamily: theme.font.mono }}>
+              Executing query…
+            </div>
+          )}
+
+          {error && (
+            <div style={{
+              margin: 16,
+              padding: 16,
+              borderRadius: 8,
+              background: theme.palette.rose + "10",
+              border: `1px solid ${theme.palette.rose}33`,
+            }}>
+              <div style={{ fontSize: sz(11), color: theme.palette.rose, fontFamily: theme.font.mono, whiteSpace: "pre-wrap" }}>
+                {error}
+              </div>
+            </div>
+          )}
+
+          {!isRunning && !error && !result && (
+            <div style={{ padding: 32, textAlign: "center", color: theme.text.hint, fontSize: sz(11), fontFamily: theme.font.mono }}>
+              {onExecute
+                ? "Write a query and press Ctrl+Enter to execute."
+                : (notConnectedMessage || `${language} endpoint not connected.`)}
+            </div>
+          )}
+
+          {result && renderResults(result, elapsed, themeCtx)}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/trustkit/src/components/common/SearchInput.tsx b/packages/trustkit/src/components/common/SearchInput.tsx
index 798d40e..aaf00bc 100644
--- a/packages/trustkit/src/components/common/SearchInput.tsx
+++ b/packages/trustkit/src/components/common/SearchInput.tsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
 import { useTheme } from "../../theme/ThemeContext";
+import { Button } from "./Button";
+import { SelectableListItem } from "./SelectableListItem";
 
 export interface SearchPreset {
   key: string;
@@ -47,22 +49,10 @@ export function SearchInput({
     <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
       {presets && presets.length > 0 && (
         <div style={{ position: "relative" }}>
-          <button
-            onClick={() => setShowPresets(!showPresets)}
-            style={{
-              padding: "12px 14px",
-              borderRadius: 8,
-              border: `1px solid ${theme.border.medium}`,
-              background: theme.surface.card,
-              color: theme.text.subtle,
-              fontSize: sz(11),
-              fontFamily: theme.font.mono,
-              cursor: "pointer",
-              whiteSpace: "nowrap",
-            }}
-          >
+          <Button size="lg" onClick={() => setShowPresets(!showPresets)} active={false}
+            style={{ padding: "12px 14px", border: `1px solid ${theme.border.medium}`, background: theme.surface.card, color: theme.text.subtle }}>
             Examples ▾
-          </button>
+          </Button>
           {showPresets && (
             <div style={{
               position: "absolute",
@@ -78,31 +68,13 @@ export function SearchInput({
               boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
             }}>
               {presets.map((p) => (
-                <button
+                <SelectableListItem
                   key={p.key}
-                  onClick={() => {
-                    onChange(p.query);
-                    setShowPresets(false);
-                  }}
-                  title={p.query}
-                  style={{
-                    display: "block",
-                    width: "100%",
-                    padding: "6px 10px",
-                    border: "none",
-                    borderRadius: 4,
-                    background: "transparent",
-                    color: theme.text.muted,
-                    fontSize: sz(11),
-                    fontFamily: theme.font.mono,
-                    cursor: "pointer",
-                    textAlign: "left",
-                  }}
-                  onMouseEnter={(e) => { (e.target as HTMLElement).style.background = "rgba(255,255,255,0.05)"; }}
-                  onMouseLeave={(e) => { (e.target as HTMLElement).style.background = "transparent"; }}
-                >
+                  isSelected={false}
+                  onClick={() => { onChange(p.query); setShowPresets(false); }}
+                  style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
                   {p.title}
-                </button>
+                </SelectableListItem>
               ))}
             </div>
           )}
@@ -127,23 +99,11 @@ export function SearchInput({
           outline: "none",
         }}
       />
-      <button
-        onClick={onSubmit}
-        disabled={isDisabled}
-        style={{
-          padding: "12px 20px",
-          borderRadius: 8,
-          border: `1px solid ${resolvedButtonColor}44`,
-          background: isDisabled ? theme.surface.card : `${resolvedButtonColor}1a`,
-          color: isDisabled ? theme.text.disabled : resolvedButtonColor,
-          cursor: isDisabled ? "not-allowed" : "pointer",
-          fontSize: sz(13),
-          fontWeight: 600,
-          fontFamily: theme.font.mono,
-        }}
-      >
+      <Button size="lg" onClick={onSubmit} disabled={isDisabled}
+        color={resolvedButtonColor} active={!isDisabled}
+        style={{ padding: "12px 20px", fontSize: sz(13) }}>
         {isLoading ? "..." : buttonText}
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/packages/trustkit/src/components/common/index.ts b/packages/trustkit/src/components/common/index.ts
index 8820d19..9025285 100644
--- a/packages/trustkit/src/components/common/index.ts
+++ b/packages/trustkit/src/components/common/index.ts
@@ -19,6 +19,8 @@ export { Button } from "./Button";
 export { Select } from "./Select";
 export { FormLabel } from "./FormLabel";
 export { SelectableListItem } from "./SelectableListItem";
+export { QueryWorkbench } from "./QueryWorkbench";
+export type { QueryExample, QueryPresetItem } from "./QueryWorkbench";
 
 // New foundation components
 export { TextInput } from "./TextInput";
diff --git a/packages/trustkit/src/components/graphql/GraphqlWorkbench.tsx b/packages/trustkit/src/components/graphql/GraphqlWorkbench.tsx
index 1f551dc..93f7a08 100644
--- a/packages/trustkit/src/components/graphql/GraphqlWorkbench.tsx
+++ b/packages/trustkit/src/components/graphql/GraphqlWorkbench.tsx
@@ -1,8 +1,10 @@
-import { useState, useCallback, useRef, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeContext";
-import { SectionLabel } from "../common";
 import { Button } from "../common/Button";
-import { SelectableListItem } from "../common/SelectableListItem";
+import { QueryWorkbench } from "../common/QueryWorkbench";
+import type { QueryPresetItem, QueryExample } from "../common/QueryWorkbench";
+
+export type { QueryPresetItem as GraphqlPreset };
 
 type ResultView = "raw" | "table";
 
@@ -44,19 +46,12 @@ export interface GraphqlResult {
   errors?: unknown[];
 }
 
-export interface GraphqlPreset {
-  key: string;
-  title: string;
-  description: string;
-  query: string;
-}
-
 export interface GraphqlWorkbenchProps {
   onExecute?: (query: string) => Promise<GraphqlResult>;
-  presets?: GraphqlPreset[];
+  presets?: QueryPresetItem[];
 }
 
-const EXAMPLE_QUERIES: { label: string; query: string }[] = [
+const EXAMPLE_QUERIES: QueryExample[] = [
   {
     label: "Introspect types",
     query: `{
@@ -83,68 +78,9 @@ const EXAMPLE_QUERIES: { label: string; query: string }[] = [
   },
 ];
 
-const DEFAULT_QUERY = EXAMPLE_QUERIES[0].query;
-
-export function GraphqlWorkbench({ onExecute, presets }: GraphqlWorkbenchProps) {
+function GraphqlResults({ result }: { result: GraphqlResult }) {
   const { theme, sz } = useTheme();
-  const [query, setQuery] = useState(DEFAULT_QUERY);
-  const [result, setResult] = useState<GraphqlResult | null>(null);
-  const [isRunning, setIsRunning] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [elapsed, setElapsed] = useState<number | null>(null);
-  const [showExamples, setShowExamples] = useState(false);
-  const [showPresets, setShowPresets] = useState(false);
   const [resultView, setResultView] = useState<ResultView>("table");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const execute = useCallback(async () => {
-    if (!onExecute) {
-      setError("GraphQL endpoint not connected");
-      return;
-    }
-    const trimmed = query.trim();
-    if (!trimmed) return;
-
-    setIsRunning(true);
-    setError(null);
-    setResult(null);
-    setElapsed(null);
-    const t0 = performance.now();
-
-    try {
-      const res = await onExecute(trimmed);
-      setElapsed(performance.now() - t0);
-      if (res.errors && (res.errors as unknown[]).length > 0) {
-        setError(JSON.stringify(res.errors, null, 2));
-      }
-      setResult(res);
-    } catch (err) {
-      setElapsed(performance.now() - t0);
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setIsRunning(false);
-    }
-  }, [query, onExecute]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-      e.preventDefault();
-      execute();
-    }
-    if (e.key === "Tab") {
-      e.preventDefault();
-      const ta = textareaRef.current;
-      if (!ta) return;
-      const start = ta.selectionStart;
-      const end = ta.selectionEnd;
-      setQuery(query.substring(0, start) + "  " + query.substring(end));
-      requestAnimationFrame(() => {
-        ta.selectionStart = ta.selectionEnd = start + 2;
-      });
-    }
-  }, [execute, query]);
-
-  const lineCount = useMemo(() => query.split("\n").length, [query]);
 
   const formattedResult = useMemo(() => {
     if (!result?.data) return null;
@@ -156,297 +92,139 @@ export function GraphqlWorkbench({ onExecute, presets }: GraphqlWorkbenchProps)
     return extractTable(result.data);
   }, [result]);
 
+  if (!formattedResult) return null;
+
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "var(--page-height)", overflow: "hidden" }}>
-      {/* Toolbar */}
+    <>
+      {/* View toggle in a sticky bar */}
       <div style={{
-        padding: "8px 16px",
-        borderBottom: `1px solid ${theme.border.default}`,
+        padding: "4px 16px",
         display: "flex",
-        alignItems: "center",
-        gap: 8,
+        justifyContent: "flex-end",
+        gap: 2,
       }}>
-        <SectionLabel>GRAPHQL QUERY</SectionLabel>
-
-        <div style={{ position: "relative" }}>
-          <Button size="md" active={false}
-            onClick={() => { setShowExamples(!showExamples); setShowPresets(false); }}
-            style={{ padding: "4px 10px" }}>
-            Examples
-          </Button>
-          {showExamples && (
-            <div style={{
-              position: "absolute",
-              top: "100%",
-              left: 0,
-              marginTop: 4,
-              background: theme.surface.overlay,
-              border: `1px solid ${theme.border.default}`,
-              borderRadius: 6,
-              padding: 4,
-              zIndex: 20,
-              minWidth: 180,
-              boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
+        {(["table", "raw"] as const).map((v) => (
+          <Button key={v} size="sm"
+            onClick={() => setResultView(v)}
+            active={resultView === v}
+            style={{
+              padding: "2px 8px",
+              borderRadius: 3,
+              border: `1px solid ${resultView === v ? theme.border.default : "transparent"}`,
+              background: resultView === v ? theme.surface.cardHover : "transparent",
+              color: resultView === v ? theme.text.muted : theme.text.hint,
+              textTransform: "capitalize",
             }}>
-              {EXAMPLE_QUERIES.map((ex, i) => (
-                <SelectableListItem key={i} isSelected={false}
-                  onClick={() => { setQuery(ex.query); setShowExamples(false); }}
-                  style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
-                  {ex.label}
-                </SelectableListItem>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {presets && presets.length > 0 && (
-          <div style={{ position: "relative" }}>
-            <Button size="md" active={false}
-              onClick={() => { setShowPresets(!showPresets); setShowExamples(false); }}
-              style={{ padding: "4px 10px" }}>
-              Presets
-            </Button>
-            {showPresets && (
-              <div style={{
-                position: "absolute",
-                top: "100%",
-                left: 0,
-                marginTop: 4,
-                background: theme.surface.overlay,
-                border: `1px solid ${theme.border.default}`,
-                borderRadius: 6,
-                padding: 4,
-                zIndex: 20,
-                minWidth: 260,
-                boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
-              }}>
-                {presets.map((p) => (
-                  <SelectableListItem key={p.key} isSelected={false}
-                    onClick={() => { setQuery(p.query); setShowPresets(false); }}
-                    style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
-                    {p.title}
-                  </SelectableListItem>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        <div style={{ flex: 1 }} />
-
-        <Button size="md" active={false}
-          onClick={() => { setQuery(""); setResult(null); setError(null); setElapsed(null); }}
-          style={{ padding: "4px 10px" }}>
-          Clear
-        </Button>
-
-        <Button size="md" onClick={execute} disabled={isRunning || !onExecute}
-          color={theme.palette.emerald} active={!!onExecute}
-          style={{ padding: "4px 14px" }}>
-          {isRunning ? "Running…" : "Execute"}
-          <span style={{ marginLeft: 6, opacity: 0.5, fontWeight: 400 }}>Ctrl+Enter</span>
-        </Button>
+            {v}
+          </Button>
+        ))}
       </div>
 
-      {/* Editor */}
-      <div style={{
-        flex: "0 0 auto",
-        maxHeight: "40%",
-        minHeight: 120,
-        display: "flex",
-        borderBottom: `1px solid ${theme.border.default}`,
-      }}>
-        <div style={{
-          padding: "12px 0",
-          width: 40,
-          textAlign: "right",
-          paddingRight: 8,
-          color: theme.text.hint,
+      {resultView === "raw" && (
+        <pre style={{
+          margin: 0,
+          padding: "12px 16px",
           fontSize: sz(11),
           fontFamily: theme.font.mono,
+          color: theme.text.muted,
           lineHeight: "1.5",
-          userSelect: "none",
-          borderRight: `1px solid ${theme.border.default}`,
-          overflow: "hidden",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
         }}>
-          {Array.from({ length: lineCount }, (_, i) => (
-            <div key={i}>{i + 1}</div>
-          ))}
-        </div>
-
-        <textarea
-          ref={textareaRef}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={handleKeyDown}
-          spellCheck={false}
-          style={{
-            flex: 1,
-            padding: "12px 16px",
-            background: "transparent",
-            border: "none",
-            outline: "none",
-            color: theme.text.primary,
-            fontSize: sz(12),
+          {formattedResult}
+        </pre>
+      )}
+
+      {resultView === "table" && tableData && (
+        <div style={{ padding: "8px 16px" }}>
+          <table style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            fontSize: sz(11),
             fontFamily: theme.font.mono,
-            lineHeight: "1.5",
-            resize: "none",
-            overflow: "auto",
-          }}
-        />
-      </div>
-
-      {/* Results area */}
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
-        <div style={{
-          padding: "6px 16px",
-          borderBottom: `1px solid ${theme.border.default}`,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-        }}>
-          <span style={{ fontSize: sz(9), color: theme.text.hint, fontFamily: theme.font.mono, textTransform: "uppercase", letterSpacing: "0.05em" }}>
-            Results
-          </span>
-          {result && !error && (
-            <span style={{ fontSize: sz(9), color: theme.text.faint, fontFamily: theme.font.mono }}>
-              {elapsed !== null && `${(elapsed / 1000).toFixed(2)}s`}
-              {tableData && ` · ${tableData.rows.length} rows`}
-            </span>
-          )}
-          {error && (
-            <span style={{ fontSize: sz(9), color: theme.palette.rose, fontFamily: theme.font.mono }}>
-              Error{elapsed !== null && ` · ${(elapsed / 1000).toFixed(2)}s`}
-            </span>
-          )}
-          <div style={{ flex: 1 }} />
-          {formattedResult && (
-            <div style={{ display: "flex", gap: 2 }}>
-              {(["table", "raw"] as const).map((v) => (
-                <Button key={v} size="sm"
-                  onClick={() => setResultView(v)}
-                  active={resultView === v}
-                  style={{
-                    padding: "2px 8px",
-                    borderRadius: 3,
-                    border: `1px solid ${resultView === v ? theme.border.default : "transparent"}`,
-                    background: resultView === v ? theme.surface.cardHover : "transparent",
-                    color: resultView === v ? theme.text.muted : theme.text.hint,
-                    textTransform: "capitalize",
+          }}>
+            <thead>
+              <tr>
+                {tableData.columns.map((col) => (
+                  <th key={col} style={{
+                    padding: "6px 10px",
+                    textAlign: "left",
+                    color: theme.text.subtle,
+                    fontWeight: 600,
+                    borderBottom: `1px solid ${theme.border.default}`,
+                    whiteSpace: "nowrap",
                   }}>
-                  {v}
-                </Button>
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {tableData.rows.map((row, i) => (
+                <tr key={i} style={{ borderBottom: `1px solid ${theme.border.subtle}` }}>
+                  {tableData.columns.map((col) => (
+                    <td key={col} style={{
+                      padding: "5px 10px",
+                      color: theme.text.muted,
+                      maxWidth: 400,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}>
+                      {formatCell(row[col])}
+                    </td>
+                  ))}
+                </tr>
               ))}
-            </div>
-          )}
+            </tbody>
+          </table>
         </div>
+      )}
 
-        <div style={{ flex: 1, overflow: "auto" }}>
-          {isRunning && (
-            <div style={{ padding: 32, textAlign: "center", color: theme.text.faint, fontSize: sz(12), fontFamily: theme.font.mono }}>
-              Executing query…
-            </div>
-          )}
-
-          {error && (
-            <div style={{
-              margin: 16,
-              padding: 16,
-              borderRadius: 8,
-              background: theme.palette.rose + "10",
-              border: `1px solid ${theme.palette.rose}33`,
-            }}>
-              <div style={{ fontSize: sz(11), color: theme.palette.rose, fontFamily: theme.font.mono, whiteSpace: "pre-wrap" }}>
-                {error}
-              </div>
-            </div>
-          )}
-
-          {!isRunning && !error && !result && (
-            <div style={{ padding: 32, textAlign: "center", color: theme.text.hint, fontSize: sz(11), fontFamily: theme.font.mono }}>
-              {onExecute
-                ? "Write a query and press Ctrl+Enter to execute."
-                : "GraphQL endpoint not connected."}
-            </div>
-          )}
-
-          {formattedResult && resultView === "raw" && (
-            <pre style={{
-              margin: 0,
-              padding: "12px 16px",
-              fontSize: sz(11),
-              fontFamily: theme.font.mono,
-              color: theme.text.muted,
-              lineHeight: "1.5",
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-word",
-            }}>
-              {formattedResult}
-            </pre>
-          )}
-
-          {formattedResult && resultView === "table" && tableData && (
-            <div style={{ padding: "8px 16px" }}>
-              <table style={{
-                width: "100%",
-                borderCollapse: "collapse",
-                fontSize: sz(11),
-                fontFamily: theme.font.mono,
-              }}>
-                <thead>
-                  <tr>
-                    {tableData.columns.map((col) => (
-                      <th key={col} style={{
-                        padding: "6px 10px",
-                        textAlign: "left",
-                        color: theme.text.subtle,
-                        fontWeight: 600,
-                        borderBottom: `1px solid ${theme.border.default}`,
-                        whiteSpace: "nowrap",
-                      }}>
-                        {col}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {tableData.rows.map((row, i) => (
-                    <tr key={i} style={{ borderBottom: `1px solid ${theme.border.subtle}` }}>
-                      {tableData.columns.map((col) => (
-                        <td key={col} style={{
-                          padding: "5px 10px",
-                          color: theme.text.muted,
-                          maxWidth: 400,
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap",
-                        }}>
-                          {formatCell(row[col])}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
+      {resultView === "table" && !tableData && (
+        <pre style={{
+          margin: 0,
+          padding: "12px 16px",
+          fontSize: sz(11),
+          fontFamily: theme.font.mono,
+          color: theme.text.muted,
+          lineHeight: "1.5",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+        }}>
+          {formattedResult}
+        </pre>
+      )}
+    </>
+  );
+}
 
-          {formattedResult && resultView === "table" && !tableData && (
-            <pre style={{
-              margin: 0,
-              padding: "12px 16px",
-              fontSize: sz(11),
-              fontFamily: theme.font.mono,
-              color: theme.text.muted,
-              lineHeight: "1.5",
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-word",
-            }}>
-              {formattedResult}
-            </pre>
-          )}
-        </div>
-      </div>
-    </div>
+export function GraphqlWorkbench({ onExecute, presets }: GraphqlWorkbenchProps) {
+  return (
+    <QueryWorkbench<GraphqlResult>
+      language="GRAPHQL"
+      defaultQuery={EXAMPLE_QUERIES[0].query}
+      examples={EXAMPLE_QUERIES}
+      presets={presets}
+      onExecute={onExecute}
+      processResponse={(res) => {
+        if (res.errors && (res.errors as unknown[]).length > 0) {
+          return { error: JSON.stringify(res.errors, null, 2) };
+        }
+        return {};
+      }}
+      renderResultsHeader={(result, elapsed) => {
+        const table = result.data ? extractTable(result.data) : null;
+        return (
+          <span style={{ fontSize: 9, fontFamily: "inherit", color: "inherit" }}>
+            {elapsed !== null && `${(elapsed / 1000).toFixed(2)}s`}
+            {table && ` · ${table.rows.length} rows`}
+          </span>
+        );
+      }}
+      renderResults={(result) => (
+        <GraphqlResults result={result} />
+      )}
+    />
   );
 }
diff --git a/packages/trustkit/src/components/sparql/SparqlWorkbench.tsx b/packages/trustkit/src/components/sparql/SparqlWorkbench.tsx
index 653f26a..81711de 100644
--- a/packages/trustkit/src/components/sparql/SparqlWorkbench.tsx
+++ b/packages/trustkit/src/components/sparql/SparqlWorkbench.tsx
@@ -1,27 +1,19 @@
-import { useState, useCallback, useRef, useMemo } from "react";
-import { useTheme } from "../../theme/ThemeContext";
-import { SectionLabel } from "../common";
-import { Button } from "../common/Button";
-import { SelectableListItem } from "../common/SelectableListItem";
+import { QueryWorkbench } from "../common/QueryWorkbench";
+import type { QueryPresetItem, QueryExample } from "../common/QueryWorkbench";
+
+export type { QueryPresetItem as QueryPreset };
 
 export interface SparqlResult {
   columns: string[];
   rows: Record<string, string>[];
 }
 
-export interface QueryPreset {
-  key: string;
-  title: string;
-  description: string;
-  query: string;
-}
-
 export interface SparqlWorkbenchProps {
   onExecute?: (query: string) => Promise<SparqlResult>;
-  presets?: QueryPreset[];
+  presets?: QueryPresetItem[];
 }
 
-const EXAMPLE_QUERIES: { label: string; query: string }[] = [
+const EXAMPLE_QUERIES: QueryExample[] = [
   {
     label: "All classes",
     query: `SELECT ?class ?label
@@ -74,8 +66,6 @@ LIMIT 50`,
   },
 ];
 
-const DEFAULT_QUERY = EXAMPLE_QUERIES[3].query;
-
 function shortenUri(uri: string): string {
   const prefixes: Record<string, string> = {
     "http://www.w3.org/1999/02/22-rdf-syntax-ns#": "rdf:",
@@ -97,329 +87,81 @@ function shortenUri(uri: string): string {
 }
 
 export function SparqlWorkbench({ onExecute, presets }: SparqlWorkbenchProps) {
-  const { theme, sz } = useTheme();
-  const [query, setQuery] = useState(DEFAULT_QUERY);
-  const [result, setResult] = useState<SparqlResult | null>(null);
-  const [isRunning, setIsRunning] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [elapsed, setElapsed] = useState<number | null>(null);
-  const [showExamples, setShowExamples] = useState(false);
-  const [showPresets, setShowPresets] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const execute = useCallback(async () => {
-    if (!onExecute) {
-      setError("SPARQL endpoint not connected");
-      return;
-    }
-    const trimmed = query.trim();
-    if (!trimmed) return;
-
-    setIsRunning(true);
-    setError(null);
-    setResult(null);
-    setElapsed(null);
-    const t0 = performance.now();
-
-    try {
-      const res = await onExecute(trimmed);
-      setElapsed(performance.now() - t0);
-      setResult(res);
-    } catch (err) {
-      setElapsed(performance.now() - t0);
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setIsRunning(false);
-    }
-  }, [query, onExecute]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-      e.preventDefault();
-      execute();
-    }
-    if (e.key === "Tab") {
-      e.preventDefault();
-      const ta = textareaRef.current;
-      if (!ta) return;
-      const start = ta.selectionStart;
-      const end = ta.selectionEnd;
-      setQuery(query.substring(0, start) + "  " + query.substring(end));
-      requestAnimationFrame(() => {
-        ta.selectionStart = ta.selectionEnd = start + 2;
-      });
-    }
-  }, [execute, query]);
-
-  const lineCount = useMemo(() => query.split("\n").length, [query]);
-
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "var(--page-height)", overflow: "hidden" }}>
-      {/* Toolbar */}
-      <div style={{
-        padding: "8px 16px",
-        borderBottom: `1px solid ${theme.border.default}`,
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-      }}>
-        <SectionLabel>SPARQL QUERY</SectionLabel>
-
-        <div style={{ position: "relative" }}>
-          <Button size="md" active={false}
-            onClick={() => { setShowExamples(!showExamples); setShowPresets(false); }}
-            style={{ padding: "4px 10px" }}>
-            Examples
-          </Button>
-          {showExamples && (
-            <div style={{
-              position: "absolute",
-              top: "100%",
-              left: 0,
-              marginTop: 4,
-              background: theme.surface.overlay,
-              border: `1px solid ${theme.border.default}`,
-              borderRadius: 6,
-              padding: 4,
-              zIndex: 20,
-              minWidth: 180,
-              boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
-            }}>
-              {EXAMPLE_QUERIES.map((ex, i) => (
-                <SelectableListItem key={i} isSelected={false}
-                  onClick={() => { setQuery(ex.query); setShowExamples(false); }}
-                  style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
-                  {ex.label}
-                </SelectableListItem>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {presets && presets.length > 0 && (
-          <div style={{ position: "relative" }}>
-            <Button size="md" active={false}
-              onClick={() => { setShowPresets(!showPresets); setShowExamples(false); }}
-              style={{ padding: "4px 10px" }}>
-              Presets
-            </Button>
-            {showPresets && (
-              <div style={{
-                position: "absolute",
-                top: "100%",
-                left: 0,
-                marginTop: 4,
-                background: theme.surface.overlay,
-                border: `1px solid ${theme.border.default}`,
-                borderRadius: 6,
-                padding: 4,
-                zIndex: 20,
-                minWidth: 260,
-                boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
-              }}>
-                {presets.map((p) => (
-                  <SelectableListItem key={p.key} isSelected={false}
-                    onClick={() => { setQuery(p.query); setShowPresets(false); }}
-                    style={{ padding: "6px 10px", marginBottom: 0, borderRadius: 4, color: theme.text.muted }}>
-                    {p.title}
-                  </SelectableListItem>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        <div style={{ flex: 1 }} />
-
-        <Button size="md" active={false}
-          onClick={() => { setQuery(""); setResult(null); setError(null); setElapsed(null); }}
-          style={{ padding: "4px 10px" }}>
-          Clear
-        </Button>
-
-        <Button size="md" onClick={execute} disabled={isRunning || !onExecute}
-          color={theme.palette.emerald} active={!!onExecute}
-          style={{ padding: "4px 14px" }}>
-          {isRunning ? "Running…" : "Execute"}
-          <span style={{ marginLeft: 6, opacity: 0.5, fontWeight: 400 }}>Ctrl+Enter</span>
-        </Button>
-      </div>
-
-      {/* Editor */}
-      <div style={{
-        flex: "0 0 auto",
-        maxHeight: "40%",
-        minHeight: 120,
-        display: "flex",
-        borderBottom: `1px solid ${theme.border.default}`,
-      }}>
-        {/* Line numbers */}
-        <div style={{
-          padding: "12px 0",
-          width: 40,
-          textAlign: "right",
-          paddingRight: 8,
-          color: theme.text.hint,
-          fontSize: sz(11),
-          fontFamily: theme.font.mono,
-          lineHeight: "1.5",
-          userSelect: "none",
-          borderRight: `1px solid ${theme.border.default}`,
-          overflow: "hidden",
-        }}>
-          {Array.from({ length: lineCount }, (_, i) => (
-            <div key={i}>{i + 1}</div>
-          ))}
-        </div>
-
-        <textarea
-          ref={textareaRef}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={handleKeyDown}
-          spellCheck={false}
-          style={{
-            flex: 1,
-            padding: "12px 16px",
-            background: "transparent",
-            border: "none",
-            outline: "none",
-            color: theme.text.primary,
-            fontSize: sz(12),
-            fontFamily: theme.font.mono,
-            lineHeight: "1.5",
-            resize: "none",
-            overflow: "auto",
-          }}
-        />
-      </div>
-
-      {/* Results area */}
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
-        {/* Results header */}
-        <div style={{
-          padding: "6px 16px",
-          borderBottom: `1px solid ${theme.border.default}`,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-        }}>
-          <span style={{ fontSize: sz(9), color: theme.text.hint, fontFamily: theme.font.mono, textTransform: "uppercase", letterSpacing: "0.05em" }}>
-            Results
-          </span>
-          {result && (
-            <span style={{ fontSize: sz(9), color: theme.text.faint, fontFamily: theme.font.mono }}>
-              {result.rows.length} row{result.rows.length !== 1 ? "s" : ""}
-              {elapsed !== null && ` · ${(elapsed / 1000).toFixed(2)}s`}
-            </span>
-          )}
-          {error && (
-            <span style={{ fontSize: sz(9), color: theme.palette.rose, fontFamily: theme.font.mono }}>
-              Error{elapsed !== null && ` · ${(elapsed / 1000).toFixed(2)}s`}
-            </span>
-          )}
-        </div>
-
-        {/* Results content */}
-        <div style={{ flex: 1, overflow: "auto" }}>
-          {isRunning && (
-            <div style={{ padding: 32, textAlign: "center", color: theme.text.faint, fontSize: sz(12), fontFamily: theme.font.mono }}>
-              Executing query…
-            </div>
-          )}
-
-          {error && (
-            <div style={{
-              margin: 16,
-              padding: 16,
-              borderRadius: 8,
-              background: theme.palette.rose + "10",
-              border: `1px solid ${theme.palette.rose}33`,
-            }}>
-              <div style={{ fontSize: sz(11), color: theme.palette.rose, fontFamily: theme.font.mono, whiteSpace: "pre-wrap" }}>
-                {error}
-              </div>
-            </div>
-          )}
-
-          {!isRunning && !error && !result && (
-            <div style={{ padding: 32, textAlign: "center", color: theme.text.hint, fontSize: sz(11), fontFamily: theme.font.mono }}>
-              {onExecute
-                ? "Write a query and press Ctrl+Enter to execute."
-                : "SPARQL endpoint not connected."}
-            </div>
-          )}
-
-          {result && result.rows.length === 0 && (
+    <QueryWorkbench<SparqlResult>
+      language="SPARQL"
+      defaultQuery={EXAMPLE_QUERIES[3].query}
+      examples={EXAMPLE_QUERIES}
+      presets={presets}
+      onExecute={onExecute}
+      renderResultsHeader={(result, elapsed) => (
+        <span style={{ fontSize: 9, fontFamily: "inherit", color: "inherit" }}>
+          {result.rows.length} row{result.rows.length !== 1 ? "s" : ""}
+          {elapsed !== null && ` · ${(elapsed / 1000).toFixed(2)}s`}
+        </span>
+      )}
+      renderResults={(result, _elapsed, { theme, sz }) => {
+        if (result.rows.length === 0) {
+          return (
             <div style={{ padding: 32, textAlign: "center", color: theme.text.faint, fontSize: sz(11), fontFamily: theme.font.mono }}>
               Query returned no results.
             </div>
-          )}
-
-          {result && result.rows.length > 0 && (
-            <table style={{
-              width: "100%",
-              borderCollapse: "collapse",
-              fontSize: sz(11),
-              fontFamily: theme.font.mono,
-            }}>
-              <thead>
-                <tr>
-                  {result.columns.map(col => (
-                    <th
-                      key={col}
-                      style={{
-                        padding: "8px 12px",
-                        textAlign: "left",
-                        color: theme.palette.cyan,
-                        fontWeight: 600,
-                        fontSize: sz(10),
-                        borderBottom: `1px solid ${theme.border.default}`,
-                        position: "sticky",
-                        top: 0,
-                        background: theme.surface.base,
-                        zIndex: 1,
-                      }}
-                    >
-                      ?{col}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {result.rows.map((row, i) => (
-                  <tr
-                    key={i}
-                    style={{ background: i % 2 === 0 ? "transparent" : theme.surface.card }}
-                  >
-                    {result.columns.map(col => {
-                      const val = row[col] || "";
-                      const isUri = val.startsWith("http://") || val.startsWith("https://");
-                      return (
-                        <td
-                          key={col}
-                          title={val}
-                          style={{
-                            padding: "6px 12px",
-                            color: isUri ? theme.palette.blue : theme.text.muted,
-                            borderBottom: `1px solid ${theme.border.subtle}`,
-                            maxWidth: 400,
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                          }}
-                        >
-                          {isUri ? shortenUri(val) : val}
-                        </td>
-                      );
-                    })}
-                  </tr>
+          );
+        }
+
+        return (
+          <table style={{
+            width: "100%",
+            borderCollapse: "collapse",
+            fontSize: sz(11),
+            fontFamily: theme.font.mono,
+          }}>
+            <thead>
+              <tr>
+                {result.columns.map(col => (
+                  <th key={col} style={{
+                    padding: "8px 12px",
+                    textAlign: "left",
+                    color: theme.palette.cyan,
+                    fontWeight: 600,
+                    fontSize: sz(10),
+                    borderBottom: `1px solid ${theme.border.default}`,
+                    position: "sticky",
+                    top: 0,
+                    background: theme.surface.base,
+                    zIndex: 1,
+                  }}>
+                    ?{col}
+                  </th>
                 ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-      </div>
-    </div>
+              </tr>
+            </thead>
+            <tbody>
+              {result.rows.map((row, i) => (
+                <tr key={i} style={{ background: i % 2 === 0 ? "transparent" : theme.surface.card }}>
+                  {result.columns.map(col => {
+                    const val = row[col] || "";
+                    const isUri = val.startsWith("http://") || val.startsWith("https://");
+                    return (
+                      <td key={col} title={val} style={{
+                        padding: "6px 12px",
+                        color: isUri ? theme.palette.blue : theme.text.muted,
+                        borderBottom: `1px solid ${theme.border.subtle}`,
+                        maxWidth: 400,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}>
+                        {isUri ? shortenUri(val) : val}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        );
+      }}
+    />
   );
 }