@ranker/raxflow 0.2.2 → 0.2.3

package/src/tui/components/AnimatedBranch.tsx

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

@@ -1,128 +0,0 @@
-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;
-  maxHeight?: number;
-}
-
-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, maxHeight }: ChatPanelProps) {
-  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
-  const [animatingMessageId, setAnimatingMessageId] = useState<string | null>(null);
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-
-  const maxMsgs = maxHeight ? Math.max(3, maxHeight - 4) : MAX_DISPLAYED_MESSAGES;
-  const displayMessages = useMemo(() => 
-    messages.slice(-maxMsgs),
-    [messages, maxMsgs]
-  );
-
-  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}
-      height={maxHeight}
-      borderStyle="single"
-      borderColor={borderColor}
-      paddingX={1}
-    >
-      <Box marginBottom={1} flexShrink={0}>
-        <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

@@ -1,212 +0,0 @@
-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;
-  maxHeight?: number;
-}
-
-export const DAGPanel = memo(function DAGPanel({ workflowState, tick, isActive, maxHeight }: DAGPanelProps) {
-  const borderColor = isActive ? tuiColors.primary : tuiColors.border;
-
-  const visibleLevels = maxHeight ? Math.max(2, Math.floor((maxHeight - 6) / 4)) : workflowState.levels.length;
-
-  const levelViews = useMemo(() => 
-    workflowState.levels.slice(0, visibleLevels).map((level, index) => (
-      <DAGLevelView
-        key={level.name}
-        level={level}
-        tick={tick}
-        isActive={index === workflowState.currentLevel}
-      />
-    )),
-    [workflowState.levels, workflowState.currentLevel, tick, visibleLevels]
-  );
-
-  const isAnimating = useMemo(() => 
-    workflowState.totalProgress > 0 && workflowState.totalProgress < 100,
-    [workflowState.totalProgress]
-  );
-
-  return (
-    <Box
-      flexDirection="column"
-      width={46}
-      height={maxHeight}
-      borderStyle="single"
-      borderColor={borderColor}
-      paddingX={1}
-    >
-      <Box marginBottom={1} flexShrink={0}>
-        <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} overflow="hidden">
-        {levelViews}
-      </Box>
-
-      <Box marginTop={1} flexShrink={0}>
-        <Text color={tuiColors.textTertiary}>├─ TOTAL ─────────────────────────</Text>
-      </Box>
-      <Box flexDirection="row" flexShrink={0}>
-        <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

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