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..b251b17d
--- /dev/null
+++ b/refl1d/webview/client/biome.json
@@ -0,0 +1,38 @@
+{
+  "$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
+    }
+  },
+  "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..1f853bd1 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",
         {
@@ -54,6 +43,23 @@ export default [
           },
         },
       ],
+      "vue/max-attributes-per-line": [
+        "error",
+        {
+          singleline: {
+            max: 5,
+          },
+        },
+      ],
+      "vue/html-self-closing": [
+        "error",
+        {
+          html: {
+            void: "any",
+            normal: "any",
+          },
+        },
+      ],
     },
   },
 ];
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/src/components/DataView.vue b/refl1d/webview/client/src/components/DataView.vue
index f9c637eb..395ca12e 100644
--- a/refl1d/webview/client/src/components/DataView.vue
+++ b/refl1d/webview/client/src/components/DataView.vue
@@ -68,15 +68,13 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           const local_offset = lin_y ? plot_index * offset : Math.pow(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,
@@ -127,7 +126,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           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 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,
@@ -192,7 +191,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           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 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,
@@ -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>
 
@@ -545,8 +548,7 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
           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">
diff --git a/refl1d/webview/client/src/components/ModelView.vue b/refl1d/webview/client/src/components/ModelView.vue
index 6c7bbcc2..72698db7 100644
--- a/refl1d/webview/client/src/components/ModelView.vue
+++ b/refl1d/webview/client/src/components/ModelView.vue
@@ -1,5 +1,4 @@
 <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";
diff --git a/refl1d/webview/client/src/components/ModelViewPlotly.vue b/refl1d/webview/client/src/components/ModelViewPlotly.vue
index 3e9b087c..715f8e7e 100644
--- a/refl1d/webview/client/src/components/ModelViewPlotly.vue
+++ b/refl1d/webview/client/src/components/ModelViewPlotly.vue
@@ -1,5 +1,4 @@
 <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";
@@ -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);
@@ -165,7 +181,9 @@ async function fetch_and_draw() {
   <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>
+      <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>
diff --git a/refl1d/webview/client/src/components/ProfileUncertaintyView.vue b/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
index 647bfee8..de703540 100644
--- a/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
+++ b/refl1d/webview/client/src/components/ProfileUncertaintyView.vue
@@ -1,5 +1,4 @@
 <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";
@@ -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;
@@ -189,7 +188,9 @@ async function disableAutoAlign() {
       </div>
     </div>
     <div>
-      <button class="btn btn-primary btn-sm" @click="download_csv">Download CSV</button>
+      <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> -->
diff --git a/refl1d/webview/client/src/components/SimpleBuilder.vue b/refl1d/webview/client/src/components/SimpleBuilder.vue
index a148d698..2d11f3b2 100644
--- a/refl1d/webview/client/src/components/SimpleBuilder.vue
+++ b/refl1d/webview/client/src/components/SimpleBuilder.vue
@@ -48,7 +48,7 @@ function createParameter(
   value: number,
   limits: [BoundsValue, BoundsValue] = ["-inf", "inf"],
   fixed: boolean = true,
-  tags: string[] = []
+  tags: string[] = [],
 ) {
   const par: Parameter = {
     id: uuidv4(),
@@ -69,7 +69,7 @@ function createLayer(
   irho: number,
   thickness: number,
   interface_: number,
-  magnetism: Magnetism | null = null
+  magnetism: Magnetism | null = null,
 ) {
   const rhoParam = createParameter("rho", rho, ["-inf", "inf"], true, ["sample"]);
   const irhoParam = createParameter("irho", irho, ["-inf", "inf"], true, ["sample"]);
@@ -205,14 +205,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;
+      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;
       return c - d;
     });
   };
@@ -258,7 +252,7 @@ function setQProbe() {
     editQmin.value,
     editQmax.value,
     editQsteps.value,
-    0.0001
+    0.0001,
   );
   sendModel();
 }
@@ -302,7 +296,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;
@@ -320,7 +314,9 @@ function dragEnd() {
     <div class="container m-2">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title d-inline-block px-2 my-0 align-middle">Simple Slab Model Builder</h5>
+          <h5 class="card-title d-inline-block px-2 my-0 align-middle">
+            Simple Slab Model Builder
+          </h5>
           <button
             class="btn btn-primary"
             type="button"
@@ -344,7 +340,9 @@ 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">
@@ -383,7 +381,9 @@ function dragEnd() {
           <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">
@@ -393,7 +393,9 @@ function dragEnd() {
             <th>Layer</th>
             <th>Thickness</th>
             <th>Rho</th>
-            <th v-if="showImaginary">iRho</th>
+            <th v-if="showImaginary">
+              iRho
+            </th>
             <th>Interface</th>
             <th></th>
             <th></th>
@@ -468,7 +470,11 @@ function dragEnd() {
                 step="1"
               />
             </td>
-            <td><button class="btn btn-danger btn-sm" @click="deleteLayer(key)">Delete</button></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)">
                 +
@@ -477,20 +483,30 @@ function dragEnd() {
           </tr>
         </tbody>
       </table>
-      <p v-else>Load data to start building a model</p>
+      <p v-else>
+        Load data to start building a model
+      </p>
     </div>
 
     <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>
+        <button class="btn btn-secondary m-2" @click="sendModel()">
+          Apply changes
+        </button>
       </div>
       <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>
+          <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>
@@ -500,7 +516,9 @@ function dragEnd() {
     <div class="container m-2">
       <div class="card bg-warning">
         <div class="card-body">
-          <h5 class="card-title">Limitations and future features</h5>
+          <h5 class="card-title">
+            Limitations and future features
+          </h5>
           <div class="card-text">
             <ul>
               <li>This builder can currently only do non-magnetic models.</li>
diff --git a/refl1d/webview/client/src/panels.ts b/refl1d/webview/client/src/panels.ts
index 3ddc2984..79527ac1 100644
--- a/refl1d/webview/client/src/panels.ts
+++ b/refl1d/webview/client/src/panels.ts
@@ -30,12 +30,13 @@ 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) {
-    panels.splice(index, 1, replacement_panels[replacement_index]);
+  const replacement_panel = replacement_panels[replacement_index];
+  if (index >= 0 && replacement_index >= 0 && replacement_panel) {
+    panels.splice(index, 1, replacement_panel);
   }
 }
 
@@ -46,8 +47,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 insertion_panel = insertion_panels[insertion_index];
+  if (insertion_index >= 0 && insertion_panel) {
+    panels.splice(index + 1, 0, insertion_panel);
   }
 }
 
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)),
+    },
+  },
 });