@ranker/raxflow 0.2.0

package/src/tui/components/AnimatedBranch.tsx

@@ -0,0 +1,134 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors } from "../styles/index.js";
+
+const VERTICAL_PULSE_FRAMES = ["│", "┃", "│", "┃"];
+const HORIZONTAL_PULSE_FRAMES = ["─", "━", "─", "━"];
+const FLOW_FRAMES = ["◀═══▶", "═◀═══▶", "══◀══▶", "═══◀═▶", "════◀▶", "═▶═══◀", "══▶══◀", "═══▶═◀"];
+
+export type BranchType = 'vertical' | 'horizontal' | 'corner-left' | 'corner-right' | 'branch' | 'last-branch' | 'flow';
+
+interface AnimatedBranchProps {
+  type: BranchType;
+  tick?: number;
+  animated?: boolean;
+  length?: number;
+  color?: string;
+}
+
+export const AnimatedBranch = memo(function AnimatedBranch({ 
+  type, 
+  tick = 0, 
+  animated = true, 
+  length = 1, 
+  color 
+}: AnimatedBranchProps) {
+  const branchColor = color || tuiColors.textTertiary;
+  
+  const getFrame = (frames: string[]): string => {
+    return frames[tick % frames.length];
+  };
+
+  const renderBranch = (): string => {
+    switch (type) {
+      case 'vertical':
+        return animated ? getFrame(VERTICAL_PULSE_FRAMES) : "│";
+      case 'horizontal':
+        return animated ? getFrame(HORIZONTAL_PULSE_FRAMES).repeat(length) : "─".repeat(length);
+      case 'corner-left':
+        return "┌";
+      case 'corner-right':
+        return "┐";
+      case 'branch':
+        return "├─";
+      case 'last-branch':
+        return "└─";
+      case 'flow':
+        return animated ? getFrame(FLOW_FRAMES) : "◀═══▶";
+      default:
+        return "│";
+    }
+  };
+
+  return <Text color={branchColor}>{renderBranch()}</Text>;
+});
+
+interface BranchLineProps {
+  tick: number;
+  animated?: boolean;
+  length?: number;
+  color?: string;
+}
+
+export const VerticalBranch = memo(function VerticalBranch({ tick, animated = true, length = 1, color }: BranchLineProps) {
+  return <AnimatedBranch type="vertical" tick={tick} animated={animated} color={color} />;
+});
+
+export const HorizontalBranch = memo(function HorizontalBranch({ tick, animated = true, length = 1, color }: BranchLineProps) {
+  return <AnimatedBranch type="horizontal" tick={tick} animated={animated} length={length} color={color} />;
+});
+
+export const BranchConnector = memo(function BranchConnector({ tick, animated = true, color }: BranchLineProps) {
+  return <AnimatedBranch type="branch" tick={tick} animated={animated} color={color} />;
+});
+
+export const LastBranchConnector = memo(function LastBranchConnector({ tick, animated = true, color }: BranchLineProps) {
+  return <AnimatedBranch type="last-branch" tick={tick} animated={animated} color={color} />;
+});
+
+export const FlowIndicator = memo(function FlowIndicator({ tick, animated = true, color }: BranchLineProps) {
+  return <AnimatedBranch type="flow" tick={tick} animated={animated} color={color} />;
+});
+
+interface TaskBranchProps {
+  tick: number;
+  depth: number;
+  isLast: boolean;
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  color?: string;
+}
+
+export const TaskBranch = memo(function TaskBranch({ tick, depth, isLast, hasChildren = false, isExpanded = true, color }: TaskBranchProps) {
+  const branchColor = color || tuiColors.textTertiary;
+  
+  if (depth === 0) {
+    return null;
+  }
+
+  const indent = "  ".repeat(depth - 1);
+  
+  return (
+    <Box flexDirection="row">
+      <Text color={branchColor}>{indent}</Text>
+      <AnimatedBranch type={isLast ? "last-branch" : "branch"} tick={tick} color={branchColor} />
+    </Box>
+  );
+});
+
+interface AnimatedConnectorProps {
+  tick: number;
+  fromLevel: number;
+  toLevel: number;
+  isActive: boolean;
+}
+
+export const AnimatedConnector = memo(function AnimatedConnector({ tick, fromLevel, toLevel, isActive }: AnimatedConnectorProps) {
+  const color = isActive ? tuiColors.primary : tuiColors.textTertiary;
+  const rows = toLevel - fromLevel;
+  
+  const connectorElements = useMemo(() => 
+    Array.from({ length: rows }).map((_, idx) => (
+      <Box key={idx} paddingLeft={2}>
+        <AnimatedBranch type="vertical" tick={tick} animated={isActive} color={color} />
+      </Box>
+    )),
+    [rows, tick, isActive, color]
+  );
+  
+  return (
+    <Box flexDirection="column">
+      {connectorElements}
+    </Box>
+  );
+});

