rax-flow 0.1.9 → 0.2.0

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>;
+});

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

@@ -0,0 +1,54 @@
+import React, { memo, useMemo } from "react";
+import { Text } from "ink";
+import { useAnimation } from "../../hooks/useAnimation.js";
+import { tuiColors } from "../../styles/index.js";
+
+export type SpinnerType = "dots" | "circle" | "pulse" | "brackets" | "arrows" | "hamburger" | "grow";
+
+const SPINNER_FRAMES: Record<SpinnerType, string[]> = {
+  dots: ["⠋", "⠙", "⠹", "⠸", "⼸", "⠴", "⠦", "⠧", "⠇", "⠏"],
+  circle: ["◐", "◓", "◑", "◒"],
+  pulse: ["●", "◐", "○", "◐"],
+  brackets: ["[          ]", "[=         ]", "[==        ]", "[===       ]", "[====      ]", "[=====     ]", "[======    ]", "[=======   ]", "[========  ]", "[========= ]", "[==========]", "[ =========]", "[  ========]", "[   =======]", "[    ======]", "[     =====]", "[      ====]", "[       ===]", "[        ==]", "[         =]"],
+  arrows: ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"],
+  hamburger: ["☰", "☱", "ěr", "☳", "☴", "pě", "☲", "☶"],
+  grow: ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█", "▇", "▆", "▅", "▄", "▃", "▂"],
+};
+
+const DEFAULT_INTERVALS: Record<SpinnerType, number> = {
+  dots: 100,
+  circle: 120,
+  pulse: 200,
+  brackets: 80,
+  arrows: 100,
+  hamburger: 150,
+  grow: 100,
+};
+
+interface SpinnerProps {
+  type?: SpinnerType;
+  interval?: number;
+  color?: string;
+  isAnimating?: boolean;
+}
+
+export const Spinner = memo(function Spinner({ 
+  type = "dots", 
+  interval, 
+  color = tuiColors.primary, 
+  isAnimating = true 
+}: SpinnerProps) {
+  const frames = SPINNER_FRAMES[type];
+  const actualInterval = interval ?? DEFAULT_INTERVALS[type];
+  const { frame } = useAnimation({ interval: actualInterval, loop: true, autoStart: isAnimating, maxFps: 20 });
+  const currentFrame = frames[frame % frames.length];
+
+  return <Text color={color}>{currentFrame}</Text>;
+});
+
+export function useSpinnerFrame(type: SpinnerType = "dots", tick: number): string {
+  const frames = SPINNER_FRAMES[type];
+  return frames[tick % frames.length];
+}
+
+export const spinnerTypes = Object.keys(SPINNER_FRAMES) as SpinnerType[];

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

