From c9a7cf470f09adc7a17641ce0c49791b0f64f581 Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Fri, 21 Aug 2026 02:33:30 -0700
Subject: [PATCH 1/3] Compose react-ui primitives instead of raw controls

Swap hand-rolled <button>/<input type=checkbox>/<textarea>/<table>
markup for react-ui's Button, Checkbox, Textarea, and Table family in
agent-skills-picker, create-agent-panel, diff-view, and routine-panel.
Drop the now-redundant custom textarea CSS in create-agent-panel now
that Textarea supplies its own styling.
---
 apps/web/src/app.css                       | 11 ------
 apps/web/src/pages/agent-skills-picker.tsx | 39 +++++++++-------------
 apps/web/src/pages/create-agent-panel.tsx  |  3 +-
 apps/web/src/pages/diff-view.tsx           | 38 ++++++++++++---------
 apps/web/src/shell/routine-panel.tsx       |  5 +--
 5 files changed, 42 insertions(+), 54 deletions(-)

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 797c46877..13eea5353 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -2841,17 +2841,6 @@ tr.insights-row-clickable:hover {
   color: var(--muted-foreground);
 }
 
-.create-agent-quiet-field > textarea {
-  width: 100%;
-  border-radius: var(--radius, 0.375rem);
-  border: 1px solid var(--input);
-  background: var(--background);
-  padding: 0.5rem 0.75rem;
-  font: inherit;
-  font-size: 0.8125rem;
-  resize: vertical;
-}
-
 /* The Suggestions row: template cards that prefill name+purpose and run
    the same drafting flow as a typed name — see the component's own
    `SUGGESTIONS` doc comment on why each one is real. */
diff --git a/apps/web/src/pages/agent-skills-picker.tsx b/apps/web/src/pages/agent-skills-picker.tsx
index a4167f29f..86d2d0686 100644
--- a/apps/web/src/pages/agent-skills-picker.tsx
+++ b/apps/web/src/pages/agent-skills-picker.tsx
@@ -8,6 +8,7 @@
 // nothing because there is nothing are very different outcomes.
 
 import { WorkbenchLoadingState } from "@corbits/chat-ui";
+import { Button, Checkbox } from "@corbits/react-ui";
 import { useEffect, useState } from "react";
 
 import { listSkills, type SkillSummary } from "../skills-api";
@@ -100,42 +101,32 @@ export function AgentSkillsPicker({
                 renamed it, or discarded it.
               </span>
             </span>
-            <button
+            <Button
               type="button"
-              className="text-xs font-medium text-muted-foreground underline underline-offset-2 hover:text-foreground"
+              variant="link"
+              size="sm"
               disabled={disabled}
               onClick={() => toggle(name)}
             >
               Remove
-            </button>
+            </Button>
           </div>
         );
       })}
       {state.skills.map((skill) => {
         const id = `${idPrefix}-skill-${skill.name}`;
         return (
-          <label
+          <Checkbox
             key={skill.assetId}
-            htmlFor={id}
-            className="flex items-start gap-2 text-sm"
-          >
-            <input
-              id={id}
-              type="checkbox"
-              className="mt-0.5 size-4 rounded-none border border-input accent-[var(--primary)]"
-              checked={selected.includes(skill.name)}
-              disabled={disabled}
-              onChange={() => toggle(skill.name)}
-            />
-            <span className="flex flex-col">
-              <span className="font-medium">{skill.name}</span>
-              {skill.description !== "" && (
-                <span className="text-xs text-muted-foreground">
-                  {skill.description}
-                </span>
-              )}
-            </span>
-          </label>
+            id={id}
+            label={skill.name}
+            checked={selected.includes(skill.name)}
+            disabled={disabled}
+            onCheckedChange={() => toggle(skill.name)}
+            {...(skill.description !== ""
+              ? { description: skill.description }
+              : {})}
+          />
         );
       })}
     </div>
diff --git a/apps/web/src/pages/create-agent-panel.tsx b/apps/web/src/pages/create-agent-panel.tsx
index 79784627e..23d899d5c 100644
--- a/apps/web/src/pages/create-agent-panel.tsx
+++ b/apps/web/src/pages/create-agent-panel.tsx
@@ -49,6 +49,7 @@ import {
   DialogHeader,
   DialogTitle,
   IntakeForm,
+  Textarea,
 } from "@corbits/react-ui";
 import type { AvatarTone, IntakeField } from "@corbits/react-ui";
 import { useEffect, useState } from "react";
