pi-mission-control 0.0.0-dev

package/src/tui/past-runs.ts

@@ -0,0 +1,261 @@
+/**
+ * Mission Control TUI Past Runs List
+ * 
+ * Displays archived/completed runs in idle state:
+ * - Run ID with date
+ * - Status color
+ * - Completion percentage
+ * - Keyboard selection
+ */
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { Run, RunStatus } from "../state.js";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import { missionSuccess, missionWarning } from "./styles.js";
+
+const ICON_SELECTED = "> ";
+const ICON_UNSELECTED = "  ";
+
+export interface PastRunItem {
+  runId: string;
+  status: RunStatus;
+  startedAt: string;
+  completedTasks: number;
+  totalTasks: number;
+  durationSeconds?: number; // Total duration if run finished
+}
+
+export interface PastRunsProps {
+  runs: PastRunItem[];
+  selectedIndex: number;
+}
+
+/**
+ * Apply Mission Control status colors for past runs.
+ */
+function styleStatus(status: RunStatus, text: string, theme: Theme): string {
+  switch (status) {
+    case "done": return missionSuccess(text);
+    case "failed": return theme.fg("error", text);
+    case "in_progress": return missionWarning(text);
+    case "paused": return missionWarning(text);
+    default: return theme.fg("muted", text);
+  }
+}
+
+/**
+ * Format date as numeric Y-M-D 24h format
+ */
+function formatDate(isoDate: string): string {
+  try {
+    const date = new Date(isoDate);
+    const y = date.getFullYear();
+    const m = (date.getMonth() + 1).toString().padStart(2, "0");
+    const d = date.getDate().toString().padStart(2, "0");
+    const h = date.getHours().toString().padStart(2, "0");
+    const min = date.getMinutes().toString().padStart(2, "0");
+    return `${y}-${m}-${d} ${h}:${min}`;
+  } catch {
+    return isoDate;
+  }
+}
+
+/**
+ * Format duration in HH:MM:SS
+ */
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600).toString().padStart(2, "0");
+  const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, "0");
+  const s = (seconds % 60).toString().padStart(2, "0");
+  return `${h}:${m}:${s}`;
+}
+
+/**
+ * Extract runs from Run objects
+ */
+export function extractPastRuns(runs: Run[]): PastRunItem[] {
+  return runs.map(run => {
+    let completed = 0;
+    let total = 0;
+    
+    for (const phase of run.phases) {
+      for (const task of phase.tasks) {
+        if (task.status === "removed") continue;
+        total++;
+        if (task.status === "done") {
+          completed++;
+        }
+      }
+    }
+    
+    // Calculate duration if run has finished
+    let durationSeconds: number | undefined;
+    if (run.finish_at) {
+      const start = new Date(run.started_at).getTime();
+      const end = new Date(run.finish_at).getTime();
+      durationSeconds = Math.round((end - start) / 1000);
+    }
+    
+    return {
+      runId: run.run_id,
+      status: run.status,
+      startedAt: run.started_at,
+      completedTasks: completed,
+      totalTasks: total,
+      durationSeconds
+    };
+  }).sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime());
+}
+
+/**
+ * Render a single past run line
+ * Format: "> run-id (YYYY-MM-DD HH:MM) [duration] 45% (5/11)"
+ */
+function renderPastRunLine(
+  run: PastRunItem,
+  index: number,
+  selectedIndex: number,
+  width: number,
+  theme: Theme
+): string {
+  const isSelected = index === selectedIndex;
+  
+  const date = formatDate(run.startedAt);
+  const percent = run.totalTasks > 0 
+    ? Math.round((run.completedTasks / run.totalTasks) * 100)
+    : 0;
+  
+  // Include duration if available
+  const durationStr = run.durationSeconds ? ` [${formatDuration(run.durationSeconds)}]` : "";
+  
+  const selectIndicator = isSelected ? ICON_SELECTED : ICON_UNSELECTED;
+  const baseText = `${selectIndicator}${run.runId} (${date})${durationStr} ${percent}% (${run.completedTasks}/${run.totalTasks})`;
+  
+  // Apply styling
+  let styled: string;
+  if (isSelected) {
+    styled = theme.fg("text", theme.bold(baseText));
+  } else {
+    styled = styleStatus(run.status, baseText, theme);
+  }
+  
+  return truncateToWidth(styled, width);
+}
+
+/**
+ * Render the past runs list
+ */
+export function renderPastRuns(
+  width: number,
+  height: number,
+  props: PastRunsProps,
+  theme: Theme
+): string[] {
+  const { runs, selectedIndex } = props;
+  const lines: string[] = [];
+  
+  // Header
+  const header = theme.fg("text", theme.bold("PAST RUNS"));
+  lines.push(truncateToWidth(header, width));
+  lines.push(""); // spacer
+  
+  if (runs.length === 0) {
+    const emptyMsg = theme.fg("muted", "  No past runs");
+    lines.push(truncateToWidth(emptyMsg, width));
+  } else {
+    // Calculate visible range
+    const availableHeight = height - 2;
+    let startIdx = 0;
+    let endIdx = runs.length;
+    
+    if (runs.length > availableHeight) {
+      const halfHeight = Math.floor(availableHeight / 2);
+      startIdx = Math.max(0, selectedIndex - halfHeight);
+      endIdx = Math.min(runs.length, startIdx + availableHeight);
+      
+      if (endIdx - startIdx < availableHeight) {
+        startIdx = Math.max(0, endIdx - availableHeight);
+      }
+    }
+    
+    // Render visible runs
+    for (let i = startIdx; i < endIdx; i++) {
+      const run = runs[i];
+      const line = renderPastRunLine(run, i, selectedIndex, width, theme);
+      lines.push(line);
+    }
+  }
+  
+  // Pad to height
+  while (lines.length < height) {
+    lines.push("");
+  }
+  
+  return lines.slice(0, height);
+}
+
+/**
+ * Past runs component class
+ */
+export class PastRunsComponent {
+  private props: PastRunsProps;
+  private cachedWidth?: number;
+  private cachedHeight?: number;
+  private cachedLines?: string[];
+  
+  constructor(runs: PastRunItem[] = []) {
+    this.props = {
+      runs,
+      selectedIndex: 0
+    };
+  }
+  
+  updateRuns(runs: PastRunItem[], selectedIndex?: number): void {
+    this.props.runs = runs;
+    if (selectedIndex !== undefined) {
+      this.props.selectedIndex = Math.max(0, Math.min(selectedIndex, runs.length - 1));
+    } else if (this.props.selectedIndex >= runs.length && runs.length > 0) {
+      this.props.selectedIndex = runs.length - 1;
+    }
+    this.invalidate();
+  }
+  
+  getSelectedIndex(): number {
+    return this.props.selectedIndex;
+  }
+  
+  getSelectedRun(): PastRunItem | undefined {
+    return this.props.runs[this.props.selectedIndex];
+  }
+  
+  navigateUp(): void {
+    if (this.props.selectedIndex > 0) {
+      this.props.selectedIndex--;
+      this.invalidate();
+    }
+  }
+  
+  navigateDown(): void {
+    if (this.props.selectedIndex < this.props.runs.length - 1) {
+      this.props.selectedIndex++;
+      this.invalidate();
+    }
+  }
+  
+  render(width: number, height: number, theme: Theme): string[] {
+    if (this.cachedLines && this.cachedWidth === width && this.cachedHeight === height) {
+      return this.cachedLines;
+    }
+    
+    this.cachedLines = renderPastRuns(width, height, this.props, theme);
+    this.cachedWidth = width;
+    this.cachedHeight = height;
+    return this.cachedLines;
+  }
+  
+  invalidate(): void {
+    this.cachedWidth = undefined;
+    this.cachedHeight = undefined;
+    this.cachedLines = undefined;
+  }
+}