@@ -0,0 +1,153 @@
+import React, { useState, useEffect, memo, useRef } from "react";
+import { Box, Text } from "ink";
+import { tuiColors, getStatusIndicator } from "../../styles/index.js";
+import { useAnimation } from "../../hooks/useAnimation.js";
+
+export type TransitionStatus = "entering" | "active" | "exiting" | "hidden";
+
+interface StatusAnimatorProps {
+  status: "pending" | "running" | "done" | "error" | "idle" | "queued";
+  label?: string;
+  showLabel?: boolean;
+  transitionDuration?: number;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: tuiColors.textTertiary,
+  queued: tuiColors.warning,
+  running: tuiColors.primary,
+  done: tuiColors.success,
+  error: tuiColors.error,
+  idle: tuiColors.textQuaternary,
+};
+
+const RUNNING_FRAMES = ["◐", "◓", "◑", "◒"];
+const TRANSITION_FRAMES = ["○", "◐", "◓", "●"];
+const EXIT_FRAMES = ["●", "◑", "◒", "○"];
+
+const STATUS_ORDER = ["pending", "queued", "running", "done", "error", "idle"];
+
+function getStatusColor(status: string): string {
+  return STATUS_COLORS[status] || tuiColors.textTertiary;
+}
+
+export const StatusAnimator = memo(function StatusAnimator({
+  status,
+  label,
+  showLabel = true,
+  transitionDuration = 500,
+}: StatusAnimatorProps) {
+  const [displayStatus, setDisplayStatus] = useState(status);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [transitionFrame, setTransitionFrame] = useState(0);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { frame } = useAnimation({ interval: 100, loop: true, maxFps: 15 });
+
+  useEffect(() => {
+    if (status !== displayStatus) {
+      setIsTransitioning(true);
+      timeoutRef.current = setTimeout(() => {
+        setDisplayStatus(status);
+        setIsTransitioning(false);
+      }, transitionDuration);
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }
+  }, [status, displayStatus, transitionDuration]);
+
+  const getAnimatedIcon = (): string => {
+    if (status === "running") {
+      return RUNNING_FRAMES[frame % RUNNING_FRAMES.length];
+    }
+
+    if (isTransitioning) {
+      const frames = STATUS_ORDER.indexOf(status) > STATUS_ORDER.indexOf(displayStatus) 
+        ? TRANSITION_FRAMES 
+        : EXIT_FRAMES;
+      return frames[transitionFrame % frames.length];
+    }
+
+    const statusInfo = getStatusIndicator(displayStatus);
+    return statusInfo.icon;
+  };
+
+  const color = getStatusColor(status);
+
+  return (
+    <Box flexDirection="row">
+      <Text color={color}>{getAnimatedIcon()}</Text>
+      {showLabel && label && (
+        <Text color={color}> {label}</Text>
+      )}
+      {showLabel && !label && (
+        <Text color={tuiColors.textSecondary}> [{status.toUpperCase()}]</Text>
+      )}
+    </Box>
+  );
+});
+
+interface MetricPulseProps {
+  value: number | string;
+  label: string;
+  unit?: string;
+  threshold?: { warning: number; critical: number };
+  isHighlighted?: boolean;
+}
+
+export const MetricPulse = memo(function MetricPulse({ 
+  value, 
+  label, 
+  unit, 
+  threshold, 
+  isHighlighted 
+}: MetricPulseProps) {
+  const { frame } = useAnimation({ interval: 200, loop: true, maxFps: 10 });
+  const numValue = typeof value === "number" ? value : parseFloat(value) || 0;
+
+  let color = tuiColors.success;
+  if (threshold) {
+    if (numValue >= threshold.critical) color = tuiColors.error;
+    else if (numValue >= threshold.warning) color = tuiColors.warning;
+  }
+
+  return (
+    <Box flexDirection="row">
+      <Text color={tuiColors.textTertiary}>{label}:</Text>
+      <Text color={color} bold={isHighlighted}> {value}{unit || ""}</Text>
+    </Box>
+  );
+});
+
+interface FitnessAnimatorProps {
+  value: number;
+  previousValue?: number;
+}
+
+export const FitnessAnimator = memo(function FitnessAnimator({ value, previousValue }: FitnessAnimatorProps) {
+  const { frame } = useAnimation({ interval: 150, loop: true, maxFps: 12 });
+  const diff = previousValue !== undefined ? value - previousValue : 0;
+  const isImproving = diff > 0;
+  const isDeclining = diff < 0;
+
+  let color = tuiColors.success;
+  if (value >= 0.9) color = tuiColors.success;
+  else if (value >= 0.7) color = tuiColors.warning;
+  else color = tuiColors.error;
+
+  const frames = ["●", "◐", "●", "◐"];
+  const animFrame = (isImproving || isDeclining) ? frames[frame % frames.length] : "●";
+
+  const statusLabel = value >= 0.9 ? "OPTIMAL" : value >= 0.7 ? "GOOD" : "IMPROVING";
+
+  return (
+    <Box flexDirection="row">
+      <Text color={tuiColors.textTertiary}>Fitness:</Text>
+      <Text color={color} bold> {value.toFixed(2)}</Text>
+      <Text color={tuiColors.textTertiary}> [{statusLabel}]</Text>
+      {isImproving && <Text color={tuiColors.success}> ↑</Text>}
+      {isDeclining && <Text color={tuiColors.error}> ↓</Text>}
+    </Box>
+  );
+});

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

