feat(viz): two pointers narrative

frontend/src/app/patterns/[slug]/page.tsx

@@ -14,6 +14,8 @@ import {
   RelatedPatterns,
 } from "@/components/patterns";
 import { PatternVisualization } from "@/components/visualization";
+import { TwoPointersVisualization } from "@/components/visualizations-new";
+import { twoSumAlgorithm } from "@/content/algorithms/two-sum";
 
 interface PageProps {
   params: Promise<{ slug: string }>;
@@ -106,7 +108,16 @@ export default async function PatternDetailPage({ params }: PageProps) {
       )}
 
       {/* Interactive Visualization */}
-      {pattern.visualization_examples && pattern.visualization_examples.length > 0 && (
+      {slug === "two-pointers" ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>Interactive Visualization</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TwoPointersVisualization algorithm={twoSumAlgorithm} />
+          </CardContent>
+        </Card>
+      ) : pattern.visualization_examples && pattern.visualization_examples.length > 0 ? (
         <Card>
           <CardHeader>
             <CardTitle>Interactive Visualization</CardTitle>
@@ -115,7 +126,7 @@ export default async function PatternDetailPage({ params }: PageProps) {
             <PatternVisualization examples={pattern.visualization_examples} />
           </CardContent>
         </Card>
-      )}
+      ) : null}
 
       {/* Static Visualization - ASCII diagram walkthrough (fallback) */}
       {pattern.visualization && (