dprint

Author: Boshen

.github/actions/setup-node-pnpm/action.yml

@@ -7,8 +7,8 @@ runs:
 
     - uses: actions/setup-node@v4
       with:
-        node-version: 'lts/*'
-        registry-url: 'https://registry.npmjs.org'
+        node-version: "lts/*"
+        registry-url: "https://registry.npmjs.org"
         # see pnpm cache setting below
       env:
         GITHUB_TOKEN: ${{ github.token }}

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [ main, develop ]
+    branches: [main, develop]
   pull_request:
-    branches: [ main, develop ]
+    branches: [main, develop]
 
 permissions: {}
 

.github/workflows/deploy.yml

@@ -2,13 +2,13 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
   workflow_dispatch:
 
 permissions: {}
 
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: false
 
 jobs:
@@ -38,7 +38,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './apps/dashboard/dist'
+          path: "./apps/dashboard/dist"
 
   deploy:
     permissions:

.github/workflows/update-rolldown-stats.yml

@@ -4,8 +4,8 @@ on:
   push:
     branches: [main]
     paths:
-      - 'apps/dashboard/**'
-      - 'tool/override-rolldown.js'
+      - "apps/dashboard/**"
+      - "tool/override-rolldown.js"
 
 permissions:
   contents: write

.oxlintrc.json

@@ -38,4 +38,4 @@
   },
   "globals": {},
   "ignorePatterns": ["dist"]
-}
+}

AGENTS.md

@@ -1,11 +1,13 @@
 # Vibe Dashboard
+
 A modern frontend dashboard for displaying different metrics using bar charts. Built with React 19, TypeScript, Vite 7, and organized as a pnpm monorepo.
 
 **ALWAYS follow these instructions first. Only fallback to additional search and context gathering if the information provided here is incomplete or found to be in error.**
 
 ## Working Effectively
 
 ### Prerequisites and Installation
+
 - Install Node.js v20 or higher (verified working with v20.19.4)
 - Install pnpm globally: `npm install -g pnpm` (requires pnpm v10 or higher)
 - Bootstrap the repository:
@@ -15,6 +17,7 @@ A modern frontend dashboard for displaying different metrics using bar charts. B
   - **Timing**: Takes approximately 10 seconds. NEVER CANCEL. Set timeout to 60+ seconds.
 
 ### Build and Development
+
 - Build the project:
   ```bash
   pnpm build
@@ -39,6 +42,14 @@ A modern frontend dashboard for displaying different metrics using bar charts. B
   - Runs ESLint across all packages
   - **ALWAYS run before committing** to avoid CI failures
 
+- Format the code:
+  ```bash
+  pnpm fmt
+  ```
+  - **Timing**: Takes approximately 2 seconds
+  - Runs dprint across all files
+  - **ALWAYS run before committing** to avoid CI failures
+
 - Clean build artifacts:
   ```bash
   pnpm clean
@@ -54,6 +65,7 @@ A modern frontend dashboard for displaying different metrics using bar charts. B
   - Takes under 1 second
 
 ### Repository Structure
+
 ```
 vibe-dashboard/
 ├── .github/                # GitHub configuration
@@ -77,6 +89,7 @@ vibe-dashboard/
 ## Validation
 
 ### Manual Testing Scenarios
+
 **ALWAYS test these scenarios after making changes:**
 
 1. **Basic functionality**:
@@ -98,6 +111,7 @@ vibe-dashboard/
    - Check that positive/negative change indicators are color-coded correctly
 
 ### Build Validation
+
 - **ALWAYS run before committing**:
   ```bash
   pnpm lint && pnpm build
@@ -108,6 +122,7 @@ vibe-dashboard/
 ## Common Tasks
 
 ### Adding New Metrics
+
 1. Edit `apps/dashboard/src/App.tsx`
 2. Add data array (follow pattern of `salesData`, `userActivityData`, `revenueData`)
 3. Add metric object to `metrics` array with:
@@ -119,21 +134,24 @@ vibe-dashboard/
 4. Customize chart rendering in the JSX if needed (current supports single bars and stacked bars)
 
 ### Key Files and Their Purpose
+
 - `apps/dashboard/src/App.tsx` - **MOST IMPORTANT**: Contains all metrics data and chart logic
 - `apps/dashboard/src/App.css` - Responsive dashboard styles with CSS Grid and Flexbox
 - `package.json` (root) - Workspace scripts and shared dependencies
 - `apps/dashboard/package.json` - App-specific dependencies (React, Recharts, Lucide icons)
 - `pnpm-workspace.yaml` - Monorepo configuration
 
 ### Technology Stack
+
 - **Frontend**: React 19 with TypeScript
-- **Build Tool**: Vite 7 (fast development and production builds)  
+- **Build Tool**: Vite 7 (fast development and production builds)
 - **Charts**: Recharts library for responsive bar charts
 - **Icons**: Lucide React for UI icons
 - **Styling**: Pure CSS with CSS Grid, Flexbox, and CSS variables
 - **Package Management**: pnpm workspaces for monorepo structure
 
 ### Common Commands Reference
