+ {search}
{notifications}
{userMenu}
diff --git a/frontend/src/components/sidebar/SidebarSearch.tsx b/frontend/src/components/sidebar/SidebarSearch.tsx
index b376fe0f..993ed6b4 100644
--- a/frontend/src/components/sidebar/SidebarSearch.tsx
+++ b/frontend/src/components/sidebar/SidebarSearch.tsx
@@ -5,23 +5,15 @@ interface SidebarSearchProps {
onValueChange: (v: string) => void;
}
-function kbdHint(): string {
- if (typeof navigator === 'undefined') return 'Ctrl+K';
- return /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
-}
-
export function SidebarSearch({ value, onValueChange }: SidebarSearchProps) {
return (
-
+
-
- {kbdHint()}
-
);
}
diff --git a/frontend/src/hooks/useCrossNodeStackSearch.ts b/frontend/src/hooks/useCrossNodeStackSearch.ts
new file mode 100644
index 00000000..e198ccb2
--- /dev/null
+++ b/frontend/src/hooks/useCrossNodeStackSearch.ts
@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNodes } from '@/context/NodeContext';
+import { fetchForNode } from '@/lib/api';
+
+export type StackStatus = 'running' | 'exited' | 'unknown';
+
+export interface StackStatusInfo {
+ status: StackStatus;
+}
+
+export interface StackHit {
+ nodeId: number;
+ nodeName: string;
+ file: string;
+ status: StackStatus;
+}
+
+interface Options {
+ query: string;
+ enabled: boolean;
+ excludeNodeId?: number;
+}
+
+const DEBOUNCE_MS = 250;
+
+export function useCrossNodeStackSearch({ query, enabled, excludeNodeId }: Options) {
+ const { nodes } = useNodes();
+ const [hits, setHits] = useState
([]);
+ const [loading, setLoading] = useState(false);
+
+ // Ref avoids re-running the effect on every NodeContext status tick
+ const nodesRef = useRef(nodes);
+ nodesRef.current = nodes;
+
+ useEffect(() => {
+ const q = query.trim().toLowerCase();
+ if (!enabled || !q) {
+ setHits([]);
+ setLoading(false);
+ return;
+ }
+ const targets = nodesRef.current.filter(
+ n => n.status !== 'offline' && n.id !== excludeNodeId,
+ );
+ if (targets.length === 0) {
+ setHits([]);
+ return;
+ }
+ const controller = new AbortController();
+ const timer = setTimeout(async () => {
+ setLoading(true);
+ try {
+ const perNode = await Promise.all(targets.map(async (node) => {
+ try {
+ const [listRes, statusRes] = await Promise.all([
+ fetchForNode('/stacks', node.id, { signal: controller.signal }),
+ fetchForNode('/stacks/statuses', node.id, { signal: controller.signal }),
+ ]);
+ if (!listRes.ok) return [] as StackHit[];
+ const rawList = await listRes.json();
+ const files: string[] = Array.isArray(rawList) ? rawList : [];
+ const statuses: Record = {};
+ if (statusRes.ok) {
+ const raw = await statusRes.json();
+ for (const [key, val] of Object.entries(raw)) {
+ if (typeof val === 'string') {
+ statuses[key] = val as StackStatus;
+ } else if (val && typeof val === 'object' && 'status' in val) {
+ statuses[key] = (val as StackStatusInfo).status;
+ }
+ }
+ }
+ return files
+ .filter(f => f.toLowerCase().includes(q))
+ .map(file => ({
+ nodeId: node.id,
+ nodeName: node.name,
+ file,
+ status: statuses[file] ?? 'unknown',
+ }));
+ } catch {
+ return [] as StackHit[];
+ }
+ }));
+ if (controller.signal.aborted) return;
+ setHits(perNode.flat());
+ } finally {
+ if (!controller.signal.aborted) setLoading(false);
+ }
+ }, DEBOUNCE_MS);
+ return () => {
+ clearTimeout(timer);
+ controller.abort();
+ };
+ }, [enabled, query, excludeNodeId]);
+
+ return { hits, loading };
+}
+
+
+## Opening the palette
+
+Three ways to open it:
+
+- Press Ctrl + K (or Cmd + K on macOS) from anywhere in the app.
+- Click the search icon in the top bar, left of the notification bell.
+- Press Esc to close it at any time.
+
+The shortcut works from the dashboard, editor, fleet view, resources, and every other screen.
+
+## What you can find
+
+The palette groups results into three sections:
+
+| Group | What it contains | What happens when you pick one |
+|-------|------------------|--------------------------------|
+| **Pages** | Every top-level navigation destination (Home, Fleet, Resources, App Store, Logs, Auto-Update, Console, Audit, Schedules) | Navigates to that page |
+| **Nodes** | Every node in your fleet, with a green dot for online and a grey dot for offline | Switches the active node without leaving the current page |
+| **Stacks** | Every compose stack on every online node, matched by filename | Switches to the stack's node and opens it in the editor |
+
+Each stack row shows a status dot (running, exited, or unknown) on the left and the node name as a tag on the right. That way you always know which host a match lives on before you pick it.
+
+## Typing to filter
+
+Start typing and the results narrow in real time. Matching is substring-based, so you can type a fragment from anywhere in a stack's filename or a node's name. Examples:
+
+- `fleet` — jumps to the Fleet page.
+- `opsix` — selects the Opsix node and switches the active context to it.
+- `db` — lists every stack with "db" in its name, showing which node each one lives on.
+
+When a query matches stacks on a remote node, selecting one switches the active node and opens the editor on that stack in a single action.
+
+## Cross-node search
+
+Stack search fans out across every online node in your fleet. Offline nodes are skipped so one unreachable host never slows the palette down. Results from the active node and remote nodes appear together, sorted by the order nodes were added.
+
+The palette caps the Stacks group at 50 results. If you have more matches than that, keep typing to narrow the query and the extras will come into view.
+
+## Keyboard navigation
+
+Once the palette is open:
+
+- ↑ / ↓ — move through the results.
+- Enter — pick the highlighted result.
+- Esc — close the palette.
+
+Offline nodes show as greyed-out and are not selectable.
diff --git a/docs/images/global-search/palette-stacks.png b/docs/images/global-search/palette-stacks.png
new file mode 100644
index 00000000..88f63d87
Binary files /dev/null and b/docs/images/global-search/palette-stacks.png differ
diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index 7252dab4..11abceb6 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -51,6 +51,12 @@ import { SecurityHistoryView } from './SecurityHistoryView';
import { SENCHO_NAVIGATE_EVENT } from './NodeManager';
import type { SenchoNavigateDetail } from './NodeManager';
import { NodeSwitcher } from './NodeSwitcher';
+import {
+ GlobalCommandPalette,
+ GlobalCommandPaletteProvider,
+ GlobalCommandPaletteTrigger,
+} from './GlobalCommandPalette';
+import { useCrossNodeStackSearch } from '@/hooks/useCrossNodeStackSearch';
import { SENCHO_OPEN_LOGS_EVENT } from '@/lib/events';
import type { SenchoOpenLogsDetail } from '@/lib/events';
import { useNodes } from '@/context/NodeContext';
@@ -314,8 +320,6 @@ export default function EditorLayout() {
const [isEditing, setIsEditing] = useState(false);
const [editingCompose, setEditingCompose] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
- const [remoteStackResults, setRemoteStackResults] = useState