Compose react-ui primitives instead of raw controls

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. */

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>

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,8 +451,9 @@ export function CreateAgentPanel({
 
           <label className="create-agent-quiet-field">
             <span>What should this agent do? (optional)</span>
-            <textarea
+            <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"

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

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

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;