@flowdular/sdk 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@flowdular/sdk",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"type": "module",
 	"description": "Flowdular platform SDK: server, client, UI, data, agents and core modules through separate exports.",
 	"license": "MIT",
@@ -47,10 +47,7 @@
 		"./kernel": "./packages/kernel/src/index.ts",
 		"./kernel/legacy-local-state": "./packages/kernel/src/legacy-local-state.ts",
 		"./kernel/runtime-config": "./packages/kernel/src/runtime-config.ts",
-		"./modules/automations-workflows-integration": "./modules/automations-workflows-integration/src/index.ts",
-		"./modules/automations-workflows-integration/server": "./modules/automations-workflows-integration/src/server/index.ts",
-		"./modules/automations-workflows-integration/platform": "./modules/automations-workflows-integration/src/platform.ts",
-		"./modules/automations-workflows-integration/module.json": "./modules/automations-workflows-integration/module.json",
+		"./storage": "./packages/storage/src/index.ts",
 		"./modules/auth": "./modules/auth/src/index.ts",
 		"./modules/auth/client": "./modules/auth/src/client/index.ts",
 		"./modules/auth/server": "./modules/auth/src/server/index.ts",
@@ -91,7 +88,67 @@
 		"./modules/automations/client": "./modules/automations/src/client/index.ts",
 		"./modules/automations/server": "./modules/automations/src/server/index.ts",
 		"./modules/automations/platform": "./modules/automations/src/platform.ts",
-		"./modules/automations/module.json": "./modules/automations/module.json"
+		"./modules/automations/module.json": "./modules/automations/module.json",
+		"./modules/notifications": "./modules/notifications/src/index.ts",
+		"./modules/notifications/client": "./modules/notifications/src/client/index.ts",
+		"./modules/notifications/server": "./modules/notifications/src/server/index.ts",
+		"./modules/notifications/platform": "./modules/notifications/src/platform.ts",
+		"./modules/notifications/module.json": "./modules/notifications/module.json",
+		"./modules/directory": "./modules/directory/src/index.ts",
+		"./modules/directory/client": "./modules/directory/src/client/index.ts",
+		"./modules/directory/server": "./modules/directory/src/server/index.ts",
+		"./modules/directory/platform": "./modules/directory/src/platform.ts",
+		"./modules/directory/module.json": "./modules/directory/module.json",
+		"./modules/audit": "./modules/audit/src/index.ts",
+		"./modules/audit/client": "./modules/audit/src/client/index.ts",
+		"./modules/audit/server": "./modules/audit/src/server/index.ts",
+		"./modules/audit/platform": "./modules/audit/src/platform.ts",
+		"./modules/audit/module.json": "./modules/audit/module.json",
+		"./modules/approvals": "./modules/approvals/src/index.ts",
+		"./modules/approvals/client": "./modules/approvals/src/client/index.ts",
+		"./modules/approvals/server": "./modules/approvals/src/server/index.ts",
+		"./modules/approvals/platform": "./modules/approvals/src/platform.ts",
+		"./modules/approvals/module.json": "./modules/approvals/module.json",
+		"./modules/documents": "./modules/documents/src/index.ts",
+		"./modules/documents/client": "./modules/documents/src/client/index.ts",
+		"./modules/documents/server": "./modules/documents/src/server/index.ts",
+		"./modules/documents/platform": "./modules/documents/src/platform.ts",
+		"./modules/documents/module.json": "./modules/documents/module.json",
+		"./modules/metering": "./modules/metering/src/index.ts",
+		"./modules/metering/client": "./modules/metering/src/client/index.ts",
+		"./modules/metering/server": "./modules/metering/src/server/index.ts",
+		"./modules/metering/platform": "./modules/metering/src/platform.ts",
+		"./modules/metering/module.json": "./modules/metering/module.json",
+		"./modules/search": "./modules/search/src/index.ts",
+		"./modules/search/client": "./modules/search/src/client/index.ts",
+		"./modules/search/server": "./modules/search/src/server/index.ts",
+		"./modules/search/platform": "./modules/search/src/platform.ts",
+		"./modules/search/module.json": "./modules/search/module.json",
+		"./modules/connectors": "./modules/connectors/src/index.ts",
+		"./modules/connectors/client": "./modules/connectors/src/client/index.ts",
+		"./modules/connectors/server": "./modules/connectors/src/server/index.ts",
+		"./modules/connectors/platform": "./modules/connectors/src/platform.ts",
+		"./modules/connectors/module.json": "./modules/connectors/module.json",
+		"./modules/import": "./modules/import/src/index.ts",
+		"./modules/import/client": "./modules/import/src/client/index.ts",
+		"./modules/import/server": "./modules/import/src/server/index.ts",
+		"./modules/import/platform": "./modules/import/src/platform.ts",
+		"./modules/import/module.json": "./modules/import/module.json",
+		"./modules/reports": "./modules/reports/src/index.ts",
+		"./modules/reports/client": "./modules/reports/src/client/index.ts",
+		"./modules/reports/server": "./modules/reports/src/server/index.ts",
+		"./modules/reports/platform": "./modules/reports/src/platform.ts",
+		"./modules/reports/module.json": "./modules/reports/module.json",
+		"./modules/access": "./modules/access/src/index.ts",
+		"./modules/access/client": "./modules/access/src/client/index.ts",
+		"./modules/access/server": "./modules/access/src/server/index.ts",
+		"./modules/access/platform": "./modules/access/src/platform.ts",
+		"./modules/access/module.json": "./modules/access/module.json",
+		"./modules/exports": "./modules/exports/src/index.ts",
+		"./modules/exports/client": "./modules/exports/src/client/index.ts",
+		"./modules/exports/server": "./modules/exports/src/server/index.ts",
+		"./modules/exports/platform": "./modules/exports/src/platform.ts",
+		"./modules/exports/module.json": "./modules/exports/module.json"
 	},
 	"dependencies": {
 		"@fontsource-variable/ibm-plex-sans": "5.3.0",
@@ -113,6 +170,7 @@
 		"segment-state": "0.2.1",
 		"semver": "7.7.4",
 		"@types/semver": "7.7.1",
+		"nodemailer": "10.0.3",
 		"yaml": "2.9.0"
 	}
 }

