rax-flow 0.1.9 → 0.2.0

package/src/tui/hooks/useAnimation.ts

@@ -0,0 +1,290 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export interface AnimationOptions {
+  interval?: number;
+  loop?: boolean;
+  autoStart?: boolean;
+  totalFrames?: number;
+  maxFps?: number;
+  pauseOnHidden?: boolean;
+}
+
+export interface AnimationState {
+  frame: number;
+  tick: number;
+  isAnimating: boolean;
+  progress: number;
+  start: () => void;
+  stop: () => void;
+  reset: () => void;
+  toggle: () => void;
+}
+
+const DEFAULT_FPS_LIMIT = 24;
+const FRAME_SKIP_THRESHOLD = 2;
+
+export function useAnimation(options: AnimationOptions = {}): AnimationState {
+  const {
+    interval = 100,
+    loop = true,
+    autoStart = true,
+    totalFrames = 100,
+    maxFps = DEFAULT_FPS_LIMIT,
+    pauseOnHidden = true,
+  } = options;
+
+  const [frame, setFrame] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(autoStart);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const lastFrameTimeRef = useRef<number>(0);
+  const frameCountRef = useRef<number>(0);
+  const isHiddenRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!pauseOnHidden || typeof document === "undefined") return;
+    
+    const handleVisibility = () => {
+      isHiddenRef.current = document.hidden;
+    };
+    
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, [pauseOnHidden]);
+
+  const start = useCallback(() => {
+    setIsAnimating(true);
+  }, []);
+
+  const stop = useCallback(() => {
+    setIsAnimating(false);
+  }, []);
+
+  const reset = useCallback(() => {
+    setFrame(0);
+    frameCountRef.current = 0;
+    lastFrameTimeRef.current = 0;
+  }, []);
+
+  const toggle = useCallback(() => {
+    setIsAnimating((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    if (!isAnimating) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+
+    const minFrameTime = 1000 / maxFps;
+    
+    intervalRef.current = setInterval(() => {
+      if (pauseOnHidden && isHiddenRef.current) return;
+      
+      const now = performance.now();
+      const elapsed = now - lastFrameTimeRef.current;
+      
+      if (elapsed < minFrameTime) return;
+      
+      const framesToSkip = Math.floor(elapsed / interval) - 1;
+      const shouldSkipFrame = framesToSkip > FRAME_SKIP_THRESHOLD;
+      
+      if (shouldSkipFrame) {
+        frameCountRef.current += framesToSkip;
+      }
+      
+      lastFrameTimeRef.current = now;
+      frameCountRef.current++;
+      
+      setFrame((prev) => {
+        if (loop) {
+          return prev + 1;
+        }
+        return prev >= totalFrames - 1 ? prev : prev + 1;
+      });
+    }, interval);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isAnimating, interval, loop, totalFrames, maxFps, pauseOnHidden]);
+
+  const progress = totalFrames > 0 ? (frame % totalFrames) / totalFrames : 0;
+
+  return {
+    frame,
+    tick: frame,
+    isAnimating,
+    progress,
+    start,
+    stop,
+    reset,
+    toggle,
+  };
+}
+
+export function usePulse(interval: number = 2000): { intensity: number; frame: number } {
+  const { frame } = useAnimation({ interval: 100, loop: true, maxFps: 15 });
+  const intensity = 0.5 + Math.sin((frame * 100 / interval) * Math.PI * 2) * 0.5;
+  return { intensity, frame };
+}
+
+export function useTypewriter(
+  text: string,
+  speed: number = 50,
+  startDelay: number = 0
+): { displayedText: string; isComplete: boolean; restart: () => void } {
+  const [displayedChars, setDisplayedChars] = useState(0);
+  const [isStarted, setIsStarted] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const restart = useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setDisplayedChars(0);
+    setIsStarted(false);
+    setIsComplete(false);
+  }, []);
+
+  useEffect(() => {
+    restart();
+  }, [text, restart]);
+
+  useEffect(() => {
+    if (startDelay > 0 && !isStarted) {
+      const timeout = setTimeout(() => setIsStarted(true), startDelay);
+      return () => clearTimeout(timeout);
+    } else if (startDelay === 0) {
+      setIsStarted(true);
+    }
+  }, [startDelay, isStarted]);
+
+  useEffect(() => {
+    if (!isStarted || isComplete) return;
+
+    if (displayedChars >= text.length) {
+      setIsComplete(true);
+      return;
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setDisplayedChars((prev) => prev + 1);
+    }, speed);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [isStarted, displayedChars, text.length, speed, isComplete]);
+
+  return {
+    displayedText: text.slice(0, displayedChars),
+    isComplete,
+    restart,
+  };
+}
+
+export function useCountdown(
+  initialSeconds: number,
+  options: { autoStart?: boolean; onComplete?: () => void } = {}
+): { seconds: number; isRunning: boolean; start: () => void; pause: () => void; reset: () => void } {
+  const { autoStart = false, onComplete } = options;
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isRunning, setIsRunning] = useState(autoStart);
+  const onCompleteRef = useRef(onComplete);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  onCompleteRef.current = onComplete;
+
+  const start = useCallback(() => setIsRunning(true), []);
+  const pause = useCallback(() => setIsRunning(false), []);
+  const reset = useCallback(() => {
+    setSeconds(initialSeconds);
+    setIsRunning(false);
+  }, [initialSeconds]);
+
+  useEffect(() => {
+    if (!isRunning || seconds <= 0) {
+      if (seconds <= 0 && isRunning) {
+        setIsRunning(false);
+        onCompleteRef.current?.();
+      }
+      return;
+    }
+
+    intervalRef.current = setInterval(() => {
+      setSeconds((prev) => prev - 1);
+    }, 1000);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isRunning, seconds]);
+
+  return { seconds, isRunning, start, pause, reset };
+}
+
+export function useFps(targetFps: number = 24): number {
+  const [frame, setFrame] = useState(0);
+  const frameRef = useRef(0);
+  const lastTimeRef = useRef(performance.now());
+  const rafIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const interval = 1000 / targetFps;
+
+    const tick = () => {
+      const now = performance.now();
+      const delta = now - lastTimeRef.current;
+
+      if (delta >= interval) {
+        lastTimeRef.current = now - (delta % interval);
+        frameRef.current++;
+        setFrame(frameRef.current);
+      }
+
+      rafIdRef.current = requestAnimationFrame(tick);
+    };
+
+    rafIdRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [targetFps]);
+
+  return frame;
+}
+
+export function useDebouncedCallback<T extends (...args: unknown[]) => void>(
+  callback: T,
+  delay: number
+): T {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  return useCallback(((...args: Parameters<T>) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => callbackRef.current(...args), delay);
+  }) as T, [delay]);
+}
+
+export function useThrottledCallback<T extends (...args: unknown[]) => void>(
+  callback: T,
+  delay: number
+): T {
+  const lastCallRef = useRef<number>(0);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  return useCallback(((...args: Parameters<T>) => {
+    const now = performance.now();
+    if (now - lastCallRef.current >= delay) {
+      lastCallRef.current = now;
+      callbackRef.current(...args);
+    }
+  }) as T, [delay]);
+}

