Rework UI components to match shadcn Nova template

[frankbria]

Overview

Update the CodeFRAME web UI to use the shadcn Nova template for consistent styling and component architecture.

Current State

The existing UI components may not be following a consistent shadcn template configuration, which can lead to:

• Inconsistent styling across components
• Difficulty adding new shadcn components that match the design system
• Potential conflicts with future component additions

Desired State

All UI components should conform to the shadcn Nova template with the following configuration:

• Base: Radix UI
• Style: Nova
• Base Color: Gray
• Theme: Gray
• Icon Library: Hugeicons
• Font: Nunito Sans
• Menu Accent: Subtle
• Menu Color: Default
• Radius: Default
• Template: Next.js

Implementation Steps

1. Initialize shadcn Nova Template

Run the following command in the web-ui directory:

npx shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=gray&theme=gray&iconLibrary=hugeicons&font=nunito-sans&menuAccent=subtle&menuColor=default&radius=default&template=next" --template next

2. Audit Existing Components

• Identify all custom UI components in web-ui/src/components/
• List components that don't match the Nova template styling
• Document deviations from the template (colors, spacing, fonts, etc.)

3. Update Component Styling

For each non-conforming component:

• Update color schemes to use Nova gray palette
• Apply Nunito Sans font family
• Update spacing/radius to match template defaults
• Replace icons with Hugeicons equivalents
• Ensure Radix UI primitives are used where applicable

4. Verify New Component Additions

• Test adding a new shadcn component to confirm template recognition
• Verify the new component automatically matches the Nova theme
• Document the process for future component additions

5. Update Documentation

• Update CLAUDE.md with template verification steps
• Add component styling guidelines to development docs
• Include screenshots/examples of correctly styled components

Acceptance Criteria

• shadcn template is initialized with Nova preset
• All existing UI components match Nova template styling (gray theme, Nunito Sans, Hugeicons)
• Adding new shadcn components automatically applies Nova styling
• No visual regressions in Dashboard, ContextPanel, AgentStateProvider, or other key components
• Documentation updated with template configuration and guidelines
• Frontend tests pass (100%)

Technical Notes

• Context7 MCP: Use Context7 MCP for latest Tailwind CSS documentation to avoid hard-to-debug UI bugs
• Testing: Run visual regression tests on Dashboard after changes
• Backwards Compatibility: No need to maintain old styling (pre-production app)

Files Likely Affected

web-ui/
├── components.json              # shadcn config (will be created/updated)
├── tailwind.config.ts           # Tailwind theme configuration
├── src/
│   ├── app/globals.css          # Global styles
│   └── components/              # All component files
│       ├── ui/                  # shadcn UI primitives
│       ├── dashboard/           # Dashboard components
│       ├── context/             # Context management components
│       └── metrics/             # Metrics components

Related

• Project guidelines: CLAUDE.md (UI Template section)
• Stack: TypeScript 5.3+, Next.js, Tailwind CSS, shadcn/ui

Priority

Medium - Improves developer experience and design consistency, but not blocking core functionality

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• [P1] Implement user authentication and authorization with Better Auth #132
• [P1] Implement missing CostDashboard UI elements (date filter, task breakdown, trend chart) #86
• Update E2E test expectations to match current Dashboard design #88
• Add data-testid attributes to Dashboard tabs for E2E testing #84
• Consolidate Task type definitions across codebase #53

🔗 Related PRs

#10 - feat(frontend): Multi-Agent State Management with React Context [merged]
#38 - fix(e2e): Improve Playwright test pass rate from 18% to 57% [merged]
#50 - feat: Implement Quality Gates Panel in Dashboard (#43) [merged]
#51 - feat: Add TaskStats component to Dashboard Overview tab [merged]
#93 - fix(e2e): Fix dashboard and metrics tests for tab-based UI rendering [merged]

👤 Suggested Assignees

• frankbria

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[traycerai]

Plan

Observations

The CodeFRAME web-ui currently uses a basic Tailwind CSS setup without shadcn/ui integration. Components use manual Tailwind classes with inconsistent styling patterns—some use Tailwind utilities (file:web-ui/src/components/AgentCard.tsx), while others use custom CSS classes (file:web-ui/src/components/context/ContextPanel.tsx). The project uses lucide-react for icons, which needs to be replaced with Hugeicons. No file:web-ui/components.json exists, indicating shadcn/ui has not been initialized. The codebase has 40+ component files across multiple directories (dashboard, context, metrics, quality-gates, review, checkpoints, tasks) that require styling updates.

Approach

The implementation follows a systematic migration to shadcn Nova template: (1) Initialize shadcn/ui with Nova preset configuration, (2) Update Tailwind config and global styles to match Nova theme (gray palette, Nunito Sans font, default radius), (3) Replace lucide-react with Hugeicons throughout all components, (4) Audit and update component styling to use Nova's gray color scheme and spacing conventions, (5) Verify new shadcn components automatically inherit Nova styling, and (6) Update documentation with template guidelines. This approach ensures consistent design system adoption while maintaining existing functionality and test coverage.

