From 1610daeafbdd08cb4c977ef4d74860bf80c1dd56 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Wed, 3 Dec 2025 21:41:41 -0800
Subject: [PATCH] chore: a little bit of cleanup

---
 .../panel-edit/PanelDataPane/AiModeCard.tsx      | 16 +++++++++-------
 .../PanelDataPane/QueryTransformList.tsx         | 16 ++++++++++++----
 public/locales/en-US/grafana.json                |  3 ++-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AiModeCard.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AiModeCard.tsx
index 5ce5be1520e..71efca68cfe 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AiModeCard.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AiModeCard.tsx
@@ -166,7 +166,6 @@ export const AiModeCard = ({ selectedContexts, onRemoveContext, onSubmit, onDemo
                 </span>
                 <button
                   className={styles.badgeRemove}
-                  style={styles.getBadgeColor(context.type)}
                   onClick={() => onRemoveContext(context.id)}
                   aria-label={t('dashboard-scene.ai-mode-card.remove-context', 'Remove context')}
                 >
@@ -197,10 +196,12 @@ export const AiModeCard = ({ selectedContexts, onRemoveContext, onSubmit, onDemo
         <div className={styles.bottomRow}>
           <div className={styles.leftContent}>
             {!hasContext && (
-              <div className={styles.emptyState}>
-                <Icon name="ai-pointer" />
-                {t('dashboard-scene.ai-mode-card.add-nodes-to-context', 'Add nodes to context')}
-              </div>
+              <Stack direction="row" gap={0.5}>
+                <Icon name="ai-pointer" size="lg" />
+                <div className={styles.emptyState}>
+                  {t('dashboard-scene.ai-mode-card.click-nodes-to-add-context', 'Click nodes to add context')}
+                </div>
+              </Stack>
             )}
           </div>
           <IconButton
@@ -271,9 +272,11 @@ const getStyles = (theme: GrafanaTheme2, colors: ReturnType<typeof usePanelDataP
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
+      color: theme.colors.text.secondary,
       opacity: 0.7,
       '&:hover': {
         opacity: 1,
+        color: theme.colors.text.primary,
       },
     }),
     form: css({
@@ -339,7 +342,7 @@ const getStyles = (theme: GrafanaTheme2, colors: ReturnType<typeof usePanelDataP
       alignItems: 'center',
       justifyContent: 'space-between',
       gap: theme.spacing(1),
-      padding: `0 ${theme.spacing(1.5)}`,
+      padding: `0 ${theme.spacing(0.5)}`,
     }),
     leftContent: css({
       flex: 1,
@@ -351,7 +354,6 @@ const getStyles = (theme: GrafanaTheme2, colors: ReturnType<typeof usePanelDataP
       alignItems: 'center',
       gap: theme.spacing(0.5),
       fontFamily: theme.typography.fontFamilyMonospace,
-      letterSpacing: '0.05em',
     }),
     submitButton: css({
       flexShrink: 0,
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
index 2014572a241..b35e4a7b9f7 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
@@ -385,7 +385,11 @@ export const QueryTransformList = memo(
                                                 item={item.data}
                                                 type={item.type}
                                                 index={item.index}
-                                                isSelected={isAiMode ? selectedContextIds.includes(item.id) : selectedId === item.id}
+                                                isSelected={
+                                                  isAiMode
+                                                    ? selectedContextIds.includes(item.id)
+                                                    : selectedId === item.id
+                                                }
                                                 onClick={() => handleCardClick(item.id)}
                                                 onAddExpression={onAddExpression}
                                                 onAddQuery={onAddQuery}
@@ -483,7 +487,11 @@ export const QueryTransformList = memo(
                                                 item={item.data}
                                                 type={item.type}
                                                 index={item.index}
-                                                isSelected={isAiMode ? selectedContextIds.includes(item.id) : selectedId === item.id}
+                                                isSelected={
+                                                  isAiMode
+                                                    ? selectedContextIds.includes(item.id)
+                                                    : selectedId === item.id
+                                                }
                                                 onClick={() => handleCardClick(item.id)}
                                                 onAddExpression={onAddExpression}
                                                 onAddQuery={onAddQuery}
@@ -644,7 +652,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     aiModeClosing: css({
       [theme.transitions.handleMotion('no-preference', 'reduce')]: {
-        animation: 'slideUp 0.3s ease-out forwards',
+        animation: 'slideUp 0.3s ease-in forwards',
         '@keyframes slideUp': {
           from: {
             opacity: 1,
@@ -668,7 +676,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     contentGradientBorderClosing: css({
       [theme.transitions.handleMotion('no-preference', 'reduce')]: {
-        animation: 'fadeBorderOut 0.3s ease-out forwards',
+        animation: 'fadeBorderOut 0.3s ease-in forwards',
         '@keyframes fadeBorderOut': {
           from: {
             borderTopColor: 'rgba(255, 152, 48, 1)',
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index a2ce95fe6a5..1bb30e49de9 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -5839,8 +5839,8 @@
       }
     },
     "ai-mode-card": {
-      "add-nodes-to-context": "Add nodes to context",
       "aria-label": "AI prompt input",
+      "click-nodes-to-add-context": "Click nodes to add context",
       "prompt-placeholder": "Describe what you want to do...",
       "remove-context": "Remove context",
       "submit": "Send message"
@@ -6292,6 +6292,7 @@
       "show-response": "Show response"
     },
     "query-transform-list": {
+      "add": "Add",
       "ai-mode": "AI Mode",
       "close": "Close",
       "header": "Pipeline flow",