@task-mcp/shared 1.0.28 → 1.0.29

package/src/utils/terminal-ui.test.ts

@@ -829,3 +829,289 @@ describe("BOX constants", () => {
     expect(BOX.dblVertical).toBe("║");
   });
 });
+
+// =============================================================================
+// Status Symbols Tests
+// =============================================================================
+
+import {
+  STATUS_SYMBOLS,
+  formatStatusSymbol,
+  PRIORITY_LEVELS,
+  formatPriorityBadge,
+  renderSection,
+  renderSections,
+  renderAlert,
+  renderStats,
+  formatDueDate,
+  formatTaskLine,
+} from "./terminal-ui.js";
+
+describe("STATUS_SYMBOLS", () => {
+  test("has checkbox-style symbols for all statuses", () => {
+    expect(STATUS_SYMBOLS.pending).toBe("[ ]");
+    expect(STATUS_SYMBOLS.in_progress).toBe("[~]");
+    expect(STATUS_SYMBOLS.completed).toBe("[x]");
+    expect(STATUS_SYMBOLS.blocked).toBe("[!]");
+    expect(STATUS_SYMBOLS.cancelled).toBe("[-]");
+    expect(STATUS_SYMBOLS.deferred).toBe("[.]");
+  });
+});
+
+describe("formatStatusSymbol", () => {
+  test("returns colored symbol for known status", () => {
+    const result = formatStatusSymbol("pending");
+    expect(stripAnsi(result)).toBe("[ ]");
+  });
+
+  test("returns colored symbol for blocked status", () => {
+    const result = formatStatusSymbol("blocked");
+    expect(stripAnsi(result)).toBe("[!]");
+    expect(result).toContain("\x1b[31m"); // red
+  });
+
+  test("returns unknown symbol for invalid status", () => {
+    const result = formatStatusSymbol("invalid");
+    expect(stripAnsi(result)).toBe("[?]");
+  });
+});
+
+// =============================================================================
+// Priority Badge Tests
+// =============================================================================
+
+describe("PRIORITY_LEVELS", () => {
+  test("has P0-P3 labels", () => {
+    expect(PRIORITY_LEVELS.critical.label).toBe("P0");
+    expect(PRIORITY_LEVELS.high.label).toBe("P1");
+    expect(PRIORITY_LEVELS.medium.label).toBe("P2");
+    expect(PRIORITY_LEVELS.low.label).toBe("P3");
+  });
+
+  test("critical has background styling", () => {
+    expect(PRIORITY_LEVELS.critical.bg).toBe(true);
+  });
+});
+
+describe("formatPriorityBadge", () => {
+  test("formats critical with background", () => {
+    const result = formatPriorityBadge("critical");
+    expect(result).toContain("P0");
+    expect(result).toContain("\x1b[41m"); // red background
+  });
+
+  test("formats high priority", () => {
+    const result = formatPriorityBadge("high");
+    expect(stripAnsi(result)).toBe("P1");
+  });
+
+  test("returns dashes for unknown priority", () => {
+    const result = formatPriorityBadge("unknown");
+    expect(stripAnsi(result)).toBe("--");
+  });
+});
+
+// =============================================================================
+// Section Renderer Tests
+// =============================================================================
+
+describe("renderSection", () => {
+  test("renders header and items", () => {
+    const items = [
+      { primary: "Task 1" },
+      { primary: "Task 2" },
+    ];
+    const lines = renderSection("Test Section", items);
+
+    expect(lines.length).toBeGreaterThan(0);
+    expect(stripAnsi(lines[0] ?? "")).toContain("Test Section");
+    expect(lines.some(l => l.includes("Task 1"))).toBe(true);
+    expect(lines.some(l => l.includes("Task 2"))).toBe(true);
+  });
+
+  test("renders with icon", () => {
+    const lines = renderSection("Tasks", [], { icon: "🎯" });
+    expect(stripAnsi(lines[0] ?? "")).toContain("🎯");
+  });
+
+  test("renders empty state message", () => {
+    const lines = renderSection("Empty", [], { emptyMessage: "No items" });
+    expect(lines.some(l => stripAnsi(l).includes("No items"))).toBe(true);
+  });
+
+  test("renders item details", () => {
+    const items = [
+      { primary: "Task", details: ["Detail 1", "Detail 2"] },
+    ];
+    const lines = renderSection("With Details", items);
+    expect(lines.some(l => l.includes("Detail 1"))).toBe(true);
+    expect(lines.some(l => l.includes("Detail 2"))).toBe(true);
+  });
+
+  test("renders prefix and suffix", () => {
+    const items = [
+      { primary: "Task", prefix: "[x]", suffix: "P1" },
+    ];
+    const lines = renderSection("Test", items);
+    expect(lines.some(l => l.includes("[x]"))).toBe(true);
+    expect(lines.some(l => l.includes("P1"))).toBe(true);
+  });
+});
+
+describe("renderSections", () => {
+  test("renders multiple sections with spacing", () => {
+    const sections = [
+      { title: "Section 1", items: [{ primary: "Item 1" }] },
+      { title: "Section 2", items: [{ primary: "Item 2" }] },
+    ];
+    const lines = renderSections(sections);
+
+    expect(lines.some(l => stripAnsi(l).includes("Section 1"))).toBe(true);
+    expect(lines.some(l => stripAnsi(l).includes("Section 2"))).toBe(true);
+    expect(lines.includes("")).toBe(true); // spacing between sections
+  });
+});
+
+// =============================================================================
+// Alert Tests
+// =============================================================================
+
+describe("renderAlert", () => {
+  test("renders info alert", () => {
+    const lines = renderAlert("Test message", { severity: "info" });
+    expect(lines.length).toBe(3);
+    expect(lines[1]).toContain("Test message");
+  });
+
+  test("renders warning alert", () => {
+    const lines = renderAlert("Warning!", { severity: "warning" });
+    expect(lines[1]).toContain("Warning!");
+    expect(lines[1]).toContain("⚠");
+  });
+
+  test("renders with custom icon", () => {
+    const lines = renderAlert("Custom", { icon: "★" });
+    expect(lines[1]).toContain("★");
+  });
+});
+
+// =============================================================================
+// Stats Tests
+// =============================================================================
+
+describe("renderStats", () => {
+  test("renders stat items", () => {
+    const stats = [
+      { label: "Total", value: 10 },
+      { label: "Done", value: 5 },
+    ];
+    const result = renderStats(stats);
+    expect(stripAnsi(result)).toContain("Total:");
+    expect(stripAnsi(result)).toContain("10");
+    expect(stripAnsi(result)).toContain("Done:");
+    expect(stripAnsi(result)).toContain("5");
+  });
+
+  test("applies color to values", () => {
+    const stats = [
+      { label: "Blocked", value: 3, color: "red" as const },
+    ];
+    const result = renderStats(stats);
+    expect(result).toContain("\x1b[31m"); // red
+  });
+});
+
+// =============================================================================
+// Due Date Tests
+// =============================================================================
+
+describe("formatDueDate", () => {
+  test("returns dashes for null/undefined", () => {
+    expect(stripAnsi(formatDueDate(null))).toBe("--");
+    expect(stripAnsi(formatDueDate(undefined))).toBe("--");
+  });
+
+  test("formats today", () => {
+    const today = new Date().toISOString().split("T")[0];
+    const result = formatDueDate(today);
+    expect(stripAnsi(result)).toBe("today");
+    expect(result).toContain("\x1b[33m"); // yellow
+  });
+
+  test("formats tomorrow", () => {
+    const tomorrow = new Date(Date.now() + 86400000).toISOString().split("T")[0];
+    const result = formatDueDate(tomorrow);
+    expect(stripAnsi(result)).toBe("tomorrow");
+  });
+
+  test("formats overdue dates", () => {
+    const yesterday = new Date(Date.now() - 86400000).toISOString().split("T")[0];
+    const result = formatDueDate(yesterday);
+    expect(stripAnsi(result)).toContain("overdue");
+    expect(result).toContain("\x1b[31m"); // red
+  });
+
+  test("formats dates within a week", () => {
+    const inThreeDays = new Date(Date.now() + 3 * 86400000).toISOString().split("T")[0];
+    const result = formatDueDate(inThreeDays);
+    expect(stripAnsi(result)).toBe("3d");
+  });
+});
+
+// =============================================================================
+// Task Line Tests
+// =============================================================================
+
+describe("formatTaskLine", () => {
+  test("formats basic task", () => {
+    const task = {
+      id: "task_abc123def456",
+      title: "Test task",
+      status: "pending",
+    };
+    const result = formatTaskLine(task);
+    expect(stripAnsi(result)).toContain("[ ]");
+    expect(stripAnsi(result)).toContain("f456"); // last 4 chars of id
+    expect(stripAnsi(result)).toContain("Test task");
+  });
+
+  test("formats task with priority", () => {
+    const task = {
+      id: "task_123",
+      title: "High priority task",
+      status: "in_progress",
+      priority: "high",
+    };
+    const result = formatTaskLine(task);
+    expect(stripAnsi(result)).toContain("[~]");
+    expect(stripAnsi(result)).toContain("P1");
+  });
+
+  test("formats task with due date", () => {
+    const today = new Date().toISOString().split("T")[0]!;
+    const task = {
+      id: "task_123",
+      title: "Due today",
+      status: "pending",
+      dueDate: today,
+    };
+    const result = formatTaskLine(task);
+    expect(stripAnsi(result)).toContain("today");
+  });
+
+  test("respects options", () => {
+    const task = {
+      id: "task_123456789",
+      title: "Test",
+      status: "pending",
+      priority: "low",
+    };
+    const result = formatTaskLine(task, {
+      showId: false,
+      showPriority: false,
+      showDueDate: false,
+    });
+    expect(stripAnsi(result)).not.toContain("6789");
+    expect(stripAnsi(result)).not.toContain("P3");
+  });
+});

