CL-6493: register the semantic color tokens

apps/web/src/pages/agent-detail-page.tsx

@@ -376,15 +376,15 @@ 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"}
               >
                 {describeSaveReport(saveReport)}
               </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>,
     );

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>

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

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

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