rax-flow 0.1.9 → 0.2.0

package/src/tui/components/MetricsPanel.tsx

@@ -1,31 +1,95 @@
-import React from "react";
+import React, { memo, useMemo } from "react";
 import { Box, Text } from "ink";
+import { tuiColors } from "../styles/index.js";
+import { AnimatedProgressBar, FitnessAnimator, Pulse } from "./animations/index.js";
+
+interface MetricsData {
+  sessions: number;
+  avgDuration: number;
+  successRate: number;
+  totalCost: number;
+  totalRetries?: number;
+  totalEscalations?: number;
+}
 
 interface MetricsPanelProps {
-  metrics: {
-    sessions: number;
-    avgDuration: number;
-    successRate: number;
-    totalCost: number;
-  };
+  metrics: MetricsData;
   fitness: number;
   isActive: boolean;
+  tick?: number;
+}
+
+interface AgentUsage {
+  name: string;
+  percent: number;
+}
+
+const TOP_AGENTS: AgentUsage[] = [
+  { name: "CodeGenerator", percent: 45 },
+  { name: "TestAgent", percent: 32 },
+  { name: "FixAgent", percent: 18 },
+];
+
+interface AnimatedMetricBarProps {
+  value: number;
+  max: number;
+  width?: number;
+  tick?: number;
+  animated?: boolean;
 }
 