Implementation Steps

1. Initialize shadcn/ui with Nova Template

Navigate to file:web-ui directory and run the shadcn initialization command with Nova preset:

cd web-ui
npx shadcn@latest init --defaults false

When prompted, configure:

• TypeScript: Yes
• Style: Nova
• Base color: Gray
• CSS variables: Yes
• Tailwind config: file:web-ui/tailwind.config.ts
• Components directory: @/components
• Utils directory: @/lib/utils
• React Server Components: No (using Next.js client components)
• Icon library: Hugeicons

This creates file:web-ui/components.json with the Nova configuration.

2. Update Tailwind Configuration

Modify file:web-ui/tailwind.config.ts to include shadcn Nova theme extensions:

• Add tailwindcss-animate plugin
• Extend theme with CSS variables for colors (background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring)
• Configure gray color palette as base
• Set up Nunito Sans font family in theme.extend.fontFamily
• Configure default border radius values
• Add dark mode support with class strategy

3. Update Global Styles

Modify file:web-ui/src/app/globals.css to include shadcn Nova CSS variables:

• Remove existing custom CSS variables (lines 5-9)
• Add shadcn base layer with CSS variables for light and dark themes
• Define gray color scale using HSL values
• Set Nunito Sans as default font
• Configure default border radius
• Add utility classes for Nova-specific spacing and shadows

4. Install Required Dependencies

Update file:web-ui/package.json dependencies:

Add:

• @radix-ui/react-* primitives (slot, dialog, dropdown-menu, select, tooltip, etc.)
• tailwindcss-animate for animations
• @hugeicons/react for icon library
• class-variance-authority (already present)
• clsx and tailwind-merge for className utilities

Remove:

• lucide-react (replace with Hugeicons)

Run npm install to install new dependencies.

5. Create Utility Functions

Create file:web-ui/src/lib/utils.ts with cn() helper function for merging Tailwind classes using clsx and tailwind-merge.

6. Replace Icon Library

Search and replace across all component files:

Find all imports from lucide-react and replace with equivalent Hugeicons:

• Download → @hugeicons/react/Download01Icon
• Other icons as needed

Update icon usage in:

• file:web-ui/src/components/metrics/CostDashboard.tsx (Download icon)
• Any other components using lucide-react icons

7. Audit and Update Component Styling

7.1 Dashboard Components

file:web-ui/src/components/Dashboard.tsx:

• Replace color classes: bg-gray-50 → bg-background, bg-white → bg-card
• Update border colors: border-gray-200 → border-border
• Replace text colors: text-gray-900 → text-foreground, text-gray-500 → text-muted-foreground
• Update button styles to use Nova gray palette
• Replace status badges with Nova-styled variants
• Update tab navigation styling with Nova accent colors

file:web-ui/src/components/AgentCard.tsx:

• Replace status color mappings (green/yellow/red) with Nova gray variants
• Update badge styling to use bg-secondary, text-secondary-foreground
• Replace custom border colors with border-border
• Update hover states to use Nova shadow utilities

file:web-ui/src/components/AgentList.tsx:

• Update card backgrounds to bg-card
• Replace gray color variants with Nova palette
• Update spacing to match Nova's compact layout

7.2 Context Management Components

file:web-ui/src/components/context/ContextPanel.tsx:

• Remove custom CSS classes (.context-panel, .token-usage-section, etc.)
• Replace with Tailwind utilities using Nova palette
• Update section backgrounds to bg-card
• Replace tier color indicators with Nova gray scale
• Update progress bars with Nova styling

file:web-ui/src/components/context/ContextItemList.tsx:

• Update list item styling with Nova card styles
• Replace custom colors with Nova palette

file:web-ui/src/components/context/ContextTierChart.tsx:

• Update chart colors to use Nova gray scale
• Replace custom styling with Tailwind utilities

7.3 Metrics Components

file:web-ui/src/components/metrics/CostDashboard.tsx:

• Replace bg-blue-50, bg-green-50, bg-purple-50 with Nova gray variants
• Update table styling: bg-gray-50 → bg-muted, text-gray-500 → text-muted-foreground
• Replace button colors with Nova primary/secondary variants
• Update chart colors to use Nova gray palette
• Replace select dropdown styling with Nova form controls

file:web-ui/src/components/metrics/TokenUsageChart.tsx:

• Update chart colors to Nova gray scale
• Replace custom styling with Nova utilities

file:web-ui/src/components/metrics/AgentMetrics.tsx:

• Update card styling to match Nova theme
• Replace color indicators with Nova palette

7.4 Quality Gates Components

file:web-ui/src/components/quality-gates/QualityGatesPanel.tsx:

• Update gate status indicators with Nova colors
• Replace card backgrounds with bg-card
• Update border styling with border-border

file:web-ui/src/components/quality-gates/GateStatusIndicator.tsx:

• Replace status colors (success/warning/error) with Nova gray variants
• Update icon styling

