@oxy.so/bloom 7.1.2 → 7.1.4

package/src/agent-avatar/character-shapes.ts

@@ -0,0 +1,122 @@
+import { avatarHex } from './avatar-color';
+import type { AvatarCharacterConfig } from './config-character';
+import type { AvatarConfig } from './model';
+
+export const NATIVE_CHARACTER_SHAPES = [
+  ['clippo', 'Clippo'],
+  ['todd', 'Todd'],
+  ['circle', 'Circle'],
+  ['rounded_triangle', 'Rounded triangle'],
+  ['capsule', 'Capsule'],
+  ['rounded_head_two_ears', 'Rounded head with two ears'],
+  ['six_lobed_flower', 'Six lobed flower'],
+  ['heart', 'Heart'],
+  ['four_lobed_butterfly', 'Four lobed butterfly'],
+  ['circle_two_ears', 'Circle with two ears'],
+  ['twelve_scalloped_rosette', 'Twelve scalloped rosette'],
+  ['rounded_cube', 'Hexagon'],
+  ['rounded_diamond', 'Rounded diamond'],
+] as const;
+export const MIGRATED_CHARACTER_SHAPES = [
+  ['slender', 'Slender'],
+  ['pocket', 'Pocket'],
+  ['petal', 'Petal'],
+  ['star', 'Star'],
+  ['cloud', 'Cloud'],
+  ['shield', 'Shield'],
+  ['pebble', 'Pebble'],
+  ['squircle', 'Squircle'],
+] as const;
+export const CHARACTER_SHAPES = [
+  ...NATIVE_CHARACTER_SHAPES,
+  ...MIGRATED_CHARACTER_SHAPES,
+] as const;
+
+export function isMigratedCharacterShape(id: string | undefined): boolean {
+  return MIGRATED_CHARACTER_SHAPES.some(([shape]) => shape === id);
+}
+
+/** The saved paper/blob fields remain readable; canonical shape IDs own new edits. */
+export function currentCharacterShape(config: AvatarConfig): string {
+  if (config.character?.selections?.shape)
+    return config.character.selections.shape;
+  const shape = config.family === 'fold' ? config.foldShape : config.shape;
+  const equivalent: Partial<Record<string, string>> = {
+    triangle: 'rounded_triangle',
+    flower: 'six_lobed_flower',
+    diamond: 'rounded_diamond',
+  };
+  return equivalent[shape] ?? shape;
+}
+
+/** Geometry-only view of one of the eight migrated contours. */
+export function characterShapeGeometry(config: AvatarConfig): AvatarConfig {
+  const shape = config.character?.selections?.shape;
+  if (!isMigratedCharacterShape(shape)) return config;
+  return shape === 'pebble' || shape === 'squircle'
+    ? { ...config, family: 'blob', shape }
+    : {
+        ...config,
+        family: 'fold',
+        foldShape: shape as AvatarConfig['foldShape'],
+      };
+}
+
+/** Retain effective authored parts while preparing the next body. An old recipe
+ * is promoted once, with its actual paint and contour rather than Felipe defaults.
+ */
+export function materializeCharacter(
+  config: AvatarConfig,
+  selected: Readonly<Record<string, string>> = {},
+): AvatarCharacterConfig {
+  const saved = config.character;
+  if (!saved || saved.preset === 'bloom')
+    return {
+      ...saved,
+      preset: 'legacy',
+      ...(saved?.bodyColor
+        ? { bodyColor: saved.bodyColor }
+        : !saved?.selections?.color
+          ? { bodyColor: avatarHex(config) }
+          : {}),
+      selections: {
+        shape: currentCharacterShape(config),
+        eyes: 'oval',
+        eyewear: 'none',
+        accessory: 'none',
+        ...saved?.selections,
+      },
+    };
+  const defaults: NonNullable<AvatarCharacterConfig['selections']> = {};
+  for (const part of ['eyes', 'eyewear', 'accessory'] as const)
+    if (selected[part]) defaults[part] = selected[part];
+  // These virtual parts are absent from the backing native catalog.
+  if (!defaults.eyes && saved.preset === 'clippo') defaults.eyes = 'clippo';
+  if (!defaults.eyes && saved.preset === 'lime_frog') defaults.eyes = 'todd';
+  if (!defaults.accessory && saved.preset === 'blue_beret')
+    defaults.accessory = 'felipe_beret';
+  return { ...saved, selections: { ...defaults, ...saved.selections } };
+}
+
+/** All 21 bodies change the same character recipe. Named paint and explicit RGB
+ * keep their precedence; a body never supplies a replacement color or face.
+ */
+export function createConfigForShape(
+  config: AvatarConfig,
+  shape: string,
+  selected: Readonly<Record<string, string>> = {},
+): AvatarConfig {
+  if (!CHARACTER_SHAPES.some(([id]) => id === shape))
+    throw new Error('Unknown character shape.');
+  const character = materializeCharacter(config, selected);
+  if (!character.bodyColor && !character.selections?.color) {
+    if (character.preset === 'clippo') character.bodyColor = '#999b9d';
+    else if (selected.color)
+      character.selections = { ...character.selections, color: selected.color };
+    else if (selected.bodyColor) character.bodyColor = selected.bodyColor;
+  }
+  return characterShapeGeometry({
+    ...config,
+    character: { ...character, selections: { ...character.selections, shape } },
+  });
+}

