diff --git a/web/packages/common/src/api/models/useModels.ts b/web/packages/common/src/api/models/useModels.ts
index 22de3d2314..30a5e6b702 100644
--- a/web/packages/common/src/api/models/useModels.ts
+++ b/web/packages/common/src/api/models/useModels.ts
@@ -13,7 +13,8 @@ import { useEffect } from 'react';
 import { DEFAULT_LARGE_PAGE_SIZE, QUERY_PREFIX_PLATFORM } from '../../constants/api';
 
 /**
- * A basic filter for a models dropdown that fetches 1000 models sorted alphabetically.
+ * A basic filter for a models dropdown that fetches models sorted alphabetically.
+ * page_size is set high so most deployments are covered in a single page.
  */
 export const BASIC_ALL_MODELS_DROPDOWN_FILTER: ModelsListModelsParams = {
   page_size: DEFAULT_LARGE_PAGE_SIZE,
@@ -103,5 +104,5 @@ export const buildWorkspaceGroup = (
   models: ModelEntity[]
 ): ModelWorkspaceGroup => ({
   workspace: workspaceName,
-  models,
+  models: [...models].sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')),
 });
diff --git a/web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx b/web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx
index 046913521e..54e49741fe 100644
--- a/web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx
+++ b/web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx
@@ -8,6 +8,7 @@ import {
   ThreadPrimitive,
   type ToolCallMessagePartComponent,
 } from '@assistant-ui/react';
+import { ComposerMode } from '@nemo/common/src/components/AssistantChat/types';
 import { ChatEmptyState } from '@nemo/common/src/components/Chat/ChatEmptyState';
 import {
   MessageContent,
@@ -39,6 +40,8 @@ interface AssistantChatThreadProps {
   onReset: () => void;
   showRunningIndicator?: boolean;
   attributes?: AssistantChatThreadAttributes;
+  composerMode?: ComposerMode;
+  slotComposerStart?: ReactNode;
   emptyState?: {
     slotHeading?: string;
     slotSubheading?: string;
@@ -239,7 +242,7 @@ const UserEditComposer = () => (
 
 type AssistantComposerProps = Pick<
   AssistantChatThreadProps,
-  'disabled' | 'placeholder' | 'onReset'
+  'disabled' | 'placeholder' | 'onReset' | 'slotComposerStart'
 > & {
   className?: string;
 };
@@ -248,50 +251,59 @@ const AssistantComposer = ({
   disabled,
   placeholder,
   onReset,
+  slotComposerStart,
   className,
 }: AssistantComposerProps) => (
-  <ComposerPrimitive.Root
-    data-testid="assistant-chat-composer"
-    className={cn(
-      'flex w-full items-end gap-density-xs rounded-lg border border-base bg-surface-base p-1',
-      className
-    )}
-  >
-    <ComposerPrimitive.Input
-      aria-label="Task prompt"
-      addAttachmentOnPaste={false}
-      disabled={disabled}
-      placeholder={placeholder}
-      submitMode="enter"
-      className="max-h-64 min-h-20 flex-1 resize-none border-0 bg-transparent px-density-md py-density-md text-sm outline-none disabled:cursor-not-allowed disabled:text-fg-disabled"
-    />
-    <Tooltip slotContent="Clear chat thread">
-      <Button
-        aria-label="Reset"
-        kind="tertiary"
-        size="small"
-        onClick={onReset}
-        type="button"
+  <div className="flex w-full flex-col gap-2">
+    {slotComposerStart && <div className="shrink-0">{slotComposerStart}</div>}
+    <ComposerPrimitive.Root
+      data-testid="assistant-chat-composer"
+      className={cn(
+        'flex w-full items-end gap-density-xs rounded-lg border border-base bg-surface-base p-1',
+        className
+      )}
+    >
+      <ComposerPrimitive.Input
+        aria-label="Task prompt"
+        addAttachmentOnPaste={false}
         disabled={disabled}
-      >
-        <RotateCcw />
-      </Button>
-    </Tooltip>
-    <ThreadPrimitive.If running>
-      <ComposerPrimitive.Cancel asChild>
-        <Button aria-label="Stop" color="danger" size="small" className="size-8 rounded-full p-0">
-          <Square size={14} />
-        </Button>
-      </ComposerPrimitive.Cancel>
-    </ThreadPrimitive.If>
-    <ThreadPrimitive.If running={false}>
-      <ComposerPrimitive.Send asChild>
-        <Button aria-label="Submit" color="brand" size="small" className="size-8 rounded-full p-0">
-          <ArrowUp size={16} />
+        placeholder={placeholder}
+        submitMode="enter"
+        className="max-h-32 min-h-[24px] flex-1 resize-none border-0 bg-transparent px-density-md py-density-md text-sm leading-6 outline-none disabled:cursor-not-allowed disabled:text-fg-disabled"
+      />
+      <Tooltip slotContent="Clear chat thread">
+        <Button
+          aria-label="Reset"
+          kind="tertiary"
+          size="small"
+          onClick={onReset}
+          type="button"
+          disabled={disabled}
+        >
+          <RotateCcw />
         </Button>
-      </ComposerPrimitive.Send>
-    </ThreadPrimitive.If>
-  </ComposerPrimitive.Root>
+      </Tooltip>
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel asChild>
+          <Button aria-label="Stop" color="danger" size="small" className="size-8 rounded-full p-0">
+            <Square size={14} />
+          </Button>
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send asChild>
+          <Button
+            aria-label="Submit"
+            color="brand"
+            size="small"
+            className="size-8 rounded-full p-0"
+          >
+            <ArrowUp size={16} />
+          </Button>
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+    </ComposerPrimitive.Root>
+  </div>
 );
 
 export const AssistantChatThread = ({
@@ -300,6 +312,8 @@ export const AssistantChatThread = ({
   onReset,
   showRunningIndicator = true,
   attributes,
+  composerMode = ComposerMode.PER_PANEL,
+  slotComposerStart,
   emptyState,
   contentClassName,
   composerContainerClassName,
@@ -369,14 +383,21 @@ export const AssistantChatThread = ({
           Scroll to bottom
         </ThreadPrimitive.ScrollToBottom>
       </div>
-      <Flex
-        className={cn('w-full pt-density-xl', composerContainerClassName)}
-        data-testid="assistant-chat-composer-container"
-      >
-        {composerOverride ?? (
-          <AssistantComposer disabled={disabled} placeholder={placeholder} onReset={onReset} />
-        )}
-      </Flex>
+      {composerMode !== ComposerMode.BROADCAST_ALL && (
+        <Flex
+          className={cn('w-full pt-density-xl', composerContainerClassName)}
+          data-testid="assistant-chat-composer-container"
+        >
+          {composerOverride ?? (
+            <AssistantComposer
+              disabled={disabled}
+              placeholder={placeholder}
+              onReset={onReset}
+              slotComposerStart={slotComposerStart}
+            />
+          )}
+        </Flex>
+      )}
     </ThreadPrimitive.Root>
   );
 };
diff --git a/web/packages/common/src/components/AssistantChat/index.spec.tsx b/web/packages/common/src/components/AssistantChat/index.spec.tsx
index 8be2afe540..6d1af6d483 100644
--- a/web/packages/common/src/components/AssistantChat/index.spec.tsx
+++ b/web/packages/common/src/components/AssistantChat/index.spec.tsx
@@ -220,8 +220,6 @@ describe('AssistantChat', () => {
 
     expect(screen.getByText('Existing prompt')).toBeInTheDocument();
     expect(screen.getByText('Existing response')).toBeInTheDocument();
-    expect(assistantMessage).toHaveClass('whitespace-normal');
-    expect(assistantMessage).not.toHaveClass('whitespace-pre-wrap');
     expect(
       within(assistantMessage).getByRole('button', { name: /Copy message/i })
     ).toBeInTheDocument();
@@ -266,38 +264,9 @@ describe('AssistantChat', () => {
     );
 
     expect(screen.getByText('Approval required')).toBeInTheDocument();
-    expect(screen.getByTestId('assistant-chat-composer-container')).toHaveClass('pt-density-xl');
     expect(screen.queryByRole('textbox', { name: /Task prompt/i })).not.toBeInTheDocument();
   });
 
-  it('renders the composer with a rounded input shell and circular submit action', () => {
-    renderAssistantChat(<AssistantChat model="test-model" workspace="default" />);
-
-    expect(screen.getByTestId('assistant-chat-viewport')).toHaveClass(
-      '[scrollbar-width:thin]',
-      '[scrollbar-color:var(--border-color-interaction-base)_transparent]',
-      '[&::-webkit-scrollbar]:w-2',
-      '[&::-webkit-scrollbar-track]:bg-transparent',
-      '[&::-webkit-scrollbar-thumb]:rounded-full',
-      '[&::-webkit-scrollbar-thumb]:bg-[var(--border-color-interaction-base)]',
-      '[&::-webkit-scrollbar-thumb:hover]:bg-[var(--border-color-interaction-strong)]'
-    );
-    expect(screen.getByTestId('assistant-chat-composer')).toHaveClass(
-      'gap-density-xs',
-      'rounded-lg'
-    );
-    expect(screen.getByRole('textbox', { name: /Task prompt/i })).toHaveClass(
-      'min-h-20',
-      'px-density-md',
-      'py-density-md'
-    );
-    expect(screen.getByRole('button', { name: /Submit/i })).toHaveClass(
-      'size-8',
-      'rounded-full',
-      'p-0'
-    );
-  });
-
   it(
     'edits a user message and re-runs inference with the edited prompt',
     async () => {
@@ -357,7 +326,6 @@ describe('AssistantChat', () => {
       expect(await screen.findByText('0 this is an example response')).toBeInTheDocument();
       const stopButton = screen.getByRole('button', { name: /Stop/i });
       expect(stopButton).toBeEnabled();
-      expect(stopButton).toHaveClass('size-8', 'rounded-full', 'p-0');
 
       await userEvent.click(stopButton);
 
diff --git a/web/packages/common/src/components/AssistantChat/index.tsx b/web/packages/common/src/components/AssistantChat/index.tsx
index b66b0b7093..f80729bea7 100644
--- a/web/packages/common/src/components/AssistantChat/index.tsx
+++ b/web/packages/common/src/components/AssistantChat/index.tsx
@@ -10,6 +10,7 @@ import type { AssistantChatProps } from './types';
 import { useAssistantChatRuntime } from './useAssistantChatRuntime';
 
 export type { AssistantChatProps } from './types';
+export { ComposerMode } from './types';
 
 export const AssistantChat: FC<AssistantChatProps> = ({
   model,
@@ -25,6 +26,13 @@ export const AssistantChat: FC<AssistantChatProps> = ({
   className,
   initialMessages = [],
   onError,
+  onMessageComplete,
+  onRunningChange,
+  onEmptyChange,
+  composerMode,
+  broadcast,
+  stopCount,
+  slotComposerStart,
   emptyState,
   composerOverride,
 }) => {
@@ -37,6 +45,11 @@ export const AssistantChat: FC<AssistantChatProps> = ({
     disabled,
     initialMessages,
     onError,
+    onMessageComplete,
+    onRunningChange,
+    onEmptyChange,
+    broadcast,
+    stopCount,
   });
 
   const composerPlaceholder = useMemo(
@@ -53,6 +66,8 @@ export const AssistantChat: FC<AssistantChatProps> = ({
           onReset={handleReset}
           showRunningIndicator={showRunningIndicator}
           attributes={attributes}
+          composerMode={composerMode}
+          slotComposerStart={slotComposerStart}
           emptyState={emptyState}
           composerOverride={composerOverride}
         />
diff --git a/web/packages/common/src/components/AssistantChat/types.ts b/web/packages/common/src/components/AssistantChat/types.ts
index daaa562fdb..62f438f60b 100644
--- a/web/packages/common/src/components/AssistantChat/types.ts
+++ b/web/packages/common/src/components/AssistantChat/types.ts
@@ -8,6 +8,12 @@ import type { ReactNode } from 'react';
 
 import type { AssistantChatThreadAttributes } from './AssistantChatThread';
 
+export const ComposerMode = {
+  PER_PANEL: 'per-panel',
+  BROADCAST_ALL: 'broadcast-all',
+} as const;
+export type ComposerMode = (typeof ComposerMode)[keyof typeof ComposerMode];
+
 export interface AssistantChatProps {
   /**
    * The model name to route through inference gateway.
@@ -41,9 +47,74 @@ export interface AssistantChatProps {
   className?: string;
   initialMessages?: readonly ThreadMessageLike[];
   onError?: (error: Error) => void;
+  /**
+   * Called once per assistant message after the stream completes (or after
+   * the non-stream completion lands). Surfaces per-message timing so callers
+   * can render their own latency/throughput UI without owning the runtime.
+   * Not invoked on cancellation or error.
+   */
+  onMessageComplete?: (info: AssistantMessageCompletion) => void;
+  /**
+   * Fires whenever the runtime's "is currently streaming" state changes.
+   * Lets a parent (e.g. a page that hosts many AssistantChats) aggregate the
+   * running state across instances — used by the Chat route to drive a global
+   * Stop button in Compare mode.
+   */
+  onRunningChange?: (isRunning: boolean) => void;
+  /**
+   * Fires whenever the thread transitions between empty and non-empty. Lets a
+   * parent derive seed-chip visibility from whether any messages exist.
+   */
+  onEmptyChange?: (isEmpty: boolean) => void;
+  /**
+   * Controls whether the internal composer is shown and how input is driven.
+   * In `broadcast-all` mode the composer is suppressed; a page-level composer
+   * drives every AssistantChat in parallel.
+   * @default ComposerMode.PER_PANEL
+   */
+  composerMode?: ComposerMode;
+  /**
+   * External broadcast trigger. Whenever `seq` changes (excluding initial
+   * mount), the runtime appends `text` as a new user message and runs a
+   * completion — same code path as a user typing into the composer.
+   */
+  broadcast?: BroadcastSignal;
+  /**
+   * Monotonic counter — when it changes, the runtime aborts any in-flight
+   * stream. Lets a parent cancel many AssistantChats at once.
+   */
+  stopCount?: number;
+  /**
+   * Content rendered immediately above the composer, inside the same outer
+   * frame. Use for seed-prompt chips or any prefatory hint that should read
+   * as part of the composer affordance rather than a separate block.
+   */
+  slotComposerStart?: ReactNode;
   emptyState?: {
     slotHeading?: string;
     slotSubheading?: string;
   };
   composerOverride?: ReactNode;
 }
+
+export interface BroadcastSignal {
+  /** Monotonically increasing sequence — on change, runtime fires a send. */
+  seq: number;
+  /** Text to inject as the user's next message. */
+  text: string;
+}
+
+export interface AssistantMessageCompletion {
+  assistantMessageId: string;
+  text: string;
+  /** ms from request start to first delta (0 if non-stream). */
+  ttftMs: number;
+  /** ms from request start to final delta. */
+  totalMs: number;
+  /** Number of delta chunks (1 for non-stream). */
+  chunkCount: number;
+  /** Approximate; chars/4 fallback when the API doesn't return a usage block. */
+  completionTokens: number;
+  /** Completion tokens per second of streaming wall-time (excludes TTFT). */
+  tokensPerSec: number;
+}
diff --git a/web/packages/common/src/components/AssistantChat/useAssistantChatRuntime.ts b/web/packages/common/src/components/AssistantChat/useAssistantChatRuntime.ts
index 540c8007d1..da8836770b 100644
--- a/web/packages/common/src/components/AssistantChat/useAssistantChatRuntime.ts
+++ b/web/packages/common/src/components/AssistantChat/useAssistantChatRuntime.ts
@@ -7,7 +7,7 @@ import {
   type ThreadMessageLike,
   useExternalStoreRuntime,
 } from '@assistant-ui/react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { getCompletionText, isAbortError, isChatCompletionStream } from './completionUtils';
 import { CANCELLED_STATUS, COMPLETE_STATUS, RUNNING_STATUS } from './constants';
@@ -24,10 +24,15 @@ import { useChatCompletion } from '../../hooks/useChatCompletion';
 type UseAssistantChatRuntimeOptions = Pick<
   AssistantChatProps,
   | 'baseURL'
+  | 'broadcast'
+  | 'stopCount'
   | 'disabled'
   | 'initialMessages'
   | 'model'
   | 'onError'
+  | 'onMessageComplete'
+  | 'onRunningChange'
+  | 'onEmptyChange'
   | 'promptData'
   | 'tools'
   | 'workspace'
@@ -42,6 +47,11 @@ export const useAssistantChatRuntime = ({
   disabled = false,
   initialMessages = [],
   onError,
+  onMessageComplete,
+  onRunningChange,
+  onEmptyChange,
+  broadcast,
+  stopCount,
 }: UseAssistantChatRuntimeOptions) => {
   const [messages, setMessages] = useState<readonly ThreadMessageLike[]>(initialMessages);
   const [isRunning, setIsRunning] = useState(false);
@@ -84,6 +94,13 @@ export const useAssistantChatRuntime = ({
       setThreadMessages([...conversationMessages, assistantMessage]);
       setIsRunning(true);
       let responseText = '';
+      // Timing for per-message metrics (TTFT, total, tokens/sec). Emitted via
+      // onMessageComplete so callers (e.g. Studio's Chat route) can render a
+      // stats badge without owning the runtime.
+      // TODO: provide time metric from backend inference gateway (issue 219)
+      const startMs = performance.now();
+      let ttftMs = 0;
+      let chunkCount = 0;
 
       try {
         const result = await createChatCompletion({
@@ -111,16 +128,53 @@ export const useAssistantChatRuntime = ({
           if (runController.signal.aborted) streamController.abort();
           for await (const chunk of result) {
             if (runController.signal.aborted || !isCurrentRun()) break;
-            responseText += chunk.choices[0]?.delta.content ?? '';
-            updateAssistantMessage(assistantMessage.id!, responseText, RUNNING_STATUS);
+            const delta = chunk.choices[0]?.delta.content ?? '';
+            if (delta) {
+              if (ttftMs === 0) ttftMs = Math.round(performance.now() - startMs);
+              responseText += delta;
+              chunkCount += 1;
+              updateAssistantMessage(assistantMessage.id!, responseText, RUNNING_STATUS);
+            }
           }
           updateAssistantMessage(
             assistantMessage.id!,
             responseText,
             runController.signal.aborted ? CANCELLED_STATUS : COMPLETE_STATUS
           );
+          if (!runController.signal.aborted && onMessageComplete) {
+            const totalMs = Math.round(performance.now() - startMs);
+            const completionTokens = Math.max(chunkCount, Math.round(responseText.length / 4));
+            // Throughput over total wall-clock. Using the post-first-token
+            // window instead collapses to a near-zero interval when tokens
+            // arrive in a single chunk or an end-of-stream burst, inflating the
+            // rate by orders of magnitude. Total time is stable and matches the
+            // duration shown alongside it.
+            onMessageComplete({
+              assistantMessageId: assistantMessage.id!,
+              text: responseText,
+              ttftMs,
+              totalMs,
+              chunkCount,
+              tokensPerSec: (completionTokens * 1000) / Math.max(1, totalMs),
+              completionTokens,
+            });
+          }
         } else {
-          updateAssistantMessage(assistantMessage.id!, getCompletionText(result), COMPLETE_STATUS);
+          const text = getCompletionText(result);
+          updateAssistantMessage(assistantMessage.id!, text, COMPLETE_STATUS);
+          if (onMessageComplete) {
+            const totalMs = Math.round(performance.now() - startMs);
+            const completionTokens = Math.round(text.length / 4);
+            onMessageComplete({
+              assistantMessageId: assistantMessage.id!,
+              text,
+              ttftMs: totalMs,
+              totalMs,
+              chunkCount: 1,
+              tokensPerSec: (completionTokens * 1000) / Math.max(1, totalMs),
+              completionTokens,
+            });
+          }
         }
       } catch (error: unknown) {
         if (runController.signal.aborted || isAbortError(error)) {
@@ -149,6 +203,7 @@ export const useAssistantChatRuntime = ({
       disabled,
       model,
       onError,
+      onMessageComplete,
       promptData?.inference_params?.max_tokens,
       promptData?.inference_params?.temperature,
       promptData?.system_prompt,
@@ -227,6 +282,54 @@ export const useAssistantChatRuntime = ({
     setThreadMessages([]);
   }, [setThreadMessages]);
 
+  // External broadcast — when the caller bumps `broadcast.seq`, append the
+  // payload text as a new user message and run a completion. The ref is seeded
+  // with whatever seq is present at mount, so an AssistantChat that mounts
+  // mid-flight (with a non-null broadcast prop) doesn't re-fire the last
+  // broadcast it sees on first render. Subsequent changes fire.
+  const broadcastSeenSeqRef = useRef<number | undefined>(broadcast?.seq);
+  useEffect(() => {
+    if (!broadcast) return;
+    if (broadcast.seq === broadcastSeenSeqRef.current) return;
+    broadcastSeenSeqRef.current = broadcast.seq;
+    const text = broadcast.text.trim();
+    if (!text || disabled) return;
+    const synthetic: AppendMessage = {
+      role: 'user',
+      content: [{ type: 'text', text }],
+    } as unknown as AppendMessage;
+    void handleNewMessage(synthetic);
+  }, [broadcast, disabled, handleNewMessage]);
+
+  // External cancel — same sequence pattern.
+  const stopSeenCountRef = useRef<number | undefined>(stopCount);
+  useEffect(() => {
+    if (stopCount === undefined) return;
+    if (stopCount === stopSeenCountRef.current) return;
+    stopSeenCountRef.current = stopCount;
+    void handleCancel();
+  }, [stopCount, handleCancel]);
+
+  // Abort any in-flight request on unmount (panel removed or remounted).
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  // Surface running-state transitions so a parent can aggregate Stop logic
+  // across multiple AssistantChat instances.
+  useEffect(() => {
+    onRunningChange?.(isRunning);
+  }, [isRunning, onRunningChange]);
+
+  // Surface empty/non-empty transitions so callers can derive seed-chip
+  // visibility from whether the thread has any messages.
+  const isEmpty = messages.length === 0;
+  useEffect(() => {
+    onEmptyChange?.(isEmpty);
+  }, [isEmpty, onEmptyChange]);
+
   const runtime = useExternalStoreRuntime<ThreadMessageLike>({
     messages,
     setMessages: setThreadMessages,
diff --git a/web/packages/common/src/components/UploadModal/DatasetUploader/Select.spec.tsx b/web/packages/common/src/components/UploadModal/DatasetUploader/Select.spec.tsx
index e4f095dd63..d13124900d 100644
--- a/web/packages/common/src/components/UploadModal/DatasetUploader/Select.spec.tsx
+++ b/web/packages/common/src/components/UploadModal/DatasetUploader/Select.spec.tsx
@@ -168,7 +168,7 @@ describe('DatasetSelect', () => {
       expect(enabledOptions.length).toBeGreaterThan(0);
     });
 
-    // Find the first enabled dataset option (not "New Dataset" which is at the end)
+    // Find an existing dataset option (not "New Dataset", which is now first)
     const datasetOption = screen.getByRole('option', { name: 'dataset1' });
     await user.click(datasetOption);
 
diff --git a/web/packages/common/src/components/UploadModal/DatasetUploader/Select.tsx b/web/packages/common/src/components/UploadModal/DatasetUploader/Select.tsx
index 3d5317f8ae..45de88a018 100644
--- a/web/packages/common/src/components/UploadModal/DatasetUploader/Select.tsx
+++ b/web/packages/common/src/components/UploadModal/DatasetUploader/Select.tsx
@@ -118,11 +118,6 @@ export const DatasetSelect: FC<Props> = ({ project, disabled, error }) => {
           className="motion-safe:[&.nv-input:not(.nv-input--disabled):not(.nv-input--readonly)]:transition-[margin,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke] duration-250 data-[state=open]:mb-24"
           disabled={disabled}
           items={[
-            {
-              slotHeading: 'Existing Datasets',
-              attributes: { MenuHeading: { className: 'hidden', 'aria-hidden': true } },
-              items: datasetOptions,
-            },
             ...(allowNewDataset
               ? [
                   {
@@ -139,10 +134,15 @@ export const DatasetSelect: FC<Props> = ({ project, disabled, error }) => {
                   },
                 ]
               : []),
+            {
+              slotHeading: 'Existing Datasets',
+              attributes: { MenuHeading: { className: 'hidden', 'aria-hidden': true } },
+              items: datasetOptions,
+            },
           ]}
           value={selectedDatasetOption}
           onValueChange={handleDatasetSelect}
-          placeholder="Select a Dataset"
+          placeholder="Select a dataset"
         />
       )}
     </FormField>
diff --git a/web/packages/studio/src/components/FileSamplingSnippet/FileSamplingMethodSelect.tsx b/web/packages/studio/src/components/FileSamplingSnippet/FileSamplingMethodSelect.tsx
index 42e71d9328..1874e6a80d 100644
--- a/web/packages/studio/src/components/FileSamplingSnippet/FileSamplingMethodSelect.tsx
+++ b/web/packages/studio/src/components/FileSamplingSnippet/FileSamplingMethodSelect.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { FileSampleMethod } from '@nemo/common/src/utils/sampleTextLines';
-import { Flex, Select, Text } from '@nvidia/foundations-react-core';
+import { Flex, Select } from '@nvidia/foundations-react-core';
 import classnames from 'classnames';
 import type { FC } from 'react';
 
@@ -56,6 +56,8 @@ export interface FileSamplingMethodSelectProps {
   attributes?: FileSamplingMethodSelectAttributes;
   /** Renders method + "max rows" select in one grouped control. */
   rowCountGroup?: FileSamplingRowCountGroup;
+  /** Size of the underlying selects. Defaults to 'small'. */
+  size?: 'small' | 'medium' | 'large';
 }
 
 export const FileSamplingMethodSelect: FC<FileSamplingMethodSelectProps> = ({
@@ -63,13 +65,10 @@ export const FileSamplingMethodSelect: FC<FileSamplingMethodSelectProps> = ({
   onValueChange,
   attributes,
   rowCountGroup,
+  size = 'small',
 }) => {
   const selectAttrs = attributes?.select ?? {};
 
-  const countItems = rowCountGroup
-    ? buildCountItems(rowCountGroup.maxRows, rowCountGroup.value)
-    : [];
-
   const methodSelect = (
     <Select
       multiple={false}
@@ -77,6 +76,7 @@ export const FileSamplingMethodSelect: FC<FileSamplingMethodSelectProps> = ({
       value={value}
       onValueChange={(next) => onValueChange(next as FileSampleMethod)}
       disabled={selectAttrs.disabled}
+      size={size}
       className={classnames(DEFAULT_SELECT_CLASS, selectAttrs.className)}
     />
   );
@@ -85,22 +85,21 @@ export const FileSamplingMethodSelect: FC<FileSamplingMethodSelectProps> = ({
     return methodSelect;
   }
 
+  const countItems = buildCountItems(rowCountGroup.maxRows, rowCountGroup.value);
   const countValue = String(clampRowCount(rowCountGroup.value, rowCountGroup.maxRows));
 
   return (
-    <Flex role="group" gap="density-md" align="center" wrap="wrap" aria-label="File sampling">
-      <Flex gap="density-xs" align="center" className="min-w-0">
-        <Text kind="body/regular/sm">Max rows</Text>
-        <Select
-          multiple={false}
-          items={countItems}
-          value={countValue}
-          onValueChange={(next) => rowCountGroup.onValueChange(Number(next))}
-          disabled={selectAttrs.disabled || rowCountGroup.disabled}
-          className="w-[72px] grow-0"
-        />
-      </Flex>
+    <Flex role="group" gap="density-sm" align="center" aria-label="File sampling">
       {methodSelect}
+      <Select
+        multiple={false}
+        items={countItems}
+        value={countValue}
+        onValueChange={(next) => rowCountGroup.onValueChange(Number(next))}
+        disabled={selectAttrs.disabled || rowCountGroup.disabled}
+        size={size}
+        className="w-[72px] grow-0"
+      />
     </Flex>
   );
 };
diff --git a/web/packages/studio/src/components/ModelChat/index.tsx b/web/packages/studio/src/components/ModelChat/index.tsx
index c8ce489e0d..3865e67ab6 100644
--- a/web/packages/studio/src/components/ModelChat/index.tsx
+++ b/web/packages/studio/src/components/ModelChat/index.tsx
@@ -1,10 +1,19 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { AssistantChat, type AssistantChatProps } from '@nemo/common/src/components/AssistantChat';
+import {
+  AssistantChat,
+  ComposerMode,
+  type AssistantChatProps,
+} from '@nemo/common/src/components/AssistantChat';
+import type { AssistantMessageCompletion } from '@nemo/common/src/components/AssistantChat/types';
 import type { ModelChatStatus } from '@nemo/common/src/utils/models';
+import { DEFAULT_SEED_QUESTIONS } from '@studio/components/chat/defaultSeedQuestions';
+import { SeedQuestions } from '@studio/components/chat/SeedQuestions';
+import { StatsBadge, type ChatMetrics } from '@studio/components/chat/StatsBadge';
+import type { ComposerSeed } from '@studio/routes/ModelCompareRoute/types';
 import { handleGenericError } from '@studio/util/logger';
-import type { FC } from 'react';
+import { type ReactNode, useEffect, useRef, useState, type FC } from 'react';
 
 interface ModelChatProps extends Pick<
   AssistantChatProps,
@@ -20,6 +29,10 @@ interface ModelChatProps extends Pick<
   | 'initialMessages'
   | 'emptyState'
   | 'onError'
+  | 'composerMode'
+  | 'broadcast'
+  | 'stopCount'
+  | 'onRunningChange'
 > {
   /**
    * When provided, ModelChat derives default `disabled` state and a
@@ -28,6 +41,18 @@ interface ModelChatProps extends Pick<
    * precedence.
    */
   modelChatStatus?: ModelChatStatus;
+  /** When set, renders the suggestion-chip strip above the composer when there
+   *  are no messages yet. Clicking a chip seeds the composer (using the
+   *  AssistantChat composer set-input API via a small DOM bridge). */
+  seedQuestions?: string[];
+  /** When false, hides the per-response StatsBadge. Default true. */
+  showMetrics?: boolean;
+  /** Rendered right-aligned at the trailing end of the seed-questions row. */
+  slotComposerEnd?: ReactNode;
+  /** When triggerCount changes, pre-fills the panel's composer textarea with text. */
+  composerSeed?: ComposerSeed;
+  /** Fires when this panel's thread transitions between empty and non-empty. */
+  onEmptyChange?: (isEmpty: boolean) => void;
 }
 
 const STATUS_EMPTY_STATE: Record<
@@ -51,6 +76,13 @@ export const ModelChat: FC<ModelChatProps> = ({
   assistantName,
   emptyState,
   onError,
+  promptData,
+  seedQuestions = DEFAULT_SEED_QUESTIONS,
+  showMetrics = true,
+  slotComposerEnd,
+  composerSeed,
+  onEmptyChange,
+  workspace,
   ...rest
 }) => {
   const resolvedDisabled = disabled ?? (modelChatStatus ? modelChatStatus !== 'enabled' : false);
@@ -58,16 +90,114 @@ export const ModelChat: FC<ModelChatProps> = ({
     disabled === undefined && modelChatStatus && modelChatStatus !== 'enabled'
       ? STATUS_EMPTY_STATE[modelChatStatus]
       : undefined;
-  const resolvedEmptyState = emptyState ?? statusDerivedEmptyState;
+  // In broadcast-all mode the page-level composer is the affordance, so the
+  // per-panel subhead "Prompt your model to get started." is redundant.
+  const compareEmptyState =
+    rest.composerMode === ComposerMode.BROADCAST_ALL
+      ? { slotHeading: 'Ready', slotSubheading: '' }
+      : undefined;
+  const resolvedEmptyState = emptyState ?? statusDerivedEmptyState ?? compareEmptyState;
+
+  // Per-message metrics: store the latest completion so a single StatsBadge
+  // can render under the chat surface.
+  const [latestMetrics, setLatestMetrics] = useState<ChatMetrics | null>(null);
+
+  // Clear stale metrics when inference identity changes (different model or workspace).
+  const prevModelRef = useRef(model);
+  const prevWorkspaceRef = useRef(workspace);
+  if (model !== prevModelRef.current || workspace !== prevWorkspaceRef.current) {
+    prevModelRef.current = model;
+    prevWorkspaceRef.current = workspace;
+    if (latestMetrics !== null) setLatestMetrics(null);
+  }
+
+  const handleMessageComplete = (info: AssistantMessageCompletion) => {
+    setLatestMetrics({
+      totalMs: info.totalMs,
+      completionTokens: info.completionTokens,
+      tokensPerSec: info.tokensPerSec,
+    });
+  };
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Scoped textarea setter — finds the panel's own composer, not any global one.
+  // Kept DOM-based until AssistantChat exposes a proper setInput API.
+  const setComposerText = (text: string) => {
+    if (typeof document === 'undefined' || !containerRef.current) return;
+    const textarea = containerRef.current.querySelector<HTMLTextAreaElement>(
+      'textarea[aria-label="Task prompt"]'
+    );
+    if (!textarea) return;
+    const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
+    setter?.call(textarea, text);
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    textarea.focus();
+  };
+
+  const seedComposer = (text: string) => setComposerText(text);
+
+  // Pre-fill from parent (mode toggle transfer: broadcast→panels).
+  // Intentionally omits composerSeed.text: only fire when triggerCount changes.
+  useEffect(() => {
+    if (composerSeed?.text) setComposerText(composerSeed.text);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [composerSeed?.triggerCount]);
+
+  const isBroadcastAll = rest.composerMode === ComposerMode.BROADCAST_ALL;
+
+  // Track empty/non-empty so per-panel seeds only show in an empty thread.
+  const [isEmpty, setIsEmpty] = useState(true);
+  const handleEmptyChange = (empty: boolean) => {
+    setIsEmpty(empty);
+    onEmptyChange?.(empty);
+    // Reset clears the thread → drop the stale metrics badge too.
+    if (empty) setLatestMetrics(null);
+  };
+
+  // Seeds render inside the composer card. In broadcast-all mode the page-level
+  // CompareComposer owns seeds, so suppress them here. Only show in an empty thread.
+  const showChatSeeds = !!seedQuestions && seedQuestions.length > 0 && !isBroadcastAll && isEmpty;
+
+  // In per-panel mode: metrics sit above seeds in slotComposerStart.
+  // In broadcast-all mode: slotComposerStart is hidden, so metrics fall below.
+  const metricsInComposer = showMetrics && latestMetrics && !isBroadcastAll;
+  const metricsBelow = showMetrics && latestMetrics && isBroadcastAll;
+
+  const chatSeedSlot =
+    showChatSeeds || metricsInComposer || (slotComposerEnd && !isBroadcastAll) ? (
+      <SeedQuestions
+        questions={showChatSeeds ? seedQuestions : []}
+        onSelect={seedComposer}
+        slotStart={
+          metricsInComposer && latestMetrics ? <StatsBadge metrics={latestMetrics} /> : undefined
+        }
+        slotEnd={slotComposerEnd}
+      />
+    ) : undefined;
 
   return (
-    <AssistantChat
-      model={model}
-      assistantName={assistantName ?? model}
-      disabled={resolvedDisabled}
-      emptyState={resolvedEmptyState}
-      onError={onError ?? handleGenericError}
-      {...rest}
-    />
+    <div ref={containerRef} className="flex h-full min-h-0 flex-col">
+      <div className="min-h-0 flex-1">
+        <AssistantChat
+          model={model}
+          workspace={workspace}
+          assistantName={assistantName ?? model}
+          disabled={resolvedDisabled}
+          emptyState={resolvedEmptyState}
+          onError={onError ?? handleGenericError}
+          promptData={promptData}
+          onMessageComplete={handleMessageComplete}
+          onEmptyChange={handleEmptyChange}
+          {...rest}
+          slotComposerStart={chatSeedSlot}
+        />
+      </div>
+      {metricsBelow && (
+        <div className="shrink-0 px-3 pt-1">
+          <StatsBadge metrics={latestMetrics} />
+        </div>
+      )}
+    </div>
   );
 };
diff --git a/web/packages/studio/src/components/ModelChatPanel/ModelChatPanel.spec.tsx b/web/packages/studio/src/components/ModelChatPanel/ModelChatPanel.spec.tsx
index 8fcd645cbc..da2903a6a5 100644
--- a/web/packages/studio/src/components/ModelChatPanel/ModelChatPanel.spec.tsx
+++ b/web/packages/studio/src/components/ModelChatPanel/ModelChatPanel.spec.tsx
@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ModelWorkspaceGroup } from '@nemo/common/src/api/models/useModels';
 import type { ModelEntity } from '@nemo/sdk/generated/platform/schema';
 import { ModelChatPanel } from '@studio/components/ModelChatPanel';
 import { TestProviders } from '@studio/tests/util/TestProviders';
@@ -26,14 +27,32 @@ vi.mock('@nemo/common/src/components/ModelSelectV2', () => ({
 const makeModel = (workspace: string, name: string): ModelEntity =>
   ({ workspace, name }) as unknown as ModelEntity;
 
-const renderPanel = (modelURN: string | null, availableModels: ModelEntity[]) => {
+const makeGroups = (models: ModelEntity[]): ModelWorkspaceGroup[] => {
+  const byWorkspace = new Map<string, ModelEntity[]>();
+  for (const m of models) {
+    const ws = m.workspace ?? '';
+    if (!byWorkspace.has(ws)) byWorkspace.set(ws, []);
+    byWorkspace.get(ws)!.push(m);
+  }
+  return Array.from(byWorkspace.entries()).map(([workspace, models]) => ({ workspace, models }));
+};
+
+const renderPanel = (modelURN: string | null, modelGroups: ModelWorkspaceGroup[]) => {
   return render(
     <TestProviders>
       <MemoryRouter>
         <ModelChatPanel
-          panel={{ id: 0, collapsed: false, modelURN }}
+          panel={{
+            id: 0,
+            collapsed: false,
+            modelURN,
+            roleColor: 'baseline',
+            roleLabel: 'Baseline',
+            isSinglePanel: true,
+            locked: false,
+          }}
           fallbackWorkspace="route-workspace"
-          models={availableModels}
+          modelGroups={modelGroups}
           isLoadingModels={false}
           onToggle={vi.fn()}
           onRemove={vi.fn()}
@@ -50,10 +69,10 @@ describe('ModelChatPanel — URN routing', () => {
   });
 
   it("routes inference to the model's own workspace (not the route workspace)", () => {
-    renderPanel('nvidia/llama-70b', [
-      makeModel('abacusai', 'llama-70b'),
-      makeModel('nvidia', 'llama-70b'),
-    ]);
+    renderPanel(
+      'nvidia/llama-70b',
+      makeGroups([makeModel('abacusai', 'llama-70b'), makeModel('nvidia', 'llama-70b')])
+    );
 
     expect(modelChatSpy).toHaveBeenCalledWith(
       expect.objectContaining({ workspace: 'nvidia', model: 'llama-70b' })
@@ -62,21 +81,29 @@ describe('ModelChatPanel — URN routing', () => {
 
   it('picks the correct workspace even when two models share the same name', () => {
     // The previous name-based lookup would have silently bound this panel to
-    // whichever workspace's model came first in `availableModels`. With URNs
-    // end-to-end, the workspace selected in the URN is used.
-    renderPanel('abacusai/llama-70b', [
-      makeModel('nvidia', 'llama-70b'),
-      makeModel('abacusai', 'llama-70b'),
-    ]);
+    // whichever workspace's model came first in the list. With URNs end-to-end,
+    // the workspace selected in the URN is used.
+    renderPanel(
+      'abacusai/llama-70b',
+      makeGroups([makeModel('nvidia', 'llama-70b'), makeModel('abacusai', 'llama-70b')])
+    );
 
     expect(modelChatSpy).toHaveBeenCalledWith(
       expect.objectContaining({ workspace: 'abacusai', model: 'llama-70b' })
     );
   });
 
-  it('falls back to the route workspace only when no model is assigned', () => {
+  it('falls back to the route workspace and disables chat when no model is assigned', () => {
     renderPanel(null, []);
-    // ModelChat isn't rendered without a model — the panel shows the empty state.
-    expect(modelChatSpy).not.toHaveBeenCalled();
+    // ModelChat still renders, but disabled and showing an empty state; with no
+    // model URN it uses the route fallback workspace and an empty model id.
+    expect(modelChatSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        workspace: 'route-workspace',
+        model: '',
+        disabled: true,
+        emptyState: expect.objectContaining({ slotHeading: expect.any(String) }),
+      })
+    );
   });
 });
diff --git a/web/packages/studio/src/components/ModelChatPanel/index.tsx b/web/packages/studio/src/components/ModelChatPanel/index.tsx
index 368a458e94..aa1787c787 100644
--- a/web/packages/studio/src/components/ModelChatPanel/index.tsx
+++ b/web/packages/studio/src/components/ModelChatPanel/index.tsx
@@ -1,43 +1,58 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ModelWorkspaceGroup } from '@nemo/common/src/api/models/useModels';
 import { ModelSelectV2, type ModelSelection } from '@nemo/common/src/components/ModelSelectV2';
 import { getPartsFromReference } from '@nemo/common/src/namedEntity';
-import { groupModelsByWorkspace } from '@nemo/common/src/utils/models';
-import type { ModelEntity } from '@nemo/sdk/generated/platform/schema';
+import { Text } from '@nvidia/foundations-react-core';
+import { DEFAULT_INFERENCE_PARAMS, type InferenceParams } from '@studio/components/chat/params';
+import { ParamsPopover } from '@studio/components/chat/ParamsPopover';
 import { ModelChat } from '@studio/components/ModelChat';
-import type { PanelState } from '@studio/routes/ModelCompareRoute/types';
+import {
+  PANEL_ROLE_DOT_CLASS,
+  type PanelChatControls,
+  type PanelState,
+} from '@studio/routes/ModelCompareRoute/types';
 import { Minimize2, Trash2 } from 'lucide-react';
-import { useCallback, useMemo, type FC } from 'react';
+import { useCallback, useState, type FC } from 'react';
 
-interface ModelChatPanelProps {
+interface ModelChatPanelProps extends PanelChatControls {
   panel: PanelState;
   /** Fallback workspace used only if a panel has no model assigned yet. */
   fallbackWorkspace: string;
-  models: ModelEntity[];
+  modelGroups: ModelWorkspaceGroup[];
   isLoadingModels: boolean;
   onToggle: (id: number) => void;
   onRemove: (id: number) => void;
   /** Receives the full URN ("workspace/name"), or null when cleared. */
   onModelChange: (id: number, modelURN: string | null) => void;
+  /** Hide the trash button (locked baseline in agent overlay, or only one panel). */
+  hideRemove?: boolean;
 }
 
 export const ModelChatPanel: FC<ModelChatPanelProps> = ({
   panel,
   fallbackWorkspace,
-  models,
+  modelGroups,
   isLoadingModels,
   onToggle,
   onRemove,
   onModelChange,
+  hideRemove,
+  composerMode,
+  broadcast,
+  stopCount,
+  onRunningChange,
+  onEmptyChange,
+  slotComposerEnd,
+  composerSeed,
+  seedQuestions,
 }) => {
-  const modelGroups = useMemo(() => groupModelsByWorkspace(models, { sort: true }), [models]);
   const selectedModel: ModelSelection | null = panel.modelURN ? { model: panel.modelURN } : null;
+  const [inferenceParams, setInferenceParams] = useState<InferenceParams>(DEFAULT_INFERENCE_PARAMS);
 
   const handleModelChange = useCallback(
     (selection: ModelSelection) => {
-      // ModelSelectV2 emits the full URN — pass it through unchanged so we never
-      // ambiguously resolve by bare name across workspaces.
       onModelChange(panel.id, selection.model);
     },
     [panel.id, onModelChange]
@@ -49,58 +64,86 @@ export const ModelChatPanel: FC<ModelChatPanelProps> = ({
   const modelName = parts?.name ?? null;
   const modelWorkspace = parts?.workspace || fallbackWorkspace;
 
-  const collapsedLabel = modelName ?? `Panel ${panel.id}`;
-
   if (panel.collapsed) {
     return (
       <button
         onClick={() => onToggle(panel.id)}
-        className="h-full shrink-0 cursor-pointer rounded-lg border border-base bg-surface-raised px-2 py-4 hover:bg-surface-sunken"
-        aria-label={`Expand ${collapsedLabel}`}
+        className="flex h-full shrink-0 cursor-pointer flex-col items-center gap-3 rounded-lg border border-base bg-surface-raised px-2 py-4 hover:bg-surface-sunken"
+        aria-label={`Expand ${panel.roleLabel}`}
       >
-        <span className="text-sm font-medium [writing-mode:vertical-rl]">{collapsedLabel}</span>
+        <span className={`mt-1 h-2 w-2 rounded-full ${PANEL_ROLE_DOT_CLASS[panel.roleColor]}`} />
+        <span className="text-sm font-medium [writing-mode:vertical-rl]">{panel.roleLabel}</span>
       </button>
     );
   }
 
   return (
-    <div className="relative flex h-full min-w-[300px] flex-1 flex-col rounded-lg border border-base bg-surface-raised">
-      <div className="flex shrink-0 items-center gap-2 border-b border-base p-3">
+    <div
+      data-model-panel
+      className="relative flex h-full min-w-[360px] flex-1 flex-col rounded-lg border border-base bg-surface-raised"
+    >
+      {/* Role label + panel actions — only in compare mode (multiple panels). */}
+      {!panel.isSinglePanel && (
+        <div className="flex shrink-0 items-center gap-2 border-b border-base px-3 py-2">
+          <span className={`h-2 w-2 rounded-full ${PANEL_ROLE_DOT_CLASS[panel.roleColor]}`} />
+          <Text kind="label/bold/md">{panel.roleLabel}</Text>
+          <div className="ml-auto flex items-center gap-1">
+            <button
+              onClick={() => onToggle(panel.id)}
+              className="text-fg-subdued hover:text-fg-base cursor-pointer rounded p-1.5 hover:bg-surface-sunken"
+              aria-label={`Collapse ${panel.roleLabel}`}
+            >
+              <Minimize2 size={16} />
+            </button>
+            {!hideRemove && (
+              <button
+                onClick={() => onRemove(panel.id)}
+                className="text-fg-subdued hover:text-fg-base cursor-pointer rounded p-1.5 hover:bg-surface-sunken"
+                aria-label={`Remove ${panel.roleLabel}`}
+              >
+                <Trash2 size={16} />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+      {/* Model picker + inference params — shared across single and compare modes. */}
+      <div className="flex shrink-0 items-center gap-2 border-b border-base px-3 py-2">
         <div className="flex-1">
           <ModelSelectV2
             value={selectedModel}
             onValueChange={handleModelChange}
             groups={modelGroups}
             loading={isLoadingModels}
-            placeholder={isLoadingModels ? 'Loading models...' : 'Select a model...'}
             hideAdapters
             fullWidth
+            disabled={panel.locked}
           />
         </div>
-        <button
-          onClick={() => onToggle(panel.id)}
-          className="cursor-pointer rounded border border-base bg-surface-sunken p-1.5 hover:bg-surface-base"
-          aria-label={`Collapse panel ${panel.id}`}
-        >
-          <Minimize2 size={16} />
-        </button>
-        <button
-          onClick={() => onRemove(panel.id)}
-          className="cursor-pointer rounded border border-base bg-surface-sunken p-1.5 hover:bg-surface-base"
-          aria-label={`Remove panel ${panel.id}`}
-        >
-          <Trash2 size={16} />
-        </button>
+        <ParamsPopover value={inferenceParams} onChange={setInferenceParams} />
       </div>
 
-      <div className="flex min-h-0 flex-1 flex-col px-3 pb-3">
-        {modelName ? (
-          <ModelChat model={modelName} workspace={modelWorkspace} />
-        ) : (
-          <div className="flex flex-1 items-center justify-center text-fg-subdued">
-            Select a model to start chatting
-          </div>
-        )}
+      {/* Chat surface */}
+      <div className="flex min-h-0 flex-1 flex-col px-3 pb-1">
+        <ModelChat
+          // Remount (clears messages + metrics) when the selected model changes.
+          key={panel.modelURN ?? 'none'}
+          model={modelName ?? ''}
+          workspace={modelWorkspace}
+          disabled={!modelName}
+          emptyState={!modelName ? { slotHeading: 'Select a model to start chatting' } : undefined}
+          promptData={{ inference_params: inferenceParams }}
+          composerMode={composerMode}
+          slotComposerEnd={slotComposerEnd}
+          composerSeed={composerSeed}
+          seedQuestions={seedQuestions}
+          broadcast={broadcast}
+          stopCount={stopCount}
+          onRunningChange={
+            onRunningChange ? (running) => onRunningChange(panel.id, running) : undefined
+          }
+          onEmptyChange={onEmptyChange ? (empty) => onEmptyChange(panel.id, empty) : undefined}
+        />
       </div>
     </div>
   );
diff --git a/web/packages/studio/src/components/ModelCompareChat/index.tsx b/web/packages/studio/src/components/ModelCompareChat/index.tsx
index 6d39dde187..fd5e2f1a9a 100644
--- a/web/packages/studio/src/components/ModelCompareChat/index.tsx
+++ b/web/packages/studio/src/components/ModelCompareChat/index.tsx
@@ -1,28 +1,53 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { ModelEntity } from '@nemo/sdk/generated/platform/schema';
+import type { ModelWorkspaceGroup } from '@nemo/common/src/api/models/useModels';
+import { Tooltip } from '@nvidia/foundations-react-core';
 import { ModelChatPanel } from '@studio/components/ModelChatPanel';
-import type { PanelState, SharedModelEntry } from '@studio/routes/ModelCompareRoute/types';
-import { FC, useCallback, useState } from 'react';
+import {
+  PANEL_ROLE_COLORS,
+  PANEL_ROLE_LABELS,
+  type PanelChatControls,
+  type PanelState,
+  type SharedModelEntry,
+} from '@studio/routes/ModelCompareRoute/types';
+import { Plus } from 'lucide-react';
+import { useCallback, useState, type FC, type ReactNode } from 'react';
 
-interface ModelCompareChatProps {
+interface ModelCompareChatProps extends PanelChatControls {
   /** Route workspace — used only as a fallback for panels without an assigned model. */
   workspace: string;
-  availableModels: ModelEntity[];
+  modelGroups: ModelWorkspaceGroup[];
   isLoadingModels: boolean;
   models: SharedModelEntry[];
   onRemoveModel: (id: number) => void;
   onSetModel: (id: number, modelURN: string | null) => void;
+  /** Incremented to remount all chat panels (clears messages) without losing model selections. */
+  chatResetCount?: number;
+  /** Called when the user clicks the Add Model button. Omit to hide the button (gutter stays). */
+  onAddModel?: () => void;
+  /** Broadcast composer, rendered below the panels and aligned to the panels' width. */
+  slotComposer?: ReactNode;
 }
 
 export const ModelCompareChat: FC<ModelCompareChatProps> = ({
   workspace,
-  availableModels,
+  modelGroups,
   isLoadingModels,
   models,
   onRemoveModel,
   onSetModel,
+  chatResetCount,
+  composerMode,
+  broadcast,
+  stopCount,
+  onRunningChange,
+  onEmptyChange,
+  slotComposerEnd,
+  composerSeed,
+  seedQuestions,
+  onAddModel,
+  slotComposer,
 }) => {
   // Per-panel UI state that's view-local (doesn't cross over to Prompts)
   const [collapsedIds, setCollapsedIds] = useState<Set<number>>(new Set());
@@ -36,31 +61,88 @@ export const ModelCompareChat: FC<ModelCompareChatProps> = ({
     });
   }, []);
 
-  // Full URN flows through to ModelChatPanel and back untouched — no
-  // name-only round-trip, so two workspaces that publish the same model name
-  // stay unambiguous end-to-end.
-  const panels: PanelState[] = models.map((m) => ({
-    id: m.id,
-    collapsed: collapsedIds.has(m.id),
-    modelURN: m.modelURN,
-  }));
+  const isSinglePanel = models.length === 1;
+
+  // Compose PanelState per-render from shared entry + per-view ephemeral state
+  // + position-derived role.
+  const panels: PanelState[] = models.map((m, idx) => {
+    const roleColor = PANEL_ROLE_COLORS[Math.min(idx, PANEL_ROLE_COLORS.length - 1)];
+    return {
+      id: m.id,
+      collapsed: collapsedIds.has(m.id),
+      modelURN: m.modelURN,
+      roleColor,
+      roleLabel: PANEL_ROLE_LABELS[roleColor],
+      isSinglePanel,
+      locked: !!m.locked,
+    };
+  });
+
+  // The right gutter is always present so the panels' scroll area keeps a fixed
+  // right edge: at max panels (no add button) it holds an invisible placeholder
+  // of the same width, and panels overflow-scroll underneath it.
+  const gutter = (
+    <div className="flex shrink-0 items-start pr-6 pt-2">
+      {onAddModel ? (
+        <Tooltip slotContent="Add model">
+          <button
+            onClick={onAddModel}
+            className="flex cursor-pointer items-center justify-center rounded border border-base bg-surface-raised p-1.5 text-fg-subdued transition-colors hover:bg-surface-sunken hover:text-fg-base"
+            aria-label="Add model"
+          >
+            <Plus size={16} />
+          </button>
+        </Tooltip>
+      ) : (
+        <span
+          aria-hidden
+          className="invisible flex items-center justify-center rounded border border-base p-1.5"
+        >
+          <Plus size={16} />
+        </span>
+      )}
+    </div>
+  );
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex min-h-0 flex-1 gap-2 overflow-x-auto px-2 pb-2">
-        {panels.map((panel) => (
-          <ModelChatPanel
-            key={panel.id}
-            panel={panel}
-            fallbackWorkspace={workspace}
-            models={availableModels}
-            isLoadingModels={isLoadingModels}
-            onToggle={togglePanel}
-            onRemove={onRemoveModel}
-            onModelChange={onSetModel}
-          />
-        ))}
+      <div className="flex min-h-0 flex-1">
+        <div className="flex min-h-0 flex-1 gap-3 overflow-x-auto pl-6 pr-2 pt-2 pb-2">
+          {panels.map((panel) => (
+            <ModelChatPanel
+              key={`${panel.id}-${chatResetCount ?? 0}`}
+              panel={panel}
+              fallbackWorkspace={workspace}
+              modelGroups={modelGroups}
+              isLoadingModels={isLoadingModels}
+              onToggle={togglePanel}
+              onRemove={onRemoveModel}
+              onModelChange={onSetModel}
+              hideRemove={panel.locked || models.length <= 1}
+              composerMode={composerMode}
+              slotComposerEnd={slotComposerEnd}
+              composerSeed={composerSeed}
+              broadcast={broadcast}
+              stopCount={stopCount}
+              onRunningChange={onRunningChange}
+              onEmptyChange={onEmptyChange}
+              seedQuestions={seedQuestions}
+            />
+          ))}
+        </div>
+        {gutter}
       </div>
+      {slotComposer && (
+        <div className="flex">
+          <div className="min-w-0 flex-1 pl-6 pr-2 pb-3">{slotComposer}</div>
+          {/* Invisible gutter copy keeps the composer's right edge aligned to the panels. */}
+          <div className="invisible flex shrink-0 items-start pr-6" aria-hidden>
+            <span className="flex items-center justify-center rounded border border-base p-1.5">
+              <Plus size={16} />
+            </span>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/web/packages/studio/src/components/ModelComparePrompts/index.tsx b/web/packages/studio/src/components/ModelComparePrompts/index.tsx
index 5c352804fb..dbc73764dd 100644
--- a/web/packages/studio/src/components/ModelComparePrompts/index.tsx
+++ b/web/packages/studio/src/components/ModelComparePrompts/index.tsx
@@ -1,18 +1,29 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ModelWorkspaceGroup } from '@nemo/common/src/api/models/useModels';
 import { ModelSelectV2, type ModelSelection } from '@nemo/common/src/components/ModelSelectV2';
+import { UploadModal } from '@nemo/common/src/components/UploadModal';
+import type { SubmitUploadType } from '@nemo/common/src/components/UploadModal/types';
 import { useChatCompletion } from '@nemo/common/src/hooks/useChatCompletion';
 import { getPartsFromReference } from '@nemo/common/src/namedEntity';
-import { resolveKeyPath } from '@nemo/common/src/utils/file';
-import { groupModelsByWorkspace } from '@nemo/common/src/utils/models';
+import { FileFormat, InputFileSchemaType } from '@nemo/common/src/types';
+import { extractUserFriendlyKeysFromRow, resolveKeyPath } from '@nemo/common/src/utils/file';
+import { detectFileStructure, validateFileFormat } from '@nemo/common/src/utils/fileValidation';
 import { type FileSampleMethod, sampleIndices } from '@nemo/common/src/utils/sampleTextLines';
-import type { ModelEntity } from '@nemo/sdk/generated/platform/schema';
-import { Button, Flex, Modal, Stack, Text } from '@nvidia/foundations-react-core';
-import { DatasetInputFile, type DatasetInputFileResult } from '@studio/components/DatasetInputFile';
+import { filesDownloadFile } from '@nemo/sdk/generated/platform/api';
+import { Button, Flex, Modal, Select, Text, Tooltip } from '@nvidia/foundations-react-core';
+import { SAMPLE_DATASETS } from '@studio/components/chat/sampleDatasets';
+import { StatsBadge } from '@studio/components/chat/StatsBadge';
+import type { DatasetInputFileResult } from '@studio/components/DatasetInputFile';
 import { FileSamplingMethodSelect } from '@studio/components/FileSamplingSnippet/FileSamplingMethodSelect';
-import type { SharedModelEntry } from '@studio/routes/ModelCompareRoute/types';
-import { Loader2, Maximize2, Play, Trash2 } from 'lucide-react';
+import {
+  PANEL_ROLE_COLORS,
+  PANEL_ROLE_DOT_CLASS,
+  PANEL_ROLE_LABELS,
+  type SharedModelEntry,
+} from '@studio/routes/ModelCompareRoute/types';
+import { Maximize2, Plus, Trash2 } from 'lucide-react';
 import { type FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 const DEFAULT_SAMPLE_SIZE = 5;
@@ -20,18 +31,37 @@ const DEFAULT_SAMPLE_SIZE = 5;
 /** Number of inference requests to run concurrently; the rest queue. */
 const INFERENCE_BATCH_SIZE = 10;
 
+/** Sentinel item values for the dataset picker. */
+const UPLOADED_FILE_VALUE = '__uploaded__';
+const FILESET_PICKER_VALUE = '__fileset_picker__';
+
+interface ResponseStats {
+  /** Wall-clock time from request fire to response, in ms. */
+  totalMs: number;
+  /** From `usage.completion_tokens` when the gateway returns it; otherwise estimated from text length. */
+  completionTokens: number;
+  /** Derived: completionTokens / (totalMs / 1000). */
+  tokensPerSec: number;
+}
+
+interface ResponseResult {
+  text: string;
+  stats: ResponseStats;
+}
+
 interface PromptRow {
   /** Index in the parsed dataset. */
   sourceIndex: number;
   /** Resolved prompt text */
   prompt: string;
-  /** Model id -> response text (null = error, undefined = not yet run) */
-  responses: Record<number, string | null | undefined>;
+  /** Model id -> response data (null = error, undefined = not yet run) */
+  responses: Record<number, ResponseResult | null | undefined>;
 }
 
 interface ExpandedCellState {
   title: string;
   content: string;
+  stats?: ResponseStats;
 }
 
 /** Builds prompt rows from parsed dataset rows using the shared sampling controls. */
@@ -62,25 +92,98 @@ function buildPromptRowsFromParsedRows(
   return rows;
 }
 
+/**
+ * Inline upload parser. Mirrors `DatasetInputFile`'s file path but runs without
+ * its full validation UI — errors surface as a small inline banner under the
+ * picker. We can't reuse `DatasetInputFile` here because we want a single
+ * dropdown that owns both sample selection and upload.
+ */
+async function parseUploadedFile(file: File): Promise<DatasetInputFileResult | { error: string }> {
+  const validation = await validateFileFormat(file);
+  if (!validation.isValid || !validation.format) {
+    return { error: validation.error ?? 'Invalid file format' };
+  }
+  const detection = await detectFileStructure(file, validation.format);
+  const text = await file.text();
+  let parsedRows: Record<string, unknown>[];
+  try {
+    if (validation.format === FileFormat.JSONL) {
+      parsedRows = text
+        .trim()
+        .split('\n')
+        .filter((line) => line.length > 0)
+        .map((line) => JSON.parse(line) as Record<string, unknown>);
+    } else {
+      const parsed: unknown = JSON.parse(text);
+      parsedRows = Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>[])
+        : [parsed as Record<string, unknown>];
+    }
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Failed to parse file contents' };
+  }
+  if (parsedRows.length === 0) {
+    return { error: 'File contains no rows' };
+  }
+  const firstRow = (detection?.firstRow as Record<string, unknown> | undefined) ?? parsedRows[0];
+  const availableKeys = firstRow ? extractUserFriendlyKeysFromRow(firstRow) : [];
+
+  // Auto-detect prompt key: prefer the detector's answer, then fall back to common keys.
+  let promptKey: string | null = null;
+  if (detection?.schemaType === InputFileSchemaType.COMPLETION) {
+    promptKey = detection.detectedFields.prompt ?? null;
+  } else if (detection?.schemaType === InputFileSchemaType.CHAT_COMPLETION) {
+    promptKey = detection.detectedMessages.user?.selector ?? null;
+  }
+  if (!promptKey) {
+    const candidates = ['prompt', 'question', 'input', 'text'];
+    promptKey = candidates.find((k) => typeof firstRow[k] === 'string') ?? null;
+  }
+  // If detection couldn't find a prompt column we still return the parsed file
+  // (with `promptKey: null`) so the inline column picker can let the user choose.
+  return {
+    fileUrl: `upload://${file.name}`,
+    format: validation.format,
+    validationResult: validation,
+    detectionResult: detection,
+    availableKeys,
+    keyMapping: { promptKey, completionKey: null, idealResponseKey: null },
+    firstRow,
+    parsedRows,
+    rowCount: parsedRows.length,
+  };
+}
+
 interface ModelComparePromptsProps {
   workspace: string;
-  availableModels: ModelEntity[];
+  modelGroups: ModelWorkspaceGroup[];
   isLoadingModels: boolean;
   models: SharedModelEntry[];
   onRemoveModel: (id: number) => void;
   onSetModel: (id: number, modelURN: string | null) => void;
   /** Called when the view's readiness to add models changes (i.e. file is loaded with a valid prompt key) */
   onReadyChange?: (ready: boolean) => void;
+  /** Called when the user clicks the Add Model button. Omit to hide the button. */
+  onAddModel?: () => void;
+  /**
+   * When set, default-select the matching `SAMPLE_DATASETS` entry on mount so
+   * the user lands on the agent's golden-prompts dataset without a click.
+   * Matching is by id equality (e.g. agent name "calculator-agent" matches the
+   * "calculator-agent" sample). Other samples remain pickable.
+   */
+  agentName?: string | null;
 }
 
 export const ModelComparePrompts: FC<ModelComparePromptsProps> = ({
   workspace,
-  availableModels,
+  modelGroups,
   isLoadingModels,
   models,
   onRemoveModel,
   onSetModel,
   onReadyChange,
+  agentName,
+  onAddModel,
 }) => {
   const [fileResult, setFileResult] = useState<DatasetInputFileResult | null>(null);
   const [promptRows, setPromptRows] = useState<PromptRow[]>([]);
@@ -88,25 +191,46 @@ export const ModelComparePrompts: FC<ModelComparePromptsProps> = ({
   const [sampleSize, setSampleSize] = useState<number>(DEFAULT_SAMPLE_SIZE);
   const [sampleMethod, setSampleMethod] = useState<FileSampleMethod>('random');
   const [expandedCell, setExpandedCell] = useState<ExpandedCellState | null>(null);
-
+  const [pickerValue, setPickerValue] = useState<string | undefined>(undefined);
+  // Bumped to remount the dataset Select after the "Select from dataset file..."
+  // sentinel is chosen, so the action can be retriggered (re-selecting the same
+  // option otherwise fires no change event).
+  const [pickerSelectKey, setPickerSelectKey] = useState(0);
+  const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [isFilesetPickerOpen, setIsFilesetPickerOpen] = useState(false);
+  // True when the loaded file's prompt column was auto-detected. In that case
+  // we hide the manual column picker; we only surface it when detection failed.
+  const [promptKeyAutoDetected, setPromptKeyAutoDetected] = useState(false);
   const { mutateAsync: createCompletion } = useChatCompletion();
 
-  // Monotonic run id. Incremented when a run starts and when prompts
-  // change, so any in-flight run that finishes later checks runIdRef before
-  // writing results and drops the update if it's stale.
+  // Monotonic run id. Incremented on invalidation; guards stale writeCell calls.
   const runIdRef = useRef(0);
+  // AbortController for the active run; aborted when a new run starts,
+  // dataset/sampling changes, or the component unmounts.
+  const runAbortRef = useRef<AbortController | null>(null);
 
   const rowCount = fileResult?.rowCount ?? 0;
 
   const handleFileChange = useCallback((result: DatasetInputFileResult | null) => {
-    runIdRef.current += 1; // invalidate any in-flight run
+    runIdRef.current += 1;
+    runAbortRef.current?.abort();
     setFileResult(result);
     setPromptRows([]);
+    setPromptKeyAutoDetected(result?.keyMapping.promptKey != null);
     if (result) {
       setSampleSize(Math.min(DEFAULT_SAMPLE_SIZE, result.rowCount || DEFAULT_SAMPLE_SIZE));
     }
   }, []);
 
+  // Override the auto-detected prompt column. Updating `keyMapping.promptKey`
+  // triggers the row-rebuild effect below; fresh rows clear stale responses.
+  const handlePromptKeyChange = useCallback((key: string) => {
+    setFileResult((prev) =>
+      prev ? { ...prev, keyMapping: { ...prev.keyMapping, promptKey: key } } : prev
+    );
+  }, []);
+
   /**
    * Clear cached inference responses. If `columnId` is provided, only that
    * column's responses are cleared (e.g. when a new model is picked for the
@@ -143,16 +267,20 @@ export const ModelComparePrompts: FC<ModelComparePromptsProps> = ({
     runIdRef.current += 1;
     const myRunId = runIdRef.current;
 
+    runAbortRef.current?.abort();
+    const runController = new AbortController();
+    runAbortRef.current = runController;
+
     setIsRunning(true);
     clearResponses();
 
-    // Writes a single cell's response, but only if this run is still current.
-    const writeCell = (sourceIndex: number, modelId: number, content: string | null) => {
+    // Writes a single cell's result, but only if this run is still current.
+    const writeCell = (sourceIndex: number, modelId: number, result: ResponseResult | null) => {
       if (runIdRef.current !== myRunId) return;
       setPromptRows((prev) =>
         prev.map((row) =>
           row.sourceIndex === sourceIndex
-            ? { ...row, responses: { ...row.responses, [modelId]: content } }
+            ? { ...row, responses: { ...row.responses, [modelId]: result } }
             : row
         )
       );
@@ -163,44 +291,108 @@ export const ModelComparePrompts: FC<ModelComparePromptsProps> = ({
     const taskFactories: Array<() => Promise<void>> = [];
     snapshotActiveModels.forEach((model) => {
       snapshotPromptRows.forEach((row) => {
-        taskFactories.push(() =>
-          createCompletion({
+        taskFactories.push(() => {
+          const startTime = performance.now();
+          return createCompletion({
             model: model.name,
             workspace: model.modelWorkspace || workspace,
             messages: [{ role: 'user', content: row.prompt }],
             stream: false,
+            signal: runController.signal,
           })
             .then((result) => {
+              const totalMs = performance.now() - startTime;
               const content =
                 result && 'choices' in result
                   ? (result.choices[0]?.message?.content ?? null)
                   : null;
-              writeCell(row.sourceIndex, model.id, content);
+              if (content === null) {
+                writeCell(row.sourceIndex, model.id, null);
+                return;
+              }
+              const usage = result && 'usage' in result ? result.usage : undefined;
+              // Fallback estimate: ~4 chars per token. Good enough for the badge when
+              // the gateway elides usage stats.
+              const completionTokens =
+                usage?.completion_tokens ?? Math.max(1, Math.round(content.length / 4));
+              const tokensPerSec = totalMs > 0 ? completionTokens / (totalMs / 1000) : 0;
+              writeCell(row.sourceIndex, model.id, {
+                text: content,
+                stats: { totalMs, completionTokens, tokensPerSec },
+              });
             })
             .catch((error) => {
               console.error('Inference request failed:', error);
               writeCell(row.sourceIndex, model.id, null);
-            })
-        );
+            });
+        });
       });
     });
 
     // Run tasks in capped-size batches so we don't flood the gateway.
-    for (let i = 0; i < taskFactories.length; i += INFERENCE_BATCH_SIZE) {
-      if (runIdRef.current !== myRunId) break; // stale run: stop firing more
-      const batch = taskFactories.slice(i, i + INFERENCE_BATCH_SIZE).map((fn) => fn());
-      await Promise.allSettled(batch);
-    }
-
-    if (runIdRef.current === myRunId) {
-      setIsRunning(false);
+    try {
+      for (let i = 0; i < taskFactories.length; i += INFERENCE_BATCH_SIZE) {
+        if (runController.signal.aborted) break;
+        const batch = taskFactories.slice(i, i + INFERENCE_BATCH_SIZE).map((fn) => fn());
+        await Promise.allSettled(batch);
+      }
+    } finally {
+      if (runAbortRef.current === runController) {
+        runAbortRef.current = null;
+        setIsRunning(false);
+      }
     }
   }, [models, promptRows, workspace, createCompletion, clearResponses]);
 
+  // Cancel an in-flight run without clearing results. Bumping the run id makes
+  // any writes from aborted (rejected) requests no-op, so completed cells keep
+  // their results and still-pending cells stay blank. A later Run clears all.
+  const cancelRun = useCallback(() => {
+    runIdRef.current += 1;
+    runAbortRef.current?.abort();
+    runAbortRef.current = null;
+    setIsRunning(false);
+  }, []);
+
   const hasPromptKey = fileResult?.keyMapping.promptKey != null;
   const hasAssignedModel = models.some((m) => m.modelURN !== null);
   const hasPrompts = promptRows.length > 0;
 
+  /**
+   * Per-column averages across all completed responses. `tokensPerSec` is
+   * weighted (sum tokens / sum seconds) rather than a mean-of-means so short
+   * responses don't over-influence the rate. Returns null for columns with
+   * zero completed responses so the footer can render an em-dash.
+   */
+  const averagesByModelId = useMemo(() => {
+    const result: Record<number, (ResponseStats & { count: number }) | null> = {};
+    models.forEach((m) => {
+      let totalMs = 0;
+      let totalTokens = 0;
+      let count = 0;
+      promptRows.forEach((row) => {
+        const r = row.responses[m.id];
+        if (!r) return;
+        totalMs += r.stats.totalMs;
+        totalTokens += r.stats.completionTokens;
+        count += 1;
+      });
+      if (count === 0) {
+        result[m.id] = null;
+        return;
+      }
+      result[m.id] = {
+        totalMs: totalMs / count,
+        completionTokens: totalTokens / count,
+        tokensPerSec: totalMs > 0 ? totalTokens / (totalMs / 1000) : 0,
+        count,
+      };
+    });
+    return result;
+  }, [models, promptRows]);
+
+  const anyAverages = Object.values(averagesByModelId).some((a) => a !== null);
+
   // Notify parent when readiness changes. "Ready" means the table is active
   // (file is loaded and has a valid prompt key mapped).
   const isReady = !!fileResult && hasPromptKey;
@@ -208,149 +400,373 @@ export const ModelComparePrompts: FC<ModelComparePromptsProps> = ({
     onReadyChange?.(isReady);
   }, [isReady, onReadyChange]);
 
+  // Abort any active run on unmount (e.g. tab switch, navigation).
+  useEffect(() => {
+    return () => {
+      runAbortRef.current?.abort();
+    };
+  }, []);
+
   // Drive the prompt table from parsed preview rows + sampling controls (no separate file preview).
   useEffect(() => {
     if (!fileResult?.keyMapping.promptKey || !fileResult.parsedRows?.length) return;
 
     runIdRef.current += 1;
+    runAbortRef.current?.abort();
     setPromptRows(buildPromptRowsFromParsedRows(fileResult, sampleSize, sampleMethod));
   }, [fileResult, sampleSize, sampleMethod]);
 
+  // Auto-select the agent's matching sample when the user lands on Run Prompts
+  // via the agent overlay. Tracks the last-auto-selected agent in a ref so we
+  // don't re-fire after the user clears the picker or picks a different file.
+  const autoSelectedAgentRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!agentName) {
+      autoSelectedAgentRef.current = null;
+      return;
+    }
+    if (autoSelectedAgentRef.current === agentName) return;
+    const match = SAMPLE_DATASETS.find((s) => s.id === agentName);
+    if (!match) return;
+    autoSelectedAgentRef.current = agentName;
+    setPickerValue(match.id);
+    setUploadedFileName(null);
+    setParseError(null);
+    handleFileChange(match.build());
+    // We intentionally re-run only on `agentName` change. Including
+    // `handleFileChange` (or the various setters) would re-fire this effect
+    // every time the parent re-renders and produce a seed loop — the agentRef
+    // guard above would still no-op the work, but the effect would still run
+    // and we want the dependencies to read true.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agentName]);
+
+  /**
+   * Single picker handler. Three branches:
+   *  - sample id → synthesize the result via `sample.build()` (in-memory)
+   *  - upload sentinel → click the hidden native file input
+   *  - uploaded sentinel → no-op (it's the displayed value after a successful upload)
+   */
+  const handleDatasetSelect = useCallback(
+    (value: string) => {
+      if (!value) return;
+      if (value === UPLOADED_FILE_VALUE) return;
+      if (value === FILESET_PICKER_VALUE) {
+        setIsFilesetPickerOpen(true);
+        setPickerSelectKey((k) => k + 1);
+        return;
+      }
+      const sample = SAMPLE_DATASETS.find((s) => s.id === value);
+      if (!sample) return;
+      setParseError(null);
+      setUploadedFileName(null);
+      setPickerValue(value);
+      handleFileChange(sample.build());
+    },
+    [handleFileChange]
+  );
+
+  const handleFilesetPickerSubmit = useCallback(
+    async (data: SubmitUploadType) => {
+      if (data.type !== 'dataset') return;
+      setIsFilesetPickerOpen(false);
+      setParseError(null);
+      try {
+        // `data.url` is a `fileset://` URI, not an HTTP URL — download via the
+        // SDK using the dataset's workspace/name and the file path.
+        const response = await filesDownloadFile(
+          data.dataset.workspace,
+          data.dataset.name,
+          data.path
+        );
+        if (!response) {
+          setParseError('Failed to download file');
+          return;
+        }
+        const text = await response.text();
+        const filename = data.path.split('/').pop() ?? 'dataset.json';
+        const file = new File([text], filename);
+        const result = await parseUploadedFile(file);
+        if ('error' in result) {
+          setParseError(result.error);
+          return;
+        }
+        setUploadedFileName(`${data.dataset.name}/${data.path}`);
+        setPickerValue(UPLOADED_FILE_VALUE);
+        handleFileChange(result);
+      } catch (err) {
+        setParseError(err instanceof Error ? err.message : 'Failed to load file');
+      }
+    },
+    [handleFileChange]
+  );
+
+  const datasetItems = useMemo(() => {
+    const items: { value: string; children: string }[] = SAMPLE_DATASETS.map((s) => ({
+      value: s.id,
+      children: s.label,
+    }));
+    if (uploadedFileName) {
+      items.push({ value: UPLOADED_FILE_VALUE, children: uploadedFileName });
+    }
+    items.push({ value: FILESET_PICKER_VALUE, children: 'Select from dataset file...' });
+    return items;
+  }, [uploadedFileName]);
+
   return (
-    <div className="flex h-full min-h-0 flex-col gap-4 overflow-hidden px-6 py-4">
-      <Stack gap="density-lg" className="max-w-lg min-w-0 shrink-0">
-        <DatasetInputFile
-          onChange={handleFileChange}
-          label="Dataset File"
-          disabled={isRunning}
-          requirePromptKey
-          requireCompletionKey={false}
-          requireIdealResponseKey={false}
-        />
-      </Stack>
-
-      {fileResult && hasPromptKey && (
-        <Stack gap="density-md" className="min-h-0">
-          <FileSamplingMethodSelect
-            value={sampleMethod}
-            onValueChange={setSampleMethod}
-            rowCountGroup={{
-              value: sampleSize,
-              onValueChange: setSampleSize,
-              maxRows: Math.max(1, rowCount),
-              disabled: isRunning,
-            }}
-            attributes={{ select: { disabled: isRunning } }}
-          />
-        </Stack>
-      )}
+    <div className="flex h-full min-h-0 flex-col overflow-hidden px-6 py-2">
       {/* Results table fills remaining height; this is the main vertical scroll region. */}
-      <div className="min-h-0 flex-1 overflow-auto">
-        <table className="min-w-full table-fixed border-separate border-spacing-0">
-          <colgroup>
-            <col className="w-[500px] min-w-[400px]" />
-            {models.map((m) => (
-              <col key={m.id} className="w-[320px] min-w-[280px]" />
-            ))}
-          </colgroup>
-          <thead className="sticky top-0 z-10 bg-surface-raised">
-            <tr>
-              <th className="border border-base px-3 py-2 text-left font-medium align-middle">
-                <Flex align="center" justify="between" gap="density-md">
-                  <span>Prompts</span>
-                  {fileResult && hasPromptKey && (
-                    <Button
-                      kind="primary"
-                      size="small"
-                      onClick={runInference}
-                      disabled={isRunning || !hasPrompts || !hasAssignedModel}
-                      className="bg-green-600 hover:bg-green-700"
+      <div className="flex min-h-0 flex-1">
+        <div className="max-h-full flex-1 self-start overflow-auto rounded-lg border border-base bg-surface-raised">
+          <table className="min-w-full table-fixed border-separate border-spacing-0">
+            <colgroup>
+              <col className="w-[320px] min-w-[280px]" />
+              {models.map((m) => (
+                <col key={m.id} className="w-[320px] min-w-[280px]" />
+              ))}
+            </colgroup>
+            <thead className="sticky top-0 z-10 bg-surface-raised">
+              {/* Row 1: sampling controls + role labels */}
+              <tr>
+                <th className="border-b border-r border-base px-3 py-2 text-left align-middle">
+                  <Flex align="center" justify="between" gap="density-sm">
+                    <Text kind="label/bold/md" className="shrink-0">
+                      Prompts
+                    </Text>
+                    <FileSamplingMethodSelect
+                      value={sampleMethod}
+                      onValueChange={setSampleMethod}
+                      size="medium"
+                      rowCountGroup={{
+                        value: sampleSize,
+                        onValueChange: setSampleSize,
+                        maxRows: Math.max(1, rowCount),
+                        disabled: isRunning || rowCount === 0,
+                      }}
+                      attributes={{ select: { disabled: isRunning || rowCount === 0 } }}
+                    />
+                    {isRunning ? (
+                      <Button kind="primary" color="danger" onClick={cancelRun}>
+                        Stop
+                      </Button>
+                    ) : (
+                      <Button
+                        kind="primary"
+                        color="brand"
+                        onClick={runInference}
+                        disabled={!hasPrompts || !hasAssignedModel}
+                      >
+                        Run
+                      </Button>
+                    )}
+                  </Flex>
+                </th>
+                {models.map((m, idx) => {
+                  const roleColor = PANEL_ROLE_COLORS[Math.min(idx, PANEL_ROLE_COLORS.length - 1)];
+                  const colBorder = idx < models.length - 1 ? 'border-r ' : '';
+                  return (
+                    <th
+                      key={m.id}
+                      className={`border-b ${colBorder}border-base px-3 py-2 align-middle`}
                     >
-                      {isRunning ? (
-                        <Loader2 size={14} className="animate-spin" />
-                      ) : (
-                        <Play size={14} />
-                      )}
-                      {isRunning ? 'Running...' : 'Run'}
-                    </Button>
+                      <Flex align="center" justify="between">
+                        <Flex align="center" gap="density-xs">
+                          <span
+                            className={`h-2 w-2 shrink-0 rounded-full ${PANEL_ROLE_DOT_CLASS[roleColor]}`}
+                          />
+                          <Text kind="label/bold/md">{PANEL_ROLE_LABELS[roleColor]}</Text>
+                        </Flex>
+                        <button
+                          onClick={() => onRemoveModel(m.id)}
+                          disabled={isRunning}
+                          className="cursor-pointer rounded p-1 text-fg-subdued hover:bg-surface-sunken hover:text-fg-base"
+                          aria-label="Remove model column"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </Flex>
+                    </th>
+                  );
+                })}
+              </tr>
+              {/* Row 2: dataset picker + model selects */}
+              <tr>
+                <th
+                  className={`${hasPrompts ? 'border-b ' : ''}border-r border-base px-3 py-2 align-top`}
+                >
+                  <Select
+                    // Remount after the picker sentinel is chosen so its internal
+                    // selection resets to the real value — otherwise re-clicking
+                    // "Select from dataset file..." is a no-op (already selected).
+                    key={pickerSelectKey}
+                    items={datasetItems}
+                    value={pickerValue}
+                    onValueChange={handleDatasetSelect}
+                    placeholder="Select prompts"
+                    disabled={isRunning}
+                    className="w-full"
+                  />
+                  {parseError && (
+                    <Text kind="label/regular/sm" className="mt-1 text-fg-error">
+                      {parseError}
+                    </Text>
                   )}
-                </Flex>
-              </th>
-              {models.map((m) => (
-                <th key={m.id} className="border-t border-b border-r border-base px-2 py-1">
-                  <Flex gap="density-xs" align="center">
-                    <div className="flex-1 min-w-0">
-                      <ModelColumnSelect
-                        models={availableModels}
-                        isLoadingModels={isLoadingModels}
-                        value={m.modelURN}
+                  {fileResult && !promptKeyAutoDetected && fileResult.availableKeys.length > 0 && (
+                    <Flex align="center" gap="density-sm" className="mt-2">
+                      <Text kind="label/regular/sm" className="shrink-0 text-fg-subdued">
+                        Prompt Field
+                      </Text>
+                      <Select
+                        items={fileResult.availableKeys.map((k) => ({
+                          value: k.value,
+                          children: k.label,
+                        }))}
+                        value={fileResult.keyMapping.promptKey ?? undefined}
+                        onValueChange={handlePromptKeyChange}
+                        placeholder="Select a field"
                         disabled={isRunning}
-                        onChange={(ref) => {
-                          onSetModel(m.id, ref || null);
-                          clearResponses(m.id);
-                        }}
+                        size="small"
+                        className="w-full"
                       />
-                    </div>
-                    <button
-                      onClick={() => onRemoveModel(m.id)}
-                      disabled={isRunning}
-                      className="cursor-pointer rounded p-1"
-                      aria-label="Remove model column"
-                    >
-                      <Trash2 size={14} />
-                    </button>
-                  </Flex>
+                    </Flex>
+                  )}
                 </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {promptRows.map((row) => (
-              <tr key={row.sourceIndex} className="bg-surface-raised">
-                <td className="border-l border-b border-r border-base p-0 align-top">
-                  <ExpandableCell
-                    content={row.prompt}
-                    title={`Prompt (dataset row ${row.sourceIndex})`}
-                    onExpand={setExpandedCell}
-                  />
-                </td>
-                {models.map((m) => {
-                  const response = row.responses[m.id];
-                  const modelName = m.modelURN ? getPartsFromReference(m.modelURN).name : 'Model';
-                  if (response === undefined) {
-                    return (
-                      <td key={m.id} className="border-b border-r border-base px-3 py-2 align-top">
-                        <Text kind="body/regular/md" className="text-fg-subdued">
-                          -
-                        </Text>
-                      </td>
-                    );
-                  }
-                  if (response === null) {
-                    return (
-                      <td key={m.id} className="border-b border-r border-base px-3 py-2 align-top">
-                        <Text kind="body/regular/md" className="text-fg-error">
-                          Error
-                        </Text>
-                      </td>
-                    );
-                  }
-                  return (
-                    <td key={m.id} className="border-b border-r border-base p-0 align-top">
+                {models.map((m, idx) => (
+                  <th
+                    key={m.id}
+                    className={`${hasPrompts ? 'border-b ' : ''}${idx < models.length - 1 ? 'border-r ' : ''}border-base px-2 py-2 align-top`}
+                  >
+                    <ModelColumnSelect
+                      modelGroups={modelGroups}
+                      isLoadingModels={isLoadingModels}
+                      value={m.modelURN}
+                      disabled={isRunning}
+                      onChange={(ref) => {
+                        onSetModel(m.id, ref || null);
+                        clearResponses(m.id);
+                      }}
+                    />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {promptRows.map((row, rowIdx) => {
+                const rowBottom = rowIdx < promptRows.length - 1 || anyAverages ? 'border-b ' : '';
+                return (
+                  <tr key={row.sourceIndex} className="bg-surface-raised">
+                    <td className={`${rowBottom}border-r border-base p-0 align-top`}>
                       <ExpandableCell
-                        content={response}
-                        title={`${modelName} response (dataset row ${row.sourceIndex})`}
+                        content={row.prompt}
+                        title={`Prompt (dataset row ${row.sourceIndex})`}
                         onExpand={setExpandedCell}
+                        boldContent
                       />
                     </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
+                    {models.map((m, idx) => {
+                      const response = row.responses[m.id];
+                      const modelName = m.modelURN
+                        ? getPartsFromReference(m.modelURN).name
+                        : 'Model';
+                      const colBorder = idx < models.length - 1 ? 'border-r ' : '';
+                      if (response === undefined) {
+                        return (
+                          <td
+                            key={m.id}
+                            className={`${rowBottom}${colBorder}border-base px-3 py-2 align-top`}
+                          >
+                            <Text kind="body/regular/md" className="text-fg-subdued">
+                              -
+                            </Text>
+                          </td>
+                        );
+                      }
+                      if (response === null) {
+                        return (
+                          <td
+                            key={m.id}
+                            className={`${rowBottom}${colBorder}border-base px-3 py-2 align-top`}
+                          >
+                            <Text kind="body/regular/md" className="text-fg-error">
+                              Error
+                            </Text>
+                          </td>
+                        );
+                      }
+                      return (
+                        <td
+                          key={m.id}
+                          className={`${rowBottom}${colBorder}border-base p-0 align-top`}
+                        >
+                          <ExpandableCell
+                            content={response.text}
+                            title={`${modelName} response (dataset row ${row.sourceIndex})`}
+                            onExpand={(state) =>
+                              setExpandedCell({ ...state, stats: response.stats })
+                            }
+                            footer={<StatsBadge metrics={response.stats} className="px-3 pb-2" />}
+                          />
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+            {hasPrompts && anyAverages && (
+              <tfoot className="sticky bottom-0 z-10 bg-surface-raised">
+                <tr>
+                  <td className="border-t-2 border-r border-base px-3 py-2 align-middle">
+                    <Text kind="label/bold/md">Average</Text>
+                  </td>
+                  {models.map((m, idx) => {
+                    const avg = averagesByModelId[m.id];
+                    return (
+                      <td
+                        key={m.id}
+                        className={`border-t-2 ${idx < models.length - 1 ? 'border-r ' : ''}border-base px-3 py-2 align-middle`}
+                      >
+                        {avg ? (
+                          <StatsBadge metrics={avg} emphasis tone="brand" />
+                        ) : (
+                          <Text kind="body/regular/md" className="text-fg-subdued">
+                            —
+                          </Text>
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+              </tfoot>
+            )}
+          </table>
+        </div>
+        {onAddModel && (
+          <div className="flex shrink-0 self-start pl-1">
+            <Tooltip slotContent="Add model">
+              <button
+                onClick={onAddModel}
+                className="flex cursor-pointer items-center justify-center rounded border border-base bg-surface-raised p-1.5 text-fg-subdued transition-colors hover:bg-surface-sunken hover:text-fg-base"
+                aria-label="Add model"
+              >
+                <Plus size={16} />
+              </button>
+            </Tooltip>
+          </div>
+        )}
       </div>
 
+      <UploadModal
+        workspace={workspace}
+        open={isFilesetPickerOpen}
+        includeDataset
+        allowNewDataset
+        title="Select File"
+        submitButtonText="Select File"
+        onClose={() => setIsFilesetPickerOpen(false)}
+        onSubmit={handleFilesetPickerSubmit}
+      />
+
       <Modal
         open={expandedCell !== null}
         onOpenChange={(open) => {
@@ -359,7 +775,8 @@ export const ModelComparePrompts: FC<ModelComparePromptsProps> = ({
         slotHeading={expandedCell?.title ?? 'Cell Content'}
         className="w-[90vw] max-w-[1000px]"
         slotFooter={
-          <Flex justify="end" align="center" className="w-full">
+          <Flex justify="between" align="center" className="w-full">
+            {expandedCell?.stats ? <StatsBadge metrics={expandedCell.stats} emphasis /> : <span />}
             <Button kind="tertiary" onClick={() => setExpandedCell(null)}>
               Close
             </Button>
@@ -381,9 +798,11 @@ const ExpandableCell: FC<{
   content: string;
   title: string;
   onExpand: (state: ExpandedCellState) => void;
-}> = ({ content, title, onExpand }) => {
+  footer?: React.ReactNode;
+  boldContent?: boolean;
+}> = ({ content, title, onExpand, footer, boldContent }) => {
   return (
-    <div className="group relative">
+    <div className="group relative flex h-full flex-col">
       <button
         onClick={() => onExpand({ title, content })}
         className="absolute right-1 top-1 z-10 cursor-pointer rounded bg-surface-base/80 p-1 opacity-0 hover:bg-surface-sunken group-hover:opacity-100"
@@ -392,23 +811,26 @@ const ExpandableCell: FC<{
         <Maximize2 size={12} />
       </button>
       <div className="max-h-[130px] overflow-y-auto px-3 py-2">
-        <Text kind="body/regular/md" className="whitespace-pre-wrap">
+        <Text
+          kind="body/regular/md"
+          className={`whitespace-pre-wrap${boldContent ? ' font-bold' : ''}`}
+        >
           {content}
         </Text>
       </div>
+      {footer && <div className="mt-auto">{footer}</div>}
     </div>
   );
 };
 
 /** Thin wrapper around ModelSelectV2 for table header use */
 const ModelColumnSelect: FC<{
-  models: ModelEntity[];
+  modelGroups: ModelWorkspaceGroup[];
   isLoadingModels: boolean;
   value: string | null;
   disabled?: boolean;
   onChange: (ref: string) => void;
-}> = ({ models, isLoadingModels, value, disabled, onChange }) => {
-  const modelGroups = useMemo(() => groupModelsByWorkspace(models, { sort: true }), [models]);
+}> = ({ modelGroups, isLoadingModels, value, disabled, onChange }) => {
   const selectedModel: ModelSelection | null = value ? { model: value } : null;
 
   const handleValueChange = useCallback(
@@ -425,7 +847,6 @@ const ModelColumnSelect: FC<{
       groups={modelGroups}
       loading={isLoadingModels}
       disabled={disabled}
-      placeholder={isLoadingModels ? 'Loading models...' : 'Select model...'}
       hideAdapters
       fullWidth
     />
diff --git a/web/packages/studio/src/components/chat/AgentContextBanner.tsx b/web/packages/studio/src/components/chat/AgentContextBanner.tsx
new file mode 100644
index 0000000000..6da9c9783b
--- /dev/null
+++ b/web/packages/studio/src/components/chat/AgentContextBanner.tsx
@@ -0,0 +1,28 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Banner } from '@nvidia/foundations-react-core';
+import type { FC } from 'react';
+
+interface AgentContextBannerProps {
+  agentName: string;
+  baselineModelUrn: string | null;
+}
+
+/**
+ * Uses Kaizen's `Banner` with `info` status so the styling is design-system
+ * native — no hand-rolled blue. The Apply action lives in the page-level CTA
+ * cluster, not on the banner itself, to avoid two adjacent CTAs and to keep
+ * the banner purely informational.
+ */
+export const AgentContextBanner: FC<AgentContextBannerProps> = ({
+  agentName,
+  baselineModelUrn,
+}) => {
+  return (
+    <Banner status="info" kind="inline">
+      Testing models for agent <strong>{agentName}</strong>. Baseline is locked to{' '}
+      <span className="font-mono">{baselineModelUrn ?? '—'}</span>.
+    </Banner>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/AgentPicker.tsx b/web/packages/studio/src/components/chat/AgentPicker.tsx
new file mode 100644
index 0000000000..78d5f48138
--- /dev/null
+++ b/web/packages/studio/src/components/chat/AgentPicker.tsx
@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useAgentsListAgents } from '@nemo/sdk/generated/agents/api';
+import { Select } from '@nvidia/foundations-react-core';
+import { useMemo, type FC } from 'react';
+
+interface AgentPickerProps {
+  workspace: string;
+  /** Currently selected agent name from `?agent=`, or null. */
+  value: string | null;
+  /** Pass null to clear the selection. */
+  onChange: (next: string | null) => void;
+  disabled?: boolean;
+}
+
+const NO_AGENT_VALUE = '__none__';
+
+/**
+ * Lists deployed agents in the workspace and writes the selection back via
+ * `onChange` (which the route maps to `setSearchParams`). The "(no agent)"
+ * option clears the overlay and falls back to plain Chat.
+ */
+export const AgentPicker: FC<AgentPickerProps> = ({ workspace, value, onChange, disabled }) => {
+  const { data, isLoading } = useAgentsListAgents(workspace, undefined, {
+    query: { enabled: !!workspace },
+  });
+
+  const items = useMemo(() => {
+    const agents = (data?.data ?? []).filter((a) => !!a.name);
+    return [
+      { value: NO_AGENT_VALUE, children: '(no agent — plain Chat)' },
+      ...agents.map((a) => ({ value: a.name as string, children: a.name as string })),
+    ];
+  }, [data]);
+
+  return (
+    <Select
+      items={items}
+      value={value ?? NO_AGENT_VALUE}
+      onValueChange={(next) => onChange(next === NO_AGENT_VALUE ? null : next)}
+      disabled={disabled || isLoading}
+      placeholder={isLoading ? 'Loading agents…' : 'Test for agent…'}
+      className="w-[260px]"
+    />
+  );
+};
diff --git a/web/packages/studio/src/components/chat/ChatEmptyState.tsx b/web/packages/studio/src/components/chat/ChatEmptyState.tsx
new file mode 100644
index 0000000000..77a98c83ac
--- /dev/null
+++ b/web/packages/studio/src/components/chat/ChatEmptyState.tsx
@@ -0,0 +1,134 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, Stack, Text } from '@nvidia/foundations-react-core';
+import { ROUTES } from '@studio/constants/routes';
+import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
+import { PlugZap, Server } from 'lucide-react';
+import { type FC } from 'react';
+import { generatePath, useNavigate } from 'react-router-dom';
+
+interface ChatEmptyStateProps {
+  /** When false, paints the headline as "No models available" and surfaces the
+   *  connect/deploy CTAs. When true, just shows the animated "Ready" state. */
+  hasModels: boolean;
+}
+
+/**
+ * Replicates the Figma's "Ready" state: an animated green particle swirl, a
+ * large headline, a soft subhead, optional seed-question chips above the
+ * (route-owned) composer. Particle ring is a tuned inline SVG plus a single
+ * CSS keyframe — Kaizen ships no equivalent (confirmed in component scan).
+ */
+export const ChatEmptyState: FC<ChatEmptyStateProps> = ({ hasModels }) => {
+  const workspace = useWorkspaceFromPath();
+  const navigate = useNavigate();
+
+  const headline = hasModels ? 'Ready' : 'No models available';
+  const subhead = hasModels
+    ? 'Prompt your model to get started.'
+    : 'Connect an inference provider or create a deployment to start chatting.';
+
+  return (
+    <div className="flex h-full w-full items-center justify-center p-8">
+      <Stack gap="density-xl" align="center" className="relative z-10 w-full max-w-xl text-center">
+        <div className="relative h-72 w-72">
+          <ParticleSwirl />
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
+            <Text kind="display/sm">{headline}</Text>
+            <Text kind="body/regular/md" color="secondary">
+              {subhead}
+            </Text>
+          </div>
+        </div>
+        {!hasModels && (
+          <Stack gap="density-md" align="center">
+            <div className="flex gap-3">
+              <Button
+                kind="primary"
+                color="brand"
+                onClick={() =>
+                  navigate(generatePath(ROUTES.workspace.inferenceProviders, { workspace }))
+                }
+              >
+                <PlugZap size={16} />
+                Connect inference provider
+              </Button>
+              <Button
+                kind="secondary"
+                onClick={() => navigate(generatePath(ROUTES.workspace.deployments, { workspace }))}
+              >
+                <Server size={16} />
+                Create deployment
+              </Button>
+            </div>
+          </Stack>
+        )}
+      </Stack>
+    </div>
+  );
+};
+
+/**
+ * 96 small dots arranged on a ring with jittered radii and per-dot animation
+ * delays, so the swirl reads as motion even at low frame budgets. Pure CSS so
+ * we don't add a dep.
+ */
+const ParticleSwirl: FC = () => {
+  const dots = Array.from({ length: 96 }, (_, i) => {
+    const angle = (i / 96) * Math.PI * 2;
+    const radiusJitter = 0.85 + ((i * 37) % 100) / 600;
+    const r = 130 * radiusJitter;
+    const cx = 144 + Math.cos(angle) * r;
+    const cy = 144 + Math.sin(angle) * r;
+    const size = 1.5 + ((i * 13) % 100) / 80;
+    const delay = (i / 96) * 6;
+    return { cx, cy, size, delay, key: i };
+  });
+
+  return (
+    <svg
+      viewBox="0 0 288 288"
+      className="absolute inset-0 h-full w-full animate-[playground-swirl-spin_18s_linear_infinite]"
+      aria-hidden="true"
+    >
+      <defs>
+        <radialGradient id="playground-swirl-glow" cx="50%" cy="50%" r="50%">
+          <stop offset="0%" stopColor="var(--color-brand)" stopOpacity="0.18" />
+          <stop offset="65%" stopColor="var(--color-brand)" stopOpacity="0.04" />
+          <stop offset="100%" stopColor="var(--color-brand)" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <circle cx="144" cy="144" r="128" fill="url(#playground-swirl-glow)" />
+      {dots.map(({ cx, cy, size, key }, i) => (
+        <circle
+          key={key}
+          cx={cx}
+          cy={cy}
+          r={size}
+          fill="var(--color-brand)"
+          className={`playground-swirl-dot dot-${i}`}
+        />
+      ))}
+      {/* Per-dot animation-delay is generated dynamically into this style block
+       *  rather than via inline `style={}` so we don't trip the
+       *  no-restricted-syntax lint rule. The styled <style> tag inside an SVG
+       *  scopes the rules to this swirl. */}
+      <style>{`
+        @keyframes playground-swirl-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes playground-swirl-pulse {
+          0%, 100% { opacity: 0.2; }
+          50% { opacity: 0.85; }
+        }
+        .playground-swirl-dot {
+          opacity: 0.6;
+          animation: playground-swirl-pulse 2.8s ease-in-out infinite;
+        }
+        ${dots.map(({ delay }, i) => `.playground-swirl-dot.dot-${i} { animation-delay: ${delay}s; }`).join('\n        ')}
+      `}</style>
+    </svg>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/CompareComposer.tsx b/web/packages/studio/src/components/chat/CompareComposer.tsx
new file mode 100644
index 0000000000..a762c317df
--- /dev/null
+++ b/web/packages/studio/src/components/chat/CompareComposer.tsx
@@ -0,0 +1,158 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from '@nvidia/foundations-react-core';
+import { SeedQuestions } from '@studio/components/chat/SeedQuestions';
+import type { ComposerSeed } from '@studio/routes/ModelCompareRoute/types';
+import { ArrowUp, RotateCcw, Square } from 'lucide-react';
+import * as React from 'react';
+import {
+  type FC,
+  type MutableRefObject,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+interface CompareComposerProps {
+  /** Any panel currently streaming? Switches the Send button into a Stop button. */
+  isAnyRunning: boolean;
+  /** Number of panels with a model selected — used for the placeholder + disable state. */
+  readyPanelCount: number;
+  /** Total panel count — used to phrase the placeholder when models are missing. */
+  totalPanelCount: number;
+  onSubmit: (text: string) => void;
+  onStop: () => void;
+  /** Clears all panel histories. */
+  onResetAll: () => void;
+  /** Suggested prompts rendered above the input INSIDE the same composer card.
+   *  Clicking a chip fills the draft but does NOT auto-submit — preserves the
+   *  "send happens on the green button" mental model. */
+  seedQuestions?: string[];
+  /** Rendered right-aligned at the trailing end of the seed-questions row. */
+  slotSeedEnd?: ReactNode;
+  /** Kept in sync with internal draft so callers can read it imperatively. */
+  draftRef?: MutableRefObject<string>;
+  /** When triggerCount changes, resets the draft to text (panel→broadcast transfer). */
+  seed?: ComposerSeed;
+}
+
+/**
+ * Page-level composer shown only in Compare mode. Mirrors the per-panel
+ * AssistantComposer's single-card layout: seeds sit in an attached sub-row
+ * above the input, separated by a thin internal divider, all inside one
+ * rounded border.
+ */
+export const CompareComposer: FC<CompareComposerProps> = ({
+  isAnyRunning,
+  readyPanelCount,
+  totalPanelCount,
+  onSubmit,
+  onStop,
+  onResetAll,
+  seedQuestions,
+  slotSeedEnd,
+  draftRef,
+  seed,
+}) => {
+  const [draft, setDraft] = useState('');
+
+  // Keep caller's ref in sync so they can read the current draft imperatively.
+  if (draftRef) draftRef.current = draft;
+
+  // Pre-fill from panel toggle transfer (panel→broadcast).
+  const seenSeedTriggerRef = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    if (!seed?.text || seed.triggerCount === seenSeedTriggerRef.current) return;
+    seenSeedTriggerRef.current = seed.triggerCount;
+    setDraft(seed.text);
+  }, [seed?.triggerCount, seed?.text]);
+
+  const canSend = !isAnyRunning && readyPanelCount > 0 && draft.trim().length > 0;
+
+  const handleSubmit = useCallback(() => {
+    if (!canSend) return;
+    onSubmit(draft.trim());
+    setDraft('');
+  }, [canSend, draft, onSubmit]);
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const placeholder =
+    readyPanelCount === 0
+      ? totalPanelCount > 0
+        ? 'Pick a model in each panel to broadcast a prompt…'
+        : 'Add panels and pick models to broadcast…'
+      : `Broadcast to ${readyPanelCount} of ${totalPanelCount} panel${
+          totalPanelCount === 1 ? '' : 's'
+        }…`;
+
+  const showSeeds = !!seedQuestions && seedQuestions.length > 0;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {(showSeeds || slotSeedEnd) && (
+        <SeedQuestions
+          questions={showSeeds ? seedQuestions : []}
+          onSelect={(text) => setDraft(text)}
+          slotEnd={slotSeedEnd}
+        />
+      )}
+      <div className="flex items-center gap-2 rounded-md border border-base bg-surface-base px-3 py-1.5 focus-within:border-emphasis">
+        <textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+          rows={1}
+          disabled={readyPanelCount === 0}
+          aria-label="Compare prompt"
+          className="placeholder:text-fg-subdued min-h-[24px] max-h-32 flex-1 resize-none border-0 bg-transparent text-sm leading-6 outline-none disabled:cursor-not-allowed disabled:text-fg-disabled"
+        />
+        <Button
+          kind="tertiary"
+          size="small"
+          onClick={onResetAll}
+          title="Clear all panels"
+          aria-label="Clear all panels"
+        >
+          <RotateCcw />
+        </Button>
+        {isAnyRunning ? (
+          <Button
+            color="danger"
+            size="small"
+            className="size-8 rounded-full p-0"
+            onClick={onStop}
+            title="Stop all panels"
+            aria-label="Stop all panels"
+          >
+            <Square size={14} />
+          </Button>
+        ) : (
+          <Button
+            color="brand"
+            size="small"
+            className="size-8 rounded-full p-0"
+            onClick={handleSubmit}
+            disabled={!canSend}
+            title="Broadcast to all panels"
+            aria-label="Broadcast to all panels"
+          >
+            <ArrowUp size={16} />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/ParamsPopover.tsx b/web/packages/studio/src/components/chat/ParamsPopover.tsx
new file mode 100644
index 0000000000..2e6c0fa9f5
--- /dev/null
+++ b/web/packages/studio/src/components/chat/ParamsPopover.tsx
@@ -0,0 +1,123 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  Button,
+  Flex,
+  Popover,
+  Slider,
+  Stack,
+  Text,
+  TextInput,
+  Tooltip,
+} from '@nvidia/foundations-react-core';
+import { DEFAULT_INFERENCE_PARAMS, type InferenceParams } from '@studio/components/chat/params';
+import { Info, RotateCcw, Sliders } from 'lucide-react';
+import { type FC } from 'react';
+
+interface ParamsPopoverProps {
+  value: InferenceParams;
+  onChange: (next: InferenceParams) => void;
+}
+
+const SLIDERS: Array<{
+  key: keyof InferenceParams;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  hint: string;
+  default: number;
+}> = [
+  {
+    key: 'temperature',
+    label: 'Temperature',
+    min: 0,
+    max: 2,
+    step: 0.05,
+    hint: 'Controls output randomness. Higher values produce more creative, varied responses; lower values are more deterministic.',
+    default: DEFAULT_INFERENCE_PARAMS.temperature,
+  },
+  {
+    key: 'max_tokens',
+    label: 'Max tokens',
+    min: 32,
+    max: 4096,
+    step: 32,
+    hint: 'Maximum number of tokens the model will generate in a single response.',
+    default: DEFAULT_INFERENCE_PARAMS.max_tokens,
+  },
+];
+
+export const ParamsPopover: FC<ParamsPopoverProps> = ({ value, onChange }) => {
+  const update = (key: keyof InferenceParams, v: number) => {
+    onChange({ ...value, [key]: v });
+  };
+
+  const clamp = (s: (typeof SLIDERS)[number], v: number) => Math.min(Math.max(v, s.min), s.max);
+
+  return (
+    <Popover
+      slotContent={
+        <Stack gap="density-lg" className="w-[380px] p-4">
+          <Text kind="label/bold/lg">Inference parameters</Text>
+          {SLIDERS.map((s) => {
+            const current = value[s.key] as number;
+            return (
+              <Flex key={s.key} align="center" gap="density-md">
+                <Flex align="center" gap="density-xs" className="w-[120px] shrink-0">
+                  <Text kind="label/regular/md" className="truncate">
+                    {s.label}
+                  </Text>
+                  <Tooltip slotContent={s.hint} side="top">
+                    <Info size={12} className="shrink-0 text-fg-subdued" />
+                  </Tooltip>
+                </Flex>
+                <div className="min-w-0 flex-1">
+                  <Slider
+                    value={current}
+                    onValueChange={(v) => update(s.key, clamp(s, v))}
+                    min={s.min}
+                    max={s.max}
+                    step={s.step}
+                    aria-label={s.label}
+                  />
+                </div>
+                <TextInput
+                  type="number"
+                  value={String(current)}
+                  min={String(s.min)}
+                  max={String(s.max)}
+                  step={String(s.step)}
+                  aria-label={`${s.label} value`}
+                  className="w-[80px] shrink-0"
+                  attributes={{ Input: { className: 'text-center' } }}
+                  onValueChange={(v) => {
+                    if (v === '') return;
+                    const n = parseFloat(v);
+                    if (!Number.isNaN(n)) update(s.key, clamp(s, n));
+                  }}
+                />
+                <Button
+                  kind="tertiary"
+                  size="small"
+                  aria-label={`Reset ${s.label}`}
+                  title={`Reset to ${s.default}`}
+                  onClick={() => update(s.key, s.default)}
+                  className="shrink-0"
+                  type="button"
+                >
+                  <RotateCcw size={14} />
+                </Button>
+              </Flex>
+            );
+          })}
+        </Stack>
+      }
+    >
+      <Button kind="secondary" aria-label="Inference parameters" title="Inference parameters">
+        <Sliders size={14} />
+      </Button>
+    </Popover>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/RunEvaluationModal.tsx b/web/packages/studio/src/components/chat/RunEvaluationModal.tsx
new file mode 100644
index 0000000000..b390a102d8
--- /dev/null
+++ b/web/packages/studio/src/components/chat/RunEvaluationModal.tsx
@@ -0,0 +1,129 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { FormModal } from '@nemo/common/src/components/FormModal';
+import { useToast } from '@nemo/common/src/providers/toast/useToast';
+import { Block, Stack, Text } from '@nvidia/foundations-react-core';
+import { useCallback, useState, type FC } from 'react';
+
+interface RunEvaluationModalProps {
+  open: boolean;
+  onClose: () => void;
+  workspace: string;
+  /** URNs of models currently in the Playground panels (deduped, non-null). */
+  modelUrns: string[];
+}
+
+const EVAL_SETS = [
+  { id: 'customer-support-golden', name: 'Customer-Support Golden Set (200 prompts)' },
+  { id: 'internal-helpfulness-bench', name: 'Internal Helpfulness Bench (mini)' },
+  { id: 'reasoning-subset', name: 'NeMo Eval — Reasoning Subset' },
+];
+
+const METRICS = [
+  { id: 'llm-judge', name: 'LLM-as-judge (helpfulness)' },
+  { id: 'exact-match', name: 'Exact-match accuracy' },
+  { id: 'rouge', name: 'ROUGE-L overlap' },
+];
+
+/**
+ * V1 stub of the Run Evaluation handoff. The backend endpoint exists
+ * (`agentsCreateJob`) but Studio isn't wired to it yet. Rather than fake a
+ * success, we surface an honest "coming next" toast and close — see Follow-up
+ * A in the staged-seahorse plan. A future PR replaces submit() with a real
+ * POST and routes the user to the eval-job detail page.
+ */
+export const RunEvaluationModal: FC<RunEvaluationModalProps> = ({
+  open,
+  onClose,
+  workspace,
+  modelUrns,
+}) => {
+  const toast = useToast();
+  const [evalSetId, setEvalSetId] = useState(EVAL_SETS[0].id);
+  const [metricId, setMetricId] = useState(METRICS[0].id);
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = useCallback(async () => {
+    setSubmitting(true);
+    toast.info(
+      `Coming next — Studio will POST this evaluation to the agents service in the next release. (Captured: ${modelUrns.length} model${modelUrns.length === 1 ? '' : 's'} · eval-set ${evalSetId} · metric ${metricId})`
+    );
+    setSubmitting(false);
+    onClose();
+  }, [evalSetId, metricId, modelUrns.length, onClose, toast]);
+
+  return (
+    <FormModal
+      open={open}
+      onClose={onClose}
+      title="Run Evaluation"
+      submitButtonText="Submit Evaluation"
+      onSubmit={submit}
+      disabled={submitting || modelUrns.length === 0}
+      loading={submitting}
+    >
+      <Stack gap="density-xl">
+        <Block className="rounded border border-base bg-surface-sunken px-3 py-2">
+          <Text kind="body/regular/sm" color="secondary">
+            Preview only — Submit captures your choices and shows what would be sent. The wire-up to
+            the evaluator service lands in the next release.
+          </Text>
+        </Block>
+        <Block>
+          <Text kind="label/bold/sm" color="secondary">
+            Models from this Playground ({modelUrns.length})
+          </Text>
+          {modelUrns.length === 0 ? (
+            <Text kind="body/regular/sm" color="secondary">
+              Pick at least one model in the Playground first.
+            </Text>
+          ) : (
+            <ul className="mt-2 list-disc pl-5">
+              {modelUrns.map((u) => (
+                <li key={u} className="text-sm font-mono">
+                  {u}
+                </li>
+              ))}
+            </ul>
+          )}
+        </Block>
+        <Block>
+          <Text kind="label/bold/sm" color="secondary">
+            Eval set
+          </Text>
+          <select
+            className="mt-1 w-full rounded border border-base bg-surface-sunken px-2 py-1 text-sm"
+            value={evalSetId}
+            onChange={(e) => setEvalSetId(e.target.value)}
+          >
+            {EVAL_SETS.map((e) => (
+              <option key={e.id} value={e.id}>
+                {e.name}
+              </option>
+            ))}
+          </select>
+        </Block>
+        <Block>
+          <Text kind="label/bold/sm" color="secondary">
+            Metric
+          </Text>
+          <select
+            className="mt-1 w-full rounded border border-base bg-surface-sunken px-2 py-1 text-sm"
+            value={metricId}
+            onChange={(e) => setMetricId(e.target.value)}
+          >
+            {METRICS.map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.name}
+              </option>
+            ))}
+          </select>
+        </Block>
+        <Text kind="body/regular/sm" color="secondary">
+          Workspace: <Text kind="body/semibold/sm">{workspace}</Text>
+        </Text>
+      </Stack>
+    </FormModal>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/SeedQuestions.tsx b/web/packages/studio/src/components/chat/SeedQuestions.tsx
new file mode 100644
index 0000000000..39c0237d58
--- /dev/null
+++ b/web/packages/studio/src/components/chat/SeedQuestions.tsx
@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { DEFAULT_SEED_QUESTIONS } from '@studio/components/chat/defaultSeedQuestions';
+import { type FC, type ReactNode } from 'react';
+
+interface SeedQuestionsProps {
+  questions?: string[];
+  onSelect: (prompt: string) => void;
+  /** 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. */
+  slotEnd?: ReactNode;
+}
+
+/**
+ * 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.
+ */
+export const SeedQuestions: FC<SeedQuestionsProps> = ({
+  questions = DEFAULT_SEED_QUESTIONS,
+  onSelect,
+  slotStart,
+  slotEnd,
+}) => {
+  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>
+      {slotEnd && <div className="shrink-0 self-end">{slotEnd}</div>}
+    </div>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/StatsBadge.tsx b/web/packages/studio/src/components/chat/StatsBadge.tsx
new file mode 100644
index 0000000000..e465dfcdf8
--- /dev/null
+++ b/web/packages/studio/src/components/chat/StatsBadge.tsx
@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Gauge, Hash, Timer } from 'lucide-react';
+import type { FC } from 'react';
+
+export interface ChatMetrics {
+  totalMs: number;
+  completionTokens: number;
+  tokensPerSec: number;
+}
+
+interface StatsBadgeProps {
+  metrics: ChatMetrics;
+  emphasis?: boolean;
+  /** Colour of the metrics. Defaults to subdued grey; 'brand' renders NVIDIA green. */
+  tone?: 'subdued' | 'brand';
+  className?: string;
+}
+
+export const StatsBadge: FC<StatsBadgeProps> = ({
+  metrics,
+  emphasis,
+  tone = 'subdued',
+  className,
+}) => {
+  const seconds = (metrics.totalMs / 1000).toFixed(1);
+  const tokensPerSec = Math.max(0, Math.round(metrics.tokensPerSec));
+  const iconSize = emphasis ? 14 : 12;
+  const toneClass =
+    tone === 'brand' ? 'text-[var(--color-brand,#76b900)]' : 'text-fg-subdued opacity-60';
+  return (
+    <div
+      className={`inline-flex items-center gap-3 font-mono ${toneClass} ${emphasis ? 'text-sm font-bold' : 'text-xs'} ${className ?? ''}`}
+    >
+      <span className="inline-flex items-center gap-1" title="Total time">
+        <Timer size={iconSize} />
+        {seconds}s
+      </span>
+      <span className="inline-flex items-center gap-1" title="Tokens per second">
+        <Gauge size={iconSize} />
+        {tokensPerSec} t/s
+      </span>
+      <span className="inline-flex items-center gap-1" title="Completion tokens">
+        <Hash size={iconSize} />
+        {Math.round(metrics.completionTokens)} tok
+      </span>
+    </div>
+  );
+};
diff --git a/web/packages/studio/src/components/chat/defaultSeedQuestions.ts b/web/packages/studio/src/components/chat/defaultSeedQuestions.ts
new file mode 100644
index 0000000000..0398a75e96
--- /dev/null
+++ b/web/packages/studio/src/components/chat/defaultSeedQuestions.ts
@@ -0,0 +1,17 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Default seed questions — short, recognizable LLM "gotchas" that make
+ * cross-model differences obvious in the first prompt.
+ *
+ * Lives in its own module (not co-located with the SeedQuestions component)
+ * so the component file can stay a pure component export and not trip
+ * `react-refresh/only-export-components`. Named with the `default` prefix
+ * to avoid a case-only filename collision with `SeedQuestions.tsx` on
+ * case-insensitive filesystems (macOS).
+ */
+export const DEFAULT_SEED_QUESTIONS = [
+  "How many 'r's are in the word strawberry?",
+  "Mary's mom has 4 kids: April, May, and June. Who is the fourth kid?",
+];
diff --git a/web/packages/studio/src/components/chat/params.ts b/web/packages/studio/src/components/chat/params.ts
new file mode 100644
index 0000000000..52c1583814
--- /dev/null
+++ b/web/packages/studio/src/components/chat/params.ts
@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Inference parameter type + defaults — shared between the ParamsPopover
+ * component and the route state that owns the panel params.
+ *
+ * Lives in its own module (not co-located with the ParamsPopover component)
+ * so the component file can stay a pure component export and not trip
+ * `react-refresh/only-export-components`.
+ */
+
+export interface InferenceParams {
+  temperature: number;
+  max_tokens: number;
+  [key: string]: unknown;
+}
+
+export const DEFAULT_INFERENCE_PARAMS: InferenceParams = {
+  temperature: 0.7,
+  max_tokens: 512,
+};
diff --git a/web/packages/studio/src/components/chat/sampleDatasets.ts b/web/packages/studio/src/components/chat/sampleDatasets.ts
new file mode 100644
index 0000000000..d13c039f60
--- /dev/null
+++ b/web/packages/studio/src/components/chat/sampleDatasets.ts
@@ -0,0 +1,66 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { FileFormat, InputFileSchemaType } from '@nemo/common/src/types';
+import type { DatasetInputFileResult } from '@studio/components/DatasetInputFile/types';
+
+/**
+ * In-Studio sample prompt sets surfaced in the Run Prompts dataset picker.
+ * Demo bridge — when the platform-seed work lands, these graduate to real
+ * Filesets shipped alongside their agents and this constant goes away.
+ */
+
+const CALCULATOR_AGENT_PROMPTS: readonly string[] = [
+  'What is 27 + 45?',
+  'I have $250 and I spend 32% of it on groceries. How much do I have left?',
+  'A train travels 240 miles in 3 hours. What is its average speed in miles per hour?',
+  'A stock starts at $50 per share and grows 8% per year. What will it be worth after 5 years? Show your work.',
+  "What is today's date?",
+  'How many days are there between today and December 31st of this year?',
+  'If I save $200 every month starting today, how much will I have saved by the end of this year?',
+  'What is 7 divided by 0?',
+  'What is the capital of France?',
+  'If I invest $10,000 at 4.5% annual interest compounded monthly for 3 years, how much will I have at the end? Round to the nearest cent.',
+];
+
+/**
+ * Synthesize a `DatasetInputFileResult` that looks exactly like what the
+ * upload-from-disk path produces, so `ModelComparePrompts` can consume it via
+ * its existing `onChange` without any branch on "is this a sample?".
+ */
+function buildCalculatorAgentSample(): DatasetInputFileResult {
+  const parsedRows = CALCULATOR_AGENT_PROMPTS.map((prompt) => ({ prompt }));
+  const firstRow = parsedRows[0];
+  return {
+    fileUrl: 'sample://calculator-agent-prompts.jsonl',
+    format: FileFormat.JSONL,
+    validationResult: { isValid: true, format: FileFormat.JSONL },
+    detectionResult: {
+      schemaType: InputFileSchemaType.COMPLETION,
+      detectedFields: { prompt: 'prompt' },
+      isComplete: true,
+      firstRow,
+    },
+    keyMapping: { promptKey: 'prompt', completionKey: null, idealResponseKey: null },
+    availableKeys: [{ label: 'prompt', value: 'prompt' }],
+    firstRow,
+    parsedRows,
+    rowCount: parsedRows.length,
+  };
+}
+
+export interface SampleDataset {
+  id: string;
+  label: string;
+  description: string;
+  build: () => DatasetInputFileResult;
+}
+
+export const SAMPLE_DATASETS: readonly SampleDataset[] = [
+  {
+    id: 'calculator-agent',
+    label: 'Calculator agent — sample prompts (10)',
+    description: 'Vibe-check prompts spanning arithmetic, datetime, and edge cases',
+    build: buildCalculatorAgentSample,
+  },
+];
diff --git a/web/packages/studio/src/components/dataViews/AgentsDataView/index.tsx b/web/packages/studio/src/components/dataViews/AgentsDataView/index.tsx
index 834bbb8cac..a1ea05567e 100644
--- a/web/packages/studio/src/components/dataViews/AgentsDataView/index.tsx
+++ b/web/packages/studio/src/components/dataViews/AgentsDataView/index.tsx
@@ -30,10 +30,12 @@ import { getAgentModelNames } from '@studio/components/dataViews/AgentsDataView/
 import { DeleteConfirmationModal } from '@studio/components/DeleteConfirmationModal';
 import { DocumentationButton } from '@studio/components/DocumentationButton';
 import { LINK_DOCS_STUDIO } from '@studio/constants/links';
+import { ROUTES } from '@studio/constants/routes';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
 import { HatGlasses, Trash, X } from 'lucide-react';
 import { ComponentProps, FC, useEffect, useMemo, useState } from 'react';
+import { generatePath, useNavigate } from 'react-router-dom';
 
 export type { Agent, AgentDeployment };
 
@@ -96,6 +98,7 @@ export const AgentsTable: FC<CombinedAgentsTableProps> = ({
   onAgentsLoaded,
 }) => {
   const workspace = useWorkspaceFromPath();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const toast = useToast();
   const [deleteState, setDeleteState] = useState<DeleteState>(null);
@@ -280,6 +283,15 @@ export const AgentsTable: FC<CombinedAgentsTableProps> = ({
           children: 'Deploy',
           onSelect: () => onCreateDeployment?.(row.name),
         },
+        {
+          children: 'Test models',
+          onSelect: () => {
+            const target = generatePath(ROUTES.workspace.modelCompare, { workspace });
+            const model = row.models[0];
+            const urn = model ? `${row.workspace}/${model}` : null;
+            navigate(urn ? `${target}?model=${encodeURIComponent(urn)}` : target);
+          },
+        },
         { kind: 'divider' as const },
         {
           children: 'Delete',
diff --git a/web/packages/studio/src/constants/routes.ts b/web/packages/studio/src/constants/routes.ts
index 42d37bbfb3..dadec001df 100644
--- a/web/packages/studio/src/constants/routes.ts
+++ b/web/packages/studio/src/constants/routes.ts
@@ -118,7 +118,7 @@ export const ROUTES = {
     agentEvaluationsList: `/workspaces/:${P.workspace}/agents/evaluations`,
     /** Detail view for a single agent-evaluation job. */
     agentEvaluationDetail: `/workspaces/:${P.workspace}/agents/evaluations/:${P.agentEvalJobName}`,
-    modelCompare: `/workspaces/:${P.workspace}/model-compare`,
+    modelCompare: `/workspaces/:${P.workspace}/playground`,
     agentOptimizations: `/workspaces/:${P.workspace}/agents/suggestions`,
     agentMonitor: `/workspaces/:${P.workspace}/agents/monitor`,
   },
diff --git a/web/packages/studio/src/routes/ModelCompareRoute/index.tsx b/web/packages/studio/src/routes/ModelCompareRoute/index.tsx
index b2109660d0..83d77f45a4 100644
--- a/web/packages/studio/src/routes/ModelCompareRoute/index.tsx
+++ b/web/packages/studio/src/routes/ModelCompareRoute/index.tsx
@@ -1,96 +1,281 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useBaseModels } from '@nemo/common/src/api/entity-store/useBaseModels';
-import { Button, Flex, SegmentedControl } from '@nvidia/foundations-react-core';
+import {
+  BASIC_ALL_MODELS_DROPDOWN_FILTER,
+  buildWorkspaceGroup,
+  type ModelWorkspaceGroup,
+  useAllModels,
+} from '@nemo/common/src/api/models/useModels';
+import { ComposerMode } from '@nemo/common/src/components/AssistantChat';
+import type { BroadcastSignal } from '@nemo/common/src/components/AssistantChat/types';
+import { PageHeader, Tabs, Tooltip } from '@nvidia/foundations-react-core';
+import { ChatEmptyState } from '@studio/components/chat/ChatEmptyState';
+import { CompareComposer } from '@studio/components/chat/CompareComposer';
+import { DEFAULT_SEED_QUESTIONS } from '@studio/components/chat/defaultSeedQuestions';
 import { ModelCompareChat } from '@studio/components/ModelCompareChat';
 import { ModelComparePrompts } from '@studio/components/ModelComparePrompts';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
-import type { SharedModelEntry } from '@studio/routes/ModelCompareRoute/types';
-import { Plus } from 'lucide-react';
-import { type FC, useCallback, useRef, useState } from 'react';
+import type { ComposerSeed, SharedModelEntry } from '@studio/routes/ModelCompareRoute/types';
+import { MessageSquareShare, MessagesSquare } from 'lucide-react';
+import { type FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
-type CompareView = 'chat' | 'prompts';
+type CompareView = 'compare' | 'prompts';
 
 const MAX_MODELS = 4;
 
+const makeDefaultEntry = (
+  id: number,
+  modelURN: string | null = null,
+  locked = false
+): SharedModelEntry => ({
+  id,
+  modelURN,
+  locked,
+});
+
 export const ModelCompareRoute: FC = () => {
   const workspace = useWorkspaceFromPath();
-  const { models: availableModels, isLoading: isLoadingModels } = useBaseModels({ workspace });
-  const [activeView, setActiveView] = useState<CompareView>('chat');
-  const [promptsReady, setPromptsReady] = useState(false);
-
-  // Shared "which models are we comparing" list — owned here, rendered by both views.
-  const [models, setModels] = useState<SharedModelEntry[]>([
-    { id: 0, modelURN: null },
-    { id: 1, modelURN: null },
+  const { data, isFetching: isLoadingModels } = useAllModels({
+    workspace: workspace ?? undefined,
+    query: BASIC_ALL_MODELS_DROPDOWN_FILTER,
+  });
+  const modelGroups = useMemo((): ModelWorkspaceGroup[] => {
+    if (!workspace) return [];
+    const allModels = data?.pages.flatMap((p) => (Array.isArray(p.data) ? p.data : [])) ?? [];
+    const available = allModels.filter(
+      (m) => Array.isArray(m.model_providers) && m.model_providers.length > 0
+    );
+    return available.length > 0 ? [buildWorkspaceGroup(workspace, available)] : [];
+  }, [data, workspace]);
+  const [searchParams] = useSearchParams();
+  const [activeView, setActiveView] = useState<CompareView>('compare');
+  const [perPanelInput, setPerPanelInput] = useState(false);
+  const [models, setModels] = useState<SharedModelEntry[]>(() => [
+    makeDefaultEntry(0),
+    makeDefaultEntry(1),
   ]);
-  // Monotonic id counter — using a ref so rapid calls assign unique ids without
-  // depending on a stale closure value, and removed ids are never reused (which
-  // would otherwise cause stale per-model state in children).
   const nextIdRef = useRef(2);
+  const didPreselectRef = useRef(false);
+
+  // Preselect panel 0 from ?model= query param once models load.
+  useEffect(() => {
+    if (didPreselectRef.current || isLoadingModels || modelGroups.length === 0) return;
+    const param = searchParams.get('model');
+    if (!param) {
+      didPreselectRef.current = true;
+      return;
+    }
+    const match = modelGroups
+      .flatMap((g) => g.models)
+      .find((m) => `${m.workspace}/${m.name}` === param || m.name === param);
+    if (match) {
+      setModels((prev) =>
+        prev.map((m, i) => (i === 0 ? { ...m, modelURN: `${match.workspace}/${match.name}` } : m))
+      );
+    }
+    didPreselectRef.current = true;
+  }, [isLoadingModels, modelGroups, searchParams]);
+
+  // Seed transfer: broadcast→panels and panel→broadcast.
+  const compareComposerDraftRef = useRef('');
+  const [panelSeed, setPanelSeed] = useState<ComposerSeed | null>(null);
+  const [composerSeed, setComposerSeed] = useState<ComposerSeed | null>(null);
+
+  // Compare-mode plumbing: broadcast carries the prompt to every panel via
+  // sequence-keyed effect; stopCount flips to stop them all.
+  const [chatResetCount, setChatResetCount] = useState(0);
+  const [broadcast, setBroadcast] = useState<BroadcastSignal | null>(null);
+  const [stopCount, setStopCount] = useState(0);
+  const [runningById, setRunningById] = useState<Map<number, boolean>>(() => new Map());
+  const isAnyRunning = useMemo(() => Array.from(runningById.values()).some(Boolean), [runningById]);
+  // Per-panel empty/non-empty state. Drives seed-chip visibility: the broadcast
+  // composer only shows chips when every open panel is in its empty initial
+  // state. Panels default to empty until they report otherwise.
+  const [emptyById, setEmptyById] = useState<Map<number, boolean>>(() => new Map());
+  const allPanelsEmpty = models.every((m) => emptyById.get(m.id) ?? true);
+
+  const handleRunningChange = useCallback((id: number, running: boolean) => {
+    setRunningById((prev) => {
+      if (prev.get(id) === running) return prev;
+      const next = new Map(prev);
+      next.set(id, running);
+      return next;
+    });
+  }, []);
+
+  const handleEmptyChange = useCallback((id: number, empty: boolean) => {
+    setEmptyById((prev) => {
+      if (prev.get(id) === empty) return prev;
+      const next = new Map(prev);
+      next.set(id, empty);
+      return next;
+    });
+  }, []);
 
   const addModel = useCallback(() => {
     setModels((prev) => {
       if (prev.length >= MAX_MODELS) return prev;
-      const id = nextIdRef.current;
-      nextIdRef.current = id + 1;
-      return [...prev, { id, modelURN: null }];
+      const id = nextIdRef.current++;
+      return [...prev, makeDefaultEntry(id)];
     });
   }, []);
 
   const removeModel = useCallback((id: number) => {
     setModels((prev) => prev.filter((m) => m.id !== id));
+    setRunningById((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+    setEmptyById((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
   }, []);
 
   const setModelRef = useCallback((id: number, modelURN: string | null) => {
     setModels((prev) => prev.map((m) => (m.id === id ? { ...m, modelURN } : m)));
   }, []);
 
+  const resetAll = useCallback(() => {
+    setStopCount((n) => n + 1); // cancel in-flight completions before remount
+    setBroadcast(null);
+    setRunningById(new Map());
+    setChatResetCount((n) => n + 1);
+  }, []);
+
+  // TODO: re-add Run Evaluation button once the RunEvaluationModal flow is ready
+
+  const handleBroadcast = useCallback((text: string) => {
+    setBroadcast((prev) => ({ seq: (prev?.seq ?? 0) + 1, text }));
+  }, []);
+
+  const handleStopAll = useCallback(() => {
+    setStopCount((n) => n + 1);
+  }, []);
+
   const atMaxModels = models.length >= MAX_MODELS;
-  const addModelDisabled = atMaxModels || (activeView === 'prompts' && !promptsReady);
+  const readyPanelCount = models.filter((m) => !!m.modelURN).length;
+
+  // Empty state when the workspace has zero models and we're not still loading.
+  if (!isLoadingModels && modelGroups.length === 0) {
+    return <ChatEmptyState hasModels={false} />;
+  }
+
+  const showChatPanels = activeView !== 'prompts';
 
   return (
     <div className="flex h-full flex-col">
-      <Flex align="center" justify="between" className="shrink-0 px-6 py-3">
-        <Flex align="center" gap="density-lg">
-          <h1 className="text-lg font-semibold">Compare Models</h1>
-          <SegmentedControl
-            size="tiny"
-            value={activeView}
-            onValueChange={(value) => setActiveView(value as CompareView)}
-            items={[
-              { value: 'chat', children: 'Chat' },
-              { value: 'prompts', children: 'Run Prompts' },
-            ]}
-          />
-        </Flex>
-        <Button kind="secondary" onClick={addModel} disabled={addModelDisabled}>
-          <Plus size={16} />
-          Add Model
-        </Button>
-      </Flex>
-
-      <div className={`min-h-0 flex-1 overflow-hidden ${activeView !== 'chat' ? 'hidden' : ''}`}>
-        <ModelCompareChat
-          workspace={workspace}
-          availableModels={availableModels}
-          isLoadingModels={isLoadingModels}
-          models={models}
-          onRemoveModel={removeModel}
-          onSetModel={setModelRef}
+      <div className="shrink-0 px-6 pt-6 pb-4">
+        <PageHeader className="p-0 pb-4" slotHeading="Playground" />
+        <Tabs
+          className="min-w-0 overflow-visible"
+          value={activeView}
+          onValueChange={(value) => setActiveView(value as CompareView)}
+          items={[
+            { value: 'compare', children: 'Compare' },
+            { value: 'prompts', children: 'Run Prompts' },
+          ]}
         />
       </div>
-      <div className={`min-h-0 flex-1 overflow-hidden ${activeView !== 'prompts' ? 'hidden' : ''}`}>
-        <ModelComparePrompts
-          workspace={workspace}
-          availableModels={availableModels}
-          isLoadingModels={isLoadingModels}
-          models={models}
-          onRemoveModel={removeModel}
-          onSetModel={setModelRef}
-          onReadyChange={setPromptsReady}
-        />
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <div className={`h-full ${showChatPanels ? '' : 'hidden'}`}>
+          <ModelCompareChat
+            workspace={workspace}
+            modelGroups={modelGroups}
+            isLoadingModels={isLoadingModels}
+            models={models}
+            onRemoveModel={removeModel}
+            onSetModel={setModelRef}
+            chatResetCount={chatResetCount}
+            composerMode={perPanelInput ? ComposerMode.PER_PANEL : ComposerMode.BROADCAST_ALL}
+            slotComposerEnd={
+              perPanelInput ? (
+                <Tooltip slotContent="Shared input">
+                  <button
+                    onClick={(e) => {
+                      const panel = (e.currentTarget as HTMLElement).closest('[data-model-panel]');
+                      const textarea = panel?.querySelector<HTMLTextAreaElement>(
+                        'textarea[aria-label="Task prompt"]'
+                      );
+                      const draft = textarea?.value ?? '';
+                      if (draft) {
+                        setComposerSeed((prev) => ({
+                          triggerCount: (prev?.triggerCount ?? 0) + 1,
+                          text: draft,
+                        }));
+                      }
+                      setPerPanelInput(false);
+                    }}
+                    className="flex cursor-pointer items-center justify-center rounded p-1.5 text-fg-subdued transition-colors hover:bg-surface-sunken hover:text-fg-base"
+                    aria-label="Shared input"
+                  >
+                    <MessageSquareShare size={15} />
+                  </button>
+                </Tooltip>
+              ) : undefined
+            }
+            composerSeed={panelSeed ?? undefined}
+            broadcast={!perPanelInput ? (broadcast ?? undefined) : undefined}
+            stopCount={stopCount}
+            onRunningChange={handleRunningChange}
+            onEmptyChange={handleEmptyChange}
+            onAddModel={!atMaxModels ? addModel : undefined}
+            seedQuestions={DEFAULT_SEED_QUESTIONS}
+            slotComposer={
+              !perPanelInput ? (
+                <CompareComposer
+                  isAnyRunning={isAnyRunning}
+                  readyPanelCount={readyPanelCount}
+                  totalPanelCount={models.length}
+                  onSubmit={handleBroadcast}
+                  onStop={handleStopAll}
+                  onResetAll={resetAll}
+                  seedQuestions={allPanelsEmpty ? DEFAULT_SEED_QUESTIONS : []}
+                  draftRef={compareComposerDraftRef}
+                  seed={composerSeed ?? undefined}
+                  slotSeedEnd={
+                    <Tooltip slotContent="Per-panel input">
+                      <button
+                        onClick={() => {
+                          const draft = compareComposerDraftRef.current;
+                          if (draft) {
+                            setPanelSeed((prev) => ({
+                              triggerCount: (prev?.triggerCount ?? 0) + 1,
+                              text: draft,
+                            }));
+                          }
+                          setComposerSeed(null);
+                          setPerPanelInput(true);
+                        }}
+                        className="flex cursor-pointer items-center justify-center rounded border border-base bg-surface-raised p-1.5 text-fg-subdued transition-colors hover:bg-surface-sunken hover:text-fg-base"
+                        aria-label="Per-panel input"
+                      >
+                        <MessagesSquare size={15} />
+                      </button>
+                    </Tooltip>
+                  }
+                />
+              ) : undefined
+            }
+          />
+        </div>
+        <div className={`h-full overflow-hidden ${activeView !== 'prompts' ? 'hidden' : ''}`}>
+          <ModelComparePrompts
+            workspace={workspace}
+            modelGroups={modelGroups}
+            isLoadingModels={isLoadingModels}
+            models={models}
+            onRemoveModel={removeModel}
+            onSetModel={setModelRef}
+            onAddModel={!atMaxModels ? addModel : undefined}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/web/packages/studio/src/routes/ModelCompareRoute/types.ts b/web/packages/studio/src/routes/ModelCompareRoute/types.ts
index b1b7dfef95..55394e0274 100644
--- a/web/packages/studio/src/routes/ModelCompareRoute/types.ts
+++ b/web/packages/studio/src/routes/ModelCompareRoute/types.ts
@@ -1,15 +1,73 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import type {
+  BroadcastSignal,
+  ComposerMode,
+} from '@nemo/common/src/components/AssistantChat/types';
+import type { ReactNode } from 'react';
+
+/** Color/label slots assigned by position. First panel is Baseline. */
+export type PanelRoleColor = 'baseline' | 'cyan' | 'magenta' | 'amber';
+
+export const PANEL_ROLE_COLORS: readonly PanelRoleColor[] = [
+  'baseline',
+  'cyan',
+  'magenta',
+  'amber',
+];
+
+export const PANEL_ROLE_LABELS: Record<PanelRoleColor, string> = {
+  baseline: 'Baseline',
+  cyan: 'Comparison 1',
+  magenta: 'Comparison 2',
+  amber: 'Comparison 3',
+};
+
 /**
- * One entry in the shared "models we are comparing" list owned by ModelCompareRoute.
- * Children (Chat, Prompts) render based on this list but keep their own per-entry
- * ephemeral state (collapsed, chat history, response cells, etc.) keyed by id.
+ * Tailwind class for the small colored status dot beside the panel label.
+ * Fixed palette by position (baseline first): gray → blue → yellow → green.
+ * Uses the feedback/accent *foreground* tokens (the saturated colors) as the
+ * dot fill; `bg-feedback-*` would resolve to the pale background tokens.
  */
+export const PANEL_ROLE_DOT_CLASS: Record<PanelRoleColor, string> = {
+  baseline: 'bg-[var(--text-color-accent-gray)]',
+  cyan: 'bg-[var(--text-color-feedback-info)]',
+  magenta: 'bg-[var(--text-color-feedback-warning)]',
+  amber: 'bg-[var(--text-color-feedback-success)]',
+};
+
+/** Seed payload used to pre-fill a panel's composer textarea from outside. */
+export interface ComposerSeed {
+  /** Monotonic counter — fires the pre-fill whenever it changes. */
+  triggerCount: number;
+  text: string;
+}
+
+/**
+ * Broadcast/control props threaded from ModelCompareRoute down through
+ * ModelCompareChat → ModelChatPanel → ModelChat. Extracted to avoid
+ * repeating the same set in every intermediate interface.
+ */
+export interface PanelChatControls {
+  composerMode?: ComposerMode;
+  broadcast?: BroadcastSignal;
+  stopCount?: number;
+  onRunningChange?: (id: number, isRunning: boolean) => void;
+  /** Fires when a panel's thread transitions between empty and non-empty. */
+  onEmptyChange?: (id: number, isEmpty: boolean) => void;
+  slotComposerEnd?: ReactNode;
+  composerSeed?: ComposerSeed;
+  /** Seed-question chips for the per-panel composer. Empty array hides them. */
+  seedQuestions?: string[];
+}
+
+/** One entry in the shared "models we are comparing" list owned by ModelCompareRoute. */
 export interface SharedModelEntry {
   id: number;
   /** Full URN, e.g. "abacusai/dracarys-llama-70b". Null means unassigned. */
   modelURN: string | null;
+  locked?: boolean;
 }
 
 /** Shape consumed by ModelChatPanel — composed per-render from shared entry + local state. */
@@ -18,4 +76,9 @@ export interface PanelState {
   collapsed: boolean;
   /** Full model URN ("workspace/name"), or null if unassigned. */
   modelURN: string | null;
+  roleColor: PanelRoleColor;
+  roleLabel: string;
+  /** True when this is the only panel — drives the larger per-panel action bar. */
+  isSinglePanel: boolean;
+  locked: boolean;
 }
diff --git a/web/packages/studio/src/routes/ModelCompareRoute/useAgentContext.ts b/web/packages/studio/src/routes/ModelCompareRoute/useAgentContext.ts
new file mode 100644
index 0000000000..7eac586ec5
--- /dev/null
+++ b/web/packages/studio/src/routes/ModelCompareRoute/useAgentContext.ts
@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useAgentsGetAgent } from '@nemo/sdk/generated/agents/api';
+import type { AgentConfig as StudioAgentConfig } from '@studio/components/dataViews/AgentsDataView';
+import { useMemo } from 'react';
+
+export interface AgentContext {
+  name: string;
+  /** Workspace-qualified model URN, e.g. "default/nvcf-meta-llama-3-3-70b-instruct". */
+  currentModelUrn: string;
+  /** May be empty — NAT ReAct workflows don't carry a per-agent system prompt. */
+  systemPrompt: string;
+}
+
+interface AgentContextResult {
+  /** Resolved context, or null when no agent is selected / lookup failed / agent missing fields. */
+  context: AgentContext | null;
+  isLoading: boolean;
+  /** Non-null when the lookup failed (404, etc.). */
+  error: Error | null;
+}
+
+/**
+ * `config.llms[<key>]` may carry a system prompt on some workflow shapes (e.g.
+ * langgraph_agent stores it on the LLM dict). The studio's typed `AgentConfig`
+ * doesn't enumerate this — read defensively.
+ */
+function extractSystemPrompt(llm: unknown): string {
+  if (!llm || typeof llm !== 'object') return '';
+  const candidate = (llm as { system_prompt?: unknown }).system_prompt;
+  return typeof candidate === 'string' ? candidate : '';
+}
+
+/**
+ * Projects the platform's `Agent` entity into the lean `AgentContext` shape
+ * that drives the Chat overlay (locked baseline, banner, system-prompt seed).
+ * Returns null context when no agent name is supplied, when the lookup is
+ * still in flight, or when the agent's config doesn't expose the workflow's
+ * primary LLM in a recognizable shape.
+ */
+export const useAgentContext = (
+  workspace: string,
+  agentName: string | null
+): AgentContextResult => {
+  const enabled = !!(workspace && agentName);
+  const { data, isLoading, error } = useAgentsGetAgent(workspace, agentName ?? '', {
+    query: { enabled },
+  });
+
+  const context = useMemo<AgentContext | null>(() => {
+    if (!enabled || !data) return null;
+    const config = (data.config ?? {}) as StudioAgentConfig;
+    const llmKey = config.workflow?.llm_name;
+    const llm = llmKey ? config.llms?.[llmKey] : undefined;
+    const modelName = llm?.model_name;
+    if (!modelName) return null;
+    const agentWorkspace = data.workspace ?? workspace;
+    return {
+      name: data.name ?? agentName ?? '',
+      currentModelUrn: `${agentWorkspace}/${modelName}`,
+      systemPrompt: extractSystemPrompt(llm),
+    };
+  }, [enabled, data, agentName, workspace]);
+
+  return {
+    context,
+    isLoading: enabled && isLoading,
+    error: (error as Error | null) ?? null,
+  };
+};
diff --git a/web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx b/web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx
index dd4e50db04..ab2574742d 100644
--- a/web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx
+++ b/web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx
@@ -188,9 +188,9 @@ export const WorkspaceSideNav = ({ collapsed }: { collapsed?: boolean }) => {
     const modelCompareNav = MODEL_COMPARE_ENABLED
       ? [
           {
-            id: 'model-compare',
+            id: 'playground',
             slotIcon: <Columns3 className={iconColorClass} />,
-            slotLabel: 'Chat',
+            slotLabel: 'Playground',
             href: getModelCompareRoute(workspace),
           },
         ]
diff --git a/web/packages/studio/src/routes/index.tsx b/web/packages/studio/src/routes/index.tsx
index 7d85cb8031..933c4e661e 100644
--- a/web/packages/studio/src/routes/index.tsx
+++ b/web/packages/studio/src/routes/index.tsx
@@ -753,7 +753,7 @@ export const routes: RouteObject[] = [
                       <ModelCompareRoute />
                     </Suspense>
                   ) : null,
-                  errorElement: <ErrorPanel title="Model Compare" />,
+                  errorElement: <ErrorPanel title="Chat" />,
                 },
               ]),
               ...gateMembersRoutes([