rax-flow 0.1.6 → 0.1.8

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/InputBar.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+
+interface InputBarProps {
+  onSubmit: (input: string) => void;
+  suggestions: string[];
+  isProcessing: boolean;
+}
+
+export function InputBar({ onSubmit, suggestions, isProcessing }: InputBarProps) {
+  const [input, setInput] = useState("");
+
+  const handleSubmit = (value: string) => {
+    if (value.trim()) {
+      onSubmit(value);
+      setInput("");
+    }
+  };
+
+  const filteredSuggestions = suggestions.filter((s) =>
+    s.toLowerCase().startsWith(input.toLowerCase())
+  ).slice(0, 5);
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor="gray" paddingX={1}>
+      {input.startsWith("/") && filteredSuggestions.length > 0 && (
+        <Box flexDirection="row" marginBottom={1}>
+          {filteredSuggestions.map((s) => (
+            <Box key={s} marginRight={2}>
+              <Text color="cyan">{s}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+      <Box flexDirection="row" alignItems="center">
+        <Text color="#f97316" bold>▶</Text>
+        <Box marginLeft={1} flexGrow={1}>
+          <TextInput
+            value={input}
+            onChange={setInput}
+            onSubmit={handleSubmit}
+            placeholder="Tapez /help ou votre prompt..."
+            showCursor={true}
+          />
+        </Box>
+        {isProcessing && <Text color="yellow"> ●</Text>}
+      </Box>
+      <Box flexDirection="row" marginTop={1}>
+        <Text color="gray" dimColor>[Ctrl+C] Quitter</Text>
+        <Text color="gray" dimColor> │ [/cmd] Commandes</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/StatusPanel.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface Agent {
+  name: string;
+  role: string;
+  status: "idle" | "running" | "queued" | "done";
+  provider: string;
+}
+
+interface Provider {
+  name: string;
+  status: "active" | "idle";
+  latency: number;
+}
+
+interface StatusPanelProps {
+  agents: Agent[];
+  providers: Provider[];
+  fitness: number;
+  currentWorkflow: string | null;
+  isActive: boolean;
+}
+
+const statusIcons: Record<string, { icon: string; color: string }> = {
+  idle: { icon: "○", color: "gray" },
+  running: { icon: "▶", color: "yellow" },
+  queued: { icon: "◐", color: "cyan" },
+  done: { icon: "●", color: "green" },
+};
+
+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>
+  );
+}
+
+function ProviderRow({ provider }: { provider: Provider }) {
+  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>
+  );
+}
+
+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={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>
+        <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}>
+        <Text color="gray" bold>AGENTS</Text>
+        {agents.slice(0, 6).map((agent) => (
+          <AgentRow key={agent.name} agent={agent} />
+        ))}
+      </Box>
+
+      <Box flexDirection="column" paddingX={1} marginTop={1}>
+        <Text color="gray" bold>PROVIDERS</Text>
+        {providers.map((provider) => (
+          <ProviderRow key={provider.name} provider={provider} />
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/hooks/useAppState.ts

@@ -0,0 +1,264 @@
+import { useState, useCallback } from "react";
+
+interface Message {
+  id: string;
+  type: "user" | "system" | "agent" | "error" | "success";
+  content: string;
+  timestamp: Date;
+  agent?: string;
+}
+
+interface Agent {
+  name: string;
+  role: string;
+  status: "idle" | "running" | "queued" | "done";
+  provider: string;
+}
+
+interface Provider {
+  name: string;
+  status: "active" | "idle";
+  latency: number;
+}
+
+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 AppState {
+  projectName: string;
+  agentCount: number;
+  provider: string;
+  status: "ready" | "running" | "error";
+  messages: Message[];
+  agents: Agent[];
+  providers: Provider[];
+  fitness: number;
+  currentWorkflow: string | null;
+  suggestions: string[];
+  isProcessing: boolean;
+  workflowState: WorkflowState;
+}
+
+const COMMAND_SUGGESTIONS = [
+  "/run", "/status", "/agents", "/providers", "/workflows",
+  "/logs", "/metrics", "/memory", "/help", "/exit",
+];
+
+const DEFAULT_AGENTS: Agent[] = [
+  { name: "IntentClassifier", role: "Classify intent", status: "idle", provider: "H" },
+  { name: "TaskPlanner", role: "Decompose tasks", status: "idle", provider: "H" },
+  { name: "SpecAgent", role: "Write specs", status: "idle", provider: "H" },
+  { name: "CodeGenerator", role: "Generate code", status: "idle", provider: "H" },
+  { name: "TestAgent", role: "Run tests", status: "idle", provider: "H" },
+  { name: "FixAgent", role: "Fix issues", status: "idle", provider: "H" },
+  { name: "MutationAgent", role: "Evolve workflow", status: "idle", provider: "H" },
+  { name: "ValidatorAgent", role: "Validate outputs", status: "idle", provider: "H" },
+];
+
+const DEFAULT_PROVIDERS: Provider[] = [
+  { name: "Host-Native", status: "active", latency: 12 },
+  { name: "Claude Code", status: "active", latency: 8 },
+  { name: "OpenCode", status: "idle", latency: 0 },
+  { name: "Anthropic", status: "idle", latency: 0 },
+];
+
+const DEFAULT_WORKFLOW_STATE: WorkflowState = {
+  levels: [
+    {
+      name: "L1: SPEC",
+      progress: 0,
+      nodes: [
+        { id: "intent", name: "IntentClassifier", status: "pending", agent: "H" },
+        { id: "spec", name: "SpecAgent", status: "pending", agent: "H" },
+        { id: "arch", name: "ArchitectureAgent", status: "pending", agent: "H" },
+      ],
+    },
+    {
+      name: "L2: CODE",
+      progress: 0,
+      nodes: [
+        { id: "task", name: "TaskPlanner", status: "pending", agent: "H" },
+        { id: "codegen", name: "CodeGenerator", status: "pending", agent: "H" },
+      ],
+    },
+    {
+      name: "L3: TEST",
+      progress: 0,
+      nodes: [
+        { id: "test", name: "TestAgent", status: "pending", agent: "H" },
+        { id: "fix", name: "FixAgent", status: "pending", agent: "H" },
+      ],
+    },
+  ],
+  currentLevel: 0,
+  totalProgress: 0,
+};
+
+function generateId(): string {
+  return Math.random().toString(36).slice(2, 9);
+}
+
+export function useAppState() {
+  const [state, setState] = useState<AppState>({
+    projectName: process.cwd().split("/").pop() || "project",
+    agentCount: 12,
+    provider: "HOST-NATIVE",
+    status: "ready",
+    messages: [
+      {
+        id: generateId(),
+        type: "system",
+        content: "■ RAX-FLOW HUB prêt. Tapez votre prompt ou /help pour les commandes.",
+        timestamp: new Date(),
+      },
+    ],
+    agents: DEFAULT_AGENTS,
+    providers: DEFAULT_PROVIDERS,
+    fitness: 0.87,
+    currentWorkflow: null,
+    suggestions: COMMAND_SUGGESTIONS,
+    isProcessing: false,
+    workflowState: DEFAULT_WORKFLOW_STATE,
+  });
+
+  const addMessage = useCallback((type: Message["type"], content: string, agent?: string) => {
+    setState((prev: AppState) => ({
+      ...prev,
+      messages: [
+        ...prev.messages,
+        { id: generateId(), type, content, timestamp: new Date(), agent },
+      ],
+    }));
+  }, []);
+
+  const updateWorkflowProgress = useCallback((level: number, nodeIndex: number, status: DAGNode["status"]) => {
+    setState((prev: AppState) => {
+      const newLevels = prev.workflowState.levels.map((l, i) => {
+        if (i !== level) return l;
+        const newNodes = l.nodes.map((n, j) => 
+          j === nodeIndex ? { ...n, status } : n
+        );
+        const doneCount = newNodes.filter((n) => n.status === "done").length;
+        return {
+          ...l,
+          nodes: newNodes,
+          progress: Math.round((doneCount / newNodes.length) * 100),
+        };
+      });
+      
+      const totalDone = newLevels.reduce((acc, l) => 
+        acc + l.nodes.filter((n) => n.status === "done").length, 0
+      );
+      const totalNodes = newLevels.reduce((acc, l) => acc + l.nodes.length, 0);
+      
+      return {
+        ...prev,
+        workflowState: {
+          levels: newLevels,
+          currentLevel: level,
+          totalProgress: Math.round((totalDone / totalNodes) * 100),
+        },
+      };
+    });
+  }, []);
+
+  const processCommand = useCallback((input: string) => {
+    if (input.startsWith("/")) {
+      const cmd = input.slice(1).toLowerCase();
+      
+      switch (cmd) {
+        case "help":
+          addMessage("system", `Commandes: /run /status /agents /providers /workflows /logs /metrics /memory /exit`);
+          break;
+        case "status":
+          addMessage("system", `Orchestrator: ● ACTIVE | Fitness: ${state.fitness.toFixed(2)} | Agents: ${state.agents.filter((a: Agent) => a.status !== "idle").length}/8 actifs`);
+          break;
+        case "agents":
+          const agentList = state.agents.map((a: Agent) => `${a.status === "running" ? "▶" : "○"} ${a.name} [${a.provider}]`).join("\n");
+          addMessage("system", agentList);
+          break;
+        case "providers":
+          const providerList = state.providers.map((p: Provider) => `${p.status === "active" ? "●" : "○"} ${p.name} ${p.latency > 0 ? `(${p.latency}ms)` : ""}`).join("\n");
+          addMessage("system", providerList);
+          break;
+        case "exit":
+        case "quit":
+          addMessage("system", "À bientôt !");
+          break;
+        default:
+          if (cmd.startsWith("run ")) {
+            const prompt = cmd.slice(4);
+            runWorkflow(prompt);
+          } else {
+            addMessage("error", `Commande inconnue: /${cmd}. Tapez /help pour l'aide.`);
+          }
+      }
+    } else {
+      runWorkflow(input);
+    }
+  }, [state, addMessage]);
+
+  const runWorkflow = useCallback((prompt: string) => {
+    setState((prev: AppState) => ({ ...prev, status: "running", isProcessing: true }));
+    addMessage("user", prompt);
+    
+    let step = 0;
+    const steps = [
+      { level: 0, node: 0, msg: "Analyse de l'intent...", agent: "IntentClassifier" },
+      { level: 0, node: 1, msg: "Génération des specs...", agent: "SpecAgent" },
+      { level: 0, node: 2, msg: "Design de l'architecture...", agent: "ArchitectureAgent" },
+      { level: 1, node: 0, msg: "Planification des tâches...", agent: "TaskPlanner" },
+      { level: 1, node: 1, msg: "Génération du code...", agent: "CodeGenerator" },
+      { level: 2, node: 0, msg: "Exécution des tests...", agent: "TestAgent" },
+      { level: 2, node: 1, msg: "Application des fixes...", agent: "FixAgent" },
+    ];
+
+    function executeStep() {
+      if (step >= steps.length) {
+        setState((prev: AppState) => ({
+          ...prev,
+          status: "ready",
+          isProcessing: false,
+          fitness: Math.min(prev.fitness + 0.05, 0.99),
+          currentWorkflow: prompt,
+        }));
+        addMessage("success", `✓ Workflow terminé! Fitness: ${(state.fitness + 0.05).toFixed(2)}`);
+        return;
+      }
+
+      const s = steps[step];
+      updateWorkflowProgress(s.level, s.node, "running");
+      addMessage("agent", s.msg, s.agent);
+
+      setTimeout(() => {
+        updateWorkflowProgress(s.level, s.node, "done");
+        step++;
+        executeStep();
+      }, 500 + Math.random() * 500);
+    }
+
+    executeStep();
+  }, [addMessage, updateWorkflowProgress, state.fitness]);
+
+  return {
+    state,
+    dispatch: setState,
+    processCommand,
+  };
+}

package/src/tui/index.ts

@@ -0,0 +1,9 @@
+import { render } from "ink";
+import React from "react";
+import { App } from "./App.js";
+
+export function startTUI() {
+  return render(React.createElement(App));
+}
+
+export { App } from "./App.js";

package/tsconfig.json

@@ -14,10 +14,6 @@
     "src/**/*.ts",
     "src/**/*.tsx"
   ],
-  "exclude": [
-    "src/hub/tui/**/*",
-    "src/hub/chat/**/*"
-  ],
   "references": [
     {
       "path": "../core"