rax-flow 0.1.5 → 0.1.7

package/src/hub/styles/typography.ts

@@ -0,0 +1,68 @@
+// RAX-FLOW Design System - Typography
+// Space Grotesk for titles, Space Mono for system text
+
+export const typography = {
+  // Font families
+  primary: "Space Grotesk",
+  monospace: "Space Mono",
+
+  // Font weights
+  weights: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    bold: 700,
+  },
+
+  // Sizes (in terminal columns roughly)
+  sizes: {
+    hero: 4,      // text-4xl
+    section: 2,   // text-2xl
+    label: 0,     // text-[10px]
+    body: 1,      // text-sm
+    code: 0,      // text-xs
+    status: -1,   // text-[9px]
+    agent: 0,     // text-xs
+    provider: -1, // text-[9px]
+  },
+
+  // Tracking (letter-spacing)
+  tracking: {
+    none: "",
+    tight: "",
+    normal: "",
+    wide: " ",
+    label: "  ", // 0.15em equivalent in monospace
+  },
+};
+
+// Text formatting utilities for terminal
+export function upperCase(text: string): string {
+  return text.toUpperCase();
+}
+
+export function padCenter(text: string, width: number): string {
+  const padding = Math.max(0, width - text.length);
+  const leftPad = Math.floor(padding / 2);
+  const rightPad = padding - leftPad;
+  return " ".repeat(leftPad) + text + " ".repeat(rightPad);
+}
+
+export function padRight(text: string, width: number): string {
+  const padding = Math.max(0, width - text.length);
+  return text + " ".repeat(padding);
+}
+
+export function padLeft(text: string, width: number): string {
+  const padding = Math.max(0, width - text.length);
+  return " ".repeat(padding) + text;
+}
+
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + "...";
+}
+
+export function formatLabel(text: string): string {
+  return upperCase(text).split("").join(" ");
+}

package/src/hub/types.ts

@@ -0,0 +1,31 @@
+export interface HubOptions {
+  cwd: string;
+  config?: HubConfig;
+}
+
+export interface HubConfig {
+  project?: string;
+  providers?: string[];
+  theme?: 'industrial' | 'minimal' | 'high-contrast';
+}
+
+export interface Command {
+  name: string;
+  args: string[];
+  flags: Record<string, string | boolean>;
+}
+
+export interface HubContext {
+  currentWorkflow?: string;
+  currentRun?: string;
+  config: HubConfig;
+}
+
+export type CommandHandler = (args: string[], flags: Record<string, string | boolean>, context: HubContext) => Promise<void>;
+
+export interface CommandDefinition {
+  name: string;
+  description: string;
+  handler: CommandHandler;
+  aliases?: string[];
+}

package/src/tui/App.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { Header } from "./components/Header.js";
+import { ChatPanel } from "./components/ChatPanel.js";
+import { StatusPanel } from "./components/StatusPanel.js";
+import { InputBar } from "./components/InputBar.js";
+import { useAppState } from "./hooks/useAppState.js";
+
+export function App() {
+  const { exit } = useApp();
+  const { state, dispatch, processCommand } = useAppState();
+
+  useInput((input, key) => {
+    if (key.ctrl && input === "c") {
+      exit();
+    }
+    if (key.ctrl && input === "d") {
+      exit();
+    }
+  });
+
+  const handleSubmit = (input: string) => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    if (trimmed === "exit" || trimmed === "quit") {
+      exit();
+      return;
+    }
+
+    processCommand(trimmed);
+  };
+
+  return (
+    <Box flexDirection="column" height="100%" width="100%">
+      <Header
+        projectName={state.projectName}
+        agentCount={state.agentCount}
+        provider={state.provider}
+        status={state.status}
+      />
+      <Box flexGrow={1} flexDirection="row" width="100%">
+        <ChatPanel
+          messages={state.messages}
+          isProcessing={state.isProcessing}
+        />
+        <StatusPanel
+          agents={state.agents}
+          providers={state.providers}
+          fitness={state.fitness}
+          currentWorkflow={state.currentWorkflow}
+        />
+      </Box>
+      <InputBar
+        onSubmit={handleSubmit}
+        suggestions={state.suggestions}
+        isProcessing={state.isProcessing}
+      />
+    </Box>
+  );
+}

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

@@ -5,8 +5,24 @@
     "outDir": "dist",
     "composite": true,
     "declaration": true,
-    "declarationMap": true
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "esModuleInterop": true
   },
-  "include": ["src/**/*.ts"],
-  "references": [{ "path": "../core" }, { "path": "../agents" }, { "path": "../providers" }]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../core"
+    },
+    {
+      "path": "../agents"
+    },
+    {
+      "path": "../providers"
+    }
+  ]
 }