refactor(settings): restructure settings page for better UX (tinyhumansai#494)

* refactor(settings): restructure settings page for better UX

Reorganize settings into 4 clean sections (Account & Billing, Features,
AI & Models, Developer Options) and extract developer-oriented options
from user-facing panels into dedicated debug panels.

- Merge Account & Security + Billing into Account & Billing section
- Rename Automation & Channels to Features; add Tools, Voice here
- Simplify AI & Skills to AI & Models (just Local AI Model)
- Expand Developer Options from 4 to 10 items
- Create 4 debug panels: ScreenAwarenessDebug, AutocompleteDebug,
  VoiceDebug, LocalModelDebug
- Simplify 4 user panels by stripping dev knobs (FPS, debounce timers,
  test harnesses, diagnostics, etc.)
- Delete AccessibilityPanel (merged into Screen Awareness)
- Add "Advanced settings" link in each simplified panel
- Update navigation breadcrumbs for new hierarchy

* fix(settings): address PR review feedback on debug panels

- Guard null result from openhumanAutocompleteDebugFocus()
- Block save/start until full config loaded in AutocompletePanel
- Separate poll errors from action errors in LocalModelDebugPanel
- Replace useEffect setState with render-time one-shot init in
  ScreenAwarenessDebugPanel to avoid set-state-in-effect lint rule
- Remove unused openhumanLocalAiAssetsStatus call from VoiceDebugPanel

* fix(settings): update tests for simplified panel structure

- Update ScreenIntelligencePanel test for renamed title, button text,
  and platform message
- Rewrite AutocompletePanel test for simplified panel (dev options moved
  to AutocompleteDebugPanel)

Author: graycyrus

app/src/components/settings/SettingsHome.tsx

@@ -78,54 +78,42 @@ const SettingsHome = () => {
   const groupedMenuItems = [
     {
       id: 'account',
-      title: 'Account & Security',
-      description: 'Recovery phrase, team management, and linked account access',
-      icon: (
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M12 5v14" />
-        </svg>
-      ),
-      onClick: () => navigateToSettings('account'),
-      dangerous: false,
-    },
-    {
-      id: 'billing',
-      title: 'Billing & Usage',
-      description: 'Subscription plan, pay-as-you-go credits, and payment methods',
+      title: 'Account & Billing',
+      description: 'Recovery phrase, team, connections, billing, and privacy',
       icon: (
         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={2}
-            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3 3v8a3 3 0 003 3z"
+            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
           />
         </svg>
       ),
-      onClick: () => navigateToSettings('billing'),
+      onClick: () => navigateToSettings('account'),
       dangerous: false,
     },
     {
-      id: 'automation',
-      title: 'Automation & Channels',
-      description: 'Accessibility, screen intelligence, messaging, autocomplete, and cron jobs',
+      id: 'features',
+      title: 'Features',
+      description: 'Screen awareness, autocomplete, voice, messaging, and tools',
       icon: (
         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={2}
-            d="M3 5h18v12H3zM8 21h8m-4-4v4"
+            d="M13 10V3L4 14h7v7l9-11h-7z"
           />
         </svg>
       ),
-      onClick: () => navigateToSettings('automation'),
+      onClick: () => navigateToSettings('features'),
       dangerous: false,
     },
     {
-      id: 'ai-tools',
-      title: 'AI & Skills',
-      description: 'Local model runtime, AI configuration, and skills behavior',
+      id: 'ai-models',
+      title: 'AI & Models',
+      description: 'Local AI model setup and downloads',
       icon: (
         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
@@ -136,13 +124,13 @@ const SettingsHome = () => {
           />
         </svg>
       ),
-      onClick: () => navigateToSettings('ai-tools'),
+      onClick: () => navigateToSettings('ai-models'),
       dangerous: false,
     },
     {
       id: 'developer-options',
       title: 'Developer Options',
-      description: 'Diagnostic tools, console access, webhooks, and memory inspection',
+      description: 'Diagnostics, debug panels, webhooks, and memory inspection',
       icon: (
         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path

app/src/components/settings/hooks/useSettingsNavigation.ts

@@ -4,8 +4,8 @@ import { useLocation, useNavigate } from 'react-router-dom';
 export type SettingsRoute =
   | 'home'
   | 'account'
-  | 'automation'
-  | 'ai-tools'
+  | 'features'
+  | 'ai-models'
   | 'connections'
   | 'messaging'
   | 'cron-jobs'
@@ -17,15 +17,19 @@ export type SettingsRoute =
   | 'team-members'
   | 'team-invites'
   | 'developer-options'
-  | 'accessibility'
   | 'ai'
   | 'local-model'
   | 'voice'
+  | 'tools'
   | 'memory-data'
   | 'memory-debug'
   | 'recovery-phrase'
   | 'webhooks-debug'
-  | 'agent-chat';
+  | 'agent-chat'
+  | 'screen-awareness-debug'
+  | 'autocomplete-debug'
+  | 'voice-debug'
+  | 'local-model-debug';
 
 export interface BreadcrumbItem {
   label: string;
@@ -69,20 +73,24 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
     if (path.includes('/settings/team/invites')) return 'team-invites';
     if (path.includes('/settings/team')) return 'team';
     if (path.includes('/settings/account')) return 'account';
-    if (path.includes('/settings/automation')) return 'automation';
-    if (path.includes('/settings/ai-tools')) return 'ai-tools';
+    if (path.includes('/settings/features')) return 'features';
+    if (path.includes('/settings/ai-models')) return 'ai-models';
     if (path.includes('/settings/connections')) return 'connections';
     if (path.includes('/settings/messaging')) return 'messaging';
     if (path.includes('/settings/cron-jobs')) return 'cron-jobs';
+    if (path.includes('/settings/screen-awareness-debug')) return 'screen-awareness-debug';
     if (path.includes('/settings/screen-intelligence')) return 'screen-intelligence';
+    if (path.includes('/settings/autocomplete-debug')) return 'autocomplete-debug';
     if (path.includes('/settings/autocomplete')) return 'autocomplete';
     if (path.includes('/settings/privacy')) return 'privacy';
     if (path.includes('/settings/billing')) return 'billing';
     if (path.includes('/settings/developer-options')) return 'developer-options';
-    if (path.includes('/settings/accessibility')) return 'accessibility';
     if (path.includes('/settings/ai')) return 'ai';
+    if (path.includes('/settings/local-model-debug')) return 'local-model-debug';
     if (path.includes('/settings/local-model')) return 'local-model';
+    if (path.includes('/settings/voice-debug')) return 'voice-debug';
     if (path.includes('/settings/voice')) return 'voice';
+    if (path.includes('/settings/tools')) return 'tools';
     if (path.includes('/settings/memory-data')) return 'memory-data';
     if (path.includes('/settings/memory-debug')) return 'memory-debug';
     if (path.includes('/settings/webhooks-debug')) return 'webhooks-debug';
@@ -126,18 +134,18 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
   const settingsCrumb: BreadcrumbItem = { label: 'Settings', onClick: () => navigate('/settings') };
 
   const accountCrumb: BreadcrumbItem = {
-    label: 'Account & Security',
+    label: 'Account & Billing',
     onClick: () => navigate('/settings/account'),
   };
 
-  const automationCrumb: BreadcrumbItem = {
-    label: 'Automation & Channels',
-    onClick: () => navigate('/settings/automation'),
+  const featuresCrumb: BreadcrumbItem = {
+    label: 'Features',
+    onClick: () => navigate('/settings/features'),
   };
 
-  const aiToolsCrumb: BreadcrumbItem = {
-    label: 'AI & Skills',
-    onClick: () => navigate('/settings/ai-tools'),
+  const aiModelsCrumb: BreadcrumbItem = {
+    label: 'AI & Models',
+    onClick: () => navigate('/settings/ai-models'),
   };
 
   const teamCrumb: BreadcrumbItem = { label: 'Team', onClick: () => navigate('/settings/team') };
@@ -151,48 +159,49 @@ export const useSettingsNavigation = (): SettingsNavigationHook => {
     switch (currentRoute) {
       // Section pages
       case 'account':
-      case 'automation':
-      case 'ai-tools':
+      case 'features':
+      case 'ai-models':
         return [settingsCrumb];
 
-      // Top-level billing leaf (promoted out of Account & Security)
-      case 'billing':
-        return [settingsCrumb];
-
-      // Leaf panels under account
+      // Leaf panels under account & billing
       case 'recovery-phrase':
       case 'team':
       case 'connections':
+      case 'billing':
+      case 'privacy':
         return [settingsCrumb, accountCrumb];
 
-      // Leaf panels under automation
-      case 'accessibility':
+      // Leaf panels under features
       case 'screen-intelligence':
       case 'autocomplete':
+      case 'voice':
       case 'messaging':
-      case 'cron-jobs':
-        return [settingsCrumb, automationCrumb];
+      case 'tools':
+        return [settingsCrumb, featuresCrumb];
 
-      // Leaf panels under ai-tools
-      case 'voice':
+      // Leaf panels under AI & Models
       case 'local-model':
-      case 'ai':
-        return [settingsCrumb, aiToolsCrumb];
+        return [settingsCrumb, aiModelsCrumb];
 
       // Team sub-pages
       case 'team-members':
       case 'team-invites':
         return [settingsCrumb, accountCrumb, teamCrumb];
 
       // Developer sub-pages
+      case 'ai':
+      case 'agent-chat':
+      case 'cron-jobs':
+      case 'screen-awareness-debug':
+      case 'autocomplete-debug':
+      case 'voice-debug':
+      case 'local-model-debug':
       case 'webhooks-debug':
       case 'memory-data':
       case 'memory-debug':
         return [settingsCrumb, developerCrumb];
 
-      // Other leaf pages
-      case 'privacy':
-      case 'agent-chat':
+      // Developer options section page
       case 'developer-options':
         return [settingsCrumb];