feat(content): pattern comparisons

frontend/src/components/editor/problem-workspace.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useMemo, useEffect } from "react";
 import { CodeEditor } from "./code-editor";
 import { TestResults } from "./test-results";
 import { usePyodide } from "@/hooks/use-pyodide";
+import { useTimeTracker, getTimeTrackerElapsed } from "@/hooks/use-time-tracker";
 import { submitSolution } from "@/lib/api";
 import { markQuestionCompleted, getSavedSolution, isQuestionCompleted } from "@/lib/progress";
 import type { QuestionDetail, TestResult, HiddenTestOutput } from "@/types";
@@ -45,6 +46,7 @@ import {
   ChevronRight,
   CheckCircle,
   XCircle,
+  GitCompare,
 } from "lucide-react";
 import Link from "next/link";
 
@@ -115,6 +117,9 @@ type RightTab = "code" | "results";
 type ViewMode = "split" | "left" | "right";
 
 export function ProblemWorkspace({ question }: ProblemWorkspaceProps) {
+  // Start time tracking for this question
+  useTimeTracker(question.slug);
+
   const starterCode = useMemo(
     () => generateStarterCode(question.function_signature!),
     [question.function_signature]
@@ -462,7 +467,14 @@ json.dumps(__result)
       const allVisiblePassed = visibleTestResults.every((r) => r.passed);
       const allHiddenPassed = response.total_passed === response.total_tests;
       if (allVisiblePassed && allHiddenPassed) {
-        markQuestionCompleted(question.slug, code);
+        const timeSpentMs = getTimeTrackerElapsed();
+        const primaryPattern = question.patterns[0]?.slug || "";
+        markQuestionCompleted(question.slug, {
+          primaryPattern,
+          difficulty: question.difficulty,
+          code,
+          timeSpentMs,
+        });
         setIsCompleted(true);
       }
 
@@ -480,6 +492,8 @@ json.dumps(__result)
     hiddenTestInputs,
     runTests,
     question.slug,
+    question.difficulty,
+    question.patterns,
     code,
     analyzeComplexity,
   ]);
@@ -719,6 +733,17 @@ json.dumps(__result)
                   </Callout>
                 )}
 
+              {/* Why This Pattern? */}
+              {question.explanation?.pattern_comparison && (
+                <Callout
+                  variant="pattern"
+                  icon={GitCompare}
+                  title="Why This Pattern?"
+                >
+                  <Markdown>{question.explanation.pattern_comparison}</Markdown>
+                </Callout>
+              )}
+
               {/* Complexity Analysis */}
               {(question.explanation?.time_complexity ||
                 question.explanation?.space_complexity) && (