package/packages/client/package.json

@@ -20,6 +20,7 @@
 	},
 	"devDependencies": {
 		"@tsrx/typescript-plugin": "0.3.120",
+		"jsdom": "30.0.1",
 		"typescript": "5.9.3",
 		"vitest": "4.1.11"
 	},

package/packages/client/src/ApplicationShell.tsrx

@@ -3,8 +3,12 @@ import { useEffect, useMemo } from 'octane';
 import { cell, createStore, useValue } from 'segment-state';
 import {
 	createClientContributionRegistry,
+	type CommandSearchHit,
 	type NavigationGroup,
 } from './contributions.ts';
+import { applicationPath } from './routing.ts';
+import { commandSearchHitOpened } from './shell/command-search.ts';
+import { onOpenCommandPalette } from './shell/command.ts';
 import { CommandPalette } from './shell/CommandPalette.tsrx';
 import { widgetsForSlot } from './shell/ContributionOutlets.tsrx';
 import { registerModuleTranslations, useTranslation } from './i18n/runtime.ts';
@@ -14,6 +18,7 @@ import {
 	navigationForIdentity,
 	navigationGroupLabel,
 	viewHref,
+	workspaceHitRoute,
 } from './shell/navigation.ts';
 import { Sidebar } from './shell/Sidebar.tsrx';
 import { Topbar } from './shell/Topbar.tsrx';
