rax-flow 0.1.8 → 0.1.9

package/dist/tui/services/orchestrator.d.ts

@@ -0,0 +1,16 @@
+import { RuntimeEvent, WorkflowGraph } from "rax-flow-core";
+export interface OrchestratorService {
+    run(prompt: string): Promise<void>;
+    onEvent(handler: (event: RuntimeEvent) => void): () => void;
+    getStatus(): OrchestratorStatus;
+    stop(): void;
+}
+export interface OrchestratorStatus {
+    isRunning: boolean;
+    currentTaskId: string | null;
+    workflow: WorkflowGraph | null;
+    fitness: number;
+}
+export declare function createOrchestrator(): OrchestratorService;
+export type { RuntimeEvent, WorkflowGraph };
+//# sourceMappingURL=orchestrator.d.ts.map

package/dist/tui/services/orchestrator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orchestrator.d.ts","sourceRoot":"","sources":["../../../src/tui/services/orchestrator.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EAGZ,aAAa,EAKd,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,mBAAmB;IAClC,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5D,SAAS,IAAI,kBAAkB,CAAC;IAChC,IAAI,IAAI,IAAI,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;CACjB;AA4DD,wBAAgB,kBAAkB,IAAI,mBAAmB,CAuDxD;AAED,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/tui/services/orchestrator.js

@@ -0,0 +1,108 @@
+import { CoreOrchestrator, } from "rax-flow-core";
+function createMockProvider() {
+    return {
+        async callModel(prompt, options) {
+            await new Promise((r) => setTimeout(r, 300 + Math.random() * 500));
+            return {
+                provider: "mock",
+                model: "mock-model",
+                latencyMs: 300 + Math.floor(Math.random() * 200),
+                output: `Processed: ${prompt.slice(0, 50)}...`,
+                usage: { promptTokens: 100, completionTokens: 50, totalTokens: 150 },
+            };
+        },
+        async callStructured(prompt, schema, options) {
+            const response = await this.callModel(prompt, options);
+            return {
+                ...response,
+                output: {},
+            };
+        },
+        async healthCheck() {
+            return true;
+        },
+    };
+}
+function createAgent(name, role) {
+    return {
+        name,
+        role,
+        activationWhen: `intent == "${name.toLowerCase()}"`,
+        inputSchema: { type: "object" },
+        outputSchema: { type: "object" },
+        async run(input) {
+            await new Promise((r) => setTimeout(r, 200 + Math.random() * 300));
+            return {
+                agent: name,
+                success: true,
+                confidence: 0.85 + Math.random() * 0.1,
+                risks: [],
+                logs: [`Executed ${name}`],
+                data: { result: `Processed: ${input.userPrompt.slice(0, 50)}...` },
+                usage: { promptTokens: 100, completionTokens: 50, totalTokens: 150 },
+            };
+        },
+    };
+}
+const DEFAULT_AGENTS = [
+    createAgent("IntentClassifier", "Classifies user intent"),
+    createAgent("TaskPlanner", "Decomposes tasks"),
+    createAgent("SpecAgent", "Writes specifications"),
+    createAgent("ArchitectureAgent", "Designs architecture"),
+    createAgent("CodeGenerator", "Generates code"),
+    createAgent("TestAgent", "Runs tests"),
+    createAgent("FixAgent", "Fixes issues"),
+    createAgent("ValidatorAgent", "Validates outputs"),
+];
+export function createOrchestrator() {
+    const providers = {
+        host: createMockProvider(),
+    };
+    const agents = {};
+    for (const agent of DEFAULT_AGENTS) {
+        agents[agent.name] = agent;
+    }
+    const orchestrator = new CoreOrchestrator(providers, agents);
+    let isRunning = false;
+    let currentTaskId = null;
+    let fitness = 0.87;
+    orchestrator.initialize().catch(() => { });
+    return {
+        async run(prompt) {
+            if (isRunning)
+                return;
+            isRunning = true;
+            currentTaskId = `task-${Date.now()}`;
+            try {
+                await orchestrator.run({
+                    taskId: currentTaskId,
+                    userPrompt: prompt,
+                });
+                fitness = Math.min(fitness + 0.02, 0.99);
+            }
+            catch (error) {
+                console.error("Orchestrator error:", error);
+            }
+            finally {
+                currentTaskId = null;
+                isRunning = false;
+            }
+        },
+        onEvent(handler) {
+            return orchestrator.onEvent(handler);
+        },
+        getStatus() {
+            return {
+                isRunning,
+                currentTaskId,
+                workflow: null,
+                fitness,
+            };
+        },
+        stop() {
+            isRunning = false;
+            currentTaskId = null;
+        },
+    };
+}
+//# sourceMappingURL=orchestrator.js.map

package/dist/tui/services/orchestrator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orchestrator.js","sourceRoot":"","sources":["../../../src/tui/services/orchestrator.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-flow",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/tui/App.tsx

