backlog.md 0.1.0

package/src/ui/task-viewer.ts

@@ -0,0 +1,640 @@
+/* Enhanced task viewer for displaying task details in a structured format */
+
+import { createRequire } from "node:module";
+import { stdin as input, stdout as output } from "node:process";
+import { Core } from "../core/backlog.ts";
+import { parseMarkdown } from "../markdown/parser.ts";
+import type { Task } from "../types/index.ts";
+import { formatChecklistItem, parseCheckboxLine } from "./checklist.ts";
+import { transformCodePaths, transformCodePathsPlain } from "./code-path.ts";
+import { formatHeading } from "./heading.ts";
+import { formatStatusWithIcon, getStatusColor, getStatusIcon } from "./status-icon.ts";
+import { TaskList } from "./task-list.ts";
+
+/**
+ * Extract only the Description section content from markdown, avoiding duplication
+ */
+function extractDescriptionSection(content: string): string | null {
+	if (!content) return null;
+
+	// Look for ## Description section
+	const regex = /## Description\s*\n([\s\S]*?)(?=\n## |$)/i;
+	const match = content.match(regex);
+	return match?.[1]?.trim() || null;
+}
+
+/**
+ * Extract checkbox lines from Acceptance Criteria section for display
+ */
+function extractAcceptanceCriteriaWithCheckboxes(content: string): string[] {
+	if (!content) return [];
+
+	// Look for ## Acceptance Criteria section
+	const regex = /## Acceptance Criteria\s*\n([\s\S]*?)(?=\n## |$)/i;
+	const match = content.match(regex);
+	if (!match) return [];
+
+	return match[1]
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line.startsWith("- [ ]") || line.startsWith("- [x]"));
+}
+
+// Load blessed dynamically
+// biome-ignore lint/suspicious/noExplicitAny: blessed is dynamically loaded
+async function loadBlessed(): Promise<any | null> {
+	if (output.isTTY === false) return null;
+	try {
+		const require = createRequire(import.meta.url);
+		const blessed = require("blessed");
+		return blessed;
+	} catch {
+		try {
+			// biome-ignore lint/suspicious/noExplicitAny: dynamic import
+			const mod = (await import("blessed")) as any;
+			return mod.default ?? mod;
+		} catch {
+			return null;
+		}
+	}
+}
+
+/**
+ * Display task details in a split-pane UI with task list on left and detail on right
+ */
+export async function viewTaskEnhanced(task: Task, content: string): Promise<void> {
+	const blessed = await loadBlessed();
+	if (!blessed) {
+		// Fallback to formatted plain text
+		console.log(formatTaskPlainText(task, content));
+		return;
+	}
+
+	// Get project root and load all tasks
+	const cwd = process.cwd();
+	const core = new Core(cwd);
+	const allTasks = await core.filesystem.listTasks();
+
+	// Find the initial selected task index
+	const initialIndex = allTasks.findIndex((t) => t.id === task.id);
+	let currentSelectedTask = task;
+	let currentSelectedContent = content;
+
+	const screen = blessed.screen({
+		smartCSR: true,
+		title: "Backlog Tasks",
+	});
+
+	// Main container using grid layout
+	const container = blessed.box({
+		parent: screen,
+		width: "100%",
+		height: "100%",
+		autoPadding: true,
+	});
+
+	// Task list pane (left 40%)
+	const taskListPane = blessed.box({
+		parent: container,
+		top: 0,
+		left: 0,
+		width: "40%",
+		height: "100%-1", // Leave space for help bar
+	});
+
+	// Detail pane (right 60%) with border and padding
+	const detailPane = blessed.box({
+		parent: container,
+		top: 0,
+		left: "40%",
+		// left: taskListPane.width,
+		// left : "0%",
+		width: "60%",
+		height: "100%-1", // Leave space for help bar
+		// border: {
+		// 	type: "line",
+		// },
+		// padding: {
+		// 	left: 1,
+		// },
+		// style: {
+		// 	border: { fg: "gray" },
+		// },
+	});
+
+	// Create task list
+	const taskList = new TaskList({
+		parent: taskListPane,
+		tasks: allTasks,
+		selectedIndex: Math.max(0, initialIndex),
+		onSelect: (selectedTask: Task, index: number) => {
+			currentSelectedTask = selectedTask;
+			// Load the content for the selected task asynchronously
+			(async () => {
+				try {
+					const files = await Array.fromAsync(new Bun.Glob("*.md").scan({ cwd: core.filesystem.tasksDir }));
+					const normalizedId = selectedTask.id.startsWith("task-") ? selectedTask.id : `task-${selectedTask.id}`;
+					const taskFile = files.find((f) => f.startsWith(`${normalizedId} -`));
+
+					if (taskFile) {
+						const filePath = `${core.filesystem.tasksDir}/${taskFile}`;
+						currentSelectedContent = await Bun.file(filePath).text();
+					} else {
+						currentSelectedContent = "";
+					}
+				} catch (error) {
+					currentSelectedContent = "";
+				}
+
+				// Refresh the detail pane
+				refreshDetailPane();
+			})();
+		},
+	});
+
+	// Detail pane components
+	// biome-ignore lint/suspicious/noExplicitAny: blessed components don't have proper types
+	let headerBox: any;
+	// biome-ignore lint/suspicious/noExplicitAny: blessed components don't have proper types
+	let metadataBox: any;
+	// biome-ignore lint/suspicious/noExplicitAny: blessed components don't have proper types
+	let descriptionBox: any;
+	// biome-ignore lint/suspicious/noExplicitAny: blessed components don't have proper types
+	let bottomBox: any;
+
+	function refreshDetailPane() {
+		// Clear existing detail pane content
+		if (headerBox) headerBox.destroy();
+		if (metadataBox) metadataBox.destroy();
+		if (descriptionBox) descriptionBox.destroy();
+		if (bottomBox) bottomBox.destroy();
+
+		// Update screen title
+		screen.title = `Task ${currentSelectedTask.id} - ${currentSelectedTask.title}`;
+
+		// Fixed header section with task ID, title, status, date, and tags
+		headerBox = blessed.box({
+			parent: detailPane,
+			top: 0,
+			left: 0,
+			width: "100%-2", // Account for border
+			height: 3,
+			border: "line",
+			style: {
+				border: { fg: "blue" },
+			},
+			tags: true,
+			wrap: true,
+			scrollable: false, // Header should never scroll
+		});
+
+		// Format header content with key metadata
+		const headerContent = [];
+		headerContent.push(` {bold}{blue-fg}${currentSelectedTask.id}{/blue-fg}{/bold} - ${currentSelectedTask.title}`);
+
+		// Second line with status, date, and assignee
+		const statusLine = [];
+		statusLine.push(
+			`{${getStatusColor(currentSelectedTask.status)}-fg}${formatStatusWithIcon(currentSelectedTask.status)}{/}`,
+		);
+		statusLine.push(`{gray-fg}${currentSelectedTask.createdDate}{/}`);
+
+		if (currentSelectedTask.assignee?.length) {
+			const assigneeList = currentSelectedTask.assignee.map((a) => (a.startsWith("@") ? a : `@${a}`)).join(", ");
+			statusLine.push(`{cyan-fg}${assigneeList}{/}`);
+		}
+
+		// Add labels to header if they exist
+		if (currentSelectedTask.labels?.length) {
+			statusLine.push(`${currentSelectedTask.labels.map((l) => `{yellow-fg}[${l}]{/}`).join(" ")}`);
+		}
+
+		headerContent.push(` ${statusLine.join(" • ")}`);
+
+		headerBox.setContent(headerContent.join("\n"));
+
+		// Scrollable body container beneath the header
+		const bodyContainer = blessed.box({
+			parent: detailPane,
+			top: 3, // Start below the fixed header
+			left: 0,
+			width: "100%-2", // Account for border
+			height: "100%-4", // Fill remaining space below header
+			scrollable: true,
+			alwaysScroll: true,
+			keys: true,
+			mouse: true,
+			tags: true,
+			wrap: true,
+			padding: { left: 1, right: 1, top: 1 },
+		});
+
+		// Build the scrollable body content
+		const bodyContent = [];
+
+		// Add additional metadata section
+		if (
+			currentSelectedTask.reporter ||
+			currentSelectedTask.updatedDate ||
+			currentSelectedTask.milestone ||
+			currentSelectedTask.parentTaskId ||
+			currentSelectedTask.subtasks?.length ||
+			currentSelectedTask.dependencies?.length
+		) {
+			bodyContent.push(formatHeading("Details", 2));
+
+			const metadata = [];
+			if (currentSelectedTask.reporter) {
+				const reporterText = currentSelectedTask.reporter.startsWith("@")
+					? currentSelectedTask.reporter
+					: `@${currentSelectedTask.reporter}`;
+				metadata.push(`{bold}Reporter:{/bold} {cyan-fg}${reporterText}{/}`);
+			}
+
+			if (currentSelectedTask.updatedDate) {
+				metadata.push(`{bold}Updated:{/bold} ${currentSelectedTask.updatedDate}`);
+			}
+
+			if (currentSelectedTask.milestone) {
+				metadata.push(`{bold}Milestone:{/bold} {magenta-fg}${currentSelectedTask.milestone}{/}`);
+			}
+
+			if (currentSelectedTask.parentTaskId) {
+				metadata.push(`{bold}Parent:{/bold} {blue-fg}${currentSelectedTask.parentTaskId}{/}`);
+			}
+
+			if (currentSelectedTask.subtasks?.length) {
+				metadata.push(
+					`{bold}Subtasks:{/bold} ${currentSelectedTask.subtasks.length} task${currentSelectedTask.subtasks.length > 1 ? "s" : ""}`,
+				);
+			}
+
+			if (currentSelectedTask.dependencies?.length) {
+				metadata.push(`{bold}Dependencies:{/bold} ${currentSelectedTask.dependencies.join(", ")}`);
+			}
+
+			bodyContent.push(metadata.join("\n"));
+			bodyContent.push("");
+		}
+
+		// Description section
+		bodyContent.push(formatHeading("Description", 2));
+		// Extract only the Description section content, not the full markdown
+		const extractedDescription = extractDescriptionSection(currentSelectedTask.description);
+		const descriptionContent = extractedDescription
+			? transformCodePaths(extractedDescription)
+			: "{gray-fg}No description provided{/}";
+		bodyContent.push(descriptionContent);
+		bodyContent.push("");
+
+		// Acceptance criteria section
+		bodyContent.push(formatHeading("Acceptance Criteria", 2));
+		// Extract checkbox lines from raw content to preserve checkbox state
+		const checkboxLines = extractAcceptanceCriteriaWithCheckboxes(currentSelectedContent);
+		if (checkboxLines.length > 0) {
+			const formattedCriteria = checkboxLines.map((line) => {
+				const checkboxItem = parseCheckboxLine(line);
+				if (checkboxItem) {
+					// Use nice Unicode symbols for checkboxes in TUI
+					return formatChecklistItem(checkboxItem, {
+						padding: " ",
+						checkedSymbol: "{green-fg}✓{/}",
+						uncheckedSymbol: "{gray-fg}○{/}",
+					});
+				}
+				// Handle non-checkbox lines
+				return ` ${line}`;
+			});
+			const criteriaContent = styleCodePaths(formattedCriteria.join("\n"));
+			bodyContent.push(criteriaContent);
+		} else if (currentSelectedTask.acceptanceCriteria?.length) {
+			// Fallback to parsed criteria if no checkboxes found in raw content
+			const criteriaContent = styleCodePaths(
+				currentSelectedTask.acceptanceCriteria.map((text) => ` • ${text}`).join("\n"),
+			);
+			bodyContent.push(criteriaContent);
+		} else {
+			bodyContent.push("{gray-fg}No acceptance criteria defined{/}");
+		}
+
+		// Set the complete body content
+		bodyContainer.setContent(bodyContent.join("\n"));
+
+		// Store reference to body container for focus management
+		descriptionBox = bodyContainer;
+
+		screen.render();
+	}
+
+	await taskList.create({
+		parent: taskListPane,
+		tasks: allTasks,
+		selectedIndex: Math.max(0, initialIndex),
+		width: "100%",
+		height: "100%",
+	});
+
+	// Initial render of detail pane
+	refreshDetailPane();
+
+	return new Promise<void>((resolve) => {
+		// Footer hint line
+		const helpBar = blessed.box({
+			parent: screen,
+			bottom: 0,
+			left: 0,
+			width: "100%",
+			height: 1,
+			border: "line",
+			content: " ↑/↓ navigate · Tab switch pane · ←/→ scroll · q/Esc quit ",
+			style: {
+				fg: "gray",
+				border: { fg: "gray" },
+			},
+		});
+
+		// Focus management
+		const focusableElements = [taskList.getListBox(), descriptionBox];
+		let focusIndex = 0; // Start with task list
+		focusableElements[focusIndex].focus();
+
+		// Tab navigation between panes
+		screen.key(["tab"], () => {
+			focusIndex = (focusIndex + 1) % focusableElements.length;
+			focusableElements[focusIndex].focus();
+			screen.render();
+		});
+
+		screen.key(["S-tab"], () => {
+			focusIndex = (focusIndex - 1 + focusableElements.length) % focusableElements.length;
+			focusableElements[focusIndex].focus();
+			screen.render();
+		});
+
+		// Exit keys
+		screen.key(["escape", "q", "C-c"], () => {
+			screen.destroy();
+			resolve();
+		});
+
+		screen.render();
+	});
+}
+
+/**
+ * Generate enhanced detail content structure (reusable)
+ */
+function generateDetailContent(task: Task, rawContent = ""): { headerContent: string[]; bodyContent: string[] } {
+	// Format header content with key metadata
+	const headerContent = [];
+	headerContent.push(` {bold}{blue-fg}${task.id}{/blue-fg}{/bold} - ${task.title}`);
+
+	// Second line with status, date, and assignee
+	const statusLine = [];
+	statusLine.push(`{${getStatusColor(task.status)}-fg}${formatStatusWithIcon(task.status)}{/}`);
+	statusLine.push(`{gray-fg}${task.createdDate}{/}`);
+
+	if (task.assignee?.length) {
+		const assigneeList = task.assignee.map((a) => (a.startsWith("@") ? a : `@${a}`)).join(", ");
+		statusLine.push(`{cyan-fg}${assigneeList}{/}`);
+	}
+
+	// Add labels to header if they exist
+	if (task.labels?.length) {
+		statusLine.push(`${task.labels.map((l) => `{yellow-fg}[${l}]{/}`).join(" ")}`);
+	}
+
+	headerContent.push(` ${statusLine.join(" • ")}`);
+
+	// Build the scrollable body content
+	const bodyContent = [];
+
+	// Add additional metadata section
+	if (
+		task.reporter ||
+		task.updatedDate ||
+		task.milestone ||
+		task.parentTaskId ||
+		task.subtasks?.length ||
+		task.dependencies?.length
+	) {
+		bodyContent.push(formatHeading("Details", 2));
+
+		const metadata = [];
+		if (task.reporter) {
+			const reporterText = task.reporter.startsWith("@") ? task.reporter : `@${task.reporter}`;
+			metadata.push(`{bold}Reporter:{/bold} {cyan-fg}${reporterText}{/}`);
+		}
+
+		if (task.updatedDate) {
+			metadata.push(`{bold}Updated:{/bold} ${task.updatedDate}`);
+		}
+
+		if (task.milestone) {
+			metadata.push(`{bold}Milestone:{/bold} {magenta-fg}${task.milestone}{/}`);
+		}
+
+		if (task.parentTaskId) {
+			metadata.push(`{bold}Parent:{/bold} {blue-fg}${task.parentTaskId}{/}`);
+		}
+
+		if (task.subtasks?.length) {
+			metadata.push(`{bold}Subtasks:{/bold} ${task.subtasks.length} task${task.subtasks.length > 1 ? "s" : ""}`);
+		}
+
+		if (task.dependencies?.length) {
+			metadata.push(`{bold}Dependencies:{/bold} ${task.dependencies.join(", ")}`);
+		}
+
+		bodyContent.push(metadata.join("\n"));
+		bodyContent.push("");
+	}
+
+	// Description section
+	bodyContent.push(formatHeading("Description", 2));
+	// Extract only the Description section content, not the full markdown
+	const extractedDescription = extractDescriptionSection(task.description);
+	const descriptionContent = extractedDescription
+		? transformCodePaths(extractedDescription)
+		: "{gray-fg}No description provided{/}";
+	bodyContent.push(descriptionContent);
+	bodyContent.push("");
+
+	// Acceptance criteria section
+	bodyContent.push(formatHeading("Acceptance Criteria", 2));
+	// Extract checkbox lines from raw content to preserve checkbox state
+	const checkboxLines = extractAcceptanceCriteriaWithCheckboxes(rawContent);
+	if (checkboxLines.length > 0) {
+		const formattedCriteria = checkboxLines.map((line) => {
+			const checkboxItem = parseCheckboxLine(line);
+			if (checkboxItem) {
+				// Use nice Unicode symbols for checkboxes in TUI
+				return formatChecklistItem(checkboxItem, {
+					padding: " ",
+					checkedSymbol: "{green-fg}✓{/}",
+					uncheckedSymbol: "{gray-fg}○{/}",
+				});
+			}
+			// Handle non-checkbox lines
+			return ` ${line}`;
+		});
+		const criteriaContent = styleCodePaths(formattedCriteria.join("\n"));
+		bodyContent.push(criteriaContent);
+	} else if (task.acceptanceCriteria?.length) {
+		// Fallback to parsed criteria if no checkboxes found in raw content
+		const criteriaContent = styleCodePaths(task.acceptanceCriteria.map((text) => ` • ${text}`).join("\n"));
+		bodyContent.push(criteriaContent);
+	} else {
+		bodyContent.push("{gray-fg}No acceptance criteria defined{/}");
+	}
+
+	return { headerContent, bodyContent };
+}
+
+/**
+ * Display task details in a popup (for board view) using enhanced detail structure
+ */
+// biome-ignore lint/suspicious/noExplicitAny: blessed types
+export async function createTaskPopup(screen: any, task: Task, content: string): Promise<any> {
+	const blessed = await loadBlessed();
+	if (!blessed) return null;
+
+	// Create main popup first
+	const popup = blessed.box({
+		parent: screen,
+		top: "center",
+		left: "center",
+		width: "85%",
+		height: "80%",
+		border: "line",
+		style: {
+			border: { fg: "gray" },
+		},
+		keys: true,
+		tags: true,
+		autoPadding: true,
+	});
+
+	// Create background overlay positioned relative to popup
+	// Using offset positioning: -2 chars left/right, -1 char top/bottom
+	const background = blessed.box({
+		parent: screen,
+		top: popup.top - 1,
+		left: popup.left - 2,
+		width: popup.width + 4,
+		height: popup.height + 2,
+		style: {
+			bg: "black",
+		},
+	});
+
+	// Move popup to front
+	popup.setFront();
+
+	// Generate enhanced detail content
+	const { headerContent, bodyContent } = generateDetailContent(task, content);
+
+	// Fixed header section with task ID, title, status, date, and tags
+	const headerBox = blessed.box({
+		parent: popup,
+		top: 0,
+		left: 0,
+		width: "100%-2", // Account for border
+		height: 3,
+		border: "line",
+		style: {
+			border: { fg: "blue" },
+		},
+		tags: true,
+		wrap: true,
+		scrollable: false, // Header should never scroll
+		content: headerContent.join("\n"),
+	});
+
+	// Escape indicator
+	const escIndicator = blessed.box({
+		parent: popup,
+		content: " Esc ",
+		top: -1,
+		right: 1,
+		width: 5,
+		height: 1,
+		style: {
+			fg: "white",
+			bg: "blue",
+		},
+	});
+
+	// Scrollable body container beneath the header
+	const contentArea = blessed.box({
+		parent: popup,
+		top: 3, // Start below the fixed header
+		left: 0,
+		width: "100%-2", // Account for border
+		height: "100%-5", // Leave more space for bottom border
+		scrollable: true,
+		alwaysScroll: false,
+		keys: true,
+		mouse: true,
+		tags: true,
+		wrap: true,
+		padding: { left: 1, right: 1, top: 1 },
+		content: bodyContent.join("\n"),
+	});
+
+	// Set up close handler
+	const closePopup = () => {
+		background.destroy();
+		popup.destroy();
+		screen.render();
+	};
+
+	// Focus content area for scrolling
+	contentArea.focus();
+
+	return {
+		background,
+		popup,
+		contentArea,
+		close: closePopup,
+	};
+}
+
+function formatTaskPlainText(task: Task, content: string): string {
+	const lines = [];
+	lines.push(`Task ${task.id} - ${task.title}`);
+	lines.push("=".repeat(50));
+	lines.push("");
+	lines.push(`Status: ${formatStatusWithIcon(task.status)}`);
+	if (task.assignee?.length)
+		lines.push(`Assignee: ${task.assignee.map((a) => (a.startsWith("@") ? a : `@${a}`)).join(", ")}`);
+	if (task.reporter) lines.push(`Reporter: ${task.reporter.startsWith("@") ? task.reporter : `@${task.reporter}`}`);
+	lines.push(`Created: ${task.createdDate}`);
+	if (task.updatedDate) lines.push(`Updated: ${task.updatedDate}`);
+	if (task.labels?.length) lines.push(`Labels: ${task.labels.join(", ")}`);
+	if (task.milestone) lines.push(`Milestone: ${task.milestone}`);
+	if (task.parentTaskId) lines.push(`Parent: ${task.parentTaskId}`);
+	if (task.subtasks?.length) lines.push(`Subtasks: ${task.subtasks.length}`);
+	if (task.dependencies?.length) lines.push(`Dependencies: ${task.dependencies.join(", ")}`);
+	lines.push("");
+	lines.push("Description:");
+	lines.push("-".repeat(50));
+	lines.push(transformCodePathsPlain(task.description || "No description provided"));
+	lines.push("");
+	if (task.acceptanceCriteria?.length) {
+		lines.push("Acceptance Criteria:");
+		lines.push("-".repeat(50));
+		for (const c of task.acceptanceCriteria) {
+			lines.push(transformCodePathsPlain(c));
+		}
+		lines.push("");
+	}
+	lines.push("Content:");
+	lines.push("-".repeat(50));
+	lines.push(transformCodePathsPlain(content));
+	return lines.join("\n");
+}
+
+function styleCodePaths(content: string): string {
+	return transformCodePaths(content);
+}