Merge branch 'dev' of github.com:NeuralNomadsAI/CodeNomad into dev

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"
                         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"
                   onClick={handleCommandPaletteClick}
                   aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                   style={{ flex: "0 0 auto", width: "auto" }}

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")}
           >

packages/ui/src/components/tool-call.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show, createEffect, createMemo, onCleanup } from "solid-js"
-import { ArrowRightSquare, Copy } from "lucide-solid"
+import { ArrowRightSquare, Check, Copy, Hourglass, Loader2, XCircle } from "lucide-solid"
 import { stringify as stringifyYaml } from "yaml"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useTheme } from "../lib/theme"
@@ -576,13 +576,13 @@ export default function ToolCall(props: ToolCallProps) {
     const status = toolState()?.status || ""
     switch (status) {
       case "pending":
-        return "⏳"
+        return <Hourglass class="w-4 h-4" />
       case "running":
-        return "🔄"
+        return <Loader2 class="w-4 h-4 animate-spin" />
       case "completed":
-        return "✅"
+        return <Check class="w-4 h-4" />
       case "error":
-        return "⚠️"
+        return <XCircle class="w-4 h-4" />
       default:
         return ""
     }

packages/ui/src/styles/messaging/message-section.css

@@ -130,6 +130,19 @@
   color: var(--text-primary);
 }
 
+/* Make the command palette trigger stand out in the header. */
+.connection-status-button.command-palette-button {
+  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 {
+  background-color: var(--surface-hover);
+  color: var(--text-primary);
+}
+
 .connection-status-button:hover {
   background-color: var(--surface-hover);
 }