file:web-ui/src/components/quality-gates/QualityGatesPanelFallback.tsx:

• Update error state styling with Nova palette
• Replace button styling

7.5 Review Components

file:web-ui/src/components/review/ReviewResultsPanel.tsx:

• Update panel styling with Nova card styles
• Replace color indicators with Nova palette

file:web-ui/src/components/review/ReviewFindingsList.tsx:

• Update list styling with Nova utilities
• Replace severity colors with Nova gray scale

file:web-ui/src/components/review/ReviewScoreChart.tsx:

• Update chart colors to Nova palette

file:web-ui/src/components/reviews/ReviewSummary.tsx:

• Update summary card styling
• Replace colors with Nova theme

7.6 Checkpoint Components

file:web-ui/src/components/checkpoints/CheckpointList.tsx:

• Update list item styling with Nova card styles
• Replace button styling with Nova variants

file:web-ui/src/components/checkpoints/CheckpointRestore.tsx:

• Update modal/dialog styling with Nova theme
• Replace form controls with Nova-styled inputs

7.7 Task Components

file:web-ui/src/components/tasks/TaskStats.tsx:

• Update statistics card styling
• Replace color indicators with Nova palette

file:web-ui/src/components/TaskTreeView.tsx:

• Update tree view styling with Nova utilities
• Replace expand/collapse icons with Hugeicons

7.8 Other Components

file:web-ui/src/components/BlockerPanel.tsx, BlockerModal.tsx, BlockerBadge.tsx:

• Update blocker styling with Nova theme
• Replace status colors with Nova palette
• Update modal styling with Radix UI Dialog primitives

file:web-ui/src/components/ChatInterface.tsx:

• Update chat UI with Nova card styles
• Replace input styling with Nova form controls

file:web-ui/src/components/PRDModal.tsx:

• Update modal styling with Radix UI Dialog
• Replace content styling with Nova theme

file:web-ui/src/components/SessionStatus.tsx:

• Update status indicator styling
• Replace colors with Nova palette

file:web-ui/src/components/DiscoveryProgress.tsx:

• Update progress bar styling with Nova theme
• Replace color indicators

file:web-ui/src/components/PhaseIndicator.tsx:

• Update phase styling with Nova palette

file:web-ui/src/components/ProgressBar.tsx:

• Replace with Nova-styled progress component

file:web-ui/src/components/Spinner.tsx:

• Update loading spinner with Nova styling

file:web-ui/src/components/ErrorBoundary.tsx:

• Update error state styling with Nova theme

8. Install shadcn UI Components

Add commonly used shadcn components that match Nova template:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add select
npx shadcn@latest add input
npx shadcn@latest add badge
npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add progress
npx shadcn@latest add tooltip

These will be created in file:web-ui/src/components/ui/ with Nova styling automatically applied.

9. Update Component Imports

Replace custom component implementations with shadcn UI components where applicable:

• Replace custom button implementations with @/components/ui/button
• Replace custom card wrappers with @/components/ui/card
• Replace custom modals with @/components/ui/dialog
• Replace custom select dropdowns with @/components/ui/select
• Replace custom badges with @/components/ui/badge
• Replace custom tables with @/components/ui/table
• Replace custom tabs with @/components/ui/tabs
• Replace custom progress bars with @/components/ui/progress

10. Verify Template Configuration

Test that new shadcn components automatically apply Nova styling:

npx shadcn@latest add alert

Verify the generated file:web-ui/src/components/ui/alert.tsx uses:

• Nova gray color palette
• Nunito Sans font
• Default border radius
• Hugeicons for icons
• Compact spacing (Nova style)

11. Update Font Configuration

Modify file:web-ui/src/app/layout.tsx to import and apply Nunito Sans font:

import { Nunito_Sans } from 'next/font/google'

const nunitoSans = Nunito_Sans({ 
  subsets: ['latin'],
  variable: '--font-sans',
})

Apply font variable to body element.

12. Run Tests and Fix Issues

Execute test suite to ensure no visual regressions:

cd web-ui
npm test

Address any test failures related to:

• Changed className selectors
• Updated component structure
• Icon import changes

13. Visual Regression Testing

Manually test key UI components in browser:

• Dashboard overview tab
• Context panel with agent selection
• Cost dashboard with charts
• Quality gates panel
• Blocker modal interactions
• Agent cards and status indicators

Verify:

• Gray theme applied consistently
• Nunito Sans font rendering
• Hugeicons displaying correctly
• Spacing matches Nova compact layout
• No color inconsistencies

14. Update Documentation

14.1 Update file:CLAUDE.md

Add new section "UI Template Configuration" with:

## UI Template Configuration

### shadcn/ui Nova Template

The web-ui uses shadcn/ui with the Nova template for consistent styling:

**Configuration:**
- **Base**: Radix UI primitives
- **Style**: Nova (compact spacing)
- **Base Color**: Gray
- **Theme**: Gray palette
- **Icon Library**: Hugeicons (@hugeicons/react)
- **Font**: Nunito Sans
- **Menu Accent**: Subtle
- **Menu Color**: Default
- **Radius**: Default

