Puzzle: support history images & partial generation

Allow history-generated image paths to be submitted where Data URLs were previously required and avoid treating partial/result-page generations as blocking the whole draft. Backend: resolve history /generated-* references via resolve_puzzle_reference_image_as_data_url and convert to PuzzleDownloadedImage; add PuzzleDownloadedImage::from_resolved_reference_image; extend draft handling to apply generated level metadata (auto-naming) and normalize generation_status to treat levels with images as ready. API: add shouldAutoNameLevel to action contracts and use it to request/refine generated level names. Spacetime/module and mappers: normalize completed level statuses when saving/reading so result-page background or per-level generation doesn't mask completed drafts. Frontend: expose resolver helpers, only mark a work as generating when no usable cover or ready level exists, keep level controls enabled during UI-background regeneration, and add tests covering history-image submission, auto-naming, and UI-background/partial-generation behaviors.
2026-05-19 10:02:13 +08:00
parent 5e03b3d2f2
commit 7b37271f17
16 changed files with 653 additions and 73 deletions
--- a/src/components/custom-world-home/CustomWorldCreationHub.test.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.test.tsx
@@ -221,6 +221,81 @@ test('creation hub marks generating and newly completed drafts', () => {
  expect(html).toContain('creation-work-card__spinner');
 });

