rax-flow 0.1.8 → 0.2.0

package/src/tui/components/HelpOverlay.tsx

@@ -1,83 +1,140 @@
-import React from "react";
-import { Box, Text, useInput } from "ink";
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors } from "../styles/index.js";
 
 interface HelpOverlayProps {
   onDismiss: () => void;
 }
 
-export function HelpOverlay({ onDismiss }: HelpOverlayProps) {
-  useInput((input, key) => {
-    if (key.escape || input === "q") {
-      onDismiss();
-    }
-  });
+const COMMAND_SECTIONS = [
+  {
+    title: "EXECUTION",
+    items: [
+      ["run <prompt>", "Execute workflow"],
+      ["run -w <file>", "With blueprint"],
+      ["run -p <n>", "Max parallel agents"],
+      ["retry", "Relaunch last workflow"],
+      ["stop / pause", "Control execution"],
+    ],
+  },
+  {
+    title: "NAVIGATION",
+    items: [
+      ["status", "System overview"],
+      ["agents", "Agent list & status"],
+      ["providers", "Provider status"],
+      ["workflows", "Available blueprints"],
+      ["memory", "QSGM graph view"],
+    ],
+  },
+  {
+    title: "MONITORING",
+    items: [
+      ["logs", "Real-time logs"],
+      ["logs -f", "Follow mode"],
+      ["metrics", "Performance stats"],
+      ["evolve", "Evolution history"],
+      ["doctor", "System diagnostic"],
+    ],
+  },
+];
 
-  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"],
-      ],
-    },
-  ];
+const KEYBOARD_SHORTCUTS = [
+  ["Tab", "Cycle panels"],
+  ["F1-F8", "Jump to panel"],
+  ["Ctrl+C", "Quit"],
+  ["Esc", "Close overlay"],
+  ["?", "Toggle help"],
+];
+
+const FUNCTION_KEYS = [
+  { key: "F1", label: "Help" },
+  { key: "F2", label: "Agents" },
+  { key: "F3", label: "Providers" },
+  { key: "F4", label: "Workflows" },
+  { key: "F5", label: "Logs" },
+  { key: "F6", label: "Metrics" },
+  { key: "F7", label: "Memory" },
+  { key: "F8", label: "Dashboard" },
+];
+
+export const HelpOverlay = memo(function HelpOverlay({ onDismiss }: HelpOverlayProps) {
+  const functionKeyElements = useMemo(() => 
+    FUNCTION_KEYS.map((fn) => (
+      <Box key={fn.key} marginRight={2}>
+        <Text color={tuiColors.primary}>[{fn.key}]</Text>
+        <Text color={tuiColors.textSecondary}> {fn.label}</Text>
+      </Box>
+    )),
+    []
+  );
+
+  const sectionElements = useMemo(() => 
+    COMMAND_SECTIONS.map((section) => (
+      <Box key={section.title} flexDirection="column" width={28} marginRight={2}>
+        <Text color={tuiColors.primary} bold>┌─ {section.title} ──────────────</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {section.items.map(([cmd, desc]) => (
+            <Box key={cmd} flexDirection="row" marginBottom={1}>
+              <Text color={tuiColors.textPrimary}>{cmd.padEnd(14)}</Text>
+              <Text color={tuiColors.textTertiary}>{desc}</Text>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )),
+    []
+  );
+
+  const shortcutElements = useMemo(() => 
+    KEYBOARD_SHORTCUTS.map(([key, action]) => (
+      <Box key={key} marginRight={3}>
+        <Text color={tuiColors.textPrimary}>[{key.padEnd(6)}]</Text>
+        <Text color={tuiColors.textTertiary}> {action}</Text>
+      </Box>
+    )),
+    []
+  );
 
   return (
     <Box
       flexDirection="column"
       flexGrow={1}
-      borderStyle="double"
-      borderColor="#f97316"
+      borderStyle="single"
+      borderColor={tuiColors.primary}
       paddingX={2}
     >
       <Box marginBottom={1}>
-        <Text color="#f97316" bold>■ RAX-FLOW HELP</Text>
-        <Text color="gray"> — [Esc] pour fermer</Text>
+        <Text color={tuiColors.primary} bold>■ RAX-FLOW HELP</Text>
+        <Text color={tuiColors.textTertiary}> ── Press [Esc] or [q] to close</Text>
+      </Box>
+
+      <Box borderStyle="single" borderColor={tuiColors.border} marginBottom={1}>
+        <Text color={tuiColors.textTertiary}>
+          Orchestrator that Evolves with Your Host Tools
+        </Text>
+      </Box>
+
+      <Box flexDirection="row" marginBottom={1}>
+        {functionKeyElements}
       </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>
-        ))}
+        {sectionElements}
       </Box>
 
-      <Box borderStyle="single" borderColor="gray" marginTop={1}>
-        <Text color="gray">Pour exécuter un workflow, tapez simplement votre prompt ou /run "..."</Text>
+      <Box marginTop={1}>
+        <Text color={tuiColors.primary} bold>┌─ KEYBOARD ─────────────────────────────────────</Text>
+      </Box>
+      <Box flexDirection="row">
+        {shortcutElements}
+      </Box>
+
+      <Box borderStyle="single" borderColor={tuiColors.border} marginTop={1}>
+        <Text color={tuiColors.textTertiary}>
+          Type your prompt to execute a workflow, or use /run "..." for explicit execution
+        </Text>
       </Box>
     </Box>
   );
-}
+});

