feat: pick your own sidebar artwork, and wear the MT brand

apps/web/src/components/Icons.tsx

@@ -700,25 +700,16 @@ export const ACPRegistryIcon: Icon = ({ className, ...props }) => (
 export const MtModelIcon: Icon = ({ className, ...props }) => (
   <svg
     {...props}
-    viewBox="0 0 24 24"
+    viewBox="0 0 128 128"
     fill="none"
-    className={cn("stroke-current", className)}
+    className={cn("fill-current", className)}
     aria-hidden
   >
+    {/* The Munim mark, same path the app icon draws. */}
     <path
-      d="M12 3.2 13.7 8.3 19 10l-5.3 1.7L12 16.8l-1.7-5.1L5 10l5.3-1.7L12 3.2Z"
-      strokeWidth="1.7"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18.2 15.4 19 17.8 21.4 18.6 19 19.4 18.2 21.8 17.4 19.4 15 18.6 17.4 17.8 18.2 15.4Z"
-      strokeWidth="1.4"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5.4 14.8 6 16.6 7.8 17.2 6 17.8 5.4 19.6 4.8 17.8 3 17.2 4.8 16.6 5.4 14.8Z"
-      strokeWidth="1.4"
-      strokeLinejoin="round"
+      d="M52.547 87.884L52.710 88.313L51.914 88.231L-0.000 603.926L105.522 614.537L135.846 313.360L180.699 434.810L181.210 439.258L182.291 439.136L184.066 443.911L265.794 413.732L273.569 383.736L293.716 313.043L312.994 481.660L219.104 524.021L180.964 657.000L668.780 436.993L668.189 435.670L631.008 110.432L725.000 105.249L719.204 0.000L419.046 16.549L424.862 121.797L525.037 116.268L554.382 372.820L413.312 436.422L366.622 27.955L262.488 39.871L262.937 43.850L212.900 219.495L150.865 51.563Z"
+      fillRule="nonzero"
+      transform="translate(22.067 26.000) scale(0.115677)"
     />
   </svg>
 );

apps/web/src/components/SidebarStageBackdrop.test.tsx

@@ -2,7 +2,10 @@ import { describe, expect, it } from "vite-plus/test";
 import { renderToStaticMarkup } from "react-dom/server";
 
 import {
+  DEV_BACKDROP,
+  NIGHTLY_BACKDROP,
   resolveEnvironmentIdentificationPillLabel,
+  resolveSidebarArtwork,
   resolveSidebarStageBackdropVariant,
   resolveSidebarStageFocusRingOffsetClass,
   StageBackdropArt,
@@ -11,8 +14,8 @@ import {
 
 describe("SidebarStageBackdrop", () => {
   it("resolves stage artwork only when enabled", () => {
-    expect(resolveSidebarStageBackdropVariant("Dev")).toBe("dev");
-    expect(resolveSidebarStageBackdropVariant("Nightly")).toBe("nightly");
+    expect(resolveSidebarStageBackdropVariant("Dev")).toEqual(DEV_BACKDROP);
+    expect(resolveSidebarStageBackdropVariant("Nightly")).toEqual(NIGHTLY_BACKDROP);
     expect(resolveSidebarStageBackdropVariant("Dev", false)).toBeNull();
     expect(resolveSidebarStageBackdropVariant("Alpha")).toBeNull();
   });
@@ -25,16 +28,16 @@ describe("SidebarStageBackdrop", () => {
   });
 
   it("matches the focus-ring offset to each artwork palette", () => {
-    expect(resolveSidebarStageFocusRingOffsetClass("nightly")).toBe(
+    expect(resolveSidebarStageFocusRingOffsetClass(NIGHTLY_BACKDROP)).toBe(
       "focus-visible:ring-offset-(--stage-night-bottom)",
     );
-    expect(resolveSidebarStageFocusRingOffsetClass("dev")).toBe(
+    expect(resolveSidebarStageFocusRingOffsetClass(DEV_BACKDROP)).toBe(
       "focus-visible:ring-offset-(--stage-art-bottom)",
     );
   });
 
-  it.each(["nightly", "dev"] as const)(
-    "uses unique SVG definition ids when %s artwork is rendered more than once",
+  it.each([NIGHTLY_BACKDROP, DEV_BACKDROP] as const)(
+    "uses unique SVG definition ids when $kind artwork is rendered more than once",
     (variant) => {
       const markup = renderToStaticMarkup(
         <>
@@ -50,8 +53,8 @@ describe("SidebarStageBackdrop", () => {
   );
 
   it("paints each artwork variant with theme-owned color tokens", () => {
-    const nightlyMarkup = renderToStaticMarkup(<StageBackdropArt variant="nightly" />);
-    const devMarkup = renderToStaticMarkup(<StageBackdropArt variant="dev" />);
+    const nightlyMarkup = renderToStaticMarkup(<StageBackdropArt variant={NIGHTLY_BACKDROP} />);
+    const devMarkup = renderToStaticMarkup(<StageBackdropArt variant={DEV_BACKDROP} />);
 
     expect(nightlyMarkup).toContain("var(--stage-night-bottom)");
     expect(nightlyMarkup).toContain("var(--stage-night-line)");
@@ -62,12 +65,49 @@ describe("SidebarStageBackdrop", () => {
   });
 
   it.each([
-    ["nightly", "96 0 8192 96"],
-    ["dev", "64 0 8192 96"],
-  ] as const)("uses the compact %s crop inside the send button", (variant, viewBox) => {
+    [NIGHTLY_BACKDROP, "96 0 8192 96"],
+    [DEV_BACKDROP, "64 0 8192 96"],
+  ] as const)("uses the compact crop inside the send button", (variant, viewBox) => {
     const markup = renderToStaticMarkup(<StageBackdropButtonArt variant={variant} />);
 
     expect(markup).toContain(`viewBox="${viewBox}"`);
-    expect(markup).toContain(`stage-${variant === "dev" ? "blueprint" : "nightly"}`);
+    expect(markup).toContain(`stage-${variant.kind === "dev" ? "blueprint" : "nightly"}`);
+  });
+});
+
+describe("resolveSidebarArtwork", () => {
+  const custom = [{ id: "art_1", name: "Skyline", image: "data:image/png;base64,AAAA" }];
+
+  it("defers to the build channel only for auto", () => {
+    expect(resolveSidebarArtwork({ selection: "auto", stageLabel: "Nightly", custom })).toEqual(
+      NIGHTLY_BACKDROP,
+    );
+    // A release build has no channel artwork, which is why picking one matters.
+    expect(resolveSidebarArtwork({ selection: "auto", stageLabel: "", custom })).toBeNull();
+  });
+
+  it("honours an explicit pick regardless of channel", () => {
+    expect(resolveSidebarArtwork({ selection: "night", stageLabel: "", custom })).toEqual(
+      NIGHTLY_BACKDROP,
+    );
+    expect(resolveSidebarArtwork({ selection: "day", stageLabel: "Nightly", custom })).toEqual(
+      DEV_BACKDROP,
+    );
+    expect(resolveSidebarArtwork({ selection: "none", stageLabel: "Nightly", custom })).toBeNull();
+  });
+
+  it("renders the account's own artwork, and nothing once it is deleted", () => {
+    expect(resolveSidebarArtwork({ selection: "art_1", stageLabel: "", custom })).toEqual({
+      kind: "custom",
+      image: custom[0]!.image,
+      name: custom[0]!.name,
+    });
+    expect(resolveSidebarArtwork({ selection: "art_1", stageLabel: "", custom: [] })).toBeNull();
+  });
+
+  it("stays out of the way when artwork is switched off entirely", () => {
+    expect(
+      resolveSidebarArtwork({ selection: "night", stageLabel: "", custom, enabled: false }),
+    ).toBeNull();
   });
 });

apps/web/src/components/SidebarStageBackdrop.tsx

@@ -4,10 +4,44 @@ import { useId } from "react";
 import { APP_HAS_UPDATE_TRACKS, APP_STAGE_LABEL } from "../branding";
 import { resolveServerBackedAppStageLabel } from "../branding.logic";
 import { primaryServerConfigAtom } from "../state/server";
+import { usePrimarySettings } from "../hooks/useSettings";
 
-export type SidebarStageBackdropVariant = "nightly" | "dev";
+export type SidebarStageBackdropVariant =
+  | { readonly kind: "nightly" }
+  | { readonly kind: "dev" }
+  | { readonly kind: "custom"; readonly image: string; readonly name: string };
 export type EnvironmentIdentificationPillLabel = "Dev" | "Nightly";
 
+export const NIGHTLY_BACKDROP: SidebarStageBackdropVariant = { kind: "nightly" };
+export const DEV_BACKDROP: SidebarStageBackdropVariant = { kind: "dev" };
+
+/**
+ * Resolve the artwork to draw from the account's choice.
+ *
+ * "auto" defers to the build channel the way upstream does; every other value
+ * is a deliberate pick and ignores the channel entirely, which is the point on
+ * a single-release build like MT Code.
+ */
+export function resolveSidebarArtwork(input: {
+  readonly selection: string;
+  readonly stageLabel: string;
+  readonly custom: ReadonlyArray<{ readonly id: string; readonly name: string; readonly image: string }>;
+  readonly enabled?: boolean;
+}): SidebarStageBackdropVariant | null {
+  if (input.enabled === false) return null;
+  const selection = input.selection.trim();
+  if (selection === "none") return null;
+  if (selection === "night") return NIGHTLY_BACKDROP;
+  if (selection === "day") return DEV_BACKDROP;
+  if (selection !== "auto" && selection.length > 0) {
+    const artwork = input.custom.find((entry) => entry.id === selection);
+    // A deleted artwork leaves the header bare rather than silently falling
+    // back to a scene the user did not choose.
+    return artwork ? { kind: "custom", image: artwork.image, name: artwork.name } : null;
+  }
+  return resolveSidebarStageBackdropVariant(input.stageLabel);
+}
+
 // A wide viewBox keeps the 96-unit art height at a fixed scale while sidebar resizing reveals
 // more horizontal canvas instead of zooming the scene.
 const STAGE_BACKDROP_VIEW_BOX = "0 0 8192 96";
@@ -18,15 +52,15 @@ export function resolveSidebarStageBackdropVariant(
 ): SidebarStageBackdropVariant | null {
   if (!enabled) return null;
   const normalized = stageLabel.trim().toLowerCase();
-  if (normalized === "nightly") return "nightly";
-  if (normalized === "dev") return "dev";
+  if (normalized === "nightly") return NIGHTLY_BACKDROP;
+  if (normalized === "dev") return DEV_BACKDROP;
   return null;
 }
 
 export function resolveSidebarStageFocusRingOffsetClass(
   variant: SidebarStageBackdropVariant,
 ): string {
-  return variant === "nightly"
+  return variant.kind === "nightly"
     ? "focus-visible:ring-offset-(--stage-night-bottom)"
     : "focus-visible:ring-offset-(--stage-art-bottom)";
 }
@@ -52,7 +86,17 @@ export function useEnvironmentStageLabel(): string {
 }
 
 export function useSidebarStageBackdropVariant(enabled = true): SidebarStageBackdropVariant | null {
-  return resolveSidebarStageBackdropVariant(useEnvironmentStageLabel(), enabled);
+  const stageLabel = useEnvironmentStageLabel();
+  const artwork = usePrimarySettings((settings) => ({
+    selection: settings.sidebarArtwork,
+    custom: settings.customSidebarArtworks,
+  }));
+  return resolveSidebarArtwork({
+    selection: artwork.selection,
+    stageLabel,
+    custom: artwork.custom,
+    enabled,
+  });
 }
 
 /** Stage-channel header art; palettes mirror the per-channel app icons in `assets/`. */
@@ -68,11 +112,32 @@ export function SidebarStageBackdrop({ variant }: { variant: SidebarStageBackdro
 }
 
 export function StageBackdropArt({ variant }: { variant: SidebarStageBackdropVariant }) {
-  return variant === "nightly" ? <NightlySkyArt /> : <DevBlueprintArt />;
+  if (variant.kind === "custom") return <CustomArt variant={variant} />;
+  return variant.kind === "nightly" ? <NightlySkyArt /> : <DevBlueprintArt />;
 }
 
 export function StageBackdropButtonArt({ variant }: { variant: SidebarStageBackdropVariant }) {
-  return variant === "nightly" ? <NightlySkyArt compact /> : <DevBlueprintArt compact />;
+  if (variant.kind === "custom") return <CustomArt variant={variant} />;
+  return variant.kind === "nightly" ? <NightlySkyArt compact /> : <DevBlueprintArt compact />;
+}
+
+/**
+ * A user's own artwork. Drawn as a cover-cropped band so any aspect ratio
+ * fills the header the way the built-in scenes do.
+ */
+function CustomArt({
+  variant,
+}: {
+  variant: Extract<SidebarStageBackdropVariant, { kind: "custom" }>;
+}) {
+  return (
+    <div
+      role="img"
+      aria-label={variant.name}
+      className="stage-art h-full w-full bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${JSON.stringify(variant.image)})` }}
+    />
+  );
 }
 
 const NIGHTLY_STARS: ReadonlyArray<{

apps/web/src/components/settings/DesktopNotificationsSettings.tsx

@@ -16,6 +16,8 @@ import { toastManager } from "../ui/toast.tsx";
 import { SettingsRow, SettingsSection } from "./settingsLayout.tsx";
 import { searchableSetting } from "./settingsSearch.ts";
 
+import { APP_DISPLAY_NAME } from "~/branding";
+
 const EVENT_OPTIONS: ReadonlyArray<{
   readonly event: DesktopNotificationEvent;
   readonly title: string;
@@ -158,14 +160,14 @@ function useDesktopNotificationSettingsModel() {
   };
 
   const masterDescription = isElectron
-    ? "Notify me when T3 Code is in the background."
+    ? `Notify me when ${APP_DISPLAY_NAME} is in the background.`
     : browserPermission.permission === "denied"
       ? "Blocked in your browser settings."
       : browserPermission.permission === "unsupported"
         ? "Not supported by this browser."
         : browserPermission.permission === "default"
-          ? "Allow notifications when T3 Code is in the background."
-          : "Notify me when T3 Code is in the background.";
+          ? `Allow notifications when ${APP_DISPLAY_NAME} is in the background.`
+          : `Notify me when ${APP_DISPLAY_NAME} is in the background.`;
 
   return {
     settings,