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

---
 packages/ui/src/components/instance/instance-shell2.tsx | 4 ++--
 packages/ui/src/styles/messaging/message-section.css    | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index d3c58ed8..43998a17 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 command-palette-button px-2 py-0.5 text-xs"
+                        class="connection-status-button command-palette-button"
                         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 command-palette-button px-2 py-0.5 text-xs"
+                  class="connection-status-button command-palette-button"
                   onClick={handleCommandPaletteClick}
                   aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                   style={{ flex: "0 0 auto", width: "auto" }}
diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css
index e33d2516..15ded9e5 100644
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/packages/ui/src/styles/messaging/message-section.css
@@ -132,13 +132,15 @@
 
 /* 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);
+  border-radius: 0;
+  @apply text-sm px-2 py-1 border border-base transition-colors;
+  background-color: var(--surface-base);
+  color: var(--text-primary);
 }
 
 .connection-status-button.command-palette-button:hover {
-  border-color: var(--accent-primary);
   background-color: var(--surface-hover);
+  color: var(--text-primary);
 }
 
 .connection-status-button:hover {