rax-flow 0.1.7 → 0.1.9

package/src/tui/components/ChatPanel.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text, useInput } from "ink";
+import { Box, Text } from "ink";
 
 interface Message {
   id: string;
@@ -12,6 +12,7 @@ interface Message {
 interface ChatPanelProps {
   messages: Message[];
   isProcessing: boolean;
+  isActive: boolean;
 }
 
 function formatTime(date: Date): string {
@@ -22,7 +23,7 @@ function formatTime(date: Date): string {
   });
 }
 
-function MessageItem({ message }: { message: Message; key?: string }) {
+function MessageItem({ message }: { message: Message }) {
   const typeColors: Record<string, string> = {
     user: "cyan",
     system: "gray",
@@ -51,18 +52,21 @@ function MessageItem({ message }: { message: Message; key?: string }) {
   );
 }
 
-export function ChatPanel({ messages, isProcessing }: ChatPanelProps) {
+export function ChatPanel({ messages, isProcessing, isActive }: ChatPanelProps) {
+  const borderColor = isActive ? "#f97316" : "gray";
+
   return (
     <Box
       flexDirection="column"
       flexGrow={2}
       borderStyle="single"
-      borderColor="gray"
+      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>
       <Box flexDirection="column" flexGrow={1} overflow="hidden">
         {messages.slice(-15).map((msg) => (

package/src/tui/components/DAGPanel.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface DAGNode {
+  id: string;
+  name: string;
+  status: "pending" | "running" | "done" | "error";
+  agent?: string;
+}
+
+interface DAGLevel {
+  name: string;
+  progress: number;
+  nodes: DAGNode[];
+}
+
+interface WorkflowState {
+  levels: DAGLevel[];
+  currentLevel: number;
+  totalProgress: number;
+}
+
+interface DAGPanelProps {
+  workflowState: WorkflowState;
+  tick: number;
+  isActive: boolean;
+}
+
+const statusIcons: Record<string, { icon: string; color: string }> = {
+  pending: { icon: "○", color: "gray" },
+  running: { icon: "▶", color: "yellow" },
+  done: { icon: "●", color: "green" },
+  error: { icon: "✗", color: "red" },
+};
+
+const spinnerFrames = ["◐", "◓", "◑", "◒"];
+
+function ProgressBar({ progress, width = 20 }: { progress: number; width?: number }) {
+  const filled = Math.round((progress / 100) * width);
+  const empty = width - filled;
+  const bar = "█".repeat(filled) + "░".repeat(empty);
+  return (
+    <Text color={progress >= 100 ? "green" : progress > 0 ? "yellow" : "gray"}>
+      {bar}
+    </Text>
+  );
+}
+
+function DAGNodeItem({ node, tick }: { node: DAGNode; tick: number }) {
+  const { icon, color } = statusIcons[node.status];
+  const animatedIcon = node.status === "running" 
+    ? spinnerFrames[tick % spinnerFrames.length]
+    : icon;
+
+  return (
+    <Box flexDirection="row" marginLeft={2}>
+      <Text color={color}>{animatedIcon}</Text>
+      <Text color="white"> {node.name}</Text>
+      {node.agent && <Text color="gray"> [{node.agent}]</Text>}
+    </Box>
+  );
+}
+
+function DAGLevelView({ level, tick, isActive }: { level: DAGLevel; tick: number; isActive: boolean }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box flexDirection="row">
+        <Text color={isActive ? "#f97316" : "gray"} bold={isActive}>
+          {level.name}
+        </Text>
+        <Text color="gray"> </Text>
+        <ProgressBar progress={level.progress} width={12} />
+        <Text color="gray"> {level.progress}%</Text>
+      </Box>
+      {level.nodes.map((node) => (
+        <DAGNodeItem key={node.id} node={node} tick={tick} />
+      ))}
+    </Box>
+  );
+}
+
+export function DAGPanel({ workflowState, tick, isActive }: DAGPanelProps) {
+  const borderColor = isActive ? "#f97316" : "gray";
+
+  return (
+    <Box
+      flexDirection="column"
+      width={40}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
+        <Text color="#f97316" bold>DAG</Text>
+        <Text color="gray"> EXECUTION</Text>
+      </Box>
+
+      <Box flexDirection="column" flexGrow={1}>
+        {workflowState.levels.map((level, index) => (
+          <DAGLevelView
+            key={level.name}
+            level={level}
+            tick={tick}
+            isActive={index === workflowState.currentLevel}
+          />
+        ))}
+      </Box>
+
+      <Box borderStyle="single" borderColor="gray" marginTop={1}>
+        <Text color="gray">Total: </Text>
+        <ProgressBar progress={workflowState.totalProgress} width={10} />
+        <Text color="white"> {workflowState.totalProgress}%</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/Header.tsx

@@ -6,9 +6,21 @@ interface HeaderProps {
   agentCount: number;
   provider: string;
   status: "ready" | "running" | "error";
+  tick: number;
+  activePanel: string;
 }
 
-export function Header({ projectName, agentCount, provider, status }: HeaderProps) {
+const spinnerFrames = ["◐", "◓", "◑", "◒"];
+const panelNames: Record<string, string> = {
+  chat: "CHAT",
+  dag: "DAG",
+  status: "STATUS",
+  logs: "LOGS",
+  metrics: "METRICS",
+  memory: "MEMORY",
+};
+
+export function Header({ projectName, agentCount, provider, status, tick, activePanel }: HeaderProps) {
   const statusColors = {
     ready: "green",
     running: "yellow",
@@ -21,32 +33,52 @@ export function Header({ projectName, agentCount, provider, status }: HeaderProp
     error: "ERROR",
   };
 
-  const statusIcon = status === "running" ? "▶" : status === "error" ? "✗" : "●";
+  const animatedStatus = status === "running" 
+    ? spinnerFrames[tick % spinnerFrames.length]
+    : status === "error" ? "✗" : "●";
+
+  const panels = ["chat", "dag", "logs", "metrics", "memory"] as const;
 
   return (
     <Box
-      flexDirection="row"
-      justifyContent="space-between"
-      alignItems="center"
-      paddingX={1}
+      flexDirection="column"
       borderStyle="single"
       borderColor="gray"
       width="100%"
     >
-      <Box flexDirection="row" alignItems="center">
-        <Text color="#f97316" bold>■</Text>
-        <Text color="white" bold> RAX-FLOW</Text>
-        <Text color="gray"> HUB</Text>
+      <Box
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        paddingX={1}
+      >
+        <Box flexDirection="row" alignItems="center">
+          <Text color="#f97316" bold>■</Text>
+          <Text color="white" bold> RAX-FLOW</Text>
+          <Text color="gray"> HUB</Text>
+        </Box>
+        <Box flexDirection="row" alignItems="center">
+          <Text color="gray">Project:</Text>
+          <Text color="cyan"> {projectName}</Text>
+          <Text color="gray"> │ Agents:</Text>
+          <Text color="green"> {agentCount}/12</Text>
+          <Text color="gray"> │ [{provider}]</Text>
+          <Text color={statusColors[status]}> {animatedStatus} {statusText[status]}</Text>
+        </Box>
       </Box>
-      <Box flexDirection="row" alignItems="center" gap={2}>
-        <Text color="gray">Project:</Text>
-        <Text color="cyan">{projectName}</Text>
-        <Text color="gray">│</Text>
-        <Text color="gray">Agents:</Text>
-        <Text color="green">{agentCount}/12</Text>
-        <Text color="gray">│</Text>
-        <Text color="gray">[{provider}]</Text>
-        <Text color={statusColors[status]}> {statusIcon} {statusText[status]}</Text>
+      <Box flexDirection="row" paddingX={1} justifyContent="space-between">
+        <Box flexDirection="row">
+          {panels.map((panel) => (
+            <Box key={panel} marginRight={1}>
+              <Text color={activePanel === panel ? "#f97316" : "gray"} bold={activePanel === panel}>
+                [{panelNames[panel]}]
+              </Text>
+            </Box>
+          ))}
+        </Box>
+        <Box flexDirection="row">
+          <Text color="gray">Tab: Switch │ ←: Toggle view │ ?: Help │ Ctrl+C: Quit</Text>
+        </Box>
       </Box>
     </Box>
   );

package/src/tui/components/HelpOverlay.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+
+interface HelpOverlayProps {
+  onDismiss: () => void;
+}
+
+export function HelpOverlay({ onDismiss }: HelpOverlayProps) {
+  useInput((input, key) => {
+    if (key.escape || input === "q") {
+      onDismiss();
+    }
+  });
+
+  const sections = [
+    {
+      title: "COMMANDES",
+      items: [
+        ["/run <prompt>", "Exécuter un workflow"],
+        ["/status", "État du système"],
+        ["/agents", "Liste des agents"],
+        ["/providers", "Liste des providers"],
+        ["/workflows", "Blueprints disponibles"],
+        ["/help, ?", "Cette aide"],
+        ["/exit", "Quitter"],
+      ],
+    },
+    {
+      title: "NAVIGATION",
+      items: [
+        ["Tab", "Changer de panel actif"],
+        ["F1-F8", "Aller au panel spécifique"],
+        ["Ctrl+C", "Quitter"],
+        ["Esc", "Fermer l'aide"],
+      ],
+    },
+    {
+      title: "PANELS",
+      items: [
+        ["CHAT", "Messages et interaction"],
+        ["DAG", "Visualisation du workflow"],
+        ["STATUS", "Agents et providers"],
+      ],
+    },
+  ];
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="double"
+      borderColor="#f97316"
+      paddingX={2}
+    >
+      <Box marginBottom={1}>
+        <Text color="#f97316" bold>■ RAX-FLOW HELP</Text>
+        <Text color="gray"> — [Esc] pour fermer</Text>
+      </Box>
+
+      <Box flexDirection="row" flexGrow={1}>
+        {sections.map((section) => (
+          <Box key={section.title} flexDirection="column" width={30}>
+            <Text color="gray" bold underline>
+              {section.title}
+            </Text>
+            <Box flexDirection="column" marginTop={1}>
+              {section.items.map(([cmd, desc]) => (
+                <Box key={cmd} flexDirection="row" marginBottom={1}>
+                  <Text color="cyan">{cmd.padEnd(16)}</Text>
+                  <Text color="white">{desc}</Text>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+
+      <Box borderStyle="single" borderColor="gray" marginTop={1}>
+        <Text color="gray">Pour exécuter un workflow, tapez simplement votre prompt ou /run "..."</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/LogsPanel.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface LogsPanelProps {
+  logs: string[];
+  isActive: boolean;
+}
+
+export function LogsPanel({ logs, isActive }: LogsPanelProps) {
+  const borderColor = isActive ? "#f97316" : "gray";
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
+        <Text color="#f97316" bold>LOGS</Text>
+        <Text color="gray"> STREAM</Text>
+        {isActive && <Text color="yellow"> [ACTIF]</Text>}
+      </Box>
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+        {logs.slice(-12).map((log, index) => (
+          <Text key={index} color="white" wrap="truncate">
+            {log}
+          </Text>
+        ))}
+        {logs.length === 0 && (
+          <Text color="gray">Aucun log. Lancez un workflow pour voir les logs.</Text>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/MemoryPanel.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface MemoryNode {
+  id: string;
+  type: string;
+  label: string;
+}
+
+interface MemoryEdge {
+  from: string;
+  to: string;
+}
+
+interface MemoryPanelProps {
+  nodes: MemoryNode[];
+  edges: MemoryEdge[];
+  nodeCount: number;
+  cacheHitRate: number;
+  isActive: boolean;
+}
+
+const DEFAULT_NODES: MemoryNode[] = [
+  { id: "1", type: "action", label: "code_gen" },
+  { id: "2", type: "file", label: "auth.ts" },
+  { id: "3", type: "task", label: "login" },
+  { id: "4", type: "test", label: "auth.test" },
+];
+
+const DEFAULT_EDGES: MemoryEdge[] = [
+  { from: "1", to: "2" },
+  { from: "2", to: "3" },
+  { from: "3", to: "4" },
+];
+
+export function MemoryPanel({ nodes, edges, nodeCount, cacheHitRate, isActive }: MemoryPanelProps) {
+  const borderColor = isActive ? "#f97316" : "gray";
+  const displayNodes = nodes.length > 0 ? nodes : DEFAULT_NODES;
+  const displayEdges = edges.length > 0 ? edges : DEFAULT_EDGES;
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
+        <Text color="#f97316" bold>MEMORY</Text>
+        <Text color="gray"> QSGM</Text>
+        {isActive && <Text color="yellow"> [ACTIF]</Text>}
+      </Box>
+
+      <Box flexDirection="column">
+        <Text color="gray" bold>QUANTUM SEMANTIC GRAPH</Text>
+        <Box flexDirection="row" marginTop={1}>
+          <Text color="white">Nodes: </Text>
+          <Text color="cyan" bold>{nodeCount}</Text>
+          <Text color="gray"> │ Cache: </Text>
+          <Text color="green">{cacheHitRate}%</Text>
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color="gray" bold>RECENT NODES</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {displayNodes.slice(0, 5).map((node) => (
+            <Box key={node.id} flexDirection="row">
+              <Text color="gray">[{node.type}]</Text>
+              <Text color="white"> {node.label}</Text>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color="gray" bold>CONNECTIONS</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {displayEdges.slice(0, 4).map((edge, i) => {
+            const fromNode = displayNodes.find((n) => n.id === edge.from);
+            const toNode = displayNodes.find((n) => n.id === edge.to);
+            return (
+              <Box key={i} flexDirection="row">
+                <Text color="white">{fromNode?.label || "?"}</Text>
+                <Text color="#f97316"> ──▶ </Text>
+                <Text color="white">{toNode?.label || "?"}</Text>
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>Mutations this session: +{Math.floor(Math.random() * 4)}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/MetricsPanel.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface MetricsPanelProps {
+  metrics: {
+    sessions: number;
+    avgDuration: number;
+    successRate: number;
+    totalCost: number;
+  };
+  fitness: number;
+  isActive: 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);
+  return (
+    <Text color={percent >= 80 ? "green" : percent >= 50 ? "yellow" : "red"}>
+      {bar}
+    </Text>
+  );
+}
+
+export function MetricsPanel({ metrics, fitness, isActive }: MetricsPanelProps) {
+  const borderColor = isActive ? "#f97316" : "gray";
+
+  return (
+    <Box
+      flexDirection="column"
+      width={30}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
+        <Text color="#f97316" bold>METRICS</Text>
+        {isActive && <Text color="yellow"> [ACTIF]</Text>}
+      </Box>
+
+      <Box flexDirection="column">
+        <Text color="gray" bold>PERFORMANCE</Text>
+        
+        <Box flexDirection="row" marginTop={1}>
+          <Text color="white">Sessions: </Text>
+          <Text color="cyan" bold>{metrics.sessions}</Text>
+        </Box>
+
+        <Box flexDirection="row">
+          <Text color="white">Duration: </Text>
+          <Text color="cyan">{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} />
+        </Box>
+
+        <Box flexDirection="row">
+          <Text color="white">Cost: </Text>
+          <Text color="yellow">${metrics.totalCost.toFixed(4)}</Text>
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color="gray" bold>FITNESS</Text>
+        <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} />
+        </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>
+        <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>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/StatusPanel.tsx

@@ -19,6 +19,7 @@ interface StatusPanelProps {
   providers: Provider[];
   fitness: number;
   currentWorkflow: string | null;
+  isActive: boolean;
 }
 
 const statusIcons: Record<string, { icon: string; color: string }> = {
@@ -28,10 +29,10 @@ const statusIcons: Record<string, { icon: string; color: string }> = {
   done: { icon: "●", color: "green" },
 };
 
-function AgentRow({ agent, key }: { agent: Agent; key?: string }) {
+function AgentRow({ agent }: { agent: Agent }) {
   const { icon, color } = statusIcons[agent.status];
   return (
-    <Box key={key} flexDirection="row" justifyContent="space-between">
+    <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>
@@ -39,9 +40,9 @@ function AgentRow({ agent, key }: { agent: Agent; key?: string }) {
   );
 }
 
-function ProviderRow({ provider, key }: { provider: Provider; key?: string }) {
+function ProviderRow({ provider }: { provider: Provider }) {
   return (
-    <Box key={key} flexDirection="row" justifyContent="space-between">
+    <Box flexDirection="row" justifyContent="space-between">
       <Text color={provider.status === "active" ? "green" : "gray"}>
         {provider.status === "active" ? "●" : "○"}
       </Text>
@@ -51,20 +52,24 @@ function ProviderRow({ provider, key }: { provider: Provider; key?: string }) {
   );
 }
 
-export function StatusPanel({ agents, providers, fitness, currentWorkflow }: StatusPanelProps) {
+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";
 
   return (
-    <Box flexDirection="column" width={35} borderStyle="single" borderColor="gray">
+    <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>
 
       <Box flexDirection="column" paddingX={1}>
         <Text color="gray" bold>WORKFLOW</Text>
         <Text color="white">{currentWorkflow || "Aucun"}</Text>
-        <Text color="gray">Fitness: </Text>
-        <Text color={fitnessColor} bold>{fitness.toFixed(2)}</Text>
+        <Box flexDirection="row">
+          <Text color="gray">Fitness: </Text>
+          <Text color={fitnessColor} bold>{fitness.toFixed(2)}</Text>
+        </Box>
       </Box>
 
       <Box flexDirection="column" paddingX={1} marginTop={1}>