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/ui/form-section.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface FormSectionProps {
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface FormGroupProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface FormRowProps {
+    children: React.ReactNode;
+    className?: string;
+    columns?: 1 | 2 | 3;
+}
+
+/**
+ * A card-like section for grouping related form fields.
+ */
+export function FormSection({ title, description, children, className }: FormSectionProps) {
+    return (
+        <div
+            className={cn('bg-card rounded-lg border border-border p-4 shadow-minimal', className)}
+        >
+            {(title || description) && (
+                <div className="mb-4">
+                    {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+                    {description && (
+                        <p className="text-xs text-muted-foreground mt-1">{description}</p>
+                    )}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+/**
+ * A group of form fields with vertical spacing.
+ */
+export function FormGroup({ children, className }: FormGroupProps) {
+    return <div className={cn('space-y-4', className)}>{children}</div>;
+}
+
+/**
+ * A row for side-by-side form fields.
+ */
+export function FormRow({ children, className, columns = 2 }: FormRowProps) {
+    const gridCols = {
+        1: 'grid-cols-1',
+        2: 'grid-cols-1 sm:grid-cols-2',
+        3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    };
+
+    return <div className={cn('grid gap-4', gridCols[columns], className)}>{children}</div>;
+}
+
+/**
+ * A divider line between form sections.
+ */
+export function FormDivider({ className }: { className?: string }) {
+    return <hr className={cn('border-t border-border my-4', className)} />;
+}
+
+/**
+ * An alert/info box for important messages within forms.
+ */
+export function FormAlert({
+    variant = 'info',
+    children,
+    className,
+}: {
+    variant?: 'info' | 'warning' | 'error' | 'success';
+    children: React.ReactNode;
+    className?: string;
+}) {
+    const variants = {
+        info: 'bg-primary/5 border-primary/20 text-foreground',
+        warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-500',
+        error: 'bg-destructive/10 border-destructive/20 text-destructive',
+        success: 'bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-500',
+    };
+
+    return (
+        <div className={cn('rounded-lg border px-4 py-3 text-sm', variants[variant], className)}>
+            {children}
+        </div>
+    );
+}