@ranker/raxflow 0.2.2 → 0.2.3

package/src/tui/components/MetricsPanel.tsx

@@ -1,152 +0,0 @@
-import React, { memo, useMemo } from "react";
-import { Box, Text } from "ink";
-import { tuiColors } from "../styles/index.js";
-import { AnimatedProgressBar, FitnessAnimator, Pulse } from "./animations/index.js";
-
-interface MetricsData {
-  sessions: number;
-  avgDuration: number;
-  successRate: number;
-  totalCost: number;
-  totalRetries?: number;
-  totalEscalations?: number;
-}
-
-interface MetricsPanelProps {
-  metrics: MetricsData;
-  fitness: number;
-  isActive: boolean;
-  tick?: number;
-  maxHeight?: number;
-}
-
-interface AgentUsage {
-  name: string;
-  percent: number;
-}
-
-const TOP_AGENTS: AgentUsage[] = [
-  { name: "CodeGenerator", percent: 45 },
-  { name: "TestAgent", percent: 32 },
-  { name: "FixAgent", percent: 18 },
-];
-
-interface AnimatedMetricBarProps {
-  value: number;
-  max: number;
-  width?: number;
-  tick?: number;
-  animated?: boolean;
-}
-
-const AnimatedMetricBar = memo(function AnimatedMetricBar({ 
-  value, 
-  max, 
-  width = 16, 
-  tick, 
-  animated 
-}: AnimatedMetricBarProps) {
-  const percent = useMemo(() => Math.min((value / max) * 100, 100), [value, max]);
-  return (
-    <AnimatedProgressBar 
-      progress={percent} 
-      width={width} 
-      tick={tick || 0}
-      animated={animated}
-      showPercentage={false}
-    />
-  );
-});
-
-export const MetricsPanel = memo(function MetricsPanel({ 
-  metrics, 
-  fitness, 
-  isActive, 
-  tick = 0,
-  maxHeight
-}: MetricsPanelProps) {
-  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
-  const fitnessColor = fitness >= 0.9 
-    ? tuiColors.success 
-    : fitness >= 0.7 
-      ? tuiColors.warning 
-      : tuiColors.error;
-
-  const showSuccessPulse = metrics.successRate >= 90;
-
-  const costStr = useMemo(() => metrics.totalCost.toFixed(4), [metrics.totalCost]);
-
-  const agentElements = useMemo(() => 
-    TOP_AGENTS.map((agent, idx) => (
-      <Box key={agent.name} flexDirection="row">
-        <Text color={tuiColors.textPrimary}>{agent.name.padEnd(14)}</Text>
-        <AnimatedMetricBar 
-          value={agent.percent} 
-          max={100} 
-          width={8} 
-          tick={tick}
-          animated={isActive && idx === 0}
-        />
-        <Text color={tuiColors.textTertiary}> {agent.percent}%</Text>
-      </Box>
-    )),
-    [tick, isActive]
-  );
-
-  return (
-    <Box
-      flexDirection="column"
-      width={30}
-      height={maxHeight}
-      borderStyle="single"
-      borderColor={borderColor}
-      paddingX={1}
-    >
-      <Box marginBottom={1} flexShrink={0}>
-        <Text color={tuiColors.primary} bold>┌─</Text>
-        <Text color={tuiColors.primary} bold> PERFORMANCE </Text>
-        <Text color={tuiColors.textTertiary}>─────────────</Text>
-      </Box>
-
-      <Box flexDirection="column" flexShrink={0}>
-        <Text color={tuiColors.textTertiary} bold>METRICS</Text>
-        
-        <Box flexDirection="row" marginTop={1}>
-          <Text color={tuiColors.textSecondary}>Sessions:</Text>
-          <Text color={tuiColors.textPrimary} bold> {metrics.sessions}</Text>
-        </Box>
-
-        <Box flexDirection="row">
-          <Text color={tuiColors.textSecondary}>Avg Duration:</Text>
-          <Text color={tuiColors.textPrimary}> {metrics.avgDuration}ms</Text>
-        </Box>
-
-        <Box flexDirection="row">
-          <Text color={tuiColors.textSecondary}>Success Rate:</Text>
-          <Text color={tuiColors.success}> {metrics.successRate}%</Text>
-          {showSuccessPulse && <Pulse interval={1000} color={tuiColors.success} type="breath" />}
-        </Box>
-
-        <Box flexDirection="row">
-          <Text color={tuiColors.textSecondary}>Cost:</Text>
-          <Text color={tuiColors.warning}> ${costStr}</Text>
-        </Box>
-      </Box>
-
-      <Box flexDirection="column" marginTop={1} flexShrink={0}>
-        <Text color={tuiColors.textTertiary} bold>FITNESS SCORE</Text>
-        <FitnessAnimator value={fitness} />
-        <Box flexDirection="row">
-          <AnimatedMetricBar value={fitness} max={1} width={12} tick={tick} animated={isActive} />
-        </Box>
-      </Box>
-
-      <Box flexDirection="column" marginTop={1} overflow="hidden">
-        <Text color={tuiColors.textTertiary} bold>TOP AGENTS</Text>
-        <Box flexDirection="column" marginTop={1}>
-          {agentElements}
-        </Box>
-      </Box>
-    </Box>
-  );
-});

