diff --git a/lib/BasePipelineSolver.ts b/lib/BasePipelineSolver.ts
index e868f3f..1592cd2 100644
--- a/lib/BasePipelineSolver.ts
+++ b/lib/BasePipelineSolver.ts
@@ -1,10 +1,13 @@
 import type { GraphicsObject } from "graphics-debug"
 import { BaseSolver } from "./BaseSolver"
 
-export interface PipelineStep<T extends BaseSolver> {
+export interface PipelineStep<
+  T extends BaseSolver = BaseSolver,
+  P = any,
+> {
   solverName: string
-  solverClass: new (...args: any[]) => T
-  getConstructorParams: (pipelineInstance: any) => any[]
+  solverClass: new (params: P) => T
+  getConstructorParams: (pipelineInstance: any) => P
   onSolved?: (pipelineInstance: any) => void
 }
 
@@ -15,11 +18,11 @@ export function definePipelineStep<
 >(
   solverName: string,
   solverClass: new (params: P) => T,
-  getConstructorParams: (instance: Instance) => [P],
+  getConstructorParams: (instance: Instance) => P,
   opts: {
     onSolved?: (instance: Instance) => void
   } = {},
-): PipelineStep<T> {
+): PipelineStep<T, P> {
   return {
     solverName,
     solverClass,
@@ -40,7 +43,7 @@ export abstract class BasePipelineSolver<TInput> extends BaseSolver {
   /** Stores the outputs from each completed pipeline step */
   pipelineOutputs: Record<string, any> = {}
 
-  abstract pipelineDef: PipelineStep<any>[]
+  abstract pipelineDef: PipelineStep<any, any>[]
 
   constructor(inputProblem: TInput) {
     super()
@@ -81,7 +84,7 @@ export abstract class BasePipelineSolver<TInput> extends BaseSolver {
     }
 
     const constructorParams = pipelineStepDef.getConstructorParams(this)
-    this.activeSubSolver = new pipelineStepDef.solverClass(...constructorParams)
+    this.activeSubSolver = new pipelineStepDef.solverClass(constructorParams)
     ;(this as any)[pipelineStepDef.solverName] = this.activeSubSolver
     this.timeSpentOnPhase[pipelineStepDef.solverName] = 0
     this.startTimeOfPhase[pipelineStepDef.solverName] = performance.now()
diff --git a/lib/BaseSolver.ts b/lib/BaseSolver.ts
index 52dfed7..ba332b6 100644
--- a/lib/BaseSolver.ts
+++ b/lib/BaseSolver.ts
@@ -8,8 +8,9 @@ import type { GraphicsObject } from "graphics-debug"
  * Solvers should override visualize() to return a GraphicsObject representing
  * the current state of the solver.
  *
- * Solvers should override getConstructorParams() to return the parameters
- * needed to construct the solver.
+ * Solvers should override getConstructorParams() to return the object passed as
+ * the first (and only) constructor parameter. This keeps constructor
+ * signatures serializable for tooling like the download dropdowns.
  */
 export class BaseSolver {
   MAX_ITERATIONS = 100e3
diff --git a/lib/react/DownloadDropdown.tsx b/lib/react/DownloadDropdown.tsx
new file mode 100644
index 0000000..6fd9aca
--- /dev/null
+++ b/lib/react/DownloadDropdown.tsx
@@ -0,0 +1,254 @@
+import React, { useEffect, useRef, useState } from "react"
+import type { BaseSolver } from "../BaseSolver"
+import { BasePipelineSolver } from "../BasePipelineSolver"
+
+export interface DownloadTemplateContext {
+  solver: BaseSolver
+  solverName: string
+  params: any
+  isPipelineSolver: boolean
+}
+
+export interface DownloadTemplateOverrides {
+  generatePageTsxContent?: (context: DownloadTemplateContext) => string
+  generateTestTsContent?: (context: DownloadTemplateContext) => string
+}
+
+export interface DownloadDropdownProps {
+  solver: BaseSolver
+  className?: string
+  overrides?: DownloadTemplateOverrides
+}
+
+export const deepRemoveUnderscoreProperties = (obj: any): any => {
+  if (obj === null || typeof obj !== "object") {
+    return obj
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(deepRemoveUnderscoreProperties)
+  }
+
+  const result: Record<string, any> = {}
+  for (const [key, value] of Object.entries(obj)) {
+    if (!key.startsWith("_")) {
+      result[key] = deepRemoveUnderscoreProperties(value)
+    }
+  }
+  return result
+}
+
+const defaultPageTsxContent = ({
+  solverName,
+  params,
+  isPipelineSolver,
+}: DownloadTemplateContext) => {
+  const serializedParams = JSON.stringify(params, null, 2)
+
+  if (isPipelineSolver) {
+    return `import { useMemo } from "react"
+import { PipelineDebugger } from "solver-utils/lib/react"
+import { ${solverName} } from "lib/solvers/${solverName}/${solverName}"
+
+export const inputProblem = ${serializedParams}
+
+export default () => {
+  const solver = useMemo(() => new ${solverName}(inputProblem as any), [])
+  return <PipelineDebugger solver={solver} />
+}
+`
+  }
+
+  return `import { useMemo } from "react"
+import { GenericSolverDebugger } from "solver-utils/lib/react"
+import { ${solverName} } from "lib/solvers/${solverName}/${solverName}"
+
+export const inputProblem = ${serializedParams}
+
+export default () => {
+  const solver = useMemo(() => new ${solverName}(inputProblem as any), [])
+  return <GenericSolverDebugger solver={solver} />
+}
+`
+}
+
+const defaultTestTsContent = ({ solverName, params }: DownloadTemplateContext) => {
+  const serializedParams = JSON.stringify(params, null, 2)
+
+  return `import { ${solverName} } from "lib/solvers/${solverName}/${solverName}"
+import { test, expect } from "bun:test"
+
+test("${solverName} should solve problem correctly", () => {
+  const input = ${serializedParams}
+
+  const solver = new ${solverName}(input as any)
+  solver.solve()
+
+  expect(solver).toMatchSolverSnapshot(import.meta.path)
+
+  // Add more specific assertions based on expected output
+  // expect(solver.getOutput()).toMatchInlineSnapshot()
+})
+`
+}
+
+export const DownloadDropdown: React.FC<DownloadDropdownProps> = ({
+  solver,
+  className = "",
+  overrides,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    if (typeof document !== "undefined") {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+    return () => {
+      if (typeof document !== "undefined") {
+        document.removeEventListener("mousedown", handleClickOutside)
+      }
+    }
+  }, [])
+
+  const runWithParams = (
+    action: (context: DownloadTemplateContext) => void,
+  ) => {
+    if (typeof solver.getConstructorParams !== "function") {
+      const message = `getConstructorParams() is not implemented for ${solver.constructor.name}`
+      if (typeof window !== "undefined") {
+        window.alert?.(message)
+      } else {
+        console.error(message)
+      }
+      return
+    }
+
+    try {
+      const rawParams = solver.getConstructorParams()
+      const params = deepRemoveUnderscoreProperties(rawParams)
+      const solverName = solver.constructor.name
+      const context: DownloadTemplateContext = {
+        solver,
+        solverName,
+        params,
+        isPipelineSolver: solver instanceof BasePipelineSolver,
+      }
+      action(context)
+    } catch (error) {
+      const message = `Error gathering constructor params for ${solver.constructor.name}: ${error instanceof Error ? error.message : String(error)}`
+      if (typeof window !== "undefined") {
+        window.alert?.(message)
+      } else {
+        console.error(message)
+      }
+    }
+  }
+
+  const downloadJSON = () => {
+    runWithParams(({ solverName, params }) => {
+      if (typeof document === "undefined") {
+        console.error("Document is not available to trigger downloads")
+        return
+      }
+      const blob = new Blob([JSON.stringify(params, null, 2)], {
+        type: "application/json",
+      })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `${solverName}_params.json`
+      a.click()
+      URL.revokeObjectURL(url)
+    })
+    setIsOpen(false)
+  }
+
+  const downloadPageTsx = () => {
+    runWithParams((context) => {
+      if (typeof document === "undefined") {
+        console.error("Document is not available to trigger downloads")
+        return
+      }
+      const content =
+        overrides?.generatePageTsxContent?.(context) ??
+        defaultPageTsxContent(context)
+      const blob = new Blob([content], { type: "text/plain" })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `${context.solverName}.page.tsx`
+      a.click()
+      URL.revokeObjectURL(url)
+    })
+    setIsOpen(false)
+  }
+
+  const downloadTestTs = () => {
+    runWithParams((context) => {
+      if (typeof document === "undefined") {
+        console.error("Document is not available to trigger downloads")
+        return
+      }
+      const content =
+        overrides?.generateTestTsContent?.(context) ??
+        defaultTestTsContent(context)
+      const blob = new Blob([content], { type: "text/plain" })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `${context.solverName}.test.ts`
+      a.click()
+      URL.revokeObjectURL(url)
+    })
+    setIsOpen(false)
+  }
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      <button
+        className="px-2 py-1 rounded text-xs cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+        title={`Download options for ${solver.constructor.name}`}
+        type="button"
+      >
+        {solver.constructor.name}
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 min-w-[150px]">
+          <button
+            className="w-full text-left px-3 py-2 hover:bg-gray-100 text-xs"
+            onClick={downloadJSON}
+            type="button"
+          >
+            Download JSON
+          </button>
+          <button
+            className="w-full text-left px-3 py-2 hover:bg-gray-100 text-xs"
+            onClick={downloadPageTsx}
+            type="button"
+          >
+            Download page.tsx
+          </button>
+          <button
+            className="w-full text-left px-3 py-2 hover:bg-gray-100 text-xs"
+            onClick={downloadTestTs}
+            type="button"
+          >
+            Download test.ts
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/lib/react/GenericSolverDebugger.tsx b/lib/react/GenericSolverDebugger.tsx
index a8e4d20..ce34146 100644
--- a/lib/react/GenericSolverDebugger.tsx
+++ b/lib/react/GenericSolverDebugger.tsx
@@ -2,12 +2,14 @@ import React, { useEffect, useMemo, useReducer } from "react"
 import type { BaseSolver } from "../BaseSolver"
 import { InteractiveGraphics } from "graphics-debug/react"
 import { GenericSolverToolbar } from "./GenericSolverToolbar"
+import type { DownloadTemplateOverrides } from "./DownloadDropdown"
 
 export interface GenericSolverDebuggerProps {
   solver: BaseSolver
   animationSpeed?: number
   onSolverStarted?: (solver: BaseSolver) => void
   onSolverCompleted?: (solver: BaseSolver) => void
+  downloadOverrides?: DownloadTemplateOverrides
 }
 
 export const GenericSolverDebugger = ({
@@ -15,6 +17,7 @@ export const GenericSolverDebugger = ({
   animationSpeed = 25,
   onSolverStarted,
   onSolverCompleted,
+  downloadOverrides,
 }: GenericSolverDebuggerProps) => {
   const [renderCount, incRenderCount] = useReducer((x) => x + 1, 0)
 
@@ -59,6 +62,7 @@ export const GenericSolverDebugger = ({
         animationSpeed={animationSpeed}
         onSolverStarted={onSolverStarted}
         onSolverCompleted={onSolverCompleted}
+        downloadOverrides={downloadOverrides}
       />
       {graphicsAreEmpty ? (
         <div className="p-4 text-gray-500">No Graphics Yet</div>
diff --git a/lib/react/GenericSolverToolbar.tsx b/lib/react/GenericSolverToolbar.tsx
index 5640490..90711b0 100644
--- a/lib/react/GenericSolverToolbar.tsx
+++ b/lib/react/GenericSolverToolbar.tsx
@@ -1,6 +1,8 @@
 import React, { useReducer, useRef, useEffect } from "react"
 import type { BaseSolver } from "../BaseSolver"
 import type { BasePipelineSolver } from "../BasePipelineSolver"
+import { SolverBreadcrumbInputDownloader } from "./SolverBreadcrumbInputDownloader"
+import type { DownloadTemplateOverrides } from "./DownloadDropdown"
 
 export interface GenericSolverToolbarProps {
   solver: BaseSolver
@@ -8,6 +10,7 @@ export interface GenericSolverToolbarProps {
   animationSpeed?: number
   onSolverStarted?: (solver: BaseSolver) => void
   onSolverCompleted?: (solver: BaseSolver) => void
+  downloadOverrides?: DownloadTemplateOverrides
 }
 
 export const GenericSolverToolbar = ({
@@ -16,6 +19,7 @@ export const GenericSolverToolbar = ({
   animationSpeed = 25,
   onSolverStarted,
   onSolverCompleted,
+  downloadOverrides,
 }: GenericSolverToolbarProps) => {
   const [isAnimating, setIsAnimating] = useReducer((x) => !x, false)
   const animationRef = useRef<NodeJS.Timeout | undefined>(undefined)
@@ -111,6 +115,11 @@ export const GenericSolverToolbar = ({
 
   return (
     <div className="space-y-2 p-2 border-b">
+      <SolverBreadcrumbInputDownloader
+        solver={solver}
+        overrides={downloadOverrides}
+      />
+
       <div className="flex gap-2 items-center flex-wrap">
         <button
           onClick={handleStep}
diff --git a/lib/react/PipelineDebugger.tsx b/lib/react/PipelineDebugger.tsx
new file mode 100644
index 0000000..2f2d353
--- /dev/null
+++ b/lib/react/PipelineDebugger.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo, useReducer } from "react"
+import type { BasePipelineSolver } from "../BasePipelineSolver"
+import type { BaseSolver } from "../BaseSolver"
+import { InteractiveGraphics } from "graphics-debug/react"
+import { GenericSolverToolbar } from "./GenericSolverToolbar"
+import { PipelineStageTable } from "./PipelineStageTable"
+import type { DownloadTemplateOverrides } from "./DownloadDropdown"
+
+export interface PipelineDebuggerProps {
+  solver: BasePipelineSolver<any>
+  animationSpeed?: number
+  onSolverStarted?: (solver: BaseSolver) => void
+  onSolverCompleted?: (solver: BaseSolver) => void
+  downloadOverrides?: DownloadTemplateOverrides
+}
+
+export const PipelineDebugger: React.FC<PipelineDebuggerProps> = ({
+  solver,
+  animationSpeed = 25,
+  onSolverStarted,
+  onSolverCompleted,
+  downloadOverrides,
+}) => {
+  const [renderCount, incRenderCount] = useReducer((x) => x + 1, 0)
+
+  const visualization = useMemo(() => {
+    try {
+      return (
+        solver.visualize() || {
+          points: [],
+          lines: [],
+          rects: [],
+          circles: [],
+        }
+      )
+    } catch (error) {
+      console.error("Visualization error:", error)
+      return { points: [], lines: [], rects: [], circles: [] }
+    }
+  }, [solver, renderCount])
+
+  const graphicsAreEmpty = useMemo(
+    () =>
+      (visualization.rects?.length || 0) === 0 &&
+      (visualization.lines?.length || 0) === 0 &&
+      (visualization.points?.length || 0) === 0 &&
+      (visualization.circles?.length || 0) === 0,
+    [visualization],
+  )
+
+  return (
+    <div>
+      <GenericSolverToolbar
+        solver={solver}
+        triggerRender={incRenderCount}
+        animationSpeed={animationSpeed}
+        onSolverStarted={onSolverStarted}
+        onSolverCompleted={onSolverCompleted}
+        downloadOverrides={downloadOverrides}
+      />
+      {graphicsAreEmpty ? (
+        <div className="p-4 text-gray-500">No Graphics Yet</div>
+      ) : (
+        <InteractiveGraphics graphics={visualization} />
+      )}
+      <PipelineStageTable
+        pipelineSolver={solver}
+        triggerRender={() => incRenderCount()}
+      />
+    </div>
+  )
+}
diff --git a/lib/react/PipelineStageTable.tsx b/lib/react/PipelineStageTable.tsx
new file mode 100644
index 0000000..f2c32e0
--- /dev/null
+++ b/lib/react/PipelineStageTable.tsx
@@ -0,0 +1,158 @@
+import React from "react"
+import type { BasePipelineSolver } from "../BasePipelineSolver"
+import { deepRemoveUnderscoreProperties } from "./DownloadDropdown"
+
+type StageStatus = "Solved" | "Failed" | "Running" | "Not Started"
+
+export interface PipelineStageTableProps {
+  pipelineSolver: BasePipelineSolver<any>
+  triggerRender: () => void
+}
+
+/**
+ * Displays every stage of the pipeline with the status ("Solved", "Failed", "Running" or "Not Started"),
+ * what iteration it started on, what iteration it ended on, and the time it took to solve.
+ *
+ * The table also has a column "Actions" that has a download icon to download the getConstructorParams()
+ * of each stage.
+ */
+export const PipelineStageTable: React.FC<PipelineStageTableProps> = ({
+  pipelineSolver,
+  triggerRender,
+}) => {
+  const getStageStatus = (stageIndex: number): StageStatus => {
+    if (pipelineSolver.currentPipelineStepIndex > stageIndex) {
+      return "Solved"
+    }
+    if (pipelineSolver.currentPipelineStepIndex === stageIndex) {
+      if (pipelineSolver.failed) return "Failed"
+      if (pipelineSolver.activeSubSolver) return "Running"
+    }
+    return "Not Started"
+  }
+
+  const downloadParams = (stageName: string) => {
+    const stage = pipelineSolver.pipelineDef.find(
+      (s) => s.solverName === stageName,
+    )
+    if (!stage) return
+
+    try {
+      if (typeof document === "undefined") {
+        console.error("Document is not available to download stage params")
+        return
+      }
+      const rawParams = stage.getConstructorParams(pipelineSolver)
+      const params = deepRemoveUnderscoreProperties(rawParams)
+      const blob = new Blob([JSON.stringify(params, null, 2)], {
+        type: "application/json",
+      })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `${stageName}_params.json`
+      a.click()
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      const message = `Error downloading params for ${stageName}: ${
+        error instanceof Error ? error.message : String(error)
+      }`
+      if (typeof window !== "undefined") {
+        window.alert?.(message)
+      } else {
+        console.error(message)
+      }
+    }
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full border border-gray-300">
+        <thead>
+          <tr className="bg-gray-100">
+            <th className="border border-gray-300 px-4 py-2 text-left">Stage</th>
+            <th className="border border-gray-300 px-4 py-2 text-left">Status</th>
+            <th className="border border-gray-300 px-4 py-2 text-left">
+              Start Iteration
+            </th>
+            <th className="border border-gray-300 px-4 py-2 text-left">
+              End Iteration
+            </th>
+            <th className="border border-gray-300 px-4 py-2 text-left">
+              Time (ms)
+            </th>
+            <th className="border border-gray-300 px-4 py-2 text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {pipelineSolver.pipelineDef.map((stage, index) => {
+            const status = getStageStatus(index)
+            const startIteration =
+              pipelineSolver.firstIterationOfPhase[stage.solverName]
+            const endIteration =
+              status === "Solved"
+                ? (pipelineSolver.firstIterationOfPhase[stage.solverName] || 0) +
+                  ((pipelineSolver as any)[stage.solverName]?.iterations || 0)
+                : undefined
+            const timeSpent = pipelineSolver.timeSpentOnPhase[stage.solverName]
+
+            return (
+              <tr key={stage.solverName} className="hover:bg-gray-50">
+                <td className="border border-gray-300 px-4 py-2 font-mono text-sm">
+                  {stage.solverName}
+                </td>
+                <td className="border border-gray-300 px-4 py-2">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`px-2 py-1 rounded text-sm ${
+                        status === "Solved"
+                          ? "bg-green-100 text-green-800"
+                          : status === "Failed"
+                            ? "bg-red-100 text-red-800"
+                            : status === "Running"
+                              ? "bg-yellow-100 text-yellow-800"
+                              : "bg-gray-100 text-gray-800"
+                      }`}
+                    >
+                      {status}
+                    </span>
+                    <button
+                      onClick={() => {
+                        pipelineSolver.solveUntilPhase(stage.solverName)
+                        triggerRender()
+                      }}
+                      className="hover:bg-green-500 text-gray-600 hover:text-white px-2 py-1 rounded text-sm"
+                      title={`Run until ${stage.solverName} is active`}
+                      type="button"
+                    >
+                      ▶️
+                    </button>
+                  </div>
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {startIteration !== undefined ? startIteration : "-"}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {endIteration !== undefined ? endIteration : "-"}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {timeSpent !== undefined ? Math.round(timeSpent) : "-"}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  <button
+                    onClick={() => downloadParams(stage.solverName)}
+                    className="bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded text-sm"
+                    title="Download constructor params"
+                    type="button"
+                  >
+                    ⬇️
+                  </button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/lib/react/SolverBreadcrumbInputDownloader.tsx b/lib/react/SolverBreadcrumbInputDownloader.tsx
new file mode 100644
index 0000000..f70292a
--- /dev/null
+++ b/lib/react/SolverBreadcrumbInputDownloader.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import type { BaseSolver } from "../BaseSolver"
+import { DownloadDropdown, type DownloadTemplateOverrides } from "./DownloadDropdown"
+
+export const getSolverChain = (solver: BaseSolver): BaseSolver[] => {
+  if (!solver.activeSubSolver) {
+    return [solver]
+  }
+  return [solver, ...getSolverChain(solver.activeSubSolver)]
+}
+
+export interface SolverBreadcrumbInputDownloaderProps {
+  solver: BaseSolver
+  className?: string
+  overrides?: DownloadTemplateOverrides
+}
+
+/**
+ * Displays each solver in the chain as a breadcrumb with download functionality
+ */
+export const SolverBreadcrumbInputDownloader: React.FC<
+  SolverBreadcrumbInputDownloaderProps
+> = ({ solver, className = "", overrides }) => {
+  const solverChain = getSolverChain(solver)
+
+  return (
+    <div className={`flex gap-1 items-center text-sm pt-1 ${className}`}>
+      {solverChain.map((s, index) => (
+        <div key={`${s.constructor.name}-${index}`} className="flex items-center">
+          {index > 0 && <span className="text-gray-400 mx-1">→</span>}
+          <DownloadDropdown solver={s} overrides={overrides} />
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/lib/react/index.ts b/lib/react/index.ts
index 828092c..289d4bf 100644
--- a/lib/react/index.ts
+++ b/lib/react/index.ts
@@ -1,2 +1,6 @@
 export * from "./GenericSolverDebugger"
 export * from "./GenericSolverToolbar"
+export * from "./DownloadDropdown"
+export * from "./SolverBreadcrumbInputDownloader"
+export * from "./PipelineStageTable"
+export * from "./PipelineDebugger"
diff --git a/site/ExamplePipelineSolver.ts b/site/ExamplePipelineSolver.ts
index 121e1b7..d915b48 100644
--- a/site/ExamplePipelineSolver.ts
+++ b/site/ExamplePipelineSolver.ts
@@ -12,6 +12,11 @@ interface OptimizationProblem {
   initialY: number
 }
 
+interface FinePositioningParams {
+  problem: OptimizationProblem
+  startPosition: { x: number; y: number }
+}
+
 /**
  * First stage: Rough positioning using large steps
  */
@@ -20,7 +25,7 @@ class CoarsePositioningSolver extends BaseSolver {
   private currentY: number
   private stepSize = 5.0
 
-  constructor(private problem: OptimizationProblem) {
+  constructor(private readonly problem: OptimizationProblem) {
     super()
     this.currentX = problem.initialX
     this.currentY = problem.initialY
@@ -101,7 +106,7 @@ class CoarsePositioningSolver extends BaseSolver {
   }
 
   override getConstructorParams() {
-    return [this.problem]
+    return this.problem
   }
 
   getFinalPosition() {
@@ -116,14 +121,13 @@ class FinePositioningSolver extends BaseSolver {
   private currentX: number
   private currentY: number
   private stepSize = 0.5
+  private readonly problem: OptimizationProblem
 
-  constructor(
-    private problem: OptimizationProblem,
-    startPosition: { x: number; y: number },
-  ) {
+  constructor(private readonly params: FinePositioningParams) {
     super()
-    this.currentX = startPosition.x
-    this.currentY = startPosition.y
+    this.problem = params.problem
+    this.currentX = params.startPosition.x
+    this.currentY = params.startPosition.y
     this.MAX_ITERATIONS = 100
   }
 
@@ -217,7 +221,7 @@ class FinePositioningSolver extends BaseSolver {
   }
 
   override getConstructorParams() {
-    return [this.problem, { x: this.currentX, y: this.currentY }]
+    return this.params
   }
 }
 
@@ -232,7 +236,7 @@ export class ExamplePipelineSolver extends BasePipelineSolver<OptimizationProble
     definePipelineStep(
       "coarsePositioningSolver",
       CoarsePositioningSolver,
-      (instance) => [instance.inputProblem],
+      (instance) => instance.inputProblem,
       {
         onSolved: (instance) => {
           console.log("Coarse positioning completed")
@@ -242,14 +246,14 @@ export class ExamplePipelineSolver extends BasePipelineSolver<OptimizationProble
     definePipelineStep(
       "finePositioningSolver",
       FinePositioningSolver,
-      (instance) => [
-        instance.inputProblem,
-        instance
+      (instance) => ({
+        problem: instance.inputProblem,
+        startPosition: instance
           .getSolver<CoarsePositioningSolver>("coarsePositioningSolver")!
           .getFinalPosition(),
-      ],
+      }),
       {
-        onSolved: (instance) => {
+        onSolved: () => {
           console.log("Fine positioning completed - pipeline solved!")
         },
       },
@@ -257,6 +261,6 @@ export class ExamplePipelineSolver extends BasePipelineSolver<OptimizationProble
   ]
 
   override getConstructorParams() {
-    return [this.inputProblem]
+    return this.inputProblem
   }
 }
diff --git a/site/ExampleSolver.ts b/site/ExampleSolver.ts
index 6105a9f..8e3065d 100644
--- a/site/ExampleSolver.ts
+++ b/site/ExampleSolver.ts
@@ -1,6 +1,12 @@
 import { BaseSolver } from "../lib/BaseSolver"
 import type { GraphicsObject } from "graphics-debug"
 
+export interface ExampleSolverParams {
+  targetPoints: { x: number; y: number; label: string }[]
+  initialPosition: { x: number; y: number }
+  initialStepSize: number
+}
+
 /**
  * Example solver that demonstrates a simple optimization problem:
  * Finding the optimal position for a point that minimizes distance to a set of target points
@@ -10,33 +16,34 @@ export class ExampleSolver extends BaseSolver {
   private targetPoints: { x: number; y: number; label: string }[]
   private bestPosition: { x: number; y: number }
   private bestDistance: number
-  private step_size: number
+  private stepSize: number
+  private readonly params: ExampleSolverParams
 
-  constructor() {
+  constructor(params: ExampleSolverParams) {
     super()
     this.MAX_ITERATIONS = 1000
+    this.params = {
+      initialPosition: { ...params.initialPosition },
+      initialStepSize: params.initialStepSize,
+      targetPoints: params.targetPoints.map((point) => ({ ...point })),
+    }
+
+    // Initialize with provided target points
+    this.targetPoints = this.params.targetPoints.map((point) => ({ ...point }))
 
-    // Initialize with some target points
-    this.targetPoints = [
-      { x: 10, y: 5, label: "Target A" },
-      { x: -5, y: 8, label: "Target B" },
-      { x: 3, y: -10, label: "Target C" },
-      { x: -8, y: -3, label: "Target D" },
-    ]
-
-    // Start at origin
-    this.currentPosition = { x: 0, y: 0 }
-    this.bestPosition = { x: 0, y: 0 }
+    // Start at provided origin
+    this.currentPosition = { ...this.params.initialPosition }
+    this.bestPosition = { ...this.currentPosition }
     this.bestDistance = this.calculateTotalDistance(this.currentPosition)
-    this.step_size = 2.0
+    this.stepSize = this.params.initialStepSize
   }
 
   override _step() {
     // Try small perturbations in random directions
     const angle = Math.random() * 2 * Math.PI
     const testPosition = {
-      x: this.currentPosition.x + Math.cos(angle) * this.step_size,
-      y: this.currentPosition.y + Math.sin(angle) * this.step_size,
+      x: this.currentPosition.x + Math.cos(angle) * this.stepSize,
+      y: this.currentPosition.y + Math.sin(angle) * this.stepSize,
     }
 
     const testDistance = this.calculateTotalDistance(testPosition)
@@ -62,11 +69,11 @@ export class ExampleSolver extends BaseSolver {
       currentDistance: this.calculateTotalDistance(this.currentPosition),
       bestDistance: this.bestDistance,
       temperature: Math.max(0.1, 1.0 - this.iterations / this.MAX_ITERATIONS),
-      stepSize: this.step_size,
+      stepSize: this.stepSize,
     }
 
     // Gradually reduce step size
-    this.step_size *= 0.999
+    this.stepSize *= 0.999
 
     // Check for convergence
     if (this.iterations > 100 && this.bestDistance < 0.1) {
@@ -171,6 +178,19 @@ export class ExampleSolver extends BaseSolver {
   }
 
   override getConstructorParams() {
-    return []
+    return this.params
+  }
+
+  static createDefaultParams(): ExampleSolverParams {
+    return {
+      targetPoints: [
+        { x: 10, y: 5, label: "Target A" },
+        { x: -5, y: 8, label: "Target B" },
+        { x: 3, y: -10, label: "Target C" },
+        { x: -8, y: -3, label: "Target D" },
+      ],
+      initialPosition: { x: 0, y: 0 },
+      initialStepSize: 2.0,
+    }
   }
 }
diff --git a/site/example-solver-demo.page.tsx b/site/example-solver-demo.page.tsx
index 52036fe..6a70cf6 100644
--- a/site/example-solver-demo.page.tsx
+++ b/site/example-solver-demo.page.tsx
@@ -11,7 +11,10 @@ import { ExampleSolver } from "./ExampleSolver"
  */
 export default function ExampleSolverDemo() {
   // Create a new instance of our example solver
-  const solver = useMemo(() => new ExampleSolver(), [])
+  const solver = useMemo(
+    () => new ExampleSolver(ExampleSolver.createDefaultParams()),
+    [],
+  )
 
   return (
     <GenericSolverDebugger
diff --git a/site/pipeline-solver-demo.page.tsx b/site/pipeline-solver-demo.page.tsx
index 90f49bd..66f792d 100644
--- a/site/pipeline-solver-demo.page.tsx
+++ b/site/pipeline-solver-demo.page.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react"
-import { GenericSolverDebugger } from "../lib/react/GenericSolverDebugger"
+import { PipelineDebugger } from "../lib/react/PipelineDebugger"
 import { ExamplePipelineSolver } from "./ExamplePipelineSolver"
 
 /**
@@ -22,7 +22,7 @@ export default function PipelineSolverDemo() {
   )
 
   return (
-    <GenericSolverDebugger
+    <PipelineDebugger
       solver={solver}
       animationSpeed={100}
       onSolverStarted={(solver) => {
@@ -30,7 +30,9 @@ export default function PipelineSolverDemo() {
       }}
       onSolverCompleted={(solver) => {
         console.log("Pipeline solver completed:", solver)
-        console.log("Phase statistics:", (solver as any).getPhaseStats())
+        if (solver instanceof ExamplePipelineSolver) {
+          console.log("Phase statistics:", solver.getPhaseStats())
+        }
       }}
     />
   )
diff --git a/tests/BasePipelineSolver.test.ts b/tests/BasePipelineSolver.test.ts
index 3a3f583..f35f5b4 100644
--- a/tests/BasePipelineSolver.test.ts
+++ b/tests/BasePipelineSolver.test.ts
@@ -14,7 +14,7 @@ interface TestInputProblem {
 class StepOneSolver extends BaseSolver {
   result: number
 
-  constructor(private input: TestInputProblem) {
+  constructor(private readonly input: TestInputProblem) {
     super()
     this.result = input.initialValue
   }
@@ -34,22 +34,25 @@ class StepOneSolver extends BaseSolver {
       circles: [],
     }
   }
+
+  override getConstructorParams() {
+    return this.input
+  }
 }
 
 class StepTwoSolver extends BaseSolver {
   result: number
   target: number
 
-  constructor({
-    startValue,
-    target,
-  }: {
-    startValue: number
-    target: number
-  }) {
+  constructor(
+    private readonly params: {
+      startValue: number
+      target: number
+    },
+  ) {
     super()
-    this.target = target
-    this.result = startValue
+    this.target = params.target
+    this.result = params.startValue
   }
 
   override _step() {
@@ -67,14 +70,18 @@ class StepTwoSolver extends BaseSolver {
       circles: [],
     }
   }
+
+  override getConstructorParams() {
+    return this.params
+  }
 }
 
 class StepThreeSolver extends BaseSolver {
   result: number
 
-  constructor(private startValue: number) {
+  constructor(private readonly params: { startValue: number }) {
     super()
-    this.result = startValue
+    this.result = params.startValue
   }
 
   override _step() {
@@ -92,6 +99,10 @@ class StepThreeSolver extends BaseSolver {
       circles: [],
     }
   }
+
+  override getConstructorParams() {
+    return this.params
+  }
 }
 
 class TestPipelineSolver extends BasePipelineSolver<TestInputProblem> {
@@ -105,7 +116,7 @@ class TestPipelineSolver extends BasePipelineSolver<TestInputProblem> {
     definePipelineStep(
       "stepOneSolver",
       StepOneSolver,
-      (instance) => [instance.inputProblem],
+      (instance) => instance.inputProblem,
       {
         onSolved: (instance) => {
           console.log(
@@ -117,12 +128,10 @@ class TestPipelineSolver extends BasePipelineSolver<TestInputProblem> {
     definePipelineStep(
       "stepTwoSolver",
       StepTwoSolver,
-      (instance) => [
-        {
-          startValue: instance.getSolver<StepOneSolver>("stepOneSolver")!.result,
-          target: instance.inputProblem.targetValue,
-        },
-      ],
+      (instance) => ({
+        startValue: instance.getSolver<StepOneSolver>("stepOneSolver")!.result,
+        target: instance.inputProblem.targetValue,
+      }),
       {
         onSolved: (instance) => {
           console.log(
@@ -134,9 +143,9 @@ class TestPipelineSolver extends BasePipelineSolver<TestInputProblem> {
     definePipelineStep(
       "stepThreeSolver",
       StepThreeSolver,
-      (instance) => [
-        instance.getSolver<StepTwoSolver>("stepTwoSolver")!.result,
-      ],
+      (instance) => ({
+        startValue: instance.getSolver<StepTwoSolver>("stepTwoSolver")!.result,
+      }),
       {
         onSolved: (instance) => {
           ;(instance as any).finalResult =
@@ -150,7 +159,7 @@ class TestPipelineSolver extends BasePipelineSolver<TestInputProblem> {
   ]
 
   override getConstructorParams() {
-    return [this.inputProblem]
+    return this.inputProblem
   }
 }
 
@@ -337,10 +346,12 @@ test("BasePipelineSolver error handling", () => {
   class FailingPipelineSolver extends BasePipelineSolver<TestInputProblem> {
     failingSolver?: FailingSolver
 
-    pipelineDef = [definePipelineStep("failingSolver", FailingSolver, () => [undefined])]
+    pipelineDef = [
+      definePipelineStep("failingSolver", FailingSolver, () => undefined),
+    ]
 
     override getConstructorParams() {
-      return [this.inputProblem]
+      return this.inputProblem
     }
   }
 
diff --git a/tests/BaseSolver.test.ts b/tests/BaseSolver.test.ts
index 760d20d..24696a4 100644
--- a/tests/BaseSolver.test.ts
+++ b/tests/BaseSolver.test.ts
@@ -93,7 +93,7 @@ test("BaseSolver visualization", () => {
 
 test("BaseSolver max iterations protection", () => {
   class InfiniteSolver extends BaseSolver {
-    MAX_ITERATIONS = 5
+    override MAX_ITERATIONS = 5
 
     override _step() {
       // Never set solved = true