Checkpoints (#73)

Co-authored-by: Victor Muštar (aider) <[email protected]>

package.json

@@ -37,7 +37,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.28.0",
+		"melt": "^0.29.2",
 		"openai": "^4.90.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",

pnpm-lock.yaml

@@ -85,8 +85,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.28.0
-        version: 0.28.0(@floating-ui/[email protected])([email protected])
+        specifier: ^0.29.2
+        version: 0.29.2(@floating-ui/[email protected])([email protected])
       openai:
         specifier: ^4.90.0
         version: 4.90.0
@@ -1098,6 +1098,10 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
@@ -1642,8 +1646,8 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  melt@0.28.0:
-    resolution: {integrity: sha512-kiqaTgNB/IkADmUfJZKROqQ3z+isal8LjLhckQANqjfjggIosHM8M7RO3Og7IQ12zK06nLnwanL80SuTPhblrw==}
+  melt@0.29.2:
+    resolution: {integrity: sha512-x0qR8yE8+x2Bu6s1DRJNAxPBN295ANfTVJ/8UcWsNm/hb7M14ws9G64OFpRExZcI45kdh2KZb1LwHFmNsLwUbQ==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -1700,8 +1704,8 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  [email protected].2:
-    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
+  [email protected].5:
+    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
     engines: {node: ^18 || >=20}
     hasBin: true
 
@@ -3153,6 +3157,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3716,11 +3722,12 @@ snapshots:
 
   [email protected]: {}
 
-  melt@0.28.0(@floating-ui/[email protected])([email protected]):
+  melt@0.29.2(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
+      dequal: 2.0.3
       jest-axe: 9.0.0
-      nanoid: 5.1.2
+      nanoid: 5.1.5
       runed: 0.23.4([email protected])
       svelte: 5.23.0
 
@@ -3766,7 +3773,7 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected].2: {}
+  [email protected].5: {}
 
   [email protected]: {}
 

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

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { checkpoints } from "$lib/state/checkpoints.svelte";
+	import { session } from "$lib/state/session.svelte.js";
+	import { Popover } from "melt/builders";
+	import { Tooltip } from "melt/components";
+	import { fly } from "svelte/transition";
+	import IconHistory from "~icons/carbon/recently-viewed";
+	import IconDelete from "~icons/carbon/trash-can";
+	import IconStar from "~icons/carbon/star";
+	import IconStarFilled from "~icons/carbon/star-filled";
+	import IconCompare from "~icons/carbon/compare";
+
+	const popover = new Popover({
+		floatingConfig: {
+			offset: { crossAxis: -12 },
+		},
+	});
+
+	const projCheckpoints = $derived(checkpoints.for(session.project.id));
+</script>
+
+<button class="btn relative size-[32px] p-0" {...popover.trigger}>
+	<IconHistory />
+	{#if projCheckpoints.length > 0}
+		<div class="absolute -top-1 -right-1 size-2.5 rounded-full bg-amber-500" aria-label="Project has checkpoints"></div>
+	{/if}
+</button>
+
+<div
+	class="mb-2 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+	{...popover.content}
+>
+	<div class="max-h-120 w-80 overflow-x-clip overflow-y-auto p-3 pb-1">
+		<div class="mb-2 flex items-center justify-between px-1">
+			<h3 class="text-sm font-medium dark:text-white">Checkpoints</h3>
+			<button
+				class="rounded-lg bg-blue-600 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-blue-700"
+				onclick={() => checkpoints.commit(session.project.id)}
+			>
+				Create new
+			</button>
+		</div>
+
+		{#each projCheckpoints as checkpoint (checkpoint.id)}
+			{@const state = checkpoint.projectState}
+			{@const multiple = state.conversations.length > 1}
+			<Tooltip
+				openDelay={0}
+				floatingConfig={{
+					computePosition: {
+						placement: "right",
+					},
+					offset: {
+						mainAxis: 16,
+					},
+				}}
+				forceVisible
+			>
+				{#snippet children(tooltip)}
+					<div
+						class="mb-2 flex w-full items-center rounded-md px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+						{...tooltip.trigger}
+					>
+						<button
+							class="flex flex-1 flex-col text-left text-sm transition-colors"
+							onclick={() => checkpoints.restore(session.project.id, checkpoint)}
+						>
+							<span class="font-medium text-gray-400">{checkpoint.timestamp}</span>
+
+							<p class="mt-0.5 flex items-center gap-2 text-sm">
+								{#if multiple}
+									<IconCompare class="text-xs text-gray-400" />
+								{/if}
+								{#each state.conversations as { messages }, i}
+									<span class={["text-gray-200"]}>
+										{messages.length} messages
+									</span>
+									{#if multiple && i === 0}
+										<span class="text-gray-500">|</span>
+									{/if}
+								{/each}
+							</p>
+						</button>
+
+						<button
+							class="mr-0.5 grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
+							onclick={e => {
+								e.stopPropagation();
+								checkpoints.toggleFavorite(session.project.id, checkpoint);
+							}}
+						>
+							{#if checkpoint.favorite}
+								<IconStarFilled class="text-yellow-500" />
+							{:else}
+								<IconStar />
+							{/if}
+						</button>
+						<button
+							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
+							onclick={e => {
+								e.stopPropagation();
+								checkpoints.delete(session.project.id, checkpoint);
+							}}
+						>
+							<IconDelete />
+						</button>
+					</div>
+
+					{#if tooltip.open}
+						<div
+							class={["flex rounded-xl border border-gray-700 bg-gray-800 p-2 shadow"]}
+							{...tooltip.content}
+							transition:fly={{ x: -2 }}
+						>
+							<div class="size-4 rounded-tl border-t border-l border-gray-700" {...tooltip.arrow}></div>
+							{#each state.conversations as conversation, i}
+								{@const msgs = conversation.messages.filter(m => m.content?.trim())}
+								{@const sliced = msgs.slice(0, 4)}
+								<div
+									class={[
+										"p-2",
+										multiple ? "w-52" : "w-72",
+										i === 0 && multiple && "border-r border-gray-200 dark:border-gray-700",
+									]}
+								>
+									<p class="text-2xs pl-1.5 font-mono font-medium text-gray-500 uppercase">
+										temp: {conversation.config.temperature}
+										| max tokens: {conversation.config.max_tokens}
+									</p>
+									{#each sliced as msg, i}
+										{@const isLast = i === sliced.length - 1}
+										<div class="flex flex-col gap-1 p-2">
+											<p class="font-mono text-xs font-medium text-gray-400 uppercase">{msg.role}</p>
+											<p class="line-clamp-2 text-sm">{msg.content}</p>
+										</div>
+										{#if !isLast}
+											<div class="my-2 h-px w-full bg-gray-200 dark:bg-gray-700"></div>
+										{/if}
+									{/each}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				{/snippet}
+			</Tooltip>
+		{:else}
+			<div class="flex flex-col items-center gap-2 py-3">
+				<span class="text-gray-500 text-sm">No checkpoints available</span>
+			</div>
+		{/each}
+	</div>
+</div>

src/lib/components/inference-playground/hf-token-modal.svelte

@@ -103,7 +103,7 @@
 			<!-- Modal footer -->
 			<div class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
 				<a
-					href="https://huggingface.co/settings/tokens/new?globalPermissions=inference.serverless.write&tokenType=fineGrained"
+					href="https://huggingface.co/settings/tokens/new?ownUserPermissions=inference.serverless.write&tokenType=fineGrained"
 					tabindex="-1"
 					target="_blank"
 					class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"

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

@@ -2,6 +2,7 @@
 	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 IconCaret from "~icons/carbon/chevron-down";
 	import IconCross from "~icons/carbon/close";
 	import IconEdit from "~icons/carbon/edit";
@@ -9,6 +10,8 @@
 	import IconDelete from "~icons/carbon/trash-can";
 	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;
@@ -50,6 +53,7 @@
 	</button>
 
 	<div class="flex items-center gap-2">
+		<CheckpointsMenu />
 		{#if isDefault}
 			<Tooltip>
 				{#snippet trigger(tooltip)}
@@ -79,11 +83,22 @@
 <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
 	{#each session.$.projects as { name, id } (id)}
 		{@const option = select.getOption(id)}
+		{@const hasCheckpoints = checkpoints.for(id).length > 0}
 		<div {...option} class="group block w-full p-1 text-sm dark:text-white">
 			<div
 				class="flex items-center gap-2 rounded-md py-1.5 pr-1 pl-2 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 			>
-				{name}
+				<div class="flex items-center gap-2">
+					{name}
+					{#if hasCheckpoints}
+						<div
+							class="text-3xs grid aspect-square place-items-center rounded bg-yellow-400/25 p-0.5 text-yellow-400"
+							aria-label="Project has checkpoints"
+						>
+							<IconHistory />
+						</div>
+					{/if}
+				</div>
 				{#if id !== "default"}
 					<div class="ml-auto flex items-center gap-1">
 						<button

src/lib/components/toaster.svelte

@@ -14,7 +14,6 @@
 
 		const toastEls = Array.from(rootEl.querySelectorAll("[data-melt-toaster-toast-content]"));
 		toastHeights = toastEls.map(el => el.clientHeight);
-		// console.log(toastHeights);
 	});
 
 	const isComparing = $derived(session.project.conversations.length > 1);

src/lib/state/checkpoints.svelte.ts

@@ -0,0 +1,80 @@
+import type { Project } from "$lib/types.js";
+import { PersistedState } from "runed";
+import { session } from "./session.svelte";
+
+const ls_key = "checkpoints";
+
+type Checkpoint = {
+	id: string;
+	timestamp: string;
+	projectState: Project;
+	favorite?: boolean;
+};
+
+class Checkpoints {
+	#checkpoints = new PersistedState<Record<Project["id"], Checkpoint[]>>(
+		ls_key,
+		{},
+		{
+			serializer: {
+				serialize: JSON.stringify,
+				deserialize: v => {
+					return JSON.parse(v);
+				},
+			},
+		}
+	);
+
+	for(projectId: Project["id"]) {
+		return (
+			this.#checkpoints.current[projectId]?.toSorted((a, b) => {
+				return b.timestamp.localeCompare(a.timestamp);
+			}) ?? []
+		);
+	}
+
+	commit(projectId: Project["id"]) {
+		const project = session.$.projects.find(p => p.id == projectId);
+		if (!project) return;
+		const prev: Checkpoint[] = this.#checkpoints.current[projectId] ?? [];
+		this.#checkpoints.current[projectId] = [
+			...prev,
+			{ projectState: project, timestamp: new Date().toLocaleString(), id: crypto.randomUUID() },
+		];
+	}
+
+	restore(projectId: Project["id"], checkpoint: Checkpoint) {
+		const project = session.$.projects.find(p => p.id == projectId);
+		if (!project) return;
+
+		session.$.activeProjectId = projectId;
+		session.project = checkpoint.projectState;
+	}
+
+	toggleFavorite(projectId: Project["id"], checkpoint: Checkpoint) {
+		const prev: Checkpoint[] = this.#checkpoints.current[projectId] ?? [];
+		this.#checkpoints.current[projectId] = prev.map(c => {
+			if (c.id == checkpoint.id) {
+				return { ...c, favorite: !c.favorite };
+			}
+			return c;
+		});
+	}
+
+	delete(projectId: Project["id"], checkpoint: Checkpoint) {
+		const prev: Checkpoint[] = this.#checkpoints.current[projectId] ?? [];
+		this.#checkpoints.current[projectId] = prev.filter(c => c.id != checkpoint.id);
+	}
+
+	clear(projectId: Project["id"]) {
+		this.#checkpoints.current[projectId] = [];
+	}
+
+	migrate(from: Project["id"], to: Project["id"]) {
+		const fromArr = this.#checkpoints.current[from] ?? [];
+		this.#checkpoints.current[to] = [...fromArr];
+		this.#checkpoints.current[from] = [];
+	}
+}
+
+export const checkpoints = new Checkpoints();

src/lib/state/session.svelte.ts

@@ -12,6 +12,7 @@ import {
 import { safeParse } from "$lib/utils/json.js";
 import typia from "typia";
 import { models } from "./models.svelte";
+import { checkpoints } from "./checkpoints.svelte";
 
 const LOCAL_STORAGE_KEY = "hf_inference_playground_session";
 
@@ -148,6 +149,8 @@ class SessionState {
 			id: crypto.randomUUID(),
 		};
 
+		checkpoints.migrate(defaultProject.id, project.id);
+
 		defaultProject.conversations = [getDefaults().defaultConversation];
 
 		this.addProject(project);
@@ -169,6 +172,7 @@ class SessionState {
 
 		const currProject = projects.find(p => p.id === this.$.activeProjectId);
 		this.#setAnySession({ ...this.$, projects, activeProjectId: currProject?.id ?? projects[0]?.id });
+		checkpoints.clear(id);
 	};
 
 	updateProject = (id: string, data: Partial<Project>) => {

src/lib/utils/string.ts

@@ -0,0 +1,6 @@
+export function pluralize(word: string, count: number): string {
+	if (count === 1) {
+		return word;
+	}
+	return word + "s";
+}