Give every Bot a face of its own, and follow the system's dark mode

.claude/skills/openbot-screen-layout/SKILL.md

@@ -188,11 +188,11 @@ itself when the dialog changes something.
 
 ## Units
 
-The root is the browser's 16px, so Tailwind's spacing, sizes and widths are their documented values
-(`p-4` is 16px, `max-w-3xl` is 768px) and land on its 4px grid. Text is the exception: `styles.css`
-sets every `--text-*` to Tailwind's default times 15/16, so `text-sm` is 13.125px and body text is
-15px. That is the scale this app has always read at; do not size text in px or rem by hand to match
-the docs.
+The root is the browser's 16px, so Tailwind's spacing, sizes, widths and text sizes are their
+documented values (`p-4` is 16px, `max-w-3xl` is 768px, `text-sm` is 14px) and land on its 4px grid.
+Text used to be the exception, on a 15px scale of its own; it is not any more. Where a screen needs one
+of the named sizes, use the five `type-*` utilities in `theme.css`; do not size text in px or rem by
+hand.
 
 Even so, never hardcode a pixel constant derived from a Tailwind token, and never compute a ratio
 from one. Measure the element — `offsetWidth`, `clientWidth`, a `ResizeObserver` — and scale from what

CHANGELOG.md

@@ -155,6 +155,18 @@ again when they come back to the end or press the arrow. A rail beside a convers
 per turn: hovering one previews what was asked and answered, and choosing it goes there. Nothing
 changes for a deployment.
 
+### OpenBot has a new look
+
+- Every screen has new colours: cool neutral greys, a near-black primary button that turns light
+  in dark mode, a purple focus ring, slightly rounder corners and quicker easing. Text now follows
+  the browser's own size, so it is a little larger than before.
+- Dark mode follows the system by default. Settings → General → Appearance offers System, Light and
+  Dark, kept in this browser. Someone who had turned the old dark switch on stays dark.
+- Every Bot, and OpenBot's own mark, is an orb with eyes that blinks and follows the pointer. It
+  holds still with reduced motion.
+- Each Bot's orb takes its colour and pattern from the Bot, so two Bots in one colour still look
+  different. Violet is kept for OpenBot's own mark.
+
 ### Generated interfaces use A2UI 1.0
 
 With generative UI on, a Bot builds an interface from CopilotKit's standard catalog on A2UI 1.0

app/index.html

@@ -5,15 +5,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenBot</title>
     <!-- Sets the theme before the first paint. Must stay inline and classic: `defer` or `type="module"` runs too late. -->
+    <!-- The rule in src/lib/theme.ts (parseThemePreference, then resolveTheme): the person's choice, else the system's setting. -->
     <script>
-      // localStorage throws in some privacy modes; a theme is not worth taking the app down for.
-      try {
-        const dark = window.localStorage.getItem("openbot-theme") === "dark";
+      (() => {
+        let choice = null;
+        // localStorage throws in some privacy modes; the system's setting still applies.
+        try {
+          choice = window.localStorage.getItem("openbot-appearance");
+          if (choice !== "system" && choice !== "light" && choice !== "dark")
+            choice = window.localStorage.getItem("openbot-theme") === "dark" ? "dark" : "system";
+        } catch {}
+        const dark =
+          choice === "dark" ||
+          (choice !== "light" && !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
         document.documentElement.classList.toggle("dark", dark);
         document.documentElement.style.colorScheme = dark ? "dark" : "light";
-        const skin = window.localStorage.getItem("openbot-skin");
-        if (skin && skin !== "openbot") document.documentElement.dataset.skin = skin;
-      } catch {}
+        // The person's skin, painted before the bundle loads, the same way.
+        try {
+          const skin = window.localStorage.getItem("openbot-skin");
+          if (skin && skin !== "openbot") document.documentElement.dataset.skin = skin;
+        } catch {}
+      })();
     </script>
   </head>
   <body>

app/package.json

@@ -28,7 +28,6 @@
     "@tanstack/react-router": "^1.170.27",
     "@tanstack/react-table": "^9.3.1",
     "better-auth": "^1.6.27",
-    "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",

app/src/components/agents/abstract-avatar.tsx

@@ -1,25 +1,35 @@
-import Avatar from "boring-avatars";
+import { BotOrb } from "@/components/agents/orb/bot-orb";
 
+/**
+ * A Bot's face: its orb, with the look its seed picks. The seed is the Bot's id unless a tenant
+ * package set one or the Bot was copied from another, so `ChannelAvatar`, which goes by id, matches it
+ * for every other Bot.
+ * The orb hides itself from assistive tech, so the Bot is announced once, by name. Beside a heading
+ * that already names the Bot, pass `decorative` and the face is hidden too, so it isn't said twice.
+ *
+ * Clipped to its circle, so its glow never spills into the row beside it or makes a list scroll.
+ * At rest the glow is too faint that far out to be missed.
+ */
 export function AbstractAvatar({
+  decorative = false,
   name,
   seed,
   size = 40,
 }: {
+  decorative?: boolean;
   name: string;
   seed: string;
   size?: number;
 }) {
   return (
     <span
-      role="img"
-      aria-label={name}
+      {...(decorative
+        ? { "aria-hidden": true }
+        : { role: "img", "aria-label": name })}
       className="inline-flex shrink-0 overflow-hidden rounded-full"
       style={{ height: size, width: size }}
     >
-      {/* The drawing carries its own role; hidden so the coworker is announced once, by name. */}
-      <span aria-hidden="true" className="contents">
-        <Avatar name={seed} size={size} />
-      </span>
+      <BotOrb seed={seed} size={size} />
     </span>
   );
 }