From 49a4089dfa4fde6c4f770633d81dced217850296 Mon Sep 17 00:00:00 2001
From: Roland Tannous <rolandtannous@gravityq.ai>
Date: Tue, 10 Mar 2026 16:14:16 +0000
Subject: [PATCH] feat: Beta badge, generated System column, fix table scroll

- Add "Beta" badge next to AI Assist button text
- When advisor generates a system prompt, show it as a "System (generated)"
  column prepended to the data table so user can see it alongside data
- Fix table being squished to near-zero height when advisor notification
  banner is present: add min-h-[250px] to table wrapper, change body
  from overflow-hidden to overflow-auto
---
 .../dataset-preview-dialog-mapping.tsx        |  1 +
 .../sections/dataset-preview-dialog.tsx       | 37 +++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/studio/frontend/src/features/studio/sections/dataset-preview-dialog-mapping.tsx b/studio/frontend/src/features/studio/sections/dataset-preview-dialog-mapping.tsx
index 153230df7d..aca485c702 100644
--- a/studio/frontend/src/features/studio/sections/dataset-preview-dialog-mapping.tsx
+++ b/studio/frontend/src/features/studio/sections/dataset-preview-dialog-mapping.tsx
@@ -214,6 +214,7 @@ export function DatasetMappingCard({
                   <>
                     <Sparkles className="mr-1.5 h-3.5 w-3.5" />
                     AI Assist
+                    <Badge variant="outline" className="ml-1.5 text-[9px] px-1 py-0 h-4 font-medium">Beta</Badge>
                   </>
                 )}
               </Button>
diff --git a/studio/frontend/src/features/studio/sections/dataset-preview-dialog.tsx b/studio/frontend/src/features/studio/sections/dataset-preview-dialog.tsx
index 446f445a50..f17bda7199 100644
--- a/studio/frontend/src/features/studio/sections/dataset-preview-dialog.tsx
+++ b/studio/frontend/src/features/studio/sections/dataset-preview-dialog.tsx
@@ -242,7 +242,8 @@ export function DatasetPreviewDialog({
   // Build TanStack Table columns from the column names
   const tableColumns = useMemo<ColumnDef<Record<string, unknown>>[]>(() => {
     if (!columns.length) return [];
-    return columns.map((colName) => ({
+
+    const dataCols: ColumnDef<Record<string, unknown>>[] = columns.map((colName) => ({
       accessorKey: colName,
       header: () => (
         <div className="flex flex-col gap-2">
@@ -309,12 +310,42 @@ export function DatasetPreviewDialog({
         );
       },
     }));
+
+    // Prepend generated system prompt column when advisor is active
+    if (datasetSystemPrompt) {
+      dataCols.unshift({
+        id: "__system_generated",
+        header: () => (
+          <div className="flex flex-col gap-2">
+            <span className="font-heading text-[13px] font-semibold tracking-tight text-foreground">
+              System <span className="text-muted-foreground font-normal">(generated)</span>
+            </span>
+            {mappingEnabled && (
+              <Badge variant="outline" className="h-6 w-fit text-[10px] px-2 py-0 border-dashed text-muted-foreground">
+                System
+              </Badge>
+            )}
+          </div>
+        ),
+        cell: () => (
+          <p
+            className="text-[13px] leading-relaxed line-clamp-6 text-muted-foreground italic"
+            title={datasetSystemPrompt}
+          >
+            {datasetSystemPrompt}
+          </p>
+        ),
+      });
+    }
+
+    return dataCols;
   }, [
     columns,
     manualMapping,
     handleRoleChange,
     mappingEnabled,
     availableRoles,
+    datasetSystemPrompt,
   ]);
 
   return (
@@ -336,7 +367,7 @@ export function DatasetPreviewDialog({
         </DialogHeader>
 
         {/* Body */}
-        <div className="flex flex-col min-h-0 flex-1 overflow-hidden px-6 pb-6">
+        <div className="flex flex-col min-h-0 flex-1 overflow-auto px-6 pb-6">
           {/* Loading */}
           {loading && (
             <div className="py-24 flex flex-col items-center justify-center gap-3">
@@ -434,7 +465,7 @@ export function DatasetPreviewDialog({
               )}
 
               {/* Data table */}
-              <div className="flex-1 min-h-0 rounded-xl corner-squircle ring-1 ring-border/60 overflow-auto">
+              <div className="flex-1 min-h-[250px] rounded-xl corner-squircle ring-1 ring-border/60 overflow-auto">
                 <DataTable columns={tableColumns} data={rows} />
               </div>