Repository navigation
Sprint 2: View Migration Progress (PromptWorkbench & Repository) - #17
Merged
Merged
Conversation
Remove all 30+ inline styles, replacing with design system components: New Components Created: - ScrollArea component with Radix UI (@radix-ui/react-scroll-area) PromptWorkbenchView Changes: - Session list sidebar → Card with ScrollArea - Session items → Card with hover states and transitions - Status badges → Badge component with variants - Create form → Card with Textarea, proper structure - Error alerts → Alert component with destructive variant - Session info → Card with Badge components for status/draft/validation - IR preview → Card with ScrollArea and proper code styling - Ambiguities → Nested Card structure with proper spacing - Suggestions → Button components with secondary variant - Resolution inputs → Input component - Success state → Alert with success variant Design System Improvements: - RefreshCw, X, CheckCircle2 icons from lucide-react - Proper hover states and transitions - Consistent spacing with space-y-* classes - ScrollArea for overflow management - Badge variants for semantic colors - Proper card nesting and structure Result: 0 inline styles, 100% design system usage Bundle Impact: - PromptWorkbenchView chunk: 20.47 kB (6.40 kB gzipped) - Lazy loaded on demand 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove all 25+ inline styles and CSS object definitions, replacing with design system components: RepositoryView Changes: - Removed all CSS style objects (formGridStyle, repoGridStyle, repoButtonStyle, labelStyle, inputStyle, timelineStyle, timelineItemStyle, actionBannerStyle) - Main structure → Proper Card with CardHeader, CardTitle, CardDescription, CardContent - Repository grid → Responsive grid with Card components for each repo - Selected state → border-brand and bg-accent classes with transitions - Loading/error states → Alert components with proper icons - Form inputs → Label + Input components with proper structure - Success/error messages → Alert variants (success/destructive) - Timeline → Ordered list with border-l-2 border-brand/50 for visual hierarchy - Timeline items → Proper spacing with space-y-4 and space-y-2 - Timeline actions → Button components with ghost variant - Action banner → Card with bg-accent/50 - Separator added between major sections - ScrollArea for timeline with 400px height Design System Improvements: - RefreshCw, CheckCircle2, AlertCircle icons from lucide-react - Proper responsive breakpoints (md:grid-cols-2, lg:grid-cols-3) - Consistent spacing throughout - Hover states with transition-all - Line-clamp-2 for description truncation - Badge variants for timeline status Result: 0 inline styles, 0 CSS objects, 100% design system usage Bundle Impact: - RepositoryView chunk: 5.96 kB (2.22 kB gzipped) - ScrollArea shared chunk: 12.53 kB (3.96 kB gzipped) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
8 tasks done
rand
added a commit
that referenced
this pull request
Oct 20, 2025
* Sprint 2.1: Migrate PromptWorkbenchView to design system Remove all 30+ inline styles, replacing with design system components: New Components Created: - ScrollArea component with Radix UI (@radix-ui/react-scroll-area) PromptWorkbenchView Changes: - Session list sidebar → Card with ScrollArea - Session items → Card with hover states and transitions - Status badges → Badge component with variants - Create form → Card with Textarea, proper structure - Error alerts → Alert component with destructive variant - Session info → Card with Badge components for status/draft/validation - IR preview → Card with ScrollArea and proper code styling - Ambiguities → Nested Card structure with proper spacing - Suggestions → Button components with secondary variant - Resolution inputs → Input component - Success state → Alert with success variant Design System Improvements: - RefreshCw, X, CheckCircle2 icons from lucide-react - Proper hover states and transitions - Consistent spacing with space-y-* classes - ScrollArea for overflow management - Badge variants for semantic colors - Proper card nesting and structure Result: 0 inline styles, 100% design system usage Bundle Impact: - PromptWorkbenchView chunk: 20.47 kB (6.40 kB gzipped) - Lazy loaded on demand 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Sprint 2.2: Migrate RepositoryView to design system Remove all 25+ inline styles and CSS object definitions, replacing with design system components: RepositoryView Changes: - Removed all CSS style objects (formGridStyle, repoGridStyle, repoButtonStyle, labelStyle, inputStyle, timelineStyle, timelineItemStyle, actionBannerStyle) - Main structure → Proper Card with CardHeader, CardTitle, CardDescription, CardContent - Repository grid → Responsive grid with Card components for each repo - Selected state → border-brand and bg-accent classes with transitions - Loading/error states → Alert components with proper icons - Form inputs → Label + Input components with proper structure - Success/error messages → Alert variants (success/destructive) - Timeline → Ordered list with border-l-2 border-brand/50 for visual hierarchy - Timeline items → Proper spacing with space-y-4 and space-y-2 - Timeline actions → Button components with ghost variant - Action banner → Card with bg-accent/50 - Separator added between major sections - ScrollArea for timeline with 400px height Design System Improvements: - RefreshCw, CheckCircle2, AlertCircle icons from lucide-react - Proper responsive breakpoints (md:grid-cols-2, lg:grid-cols-3) - Consistent spacing throughout - Hover states with transition-all - Line-clamp-2 for description truncation - Badge variants for timeline status Result: 0 inline styles, 0 CSS objects, 100% design system usage Bundle Impact: - RepositoryView chunk: 5.96 kB (2.22 kB gzipped) - ScrollArea shared chunk: 12.53 kB (3.96 kB gzipped) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Sprint 2 progress: Migrating remaining views to the design system. This PR includes the first 2 major view migrations.
✅ Sprint 2.1: Migrate PromptWorkbenchView
✅ Sprint 2.2: Migrate RepositoryView
New Components
@radix-ui/react-scroll-areapackagePerformance
PromptWorkbenchView:
RepositoryView:
ScrollArea (shared):
Main bundle: Stable at ~54 kB (20.47 kB gzipped)
Design System Progress
Views Migrated: 4/9 (44%)
Inline Styles Removed: ~70/140 (50%)
Design Patterns Established
All migrated views consistently use:
Testing
Files Changed
frontend/package.json- Added @radix-ui/react-scroll-areafrontend/src/components/ui/scroll-area.tsx- New componentfrontend/src/views/PromptWorkbenchView.tsx- Migrated (427 lines)frontend/src/views/RepositoryView.tsx- Migrated (306 lines)Next Steps
Continue Sprint 2 with remaining views:
🤖 Generated with Claude Code