@leanspec/ui 0.2.6 → 0.2.7-dev.20251126090633

package/.next/standalone/packages/ui/dist/standalone/specs/archived/028-cli-ui-modernization/README.md

@@ -1,172 +0,0 @@
----
-status: complete
-created: '2025-11-03'
-tags:
-  - cli
-  - ux
-  - design
-priority: high
-completed: '2025-11-03'
----
-
-# cli-ui-modernization
-
-> **Status**: ✅ Complete · **Priority**: High · **Created**: 2025-11-03 · **Tags**: cli, ux, design
-
-**Project**: lean-spec  
-**Team**: Core Development
-
-## Overview
-
-The current CLI UI has two main issues:
-1. **Output is too scattered** - Components like `lean-spec stats`, `lean-spec board`, and `lean-spec list` have excessive spacing between elements, making the output feel bloated and hard to scan
-2. **Rainbow gradients feel dated** - The `ink-gradient` rainbow effect on titles doesn't match modern CLI aesthetics (see GitHub CLI, Vercel CLI, etc.)
-
-This impacts user experience by making the tool feel less polished and harder to use efficiently.
-
-## Design
-
-### Compact Spacing Strategy
-
-**Current issues:**
-- `marginBottom={1}` used everywhere (full blank lines between sections)
-- Panels have large internal padding
-- List items have full line gaps
-- Filter info takes up too much vertical space
-
-**Solution:**
-- Reduce margins to 0 for most cases, use gaps only between major sections
-- Tighten panel padding from `padding={1}` to minimal/inline spacing
-- Remove blank lines between list items
-- Make filter info inline/compact
-
-### Modern Color Scheme
-
-**Replace rainbow gradients with:**
-- **Cyan/Blue** for main titles (`#00d7ff` / `#0070f3` style)
-- **Magenta/Purple** for secondary emphasis (`#d946ef` / `#7928ca` style)  
-- Use bold + single color instead of gradient
-- Reference: GitHub CLI, Vercel CLI, Next.js CLI aesthetics
-
-**Components affected:**
-- `StatsDisplay.tsx` - Title and section headers
-- `Board.tsx` - Main title
-- `SpecListView.tsx` - Title
-
-### Implementation Approach
-
-1. Remove `ink-gradient` dependency and imports
-2. Replace `<Gradient name="rainbow">` with styled `<Text>` components
-3. Reduce `marginBottom` and `marginTop` props across all components
-4. Adjust panel and card internal spacing
-5. Test visual output with real data
-
-## Plan
-
-- [x] Create spec for CLI UI improvements
-- [x] Examine current components and styling
-- [x] Update color scheme (remove gradients, use modern colors)
-- [x] Implement compact spacing across all components
-- [x] Update `StatsDisplay.tsx`
-- [x] Update `Board.tsx`
-- [x] Update `SpecListView.tsx`
-- [x] Fix border alignment issues in Board component
-- [x] Add vertical line separators in SpecListView
-- [x] Modernize `lean-spec timeline` output
-- [x] Test with `lean-spec stats`, `lean-spec board`, `lean-spec list`
-
-## Test
-
-Manual verification:
-- [x] Run `lean-spec stats` - output is compact, colors modern
-- [x] Run `lean-spec board` - columns are tighter, title not rainbow, borders aligned
-- [x] Run `lean-spec list` - date groups closer together, clean colors, vertical lines
-- [x] Run `lean-spec list --tag=cli` - filter info is compact
-- [x] Run `lean-spec timeline` - modern output with better bars and formatting
-- [x] Overall: Less vertical scrolling required, cleaner aesthetic
-
-Visual quality checks:
-- [x] No rainbow gradients anywhere
-- [x] Consistent use of cyan/magenta for emphasis
-- [x] Maximum 1 blank line between major sections
-- [x] All panels/cards have minimal padding
-- [x] Text is still readable and not cramped
-- [x] Border lines are properly aligned
-- [x] Vertical separators between list items
-
-## Implementation Summary
-
-**Phase 1: Initial modernization**
-- Removed `ink-gradient` from all components
-- Replaced rainbow gradients with bold cyan titles
-- Reduced spacing (marginBottom/marginTop) throughout
-- Changed panel padding from 1 to 0
-
-**Phase 2: Bug fixes**
-1. Fixed board border alignment by correcting width calculations
-2. Added vertical line (`│`) separators in spec list view
-3. Changed tree connectors to use `└─` for last items
-4. Added separator lines between specs in list
-
-**Phase 3: Timeline enhancement**
-- Changed title to bold cyan
-- Improved bar charts with `━` character and proportional sizing
-- Added "Activity" and "Monthly Overview" section titles
-- Simplified completion rate display with arrows
-- Modernized tag/assignee breakdown formatting
-- Converted to column-based table layout with headers
-- Fixed column width alignment issues
-
-**Phase 4: Stats alignment improvements**
-- Fixed Panel component to respect padding={0}
-- Aligned status labels using padEnd()
-- Aligned priority labels using padEnd()
-- Attempted emoji width compensation
-
-## Known Issues
-
-### Alignment Problems
-
-**Root cause**: Emojis have inconsistent visual width in terminals
-- Different emojis render at different widths (some as 1 char, some as 2)
-- Terminals handle emoji width differently (iTerm, VS Code, etc.)
-- String `.padEnd()` works on character count, not visual width
-- This makes it nearly impossible to align text after emojis consistently
-
-**Current issues in `lean-spec stats`:**
-1. Status Distribution bars not perfectly aligned despite using `.padEnd(13)`
-2. Priority Breakdown bars not perfectly aligned despite using `.padEnd(13)`
-3. The alignment looks different in different terminals
-
-**Potential solutions:**
-1. Remove emojis from labels entirely (just use text)
-2. Put emojis in a fixed-width column separate from text
-3. Use a library that handles emoji width (e.g., `string-width` from npm)
-4. Accept that terminal emoji rendering is inconsistent
-
-**Example of the issue:**
-```
-📅 Planned       ← emoji + 1 space + text
-🔨 In Progress   ← emoji takes more visual space
-✅ Complete      ← emoji takes even more space
-```
-
-### Other Potential Issues
-- Board component may still have spacing inconsistencies
-- List view vertical lines may not align in all cases
-- Timeline bars might overflow on narrow terminals
-
-## Notes
-
-**Modern CLI references:**
-- GitHub CLI: Bold cyan titles, minimal spacing
-- Vercel CLI: Magenta accents, clean output
-- Next.js CLI: Blue/cyan, tight formatting
-
-**Design decisions:**
-- Used `━` (U+2501) for timeline bars instead of `█` for cleaner look
-- Used `│` (U+2502) for vertical lines in list view
-- Used `├─` and `└─` for tree structure consistency
-- Kept readability as priority while reducing whitespace
-
-**Future consideration:** Could add `--compact` flag for users who prefer minimal spacing vs. default with some breathing room.

