feat: Add intelligent auto-router and enhanced integrations

- Add intelligent-router.sh hook for automatic agent routing
- Add AUTO-TRIGGER-SUMMARY.md documentation
- Add FINAL-INTEGRATION-SUMMARY.md documentation
- Complete Prometheus integration (6 commands + 4 tools)
- Complete Dexto integration (12 commands + 5 tools)
- Enhanced Ralph with access to all agents
- Fix /clawd command (removed disable-model-invocation)
- Update hooks.json to v5 with intelligent routing
- 291 total skills now available
- All 21 commands with automatic routing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

dexto/packages/webui/components/settings/SettingsPanel.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { SettingsNavigation, type SettingsSection } from './SettingsNavigation';
+import { ApiKeysSection } from './sections/ApiKeysSection';
+import { VoiceSection } from './sections/VoiceSection';
+import { AppearanceSection } from './sections/AppearanceSection';
+
+type SettingsPanelProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+const sectionTitles: Record<SettingsSection, string> = {
+    'api-keys': 'API Keys',
+    voice: 'Voice & TTS',
+    appearance: 'Appearance',
+};
+
+const sectionDescriptions: Record<SettingsSection, string> = {
+    'api-keys': 'Manage API keys for LLM providers',
+    voice: 'Configure text-to-speech settings',
+    appearance: 'Customize theme and UI preferences',
+};
+
+export function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
+    const [activeSection, setActiveSection] = useState<SettingsSection>('api-keys');
+
+    const renderSection = () => {
+        switch (activeSection) {
+            case 'api-keys':
+                return <ApiKeysSection />;
+            case 'voice':
+                return <VoiceSection active={isOpen} />;
+            case 'appearance':
+                return <AppearanceSection />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <DialogContent
+                className="max-w-4xl! w-[90vw] h-[85vh] p-0! gap-0! flex flex-col"
+                hideCloseButton
+            >
+                {/* Visually hidden title for accessibility */}
+                <DialogTitle className="sr-only">Settings</DialogTitle>
+
+                <div className="flex flex-1 min-h-0">
+                    {/* Left Navigation - hidden on mobile, shown on md+ */}
+                    <div className="hidden md:flex md:flex-col w-56 border-r border-border bg-muted/30 shrink-0">
+                        <SettingsNavigation
+                            activeSection={activeSection}
+                            onSectionChange={setActiveSection}
+                            onClose={onClose}
+                        />
+                    </div>
+
+                    {/* Right Content Area */}
+                    <div className="flex-1 flex flex-col min-h-0 min-w-0">
+                        {/* Mobile header with navigation */}
+                        <div className="md:hidden flex items-center gap-2 px-4 py-3 border-b border-border shrink-0">
+                            <SettingsNavigation
+                                activeSection={activeSection}
+                                onSectionChange={setActiveSection}
+                                onClose={onClose}
+                                variant="mobile"
+                            />
+                        </div>
+
+                        {/* Desktop header */}
+                        <div className="hidden md:block px-6 py-4 border-b border-border shrink-0">
+                            <h2 className="text-lg font-semibold">
+                                {sectionTitles[activeSection]}
+                            </h2>
+                            <p className="text-sm text-muted-foreground mt-1">
+                                {sectionDescriptions[activeSection]}
+                            </p>
+                        </div>
+
+                        {/* Section content - scrollable */}
+                        <div className="flex-1 min-h-0 overflow-y-auto px-6 py-4">
+                            {renderSection()}
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}