fix

Author: aidenybai

packages/react-doctor/src/cli.ts

@@ -54,6 +54,7 @@ const program = new Command()
         scoreOnly: isScoreOnly,
       };
 
+<<<<<<< Updated upstream
       const shouldSkipPrompts =
         flags.yes ||
         Boolean(process.env.CI) ||
@@ -65,6 +66,19 @@ const program = new Command()
         Boolean(process.env.AMP_HOME) ||
         Boolean(process.env.AMI) ||
         !process.stdin.isTTY;
+=======
+      const isAutomatedEnvironment = [
+        process.env.CI,
+        process.env.CLAUDECODE,
+        process.env.CURSOR_TRACE_ID,
+        process.env.CURSOR_AGENT,
+        process.env.CODEX_CI,
+        process.env.OPENCODE,
+        process.env.AMP_HOME,
+        process.env.AMI,
+      ].some(Boolean);
+      const shouldSkipPrompts = flags.yes || isAutomatedEnvironment || !process.stdin.isTTY;
+>>>>>>> Stashed changes
       const projectDirectories = await selectProjects(
         resolvedDirectory,
         flags.project,
@@ -185,7 +199,7 @@ const fixCommand = new Command("fix")
   .action(fixAction);
 
 const installAmiCommand = new Command("install-ami")
-  .description("Open Ami to auto-fix react-doctor issues")
+  .description("Install Ami and open it to auto-fix issues")
   .argument("[directory]", "project directory", ".")
   .action(fixAction);
 

packages/website/src/app/share/animated-score.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const PERFECT_SCORE = 100;
+const SCORE_GOOD_THRESHOLD = 75;
+const SCORE_OK_THRESHOLD = 50;
+const SCORE_BAR_WIDTH = 30;
+const SCORE_FRAME_COUNT = 20;
+const SCORE_FRAME_DELAY_MS = 30;
+
+const easeOutCubic = (progress: number) => 1 - Math.pow(1 - progress, 3);
+
+const getScoreColorClass = (score: number): string => {
+  if (score >= SCORE_GOOD_THRESHOLD) return "text-green-400";
+  if (score >= SCORE_OK_THRESHOLD) return "text-yellow-500";
+  return "text-red-400";
+};
+
+const getScoreLabel = (score: number): string => {
+  if (score >= SCORE_GOOD_THRESHOLD) return "Great";
+  if (score >= SCORE_OK_THRESHOLD) return "Needs work";
+  return "Critical";
+};
+
+const ScoreBar = ({ score }: { score: number }) => {
+  const filledCount = Math.round((score / PERFECT_SCORE) * SCORE_BAR_WIDTH);
+  const emptyCount = SCORE_BAR_WIDTH - filledCount;
+  const colorClass = getScoreColorClass(score);
+
+  return (
+    <>
+      <span className={colorClass}>{"\u2588".repeat(filledCount)}</span>
+      <span className="text-neutral-600">{"\u2591".repeat(emptyCount)}</span>
+    </>
+  );
+};
+
+const AnimatedScore = ({ targetScore }: { targetScore: number }) => {
+  const [animatedScore, setAnimatedScore] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    let frame = 0;
+
+    const animate = () => {
+      if (cancelled || frame > SCORE_FRAME_COUNT) return;
+      setAnimatedScore(Math.round(easeOutCubic(frame / SCORE_FRAME_COUNT) * targetScore));
+      frame++;
+      setTimeout(animate, SCORE_FRAME_DELAY_MS);
+    };
+
+    animate();
+    return () => {
+      cancelled = true;
+    };
+  }, [targetScore]);
+
+  const colorClass = getScoreColorClass(animatedScore);
+
+  return (
+    <>
+      <div className="mb-2 pl-2">
+        <span className={colorClass}>{animatedScore}</span>
+        {` / ${PERFECT_SCORE}  `}
+        <span className={colorClass}>{getScoreLabel(animatedScore)}</span>
+      </div>
+      <div className="mb-6 pl-2">
+        <ScoreBar score={animatedScore} />
+      </div>
+    </>
+  );
+};
+
+export default AnimatedScore;

packages/website/src/app/share/page.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
+import AnimatedScore from "./animated-score";
 
 const PERFECT_SCORE = 100;
 const SCORE_GOOD_THRESHOLD = 75;
 const SCORE_OK_THRESHOLD = 50;
-const SCORE_BAR_WIDTH = 30;
 const COMMAND = "npx -y react-doctor@latest .";
 const SHARE_BASE_URL = "https://www.react.doctor/share";
 const X_ICON_PATH =
@@ -49,19 +49,6 @@ const DoctorFace = ({ score }: { score: number }) => {
   );
 };
 
-const ScoreBar = ({ score }: { score: number }) => {
-  const filledCount = Math.round((score / PERFECT_SCORE) * SCORE_BAR_WIDTH);
-  const emptyCount = SCORE_BAR_WIDTH - filledCount;
-  const colorClass = getScoreColorClass(score);
-
-  return (
-    <span>
-      <span className={colorClass}>{"\u2588".repeat(filledCount)}</span>
-      <span className="text-neutral-600">{"\u2591".repeat(emptyCount)}</span>
-    </span>
-  );
-};
-
 export const generateMetadata = async ({
   searchParams,
 }: {
@@ -104,7 +91,6 @@ const SharePage = async ({ searchParams }: { searchParams: Promise<ShareSearchPa
   const errorCount = Math.max(0, Number(resolvedParams.e) || 0);
   const warningCount = Math.max(0, Number(resolvedParams.w) || 0);
   const fileCount = Math.max(0, Number(resolvedParams.f) || 0);
-  const colorClass = getScoreColorClass(score);
   const label = getScoreLabel(score);
 
   const shareSearchParams = new URLSearchParams();
@@ -127,14 +113,7 @@ const SharePage = async ({ searchParams }: { searchParams: Promise<ShareSearchPa
         </div>
       </div>
 
-      <div className="mb-2 pl-2">
-        <span className={colorClass}>{score}</span>
-        {` / ${PERFECT_SCORE}  `}
-        <span className={colorClass}>{getScoreLabel(score)}</span>
-      </div>
-      <div className="mb-6 pl-2">
-        <ScoreBar score={score} />
-      </div>
+      <AnimatedScore targetScore={score} />
 
       {(errorCount > 0 || warningCount > 0 || fileCount > 0) && (
         <div className="mb-8 pl-2">