diff --git a/src/app.d.ts b/src/app.d.ts
index addc02a..6869677 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,3 +1,4 @@
+/// <reference lib="dom.asynciterable" />
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7f2dab2..ee55d9f 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -15,7 +15,8 @@ export interface StreamSummary {
 export interface Stream extends StreamSummary {
     format: string;
     description: string | null;
-    descriptionHtml: string;
+    // rendered at page load, so absent straight out of the database
+    descriptionHtml?: string;
     tracks: Track[];
 }
 
diff --git a/src/routes/streams/+layout.svelte b/src/routes/streams/+layout.svelte
index 3b40de4..2f439d5 100644
--- a/src/routes/streams/+layout.svelte
+++ b/src/routes/streams/+layout.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import Sidebar from './Sidebar.svelte';
     import Footer from './Footer.svelte';
+    import { untrack } from 'svelte';
     import { setStreamContext, StreamContext } from '$lib/streamContext.svelte.ts';
 
     // streams are grabbed from the server here, then accessed throughout the rest
     // of the components through the svelte context api
     const { data, children } = $props();
-    setStreamContext(new StreamContext(data.streams));
+    setStreamContext(new StreamContext(untrack(() => data.streams)));
 </script>
 
 <div id="mainContainer">
diff --git a/src/routes/streams/TagSelect.svelte b/src/routes/streams/TagSelect.svelte
index 70a4358..27c01a6 100644
--- a/src/routes/streams/TagSelect.svelte
+++ b/src/routes/streams/TagSelect.svelte
@@ -24,7 +24,7 @@
         });
     }
 