@@ -1,14 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } 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 { DAGPanel } from "./components/DAGPanel.js";
+import { LogsPanel } from "./components/LogsPanel.js";
+import { MetricsPanel } from "./components/MetricsPanel.js";
+import { MemoryPanel } from "./components/MemoryPanel.js";
 import { InputBar } from "./components/InputBar.js";
 import { HelpOverlay } from "./components/HelpOverlay.js";
 import { useAppState } from "./hooks/useAppState.js";
 
-type ActivePanel = "chat" | "dag" | "status";
+type ActivePanel = "chat" | "dag" | "status" | "logs" | "metrics" | "memory";
+
+const PANEL_ORDER: ActivePanel[] = ["chat", "dag", "status", "logs", "metrics", "memory"];
 
 export function App() {
   const { exit } = useApp();
@@ -16,6 +21,7 @@ export function App() {
   const [activePanel, setActivePanel] = useState<ActivePanel>("chat");
   const [showHelp, setShowHelp] = useState(false);
   const [tick, setTick] = useState(0);
+  const [viewMode, setViewMode] = useState<"full" | "compact">("full");
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -32,7 +38,9 @@ export function App() {
       exit();
     }
     if (key.escape) {
-      setShowHelp(false);
+      if (showHelp) {
+        setShowHelp(false);
+      }
     }
     if (input === "?" && !showHelp) {
       setShowHelp(true);
@@ -40,13 +48,14 @@ export function App() {
     }
     if (showHelp) return;
 
-    if (key.return && input === "") {
-    }
-    
     if (key.tab) {
-      const panels: ActivePanel[] = ["chat", "dag", "status"];
-      const currentIndex = panels.indexOf(activePanel);
-      setActivePanel(panels[(currentIndex + 1) % panels.length]);
+      const currentIndex = PANEL_ORDER.indexOf(activePanel);
+      const nextIndex = (currentIndex + 1) % PANEL_ORDER.length;
+      setActivePanel(PANEL_ORDER[nextIndex]);
+    }
+
+    if (key.leftArrow) {
+      setViewMode(viewMode === "full" ? "compact" : "full");
     }
   });
 
@@ -77,7 +86,7 @@ export function App() {
         tick={tick}
         activePanel={activePanel}
       />
-      
+
       {showHelp ? (
         <HelpOverlay onDismiss={() => setShowHelp(false)} />
       ) : (
@@ -93,13 +102,37 @@ export function App() {
               tick={tick}
               isActive={activePanel === "dag"}
             />
-            <StatusPanel
-              agents={state.agents}
-              providers={state.providers}
-              fitness={state.fitness}
-              currentWorkflow={state.currentWorkflow}
-              isActive={activePanel === "status"}
-            />
+            {viewMode === "full" && (
+              <>
+                <LogsPanel
+                  logs={state.logs}
+                  isActive={activePanel === "logs"}
+                />
+                <Box flexDirection="column">
+                  <MetricsPanel
+                    metrics={state.metrics}
+                    fitness={state.fitness}
+                    isActive={activePanel === "metrics"}
+                  />
+                  <MemoryPanel
+                    nodes={[]}
+                    edges={[]}
+                    nodeCount={247}
+                    cacheHitRate={94}
+                    isActive={activePanel === "memory"}
+                  />
+                </Box>
+              </>
+            )}
+            {viewMode === "compact" && (
+              <StatusPanel
+                agents={state.agents}
+                providers={state.providers}
+                fitness={state.fitness}
+                currentWorkflow={state.currentWorkflow}
+                isActive={activePanel === "status"}
+              />
+            )}
           </Box>
           <InputBar
             onSubmit={handleSubmit}

package/src/tui/components/Header.tsx

@@ -15,6 +15,9 @@ 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) {
@@ -34,6 +37,8 @@ export function Header({ projectName, agentCount, provider, status, tick, active
     ? spinnerFrames[tick % spinnerFrames.length]
     : status === "error" ? "✗" : "●";
 
+  const panels = ["chat", "dag", "logs", "metrics", "memory"] as const;
+
   return (
     <Box
       flexDirection="column"
@@ -61,15 +66,19 @@ export function Header({ projectName, agentCount, provider, status, tick, active
           <Text color={statusColors[status]}> {animatedStatus} {statusText[status]}</Text>
         </Box>
       </Box>
-      <Box flexDirection="row" paddingX={1}>
-        {(["chat", "dag", "status"] as const).map((panel) => (
-          <Box key={panel} marginRight={2}>
-            <Text color={activePanel === panel ? "#f97316" : "gray"} bold={activePanel === panel}>
-              [{panelNames[panel]}]
-            </Text>
-          </Box>
-        ))}
-        <Text color="gray">| Tab: Changer │ ?: Aide │ Ctrl+C: Quitter</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/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>
+  );
+}