fix(web): seed example/replicate composer prompts with the curated description (#4103)

The example-prompt cards and the detail modal's 'Replicate this content'
seeded the composer with the en query's leading paragraph. For 19 of the
_official/examples plugins that paragraph is a generator-facing build
spec (stack/file-layout instructions, raw HTML for aerocore, or a
dangling 'as described below' whose referent was truncated away) — noise
in the textarea instead of the curated natural-language description.

examplePresetSeedPrompt now prefers the curated description for every
locale (zh already did), keeping the rendered query head only for
input-templated queries (raw {{...}} placeholders in the leading
paragraph) so placeholder write-back into plugin inputs survives, and as
the fallback when no description exists.

Co-authored-by: qiongyu1999 <2694684348@qq.com>

Author: elihahah666

apps/web/src/components/plugins-home/presetSeedPrompt.ts

@@ -99,6 +99,18 @@ export function isMetaInstructionSeed(value: string): boolean {
   return /逐字注入|以\s*en\s*字段为准|verbatim|example\.html/iu.test(value);
 }
 
+// Non-global twin of INPUT_PLACEHOLDER_PATTERN — `.test()` on a /g/ regex is
+// stateful (lastIndex), so probing uses this one.
+const HAS_INPUT_PLACEHOLDER_PATTERN = /\{\{\s*[a-zA-Z_][\w-]*\s*\}\}/;
+
+function usableQueryHead(record: InstalledPluginRecord, query: string): string | null {
+  const head = firstPromptParagraph(renderPluginPresetQuery(record, query));
+  // Skip meta-instructions that reference fields/assets the model can't see
+  // from the textarea.
+  if (head && !isMetaInstructionSeed(head)) return head;
+  return null;
+}
+
 export interface PresetSeed {
   text: string;
   // True when `text` is the rendered plugin query itself (a human-friendly,
@@ -126,14 +138,24 @@ export function examplePresetSeedPrompt(
     return { text: description, fromRenderedQuery: false };
   }
   const query = pluginPresetQuery(record, locale);
-  if (query) {
-    const head = firstPromptParagraph(renderPluginPresetQuery(record, query));
-    // Skip meta-instructions that reference fields/assets the model can't see
-    // from the textarea; fall back to the description.
-    if (head && !isMetaInstructionSeed(head)) {
-      return { text: head, fromRenderedQuery: true };
-    }
+  // Input-templated queries (raw `{{...}}` placeholders in the leading
+  // paragraph) are authored as editable human seeds; keep the rendered head so
+  // editing a hydrated value in the composer still writes back into the
+  // plugin inputs.
+  if (query && HAS_INPUT_PLACEHOLDER_PATTERN.test(firstPromptParagraph(query))) {
+    const head = usableQueryHead(record, query);
+    if (head) return { text: head, fromRenderedQuery: true };
   }
+  // Otherwise prefer the curated natural-language description: for many
+  // example plugins the en query opens with a generator-facing build spec
+  // (stack/file-layout instructions, raw HTML, or a paragraph dangling "as
+  // described below" whose referent was truncated away) that reads as noise
+  // in the composer. The full spec still reaches the agent as plugin context
+  // (SKILL.md + example.html) once the plugin is applied.
   if (description) return { text: description, fromRenderedQuery: false };
+  if (query) {
+    const head = usableQueryHead(record, query);
+    if (head) return { text: head, fromRenderedQuery: true };
+  }
   return { text: fallback(), fromRenderedQuery: false };
 }

apps/web/tests/components/HomeView.prefill.test.tsx

@@ -1053,8 +1053,11 @@ describe('HomeView prompt handoff', () => {
     fireEvent.click(liveArtifactTemplatePreset);
 
     screen.getByTestId('home-hero-input');
+    // The composer seed prefers the curated description over the query head
+    // (the query is generator-facing; it still reaches the agent as plugin
+    // context on apply).
     await waitFor(() => {
-      expect(homeHeroPromptText()).toBe('Create a refreshable Notion dashboard live artifact.');
+      expect(homeHeroPromptText()).toBe('Create a live Notion dashboard artifact.');
     });
     expect(fetchMock.mock.calls.some(([url]) => (
       typeof url === 'string' && url.includes('/apply')
@@ -1081,7 +1084,7 @@ describe('HomeView prompt handoff', () => {
         intent: 'live-artifact',
         fidelity: 'high-fidelity',
       }),
-      prompt: 'Create a refreshable Notion dashboard live artifact.',
+      prompt: 'Create a live Notion dashboard artifact.',
     })));
   });
 

apps/web/tests/components/preset-seed-prompt.test.ts

@@ -0,0 +1,134 @@
+// Seed contract for the Home example-prompt cards and the plugin detail
+// modal's "Replicate this content" action (issue: the composer was seeded with
+// the en query's leading paragraph, which for many example plugins is a
+// generator-facing build spec — stack/file-layout instructions, raw HTML, or a
+// dangling "as described below" — instead of the curated natural-language
+// description).
+
+import { describe, expect, it } from 'vitest';
+import type { InstalledPluginRecord } from '@open-design/contracts';
+import { examplePresetSeedPrompt } from '../../src/components/plugins-home/presetSeedPrompt';
+
+function fixture(overrides: {
+  id: string;
+  description?: string;
+  query?: string | Record<string, string>;
+  inputs?: Array<Record<string, unknown>>;
+}): InstalledPluginRecord {
+  return {
+    id: overrides.id,
+    title: overrides.id,
+    version: '0.1.0',
+    sourceKind: 'bundled',
+    source: '/tmp',
+    trust: 'bundled',
+    capabilitiesGranted: ['prompt:inject'],
+    manifest: {
+      name: overrides.id,
+      version: '0.1.0',
+      ...(overrides.description ? { description: overrides.description } : {}),
+      od: {
+        ...(overrides.query ? { useCase: { query: overrides.query } } : {}),
+        ...(overrides.inputs ? { inputs: overrides.inputs } : {}),
+      },
+    },
+    fsPath: '/tmp',
+    installedAt: 0,
+    updatedAt: 0,
+  } as InstalledPluginRecord;
+}
+
+const fallback = () => 'fallback seed';
+
+describe('examplePresetSeedPrompt', () => {
+  it('prefers the curated description over a generator-facing build-spec query head (en)', () => {
+    const record = fixture({
+      id: 'dreamcore-landing',
+      description:
+        'Immersive single-page parallax landing: a sticky viewport zooms a portal image toward you on scroll.',
+      query: {
+        en: 'Build a single-page immersive parallax landing page in React + TypeScript + Tailwind CSS using Vite. Everything lives in a single `src/App.tsx` file.\n\nScene one: ...',
+      },
+    });
+    const seed = examplePresetSeedPrompt(record, 'en', fallback);
+    expect(seed.text).toBe(record.manifest.description);
+    expect(seed.fromRenderedQuery).toBe(false);
+  });
+
+  it('prefers the curated description over a raw-HTML query head (en)', () => {
+    const record = fixture({
+      id: 'aerocore',
+      description: 'Premium scroll-cinematic aerospace propulsion marketing site.',
+      query: {
+        en: '<!doctype html>\n<html lang="en">\n<head>\n<meta charset="UTF-8" />\n</head>\n\n<body>...</body>',
+      },
+    });
+    const seed = examplePresetSeedPrompt(record, 'en', fallback);
+    expect(seed.text).toBe(record.manifest.description);
+    expect(seed.fromRenderedQuery).toBe(false);
+  });
+
+  it('prefers the curated description over a query head that dangles "as described below" (en)', () => {
+    const record = fixture({
+      id: 'orbis-nft',
+      description: 'Dark space-themed NFT collection landing page with a liquid-glass UI.',
+      query: {
+        en: 'Create an NFT landing page called "Orbis.Nft" with 4 sections. Recreate it exactly as described below.\n\n## Sections\n...',
+      },
+    });
+    const seed = examplePresetSeedPrompt(record, 'en', fallback);
+    expect(seed.text).toBe(record.manifest.description);
+    expect(seed.fromRenderedQuery).toBe(false);
+  });
+
+  it('keeps the rendered query head for input-templated queries so placeholder write-back survives', () => {
+    const record = fixture({
+      id: 'web-prototype',
+      description: 'General-purpose desktop web prototype.',
+      query: {
+        en: 'Create a premium product-studio {{fidelity}} {{artifactKind}} for {{audience}}: sharp information architecture.\n\nDetails below.',
+      },
+      inputs: [
+        { name: 'fidelity', default: 'high-fidelity' },
+        { name: 'artifactKind', default: 'prototype' },
+        { name: 'audience', default: 'designers' },
+      ],
+    });
+    const seed = examplePresetSeedPrompt(record, 'en', fallback);
+    expect(seed.text).toBe(
+      'Create a premium product-studio high-fidelity prototype for designers: sharp information architecture.',
+    );
+    expect(seed.fromRenderedQuery).toBe(true);
+  });
+
+  it('keeps the zh description-first behavior', () => {
+    const record = fixture({
+      id: 'dreamcore-landing',
+      description: '沉浸式视差落地页。',
+      query: { 'zh-CN': '构建梦核风格的沉浸式视差落地页（详见 en 字段的完整规格说明，以 en 为准）。' },
+    });
+    const seed = examplePresetSeedPrompt(record, 'zh-CN', fallback);
+    expect(seed.text).toBe('沉浸式视差落地页。');
+    expect(seed.fromRenderedQuery).toBe(false);
+  });
+
+  it('falls back to the query head when there is no description', () => {
+    const record = fixture({
+      id: 'no-description',
+      query: { en: 'Create a moody portfolio landing page.\n\nDetails.' },
+    });
+    const seed = examplePresetSeedPrompt(record, 'en', fallback);
+    expect(seed.text).toBe('Create a moody portfolio landing page.');
+    expect(seed.fromRenderedQuery).toBe(true);
+  });
+
+  it('falls back to the caller fallback when the query is a meta-instruction and there is no description', () => {
+    const record = fixture({
+      id: 'meta-only',
+      query: { en: 'Follow the en field verbatim; start from example.html.' },
+    });
+    const seed = examplePresetSeedPrompt(record, 'en', fallback);
+    expect(seed.text).toBe('fallback seed');
+    expect(seed.fromRenderedQuery).toBe(false);
+  });
+});