package/src/tui/components/StatusPanel.tsx

@@ -1,140 +0,0 @@
-import React, { memo, useMemo } from "react";
-import { Box, Text } from "ink";
-import { tuiColors, getStatusIndicator, getProviderTag } from "../styles/index.js";
-import { Pulse, FitnessAnimator, StatusAnimator } from "./animations/index.js";
-
-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;
-  isActive: boolean;
-  tick?: number;
-  maxHeight?: number;
-}
-
-interface AgentRowProps {
-  agent: Agent;
-  tick: number;
-}
-
-const AgentRow = memo(function AgentRow({ agent, tick }: AgentRowProps) {
-  const statusInfo = useMemo(() => getStatusIndicator(agent.status), [agent.status]);
-  const providerInfo = useMemo(() => getProviderTag(agent.provider), [agent.provider]);
-
-  return (
-    <Box flexDirection="row">
-      {agent.status === "running" ? (
-        <StatusAnimator status="running" showLabel={false} />
-      ) : (
-        <Text color={statusInfo.color}>{statusInfo.icon}</Text>
-      )}
-      <Text color={tuiColors.textPrimary}> {agent.name.slice(0, 14).padEnd(14)}</Text>
-      <Text color={tuiColors.textTertiary}> {providerInfo.code}</Text>
-      <Text color={tuiColors.textSecondary}> {agent.status.toUpperCase().padEnd(8)}</Text>
-    </Box>
-  );
-});
-
-interface ProviderRowProps {
-  provider: Provider;
-  tick: number;
-}
-
-const ProviderRow = memo(function ProviderRow({ provider, tick }: ProviderRowProps) {
-  const isActive = provider.status === "active";
-  const providerInfo = useMemo(() => getProviderTag(provider.name), [provider.name]);
-
-  return (
-    <Box flexDirection="row">
-      {isActive ? (
-        <Pulse interval={800} color={tuiColors.success} type="breath" />
-      ) : (
-        <Text color={tuiColors.textTertiary}>○</Text>
-      )}
-      <Text color={tuiColors.textPrimary}> {provider.name.padEnd(12)}</Text>
-      <Text color={tuiColors.textTertiary}> {provider.latency > 0 ? `${provider.latency}ms`.padStart(6) : "--".padStart(6)}</Text>
-    </Box>
-  );
-});
-
-export const StatusPanel = memo(function StatusPanel({ 
-  agents, 
-  providers, 
-  fitness, 
-  currentWorkflow, 
-  isActive, 
-  tick = 0,
-  maxHeight
-}: StatusPanelProps) {
-  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
-
-  const maxAgents = maxHeight ? Math.max(2, Math.floor((maxHeight - 12) / 2)) : 4;
-  const activeAgents = useMemo(() => 
-    agents.filter(a => a.status === "running" || a.status === "queued").slice(0, maxAgents),
-    [agents, maxAgents]
-  );
-
-  const hasNoActiveAgents = activeAgents.length === 0;
-
-  const workflowDisplay = useMemo(() => 
-    currentWorkflow ? `▶ ${currentWorkflow.slice(0, 20)}...` : "○ None",
-    [currentWorkflow]
-  );
-
-  return (
-    <Box flexDirection="column" width={30} height={maxHeight} borderStyle="single" borderColor={borderColor}>
-      <Box paddingX={1} flexShrink={0}>
-        <Text color={tuiColors.primary} bold>┌─</Text>
-        <Text color={tuiColors.primary} bold> SYSTEM_STATUS </Text>
-        <Text color={tuiColors.textTertiary}>───────────</Text>
-      </Box>
-
-      <Box flexDirection="column" paddingX={1} flexShrink={0}>
-        <Text color={tuiColors.textTertiary} bold>ORCHESTRATOR</Text>
-        <Box flexDirection="row">
-          <Text color={tuiColors.textSecondary}>Status:</Text>
-          <Text color={tuiColors.success}> </Text>
-          <Pulse interval={600} color={tuiColors.success} type="breath" />
-          <Text color={tuiColors.success}> ACTIVE</Text>
-        </Box>
-      </Box>
-
-      <Box flexDirection="column" paddingX={1} marginTop={1} flexShrink={0}>
-        <Text color={tuiColors.textTertiary} bold>WORKFLOW</Text>
-        <Text color={tuiColors.textPrimary}>{workflowDisplay}</Text>
-        <FitnessAnimator value={fitness} />
-      </Box>
-
-      <Box flexDirection="column" paddingX={1} marginTop={1} overflow="hidden">
-        <Text color={tuiColors.textTertiary} bold>ACTIVE AGENTS</Text>
-        {activeAgents.map((agent) => (
-          <AgentRow key={agent.name} agent={agent} tick={tick} />
-        ))}
-        {hasNoActiveAgents && (
-          <Text color={tuiColors.textQuaternary}>  ○ All idle</Text>
-        )}
-      </Box>
-
-      <Box flexDirection="column" paddingX={1} marginTop={1} overflow="hidden">
-        <Text color={tuiColors.textTertiary} bold>PROVIDERS</Text>
-        {providers.map((provider) => (
-          <ProviderRow key={provider.name} provider={provider} tick={tick} />
-        ))}
-      </Box>
-    </Box>
-  );
-});