@@ -450,7 +451,7 @@ export function CreateAgentPanel({
 
           <label className="create-agent-quiet-field">
             <span>What should this agent do? (optional)</span>
-            <textarea
+            <Textarea
               id="create-agent-purpose"
               value={values.purpose}
               onChange={(event) => handlePurposeChange(event.target.value)}
diff --git a/apps/web/src/pages/diff-view.tsx b/apps/web/src/pages/diff-view.tsx
index 408df1b9d..628472bb3 100644
--- a/apps/web/src/pages/diff-view.tsx
+++ b/apps/web/src/pages/diff-view.tsx
@@ -5,7 +5,13 @@
 // computes the script exactly once per render — the change summary is read
 // off the same result the rows come from.
 
-import { Badge } from "@corbits/react-ui";
+import {
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@corbits/react-ui";
 import { diffText } from "@corbits/text-diff";
 import type { DiffLine } from "@corbits/text-diff";
 import { useMemo } from "react";
@@ -73,29 +79,29 @@ export function DiffView({
         )} removed`}
       </p>
       <div className="max-h-96 overflow-auto rounded-md border border-border bg-muted/30">
-        <table className="w-full border-collapse font-mono text-xs leading-relaxed">
-          <tbody>
+        <Table className="w-full border-collapse font-mono text-xs leading-relaxed">
+          <TableBody>
             {diff.lines.map((line, index) => (
-              <tr
+              <TableRow
                 key={`${String(index)}:${line.kind}`}
-                className={ROW_CLASS[line.kind]}
+                className={`${ROW_CLASS[line.kind]} border-b-0 hover:bg-transparent`}
               >
-                <td className="w-10 select-none px-2 text-right tabular-nums text-muted-foreground">
+                <TableCell className="w-10 select-none px-2 text-right tabular-nums text-muted-foreground">
                   {lineNumber(line.beforeLineNumber)}
-                </td>
-                <td className="w-10 select-none px-2 text-right tabular-nums text-muted-foreground">
+                </TableCell>
+                <TableCell className="w-10 select-none px-2 text-right tabular-nums text-muted-foreground">
                   {lineNumber(line.afterLineNumber)}
-                </td>
-                <td className="w-6 select-none px-1 text-center">
+                </TableCell>
+                <TableCell className="w-6 select-none px-1 text-center">
                   {MARKER[line.kind]}
-                </td>
-                <td className="whitespace-pre-wrap break-words px-2 py-0.5">
+                </TableCell>
+                <TableCell className="whitespace-pre-wrap break-words px-2 py-0.5">
                   {line.text === "" ? " " : line.text}
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             ))}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
     </div>
   );
diff --git a/apps/web/src/shell/routine-panel.tsx b/apps/web/src/shell/routine-panel.tsx
index e7ec0cd64..be62407c1 100644
--- a/apps/web/src/shell/routine-panel.tsx
+++ b/apps/web/src/shell/routine-panel.tsx
@@ -41,6 +41,7 @@ import {
   MenuTrigger,
   RunNowButton,
   Switch,
+  Textarea,
   toast,
 } from "@corbits/react-ui";
 import { listWorkbenchAgents } from "@corbits/chat-ui";
@@ -538,9 +539,9 @@ function RoutineEditorPanel({
           >
             What should this routine do each time it runs?
           </label>
-          <textarea
+          <Textarea
             id="routine-panel-instruction"
-            className="min-h-20 w-full rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-bg)] px-2.5 py-1.5 text-sm text-[var(--ui-fg)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)]"
+            className="min-h-20"
             value={instruction}
             disabled={busy}
             onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>

From a039c7646708d3dc602870eedfe8ef16ddbc7421 Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Fri, 21 Aug 2026 02:33:36 -0700
Subject: [PATCH 2/3] Lower react-ui-drift snapshot to 48

The primitive swaps in the previous commit cut the ratcheted violation
count from 53 to 48; lock in the reduction so it can't silently creep
back up.
---
 scripts/checks/react-ui-drift-allowlist.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/checks/react-ui-drift-allowlist.ts b/scripts/checks/react-ui-drift-allowlist.ts
index be01d41e2..47ef96113 100644
--- a/scripts/checks/react-ui-drift-allowlist.ts
+++ b/scripts/checks/react-ui-drift-allowlist.ts
@@ -44,4 +44,4 @@ export const REACT_UI_DRIFT_ALLOWLIST: readonly DriftAllowlistEntry[] = [
   },
 ];
 
-export const REACT_UI_DRIFT_SNAPSHOT = 52;
+export const REACT_UI_DRIFT_SNAPSHOT = 48;

From f4b20ab2c9c8a16e3b376912793b3749d4cdbc22 Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Fri, 21 Aug 2026 02:42:57 -0700
Subject: [PATCH 3/3] Restore purpose field's background and font-size after
 Textarea swap

Textarea's defaults (bg-card, text-sm) don't match what the removed
.create-agent-quiet-field > textarea CSS rule set. Preflight already
covers resize:vertical and font-family:inherit for every textarea, so
only background and font-size needed restoring via className.
---
 apps/web/src/pages/create-agent-panel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/pages/create-agent-panel.tsx b/apps/web/src/pages/create-agent-panel.tsx
index 23d899d5c..9133066da 100644
--- a/apps/web/src/pages/create-agent-panel.tsx
+++ b/apps/web/src/pages/create-agent-panel.tsx
@@ -453,6 +453,7 @@ export function CreateAgentPanel({
             <span>What should this agent do? (optional)</span>
             <Textarea
               id="create-agent-purpose"
+              className="bg-background text-[0.8125rem]"
               value={values.purpose}
               onChange={(event) => handlePurposeChange(event.target.value)}
               placeholder="Leave blank and teach it in conversation"