@tomako/tools-runtime 0.1.0

package/src/features/tools/social-profile-kit/widget/social-profile-kit-generator.tsx

@@ -0,0 +1,1059 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@tomako/ui/dropdown-menu";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { downloadBlob } from "../../../../lib/file/download";
+import {
+    SOCIAL_PROFILE_PLATFORM_SPECS,
+    SOCIAL_PROFILE_PLATFORMS,
+    SOCIAL_PROFILE_V1_PLATFORMS,
+} from "../../../../lib/tools/social-profile-kit.constants";
+import {
+    createPlatformGenerationState,
+    createQueuedGenerationState,
+    getPrimaryGenerationPlatforms,
+    type PlatformGenerationState
+} from "../../../../lib/tools/social-profile-kit.generation";
+import {
+    normalizeSocialProfileInputForSubmission
+} from "../../../../lib/tools/social-profile-kit.input";
+import {
+    createDefaultManualSocialProfileKit,
+} from "../../../../lib/tools/social-profile-kit.manual";
+import {
+    buildSocialProfileKitZip,
+    buildSocialProfileKitZipName,
+} from "../../../../lib/tools/social-profile-kit.package";
+import {
+    socialProfileInputSchema,
+    type SocialProfileInput,
+    type SocialProfileKitOutput,
+    type SocialProfilePlatform,
+    type SocialProfileTheme,
+} from "../../../../lib/tools/social-profile-kit.schema";
+import { fakeDelay as sleep } from "../../../../lib/fake-delay";
+import { uploadReferenceImage } from "../../../../host/client";
+import {
+    submitSocialProfileKitGeneration,
+} from "../../../../host/client";
+import {
+    generateSocialProfileBannerImage,
+    generateSocialProfileMasterBannerImage,
+    SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS,
+} from "../../../../host/client";
+import { Download } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+
+import {
+    BANNER_IMAGE_MAX_ATTEMPTS,
+    isAgentKitUsable,
+    isGeneratedBannerPlatform,
+    isRetriableBannerImageError,
+    nextPlatformGenerationStatus,
+    readImageAsDataUrl,
+    renderSelectedAssetPng,
+    SocialProfileKitTaskError,
+    waitForAgentKit,
+    type BrandAssetState,
+    type CanvasZoomMode,
+    type KitGenerationResult
+} from "./generation-runtime";
+import { InputPanel } from "./input-panel";
+import { PlatformDock } from "./platform-dock";
+import { ProfileCanvas } from "./profile-canvas";
+import type {
+    EditableTextField,
+    EditingProfileText,
+    ProfilePreviewDevice,
+    SelectedProfileElement,
+    SocialProfileKitCopy,
+} from "./types";
+
+export function SocialProfileKitGenerator() {
+  const locale = useLocale();
+  const t = useTranslations("toolsUi.socialProfileKit");
+  const copy: SocialProfileKitCopy = {
+    title: t("title"),
+    subtitle: t("subtitle"),
+    modes: {
+      personalCreator: t("modes.personalCreator"),
+      brandCompany: t("modes.brandCompany"),
+    },
+    inputModes: {
+      form: t("inputModes.form"),
+      prompt: t("inputModes.prompt"),
+    },
+    fields: {
+      name: t("fields.name"),
+      namePlaceholder: t("fields.namePlaceholder"),
+      positioning: t("fields.positioning"),
+      positioningPlaceholder: t("fields.positioningPlaceholder"),
+      audience: t("fields.audience"),
+      audiencePlaceholder: t("fields.audiencePlaceholder"),
+      targetMarket: t("fields.targetMarket"),
+      tone: t("fields.tone"),
+      brandAsset: t("fields.brandAsset"),
+      brandAssetHint: t("fields.brandAssetHint"),
+      brandAssetEmpty: t("fields.brandAssetEmpty"),
+      brandAssetRemove: t("fields.brandAssetRemove"),
+      prompt: t("fields.prompt"),
+      promptPlaceholder: t("fields.promptPlaceholder"),
+    },
+    tones: {
+      modern: t("tones.modern"),
+      friendly: t("tones.friendly"),
+      professional: t("tones.professional"),
+      bold: t("tones.bold"),
+      minimal: t("tones.minimal"),
+    },
+    targetMarkets: {
+      china: t("targetMarkets.china"),
+      northAmerica: t("targetMarkets.northAmerica"),
+      japan: t("targetMarkets.japan"),
+      europe: t("targetMarkets.europe"),
+      global: t("targetMarkets.global"),
+    },
+    platforms: {
+      x: t("platforms.x"),
+      bluesky: t("platforms.bluesky"),
+      threads: t("platforms.threads"),
+      linkedin: t("platforms.linkedin"),
+      "linkedin-company": t("platforms.linkedinCompany"),
+      instagram: t("platforms.instagram"),
+      tiktok: t("platforms.tiktok"),
+      youtube: t("platforms.youtube"),
+      facebook: t("platforms.facebook"),
+    },
+    actions: {
+      generate: t("actions.generate"),
+      generating: t("actions.generating"),
+      regenerate: t("actions.regenerate"),
+      copy: t("actions.copy"),
+      copied: t("actions.copied"),
+      edit: t("actions.edit"),
+      done: t("actions.done"),
+      upload: t("actions.upload"),
+      download: t("actions.download"),
+      downloadKit: t("actions.downloadKit"),
+      replaceColor: t("actions.replaceColor"),
+      downloadAll: t("actions.downloadAll"),
+      allPlatforms: t("actions.allPlatforms"),
+      fullKit: t("actions.fullKit"),
+      currentPlatform: t("actions.currentPlatform"),
+      follow: t("actions.follow"),
+      message: t("actions.message"),
+    },
+    canvas: {
+      desktop: t("canvas.desktop"),
+      mobile: t("canvas.mobile"),
+      light: t("canvas.light"),
+      dark: t("canvas.dark"),
+      zoomIn: t("canvas.zoomIn"),
+      zoomOut: t("canvas.zoomOut"),
+      fit: t("canvas.fit"),
+      selected: t("canvas.selected"),
+      unsupportedBanner: t("canvas.unsupportedBanner"),
+    },
+    elements: {
+      avatar: t("elements.avatar"),
+      banner: t("elements.banner"),
+      displayName: t("elements.displayName"),
+      username: t("elements.username"),
+      bio: t("elements.bio"),
+      headline: t("elements.headline"),
+      description: t("elements.description"),
+    },
+    status: {
+      defaultReady: t("status.defaultReady"),
+      generated: t("status.generated"),
+      validationError: t("status.validationError"),
+      idle: t("status.idle"),
+      queued: t("status.queued"),
+      generating: t("status.generating"),
+      ready: t("status.ready"),
+      failed: t("status.failed"),
+    },
+    sections: {
+      whatYouGet: t("sections.whatYouGet"),
+      sizes: t("sections.sizes"),
+      howItWorks: t("sections.howItWorks"),
+      relatedTools: t("sections.relatedTools"),
+      faq: t("sections.faq"),
+    },
+  };
+  const initial = useMemo(() => createDefaultManualSocialProfileKit(locale), [locale]);
+  const generationRunRef = useRef(0);
+  const generationTaskIdRef = useRef<string | null>(null);
+  const editVersionRef = useRef(0);
+  const bannerImageRunRef = useRef<Set<string>>(new Set());
+  const pendingKitRef = useRef<SocialProfileKitOutput>(initial);
+  const brandAssetRef = useRef<BrandAssetState | null>(null);
+  const [form, setForm] = useState<SocialProfileInput>(initial.input);
+  const [kit, setKit] = useState<SocialProfileKitOutput>(initial);
+  const [brandAsset, setBrandAsset] = useState<BrandAssetState | null>(null);
+  const [activePlatform, setActivePlatform] =
+    useState<SocialProfilePlatform>("x");
+  const [theme, setTheme] = useState<SocialProfileTheme>("light");
+  const [zoom, setZoom] = useState(1);
+  const [zoomMode, setZoomMode] = useState<CanvasZoomMode>("auto");
+  const [generationState, setGenerationState] =
+    useState<PlatformGenerationState>(() =>
+      createPlatformGenerationState("ready"),
+    );
+  const [bannerGenerationState, setBannerGenerationState] =
+    useState<PlatformGenerationState>(() =>
+      createPlatformGenerationState("idle"),
+    );
+  const [selected, setSelected] = useState<SelectedProfileElement | null>(null);
+  const [editing, setEditing] = useState<EditingProfileText>(null);
+  const [busy, setBusy] = useState(false);
+  const [hasAgentResult, setHasAgentResult] = useState(false);
+
+  const profile = kit.profiles[activePlatform];
+  const hasPendingGeneration = Object.values(generationState).some(
+    (status) => status === "queued" || status === "generating",
+  );
+  const hasPendingBannerGeneration = Object.values(bannerGenerationState).some(
+    (status) => status === "queued" || status === "generating",
+  );
+
+  function applyBrandAssetToKit(
+    sourceKit: SocialProfileKitOutput,
+    asset = brandAssetRef.current,
+  ): SocialProfileKitOutput {
+    if (!asset) return sourceKit;
+
+    const profiles = { ...sourceKit.profiles };
+    for (const platform of SOCIAL_PROFILE_PLATFORMS) {
+      profiles[platform] = {
+        ...profiles[platform],
+        avatar: {
+          ...profiles[platform].avatar,
+          kind: "uploaded",
+          source: asset.kind === "logo" ? "uploaded" : "uploaded",
+          generationMode: "userProvided",
+          isPlaceholderOnly: false,
+          src: asset.previewSrc,
+          prompt:
+            asset.kind === "logo"
+              ? `User-uploaded brand logo: ${asset.name}`
+              : `User-uploaded profile image: ${asset.name}`,
+        },
+      };
+    }
+
+    return { ...sourceKit, profiles };
+  }
+
+  async function ensureBrandAssetReference(
+    asset = brandAssetRef.current,
+  ): Promise<BrandAssetState | null> {
+    if (!asset) return null;
+    if (asset.referenceImageUrl) return asset;
+
+    const referenceImageUrl = await uploadReferenceImage(asset.dataUrl, asset.name);
+    if (!referenceImageUrl) return asset;
+
+    const next = { ...asset, referenceImageUrl };
+    brandAssetRef.current = next;
+    setBrandAsset(next);
+    return next;
+  }
+
+  function applyGeneratedPlatform(
+    platform: SocialProfilePlatform,
+    nextKit: SocialProfileKitOutput,
+  ) {
+    const nextKitWithAsset = applyBrandAssetToKit(nextKit);
+    setKit((current) => ({
+      ...nextKitWithAsset,
+      profiles: {
+        ...current.profiles,
+        [platform]: nextKitWithAsset.profiles[platform],
+      },
+    }));
+  }
+
+  function applyLateAgentKit(agentKit: SocialProfileKitOutput) {
+    setKit((current) => {
+      const profiles = { ...agentKit.profiles };
+      let hasPreservedBanner = false;
+
+      for (const platform of SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS) {
+        const currentBanner = current.profiles[platform].banner;
+        const nextBanner = profiles[platform].banner;
+        if (!currentBanner?.src || !nextBanner || nextBanner.kind === "notApplicable") {
+          continue;
+        }
+
+        profiles[platform] = {
+          ...profiles[platform],
+          banner: {
+            ...nextBanner,
+            ...currentBanner,
+          },
+        };
+        hasPreservedBanner = true;
+      }
+
+      const nextKit = hasPreservedBanner ? { ...agentKit, profiles } : agentKit;
+      return applyBrandAssetToKit(nextKit);
+    });
+  }
+
+  async function generatePlatform(
+    platform: SocialProfilePlatform,
+    runId = generationRunRef.current,
+  ) {
+    setGenerationState((current) =>
+      nextPlatformGenerationStatus(current, platform, "generating"),
+    );
+    await sleep(460);
+
+    if (runId !== generationRunRef.current) return;
+
+    applyGeneratedPlatform(platform, pendingKitRef.current);
+    setGenerationState((current) =>
+      nextPlatformGenerationStatus(current, platform, "ready"),
+    );
+  }
+
+  async function generateKitWithAgent(
+    input: SocialProfileInput,
+    runId: number,
+    primaryPlatforms: SocialProfilePlatform[],
+    editVersion: number,
+    submittedBrandAsset: BrandAssetState | null,
+  ): Promise<KitGenerationResult> {
+    let taskId: string | null = null;
+    let agentPending = false;
+    let agentError: string | undefined;
+
+    try {
+      const submitted = await submitSocialProfileKitGeneration(
+        input,
+        locale,
+        submittedBrandAsset?.referenceImageUrl
+          ? {
+              kind: submittedBrandAsset.kind,
+              name: submittedBrandAsset.name,
+              referenceImageUrl: submittedBrandAsset.referenceImageUrl,
+            }
+          : undefined,
+      );
+      taskId = submitted.taskId;
+      agentPending = true;
+      generationTaskIdRef.current = taskId;
+      const agentKit = await waitForAgentKit(
+        taskId as string,
+        () => runId === generationRunRef.current,
+      );
+      if (agentKit && isAgentKitUsable(input, agentKit)) {
+        return {
+          kit: applyBrandAssetToKit(agentKit, submittedBrandAsset),
+          status: "agent",
+        };
+      }
+    } catch (error) {
+      agentPending = false;
+      agentError =
+        error instanceof SocialProfileKitTaskError
+          ? error.message
+          : "The social profile kit agent did not return a usable result.";
+    }
+
+    if (taskId && agentPending) {
+      void (async () => {
+        try {
+          const agentKit = await waitForAgentKit(
+            taskId,
+            () => runId === generationRunRef.current,
+            72,
+          );
+
+          if (!agentKit || !isAgentKitUsable(input, agentKit)) {
+            markBannerGenerationFailed(primaryPlatforms);
+            setGenerationState((current) => {
+              const next = { ...current };
+              for (const platform of primaryPlatforms) next[platform] = "failed";
+              return next;
+            });
+            return;
+          }
+          if (runId !== generationRunRef.current) return;
+          if (editVersion !== editVersionRef.current) return;
+
+          const agentKitWithAsset = applyBrandAssetToKit(agentKit, submittedBrandAsset);
+          pendingKitRef.current = agentKitWithAsset;
+          applyLateAgentKit(agentKitWithAsset);
+          setHasAgentResult(true);
+          setGenerationState((current) => {
+            const next = { ...current };
+            for (const platform of primaryPlatforms) {
+              if (
+                isGeneratedBannerPlatform(platform) &&
+                (current[platform] === "generating" || current[platform] === "failed")
+              ) {
+                continue;
+              }
+              next[platform] = "ready";
+            }
+            return next;
+          });
+          startBannerImageGeneration(agentKitWithAsset, taskId, runId, primaryPlatforms);
+        } catch {
+          markBannerGenerationFailed(primaryPlatforms);
+          setGenerationState((current) => {
+            const next = { ...current };
+            for (const platform of primaryPlatforms) next[platform] = "failed";
+            return next;
+          });
+        }
+      })();
+    }
+
+    return {
+      status: agentPending ? "pending" : "failed",
+      agentError,
+    };
+  }
+
+  async function generate() {
+    const normalizedForm = normalizeSocialProfileInputForSubmission({
+      ...form,
+      platforms: [...SOCIAL_PROFILE_V1_PLATFORMS],
+      theme,
+    });
+    const parsed = socialProfileInputSchema.safeParse({
+      ...normalizedForm,
+      platforms: [...SOCIAL_PROFILE_V1_PLATFORMS],
+      theme,
+    });
+
+    if (!parsed.success) {
+      return;
+    }
+
+    const primaryPlatforms = getPrimaryGenerationPlatforms(parsed.data.mode);
+    const runId = generationRunRef.current + 1;
+    const editVersion = editVersionRef.current;
+    generationRunRef.current = runId;
+    generationTaskIdRef.current = null;
+    bannerImageRunRef.current = new Set();
+    setBusy(true);
+    setEditing(null);
+    setSelected(null);
+    setActivePlatform(primaryPlatforms[0] ?? "x");
+    setZoom(1);
+    setZoomMode("auto");
+    setGenerationState(
+      nextPlatformGenerationStatus(
+        createQueuedGenerationState(primaryPlatforms),
+        primaryPlatforms[0] ?? "x",
+        "generating",
+      ),
+    );
+    setBannerGenerationState(createPlatformGenerationState("idle"));
+    let submittedBrandAsset: BrandAssetState | null = null;
+    try {
+      submittedBrandAsset = await ensureBrandAssetReference();
+    } catch {
+      submittedBrandAsset = brandAssetRef.current;
+    }
+
+    const result = await generateKitWithAgent(
+      parsed.data,
+      runId,
+      primaryPlatforms,
+      editVersion,
+      submittedBrandAsset,
+    );
+    if (runId !== generationRunRef.current) return;
+
+    const next = result.kit;
+    if (!next) {
+      setGenerationState((current) => {
+        const nextState = { ...current };
+        for (const platform of primaryPlatforms) {
+          nextState[platform] = result.status === "pending" ? "queued" : "failed";
+        }
+        return nextState;
+      });
+      if (result.status === "pending") {
+        markBannerGenerationQueued(
+          primaryPlatforms,
+          Boolean(generationTaskIdRef.current),
+        );
+      } else {
+        markBannerGenerationFailed(primaryPlatforms, true);
+      }
+      setBusy(false);
+      return;
+    }
+    pendingKitRef.current = next;
+    setHasAgentResult(true);
+    const startedBannerPlatforms = startBannerImageGeneration(
+      next,
+      generationTaskIdRef.current,
+      runId,
+      primaryPlatforms,
+    );
+
+    for (const platform of primaryPlatforms) {
+      if (runId !== generationRunRef.current) return;
+      await generatePlatform(platform, runId);
+      if (startedBannerPlatforms.has(platform)) {
+        setGenerationState((current) =>
+          nextPlatformGenerationStatus(current, platform, "ready"),
+        );
+      }
+    }
+
+    if (runId === generationRunRef.current) {
+      setBusy(false);
+    }
+  }
+
+  function markBannerGenerationQueued(
+    platforms: readonly SocialProfilePlatform[],
+    enabled: boolean,
+  ): Set<SocialProfilePlatform> {
+    if (!enabled) return new Set<SocialProfilePlatform>();
+    const targets = platforms.filter((platform) =>
+      isGeneratedBannerPlatform(platform),
+    );
+    if (targets.length === 0) return new Set<SocialProfilePlatform>();
+
+    setBannerGenerationState((current) => {
+      const next = { ...current };
+      for (const platform of targets) {
+        if (current[platform] !== "idle") continue;
+        next[platform] = "queued";
+      }
+      return next;
+    });
+
+    return new Set(targets);
+  }
+
+  function markBannerGenerationFailed(
+    platforms: readonly SocialProfilePlatform[],
+    enabled = true,
+  ): Set<SocialProfilePlatform> {
+    if (!enabled) return new Set<SocialProfilePlatform>();
+    const targets = platforms.filter((platform) =>
+      isGeneratedBannerPlatform(platform),
+    );
+    if (targets.length === 0) return new Set<SocialProfilePlatform>();
+
+    setBannerGenerationState((current) => {
+      const next = { ...current };
+      for (const platform of targets) {
+        next[platform] = "failed";
+      }
+      return next;
+    });
+
+    return new Set(targets);
+  }
+
+  function startBannerImageGeneration(
+    sourceKit: SocialProfileKitOutput,
+    parentTaskId: string | null,
+    runId: number,
+    platforms: readonly SocialProfilePlatform[],
+  ): Set<SocialProfilePlatform> {
+    const started = new Set<SocialProfilePlatform>();
+    if (!parentTaskId) return started;
+    const targets = platforms.filter((platform) =>
+      isGeneratedBannerPlatform(platform),
+    ) as Array<(typeof SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS)[number]>;
+    const pendingTargets = targets.filter((platform) => {
+      const banner = sourceKit.profiles[platform].banner;
+      if (!banner || banner.kind === "notApplicable") return false;
+      if (banner.kind === "uploaded") return false;
+      if (banner.src) return false;
+      return true;
+    });
+    if (pendingTargets.length === 0) return started;
+
+    const runKey = `${runId}:${parentTaskId}:master:${pendingTargets.join(",")}`;
+    if (bannerImageRunRef.current.has(runKey)) return started;
+    bannerImageRunRef.current.add(runKey);
+    for (const platform of pendingTargets) {
+      started.add(platform);
+    }
+
+    setBannerGenerationState((current) => {
+      let next = current;
+      for (const platform of pendingTargets) {
+        next = nextPlatformGenerationStatus(next, platform, "generating");
+      }
+      return next;
+    });
+
+    void (async () => {
+      let lastError: unknown = null;
+      try {
+        let result: Awaited<ReturnType<typeof generateSocialProfileMasterBannerImage>> | null =
+          null;
+
+        for (let attempt = 1; attempt <= BANNER_IMAGE_MAX_ATTEMPTS; attempt += 1) {
+          try {
+            result = await generateSocialProfileMasterBannerImage({
+              parentTaskId,
+              kit: sourceKit,
+              referenceImageUrls: brandAssetRef.current?.referenceImageUrl
+                ? [brandAssetRef.current.referenceImageUrl]
+                : [],
+            });
+            break;
+          } catch (error) {
+            lastError = error;
+            if (
+              attempt >= BANNER_IMAGE_MAX_ATTEMPTS ||
+              !isRetriableBannerImageError(error)
+            ) {
+              throw error;
+            }
+          }
+        }
+
+        if (!result) throw lastError ?? new Error("Master banner image generation failed");
+        if (runId !== generationRunRef.current) return;
+
+        setKit((current) => {
+          const profiles = { ...current.profiles };
+          for (const platform of pendingTargets) {
+            const currentProfile = profiles[platform];
+            if (!currentProfile.banner || currentProfile.banner.kind === "notApplicable") {
+              continue;
+            }
+            if (currentProfile.banner.kind === "uploaded") continue;
+            if (currentProfile.banner.src) continue;
+
+            profiles[platform] = {
+              ...currentProfile,
+              banner: {
+                ...currentProfile.banner,
+                kind: "generated",
+                generationMode: platform === pendingTargets[0] ? "generate" : "crop",
+                src: result.imageUrl,
+                prompt: result.prompt,
+              },
+            };
+          }
+          return { ...current, profiles };
+        });
+        setBannerGenerationState((current) => {
+          let next = current;
+          for (const platform of pendingTargets) {
+            next = nextPlatformGenerationStatus(next, platform, "ready");
+          }
+          return next;
+        });
+      } catch {
+        if (runId !== generationRunRef.current) return;
+        setBannerGenerationState((current) => {
+          let next = current;
+          for (const platform of pendingTargets) {
+            next = nextPlatformGenerationStatus(next, platform, "failed");
+          }
+          return next;
+        });
+      }
+    })();
+
+    return started;
+  }
+
+  function startPlatformBannerImageGeneration(
+    sourceKit: SocialProfileKitOutput,
+    parentTaskId: string | null,
+    runId: number,
+    platform: (typeof SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS)[number],
+    options: { force?: boolean } = {},
+  ): boolean {
+    if (!parentTaskId) return false;
+
+    const banner = sourceKit.profiles[platform].banner;
+    const runKey = `${runId}:${parentTaskId}:${platform}`;
+    if (!options.force && bannerImageRunRef.current.has(runKey)) return false;
+    if (!banner || banner.kind === "notApplicable") return false;
+    if (banner.kind === "uploaded") return false;
+    if (!options.force && banner.src) return false;
+
+    bannerImageRunRef.current.add(runKey);
+    setBannerGenerationState((current) =>
+      nextPlatformGenerationStatus(current, platform, "generating"),
+    );
+    void (async () => {
+      let lastError: unknown = null;
+      try {
+        let result: Awaited<ReturnType<typeof generateSocialProfileBannerImage>> | null =
+          null;
+
+        for (let attempt = 1; attempt <= BANNER_IMAGE_MAX_ATTEMPTS; attempt += 1) {
+          try {
+            result = await generateSocialProfileBannerImage({
+              parentTaskId,
+              kit: sourceKit,
+              platform,
+              referenceImageUrls: brandAssetRef.current?.referenceImageUrl
+                ? [brandAssetRef.current.referenceImageUrl]
+                : [],
+            });
+            break;
+          } catch (error) {
+            lastError = error;
+            if (
+              attempt >= BANNER_IMAGE_MAX_ATTEMPTS ||
+              !isRetriableBannerImageError(error)
+            ) {
+              throw error;
+            }
+          }
+        }
+
+        if (!result) throw lastError ?? new Error("Banner image generation failed");
+        if (runId !== generationRunRef.current) return;
+
+        updateProfile(platform, (current) => {
+          if (!current.banner || current.banner.kind === "notApplicable") return current;
+          if (current.banner.kind === "uploaded") return current;
+          if (!options.force && current.banner.src) return current;
+
+          return {
+            ...current,
+            banner: {
+              ...current.banner,
+              kind: "generated",
+              generationMode: "generate",
+              src: result.imageUrl,
+              prompt: result.prompt,
+            },
+          };
+        });
+        setBannerGenerationState((current) =>
+          nextPlatformGenerationStatus(current, platform, "ready"),
+        );
+      } catch {
+        if (runId !== generationRunRef.current) return;
+        setBannerGenerationState((current) =>
+          nextPlatformGenerationStatus(current, platform, "failed"),
+        );
+        // Real image generation is progressive; the editable preview remains usable.
+      }
+    })();
+    return true;
+  }
+
+  function retryActiveBanner() {
+    if (!isGeneratedBannerPlatform(activePlatform)) return;
+    if (bannerGenerationState[activePlatform] === "generating") return;
+    const parentTaskId = generationTaskIdRef.current;
+    const runId = generationRunRef.current;
+    const sourceKit = {
+      ...kit,
+      profiles: {
+        ...kit.profiles,
+        [activePlatform]: {
+          ...kit.profiles[activePlatform],
+          banner: kit.profiles[activePlatform].banner
+            ? {
+                ...kit.profiles[activePlatform].banner,
+                src: undefined,
+              }
+            : kit.profiles[activePlatform].banner,
+        },
+      },
+    };
+
+    startPlatformBannerImageGeneration(
+      sourceKit,
+      parentTaskId,
+      runId,
+      activePlatform as (typeof SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS)[number],
+      { force: true },
+    );
+  }
+
+  function updateProfile(
+    platform: SocialProfilePlatform,
+    updater: (
+      profile: SocialProfileKitOutput["profiles"][SocialProfilePlatform],
+    ) => SocialProfileKitOutput["profiles"][SocialProfilePlatform],
+  ) {
+    setKit((current) => ({
+      ...current,
+      profiles: {
+        ...current.profiles,
+        [platform]: updater(current.profiles[platform]),
+      },
+    }));
+  }
+
+  function updateText(field: EditableTextField, value: string) {
+    editVersionRef.current += 1;
+    updateProfile(activePlatform, (current) => ({
+      ...current,
+      [field]: value,
+    }));
+  }
+
+  async function copyText(_field: EditableTextField, value: string) {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      return;
+    }
+  }
+
+  async function uploadBrandAsset(file: File) {
+    if (!file.type.startsWith("image/")) return;
+    try {
+      const dataUrl = await readImageAsDataUrl(file);
+      const next: BrandAssetState = {
+        kind: form.mode === "brandCompany" ? "logo" : "avatar",
+        name: file.name,
+        dataUrl,
+        previewSrc: dataUrl,
+      };
+      brandAssetRef.current = next;
+      setBrandAsset(next);
+      editVersionRef.current += 1;
+      setKit((current) => applyBrandAssetToKit(current, next));
+    } catch {
+      return;
+    }
+  }
+
+  function removeBrandAsset() {
+    brandAssetRef.current = null;
+    setBrandAsset(null);
+    editVersionRef.current += 1;
+    setKit((current) => {
+      const profiles = { ...current.profiles };
+      for (const platform of SOCIAL_PROFILE_PLATFORMS) {
+        const currentAvatar = profiles[platform].avatar;
+        profiles[platform] = {
+          ...profiles[platform],
+          avatar: {
+            ...currentAvatar,
+            kind: "placeholder",
+            source: "placeholder",
+            generationMode: "placeholder",
+            isPlaceholderOnly: true,
+            src: undefined,
+            prompt: "Neutral initials placeholder; no image has been generated.",
+          },
+        };
+      }
+      return { ...current, profiles };
+    });
+  }
+
+  function uploadSelected(file: File) {
+    editVersionRef.current += 1;
+    const src = URL.createObjectURL(file);
+    updateProfile(activePlatform, (current) => {
+      if (selected?.kind === "avatar") {
+        return { ...current, avatar: { ...current.avatar, kind: "uploaded", src } };
+      }
+      if (selected?.kind === "banner" && current.banner) {
+        return {
+          ...current,
+          banner: { ...current.banner, kind: "uploaded", src },
+        };
+      }
+      return current;
+    });
+  }
+
+  function replaceColor() {
+    editVersionRef.current += 1;
+    updateProfile(activePlatform, (current) => ({
+      ...current,
+      colors: [...current.colors.slice(1), current.colors[0]],
+    }));
+  }
+
+  async function downloadSelected() {
+    if (selected?.kind === "avatar") {
+      const blob = await renderSelectedAssetPng({
+        profile,
+        src: profile.avatar.src,
+        width: profile.avatar.width,
+        height: profile.avatar.height,
+        fit: form.mode === "brandCompany" ? "contain" : "cover",
+      });
+      downloadBlob(blob, `${activePlatform}-avatar-${profile.avatar.width}x${profile.avatar.height}.png`);
+      return;
+    }
+
+    if (selected?.kind === "banner" && profile.banner && profile.banner.kind !== "notApplicable") {
+      const width = profile.banner.width ?? 1200;
+      const height = profile.banner.height ?? 400;
+      const blob = await renderSelectedAssetPng({
+        profile,
+        src: profile.banner.src,
+        width,
+        height,
+        fit: "cover",
+      });
+      downloadBlob(blob, `${activePlatform}-background-${width}x${height}.png`);
+      return;
+    }
+
+    await downloadPlatform(activePlatform);
+  }
+
+  async function downloadPlatform(platform = activePlatform) {
+    const zip = await buildSocialProfileKitZip(kit, { platforms: [platform] });
+    downloadBlob(zip, buildSocialProfileKitZipName(kit, platform));
+  }
+
+  async function downloadFullKit() {
+    const zip = await buildSocialProfileKitZip(kit);
+    downloadBlob(zip, buildSocialProfileKitZipName(kit));
+  }
+
+  function selectPlatform(platform: SocialProfilePlatform) {
+    setActivePlatform(platform);
+    setEditing(null);
+    setZoom(1);
+    setZoomMode("auto");
+    const spec = SOCIAL_PROFILE_PLATFORM_SPECS[platform];
+    if (!spec.supportsBanner && selected?.kind === "banner") {
+      setSelected(null);
+    }
+    if (generationState[platform] === "idle") {
+      void generatePlatform(platform);
+    }
+  }
+
+  function startEdit(field: EditableTextField, device: ProfilePreviewDevice) {
+    setEditing({ field, device });
+  }
+
+  return (
+    <section className="flex flex-col gap-6">
+      <div className="mx-auto max-w-2xl text-center">
+        <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
+          {copy.title}
+        </h2>
+        <p className="mt-3 text-sm text-muted-foreground md:text-base">
+          {copy.subtitle}
+        </p>
+      </div>
+
+      <InputPanel
+        copy={copy}
+        value={{ ...form, theme }}
+        brandAsset={brandAsset}
+        busy={busy || hasPendingGeneration || hasPendingBannerGeneration}
+        onChange={(next) => {
+          editVersionRef.current += 1;
+          setForm(next);
+          setTheme(next.theme);
+        }}
+        onBrandAssetUpload={(file) => void uploadBrandAsset(file)}
+        onBrandAssetRemove={removeBrandAsset}
+        onGenerate={() => void generate()}
+      />
+
+      <div className="relative pb-24">
+        <p
+          className="mb-3 rounded-xl border border-border bg-card px-4 py-2.5 text-xs leading-5 text-muted-foreground"
+          role="status"
+        >
+          {hasAgentResult ? copy.status.generated : copy.status.defaultReady}
+        </p>
+        <ProfileCanvas
+          copy={copy}
+          platform={activePlatform}
+          profile={profile}
+          mode={form.mode}
+          theme={theme}
+          zoom={zoom}
+          zoomMode={zoomMode}
+          platformStatus={
+            bannerGenerationState[activePlatform] === "idle"
+              ? generationState[activePlatform]
+              : bannerGenerationState[activePlatform]
+          }
+          selected={selected}
+          editing={editing}
+          onThemeChange={setTheme}
+          onZoomChange={(nextZoom) => {
+            setZoom(nextZoom);
+            setZoomMode("manual");
+          }}
+          onAutoZoomChange={setZoom}
+          onFitZoom={() => setZoomMode("auto")}
+          onSelect={setSelected}
+          onUpload={uploadSelected}
+          onRetryBanner={retryActiveBanner}
+          onDownloadSelected={downloadSelected}
+          onDownloadPlatform={() => void downloadPlatform()}
+          onReplaceColor={replaceColor}
+          onCopyText={(field, value) => void copyText(field, value)}
+          onStartEdit={startEdit}
+          onStopEdit={() => setEditing(null)}
+          onTextChange={updateText}
+        />
+
+        <div className="sticky bottom-4 z-30 -mt-10 px-2">
+          <div className="mx-auto flex max-w-5xl items-center justify-center gap-3">
+            <PlatformDock
+              copy={copy}
+              activePlatform={activePlatform}
+              generationState={generationState}
+              bannerGenerationState={bannerGenerationState}
+              onPlatformChange={selectPlatform}
+              className="min-h-[104px] min-w-0 flex-1 basis-0 rounded-2xl bg-card/95 p-2 shadow-xl backdrop-blur"
+            />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="h-[104px] shrink-0 rounded-2xl border bg-card/95 px-4 text-sm shadow-xl backdrop-blur"
+                  aria-label={copy.actions.downloadKit}
+                >
+                  <Download className="size-4" />
+                  {copy.actions.downloadKit}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                sideOffset={8}
+                className="max-h-[min(60vh,420px)] w-56 overflow-y-auto"
+              >
+                {SOCIAL_PROFILE_PLATFORMS.map((platform) => (
+                  <DropdownMenuItem
+                    key={platform}
+                    onSelect={() => void downloadPlatform(platform)}
+                  >
+                    {copy.platforms[platform]}
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onSelect={() => void downloadFullKit()}>
+                  {copy.actions.allPlatforms}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}