ask before moving checkpoints

src/app.css

@@ -93,3 +93,14 @@ body {
 body.dark {
 	color-scheme: dark;
 }
+
+@layer base {
+	:focus-visible {
+		outline: 3px solid var(--color-blue-400);
+		outline-offset: 2px;
+
+		@variant dark {
+			outline-color: var(--color-blue-500);
+		}
+	}
+}

src/lib/components/dialog.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
+	import type { Snippet } from "svelte";
+	import type { EventHandler } from "svelte/elements";
+	import IconCross from "~icons/carbon/close";
+
+	interface Props {
+		title: string | Snippet;
+		children: Snippet;
+		footer?: Snippet;
+		onClose?: () => void;
+		open: boolean;
+		onSubmit?: EventHandler<SubmitEvent>;
+	}
+
+	let { children, onClose, open, title, footer, onSubmit }: Props = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	$effect(() => {
+		if (open) {
+			dialog?.showModal();
+		} else {
+			dialog?.close();
+		}
+	});
+</script>
+
+<dialog bind:this={dialog} onclose={onClose}>
+	{#if open}
+		<form class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85" onsubmit={onSubmit}>
+			<div class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900" use:clickOutside={() => onClose?.()}>
+				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
+					{#if typeof title === "string"}
+						<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
+							{title}
+						</h3>
+					{:else}
+						{@render title()}
+					{/if}
+					<button
+						type="button"
+						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+						onclick={onClose}
+					>
+						<div class="text-xl">
+							<IconCross />
+						</div>
+						<span class="sr-only">Close modal</span>
+					</button>
+				</div>
+				<!-- Modal body -->
+				<div class="p-4 md:p-5">
+					{@render children()}
+				</div>
+
+				{#if footer}
+					<!-- Modal footer -->
+					<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
+						{@render footer()}
+					</div>
+				{/if}
+			</div>
+		</form>
+	{/if}
+</dialog>

src/lib/components/inference-playground/custom-provider-select.svelte

@@ -88,13 +88,13 @@
 
 <div {...select.content} class="rounded-lg border bg-gray-100 outline-hidden dark:border-gray-700 dark:bg-gray-800">
 	{#each providers as p}
-		<button {...select.getOption(p)} class="group block w-full p-1 text-sm dark:text-white" type="button">
+		<div {...select.getOption(p)} class="group block w-full p-1 text-sm dark:text-white">
 			<div
 				class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 			>
 				<IconProvider provider={p} />
 				{formatName(p)}
 			</div>
-		</button>
+		</div>
 	{/each}
 </div>

src/lib/components/inference-playground/model-selector-modal.svelte

@@ -93,7 +93,7 @@
 		>
 			{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}
 				{@const [nameSpace, modelName] = model.id.split("/")}
-				<button
+				<div
 					class="flex w-full cursor-pointer items-center px-2 py-1.5 text-sm
 						data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800"
 					data-model
@@ -165,7 +165,7 @@
 							<span class="text-sm">Edit</span>
 						</Tooltip>
 					{/if}
-				</button>
+				</div>
 			{/snippet}
 			{#if trending.length > 0}
 				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
@@ -179,7 +179,7 @@
 					{@render modelEntry(model, false)}
 				{/each}
 			{/if}
-			<button
+			<div
 				class="flex w-full cursor-pointer items-center gap-2 px-2 py-1.5 text-sm text-gray-500 data-[highlighted]:bg-blue-500/15 data-[highlighted]:text-blue-600 dark:text-gray-400 dark:data-[highlighted]:text-blue-300"
 				{...combobox.getOption("__custom__", () => {
 					onClose?.();
@@ -192,7 +192,7 @@
 			>
 				<IconAdd class="rounded bg-blue-500/10 text-blue-600" />
 				Add a custom endpoint
-			</button>
+			</div>
 			{#if other.length > 0}
 				<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other models</div>
 				{#each other as model}

src/lib/components/inference-playground/project-select.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+	import { autofocus } from "$lib/actions/autofocus.js";
+	import { checkpoints } from "$lib/state/checkpoints.svelte";
 	import { session } from "$lib/state/session.svelte.js";
 	import { cn } from "$lib/utils/cn.js";
 	import { Select } from "melt/builders";
-	import IconHistory from "~icons/carbon/recently-viewed";
+	import type { EventHandler } from "svelte/elements";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import IconCross from "~icons/carbon/close";
 	import IconEdit from "~icons/carbon/edit";
+	import IconHistory from "~icons/carbon/recently-viewed";
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
+	import Dialog from "../dialog.svelte";
 	import { prompt } from "../prompts.svelte";
 	import Tooltip from "../tooltip.svelte";
 	import CheckpointsMenu from "./checkpoints-menu.svelte";
-	import { checkpoints } from "$lib/state/checkpoints.svelte";
 
 	interface Props {
 		class?: string;
@@ -29,9 +32,34 @@
 		sameWidth: true,
 	});
 
-	async function saveProject() {
-		session.saveProject((await prompt("Set project name")) || "Project #" + (session.$.projects.length + 1));
+	type SaveDialogState = {
+		open: boolean;
+		moveCheckpoints: boolean;
+		name: string;
+	};
+
+	const defaultSdState: SaveDialogState = {
+		open: false,
+		moveCheckpoints: true,
+		name: "",
+	};
+
+	let sdState = $state(defaultSdState);
+	const projectPlaceholder = $derived(`Project #${session.$.projects.length}`);
+
+	function openSaveDialog() {
+		sdState = { ...defaultSdState, open: true };
 	}
+
+	const saveDialog = async function (e) {
+		e.preventDefault();
+		session.saveProject({
+			...sdState,
+			name: sdState.name || projectPlaceholder,
+		});
+
+		sdState = { ...defaultSdState };
+	} satisfies EventHandler<SubmitEvent>;
 </script>
 
 <div class={cn("flex w-full items-stretch gap-2 ", classNames)}>
@@ -57,11 +85,11 @@
 		{#if isDefault}
 			<Tooltip>
 				{#snippet trigger(tooltip)}
-					<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={saveProject}>
+					<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={openSaveDialog}>
 						<IconSave />
 					</button>
 				{/snippet}
-				Save to Project
+				Save as Project
 			</Tooltip>
 		{:else}
 			<Tooltip>
@@ -92,7 +120,7 @@
 					{name}
 					{#if hasCheckpoints}
 						<div
-							class="text-3xs grid aspect-square place-items-center rounded bg-yellow-400/25 p-0.5 text-yellow-400"
+							class="text-3xs grid aspect-square place-items-center rounded bg-yellow-300 p-0.5 text-yellow-700 dark:bg-yellow-400/25 dark:text-yellow-400"
 							aria-label="Project has checkpoints"
 						>
 							<IconHistory />
@@ -125,3 +153,29 @@
 		</div>
 	{/each}
 </div>
+
+<Dialog title="Set project name" open={sdState.open} onClose={() => (sdState.open = false)} onSubmit={saveDialog}>
+	<label class="flex flex-col gap-2 font-medium text-gray-900 dark:text-white">
+		<p>Project name</p>
+		<input
+			bind:value={sdState.name}
+			placeholder={projectPlaceholder}
+			use:autofocus
+			type="text"
+			class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+		/>
+	</label>
+	<label class="mt-4 flex gap-2 font-medium text-gray-900 dark:text-white">
+		<input bind:checked={sdState.moveCheckpoints} type="checkbox" />
+		<p>Move checkpoints over</p>
+	</label>
+
+	{#snippet footer()}
+		<button
+			type="submit"
+			class="ml-auto rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+		>
+			Submit
+		</button>
+	{/snippet}
+</Dialog>

src/lib/components/inference-playground/provider-select.svelte

@@ -96,14 +96,14 @@
 
 	<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
 		{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
-			<button {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
+			<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
 				<div
 					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 				>
 					<IconProvider {provider} />
 					{formatName(provider)}
 				</div>
-			</button>
+			</div>
 		{/each}
 	</div>
 </div>

src/lib/components/tooltip.svelte

@@ -37,7 +37,7 @@
 {@render trigger(tooltip)}
 
 <div {...tooltip.content} class="rounded-xl bg-white p-0 shadow-xl dark:bg-gray-700">
-	<div {...tooltip.arrow} class="rounded-tl"></div>
+	<div {...tooltip.arrow} class="size-2 rounded-tl"></div>
 	<p class="px-4 py-1 text-gray-700 dark:text-white">{@render children()}</p>
 </div>
 

src/lib/state/session.svelte.ts

@@ -139,17 +139,19 @@ class SessionState {
 		if (typia.is<Session>(s)) this.$ = s;
 	}
 
-	saveProject = (name: string) => {
+	saveProject = (args: { name: string; moveCheckpoints?: boolean }) => {
 		const defaultProject = this.$.projects.find(p => p.id === "default");
 		if (!defaultProject) return;
 
 		const project: Project = {
 			...defaultProject,
-			name,
+			name: args.name,
 			id: crypto.randomUUID(),
 		};
 
-		checkpoints.migrate(defaultProject.id, project.id);
+		if (args.moveCheckpoints) {
+			checkpoints.migrate(defaultProject.id, project.id);
+		}
 
 		defaultProject.conversations = [getDefaults().defaultConversation];