@arvorco/relentless 0.6.1 → 0.7.0

package/src/tui/components/QueueInput.tsx

@@ -138,23 +138,40 @@ interface QueueInputProps {
 /**
  * Queue Input Component
  *
- * Displays an input field at the bottom of the TUI for adding items to the queue.
- * Only visible when active is true.
+ * Displays a full-width input field at the bottom of the TUI for adding items to the queue.
+ * Styled like Claude Code's input area with horizontal borders.
  */
 export function QueueInput({ active, value }: QueueInputProps): React.ReactElement | null {
   if (!active) {
-    return null;
+    // Show hint when not active
+    return (
+      <Box flexDirection="column" width="100%">
+        <Box width="100%">
+          <Text color={colors.dim}>{"─".repeat(80)}</Text>
+        </Box>
+        <Box paddingX={1}>
+          <Text color={colors.dim}>Press 'q' to add to queue, 'd' to delete, 'D' to clear</Text>
+        </Box>
+        <Box width="100%">
+          <Text color={colors.dim}>{"─".repeat(80)}</Text>
+        </Box>
+      </Box>
+    );
   }
 
-  const formatted = formatQueueInput(value);
-
   return (
-    <Box paddingX={1}>
-      <Text color={colors.accent} bold>
-        {formatted.prompt}{" "}
-      </Text>
-      <Text>{formatted.value}</Text>
-      <Text color={colors.dim}>{formatted.cursor}</Text>
+    <Box flexDirection="column" width="100%">
+      <Box width="100%">
+        <Text color={colors.accent}>{"─".repeat(80)}</Text>
+      </Box>
+      <Box paddingX={1} width="100%">
+        <Text color={colors.accent} bold>❯ </Text>
+        <Text>{value}</Text>
+        <Text color={colors.accent}>█</Text>
+      </Box>
+      <Box width="100%">
+        <Text color={colors.accent}>{"─".repeat(80)}</Text>
+      </Box>
     </Box>
   );
 }

package/src/tui/components/RateLimitIndicator.tsx

@@ -0,0 +1,97 @@
+/**
+ * RateLimitIndicator Component
+ *
+ * Rate limit countdown display for agents
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors, symbols } from "../theme.js";
+import { useCountdown } from "../hooks/useAnimation.js";
+import type { AgentState } from "../types.js";
+
+interface RateLimitIndicatorProps {
+  /** All agent states */
+  agents: AgentState[];
+  /** Whether to show compact view */
+  compact?: boolean;
+  /** Maximum agents to show */
+  maxAgents?: number;
+}
+
+interface AgentCountdownProps {
+  agent: AgentState;
+  compact: boolean;
+}
+
+function AgentCountdown({ agent, compact }: AgentCountdownProps): React.ReactElement | null {
+  const countdown = useCountdown(agent.resetTime, agent.rateLimited);
+
+  if (!agent.rateLimited || !countdown) {
+    return null;
+  }
+
+  if (compact) {
+    return (
+      <Text color={colors.status.rateLimited}>
+        {agent.name.substring(0, 3)}: {countdown.display}
+      </Text>
+    );
+  }
+
+  return (
+    <Box>
+      <Text color={colors.status.rateLimited}>
+        {symbols.clock} {agent.displayName}: {countdown.display}
+      </Text>
+    </Box>
+  );
+}
+
+export function RateLimitIndicator({
+  agents,
+  compact = false,
+  maxAgents = 3,
+}: RateLimitIndicatorProps): React.ReactElement | null {
+  // Filter to rate-limited agents only
+  const limitedAgents = agents.filter((a) => a.rateLimited);
+
+  if (limitedAgents.length === 0) {
+    return null;
+  }
+
+  const visibleAgents = limitedAgents.slice(0, maxAgents);
+  const hasMore = limitedAgents.length > maxAgents;
+
+  if (compact) {
+    return (
+      <Box>
+        {visibleAgents.map((agent, i) => (
+          <React.Fragment key={agent.name}>
+            {i > 0 && <Text color={colors.dim}> </Text>}
+            <AgentCountdown agent={agent} compact />
+          </React.Fragment>
+        ))}
+        {hasMore && (
+          <Text color={colors.dim}> +{limitedAgents.length - maxAgents}</Text>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text color={colors.status.rateLimited} bold>
+        Rate Limited:
+      </Text>
+      {visibleAgents.map((agent) => (
+        <AgentCountdown key={agent.name} agent={agent} compact={false} />
+      ))}
+      {hasMore && (
+        <Text color={colors.dim}>
+          +{limitedAgents.length - maxAgents} more
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,188 @@
+/**
+ * StatusBar Component
+ *
+ * Bottom bar showing real-time metrics: cost, tokens, mode, rate limits, iteration, time, savings
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors, borders, badges, symbols } from "../theme.js";
+import { CostBadge } from "./CostBadge.js";
+import { TokenCounter } from "./TokenCounter.js";
+import { RateLimitIndicator } from "./RateLimitIndicator.js";
+import type { AgentState, CostData, TokenUsage } from "../types.js";
+import type { AgentName } from "../../agents/types.js";
+
+interface StatusBarProps {
+  /** Cost tracking data */
+  costData?: CostData;
+  /** Token usage */
+  tokens?: TokenUsage;
+  /** Current iteration */
+  iteration: number;
+  /** Maximum iterations */
+  maxIterations: number;
+  /** All agent states */
+  agents: AgentState[];
+  /** Total elapsed seconds */
+  elapsedSeconds: number;
+  /** Current mode */
+  mode?: "free" | "cheap" | "good" | "genius";
+  /** Current complexity */
+  complexity?: "simple" | "medium" | "complex" | "expert";
+  /** Current harness/agent */
+  harness?: AgentName;
+  /** Current model */
+  model?: string;
+  /** Savings percentage vs SOTA */
+  savingsPercent?: number;
+  /** Completed stories count */
+  completedStories?: number;
+  /** Total stories count */
+  totalStories?: number;
+}
+
+/**
+ * Format elapsed time as MM:SS or HH:MM:SS
+ */
+function formatElapsedTime(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  if (hours > 0) {
+    return `${hours}h ${minutes.toString().padStart(2, "0")}m`;
+  }
+
+  return `${minutes}m ${secs.toString().padStart(2, "0")}s`;
+}
+
+/**
+ * Separator component
+ */
+function Separator(): React.ReactElement {
+  return (
+    <Text color={colors.dim}> {borders.vertical} </Text>
+  );
+}
+
+export function StatusBar({
+  costData,
+  tokens,
+  iteration,
+  maxIterations,
+  agents,
+  elapsedSeconds,
+  mode,
+  complexity,
+  harness,
+  model,
+  savingsPercent,
+  completedStories,
+  totalStories,
+}: StatusBarProps): React.ReactElement {
+  // Get mode badge styling
+  const modeBadge = mode ? badges.mode[mode] : null;
+  const complexityBadge = complexity ? badges.complexity[complexity] : null;
+
+  // Check for rate-limited agents
+  const hasRateLimits = agents.some((a) => a.rateLimited);
+
+  return (
+    <Box
+      width="100%"
+      paddingX={1}
+      borderStyle="single"
+      borderColor={colors.dim}
+      justifyContent="space-between"
+    >
+      {/* Left section: Cost & Tokens */}
+      <Box>
+        {costData && (
+          <>
+            <CostBadge
+              actual={costData.actual}
+              estimated={costData.estimated}
+              compact
+            />
+            <Separator />
+          </>
+        )}
+
+        {tokens && (
+          <>
+            <TokenCounter tokens={tokens} compact />
+            <Separator />
+          </>
+        )}
+
+        {/* Iteration counter */}
+        <Text color={colors.dim}>
+          {iteration}/{maxIterations}
+        </Text>
+
+        {/* Stories progress */}
+        {completedStories !== undefined && totalStories !== undefined && (
+          <>
+            <Separator />
+            <Text color={completedStories === totalStories ? colors.success : colors.warning}>
+              {completedStories}/{totalStories}
+            </Text>
+          </>
+        )}
+      </Box>
+
+      {/* Center section: Mode/Routing info */}
+      <Box>
+        {modeBadge && (
+          <>
+            <Text color={modeBadge.color as string} bold>
+              {modeBadge.text}
+            </Text>
+            {complexityBadge && (
+              <>
+                <Text color={colors.dim}>/</Text>
+                <Text color={complexityBadge.color as string}>
+                  {complexityBadge.text}
+                </Text>
+              </>
+            )}
+          </>
+        )}
+
+        {harness && model && (
+          <>
+            <Text color={colors.dim}> {symbols.arrow} </Text>
+            <Text color={colors.primary}>{harness}</Text>
+            <Text color={colors.dim}>/</Text>
+            <Text color={colors.dim}>{model}</Text>
+          </>
+        )}
+      </Box>
+
+      {/* Right section: Rate limits, Time, Savings */}
+      <Box>
+        {/* Rate limit indicators */}
+        {hasRateLimits && (
+          <>
+            <RateLimitIndicator agents={agents} compact maxAgents={1} />
+            <Separator />
+          </>
+        )}
+
+        {/* Elapsed time */}
+        <Text color={colors.dim}>{formatElapsedTime(elapsedSeconds)}</Text>
+
+        {/* Savings indicator */}
+        {savingsPercent !== undefined && savingsPercent > 0 && (
+          <>
+            <Separator />
+            <Text color={colors.success}>
+              {savingsPercent}% saved
+            </Text>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/TaskItem.tsx

@@ -0,0 +1,131 @@
+/**
+ * TaskItem Component
+ *
+ * Individual task item with status indicator, animation, and metadata
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors, symbols } from "../theme.js";
+import { usePulse } from "../hooks/useAnimation.js";
+import type { Story } from "../types.js";
+
+interface TaskItemProps {
+  /** Story/task data */
+  story: Story;
+  /** Whether this is the currently active task */
+  isCurrent: boolean;
+  /** Whether to show compact view (less details) */
+  compact?: boolean;
+  /** Maximum width for title truncation */
+  maxTitleWidth?: number;
+}
+
+/**
+ * Get the status symbol and color for a story
+ */
+function getStatusIndicator(
+  story: Story,
+  isCurrent: boolean,
+  pulseFrame: string
+): { symbol: string; color: string } {
+  if (isCurrent) {
+    return { symbol: pulseFrame, color: colors.warning };
+  }
+  if (story.blocked) {
+    return { symbol: symbols.blocked, color: colors.status.blocked };
+  }
+  if (story.passes) {
+    return { symbol: symbols.complete, color: colors.success };
+  }
+  return { symbol: symbols.pending, color: colors.dim };
+}
+
+/**
+ * Get priority badge color
+ */
+function getPriorityColor(priority: number): string {
+  if (priority <= 2) return colors.error;
+  if (priority <= 4) return colors.warning;
+  return colors.dim;
+}
+
+export function TaskItem({
+  story,
+  isCurrent,
+  compact = false,
+  maxTitleWidth = 30,
+}: TaskItemProps): React.ReactElement {
+  const pulseFrame = usePulse(isCurrent);
+  const { symbol, color } = getStatusIndicator(story, isCurrent, pulseFrame);
+
+  // Truncate title if needed
+  const displayTitle =
+    story.title.length > maxTitleWidth
+      ? story.title.substring(0, maxTitleWidth - 1) + "\u2026"
+      : story.title;
+
+  if (compact) {
+    return (
+      <Box flexDirection="row">
+        {/* Status indicator */}
+        <Text color={color}>{symbol.padEnd(4)}</Text>
+
+        {/* Story ID */}
+        <Text
+          color={story.passes ? colors.success : isCurrent ? colors.warning : undefined}
+          dimColor={story.passes}
+        >
+          {story.id}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="row" width="100%">
+      {/* Status indicator */}
+      <Text color={color}>{symbol.padEnd(4)}</Text>
+
+      {/* Story ID */}
+      <Text
+        color={story.passes ? colors.success : isCurrent ? colors.warning : undefined}
+        dimColor={story.passes}
+        bold={isCurrent}
+      >
+        {story.id.padEnd(9)}
+      </Text>
+
+      {/* Priority badge */}
+      <Text color={getPriorityColor(story.priority)} bold={story.priority <= 3}>
+        P{story.priority}{" "}
+      </Text>
+
+      {/* Title */}
+      <Text
+        color={story.passes ? colors.dim : isCurrent ? colors.warning : undefined}
+        dimColor={story.passes}
+        strikethrough={story.passes}
+        wrap="truncate"
+      >
+        {displayTitle}
+      </Text>
+
+      {/* Metadata badges */}
+      {story.research && (
+        <Text color={colors.dim}> {symbols.research}</Text>
+      )}
+
+      {story.blocked && !isCurrent && (
+        <Text color={colors.status.blocked}> {symbols.blocked}</Text>
+      )}
+
+      {story.phase && (
+        <Text color={colors.dim} dimColor>
+          {" "}
+          [{story.phase}]
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/TaskPanel.tsx

@@ -0,0 +1,189 @@
+/**
+ * TaskPanel Component
+ *
+ * Left panel showing scrollable task list with phase grouping
+ */
+
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { colors, symbols } from "../theme.js";
+import { TaskItem } from "./TaskItem.js";
+import type { Story } from "../types.js";
+
+interface TaskPanelProps {
+  /** All stories */
+  stories: Story[];
+  /** Currently active story ID */
+  currentStoryId?: string;
+  /** Maximum visible rows */
+  maxRows?: number;
+  /** Panel title */
+  title?: string;
+  /** Whether to show phase headers */
+  showPhases?: boolean;
+}
+
+interface PhaseGroup {
+  phase: string;
+  stories: Story[];
+}
+
+/**
+ * Group stories by phase
+ */
+function groupByPhase(stories: Story[]): PhaseGroup[] {
+  const groups = new Map<string, Story[]>();
+
+  for (const story of stories) {
+    const phase = story.phase ?? "Tasks";
+    if (!groups.has(phase)) {
+      groups.set(phase, []);
+    }
+    groups.get(phase)!.push(story);
+  }
+
+  return Array.from(groups.entries()).map(([phase, stories]) => ({
+    phase,
+    stories,
+  }));
+}
+
+/**
+ * Calculate scroll window to keep current story visible
+ */
+function calculateScrollWindow(
+  totalItems: number,
+  currentIndex: number,
+  maxVisible: number
+): { start: number; end: number } {
+  if (totalItems <= maxVisible) {
+    return { start: 0, end: totalItems };
+  }
+
+  // Center the current item in the window
+  const half = Math.floor(maxVisible / 2);
+  let start = Math.max(0, currentIndex - half);
+
+  // Adjust if window goes past the end
+  if (start + maxVisible > totalItems) {
+    start = Math.max(0, totalItems - maxVisible);
+  }
+
+  return { start, end: Math.min(totalItems, start + maxVisible) };
+}
+
+export function TaskPanel({
+  stories,
+  currentStoryId,
+  maxRows = 20,
+  title = "Tasks",
+  showPhases = true,
+}: TaskPanelProps): React.ReactElement {
+  // Calculate completion stats
+  const completedCount = stories.filter((s) => s.passes).length;
+  const totalCount = stories.length;
+  const progressPercent =
+    totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+  // Find current story index
+  const currentIndex = stories.findIndex((s) => s.id === currentStoryId);
+
+  // Group stories by phase if enabled
+  const phaseGroups = useMemo(() => {
+    if (!showPhases) {
+      return [{ phase: "", stories }];
+    }
+    return groupByPhase(stories);
+  }, [stories, showPhases]);
+
+  // Calculate which items to show (with scrolling)
+  const { start, end } = calculateScrollWindow(stories.length, currentIndex, maxRows);
+  const visibleStories = stories.slice(start, end);
+  const hasMore = end < stories.length;
+  const hasLess = start > 0;
+
+  return (
+    <Box flexDirection="column" paddingX={1} width="100%">
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color={colors.primary} bold>
+          {title}
+        </Text>
+        <Text color={colors.dim}>
+          {" "}
+          ({completedCount}/{totalCount})
+        </Text>
+        <Text color={progressPercent === 100 ? colors.success : colors.dim}>
+          {" "}
+          {progressPercent}%
+        </Text>
+      </Box>
+
+      {/* Scroll indicator (top) */}
+      {hasLess && (
+        <Box>
+          <Text color={colors.dim}>
+            {symbols.priority.high} {start} more above
+          </Text>
+        </Box>
+      )}
+
+      {/* Task list */}
+      <Box flexDirection="column">
+        {showPhases
+          ? phaseGroups.map((group) => {
+              // Filter visible stories for this phase
+              const visibleInPhase = group.stories.filter((s) =>
+                visibleStories.includes(s)
+              );
+              if (visibleInPhase.length === 0) return null;
+
+              return (
+                <Box key={group.phase} flexDirection="column" marginBottom={1}>
+                  {/* Phase header */}
+                  {group.phase && (
+                    <Box marginBottom={0}>
+                      <Text color={colors.accent} bold>
+                        [{group.phase}]
+                      </Text>
+                      <Text color={colors.dim}>
+                        {" "}
+                        ({group.stories.filter((s) => s.passes).length}/
+                        {group.stories.length})
+                      </Text>
+                    </Box>
+                  )}
+
+                  {/* Stories in phase */}
+                  {visibleInPhase.map((story) => (
+                    <TaskItem
+                      key={story.id}
+                      story={story}
+                      isCurrent={story.id === currentStoryId}
+                      maxTitleWidth={25}
+                    />
+                  ))}
+                </Box>
+              );
+            })
+          : visibleStories.map((story) => (
+              <TaskItem
+                key={story.id}
+                story={story}
+                isCurrent={story.id === currentStoryId}
+                maxTitleWidth={25}
+              />
+            ))}
+      </Box>
+
+      {/* Scroll indicator (bottom) */}
+      {hasMore && (
+        <Box>
+          <Text color={colors.dim}>
+            {symbols.priority.low} {stories.length - end} more below
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/TokenCounter.tsx

@@ -0,0 +1,48 @@
+/**
+ * TokenCounter Component
+ *
+ * Token usage display with input/output breakdown
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme.js";
+import { formatTokens } from "../hooks/useCostTracking.js";
+import type { TokenUsage } from "../types.js";
+
+interface TokenCounterProps {
+  /** Token usage data */
+  tokens: TokenUsage;
+  /** Whether to show compact view (only total) */
+  compact?: boolean;
+}
+
+export function TokenCounter({
+  tokens,
+  compact = false,
+}: TokenCounterProps): React.ReactElement {
+  const inputFormatted = formatTokens(tokens.inputTokens);
+  const outputFormatted = formatTokens(tokens.outputTokens);
+  const totalFormatted = formatTokens(tokens.totalTokens);
+
+  if (compact) {
+    return (
+      <Text color={colors.primary}>
+        {totalFormatted}
+      </Text>
+    );
+  }
+
+  return (
+    <Box>
+      <Text color={colors.dim}>
+        {inputFormatted}
+      </Text>
+      <Text color={colors.dim}> in / </Text>
+      <Text color={colors.primary}>
+        {outputFormatted}
+      </Text>
+      <Text color={colors.dim}> out</Text>
+    </Box>
+  );
+}