rax-flow 0.1.6 → 0.1.7

package/src/tui/components/ChatPanel.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+
+interface Message {
+  id: string;
+  type: "user" | "system" | "agent" | "error" | "success";
+  content: string;
+  timestamp: Date;
+  agent?: string;
+}
+
+interface ChatPanelProps {
+  messages: Message[];
+  isProcessing: boolean;
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString("fr-FR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function MessageItem({ message }: { message: Message; key?: string }) {
+  const typeColors: Record<string, string> = {
+    user: "cyan",
+    system: "gray",
+    agent: "#f97316",
+    error: "red",
+    success: "green",
+  };
+
+  const typeLabels: Record<string, string> = {
+    user: "YOU",
+    system: "SYS",
+    agent: message.agent || "AGENT",
+    error: "ERR",
+    success: "OK",
+  };
+
+  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>}
+      </Box>
+      <Text color="white">{message.content}</Text>
+    </Box>
+  );
+}
+
+export function ChatPanel({ messages, isProcessing }: ChatPanelProps) {
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={2}
+      borderStyle="single"
+      borderColor="gray"
+      paddingX={1}
+    >
+      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
+        <Text color="#f97316" bold>CHAT</Text>
+        <Text color="gray"> — Tapez /help pour les commandes</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>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/Header.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface HeaderProps {
+  projectName: string;
+  agentCount: number;
+  provider: string;
+  status: "ready" | "running" | "error";
+}
+
+export function Header({ projectName, agentCount, provider, status }: HeaderProps) {
+  const statusColors = {
+    ready: "green",
+    running: "yellow",
+    error: "red",
+  };
+
+  const statusText = {
+    ready: "READY",
+    running: "RUNNING",
+    error: "ERROR",
+  };
+
+  const statusIcon = status === "running" ? "▶" : status === "error" ? "✗" : "●";
+
+  return (
+    <Box
+      flexDirection="row"
+      justifyContent="space-between"
+      alignItems="center"
+      paddingX={1}
+      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>
+      <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>
+    </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,85 @@
+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;
+}
+
+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, key }: { agent: Agent; key?: string }) {
+  const { icon, color } = statusIcons[agent.status];
+  return (
+    <Box key={key} 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, key }: { provider: Provider; key?: string }) {
+  return (
+    <Box key={key} 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 }: StatusPanelProps) {
+  const fitnessColor = fitness >= 0.9 ? "green" : fitness >= 0.7 ? "yellow" : "red";
+
+  return (
+    <Box flexDirection="column" width={35} borderStyle="single" borderColor="gray">
+      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
+        <Text color="#f97316" bold>STATUS</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>
+
+      <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,168 @@
+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 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;
+}
+
+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 },
+];
+
+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,
+  });
+
+  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 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);
+            setState((prev: AppState) => ({ ...prev, status: "running", isProcessing: true }));
+            addMessage("user", prompt);
+            addMessage("agent", "Analyse de l'intent...", "IntentClassifier");
+            setTimeout(() => {
+              addMessage("agent", `Intent détecté: code_generation`, "IntentClassifier");
+              addMessage("agent", "Décomposition en tâches...", "TaskPlanner");
+              setState((prev: AppState) => ({
+                ...prev,
+                status: "ready",
+                isProcessing: false,
+                fitness: Math.min(prev.fitness + 0.02, 0.99),
+                currentWorkflow: prompt,
+                agents: prev.agents.map((a: Agent, i: number) => ({
+                  ...a,
+                  status: i === 0 ? "done" as const : i === 1 ? "running" as const : "idle" as const,
+                })),
+              }));
+            }, 1500);
+          } else {
+            addMessage("error", `Commande inconnue: /${cmd}. Tapez /help pour l'aide.`);
+          }
+      }
+    } else {
+      setState((prev: AppState) => ({ ...prev, status: "running", isProcessing: true }));
+      addMessage("user", input);
+      addMessage("agent", "Analyse de l'intent...", "IntentClassifier");
+      setTimeout(() => {
+        addMessage("agent", `Intent détecté: code_generation`, "IntentClassifier");
+        addMessage("agent", "Exécution du workflow...", "Orchestrator");
+        setState((prev: AppState) => ({
+          ...prev,
+          status: "ready",
+          isProcessing: false,
+          fitness: Math.min(prev.fitness + 0.01, 0.99),
+          currentWorkflow: input,
+        }));
+      }, 2000);
+    }
+  }, [state, addMessage]);
+
+  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"