@arvorco/relentless 0.6.1 → 0.7.0

package/src/tui/TUIRunner.tsx

@@ -86,6 +86,12 @@ function TUIRunnerComponent({
     deleteMode: false,
     confirmClearActive: false,
     statusMessage: undefined,
+    // New fields for enhanced TUI
+    messages: [],
+    layoutMode: "vertical",
+    outputMode: "normal",
+    totalElapsedSeconds: 0,
+    startTime: new Date(),
   });
 
   // Queue file watcher ref
@@ -93,6 +99,12 @@ function TUIRunnerComponent({
   const featurePathRef = React.useRef<string>("");
   const lastOutputAtRef = React.useRef<number>(Date.now());
 
+  // Skip iteration - AbortController to kill the running process
+  const abortControllerRef = React.useRef<AbortController | null>(null);
+
+  // Idle warning threshold (5 minutes)
+  const IDLE_WARNING_THRESHOLD_SECONDS = 300;
+
   // Load queue items function
   const loadQueueItems = useCallback(async () => {
     if (!featurePathRef.current) return;
@@ -134,9 +146,29 @@ function TUIRunnerComponent({
     };
   }, [prdPath, loadQueueItems]);
 
-  // Handle keyboard input for queue
+  // Handle keyboard input for queue and skip
   useInput((input, key) => {
-    const keyString = key.escape ? "escape" : key.return ? "return" : key.backspace ? "backspace" : key.tab ? "tab" : input;
+    // Detect backspace: key.backspace flag OR delete/backspace character codes
+    const isBackspace = key.backspace || key.delete || input === "\x7f" || input === "\b";
+    const keyString = key.escape ? "escape" : key.return ? "return" : isBackspace ? "backspace" : key.tab ? "tab" : input;
+
+    // Handle 's' key to skip current iteration when idle
+    if (input === "s" && !state.queueInputActive && !state.deleteMode && !state.confirmClearActive) {
+      if (state.isRunning && state.idleSeconds >= IDLE_WARNING_THRESHOLD_SECONDS) {
+        // Abort the current agent process
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+        }
+        setState((prev) => ({
+          ...prev,
+          statusMessage: "Killing agent and skipping to next iteration...",
+        }));
+        setTimeout(() => {
+          setState((prev) => ({ ...prev, statusMessage: undefined }));
+        }, 2000);
+        return;
+      }
+    }
 
     // First check deletion handling (d/D keys, numbers in delete mode, y/n in confirm mode)
     const deletionState = {
@@ -270,6 +302,9 @@ function TUIRunnerComponent({
         ...prev,
         elapsedSeconds: prev.elapsedSeconds + 1,
         idleSeconds: Math.floor((now - lastOutputAtRef.current) / 1000),
+        totalElapsedSeconds: prev.startTime
+          ? Math.floor((now - prev.startTime.getTime()) / 1000)
+          : prev.totalElapsedSeconds + 1,
       }));
     }, 1000);
 
@@ -360,6 +395,8 @@ function TUIRunnerComponent({
 
         // Main loop
         for (let i = 1; i <= maxIterations && !cancelled; i++) {
+          // Create new AbortController for this iteration
+          abortControllerRef.current = new AbortController();
           setState((prev) => ({ ...prev, iteration: i }));
 
           // Reload PRD
@@ -514,11 +551,19 @@ function TUIRunnerComponent({
               dangerouslyAllowAll: config.agents[agent.name]?.dangerouslyAllowAll ?? true,
               model: autoModeEnabled ? autoRoutingModel : config.agents[agent.name]?.model,
               timeout: config.execution.timeout,
+              signal: abortControllerRef.current?.signal,
             });
 
             let result;
+            let aborted = false;
             for await (const chunk of stream) {
               if (cancelled) break;
+              // Check if aborted (user pressed 's' to skip)
+              if (abortControllerRef.current?.signal.aborted) {
+                addOutput("⏭️ Agent killed - skipping to next iteration...");
+                aborted = true;
+                break;
+              }
               // Split chunk into lines and add each
               const lines = chunk.split("\n");
               for (const line of lines) {
@@ -529,6 +574,12 @@ function TUIRunnerComponent({
               result = chunk; // Will be overwritten by return value
             }
 
+            // If aborted, continue to next iteration
+            if (aborted) {
+              await sleep(500); // Brief delay before next iteration
+              continue;
+            }
+
             // Get the final result
             const finalResult = await stream.next();
             if (finalResult.done && finalResult.value) {
@@ -571,8 +622,16 @@ function TUIRunnerComponent({
               dangerouslyAllowAll: config.agents[agent.name]?.dangerouslyAllowAll ?? true,
               model: autoModeEnabled ? autoRoutingModel : config.agents[agent.name]?.model,
               timeout: config.execution.timeout,
+              signal: abortControllerRef.current?.signal,
             });
 
+            // Check if aborted (user pressed 's' to skip)
+            if (abortControllerRef.current?.signal.aborted) {
+              addOutput("⏭️ Agent killed - skipping to next iteration...");
+              await sleep(500);
+              continue;
+            }
+
             // Add output preview
             const lines = result.output.split("\n").slice(0, 10);
             for (const line of lines) {
@@ -632,8 +691,13 @@ function TUIRunnerComponent({
           const counts = countStories(updatedPRD);
           addOutput(`Progress: ${counts.completed}/${counts.total} complete`);
 
-          // Delay between iterations
-          await sleep(config.execution.iterationDelay);
+          // Delay between iterations (interruptible by abort)
+          const delayMs = config.execution.iterationDelay;
+          const delaySteps = Math.ceil(delayMs / 100);
+          for (let step = 0; step < delaySteps; step++) {
+            if (abortControllerRef.current?.signal.aborted || cancelled) break;
+            await sleep(Math.min(100, delayMs - step * 100));
+          }
         }
 
         // Final state

package/src/tui/components/CostBadge.tsx

@@ -0,0 +1,59 @@
+/**
+ * CostBadge Component
+ *
+ * Real-time cost display with actual vs estimated
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme.js";
+import { formatCost } from "../hooks/useCostTracking.js";
+
+interface CostBadgeProps {
+  /** Actual cost incurred */
+  actual: number;
+  /** Estimated total cost */
+  estimated?: number;
+  /** Whether to show compact view */
+  compact?: boolean;
+}
+
+/**
+ * Get cost color based on amount
+ */
+function getCostColor(cost: number): string {
+  if (cost === 0) return colors.cost.free;
+  if (cost < 0.10) return colors.cost.cheap;
+  if (cost < 1.00) return colors.cost.medium;
+  return colors.cost.expensive;
+}
+
+export function CostBadge({
+  actual,
+  estimated,
+  compact = false,
+}: CostBadgeProps): React.ReactElement {
+  const actualFormatted = formatCost(actual);
+  const costColor = getCostColor(actual);
+
+  if (compact) {
+    return (
+      <Text color={costColor} bold>
+        {actualFormatted}
+      </Text>
+    );
+  }
+
+  return (
+    <Box>
+      <Text color={costColor} bold>
+        {actualFormatted}
+      </Text>
+      {estimated !== undefined && estimated > 0 && (
+        <Text color={colors.dim}>
+          {" "}(~{formatCost(estimated)} est)
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/MessageItem.tsx

@@ -0,0 +1,113 @@
+/**
+ * MessageItem Component
+ *
+ * Individual message with timestamp in mIRC style
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../theme.js";
+import type { MessageItem as MessageItemType } from "../types.js";
+
+interface MessageItemProps {
+  /** Message data */
+  message: MessageItemType;
+  /** Whether to show full timestamp or just time */
+  showFullTimestamp?: boolean;
+  /** Maximum content width for truncation */
+  maxWidth?: number;
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTimestamp(date: Date, full: boolean = false): string {
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+
+  if (full) {
+    const seconds = date.getSeconds().toString().padStart(2, "0");
+    return `${hours}:${minutes}:${seconds}`;
+  }
+
+  return `${hours}:${minutes}`;
+}
+
+/**
+ * Get color for message type
+ */
+function getMessageColor(type: MessageItemType["type"]): string {
+  switch (type) {
+    case "command":
+      return colors.message.command;
+    case "prompt":
+      return colors.message.prompt;
+    case "system":
+      return colors.message.system;
+    case "info":
+      return colors.message.info;
+    case "success":
+      return colors.message.success;
+    case "error":
+      return colors.message.error;
+    default:
+      return colors.dim;
+  }
+}
+
+/**
+ * Get prefix symbol for message type
+ */
+function getMessagePrefix(type: MessageItemType["type"]): string {
+  switch (type) {
+    case "command":
+      return ">";
+    case "prompt":
+      return "\u00BB";
+    case "system":
+      return "\u2022";
+    case "info":
+      return "i";
+    case "success":
+      return "\u2713";
+    case "error":
+      return "\u00D7";
+    default:
+      return " ";
+  }
+}
+
+export function MessageItemComponent({
+  message,
+  showFullTimestamp = false,
+  maxWidth = 40,
+}: MessageItemProps): React.ReactElement {
+  const timestamp = formatTimestamp(message.timestamp, showFullTimestamp);
+  const color = getMessageColor(message.type);
+  const prefix = getMessagePrefix(message.type);
+
+  // Truncate content if needed
+  const displayContent =
+    message.content.length > maxWidth
+      ? message.content.substring(0, maxWidth - 1) + "\u2026"
+      : message.content;
+
+  return (
+    <Box flexDirection="row">
+      {/* Timestamp */}
+      <Text color={colors.dim}>{timestamp} </Text>
+
+      {/* Type prefix */}
+      <Text color={color} bold>
+        {prefix}{" "}
+      </Text>
+
+      {/* Content */}
+      <Text color={color} wrap="truncate">
+        {displayContent}
+      </Text>
+    </Box>
+  );
+}
+
+export { MessageItemComponent as MessageItem };

package/src/tui/components/MessageQueuePanel.tsx

@@ -0,0 +1,126 @@
+/**
+ * MessageQueuePanel Component
+ *
+ * mIRC-style message queue panel for the right column
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { colors, borders, symbols } from "../theme.js";
+import { MessageItem } from "./MessageItem.js";
+import type { MessageItem as MessageItemType } from "../types.js";
+import type { QueueItem } from "../../queue/types.js";
+
+interface MessageQueuePanelProps {
+  /** Messages to display (mIRC-style) */
+  messages: MessageItemType[];
+  /** Queue items (pending commands) */
+  queueItems: QueueItem[];
+  /** Maximum messages to show */
+  maxMessages?: number;
+  /** Maximum queue items to show */
+  maxQueueItems?: number;
+  /** Panel title */
+  title?: string;
+}
+
+/**
+ * Format queue item for display
+ */
+function formatQueueItem(item: QueueItem, index: number): string {
+  return `${index + 1}. ${item.content}`;
+}
+
+export function MessageQueuePanel({
+  messages,
+  queueItems,
+  maxMessages = 10,
+  maxQueueItems = 3,
+  title = "Messages",
+}: MessageQueuePanelProps): React.ReactElement {
+  // Get visible messages (most recent)
+  const visibleMessages = messages.slice(-maxMessages);
+  const hasMoreMessages = messages.length > maxMessages;
+
+  // Get visible queue items
+  const visibleQueueItems = queueItems.slice(0, maxQueueItems);
+  const hasMoreQueueItems = queueItems.length > maxQueueItems;
+
+  return (
+    <Box flexDirection="column" paddingX={1} width="100%">
+      {/* Messages section */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Box>
+          <Text color={colors.accent} bold>
+            {title}
+          </Text>
+          {messages.length > 0 && (
+            <Text color={colors.dim}> ({messages.length})</Text>
+          )}
+        </Box>
+
+        {/* Scroll indicator */}
+        {hasMoreMessages && (
+          <Text color={colors.dim}>
+            {symbols.priority.high} {messages.length - maxMessages} more
+          </Text>
+        )}
+
+        {/* Messages list */}
+        <Box flexDirection="column">
+          {visibleMessages.length > 0 ? (
+            visibleMessages.map((msg) => (
+              <MessageItem key={msg.id} message={msg} maxWidth={25} />
+            ))
+          ) : (
+            <Text color={colors.dim} dimColor>
+              No messages yet
+            </Text>
+          )}
+        </Box>
+      </Box>
+
+      {/* Queue section */}
+      <Box flexDirection="column">
+        <Box>
+          <Text color={colors.dim} bold>
+            {borders.horizontal}
+            {borders.horizontal} Queue {borders.horizontal}
+          </Text>
+          {queueItems.length > 0 && (
+            <Text color={colors.warning}> ({queueItems.length})</Text>
+          )}
+        </Box>
+
+        {/* Queue items */}
+        <Box flexDirection="column">
+          {visibleQueueItems.length > 0 ? (
+            visibleQueueItems.map((item, i) => (
+              <Text key={item.addedAt} color={colors.dim} wrap="truncate">
+                {formatQueueItem(item, i)}
+              </Text>
+            ))
+          ) : (
+            <Text color={colors.dim} dimColor>
+              Empty
+            </Text>
+          )}
+
+          {/* More items indicator */}
+          {hasMoreQueueItems && (
+            <Text color={colors.dim}>
+              +{queueItems.length - maxQueueItems} more
+            </Text>
+          )}
+        </Box>
+
+        {/* Help text */}
+        <Box marginTop={1}>
+          <Text color={colors.dim} dimColor>
+            Items sent to agent each iteration
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/OutputPanel.tsx

@@ -0,0 +1,270 @@
+/**
+ * OutputPanel Component
+ *
+ * Enhanced central output panel with context header,
+ * code block detection, and fullscreen support
+ */
+
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { colors, borders } from "../theme.js";
+import type { Story, OutputMode } from "../types.js";
+import type { AgentName } from "../../agents/types.js";
+
+interface OutputPanelProps {
+  /** Output lines to display */
+  lines: string[];
+  /** Maximum lines to show */
+  maxLines?: number;
+  /** Current story being worked on */
+  currentStory?: Story | null;
+  /** Current agent name */
+  currentAgent?: string;
+  /** Current model being used */
+  currentModel?: string;
+  /** Routing information */
+  routing?: {
+    mode: "free" | "cheap" | "good" | "genius";
+    complexity: "simple" | "medium" | "complex" | "expert";
+    harness: AgentName;
+    model: string;
+  };
+  /** Display mode (normal or fullscreen) */
+  displayMode?: OutputMode;
+  /** Panel title */
+  title?: string;
+}
+
+interface ParsedLine {
+  text: string;
+  type: "normal" | "code" | "code-start" | "code-end" | "header" | "success" | "error" | "warning";
+  language?: string;
+}
+
+/**
+ * Parse output lines to detect code blocks and special formatting
+ */
+function parseLines(lines: string[]): ParsedLine[] {
+  const parsed: ParsedLine[] = [];
+  let inCodeBlock = false;
+
+  for (const line of lines) {
+    // Check for code block markers
+    if (line.startsWith("```")) {
+      if (inCodeBlock) {
+        parsed.push({ text: line, type: "code-end" });
+        inCodeBlock = false;
+      } else {
+        const language = line.substring(3).trim();
+        parsed.push({ text: line, type: "code-start", language });
+        inCodeBlock = true;
+      }
+      continue;
+    }
+
+    // Inside code block
+    if (inCodeBlock) {
+      parsed.push({ text: line, type: "code" });
+      continue;
+    }
+
+    // Check for special line types
+    if (line.startsWith("---") || line.startsWith("===")) {
+      parsed.push({ text: line, type: "header" });
+    } else if (
+      line.includes("success") ||
+      line.includes("complete") ||
+      line.includes("\u2713") ||
+      line.includes("\uD83C\uDF89")
+    ) {
+      parsed.push({ text: line, type: "success" });
+    } else if (
+      line.includes("error") ||
+      line.includes("Error") ||
+      line.includes("failed") ||
+      line.includes("\u274C")
+    ) {
+      parsed.push({ text: line, type: "error" });
+    } else if (
+      line.includes("warning") ||
+      line.includes("Warning") ||
+      line.includes("\u26A0")
+    ) {
+      parsed.push({ text: line, type: "warning" });
+    } else {
+      parsed.push({ text: line, type: "normal" });
+    }
+  }
+
+  return parsed;
+}
+
+/**
+ * Get color for a parsed line type
+ */
+function getLineColor(type: ParsedLine["type"]): string {
+  switch (type) {
+    case "code":
+    case "code-start":
+    case "code-end":
+      return colors.accent;
+    case "header":
+      return colors.primary;
+    case "success":
+      return colors.success;
+    case "error":
+      return colors.error;
+    case "warning":
+      return colors.warning;
+    default:
+      return colors.dim;
+  }
+}
+
+/**
+ * Format mode badge text
+ */
+function getModeBadge(mode: string): { text: string; color: string } {
+  switch (mode) {
+    case "free":
+      return { text: "FREE", color: colors.success };
+    case "cheap":
+      return { text: "CHEAP", color: colors.primary };
+    case "good":
+      return { text: "GOOD", color: colors.warning };
+    case "genius":
+      return { text: "GENIUS", color: colors.accent };
+    default:
+      return { text: mode.toUpperCase(), color: colors.dim };
+  }
+}
+
+/**
+ * Format complexity badge
+ */
+function getComplexityBadge(complexity: string): { text: string; color: string } {
+  switch (complexity) {
+    case "simple":
+      return { text: "S", color: colors.success };
+    case "medium":
+      return { text: "M", color: colors.warning };
+    case "complex":
+      return { text: "C", color: colors.error };
+    case "expert":
+      return { text: "E", color: colors.accent };
+    default:
+      return { text: complexity[0]?.toUpperCase() ?? "?", color: colors.dim };
+  }
+}
+
+export function OutputPanel({
+  lines,
+  maxLines = 12,
+  currentStory,
+  currentAgent,
+  currentModel,
+  routing,
+  displayMode = "normal",
+  title = "Output",
+}: OutputPanelProps): React.ReactElement {
+  // Parse lines for syntax highlighting
+  const parsedLines = useMemo(() => parseLines(lines), [lines]);
+
+  // Get visible lines based on max
+  const clampedMaxLines = Math.max(0, maxLines);
+  const displayLines =
+    clampedMaxLines > 0 ? parsedLines.slice(-clampedMaxLines) : [];
+
+  // Build context header
+  const hasContext = currentStory || currentAgent || routing;
+
+  return (
+    <Box flexDirection="column" paddingX={1} width="100%">
+      {/* Context header */}
+      {hasContext && (
+        <Box flexDirection="row" marginBottom={1}>
+          {/* Story ID */}
+          {currentStory && (
+            <>
+              <Text color={colors.warning} bold>
+                {currentStory.id}
+              </Text>
+              <Text color={colors.dim}> {borders.vertical} </Text>
+            </>
+          )}
+
+          {/* Agent/Model */}
+          {(currentAgent || currentModel) && (
+            <>
+              <Text color={colors.primary}>
+                {currentAgent ?? ""}
+                {currentModel ? `/${currentModel}` : ""}
+              </Text>
+            </>
+          )}
+
+          {/* Routing info */}
+          {routing && (
+            <>
+              <Text color={colors.dim}> {borders.vertical} </Text>
+              <Text color={getModeBadge(routing.mode).color}>
+                {getModeBadge(routing.mode).text}
+              </Text>
+              <Text color={colors.dim}>/</Text>
+              <Text color={getComplexityBadge(routing.complexity).color}>
+                {getComplexityBadge(routing.complexity).text}
+              </Text>
+            </>
+          )}
+
+          {/* Fullscreen indicator */}
+          {displayMode === "fullscreen" && (
+            <>
+              <Text color={colors.dim}> {borders.vertical} </Text>
+              <Text color={colors.accent}>[F] Fullscreen</Text>
+            </>
+          )}
+        </Box>
+      )}
+
+      {/* Title bar */}
+      <Box>
+        <Text color={colors.dim} bold>
+          {borders.horizontal}
+          {borders.horizontal} {title} {borders.horizontal}
+          {borders.horizontal}
+        </Text>
+      </Box>
+
+      {/* Output content */}
+      <Box flexDirection="column">
+        {displayLines.length > 0 ? (
+          displayLines.map((line, i) => (
+            <Text
+              key={i}
+              color={getLineColor(line.type)}
+              dimColor={line.type === "normal"}
+              wrap="truncate"
+            >
+              {line.text}
+            </Text>
+          ))
+        ) : (
+          <Text color={colors.dim} dimColor>
+            Waiting for agent output...
+          </Text>
+        )}
+      </Box>
+
+      {/* Auto-scroll indicator */}
+      {lines.length > clampedMaxLines && (
+        <Box marginTop={1}>
+          <Text color={colors.dim}>
+            {borders.vertical} {lines.length - clampedMaxLines} lines above{" "}
+            {borders.vertical}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}