add command palette button

packages/ui/src/components/message-stream.tsx

@@ -33,6 +33,7 @@ import Kbd from "./kbd"
 import { useConfig } from "../stores/preferences"
 import { getSessionInfo, computeDisplayParts, sessions, setActiveSession, setActiveParentSession } from "../stores/sessions"
 import { setActiveInstanceId } from "../stores/instances"
+import { showCommandPalette } from "../stores/command-palette"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 const SCROLL_OFFSET = 64
@@ -186,6 +187,9 @@ export default function MessageStream(props: MessageStreamProps) {
 
   const scrollStateKey = () => makeScrollKey(props.instanceId, props.sessionId)
   const connectionStatus = () => sseManager.getStatus(props.instanceId)
+  const handleCommandPaletteClick = () => {
+    showCommandPalette(props.instanceId)
+  }
 
   function createToolSignature(message: Message, toolPart: ClientPart, toolIndex: number, messageInfo?: MessageInfo): string {
     const messageId = message.id
@@ -552,11 +556,28 @@ export default function MessageStream(props: MessageStreamProps) {
         <div class="connection-status-text connection-status-info flex items-center gap-2 text-sm font-medium">
           <span>{formattedSessionInfo()}</span>
         </div>
-        <div class="connection-status-text connection-status-shortcut flex items-center gap-2 text-sm font-medium">
-          <span>Command Palette</span>
-          <Kbd shortcut="cmd+shift+p" />
+        <div class="connection-status-text connection-status-shortcut">
+          <div class="connection-status-shortcut-action">
+            <button
+              type="button"
+              class="connection-status-button"
+              onClick={handleCommandPaletteClick}
+              aria-label="Open command palette"
+            >
+              Command Palette
+            </button>
+            <span class="connection-status-shortcut-hint">
+              <Kbd shortcut="cmd+shift+p" />
+            </span>
+          </div>
         </div>
         <div class="connection-status-meta flex items-center justify-end gap-3">
+
+
+
+
+
+
           <Show when={connectionStatus() === "connected"}>
             <span class="status-indicator connected">
               <span class="status-dot" />

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

@@ -27,6 +27,43 @@
   color: var(--text-muted);
 }
 
+.connection-status-shortcut-action {
+  @apply flex items-center justify-center gap-2;
+}
+
+.connection-status-button {
+  @apply inline-flex items-center gap-2 px-3 py-1 text-sm font-medium border rounded-md transition-colors;
+  border-color: var(--border-base);
+  background-color: var(--surface-base);
+  color: var(--text-primary);
+}
+
+.connection-status-button:hover {
+  background-color: var(--surface-hover);
+}
+
+.connection-status-button:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-secondary);
+}
+
+.connection-status-shortcut-hint {
+  @apply inline-flex items-center;
+  color: var(--text-secondary);
+}
+
+@media (pointer: coarse) {
+  .connection-status-shortcut-hint {
+    display: none;
+  }
+
+  .connection-status-button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .message-stream {
   @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-1;
   background-color: var(--surface-base);