**Adding New Components:**
```bash
cd web-ui
npx shadcn@latest add <component-name>

Components are automatically styled with Nova theme.

Color Palette:

• Background: bg-background
• Card: bg-card
• Primary: bg-primary
• Secondary: bg-secondary
• Muted: bg-muted
• Accent: bg-accent
• Destructive: bg-destructive

Typography:

• Foreground: text-foreground
• Muted: text-muted-foreground
• Primary: text-primary-foreground

Verification:
Check file:web-ui/components.json for template configuration.

#### 14.2 Create Component Styling Guidelines

Add section to file:CLAUDE.md:

```markdown
### Component Styling Guidelines

**DO:**
- Use shadcn UI components from `@/components/ui/`
- Use Nova color palette variables (`bg-card`, `text-foreground`, etc.)
- Use Hugeicons for all icons
- Follow Nova's compact spacing conventions
- Use `cn()` utility for conditional classes

**DON'T:**
- Use hardcoded color values (e.g., `bg-blue-500`)
- Mix lucide-react with Hugeicons
- Create custom CSS classes (use Tailwind utilities)
- Override Nova theme variables without documentation

**Example:**
```typescript
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Download01Icon } from '@hugeicons/react'

<Card className="bg-card border-border">
  <Button variant="secondary">
    <Download01Icon className="mr-2 h-4 w-4" />
    Export
  </Button>
</Card>

### 15. Acceptance Criteria Verification

Verify all acceptance criteria are met:

- ✅ shadcn template initialized with Nova preset (file:web-ui/components.json exists)
- ✅ All UI components match Nova styling (gray theme, Nunito Sans, Hugeicons)
- ✅ Adding new shadcn components automatically applies Nova styling
- ✅ No visual regressions in Dashboard, ContextPanel, AgentStateProvider, or other key components
- ✅ Documentation updated with template configuration and guidelines (file:CLAUDE.md)
- ✅ Frontend tests pass (100%)

## Component Update Summary

```mermaid
graph TD
    A[Initialize shadcn Nova] --> B[Update Tailwind Config]
    B --> C[Update Global Styles]
    C --> D[Install Dependencies]
    D --> E[Replace Icons]
    E --> F[Update Components]
    
    F --> F1[Dashboard Components]
    F --> F2[Context Components]
    F --> F3[Metrics Components]
    F --> F4[Quality Gates]
    F --> F5[Review Components]
    F --> F6[Checkpoint Components]
    F --> F7[Task Components]
    F --> F8[Other Components]
    
    F1 --> G[Install shadcn UI]
    F2 --> G
    F3 --> G
    F4 --> G
    F5 --> G
    F6 --> G
    F7 --> G
    F8 --> G
    
    G --> H[Update Imports]
    H --> I[Verify Template]
    I --> J[Update Font Config]
    J --> K[Run Tests]
    K --> L[Visual Testing]
    L --> M[Update Docs]

Files Requiring Updates

Category	Files	Changes
Configuration	file:web-ui/components.json (new) file:web-ui/tailwind.config.ts file:web-ui/src/app/globals.css file:web-ui/package.json file:web-ui/src/app/layout.tsx	Nova template config, theme variables, dependencies, font setup
Utilities	file:web-ui/src/lib/utils.ts (new)	className merging helper
Dashboard	file:web-ui/src/components/Dashboard.tsx file:web-ui/src/components/AgentCard.tsx file:web-ui/src/components/AgentList.tsx	Nova palette, spacing, icons
Context	file:web-ui/src/components/context/ContextPanel.tsx file:web-ui/src/components/context/ContextItemList.tsx file:web-ui/src/components/context/ContextTierChart.tsx	Remove custom CSS, Nova styling
Metrics	file:web-ui/src/components/metrics/CostDashboard.tsx file:web-ui/src/components/metrics/TokenUsageChart.tsx file:web-ui/src/components/metrics/AgentMetrics.tsx	Nova palette, Hugeicons, form controls
Quality Gates	file:web-ui/src/components/quality-gates/QualityGatesPanel.tsx file:web-ui/src/components/quality-gates/GateStatusIndicator.tsx file:web-ui/src/components/quality-gates/QualityGatesPanelFallback.tsx	Nova status colors, card styling
Review	file:web-ui/src/components/review/ReviewResultsPanel.tsx file:web-ui/src/components/review/ReviewFindingsList.tsx file:web-ui/src/components/review/ReviewScoreChart.tsx file:web-ui/src/components/reviews/ReviewSummary.tsx	Nova palette, chart colors
Checkpoints	file:web-ui/src/components/checkpoints/CheckpointList.tsx file:web-ui/src/components/checkpoints/CheckpointRestore.tsx	Nova card styles, Radix Dialog
Tasks	file:web-ui/src/components/tasks/TaskStats.tsx file:web-ui/src/components/TaskTreeView.tsx	Nova palette, Hugeicons
Other	file:web-ui/src/components/BlockerPanel.tsx file:web-ui/src/components/BlockerModal.tsx file:web-ui/src/components/BlockerBadge.tsx file:web-ui/src/components/ChatInterface.tsx file:web-ui/src/components/PRDModal.tsx file:web-ui/src/components/SessionStatus.tsx file:web-ui/src/components/DiscoveryProgress.tsx file:web-ui/src/components/PhaseIndicator.tsx file:web-ui/src/components/ProgressBar.tsx file:web-ui/src/components/Spinner.tsx file:web-ui/src/components/ErrorBoundary.tsx	Nova styling, Radix primitives
Documentation	file:CLAUDE.md	UI template section, styling guidelines

