feat: added global modern Spotlight Search

[Jitmisra]

Implemented a modern fast Spotlight Search to improve accessibility and navigation for users.... Includes a context aware results, keyboard shortcuts cmd + k(mac) / Ctrl+K(windows) and correct routing for namespaces, clusters, shards, and nodes....

Monosnap.screencast.2025-11-19.16-36-43.mp4

[PragmaTwice]

Hmm I just realized that you haven't joined the apache organization on GitHub. Since you are a committer I think you can join by yourself via the process in the documentation: https://infra.apache.org/new-committers-guide.html#config-access

[Jitmisra]

Hmm I just realized that you haven't joined the apache organization on GitHub. Since you are a committer I think you can join by yourself via the process in the documentation: https://infra.apache.org/new-committers-guide.html#config-access

sure i will do it

[PragmaTwice]

Looks good.

[Copilot]

Pull Request Overview

This PR implements a modern, context-aware spotlight search feature to improve navigation and accessibility across the web UI. The search supports keyboard shortcuts (Cmd+K on macOS, Ctrl+K on Windows) and provides intelligent filtering based on the current page context (namespace, cluster, shard, or node level).

Key Changes:

• Added a new SpotlightSearch component with context-aware search and keyboard navigation
• Integrated search button with keyboard shortcut display in the application banner
• Added global CSS styling for keyboard shortcut indicators

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 9 comments.

File	Description
webui/src/app/ui/spotlight-search.tsx	New spotlight search component with keyboard shortcuts, context-aware filtering, and hierarchical navigation for namespaces, clusters, shards, and nodes
webui/src/app/ui/banner.tsx	Added search button to the banner with keyboard shortcut indicator and event dispatcher
webui/src/app/layout.tsx	Integrated SpotlightSearch component into the root layout
webui/src/app/globals.css	Added styling for kbd elements to display keyboard shortcuts in light and dark modes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The handleSelect function is missing from the dependency array of this useEffect hook. This can lead to stale closures where the effect uses an outdated version of handleSelect. Add handleSelect to the dependency array or use useCallback to memoize the function.

Suggested change

	}, [open, results, selectedIndex, allData.length, loadAllData]);
	const handleSelect = (result: SearchResult) => {
	router.push(result.path);
	setOpen(false);
	setQuery("");
	};
	}, [open, results, selectedIndex, allData.length, loadAllData, handleSelect]);
	const handleSelect = useCallback((result: SearchResult) => {
	router.push(result.path);
	setOpen(false);
	setQuery("");
	}, [router]);

[Copilot]

The keyboard event dispatch is incorrect. Setting both metaKey: true and ctrlKey: true doesn't match the actual keyboard shortcut logic in spotlight-search.tsx (line 197), which uses || (either Cmd OR Ctrl, not both). This will trigger the search on any platform. Instead, dispatch the event with only one modifier based on the user's platform:

const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const event = new KeyboardEvent("keydown", {
    key: "k",
    metaKey: isMac,
    ctrlKey: !isMac,
});

