@task-mcp/cli 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@task-mcp/cli",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Zero-dependency CLI for task-mcp with Bun native visualization",
   "type": "module",
   "bin": {
@@ -30,8 +30,8 @@
     "directory": "packages/cli"
   },
   "dependencies": {
-    "@task-mcp/mcp-server": "^1.0.10",
-    "@task-mcp/shared": "^1.0.9"
+    "@task-mcp/mcp-server": "^1.0.11",
+    "@task-mcp/shared": "^1.0.10"
   },
   "devDependencies": {
     "@types/bun": "^1.1.14",

package/src/ansi.ts

@@ -1,453 +1,50 @@
 /**
- * Zero-dependency ANSI utilities for terminal visualization
- * Uses Bun native APIs where available, falls back to raw ANSI codes
- */
-
-// ANSI escape codes
-const ESC = "\x1b[";
-const RESET = `${ESC}0m`;
-
-// Color codes (foreground)
-const FG = {
-  black: 30,
-  red: 31,
-  green: 32,
-  yellow: 33,
-  blue: 34,
-  magenta: 35,
-  cyan: 36,
-  white: 37,
-  gray: 90,
-  brightRed: 91,
-  brightGreen: 92,
-  brightYellow: 93,
-  brightBlue: 94,
-  brightMagenta: 95,
-  brightCyan: 96,
-  brightWhite: 97,
-} as const;
-
-// Style codes
-const STYLE = {
-  bold: 1,
-  dim: 2,
-  italic: 3,
-  underline: 4,
-  inverse: 7,
-  strikethrough: 9,
-} as const;
-
-type ColorName = keyof typeof FG;
-type StyleName = keyof typeof STYLE;
-
-/**
- * Apply color to text
- */
-export function color(text: string, colorName: ColorName): string {
-  return `${ESC}${FG[colorName]}m${text}${RESET}`;
-}
-
-/**
- * Apply style to text
- */
-export function style(text: string, styleName: StyleName): string {
-  return `${ESC}${STYLE[styleName]}m${text}${RESET}`;
-}
-
-/**
- * Combine color and style
- */
-export function styled(text: string, colorName: ColorName, styleName?: StyleName): string {
-  if (styleName) {
-    return `${ESC}${STYLE[styleName]};${FG[colorName]}m${text}${RESET}`;
-  }
-  return color(text, colorName);
-}
-
-// Convenience color functions
-export const c = {
-  red: (t: string) => color(t, "red"),
-  green: (t: string) => color(t, "green"),
-  yellow: (t: string) => color(t, "yellow"),
-  blue: (t: string) => color(t, "blue"),
-  cyan: (t: string) => color(t, "cyan"),
-  magenta: (t: string) => color(t, "magenta"),
-  gray: (t: string) => color(t, "gray"),
-  white: (t: string) => color(t, "white"),
-  bold: (t: string) => style(t, "bold"),
-  dim: (t: string) => style(t, "dim"),
-
-  // Semantic colors
-  success: (t: string) => color(t, "green"),
-  error: (t: string) => color(t, "red"),
-  warning: (t: string) => color(t, "yellow"),
-  info: (t: string) => color(t, "cyan"),
-  muted: (t: string) => color(t, "gray"),
-};
-
-// Box drawing characters (Unicode)
-export const BOX = {
-  // Single line
-  topLeft: "┌",
-  topRight: "┐",
-  bottomLeft: "└",
-  bottomRight: "┘",
-  horizontal: "─",
-  vertical: "│",
-
-  // T-junctions
-  tTop: "┬",
-  tBottom: "┴",
-  tLeft: "├",
-  tRight: "┤",
-  cross: "┼",
-
-  // Double line
-  dTopLeft: "╔",
-  dTopRight: "╗",
-  dBottomLeft: "╚",
-  dBottomRight: "╝",
-  dHorizontal: "═",
-  dVertical: "║",
-
-  // Rounded
-  rTopLeft: "╭",
-  rTopRight: "╮",
-  rBottomLeft: "╰",
-  rBottomRight: "╯",
-} as const;
-
-/**
- * Create a horizontal line
- */
-export function hline(width: number, char: string = BOX.horizontal): string {
-  return char.repeat(width);
-}
-
-/**
- * Create a box around text
- */
-export function box(content: string, options: {
-  padding?: number;
-  borderColor?: ColorName;
-  title?: string;
-  rounded?: boolean;
-} = {}): string {
-  const { padding = 1, borderColor = "cyan", title, rounded = true } = options;
-
-  const lines = content.split("\n");
-  const maxLen = Math.max(...lines.map(l => stripAnsi(l).length), title ? title.length + 2 : 0);
-  const innerWidth = maxLen + padding * 2;
-
-  const tl = rounded ? BOX.rTopLeft : BOX.topLeft;
-  const tr = rounded ? BOX.rTopRight : BOX.topRight;
-  const bl = rounded ? BOX.rBottomLeft : BOX.bottomLeft;
-  const br = rounded ? BOX.rBottomRight : BOX.bottomRight;
-  const h = BOX.horizontal;
-  const v = BOX.vertical;
-
-  const applyBorder = (s: string) => color(s, borderColor);
-
-  // Top border with optional title
-  let top: string;
-  if (title) {
-    const titlePart = ` ${title} `;
-    const remaining = innerWidth - titlePart.length;
-    const leftPad = Math.floor(remaining / 2);
-    const rightPad = remaining - leftPad;
-    top = applyBorder(tl + h.repeat(leftPad)) + c.bold(titlePart) + applyBorder(h.repeat(rightPad) + tr);
-  } else {
-    top = applyBorder(tl + h.repeat(innerWidth) + tr);
-  }
-
-  // Padding lines
-  const padLine = applyBorder(v) + " ".repeat(innerWidth) + applyBorder(v);
-  const paddingLines = Array(padding).fill(padLine);
-
-  // Content lines
-  const contentLines = lines.map(line => {
-    const stripped = stripAnsi(line);
-    const padRight = innerWidth - stripped.length - padding;
-    return applyBorder(v) + " ".repeat(padding) + line + " ".repeat(Math.max(0, padRight)) + applyBorder(v);
-  });
-
-  // Bottom border
-  const bottom = applyBorder(bl + h.repeat(innerWidth) + br);
-
-  return [top, ...paddingLines, ...contentLines, ...paddingLines, bottom].join("\n");
-}
-
-/**
- * Strip ANSI codes from string (for length calculation)
- */
-export function stripAnsi(str: string): string {
-  return str.replace(/\x1b\[[0-9;]*m/g, "");
-}
-
-/**
- * Check if a character is a wide character (CJK, emoji, etc.)
- * Wide characters take 2 columns in terminal
- */
-function isWideChar(char: string): boolean {
-  const code = char.codePointAt(0) ?? 0;
-
-  // CJK ranges
-  if (
-    (code >= 0x1100 && code <= 0x115F) ||  // Hangul Jamo
-    (code >= 0x2E80 && code <= 0x9FFF) ||  // CJK
-    (code >= 0xAC00 && code <= 0xD7AF) ||  // Hangul Syllables
-    (code >= 0xF900 && code <= 0xFAFF) ||  // CJK Compatibility
-    (code >= 0xFE10 && code <= 0xFE1F) ||  // Vertical forms
-    (code >= 0xFE30 && code <= 0xFE6F) ||  // CJK Compatibility Forms
-    (code >= 0xFF00 && code <= 0xFF60) ||  // Fullwidth Forms
-    (code >= 0xFFE0 && code <= 0xFFE6) ||  // Fullwidth Signs
-    (code >= 0x20000 && code <= 0x2FFFF)   // CJK Extension B+
-  ) {
-    return true;
-  }
-  return false;
-}
-
-/**
- * Get display width of a string (CJK = 2, ASCII = 1)
- */
-export function displayWidth(str: string): number {
-  const stripped = stripAnsi(str);
-  let width = 0;
-  for (const char of stripped) {
-    width += isWideChar(char) ? 2 : 1;
-  }
-  return width;
-}
-
-/**
- * Pad string to width (accounting for ANSI codes and wide characters)
- */
-export function pad(str: string, width: number, align: "left" | "right" | "center" = "left"): string {
-  const len = displayWidth(str);
-  const diff = width - len;
-  if (diff <= 0) return str;
-
-  switch (align) {
-    case "right":
-      return " ".repeat(diff) + str;
-    case "center":
-      const left = Math.floor(diff / 2);
-      return " ".repeat(left) + str + " ".repeat(diff - left);
-    default:
-      return str + " ".repeat(diff);
-  }
-}
-
-/**
- * Truncate string to max display width
- */
-export function truncate(str: string, maxLen: number, suffix = "..."): string {
-  const stripped = stripAnsi(str);
-  if (displayWidth(stripped) <= maxLen) return str;
-
-  // Truncate by display width
-  const suffixWidth = displayWidth(suffix);
-  let width = 0;
-  let result = "";
-
-  for (const char of stripped) {
-    const charWidth = isWideChar(char) ? 2 : 1;
-    if (width + charWidth > maxLen - suffixWidth) break;
-    result += char;
-    width += charWidth;
-  }
-
-  return result + suffix;
-}
-
-/**
- * Create a simple table
- */
-export interface TableColumn {
-  header: string;
-  key: string;
-  width?: number;
-  align?: "left" | "right" | "center";
-  format?: (value: unknown) => string;
-}
-
-export function table<T extends Record<string, unknown>>(
-  data: T[],
-  columns: TableColumn[],
-  options: {
-    headerColor?: ColorName;
-    borderColor?: ColorName;
-  } = {}
-): string {
-  const { headerColor = "cyan", borderColor = "gray" } = options;
-
-  // Calculate column widths using display width
-  const widths = columns.map(col => {
-    const headerWidth = displayWidth(col.header);
-    const maxDataWidth = Math.max(
-      ...data.map(row => {
-        const val = col.format ? col.format(row[col.key]) : String(row[col.key] ?? "");
-        return displayWidth(val);
-      }),
-      0
-    );
-    return col.width ?? Math.max(headerWidth, maxDataWidth);
-  });
-
-  const border = color(BOX.vertical, borderColor);
-  const hBorder = color(BOX.horizontal, borderColor);
-
-  // Header
-  const headerRow = columns
-    .map((col, i) => color(pad(col.header, widths[i], col.align), headerColor))
-    .join(` ${border} `);
-
-  // Separator
-  const separator = widths.map(w => hBorder.repeat(w)).join(color(`─${BOX.cross}─`, borderColor));
-
-  // Data rows
-  const dataRows = data.map(row =>
-    columns
-      .map((col, i) => {
-        const val = col.format ? col.format(row[col.key]) : String(row[col.key] ?? "");
-        return pad(truncate(val, widths[i]), widths[i], col.align);
-      })
-      .join(` ${border} `)
-  );
-
-  return [headerRow, separator, ...dataRows].join("\n");
-}
-
-/**
- * Create a progress bar
- */
-export function progressBar(
-  current: number,
-  total: number,
-  options: {
-    width?: number;
-    filled?: string;
-    empty?: string;
-    showPercent?: boolean;
-    filledColor?: ColorName;
-    emptyColor?: ColorName;
-  } = {}
-): string {
-  const {
-    width = 20,
-    filled = "█",
-    empty = "░",
-    showPercent = true,
-    filledColor = "green",
-    emptyColor = "gray",
-  } = options;
-
-  const percent = total > 0 ? Math.round((current / total) * 100) : 0;
-  const filledCount = Math.round((percent / 100) * width);
-  const emptyCount = width - filledCount;
-
-  const bar = color(filled.repeat(filledCount), filledColor) + color(empty.repeat(emptyCount), emptyColor);
-
-  return showPercent ? `${bar} ${percent}%` : bar;
-}
-
-/**
- * Status icons
- */
-export const icons = {
-  // Status
-  pending: c.yellow("○"),
-  in_progress: c.blue("◐"),
-  completed: c.green("✓"),
-  blocked: c.red("✗"),
-  cancelled: c.gray("⊘"),
-
-  // Priority
-  critical: c.red("!!!"),
-  high: c.yellow("!!"),
-  medium: c.blue("!"),
-  low: c.gray("·"),
-
-  // Misc
-  arrow: c.cyan("→"),
-  bullet: c.gray("•"),
-  check: c.green("✓"),
-  cross: c.red("✗"),
-  warning: c.yellow("⚠"),
-  info: c.cyan("ℹ"),
-};
-
-/**
- * Place multiple boxes side by side
- * Each box is a multi-line string
- */
-export function sideBySide(boxes: string[], gap: number = 2): string {
-  // Split each box into lines
-  const boxLines = boxes.map(b => b.split("\n"));
-
-  // Find max height
-  const maxHeight = Math.max(...boxLines.map(lines => lines.length));
-
-  // Find width of each box (using first line as reference)
-  const boxWidths = boxLines.map(lines => {
-    return Math.max(...lines.map(l => displayWidth(l)));
-  });
-
-  // Pad each box to max height
-  const paddedBoxLines = boxLines.map((lines, i) => {
-    const width = boxWidths[i];
-    while (lines.length < maxHeight) {
-      lines.push(" ".repeat(width));
-    }
-    // Ensure each line is padded to box width
-    return lines.map(line => {
-      const lineWidth = displayWidth(line);
-      if (lineWidth < width) {
-        return line + " ".repeat(width - lineWidth);
-      }
-      return line;
-    });
-  });
-
-  // Combine lines horizontally
-  const result: string[] = [];
-  const gapStr = " ".repeat(gap);
-
-  for (let i = 0; i < maxHeight; i++) {
-    const lineParts = paddedBoxLines.map(lines => lines[i] ?? "");
-    result.push(lineParts.join(gapStr));
-  }
-
-  return result.join("\n");
-}
-
-/**
- * ASCII art text (simple implementation)
- */
-export function banner(text: string): string {
-  // Simple block letters for "TASK MCP"
-  const letters: Record<string, string[]> = {
-    T: ["████", " ██ ", " ██ ", " ██ ", " ██ "],
-    A: [" ██ ", "████", "██ █", "████", "██ █"],
-    S: ["████", "██  ", "████", "  ██", "████"],
-    K: ["██ █", "███ ", "██  ", "███ ", "██ █"],
-    M: ["█   █", "██ ██", "█ █ █", "█   █", "█   █"],
-    C: ["████", "██  ", "██  ", "██  ", "████"],
-    P: ["████", "██ █", "████", "██  ", "██  "],
-    " ": ["  ", "  ", "  ", "  ", "  "],
-  };
-
-  const chars = text.toUpperCase().split("");
-  const lines: string[] = ["", "", "", "", ""];
-
-  for (const char of chars) {
-    const letterLines = letters[char] ?? letters[" "];
-    for (let i = 0; i < 5; i++) {
-      lines[i] += (letterLines[i] ?? "") + " ";
-    }
-  }
-
-  return lines.map(l => c.cyan(l)).join("\n");
-}
-
+ * Re-export terminal UI utilities from shared package
+ * This file exists for backward compatibility
+ */
+
+export {
+  // Colors and styles
+  color,
+  style,
+  styled,
+  c,
+  // Box drawing
+  BOX,
+  box,
+  drawBox,
+  hline,
+  // String utilities
+  stripAnsi,
+  displayWidth,
+  visibleLength,
+  pad,
+  padEnd,
+  padStart,
+  center,
+  truncateStr,
+  // Progress bar
+  progressBar,
+  type ProgressBarOptions,
+  // Layout
+  sideBySide,
+  sideBySideArrays,
+  type BoxOptions,
+  // Tables
+  table,
+  renderTable,
+  type TableColumn,
+  // Formatters
+  statusColors,
+  statusIcons,
+  icons,
+  formatStatus,
+  priorityColors,
+  formatPriority,
+  formatDependencies,
+  // Banner
+  banner,
+} from "@task-mcp/shared";
+
+// Alias for CLI compatibility
+export { truncateStr as truncate } from "@task-mcp/shared";

package/src/commands/dashboard.ts

@@ -113,55 +113,89 @@ function renderStatusWidget(tasks: Task[], projects: Project[]): string {
 
 async function renderActionsWidget(tasks: Task[]): Promise<string> {
   const nextTask = suggestNextTask(tasks);
-  const pendingItems = await listInboxItems("pending");
 
   const lines: string[] = [];
 
-  // Next tasks (top 2 suggestions)
+  // Next tasks (top 3 suggestions)
   const readyTasks = tasks
     .filter(t => t.status === "pending" && (!t.dependencies || t.dependencies.length === 0))
     .sort((a, b) => {
       const priorityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
       return (priorityOrder[a.priority] ?? 2) - (priorityOrder[b.priority] ?? 2);
     })
-    .slice(0, 3);
+    .slice(0, 4);
 
   if (readyTasks.length > 0) {
     for (const task of readyTasks) {
       const deps = task.dependencies?.length ?? 0;
       const depsInfo = deps > 0 ? `${deps} deps` : c.green("ready");
-      lines.push(`${c.cyan("→")} ${truncate(task.title, 22)}`);
+      lines.push(`${c.cyan("→")} ${truncate(task.title, 24)}`);
       lines.push(`  ${formatPriority(task.priority)}, ${depsInfo}`);
     }
   } else if (nextTask) {
     const deps = nextTask.dependencies?.length ?? 0;
     const depsInfo = deps > 0 ? `${deps} deps` : c.green("ready");
-    lines.push(`${c.cyan("→")} ${truncate(nextTask.title, 22)}`);
+    lines.push(`${c.cyan("→")} ${truncate(nextTask.title, 24)}`);
     lines.push(`  ${formatPriority(nextTask.priority)}, ${depsInfo}`);
   } else {
     lines.push(c.dim("No tasks ready"));
   }
 
-  // Inbox summary
+  return box(lines.join("\n"), {
+    title: "Next Actions",
+    borderColor: "green",
+    padding: 1,
+  });
+}
+
+// =============================================================================
+// Widget: Inbox
+// =============================================================================
+
+async function renderInboxWidget(): Promise<string | null> {
+  const pendingItems = await listInboxItems("pending");
+
+  if (pendingItems.length === 0) {
+    return null; // Don't show if empty
+  }
+
+  const lines: string[] = [];
+  lines.push(`${c.yellow("Pending")}: ${pendingItems.length} items`);
   lines.push("");
-  if (pendingItems.length > 0) {
-    lines.push(`${c.yellow("Inbox")}: ${pendingItems.length} items`);
-    // Show first item preview
-    const first = pendingItems[0];
-    if (first) {
-      lines.push(`  ${c.dim(truncate(first.content, 20))}`);
-    }
-  } else {
-    lines.push(c.dim("Inbox empty"));
+
+  // Show up to 3 items
+  for (const item of pendingItems.slice(0, 3)) {
+    const date = new Date(item.capturedAt);
+    const ago = getTimeAgo(date);
+    const tags = item.tags?.length ? c.dim(` #${item.tags[0]}`) : "";
+    lines.push(`${c.yellow("○")} ${truncate(item.content, 40)}${tags}`);
+    lines.push(`  ${c.dim(ago)}`);
+  }
+
+  if (pendingItems.length > 3) {
+    lines.push(c.gray(`+${pendingItems.length - 3} more`));
   }
 
   return box(lines.join("\n"), {
-    title: "Next Actions",
-    borderColor: "green",
+    title: "Inbox",
+    borderColor: "yellow",
     padding: 1,
   });
 }
 
+function getTimeAgo(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
 // =============================================================================
 // Projects Table
 // =============================================================================
@@ -265,6 +299,13 @@ export async function dashboard(projectId?: string): Promise<void> {
   console.log(sideBySide([statusWidget, actionsWidget], 2));
   console.log();
 
+  // Inbox widget (if there are pending items)
+  const inboxWidget = await renderInboxWidget();
+  if (inboxWidget) {
+    console.log(inboxWidget);
+    console.log();
+  }
+
   // Projects table (only if showing all projects)
   if (!project && projects.length > 1) {
     console.log(c.bold("Projects"));