Color Mapping Reference

Current	Nova Equivalent	Usage
bg-gray-50	bg-background	Page background
bg-white	bg-card	Card/panel background
bg-gray-100	bg-muted	Subtle backgrounds
text-gray-900	text-foreground	Primary text
text-gray-500	text-muted-foreground	Secondary text
border-gray-200	border-border	Borders
bg-blue-600	bg-primary	Primary actions
bg-gray-200	bg-secondary	Secondary actions
Custom colors	Nova gray scale	Status indicators

Import In IDE

🤖 Prompt for AI Agents

## Observations

The CodeFRAME web-ui currently uses a basic Tailwind CSS setup without shadcn/ui integration. Components use manual Tailwind classes with inconsistent styling patterns—some use Tailwind utilities (file:web-ui/src/components/AgentCard.tsx), while others use custom CSS classes (file:web-ui/src/components/context/ContextPanel.tsx). The project uses lucide-react for icons, which needs to be replaced with Hugeicons. No file:web-ui/components.json exists, indicating shadcn/ui has not been initialized. The codebase has 40+ component files across multiple directories (dashboard, context, metrics, quality-gates, review, checkpoints, tasks) that require styling updates.

## Approach

The implementation follows a systematic migration to shadcn Nova template: (1) Initialize shadcn/ui with Nova preset configuration, (2) Update Tailwind config and global styles to match Nova theme (gray palette, Nunito Sans font, default radius), (3) Replace lucide-react with Hugeicons throughout all components, (4) Audit and update component styling to use Nova's gray color scheme and spacing conventions, (5) Verify new shadcn components automatically inherit Nova styling, and (6) Update documentation with template guidelines. This approach ensures consistent design system adoption while maintaining existing functionality and test coverage.

## Implementation Steps

### 1. Initialize shadcn/ui with Nova Template

Navigate to file:web-ui directory and run the shadcn initialization command with Nova preset:

```bash
cd web-ui
npx shadcn@latest init --defaults false
```

When prompted, configure:
- **TypeScript**: Yes
- **Style**: Nova
- **Base color**: Gray
- **CSS variables**: Yes
- **Tailwind config**: file:web-ui/tailwind.config.ts
- **Components directory**: `@/components`
- **Utils directory**: `@/lib/utils`
- **React Server Components**: No (using Next.js client components)
- **Icon library**: Hugeicons

This creates file:web-ui/components.json with the Nova configuration.

### 2. Update Tailwind Configuration

Modify file:web-ui/tailwind.config.ts to include shadcn Nova theme extensions:

- Add `tailwindcss-animate` plugin
- Extend theme with CSS variables for colors (background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring)
- Configure gray color palette as base
- Set up Nunito Sans font family in theme.extend.fontFamily
- Configure default border radius values
- Add dark mode support with `class` strategy

### 3. Update Global Styles

Modify file:web-ui/src/app/globals.css to include shadcn Nova CSS variables:

- Remove existing custom CSS variables (lines 5-9)
- Add shadcn base layer with CSS variables for light and dark themes
- Define gray color scale using HSL values
- Set Nunito Sans as default font
- Configure default border radius
- Add utility classes for Nova-specific spacing and shadows

### 4. Install Required Dependencies

Update file:web-ui/package.json dependencies:

**Add:**
- `@radix-ui/react-*` primitives (slot, dialog, dropdown-menu, select, tooltip, etc.)
- `tailwindcss-animate` for animations
- `@hugeicons/react` for icon library
- `class-variance-authority` (already present)
- `clsx` and `tailwind-merge` for className utilities

**Remove:**
- `lucide-react` (replace with Hugeicons)

Run `npm install` to install new dependencies.

### 5. Create Utility Functions

Create file:web-ui/src/lib/utils.ts with `cn()` helper function for merging Tailwind classes using `clsx` and `tailwind-merge`.

### 6. Replace Icon Library

**Search and replace across all component files:**

Find all imports from `lucide-react` and replace with equivalent Hugeicons:
- `Download` → `@hugeicons/react/Download01Icon`
- Other icons as needed

Update icon usage in:
- file:web-ui/src/components/metrics/CostDashboard.tsx (Download icon)
- Any other components using lucide-react icons

### 7. Audit and Update Component Styling

