restructure Home creation hierarchy (#6914)

* restructure Home creation hierarchy

* test(home): align Prototype expectations

Author: Siri-Ray

apps/web/src/components/HomeHero.tsx

@@ -59,6 +59,7 @@ import { ScenarioArt } from './home-hero/ScenarioArt';
 import { useEdgeAutoScroll, EdgeScrollZones } from './home-hero/EdgeAutoScroll';
 import {
   isSubChipParent,
+  prototypeSubChipForSlug,
   subChipsForChip,
   type HomeHeroSubChip,
 } from './home-hero/sub-chips';
@@ -165,6 +166,9 @@ interface Props {
   activePluginIsExplicit?: boolean;
   activePluginRecord?: InstalledPluginRecord | null;
   activeChipId: string | null;
+  // Prototype's selected second-level scene is owned by HomeView so action
+  // metadata and persistence stay aligned with the visible filter selection.
+  activePrototypeSubtypeId?: string | null;
   onClearActivePlugin: () => void;
   onClearActiveChip?: () => void;
   activeSkillId?: string | null;
@@ -229,6 +233,7 @@ interface Props {
   onPickMcp?: (server: McpServerConfig, nextPrompt: string) => void;
   onPickConnector?: (connector: ConnectorDetail, nextPrompt: string) => void;
   onPickChip: (chip: HomeHeroChip) => void;
+  onPickPrototypeSubtype?: (sub: HomeHeroSubChip | null) => void;
   contextItemCount: number;
   error: string | null;
   showActivePluginChip?: boolean;
@@ -357,6 +362,8 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
     onPickMcp = () => undefined,
     onPickConnector = () => undefined,
     onPickChip,
+    activePrototypeSubtypeId,
+    onPickPrototypeSubtype,
     contextItemCount,
     error,
     showActivePluginChip = true,
@@ -392,9 +399,14 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
   const [guidePulseChipId, setGuidePulseChipId] = useState<string | null>(null);
   const [guidePulseFirstPreset, setGuidePulseFirstPreset] = useState(false);
   // Selected second-level sub-category slug (Prototype / Slide deck rail).
-  // Local-only: it filters the example-prompt cards below the rail. It never
-  // binds a plugin or stamps an active badge.
-  const [selectedSubcategory, setSelectedSubcategory] = useState<string | null>(null);
+  // Deck remains a local example filter. Prototype is controlled by HomeView:
+  // every scene binds the Prototype action, while Mobile/Wireframe additionally
+  // retain the project metadata from their former top-level actions.
+  const [localSelectedSubcategory, setLocalSelectedSubcategory] = useState<string | null>(null);
+  const selectedSubcategory =
+    activeChipId === 'prototype' && activePrototypeSubtypeId !== undefined
+      ? activePrototypeSubtypeId
+      : localSelectedSubcategory;
   // Footer Template pill preview: the create-rail card the pointer is over,
   // so hovering a card below previews it in the pill (cleared on rail-leave).
   const [previewTemplateId, setPreviewTemplateId] = useState<string | null>(null);
@@ -439,13 +451,17 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
   // with nothing bound we cycle the full set. Memoised by chip + locale so the
   // reference only changes on a real switch, which restarts the carousel.
   const carouselScenarios = useMemo<PlaceholderScenario[]>(() => {
+    const nestedActionChipId =
+      activeChipId === 'prototype'
+        ? prototypeSubChipForSlug(activePrototypeSubtypeId ?? null)?.actionChipId ?? null
+        : null;
     return buildPlaceholderScenarios({
-      activeChipId,
+      activeChipId: nestedActionChipId ?? activeChipId,
       resolveTextKey: (key) => t(key),
       examplesForChip: (chipId) => homeHeroChipPromptExamples(chipId, locale),
       fallbackForChip: (chipId) => fallbackPlaceholderScenarioText(chipId, locale, t),
     });
-  }, [activeChipId, locale, t]);
+  }, [activeChipId, activePrototypeSubtypeId, locale, t]);
   // The placeholder carousel runs while the composer is empty and nothing
   // OTHER than a create-template chip is bound. A selected template keeps it
   // alive (showing that template's scenarios); only an explicit plugin/skill
@@ -738,9 +754,19 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
   // deck/image plugin that merely carries a "brand" tag is not pulled in.
   const filteredExamplePlugins = useMemo(() => {
     if (!selectedSubcategory || !isSubChipParent(activeChipId)) return activeExamplePlugins;
+    // Mobile shares the existing Apps facet. Wireframe is a generation
+    // constraint rather than a plugin taxonomy, so keep the Prototype starter
+    // pool visible while the selected action carries its lo-fi metadata.
+    const facetSubcategory =
+      activeChipId === 'prototype' && selectedSubcategory === 'mobile'
+        ? 'app-prototypes'
+        : activeChipId === 'prototype' && selectedSubcategory === 'wireframe'
+          ? null
+          : selectedSubcategory;
+    if (!facetSubcategory) return activeExamplePlugins;
     const pool = pluginOptions.filter((plugin) => plugin.manifest?.od?.kind !== 'atom');
     return sortByVisualAppeal(
-      applyFacetSelection(pool, { category: activeChipId, subcategory: selectedSubcategory }),
+      applyFacetSelection(pool, { category: activeChipId, subcategory: facetSubcategory }),
     );
   }, [activeExamplePlugins, activeChipId, selectedSubcategory, pluginOptions]);
 
@@ -853,7 +879,7 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
 
   useEffect(() => {
     setSelectedPromptExample(null);
-    setSelectedSubcategory(null);
+    setLocalSelectedSubcategory(null);
   }, [activeChipId]);
 
   useEffect(() => {
@@ -1270,7 +1296,7 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
         <PixelScanLogo className="home-hero__logo home-hero__logo--tiles" />
       </span>
 
-      {/* Capsule type row: the 12 create-scenario types as pill chips above
+      {/* Capsule type row: the 10 top-level create-scenario types as pill chips above
           the composer (per product — replaces the fanned card carousel); the
           selected pill carries the accent tint, click switches. */}
       <TypePillRow
@@ -2103,7 +2129,9 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
               chip_id: activeChipId ?? undefined,
               subcategory: sub.slug,
             });
-            setSelectedSubcategory((current) => (current === sub.slug ? null : sub.slug));
+            const next = selectedSubcategory === sub.slug ? null : sub;
+            setLocalSelectedSubcategory(next?.slug ?? null);
+            if (activeChipId === 'prototype') onPickPrototypeSubtype?.(next);
           }}
           onSelectAll={() => {
             trackHomeChatComposerClick(analytics.track, {
@@ -2113,7 +2141,8 @@ export const HomeHero = forwardRef<HomeHeroHandle, Props>(function HomeHero(
               chip_id: activeChipId ?? undefined,
               subcategory: 'all',
             });
-            setSelectedSubcategory(null);
+            setLocalSelectedSubcategory(null);
+            if (activeChipId === 'prototype') onPickPrototypeSubtype?.(null);
           }}
         />
       ) : null}
