@arvorco/relentless 0.6.1 → 0.8.0

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

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