@@ -0,0 +1,119 @@
+import React, { useState, useEffect, memo, useRef } from "react";
+import { Box, Text } from "ink";
+import { tuiColors } from "../../styles/index.js";
+import { Spinner } from "./Spinner.js";
+
+interface TypingEffectProps {
+  text: string;
+  speed?: number;
+  color?: string;
+  showCursor?: boolean;
+  cursorChar?: string;
+  onComplete?: () => void;
+  isAnimating?: boolean;
+  prefix?: string;
+}
+
+export const TypingEffect = memo(function TypingEffect({
+  text,
+  speed = 30,
+  color = tuiColors.textPrimary,
+  showCursor = true,
+  cursorChar = "█",
+  onComplete,
+  isAnimating = true,
+  prefix,
+}: TypingEffectProps) {
+  const [displayedChars, setDisplayedChars] = useState(0);
+  const [isComplete, setIsComplete] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+
+  useEffect(() => {
+    if (!isAnimating) {
+      setDisplayedChars(text.length);
+      setIsComplete(true);
+      return;
+    }
+
+    if (displayedChars >= text.length) {
+      if (!isComplete) {
+        setIsComplete(true);
+        onCompleteRef.current?.();
+      }
+      return;
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setDisplayedChars((prev) => prev + 1);
+    }, speed);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [displayedChars, text.length, speed, isComplete, isAnimating]);
+
+  const displayedText = text.slice(0, displayedChars);
+
+  return (
+    <Box flexDirection="row">
+      {prefix && <Text color={tuiColors.textTertiary}>{prefix}</Text>}
+      <Text color={color}>{displayedText}</Text>
+      {showCursor && !isComplete && <Text color={tuiColors.primary}>{cursorChar}</Text>}
+    </Box>
+  );
+});
+
+interface TypewriterMessageProps {
+  text: string;
+  speed?: number;
+  color?: string;
+  isComplete?: boolean;
+}
+
+export const TypewriterMessage = memo(function TypewriterMessage({ 
+  text, 
+  speed = 20, 
+  color = tuiColors.textPrimary, 
+  isComplete 
+}: TypewriterMessageProps) {
+  const [displayedChars, setDisplayedChars] = useState(0);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (isComplete) {
+      setDisplayedChars(text.length);
+      return;
+    }
+
+    if (displayedChars >= text.length) return;
+
+    timeoutRef.current = setTimeout(() => {
+      setDisplayedChars((prev) => prev + 1);
+    }, speed);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [displayedChars, text.length, speed, isComplete]);
+
+  return <Text color={color}>{text.slice(0, displayedChars)}</Text>;
+});
+
+interface ProcessingIndicatorProps {
+  text?: string;
+  color?: string;
+}
+
+export const ProcessingIndicator = memo(function ProcessingIndicator({ 
+  text = "Processing", 
+  color = tuiColors.warning 
+}: ProcessingIndicatorProps) {
+  return (
+    <Box flexDirection="row">
+      <Spinner type="dots" color={color} />
+      <Text color={color}> {text}...</Text>
+    </Box>
+  );
+});

package/src/tui/components/animations/index.ts

@@ -0,0 +1,16 @@
+export { Spinner, useSpinnerFrame, spinnerTypes } from "./Spinner.js";
+export type { SpinnerType } from "./Spinner.js";
+
+export { Pulse, StatusPulse, usePulseFrame, usePulseIntensity } from "./Pulse.js";
+
+export { TypingEffect, TypewriterMessage, ProcessingIndicator } from "./TypingEffect.js";
+
+export { StatusAnimator, MetricPulse, FitnessAnimator } from "./StatusAnimator.js";
+export type { TransitionStatus } from "./StatusAnimator.js";
+
+export { 
+  AnimatedProgressBar, 
+  ProgressWithLabel, 
+  SegmentedProgress, 
+  WorkflowProgress 
+} from "./ProgressBar.js";