package/src/tui/phases-panel.ts

@@ -0,0 +1,199 @@
+/**
+ * Mission Control TUI Phases Panel
+ * 
+ * Left panel displaying:
+ * - List of phases with status icons
+ * - Navigation indicator (arrow) for selected phase
+ * - Keyboard navigation support
+ * 
+ * Icons (Nerd Font):
+ * - Done: \uf058 (󰗠) check
+ * - In Progress: \uf192 () dot-circle
+ * - Pending: \uf096 (󰄱) empty box
+ * - Selected: \uf054 (󰁔) arrow
+ */
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { Phase } from "../state.js";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import { missionSuccess, missionWarning, strike } from "./styles.js";
+
+export interface PhasesPanelProps {
+  phases: Phase[];
+  selectedIndex: number;
+  focused: boolean;
+}
+
+/**
+ * Render a single phase line
+ * Styling: selected=white bold, running=orange/warning, unselected non-running=gray/muted
+ */
+function renderPhaseLine(
+  phase: Phase,
+  index: number,
+  selectedIndex: number,
+  width: number,
+  theme: Theme,
+  focused: boolean
+): string {
+  const isSelected = index === selectedIndex;
+  const isRunning = phase.status === "in_progress";
+  const baseText = `Phase ${index + 1}: ${phase.name}`;
+  
+  let styled: string;
+  if (phase.status === "removed") {
+    const removedText = strike(baseText);
+    styled = isSelected && focused
+      ? theme.fg("text", theme.bold(removedText))
+      : theme.fg("muted", removedText);
+  } else if (isSelected && focused) {
+    styled = theme.fg("text", theme.bold(baseText));
+  } else if (isRunning) {
+    styled = missionWarning(baseText);
+  } else if (phase.status === "done") {
+    styled = missionSuccess(baseText);
+  } else {
+    styled = theme.fg("muted", baseText);
+  }
+  
+  // Truncate to fit
+  return truncateToWidth(styled, width);
+}
+
+/**
+ * Render the phases panel
+ */
+export function renderPhasesPanel(
+  width: number,
+  height: number,
+  props: PhasesPanelProps,
+  theme: Theme
+): string[] {
+  const { phases, selectedIndex, focused } = props;
+  const lines: string[] = [];
+  
+  // Header
+  const header = theme.fg("text", theme.bold("PHASES"));
+  lines.push(truncateToWidth(header, width));
+  
+  if (phases.length === 0) {
+    const emptyMsg = theme.fg("muted", "  No phases yet");
+    lines.push(truncateToWidth(emptyMsg, width));
+  } else {
+    // Calculate visible range if list is taller than available height
+    const availableHeight = height - 1;
+    let startIdx = 0;
+    let endIdx = phases.length;
+    
+    if (phases.length > availableHeight) {
+      // Scroll to keep selected item visible
+      const halfHeight = Math.floor(availableHeight / 2);
+      startIdx = Math.max(0, selectedIndex - halfHeight);
+      endIdx = Math.min(phases.length, startIdx + availableHeight);
+      
+      // Adjust start if we're near the end
+      if (endIdx - startIdx < availableHeight) {
+        startIdx = Math.max(0, endIdx - availableHeight);
+      }
+    }
+    
+    // Render visible phases
+    for (let i = startIdx; i < endIdx; i++) {
+      const phase = phases[i];
+      const line = renderPhaseLine(phase, i, selectedIndex, width, theme, focused);
+      lines.push(line);
+    }
+  }
+  
+  // Pad to height
+  while (lines.length < height) {
+    lines.push("");
+  }
+  
+  return lines.slice(0, height);
+}
+
+/**
+ * Phases panel component class
+ */
+export class PhasesPanelComponent {
+  private props: PhasesPanelProps;
+  private cachedWidth?: number;
+  private cachedHeight?: number;
+  private cachedLines?: string[];
+  
+  constructor(phases: Phase[] = [], focused = false) {
+    this.props = {
+      phases,
+      selectedIndex: 0,
+      focused
+    };
+  }
+  
+  update(phases: Phase[], selectedIndex?: number): void {
+    this.props.phases = phases;
+    if (selectedIndex !== undefined) {
+      // Clamp to valid range
+      this.props.selectedIndex = Math.max(0, Math.min(selectedIndex, phases.length - 1));
+    } else if (this.props.selectedIndex >= phases.length && phases.length > 0) {
+      this.props.selectedIndex = phases.length - 1;
+    }
+    this.invalidate();
+  }
+  
+  setFocused(focused: boolean): void {
+    this.props.focused = focused;
+    this.invalidate();
+  }
+  
+  isFocused(): boolean {
+    return this.props.focused;
+  }
+  
+  getSelectedIndex(): number {
+    return this.props.selectedIndex;
+  }
+  
+  getSelectedPhase(): Phase | undefined {
+    return this.props.phases[this.props.selectedIndex];
+  }
+  
+  navigateUp(): void {
+    if (this.props.selectedIndex > 0) {
+      this.props.selectedIndex--;
+      this.invalidate();
+    }
+  }
+  
+  navigateDown(): void {
+    if (this.props.selectedIndex < this.props.phases.length - 1) {
+      this.props.selectedIndex++;
+      this.invalidate();
+    }
+  }
+  
+  selectFirstInProgress(): void {
+    const idx = this.props.phases.findIndex(p => p.status === "in_progress");
+    if (idx !== -1) {
+      this.props.selectedIndex = idx;
+      this.invalidate();
+    }
+  }
+  
+  render(width: number, height: number, theme: Theme): string[] {
+    if (this.cachedLines && this.cachedWidth === width && this.cachedHeight === height) {
+      return this.cachedLines;
+    }
+    
+    this.cachedLines = renderPhasesPanel(width, height, this.props, theme);
+    this.cachedWidth = width;
+    this.cachedHeight = height;
+    return this.cachedLines;
+  }
+  
+  invalidate(): void {
+    this.cachedWidth = undefined;
+    this.cachedHeight = undefined;
+    this.cachedLines = undefined;
+  }
+}

