feat(ui): add color-coded progress bar to task show view for visualizing subtask completion status

2025-03-31 13:18:58 -04:00
parent 3877341ac3
commit 998f6aaf72
4 changed files with 119 additions and 3 deletions
--- a/.changeset/two-bats-smoke.md
+++ b/.changeset/two-bats-smoke.md
@@ -17,3 +17,4 @@
 - Implement clear-subtasks MCP command for clearing subtasks from parent tasks
 - Implement expand-all MCP command for expanding all pending tasks with subtasks
 - Document MCP server naming conventions in architecture.mdc and mcp.mdc files (file names use kebab-case, direct functions use camelCase with Direct suffix, tool registration functions use camelCase with Tool suffix, and MCP tool names use snake_case)
+- Enhance task show view with a color-coded progress bar for visualizing subtask completion percentage
--- a/scripts/modules/ui.js
+++ b/scripts/modules/ui.js
@@ -88,10 +88,25 @@ function createProgressBar(percent, length = 30) {
  const filled = Math.round(percent * length / 100);
  const empty = length - filled;
  
-  const filledBar = '█'.repeat(filled);
-  const emptyBar = '░'.repeat(empty);
+  // Determine color based on percentage
+  let barColor;
+  if (percent < 25) {
+    barColor = chalk.red;
+  } else if (percent < 50) {
+    barColor = chalk.hex('#FFA500'); // Orange
+  } else if (percent < 75) {
+    barColor = chalk.yellow;
+  } else if (percent < 100) {
+    barColor = chalk.green;
+  } else {
+    barColor = chalk.hex('#006400'); // Dark green
+  }
  
-  return `${filledBar}${emptyBar} ${percent.toFixed(0)}%`;
+  const filledBar = barColor('█'.repeat(filled));
+  const emptyBar = chalk.gray('░'.repeat(empty));
+  
+  // Use the same color for the percentage text
+  return `${filledBar}${emptyBar} ${barColor(`${percent.toFixed(0)}%`)}`;
 }

 /**
@@ -851,6 +866,31 @@ async function displayTaskById(tasksPath, taskId) {
    });
    
    console.log(subtaskTable.toString());
+    
+    // Calculate and display subtask completion progress
+    if (task.subtasks && task.subtasks.length > 0) {
+      const totalSubtasks = task.subtasks.length;
+      const completedSubtasks = task.subtasks.filter(st => 
+        st.status === 'done' || st.status === 'completed'
+      ).length;
+      
+      const completionPercentage = (completedSubtasks / totalSubtasks) * 100;
+      
+      // Calculate appropriate progress bar length based on terminal width
+      // Subtract padding (2), borders (2), and the percentage text (~5)
+      const availableWidth = process.stdout.columns || 80; // Default to 80 if can't detect
+      const boxPadding = 2; // 1 on each side
+      const boxBorders = 2; // 1 on each side
+      const percentTextLength = 5; // ~5 chars for " 100%"
+      const progressBarLength = Math.max(30, availableWidth - boxPadding - boxBorders - percentTextLength - 20); // Minimum 30 chars
+      
+      console.log(boxen(
+        chalk.white.bold('Subtask Progress:') + '\n\n' +
+        `${chalk.cyan('Completed:')} ${completedSubtasks}/${totalSubtasks} (${completionPercentage.toFixed(1)}%)\n` +
+        `${chalk.cyan('Progress:')} ${createProgressBar(completionPercentage, progressBarLength)}`,
+        { padding: { top: 0, bottom: 0, left: 1, right: 1 }, borderColor: 'blue', borderStyle: 'round', margin: { top: 1, bottom: 0 } }
+      ));
+    }
  } else {
    // Suggest expanding if no subtasks
    console.log(boxen(
--- a/tasks/task_023.txt
+++ b/tasks/task_023.txt
@@ -842,3 +842,33 @@ Following MCP implementation standards:
 8. Update tests to reflect the new naming conventions
 9. Create a linting rule to enforce naming conventions in future development

+## 34. Review functionality of all MCP direct functions [pending]
+### Dependencies: None
+### Description: Verify that all implemented MCP direct functions work correctly with edge cases
+### Details:
+Perform comprehensive testing of all MCP direct function implementations to ensure they handle various input scenarios correctly and return appropriate responses. Check edge cases, error handling, and parameter validation.
+
+## 35. Review commands.js to ensure all commands are available via MCP [pending]
+### Dependencies: None
+### Description: Verify that all CLI commands have corresponding MCP implementations
+### Details:
+Compare the commands defined in scripts/modules/commands.js with the MCP tools implemented in mcp-server/src/tools/. Create a list of any commands missing MCP implementations and ensure all command options are properly represented in the MCP parameter schemas.
+
+## 36. Finish setting up addResearch in index.js [pending]
+### Dependencies: None
+### Description: Complete the implementation of addResearch functionality in the MCP server
+### Details:
+Implement the addResearch function in the MCP server's index.js file to enable research-backed functionality. This should include proper integration with Perplexity AI and ensure that all MCP tools requiring research capabilities have access to this functionality.
+
+## 37. Finish setting up addTemplates in index.js [pending]
+### Dependencies: None
+### Description: Complete the implementation of addTemplates functionality in the MCP server
+### Details:
+Implement the addTemplates function in the MCP server's index.js file to enable template-based generation. Configure proper loading of templates from the appropriate directory and ensure they're accessible to all MCP tools that need to generate formatted content.
+
+## 38. Implement robust project root handling for file paths [pending]
+### Dependencies: None
+### Description: Create a consistent approach for handling project root paths across MCP tools
+### Details:
+Analyze and refactor the project root handling mechanism to ensure consistent file path resolution across all MCP direct functions. This should properly handle relative and absolute paths, respect the projectRoot parameter when provided, and have appropriate fallbacks when not specified. Document the approach in a comment within path-utils.js for future maintainers.
+
--- a/tasks/tasks.json
+++ b/tasks/tasks.json
@@ -1650,6 +1650,51 @@
          "status": "done",
          "dependencies": [],
          "parentTaskId": 23
+        },
+        {
+          "id": 34,
+          "title": "Review functionality of all MCP direct functions",
+          "description": "Verify that all implemented MCP direct functions work correctly with edge cases",
+          "details": "Perform comprehensive testing of all MCP direct function implementations to ensure they handle various input scenarios correctly and return appropriate responses. Check edge cases, error handling, and parameter validation.",
+          "status": "pending",
+          "dependencies": [],
+          "parentTaskId": 23
+        },
+        {
+          "id": 35,
+          "title": "Review commands.js to ensure all commands are available via MCP",
+          "description": "Verify that all CLI commands have corresponding MCP implementations",
+          "details": "Compare the commands defined in scripts/modules/commands.js with the MCP tools implemented in mcp-server/src/tools/. Create a list of any commands missing MCP implementations and ensure all command options are properly represented in the MCP parameter schemas.",
+          "status": "pending",
+          "dependencies": [],
+          "parentTaskId": 23
+        },
+        {
+          "id": 36,
+          "title": "Finish setting up addResearch in index.js",
+          "description": "Complete the implementation of addResearch functionality in the MCP server",
+          "details": "Implement the addResearch function in the MCP server's index.js file to enable research-backed functionality. This should include proper integration with Perplexity AI and ensure that all MCP tools requiring research capabilities have access to this functionality.",
+          "status": "pending",
+          "dependencies": [],
+          "parentTaskId": 23
+        },
+        {
+          "id": 37,
+          "title": "Finish setting up addTemplates in index.js",
+          "description": "Complete the implementation of addTemplates functionality in the MCP server",
+          "details": "Implement the addTemplates function in the MCP server's index.js file to enable template-based generation. Configure proper loading of templates from the appropriate directory and ensure they're accessible to all MCP tools that need to generate formatted content.",
+          "status": "pending",
+          "dependencies": [],
+          "parentTaskId": 23
+        },
+        {
+          "id": 38,
+          "title": "Implement robust project root handling for file paths",
+          "description": "Create a consistent approach for handling project root paths across MCP tools",
+          "details": "Analyze and refactor the project root handling mechanism to ensure consistent file path resolution across all MCP direct functions. This should properly handle relative and absolute paths, respect the projectRoot parameter when provided, and have appropriate fallbacks when not specified. Document the approach in a comment within path-utils.js for future maintainers.",
+          "status": "pending",
+          "dependencies": [],
+          "parentTaskId": 23
        }
      ]
    },