diff --git a/packages/ui/src/components/message-stream.tsx b/packages/ui/src/components/message-stream.tsx
index cf4b743c..94adf54e 100644
--- a/packages/ui/src/components/message-stream.tsx
+++ b/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) {
-
Command Palette
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/styles/messaging/message-stream.css b/packages/ui/src/styles/messaging/message-stream.css
index d1ad0a55..74a9503b 100644
--- a/packages/ui/src/styles/messaging/message-stream.css
+++ b/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);