@@ -3409,7 +3438,7 @@ function SubTypeChip({
     >
       <Icon name={sub.icon} size={13} className="home-hero__subtype-chip-icon" />
       <span className="home-hero__subtype-chip-label">
-        {pluginSubfacetLabel(sub.slug, sub.label, t)}
+        {homeHeroSubChipLabel(sub, t)}
       </span>
     </button>
   );
@@ -3570,7 +3599,7 @@ function SubTypeRow({
                   >
                     <Icon name={sub.icon} size={13} className="home-hero__subtype-chip-icon" />
                     <span className="home-hero__subtype-chip-label">
-                      {pluginSubfacetLabel(sub.slug, sub.label, t)}
+                      {homeHeroSubChipLabel(sub, t)}
                     </span>
                     {isActive ? <Icon name="check" size={13} /> : null}
                   </button>
@@ -3590,7 +3619,7 @@ function SubTypeRow({
           <span key={sub.slug} className="home-hero__subtype-chip" data-measure="chip">
             <Icon name={sub.icon} size={13} className="home-hero__subtype-chip-icon" />
             <span className="home-hero__subtype-chip-label">
-              {pluginSubfacetLabel(sub.slug, sub.label, t)}
+              {homeHeroSubChipLabel(sub, t)}
             </span>
           </span>
         ))}
@@ -3603,6 +3632,15 @@ function SubTypeRow({
   );
 }
 
+function homeHeroSubChipLabel(
+  sub: HomeHeroSubChip,
+  t: ReturnType<typeof useT>,
+): string {
+  if (sub.slug === 'mobile') return t('homeHero.chip.mobile');
+  if (sub.slug === 'wireframe') return t('homeHero.chip.wireframe');
+  return pluginSubfacetLabel(sub.slug, sub.label, t);
+}
+
 interface ShortcutsMenuProps {
   activeChipId: string | null;
   pendingChipId: string | null;