package/src/agent-avatar/config-character.ts

@@ -1,14 +1,25 @@
 /** Catalog parts extend the existing avatar recipe without discarding its shape or expression fields. */
-export type AvatarCharacterCategory = 'shape' | 'color' | 'eyes' | 'eyewear' | 'accessory';
+export type AvatarCharacterCategory =
+  'shape' | 'color' | 'eyes' | 'eyewear' | 'accessory';
 
 export type AvatarCharacterConfig = {
+  /** Named catalog preset, including Clippo (`clippo`), or a saved renderer ID. */
   preset: string;
+  /** Clippo's open wire body and ring eyes are independently selectable with ID `clippo`. */
   selections?: Partial<Record<AvatarCharacterCategory, string>>;
   /** Custom body RGB accepted by the original renderer, stored as lowercase #RRGGBB. */
   bodyColor?: string;
+  /** @deprecated Retained when reading saved recipes; ignored by the renderer. Each shape owns its eye layout. */
+  eyeSpacing?: number;
 };
 
-const categories: readonly AvatarCharacterCategory[] = ['shape', 'color', 'eyes', 'eyewear', 'accessory'];
+const categories: readonly AvatarCharacterCategory[] = [
+  'shape',
+  'color',
+  'eyes',
+  'eyewear',
+  'accessory',
+];
 const validId = (value: unknown): value is string =>
   typeof value === 'string' && value.length > 0 && value.length <= 63;
 