package/src/tui/components/ChatPanel.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useMemo, memo, useCallback } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, formatTimestamp, getProviderTag } from "../styles/index.js";
+import { TypingEffect, ProcessingIndicator } from "./animations/index.js";
+
+interface Message {
+  id: string;
+  type: "user" | "system" | "agent" | "error" | "success";
+  content: string;
+  timestamp: Date;
+  agent?: string;
+}
+
+interface ChatPanelProps {
+  messages: Message[];
+  isProcessing: boolean;
+  isActive: boolean;
+}
+
+const MESSAGE_CONFIG: Record<string, { tag: string; color: string }> = {
+  user: { tag: "[YOU]", color: tuiColors.textPrimary },
+  system: { tag: "[SYS]", color: tuiColors.textTertiary },
+  agent: { tag: "[AGENT]", color: tuiColors.primary },
+  error: { tag: "[ERROR]", color: tuiColors.error },
+  success: { tag: "[SUCCESS]", color: tuiColors.success },
+};
+
+const MAX_DISPLAYED_MESSAGES = 12;
+const TYPING_SPEED_PER_CHAR = 15;
+const TYPING_BUFFER_MS = 500;
+
+interface MessageItemProps {
+  message: Message;
+  animate?: boolean;
+}
+
+const MessageItem = memo(function MessageItem({ message, animate = false }: MessageItemProps) {
+  const config = MESSAGE_CONFIG[message.type];
+  const providerInfo = useMemo(() => 
+    message.agent ? getProviderTag(message.agent) : null,
+    [message.agent]
+  );
+  const tag = message.type === "agent" && message.agent 
+    ? `[${message.agent.toUpperCase().slice(0, 8)}]` 
+    : config.tag;
+  const formattedTime = useMemo(() => formatTimestamp(message.timestamp), [message.timestamp]);
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box flexDirection="row">
+        <Text color={tuiColors.textTertiary}>[{formattedTime}]</Text>
+        <Text color={config.color} bold>{tag.padEnd(12)}</Text>
+        {providerInfo && (
+          <Text color={tuiColors.textTertiary}>{providerInfo.code}</Text>
+        )}
+      </Box>
+      {animate ? (
+        <TypingEffect text={message.content} speed={TYPING_SPEED_PER_CHAR} showCursor={false} />
+      ) : (
+        <Text color={tuiColors.textPrimary}>  {message.content}</Text>
+      )}
+    </Box>
+  );
+});
+
+export const ChatPanel = memo(function ChatPanel({ messages, isProcessing, isActive }: ChatPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  const [animatingMessageId, setAnimatingMessageId] = useState<string | null>(null);
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  const displayMessages = useMemo(() => 
+    messages.slice(-MAX_DISPLAYED_MESSAGES),
+    [messages]
+  );
+
+  useEffect(() => {
+    if (messages.length === 0) return;
+    
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.type !== "agent" && lastMessage.type !== "system") return;
+
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    
+    setAnimatingMessageId(lastMessage.id);
+    timeoutRef.current = setTimeout(() => {
+      setAnimatingMessageId(null);
+    }, lastMessage.content.length * TYPING_SPEED_PER_CHAR + TYPING_BUFFER_MS);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [messages]);
+
+  const messageElements = useMemo(() => 
+    displayMessages.map((msg) => (
+      <MessageItem 
+        key={msg.id} 
+        message={msg} 
+        animate={msg.id === animatingMessageId}
+      />
+    )),
+    [displayMessages, animatingMessageId]
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={2}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> CHAT </Text>
+        <Text color={tuiColors.textTertiary}>─────────────────────────────────────</Text>
+      </Box>
+      
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+        {messageElements}
+        {isProcessing && <ProcessingIndicator text="Processing" />}
+      </Box>
+    </Box>
+  );
+});

package/src/tui/components/DAGPanel.tsx

