Add source diff viewer

web/package.json

@@ -8,7 +8,8 @@
     "dev": "next dev",
     "prebuild": "npm run extract",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "tsx src/lib/diff-utils.test.ts"
   },
   "dependencies": {
     "diff": "^8.0.3",

web/src/app/[locale]/(learn)/[version]/client.tsx

@@ -10,6 +10,7 @@ import { ExecutionFlow } from "@/components/architecture/execution-flow";
 import { SessionVisualization } from "@/components/visualizations";
 import { Tabs } from "@/components/ui/tabs";
 import { useTranslations } from "@/lib/i18n";
+import type { VersionCompareTarget } from "@/types/agent-data";
 
 interface VersionDetailClientProps {
   version: string;
@@ -23,13 +24,19 @@ interface VersionDetailClientProps {
   } | null;
   source: string;
   filename: string;
+  currentVersionId: string;
+  defaultCompareVersionId?: string | null;
+  compareTargets: VersionCompareTarget[];
 }
 
 export function VersionDetailClient({
   version,
   diff,
   source,
   filename,
+  currentVersionId,
+  defaultCompareVersionId,
+  compareTargets,
 }: VersionDetailClientProps) {
   const t = useTranslations("version");
 
@@ -54,7 +61,13 @@ export function VersionDetailClient({
               <AgentLoopSimulator version={version} />
             )}
             {activeTab === "code" && (
-              <SourceViewer source={source} filename={filename} />
+              <SourceViewer
+                source={source}
+                filename={filename}
+                currentVersionId={currentVersionId}
+                defaultCompareVersionId={defaultCompareVersionId}
+                compareTargets={compareTargets}
+              />
             )}
             {activeTab === "deep-dive" && (
               <div className="space-y-8">

web/src/app/[locale]/(learn)/[version]/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { LEARNING_PATH, VERSION_META, LAYERS } from "@/lib/constants";
 import { LayerBadge } from "@/components/ui/badge";
 import versionsData from "@/data/generated/versions.json";
+import type { VersionCompareTarget } from "@/types/agent-data";
 import { VersionDetailClient } from "./client";
 import { getTranslations } from "@/lib/i18n-server";
 
@@ -35,12 +36,26 @@ export default async function VersionPage({
   const layer = LAYERS.find((l) => l.id === meta.layer);
 
   const pathIndex = LEARNING_PATH.indexOf(version as typeof LEARNING_PATH[number]);
-  const prevVersion = pathIndex > 0 ? LEARNING_PATH[pathIndex - 1] : null;
+  const prevVersion = meta.prevVersion;
   const nextVersion =
     pathIndex < LEARNING_PATH.length - 1
       ? LEARNING_PATH[pathIndex + 1]
       : null;
 
+  const compareTargets: VersionCompareTarget[] = LEARNING_PATH
+    .filter((id) => id !== version)
+    .flatMap((id) => {
+      const target = versionsData.versions.find((v) => v.id === id);
+      if (!target) return [];
+
+      return [{
+        id,
+        label: `${id} - ${tSession(id) || VERSION_META[id]?.title || id}`,
+        filename: target.filename,
+        source: target.source,
+      }];
+    });
+
   return (
     <div className="mx-auto max-w-3xl space-y-10 py-4">
       {/* Header */}
@@ -79,6 +94,9 @@ export default async function VersionPage({
         diff={diff}
         source={versionData.source}
         filename={versionData.filename}
+        currentVersionId={version}
+        defaultCompareVersionId={prevVersion}
+        compareTargets={compareTargets}
       />
 
       {/* Prev / Next navigation */}