#### 7.1 Dashboard Components

**file:web-ui/src/components/Dashboard.tsx:**
- Replace color classes: `bg-gray-50` → `bg-background`, `bg-white` → `bg-card`
- Update border colors: `border-gray-200` → `border-border`
- Replace text colors: `text-gray-900` → `text-foreground`, `text-gray-500` → `text-muted-foreground`
- Update button styles to use Nova gray palette
- Replace status badges with Nova-styled variants
- Update tab navigation styling with Nova accent colors

**file:web-ui/src/components/AgentCard.tsx:**
- Replace status color mappings (green/yellow/red) with Nova gray variants
- Update badge styling to use `bg-secondary`, `text-secondary-foreground`
- Replace custom border colors with `border-border`
- Update hover states to use Nova shadow utilities

**file:web-ui/src/components/AgentList.tsx:**
- Update card backgrounds to `bg-card`
- Replace gray color variants with Nova palette
- Update spacing to match Nova's compact layout

#### 7.2 Context Management Components

**file:web-ui/src/components/context/ContextPanel.tsx:**
- Remove custom CSS classes (`.context-panel`, `.token-usage-section`, etc.)
- Replace with Tailwind utilities using Nova palette
- Update section backgrounds to `bg-card`
- Replace tier color indicators with Nova gray scale
- Update progress bars with Nova styling

**file:web-ui/src/components/context/ContextItemList.tsx:**
- Update list item styling with Nova card styles
- Replace custom colors with Nova palette

**file:web-ui/src/components/context/ContextTierChart.tsx:**
- Update chart colors to use Nova gray scale
- Replace custom styling with Tailwind utilities

#### 7.3 Metrics Components

**file:web-ui/src/components/metrics/CostDashboard.tsx:**
- Replace `bg-blue-50`, `bg-green-50`, `bg-purple-50` with Nova gray variants
- Update table styling: `bg-gray-50` → `bg-muted`, `text-gray-500` → `text-muted-foreground`
- Replace button colors with Nova primary/secondary variants
- Update chart colors to use Nova gray palette
- Replace select dropdown styling with Nova form controls

**file:web-ui/src/components/metrics/TokenUsageChart.tsx:**
- Update chart colors to Nova gray scale
- Replace custom styling with Nova utilities

**file:web-ui/src/components/metrics/AgentMetrics.tsx:**
- Update card styling to match Nova theme
- Replace color indicators with Nova palette

#### 7.4 Quality Gates Components

**file:web-ui/src/components/quality-gates/QualityGatesPanel.tsx:**
- Update gate status indicators with Nova colors
- Replace card backgrounds with `bg-card`
- Update border styling with `border-border`

**file:web-ui/src/components/quality-gates/GateStatusIndicator.tsx:**
- Replace status colors (success/warning/error) with Nova gray variants
- Update icon styling

**file:web-ui/src/components/quality-gates/QualityGatesPanelFallback.tsx:**
- Update error state styling with Nova palette
- Replace button styling

#### 7.5 Review Components

**file:web-ui/src/components/review/ReviewResultsPanel.tsx:**
- Update panel styling with Nova card styles
- Replace color indicators with Nova palette

**file:web-ui/src/components/review/ReviewFindingsList.tsx:**
- Update list styling with Nova utilities
- Replace severity colors with Nova gray scale

**file:web-ui/src/components/review/ReviewScoreChart.tsx:**
- Update chart colors to Nova palette

**file:web-ui/src/components/reviews/ReviewSummary.tsx:**
- Update summary card styling
- Replace colors with Nova theme

#### 7.6 Checkpoint Components

**file:web-ui/src/components/checkpoints/CheckpointList.tsx:**
- Update list item styling with Nova card styles
- Replace button styling with Nova variants

**file:web-ui/src/components/checkpoints/CheckpointRestore.tsx:**
- Update modal/dialog styling with Nova theme
- Replace form controls with Nova-styled inputs

#### 7.7 Task Components

**file:web-ui/src/components/tasks/TaskStats.tsx:**
- Update statistics card styling
- Replace color indicators with Nova palette

**file:web-ui/src/components/TaskTreeView.tsx:**
- Update tree view styling with Nova utilities
- Replace expand/collapse icons with Hugeicons

#### 7.8 Other Components

**file:web-ui/src/components/BlockerPanel.tsx, BlockerModal.tsx, BlockerBadge.tsx:**
- Update blocker styling with Nova theme
- Replace status colors with Nova palette
- Update modal styling with Radix UI Dialog primitives

**file:web-ui/src/components/ChatInterface.tsx:**
- Update chat UI with Nova card styles
- Replace input styling with Nova form controls

**file:web-ui/src/components/PRDModal.tsx:**
- Update modal styling with Radix UI Dialog
- Replace content styling with Nova theme

**file:web-ui/src/components/SessionStatus.tsx:**
- Update status indicator styling
- Replace colors with Nova palette

**file:web-ui/src/components/DiscoveryProgress.tsx:**
- Update progress bar styling with Nova theme
- Replace color indicators

