@arvorco/relentless 0.6.1 → 0.7.0

package/src/tui/layouts/LayoutSwitcher.tsx

@@ -0,0 +1,95 @@
+/**
+ * LayoutSwitcher Component
+ *
+ * Automatically switches between 3-column and vertical layouts
+ * based on terminal size
+ */
+
+import React from "react";
+import { useResponsiveLayout } from "../hooks/useResponsiveLayout.js";
+import { ThreeColumnLayout } from "./ThreeColumnLayout.js";
+import { VerticalLayout } from "./VerticalLayout.js";
+import type { LayoutMode } from "../types.js";
+
+interface LayoutSwitcherProps {
+  /** Content for left panel (Tasks) in 3-column mode */
+  taskPanel: React.ReactNode;
+  /** Content for center panel (Output) in 3-column mode */
+  outputPanel: React.ReactNode;
+  /** Content for right panel (Queue) in 3-column mode */
+  queuePanel: React.ReactNode;
+  /** Status bar content */
+  statusBar: React.ReactNode;
+
+  // Vertical layout specific props
+  /** Header content for vertical layout */
+  header?: React.ReactNode;
+  /** Current story info for vertical layout */
+  currentStory?: React.ReactNode;
+  /** Story grid for vertical layout */
+  storyGrid?: React.ReactNode;
+  /** Agent status for vertical layout */
+  agentStatus?: React.ReactNode;
+  /** Additional controls for vertical layout */
+  controls?: React.ReactNode;
+
+  /** Force a specific layout mode (overrides responsive detection) */
+  forceMode?: LayoutMode;
+  /** Callback when layout mode changes */
+  onLayoutChange?: (mode: LayoutMode) => void;
+}
+
+export function LayoutSwitcher({
+  taskPanel,
+  outputPanel,
+  queuePanel,
+  statusBar,
+  header,
+  currentStory,
+  storyGrid,
+  agentStatus,
+  controls,
+  forceMode,
+  onLayoutChange,
+}: LayoutSwitcherProps): React.ReactElement {
+  const layout = useResponsiveLayout();
+  const mode = forceMode ?? layout.mode;
+
+  // Notify parent of layout changes
+  React.useEffect(() => {
+    onLayoutChange?.(mode);
+  }, [mode, onLayoutChange]);
+
+  // Use 3-column layout for larger terminals
+  if (mode === "three-column" || mode === "compressed") {
+    return (
+      <ThreeColumnLayout
+        leftPanel={taskPanel}
+        centerPanel={outputPanel}
+        rightPanel={queuePanel}
+        statusBar={statusBar}
+        mode={mode}
+        height={layout.height}
+      />
+    );
+  }
+
+  // Fall back to vertical layout for narrow terminals
+  return (
+    <VerticalLayout
+      header={header ?? null}
+      currentStory={currentStory ?? null}
+      outputPanel={outputPanel}
+      queuePanel={queuePanel}
+      storyGrid={storyGrid ?? null}
+      agentStatus={agentStatus ?? null}
+      statusBar={statusBar}
+      controls={controls ?? null}
+      height={layout.height}
+    />
+  );
+}
+
+export { useResponsiveLayout } from "../hooks/useResponsiveLayout.js";
+export { ThreeColumnLayout } from "./ThreeColumnLayout.js";
+export { VerticalLayout } from "./VerticalLayout.js";

package/src/tui/layouts/ThreeColumnLayout.tsx

