From dabd368057799b8fcdf57be11be023321813806d Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Thu, 1 Oct 2026 06:58:15 -0700
Subject: [PATCH] refactor(web)!: the web app drops its Tailwind build and
 styles with CSS files only (CL-9681)

react-ui's prebuilt stylesheet is the only generated CSS; app-authored utility classes became named classes in colocated CSS files.
---
 apps/web/package.json                         |   2 -
 apps/web/src/bench/approvals-insights.tsx     |   4 +-
 apps/web/src/bench/artifacts-tab.tsx          |   2 +-
 apps/web/src/bench/bench-pill.tsx             |   2 +-
 apps/web/src/bench/information-tab.tsx        |   8 +-
 apps/web/src/bench/insights-tab.tsx           |   2 +-
 apps/web/src/bench/members-tab.tsx            |   4 +-
 apps/web/src/bench/workflows-tab.tsx          |   2 +-
 apps/web/src/chat/avatar.css                  |  17 ++
 apps/web/src/chat/avatar.tsx                  |   8 +-
 apps/web/src/components/confirm-button.tsx    |   2 +-
 apps/web/src/components/page-parts.css        | 170 +++++++++++++
 apps/web/src/lib/icons/index.tsx              |   2 +-
 apps/web/src/library/artifact-renderer.css    |  61 +++++
 apps/web/src/library/artifact-renderer.tsx    |  21 +-
 apps/web/src/main.tsx                         |   2 +-
 apps/web/src/pages/bench-insights.tsx         |   6 +-
 apps/web/src/pages/create-agent-panel.css     |  18 ++
 apps/web/src/pages/create-agent-panel.tsx     |  25 +-
 apps/web/src/pages/create-skill-dialog.tsx    |   4 +-
 apps/web/src/pages/diff-view.css              | 114 +++++++++
 apps/web/src/pages/diff-view.tsx              |  46 ++--
 apps/web/src/pages/insights-page.css          |  22 ++
 apps/web/src/pages/insights-page.tsx          |  33 ++-
 apps/web/src/pages/library-page.css           | 109 +++++++++
 apps/web/src/pages/library-page.tsx           |  44 ++--
 apps/web/src/pages/new-workbench-picker.tsx   |   2 +-
 apps/web/src/pages/routine-detail-page.tsx    |  12 +-
 apps/web/src/pages/routines-page.tsx          |   4 +-
 apps/web/src/pages/skill-detail-page.css      |  32 +++
 apps/web/src/pages/skill-detail-page.tsx      |  25 +-
 apps/web/src/pages/skills-page.tsx            |  10 +-
 apps/web/src/pages/tools-page.tsx             |  27 ++-
 apps/web/src/pages/workbench-page.tsx         |   6 +-
 .../src/pages/workbench-schedules-panel.css   |  12 +
 .../src/pages/workbench-schedules-panel.tsx   |   9 +-
 apps/web/src/pages/worker-page.css            |  57 +++++
 apps/web/src/pages/worker-page.tsx            |  38 ++-
 apps/web/src/pages/workers-page.css           | 226 ++++++++++++++++++
 apps/web/src/pages/workers-page.tsx           |  84 +++----
 apps/web/src/settings/account-section.tsx     |   2 +-
 .../context-menu/lib/context-menu-view.css    |   8 +
 .../context-menu/lib/context-menu-view.tsx    |   7 +-
 apps/web/src/tailwind.css                     |  54 -----
 apps/web/src/tools/tools-page.css             |  25 ++
 apps/web/vite.config.ts                       |   3 +-
 bun.lock                                      |  80 -------
 47 files changed, 1077 insertions(+), 376 deletions(-)
 create mode 100644 apps/web/src/components/page-parts.css
 create mode 100644 apps/web/src/library/artifact-renderer.css
 create mode 100644 apps/web/src/pages/create-agent-panel.css
 create mode 100644 apps/web/src/pages/diff-view.css
 create mode 100644 apps/web/src/pages/insights-page.css
 create mode 100644 apps/web/src/pages/library-page.css
 create mode 100644 apps/web/src/pages/skill-detail-page.css
 create mode 100644 apps/web/src/pages/workbench-schedules-panel.css
 create mode 100644 apps/web/src/pages/workers-page.css
 create mode 100644 apps/web/src/shell/context-menu/lib/context-menu-view.css
 delete mode 100644 apps/web/src/tailwind.css

diff --git a/apps/web/package.json b/apps/web/package.json
index 70699f228d..244e523967 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -42,13 +42,11 @@
   },
   "devDependencies": {
     "@intx/inference": "workspace:*",
-    "@tailwindcss/vite": "^4.3.3",
     "@types/bun": "catalog:",
     "@types/react": "^19.2.2",
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "^5.0.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.3",
     "typescript": "catalog:",
     "vite": "^7.1.0"
   }