package/src/tui/hooks/useAppState.ts

@@ -41,6 +41,15 @@ interface WorkflowState {
   totalProgress: number;
 }
 
+interface MetricsState {
+  sessions: number;
+  avgDuration: number;
+  successRate: number;
+  totalCost: number;
+  totalRetries: number;
+  totalEscalations: number;
+}
+
 interface AppState {
   projectName: string;
   agentCount: number;
@@ -55,12 +64,7 @@ interface AppState {
   isProcessing: boolean;
   workflowState: WorkflowState;
   logs: string[];
-  metrics: {
-    sessions: number;
-    avgDuration: number;
-    successRate: number;
-    totalCost: number;
-  };
+  metrics: MetricsState;
 }
 
 const COMMAND_SUGGESTIONS = [
@@ -150,8 +154,10 @@ export function useAppState() {
     metrics: {
       sessions: 0,
       avgDuration: 0,
-      successRate: 96,
+      successRate: 100,
       totalCost: 0,
+      totalRetries: 0,
+      totalEscalations: 0,
     },
   });
 
@@ -205,17 +211,30 @@ export function useAppState() {
 
       case "run_end":
         addLog(`[${timeStr}] [DONE] Task completed (confidence: ${event.metrics.confidence.toFixed(2)})`);
-        setState((prev) => ({
-          ...prev,
-          status: "ready",
-          isProcessing: false,
-          fitness: Math.min(prev.fitness + 0.02, 0.99),
-          metrics: {
-            ...prev.metrics,
-            sessions: prev.metrics.sessions + 1,
-            totalCost: prev.metrics.totalCost + (event.metrics.totalCostUsd || 0),
-          },
-        }));
+        setState((prev) => {
+          const newSessions = prev.metrics.sessions + 1;
+          const newAvgDuration = prev.metrics.avgDuration === 0 
+            ? event.metrics.totalLatencyMs 
+            : Math.round((prev.metrics.avgDuration * prev.metrics.sessions + event.metrics.totalLatencyMs) / newSessions);
+          const newSuccessRate = event.metrics.confidence >= 0.7 
+            ? Math.round((prev.metrics.successRate * prev.metrics.sessions + 100) / newSessions)
+            : Math.round((prev.metrics.successRate * prev.metrics.sessions) / newSessions);
+          
+          return {
+            ...prev,
+            status: "ready",
+            isProcessing: false,
+            fitness: Math.min(prev.fitness + 0.02, 0.99),
+            metrics: {
+              sessions: newSessions,
+              avgDuration: newAvgDuration,
+              successRate: newSuccessRate,
+              totalCost: prev.metrics.totalCost + (event.metrics.totalCostUsd || 0),
+              totalRetries: prev.metrics.totalRetries + (event.metrics.retries || 0),
+              totalEscalations: prev.metrics.totalEscalations + (event.metrics.escalations || 0),
+            },
+          };
+        });
         break;
     }
   }, []);
