null checks

.prettierignore

@@ -18,3 +18,5 @@ pnpm-lock.yaml
 yarn.lock
 
 context_length.json
+
+.claude

src/lib/components/inference-playground/checkpoints-menu.svelte

@@ -93,7 +93,7 @@
 								{/if}
 								{#each conversations as { messages }, i}
 									<span class={["text-gray-800 dark:text-gray-200"]}>
-										{messages.length} message{messages.length === 1 ? "" : "s"}
+										{messages?.length || 0} message{(messages?.length || 0) === 1 ? "" : "s"}
 									</span>
 									{#if multiple && i === 0}
 										<span class="text-gray-500">|</span>
@@ -139,7 +139,7 @@
 								{...tooltip.arrow}
 							></div>
 							{#each conversations as conversation, i}
-								{@const msgs = conversation.messages}
+								{@const msgs = conversation.messages || []}
 								{@const sliced = msgs.slice(0, 4)}
 								<div
 									class={[

src/lib/components/inference-playground/code-snippets.svelte

@@ -112,7 +112,6 @@
 		python: getSnippet({ lang: "python", tokenStr, conversation }),
 		http: getSnippet({ lang: "sh", tokenStr, conversation }),
 	} as Record<Language, GetInferenceSnippetReturn>);
-	$inspect(snippetsByLang);
 
 	const selectedSnippet = $derived(snippetsByLang[lang][selectedSnippetIdxByLang[lang]]);
 

src/lib/components/inference-playground/conversation.svelte

@@ -22,7 +22,7 @@
 	const atBottom = $derived(scrollState.arrived.bottom);
 
 	watch(
-		() => conversation.data.messages.at(-1)?.content,
+		() => conversation.data.messages?.at(-1)?.content,
 		() => {
 			const shouldScroll = atBottom && !scrollState.isScrolling;
 			if (!shouldScroll) return;
@@ -37,7 +37,7 @@
 	);
 
 	function addMessage() {
-		const msgs = conversation.data.messages.slice();
+		const msgs = conversation.data.messages?.slice() || [];
 		conversation.update({
 			...conversation.data,
 			messages: [
@@ -52,7 +52,7 @@
 
 	async function regenMessage(idx: number) {
 		// TODO: migrate to new logic
-		const msg = conversation.data.messages[idx];
+		const msg = conversation.data.messages?.[idx];
 		if (!msg) return;
 		if (msg.role === "user") {
 			await conversation.deleteMessages(idx + 1);
@@ -71,12 +71,12 @@
 	bind:this={messageContainer}
 >
 	{#if !viewCode}
-		{#each conversation.data.messages as message, index}
+		{#each conversation.data.messages || [] as message, index}
 			<Message
 				{message}
 				{index}
 				{conversation}
-				autofocus={index === conversation.data.messages.length - 1}
+				autofocus={index === (conversation.data.messages?.length || 0) - 1}
 				onDelete={() => conversation.deleteMessage(index)}
 				onRegen={() => regenMessage(index)}
 			/>

src/lib/components/inference-playground/message.svelte

@@ -28,7 +28,7 @@
 	};
 
 	const { index, conversation, message, autofocus, onDelete, onRegen }: Props = $props();
-	const isLast = $derived(index === conversation.data.messages.length - 1);
+	const isLast = $derived(index === (conversation.data.messages?.length || 0) - 1);
 
 	const autosized = new TextareaAutosize();
 	const shouldStick = $derived(autosized.textareaHeight > 92);

src/lib/state/conversations.svelte.ts

@@ -127,12 +127,13 @@ export class ConversationClass {
 	addMessage = async (message: ConversationMessage) => {
 		this.update({
 			...this.data,
-			messages: [...this.data.messages, snapshot(message)],
+			messages: [...(this.data.messages || []), snapshot(message)],
 		});
 	};
 
 	updateMessage = async (args: { index: number; message: Partial<ConversationMessage> }) => {
-		const prev = await poll(() => this.data.messages[args.index], { interval: 10, maxAttempts: 200 });
+		if (!this.data.messages) return;
+		const prev = await poll(() => this.data.messages?.[args.index], { interval: 10, maxAttempts: 200 });
 
 		if (!prev) return;
 
@@ -147,6 +148,7 @@ export class ConversationClass {
 	};
 
 	deleteMessage = async (idx: number) => {
+		if (!this.data.messages) return;
 		const imgKeys = this.data.messages.flatMap(m => m.images).filter(isString);
 		await Promise.all([
 			...imgKeys.map(k => images.delete(k)),
@@ -158,6 +160,7 @@ export class ConversationClass {
 	};
 
 	deleteMessages = async (from: number) => {
+		if (!this.data.messages) return;
 		const sliced = this.data.messages.slice(0, from);
 		const notSliced = this.data.messages.slice(from);
 
@@ -179,7 +182,7 @@ export class ConversationClass {
 			if (this.data.streaming) {
 				let addedMessage = false;
 				const streamingMessage = { role: "assistant", content: "" };
-				const index = this.data.messages.length;
+				const index = this.data.messages?.length || 0;
 
 				await handleStreamingResponse(
 					this,
@@ -368,7 +371,7 @@ class Conversations {
 
 		for (let idx = 0; idx < conversations.length; idx++) {
 			const conversation = conversations[idx];
-			if (!conversation || conversation.data.messages.at(-1)?.role !== "assistant") continue;
+			if (!conversation || conversation.data.messages?.at(-1)?.role !== "assistant") continue;
 
 			let prefix = "";
 			if (this.active.length === 2) {

src/lib/utils/business.svelte.ts

@@ -128,7 +128,7 @@ async function getCompletionMetadata(
 
 	const messages: ConversationMessage[] = [
 		...(isSystemPromptSupported(model) && systemMessage?.length ? [{ role: "system", content: systemMessage }] : []),
-		...data.messages,
+		...(data.messages || []),
 	];
 	const parsed = await Promise.all(messages.map(parseMessage));