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/TodoPanel.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+/**
+ * TodoPanel Component (WebUI)
+ * Displays agent's todo list with progress tracking
+ */
+
+import React from 'react';
+import { CheckCircle2, Circle } from 'lucide-react';
+import { Card } from './ui/card';
+import { cn } from '@/lib/utils';
+import { useTodoStore, type Todo } from '@/lib/stores/todoStore';
+
+interface TodoPanelProps {
+    sessionId: string;
+}
+
+// Stable empty array to avoid infinite re-render loop
+const EMPTY_TODOS: Todo[] = [];
+
+/**
+ * Compact todo panel showing task progress
+ * Shows up to 10 tasks with minimal spacing
+ */
+export function TodoPanel({ sessionId }: TodoPanelProps) {
+    // Select directly from state, use stable empty array fallback outside selector
+    const todos = useTodoStore((state) => state.sessions.get(sessionId)?.todos) ?? EMPTY_TODOS;
+
+    if (todos.length === 0) {
+        return null;
+    }
+
+    const completedCount = todos.filter((t) => t.status === 'completed').length;
+    const totalCount = todos.length;
+
+    // Show up to 10 tasks total
+    const visibleTodos = todos.slice(0, 10);
+    const hasMore = todos.length > 10;
+
+    return (
+        <Card className="border-l-4 border-l-amber-500 dark:border-l-amber-600 border-t border-r border-b border-border bg-card/50 backdrop-blur-sm shadow-sm">
+            <div className="p-3 space-y-2.5">
+                {/* Header with progress */}
+                <div className="flex items-center justify-between border-b border-amber-200 dark:border-amber-900/50 pb-2">
+                    <span className="text-sm font-semibold text-foreground tracking-tight">
+                        Tasks in Progress
+                    </span>
+                    <div className="flex items-center gap-1.5">
+                        <div className="h-1.5 w-16 bg-muted rounded-full overflow-hidden">
+                            <div
+                                className="h-full bg-gradient-to-r from-amber-500 to-orange-500 dark:from-amber-600 dark:to-orange-600 transition-all duration-300"
+                                style={{
+                                    width: `${totalCount > 0 ? (completedCount / totalCount) * 100 : 0}%`,
+                                }}
+                            />
+                        </div>
+                        <span className="text-xs font-medium text-muted-foreground tabular-nums">
+                            {completedCount}/{totalCount}
+                        </span>
+                    </div>
+                </div>
+
+                {/* All tasks */}
+                <div className="space-y-1.5">
+                    {visibleTodos.map((todo) => {
+                        const isInProgress = todo.status === 'in_progress';
+                        const isCompleted = todo.status === 'completed';
+                        return (
+                            <div key={todo.id} className="flex items-start gap-2.5 group">
+                                <div className="mt-0.5">
+                                    {isCompleted ? (
+                                        <CheckCircle2 className="h-3.5 w-3.5 text-green-600 dark:text-green-500" />
+                                    ) : isInProgress ? (
+                                        <div className="h-3.5 w-3.5 rounded-full border-2 border-amber-500 dark:border-amber-600 bg-amber-500/20 dark:bg-amber-600/20 flex items-center justify-center">
+                                            <div className="h-1.5 w-1.5 rounded-full bg-amber-500 dark:bg-amber-600" />
+                                        </div>
+                                    ) : (
+                                        <Circle className="h-3.5 w-3.5 text-muted-foreground/40" />
+                                    )}
+                                </div>
+                                <span
+                                    className={cn(
+                                        'text-sm leading-relaxed flex-1',
+                                        isCompleted && 'line-through text-muted-foreground/60',
+                                        isInProgress && 'text-foreground font-medium',
+                                        !isCompleted && !isInProgress && 'text-muted-foreground'
+                                    )}
+                                >
+                                    {isInProgress ? todo.activeForm : todo.content}
+                                </span>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* More tasks indicator */}
+                {hasMore && (
+                    <div className="pt-1 border-t border-border/50">
+                        <span className="text-xs text-muted-foreground/70 italic">
+                            +{todos.length - 10} more tasks...
+                        </span>
+                    </div>
+                )}
+            </div>
+        </Card>
+    );
+}