@ranker/raxflow 0.2.0

package/src/tui/components/MetricsPanel.tsx

@@ -0,0 +1,149 @@
+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;
+}
+
+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 
+}: 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}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> PERFORMANCE </Text>
+        <Text color={tuiColors.textTertiary}>─────────────</Text>
+      </Box>
+
+      <Box flexDirection="column">
+        <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}>
+        <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}>
+        <Text color={tuiColors.textTertiary} bold>TOP AGENTS</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {agentElements}
+        </Box>
+      </Box>
+    </Box>
+  );
+});

package/src/tui/components/StatusPanel.tsx

@@ -0,0 +1,137 @@
+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;
+}
+
+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 
+}: StatusPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+
+  const activeAgents = useMemo(() => 
+    agents.filter(a => a.status === "running" || a.status === "queued").slice(0, 4),
+    [agents]
+  );
+
+  const hasNoActiveAgents = activeAgents.length === 0;
+
+  const workflowDisplay = useMemo(() => 
+    currentWorkflow ? `▶ ${currentWorkflow.slice(0, 20)}...` : "○ None",
+    [currentWorkflow]
+  );
+
+  return (
+    <Box flexDirection="column" width={30} borderStyle="single" borderColor={borderColor}>
+      <Box paddingX={1}>
+        <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}>
+        <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}>
+        <Text color={tuiColors.textTertiary} bold>WORKFLOW</Text>
+        <Text color={tuiColors.textPrimary}>{workflowDisplay}</Text>
+        <FitnessAnimator value={fitness} />
+      </Box>
+
+      <Box flexDirection="column" paddingX={1} marginTop={1}>
+        <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}>
+        <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

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

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

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