From 0e5695a9039a1213b611093b7c4d137d644e9735 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 20 Feb 2026 00:24:24 +0000
Subject: [PATCH] ui: emphasize command palette button

---
 .../ui/src/components/instance/instance-shell2.tsx    |  4 ++--
 packages/ui/src/components/message-list-header.tsx    |  2 +-
 packages/ui/src/styles/messaging/message-section.css  | 11 +++++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 70f71d75..d3c58ed8 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -625,7 +625,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     <div class="flex flex-wrap items-center justify-center gap-1">
                       <button
                         type="button"
-                        class="connection-status-button px-2 py-0.5 text-xs"
+                        class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
                         onClick={handleCommandPaletteClick}
                         aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                         style={{ flex: "0 0 auto", width: "auto" }}
@@ -721,7 +721,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               <div class="session-toolbar-center flex items-center justify-center gap-2 min-w-[160px]">
                 <button
                   type="button"
-                  class="connection-status-button px-2 py-0.5 text-xs"
+                  class="connection-status-button command-palette-button px-2 py-0.5 text-xs"
                   onClick={handleCommandPaletteClick}
                   aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                   style={{ flex: "0 0 auto", width: "auto" }}
diff --git a/packages/ui/src/components/message-list-header.tsx b/packages/ui/src/components/message-list-header.tsx
index 75513971..9921164c 100644
--- a/packages/ui/src/components/message-list-header.tsx
+++ b/packages/ui/src/components/message-list-header.tsx
@@ -51,7 +51,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
         <div class="connection-status-shortcut-action">
           <button
             type="button"
-            class="connection-status-button"
+            class="connection-status-button command-palette-button"
             onClick={props.onCommandPalette}
             aria-label={t("messageListHeader.commandPalette.ariaLabel")}
           >
diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css
index 1579fc3c..e33d2516 100644
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/packages/ui/src/styles/messaging/message-section.css
@@ -130,6 +130,17 @@
   color: var(--text-primary);
 }
 
+/* Make the command palette trigger stand out in the header. */
+.connection-status-button.command-palette-button {
+  border-color: var(--accent-primary);
+  background-color: var(--surface-secondary);
+}
+
+.connection-status-button.command-palette-button:hover {
+  border-color: var(--accent-primary);
+  background-color: var(--surface-hover);
+}
+
 .connection-status-button:hover {
   background-color: var(--surface-hover);
 }