feat(epic-3): UI Components - Stories 3-5 through 3-8 (Agent Line, Status, Story Card, Error/Celebration) by webeleon-dev-agent · Pull Request #4 · Webeleon/johnny-bmad

webeleon-dev-agent · 2026-02-08T22:12:41Z

Summary

Implements Stories 3-5 through 3-8 of Epic 3: Complete UI Component System for the johnny-bmad CLI.

This PR adds four UI components that provide real-time visual feedback, status messaging, story review cards, and error/celebration displays.

Changes

Story 3-5: Agent Activity Line Component (agent-line.ts)
- Color-coded agent activity lines: [SM] cyan, [Story] blue, [Dev] green, [Review] magenta
- 8-character label width for column alignment
- Verbose mode includes timestamps: [SM 14:32:05] Checking sprint status...
- Unknown agent truncation with console warnings for names >6 chars
Story 3-6: Status Message Component (status.ts)
- Five status levels: OK (green), FAIL (red), WARN (yellow), INFO (cyan), ERROR (red bold)
- Format: [{LEVEL}] {message}
- Accessibility compliant: labels remain visible without color
- Defensive fallback for invalid levels
Story 3-7: Story Review Card Component (story-card.ts)
- Story review header with Unicode/ASCII fallback: ━━━ Review Story 4/8 ━━━
- Displays title, task count, and acceptance criteria count
- Interactive approval prompt with inquirer: [Y] Approve, [N] Request changes, [V] View full story
- Revised story header support: ━━━ Review Story 4/8 (revised) ━━━
Story 3-8: Error Block and Celebration Components (error.ts, celebration.ts)
- Error block with recovery guidance: [ERROR] {type}: {description} + Try: {command}
- Validation for empty recoveryCmd (throws Error per AC#2)
- Celebration message: 🎉 Epic Complete! {stories} stories · {files} files · {duration}
- Resume message with epic, story progress, phase, and reassurance
- Emoji fallback for ASCII terminals

Test Coverage

All 386 tests pass
100% coverage on new code
Tests for: color output, padding alignment, timestamp format, Unicode fallback, NO_COLOR environment variable, edge cases

Test plan

All unit tests pass (386 tests total)
New tests added for all four components
Tests verify exact output formats (with ANSI stripping)
Verbose mode tests include timestamp validation
Unknown agent/truncation behavior tested
Empty string edge cases handled
NO_COLOR environment variable behavior verified
Unicode/ASCII fallback tested
Story review card approval flow tested with inquirer mocking

Story 3-1: ✅ Create UI component directory structure (on main)
Story 3-2: ✅ Implement ASCII banner component (on main)
Story 3-3: ✅ Implement phase header component (on main)
Story 3-4: ✅ Implement progress bar component (on main)
Story 3-5: ✅ Implement agent activity line component (this PR)
Story 3-6: ✅ Implement status message component (this PR)
Story 3-7: ✅ Implement story review card component (this PR)
Story 3-8: ✅ Implement error block and celebration components (this PR)

🤖 Generated with Claude Code

Fix label padding to be exactly 8 characters (was incorrectly 9 in some cases) and add truncation with warning for unknown agent names exceeding 6 chars. Changes: - Fix AGENT_LABELS padding: [SM] 4 spaces, [Story] 1 space, [Dev] 3 spaces, [Review] 0 spaces - Add truncation logic for unknown agents >6 chars with console.warn - Add tests for truncation, warnings, empty activity strings, and timestamp validation - Update story 3-5 status to in-progress Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

github-actions · 2026-02-08T22:12:53Z

Coverage after merging epic-3 into main will be

48.32%

Coverage Report

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
src
config.ts	100%	100%	100%	100%
index.ts	79.71%	100%	85.71%	79.39%	13–20, 209, 21, 211–213, 22–23, 232–236, 238–240, 243–245, 257
orchestrator.ts	27.38%	100%	36.36%	27.07%	131–132, 134–138, 142–149, 154–160, 163–164, 166, 168–169, 171–174, 176–180, 182–189, 215–216, 223–232, 249, 253, 255–256, 258–262, 264–265, 268–271, 274–283, 285, 287–295, 298, 301–305, 308–309, 311–314, 316, 319–324, 327, 329–337, 342–349, 352, 354–362, 366–370, 372, 375–376, 378–382, 385–386, 388–391, 393, 395–400, 402–404, 406–408, 410–413, 415, 418–424, 426–429, 432–433, 436–439, 442, 445–446, 448–450, 453, 455–456, 459–460, 462–468, 471–472, 474–476, 478–481, 483, 64, 75–77, 83–86, 95
src/agents
dev.ts	15%	100%	0%	15.79%	10–20, 5–9
reviewer.ts	5.88%	100%	0%	5.93%	100–149, 23–99
sm.ts	18.75%	100%	0%	20%	10–16, 5–9
story-creator.ts	15%	100%	0%	15.79%	10–21, 6–9
src/claude
cli.ts	4.26%	100%	0%	4.35%	10–59, 6, 60–69, 7, 70–79, 8, 80, 84–89, 9, 90–96
prompts.ts	12.90%	100%	0%	15.38%	1, 20–31, 39–42, 55–58, 83
src/git
commit.ts	4.35%	100%	0%	4.55%	10–28, 32–39, 4, 40–41, 46–49, 5, 50–59, 6, 60–69, 7, 70–79, 8, 80, 84–89, 9, 90–97
src/ui
agent-line.ts	100%	100%	100%	100%
banner.ts	100%	100%	100%	100%
celebration.ts	100%	100%	100%	100%
error.ts	100%	100%	100%	100%
index.ts	100%	100%	100%	100%
phase-header.ts	100%	100%	100%	100%
progress.ts	100%	100%	100%	100%
status.ts	100%	100%	100%	100%
story-card.ts	100%	100%	100%	100%
unicode-support.ts	100%	100%	100%	100%
src/utils
files.ts	21.67%	100%	10.53%	22.29%	100–152, 156–172, 177–217, 22, 221–227, 23, 232–235, 24–28, 287–288, 29, 290, 293, 295–299, 30, 300–304, 306, 31, 343–358, 36, 365–369, 37, 370–379, 38, 380, 388–389, 39, 390–399, 40, 400–409, 41, 410–423, 46–48, 52–57, 62–81, 85–99
logger.ts	39.64%	100%	20%	42.71%	104, 11, 111, 126–146, 23–24, 29–30, 34, 37–38, 43, 51, 59, 63–69, 7, 73–76, 80–81, 91–97
stream-wrapper.ts	100%	100%	100%	100%
timer.ts	22.50%	100%	20%	22.86%	14–28, 35–40, 50, 61, 69–72
user-input.ts	20.69%	100%	28.57%	20%	10–20, 24–33, 39, 4, 40–49, 5, 50–56, 6, 60–69, 7, 73–79, 8, 80–81, 9

…ssage-component

Implement displayStoryCard and promptStoryApproval functions with: - Unicode/ASCII fallback header using isUnicodeSupported() - Story title, task count, and AC count display - Revised story header support with isRevised parameter - Inquirer expand-type prompt for single-key input (Y/N/V) - File reading for full story view with fallback to summary - Comprehensive test suite with 21 tests (358 total passing) Files modified: - src/ui/story-card.ts: Implemented displayStoryCard and promptStoryApproval - src/ui/story-card.test.ts: Added 21 tests covering all AC - src/ui/index.ts: Added type exports ApprovalResult, NeedsChangesResult - src/ui/index.test.ts: Updated promptStoryApproval parameter count test - src/ui/phase-header.test.ts: Added environment cleanup for Unicode tests - _bmad-output/implementation-artifacts/3-7-implement-story-review-card-component.md: Story file - _bmad-output/implementation-artifacts/sprint-status.yaml: Updated story status to review Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update story status from in-progress to review in both story file and sprint-status.yaml. All acceptance criteria met: - displayStoryCard outputs correct format with Unicode/ASCII fallback - promptStoryApproval returns correct values for each choice - Revised header support implemented - Comprehensive test suite with 21 tests covering all edge cases - All 358 tests passing (up from baseline of 336, +22 tests) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…review-card-component

Implemented error display with recovery guidance, celebration message with Unicode fallback, and resume message with reassurance. All acceptance criteria met with 28 new tests. - Added displayError() function with red bold [ERROR] label and mandatory "Try:" recovery line - Added displayCelebration() function with emoji fallback (🎉 → *) and magenta bold styling - Added displayResumeMessage() function with multi-line formatted resume message - Created comprehensive test suite with 28 tests (384 total passing) - Verified NO_COLOR environment variable support Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

All acceptance criteria met, all tests passing (384), and all review follow-ups addressed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Throw error when recoveryCmd is empty or whitespace-only - Add tests for validation behavior - Update existing empty string test to expect error - Addresses review follow-up: [AI-Review][HIGH] Add validation for empty recoveryCmd Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- All review follow-ups addressed - Added validation for empty recoveryCmd (commit ce77fbf) - All 386 tests passing - Story status updated to "review" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Fixed sprint-status.yaml: changed status from in-progress back to review - Updated story Status field from in-progress to review - Clarified error.ts JSDoc: documented caller responsibility for "Story " prefix - Enhanced celebration.test.ts: documented console mocking limitation for color testing - Updated story documentation: accurate test counts (28 total: 10 error + 18 celebration) - All review follow-ups now complete Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Documented sprint-status.yaml status correction (in-progress → review) - Documented story Status field correction (in-progress → review) - Documented JSDoc clarification for error.ts context parameter - Documented celebration.test.ts console mocking limitation - All review follow-ups complete (16/16 tasks marked as done) - Story now in "review" status with all changes committed Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… review - Marked final 4 review follow-ups as complete (all 20/20 now done) - Committed uncommitted changes (commits 8b355fe, 2b21ce3) - Corrected sprint-status.yaml status: in-progress → review - Updated story Status: in-progress → review - Updated Change Log to reflect accurate git state - Updated Completion Notes with final resolutions - All 386 tests passing - Story now in "review" status, ready for final code review Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

github-actions · 2026-02-09T01:14:37Z

Coverage after merging epic-3 into main will be

51.14%

Coverage Report

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
src
config.ts	100%	100%	100%	100%
index.ts	79.71%	100%	85.71%	79.39%	13–20, 209, 21, 211–213, 22–23, 232–236, 238–240, 243–245, 257
orchestrator.ts	27.38%	100%	36.36%	27.07%	131–132, 134–138, 142–149, 154–160, 163–164, 166, 168–169, 171–174, 176–180, 182–189, 215–216, 223–232, 249, 253, 255–256, 258–262, 264–265, 268–271, 274–283, 285, 287–295, 298, 301–305, 308–309, 311–314, 316, 319–324, 327, 329–337, 342–349, 352, 354–362, 366–370, 372, 375–376, 378–382, 385–386, 388–391, 393, 395–400, 402–404, 406–408, 410–413, 415, 418–424, 426–429, 432–433, 436–439, 442, 445–446, 448–450, 453, 455–456, 459–460, 462–468, 471–472, 474–476, 478–481, 483, 64, 75–77, 83–86, 95
src/agents
dev.ts	15%	100%	0%	15.79%	10–20, 5–9
reviewer.ts	5.88%	100%	0%	5.93%	100–149, 23–99
sm.ts	18.75%	100%	0%	20%	10–16, 5–9
story-creator.ts	15%	100%	0%	15.79%	10–21, 6–9
src/claude
cli.ts	4.26%	100%	0%	4.35%	10–59, 6, 60–69, 7, 70–79, 8, 80, 84–89, 9, 90–96
prompts.ts	12.90%	100%	0%	15.38%	1, 20–31, 39–42, 55–58, 83
src/git
commit.ts	4.35%	100%	0%	4.55%	10–28, 32–39, 4, 40–41, 46–49, 5, 50–59, 6, 60–69, 7, 70–79, 8, 80, 84–89, 9, 90–97
src/ui
agent-line.ts	100%	100%	100%	100%
banner.ts	100%	100%	100%	100%
celebration.ts	100%	100%	100%	100%
error.ts	100%	100%	100%	100%
index.ts	100%	100%	100%	100%
phase-header.ts	100%	100%	100%	100%
progress.ts	100%	100%	100%	100%
status.ts	100%	100%	100%	100%
story-card.ts	100%	100%	100%	100%
unicode-support.ts	100%	100%	100%	100%
src/utils
files.ts	21.67%	100%	10.53%	22.29%	100–152, 156–172, 177–217, 22, 221–227, 23, 232–235, 24–28, 287–288, 29, 290, 293, 295–299, 30, 300–304, 306, 31, 343–358, 36, 365–369, 37, 370–379, 38, 380, 388–389, 39, 390–399, 40, 400–409, 41, 410–423, 46–48, 52–57, 62–81, 85–99
logger.ts	39.64%	100%	20%	42.71%	104, 11, 111, 126–146, 23–24, 29–30, 34, 37–38, 43, 51, 59, 63–69, 7, 73–76, 80–81, 91–97
stream-wrapper.ts	100%	100%	100%	100%
timer.ts	22.50%	100%	20%	22.86%	14–28, 35–40, 50, 61, 69–72
user-input.ts	20.69%	100%	28.57%	20%	10–20, 24–33, 39, 4, 40–49, 5, 50–56, 6, 60–69, 7, 73–79, 8, 80–81, 9

webeleon-dev-agent and others added 11 commits February 8, 2026 22:27

feat(3-6-implement-status-message-component): 3-6-implement-status-me…

2db3ecc

…ssage-component

feat(3-7-implement-story-review-card-component): 3-7-implement-story-…

6ede795

…review-card-component

feat(3-8): mark story as complete and ready for review

055b0af

All acceptance criteria met, all tests passing (384), and all review follow-ups addressed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat(3-8): mark story as complete and ready for review

0fcae2a

- All review follow-ups addressed - Added validation for empty recoveryCmd (commit ce77fbf) - All 386 tests passing - Story status updated to "review" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

webeleon-dev-agent changed the title ~~feat(epic-3): UI Components - Story 3-5 Agent Activity Line Component~~ feat(epic-3): UI Components - Stories 3-5 through 3-8 (Agent Line, Status, Story Card, Error/Celebration) Feb 9, 2026

bassochette marked this pull request as ready for review February 9, 2026 01:56

bassochette merged commit f2f3f64 into main Feb 9, 2026
3 checks passed

webeleon-dev-agent mentioned this pull request Feb 9, 2026

docs(3-5): Mark story 3-5 as done and address Round 8 review findings #5

Merged

Navigation Menu

Repository navigation

feat(epic-3): UI Components - Stories 3-5 through 3-8 (Agent Line, Status, Story Card, Error/Celebration) - #4

feat(epic-3): UI Components - Stories 3-5 through 3-8 (Agent Line, Status, Story Card, Error/Celebration)#4
bassochette merged 12 commits into
mainfrom
epic-3

webeleon-dev-agent commented Feb 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Feb 8, 2026

Uh oh!

github-actions Bot commented Feb 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

webeleon-dev-agent commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test Coverage

Test plan

Related Stories

Uh oh!

github-actions Bot commented Feb 8, 2026

Uh oh!

github-actions Bot commented Feb 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

webeleon-dev-agent commented Feb 8, 2026 •

edited

Loading