fix(hub): render JSX thumbnails through babel runtime even when source contains <html>

hqhq1025 · hqhq1025 · commit 2f91ab398033 · 2026-04-21T16:18:34.000+08:00
needsJsxRuntime was returning false for any source containing &lt;html&gt; or
&lt;!doctype&gt;, but agent-generated JSX regularly wraps its output in a
function App() { return &lt;html&gt;...&lt;/html&gt; }. The raw-HTML fast-path then
injected the JSX module verbatim as srcDoc, and the iframe rendered
function/const declarations as plain text alongside partially-parsed
tags — the thumbnail showed half rendered layout, half naked source.

Priority flipped: EDITMODE-BEGIN / ReactDOM.createRoot / function App
are strong agent-only signals and now win over the HTML tag fast-path.
Added regression test covering the exact shape from the bug report.

Export the helper so the test can reach it without a round-trip through
the full component.
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
@@ -765,15 +765,31 @@ function registerIpcHandlers(): void {
     }
     const allowKeyless = active.allowKeyless;
     const baseUrl = active.baseUrl ?? undefined;
-    return generateTitle({
-      prompt,
-      model: active.model,
-      apiKey,
-      ...(baseUrl !== undefined ? { baseUrl } : {}),
-      wire: active.wire,
-      ...(active.httpHeaders !== undefined ? { httpHeaders: active.httpHeaders } : {}),
-      ...(allowKeyless ? { allowKeyless: true } : {}),
-    });
+    const titleLogger: CoreLogger = {
+      info: (event, data) => logIpc.info(event, data),
+      error: (event, data) => logIpc.error(event, data),
+    };
+    try {
+      return await generateTitle({
+        prompt,
+        model: active.model,
+        apiKey,
+        ...(baseUrl !== undefined ? { baseUrl } : {}),
+        wire: active.wire,
+        ...(active.httpHeaders !== undefined ? { httpHeaders: active.httpHeaders } : {}),
+        ...(allowKeyless ? { allowKeyless: true } : {}),
+        logger: titleLogger,
+      });
+    } catch (err) {
+      logIpc.error('[title] generate-title.fail', {
+        provider: active.model.provider,
+        modelId: active.model.modelId,
+        baseUrl,
+        message: err instanceof Error ? err.message : String(err),
+        code: err instanceof CodesignError ? err.code : undefined,
+      });
+      throw err;
+    }
   });
 
   ipcMain.handle('codesign:open-log-folder', async () => {
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
@@ -17,6 +17,7 @@ import type {
 import { create } from 'zustand';
 import type { StoreApi } from 'zustand';
 import type { CodesignApi, ExportFormat } from '../../preload/index';
+import { rendererLogger } from './lib/renderer-logger';
 
 declare global {
   interface Window {
@@ -661,9 +662,14 @@ async function maybeAutoRename(
       const trimmed = generated.trim();
       if (trimmed.length > 0) newName = trimmed;
     }
-  } catch {
+  } catch (err) {
     // Fall through to the truncation fallback — don't surface a toast; the
     // name itself is a nice-to-have and the user can always rename manually.
+    // But DO log the failure so we can see why in the main-process log.
+    rendererLogger.warn('store', '[title] generateTitle failed, using prompt fallback', {
+      designId,
+      message: err instanceof Error ? err.message : String(err),
+    });
   }
   try {
     await window.codesign.snapshots.renameDesign(designId, newName);
diff --git a/apps/desktop/src/renderer/src/views/hub/DesignCardPreview.needsJsxRuntime.test.ts b/apps/desktop/src/renderer/src/views/hub/DesignCardPreview.needsJsxRuntime.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { needsJsxRuntime } from './DesignCardPreview';
+
+describe('needsJsxRuntime', () => {
+  it('returns true for JSX that also contains <html> inside a return block', () => {
+    // Regression for hub thumbnails rendering JSX source as plain text.
+    // The `<html>` inside a `function App() { return <html>...</html> }` body
+    // used to trigger the raw-HTML fast-path and bypass the babel runtime.
+    const jsxWithHtmlTag = `const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"a":1}/*EDITMODE-END*/;
+function App() {
+  return (
+    <html>
+      <body><h1>Hi</h1></body>
+    </html>
+  );
+}
+ReactDOM.createRoot(document.getElementById('root')).render(<App/>);`;
+    expect(needsJsxRuntime(jsxWithHtmlTag)).toBe(true);
+  });
+
+  it('returns true for EDITMODE-marked JSX without <html>', () => {
+    expect(
+      needsJsxRuntime(
+        `const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"accent":"#000"}/*EDITMODE-END*/;\nfunction App(){ return <div/>; }`,
+      ),
+    ).toBe(true);
+  });
+
+  it('returns false for a real HTML document', () => {
+    expect(
+      needsJsxRuntime('<!doctype html>\n<html><head><title>x</title></head><body>hi</body></html>'),
+    ).toBe(false);
+  });
+
+  it('returns false for plain body-only HTML with no JSX markers', () => {
+    expect(needsJsxRuntime('<div>hello</div>')).toBe(false);
+  });
+
+  it('returns true for ReactDOM.createRoot even without EDITMODE marker', () => {
+    expect(
+      needsJsxRuntime(
+        `function App(){return <p/>;}\nReactDOM.createRoot(document.getElementById('root')).render(<App/>);`,
+      ),
+    ).toBe(true);
+  });
+});
diff --git a/apps/desktop/src/renderer/src/views/hub/DesignCardPreview.tsx b/apps/desktop/src/renderer/src/views/hub/DesignCardPreview.tsx
@@ -30,13 +30,19 @@ function injectThumbnailStyle(srcDoc: string): string {
 }
 
 // Lightweight JSX detection — mirrors runtime's isJsxArtifact without importing it.
-function needsJsxRuntime(source: string): boolean {
-  if (/<!doctype/i.test(source) || /<html[^>]*>/i.test(source)) return false;
-  return (
+// JSX markers take priority over HTML tags: our agent always emits
+// `EDITMODE-BEGIN` (and often `ReactDOM.createRoot`) in JSX artifacts, and the
+// JSX body itself commonly includes `<html>`/`<head>` tags inside a
+// `function App(){ return <html>...</html> }` return. Checking HTML first made
+// every JSX thumbnail render as raw source text in the hub grid.
+export function needsJsxRuntime(source: string): boolean {
+  const hasJsxMarker =
     /EDITMODE-BEGIN/.test(source) ||
     /ReactDOM\.createRoot\s*\(/.test(source) ||
-    /^\s*function\s+App\s*\(/m.test(source)
-  );
+    /^\s*function\s+App\s*\(/m.test(source);
+  if (hasJsxMarker) return true;
+  if (/<!doctype/i.test(source) || /<html[^>]*>/i.test(source)) return false;
+  return false;
 }
 
 export interface DesignCardPreviewProps {
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -764,7 +764,7 @@ export async function generateTitle(input: GenerateTitleInput): Promise<string>
       ...(input.httpHeaders !== undefined ? { httpHeaders: input.httpHeaders } : {}),
       ...(input.allowKeyless === true ? { allowKeyless: true } : {}),
       ...(input.signal !== undefined ? { signal: input.signal } : {}),
-      maxTokens: 60,
+      maxTokens: 200,
     });
     log.info('[title] step=send_request.ok', { ms: Date.now() - started });
     const title = sanitizeTitle(result.content);
