[WIP] Improve code quality and structure

CLAUDE.md

@@ -109,12 +109,24 @@ These commands map to their corresponding tools. For example, `vp dev --port 300
 
 - **Using the package manager directly:** Do not use pnpm, npm, or Yarn directly. Vite+ can handle all package manager operations.
 - **Always use Vite commands to run tools:** Don't attempt to run `vp vitest` or `vp oxlint`. They do not exist. Use `vp test` and `vp lint` instead.
-- **Running scripts:** Vite+ commands take precedence over `package.json` scripts. If there is a `test` script defined in `scripts` that conflicts with the built-in `vp test` command, run it using `vp run test`.
+- **Running scripts:** Vite+ built-in commands (`vp dev`, `vp build`, `vp test`, etc.) always run the Vite+ built-in tool, not any `package.json` script of the same name. To run a custom script that shares a name with a built-in command, use `vp run <script>`. For example, if you have a custom `dev` script that runs multiple services concurrently, run it with `vp run dev`, not `vp dev` (which always starts Vite's dev server).
 - **Do not install Vitest, Oxlint, Oxfmt, or tsdown directly:** Vite+ wraps these tools. They must not be installed directly. You cannot upgrade these tools by installing their latest versions. Always use Vite+ commands.
 - **Use Vite+ wrappers for one-off binaries:** Use `vp dlx` instead of package-manager-specific `dlx`/`npx` commands.
 - **Import JavaScript modules from `vite-plus`:** Instead of importing from `vite` or `vitest`, all modules should be imported from the project's `vite-plus` dependency. For example, `import { defineConfig } from 'vite-plus';` or `import { expect, test, vi } from 'vite-plus/test';`. You must not install `vitest` to import test utilities.
 - **Type-Aware Linting:** There is no need to install `oxlint-tsgolint`, `vp lint --type-aware` works out of the box.
 
+## CI Integration
+
+For GitHub Actions, consider using [`voidzero-dev/setup-vp`](https://github.com/voidzero-dev/setup-vp) to replace separate `actions/setup-node`, package-manager setup, cache, and install steps with a single action.
+
+```yaml
+- uses: voidzero-dev/setup-vp@v1
+  with:
+    cache: true
+- run: vp check
+- run: vp test
+```
+
 ## Review Checklist for Agents
 
 - [ ] Run `vp install` after pulling remote changes and before getting started.

apps/dashboard/src/components/rolldown/StatsCards.tsx

@@ -2,32 +2,37 @@ import { formatNumberWithCommas } from "@vibe/utils";
 import rolldownStats from "../../../../../data/rolldown-version-stats.json";
 
 const buildTimeData = rolldownStats.map((stat) => stat.buildTime);
+const bundleSizes = rolldownStats.map((s) => s.totalSize);
+const latestVersion = rolldownStats[rolldownStats.length - 1];
+const firstVersion = rolldownStats[0];
 
 export function StatsCards() {
+  const averageBuildTime = Math.round(
+    buildTimeData.reduce((sum, item) => sum + item, 0) / buildTimeData.length,
+  );
+
+  const bundleSizeRange = Math.round((Math.max(...bundleSizes) - Math.min(...bundleSizes)) / 1024);
+
   const stats = [
     {
       label: "Average Build Time",
-      value: `${Math.round(buildTimeData.reduce((sum, item) => sum + item, 0) / buildTimeData.length)}ms`,
+      value: `${averageBuildTime}ms`,
       badge: `Across ${buildTimeData.length} versions`,
     },
     {
       label: "Latest Bundle Size",
-      value: `${formatNumberWithCommas(rolldownStats[rolldownStats.length - 1]?.totalSize || 0)} bytes`,
-      badge: `v${rolldownStats[rolldownStats.length - 1]?.version}`,
+      value: `${formatNumberWithCommas(latestVersion?.totalSize || 0)} bytes`,
+      badge: `v${latestVersion?.version}`,
     },
     {
       label: "Bundle Size Range",
-      value: `${Math.round(
-        (Math.max(...rolldownStats.map((s) => s.totalSize)) -
-          Math.min(...rolldownStats.map((s) => s.totalSize))) /
-          1024,
-      )}KB`,
+      value: `${bundleSizeRange}KB`,
       badge: "Size Variation",
     },
     {
       label: "Versions Tested",
       value: rolldownStats.length.toString(),
-      badge: `${rolldownStats[0]?.version} - ${rolldownStats[rolldownStats.length - 1]?.version}`,
+      badge: `${firstVersion?.version} - ${latestVersion?.version}`,
     },
   ];
 

apps/dashboard/src/pages/HomePage.tsx

@@ -10,6 +10,7 @@ import {
   Timer,
   Zap,
 } from "lucide-react";
+import { Fragment } from "react";
 import { Link } from "react-router-dom";
 import { PageContainer } from "../components/layout/PageContainer";
 
@@ -78,6 +79,7 @@ const bundlerBenchmarks = [
   { name: "rspack", time: 4.07, color: "#FF6B35" },
   { name: "Rollup + esbuild", time: 40.1, color: "#FF4444" },
 ];
+const maxBundlerTime = Math.max(...bundlerBenchmarks.map((b) => b.time));
 
 // Oxc performance metrics
 const oxcBenchmarks = [
@@ -126,9 +128,26 @@ const trustedBy = [
   "Mercedes",
 ];
 
-function HomePage() {
-  const maxTime = Math.max(...bundlerBenchmarks.map((b) => b.time));
+// Overall statistics
+const overallStats = [
+  { value: "124.1k", label: "GitHub Stars", color: "var(--color-accent)" },
+  { value: "2,208+", label: "Contributors" },
+  { value: "57M+", label: "Weekly Downloads" },
+  { value: "$12.5M", label: "Series A Funding", color: "green-500" },
+];
+
+// Vite+ features
+const vitePlusFeatures = [
+  { icon: <Box size={14} />, label: "Dev", sub: "40x faster" },
+  { icon: <Package size={14} />, label: "Build", sub: "Rolldown" },
+  { icon: <FlaskConical size={14} />, label: "Test", sub: "Vitest" },
+  { icon: <Zap size={14} />, label: "Lint", sub: "100x faster" },
+  { icon: <FileText size={14} />, label: "Format", sub: "Prettier-compat" },
+  { icon: <Timer size={14} />, label: "Cache", sub: "Monorepo" },
+  { icon: <BarChart3 size={14} />, label: "GUI", sub: "Debug tools" },
+];
 
+function HomePage() {
   return (
     <PageContainer>
       {/* Hero Section */}
@@ -147,25 +166,17 @@ function HomePage() {
 
         {/* Total stats banner */}
         <div className="flex md:flex-row flex-col space-y-4  md:space-y-0 items-center gap-8 mt-8 py-4 px-5 bg-[var(--color-bg-elevated)] border border-[var(--color-border)] rounded-lg">
-          <div>
-            <div className="text-2xl font-semibold text-[var(--color-accent)]">124.1k</div>
-            <div className="text-xs text-[var(--color-text-muted)]">GitHub Stars</div>
-          </div>
-          <div className="w-px h-8 bg-[var(--color-border)]" />
-          <div>
-            <div className="text-2xl font-semibold">2,208+</div>
-            <div className="text-xs text-[var(--color-text-muted)]">Contributors</div>
-          </div>
-          <div className="w-px h-8 bg-[var(--color-border)]" />
-          <div>
-            <div className="text-2xl font-semibold">57M+</div>
-            <div className="text-xs text-[var(--color-text-muted)]">Weekly Downloads</div>
-          </div>
-          <div className="w-px h-8 bg-[var(--color-border)]" />
-          <div>
-            <div className="text-2xl font-semibold text-green-500">$12.5M</div>
-            <div className="text-xs text-[var(--color-text-muted)]">Series A Funding</div>
-          </div>
+          {overallStats.map((stat, index) => (
+            <Fragment key={stat.label}>
+              {index > 0 && <div className="w-px h-8 bg-[var(--color-border)]" />}
+              <div>
+                <div className={`text-2xl font-semibold ${stat.color ? `text-${stat.color}` : ""}`}>
+                  {stat.value}
+                </div>
+                <div className="text-xs text-[var(--color-text-muted)]">{stat.label}</div>
+              </div>
+            </Fragment>
+          ))}
         </div>
       </div>
 
@@ -227,7 +238,7 @@ function HomePage() {
                   <div
                     className="h-full rounded transition-all duration-500"
                     style={{
-                      width: `${(benchmark.time / maxTime) * 100}%`,
+                      width: `${(benchmark.time / maxBundlerTime) * 100}%`,
                       backgroundColor: benchmark.color,
                     }}
                   />
@@ -303,15 +314,7 @@ function HomePage() {
           </div>
 
           <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3 mb-4">
-            {[
-              { icon: <Box size={14} />, label: "Dev", sub: "40x faster" },
-              { icon: <Package size={14} />, label: "Build", sub: "Rolldown" },
-              { icon: <FlaskConical size={14} />, label: "Test", sub: "Vitest" },
-              { icon: <Zap size={14} />, label: "Lint", sub: "100x faster" },
-              { icon: <FileText size={14} />, label: "Format", sub: "Prettier-compat" },
-              { icon: <Timer size={14} />, label: "Cache", sub: "Monorepo" },
-              { icon: <BarChart3 size={14} />, label: "GUI", sub: "Debug tools" },
-            ].map((feature) => (
+            {vitePlusFeatures.map((feature) => (
               <div
                 key={feature.label}
                 className="p-3 rounded-md bg-[var(--color-surface)] border border-[var(--color-border)] text-center"

tools/override-rolldown.mjs

@@ -89,6 +89,8 @@ function getCurrentVersion() {
   } catch (error) {
     console.error("Error reading package.json:", error.message);
     process.exit(1);
+    // This return is unreachable but satisfies linter
+    return undefined;
   }
 }
 
@@ -127,6 +129,8 @@ function installDependencies() {
     console.error("❌ Error installing dependencies:", error.message);
     console.error("❌ Aborting due to pnpm install failure");
     process.exit(1);
+    // This return is unreachable but satisfies linter
+    return false;
   }
 }