Implement priority-grouped gantt view with table layout#13
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: tikazyq <3393101+tikazyq@users.noreply.github.com>
…yout Co-authored-by: tikazyq <3393101+tikazyq@users.noreply.github.com>
Co-authored-by: tikazyq <3393101+tikazyq@users.noreply.github.com>
Co-authored-by: tikazyq <3393101+tikazyq@users.noreply.github.com>
Co-authored-by: tikazyq <3393101+tikazyq@users.noreply.github.com>
There was a problem hiding this comment.
Pull Request Overview
This PR implements UX improvements to the gantt command visualization and adds a package-lock.json file for dependency management. The changes focus on reorganizing the gantt chart display to group specs by priority, simplifying the timeline rendering, and improving the overall layout with better column alignment.
Key Changes:
- Reorganized gantt chart to display specs grouped by priority (critical, high, medium, low)
- Simplified timeline bar rendering to show progress from today to due date
- Updated column layout with consistent widths aligned with stats.ts and timeline.ts
- Added package-lock.json for dependency version locking
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/commands/gantt.ts | Major refactoring of gantt chart display logic - priority grouping, simplified timeline bars, improved column layout |
| specs/20251103/017-gantt-ux-improvements/README.md | Updated spec status from planned to complete with completion date |
| package-lock.json | New file adding complete dependency lock for reproducible builds |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Format: {emoji} {spec-name} (must be exactly SPEC_COLUMN_WIDTH chars) | ||
| const emoji = statusConfig.emoji; | ||
| const maxNameLength = SPEC_COLUMN_WIDTH - 2; // 2 chars for emoji + space | ||
| let specName = spec.name; // Use spec.name instead of spec.path |
There was a problem hiding this comment.
[nitpick] The comment states 'Use spec.name instead of spec.path', but this may not provide sufficient context. Consider clarifying why spec.name is preferred over spec.path (e.g., 'Use spec.name for cleaner display without directory path').
| let specName = spec.name; // Use spec.name instead of spec.path | |
| let specName = spec.name; // Use spec.name for cleaner display without directory path (spec.path includes directories) |
| return ' '.repeat(totalChars); | ||
| } | ||
| const due = dayjs(spec.frontmatter.due!); | ||
| const specStart = today; // Start from today, not creation date |
There was a problem hiding this comment.
Starting all timeline bars from 'today' may be misleading if a spec was created in the past or has already been worked on. Consider whether this simplification accurately represents the spec's actual timeline, especially for in-progress or late-starting specs.
| const specStart = today; // Start from today, not creation date | |
| // Use the spec's actual start date if available, otherwise fall back to today | |
| let specStart: dayjs.Dayjs; | |
| if (spec.frontmatter.start) { | |
| specStart = dayjs(spec.frontmatter.start); | |
| } else if (spec.frontmatter.created) { | |
| specStart = dayjs(spec.frontmatter.created); | |
| } else { | |
| specStart = today; | |
| } |
|
|
||
| // Metadata | ||
| const metaParts: string[] = [chalk.dim(` ${statusConfig.emoji} ${spec.frontmatter.status}`)]; | ||
| const timelineColumnWidth = weeks * 8; |
There was a problem hiding this comment.
Unused variable timelineColumnWidth.
| const timelineColumnWidth = weeks * 8; |
…90-007c8080-293b-4436-ab69-2cfc83c21376 Implement priority-grouped gantt view with table layout
…293) Pulls the latest plan-dag (upstream commits #9–#13): renderer collapsed to PNG-only, status fills + available-next highlight, duplicate-id labels rejected, and the obsolete ascii/tb/svg/html fixture artifacts dropped. Moves the skill from .claude/skills/plan-dag/ (real directory) to .agents/skills/plan-dag/ with a .claude/skills/plan-dag symlink, matching the multi-agent layout the skills CLI now emits. Co-authored-by: Claude <noreply@anthropic.com>
The gantt command suffered from poor UX: fake 2-week bars for specs without due dates, timeline starting from creation dates (cluttering the past), no priority grouping, and 4 lines per spec with redundant metadata.
Changes
Rewrote
src/commands/gantt.tsfollowing Option A (Simplified Timeline):stats.tsandtimeline.tsExample output:
Maintainability: Extracted constants (
SPEC_COLUMN_WIDTH,SPEC_INDENT,FILLED_BAR_CHAR,EMPTY_BAR_CHAR)Original prompt
let's implement gantt-ux-improvements as well
[Chronological Review: The conversation began with the user expressing a desire to implement "console-log-chalk-security." The user then delegated this task to a cloud agent. Following that, the user requested to implement "gantt-ux-improvements" as well. The conversation has focused on these two implementation requests.][Intent Mapping:
[Technical Inventory:
[Code Archaeology: No specific files or code changes have been discussed or modified yet, as the conversation is still in the planning phase for the implementations.]
[Progress Assessment:
[Context Validation: All critical information for continuation is captured, including the specific features to be implemented and the delegation to the cloud agent.]
[Recent Commands Analysis:
1. Conversation Overview: - Primary Objectives: 1. "let's implement console-log-chalk-security" - User wants to add a logging feature. 2. "@cloud Delegate: 'Delegate to cloud agent'" - User delegates the task to a cloud agent. 3. "let's implement gantt-ux-improvements as well" - User wants to implement Gantt chart improvements. - Session Context: The conversation has revolved around the implementation of two specific features, with a focus on delegating tasks to a cloud agent. - User Intent Evolution: The user initially focused on logging improvements and then expanded the scope to include Gantt chart enhancements.- Technical Foundation:
- Console-log-chalk-security: A feature for enhanced console logging using the chalk library.
- Gantt-ux-improvements: Enhancements for user experience in Gantt charts.
- Codebase Status:
- No specific files or code changes have been discussed yet, as the conversation is still in the planning phase.
- Problem Resolution:
- Issues Encountered: None reported yet.
- Solutions Implemented: None yet, as the conversation is still in the planning phase.
- Debugging Context: No ongoing troubleshooting efforts or known issues.
- Lessons Learned: No insights or patterns have been discovered yet.
- Progress Tracking:
- Completed Tasks: None yet.
- Partially Complete Work: Delegation to the cloud agent is pending execution.
- Validated Outcomes: None yet.
- Active Work State:
- Current Focus: The user is focused on implementing console-log-chalk-security and gantt-ux-improvements.
- Recent Context: The last few exchanges involved delegating tasks to the cloud agent and discussing feature implementations.
- Working Code: No specific code snippets have been discussed recently.
- Immediate Context: The user was addressing the implementation of features before the summary was triggered.
- Recent Operations:
- Last Agent Commands:
- "let's implement console-log-chalk-security"
- "@cloud Delegate: 'Delegate to cloud agent'"
- "let's implement gantt-ux-improvements as well"
- Tool Results Summary: No specific results were returned as the commands were user requests.
- Pre-Summary State: The agent was actively delegating tasks to the cloud agent when the token budget was exceeded.
- Operation Context: The user is focused on implementing two features, indicating a need for enhanced logging and improved Gantt chart UX.
- Continuation Plan:
- [Pending Task 1]: Implement console-log-chalk-security - Next steps involve executing the delegation to the cloud agen...
Created from VS Code via the GitHub Pull Request extension.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.