**file:web-ui/src/components/PhaseIndicator.tsx:**
- Update phase styling with Nova palette

**file:web-ui/src/components/ProgressBar.tsx:**
- Replace with Nova-styled progress component

**file:web-ui/src/components/Spinner.tsx:**
- Update loading spinner with Nova styling

**file:web-ui/src/components/ErrorBoundary.tsx:**
- Update error state styling with Nova theme

### 8. Install shadcn UI Components

Add commonly used shadcn components that match Nova template:

```bash
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add select
npx shadcn@latest add input
npx shadcn@latest add badge
npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add progress
npx shadcn@latest add tooltip
```

These will be created in file:web-ui/src/components/ui/ with Nova styling automatically applied.

### 9. Update Component Imports

Replace custom component implementations with shadcn UI components where applicable:

- Replace custom button implementations with `@/components/ui/button`
- Replace custom card wrappers with `@/components/ui/card`
- Replace custom modals with `@/components/ui/dialog`
- Replace custom select dropdowns with `@/components/ui/select`
- Replace custom badges with `@/components/ui/badge`
- Replace custom tables with `@/components/ui/table`
- Replace custom tabs with `@/components/ui/tabs`
- Replace custom progress bars with `@/components/ui/progress`

### 10. Verify Template Configuration

Test that new shadcn components automatically apply Nova styling:

```bash
npx shadcn@latest add alert
```

Verify the generated file:web-ui/src/components/ui/alert.tsx uses:
- Nova gray color palette
- Nunito Sans font
- Default border radius
- Hugeicons for icons
- Compact spacing (Nova style)

### 11. Update Font Configuration

Modify file:web-ui/src/app/layout.tsx to import and apply Nunito Sans font:

```typescript
import { Nunito_Sans } from 'next/font/google'

const nunitoSans = Nunito_Sans({ 
  subsets: ['latin'],
  variable: '--font-sans',
})
```

Apply font variable to body element.

### 12. Run Tests and Fix Issues

Execute test suite to ensure no visual regressions:

```bash
cd web-ui
npm test
```

Address any test failures related to:
- Changed className selectors
- Updated component structure
- Icon import changes

### 13. Visual Regression Testing

Manually test key UI components in browser:

- Dashboard overview tab
- Context panel with agent selection
- Cost dashboard with charts
- Quality gates panel
- Blocker modal interactions
- Agent cards and status indicators

Verify:
- Gray theme applied consistently
- Nunito Sans font rendering
- Hugeicons displaying correctly
- Spacing matches Nova compact layout
- No color inconsistencies

### 14. Update Documentation

#### 14.1 Update file:CLAUDE.md

Add new section "UI Template Configuration" with:

```markdown
## UI Template Configuration

### shadcn/ui Nova Template

The web-ui uses shadcn/ui with the Nova template for consistent styling:

**Configuration:**
- **Base**: Radix UI primitives
- **Style**: Nova (compact spacing)
- **Base Color**: Gray
- **Theme**: Gray palette
- **Icon Library**: Hugeicons (@hugeicons/react)
- **Font**: Nunito Sans
- **Menu Accent**: Subtle
- **Menu Color**: Default
- **Radius**: Default

**Adding New Components:**
```bash
cd web-ui
npx shadcn@latest add <component-name>
```

Components are automatically styled with Nova theme.

**Color Palette:**
- Background: `bg-background`
- Card: `bg-card`
- Primary: `bg-primary`
- Secondary: `bg-secondary`
- Muted: `bg-muted`
- Accent: `bg-accent`
- Destructive: `bg-destructive`

**Typography:**
- Foreground: `text-foreground`
- Muted: `text-muted-foreground`
- Primary: `text-primary-foreground`

**Verification:**
Check file:web-ui/components.json for template configuration.
```

#### 14.2 Create Component Styling Guidelines

Add section to file:CLAUDE.md:

```markdown
### Component Styling Guidelines

**DO:**
- Use shadcn UI components from `@/components/ui/`
- Use Nova color palette variables (`bg-card`, `text-foreground`, etc.)
- Use Hugeicons for all icons
- Follow Nova's compact spacing conventions
- Use `cn()` utility for conditional classes

**DON'T:**
- Use hardcoded color values (e.g., `bg-blue-500`)
- Mix lucide-react with Hugeicons
- Create custom CSS classes (use Tailwind utilities)
- Override Nova theme variables without documentation

**Example:**
```typescript
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Download01Icon } from '@hugeicons/react'

<Card className="bg-card border-border">
  <Button variant="secondary">
    <Download01Icon className="mr-2 h-4 w-4" />
    Export
  </Button>
</Card>
```
```

### 15. Acceptance Criteria Verification

Verify all acceptance criteria are met:

