Fix Open Design example logo loading (#5765)

* Fix Open Design example logo loading

Generated-By: looper 0.0.0-dev (runner=worker, agent=codex)

* Stabilize visual home cold start checks

Generated-By: looper 0.0.0-dev (runner=worker, agent=codex)

Author: lefarcen

apps/web/src/components/HomeHero.tsx

@@ -2257,11 +2257,20 @@ function PluginPromptPresets({
   );
 }
 
+const FIRST_PARTY_WEB_CLONE_SITE_ICONS: Record<string, string> = {
+  'open-design.ai': '/logo.svg',
+};
+
+function webCloneFaviconUrl(domain: string): string {
+  return `https://www.google.com/s2/favicons?sz=128&domain=${encodeURIComponent(domain)}`;
+}
+
 // A Website-clone text example ("Website URL to clone: https://open-design.ai") —
-// pull the site out so the card can show the site's own favicon + bare domain
-// instead of the raw prompt line. Returns null for non-URL examples so the
-// generic text card renders unchanged.
-function webCloneExampleSite(example: string): { domain: string; faviconUrl: string } | null {
+// pull the site out so the card can show the site's own mark + bare domain
+// instead of the raw prompt line. First-party bundled examples use local assets
+// so the first screen is stable without waiting on a remote favicon service.
+// Returns null for non-URL examples so the generic text card renders unchanged.
+function webCloneExampleSite(example: string): { domain: string; iconUrl: string; fallbackIconUrl?: string } | null {
   const match = example.match(/https?:\/\/[^\s"'<>]+/i);
   if (!match) return null;
   let hostname: string;
@@ -2271,12 +2280,11 @@ function webCloneExampleSite(example: string): { domain: string; faviconUrl: str
     return null;
   }
   if (!hostname || !hostname.includes('.')) return null;
-  // The site's own favicon, resolved at render time via Google's public service
-  // — no third-party brand assets are bundled into the repo, and a broken/blocked
-  // fetch falls back to a lettered tile.
+  const firstPartyIcon = FIRST_PARTY_WEB_CLONE_SITE_ICONS[hostname];
   return {
     domain: hostname,
-    faviconUrl: `https://www.google.com/s2/favicons?sz=128&domain=${encodeURIComponent(hostname)}`,
+    iconUrl: firstPartyIcon ?? webCloneFaviconUrl(hostname),
+    ...(firstPartyIcon ? { fallbackIconUrl: webCloneFaviconUrl(hostname) } : {}),
   };
 }
 
@@ -2289,10 +2297,16 @@ function WebClonePromptExampleCard({
   pulse: boolean;
   onPick: (example: string) => void;
 }) {
-  const [iconFailed, setIconFailed] = useState(false);
+  const [iconStage, setIconStage] = useState<'primary' | 'fallback' | 'failed'>('primary');
   const site = webCloneExampleSite(example);
   const domain = site?.domain ?? example;
   const monogram = (domain.replace(/[^a-z0-9]/i, '')[0] ?? '?').toUpperCase();
+  let iconUrl: string | null = null;
+  if (site && iconStage === 'primary') {
+    iconUrl = site.iconUrl;
+  } else if (site && iconStage === 'fallback') {
+    iconUrl = site.fallbackIconUrl ?? null;
+  }
   return (
     <button
       type="button"
@@ -2302,12 +2316,15 @@ function WebClonePromptExampleCard({
       title={domain}
     >
       <span className="home-hero__site-badge" aria-hidden>
-        {site && !iconFailed ? (
+        {site && iconUrl ? (
           <img
-            src={site.faviconUrl}
+            src={iconUrl}
             alt=""
-            loading="lazy"
-            onError={() => setIconFailed(true)}
+            loading="eager"
+            fetchPriority="high"
+            onError={() => {
+              setIconStage((stage) => (stage === 'primary' && site.fallbackIconUrl ? 'fallback' : 'failed'));
+            }}
           />
         ) : (
           <span className="home-hero__site-monogram">{monogram}</span>

apps/web/tests/components/HomeView.web-clone-tracking.test.tsx

@@ -141,6 +141,39 @@ describe('web-clone example-card tracking', () => {
     ).toBe(true);
   });
 
+  it('renders the contracted Open Design site card with a local eager logo', async () => {
+    writeHomeGuideStage('done');
+    stubPlugins();
+    renderHome();
+
+    fireEvent.click(await screen.findByTestId('home-hero-rail-web-clone'));
+    const siteCard = (await screen.findAllByTestId('home-hero-prompt-example'))[0]!;
+    const logo = siteCard.querySelector<HTMLImageElement>('.home-hero__site-badge img');
+    expect(logo?.getAttribute('src')).toBe('/logo.svg');
+    expect(logo?.getAttribute('loading')).toBe('eager');
+    expect(logo?.getAttribute('fetchpriority')).toBe('high');
+  });
+
+  it('falls back when the local Open Design site card logo cannot load', async () => {
+    writeHomeGuideStage('done');
+    stubPlugins();
+    renderHome();
+
+    fireEvent.click(await screen.findByTestId('home-hero-rail-web-clone'));
+    const siteCard = (await screen.findAllByTestId('home-hero-prompt-example'))[0]!;
+    const localLogo = siteCard.querySelector<HTMLImageElement>('.home-hero__site-badge img');
+    expect(localLogo?.getAttribute('src')).toBe('/logo.svg');
+
+    fireEvent.error(localLogo!);
+    const remoteFallback = siteCard.querySelector<HTMLImageElement>('.home-hero__site-badge img');
+    expect(remoteFallback?.getAttribute('src')).toBe(
+      'https://www.google.com/s2/favicons?sz=128&domain=open-design.ai',
+    );
+
+    fireEvent.error(remoteFallback!);
+    expect(siteCard.querySelector('.home-hero__site-monogram')?.textContent).toBe('O');
+  });
+
   it('fires element=example_prompt with chip_id=web-clone when a text example is picked', async () => {
     writeHomeGuideStage('done');
     stubPlugins();

e2e/lib/playwright/visual.ts

@@ -575,7 +575,7 @@ export async function mockSignedInVelaAccount(
 }
 
 export async function waitForVisualReady(page: Page): Promise<void> {
-  await page.getByText('Loading Open Design…').waitFor({ state: 'hidden', timeout: T.long });
+  await page.getByText('Loading Open Design…').waitFor({ state: 'hidden', timeout: T.xlong });
   await expect(page.getByTestId('home-hero')).toBeVisible({ timeout: T.medium });
   await expect(page.getByTestId('home-hero-input')).toBeVisible({ timeout: T.medium });
   await page.evaluate(async () => {

e2e/playwright.visual.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   testDir: './ui',
   testMatch: 'visual-*.test.ts',
   outputDir: './ui/reports/visual-test-results',
-  timeout: Number(process.env.OD_PLAYWRIGHT_TIMEOUT) || 60_000,
+  timeout: Number(process.env.OD_PLAYWRIGHT_TIMEOUT) || 240_000,
   expect: {
     timeout: 10_000,
   },