Phase 7 real gpa credit cards (#187)

* Dashboard: wire GPA/Credit-Hour cards to real scraped audit data

The scraper already stores the GPA Totals and Credit Hour Totals
sections; only the last render step was faked (cleanup plan Phase 7).

- Move parseGpaSummary out of degree-audit-page.tsx into
  audit-calculations.ts as pure business logic, and unit-test it —
  including the real snapshot's GPA sentence, which carries no
  "hours … points" and so returns null.

- Credit card: derive from the scraped Credit Hour Totals section
  (isCreditSection), mapping each rule to { status, text } and rendering
  only when non-empty. Render the scraped sentence directly instead of
  the fragile "{hours} of {description}" template. CreditRequirement is
  now { status: Status; text: string }; both hardcoded 21/36 arrays are
  gone. Status passes through all three values so in-progress
  requirements display honestly (green check / blue dash / x).

- GPA card: drop the fabricated default props; footer prop is now
  summary: GpaSummary | null and the sentence renders only when non-null
  (no more "0 hours … 0 points" on real audits).

- Delete the local RequirementStatusIcon met-boolean wrapper (it
  name-collided with a different component in requirement-breakdown) and
  call FramedStatusIcon directly via a Status -> state map.

* remove test

* Fix GPA card: correct Counted GPA, card width, dark-mode text

Three fixes to the Phase 7 GPA/Credit cards:

- Counted GPA was wrong: parseHours matched /\d+/ + parseInt, so the
  scraped "3.7766 GPA" cell truncated to 3. Parse a full decimal
  (/\d+(?:\.\d+)?/ + parseFloat) so GPA cells keep their fractional
  part. Hours/course columns are always integers, so this is a no-op for
  them — the only snapshot changes are the two GPA rows (3 -> 3.7766,
  3 -> 3.6091).

- Card width collapsed: the side-panel VStack defaults to items-start,
  so the card shrank to its content instead of filling the w-sm column.
  Add w-full to both cards.

- Dark mode: hardcoded text-gray-500/600/700 don't flip, so the text was
  unreadable on the dark card. Switch to the theme-aware text-muted
  token, and give the "Required" GPA box an explicit text-text (it was
  inheriting default black, invisible in dark mode).

* GPA card: Figma rounding + diagnostic log for stored GPA value

- Match the Figma design: card corners rounded-lg -> rounded-2xl, and the
  Required/Counted value boxes rounded-lg -> rounded-full (pill shaped).
  Credit card rounded to match.

- Add a temporary [GPA card] console.log of required/counted/ruleText/
  parsedSummary. A whole-number `counted` (e.g. 3) with "3.7766 GPA" in
  ruleText means the stored audit predates the parseFloat scraper fix and
  needs a re-scrape — the truncated decimal cannot be recovered from
  storage, only re-parsed at scrape time.

* GPA card: show major name and match Figma sizing

- Render the degree/major name (currentAuditName) in green under the
  "GPA Totals" title, matching the Figma mock.
- Tighten to the mock's proportions: p-5 -> p-4, title text-xl -> text-base,
  value pills and labels scaled down, gaps reduced, info icon h-6 -> h-5.
  Credit card sized to match.

* Fetch descriptoin

Author: spotta85

domain/audit.ts

@@ -9,6 +9,7 @@ export interface RequirementRule {
   progressUnit: RequirementProgressUnit;
   status: Status;
   courses: CourseId[];
+  summary?: string;
 }
 
 export interface AuditRequirement {
@@ -56,11 +57,6 @@ export interface AuditHistoryData {
   error?: string;
 }
 
-/**
- * The display name for an audit history entry, title-first: the audit's own
- * title, else its majors joined, else null. Callers supply their own final
- * fallback (an id, "Degree Requirements", etc.).
- */
 export function getAuditDisplayName(
   entry: AuditHistoryEntry | undefined,
 ): string | null {

features/audit-scraping/audit-page-parser.ts

@@ -21,8 +21,10 @@ import type { RequirementProgressUnit } from "@/domain/progress";
 // --- Helper Functions ---
 
 export function parseHours(text: string): number {
-  const match = text.match(/\d+/);
-  return match ? parseInt(match[0], 10) : 0;
+  // Match a full decimal so GPA cells like "3.7766 GPA" keep their fractional
+  // part. Hours/course columns are always integers, so this is a no-op for them.
+  const match = text.match(/\d+(?:\.\d+)?/);
+  return match ? parseFloat(match[0]) : 0;
 }
 
 export function parseRequirementProgress(text: string): {
@@ -145,6 +147,21 @@ export function scrapeRequirementSections(
         (cells[5] as HTMLElement).innerText,
       );
 
+      // After the progress columns, GPA rules carry a summary sentence
+      // ("X hours for a total of Y points were used to calculate the GPA.")
+      // while course-based rules carry a course-preview cell. Capture the
+      // former: the first trailing cell that is neither a course preview nor
+      // the show/hide-details link.
+      const summaryCell = Array.from(cells)
+        .slice(6)
+        .find(
+          (cell) =>
+            !cell.classList.contains("course_preview") &&
+            !cell.querySelector("a.details"),
+        );
+      const summary =
+        (summaryCell as HTMLElement | undefined)?.innerText.trim() || undefined;
+
       const rule: RequirementRule = {
         text: (cells[2] as HTMLElement).innerText.trim(),
         requiredHours: requiredProgress.value,
@@ -153,6 +170,7 @@ export function scrapeRequirementSections(
         progressUnit: requiredProgress.unit,
         status: getRuleStatus(row.classList),
         courses: [],
+        ...(summary ? { summary } : {}),
       };
 
       // Parse details row (courses)

features/dashboard/degree-audit-page.tsx

@@ -15,11 +15,18 @@ import RequirementBreakdown, {
 } from "./requirement-breakdown";
 
 const SidePanel = () => {
-  const { sections } = useAuditContext();
+  const { sections, currentAuditName } = useAuditContext();
 
   const gpaSection = sections.find((section) => isGpaSection(section.title));
   const gpaRule = gpaSection?.rules[0];
-  const gpaSummary = parseGpaSummary(gpaRule?.text);
+  const gpaSummary = parseGpaSummary(gpaRule?.summary);
+
+  console.log("[GPA card]", {
+    required: gpaRule?.requiredHours,
+    counted: gpaRule?.appliedHours,
+    summaryText: gpaRule?.summary,
+    parsedSummary: gpaSummary,
+  });
 
   const creditSection = sections.find((section) =>
     isCreditSection(section.title),
@@ -34,6 +41,7 @@ const SidePanel = () => {
       <VStack gap={4} className="w-sm mt-4">
         {gpaRule ? (
           <GPATotalsCard
+            degreeName={currentAuditName}
             required={gpaRule.requiredHours}
             counted={gpaRule.appliedHours}
             summary={gpaSummary}

features/dashboard/gpa-credit-cards.tsx

@@ -11,6 +11,7 @@ const STATUS_ICON_STATE: Record<Status, FramedStatusIconState> = {
 };
 
 type GPATotalsProps = {
+  degreeName: string;
   required: number;
   counted: number;
   summary: GpaSummary | null;
@@ -20,7 +21,7 @@ const InfoIcon = () => (
   <svg
     aria-hidden="true"
     viewBox="0 0 24 24"
-    className="h-6 w-6 shrink-0 text-dap-dark"
+    className="h-5 w-5 shrink-0 text-dap-dark"
     fill="none"
   >
     <path
@@ -69,36 +70,43 @@ const FramedStatusIcon = ({ state }: { state: FramedStatusIconState }) => (
 );
 
 export const GPATotalsCard = ({
+  degreeName,
   required,
   counted,
   summary,
 }: GPATotalsProps) => {
   return (
-    <div className="p-5 rounded-lg border border-gray-200 bg-background shadow-md">
+    <div className="w-full p-4 rounded-2xl border border-gray-200 bg-background shadow-md">
       <HStack x="between" y="top" fill>
-        <h3 className="text-xl font-bold text-text">GPA Totals</h3>
+        <h3 className="text-base font-bold text-text">GPA Totals</h3>
         <InfoIcon />
       </HStack>
 
-      <HStack gap={6} className="mt-4">
+      <p className="mt-1 text-sm font-semibold text-dap-plan-green">
+        {degreeName}
+      </p>
+
+      <HStack gap={4} className="mt-3">
         <VStack gap={1}>
-          <span className="text-sm text-gray-500">Required</span>
-          <div className="px-4 py-2 bg-background border border-gray-300 rounded-lg">
-            <span className="text-lg font-semibold">{required.toFixed(4)}</span>
+          <span className="text-xs text-muted">Required</span>
+          <div className="px-4 py-1.5 bg-background border border-gray-300 rounded-full">
+            <span className="text-base font-semibold text-text">
+              {required.toFixed(4)}
+            </span>
           </div>
         </VStack>
         <VStack gap={1}>
-          <span className="text-sm text-gray-500">Counted</span>
-          <div className="px-4 py-2 bg-dap-green rounded-lg">
-            <span className="text-lg font-semibold text-white">
+          <span className="text-xs text-muted">Counted</span>
+          <div className="px-4 py-1.5 bg-dap-green rounded-full">
+            <span className="text-base font-semibold text-white">
               {counted.toFixed(4)}
             </span>
           </div>
         </VStack>
       </HStack>
 
       {summary ? (
-        <p className="mt-4 text-sm text-gray-600">
+        <p className="mt-3 text-xs text-muted">
           {summary.hoursUsed} hours for a total of {summary.points} points were
           used to calculate the GPA.
         </p>
@@ -120,14 +128,14 @@ export const CreditHourTotalsCard = ({
   requirements,
 }: CreditHourTotalsProps) => {
   return (
-    <div className="p-5 rounded-lg border border-gray-200 bg-background shadow-md">
-      <h3 className="text-xl font-bold text-text">Credit Hour Totals</h3>
+    <div className="w-full p-4 rounded-2xl border border-gray-200 bg-background shadow-md">
+      <h3 className="text-base font-bold text-text">Credit Hour Totals</h3>
 
-      <VStack gap={3} className="mt-4">
+      <VStack gap={2.5} className="mt-3">
         {requirements.map((req) => (
-          <HStack key={req.text} gap={3} y="middle">
+          <HStack key={req.text} gap={2.5} y="middle">
             <FramedStatusIcon state={STATUS_ICON_STATE[req.status]} />
-            <span className="text-sm text-gray-700">{req.text}</span>
+            <span className="text-xs text-muted">{req.text}</span>
           </HStack>
         ))}
       </VStack>

tests/scraping/__snapshots__/audit-scraper.test.ts.snap

@@ -654,7 +654,7 @@ OR
     {
       "rules": [
         {
-          "appliedHours": 3,
+          "appliedHours": 3.7766,
           "courses": [
             "course-1",
             "course-2",
@@ -674,10 +674,11 @@ OR
           "remainingHours": 0,
           "requiredHours": 2,
           "status": "Completed",
+          "summary": "42 hours for a total of 158.62 points were used to calculate the GPA.",
           "text": "A University GPA of 2.00 is required on all courses undertaken (including credit by examination, correspondence, and extension) for which a grade or symbol other than Q, W, X, or CR is recorded.",
         },
         {
-          "appliedHours": 3,
+          "appliedHours": 3.6091,
           "courses": [
             "course-1",
             "course-2",
@@ -693,6 +694,7 @@ OR
           "remainingHours": 0,
           "requiredHours": 2,
           "status": "Completed",
+          "summary": "24 hours for a total of 86.62 points were used to calculate the GPA.",
           "text": "Students must earn a grade point average of 2.0 in all mathematics and science courses required by the degree.",
         },
       ],

tests/scraping/audit-scraper.test.ts

@@ -71,4 +71,30 @@ describe("degree audit scraper", () => {
       log.mockRestore();
     }
   });
+
+  test("captures the GPA summary sentence, not course-rule previews", async () => {
+    const document = await loadAuditDocument("audit-results-real.html");
+    const log = spyOn(console, "log").mockImplementation(() => {});
+
+    try {
+      const { requirements } = parseAuditPage(document);
+      const rules = requirements.flatMap((requirement) => requirement.rules);
+
+      const summaries = rules
+        .map((rule) => rule.summary)
+        .filter((summary): summary is string => summary !== undefined);
+
+      // The GPA rules carry their calculation sentence...
+      expect(summaries.length).toBeGreaterThan(0);
+      // ...and every captured summary is that sentence — never a course preview
+      // or other trailing-cell content.
+      for (const summary of summaries) {
+        expect(summary).toMatch(
+          /^\d+(?:\.\d+)? hours for a total of \d+(?:\.\d+)? points/,
+        );
+      }
+    } finally {
+      log.mockRestore();
+    }
+  });
 });