-```
+/```text
 /courses/compare?courses=MAL401,MAL402

</details>
<details>
<summary>🧰 Tools</summary>
<details>
<summary>🪛 markdownlint-cli2 (0.18.1)</summary>
148-148: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
</details>
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>

</details>
<!-- fingerprinting:phantom:medusa:eagle -->
<!-- This is an auto-generated comment by CodeRabbit -->

- if (!isLoading && courses.length > 0 && searchParams) {
- const courseIds = searchParams.get('courses')?.split(',') || [];
- if (courseIds.length > 0) {
- const preselectedCourses = courses.filter((c) =>
- courseIds.includes(c.id)
- );
- setSelectedCourses(preselectedCourses.slice(0, 4));
- }
- }
+ if (!isLoading && courses.length > 0 && searchParams) {
+ const rawIds = searchParams.get('courses')?.split(',') || [];
+ const normalized = rawIds.map((id) => id.trim().toLowerCase()).filter(Boolean);
+ if (normalized.length > 0) {
+ const preselectedCourses = courses.filter(
+ (c) =>
+ normalized.includes(c.id.toLowerCase()) ||
+ normalized.includes(c.code.toLowerCase())
+ );
+ setSelectedCourses(preselectedCourses.slice(0, 4));
+ }
+ }

In `@src/app/courses/compare/page.tsx` around lines 21 - 28, The preselection is
case-sensitive so courseIds from searchParams.get('courses') may not match
courses; in the useEffect where you build preselectedCourses (the
courses.filter(...) and setSelectedCourses(...) logic), normalize both sides to
the same case before comparing: map the parsed courseIds to lower-case and check
includes against c.id.toLowerCase(), and if your Course objects have a separate
code field (e.g., c.code) also check c.code.toLowerCase() so either identifier
matches; then slice(0,4) and call setSelectedCourses as before.

const data = [
 { subject: "Math", mike: 120, lily: 110 },
 { subject: "English", mike: 98, lily: 130 },
];
<RadarChart data={data}>
 <PolarAngleAxis dataKey="subject" />
 <Radar name="Mike" dataKey="mike" />
 <Radar name="Lily" dataKey="lily" />
</RadarChart>

const data = [
 { label: "Foo", measurements: [5, 12] },
 { label: "Bar", measurements: [8, 10] },
];
<RadarChart data={data}>
 <PolarAngleAxis dataKey="label" />
 <Radar name="Series A" dataKey={(d) => d.measurements[0]} />
 <Radar name="Series B" dataKey={(d) => d.measurements[1]} />
</RadarChart>

const data = [
 { metric: "Assignments", courseA: 82, courseB: 75, courseC: 90 },
 { metric: "Quizzes", courseA: 70, courseB: 88, courseC: 77 },
 { metric: "Exams", courseA: 91, courseB: 80, courseC: 85 },
 { metric: "Projects", courseA: 78, courseB: 92, courseC: 81 },
];

import {
 RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
 Tooltip, Legend, ResponsiveContainer
} from "recharts";
export function CoursesRadar() {
 return (
 <ResponsiveContainer width="100%" height={360}>
 <RadarChart data={data} outerRadius="80%">
 <PolarGrid />
 <PolarAngleAxis dataKey="metric" />
 <PolarRadiusAxis domain={[0, 100]} />
 <Radar name="Course A" dataKey="courseA" stroke="#8884d8" fill="#8884d8" fillOpacity={0.25} />
 <Radar name="Course B" dataKey="courseB" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.20} />
 <Radar name="Course C" dataKey="courseC" stroke="#ffc658" fill="#ffc658" fillOpacity={0.18} />
 <Tooltip />
 <Legend />
 </RadarChart>
 </ResponsiveContainer>
 );
}