package/.next/standalone/packages/ui/dist/standalone/specs/archived/029-visualization-improvements/IMPLEMENTATION.md

@@ -1,152 +0,0 @@
-# Implementation Summary
-
-## ✅ Completed
-
-### 1. Timeline vs Stats Analysis
-- **Decision**: Keep both commands separate - they serve distinct purposes
-- **Stats**: Shows aggregate counts (status distribution, priority breakdown, tags) with bar charts
-- **Timeline**: Shows temporal patterns (daily activity, monthly trends, completion rates over time)
-- **No changes needed** - commands are well-differentiated
-
-### 2. Status Icon Updates ✅
-Successfully updated all status icons to be more intuitive:
-
-**Before → After:**
-- Planned: 📅 (calendar) → 📋 (clipboard) - clearer "to-do" indicator
-- In Progress: 🔨 (hammer) → ⚡ (lightning) - better conveys active work
-- Complete: ✅ (checkmark) → ✅ (unchanged, already perfect)
-- Archived: 📦 (box) → 📦 (unchanged, already perfect)
-
-**Files Updated:**
-- `src/utils/spec-helpers.ts` - Core helper functions
-- `src/components/SpecList.tsx` - List view component
-- `src/components/StatsDisplay.tsx` - Stats display component
-- `src/components/Board.tsx` - Kanban board component
-- `src/frontmatter.ts` - Frontmatter generation
-
-### 3. Priority Color Fix ✅
-Fixed priority colors to follow intuitive traffic light convention:
-
-**Before (counterintuitive):**
-- Low: 🟢 Gray
-- Medium: 🟠 Blue
-- High: 🟡 Yellow
-- Critical: 🔴 Red
-
-**After (intuitive):**
-- Low: 🟢 Green ✓
-- Medium: 🟡 Yellow ✓
-- High: 🟠 Orange ✓
-- Critical: 🔴 Red ✓
-
-**Files Updated:**
-- `src/utils/spec-helpers.ts` - Using chalk.hex('#FFA500') for orange
-- `src/components/SpecList.tsx` - Priority emoji order corrected
-- `src/components/StatsDisplay.tsx` - Bar chart colors fixed
-- `src/components/Board.tsx` - Priority badge colors updated
-
-### 4. Testing ✅
-- All existing tests pass (106 tests)
-- No compilation errors
-- **All visualization commands tested and working:**
-  - `lean-spec board` - Ink-based, new icons/colors ✓
-  - `lean-spec stats` - Chalk-based (simplified), new icons/colors ✓
-  - `lean-spec timeline` - Chalk-based (unchanged) ✓
-
-### 5. Stats Command Simplification ✅
-**Issue**: Stats was using complex Ink components (Panel, KeyValueList) which could cause issues
-**Solution**: Converted to simple chalk-based output like timeline command
-**Result**: Clean, fast, reliable output with consistent styling
-
-### 6. Stats Output Alignment ✅
-**Improvements Made:**
-- Added column headers with separator lines (like timeline)
-- Merged "Bar" and "Cnt" into single "Count" column
-- Standardized all label widths to 15 characters
-- Added tag truncation with ellipsis for long tags
-- Consolidated layout constants (labelWidth, barWidth, countWidth, colWidth)
-- Refactored `createBar()` to accept `maxCount` parameter
-- All sections now perfectly aligned with consistent spacing
-
-**Code Quality:**
-- Eliminated duplicate constants across sections
-- Single source of truth for layout measurements
-- More maintainable and easier to adjust
-
-## 🚧 In Progress - Needs Fix
-
-### Gantt Chart Enhancement with Ink
-**Goal**: Refactor gantt chart to use Ink component for consistency with board/stats commands
-
-**What Was Done:**
-- Created `src/components/GanttChart.tsx` - New Ink-based React component
-- Updated `src/commands/gantt.ts` - Simplified to use Ink render
-- Added enhanced features:
-  - Better timeline visualization with week headers
-  - Dependency status indicators (✓ complete, ○ pending)
-  - Today marker (○) and due date marker (▸)
-  - Priority badges with traffic light colors
-  - Progress bars for in-progress specs
-  - Summary statistics
-  - Overdue warnings
-
-**Current Issue:**
-```
-ERROR Objects are not valid as a React child (found: [object Date])
-```
-
-**Root Cause**: React/Ink is complaining about Date/dayjs objects being rendered. Despite thorough review, the exact source hasn't been pinpointed yet.
-
-**Possible Solutions for Next Session:**
-1. **Revert gantt to chalk-based** (recommended - simpler, already works, matches timeline/stats pattern)
-2. Add explicit `.toString()` or `.format()` calls to all dayjs objects
-3. Debug by adding console.log to identify which prop is passing a Date
-4. Check if issue is in how we're creating React elements with `React.createElement`
-
-**Recommendation**: Given that `timeline` and `stats` work perfectly with chalk, and `board` is the only command that benefits from Ink's interactivity, reverting `gantt` to chalk-based would be most pragmatic. Then delete the unused `GanttChart.tsx` component.
-
-## Files Changed
-
-### Modified:
-- `src/utils/spec-helpers.ts` - Status icons and priority colors
-- `src/components/SpecList.tsx` - Status and priority emojis
-- `src/components/StatsDisplay.tsx` - Priority colors in bar charts (now unused)
-- `src/components/Board.tsx` - Status icons and priority badges  
-- `src/frontmatter.ts` - Status emojis in frontmatter generation
-- `src/commands/stats.ts` - **Converted to chalk-based (was Ink)**
-- `src/commands/gantt.ts` - Simplified to use Ink (has runtime error)
-- `specs/20251103/015-visualization-improvements/README.md` - Status updated to complete
-
-### Created:
-- `src/components/GanttChart.tsx` - New Ink component (has runtime error)
-
-## Test Results
-
-```
- Test Files  6 passed (6)
-      Tests  106 passed (106)
-   Duration  749ms
-```
-
-All tests passing ✓
-
-## Next Steps
-
-1. **Fix Gantt Chart Ink Error** - Debug the Date object rendering issue
-2. **Consider Reverting Gantt** - If Ink proves too complex, keep chalk-based version with enhancements
-3. **Update Documentation** - Document new color scheme and icon choices
-4. **Visual Regression Test** - Test all visualization commands with real data
-
-## Command Testing
-
-### Working Commands:
-```bash
-lean-spec board              # ✅ Ink-based, new icons and colors
-lean-spec stats              # ✅ Chalk-based, new icons/colors, aligned output with headers
-lean-spec timeline           # ✅ Chalk-based (unchanged)
-```
-
-### Broken Command:
-```bash
-lean-spec gantt --weeks 6    # ❌ React Date object error
-```

