@task-mcp/shared 1.0.9 → 1.0.11

package/src/utils/dashboard-renderer.ts

@@ -0,0 +1,606 @@
+/**
+ * Shared dashboard renderer for CLI and MCP server
+ * Provides consistent dashboard layout across all interfaces
+ */
+
+import type { Task, Project, InboxItem } from "../schemas/index.js";
+import {
+  c,
+  box,
+  progressBar,
+  table,
+  icons,
+  sideBySide,
+  truncateStr,
+  pad,
+  banner,
+  stripAnsi,
+  type TableColumn,
+} from "./terminal-ui.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface DashboardStats {
+  total: number;
+  completed: number;
+  inProgress: number;
+  pending: number;
+  blocked: number;
+  cancelled: number;
+  byPriority: {
+    critical: number;
+    high: number;
+    medium: number;
+    low: number;
+  };
+}
+
+export interface DependencyMetrics {
+  readyToWork: number;
+  blockedByDependencies: number;
+  mostDependedOn?: {
+    id: string;
+    title: string;
+    dependentCount: number;
+  } | undefined;
+}
+
+export interface DashboardData {
+  tasks: Task[];
+  projects: Project[];
+  inboxItems?: InboxItem[] | undefined;
+  currentProject?: Project | undefined;
+  version?: string | undefined;
+}
+
+// =============================================================================
+// Statistics Calculators
+// =============================================================================
+
+export function calculateStats(tasks: Task[]): DashboardStats {
+  const stats: DashboardStats = {
+    total: tasks.length,
+    completed: 0,
+    inProgress: 0,
+    pending: 0,
+    blocked: 0,
+    cancelled: 0,
+    byPriority: { critical: 0, high: 0, medium: 0, low: 0 },
+  };
+
+  for (const task of tasks) {
+    switch (task.status) {
+      case "completed":
+        stats.completed++;
+        break;
+      case "in_progress":
+        stats.inProgress++;
+        break;
+      case "pending":
+        stats.pending++;
+        break;
+      case "blocked":
+        stats.blocked++;
+        break;
+      case "cancelled":
+        stats.cancelled++;
+        break;
+    }
+
+    const priority = task.priority ?? "medium";
+    if (priority in stats.byPriority) {
+      stats.byPriority[priority as keyof typeof stats.byPriority]++;
+    }
+  }
+
+  return stats;
+}
+
+export function calculateDependencyMetrics(tasks: Task[]): DependencyMetrics {
+  const completedIds = new Set(
+    tasks.filter((t) => t.status === "completed").map((t) => t.id)
+  );
+
+  let readyToWork = 0;
+  let blockedByDependencies = 0;
+
+  // Count dependents for each task
+  const dependentCounts = new Map<string, number>();
+
+  for (const task of tasks) {
+    if (task.status === "completed" || task.status === "cancelled") continue;
+
+    const deps = task.dependencies ?? [];
+    if (deps.length === 0) {
+      readyToWork++;
+    } else {
+      const allSatisfied = deps.every((d) => completedIds.has(d.taskId));
+      if (allSatisfied) {
+        readyToWork++;
+      } else {
+        blockedByDependencies++;
+      }
+    }
+
+    // Track dependent counts
+    for (const dep of deps) {
+      dependentCounts.set(
+        dep.taskId,
+        (dependentCounts.get(dep.taskId) ?? 0) + 1
+      );
+    }
+  }
+
+  // Find most depended on task
+  let mostDependedOn: DependencyMetrics["mostDependedOn"];
+  let maxCount = 0;
+
+  for (const [taskId, count] of dependentCounts) {
+    if (count > maxCount) {
+      maxCount = count;
+      const task = tasks.find((t) => t.id === taskId);
+      if (task) {
+        mostDependedOn = {
+          id: taskId,
+          title: task.title,
+          dependentCount: count,
+        };
+      }
+    }
+  }
+
+  return { readyToWork, blockedByDependencies, mostDependedOn };
+}
+
+// =============================================================================
+// Formatters
+// =============================================================================
+
+function formatPriority(priority: Task["priority"]): string {
+  const colors: Record<string, (s: string) => string> = {
+    critical: c.red,
+    high: c.yellow,
+    medium: c.blue,
+    low: c.gray,
+  };
+  return (colors[priority] ?? c.gray)(priority);
+}
+
+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();
+}
+
+// =============================================================================
+// Widget Renderers
+// =============================================================================
+
+/**
+ * Render Status widget (progress, counts, priorities, dependencies)
+ */
+export function renderStatusWidget(
+  tasks: Task[],
+  _projects: Project[]
+): string {
+  const stats = calculateStats(tasks);
+  const depMetrics = calculateDependencyMetrics(tasks);
+  const today = getTodayTasks(tasks);
+  const overdue = getOverdueTasks(tasks);
+  const activeTasks = stats.total - stats.cancelled;
+  const percent =
+    activeTasks > 0 ? Math.round((stats.completed / activeTasks) * 100) : 0;
+
+  const lines: string[] = [];
+
+  // Progress bar with fraction
+  const bar = progressBar(stats.completed, activeTasks, { width: 24 });
+  lines.push(`${bar}  ${c.bold(`${percent}%`)}  ${stats.completed}/${activeTasks} tasks`);
+  lines.push("");
+
+  // Status counts
+  lines.push(
+    `${c.green("Done")}: ${stats.completed}  ` +
+      `${c.blue("Progress")}: ${stats.inProgress}  ` +
+      `${c.yellow("Pending")}: ${stats.pending}  ` +
+      `${c.red("Blocked")}: ${stats.blocked}`
+  );
+
+  // Schedule info
+  const scheduleInfo = [];
+  if (overdue.length > 0) scheduleInfo.push(c.red(`Overdue: ${overdue.length}`));
+  if (today.length > 0) scheduleInfo.push(c.yellow(`Today: ${today.length}`));
+  if (scheduleInfo.length > 0) {
+    lines.push(scheduleInfo.join("  "));
+  }
+
+  lines.push("");
+
+  // Priority breakdown
+  lines.push(
+    `${c.red("Critical")}: ${stats.byPriority.critical}  ` +
+      `${c.yellow("High")}: ${stats.byPriority.high}  ` +
+      `${c.blue("Medium")}: ${stats.byPriority.medium}  ` +
+      `${c.gray("Low")}: ${stats.byPriority.low}`
+  );
+
+  // Dependencies summary
+  lines.push(
+    `${c.green("Ready")}: ${depMetrics.readyToWork}  ` +
+      `${c.red("Blocked")}: ${depMetrics.blockedByDependencies}` +
+      (depMetrics.mostDependedOn
+        ? `  ${c.dim("Bottleneck:")} ${truncateStr(depMetrics.mostDependedOn.title, 15)}`
+        : "")
+  );
+
+  return box(lines.join("\n"), {
+    title: "Status",
+    borderColor: "cyan",
+    padding: 1,
+  });
+}
+
+/**
+ * Render Next Actions widget (top ready tasks)
+ */
+export function renderActionsWidget(tasks: Task[]): string {
+  const lines: string[] = [];
+
+  // Get top 4 ready tasks sorted by priority
+  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, 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("→")} ${truncateStr(task.title, 24)}`);
+      lines.push(`  ${formatPriority(task.priority)}, ${depsInfo}`);
+    }
+  } else {
+    lines.push(c.dim("No tasks ready"));
+  }
+
+  return box(lines.join("\n"), {
+    title: "Next Actions",
+    borderColor: "green",
+    padding: 1,
+  });
+}
+
+/**
+ * Render Inbox widget (pending items)
+ */
+export function renderInboxWidget(inboxItems: InboxItem[]): string | null {
+  const pendingItems = inboxItems.filter((item) => item.status === "pending");
+
+  if (pendingItems.length === 0) {
+    return null;
+  }
+
+  const lines: string[] = [];
+  lines.push(`${c.yellow("Pending")}: ${pendingItems.length} items`);
+  lines.push("");
+
+  // 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("○")} ${truncateStr(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: "Inbox",
+    borderColor: "yellow",
+    padding: 1,
+  });
+}
+
+/**
+ * Render Projects table
+ */
+export function renderProjectsTable(
+  projects: Project[],
+  getProjectTasks: (projectId: string) => Task[]
+): string {
+  if (projects.length === 0) {
+    return c.gray("No projects found.");
+  }
+
+  const rows: {
+    name: string;
+    progress: string;
+    ready: number;
+    blocked: number;
+    total: number;
+  }[] = [];
+
+  for (const project of projects.slice(0, 10)) {
+    const tasks = getProjectTasks(project.id);
+    const stats = calculateStats(tasks);
+    const depMetrics = calculateDependencyMetrics(tasks);
+    const activeTasks = stats.total - stats.cancelled;
+    const percent =
+      activeTasks > 0
+        ? Math.round((stats.completed / activeTasks) * 100)
+        : 0;
+
+    // Create mini progress bar
+    const barWidth = 8;
+    const filled = Math.round((percent / 100) * barWidth);
+    const empty = barWidth - filled;
+    const miniBar =
+      c.green("█".repeat(filled)) + c.gray("░".repeat(empty));
+
+    rows.push({
+      name: truncateStr(project.name, 20),
+      progress: `${miniBar} ${pad(String(percent) + "%", 4, "right")}`,
+      ready: depMetrics.readyToWork,
+      blocked: depMetrics.blockedByDependencies,
+      total: activeTasks,
+    });
+  }
+
+  const columns: TableColumn[] = [
+    { key: "name", header: "Project", width: 22 },
+    { key: "progress", header: "Progress", width: 16 },
+    { key: "total", header: "Tasks", width: 6, align: "right" },
+    {
+      key: "ready",
+      header: "Ready",
+      width: 6,
+      align: "right",
+      format: (v) => c.green(String(v)),
+    },
+    {
+      key: "blocked",
+      header: "Blocked",
+      width: 8,
+      align: "right",
+      format: (v) => (Number(v) > 0 ? c.red(String(v)) : c.gray(String(v))),
+    },
+  ];
+
+  return table(rows as unknown as Record<string, unknown>[], columns);
+}
+
+/**
+ * Render Tasks table for single project view
+ */
+export function renderTasksTable(tasks: Task[], limit: number = 10): string {
+  const activeTasks = tasks.filter(
+    (t) => t.status !== "completed" && t.status !== "cancelled"
+  );
+
+  if (activeTasks.length === 0) {
+    return c.gray("No active tasks.");
+  }
+
+  const displayTasks = activeTasks.slice(0, limit);
+
+  const columns: TableColumn[] = [
+    { key: "title", header: "Title", width: 40 },
+    {
+      key: "status",
+      header: "Status",
+      width: 12,
+      format: (v) => {
+        const icon = icons[v as Task["status"]] ?? icons.pending;
+        return `${icon} ${v}`;
+      },
+    },
+    {
+      key: "priority",
+      header: "Priority",
+      width: 10,
+      format: (v) => formatPriority(v as Task["priority"]),
+    },
+  ];
+
+  let result = table(
+    displayTasks as unknown as Record<string, unknown>[],
+    columns
+  );
+
+  if (activeTasks.length > limit) {
+    result += `\n${c.gray(`(+${activeTasks.length - limit} more tasks)`)}`;
+  }
+
+  return result;
+}
+
+// =============================================================================
+// Date Helpers
+// =============================================================================
+
+function getTodayTasks(tasks: Task[]): Task[] {
+  const today = new Date().toISOString().split("T")[0];
+  return tasks.filter(
+    (t) =>
+      t.dueDate === today &&
+      t.status !== "completed" &&
+      t.status !== "cancelled"
+  );
+}
+
+function getOverdueTasks(tasks: Task[]): Task[] {
+  const today = new Date().toISOString().split("T")[0] ?? "";
+  return tasks.filter(
+    (t) =>
+      t.dueDate &&
+      t.dueDate < today &&
+      t.status !== "completed" &&
+      t.status !== "cancelled"
+  );
+}
+
+// =============================================================================
+// Full Dashboard Renderer
+// =============================================================================
+
+export interface RenderDashboardOptions {
+  showBanner?: boolean | undefined;
+  showInbox?: boolean | undefined;
+  showProjects?: boolean | undefined;
+  showTasks?: boolean | undefined;
+  stripAnsiCodes?: boolean | undefined;
+}
+
+/**
+ * Render full dashboard (CLI and MCP compatible)
+ */
+export function renderDashboard(
+  data: DashboardData,
+  getProjectTasks: (projectId: string) => Task[],
+  options: RenderDashboardOptions = {}
+): string {
+  const {
+    showBanner = true,
+    showInbox = true,
+    showProjects = true,
+    showTasks = true,
+    stripAnsiCodes = false,
+  } = options;
+
+  const { tasks, projects, inboxItems = [], currentProject, version } = data;
+  const lines: string[] = [];
+
+  // Banner
+  if (showBanner) {
+    lines.push("");
+    lines.push(banner("TASK MCP"));
+    lines.push("");
+  }
+
+  // Project info header
+  const projectInfo = currentProject
+    ? `${c.bold("Project:")} ${currentProject.name}`
+    : `${c.bold("All Projects")} (${projects.length} projects)`;
+
+  if (version) {
+    lines.push(c.dim(`v${version}  ${projectInfo}`));
+  } else {
+    lines.push(projectInfo);
+  }
+  lines.push("");
+
+  // Status + Actions widgets side by side
+  const statusWidget = renderStatusWidget(tasks, projects);
+  const actionsWidget = renderActionsWidget(tasks);
+  lines.push(sideBySide([statusWidget, actionsWidget], 2));
+  lines.push("");
+
+  // Inbox widget
+  if (showInbox && inboxItems.length > 0) {
+    const inboxWidget = renderInboxWidget(inboxItems);
+    if (inboxWidget) {
+      lines.push(inboxWidget);
+      lines.push("");
+    }
+  }
+
+  // Projects table (only for all-projects view)
+  if (showProjects && !currentProject && projects.length > 1) {
+    lines.push(c.bold("Projects"));
+    lines.push("");
+    lines.push(renderProjectsTable(projects, getProjectTasks));
+    lines.push("");
+  }
+
+  // Tasks table (for single project view)
+  if (showTasks && (currentProject || projects.length === 1)) {
+    const activeTasks = tasks.filter(
+      (t) => t.status !== "completed" && t.status !== "cancelled"
+    );
+    if (activeTasks.length > 0) {
+      lines.push(c.bold(`Tasks (${activeTasks.length})`));
+      lines.push("");
+      lines.push(renderTasksTable(tasks));
+    }
+  }
+
+  lines.push("");
+
+  const output = lines.join("\n");
+  return stripAnsiCodes ? stripAnsi(output) : output;
+}
+
+/**
+ * Render single project dashboard
+ */
+export function renderProjectDashboard(
+  project: Project,
+  tasks: Task[],
+  options: { stripAnsiCodes?: boolean; version?: string } = {}
+): string {
+  const data: DashboardData = {
+    tasks,
+    projects: [project],
+    currentProject: project,
+    version: options.version,
+  };
+
+  return renderDashboard(
+    data,
+    () => tasks,
+    {
+      showBanner: true,
+      showInbox: false,
+      showProjects: false,
+      showTasks: true,
+      stripAnsiCodes: options.stripAnsiCodes,
+    }
+  );
+}
+
+/**
+ * Render global dashboard (all projects)
+ */
+export function renderGlobalDashboard(
+  projects: Project[],
+  allTasks: Task[],
+  inboxItems: InboxItem[],
+  getProjectTasks: (projectId: string) => Task[],
+  options: { stripAnsiCodes?: boolean; version?: string } = {}
+): string {
+  const data: DashboardData = {
+    tasks: allTasks,
+    projects,
+    inboxItems,
+    version: options.version,
+  };
+
+  return renderDashboard(data, getProjectTasks, {
+    showBanner: true,
+    showInbox: true,
+    showProjects: true,
+    showTasks: projects.length === 1,
+    stripAnsiCodes: options.stripAnsiCodes,
+  });
+}

package/src/utils/index.ts

@@ -45,3 +45,65 @@ export {
   truncate,
   summarizeList,
 } from "./projection.js";
+
+// Dashboard renderer
+export {
+  calculateStats,
+  calculateDependencyMetrics,
+  renderStatusWidget,
+  renderActionsWidget,
+  renderInboxWidget,
+  renderProjectsTable,
+  renderTasksTable,
+  renderDashboard,
+  renderProjectDashboard,
+  renderGlobalDashboard,
+  type DashboardStats,
+  type DependencyMetrics,
+  type DashboardData,
+  type RenderDashboardOptions,
+} from "./dashboard-renderer.js";
+
+// Terminal UI utilities
+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 "./terminal-ui.js";