@@ -0,0 +1,208 @@
+import React, { useMemo, memo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, getStatusIndicator, getSpinnerFrame, treeChars } from "../styles/index.js";
+import { AnimatedProgressBar } from "./animations/index.js";
+import { AgentStateIcon, AgentState } from "./AgentStateIcon.js";
+
+interface DAGSubtask {
+  id: string;
+  name: string;
+  state: AgentState;
+}
+
+interface DAGNode {
+  id: string;
+  name: string;
+  status: "pending" | "running" | "done" | "error";
+  agent?: string;
+  state?: AgentState;
+  executionTime?: number;
+  detail?: string;
+  subtasks?: DAGSubtask[];
+}
+
+interface DAGLevel {
+  name: string;
+  progress: number;
+  nodes: DAGNode[];
+  status?: 'done' | 'running' | 'pending';
+}
+
+interface WorkflowState {
+  levels: DAGLevel[];
+  currentLevel: number;
+  totalProgress: number;
+}
+
+interface DAGNodeItemProps {
+  node: DAGNode;
+  tick: number;
+  isLast: boolean;
+}
+
+const STATE_LABELS: Record<AgentState, string> = {
+  idle: "pending",
+  thinking: "thinking...",
+  processing: "processing",
+  running: "running",
+  success: "done",
+  error: "error",
+  waiting: "waiting",
+};
+
+const DAGNodeItem = memo(function DAGNodeItem({ node, tick, isLast }: DAGNodeItemProps) {
+  const statusInfo = useMemo(() => getStatusIndicator(node.status), [node.status]);
+  const agentState = useMemo((): AgentState => {
+    if (node.state) return node.state;
+    if (node.status === 'running') return 'running';
+    if (node.status === 'done') return 'success';
+    if (node.status === 'error') return 'error';
+    return 'idle';
+  }, [node.state, node.status]);
+  
+  const icon = node.status === "running" 
+    ? getSpinnerFrame(tick, "dots") 
+    : statusInfo.icon;
+  const prefix = isLast ? treeChars.lastBranch : treeChars.branch;
+  const timeStr = node.executionTime ? `${node.executionTime.toFixed(1)}s` : "";
+
+  return (
+    <Box flexDirection="column">
+      <Box flexDirection="row">
+        <Text color={tuiColors.textTertiary}>{prefix} </Text>
+        <Box flexDirection="row">
+          <Text color={tuiColors.textSecondary}>[</Text>
+          <AgentStateIcon state={agentState} tick={tick} />
+          <Text color={tuiColors.textSecondary}>]</Text>
+        </Box>
+        <Text color={tuiColors.textPrimary}> {node.name.padEnd(18)}</Text>
+        {timeStr && (
+          <Text color={tuiColors.textTertiary}> ● {timeStr}</Text>
+        )}
+      </Box>
+      {node.detail && (
+        <Box flexDirection="row">
+          <Text color={tuiColors.textTertiary}>      └── {node.detail}</Text>
+        </Box>
+      )}
+      {node.subtasks && node.subtasks.length > 0 && (
+        <Box flexDirection="column">
+          {node.subtasks.map((subtask, idx) => (
+            <Box key={subtask.id} flexDirection="row">
+              <Text color={tuiColors.textTertiary}>        {idx === node.subtasks!.length - 1 ? '└──' : '├──'} </Text>
+              <AgentStateIcon state={subtask.state} tick={tick} />
+              <Text color={tuiColors.textTertiary}> {subtask.name}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+interface DAGLevelViewProps {
+  level: DAGLevel;
+  tick: number;
+  isActive: boolean;
+}
+
+const DAGLevelView = memo(function DAGLevelView({ level, tick, isActive }: DAGLevelViewProps) {
+  const levelColor = isActive ? tuiColors.primary : tuiColors.textSecondary;
+  const statusColor = level.status === 'done' 
+    ? tuiColors.success 
+    : level.status === 'running' 
+      ? tuiColors.warning 
+      : tuiColors.textTertiary;
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box flexDirection="row">
+        <Text color={levelColor} bold>{level.name.padEnd(12)}</Text>
+        <AnimatedProgressBar 
+          progress={level.progress} 
+          width={16} 
+          tick={tick}
+          animated={isActive}
+          showMarker={isActive}
+          glowEffect={isActive}
+        />
+      </Box>
+      <Box flexDirection="row">
+        <Text color={isActive ? tuiColors.primary : tuiColors.textTertiary}>
+          {isActive ? "┃" : "│"}
+        </Text>
+      </Box>
+      {level.nodes.map((node, idx) => (
+        <DAGNodeItem 
+          key={node.id} 
+          node={node} 
+          tick={tick} 
+          isLast={idx === level.nodes.length - 1} 
+        />
+      ))}
+    </Box>
+  );
+});
+
+interface DAGPanelProps {
+  workflowState: WorkflowState;
+  tick: number;
+  isActive: boolean;
+}
+
+export const DAGPanel = memo(function DAGPanel({ workflowState, tick, isActive }: DAGPanelProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+
+  const levelViews = useMemo(() => 
+    workflowState.levels.map((level, index) => (
+      <DAGLevelView
+        key={level.name}
+        level={level}
+        tick={tick}
+        isActive={index === workflowState.currentLevel}
+      />
+    )),
+    [workflowState.levels, workflowState.currentLevel, tick]
+  );
+
+  const isAnimating = useMemo(() => 
+    workflowState.totalProgress > 0 && workflowState.totalProgress < 100,
+    [workflowState.totalProgress]
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      width={46}
+      borderStyle="single"
+      borderColor={borderColor}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> DAG_EXECUTION </Text>
+        <Text color={tuiColors.textTertiary}>──────────────────────</Text>
+      </Box>
+
+      <Box flexDirection="column" flexGrow={1}>
+        {levelViews}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={tuiColors.textTertiary}>├─ TOTAL ─────────────────────────</Text>
+      </Box>
+      <Box flexDirection="row">
+        <Text color={tuiColors.textSecondary}>Progress: </Text>
+        <AnimatedProgressBar 
+          progress={workflowState.totalProgress} 
+          width={16} 
+          tick={tick}
+          animated={isAnimating}
+          showMarker
+        />
+      </Box>
+    </Box>
+  );
+});
+
+export type { DAGNode, DAGLevel, WorkflowState, DAGSubtask };

package/src/tui/components/ExecutionTimeline.tsx

@@ -0,0 +1,225 @@
+import React, { memo, useMemo } from "react";
+import { Box, Text } from "ink";
+import { tuiColors } from "../styles/index.js";
+import { AnimatedBranch } from "./AnimatedBranch.js";
+
+interface TimelineAgent {
+  name: string;
+  startTime: number;
+  endTime?: number;
+  isActive: boolean;
+  color?: string;
+}
+
+interface TimelineLevel {
+  name: string;
+  startTime: number;
+  endTime?: number;
+  progress: number;
+  status: 'done' | 'running' | 'pending';
+}
+
+export interface ExecutionTimelineProps {
+  tick: number;
+  totalDuration: number;
+  currentTime: number;
+  levels: TimelineLevel[];
+  agents: TimelineAgent[];
+  isActive?: boolean;
+  width?: number;
+}
+
+const ACTIVE_MARKER_FRAMES = ["┃", "║", "┃", "║"];
+
+const BAR_COLORS: Record<string, string> = {
+  done: tuiColors.success,
+  running: tuiColors.warning,
+  pending: tuiColors.textTertiary,
+};
+
+const STATUS_TEXT = {
+  done: (endTime: number | undefined) => `done at ${endTime?.toFixed(1)}s`,
+  running: () => "running...",
+  pending: () => "pending",
+};
+
+function formatTime(s: number): string {
+  return `${s}s`;
+}
+
+interface TimelineBarProps {
+  level: TimelineLevel;
+  timeScale: number;
+  width: number;
+  currentTime: number;
+}
+
+const TimelineBar = memo(function TimelineBar({ level, timeScale, width, currentTime }: TimelineBarProps) {
+  const startCol = Math.floor(level.startTime * timeScale);
+  const endCol = level.endTime 
+    ? Math.floor(level.endTime * timeScale)
+    : Math.floor(currentTime * timeScale);
+  const barWidth = Math.max(0, endCol - startCol);
+  const beforeBar = "░".repeat(startCol);
+  
+  const barChar = level.status === 'done' ? "█" : level.status === 'running' ? "▓" : "░";
+  const afterBar = "░".repeat(Math.max(0, width - endCol));
+  
+  const statusText = STATUS_TEXT[level.status](level.endTime);
+  const paddedName = useMemo(() => level.name.padEnd(4), [level.name]);
+
+  return (
+    <Box flexDirection="row">
+      <Text color={tuiColors.textTertiary}>{paddedName} </Text>
+      <Text color={BAR_COLORS[level.status]}>{beforeBar}{barChar.repeat(barWidth)}</Text>
+      <Text color={tuiColors.textTertiary}>{afterBar}</Text>
+      <Text color={tuiColors.textTertiary}> {statusText}</Text>
+    </Box>
+  );
+});
+
+interface AgentTimelineProps {
+  agent: TimelineAgent;
+  timeScale: number;
+  width: number;
+  currentTime: number;
+}
+
+const AgentTimeline = memo(function AgentTimeline({ agent, timeScale, width, currentTime }: AgentTimelineProps) {
+  const startCol = Math.floor(agent.startTime * timeScale);
+  const endCol = agent.endTime 
+    ? Math.floor(agent.endTime * timeScale)
+    : Math.floor(currentTime * timeScale);
+  const barWidth = Math.max(0, endCol - startCol);
+  const indent = " ".repeat(startCol);
+  const bar = agent.isActive ? "─".repeat(barWidth) + "▶" : "─".repeat(barWidth) + "┘";
+  const afterBar = " ".repeat(Math.max(0, width - endCol - 1));
+  
+  const agentColor = agent.color || (agent.isActive ? tuiColors.primary : tuiColors.textSecondary);
+  const prefix = agent.isActive ? "▶" : "●";
+  const paddedName = useMemo(() => agent.name.padEnd(10), [agent.name]);
+
+  return (
+    <Box flexDirection="row">
+      <Text color={agentColor}>{prefix} {paddedName} </Text>
+      <Text color={tuiColors.textTertiary}>{indent}</Text>
+      <Text color={agentColor}>{bar}</Text>
+      <Text color={tuiColors.textTertiary}>{afterBar}</Text>
+    </Box>
+  );
+});
+
+export const ExecutionTimeline = memo(function ExecutionTimeline({
+  tick,
+  totalDuration,
+  currentTime,
+  levels,
+  agents,
+  isActive = false,
+  width = 50,
+}: ExecutionTimelineProps) {
+  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
+  const timeScale = width / totalDuration;
+  const markerPositions = [0, 5, 10, 15, 20];
+  
+  const activeMarker = isActive ? ACTIVE_MARKER_FRAMES[tick % ACTIVE_MARKER_FRAMES.length] : "│";
+
+  const markerElements = useMemo(() => 
+    markerPositions.map((pos, idx) => (
+      <Box key={idx} width={10}>
+        <Text color={tuiColors.textTertiary}>{formatTime(pos).padStart(6)}</Text>
+      </Box>
+    )),
+    []
+  );
+
+  const separatorElements = useMemo(() => 
+    Array.from({ length: 5 }).map((_, idx) => (
+      <Box key={idx} width={10}>
+        <Text color={tuiColors.textTertiary}>{idx === 0 ? "│" : "      │"}</Text>
+      </Box>
+    )),
+    []
+  );
+
+  const levelElements = useMemo(() => 
+    levels.map((level, idx) => (
+      <Box key={idx} marginBottom={1}>
+        <TimelineBar level={level} timeScale={timeScale} width={width} currentTime={currentTime} />
+      </Box>
+    )),
+    [levels, timeScale, width, currentTime]
+  );
+
+  const agentElements = useMemo(() => 
+    agents.map((agent, idx) => (
+      <Box key={idx}>
+        <AgentTimeline agent={agent} timeScale={timeScale} width={width} currentTime={currentTime} />
+      </Box>
+    )),
+    [agents, timeScale, width, currentTime]
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor={borderColor} paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color={tuiColors.primary} bold>┌─</Text>
+        <Text color={tuiColors.primary} bold> EXECUTION_TIMELINE </Text>
+        <Text color={tuiColors.textTertiary}>────────────────</Text>
+      </Box>
+
+      <Box flexDirection="row" marginBottom={1}>
+        {markerElements}
+      </Box>
+
+      <Box flexDirection="row" marginBottom={1}>
+        {separatorElements}
+      </Box>
+
+      <Box flexDirection="row" marginBottom={1}>
+        <Text color={tuiColors.textTertiary}>{"├" + "─".repeat(width - 2) + "┤"}</Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {levelElements}
+      </Box>
+
+      <Box flexDirection="row" marginTop={1} marginBottom={1}>
+        <AnimatedBranch type="vertical" tick={tick} animated={isActive} />
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={tuiColors.textSecondary}>Agents:</Text>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1}>
+        {agentElements}
+      </Box>
+    </Box>
+  );
+});
+
+interface MiniTimelineProps {
+  progress: number;
+  tick: number;
+  isActive: boolean;
+  width?: number;
+}
+
+export const MiniTimeline = memo(function MiniTimeline({ progress, tick, isActive, width = 30 }: MiniTimelineProps) {
+  const filled = Math.floor((progress / 100) * width);
+  const empty = width - filled;
+  const currentPos = Math.min(filled, width - 1);
+  
+  const before = "─".repeat(currentPos);
+  const marker = isActive ? "●" : "○";
+  const after = "─".repeat(empty);
+
+  return (
+    <Box flexDirection="row">
+      <Text color={tuiColors.textTertiary}>├{before}</Text>
+      <Text color={isActive ? tuiColors.primary : tuiColors.textSecondary}>{marker}</Text>
+      <Text color={tuiColors.textTertiary}>{after}┤</Text>
+    </Box>
+  );
+});