package/src/tui/components/InputBar.tsx

@@ -1,55 +1,69 @@
-import React, { useState } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useState, memo, useMemo, useCallback } from "react";
+import { Box, Text } from "ink";
 import TextInput from "ink-text-input";
+import { tuiColors } from "../styles/index.js";
 
 interface InputBarProps {
   onSubmit: (input: string) => void;
   suggestions: string[];
   isProcessing: boolean;
+  projectName: string;
 }
 
-export function InputBar({ onSubmit, suggestions, isProcessing }: InputBarProps) {
+export const InputBar = memo(function InputBar({ onSubmit, suggestions, isProcessing, projectName }: InputBarProps) {
   const [input, setInput] = useState("");
 
-  const handleSubmit = (value: string) => {
+  const handleSubmit = useCallback((value: string) => {
     if (value.trim()) {
       onSubmit(value);
       setInput("");
     }
-  };
+  }, [onSubmit]);
 
-  const filteredSuggestions = suggestions.filter((s) =>
-    s.toLowerCase().startsWith(input.toLowerCase())
-  ).slice(0, 5);
+  const handleChange = useCallback((value: string) => {
+    setInput(value);
+  }, []);
+
+  const filteredSuggestions = useMemo(() => 
+    suggestions.filter((s) =>
+      s.toLowerCase().startsWith(input.toLowerCase())
+    ).slice(0, 5),
+    [suggestions, input]
+  );
+
+  const showSuggestions = input.startsWith("/") && filteredSuggestions.length > 0;
 
   return (
-    <Box flexDirection="column" borderStyle="single" borderColor="gray" paddingX={1}>
-      {input.startsWith("/") && filteredSuggestions.length > 0 && (
+    <Box flexDirection="column" borderStyle="single" borderColor={tuiColors.border} paddingX={1}>
+      {showSuggestions && (
         <Box flexDirection="row" marginBottom={1}>
           {filteredSuggestions.map((s) => (
             <Box key={s} marginRight={2}>
-              <Text color="cyan">{s}</Text>
+              <Text color={tuiColors.primary}>{s}</Text>
             </Box>
           ))}
         </Box>
       )}
       <Box flexDirection="row" alignItems="center">
-        <Text color="#f97316" bold>▶</Text>
-        <Box marginLeft={1} flexGrow={1}>
+        <Text color={tuiColors.primary} bold>rax-flow://</Text>
+        <Text color={tuiColors.textSecondary}>{projectName}</Text>
+        <Text color={tuiColors.textPrimary}> &gt; </Text>
+        <Box flexGrow={1}>
           <TextInput
             value={input}
-            onChange={setInput}
+            onChange={handleChange}
             onSubmit={handleSubmit}
-            placeholder="Tapez /help ou votre prompt..."
+            placeholder="Enter prompt or /help..."
             showCursor={true}
           />
         </Box>
-        {isProcessing && <Text color="yellow"> ●</Text>}
+        {isProcessing && <Text color={tuiColors.warning}> ●</Text>}
       </Box>
       <Box flexDirection="row" marginTop={1}>
-        <Text color="gray" dimColor>[Ctrl+C] Quitter</Text>
-        <Text color="gray" dimColor> │ [/cmd] Commandes</Text>
+        <Text color={tuiColors.textQuaternary}>[Ctrl+C] Quit</Text>
+        <Text color={tuiColors.textQuaternary}> │ [/cmd] Commands</Text>
+        <Text color={tuiColors.textQuaternary}> │ [?] Help</Text>
       </Box>
     </Box>
   );
-}
+});

package/src/tui/components/LogsPanel.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, memo, useRef, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, logStatusTags } from "../styles/index.js";
+import { Spinner } from "./animations/index.js";
+
+interface LogsPanelProps {
+  logs: string[];
+  isActive: boolean;
+  isStreaming?: boolean;
+}
+
+const MAX_DISPLAYED_LOGS = 12;
+const HIGHLIGHT_DURATION = 2000;
+
+interface ParsedLog {
+  time: string;
+  tag: string;
+  message: string;
+  color: string;
+}
+
+function parseLogLine(log: string): ParsedLog | null {
+  const timeMatch = log.match(/\[(\d{2}:\d{2}:\d{2}(?:\.\d+)?)\]/);
+  const tagMatch = log.match(/\[(\w+)\]/g);
+  
+  if (!timeMatch || !tagMatch || tagMatch.length < 2) {
+    return null;
+  }
+
+  const time = timeMatch[1];
+  const tag = tagMatch[1].replace(/[\[\]]/g, "").toUpperCase();
+  
+  const tagConfig = Object.values(logStatusTags).find(t => t.tag.toUpperCase().includes(tag));
+  const color = tagConfig?.color || tuiColors.textTertiary;
+
+  const messageStart = log.indexOf(tagMatch[1]) + tagMatch[1].length;
+  const message = log.slice(messageStart).trim();
+
+  return { time, tag, message, color };
+}
+
+interface LogLineProps {
+  log: string;
+  isNew?: boolean;
+}
+
+const LogLine = memo(function LogLine({ log, isNew }: LogLineProps) {
+  const parsed = useMemo(() => parseLogLine(log), [log]);
+
+  if (!parsed) {
+    return <Text color={tuiColors.textPrimary}>{log}</Text>;
+  }
+
+  const paddedTag = useMemo(() => parsed.tag.padEnd(7), [parsed.tag]);
+
+  return (
+    <Box flexDirection="row">
+      <Text color={tuiColors.textTertiary}>[{parsed.time}]</Text>
+      <Text color={parsed.color} bold> [{paddedTag}]</Text>
+      <Text color={isNew ? tuiColors.textPrimary : tuiColors.textSecondary}> {parsed.message}</Text>
+    </Box>
+  );
+});
+
+export const LogsPanel = memo(function LogsPanel({ logs, isActive, isStreaming = false }: LogsPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const displayLogs = useMemo(() => logs.slice(-MAX_DISPLAYED_LOGS), [logs]);
+
+  useEffect(() => {
+    if (logs.length === 0) return;
+    
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    
+    setHighlightedIndex(logs.length - 1);
+    timeoutRef.current = setTimeout(() => {
+      setHighlightedIndex(null);
+    }, HIGHLIGHT_DURATION);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [logs.length]);
+
+  const logElements = useMemo(() => 
+    displayLogs.map((log, index) => {
+      const logIndex = logs.length - MAX_DISPLAYED_LOGS + index;
+      const isNew = logIndex === highlightedIndex;
+      return <LogLine key={`${logIndex}-${index}`} log={log} isNew={isNew} />;
+    }),
+    [displayLogs, logs.length, highlightedIndex]
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> LOGS_STREAM </Text>
+        <Text color={tuiColors.textTertiary}>────────────────────────────</Text>
+        {isStreaming && (
+          <Box flexDirection="row">
+            <Text color={tuiColors.warning}> </Text>
+            <Spinner type="dots" color={tuiColors.warning} />
+          </Box>
+        )}
+      </Box>
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+        {logElements}
+        {logs.length === 0 && (
+          <Text color={tuiColors.textTertiary}>No logs. Start a workflow to see logs.</Text>
+        )}
+        {isStreaming && logs.length === 0 && (
+          <Box flexDirection="row">
+            <Spinner type="dots" color={tuiColors.warning} />
+            <Text color={tuiColors.textTertiary}> Waiting for logs...</Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+});

package/src/tui/components/MemoryPanel.tsx

@@ -0,0 +1,163 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, treeChars } from "../styles/index.js";
+import { Pulse } from "./animations/index.js";
+
+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;
+  tick?: number;
+}
+
+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" },
+  { id: "5", type: "fix", label: "patch_001" },
+];
+
+const DEFAULT_EDGES: MemoryEdge[] = [
+  { from: "1", to: "2" },
+  { from: "2", to: "3" },
+  { from: "3", to: "4" },
+  { from: "4", to: "5" },
+  { from: "2", to: "5" },
+];
+
+const NODE_TYPE_COLORS: Record<string, string> = {
+  action: tuiColors.primary,
+  file: tuiColors.success,
+  task: tuiColors.warning,
+  test: tuiColors.textSecondary,
+  fix: tuiColors.error,
+};
+
+interface NodeTypeBadgeProps {
+  type: string;
+  isActive?: boolean;
+}
+
+const NodeTypeBadge = memo(function NodeTypeBadge({ type, isActive }: NodeTypeBadgeProps) {
+  const color = NODE_TYPE_COLORS[type] || tuiColors.textTertiary;
+  return (
+    <Box flexDirection="row">
+      {isActive && <Pulse interval={400} color={color} type="pulse" />}
+      <Text color={color}>[{type}]</Text>
+    </Box>
+  );
+});
+
+export const MemoryPanel = memo(function MemoryPanel({ 
+  nodes, 
+  edges, 
+  nodeCount = 0, 
+  cacheHitRate = 0, 
+  isActive = false,
+  tick = 0
+}: MemoryPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  
+  const displayNodes = (nodes && nodes.length > 0) ? nodes : DEFAULT_NODES;
+  const displayEdges = (edges && edges.length > 0) ? edges : DEFAULT_EDGES;
+  const displayNodeCount = nodeCount > 0 ? nodeCount : 247;
+  const displayCacheHitRate = cacheHitRate > 0 ? cacheHitRate : 94;
+
+  const activeNodeIndex = isActive ? tick % 4 : -1;
+
+  const nodeElements = useMemo(() => 
+    displayNodes.slice(0, 4).map((node, idx) => {
+      const isLast = idx === Math.min(3, displayNodes.length - 1);
+      const isNodeActive = idx === activeNodeIndex;
+      return (
+        <Box key={node.id} flexDirection="row">
+          <Text color={tuiColors.textTertiary}>{treeChars.vertical}  </Text>
+          <NodeTypeBadge type={node.type} isActive={isNodeActive} />
+          <Text color={tuiColors.textPrimary}> {node.label}</Text>
+          {!isLast && (
+            <Text color={tuiColors.primary}> ──▶</Text>
+          )}
+        </Box>
+      );
+    }),
+    [displayNodes, activeNodeIndex]
+  );
+
+  const edgeElements = useMemo(() => 
+    displayEdges.slice(0, 3).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={tuiColors.textSecondary}>{treeChars.branch}</Text>
+          <Text color={tuiColors.textPrimary}> {fromNode?.label || "?"}</Text>
+          <Text color={tuiColors.primary}> ──▶ </Text>
+          <Text color={tuiColors.textPrimary}>{toNode?.label || "?"}</Text>
+        </Box>
+      );
+    }),
+    [displayEdges, displayNodes]
+  );
+
+  const mutationCount = useMemo(() => Math.floor(Math.random() * 4) + 1, [tick]);
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> QSGM </Text>
+        <Text color={tuiColors.textTertiary}>── nodes: {displayNodeCount} ──</Text>
+        {isActive && <Pulse interval={500} color={tuiColors.primary} type="pulse" />}
+      </Box>
+
+      <Box flexDirection="column">
+        <Text color={tuiColors.textTertiary} bold>QUANTUM_SEMANTIC_GRAPH_MEMORY</Text>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={tuiColors.textTertiary} bold>GRAPH VISUALIZATION</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {nodeElements}
+        </Box>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        <Text color={tuiColors.textTertiary} bold>CONNECTIONS</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {edgeElements}
+        </Box>
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={tuiColors.textTertiary}>├─ STATS ───────────────────</Text>
+      </Box>
+      <Box flexDirection="row">
+        <Text color={tuiColors.textSecondary}>Cache Hit:</Text>
+        <Text color={tuiColors.success}> </Text>
+        <Pulse interval={800} color={tuiColors.success} type="breath" />
+        <Text color={tuiColors.success}> {displayCacheHitRate}%</Text>
+        <Text color={tuiColors.textTertiary}> │ Mutations: +{mutationCount}</Text>
+      </Box>
+    </Box>
+  );
+});