package/src/tui/progress-bar.ts

@@ -0,0 +1,152 @@
+/**
+ * Mission Control TUI Progress Bar
+ * 
+ * Bottom bar displaying:
+ * - Visual progress bar using block characters
+ * - Percentage completion
+ * - Task count (completed/total)
+ * 
+ * Block characters for progress bar:
+ * - Full: \u2588 (█)
+ * - Empty: \u2591 (░)
+ */
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { Run } from "../state.js";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+
+// Block characters for progress bar
+const BLOCK_FULL = "\u2588";  // █
+const BLOCK_EMPTY = "\u2591"; // ░
+
+export interface ProgressBarProps {
+  run: Run | null;
+  statusMessage: string;
+}
+
+/**
+ * Count completed and total tasks across all phases
+ */
+function countTasks(run: Run): { completed: number; total: number; phaseCompleted: number; phaseTotal: number } {
+  let completed = 0;
+  let total = 0;
+  let phaseCompleted = 0;
+  let phaseTotal = run.phases.length;
+  
+  for (const phase of run.phases) {
+    if (phase.status === "done") {
+      phaseCompleted++;
+    }
+    for (const task of phase.tasks) {
+      if (task.status === "removed") continue;
+      total++;
+      if (task.status === "done") {
+        completed++;
+      }
+    }
+  }
+  
+  return { completed, total, phaseCompleted, phaseTotal };
+}
+
+/**
+ * Render a progress bar string
+ */
+function renderProgressBar(percent: number, width: number): string {
+  if (width < 3) return "";
+  
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+  
+  return BLOCK_FULL.repeat(filled) + BLOCK_EMPTY.repeat(empty);
+}
+
+/**
+ * Render the progress bar component
+ */
+export function renderProgressBarComponent(
+  width: number,
+  props: ProgressBarProps,
+  theme: Theme
+): string[] {
+  const { run } = props;
+  const lines: string[] = [];
+
+  if (!run || run.phases.length === 0) {
+    const suffix = "[0/0 Tasks]";
+    const progressBar = renderProgressBar(0, Math.max(0, width - suffix.length - 4));
+    lines.push(truncateToWidth(theme.fg("muted", `[${progressBar}] ${suffix}`), width));
+    return lines;
+  }
+  
+  // Count tasks
+  const { completed, total } = countTasks(run);
+  const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+  const suffix = `[${completed}/${total} Tasks]`;
+  const barWidth = Math.max(0, width - suffix.length - 4);
+  const progressBar = renderProgressBar(percent, barWidth);
+  lines.push(truncateToWidth(theme.fg("accent", `[${progressBar}] ${suffix}`), width));
+  
+  return lines;
+}
+
+/**
+ * Progress bar component class
+ */
+export class ProgressBarComponent {
+  private props: ProgressBarProps;
+  private cachedWidth?: number;
+  private cachedLines?: string[];
+  
+  constructor(run: Run | null = null, statusMessage = "") {
+    this.props = { run, statusMessage };
+  }
+  
+  update(run: Run | null, statusMessage?: string): void {
+    this.props.run = run;
+    if (statusMessage !== undefined) {
+      this.props.statusMessage = statusMessage;
+    }
+    this.invalidate();
+  }
+  
+  updateStatus(message: string): void {
+    this.props.statusMessage = message;
+    this.invalidate();
+  }
+  
+  getCompletionPercent(): number {
+    const { run } = this.props;
+    if (!run) return 0;
+    
+    let completed = 0;
+    let total = 0;
+    
+    for (const phase of run.phases) {
+      for (const task of phase.tasks) {
+        if (task.status === "removed") continue;
+        total++;
+        if (task.status === "done") {
+          completed++;
+        }
+      }
+    }
+    
+    return total > 0 ? Math.round((completed / total) * 100) : 0;
+  }
+  
+  render(width: number, theme: Theme): string[] {
+    if (this.cachedLines && this.cachedWidth === width) {
+      return this.cachedLines;
+    }
+    
+    this.cachedLines = renderProgressBarComponent(width, this.props, theme);
+    this.cachedWidth = width;
+    return this.cachedLines;
+  }
+  
+  invalidate(): void {
+    this.cachedWidth = undefined;
+    this.cachedLines = undefined;
+  }
+}

package/src/tui/styles.ts

@@ -0,0 +1,27 @@
+/**
+ * Mission Control TUI custom styles.
+ * Uses stronger dark orange / dark green tones than the default theme tokens.
+ */
+
+const ANSI_FG_RESET = "\x1b[39m";
+const ANSI_STRIKE_ON = "\x1b[9m";
+const ANSI_STRIKE_OFF = "\x1b[29m";
+
+const DARK_GREEN = { r: 46, g: 125, b: 50 };   // #2E7D32
+const DARK_ORANGE = { r: 198, g: 94, b: 0 };   // #C65E00
+
+function rgb(text: string, color: { r: number; g: number; b: number }): string {
+  return `\x1b[38;2;${color.r};${color.g};${color.b}m${text}${ANSI_FG_RESET}`;
+}
+
+export function missionSuccess(text: string): string {
+  return rgb(text, DARK_GREEN);
+}
+
+export function missionWarning(text: string): string {
+  return rgb(text, DARK_ORANGE);
+}
+
+export function strike(text: string): string {
+  return `${ANSI_STRIKE_ON}${text}${ANSI_STRIKE_OFF}`;
+}