diff --git a/.github/workflows/test-webview-client.yaml b/.github/workflows/test-webview-client.yaml
index ecfd2afa..b7a9d1ea 100644
--- a/.github/workflows/test-webview-client.yaml
+++ b/.github/workflows/test-webview-client.yaml
@@ -56,20 +56,35 @@ jobs:
         run: bun run test:lint
 
   # test that app has no typescript errors
-#   test-types:
-#     runs-on: ubuntu-latest
-#     steps:
-#       - name: Checkout code
-#         uses: actions/checkout@v4
+  test-types:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-#       - name: Set up Bun
-#         uses: oven-sh/setup-bun@v2
+      - name: Checkout bumps source
+        uses: actions/checkout@v4
+        with:
+          repository: bumps/bumps
+          sparse-checkout: 'bumps/webview/client'
+          path: bumps
 
-#       - name: Install packages
-#         run: bun install
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
 
-#       - name: Run test
-#         run: bun run test:types
+      - name: Install packages
+        run: bun install
+
+      - name: Use bumps code from source
+        run: |
+          cd ../../../bumps/bumps/webview/client
+          bun install
+          bun link
+          cd ../../../../refl1d/webview/client
+          bun link bumps-webview-client
+
+      - name: Run test
+        run: bun run test:types
 
   # run unit tests
 #   test-unit:
diff --git a/Makefile b/Makefile
index b546f189..6bbf047f 100644
--- a/Makefile
+++ b/Makefile
@@ -30,6 +30,19 @@ test: ## Run pytest and doc tests
 	pytest -v
 	python check_examples.py --chisq
 
+#######################
+### Dev environment ###
+#######################
+
+.PHONY: dev-backend
+dev-backend: ## Start the backend server in headless mode
+	refl1d-webview --port 8080 --headless
+
+.PHONY: dev-frontend
+dev-frontend: ## Start the frontend server in development mode
+	cd refl1d/webview/client && \
+		$(FE_CMD) run dev
+
 ##############################
 ### Linting and formatting ###
 ##############################
@@ -37,6 +50,10 @@ test: ## Run pytest and doc tests
 .PHONY: lint
 lint: lint-backend lint-frontend ## Run all linters
 
+.PHONY: lint-backend-check
+lint-backend-check: ## Run ruff linting on python code
+	@ruff check bumps/ run.py test.py check_*.py
+
 .PHONY: lint-backend
 lint-backend: ## Run ruff linting on python code
 	@ruff check --fix refl1d/ tests/ setup.py
diff --git a/README.rst b/README.rst
index b1254911..4e801b60 100755
--- a/README.rst
+++ b/README.rst
@@ -1,7 +1,7 @@
 Refl1D
 ======
 
-Refl1D is a program for analyzing 1D reflectometry measurements made with
+Refl1D is a program for analyzing 1-D reflectometry measurements made with
 X-ray and neutron beamlines.  The 1-D models give the depth profile for
 material scattering density composed of a mixture of flat and continuously
 varying freeform layers. With polarized neutron measurements, scientists