- const radarData = courses.map((course, idx) => ({
- course: course.code,
- overall: course.overall_rating,
- difficulty: course.difficulty_rating,
- workload: course.workload_rating,
- reviews: Math.min(course.review_count / 10, 5), // Normalize reviews to 0-5 scale
- fill: colors[idx % colors.length],
- }));
+ const radarData = [
+ {
+ metric: 'Overall',
+ ...courses.reduce((acc, course) => {
+ acc[course.code] = course.overall_rating;
+ return acc;
+ }, {} as Record<string, number>),
+ },
+ {
+ metric: 'Difficulty',
+ ...courses.reduce((acc, course) => {
+ acc[course.code] = course.difficulty_rating;
+ return acc;
+ }, {} as Record<string, number>),
+ },
+ {
+ metric: 'Workload',
+ ...courses.reduce((acc, course) => {
+ acc[course.code] = course.workload_rating;
+ return acc;
+ }, {} as Record<string, number>),
+ },
+ {
+ metric: 'Reviews',
+ ...courses.reduce((acc, course) => {
+ acc[course.code] = Math.min(course.review_count / 10, 5);
+ return acc;
+ }, {} as Record<string, number>),
+ },
+ ];
...
- <PolarAngleAxis
- dataKey="course"
+ <PolarAngleAxis
+ dataKey="metric"
 tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
 />
...
- {courses.map((course, idx) => (
- <Radar
- key={course.id}
- name={course.code}
- dataKey="overall"
- stroke={colors[idx % colors.length]}
- fill={colors[idx % colors.length]}
- fillOpacity={0.3}
- />
- ))}
+ {courses.map((course, idx) => (
+ <Radar
+ key={course.id}
+ name={course.code}
+ dataKey={course.code}
+ stroke={colors[idx % colors.length]}
+ fill={colors[idx % colors.length]}
+ fillOpacity={0.3}
+ />
+ ))}

In `@src/components/courses/compare/ComparisonCharts.tsx` around lines 69 - 173,
The RadarChart is rendering duplicate series because each <Radar> uses the same
dataKey="overall" and radarData is shaped per course; reshape radarData to be
one object per metric (e.g., { metric: 'Overall', [courseCodeA]: val,
[courseCodeB]: val, ... } for overall, difficulty, workload, reviews), update
PolarAngleAxis to use dataKey="metric", and change each <Radar> in the
courses.map loop to use dataKey={course.code} (and keep stroke/fill using
colors[idx % colors.length]) so each series reads its own course field instead
of the shared "overall".

- <button
- onClick={() => handleRemoveCourse(course.id)}
- className="ml-1 hover:text-destructive transition-colors"
- >
+ <button
+ type="button"
+ aria-label={`Remove ${course.code} from comparison`}
+ onClick={() => handleRemoveCourse(course.id)}
+ className="ml-1 hover:text-destructive transition-colors"
+ >
 <X className="h-3 w-3" />
 </button>

