diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 1f475a2060..d7aa188171 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -91,19 +91,34 @@ jobs:
         run: |
           ./gradlew build
           ./gradlew clean
-
+  typecheck-client:
+    name: "Typecheck Client"
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+          cache-dependency-path: photon-client/pnpm-lock.yaml
+      - name: Typecheck Client
+        working-directory: photon-client
+        run: |
+          pnpm install
+          pnpm type-check
   playwright-tests:
     name: "Playwright E2E tests"
     runs-on: ubuntu-24.04
     needs: [validation]
     steps:
-      # Checkout code.
       - name: Checkout code
         uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-      - name: Fetch tags
-        run: git fetch --tags --force
       - name: Install Java 17
         uses: actions/setup-java@v5
         with:
@@ -138,7 +153,6 @@ jobs:
     runs-on: ubuntu-24.04
     needs: [validation]
     steps:
-      # Checkout code.
       - name: Checkout code
         uses: actions/checkout@v6
         with:
diff --git a/photon-client/env.d.ts b/photon-client/env.d.ts
index 11f02fe2a0..c5d1606877 100644
--- a/photon-client/env.d.ts
+++ b/photon-client/env.d.ts
@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare module "vue3-virtual-scroll-list";
diff --git a/photon-client/eslint.config.mjs b/photon-client/eslint.config.mjs
index 7191125429..4721ca0a8a 100644
--- a/photon-client/eslint.config.mjs
+++ b/photon-client/eslint.config.mjs
@@ -5,7 +5,7 @@ import skipFormattingConfig from "@vue/eslint-config-prettier/skip-formatting";
 
 export default defineConfigWithVueTs(
   pluginVue.configs["flat/recommended-error"],
-  vueTsConfigs.recommended,
+  vueTsConfigs.recommendedTypeChecked,
   skipFormattingConfig,
   {
     ignores: ["**/dist/**", "playwright-report"]
@@ -39,13 +39,16 @@ export default defineConfigWithVueTs(
       "vue/no-undef-properties": "error",
       "vue/no-unused-properties": "error",
       "vue/no-unused-refs": "error",
+      "vue/prefer-use-template-ref": "error",
       "vue/no-use-v-else-with-v-for": "error",
       "vue/no-useless-mustaches": "error",
       "vue/no-useless-v-bind": "error",
       "vue/require-default-prop": "off",
       "vue/v-for-delimiter-style": "error",
       "vue/v-on-event-hyphenation": "off",
-      "@typescript-eslint/no-explicit-any": "off",
+      "vue/require-typed-ref": "error",
+      "@typescript-eslint/no-empty-object-type": "error",
+      "@typescript-eslint/no-explicit-any": "error",
       "vue/valid-v-slot": ["error", { allowModifiers: true }]
     }
   }
diff --git a/photon-client/package.json b/photon-client/package.json
index b5b11dbade..0000df4f9f 100644
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -14,8 +14,8 @@
     "format-ci": "prettier --check src/",
     "test": "playwright test",
     "test-ui": "playwright test --ui",
-    "test-setup": "playwright install --with-deps"
-
+    "test-setup": "playwright install --with-deps",
+    "type-check": "vue-tsc"
   },
   "dependencies": {
     "@fontsource/prompt": "^5.2.6",
@@ -37,6 +37,7 @@
     "@types/node": "^22.15.14",
     "@types/three": "^0.178.0",
     "@vitejs/plugin-vue": "^6.0.0",
+    "vue-tsc": "^3.2.5",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/tsconfig": "^0.7.0",
diff --git a/photon-client/pnpm-lock.yaml b/photon-client/pnpm-lock.yaml
index 1168ca0b1d..cdb50493ba 100644
--- a/photon-client/pnpm-lock.yaml
+++ b/photon-client/pnpm-lock.yaml
@@ -90,6 +90,9 @@ importers:
       vite-plugin-vuetify:
         specifier: ^2.1.1
         version: 2.1.1(vite@7.0.5(@types/node@22.15.14)(sass@1.89.2))(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3)
+      vue-tsc:
+        specifier: ^3.2.5
+        version: 3.2.5(typescript@5.8.3)
 
 packages:
 
@@ -379,36 +382,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -478,56 +487,67 @@ packages:
     resolution: {integrity: sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.40.2':
     resolution: {integrity: sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.40.2':
     resolution: {integrity: sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.40.2':
     resolution: {integrity: sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.40.2':
     resolution: {integrity: sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.40.2':
     resolution: {integrity: sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.40.2':
     resolution: {integrity: sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.40.2':
     resolution: {integrity: sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.40.2':
     resolution: {integrity: sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.40.2':
     resolution: {integrity: sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.40.2':
     resolution: {integrity: sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.40.2':
     resolution: {integrity: sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==}
@@ -625,6 +645,15 @@ packages:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
       vue: ^3.2.25
 
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
   '@vue/compiler-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
@@ -666,6 +695,9 @@ packages:
       typescript:
         optional: true
 
+  '@vue/language-core@3.2.5':
+    resolution: {integrity: sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g==}
+
   '@vue/reactivity@3.5.13':
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
@@ -721,6 +753,9 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
+  alien-signals@3.1.2:
+    resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1205,6 +1240,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1235,6 +1273,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1503,6 +1544,9 @@ packages:
       yaml:
         optional: true
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
   vue-eslint-parser@10.1.3:
     resolution: {integrity: sha512-dbCBnd2e02dYWsXoqX5yKUZlOt+ExIpq7hmHKPb5ZqKcjf++Eo0hMseFTZMLKThrUk61m+Uv6A2YSBve6ZvuDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1514,6 +1558,12 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-tsc@3.2.5:
+    resolution: {integrity: sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
   vue3-virtual-scroll-list@0.2.1:
     resolution: {integrity: sha512-G4KxITUOy9D4ro15zOp40D6ogmMefzjIyMsBKqN3xGbV1P6dlKYMx+BBXCKm3Nr/6iipcUKM272Sh2AJRyWMyQ==}
     peerDependencies:
@@ -1976,6 +2026,18 @@ snapshots:
       vite: 7.0.5(@types/node@22.15.14)(sass@1.89.2)
       vue: 3.5.13(typescript@5.8.3)
 
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
   '@vue/compiler-core@3.5.13':
     dependencies:
       '@babel/parser': 7.27.2
@@ -2048,6 +2110,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vue/language-core@3.2.5':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
+      alien-signals: 3.1.2
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.2
+
   '@vue/reactivity@3.5.13':
     dependencies:
       '@vue/shared': 3.5.13
@@ -2104,6 +2176,8 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  alien-signals@3.1.2: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -2601,6 +2675,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  muggle-string@0.4.1: {}
+
   nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
@@ -2633,6 +2709,8 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -2863,6 +2941,8 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.89.2
 
+  vscode-uri@3.1.0: {}
+
   vue-eslint-parser@10.1.3(eslint@9.31.0):
     dependencies:
       debug: 4.4.0
@@ -2881,6 +2961,12 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.8.3)
 
+  vue-tsc@3.2.5(typescript@5.8.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.2.5
+      typescript: 5.8.3
+
   vue3-virtual-scroll-list@0.2.1(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       vue: 3.5.13(typescript@5.8.3)
diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue
index f24875a0c9..edcdc365c1 100644
--- a/photon-client/src/App.vue
+++ b/photon-client/src/App.vue
@@ -11,9 +11,10 @@ import { useTheme } from "vuetify";
 import { restoreThemeConfig } from "@/lib/ThemeManager";
 
 const is_demo = import.meta.env.MODE === "demo";
+const backendHost = inject<string>("backendHost");
 if (!is_demo) {
   const websocket = new AutoReconnectingWebsocket(
-    `ws://${inject("backendHost")}/websocket_data`,
+    `ws://${backendHost}/websocket_data`,
     () => {
       useStateStore().$patch({ backendConnected: true });
     },
diff --git a/photon-client/src/components/app/photon-3d-visualizer.vue b/photon-client/src/components/app/photon-3d-visualizer.vue
index 9f457ded77..cde1d3c720 100644
--- a/photon-client/src/components/app/photon-3d-visualizer.vue
+++ b/photon-client/src/components/app/photon-3d-visualizer.vue
@@ -3,7 +3,7 @@ import type { PhotonTarget } from "@/types/PhotonTrackingTypes";
 // @ts-expect-error Intellisense says these conflict with the dynamic imports below
 import type { Mesh, Object3D, PerspectiveCamera, Scene, WebGLRenderer } from "three";
 // @ts-expect-error Intellisense says these conflict with the dynamic imports below
-import type { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
+import type { TrackballControls } from "three/examples/jsm/controls/TrackballControls.js";
 import { onBeforeUnmount, onMounted, watchEffect } from "vue";
 const {
   ArrowHelper,
@@ -20,7 +20,7 @@ const {
   Scene,
   WebGLRenderer
 } = await import("three");
-const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls");
+const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls.js");
 
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { createPerspectiveCamera } from "@/lib/ThreeUtils";
@@ -213,14 +213,14 @@ onMounted(async () => {
     renderer.render(scene, camera);
   };
 
-  drawTargets(props.targets);
+  await drawTargets(props.targets);
   animate();
 });
 onBeforeUnmount(() => {
   window.removeEventListener("resize", onWindowResize);
 });
 watchEffect(() => {
-  drawTargets(props.targets);
+  void drawTargets(props.targets);
 });
 </script>
 
diff --git a/photon-client/src/components/app/photon-calibration-visualizer.vue b/photon-client/src/components/app/photon-calibration-visualizer.vue
index 31910269ce..246a722f69 100644
--- a/photon-client/src/components/app/photon-calibration-visualizer.vue
+++ b/photon-client/src/components/app/photon-calibration-visualizer.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch, watchEffect, type Ref } from "vue";
+import type {
+  Scene as SceneType,
+  PerspectiveCamera as PerspectiveCameraType,
+  WebGLRenderer as WebGLRendererType,
+  Group as GroupType,
+  Object3D
+} from "three";
+import type { TrackballControls as TrackballControlsType } from "three/examples/jsm/controls/TrackballControls.js";
 const {
   AmbientLight,
   AxesHelper,
@@ -16,7 +24,7 @@ const {
   SphereGeometry,
   WebGLRenderer
 } = await import("three");
-const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls");
+const { TrackballControls } = await import("three/examples/jsm/controls/TrackballControls.js");
 import type { BoardObservation, CameraCalibrationResult } from "@/types/SettingTypes";
 import axios from "axios";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
@@ -31,12 +39,12 @@ const props = defineProps<{
   title: string;
 }>();
 
-let scene: Scene | undefined;
-let camera: PerspectiveCamera | undefined;
-let renderer: WebGLRenderer | undefined;
-let controls: TrackballControls | undefined;
+let scene: SceneType | undefined;
+let camera: PerspectiveCameraType | undefined;
+let renderer: WebGLRendererType | undefined;
+let controls: TrackballControlsType | undefined;
 
-const createChessboard = (obs: BoardObservation, cal: CameraCalibrationResult): Group => {
+const createChessboard = (obs: BoardObservation, cal: CameraCalibrationResult): GroupType => {
   const group = new Group();
 
   if (obs.locationInImageSpace.length === 0) return group;
@@ -195,7 +203,7 @@ let animationFrameId: number | null = null;
 
 onMounted(async () => {
   // Grab data first off
-  fetchCalibrationData();
+  await fetchCalibrationData();
 
   scene = new Scene();
   camera = new PerspectiveCamera(75, 800 / 800, 0.1, 1000);
@@ -318,7 +326,7 @@ if (import.meta.hot) {
 }
 
 watchEffect(() => {
-  drawCalibration(calibrationData.value);
+  void drawCalibration(calibrationData.value);
 });
 
 watch(
@@ -328,9 +336,9 @@ watch(
     props.resolution.height,
     useCameraSettingsStore().getCalibrationCoeffs(props.resolution)
   ],
-  () => {
+  async () => {
     console.log("Camera or resolution changed, refetching calibration");
-    fetchCalibrationData();
+    await fetchCalibrationData();
   }
 );
 </script>
diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index 5c0e76d3fe..ffbbf959f0 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref, onBeforeUnmount } from "vue";
+import { computed, inject, onBeforeUnmount, useTemplateRef } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import type { StyleValue } from "vue";
@@ -13,6 +13,7 @@ const props = defineProps<{
   cameraSettings: UiCameraConfiguration;
 }>();
 
+const backendHostname = inject<string>("backendHostname");
 const emptyStreamSrc = "//:0";
 const streamSrc = computed<string>(() => {
   const port = props.cameraSettings.stream[props.streamType === "Raw" ? "inputPort" : "outputPort"];
@@ -21,7 +22,7 @@ const streamSrc = computed<string>(() => {
     return emptyStreamSrc;
   }
 
-  return `http://${inject("backendHostname")}:${port}/stream.mjpg`;
+  return `http://${backendHostname}:${port}/stream.mjpg`;
 });
 const streamDesc = computed<string>(() => `${props.streamType} Stream View`);
 const streamStyle = computed<StyleValue>(() => {
@@ -67,26 +68,26 @@ const handleCaptureClick = () => {
 const handlePopoutClick = () => {
   window.open(streamSrc.value);
 };
-const handleFullscreenRequest = () => {
+const handleFullscreenRequest = async () => {
   const stream = document.getElementById(props.id);
   if (!stream) return;
-  stream.requestFullscreen();
+  await stream.requestFullscreen();
 };
 
-const mjpgStream: any = ref(null);
+const mjpgStream = useTemplateRef<HTMLImageElement | null>("mjpgStream");
 
 const handleStreamError = () => {
   if (streamSrc.value && streamSrc.value !== emptyStreamSrc) {
     console.error("Error loading stream:", streamSrc.value, " Trying again.");
     setTimeout(() => {
-      mjpgStream.value.src = streamSrc.value;
+      mjpgStream.value!.src = streamSrc.value;
     }, 100);
   }
 };
 
 onBeforeUnmount(() => {
   if (!mjpgStream.value) return;
-  mjpgStream.value["src"] = emptyStreamSrc;
+  mjpgStream.value.src = emptyStreamSrc;
 });
 </script>
 
diff --git a/photon-client/src/components/app/photon-log-view.vue b/photon-client/src/components/app/photon-log-view.vue
index 5d219fc104..0f9a17b797 100644
--- a/photon-client/src/components/app/photon-log-view.vue
+++ b/photon-client/src/components/app/photon-log-view.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
+import { computed, inject, ref, useTemplateRef, watch } from "vue";
 import { LogLevel, type LogMessage } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 import LogEntry from "@/components/app/photon-log-entry.vue";
@@ -10,10 +10,10 @@ const backendHost = inject<string>("backendHost");
 const searchQuery = ref("");
 const timeInput = ref<string>();
 const autoScroll = ref(true);
-const logList = ref();
+const logList = useTemplateRef<InstanceType<typeof VirtualList>>("logList"); // this needs to be typed in the definition since vue has trouble inferring it
 const logKeeps = ref(40);
-const exportLogFile = ref();
-const selectedLogLevels = ref({
+const exportLogFile = useTemplateRef("exportLogFile");
+const selectedLogLevels = ref<Record<number, boolean>>({
   [LogLevel.ERROR]: true,
   [LogLevel.WARN]: true,
   [LogLevel.INFO]: true,
@@ -48,7 +48,7 @@ watch(logs, () => {
   );
   autoScroll.value = bottomOffset < 50;
 
-  if (autoScroll.value) logList.value.scrollToBottom();
+  if (autoScroll.value) logList.value?.scrollToBottom();
 });
 
 const getLogLevelFromIndex = (index: number): string => {
@@ -56,7 +56,7 @@ const getLogLevelFromIndex = (index: number): string => {
 };
 
 const handleLogExport = () => {
-  exportLogFile.value.click();
+  exportLogFile.value?.click();
 };
 
 const handleLogClear = () => {
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index 97e3c138b2..66bba56777 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -176,7 +176,7 @@ const downloadCalibBoard = async () => {
 };
 
 const isCalibrating = computed(
-  () => useCameraSettingsStore().currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.Calib3d
+  () => useCameraSettingsStore().currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.Calib3d.valueOf()
 );
 
 const startCalibration = () => {
@@ -332,7 +332,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               :items="calibrationDivisors"
               :select-cols="8"
               @update:modelValue="
-                (v) => useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: +v }, false)
+                (v) => useCameraSettingsStore().changeCurrentPipelineSetting({ streamingFrameDivisor: +v! }, false)
               "
             />
             <pv-select
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index 7f7af18c32..c5f6d8765d 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -3,7 +3,7 @@ import PhotonCalibrationVisualizer from "@/components/app/photon-calibration-vis
 import type { CameraCalibrationResult, VideoFormat } from "@/types/SettingTypes";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, useTemplateRef } from "vue";
 import { axiosPost, getResolutionString, parseJsonFile } from "@/lib/PhotonUtils";
 import { useTheme } from "vuetify";
 import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
@@ -13,28 +13,28 @@ const props = defineProps<{
   videoFormat: VideoFormat;
 }>();
 
-const confirmRemoveDialog = ref({ show: false, vf: props.videoFormat as VideoFormat });
+const confirmRemoveDialog = ref({ show: false, vf: props.videoFormat });
 
-const removeCalibration = (vf: VideoFormat) => {
-  axiosPost("/calibration/remove", "delete a camera calibration", {
+const removeCalibration = async (vf: VideoFormat) => {
+  await axiosPost("/calibration/remove", "delete a camera calibration", {
     cameraUniqueName: useCameraSettingsStore().currentCameraSettings.uniqueName,
     width: vf.resolution.width,
     height: vf.resolution.height
   });
 };
 
-const exportCalibration = ref();
+const exportCalibration = useTemplateRef("exportCalibration");
 const openExportCalibrationPrompt = () => {
-  exportCalibration.value.click();
+  exportCalibration.value?.click();
 };
 
-const importCalibrationFromPhotonJson = ref();
+const importCalibrationFromPhotonJson = useTemplateRef("importCalibrationFromPhotonJson");
 const openUploadPhotonCalibJsonPrompt = () => {
-  importCalibrationFromPhotonJson.value.click();
+  importCalibrationFromPhotonJson.value?.click();
 };
 const importCalibration = async () => {
-  const files = importCalibrationFromPhotonJson.value.files;
-  if (files.length === 0) return;
+  const files = importCalibrationFromPhotonJson.value?.files;
+  if (!files?.length) return;
   const uploadedJson = files[0];
 
   const data = await parseJsonFile<CameraCalibrationResult>(uploadedJson);
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index 7498c7af34..57469b3aec 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -53,7 +53,7 @@ const fetchSnapshots = () => {
     .get("/utils/getImageSnapshots")
     .then((response) => {
       imgData.value = response.data.map(
-        (snapshotData: { snapshotName: string; cameraUniqueName: string; snapshotData: string }, index) => {
+        (snapshotData: { snapshotName: string; cameraUniqueName: string; snapshotData: string }, index: number) => {
           const metadata = getSnapshotMetadataFromName(snapshotData.snapshotName);
 
           return {
@@ -99,7 +99,7 @@ const expanded = ref([]);
     <v-card-text class="pt-0">
       <v-btn
         color="buttonPassive"
-        :variant="theme.global.current.value.dark ? 'outlined' : 'tonal'"
+        :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
         @click="fetchSnapshots"
       >
         <v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 03a6bb71fd..5b29ecff46 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -9,6 +9,7 @@ import { computed, ref, watchEffect } from "vue";
 import { type CameraSettingsChangeRequest, ValidQuirks } from "@/types/SettingTypes";
 import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
+import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 
 const theme = useTheme();
 
@@ -20,7 +21,9 @@ const focusMode = computed<boolean>({
   get: () => useCameraSettingsStore().isFocusMode,
   set: (v) =>
     useCameraSettingsStore().changeCurrentPipelineIndex(
-      v ? -3 : useCameraSettingsStore().currentCameraSettings.lastPipelineIndex || 0,
+      v
+        ? WebsocketPipelineType.FocusCamera
+        : useCameraSettingsStore().currentCameraSettings.lastPipelineIndex || WebsocketPipelineType.Reflective,
       true
     )
 });
@@ -65,8 +68,8 @@ const settingsHaveChanged = (): boolean => {
   const a = tempSettingsStruct.value;
   const b = useCameraSettingsStore().currentCameraSettings;
 
-  for (const q in ValidQuirks) {
-    if (a.quirksToChange[q] !== b.cameraQuirks.quirks[q]) return true;
+  for (const quirk of Object.values(ValidQuirks)) {
+    if (a.quirksToChange[quirk] !== b.cameraQuirks.quirks[quirk]) return true;
   }
 
   return a.fov !== b.fov.value;
@@ -120,8 +123,8 @@ watchEffect(() => {
 });
 
 const showDeleteCamera = ref(false);
-const deleteThisCamera = () => {
-  axiosPost("/utils/nukeOneCamera", "delete this camera", {
+const deleteThisCamera = async () => {
+  await axiosPost("/utils/nukeOneCamera", "delete this camera", {
     cameraUniqueName: useStateStore().currentCameraUniqueName
   });
 };
@@ -159,7 +162,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         v-model="arducamSelectWrapper"
         label="Arducam Model"
         :items="[
-          { name: 'None', value: 0, disabled: true },
+          { name: 'None', value: 0 },
           { name: 'OV9281', value: 1 },
           { name: 'OV2311', value: 2 },
           { name: 'OV9782', value: 3 }
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 874e7aa5ab..83c2d3f02d 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -6,6 +6,7 @@ import { PipelineType } from "@/types/PipelineTypes";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useTheme } from "vuetify";
+import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
 
 const theme = useTheme();
 
@@ -15,7 +16,9 @@ const driverMode = computed<boolean>({
   get: () => useCameraSettingsStore().isDriverMode,
   set: (v) =>
     useCameraSettingsStore().changeCurrentPipelineIndex(
-      v ? -1 : useCameraSettingsStore().currentCameraSettings.lastPipelineIndex || 0,
+      v
+        ? WebsocketPipelineType.DriverMode
+        : useCameraSettingsStore().currentCameraSettings.lastPipelineIndex || WebsocketPipelineType.Reflective,
       true
     )
 });
diff --git a/photon-client/src/components/common/pv-camera-info-card.vue b/photon-client/src/components/common/pv-camera-info-card.vue
index f726cc6eb0..9cf2704f5b 100644
--- a/photon-client/src/components/common/pv-camera-info-card.vue
+++ b/photon-client/src/components/common/pv-camera-info-card.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { PVCameraInfo } from "@/types/SettingTypes";
+import { cameraInfoFor } from "@/lib/PhotonUtils";
 
 const { camera } = defineProps({
   camera: {
@@ -7,19 +8,6 @@ const { camera } = defineProps({
     required: true
   }
 });
-
-const cameraInfoFor: any = (camera: PVCameraInfo) => {
-  if (camera.PVUsbCameraInfo) {
-    return camera.PVUsbCameraInfo;
-  }
-  if (camera.PVCSICameraInfo) {
-    return camera.PVCSICameraInfo;
-  }
-  if (camera.PVFileCameraInfo) {
-    return camera.PVFileCameraInfo;
-  }
-  return {};
-};
 </script>
 
 <template>
diff --git a/photon-client/src/components/common/pv-camera-match-card.vue b/photon-client/src/components/common/pv-camera-match-card.vue
index 644741bd3f..dc14b13e36 100644
--- a/photon-client/src/components/common/pv-camera-match-card.vue
+++ b/photon-client/src/components/common/pv-camera-match-card.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { PVCameraInfo } from "@/types/SettingTypes";
+import { cameraInfoFor } from "@/lib/PhotonUtils";
 
 function isEqual<T>(a: T, b: T): boolean {
   if (a === b) {
@@ -25,19 +26,6 @@ const { saved, current } = defineProps({
     required: true
   }
 });
-
-const cameraInfoFor = (camera: PVCameraInfo): any => {
-  if (camera.PVUsbCameraInfo) {
-    return camera.PVUsbCameraInfo;
-  }
-  if (camera.PVCSICameraInfo) {
-    return camera.PVCSICameraInfo;
-  }
-  if (camera.PVFileCameraInfo) {
-    return camera.PVFileCameraInfo;
-  }
-  return {};
-};
 </script>
 
 <template>
diff --git a/photon-client/src/components/common/pv-input.vue b/photon-client/src/components/common/pv-input.vue
index 4285585af3..a47894e48e 100644
--- a/photon-client/src/components/common/pv-input.vue
+++ b/photon-client/src/components/common/pv-input.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
   (e: "onEscape"): void;
 }>();
 
-const handleKeydown = ({ key }) => {
+const handleKeydown = ({ key }: KeyboardEvent) => {
   switch (key) {
     case "Enter":
       // Explicitly check that all rule props return true
diff --git a/photon-client/src/components/common/pv-select.vue b/photon-client/src/components/common/pv-select.vue
index 2f7bd9e821..3d84aaa783 100644
--- a/photon-client/src/components/common/pv-select.vue
+++ b/photon-client/src/components/common/pv-select.vue
@@ -1,13 +1,16 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number = string | number">
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
-export interface SelectItem {
+export interface SelectItem<TValue extends string | number = string | number> {
   name: string | number;
-  value: string | number;
+  value: TValue;
   disabled?: boolean;
 }
-const value = defineModel<string | number | undefined>({ required: true });
+
+type PrimitiveItem = string | number;
+type SelectItems = ReadonlyArray<SelectItem> | ReadonlyArray<PrimitiveItem>;
+const value = defineModel<T | number | undefined>({ required: true });
 
 const props = withDefaults(
   defineProps<{
@@ -15,7 +18,7 @@ const props = withDefaults(
     tooltip?: string;
     selectCols?: number;
     disabled?: boolean;
-    items: string[] | number[] | SelectItem[];
+    items: SelectItems;
   }>(),
   {
     selectCols: 9,
@@ -23,6 +26,11 @@ const props = withDefaults(
   }
 );
 
+const areSelectItems = (items: SelectItems): items is ReadonlyArray<SelectItem> => {
+  const firstItem = items[0];
+  return typeof firstItem === "object" && firstItem !== null;
+};
+
 // Computed in case items changes
 const items = computed<SelectItem[]>(() => {
   // Trivial case for empty list; we have no data
@@ -30,11 +38,11 @@ const items = computed<SelectItem[]>(() => {
     return [];
   }
 
-  // Check if the prop exists on the object to infer object type
-  if ((props.items[0] as SelectItem).name) {
-    return props.items as SelectItem[];
+  if (areSelectItems(props.items)) {
+    return [...props.items];
   }
-  return props.items.map((v, i) => ({ name: v, value: i }));
+
+  return props.items.map((item, i) => ({ name: item, value: i }));
 });
 </script>
 
@@ -49,7 +57,6 @@ const items = computed<SelectItem[]>(() => {
         :items="items"
         item-title="name"
         item-value="value"
-        item-props.disabled="disabled"
         :disabled="disabled"
         hide-details="auto"
         variant="underlined"
diff --git a/photon-client/src/components/common/pv-slider.vue b/photon-client/src/components/common/pv-slider.vue
index 4503f8cc44..534f6dea3b 100644
--- a/photon-client/src/components/common/pv-slider.vue
+++ b/photon-client/src/components/common/pv-slider.vue
@@ -18,11 +18,11 @@ const props = withDefaults(
 const emit = defineEmits<{ (e: "update:modelValue", value: number): void }>();
 
 // Debounce function
-function debounce(func: (...args: any[]) => void, wait: number) {
+function debounce(func: (...args: number[]) => void, wait: number) {
   let timeout: ReturnType<typeof setTimeout>;
-  return function (...args: any[]) {
+  return function (...args: number[]) {
     clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), wait);
+    timeout = setTimeout(() => func(...args), wait);
   };
 }
 
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 71bc543e23..fc883edd67 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -13,7 +13,8 @@ import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 
 const theme = useTheme();
 
-const changeCurrentCameraUniqueName = (cameraUniqueName: string) => {
+const changeCurrentCameraUniqueName = (cameraUniqueName: string | number | undefined) => {
+  if (typeof cameraUniqueName !== "string") return;
   useCameraSettingsStore().setCurrentCameraUniqueName(cameraUniqueName, true);
 
   switch (useCameraSettingsStore().cameras[cameraUniqueName].pipelineSettings.pipelineType) {
@@ -303,7 +304,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
             !useCameraSettingsStore().hasConnected
           "
           :items="pipelineNamesWrapper"
-          @update:modelValue="(args) => useCameraSettingsStore().changeCurrentPipelineIndex(args, true)"
+          @update:modelValue="(args) => (args ? useCameraSettingsStore().changeCurrentPipelineIndex(args, true) : null)"
         />
         <pv-input
           v-else
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index 1ef9887844..8a3980d886 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -13,9 +13,9 @@ import OutputTab from "@/components/dashboard/tabs/OutputTab.vue";
 import TargetsTab from "@/components/dashboard/tabs/TargetsTab.vue";
 import PnPTab from "@/components/dashboard/tabs/PnPTab.vue";
 import Map3DTab from "@/components/dashboard/tabs/Map3DTab.vue";
+import { PipelineType } from "@/types/PipelineTypes";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
-import { useDisplay } from "vuetify/lib/composables/display";
-import { useTheme } from "vuetify";
+import { useDisplay, useTheme } from "vuetify";
 
 const theme = useTheme();
 
@@ -106,6 +106,17 @@ const tabGroups = computed<ConfigOption[][]>(() => {
     .filter((it) => it.length); // Remove empty tab groups
 });
 
+// This boolean is used to satisfy type-checking requirements.
+const shouldUseWideSecondTabGroup = computed(() => {
+  const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
+
+  return (
+    (currentPipelineSettings.pipelineType === PipelineType.AprilTag ||
+      currentPipelineSettings.pipelineType === PipelineType.Aruco) &&
+    currentPipelineSettings.doMultiTarget
+  );
+});
+
 const onBeforeTabUpdate = () => {
   // Force the current tab to the input tab on driver mode change
   if (useCameraSettingsStore().isDriverMode) {
@@ -129,7 +140,7 @@ const onBeforeTabUpdate = () => {
       <v-col
         v-for="(tabGroupData, tabGroupIndex) in tabGroups"
         :key="tabGroupIndex"
-        :cols="tabGroupIndex === 1 && useCameraSettingsStore().currentPipelineSettings.doMultiTarget ? 7 : ''"
+        :cols="tabGroupIndex === 1 && shouldUseWideSecondTabGroup ? 7 : ''"
         :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
         @vue:before-update="onBeforeTabUpdate"
       >
diff --git a/photon-client/src/components/dashboard/tabs/AprilTagTab.vue b/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
index 249f80607e..2c0cace150 100644
--- a/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
+++ b/photon-client/src/components/dashboard/tabs/AprilTagTab.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { PipelineType } from "@/types/PipelineTypes";
+import { PipelineType, type AprilTagPipelineSettings } from "@/types/PipelineTypes";
 import PvSelect from "@/components/common/pv-select.vue";
 import PvSlider from "@/components/common/pv-slider.vue";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import { computed } from "vue";
 import { useStateStore } from "@/stores/StateStore";
-import type { ActivePipelineSettings } from "@/types/PipelineTypes";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useDisplay } from "vuetify";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
-const currentPipelineSettings = computed<ActivePipelineSettings>(
-  () => useCameraSettingsStore().currentPipelineSettings
+const currentPipelineSettings = computed<AprilTagPipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings as AprilTagPipelineSettings
 );
 const { mdAndDown } = useDisplay();
 const interactiveCols = computed(() =>
diff --git a/photon-client/src/components/dashboard/tabs/ArucoTab.vue b/photon-client/src/components/dashboard/tabs/ArucoTab.vue
index bf510f9d0b..299d42d4b6 100644
--- a/photon-client/src/components/dashboard/tabs/ArucoTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ArucoTab.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { PipelineType, type ActivePipelineSettings } from "@/types/PipelineTypes";
+import { PipelineType, type ArucoPipelineSettings } from "@/types/PipelineTypes";
 import PvSlider from "@/components/common/pv-slider.vue";
 import PvSwitch from "@/components/common/pv-switch.vue";
 import PvRangeSlider from "@/components/common/pv-range-slider.vue";
@@ -11,8 +11,8 @@ import { useDisplay } from "vuetify";
 
 // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section
 // Defer reference to store access method
-const currentPipelineSettings = computed<ActivePipelineSettings>(
-  () => useCameraSettingsStore().currentPipelineSettings
+const currentPipelineSettings = computed<ArucoPipelineSettings>(
+  () => useCameraSettingsStore().currentPipelineSettings as ArucoPipelineSettings
 );
 const { mdAndDown } = useDisplay();
 const interactiveCols = computed(() =>
diff --git a/photon-client/src/components/dashboard/tabs/InputTab.vue b/photon-client/src/components/dashboard/tabs/InputTab.vue
index 5a0b4359cb..471768f529 100644
--- a/photon-client/src/components/dashboard/tabs/InputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/InputTab.vue
@@ -184,7 +184,7 @@ const interactiveCols = computed(() =>
       tooltip="Resolution and FPS the camera should directly capture at"
       :items="cameraResolutions"
       :select-cols="interactiveCols"
-      @update:modelValue="(args) => handleResolutionChange(args)"
+      @update:modelValue="(args) => (args ? handleResolutionChange(args) : null)"
     />
     <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
@@ -192,7 +192,7 @@ const interactiveCols = computed(() =>
       tooltip="Resolution to which camera frames are downscaled for streaming to the dashboard"
       :items="streamResolutions"
       :select-cols="interactiveCols"
-      @update:modelValue="(args) => handleStreamResolutionChange(args)"
+      @update:modelValue="(args) => (args ? handleStreamResolutionChange(args) : null)"
     />
     <pv-switch
       v-if="useCameraSettingsStore().isDriverMode"
diff --git a/photon-client/src/components/dashboard/tabs/ObjectDetectionTab.vue b/photon-client/src/components/dashboard/tabs/ObjectDetectionTab.vue
index d06956293e..cff8e1c709 100644
--- a/photon-client/src/components/dashboard/tabs/ObjectDetectionTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ObjectDetectionTab.vue
@@ -126,11 +126,7 @@ const selectedModel = computed({
       :items="['Portrait', 'Landscape']"
       :select-cols="interactiveCols"
       @update:modelValue="
-        (value) =>
-          useCameraSettingsStore().changeCurrentPipelineSetting(
-            { contourTargetOrientation: typeof value === 'string' ? Number(value) : value },
-            false
-          )
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
       "
     />
     <pv-select
@@ -140,11 +136,7 @@ const selectedModel = computed({
       :select-cols="interactiveCols"
       :items="['Largest', 'Smallest', 'Highest', 'Lowest', 'Rightmost', 'Leftmost', 'Centermost']"
       @update:modelValue="
-        (value) =>
-          useCameraSettingsStore().changeCurrentPipelineSetting(
-            { contourSortMode: typeof value === 'string' ? Number(value) : value },
-            false
-          )
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourSortMode: value }, false)
       "
     />
   </div>
diff --git a/photon-client/src/components/dashboard/tabs/PnPTab.vue b/photon-client/src/components/dashboard/tabs/PnPTab.vue
index 0ec9b5d668..868cc09242 100644
--- a/photon-client/src/components/dashboard/tabs/PnPTab.vue
+++ b/photon-client/src/components/dashboard/tabs/PnPTab.vue
@@ -30,7 +30,7 @@ const interactiveCols = computed(() =>
       ]"
       :select-cols="interactiveCols"
       @update:modelValue="
-        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ targetModel: value }, false)
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ targetModel: value as TargetModel }, false)
       "
     />
     <pv-slider
diff --git a/photon-client/src/components/settings/DeviceCard.vue b/photon-client/src/components/settings/DeviceCard.vue
index 89260bdb0f..9e6b63447e 100644
--- a/photon-client/src/components/settings/DeviceCard.vue
+++ b/photon-client/src/components/settings/DeviceCard.vue
@@ -1,6 +1,6 @@
 @ -0,0 +1,565 @@
 <script setup lang="ts">
-import { inject, computed, ref, watch } from "vue";
+import { inject, computed, ref, watch, useTemplateRef } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import PvSelect from "@/components/common/pv-select.vue";
@@ -15,20 +15,20 @@ const theme = useTheme();
 
 const restartProgram = async () => {
   if (await axiosPost("/utils/restartProgram", "restart PhotonVision")) {
-    forceReloadPage();
+    await forceReloadPage();
   }
 };
 const restartDevice = async () => {
   if (await axiosPost("/utils/restartDevice", "restart the device")) {
-    forceReloadPage();
+    await forceReloadPage();
   }
 };
 
 const address = inject<string>("backendHost");
 
-const offlineUpdate = ref();
+const offlineUpdate = useTemplateRef("offlineUpdate");
 const openOfflineUpdatePrompt = () => {
-  offlineUpdate.value.click();
+  offlineUpdate.value?.click();
 };
 
 const offlineUpdateRegex = new RegExp("photonvision-((?:dev-)?v[\\w.-]+)-((?:linux|win|mac)\\w+)\\.jar");
@@ -37,8 +37,8 @@ const majorVersionRegex = new RegExp("(?:dev-)?(\\d+)\\.\\d+\\.\\d+");
 const offlineUpdateDialog = ref({ show: false, confirmString: "" });
 
 const handleOfflineUpdateRequest = async () => {
-  const files = offlineUpdate.value.files;
-  if (files.length === 0) return;
+  const files = offlineUpdate.value?.files;
+  if (!files?.length) return;
 
   const match = files[0].name.match(offlineUpdateRegex);
   if (!match) {
@@ -68,7 +68,7 @@ const handleOfflineUpdateRequest = async () => {
     });
     return;
   } else if (versionMatch && !dev) {
-    handleOfflineUpdate(files[0]);
+    await handleOfflineUpdate(files[0]);
   } else if (!versionMatch && !dev) {
     offlineUpdateDialog.value = {
       show: true,
@@ -99,7 +99,7 @@ const handleOfflineUpdate = async (file: File) => {
   if (
     await axiosPost("/utils/offlineUpdate", "upload new software", formData, {
       headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
+      onUploadProgress: ({ progress }: { progress?: number }) => {
         const uploadPercentage = (progress || 0) * 100.0;
         if (uploadPercentage < 99.5) {
           useStateStore().showSnackbarMessage({
@@ -118,18 +118,18 @@ const handleOfflineUpdate = async (file: File) => {
       color: "secondary",
       timeout: -1
     });
-    forceReloadPage();
+    await forceReloadPage();
   }
 };
 
-const exportLogFile = ref();
+const exportLogFile = useTemplateRef("exportLogFile");
 const openExportLogsPrompt = () => {
-  exportLogFile.value.click();
+  exportLogFile.value?.click();
 };
 
-const exportSettings = ref();
+const exportSettings = useTemplateRef("exportSettings");
 const openExportSettingsPrompt = () => {
-  exportSettings.value.click();
+  exportSettings.value?.click();
 };
 
 enum ImportType {
@@ -144,7 +144,7 @@ const showImportDialog = ref(false);
 const importType = ref<ImportType | undefined>(undefined);
 const importFile = ref<File | null>(null);
 
-const handleSettingsImport = () => {
+const handleSettingsImport = async () => {
   if (importType.value === undefined || importFile.value === null) return;
   const formData = new FormData();
   formData.append("data", importFile.value);
@@ -167,7 +167,7 @@ const handleSettingsImport = () => {
       settingsEndpoint = "";
       break;
   }
-  axiosPost(`/settings${settingsEndpoint}`, "import settings", formData, {
+  await axiosPost(`/settings${settingsEndpoint}`, "import settings", formData, {
     headers: { "Content-Type": "multipart/form-data" }
   });
   showImportDialog.value = false;
@@ -178,7 +178,7 @@ const handleSettingsImport = () => {
 const showFactoryReset = ref(false);
 const nukePhotonConfigDirectory = async () => {
   if (await axiosPost("/utils/nukeConfigDirectory", "delete the config directory")) {
-    forceReloadPage();
+    await forceReloadPage();
   }
 };
 
@@ -558,7 +558,9 @@ watch(metricsHistorySnapshot, () => {
               :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="
                 offlineUpdateDialog.show = false;
-                handleOfflineUpdate(offlineUpdate.files[0]);
+                if (offlineUpdate?.files?.length) {
+                  handleOfflineUpdate(offlineUpdate.files[0]);
+                }
               "
             >
               <v-icon start class="open-icon" size="large"> mdi-upload </v-icon>
diff --git a/photon-client/src/components/settings/GlobalSettingsCard.vue b/photon-client/src/components/settings/GlobalSettingsCard.vue
index 27cfbb470e..92847efa91 100644
--- a/photon-client/src/components/settings/GlobalSettingsCard.vue
+++ b/photon-client/src/components/settings/GlobalSettingsCard.vue
@@ -106,6 +106,7 @@ const saveGeneralSettings = async () => {
 
     // Update the local settings cause the backend checked their validity. Assign is to deref value
     useSettingsStore().network = { ...useSettingsStore().network, ...Object.assign({}, tempSettingsStruct.value) };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     resetTempSettingsStruct();
     if (error.response) {
diff --git a/photon-client/src/components/settings/MetricsChart.vue b/photon-client/src/components/settings/MetricsChart.vue
index 25bb30bb4c..4b187e9d87 100644
--- a/photon-client/src/components/settings/MetricsChart.vue
+++ b/photon-client/src/components/settings/MetricsChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, onBeforeUnmount, watch } from "vue";
+import { onMounted, onBeforeUnmount, watch, useTemplateRef } from "vue";
 import { useTheme } from "vuetify";
 
 // Color  -  original        (adjusted)
@@ -8,14 +8,14 @@ import { useTheme } from "vuetify";
 // green  -   65, 181, 127   (r:  75, g: 209, b: 147)
 // red    -  238, 102, 102   (r: 238, g: 102, b: 102)
 const colors = {
-  "blue-LightTheme": { r: 255, g: 216, b: 67 },
-  "blue-DarkTheme": { r: 92, g: 154, b: 255 },
-  "purple-LightTheme": { r: 255, g: 216, b: 67 },
-  "purple-DarkTheme": { r: 167, g: 104, b: 196 },
-  "red-LightTheme": { r: 255, g: 216, b: 67 },
-  "red-DarkTheme": { r: 238, g: 102, b: 102 },
-  "green-LightTheme": { r: 255, g: 216, b: 67 },
-  "green-DarkTheme": { r: 75, g: 209, b: 147 }
+  "blue-light": { r: 255, g: 216, b: 67 },
+  "blue-dark": { r: 92, g: 154, b: 255 },
+  "purple-light": { r: 255, g: 216, b: 67 },
+  "purple-dark": { r: 167, g: 104, b: 196 },
+  "red-light": { r: 255, g: 216, b: 67 },
+  "red-dark": { r: 238, g: 102, b: 102 },
+  "green-light": { r: 255, g: 216, b: 67 },
+  "green-dark": { r: 75, g: 209, b: 147 }
 };
 const DEFAULT_COLOR = "blue";
 
@@ -26,9 +26,13 @@ const typeLabels = {
 };
 
 const theme = useTheme();
-const chartRef = ref(null);
+const chartRef = useTemplateRef("chartRef");
 let chart: echarts.ECharts | null = null;
 
+interface TooltipSeriesParam {
+  value: [number, number];
+}
+
 const getOptions = (data: ChartData[] = []) => {
   const now = Date.now();
   return {
@@ -37,7 +41,7 @@ const getOptions = (data: ChartData[] = []) => {
     },
     tooltip: {
       trigger: "axis",
-      formatter: (params: any) => {
+      formatter: (params: TooltipSeriesParam[]) => {
         const p = params[0];
         const append = typeLabels[props.type];
         const fmsLimitLabel = "FMS Limit - 7.000 Mb/s";
@@ -80,12 +84,12 @@ const getOptions = (data: ChartData[] = []) => {
       min: now - 55 * 1000,
       axisLine: {
         lineStyle: {
-          color: theme.global.name.value === "LightTheme" ? "#aaa" : "#777"
+          color: theme.global.current.value.dark ? "#777" : "#aaa"
         }
       },
       axisLabel: {
         align: "left",
-        color: theme.global.name.value === "LightTheme" ? "#fff" : "#ddd",
+        color: theme.global.current.value.dark ? "#ddd" : "#fff",
         formatter: (value: number) => {
           const date = new Date(value);
           return date.toLocaleTimeString([], {
@@ -102,12 +106,12 @@ const getOptions = (data: ChartData[] = []) => {
       position: "right",
       min:
         props.min ??
-        function (value) {
+        function (value: { min: number; max: number }) {
           return Math.max(0, (value.min - 10) | 0);
         },
       max:
         props.max ??
-        function (value) {
+        function (value: { min: number; max: number }) {
           return (value.max + 10) | 0;
         },
       splitNumber: 2,
@@ -118,7 +122,7 @@ const getOptions = (data: ChartData[] = []) => {
         }
       },
       axisLabel: {
-        color: theme.global.name.value === "LightTheme" ? "#fff" : "#ddd"
+        color: theme.global.current.value.dark ? "#ddd" : "#fff"
       }
     },
     series: getSeries(data),
@@ -127,7 +131,7 @@ const getOptions = (data: ChartData[] = []) => {
 };
 
 const getSeries = (data: ChartData[] = []) => {
-  const color = colors[`${props.color ?? DEFAULT_COLOR}-${theme.global.name.value}`];
+  const color = colors[`${props.color ?? DEFAULT_COLOR}-${theme.global.current.value.dark ? "dark" : "light"}`];
   return [
     {
       type: "line",
@@ -188,10 +192,10 @@ interface ChartData {
 // Type options: "percentage", "temperature", "mb"
 const props = defineProps<{
   data: ChartData[];
-  type: string;
+  type: keyof typeof typeLabels;
   min?: number;
   max?: number;
-  color?: string;
+  color?: "red" | "green" | "blue" | "purple";
 }>();
 
 onMounted(async () => {
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index 384f42dac2..f7968ab2bb 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, inject } from "vue";
+import { ref, computed, inject, useTemplateRef } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { type ObjectDetectionModelProperties } from "@/types/SettingTypes";
@@ -46,7 +46,7 @@ const handleImport = async () => {
   if (
     await axiosPost("/objectdetection/import", "import an object detection model", formData, {
       headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
+      onUploadProgress: ({ progress }: { progress?: number }) => {
         const uploadPercentage = (progress || 0) * 100.0;
         if (uploadPercentage < 99.5) {
           useStateStore().showSnackbarMessage({
@@ -74,20 +74,20 @@ const handleImport = async () => {
   importVersion.value = null;
 };
 
-const deleteModel = (model: ObjectDetectionModelProperties) => {
-  axiosPost("/objectdetection/delete", "delete an object detection model", {
+const deleteModel = async (model: ObjectDetectionModelProperties) => {
+  await axiosPost("/objectdetection/delete", "delete an object detection model", {
     modelPath: model.modelPath
   });
 };
 
-const renameModel = (model: ObjectDetectionModelProperties, newName: string) => {
+const renameModel = async (model: ObjectDetectionModelProperties, newName: string) => {
   useStateStore().showSnackbarMessage({
     message: "Renaming Object Detection Model...",
     color: "secondary",
     timeout: -1
   });
 
-  axiosPost("/objectdetection/rename", "rename an object detection model", {
+  await axiosPost("/objectdetection/rename", "rename an object detection model", {
     modelPath: model.modelPath,
     newName: newName
   });
@@ -97,7 +97,7 @@ const renameModel = (model: ObjectDetectionModelProperties, newName: string) =>
 // Filters out models that are not supported by the current backend, and returns a flattened list.
 const supportedModels = computed(() => {
   const { availableModels, supportedBackends } = useSettingsStore().general;
-  const isSupported = (model: any) => {
+  const isSupported = (model: ObjectDetectionModelProperties) => {
     // Check if model's family is in the list of supported backends
     return supportedBackends.some((backend: string) => backend.toLowerCase() === model.family.toLowerCase());
   };
@@ -106,19 +106,19 @@ const supportedModels = computed(() => {
   return availableModels.filter(isSupported);
 });
 
-const exportModels = ref();
+const exportModels = useTemplateRef("exportModels");
 const openExportPrompt = () => {
-  exportModels.value.click();
+  exportModels.value?.click();
 };
 
-const exportIndividualModel = ref();
+const exportIndividualModel = useTemplateRef("exportIndividualModel");
 const openExportIndividualModelPrompt = () => {
-  exportIndividualModel.value.click();
+  exportIndividualModel.value?.click();
 };
 
 const showNukeDialog = ref(false);
-const nukeModels = () => {
-  axiosPost("/objectdetection/nuke", "clear and reset object detection models");
+const nukeModels = async () => {
+  await axiosPost("/objectdetection/nuke", "clear and reset object detection models");
 };
 
 const showBulkImportDialog = ref(false);
@@ -132,7 +132,7 @@ const handleBulkImport = async () => {
   if (
     await axiosPost("/objectdetection/bulkimport", "import object detection models", formData, {
       headers: { "Content-Type": "multipart/form-data" },
-      onUploadProgress: ({ progress }) => {
+      onUploadProgress: ({ progress }: { progress?: number }) => {
         const uploadPercentage = (progress || 0) * 100.0;
         if (uploadPercentage < 99.5) {
           useStateStore().showSnackbarMessage({
diff --git a/photon-client/src/lib/AutoReconnectingWebsocket.ts b/photon-client/src/lib/AutoReconnectingWebsocket.ts
index fdd0abb263..8635679427 100644
--- a/photon-client/src/lib/AutoReconnectingWebsocket.ts
+++ b/photon-client/src/lib/AutoReconnectingWebsocket.ts
@@ -44,13 +44,13 @@ export class AutoReconnectingWebsocket {
    * @see isConnected
    *
    */
-  send(data, encodeData = true) {
+  send(data: unknown, encodeData = true) {
     // Only send data if the websocket is open
     if (this.isConnected()) {
       if (encodeData) {
         this.websocket?.send(encode(data));
       } else {
-        this.websocket?.send(data);
+        this.websocket?.send(data as string | ArrayBufferLike | Blob | ArrayBufferView);
       }
     }
   }
diff --git a/photon-client/src/lib/PhotonUtils.ts b/photon-client/src/lib/PhotonUtils.ts
index b831979279..4588b079b2 100644
--- a/photon-client/src/lib/PhotonUtils.ts
+++ b/photon-client/src/lib/PhotonUtils.ts
@@ -1,6 +1,6 @@
 import { useStateStore } from "@/stores/StateStore";
-import type { Resolution } from "@/types/SettingTypes";
-import axios from "axios";
+import type { PVCameraInfo, Resolution } from "@/types/SettingTypes";
+import axios, { type AxiosRequestConfig } from "axios";
 
 export const resolutionsAreEqual = (a: Resolution, b: Resolution) => {
   return a.height === b.height && a.width === b.width;
@@ -51,15 +51,16 @@ export const forceReloadPage = async () => {
 
 export const getResolutionString = (resolution: Resolution): string => `${resolution.width}x${resolution.height}`;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const parseJsonFile = async <T extends Record<string, any>>(file: File): Promise<T> => {
   return new Promise((resolve, reject) => {
     const fileReader = new FileReader();
     fileReader.onload = (event) => {
       const target: FileReader | null = event.target;
-      if (target === null) reject();
+      if (target === null) reject(new Error("FileReader event target is null"));
       else resolve(JSON.parse(target.result as string) as T);
     };
-    fileReader.onerror = (error) => reject(error);
+    fileReader.onerror = () => reject(new Error("Error reading file"));
     fileReader.readAsText(file);
   });
 };
@@ -73,7 +74,13 @@ export const parseJsonFile = async <T extends Record<string, any>>(file: File):
  * @param config Optional axios request configuration
  * @returns A promise that resolves to true if the POST request is successful, or false if an error occurs.
  */
-export const axiosPost = async (url: string, description: string, data?: any, config?: any): Promise<boolean> => {
+export const axiosPost = async (
+  url: string,
+  description: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data?: any,
+  config?: AxiosRequestConfig
+): Promise<boolean> => {
   try {
     await axios.post(url, data, config);
     useStateStore().showSnackbarMessage({
@@ -81,6 +88,7 @@ export const axiosPost = async (url: string, description: string, data?: any, co
       color: "success"
     });
     return true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
     if (error.response) {
       useStateStore().showSnackbarMessage({
@@ -101,3 +109,23 @@ export const axiosPost = async (url: string, description: string, data?: any, co
     return false;
   }
 };
+
+type CameraInfoDetails = Partial<
+  NonNullable<PVCameraInfo["PVUsbCameraInfo"]> &
+    NonNullable<PVCameraInfo["PVCSICameraInfo"]> &
+    NonNullable<PVCameraInfo["PVFileCameraInfo"]>
+>;
+
+export const cameraInfoFor = (camera: PVCameraInfo | null): CameraInfoDetails => {
+  if (!camera) return {};
+  if (camera.PVUsbCameraInfo) {
+    return camera.PVUsbCameraInfo;
+  }
+  if (camera.PVCSICameraInfo) {
+    return camera.PVCSICameraInfo;
+  }
+  if (camera.PVFileCameraInfo) {
+    return camera.PVFileCameraInfo;
+  }
+  return {};
+};
diff --git a/photon-client/src/main.ts b/photon-client/src/main.ts
index 2b3e82f20c..f32f39f436 100644
--- a/photon-client/src/main.ts
+++ b/photon-client/src/main.ts
@@ -11,7 +11,7 @@ const runtimeMode: PhotonClientRuntimeMode = process.env.NODE_ENV as PhotonClien
 
 let backendHost: string;
 let backendHostname: string;
-switch (runtimeMode as PhotonClientRuntimeMode) {
+switch (runtimeMode) {
   case "development":
     backendHost = `${location.hostname}:5800`;
     backendHostname = location.hostname;
diff --git a/photon-client/src/plugins/vuetify.ts b/photon-client/src/plugins/vuetify.ts
index 6da0a196d5..e169c7ddcb 100644
--- a/photon-client/src/plugins/vuetify.ts
+++ b/photon-client/src/plugins/vuetify.ts
@@ -1,6 +1,6 @@
 import "vuetify/styles";
-import("@mdi/font/css/materialdesignicons.css");
-import type { ThemeDefinition } from "vuetify/lib/composables/theme";
+void import("@mdi/font/css/materialdesignicons.css");
+import type { ThemeDefinition } from "vuetify";
 import { createVuetify } from "vuetify";
 
 const CommonColors = {
diff --git a/photon-client/src/stores/StateStore.ts b/photon-client/src/stores/StateStore.ts
index f9650a932b..c639bf5b6d 100644
--- a/photon-client/src/stores/StateStore.ts
+++ b/photon-client/src/stores/StateStore.ts
@@ -31,7 +31,8 @@ interface StateStore {
   currentCameraUniqueName: string;
   networkUsageHistory: NetworkUsageEntry[];
 
-  backendResults: Record<number, PipelineResult>;
+  // Key is a string, although often used as a number, because we need to reference using the camera unique name at times.
+  backendResults: Record<string, PipelineResult>;
   multitagResultBuffer: Record<string, MultitagResult[]>;
 
   colorPickingMode: boolean;
diff --git a/photon-client/src/stores/settings/CameraSettingsStore.ts b/photon-client/src/stores/settings/CameraSettingsStore.ts
index 49826a40a8..bfecf26e0c 100644
--- a/photon-client/src/stores/settings/CameraSettingsStore.ts
+++ b/photon-client/src/stores/settings/CameraSettingsStore.ts
@@ -64,17 +64,14 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
     pipelineNames(): string[] {
       return this.currentCameraSettings.pipelineNicknames;
     },
-    currentPipelineName(): string {
-      return this.pipelineNames[useStateStore().currentCameraUniqueName];
-    },
     isDriverMode(): boolean {
-      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.DriverMode;
+      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.DriverMode.valueOf();
     },
     isCalibrationMode(): boolean {
-      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.Calib3d;
+      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.Calib3d.valueOf();
     },
     isFocusMode(): boolean {
-      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.FocusCamera;
+      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.FocusCamera.valueOf();
     },
     isCSICamera(): boolean {
       return this.currentCameraSettings.isCSICamera;
@@ -226,9 +223,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
       settings: Partial<ActivePipelineSettings>,
       cameraUniqueName: string = useStateStore().currentCameraUniqueName
     ) {
-      Object.entries(settings).forEach(([k, v]) => {
-        this.cameras[cameraUniqueName].pipelineSettings[k] = v;
-      });
+      Object.assign(this.cameras[cameraUniqueName].pipelineSettings, settings);
     },
     /**
      * Change the nickname of the currently selected pipeline of the provided camera.
@@ -275,7 +270,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
      * @param cameraUniqueName the unique name of the camera.
      */
     changeCurrentPipelineIndex(
-      index: number,
+      index: WebsocketPipelineType,
       updateStore = true,
       cameraUniqueName: string = useStateStore().currentCameraUniqueName
     ) {
@@ -285,8 +280,9 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
       };
       if (updateStore) {
         if (
-          this.cameras[cameraUniqueName].currentPipelineIndex !== -1 &&
-          this.cameras[cameraUniqueName].currentPipelineIndex !== -2
+          this.cameras[cameraUniqueName].currentPipelineIndex !== WebsocketPipelineType.DriverMode.valueOf() &&
+          this.cameras[cameraUniqueName].currentPipelineIndex !== WebsocketPipelineType.Calib3d.valueOf() &&
+          this.cameras[cameraUniqueName].currentPipelineIndex !== WebsocketPipelineType.FocusCamera.valueOf()
         ) {
           this.cameras[cameraUniqueName].lastPipelineIndex = this.cameras[cameraUniqueName].currentPipelineIndex;
         }
diff --git a/photon-client/src/stores/settings/GeneralSettingsStore.ts b/photon-client/src/stores/settings/GeneralSettingsStore.ts
index 9c7401ff33..483c3e5c35 100644
--- a/photon-client/src/stores/settings/GeneralSettingsStore.ts
+++ b/photon-client/src/stores/settings/GeneralSettingsStore.ts
@@ -10,6 +10,7 @@ import { NetworkConnectionType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
 import axios from "axios";
 import type { WebsocketSettingsUpdate } from "@/types/WebsocketDataTypes";
+import type { AprilTagFieldLayout } from "@/types/PhotonTrackingTypes";
 import { ref } from "vue";
 
 interface GeneralSettingsStore {
@@ -17,7 +18,7 @@ interface GeneralSettingsStore {
   network: NetworkSettings;
   lighting: LightingSettings;
   metrics: MetricData;
-  currentFieldLayout;
+  currentFieldLayout: AprilTagFieldLayout;
 }
 
 interface MetricsEntry {
diff --git a/photon-client/src/types/PipelineTypes.ts b/photon-client/src/types/PipelineTypes.ts
index 17a9f1cbdf..bd79c26f12 100644
--- a/photon-client/src/types/PipelineTypes.ts
+++ b/photon-client/src/types/PipelineTypes.ts
@@ -5,6 +5,7 @@ import type { ObjectDetectionModelProperties } from "@/types/SettingTypes";
  * The on-wire form of PipelineType.java (the enum is serialized with `ordinal()`)
  */
 export enum PipelineType {
+  Calibration3d = 1,
   DriverMode = 2,
   Reflective = 3,
   ColoredShape = 4,
@@ -85,6 +86,8 @@ export interface PipelineSettings {
   cameraAutoWhiteBalance: boolean;
   cameraWhiteBalanceTemp: number;
 
+  crosshair: boolean;
+
   blockForFrames: boolean;
 }
 export type ConfigurablePipelineSettings = Partial<
@@ -152,6 +155,7 @@ export const DefaultPipelineSettings: Omit<
   cameraWhiteBalanceTemp: 4000,
   cameraMinExposureRaw: 1,
   cameraMaxExposureRaw: 2,
+  crosshair: true,
   blockForFrames: true
 };
 
@@ -324,13 +328,14 @@ export const DefaultObjectDetectionPipelineSettings: ObjectDetectionPipelineSett
 };
 
 export interface Calibration3dPipelineSettings extends PipelineSettings {
+  pipelineType: PipelineType.Calibration3d;
   drawAllSnapshots: boolean;
 }
 export type ConfigurableCalibration3dPipelineSettings = Partial<Omit<Calibration3dPipelineSettings, "pipelineType">> &
   ConfigurablePipelineSettings;
 export const DefaultCalibration3dPipelineSettings: Calibration3dPipelineSettings = {
   ...DefaultPipelineSettings,
-  pipelineType: PipelineType.ObjectDetection,
+  pipelineType: PipelineType.Calibration3d,
   cameraGain: 20,
   targetModel: TargetModel.InfiniteRechargeHighGoalOuter,
   ledMode: true,
diff --git a/photon-client/src/types/SettingTypes.ts b/photon-client/src/types/SettingTypes.ts
index 291f812abb..12745872b7 100644
--- a/photon-client/src/types/SettingTypes.ts
+++ b/photon-client/src/types/SettingTypes.ts
@@ -1,6 +1,6 @@
 import { type ActivePipelineSettings, DefaultAprilTagPipelineSettings } from "@/types/PipelineTypes";
 import type { Pose3d } from "@/types/PhotonTrackingTypes";
-import type { WebsocketCameraSettingsUpdate } from "./WebsocketDataTypes";
+import { WebsocketPipelineType, type WebsocketCameraSettingsUpdate } from "./WebsocketDataTypes";
 import { reactive } from "vue";
 
 export interface GeneralSettings {
@@ -408,7 +408,7 @@ export const PlaceholderCameraSettings: UiCameraConfiguration = reactive({
   ],
   pipelineNicknames: ["Placeholder Pipeline"],
   lastPipelineIndex: 0,
-  currentPipelineIndex: 0,
+  currentPipelineIndex: WebsocketPipelineType.AprilTag,
   pipelineSettings: DefaultAprilTagPipelineSettings,
   cameraQuirks: {
     displayName: "Blank 1",
diff --git a/photon-client/src/types/WebsocketDataTypes.ts b/photon-client/src/types/WebsocketDataTypes.ts
index d1f18bc29d..759639143d 100644
--- a/photon-client/src/types/WebsocketDataTypes.ts
+++ b/photon-client/src/types/WebsocketDataTypes.ts
@@ -50,7 +50,7 @@ export type WebsocketVideoFormat = Record<
 export interface WebsocketCameraSettingsUpdate {
   cameraPath: string;
   calibrations: CameraCalibrationResult[];
-  currentPipelineIndex: number;
+  currentPipelineIndex: WebsocketPipelineType;
   currentPipelineSettings: ActivePipelineSettings;
   fov: number;
   inputStreamPort: number;
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index aa73790b0c..3488b36729 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -2,14 +2,8 @@
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { computed, inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
-import {
-  PlaceholderCameraSettings,
-  PVCameraInfo,
-  type PVCSICameraInfo,
-  type PVFileCameraInfo,
-  type PVUsbCameraInfo
-} from "@/types/SettingTypes";
-import { axiosPost, getResolutionString } from "@/lib/PhotonUtils";
+import { PlaceholderCameraSettings, PVCameraInfo } from "@/types/SettingTypes";
+import { axiosPost, getResolutionString, cameraInfoFor } from "@/lib/PhotonUtils";
 import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
 import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
@@ -18,20 +12,22 @@ import { useTheme } from "vuetify";
 
 const theme = useTheme();
 
-const formatUrl = (port) => `http://${inject("backendHostname")}:${port}/stream.mjpg`;
+const backendHostname = inject<string>("backendHostname");
+const formatUrl = (port: number) => `http://${backendHostname}:${port}/stream.mjpg`;
 
 const activatingModule = ref(false);
-const activateModule = (moduleUniqueName: string) => {
+const activateModule = async (moduleUniqueName: string) => {
   if (activatingModule.value) return;
   activatingModule.value = true;
 
-  axiosPost("/utils/activateMatchedCamera", "activate a matched camera", {
+  await axiosPost("/utils/activateMatchedCamera", "activate a matched camera", {
     cameraUniqueName: moduleUniqueName
-  }).finally(() => (activatingModule.value = false));
+  });
+  activatingModule.value = false;
 };
 
 const assigningCamera = ref(false);
-const assignCamera = (cameraInfo: PVCameraInfo) => {
+const assignCamera = async (cameraInfo: PVCameraInfo) => {
   if (assigningCamera.value) return;
   assigningCamera.value = true;
 
@@ -39,32 +35,30 @@ const assignCamera = (cameraInfo: PVCameraInfo) => {
     cameraInfo: cameraInfo
   };
 
-  axiosPost("/utils/assignUnmatchedCamera", "assign an unmatched camera", payload).finally(
-    () => (assigningCamera.value = false)
-  );
+  await axiosPost("/utils/assignUnmatchedCamera", "assign an unmatched camera", payload);
+  assigningCamera.value = false;
 };
 
 const deactivatingModule = ref(false);
-const deactivateModule = (cameraUniqueName: string) => {
+const deactivateModule = async (cameraUniqueName: string) => {
   if (deactivatingModule.value) return;
   deactivatingModule.value = true;
-  axiosPost("/utils/unassignCamera", "unassign a camera", { cameraUniqueName: cameraUniqueName }).finally(
-    () => (deactivatingModule.value = false)
-  );
+  await axiosPost("/utils/unassignCamera", "unassign a camera", { cameraUniqueName: cameraUniqueName });
+  deactivatingModule.value = false;
 };
 
 const confirmDeleteDialog = ref({ show: false, nickname: "", cameraUniqueName: "" });
 const deletingCamera = ref<string | null>(null);
 
-const deleteThisCamera = (cameraUniqueName: string) => {
+const deleteThisCamera = async (cameraUniqueName: string) => {
   if (deletingCamera.value) return;
   deletingCamera.value = cameraUniqueName;
-  axiosPost("/utils/nukeOneCamera", "delete a camera", { cameraUniqueName: cameraUniqueName }).finally(() => {
-    deletingCamera.value = null;
-  });
+  await axiosPost("/utils/nukeOneCamera", "delete a camera", { cameraUniqueName: cameraUniqueName });
+  deletingCamera.value = null;
 };
 
-const cameraConnected = (uniquePath: string): boolean => {
+const cameraConnected = (uniquePath: string | undefined): boolean => {
+  if (!uniquePath) return false;
   return (
     useStateStore().vsmState.allConnectedCameras.find((it) => cameraInfoFor(it).uniquePath === uniquePath) !== undefined
   );
@@ -105,23 +99,6 @@ const setCameraView = (camera: PVCameraInfo | null, isConnected: boolean | null)
   viewingCamera.value = [camera, isConnected];
 };
 
-/**
- * Get the connection-type-specific camera info from the given PVCameraInfo object.
- */
-const cameraInfoFor = (camera: PVCameraInfo | null): PVUsbCameraInfo | PVCSICameraInfo | PVFileCameraInfo | any => {
-  if (!camera) return null;
-  if (camera.PVUsbCameraInfo) {
-    return camera.PVUsbCameraInfo;
-  }
-  if (camera.PVCSICameraInfo) {
-    return camera.PVCSICameraInfo;
-  }
-  if (camera.PVFileCameraInfo) {
-    return camera.PVFileCameraInfo;
-  }
-  return {};
-};
-
 /**
  * Find the PVCameraInfo currently occupying the same uniquePath as the the given module
  */
diff --git a/photon-client/tsconfig.config.json b/photon-client/tsconfig.config.json
deleted file mode 100644
index 3a6fd70208..0000000000
--- a/photon-client/tsconfig.config.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.json",
-  "include": ["vite.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node"]
-  }
-}
diff --git a/photon-client/tsconfig.json b/photon-client/tsconfig.json
index 9b14ae6243..f1b6608e70 100644
--- a/photon-client/tsconfig.json
+++ b/photon-client/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "vite.config.ts", "playwright.config.ts", "src/**/*", "src/**/*.vue", "tests/**/*"],
   "compilerOptions": {
-    "moduleResolution": "node",
-    "noImplicitAny": false,
+    "moduleResolution": "bundler",
+    "noImplicitAny": true,
     "strict": true,
     "removeComments": true,
     "sourceMap": true,
@@ -14,9 +14,4 @@
       "@/*": ["./src/*"]
     }
   },
-  "references": [
-    {
-      "path": "./tsconfig.config.json"
-    }
-  ]
 }