-function ProgressBar({ value, max, width = 16 }: { value: number; max: number; width?: number }) {
-  const percent = Math.min((value / max) * 100, 100);
-  const filled = Math.round((percent / 100) * width);
-  const empty = width - filled;
-  const bar = "█".repeat(filled) + "░".repeat(empty);
+const AnimatedMetricBar = memo(function AnimatedMetricBar({ 
+  value, 
+  max, 
+  width = 16, 
+  tick, 
+  animated 
+}: AnimatedMetricBarProps) {
+  const percent = useMemo(() => Math.min((value / max) * 100, 100), [value, max]);
   return (
-    <Text color={percent >= 80 ? "green" : percent >= 50 ? "yellow" : "red"}>
-      {bar}
-    </Text>
+    <AnimatedProgressBar 
+      progress={percent} 
+      width={width} 
+      tick={tick || 0}
+      animated={animated}
+      showPercentage={false}
+    />
   );
-}
+});
+
+export const MetricsPanel = memo(function MetricsPanel({ 
+  metrics, 
+  fitness, 
+  isActive, 
+  tick = 0 
+}: MetricsPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  const fitnessColor = fitness >= 0.9 
+    ? tuiColors.success 
+    : fitness >= 0.7 
+      ? tuiColors.warning 
+      : tuiColors.error;
 
-export function MetricsPanel({ metrics, fitness, isActive }: MetricsPanelProps) {
-  const borderColor = isActive ? "#f97316" : "gray";
+  const showSuccessPulse = metrics.successRate >= 90;
+
+  const costStr = useMemo(() => metrics.totalCost.toFixed(4), [metrics.totalCost]);
+
+  const agentElements = useMemo(() => 
+    TOP_AGENTS.map((agent, idx) => (
+      <Box key={agent.name} flexDirection="row">
+        <Text color={tuiColors.textPrimary}>{agent.name.padEnd(14)}</Text>
+        <AnimatedMetricBar 
+          value={agent.percent} 
+          max={100} 
+          width={8} 
+          tick={tick}
+          animated={isActive && idx === 0}
+        />
+        <Text color={tuiColors.textTertiary}> {agent.percent}%</Text>
+      </Box>
+    )),
+    [tick, isActive]
+  );
 
   return (
     <Box
@@ -35,74 +99,51 @@ export function MetricsPanel({ metrics, fitness, isActive }: MetricsPanelProps)
       borderColor={borderColor}
       paddingX={1}
     >
-      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
-        <Text color="#f97316" bold>METRICS</Text>
-        {isActive && <Text color="yellow"> [ACTIF]</Text>}
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> PERFORMANCE </Text>
+        <Text color={tuiColors.textTertiary}>─────────────</Text>
       </Box>
 
       <Box flexDirection="column">
-        <Text color="gray" bold>PERFORMANCE</Text>
+        <Text color={tuiColors.textTertiary} bold>METRICS</Text>
         
         <Box flexDirection="row" marginTop={1}>
-          <Text color="white">Sessions: </Text>
-          <Text color="cyan" bold>{metrics.sessions}</Text>
+          <Text color={tuiColors.textSecondary}>Sessions:</Text>
+          <Text color={tuiColors.textPrimary} bold> {metrics.sessions}</Text>
         </Box>
 
         <Box flexDirection="row">
-          <Text color="white">Duration: </Text>
-          <Text color="cyan">{metrics.avgDuration}ms</Text>
+          <Text color={tuiColors.textSecondary}>Avg Duration:</Text>
+          <Text color={tuiColors.textPrimary}> {metrics.avgDuration}ms</Text>
         </Box>
 
         <Box flexDirection="row">
-          <Text color="white">Success: </Text>
-          <Text color="green">{metrics.successRate}%</Text>
-          <Text color="gray"> </Text>
-          <ProgressBar value={metrics.successRate} max={100} width={8} />
+          <Text color={tuiColors.textSecondary}>Success Rate:</Text>
+          <Text color={tuiColors.success}> {metrics.successRate}%</Text>
+          {showSuccessPulse && <Pulse interval={1000} color={tuiColors.success} type="breath" />}
         </Box>
 
         <Box flexDirection="row">
-          <Text color="white">Cost: </Text>
-          <Text color="yellow">${metrics.totalCost.toFixed(4)}</Text>
+          <Text color={tuiColors.textSecondary}>Cost:</Text>
+          <Text color={tuiColors.warning}> ${costStr}</Text>
         </Box>
       </Box>
 
       <Box flexDirection="column" marginTop={1}>
-        <Text color="gray" bold>FITNESS</Text>
+        <Text color={tuiColors.textTertiary} bold>FITNESS SCORE</Text>
+        <FitnessAnimator value={fitness} />
         <Box flexDirection="row">
-          <Text color={fitness >= 0.9 ? "green" : fitness >= 0.7 ? "yellow" : "red"} bold>
-            {fitness.toFixed(2)}
-          </Text>
-          <Text color="gray"> </Text>
-          <ProgressBar value={fitness} max={1} width={12} />
+          <AnimatedMetricBar value={fitness} max={1} width={12} tick={tick} animated={isActive} />
         </Box>
-        <Text color="gray">
-          {fitness >= 0.9 ? "[OPTIMAL]" : fitness >= 0.7 ? "[GOOD]" : "[IMPROVING]"}
-        </Text>
       </Box>
 
       <Box flexDirection="column" marginTop={1}>
-        <Text color="gray" bold>TOP AGENTS</Text>
+        <Text color={tuiColors.textTertiary} bold>TOP AGENTS</Text>
         <Box flexDirection="column" marginTop={1}>
-          <Box flexDirection="row">
-            <Text color="white">CodeGenerator</Text>
-            <Text color="gray"> </Text>
-            <ProgressBar value={45} max={100} width={8} />
-            <Text color="gray"> 45%</Text>
-          </Box>
-          <Box flexDirection="row">
-            <Text color="white">TestAgent</Text>
-            <Text color="gray"> </Text>
-            <ProgressBar value={32} max={100} width={8} />
-            <Text color="gray"> 32%</Text>
-          </Box>
-          <Box flexDirection="row">
-            <Text color="white">FixAgent</Text>
-            <Text color="gray"> </Text>
-            <ProgressBar value={18} max={100} width={8} />
-            <Text color="gray"> 18%</Text>
-          </Box>
+          {agentElements}
         </Box>
       </Box>
     </Box>
   );
-}
+});

package/src/tui/components/StatusPanel.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { memo, useMemo } from "react";
 import { Box, Text } from "ink";
