diff --git a/packages/app/src/components/settings/SettingsDialogShell.dom.test.tsx b/packages/app/src/components/settings/SettingsDialogShell.dom.test.tsx
index 66981698..8cda4894 100644
--- a/packages/app/src/components/settings/SettingsDialogShell.dom.test.tsx
+++ b/packages/app/src/components/settings/SettingsDialogShell.dom.test.tsx
@@ -20,10 +20,10 @@
* when `userSynced` is false and the real binding when true.
*/
-import { afterEach, beforeEach, describe, expect, mock, spyOn, test } from 'bun:test';
import type { ConfigBinding, OkignoreBinding } from '@inkeep/open-knowledge-core';
import { cleanup, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
// Radix UI primitives (used by shadcn `Dialog`) reach for DOM globals at
// mount time that `tests/dom/jsdom-preload.ts` does not expose. Hoist the
@@ -91,13 +91,17 @@ let mockShowInstallSkill = true;
// project that has enabled it, so the Plugins group lists its panel.
let mockProjectConfig: unknown = { contentRules: { markdownlint: { enabled: true } } };
-mock.module('@inkeep/open-knowledge-core', () => ({
+vi.doMock('@inkeep/open-knowledge-core', () => ({
get SHOW_INSTALL_SKILL() {
return mockShowInstallSkill;
},
+ // The shell builds its search index from the rule catalog when markdownlint
+ // is an enabled plugin; an empty catalog keeps these nav/gating cases (which
+ // don't exercise rule search) from tripping the mock's missing-export guard.
+ MARKDOWNLINT_RULE_CATALOG: [],
}));
-mock.module('@/components/settings/SettingsDialogBodyLazy', () => ({
+vi.doMock('@/components/settings/SettingsDialogBodyLazy', () => ({
SettingsDialogBodyLazy: (props: BodyProps) => {
if (mockBodyMode === 'suspend') throw pendingBodyChunk;
if (mockBodyMode === 'throw') throw new Error('settings chunk failed');
@@ -106,12 +110,12 @@ mock.module('@/components/settings/SettingsDialogBodyLazy', () => ({
},
}));
-mock.module('@/editor/DocumentContext', () => ({
+vi.doMock('@/editor/DocumentContext', () => ({
useDocumentContext: () => ({ collabUrl: mockCollabUrl }),
DocumentProvider: ({ children }: { children: React.ReactNode }) => children,
}));
-mock.module('@/lib/config-provider', () => ({
+vi.doMock('@/lib/config-provider', () => ({
useConfigContext: () => ({
userBinding: mockUserBinding,
userSynced: mockUserSynced,
@@ -127,7 +131,7 @@ mock.module('@/lib/config-provider', () => ({
}),
}));
-mock.module('@/lib/handoff/use-claude-desktop-integration', () => ({
+vi.doMock('@/lib/handoff/use-claude-desktop-integration', () => ({
useClaudeDesktopIntegration: () => ({
desktopPresent: mockDesktopPresent,
skillInstalled: false,
@@ -150,7 +154,7 @@ const SENTINEL_USER_BINDING = {
} as unknown as ConfigBinding;
describe('SettingsDialogShell userBinding gating (Tier-3 mount)', () => {
- let consoleErrorSpy: ReturnType
;
+ let consoleErrorSpy: ReturnType;
beforeEach(() => {
resetProbe();
@@ -163,7 +167,7 @@ describe('SettingsDialogShell userBinding gating (Tier-3 mount)', () => {
mockBodyMode = 'probe';
mockShowInstallSkill = true;
mockProjectConfig = { contentRules: { markdownlint: { enabled: true } } };
- consoleErrorSpy = spyOn(console, 'error').mockImplementation(() => {});
+ consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
});
afterEach(() => {
diff --git a/packages/app/src/components/settings/SettingsDialogShell.install-flag.dom.test.tsx b/packages/app/src/components/settings/SettingsDialogShell.install-flag.dom.test.tsx
index 4db1cb56..ba5ba278 100644
--- a/packages/app/src/components/settings/SettingsDialogShell.install-flag.dom.test.tsx
+++ b/packages/app/src/components/settings/SettingsDialogShell.install-flag.dom.test.tsx
@@ -1,13 +1,14 @@
-import { afterEach, describe, expect, mock, test } from 'bun:test';
import * as actualLinguiMacro from '@lingui/react/macro';
import { cleanup, render, screen } from '@testing-library/react';
import type { ReactNode } from 'react';
+import { afterEach, describe, expect, test, vi } from 'vitest';
-mock.module('@inkeep/open-knowledge-core', () => ({
+vi.doMock('@inkeep/open-knowledge-core', () => ({
SHOW_INSTALL_SKILL: false,
+ MARKDOWNLINT_RULE_CATALOG: [],
}));
-mock.module('@lingui/react/macro', () => ({
+vi.doMock('@lingui/react/macro', () => ({
...actualLinguiMacro,
Trans: ({ children }: { children?: ReactNode }) => <>{children},
useLingui: () => ({
@@ -22,11 +23,11 @@ mock.module('@lingui/react/macro', () => ({
}),
}));
-mock.module('@/components/settings/SettingsDialogBodyLazy', () => ({
+vi.doMock('@/components/settings/SettingsDialogBodyLazy', () => ({
SettingsDialogBodyLazy: () => ,
}));
-mock.module('@/components/ui/dialog', () => ({
+vi.doMock('@/components/ui/dialog', () => ({
Dialog: ({ children, open }: { children?: ReactNode; open?: boolean }) =>
open ? {children}
: null,
DialogContent: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => (
@@ -38,15 +39,15 @@ mock.module('@/components/ui/dialog', () => ({
),
}));
-mock.module('@/components/ui/skeleton', () => ({
+vi.doMock('@/components/ui/skeleton', () => ({
Skeleton: ({ className }: { className?: string }) => ,
}));
-mock.module('@/editor/DocumentContext', () => ({
+vi.doMock('@/editor/DocumentContext', () => ({
useDocumentContext: () => ({ collabUrl: 'ws://test.invalid' }),
}));
-mock.module('@/lib/config-provider', () => ({
+vi.doMock('@/lib/config-provider', () => ({
useConfigContext: () => ({
userBinding: null,
userSynced: false,
@@ -55,7 +56,7 @@ mock.module('@/lib/config-provider', () => ({
}),
}));
-mock.module('@/lib/handoff/use-claude-desktop-integration', () => ({
+vi.doMock('@/lib/handoff/use-claude-desktop-integration', () => ({
useClaudeDesktopIntegration: () => ({
desktopPresent: true,
}),
diff --git a/packages/app/src/components/settings/SettingsDialogShell.link-previews.dom.test.tsx b/packages/app/src/components/settings/SettingsDialogShell.link-previews.dom.test.tsx
index 1d788d4b..dd663892 100644
--- a/packages/app/src/components/settings/SettingsDialogShell.link-previews.dom.test.tsx
+++ b/packages/app/src/components/settings/SettingsDialogShell.link-previews.dom.test.tsx
@@ -11,21 +11,25 @@
* `isFileProtocolPage` helper seam instead — the same mock.module capability
* faking the terminal desktop-only test uses for the Electron bridge.
*/
-import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
+
+import * as actualLinguiMacro from '@lingui/react/macro';
import { cleanup, render, screen } from '@testing-library/react';
import type { ReactNode } from 'react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
let fileProtocolPage = false;
-mock.module('@/lib/file-protocol-page', () => ({
+vi.doMock('@/lib/file-protocol-page', () => ({
isFileProtocolPage: () => fileProtocolPage,
}));
-mock.module('@inkeep/open-knowledge-core', () => ({
+vi.doMock('@inkeep/open-knowledge-core', () => ({
SHOW_INSTALL_SKILL: false,
+ MARKDOWNLINT_RULE_CATALOG: [],
}));
-mock.module('@lingui/react/macro', () => ({
+vi.doMock('@lingui/react/macro', () => ({
+ ...actualLinguiMacro,
Trans: ({ children }: { children?: ReactNode }) => <>{children},
useLingui: () => ({
t: (strings: TemplateStringsArray | string, ...values: unknown[]) => {
@@ -39,11 +43,11 @@ mock.module('@lingui/react/macro', () => ({
}),
}));
-mock.module('@/components/settings/SettingsDialogBodyLazy', () => ({
+vi.doMock('@/components/settings/SettingsDialogBodyLazy', () => ({
SettingsDialogBodyLazy: () => ,
}));
-mock.module('@/components/ui/dialog', () => ({
+vi.doMock('@/components/ui/dialog', () => ({
Dialog: ({ children, open }: { children?: ReactNode; open?: boolean }) =>
open ? {children}
: null,
DialogContent: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => (
@@ -55,15 +59,15 @@ mock.module('@/components/ui/dialog', () => ({
),
}));
-mock.module('@/components/ui/skeleton', () => ({
+vi.doMock('@/components/ui/skeleton', () => ({
Skeleton: ({ className }: { className?: string }) => ,
}));
-mock.module('@/editor/DocumentContext', () => ({
+vi.doMock('@/editor/DocumentContext', () => ({
useDocumentContext: () => ({ collabUrl: 'ws://test.invalid' }),
}));
-mock.module('@/lib/config-provider', () => ({
+vi.doMock('@/lib/config-provider', () => ({
useConfigContext: () => ({
userBinding: null,
userSynced: false,
@@ -72,7 +76,7 @@ mock.module('@/lib/config-provider', () => ({
}),
}));
-mock.module('@/lib/handoff/use-claude-desktop-integration', () => ({
+vi.doMock('@/lib/handoff/use-claude-desktop-integration', () => ({
useClaudeDesktopIntegration: () => ({ desktopPresent: false }),
}));
diff --git a/packages/app/src/components/settings/SettingsDialogShell.search.dom.test.tsx b/packages/app/src/components/settings/SettingsDialogShell.search.dom.test.tsx
new file mode 100644
index 00000000..730f2cbc
--- /dev/null
+++ b/packages/app/src/components/settings/SettingsDialogShell.search.dom.test.tsx
@@ -0,0 +1,231 @@
+/**
+ * DOM tests for the settings-dialog search surface: the sidebar
+ * search box, its result navigation, the enabled-plugin gating of rule results,
+ * and the scroll-to-flash of a navigated field.
+ *
+ * Mirrors the mock harness in `SettingsDialogShell.dom.test.tsx`: the lazy body
+ * is a synchronous probe that records the props it receives (so we can assert
+ * `activeId` / `markdownlintRuleQuery` navigation) and renders a `[data-field]`
+ * node for the active section (so the Shell's flash effect has a target).
+ */
+
+import type { ConfigBinding, OkignoreBinding } from '@inkeep/open-knowledge-core';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+// Radix/cmdk reach for DOM globals the jsdom preload doesn't expose; hoist the
+// same shims the sibling shell test uses.
+type WindowGlobals = { MutationObserver?: typeof MutationObserver; NodeFilter?: typeof NodeFilter };
+type GlobalWithDomShims = typeof globalThis &
+ WindowGlobals & { window?: WindowGlobals; ResizeObserver?: unknown };
+const globalWithDomShims = globalThis as GlobalWithDomShims;
+if (
+ globalWithDomShims.MutationObserver === undefined &&
+ globalWithDomShims.window?.MutationObserver !== undefined
+) {
+ globalWithDomShims.MutationObserver = globalWithDomShims.window.MutationObserver;
+}
+if (
+ globalWithDomShims.NodeFilter === undefined &&
+ globalWithDomShims.window?.NodeFilter !== undefined
+) {
+ globalWithDomShims.NodeFilter = globalWithDomShims.window.NodeFilter;
+}
+if (globalWithDomShims.ResizeObserver === undefined) {
+ class NoopResizeObserver {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ }
+ globalWithDomShims.ResizeObserver = NoopResizeObserver;
+}
+// jsdom does not implement scrollIntoView; the flash effect calls it.
+if (typeof HTMLElement.prototype.scrollIntoView !== 'function') {
+ HTMLElement.prototype.scrollIntoView = () => {};
+}
+
+interface BodyProps {
+ activeId: string;
+ userBinding: ConfigBinding | null;
+ okignoreBinding: OkignoreBinding | null;
+ okignoreSynced: boolean;
+ markdownlintRuleQuery?: { query: string; nonce: number } | null;
+}
+const probeProps: BodyProps[] = [];
+
+let mockCollabUrl: string | null = 'ws://test.invalid';
+let mockProjectConfig: unknown = { contentRules: { markdownlint: { enabled: true } } };
+
+// A minimal fake catalog — the index reads only id/alias/aliases/name.
+const FAKE_RULE_CATALOG = [
+ {
+ id: 'MD013',
+ alias: 'line-length',
+ aliases: ['line-length'],
+ name: 'Line length',
+ docUrl: '',
+ tags: [],
+ options: [],
+ },
+ {
+ id: 'MD001',
+ alias: 'heading-increment',
+ aliases: ['heading-increment'],
+ name: 'Heading levels increment',
+ docUrl: '',
+ tags: [],
+ options: [],
+ },
+];
+
+vi.doMock('@inkeep/open-knowledge-core', () => ({
+ get SHOW_INSTALL_SKILL() {
+ return true;
+ },
+ MARKDOWNLINT_RULE_CATALOG: FAKE_RULE_CATALOG,
+}));
+
+// The probe records props AND renders a `[data-field]` node for the active
+// preferences section so the Shell's imperative flash effect finds a target.
+vi.doMock('@/components/settings/SettingsDialogBodyLazy', () => ({
+ SettingsDialogBodyLazy: (props: BodyProps) => {
+ probeProps.push(props);
+ return (
+
+ {props.activeId === 'preferences' ?
: null}
+
{children}
: null,
DialogContent: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => (
@@ -43,15 +45,15 @@ mock.module('@/components/ui/dialog', () => ({
),
}));
-mock.module('@/components/ui/skeleton', () => ({
+vi.doMock('@/components/ui/skeleton', () => ({
Skeleton: ({ className }: { className?: string }) => ,
}));
-mock.module('@/editor/DocumentContext', () => ({
+vi.doMock('@/editor/DocumentContext', () => ({
useDocumentContext: () => ({ collabUrl: 'ws://test.invalid' }),
}));
-mock.module('@/lib/config-provider', () => ({
+vi.doMock('@/lib/config-provider', () => ({
useConfigContext: () => ({
userBinding: null,
userSynced: false,
@@ -60,7 +62,7 @@ mock.module('@/lib/config-provider', () => ({
}),
}));
-mock.module('@/lib/handoff/use-claude-desktop-integration', () => ({
+vi.doMock('@/lib/handoff/use-claude-desktop-integration', () => ({
useClaudeDesktopIntegration: () => ({ desktopPresent: false }),
}));
diff --git a/packages/app/src/components/settings/SettingsDialogShell.tsx b/packages/app/src/components/settings/SettingsDialogShell.tsx
index 4ce5dfec..ff60908b 100644
--- a/packages/app/src/components/settings/SettingsDialogShell.tsx
+++ b/packages/app/src/components/settings/SettingsDialogShell.tsx
@@ -29,11 +29,20 @@
*/
import { SHOW_INSTALL_SKILL } from '@inkeep/open-knowledge-core';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
import { ArrowUpRight } from 'lucide-react';
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
+import { matchesCommandQuery, splitTextByQueryMatches } from '@/components/command-palette-search';
import { SettingsDialogBodyLazy } from '@/components/settings/SettingsDialogBodyLazy';
import { SettingsDialogErrorBoundary } from '@/components/settings/SettingsDialogErrorBoundary';
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from '@/components/ui/command';
import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
import { Skeleton } from '@/components/ui/skeleton';
import { useDocumentContext } from '@/editor/DocumentContext';
@@ -42,6 +51,8 @@ import { isFileProtocolPage } from '@/lib/file-protocol-page';
import { useClaudeDesktopIntegration } from '@/lib/handoff/use-claude-desktop-integration';
import { cn } from '@/lib/utils';
import { LINT_PLUGIN_META } from './lint-plugin-meta';
+import { buildSettingsSearchIndex, type SettingsSearchEntry } from './settings-search-index';
+import type { SidebarGroup, SidebarItem } from './settings-sidebar-types';
/**
* GitHub Releases tag URL — mirrors `releaseUrlFor` in the desktop main
@@ -55,23 +66,6 @@ function releaseNotesUrl(version: string): string {
return `https://github.com/inkeep/open-knowledge/releases/tag/v${encodeURIComponent(version)}`;
}
-interface SidebarItem {
- id: string;
- label: string;
-}
-
-interface SidebarGroup {
- id: 'user' | 'project' | 'plugins' | 'integrations';
- label: string;
- /**
- * `false` renders the group disabled (no-project state for THIS
- * PROJECT). Items are visible but not focusable; group label gets
- * an explanatory caption announced via aria-describedby.
- */
- enabled: boolean;
- items: SidebarItem[];
-}
-
interface SettingsDialogShellProps {
open: boolean;
onOpenChange: (open: boolean) => void;
@@ -87,10 +81,68 @@ export function SettingsDialogShell({ open, onOpenChange }: SettingsDialogShellP
// Always default to USER → Preferences on each fresh open. No
// in-session memory of last-viewed section.
const [activeId, setActiveId] = useState('preferences');
+ const [searchQuery, setSearchQuery] = useState('');
+ // Navigation tokens set by a search-result click. fieldFlash re-fires its
+ // consuming effect via object identity alone (each click sets a fresh
+ // object, same path or not). ruleQuery carries a nonce because its consumer
+ // (the markdownlint browser) keys its re-seed effect on primitive values
+ // threaded through props — identical query strings need the nonce to re-fire.
+ const [fieldFlash, setFieldFlash] = useState<{ path: string } | null>(null);
+ const [ruleQuery, setRuleQuery] = useState<{ query: string; nonce: number } | null>(null);
+ const navNonceRef = useRef(0);
+ const contentRef = useRef(null);
+
useEffect(() => {
- if (open) setActiveId('preferences');
+ if (open) {
+ setActiveId('preferences');
+ setSearchQuery('');
+ }
}, [open]);
+ // Imperative scroll-to-flash for a field the search navigated to. The target
+ // renders inside the lazily-loaded body and, for schema sections, only once
+ // its config binding has synced — so it can appear well after this effect
+ // fires. Rather than a fixed-frame retry (which can expire before the field
+ // mounts), watch the content subtree with a capped MutationObserver and flash
+ // the moment the `[data-field]` node appears. Uses a dedicated one-shot class
+ // no field's React `className` owns, so a re-render can't strip it mid-flash.
+ useEffect(() => {
+ if (!fieldFlash) return;
+ const container = contentRef.current;
+ if (!container) return;
+ const FLASH_CLASS = 'animate-settings-nav-flash';
+ let flashed: HTMLElement | null = null;
+ let removeTimer: ReturnType | null = null;
+ let giveUpTimer: ReturnType | null = null;
+ let observer: MutationObserver | null = null;
+
+ const tryFlash = (): boolean => {
+ const el = container.querySelector(`[data-field="${fieldFlash.path}"]`);
+ if (!el) return false;
+ el.scrollIntoView({ block: 'center' });
+ el.classList.add(FLASH_CLASS);
+ flashed = el;
+ removeTimer = setTimeout(() => el.classList.remove(FLASH_CLASS), 750);
+ return true;
+ };
+
+ if (!tryFlash()) {
+ // Field not mounted yet — watch for it, capped so we never observe forever.
+ observer = new MutationObserver(() => {
+ if (tryFlash()) observer?.disconnect();
+ });
+ observer.observe(container, { childList: true, subtree: true });
+ giveUpTimer = setTimeout(() => observer?.disconnect(), 4000);
+ }
+
+ return () => {
+ observer?.disconnect();
+ if (removeTimer) clearTimeout(removeTimer);
+ if (giveUpTimer) clearTimeout(giveUpTimer);
+ flashed?.classList.remove(FLASH_CLASS);
+ };
+ }, [fieldFlash]);
+
// hasProject signals whether the project-scope binding is a valid
// editing target. In current OK the editor UI always has a project
// when `collabUrl` is set; the disabled-THIS-PROJECT branch is
@@ -186,6 +238,26 @@ export function SettingsDialogShell({ open, onOpenChange }: SettingsDialogShellP
},
];
+ // Deep search corpus, derived from `groups` so every enablement gate
+ // (disabled THIS-PROJECT, absent/disabled plugins, desktop-only items) is
+ // inherited — disabled-plugin rules never surface. `t` resolves the FieldDef
+ // `MessageDescriptor` labels, the same call the body renders them with.
+ const searchEntries = buildSettingsSearchIndex({ groups, translate: t });
+
+ function handleNavigate(entry: SettingsSearchEntry) {
+ navNonceRef.current += 1;
+ const nonce = navNonceRef.current;
+ setActiveId(entry.sectionId);
+ if (entry.kind === 'field' && entry.targetField) {
+ setFieldFlash({ path: entry.targetField });
+ } else if (entry.kind === 'rule' && entry.ruleId) {
+ setRuleQuery({ query: entry.ruleId, nonce });
+ }
+ // Clearing the query collapses the results and restores the plain group nav
+ // on the now-active section.
+ setSearchQuery('');
+ }
+
return (