+test('creation hub does not mask completed puzzle drafts while a later level image is generating', () => {
+  const html = renderToStaticMarkup(
+    <CustomWorldCreationHub
+      items={[]}
+      puzzleItems={[
+        {
+          workId: 'puzzle-work-session-1',
+          profileId: 'puzzle-profile-session-1',
+          ownerUserId: 'user-1',
+          authorDisplayName: '测试作者',
+          workTitle: '潮雾拼图草稿',
+          workDescription: '已经有可查看的首关结果。',
+          levelName: '潮雾拼图',
+          summary: '已经有可查看的首关结果。',
+          themeTags: ['潮雾'],
+          coverImageSrc: '/generated-puzzle-assets/session/cover.png',
+          publicationStatus: 'draft',
+          updatedAt: new Date('2026-04-22T10:00:00.000Z').toISOString(),
+          publishedAt: null,
+          publishReady: false,
+          sourceSessionId: 'puzzle-session-1',
+          generationStatus: 'generating',
+          levels: [
+            {
+              levelId: 'puzzle-level-1',
+              levelName: '潮雾拼图',
+              pictureDescription: '潮雾港口。',
+              pictureReference: null,
+              candidates: [
+                {
+                  candidateId: 'candidate-1',
+                  imageSrc: '/generated-puzzle-assets/session/cover.png',
+                  assetId: 'asset-1',
+                  prompt: '潮雾港口',
+                  actualPrompt: null,
+                  sourceType: 'generated',
+                  selected: true,
+                },
+              ],
+              selectedCandidateId: 'candidate-1',
+              coverImageSrc: '/generated-puzzle-assets/session/cover.png',
+              coverAssetId: 'asset-1',
+              generationStatus: 'ready',
+            },
+            {
+              levelId: 'puzzle-level-2',
+              levelName: '灯塔',
+              pictureDescription: '灯塔新关卡。',
+              pictureReference: null,
+              candidates: [],
+              selectedCandidateId: null,
+              coverImageSrc: null,
+              coverAssetId: null,
+              generationStatus: 'generating',
+            },
+          ],
+        },
+      ]}
+      loading={false}
+      error={null}
+      onRetry={() => {}}
+      onCreateType={noopCreateType}
+      onOpenDraft={() => {}}
+      onEnterPublished={() => {}}
+      entryConfig={testEntryConfig}
+      creationTypes={testCreationTypes}
+      onOpenPuzzleDetail={() => {}}
+    />,
+  );
+
+  expect(html).not.toContain('生成中...');
+  expect(html).not.toContain('creation-work-card__spinner');
+  expect(html).toContain('继续创作《潮雾拼图草稿》');
+});
+
 test('creation hub published work uses unified list card layout', () => {
  const html = renderToStaticMarkup(
    <CustomWorldCreationHub
--- a/src/components/custom-world-home/creationWorkShelf.ts
+++ b/src/components/custom-world-home/creationWorkShelf.ts
@@ -641,7 +641,7 @@ function isCreationTypeReferenceCoverImageSrc(value?: string | null) {
  );
 }

-function resolvePuzzleWorkCoverImageSrc(item: PuzzleWorkSummary) {
+export function resolvePuzzleWorkCoverImageSrc(item: PuzzleWorkSummary) {
  const directCoverImageSrc = normalizeCoverImageSrc(item.coverImageSrc);
  if (
    directCoverImageSrc &&
@@ -651,33 +651,44 @@ function resolvePuzzleWorkCoverImageSrc(item: PuzzleWorkSummary) {
  }

  for (const level of item.levels ?? []) {
-    const levelCoverImageSrc = normalizeCoverImageSrc(level.coverImageSrc);
-    if (
-      levelCoverImageSrc &&
-      !isCreationTypeReferenceCoverImageSrc(levelCoverImageSrc)
-    ) {
-      return levelCoverImageSrc;
+    const levelImageSrc = resolvePuzzleLevelCoverImageSrc(level);
+    if (levelImageSrc) {
+      return levelImageSrc;
    }
+  }

-    const selectedCandidateImageSrc =
-      level.selectedCandidateId && level.candidates.length > 0
-        ? normalizeCoverImageSrc(
-            level.candidates.find(
-              (candidate) => candidate.candidateId === level.selectedCandidateId,
-            )?.imageSrc,
+  return null;
+}
+
+export function resolvePuzzleLevelCoverImageSrc(
+  level: NonNullable<PuzzleWorkSummary['levels']>[number],
+) {
+  const levelCoverImageSrc = normalizeCoverImageSrc(level.coverImageSrc);
+  if (
+    levelCoverImageSrc &&
+    !isCreationTypeReferenceCoverImageSrc(levelCoverImageSrc)
+  ) {
+    return levelCoverImageSrc;
+  }
+
+  const selectedCandidateImageSrc =
+    level.selectedCandidateId && level.candidates.length > 0
+      ? normalizeCoverImageSrc(
+          level.candidates.find(
+            (candidate) => candidate.candidateId === level.selectedCandidateId,
+          )?.imageSrc,
        )
-        : null;
-    const fallbackCandidateImageSrc = normalizeCoverImageSrc(
-      level.candidates[level.candidates.length - 1]?.imageSrc,
-    );
-    const candidateImageSrc = selectedCandidateImageSrc || fallbackCandidateImageSrc;
+      : null;
+  const fallbackCandidateImageSrc = normalizeCoverImageSrc(
+    level.candidates[level.candidates.length - 1]?.imageSrc,
+  );
+  const candidateImageSrc = selectedCandidateImageSrc || fallbackCandidateImageSrc;

-    if (
-      candidateImageSrc &&
-      !isCreationTypeReferenceCoverImageSrc(candidateImageSrc)
-    ) {
-      return candidateImageSrc;
-    }
+  if (
+    candidateImageSrc &&
+    !isCreationTypeReferenceCoverImageSrc(candidateImageSrc)
+  ) {
+    return candidateImageSrc;
  }

  return null;
@@ -804,12 +815,26 @@ function isPersistedCreationWorkGenerating(item: CreationWorkShelfItem) {
    case 'match3d':
      return item.source.item.generationStatus === 'generating';
    case 'puzzle':
-      return item.source.item.generationStatus === 'generating';
+      return isPersistedPuzzleDraftGenerating(item.source.item);
    default:
      return false;
  }
 }

+export function isPersistedPuzzleDraftGenerating(item: PuzzleWorkSummary) {
+  if (item.generationStatus !== 'generating') {
+    return false;
+  }
+
+  const hasUsableCover = Boolean(resolvePuzzleWorkCoverImageSrc(item));
+  const hasReadyLevel = (item.levels ?? []).some((level) =>
+    Boolean(resolvePuzzleLevelCoverImageSrc(level)),
+  );
+
+  // 中文注释：作品架“生成中”只表示初始草稿还没有可查看结果；结果页追加关卡或重绘局部图片不能锁住整张草稿卡。
+  return !hasUsableCover && !hasReadyLevel;
+}
+
 function buildRpgWorkShelfActions(
  item: CustomWorldWorkSummary,
  adapter: RpgWorkShelfAdapter,
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
@@ -300,7 +300,11 @@ import { PublishShareModal } from '../common/PublishShareModal';
 import type { PublishShareModalPayload } from '../common/publishShareModalModel';
 import { UnifiedModal } from '../common/UnifiedModal';
 import { resolveCreativeAgentTargetSelectionStage } from '../creative-agent/creativeAgentViewModel';
-import type { CreationWorkShelfItem } from '../custom-world-home/creationWorkShelf';
+import {
+  isPersistedPuzzleDraftGenerating,
+  resolvePuzzleWorkCoverImageSrc,
+  type CreationWorkShelfItem,
+} from '../custom-world-home/creationWorkShelf';
 import {
  isBigFishGalleryEntry,
  isEdutainmentGalleryEntry,
@@ -3403,9 +3407,12 @@ export function PlatformEntryFlowShellImpl({
      const notice = getDraftGenerationNotice(
        getGenerationNoticeShelfKeys(item),
      );
+      const isNoticeGenerating =
+        notice?.status === 'generating' &&
+        (item.source.kind !== 'puzzle' ||
+          !resolvePuzzleWorkCoverImageSrc(item.source.item));
      return {
-        isGenerating:
-          notice?.status === 'generating' || item.isGenerating === true,
+        isGenerating: isNoticeGenerating || item.isGenerating === true,
        hasUnreadUpdate: notice?.status === 'ready' && !notice.seen,
      };
    },
@@ -6495,7 +6502,10 @@ export function PlatformEntryFlowShellImpl({
        }
      }

-      if (payload.action === 'generate_puzzle_images') {
+      if (
+        payload.action === 'generate_puzzle_images' ||
+        payload.action === 'generate_puzzle_ui_background'
+      ) {
        void executePuzzleBackgroundAction(payload);
        return;
      }
@@ -8748,13 +8758,16 @@ export function PlatformEntryFlowShellImpl({
        buildPuzzleResultWorkId(item.sourceSessionId),
        buildPuzzleResultProfileId(item.sourceSessionId),
      ]);
-      const isMarkedGenerating = isDraftNoticeGenerating('puzzle', [
+      const hasGeneratingNotice = isDraftNoticeGenerating('puzzle', [
        item.workId,
        item.profileId,
        item.sourceSessionId,
        buildPuzzleResultWorkId(item.sourceSessionId),
        buildPuzzleResultProfileId(item.sourceSessionId),
-      ]) || isPersistedDraftGenerating(item.generationStatus);
+      ]);
+      const isMarkedGenerating =
+        (hasGeneratingNotice && !resolvePuzzleWorkCoverImageSrc(item)) ||
+        isPersistedPuzzleDraftGenerating(item);
      setPuzzleOperation(null);
      setPuzzleRun(null);
      setPuzzleRuntimeAuthMode('default');
--- a/src/components/puzzle-agent/PuzzleAgentWorkspace.interaction.test.tsx
+++ b/src/components/puzzle-agent/PuzzleAgentWorkspace.interaction.test.tsx
@@ -535,6 +535,60 @@ test('puzzle workspace hides prompt and cost when AI redraw is off', async () =>
  });
 });

+test('puzzle workspace submits history image when AI redraw is off', async () => {
+  const onCreateFromForm = vi.fn();
+  vi.mocked(puzzleAssetClient.listHistoryAssets).mockResolvedValue([
+    {
+      assetObjectId: 'asset-history-1',
+      assetKind: 'puzzle_cover_image',
+      imageSrc: '/generated-puzzle-assets/history/image.png',
+      ownerUserId: 'user-1',
+      ownerLabel: '账号 user-1',
+      profileId: null,
+      entityId: 'puzzle-session-1',
+      createdAt: '1713686400.000000Z',
+      updatedAt: '1713686400.000000Z',
+    },
+  ]);
+
+  render(
+    <PuzzleAgentWorkspace
+      session={null}
+      onBack={() => {}}
+      onSubmitMessage={() => {}}
+      onExecuteAction={() => {}}
+      onCreateFromForm={onCreateFromForm}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: '选择历史图片' }));
+  const picker = await screen.findByRole('dialog', {
+    name: '选择历史图片',
+  });
+  fireEvent.click(
+    await within(picker).findByRole('button', { name: /image\.png/u }),
+  );
+  await waitFor(() => {
+    expect(screen.queryByRole('dialog', { name: '选择历史图片' })).toBeNull();
+  });
+
+  const aiRedrawSwitch = screen.getByRole('switch', { name: 'AI重绘' });
+  fireEvent.click(aiRedrawSwitch);
+  expect(screen.queryByLabelText('画面AI重绘要求（提示词）')).toBeNull();
+  expect(screen.queryByText('消耗2泥点')).toBeNull();
+
+  fireEvent.click(screen.getByRole('button', { name: /生成拼图游戏草稿/u }));
+
+  expect(onCreateFromForm).toHaveBeenCalledWith({
+    seedText: '历史素材 · image.png',
+    pictureDescription: '历史素材 · image.png',
+    referenceImageSrc: '/generated-puzzle-assets/history/image.png',
+    referenceImageSrcs: [],
+    imageModel: 'gpt-image-2',
+    aiRedraw: false,
+  });
+});
+
 test('puzzle workspace submits uploaded reference image when AI redraw is on', async () => {
  const onCreateFromForm = vi.fn();
  const uploadedDataUrl = 'data:image/png;base64,uploaded-square';
--- a/src/components/puzzle-result/PuzzleResultView.test.tsx
+++ b/src/components/puzzle-result/PuzzleResultView.test.tsx
@@ -317,6 +317,7 @@ describe('PuzzleResultView', () => {
      imageModel: 'gpt-image-2',
      aiRedraw: true,
      candidateCount: 1,
+      shouldAutoNameLevel: false,
      workTitle: '暖灯猫街作品',
      workDescription: '一套雨夜猫街主题拼图。',
      summary: '一套雨夜猫街主题拼图。',
@@ -466,6 +467,7 @@ describe('PuzzleResultView', () => {
      imageModel: 'gpt-image-2',
      aiRedraw: true,
      candidateCount: 1,
+      shouldAutoNameLevel: true,
      workTitle: '暖灯猫街作品',
      workDescription: '一套雨夜猫街主题拼图。',
      summary: '一套雨夜猫街主题拼图。',
@@ -485,6 +487,42 @@ describe('PuzzleResultView', () => {
    ]);
  });

+  test('requests automatic level naming when generating an unnamed level image', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(1_775_000_000_000);
+    const onExecuteAction = vi.fn();
+
+    render(
+      <PuzzleResultView
+        session={createSession()}
+        onBack={() => {}}
+        onExecuteAction={onExecuteAction}
+      />,
+    );
+
+    openPuzzleLevelsTab();
+    fireEvent.click(screen.getByRole('button', { name: /新增关卡/u }));
+    const dialog = screen.getByRole('dialog', { name: '关卡详情' });
+    fireEvent.change(within(dialog).getByLabelText('画面描述'), {
+      target: { value: '新关卡里有一座发光钟楼。' },
+    });
+    fireEvent.click(within(dialog).getByRole('button', { name: /生成画面/u }));
+    fireEvent.click(
+      within(screen.getByRole('dialog', { name: '确认消耗泥点' })).getByRole(
+        'button',
+        { name: '确定' },
+      ),
+    );
+
+    expect(onExecuteAction).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: 'generate_puzzle_images',
+        levelId: 'puzzle-level-1775000000000-2',
+        promptText: '新关卡里有一座发光钟楼。',
+        shouldAutoNameLevel: true,
+      }),
+    );
+  });
+
  test('keeps generation progress visible after closing and reopening level dialog', () => {
    const onExecuteAction = vi.fn();

@@ -567,6 +605,90 @@ describe('PuzzleResultView', () => {
    ).toHaveProperty('disabled', true);
  });

+  test('keeps level controls enabled while regenerating the UI background', () => {
+    const onExecuteAction = vi.fn();
+
+    render(
+      <PuzzleResultView
+        session={createSession()}
+        onBack={() => {}}
+        onExecuteAction={onExecuteAction}
+        isBusy={false}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '素材配置' }));
+    fireEvent.change(screen.getByLabelText('拼图UI背景提示词'), {
+      target: { value: '雨夜猫街竖屏拼图UI背景' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /生成UI背景/u }));
+    fireEvent.click(
+      within(screen.getByRole('dialog', { name: /确认消耗泥点/u })).getByRole(
+        'button',
+        { name: '确定' },
+      ),
+    );
+
+    expect(onExecuteAction).toHaveBeenCalledWith(
+      expect.objectContaining({
+        action: 'generate_puzzle_ui_background',
+        promptText: '雨夜猫街竖屏拼图UI背景',
+      }),
+    );
+    expect(
+      screen.getByRole('button', { name: /生成中/u }),
+    ).toHaveProperty('disabled', true);
+
+    openPuzzleLevelsTab();
+    const addLevelButton = screen.getByRole('button', { name: /新增关卡/u });
+    expect(addLevelButton).toHaveProperty('disabled', false);
+    fireEvent.click(addLevelButton);
+    expect(screen.getByRole('dialog', { name: '关卡详情' })).toBeTruthy();
+  });
+
+  test('restores UI background generate button when background generation fails', () => {
+    const onExecuteAction = vi.fn();
+    const { rerender } = render(
+      <PuzzleResultView
+        session={createSession()}
+        onBack={() => {}}
+        onExecuteAction={onExecuteAction}
+        isBusy={false}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '素材配置' }));
+    fireEvent.change(screen.getByLabelText('拼图UI背景提示词'), {
+      target: { value: '雨夜猫街竖屏拼图UI背景' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /生成UI背景/u }));
+    fireEvent.click(
+      within(screen.getByRole('dialog', { name: /确认消耗泥点/u })).getByRole(
+        'button',
+        { name: '确定' },
+      ),
+    );
+
+    expect(screen.getByRole('button', { name: /生成中/u })).toHaveProperty(
+      'disabled',
+      true,
+    );
+
+    rerender(
+      <PuzzleResultView
+        session={createSession()}
+        error="UI背景生成失败"
+        onBack={() => {}}
+        onExecuteAction={onExecuteAction}
+        isBusy={false}
+      />,
+    );
+
+    const generateButton = screen.getByRole('button', { name: /生成UI背景/u });
+    expect(generateButton).toHaveProperty('disabled', false);
+    expect(screen.queryByRole('button', { name: /生成中/u })).toBeNull();
+  });
+
  test('keeps the current level dialog open when another level generation completes', () => {
    const base = createSession();
    const firstLevel = base.draft!.levels![0]!;
@@ -1143,6 +1265,7 @@ describe('PuzzleResultView', () => {
      imageModel: 'gpt-image-2',
      aiRedraw: true,
      candidateCount: 1,
+      shouldAutoNameLevel: false,
      workTitle: '暖灯猫街作品',
      workDescription: '一套雨夜猫街主题拼图。',
      summary: '一套雨夜猫街主题拼图。',
--- a/src/components/puzzle-result/PuzzleResultView.tsx
+++ b/src/components/puzzle-result/PuzzleResultView.tsx
@@ -93,6 +93,11 @@ type PuzzleLevelGenerationRuntime = {
  estimateSeconds: number;
 };

+type PuzzleUiBackgroundGenerationState = {
+  levelId: string;
+  prompt: string;
+} | null;
+
 function resolvePuzzleLevelGenerationProgress(
  level: PuzzleDraftLevel,
  runtime: PuzzleLevelGenerationRuntime | null,
@@ -1409,16 +1414,22 @@ function PuzzleUiAssetsTab({
  editState,
  imageRefreshKey,
  isBusy,
+  uiBackgroundGeneration,
  onChange,
  onGenerate,
 }: {
  editState: DraftEditState;
  imageRefreshKey: string;
  isBusy: boolean;
+  uiBackgroundGeneration: PuzzleUiBackgroundGenerationState;
  onChange: (nextState: DraftEditState) => void;
  onGenerate: (prompt: string) => void;
 }) {
  const firstLevel = editState.levels[0] ?? null;
+  const isGeneratingUiBackground = Boolean(
+    firstLevel &&
+      uiBackgroundGeneration?.levelId === firstLevel.levelId,
+  );
  const formalImageSrc = firstLevel ? resolveLevelFormalImageSrc(firstLevel) : '';
  const defaultPrompt = buildDefaultPuzzleUiBackgroundPrompt(
    editState,
@@ -1490,21 +1501,30 @@ function PuzzleUiAssetsTab({
              </button>
              <button
                type="button"
-                disabled={!firstLevel || !normalizedPrompt || isBusy}
+                disabled={
+                  !firstLevel ||
+                  !normalizedPrompt ||
+                  isBusy ||
+                  isGeneratingUiBackground
+                }
                onClick={() => {
                  if (!firstLevel || !normalizedPrompt) {
                    return;
                  }
                  setIsCostConfirmOpen(true);
                }}
-                className={`platform-button platform-button--primary min-h-11 justify-center gap-2 px-4 py-3 ${!firstLevel || !normalizedPrompt || isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
+                className={`platform-button platform-button--primary min-h-11 justify-center gap-2 px-4 py-3 ${!firstLevel || !normalizedPrompt || isBusy || isGeneratingUiBackground ? 'cursor-not-allowed opacity-55' : ''}`}
              >
-                {isBusy ? (
+                {isBusy || isGeneratingUiBackground ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Wand2 className="h-4 w-4" />
                )}
-                {hasGeneratedUiBackground ? '重新生成' : '生成UI背景'} · {PUZZLE_IMAGE_GENERATION_POINT_COST}泥点
+                {isGeneratingUiBackground
+                  ? '生成中'
+                  : hasGeneratedUiBackground
+                    ? '重新生成'
+                    : '生成UI背景'} · {PUZZLE_IMAGE_GENERATION_POINT_COST}泥点
              </button>
            </div>
          </div>
@@ -1547,7 +1567,12 @@ function PuzzleUiAssetsTab({
              </button>
              <button
                type="button"
-                disabled={!firstLevel || !normalizedPrompt || isBusy}
+                disabled={
+                  !firstLevel ||
+                  !normalizedPrompt ||
+                  isBusy ||
+                  isGeneratingUiBackground
+                }
                onClick={() => {
                  if (!firstLevel || !normalizedPrompt) {
                    return;
@@ -1559,7 +1584,7 @@ function PuzzleUiAssetsTab({
                  setIsCostConfirmOpen(false);
                  onGenerate(normalizedPrompt);
                }}
-                className={`platform-button platform-button--primary justify-center ${!firstLevel || !normalizedPrompt || isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
+                className={`platform-button platform-button--primary justify-center ${!firstLevel || !normalizedPrompt || isBusy || isGeneratingUiBackground ? 'cursor-not-allowed opacity-55' : ''}`}
              >
                确定
              </button>
@@ -1696,6 +1721,7 @@ function PuzzleAssetConfigTab({
  editState,
  imageRefreshKey,
  isBusy,
+  uiBackgroundGeneration,
  onAssetConfigTabChange,
  onChange,
  onGenerateUiBackground,
@@ -1704,6 +1730,7 @@ function PuzzleAssetConfigTab({
  editState: DraftEditState;
  imageRefreshKey: string;
  isBusy: boolean;
+  uiBackgroundGeneration: PuzzleUiBackgroundGenerationState;
  onAssetConfigTabChange: (tab: PuzzleAssetConfigTabId) => void;
  onChange: (nextState: DraftEditState) => void;
  onGenerateUiBackground: (prompt: string) => void;
@@ -1719,6 +1746,7 @@ function PuzzleAssetConfigTab({
          editState={editState}
          imageRefreshKey={imageRefreshKey}
          isBusy={isBusy}
+          uiBackgroundGeneration={uiBackgroundGeneration}
          onChange={onChange}
          onGenerate={onGenerateUiBackground}
        />
@@ -1829,6 +1857,8 @@ export function PuzzleResultView({
  const [tagGenerationError, setTagGenerationError] = useState<string | null>(
    null,
  );
+  const [uiBackgroundGeneration, setUiBackgroundGeneration] =
+    useState<PuzzleUiBackgroundGenerationState>(null);
  const [generationRuntimeByLevelId, setGenerationRuntimeByLevelId] = useState<
    Record<string, PuzzleLevelGenerationRuntime>
  >({});
@@ -1844,11 +1874,18 @@ export function PuzzleResultView({
    latestEditStateRef.current = editState;
  }, [editState]);

+  useEffect(() => {
+    if (error) {
+      setUiBackgroundGeneration(null);
+    }
+  }, [error]);
+
  useEffect(() => {
    if (!draft) {
      setEditState(null);
      latestEditStateRef.current = null;
      setActiveLevelId(null);
+      setUiBackgroundGeneration(null);
      setAutoSaveState('idle');
      setAutoSaveError(null);
      setTagGenerationError(null);
@@ -1884,6 +1921,19 @@ export function PuzzleResultView({
    setAutoSaveState('idle');
    setAutoSaveError(null);
    setTagGenerationError(null);
+    setUiBackgroundGeneration((current) => {
+      if (
+        current &&
+        mergedState.levels.some(
+          (level) =>
+            level.levelId === current.levelId &&
+            resolvePuzzleUiBackgroundSource(level),
+        )
+      ) {
+        return null;
+      }
+      return current;
+    });
  }, [draft]);

  const syncedDraft = useMemo(() => {
@@ -2163,6 +2213,7 @@ export function PuzzleResultView({
            editState={editState}
            imageRefreshKey={imageRefreshKey}
            isBusy={isBusy}
+            uiBackgroundGeneration={uiBackgroundGeneration}
            onAssetConfigTabChange={setActiveAssetConfigTab}
            onChange={setEditState}
            onGenerateUiBackground={(prompt) => {
@@ -2170,6 +2221,10 @@ export function PuzzleResultView({
              if (!firstLevel) {
                return;
              }
+              setUiBackgroundGeneration({
+                levelId: firstLevel.levelId,
+                prompt,
+              });
              onExecuteAction({
                action: 'generate_puzzle_ui_background',
                levelId: firstLevel.levelId,
@@ -2256,6 +2311,7 @@ export function PuzzleResultView({
              imageModel: imageModel ?? PUZZLE_IMAGE_MODEL_GPT_IMAGE_2,
              aiRedraw: true,
              candidateCount: 1,
+              shouldAutoNameLevel: !nextLevel.levelName.trim(),
              workTitle: editState.workTitle.trim(),
              workDescription: editState.workDescription.trim(),
              summary: editState.workDescription.trim(),