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/providers/ProvidersPage.tsx

@@ -500,7 +500,7 @@ export const ProvidersPage: React.FC = () => {
     return (
       <ScrollableOverlay outerClassName="h-full" className="w-full">
         <div className="mx-auto w-full max-w-3xl p-3 sm:p-6 sm:pt-8">
-          <div className="mb-4">
+          <div data-settings-item="providers.connect" className="mb-4">
             <h1 className="typography-ui-header font-semibold text-foreground">{t('settings.providers.page.connect.title')}</h1>
           </div>
 
@@ -599,7 +599,7 @@ export const ProvidersPage: React.FC = () => {
           </div>
 
           {candidateProviderId && (
-            <div className="mb-8">
+            <div data-settings-item="providers.auth" className="mb-8">
               <div className="mb-1 px-1">
                 <h2 className="typography-ui-header font-medium text-foreground">{t('settings.providers.page.auth.title')}</h2>
               </div>
@@ -787,7 +787,7 @@ export const ProvidersPage: React.FC = () => {
         </div>
 
         {/* Authentication */}
-        <div className="mb-8">
+        <div data-settings-item="providers.auth" className="mb-8">
           <div className="mb-1 px-1 flex items-center justify-between gap-2">
             <h3 className="typography-ui-header font-medium text-foreground">{t('settings.providers.page.auth.title')}</h3>
             <Button
@@ -934,7 +934,7 @@ export const ProvidersPage: React.FC = () => {
         </div>
 
         {/* Connection Details */}
-        <div className="mb-8">
+        <div data-settings-item="providers.connection-details" className="mb-8">
           <div className="mb-1 px-1">
             <h3 className="typography-ui-header font-medium text-foreground">{t('settings.providers.page.connectionDetails.title')}</h3>
           </div>
@@ -971,7 +971,7 @@ export const ProvidersPage: React.FC = () => {
         </div>
 
         {/* Models */}
-        <div className="mb-8">
+        <div data-settings-item="providers.models" className="mb-8">
           <div className="mb-1 px-1 flex items-center justify-between gap-2">
             <h3 className="typography-ui-header font-medium text-foreground">
               {t('settings.providers.page.models.title')}