- ✅ shadcn template initialized with Nova preset (file:web-ui/components.json exists)
- ✅ All UI components match Nova styling (gray theme, Nunito Sans, Hugeicons)
- ✅ Adding new shadcn components automatically applies Nova styling
- ✅ No visual regressions in Dashboard, ContextPanel, AgentStateProvider, or other key components
- ✅ Documentation updated with template configuration and guidelines (file:CLAUDE.md)
- ✅ Frontend tests pass (100%)

## Component Update Summary

```mermaid
graph TD
    A[Initialize shadcn Nova] --> B[Update Tailwind Config]
    B --> C[Update Global Styles]
    C --> D[Install Dependencies]
    D --> E[Replace Icons]
    E --> F[Update Components]
    
    F --> F1[Dashboard Components]
    F --> F2[Context Components]
    F --> F3[Metrics Components]
    F --> F4[Quality Gates]
    F --> F5[Review Components]
    F --> F6[Checkpoint Components]
    F --> F7[Task Components]
    F --> F8[Other Components]
    
    F1 --> G[Install shadcn UI]
    F2 --> G
    F3 --> G
    F4 --> G
    F5 --> G
    F6 --> G
    F7 --> G
    F8 --> G
    
    G --> H[Update Imports]
    H --> I[Verify Template]
    I --> J[Update Font Config]
    J --> K[Run Tests]
    K --> L[Visual Testing]
    L --> M[Update Docs]
```

## Files Requiring Updates

| Category | Files | Changes |
|----------|-------|---------|
| **Configuration** | file:web-ui/components.json (new)<br>file:web-ui/tailwind.config.ts<br>file:web-ui/src/app/globals.css<br>file:web-ui/package.json<br>file:web-ui/src/app/layout.tsx | Nova template config, theme variables, dependencies, font setup |
| **Utilities** | file:web-ui/src/lib/utils.ts (new) | className merging helper |
| **Dashboard** | file:web-ui/src/components/Dashboard.tsx<br>file:web-ui/src/components/AgentCard.tsx<br>file:web-ui/src/components/AgentList.tsx | Nova palette, spacing, icons |
| **Context** | file:web-ui/src/components/context/ContextPanel.tsx<br>file:web-ui/src/components/context/ContextItemList.tsx<br>file:web-ui/src/components/context/ContextTierChart.tsx | Remove custom CSS, Nova styling |
| **Metrics** | file:web-ui/src/components/metrics/CostDashboard.tsx<br>file:web-ui/src/components/metrics/TokenUsageChart.tsx<br>file:web-ui/src/components/metrics/AgentMetrics.tsx | Nova palette, Hugeicons, form controls |
| **Quality Gates** | file:web-ui/src/components/quality-gates/QualityGatesPanel.tsx<br>file:web-ui/src/components/quality-gates/GateStatusIndicator.tsx<br>file:web-ui/src/components/quality-gates/QualityGatesPanelFallback.tsx | Nova status colors, card styling |
| **Review** | file:web-ui/src/components/review/ReviewResultsPanel.tsx<br>file:web-ui/src/components/review/ReviewFindingsList.tsx<br>file:web-ui/src/components/review/ReviewScoreChart.tsx<br>file:web-ui/src/components/reviews/ReviewSummary.tsx | Nova palette, chart colors |
| **Checkpoints** | file:web-ui/src/components/checkpoints/CheckpointList.tsx<br>file:web-ui/src/components/checkpoints/CheckpointRestore.tsx | Nova card styles, Radix Dialog |
| **Tasks** | file:web-ui/src/components/tasks/TaskStats.tsx<br>file:web-ui/src/components/TaskTreeView.tsx | Nova palette, Hugeicons |
| **Other** | file:web-ui/src/components/BlockerPanel.tsx<br>file:web-ui/src/components/BlockerModal.tsx<br>file:web-ui/src/components/BlockerBadge.tsx<br>file:web-ui/src/components/ChatInterface.tsx<br>file:web-ui/src/components/PRDModal.tsx<br>file:web-ui/src/components/SessionStatus.tsx<br>file:web-ui/src/components/DiscoveryProgress.tsx<br>file:web-ui/src/components/PhaseIndicator.tsx<br>file:web-ui/src/components/ProgressBar.tsx<br>file:web-ui/src/components/Spinner.tsx<br>file:web-ui/src/components/ErrorBoundary.tsx | Nova styling, Radix primitives |
| **Documentation** | file:CLAUDE.md | UI template section, styling guidelines |

## Color Mapping Reference

| Current | Nova Equivalent | Usage |
|---------|----------------|-------|
| `bg-gray-50` | `bg-background` | Page background |
| `bg-white` | `bg-card` | Card/panel background |
| `bg-gray-100` | `bg-muted` | Subtle backgrounds |
| `text-gray-900` | `text-foreground` | Primary text |
| `text-gray-500` | `text-muted-foreground` | Secondary text |
| `border-gray-200` | `border-border` | Borders |
| `bg-blue-600` | `bg-primary` | Primary actions |
| `bg-gray-200` | `bg-secondary` | Secondary actions |
| Custom colors | Nova gray scale | Status indicators |

---

Execution Information

Branch: main
Commit: a8ace58

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.