@ranker/raxflow 0.2.0

package/src/tui/components/Header.tsx

@@ -0,0 +1,109 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, getStatusIndicator, getProviderTag } from "../styles/index.js";
+import { StatusPulse } from "./animations/index.js";
+
+interface HeaderProps {
+  projectName: string;
+  agentCount: number;
+  provider: string;
+  status: "ready" | "running" | "error";
+  tick: number;
+  activePanel: string;
+}
+
+const PANEL_NAMES: Record<string, string> = {
+  chat: "CHAT",
+  dag: "DAG",
+  status: "STATUS",
+  logs: "LOGS",
+  metrics: "METRICS",
+  memory: "MEMORY",
+};
+
+const PANELS = ["chat", "dag", "logs", "metrics", "memory"] as const;
+
+export const Header = memo(function Header({ 
+  projectName, 
+  agentCount, 
+  provider, 
+  status, 
+  tick, 
+  activePanel 
+}: HeaderProps) {
+  const statusInfo = useMemo(() => getStatusIndicator(status), [status]);
+  const providerInfo = useMemo(() => getProviderTag(provider), [provider]);
+
+  const statusText = status === "ready" ? "ONLINE" : status === "running" ? "RUNNING" : "ERROR";
+  const statusColor = status === "ready" 
+    ? tuiColors.success 
+    : status === "running" 
+      ? tuiColors.warning 
+      : tuiColors.error;
+
+  const pulseStatus = status === "ready" 
+    ? "online" 
+    : status === "running" 
+      ? "running" 
+      : "error";
+
+  const panelElements = useMemo(() => 
+    PANELS.map((panel) => (
+      <Box key={panel} marginRight={1}>
+        <Text 
+          color={activePanel === panel ? tuiColors.primary : tuiColors.textTertiary} 
+          bold={activePanel === panel}
+        >
+          [{PANEL_NAMES[panel]}]
+        </Text>
+      </Box>
+    )),
+    [activePanel]
+  );
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        paddingX={1}
+        borderStyle="single"
+        borderColor={tuiColors.border}
+      >
+        <Box flexDirection="row" alignItems="center">
+          <Text color={tuiColors.primary} bold>■</Text>
+          <Text color={tuiColors.textPrimary} bold> RAXFLOW</Text>
+          <Text color={tuiColors.textSecondary}> HUB</Text>
+        </Box>
+        <Box flexDirection="row" alignItems="center" gap={1}>
+          <Text color={tuiColors.textTertiary}>Project:</Text>
+          <Text color={tuiColors.textPrimary}> {projectName}</Text>
+          <Text color={tuiColors.textQuaternary}> │</Text>
+          <Text color={tuiColors.textTertiary}> Agents:</Text>
+          <Text color={tuiColors.success}> {agentCount}/12</Text>
+          <Text color={tuiColors.textQuaternary}> │</Text>
+          <Text color={tuiColors.textSecondary}>{providerInfo.code}</Text>
+          <Text color={statusColor}> </Text>
+          <StatusPulse status={pulseStatus} tick={tick} />
+          <Text color={statusColor}> {statusText}</Text>
+        </Box>
+      </Box>
+      
+      <Box borderStyle="single" borderColor={tuiColors.primary} paddingX={1}>
+        <Text color={tuiColors.textTertiary} italic>
+          Orchestrator that Evolves with Your Host Tools
+        </Text>
+      </Box>
+
+      <Box flexDirection="row" paddingX={1} justifyContent="space-between">
+        <Box flexDirection="row">
+          {panelElements}
+        </Box>
+        <Box flexDirection="row">
+          <Text color={tuiColors.textQuaternary}>Tab:Switch │ ←:View │ ?:Help │ Ctrl+C:Quit</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+});

package/src/tui/components/HelpOverlay.tsx

@@ -0,0 +1,140 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors } from "../styles/index.js";
+
+interface HelpOverlayProps {
+  onDismiss: () => void;
+}
+
+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 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="single"
+      borderColor={tuiColors.primary}
+      paddingX={2}
+    >
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>■ RAXFLOW 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}>
+        {sectionElements}
+      </Box>
+
+      <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

@@ -0,0 +1,69 @@
+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 const InputBar = memo(function InputBar({ onSubmit, suggestions, isProcessing, projectName }: InputBarProps) {
+  const [input, setInput] = useState("");
+
+  const handleSubmit = useCallback((value: string) => {
+    if (value.trim()) {
+      onSubmit(value);
+      setInput("");
+    }
+  }, [onSubmit]);
+
+  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={tuiColors.border} paddingX={1}>
+      {showSuggestions && (
+        <Box flexDirection="row" marginBottom={1}>
+          {filteredSuggestions.map((s) => (
+            <Box key={s} marginRight={2}>
+              <Text color={tuiColors.primary}>{s}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+      <Box flexDirection="row" alignItems="center">
+        <Text color={tuiColors.primary} bold>raxflow://</Text>
+        <Text color={tuiColors.textSecondary}>{projectName}</Text>
+        <Text color={tuiColors.textPrimary}> &gt; </Text>
+        <Box flexGrow={1}>
+          <TextInput
+            value={input}
+            onChange={handleChange}
+            onSubmit={handleSubmit}
+            placeholder="Enter prompt or /help..."
+            showCursor={true}
+          />
+        </Box>
+        {isProcessing && <Text color={tuiColors.warning}> ●</Text>}
+      </Box>
+      <Box flexDirection="row" marginTop={1}>
+        <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>
+  );
+});