fix(webapp): theme the agent's mono logo so it survives the light theme

The dot-matrix logo is drawn on canvas with a white-based ramp, so on the
light theme it was white ink on a white surface: the chat spinner, the
panel's hero logo and the Ask AI button's glyph all disappeared. Adds a
useThemeMode hook and an AgentMonoLogo wrapper that picks the ink from the
active theme, and routes every mono call site through it.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentHero.tsx

@@ -1,6 +1,6 @@
 import type { AgentPageContext, SuggestedPrompt } from "@internal/dashboard-agent-contracts";
 import { BetaBadge } from "~/components/FeatureBadges";
-import { AgentDotMatrix } from "~/components/primitives/AgentDotMatrix";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { DashboardAgentSuggestedPrompts } from "./DashboardAgentSuggestedPrompts";
@@ -39,7 +39,7 @@ export function DashboardAgentHero({
       <div className="flex w-full max-w-2xl flex-col items-center gap-5">
         <div className="flex flex-col items-center gap-1.5 text-center">
           <Header1 className="flex items-center gap-2">
-            <AgentDotMatrix size={22} palette="mono" restColor="#ffffff" decorative />
+            <AgentMonoLogo size={22} decorative />
             Ask AI
             <BetaBadge />
           </Header1>

apps/webapp/app/components/primitives/AgentDotMatrix.tsx

@@ -1,4 +1,5 @@
 import { type CSSProperties, useEffect, useRef } from "react";
+import { useThemeMode } from "~/hooks/useThemeMode";
 
 // Our own 5x5 dot-matrix system, reverse-engineered from dotmatrix
 // (github.com/zzzzshawn/matrix) but written from scratch on canvas.
@@ -117,6 +118,8 @@ export type DotMatrixPalette = {
 
 export const DOT_MATRIX_PALETTES = {
   mono: { stops: ["#e2e8f0", "#ffffff", "#94a3b8"], glow: "#ffffff" },
+  /** `mono` inverted, for light surfaces — the white ramp vanishes on white. */
+  monoLight: { stops: ["#0d0e12", "#1a1b1f", "#3b3e45"], glow: "#1a1b1f" },
   trigger: { stops: ["#41ff54", "#a4ff53", "#e7ff52"], glow: "#86ff53" },
   aurora: { stops: ["#ff3cac", "#784ba0", "#2b86c5"], glow: "#9c64bf" },
   ocean: { stops: ["#00c6ff", "#0072ff", "#4facfe"], glow: "#2f8fff" },
@@ -631,3 +634,25 @@ export function AgentDotMatrix({
     />
   );
 }
+
+/**
+ * The agent's monochrome logo — the glyph that stands for the agent wherever it
+ * appears (the ask-ai button, the panel's hero, the chat spinner).
+ *
+ * Use this instead of setting `palette="mono"` by hand: the mono ramp is
+ * white-based, so on the light theme it would be white ink on a white panel.
+ * The matrix draws on canvas and can't read a CSS variable, so the ink is
+ * picked from the active theme here.
+ */
+export function AgentMonoLogo(props: Omit<AgentDotMatrixProps, "palette" | "restColor" | "mode">) {
+  const mode = useThemeMode();
+  const light = mode === "light";
+  return (
+    <AgentDotMatrix
+      {...props}
+      mode={mode}
+      palette={light ? "monoLight" : "mono"}
+      restColor={light ? DOT_MATRIX_PALETTES.monoLight.glow : DOT_MATRIX_PALETTES.mono.glow}
+    />
+  );
+}

apps/webapp/app/components/primitives/Buttons.tsx

@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
-import { AgentDotMatrix } from "./AgentDotMatrix";
+import { AgentMonoLogo } from "./AgentDotMatrix";
 import { ShortcutKey } from "./ShortcutKey";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
 import { Icon, type RenderIcon } from "./Icon";
@@ -144,16 +144,16 @@ function createVariant(sizeName: Size, themeName: Theme) {
 // The ask-ai button always leads with the square agent logo, so it supplies its
 // own leading icon and its padding is tuned around it: small = 16px logo, 4px
 // left / 6px right; medium 32/16 -> 8px; large 40/20 -> 10px. Pass an explicit
-// `LeadingIcon` (e.g. an <AgentDotMatrix active />) to animate it.
+// `LeadingIcon` (e.g. an <AgentMonoLogo active />) to animate it.
 function createAskAiVariant(sizeName: Size, opticalPadding: string, logoSize: number) {
   const base = createVariant(sizeName, "ask-ai");
   return {
     ...base,
     button: cn(base.button, opticalPadding),
     iconSpacing: "gap-x-1.5",
-    defaultLeadingIcon: (
-      <AgentDotMatrix size={logoSize} palette="mono" restColor="#ffffff" decorative />
-    ),
+    // The button is `bg-secondary` — charcoal on dark, white on light — so the
+    // logo has to follow the theme or it disappears on one of them.
+    defaultLeadingIcon: <AgentMonoLogo size={logoSize} decorative />,
   };
 }
 

apps/webapp/app/components/primitives/Spinner.tsx

@@ -1,4 +1,4 @@
-import { AgentDotMatrix } from "~/components/primitives/AgentDotMatrix";
+import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { cn } from "~/utils/cn";
 
 type CustomColor = {
@@ -86,14 +86,12 @@ export function SpinnerWhite({ className }: { className?: string }) {
  */
 export function AgentSpinner({ size = 16 }: { size?: number }) {
   return (
-    <AgentDotMatrix
+    <AgentMonoLogo
       size={size}
       active
       // A spinner is born spinning: resting on the playlist's first shape means
       // the initial frame is already mid-cycle — no logo-head flash on mount.
       restShape="square"
-      palette="mono"
-      restColor="#ffffff"
       decorative
     />
   );

apps/webapp/app/hooks/useThemeMode.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+/** Whether the active theme paints on dark or light surfaces. */
+export type ThemeMode = "dark" | "light";
+
+/**
+ * The active theme's mode, for the rare color that can't come from a CSS
+ * variable — a canvas paints with concrete values, so it has to ask.
+ *
+ * Prefer a theme-aware token (`text-*`, `bg-*`, `var(--color-*)`) whenever the
+ * color goes through CSS; this is the escape hatch for canvas and for props
+ * that take a color string.
+ *
+ * `light` is the only mode that isn't dark, so anything else — `dark`,
+ * `classic`, an unset attribute during SSR — resolves to `dark`. Resolution
+ * happens in an effect so server and hydration renders agree (the pre-paint
+ * script in `root.tsx` can flip `data-theme` before hydration), and a
+ * `MutationObserver` keeps long-lived components correct across theme
+ * switches. Same shape as `useThemeColor`.
+ */
+export function useThemeMode(): ThemeMode {
+  const [mode, setMode] = useState<ThemeMode>("dark");
+  useEffect(() => {
+    const resolve = () => {
+      setMode(document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark");
+    };
+    resolve();
+    const observer = new MutationObserver(resolve);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+    return () => observer.disconnect();
+  }, []);
+  return mode;
+}

apps/webapp/app/routes/storybook.agent-ui/route.tsx

@@ -1365,7 +1365,8 @@ const WIDE_SECTIONS = new Set(["diagnosis-badge-matrix", "hero-fullscreen"]);
 function ThemeToggle() {
   return (
     <div className="flex items-center gap-1.5">
-      {(["dark", "light"] as const).map((theme) => (
+      {/* classic is still the default theme for most users, so it's part of the pack */}
+      {(["classic", "dark", "light"] as const).map((theme) => (
         <button
           key={theme}
           type="button"

apps/webapp/app/routes/storybook.ai-agent/route.tsx

@@ -11,6 +11,7 @@ import { Header1, Header2 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   AgentDotMatrix,
+  AgentMonoLogo,
   DOT_MATRIX_PALETTES,
   DOT_SHAPES,
   EXTRA_FACE_SHAPES,
@@ -59,12 +60,6 @@ export default function Story() {
 
 // --- Dot matrix (5x5) ---------------------------------------------------------
 
-// Dark-ink mono ramp for light surfaces (the built-in mono palette is white-based).
-const LIGHT_MONO = {
-  stops: ["#0d0e12", "#1a1b1f", "#3b3e45"] as [string, string, string],
-  glow: "#1a1b1f",
-};
-
 function DotMatrixTab() {
   return (
     <div className="flex flex-col gap-6 py-6">
@@ -133,10 +128,10 @@ function DotMatrixTab() {
           />
         </div>
         <div className="flex items-center gap-8 rounded-md border border-grid-bright bg-charcoal-100 px-6 py-5">
-          <AgentDotMatrix size={40} mode="light" palette={LIGHT_MONO} restColor="#1a1b1f" />
+          <AgentDotMatrix size={40} mode="light" palette="monoLight" restColor="#1a1b1f" />
           <ToggleableMatrix
             size={40}
-            matrix={{ mode: "light", palette: LIGHT_MONO, restColor: "#1a1b1f" }}
+            matrix={{ mode: "light", palette: "monoLight", restColor: "#1a1b1f" }}
           />
         </div>
       </div>
@@ -202,15 +197,7 @@ function AskAiButton({ variant, matrixSize }: { variant: ButtonVariant; matrixSi
     <Button
       variant={variant}
       onClick={trigger}
-      LeadingIcon={
-        <AgentDotMatrix
-          size={matrixSize}
-          active={active}
-          palette="mono"
-          restColor="#ffffff"
-          decorative
-        />
-      }
+      LeadingIcon={<AgentMonoLogo size={matrixSize} active={active} decorative />}
     >
       Ask AI
     </Button>
@@ -233,16 +220,7 @@ function FaceButton({ name }: { name: DotShapeName }) {
     <Button
       variant="ask-ai/small"
       onClick={trigger}
-      LeadingIcon={
-        <AgentDotMatrix
-          size={16}
-          active={active}
-          restShape={name}
-          palette="mono"
-          restColor="#ffffff"
-          decorative
-        />
-      }
+      LeadingIcon={<AgentMonoLogo size={16} active={active} restShape={name} decorative />}
     >
       {name}
     </Button>