-    function handleChange(e) {
+    function handleChange(e: CustomEvent) {
         if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
         else
             checked.includes(e.detail.value)
@@ -33,7 +33,7 @@
         handleSelectable();
     }
 
-    let itemFilter = function (label, filterText, option) {
+    let itemFilter = function (label: string, filterText: string, option: { value: string }) {
         return (
             remainingTags.includes(option['value']) &&
             label.toLowerCase().includes(filterText.toLowerCase())
@@ -55,14 +55,13 @@
     --max-height="42px"
     listOffset={0}
 >
-    {#snippet item({ item })}
-        <div class="item">
-            <label for={item.value}>
-                <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
-                {item.label}
-            </label>
-        </div>
-    {/snippet}
+    <!-- svelte-select 5.8.3 exposes this as a slot, not a snippet prop -->
+    <div class="item" slot="item" let:item>
+        <label for={item.value}>
+            <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
+            {item.label}
+        </label>
+    </div>
 </Select>
 
 <style>
diff --git a/src/routes/streams/[stream_id]/+page.server.ts b/src/routes/streams/[stream_id]/+page.server.ts
index 5a2a4de..e1aaf82 100644
--- a/src/routes/streams/[stream_id]/+page.server.ts
+++ b/src/routes/streams/[stream_id]/+page.server.ts
@@ -4,9 +4,13 @@ import { error } from '@sveltejs/kit';
 import { getStreamInfo } from '$lib/database.ts';
 import { dev } from '$app/environment';
 import { STREAM_JSON_LOCATION } from '$env/static/private';
+import type { Actions } from './$types';
 
-let getOriginalJson, writeSideloadJson;
-export let actions;
+type SideloadJson = { title: unknown; description: unknown; tags: unknown };
+
+let getOriginalJson: (streamId: string) => string;
+let writeSideloadJson: (streamId: string, newJson: SideloadJson) => void;
+export let actions: Actions | undefined;
 
 // utilities for manipulating original stream JSONs
 if (dev) {
@@ -30,11 +34,11 @@ if (dev) {
     actions = {
         default: async ({ params, request }) => {
             const data = await request.formData();
-            // let newJson = JSON.parse(getOriginalJson(params.stream_id));
-            const newJson = {};
-            newJson['title'] = data.get('title');
-            newJson['description'] = data.get('description');
-            newJson['tags'] = data.getAll('tags');
+            const newJson: SideloadJson = {
+                title: data.get('title'),
+                description: data.get('description'),
+                tags: data.getAll('tags')
+            };
             writeSideloadJson(params.stream_id, newJson);
         }
     };
diff --git a/src/routes/streams/[stream_id]/MetadataEditor.svelte b/src/routes/streams/[stream_id]/MetadataEditor.svelte
index 5d3d9e3..63a29bb 100644
--- a/src/routes/streams/[stream_id]/MetadataEditor.svelte
+++ b/src/routes/streams/[stream_id]/MetadataEditor.svelte
@@ -4,10 +4,10 @@
 
     let { original = $bindable() } = $props();
 
-    let tagMap = new Map();
+    let tagMap = new Map<string, boolean>();
 
     // Create a mapping of tags and their checked status
-    let reloadTags = (original) => {
+    let reloadTags = (original: { tags: string[] }) => {
         tagList.forEach((tag) => {
             tagMap.set(tag, original.tags.includes(tag));
         });
diff --git a/src/routes/streams/[stream_id]/Player.svelte b/src/routes/streams/[stream_id]/Player.svelte
index d1df251..09166de 100644
--- a/src/routes/streams/[stream_id]/Player.svelte
+++ b/src/routes/streams/[stream_id]/Player.svelte
@@ -3,10 +3,10 @@
 	 ISC License
 -->
 
-<script module>
-    let getAudio = null;
+<script module lang="ts">
+    let getAudio: () => HTMLAudioElement;
 
-    export function jumpToTrack(s) {
+    export function jumpToTrack(s: number) {
         getAudio().currentTime = s;
         getAudio().play();
     }
@@ -28,7 +28,7 @@
         duration?: number;
         muted?: boolean;
         volume?: number;
-        preload?: string;
+        preload?: 'none' | 'metadata' | 'auto';
         iconColor?: string;
         textColor?: string;
         barPrimaryColor?: string;
@@ -64,7 +64,7 @@
     };
 
     let currentTime = $state(0);
-    let tooltip = $state();
+    let tooltip = $state<HTMLElement>();
     let tooltipX = $state(0);
     let tooltipY = $state(0);
     let showTooltip = $state(false);
@@ -73,10 +73,10 @@
     let seeking = $state(false);
     let volumeSeeking = $state(false);
     let pendingSeekTime = $state<number | null>(null);
-    let songBar = $state();
-    let volumeBar = $state();
-    let innerWidth = $state();
-    let innerHeight = $state();
+    let songBar = $state<HTMLProgressElement>();
+    let volumeBar = $state<HTMLProgressElement>();
+    let innerWidth = $state(0);
+    let innerHeight = $state(0);
     let isSafari = $state(false);
 
     onMount(() => {
@@ -125,14 +125,14 @@
         }
     }
 
-    function seek(event, bounds) {
+    function seek(event: MouseEvent, bounds: DOMRect) {
         let x = event.clientX - bounds.left;
         return Math.min(Math.max(x / bounds.width, 0), 1);
     }
 
     // exponential volume bar
     // default is linear, which doesn't correspond to human hearing
-    function setVolume(volume) {
+    function setVolume(volume: number) {
         if (volume != 0) {
             audio.volume = Math.pow(10, 2.5 * (volume - 1));
         } else {
@@ -172,12 +172,12 @@
         return () => audio.removeEventListener('loadedmetadata', onLoadedMetadata);
     });
 
-    function updateSeekVisual(event) {
+    function updateSeekVisual(event: MouseEvent) {
         if (!songBar) return;
         pendingSeekTime = seek(event, songBar.getBoundingClientRect()) * duration;
     }
 
-    function seekVolume(event) {
+    function seekVolume(event: MouseEvent) {
         if (!volumeBar) return;
         volume = seek(event, volumeBar.getBoundingClientRect());
         setVolume(volume);
@@ -185,9 +185,9 @@
         muted = false;
     }
 
-    function formatSeconds(totalSeconds, forceHours = false) {
+    function formatSeconds(totalSeconds: number, forceHours = false) {
         if (isNaN(totalSeconds)) return 'No Data';
-        totalSeconds = parseInt(totalSeconds, 10);
+        totalSeconds = Math.trunc(totalSeconds);
         const hours = Math.floor(totalSeconds / 3600);
         const minutes = Math.floor(totalSeconds / 60) % 60;
         const seconds = totalSeconds % 60;
@@ -198,8 +198,9 @@
             .join(':');
     }
 
-    function seekTooltip(event) {
-        if (!inlineTooltip) {
+    function seekTooltip(event: MouseEvent) {
+        if (!songBar) return;
+        if (!inlineTooltip && tooltip) {
             let tooltipBounds = tooltip.getBoundingClientRect();
             tooltipX = Math.min(event.clientX + 10, innerWidth - tooltipBounds.width);
             tooltipY = Math.min(songBar.offsetTop - 30, innerHeight - tooltipBounds.height);
@@ -216,7 +217,7 @@
         seekText = formatSeconds(seekValue);
     }
 
-    function trackMouse(event) {
+    function trackMouse(event: MouseEvent) {
         if (seeking) updateSeekVisual(event);
         if (showTooltip && !disableTooltip) seekTooltip(event);
         if (volumeSeeking) seekVolume(event);
diff --git a/src/routes/streams/[stream_id]/original/+server.ts b/src/routes/streams/[stream_id]/original/+server.ts
index 895451e..5b6a1a1 100644
--- a/src/routes/streams/[stream_id]/original/+server.ts
+++ b/src/routes/streams/[stream_id]/original/+server.ts
@@ -1,8 +1,9 @@
 import fs from 'fs';
 import { json } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
 
-export let GET;
+export let GET: RequestHandler | undefined;
 
 if (process.env.NODE_ENV === 'development') {
     const jsonFolder = './db/stream_json/';
diff --git a/tsconfig.json b/tsconfig.json
index 5512701..a2e533e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
         "allowJs": true,
+        "allowImportingTsExtensions": true,
         "checkJs": true,
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,