feat(settings): add item search (#1592)

Adds item-level search inside Settings so users can find concrete settings like provider auth, agent mode, terminal font size, tunnel options, notification events, and similar controls instead of only filtering top-level pages.
Groups search results by Settings page and shows localized labels plus optional descriptions where useful.
Supports keyboard navigation with Arrow Up/Down, Enter, and Escape, matching the existing autocomplete interaction style.
Opens the correct Settings page or split-page draft state before scrolling to the matching control.
Highlights the matched setting with a subtle token-based background so users can see where they landed without an aggressive outline.
Adds explicit data-settings-item anchors across Settings pages and a centralized search registry with runtime/mobile availability guards.
Updates Settings UI skill guidance so future Settings changes keep search registry entries, anchors, localization, and availability guards in sync.

packages/ui/src/components/sections/plugins/AddPluginDialog.tsx

@@ -157,7 +157,7 @@ export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
         <div className="flex flex-col gap-4">
           {(tab === 'npm' || tab === 'path') && (
             <>
-              <div className="flex flex-col gap-1.5">
+              <div data-settings-item="plugins.spec" className="flex flex-col gap-1.5">
                 <label htmlFor="plugin-spec" className="typography-ui-label text-foreground">
                   {t('settings.plugins.page.field.spec')}
                 </label>
@@ -176,7 +176,7 @@ export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
                 )}
               </div>
 
-              <div className="flex flex-col gap-1.5">
+              <div data-settings-item="plugins.options" className="flex flex-col gap-1.5">
                 <label htmlFor="plugin-options" className="typography-ui-label text-foreground">
                   {t('settings.plugins.page.field.options')}
                 </label>
@@ -200,7 +200,7 @@ export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
 
           {tab === 'file' && (
             <>
-              <div className="flex flex-col gap-1.5">
+              <div data-settings-item="plugins.content" className="flex flex-col gap-1.5">
                 <label htmlFor="plugin-filename" className="typography-ui-label text-foreground">
                   {t('settings.plugins.page.field.fileName')}
                 </label>

packages/ui/src/components/sections/plugins/PluginsPage.tsx

@@ -213,7 +213,7 @@ export const PluginsPage: React.FC = () => {
 
         <RegistryBanner entryId={selectedEntry.id} spec={selectedEntry.spec} />
 
-        <div className="space-y-1.5">
+        <div data-settings-item="plugins.spec" className="space-y-1.5">
           <label className="typography-meta text-muted-foreground">
             {t('settings.plugins.page.field.spec')}
           </label>
@@ -228,7 +228,7 @@ export const PluginsPage: React.FC = () => {
           />
         </div>
 
-        <div className="space-y-1.5">
+        <div data-settings-item="plugins.options" className="space-y-1.5">
           <label className="typography-meta text-muted-foreground">
             {t('settings.plugins.page.field.options')}
           </label>
@@ -338,7 +338,7 @@ export const PluginsPage: React.FC = () => {
           </div>
         </div>
 
-        <div className="space-y-1.5">
+        <div data-settings-item="plugins.content" className="space-y-1.5">
           <label className="typography-meta text-muted-foreground">
             {t('settings.plugins.page.field.content')}
           </label>

packages/ui/src/components/sections/plugins/PluginsSidebar.tsx

@@ -68,6 +68,12 @@ export const PluginsSidebar: React.FC<PluginsSidebarProps> = ({
     void loadPlugins();
   }, [loadPlugins]);
 
+  React.useEffect(() => {
+    const handleOpenAdd = () => setIsAddOpen(true);
+    window.addEventListener('openchamber:settings-open-plugin-add', handleOpenAdd);
+    return () => window.removeEventListener('openchamber:settings-open-plugin-add', handleOpenAdd);
+  }, []);
+
   const updateCounts = React.useMemo(() => {
     const counts = { userEntries: 0, projectEntries: 0 };
     for (const entry of entries) {
@@ -282,6 +288,7 @@ export const PluginsSidebar: React.FC<PluginsSidebarProps> = ({
               <div className="flex items-center gap-1">
                 <Button
                   type="button"
+                  data-settings-item="plugins.create"
                   variant="ghost"
                   size="icon"
                   className="h-7 w-7 -my-1 text-muted-foreground"