fix: UI list and show (#1210)

apps/cli/src/ui/components/dashboard.component.ts

@@ -0,0 +1,567 @@
+/**
+ * @fileoverview Dashboard components for Task Master CLI
+ * Displays project statistics and dependency information
+ */
+
+import chalk from 'chalk';
+import boxen from 'boxen';
+import type { Task, TaskPriority } from '@tm/core/types';
+
+/**
+ * Statistics for task collection
+ */
+export interface TaskStatistics {
+	total: number;
+	done: number;
+	inProgress: number;
+	pending: number;
+	blocked: number;
+	deferred: number;
+	cancelled: number;
+	review?: number;
+	completionPercentage: number;
+}
+
+/**
+ * Statistics for dependencies
+ */
+export interface DependencyStatistics {
+	tasksWithNoDeps: number;
+	tasksReadyToWork: number;
+	tasksBlockedByDeps: number;
+	mostDependedOnTaskId?: number;
+	mostDependedOnCount?: number;
+	avgDependenciesPerTask: number;
+}
+
+/**
+ * Next task information
+ */
+export interface NextTaskInfo {
+	id: string | number;
+	title: string;
+	priority?: TaskPriority;
+	dependencies?: (string | number)[];
+	complexity?: number | string;
+}
+
+/**
+ * Status breakdown for progress bars
+ */
+export interface StatusBreakdown {
+	'in-progress'?: number;
+	pending?: number;
+	blocked?: number;
+	deferred?: number;
+	cancelled?: number;
+	review?: number;
+}
+
+/**
+ * Create a progress bar with color-coded status segments
+ */
+function createProgressBar(
+	completionPercentage: number,
+	width: number = 30,
+	statusBreakdown?: StatusBreakdown
+): string {
+	// If no breakdown provided, use simple green bar
+	if (!statusBreakdown) {
+		const filled = Math.round((completionPercentage / 100) * width);
+		const empty = width - filled;
+		return chalk.green('█').repeat(filled) + chalk.gray('░').repeat(empty);
+	}
+
+	// Build the bar with different colored sections
+	// Order matches the status display: Done, Cancelled, Deferred, In Progress, Review, Pending, Blocked
+	let bar = '';
+	let charsUsed = 0;
+
+	// 1. Green filled blocks for completed tasks (done)
+	const completedChars = Math.round((completionPercentage / 100) * width);
+	if (completedChars > 0) {
+		bar += chalk.green('█').repeat(completedChars);
+		charsUsed += completedChars;
+	}
+
+	// 2. Gray filled blocks for cancelled (won't be done)
+	if (statusBreakdown.cancelled && charsUsed < width) {
+		const cancelledChars = Math.round(
+			(statusBreakdown.cancelled / 100) * width
+		);
+		const actualChars = Math.min(cancelledChars, width - charsUsed);
+		if (actualChars > 0) {
+			bar += chalk.gray('█').repeat(actualChars);
+			charsUsed += actualChars;
+		}
+	}
+
+	// 3. Gray filled blocks for deferred (won't be done now)
+	if (statusBreakdown.deferred && charsUsed < width) {
+		const deferredChars = Math.round((statusBreakdown.deferred / 100) * width);
+		const actualChars = Math.min(deferredChars, width - charsUsed);
+		if (actualChars > 0) {
+			bar += chalk.gray('█').repeat(actualChars);
+			charsUsed += actualChars;
+		}
+	}
+
+	// 4. Blue filled blocks for in-progress (actively working)
+	if (statusBreakdown['in-progress'] && charsUsed < width) {
+		const inProgressChars = Math.round(
+			(statusBreakdown['in-progress'] / 100) * width
+		);
+		const actualChars = Math.min(inProgressChars, width - charsUsed);
+		if (actualChars > 0) {
+			bar += chalk.blue('█').repeat(actualChars);
+			charsUsed += actualChars;
+		}
+	}
+
+	// 5. Magenta empty blocks for review (almost done)
+	if (statusBreakdown.review && charsUsed < width) {
+		const reviewChars = Math.round((statusBreakdown.review / 100) * width);
+		const actualChars = Math.min(reviewChars, width - charsUsed);
+		if (actualChars > 0) {
+			bar += chalk.magenta('░').repeat(actualChars);
+			charsUsed += actualChars;
+		}
+	}
+
+	// 6. Yellow empty blocks for pending (ready to start)
+	if (statusBreakdown.pending && charsUsed < width) {
+		const pendingChars = Math.round((statusBreakdown.pending / 100) * width);
+		const actualChars = Math.min(pendingChars, width - charsUsed);
+		if (actualChars > 0) {
+			bar += chalk.yellow('░').repeat(actualChars);
+			charsUsed += actualChars;
+		}
+	}
+
+	// 7. Red empty blocks for blocked (can't start yet)
+	if (statusBreakdown.blocked && charsUsed < width) {
+		const blockedChars = Math.round((statusBreakdown.blocked / 100) * width);
+		const actualChars = Math.min(blockedChars, width - charsUsed);
+		if (actualChars > 0) {
+			bar += chalk.red('░').repeat(actualChars);
+			charsUsed += actualChars;
+		}
+	}
+
+	// Fill any remaining space with gray empty yellow blocks
+	if (charsUsed < width) {
+		bar += chalk.yellow('░').repeat(width - charsUsed);
+	}
+
+	return bar;
+}
+
+/**
+ * Calculate task statistics from a list of tasks
+ */
+export function calculateTaskStatistics(tasks: Task[]): TaskStatistics {
+	const stats: TaskStatistics = {
+		total: tasks.length,
+		done: 0,
+		inProgress: 0,
+		pending: 0,
+		blocked: 0,
+		deferred: 0,
+		cancelled: 0,
+		review: 0,
+		completionPercentage: 0
+	};
+
+	tasks.forEach((task) => {
+		switch (task.status) {
+			case 'done':
+				stats.done++;
+				break;
+			case 'in-progress':
+				stats.inProgress++;
+				break;
+			case 'pending':
+				stats.pending++;
+				break;
+			case 'blocked':
+				stats.blocked++;
+				break;
+			case 'deferred':
+				stats.deferred++;
+				break;
+			case 'cancelled':
+				stats.cancelled++;
+				break;
+			case 'review':
+				stats.review = (stats.review || 0) + 1;
+				break;
+		}
+	});
+
+	stats.completionPercentage =
+		stats.total > 0 ? Math.round((stats.done / stats.total) * 100) : 0;
+
+	return stats;
+}
+
+/**
+ * Calculate subtask statistics from tasks
+ */
+export function calculateSubtaskStatistics(tasks: Task[]): TaskStatistics {
+	const stats: TaskStatistics = {
+		total: 0,
+		done: 0,
+		inProgress: 0,
+		pending: 0,
+		blocked: 0,
+		deferred: 0,
+		cancelled: 0,
+		review: 0,
+		completionPercentage: 0
+	};
+
+	tasks.forEach((task) => {
+		if (task.subtasks && task.subtasks.length > 0) {
+			task.subtasks.forEach((subtask) => {
+				stats.total++;
+				switch (subtask.status) {
+					case 'done':
+						stats.done++;
+						break;
+					case 'in-progress':
+						stats.inProgress++;
+						break;
+					case 'pending':
+						stats.pending++;
+						break;
+					case 'blocked':
+						stats.blocked++;
+						break;
+					case 'deferred':
+						stats.deferred++;
+						break;
+					case 'cancelled':
+						stats.cancelled++;
+						break;
+					case 'review':
+						stats.review = (stats.review || 0) + 1;
+						break;
+				}
+			});
+		}
+	});
+
+	stats.completionPercentage =
+		stats.total > 0 ? Math.round((stats.done / stats.total) * 100) : 0;
+
+	return stats;
+}
+
+/**
+ * Calculate dependency statistics
+ */
+export function calculateDependencyStatistics(
+	tasks: Task[]
+): DependencyStatistics {
+	const completedTaskIds = new Set(
+		tasks.filter((t) => t.status === 'done').map((t) => t.id)
+	);
+
+	const tasksWithNoDeps = tasks.filter(
+		(t) =>
+			t.status !== 'done' && (!t.dependencies || t.dependencies.length === 0)
+	).length;
+
+	const tasksWithAllDepsSatisfied = tasks.filter(
+		(t) =>
+			t.status !== 'done' &&
+			t.dependencies &&
+			t.dependencies.length > 0 &&
+			t.dependencies.every((depId) => completedTaskIds.has(depId))
+	).length;
+
+	const tasksBlockedByDeps = tasks.filter(
+		(t) =>
+			t.status !== 'done' &&
+			t.dependencies &&
+			t.dependencies.length > 0 &&
+			!t.dependencies.every((depId) => completedTaskIds.has(depId))
+	).length;
+
+	// Calculate most depended-on task
+	const dependencyCount: Record<string, number> = {};
+	tasks.forEach((task) => {
+		if (task.dependencies && task.dependencies.length > 0) {
+			task.dependencies.forEach((depId) => {
+				const key = String(depId);
+				dependencyCount[key] = (dependencyCount[key] || 0) + 1;
+			});
+		}
+	});
+
+	let mostDependedOnTaskId: number | undefined;
+	let mostDependedOnCount = 0;
+
+	for (const [taskId, count] of Object.entries(dependencyCount)) {
+		if (count > mostDependedOnCount) {
+			mostDependedOnCount = count;
+			mostDependedOnTaskId = parseInt(taskId);
+		}
+	}
+
+	// Calculate average dependencies
+	const totalDependencies = tasks.reduce(
+		(sum, task) => sum + (task.dependencies ? task.dependencies.length : 0),
+		0
+	);
+	const avgDependenciesPerTask =
+		tasks.length > 0 ? totalDependencies / tasks.length : 0;
+
+	return {
+		tasksWithNoDeps,
+		tasksReadyToWork: tasksWithNoDeps + tasksWithAllDepsSatisfied,
+		tasksBlockedByDeps,
+		mostDependedOnTaskId,
+		mostDependedOnCount,
+		avgDependenciesPerTask
+	};
+}
+
+/**
+ * Get priority counts
+ */
+export function getPriorityBreakdown(
+	tasks: Task[]
+): Record<TaskPriority, number> {
+	const breakdown: Record<TaskPriority, number> = {
+		critical: 0,
+		high: 0,
+		medium: 0,
+		low: 0
+	};
+
+	tasks.forEach((task) => {
+		const priority = task.priority || 'medium';
+		breakdown[priority]++;
+	});
+
+	return breakdown;
+}
+
+/**
+ * Calculate status breakdown as percentages
+ */
+function calculateStatusBreakdown(stats: TaskStatistics): StatusBreakdown {
+	if (stats.total === 0) return {};
+
+	return {
+		'in-progress': (stats.inProgress / stats.total) * 100,
+		pending: (stats.pending / stats.total) * 100,
+		blocked: (stats.blocked / stats.total) * 100,
+		deferred: (stats.deferred / stats.total) * 100,
+		cancelled: (stats.cancelled / stats.total) * 100,
+		review: ((stats.review || 0) / stats.total) * 100
+	};
+}
+
+/**
+ * Format status counts in the correct order with colors
+ * @param stats - The statistics object containing counts
+ * @param isSubtask - Whether this is for subtasks (affects "Done" vs "Completed" label)
+ */
+function formatStatusLine(
+	stats: TaskStatistics,
+	isSubtask: boolean = false
+): string {
+	const parts: string[] = [];
+
+	// Order: Done, Cancelled, Deferred, In Progress, Review, Pending, Blocked
+	if (isSubtask) {
+		parts.push(`Completed: ${chalk.green(`${stats.done}/${stats.total}`)}`);
+	} else {
+		parts.push(`Done: ${chalk.green(stats.done)}`);
+	}
+
+	parts.push(`Cancelled: ${chalk.gray(stats.cancelled)}`);
+	parts.push(`Deferred: ${chalk.gray(stats.deferred)}`);
+
+	// Add line break for second row
+	const firstLine = parts.join('  ');
+	parts.length = 0;
+
+	parts.push(`In Progress: ${chalk.blue(stats.inProgress)}`);
+	parts.push(`Review: ${chalk.magenta(stats.review || 0)}`);
+	parts.push(`Pending: ${chalk.yellow(stats.pending)}`);
+	parts.push(`Blocked: ${chalk.red(stats.blocked)}`);
+
+	const secondLine = parts.join('  ');
+
+	return firstLine + '\n' + secondLine;
+}
+
+/**
+ * Display the project dashboard box
+ */
+export function displayProjectDashboard(
+	taskStats: TaskStatistics,
+	subtaskStats: TaskStatistics,
+	priorityBreakdown: Record<TaskPriority, number>
+): string {
+	// Calculate status breakdowns using the helper function
+	const taskStatusBreakdown = calculateStatusBreakdown(taskStats);
+	const subtaskStatusBreakdown = calculateStatusBreakdown(subtaskStats);
+
+	// Create progress bars with the breakdowns
+	const taskProgressBar = createProgressBar(
+		taskStats.completionPercentage,
+		30,
+		taskStatusBreakdown
+	);
+	const subtaskProgressBar = createProgressBar(
+		subtaskStats.completionPercentage,
+		30,
+		subtaskStatusBreakdown
+	);
+
+	const taskPercentage = `${taskStats.completionPercentage}% ${taskStats.done}/${taskStats.total}`;
+	const subtaskPercentage = `${subtaskStats.completionPercentage}% ${subtaskStats.done}/${subtaskStats.total}`;
+
+	const content =
+		chalk.white.bold('Project Dashboard') +
+		'\n' +
+		`Tasks Progress: ${taskProgressBar} ${chalk.yellow(taskPercentage)}\n` +
+		formatStatusLine(taskStats, false) +
+		'\n\n' +
+		`Subtasks Progress: ${subtaskProgressBar} ${chalk.cyan(subtaskPercentage)}\n` +
+		formatStatusLine(subtaskStats, true) +
+		'\n\n' +
+		chalk.cyan.bold('Priority Breakdown:') +
+		'\n' +
+		`${chalk.red('•')} ${chalk.white('High priority:')} ${priorityBreakdown.high}\n` +
+		`${chalk.yellow('•')} ${chalk.white('Medium priority:')} ${priorityBreakdown.medium}\n` +
+		`${chalk.green('•')} ${chalk.white('Low priority:')} ${priorityBreakdown.low}`;
+
+	return content;
+}
+
+/**
+ * Display the dependency dashboard box
+ */
+export function displayDependencyDashboard(
+	depStats: DependencyStatistics,
+	nextTask?: NextTaskInfo
+): string {
+	const content =
+		chalk.white.bold('Dependency Status & Next Task') +
+		'\n' +
+		chalk.cyan.bold('Dependency Metrics:') +
+		'\n' +
+		`${chalk.green('•')} ${chalk.white('Tasks with no dependencies:')} ${depStats.tasksWithNoDeps}\n` +
+		`${chalk.green('•')} ${chalk.white('Tasks ready to work on:')} ${depStats.tasksReadyToWork}\n` +
+		`${chalk.yellow('•')} ${chalk.white('Tasks blocked by dependencies:')} ${depStats.tasksBlockedByDeps}\n` +
+		`${chalk.magenta('•')} ${chalk.white('Most depended-on task:')} ${
+			depStats.mostDependedOnTaskId
+				? chalk.cyan(
+						`#${depStats.mostDependedOnTaskId} (${depStats.mostDependedOnCount} dependents)`
+					)
+				: chalk.gray('None')
+		}\n` +
+		`${chalk.blue('•')} ${chalk.white('Avg dependencies per task:')} ${depStats.avgDependenciesPerTask.toFixed(1)}\n\n` +
+		chalk.cyan.bold('Next Task to Work On:') +
+		'\n' +
+		`ID: ${nextTask ? chalk.cyan(String(nextTask.id)) : chalk.gray('N/A')} - ${
+			nextTask
+				? chalk.white.bold(nextTask.title)
+				: chalk.yellow('No task available')
+		}\n` +
+		`Priority: ${nextTask?.priority || chalk.gray('N/A')}  Dependencies: ${
+			nextTask?.dependencies?.length
+				? chalk.cyan(nextTask.dependencies.join(', '))
+				: chalk.gray('None')
+		}\n` +
+		`Complexity: ${nextTask?.complexity || chalk.gray('N/A')}`;
+
+	return content;
+}
+
+/**
+ * Display dashboard boxes side by side or stacked
+ */
+export function displayDashboards(
+	taskStats: TaskStatistics,
+	subtaskStats: TaskStatistics,
+	priorityBreakdown: Record<TaskPriority, number>,
+	depStats: DependencyStatistics,
+	nextTask?: NextTaskInfo
+): void {
+	const projectDashboardContent = displayProjectDashboard(
+		taskStats,
+		subtaskStats,
+		priorityBreakdown
+	);
+	const dependencyDashboardContent = displayDependencyDashboard(
+		depStats,
+		nextTask
+	);
+
+	// Get terminal width
+	const terminalWidth = process.stdout.columns || 80;
+	const minDashboardWidth = 50;
+	const minDependencyWidth = 50;
+	const totalMinWidth = minDashboardWidth + minDependencyWidth + 4;
+
+	// If terminal is wide enough, show side by side
+	if (terminalWidth >= totalMinWidth) {
+		const halfWidth = Math.floor(terminalWidth / 2);
+		const boxContentWidth = halfWidth - 4;
+
+		const dashboardBox = boxen(projectDashboardContent, {
+			padding: 1,
+			borderColor: 'blue',
+			borderStyle: 'round',
+			width: boxContentWidth,
+			dimBorder: false
+		});
+
+		const dependencyBox = boxen(dependencyDashboardContent, {
+			padding: 1,
+			borderColor: 'magenta',
+			borderStyle: 'round',
+			width: boxContentWidth,
+			dimBorder: false
+		});
+
+		// Create side-by-side layout
+		const dashboardLines = dashboardBox.split('\n');
+		const dependencyLines = dependencyBox.split('\n');
+		const maxHeight = Math.max(dashboardLines.length, dependencyLines.length);
+
+		const combinedLines = [];
+		for (let i = 0; i < maxHeight; i++) {
+			const dashLine = i < dashboardLines.length ? dashboardLines[i] : '';
+			const depLine = i < dependencyLines.length ? dependencyLines[i] : '';
+			const paddedDashLine = dashLine.padEnd(halfWidth, ' ');
+			combinedLines.push(paddedDashLine + depLine);
+		}
+
+		console.log(combinedLines.join('\n'));
+	} else {
+		// Show stacked vertically
+		const dashboardBox = boxen(projectDashboardContent, {
+			padding: 1,
+			borderColor: 'blue',
+			borderStyle: 'round',
+			margin: { top: 0, bottom: 1 }
+		});
+
+		const dependencyBox = boxen(dependencyDashboardContent, {
+			padding: 1,
+			borderColor: 'magenta',
+			borderStyle: 'round',
+			margin: { top: 0, bottom: 1 }
+		});
+
+		console.log(dashboardBox);
+		console.log(dependencyBox);
+	}
+}

apps/cli/src/ui/components/header.component.ts

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Task Master header component
+ * Displays the banner, version, project info, and file path
+ */
+
+import chalk from 'chalk';
+import figlet from 'figlet';
+import gradient from 'gradient-string';
+
+/**
+ * Header configuration options
+ */
+export interface HeaderOptions {
+	title?: string;
+	tag?: string;
+	filePath?: string;
+}
+
+/**
+ * Display the Task Master header with project info
+ */
+export function displayHeader(options: HeaderOptions = {}): void {
+	const { filePath, tag } = options;
+
+	// Display tag and file path info
+	if (tag) {
+		let tagInfo = '';
+
+		if (tag && tag !== 'master') {
+			tagInfo = `🏷 tag: ${chalk.cyan(tag)}`;
+		} else {
+			tagInfo = `🏷 tag: ${chalk.cyan('master')}`;
+		}
+
+		console.log(tagInfo);
+
+		if (filePath) {
+			// Convert to absolute path if it's relative
+			const absolutePath = filePath.startsWith('/')
+				? filePath
+				: `${process.cwd()}/${filePath}`;
+			console.log(`Listing tasks from: ${chalk.dim(absolutePath)}`);
+		}
+
+		console.log(); // Empty line for spacing
+	}
+}

apps/cli/src/ui/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @fileoverview UI components exports
+ */
+
+export * from './header.component.js';
+export * from './dashboard.component.js';
+export * from './next-task.component.js';
+export * from './suggested-steps.component.js';
+export * from './task-detail.component.js';

apps/cli/src/ui/components/next-task.component.ts

@@ -0,0 +1,134 @@
+/**
+ * @fileoverview Next task recommendation component
+ * Displays detailed information about the recommended next task
+ */
+
+import chalk from 'chalk';
+import boxen from 'boxen';
+import type { Task } from '@tm/core/types';
+
+/**
+ * Next task display options
+ */
+export interface NextTaskDisplayOptions {
+	id: string | number;
+	title: string;
+	priority?: string;
+	status?: string;
+	dependencies?: (string | number)[];
+	description?: string;
+}
+
+/**
+ * Display the recommended next task section
+ */
+export function displayRecommendedNextTask(
+	task: NextTaskDisplayOptions | undefined
+): void {
+	if (!task) {
+		// If no task available, show a message
+		console.log(
+			boxen(
+				chalk.yellow(
+					'No tasks available to work on. All tasks are either completed, blocked by dependencies, or in progress.'
+				),
+				{
+					padding: 1,
+					borderStyle: 'round',
+					borderColor: 'yellow',
+					title: '⚠ NO TASKS AVAILABLE ⚠',
+					titleAlignment: 'center'
+				}
+			)
+		);
+		return;
+	}
+
+	// Build the content for the next task box
+	const content = [];
+
+	// Task header with ID and title
+	content.push(
+		`🔥 ${chalk.hex('#FF8800').bold('Next Task to Work On:')} ${chalk.yellow(`#${task.id}`)}${chalk.hex('#FF8800').bold(` - ${task.title}`)}`
+	);
+	content.push('');
+
+	// Priority and Status line
+	const statusLine = [];
+	if (task.priority) {
+		const priorityColor =
+			task.priority === 'high'
+				? chalk.red
+				: task.priority === 'medium'
+					? chalk.yellow
+					: chalk.gray;
+		statusLine.push(`Priority: ${priorityColor.bold(task.priority)}`);
+	}
+	if (task.status) {
+		const statusDisplay =
+			task.status === 'pending'
+				? chalk.yellow('○ pending')
+				: task.status === 'in-progress'
+					? chalk.blue('▶ in-progress')
+					: chalk.gray(task.status);
+		statusLine.push(`Status: ${statusDisplay}`);
+	}
+	content.push(statusLine.join('  '));
+
+	// Dependencies
+	const depsDisplay =
+		!task.dependencies || task.dependencies.length === 0
+			? chalk.gray('None')
+			: chalk.cyan(task.dependencies.join(', '));
+	content.push(`Dependencies: ${depsDisplay}`);
+
+	// Description if available
+	if (task.description) {
+		content.push('');
+		content.push(`Description: ${chalk.white(task.description)}`);
+	}
+
+	// Action commands
+	content.push('');
+	content.push(
+		`${chalk.cyan('Start working:')} ${chalk.yellow(`task-master set-status --id=${task.id} --status=in-progress`)}`
+	);
+	content.push(
+		`${chalk.cyan('View details:')} ${chalk.yellow(`task-master show ${task.id}`)}`
+	);
+
+	// Display in a styled box with orange border
+	console.log(
+		boxen(content.join('\n'), {
+			padding: 1,
+			margin: { top: 1, bottom: 1 },
+			borderStyle: 'round',
+			borderColor: '#FFA500', // Orange color
+			title: chalk.hex('#FFA500')('⚡ RECOMMENDED NEXT TASK ⚡'),
+			titleAlignment: 'center',
+			width: process.stdout.columns * 0.97,
+			fullscreen: false
+		})
+	);
+}
+
+/**
+ * Get task description from the full task object
+ */
+export function getTaskDescription(task: Task): string | undefined {
+	// Try to get description from the task
+	// This could be from task.description or the first line of task.details
+	if ('description' in task && task.description) {
+		return task.description as string;
+	}
+
+	if ('details' in task && task.details) {
+		// Take first sentence or line from details
+		const details = task.details as string;
+		const firstLine = details.split('\n')[0];
+		const firstSentence = firstLine.split('.')[0];
+		return firstSentence;
+	}
+
+	return undefined;
+}

apps/cli/src/ui/components/suggested-steps.component.ts

@@ -0,0 +1,31 @@
+/**
+ * @fileoverview Suggested next steps component
+ * Displays helpful command suggestions at the end of the list
+ */
+
+import chalk from 'chalk';
+import boxen from 'boxen';
+
+/**
+ * Display suggested next steps section
+ */
+export function displaySuggestedNextSteps(): void {
+	const steps = [
+		`${chalk.cyan('1.')} Run ${chalk.yellow('task-master next')} to see what to work on next`,
+		`${chalk.cyan('2.')} Run ${chalk.yellow('task-master expand --id=<id>')} to break down a task into subtasks`,
+		`${chalk.cyan('3.')} Run ${chalk.yellow('task-master set-status --id=<id> --status=done')} to mark a task as complete`
+	];
+
+	console.log(
+		boxen(
+			chalk.white.bold('Suggested Next Steps:') + '\n\n' + steps.join('\n'),
+			{
+				padding: 1,
+				margin: { top: 0, bottom: 1 },
+				borderStyle: 'round',
+				borderColor: 'gray',
+				width: process.stdout.columns * 0.97
+			}
+		)
+	);
+}

apps/cli/src/ui/components/task-detail.component.ts

@@ -0,0 +1,264 @@
+/**
+ * @fileoverview Task detail component for show command
+ * Displays detailed task information in a structured format
+ */
+
+import chalk from 'chalk';
+import boxen from 'boxen';
+import Table from 'cli-table3';
+import { marked, MarkedExtension } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import type { Task } from '@tm/core/types';
+import { getStatusWithColor, getPriorityWithColor } from '../../utils/ui.js';
+
+// Configure marked to use terminal renderer with subtle colors
+marked.use(
+	markedTerminal({
+		// More subtle colors that match the overall design
+		code: (code: string) => {
+			// Custom code block handler to preserve formatting
+			return code
+				.split('\n')
+				.map((line) => '    ' + chalk.cyan(line))
+				.join('\n');
+		},
+		blockquote: chalk.gray.italic,
+		html: chalk.gray,
+		heading: chalk.white.bold, // White bold for headings
+		hr: chalk.gray,
+		listitem: chalk.white, // White for list items
+		paragraph: chalk.white, // White for paragraphs (default text color)
+		strong: chalk.white.bold, // White bold for strong text
+		em: chalk.white.italic, // White italic for emphasis
+		codespan: chalk.cyan, // Cyan for inline code (no background)
+		del: chalk.dim.strikethrough,
+		link: chalk.blue,
+		href: chalk.blue.underline,
+		// Add more explicit code block handling
+		showSectionPrefix: false,
+		unescape: true,
+		emoji: false,
+		// Try to preserve whitespace in code blocks
+		tab: 4,
+		width: 120
+	}) as MarkedExtension
+);
+
+// Also set marked options to preserve whitespace
+marked.setOptions({
+	breaks: true,
+	gfm: true
+});
+
+/**
+ * Display the task header with tag
+ */
+export function displayTaskHeader(
+	taskId: string | number,
+	title: string
+): void {
+	// Display task header box
+	console.log(
+		boxen(chalk.white.bold(`Task: #${taskId} - ${title}`), {
+			padding: { top: 0, bottom: 0, left: 1, right: 1 },
+			borderColor: 'blue',
+			borderStyle: 'round'
+		})
+	);
+}
+
+/**
+ * Display task properties in a table format
+ */
+export function displayTaskProperties(task: Task): void {
+	const terminalWidth = process.stdout.columns * 0.95 || 100;
+	// Create table for task properties - simple 2-column layout
+	const table = new Table({
+		head: [],
+		style: {
+			head: [],
+			border: ['grey']
+		},
+		colWidths: [
+			Math.floor(terminalWidth * 0.2),
+			Math.floor(terminalWidth * 0.8)
+		],
+		wordWrap: true
+	});
+
+	const deps =
+		task.dependencies && task.dependencies.length > 0
+			? task.dependencies.map((d) => String(d)).join(', ')
+			: 'None';
+
+	// Build the left column (labels) and right column (values)
+	const labels = [
+		chalk.cyan('ID:'),
+		chalk.cyan('Title:'),
+		chalk.cyan('Status:'),
+		chalk.cyan('Priority:'),
+		chalk.cyan('Dependencies:'),
+		chalk.cyan('Complexity:'),
+		chalk.cyan('Description:')
+	].join('\n');
+
+	const values = [
+		String(task.id),
+		task.title,
+		getStatusWithColor(task.status),
+		getPriorityWithColor(task.priority),
+		deps,
+		'N/A',
+		task.description || ''
+	].join('\n');
+
+	table.push([labels, values]);
+
+	console.log(table.toString());
+}
+
+/**
+ * Display implementation details in a box
+ */
+export function displayImplementationDetails(details: string): void {
+	// Handle all escaped characters properly
+	const cleanDetails = details
+		.replace(/\\n/g, '\n') // Convert \n to actual newlines
+		.replace(/\\t/g, '\t') // Convert \t to actual tabs
+		.replace(/\\"/g, '"') // Convert \" to actual quotes
+		.replace(/\\\\/g, '\\'); // Convert \\ to single backslash
+
+	const terminalWidth = process.stdout.columns * 0.95 || 100;
+
+	// Parse markdown to terminal-friendly format
+	const markdownResult = marked(cleanDetails);
+	const formattedDetails =
+		typeof markdownResult === 'string' ? markdownResult.trim() : cleanDetails; // Fallback to original if Promise
+
+	console.log(
+		boxen(
+			chalk.white.bold('Implementation Details:') + '\n\n' + formattedDetails,
+			{
+				padding: 1,
+				borderStyle: 'round',
+				borderColor: 'cyan', // Changed to cyan to match the original
+				width: terminalWidth // Fixed width to match the original
+			}
+		)
+	);
+}
+
+/**
+ * Display test strategy in a box
+ */
+export function displayTestStrategy(testStrategy: string): void {
+	// Handle all escaped characters properly (same as implementation details)
+	const cleanStrategy = testStrategy
+		.replace(/\\n/g, '\n') // Convert \n to actual newlines
+		.replace(/\\t/g, '\t') // Convert \t to actual tabs
+		.replace(/\\"/g, '"') // Convert \" to actual quotes
+		.replace(/\\\\/g, '\\'); // Convert \\ to single backslash
+
+	const terminalWidth = process.stdout.columns * 0.95 || 100;
+
+	// Parse markdown to terminal-friendly format (same as implementation details)
+	const markdownResult = marked(cleanStrategy);
+	const formattedStrategy =
+		typeof markdownResult === 'string' ? markdownResult.trim() : cleanStrategy; // Fallback to original if Promise
+
+	console.log(
+		boxen(chalk.white.bold('Test Strategy:') + '\n\n' + formattedStrategy, {
+			padding: 1,
+			borderStyle: 'round',
+			borderColor: 'cyan', // Changed to cyan to match implementation details
+			width: terminalWidth
+		})
+	);
+}
+
+/**
+ * Display subtasks in a table format
+ */
+export function displaySubtasks(
+	subtasks: Array<{
+		id: string | number;
+		title: string;
+		status: any;
+		description?: string;
+		dependencies?: string[];
+	}>,
+	parentId: string | number
+): void {
+	const terminalWidth = process.stdout.columns * 0.95 || 100;
+	// Display subtasks header
+	console.log(
+		boxen(chalk.magenta.bold('Subtasks'), {
+			padding: { top: 0, bottom: 0, left: 1, right: 1 },
+			borderColor: 'magenta',
+			borderStyle: 'round',
+			margin: { top: 1, bottom: 0 }
+		})
+	);
+
+	// Create subtasks table
+	const table = new Table({
+		head: [
+			chalk.magenta.bold('ID'),
+			chalk.magenta.bold('Status'),
+			chalk.magenta.bold('Title'),
+			chalk.magenta.bold('Deps')
+		],
+		style: {
+			head: [],
+			border: ['grey']
+		},
+		colWidths: [
+			Math.floor(terminalWidth * 0.1),
+			Math.floor(terminalWidth * 0.15),
+			Math.floor(terminalWidth * 0.6),
+			Math.floor(terminalWidth * 0.15)
+		],
+		wordWrap: true
+	});
+
+	subtasks.forEach((subtask) => {
+		const subtaskId = `${parentId}.${subtask.id}`;
+
+		// Format dependencies
+		const deps =
+			subtask.dependencies && subtask.dependencies.length > 0
+				? subtask.dependencies.join(', ')
+				: 'None';
+
+		table.push([
+			subtaskId,
+			getStatusWithColor(subtask.status),
+			subtask.title,
+			deps
+		]);
+	});
+
+	console.log(table.toString());
+}
+
+/**
+ * Display suggested actions
+ */
+export function displaySuggestedActions(taskId: string | number): void {
+	console.log(
+		boxen(
+			chalk.white.bold('Suggested Actions:') +
+				'\n\n' +
+				`${chalk.cyan('1.')} Run ${chalk.yellow(`task-master set-status --id=${taskId} --status=in-progress`)} to start working\n` +
+				`${chalk.cyan('2.')} Run ${chalk.yellow(`task-master expand --id=${taskId}`)} to break down into subtasks\n` +
+				`${chalk.cyan('3.')} Run ${chalk.yellow(`task-master update-task --id=${taskId} --prompt="..."`)} to update details`,
+			{
+				padding: 1,
+				margin: { top: 1 },
+				borderStyle: 'round',
+				borderColor: 'green',
+				width: process.stdout.columns * 0.95 || 100
+			}
+		)
+	);
+}