pi-mission-control 0.0.0-dev

package/src/tui/tasks-panel.ts

@@ -0,0 +1,228 @@
+/**
+ * Mission Control TUI Tasks Panel
+ * 
+ * Right panel displaying:
+ * - Tasks for the selected phase
+ * - Status icons including spinner for in-progress
+ * - Navigation indicator
+ * 
+ * Icons (Nerd Font):
+ * - Done: \uf058 (󰗠) check
+ * - In Progress: \uf1ce (󰑐) spinner/sync
+ * - Pending: \uf096 (󰄱) empty box
+ * - Failed: \uf057 (󰅙) times
+ */
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { Task, Phase } from "../state.js";
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import { missionSuccess, missionWarning, strike } from "./styles.js";
+
+export interface TasksPanelProps {
+  phase: Phase | null;
+  tasks: Task[];
+  selectedIndex: number;
+  focused: boolean;
+}
+
+/**
+ * Render a single task line
+ * Styling: selected=white bold, running=orange/warning, unselected non-running=gray/muted
+ */
+function renderTaskLine(
+  task: Task,
+  index: number,
+  selectedIndex: number,
+  width: number,
+  theme: Theme,
+  focused: boolean
+): string {
+  const isSelected = focused && index === selectedIndex;
+  const isRunning = task.status === "in_progress";
+  const baseText = `Task ${index + 1}: ${task.name}`;
+  
+  // Apply styling based on selection and running state
+  let styled: string;
+  if (task.status === "removed") {
+    const removedText = strike(baseText);
+    styled = isSelected
+      ? theme.fg("text", theme.bold(removedText))
+      : theme.fg("muted", removedText);
+  } else if (isSelected) {
+    styled = theme.fg("text", theme.bold(baseText));
+  } else if (isRunning) {
+    styled = missionWarning(baseText);
+  } else if (task.status === "done") {
+    styled = missionSuccess(baseText);
+  } else if (task.status === "failed") {
+    styled = theme.fg("error", baseText);
+  } else {
+    styled = theme.fg("muted", baseText);
+  }
+  
+  return truncateToWidth(styled, width);
+}
+
+/**
+ * Render the tasks panel
+ */
+export function renderTasksPanel(
+  width: number,
+  height: number,
+  props: TasksPanelProps,
+  theme: Theme
+): string[] {
+  const { phase, tasks, selectedIndex, focused } = props;
+  const lines: string[] = [];
+  
+  const header = theme.fg("text", theme.bold("TASKS"));
+  lines.push(truncateToWidth(header, width));
+  
+  if (tasks.length === 0) {
+    const emptyMsg = phase 
+      ? theme.fg("muted", "  No tasks in this phase")
+      : theme.fg("muted", "  Select a phase to view tasks");
+    lines.push(truncateToWidth(emptyMsg, width));
+  } else {
+    // Calculate visible range
+    const availableHeight = height - 1;
+    let startIdx = 0;
+    let endIdx = tasks.length;
+    
+    if (tasks.length > availableHeight) {
+      const halfHeight = Math.floor(availableHeight / 2);
+      startIdx = Math.max(0, selectedIndex - halfHeight);
+      endIdx = Math.min(tasks.length, startIdx + availableHeight);
+      
+      if (endIdx - startIdx < availableHeight) {
+        startIdx = Math.max(0, endIdx - availableHeight);
+      }
+    }
+    
+    // Render visible tasks
+    for (let i = startIdx; i < endIdx; i++) {
+      const task = tasks[i];
+      const line = renderTaskLine(task, i, selectedIndex, width, theme, focused);
+      lines.push(line);
+    }
+  }
+  
+  // Pad to height
+  while (lines.length < height) {
+    lines.push("");
+  }
+  
+  return lines.slice(0, height);
+}
+
+/**
+ * Tasks panel component class
+ * Tracks per-phase selection state to avoid auto-selecting when switching phases
+ */
+export class TasksPanelComponent {
+  private props: TasksPanelProps;
+  private cachedWidth?: number;
+  private cachedHeight?: number;
+  private cachedLines?: string[];
+  private phaseSelections: Map<string, number> = new Map(); // phase id -> selected index
+  
+  constructor(phase: Phase | null = null, focused = false) {
+    this.props = {
+      phase,
+      tasks: phase?.tasks ?? [],
+      selectedIndex: -1,
+      focused
+    };
+  }
+  
+  update(phase: Phase | null, selectedIndex?: number): void {
+    const prevPhaseId = this.props.phase?.id;
+    
+    // Save current selection for previous phase
+    if (prevPhaseId && this.props.tasks.length > 0) {
+      this.phaseSelections.set(prevPhaseId, this.props.selectedIndex);
+    }
+    
+    this.props.phase = phase;
+    this.props.tasks = phase?.tasks ?? [];
+    
+    if (selectedIndex !== undefined) {
+      this.props.selectedIndex = Math.max(-1, Math.min(selectedIndex, this.props.tasks.length - 1));
+    } else {
+      const phaseId = phase?.id;
+      if (phaseId && this.phaseSelections.has(phaseId)) {
+        const savedIndex = this.phaseSelections.get(phaseId)!;
+        this.props.selectedIndex = Math.max(-1, Math.min(savedIndex, this.props.tasks.length - 1));
+      } else if (this.props.focused && this.props.tasks.length > 0) {
+        const inProgressIdx = this.props.tasks.findIndex(t => t.status === "in_progress");
+        this.props.selectedIndex = inProgressIdx !== -1 ? inProgressIdx : 0;
+      } else {
+        this.props.selectedIndex = -1;
+      }
+    }
+    this.invalidate();
+  }
+  
+  setFocused(focused: boolean): void {
+    this.props.focused = focused;
+    if (focused && this.props.selectedIndex < 0 && this.props.tasks.length > 0) {
+      const inProgressIdx = this.props.tasks.findIndex(t => t.status === "in_progress");
+      this.props.selectedIndex = inProgressIdx !== -1 ? inProgressIdx : 0;
+    }
+    this.invalidate();
+  }
+  
+  isFocused(): boolean {
+    return this.props.focused;
+  }
+  
+  getSelectedIndex(): number {
+    return this.props.selectedIndex;
+  }
+  
+  getSelectedTask(): Task | undefined {
+    if (this.props.selectedIndex < 0) return undefined;
+    return this.props.tasks[this.props.selectedIndex];
+  }
+  
+  navigateUp(): void {
+    if (this.props.selectedIndex < 0 && this.props.tasks.length > 0) {
+      this.props.selectedIndex = 0;
+      this.invalidate();
+      return;
+    }
+    if (this.props.selectedIndex > 0) {
+      this.props.selectedIndex--;
+      this.invalidate();
+    }
+  }
+  
+  navigateDown(): void {
+    if (this.props.selectedIndex < 0 && this.props.tasks.length > 0) {
+      this.props.selectedIndex = 0;
+      this.invalidate();
+      return;
+    }
+    if (this.props.selectedIndex < this.props.tasks.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 = renderTasksPanel(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/templates/state.json

@@ -0,0 +1,5 @@
+{
+  "active_run_id": null,
+  "current_phase": "idle",
+  "current_status_message": ""
+}