diff --git a/.gitignore b/.gitignore
index 4bd692c4..00259403 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,13 +7,9 @@
 *.pyd
 *.pyc
 **/__pycache__/
-**/node_modules/
-/refl1d/webview/client/dist/
 *.swp
 *.so
 *.bak
-refl1d-webview-client*.tgz
-bumps-webview-client*.tgz
 /build/
 /dist/
 /refl1d.egg-info/
@@ -61,8 +57,6 @@ venv.bak/
 *.swp
 *.bak
 
-test-files/
-
 # Unused lock files
 bun.lock
 uv.lock
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 9585c194..a27bd46b 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,9 +1,9 @@
 repos:
   - repo: local
     hooks:
-      - id: eslint
-        name: eslint
-        entry: bash -c "cd refl1d/webview/client && npm run lint"
+      - id: frontend-lint
+        name: frontend-lint
+        entry: bash -c "cd refl1d/webview/client && npm run lint || bun run lint || exit 1"
         language: system
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v6.0.0
@@ -24,4 +24,5 @@ repos:
 
 ci:
   autoupdate_schedule: monthly
-  skip: [eslint]
+  skip: [frontend-lint]
+
diff --git a/refl1d/webview/client/.gitignore b/refl1d/webview/client/.gitignore
new file mode 100644
index 00000000..1fed572a
--- /dev/null
+++ b/refl1d/webview/client/.gitignore
@@ -0,0 +1,5 @@
+bumps-webview-client*.tgz
+refl1d-webview-client*.tgz
+bun.lock
+dist/
+node_modules/
diff --git a/refl1d/webview/client/biome.json b/refl1d/webview/client/biome.json
new file mode 100644
index 00000000..c0c4bfe0
--- /dev/null
+++ b/refl1d/webview/client/biome.json
@@ -0,0 +1,39 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["**", "!**/*.css", "!**/*.scss"]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 120,
+    "attributePosition": "auto",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "expand": "auto",
+    "useEditorconfig": true
+  },
+  "linter": {
+    "enabled": true,
+    "domains": {
+      "vue": "recommended"
+    },
+    "rules": {
+      "recommended": true
+    }
+  },
+  "html": { "formatter": { "selfCloseVoidElements": "always" } },
+  "assist": {
+    "enabled": true,
+    "actions": { "source": { "organizeImports": "on" } }
+  }
+}
diff --git a/refl1d/webview/client/eslint.config.js b/refl1d/webview/client/eslint.config.js
index 5e5d8e79..d06434d8 100644
--- a/refl1d/webview/client/eslint.config.js
+++ b/refl1d/webview/client/eslint.config.js
@@ -1,10 +1,8 @@
-import url from "url";
-import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
-import pluginVue from "eslint-plugin-vue";
+import url from "node:url";
 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 pluginVue from "eslint-plugin-vue";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const compat = new FlatCompat({
@@ -15,11 +13,9 @@ const compat = new FlatCompat({
 
 export default [
   /** Extend recommended configs */
-  ...compat.extends("plugin:vue/vue3-recommended", "plugin:vuejs-accessibility/recommended", "prettier"),
+  ...compat.extends("plugin:vue/recommended", "plugin:vuejs-accessibility/recommended"),
   ...pluginVue.configs["flat/recommended"],
   ...vueTsEslintConfig(),
-  eslintPluginPrettierRecommended,
-  prettierConfig,
   /** Configuration */
   {
     languageOptions: {
@@ -39,13 +35,6 @@ export default [
         "error",
         { allowShortCircuit: true, allowTernary: true }, // Temporary fix for indirect dependency @typescript-eslint <= 8.15.0
       ],
-      "prettier/prettier": [
-        "warn",
-        {},
-        {
-          usePrettierrc: true,
-        },
-      ],
       "vuejs-accessibility/label-has-for": [
         "error",
         {
diff --git a/refl1d/webview/client/package.json b/refl1d/webview/client/package.json
index 4c34c141..925fb499 100644
--- a/refl1d/webview/client/package.json
+++ b/refl1d/webview/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "refl1d-webview-client",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "type": "module",
   "repository": {
     "type": "git",
@@ -12,44 +12,37 @@
     "build": "vite build --emptyOutDir -m development",
     "build_prod": "vite build --emptyOutDir -m production",
     "preview": "vite preview --port 4173",
-    "format": "prettier --write src",
+    "format": "biome format --write",
     "lint": "eslint src --fix",
     "test:lint": "eslint src",
     "test:types": "vue-tsc --noEmit --skipLibCheck -p tsconfig.json --composite false"
   },
   "dependencies": {
     "@msgpack/msgpack": "^3.1.2",
-    "bootstrap": "^5.3.7",
+    "bootstrap": "^5.3.8",
     "date-fns": "^4.1.0",
     "json-difference": "^1.16.1",
-    "mpld3": "^0.5.10",
-    "plotly.js": "^3.0.1",
+    "mpld3": "^0.5.12",
+    "plotly.js": "^3.3.0",
     "socket.io-client": "^4.8.1",
-    "uuid": "^11.1.0",
-    "vue": "^3.5.17",
-    "vue-json-pretty": "^2.5.0"
+    "uuid": "^13.0.0",
+    "vue": "^3.5.25",
+    "vue-json-pretty": "^2.6.0"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@tsconfig/node-lts": "^22.0.2",
-    "@types/node": "^24.5.2",
-    "@types/plotly.js": "^2.35.1",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "10.1.0",
-    "@vue/eslint-config-typescript": "^14.2.0",
-    "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.32.0",
+    "@tsconfig/node-lts": "^24.0.0",
+    "@types/node": "^24.10.1",
+    "@types/plotly.js": "^3.0.8",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "@biomejs/biome": "^2.3.8",
+    "eslint": "^9.39.1",
+    "eslint-plugin-vue": "^10.6.2",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "prettier": "^3.4.2",
-    "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-jsdoc": "^1.3.2",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
     "vite-svg-loader": "5.1.0",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^3.1.5"
   }
 }
diff --git a/refl1d/webview/client/prettier.config.js b/refl1d/webview/client/prettier.config.js
deleted file mode 100644
index f7200637..00000000
--- a/refl1d/webview/client/prettier.config.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @type {import("prettier").Config}
- * @see https://prettier.io/docs/en/configuration.html
- */
-
-const config = {
-  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",
-      },
-    },
-  ],
-  experimentalTernaries: true,
-  printWidth: 120,
-  // tabWidth: 4,
-  // useTabs: false,
-  // semi: true,
-  // singleQuote: false,
-  // jsxSingleQuote: false,
-  // quoteProps: "as-needed",
-  trailingComma: "es5",
-  // bracketSpacing: true,
-  // bracketSameLine: false,
-  // arrowParens: "always",
-  // rangeStart: 0,
-  // rangeEnd: Infinity,
-  // parser: "babel",
-  // requirePragma: false,
-  // insertPragma: false,
-  // proseWrap: "preserve",
-  // htmlWhitespaceSensitivity: "css",
-  // vueIndentScriptAndStyle: false,
-  // endOfLine: "lf",
-  // embeddedLanguageFormatting: "auto",
-  // singleAttributePerLine: true,
-};
-
-export default config;
diff --git a/refl1d/webview/client/src/components/DataView.vue b/refl1d/webview/client/src/components/DataPanel.vue
similarity index 84%
rename from refl1d/webview/client/src/components/DataView.vue
rename to refl1d/webview/client/src/components/DataPanel.vue
index f9c637eb..838a9679 100644
--- a/refl1d/webview/client/src/components/DataView.vue
+++ b/refl1d/webview/client/src/components/DataPanel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-/// <reference types="@types/plotly.js" />
-import { ref, shallowRef } from "vue";
 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";
+/// <reference types="@types/plotly.js" />
+import { ref, shallowRef } from "vue";
 import { COLORS } from "../colors";
 
 // const title = "Reflectivity";
@@ -50,9 +50,9 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
   if (model_data.length === 0) {
     return { theory_traces: [], data_traces: [], xaxis_label: "Q (Å<sup>-1</sup>)", yaxis_label: "Reflectivity" };
   }
-  let theory_traces: Trace[] = [];
-  let data_traces: Trace[] = [];
-  let residuals_traces: Trace[] = [];
+  const theory_traces: Trace[] = [];
+  const data_traces: Trace[] = [];
+  const residuals_traces: Trace[] = [];
   let yaxis_label: string = "Reflectivity";
   const xaxis_label: string = "Q (Å<sup>-1</sup>)";
   const offset = plot_offset.value;
@@ -65,18 +65,16 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           const label = `${xs.label} ${xs.polarization}`;
           const color = COLORS[plot_index % COLORS.length];
           const legendgroup = `group_${plot_index}`;
-          const local_offset = lin_y ? plot_index * offset : Math.pow(10, plot_index * offset);
+          const local_offset = lin_y ? plot_index * offset : 10 ** (plot_index * offset);
           const background_offset = apply_corrections.value ? xs.background : 0.0;
           const intensity_scale = apply_corrections.value ? xs.intensity : 1.0;
-          const y =
-            lin_y ?
-              xs.theory.map((t) => (t - background_offset) / intensity_scale + local_offset)
+          const y = lin_y
+            ? xs.theory.map((t) => (t - background_offset) / intensity_scale + local_offset)
             : xs.theory.map((t) => ((t - background_offset) / intensity_scale) * local_offset);
           theory_traces.push({ x: xs.Q, y: y, mode: "lines", name: label + " theory", line: { width: 2, color } });
           if (xs.R !== undefined) {
-            const R =
-              lin_y ?
-                xs.R.map((t) => (t - background_offset) / intensity_scale + local_offset)
+            const R = lin_y
+              ? xs.R.map((t) => (t - background_offset) / intensity_scale + local_offset)
               : xs.R.map((t) => ((t - background_offset) / intensity_scale) * local_offset);
             const data_trace: Trace = {
               x: xs.Q,
@@ -91,11 +89,12 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               data_trace.error_x = { type: "data", array: xs.dQ, visible: true };
             }
             if (xs.dR !== undefined) {
-              const dR =
-                lin_y ? xs.dR.map((t) => t / intensity_scale) : xs.dR.map((t) => (t / intensity_scale) * local_offset);
+              const dR = lin_y
+                ? xs.dR.map((t) => t / intensity_scale)
+                : xs.dR.map((t) => (t / intensity_scale) * 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,
@@ -126,8 +125,8 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           const legendgroup = `group_${plot_index}`;
           const lin_y = !log_y.value;
           const background_offset = apply_corrections.value ? xs.background : 0.0;
-          const local_offset = lin_y ? plot_index * offset : Math.pow(10, plot_index * offset);
-          const theory = xs.theory.map((y, i) => (y - background_offset) / (xs.fresnel[i] - background_offset));
+          const local_offset = lin_y ? plot_index * offset : 10 ** (plot_index * offset);
+          const theory = xs.theory.map((y, i) => (y - background_offset) / (xs.fresnel![i]! - background_offset));
           const offset_theory = lin_y ? theory.map((t) => t + local_offset) : theory.map((t) => t * local_offset);
           theory_traces.push({
             x: xs.Q,
@@ -137,7 +136,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
             line: { width: 2, color },
           });
           if (xs.R !== undefined) {
-            const R = xs.R.map((y, i) => (y - background_offset) / (xs.fresnel[i] - background_offset));
+            const R = xs.R.map((y, i) => (y - background_offset) / (xs.fresnel![i]! - background_offset));
             const offset_R = lin_y ? R.map((t) => t + local_offset) : R.map((t) => t * local_offset);
             const data_trace: Trace = {
               x: xs.Q,
@@ -152,11 +151,11 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               data_trace.error_x = { type: "data", array: xs.dQ, visible: true };
             }
             if (xs.dR !== undefined) {
-              const dR = xs.dR.map((dy, i) => dy / (xs.fresnel[i] - background_offset));
+              const dR = xs.dR.map((dy, i) => dy / (xs.fresnel![i]! - background_offset));
               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,
@@ -187,12 +186,12 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           const label = `${xs.label} ${xs.polarization}`;
           const color = COLORS[plot_index % COLORS.length];
           const legendgroup = `group_${plot_index}`;
-          const local_offset = Math.pow(10, plot_index * offset);
+          const local_offset = 10 ** (plot_index * offset);
           const { intensity, background } = xs;
           const intensity_scale = apply_corrections.value ? intensity : 1.0;
           const background_offset = apply_corrections.value ? background : 0.0;
-          const Q4 = xs.Q.map((qq) => 1e-8 * Math.pow(qq, -4) * intensity_scale);
-          const theory = xs.theory.map((t, i) => (t - background_offset) / Q4[i]);
+          const Q4 = xs.Q.map((qq) => 1e-8 * qq ** -4 * intensity_scale);
+          const theory = xs.theory.map((t, i) => (t - background_offset) / Q4![i]!);
           const offset_theory = theory.map((t) => t * local_offset);
           theory_traces.push({
             x: xs.Q,
@@ -202,7 +201,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
             line: { width: 2, color },
           });
           if (xs.R !== undefined) {
-            const R = xs.R.map((r, i) => (r - background_offset) / Q4[i]);
+            const R = xs.R.map((r, i) => (r - background_offset) / Q4![i]!);
             const offset_R = R.map((t) => t * local_offset);
             const data_trace: Trace = {
               x: xs.Q,
@@ -217,11 +216,11 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               data_trace.error_x = { type: "data", array: xs.dQ, visible: true };
             }
             if (xs.dR !== undefined) {
-              const dR = xs.dR.map((dy, i) => dy / Q4[i]);
+              const dR = xs.dR.map((dy, i) => dy / Q4[i]!);
               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,
@@ -246,7 +245,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
     }
     case "Spin Asymmetry": {
       let plot_index = 0;
-      for (let model of model_data) {
+      for (const model of model_data) {
         const pp = model.find((xs) => xs.polarization === "++");
         const mm = model.find((xs) => xs.polarization === "--");
         const { intensity: pp_intensity, background: pp_background } = pp as ModelData;
@@ -264,9 +263,9 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           const legendgroup = `group_${plot_index}`;
 
           const Tm = interp(pp.Q, mm.Q, mm.theory);
-          const TSA = Tm.map((m, i) => {
-            const p_corr = (pp.theory[i] - pp_background_offset) / pp_intensity_scale;
-            const m_corr = (mm.theory[i] - mm_background_offset) / mm_intensity_scale;
+          const TSA = Tm.map((_m, i) => {
+            const p_corr = (pp.theory[i]! - pp_background_offset) / pp_intensity_scale;
+            const m_corr = (mm.theory[i]! - mm_background_offset) / mm_intensity_scale;
             return (p_corr - m_corr) / (p_corr + m_corr) + local_offset;
           });
 
@@ -277,7 +276,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
             const p_corr = pp.R.map((r) => (r - pp_background_offset) / pp_intensity_scale);
             const m_corr = Rm.map((r) => (r - mm_background_offset) / mm_intensity_scale);
             const SA = m_corr.map((m, i) => {
-              const p = p_corr[i];
+              const p = p_corr[i]!;
               return (p - m) / (p + m);
             });
             const SA_offset = SA.map((v) => v + local_offset);
@@ -297,15 +296,15 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
             if (pp.dR !== undefined && mm.dR !== undefined) {
               const dRm = interp(pp.Q, mm.Q, mm.dR);
               const dSA = dRm.map((dm, i) => {
-                const dp_corr = pp.dR![i] / pp_intensity_scale;
+                const dp_corr = pp.dR![i]! / pp_intensity_scale;
                 const dm_corr = dm / mm_intensity_scale;
-                const p = p_corr[i];
-                const m = m_corr[i];
+                const p = p_corr[i]!;
+                const m = m_corr[i]!;
                 return Math.sqrt((4 * ((p * dm_corr) ** 2 + (m * dp_corr) ** 2)) / (p + m) ** 4);
               });
               data_trace.error_y = { type: "data", array: dSA, visible: true };
               if (calculate_residuals) {
-                const residuals = SA.map((v, i) => (v - TSA[i]) / dSA[i]);
+                const residuals = SA.map((v, i) => (v - TSA![i]!) / dSA[i]!);
                 const residuals_trace: Trace = {
                   x: pp.Q,
                   y: residuals,
@@ -362,7 +361,7 @@ async function draw_plot() {
   const { theory_traces, data_traces, xaxis_label, yaxis_label } = generate_new_traces(
     plot_data.value,
     reflectivity_type.value,
-    show_residuals.value
+    show_residuals.value,
   );
   const layout: Partial<Plotly.Layout> = {
     uirevision: reflectivity_type.value,
@@ -448,13 +447,17 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
     throw new Error(`lengths of xp (${xp.length}) and fp (${fp.length}) must match`);
   }
 
+  if (xp.length < 2) {
+    throw new Error("length of xp, fp must be > 1");
+  }
+
   const xpv = xp.values();
   const fpv = fp.values();
 
-  const lowest_xp = xp[0];
-  const lowest_fp = fp[0];
+  const lowest_xp = xp[0]!;
+  const lowest_fp = fp[0]!;
   // const highest_xp = xp[xp.length - 1];
-  const highest_fp = fp[fp.length - 1];
+  const highest_fp = fp[fp.length - 1]!;
 
   let lower_xp = xpv.next();
   let lower_fp = fpv.next();
@@ -484,7 +487,7 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
         lower_fp.value!
       );
     }
-  });
+  }) as number[];
 }
 </script>
 
@@ -494,11 +497,23 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
       <div class="col">
         <div class="row">
           <div class="col-auto">
-            <label for="plot_offset" class="col-form-label">Plot mode:</label>
+            <label
+              for="plot_offset"
+              class="col-form-label"
+            >Plot mode:</label>
           </div>
           <div class="col">
-            <select id="plot_mode" v-model="reflectivity_type" class="w-100 my-2" @change="change_plot_type">
-              <option v-for="refl_type in REFLECTIVITY_PLOTS" :key="refl_type" :value="refl_type">
+            <select
+              id="plot_mode"
+              v-model="reflectivity_type"
+              class="w-100 my-2"
+              @change="change_plot_type"
+            >
+              <option
+                v-for="refl_type in REFLECTIVITY_PLOTS"
+                :key="refl_type"
+                :value="refl_type"
+              >
                 {{ refl_type }}
               </option>
             </select>
@@ -512,16 +527,37 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
           class="form-check-input"
           type="checkbox"
           @change="draw_plot"
-        />
-        <label class="form-check-label" for="show_residuals">Residuals</label>
+        >
+        <label
+          class="form-check-label"
+          for="show_residuals"
+        >Residuals</label>
       </div>
       <div class="col-auto form-check my-2">
-        <input id="log_y" v-model="log_y" type="checkbox" class="form-check-input" @change="draw_plot" />
-        <label for="log_y" class="form-check-label">Log y</label>
+        <input
+          id="log_y"
+          v-model="log_y"
+          type="checkbox"
+          class="form-check-input"
+          @change="draw_plot"
+        >
+        <label
+          for="log_y"
+          class="form-check-label"
+        >Log y</label>
       </div>
       <div class="col-auto form-check my-2">
-        <input id="log_x" v-model="log_x" type="checkbox" class="form-check-input" @change="draw_plot" />
-        <label for="log_x" class="form-check-label">Log x</label>
+        <input
+          id="log_x"
+          v-model="log_x"
+          type="checkbox"
+          class="form-check-input"
+          @change="draw_plot"
+        >
+        <label
+          for="log_x"
+          class="form-check-label"
+        >Log x</label>
       </div>
       <div class="col-auto form-check my-2">
         <input
@@ -530,8 +566,11 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
           type="checkbox"
           class="form-check-input"
           @change="draw_plot"
-        />
-        <label for="show_resolution" class="form-check-label">dQ</label>
+        >
+        <label
+          for="show_resolution"
+          class="form-check-label"
+        >dQ</label>
       </div>
       <div class="col-auto form-check my-2">
         <input
@@ -540,18 +579,20 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
           type="checkbox"
           class="form-check-input"
           @change="draw_plot"
-        />
+        >
         <label
           for="apply_corrections"
           class="form-check-label"
           title="Apply background and intensity corrections to data instead of theory"
-          >R<sub>corr</sub></label
-        >
+        >R<sub>corr</sub></label>
       </div>
     </div>
     <div class="row px-2 align-items-center">
       <div class="col-auto">
-        <label for="plot_offset_control" class="col-form-label">Plot offset</label>
+        <label
+          for="plot_offset_control"
+          class="col-form-label"
+        >Plot offset</label>
       </div>
       <div class="col">
         <input
@@ -563,9 +604,13 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
           step="0.01"
           class="form-range"
           @input="draw_plot"
-        />
+        >
       </div>
     </div>
-    <div id="plot_div" ref="plot_div" class="flex-grow-1"></div>
+    <div
+      id="plot_div"
+      ref="plot_div"
+      class="flex-grow-1"
+    />
   </div>
 </template>
diff --git a/refl1d/webview/client/src/components/ModelView.vue b/refl1d/webview/client/src/components/ModelPanel.vue
similarity index 77%
rename from refl1d/webview/client/src/components/ModelView.vue
rename to refl1d/webview/client/src/components/ModelPanel.vue
index 6c7bbcc2..03ec8890 100644
--- a/refl1d/webview/client/src/components/ModelView.vue
+++ b/refl1d/webview/client/src/components/ModelPanel.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-/// <reference types="@types/uuid"/>
-import { onMounted, ref } from "vue";
 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";
+import { onMounted, ref } from "vue";
 
 const title = "Profile";
 const plot_div = ref<HTMLDivElement>();
@@ -72,29 +71,55 @@ function requestRedraw() {
 <template>
   <div class="container d-flex flex-grow-1 flex-column">
     <div class="form-check">
-      <label class="form-check-label pe-2" for="multiple">Show Multiple</label>
-      <input id="multiple" v-model="show_multiple" class="form-check-input" type="checkbox" @change="toggle_multiple" />
+      <label
+        class="form-check-label pe-2"
+        for="multiple"
+      >Show Multiple</label>
+      <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="requestRedraw">
+    <label
+      for="model"
+      class="form-label"
+    > Models:</label>
+    <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}`"
         :value="[model_index, part_index]"
       >
-        {{ model_index }}:{{ part_index }} --- {{ name ?? "" }}:{{ part_name ?? "" }}
+        {{ model_index }}:{{ part_index }} — {{ name ?? "" }}:{{ part_name ?? "" }}
       </option>
     </select>
-    <select v-else id="model" v-model="current_models[0]" @change="requestRedraw">
+    <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}`"
         :value="[model_index, part_index]"
       >
-        {{ model_index }}:{{ part_index }} --- {{ name ?? "" }}:{{ part_name ?? "" }}
+        {{ model_index }}:{{ part_index }} — {{ name ?? "" }}:{{ part_name ?? "" }}
       </option>
     </select>
-    <div ref="plot_div" class="flex-grow-1"></div>
+    <div
+      ref="plot_div"
+      class="flex-grow-1"
+    />
   </div>
 </template>
 
diff --git a/refl1d/webview/client/src/components/ModelViewPlotly.vue b/refl1d/webview/client/src/components/ModelPanelPlotly.vue
similarity index 81%
rename from refl1d/webview/client/src/components/ModelViewPlotly.vue
rename to refl1d/webview/client/src/components/ModelPanelPlotly.vue
index 3e9b087c..dec8847d 100644
--- a/refl1d/webview/client/src/components/ModelViewPlotly.vue
+++ b/refl1d/webview/client/src/components/ModelPanelPlotly.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-/// <reference types="@types/uuid"/>
-import { onMounted, ref } from "vue";
 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";
+import { onMounted, ref } from "vue";
 
 // const title = "Profile";
 const plot_div = ref<HTMLDivElement>();
@@ -18,21 +17,38 @@ const props = defineProps<{
 
 const { draw_requested } = setupDrawLoop("updated_parameters", props.socket, fetch_and_draw);
 
-props.socket.on("model_loaded", async () => {
+async function get_model_names() {
   const new_model_names = (await props.socket.asyncEmit("get_model_names")) as string[];
+  if (new_model_names == null) {
+    return;
+  }
   model_names.value = new_model_names;
-});
+}
 
-onMounted(() => {
-  props.socket.asyncEmit("get_topic_messages", "model_loaded", (messages) => {
-    const new_model_names = messages?.[0]?.message?.model_names;
-    if (new_model_names != null) {
-      model_names.value = new_model_names;
-    }
-  });
+props.socket.on("model_loaded", get_model_names);
+
+onMounted(async () => {
+  await get_model_names();
 });
 
-function generate_new_traces(profile_data) {
+interface ProfileData {
+  step_profile: {
+    z: number[];
+    rho: number[];
+    irho: number[];
+    rhoM?: number[];
+    thetaM?: number[];
+  };
+  smooth_profile: {
+    z: number[];
+    rho: number[];
+    irho: number[];
+    rhoM?: number[];
+    thetaM?: number[];
+  };
+}
+
+function generate_new_traces(profile_data: ProfileData) {
   const traces: (Plotly.Data & { x: number[]; y: number[] })[] = [];
   const { step_profile, smooth_profile } = profile_data;
   console.log(profile_data);
@@ -164,10 +180,25 @@ async function fetch_and_draw() {
 <template>
   <div class="container d-flex flex-grow-1 flex-column">
     <label for="model">Model:</label>
-    <select id="model" v-model="current_model" class="form-select" @change="draw_requested = true">
-      <option v-for="(name, index) in model_names" :key="index" :value="index">{{ index }}: {{ name ?? "" }}</option>
+    <select
+      id="model"
+      v-model="current_model"
+      class="form-select"
+      @change="draw_requested = true"
+    >
+      <option
+        v-for="(name, index) in model_names"
+        :key="index"
+        :value="index"
+      >
+        {{ index }}: {{ name ?? "" }}
+      </option>
     </select>
-    <div :id="plot_div_id" ref="plot_div" class="flex-grow-1"></div>
+    <div
+      :id="plot_div_id"
+      ref="plot_div"
+      class="flex-grow-1"
+    />
   </div>
 </template>
 
diff --git a/refl1d/webview/client/src/components/ProfileUncertaintyView.vue b/refl1d/webview/client/src/components/ProfileUncertaintyPanel.vue
similarity index 73%
rename from refl1d/webview/client/src/components/ProfileUncertaintyView.vue
rename to refl1d/webview/client/src/components/ProfileUncertaintyPanel.vue
index 647bfee8..520d299d 100644
--- a/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
+++ b/refl1d/webview/client/src/components/ProfileUncertaintyPanel.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-/// <reference types="@types/uuid"/>
-import { ref, shallowRef } from "vue";
 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";
+import { ref, shallowRef } from "vue";
 
 const title = "Profile Uncertainty";
 const plotDiv = ref<HTMLDivElement>();
@@ -66,11 +65,11 @@ function get_csv_data() {
       });
     });
   }
-  const n = values[0].length;
-  const lines = new Array(n + 1);
+  const n = values[0]?.length ?? 0;
+  const lines = Array.from({ length: n + 1 });
   lines[0] = headers.join(",");
   for (let i = 0; i < n; i++) {
-    lines[i + 1] = values.map((v) => v[i].toPrecision(6)).join(",");
+    lines[i + 1] = values.map((v) => v[i]?.toPrecision(6)).join(",");
     //keys.map(k => data[k][i].toPrecision(6)).join(',');
   }
   return "data:text/csv;charset=utf-8," + encodeURIComponent(lines.join("\n"));
@@ -100,7 +99,7 @@ async function fetch_and_draw(new_timestamp?: string) {
     npoints.value,
     random.value,
     show_residuals.value,
-    latest_timestamp.value
+    latest_timestamp.value,
   )) as Payload;
   const plotData = { ...payload.fig };
   contour_data.value = payload.contour_data;
@@ -135,32 +134,50 @@ async function disableAutoAlign() {
     <div class="row g-3">
       <div class="col-md-3 align-middle text-end">
         <div>
-          <label class="form-check-label pe-2" for="auto-align">Auto-align</label>
+          <label
+            class="form-check-label pe-2"
+            for="auto-align"
+          >Auto-align</label>
           <input
             id="auto-align"
             v-model="autoAlign"
             class="form-check-input"
             type="checkbox"
             @change="fetch_and_draw()"
-          />
+          >
         </div>
         <div>
-          <label class="form-check-label pe-2" for="show_residuals">Show residuals</label>
+          <label
+            class="form-check-label pe-2"
+            for="show_residuals"
+          >Show residuals</label>
           <input
             id="show_residuals"
             v-model="show_residuals"
             class="form-check-input"
             type="checkbox"
             @change="fetch_and_draw()"
-          />
+          >
         </div>
         <div>
-          <label class="form-check-label pe-2" for="randomize">Random draw</label>
-          <input id="randomize" v-model="random" class="form-check-input" type="checkbox" @change="fetch_and_draw()" />
+          <label
+            class="form-check-label pe-2"
+            for="randomize"
+          >Random draw</label>
+          <input
+            id="randomize"
+            v-model="random"
+            class="form-check-input"
+            type="checkbox"
+            @change="fetch_and_draw()"
+          >
         </div>
       </div>
       <div class="col-md-3 align-middle position-relative">
-        <label class="form-label" for="align-interface">Alignment interface</label>
+        <label
+          class="form-label"
+          for="align-interface"
+        >Alignment interface</label>
         <input
           id="align-interface"
           v-model="align"
@@ -168,33 +185,68 @@ async function disableAutoAlign() {
           type="number"
           :disabled="autoAlign"
           @change="fetch_and_draw()"
-        />
+        >
         <!-- eslint-disable
            vuejs-accessibility/no-static-element-interactions, 
            vuejs-accessibility/click-events-have-key-events
         -->
-        <span v-if="autoAlign" class="position-absolute top-0 start-0 w-100 h-100" @click="disableAutoAlign"></span>
+        <span
+          v-if="autoAlign"
+          class="position-absolute top-0 start-0 w-100 h-100"
+          @click="disableAutoAlign"
+        />
         <!-- eslint-enable
            vuejs-accessibility/no-static-element-interactions, 
            vuejs-accessibility/click-events-have-key-events
         -->
       </div>
       <div class="col-md-3 align-middle">
-        <label class="form-label" for="n-shown">Sample size</label>
-        <input id="n-shown" v-model="nshown" class="form-control" type="number" @change="fetch_and_draw()" />
+        <label
+          class="form-label"
+          for="n-shown"
+        >Sample size</label>
+        <input
+          id="n-shown"
+          v-model="nshown"
+          class="form-control"
+          type="number"
+          @change="fetch_and_draw()"
+        >
       </div>
       <div class="col-md-3 align-middle">
-        <label class="form-label" for="n-points">z steps</label>
-        <input id="n-points" v-model="npoints" class="form-control" type="number" @change="fetch_and_draw()" />
+        <label
+          class="form-label"
+          for="n-points"
+        >z steps</label>
+        <input
+          id="n-points"
+          v-model="npoints"
+          class="form-control"
+          type="number"
+          @change="fetch_and_draw()"
+        >
       </div>
     </div>
     <div>
-      <button class="btn btn-primary btn-sm" @click="download_csv">Download CSV</button>
-      <a ref="hiddenDownload" class="hidden" download="contours.csv" type="text/csv">Download CSV</a>
+      <button
+        class="btn btn-primary btn-sm"
+        @click="download_csv"
+      >
+        Download CSV
+      </button>
+      <a
+        ref="hiddenDownload"
+        class="hidden"
+        download="contours.csv"
+        type="text/csv"
+      >Download CSV</a>
     </div>
     <!-- </details> -->
     <div class="flex-grow-1 position-relative">
-      <div ref="plotDiv" class="w-100 h-100 plot-div"></div>
+      <div
+        ref="plotDiv"
+        class="w-100 h-100 plot-div"
+      />
       <div
         v-if="drawing_busy"
         :class="{
@@ -210,7 +262,7 @@ async function disableAutoAlign() {
           loading: true,
         }"
       >
-        <span class="spinner-border text-primary"></span>
+        <span class="spinner-border text-primary" />
       </div>
     </div>
   </div>
diff --git a/refl1d/webview/client/src/components/SimpleBuilder.vue b/refl1d/webview/client/src/components/SimpleBuilder.vue
index a148d698..029178b5 100644
--- a/refl1d/webview/client/src/components/SimpleBuilder.vue
+++ b/refl1d/webview/client/src/components/SimpleBuilder.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, shallowRef } from "vue";
-import type { ComputedRef } from "vue";
 import { fileBrowser } from "bumps-webview-client/src/app_state";
 import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { v4 as uuidv4 } from "uuid";
-import { dqIsFWHM } from "../app_state";
+import type { ComputedRef } from "vue";
+import { computed, onMounted, ref, shallowRef } from "vue";
+import { dqIsFWHM } from "@/app_state";
+
 import type {
   BoundsValue,
   Magnetism,
@@ -12,13 +13,13 @@ import type {
   ParameterLike,
   QProbe,
   SerializedModel,
-  Slab,
   SLD,
+  Slab,
   Stack,
 } from "../model";
 
 // const title = "Builder";
-// @ts-ignore: intentionally infinite type recursion
+// @ts-expect-error: intentionally infinite type recursion
 const modelJson = shallowRef<json>({});
 const showInstructions = ref(false);
 const showEditQRange = ref(false);
@@ -205,14 +206,8 @@ function setParameterBounds(stack: Stack) {
     const value = p.slot.value;
     p.bounds = value === 0.0 ? [-0.1, 0.1] : [value * 0.5, value * 1.5];
     p.bounds.sort((a, b) => {
-      let c =
-        a === "-inf" ? Number.NEGATIVE_INFINITY
-        : a === "inf" ? Number.POSITIVE_INFINITY
-        : a;
-      let d =
-        b === "-inf" ? Number.NEGATIVE_INFINITY
-        : b === "inf" ? Number.POSITIVE_INFINITY
-        : b;
+      const c = a === "-inf" ? Number.NEGATIVE_INFINITY : a === "inf" ? Number.POSITIVE_INFINITY : a;
+      const d = b === "-inf" ? Number.NEGATIVE_INFINITY : b === "inf" ? Number.POSITIVE_INFINITY : b;
       return c - d;
     });
   };
@@ -302,7 +297,7 @@ function dragOver(index: number, event: DragEvent) {
 
 function drop(index: number) {
   if (dragData.value !== null) {
-    const draggedDict = sortedLayers.value[dragData.value];
+    const draggedDict = sortedLayers.value[dragData.value] as Slab;
     sortedLayers.value.splice(dragData.value, 1);
     sortedLayers.value.splice(index, 0, draggedDict);
     dragData.value = null;
@@ -331,7 +326,11 @@ function dragEnd() {
             Instructions
           </button>
 
-          <div id="builderInstructions" class="card-text collapse" :class="{ show: showInstructions }">
+          <div
+            id="builderInstructions"
+            class="card-text collapse"
+            :class="{ show: showInstructions }"
+          >
             <ul>
               <li>Click the "Add layer" button to add a new layer.</li>
               <li>Drag and drop the rows to change the order of the layers.</li>
@@ -344,7 +343,12 @@ function dragEnd() {
     <div class="container mt-4">
       <div class="row justify-content-end">
         <div class="col">
-          <button class="btn btn-primary m-2" @click="showEditQRange = !showEditQRange">Edit Q-range</button>
+          <button
+            class="btn btn-primary m-2"
+            @click="showEditQRange = !showEditQRange"
+          >
+            Edit Q-range
+          </button>
         </div>
         <div class="col-auto align-self-center">
           <div class="form-check form-switch m-2">
@@ -355,7 +359,11 @@ function dragEnd() {
               type="checkbox"
               @click="sendModel()"
             />
-            <label class="form-check-label" for="showImaginary_input">Show imaginary SLD</label>
+            <label
+              class="form-check-label"
+              for="showImaginary_input"
+              >Show imaginary SLD</label
+            >
           </div>
           <div class="form-check form-switch m-2">
             <input
@@ -365,42 +373,81 @@ function dragEnd() {
               type="checkbox"
               @click="sendModel()"
             />
-            <label class="form-check-label" for="dqIsFWHM_input">Resolution as FWHM</label>
+            <label
+              class="form-check-label"
+              for="dqIsFWHM_input"
+              >Resolution as FWHM</label
+            >
           </div>
         </div>
       </div>
-      <div v-if="showEditQRange" class="row mb-2">
+      <div
+        v-if="showEditQRange"
+        class="row mb-2"
+      >
         <div class="col">
           <label for="qmin">Q min (Å<sup>-1</sup>)</label>
-          <input id="qmin" v-model="editQmin" class="form-control" type="number" step="0.01" />
+          <input
+            id="qmin"
+            v-model="editQmin"
+            class="form-control"
+            type="number"
+            step="0.01"
+          />
         </div>
         <div class="col">
           <label for="qmax">Q max (Å<sup>-1</sup>)</label>
-          <input id="qmax" v-model="editQmax" class="form-control" type="number" step="0.01" />
+          <input
+            id="qmax"
+            v-model="editQmax"
+            class="form-control"
+            type="number"
+            step="0.01"
+          />
         </div>
         <div class="col">
           <label for="qsteps">Q steps</label>
-          <input id="qsteps" v-model="editQsteps" class="form-control" type="number" step="1" />
+          <input
+            id="qsteps"
+            v-model="editQsteps"
+            class="form-control"
+            type="number"
+            step="1"
+          />
         </div>
         <div class="col-auto align-self-end">
-          <button class="btn btn-secondary mx-2" @click="setQProbe">Apply new Q</button>
+          <button
+            class="btn btn-secondary mx-2"
+            @click="setQProbe"
+          >
+            Apply new Q
+          </button>
         </div>
       </div>
-      <table v-if="dictionaryLoaded" id="sortable" class="table table-sm">
+      <table
+        v-if="dictionaryLoaded"
+        id="sortable"
+        class="table table-sm"
+      >
         <thead class="border-bottom py-1 sticky-top text-white bg-secondary">
           <tr>
-            <th></th>
+            <th />
             <th>Layer</th>
             <th>Thickness</th>
             <th>Rho</th>
             <th v-if="showImaginary">iRho</th>
             <th>Interface</th>
-            <th></th>
-            <th></th>
+            <th />
+            <th />
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(layer, key) in sortedLayers" :key="key" class="align-middle" @blur.capture="sendModel()">
+          <tr
+            v-for="(layer, key) in sortedLayers"
+            :key="key"
+            class="align-middle"
+            @blur.capture="sendModel()"
+          >
             <td
               draggable="true"
               class="draggable"
@@ -409,7 +456,11 @@ function dragEnd() {
               @drop="drop(key)"
               @dragend="dragEnd"
             >
-              <span width="10px" class="badge bg-secondary">:</span>
+              <span
+                width="10px"
+                class="badge bg-secondary"
+                >:</span
+              >
             </td>
             <td>
               <textarea
@@ -425,7 +476,11 @@ function dragEnd() {
               </textarea>
             </td>
             <td>
-              <label for="layer-thickness" class="visually-hidden">>Layer Thickness</label>
+              <label
+                for="layer-thickness"
+                class="visually-hidden"
+                >>Layer Thickness</label
+              >
               <input
                 v-if="getSlot(layer.thickness) !== null"
                 id="layer-thickness"
@@ -436,7 +491,11 @@ function dragEnd() {
               />
             </td>
             <td>
-              <label for="layer-rho" class="visually-hidden">>Layer Rho</label>
+              <label
+                for="layer-rho"
+                class="visually-hidden"
+                >>Layer Rho</label
+              >
               <input
                 v-if="getSlot(layer.material.rho) !== null"
                 id="layer-rho"
@@ -447,7 +506,11 @@ function dragEnd() {
               />
             </td>
             <td v-if="showImaginary">
-              <label for="layer-irho" class="visually-hidden">>Layer iRho</label>
+              <label
+                for="layer-irho"
+                class="visually-hidden"
+                >>Layer iRho</label
+              >
               <input
                 v-if="getSlot(layer.material.irho) !== null"
                 id="layer-irho"
@@ -458,7 +521,11 @@ function dragEnd() {
               />
             </td>
             <td>
-              <label for="layer-interface" class="visually-hidden">>Layer Interface</label>
+              <label
+                for="layer-interface"
+                class="visually-hidden"
+                >>Layer Interface</label
+              >
               <input
                 v-if="getSlot(layer.interface) !== null"
                 id="layer-interface"
@@ -468,9 +535,20 @@ function dragEnd() {
                 step="1"
               />
             </td>
-            <td><button class="btn btn-danger btn-sm" @click="deleteLayer(key)">Delete</button></td>
             <td>
-              <button class="btn btn-success btn-sm add-layer-after" title="add layer here" @click="addLayer(key + 1)">
+              <button
+                class="btn btn-danger btn-sm"
+                @click="deleteLayer(key)"
+              >
+                Delete
+              </button>
+            </td>
+            <td>
+              <button
+                class="btn btn-success btn-sm add-layer-after"
+                title="add layer here"
+                @click="addLayer(key + 1)"
+              >
                 +
               </button>
             </td>
@@ -482,17 +560,53 @@ function dragEnd() {
 
     <div class="row">
       <div class="col">
-        <button class="btn btn-primary m-2" @click="newModel">New Model</button>
-        <button v-if="dictionaryLoaded" class="btn btn-secondary m-2" @click="exportModelScript">Export script</button>
+        <button
+          class="btn btn-primary m-2"
+          @click="newModel"
+        >
+          New Model
+        </button>
+        <button
+          v-if="dictionaryLoaded"
+          class="btn btn-secondary m-2"
+          @click="exportModelScript"
+        >
+          Export script
+        </button>
       </div>
-      <div v-if="dictionaryLoaded" class="col-auto">
-        <button class="btn btn-secondary m-2" @click="sendModel()">Apply changes</button>
+      <div
+        v-if="dictionaryLoaded"
+        class="col-auto"
+      >
+        <button
+          class="btn btn-secondary m-2"
+          @click="sendModel()"
+        >
+          Apply changes
+        </button>
       </div>
-      <div v-if="dictionaryLoaded" class="col-auto">
+      <div
+        v-if="dictionaryLoaded"
+        class="col-auto"
+      >
         <div class="input-group m-2">
-          <button class="btn btn-success btn-sm" @click="addLayer(insertIndex)">Add layer at index:</button>
-          <label for="insert-index" class="visually-hidden">Insert index</label>
-          <input id="insert-index" v-model="insertIndex" class="form-control me-4 insert-index" type="number" />
+          <button
+            class="btn btn-success btn-sm"
+            @click="addLayer(insertIndex)"
+          >
+            Add layer at index:
+          </button>
+          <label
+            for="insert-index"
+            class="visually-hidden"
+            >Insert index</label
+          >
+          <input
+            id="insert-index"
+            v-model="insertIndex"
+            class="form-control me-4 insert-index"
+            type="number"
+          />
         </div>
       </div>
     </div>
diff --git a/refl1d/webview/client/src/main.js b/refl1d/webview/client/src/main.js
index d1baa0f6..b190cccb 100644
--- a/refl1d/webview/client/src/main.js
+++ b/refl1d/webview/client/src/main.js
@@ -1,8 +1,8 @@
 import "bootstrap/dist/css/bootstrap.min.css";
-import { computed, createApp } from "vue";
-import { file_menu_items, fileBrowser, shared_state } from "bumps-webview-client/src/app_state";
 import App from "bumps-webview-client/src/App.vue";
+import { file_menu_items, fileBrowser, shared_state } from "bumps-webview-client/src/app_state";
 import { io } from "socket.io-client";
+import { computed, createApp } from "vue";
 import { dqIsFWHM } from "./app_state";
 import { panels } from "./panels";
 import "./style.css";
diff --git a/refl1d/webview/client/src/model.ts b/refl1d/webview/client/src/model.ts
index 61b2a9a7..62119abe 100644
--- a/refl1d/webview/client/src/model.ts
+++ b/refl1d/webview/client/src/model.ts
@@ -11,11 +11,11 @@ export interface Reference {
 export type BoundsValue = number | "-inf" | "inf";
 
 /* Bumps models */
-// Are these necessary? Imported from bumps?
+// TODO: Are these necessary? Imported from bumps?
 
 export interface SerializedModel {
   references: { [key: string]: Parameter };
-  object: any;
+  object: object;
   $schema: "bumps-draft-02";
 }
 
@@ -112,12 +112,12 @@ export interface MixedExperiment {
 /* Probe models */
 
 export interface Probe {
-  /* W... what? should go here? */
+  /* TODO: what should go here? */
   name?: string;
 }
 
 export interface PolarizedNeutronProbe {
-  /* W... what? should go here? */
+  /* TODO: what should go here? */
   name: string;
 }
 
diff --git a/refl1d/webview/client/src/panels.ts b/refl1d/webview/client/src/panels.ts
index 3ddc2984..5dfabf37 100644
--- a/refl1d/webview/client/src/panels.ts
+++ b/refl1d/webview/client/src/panels.ts
@@ -1,16 +1,16 @@
 import { shared_state } from "bumps-webview-client/src/app_state";
 import { panels as bumps_panels, type Panel } from "bumps-webview-client/src/panels";
-import DataView from "./components/DataView.vue";
-import ModelView from "./components/ModelView.vue";
-import ProfileUncertaintyView from "./components/ProfileUncertaintyView.vue";
-import SimpleBuilder from "./components/SimpleBuilder.vue";
+import DataPanel from "@/components/DataPanel.vue";
+import ModelPanel from "@/components/ModelPanel.vue";
+import ProfileUncertaintyPanel from "@/components/ProfileUncertaintyPanel.vue";
+import SimpleBuilder from "@/components/SimpleBuilder.vue";
 
 const refl1dPanels: Panel[] = [
-  { title: "Reflectivity", component: DataView },
-  { title: "Profile", component: ModelView },
+  { title: "Reflectivity", component: DataPanel },
+  { title: "Profile", component: ModelPanel },
   {
     title: "Profile Uncertainty",
-    component: ProfileUncertaintyView,
+    component: ProfileUncertaintyPanel,
     show: () => shared_state.uncertainty_available?.available ?? false,
   },
   { title: "Builder", component: SimpleBuilder },
@@ -30,11 +30,11 @@ function replace_panel(
   panels: Panel[],
   replacement_panels: Panel[],
   replaced_title: string,
-  replacement_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) {
+  if (replacement_panels[replacement_index] !== undefined) {
     panels.splice(index, 1, replacement_panels[replacement_index]);
   }
 }
@@ -46,8 +46,9 @@ function insert_panel(panels: Panel[], insertion_panels: Panel[], title: string,
     index = panels.length - 1;
   }
   const insertion_index = insertion_panels.findIndex((p) => p.title === title);
-  if (insertion_index >= 0) {
-    panels.splice(index + 1, 0, insertion_panels[insertion_index]);
+  const panel_to_insert = insertion_panels[insertion_index];
+  if (panel_to_insert !== undefined) {
+    panels.splice(index + 1, 0, panel_to_insert);
   }
 }
 
diff --git a/refl1d/webview/client/src/types.d.ts b/refl1d/webview/client/src/types.d.ts
index d6f7d73b..4a66678a 100644
--- a/refl1d/webview/client/src/types.d.ts
+++ b/refl1d/webview/client/src/types.d.ts
@@ -1 +1,7 @@
 /// <reference types="bumps-webview-client/src/types/mpld3" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}
diff --git a/refl1d/webview/client/tsconfig.json b/refl1d/webview/client/tsconfig.json
index 72286f39..32afa481 100644
--- a/refl1d/webview/client/tsconfig.json
+++ b/refl1d/webview/client/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "extends": ["@tsconfig/node-lts/tsconfig.json", "@vue/tsconfig/tsconfig.json"],
   "include": ["src/**/*"],
-  "exclude": [
-    "node_modules/",
-    "bumps/**/*",
-    "src/components/ModelViewPlotly.vue",
-  ],
+  "exclude": ["node_modules/", "bumps/**/*", "src/components/ModelPanelPlotly.vue"],
   "compilerOptions": {
     "noErrorTruncation": true,
     // "composite": true,
@@ -18,7 +14,6 @@
     "esModuleInterop": true,
     "moduleResolution": "Bundler",
     "target": "ES6",
-    "types": ["node"],
-    // "allowJs": true
+    "types": ["node"]
   }
 }
diff --git a/refl1d/webview/client/vite.config.js b/refl1d/webview/client/vite.config.js
index d98ba197..f473af41 100644
--- a/refl1d/webview/client/vite.config.js
+++ b/refl1d/webview/client/vite.config.js
@@ -1,6 +1,7 @@
+import { fileURLToPath, URL } from "node:url";
+import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
 import svgLoader from "vite-svg-loader";
-import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,4 +15,9 @@ export default defineConfig({
   optimizeDeps: {
     include: ["plotly.js/lib/core", "plotly.js/lib/heatmap", "plotly.js/lib/bar", "json-difference"],
   },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
 });