package/.next/standalone/packages/ui/dist/standalone/specs/archived/029-visualization-improvements/README.md

@@ -1,95 +0,0 @@
----
-status: complete
-created: 2025-11-03
-tags: [ui, visualization, pm-tools]
-priority: medium
-completed: 2025-11-03
----
-
-# visualization-improvements
-
-> **Status**: 📅 Planned · **Priority**: Medium · **Created**: 2025-11-03
-
-**Project**: lean-spec  
-**Team**: Core Development
-
-## Overview
-
-After reviewing current visualization and PM commands, several design issues were identified that impact usability and intuition:
-
-1. **Timeline and Stats Overlap** - `timeline` and `stats` commands may have overlapping functionality that confuses users
-2. **Basic Gantt Chart** - Current `gantt` implementation is very basic and could be more useful
-3. **Unintuitive Status Icons** - Emoji icons for spec status are not immediately clear
-4. **Priority Colors Misaligned** - Color coding for priority is counterintuitive (orange for medium, yellow for high)
-
-## Design
-
-### 1. Timeline vs Stats Analysis
-- Review both commands to identify overlaps
-- Define clear use cases for each
-- Consider merging or refactoring to eliminate confusion
-
-### 2. Gantt Chart Enhancement
-- Add date ranges visualization
-- Show dependencies between specs
-- Include progress indicators
-- Consider milestone markers
-
-### 3. Status Icon Improvements
-**Current Issues:**
-- Icons not self-explanatory
-- Need better visual differentiation
-
-**Proposed:**
-- Review and update status emoji mapping
-- Ensure icons are intuitive at a glance
-- Consider color coding or symbols that are universally understood
-
-### 4. Priority Color Refinement
-**Current (counterintuitive):**
-- Orange → Medium
-- Yellow → High
-
-**Proposed (intuitive):**
-- Green → Low
-- Yellow → Medium  
-- Orange → High
-- Red → Critical
-
-Aligns with common traffic light / alert level conventions.
-
-## Plan
-
-- [ ] Audit `timeline` and `stats` commands for functional overlap
-- [ ] Define distinct purposes or merge functionality
-- [ ] Research better status emoji/icon options
-- [ ] Update status icon mapping
-- [ ] Revise priority color scheme to intuitive model
-- [ ] Enhance `gantt` command with date ranges and dependencies
-- [ ] Update tests for affected commands
-- [ ] Update documentation
-
-## Test
-
-- [ ] All visualization commands produce clear, distinct outputs
-- [ ] Priority colors follow intuitive scheme (green→yellow→orange→red)
-- [ ] Status icons are immediately recognizable
-- [ ] Gantt chart displays meaningful timeline information
-- [ ] No confusion between timeline and stats purposes
-- [ ] Visual tests confirm color rendering
-
-## Notes
-
-### Files to Review
-- `src/commands/stats.ts` - Stats command implementation
-- `src/commands/timeline.ts` - Timeline command implementation
-- `src/commands/gantt.ts` - Gantt chart implementation
-- `src/commands/board.ts` - Board command (may have status icons)
-- `src/components/StatsDisplay.tsx` - Stats UI component
-- Color/icon constants likely in utils or config
-
-### Considerations
-- Maintain backward compatibility where possible
-- Consider user configuration for color preferences
-- Document reasoning for icon/color choices
-- Get feedback on visual changes before finalizing