@@ -119,6 +124,14 @@ export function ApplicationShell(props: ApplicationShellProps) @{
 	const visibleWidgets = registry.widgets.filter(
 		(widget) => grantedScopes.has(widget.scope),
 	);
+	/* Memoized because the palette debounces on this list's identity: a fresh
+   array every render would restart the wait on every keystroke. */
+	const visibleSearches = useMemo(
+		() => registry.commandSearch.filter(
+			(entry) => props.identity.scopes.includes(entry.scope),
+		),
+		[registry, props.identity.scopes.join(' ')],
+	);
 	const topbarWidgets = widgetsForSlot(visibleWidgets, 'topbar.actions');
 	const activeTenantName =
 		props.identity.tenants.find(
@@ -133,6 +146,24 @@ export function ApplicationShell(props: ApplicationShellProps) @{
 		setCommandOpen(false);
 	};
 
+	/* A hit's route is workspace-relative and comes from a module, so anything
+   that is not a plain in-workspace path falls back to the hit's view rather
+   than being pushed at the browser. */
+	const openHit = (hit: CommandSearchHit) => {
+		commandSearchHitOpened(hit);
+		const base =
+			activeWorkspaceSlug
+				? applicationPath() + '/' + activeWorkspaceSlug
+				: applicationPath();
+		const route = workspaceHitRoute(hit.route);
+		const relative =
+			route === null ? viewHref(hit.viewId, activeWorkspaceSlug) : base + route;
+		history.pushState(null, '', relative);
+		setActiveView(hit.viewId);
+		setNavigationOpen(false);
+		setCommandOpen(false);
+	};
+
 	const switchTenant = (tenantId: string) => {
 		setTenantBusy(true);
 		setTenantError('');
@@ -231,6 +262,16 @@ export function ApplicationShell(props: ApplicationShellProps) @{
 		}
 	}, [activeWorkspaceSlug, effectiveView]);
 
+	/* A module widget opens the palette through this, so the shell keeps owning
+   the palette state and no contribution has to reach into it. */
+	useEffect(
+		() => onOpenCommandPalette((seed) => {
+			if (seed !== '') setQuery(seed);
+			setCommandOpen(true);
+		}),
+		[setCommandOpen, setQuery],
+	);
+
 	useEffect(() => {
 		const onKeyDown = (event: KeyboardEvent) => {
 			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
@@ -363,9 +404,11 @@ export function ApplicationShell(props: ApplicationShellProps) @{
 			@if (commandOpen) {
 				<CommandPalette
 					items={visibleNavigation}
+					searches={visibleSearches}
 					query={query}
 					onQuery={setQuery}
 					onNavigate={navigate}
+					onOpenHit={openHit}
 					onClose={() => setCommandOpen(false)}
 				/>
 			}

package/packages/client/src/contributions.ts

@@ -60,6 +60,47 @@ export interface AccountMenuContribution {
 	readonly order: number;
 }
 
+/** One record a contributed search answered with. */
+export interface CommandSearchHit {
+	/** Stable inside one result set, so a list can key on it. */
+	readonly id: string;
+	/** Groups the hit in the palette; the shell never interprets it. */
+	readonly provider: string;
+	readonly providerLabel: string;
+	readonly title: string;
+	readonly snippet: string;
+	/** The view the hit opens, as a `views` contribution declares its id. */
+	readonly viewId: string;
+	/** Workspace-relative path starting with "/", such as `/users?member=a1`. */
+	readonly route: string;
+}
+
+export interface CommandSearchRequest {
+	readonly query: string;
+	/** Aborted when the member types on, so a stale answer is never shown. */
+	readonly signal: AbortSignal;
+}
+
+/**
+ * Record hits for the command palette. The shell knows nothing about who
+ * answers or how: it asks every contribution whose scope the member holds and
+ * lists what comes back below the navigation entries. A contribution that
+ * fails contributes nothing and never blocks navigation.
+ */
+export interface CommandSearchContribution {
+	readonly id: string;
+	readonly scope: string;
+	readonly order: number;
+	search(request: CommandSearchRequest): Promise<readonly CommandSearchHit[]>;
+	/**
+	 * The member opened a hit this contribution answered with. Called once, on
+	 * that contribution alone, while the shell is already navigating: the result
+	 * is never awaited and a throw or a rejection is isolated, so bookkeeping of
+	 * any kind cannot delay or stop the record from opening.
+	 */
+	onOpen?(hit: CommandSearchHit): void | Promise<void>;
+}
+
 export interface WidgetContribution {
 	readonly id: string;
 	readonly slot: WorkspaceSlot;
@@ -80,6 +121,8 @@ export interface ModuleClientContribution {
 	readonly accountMenu?: readonly AccountMenuContribution[];
 	readonly views?: readonly ClientViewContribution[];
 	readonly widgets?: readonly WidgetContribution[];
+	/** Record hits the command palette lists below the navigation entries. */
+	readonly commandSearch?: CommandSearchContribution;
 }
 
 export interface ClientContributionRegistry {
@@ -87,6 +130,7 @@ export interface ClientContributionRegistry {
 	readonly accountMenu: readonly AccountMenuContribution[];
 	readonly views: readonly ClientViewContribution[];
 	readonly widgets: readonly WidgetContribution[];
+	readonly commandSearch: readonly CommandSearchContribution[];
 }
 
 function assertUnique(values: readonly string[], kind: string): void {
@@ -111,7 +155,14 @@ export function createClientContributionRegistry(
 	const accountMenu = modules.flatMap((module) => module.accountMenu ?? []);
 	const views = modules.flatMap((module) => module.views ?? []);
 	const widgets = modules.flatMap((module) => module.widgets ?? []);
+	const commandSearch = modules.flatMap((module) =>
+		module.commandSearch ? [module.commandSearch] : [],
+	);
 
+	assertUnique(
+		commandSearch.map((entry) => entry.id),
+		'command search id',
+	);
 	assertUnique(
 		navigation.map((item) => item.id),
 		'navigation id',
@@ -168,5 +219,9 @@ export function createClientContributionRegistry(
 			(left, right) =>
 				left.order - right.order || left.id.localeCompare(right.id),
 		),
+		commandSearch: [...commandSearch].sort(
+			(left, right) =>
+				left.order - right.order || left.id.localeCompare(right.id),
+		),
 	};
 }

package/packages/client/src/i18n/locales/en.json

@@ -12,6 +12,11 @@
 	"command.label": "Command palette",
 	"command.open": "↵ open",
 	"command.placeholder": "Search views and records…",
+	"command.records": "Records",
+	"command.recordsEmpty": "No records match \"{query}\".",
+	"command.recordsError": "Records could not be searched.",
+	"command.recordsPartial": "Some records could not be searched.",
+	"command.searching": "Searching records…",
 	"command.section": "Navigate",
 	"dashboard.description": "Your business platform, built on the Flowdular foundation. Every module you enable adds its records, screens, and agents here.",
 	"dashboard.greeting": "Welcome, {name}",

package/packages/client/src/i18n/locales/pl.json

@@ -12,6 +12,11 @@
 	"command.label": "Paleta poleceń",
 	"command.open": "↵ otwiera",
 	"command.placeholder": "Szukaj widoków i rekordów…",
+	"command.records": "Rekordy",
+	"command.recordsEmpty": "Żaden rekord nie pasuje do \"{query}\".",
+	"command.recordsError": "Nie udało się przeszukać rekordów.",
+	"command.recordsPartial": "Nie udało się przeszukać części rekordów.",
+	"command.searching": "Szukanie rekordów…",
 	"command.section": "Przejdź do",
 	"dashboard.description": "Twoja platforma biznesowa oparta na fundamencie Flowdular. Każdy włączony moduł dokłada tutaj swoje rekordy, ekrany i agentów.",
 	"dashboard.greeting": "Witaj, {name}",

package/packages/client/src/index.ts

@@ -1,5 +1,9 @@
 export { ApplicationShell } from './ApplicationShell.tsrx';
-export { applicationPath, configureApplicationRouting } from './routing.ts';
+export {
+	applicationPath,
+	configureApplicationRouting,
+	workspaceViewHref,
+} from './routing.ts';
 export { loadWebPage, webPageData } from './web.ts';
 export {
 	createClientContributionRegistry,
@@ -9,6 +13,9 @@ export type {
 	AccountMenuContribution,
 	ClientContributionRegistry,
 	ClientViewContribution,
+	CommandSearchContribution,
+	CommandSearchHit,
+	CommandSearchRequest,
 	ModuleClientContext,
 	ModuleClientInitializationContext,
 	ModuleClientContribution,
@@ -17,6 +24,11 @@ export type {
 	WidgetContribution,
 	WorkspaceSlot,
 } from './contributions.ts';
+export { openCommandPalette } from './shell/command.ts';
+export {
+	COMMAND_SEARCH_DEBOUNCE_MS,
+	COMMAND_SEARCH_MINIMUM,
+} from './shell/command-search.ts';
 export { FALLBACK_LOCALE, resolveLocale } from './i18n/locale.ts';
 export type { LocaleResolution } from './i18n/locale.ts';
 export {

package/packages/client/src/routing.ts

@@ -28,6 +28,28 @@ export function applicationPath(): string {
 	return basePath;
 }
 
+/**
+ * A view's address for a caller the shell hands no state to: a widget or panel
+ * a module contributes reads the open workspace back from the address bar,
+ * because the slug the shell's own `viewHref` takes is state it never sees. A
+ * single segment under the base is the view itself, and the shell resolves that
+ * slugless form against the open workspace, so a server render lands there too.
+ */
+export function workspaceViewHref(
+	viewId: string,
+	pathname: string = typeof window === 'undefined'
+		? ''
+		: window.location.pathname,
+	base: string = basePath,
+): string {
+	const segments = pathname.split('/').filter(Boolean);
+	const inWorkspace = segments[0] === base.slice(1) ? segments.slice(1) : [];
+	const workspaceSlug = inWorkspace.length > 1 ? inWorkspace[0] : null;
+	return workspaceSlug === null
+		? base + '/' + viewId
+		: base + '/' + workspaceSlug + '/' + viewId;
+}
+
 /** Select the server's installation setting during SSR and browser hydration. */
 export function configureApplicationFromPage(
 	props: { readonly state?: Map<string, unknown> } | undefined,

package/packages/client/src/shell/CommandPalette.tsrx

@@ -1,17 +1,44 @@
-import { Icon } from '@flowdular/sdk/ui';
-import type { NavigationContribution } from '../contributions.ts';
+import { useEffect, useRef, useState } from 'octane';
+import { Icon, trapFocus } from '@flowdular/sdk/ui';
+import type {
+	CommandSearchContribution,
+	CommandSearchHit,
+	NavigationContribution,
+} from '../contributions.ts';
 import { activeLocale, t } from '../i18n/runtime.ts';
+import {
+	commandSearchOutcome,
+	commandSearchReady,
+	groupCommandSearchHits,
+	runCommandSearch,
+	COMMAND_SEARCH_DEBOUNCE_MS,
+} from './command-search.ts';
 import { navigationGroupLabel } from './navigation.ts';
+import { nextPaletteIndex, paletteOptionId } from './palette-keys.ts';
 import type { NavigateToView } from './types.ts';
 
 export interface CommandPaletteProps {
 	items: readonly NavigationContribution[];
+	/** Contributions the member's scopes allow; empty means no record section. */
+	searches: readonly CommandSearchContribution[];
 	query: string;
 	onQuery: (query: string) => void;
 	onNavigate: NavigateToView;
+	onOpenHit: (hit: CommandSearchHit) => void;
 	onClose: () => void;
 }
 
+type RecordStatus = 'idle' | 'loading' | 'ready' | 'partial' | 'error';
+
+type PaletteOption =
+	| { readonly kind: 'view'; readonly item: NavigationContribution }
+	| { readonly kind: 'hit'; readonly hit: CommandSearchHit };
+
+/** Keys the list handles itself; anything else keeps typing in the input. */
+const SELECTION_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+
+const OPTIONS_ID = 'command-options';
+
 export function CommandPalette(props: CommandPaletteProps) @{
 	const locale = activeLocale();
 	const normalizedQuery = props.query.trim().toLocaleLowerCase(locale);
@@ -27,48 +54,233 @@ export function CommandPalette(props: CommandPaletteProps) @{
 						locale,
 					).includes(normalizedQuery)),
 	);
+	const [hits, setHits] = useState<readonly CommandSearchHit[]>([]);
+	const [recordStatus, setRecordStatus] = useState<RecordStatus>('idle');
+	const [active, setActive] = useState(0);
+	const dialog = useRef<HTMLElement | null>(null);
+	const results = useRef<HTMLDivElement | null>(null);
+	const groups = groupCommandSearchHits(hits);
+	/* Navigation entries first, then the record hits in the order they are
+   listed: one sequence, so an index is all the selection has to carry. */
+	const options: PaletteOption[] = [];
+	const views = matches.map((item, index) => {
+		options.push({ kind: 'view', item });
+		return { item, index };
+	});
+	const hitGroups = groups.map(
+		(group) => ({
+			provider: group.provider,
+			label: group.label,
+			hits: group.hits.map((hit) => {
+				options.push({ kind: 'hit', hit });
+				return { hit, index: options.length - 1 };
+			}),
+		}),
+	);
+	const activeIndex =
+		options.length === 0
+			? 0
+			: Math.min(Math.max(active, 0), options.length - 1);
+
+	const activate = (option: PaletteOption | undefined) => {
+		if (!option) return;
+		if (option.kind === 'view') props.onNavigate(option.item.viewId);
+		else props.onOpenHit(option.hit);
+	};
+
+	const keyDown = (event: KeyboardEvent) => {
+		if (SELECTION_KEYS.includes(event.key)) {
+			event.preventDefault();
+			setActive(nextPaletteIndex(activeIndex, options.length, event.key));
+			return;
+		}
+		if (event.key === 'Enter' && options[activeIndex]) {
+			event.preventDefault();
+			activate(options[activeIndex]);
+		}
+	};
+
+	/* Record hits are debounced and abortable, and they are resolved outside the
+   navigation list above: whatever a contribution does, typing and choosing a
+   navigation entry keep working at full speed. */
+	useEffect(() => {
+		const query = props.query.trim();
+		if (props.searches.length === 0 || !commandSearchReady(query)) {
+			setHits([]);
+			setRecordStatus('idle');
+			return;
+		}
+		const controller = new AbortController();
+		setRecordStatus('loading');
+		const timer = setTimeout(() => {
+			void runCommandSearch(props.searches, query, controller.signal).then(
+				(answer) => {
+					if (controller.signal.aborted) return;
+					setHits(answer.hits);
+					setRecordStatus(
+						commandSearchOutcome(props.searches.length, answer.failed.length),
+					);
+				},
+				() => {
+					if (controller.signal.aborted) return;
+					setHits([]);
+					setRecordStatus('error');
+				},
+			);
+		}, COMMAND_SEARCH_DEBOUNCE_MS);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [props.query, props.searches]);
+
+	/* A new query is a new list, so the selection starts at the top of it. */
+	useEffect(() => setActive(0), [props.query, hits]);
+
+	useEffect(() => {
+		const list = results.current;
+		const option = list?.querySelector('[aria-selected="true"]');
+		if (!list || !option) return;
+		const bounds = list.getBoundingClientRect();
+		const selected = option.getBoundingClientRect();
+		if (selected.top < bounds.top) list.scrollTop -= bounds.top - selected.top;
+		else if (selected.bottom > bounds.bottom) list.scrollTop +=
+			selected.bottom - bounds.bottom;
+	}, [activeIndex]);
+
+	/* The palette is modal: Tab stays inside it, and closing puts the member
+   back where they opened it from, which is the topbar button or whatever had
+   focus when the shortcut was pressed. */
+	useEffect(() => {
+		const element = dialog.current;
+		return element === null ? undefined : trapFocus(element);
+	}, []);
+
 	<div class="command-layer" role="presentation" onClick={props.onClose}>
 		<section
 			class="command-dialog"
 			role="dialog"
 			aria-modal="true"
 			aria-label={t('shell.command.label')}
+			tabIndex={-1}
+			ref={dialog}
 			onClick={(event) => event.stopPropagation()}
+			onKeyDown={keyDown}
 		>
 			<label class="command-dialog__input">
 				<Icon name="search" size={16} />
 				<input
-					autoFocus
 					type="search"
+					role="combobox"
+					aria-expanded={options.length > 0}
+					aria-controls={OPTIONS_ID}
+					aria-autocomplete="list"
+					autocomplete="off"
+					aria-activedescendant={options.length > 0
+						? paletteOptionId(activeIndex)
+						: undefined}
 					placeholder={t('shell.command.placeholder')}
 					value={props.query}
 					onInput={(event) => props.onQuery(event.currentTarget.value)}
 				/>
 				<span class="ui-kbd">ESC</span>
 			</label>
-			<div class="command-dialog__results">
+			<div
+				class="command-dialog__results"
+				id={OPTIONS_ID}
+				role="listbox"
+				aria-label={t('shell.command.label')}
+				ref={results}
+			>
 				<div class="ui-menu__label">{t('shell.command.section')}</div>
 				@if (matches.length === 0) {
-					<p class="ui-table__empty">{t('shell.command.empty', {
+					<p class="ui-table__empty" role="status">{t('shell.command.empty', {
 						query: props.query,
 					})}</p>
 				}
-				@for (const item of matches; key item.id) {
+				@for (const view of views; key view.item.id) {
 					<button
-						class="command-item"
+						class={[
+							'command-item',
+							view.index === activeIndex && 'command-item--active',
+						]}
 						type="button"
-						onClick={() => props.onNavigate(item.viewId)}
+						role="option"
+						id={paletteOptionId(view.index)}
+						aria-selected={view.index === activeIndex}
+						tabIndex={-1}
+						onClick={() => props.onNavigate(view.item.viewId)}
 					>
-						<Icon name={item.glyph} size={16} />
+						<Icon name={view.item.glyph} size={16} />
 						<span class="ui-cell">
-							<b>{item.label}</b>
+							<b>{view.item.label}</b>
 							<small>
-								{navigationGroupLabel(t, item.group) + ' · ' + item.description}
+								{navigationGroupLabel(t, view.item.group) + ' · ' +
+									view.item.description}
 							</small>
 						</span>
 						<span class="ui-kbd">↵</span>
 					</button>
 				}
+				@if (recordStatus === 'loading') {
+					<>
+						<div class="ui-menu__label">{t('shell.command.records')}</div>
+						<p class="ui-table__empty" role="status">{t(
+							'shell.command.searching',
+						)}</p>
+					</>
+				}
+				@if (recordStatus === 'error') {
+					<>
+						<div class="ui-menu__label">{t('shell.command.records')}</div>
+						<p class="ui-table__empty" role="status">{t(
+							'shell.command.recordsError',
+						)}</p>
+					</>
+				}
+				@if (recordStatus === 'partial') {
+					<>
+						<div class="ui-menu__label">{t('shell.command.records')}</div>
+						<p class="ui-table__empty" role="status">{t(
+							'shell.command.recordsPartial',
+						)}</p>
+					</>
+				}
+				@if (recordStatus === 'ready' && groups.length === 0) {
+					<>
+						<div class="ui-menu__label">{t('shell.command.records')}</div>
+						<p class="ui-table__empty" role="status">{t(
+							'shell.command.recordsEmpty',
+							{ query: props.query },
+						)}</p>
+					</>
+				}
+				@for (const group of hitGroups; key group.provider) {
+					<>
+						<div class="ui-menu__label">{group.label}</div>
+						@for (const entry of group.hits; key entry.hit.id) {
+							<button
+								class={[
+									'command-item',
+									entry.index === activeIndex && 'command-item--active',
+								]}
+								type="button"
+								role="option"
+								id={paletteOptionId(entry.index)}
+								aria-selected={entry.index === activeIndex}
+								tabIndex={-1}
+								onClick={() => props.onOpenHit(entry.hit)}
+							>
+								<Icon name="file-text" size={16} />
+								<span class="ui-cell">
+									<b>{entry.hit.title}</b>
+									<small>{entry.hit.snippet}</small>
+								</span>
+								<span class="ui-kbd">↵</span>
+							</button>
+						}
+					</>
+				}
 			</div>
 			<footer class="command-dialog__foot">
 				<span>{t('shell.command.open')}</span>