package/src/tui/components/TaskTree.tsx

@@ -1,159 +0,0 @@
-import React, { memo, useMemo } from "react";
-import { Box, Text } from "ink";
-import { tuiColors, treeChars } from "../styles/index.js";
-import { AgentStateIcon, AgentState } from "./AgentStateIcon.js";
-import { AnimatedBranch } from "./AnimatedBranch.js";
-
-export interface TaskNode {
-  id: string;
-  name: string;
-  state: AgentState;
-  level: number;
-  detail?: string;
-  children?: TaskNode[];
-  executionTime?: number;
-  subtasks?: string[];
-}
-
-interface TaskNodeItemProps {
-  node: TaskNode;
-  tick: number;
-  isLast: boolean;
-  showDetail?: boolean;
-}
-
-const TaskNodeItem = memo(function TaskNodeItem({ node, tick, isLast, showDetail = true }: TaskNodeItemProps) {
-  const indent = useMemo(() => "  ".repeat(node.level), [node.level]);
-  const prefix = isLast ? treeChars.lastBranch : treeChars.branch;
-  const timeStr = node.executionTime ? `${node.executionTime.toFixed(1)}s` : "";
-  const paddedName = useMemo(() => node.name.padEnd(20), [node.name]);
-
-  return (
-    <Box flexDirection="column">
-      <Box flexDirection="row">
-        <Text color={tuiColors.textTertiary}>{indent}{prefix} </Text>
-        <Box flexDirection="row">
-          <Text color={tuiColors.textSecondary}>[</Text>
-          <AgentStateIcon state={node.state} tick={tick} />
-          <Text color={tuiColors.textSecondary}>]</Text>
-        </Box>
-        <Text color={tuiColors.textPrimary}> {paddedName}</Text>
-        {timeStr && (
-          <Text color={tuiColors.textTertiary}> ● {timeStr}</Text>
-        )}
-      </Box>
-      {showDetail && node.detail && (
-        <Box flexDirection="row">
-          <Text color={tuiColors.textTertiary}>{indent}    └── </Text>
-          <Text color={tuiColors.textSecondary}>{node.detail}</Text>
-        </Box>
-      )}
-      {showDetail && node.subtasks && node.subtasks.length > 0 && (
-        <Box flexDirection="column">
-          {node.subtasks.map((subtask, idx) => (
-            <Box key={idx} flexDirection="row">
-              <Text color={tuiColors.textTertiary}>{indent}      {idx === node.subtasks!.length - 1 ? '└──' : '├──'} </Text>
-              <Text color={tuiColors.textTertiary}>{subtask}</Text>
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-});
-
-export interface TaskTreeProps {
-  rootTask: string;
-  tasks: TaskNode[];
-  tick: number;
-  isActive?: boolean;
-  maxDisplay?: number;
-}
-
-export const TaskTree = memo(function TaskTree({ rootTask, tasks, tick, isActive = false, maxDisplay = 15 }: TaskTreeProps) {
-  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
-  const displayTasks = useMemo(() => tasks.slice(0, maxDisplay), [tasks, maxDisplay]);
-  const hiddenCount = tasks.length - maxDisplay;
-
-  const taskElements = useMemo(() => 
-    displayTasks.map((task, idx) => (
-      <TaskNodeItem
-        key={task.id}
-        node={task}
-        tick={tick}
-        isLast={idx === displayTasks.length - 1 && hiddenCount === 0}
-      />
-    )),
-    [displayTasks, tick, hiddenCount]
-  );
-
-  return (
-    <Box flexDirection="column" borderStyle="single" borderColor={borderColor} paddingX={1}>
-      <Box marginBottom={1}>
-        <Text color={tuiColors.primary} bold>┌─</Text>
-        <Text color={tuiColors.primary} bold> TASK_TREE </Text>
-        <Text color={tuiColors.textTertiary}>────────────────────</Text>
-      </Box>
-
-      <Box flexDirection="row">
-        <Text color={tuiColors.textPrimary} bold>■ </Text>
-        <Text color={tuiColors.textSecondary}>root: {rootTask}</Text>
-      </Box>
-
-      <Box flexDirection="column" marginTop={1}>
-        <AnimatedBranch type="vertical" tick={tick} animated={isActive} />
-      </Box>
-
-      <Box flexDirection="column">
-        {taskElements}
-        {hiddenCount > 0 && (
-          <Box flexDirection="row">
-            <Text color={tuiColors.textTertiary}>  └── +{hiddenCount} more tasks...</Text>
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-});
-
-interface TaskHierarchyProps {
-  tasks: TaskNode[];
-  tick: number;
-  expandedIds?: Set<string>;
-}
-
-export const TaskHierarchy = memo(function TaskHierarchy({ tasks, tick, expandedIds = new Set() }: TaskHierarchyProps) {
-  const renderNode = (node: TaskNode, isLast: boolean): React.ReactNode => {
-    const hasChildren = (node.children?.length ?? 0) > 0;
-    const isExpanded = expandedIds.has(node.id);
-
-    return (
-      <Box key={node.id} flexDirection="column">
-        <TaskNodeItem
-          node={node}
-          tick={tick}
-          isLast={isLast}
-          showDetail={isExpanded}
-        />
-        {hasChildren && isExpanded && (
-          <Box flexDirection="column" marginLeft={2}>
-            {node.children!.map((child, idx) => (
-              <Box key={child.id} flexDirection="column">
-                <Box flexDirection="row">
-                  <AnimatedBranch type="vertical" tick={tick} />
-                </Box>
-                {renderNode(child, idx === node.children!.length - 1)}
-              </Box>
-            ))}
-          </Box>
-        )}
-      </Box>
-    );
-  };
-
-  return (
-    <Box flexDirection="column">
-      {tasks.map((task, idx) => renderNode(task, idx === tasks.length - 1))}
-    </Box>
-  );
-});

package/src/tui/components/animations/ProgressBar.tsx

@@ -1,160 +0,0 @@
-import React, { memo, useMemo } from "react";
-import { Box, Text } from "ink";
-import { tuiColors, getProgressMarker, getProgressGlow } from "../../styles/index.js";
-
-interface ProgressBarProps {
-  progress: number;
-  width?: number;
-  showPercentage?: boolean;
-  animated?: boolean;
-  tick?: number;
-  showMarker?: boolean;
-  glowEffect?: boolean;
-  color?: string;
-}
-
-export const AnimatedProgressBar = memo(function AnimatedProgressBar({
-  progress,
-  width = 16,
-  showPercentage = true,
-  animated = true,
-  tick = 0,
-  showMarker = true,
-  glowEffect = false,
-  color,
-}: ProgressBarProps) {
-  const filled = Math.round((progress / 100) * width);
-  const empty = width - filled;
-  const markerPos = Math.min(filled, width - 1);
-
-  const barColor = color || (progress >= 100 
-    ? tuiColors.success 
-    : progress > 0 
-      ? tuiColors.warning 
-      : tuiColors.textTertiary);
-
-  const filledChar = glowEffect && animated ? getProgressGlow(tick) : "█";
-  const emptyChar = "░";
-  const markerChar = showMarker && animated && progress > 0 && progress < 100 ? getProgressMarker(tick) : "";
-
-  const beforeMarker = filled > 0 ? filledChar.repeat(Math.max(0, filled - 1)) : "";
-  const afterMarker = emptyChar.repeat(empty);
-
-  const progressStr = useMemo(() => progress.toString().padStart(3), [progress]);
-
-  if (showMarker && animated && progress > 0 && progress < 100) {
-    return (
-      <Box flexDirection="row">
-        <Text color={barColor}>{beforeMarker}</Text>
-        <Text color={tuiColors.primary} bold>{markerChar}</Text>
-        <Text color={tuiColors.textTertiary}>{afterMarker.slice(1)}</Text>
-        {showPercentage && (
-          <Text color={barColor}> {progressStr}%</Text>
-        )}
-      </Box>
-    );
-  }
-
-  const bar = filledChar.repeat(filled) + emptyChar.repeat(empty);
-
-  return (
-    <Box flexDirection="row">
-      <Text color={barColor}>{bar}</Text>
-      {showPercentage && (
-        <Text color={barColor}> {progressStr}%</Text>
-      )}
-    </Box>
-  );
-});
-
-interface ProgressWithLabelProps {
-  label: string;
-  progress: number;
-  width?: number;
-  tick?: number;
-  animated?: boolean;
-}
-
-export const ProgressWithLabel = memo(function ProgressWithLabel({ 
-  label, 
-  progress, 
-  width = 12, 
-  tick = 0, 
-  animated = true 
-}: ProgressWithLabelProps) {
-  const paddedLabel = useMemo(() => label.padEnd(10), [label]);
-  
-  return (
-    <Box flexDirection="row">
-      <Text color={tuiColors.textSecondary}>{paddedLabel}</Text>
-      <AnimatedProgressBar progress={progress} width={width} tick={tick} animated={animated} showMarker />
-    </Box>
-  );
-});
-
-interface SegmentedProgressProps {
-  segments: { progress: number; color?: string; label?: string }[];
-  width?: number;
-  tick?: number;
-}
-
-export const SegmentedProgress = memo(function SegmentedProgress({ 
-  segments, 
-  width = 20, 
-  tick = 0 
-}: SegmentedProgressProps) {
-  const totalProgress = useMemo(() => 
-    segments.reduce((sum, s) => sum + s.progress, 0) / segments.length,
-    [segments]
-  );
-
-  return (
-    <Box flexDirection="column">
-      {segments.map((segment, idx) => (
-        <Box key={idx} flexDirection="row">
-          {segment.label && <Text color={tuiColors.textTertiary}>{segment.label.padEnd(8)}</Text>}
-          <AnimatedProgressBar
-            progress={segment.progress}
-            width={width}
-            tick={tick}
-            color={segment.color}
-            showPercentage={false}
-          />
-          <Text color={segment.color || tuiColors.textPrimary}> {segment.progress}%</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-});
-
-interface WorkflowProgressProps {
-  level: string;
-  progress: number;
-  isActive: boolean;
-  tick?: number;
-}
-
-export const WorkflowProgress = memo(function WorkflowProgress({ 
-  level, 
-  progress, 
-  isActive, 
-  tick = 0 
-}: WorkflowProgressProps) {
-  const levelColor = isActive ? tuiColors.primary : tuiColors.textSecondary;
-  const paddedLevel = useMemo(() => level.padEnd(12), [level]);
-
-  return (
-    <Box flexDirection="row">
-      <Text color={levelColor} bold>{paddedLevel}</Text>
-      <AnimatedProgressBar
-        progress={progress}
-        width={12}
-        tick={tick}
-        animated={isActive}
-        showMarker={isActive}
-        glowEffect={isActive}
-        color={isActive ? tuiColors.warning : undefined}
-      />
-    </Box>
-  );
-});

package/src/tui/components/animations/Pulse.tsx

@@ -1,73 +0,0 @@
-import React, { memo } from "react";
-import { Text } from "ink";
-import { useAnimation } from "../../hooks/useAnimation.js";
-import { tuiColors } from "../../styles/index.js";
-
-const PULSE_FRAMES = ["●", "◐", "○", "◐"];
-const BREATH_FRAMES = ["●", "●", "◐", "◐", "○", "○", "◐", "◐"];
-const PING_FRAMES = ["●", "●", "●", "○", "○", "○", "○", "○", "○", "○"];
-
-const FRAME_MAP = {
-  pulse: PULSE_FRAMES,
-  breath: BREATH_FRAMES,
-  ping: PING_FRAMES,
-} as const;
-
-const DEFAULT_INTERVALS = {
-  pulse: 300,
-  breath: 600,
-  ping: 400,
-} as const;
-
-interface PulseProps {
-  interval?: number;
-  color?: string;
-  isAnimating?: boolean;
-  type?: "pulse" | "breath" | "ping";
-}
-
-export const Pulse = memo(function Pulse({ 
-  interval, 
-  color = tuiColors.success, 
-  isAnimating = true, 
-  type = "pulse" 
-}: PulseProps) {
-  const frames = FRAME_MAP[type];
-  const actualInterval = interval ?? DEFAULT_INTERVALS[type];
-  const { frame } = useAnimation({ interval: actualInterval, loop: true, autoStart: isAnimating, maxFps: 15 });
-  const currentFrame = frames[frame % frames.length];
-
-  return <Text color={color}>{currentFrame}</Text>;
-});
-
-export function usePulseFrame(tick: number, type: "pulse" | "breath" | "ping" = "pulse"): string {
-  const frames = FRAME_MAP[type];
-  return frames[tick % frames.length];
-}
-
-export function usePulseIntensity(tick: number, interval: number = 100): number {
-  const cycleLength = 20;
-  const phase = (tick % cycleLength) / cycleLength;
-  return 0.5 + Math.sin(phase * Math.PI * 2) * 0.5;
-}
-
-interface StatusPulseProps {
-  status: "online" | "offline" | "running" | "error";
-  tick?: number;
-}
-
-export const StatusPulse = memo(function StatusPulse({ status, tick }: StatusPulseProps) {
-  if (status === "running") {
-    return <Pulse interval={200} color={tuiColors.warning} type="pulse" />;
-  }
-
-  if (status === "online") {
-    return <Pulse interval={600} color={tuiColors.success} type="breath" />;
-  }
-
-  if (status === "error") {
-    return <Pulse interval={400} color={tuiColors.error} type="ping" />;
-  }
-
-  return <Text color={tuiColors.textTertiary}>○</Text>;
-});