b52318eeae
- 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>
108 lines
4.8 KiB
TypeScript
108 lines
4.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|