rax-flow 0.1.8 → 0.2.0

package/src/tui/components/DAGPanel.tsx

@@ -1,17 +1,31 @@
-import React from "react";
+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 {
@@ -20,97 +34,175 @@ interface WorkflowState {
   totalProgress: number;
 }
 
-interface DAGPanelProps {
-  workflowState: WorkflowState;
+interface DAGNodeItemProps {
+  node: DAGNode;
   tick: number;
-  isActive: boolean;
+  isLast: boolean;
 }
 
-const statusIcons: Record<string, { icon: string; color: string }> = {
-  pending: { icon: "○", color: "gray" },
-  running: { icon: "▶", color: "yellow" },
-  done: { icon: "●", color: "green" },
-  error: { icon: "✗", color: "red" },
+const STATE_LABELS: Record<AgentState, string> = {
+  idle: "pending",
+  thinking: "thinking...",
+  processing: "processing",
+  running: "running",
+  success: "done",
+  error: "error",
+  waiting: "waiting",
 };
 
-const spinnerFrames = ["◐", "◓", "◑", "◒"];
+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` : "";
 
-function ProgressBar({ progress, width = 20 }: { progress: number; width?: number }) {
-  const filled = Math.round((progress / 100) * width);
-  const empty = width - filled;
-  const bar = "█".repeat(filled) + "░".repeat(empty);
   return (
-    <Text color={progress >= 100 ? "green" : progress > 0 ? "yellow" : "gray"}>
-      {bar}
-    </Text>
-  );
-}
-
-function DAGNodeItem({ node, tick }: { node: DAGNode; tick: number }) {
-  const { icon, color } = statusIcons[node.status];
-  const animatedIcon = node.status === "running" 
-    ? spinnerFrames[tick % spinnerFrames.length]
-    : icon;
-
-  return (
-    <Box flexDirection="row" marginLeft={2}>
-      <Text color={color}>{animatedIcon}</Text>
-      <Text color="white"> {node.name}</Text>
-      {node.agent && <Text color="gray"> [{node.agent}]</Text>}
+    <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;
 }
 
-function DAGLevelView({ level, tick, isActive }: { 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={isActive ? "#f97316" : "gray"} bold={isActive}>
-          {level.name}
+        <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>
-        <Text color="gray"> </Text>
-        <ProgressBar progress={level.progress} width={12} />
-        <Text color="gray"> {level.progress}%</Text>
       </Box>
-      {level.nodes.map((node) => (
-        <DAGNodeItem key={node.id} node={node} tick={tick} />
+      {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 function DAGPanel({ workflowState, tick, isActive }: DAGPanelProps) {
-  const borderColor = isActive ? "#f97316" : "gray";
+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={40}
+      width={46}
       borderStyle="single"
       borderColor={borderColor}
       paddingX={1}
     >
-      <Box borderStyle="single" borderColor="#f97316" marginBottom={1}>
-        <Text color="#f97316" bold>DAG</Text>
-        <Text color="gray"> EXECUTION</Text>
+      <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}>
-        {workflowState.levels.map((level, index) => (
-          <DAGLevelView
-            key={level.name}
-            level={level}
-            tick={tick}
-            isActive={index === workflowState.currentLevel}
-          />
-        ))}
+        {levelViews}
       </Box>
 
-      <Box borderStyle="single" borderColor="gray" marginTop={1}>
-        <Text color="gray">Total: </Text>
-        <ProgressBar progress={workflowState.totalProgress} width={10} />
-        <Text color="white"> {workflowState.totalProgress}%</Text>
+      <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>
+  );
+});

package/src/tui/components/Header.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+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;
@@ -10,67 +12,98 @@ interface HeaderProps {
   activePanel: string;
 }
 
-const spinnerFrames = ["◐", "◓", "◑", "◒"];
-const panelNames: Record<string, string> = {
+const PANEL_NAMES: Record<string, string> = {
   chat: "CHAT",
   dag: "DAG",
   status: "STATUS",
+  logs: "LOGS",
+  metrics: "METRICS",
+  memory: "MEMORY",
 };
 
-export function Header({ projectName, agentCount, provider, status, tick, activePanel }: HeaderProps) {
-  const statusColors = {
-    ready: "green",
-    running: "yellow",
-    error: "red",
-  };
+const PANELS = ["chat", "dag", "logs", "metrics", "memory"] as const;
 
-  const statusText = {
-    ready: "READY",
-    running: "RUNNING",
-    error: "ERROR",
-  };
+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 animatedStatus = status === "running" 
-    ? spinnerFrames[tick % spinnerFrames.length]
-    : status === "error" ? "✗" : "●";
+  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"
-      borderStyle="single"
-      borderColor="gray"
-      width="100%"
-    >
+    <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="#f97316" bold>■</Text>
-          <Text color="white" bold> RAX-FLOW</Text>
-          <Text color="gray"> HUB</Text>
+          <Text color={tuiColors.primary} bold>■</Text>
+          <Text color={tuiColors.textPrimary} bold> RAX-FLOW</Text>
+          <Text color={tuiColors.textSecondary}> HUB</Text>
         </Box>
-        <Box flexDirection="row" alignItems="center">
-          <Text color="gray">Project:</Text>
-          <Text color="cyan"> {projectName}</Text>
-          <Text color="gray"> │ Agents:</Text>
-          <Text color="green"> {agentCount}/12</Text>
-          <Text color="gray"> │ [{provider}]</Text>
-          <Text color={statusColors[status]}> {animatedStatus} {statusText[status]}</Text>
+        <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 flexDirection="row" paddingX={1}>
-        {(["chat", "dag", "status"] as const).map((panel) => (
-          <Box key={panel} marginRight={2}>
-            <Text color={activePanel === panel ? "#f97316" : "gray"} bold={activePanel === panel}>
-              [{panelNames[panel]}]
-            </Text>
-          </Box>
-        ))}
-        <Text color="gray">| Tab: Changer │ ?: Aide │ Ctrl+C: Quitter</Text>
+      
+      <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>
   );
-}
+});