+
 ```bash
 # Development workflow
 pnpm install          # Install dependencies (~10s)
@@ -148,14 +166,16 @@ pnpm -r build                  # Build all packages recursively
 ```
 
 ### Troubleshooting
+
 - **Build fails**: Check TypeScript errors, run `pnpm lint` first
 - **Dev server won't start**: Ensure port 5173 is available
 - **Charts not rendering**: Verify Recharts data format matches expected structure
 - **Styles broken**: Check CSS imports in `App.tsx` and `main.tsx`
 
 ### Development Notes
+
 - Uses Vite's fast refresh for instant updates during development
 - TypeScript strict mode enabled for better code quality
 - ESLint configured with React and TypeScript rules
 - No test framework currently configured (future enhancement opportunity)
-- Responsive design supports mobile and desktop viewports
+- Responsive design supports mobile and desktop viewports

README.md

@@ -23,6 +23,7 @@ A modern frontend dashboard for displaying different metrics using bar charts.
 ## ⚡ Performance
 
 The dashboard uses **rolldown-vite** for significantly faster build times and **oxlint** for ultra-fast linting:
+
 - **Build Performance**: ~13.8x faster builds (309ms vs 4.28s) with Rolldown
 - **Linting Performance**: Extremely fast linting (~2ms) with oxlint
 - **Development**: Fast startup (306ms) with Rolldown's Rust-based bundler
@@ -55,17 +56,20 @@ vibe-dashboard/
 ### Installation
 
 1. Clone the repository:
+
 ```bash
 git clone https://github.com/Boshen/vibe-dashboard.git
 cd vibe-dashboard
 ```
 
 2. Install dependencies:
+
 ```bash
 pnpm install
 ```
 
 3. Start the development server:
+
 ```bash
 pnpm dev
 ```
@@ -88,6 +92,7 @@ The dashboard is automatically deployed to GitHub Pages when changes are pushed
 **Live Demo**: [https://boshen.github.io/vibe-dashboard/](https://boshen.github.io/vibe-dashboard/)
 
 The deployment process:
+
 1. Runs linting and builds the project
 2. Deploys the built assets to GitHub Pages
 3. The app is served with the correct base path `/vibe-dashboard/`
@@ -127,6 +132,7 @@ pnpm rolldown:use pkg.pr.new/rolldown-rs/vite@1234
 ```
 
 The tool automatically:
+
 - Updates the package.json with the new version
 - Installs dependencies
 - Rebuilds the application
@@ -142,6 +148,7 @@ See [`tool/README.md`](tool/README.md) for detailed usage instructions.
 ### Styling
 
 The dashboard uses modern CSS with:
+
 - CSS Grid for responsive layouts
 - Flexbox for component alignment
 - Custom CSS variables for consistent theming

apps/dashboard/README.md

@@ -14,12 +14,14 @@ Currently, two official plugins are available:
 This project uses [oxlint](https://oxc.rs) for linting, which provides significantly faster performance than ESLint while maintaining compatibility with most ESLint rules.
 
 The configuration is in `.oxlintrc.json` and includes:
+
 - TypeScript plugin for TypeScript-specific rules
 - React plugin for React best practices
 - Unicorn plugin for additional code quality rules
 - OXC plugin for unique optimization rules
 
 To run linting:
+
 ```bash
 pnpm lint
 ```
@@ -29,4 +31,3 @@ To customize the configuration, edit `.oxlintrc.json`. Oxlint supports most ESLi
 ## Rolldown Stats Integration
 
 This dashboard displays build statistics from different rolldown versions, automatically updated via CI when changes are made to the dashboard code.
-

apps/dashboard/src/App.tsx

@@ -1,20 +1,20 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import './App.css'
-import Layout from './components/Layout'
-import RolldownStatsPage from './pages/RolldownStatsPage'
-import MinificationBenchmarksPage from './pages/MinificationBenchmarksPage'
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import './App.css';
+import Layout from './components/Layout';
+import MinificationBenchmarksPage from './pages/MinificationBenchmarksPage';
+import RolldownStatsPage from './pages/RolldownStatsPage';
 
 function App() {
   return (
-    <BrowserRouter basename="/vibe-dashboard">
+    <BrowserRouter basename='/vibe-dashboard'>
       <Routes>
-        <Route path="/" element={<Layout />}>
+        <Route path='/' element={<Layout />}>
           <Route index element={<RolldownStatsPage />} />
-          <Route path="minification" element={<MinificationBenchmarksPage />} />
+          <Route path='minification' element={<MinificationBenchmarksPage />} />
         </Route>
       </Routes>
     </BrowserRouter>
-  )
+  );
 }
 
-export default App
+export default App;