package/.next/standalone/packages/ui/dist/standalone/specs/archived/030-created-date-format-bug/README.md

@@ -1,87 +0,0 @@
----
-status: complete
-created: '2025-11-03'
-tags:
-  - bug
-  - frontmatter
-priority: high
-completed: '2025-11-03'
----
-
-# created-date-format-bug
-
-> **Status**: ✅ Complete · **Priority**: High · **Created**: 2025-11-03 · **Tags**: bug, frontmatter
-
-**Project**: lean-spec  
-**Team**: Core Development
-
-## Overview
-
-The `lean-spec create` command creates spec files with a `created` field in the frontmatter. The intended format is `YYYY-MM-DD` (e.g., `2025-11-03`), but after the file is written, the field appears as a full ISO 8601 date string: `2025-11-03T00:00:00.000Z`.
-
-**Root Cause**: 
-- `gray-matter` automatically parses YAML dates into JavaScript `Date` objects
-- When `matter.stringify()` writes the frontmatter back, it converts the Date object to ISO string format
-- This happens in `src/commands/create.ts` when updating frontmatter with tags, priority, assignee, or custom fields
-
-**Impact**:
-- Inconsistent date format in frontmatter (ISO string vs YYYY-MM-DD)
-- Breaks the expected format documented in AGENTS.md
-- Visual appearance is less clean
-- May cause issues with date parsing in other tools
-
-## Design
-
-**Solution**: Configure `gray-matter` to preserve date strings as-is, without automatic parsing.
-
-Use the `engines` option in `gray-matter`:
-
-```typescript
-const parsed = matter(content, {
-  engines: {
-    yaml: (str) => require('js-yaml').load(str, { schema: require('js-yaml').FAILSAFE_SCHEMA })
-  }
-});
-```
-
-The `FAILSAFE_SCHEMA` prevents automatic type coercion, keeping dates as strings.
-
-**Alternative approaches considered**:
-1. Manually convert Date objects back to `YYYY-MM-DD` format - fragile, easy to miss edge cases
-2. Use a custom YAML schema - more complex configuration
-3. Post-process the stringified output - regex-based string manipulation is error-prone
-
-## Plan
-
-- [ ] Update `src/commands/create.ts` to configure `gray-matter` with FAILSAFE_SCHEMA
-- [ ] Update `src/frontmatter.ts` to configure `gray-matter` with FAILSAFE_SCHEMA in read/update functions
-- [ ] Add integration test verifying created field stays as `YYYY-MM-DD` after create
-- [ ] Add test for update command to verify dates remain in correct format
-- [ ] Check all other places where `matter()` is called for consistency
-
-## Test
-
-- [ ] Create a new spec: `lean-spec create test-spec` - verify `created` field is `YYYY-MM-DD`
-- [ ] Create with tags: `lean-spec create test-spec --tags=foo` - verify `created` remains `YYYY-MM-DD`
-- [ ] Create with custom fields: `lean-spec create test-spec --field epic=123` - verify format preserved
-- [ ] Update existing spec: `lean-spec update test-spec --status=in-progress` - verify dates stay formatted
-- [ ] Run full test suite: `pnpm test` - all existing tests pass
-
-## Notes
-
-**Related Files**:
-- `src/commands/create.ts` - Where specs are created and frontmatter is initially written
-- `src/frontmatter.ts` - `parseFrontmatter()` and `updateFrontmatterField()` functions
-- `src/utils/variable-resolver.ts` - Date generation logic
-
-**Reproduction**:
-```bash
-# This spec itself demonstrates the bug - check the frontmatter above
-lean-spec create test-spec --tags=demo
-cat specs/*/test-spec/README.md | head -5
-# created: 2025-11-03T00:00:00.000Z  <- BUG
-```
-
-**References**:
-- gray-matter docs: https://github.com/jonschlinkert/gray-matter
-- js-yaml schemas: https://github.com/nodeca/js-yaml#schema