rax-flow 0.1.9 → 0.2.0

package/src/tui/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Box, Text, useApp, useInput } from "ink";
 import { Header } from "./components/Header.js";
 import { ChatPanel } from "./components/ChatPanel.js";
@@ -14,33 +14,43 @@ import { useAppState } from "./hooks/useAppState.js";
 type ActivePanel = "chat" | "dag" | "status" | "logs" | "metrics" | "memory";
 
 const PANEL_ORDER: ActivePanel[] = ["chat", "dag", "status", "logs", "metrics", "memory"];
+const TICK_INTERVAL = 200;
 
-export function App() {
+export const App = React.memo(function App() {
   const { exit } = useApp();
   const { state, processCommand } = useAppState();
   const [activePanel, setActivePanel] = useState<ActivePanel>("chat");
   const [showHelp, setShowHelp] = useState(false);
   const [tick, setTick] = useState(0);
   const [viewMode, setViewMode] = useState<"full" | "compact">("full");
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    const interval = setInterval(() => {
+    intervalRef.current = setInterval(() => {
       setTick((t) => t + 1);
-    }, 100);
-    return () => clearInterval(interval);
+    }, TICK_INTERVAL);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  const handleTab = useCallback(() => {
+    setActivePanel((current) => {
+      const currentIndex = PANEL_ORDER.indexOf(current);
+      return PANEL_ORDER[(currentIndex + 1) % PANEL_ORDER.length];
+    });
   }, []);
 
   useInput((input, key) => {
-    if (key.ctrl && input === "c") {
-      exit();
-    }
-    if (key.ctrl && input === "d") {
+    if (key.ctrl && (input === "c" || input === "d")) {
       exit();
+      return;
     }
     if (key.escape) {
       if (showHelp) {
         setShowHelp(false);
       }
+      return;
     }
     if (input === "?" && !showHelp) {
       setShowHelp(true);
@@ -49,17 +59,16 @@ export function App() {
     if (showHelp) return;
 
     if (key.tab) {
-      const currentIndex = PANEL_ORDER.indexOf(activePanel);
-      const nextIndex = (currentIndex + 1) % PANEL_ORDER.length;
-      setActivePanel(PANEL_ORDER[nextIndex]);
+      handleTab();
+      return;
     }
 
     if (key.leftArrow) {
-      setViewMode(viewMode === "full" ? "compact" : "full");
+      setViewMode((v) => (v === "full" ? "compact" : "full"));
     }
   });
 
-  const handleSubmit = (input: string) => {
+  const handleSubmit = useCallback((input: string) => {
     const trimmed = input.trim();
     if (!trimmed) return;
 
@@ -69,78 +78,100 @@ export function App() {
     }
 
     if (trimmed === "?" || trimmed === "/help") {
-      setShowHelp(!showHelp);
+      setShowHelp((s) => !s);
       return;
     }
 
     processCommand(trimmed);
-  };
+  }, [exit, processCommand]);
+
+  const handleDismissHelp = useCallback(() => setShowHelp(false), []);
+
+  const headerProps = useMemo(() => ({
+    projectName: state.projectName,
+    agentCount: state.agentCount,
+    provider: state.provider,
+    status: state.status,
+    tick,
+    activePanel,
+  }), [state.projectName, state.agentCount, state.provider, state.status, tick, activePanel]);
+
+  const chatPanelProps = useMemo(() => ({
+    messages: state.messages,
+    isProcessing: state.isProcessing,
+    isActive: activePanel === "chat",
+  }), [state.messages, state.isProcessing, activePanel]);
+
+  const dagPanelProps = useMemo(() => ({
+    workflowState: state.workflowState,
+    tick,
+    isActive: activePanel === "dag",
+  }), [state.workflowState, tick, activePanel]);
+
+  const logsPanelProps = useMemo(() => ({
+    logs: state.logs,
+    isActive: activePanel === "logs",
+  }), [state.logs, activePanel]);
+
+  const metricsPanelProps = useMemo(() => ({
+    metrics: state.metrics,
+    fitness: state.fitness,
+    isActive: activePanel === "metrics",
+    tick,
+  }), [state.metrics, state.fitness, activePanel, tick]);
+
+  const memoryPanelProps = useMemo(() => ({
+    nodes: [] as never[],
+    edges: [] as never[],
+    nodeCount: 247,
+    cacheHitRate: 94,
+    isActive: activePanel === "memory",
+    tick,
+  }), [activePanel, tick]);
+
+  const statusPanelProps = useMemo(() => ({
+    agents: state.agents,
+    providers: state.providers,
+    fitness: state.fitness,
+    currentWorkflow: state.currentWorkflow,
+    isActive: activePanel === "status",
+    tick,
+  }), [state.agents, state.providers, state.fitness, state.currentWorkflow, activePanel, tick]);
+
+  const inputBarProps = useMemo(() => ({
+    onSubmit: handleSubmit,
+    suggestions: state.suggestions,
+    isProcessing: state.isProcessing,
+    projectName: state.projectName,
+  }), [handleSubmit, state.suggestions, state.isProcessing, state.projectName]);
 
   return (
     <Box flexDirection="column" height="100%" width="100%">
-      <Header
-        projectName={state.projectName}
-        agentCount={state.agentCount}
-        provider={state.provider}
-        status={state.status}
-        tick={tick}
-        activePanel={activePanel}
-      />
+      <Header {...headerProps} />
 
       {showHelp ? (
-        <HelpOverlay onDismiss={() => setShowHelp(false)} />
+        <HelpOverlay onDismiss={handleDismissHelp} />
       ) : (
         <>
           <Box flexGrow={1} flexDirection="row" width="100%">
-            <ChatPanel
-              messages={state.messages}
-              isProcessing={state.isProcessing}
-              isActive={activePanel === "chat"}
-            />
-            <DAGPanel
-              workflowState={state.workflowState}
-              tick={tick}
-              isActive={activePanel === "dag"}
-            />
+            <ChatPanel {...chatPanelProps} />
+            <DAGPanel {...dagPanelProps} />
             {viewMode === "full" && (
               <>
-                <LogsPanel
-                  logs={state.logs}
-                  isActive={activePanel === "logs"}
-                />
+                <LogsPanel {...logsPanelProps} />
                 <Box flexDirection="column">
-                  <MetricsPanel
-                    metrics={state.metrics}
-                    fitness={state.fitness}
-                    isActive={activePanel === "metrics"}
-                  />
-                  <MemoryPanel
-                    nodes={[]}
-                    edges={[]}
-                    nodeCount={247}
-                    cacheHitRate={94}
-                    isActive={activePanel === "memory"}
-                  />
+                  <MetricsPanel {...metricsPanelProps} />
+                  <MemoryPanel {...memoryPanelProps} />
                 </Box>
               </>
             )}
             {viewMode === "compact" && (
-              <StatusPanel
-                agents={state.agents}
-                providers={state.providers}
-                fitness={state.fitness}
-                currentWorkflow={state.currentWorkflow}
-                isActive={activePanel === "status"}
-              />
+              <StatusPanel {...statusPanelProps} />
             )}
           </Box>
-          <InputBar
-            onSubmit={handleSubmit}
-            suggestions={state.suggestions}
-            isProcessing={state.isProcessing}
-          />
+          <InputBar {...inputBarProps} />
         </>
       )}
     </Box>
   );
-}
+});

package/src/tui/components/AgentStateIcon.tsx

@@ -0,0 +1,84 @@
+import React, { memo, useMemo } from "react";
+import { Text } from "ink";
+import { tuiColors } from "../styles/index.js";
+
+const THINKING_FRAMES = ["◠", "◡", "◠", "◡"];
+const PROCESSING_FRAMES = ["▶", "▷", "▶", "▷"];
+const RUNNING_FRAMES = ["●", "◉", "●", "○"];
+const WAITING_FRAMES = ["◐", "◓", "◐", "◓"];
+
+export type AgentState = 'idle' | 'thinking' | 'processing' | 'running' | 'success' | 'error' | 'waiting';
+
+interface AgentStateIconProps {
+  state: AgentState;
+  animated?: boolean;
+  tick?: number;
+}
+
+const STATE_CONFIG: Record<AgentState, { icon: string; color: string; animated: boolean; frames?: string[] }> = {
+  idle: { icon: "○", color: tuiColors.textTertiary, animated: false },
+  thinking: { icon: "◠", color: tuiColors.warning, animated: true, frames: THINKING_FRAMES },
+  processing: { icon: "▶", color: tuiColors.primary, animated: true, frames: PROCESSING_FRAMES },
+  running: { icon: "●", color: tuiColors.success, animated: true, frames: RUNNING_FRAMES },
+  success: { icon: "✓", color: tuiColors.success, animated: false },
+  error: { icon: "✗", color: tuiColors.error, animated: false },
+  waiting: { icon: "◐", color: tuiColors.warning, animated: true, frames: WAITING_FRAMES },
+};
+
+export const AgentStateIcon = memo(function AgentStateIcon({ state, animated = true, tick = 0 }: AgentStateIconProps) {
+  const config = STATE_CONFIG[state];
+  const showAnimation = animated && config.animated && config.frames;
+  
+  const icon = useMemo(() => {
+    if (showAnimation && config.frames) {
+      return config.frames[tick % config.frames.length];
+    }
+    return config.icon;
+  }, [showAnimation, config.frames, config.icon, tick]);
+
+  return <Text color={config.color}>{icon}</Text>;
+});
+
+export function useAgentStateFrame(state: AgentState, tick: number): string {
+  const config = STATE_CONFIG[state];
+  if (config.frames) {
+    return config.frames[tick % config.frames.length];
+  }
+  return config.icon;
+}
+
+const STATE_LABELS: Record<AgentState, string> = {
+  idle: "pending",
+  thinking: "thinking...",
+  processing: "processing",
+  running: "running",
+  success: "done",
+  error: "error",
+  waiting: "waiting",
+};
+
+interface AgentStateWithLabelProps {
+  state: AgentState;
+  label: string;
+  tick: number;
+}
+
+export const AgentStateWithLabel = memo(function AgentStateWithLabel({ state, label, tick }: AgentStateWithLabelProps) {
+  return (
+    <>
+      <AgentStateIcon state={state} tick={tick} />
+      <Text color={tuiColors.textSecondary}> {label}</Text>
+      <Text color={tuiColors.textTertiary}> {STATE_LABELS[state]}</Text>
+    </>
+  );
+});
+
+export const agentStateColors: Record<AgentState, string> = {
+  idle: tuiColors.textTertiary,
+  thinking: tuiColors.warning,
+  processing: tuiColors.primary,
+  running: tuiColors.success,
+  success: tuiColors.success,
+  error: tuiColors.error,
+  waiting: tuiColors.warning,
+};

package/src/tui/components/AnimatedBranch.tsx

@@ -0,0 +1,134 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors } from "../styles/index.js";
+
+const VERTICAL_PULSE_FRAMES = ["│", "┃", "│", "┃"];
+const HORIZONTAL_PULSE_FRAMES = ["─", "━", "─", "━"];
+const FLOW_FRAMES = ["◀═══▶", "═◀═══▶", "══◀══▶", "═══◀═▶", "════◀▶", "═▶═══◀", "══▶══◀", "═══▶═◀"];
+
+export type BranchType = 'vertical' | 'horizontal' | 'corner-left' | 'corner-right' | 'branch' | 'last-branch' | 'flow';
+
+interface AnimatedBranchProps {
+  type: BranchType;
+  tick?: number;
+  animated?: boolean;
+  length?: number;
+  color?: string;
+}
+
+export const AnimatedBranch = memo(function AnimatedBranch({ 
+  type, 
+  tick = 0, 
+  animated = true, 
+  length = 1, 
+  color 
+}: AnimatedBranchProps) {
+  const branchColor = color || tuiColors.textTertiary;
+  
+  const getFrame = (frames: string[]): string => {
+    return frames[tick % frames.length];
+  };
+
+  const renderBranch = (): string => {
+    switch (type) {
+      case 'vertical':
+        return animated ? getFrame(VERTICAL_PULSE_FRAMES) : "│";
+      case 'horizontal':
+        return animated ? getFrame(HORIZONTAL_PULSE_FRAMES).repeat(length) : "─".repeat(length);
+      case 'corner-left':
+        return "┌";
+      case 'corner-right':
+        return "┐";
+      case 'branch':
+        return "├─";
+      case 'last-branch':
+        return "└─";
+      case 'flow':
+        return animated ? getFrame(FLOW_FRAMES) : "◀═══▶";
+      default:
+        return "│";
+    }
+  };
+
+  return <Text color={branchColor}>{renderBranch()}</Text>;
+});
+
+interface BranchLineProps {
+  tick: number;
+  animated?: boolean;
+  length?: number;
+  color?: string;
+}
+
+export const VerticalBranch = memo(function VerticalBranch({ tick, animated = true, length = 1, color }: BranchLineProps) {
+  return <AnimatedBranch type="vertical" tick={tick} animated={animated} color={color} />;
+});
+
+export const HorizontalBranch = memo(function HorizontalBranch({ tick, animated = true, length = 1, color }: BranchLineProps) {
+  return <AnimatedBranch type="horizontal" tick={tick} animated={animated} length={length} color={color} />;
+});
+
+export const BranchConnector = memo(function BranchConnector({ tick, animated = true, color }: BranchLineProps) {
+  return <AnimatedBranch type="branch" tick={tick} animated={animated} color={color} />;
+});
+
+export const LastBranchConnector = memo(function LastBranchConnector({ tick, animated = true, color }: BranchLineProps) {
+  return <AnimatedBranch type="last-branch" tick={tick} animated={animated} color={color} />;
+});
+
+export const FlowIndicator = memo(function FlowIndicator({ tick, animated = true, color }: BranchLineProps) {
+  return <AnimatedBranch type="flow" tick={tick} animated={animated} color={color} />;
+});
+
+interface TaskBranchProps {
+  tick: number;
+  depth: number;
+  isLast: boolean;
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  color?: string;
+}
+
+export const TaskBranch = memo(function TaskBranch({ tick, depth, isLast, hasChildren = false, isExpanded = true, color }: TaskBranchProps) {
+  const branchColor = color || tuiColors.textTertiary;
+  
+  if (depth === 0) {
+    return null;
+  }
+
+  const indent = "  ".repeat(depth - 1);
+  
+  return (
+    <Box flexDirection="row">
+      <Text color={branchColor}>{indent}</Text>
+      <AnimatedBranch type={isLast ? "last-branch" : "branch"} tick={tick} color={branchColor} />
+    </Box>
+  );
+});
+
+interface AnimatedConnectorProps {
+  tick: number;
+  fromLevel: number;
+  toLevel: number;
+  isActive: boolean;
+}
+
+export const AnimatedConnector = memo(function AnimatedConnector({ tick, fromLevel, toLevel, isActive }: AnimatedConnectorProps) {
+  const color = isActive ? tuiColors.primary : tuiColors.textTertiary;
+  const rows = toLevel - fromLevel;
+  
+  const connectorElements = useMemo(() => 
+    Array.from({ length: rows }).map((_, idx) => (
+      <Box key={idx} paddingLeft={2}>
+        <AnimatedBranch type="vertical" tick={tick} animated={isActive} color={color} />
+      </Box>
+    )),
+    [rows, tick, isActive, color]
+  );
+  
+  return (
+    <Box flexDirection="column">
+      {connectorElements}
+    </Box>
+  );
+});

package/src/tui/components/ChatPanel.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useState, useEffect, useMemo, memo, useCallback } from "react";
 import { Box, Text } from "ink";
+import { tuiColors, formatTimestamp, getProviderTag } from "../styles/index.js";
+import { TypingEffect, ProcessingIndicator } from "./animations/index.js";
 
 interface Message {
   id: string;
@@ -15,45 +17,90 @@ interface ChatPanelProps {
   isActive: boolean;
 }
 
-function formatTime(date: Date): string {
-  return date.toLocaleTimeString("fr-FR", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-}
+const MESSAGE_CONFIG: Record<string, { tag: string; color: string }> = {
+  user: { tag: "[YOU]", color: tuiColors.textPrimary },
+  system: { tag: "[SYS]", color: tuiColors.textTertiary },
+  agent: { tag: "[AGENT]", color: tuiColors.primary },
+  error: { tag: "[ERROR]", color: tuiColors.error },
+  success: { tag: "[SUCCESS]", color: tuiColors.success },
+};
+
+const MAX_DISPLAYED_MESSAGES = 12;
+const TYPING_SPEED_PER_CHAR = 15;
+const TYPING_BUFFER_MS = 500;
 
-function MessageItem({ message }: { message: Message }) {
-  const typeColors: Record<string, string> = {
-    user: "cyan",
-    system: "gray",
-    agent: "#f97316",
-    error: "red",
-    success: "green",
-  };
+interface MessageItemProps {
+  message: Message;
+  animate?: boolean;
+}
 
-  const typeLabels: Record<string, string> = {
-    user: "YOU",
-    system: "SYS",
-    agent: message.agent || "AGENT",
-    error: "ERR",
-    success: "OK",
-  };
+const MessageItem = memo(function MessageItem({ message, animate = false }: MessageItemProps) {
+  const config = MESSAGE_CONFIG[message.type];
+  const providerInfo = useMemo(() => 
+    message.agent ? getProviderTag(message.agent) : null,
+    [message.agent]
+  );
+  const tag = message.type === "agent" && message.agent 
+    ? `[${message.agent.toUpperCase().slice(0, 8)}]` 
+    : config.tag;
+  const formattedTime = useMemo(() => formatTimestamp(message.timestamp), [message.timestamp]);
 
   return (
     <Box flexDirection="column" marginBottom={1}>
       <Box flexDirection="row">
-        <Text color="gray" dimColor>[{formatTime(message.timestamp)}]</Text>
-        <Text color={typeColors[message.type]} bold> [{typeLabels[message.type]}]</Text>
-        {message.agent && <Text color="gray"> [{message.agent}]</Text>}
+        <Text color={tuiColors.textTertiary}>[{formattedTime}]</Text>
+        <Text color={config.color} bold>{tag.padEnd(12)}</Text>
+        {providerInfo && (
+          <Text color={tuiColors.textTertiary}>{providerInfo.code}</Text>
+        )}
       </Box>
-      <Text color="white">{message.content}</Text>
+      {animate ? (
+        <TypingEffect text={message.content} speed={TYPING_SPEED_PER_CHAR} showCursor={false} />
+      ) : (
+        <Text color={tuiColors.textPrimary}>  {message.content}</Text>
+      )}
     </Box>
   );
-}
+});
 
-export function ChatPanel({ messages, isProcessing, isActive }: ChatPanelProps) {
-  const borderColor = isActive ? "#f97316" : "gray";
+export const ChatPanel = memo(function ChatPanel({ messages, isProcessing, isActive }: ChatPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  const [animatingMessageId, setAnimatingMessageId] = useState<string | null>(null);
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  const displayMessages = useMemo(() => 
+    messages.slice(-MAX_DISPLAYED_MESSAGES),
+    [messages]
+  );
+
+  useEffect(() => {
+    if (messages.length === 0) return;
+    
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.type !== "agent" && lastMessage.type !== "system") return;
+
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    
+    setAnimatingMessageId(lastMessage.id);
+    timeoutRef.current = setTimeout(() => {
+      setAnimatingMessageId(null);
+    }, lastMessage.content.length * TYPING_SPEED_PER_CHAR + TYPING_BUFFER_MS);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [messages]);
+
+  const messageElements = useMemo(() => 
+    displayMessages.map((msg) => (
+      <MessageItem 
+        key={msg.id} 
+        message={msg} 
+        animate={msg.id === animatingMessageId}
+      />
+    )),
+    [displayMessages, animatingMessageId]
+  );
 
   return (
     <Box
@@ -63,21 +110,16 @@ export function ChatPanel({ messages, isProcessing, isActive }: ChatPanelProps)
       borderColor={borderColor}
       paddingX={1}
     >
-      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
-        <Text color="#f97316" bold>CHAT</Text>
-        <Text color="gray"> — Tapez /help pour les commandes</Text>
-        {isActive && <Text color="yellow"> [ACTIF]</Text>}
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> CHAT </Text>
+        <Text color={tuiColors.textTertiary}>─────────────────────────────────────</Text>
       </Box>
+      
       <Box flexDirection="column" flexGrow={1} overflow="hidden">
-        {messages.slice(-15).map((msg) => (
-          <MessageItem key={msg.id} message={msg} />
-        ))}
-        {isProcessing && (
-          <Box>
-            <Text color="yellow">● Processing...</Text>
-          </Box>
-        )}
+        {messageElements}
+        {isProcessing && <ProcessingIndicator text="Processing" />}
       </Box>
     </Box>
   );
-}
+});