fix(web): preserve home prompt template metadata

Author: YUHAO-corn

apps/web/src/components/HomeView.tsx

@@ -116,6 +116,7 @@ import { useWorkspaceInvalidation } from '../collab/workspace-events';
 import { useWorkspaceSnapshotActivation } from '../collab/workspace-snapshot-activation';
 import {
   buildHomeMediaComposer,
+  homeMediaInputsAfterTemplateChange,
   homeMediaSurfaceForChipId,
   metadataForHomeMediaComposer,
   normalizeHomeMediaInputs,
@@ -2144,9 +2145,24 @@ export function HomeView({
 
   function updateActiveInputs(next: Record<string, unknown>) {
     if (!active) return;
-    const normalized = active.mediaSurface
-      ? normalizeHomeMediaInputs(active.mediaSurface, next, promptTemplates, elevenLabsVoices, composerImageModels)
+    const templateAwareNext = active.mediaSurface
+      ? homeMediaInputsAfterTemplateChange(
+          active.mediaSurface,
+          active.inputs,
+          next,
+          promptTemplates,
+          composerImageModels,
+        )
       : next;
+    const normalized = active.mediaSurface
+      ? normalizeHomeMediaInputs(
+          active.mediaSurface,
+          templateAwareNext,
+          promptTemplates,
+          elevenLabsVoices,
+          composerImageModels,
+        )
+      : templateAwareNext;
     const mediaComposer = active.mediaSurface
       ? buildHomeMediaComposer(active.mediaSurface, promptTemplates, normalized, elevenLabsVoices, {
           elevenLabsVoiceWarning,
@@ -2710,7 +2726,11 @@ export function HomeView({
           );
           return;
         }
-        submittedActive = { ...submittedActive, result, inputs: submittedPluginInputs };
+        // The applied snapshot intentionally uses the run-facing inputs with
+        // hidden footer fields stripped, but the composer must retain its full
+        // model/aspect state so a rejected or blocked create can retry with the
+        // same project metadata.
+        submittedActive = { ...submittedActive, result };
         setActive(submittedActive);
       }
       // Reconcile each selected context against the serialized prompt text before
@@ -2768,7 +2788,11 @@ export function HomeView({
       const submittedProjectKind =
         submittedActive?.projectKind ?? fallbackProjectKind ?? projectKindForSkill(activeSkill) ?? 'other';
       const submittedProjectMetadata = submittedActive?.mediaSurface
-        ? metadataForHomeMediaComposer(submittedActive.mediaSurface, submittedActive.inputs, promptTemplates)
+        ? metadataForHomeMediaComposer(
+            submittedActive.mediaSurface,
+            submittedApplyInputs,
+            promptTemplates,
+          )
         : homeCreateProjectMetadata(
             submittedProjectKind,
             submittedActive?.inputs ?? null,

apps/web/src/components/home-hero/media-surfaces.ts

@@ -56,12 +56,30 @@ export function buildHomeMediaComposer(
   } = {},
 ): HomeMediaComposerState {
   const imageModels = options.imageModels ?? IMAGE_MODELS;
+  const defaultInputs = defaultInputsForSurface(surface, promptTemplates, imageModels);
+  const seededInputs = {
+    ...defaultInputs,
+    ...seedInputs,
+  };
+  const templateAwareInputs = surface === 'image'
+    ? homeMediaInputsAfterTemplateChange(
+        surface,
+        seedInputs,
+        {
+          ...seededInputs,
+          template: validTemplateId(
+            surface,
+            stringValue(seededInputs.template),
+            promptTemplates,
+          ),
+        },
+        promptTemplates,
+        imageModels,
+      )
+    : seededInputs;
   const inputs = normalizeHomeMediaInputs(
     surface,
-    {
-      ...defaultInputsForSurface(surface, promptTemplates),
-      ...seedInputs,
-    },
+    templateAwareInputs,
     promptTemplates,
     voiceOptions,
     imageModels,
@@ -88,14 +106,15 @@ export function normalizeHomeMediaInputs(
 ): Record<string, unknown> {
   if (surface === 'image') {
     const ratio = validOption(stringValue(raw.ratio) || stringValue(raw.aspect), MEDIA_ASPECTS, '16:9');
+    const rawModel = stringValue(raw.model);
     return {
       mediaKind: 'image',
       subject: stringValue(raw.subject) || 'a premium product concept',
       style: stringValue(raw.style) || 'premium product-studio, elegant composition, refined lighting, restrained color',
       aspect: ratio,
       template: validTemplateId(surface, stringValue(raw.template), promptTemplates),
       designSystem: stringValue(raw.designSystem) || 'the active project design system',
-      model: validOption(stringValue(raw.model), imageModels.map((m) => m.id), DEFAULT_IMAGE_MODEL),
+      model: validImageModel(rawModel, imageModels) ? rawModel : DEFAULT_IMAGE_MODEL,
       ratio,
       resolution: validOption(stringValue(raw.resolution), MEDIA_RESOLUTIONS, DEFAULT_MEDIA_RESOLUTION),
     };
@@ -191,9 +210,14 @@ export function metadataForHomeMediaComposer(
   // run aligned with the model shown in the Home composer.
   if (surface === 'image') {
     const imageModel = stringValue(inputs.model);
+    const selectedAspect = stringValue(inputs.aspect);
+    const imageAspect = template && validImageTemplateAspect(selectedAspect)
+      ? selectedAspect
+      : null;
     return {
       kind: 'image',
       ...(imageModel ? { imageModel } : {}),
+      ...(imageAspect ? { imageAspect } : {}),
       ...(promptTemplate ? { promptTemplate } : {}),
     };
   }
@@ -209,6 +233,38 @@ export function metadataForHomeMediaComposer(
   };
 }
 
+export function homeMediaInputsAfterTemplateChange(
+  surface: HomeComposerMediaSurface,
+  previousInputs: Record<string, unknown>,
+  nextInputs: Record<string, unknown>,
+  promptTemplates: PromptTemplateSummary[],
+  imageModels: MediaModel[] = IMAGE_MODELS,
+): Record<string, unknown> {
+  if (
+    surface !== 'image'
+    || stringValue(previousInputs.template) === stringValue(nextInputs.template)
+  ) {
+    return nextInputs;
+  }
+
+  const template = promptTemplates.find(
+    (item) => item.surface === 'image' && item.id === stringValue(nextInputs.template),
+  );
+  if (!template) return nextInputs;
+
+  const model = validImageModel(template.model, imageModels)
+    ? template.model
+    : null;
+  const aspect = validImageTemplateAspect(template.aspect)
+    ? template.aspect
+    : null;
+  return {
+    ...nextInputs,
+    ...(model ? { model } : {}),
+    ...(aspect ? { aspect, ratio: aspect } : {}),
+  };
+}
+
 export function templatesForHomeMediaSurface(
   surface: HomeComposerMediaSurface,
   promptTemplates: PromptTemplateSummary[],
@@ -309,13 +365,22 @@ function queryTemplateForSurface(surface: HomeComposerMediaSurface, inputs: Reco
 function defaultInputsForSurface(
   surface: HomeComposerMediaSurface,
   promptTemplates: PromptTemplateSummary[],
+  imageModels: MediaModel[] = IMAGE_MODELS,
 ): Record<string, unknown> {
   if (surface === 'image') {
+    const template = templatesForHomeMediaSurface(surface, promptTemplates)[0] ?? null;
+    const model = template && validImageModel(template.model, imageModels)
+      ? template.model
+      : DEFAULT_IMAGE_MODEL;
+    const aspect = template && validImageTemplateAspect(template.aspect)
+      ? template.aspect
+      : '16:9';
     return {
-      template: firstTemplateId(surface, promptTemplates),
+      template: template?.id ?? NO_TEMPLATE_PLACEHOLDER,
       designSystem: 'the active project design system',
-      model: DEFAULT_IMAGE_MODEL,
-      ratio: '16:9',
+      model,
+      aspect,
+      ratio: aspect,
       resolution: DEFAULT_MEDIA_RESOLUTION,
     };
   }
@@ -337,6 +402,22 @@ function defaultInputsForSurface(
   return { text: 'the user\'s brief', audioType: 'speech', model: defaultHomeAudioModel('speech'), duration: 10 };
 }
 
+function validImageModel(
+  model: string | undefined,
+  imageModels: MediaModel[],
+): model is string {
+  return Boolean(
+    model
+    && (imageModels.some((item) => item.id === model) || model.startsWith('aihubmix-')),
+  );
+}
+
+function validImageTemplateAspect(
+  aspect: string | undefined,
+): aspect is (typeof MEDIA_ASPECTS)[number] {
+  return Boolean(aspect && (MEDIA_ASPECTS as readonly string[]).includes(aspect));
+}
+
 function stringField(name: string, label: string, placeholder?: string): InputFieldSpec {
   return {
     name,

apps/web/tests/components/HomeView.media-options.test.tsx

@@ -301,10 +301,66 @@ describe('HomeView media composer options', () => {
     });
   });
 
+  it('submits the image prompt template model and aspect from the Home entry', async () => {
+    stubFetch();
+    const onSubmit = vi.fn();
+    const portraitTemplate: PromptTemplateSummary = {
+      ...PROMPT_TEMPLATES[0]!,
+      aspect: '3:4',
+    };
+    renderHome({ onSubmit, promptTemplates: [portraitTemplate] });
+
+    await clickHomeRailChip('image');
+    await setHomePrompt('Create a portrait campaign image.');
+    await submitHome();
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+        projectMetadata: expect.objectContaining({
+          imageModel: 'gpt-image-2',
+          imageAspect: '3:4',
+          promptTemplate: expect.objectContaining({ id: 'image-product' }),
+        }),
+      }));
+    });
+  });
+
+  it('retains image template metadata when a rejected create is retried', async () => {
+    stubFetch();
+    const onSubmit = vi.fn()
+      .mockResolvedValueOnce(false)
+      .mockResolvedValueOnce(true);
+    const portraitTemplate: PromptTemplateSummary = {
+      ...PROMPT_TEMPLATES[0]!,
+      aspect: '3:4',
+    };
+    renderHome({ onSubmit, promptTemplates: [portraitTemplate] });
+
+    await clickHomeRailChip('image');
+    await setHomePrompt('Create a retryable portrait image.');
+    await submitHome();
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    await submitHome();
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(2));
+
+    for (const [payload] of onSubmit.mock.calls) {
+      expect(payload).toEqual(expect.objectContaining({
+        projectMetadata: expect.objectContaining({
+          imageModel: 'gpt-image-2',
+          imageAspect: '3:4',
+        }),
+      }));
+    }
+  });
+
   it('updates submitted template metadata after media templates load', async () => {
     stubFetch();
     const onSubmit = vi.fn();
     const props = homeProps({ onSubmit, promptTemplates: [] });
+    const portraitTemplate: PromptTemplateSummary = {
+      ...PROMPT_TEMPLATES[0]!,
+      aspect: '3:4',
+    };
     const view = render(<HomeView {...props} />);
 
     await clickHomeRailChip('image');
@@ -320,12 +376,14 @@ describe('HomeView media composer options', () => {
     });
 
     onSubmit.mockClear();
-    view.rerender(<HomeView {...props} promptTemplates={PROMPT_TEMPLATES} />);
+    view.rerender(<HomeView {...props} promptTemplates={[portraitTemplate]} />);
     await submitHome();
 
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
         projectMetadata: expect.objectContaining({
+          imageModel: 'gpt-image-2',
+          imageAspect: '3:4',
           promptTemplate: expect.objectContaining({ id: 'image-product' }),
         }),
       }));