diff --git a/pyproject.toml b/pyproject.toml
index 4862ea5a..dcd454bf 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -33,6 +33,7 @@ dependencies = [
 
 [project.optional-dependencies]
 dev = [
+    "matplotlib", # for testing
     "pre-commit",
     "pydantic",
     "pytest",
diff --git a/refl1d/sample/layers.py b/refl1d/sample/layers.py
index 8d3ba604..7671a2a7 100644
--- a/refl1d/sample/layers.py
+++ b/refl1d/sample/layers.py
@@ -224,6 +224,7 @@ def __repr__(self):
 
 @dataclass(init=False)
 class Stack(Layer):
+    # TODO: Finish this docstring
     """
     Reflectometry layer stack
 
diff --git a/refl1d/webview/client/eslint.config.js b/refl1d/webview/client/eslint.config.js
index 03b71f26..5e5d8e79 100644
--- a/refl1d/webview/client/eslint.config.js
+++ b/refl1d/webview/client/eslint.config.js
@@ -1,10 +1,10 @@
+import url from "url";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import pluginVue from "eslint-plugin-vue";
 import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import prettierConfig from "@vue/eslint-config-prettier";
 import vueTsEslintConfig from "@vue/eslint-config-typescript";
-import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
-import pluginVue from "eslint-plugin-vue";
-import url from "url";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const compat = new FlatCompat({
@@ -35,6 +35,10 @@ export default [
       "prefer-const": 0,
       "@typescript-eslint/ban-ts-comment": ["error", { "ts-ignore": "allow-with-description" }],
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        { allowShortCircuit: true, allowTernary: true }, // Temporary fix for indirect dependency @typescript-eslint <= 8.15.0
+      ],
       "prettier/prettier": [
         "warn",
         {},
diff --git a/refl1d/webview/client/package.json b/refl1d/webview/client/package.json
index d708a3a6..fdf80a9f 100644
--- a/refl1d/webview/client/package.json
+++ b/refl1d/webview/client/package.json
@@ -14,37 +14,39 @@
     "preview": "vite preview --port 4173",
     "format": "prettier --write src",
     "lint": "eslint src --fix",
-    "test:lint": "eslint src"
+    "test:lint": "eslint src",
+    "test:types": "vue-tsc --noEmit --skipLibCheck -p tsconfig.json --composite false"
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
     "bumps-webview-client": "^0.1.20",
     "comlink": "^4.4.2",
     "json-difference": "^1.16.1",
-    "plotly.js": "^2.35.2",
+    "plotly.js": "^2.35.3",
     "socket.io-client": "^4.8.1",
-    "uuid": "^11.0.3",
+    "uuid": "^11.0.5",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
-    "@types/plotly.js": "^2.35.0",
+    "@tsconfig/node22": "22.0.0",
+    "@types/plotly.js": "^2.35.1",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
     "@vue/eslint-config-prettier": "10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.3",
-    "eslint": "9.14.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vite-svg-loader": "5.1.0",
+    "vue-tsc": "^2.2.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.31.0",
+    "eslint-plugin-vue": "^9.32.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-jsdoc": "^1.3.0",
-    "vite": "^5.4.11",
-    "vite-svg-loader": "^5.1.0"
-  },
-  "trustedDependencies": [
-    "es5-ext"
-  ]
+    "prettier-plugin-jsdoc": "^1.3.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1"
+  }
 }
diff --git a/refl1d/webview/client/prettier.config.js b/refl1d/webview/client/prettier.config.js
index 47565cd2..7eb290c5 100644
--- a/refl1d/webview/client/prettier.config.js
+++ b/refl1d/webview/client/prettier.config.js
@@ -1,43 +1,24 @@
 /**
- * @see https://prettier.io/docs/en/configuration.html
  * @type {import("prettier").Config}
+ * @see https://prettier.io/docs/en/configuration.html
  */
 
-// module.exports ={
-//   "plugins": [ 
-//     "@ianvs/prettier-plugin-sort-imports",
-//     "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-//     "prettier-plugin-css-order"
-//   ],
-//   "importOrder": ["^vue", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./", "^../"],
-//   "cssDeclarationSorterOrder": "smacss",
-//   "jsdocCapitalizeDescription": false,
-//   "overrides": [
-//     {
-//       "files": "*.svg",
-//       "options": {
-//         "parser": "html"
-//       }
-//     }
-//   ]
-// }
-
 const config = {
-  "plugins": [ 
+  plugins: [
     "@ianvs/prettier-plugin-sort-imports",
     "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-    "prettier-plugin-css-order"
+    "prettier-plugin-css-order",
   ],
-  "importOrder": ["^vue", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./", "^../"],
-  "cssDeclarationSorterOrder": "smacss",
-  "jsdocCapitalizeDescription": false,
-  "overrides": [
+  importOrder: ["^vue", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./", "^../"],
+  cssDeclarationSorterOrder: "smacss",
+  jsdocCapitalizeDescription: false,
+  overrides: [
     {
-      "files": "*.svg",
-      "options": {
-        "parser": "html"
-      }
-    }
+      files: "*.svg",
+      options: {
+        parser: "html",
+      },
+    },
   ],
   experimentalTernaries: true,
   printWidth: 120,
diff --git a/refl1d/webview/client/src/components/DataView.vue b/refl1d/webview/client/src/components/DataView.vue
index 85229000..083a94eb 100644
--- a/refl1d/webview/client/src/components/DataView.vue
+++ b/refl1d/webview/client/src/components/DataView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /// <reference types="@types/plotly.js" />
 import { ref, shallowRef } from "vue";
-import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket.ts";
+import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { configWithSVGDownloadButton } from "bumps-webview-client/src/plotly_extras";
 import { setupDrawLoop } from "bumps-webview-client/src/setupDrawLoop";
 import * as Plotly from "plotly.js/lib/core";
@@ -10,7 +10,7 @@ import { COLORS } from "../colors";
 // const title = "Reflectivity";
 const plot_div = ref<HTMLDivElement | null>(null);
 const plot_offset = ref(0);
-const plot_data = shallowRef<Partial<Plotly.PlotData>>({});
+const plot_data = shallowRef<ModelData[][]>([]);
 const chisq_str = ref("");
 
 const log_y = ref(true);
@@ -85,7 +85,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const dR = lin_y ? xs.dR : xs.dR.map((t) => t * local_offset);
               data_trace.error_y = { type: "data", array: dR, visible: true };
               if (calculate_residuals) {
-                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR[i]);
+                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);
                 const residuals_trace: Trace = {
                   x: xs.Q,
                   y: residuals,
@@ -145,7 +145,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const dR_offset = lin_y ? dR : dR.map((t) => t * local_offset);
               data_trace.error_y = { type: "data", array: dR_offset, visible: true };
               if (calculate_residuals) {
-                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR[i]);
+                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);
                 const residuals_trace: Trace = {
                   x: xs.Q,
                   y: residuals,
@@ -210,7 +210,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const offset_dR = dR.map((t) => t * local_offset);
               data_trace.error_y = { type: "data", array: offset_dR, visible: true };
               if (calculate_residuals) {
-                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR[i]);
+                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);
                 const residuals_trace: Trace = {
                   x: xs.Q,
                   y: residuals,
@@ -256,7 +256,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           if (pp.R !== undefined && mm.R !== undefined) {
             const Rm = interp(pp.Q, mm.Q, mm.R);
             const SA = Rm.map((m, i) => {
-              const p = pp.R[i];
+              const p = pp.R![i];
               return (p - m) / (p + m);
             });
             const SA_offset = SA.map((v) => v + local_offset);
@@ -277,7 +277,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const dRm = interp(pp.Q, mm.Q, mm.dR);
               const dSA = dRm.map((dm, i) => {
                 // const dp = pp.dR[i];
-                const p = pp.R[i];
+                const p = pp.R![i];
                 const m = Rm[i];
                 return Math.sqrt((4 * ((p * dm) ** 2 + (m * dm) ** 2)) / (p + m) ** 4);
               });
@@ -314,7 +314,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
 
 async function fetch_and_draw() {
   const payload = (await props.socket.asyncEmit("get_plot_data", "linear")) as {
-    plotdata: Partial<Plotly.PlotData>;
+    plotdata: ModelData[][];
     chisq: string;
   };
   plot_data.value = payload.plotdata;
@@ -380,7 +380,7 @@ async function draw_plot() {
   };
 
   if (show_residuals.value) {
-    layout.yaxis.domain = [0.4, 1];
+    layout.yaxis!.domain = [0.4, 1];
     // layout.yaxis.anchor = 'x';
     layout.yaxis2 = {
       domain: [0, 0.25],
@@ -390,8 +390,8 @@ async function draw_plot() {
   }
 
   if (reflectivity_type.value === "Spin Asymmetry") {
-    layout.yaxis.range = [-1.5, 1.5];
-    layout.yaxis.autorange = false;
+    layout.yaxis!.range = [-1.5, 1.5];
+    layout.yaxis!.autorange = false;
   }
 
   const config: Partial<Plotly.Config> = {
@@ -404,6 +404,14 @@ async function draw_plot() {
   await Plotly.react(plot_div.value as HTMLDivElement, [...theory_traces, ...data_traces], layout, config);
 }
 
+/**
+ * Performs linear interpolation of the values in fp at the points in xp to the points in x.
+ *
+ * @param x: the points at which to interpolate
+ * @param xp: the points at which the function is known
+ * @param fp: the values of the function at the points in xp
+ * @returns the interpolated y values at the points in x
+ */
 function interp(x: number[], xp: number[], fp: number[]): number[] {
   // assume x and xp are sorted, monotonically increasing
   if (xp.length != fp.length) {
@@ -428,7 +436,7 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
   }
 
   return x.map((xv) => {
-    while (xv >= upper_xp.value && !upper_xp.done) {
+    while (xv >= upper_xp.value! && !upper_xp.done) {
       lower_xp = upper_xp;
       lower_fp = upper_fp;
       upper_xp = xpv.next();
@@ -442,7 +450,8 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
     } else {
       // xv < upper_xp.value
       return (
-        ((upper_fp.value - lower_fp.value) / (upper_xp.value - lower_xp.value)) * (xv - lower_xp.value) + lower_fp.value
+        ((upper_fp.value! - lower_fp.value!) / (upper_xp.value - lower_xp.value!)) * (xv - lower_xp.value!) +
+        lower_fp.value!
       );
     }
   });
diff --git a/refl1d/webview/client/src/components/ModelView.vue b/refl1d/webview/client/src/components/ModelView.vue
index df357c11..6c7bbcc2 100644
--- a/refl1d/webview/client/src/components/ModelView.vue
+++ b/refl1d/webview/client/src/components/ModelView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /// <reference types="@types/uuid"/>
 import { onMounted, ref } from "vue";
-import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket.ts";
+import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { configWithSVGDownloadButton } from "bumps-webview-client/src/plotly_extras";
 import { setupDrawLoop } from "bumps-webview-client/src/setupDrawLoop";
 import * as Plotly from "plotly.js/lib/core";
@@ -49,6 +49,9 @@ async function fetch_and_draw() {
     },
     ...configWithSVGDownloadButton,
   };
+  if (plot_div.value === undefined) {
+    return;
+  }
   await Plotly.react(plot_div.value as HTMLDivElement, [...data], layout, config);
 }
 
@@ -60,6 +63,10 @@ function toggle_multiple() {
   }
   Plotly.Plots.resize(plot_div.value as HTMLDivElement);
 }
+
+function requestRedraw() {
+  draw_requested.value = true;
+}
 </script>
 
 <template>
@@ -69,7 +76,7 @@ function toggle_multiple() {
       <input id="multiple" v-model="show_multiple" class="form-check-input" type="checkbox" @change="toggle_multiple" />
     </div>
     <label for="model" class="form-label"> Models:</label>
-    <select v-if="show_multiple" id="model" v-model="current_models" multiple @change="draw_requested = true">
+    <select v-if="show_multiple" id="model" v-model="current_models" multiple @change="requestRedraw">
       <option
         v-for="{ name, part_name, model_index, part_index } in model_names"
         :key="`${model_index}:${part_index}`"
@@ -78,7 +85,7 @@ function toggle_multiple() {
         {{ model_index }}:{{ part_index }} --- {{ name ?? "" }}:{{ part_name ?? "" }}
       </option>
     </select>
-    <select v-else id="model" v-model="current_models[0]" @change="draw_requested = true">
+    <select v-else id="model" v-model="current_models[0]" @change="requestRedraw">
       <option
         v-for="{ name, part_name, model_index, part_index } in model_names"
         :key="`${model_index}:${part_index}`"
diff --git a/refl1d/webview/client/src/components/ModelViewPlotly.vue b/refl1d/webview/client/src/components/ModelViewPlotly.vue
index 00dfdfe3..3e9b087c 100644
--- a/refl1d/webview/client/src/components/ModelViewPlotly.vue
+++ b/refl1d/webview/client/src/components/ModelViewPlotly.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /// <reference types="@types/uuid"/>
 import { onMounted, ref } from "vue";
-import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket.ts";
+import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { setupDrawLoop } from "bumps-webview-client/src/setupDrawLoop";
 import * as Plotly from "plotly.js/lib/core";
 import { v4 as uuidv4 } from "uuid";
diff --git a/refl1d/webview/client/src/components/ProfileUncertaintyView.vue b/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
index 334c74f7..3818bd88 100644
--- a/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
+++ b/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /// <reference types="@types/uuid"/>
 import { ref, shallowRef } from "vue";
-import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket.ts";
+import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { configWithSVGDownloadButton } from "bumps-webview-client/src/plotly_extras";
 import { setupDrawLoop } from "bumps-webview-client/src/setupDrawLoop";
 import * as Plotly from "plotly.js/lib/core";
diff --git a/refl1d/webview/client/src/components/SimpleBuilder.vue b/refl1d/webview/client/src/components/SimpleBuilder.vue
index d0eb7517..b283a67f 100644
--- a/refl1d/webview/client/src/components/SimpleBuilder.vue
+++ b/refl1d/webview/client/src/components/SimpleBuilder.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, shallowRef } from "vue";
 import type { ComputedRef } from "vue";
-import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket.ts";
+import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { v4 as uuidv4 } from "uuid";
 import { dqIsFWHM } from "../app_state";
 import type {
@@ -125,6 +125,8 @@ function generateQProbe(qmin: number = 0, qmax: number = 0.1, qsteps: number = 2
 async function fetchModel() {
   props.socket.asyncEmit("get_model", (payload: ArrayBuffer) => {
     const json_bytes = new Uint8Array(payload);
+    console.debug({ payload });
+
     if (json_bytes.length < 3) {
       // no model defined...
       modelJson.value = {};
@@ -157,7 +159,9 @@ function getSlot(parameterLike: ParameterLike) {
     const parameter = resolveParameter(parameterLike);
     return parameter.slot;
   }
-  return null;
+  // TODO: This should really not return null.
+  // return null;
+  return { value: 0.0, __class__: "bumps.parameter.Variable" };
 }
 
 function resolveParameter(parameterLike: ParameterLike): Parameter {
@@ -238,7 +242,7 @@ async function sendModel(is_new: boolean = false, name: string | null = null) {
 }
 
 // Adding and deleting layers
-function deleteLayer(index) {
+function deleteLayer(index: number) {
   sortedLayers.value.splice(index, 1);
   sendModel();
 }
@@ -268,16 +272,19 @@ onMounted(() => {
 // Code for draggable rows
 const dragData = ref<number | null>(null);
 
-function dragStart(index: number, event) {
+function dragStart(index: number, event: DragEvent) {
+  if (event.dataTransfer === null) {
+    return;
+  }
   dragData.value = index;
-  event.dataTransfer.setData("text/plain", index);
+  event.dataTransfer.setData("text/plain", `${index}`);
 }
 
-function dragOver(index, event) {
+function dragOver(index: number, event: DragEvent) {
   event.preventDefault();
 }
 
-function drop(index) {
+function drop(index: number) {
   if (dragData.value !== null) {
     const draggedDict = sortedLayers.value[dragData.value];
     sortedLayers.value.splice(dragData.value, 1);
diff --git a/refl1d/webview/client/src/model.ts b/refl1d/webview/client/src/model.ts
index d86b576b..61b2a9a7 100644
--- a/refl1d/webview/client/src/model.ts
+++ b/refl1d/webview/client/src/model.ts
@@ -3,24 +3,33 @@
  * match the Python model serialization format, and must therefore be snake_case
  */
 
+export interface Reference {
+  id: string;
+  __class__: "Reference";
+}
+
+export type BoundsValue = number | "-inf" | "inf";
+
+/* Bumps models */
+// Are these necessary? Imported from bumps?
+
 export interface SerializedModel {
   references: { [key: string]: Parameter };
   object: any;
   $schema: "bumps-draft-02";
 }
 
+export interface NumpyArray {
+  values: number[];
+  dtype: string;
+  __class__: "bumps.util.NumpyArray";
+}
+
 export interface Variable {
   value: number;
   __class__: "bumps.parameter.Variable";
 }
 
-export interface Reference {
-  id: string;
-  __class__: "Reference";
-}
-
-export type BoundsValue = number | "-inf" | "inf";
-
 export interface Parameter {
   id: string;
   name: string;
@@ -37,6 +46,8 @@ export interface ParameterLike {
   __class__: "bumps.parameter.Parameter" | "Reference";
 }
 
+/* Sample models */
+
 export interface Slab {
   name: string;
   thickness: ParameterLike;
@@ -76,16 +87,38 @@ export interface Stack {
   __class__: "refl1d.sample.layers.Stack";
 }
 
+/* Experiment models */
+
 export interface Experiment {
+  /*
+   * Why does this not include name, or the other fields?
+   * Why is this a QProbe and not a Probe?
+   */
   sample: Stack;
   probe: QProbe;
-  __class__: "refl1d.probe.experiment.Experiment";
+  __class__: "refl1d.experiment.Experiment";
 }
 
-export interface NumpyArray {
-  values: number[];
-  dtype: string;
-  __class__: "bumps.util.NumpyArray";
+export interface MixedExperiment {
+  name: string;
+  ratio: (number | ParameterLike)[];
+  samples?: Stack[];
+  probe: Probe | PolarizedNeutronProbe;
+  coherent: boolean;
+  interpolation: number;
+  __class__: "refl1d.experiment.MixedExperiment";
+}
+
+/* Probe models */
+
+export interface Probe {
+  /* W... what? should go here? */
+  name?: string;
+}
+
+export interface PolarizedNeutronProbe {
+  /* W... what? should go here? */
+  name: string;
 }
 
 export interface QProbe {
diff --git a/refl1d/webview/client/src/panels.ts b/refl1d/webview/client/src/panels.ts
index f44f6b12..67a2ce69 100644
--- a/refl1d/webview/client/src/panels.ts
+++ b/refl1d/webview/client/src/panels.ts
@@ -4,7 +4,9 @@ import ModelView from "./components/ModelView.vue";
 import ProfileUncertaintyView from "./components/ProfileUncertaintyView.vue";
 import SimpleBuilder from "./components/SimpleBuilder.vue";
 
-const refl1dPanels = [
+type Panel = { title: string; component: any };
+
+const refl1dPanels: Panel[] = [
   { title: "Reflectivity", component: DataView },
   { title: "Profile", component: ModelView },
   { title: "Profile Uncertainty", component: ProfileUncertaintyView },
@@ -21,7 +23,12 @@ const insertions = {
   Builder: { after: "Uncertainty" },
 };
 
-function replace_panel(panels, replacement_panels, replaced_title, replacement_title) {
+function replace_panel(
+  panels: Panel[],
+  replacement_panels: Panel[],
+  replaced_title: string,
+  replacement_title: string
+) {
   const index = panels.findIndex((p) => p.title === replaced_title);
   const replacement_index = replacement_panels.findIndex((p) => p.title === replacement_title);
   if (index >= 0 && replacement_index >= 0) {
@@ -29,7 +36,7 @@ function replace_panel(panels, replacement_panels, replaced_title, replacement_t
   }
 }
 
-function insert_panel(panels, insertion_panels, title, after) {
+function insert_panel(panels: Panel[], insertion_panels: Panel[], title: string, after: string) {
   let index = panels.findIndex((p) => p.title === after);
   // put it at the end if the after panel is not found
   if (index < 0) {
diff --git a/refl1d/webview/client/src/types.d.ts b/refl1d/webview/client/src/types.d.ts
new file mode 100644
index 00000000..d6f7d73b
--- /dev/null
+++ b/refl1d/webview/client/src/types.d.ts
@@ -0,0 +1 @@
+/// <reference types="bumps-webview-client/src/types/mpld3" />
diff --git a/refl1d/webview/client/tsconfig.json b/refl1d/webview/client/tsconfig.json
new file mode 100644
index 00000000..df75aeca
--- /dev/null
+++ b/refl1d/webview/client/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "extends": ["@tsconfig/node22/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
+  "include": ["src/**/*"],
+  "exclude": [
+    "node_modules/",
+    "bumps/**/*",
+    "src/components/ModelViewPlotly.vue",
+  ],
+  "compilerOptions": {
+    "noErrorTruncation": true,
+    // "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Bundler",
+    "target": "ES6",
+    "types": ["node"],
+    // "allowJs": true
+  }
+}