From 62a896be46fc04ad81eed0b6996116ce8e86e747 Mon Sep 17 00:00:00 2001
From: Sean Teramae <steramae@nvidia.com>
Date: Mon, 10 Aug 2026 13:55:00 -0700
Subject: [PATCH 1/4] feat(studio): Add prompt presets for DD AI describe

Signed-off-by: Sean Teramae <steramae@nvidia.com>
---
 .../DescribeWithAiPanel.tsx                   | 48 ++++++++++++++-----
 .../PromptSuggestionPills.tsx                 | 33 +++++++++++++
 .../CreateFilesetStart/constants.ts           | 24 +++++++++-
 .../components/CreateFilesetStart/types.ts    | 13 +++++
 4 files changed, 106 insertions(+), 12 deletions(-)
 create mode 100644 web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx

diff --git a/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx b/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
index 01d928e53a..53d1425053 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
+++ b/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useModelSearch } from '@nemo/common/src/api/models/useModelSearch';
-import { ControlledTextArea } from '@nemo/common/src/components/form/ControlledTextArea';
 import { LoadingButton } from '@nemo/common/src/components/LoadingButton';
 import { ModelSelectV2 } from '@nemo/common/src/components/ModelSelectV2/ModelSelectV2';
 import type { ModelSelection } from '@nemo/common/src/components/ModelSelectV2/types';
-import { Flex, FormField, Stack } from '@nvidia/foundations-react-core';
+import { Block, Flex, FormField, Stack, TextArea } from '@nvidia/foundations-react-core';
+import { PROMPT_SUGGESTIONS } from '@studio/components/CreateFilesetStart/constants';
 import { GeneratedConfigResult } from '@studio/components/CreateFilesetStart/GeneratedConfigResult';
+import { PromptSuggestionPills } from '@studio/components/CreateFilesetStart/PromptSuggestionPills';
 import type { DescribeWithAiPanelProps } from '@studio/components/CreateFilesetStart/types';
 import { useDescribeWithAi } from '@studio/components/CreateFilesetStart/useDescribeWithAi';
 import { providerForSelection } from '@studio/routes/DataDesignerJobBuildRoute/models';
@@ -15,7 +16,7 @@ import type { FC } from 'react';
 import { useController } from 'react-hook-form';
 
 const PROMPT_PLACEHOLDER =
-  '100 customer support emails, each labelled as phishing or legitimate, with a short reason for the label and the sender domain. Sampled across categories (billing, returns, tech support) with subcategories per category (billing: overcharge, failed payment; returns: damaged item, wrong size)';
+  'Describe the rows you want: how many, what each column holds, and how the data should vary. Or start from an example below.';
 
 const MODEL_HELP = 'Needs tool-calling support. This model will be used in LLM columns.';
 
@@ -36,6 +37,13 @@ export const DescribeWithAiPanel: FC<DescribeWithAiPanelProps> = ({ workspace, o
   });
   const modelValue: ModelSelection | null = modelField.value ? { model: modelField.value } : null;
 
