Let a bot take any colour

A bot's identity was one of seven hues, and the hue picked both its colour
and its stone shape. Now its colour is free and its stone is its own:

- `bots.color` holds any `#rrggbb`, `bots.stone` the flat-cut shape it's
  drawn on. `bots.hue` stays as the palette column they replaced, read only
  as a fallback; `src/scripts/move-bot-colour-to-owners.ts` backfills an
  install from it (safe to rerun).
- `src/utils/bot-color.ts` is the only place a colour is validated or
  resolved (`resolveBotColor`/`resolveBotStone` carry the old hue forward,
  `botColorNeedsPaperFace` flips the eyes to paper on a very dark body), and
  `src/utils/bot-stone-props.ts` gives every row its props, so a row saved
  before this still renders as it did.
- `BotStone` takes the colour as the body's SVG `fill`, the one documented
  exception to the token rule: an arbitrary hex has no token to point at.
  `UnreadDot` follows it.
- The picker keeps the palette tiles (still shape and colour together) and
  adds a native swatch and a hex field, so a custom colour keeps its stone.
  Same place as before: the header avatar's modal and Settings > Bots, for
  crew managers. The coordinator stays hue-less.
- A recolour reaches other open tabs through `pushBotUpdated`.

src/pages/admin/bots/[bot_id]/(partials)/bot-message-group.tsx

@@ -1,7 +1,8 @@
 import Row from "@moduletrace/twui/layout/Row";
 import Stack from "@moduletrace/twui/layout/Stack";
 import BotAvatar from "@/src/components/general/bot-avatar";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import type { BotWithLastMessage } from "@/src/types";
 import type { MessageGroup } from "../(utils)/group-messages";
 import BotMessageLine from "./bot-message-line";
@@ -20,7 +21,7 @@ export default function BotMessageGroup({ bot, group }: Props) {
         <Row className="w-full gap-3! flex-nowrap items-start">
             <BotAvatar
                 image_media_id={bot.image_media_id}
-                hue={(bot.hue || null) as BotHue | null}
+                {...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
                 face={(bot.face || "idle") as BotFace}
                 size={28}
                 className="-mt-1"

src/pages/admin/bots/[bot_id]/(partials)/bot-profile-modal.tsx

@@ -6,7 +6,8 @@ import H2 from "@moduletrace/twui/layout/H2";
 import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
 import BotAvatar from "@/src/components/general/bot-avatar";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import type { BotWithLastMessage } from "@/src/types";
 import BotForm from "@/src/layouts/bots/(partials)/bot-form";
 import { AppContext } from "@/src/pages/__root";
@@ -35,7 +36,7 @@ export default function BotProfileModal({ bot }: Props) {
     const avatar = (
         <BotAvatar
             image_media_id={bot.image_media_id}
-            hue={(bot.hue || null) as BotHue | null}
+            {...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
             face={(bot.face || "idle") as BotFace}
             size={35}
         />

src/pages/admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx

@@ -2,7 +2,8 @@ import { useContext } from "react";
 import Link from "@moduletrace/twui/layout/Link";
 import Span from "@moduletrace/twui/layout/Span";
 import BotAvatar from "@/src/components/general/bot-avatar";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import { AppContext } from "@/src/pages/__root";
 import { CrewBotsContext } from "../(data)/crew-bots-context";
 
@@ -37,7 +38,7 @@ export default function BotRefChip({ bot_id }: Props) {
         >
             <BotAvatar
                 image_media_id={bot.image_media_id}
-                hue={(bot.hue || null) as BotHue | null}
+                {...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
                 face={(bot.face || "idle") as BotFace}
                 label={bot.name || ""}
                 size={18}

src/pages/admin/bots/[bot_id]/(partials)/bot-thinking-row.tsx

@@ -2,7 +2,8 @@ import Row from "@moduletrace/twui/layout/Row";
 import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
 import BotAvatar from "@/src/components/general/bot-avatar";
-import type { BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import {
     BotComputerBusyStatusLine,
     BotGettingMessageStatusLine,
@@ -80,7 +81,7 @@ export default function BotThinkingRow({
         <Row role="status" className="w-full gap-3! flex-nowrap items-center">
             <BotAvatar
                 image_media_id={bot.image_media_id}
-                hue={(bot.hue || null) as BotHue | null}
+                {...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
                 face={waiting ? "asleep" : "working"}
                 size={28}
             />

src/pages/admin/bots/[bot_id]/(partials)/composer-mention-chip.tsx

@@ -3,7 +3,8 @@ import { NodeViewWrapper, type ReactNodeViewProps } from "@tiptap/react";
 import Span from "@moduletrace/twui/layout/Span";
 import BotAvatar from "@/src/components/general/bot-avatar";
 import WorkspaceAvatar from "@/src/components/general/workspace-avatar";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import { CrewBotsContext } from "../(data)/crew-bots-context";
 import { CrewWorkspacesContext } from "../(data)/crew-workspaces-context";
 
@@ -30,7 +31,7 @@ export default function ComposerMentionChip({ node, selected }: ReactNodeViewPro
             {bot ? (
                 <BotAvatar
                     image_media_id={bot.image_media_id}
-                    hue={(bot.hue || null) as BotHue | null}
+                    {...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
                     face={(bot.face || "idle") as BotFace}
                     label={bot.name || ""}
                     size={18}

src/pages/admin/bots/[bot_id]/(partials)/composer-mention-option.tsx

@@ -2,7 +2,8 @@ import Button from "@moduletrace/twui/layout/Button";
 import Span from "@moduletrace/twui/layout/Span";
 import BotAvatar from "@/src/components/general/bot-avatar";
 import WorkspaceAvatar from "@/src/components/general/workspace-avatar";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import type { ComposerMentionItem } from "../(utils)/search-mention-items";
 
 type Props = {
@@ -35,7 +36,7 @@ export default function ComposerMentionOption({ item, active, onPick }: Props) {
             {bot ? (
                 <BotAvatar
                     image_media_id={bot.image_media_id}
-                    hue={(bot.hue || null) as BotHue | null}
+                    {...botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue })}
                     face={(bot.face || "idle") as BotFace}
                     label={bot.name || ""}
                     size={22}