From b3d96d04472635dc846d7f9a9a8653c97233e356 Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Fri, 21 Aug 2026 06:52:51 -0700
Subject: [PATCH 1/3] Register react-ui's semantic color tokens in apps/web's
 Tailwind theme

apps/web imported react-ui's prebuilt styles.css but never its theme.css,
so --success/--destructive/--ok/--warn existed only as plain :root custom
properties inherited from that stylesheet, never as @theme colors in the
app's own Tailwind build. Tailwind had no theme color to generate
bg-success/bg-destructive utilities from, so
data-[state=connected]:bg-success in plugins-ui's installed-strip
compiled to nothing, and the plugin directory's connected-state dot was
invisible. react-ui's README documents importing theme.css alongside
tailwindcss for exactly this case.
---
 apps/web/src/tailwind.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/web/src/tailwind.css b/apps/web/src/tailwind.css
index 9f0f02424..c514e54c8 100644
--- a/apps/web/src/tailwind.css
+++ b/apps/web/src/tailwind.css
@@ -16,6 +16,17 @@
 
 @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
@@ -32,6 +43,7 @@
 @source "../../../packages/artifact-ui/src";
 @source "../../../packages/bench-ui/src";
 @source "../../../packages/chat-ui/src";
+@source "../../../packages/context-menu/src";
 @source "../../../packages/plugins-ui/src";
 @source "../../../packages/settings-ui/src";
 @source "../../../packages/tasks-ui/src";

From 89f5272be28d16e71db72d1d14be188fb3227c5b Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Fri, 21 Aug 2026 06:52:59 -0700
Subject: [PATCH 2/3] Fix needs_attention dot: escape underscore in Tailwind
 arbitrary value

The sibling data-[state=needs_attention]:bg-destructive variant on the
same status dot had the identical invisible-dot symptom for an unrelated
reason: Tailwind v4 converts an unescaped underscore in an arbitrary
value to a space, so the generated selector matched
[data-state="needs attention"] and never matched the real needs_attention
DOM attribute. Escaping it (needs\_attention) keeps the literal
underscore.
---
 packages/plugins-ui/src/installed-strip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugins-ui/src/installed-strip.tsx b/packages/plugins-ui/src/installed-strip.tsx
index 3ad71af3a..088ae1176 100644
--- a/packages/plugins-ui/src/installed-strip.tsx
+++ b/packages/plugins-ui/src/installed-strip.tsx
@@ -59,7 +59,7 @@ export function InstalledStrip({
               <span
                 aria-hidden="true"
                 data-state={plugin.status}
-                className="absolute -bottom-0.5 -right-0.5 size-2 border border-background data-[state=connected]:bg-success data-[state=needs_attention]:bg-destructive"
+                className="absolute -bottom-0.5 -right-0.5 size-2 border border-background data-[state=connected]:bg-success data-[state=needs\_attention]:bg-destructive"
               />
             </Button>
           );

From 25055b896ef6e5ee421cd39dac90357c9457b112 Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Fri, 21 Aug 2026 06:53:17 -0700
Subject: [PATCH 3/3] Fix dead text-danger-foreground utility across agent
 pages

text-danger-foreground referenced a "danger" color that was never a
registered theme token anywhere (react-ui ships success/destructive/ok/warn,
not danger), so these six error-message call sites never rendered as
destructive-colored text. Replaced with text-destructive, matching the
identical working pattern used by every other error paragraph in the app.
---
 apps/web/src/pages/agent-detail-page.tsx   | 6 +++---
 apps/web/src/pages/agent-skills-picker.tsx | 4 ++--
 apps/web/src/pages/agents-page.tsx         | 4 +---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/agent-detail-page.tsx b/apps/web/src/pages/agent-detail-page.tsx
index d7ddbf0a1..490f2c093 100644
--- a/apps/web/src/pages/agent-detail-page.tsx
+++ b/apps/web/src/pages/agent-detail-page.tsx
@@ -376,7 +376,7 @@ export function AgentDetailPage({
                 className={
                   saveReport.failed === null
                     ? "text-sm text-muted-foreground"
-                    : "text-sm text-danger-foreground"
+                    : "text-sm text-destructive"
                 }
                 role={saveReport.failed === null ? undefined : "alert"}
               >
@@ -384,7 +384,7 @@ export function AgentDetailPage({
               </p>
             ) : null}
             {lifecycle.kind === "error" ? (
-              <p className="text-sm text-danger-foreground" role="alert">
+              <p className="text-sm text-destructive" role="alert">
                 {lifecycle.message}
               </p>
             ) : null}
@@ -649,7 +649,7 @@ export function AgentDetailRoute({
 
   if (load.kind === "error") {
     return shell(
-      <p className="text-sm text-danger-foreground" role="alert">
+      <p className="text-sm text-destructive" role="alert">
         {load.message}
       </p>,
     );
diff --git a/apps/web/src/pages/agent-skills-picker.tsx b/apps/web/src/pages/agent-skills-picker.tsx
index 86d2d0686..acaa77486 100644
--- a/apps/web/src/pages/agent-skills-picker.tsx
+++ b/apps/web/src/pages/agent-skills-picker.tsx
@@ -66,7 +66,7 @@ export function AgentSkillsPicker({
 
   if (state.status === "error") {
     return (
-      <p className="text-sm text-danger-foreground" role="alert">
+      <p className="text-sm text-destructive" role="alert">
         Could not load skills: {state.message}
       </p>
     );
@@ -96,7 +96,7 @@ export function AgentSkillsPicker({
           <div key={id} className="flex items-start gap-2 text-sm">
             <span className="flex flex-1 flex-col">
               <span className="font-medium">{name}</span>
-              <span className="text-xs text-danger-foreground">
+              <span className="text-xs text-destructive">
                 No longer available — its author may have made it private,
                 renamed it, or discarded it.
               </span>
diff --git a/apps/web/src/pages/agents-page.tsx b/apps/web/src/pages/agents-page.tsx
index 63a78ae71..ef037ab36 100644
--- a/apps/web/src/pages/agents-page.tsx
+++ b/apps/web/src/pages/agents-page.tsx
@@ -311,9 +311,7 @@ function AgentDetailPanel({
               <Skeleton className="h-4 w-16" />
             ) : null}
             {capabilities.status === "error" ? (
-              <span className="text-danger-foreground">
-                {capabilities.message}
-              </span>
+              <span className="text-destructive">{capabilities.message}</span>
             ) : null}
             {capabilities.status === "ready"
               ? (capabilities.data.model ?? "Default")