+  const { field: promptField, fieldState: promptState } = useController({
+    control: form.control,
+    name: 'prompt',
+  });
+  // Suggestions only make sense on an empty field — once there is text they would cover it.
+  const showSuggestions = promptField.value.trim().length === 0 && !isBusy;
+
   return (
     <form onSubmit={generate} noValidate>
       <Flex gap="density-xl" className="w-full flex-wrap items-stretch">
@@ -65,15 +73,33 @@ export const DescribeWithAiPanel: FC<DescribeWithAiPanelProps> = ({ workspace, o
             />
           </FormField>
 
-          <ControlledTextArea
-            label="What do you want to generate?"
+          <FormField
+            slotLabel="What do you want to generate?"
+            slotError={promptState.error?.message}
+            status={promptState.error ? 'error' : undefined}
             required
-            rows={8}
-            className="w-full resize-y"
-            placeholder={PROMPT_PLACEHOLDER}
-            disabled={isBusy}
-            useControllerProps={{ name: 'prompt', control: form.control }}
-          />
+          >
+            <Block className="relative">
+              <TextArea
+                rows={8}
+                className="w-full resize-y"
+                placeholder={PROMPT_PLACEHOLDER}
+                disabled={isBusy}
+                value={promptField.value}
+                onValueChange={promptField.onChange}
+                status={promptState.error ? 'error' : undefined}
+                attributes={{ TextAreaElement: { onBlur: promptField.onBlur } }}
+              />
+              {showSuggestions && (
+                <PromptSuggestionPills
+                  suggestions={PROMPT_SUGGESTIONS}
+                  onSelect={(prompt) =>
+                    form.setValue('prompt', prompt, { shouldValidate: true, shouldDirty: true })
+                  }
+                />
+              )}
+            </Block>
+          </FormField>
 
           <Flex justify="start">
             <LoadingButton
diff --git a/web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx b/web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx
new file mode 100644
index 0000000000..db033ffc89
--- /dev/null
+++ b/web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx
@@ -0,0 +1,33 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Flex, Tag } from '@nvidia/foundations-react-core';
+import type { PromptSuggestionPillsProps } from '@studio/components/CreateFilesetStart/types';
+import type { FC } from 'react';
+
+/**
+ * Row of example-prompt tags that floats over the bottom of the prompt field. Positioned
+ * absolutely so it reads as an affordance on the empty textarea rather than another control
+ * below it; the parent hides the whole row once the field has content, so the tags never
+ * cover what the user typed.
+ */
+export const PromptSuggestionPills: FC<PromptSuggestionPillsProps> = ({
+  suggestions,
+  onSelect,
+}) => (
+  <Flex gap="density-sm" wrap="wrap" className="pointer-events-none absolute inset-x-3 bottom-3">
+    {suggestions.map((suggestion) => (
+      <Tag
+        key={suggestion.label}
+        type="button"
+        color="gray"
+        kind="outline"
+        density="compact"
+        onClick={() => onSelect(suggestion.prompt)}
+        className="pointer-events-auto cursor-pointer bg-surface-raised transition-colors hover:border-interaction-hover hover:bg-interaction-hover active:bg-accent-gray-subtle-hover"
+      >
+        {suggestion.label}
+      </Tag>
+    ))}
+  </Flex>
+);
diff --git a/web/packages/studio/src/components/CreateFilesetStart/constants.ts b/web/packages/studio/src/components/CreateFilesetStart/constants.ts
index 25d3e8c026..f5856067a4 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/constants.ts
+++ b/web/packages/studio/src/components/CreateFilesetStart/constants.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FILESET_TEMPLATES } from '@studio/components/CreateFilesetStart/templates';
-import type { StartOption } from '@studio/components/CreateFilesetStart/types';
+import type { PromptSuggestion, StartOption } from '@studio/components/CreateFilesetStart/types';
 import { LayoutGrid, Plus, Sparkles } from 'lucide-react';
 
 /** "N recipe(s)" badge label, kept in sync with the number of authored templates. */
@@ -10,6 +10,28 @@ const RECIPE_COUNT_LABEL = `${FILESET_TEMPLATES.length} ${
   FILESET_TEMPLATES.length === 1 ? 'recipe' : 'recipes'
 }`;
 
+/**
+ * Example prompts offered as pills over an empty prompt field. Each is a complete,
+ * generation-ready description — the pill label is only the shorthand for it.
+ */
+export const PROMPT_SUGGESTIONS: PromptSuggestion[] = [
+  {
+    label: 'Phishing email triage',
+    prompt:
+      '200 customer support emails for training a phishing triage agent, each labelled as phishing or legitimate, with a short reason for the label and the sender domain. Sampled across categories (billing, returns, tech support) with subcategories per category (billing: overcharge, failed payment; returns: damaged item, wrong size)',
+  },
+  {
+    label: 'Support ticket routing',
+    prompt:
+      '100 inbound customer support tickets for training a triage agent. Each row has the raw ticket text as the customer wrote it, the queue it should route to (billing, shipping, technical, account cancellation), an urgency level (P1 to P4) and a one-line summary. Include ambiguous tickets that plausibly span two queues, and a few where the customer threatens to churn',
+  },
+  {
+    label: 'Refund policy Q&A',
+    prompt:
+      '50 evaluation examples for a customer-facing refund policy assistant. Each row has a passage from a returns and refunds policy, a question a real customer would ask, the answer grounded in that passage, and whether the policy actually covers the situation. Include questions the policy does not answer, marked as out of scope',
+  },
+];
+
 export const START_OPTIONS: StartOption[] = [
   {
     id: 'ai',
diff --git a/web/packages/studio/src/components/CreateFilesetStart/types.ts b/web/packages/studio/src/components/CreateFilesetStart/types.ts
index 8948e670fe..27c4e31fb8 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/types.ts
+++ b/web/packages/studio/src/components/CreateFilesetStart/types.ts
@@ -94,6 +94,19 @@ export interface DescribeWithAiPanelProps {
   onValidConfig: (jobRequest: DataDesignerJobRequest | null) => void;
 }
 
+/** A one-click example prompt offered as a pill over the "Describe with AI" prompt field. */
+export interface PromptSuggestion {
+  /** Short pill label — a few words, not the prompt itself. */
+  label: string;
+  /** Full prompt written into the field when the pill is clicked. */
+  prompt: string;
+}
+
+export interface PromptSuggestionPillsProps {
+  suggestions: PromptSuggestion[];
+  onSelect: (prompt: string) => void;
+}
+
 export interface GeneratedConfigResultProps {
   /** Verdict on the last draft; null before the first generation. */
   validation: GeneratedConfigValidation | null;

From 5e1dfdda79bd2e0f0b083110a553b367bcbd1c25 Mon Sep 17 00:00:00 2001
From: Sean Teramae <steramae@nvidia.com>
Date: Tue, 11 Aug 2026 11:59:44 -0700
Subject: [PATCH 2/4] consolidate code with seed questions

Signed-off-by: Sean Teramae <steramae@nvidia.com>
---
 .../DescribeWithAiPanel.tsx                   | 47 +++++++------------
 .../PromptSuggestionPills.tsx                 | 33 -------------
 .../CreateFilesetStart/constants.ts           |  5 +-
 .../components/CreateFilesetStart/types.ts    | 13 -----
 .../PromptSuggestionPills/index.tsx           | 31 ++++++++++++
 .../components/PromptSuggestionPills/types.ts | 17 +++++++
 .../src/components/chat/SeedQuestions.tsx     | 29 +++++-------
 7 files changed, 81 insertions(+), 94 deletions(-)
 delete mode 100644 web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx
 create mode 100644 web/packages/studio/src/components/PromptSuggestionPills/index.tsx
 create mode 100644 web/packages/studio/src/components/PromptSuggestionPills/types.ts

diff --git a/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx b/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
index 53d1425053..ff2dd15d0c 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
+++ b/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
@@ -2,15 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useModelSearch } from '@nemo/common/src/api/models/useModelSearch';
+import { ControlledTextArea } from '@nemo/common/src/components/form/ControlledTextArea';
 import { LoadingButton } from '@nemo/common/src/components/LoadingButton';
 import { ModelSelectV2 } from '@nemo/common/src/components/ModelSelectV2/ModelSelectV2';
 import type { ModelSelection } from '@nemo/common/src/components/ModelSelectV2/types';
-import { Block, Flex, FormField, Stack, TextArea } from '@nvidia/foundations-react-core';
+import { Flex, FormField, Stack } from '@nvidia/foundations-react-core';
 import { PROMPT_SUGGESTIONS } from '@studio/components/CreateFilesetStart/constants';
 import { GeneratedConfigResult } from '@studio/components/CreateFilesetStart/GeneratedConfigResult';
-import { PromptSuggestionPills } from '@studio/components/CreateFilesetStart/PromptSuggestionPills';
 import type { DescribeWithAiPanelProps } from '@studio/components/CreateFilesetStart/types';
 import { useDescribeWithAi } from '@studio/components/CreateFilesetStart/useDescribeWithAi';
+import { PromptSuggestionPills } from '@studio/components/PromptSuggestionPills';
 import { providerForSelection } from '@studio/routes/DataDesignerJobBuildRoute/models';
 import type { FC } from 'react';
 import { useController } from 'react-hook-form';
@@ -37,12 +38,7 @@ export const DescribeWithAiPanel: FC<DescribeWithAiPanelProps> = ({ workspace, o
   });
   const modelValue: ModelSelection | null = modelField.value ? { model: modelField.value } : null;
 
-  const { field: promptField, fieldState: promptState } = useController({
-    control: form.control,
-    name: 'prompt',
-  });
-  // Suggestions only make sense on an empty field — once there is text they would cover it.
-  const showSuggestions = promptField.value.trim().length === 0 && !isBusy;
+  const showSuggestions = form.watch('prompt').trim().length === 0 && !isBusy;
 
   return (
     <form onSubmit={generate} noValidate>
@@ -73,33 +69,26 @@ export const DescribeWithAiPanel: FC<DescribeWithAiPanelProps> = ({ workspace, o
             />
           </FormField>
 
-          <FormField
-            slotLabel="What do you want to generate?"
-            slotError={promptState.error?.message}
-            status={promptState.error ? 'error' : undefined}
-            required
-          >
-            <Block className="relative">
-              <TextArea
-                rows={8}
-                className="w-full resize-y"
-                placeholder={PROMPT_PLACEHOLDER}
-                disabled={isBusy}
-                value={promptField.value}
-                onValueChange={promptField.onChange}
-                status={promptState.error ? 'error' : undefined}
-                attributes={{ TextAreaElement: { onBlur: promptField.onBlur } }}
-              />
-              {showSuggestions && (
+          <ControlledTextArea
+            useControllerProps={{ control: form.control, name: 'prompt' }}
+            label="What do you want to generate?"
+            formFieldProps={{ required: true }}
+            rows={8}
+            className="w-full"
+            placeholder={PROMPT_PLACEHOLDER}
+            disabled={isBusy}
+            layout="vertical"
+            slotEnd={
+              showSuggestions ? (
                 <PromptSuggestionPills
                   suggestions={PROMPT_SUGGESTIONS}
                   onSelect={(prompt) =>
                     form.setValue('prompt', prompt, { shouldValidate: true, shouldDirty: true })
                   }
                 />
-              )}
-            </Block>
-          </FormField>
+              ) : undefined
+            }
+          />
 
           <Flex justify="start">
             <LoadingButton
diff --git a/web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx b/web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx
deleted file mode 100644
index db033ffc89..0000000000
--- a/web/packages/studio/src/components/CreateFilesetStart/PromptSuggestionPills.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-import { Flex, Tag } from '@nvidia/foundations-react-core';
-import type { PromptSuggestionPillsProps } from '@studio/components/CreateFilesetStart/types';
-import type { FC } from 'react';
-
-/**
- * Row of example-prompt tags that floats over the bottom of the prompt field. Positioned
- * absolutely so it reads as an affordance on the empty textarea rather than another control
- * below it; the parent hides the whole row once the field has content, so the tags never
- * cover what the user typed.
- */
-export const PromptSuggestionPills: FC<PromptSuggestionPillsProps> = ({
-  suggestions,
-  onSelect,
-}) => (
-  <Flex gap="density-sm" wrap="wrap" className="pointer-events-none absolute inset-x-3 bottom-3">
-    {suggestions.map((suggestion) => (
-      <Tag
-        key={suggestion.label}
-        type="button"
-        color="gray"
-        kind="outline"
-        density="compact"
-        onClick={() => onSelect(suggestion.prompt)}
-        className="pointer-events-auto cursor-pointer bg-surface-raised transition-colors hover:border-interaction-hover hover:bg-interaction-hover active:bg-accent-gray-subtle-hover"
-      >
-        {suggestion.label}
-      </Tag>
-    ))}
-  </Flex>
-);
diff --git a/web/packages/studio/src/components/CreateFilesetStart/constants.ts b/web/packages/studio/src/components/CreateFilesetStart/constants.ts
index f5856067a4..9ef189aff8 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/constants.ts
+++ b/web/packages/studio/src/components/CreateFilesetStart/constants.ts
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FILESET_TEMPLATES } from '@studio/components/CreateFilesetStart/templates';
-import type { PromptSuggestion, StartOption } from '@studio/components/CreateFilesetStart/types';
+import type { StartOption } from '@studio/components/CreateFilesetStart/types';
+import type { PromptSuggestion } from '@studio/components/PromptSuggestionPills/types';
 import { LayoutGrid, Plus, Sparkles } from 'lucide-react';
 
 /** "N recipe(s)" badge label, kept in sync with the number of authored templates. */
@@ -11,7 +12,7 @@ const RECIPE_COUNT_LABEL = `${FILESET_TEMPLATES.length} ${
 }`;
 
 /**
- * Example prompts offered as pills over an empty prompt field. Each is a complete,
+ * Example prompts offered as pills inside an empty prompt field. Each is a complete,
  * generation-ready description — the pill label is only the shorthand for it.
  */
 export const PROMPT_SUGGESTIONS: PromptSuggestion[] = [
diff --git a/web/packages/studio/src/components/CreateFilesetStart/types.ts b/web/packages/studio/src/components/CreateFilesetStart/types.ts
index 27c4e31fb8..8948e670fe 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/types.ts
+++ b/web/packages/studio/src/components/CreateFilesetStart/types.ts
@@ -94,19 +94,6 @@ export interface DescribeWithAiPanelProps {
   onValidConfig: (jobRequest: DataDesignerJobRequest | null) => void;
 }
 
-/** A one-click example prompt offered as a pill over the "Describe with AI" prompt field. */
-export interface PromptSuggestion {
-  /** Short pill label — a few words, not the prompt itself. */
-  label: string;
-  /** Full prompt written into the field when the pill is clicked. */
-  prompt: string;
-}
-
-export interface PromptSuggestionPillsProps {
-  suggestions: PromptSuggestion[];
-  onSelect: (prompt: string) => void;
-}
-
 export interface GeneratedConfigResultProps {
   /** Verdict on the last draft; null before the first generation. */
   validation: GeneratedConfigValidation | null;
diff --git a/web/packages/studio/src/components/PromptSuggestionPills/index.tsx b/web/packages/studio/src/components/PromptSuggestionPills/index.tsx
new file mode 100644
index 0000000000..b3c251d767
--- /dev/null
+++ b/web/packages/studio/src/components/PromptSuggestionPills/index.tsx
@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PromptSuggestionPillsProps } from '@studio/components/PromptSuggestionPills/types';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+/**
+ * Row of bordered chip buttons, each writing a ready-made prompt into a nearby field.
+ * Shared by the chat composer's seed questions and the "Describe with AI" prompt field so
+ * the two read as one control family; the label is a shorthand, the prompt is what lands
+ * in the field, and the two are the same string when there is nothing to shorten.
+ */
+export const PromptSuggestionPills: FC<PromptSuggestionPillsProps> = ({
+  suggestions,
+  onSelect,
+  className,
+}) => (
+  <div className={classNames('flex w-full min-w-0 flex-wrap items-start gap-2', className)}>
+    {suggestions.map((suggestion) => (
+      <button
+        key={suggestion.label}
+        type="button"
+        onClick={() => onSelect(suggestion.prompt)}
+        className="cursor-pointer rounded-full border border-base bg-surface-base px-3 py-1.5 text-xs text-fg-base transition-colors hover:border-emphasis hover:bg-surface-sunken"
+      >
+        {suggestion.label}
+      </button>
+    ))}
+  </div>
+);
diff --git a/web/packages/studio/src/components/PromptSuggestionPills/types.ts b/web/packages/studio/src/components/PromptSuggestionPills/types.ts
new file mode 100644
index 0000000000..a25d949e09
--- /dev/null
+++ b/web/packages/studio/src/components/PromptSuggestionPills/types.ts
@@ -0,0 +1,17 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/** A one-click example prompt offered next to a prompt field. */
+export interface PromptSuggestion {
+  /** Short pill label — a few words, not the prompt itself. */
+  label: string;
+  /** Full prompt written into the field when the pill is clicked. */
+  prompt: string;
+}
+
+export interface PromptSuggestionPillsProps {
+  suggestions: PromptSuggestion[];
+  onSelect: (prompt: string) => void;
+  /** Merged into the row's classes, for callers that own the row's flex behaviour. */
+  className?: string;
+}
diff --git a/web/packages/studio/src/components/chat/SeedQuestions.tsx b/web/packages/studio/src/components/chat/SeedQuestions.tsx
index 39c0237d58..5652f18cc1 100644
--- a/web/packages/studio/src/components/chat/SeedQuestions.tsx
+++ b/web/packages/studio/src/components/chat/SeedQuestions.tsx
@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { DEFAULT_SEED_QUESTIONS } from '@studio/components/chat/defaultSeedQuestions';
-import { type FC, type ReactNode } from 'react';
+import { PromptSuggestionPills } from '@studio/components/PromptSuggestionPills';
+import type { PromptSuggestion } from '@studio/components/PromptSuggestionPills/types';
+import { type FC, type ReactNode, useMemo } from 'react';
 
 interface SeedQuestionsProps {
   questions?: string[];
@@ -14,10 +16,9 @@ interface SeedQuestionsProps {
 }
 
 /**
- * Row of bordered chip buttons that float just above the composer. Each
- * question is its own distinct, clickable affordance — same border + radius
- * as the composer card so they read as a related control family, but
- * detached so they feel like floating action chips, not inline text.
+ * Seed questions for the chat composer: a row of {@link PromptSuggestionPills} flanked by
+ * optional slots for metrics and composer actions. A seed question is its own label, so it
+ * maps to a suggestion whose label and prompt are the same string.
  */
 export const SeedQuestions: FC<SeedQuestionsProps> = ({
   questions = DEFAULT_SEED_QUESTIONS,
@@ -25,21 +26,15 @@ export const SeedQuestions: FC<SeedQuestionsProps> = ({
   slotStart,
   slotEnd,
 }) => {
+  const suggestions = useMemo<PromptSuggestion[]>(
+    () => questions.map((question) => ({ label: question, prompt: question })),
+    [questions]
+  );
+
   return (
     <div className="flex items-start gap-2">
       {slotStart && <div className="shrink-0 self-end">{slotStart}</div>}
-      <div className="flex min-w-0 flex-1 flex-wrap items-start gap-2">
-        {questions.map((q) => (
-          <button
-            key={q}
-            type="button"
-            onClick={() => onSelect(q)}
-            className="cursor-pointer rounded-full border border-base bg-surface-base px-3 py-1.5 text-xs text-fg-base transition-colors hover:border-emphasis hover:bg-surface-sunken"
-          >
-            {q}
-          </button>
-        ))}
-      </div>
+      <PromptSuggestionPills suggestions={suggestions} onSelect={onSelect} className="flex-1" />
       {slotEnd && <div className="shrink-0 self-end">{slotEnd}</div>}
     </div>
   );

From 32a415848098b1c25fe42d746402891f4c5c1e82 Mon Sep 17 00:00:00 2001
From: Sean Teramae <steramae@nvidia.com>
Date: Tue, 11 Aug 2026 12:35:22 -0700
Subject: [PATCH 3/4] fix disabled state on playground

Signed-off-by: Sean Teramae <steramae@nvidia.com>
---
 .../studio/src/components/ModelChat/index.tsx     |  1 +
 .../components/PromptSuggestionPills/index.tsx    | 15 ++++++++++-----
 .../src/components/PromptSuggestionPills/types.ts |  1 +
 .../src/components/chat/CompareComposer.tsx       |  1 +
 .../studio/src/components/chat/SeedQuestions.tsx  | 10 +++++++++-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/packages/studio/src/components/ModelChat/index.tsx b/web/packages/studio/src/components/ModelChat/index.tsx
index 2b37ebba3f..35dc9cb802 100644
--- a/web/packages/studio/src/components/ModelChat/index.tsx
+++ b/web/packages/studio/src/components/ModelChat/index.tsx
@@ -169,6 +169,7 @@ export const ModelChat: FC<ModelChatProps> = ({
       <SeedQuestions
         questions={showChatSeeds ? seedQuestions : []}
         onSelect={seedComposer}
+        disabled={resolvedDisabled}
         slotStart={
           metricsInComposer && latestMetrics ? <StatsBadge metrics={latestMetrics} /> : undefined
         }
diff --git a/web/packages/studio/src/components/PromptSuggestionPills/index.tsx b/web/packages/studio/src/components/PromptSuggestionPills/index.tsx
index b3c251d767..8a29e475e7 100644
--- a/web/packages/studio/src/components/PromptSuggestionPills/index.tsx
+++ b/web/packages/studio/src/components/PromptSuggestionPills/index.tsx
@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { Button, Flex } from '@nvidia/foundations-react-core';
 import type { PromptSuggestionPillsProps } from '@studio/components/PromptSuggestionPills/types';
 import classNames from 'classnames';
 import type { FC } from 'react';
@@ -14,18 +15,22 @@ import type { FC } from 'react';
 export const PromptSuggestionPills: FC<PromptSuggestionPillsProps> = ({
   suggestions,
   onSelect,
+  disabled,
   className,
 }) => (
-  <div className={classNames('flex w-full min-w-0 flex-wrap items-start gap-2', className)}>
+  <Flex className={classNames('w-full min-w-0 gap-2', className)} wrap="wrap" justify="start">
     {suggestions.map((suggestion) => (
-      <button
+      <Button
         key={suggestion.label}
         type="button"
+        kind="secondary"
+        size="tiny"
+        disabled={disabled}
         onClick={() => onSelect(suggestion.prompt)}
-        className="cursor-pointer rounded-full border border-base bg-surface-base px-3 py-1.5 text-xs text-fg-base transition-colors hover:border-emphasis hover:bg-surface-sunken"
+        className="cursor-pointer rounded-full border border-base bg-surface-base px-3 py-1.5 text-xs text-secondary transition-colors hover:border-interaction-hover hover:bg-surface-sunken hover:text-primary disabled:pointer-events-none disabled:border-disabled disabled:text-disabled"
       >
         {suggestion.label}
-      </button>
+      </Button>
     ))}
-  </div>
+  </Flex>
 );
diff --git a/web/packages/studio/src/components/PromptSuggestionPills/types.ts b/web/packages/studio/src/components/PromptSuggestionPills/types.ts
index a25d949e09..1bee73f329 100644
--- a/web/packages/studio/src/components/PromptSuggestionPills/types.ts
+++ b/web/packages/studio/src/components/PromptSuggestionPills/types.ts
@@ -12,6 +12,7 @@ export interface PromptSuggestion {
 export interface PromptSuggestionPillsProps {
   suggestions: PromptSuggestion[];
   onSelect: (prompt: string) => void;
+  disabled?: boolean;
   /** Merged into the row's classes, for callers that own the row's flex behaviour. */
   className?: string;
 }
diff --git a/web/packages/studio/src/components/chat/CompareComposer.tsx b/web/packages/studio/src/components/chat/CompareComposer.tsx
index a762c317df..c5af24eee1 100644
--- a/web/packages/studio/src/components/chat/CompareComposer.tsx
+++ b/web/packages/studio/src/components/chat/CompareComposer.tsx
@@ -105,6 +105,7 @@ export const CompareComposer: FC<CompareComposerProps> = ({
         <SeedQuestions
           questions={showSeeds ? seedQuestions : []}
           onSelect={(text) => setDraft(text)}
+          disabled={readyPanelCount === 0}
           slotEnd={slotSeedEnd}
         />
       )}
diff --git a/web/packages/studio/src/components/chat/SeedQuestions.tsx b/web/packages/studio/src/components/chat/SeedQuestions.tsx
index 5652f18cc1..497d90d2a3 100644
--- a/web/packages/studio/src/components/chat/SeedQuestions.tsx
+++ b/web/packages/studio/src/components/chat/SeedQuestions.tsx
@@ -9,6 +9,8 @@ import { type FC, type ReactNode, useMemo } from 'react';
 interface SeedQuestionsProps {
   questions?: string[];
   onSelect: (prompt: string) => void;
+  /** Mirrors the composer's disabled state, so a seed can't target a dead composer. */
+  disabled?: boolean;
   /** Rendered bottom-aligned at the leading end of the row (e.g. metrics). */
   slotStart?: ReactNode;
   /** Rendered bottom-aligned at the trailing end of the row. */
@@ -23,6 +25,7 @@ interface SeedQuestionsProps {
 export const SeedQuestions: FC<SeedQuestionsProps> = ({
   questions = DEFAULT_SEED_QUESTIONS,
   onSelect,
+  disabled,
   slotStart,
   slotEnd,
 }) => {
@@ -34,7 +37,12 @@ export const SeedQuestions: FC<SeedQuestionsProps> = ({
   return (
     <div className="flex items-start gap-2">
       {slotStart && <div className="shrink-0 self-end">{slotStart}</div>}
-      <PromptSuggestionPills suggestions={suggestions} onSelect={onSelect} className="flex-1" />
+      <PromptSuggestionPills
+        suggestions={suggestions}
+        onSelect={onSelect}
+        disabled={disabled}
+        className="flex-1"
+      />
       {slotEnd && <div className="shrink-0 self-end">{slotEnd}</div>}
     </div>
   );

From 781b4cf5fe19e08df8464359b084b0fcb96e9183 Mon Sep 17 00:00:00 2001
From: Sean Teramae <steramae@nvidia.com>
Date: Wed, 12 Aug 2026 10:36:24 -0700
Subject: [PATCH 4/4] use tag, much more simple

Signed-off-by: Sean Teramae <steramae@nvidia.com>
---
 .../CreateFilesetStart/DescribeWithAiPanel.tsx |  4 ++--
 .../components/CreateFilesetStart/constants.ts |  2 +-
 .../index.tsx                                  | 18 ++++++++----------
 .../types.ts                                   |  6 +++---
 .../src/components/chat/SeedQuestions.tsx      |  8 ++++----
 5 files changed, 18 insertions(+), 20 deletions(-)
 rename web/packages/studio/src/components/{PromptSuggestionPills => PromptSuggestionTags}/index.tsx (54%)
 rename web/packages/studio/src/components/{PromptSuggestionPills => PromptSuggestionTags}/types.ts (72%)

diff --git a/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx b/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
index ff2dd15d0c..cb314110e8 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
+++ b/web/packages/studio/src/components/CreateFilesetStart/DescribeWithAiPanel.tsx
@@ -11,7 +11,7 @@ import { PROMPT_SUGGESTIONS } from '@studio/components/CreateFilesetStart/consta
 import { GeneratedConfigResult } from '@studio/components/CreateFilesetStart/GeneratedConfigResult';
 import type { DescribeWithAiPanelProps } from '@studio/components/CreateFilesetStart/types';
 import { useDescribeWithAi } from '@studio/components/CreateFilesetStart/useDescribeWithAi';
-import { PromptSuggestionPills } from '@studio/components/PromptSuggestionPills';
+import { PromptSuggestionTags } from '@studio/components/PromptSuggestionTags';
 import { providerForSelection } from '@studio/routes/DataDesignerJobBuildRoute/models';
 import type { FC } from 'react';
 import { useController } from 'react-hook-form';
@@ -80,7 +80,7 @@ export const DescribeWithAiPanel: FC<DescribeWithAiPanelProps> = ({ workspace, o
             layout="vertical"
             slotEnd={
               showSuggestions ? (
-                <PromptSuggestionPills
+                <PromptSuggestionTags
                   suggestions={PROMPT_SUGGESTIONS}
                   onSelect={(prompt) =>
                     form.setValue('prompt', prompt, { shouldValidate: true, shouldDirty: true })
diff --git a/web/packages/studio/src/components/CreateFilesetStart/constants.ts b/web/packages/studio/src/components/CreateFilesetStart/constants.ts
index 9ef189aff8..65fdacda47 100644
--- a/web/packages/studio/src/components/CreateFilesetStart/constants.ts
+++ b/web/packages/studio/src/components/CreateFilesetStart/constants.ts
@@ -3,7 +3,7 @@
 
 import { FILESET_TEMPLATES } from '@studio/components/CreateFilesetStart/templates';
 import type { StartOption } from '@studio/components/CreateFilesetStart/types';
-import type { PromptSuggestion } from '@studio/components/PromptSuggestionPills/types';
+import type { PromptSuggestion } from '@studio/components/PromptSuggestionTags/types';
 import { LayoutGrid, Plus, Sparkles } from 'lucide-react';
 
 /** "N recipe(s)" badge label, kept in sync with the number of authored templates. */
diff --git a/web/packages/studio/src/components/PromptSuggestionPills/index.tsx b/web/packages/studio/src/components/PromptSuggestionTags/index.tsx
similarity index 54%
rename from web/packages/studio/src/components/PromptSuggestionPills/index.tsx
rename to web/packages/studio/src/components/PromptSuggestionTags/index.tsx
index 8a29e475e7..207392abb8 100644
--- a/web/packages/studio/src/components/PromptSuggestionPills/index.tsx
+++ b/web/packages/studio/src/components/PromptSuggestionTags/index.tsx
@@ -1,18 +1,18 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { Button, Flex } from '@nvidia/foundations-react-core';
-import type { PromptSuggestionPillsProps } from '@studio/components/PromptSuggestionPills/types';
+import { Flex, Tag } from '@nvidia/foundations-react-core';
+import type { PromptSuggestionTagsProps } from '@studio/components/PromptSuggestionTags/types';
 import classNames from 'classnames';
 import type { FC } from 'react';
 
 /**
- * Row of bordered chip buttons, each writing a ready-made prompt into a nearby field.
+ * Row of outline Tags, each writing a ready-made prompt into a nearby field.
  * Shared by the chat composer's seed questions and the "Describe with AI" prompt field so
  * the two read as one control family; the label is a shorthand, the prompt is what lands
  * in the field, and the two are the same string when there is nothing to shorten.
  */
-export const PromptSuggestionPills: FC<PromptSuggestionPillsProps> = ({
+export const PromptSuggestionTags: FC<PromptSuggestionTagsProps> = ({
   suggestions,
   onSelect,
   disabled,
@@ -20,17 +20,15 @@ export const PromptSuggestionPills: FC<PromptSuggestionPillsProps> = ({
 }) => (
   <Flex className={classNames('w-full min-w-0 gap-2', className)} wrap="wrap" justify="start">
     {suggestions.map((suggestion) => (
-      <Button
+      <Tag
         key={suggestion.label}
-        type="button"
-        kind="secondary"
-        size="tiny"
+        color="gray"
+        kind="outline"
         disabled={disabled}
         onClick={() => onSelect(suggestion.prompt)}
-        className="cursor-pointer rounded-full border border-base bg-surface-base px-3 py-1.5 text-xs text-secondary transition-colors hover:border-interaction-hover hover:bg-surface-sunken hover:text-primary disabled:pointer-events-none disabled:border-disabled disabled:text-disabled"
       >
         {suggestion.label}
-      </Button>
+      </Tag>
     ))}
   </Flex>
 );
diff --git a/web/packages/studio/src/components/PromptSuggestionPills/types.ts b/web/packages/studio/src/components/PromptSuggestionTags/types.ts
similarity index 72%
rename from web/packages/studio/src/components/PromptSuggestionPills/types.ts
rename to web/packages/studio/src/components/PromptSuggestionTags/types.ts
index 1bee73f329..595ccf280f 100644
--- a/web/packages/studio/src/components/PromptSuggestionPills/types.ts
+++ b/web/packages/studio/src/components/PromptSuggestionTags/types.ts
@@ -3,13 +3,13 @@
 
 /** A one-click example prompt offered next to a prompt field. */
 export interface PromptSuggestion {
-  /** Short pill label — a few words, not the prompt itself. */
+  /** Short tag label — a few words, not the prompt itself. */
   label: string;
-  /** Full prompt written into the field when the pill is clicked. */
+  /** Full prompt written into the field when the tag is clicked. */
   prompt: string;
 }
 
-export interface PromptSuggestionPillsProps {
+export interface PromptSuggestionTagsProps {
   suggestions: PromptSuggestion[];
   onSelect: (prompt: string) => void;
   disabled?: boolean;
diff --git a/web/packages/studio/src/components/chat/SeedQuestions.tsx b/web/packages/studio/src/components/chat/SeedQuestions.tsx
index 497d90d2a3..c2c577704a 100644
--- a/web/packages/studio/src/components/chat/SeedQuestions.tsx
+++ b/web/packages/studio/src/components/chat/SeedQuestions.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { DEFAULT_SEED_QUESTIONS } from '@studio/components/chat/defaultSeedQuestions';
-import { PromptSuggestionPills } from '@studio/components/PromptSuggestionPills';
-import type { PromptSuggestion } from '@studio/components/PromptSuggestionPills/types';
+import { PromptSuggestionTags } from '@studio/components/PromptSuggestionTags';
+import type { PromptSuggestion } from '@studio/components/PromptSuggestionTags/types';
 import { type FC, type ReactNode, useMemo } from 'react';
 
 interface SeedQuestionsProps {
@@ -18,7 +18,7 @@ interface SeedQuestionsProps {
 }
 
 /**
- * Seed questions for the chat composer: a row of {@link PromptSuggestionPills} flanked by
+ * Seed questions for the chat composer: a row of {@link PromptSuggestionTags} flanked by
  * optional slots for metrics and composer actions. A seed question is its own label, so it
  * maps to a suggestion whose label and prompt are the same string.
  */
@@ -37,7 +37,7 @@ export const SeedQuestions: FC<SeedQuestionsProps> = ({
   return (
     <div className="flex items-start gap-2">
       {slotStart && <div className="shrink-0 self-end">{slotStart}</div>}
-      <PromptSuggestionPills
+      <PromptSuggestionTags
         suggestions={suggestions}
         onSelect={onSelect}
         disabled={disabled}