feat(chat): sync multi-role backend APIs

src/providers/character-route-boundary.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { type ReactNode, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import type { CharacterProfile } from "@/data/constants/character";
+import { getCharacterRoutes } from "@/router/routes";
+
+import { useCharacterCatalog } from "./character-catalog-provider";
+import { CharacterProvider } from "./character-provider";
+
+export function CharacterRouteBoundary({
+  character,
+  children,
+}: {
+  character: CharacterProfile;
+  children: ReactNode;
+}) {
+  const catalog = useCharacterCatalog();
+  const router = useRouter();
+  const activeCharacter = catalog.getById(character.id);
+
+  useEffect(() => {
+    if (catalog.status === "loading" || activeCharacter) return;
+    router.replace(getCharacterRoutes(catalog.defaultCharacter.slug).splash);
+  }, [activeCharacter, catalog.defaultCharacter.slug, catalog.status, router]);
+
+  if (catalog.status === "loading" || !activeCharacter) {
+    return (
+      <div
+        className="flex min-h-dvh flex-1 items-center justify-center bg-[#fbf1f2]"
+        aria-label="Loading character"
+        role="status"
+      >
+        <div className="size-9 animate-spin rounded-full border-4 border-[#f657a0] border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <CharacterProvider character={activeCharacter}>
+      {children}
+    </CharacterProvider>
+  );
+}