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/layouts/bots/(partials)/all-bots-row.tsx

@@ -2,8 +2,9 @@ import Link from "@moduletrace/twui/layout/Link";
 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 type { BotWithLastMessage } from "@/src/types";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import relativeTime from "@/src/utils/relative-time";
 import UnreadDot from "./unread-dot";
 
@@ -16,7 +17,7 @@ type Props = {
  * One bot in the all-bots modal: stone, name, job, last activity.
  */
 export default function AllBotsRow({ bot, href }: Props) {
-    const hue = (bot.hue || null) as BotHue | null;
+    const stone_props = botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue });
     const at = bot.last_message_at || bot.last_activity_at;
 
     return (
@@ -25,7 +26,7 @@ export default function AllBotsRow({ bot, href }: Props) {
             title={bot.name}
             className="flex h-14 items-center gap-3 rounded-default px-3 border-0 leading-normal hover:opacity-100 hover:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:ring-2 focus-visible:ring-ink"
         >
-            <BotAvatar image_media_id={bot.image_media_id} hue={hue} face={(bot.face || "idle") as BotFace} />
+            <BotAvatar image_media_id={bot.image_media_id} {...stone_props} face={(bot.face || "idle") as BotFace} />
             <Stack className="grow min-w-0 gap-0!">
                 <Span className="text-sm font-bold leading-5 text-ink truncate w-full">{bot.name}</Span>
                 <Span className="text-xs leading-4 text-ink-secondary truncate w-full">
@@ -37,7 +38,7 @@ export default function AllBotsRow({ bot, href }: Props) {
                     {relativeTime({ at: Number(at) })}
                 </Span>
             ) : null}
-            {bot.unread && hue ? <UnreadDot hue={hue} /> : null}
+            {bot.unread && stone_props.color ? <UnreadDot color={stone_props.color} /> : null}
         </Link>
     );
 }

src/layouts/bots/(partials)/bot-colour-option.tsx

