diff --git a/.gitignore b/.gitignore
index cc239aa..b562531 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 dist
 .next
 out
-.vercel
\ No newline at end of file
+.vercel
+*.tsbuildinfo
diff --git a/app/Editor.jsx b/app/Editor.jsx
index e9bfe8b..99ae9eb 100644
--- a/app/Editor.jsx
+++ b/app/Editor.jsx
@@ -29,9 +29,11 @@ export function Editor({
   onBeforeEachRun = () => {},
   autoRun = true,
   toolBarStart = null,
+  toolBarEnd = null,
   pinToolbar = true,
   onDuplicate = null,
   onError = onDefaultError,
+  readonly = false,
 }) {
   const containerRef = useRef(null);
   const editorRef = useRef(null);
@@ -40,8 +42,8 @@ export function Editor({
   useEffect(() => {
     if (containerRef.current) {
       containerRef.current.innerHTML = "";
-      editorRef.current = createEditor(containerRef.current, {code: initialCode, onError});
-      if (autoRun) onRun();
+      editorRef.current = createEditor(containerRef.current, {code: initialCode, onError, readonly});
+      if (autoRun && !readonly) onRun();
     }
     return () => {
       if (editorRef.current) {
@@ -49,7 +51,7 @@ export function Editor({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialCode]);
+  }, [initialCode, readonly]);
 
   useEffect(() => {
     const onInput = (code) => {
@@ -95,7 +97,7 @@ export function Editor({
   }
 
   return (
-    <div className={cn("w-full border border-gray-200 rounded-md")}>
+    <div className={cn("w-full border border-gray-200 rounded-md overflow-hidden")}>
       <div
         className={cn(
           "flex justify-between items-center p-2 border-b border-gray-200 bg-gray-100",
@@ -104,6 +106,7 @@ export function Editor({
       >
         {toolBarStart}
         <div className={cn("flex items-center gap-3")}>
+          {toolBarEnd}
           <button
             onClick={onRun}
             data-tooltip-id="action-tooltip"
diff --git a/app/EditorPage.jsx b/app/EditorPage.jsx
index 90f211a..cfbaa6a 100644
--- a/app/EditorPage.jsx
+++ b/app/EditorPage.jsx
@@ -1,72 +1,47 @@
 "use client";
-import {useState, useEffect, useRef, useCallback, useSyncExternalStore} from "react";
+import {useState, useEffect, useRef, useCallback} from "react";
 import {notFound, useRouter} from "next/navigation";
-import {Pencil} from "lucide-react";
+import {Camera} from "lucide-react";
 import {Editor} from "./Editor.jsx";
-import {getNotebookById, createNotebook, addNotebook, saveNotebook, getNotebooks, duplicateNotebook} from "./api.js";
-import {isDirtyStore, countStore} from "./store.js";
 import {cn} from "./cn.js";
-import {SafeLink} from "./SafeLink.jsx";
 import {BASE_PATH} from "./shared.js";
-
-const UNSET = Symbol("UNSET");
+import {SnapshotsDialog} from "../components/notebooks/SnapshotsDialog.tsx";
+import {useNotebook} from "@/lib/notebooks/hooks.ts";
+import {NotebookTitle} from "../components/notebooks/NotebookTitle.tsx";
+import {EditorPageHero} from "../components/notebooks/EditorPageHero.tsx";
 
 export function EditorPage({id: initialId}) {
   const router = useRouter();
-  const [notebook, setNotebook] = useState(UNSET);
-  const [notebookList, setNotebookList] = useState([]);
-  const [showInput, setShowInput] = useState(false);
-  const [autoRun, setAutoRun] = useState(false);
-  const [id, setId] = useState(initialId);
-  const [initialCode, setInitialCode] = useState(null);
-  const [title, setTitle] = useState("");
-  const titleRef = useRef(null);
-  const count = useSyncExternalStore(countStore.subscribe, countStore.getSnapshot, countStore.getServerSnapshot);
-  const isDirty = useSyncExternalStore(
-    isDirtyStore.subscribe,
-    isDirtyStore.getSnapshot,
-    isDirtyStore.getServerSnapshot,
-  );
-  const prevCount = useRef(id ? count : null); // Last saved count.
-  const isAdded = prevCount.current === count; // Whether the notebook is added to the storage.
+  const {
+    notebook,
+    isDraft,
+    isDirty,
+    initialContent,
+    saveNotebook,
+    updateContent,
+    updateTitle,
+    createSnapshot,
+    restoreContent,
+  } = useNotebook(initialId);
+  const [showSnapshotsDialog, setShowSnapshotsDialog] = useState(false);
   const timer = useRef(null);
 
   const onSave = useCallback(() => {
-    isDirtyStore.setDirty(false);
-    if (isAdded) {
-      saveNotebook(notebook);
-    } else {
-      addNotebook(notebook);
-      prevCount.current = count;
-      const id = notebook.id;
-      setId(id); // Force re-render.
-      window.history.pushState(null, "", `${BASE_PATH}/works/${id}`); // Just update the url, no need to reload the page.
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notebook]);
-
-  // This effect is triggered when the count changes,
-  // which happens when user clicks the "New" nav link.
-  useEffect(() => {
-    const initialNotebook = isAdded ? getNotebookById(id) : createNotebook();
-    setNotebook(initialNotebook);
-    setInitialCode(initialNotebook.content);
-    setAutoRun(initialNotebook.autoRun);
-    setTitle(initialNotebook.title);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [count]);
+    if (notebook === null) return;
+    saveNotebook();
+    // Just update the url, no need to reload the page.
+    const url = `${BASE_PATH}/works/${notebook.id}`;
+    window.history.pushState(null, "", url);
+  }, [notebook, saveNotebook]);
 
   useEffect(() => {
     // Use setTimeout to avoid changing to default title.
-    setTimeout(() => {
-      document.title = `${isAdded ? notebook.title : "New"} | Recho Notebook`;
-    }, 100);
-  }, [notebook, isAdded]);
-
-  useEffect(() => {
-    const notebooks = getNotebooks();
-    setNotebookList(notebooks.slice(0, 4));
-  }, [isAdded]);
+    if (notebook) {
+      setTimeout(() => {
+        document.title = `${isDirty ? "* " : ""}${isDraft ? "New" : notebook.title}| Recho Notebook`;
+      }, 100);
+    }
+  }, [notebook, isDirty, isDraft]);
 
   useEffect(() => {
     const onBeforeUnload = (e) => {
@@ -84,57 +59,13 @@ export function EditorPage({id: initialId}) {
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [onSave]);
 
-  useEffect(() => {
-    if (showInput) titleRef.current.focus();
-  }, [showInput]);
-
-  if (notebook === UNSET) return <div className={cn("max-w-screen-lg mx-auto my-10 editor-page")}>Loading...</div>;
-
   if (!notebook) return notFound();
 
-  function onUserInput(code) {
-    const newNotebook = {...notebook, content: code};
-    if (isAdded) {
-      saveNotebook(newNotebook);
-      setNotebook(newNotebook);
-    } else {
-      setNotebook(newNotebook);
-      isDirtyStore.setDirty(true);
-    }
-  }
-
-  function onRename() {
-    setShowInput(true);
-    setTitle(notebook.title);
-  }
-
-  // Only submit rename when blur with valid title.
-  function onTitleBlur() {
-    setShowInput(false);
-    // The title can't be empty.
-    if (!title) return setTitle(notebook.title);
-    const newNotebook = {...notebook, title};
-    setNotebook(newNotebook);
-    if (isAdded) saveNotebook(newNotebook);
-    else isDirtyStore.setDirty(true);
-  }
-
-  function onTitleChange(e) {
-    setTitle(e.target.value);
-  }
-
-  function onTitleKeyDown(e) {
-    if (e.key === "Enter") {
-      onTitleBlur();
-      titleRef.current.blur();
-    }
-  }
-
   // If long-running code is detected, set autoRun to false
   // to prevent the browser from freezing on infinite loops
   // and can't continue to edit the code.
   function onBeforeEachRun() {
-    if (!isAdded) return;
+    if (isDraft) return;
     if (timer.current) clearTimeout(timer.current);
     const newNotebook = {...notebook, autoRun: false};
     saveNotebook(newNotebook);
@@ -151,98 +82,54 @@ export function EditorPage({id: initialId}) {
     router.push(`/works/${duplicated.id}`);
   }
 
+  function onRestoreSnapshot(snapshot) {
+    restoreContent(snapshot.content);
+  }
+
   return (
     <div>
-      {!isAdded && notebookList.length > 0 && (
-        <div className={cn("flex h-[72px] bg-gray-100 p-2 w-full border-b border-gray-200")}>
-          <div
-            className={cn(
-              "flex items-center justify-between gap-2 h-full max-w-screen-lg lg:mx-auto mx-4 w-full hidden md:flex",
-            )}
-          >
-            {notebookList.map((notebook) => (
-              <div key={notebook.id} className={cn("flex items-start flex-col gap-1")}>
-                <SafeLink
-                  href={`/works/${notebook.id}`}
-                  className={cn(
-                    "font-semibold hover:underline text-blue-500 whitespace-nowrap line-clamp-1 max-w-[150px] text-ellipsis",
-                  )}
-                >
-                  {notebook.title}
-                </SafeLink>
-                <span
-                  className={cn("text-xs text-gray-500 line-clamp-1 whitespace-nowrap max-w-[150px] text-ellipsis")}
-                >
-                  Created {new Date(notebook.created).toLocaleDateString()}
-                </span>
-              </div>
-            ))}
-            <SafeLink href="/works" className={cn("font-semibold text-blue-500 hover:underline")}>
-              View your notebooks
-            </SafeLink>
-          </div>
-          <div
-            className={cn(
-              "flex items-center justify-between gap-2 h-full max-w-screen-lg lg:mx-auto mx-4 w-full md:hidden",
-            )}
-          >
-            <SafeLink
-              href="/works"
-              className={cn(
-                "font-medium w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-center hover:bg-gray-200",
-              )}
-            >
-              View your notebooks
-            </SafeLink>
-          </div>
-        </div>
-      )}
-      {!isAdded && notebookList.length === 0 && (
-        <div className={cn("flex items-center justify-center h-[72px] mt-6 mb-10 lg:mb-0")}>
-          <p className={cn("text-3xl text-gray-800 font-light text-center mx-10")}>
-            Explore code and art with instant feedback.
-          </p>
-        </div>
-      )}
+      <EditorPageHero show={isDraft} />
       <div className={cn("max-w-screen-lg lg:mx-auto mx-4 lg:my-10 my-4 editor-page")}>
         <Editor
-          initialCode={initialCode}
+          initialCode={initialContent}
           key={notebook.id}
-          onUserInput={onUserInput}
+          onUserInput={updateContent}
           onBeforeEachRun={onBeforeEachRun}
-          autoRun={autoRun}
-          onDuplicate={isAdded ? onDuplicate : null}
+          autoRun={notebook.autoRun}
+          onDuplicate={isDraft ? onDuplicate : null}
           toolBarStart={
-            <div className={cn("flex items-center gap-2")}>
-              {!isAdded && (
-                <button
-                  onClick={onSave}
-                  className={cn("bg-green-700 text-white rounded-md px-3 py-1 text-sm hover:bg-green-800")}
-                >
-                  Create
-                </button>
-              )}
-              {!showInput && isAdded && (
-                <button onClick={onRename}>
-                  <Pencil className="w-4 h-4" />
-                </button>
-              )}
-              {showInput || !isAdded ? (
-                <input
-                  type="text"
-                  value={title}
-                  onChange={onTitleChange}
-                  onBlur={onTitleBlur}
-                  onKeyDown={onTitleKeyDown}
-                  ref={titleRef}
-                  className={cn("border border-gray-200 rounded-md px-3 py-1 text-sm bg-white")}
-                />
-              ) : (
-                <span className={cn("text-sm py-1 border border-gray-100 rounded-md")}>{notebook.title}</span>
-              )}
-            </div>
+            <NotebookTitle
+              title={notebook.title}
+              setTitle={updateTitle}
+              isDraft={isDraft}
+              isDirty={isDirty}
+              onCreate={onSave}
+            />
+          }
+          toolBarEnd={
+            isDraft ? null : (
+              <button
+                onClick={() => setShowSnapshotsDialog(true)}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-200 transition-colors",
+                )}
+                data-tooltip-id="action-tooltip"
+                data-tooltip-content="Manage Snapshots"
+                data-tooltip-place="bottom"
+              >
+                <Camera className={cn("w-4 h-4")} />
+                <span>Snapshots</span>
+              </button>
+            )
           }
         />
+        <SnapshotsDialog
+          notebook={notebook}
+          open={showSnapshotsDialog}
+          createSnapshot={createSnapshot}
+          onOpenChange={setShowSnapshotsDialog}
+          onRestore={onRestoreSnapshot}
+        />
       </div>
     </div>
   );
diff --git a/app/Nav.jsx b/app/Nav.jsx
index 62c215c..3f50656 100644
--- a/app/Nav.jsx
+++ b/app/Nav.jsx
@@ -2,7 +2,7 @@
 
 import {usePathname} from "next/navigation";
 import {useState, useEffect, useRef} from "react";
-import {SafeLink} from "./SafeLink.jsx";
+import {SafeLink} from "../components/SafeLink.tsx";
 import {cn} from "./cn.js";
 import {Plus, Share, Github, Menu, FolderCode} from "lucide-react";
 import {Tooltip} from "react-tooltip";
diff --git a/app/SafeLink.jsx b/app/SafeLink.jsx
deleted file mode 100644
index 419087f..0000000
--- a/app/SafeLink.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-import {useSyncExternalStore} from "react";
-import {useRouter} from "next/navigation";
-import {isDirtyStore, countStore} from "./store.js";
-import Link from "next/link";
-
-export function SafeLink({href, children, className, onClick, ...props}) {
-  const router = useRouter();
-  const isDirty = useSyncExternalStore(
-    isDirtyStore.subscribe,
-    isDirtyStore.getSnapshot,
-    isDirtyStore.getServerSnapshot,
-  );
-
-  const handleClick = (e) => {
-    e.preventDefault();
-    if (isDirty) {
-      const confirmLeave = window.confirm("Your changes will be lost.");
-      if (!confirmLeave) return;
-    }
-    isDirtyStore.setDirty(false);
-    if (href === "/") countStore.increment();
-    router.push(href);
-    onClick?.();
-  };
-
-  return (
-    <Link href={href} onClick={handleClick} className={className} {...props}>
-      {children}
-    </Link>
-  );
-}
diff --git a/app/global.css b/app/global.css
index bb327b6..a696110 100644
--- a/app/global.css
+++ b/app/global.css
@@ -3,6 +3,9 @@
 @import "@fontsource-variable/inter";
 @import "@fontsource-variable/spline-sans-mono";
 @import "@fontsource-variable/spline-sans-mono/wght-italic";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
 
 @theme {
   --default-font-family: "Inter Variable";
@@ -26,3 +29,122 @@ button {
 .cm-editor.cm-focused {
   outline: none !important;
 }
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/app/page.jsx b/app/page.jsx
index 87879e4..02c11eb 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,4 +1,78 @@
-import {EditorPage} from "./EditorPage.jsx";
+"use client";
+
+import dynamic from "next/dynamic";
+
+const EditorPage = dynamic(() => import("./EditorPage.jsx").then((mod) => ({default: mod.EditorPage})), {
+  loading: () => <LoadingIndicator />,
+  // As we are reading the notebooks from the localStorage, we don't need to
+  // render this page on the server side.
+  ssr: false,
+});
+
+function LoadingIndicator() {
+  return (
+    <div className="animate-pulse">
+      {/* Hero section skeleton */}
+      <div className="flex h-[72px] bg-gray-100 p-2 w-full border-b border-gray-200">
+        <div className="hidden md:flex items-center justify-between gap-2 h-full max-w-screen-lg lg:mx-auto mx-4 w-full">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="flex flex-col gap-1.5">
+              <div className="h-4 w-24 bg-gray-300 rounded" />
+              <div className="h-3 w-20 bg-gray-200 rounded" />
+            </div>
+          ))}
+          <div className="h-4 w-32 bg-gray-300 rounded" />
+        </div>
+        <div className="flex md:hidden items-center justify-center h-full max-w-screen-lg lg:mx-auto mx-4 w-full">
+          <div className="h-10 w-full bg-gray-200 rounded-md" />
+        </div>
+      </div>
+
+      {/* Editor container skeleton */}
+      <div className="max-w-screen-lg lg:mx-auto mx-4 lg:my-10 my-4">
+        {/* Toolbar skeleton */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="h-6 w-48 bg-gray-200 rounded" />
+            <div className="h-5 w-16 bg-gray-100 rounded" />
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-24 bg-gray-200 rounded-md" />
+          </div>
+        </div>
+
+        {/* Editor area skeleton */}
+        <div className="border border-gray-200 rounded-lg overflow-hidden">
+          {/* Code editor header */}
+          <div className="flex items-center gap-2 px-4 py-2 bg-gray-50 border-b border-gray-200">
+            <div className="h-4 w-20 bg-gray-200 rounded" />
+          </div>
+          {/* Code lines skeleton */}
+          <div className="p-4 space-y-2 min-h-[400px] bg-white">
+            <div className="h-4 w-3/4 bg-gray-100 rounded" />
+            <div className="h-4 w-1/2 bg-gray-100 rounded" />
+            <div className="h-4 w-5/6 bg-gray-100 rounded" />
+            <div className="h-4 w-2/3 bg-gray-100 rounded" />
+            <div className="h-4 w-1/3 bg-gray-100 rounded" />
+            <div className="h-4 w-3/5 bg-gray-100 rounded" />
+            <div className="h-4 w-1/2 bg-gray-100 rounded" />
+            <div className="h-4 w-4/5 bg-gray-100 rounded" />
+          </div>
+        </div>
+
+        {/* Output area skeleton */}
+        <div className="mt-4 border border-gray-200 rounded-lg overflow-hidden">
+          <div className="flex items-center gap-2 px-4 py-2 bg-gray-50 border-b border-gray-200">
+            <div className="h-4 w-16 bg-gray-200 rounded" />
+          </div>
+          <div className="p-4 min-h-[200px] bg-white">
+            <div className="h-4 w-1/4 bg-gray-100 rounded" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export default function Page() {
   return <EditorPage />;
diff --git a/app/store.js b/app/store.js
deleted file mode 100644
index a4b72a9..0000000
--- a/app/store.js
+++ /dev/null
@@ -1,43 +0,0 @@
-function emitChange(listeners) {
-  for (const listener of listeners) listener();
-}
-
-let count = 0;
-const counterListeners = new Set();
-
-export const countStore = {
-  increment() {
-    count++;
-    emitChange(counterListeners);
-  },
-  subscribe(listener) {
-    counterListeners.add(listener);
-    return () => counterListeners.delete(listener);
-  },
-  getSnapshot() {
-    return count;
-  },
-  getServerSnapshot() {
-    return 0;
-  },
-};
-
-let isDirty = false;
-const dirtyListeners = new Set();
-
-export const isDirtyStore = {
-  setDirty(dirty) {
-    isDirty = dirty;
-    emitChange(dirtyListeners);
-  },
-  subscribe(listener) {
-    dirtyListeners.add(listener);
-    return () => dirtyListeners.delete(listener);
-  },
-  getSnapshot() {
-    return isDirty;
-  },
-  getServerSnapshot() {
-    return false;
-  },
-};
diff --git a/app/works/WorksPage.jsx b/app/works/WorksPage.jsx
new file mode 100644
index 0000000..78593ab
--- /dev/null
+++ b/app/works/WorksPage.jsx
@@ -0,0 +1,75 @@
+"use client";
+import {useEffect} from "react";
+import Link from "next/link";
+import {Trash} from "lucide-react";
+import {ThumbnailClient} from "../ThumbnailClient.js";
+import {findFirstOutputRange} from "../shared.js";
+import {cn} from "../cn.js";
+import {useNotebooks} from "@/lib/notebooks/hooks.ts";
+
+export function WorksPage() {
+  const [notebooks, setNotebooks] = useNotebooks();
+  const isEmpty = notebooks.length === 0;
+
+  useEffect(() => {
+    document.title = "Notebooks | Recho Notebook";
+  }, []);
+
+  function onDelete(id) {
+    // deleteNotebook(id);
+    const newNotebooks = notebooks.filter((notebook) => notebook.id !== id);
+    setNotebooks(newNotebooks);
+  }
+
+  if (isEmpty) {
+    return (
+      <div className={cn("text-center mt-20")}>
+        <p className={cn("mt-4")}>No notebooks found.</p>
+        <Link
+          href="/"
+          className={cn("mt-4", "inline-block bg-black text-white rounded-md px-3 py-1 text-sm hover:bg-gray-800")}
+        >
+          New
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("max-w-screen-xl lg:mx-auto mx-4 my-4")}>
+      <div className={cn("grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10")}>
+        {notebooks.map((notebook) => {
+          const code = notebook.snapshots[0].content;
+          return (
+            <div key={notebook.id}>
+              <div className={cn("flex items-center justify-between mb-3")}>
+                <div className={cn("flex-1 min-w-0")}>
+                  <Link
+                    href={`/works/${notebook.id}`}
+                    className={cn("font-semibold hover:underline text-blue-500 block truncate")}
+                  >
+                    <span>{notebook.title}</span>
+                  </Link>
+                  <div className={cn("text-sm text-gray-500")}>
+                    Created {new Date(notebook.created).toLocaleDateString()}
+                  </div>
+                </div>
+                <button
+                  onClick={() => onDelete(notebook.id)}
+                  className={cn("hover:scale-110 transition-transform duration-100 ml-2 flex-shrink-0")}
+                >
+                  <Trash className={cn("w-4 h-4")} />
+                </button>
+              </div>
+              <div className={cn("w-full pt-[62.5%] relative border border-gray-200 rounded-md overflow-hidden")}>
+                <div className={cn("absolute inset-0 px-3")}>
+                  <ThumbnailClient code={code} outputStartLine={findFirstOutputRange(code).startLine} />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/app/works/page.jsx b/app/works/page.jsx
index 70d5640..8dfdb68 100644
--- a/app/works/page.jsx
+++ b/app/works/page.jsx
@@ -1,80 +1,41 @@
 "use client";
-import {useState, useEffect} from "react";
-import Link from "next/link";
-import {Trash} from "lucide-react";
-import {ThumbnailClient} from "../ThumbnailClient.js";
-import {getNotebooks, deleteNotebook} from "../api.js";
-import {findFirstOutputRange} from "../shared.js";
-import {cn} from "../cn.js";
 
-export default function Page() {
-  const [notebooks, setNotebooks] = useState([]);
-  const isEmpty = notebooks.length === 0;
-
-  useEffect(() => {
-    const notebooks = getNotebooks();
-    setNotebooks(notebooks);
-  }, []);
-
-  useEffect(() => {
-    document.title = "Notebooks | Recho Notebook";
-  }, []);
+import dynamic from "next/dynamic";
 
-  function onDelete(id) {
-    deleteNotebook(id);
-    const newNotebooks = notebooks.filter((notebook) => notebook.id !== id);
-    setNotebooks(newNotebooks);
-  }
+const WorksPage = dynamic(() => import("./WorksPage.jsx").then((mod) => ({default: mod.WorksPage})), {
+  loading: () => <LoadingIndicator />,
+  // As we are reading the notebooks from the localStorage, we don't need to
+  // render this page on the server side.
+  ssr: false,
+});
 
-  if (isEmpty) {
-    return (
-      <div className={cn("text-center mt-20")}>
-        <p className={cn("mt-4")}>No notebooks found.</p>
-        <Link
-          href="/"
-          className={cn("mt-4", "inline-block bg-black text-white rounded-md px-3 py-1 text-sm hover:bg-gray-800")}
-        >
-          New
-        </Link>
+function SkeletonCard() {
+  return (
+    <div className="animate-pulse">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex-1 min-w-0">
+          <div className="h-5 bg-gray-200 rounded w-3/4 mb-2" />
+          <div className="h-4 bg-gray-100 rounded w-1/2" />
+        </div>
+        <div className="w-4 h-4 bg-gray-200 rounded ml-2 shrink-0" />
       </div>
-    );
-  }
+      <div className="w-full pt-[62.5%] relative border border-gray-200 rounded-md overflow-hidden bg-gray-100" />
+    </div>
+  );
+}
 
+function LoadingIndicator() {
   return (
-    <div className={cn("max-w-screen-xl lg:mx-auto mx-4 my-4")}>
-      <div className={cn("grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10")}>
-        {notebooks.map((notebook) => (
-          <div key={notebook.id}>
-            <div className={cn("flex items-center justify-between mb-3")}>
-              <div className={cn("flex-1 min-w-0")}>
-                <Link
-                  href={`/works/${notebook.id}`}
-                  className={cn("font-semibold hover:underline text-blue-500 block truncate")}
-                >
-                  <span>{notebook.title}</span>
-                </Link>
-                <div className={cn("text-sm text-gray-500")}>
-                  Created {new Date(notebook.created).toLocaleDateString()}
-                </div>
-              </div>
-              <button
-                onClick={() => onDelete(notebook.id)}
-                className={cn("hover:scale-110 transition-transform duration-100 ml-2 flex-shrink-0")}
-              >
-                <Trash className={cn("w-4 h-4")} />
-              </button>
-            </div>
-            <div className={cn("w-full pt-[62.5%] relative border border-gray-200 rounded-md overflow-hidden")}>
-              <div className={cn("absolute inset-0 px-3")}>
-                <ThumbnailClient
-                  code={notebook.content}
-                  outputStartLine={findFirstOutputRange(notebook.content).startLine}
-                />
-              </div>
-            </div>
-          </div>
+    <div className="max-w-screen-xl lg:mx-auto mx-4 my-4">
+      <div className="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
+        {[...Array(6)].map((_, i) => (
+          <SkeletonCard key={i} />
         ))}
       </div>
     </div>
   );
 }
+
+export default function Page() {
+  return <WorksPage />;
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..006d007
--- /dev/null
+++ b/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/global.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/components/SafeLink.tsx b/components/SafeLink.tsx
new file mode 100644
index 0000000..892b15e
--- /dev/null
+++ b/components/SafeLink.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {useRouter} from "next/navigation";
+import Link, {type LinkProps} from "next/link";
+import {useIsDirty} from "@/lib/notebooks/storage.ts";
+
+export type SafeLinkProps = {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+} & LinkProps;
+
+export function SafeLink({href, children, className, onClick = () => {}, ...props}: SafeLinkProps) {
+  const router = useRouter();
+  const [isDirty, setIsDirty] = useIsDirty();
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    if (isDirty && !window.confirm("Your changes will be lost.")) return;
+    setIsDirty(false);
+    // If the link is to the new notebook page, we need to renew the notebook.
+    if (href === "/") window.dispatchEvent(new Event("renew-notebook"));
+    router.push(href);
+    onClick?.();
+  };
+
+  return (
+    <Link href={href} onClick={handleClick} className={className} {...props}>
+      {children}
+    </Link>
+  );
+}
diff --git a/components/notebooks/EditorPageHero.tsx b/components/notebooks/EditorPageHero.tsx
new file mode 100644
index 0000000..4b76663
--- /dev/null
+++ b/components/notebooks/EditorPageHero.tsx
@@ -0,0 +1,63 @@
+import {useLatestNotebooks} from "@/lib/notebooks/hooks.ts";
+import {SafeLink} from "../SafeLink.tsx";
+import {cn} from "../../app/cn.js";
+
+export type EditorPageHeroProps = {
+  show: boolean;
+};
+
+export function EditorPageHero({show}: EditorPageHeroProps) {
+  const latestNotebooks = useLatestNotebooks(4);
+  if (!show) return null;
+  if (latestNotebooks.length === 0) {
+    return (
+      <div className={cn("flex items-center justify-center h-[72px] mt-6 mb-10 lg:mb-0")}>
+        <p className={cn("text-3xl text-gray-800 font-light text-center mx-10")}>
+          Explore code and art with instant feedback.
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className={cn("flex h-[72px] bg-gray-100 p-2 w-full border-b border-gray-200")}>
+      <div
+        className={cn(
+          "items-center justify-between gap-2 h-full max-w-screen-lg lg:mx-auto mx-4 w-full hidden md:flex",
+        )}
+      >
+        {latestNotebooks.map((notebook) => (
+          <div key={notebook.id} className={cn("flex items-start flex-col gap-1")}>
+            <SafeLink
+              href={`/works/${notebook.id}`}
+              className={cn(
+                "font-semibold hover:underline text-blue-500 whitespace-nowrap line-clamp-1 max-w-[150px] text-ellipsis",
+              )}
+            >
+              {notebook.title}
+            </SafeLink>
+            <span className={cn("text-xs text-gray-500 line-clamp-1 whitespace-nowrap max-w-[150px] text-ellipsis")}>
+              Created {new Date(notebook.created).toLocaleDateString()}
+            </span>
+          </div>
+        ))}
+        <SafeLink href="/works" className={cn("font-semibold text-blue-500 hover:underline")}>
+          View your notebooks
+        </SafeLink>
+      </div>
+      <div
+        className={cn(
+          "flex items-center justify-between gap-2 h-full max-w-screen-lg lg:mx-auto mx-4 w-full md:hidden",
+        )}
+      >
+        <SafeLink
+          href="/works"
+          className={cn(
+            "font-medium w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-center hover:bg-gray-200",
+          )}
+        >
+          View your notebooks
+        </SafeLink>
+      </div>
+    </div>
+  );
+}
diff --git a/components/notebooks/NotebookTitle.tsx b/components/notebooks/NotebookTitle.tsx
new file mode 100644
index 0000000..449d348
--- /dev/null
+++ b/components/notebooks/NotebookTitle.tsx
@@ -0,0 +1,97 @@
+import {Pencil, AsteriskIcon, CheckIcon} from "lucide-react";
+import {useEffect, useRef, useState} from "react";
+
+export type NotebookTitleProps = {
+  title: string;
+  setTitle: (notebook: string) => void;
+  isDraft: boolean;
+  isDirty: boolean;
+  onCreate: () => void;
+};
+
+export function NotebookTitle({title, setTitle, isDraft, isDirty, onCreate}: NotebookTitleProps) {
+  const [showInput, setShowInput] = useState(false);
+  const [titleDraft, setTitleDraft] = useState("");
+  const titleRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (showInput) titleRef.current?.focus?.();
+  }, [showInput]);
+
+  useEffect(() => {
+    setTitleDraft(title);
+  }, [title]);
+
+  // Only submit rename when blur with valid title.
+  function onTitleBlur() {
+    setShowInput(false);
+    // The title can't be empty.
+    if (!titleDraft) return setTitleDraft(title);
+    setTitle(titleDraft);
+  }
+
+  function onTitleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setTitleDraft(e.target.value);
+  }
+
+  function onTitleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      onTitleBlur();
+      titleRef.current?.blur?.();
+    }
+  }
+
+  function onRename() {
+    setShowInput(true);
+    setTitleDraft(title);
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {isDraft && (
+        <button onClick={onCreate} className="bg-green-700 text-white rounded-md px-3 py-1 text-sm hover:bg-green-800">
+          Create
+        </button>
+      )}
+      {!showInput && !isDraft && (
+        <button onClick={onRename}>
+          <Pencil className="w-4 h-4" />
+        </button>
+      )}
+      {showInput || isDraft ? (
+        <input
+          type="text"
+          value={titleDraft}
+          onChange={onTitleChange}
+          onBlur={onTitleBlur}
+          onKeyDown={onTitleKeyDown}
+          ref={titleRef}
+          className="border border-gray-200 rounded-md px-3 py-1 text-sm bg-white"
+          autoComplete="off"
+          autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
+        />
+      ) : (
+        <span className="text-sm py-1 border border-gray-100 rounded-md">{title}</span>
+      )}
+      {isDraft ? (
+        isDirty ? (
+          <AsteriskIcon
+            className="w-4 h-4 text-amber-600 animate-pulse"
+            data-tooltip-id="action-tooltip"
+            data-tooltip-content="Unsaved changes"
+            data-tooltip-place="bottom"
+          />
+        ) : null
+      ) : (
+        <CheckIcon
+          className="w-4 h-4 text-green-600"
+          data-tooltip-id="action-tooltip"
+          data-tooltip-content="Saved"
+          data-tooltip-place="bottom"
+        />
+      )}
+    </div>
+  );
+}
diff --git a/components/notebooks/SnapshotEntry.tsx b/components/notebooks/SnapshotEntry.tsx
new file mode 100644
index 0000000..7495630
--- /dev/null
+++ b/components/notebooks/SnapshotEntry.tsx
@@ -0,0 +1,224 @@
+"use client";
+import {useState, useRef, useEffect} from "react";
+import {Trash2, RotateCcw, Pencil, Check, X, FileCheck} from "lucide-react";
+import {Button} from "../ui/button.tsx";
+import {Input} from "../ui/input.tsx";
+import {cn} from "../../app/cn.js";
+import type {Snapshot} from "@/lib/notebooks/schema.ts";
+
+export type SnapshotEntryProps = {
+  snapshot: Snapshot;
+  index: number;
+  isSelected: boolean;
+  onSelect: (snapshot: Snapshot) => void;
+  onDelete: (snapshotId: string, e: React.MouseEvent<HTMLButtonElement>) => void;
+  onRestore: (snapshotId: string, e: React.MouseEvent<HTMLButtonElement>) => void;
+  onRename: (snapshotId: string, newName: string) => void;
+};
+
+export function SnapshotEntry({
+  snapshot,
+  index,
+  isSelected,
+  onSelect,
+  onDelete,
+  onRestore,
+  onRename,
+}: SnapshotEntryProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState(snapshot.name ?? "");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  function handleStartEdit(e: React.MouseEvent) {
+    e.stopPropagation();
+    setEditName(snapshot.name ?? "");
+    setIsEditing(true);
+  }
+
+  function handleSave(e?: React.MouseEvent) {
+    e?.stopPropagation();
+    const trimmedName = editName.trim();
+    if (trimmedName && trimmedName !== snapshot.name) {
+      onRename(snapshot.id, trimmedName);
+    }
+    setIsEditing(false);
+  }
+
+  function handleCancel(e?: React.MouseEvent) {
+    e?.stopPropagation();
+    setIsEditing(false);
+    setEditName(snapshot.name ?? "");
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      handleSave();
+    } else if (e.key === "Escape") {
+      handleCancel();
+    }
+  }
+
+  const isCurrentVersion = index === 0;
+  const displayName = snapshot.name ?? "Untitled snapshot";
+  const canEdit = !isCurrentVersion; // Don't allow editing the current version
+
+  // Current version (first entry) - distinct styling, no name (like git staging area)
+  if (isCurrentVersion) {
+    return (
+      <div
+        key={snapshot.id}
+        className={cn(
+          "p-3 cursor-pointer transition-colors border-b-2 border-stone-200",
+          isSelected
+            ? "bg-gradient-to-r from-emerald-50 to-teal-50 border-l-4 border-l-emerald-500"
+            : "bg-gradient-to-r from-stone-50/50 to-stone-100/50 hover:from-emerald-50/50 hover:to-teal-50/50",
+        )}
+        onClick={() => onSelect(snapshot)}
+      >
+        <div className={cn("flex items-center justify-between gap-2")}>
+          <div className={cn("flex items-center gap-2")}>
+            <div
+              className={cn(
+                "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-semibold",
+                "bg-emerald-100 text-emerald-700 border border-emerald-200",
+              )}
+            >
+              <FileCheck className={cn("w-3 h-3")} />
+              Current
+            </div>
+            <span className={cn("text-xs text-stone-500")}>{formatDate(snapshot.created)}</span>
+          </div>
+          <div className={cn("flex items-center")}>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => onDelete(snapshot.id, e)}
+              className={cn("h-6 w-6 text-stone-500 hover:text-red-600")}
+            >
+              <Trash2 className={cn("w-4 h-4")} />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Historical snapshots - original styling
+  return (
+    <div
+      key={snapshot.id}
+      className={cn(
+        "p-3 border-b border-stone-100 cursor-pointer transition-colors",
+        isSelected ? "bg-blue-50 border-l-4 border-l-blue-500" : "hover:bg-stone-50",
+      )}
+      onClick={() => !isEditing && onSelect(snapshot)}
+    >
+      <div className={cn("flex items-start justify-between gap-2")}>
+        <div className={cn("flex-1 min-w-0")}>
+          {isEditing ? (
+            <div className={cn("flex items-center gap-1")} onClick={(e) => e.stopPropagation()}>
+              <Input
+                ref={inputRef}
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className={cn("h-7 text-sm")}
+                placeholder="Snapshot name"
+              />
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleSave}
+                className={cn("h-7 w-7 text-green-600 hover:text-green-700")}
+              >
+                <Check className={cn("w-4 h-4")} />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleCancel}
+                className={cn("h-7 w-7 text-stone-500 hover:text-stone-700")}
+              >
+                <X className={cn("w-4 h-4")} />
+              </Button>
+            </div>
+          ) : (
+            <>
+              <div className={cn("flex items-center gap-1")}>
+                <div
+                  className={cn("font-medium text-sm", snapshot.name === null ? "text-stone-500" : "text-stone-900")}
+                >
+                  {displayName}
+                </div>
+                {canEdit && (
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={handleStartEdit}
+                    className={cn("h-5 w-5 text-stone-400 hover:text-stone-600 opacity-0 group-hover:opacity-100")}
+                  >
+                    <Pencil className={cn("w-3 h-3")} />
+                  </Button>
+                )}
+              </div>
+              <div className={cn("text-xs text-stone-500 mt-1")}>{formatDate(snapshot.created)}</div>
+            </>
+          )}
+        </div>
+        {!isEditing && (
+          <div className={cn("flex items-center")}>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => onDelete(snapshot.id, e)}
+              className={cn("h-6 w-6 text-stone-500 hover:text-red-600")}
+            >
+              <Trash2 className={cn("w-4 h-4")} />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => onRestore(snapshot.id, e)}
+              className={cn("h-6 w-6 text-stone-500 hover:text-blue-600")}
+            >
+              <RotateCcw className={cn("w-4 h-4")} />
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function formatDate(timestamp: number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  // Create relative time formatter
+  const rtf = new Intl.RelativeTimeFormat("en", {numeric: "auto"});
+
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return rtf.format(-diffMins, "minute");
+  if (diffHours < 24) return rtf.format(-diffHours, "hour");
+  if (diffDays < 7) return rtf.format(-diffDays, "day");
+
+  // For older dates, use DateTimeFormat
+  return new Intl.DateTimeFormat("en", {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+}
diff --git a/components/notebooks/SnapshotsDialog.tsx b/components/notebooks/SnapshotsDialog.tsx
new file mode 100644
index 0000000..5702f32
--- /dev/null
+++ b/components/notebooks/SnapshotsDialog.tsx
@@ -0,0 +1,184 @@
+"use client";
+import {useState, useEffect} from "react";
+import {Camera, RotateCcw} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  // DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog.tsx";
+import {Button} from "../ui/button.tsx";
+import {Input} from "../ui/input.tsx";
+import {cn} from "../../app/cn.js";
+import {Editor} from "../../app/Editor.jsx";
+import {useSnapshots} from "@/lib/notebooks/hooks.ts";
+import type {Notebook, Snapshot} from "@/lib/notebooks/schema.ts";
+import {SnapshotEntry, formatDate} from "./SnapshotEntry.tsx";
+
+export type SnapshotsDialogProps = {
+  notebook: Readonly<Notebook>;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  createSnapshot: (name: string | null) => Snapshot;
+  onRestore: (snapshot: Snapshot) => void;
+  deleteSnapshot: (snapshotId: string) => void;
+};
+
+export function SnapshotsDialog({notebook, open, onOpenChange, createSnapshot, onRestore}: SnapshotsDialogProps) {
+  const {snapshots, renameSnapshot, deleteSnapshot} = useSnapshots(notebook.id);
+  const [selectedSnapshot, setSelectedSnapshot] = useState<Snapshot | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [snapshotName, setSnapshotName] = useState("");
+
+  useEffect(() => {
+    if (open && notebook?.id) {
+      if (snapshots.length > 0 && !selectedSnapshot) {
+        setSelectedSnapshot(snapshots[0]);
+      }
+    } else {
+      setSelectedSnapshot(null);
+    }
+  }, [open, notebook?.id, snapshots, selectedSnapshot]);
+
+  function handleCreateSnapshot() {
+    if (!notebook) return;
+    setIsCreating(true);
+    setTimeout(() => {
+      const name = snapshotName.trim() || null;
+      const snapshot = createSnapshot(name);
+      setSelectedSnapshot(snapshot);
+      setSnapshotName("");
+      setIsCreating(false);
+    }, 100);
+  }
+
+  function handleRestore(snapshotId: string) {
+    const snapshot = snapshots.find((s) => s.id === snapshotId);
+    if (snapshot) {
+      onRestore(snapshot);
+      onOpenChange(false);
+    } else {
+      console.error(`Snapshot with id ${snapshotId} not found`);
+    }
+  }
+
+  function handleDelete(snapshotId: string, e: React.MouseEvent<HTMLButtonElement>) {
+    e.stopPropagation();
+    if (confirm("Are you sure you want to delete this snapshot?")) {
+      deleteSnapshot(snapshotId);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("w-[calc(100vw-8rem)]! h-[calc(100vh-8rem)]! max-w-none! flex flex-col p-0")}>
+        <DialogHeader className={cn("px-6 pt-6")}>
+          <DialogTitle>Snapshots</DialogTitle>
+          <DialogDescription>
+            Create snapshots to save the current state of your notebook. You can restore any snapshot later.
+          </DialogDescription>
+        </DialogHeader>
+        <div className={cn("flex-1 flex overflow-hidden min-h-0 border-t border-stone-200")}>
+          {/* Sidebar */}
+          <div className={cn("w-80 border-r border-stone-200 flex flex-col")}>
+            <div className={cn("p-4 border-b border-stone-200 flex flex-col gap-2")}>
+              <Input
+                type="text"
+                placeholder="Snapshot name (optional)"
+                value={snapshotName}
+                onChange={(e) => setSnapshotName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !isCreating && notebook) {
+                    handleCreateSnapshot();
+                  }
+                }}
+                disabled={isCreating || !notebook}
+                className={cn("h-8 text-sm")}
+              />
+              <Button
+                onClick={handleCreateSnapshot}
+                disabled={isCreating || !notebook}
+                className={cn("w-full")}
+                size="sm"
+              >
+                <Camera className={cn("w-4 h-4")} />
+                {isCreating ? "Creating..." : "Create Snapshot"}
+              </Button>
+            </div>
+            <div className={cn("flex-1 overflow-y-auto")}>
+              {snapshots.length === 0 ? (
+                <div className={cn("text-center py-8 px-4 text-stone-500")}>
+                  <Camera className={cn("w-12 h-12 mx-auto mb-2 opacity-50")} />
+                  <p className={cn("text-sm")}>No snapshots yet. Create your first snapshot to get started.</p>
+                </div>
+              ) : (
+                <div className={cn("flex flex-col group")}>
+                  {snapshots.map((snapshot, index) => (
+                    <SnapshotEntry
+                      key={snapshot.id}
+                      snapshot={snapshot}
+                      index={index}
+                      isSelected={selectedSnapshot?.id === snapshot.id}
+                      onSelect={setSelectedSnapshot}
+                      onDelete={handleDelete}
+                      onRestore={(id, e) => {
+                        e.stopPropagation();
+                        handleRestore(id);
+                      }}
+                      onRename={renameSnapshot}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Code Viewer */}
+          <div className={cn("flex-1 flex flex-col min-w-0")}>
+            {selectedSnapshot ? (
+              <>
+                <div
+                  className={cn("px-4 py-2 border-b border-stone-200 bg-stone-50 flex items-center justify-between")}
+                >
+                  <div>
+                    <div
+                      className={cn(
+                        "font-medium text-sm",
+                        selectedSnapshot.name === null ? "text-stone-500" : "text-stone-900",
+                      )}
+                    >
+                      {selectedSnapshot.name ?? "Untitled snapshot"}
+                    </div>
+                    <div className={cn("text-xs text-stone-500")}>{formatDate(selectedSnapshot.created)}</div>
+                  </div>
+                  <Button onClick={() => handleRestore(selectedSnapshot.id)} size="sm" className={cn("ml-4")}>
+                    <RotateCcw className={cn("w-4 h-4")} />
+                    Restore
+                  </Button>
+                </div>
+                <div className={cn("flex-1 overflow-y-scroll p-4 relative")}>
+                  <Editor
+                    initialCode={selectedSnapshot.content}
+                    autoRun={false}
+                    pinToolbar
+                    readonly={true}
+                    onUserInput={() => {}}
+                  />
+                </div>
+              </>
+            ) : (
+              <div className={cn("flex-1 flex items-center justify-center text-stone-400")}>
+                <div className={cn("text-center")}>
+                  <Camera className={cn("w-16 h-16 mx-auto mb-4 opacity-30")} />
+                  <p>Select a snapshot to view its code</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..34b924c
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import {Slot} from "@radix-ui/react-slot";
+import {cva, type VariantProps} from "class-variance-authority";
+
+import {cn} from "@/lib/utils.ts";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({variant, size, className}))}
+      {...props}
+    />
+  );
+}
+
+export {Button, buttonVariants};
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..f273d5a
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {XIcon} from "lucide-react";
+
+import {cn} from "@/lib/utils.ts";
+
+function Dialog({...props}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({...props}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({...props}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({...props}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({className, ...props}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..65738d0
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import {cn} from "@/lib/utils.ts";
+
+function Input({className, type, ...props}: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {Input};
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..6b1bd04
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import {cn} from "@/lib/utils.ts";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {Separator};
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..7381d21
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import {XIcon} from "lucide-react";
+
+import {cn} from "@/lib/utils.ts";
+
+function Sheet({...props}: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({...props}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({...props}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({...props}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({className, ...props}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({className, ...props}: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+}
+
+function SheetFooter({className, ...props}: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+
+function SheetTitle({className, ...props}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({className, ...props}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription};
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..93ba0ee
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,673 @@
+"use client";
+
+import * as React from "react";
+import {Slot} from "@radix-ui/react-slot";
+import {cva, type VariantProps} from "class-variance-authority";
+import {PanelLeftIcon} from "lucide-react";
+
+import {useIsMobile} from "@/hooks/use-mobile.ts";
+import {cn} from "@/lib/utils.ts";
+import {Button} from "@/components/ui/button.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle} from "@/components/ui/sheet.tsx";
+import {Skeleton} from "@/components/ui/skeleton.tsx";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const {isMobile, state, openMobile, setOpenMobile} = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({className, onClick, ...props}: React.ComponentProps<typeof Button>) {
+  const {toggleSidebar} = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({className, ...props}: React.ComponentProps<"button">) {
+  const {toggleSidebar} = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({className, ...props}: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({className, ...props}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({className, ...props}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({className, asChild = false, ...props}: React.ComponentProps<"div"> & {asChild?: boolean}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & {asChild?: boolean}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({className, ...props}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({className, ...props}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button";
+  const {isMobile, state} = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({variant, size}), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({className, ...props}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({className, ...props}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({className, ...props}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..fb6b4d0
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import {cn} from "@/lib/utils.ts";
+
+function Skeleton({className, ...props}: React.ComponentProps<"div">) {
+  return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...props} />;
+}
+
+export {Skeleton};
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..3782c0d
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import {cn} from "@/lib/utils.ts";
+
+function TooltipProvider({delayDuration = 0, ...props}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({...props}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({...props}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider};
diff --git a/editor/blocks/update.ts b/editor/blocks/update.ts
index 4c088a2..2a441ab 100644
--- a/editor/blocks/update.ts
+++ b/editor/blocks/update.ts
@@ -18,16 +18,16 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
 
   const userEvent = tr.annotation(Transaction.userEvent);
   if (userEvent) {
-    console.group(`updateBlocks (${userEvent})`);
+    // console.group(`updateBlocks (${userEvent})`);
   } else {
-    console.groupCollapsed(`updateBlocks`);
+    // console.groupCollapsed(`updateBlocks`);
   }
 
   const isCopyingLines = userEvent === "input.copyline";
 
   if (tr.changes.empty) {
-    console.log("No changes detected");
-    console.groupEnd();
+    // console.log("No changes detected");
+    // console.groupEnd();
     return oldBlocks;
   }
 
@@ -46,12 +46,12 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
   tr.changes.iterChanges((oldFrom, oldTo, newFrom, newTo, inserted) => {
     if (oldFrom === oldTo) {
       if (newFrom === oldFrom) {
-        console.groupCollapsed(`Insert ${newTo - newFrom} characters at ${oldFrom}`);
+        // console.groupCollapsed(`Insert ${newTo - newFrom} characters at ${oldFrom}`);
       } else {
-        console.groupCollapsed(`Insert ${newTo - newFrom} characters: ${oldFrom} -> ${newFrom}-${newTo}`);
+        // console.groupCollapsed(`Insert ${newTo - newFrom} characters: ${oldFrom} -> ${newFrom}-${newTo}`);
       }
     } else {
-      console.groupCollapsed(`Update: ${oldFrom}-${oldTo} -> ${newFrom}-${newTo}`);
+      // console.groupCollapsed(`Update: ${oldFrom}-${oldTo} -> ${newFrom}-${newTo}`);
     }
 
     let changeFrom = oldFrom;
@@ -66,10 +66,10 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
           // changeFrom = changeTo = index - inserted.length;
           changeFrom = changeTo = index;
         } else {
-          console.error("This is weird as the insertion point is not at the beginning or the end of the line");
+          // console.error("This is weird as the insertion point is not at the beginning or the end of the line");
         }
       } else {
-        console.error("This is weird as the cursor is not at the same position");
+        // console.error("This is weird as the cursor is not at the same position");
       }
     }
 
@@ -77,7 +77,7 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
 
     const affectedBlockRange = findAffectedBlockRange(oldBlocks, changeFrom, changeTo);
 
-    console.log(`Affected block range: ${affectedBlockRange[0]} to ${affectedBlockRange[1] ?? "the end"}`);
+    // console.log(`Affected block range: ${affectedBlockRange[0]} to ${affectedBlockRange[1] ?? "the end"}`);
 
     // Add the affected blocks to the set.
     for (let i = affectedBlockRange[0] ?? 0, n = affectedBlockRange[1] ?? oldBlocks.length; i < n; i++) {
@@ -86,7 +86,7 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
 
     // Check a corner case where the affected block range is empty but there are blocks.
     if (blockRangeLength(oldBlocks.length, affectedBlockRange) === 0 && oldBlocks.length > 0) {
-      console.error("This should never happen");
+      // console.error("This should never happen");
     }
 
     // Now, we are going to compute the range which should be re-parsed.
@@ -94,7 +94,7 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
     const reparseTo = affectedBlockRange[1] === null ? tr.state.doc.length : oldBlocks[affectedBlockRange[1] - 1]!.to;
     const newBlocks = detectBlocksWithinRange(syntaxTree(tr.state), tr.state.doc, reparseFrom, reparseTo);
 
-    console.log("New blocks from reparsed range:", newBlocks);
+    // console.log("New blocks from reparsed range:", newBlocks);
 
     // If only one block is affected and only one new block is created, we can
     // simply inherit the attributes from the old block.
@@ -108,21 +108,21 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
       newlyCreatedBlocks.insert(newBlocks[i]!);
     }
 
-    console.groupEnd();
+    // console.groupEnd();
   });
 
   // Step 3: Combine the array of old blocks and the heap of new blocks.
 
   const newBlocks: BlockMetadata[] = [];
 
-  console.group("Combining old blocks and new blocks");
+  // console.group("Combining old blocks and new blocks");
 
   for (let i = 0, n = oldBlocks.length; i < n; i++) {
     const oldBlock = oldBlocks[i]!;
 
     // Skip affected blocks, as they have been updated.
     if (affectedBlocks.has(oldBlock)) {
-      console.log("Skipping affected old block:", oldBlock);
+      // console.log("Skipping affected old block:", oldBlock);
       continue;
     }
 
@@ -133,7 +133,7 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
 
     while (newlyCreatedBlocks.nonEmpty() && newlyCreatedBlocks.peek.from < newBlock.from) {
       newBlocks.push(newlyCreatedBlocks.peek);
-      console.log("Pushing new block from heap:", newlyCreatedBlocks.peek);
+      // console.log("Pushing new block from heap:", newlyCreatedBlocks.peek);
       newlyCreatedBlocks.extractMax();
     }
 
@@ -141,10 +141,10 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
     // the current old block's `from` position.
 
     newBlocks.push(newBlock);
-    console.log("Pushing mapped old block:", newBlock);
+    // console.log("Pushing mapped old block:", newBlock);
   }
 
-  console.groupEnd();
+  // console.groupEnd();
 
   // In the end, push any remaining blocks from the heap.
   while (newlyCreatedBlocks.nonEmpty()) {
@@ -152,12 +152,12 @@ export function updateBlocks(oldBlocks: BlockMetadata[], tr: Transaction): Block
     newlyCreatedBlocks.extractMax();
   }
 
-  console.log("New blocks:", newBlocks);
+  // console.log("New blocks:", newBlocks);
 
   const deduplicatedBlocks = deduplicateNaive(newBlocks);
 
-  console.log("Deduplicated blocks:", deduplicatedBlocks);
+  // console.log("Deduplicated blocks:", deduplicatedBlocks);
 
-  console.groupEnd();
+  // console.groupEnd();
   return deduplicatedBlocks;
 }
diff --git a/editor/index.js b/editor/index.js
index 68ca8ba..6379d4b 100644
--- a/editor/index.js
+++ b/editor/index.js
@@ -31,53 +31,60 @@ const eslintConfig = {
 };
 
 export function createEditor(container, options) {
-  const {code, onError, extensions = []} = options;
+  const {code, onError, extensions = [], readonly = false} = options;
   const dispatcher = d3Dispatch("userInput");
   const runtimeRef = {current: null};
 
   const myBasicSetup = Array.from(basicSetup);
   myBasicSetup.splice(2, 0, blockIndicator);
 
+  const editorExtensions = [
+    myBasicSetup,
+    javascript(),
+    githubLightInit({
+      styles: [
+        {tag: [t.variableName], color: "#1f2328"},
+        {tag: [t.function(t.variableName)], color: "#6f42c1"},
+      ],
+    }),
+    EditorView.lineWrapping,
+    EditorView.theme({
+      "&": {fontSize: "14px", fontFamily: "monospace"},
+      ".cm-content": {whiteSpace: "pre"},
+      ".cm-line": {wordWrap: "normal"},
+    }),
+    ...(readonly ? [] : [EditorView.updateListener.of(onChange)]),
+    ...(readonly
+      ? []
+      : [
+          keymap.of([
+            {
+              key: "Mod-s",
+              run: () => {
+                runtimeRef.current?.setIsRunning(true);
+                runtimeRef.current?.run();
+              },
+              preventDefault: true,
+            },
+            indentWithTab,
+          ]),
+        ]),
+    javascriptLanguage.data.of({autocomplete: rechoCompletion}),
+    blockExtensions,
+    ...(readonly ? [] : [controls(runtimeRef)]),
+    // Disable this for now, because it prevents copying/pasting the code.
+    // outputProtection(),
+    docStringTag,
+    commentLink,
+    commentLinkClickHandler,
+    ...(readonly ? [] : [linter(esLint(new eslint.Linter(), eslintConfig))]),
+    ...(readonly ? [EditorState.readOnly.of(true)] : []),
+    ...extensions,
+  ];
+
   const state = EditorState.create({
     doc: code,
-    extensions: [
-      myBasicSetup,
-      javascript(),
-      githubLightInit({
-        styles: [
-          {tag: [t.variableName], color: "#1f2328"},
-          {tag: [t.function(t.variableName)], color: "#6f42c1"},
-        ],
-      }),
-      EditorView.lineWrapping,
-      EditorView.theme({
-        "&": {fontSize: "14px", fontFamily: "monospace"},
-        ".cm-content": {whiteSpace: "pre"},
-        ".cm-line": {wordWrap: "normal"},
-      }),
-      EditorView.updateListener.of(onChange),
-      keymap.of([
-        {
-          key: "Mod-s",
-          run: () => {
-            runtimeRef.current?.setIsRunning(true);
-            runtimeRef.current?.run();
-          },
-          preventDefault: true,
-        },
-        indentWithTab,
-      ]),
-      javascriptLanguage.data.of({autocomplete: rechoCompletion}),
-      blockExtensions,
-      controls(runtimeRef),
-      // Disable this for now, because it prevents copying/pasting the code.
-      // outputProtection(),
-      docStringTag,
-      commentLink,
-      commentLinkClickHandler,
-      linter(esLint(new eslint.Linter(), eslintConfig)),
-      ...extensions,
-    ],
+    extensions: editorExtensions,
   });
 
   const view = new EditorView({state, parent: container});
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
new file mode 100644
index 0000000..502fd32
--- /dev/null
+++ b/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/lib/atoms/isDirty.ts b/lib/atoms/isDirty.ts
new file mode 100644
index 0000000..2e02c0f
--- /dev/null
+++ b/lib/atoms/isDirty.ts
@@ -0,0 +1,3 @@
+import {atom} from "jotai";
+
+export const isDirtyAtom = atom<boolean>(false);
diff --git a/lib/notebooks/atom.ts b/lib/notebooks/atom.ts
new file mode 100644
index 0000000..908ebd2
--- /dev/null
+++ b/lib/notebooks/atom.ts
@@ -0,0 +1,16 @@
+import {atom} from "jotai";
+import {loadNotebooksFromStorage, saveNotebooksToStorage} from "./storage.ts";
+import type {Notebook} from "./schema.ts";
+import type {SetStateAction} from "react";
+
+export const baseNotebooksAtom = atom<Notebook[]>(loadNotebooksFromStorage());
+
+export const notebooksAtom = atom<Notebook[], [SetStateAction<Notebook[]>], void>(
+  (get) => get(baseNotebooksAtom),
+  (get, set, update) => {
+    const oldValue = get(baseNotebooksAtom);
+    const newValue = typeof update === "function" ? update(oldValue) : update;
+    set(baseNotebooksAtom, newValue);
+    saveNotebooksToStorage(newValue, oldValue);
+  },
+);
diff --git a/lib/notebooks/hooks.ts b/lib/notebooks/hooks.ts
new file mode 100644
index 0000000..2072182
--- /dev/null
+++ b/lib/notebooks/hooks.ts
@@ -0,0 +1,314 @@
+"use client";
+
+import {isDirtyAtom} from "@/lib/atoms/isDirty.ts";
+import {useAtom, useAtomValue} from "jotai";
+import {useCallback, useEffect, useMemo, useRef, useState, type Dispatch} from "react";
+import {generate} from "short-uuid";
+import {notebooksAtom} from "./atom.ts";
+import {removeItem, updateItem, updateNotebook} from "./operations.ts";
+import type {Notebook, Snapshot} from "./schema.ts";
+import {createNotebook, createSnapshot, DEFAULT_CONTENT} from "./utils.ts";
+
+export type UseNotebookResult = {
+  /**
+   * The current notebook. It is `null` only if the notebook is not found.
+   */
+  notebook: Readonly<Notebook> | null;
+
+  /**
+   * Whether the notebook is a draft.
+   */
+  isDraft: boolean;
+
+  /**
+   * Whether the buffer has been modified since the last saved.
+   */
+  isDirty: boolean;
+
+  /**
+   * The initial content of the notebook. It is only changed when the notebook
+   * is created or loaded from the storage.
+   *
+   * Please initialize the editor using this content.
+   */
+  initialContent: string;
+
+  /**
+   * Save the notebook to the persistent storage. If the notebook is a draft,
+   * it will be added to the storage.
+   */
+  saveNotebook: () => void;
+
+  /**
+   * Update the content of the notebook. If the notebook is a draft, it only
+   * updates the draft but does not save it to the storage.
+   *
+   * @param content The new content of the notebook.
+   */
+  updateContent: (content: string) => void;
+
+  /**
+   * Update the title of the notebook. If the notebook is a draft, it only
+   * updates the draft but does not save it to the storage.
+   *
+   * @param title The new title of the notebook.
+   */
+  updateTitle: (title: string) => void;
+
+  /**
+   * Create a new snapshot for the notebook.
+   *
+   * The function does nothing when the notebook is a draft because drafts do
+   * not have snapshots.
+   *
+   * If the notebook is not saved, this function first saves the notebook before
+   * creating a new snapshot.
+   *
+   * @param name The name of the snapshot.
+   */
+  createSnapshot: (name: string | null) => Snapshot;
+
+  /**
+   * Forcibly set the content of the notebook to the given content. It also
+   * creates a new snapshot if the content is dirty.
+   *
+   * @param content The content to restore.
+   */
+  restoreContent: (content: string) => void;
+};
+
+export function useLatestNotebooks(limit?: number): Notebook[] {
+  const notebooks = useAtomValue(notebooksAtom);
+  return useMemo(
+    () => (typeof limit === "number" && Number.isInteger(limit) && limit > 0 ? notebooks.slice(0, limit) : notebooks),
+    [notebooks, limit],
+  );
+}
+
+export function useNotebooks(): [Notebook[], Dispatch<Notebook[]>] {
+  const [notebooks, setNotebooks] = useAtom(notebooksAtom);
+  return [notebooks, setNotebooks];
+}
+
+export function useNotebookTitle(id: string): [string, Dispatch<string>] {
+  const [notebooks, setNotebooks] = useAtom(notebooksAtom);
+  const notebook = notebooks.find((n) => n.id === id);
+  return useMemo(() => {
+    return [
+      notebook?.title ?? "",
+      (title: string) => {
+        setNotebooks((oldNotebooks) => updateNotebook(oldNotebooks, id, {title}));
+      },
+    ];
+  }, [id, notebook, setNotebooks]);
+}
+
+const notFoundResult: UseNotebookResult = Object.freeze({
+  notebook: null,
+  isDraft: false,
+  isDirty: false,
+  initialContent: "",
+  saveNotebook: () => {},
+  updateContent: () => {},
+  updateTitle: () => {},
+  createSnapshot: () => {
+    throw new Error("`createSnapshot` is not available when the notebook is not found.");
+  },
+  restoreContent: () => {},
+});
+
+/**
+ * The hook that fetches a notebook by its ID. The returned notebook is a stable
+ * reference to the notebook and has only the latest snapshot.
+ *
+ * If the ID is not provided, the hook will return a draft notebook.
+ *
+ * @param id the notebook ID indicated in the URL
+ */
+export function useNotebook(id: string | undefined): UseNotebookResult {
+  const [notebooks, setNotebooks] = useAtom(notebooksAtom);
+
+  // The ID of the notebook that we are actually editing.
+  // - If the URL contains an ID, this is set to the ID.
+  // - If the URL does not contain an ID, this is set to `undefined`, which
+  //   means that we are editing a draft notebook.
+  // - When the draft notebook is saved, this is set to the ID of the notebook.
+  // - When the user creates a new notebook, this is set to `undefined` again.
+  const [actualId, setActualId] = useState<string | undefined>(id);
+
+  // The notebook found by the ID.
+  const foundNotebook = typeof actualId === "string" ? notebooks.find((n) => n.id === actualId) : undefined;
+
+  // The draft notebook state.
+  const [draftNotebook, setDraftNotebook] = useState<Notebook>(createNotebook);
+
+  const lastSavedTimestamp = (foundNotebook?.snapshots[0] ?? draftNotebook).created;
+
+  // Keep the content of the latest snapshot in a reference to avoid re-renders.
+  const contentRef = useRef<string>(foundNotebook?.snapshots[0].content ?? DEFAULT_CONTENT);
+  // Initialize the last edit timestamp to the last saved timestamp.
+  const lastEditTimestampRef = useRef<number>(lastSavedTimestamp);
+
+  const [isDirty, setIsDirty] = useAtom(isDirtyAtom);
+
+  const [initialContent, setInitialContent] = useState<string>(foundNotebook?.snapshots[0].content ?? DEFAULT_CONTENT);
+
+  const updateContent = useCallback(
+    (content: string) => {
+      contentRef.current = content;
+      lastEditTimestampRef.current = Date.now();
+      setIsDirty(true);
+    },
+    [setIsDirty],
+  );
+
+  // When we receive the `renew-notebook` event, we need to create a new draft.
+  useEffect(() => {
+    const onRenewNotebook = (e: Event) => {
+      e.stopPropagation();
+      setIsDirty(false);
+      setActualId(undefined);
+      setDraftNotebook(createNotebook());
+    };
+    window.addEventListener("renew-notebook", onRenewNotebook);
+    return () => window.removeEventListener("renew-notebook", onRenewNotebook);
+  }, [setIsDirty]);
+
+  return useMemo(() => {
+    if (foundNotebook === undefined) {
+      if (typeof actualId === "string") {
+        return notFoundResult;
+      } else {
+        return {
+          notebook: draftNotebook,
+          isDraft: true,
+          isDirty,
+          initialContent,
+          saveNotebook: () => {
+            const snapshots = [createSnapshot(contentRef.current)];
+            setNotebooks((oldNotebooks) => [{...draftNotebook, snapshots}, ...oldNotebooks]);
+            setDraftNotebook(createNotebook());
+            setActualId(draftNotebook.id);
+            setIsDirty(false);
+          },
+          updateContent,
+          updateTitle: (title: string) => {
+            setDraftNotebook({...draftNotebook, title});
+          },
+          createSnapshot: () => {
+            throw new Error("`createSnapshot` is not supported for an unsaved notebook.");
+          },
+          restoreContent: () => {
+            console.warn("`restoreContent` is not supported for an unsaved notebook.");
+          },
+        };
+      }
+    } else {
+      const [head, ...tail] = foundNotebook.snapshots;
+      return {
+        notebook: foundNotebook,
+        isDraft: false,
+        isDirty,
+        initialContent,
+        saveNotebook: () => {
+          setNotebooks((oldNotebooks) => {
+            return oldNotebooks.map((n) => {
+              if (n.id === foundNotebook.id) {
+                const snapshot: Snapshot = {
+                  ...head,
+                  content: contentRef.current,
+                  created: lastEditTimestampRef.current,
+                };
+                return {...n, snapshots: [snapshot, ...tail]};
+              } else {
+                return n;
+              }
+            });
+          });
+          setIsDirty(false);
+        },
+        updateContent,
+        updateTitle: (title: string) => {
+          setNotebooks((oldNotebooks) => {
+            return oldNotebooks.map((n) => {
+              if (n.id === foundNotebook.id) {
+                return {...n, title};
+              } else {
+                return n;
+              }
+            });
+          });
+        },
+        createSnapshot: (name: string | null): Snapshot => {
+          const snapshots = [...tail];
+          const snapshot = createSnapshot(contentRef.current, name, lastEditTimestampRef.current);
+          // Prepend the new snapshot to the array.
+          snapshots.unshift(snapshot);
+          // Then, prepend a copy of the snapshot because the first snapshot is
+          // the latest version.
+          snapshots.unshift({...snapshot, id: generate()});
+          // Update the notebook in the storage.
+          setNotebooks((oldNotebooks) => updateNotebook(oldNotebooks, foundNotebook.id, {snapshots}));
+          setIsDirty(false);
+          // Lastly, there is no need to call `setInitialContent` because the
+          // content is already the latest snapshot.
+          return snapshot;
+        },
+        restoreContent: (content) => {
+          const snapshots = [...tail];
+          if (isDirty) {
+            snapshots.unshift(createSnapshot(contentRef.current, "Unsaved changes", lastEditTimestampRef.current));
+          }
+          snapshots.unshift(createSnapshot(content));
+          setInitialContent(content);
+          setNotebooks((oldNotebooks) => updateNotebook(oldNotebooks, foundNotebook.id, {snapshots}));
+        },
+      };
+    }
+  }, [actualId, isDirty, setIsDirty, draftNotebook, foundNotebook, setNotebooks, initialContent, updateContent]);
+}
+
+export type UseSnapshotsResult = {
+  snapshots: Readonly<Snapshot>[];
+  renameSnapshot: (snapshotId: string, name: string) => void;
+  deleteSnapshot: (snapshotId: string) => void;
+};
+
+/**
+ * The hook fetches the history snapshots of a notebook.
+ *
+ * @param id The notebook ID
+ *
+ * @returns The history snapshots of the notebook.
+ */
+export function useSnapshots(id: string): UseSnapshotsResult {
+  const [notebooks, setNotebooks] = useAtom(notebooksAtom);
+  return useMemo(() => {
+    const notebook = notebooks.find((n) => n.id === id);
+    if (notebook === undefined) {
+      return {
+        snapshots: [],
+        renameSnapshot: () => {},
+        deleteSnapshot: () => {},
+      };
+    } else {
+      return {
+        snapshots: notebook.snapshots,
+        renameSnapshot: (snapshotId: string, name: string) => {
+          setNotebooks((oldNotebooks) =>
+            updateItem(oldNotebooks, id, (oldNotebook) => ({
+              snapshots: updateItem(oldNotebook.snapshots, snapshotId, {name}),
+            })),
+          );
+        },
+        deleteSnapshot: (snapshotId: string) => {
+          setNotebooks(
+            updateItem(notebooks, id, (oldNotebook) => ({
+              snapshots: removeItem(oldNotebook.snapshots, snapshotId),
+            })),
+          );
+        },
+      };
+    }
+  }, [id, notebooks, setNotebooks]);
+}
diff --git a/lib/notebooks/operations.ts b/lib/notebooks/operations.ts
new file mode 100644
index 0000000..6c64d9a
--- /dev/null
+++ b/lib/notebooks/operations.ts
@@ -0,0 +1,23 @@
+import type {Notebook} from "./schema.ts";
+
+export function setNotebook(notebooks: Notebook[], id: string, notebook: Notebook): Notebook[] {
+  return notebooks.map((n) => (n.id === id ? notebook : n));
+}
+
+export function updateNotebook(notebooks: Notebook[], id: string, fields: Partial<Notebook>): Notebook[] {
+  return notebooks.map((n) => (n.id === id ? {...n, ...fields} : n));
+}
+
+export function updateItem<T extends {id: string}>(
+  items: T[],
+  id: string,
+  update: Partial<T> | ((item: T) => Partial<T>),
+): T[] {
+  return items.map((item) =>
+    item.id === id ? {...item, ...(typeof update === "function" ? update(item) : update)} : item,
+  );
+}
+
+export function removeItem<T extends {id: string}>(items: T[], id: string): T[] {
+  return items.filter((item) => item.id === id);
+}
diff --git a/lib/notebooks/schema.ts b/lib/notebooks/schema.ts
new file mode 100644
index 0000000..872d7d1
--- /dev/null
+++ b/lib/notebooks/schema.ts
@@ -0,0 +1,56 @@
+import Type from "typebox";
+
+const TimestampSchema = Type.Union([Type.Number(), Type.Decode(Type.String(), (value) => new Date(value).getTime())]);
+
+/**
+ * A schema for loading data from localStorage.
+ */
+export const NotebookSchema = Type.Object({
+  id: Type.String(),
+  title: Type.String(),
+  created: TimestampSchema,
+  updated: TimestampSchema,
+
+  // For backward compatibility with old notebooks, we make `snapshots` and
+  // `content` optional.
+  //
+  // 1. If only `content` presents, we create a new snapshot with the content
+  //    and add the snapshot id to `snapshots`.
+  // 2. If only `snapshots` presents, we do nothing.
+  // 3. If both `snapshots` and `content` presents, which should not happen,
+  //    we add `content` to the first snapshot and name it "stale snapshot".
+  // 4. If none of them present, we initialize `snapshots` with an array
+  //    containing a single snapshot with default content.
+  //
+  // The first item of `snapshots` is the latest version.
+  snapshots: Type.Optional(Type.Array(Type.String())),
+  content: Type.Optional(Type.String()),
+
+  autoRun: Type.Boolean(),
+  runtime: Type.String(),
+});
+
+export const NotebooksSchema = Type.Array(NotebookSchema);
+
+export const SnapshotSchema = Type.Object({
+  id: Type.String(),
+  name: Type.Union([Type.Null(), Type.String()]),
+  content: Type.String(),
+  created: Type.Number(),
+});
+
+export type Snapshot = Type.Static<typeof SnapshotSchema>;
+
+/**
+ * This is the high-level representation of a notebook. Under the hood, we store
+ * snapshot content in a separate storage keyed by `content_${snapshotId}`.
+ */
+export type Notebook = {
+  id: string;
+  title: string;
+  created: number;
+  updated: number;
+  snapshots: Snapshot[];
+  autoRun: boolean;
+  runtime: string;
+};
diff --git a/lib/notebooks/storage.ts b/lib/notebooks/storage.ts
new file mode 100644
index 0000000..21f6c7f
--- /dev/null
+++ b/lib/notebooks/storage.ts
@@ -0,0 +1,126 @@
+import {isDirtyAtom} from "@/lib/atoms/isDirty.ts";
+import {useAtom} from "jotai";
+import type {Dispatch, SetStateAction} from "react";
+import Value from "typebox/value";
+import {NotebooksSchema, type Notebook, type Snapshot} from "./schema.ts";
+import {createSnapshot, DEFAULT_CONTENT, RECHO_FILES_KEY, saveSnapshot, snapshotKey} from "./utils.ts";
+
+export function loadSnapshotsFromStorage(ids: string[]): Snapshot[] {
+  const snapshots: Snapshot[] = [];
+  for (let i = 0, n = ids.length; i < n; i++) {
+    const raw = localStorage.getItem(snapshotKey(ids[i]));
+    if (!raw) continue;
+    try {
+      const snapshot = JSON.parse(raw);
+      snapshots.push(snapshot);
+    } catch {
+      continue;
+    }
+  }
+  // Keep the latest snapshot at the first position and sort the rest.
+  const latestSnapshot = snapshots.shift();
+  snapshots.sort((a, b) => b.created - a.created);
+  if (latestSnapshot) snapshots.unshift(latestSnapshot);
+  return snapshots;
+}
+
+export function loadNotebooksFromStorage(): Notebook[] {
+  const rawString = localStorage.getItem(RECHO_FILES_KEY);
+  if (!rawString) return [];
+  try {
+    const rawObject = JSON.parse(rawString);
+    // Parse the notebook first.
+    const rawNotebooks = Value.Decode(NotebooksSchema, rawObject);
+    const notebooks: Notebook[] = [];
+    for (let i = 0, n = rawNotebooks.length; i < n; i++) {
+      let snapshots: Snapshot[];
+      // Examine the four cases documented above in the schema definition.
+      const current = rawNotebooks[i];
+      if (typeof current.content === "string") {
+        const snapshot = createSnapshot(current.content);
+        saveSnapshot(snapshot);
+        if (current.snapshots === undefined) {
+          snapshots = [snapshot];
+        } else {
+          snapshots = [snapshot, ...loadSnapshotsFromStorage(current.snapshots)];
+        }
+      } else {
+        // This loads the snapshots that are present in the localStorage.
+        const restSnapshots = current.snapshots === undefined ? [] : loadSnapshotsFromStorage(current.snapshots);
+        if (restSnapshots.length > 0) {
+          snapshots = restSnapshots;
+        } else {
+          const snapshot = createSnapshot(DEFAULT_CONTENT);
+          saveSnapshot(snapshot);
+          snapshots = [snapshot];
+        }
+      }
+      // Keep all other properties and use the new snapshots array.
+      notebooks.push({
+        id: current.id,
+        title: current.title,
+        created: current.created,
+        updated: current.updated,
+        snapshots,
+        autoRun: current.autoRun,
+        runtime: current.runtime,
+      });
+    }
+    return notebooks;
+  } catch {
+    // TODO: Recover as many as possible notebooks from the localStorage.
+    return [];
+  }
+}
+
+export function saveNotebooksToStorage(notebooks: Notebook[], previousNotebooks: Notebook[]): void {
+  if (notebooks === previousNotebooks) return;
+
+  const snapshotsSet = new Map<Snapshot, boolean>();
+  // Collect all snapshots from the previous notebooks.
+  for (let i = 0, n = previousNotebooks.length; i < n; i++) {
+    const notebook = previousNotebooks[i];
+    for (let j = 0, m = notebook.snapshots.length; j < m; j++) {
+      // false means to call `removeItem`, true means to call `setItem`.
+      snapshotsSet.set(notebook.snapshots[j], false);
+    }
+  }
+
+  // Fast serialization by manually constructing the JSON string.
+  let buffer = "[";
+  for (let i = 0, n = notebooks.length; i < n; i++) {
+    if (buffer.length > 1) buffer += ",";
+    const notebook = notebooks[i];
+    // These fields are known to be safe without escaping.
+    buffer += `{"id":"${notebook.id}","title":${JSON.stringify(notebook.title)},"created":${notebook.created},"updated":${notebook.updated},"autoRun":${notebook.autoRun},"runtime":"${notebook.runtime}"`;
+    buffer += `,"snapshots":[`;
+    for (let j = 0, m = notebook.snapshots.length; j < m; j++) {
+      const snapshot = notebook.snapshots[j];
+      if (j > 0) buffer += ",";
+      buffer += `"${snapshot.id}"`;
+      // Mark the sanpshot to be saved or removed.
+      if (snapshotsSet.has(snapshot)) {
+        snapshotsSet.delete(snapshot);
+      } else {
+        snapshotsSet.set(snapshot, true);
+      }
+    }
+    buffer += "]}";
+  }
+  buffer += "]";
+  // Save to localStorage.
+  localStorage.setItem(RECHO_FILES_KEY, buffer);
+
+  // Update the snapshots in the localStorage.
+  for (const [snapshot, action] of snapshotsSet.entries()) {
+    if (action) {
+      localStorage.setItem(snapshotKey(snapshot.id), JSON.stringify(snapshot));
+    } else {
+      localStorage.removeItem(snapshotKey(snapshot.id));
+    }
+  }
+}
+
+export function useIsDirty(): [boolean, Dispatch<SetStateAction<boolean>>] {
+  return useAtom(isDirtyAtom);
+}
diff --git a/lib/notebooks/utils.ts b/lib/notebooks/utils.ts
new file mode 100644
index 0000000..1c8afbe
--- /dev/null
+++ b/lib/notebooks/utils.ts
@@ -0,0 +1,81 @@
+import {generate} from "short-uuid";
+import type {Notebook, Snapshot} from "./schema.ts";
+import {objects, predicates} from "friendly-words";
+
+export const DEFAULT_CONTENT = `
+/* 
+** Welcome to                                                                         
+**  ___        _          _  _     _       _              _   
+** | _ \\___ __| |_  ___  | \\| |___| |_ ___| |__  ___  ___| |__
+** |   / -_) _| ' \\/ _ \\ | .\` / _ \\  _/ -_) '_ \\/ _ \\/ _ \\ / /
+** |_|_\\___\\__|_||_\\___/ |_|\\_\\___/\\__\\___|_.__/\\___/\\___/_\\_\\
+**
+** A reactive editor for algorithms and ASCII art. 
+*/
+
+// 1. You can call echo(value) to echo output inline as comments, which allows
+// you to better understand the code by "seeing" every manipulation in-situ.
+
+const text = echo("dog");
+
+const chars = echo(text.split(""));
+
+echo(chars.slice().reverse().join(""));
+
+// 2. You can also call recho.interval(ms) to create data-driven animations,
+// which can help you find the minimalism of ASCII art is fascinating!
+
+const x = recho.interval(100);
+
+echo("🚗💨".padStart(40 - (x % 40)));
+
+// 3. Inputs are also supported, which can help you create interactive
+// notebooks. Click the buttons to see what happens!
+
+const x1 = recho.number(10, {min: 0, max: 40, step: 1});
+
+//➜ "(๑•̀ㅂ•́)و✧"
+echo("~".repeat(x1) + "(๑•̀ㅂ•́)و✧");
+
+// Refer to the links (cmd/ctrl + click) to learn more about Recho Notebook:
+// - Docs: https://recho.dev/notebook/docs
+// - Examples: https://recho.dev/notebook/examples
+// - Github: https://github.com/recho-dev/notebook
+`;
+
+export const LEGACY_RECHO_FILES_KEY = "obs-files";
+
+export const RECHO_FILES_KEY = "recho-files";
+
+const DEFAULT_RUNTIME = "javascript@0.1.0";
+
+export function snapshotKey(id: string): string {
+  return `content_${id}`;
+}
+
+export function createSnapshot(content: string, name: string | null = null, created: number = Date.now()): Snapshot {
+  return {id: generate(), name, content, created};
+}
+
+export function saveSnapshot(snapshot: Snapshot): void {
+  localStorage.setItem(snapshotKey(snapshot.id), JSON.stringify(snapshot));
+}
+
+function generateNotebookTitle() {
+  const adj = predicates[~~(Math.random() * predicates.length)];
+  const obj = objects[~~(Math.random() * objects.length)];
+  return `${adj}-${obj}.js`;
+}
+
+export function createNotebook(): Notebook {
+  const snapshot = createSnapshot(DEFAULT_CONTENT);
+  return {
+    id: generate(),
+    title: generateNotebookTitle(),
+    created: snapshot.created,
+    updated: snapshot.created,
+    autoRun: true,
+    runtime: DEFAULT_RUNTIME,
+    snapshots: [snapshot],
+  };
+}
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..a50f380
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import {clsx, type ClassValue} from "clsx";
+import {twMerge} from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/package.json b/package.json
index 6275ffe..b122521 100644
--- a/package.json
+++ b/package.json
@@ -30,13 +30,14 @@
     "app:dev": "next dev",
     "app:build": "next build",
     "app:start": "next start",
-    "test": "npm run test:lint && npm run test:format && npm run test:js",
+    "test": "tsc --noEmit && npm run test:lint && npm run test:format && npm run test:js",
     "test:js": "TZ=America/New_York vitest --config vite.config.js",
     "test:format": "prettier --check editor runtime test app",
     "test:lint": "eslint"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
+    "@types/friendly-words": "^1.2.2",
     "@types/node": "24.10.1",
     "@types/react": "19.2.6",
     "@types/react-dom": "^19.2.3",
@@ -59,6 +60,7 @@
     "react-tooltip": "^5.30.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.51.0",
     "vite": "^7.3.0",
@@ -79,10 +81,16 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/javascript": "^1.5.4",
     "@observablehq/notebook-kit": "^1.5.0",
+    "@observablehq/runtime": "^6.0.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@uiw/codemirror-theme-github": "^4.25.4",
     "acorn": "^8.15.0",
     "acorn-walk": "^8.3.4",
     "cheerio": "^1.1.2",
+    "class-variance-authority": "^0.7.1",
     "codemirror": "^6.0.2",
     "d3-array": "^3.2.4",
     "d3-dispatch": "^3.0.1",
@@ -99,6 +107,7 @@
     "shiki": "^3.20.0",
     "short-uuid": "^5.2.0",
     "source-map-support": "^0.5.21",
-    "table": "^6.9.0"
+    "table": "^6.9.0",
+    "typebox": "^1.0.73"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3db388e..ba069bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,21 @@ importers:
       '@observablehq/notebook-kit':
         specifier: ^1.5.0
         version: 1.5.0(@types/markdown-it@14.1.2)(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)
+      '@observablehq/runtime':
+        specifier: ^6.0.0
+        version: 6.0.0
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@uiw/codemirror-theme-github':
         specifier: ^4.25.4
         version: 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.8)
@@ -62,6 +77,9 @@ importers:
       cheerio:
         specifier: ^1.1.2
         version: 1.1.2
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
@@ -113,10 +131,16 @@ importers:
       table:
         specifier: ^6.9.0
         version: 6.9.0
+      typebox:
+        specifier: ^1.0.73
+        version: 1.0.73
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4.1.18
         version: 4.1.18
+      '@types/friendly-words':
+        specifier: ^1.2.2
+        version: 1.2.2
       '@types/node':
         specifier: 24.10.1
         version: 24.10.1
@@ -183,6 +207,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -621,6 +648,12 @@ packages:
   '@floating-ui/dom@1.7.4':
     resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
 
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
@@ -956,6 +989,285 @@ packages:
   '@observablehq/runtime@6.0.0':
     resolution: {integrity: sha512-t3UXP69O0JK20HY/neF4/DDDSDorwo92As806Y1pNTgTmj1NtoPyVpesYzfH31gTFOFrXC2cArV+wLpebMk9eA==}
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -1210,6 +1522,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/friendly-words@1.2.2':
+    resolution: {integrity: sha512-8Gr82MHnVM0CAf8r0iXBI5r3OSZydew3tzNCB6TaeEXmWUED8gkInwHh4+IWdyG5JwQBPfEsQmNvTSxbjM3deQ==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -1436,6 +1751,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
@@ -1625,6 +1944,9 @@ packages:
   ci-parallel-vars@1.0.1:
     resolution: {integrity: sha512-uvzpYrpmidaoxvIQHM+rKSrigjOe9feHYbw4uOI2gdfe1C3xIlxO+kVXq83WQWNniTf8bAxVpy+cQeFQsMERKg==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -1807,6 +2129,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -2123,6 +2448,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -2993,12 +3322,42 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-resizable-panels@3.0.6:
     resolution: {integrity: sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==}
     peerDependencies:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-tooltip@5.30.0:
     resolution: {integrity: sha512-Yn8PfbgQ/wmqnL7oBpz1QiDaLKrzZMdSUUdk7nVeGTwzbxCAJiJzR4VSYW+eIO42F1INt57sPUmpgKv0KwJKtg==}
     peerDependencies:
@@ -3374,6 +3733,9 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -3386,6 +3748,9 @@ packages:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
 
+  typebox@1.0.73:
+    resolution: {integrity: sha512-hZSgYMjem+50YuTZzw3XWKyxkDjixapRIAoKPr2ugrpssEwwWzSeowZufiOQNYefnYFtf9KUtYdcnNSj6ZXaSQ==}
+
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -3456,6 +3821,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   utils-merge@1.0.1:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
@@ -4198,6 +4583,12 @@ snapshots:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   '@floating-ui/utils@0.2.10': {}
 
   '@fontsource-variable/inter@5.2.8': {}
@@ -4522,6 +4913,246 @@ snapshots:
 
   '@observablehq/runtime@6.0.0': {}
 
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.6)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.6)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.6)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.6)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.6)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+      '@types/react-dom': 19.2.3(@types/react@19.2.6)
+
+  '@radix-ui/rect@1.1.1': {}
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/rollup-android-arm-eabi@4.54.0':
@@ -4735,6 +5366,8 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/friendly-words@1.2.2': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -4993,6 +5626,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   array-buffer-byte-length@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -5261,6 +5898,10 @@ snapshots:
 
   ci-parallel-vars@1.0.1: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   classnames@2.5.1: {}
 
   clean-stack@4.2.0:
@@ -5433,6 +6074,8 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  detect-node-es@1.1.0: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -5905,6 +6548,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -6724,11 +7369,38 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.6)(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-style-singleton: 2.2.3(@types/react@19.2.6)(react@19.2.3)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  react-remove-scroll@2.7.2(@types/react@19.2.6)(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.6)(react@19.2.3)
+      react-style-singleton: 2.2.3(@types/react@19.2.6)(react@19.2.3)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.6)(react@19.2.3)
+      use-sidecar: 1.1.3(@types/react@19.2.6)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.6
+
   react-resizable-panels@3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  react-style-singleton@2.2.3(@types/react@19.2.6)(react@19.2.3):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.3
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.6
+
   react-tooltip@5.30.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@floating-ui/dom': 1.7.4
@@ -7201,6 +7873,8 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -7212,6 +7886,8 @@ snapshots:
       media-typer: 0.3.0
       mime-types: 2.1.35
 
+  typebox@1.0.73: {}
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -7306,6 +7982,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@19.2.6)(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.6
+
+  use-sidecar@1.1.3(@types/react@19.2.6)(react@19.2.3):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.3
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.6
+
   utils-merge@1.0.1: {}
 
   uuid@9.0.1: {}
diff --git a/test/lib/notebooks/migration.spec.ts b/test/lib/notebooks/migration.spec.ts
new file mode 100644
index 0000000..38025d4
--- /dev/null
+++ b/test/lib/notebooks/migration.spec.ts
@@ -0,0 +1,119 @@
+import {loadNotebooksFromStorage} from "@/lib/notebooks/storage.ts";
+import {RECHO_FILES_KEY} from "@/lib/notebooks/utils.ts";
+import {describe, it, expect} from "vitest";
+
+describe("loadNotebooksFromStorage", () => {
+  it("should be able to load old data from localStorage", () => {
+    localStorage.setItem(RECHO_FILES_KEY, JSON.stringify(sampleData));
+
+    const notebooks = loadNotebooksFromStorage();
+
+    expect(notebooks).toHaveLength(sampleData.length);
+
+    for (let i = 0, n = sampleData.length; i < n; i++) {
+      const result = notebooks[i];
+      const original = sampleData[i];
+      expect(result.id).toBe(original.id);
+      expect(result.title).toBe(original.title);
+      expect(result.created).toBe(new Date(original.created).getTime());
+      expect(result.updated).toBe(new Date(original.updated).getTime());
+      expect(result.autoRun).toBe(original.autoRun);
+      expect(result.runtime).toBe(original.runtime);
+      expect(result.snapshots).toHaveLength(1);
+      expect(result.snapshots[0].content).toBe(original.content);
+    }
+  });
+});
+
+const sampleData = [
+  {
+    id: "5PW6twZuTgkWzMCY6q3Vmv",
+    title: "w-a.js",
+    created: "2025-12-20T13:45:25.050Z",
+    updated: "2026-01-07T06:20:43.023Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "dszL4HiSgYtWsEAccQfnhb",
+    title: "v-s.js",
+    created: "2025-12-22T12:31:02.947Z",
+    updated: "2026-01-07T06:20:40.647Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "bKjmrjw11aSPLAzZiYDHy4",
+    title: "r-h.js",
+    created: "2026-01-07T04:09:17.400Z",
+    updated: "2026-01-07T06:20:35.027Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "sYJTPySp4MZiKatDErSHMb",
+    title: "s-n.js",
+    created: "2025-12-20T17:24:43.604Z",
+    updated: "2026-01-07T06:20:27.557Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "vi5Ag14X3BH4d92EBiJJL7",
+    title: "e-a.js",
+    created: "2025-12-20T18:26:39.993Z",
+    updated: "2026-01-07T06:20:23.621Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "pcqVuHbiLtx14W8eQoSV24",
+    title: "f-p.js",
+    created: "2026-01-06T09:31:32.977Z",
+    updated: "2026-01-06T09:31:32.977Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "hCWCRqo1XVGYLth4Gsxavk",
+    title: "e-v.js",
+    created: "2025-12-20T13:44:23.250Z",
+    updated: "2025-12-20T13:44:37.239Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "d4Wjrx8d53nVoio4YnKHWw",
+    title: "p-s.js",
+    created: "2025-12-20T13:36:21.175Z",
+    updated: "2025-12-20T13:43:19.175Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "pgkVDcraor1D33bsZbfdwN",
+    title: "c-s.js",
+    created: "2025-12-05T14:36:03.366Z",
+    updated: "2025-12-05T17:07:32.715Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+  {
+    id: "9o9u6EUQcv3zmSvqhVm6RT",
+    title: "s-k.js",
+    created: "2025-12-05T08:14:26.335Z",
+    updated: "2025-12-05T08:14:26.335Z",
+    content: "const PLACEHOLDER = 42;",
+    autoRun: true,
+    runtime: "javascript@0.1.0",
+  },
+];
diff --git a/test/lib/notebooks/storage.spec.ts b/test/lib/notebooks/storage.spec.ts
new file mode 100644
index 0000000..1df0c79
--- /dev/null
+++ b/test/lib/notebooks/storage.spec.ts
@@ -0,0 +1,190 @@
+import {describe, it, expect, beforeEach, afterEach, vi} from "vitest";
+import {generate} from "short-uuid";
+import {loadNotebooksFromStorage, saveNotebooksToStorage} from "../../../lib/notebooks/storage.ts";
+import {createSnapshot, DEFAULT_CONTENT, RECHO_FILES_KEY, snapshotKey} from "../../../lib/notebooks/utils.ts";
+import type {Notebook, Snapshot} from "../../../lib/notebooks/schema.ts";
+
+const generatedIds = ["gen-1", "gen-2", "gen-3", "gen-4", "gen-5", "gen-6", "gen-7", "gen-8", "gen-9", "gen-10"];
+let idIndex = 0;
+
+vi.mock("short-uuid", () => ({
+  generate: vi.fn(() => generatedIds[idIndex++] ?? `gen-${idIndex + 1}`),
+}));
+
+function persistSnapshot(snapshot: Snapshot) {
+  localStorage.setItem(snapshotKey(snapshot.id), JSON.stringify(snapshot));
+}
+
+function makeSnapshot(content: string, name: string | null = null, created?: number): Snapshot {
+  const snapshot = createSnapshot(content, name);
+  if (created !== undefined) snapshot.created = created;
+  persistSnapshot(snapshot);
+  return snapshot;
+}
+
+beforeEach(() => {
+  idIndex = 0;
+  localStorage.clear();
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2024-01-01T00:00:00Z"));
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("loadNotebooksFromStorage", () => {
+  it("creates a snapshot when only content is present", () => {
+    const notebookId = generate();
+    const raw = [
+      {
+        id: notebookId,
+        title: "Only Content",
+        created: 1,
+        updated: 2,
+        content: "hello world",
+        autoRun: false,
+        runtime: "js",
+      },
+    ];
+    localStorage.setItem(RECHO_FILES_KEY, JSON.stringify(raw));
+
+    const [notebook] = loadNotebooksFromStorage();
+
+    expect(notebook.title).toBe("Only Content");
+    expect(notebook.snapshots).toHaveLength(1);
+    const [snapshot] = notebook.snapshots;
+    expect(snapshot.content).toBe("hello world");
+    expect(JSON.parse(localStorage.getItem(snapshotKey(snapshot.id))!)).toMatchObject({
+      id: snapshot.id,
+      content: "hello world",
+    });
+  });
+
+  it("loads snapshots when only snapshot ids are present and keeps ordering rules", () => {
+    const latest = makeSnapshot("latest content", null, 500);
+    const olderA = makeSnapshot("older a", null, 100);
+    const olderB = makeSnapshot("older b", "older b", 300);
+    const notebookId = generate();
+
+    const raw = [
+      {
+        id: notebookId,
+        title: "Snapshots Only",
+        created: 10,
+        updated: 11,
+        snapshots: [latest.id, olderA.id, olderB.id],
+        autoRun: true,
+        runtime: "py",
+      },
+    ];
+    localStorage.setItem(RECHO_FILES_KEY, JSON.stringify(raw));
+
+    const [notebook] = loadNotebooksFromStorage();
+
+    expect(notebook.snapshots.map((s) => s.id)).toEqual([latest.id, olderB.id, olderA.id]);
+    expect(notebook.snapshots[1]?.name).toBe("older b");
+  });
+
+  it("prepends a new snapshot when both content and snapshots are present", () => {
+    const existing = makeSnapshot("old", null, 123);
+    const notebookId = generate();
+
+    const raw = [
+      {
+        id: notebookId,
+        title: "Mixed",
+        created: 20,
+        updated: 21,
+        content: "new content",
+        snapshots: [existing.id],
+        autoRun: false,
+        runtime: "js",
+      },
+    ];
+    localStorage.setItem(RECHO_FILES_KEY, JSON.stringify(raw));
+
+    const [notebook] = loadNotebooksFromStorage();
+
+    expect(notebook.snapshots).toHaveLength(2);
+    expect(notebook.snapshots[0]?.content).toBe("new content");
+    expect(notebook.snapshots[1]?.id).toBe(existing.id);
+    expect(JSON.parse(localStorage.getItem(snapshotKey(notebook.snapshots[0]!.id))!)).toMatchObject({
+      content: "new content",
+    });
+  });
+
+  it("initializes a default snapshot when neither content nor snapshots are present", () => {
+    const notebookId = generate();
+    const raw = [
+      {
+        id: notebookId,
+        title: "Empty",
+        created: 30,
+        updated: 31,
+        autoRun: true,
+        runtime: "js",
+      },
+    ];
+    localStorage.setItem(RECHO_FILES_KEY, JSON.stringify(raw));
+
+    const [notebook] = loadNotebooksFromStorage();
+
+    expect(notebook.snapshots).toHaveLength(1);
+    expect(notebook.snapshots[0]?.content).toBe(DEFAULT_CONTENT);
+  });
+});
+
+describe("saveNotebooksToStorage", () => {
+  it("serializes notebooks to JSON and saves snapshot contents", () => {
+    const notebooks: Notebook[] = [
+      {
+        id: generate(),
+        title: "Save 1",
+        created: 1,
+        updated: 2,
+        autoRun: false,
+        runtime: "js",
+        snapshots: [makeSnapshot("content-1", "first", 1), makeSnapshot("content-2", null, 2)],
+      },
+      {
+        id: generate(),
+        title: "Save 2",
+        created: 3,
+        updated: 4,
+        autoRun: true,
+        runtime: "py",
+        snapshots: [makeSnapshot("content-3", null, 3)],
+      },
+      {
+        id: generate(),
+        title: "Save 3",
+        created: 3,
+        updated: 7,
+        autoRun: true,
+        runtime: "py",
+        snapshots: [makeSnapshot("content-3", null, 3)],
+      },
+    ];
+
+    saveNotebooksToStorage(notebooks, []);
+
+    const storedRaw = localStorage.getItem(RECHO_FILES_KEY);
+    expect(storedRaw).not.toBeNull();
+
+    const parsed = JSON.parse(storedRaw!);
+    const notebooksWithSnapshotIds = notebooks.map(({snapshots, ...rest}) => ({
+      ...rest,
+      snapshots: snapshots.map((s) => s.id),
+    }));
+    expect(parsed).toEqual(notebooksWithSnapshotIds);
+
+    const snapshots = notebooks.flatMap((n) => n.snapshots);
+
+    for (const snapshot of snapshots) {
+      expect(JSON.parse(localStorage.getItem(snapshotKey(snapshot.id))!)).toMatchObject({
+        content: snapshot.content,
+      });
+    }
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
index b9d3e17..391e89d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,10 +6,10 @@
     // "outDir": "./dist",
     // Environment Settings
     // See also https://aka.ms/tsconfig/module
-    "module": "nodenext",
+    "module": "preserve",
     "target": "esnext",
     "types": [],
-    "moduleResolution": "nodenext",
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     // For nodejs:
     "lib": ["esnext", "DOM"],