package/src/utils/terminal-ui.ts

@@ -783,3 +783,318 @@ export function banner(text: string): string {
 
   return lines.map((l) => c.cyan(l)).join("\n");
 }
+
+// =============================================================================
+// Status Symbols (Checkbox Style)
+// =============================================================================
+
+/**
+ * Checkbox-style status symbols for task display
+ * Designed for quick visual scanning
+ */
+export const STATUS_SYMBOLS = {
+  pending: "[ ]",
+  in_progress: "[~]",
+  completed: "[x]",
+  blocked: "[!]",
+  cancelled: "[-]",
+  deferred: "[.]",
+} as const;
+
+/**
+ * Format status with checkbox symbol and color
+ */
+export function formatStatusSymbol(status: string): string {
+  const symbol = STATUS_SYMBOLS[status as keyof typeof STATUS_SYMBOLS] ?? "[?]";
+  const colorFn = statusColors[status] ?? c.white;
+  return colorFn(symbol);
+}
+
+// =============================================================================
+// Priority Badge (P0-P3 Style)
+// =============================================================================
+
+/**
+ * Priority levels with P0-P3 notation
+ */
+export const PRIORITY_LEVELS = {
+  critical: { label: "P0", color: "brightRed" as const, bg: true },
+  high: { label: "P1", color: "red" as const, bg: false },
+  medium: { label: "P2", color: "yellow" as const, bg: false },
+  low: { label: "P3", color: "gray" as const, bg: false },
+} as const;
+
+/**
+ * Format priority as P0-P3 badge with appropriate styling
+ */
+export function formatPriorityBadge(priority: string): string {
+  const level = PRIORITY_LEVELS[priority as keyof typeof PRIORITY_LEVELS];
+  if (!level) return c.gray("--");
+
+  if (level.bg && priority === "critical") {
+    // P0 gets inverse (background) styling for maximum visibility
+    return `\x1b[41m\x1b[37m ${level.label} \x1b[0m`;
+  }
+
+  return color(level.label, level.color);
+}
+
+// =============================================================================
+// Section Renderer (GitHub CLI Style)
+// =============================================================================
+
+export interface SectionItem {
+  /** Primary text (e.g., task title) */
+  primary: string;
+  /** Secondary text (e.g., status, metadata) */
+  secondary?: string;
+  /** Detail lines shown below the item */
+  details?: string[];
+  /** Item prefix (e.g., status symbol) */
+  prefix?: string;
+  /** Item suffix (e.g., priority badge, due date) */
+  suffix?: string;
+}
+
+export interface SectionOptions {
+  /** Section icon/emoji */
+  icon?: string;
+  /** Indent level for items (default: 2) */
+  indent?: number;
+  /** Show item count in header */
+  showCount?: boolean;
+  /** Header color */
+  headerColor?: ColorName;
+  /** Empty state message */
+  emptyMessage?: string;
+}
+
+/**
+ * Render a section with header and indented items (GitHub CLI style)
+ *
+ * Example output:
+ * ```
+ * 🎯 Next Action
+ *   [!] a1b2  Implement auth API          P0  due:today
+ *       → Unblocks 3 tasks (critical path)
+ * ```
+ */
+export function renderSection(
+  title: string,
+  items: SectionItem[],
+  options: SectionOptions = {}
+): string[] {
+  const {
+    icon,
+    indent = 2,
+    showCount = false,
+    headerColor = "cyan",
+    emptyMessage = "None",
+  } = options;
+
+  const lines: string[] = [];
+  const indentStr = " ".repeat(indent);
+  const detailIndent = " ".repeat(indent + 4);
+
+  // Header
+  const countStr = showCount ? c.gray(` (${items.length})`) : "";
+  const iconStr = icon ? `${icon} ` : "";
+  lines.push(color(`${iconStr}${title}${countStr}`, headerColor));
+
+  // Empty state
+  if (items.length === 0) {
+    lines.push(indentStr + c.gray(emptyMessage));
+    return lines;
+  }
+
+  // Items
+  for (const item of items) {
+    const prefix = item.prefix ? `${item.prefix} ` : "";
+    const suffix = item.suffix ? `  ${item.suffix}` : "";
+    const secondary = item.secondary ? `  ${c.gray(item.secondary)}` : "";
+
+    lines.push(`${indentStr}${prefix}${item.primary}${secondary}${suffix}`);
+
+    // Detail lines
+    if (item.details && item.details.length > 0) {
+      for (const detail of item.details) {
+        lines.push(`${detailIndent}${c.gray("→")} ${c.gray(detail)}`);
+      }
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * Render multiple sections with spacing
+ */
+export function renderSections(
+  sections: Array<{ title: string; items: SectionItem[]; options?: SectionOptions }>
+): string[] {
+  const lines: string[] = [];
+
+  for (let i = 0; i < sections.length; i++) {
+    const section = sections[i];
+    if (!section) continue;
+
+    if (i > 0) {
+      lines.push(""); // Add spacing between sections
+    }
+
+    lines.push(...renderSection(section.title, section.items, section.options));
+  }
+
+  return lines;
+}
+
+// =============================================================================
+// Alert Box
+// =============================================================================
+
+export type AlertSeverity = "critical" | "warning" | "info" | "success";
+
+export interface AlertOptions {
+  severity?: AlertSeverity;
+  icon?: string;
+}
+
+const ALERT_STYLES: Record<AlertSeverity, { color: ColorName; icon: string; border: string }> = {
+  critical: { color: "red", icon: "✗", border: BOX.dblHorizontal },
+  warning: { color: "yellow", icon: "⚠", border: BOX.horizontal },
+  info: { color: "cyan", icon: "ℹ", border: BOX.horizontal },
+  success: { color: "green", icon: "✓", border: BOX.horizontal },
+};
+
+/**
+ * Render an alert box with severity styling
+ */
+export function renderAlert(message: string, options: AlertOptions = {}): string[] {
+  const { severity = "info", icon } = options;
+  const style = ALERT_STYLES[severity];
+  const displayIcon = icon ?? style.icon;
+
+  const content = `${displayIcon} ${message}`;
+  const width = displayWidth(content) + 4;
+
+  const topBorder = color(style.border.repeat(width), style.color);
+  const bottomBorder = topBorder;
+
+  return [topBorder, `  ${color(content, style.color)}  `, bottomBorder];
+}
+
+// =============================================================================
+// Compact Stats Row
+// =============================================================================
+
+export interface StatItem {
+  label: string;
+  value: string | number;
+  color?: ColorName;
+}
+
+/**
+ * Render a compact stats row
+ * Example: "Total: 24  Done: 8 (33%)  Blocked: 4"
+ */
+export function renderStats(stats: StatItem[], separator = "  "): string {
+  return stats
+    .map((stat) => {
+      const valueStr = String(stat.value);
+      const coloredValue = stat.color ? color(valueStr, stat.color) : valueStr;
+      return `${c.gray(stat.label + ":")} ${coloredValue}`;
+    })
+    .join(separator);
+}
+
+// =============================================================================
+// Due Date Formatter
+// =============================================================================
+
+/**
+ * Format due date with relative time and appropriate coloring
+ */
+export function formatDueDate(dueDate: string | undefined | null): string {
+  if (!dueDate) return c.gray("--");
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const due = new Date(dueDate);
+  due.setHours(0, 0, 0, 0);
+
+  const diffDays = Math.floor((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0) {
+    const overdueDays = Math.abs(diffDays);
+    return c.red(`${overdueDays}d overdue`);
+  } else if (diffDays === 0) {
+    return c.yellow("today");
+  } else if (diffDays === 1) {
+    return c.yellow("tomorrow");
+  } else if (diffDays <= 7) {
+    return c.cyan(`${diffDays}d`);
+  } else {
+    return c.gray(dueDate);
+  }
+}
+
+// =============================================================================
+// Task Line Formatter
+// =============================================================================
+
+export interface TaskLineOptions {
+  showId?: boolean;
+  idLength?: number;
+  maxTitleWidth?: number;
+  showPriority?: boolean;
+  showDueDate?: boolean;
+}
+
+/**
+ * Format a single task line for list display
+ * Example: "[~] a1b2  Implement auth API          P1  today"
+ */
+export function formatTaskLine(
+  task: {
+    id: string;
+    title: string;
+    status: string;
+    priority?: string;
+    dueDate?: string | null;
+  },
+  options: TaskLineOptions = {}
+): string {
+  const {
+    showId = true,
+    idLength = 4,
+    maxTitleWidth = 40,
+    showPriority = true,
+    showDueDate = true,
+  } = options;
+
+  const parts: string[] = [];
+
+  // Status symbol
+  parts.push(formatStatusSymbol(task.status));
+
+  // Task ID
+  if (showId) {
+    parts.push(c.gray(task.id.slice(-idLength)));
+  }
+
+  // Title (truncated)
+  parts.push(padEnd(truncateStr(task.title, maxTitleWidth), maxTitleWidth));
+
+  // Priority badge
+  if (showPriority && task.priority) {
+    parts.push(formatPriorityBadge(task.priority));
+  }
+
+  // Due date
+  if (showDueDate && task.dueDate) {
+    parts.push(formatDueDate(task.dueDate));
+  }
+
+  return parts.join("  ");
+}