@@ -15,7 +15,7 @@ type Props = (typeof BotHues)[number] & {
  * One colour tile: a stone in that hue over its name. Selected is a strong
  * border, so it never depends on the colour alone.
  */
-export default function BotHueOption({ title, value, selected, disabled, onSelect }: Props) {
+export default function BotColourOption({ title, value, color, selected, disabled, onSelect }: Props) {
     return (
         <Button
             title={title}
@@ -35,8 +35,18 @@ export default function BotHueOption({ title, value, selected, disabled, onSelec
             )}
         >
             <Stack className="w-full min-w-0 gap-1! items-center">
-                <BotStone hue={value} face={selected ? "done" : "idle"} size={28} />
-                <Span className={twMerge("text-xs leading-4 text-ink-secondary truncate", selected && "font-bold text-ink")}>
+                <BotStone
+                    color={color}
+                    stone={value}
+                    face={selected ? "done" : "idle"}
+                    size={28}
+                />
+                <Span
+                    className={twMerge(
+                        "text-xs leading-4 text-ink-secondary truncate",
+                        selected && "font-bold text-ink",
+                    )}
+                >
                     {title}
                 </Span>
             </Stack>

src/layouts/bots/(partials)/bot-colour-picker.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import Input from "@moduletrace/twui/form/Input";
+import Row from "@moduletrace/twui/layout/Row";
+import Span from "@moduletrace/twui/layout/Span";
+import Stack from "@moduletrace/twui/layout/Stack";
+import { BotHues, type BotStoneShape } from "@/src/dict/bot-dict";
+import { normalizeBotColor, paletteColorTitle } from "@/src/utils/bot-color";
+import BotColourOption from "./bot-colour-option";
+import BotColourSwatch from "./bot-colour-swatch";
+
+type Props = {
+    /**
+     * The bot's colour as `#rrggbb`.
+     */
+    color: string;
+    /**
+     * Which stone shape it's drawn on. Picking a palette tile sets both, so a
+     * palette bot looks exactly as it always did.
+     */
+    stone: BotStoneShape;
+    disabled?: boolean;
+    onChange: (picked: { color: string; stone: BotStoneShape }) => void;
+};
+
+/**
+ * Picks a bot's colour: the palette tiles (each on its own stone), or any
+ * colour at all from the swatch or the hex field. A custom colour keeps the
+ * stone the bot already has, so its shape stays its own.
+ */
+export default function BotColourPicker({ color, stone, disabled, onChange }: Props) {
+    const [hex, setHex] = useState(color);
+    const [invalid, setInvalid] = useState(false);
+    const picked = paletteValueFor({ color });
+    const palette_title = paletteColorTitle({ color });
+
+    useEffect(() => setHex(color), [color]);
+
+    const commitHex = (value: string) => {
+        setHex(value);
+
+        const normalized = normalizeBotColor({ color: value });
+
+        setInvalid(Boolean(value.trim()) && !normalized);
+
+        if (normalized) onChange({ color: normalized, stone });
+    };
+
+    return (
+        <Stack className="w-full gap-2!">
+            <Span className="text-xs text-ink-secondary">Colour</Span>
+            <Row
+                role="radiogroup"
+                aria-label="Colour"
+                className="w-full grid grid-cols-4 sm:grid-cols-7 gap-2!"
+            >
+                {BotHues.map((option) => (
+                    <BotColourOption
+                        key={option.value}
+                        {...option}
+                        selected={option.value == picked}
+                        disabled={disabled}
+                        onSelect={() =>
+                            onChange({ color: option.color, stone: option.value })
+                        }
+                    />
+                ))}
+            </Row>
+            <Row className="w-full flex-nowrap items-end gap-2!">
+                <Stack className="shrink-0 gap-1!">
+                    <Span className="text-xs text-ink-secondary">Any colour</Span>
+                    <BotColourSwatch
+                        color={color}
+                        disabled={disabled}
+                        title="Pick a colour"
+                        onChange={(next) => onChange({ color: next, stone })}
+                    />
+                </Stack>
+                <Input
+                    type="text"
+                    id="bot-form-color-hex"
+                    title="Hex value"
+                    label="Hex value"
+                    showLabel
+                    autoComplete="off"
+                    placeholder="#7c5cd6"
+                    value={hex}
+                    disabled={disabled}
+                    className="grow"
+                    variant={invalid ? "error" : "normal"}
+                    info={invalid ? "Use a colour like #7c5cd6" : undefined}
+                    onChange={(e) => commitHex(e.target.value)}
+                    onBlur={() => !invalid && setHex(color)}
+                />
+            </Row>
+            <Span className="text-xs text-ink-secondary">
+                {palette_title
+                    ? "A palette colour. Pick any colour, or type a hex, to make it its own."
+                    : "Its own colour. Its stone keeps its shape."}
+            </Span>
+        </Stack>
+    );
+}
+
+/**
+ * The palette entry a colour is, by comparing hexes.
+ */
+function paletteValueFor({ color }: { color: string }): string | null {
+    const normalized = normalizeBotColor({ color });
+
+    if (!normalized) return null;
+
+    return BotHues.find((entry) => entry.color == normalized)?.value || null;
+}

src/layouts/bots/(partials)/bot-colour-swatch.tsx

@@ -0,0 +1,36 @@
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    /**
+     * The colour as `#rrggbb`; `input[type=color]` only takes that form.
+     */
+    color: string;
+    disabled?: boolean;
+    title: string;
+    onChange: (color: string) => void;
+};
+
+/**
+ * The native colour picker, dressed as a swatch. twui has no colour input,
+ * and its `Input` wraps every type in a padded field with a clear button,
+ * which a swatch doesn't want, so this is the field itself. The value goes
+ * straight into the same `onChange` the hex field and the tiles use.
+ */
+export default function BotColourSwatch({ color, disabled, title, onChange }: Props) {
+    return (
+        <input
+            type="color"
+            title={title}
+            aria-label={title}
+            value={color}
+            disabled={disabled}
+            onChange={(e) => onChange(e.target.value)}
+            className={twMerge(
+                "size-9 shrink-0 cursor-pointer appearance-none rounded-default",
+                "border border-solid border-hairline bg-surface p-0.5",
+                "focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+            )}
+        />
+    );
+}

src/layouts/bots/(partials)/bot-form-preview.tsx

@@ -3,7 +3,8 @@ import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
 import BotAvatar from "@/src/components/general/bot-avatar";
 import BotStone from "@/src/components/general/bot-stone";
-import { BotHues, type BotHue } from "@/src/dict/bot-dict";
+import type { BotStoneShape } from "@/src/dict/bot-dict";
+import { paletteColorTitle } from "@/src/utils/bot-color";
 
 type Props = {
     name: string;
@@ -11,7 +12,8 @@ type Props = {
     /**
      * Null for the coordinator.
      */
-    hue: BotHue | null;
+    color: string | null;
+    stone: BotStoneShape;
     image_media_id?: number | string | null;
     picked_src?: string;
 };
@@ -21,23 +23,50 @@ type Props = {
  * or stone, name and job, and its colour (a small stone beside the name
  * when a picture hides the big one).
  */
-export default function BotFormPreview({ name, role, hue, image_media_id, picked_src }: Props) {
+export default function BotFormPreview({
+    name,
+    role,
+    color,
+    stone,
+    image_media_id,
+    picked_src,
+}: Props) {
     const has_picture = Boolean(picked_src || image_media_id);
-    const hue_title = BotHues.find((h) => h.value == hue)?.title;
+    /** A palette colour by name, else a colour the user made up. */
+    const color_title = color
+        ? paletteColorTitle({ color }) || "Its own colour"
+        : null;
 
     return (
         <Row className="min-w-0 grow gap-3! flex-nowrap items-center">
-            <BotAvatar hue={hue} size={56} image_media_id={image_media_id} src={picked_src} />
+            <BotAvatar
+                color={color}
+                stone={stone}
+                size={56}
+                image_media_id={image_media_id}
+                src={picked_src}
+            />
             <Stack className="min-w-0 gap-0!">
                 <Row className="min-w-0 w-full gap-1.5! flex-nowrap items-center">
-                    <Span className="text-sm font-bold leading-5 text-ink truncate">{name.trim() || "Its name"}</Span>
-                    {has_picture && hue ? <BotStone hue={hue} size={18} label={`${hue_title} bot`} /> : null}
+                    <Span className="text-sm font-bold leading-5 text-ink truncate">
+                        {name.trim() || "Its name"}
+                    </Span>
+                    {has_picture && color ? (
+                        <BotStone
+                            color={color}
+                            stone={stone}
+                            size={18}
+                            label={`${color_title} bot`}
+                        />
+                    ) : null}
                 </Row>
                 <Span className="text-xs leading-4 text-ink-secondary truncate w-full">
                     {role.trim() || "Its job"}
                 </Span>
-                {hue_title ? (
-                    <Span className="text-[11px] leading-4 text-ink-secondary">{hue_title}</Span>
+                {color_title ? (
+                    <Span className="text-[11px] leading-4 text-ink-secondary">
+                        {color_title}
+                    </Span>
                 ) : null}
             </Stack>
         </Row>

src/layouts/bots/(partials)/bot-form.tsx

@@ -6,14 +6,15 @@ import CodeEditor from "@/src/components/general/code-editor";
 import type { BUN_SQLITE_COBBLE_BOTS } from "@/db/types/db";
 import ImagePickField from "@/src/components/general/image-pick-field";
 import { AppContext } from "@/src/pages/__root";
-import type { BotHue } from "@/src/dict/bot-dict";
+import type { BotStoneShape } from "@/src/dict/bot-dict";
 import setProfileImage from "@/src/functions/frontend/set-profile-image";
 import postAdminApi from "../(functions)/post-admin-api";
 import usePickedImage from "../(hooks)/use-picked-image";
-import pickFreeHue from "@/src/utils/pick-free-hue";
+import { resolveBotColor, resolveBotStone } from "@/src/utils/bot-color";
+import pickFreeColor from "@/src/utils/pick-free-color";
 import AddFormActions from "./add-form-actions";
+import BotColourPicker from "./bot-colour-picker";
 import BotFormPreview from "./bot-form-preview";
-import BotHuePicker from "./bot-hue-picker";
 
 type Props = {
     /**
@@ -46,10 +47,14 @@ export default function BotForm({ bot, onCancel, onSaved }: Props) {
 
     const [name, setName] = useState(bot?.name || "");
     const [role, setRole] = useState(bot?.role || "");
-    const [hue, setHue] = useState<BotHue>(
+    /** The colour and stone a new bot starts with: the palette's next free one. */
+    const [color, setColor] = useState(
         () =>
-            (bot?.hue as BotHue) ||
-            pickFreeHue({ taken: crew.map((b) => b.hue) }),
+            resolveBotColor({ color: bot?.color, hue: bot?.hue }) ||
+            pickFreeColor({ taken: crew.map((b) => b.color) }).color,
+    );
+    const [stone, setStone] = useState<BotStoneShape>(() =>
+        resolveBotStone({ stone: bot?.stone, hue: bot?.hue }),
     );
     const [system_prompt, setSystemPrompt] = useState(bot?.system_prompt || "");
     const [join, setJoin] = useState(!bot && Boolean(workspace?.id));
@@ -79,13 +84,14 @@ export default function BotForm({ bot, onCancel, onSaved }: Props) {
                       bot_id: bot.id,
                       name: name || bot.name,
                       role,
-                      hue,
+                      color,
+                      stone,
                       system_prompt,
                   },
               })
             : await postAdminApi<{ bot_id: number }>({
                   path: "bots/create-bot",
-                  body: { name, role, hue, system_prompt, workspace_id },
+                  body: { name, role, color, stone, system_prompt, workspace_id },
               });
         const bot_id =
             bot?.id ||
@@ -148,7 +154,8 @@ export default function BotForm({ bot, onCancel, onSaved }: Props) {
                     <BotFormPreview
                         name={name}
                         role={role}
-                        hue={is_coordinator ? null : hue}
+                        color={is_coordinator ? null : color}
+                        stone={stone}
                         image_media_id={image.image_media_id}
                         picked_src={image.data_url}
                     />
@@ -182,10 +189,14 @@ export default function BotForm({ bot, onCancel, onSaved }: Props) {
                         info="One line, shown under its name."
                         onChange={(e) => setRole(e.target.value)}
                     />
-                    <BotHuePicker
-                        hue={hue}
+                    <BotColourPicker
+                        color={color}
+                        stone={stone}
                         disabled={loading}
-                        onChange={setHue}
+                        onChange={({ color: picked, stone: picked_stone }) => {
+                            setColor(picked);
+                            setStone(picked_stone);
+                        }}
                     />
                 </>
             )}

src/layouts/bots/(partials)/bot-hue-picker.tsx

@@ -1,40 +0,0 @@
-import Row from "@moduletrace/twui/layout/Row";
-import Span from "@moduletrace/twui/layout/Span";
-import Stack from "@moduletrace/twui/layout/Stack";
-import { BotHues, type BotHue } from "@/src/dict/bot-dict";
-import BotHueOption from "./bot-hue-option";
-
-type Props = {
-    hue: BotHue;
-    disabled?: boolean;
-    onChange: (hue: BotHue) => void;
-};
-
-/**
- * Picks a bot's colour from tiles that show each hue on a stone.
- */
-export default function BotHuePicker({ hue, disabled, onChange }: Props) {
-    return (
-        <Stack className="w-full gap-2!">
-            <Span className="text-xs text-ink-secondary">Colour</Span>
-            <Row
-                role="radiogroup"
-                aria-label="Colour"
-                className="w-full grid grid-cols-4 sm:grid-cols-7 gap-2!"
-            >
-                {BotHues.map((option) => (
-                    <BotHueOption
-                        key={option.value}
-                        {...option}
-                        selected={hue == option.value}
-                        disabled={disabled}
-                        onSelect={() => onChange(option.value)}
-                    />
-                ))}
-            </Row>
-            <Span className="text-xs text-ink-secondary">
-                Its colour for life: how you tell it apart, even with a picture.
-            </Span>
-        </Stack>
-    );
-}

src/layouts/bots/(partials)/bot-row.tsx

@@ -5,7 +5,8 @@ import Span from "@moduletrace/twui/layout/Span";
 import { twMerge } from "tailwind-merge";
 import BotAvatar from "@/src/components/general/bot-avatar";
 import type { BotWithLastMessage } from "@/src/types";
-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 messagePreview from "@/src/utils/message-preview";
 import relativeTime from "@/src/utils/relative-time";
 import UnreadDot from "./unread-dot";
@@ -31,7 +32,7 @@ type Props = {
  * RailBotCard, which also holds the sessions.
  */
 export default function BotRow({ bot, href, selected, subtitle }: Props) {
-    const hue = (bot.hue || null) as BotHue | null;
+    const stone_props = botStoneProps({ color: bot.color, stone: bot.stone, hue: bot.hue });
     const snippet =
         bot.status_line ||
         subtitle ||
@@ -52,7 +53,7 @@ export default function BotRow({ bot, href, selected, subtitle }: Props) {
                 selected && "hover:bg-transparent hover:dark:bg-transparent",
             )}
         >
-            <BotAvatar image_media_id={bot.image_media_id} hue={hue} face={(bot.face || "idle") as BotFace} />
+            <BotAvatar image_media_id={bot.image_media_id} {...stone_props} face={(bot.face || "idle") as BotFace} />
             <Stack className="hidden @rail:flex grow min-w-0 gap-0!">
                 <Span className="text-sm font-bold leading-5 text-ink truncate w-full">
                     {bot.name}
@@ -67,7 +68,7 @@ export default function BotRow({ bot, href, selected, subtitle }: Props) {
                         {relativeTime({ at: Number(at) })}
                     </Span>
                 ) : null}
-                {bot.unread && hue ? <UnreadDot hue={hue} /> : null}
+                {bot.unread && stone_props.color ? <UnreadDot color={stone_props.color} /> : null}
             </Stack>
         </Link>
     );

src/layouts/bots/(partials)/link-bot-row.tsx

@@ -3,7 +3,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 { 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";
 
 type Props = {
@@ -21,7 +22,7 @@ export default function LinkBotRow({ bot, linking, disabled, onLink }: Props) {
         <Row className="h-14 items-center gap-3 rounded-default px-3 flex-nowrap hover:bg-sunken transition-colors duration-[var(--m-fast)]">
             <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}
             />
             <Stack className="grow min-w-0 gap-0!">

src/layouts/bots/(partials)/rail-see-all-stone.tsx

@@ -1,5 +1,6 @@
 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";
 
 type Props = {
@@ -13,7 +14,7 @@ export default function RailSeeAllStone({ bot }: Props) {
     return (
         <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={18}
         />

src/layouts/bots/(partials)/rail-settings-aside.tsx

@@ -5,7 +5,8 @@ import ComputerIconTile from "@/src/components/general/computer-icon-tile";
 import UserAvatar from "@/src/components/general/user-avatar";
 import WorkspaceAvatar from "@/src/components/general/workspace-avatar";
 import { UserTypes } from "@/src/dict/user-types-dict";
-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 {
     SettingsRecordBack,
     SettingsRecordSections,
@@ -91,7 +92,7 @@ export default function RailSettingsAside({ pathname }: Props) {
         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}
             />
         );

src/layouts/bots/(partials)/unread-dot.tsx

@@ -1,19 +1,24 @@
 import Span from "@moduletrace/twui/layout/Span";
-import { twMerge } from "tailwind-merge";
-import type { BotHue } from "@/src/dict/bot-dict";
-import { BotHueBgClasses } from "@/src/dict/bot-hue-classes-dict";
+
+type Props = {
+    /**
+     * The bot's colour (`#rrggbb`), painted straight onto the dot: a free
+     * colour has no token to point at, so it's a fill attribute here rather
+     * than a `bg-*` class.
+     */
+    color: string;
+};
 
 /**
- * 6px unread dot in the bot's own hue. Redundant by design (the snippet and
- * time carry the same information), which is why it may fail 3:1 on some
- * hues. Never remove the snippet or time.
+ * The unread marker on a rail row. It keeps the bot's colour rather than
+ * an accent, and it never replaces the snippet or time.
  */
-export default function UnreadDot({ hue }: { hue: BotHue }) {
+export default function UnreadDot({ color }: Props) {
     return (
-        <Span
-            className={twMerge("size-1.5 rounded-full mr-1", BotHueBgClasses[hue])}
-            aria-label="Unread"
-            role="img"
-        />
+        <Span className="shrink-0" aria-label="Unread" role="img">
+            <svg width={6} height={6} viewBox="0 0 6 6" aria-hidden="true">
+                <circle cx={3} cy={3} r={3} fill={color} />
+            </svg>
+        </Span>
     );
 }