Suggested change

	const event = new KeyboardEvent("keydown", {
	key: "k",
	metaKey: true,
	ctrlKey: true,
	const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
	const event = new KeyboardEvent("keydown", {
	key: "k",
	metaKey: isMac,
	ctrlKey: !isMac,

[Copilot]

The search button only displays the macOS keyboard shortcut symbol "⌘K" regardless of the user's platform. Windows/Linux users see "⌘K" but should see "Ctrl+K". Update the button to display the correct shortcut based on the platform:

const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
// Then in the kbd element:
{isMac ? '⌘K' : 'Ctrl+K'}

[Copilot]

The loadAllData function makes multiple nested API calls sequentially (for each namespace -> for each cluster -> for each shard -> for each node), which can result in very poor performance and long loading times. Consider parallelizing these API calls using Promise.all() where possible:

const namespaces = await fetchNamespaces();
await Promise.all(namespaces.map(async (ns) => {
    const clusters = await fetchClusters(ns);
    await Promise.all(clusters.map(async (cluster) => {
        // Similar pattern for shards and nodes
    }));
}));

This will significantly reduce the total loading time by making concurrent requests instead of waiting for each to complete sequentially.

Suggested change

	const data: SearchResult[] = [];
	const namespaces = await fetchNamespaces();
	for (const ns of namespaces) {
	// Add namespace
	data.push({
	type: "namespace",
	title: ns,
	path: `/namespaces/${ns}`,
	namespace: ns,
	});
	// Add clusters
	const clusters = await fetchClusters(ns);
	for (const cluster of clusters) {
	data.push({
	type: "cluster",
	title: cluster,
	subtitle: `in ${ns}`,
	path: `/namespaces/${ns}/clusters/${cluster}`,
	namespace: ns,
	cluster,
	});
	// Add shards
	const shards = await listShards(ns, cluster);
	for (let i = 0; i < shards.length; i++) {
	data.push({
	type: "shard",
	title: `Shard ${i}`,
	subtitle: `${cluster} / ${ns}`,
	path: `/namespaces/${ns}/clusters/${cluster}/shards/${i}`,
	namespace: ns,
	cluster,
	shard: String(i),
	});
	// Add nodes
	const nodes = await listNodes(ns, cluster, String(i));
	for (let nodeIndex = 0; nodeIndex < (nodes as any[]).length; nodeIndex++) {
	const node = (nodes as any[])[nodeIndex];
	data.push({
	type: "node",
	title: node.addr || node.id,
	subtitle: `${node.role} in Shard ${i} / ${cluster}`,
	path: `/namespaces/${ns}/clusters/${cluster}/shards/${i}/nodes/${nodeIndex}`,
	namespace: ns,
	cluster,
	shard: String(i),
	});
	}
	}
	}
	}
	const namespaces = await fetchNamespaces();
	// For each namespace, fetch clusters in parallel
	const namespaceResults = await Promise.all(
	namespaces.map(async (ns) => {
	const results: SearchResult[] = [];
	// Add namespace
	results.push({
	type: "namespace",
	title: ns,
	path: `/namespaces/${ns}`,
	namespace: ns,
	});
	// Fetch clusters for this namespace
	const clusters = await fetchClusters(ns);
	const clusterResults = await Promise.all(
	clusters.map(async (cluster) => {
	const clusterData: SearchResult[] = [];
	// Add cluster
	clusterData.push({
	type: "cluster",
	title: cluster,
	subtitle: `in ${ns}`,
	path: `/namespaces/${ns}/clusters/${cluster}`,
	namespace: ns,
	cluster,
	});
	// Fetch shards for this cluster
	const shards = await listShards(ns, cluster);
	const shardResults = await Promise.all(
	shards.map(async (_shard, i) => {
	const shardData: SearchResult[] = [];
	// Add shard
	shardData.push({
	type: "shard",
	title: `Shard ${i}`,
	subtitle: `${cluster} / ${ns}`,
	path: `/namespaces/${ns}/clusters/${cluster}/shards/${i}`,
	namespace: ns,
	cluster,
	shard: String(i),
	});
	// Fetch nodes for this shard
	const nodes = await listNodes(ns, cluster, String(i));
	if (Array.isArray(nodes)) {
	nodes.forEach((node: any, nodeIndex: number) => {
	shardData.push({
	type: "node",
	title: node.addr || node.id,
	subtitle: `${node.role} in Shard ${i} / ${cluster}`,
	path: `/namespaces/${ns}/clusters/${cluster}/shards/${i}/nodes/${nodeIndex}`,
	namespace: ns,
	cluster,
	shard: String(i),
	});
	});
	}
	return shardData;
	})
	);
	// Flatten shardResults and add to clusterData
	clusterData.push(...shardResults.flat());
	return clusterData;
	})
	);
	// Flatten clusterResults and add to results
	results.push(...clusterResults.flat());
	return results;
	})
	);
	// Flatten all results
	const data: SearchResult[] = namespaceResults.flat();

[Copilot]

The error is logged to console but not displayed to the user. Users who trigger the search won't know if the data failed to load—they'll just see the loading indicator disappear without explanation. Consider setting an error state and displaying a user-friendly error message:

const [error, setError] = useState<string | null>(null);
// In catch block:
setError("Failed to load search data. Please try again.");
// Then render the error in the UI

[Copilot]

The SpotlightSearch component lacks ARIA attributes for accessibility. Screen reader users won't understand the purpose of the dialog or how to navigate the search results. Add appropriate ARIA attributes:

• Add role="combobox" and aria-expanded to the search input
• Add role="listbox" to the results list
• Add role="option" and aria-selected to each result item
• Add aria-label or aria-labelledby to describe the dialog purpose
• Consider adding aria-activedescendant to track the selected item

[Copilot]

There's no null/bounds check before accessing results[selectedIndex] in the Enter key handler. If selectedIndex is out of bounds (e.g., due to race conditions when results update), this could cause issues. While there's a check for results[selectedIndex] existence, the arrow key handlers on lines 215 and 218 could set selectedIndex to -1 or beyond array bounds if results.length becomes 0 after being set. Add a more robust check:

else if (e.key === "Enter" && results.length > 0 && selectedIndex >= 0 && selectedIndex < results.length) {
    e.preventDefault();
    handleSelect(results[selectedIndex]);
}

Suggested change

	} else if (e.key === "Enter" && results[selectedIndex]) {
	} else if (
	e.key === "Enter" &&
	results.length > 0 &&
	selectedIndex >= 0 &&
	selectedIndex < results.length
	) {

[Copilot]

The data loading is triggered every time Cmd+K is pressed if allData is empty, but there's no mechanism to prevent duplicate concurrent API calls if the user presses Cmd+K multiple times quickly while data is still loading. This could result in multiple identical API calls running in parallel. Add a check for the loading state:

if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    setOpen(true);
    if (!allData.length && !loading) {
        loadAllData();
    }
}

Suggested change

	if (!allData.length) {
	if (!allData.length && !loading) {

[Copilot]

The kbd styling uses fixed color values that may not provide sufficient contrast in all scenarios. The light mode kbd element uses color: #555 on a background that could vary, potentially violating WCAG contrast requirements. Consider using theme-aware colors or CSS variables that adapt to the theme context to ensure adequate contrast ratios (at least 4.5:1 for text).

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 49.06%. Comparing base (6c56470) to head (ad37b48).
⚠️ Report is 100 commits behind head on unstable.

Additional details and impacted files

@@             Coverage Diff              @@
##           unstable     #367      +/-   ##
============================================
+ Coverage     43.38%   49.06%   +5.67%     
============================================
  Files            37       45       +8     
  Lines          2971     3783     +812     
============================================
+ Hits           1289     1856     +567     
- Misses         1544     1719     +175     
- Partials        138      208      +70     

Flag	Coverage Δ
unittests	49.06% <ø> (+5.67%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.