@@ -0,0 +1,97 @@
+/**
+ * ThreeColumnLayout Component
+ *
+ * mIRC-inspired 3-column layout with Tasks | Output | Queue
+ */
+
+import React from "react";
+import { Box } from "ink";
+import type { LayoutMode } from "../types.js";
+
+interface ThreeColumnLayoutProps {
+  /** Left panel content (Tasks) */
+  leftPanel: React.ReactNode;
+  /** Center panel content (Output) */
+  centerPanel: React.ReactNode;
+  /** Right panel content (Queue) */
+  rightPanel: React.ReactNode;
+  /** Bottom content (Status bar) */
+  statusBar: React.ReactNode;
+  /** Layout mode determines column widths */
+  mode: LayoutMode;
+  /** Terminal height for calculating panel heights */
+  height: number;
+}
+
+/**
+ * Get width percentages based on layout mode
+ */
+function getWidths(mode: LayoutMode): { left: string; center: string; right: string } {
+  switch (mode) {
+    case "three-column":
+      return { left: "25%", center: "50%", right: "25%" };
+    case "compressed":
+      return { left: "20%", center: "60%", right: "20%" };
+    default:
+      return { left: "100%", center: "100%", right: "100%" };
+  }
+}
+
+export function ThreeColumnLayout({
+  leftPanel,
+  centerPanel,
+  rightPanel,
+  statusBar,
+  mode,
+  height,
+}: ThreeColumnLayoutProps): React.ReactElement {
+  const widths = getWidths(mode);
+
+  // Calculate available height for panels (reserve 1 line for status bar)
+  const panelHeight = Math.max(10, height - 2);
+
+  return (
+    <Box flexDirection="column" width="100%" height={height}>
+      {/* Main content area - 3 columns */}
+      <Box flexDirection="row" width="100%" height={panelHeight}>
+        {/* Left panel - Tasks */}
+        <Box
+          width={widths.left}
+          height="100%"
+          flexDirection="column"
+          borderStyle="single"
+          borderColor="cyan"
+        >
+          {leftPanel}
+        </Box>
+
+        {/* Center panel - Output */}
+        <Box
+          width={widths.center}
+          height="100%"
+          flexDirection="column"
+          borderStyle="single"
+          borderColor="white"
+        >
+          {centerPanel}
+        </Box>
+
+        {/* Right panel - Queue */}
+        <Box
+          width={widths.right}
+          height="100%"
+          flexDirection="column"
+          borderStyle="single"
+          borderColor="magenta"
+        >
+          {rightPanel}
+        </Box>
+      </Box>
+
+      {/* Status bar */}
+      <Box width="100%" height={1}>
+        {statusBar}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/layouts/VerticalLayout.tsx

@@ -0,0 +1,69 @@
+/**
+ * VerticalLayout Component
+ *
+ * Fallback vertical layout for narrow terminals (<100 cols)
+ * Stacks panels vertically similar to current behavior
+ */
+
+import React from "react";
+import { Box } from "ink";
+
+interface VerticalLayoutProps {
+  /** Header content */
+  header: React.ReactNode;
+  /** Current story info */
+  currentStory: React.ReactNode;
+  /** Output panel content */
+  outputPanel: React.ReactNode;
+  /** Queue panel content */
+  queuePanel: React.ReactNode;
+  /** Story grid content */
+  storyGrid: React.ReactNode;
+  /** Agent status footer */
+  agentStatus: React.ReactNode;
+  /** Status bar */
+  statusBar: React.ReactNode;
+  /** Additional controls (queue input, etc.) */
+  controls: React.ReactNode;
+  /** Terminal height */
+  height: number;
+}
+
+export function VerticalLayout({
+  header,
+  currentStory,
+  outputPanel,
+  queuePanel,
+  storyGrid,
+  agentStatus,
+  statusBar,
+  controls,
+}: VerticalLayoutProps): React.ReactElement {
+  return (
+    <Box flexDirection="column" width="100%">
+      {/* Header */}
+      {header}
+
+      {/* Current story info */}
+      {currentStory}
+
+      {/* Agent output */}
+      {outputPanel}
+
+      {/* Queue panel */}
+      {queuePanel}
+
+      {/* Story grid */}
+      {storyGrid}
+
+      {/* Agent status */}
+      {agentStatus}
+
+      {/* Status bar */}
+      {statusBar}
+
+      {/* Controls (queue input, etc.) */}
+      {controls}
+    </Box>
+  );
+}

package/src/tui/layouts/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Layouts Module
+ *
+ * Exports all layout components and hooks
+ */
+
+export { LayoutSwitcher } from "./LayoutSwitcher.js";
+export { ThreeColumnLayout } from "./ThreeColumnLayout.js";
+export { VerticalLayout } from "./VerticalLayout.js";

package/src/tui/theme.ts

@@ -11,31 +11,162 @@ export const colors = {
   error: "red",
   dim: "gray",
   accent: "magenta",
+  /** Panel-specific colors */
+  panel: {
+    taskBorder: "cyan",
+    outputBorder: "white",
+    queueBorder: "magenta",
+    statusBorder: "gray",
+    headerBg: "gray",
+  },
+  /** Message type colors */
+  message: {
+    command: "magenta",
+    prompt: "white",
+    system: "gray",
+    info: "cyan",
+    success: "green",
+    error: "red",
+    warning: "yellow",
+  },
+  /** Status colors */
+  status: {
+    active: "green",
+    pending: "gray",
+    blocked: "red",
+    complete: "green",
+    inProgress: "yellow",
+    rateLimited: "red",
+  },
+  /** Cost display colors */
+  cost: {
+    free: "green",
+    cheap: "cyan",
+    medium: "yellow",
+    expensive: "red",
+  },
 } as const;
 
 export const symbols = {
-  complete: "✓",
-  pending: "○",
-  inProgress: "◉",
-  arrow: "→",
-  bullet: "•",
-  lightning: "⚡",
-  rocket: "🚀",
-  party: "🎉",
-  warning: "⚠️",
-  error: "❌",
-  clock: "⏳",
+  complete: "\u2713",
+  pending: "\u25CB",
+  inProgress: "\u25C9",
+  blocked: "\uD83D\uDD12",
+  arrow: "\u2192",
+  bullet: "\u2022",
+  lightning: "\u26A1",
+  rocket: "\uD83D\uDE80",
+  party: "\uD83C\uDF89",
+  warning: "\u26A0\uFE0F",
+  error: "\u274C",
+  clock: "\u23F3",
+  /** Panel indicators */
+  panel: {
+    expand: "+",
+    collapse: "-",
+    fullscreen: "\u25A3",
+    minimize: "\u25A2",
+  },
+  /** Pulse animation frames */
+  pulse: [">", ">>", ">>>", ">>"],
+  /** Priority badges */
+  priority: {
+    critical: "!",
+    high: "\u2191",
+    medium: "\u2022",
+    low: "\u2193",
+  },
+  /** Research indicator */
+  research: "\uD83D\uDD0D",
 } as const;
 
 export const borders = {
-  horizontal: "─",
-  vertical: "│",
-  topLeft: "┌",
-  topRight: "┐",
-  bottomLeft: "└",
-  bottomRight: "┘",
-  teeLeft: "├",
-  teeRight: "┤",
-  cross: "┼",
-  doubleLine: "═",
+  horizontal: "\u2500",
+  vertical: "\u2502",
+  topLeft: "\u250C",
+  topRight: "\u2510",
+  bottomLeft: "\u2514",
+  bottomRight: "\u2518",
+  teeLeft: "\u251C",
+  teeRight: "\u2524",
+  cross: "\u253C",
+  doubleLine: "\u2550",
+  /** Rounded corners for panels */
+  rounded: {
+    topLeft: "\u256D",
+    topRight: "\u256E",
+    bottomLeft: "\u2570",
+    bottomRight: "\u256F",
+  },
+  /** Double-line borders for emphasis */
+  double: {
+    horizontal: "\u2550",
+    vertical: "\u2551",
+    topLeft: "\u2554",
+    topRight: "\u2557",
+    bottomLeft: "\u255A",
+    bottomRight: "\u255D",
+  },
+} as const;
+
+/** Animation timing constants */
+export const animation = {
+  /** Pulse animation interval (ms) */
+  pulseInterval: 300,
+  /** Typing effect speed (ms per character) */
+  typingSpeed: 30,
+  /** Cursor blink interval (ms) */
+  blinkInterval: 500,
+  /** Number transition duration (ms) */
+  numberTransition: 500,
+  /** Countdown update interval (ms) */
+  countdownInterval: 1000,
+  /** Status message display duration (ms) */
+  statusMessageDuration: 2000,
+} as const;
+
+/** Panel layout constants */
+export const layout = {
+  /** Minimum panel widths */
+  minWidth: {
+    task: 20,
+    output: 40,
+    queue: 20,
+  },
+  /** Default panel heights (in lines) */
+  defaultHeight: {
+    header: 2,
+    statusBar: 1,
+    output: 12,
+    queue: 8,
+  },
+  /** Padding values */
+  padding: {
+    panel: 1,
+    content: 1,
+    section: 1,
+  },
+} as const;
+
+/** Badge styles for different states/modes */
+export const badges = {
+  mode: {
+    free: { text: "FREE", color: "green" },
+    cheap: { text: "CHEAP", color: "cyan" },
+    good: { text: "GOOD", color: "yellow" },
+    genius: { text: "GENIUS", color: "magenta" },
+  },
+  complexity: {
+    simple: { text: "S", color: "green" },
+    medium: { text: "M", color: "yellow" },
+    complex: { text: "C", color: "red" },
+    expert: { text: "E", color: "magenta" },
+  },
+  priority: {
+    1: { text: "P1", color: "red" },
+    2: { text: "P2", color: "red" },
+    3: { text: "P3", color: "yellow" },
+    4: { text: "P4", color: "yellow" },
+    5: { text: "P5", color: "gray" },
+  },
 } as const;

package/src/tui/types.ts

@@ -15,6 +15,10 @@ export interface Story {
   criteriaCount: number;
   research?: boolean;
   phase?: string;
+  /** Dependencies that must complete first */
+  dependencies?: string[];
+  /** Whether blocked by unfinished dependencies */
+  blocked?: boolean;
 }
 
 export interface AgentState {
@@ -25,6 +29,46 @@ export interface AgentState {
   resetTime?: Date;
 }
 
+/** Token usage tracking */
+export interface TokenUsage {
+  /** Input tokens used */
+  inputTokens: number;
+  /** Output tokens used */
+  outputTokens: number;
+  /** Total tokens used */
+  totalTokens: number;
+}
+
+/** Cost tracking data */
+export interface CostData {
+  /** Actual cost incurred so far (in dollars) */
+  actual: number;
+  /** Estimated total cost (in dollars) */
+  estimated: number;
+  /** Token usage breakdown */
+  tokens: TokenUsage;
+  /** Cost per story */
+  perStory: number;
+}
+
+/** Message in the queue panel */
+export interface MessageItem {
+  /** Unique identifier */
+  id: string;
+  /** Timestamp when added */
+  timestamp: Date;
+  /** Message content */
+  content: string;
+  /** Message type for color coding */
+  type: "command" | "prompt" | "system" | "info" | "error" | "success";
+}
+
+/** Layout mode for responsive design */
+export type LayoutMode = "three-column" | "compressed" | "vertical";
+
+/** Output panel display mode */
+export type OutputMode = "normal" | "fullscreen";
+
 export interface TUIState {
   /** Feature name */
   feature: string;
@@ -75,6 +119,23 @@ export interface TUIState {
   confirmClearActive: boolean;
   /** Status message to display (e.g., "Queue already empty") */
   statusMessage?: string;
+
+  // Enhanced state for new TUI
+
+  /** Cost and token tracking data */
+  costData?: CostData;
+  /** Messages in the queue panel (mIRC-style) */
+  messages: MessageItem[];
+  /** Current layout mode */
+  layoutMode: LayoutMode;
+  /** Output panel display mode */
+  outputMode: OutputMode;
+  /** Total elapsed time since start (seconds) */
+  totalElapsedSeconds: number;
+  /** Start time of current session */
+  startTime?: Date;
+  /** Savings compared to SOTA (percentage) */
+  savingsPercent?: number;
 }
 
 export interface TUIActions {
@@ -100,4 +161,38 @@ export interface TUIActions {
   setComplete: (complete: boolean) => void;
   /** Set error */
   setError: (error: string | undefined) => void;
+  /** Add a message to the queue panel */
+  addMessage: (message: Omit<MessageItem, "id" | "timestamp">) => void;
+  /** Update cost tracking data */
+  updateCostData: (data: Partial<CostData>) => void;
+  /** Toggle output fullscreen mode */
+  toggleOutputMode: () => void;
+  /** Set layout mode */
+  setLayoutMode: (mode: LayoutMode) => void;
+}
+
+/** Props for panel components */
+export interface PanelProps {
+  /** Panel title */
+  title?: string;
+  /** Panel width (percentage or absolute) */
+  width?: string | number;
+  /** Panel height (lines) */
+  height?: number;
+  /** Border color */
+  borderColor?: string;
+  /** Whether panel is active/focused */
+  active?: boolean;
+}
+
+/** Props for status bar sections */
+export interface StatusSectionProps {
+  /** Section label */
+  label?: string;
+  /** Section value */
+  value: string;
+  /** Value color */
+  color?: string;
+  /** Whether to show separator after */
+  separator?: boolean;
 }