diff --git a/apps/web/src/bench/approvals-insights.tsx b/apps/web/src/bench/approvals-insights.tsx
index 58f7552a08..95a7008af0 100644
--- a/apps/web/src/bench/approvals-insights.tsx
+++ b/apps/web/src/bench/approvals-insights.tsx
@@ -51,7 +51,7 @@ export function ApprovalsCard({
         {capped ? ` Based on the ${runs.length} most recent runs.` : ""}
       </p>
       {tally.kind === "loading" ? (
-        <Skeleton className="h-24 w-full" />
+        <Skeleton className="skeleton-card-lg" />
       ) : tally.kind === "error" ? (
         <p className="bi-sub">Couldn't load approvals.</p>
       ) : (
@@ -83,7 +83,7 @@ export function ApprovalsLine({
   readonly runs: readonly InsightsRun[];
 }) {
   const tally = useApprovalTally(tenantId, runs);
-  if (tally.kind === "loading") return <Skeleton className="h-5 w-full" />;
+  if (tally.kind === "loading") return <Skeleton className="skeleton-line" />;
   if (tally.kind === "error") return <p className="insights-note">Couldn't load approvals.</p>;
   return (
     <div className="appr-line">
diff --git a/apps/web/src/bench/artifacts-tab.tsx b/apps/web/src/bench/artifacts-tab.tsx
index efcbb98adc..91ed01e060 100644
--- a/apps/web/src/bench/artifacts-tab.tsx
+++ b/apps/web/src/bench/artifacts-tab.tsx
@@ -21,7 +21,7 @@ export function ArtifactsTab({ workbenchTenantId }: { readonly workbenchTenantId
         <h3>Files saved here</h3>
         <Link to={benchLink(ARTIFACTS_PATH_PREFIX, workbenchTenantId)}>Open all</Link>
       </div>
-      {page.kind === "loading" ? <Skeleton className="h-16 w-full" /> : null}
+      {page.kind === "loading" ? <Skeleton className="skeleton-card" /> : null}
       {page.kind === "error" ? <p className="workbench-info-empty-note">{page.message}</p> : null}
       {page.kind === "ready" && rows.length === 0 ? (
         <p className="workbench-info-empty-note">Nothing saved here yet.</p>
diff --git a/apps/web/src/bench/bench-pill.tsx b/apps/web/src/bench/bench-pill.tsx
index 1983bcc509..da49823913 100644
--- a/apps/web/src/bench/bench-pill.tsx
+++ b/apps/web/src/bench/bench-pill.tsx
@@ -33,7 +33,7 @@ export function BenchPill({
     >
       {worker === undefined ? (
         rosterReady ? null : (
-          <Skeleton className="size-6 rounded-full" />
+          <Skeleton className="skeleton-avatar" />
         )
       ) : (
         <IdentityAvatar kind="agent" name={worker.name} principalId={worker.id} />
diff --git a/apps/web/src/bench/information-tab.tsx b/apps/web/src/bench/information-tab.tsx
index 6b6a0c0188..fc3b1b155b 100644
--- a/apps/web/src/bench/information-tab.tsx
+++ b/apps/web/src/bench/information-tab.tsx
@@ -247,7 +247,7 @@ export function InformationTab({
       ) : null}
 
       <Section title="Needs you">
-        {approvalsQuery.kind === "loading" ? <Skeleton className="h-16 w-full" /> : null}
+        {approvalsQuery.kind === "loading" ? <Skeleton className="skeleton-card" /> : null}
         {approvalsQuery.kind === "error" ? (
           <p className="workbench-info-empty-note">{approvalsQuery.message}</p>
         ) : null}
@@ -283,7 +283,7 @@ export function InformationTab({
         title="Active workflows"
         action={{ to: benchLink(WORKFLOWS_PATH_PREFIX, workbenchTenantId), label: "View all" }}
       >
-        {flows.isLoading ? <Skeleton className="h-10 w-full" /> : null}
+        {flows.isLoading ? <Skeleton className="skeleton-row" /> : null}
         {flows.isSuccess && liveFlows.length === 0 ? (
           <p className="workbench-info-empty-note">No workflows are running here.</p>
         ) : null}
@@ -308,7 +308,7 @@ export function InformationTab({
         title="Latest artifacts"
         action={{ to: benchLink(ARTIFACTS_PATH_PREFIX, workbenchTenantId), label: "View all" }}
       >
-        {artifacts.kind === "loading" ? <Skeleton className="h-10 w-full" /> : null}
+        {artifacts.kind === "loading" ? <Skeleton className="skeleton-row" /> : null}
         {artifacts.kind === "ready" && latest.length === 0 ? (
           <p className="workbench-info-empty-note">Nothing saved here yet.</p>
         ) : null}
@@ -334,7 +334,7 @@ export function InformationTab({
         title="Skills"
         action={{ to: benchLink(SKILLS_PATH_PREFIX, workbenchTenantId), label: "View all" }}
       >
-        {skills.isLoading ? <Skeleton className="h-10 w-full" /> : null}
+        {skills.isLoading ? <Skeleton className="skeleton-row" /> : null}
         {skills.isSuccess && shownSkills.length === 0 ? (
           <p className="workbench-info-empty-note">No skills here yet.</p>
         ) : null}
diff --git a/apps/web/src/bench/insights-tab.tsx b/apps/web/src/bench/insights-tab.tsx
index d8ad390e4d..14472ca821 100644
--- a/apps/web/src/bench/insights-tab.tsx
+++ b/apps/web/src/bench/insights-tab.tsx
@@ -38,7 +38,7 @@ export function InsightsTab({ workbenchTenantId }: { readonly workbenchTenantId:
     ),
   });
 
-  if (runs.kind === "loading") return <Skeleton className="h-32 w-full" />;
+  if (runs.kind === "loading") return <Skeleton className="skeleton-panel-sm" />;
   if (runs.kind !== "ready") {
     return (
       <RichEmptyState
diff --git a/apps/web/src/bench/members-tab.tsx b/apps/web/src/bench/members-tab.tsx
index c8905868bb..cd122c81f3 100644
--- a/apps/web/src/bench/members-tab.tsx
+++ b/apps/web/src/bench/members-tab.tsx
@@ -87,7 +87,7 @@ export function MembersTab({
           <h3>People</h3>
           <Link to="/settings/people">Invite</Link>
         </div>
-        {people.isPending ? <Skeleton className="h-12 w-full" /> : null}
+        {people.isPending ? <Skeleton className="skeleton-row-lg" /> : null}
         {people.isError ? (
           <RichEmptyState
             title="Couldn't load people"
@@ -119,7 +119,7 @@ export function MembersTab({
           <h3>Workers</h3>
           <Link to="/workers">Add</Link>
         </div>
-        {loading ? <Skeleton className="h-12 w-full" /> : null}
+        {loading ? <Skeleton className="skeleton-row-lg" /> : null}
         {!loading && workers.length === 0 ? (
           <p className="workbench-info-empty-note">No workers yet.</p>
         ) : null}
diff --git a/apps/web/src/bench/workflows-tab.tsx b/apps/web/src/bench/workflows-tab.tsx
index b8ff6dacfc..a25a81ba15 100644
--- a/apps/web/src/bench/workflows-tab.tsx
+++ b/apps/web/src/bench/workflows-tab.tsx
@@ -26,7 +26,7 @@ export function WorkflowsTab({ workbenchTenantId }: { readonly workbenchTenantId
         <h3>Scheduled here</h3>
         <Link to={benchLink(WORKFLOWS_PATH_PREFIX, workbenchTenantId)}>Open all</Link>
       </div>
-      {flows.isLoading ? <Skeleton className="h-16 w-full" /> : null}
+      {flows.isLoading ? <Skeleton className="skeleton-card" /> : null}
       {flows.isError ? (
         <p className="workbench-info-empty-note">
           {describeApiError(flows.error, "loading workflows")}
diff --git a/apps/web/src/chat/avatar.css b/apps/web/src/chat/avatar.css
index fc992bd591..de4e09f419 100644
--- a/apps/web/src/chat/avatar.css
+++ b/apps/web/src/chat/avatar.css
@@ -17,6 +17,23 @@
   color: var(--canvas);
 }
 
+.avatar-fill-1 {
+  background: var(--avatar-1);
+  color: black;
+}
+.avatar-fill-2 {
+  background: var(--avatar-2);
+  color: black;
+}
+.avatar-fill-3 {
+  background: var(--avatar-3);
+  color: black;
+}
+.avatar-fill-4 {
+  background: var(--avatar-4);
+  color: black;
+}
+
 /* The status dot is the only round non-initials child. */
 .wb-av > span.rounded-full {
   width: 8px;
diff --git a/apps/web/src/chat/avatar.tsx b/apps/web/src/chat/avatar.tsx
index 637ef79784..3df3972b49 100644
--- a/apps/web/src/chat/avatar.tsx
+++ b/apps/web/src/chat/avatar.tsx
@@ -27,10 +27,10 @@ const TONE_BY_COLOR: Record<AvatarColor, AvatarTone> = {
 };
 
 export const avatarColorClass: Record<AvatarColor, string> = {
-  "--avatar-1": "bg-(--avatar-1) text-black",
-  "--avatar-2": "bg-(--avatar-2) text-black",
-  "--avatar-3": "bg-(--avatar-3) text-black",
-  "--avatar-4": "bg-(--avatar-4) text-black",
+  "--avatar-1": "avatar-fill-1",
+  "--avatar-2": "avatar-fill-2",
+  "--avatar-3": "avatar-fill-3",
+  "--avatar-4": "avatar-fill-4",
 };
 
 const WORKER_HUES = ["orange", "blue", "green"] as const;
diff --git a/apps/web/src/components/confirm-button.tsx b/apps/web/src/components/confirm-button.tsx
index 6dae6086ba..7a19d4fb9a 100644
--- a/apps/web/src/components/confirm-button.tsx
+++ b/apps/web/src/components/confirm-button.tsx
@@ -21,7 +21,7 @@ export function ConfirmButton({ onConfirm, children, confirmLabel, ...props }: C
   return (
     <span
       ref={rootRef}
-      className="inline-flex items-center gap-1"
+      className="inline-actions"
       onKeyDown={(e) => {
         if (e.key === "Escape") setArmed(false);
       }}
diff --git a/apps/web/src/components/page-parts.css b/apps/web/src/components/page-parts.css
new file mode 100644
index 0000000000..d5376a8956
--- /dev/null
+++ b/apps/web/src/components/page-parts.css
@@ -0,0 +1,170 @@
+/* The frame every routed page shares: a column that fills the stage, with
+   one scrolling body. */
+.page-frame {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.page-scroll {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.page-scroll-auto {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+}
+
+.page-scroll-column {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.page-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.page-note {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--muted-foreground);
+}
+
+.page-error {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--destructive);
+}
+
+.page-error-inline {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--destructive);
+}
+
+.page-meta {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--muted-foreground);
+}
+
+.inline-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.inline-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Icons default to the surrounding text size; `:where` keeps zero
+   specificity so a sized icon class still wins. */
+:where(svg.lucide) {
+  width: 1em;
+  height: 1em;
+}
+
+.icon-sm {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Loading placeholders, sized by the content they stand in for. */
+.skeleton-line {
+  width: 100%;
+  height: 1.25rem;
+}
+.skeleton-row {
+  width: 100%;
+  height: 2.5rem;
+}
+.skeleton-row-lg {
+  width: 100%;
+  height: 3rem;
+}
+.skeleton-card {
+  width: 100%;
+  height: 4rem;
+}
+.skeleton-card-lg {
+  width: 100%;
+  height: 6rem;
+}
+.skeleton-panel-sm {
+  width: 100%;
+  height: 8rem;
+}
+.skeleton-panel {
+  width: 100%;
+  height: 10rem;
+}
+.skeleton-panel-lg {
+  width: 100%;
+  height: 12rem;
+}
+.skeleton-avatar {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+}
+.skeleton-avatar-lg {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+}
+.skeleton-name {
+  width: 5rem;
+  height: 1rem;
+}
+.skeleton-stat {
+  width: 4rem;
+  height: 26px;
+}
+
+.page-meta-plain {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.page-error-list {
+  list-style: inside disc;
+}
+
+.code-textarea {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.code-textarea-canvas {
+  background: var(--background);
+}
+
+.code-textarea-tall {
+  min-height: 320px;
+}
diff --git a/apps/web/src/lib/icons/index.tsx b/apps/web/src/lib/icons/index.tsx
index 18fc374c0f..d73cf8e36e 100644
--- a/apps/web/src/lib/icons/index.tsx
+++ b/apps/web/src/lib/icons/index.tsx
@@ -88,7 +88,7 @@ export {
 } from "lucide-react";
 
 /** Wraps a subtree so every icon under it defaults to a 2px stroke without
- * repeating it at each call site (the `1em` default size is `tailwind.css`).
+ * repeating it at each call site (the `1em` default size is `page-parts.css`).
  * Mounted once at each app's root (see `apps/web/src/app.tsx`). */
 export function BoldIconProvider({ children }: { children: ReactNode }) {
   return <LucideProvider strokeWidth={2}>{children}</LucideProvider>;
diff --git a/apps/web/src/library/artifact-renderer.css b/apps/web/src/library/artifact-renderer.css
new file mode 100644
index 0000000000..d3861baea9
--- /dev/null
+++ b/apps/web/src/library/artifact-renderer.css
@@ -0,0 +1,61 @@
+.artifact-doc {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.625;
+  color: var(--foreground);
+}
+
+.artifact-doc-heading {
+  font-weight: 600;
+  line-height: 1.375;
+}
+
+.artifact-doc-bullets {
+  list-style: disc;
+  padding-left: 1.25rem;
+}
+
+.artifact-pdf {
+  border-radius: var(--ui-radius-md);
+  border: 1px solid var(--border);
+  background: var(--card);
+  padding: 1.5rem;
+  box-shadow:
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.artifact-pdf-title {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+.artifact-pdf-text {
+  white-space: pre-wrap;
+  font-size: 0.875rem;
+  line-height: 1.625;
+  color: var(--foreground);
+}
+
+.artifact-html-frame {
+  width: 100%;
+  height: 100%;
+  min-height: 24rem;
+  border: 0;
+}
+
+.artifact-unsupported {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 2rem 0;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--muted-foreground);
+}
diff --git a/apps/web/src/library/artifact-renderer.tsx b/apps/web/src/library/artifact-renderer.tsx
index f0a0e36bbf..513332dbd1 100644
--- a/apps/web/src/library/artifact-renderer.tsx
+++ b/apps/web/src/library/artifact-renderer.tsx
@@ -3,6 +3,7 @@
 
 import { CsvTable } from "@corbits/react-ui";
 import { FileDashed } from "@/lib/icons";
+import "./artifact-renderer.css";
 import type { ArtifactRendererKind } from "./renderer-kind";
 
 export type ArtifactRenderProps = {
@@ -76,19 +77,19 @@ function DocRenderer({
   const lines = parseDocLines(content);
   const HeadingTag = ["h1", "h2", "h3"] as const;
   return (
-    <div className="flex flex-col gap-2 text-sm leading-relaxed text-foreground">
+    <div className="artifact-doc">
       {lines.map((line, index) => {
         if (line.kind === "heading") {
           const Tag = HeadingTag[line.level - 1] ?? "h3";
           return (
-            <Tag key={index} className="font-semibold leading-snug">
+            <Tag key={index} className="artifact-doc-heading">
               {line.text}
             </Tag>
           );
         }
         if (line.kind === "bullet") {
           return (
-            <ul key={index} className="list-disc pl-5">
+            <ul key={index} className="artifact-doc-bullets">
               <li>{line.text}</li>
             </ul>
           );
@@ -143,9 +144,9 @@ function PdfRenderer({
     );
   }
   return (
-    <div className="rounded-[var(--ui-radius-md)] border border-border bg-card p-6 shadow-sm">
-      <h3 className="mb-3 text-sm font-semibold">{title}</h3>
-      <p className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">{content}</p>
+    <div className="artifact-pdf">
+      <h3 className="artifact-pdf-title">{title}</h3>
+      <p className="artifact-pdf-text">{content}</p>
     </div>
   );
 }
@@ -170,19 +171,19 @@ function HtmlPreviewRenderer({
       title={`${title} preview`}
       src={previewSrc}
       sandbox="allow-scripts"
-      className="h-full min-h-[24rem] w-full border-0"
+      className="artifact-html-frame"
     />
   );
 }
 
 function EmptyContent({ message }: { readonly message: string }) {
-  return <p className="text-sm text-muted-foreground">{message}</p>;
+  return <p className="page-note">{message}</p>;
 }
 
 function UnsupportedRenderer({ unavailableReason }: { readonly unavailableReason?: string }) {
   return (
-    <div className="flex flex-col items-center gap-2 py-8 text-center text-sm text-muted-foreground">
-      <FileDashed className="size-6" aria-hidden="true" />
+    <div className="artifact-unsupported">
+      <FileDashed className="icon-sm" aria-hidden="true" />
       <p>{unavailableReason ?? "No inline preview for this artifact."}</p>
     </div>
   );
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 5c777d337a..05aa8325fe 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -4,7 +4,7 @@
 
 import "@corbits/react-ui/styles.css";
 import "./app.css";
-import "./tailwind.css";
+import "./components/page-parts.css";
 import "./theme-tokens.css";
 
 import { StrictMode } from "react";
diff --git a/apps/web/src/pages/bench-insights.tsx b/apps/web/src/pages/bench-insights.tsx
index 95c711ff7d..9a60971885 100644
--- a/apps/web/src/pages/bench-insights.tsx
+++ b/apps/web/src/pages/bench-insights.tsx
@@ -217,7 +217,7 @@ export function BenchInsights({
 
   let body: ReactNode;
   if (runs.kind === "loading") {
-    body = <Skeleton className="h-48 w-full" />;
+    body = <Skeleton className="skeleton-panel-lg" />;
   } else if (runs.kind !== "ready") {
     body = (
       <RichEmptyState
@@ -233,9 +233,9 @@ export function BenchInsights({
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar crumbs={crumbs} actions={rangeSeg} />
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="page-scroll">
         <PageLayout title="Insights" subtitle={`What happened in ${title}.`}>
           {body}
         </PageLayout>
diff --git a/apps/web/src/pages/create-agent-panel.css b/apps/web/src/pages/create-agent-panel.css
new file mode 100644
index 0000000000..cf51653d9f
--- /dev/null
+++ b/apps/web/src/pages/create-agent-panel.css
@@ -0,0 +1,18 @@
+.create-agent-servers {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.create-agent-server-list {
+  margin-top: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.create-agent-server-name {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
diff --git a/apps/web/src/pages/create-agent-panel.tsx b/apps/web/src/pages/create-agent-panel.tsx
index 1013967a42..f506da1d8e 100644
--- a/apps/web/src/pages/create-agent-panel.tsx
+++ b/apps/web/src/pages/create-agent-panel.tsx
@@ -19,6 +19,7 @@ import { ApiQueryError } from "@/lib/api-query";
 import type { DeployedAgent } from "../agent-deploy";
 import { useDeployAgentMutation } from "../agents-api";
 import { useMcpServers } from "../tools/mcp-servers-query";
+import "./create-agent-panel.css";
 
 function submitErrorFromCause(
   cause: unknown,
@@ -124,12 +125,12 @@ export function CreateAgentPanel({
         </DialogHeader>
         <DialogBody>
           {submitError !== null && (
-            <p className="mb-3 text-sm text-destructive" role="alert">
+            <p className="page-error-inline" role="alert">
               {submitError.message}
               {submitError.refId !== undefined ? (
                 <>
                   <br />
-                  <span className="text-xs">Reference: {submitError.refId}</span>
+                  <span className="page-meta-plain">Reference: {submitError.refId}</span>
                 </>
               ) : null}
             </p>
@@ -149,7 +150,7 @@ export function CreateAgentPanel({
             <span>System prompt</span>
             <Textarea
               id="create-agent-system-prompt"
-              className="bg-background font-mono text-[0.8125rem]"
+              className="code-textarea code-textarea-canvas"
               value={systemPrompt}
               onChange={(event) => setSystemPrompt(event.target.value)}
               placeholder="You are..."
@@ -158,38 +159,38 @@ export function CreateAgentPanel({
             />
           </label>
 
-          <div className="mt-3 flex flex-col gap-2">
+          <div className="create-agent-servers">
             <fieldset disabled={deploy.isPending}>
               <legend className="create-agent-quiet-field">
                 <span>MCP servers</span>
               </legend>
-              <p className="text-xs text-muted-foreground">
+              <p className="page-meta">
                 The workspace catalog — checked servers are bound into this agent like your
                 worker&apos;s Exa, ask-gated except read-only tools.
               </p>
               {catalog.kind === "loading" ? (
-                <p className="text-xs text-muted-foreground">Loading workspace servers…</p>
+                <p className="page-meta">Loading workspace servers…</p>
               ) : catalog.kind === "ready" && catalog.data.length === 0 ? (
-                <p className="text-xs text-muted-foreground">
+                <p className="page-meta">
                   No MCP servers in this workspace yet — add them on the Tools page.
                 </p>
               ) : catalog.kind === "ready" ? (
-                <ul className="mt-1 flex flex-col gap-1">
+                <ul className="create-agent-server-list">
                   {catalog.data.map((server) => (
-                    <li key={server.credentialId} className="flex items-center gap-2">
+                    <li key={server.credentialId} className="inline-row">
                       <SelectionCheckbox
                         checked={selectedHandles.includes(server.handle)}
                         onToggle={() => toggleHandle(server.handle)}
                         rowLabel={server.name}
                         ariaLabel={`Bind the ${server.name} MCP server`}
                       />
-                      <span className="text-sm">{server.name}</span>
-                      <span className="text-xs text-muted-foreground">{server.handle}</span>
+                      <span className="create-agent-server-name">{server.name}</span>
+                      <span className="page-meta">{server.handle}</span>
                     </li>
                   ))}
                 </ul>
               ) : (
-                <p className="text-xs text-muted-foreground">
+                <p className="page-meta">
                   Couldn&apos;t load the workspace catalog — the agent will deploy without MCP
                   servers.
                 </p>
diff --git a/apps/web/src/pages/create-skill-dialog.tsx b/apps/web/src/pages/create-skill-dialog.tsx
index a4bb4ad3b8..2e5549a40c 100644
--- a/apps/web/src/pages/create-skill-dialog.tsx
+++ b/apps/web/src/pages/create-skill-dialog.tsx
@@ -123,12 +123,12 @@ export function CreateSkillDialog({
         </DialogHeader>
         <DialogBody>
           {serverError !== null && (
-            <p className="mb-3 text-sm text-destructive" role="alert">
+            <p className="page-error-inline" role="alert">
               {serverError}
             </p>
           )}
           {showIssues && issues.length > 0 && (
-            <ul className="mb-3 list-inside list-disc text-sm text-destructive" role="alert">
+            <ul className="page-error-inline page-error-list" role="alert">
               {issues.map((issue) => (
                 <li key={issue}>{issue}</li>
               ))}
diff --git a/apps/web/src/pages/diff-view.css b/apps/web/src/pages/diff-view.css
new file mode 100644
index 0000000000..c2dbacd059
--- /dev/null
+++ b/apps/web/src/pages/diff-view.css
@@ -0,0 +1,114 @@
+.diff-view,
+.diff-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.diff-summary {
+  gap: 0.25rem;
+}
+
+.diff-summary-text {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--foreground);
+}
+
+.diff-counts {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground);
+}
+
+.diff-scroll {
+  max-height: 24rem;
+  overflow: auto;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: color-mix(in oklab, var(--muted) 30%, transparent);
+}
+
+.diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.625;
+}
+
+.diff-row {
+  border-bottom-width: 0;
+}
+
+.diff-row:hover {
+  background: transparent;
+}
+
+.diff-row-context {
+  color: var(--muted-foreground);
+}
+
+.diff-row-added {
+  background: color-mix(in oklab, var(--success) 10%, transparent);
+  color: var(--foreground);
+}
+
+.diff-row-removed {
+  background: color-mix(in oklab, var(--destructive) 10%, transparent);
+  color: var(--foreground);
+}
+
+.diff-row-skipped {
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+.diff-row-added:hover,
+.diff-row-removed:hover {
+  background: transparent;
+}
+
+.diff-cell {
+  user-select: none;
+}
+
+.diff-cell-number {
+  width: 2.5rem;
+  padding-inline: 0.5rem;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground);
+}
+
+.diff-cell-marker {
+  width: 1.5rem;
+  padding-inline: 0.25rem;
+  text-align: center;
+}
+
+.diff-cell-text {
+  user-select: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  padding: 0.125rem 0.5rem;
+}
+
+.diff-skip-marker {
+  margin-inline: auto;
+}
+
+.diff-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.diff-heading-arrow {
+  color: var(--muted-foreground);
+}
diff --git a/apps/web/src/pages/diff-view.tsx b/apps/web/src/pages/diff-view.tsx
index 9d27f1dfe8..200526ecb1 100644
--- a/apps/web/src/pages/diff-view.tsx
+++ b/apps/web/src/pages/diff-view.tsx
@@ -6,19 +6,20 @@ import { diffText } from "@/lib/text-diff";
 import type { DiffLine } from "@/lib/text-diff";
 import { ArrowRight, DotsThree } from "@/lib/icons";
 import { useMemo, type ReactNode } from "react";
+import "./diff-view.css";
 
 const MARKER: Record<DiffLine["kind"], ReactNode> = {
   context: " ",
   added: "+",
   removed: "-",
-  skipped: <DotsThree aria-hidden="true" className="mx-auto" />,
+  skipped: <DotsThree aria-hidden="true" className="diff-skip-marker" />,
 };
 
 const ROW_CLASS: Record<DiffLine["kind"], string> = {
-  context: "text-muted-foreground",
-  added: "bg-success/10 text-foreground",
-  removed: "bg-destructive/10 text-foreground",
-  skipped: "text-muted-foreground italic",
+  context: "diff-row diff-row-context",
+  added: "diff-row diff-row-added",
+  removed: "diff-row diff-row-removed",
+  skipped: "diff-row diff-row-skipped",
 };
 
 function lineNumber(value: number | null): string {
@@ -38,7 +39,7 @@ export function DiffView({
 
   if (diff.status === "identical") {
     return (
-      <p className="text-sm text-muted-foreground" data-testid="diff-unchanged">
+      <p className="page-note" data-testid="diff-unchanged">
         {unchangedNotice}
       </p>
     );
@@ -46,11 +47,11 @@ export function DiffView({
 
   if (diff.status === "too-large") {
     return (
-      <div className="flex flex-col gap-1" data-testid="diff-too-large">
-        <p className="text-sm text-foreground">
+      <div className="diff-summary" data-testid="diff-too-large">
+        <p className="diff-summary-text">
           This change is too large to show line by line — showing a summary only.
         </p>
-        <p className="font-mono text-xs tabular-nums text-muted-foreground">
+        <p className="diff-counts">
           {`${String(diff.beforeLines)} lines before, ${String(
             diff.afterLines,
           )} after — ${String(diff.changedBeforeLines)} rewritten to ${String(
@@ -62,28 +63,23 @@ export function DiffView({
   }
 
   return (
-    <div className="flex flex-col gap-2" data-testid="diff-view">
-      <p className="font-mono text-xs tabular-nums text-muted-foreground">
+    <div className="diff-view" data-testid="diff-view">
+      <p className="diff-counts">
         {`+${String(diff.totals.added)} added, −${String(diff.totals.removed)} 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">
+      <div className="diff-scroll">
+        <Table className="diff-table">
           <TableBody>
             {diff.lines.map((line, index) => (
-              <TableRow
-                key={`${String(index)}:${line.kind}`}
-                className={`${ROW_CLASS[line.kind]} border-b-0 hover:bg-transparent`}
-              >
-                <TableCell className="w-10 select-none px-2 text-right tabular-nums text-muted-foreground">
+              <TableRow key={`${String(index)}:${line.kind}`} className={ROW_CLASS[line.kind]}>
+                <TableCell className="diff-cell diff-cell-number">
                   {lineNumber(line.beforeLineNumber)}
                 </TableCell>
-                <TableCell className="w-10 select-none px-2 text-right tabular-nums text-muted-foreground">
+                <TableCell className="diff-cell diff-cell-number">
                   {lineNumber(line.afterLineNumber)}
                 </TableCell>
-                <TableCell className="w-6 select-none px-1 text-center">
-                  {MARKER[line.kind]}
-                </TableCell>
-                <TableCell className="whitespace-pre-wrap break-words px-2 py-0.5">
+                <TableCell className="diff-cell diff-cell-marker">{MARKER[line.kind]}</TableCell>
+                <TableCell className="diff-cell diff-cell-text">
                   {line.text === "" ? " " : line.text}
                 </TableCell>
               </TableRow>
@@ -103,9 +99,9 @@ export function DiffHeading({
   readonly afterLabel: string;
 }) {
   return (
-    <div className="flex flex-wrap items-center gap-2 text-xs">
+    <div className="diff-heading">
       <Badge tone="neutral">{beforeLabel}</Badge>
-      <ArrowRight aria-hidden="true" className="text-muted-foreground" />
+      <ArrowRight aria-hidden="true" className="diff-heading-arrow" />
       <Badge tone="info">{afterLabel}</Badge>
     </div>
   );
diff --git a/apps/web/src/pages/insights-page.css b/apps/web/src/pages/insights-page.css
new file mode 100644
index 0000000000..4f01cba948
--- /dev/null
+++ b/apps/web/src/pages/insights-page.css
@@ -0,0 +1,22 @@
+.insights-stat-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  border-radius: calc(var(--radius) + 2px);
+  border: 1px solid var(--border);
+  background: var(--card);
+  padding: 1rem;
+}
+
+.insights-stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+
+.insights-link-button {
+  font-weight: 600;
+  color: var(--primary-emphasis);
+}
diff --git a/apps/web/src/pages/insights-page.tsx b/apps/web/src/pages/insights-page.tsx
index 146e1e7cda..d42b793a50 100644
--- a/apps/web/src/pages/insights-page.tsx
+++ b/apps/web/src/pages/insights-page.tsx
@@ -55,6 +55,7 @@ import { INSIGHTS_PATH_PREFIX, INSIGHTS_RUNS_PATH } from "../path-ids";
 import { benchLink, useFromBench } from "../shell/page-crumbs";
 import { StageTopBar } from "../shell/stage-top-bar";
 import { useTenantQuery } from "../routines-api";
+import "./insights-page.css";
 
 export function formatWhen(iso: string): string {
   const date = new Date(iso);
@@ -108,11 +109,9 @@ function InsightsStat({
 }) {
   if (loading === true) {
     return (
-      <div className="flex flex-col gap-1.5 rounded-lg border border-border bg-card p-4">
-        <span className="text-[10px] font-semibold tracking-[0.12em] uppercase text-muted-foreground">
-          {label}
-        </span>
-        <Skeleton className="h-[26px] w-16" />
+      <div className="insights-stat-loading">
+        <span className="insights-stat-label">{label}</span>
+        <Skeleton className="skeleton-stat" />
       </div>
     );
   }
@@ -217,16 +216,16 @@ export function InsightsRunsHistory({
   const purpose = purposeRunsForInsights(runs);
   const groups = groupRunsByDefinition(purpose);
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar
         crumbs={[{ label: "Insights", href: INSIGHTS_PATH_PREFIX }, { label: "Run history" }]}
         subtitle={`${purpose.length} runs`}
       />
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="page-scroll">
         <PageShell width="full" className="page-fill">
           <div className="insights-layout">
             {loading ? (
-              <Skeleton className="h-40 w-full" />
+              <Skeleton className="skeleton-panel" />
             ) : groups.length === 0 ? (
               <RichEmptyState
                 icon={<ChartBar />}
@@ -271,7 +270,7 @@ function RunFailureDetail({
   const events = useAPIQuery(insightsRunEventsPath(tenantId, runId), RunEventsSchema);
   const [showEvents, setShowEvents] = useState(false);
 
-  if (events.kind === "loading") return <Skeleton className="h-24 w-full" />;
+  if (events.kind === "loading") return <Skeleton className="skeleton-card-lg" />;
   if (events.kind !== "ready") {
     return (
       <RichEmptyState
@@ -289,12 +288,12 @@ function RunFailureDetail({
   return (
     <section className="insights-panel">
       <h3>Failure</h3>
-      <p className="text-sm text-destructive">
+      <p className="page-error">
         {message ?? "This run failed, but no event carried a specific error message."}
       </p>
       <button
         type="button"
-        className="font-semibold text-primary-emphasis"
+        className="insights-link-button"
         onClick={() => setShowEvents((value) => !value)}
       >
         {showEvents ? "Hide events" : "View events"}
@@ -330,7 +329,7 @@ export function InsightsRunDetail({
 }) {
   const failed = run !== null && insightsRunStatus(run) === "failed";
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar
         crumbs={[
           { label: "Runs", href: INSIGHTS_RUNS_PATH },
@@ -338,7 +337,7 @@ export function InsightsRunDetail({
         ]}
         subtitle={run !== null ? formatWhen(run.createdAt) : null}
       />
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="page-scroll">
         <PageShell width="full" className="page-fill">
           <div className="insights-layout">
             <StatGrid columns={3}>
@@ -385,7 +384,7 @@ export function InsightsPage({
 
   if (runs.kind === "unauthenticated") {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={[{ label: "Runs" }]} />
         <PageShell width="full" className="page-fill">
           <SignedOutNotice />
@@ -436,11 +435,11 @@ function InsightsWorkbenchPage({
     );
   }
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar crumbs={[{ label: "Insights" }]} />
       <PageShell width="full" className="page-fill">
         {workbenchesLoading ? (
-          <Skeleton className="h-48 w-full" />
+          <Skeleton className="skeleton-panel-lg" />
         ) : (
           <RichEmptyState
             icon={<ChartBar />}
@@ -469,7 +468,7 @@ function InsightsLandingRedirect({ benchTenantId }: { readonly benchTenantId: st
   if (isLoading) {
     return (
       <PageShell width="full" className="page-fill">
-        <Skeleton className="h-48 w-full" />
+        <Skeleton className="skeleton-panel-lg" />
       </PageShell>
     );
   }
diff --git a/apps/web/src/pages/library-page.css b/apps/web/src/pages/library-page.css
new file mode 100644
index 0000000000..7676baf452
--- /dev/null
+++ b/apps/web/src/pages/library-page.css
@@ -0,0 +1,109 @@
+.lib-source {
+  margin-top: 0.125rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.lib-source-link {
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.lib-source-link:hover {
+  color: var(--foreground);
+}
+
+.lib-preview {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+  background: var(--card);
+}
+
+.lib-preview-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--border);
+  padding: 0.75rem 1rem;
+}
+
+.lib-preview-titles {
+  min-width: 0;
+}
+
+.lib-preview-title,
+.lib-preview-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lib-preview-title {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+.lib-preview-meta {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--muted-foreground);
+}
+
+.lib-preview-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.lib-preview-body {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.lib-error {
+  padding: 0.5rem 1rem 0;
+}
+
+@media (min-width: 640px) {
+  .lib-error {
+    padding-inline: 1.75rem;
+  }
+}
+
+.lib-split {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+
+.lib-list-pane {
+  min-height: 0;
+  min-width: 0;
+  flex: 1;
+  overflow: auto;
+}
+
+.lib-preview-pane {
+  display: none;
+  width: min(28rem, 40%);
+  flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+  .lib-preview-pane {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/apps/web/src/pages/library-page.tsx b/apps/web/src/pages/library-page.tsx
index f0e6cb1fc9..8260f6c890 100644
--- a/apps/web/src/pages/library-page.tsx
+++ b/apps/web/src/pages/library-page.tsx
@@ -59,6 +59,7 @@ import {
 } from "../shell/library-artifacts";
 import { PageLayout } from "../shell/page-layout";
 import { StageTopBar } from "../shell/stage-top-bar";
+import "./library-page.css";
 
 function ArtifactRows({
   artifacts,
@@ -150,11 +151,8 @@ function ProvenanceLine({ source }: { readonly source: Record<string, unknown> }
   const runId = workflowRunIdFromSource(source);
   if (runId === null) return null;
   return (
-    <p className="mt-0.5 truncate text-xs">
-      <Link
-        to={`/insights/runs/${encodeURIComponent(runId)}`}
-        className="text-muted-foreground underline underline-offset-2 hover:text-foreground"
-      >
+    <p className="lib-source">
+      <Link to={`/insights/runs/${encodeURIComponent(runId)}`} className="lib-source-link">
         Produced by workflow run
       </Link>
     </p>
@@ -189,19 +187,19 @@ function PreviewPane({
     uploadMimeType !== null &&
     !isTextDecodableMediaType(uploadMimeType);
   return (
-    <aside className="flex h-full min-h-0 min-w-0 flex-col border-l border-border bg-card">
-      <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-3">
-        <div className="min-w-0">
-          <p className="truncate text-sm font-semibold">{detail?.title ?? "Preview"}</p>
+    <aside className="lib-preview">
+      <div className="lib-preview-head">
+        <div className="lib-preview-titles">
+          <p className="lib-preview-title">{detail?.title ?? "Preview"}</p>
           {detail !== null ? (
-            <p className="truncate text-xs text-muted-foreground">
+            <p className="lib-preview-meta">
               {artifactKindLabel(detail.kind)}
               {` · Version ${detail.version}`}
             </p>
           ) : null}
           {detail !== null ? <ProvenanceLine source={detail.source} /> : null}
         </div>
-        <div className="flex items-center gap-1">
+        <div className="lib-preview-actions">
           {previewSrc !== undefined ? (
             <Button variant="ghost" size="sm" asChild>
               <a href={previewSrc} target="_blank" rel="noreferrer">
@@ -221,10 +219,10 @@ function PreviewPane({
           </Button>
         </div>
       </div>
-      <div className="min-h-0 flex-1 overflow-auto p-4">
-        {loading ? <Skeleton className="h-40 w-full" /> : null}
+      <div className="lib-preview-body">
+        {loading ? <Skeleton className="skeleton-panel" /> : null}
         {error !== null ? (
-          <p className="text-sm text-destructive" role="alert">
+          <p className="page-error" role="alert">
             {error}
           </p>
         ) : null}
@@ -316,7 +314,7 @@ export function LibraryPage({
       : (artifacts.find((artifact) => artifact.id === activeSelected) ?? null);
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar
         crumbs={
           selectedSummary === null
@@ -350,7 +348,7 @@ export function LibraryPage({
           ref={fileInputRef}
           type="file"
           multiple
-          className="sr-only"
+          className="visually-hidden"
           tabIndex={-1}
           aria-hidden="true"
           onChange={(event) => {
@@ -363,12 +361,12 @@ export function LibraryPage({
         />
       ) : null}
       {uploadError !== undefined && uploadError !== null ? (
-        <p className="px-4 pt-2 text-sm text-destructive sm:px-7" role="alert">
+        <p className="page-error lib-error" role="alert">
           {uploadError}
         </p>
       ) : null}
-      <div className="flex min-h-0 flex-1">
-        <div className="min-h-0 min-w-0 flex-1 overflow-auto">
+      <div className="lib-split">
+        <div className="lib-list-pane">
           <PageLayout title="Artifacts" subtitle="Everything your workers made. Yours to keep.">
             <ListFilter label="Filter artifacts" value={activeQuery} onChange={setActiveQuery} />
             {artifacts.length === 0 ? (
@@ -397,7 +395,7 @@ export function LibraryPage({
           </PageLayout>
         </div>
         {activeSelected !== null ? (
-          <div className="hidden w-[min(28rem,40%)] shrink-0 md:flex md:flex-col">
+          <div className="lib-preview-pane">
             <PreviewPane
               tenantId={tenantId}
               detail={preview}
@@ -487,7 +485,7 @@ export function LibraryRoute({ path }: { readonly path: string }) {
 
   if (selectedTenantId === null) {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={[{ label: "Artifacts" }]} />
         <PageLayout title="Artifacts" subtitle="Everything your workers made. Yours to keep.">
           <RichEmptyState
@@ -502,7 +500,7 @@ export function LibraryRoute({ path }: { readonly path: string }) {
 
   if (page.kind === "error" && isArtifactsUnavailableStatus(page.status)) {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={[{ label: "Artifacts" }]} />
         <PageLayout title="Artifacts" subtitle="Everything your workers made. Yours to keep.">
           <RichEmptyState
@@ -517,7 +515,7 @@ export function LibraryRoute({ path }: { readonly path: string }) {
 
   if (page.kind !== "ready") {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={[{ label: "Artifacts" }]} />
         <PageLayout title="Artifacts" subtitle="Everything your workers made. Yours to keep.">
           {page.kind === "loading" ? (
diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx
index 2b1bc3a94f..3253235d62 100644
--- a/apps/web/src/pages/new-workbench-picker.tsx
+++ b/apps/web/src/pages/new-workbench-picker.tsx
@@ -88,7 +88,7 @@ export function NewWorkbenchPickerRoute() {
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar crumbs={[{ label: "New" }]} />
       <div className="new-wrap" data-keyboard={keyboard ? "" : undefined}>
         {create.isPending ? (
diff --git a/apps/web/src/pages/routine-detail-page.tsx b/apps/web/src/pages/routine-detail-page.tsx
index 7f19513dbf..baeffddd57 100644
--- a/apps/web/src/pages/routine-detail-page.tsx
+++ b/apps/web/src/pages/routine-detail-page.tsx
@@ -82,7 +82,7 @@ function RunDetail({
   readonly onRetry: () => Promise<void>;
 }) {
   const eventsQuery = useAPIQuery(runEventsPath(tenantId, run.id), RunEventsSchema);
-  if (eventsQuery.kind === "loading") return <Skeleton className="h-16 w-full" />;
+  if (eventsQuery.kind === "loading") return <Skeleton className="skeleton-card" />;
   if (eventsQuery.kind === "error") {
     return <RichEmptyState title="Couldn't load events" description={eventsQuery.message} />;
   }
@@ -129,7 +129,7 @@ function RoutineRunsSection({
   return (
     <section className="routine-sec">
       <h2>Recent runs</h2>
-      {runsQuery.kind === "loading" ? <Skeleton className="h-24 w-full" /> : null}
+      {runsQuery.kind === "loading" ? <Skeleton className="skeleton-card-lg" /> : null}
       {runsQuery.kind === "error" ? (
         <RichEmptyState title="Couldn't load runs" description={runsQuery.message} />
       ) : null}
@@ -178,11 +178,11 @@ function RoutineNotice({
 }) {
   const navigate = useNavigate();
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar
         crumbs={[{ label: "Workflows", href: WORKFLOWS_PATH_PREFIX }, { label: title }]}
       />
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="page-scroll">
         <PageLayout title={title}>
           <RichEmptyState
             icon={<Clock />}
@@ -212,14 +212,14 @@ export function RoutineDetailPage({
   const description = useRoutineDescription(row.tenantId, row.definition.name);
   const paused = state.label === "paused";
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar
         crumbs={[
           { label: "Workflows", href: WORKFLOWS_PATH_PREFIX },
           { label: row.definition.name },
         ]}
       />
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="page-scroll">
         <PageLayout
           title={row.definition.name}
           subtitle={
diff --git a/apps/web/src/pages/routines-page.tsx b/apps/web/src/pages/routines-page.tsx
index eb49c338f3..6c4bbdc8f2 100644
--- a/apps/web/src/pages/routines-page.tsx
+++ b/apps/web/src/pages/routines-page.tsx
@@ -136,9 +136,9 @@ export function RoutinesRoute() {
   const rows = routinesQuery.kind === "ready" ? routinesQuery.data : [];
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar crumbs={[{ label: "Workflows" }]} />
-      <div className="stage-content flex min-h-0 flex-1 flex-col overflow-y-auto">
+      <div className="stage-content page-scroll-column">
         {routinesQuery.kind === "loading" ? (
           <WorkflowsLayout>
             <EmptyState icon={<Clock />} title="Loading workflows…" />
diff --git a/apps/web/src/pages/skill-detail-page.css b/apps/web/src/pages/skill-detail-page.css
new file mode 100644
index 0000000000..f5073d93cd
--- /dev/null
+++ b/apps/web/src/pages/skill-detail-page.css
@@ -0,0 +1,32 @@
+.skill-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.skill-detail-head {
+  min-width: 0;
+}
+
+.skill-detail-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+.skill-detail-meta {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--muted-foreground);
+}
+
+.skill-detail-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
diff --git a/apps/web/src/pages/skill-detail-page.tsx b/apps/web/src/pages/skill-detail-page.tsx
index 14a0172f2f..978b5282ff 100644
--- a/apps/web/src/pages/skill-detail-page.tsx
+++ b/apps/web/src/pages/skill-detail-page.tsx
@@ -24,6 +24,7 @@ import { skillDisplayName } from "../skill-display-name";
 import { readSkillSource, writeSkillSource } from "../skill-source";
 import { StageTopBar } from "../shell/stage-top-bar";
 import { loadSkill, type SkillSummary } from "../skills-api";
+import "./skill-detail-page.css";
 
 function errorText(cause: unknown): string {
   return cause instanceof Error ? cause.message : String(cause);
@@ -75,9 +76,9 @@ export function SkillDetailPage({
 
   function frame(body: ReactNode) {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={crumbs} />
-        <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="page-scroll">
           <PageShell width="full" className="page-fill">
             {body}
           </PageShell>
@@ -87,9 +88,7 @@ export function SkillDetailPage({
   }
 
   if (tenantId === null) {
-    return frame(
-      <p className="text-sm text-muted-foreground">Pick a workbench to see this skill.</p>,
-    );
+    return frame(<p className="page-note">Pick a workbench to see this skill.</p>);
   }
 
   if (state.status === "missing") {
@@ -121,12 +120,10 @@ export function SkillDetailPage({
   const { skill } = state;
 
   return frame(
-    <div className="flex flex-col gap-6">
-      <header className="min-w-0">
-        <h1 className="truncate text-lg font-semibold tracking-tight">{skillDisplayName(skill)}</h1>
-        <p className="mt-1 text-xs text-muted-foreground">
-          Updated {formatRelativeTime(skill.updatedAtIso, now)}
-        </p>
+    <div className="skill-detail">
+      <header className="skill-detail-head">
+        <h1 className="skill-detail-title">{skillDisplayName(skill)}</h1>
+        <p className="skill-detail-meta">Updated {formatRelativeTime(skill.updatedAtIso, now)}</p>
       </header>
 
       <SkillSourceEditor tenantId={tenantId} skill={skill} />
@@ -176,7 +173,7 @@ function SkillSourceEditor({
   return (
     <Section title="SKILL.md" description="This skill's instructions, read from its own repo.">
       {source.data === undefined ? (
-        <Textarea value="" disabled className="min-h-[320px] font-mono text-[0.8125rem]" />
+        <Textarea value="" disabled className="code-textarea code-textarea-tall" />
       ) : (
         <SkillDraftEditor
           key={source.data}
@@ -205,11 +202,11 @@ function SkillDraftEditor({
   const dirty = draft !== initial;
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="skill-detail-editor">
       <Textarea
         value={draft}
         onChange={(event) => setDraft(event.target.value)}
-        className="min-h-[320px] font-mono text-[0.8125rem]"
+        className="code-textarea code-textarea-tall"
         placeholder="# Skill instructions"
       />
       <div>
diff --git a/apps/web/src/pages/skills-page.tsx b/apps/web/src/pages/skills-page.tsx
index c7188009a8..0b59466af3 100644
--- a/apps/web/src/pages/skills-page.tsx
+++ b/apps/web/src/pages/skills-page.tsx
@@ -94,9 +94,9 @@ export function SkillsPage({
 
   function stage(body: ReactNode) {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={crumbs} />
-        <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="page-scroll">
           <PageLayout
             title="Skills"
             subtitle="Know-how your workers draw on. Ask for more in any bench."
@@ -111,9 +111,7 @@ export function SkillsPage({
   const filterInput = <ListFilter label="Filter skills" value={query} onChange={setQuery} />;
 
   if (tenantId === null) {
-    return stage(
-      <p className="text-sm text-muted-foreground">Pick a workbench to see its skills.</p>,
-    );
+    return stage(<p className="page-note">Pick a workbench to see its skills.</p>);
   }
 
   if (state.status === "loading") {
@@ -135,7 +133,7 @@ export function SkillsPage({
 
   if (skills.length === 0) {
     return stage(
-      <div className="flex flex-col gap-4">
+      <div className="page-stack">
         {filterInput}
         <RichEmptyState
           icon={<Lightning />}
diff --git a/apps/web/src/pages/tools-page.tsx b/apps/web/src/pages/tools-page.tsx
index bd3920151f..83290d4d99 100644
--- a/apps/web/src/pages/tools-page.tsx
+++ b/apps/web/src/pages/tools-page.tsx
@@ -217,7 +217,7 @@ function AddByUrl({
   }
 
   return (
-    <Card className="flex flex-col gap-3 p-4">
+    <Card className="tool-card">
       <div>
         <CardTitle>Add a server by URL</CardTitle>
         <CardDescription>Any MCP server that speaks streamable HTTP.</CardDescription>
@@ -239,7 +239,12 @@ function AddByUrl({
           setToken(event.target.value);
         }}
       />
-      <Button size="sm" className="self-start" disabled={adding || url === ""} onClick={submit}>
+      <Button
+        size="sm"
+        className="tool-add-submit"
+        disabled={adding || url === ""}
+        onClick={submit}
+      >
         Add
       </Button>
     </Card>
@@ -260,9 +265,9 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
 
   function stage(body: React.ReactNode) {
     return (
-      <div className="flex h-full min-h-0 flex-col">
+      <div className="page-frame">
         <StageTopBar crumbs={crumbs} />
-        <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="page-scroll">
           <PageLayout
             title="Tools"
             subtitle="Official servers first. Secrets never touch your workers."
@@ -275,9 +280,7 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
   }
 
   if (tenantId === null) {
-    return stage(
-      <p className="text-sm text-muted-foreground">Pick a workbench to see its tools.</p>,
-    );
+    return stage(<p className="page-note">Pick a workbench to see its tools.</p>);
   }
 
   function addServer(input: { url: string; name: string; handle: string; token?: string }) {
@@ -292,7 +295,7 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
   }
 
   return stage(
-    <div className="flex flex-col gap-8">
+    <div className="tools-sections">
       <Input
         className="tools-filter"
         aria-label="Filter tools"
@@ -316,7 +319,7 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
                 description="The workspace catalog, shared by every workbench: a server's tools reach the agents whose definitions bind it."
               >
                 {connected.length === 0 ? (
-                  <p className="text-sm text-muted-foreground">Nothing connected yet.</p>
+                  <p className="page-note">Nothing connected yet.</p>
                 ) : (
                   <div className="tools-grid">
                     {connected.map((server) => (
@@ -391,9 +394,9 @@ export function ToolsPage({ tenantId }: { readonly tenantId: string | null }) {
                 <TableBody>
                   {toolPackages.map((tool) => (
                     <TableRow key={tool.name}>
-                      <TableCell className="font-medium">{tool.name}</TableCell>
-                      <TableCell className="text-muted-foreground">{tool.version ?? "—"}</TableCell>
-                      <TableCell className="text-muted-foreground">
+                      <TableCell className="tools-cell-name">{tool.name}</TableCell>
+                      <TableCell className="tools-cell-soft">{tool.version ?? "—"}</TableCell>
+                      <TableCell className="tools-cell-soft">
                         {tool.agentNames.join(", ")}
                       </TableCell>
                     </TableRow>
diff --git a/apps/web/src/pages/workbench-page.tsx b/apps/web/src/pages/workbench-page.tsx
index 6b392981f4..c6ca8d3ac7 100644
--- a/apps/web/src/pages/workbench-page.tsx
+++ b/apps/web/src/pages/workbench-page.tsx
@@ -165,12 +165,12 @@ function WorkbenchMessageRow({
             principalId={resolved?.id ?? message.address}
           />
         ) : (
-          <Skeleton className="size-8 rounded-full" />
+          <Skeleton className="skeleton-avatar-lg" />
         )}
       </span>
       <div className="chat-thread-body">
         <div className="chat-thread-head">
-          {rosterReady ? <b>{avatarName}</b> : <Skeleton className="h-4 w-20" />}
+          {rosterReady ? <b>{avatarName}</b> : <Skeleton className="skeleton-name" />}
           {chatAgent === undefined ? null : (
             <WorkerRoleText tenantId={workbenchTenantId} agent={chatAgent} />
           )}
@@ -346,7 +346,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       {releasedAgents.map((agent) => (
         <AgentRedeployer
           key={agent.id}
diff --git a/apps/web/src/pages/workbench-schedules-panel.css b/apps/web/src/pages/workbench-schedules-panel.css
new file mode 100644
index 0000000000..0444dc5b6d
--- /dev/null
+++ b/apps/web/src/pages/workbench-schedules-panel.css
@@ -0,0 +1,12 @@
+.workbench-info-schedule-actions {
+  margin-top: 0.25rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.workbench-info-schedule-form {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
diff --git a/apps/web/src/pages/workbench-schedules-panel.tsx b/apps/web/src/pages/workbench-schedules-panel.tsx
index 6644d2fe90..793c0cc186 100644
--- a/apps/web/src/pages/workbench-schedules-panel.tsx
+++ b/apps/web/src/pages/workbench-schedules-panel.tsx
@@ -19,6 +19,7 @@ import {
 } from "../routines-api";
 import { tenantKeys } from "../query-client";
 import { ConfirmButton } from "../components/confirm-button";
+import "./workbench-schedules-panel.css";
 
 type FormState = {
   readonly definitionName: string;
@@ -109,7 +110,7 @@ export function WorkbenchSchedulesPanel({
         </Button>
       </div>
 
-      {schedules.isLoading ? <Skeleton className="h-16 w-full" /> : null}
+      {schedules.isLoading ? <Skeleton className="skeleton-card" /> : null}
       {schedules.isError ? (
         <p className="workbench-info-empty-note">
           {describeApiError(schedules.error, "loading schedules")}
@@ -150,7 +151,7 @@ export function WorkbenchSchedulesPanel({
                   </span>
                 </>
               )}
-              <div className="mt-1 flex gap-2">
+              <div className="workbench-info-schedule-actions">
                 {schedule.stoppedAt === null ? null : (
                   <Button
                     variant="ghost"
@@ -182,9 +183,9 @@ export function WorkbenchSchedulesPanel({
       ) : null}
 
       {open ? (
-        <div className="mt-3 flex flex-col gap-2">
+        <div className="workbench-info-schedule-form">
           {create.isError ? (
-            <p className="text-sm text-destructive" role="alert">
+            <p className="page-error" role="alert">
               {scheduleError(create.error)}
             </p>
           ) : null}
diff --git a/apps/web/src/pages/worker-page.css b/apps/web/src/pages/worker-page.css
index db75aba70b..eba4b18b6f 100644
--- a/apps/web/src/pages/worker-page.css
+++ b/apps/web/src/pages/worker-page.css
@@ -228,3 +228,60 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.wp-figure {
+  font-variant-numeric: tabular-nums;
+}
+
+.wp-note {
+  margin-top: 0.75rem;
+  font-size: 13px;
+  color: var(--ink-3);
+}
+
+.wp-note-error {
+  color: var(--danger-ink);
+}
+
+.wp-hint {
+  font-size: 12.5px;
+  color: var(--ink-3);
+}
+
+.wp-instructions {
+  margin-top: 0.75rem;
+  width: 100%;
+  resize: vertical;
+  border-radius: var(--r-md);
+  border: 1px solid var(--line);
+  background: var(--card);
+  padding: 0.75rem;
+  font-size: 13.5px;
+  line-height: 1.625;
+}
+
+.wp-save-row {
+  margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.wp-perm-list {
+  margin-top: 0.75rem;
+}
+
+.wp-page-message {
+  padding: 1.75rem;
+  font-size: 14px;
+  color: var(--ink-3);
+}
+
+.wp-page-message-error {
+  color: var(--danger-ink);
+}
+
+.wp-page-skeleton {
+  margin: 1.75rem;
+  height: 10rem;
+}
diff --git a/apps/web/src/pages/worker-page.tsx b/apps/web/src/pages/worker-page.tsx
index f2487e15e2..3db6c944f7 100644
--- a/apps/web/src/pages/worker-page.tsx
+++ b/apps/web/src/pages/worker-page.tsx
@@ -100,9 +100,9 @@ function InstructionsCard({
         How this worker should behave. It reads these at the start of every run.
       </p>
       {source.isPending ? (
-        <p className="mt-3 text-[13px] text-(--ink-3)">Loading instructions…</p>
+        <p className="wp-note">Loading instructions…</p>
       ) : source.isError ? (
-        <p role="alert" className="mt-3 text-[13px] text-(--danger-ink)">
+        <p role="alert" className="wp-note wp-note-error">
           {describeApiError(source.error, "load these instructions")}
         </p>
       ) : (
@@ -113,10 +113,10 @@ function InstructionsCard({
             value={value}
             readOnly={!editable}
             onChange={(event) => setDraft(event.target.value)}
-            className="mt-3 w-full resize-y rounded-(--r-md) border border-(--line) bg-(--card) p-3 text-[13.5px] leading-relaxed"
+            className="wp-instructions"
           />
           {editable ? (
-            <div className="mt-3 flex items-center gap-3">
+            <div className="wp-save-row">
               <Button
                 size="sm"
                 disabled={!dirty || value.trim() === "" || save.isPending}
@@ -124,7 +124,7 @@ function InstructionsCard({
               >
                 {save.isPending ? "Saving…" : "Save changes"}
               </Button>
-              <span className="text-[12.5px] text-(--ink-3)">
+              <span className="wp-hint">
                 {save.isPending
                   ? "Restarting with the new instructions"
                   : dirty
@@ -133,7 +133,7 @@ function InstructionsCard({
               </span>
             </div>
           ) : (
-            <p className="mt-3 text-[12.5px] text-(--ink-3)">
+            <p className="wp-note wp-hint">
               The default worker's instructions ship with Workbench and can't be edited here.
             </p>
           )}
@@ -191,17 +191,17 @@ function PermissionsCard({
         What it may do without asking. Workbench grants can narrow these, never widen them.
       </p>
       {query.isPending ? (
-        <p className="mt-3 text-[13px] text-(--ink-3)">Loading permissions…</p>
+        <p className="wp-note">Loading permissions…</p>
       ) : query.isError ? (
-        <p role="alert" className="mt-3 text-[13px] text-(--danger-ink)">
+        <p role="alert" className="wp-note wp-note-error">
           {describeApiError(query.error, "load these permissions")}
         </p>
       ) : query.data === null || query.data.tools.length === 0 ? (
-        <p className="mt-3 text-[13px] text-(--ink-3)">
+        <p className="wp-note">
           Permissions appear here once this worker has started its first run.
         </p>
       ) : (
-        <div className="mt-3">
+        <div className="wp-perm-list">
           {effectiveToolGrants(query.data.tools).map((grant) => {
             const name = grant.resource.slice(TOOL_PREFIX.length);
             const all = query.data?.tools ?? [];
@@ -297,9 +297,9 @@ function DetailsCard({
         {own === null ? null : (
           <>
             <dt>Runs</dt>
-            <dd className="tabular-nums">{thisWeek.length} this week</dd>
+            <dd className="wp-figure">{thisWeek.length} this week</dd>
             <dt>Approvals</dt>
-            <dd className="tabular-nums">{approvalsLabel(tally)}</dd>
+            <dd className="wp-figure">{approvalsLabel(tally)}</dd>
           </>
         )}
       </dl>
@@ -320,7 +320,7 @@ function ActivityPanel({
       <h2>Activity</h2>
       <p className="wp-sub">Its most recent runs.</p>
       {runs.kind === "loading" ? (
-        <Skeleton className="h-24 w-full" />
+        <Skeleton className="skeleton-card-lg" />
       ) : own === null ? (
         <p className="wp-empty">Couldn't load its runs.</p>
       ) : own.length === 0 ? (
@@ -453,28 +453,26 @@ export function WorkerRoute({ agentId }: { readonly agentId: string }) {
   const found = workers.find((candidate) => candidate.agent.id === agentId);
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       {error !== undefined ? (
-        <p role="alert" className="p-7 text-[14px] text-(--danger-ink)">
+        <p role="alert" className="wp-page-message wp-page-message-error">
           {error}
         </p>
       ) : loading ? (
-        <Skeleton className="m-7 h-40" />
+        <Skeleton className="wp-page-skeleton" />
       ) : found === undefined ? (
         <>
           <StageTopBar
             crumbs={[{ label: "Workers", href: WORKERS_PATH_PREFIX }, { label: "Not found" }]}
           />
-          <p className="p-7 text-[14px] text-(--ink-3)">
-            This workbench has no worker with that id.
-          </p>
+          <p className="wp-page-message">This workbench has no worker with that id.</p>
         </>
       ) : (
         <>
           <StageTopBar
             crumbs={[{ label: "Workers", href: WORKERS_PATH_PREFIX }, { label: found.agent.name }]}
           />
-          <div className="min-h-0 flex-1 overflow-auto">
+          <div className="page-scroll-auto">
             <WorkerDetail agent={found.agent} bench={found.bench} />
           </div>
         </>
diff --git a/apps/web/src/pages/workers-page.css b/apps/web/src/pages/workers-page.css
new file mode 100644
index 0000000000..a79b194163
--- /dev/null
+++ b/apps/web/src/pages/workers-page.css
@@ -0,0 +1,226 @@
+.worker-pill {
+  display: inline-flex;
+  height: 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  padding-inline: 0.625rem;
+  font-size: 12px;
+  font-weight: 700;
+  background: var(--attention-wash);
+  color: var(--ink);
+}
+
+.worker-pill-idle {
+  background: var(--hover);
+  color: var(--ink-3);
+}
+
+.worker-pill-dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--action);
+}
+
+.worker-pill-idle .worker-pill-dot {
+  background: var(--ink-3);
+}
+
+.roster-toolbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.roster-filter {
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.roster-filter button {
+  flex-shrink: 0;
+}
+
+.roster-filter-count {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.6;
+}
+
+.roster-toolbar-spacer {
+  display: none;
+  flex: 1;
+}
+
+.roster-search {
+  height: 2rem;
+  width: 100%;
+  border-radius: var(--r-md);
+  border: 1px solid var(--line);
+  background: var(--card);
+  padding-inline: 0.75rem;
+  font-size: 13px;
+}
+
+@media (min-width: 601px) {
+  .roster-toolbar {
+    flex-direction: row;
+    align-items: center;
+  }
+  .roster-toolbar-spacer {
+    display: block;
+  }
+  .roster-search {
+    width: 15rem;
+  }
+}
+
+.roster-row {
+  display: grid;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .roster-row {
+    grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.6fr) minmax(140px, 1fr) 64px;
+  }
+}
+
+.roster-head {
+  display: none;
+  padding: 0 1rem 0.5rem;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--ink-3);
+}
+
+@media (min-width: 768px) {
+  .roster-head {
+    display: grid;
+  }
+}
+
+.roster-cell-end {
+  text-align: right;
+}
+
+.roster-empty {
+  padding-block: 3rem;
+  text-align: center;
+  font-size: 14px;
+  color: var(--ink-3);
+}
+
+.roster-empty-error {
+  color: var(--danger-ink);
+}
+
+.roster-list {
+  overflow: hidden;
+  border-radius: var(--r-lg);
+  background: var(--surface);
+  box-shadow: var(--raised);
+}
+
+.roster-item {
+  position: relative;
+  min-height: 66px;
+  border-top: 1px solid var(--line);
+  padding: 0.5rem 1rem;
+  transition: background-color var(--duration-standard, 150ms);
+}
+
+.roster-item:first-child {
+  border-top-width: 0;
+}
+
+.roster-item:hover {
+  background: var(--surface-sunk);
+}
+
+.roster-item-link {
+  position: absolute;
+  inset: 0;
+}
+
+.roster-worker {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.roster-worker-text {
+  min-width: 0;
+}
+
+.roster-worker-name {
+  display: block;
+  font-size: 14.5px;
+  font-weight: 800;
+}
+
+.roster-worker-role {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12.5px;
+  color: var(--ink-3);
+}
+
+.roster-status {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 13.5px;
+}
+
+.roster-status-text,
+.roster-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.roster-status-bench {
+  color: var(--ink-3);
+}
+
+.roster-restart {
+  position: relative;
+}
+
+.roster-bench-cell {
+  display: flex;
+  min-width: 0;
+}
+
+.roster-bench-chip {
+  display: inline-flex;
+  height: 1.5rem;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--r-sm);
+  background: var(--hover);
+  padding-right: 0.5rem;
+  padding-left: 0.375rem;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--ink-2);
+}
+
+.roster-bench-icon {
+  flex-shrink: 0;
+}
+
+.roster-active {
+  font-size: 12.5px;
+  color: var(--ink-3);
+}
diff --git a/apps/web/src/pages/workers-page.tsx b/apps/web/src/pages/workers-page.tsx
index 27dd4eeb5c..1fd4e61a2c 100644
--- a/apps/web/src/pages/workers-page.tsx
+++ b/apps/web/src/pages/workers-page.tsx
@@ -24,6 +24,7 @@ import { CreateAgentPanel } from "./create-agent-panel";
 import { WORKERS_PATH_PREFIX } from "../path-ids";
 import { NEW_WORKBENCH_PATH } from "../routes";
 import { useWorkerRole } from "../worker-role-query";
+import "./workers-page.css";
 
 export type WorkerTone = "working" | "ready" | "idle";
 
@@ -64,15 +65,8 @@ export function WorkerRole({
 
 export function StatusPill({ tone }: { readonly tone: WorkerTone }) {
   return (
-    <span
-      className={`inline-flex h-6 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px] font-bold ${
-        tone === "idle" ? "bg-(--hover) text-(--ink-3)" : "bg-(--attention-wash) text-(--ink)"
-      }`}
-    >
-      <span
-        aria-hidden
-        className={`size-1.5 rounded-full ${tone === "idle" ? "bg-(--ink-3)" : "bg-(--action)"}`}
-      />
+    <span className={tone === "idle" ? "worker-pill worker-pill-idle" : "worker-pill"}>
+      <span aria-hidden className="worker-pill-dot" />
       {PILL_LABEL[tone]}
     </span>
   );
@@ -85,9 +79,6 @@ const FILTERS: readonly (readonly [WorkerTone | "all", string])[] = [
   ["idle", "Idle"],
 ];
 
-const ROW_GRID =
-  "grid items-center gap-4 md:grid-cols-[minmax(200px,1.2fr)_minmax(220px,1.6fr)_minmax(140px,1fr)_64px]";
-
 export function WorkersRosterList({ workers }: { readonly workers: readonly BenchWorker[] }) {
   const [filter, setFilter] = useState<WorkerTone | "all">("all");
   const [query, setQuery] = useState("");
@@ -122,12 +113,8 @@ export function WorkersRosterList({ workers }: { readonly workers: readonly Benc
   );
   return (
     <div>
-      <div className="mb-3 flex flex-col items-stretch gap-3 min-[601px]:flex-row min-[601px]:items-center">
-        <div
-          role="tablist"
-          aria-label="Filter by status"
-          className="bi-seg max-w-full overflow-x-auto whitespace-nowrap [&_button]:shrink-0"
-        >
+      <div className="roster-toolbar">
+        <div role="tablist" aria-label="Filter by status" className="bi-seg roster-filter">
           {FILTERS.map(([key, label]) => (
             <button
               key={key}
@@ -138,65 +125,56 @@ export function WorkersRosterList({ workers }: { readonly workers: readonly Benc
               onClick={() => setFilter(key)}
             >
               {label}{" "}
-              <span className="tabular-nums opacity-60">
+              <span className="roster-filter-count">
                 {rows.filter((row) => key === "all" || row.status.tone === key).length}
               </span>
             </button>
           ))}
         </div>
-        <span className="hidden flex-1 min-[601px]:block" />
+        <span className="roster-toolbar-spacer" />
         <input
           value={query}
           onChange={(event) => setQuery(event.target.value)}
           placeholder="Filter workers"
           aria-label="Filter workers"
-          className="h-8 w-full min-[601px]:w-60 rounded-(--r-md) border border-(--line) bg-(--card) px-3 text-[13px]"
+          className="roster-search"
         />
       </div>
-      <div className={`${ROW_GRID} hidden px-4 pb-2 text-[12px] font-bold text-(--ink-3) md:grid`}>
+      <div className="roster-row roster-head">
         <span>Worker</span>
         <span>Right now</span>
         <span>Workbench</span>
-        <span className="text-right">Active</span>
+        <span className="roster-cell-end">Active</span>
       </div>
       {shown.length === 0 ? (
-        <p className="py-12 text-center text-[14px] text-(--ink-3)">
-          No workers match “{query.trim()}”.
-        </p>
+        <p className="roster-empty">No workers match “{query.trim()}”.</p>
       ) : (
-        <ul className="overflow-hidden rounded-(--r-lg) bg-(--surface) shadow-(--raised)">
+        <ul className="roster-list">
           {shown.map(({ agent, bench, status }) => (
-            <li
-              key={agent.id}
-              className={`${ROW_GRID} relative min-h-[66px] border-t border-(--line) px-4 py-2 transition-colors first:border-t-0 hover:bg-(--surface-sunk)`}
-            >
+            <li key={agent.id} className="roster-row roster-item">
               <Link
                 to={workerPath(agent.id)}
                 aria-label={agent.name}
-                className="absolute inset-0"
+                className="roster-item-link"
               />
-              <span className="flex min-w-0 items-center gap-3">
+              <span className="roster-worker">
                 <WorkbenchAvatar kind="worker" name={agent.name} size="lg" status={status.tone} />
-                <span className="min-w-0">
-                  <span className="block text-[14.5px] font-extrabold">{agent.name}</span>
-                  <WorkerRole
-                    tenantId={bench.id}
-                    agent={agent}
-                    className="truncate text-[12.5px] text-(--ink-3)"
-                  />
+                <span className="roster-worker-text">
+                  <span className="roster-worker-name">{agent.name}</span>
+                  <WorkerRole tenantId={bench.id} agent={agent} className="roster-worker-role" />
                 </span>
               </span>
-              <span className="flex min-w-0 items-center gap-2.5 text-[13.5px]">
+              <span className="roster-status">
                 <StatusPill tone={status.tone} />
-                <span className="truncate">
+                <span className="roster-status-text">
                   {status.text}
-                  <span className="text-(--ink-3)"> · {bench.name}</span>
+                  <span className="roster-status-bench"> · {bench.name}</span>
                 </span>
                 {status.tone === "ready" ? (
                   <Button
                     variant="outline"
                     size="sm"
-                    className="relative"
+                    className="roster-restart"
                     disabled={restart.isPending}
                     onClick={() => restart.mutate({ agent, bench })}
                   >
@@ -206,13 +184,13 @@ export function WorkersRosterList({ workers }: { readonly workers: readonly Benc
                   </Button>
                 ) : null}
               </span>
-              <span className="flex min-w-0">
-                <span className="inline-flex h-6 max-w-full items-center gap-1 rounded-(--r-sm) bg-(--hover) pr-2 pl-1.5 text-[12.5px] font-semibold text-(--ink-2)">
-                  <Hash className="size-3.5 shrink-0" />
-                  <span className="truncate">{bench.name}</span>
+              <span className="roster-bench-cell">
+                <span className="roster-bench-chip">
+                  <Hash className="roster-bench-icon" />
+                  <span className="roster-ellipsis">{bench.name}</span>
                 </span>
               </span>
-              <span className="text-right text-[12.5px] text-(--ink-3)">
+              <span className="roster-cell-end roster-active">
                 {agent.liveAddress === null ? "" : "Now"}
               </span>
             </li>
@@ -233,9 +211,9 @@ export function WorkersRoute() {
   const [createBench, setCreateBench] = useState<HubTenant | null>(null);
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <div className="page-frame">
       <StageTopBar crumbs={[{ label: "Workers" }]} />
-      <div className="min-h-0 flex-1 overflow-auto">
+      <div className="page-scroll-auto">
         <PageLayout
           title="Workers"
           subtitle="Each worker picks a name, keeps its memory, and asks before it writes anywhere."
@@ -276,11 +254,11 @@ export function WorkersRoute() {
           ) : (
             <>
               {error !== undefined ? (
-                <p role="alert" className="py-12 text-center text-[14px] text-(--danger-ink)">
+                <p role="alert" className="roster-empty roster-empty-error">
                   {error}
                 </p>
               ) : loading ? (
-                <Skeleton className="h-40 w-full" />
+                <Skeleton className="skeleton-panel" />
               ) : (
                 <WorkersRosterList workers={workers} />
               )}
diff --git a/apps/web/src/settings/account-section.tsx b/apps/web/src/settings/account-section.tsx
index 86dcbf71fe..7380cdb9a6 100644
--- a/apps/web/src/settings/account-section.tsx
+++ b/apps/web/src/settings/account-section.tsx
@@ -73,7 +73,7 @@ export function AccountSectionView({
     <SettingsGroup title={SETTINGS_STRINGS.accountSectionTitle}>
       <SettingsRow
         title={
-          <span className="flex items-center gap-2">
+          <span className="inline-row">
             {fill.kind === "image" ? (
               <img
                 className="settings-account-avatar-image"
diff --git a/apps/web/src/shell/context-menu/lib/context-menu-view.css b/apps/web/src/shell/context-menu/lib/context-menu-view.css
new file mode 100644
index 0000000000..801d9e8280
--- /dev/null
+++ b/apps/web/src/shell/context-menu/lib/context-menu-view.css
@@ -0,0 +1,8 @@
+.context-menu-danger {
+  color: var(--destructive);
+}
+
+.context-menu-danger[data-highlighted] {
+  background: color-mix(in oklab, var(--destructive) 10%, transparent);
+  color: var(--destructive);
+}
diff --git a/apps/web/src/shell/context-menu/lib/context-menu-view.tsx b/apps/web/src/shell/context-menu/lib/context-menu-view.tsx
index b77c9583e0..a29ba1a617 100644
--- a/apps/web/src/shell/context-menu/lib/context-menu-view.tsx
+++ b/apps/web/src/shell/context-menu/lib/context-menu-view.tsx
@@ -8,6 +8,7 @@ import {
 } from "@corbits/react-ui/ui/menu";
 
 import { restoreFocus } from "./focus-restore";
+import "./context-menu-view.css";
 import type { ContextMenu } from "./menu";
 
 // Uses react-ui's Radix-backed `Menu`, not a hand-rolled popover: it
@@ -60,11 +61,7 @@ export function ContextMenuView({
             <MenuItem
               key={entry.id}
               onSelect={entry.onSelect}
-              className={
-                entry.danger === true
-                  ? "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive"
-                  : undefined
-              }
+              className={entry.danger === true ? "context-menu-danger" : undefined}
             >
               {entry.icon}
               <span>{entry.label}</span>
diff --git a/apps/web/src/tailwind.css b/apps/web/src/tailwind.css
deleted file mode 100644
index 6b922818b9..0000000000
--- a/apps/web/src/tailwind.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/* The app-authored Tailwind layer. react-ui ships a prebuilt stylesheet
-   (imported in main.tsx before this file) that carries its own theme,
-   preflight, and the utility classes react-ui's components use — but only
-   those. Classes authored in the app and in workspace UI packages (grid
-   auto-fill layouts, artifact kind colors, responsive padding) were dead
-   because nothing generated their CSS. This entry adds a Tailwind v4 build
-   that scans those sources and emits the missing utilities.
-
-   The full `@import "tailwindcss"` is intentional: react-ui's prebuilt
-   theme and preflight land first (same values, built with the same Tailwind
-   v4), so the duplicate declarations are harmless idempotent overrides.
-   The semantic tokens react-ui defines (--primary, --background, …) live in
-   plain :root blocks, not in Tailwind's @theme namespace, so they never
-   collide with the palette variables (--color-blue-500, …) this build
-   introduces for the first time. */
-
-@import "tailwindcss";
-
-/* react-ui's README documents this exact pairing for a consumer that already
-   runs its own Tailwind v4 build: import the theme source (not just the
-   prebuilt stylesheet) so this build's own @theme registers --success,
-   --destructive, and the rest of react-ui's semantic tokens as real Tailwind
-   theme colors. Without it those tokens only exist as plain :root custom
-   properties inherited from the prebuilt sheet, so Tailwind has no theme
-   color to generate bg-success / bg-destructive utilities from — a data
-   attribute variant like data-[state=connected]:bg-success compiles to
-   nothing, silently. */
-@import "@corbits/react-ui/theme.css";
-
-/* The import above re-emits Tailwind's default font tokens after react-ui's
-   prebuilt sheet declared the brand stacks — same layer, later order, so the
-   defaults were winning and the whole app fell back to system fonts. Declare
-   the brand stacks in this build so the last @layer theme carries them. */
-@theme {
-  --font-sans: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
-  --font-mono: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
-}
-
-/* Icons default to the surrounding text size; `:where` keeps zero specificity
-   so a size-* utility on the icon still wins. */
-:where(svg.lucide) {
-  width: 1em;
-  height: 1em;
-}
-
-/* Workspace UI packages are source-only (no build step): their .tsx files
-   carry className utilities and artifact-ui's kind-color.ts returns palette
-   class strings. Tailwind v4's auto-detection stays inside apps/web, so each
-   package's src tree is added explicitly. */
-@source "../../../packages/artifact-ui/src";
-@source "../../../packages/bench-ui/src";
-@source "../../../packages/chat-ui/src";
-@source "../../../packages/context-menu/src";
-@source "../../../packages/settings-ui/src";
diff --git a/apps/web/src/tools/tools-page.css b/apps/web/src/tools/tools-page.css
index a46c5a5fc4..56a7f68d5d 100644
--- a/apps/web/src/tools/tools-page.css
+++ b/apps/web/src/tools/tools-page.css
@@ -97,3 +97,28 @@
   display: flex;
   gap: 8px;
 }
+
+.tool-add-submit {
+  align-self: flex-start;
+}
+
+.tool-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.tools-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.tools-cell-name {
+  font-weight: 500;
+}
+
+.tools-cell-soft {
+  color: var(--muted-foreground);
+}
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index a0cef500af..7ae8eb0e74 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -7,7 +7,6 @@ import { execFileSync } from "node:child_process";
 import path from "node:path";
 
 import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
 import { defineConfig, type Plugin } from "vite";
 
 const workerDir = path.resolve(__dirname, "..", "..", "packages", "worker");
@@ -42,7 +41,7 @@ function manualChunks(id: string): string | undefined {
 const hubOrigin = process.env.BASE_URL ?? "http://localhost:3000";
 
 export default defineConfig({
-  plugins: [workerWorkflowBundle(), react(), tailwindcss()],
+  plugins: [workerWorkflowBundle(), react()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src"),
diff --git a/bun.lock b/bun.lock
index c1da6db248..8b26b9d060 100644
--- a/bun.lock
+++ b/bun.lock
@@ -142,13 +142,11 @@
       },
       "devDependencies": {
         "@intx/inference": "workspace:*",
-        "@tailwindcss/vite": "^4.3.3",
         "@types/bun": "catalog:",
         "@types/react": "^19.2.2",
         "@types/react-dom": "catalog:",
         "@vitejs/plugin-react": "^5.0.0",
         "sonner": "^2.0.7",
-        "tailwindcss": "^4.3.3",
         "typescript": "catalog:",
         "vite": "^7.1.0",
       },
@@ -1016,36 +1014,6 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
-
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
-
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="],
-
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="],
-
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="],
-
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="],
-
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="],
-
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="],
-
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="],
-
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="],
-
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="],
-
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "dependencies": { "@emnapi/core": "^1.11.1", "@emnapi/runtime": "^1.11.1", "@emnapi/wasi-threads": "^1.2.2", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="],
-
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="],
-
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
-
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
-
     "@tanstack/query-core": ["@tanstack/query-core@5.103.1", "", {}, "sha512-rms8HqTGp6zA00dM+cUQ2eBcgzNJefuu5CAMB37i/6MiGT1zulPOytCFu2a0qjLqVR2n1jENPj9woqFQNuCzWA=="],
 
     "@tanstack/react-query": ["@tanstack/react-query@5.103.1", "", { "dependencies": { "@tanstack/query-core": "5.103.1" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-rmAPPApNEK17VXRJhtE1rja53n23VV5w30C0saCgJhhX+EpdUnVqMGV/s5nnzV43X75KTHKzuoiuxSzGTBIkag=="],
@@ -1224,8 +1192,6 @@
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
 
-    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
-
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
 
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
@@ -1248,8 +1214,6 @@
 
     "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
 
-    "enhanced-resolve": ["enhanced-resolve@5.25.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-nGXts5znJzmWPu+mIE9izCOzdg63oJca2mDzGWWTth7sr4aCToKcoyFVBQwN75Ij5Pf6p510EwkTqViTRzDV+w=="],
-
     "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
 
     "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
@@ -1322,8 +1286,6 @@
 
     "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
 
-    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
-
     "has-property-descriptors": ["has-property-descriptors@1.0.2", "", { "dependencies": { "es-define-property": "^1.0.0" } }, "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg=="],
 
     "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
@@ -1398,30 +1360,6 @@
 
     "kysely": ["kysely@0.29.6", "", {}, "sha512-hHaB8C/rfzDDtr/t8YZwxAuPJTT0zHyaPoVzcXwDYhYNAgH/4sIfVhi/XLLIY+bL/FqaIJnjATDbi8ObSELmxg=="],
 
-    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
-
-    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
-
-    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
-
-    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
-
-    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
-
-    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
-
-    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
-
-    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
-
-    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
-
-    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
-
-    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
-
-    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
-
     "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
@@ -1430,8 +1368,6 @@
 
     "lucide-react": ["lucide-react@1.49.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-ApfaNM4/7jBrVopqLJ84Jz8TMQ1Q1JeZ1PmKh25aeS3E1FTVcMkSh1bEQB7dfzdIrwXRP8p3z4AJjTIHHb5IIA=="],
 
-    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
-
     "make-fetch-happen": ["make-fetch-happen@15.0.6", "", { "dependencies": { "@gar/promise-retry": "^1.0.0", "@npmcli/agent": "^4.0.0", "@npmcli/redact": "^4.0.0", "cacache": "^20.0.1", "http-cache-semantics": "^4.1.1", "minipass": "^7.0.2", "minipass-fetch": "^5.0.0", "minipass-flush": "^1.0.5", "minipass-pipeline": "^1.2.4", "negotiator": "^1.0.0", "proc-log": "^6.0.0", "ssri": "^13.0.0" } }, "sha512-Je0fLJ0F5atA7F+eIlLzk+Wkcl57JDf4kf+EW8xiP5E31xOQxkIxTbgf1Oi1Lw9tRI9UEMRdI5Vz2xTzoNU1Jw=="],
 
     "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
@@ -1738,10 +1674,6 @@
 
     "tailwind-merge": ["tailwind-merge@3.7.0", "", {}, "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA=="],
 
-    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
-
-    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
-
     "tar": ["tar@7.5.22", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA=="],
 
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
@@ -1846,18 +1778,6 @@
 
     "@npmcli/agent/lru-cache": ["lru-cache@11.5.2", "", {}, "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g=="],
 
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.3", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.2.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.4", "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.4" }, "bundled": true }, "sha512-AJxoUD2/15ESHbvpcyjU274nsAPLuOtPHCk0vKJM5pj//Fg/B1FXNWjPnXTT9PymCYYiHo4zPj0ZomXBKhoy7g=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.4", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
     "@workbench/hub/@corbits/mcp": ["@corbits/mcp@github:corbitsdev/corbits-mcp#9df1ab8", { "dependencies": { "@corbits/credential-mcp": "github:corbitsdev/corbits-credential-mcp#fb9ec3a6754348cd33c388c70c0830b8844c83de", "@intx/db": "^0.3.0", "@intx/hub-api": "^0.3.0", "@intx/types": "^0.3.0", "arktype": "2.1.20", "drizzle-orm": "^0.45.2", "hono": "^4.11.9" }, "peerDependencies": { "@intx/agent": ">=0.3.0" } }, "corbitsdev-corbits-mcp-9df1ab8", "sha512-5ILvgNI4J/U2kWitFKZmIJO1qybCdIkKZ73ZELu6PWrbw6tARxO8/ffaGoK0nIMrT4EcBZaMd6YkR0vLdPOWnw=="],
 
     "@workbench/hub/@corbits/memory": ["@corbits/memory@github:corbitsdev/corbits-memory#8be608b", { "dependencies": { "@intx/agent": "0.2.2", "@intx/authz": "0.2.2", "@intx/hub-api": "0.2.2", "@intx/log": "0.2.2", "@intx/types": "^0.3.0", "@intx/workflow": "0.2.2", "arktype": "^2.1.29", "drizzle-orm": "^0.45.1", "hono": "^4.9.0", "hono-openapi": "^1.3.1", "postgres": "^3.4.7" } }, "corbitsdev-corbits-memory-8be608b", "sha512-7NcVcz3IHFTfx6ICQT+4gjX1PBNLqjlCqoEOPDFVW7wc4e2+Ueg9wOZQ+0MVttpQCaDg6MObl4kie410UQm/sQ=="],