@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/test/app/character-save-journey.test.ts

@@ -1,1245 +0,0 @@
-/**
- * Character Save Journey Tests
- *
- * Comprehensive tests for character editing, saving, and error handling.
- * Covers:
- * 1. Character loading
- * 2. Field editing
- * 3. Save flow (success, failure, validation, restart, concurrency)
- * 4. Field generation (AI regenerate)
- * 5. Avatar selection
- * 6. Style rules
- * 7. Edge cases
- */
-
-// @vitest-environment jsdom
-import React from "react";
-import TestRenderer, { act } from "react-test-renderer";
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  vi,
-} from "vitest";
-
-// ---------------------------------------------------------------------------
-// Hoisted mocks
-// ---------------------------------------------------------------------------
-
-const { mockUseApp } = vi.hoisted(() => ({
-  mockUseApp: vi.fn(),
-}));
-
-vi.mock("@elizaos/app-core/state", async () => {
-  const actual = await vi.importActual("@elizaos/app-core/state");
-  return {
-    ...actual,
-    useApp: () => mockUseApp(),
-  };
-});
-
-vi.mock("@elizaos/app-core/api", () => ({
-  client: {
-    getCharacter: vi.fn().mockResolvedValue({
-      character: {
-        name: "TestAgent",
-        bio: ["Bio line 1"],
-        system: "System prompt",
-        adjectives: ["friendly"],
-        topics: ["coding", "art"],
-        style: { all: ["Be concise"], chat: ["Be casual"], post: ["Be clear"] },
-      },
-    }),
-    getConfig: vi.fn().mockResolvedValue({
-      messages: {
-        tts: {
-          provider: "elevenlabs",
-          elevenlabs: { voiceId: "EXAVITQu4vr4xnSDxMaL" },
-        },
-      },
-    }),
-    updateConfig: vi.fn().mockResolvedValue({ ok: true }),
-    getOnboardingOptions: vi.fn().mockResolvedValue({
-      styles: [],
-    }),
-    updateCharacter: vi.fn().mockResolvedValue({
-      ok: true,
-      character: {},
-      agentName: "TestAgent",
-    }),
-    generateCharacterField: vi.fn().mockResolvedValue({
-      generated: "Generated text content",
-    }),
-  },
-}));
-
-vi.mock("../../src/components/AvatarSelector", () => ({
-  AvatarSelector: ({
-    value,
-    onChange,
-  }: {
-    value: number;
-    onChange: (v: number) => void;
-  }) =>
-    React.createElement(
-      "div",
-      { "data-testid": "avatar-selector" },
-      React.createElement(
-        "button",
-        { type: "button", onClick: () => onChange(value === 2 ? 3 : 2) },
-        `Avatar ${value}`,
-      ),
-    ),
-}));
-
-vi.mock("@elizaos/app-core/config", () => ({
-  ConfigRenderer: () => React.createElement("div", null, "ConfigRenderer"),
-  defaultRegistry: {},
-}));
-
-import { client } from "@elizaos/app-core/api";
-import { CharacterView } from "../../src/components/CharacterView";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type CharacterData = {
-  name: string;
-  username?: string;
-  bio: string | string[];
-  system: string;
-  adjectives: string[];
-  topics?: string[];
-  style: { all: string[]; chat: string[]; post: string[] };
-  messageExamples?: Array<{
-    examples: Array<{ name: string; content: { text: string } }>;
-  }>;
-  postExamples?: string[];
-};
-
-type CharacterState = {
-  tab: "character" | "character-select" | "companion" | "chat";
-  characterLoading: boolean;
-  characterData: CharacterData | null;
-  characterDraft: CharacterData | null;
-  characterSaving: boolean;
-  characterDirty: boolean;
-  characterSaveSuccess: string | null;
-  characterSaveError: string | null;
-  selectedVrmIndex: number;
-  onboardingOptions: {
-    styles: Array<{
-      catchphrase: string;
-      hint: string;
-      bio: string[];
-      system: string;
-      adjectives: string[];
-      style: { all: string[]; chat: string[]; post: string[] };
-      postExamples: string[];
-      messageExamples: Array<
-        Array<{ user: string; content: { text: string } }>
-      >;
-    }>;
-  } | null;
-  registryStatus: null;
-  registryLoading: boolean;
-  registryRegistering: boolean;
-  registryError: string | null;
-  dropStatus: null;
-  mintInProgress: boolean;
-  mintResult: null;
-};
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function createDefaultCharData(): CharacterData {
-  return {
-    name: "TestAgent",
-    username: "TestAgent",
-    bio: ["Bio line 1"],
-    system: "System prompt",
-    adjectives: ["friendly"],
-    topics: ["coding", "art"],
-    style: { all: ["Be concise"], chat: ["Be casual"], post: ["Be clear"] },
-    messageExamples: [
-      {
-        examples: [
-          { name: "{{user1}}", content: { text: "hi" } },
-          { name: "TestAgent", content: { text: "Hello!" } },
-        ],
-      },
-    ],
-    postExamples: ["Example post"],
-  };
-}
-
-function createState(overrides?: Partial<CharacterState>): CharacterState {
-  const charData = createDefaultCharData();
-  return {
-    tab: "character-select",
-    characterLoading: false,
-    characterData: charData,
-    characterDraft: { ...charData },
-    characterSaving: false,
-    characterDirty: false,
-    characterSaveSuccess: null,
-    characterSaveError: null,
-    selectedVrmIndex: 2,
-    onboardingOptions: {
-      styles: [
-        {
-          catchphrase: "uwu~",
-          hint: "warm & caring",
-          bio: ["{{name}} is soft and friendly"],
-          system: "You are {{name}}",
-          adjectives: ["friendly", "helpful"],
-          style: { all: ["Rule 1"], chat: ["Chat rule"], post: ["Post rule"] },
-          postExamples: [],
-          messageExamples: [
-            [
-              { user: "{{user1}}", content: { text: "hi" } },
-              { user: "{{agentName}}", content: { text: "hey" } },
-            ],
-          ],
-        },
-      ],
-    },
-    registryStatus: null,
-    registryLoading: false,
-    registryRegistering: false,
-    registryError: null,
-    dropStatus: null,
-    mintInProgress: false,
-    mintResult: null,
-    ...overrides,
-  };
-}
-
-function prepareCharacterDraftForSave(draft: CharacterData) {
-  const prepared: Record<string, unknown> = { ...draft };
-
-  if (typeof prepared.bio === "string") {
-    const lines = (prepared.bio as string)
-      .split("\n")
-      .map((line) => line.trim())
-      .filter((line) => line.length > 0);
-    prepared.bio = lines.length > 0 ? lines : undefined;
-  }
-
-  if (Array.isArray(prepared.adjectives) && (prepared.adjectives as string[]).length === 0) {
-    delete prepared.adjectives;
-  }
-  if (Array.isArray(prepared.postExamples) && (prepared.postExamples as string[]).length === 0) {
-    delete prepared.postExamples;
-  }
-  if (Array.isArray(prepared.messageExamples) && (prepared.messageExamples as unknown[]).length === 0) {
-    delete prepared.messageExamples;
-  }
-
-  if (prepared.style && typeof prepared.style === "object") {
-    const style = prepared.style as Record<string, string[] | undefined>;
-    if (style.all && style.all.length === 0) delete style.all;
-    if (style.chat && style.chat.length === 0) delete style.chat;
-    if (style.post && style.post.length === 0) delete style.post;
-    if (!style.all && !style.chat && !style.post) delete prepared.style;
-  }
-
-  if (typeof prepared.username === "string" && (prepared.username as string).trim().length > 0) {
-    prepared.username = (prepared.username as string).trim();
-  } else if (typeof prepared.name === "string" && (prepared.name as string).trim().length > 0) {
-    prepared.username = (prepared.name as string).trim();
-  }
-  if (!prepared.name) delete prepared.name;
-  if (!prepared.username) delete prepared.username;
-  if (!prepared.system) delete prepared.system;
-
-  return prepared;
-}
-
-function setupMockUseApp(
-  state: CharacterState,
-  opts: {
-    handleSaveCharacter?: () => Promise<void>;
-    handleCharacterFieldInput?: (field: string, value: unknown) => void;
-  } = {},
-) {
-  const saveCharacterCalled = { value: false };
-
-  mockUseApp.mockReset();
-  mockUseApp.mockImplementation(() => ({
-    uiLanguage: "en",
-    t: (k: string) => k,
-    ...state,
-    setTab: vi.fn((tab: CharacterState["tab"]) => {
-      state.tab = tab;
-    }),
-    loadCharacter: vi.fn(),
-    loadRegistryStatus: vi.fn(),
-    loadDropStatus: vi.fn(),
-    handleSaveCharacter:
-      opts.handleSaveCharacter ??
-      (async () => {
-        saveCharacterCalled.value = true;
-        state.characterSaving = false;
-        state.characterDirty = false;
-      }),
-    handleCharacterFieldInput:
-      opts.handleCharacterFieldInput ??
-      ((field: string, value: unknown) => {
-        if (state.characterDraft) {
-          (state.characterDraft as Record<string, unknown>)[field] = value;
-          state.characterDirty = true;
-        }
-      }),
-    handleCharacterArrayInput: vi.fn(),
-    handleCharacterStyleInput: vi.fn(),
-    setState: vi.fn((key: string, value: unknown) => {
-      (state as Record<string, unknown>)[key] = value;
-    }),
-  }));
-
-  return saveCharacterCalled;
-}
-
-async function renderCharacterView(
-  props?: Record<string, unknown>,
-): Promise<TestRenderer.ReactTestRenderer> {
-  let tree: TestRenderer.ReactTestRenderer | null = null;
-  await act(async () => {
-    tree = TestRenderer.create(
-      React.createElement(CharacterView, props),
-    );
-  });
-  return tree!;
-}
-
-function findSaveButton(tree: TestRenderer.ReactTestRenderer) {
-  return tree.root.find(
-    (node) =>
-      node.type === "button" &&
-      node.children.some(
-        (child) => typeof child === "string" && child === "Save Character",
-      ),
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("Character Save Journey", () => {
-  afterEach(() => {
-    vi.mocked(client.updateCharacter).mockClear();
-    vi.mocked(client.updateConfig).mockClear();
-    vi.mocked(client.generateCharacterField).mockClear();
-  });
-
-  // =========================================================================
-  // 1. Character Loading
-  // =========================================================================
-
-  describe("Character Loading", () => {
-    it("calls loadCharacter on mount", async () => {
-      const state = createState();
-      setupMockUseApp(state);
-      await renderCharacterView();
-
-      const appHook = mockUseApp();
-      expect(appHook.loadCharacter).toBeDefined();
-    });
-
-    it("populates character fields correctly from state (name, bio, system, adjectives, topics)", async () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      expect(state.characterData?.name).toBe("TestAgent");
-      expect(state.characterData?.bio).toEqual(["Bio line 1"]);
-      expect(state.characterData?.system).toBe("System prompt");
-      expect(state.characterData?.adjectives).toEqual(["friendly"]);
-      expect(state.characterData?.topics).toEqual(["coding", "art"]);
-    });
-
-    it("shows loading state when characterLoading is true (draft still present)", async () => {
-      const state = createState({
-        characterLoading: true,
-      });
-      setupMockUseApp(state);
-
-      const tree = await renderCharacterView();
-      expect(tree).not.toBeNull();
-      const json = tree.toJSON();
-      expect(json).not.toBeNull();
-    });
-
-    it("renders safely when characterDraft is null", async () => {
-      const state = createState({
-        characterLoading: false,
-        characterData: null,
-        characterDraft: null,
-      });
-      setupMockUseApp(state);
-
-      // Previously crashed with TypeError on d.bio — fixed with null fallback.
-      const tree = await renderCharacterView();
-      expect(tree).not.toBeNull();
-    });
-
-    it("handles error state with draft still available", async () => {
-      const state = createState({
-        characterLoading: false,
-        characterSaveError: "Failed to load character data",
-      });
-      setupMockUseApp(state);
-
-      const tree = await renderCharacterView();
-      expect(tree).not.toBeNull();
-    });
-
-    it("draft is initialized from characterData", async () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      expect(state.characterDraft).not.toBeNull();
-      expect(state.characterDraft?.name).toBe(state.characterData?.name);
-      expect(state.characterDraft?.bio).toEqual(state.characterData?.bio);
-      expect(state.characterDraft?.system).toBe(state.characterData?.system);
-    });
-  });
-
-  // =========================================================================
-  // 2. Field Editing
-  // =========================================================================
-
-  describe("Field Editing", () => {
-    it("editing name updates local draft state", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput("name", "NewName");
-
-      expect(state.characterDraft?.name).toBe("NewName");
-    });
-
-    it("editing bio updates local draft state", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput("bio", "A new biography for the agent");
-
-      expect(state.characterDraft?.bio).toBe(
-        "A new biography for the agent",
-      );
-    });
-
-    it("editing system prompt updates local draft state", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput(
-        "system",
-        "You are a coding assistant.",
-      );
-
-      expect(state.characterDraft?.system).toBe(
-        "You are a coding assistant.",
-      );
-    });
-
-    it("field edits mark the form as dirty", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      expect(state.characterDirty).toBe(false);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput("name", "DirtyName");
-
-      expect(state.characterDirty).toBe(true);
-    });
-
-    it("editing adjectives updates local draft state", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput("adjectives", [
-        "creative",
-        "analytical",
-      ]);
-
-      expect(state.characterDraft?.adjectives).toEqual([
-        "creative",
-        "analytical",
-      ]);
-    });
-
-    it("editing topics updates local draft state", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput("topics", ["music", "gaming"]);
-
-      expect(state.characterDraft?.topics).toEqual(["music", "gaming"]);
-    });
-  });
-
-  // =========================================================================
-  // 3. Save Flow
-  // =========================================================================
-
-  describe("Save Flow", () => {
-    it("save button calls updateCharacter API with correct payload", async () => {
-      const state = createState();
-      const saveCharacterCalled = { value: false };
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          saveCharacterCalled.value = true;
-          const characterDraft = state.characterDraft;
-          if (!characterDraft) throw new Error("No draft");
-          const prepared = prepareCharacterDraftForSave(characterDraft);
-          await client.updateCharacter(prepared as unknown as CharacterData);
-          await client.updateConfig({ ui: { avatarIndex: state.selectedVrmIndex } });
-          state.characterSaving = false;
-          state.characterDirty = false;
-          state.characterSaveSuccess = "Character saved successfully.";
-        },
-      });
-
-      vi.mocked(client.updateCharacter).mockResolvedValue({
-        ok: true,
-        character: {} as CharacterData,
-        agentName: "TestAgent",
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(saveCharacterCalled.value).toBe(true);
-      expect(client.updateCharacter).toHaveBeenCalledTimes(1);
-      const payload = vi.mocked(client.updateCharacter).mock.calls[0]![0];
-      expect(payload.name).toBe("TestAgent");
-      expect(payload.username).toBe("TestAgent");
-    });
-
-    it("save success shows success feedback", async () => {
-      const state = createState();
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          state.characterSaving = false;
-          state.characterDirty = false;
-          state.characterSaveSuccess = "Character saved successfully.";
-        },
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(state.characterSaveSuccess).toBe("Character saved successfully.");
-    });
-
-    it("save success redirects to the companion chat UI", async () => {
-      const state = createState();
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          state.characterSaving = false;
-          state.characterDirty = false;
-          state.characterSaveSuccess = "Character saved successfully.";
-        },
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(state.tab).toBe("companion");
-    });
-
-    it("save failure shows error message", async () => {
-      const state = createState();
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          state.characterSaving = false;
-          state.characterSaveError = "Network error: failed to save.";
-          throw new Error("Network error");
-        },
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        try {
-          saveButton?.props.onClick();
-        } catch {
-          // expected
-        }
-      });
-
-      expect(state.characterSaveError).toBe("Network error: failed to save.");
-    });
-
-    it("save with empty name shows validation error and does not call API", async () => {
-      const state = createState();
-      const saveCharacterCalled = { value: false };
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          saveCharacterCalled.value = true;
-        },
-      });
-
-      state.characterDraft = {
-        ...createDefaultCharData(),
-        name: "",
-        username: "",
-      };
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      // handleSaveAll in CharacterView checks for empty name before calling handleSaveCharacter
-      expect(saveCharacterCalled.value).toBe(false);
-      expect(client.updateCharacter).not.toHaveBeenCalled();
-      expect(state.characterSaveError).toBe(
-        "Character name is required before saving.",
-      );
-    });
-
-    it("save with whitespace-only name shows validation error", async () => {
-      const state = createState();
-      const saveCharacterCalled = { value: false };
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          saveCharacterCalled.value = true;
-        },
-      });
-
-      state.characterDraft = {
-        ...createDefaultCharData(),
-        name: "   ",
-        username: "   ",
-      };
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(saveCharacterCalled.value).toBe(false);
-      expect(state.characterSaveError).toBe(
-        "Character name is required before saving.",
-      );
-    });
-
-    it("save triggers agent restart when backend returns agentName", async () => {
-      const state = createState();
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          const characterDraft = state.characterDraft;
-          if (!characterDraft) throw new Error("No draft");
-          const prepared = prepareCharacterDraftForSave(characterDraft);
-          const { agentName } = await client.updateCharacter(
-            prepared as unknown as CharacterData,
-          );
-          state.characterSaving = false;
-          state.characterDirty = false;
-          state.characterSaveSuccess = "Character saved successfully.";
-          if (agentName) {
-            state.characterData = {
-              ...createDefaultCharData(),
-              ...(prepared as CharacterData),
-              name: agentName,
-            };
-          }
-        },
-      });
-
-      vi.mocked(client.updateCharacter).mockResolvedValue({
-        ok: true,
-        character: {} as CharacterData,
-        agentName: "RenamedAgent",
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(state.characterData?.name).toBe("RenamedAgent");
-    });
-
-    it("save clears dirty flag on success", async () => {
-      const state = createState({ characterDirty: true });
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          state.characterSaving = false;
-          state.characterDirty = false;
-          state.characterSaveSuccess = "Character saved successfully.";
-        },
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      expect(state.characterDirty).toBe(true);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(state.characterDirty).toBe(false);
-    });
-
-    it("concurrent saves are prevented — second save does not double-fire API", async () => {
-      const state = createState();
-      let saveCallCount = 0;
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          saveCallCount++;
-          state.characterSaving = true;
-          await new Promise((r) => setTimeout(r, 50));
-          state.characterSaving = false;
-          state.characterDirty = false;
-        },
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      // Fire two saves rapidly
-      await act(async () => {
-        saveButton?.props.onClick();
-        saveButton?.props.onClick();
-      });
-
-      // The component's handleSaveAll validates name first, so it may proceed twice,
-      // but the underlying save should be controlled. At minimum, verify calls happened.
-      expect(saveCallCount).toBeGreaterThanOrEqual(1);
-    });
-  });
-
-  // =========================================================================
-  // 4. Field Generation (AI regenerate)
-  // =========================================================================
-
-  describe("Field Generation", () => {
-    it("generateCharacterField API is called with correct field name for bio", async () => {
-      vi.mocked(client.generateCharacterField).mockResolvedValue({
-        generated: "A brand new bio for the agent.",
-      });
-
-      const result = await client.generateCharacterField("bio", {
-        name: "TestAgent",
-        system: "System prompt",
-        bio: "Bio line 1",
-      });
-
-      expect(client.generateCharacterField).toHaveBeenCalledWith(
-        "bio",
-        expect.objectContaining({ name: "TestAgent" }),
-      );
-      expect(result.generated).toBe("A brand new bio for the agent.");
-    });
-
-    it("generateCharacterField API is called with correct field name for system", async () => {
-      vi.mocked(client.generateCharacterField).mockResolvedValue({
-        generated: "You are a specialized assistant.",
-      });
-
-      const result = await client.generateCharacterField("system", {
-        name: "TestAgent",
-        bio: "Bio line 1",
-      });
-
-      expect(client.generateCharacterField).toHaveBeenCalledWith(
-        "system",
-        expect.objectContaining({ name: "TestAgent" }),
-      );
-      expect(result.generated).toBe("You are a specialized assistant.");
-    });
-
-    it("generation error returns rejected promise", async () => {
-      vi.mocked(client.generateCharacterField).mockRejectedValue(
-        new Error("AI service unavailable"),
-      );
-
-      await expect(
-        client.generateCharacterField("bio", { name: "TestAgent" }),
-      ).rejects.toThrow("AI service unavailable");
-    });
-
-    it("generated bio text replaces the field value in draft", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput("bio", "Generated bio text");
-
-      expect(state.characterDraft?.bio).toBe("Generated bio text");
-      expect(state.characterDirty).toBe(true);
-    });
-
-    it("generated system text replaces the field value in draft", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.handleCharacterFieldInput(
-        "system",
-        "Generated system prompt",
-      );
-
-      expect(state.characterDraft?.system).toBe("Generated system prompt");
-    });
-  });
-
-  // =========================================================================
-  // 5. Avatar Selection
-  // =========================================================================
-
-  describe("Avatar Selection", () => {
-    it("selectedVrmIndex is part of the state", () => {
-      const state = createState({ selectedVrmIndex: 3 });
-      expect(state.selectedVrmIndex).toBe(3);
-    });
-
-    it("changing selectedVrmIndex updates state via setState", () => {
-      const state = createState({ selectedVrmIndex: 1 });
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      appHook.setState("selectedVrmIndex", 4);
-
-      expect(state.selectedVrmIndex).toBe(4);
-    });
-
-    it("avatar change is included in save payload via updateConfig", async () => {
-      const state = createState({ selectedVrmIndex: 5 });
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          const characterDraft = state.characterDraft;
-          if (!characterDraft) throw new Error("No draft");
-          const prepared = prepareCharacterDraftForSave(characterDraft);
-          await client.updateCharacter(prepared as unknown as CharacterData);
-          await client.updateConfig({ ui: { avatarIndex: state.selectedVrmIndex } });
-          state.characterSaving = false;
-          state.characterDirty = false;
-        },
-      });
-
-      vi.mocked(client.updateCharacter).mockResolvedValue({
-        ok: true,
-        character: {} as CharacterData,
-        agentName: "TestAgent",
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      expect(client.updateConfig).toHaveBeenCalledWith(
-        expect.objectContaining({
-          ui: { avatarIndex: 5 },
-        }),
-      );
-    });
-  });
-
-  // =========================================================================
-  // 6. Style Rules
-  // =========================================================================
-
-  describe("Style Rules", () => {
-    it("style rules load from character data", () => {
-      const state = createState();
-      expect(state.characterDraft?.style).toEqual({
-        all: ["Be concise"],
-        chat: ["Be casual"],
-        post: ["Be clear"],
-      });
-    });
-
-    it("editing style rules updates local state via handleCharacterStyleInput", () => {
-      const state = createState();
-      setupMockUseApp(state);
-
-      const appHook = mockUseApp();
-      // handleCharacterStyleInput is mocked as vi.fn(); verify it exists
-      expect(appHook.handleCharacterStyleInput).toBeDefined();
-      appHook.handleCharacterStyleInput("all", "New all rule\nSecond all rule");
-      expect(appHook.handleCharacterStyleInput).toHaveBeenCalledWith(
-        "all",
-        "New all rule\nSecond all rule",
-      );
-    });
-
-    it("style rules are included in save payload", async () => {
-      const state = createState();
-      state.characterDraft = {
-        ...createDefaultCharData(),
-        style: {
-          all: ["Custom all rule"],
-          chat: ["Custom chat rule"],
-          post: ["Custom post rule"],
-        },
-      };
-
-      setupMockUseApp(state, {
-        handleSaveCharacter: async () => {
-          const characterDraft = state.characterDraft;
-          if (!characterDraft) throw new Error("No draft");
-          const prepared = prepareCharacterDraftForSave(characterDraft);
-          await client.updateCharacter(prepared as unknown as CharacterData);
-          state.characterSaving = false;
-          state.characterDirty = false;
-        },
-      });
-
-      vi.mocked(client.updateCharacter).mockResolvedValue({
-        ok: true,
-        character: {} as CharacterData,
-        agentName: "TestAgent",
-      });
-
-      const tree = await renderCharacterView();
-      const saveButton = findSaveButton(tree);
-
-      await act(async () => {
-        saveButton?.props.onClick();
-      });
-
-      const payload = vi.mocked(client.updateCharacter).mock.calls[0]![0];
-      expect(payload.style).toEqual({
-        all: ["Custom all rule"],
-        chat: ["Custom chat rule"],
-        post: ["Custom post rule"],
-      });
-    });
-
-    it("empty style categories are stripped from save payload", () => {
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: ["friendly"],
-        style: { all: ["Keep going"], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-      const style = prepared.style as Record<string, string[]> | undefined;
-
-      expect(style?.all).toEqual(["Keep going"]);
-      expect(style?.chat).toBeUndefined();
-      expect(style?.post).toBeUndefined();
-    });
-
-    it("all-empty style is fully stripped from save payload", () => {
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: ["friendly"],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.style).toBeUndefined();
-    });
-
-    it("shows style sections when navigating to the styleRules sidebar tab", async () => {
-      const state = createState({ tab: "character" });
-      setupMockUseApp(state);
-
-      const tree = await renderCharacterView();
-
-      // Need to re-render to get notebook mode
-      await act(async () => {
-        tree.update(React.createElement(CharacterView));
-      });
-
-      const styleTab = tree.root.findAll(
-        (node) =>
-          node.props["data-testid"] === "notebook-tab-styleRules" &&
-          typeof node.props.onClick === "function",
-      );
-
-      if (styleTab.length > 0) {
-        await act(async () => {
-          styleTab[0]!.props.onClick();
-        });
-
-        const styleSections = tree.root.findAll(
-          (node) =>
-            node.props["data-testid"] === "style-section-all" ||
-            node.props["data-testid"] === "style-section-chat" ||
-            node.props["data-testid"] === "style-section-post",
-        );
-        expect(styleSections).toHaveLength(3);
-      }
-    });
-  });
-
-  // =========================================================================
-  // 7. Edge Cases
-  // =========================================================================
-
-  describe("Edge Cases", () => {
-    it("special characters in name (unicode) save correctly", () => {
-      const draft: CharacterData = {
-        name: "Sakura \u2728\u{1F338}",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: ["friendly"],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.name).toBe("Sakura \u2728\u{1F338}");
-      expect(prepared.username).toBe("Sakura \u2728\u{1F338}");
-    });
-
-    it("emoji in name is preserved through save preparation", () => {
-      const draft: CharacterData = {
-        name: "\u{1F916} RoboAgent",
-        bio: ["I am a robot"],
-        system: "You are a robot assistant",
-        adjectives: ["robotic"],
-        style: { all: ["Be mechanical"], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.name).toBe("\u{1F916} RoboAgent");
-    });
-
-    it("very long bio text saves correctly", () => {
-      const longBio = "A".repeat(10_000);
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: longBio,
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(Array.isArray(prepared.bio)).toBe(true);
-      expect((prepared.bio as string[])[0]).toBe(longBio);
-    });
-
-    it("multiline bio text is split into array on save", () => {
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: "Line one\nLine two\n\nLine three",
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.bio).toEqual(["Line one", "Line two", "Line three"]);
-    });
-
-    it("empty fields save as empty or are stripped — not undefined for required fields", () => {
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: "",
-        system: "",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      // Empty bio string -> split -> no lines -> becomes undefined
-      expect(prepared.bio).toBeUndefined();
-      // Empty system -> falsy -> deleted
-      expect(prepared.system).toBeUndefined();
-      // Empty adjectives -> deleted
-      expect(prepared.adjectives).toBeUndefined();
-      // Empty style -> all subkeys empty -> fully deleted
-      expect(prepared.style).toBeUndefined();
-      // Name stays
-      expect(prepared.name).toBe("TestAgent");
-    });
-
-    it("bio array stays as-is (no re-splitting) when already an array", () => {
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: ["Already", "An", "Array"],
-        system: "System",
-        adjectives: ["helpful"],
-        style: { all: ["Rule"], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      // When bio is already an array it is not processed through the string split path
-      expect(prepared.bio).toEqual(["Already", "An", "Array"]);
-    });
-
-    it("username falls back to name when username is empty", () => {
-      const draft: CharacterData = {
-        name: "FallbackName",
-        username: "",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.username).toBe("FallbackName");
-    });
-
-    it("username is preserved when explicitly set", () => {
-      const draft: CharacterData = {
-        name: "DisplayName",
-        username: "handle_123",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.username).toBe("handle_123");
-      expect(prepared.name).toBe("DisplayName");
-    });
-
-    it("empty messageExamples and postExamples are stripped", () => {
-      const draft: CharacterData = {
-        name: "TestAgent",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: ["friendly"],
-        style: { all: ["Rule"], chat: [], post: [] },
-        messageExamples: [],
-        postExamples: [],
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.messageExamples).toBeUndefined();
-      expect(prepared.postExamples).toBeUndefined();
-    });
-
-    it("draft with no name and no username strips both fields", () => {
-      const draft: CharacterData = {
-        name: "",
-        username: "",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.name).toBeUndefined();
-      expect(prepared.username).toBeUndefined();
-    });
-  });
-
-  // =========================================================================
-  // 8. Save Payload Preparation (prepareCharacterDraftForSave)
-  // =========================================================================
-
-  describe("Save Payload Preparation", () => {
-    it("trims whitespace from bio lines", () => {
-      const draft: CharacterData = {
-        name: "Agent",
-        bio: "  First line  \n\n  Second line  ",
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.bio).toEqual(["First line", "Second line"]);
-    });
-
-    it("trims whitespace from username", () => {
-      const draft: CharacterData = {
-        name: "Agent",
-        username: "  spacedUsername  ",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.username).toBe("spacedUsername");
-    });
-
-    it("preserves non-empty adjectives", () => {
-      const draft: CharacterData = {
-        name: "Agent",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: ["witty", "calm"],
-        style: { all: [], chat: [], post: [] },
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.adjectives).toEqual(["witty", "calm"]);
-    });
-
-    it("preserves non-empty messageExamples", () => {
-      const examples = [
-        {
-          examples: [
-            { name: "user", content: { text: "hi" } },
-            { name: "agent", content: { text: "hello" } },
-          ],
-        },
-      ];
-      const draft: CharacterData = {
-        name: "Agent",
-        bio: ["Bio"],
-        system: "System",
-        adjectives: [],
-        style: { all: [], chat: [], post: [] },
-        messageExamples: examples,
-      };
-      const prepared = prepareCharacterDraftForSave(draft);
-
-      expect(prepared.messageExamples).toEqual(examples);
-    });
-  });
-});