+ {BOT_COLOURS.map((option) => (
+
+ ))}
+
+
{a.name}
diff --git a/app/src/routes/_authed/settings/index.tsx b/app/src/routes/_authed/settings/index.tsx
index 9d52eb0016..c0c6febc3d 100644
--- a/app/src/routes/_authed/settings/index.tsx
+++ b/app/src/routes/_authed/settings/index.tsx
@@ -16,17 +16,30 @@ import {
ItemDescription,
ItemTitle,
} from "@/components/ui/item";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
-import { Switch } from "@/components/ui/switch";
import { formatHotkey, HOTKEYS } from "@/lib/hotkeys/hotkeys";
+import { THEME_PREFERENCES, type ThemePreference } from "@/lib/theme";
import { SkinPicker } from "@/skins/skin-picker";
export const Route = createFileRoute("/_authed/settings/")({
component: RouteComponent,
});
+const APPEARANCE: Record = {
+ system: "System",
+ light: "Light",
+ dark: "Dark",
+};
+
function RouteComponent() {
- const { dark, setDark } = useTheme();
+ const { preference, setPreference } = useTheme();
/*
* The measurements that used to be written out here now live in `PageShell`, which Skills, Admin
@@ -44,19 +57,32 @@ function RouteComponent() {
+ {/* Three choices, so a select like the message list's below, not a switch. */}
-
- Dark theme
+ Appearance
- Use the dark appearance across OpenBot.
+ System follows your device's light or dark setting.
-
(null);
+ // The centre face, in px: 44 on a phone, 52 from 900px wide, where the header grows.
+ const face = useWide() ? 52 : 44;
/*
* The Bot this screen is about, when it is about one: the Bot of a one-to-one conversation, the Bot
@@ -164,15 +190,15 @@ export function OpenMuseFrame({ children }: { children: ReactNode }) {
* The Bot's own OpenBot avatar, the one its page and the Bots roster draw. With no Bot
* yet, the deployment's own mark stands in.
*/}
-
+
{bot ? (
{
return Response.json({
user: { id: ME, email: "me@example.com", role: "user", onboarding: null },
});
+ // The screen's header face looks its Bot up here. Answered, so a refused lookup is not left
+ // retrying in the app's query client after this file, where the next file's Bots list would wait on it.
+ if (path === "/api/agents") return Response.json({ agents: [] });
if (path === "/api/settings/preferences") {
// As the server's own route takes it: one preference at a time, merged into the rest.
if (method === "PATCH" && body && "narration" in body)
diff --git a/app/tests/bot-look.test.tsx b/app/tests/bot-look.test.tsx
new file mode 100644
index 0000000000..181ce3fcac
--- /dev/null
+++ b/app/tests/bot-look.test.tsx
@@ -0,0 +1,428 @@
+import {
+ afterAll,
+ afterEach,
+ beforeAll,
+ beforeEach,
+ expect,
+ test,
+} from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { QueryClientProvider, useQuery } from "@tanstack/react-query";
+import {
+ createMemoryHistory,
+ createRootRoute,
+ createRouter,
+ RouterProvider,
+} from "@tanstack/react-router";
+import { cleanup, render, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AbstractAvatar } from "@/components/agents/abstract-avatar";
+import { SetupSections } from "@/components/bot-profile/setup";
+import { ChannelAvatar } from "@/components/channels/avatar";
+import { agentListQueryOptions, agentQueryOptions } from "@/lib/agents/queries";
+import { queryClient } from "@/query-client";
+import {
+ AgentNotManageableError,
+ type AgentProfileStore,
+} from "../../server/src/agents/profile-store";
+import type { AgentProfile } from "../../server/src/agents/profile-types";
+import { createAgentRoutes } from "../../server/src/agents/routes";
+import { settleReactWork } from "./settle-react-work";
+
+/**
+ * Choosing how a Bot looks, from the Look section of its Setup page.
+ *
+ * The routes are the server's own, mounted behind `fetch` as `bot-setup.test.tsx` mounts them, so a
+ * refused look is refused by the real check. The page is drawn with the app's own query client, so
+ * a save's invalidation reaches every other avatar of the Bot on the page, as it does in the app:
+ * the conversation list's, which knows only the Bot's id, and the Bots list's.
+ */
+
+beforeAll(() => GlobalRegistrator.register());
+afterEach(() => {
+ cleanup();
+ queryClient.clear();
+});
+afterAll(async () => {
+ await settleReactWork();
+ GlobalRegistrator.unregister();
+});
+
+const originalFetch = globalThis.fetch;
+afterEach(() => {
+ globalThis.fetch = originalFetch;
+});
+
+const actor = {
+ id: "owner",
+ email: "owner@example.test",
+ role: "user" as const,
+};
+
+/** Every update the store was asked to make, as the route parsed it. */
+let updates: Record[] = [];
+/**
+ * While true, each save waits at the door until the test lets it through, one at a time, so what
+ * shows before the server answers can be seen, and two saves can settle in either order.
+ */
+let holding = false;
+const waiting: (() => void)[] = [];
+
+/** Lets the oldest held save reach the server, once it has been sent. */
+async function letOneThrough() {
+ await waitFor(() => expect(waiting.length).toBeGreaterThan(0));
+ waiting.shift()?.();
+}
+
+beforeEach(() => {
+ updates = [];
+ holding = false;
+ waiting.length = 0;
+});
+
+/** "expenses" hashes to ocean, which the Look section calls Blue. */
+function serve({
+ ownerUserId = actor.id,
+ refuse = false,
+ avatarSeed = "expenses",
+ list = Promise.resolve(),
+}: {
+ ownerUserId?: string;
+ refuse?: boolean;
+ avatarSeed?: string;
+ /** What the Bots list waits for before it answers. */
+ list?: Promise;
+} = {}) {
+ let profile: AgentProfile = {
+ id: "expenses",
+ name: "Expenses",
+ title: "Finance Operations",
+ roleDescription: "Review receipts.",
+ avatarSeed,
+ ownerUserId,
+ visibility: "private",
+ systemOwned: false,
+ hidden: false,
+ pinned: false,
+ deletedAt: null,
+ endpoint: "http://localhost:4201/ag-ui",
+ hasAuth: false,
+ hasCallbackToken: false,
+ isolated: false,
+ };
+ const store = {
+ get: async () => profile,
+ list: async () => [profile],
+ update: async (_actor: unknown, id: string, value: object) => {
+ updates.push({ ...value });
+ if (refuse) throw new AgentNotManageableError(id);
+ const { endpoint: _endpoint, ...rest } = value as { endpoint?: string };
+ profile = { ...profile, ...rest };
+ return profile;
+ },
+ } as unknown as AgentProfileStore;
+ const auth: Parameters[1] = async (
+ context,
+ next,
+ ) => {
+ context.set("actor", actor);
+ await next();
+ };
+ const routes = createAgentRoutes(
+ store,
+ auth,
+ false,
+ undefined,
+ new Set(),
+ undefined,
+ true,
+ "http://localhost:4201/ag-ui",
+ undefined,
+ undefined,
+ { available: true },
+ );
+ globalThis.fetch = Object.assign(
+ async (
+ path: Parameters[0],
+ init?: Parameters[1],
+ ) => {
+ if (path === "/api/admin/enterprise/me") {
+ return Response.json({
+ capabilities: { isolatedComputers: true },
+ enforced: true,
+ });
+ }
+ if (typeof path !== "string" || !path.startsWith("/api/agents")) {
+ throw new Error(`unexpected ${String(path)}`);
+ }
+ if (init?.method === "PATCH" && holding) {
+ await new Promise((resolve) => waiting.push(resolve));
+ }
+ if (path === "/api/agents") await list;
+ return routes.request(
+ new Request(
+ `http://openbot.test${path.slice("/api/agents".length) || "/"}`,
+ init,
+ ),
+ );
+ },
+ { preconnect: originalFetch.preconnect },
+ );
+}
+
+/** The Setup page's sections, and two other places the same Bot's face is drawn. */
+function Page() {
+ const agent = useQuery(agentQueryOptions("expenses"));
+ const roster = useQuery(agentListQueryOptions());
+ return (
+ <>
+ {agent.data ?
+ ,
+ );
+ const user = userEvent.setup({ document: view.baseElement.ownerDocument });
+ return { view, user };
+}
+
+/** The Look section, once the Bot has loaded. */
+async function lookOf(view: ReturnType) {
+ const heading = await view.findByRole("heading", { name: "Look" });
+ const section = heading.closest("section");
+ if (!section) throw new Error("The Look heading is not in a section.");
+ return within(section);
+}
+
+/** The seeds the face is drawn from, in the Look section and everywhere else on the page. */
+function seeds(view: ReturnType) {
+ const of = (root: Element) =>
+ [...root.querySelectorAll("[data-seed]")].map((orb) =>
+ orb.getAttribute("data-seed"),
+ );
+ const section = view
+ .getByRole("heading", { name: "Look" })
+ .closest("section");
+ return {
+ preview: section ? of(section) : [],
+ elsewhere: of(view.getByTestId("elsewhere")),
+ };
+}
+
+const COLOURS = [
+ "Orange",
+ "Green",
+ "Yellow",
+ "Pink",
+ "Blue",
+ "Light blue",
+ "Coral",
+ "Grey",
+];
+
+test("the Look section shows the Bot's face large, and its colour named and chosen", async () => {
+ serve();
+ const { view } = draw();
+ const look = await lookOf(view);
+
+ expect(
+ look.getByText(
+ "Pick a colour, or draw a new face. It shows wherever this Bot appears.",
+ ),
+ ).toBeTruthy();
+ const group = look.getByRole("radiogroup", { name: "Colour" });
+ const radios = within(group).getAllByRole("radio") as HTMLInputElement[];
+ expect(radios.map((radio) => radio.getAttribute("aria-label"))).toEqual(
+ COLOURS,
+ );
+ expect(radios.filter((radio) => radio.checked).map((r) => r.value)).toEqual([
+ "ocean",
+ ]);
+ expect(look.getByText("Blue")).toBeTruthy();
+ expect(look.getByRole("button", { name: "New face" })).toBeTruthy();
+
+ const preview = look.getByRole("img", { name: "Expenses" });
+ expect(preview.style.width).toBe("72px");
+ expect(seeds(view).preview).toEqual(["expenses"]);
+});
+
+test("a colour saves at once, shows at once, and every avatar of the Bot follows", async () => {
+ serve();
+ holding = true;
+ const { view, user } = draw();
+ const look = await lookOf(view);
+ await waitFor(() =>
+ expect(seeds(view).elsewhere).toEqual(["expenses", "expenses"]),
+ );
+
+ await user.click(look.getByRole("radio", { name: "Green" }));
+
+ // The face shows it before the server has answered, and nothing else has changed yet.
+ expect(seeds(view)).toEqual({
+ preview: ["moss:expenses"],
+ elsewhere: ["expenses", "expenses"],
+ });
+ expect(
+ (look.getByRole("radio", { name: "Green" }) as HTMLInputElement).checked,
+ ).toBe(true);
+ expect(look.getByText("Green")).toBeTruthy();
+
+ await letOneThrough();
+ await waitFor(() =>
+ expect(seeds(view).elsewhere).toEqual(["moss:expenses", "moss:expenses"]),
+ );
+ expect(seeds(view).preview).toEqual(["moss:expenses"]);
+ // The rest of the profile rode along as stored, and only the look changed.
+ expect(updates).toEqual([
+ {
+ name: "Expenses",
+ title: "Finance Operations",
+ roleDescription: "Review receipts.",
+ visibility: "private",
+ avatarSeed: "moss:expenses",
+ },
+ ]);
+ expect(view.queryByRole("alert")).toBeNull();
+});
+
+test("New face keeps the colour and draws a face nobody had", async () => {
+ serve();
+ const { view, user } = draw();
+ const look = await lookOf(view);
+
+ await user.click(look.getByRole("button", { name: "New face" }));
+
+ await waitFor(() => expect(updates).toHaveLength(1));
+ const face = String(updates[0]?.avatarSeed);
+ expect(face).toMatch(/^ocean:[a-z0-9]{8}$/);
+ await waitFor(() => expect(seeds(view).elsewhere).toEqual([face, face]));
+ expect(seeds(view).preview).toEqual([face]);
+ expect(look.getByText("Blue")).toBeTruthy();
+
+ await user.click(look.getByRole("button", { name: "New face" }));
+ await waitFor(() => expect(updates).toHaveLength(2));
+ expect(updates[1]?.avatarSeed).not.toBe(face);
+ expect(String(updates[1]?.avatarSeed)).toMatch(/^ocean:/);
+});
+
+test("the arrow keys move through the colours, as in any radio group, and the newest choice wins", async () => {
+ serve();
+ holding = true;
+ const { view, user } = draw();
+ const look = await lookOf(view);
+ const radio = (name: string) =>
+ look.getByRole("radio", { name }) as HTMLInputElement;
+
+ radio("Blue").focus();
+ await user.keyboard("{ArrowRight}");
+ expect(document.activeElement).toBe(radio("Light blue"));
+ expect(radio("Light blue").checked).toBe(true);
+
+ // Still live while that one saves, so the next arrow carries on from where focus is.
+ await user.keyboard("{ArrowRight}");
+ expect(document.activeElement).toBe(radio("Coral"));
+ expect(radio("Coral").checked).toBe(true);
+ expect(seeds(view).preview).toEqual(["coral:expenses"]);
+
+ // The first saves and the Bot is refetched with it; the face keeps the newer choice.
+ await letOneThrough();
+ await waitFor(() =>
+ expect(seeds(view).elsewhere).toEqual(["sky:expenses", "sky:expenses"]),
+ );
+ expect(seeds(view).preview).toEqual(["coral:expenses"]);
+ expect(radio("Coral").checked).toBe(true);
+
+ await letOneThrough();
+ await waitFor(() =>
+ expect(seeds(view).elsewhere).toEqual(["coral:expenses", "coral:expenses"]),
+ );
+ expect(updates.map((update) => update.avatarSeed)).toEqual([
+ "sky:expenses",
+ "coral:expenses",
+ ]);
+ expect(seeds(view).preview).toEqual(["coral:expenses"]);
+ expect(radio("Coral").checked).toBe(true);
+});
+
+test("a look that can't be saved goes back, and says so in one sentence", async () => {
+ serve({ refuse: true });
+ const { view, user } = draw();
+ const look = await lookOf(view);
+
+ await user.click(look.getByRole("radio", { name: "Pink" }));
+
+ expect((await look.findByRole("alert")).textContent).toBe(
+ "Couldn't save that look, so the last one is back.",
+ );
+ expect(seeds(view)).toEqual({
+ preview: ["expenses"],
+ elsewhere: ["expenses", "expenses"],
+ });
+ expect(
+ (look.getByRole("radio", { name: "Blue" }) as HTMLInputElement).checked,
+ ).toBe(true);
+ expect(look.getByText("Blue")).toBeTruthy();
+
+ // The next choice takes the sentence away while it saves.
+ holding = true;
+ await user.click(look.getByRole("radio", { name: "Green" }));
+ expect(look.queryByRole("alert")).toBeNull();
+ await letOneThrough();
+ expect(await look.findByRole("alert")).toBeTruthy();
+ expect(updates).toHaveLength(2);
+});
+
+test("someone who can't edit the Bot doesn't see the Look section", async () => {
+ serve({ ownerUserId: "someone-else" });
+ const { view } = draw();
+
+ expect(await view.findByText("Finance Operations")).toBeTruthy();
+ expect(view.queryByRole("heading", { name: "Look" })).toBeNull();
+ expect(view.queryByRole("radiogroup")).toBeNull();
+ expect(view.queryByRole("button", { name: "New face" })).toBeNull();
+});
+
+test("a conversation's face, which knows only the Bot's id, waits for the Bots list and draws the chosen look", async () => {
+ let answer = () => {};
+ serve({
+ avatarSeed: "coral:k2p9x7aq",
+ list: new Promise((resolve) => {
+ answer = resolve;
+ }),
+ });
+ const view = render(
+
+ ,
+ );
+ const drawn = () =>
+ [...view.container.querySelectorAll("[data-seed]")].map((orb) =>
+ orb.getAttribute("data-seed"),
+ );
+
+ // No face while the list loads, rather than the id's face and then another.
+ await settleReactWork();
+ expect(drawn()).toEqual([]);
+
+ answer();
+ // A Bot the list doesn't hold keeps the face of its id.
+ await waitFor(() =>
+ expect(drawn()).toEqual(["coral:k2p9x7aq", "coral:k2p9x7aq", "not-listed"]),
+ );
+});
diff --git a/app/tests/bot-orb.test.tsx b/app/tests/bot-orb.test.tsx
new file mode 100644
index 0000000000..610c4ffb70
--- /dev/null
+++ b/app/tests/bot-orb.test.tsx
@@ -0,0 +1,895 @@
+import {
+ afterAll,
+ afterEach,
+ beforeAll,
+ describe,
+ expect,
+ test,
+} from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { BOT_COLOURS, seedFor } from "@openbot/shared/bot-look";
+import { cleanup, render } from "@testing-library/react";
+import { AbstractAvatar } from "@/components/agents/abstract-avatar";
+import AgentOrb, { type AIState } from "@/components/agents/orb/agent-orb";
+import {
+ BotOrb,
+ type BotOrbState,
+ followPointer,
+ restingGaze,
+} from "@/components/agents/orb/bot-orb";
+import {
+ drawBotOrb,
+ FINISH_HELD,
+ FINISH_S,
+ finishPhase,
+ OPENBOT_LOOK,
+ ORB_PALETTES,
+ type OrbLook,
+ type OrbPose,
+ oklch,
+ orbLookFor,
+ palette,
+ RAYS,
+ samePicture,
+ track,
+} from "@/components/agents/orb/bot-orb-draw";
+import { subscribePointer } from "@/components/agents/orb/orb-clock";
+import { settleReactWork } from "./settle-react-work";
+
+beforeAll(() => GlobalRegistrator.register({ url: "http://localhost/" }));
+afterEach(() => cleanup());
+afterAll(async () => {
+ await settleReactWork();
+ await GlobalRegistrator.unregister();
+});
+
+const REST: OrbPose = {
+ ta: 1.6,
+ listen: 0,
+ think: 0,
+ done: 0,
+ smile: 0,
+ tilt: 0,
+ ax: 0,
+ ay: 0.04,
+ blink: 0,
+ nod: 0,
+ doneAge: -1,
+ noticeAge: -1,
+ finishAge: -1,
+ breath: 0,
+};
+
+/**
+ * Just enough of a 2D context to run the drawing: it counts every stroke, counts the frames drawn,
+ * each of which starts by clearing the canvas, and keeps where each soft blob and each eye is drawn
+ * and in what colour.
+ */
+function fakeContext() {
+ const marks: string[] = [];
+ const gradient = {
+ addColorStop: (_: number, colour: string) => marks.push(colour),
+ };
+ const ctx = {
+ strokes: 0,
+ draws: 0,
+ marks,
+ stroke() {
+ this.strokes++;
+ },
+ clearRect() {
+ this.draws++;
+ },
+ translate(x: number, y: number) {
+ marks.push(`at ${x.toFixed(2)},${y.toFixed(2)}`);
+ },
+ createLinearGradient: () => gradient,
+ createRadialGradient(x: number, y: number) {
+ marks.push(`blob ${x.toFixed(2)},${y.toFixed(2)}`);
+ return gradient;
+ },
+ };
+ return new Proxy(ctx, {
+ get: (target, key) =>
+ key in target ? target[key as keyof typeof target] : () => {},
+ set: (target, key, value) => {
+ (target as Record)[key] = value;
+ return true;
+ },
+ });
+}
+
+/** One frame of an orb 60px across in `pose`, drawn on a fake context. */
+const drawn = (pose: OrbPose, look: OrbLook = OPENBOT_LOOK) => {
+ const ctx = fakeContext();
+ drawBotOrb(ctx as unknown as CanvasRenderingContext2D, 60, pose, {
+ dark: false,
+ look,
+ });
+ return ctx;
+};
+
+/** Every stroke one frame draws: the rim, the landing's ping, and a finish's rays and check. */
+const strokesOf = (pose: OrbPose) => drawn(pose).strokes;
+
+/** The Bots a fresh OpenBot ships with, whose ids are their seeds. */
+const TEAM = [
+ "expense-review",
+ "feedback-digest",
+ "interview-notes",
+ "meeting-follow-ups",
+ "onboarding-buddy",
+ "oncall-handover",
+ "release-notes",
+ "research-desk",
+ "ticket-triage",
+];
+
+describe("the orb's motion", () => {
+ test("an eased key arrives and a spring overshoots, then both settle on the target", () => {
+ const eased = { from: 0, keys: [{ at: 1, to: 1, ease: 0.4 }] };
+ expect(track(eased, 0.5)).toBe(0);
+ expect(track(eased, 1.2)).toBeGreaterThan(0);
+ expect(track(eased, 2)).toBe(1);
+
+ const sprung = {
+ from: 0,
+ keys: [{ at: 0, to: 1, spring: [14, 0.5] as const }],
+ };
+ const peak = Math.max(
+ ...Array.from({ length: 60 }, (_, i) => track(sprung, i / 60)),
+ );
+ expect(peak).toBeGreaterThan(1);
+ expect(track(sprung, 5)).toBeCloseTo(1, 4);
+ });
+
+ test("a later key moves on from where the earlier one left it", () => {
+ const tr = {
+ from: 0,
+ keys: [
+ { at: 0, to: 1, ease: 0.4 },
+ { at: 1, to: 0.25, ease: 0.4 },
+ ],
+ };
+ expect(track(tr, 0.9)).toBe(1);
+ expect(track(tr, 3)).toBe(0.25);
+ });
+});
+
+describe("the colours", () => {
+ test("every palette's base is pale and its shade deep", () => {
+ for (const name of ORB_PALETTES) {
+ const pal = palette(name, 1, 0);
+ expect(Math.min(...pal.base)).toBeGreaterThan(200);
+ expect(Math.max(...pal.deep)).toBeLessThan(230);
+ expect(Math.max(...pal.shade)).toBeLessThan(100);
+ }
+ });
+
+ test("a colour outside sRGB loses chroma rather than turning into another hue", () => {
+ const [r, g, b] = oklch(0.6, 0.5, 262);
+ expect(b).toBeGreaterThan(r);
+ expect(b).toBeGreaterThan(g);
+ });
+
+ test("a seed always gets the same look", () => {
+ for (const seed of TEAM) {
+ expect(orbLookFor(seed)).toEqual(orbLookFor(seed));
+ expect(ORB_PALETTES).toContain(orbLookFor(seed).palette);
+ }
+ // Pinned, so a change to the hash, which would change every Bot's face, can't land unnoticed.
+ expect(orbLookFor("research-desk").palette).toBe("ocean");
+ expect(orbLookFor("ticket-triage").palette).toBe("sun");
+ expect(ORB_PALETTES).toContain(orbLookFor("").palette);
+ });
+
+ test("nine palettes, and a team of nine seeds uses more than four of them", () => {
+ expect(ORB_PALETTES).toHaveLength(9);
+ expect(new Set(ORB_PALETTES).size).toBe(9);
+ const used = TEAM.map((seed) => orbLookFor(seed).palette);
+ expect(new Set(used).size).toBeGreaterThan(4);
+ });
+
+ test("no Bot is violet, which is OpenBot's own, and every other colour is given", () => {
+ const seeds = [
+ ...TEAM,
+ "",
+ ...Array.from({ length: 400 }, (_, i) => `bot-${i}`),
+ ];
+ const given = new Set(seeds.map((seed) => orbLookFor(seed).palette));
+ expect(given.has("violet")).toBe(false);
+ expect([...given].sort()).toEqual(
+ ORB_PALETTES.filter((name) => name !== "violet").sort(),
+ );
+ expect(OPENBOT_LOOK.palette).toBe("violet");
+ });
+
+ test("every Bot in the default team is drawn unlike every other, even two in one colour", () => {
+ const apart = (a: number, b: number) => {
+ const d = Math.abs(a - b) % (2 * Math.PI);
+ return Math.min(d, 2 * Math.PI - d);
+ };
+ let sharing = 0;
+ for (const [i, a] of TEAM.entries()) {
+ for (const b of TEAM.slice(i + 1)) {
+ const one = orbLookFor(a);
+ const other = orbLookFor(b);
+ expect(drawn(REST, one).marks).not.toEqual(drawn(REST, other).marks);
+ if (one.palette !== other.palette) continue;
+ sharing++;
+ // Their colours sit at least a sixth of a turn apart, which shows at any size.
+ expect(apart(one.turn, other.turn)).toBeGreaterThan(Math.PI / 3);
+ }
+ }
+ // Eight colours can't go round nine Bots, so the team has Bots that share one.
+ expect(sharing).toBeGreaterThan(0);
+ });
+
+ test("every Bot that never chose a look keeps the face it had", () => {
+ // Every part of every default Bot's look, pinned: a seed that names no colour draws as before.
+ expect(
+ Object.fromEntries(TEAM.map((seed) => [seed, orbLookFor(seed)])),
+ ).toEqual({
+ "expense-review": {
+ palette: "berry",
+ turn: 0.8835729338221293,
+ hue: 1,
+ eyes: 1.07375,
+ },
+ "feedback-digest": {
+ palette: "sky",
+ turn: 2.6261751088602177,
+ hue: -3,
+ eyes: 1.03125,
+ },
+ "interview-notes": {
+ palette: "slate",
+ turn: 3.436116964863836,
+ hue: 3,
+ eyes: 0.948125,
+ },
+ "meeting-follow-ups": {
+ palette: "coral",
+ turn: 2.5034566458293663,
+ hue: -2,
+ eyes: 0.975625,
+ },
+ "onboarding-buddy": {
+ palette: "moss",
+ turn: 5.6941366846315,
+ hue: 1,
+ eyes: 1.065,
+ },
+ "oncall-handover": {
+ palette: "coral",
+ turn: 0.6872233929727672,
+ // A nudge that rounds to nothing from below, which draws the same as 0.
+ hue: -0,
+ eyes: 0.945,
+ },
+ "release-notes": {
+ palette: "ocean",
+ turn: 6.062292073724054,
+ hue: 1,
+ eyes: 1.015,
+ },
+ "research-desk": {
+ palette: "ocean",
+ turn: 1.4480778637640452,
+ hue: 4,
+ eyes: 0.9875,
+ },
+ "ticket-triage": {
+ palette: "sun",
+ turn: 1.6935147898257479,
+ hue: 2,
+ eyes: 0.92625,
+ },
+ });
+ });
+
+ test("a seed that names a colour is drawn in it, and the rest of its look still comes from the whole seed", () => {
+ for (const colour of BOT_COLOURS) {
+ for (let i = 0; i < 20; i++) {
+ expect(orbLookFor(seedFor(colour, `face-${i}`)).palette).toBe(colour);
+ }
+ }
+ // The pattern, hue and eyes are the hash's, as for any seed: "ember:k2p9x7aq" hashes to ocean,
+ // and is drawn in ember with the turn, nudge and eyes that hash gives it.
+ expect(orbLookFor("ember:k2p9x7aq")).toEqual({
+ palette: "ember",
+ turn: 4.246058820867455,
+ hue: -1,
+ eyes: 0.945,
+ });
+ // So two faces in one chosen colour still look apart, and so does one face in two colours.
+ const one = orbLookFor(seedFor("sky", "a"));
+ expect(orbLookFor(seedFor("sky", "b")).turn).not.toBe(one.turn);
+ expect(orbLookFor(seedFor("moss", "a")).turn).not.toBe(one.turn);
+ });
+
+ test("violet, or a colour no Bot has, is not honoured: the seed is drawn as any other", () => {
+ expect(orbLookFor("violet:k2p9x7aq").palette).toBe("berry");
+ expect(orbLookFor("purple:k2p9x7aq").palette).toBe("moss");
+ expect(orbLookFor("Moss:k2p9x7aq").palette).toBe("ocean");
+ const named = Array.from(
+ { length: 200 },
+ (_, i) => orbLookFor(`violet:${i}`).palette,
+ );
+ expect(named).not.toContain("violet");
+ });
+
+ test("the colours a seed can name are exactly the ones the orb draws a Bot in", () => {
+ expect([...BOT_COLOURS].sort()).toEqual(
+ ORB_PALETTES.filter((name) => name !== "violet").sort(),
+ );
+ });
+
+ test("each palette is a colour of its own", () => {
+ const bases = ORB_PALETTES.map((name) => palette(name, 1, 0).main.join());
+ expect(new Set(bases).size).toBe(ORB_PALETTES.length);
+ });
+});
+
+describe("the drawing", () => {
+ test("has no grilles: at rest its only stroke is the sphere's rim", () => {
+ expect(strokesOf(REST)).toBe(1);
+ });
+
+ test("two poses draw the same picture once what their ages time is over, not while it plays", () => {
+ expect(samePicture(REST, { ...REST })).toBe(true);
+ expect(samePicture(REST, { ...REST, ax: REST.ax + 0.01 })).toBe(false);
+ // A ping long rung, a perk long faded and a finish long over: the orb at rest.
+ expect(
+ samePicture(REST, { ...REST, doneAge: 4, noticeAge: 9, finishAge: 30 }),
+ ).toBe(true);
+ expect(
+ samePicture({ ...REST, doneAge: 0.2 }, { ...REST, doneAge: 0.3 }),
+ ).toBe(false);
+ });
+});
+
+describe("a finish", () => {
+ test("the eyes give way to a check while the rays fly, then the eyes come back", () => {
+ expect(finishPhase(-1)).toMatchObject({ check: 0, rays: -1, eyes: 1 });
+
+ const burst = finishPhase(0.4);
+ expect(burst.eyes).toBe(0);
+ expect(burst.check).toBe(1);
+ expect(burst.rays).toBeGreaterThan(0);
+ expect(burst.rays).toBeLessThan(1);
+
+ // Held: the check whole, the burst over.
+ expect(finishPhase(FINISH_HELD)).toMatchObject({
+ check: 1,
+ checkAlpha: 1,
+ rays: -1,
+ eyes: 0,
+ });
+
+ expect(finishPhase(FINISH_S)).toEqual(finishPhase(-1));
+ });
+
+ test("the check strokes on along its length", () => {
+ const early = finishPhase(0.12).check;
+ expect(early).toBeGreaterThan(0);
+ expect(early).toBeLessThan(finishPhase(0.24).check);
+ });
+
+ test("draws its rays and its check over the orb, and nothing once it is over", () => {
+ const rest = strokesOf(REST);
+ expect(strokesOf({ ...REST, finishAge: 0.4 })).toBe(rest + RAYS + 1);
+ expect(strokesOf({ ...REST, finishAge: FINISH_HELD })).toBe(rest + 1);
+ expect(strokesOf({ ...REST, finishAge: FINISH_S })).toBe(rest);
+ });
+});
+
+/** Every canvas draws on `ctx` until `restore`, as if each had its own 2D context. */
+function withContext(ctx: ReturnType) {
+ const getContext = HTMLCanvasElement.prototype.getContext;
+ HTMLCanvasElement.prototype.getContext = (() =>
+ ctx) as unknown as typeof getContext;
+ return () => {
+ HTMLCanvasElement.prototype.getContext = getContext;
+ };
+}
+
+/**
+ * Animation frames that run only when the test says, as the browser would at its next paint, at
+ * the time the test gives or now: `requested` counts every frame asked for, `pending` the ones not
+ * yet run or cancelled.
+ */
+function manualFrames() {
+ const queue = new Map();
+ let next = 1;
+ let requested = 0;
+ const request = window.requestAnimationFrame;
+ const cancel = window.cancelAnimationFrame;
+ window.requestAnimationFrame = (callback) => {
+ requested++;
+ queue.set(next, callback);
+ return next++;
+ };
+ window.cancelAnimationFrame = (id) => {
+ queue.delete(id);
+ };
+ return {
+ get requested() {
+ return requested;
+ },
+ get pending() {
+ return queue.size;
+ },
+ run(now = performance.now()) {
+ const due = [...queue.values()];
+ queue.clear();
+ for (const callback of due) callback(now);
+ },
+ restore() {
+ window.requestAnimationFrame = request;
+ window.cancelAnimationFrame = cancel;
+ },
+ };
+}
+
+/** An `IntersectionObserver` that reports only what the test tells it to. */
+class Sight {
+ static all: Sight[] = [];
+ readonly root = null;
+ readonly rootMargin = "";
+ readonly thresholds = [];
+ targets: Element[] = [];
+
+ constructor(private readonly callback: IntersectionObserverCallback) {
+ Sight.all.push(this);
+ }
+
+ observe(target: Element) {
+ this.targets.push(target);
+ }
+
+ unobserve(target: Element) {
+ this.targets = this.targets.filter((t) => t !== target);
+ }
+
+ disconnect() {
+ this.targets = [];
+ }
+
+ takeRecords() {
+ return [];
+ }
+
+ static show(target: Element, isIntersecting: boolean) {
+ for (const sight of Sight.all) {
+ if (!sight.targets.includes(target)) continue;
+ sight.callback(
+ [{ target, isIntersecting } as IntersectionObserverEntry],
+ sight as unknown as IntersectionObserver,
+ );
+ }
+ }
+}
+
+/** Runs `body` with `IntersectionObserver` set to `observer`, or missing when it is undefined. */
+function withObserver(observer: typeof Sight | undefined, body: () => void) {
+ const original = globalThis.IntersectionObserver;
+ if (observer) {
+ globalThis.IntersectionObserver =
+ observer as unknown as typeof IntersectionObserver;
+ } else {
+ Reflect.deleteProperty(globalThis, "IntersectionObserver");
+ }
+ try {
+ body();
+ } finally {
+ globalThis.IntersectionObserver = original;
+ Sight.all = [];
+ }
+}
+
+const orbOf = (container: HTMLElement) =>
+ container.querySelector("[data-state]") as HTMLElement;
+
+describe("", () => {
+ test("holds its footprint, hides from assistive tech, and draws on a canvas twice its size", () => {
+ const view = render(,
+ state: BotOrbState,
+ from = 0,
+ ) => {
+ let perked = false;
+ for (let i = 1; i <= 30; i++) {
+ perked = followPointer(gaze, from + i / 30, state, measure) || perked;
+ }
+ return perked;
+ };
+
+ test("turn to the pointer, fully at rest and partly while it works", () => {
+ const stop = subscribePointer();
+ try {
+ moveTo(600, 120);
+ const idle = restingGaze();
+ const thinking = restingGaze();
+ watchFor(idle, "idle");
+ watchFor(idle, "idle", 1);
+ watchFor(thinking, "thinking");
+ watchFor(thinking, "thinking", 1);
+ // Far to its right: it looks right, level.
+ expect(idle.x).toBeGreaterThan(0.6);
+ expect(Math.abs(idle.y)).toBeLessThan(0.05);
+ expect(idle.w).toBeCloseTo(1, 2);
+ expect(thinking.w).toBeCloseTo(0.35, 2);
+ } finally {
+ stop();
+ }
+ });
+
+ test("perk up once when the pointer comes close, and let go only well past it", () => {
+ const stop = subscribePointer();
+ try {
+ moveTo(600, 120);
+ const gaze = restingGaze();
+ expect(watchFor(gaze, "idle")).toBe(false);
+
+ // Within 0.9 of its size of its centre.
+ moveTo(150, 120);
+ expect(watchFor(gaze, "idle", 1)).toBe(true);
+ expect(watchFor(gaze, "idle", 2)).toBe(false);
+
+ // Out to 1.2 of its size: still close, no second perk.
+ moveTo(168, 120);
+ expect(watchFor(gaze, "idle", 3)).toBe(false);
+ moveTo(150, 120);
+ expect(watchFor(gaze, "idle", 4)).toBe(false);
+
+ // Past 1.3 it lets go, and the next approach perks again.
+ moveTo(180, 120);
+ watchFor(gaze, "idle", 5);
+ moveTo(150, 120);
+ expect(watchFor(gaze, "idle", 6)).toBe(true);
+ } finally {
+ stop();
+ }
+ });
+
+ test("a listening orb has already noticed you, and stops watching once the pointer leaves", () => {
+ const stop = subscribePointer();
+ try {
+ moveTo(150, 120);
+ const gaze = restingGaze();
+ expect(watchFor(gaze, "listening")).toBe(false);
+ expect(gaze.w).toBeGreaterThan(0.4);
+
+ document.dispatchEvent(
+ new PointerEvent("pointerout", { bubbles: true, relatedTarget: null }),
+ );
+ watchFor(gaze, "listening", 1);
+ watchFor(gaze, "listening", 2);
+ expect(gaze.w).toBeLessThan(0.01);
+ } finally {
+ stop();
+ }
+ });
+});
+
+describe("a Bot's face and OpenBot's mark", () => {
+ test("a Bot's avatar is named once and drawn as its orb", () => {
+ const view = render(
+ = {
+ idle: "idle",
+ listening: "listening",
+ thinking: "thinking",
+ streaming: "thinking",
+ done: "done",
+ error: "idle",
+ };
+ for (const [state, shown] of Object.entries(states)) {
+ const view = render(
+
+
+ ,
+ );
+ await view.findByText("Appearance");
+ return view;
+}
+
+test("Appearance offers System, Light and Dark where the dark switch was", async () => {
+ const view = await renderSettings();
+ expect(view.queryByRole("switch", { name: "Dark theme" })).toBeNull();
+ const appearance = view.getByRole("combobox", { name: "Appearance" });
+ expect(appearance.textContent).toContain("System");
+
+ const user = userEvent.setup({ document });
+ await user.click(appearance);
+ const options = (await view.findAllByRole("option")).map(
+ (option) => option.textContent,
+ );
+ expect(options).toEqual(["System", "Light", "Dark"]);
+});
+
+test("choosing Dark draws it and remembers it", async () => {
+ const view = await renderSettings();
+ const user = userEvent.setup({ document });
+ await user.click(view.getByRole("combobox", { name: "Appearance" }));
+ await user.click(await view.findByRole("option", { name: "Dark" }));
+
+ expect(document.documentElement.classList.contains("dark")).toBe(true);
+ expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("dark");
+ expect(
+ view.getByRole("combobox", { name: "Appearance" }).textContent,
+ ).toContain("Dark");
+});
diff --git a/app/tests/skins-opendots-frame.test.tsx b/app/tests/skins-opendots-frame.test.tsx
index 9cb46255b1..3a9bf4b000 100644
--- a/app/tests/skins-opendots-frame.test.tsx
+++ b/app/tests/skins-opendots-frame.test.tsx
@@ -19,7 +19,6 @@ import {
} from "@tanstack/react-router";
import { cleanup, render, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
-import { AbstractAvatar } from "@/components/agents/abstract-avatar";
import { appConfig } from "@/lib/generated/application-config";
import { NAVIGATION, navigationFor } from "@/lib/navigation";
import { queryClient } from "@/query-client";
@@ -595,9 +594,13 @@ describe("OpenDots screens", () => {
* deployment's own name from `brand.yaml`, and every Bot wears OpenBot's own avatar.
*/
describe("OpenDots skin wears the deployment's brand", () => {
- /** What the drawing of one avatar looks like, without the ids React gives each instance. */
- const drawing = (root: Element | null) =>
- (root?.querySelector("svg")?.outerHTML ?? "").replace(/_r_[\w]+_/g, "");
+ /*
+ * The seed one avatar's orb is drawn from, which decides everything about its look. Its colour
+ * alone would not do: eight colours go round, so a Bot's seed and its id share one an eighth of
+ * the time.
+ */
+ const drawnFrom = (root: Element | null) =>
+ root?.querySelector("[data-seed]")?.getAttribute("data-seed");
test("the frame names the product from brand.yaml and never says OpenDots or Dots", async () => {
const { view } = draw("/channel/new?agent=ada");
@@ -636,23 +639,14 @@ describe("OpenDots skin wears the deployment's brand", () => {
await view.findByRole("heading", { name: "Ada" });
const persona = view.container.querySelector("[data-opendots-persona]");
for (const bot of bots) {
- const reference = render(
- = [];
+ test("a stored choice is kept", () => {
+ expect(parseThemePreference("light")).toBe("light");
+ expect(parseThemePreference("dark")).toBe("dark");
+ expect(parseThemePreference("system")).toBe("system");
+ });
+
+ test("OpenBot's old switch counts only when it was turned on", () => {
+ // It wrote "light" on every load whether or not anybody chose it.
+ expect(parseThemePreference(null, "light")).toBe("system");
+ expect(parseThemePreference(null, "dark")).toBe("dark");
+ // A choice made since wins over it.
+ expect(parseThemePreference("light", "dark")).toBe("light");
+ });
+
+ test("following the system draws what the system is set to", () => {
+ expect(resolveTheme("system", true)).toBe("dark");
+ expect(resolveTheme("system", false)).toBe("light");
+ expect(resolveTheme("light", true)).toBe("light");
+ expect(resolveTheme("dark", false)).toBe("dark");
+ });
- applyDarkTheme(true, {
- setStoredValue: (key, value) => writes.push([key, value]),
+ test("drawing a theme sets the class and the colour scheme", () => {
+ const toggles: Array<[string, boolean]> = [];
+ const schemes: string[] = [];
+ applyTheme("dark", {
+ toggleRootClass: (name, force) => toggles.push([name, force]),
+ setRootColorScheme: (scheme) => schemes.push(scheme),
+ });
+ applyTheme("light", {
toggleRootClass: (name, force) => toggles.push([name, force]),
setRootColorScheme: (scheme) => schemes.push(scheme),
});
+ expect(toggles).toEqual([
+ ["dark", true],
+ ["dark", false],
+ ]);
+ expect(schemes).toEqual(["dark", "light"]);
+ });
+});
+
+describe("pre-paint theme boot", () => {
+ const html = readFileSync(new URL("../index.html", import.meta.url), "utf8");
+ const boot = html.match(/]*\bsrc=)[^>]*>([\s\S]*?)<\/script>/);
+
+ /** Runs the inline script against a stand-in document, storage and system setting. */
+ function bootWith(
+ stored: Record,
+ systemDark: boolean,
+ storageThrows = false,
+ ) {
+ const classes = new Set();
+ const style: { colorScheme?: string } = {};
+ const queries: string[] = [];
+ runInNewContext(boot?.[1] ?? "", {
+ window: {
+ localStorage: {
+ getItem: (key: string) => {
+ if (storageThrows) throw new Error("denied");
+ return stored[key] ?? null;
+ },
+ },
+ matchMedia: (query: string) => {
+ queries.push(query);
+ return { matches: systemDark };
+ },
+ },
+ document: {
+ documentElement: {
+ classList: {
+ toggle: (name: string, force: boolean) =>
+ force ? classes.add(name) : classes.delete(name),
+ },
+ style,
+ },
+ },
+ });
+ return { dark: classes.has("dark"), scheme: style.colorScheme, queries };
+ }
+
+ test("with nothing chosen it follows the system", () => {
+ expect(bootWith({}, true)).toMatchObject({ dark: true, scheme: "dark" });
+ expect(bootWith({}, false)).toMatchObject({ dark: false, scheme: "light" });
+ expect(bootWith({}, true).queries).toEqual([SYSTEM_DARK_QUERY]);
+ });
+
+ test("it reads the keys the app writes, and a choice beats the system", () => {
+ expect(bootWith({ [THEME_STORAGE_KEY]: "light" }, true).dark).toBe(false);
+ expect(bootWith({ [THEME_STORAGE_KEY]: "dark" }, false).dark).toBe(true);
+ expect(bootWith({ [THEME_STORAGE_KEY]: "system" }, true).dark).toBe(true);
+ expect(bootWith({ [LEGACY_THEME_STORAGE_KEY]: "dark" }, false).dark).toBe(
+ true,
+ );
+ expect(bootWith({ [LEGACY_THEME_STORAGE_KEY]: "light" }, true).dark).toBe(
+ true,
+ );
+ // The same rule as `lib/theme.ts` for everything either key can hold, so the app never redraws.
+ const held = [undefined, "system", "light", "dark", "nonsense"];
+ for (const stored of held)
+ for (const legacy of held)
+ for (const systemDark of [true, false]) {
+ const keys: Record = {};
+ if (stored) keys[THEME_STORAGE_KEY] = stored;
+ if (legacy) keys[LEGACY_THEME_STORAGE_KEY] = legacy;
+ const theme = resolveTheme(
+ parseThemePreference(stored ?? null, legacy ?? null),
+ systemDark,
+ );
+ expect({
+ keys,
+ systemDark,
+ dark: bootWith(keys, systemDark).dark,
+ }).toEqual({ keys, systemDark, dark: theme === "dark" });
+ }
+ });
+
+ test("storage that throws still follows the system", () => {
+ expect(bootWith({}, true, true)).toMatchObject({
+ dark: true,
+ scheme: "dark",
+ });
+ expect(bootWith({}, false, true)).toMatchObject({
+ dark: false,
+ scheme: "light",
+ });
+ });
+});
+
+/**
+ * The provider, once the app has loaded: it reads the keys the boot script read, follows the system
+ * live while the choice is System, and writes only the new key, only when somebody chooses.
+ */
+describe("the theme provider", () => {
+ beforeAll(() => GlobalRegistrator.register());
+ afterAll(() => GlobalRegistrator.unregister());
+
+ /** A stand-in for the system's setting that a test can flip, as the system does at sunset. */
+ let systemDark = false;
+ const listeners = new Set<() => void>();
+ function setSystemDark(next: boolean) {
+ systemDark = next;
+ act(() => {
+ for (const listener of listeners) listener();
+ });
+ }
+
+ let originalMatchMedia: typeof window.matchMedia;
+ beforeEach(() => {
+ systemDark = false;
+ listeners.clear();
+ window.localStorage.clear();
+ document.documentElement.classList.remove("dark");
+ document.documentElement.style.colorScheme = "";
+ originalMatchMedia = window.matchMedia;
+ window.matchMedia = ((query: string) => ({
+ media: query,
+ get matches() {
+ return query === SYSTEM_DARK_QUERY && systemDark;
+ },
+ addEventListener: (_type: string, listener: () => void) =>
+ listeners.add(listener),
+ removeEventListener: (_type: string, listener: () => void) =>
+ listeners.delete(listener),
+ })) as unknown as typeof window.matchMedia;
+ });
+ afterEach(() => {
+ cleanup();
+ window.matchMedia = originalMatchMedia;
+ });
+
+ let theme: ReturnType | undefined;
+ function Probe() {
+ theme = useTheme();
+ return null;
+ }
+ function renderProvider() {
+ theme = undefined;
+ render(createElement(ThemeProvider, null, createElement(Probe)));
+ }
+ const drawn = () => ({
+ dark: document.documentElement.classList.contains("dark"),
+ scheme: document.documentElement.style.colorScheme,
+ });
+
+ test("with nothing chosen it follows the system, live", () => {
+ renderProvider();
+ expect(theme?.preference).toBe("system");
+ expect(drawn()).toEqual({ dark: false, scheme: "light" });
+
+ setSystemDark(true);
+ expect(theme?.resolved).toBe("dark");
+ expect(drawn()).toEqual({ dark: true, scheme: "dark" });
+
+ setSystemDark(false);
+ expect(drawn()).toEqual({ dark: false, scheme: "light" });
+ });
+
+ test("a choice beats the system, and stops following it", () => {
+ renderProvider();
+ act(() => theme?.setPreference("light"));
+ setSystemDark(true);
+ expect(drawn()).toEqual({ dark: false, scheme: "light" });
+
+ act(() => theme?.setPreference("dark"));
+ setSystemDark(false);
+ expect(drawn()).toEqual({ dark: true, scheme: "dark" });
+ });
+
+ test("only a choice is written, and only under the new key", () => {
+ renderProvider();
+ expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBeNull();
+ expect(window.localStorage.getItem(LEGACY_THEME_STORAGE_KEY)).toBeNull();
+
+ act(() => theme?.setPreference("dark"));
+ expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("dark");
+ expect(window.localStorage.getItem(LEGACY_THEME_STORAGE_KEY)).toBeNull();
+ });
+
+ test("the old switch's Light lands on System, and its Dark stays Dark", () => {
+ window.localStorage.setItem(LEGACY_THEME_STORAGE_KEY, "light");
+ systemDark = true;
+ renderProvider();
+ expect(theme?.preference).toBe("system");
+ expect(drawn().dark).toBe(true);
+ cleanup();
+
+ window.localStorage.setItem(LEGACY_THEME_STORAGE_KEY, "dark");
+ systemDark = false;
+ renderProvider();
+ expect(theme?.preference).toBe("dark");
+ expect(drawn().dark).toBe(true);
+ });
+
+ test("storage that throws still follows the system after the app loads", () => {
+ const storage = Object.getOwnPropertyDescriptor(window, "localStorage");
+ Object.defineProperty(window, "localStorage", {
+ configurable: true,
+ get() {
+ throw new Error("denied");
+ },
+ });
+ try {
+ expect(() => window.localStorage).toThrow("denied");
+ systemDark = true;
+ renderProvider();
+ expect(theme?.preference).toBe("system");
+ expect(drawn()).toEqual({ dark: true, scheme: "dark" });
- expect(writes).toEqual([[THEME_STORAGE_KEY, "dark"]]);
- expect(toggles).toEqual([["dark", true]]);
- expect(schemes).toEqual(["dark"]);
+ // The choice still holds for this visit; it just isn't remembered.
+ act(() => theme?.setPreference("light"));
+ expect(drawn()).toEqual({ dark: false, scheme: "light" });
+ } finally {
+ if (storage) Object.defineProperty(window, "localStorage", storage);
+ else Reflect.deleteProperty(window, "localStorage");
+ }
});
});
diff --git a/app/tests/user-preferences.test.tsx b/app/tests/user-preferences.test.tsx
index 16c93797f0..55424b01de 100644
--- a/app/tests/user-preferences.test.tsx
+++ b/app/tests/user-preferences.test.tsx
@@ -72,9 +72,14 @@ test("loads preferences from the account and renders the saved emphasis", async
const { view } = setup();
const agent = await view.findByText("General Assistant");
expect(agent.className).toContain("text-[0.9rem]");
- expect(requests).toEqual([
- { path: "/api/settings/preferences", method: "GET", body: undefined },
- ]);
+ // Reads only: the preferences, and the Bots list the preview row's face is drawn from.
+ await waitFor(() =>
+ expect(requests.map(({ method, path }) => `${method} ${path}`)).toEqual([
+ "GET /api/settings/preferences",
+ "GET /api/agents",
+ ]),
+ );
+ expect(requests.every((request) => request.body === undefined)).toBe(true);
});
test("shows loading and read errors without enabling a save", async () => {
diff --git a/app/tests/visual-system.test.ts b/app/tests/visual-system.test.ts
new file mode 100644
index 0000000000..8effb73153
--- /dev/null
+++ b/app/tests/visual-system.test.ts
@@ -0,0 +1,260 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { cn, TYPE_SCALE_CLASSES } from "../src/lib/utils";
+
+/**
+ * OpenBot's visual system, carried by the variables every screen already reads, so these
+ * tests read the stylesheet itself: every variable has a value in both themes, the colours that
+ * carry words clear their contrast floor on the grounds they sit on, and the type scale is five
+ * sizes in rem. That is `theme.css`, which the app and the Recorder's pages both import.
+ */
+
+const styles = readFileSync(
+ new URL("../src/theme.css", import.meta.url),
+ "utf8",
+);
+
+/** The custom properties declared directly inside the first block that opens with `selector {`. */
+function block(selector: string): Map {
+ const start = styles.indexOf(`${selector} {`);
+ if (start === -1) throw new Error(`no ${selector} block`);
+ let depth = 0;
+ let end = start;
+ for (let at = styles.indexOf("{", start); at < styles.length; at++) {
+ if (styles[at] === "{") depth++;
+ if (styles[at] === "}") depth--;
+ if (depth === 0) {
+ end = at;
+ break;
+ }
+ }
+ const body = styles.slice(start, end).replace(/\/\*[\s\S]*?\*\//g, "");
+ const variables = new Map();
+ for (const match of body.matchAll(/(--[\w-]+):\s*([^;]+);/g)) {
+ variables.set(
+ match[1] as string,
+ (match[2] as string).replace(/\s+/g, " "),
+ );
+ }
+ return variables;
+}
+
+const light = block(":root");
+const dark = block(".dark");
+
+/** A variable's value, following `var(--x)` within the same theme. */
+function resolve(theme: Map, name: string): string {
+ const fallback = theme === dark ? light : undefined;
+ let value = theme.get(name) ?? fallback?.get(name);
+ for (let hops = 0; value?.startsWith("var(") && hops < 5; hops++) {
+ const inner = value.slice(4, -1);
+ value = theme.get(inner) ?? fallback?.get(inner);
+ }
+ if (!value) throw new Error(`${name} has no value`);
+ return value;
+}
+
+function luminance(hex: string): number {
+ if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error(`${hex} is not #rrggbb`);
+ const channels = [1, 3, 5].map((at) => {
+ const c = Number.parseInt(hex.slice(at, at + 2), 16) / 255;
+ return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+ });
+ return (
+ 0.2126 * (channels[0] ?? 0) +
+ 0.7152 * (channels[1] ?? 0) +
+ 0.0722 * (channels[2] ?? 0)
+ );
+}
+
+function contrast(a: string, b: string): number {
+ const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+ return ((hi ?? 0) + 0.05) / ((lo ?? 0) + 0.05);
+}
+
+const themes = [
+ ["light", light],
+ ["dark", dark],
+] as const;
+
+describe("light and dark", () => {
+ test("every variable the light theme defines has a dark value", () => {
+ const aliases = [...light.entries()]
+ .filter(([, value]) => value.startsWith("var(--"))
+ .map(([name]) => name);
+ const missing = [...light.keys()].filter(
+ (name) =>
+ !dark.has(name) &&
+ !aliases.includes(name) &&
+ // Shape and motion are the same in both themes.
+ !/^--(radius|target|ease|dur)/.test(name),
+ );
+ expect(missing).toEqual([]);
+ for (const name of ["--glass", "--veil", "--shadow-glass"])
+ expect(dark.has(name)).toBe(true);
+ });
+
+ test("the visual system's roles arrive under their own names", () => {
+ const roles = [
+ "--brand",
+ "--brand-foreground",
+ ...["done", "needs", "working", "problem"].flatMap((status) => [
+ `--status-${status}`,
+ `--status-${status}-soft`,
+ ]),
+ "--glass",
+ "--veil",
+ "--shadow-float",
+ "--shadow-card",
+ "--shadow-raised",
+ "--shadow-glass",
+ "--ease-out",
+ "--ease-in",
+ "--dur-tap",
+ "--dur-swap",
+ "--dur-enter",
+ "--dur-sheet",
+ ];
+ expect(roles.filter((name) => !light.has(name))).toEqual([]);
+ expect(light.get("--target")).toBe("44px");
+ expect(light.get("--radius")).toBe("0.55rem");
+ expect(styles).not.toContain("--duet-");
+ });
+
+ test("the brand is for focus, selection and links; shadcn's accent stays a neutral fill", () => {
+ for (const [, theme] of themes) {
+ expect(resolve(theme, "--ring")).toBe(resolve(theme, "--brand"));
+ expect(resolve(theme, "--sidebar-primary")).toBe(
+ resolve(theme, "--brand"),
+ );
+ expect(resolve(theme, "--accent")).toBe(resolve(theme, "--secondary"));
+ }
+ });
+});
+
+describe("contrast, checked in both themes", () => {
+ const grounds = [
+ "--background",
+ "--card",
+ "--popover",
+ "--secondary",
+ "--muted",
+ "--accent",
+ "--sidebar",
+ "--sidebar-accent",
+ ];
+ for (const [themeName, theme] of themes) {
+ test(`text roles clear 4.5:1 on every ground, ${themeName}`, () => {
+ for (const ink of [
+ "--foreground",
+ "--muted-foreground",
+ "--card-foreground",
+ "--popover-foreground",
+ "--secondary-foreground",
+ "--accent-foreground",
+ "--sidebar-foreground",
+ "--sidebar-accent-foreground",
+ "--brand",
+ "--destructive",
+ "--success",
+ "--status-done",
+ "--status-needs",
+ "--status-working",
+ "--status-problem",
+ ])
+ for (const ground of grounds)
+ expect({
+ ink,
+ ground,
+ clears:
+ contrast(resolve(theme, ink), resolve(theme, ground)) >= 4.5,
+ }).toEqual({ ink, ground, clears: true });
+ });
+
+ test(`each status word clears 4.5:1 on its own soft fill, ${themeName}`, () => {
+ for (const status of ["done", "needs", "working", "problem"])
+ expect({
+ status,
+ ratio:
+ contrast(
+ resolve(theme, `--status-${status}`),
+ resolve(theme, `--status-${status}-soft`),
+ ) >= 4.5,
+ }).toEqual({ status, ratio: true });
+ });
+ }
+
+ test("what sits on the primary clears 4.5:1", () => {
+ for (const [themeName, theme] of themes)
+ for (const [on, fill] of [
+ ["--primary-foreground", "--primary"],
+ ["--brand-foreground", "--brand"],
+ ["--sidebar-primary-foreground", "--sidebar-primary"],
+ ])
+ expect({
+ themeName,
+ on,
+ clears:
+ contrast(
+ resolve(theme, on as string),
+ resolve(theme, fill as string),
+ ) >= 4.5,
+ }).toEqual({ themeName, on, clears: true });
+ });
+});
+
+describe("the type scale", () => {
+ const rules = styles.replace(/\/\*[\s\S]*?\*\//g, "");
+
+ test("the root font size is the browser's", () => {
+ expect(rules).not.toMatch(/html\s*\{\s*font-size/);
+ // OpenBot's 15px scale is gone: no `text-*` size is redefined, and body text is not pinned.
+ expect(rules).not.toMatch(/--text-[\w-]+\s*:/);
+ expect(rules).not.toMatch(/body\s*\{[^}]*@apply[^;]*\btext-base\b/);
+ });
+
+ test("five sizes, in rem", () => {
+ const sizes = new Map();
+ for (const match of styles.matchAll(
+ /@utility (type-[\w-]+)\s*\{\s*font-size:\s*([^;]+);/g,
+ ))
+ sizes.set(match[1] as string, match[2] as string);
+ expect(Object.fromEntries(sizes)).toEqual({
+ "type-display": "1.5rem",
+ "type-nav": "1.125rem",
+ "type-body": "1.0625rem",
+ "type-sub": "0.9375rem",
+ "type-caption": "0.8125rem",
+ });
+ });
+
+ test("Inter's single-storey a and flat-topped 3 are on for every screen", () => {
+ expect(rules).toMatch(
+ /@utility face\s*\{\s*font-feature-settings:\s*"cv11",\s*"ss03";/,
+ );
+ expect(rules).toMatch(/body\s*\{[^}]*@apply[^;]*\bface\b/);
+ });
+});
+
+describe("merging classes", () => {
+ test("a type size given later replaces a primitive's text size and leading", () => {
+ for (const size of TYPE_SCALE_CLASSES)
+ expect(cn("px-3 text-sm leading-relaxed", size)).toBe(`px-3 ${size}`);
+ expect(cn("text-base font-medium", "type-display font-semibold")).toBe(
+ "type-display font-semibold",
+ );
+ });
+
+ test("a colour does not knock out a type size", () => {
+ expect(cn("type-sub text-muted-foreground", "text-foreground")).toBe(
+ "type-sub text-foreground",
+ );
+ });
+
+ test("every type utility in the stylesheet is known to the merge", () => {
+ const declared = [...styles.matchAll(/@utility (type-[\w-]+)/g)].map(
+ (match) => match[1],
+ );
+ expect(new Set(declared)).toEqual(new Set(TYPE_SCALE_CLASSES));
+ });
+});
diff --git a/bun.lock b/bun.lock
index 64588375bc..c1004715e4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -34,7 +34,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",
@@ -1114,8 +1113,6 @@
"body-parser": ["body-parser@2.3.0", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^2.0.0", "debug": "^4.4.3", "http-errors": "^2.0.1", "iconv-lite": "^0.7.2", "on-finished": "^2.4.1", "qs": "^6.15.2", "raw-body": "^3.0.2", "type-is": "^2.1.0" } }, "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw=="],
- "boring-avatars": ["boring-avatars@2.0.4", "", { "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-xhZO/w/6aFmRfkaWohcl2NfyIy87gK5SBbys8kctZeTGF1Apjpv/10pfUuv+YEfVPkESU/h2Y6tt/Dwp+bIZPw=="],
-
"brace-expansion": ["brace-expansion@5.0.12", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ=="],
"braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
diff --git a/docs/configuration.md b/docs/configuration.md
index 9794cf2615..46d9366b41 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -1118,6 +1118,14 @@ agents:
Each agent requires `id`, `name`, `title`, `role_description`, and `type`.
+`avatar_seed` is optional and picks the Bot's face; without one the seed is the agent's `id`. A
+seed may start with one of the eight Bot colours and a colon to draw in that colour: `ember`,
+`moss`, `sun`, `berry`, `ocean`, `sky`, `coral` or `slate`, as in `avatar_seed: moss:knowledge`. The
+rest of the face still comes from the whole seed, so two Bots in one colour still look different.
+Any other seed takes its colour from a hash of the seed, as before. `violet:` names no colour,
+because violet is OpenBot's own mark. A package's Bots keep the look the package gives them; their
+owners choose a look for the Bots they make on each Bot's Setup page.
+
| Type | Required field |
| --------------- | --------------- |
| `built-in` | `system_prompt` |
diff --git a/extension/src/content/notice.ts b/extension/src/content/notice.ts
index 95e274d4cd..80c89077b5 100644
--- a/extension/src/content/notice.ts
+++ b/extension/src/content/notice.ts
@@ -10,34 +10,34 @@ export const NOTICE_TAG = "openbot-recorder-notice";
export const NOTICE_TOKENS = {
light: {
- "--background": "oklch(0.985 0 0)",
- "--foreground": "oklch(0.145 0 0)",
- "--card": "oklch(1 0 0)",
- "--card-foreground": "oklch(0.145 0 0)",
- "--border": "oklch(0.922 0 0)",
- "--primary": "oklch(0.205 0 0)",
- "--primary-foreground": "oklch(0.985 0 0)",
- "--secondary": "oklch(0.97 0 0)",
- "--muted-foreground": "oklch(0.5 0 0)",
- "--destructive": "oklch(0.577 0.245 27.325)",
- "--ring": "oklch(0.708 0 0)",
+ "--background": "#f6f6f8",
+ "--foreground": "#18181b",
+ "--card": "#ffffff",
+ "--card-foreground": "#18181b",
+ "--border": "rgb(24 24 27 / 9%)",
+ "--primary": "#111114",
+ "--primary-foreground": "#ffffff",
+ "--secondary": "#f1f1f4",
+ "--muted-foreground": "#6b6b75",
+ "--destructive": "#b91c1c",
+ "--ring": "#6430ab",
},
dark: {
- "--background": "oklch(0.145 0 0)",
- "--foreground": "oklch(0.985 0 0)",
- "--card": "oklch(0.205 0 0)",
- "--card-foreground": "oklch(0.985 0 0)",
- "--border": "oklch(1 0 0 / 10%)",
- "--primary": "oklch(0.922 0 0)",
- "--primary-foreground": "oklch(0.205 0 0)",
- "--secondary": "oklch(0.269 0 0)",
- "--muted-foreground": "oklch(0.708 0 0)",
- "--destructive": "oklch(0.704 0.191 22.216)",
- "--ring": "oklch(0.556 0 0)",
+ "--background": "#111113",
+ "--foreground": "#f4f4f5",
+ "--card": "#1c1c1f",
+ "--card-foreground": "#f4f4f5",
+ "--border": "rgb(255 255 255 / 10%)",
+ "--primary": "#f4f4f5",
+ "--primary-foreground": "#111114",
+ "--secondary": "#26262b",
+ "--muted-foreground": "#8e8e98",
+ "--destructive": "#f87171",
+ "--ring": "#b49ae8",
},
} as const;
-export const RADIUS = "0.5rem";
+export const RADIUS = "0.55rem";
type Choice = "stop" | "restart" | "continue";
diff --git a/server/src/agents/profile-store.ts b/server/src/agents/profile-store.ts
index fc5abebfa8..490e16d7d7 100644
--- a/server/src/agents/profile-store.ts
+++ b/server/src/agents/profile-store.ts
@@ -1,4 +1,4 @@
-import { and, eq, isNotNull, isNull, or, sql } from "drizzle-orm";
+import { and, asc, eq, isNotNull, isNull, or, sql } from "drizzle-orm";
import { capabilityRefusal } from "../admin/capabilities";
import type { CredentialStore } from "../credentials";
import type { Database } from "../db/client";
@@ -30,6 +30,7 @@ import type {
AgentActor,
AgentProfile,
CreateAgentInput,
+ UpdateAgentInput,
} from "./profile-types";
type Transaction = Parameters[0]>[0];
@@ -75,7 +76,7 @@ export type AgentProfileStore = {
update(
actor: AgentActor,
id: string,
- input: CreateAgentInput,
+ input: UpdateAgentInput,
): Promise;
duplicate(actor: AgentActor, id: string): Promise;
setHidden(actor: AgentActor, id: string, hidden: boolean): Promise;
@@ -486,15 +487,23 @@ export function createAgentProfileStore(
return {
async list(actor, hidden = false) {
- const rows = await joinedProfiles(database, actor).where(
- and(
- isNull(agentProfiles.deletedAt),
- accessFilter(actor),
- hidden
- ? isNotNull(agentPreferences.hiddenAt)
- : isNull(agentPreferences.hiddenAt),
- ),
- );
+ /*
+ * In the order the Bots were made, the id breaking a tie (a tenant package writes its Bots in
+ * one transaction, so they share a moment). Without an order Postgres answers in whatever
+ * order the rows lie in, and an edit writes a new row: a Bot that was restyled or renamed
+ * moved to the end. The app lists Bots in this order and takes the first as the default.
+ */
+ const rows = await joinedProfiles(database, actor)
+ .where(
+ and(
+ isNull(agentProfiles.deletedAt),
+ accessFilter(actor),
+ hidden
+ ? isNotNull(agentPreferences.hiddenAt)
+ : isNull(agentPreferences.hiddenAt),
+ ),
+ )
+ .orderBy(asc(agents.createdAt), asc(agents.id));
return rows.map(mapProfile);
},
@@ -689,6 +698,10 @@ export function createAgentProfileStore(
...(input.isolated === undefined
? {}
: { isolated: input.isolated }),
+ // The same: absent keeps its face. The route has checked the spelling.
+ ...(input.avatarSeed === undefined
+ ? {}
+ : { avatarSeed: input.avatarSeed }),
updatedAt,
})
.where(eq(agentProfiles.agentId, id));
diff --git a/server/src/agents/profile-types.ts b/server/src/agents/profile-types.ts
index 45c2e391ed..735fecd3f9 100644
--- a/server/src/agents/profile-types.ts
+++ b/server/src/agents/profile-types.ts
@@ -68,3 +68,11 @@ export type CreateAgentInput = Pick<
*/
isolated?: boolean;
};
+
+/**
+ * An edit to a Bot: everything a create takes, and optionally a new look.
+ *
+ * `avatarSeed` is the Bot's face (`@openbot/shared/bot-look`). Absent leaves it as it is, so an edit
+ * to anything else never changes how the Bot looks. Not on create, where the seed is the Bot's id.
+ */
+export type UpdateAgentInput = CreateAgentInput & { avatarSeed?: string };
diff --git a/server/src/agents/routes.ts b/server/src/agents/routes.ts
index b99b87c32d..77d934f8fe 100644
--- a/server/src/agents/routes.ts
+++ b/server/src/agents/routes.ts
@@ -1,3 +1,4 @@
+import { avatarSeedProblem } from "@openbot/shared/bot-look";
import type { Context, MiddlewareHandler } from "hono";
import { Hono } from "hono";
import type { AuditEventType, AuditStore } from "../audit";
@@ -37,6 +38,7 @@ type AgentInputObject = {
endpoint?: unknown;
auth?: unknown;
isolated?: unknown;
+ avatarSeed?: unknown;
};
/**
@@ -149,6 +151,23 @@ export function parseAgentInput(
};
}
+/**
+ * A new look for a Bot, when an edit brings one; undefined leaves its face as it is.
+ *
+ * Checked by the rules the orb draws by (`@openbot/shared/bot-look`): a short safe token, and when
+ * it names a colour, one a Bot can have. Never violet, which is OpenBot's own.
+ */
+function parseAvatarSeed(
+ input: unknown,
+): { ok: true; value: string | undefined } | { ok: false; error: string } {
+ const seed = isAgentInputObject(input) ? input.avatarSeed : undefined;
+ if (seed === undefined) return { ok: true, value: undefined };
+ const problem = avatarSeedProblem(seed);
+ return problem === null
+ ? { ok: true, value: seed as string }
+ : { ok: false, error: problem };
+}
+
function isAgentInputObject(input: unknown): input is AgentInputObject {
return typeof input === "object" && input !== null && !Array.isArray(input);
}
@@ -678,12 +697,12 @@ export function createAgentRoutes(
routes.patch("/:agentId", requireUser, async (context) => {
// Malformed JSON is a recoverable client-input error and is validated by the same parser.
- const parsed = parseAgentInput(
- await context.req.json().catch(() => null),
- allowPrivateHosts,
- allowedHosts,
- );
+ const body = await context.req.json().catch(() => null);
+ const parsed = parseAgentInput(body, allowPrivateHosts, allowedHosts);
if (!parsed.ok) return context.json({ error: parsed.error }, 400);
+ // Changed by whoever may change the rest of the profile: the store's manage check covers both.
+ const look = parseAvatarSeed(body);
+ if (!look.ok) return context.json({ error: look.error }, 400);
if (parsed.value.isolated === true && !isolationAvailable) {
return refuseIsolation(
context,
@@ -698,7 +717,10 @@ export function createAgentRoutes(
const agent = await store.update(
context.var.actor,
context.req.param("agentId"),
- parsed.value,
+ {
+ ...parsed.value,
+ ...(look.value === undefined ? {} : { avatarSeed: look.value }),
+ },
);
/*
* What changed, not the new values. Repointing the endpoint is the dangerous edit and is worth
@@ -722,6 +744,8 @@ export function createAgentRoutes(
...(parsed.value.isolated === undefined
? {}
: { isolated: parsed.value.isolated }),
+ // The same for a new look. It is a picture, not a secret, so the trail names it.
+ ...(look.value === undefined ? {} : { avatarSeed: look.value }),
});
/*
* Publishing is the owner's call, and a wider audience can outrun what an administrator
diff --git a/server/tests/agent-profile-store.integration.test.ts b/server/tests/agent-profile-store.integration.test.ts
index 1511ac061a..0198c4a3f1 100644
--- a/server/tests/agent-profile-store.integration.test.ts
+++ b/server/tests/agent-profile-store.integration.test.ts
@@ -475,7 +475,6 @@ describe("agent profile store integration", () => {
// reaches here already validated by the same check that guards creation.
endpoint: "https://moved.example.test/ag-ui",
ownerUserId: "forged-owner",
- avatarSeed: "forged-avatar",
packageId: deploymentPackage.id,
deletedAt: new Date(),
} as unknown as CreateAgentInput);
@@ -522,6 +521,96 @@ describe("agent profile store integration", () => {
);
});
+ test("an edit changes a Bot's look only when it brings one, and only for whoever may manage it", async () => {
+ const owner = await createUser();
+ const other = await createUser();
+ const admin = await createUser("admin");
+ const source = await createProfileFixture({ owner, visibility: "public" });
+ const input: CreateAgentInput = {
+ name: source.name,
+ title: source.title,
+ roleDescription: source.roleDescription,
+ visibility: "public",
+ };
+ const seedOf = async () =>
+ (await profileById(owner, source.agentId)).avatarSeed;
+
+ expect(
+ (
+ await store.update(owner, source.agentId, {
+ ...input,
+ avatarSeed: "moss:k2p9x7aq",
+ })
+ ).avatarSeed,
+ ).toBe("moss:k2p9x7aq");
+ // An edit to anything else keeps the face.
+ await store.update(owner, source.agentId, { ...input, title: "Retitled" });
+ expect(await seedOf()).toBe("moss:k2p9x7aq");
+
+ // The same rule as a rename: somebody who may use the Bot but not manage it can't restyle it.
+ await expect(
+ store.update(other, source.agentId, { ...input, avatarSeed: "sun:x" }),
+ ).rejects.toBeInstanceOf(AgentNotManageableError);
+ expect(await seedOf()).toBe("moss:k2p9x7aq");
+
+ // An admin may, as an admin may rename it.
+ await store.update(admin, source.agentId, {
+ ...input,
+ avatarSeed: "sky:x",
+ });
+ expect(await seedOf()).toBe("sky:x");
+
+ // And nobody may restyle a Bot a tenant package owns: its look is the package's.
+ const deploymentPackage = await createPackage();
+ const packaged = await createProfileFixture({
+ owner,
+ packageId: deploymentPackage.id,
+ });
+ await expect(
+ store.update(admin, packaged.agentId, { ...input, avatarSeed: "sun:x" }),
+ ).rejects.toBeInstanceOf(ProtectedAgentError);
+ expect((await profileById(admin, packaged.agentId)).avatarSeed).toBe(
+ packaged.avatarSeed,
+ );
+ });
+
+ /*
+ * The list had no order of its own, so Postgres answered in whatever order its rows lay in, and an
+ * edit writes a new row: a Bot somebody restyled or renamed jumped from first to last in Yours.
+ * The app shows Bots in the order the server sends them and takes the first as the default, so
+ * the order is the store's to keep: the order they were made in.
+ */
+ test("lists Bots in the order they were made, and an edit moves none of them", async () => {
+ const owner = await createUser();
+ const made: string[] = [];
+ for (const label of ["First", "Second", "Third"]) {
+ const created = await store.create(owner, {
+ name: `${label} ${randomUUID()}`,
+ title: "In order",
+ roleDescription: "Keeps its place.",
+ visibility: "private",
+ });
+ createdAgentIds.push(created.id);
+ made.push(created.id);
+ }
+ const listed = async () =>
+ (await store.list(owner))
+ .map((profile) => profile.id)
+ .filter((agentId) => made.includes(agentId));
+ expect(await listed()).toEqual(made);
+
+ // A new look and a new name for the first, which writes both of its rows again.
+ const first = await profileById(owner, made[0] as string);
+ await store.update(owner, first.id, {
+ name: `Renamed ${randomUUID()}`,
+ title: first.title,
+ roleDescription: first.roleDescription,
+ visibility: first.visibility,
+ avatarSeed: "moss:k2p9x7aq",
+ });
+ expect(await listed()).toEqual(made);
+ });
+
test("rejects public non-owner mutation as unmanageable and inaccessible private mutation as absent", async () => {
const owner = await createUser();
const other = await createUser();
diff --git a/server/tests/agent-routes.test.ts b/server/tests/agent-routes.test.ts
index 1a84adaf82..ea01cabaa8 100644
--- a/server/tests/agent-routes.test.ts
+++ b/server/tests/agent-routes.test.ts
@@ -509,11 +509,12 @@ describe("agent lifecycle routes", () => {
visibility: " private ",
id: "forged-agent",
ownerUserId: "attacker",
- avatarSeed: "forged-avatar",
deletedAt: "now",
systemOwned: true,
// A real field now, not a forged one; the rest of this list still is.
endpoint: "https://agents.example.com/ag-ui",
+ // Real on an edit, which may change how the Bot looks, and forged on a create, which may not.
+ avatarSeed: "moss:k2p9x7aq",
};
for (const [path, method] of [
@@ -535,10 +536,82 @@ describe("agent lifecycle routes", () => {
};
expect(store.calls).toEqual([
["create", actor, expected],
- ["update", actor, "agent-1", expected],
+ [
+ "update",
+ actor,
+ "agent-1",
+ { ...expected, avatarSeed: "moss:k2p9x7aq" },
+ ],
+ ]);
+ });
+
+ test("an edit may bring a new look, and one that leaves it out keeps the Bot's face", async () => {
+ const store = fakeStore();
+ const app = appFor(store);
+ const patch = (body: Record) =>
+ app.request("http://openbot.test/agent-1", {
+ method: "PATCH",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ ...validInput, ...body }),
+ });
+
+ const recoloured = await patch({ avatarSeed: "ember:k2p9x7aq" });
+ expect(recoloured.status).toBe(200);
+ expect((await json(recoloured)).agent.avatarSeed).toBe("ember:k2p9x7aq");
+ // A seed that names no colour is still a look, as every Bot's own id is.
+ expect((await patch({ avatarSeed: "agent_3f6c-91" })).status).toBe(200);
+ expect((await patch({ title: "Finance" })).status).toBe(200);
+
+ expect(store.calls.map((call) => call[3])).toEqual([
+ { ...validInput, avatarSeed: "ember:k2p9x7aq" },
+ { ...validInput, avatarSeed: "agent_3f6c-91" },
+ { ...validInput, title: "Finance" },
]);
});
+ test.each([
+ ["violet:k2p9x7aq", "Violet is kept for OpenBot. Pick another colour."],
+ [
+ "purple:k2p9x7aq",
+ "That isn't a colour a Bot can have. Pick one of the eight.",
+ ],
+ [
+ "moss:
",
+ "A Bot's look is 1 to 64 letters, numbers, hyphens, underscores or colons.",
+ ],
+ [
+ `moss:${"x".repeat(60)}`,
+ "A Bot's look is 1 to 64 letters, numbers, hyphens, underscores or colons.",
+ ],
+ [
+ "",
+ "A Bot's look is 1 to 64 letters, numbers, hyphens, underscores or colons.",
+ ],
+ [
+ null,
+ "A Bot's look is 1 to 64 letters, numbers, hyphens, underscores or colons.",
+ ],
+ [
+ 42,
+ "A Bot's look is 1 to 64 letters, numbers, hyphens, underscores or colons.",
+ ],
+ ])("refuses the look %p and changes nothing", async (avatarSeed, error) => {
+ const store = fakeStore();
+
+ const response = await appFor(store).request(
+ "http://openbot.test/agent-1",
+ {
+ method: "PATCH",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify({ ...validInput, avatarSeed }),
+ },
+ );
+
+ expect(response.status).toBe(400);
+ expect(await json(response)).toEqual({ error });
+ expect(store.calls).toEqual([]);
+ });
+
test.each([
["POST", "/"],
["PATCH", "/agent-1"],
diff --git a/server/tests/assertion-shape.test.ts b/server/tests/assertion-shape.test.ts
index 236f1d8042..86d78af0e7 100644
--- a/server/tests/assertion-shape.test.ts
+++ b/server/tests/assertion-shape.test.ts
@@ -1010,16 +1010,6 @@ const ALLOW: Allowed[] = [
expression: "expect(run?.forwardedProps?.openbotRun).toBeUndefined()",
finding: "NEW (round 2 did not find this)",
},
- {
- file: "app/tests/user-preferences.test.tsx",
- shape: "c",
- context: [
- '"loads preferences from the account and renders the saved emphasis"',
- ],
- expression:
- 'expect(requests).toEqual([{path:"/api/settings/preferences",method:"GET",body:undefined},])',
- finding: "NEW (round 2 did not find this)",
- },
{
file: "server/tests/agent-handoff.test.ts",
shape: "c",
diff --git a/server/tests/bot-lifecycle-audit.test.ts b/server/tests/bot-lifecycle-audit.test.ts
index f446e73b6b..6473b37820 100644
--- a/server/tests/bot-lifecycle-audit.test.ts
+++ b/server/tests/bot-lifecycle-audit.test.ts
@@ -134,6 +134,23 @@ describe("what a Bot is, on the trail", () => {
expect(rows[0]?.payload.visibility).toBe("private");
});
+ test("a new look is recorded, and an edit without one says nothing about it", async () => {
+ const { rows, hono } = app();
+
+ await hono.request("http://t/api/agents/bot-1", {
+ ...json({ avatarSeed: "coral:k2p9x7aq" }),
+ method: "PATCH",
+ });
+ await hono.request("http://t/api/agents/bot-1", {
+ ...json({ title: "Sales assistant, revised" }),
+ method: "PATCH",
+ });
+
+ expect(rows[0]?.eventType).toBe("bot.updated");
+ expect(rows[0]?.payload.avatarSeed).toBe("coral:k2p9x7aq");
+ expect(rows[1]?.payload).not.toHaveProperty("avatarSeed");
+ });
+
test("a replaced key is noted and never recorded", async () => {
const { rows, hono } = app();
diff --git a/shared/bot-look.test.ts b/shared/bot-look.test.ts
new file mode 100644
index 0000000000..3973d27c9b
--- /dev/null
+++ b/shared/bot-look.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, test } from "bun:test";
+import {
+ avatarSeedProblem,
+ BOT_COLOURS,
+ namedColour,
+ newFace,
+ recoloured,
+ seedFor,
+} from "./bot-look";
+
+describe("a seed that names its colour", () => {
+ test("names one of the eight, and never violet", () => {
+ expect(BOT_COLOURS).toHaveLength(8);
+ expect(BOT_COLOURS).not.toContain("violet" as never);
+ for (const colour of BOT_COLOURS) {
+ expect(namedColour(seedFor(colour, "k2p9x7aq"))).toBe(colour);
+ }
+ expect(namedColour("violet:k2p9x7aq")).toBeNull();
+ });
+
+ test("any other seed names no colour", () => {
+ for (const seed of [
+ "research-desk",
+ "agent_3f6c",
+ "",
+ "purple:k2p9x7aq",
+ "Moss:k2p9x7aq",
+ ":moss",
+ ]) {
+ expect(namedColour(seed)).toBeNull();
+ }
+ });
+});
+
+describe("what the server accepts as a look", () => {
+ test("a short safe token, named colour or not", () => {
+ expect(avatarSeedProblem("research-desk")).toBeNull();
+ expect(avatarSeedProblem(`agent_${crypto.randomUUID()}`)).toBeNull();
+ expect(avatarSeedProblem("moss:k2p9x7aq")).toBeNull();
+ expect(avatarSeedProblem("x".repeat(64))).toBeNull();
+ });
+
+ test("refuses anything else in a plain sentence", () => {
+ for (const seed of [
+ "",
+ "x".repeat(65),
+ "moss:k2 p9",
+ "
+
+
+ );
+}
+
+function draw() {
+ const router = createRouter({
+ history: createMemoryHistory({ initialEntries: ["/"] }),
+ routeTree: createRootRoute({ component: Page }),
+ });
+ const view = render(
+
+ {Array.from({ length: 50 }, (_, i) => `bot-${i}`).map((id) => (
+
,
+ );
+ expect(frames.requested).toBe(1);
+ frames.run();
+ expect(ctx.draws).toBe(50);
+ expect(frames.requested).toBe(2);
+
+ // The last one gone, the clock stops asking for frames.
+ cleanup();
+ expect(frames.pending).toBe(0);
+ } finally {
+ cleanup();
+ frames.restore();
+ restore();
+ }
+ });
+ });
+
+ const pointAt = (x: number, y: number) =>
+ window.dispatchEvent(
+ new PointerEvent("pointermove", { clientX: x, clientY: y }),
+ );
+
+ /**
+ * One orb `size` px across, its corner at (100, 100) on screen. `play` runs its frames from `from`
+ * to `to` seconds after it mounts, `fps` a second, calling `each` before every frame, and says how
+ * many of them it drew.
+ */
+ function onScreen(size: number) {
+ const ctx = fakeContext();
+ const frames = manualFrames();
+ const restore = withContext(ctx);
+ const view = render(