+import { tuiColors, getStatusIndicator, getProviderTag } from "../styles/index.js";
+import { Pulse, FitnessAnimator, StatusAnimator } from "./animations/index.js";
 
 interface Agent {
   name: string;
@@ -20,71 +22,116 @@ interface StatusPanelProps {
   fitness: number;
   currentWorkflow: string | null;
   isActive: boolean;
+  tick?: number;
 }
 
-const statusIcons: Record<string, { icon: string; color: string }> = {
-  idle: { icon: "○", color: "gray" },
-  running: { icon: "▶", color: "yellow" },
-  queued: { icon: "◐", color: "cyan" },
-  done: { icon: "●", color: "green" },
-};
+interface AgentRowProps {
+  agent: Agent;
+  tick: number;
+}
+
+const AgentRow = memo(function AgentRow({ agent, tick }: AgentRowProps) {
+  const statusInfo = useMemo(() => getStatusIndicator(agent.status), [agent.status]);
+  const providerInfo = useMemo(() => getProviderTag(agent.provider), [agent.provider]);
 
-function AgentRow({ agent }: { agent: Agent }) {
-  const { icon, color } = statusIcons[agent.status];
   return (
-    <Box flexDirection="row" justifyContent="space-between">
-      <Text color={color}>{icon}</Text>
-      <Text color="white">{agent.name.slice(0, 12).padEnd(12)}</Text>
-      <Text color="gray">[{agent.provider}]</Text>
+    <Box flexDirection="row">
+      {agent.status === "running" ? (
+        <StatusAnimator status="running" showLabel={false} />
+      ) : (
+        <Text color={statusInfo.color}>{statusInfo.icon}</Text>
+      )}
+      <Text color={tuiColors.textPrimary}> {agent.name.slice(0, 14).padEnd(14)}</Text>
+      <Text color={tuiColors.textTertiary}> {providerInfo.code}</Text>
+      <Text color={tuiColors.textSecondary}> {agent.status.toUpperCase().padEnd(8)}</Text>
     </Box>
   );
+});
+
+interface ProviderRowProps {
+  provider: Provider;
+  tick: number;
 }
 
-function ProviderRow({ provider }: { provider: Provider }) {
+const ProviderRow = memo(function ProviderRow({ provider, tick }: ProviderRowProps) {
+  const isActive = provider.status === "active";
+  const providerInfo = useMemo(() => getProviderTag(provider.name), [provider.name]);
+
   return (
-    <Box flexDirection="row" justifyContent="space-between">
-      <Text color={provider.status === "active" ? "green" : "gray"}>
-        {provider.status === "active" ? "●" : "○"}
-      </Text>
-      <Text color="white">{provider.name}</Text>
-      <Text color="gray">{provider.latency > 0 ? `${provider.latency}ms` : "--"}</Text>
+    <Box flexDirection="row">
+      {isActive ? (
+        <Pulse interval={800} color={tuiColors.success} type="breath" />
+      ) : (
+        <Text color={tuiColors.textTertiary}>○</Text>
+      )}
+      <Text color={tuiColors.textPrimary}> {provider.name.padEnd(12)}</Text>
+      <Text color={tuiColors.textTertiary}> {provider.latency > 0 ? `${provider.latency}ms`.padStart(6) : "--".padStart(6)}</Text>
     </Box>
   );
-}
+});
+
+export const StatusPanel = memo(function StatusPanel({ 
+  agents, 
+  providers, 
+  fitness, 
+  currentWorkflow, 
+  isActive, 
+  tick = 0 
+}: StatusPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+
+  const activeAgents = useMemo(() => 
+    agents.filter(a => a.status === "running" || a.status === "queued").slice(0, 4),
+    [agents]
+  );
+
+  const hasNoActiveAgents = activeAgents.length === 0;
 
-export function StatusPanel({ agents, providers, fitness, currentWorkflow, isActive }: StatusPanelProps) {
-  const fitnessColor = fitness >= 0.9 ? "green" : fitness >= 0.7 ? "yellow" : "red";
-  const borderColor = isActive ? "#f97316" : "gray";
+  const workflowDisplay = useMemo(() => 
+    currentWorkflow ? `▶ ${currentWorkflow.slice(0, 20)}...` : "○ None",
+    [currentWorkflow]
+  );
 
   return (
     <Box flexDirection="column" width={30} borderStyle="single" borderColor={borderColor}>
-      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
-        <Text color="#f97316" bold>STATUS</Text>
-        {isActive && <Text color="yellow"> [ACTIF]</Text>}
+      <Box paddingX={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> SYSTEM_STATUS </Text>
+        <Text color={tuiColors.textTertiary}>───────────</Text>
       </Box>
 
       <Box flexDirection="column" paddingX={1}>
-        <Text color="gray" bold>WORKFLOW</Text>
-        <Text color="white">{currentWorkflow || "Aucun"}</Text>
+        <Text color={tuiColors.textTertiary} bold>ORCHESTRATOR</Text>
         <Box flexDirection="row">
-          <Text color="gray">Fitness: </Text>
-          <Text color={fitnessColor} bold>{fitness.toFixed(2)}</Text>
+          <Text color={tuiColors.textSecondary}>Status:</Text>
+          <Text color={tuiColors.success}> </Text>
+          <Pulse interval={600} color={tuiColors.success} type="breath" />
+          <Text color={tuiColors.success}> ACTIVE</Text>
         </Box>
       </Box>
 
       <Box flexDirection="column" paddingX={1} marginTop={1}>
-        <Text color="gray" bold>AGENTS</Text>
-        {agents.slice(0, 6).map((agent) => (
-          <AgentRow key={agent.name} agent={agent} />
+        <Text color={tuiColors.textTertiary} bold>WORKFLOW</Text>
+        <Text color={tuiColors.textPrimary}>{workflowDisplay}</Text>
+        <FitnessAnimator value={fitness} />
+      </Box>
+
+      <Box flexDirection="column" paddingX={1} marginTop={1}>
+        <Text color={tuiColors.textTertiary} bold>ACTIVE AGENTS</Text>
+        {activeAgents.map((agent) => (
+          <AgentRow key={agent.name} agent={agent} tick={tick} />
         ))}
+        {hasNoActiveAgents && (
+          <Text color={tuiColors.textQuaternary}>  ○ All idle</Text>
+        )}
       </Box>
 
       <Box flexDirection="column" paddingX={1} marginTop={1}>
-        <Text color="gray" bold>PROVIDERS</Text>
+        <Text color={tuiColors.textTertiary} bold>PROVIDERS</Text>
         {providers.map((provider) => (
-          <ProviderRow key={provider.name} provider={provider} />
+          <ProviderRow key={provider.name} provider={provider} tick={tick} />
         ))}
       </Box>
     </Box>
   );
-}
+});

package/src/tui/components/TaskTree.tsx

@@ -0,0 +1,159 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, treeChars } from "../styles/index.js";
+import { AgentStateIcon, AgentState } from "./AgentStateIcon.js";
+import { AnimatedBranch } from "./AnimatedBranch.js";
+
+export interface TaskNode {
+  id: string;
+  name: string;
+  state: AgentState;
+  level: number;
+  detail?: string;
+  children?: TaskNode[];
+  executionTime?: number;
+  subtasks?: string[];
+}
+
+interface TaskNodeItemProps {
+  node: TaskNode;
+  tick: number;
+  isLast: boolean;
+  showDetail?: boolean;
+}
+
+const TaskNodeItem = memo(function TaskNodeItem({ node, tick, isLast, showDetail = true }: TaskNodeItemProps) {
+  const indent = useMemo(() => "  ".repeat(node.level), [node.level]);
+  const prefix = isLast ? treeChars.lastBranch : treeChars.branch;
+  const timeStr = node.executionTime ? `${node.executionTime.toFixed(1)}s` : "";
+  const paddedName = useMemo(() => node.name.padEnd(20), [node.name]);
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row">
+        <Text color={tuiColors.textTertiary}>{indent}{prefix} </Text>
+        <Box flexDirection="row">
+          <Text color={tuiColors.textSecondary}>[</Text>
+          <AgentStateIcon state={node.state} tick={tick} />
+          <Text color={tuiColors.textSecondary}>]</Text>
+        </Box>
+        <Text color={tuiColors.textPrimary}> {paddedName}</Text>
+        {timeStr && (
+          <Text color={tuiColors.textTertiary}> ● {timeStr}</Text>
+        )}
+      </Box>
+      {showDetail && node.detail && (
+        <Box flexDirection="row">
+          <Text color={tuiColors.textTertiary}>{indent}    └── </Text>
+          <Text color={tuiColors.textSecondary}>{node.detail}</Text>
+        </Box>
+      )}
+      {showDetail && node.subtasks && node.subtasks.length > 0 && (
+        <Box flexDirection="column">
+          {node.subtasks.map((subtask, idx) => (
+            <Box key={idx} flexDirection="row">
+              <Text color={tuiColors.textTertiary}>{indent}      {idx === node.subtasks!.length - 1 ? '└──' : '├──'} </Text>
+              <Text color={tuiColors.textTertiary}>{subtask}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+export interface TaskTreeProps {
+  rootTask: string;
+  tasks: TaskNode[];
+  tick: number;
+  isActive?: boolean;
+  maxDisplay?: number;
+}
+
+export const TaskTree = memo(function TaskTree({ rootTask, tasks, tick, isActive = false, maxDisplay = 15 }: TaskTreeProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  const displayTasks = useMemo(() => tasks.slice(0, maxDisplay), [tasks, maxDisplay]);
+  const hiddenCount = tasks.length - maxDisplay;
+
+  const taskElements = useMemo(() => 
+    displayTasks.map((task, idx) => (
+      <TaskNodeItem
+        key={task.id}
+        node={task}
+        tick={tick}
+        isLast={idx === displayTasks.length - 1 && hiddenCount === 0}
+      />
+    )),
+    [displayTasks, tick, hiddenCount]
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor={borderColor} paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> TASK_TREE </Text>
+        <Text color={tuiColors.textTertiary}>────────────────────</Text>
+      </Box>
+
+      <Box flexDirection="row">
+        <Text color={tuiColors.textPrimary} bold>■ </Text>
+        <Text color={tuiColors.textSecondary}>root: {rootTask}</Text>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        <AnimatedBranch type="vertical" tick={tick} animated={isActive} />
+      </Box>
+
+      <Box flexDirection="column">
+        {taskElements}
+        {hiddenCount > 0 && (
+          <Box flexDirection="row">
+            <Text color={tuiColors.textTertiary}>  └── +{hiddenCount} more tasks...</Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+interface TaskHierarchyProps {
+  tasks: TaskNode[];
+  tick: number;
+  expandedIds?: Set<string>;
+}
+
+export const TaskHierarchy = memo(function TaskHierarchy({ tasks, tick, expandedIds = new Set() }: TaskHierarchyProps) {
+  const renderNode = (node: TaskNode, isLast: boolean): React.ReactNode => {
+    const hasChildren = (node.children?.length ?? 0) > 0;
+    const isExpanded = expandedIds.has(node.id);
+
+    return (
+      <Box key={node.id} flexDirection="column">
+        <TaskNodeItem
+          node={node}
+          tick={tick}
+          isLast={isLast}
+          showDetail={isExpanded}
+        />
+        {hasChildren && isExpanded && (
+          <Box flexDirection="column" marginLeft={2}>
+            {node.children!.map((child, idx) => (
+              <Box key={child.id} flexDirection="column">
+                <Box flexDirection="row">
+                  <AnimatedBranch type="vertical" tick={tick} />
+                </Box>
+                {renderNode(child, idx === node.children!.length - 1)}
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+    );
+  };
+
+  return (
+    <Box flexDirection="column">
+      {tasks.map((task, idx) => renderNode(task, idx === tasks.length - 1))}
+    </Box>
+  );
+});