feat(viz): interactive algorithm viz system

frontend/src/components/visualization/variables-pane.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useVisualization } from "./visualization-context";
+
+function formatValue(value: unknown): string {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (Array.isArray(value)) return `[${value.map(formatValue).join(", ")}]`;
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+export function VariablesPane() {
+  const { currentStep } = useVisualization();
+
+  if (!currentStep?.variables || Object.keys(currentStep.variables).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3">
+      <h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+        Variables
+      </h4>
+      <div className="flex flex-wrap gap-3">
+        {Object.entries(currentStep.variables).map(([name, value]) => (
+          <div
+            key={name}
+            className="flex items-center gap-2 rounded-md bg-muted px-2 py-1"
+          >
+            <span className="font-mono text-sm font-medium text-primary">
+              {name}
+            </span>
+            <span className="text-muted-foreground">=</span>
+            <span className="font-mono text-sm">{formatValue(value)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}