In `@src/components/courses/compare/CourseSelector.tsx` around lines 69 - 74, The
remove-course button in CourseSelector is an icon-only control and needs
accessibility and form-safety fixes: update the button element used with
onClick={() => handleRemoveCourse(course.id)} to include type="button" and an
appropriate aria-label (e.g., aria-label={`Remove ${course.name}` or a generic
"Remove course") so screen readers can announce its purpose; locate the button
in CourseSelector.tsx where handleRemoveCourse is invoked and add those
attributes.

# First, let's look at the full ReviewHighlights.tsx file
cat -n src/components/courses/compare/ReviewHighlights.tsx

# Also check what Tabs component is being used (likely from shadcn/ui)
fd -e tsx -e ts | xargs rg -l "export.*Tabs" | head -5

- const [reviewsData, setReviewsData] = useState<Record<string, Review[]>>({});
- const [loading, setLoading] = useState(true);
+ const [reviewsData, setReviewsData] = useState<Record<string, Review[]>>({});
+ const [loading, setLoading] = useState(true);
+ const [activeTab, setActiveTab] = useState<string | undefined>(courses[0]?.id);
+ useEffect(() => {
+ if (courses.length === 0) return;
+ setActiveTab((prev) =>
+ prev && courses.some((c) => c.id === prev) ? prev : courses[0].id
+ );
+ }, [courses]);
...
- <Tabs defaultValue={courses[0]?.id} className="w-full">
+ <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">

In `@src/components/courses/compare/ReviewHighlights.tsx` around lines 24 - 147,
The Tabs use defaultValue so the active tab doesn't update when courses changes;
convert to a controlled Tabs by adding state (e.g., const [activeTab,
setActiveTab] = useState<string | null>(courses[0]?.id || null)) and pass
value={activeTab} and onValueChange={setActiveTab} to the Tabs component, update
TabsTrigger to use course.id as before, and add a useEffect watching courses to
reset activeTab to courses[0]?.id (or null) when the list changes so removed
course ids don't leave the Tabs pointing at a stale/non-existent id.

 const getComparisonList = (): string[] => {
 if (typeof window === 'undefined') return [];
 const stored = localStorage.getItem(STORAGE_KEY);
- return stored ? JSON.parse(stored) : [];
+ if (!stored) return [];
+ try {
+ const parsed = JSON.parse(stored);
+ return Array.isArray(parsed) ? parsed : [];
+ } catch {
+ return [];
+ }
 };

In `@src/components/courses/CompareButton.tsx` around lines 25 - 29, The
getComparisonList function should guard against malformed JSON from localStorage
by wrapping the JSON.parse call in a try-catch: after retrieving stored =
localStorage.getItem(STORAGE_KEY), attempt to parse it inside try and on success
return the parsed array; on catch return an empty array (optionally remove the
bad key with localStorage.removeItem(STORAGE_KEY) or log the error) so that
JSON.parse errors cannot throw at runtime.

 <Badge variant="outline" className="text-xs">
- ⭐ {course.overall_rating.toFixed(1)}
+ ⭐ {(course.overall_rating ?? 0).toFixed(1)}
 </Badge>

In `@src/components/courses/CompareButton.tsx` around lines 174 - 176, The Badge
rendering calls course.overall_rating.toFixed(1) which will throw if
overall_rating is null/undefined; update the rendering around the Badge (the
block with Badge and course.overall_rating) to guard against nullish values by
using a safe fallback such as const displayRating = (typeof
course.overall_rating === 'number') ? course.overall_rating.toFixed(1) : '–' (or
'N/A' / '0.0') and then render "⭐ {displayRating}", or conditionally render the
Badge only when course.overall_rating is a number; reference the Badge component
and course.overall_rating to locate where to apply the change.

 const getComparisonList = (): string[] => {
 if (typeof window === 'undefined') return [];
 const stored = localStorage.getItem(STORAGE_KEY);
- return stored ? JSON.parse(stored) : [];
+ if (!stored) return [];
+ try {
+ const parsed = JSON.parse(stored);
+ return Array.isArray(parsed) ? parsed : [];
+ } catch {
+ return [];
+ }
 };

In `@src/components/courses/CompareCoursesButton.tsx` around lines 11 - 15,
getComparisonList currently calls JSON.parse on localStorage data which can
throw on malformed values; wrap the parse in a try/catch in getComparisonList
(and keep the existing typeof window guard) so parsing failures return an empty
array instead of crashing, and after parsing validate the result is an array of
strings (otherwise return []); reference getComparisonList and STORAGE_KEY when
making this change.

 const getComparisonList = (): string[] => {
 if (typeof window === 'undefined') return [];
 const stored = localStorage.getItem(STORAGE_KEY);
- return stored ? JSON.parse(stored) : [];
+ if (!stored) return [];
+ try {
+ const parsed = JSON.parse(stored);
+ return Array.isArray(parsed) ? parsed : [];
+ } catch {
+ return [];
+ }
 };

In `@src/components/courses/course_page/AddToComparison.tsx` around lines 16 - 20,
The getComparisonList function can throw when localStorage contains malformed
JSON; wrap the localStorage access/JSON.parse in a try/catch and return an empty
array on any error, and additionally validate the parsed value is an array of
strings before returning it. Specifically update getComparisonList to: check
typeof window, read localStorage.getItem(STORAGE_KEY) inside try, JSON.parse
safely, ensure the result is an Array and every item is a string (otherwise
fallback), and swallow/log the error then return [].