@@ -288,16 +307,16 @@ export function useAppState() {
   }, []);
 
   const processCommand = useCallback((input: string) => {
-    if (input.startsWith("/")) {
-      const cmd = input.slice(1).toLowerCase();
-      const parts = cmd.split(" ");
-      const command = parts[0];
-      const args = parts.slice(1).join(" ");
-
-      switch (command) {
-        case "help":
-          addMessage("system", `Commandes: /run /status /agents /providers /workflows /logs /metrics /memory /doctor /bridge-test /evolve /config /exit`);
-          break;
+    const normalizedInput = input.startsWith("/") ? input : `/${input}`;
+    const cmd = normalizedInput.slice(1).toLowerCase();
+    const parts = cmd.split(" ");
+    const command = parts[0];
+    const args = parts.slice(1).join(" ");
+
+    switch (command) {
+      case "help":
+        addMessage("system", `Commandes: /run /status /agents /providers /workflows /logs /metrics /memory /doctor /bridge-test /evolve /config /exit\n(Note: commands work with or without '/' prefix)`);
+        break;
 
         case "status":
           const status = orchestratorRef.current.getStatus();
@@ -353,11 +372,12 @@ export function useAppState() {
           break;
 
         default:
-          addMessage("error", `Commande inconnue: /${command}. Tapez /help pour l'aide.`);
+          if (args || command) {
+            addMessage("error", `Commande inconnue: /${command}. Tapez /help pour l'aide.`);
+          } else {
+            runWorkflow(input);
+          }
       }
-    } else {
-      runWorkflow(input);
-    }
   }, [state, addMessage]);
 
   const runWorkflow = useCallback(async (prompt: string) => {

package/src/tui/services/orchestrator.ts

@@ -9,6 +9,13 @@ import {
   ModelResponse,
   ProviderCallOptions,
 } from "rax-flow-core";
+import {
+  OpenAIAdapter,
+  ClaudeAdapter,
+  GeminiAdapter,
+  GroqAdapter,
+  HostBridgeAdapter,
+} from "rax-flow-providers";
 
 export interface OrchestratorService {
   run(prompt: string): Promise<void>;
@@ -24,6 +31,36 @@ export interface OrchestratorStatus {
   fitness: number;
 }
 
+function createProviderFromEnv(name: string): IModelProvider | null {
+  switch (name) {
+    case "openai":
+      if (process.env.OPENAI_API_KEY) {
+        return new OpenAIAdapter({ apiKey: process.env.OPENAI_API_KEY });
+      }
+      return null;
+    case "claude":
+    case "anthropic":
+      if (process.env.ANTHROPIC_API_KEY) {
+        return new ClaudeAdapter({ apiKey: process.env.ANTHROPIC_API_KEY });
+      }
+      return null;
+    case "gemini":
+      if (process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY) {
+        return new GeminiAdapter({ apiKey: process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY! });
+      }
+      return null;
+    case "groq":
+      if (process.env.GROQ_API_KEY) {
+        return new GroqAdapter({ apiKey: process.env.GROQ_API_KEY });
+      }
+      return null;
+    case "host":
+      return new HostBridgeAdapter({ mode: "auto" });
+    default:
+      return null;
+  }
+}
+
 function createMockProvider(): IModelProvider {
   return {
     async callModel(prompt: string, options?: ProviderCallOptions): Promise<ModelResponse<string>> {
@@ -49,6 +86,25 @@ function createMockProvider(): IModelProvider {
   };
 }
 
+function buildProviders(): Record<string, IModelProvider> {
+  const providers: Record<string, IModelProvider> = {};
+  
+  const hostProvider = createProviderFromEnv("host");
+  if (hostProvider) providers["host"] = hostProvider;
+  
+  for (const name of ["openai", "claude", "gemini", "groq"]) {
+    const provider = createProviderFromEnv(name);
+    if (provider) providers[name] = provider;
+  }
+  
+  if (Object.keys(providers).length === 0) {
+    console.log("[Orchestrator] No API keys found, using mock provider");
+    providers["mock"] = createMockProvider();
+  }
+  
+  return providers;
+}
+
 function createAgent(name: string, role: string): AgentDefinition {
   return {
     name,
@@ -83,10 +139,7 @@ const DEFAULT_AGENTS = [
 ];
 
 export function createOrchestrator(): OrchestratorService {
-  const providers: Record<string, IModelProvider> = {
-    host: createMockProvider(),
-  };
-
+  const providers = buildProviders();
   const agents: Record<string, AgentDefinition> = {};
   for (const agent of DEFAULT_AGENTS) {
     agents[agent.name] = agent;

package/src/tui/styles/borders.ts

@@ -0,0 +1,51 @@
+export const borders = {
+  horizontal: "─",
+  vertical: "│",
+  topLeft: "┌",
+  topRight: "┐",
+  bottomLeft: "└",
+  bottomRight: "┘",
+  leftT: "├",
+  rightT: "┤",
+  topT: "┬",
+  bottomT: "┴",
+  cross: "┼",
+};
+
+export const doubleBorders = {
+  horizontal: "═",
+  vertical: "║",
+  topLeft: "╔",
+  topRight: "╗",
+  bottomLeft: "╚",
+  bottomRight: "╝",
+};
+
+export const treeChars = {
+  branch: "├─",
+  lastBranch: "└─",
+  vertical: "│",
+  indent: "  ",
+};
+
+export function drawTopBorder(width: number, title?: string): string {
+  const { topLeft, topRight, horizontal } = borders;
+  if (title) {
+    const titleStr = ` ${title} `;
+    const titleLen = titleStr.length;
+    const remaining = width - 2 - titleLen;
+    const rightDashes = Math.max(0, remaining);
+    return `${topLeft}${titleStr}${horizontal.repeat(rightDashes)}${topRight}`;
+  }
+  return `${topLeft}${horizontal.repeat(width - 2)}${topRight}`;
+}
+
+export function drawBottomBorder(width: number): string {
+  const { bottomLeft, bottomRight, horizontal } = borders;
+  return `${bottomLeft}${horizontal.repeat(width - 2)}${bottomRight}`;
+}
+
+export function drawSeparator(width: number): string {
+  const { leftT, rightT, horizontal } = borders;
+  return `${leftT}${horizontal.repeat(width - 2)}${rightT}`;
+}

package/src/tui/styles/colors.ts

@@ -0,0 +1,19 @@
+import { colors } from "../../hub/styles/colors.js";
+
+export { colors };
+
+export const tuiColors = {
+  background: "#050505",
+  surface: "#0a0a0a",
+  primary: "#f97316",
+  textPrimary: "#ffffff",
+  textSecondary: "#a1a1aa",
+  textTertiary: "#71717a",
+  textQuaternary: "#3f3f46",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  error: "#ef4444",
+  border: "#27272a",
+  mutation: "#f59e0b",
+  checkpoint: "#f97316",
+};

package/src/tui/styles/index.ts

@@ -0,0 +1,20 @@
+export { colors, tuiColors } from "./colors.js";
+export { borders, doubleBorders, treeChars, drawTopBorder, drawBottomBorder, drawSeparator } from "./borders.js";
+export { 
+  statusIndicators, 
+  getStatusIndicator, 
+  spinnerFrames, 
+  getSpinnerFrame,
+  dotsSpinnerFrames,
+  circleSpinnerFrames,
+  pulseFrames,
+  breathFrames,
+  progressMarkerFrames,
+  progressGlowFrames,
+  getPulseFrame,
+  getBreathFrame,
+  getProgressMarker,
+  getProgressGlow
+} from "./indicators.js";
+export { providerTags, getProviderTag, logStatusTags } from "./providers.js";
+export { layout, formatTimestamp, formatTimestampMs, padRight, truncate } from "./layout.js";

package/src/tui/styles/indicators.ts

@@ -0,0 +1,54 @@
+export const statusIndicators = {
+  online: { icon: "●", color: "#22c55e" },
+  offline: { icon: "○", color: "#71717a" },
+  pending: { icon: "○", color: "#71717a" },
+  running: { icon: "▶", color: "#f97316" },
+  loading: { icon: "◐", color: "#f59e0b" },
+  queued: { icon: "◐", color: "#f59e0b" },
+  done: { icon: "●", color: "#22c55e" },
+  success: { icon: "●", color: "#22c55e" },
+  error: { icon: "✗", color: "#ef4444" },
+  mutation: { icon: "◆", color: "#f59e0b" },
+  checkpoint: { icon: "■", color: "#f97316" },
+  idle: { icon: "○", color: "#71717a" },
+};
+
+export function getStatusIndicator(status: string): { icon: string; color: string } {
+  const normalized = status.toLowerCase();
+  return statusIndicators[normalized as keyof typeof statusIndicators] || statusIndicators.pending;
+}
+
+export const spinnerFrames = ["◐", "◓", "◑", "◒"];
+
+export const dotsSpinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⼸", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export const circleSpinnerFrames = ["◐", "◓", "◑", "◒"];
+
+export const pulseFrames = ["●", "◐", "○", "◐"];
+
+export const breathFrames = ["●", "●", "◐", "◐", "○", "○", "◐", "◐"];
+
+export const progressMarkerFrames = ["▶", "▸", "▶", "▸"];
+
+export const progressGlowFrames = ["█", "▓", "█", "▓"];
+
+export function getSpinnerFrame(tick: number, type: "circle" | "dots" | "pulse" = "circle"): string {
+  const frames = type === "dots" ? dotsSpinnerFrames : type === "pulse" ? pulseFrames : circleSpinnerFrames;
+  return frames[tick % frames.length];
+}
+
+export function getPulseFrame(tick: number): string {
+  return pulseFrames[tick % pulseFrames.length];
+}
+
+export function getBreathFrame(tick: number): string {
+  return breathFrames[tick % breathFrames.length];
+}
+
+export function getProgressMarker(tick: number): string {
+  return progressMarkerFrames[tick % progressMarkerFrames.length];
+}
+
+export function getProgressGlow(tick: number): string {
+  return progressGlowFrames[tick % progressGlowFrames.length];
+}

package/src/tui/styles/layout.ts

@@ -0,0 +1,44 @@
+export const layout = {
+  defaultWidth: 80,
+  panelWidth: {
+    chat: 40,
+    dag: 38,
+    status: 28,
+    logs: 32,
+    metrics: 28,
+    memory: 30,
+  },
+  padding: {
+    x: 1,
+    y: 0,
+  },
+  progressWidth: 16,
+};
+
+export function formatTimestamp(date: Date): string {
+  return date.toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+export function formatTimestampMs(date: Date): string {
+  const time = date.toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${time}.${ms}`;
+}
+
+export function padRight(text: string, width: number): string {
+  const padding = Math.max(0, width - text.length);
+  return text + " ".repeat(padding);
+}
+
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + "...";
+}