@@ -19,22 +30,44 @@ export function parseCharacterConfig(value: unknown): AvatarCharacterConfig {
   const candidate = value as Record<string, unknown>;
   if (!validId(candidate.preset)) throw new Error('Invalid character preset.');
   const result: AvatarCharacterConfig = { preset: candidate.preset };
+  if (candidate.eyeSpacing !== undefined) {
+    if (
+      typeof candidate.eyeSpacing !== 'number' ||
+      !Number.isFinite(candidate.eyeSpacing) ||
+      candidate.eyeSpacing < 0.5 ||
+      candidate.eyeSpacing > 1.5
+    )
+      throw new Error('Invalid character eye spacing.');
+    result.eyeSpacing = candidate.eyeSpacing;
+  }
   if (candidate.bodyColor !== undefined) {
-    if (typeof candidate.bodyColor !== 'string' || candidate.bodyColor.length !== 7 || !/^#[0-9a-f]{6}$/i.test(candidate.bodyColor))
+    if (
+      typeof candidate.bodyColor !== 'string' ||
+      candidate.bodyColor.length !== 7 ||
+      !/^#[0-9a-f]{6}$/i.test(candidate.bodyColor)
+    )
       throw new Error('Invalid character body color.');
     result.bodyColor = candidate.bodyColor.toLowerCase();
   }
   if (candidate.selections !== undefined) {
-    if (!candidate.selections || typeof candidate.selections !== 'object' || Array.isArray(candidate.selections))
+    if (
+      !candidate.selections ||
+      typeof candidate.selections !== 'object' ||
+      Array.isArray(candidate.selections)
+    )
       throw new Error('Invalid character selections.');
     const selections: NonNullable<AvatarCharacterConfig['selections']> = {};
     for (const [category, id] of Object.entries(candidate.selections)) {
-      if (!categories.includes(category as AvatarCharacterCategory) || !validId(id))
+      if (
+        !categories.includes(category as AvatarCharacterCategory) ||
+        !validId(id)
+      )
         throw new Error('Invalid character selection.');
       selections[category as AvatarCharacterCategory] = id;
     }
     result.selections = selections;
   }
-  if ('state' in candidate) throw new Error('Opaque character state is not supported.');
+  if ('state' in candidate)
+    throw new Error('Opaque character state is not supported.');
   return result;
 }

package/src/agent-avatar/legacy-recipe.ts

@@ -1,3 +1,8 @@
+import { CHARACTER_COLORS } from './character-colors';
+import {
+  characterShapeGeometry,
+  isMigratedCharacterShape,
+} from './character-shapes';
 import { avatarHex } from './avatar-color';
 import { legacyContours } from './legacy-contours';
 import type { AvatarConfig } from './model';
@@ -9,6 +14,7 @@ export type LegacyRecipe = {
   points?: Point[];
   shape?: string;
   eyes: string;
+  eyeSpacing?: number;
   selections?: Pick<
     NonNullable<AvatarCharacterConfig['selections']>,
     'eyewear' | 'accessory'
@@ -18,6 +24,8 @@ export type LegacyRecipe = {
 
 /** Saved unsupported artwork stays readable without pretending it was migrated. */
 export function legacyRecipeUnsupported(config: AvatarConfig): boolean {
+  if (isMigratedCharacterShape(config.character?.selections?.shape))
+    return false;
   return (
     config.family === 'alien' || config.family === 'mascot' || !config.face
   );
@@ -74,6 +82,8 @@ export function radialContour(polygons: Point[][], samples = 256): Point[] {
 
 /** Shared capability identity for the editor and the legacy engine adapter. */
 export function legacyCharacterRecipe(config: AvatarConfig) {
+  if (config.character && config.character.preset !== 'bloom')
+    return config.character;
   const customization =
     config.character?.preset === 'bloom' ? config.character : undefined;
   return {
@@ -88,7 +98,15 @@ export function legacyCharacterRecipe(config: AvatarConfig) {
         ? { accessory: customization.selections.accessory }
         : {}),
     },
-    bodyColor: customization?.bodyColor ?? avatarHex(config),
+    bodyColor:
+      customization?.bodyColor ??
+      CHARACTER_COLORS[
+        customization?.selections?.color as keyof typeof CHARACTER_COLORS
+      ] ??
+      avatarHex(config),
+    ...(customization?.eyeSpacing !== undefined
+      ? { eyeSpacing: customization.eyeSpacing }
+      : {}),
   };
 }
 
@@ -102,14 +120,24 @@ export function legacyRecipe(
 ): LegacyRecipe {
   if (legacyRecipeUnsupported(config))
     throw new Error('Unsupported legacy 3D recipe');
-  const shape = legacyNativeShape(config);
+  const geometry = characterShapeGeometry(config);
+  const canonical = config.character && config.character.preset !== 'bloom';
+  const selectedShape = canonical
+    ? config.character?.selections?.shape
+    : undefined;
+  const shape = isMigratedCharacterShape(selectedShape)
+    ? undefined
+    : (selectedShape ?? legacyNativeShape(geometry));
   const recipe = legacyCharacterRecipe(config);
-  const { eyewear, accessory } = recipe.selections;
+  const { eyewear, accessory } = recipe.selections ?? {};
   return {
     ...(shape
       ? { shape }
-      : { points: radialContour(legacyContours(config), samples) }),
-    eyes: recipe.selections.eyes,
+      : { points: radialContour(legacyContours(geometry), samples) }),
+    eyes: recipe.selections?.eyes ?? 'oval',
+    ...(recipe.eyeSpacing !== undefined
+      ? { eyeSpacing: recipe.eyeSpacing }
+      : {}),
     ...(eyewear || accessory
       ? {
           selections: {
@@ -118,6 +146,6 @@ export function legacyRecipe(
           },
         }
       : {}),
-    patch: { bodyColor: recipe.bodyColor },
+    patch: { bodyColor: recipe.bodyColor ?? avatarHex(config) },
   };
 }

package/src/agent-creator/AgentCreatorBase.tsx

@@ -1,15 +1,19 @@
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { AgentAvatar, type AvatarConfig } from '../agent-avatar';
+import {
+  CHARACTER_SHAPES,
+  NATIVE_CHARACTER_SHAPES,
+  createConfigForShape,
+  currentCharacterShape,
+  materializeCharacter,
+} from '../agent-avatar/character-shapes';
 import type { AvatarCharacterCategory } from '../agent-avatar/config-character';
 import {
   CharacterRuntimeContext,
   CharacterCapabilitiesContext,
 } from '../agent-avatar/context';
-import {
-  legacyCharacterRecipe,
-  legacyNativeShape,
-} from '../agent-avatar/legacy-recipe';
+import { legacyCharacterRecipe } from '../agent-avatar/legacy-recipe';
 import { Button } from '../button/Button';
 import { CloseButton } from '../button/CloseButton';
 import { useDirectionProps } from '../hooks/use-is-rtl';
@@ -56,58 +60,86 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
   );
   const { runtimeUrl } = runtime;
   const beta = Boolean(c.character && c.character.preset !== 'bloom');
-  const nativeShape = legacyNativeShape(c);
   const key = JSON.stringify(beta ? c.character : legacyCharacterRecipe(c));
-  const capabilities =
+  const currentCapabilities =
     catalog.capabilitiesByKey?.get(key) ??
     (catalog.capabilities?.key === key ? catalog.capabilities : undefined);
+  const retained = useRef<{ owner: string; selected: Record<string, string> }>({
+    owner: '',
+    selected: {},
+  });
+  const owner = JSON.stringify([agent.id, c.character?.preset ?? 'bloom']);
+  if (retained.current.owner !== owner)
+    retained.current = { owner, selected: {} };
+  if (currentCapabilities)
+    retained.current.selected = currentCapabilities.selected;
+  const capabilities = currentCapabilities ?? {
+    selected: retained.current.selected,
+    available: {},
+  };
   const betaColor =
-    capabilities?.selected.color ?? c.character?.selections?.color;
+    c.character?.selections?.color ?? capabilities?.selected.color;
+  const betaBodyColor =
+    c.character?.bodyColor ??
+    (c.character?.preset === 'clippo' && !c.character.selections?.color
+      ? '#999b9d'
+      : undefined) ??
+    (!betaColor ? capabilities?.selected.bodyColor : undefined);
   const customColorValue = beta
-    ? (c.character?.bodyColor ??
+    ? (betaBodyColor ??
+      (c.character?.selections?.color
+        ? CHARACTER_COLORS[
+            c.character.selections.color as keyof typeof CHARACTER_COLORS
+          ]
+        : undefined) ??
+      capabilities?.selected.bodyColor ??
       CHARACTER_COLORS[betaColor as keyof typeof CHARACTER_COLORS] ??
       avatarHex(c))
-    : (c.character?.bodyColor ?? avatarHex(c));
+    : (c.character?.bodyColor ??
+      CHARACTER_COLORS[
+        c.character?.selections?.color as keyof typeof CHARACTER_COLORS
+      ] ??
+      avatarHex(c));
   const selectedEyes =
-    capabilities?.selected.eyes ?? c.character?.selections?.eyes ?? 'oval';
+    c.character?.selections?.eyes ??
+    capabilities?.selected.eyes ??
+    (c.character?.preset === 'clippo'
+      ? 'clippo'
+      : c.character?.preset === 'lime_frog'
+        ? 'todd'
+        : 'oval');
+  const selectedEyewear =
+    c.character?.selections?.eyewear ?? capabilities?.selected.eyewear;
+  const selectedAccessory =
+    c.character?.selections?.accessory ?? capabilities?.selected.accessory;
+  const selectedParts = {
+    ...(c.character?.selections?.eyes ||
+    capabilities.selected.eyes ||
+    c.character?.preset === 'clippo' ||
+    c.character?.preset === 'lime_frog'
+      ? { eyes: selectedEyes }
+      : {}),
+    ...(selectedEyewear ? { eyewear: selectedEyewear } : {}),
+    ...(selectedAccessory ? { accessory: selectedAccessory } : {}),
+  };
   const characterConfig = (
     category: AvatarCharacterCategory,
     id: string,
   ): AvatarConfig => {
-    if (
-      !beta &&
-      (category === 'eyes' ||
-        category === 'eyewear' ||
-        category === 'accessory')
-    )
-      return {
-        ...c,
-        character: {
-          ...c.character,
-          preset: 'bloom',
-          selections: { ...c.character?.selections, [category]: id },
-        },
-      };
-    const character = beta
-      ? c.character!
-      : {
-          preset: 'blue_beret',
-          bodyColor: customColorValue,
-          selections: {
-            eyewear:
-              c.character?.selections?.eyewear ??
-              capabilities?.selected.eyewear ??
-              'none',
-            accessory:
-              c.character?.selections?.accessory ??
-              capabilities?.selected.accessory ??
-              'none',
-            eyes: selectedEyes,
-          },
-        };
-    const selections = { ...character.selections, [category]: id };
-    if (category === 'shape') delete selections.eyes;
-    const next = { ...character, selections };
+    if (category === 'shape')
+      return createConfigForShape(c, id, capabilities.selected);
+    const character = materializeCharacter(c, capabilities.selected);
+    // Choosing a body retains the edited face and the preset's effective parts.
+    // Presets supply defaults; their catalog restrictions do not own edits.
+    const selections = {
+      ...selectedParts,
+      ...character.selections,
+      [category]: id,
+    };
+    const next = {
+      ...character,
+      selections,
+    };
     if (category === 'color') delete next.bodyColor;
     return { ...c, character: next };
   };
@@ -117,103 +149,37 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
     ? runtimeUrl.slice(0, runtimeUrl.lastIndexOf('/') + 1)
     : '';
   const eyeBackground = customColorValue;
-  const migratedShapes = [
-    ...(['slender', 'pocket', 'petal', 'star', 'cloud', 'shield'] as const).map(
-      (shape) => ({
-        family: 'fold' as const,
-        shape,
-        title: messages.shapes[shape],
-      }),
-    ),
-    ...(
-      [
-        ['pebble', 'Pebble'],
-        ['squircle', 'Squircle'],
-      ] as const
-    ).map(([shape, title]) => ({
-      family: 'blob' as const,
-      shape,
-      title: messages.characterOption('shape', shape, title),
-    })),
-  ];
-  const migratedConfig = (
-    family: 'fold' | 'blob',
-    shape: string,
-  ): AvatarConfig => {
-    const { character: _character, ...existing } = c;
-    const color = hexAppearance(customColorValue);
-    return {
-      ...existing,
-      ...color,
-      lightEyes: beta ? false : c.lightEyes,
-      family,
-      ...(family === 'fold'
-        ? { foldShape: shape as AvatarConfig['foldShape'] }
-        : { shape: shape as AvatarConfig['shape'] }),
-      ...(runtimeUrl
-        ? {
-            character: {
-              preset: 'bloom',
-              selections: {
-                eyes: selectedEyes,
-                ...((capabilities?.selected.eyewear ??
-                c.character?.selections?.eyewear)
-                  ? {
-                      eyewear:
-                        capabilities?.selected.eyewear ??
-                        c.character?.selections?.eyewear,
-                    }
-                  : {}),
-                ...((capabilities?.selected.accessory ??
-                c.character?.selections?.accessory)
-                  ? {
-                      accessory:
-                        capabilities?.selected.accessory ??
-                        c.character?.selections?.accessory,
-                    }
-                  : {}),
-              },
-            },
-          }
-        : {}),
-    };
-  };
   const shapeChoices = runtimeUrl
-    ? [
-        ...CHARACTER_OPTIONS.shape.map(([id, title]) => ({
-          id,
-          label: messages.characterOption('shape', id, title),
-          config: characterConfig('shape', id),
-          thumbnail: `${thumbnailBase}thumbnails/shapes/${id}.png`,
-        })),
-        ...migratedShapes.map(({ family, shape, title }) => ({
-          id: `legacy:${family}:${shape}`,
-          label: title,
-          config: migratedConfig(family, shape),
-        })),
-      ]
+    ? CHARACTER_SHAPES.map(([id, title]) => ({
+        id,
+        label:
+          id in messages.shapes
+            ? messages.shapes[id as keyof typeof messages.shapes]
+            : messages.characterOption('shape', id, title),
+        config: createConfigForShape(c, id, capabilities.selected),
+        ...(NATIVE_CHARACTER_SHAPES.some(([shape]) => shape === id) &&
+        id !== 'clippo' &&
+        id !== 'todd'
+          ? { thumbnail: `${thumbnailBase}thumbnails/shapes/${id}.png` }
+          : {}),
+      }))
     : undefined;
-  const shapeValue = beta
-    ? (capabilities?.selected.shape ?? c.character?.selections?.shape)
-    : (nativeShape ??
-      `legacy:${c.family}:${c.family === 'fold' ? c.foldShape : c.shape}`);
-  const selectShape = (id: string) => {
-    if (id.startsWith('legacy:')) {
-      const [, family, shape] = id.split(':');
-      onChange({
-        ...agent,
-        avatar: migratedConfig(family as 'fold' | 'blob', shape!),
-      });
-    } else selectCharacter('shape', id);
-  };
+  const shapeValue =
+    c.character?.selections?.shape ??
+    (beta
+      ? (capabilities.selected.shape ??
+        (c.character?.preset === 'clippo' ? 'clippo' : undefined))
+      : currentCharacterShape(c));
+  const selectShape = (id: string) => selectCharacter('shape', id);
   const eyeChoices = runtimeUrl
     ? CHARACTER_OPTIONS.eyes.map(([id, title]) => ({
         id,
         label: messages.characterOption('eyes', id, title),
         config: characterConfig('eyes', id),
-        thumbnail: `${thumbnailBase}thumbnails/eyes/${id}.png`,
-        disabled:
-          !capabilities || capabilities.available[`eyes:${id}`] === false,
+        ...(id === 'clippo' || id === 'cyclops'
+          ? { artwork: id }
+          : { thumbnail: `${thumbnailBase}thumbnails/eyes/${id}.png` }),
+        disabled: false,
       }))
     : undefined;
   const appearance = (patch: Partial<AvatarConfig>) => {
@@ -367,8 +333,15 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
             </StyledView>
           )}
           <CharacterControls
-            character={c.character ?? { preset: 'bloom' }}
+            character={
+              runtimeUrl
+                ? beta
+                  ? c.character
+                  : materializeCharacter(c, capabilities.selected)
+                : c.character
+            }
             capabilitiesKey={key}
+            selected={capabilities.selected}
             onChange={(character) => {
               if (character)
                 onChange({ ...agent, avatar: { ...c, character } });
@@ -386,7 +359,7 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                 boxShadow: '0 1px 2px rgba(0,0,0,.05)',
               }}
             >
-              {!beta &&
+              {!runtimeUrl &&
                 AVATAR_COLORS.map(([hue, saturation, name, center, edge]) => {
                   const active =
                     c.hue === hue &&
@@ -415,15 +388,11 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                     </StyledPressable>
                   );
                 })}
-              {beta &&
+              {runtimeUrl &&
                 CHARACTER_OPTIONS.color.map(([id, title]) => {
-                  const active =
-                    !c.character?.bodyColor &&
-                    capabilities?.selected.color === id;
+                  const active = !betaBodyColor && betaColor === id;
                   const hex = CHARACTER_COLORS[id];
-                  const disabled =
-                    !capabilities ||
-                    capabilities.available[`color:${id}`] === false;
+                  const disabled = false;
                   return (
                     <StyledPressable
                       key={id}
@@ -446,18 +415,18 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                 <PopoverTrigger asChild label={messages.customColor}>
                   <StyledPressable
                     aria-pressed={
-                      beta ? Boolean(c.character?.bodyColor) : undefined
+                      runtimeUrl ? Boolean(betaBodyColor) : undefined
                     }
                     accessibilityState={{
-                      selected: beta && Boolean(c.character?.bodyColor),
+                      selected: Boolean(runtimeUrl) && Boolean(betaBodyColor),
                     }}
                     className="relative size-[26px] shrink-0 overflow-hidden rounded-full"
                   >
                     <GlossArt
-                      rainbow={!beta || !c.character?.bodyColor}
-                      center={beta ? c.character?.bodyColor : undefined}
-                      edge={beta ? c.character?.bodyColor : undefined}
-                      active={beta && Boolean(c.character?.bodyColor)}
+                      rainbow={!runtimeUrl || !betaBodyColor}
+                      center={runtimeUrl ? betaBodyColor : undefined}
+                      edge={runtimeUrl ? betaBodyColor : undefined}
+                      active={Boolean(runtimeUrl) && Boolean(betaBodyColor)}
                     />
                   </StyledPressable>
                 </PopoverTrigger>
@@ -473,14 +442,14 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                     onChange={(hex) => {
                       const next = hexAppearance(hex);
                       if (!next) return;
-                      if (beta)
+                      if (runtimeUrl)
                         onChange({
                           ...agent,
                           avatar: {
                             ...c,
                             ...next,
                             character: {
-                              ...c.character!,
+                              ...materializeCharacter(c, capabilities.selected),
                               bodyColor: hex.toLowerCase(),
                             },
                           },