@ranker/raxflow 0.2.1 → 0.2.3

package/src/tui/components/Header.tsx

@@ -1,109 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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>
-  );
-});