Fix security and performance issues found in code review

- fonts.ts: O(n²) string concatenation → O(n) Array.from+join for base64
- fonts.ts: isSystemFont() iterates Set directly instead of Array.from conversion
- TimelineVisualization.tsx: replace CSS [data-group="name"] interpolation with
  filter-function approach so group names with special CSS chars are safe;
  selectByGroup helper defined once outside the forEach loop

Agent-Logs-Url: https://github.com/cohm/ProgramVisualization/sessions/f61843d3-07a7-4e3c-ad7a-40060c98e600

Co-authored-by: cohm <7143813+cohm@users.noreply.github.com>

Author: Copilot

src/components/TimelineVisualization.tsx

@@ -2639,31 +2639,26 @@ const TimelineVisualization = forwardRef(function TimelineVisualization({ course
     if (!containerRef.current || !cosmetics) return;
     const container = d3.select(containerRef.current);
 
+    // Helpers for safe group-name filtering — defined once here and reused
+    // for all groups so we don't reallocate closures inside the forEach loop.
+    // Using filter functions instead of CSS [data-group="…"] attribute selectors
+    // prevents group names with special CSS characters from corrupting the selector.
+    const selectByGroup = (cls: string, name: string) =>
+      container.selectAll(cls).filter(function() {
+        return (this as Element).getAttribute('data-group') === name;
+      });
+
     cosmetics.groups.forEach(group => {
       const isGroupVisible = layers.groups[group.name] !== false;
       const courseDisplay = (isGroupVisible && layers.courseBars) ? '' : 'none';
       const examDisplay = (isGroupVisible && layers.exams && layers.courseBars) ? '' : 'none';
       const reexamDisplay = (isGroupVisible && layers.reexams && layers.courseBars) ? '' : 'none';
 
-      container.selectAll(`.course-group[data-group="${group.name}"]`)
-        .interrupt()
-        .style('display', courseDisplay);
-
-      container.selectAll(`.course-connector-fill[data-group="${group.name}"]`)
-        .interrupt()
-        .style('display', courseDisplay);
-
-      container.selectAll(`.course-connector-border[data-group="${group.name}"]`)
-        .interrupt()
-        .style('display', courseDisplay);
-
-      container.selectAll(`.exam-dot[data-group="${group.name}"]`)
-        .interrupt()
-        .style('display', examDisplay);
-
-      container.selectAll(`.reexam-dot[data-group="${group.name}"]`)
-        .interrupt()
-        .style('display', reexamDisplay);
+      selectByGroup('.course-group', group.name).interrupt().style('display', courseDisplay);
+      selectByGroup('.course-connector-fill', group.name).interrupt().style('display', courseDisplay);
+      selectByGroup('.course-connector-border', group.name).interrupt().style('display', courseDisplay);
+      selectByGroup('.exam-dot', group.name).interrupt().style('display', examDisplay);
+      selectByGroup('.reexam-dot', group.name).interrupt().style('display', reexamDisplay);
     });
 
     // Prereq arrows: composite of (relevant prereq* layer) AND (both endpoint

src/lib/fonts.ts

@@ -19,7 +19,8 @@ const WEIGHTS = '300;400;500;600;700;800;900';
 const cache = new Map<string, Promise<string>>();
 
 function isSystemFont(name: string): boolean {
-  return Array.from(SYSTEM_FONTS).some(s => name.includes(s));
+  for (const s of SYSTEM_FONTS) if (name.includes(s)) return true;
+  return false;
 }
 
 async function fetchFontFaceCss(family: string): Promise<string> {
@@ -43,8 +44,9 @@ async function fetchFontFaceCss(family: string): Promise<string> {
     if (!fontResp.ok) continue;
     const buf = await fontResp.arrayBuffer();
     const u8 = new Uint8Array(buf);
-    let binary = '';
-    for (let i = 0; i < u8.length; i++) binary += String.fromCharCode(u8[i]);
+    // Array.from + join is O(n) — avoids the O(n²) intermediate-string
+    // churn of the naive `for (…) binary += String.fromCharCode(…)` loop.
+    const binary = Array.from(u8, b => String.fromCharCode(b)).join('');
     const base64 = btoa(binary);
     const format = url.includes('.woff2') ? 'woff2' : url.includes('.woff') ? 'woff' : 'truetype';
     faces.push(`@font-face { font-family: '${family}'; src: url(data:font/${format};base64,${base64}) format('${format}'); font-weight: 100 900; font-style: normal; }`);