diff --git a/app/(app)/classes/[runId]/class-settings-panel.tsx b/app/(app)/classes/[runId]/class-settings-panel.tsx
new file mode 100644
index 0000000..7c9fafd
--- /dev/null
+++ b/app/(app)/classes/[runId]/class-settings-panel.tsx
@@ -0,0 +1,316 @@
+"use client";
+
+import { useMemo, useState, useTransition, type ChangeEvent } from "react";
+import { useRouter } from "next/navigation";
+import { Archive, Loader2, Save } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input, Textarea } from "@/components/ui/input";
+import type { ParseTestViewModel } from "@/lib/parse-test/contracts";
+import { DeleteClassButton } from "./delete-class-button";
+
+type ClassSettingsPanelProps = {
+  preview: ParseTestViewModel;
+};
+
+function joinList(values: string[]) {
+  return values.join(", ");
+}
+
+function splitList(value: string) {
+  return value
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function nullableTrim(value: string) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function createReviewPayload(preview: ParseTestViewModel, form: ClassSettingsFormState) {
+  return {
+    runId: preview.run.id,
+    course: {
+      title: form.title.trim(),
+      courseCode: nullableTrim(form.courseCode),
+      courseSection: nullableTrim(form.courseSection),
+      term: nullableTrim(form.term),
+      instructorName: nullableTrim(form.instructorName),
+      meetingDays: nullableTrim(form.meetingDays),
+      meetingTime: nullableTrim(form.meetingTime),
+      meetingLocation: nullableTrim(form.meetingLocation),
+      requiredMaterials: splitList(form.requiredMaterials),
+      homeworkTools: splitList(form.homeworkTools),
+      catalogDescription: nullableTrim(form.catalogDescription),
+      studentSummary: form.studentSummary.trim() || preview.course.studentSummary,
+      descriptionSource: preview.course.descriptionSource,
+    },
+    concepts: preview.concepts.map((concept) => ({
+      label: concept.label,
+    })),
+    contacts: preview.contacts.map((contact) => ({
+      role: contact.role,
+      name: contact.name,
+      email: contact.email,
+      officeHours: contact.officeHours,
+      location: contact.location,
+      sourceSnippet: contact.sourceSnippet,
+    })),
+    gradingItems: preview.gradingItems.map((item) => ({
+      label: item.label,
+      weightPercent: item.weightPercent,
+      sourceSnippet: item.sourceSnippet,
+    })),
+    assignments: preview.assignments.map((assignment) => ({
+      title: assignment.title,
+      category: assignment.category,
+      dateText: assignment.dateText,
+      dueAt: assignment.dueAt,
+      timeText: assignment.timeText,
+      weightPercent: assignment.weightPercent,
+      sourceSnippet: assignment.sourceSnippet,
+    })),
+    events: preview.events.map((event) => ({
+      title: event.title,
+      category: event.category,
+      dateText: event.dateText,
+      dueAt: event.dueAt,
+      timeText: event.timeText,
+      location: event.location,
+      sourceSnippet: event.sourceSnippet,
+    })),
+  };
+}
+
+type ClassSettingsFormState = {
+  title: string;
+  courseCode: string;
+  courseSection: string;
+  term: string;
+  instructorName: string;
+  meetingDays: string;
+  meetingTime: string;
+  meetingLocation: string;
+  requiredMaterials: string;
+  homeworkTools: string;
+  catalogDescription: string;
+  studentSummary: string;
+};
+
+function createInitialFormState(preview: ParseTestViewModel): ClassSettingsFormState {
+  return {
+    title: preview.course.title,
+    courseCode: preview.course.courseCode ?? "",
+    courseSection: preview.course.courseSection ?? "",
+    term: preview.course.term ?? "",
+    instructorName: preview.course.instructorName ?? "",
+    meetingDays: preview.course.meetingDays ?? "",
+    meetingTime: preview.course.meetingTime ?? "",
+    meetingLocation: preview.course.meetingLocation ?? "",
+    requiredMaterials: joinList(preview.course.requiredMaterials),
+    homeworkTools: joinList(preview.course.homeworkTools),
+    catalogDescription: preview.course.catalogDescription ?? "",
+    studentSummary: preview.course.studentSummary,
+  };
+}
+
+export function ClassSettingsPanel({ preview }: ClassSettingsPanelProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const initialFormState = useMemo(() => createInitialFormState(preview), [preview]);
+  const [form, setForm] = useState(initialFormState);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isArchiving, setIsArchiving] = useState(false);
+  const isBusy = isSaving || isArchiving || isPending;
+
+  const updateField =
+    (field: keyof ClassSettingsFormState) =>
+    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setForm((current) => ({ ...current, [field]: event.currentTarget.value }));
+    };
+
+  async function saveSettings() {
+    if (!form.title.trim()) {
+      toast.error("Class title is required");
+      return;
+    }
+
+    setIsSaving(true);
+    const toastId = toast.loading("Saving class settings...", {
+      duration: Infinity,
+    });
+
+    try {
+      const response = await fetch("/api/parse-test", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(createReviewPayload(preview, form)),
+      });
+      const payload = (await response.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+
+      if (!response.ok) {
+        throw new Error(payload?.error || "Could not save class settings.");
+      }
+
+      toast.success("Class settings saved", { id: toastId });
+      startTransition(() => router.refresh());
+    } catch (error) {
+      toast.error("Could not save class settings", {
+        id: toastId,
+        description: error instanceof Error ? error.message : undefined,
+        duration: 5000,
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function archiveClass() {
+    setIsArchiving(true);
+    const toastId = toast.loading("Archiving class...", {
+      duration: Infinity,
+    });
+
+    try {
+      const response = await fetch(`/api/classes/${preview.run.id}/archive`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ archived: true }),
+      });
+      const payload = (await response.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+
+      if (!response.ok) {
+        throw new Error(payload?.error || "Could not archive class.");
+      }
+
+      toast.success("Class archived", { id: toastId });
+      startTransition(() => {
+        router.replace("/classes");
+        router.refresh();
+      });
+    } catch (error) {
+      toast.error("Could not archive class", {
+        id: toastId,
+        description: error instanceof Error ? error.message : undefined,
+        duration: 5000,
+      });
+    } finally {
+      setIsArchiving(false);
+    }
+  }
+
+  return (
+    <section className="space-y-4 rounded-[var(--radius-xl)] border border-border bg-surface p-4 shadow-[var(--shadow-card)]">
+      <div>
+        <h2 className="text-base font-semibold text-foreground">Class settings</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Edit the saved class details used across notes and study tools.
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Title</span>
+          <Input value={form.title} onChange={updateField("title")} disabled={isBusy} />
+        </label>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <label className="block space-y-1.5 text-sm font-medium text-foreground">
+            <span>Course code</span>
+            <Input value={form.courseCode} onChange={updateField("courseCode")} disabled={isBusy} />
+          </label>
+          <label className="block space-y-1.5 text-sm font-medium text-foreground">
+            <span>Section</span>
+            <Input value={form.courseSection} onChange={updateField("courseSection")} disabled={isBusy} />
+          </label>
+        </div>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Term</span>
+          <Input value={form.term} onChange={updateField("term")} disabled={isBusy} />
+        </label>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Instructor</span>
+          <Input value={form.instructorName} onChange={updateField("instructorName")} disabled={isBusy} />
+        </label>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <label className="block space-y-1.5 text-sm font-medium text-foreground">
+            <span>Meeting days</span>
+            <Input value={form.meetingDays} onChange={updateField("meetingDays")} disabled={isBusy} />
+          </label>
+          <label className="block space-y-1.5 text-sm font-medium text-foreground">
+            <span>Meeting time</span>
+            <Input value={form.meetingTime} onChange={updateField("meetingTime")} disabled={isBusy} />
+          </label>
+        </div>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Location</span>
+          <Input value={form.meetingLocation} onChange={updateField("meetingLocation")} disabled={isBusy} />
+        </label>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Required materials</span>
+          <Input value={form.requiredMaterials} onChange={updateField("requiredMaterials")} disabled={isBusy} />
+        </label>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Homework tools</span>
+          <Input value={form.homeworkTools} onChange={updateField("homeworkTools")} disabled={isBusy} />
+        </label>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Summary</span>
+          <Textarea
+            value={form.studentSummary}
+            onChange={updateField("studentSummary")}
+            rows={4}
+            disabled={isBusy}
+          />
+        </label>
+        <label className="block space-y-1.5 text-sm font-medium text-foreground">
+          <span>Catalog description</span>
+          <Textarea
+            value={form.catalogDescription}
+            onChange={updateField("catalogDescription")}
+            rows={4}
+            disabled={isBusy}
+          />
+        </label>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <Button
+          type="button"
+          onClick={() => void saveSettings()}
+          disabled={isBusy}
+          leadingIcon={
+            isSaving ? (
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+            ) : (
+              <Save className="h-4 w-4" aria-hidden />
+            )
+          }
+        >
+          {isSaving ? "Saving..." : "Save changes"}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => void archiveClass()}
+          disabled={isBusy}
+          leadingIcon={
+            isArchiving ? (
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+            ) : (
+              <Archive className="h-4 w-4" aria-hidden />
+            )
+          }
+        >
+          {isArchiving ? "Archiving..." : "Archive"}
+        </Button>
+        <DeleteClassButton runId={preview.run.id} classTitle={preview.course.title} />
+      </div>
+    </section>
+  );
+}
diff --git a/app/(app)/classes/[runId]/page.tsx b/app/(app)/classes/[runId]/page.tsx
index d3e9c44..b048e37 100644
--- a/app/(app)/classes/[runId]/page.tsx
+++ b/app/(app)/classes/[runId]/page.tsx
@@ -1,20 +1,16 @@
 import Link from "next/link";
-import { desc, and, eq } from "drizzle-orm";
+import { and, desc, eq } from "drizzle-orm";
 import { notFound } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { getButtonClassName } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { EmptyState } from "@/components/ui/empty-state";
 import { requireServerSession } from "@/lib/auth-session";
 import { db } from "@/lib/db";
 import { note } from "@/lib/db/schema";
 import { getParseTestViewModelForRun } from "@/lib/parse-test/service";
-import { DeleteClassButton } from "./delete-class-button";
+import { ClassSettingsPanel } from "./class-settings-panel";
 
-type SearchParams = Promise<Record<string, string | string[] | undefined>>;
-
-const tabs = ["overview", "contacts", "grading", "schedule", "notes"] as const;
-type ClassTab = (typeof tabs)[number];
 type ScheduleItem = {
   id: string;
   title: string;
@@ -23,16 +19,12 @@ type ScheduleItem = {
   dueAt: string | null;
   timeText: string | null;
 };
+
 type UpcomingClassItem = ScheduleItem & {
   kind: "Assignment" | "Event";
 };
 
-function readTab(value: string | string[] | undefined): ClassTab {
-  const tab = Array.isArray(value) ? value[0] : value;
-  return tabs.includes(tab as ClassTab) ? (tab as ClassTab) : "overview";
-}
-
-function formatTimestamp(value: string) {
+function formatTimestamp(value: string | Date) {
   return new Intl.DateTimeFormat("en-US", {
     dateStyle: "medium",
     timeStyle: "short",
@@ -75,19 +67,17 @@ function getUpcomingClassItems(
     .filter((item) => !item.dueAt || getScheduleTime(item) >= now)
     .sort((left, right) => getScheduleTime(left) - getScheduleTime(right));
 
-  return (upcoming.length > 0 ? upcoming : items.sort(
-    (left, right) => getScheduleTime(right) - getScheduleTime(left),
-  )).slice(0, 6);
+  return (upcoming.length > 0
+    ? upcoming
+    : items.sort((left, right) => getScheduleTime(right) - getScheduleTime(left))
+  ).slice(0, 6);
 }
 
 export default async function ClassDetailPage(props: {
   params: Promise<{ runId: string }>;
-  searchParams?: SearchParams;
 }) {
   const session = await requireServerSession("/classes");
   const { runId } = await props.params;
-  const searchParams = props.searchParams ? await props.searchParams : undefined;
-  const currentTab = readTab(searchParams?.tab);
   const preview = await getParseTestViewModelForRun(session.user.id, runId);
 
   if (!preview) {
@@ -107,289 +97,301 @@ export default async function ClassDetailPage(props: {
     .orderBy(desc(note.updatedAt));
   const upcomingClassItems = getUpcomingClassItems(preview.assignments, preview.events);
 
-  const tabLinkClass = (tab: ClassTab) =>
-    currentTab === tab
-      ? "bg-accent text-accent-foreground"
-      : "bg-surface-muted text-muted-foreground hover:text-foreground";
-
   return (
-    <div className="flex h-full flex-col gap-4">
-      <div className="shrink-0 space-y-4">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <h1 className="text-xl font-semibold tracking-tight text-foreground">{preview.course.title}</h1>
-        <div className="flex flex-wrap gap-2">
-          <Link href={`/notes?classId=${preview.course.id}&new=1`} className={getButtonClassName("primary")}>
-            New note in this class
-          </Link>
-          <Link href={`/notes?classId=${preview.course.id}`} className={getButtonClassName("outline")}>
-            Manage notes
-          </Link>
-          <DeleteClassButton runId={runId} classTitle={preview.course.title} />
+    <div className="flex h-full min-h-0 flex-col gap-4 overflow-hidden">
+      <div className="shrink-0 space-y-3">
+        <Link href="/classes" className={getButtonClassName("ghost", "sm")}>
+          Classes
+        </Link>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h1 className="truncate text-xl font-semibold tracking-tight text-foreground">
+              {preview.course.title}
+            </h1>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {preview.course.courseCode ? (
+                <Badge variant="accent">{preview.course.courseCode}</Badge>
+              ) : null}
+              {preview.course.courseSection ? (
+                <Badge variant="outline">Section {preview.course.courseSection}</Badge>
+              ) : null}
+              {preview.course.term ? <Badge variant="outline">{preview.course.term}</Badge> : null}
+              <Badge variant="outline">
+                {classNotes.length} linked note{classNotes.length === 1 ? "" : "s"}
+              </Badge>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Link
+              href={`/notes?classId=${preview.course.id}&new=1`}
+              className={getButtonClassName("primary")}
+            >
+              New note
+            </Link>
+            <Link
+              href={`/notes?classId=${preview.course.id}`}
+              className={getButtonClassName("outline")}
+            >
+              Notes
+            </Link>
+          </div>
         </div>
       </div>
 
-      <div className="flex flex-wrap gap-2">
-        {preview.course.courseCode ? <Badge variant="accent">{preview.course.courseCode}</Badge> : null}
-        {preview.course.courseSection ? <Badge variant="outline">Section {preview.course.courseSection}</Badge> : null}
-        {preview.course.term ? <Badge variant="outline">{preview.course.term}</Badge> : null}
-        <Badge variant="outline">{classNotes.length} linked note{classNotes.length === 1 ? "" : "s"}</Badge>
-      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto pr-1">
+        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_25rem]">
+          <main className="min-w-0 space-y-4">
+            <section className="grid gap-4 lg:grid-cols-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Class information</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3 text-sm text-muted-foreground">
+                  <p>
+                    <span className="font-medium text-foreground">Instructor:</span>{" "}
+                    {preview.course.instructorName ?? "Not extracted yet"}
+                  </p>
+                  <p>
+                    <span className="font-medium text-foreground">Schedule:</span>{" "}
+                    {[preview.course.meetingDays, preview.course.meetingTime]
+                      .filter(Boolean)
+                      .join(" ") || "Not extracted yet"}
+                  </p>
+                  <p>
+                    <span className="font-medium text-foreground">Location:</span>{" "}
+                    {preview.course.meetingLocation ?? "Not extracted yet"}
+                  </p>
+                  <p>
+                    <span className="font-medium text-foreground">Updated:</span>{" "}
+                    {formatTimestamp(preview.run.updatedAt)}
+                  </p>
+                </CardContent>
+              </Card>
 
-      <div className="flex flex-wrap gap-2">
-        {tabs.map((tab) => (
-          <Link
-            key={tab}
-            href={`/classes/${runId}?tab=${tab}`}
-            className={`rounded-full px-3 py-1.5 text-sm font-medium transition ${tabLinkClass(tab)}`}
-          >
-            {tab[0]?.toUpperCase()}
-            {tab.slice(1)}
-          </Link>
-        ))}
-      </div>
-      </div>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Materials</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <h3 className="text-sm font-medium text-foreground">Required</h3>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {preview.course.requiredMaterials.length > 0 ? (
+                        preview.course.requiredMaterials.map((material) => (
+                          <Badge key={material} variant="outline">
+                            {material}
+                          </Badge>
+                        ))
+                      ) : (
+                        <p className="text-sm text-muted-foreground">None extracted yet.</p>
+                      )}
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-medium text-foreground">Tools</h3>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {preview.course.homeworkTools.length > 0 ? (
+                        preview.course.homeworkTools.map((tool) => (
+                          <Badge key={tool} variant="accent">
+                            {tool}
+                          </Badge>
+                        ))
+                      ) : (
+                        <p className="text-sm text-muted-foreground">None extracted yet.</p>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </section>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
-      {currentTab === "overview" ? (
-        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_360px]">
-          <Card>
-            <CardHeader>
-              <CardTitle>Class information</CardTitle>
-              <CardDescription>Core course details extracted from the syllabus.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3 text-sm text-muted-foreground">
-              <p><span className="font-medium text-foreground">Instructor:</span> {preview.course.instructorName ?? "Not extracted yet"}</p>
-              <p><span className="font-medium text-foreground">Schedule:</span> {[preview.course.meetingDays, preview.course.meetingTime].filter(Boolean).join(" ") || "Not extracted yet"}</p>
-              <p><span className="font-medium text-foreground">Location:</span> {preview.course.meetingLocation ?? "Not extracted yet"}</p>
-              <p><span className="font-medium text-foreground">Updated:</span> {formatTimestamp(preview.run.updatedAt)}</p>
-            </CardContent>
-          </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Upcoming</CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-3 md:grid-cols-2">
+                {upcomingClassItems.length > 0 ? (
+                  upcomingClassItems.map((item) => (
+                    <div
+                      key={`${item.kind}-${item.id}`}
+                      className="rounded-[var(--radius-lg)] border border-border bg-surface-muted px-4 py-3"
+                    >
+                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <Badge variant={item.kind === "Assignment" ? "accent" : "outline"}>
+                          {item.kind}
+                        </Badge>
+                        <Badge variant="outline">{item.category}</Badge>
+                      </div>
+                      <p className="line-clamp-2 text-sm font-medium text-foreground">
+                        {item.title}
+                      </p>
+                      <p className="mt-2 text-xs text-muted-foreground">
+                        {formatDate(item.dueAt, item.dateText)}
+                        {item.timeText ? ` · ${item.timeText}` : ""}
+                      </p>
+                    </div>
+                  ))
+                ) : (
+                  <p className="text-sm text-muted-foreground">No upcoming work parsed yet.</p>
+                )}
+              </CardContent>
+            </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Materials and tools</CardTitle>
-              <CardDescription>Resources pulled from the syllabus.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <h3 className="text-sm font-medium text-foreground">Required materials</h3>
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {preview.course.requiredMaterials.length > 0 ? (
-                    preview.course.requiredMaterials.map((material) => (
-                      <Badge key={material} variant="outline">
-                        {material}
-                      </Badge>
-                    ))
-                  ) : (
-                    <p className="text-sm text-muted-foreground">None extracted yet.</p>
-                  )}
-                </div>
-              </div>
-              <div>
-                <h3 className="text-sm font-medium text-foreground">Homework tools</h3>
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {preview.course.homeworkTools.length > 0 ? (
-                    preview.course.homeworkTools.map((tool) => (
-                      <Badge key={tool} variant="accent">
-                        {tool}
-                      </Badge>
+            <section className="grid gap-4 lg:grid-cols-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Contacts</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {preview.contacts.length > 0 ? (
+                    preview.contacts.map((contact) => (
+                      <div key={contact.id} className="rounded-lg border border-border bg-surface-muted p-3">
+                        <div className="mb-2 flex items-center gap-2">
+                          <Badge variant="accent">{contact.role}</Badge>
+                        </div>
+                        <p className="text-sm font-medium text-foreground">{contact.name}</p>
+                        <p className="text-sm text-muted-foreground">{contact.email ?? "Email not extracted"}</p>
+                        <p className="mt-2 text-xs text-muted-foreground">
+                          {contact.officeHours ?? "Office hours not extracted"}
+                        </p>
+                      </div>
                     ))
                   ) : (
-                    <p className="text-sm text-muted-foreground">None extracted yet.</p>
+                    <p className="text-sm text-muted-foreground">No contacts parsed yet.</p>
                   )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+                </CardContent>
+              </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Upcoming work</CardTitle>
-              <CardDescription>Next deadlines and class events from this syllabus.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {upcomingClassItems.length > 0 ? (
-                upcomingClassItems.map((item) => (
-                  <div
-                    key={`${item.kind}-${item.id}`}
-                    className="rounded-[var(--radius-lg)] border border-border bg-surface-muted px-4 py-3"
-                  >
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0">
-                        <div className="mb-2 flex flex-wrap items-center gap-2">
-                          <Badge variant={item.kind === "Assignment" ? "accent" : "outline"}>
-                            {item.kind}
-                          </Badge>
-                          <Badge variant="outline">{item.category}</Badge>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Grading</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {preview.gradingItems.length > 0 ? (
+                    preview.gradingItems.map((item) => (
+                      <div key={item.id} className="space-y-2">
+                        <div className="flex items-center justify-between gap-3 text-sm">
+                          <span className="font-medium text-foreground">{item.label}</span>
+                          <span className="text-muted-foreground">{item.weightPercent}%</span>
+                        </div>
+                        <div className="h-2 rounded-full bg-surface-muted">
+                          <div
+                            className="h-full rounded-full bg-accent"
+                            style={{ width: `${item.weightPercent}%` }}
+                          />
                         </div>
-                        <p className="line-clamp-2 text-sm font-medium text-foreground">
-                          {item.title}
-                        </p>
-                        {item.timeText ? (
-                          <p className="mt-1 text-xs text-muted-foreground">
-                            {item.timeText}
-                          </p>
-                        ) : null}
                       </div>
-                      <Badge variant="neutral">
-                        {formatDate(item.dueAt, item.dateText)}
-                      </Badge>
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  No upcoming work parsed yet.
-                </p>
-              )}
-              <Link
-                href={`/classes/${runId}?tab=schedule`}
-                className={getButtonClassName("outline", "sm", "w-full justify-center")}
-              >
-                View full schedule
-              </Link>
-            </CardContent>
-          </Card>
-        </div>
-      ) : null}
+                    ))
+                  ) : (
+                    <p className="text-sm text-muted-foreground">No grading items parsed yet.</p>
+                  )}
+                </CardContent>
+              </Card>
+            </section>
 
-      {currentTab === "contacts" ? (
-        preview.contacts.length > 0 ? (
-          <div className="grid gap-4 xl:grid-cols-2">
-            {preview.contacts.map((contact) => (
-              <Card key={contact.id}>
+            <section className="grid gap-4 lg:grid-cols-2">
+              <Card>
                 <CardHeader>
-                  <div className="flex items-center gap-2">
-                    <Badge variant="accent">{contact.role}</Badge>
-                  </div>
-                  <CardTitle>{contact.name}</CardTitle>
-                  <CardDescription>{contact.email ?? "Email not extracted"}</CardDescription>
+                  <CardTitle>Assignments</CardTitle>
                 </CardHeader>
-                <CardContent className="space-y-2 text-sm text-muted-foreground">
-                  <p><span className="font-medium text-foreground">Office hours:</span> {contact.officeHours ?? "Not extracted yet"}</p>
-                  <p><span className="font-medium text-foreground">Location:</span> {contact.location ?? "Not extracted yet"}</p>
+                <CardContent className="space-y-3">
+                  {preview.assignments.length > 0 ? (
+                    preview.assignments.map((assignment) => (
+                      <div key={assignment.id} className="rounded-lg border border-border bg-surface-muted p-3">
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="min-w-0">
+                            <p className="text-sm font-medium text-foreground">{assignment.title}</p>
+                            <p className="text-xs text-muted-foreground">{assignment.category}</p>
+                          </div>
+                          <Badge variant="outline">{formatDate(assignment.dueAt, assignment.dateText)}</Badge>
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <p className="text-sm text-muted-foreground">No assignments parsed yet.</p>
+                  )}
                 </CardContent>
               </Card>
-            ))}
-          </div>
-        ) : (
-          <EmptyState title="No contacts parsed yet" description="Contact cards will appear here when the syllabus includes instructor or TA information." />
-        )
-      ) : null}
 
-      {currentTab === "grading" ? (
-        preview.gradingItems.length > 0 ? (
-          <div className="grid gap-4 xl:grid-cols-2">
-            {preview.gradingItems.map((item) => (
-              <Card key={item.id}>
+              <Card>
                 <CardHeader>
-                  <CardTitle>{item.label}</CardTitle>
-                  <CardDescription>{item.weightPercent}% of final grade</CardDescription>
+                  <CardTitle>Calendar events</CardTitle>
                 </CardHeader>
-                <CardContent>
-                  <div className="h-2 rounded-full bg-surface-muted">
-                    <div className="h-full rounded-full bg-accent" style={{ width: `${item.weightPercent}%` }} />
-                  </div>
+                <CardContent className="space-y-3">
+                  {preview.events.length > 0 ? (
+                    preview.events.map((event) => (
+                      <div key={event.id} className="rounded-lg border border-border bg-surface-muted p-3">
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="min-w-0">
+                            <p className="text-sm font-medium text-foreground">{event.title}</p>
+                            <p className="text-xs text-muted-foreground">{event.category}</p>
+                          </div>
+                          <Badge variant="outline">{formatDate(event.dueAt, event.dateText)}</Badge>
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <p className="text-sm text-muted-foreground">No events parsed yet.</p>
+                  )}
                 </CardContent>
               </Card>
-            ))}
-          </div>
-        ) : (
-          <EmptyState title="No grading items parsed yet" description="Once grading criteria are extracted from the syllabus, they will show up here." />
-        )
-      ) : null}
+            </section>
 
-      {currentTab === "schedule" ? (
-        <div className="grid gap-4 xl:grid-cols-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>Assignments</CardTitle>
-              <CardDescription>Deadlines and graded work parsed from the syllabus.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {preview.assignments.length > 0 ? (
-                preview.assignments.map((assignment) => (
-                  <div key={assignment.id} className="rounded-[var(--radius-lg)] border border-border bg-surface-muted px-4 py-3">
-                    <div className="flex items-center justify-between gap-3">
-                      <div>
-                        <p className="text-sm font-medium text-foreground">{assignment.title}</p>
-                        <p className="text-xs text-muted-foreground">{assignment.category}</p>
+            <Card>
+              <CardHeader>
+                <CardTitle>Linked notes</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {classNotes.length > 0 ? (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {classNotes.map((item) => (
+                      <div key={item.id} className="rounded-lg border border-border bg-surface-muted p-3">
+                        <div className="mb-2 flex flex-wrap items-center gap-2">
+                          <Badge variant="outline">
+                            {item.sourceType === "upload" ? "Imported file" : "Manual note"}
+                          </Badge>
+                          {item.fileName ? <Badge variant="accent">{item.fileName}</Badge> : null}
+                        </div>
+                        <p className="line-clamp-2 text-sm font-medium text-foreground">
+                          {item.title}
+                        </p>
+                        <p className="mt-1 text-xs text-muted-foreground">
+                          Updated {formatTimestamp(item.updatedAt)}
+                        </p>
                       </div>
-                      <Badge variant="outline">{formatDate(assignment.dueAt, assignment.dateText)}</Badge>
-                    </div>
+                    ))}
                   </div>
-                ))
-              ) : (
-                <p className="text-sm text-muted-foreground">No assignments parsed yet.</p>
-              )}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Calendar events</CardTitle>
-              <CardDescription>Read-only events the calendar scaffold can already surface.</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {preview.events.length > 0 ? (
-                preview.events.map((event) => (
-                  <div key={event.id} className="rounded-[var(--radius-lg)] border border-border bg-surface-muted px-4 py-3">
-                    <div className="flex items-center justify-between gap-3">
-                      <div>
-                        <p className="text-sm font-medium text-foreground">{event.title}</p>
-                        <p className="text-xs text-muted-foreground">{event.category}</p>
+                ) : (
+                  <EmptyState
+                    eyebrow="Notes"
+                    title="No notes linked yet"
+                    description="Create a note for this class or link existing notes from the notes workspace."
+                    action={
+                      <div className="flex flex-wrap gap-3">
+                        <Link
+                          href={`/notes?classId=${preview.course.id}&new=1`}
+                          className={getButtonClassName("primary")}
+                        >
+                          New note
+                        </Link>
+                        <Link
+                          href={`/notes?classId=${preview.course.id}`}
+                          className={getButtonClassName("outline")}
+                        >
+                          Link notes
+                        </Link>
                       </div>
-                      <Badge variant="outline">{formatDate(event.dueAt, event.dateText)}</Badge>
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <p className="text-sm text-muted-foreground">No events parsed yet.</p>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-      ) : null}
+                    }
+                  />
+                )}
+              </CardContent>
+            </Card>
+          </main>
 
-      {currentTab === "notes" ? (
-        classNotes.length > 0 ? (
-          <div className="grid gap-4 xl:grid-cols-2">
-            {classNotes.map((item) => (
-              <Card key={item.id}>
-                <CardHeader>
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Badge variant="outline">{item.sourceType === "upload" ? "Imported file" : "Manual note"}</Badge>
-                    {item.fileName ? <Badge variant="accent">{item.fileName}</Badge> : null}
-                  </div>
-                  <CardTitle>{item.title}</CardTitle>
-                  <CardDescription>Updated {formatTimestamp(item.updatedAt.toISOString())}</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Link href={`/notes?classId=${preview.course.id}`} className={getButtonClassName("outline", "md", "w-full justify-center")}>
-                    Open in notes workspace
-                  </Link>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <EmptyState
-            eyebrow="Notes"
-            title="No notes linked yet"
-            description="Create a note directly from this class or open the notes workspace to file existing notes under this class."
-            action={
-              <div className="flex flex-wrap gap-3">
-                <Link href={`/notes?classId=${preview.course.id}&new=1`} className={getButtonClassName("primary")}>
-                  New note in this class
-                </Link>
-                <Link href={`/notes?classId=${preview.course.id}`} className={getButtonClassName("outline")}>
-                  Link existing notes
-                </Link>
-              </div>
-            }
-          />
-        )
-      ) : null}
+          <aside className="min-w-0 xl:sticky xl:top-0 xl:self-start">
+            <ClassSettingsPanel preview={preview} />
+          </aside>
+        </div>
       </div>
     </div>
   );
diff --git a/app/api/classes/[runId]/archive/route.ts b/app/api/classes/[runId]/archive/route.ts
new file mode 100644
index 0000000..b5ada02
--- /dev/null
+++ b/app/api/classes/[runId]/archive/route.ts
@@ -0,0 +1,42 @@
+import { headers } from "next/headers";
+import { NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { setClassArchived } from "@/lib/classes/archive";
+
+export const runtime = "nodejs";
+
+type RouteContext = { params: Promise<{ runId: string }> };
+
+export async function PATCH(request: Request, ctx: RouteContext) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: { archived?: unknown };
+  try {
+    body = (await request.json()) as { archived?: unknown };
+  } catch {
+    body = {};
+  }
+
+  const archived = body.archived !== false;
+  const { runId } = await ctx.params;
+
+  try {
+    const updated = await setClassArchived({
+      userId: session.user.id,
+      runId,
+      archived,
+    });
+
+    if (!updated) {
+      return NextResponse.json({ error: "Class not found" }, { status: 404 });
+    }
+
+    return NextResponse.json({ ok: true, archived });
+  } catch (error) {
+    console.error("[PATCH /api/classes/[runId]/archive]", error);
+    return NextResponse.json({ error: "Could not update class archive state" }, { status: 500 });
+  }
+}
diff --git a/app/globals.css b/app/globals.css
index b13f9f7..c6f4096 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -116,6 +116,103 @@ html.dark body {
   color-scheme: dark;
 }
 
+.app-background {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.app-ascii-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  contain: paint;
+  pointer-events: none;
+  color: color-mix(in srgb, var(--accent) 36%, var(--muted-foreground));
+  opacity: 0.075;
+  mask-image: radial-gradient(circle at 58% 42%, black 0 42%, transparent 74%);
+}
+
+.app-ascii-bg span {
+  position: absolute;
+  top: -8%;
+  left: -8%;
+  width: 82rem;
+  aspect-ratio: 2485 / 1260;
+  background-image: url("/backgrounds/ascii-art.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  filter: invert(1) hue-rotate(180deg) saturate(1.1);
+  transform: translate3d(0, 0, 0);
+  animation: app-ascii-drift 46s linear infinite;
+}
+
+.app-ascii-bg span + span {
+  top: auto;
+  right: -6rem;
+  bottom: -10%;
+  left: auto;
+  opacity: 0.8;
+  animation-name: app-ascii-drift-rotated;
+  animation-duration: 68s;
+  animation-direction: reverse;
+}
+
+.notes-app-background__ascii {
+  z-index: 20;
+  opacity: 0.1;
+  mask-image: linear-gradient(
+    115deg,
+    transparent 0%,
+    black 18%,
+    black 82%,
+    transparent 100%
+  );
+}
+
+.notes-app-background__ascii span {
+  top: -4%;
+  left: -3%;
+  width: min(92rem, 92vw);
+}
+
+.notes-app-background__ascii span + span {
+  right: -10rem;
+  bottom: -8%;
+  width: min(82rem, 82vw);
+}
+
+html.dark .notes-app-background__ascii {
+  color: color-mix(in srgb, var(--accent) 72%, var(--muted-foreground));
+}
+
+@keyframes app-ascii-drift {
+  from {
+    transform: translate3d(-2rem, -1rem, 0);
+  }
+
+  to {
+    transform: translate3d(7rem, 3rem, 0);
+  }
+}
+
+@keyframes app-ascii-drift-rotated {
+  from {
+    transform: translate3d(2rem, 1rem, 0);
+  }
+
+  to {
+    transform: translate3d(-7rem, -3rem, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .app-ascii-bg span {
+    animation: none;
+  }
+}
+
 .note-editor,
 .note-renderer {
   font-family: var(--font-sans), Arial, Helvetica, sans-serif;
@@ -311,7 +408,7 @@ html.dark body {
 .note-editor__block-selected::after {
   position: absolute;
   inset: 0.1rem 0;
-  z-index: 2;
+  z-index: 4;
   border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
   border-left-width: 3px;
   border-radius: 0.45rem;
@@ -778,7 +875,13 @@ html.dark body {
 }
 
 .note-surface--editing {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
+}
+
+.note-surface--editing .note-editor,
+.note-surface--editing .note-editor__canvas {
+  flex: 0 0 auto;
   min-height: 100%;
 }
 
@@ -1020,6 +1123,166 @@ html.dark body {
   pointer-events: none;
 }
 
+.note-mermaid-block {
+  display: block;
+  position: relative;
+  z-index: 0;
+}
+
+.note-mermaid-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.35rem 1.25rem 0;
+}
+
+.note-mermaid-block__lang {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--note-muted-foreground);
+  opacity: 0.7;
+  user-select: none;
+  pointer-events: none;
+}
+
+.note-mermaid-block__toggle {
+  display: inline-flex;
+  width: 1.65rem;
+  height: 1.65rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--note-border);
+  border-radius: 0.45rem;
+  background: var(--note-toolbar-hover);
+  color: var(--foreground);
+  cursor: pointer;
+  padding: 0;
+}
+
+.note-mermaid-block__toggle svg {
+  display: block;
+  width: 1.05rem;
+  height: 1.05rem;
+  stroke: currentColor;
+}
+
+.note-mermaid-block__toggle:hover,
+.note-mermaid-block__toggle:focus-visible {
+  border-color: var(--note-border-strong);
+  background: var(--note-toolbar-active);
+  color: var(--foreground);
+  outline: none;
+}
+
+.note-mermaid-block__textarea {
+  display: block;
+  width: 100%;
+  min-height: 7.5rem;
+  resize: none;
+  border: 1px solid var(--note-border);
+  border-radius: 0.95rem;
+  background: var(--note-surface-muted);
+  color: var(--foreground);
+  padding: 1rem 1.25rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.note-mermaid-block__textarea[hidden] {
+  display: none;
+}
+
+.note-mermaid-block__textarea::placeholder {
+  color: var(--note-muted-foreground);
+}
+
+.note-mermaid-block__textarea:focus {
+  border-color: var(--note-border-strong);
+  outline: none;
+}
+
+.note-mermaid-block__surface {
+  margin-top: 0.5rem;
+  min-height: 8rem;
+  overflow-x: auto;
+  border: 1px solid var(--note-border);
+  border-radius: 0.95rem;
+  background: color-mix(in srgb, var(--note-surface-muted) 88%, transparent);
+  padding: 1rem 1.25rem;
+}
+
+.note-editor .note-mermaid-block__surface,
+.note-editor .note-mermaid-block__diagram,
+.note-editor .note-mermaid-block__error,
+.note-editor .note-mermaid-block__status,
+.note-editor .note-mermaid-block__placeholder {
+  pointer-events: none;
+}
+
+.note-mermaid-block--read .note-mermaid-block__surface {
+  margin-top: 0;
+}
+
+.note-mermaid-block__diagram {
+  display: flex;
+  min-width: max-content;
+  justify-content: center;
+}
+
+.note-mermaid-block__diagram svg {
+  height: auto;
+  max-width: 100%;
+}
+
+.note-mermaid-block__status,
+.note-mermaid-block__placeholder,
+.note-mermaid-block__error {
+  display: flex;
+  min-height: 5.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--note-muted-foreground);
+  font-size: 0.9rem;
+}
+
+.note-mermaid-block__error {
+  flex-direction: column;
+  align-items: stretch;
+  color: var(--color-danger);
+}
+
+.note-mermaid-block__error strong {
+  font-weight: 600;
+}
+
+.note-mermaid-block__error span {
+  overflow-wrap: anywhere;
+  color: var(--foreground);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+
+.note-mermaid-block__error pre {
+  margin: 0.5rem 0 0;
+  overflow-x: auto;
+  border-radius: 0.7rem;
+  background: var(--note-code-bg);
+  color: var(--note-code-fg);
+  padding: 0.8rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
 /* ---- Inline math spans ---- */
 .note-inline-math {
   display: inline;
diff --git a/app/notes/notes-workspace.tsx b/app/notes/notes-workspace.tsx
index d649825..1a81b39 100644
--- a/app/notes/notes-workspace.tsx
+++ b/app/notes/notes-workspace.tsx
@@ -26,6 +26,8 @@ import {
   X,
 } from "lucide-react";
 import { NoteSurface } from "@/components/note-editor/note-surface";
+import { AsciiBackground } from "@/components/shell/ascii-background";
+import { useAsciiBackgroundEnabled } from "@/components/shell/background-preference";
 import { Button } from "@/components/ui/button";
 import { cx } from "@/lib/utils";
 import {
@@ -213,6 +215,7 @@ export function NotesWorkspace({
   resetHref,
 }: NotesWorkspaceProps) {
   const router = useRouter();
+  const asciiBackgroundEnabled = useAsciiBackgroundEnabled();
   const [notes, setNotes] = useState(() => sortWorkspaceNotes(initialNotes));
   const initialSelectedNote = initialClassId
     ? (initialNotes.find((note) => note.classId === initialClassId) ??
@@ -1325,9 +1328,12 @@ export function NotesWorkspace({
         {/* ---------------------------------------------------------------- */}
         {/* Editor area                                                        */}
         {/* ---------------------------------------------------------------- */}
-        <section className="h-full min-h-0 bg-background">
+        <section className="notes-app-background relative h-full min-h-0 overflow-hidden bg-background">
+          {asciiBackgroundEnabled ? (
+            <AsciiBackground className="notes-app-background__ascii" />
+          ) : null}
           {selectedNote ? (
-            <div className="flex h-full min-h-0 flex-col">
+            <div className="relative z-10 flex h-full min-h-0 flex-col">
               <div className="flex min-h-12 items-center justify-between gap-3 border-b border-border px-4">
                 <div className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground">
                   <FileText className="h-4 w-4 shrink-0" aria-hidden="true" />
@@ -1429,7 +1435,7 @@ export function NotesWorkspace({
               </div>
             </div>
           ) : (
-            <div className="flex h-full min-h-0 items-center justify-center p-6">
+            <div className="relative z-10 flex h-full min-h-0 items-center justify-center p-6">
               <div className="flex gap-2">
                 <Button
                   type="button"
diff --git a/components/auth/profile-settings-form.tsx b/components/auth/profile-settings-form.tsx
index 319a22b..e998998 100644
--- a/components/auth/profile-settings-form.tsx
+++ b/components/auth/profile-settings-form.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { useState, useTransition, type FormEvent } from "react";
 import { SignOutButton } from "@/components/auth/sign-out-button";
 import { SidebarBehaviorControl } from "@/components/shell/sidebar-preference";
+import { AsciiBackgroundControl } from "@/components/shell/background-preference";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
@@ -160,6 +161,16 @@ export function ProfileSettingsForm({ name, email }: ProfileSettingsFormProps) {
             </div>
           </div>
 
+          <div className="border-t border-border pt-5">
+            <p className="text-sm font-medium text-foreground">Background texture</p>
+            <p className="mt-1 text-sm leading-6 text-muted-foreground">
+              Toggle the animated ASCII background for visual clarity.
+            </p>
+            <div className="mt-3">
+              <AsciiBackgroundControl />
+            </div>
+          </div>
+
           <div className="border-t border-border pt-5">
             <p className="text-sm font-medium text-foreground">Sidebar</p>
             <p className="mt-1 text-sm leading-6 text-muted-foreground">
diff --git a/components/note-editor/README.md b/components/note-editor/README.md
new file mode 100644
index 0000000..3ea8610
--- /dev/null
+++ b/components/note-editor/README.md
@@ -0,0 +1,25 @@
+# Note Editor Map
+
+Use this folder by responsibility:
+
+- `note-editor.tsx` - Editor shell, persistence bridge, selection/reorder behavior.
+- `note-surface.tsx` - Switches between editable editor and read-only renderer.
+- `note-renderer.tsx` - Small read-only Markdown wrapper.
+- `markdown-components.tsx` - ReactMarkdown component mapping for images, inline code, code fences, Mermaid fences.
+- `blocks/` - Block-specific tools and views.
+  - `code-block-tool.ts` / `code-block-view.tsx` - Code editing and rendering.
+  - `mermaid-block-tool.ts` / `mermaid-block-view.tsx` / `mermaid-renderer.ts` - Mermaid editing, rendering, errors.
+  - `math-block-tool.ts` - MathLive equation block.
+- `block-transforms.ts` - Slash commands, “Turn into”, block conversion helpers.
+- `block-clipboard.ts` - Multi-block copy/cut/paste serialization.
+- `editor-menus.tsx` - Slash menu and block context menu UI.
+- `editorjs-tools.ts` - Editor.js dynamic imports and tool registry.
+- `image-upload.ts` - Temporary inline image upload fallback.
+- `document-utils.ts` - Small document helpers.
+- `__tests__/` - Note editor tests. Implementation folders stay test-file free.
+
+Markdown parsing/serialization lives outside React:
+
+- `lib/notes/parse-markdown.ts` - Markdown to note blocks.
+- `lib/notes/markdown.ts` - Note blocks to Markdown.
+- `lib/notes/types.ts` - Note block schemas and types.
diff --git a/components/note-editor/math-block-tool.test.ts b/components/note-editor/__tests__/math-block-tool.test.ts
similarity index 97%
rename from components/note-editor/math-block-tool.test.ts
rename to components/note-editor/__tests__/math-block-tool.test.ts
index 4548853..807b40e 100644
--- a/components/note-editor/math-block-tool.test.ts
+++ b/components/note-editor/__tests__/math-block-tool.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { MathBlockTool } from "@/components/note-editor/math-block-tool";
+import { MathBlockTool } from "@/components/note-editor/blocks/math-block-tool";
 
 describe("MathBlockTool", () => {
   function createTool() {
diff --git a/components/note-editor/note-editor.test.tsx b/components/note-editor/__tests__/note-editor.test.tsx
similarity index 100%
rename from components/note-editor/note-editor.test.tsx
rename to components/note-editor/__tests__/note-editor.test.tsx
diff --git a/components/note-editor/note-renderer.test.tsx b/components/note-editor/__tests__/note-renderer.test.tsx
similarity index 100%
rename from components/note-editor/note-renderer.test.tsx
rename to components/note-editor/__tests__/note-renderer.test.tsx
diff --git a/components/note-editor/note-surface.test.tsx b/components/note-editor/__tests__/note-surface.test.tsx
similarity index 100%
rename from components/note-editor/note-surface.test.tsx
rename to components/note-editor/__tests__/note-surface.test.tsx
diff --git a/components/note-editor/__tests__/selection-geometry.test.ts b/components/note-editor/__tests__/selection-geometry.test.ts
new file mode 100644
index 0000000..a712b55
--- /dev/null
+++ b/components/note-editor/__tests__/selection-geometry.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { isPointInHorizontalEdgeGutter } from "@/components/note-editor/selection-geometry";
+
+describe("note editor selection geometry", () => {
+  const rect = {
+    left: 100,
+    right: 900,
+    top: 50,
+    bottom: 1250,
+  };
+
+  it("accepts points in the left and right editor gutters across a tall note", () => {
+    expect(isPointInHorizontalEdgeGutter(rect, 120, 1100)).toBe(true);
+    expect(isPointInHorizontalEdgeGutter(rect, 880, 1100)).toBe(true);
+  });
+
+  it("rejects middle content points and points outside the editor surface", () => {
+    expect(isPointInHorizontalEdgeGutter(rect, 500, 1100)).toBe(false);
+    expect(isPointInHorizontalEdgeGutter(rect, 120, 1300)).toBe(false);
+    expect(isPointInHorizontalEdgeGutter(rect, 40, 1100)).toBe(false);
+  });
+
+  it("bounds the gutter width for narrow editor surfaces", () => {
+    const narrowRect = {
+      left: 0,
+      right: 150,
+      top: 0,
+      bottom: 300,
+    };
+
+    expect(isPointInHorizontalEdgeGutter(narrowRect, 49, 20)).toBe(true);
+    expect(isPointInHorizontalEdgeGutter(narrowRect, 75, 20)).toBe(false);
+    expect(isPointInHorizontalEdgeGutter(narrowRect, 101, 20)).toBe(true);
+  });
+});
diff --git a/components/note-editor/block-clipboard.ts b/components/note-editor/block-clipboard.ts
new file mode 100644
index 0000000..1b11a56
--- /dev/null
+++ b/components/note-editor/block-clipboard.ts
@@ -0,0 +1,52 @@
+import { createNoteContent } from "@/lib/notes/markdown";
+import { NoteDocumentSchema, type NoteBlock } from "@/lib/notes/types";
+
+const NOTE_BLOCKS_CLIPBOARD_TYPE = "application/x-taskmaster-note-blocks";
+
+export function writeBlocksToClipboard(
+  clipboardData: DataTransfer,
+  blocks: NoteBlock[],
+  cloneBlocks: (blocks: NoteBlock[]) => NoteBlock[],
+) {
+  const document = {
+    time: Date.now(),
+    blocks,
+  };
+  const payload = JSON.stringify({
+    type: "taskmaster.noteBlocks",
+    version: 1,
+    blocks: cloneBlocks(blocks),
+  });
+
+  clipboardData.setData(NOTE_BLOCKS_CLIPBOARD_TYPE, payload);
+  clipboardData.setData("text/plain", createNoteContent(document).markdown);
+}
+
+export function readBlocksFromClipboard(clipboardData: DataTransfer) {
+  const raw =
+    clipboardData.getData(NOTE_BLOCKS_CLIPBOARD_TYPE) ||
+    clipboardData.getData("text/plain");
+  if (!raw) {
+    return [];
+  }
+
+  try {
+    const payload = JSON.parse(raw) as {
+      type?: string;
+      blocks?: unknown;
+    };
+    if (
+      payload.type !== "taskmaster.noteBlocks" ||
+      !Array.isArray(payload.blocks)
+    ) {
+      return [];
+    }
+
+    return NoteDocumentSchema.parse({
+      time: Date.now(),
+      blocks: payload.blocks,
+    }).blocks;
+  } catch {
+    return [];
+  }
+}
diff --git a/components/note-editor/block-transforms.ts b/components/note-editor/block-transforms.ts
new file mode 100644
index 0000000..5ad6cf4
--- /dev/null
+++ b/components/note-editor/block-transforms.ts
@@ -0,0 +1,230 @@
+import type { NoteBlock } from "@/lib/notes/types";
+
+export type BlockConversionTarget =
+  | { type: "paragraph" }
+  | { type: "header"; level: 1 | 2 | 3 | 4 }
+  | { type: "list"; style: "ordered" | "unordered" | "checklist" }
+  | { type: "quote" }
+  | { type: "code" }
+  | { type: "mermaid" }
+  | { type: "math" };
+
+export type SlashCommand = {
+  id: string;
+  label: string;
+  hint: string;
+  keywords: string[];
+  target: BlockConversionTarget;
+};
+
+export const SLASH_COMMANDS: SlashCommand[] = [
+  {
+    id: "text",
+    label: "Text",
+    hint: "Plain text block",
+    keywords: ["paragraph", "plain"],
+    target: { type: "paragraph" },
+  },
+  {
+    id: "h1",
+    label: "Heading 1",
+    hint: "Large section heading",
+    keywords: ["heading", "title", "h1"],
+    target: { type: "header", level: 1 },
+  },
+  {
+    id: "h2",
+    label: "Heading 2",
+    hint: "Medium section heading",
+    keywords: ["heading", "subtitle", "h2"],
+    target: { type: "header", level: 2 },
+  },
+  {
+    id: "h3",
+    label: "Heading 3",
+    hint: "Small section heading",
+    keywords: ["heading", "h3"],
+    target: { type: "header", level: 3 },
+  },
+  {
+    id: "bullet",
+    label: "Bulleted list",
+    hint: "Simple unordered list",
+    keywords: ["list", "ul", "bullet"],
+    target: { type: "list", style: "unordered" },
+  },
+  {
+    id: "number",
+    label: "Numbered list",
+    hint: "Ordered list",
+    keywords: ["list", "ol", "number"],
+    target: { type: "list", style: "ordered" },
+  },
+  {
+    id: "todo",
+    label: "Checklist",
+    hint: "Track tasks",
+    keywords: ["todo", "task", "check"],
+    target: { type: "list", style: "checklist" },
+  },
+  {
+    id: "quote",
+    label: "Quote",
+    hint: "Callout text",
+    keywords: ["blockquote", "callout"],
+    target: { type: "quote" },
+  },
+  {
+    id: "code",
+    label: "Code",
+    hint: "Code block",
+    keywords: ["pre", "snippet"],
+    target: { type: "code" },
+  },
+  {
+    id: "mermaid",
+    label: "Mermaid",
+    hint: "Diagram block",
+    keywords: ["diagram", "flowchart", "chart", "graph"],
+    target: { type: "mermaid" },
+  },
+  {
+    id: "math",
+    label: "Math",
+    hint: "Equation block",
+    keywords: ["equation", "latex"],
+    target: { type: "math" },
+  },
+];
+
+export function stripHtml(value: string) {
+  return value
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/(p|div|li|blockquote|h[1-6])>/gi, "\n")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+export function getBlockText(block: NoteBlock, options?: { plain?: boolean }) {
+  const normalize = options?.plain ? stripHtml : (value: string) => value;
+
+  switch (block.type) {
+    case "paragraph":
+    case "header":
+      return normalize(block.data.text);
+    case "quote":
+      return normalize(block.data.text);
+    case "list":
+      return normalize(block.data.items.map((item) => item.content).join("\n"));
+    case "code":
+    case "mermaid":
+      return block.data.code;
+    case "math":
+      return block.data.latex;
+    case "image":
+      return normalize(block.data.caption);
+    default:
+      return "";
+  }
+}
+
+export function convertBlock(
+  block: NoteBlock,
+  target: BlockConversionTarget,
+): NoteBlock {
+  const richText = getBlockText(block);
+  const plainText = getBlockText(block, { plain: true });
+
+  switch (target.type) {
+    case "paragraph":
+      return { type: "paragraph", data: { text: richText } };
+    case "header":
+      return { type: "header", data: { text: richText, level: target.level } };
+    case "list":
+      return {
+        type: "list",
+        data: {
+          style: target.style,
+          items: plainText
+            .split("\n")
+            .map((item) => item.trim())
+            .filter(Boolean)
+            .map((item) => ({
+              content: item,
+              meta: target.style === "checklist" ? { checked: false } : {},
+              items: [],
+            })),
+        },
+      };
+    case "quote":
+      return {
+        type: "quote",
+        data: { text: richText, caption: "", alignment: "left" },
+      };
+    case "code":
+      return { type: "code", data: { code: plainText } };
+    case "mermaid":
+      return { type: "mermaid", data: { code: plainText } };
+    case "math":
+      return { type: "math", data: { latex: plainText } };
+    default:
+      return block;
+  }
+}
+
+export function createEmptyBlockForTarget(target: BlockConversionTarget): NoteBlock {
+  switch (target.type) {
+    case "paragraph":
+      return { type: "paragraph", data: { text: "" } };
+    case "header":
+      return { type: "header", data: { text: "", level: target.level } };
+    case "list":
+      return {
+        type: "list",
+        data: {
+          style: target.style,
+          items: [
+            {
+              content: "",
+              meta: target.style === "checklist" ? { checked: false } : {},
+              items: [],
+            },
+          ],
+        },
+      };
+    case "quote":
+      return {
+        type: "quote",
+        data: { text: "", caption: "", alignment: "left" },
+      };
+    case "code":
+      return { type: "code", data: { code: "" } };
+    case "mermaid":
+      return { type: "mermaid", data: { code: "" } };
+    case "math":
+      return { type: "math", data: { latex: "" } };
+    default:
+      return { type: "paragraph", data: { text: "" } };
+  }
+}
+
+export function getSlashCommandMatches(query: string) {
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (!normalizedQuery) {
+    return SLASH_COMMANDS;
+  }
+
+  return SLASH_COMMANDS.filter((command) =>
+    [command.label, command.id, ...command.keywords].some((value) =>
+      value.toLowerCase().includes(normalizedQuery),
+    ),
+  );
+}
diff --git a/components/note-editor/code-block-tool.ts b/components/note-editor/blocks/code-block-tool.ts
similarity index 100%
rename from components/note-editor/code-block-tool.ts
rename to components/note-editor/blocks/code-block-tool.ts
diff --git a/components/note-editor/code-block-view.tsx b/components/note-editor/blocks/code-block-view.tsx
similarity index 89%
rename from components/note-editor/code-block-view.tsx
rename to components/note-editor/blocks/code-block-view.tsx
index 8c9b077..93d627c 100644
--- a/components/note-editor/code-block-view.tsx
+++ b/components/note-editor/blocks/code-block-view.tsx
@@ -8,8 +8,6 @@ type CodeBlockViewProps = {
 };
 
 export function CodeBlockView({ data }: CodeBlockViewProps) {
-  const highlighted = data.code.trim().length > 0 ? highlightCode(data.code) : null;
-
   return (
     <div className="note-code-block note-code-block--read">
       <pre className="note-code-block__surface">
diff --git a/components/note-editor/math-block-tool.ts b/components/note-editor/blocks/math-block-tool.ts
similarity index 100%
rename from components/note-editor/math-block-tool.ts
rename to components/note-editor/blocks/math-block-tool.ts
diff --git a/components/note-editor/blocks/mermaid-block-tool.ts b/components/note-editor/blocks/mermaid-block-tool.ts
new file mode 100644
index 0000000..3344ff8
--- /dev/null
+++ b/components/note-editor/blocks/mermaid-block-tool.ts
@@ -0,0 +1,283 @@
+import type {
+  API,
+  BlockAPI,
+  BlockTool,
+  BlockToolConstructorOptions,
+  ToolboxConfig,
+} from "@editorjs/editorjs";
+import {
+  getMermaidErrorMessage,
+  renderMermaidSvg,
+} from "@/components/note-editor/blocks/mermaid-renderer";
+import type { NoteMermaidBlockData } from "@/lib/notes/types";
+
+const MERMAID_TOOL_ICON = `
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 4.5H14V8.5H6V4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M3.5 12.5H8.5V16.5H3.5V12.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M11.5 12.5H16.5V16.5H11.5V12.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M10 8.5V10.5M10 10.5H6V12.5M10 10.5H14V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+
+const SHOW_SOURCE_ICON = `
+  <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+
+const HIDE_SOURCE_ICON = `
+  <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 12L10 7L15 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+
+export class MermaidBlockTool implements BlockTool {
+  public static get toolbox(): ToolboxConfig {
+    return {
+      title: "Mermaid",
+      icon: MERMAID_TOOL_ICON,
+    };
+  }
+
+  public static get enableLineBreaks() {
+    return true;
+  }
+
+  public static get isReadOnlySupported() {
+    return true;
+  }
+
+  private readonly readOnly: boolean;
+  private readonly api: API;
+  private readonly block: BlockAPI;
+  private data: NoteMermaidBlockData;
+  private textarea: HTMLTextAreaElement | null = null;
+  private toggleButton: HTMLButtonElement | null = null;
+  private previewNode: HTMLDivElement | null = null;
+  private renderTimer: number | null = null;
+  private renderVersion = 0;
+
+  private readonly stopEditorEventPropagation = (event: Event) => {
+    event.stopPropagation();
+  };
+
+  private readonly handleTextareaInput = () => {
+    this.syncData();
+    this.syncTextareaHeight();
+    this.schedulePreviewRender();
+  };
+
+  private readonly handleTextareaKeyDown = (event: KeyboardEvent) => {
+    if (!this.textarea) {
+      return;
+    }
+
+    if (event.key === "Tab") {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const { selectionStart, selectionEnd, value } = this.textarea;
+      const nextValue = `${value.slice(0, selectionStart)}  ${value.slice(selectionEnd)}`;
+
+      this.textarea.value = nextValue;
+      this.textarea.selectionStart = selectionStart + 2;
+      this.textarea.selectionEnd = selectionStart + 2;
+
+      this.syncData();
+      this.syncTextareaHeight();
+      this.schedulePreviewRender();
+      return;
+    }
+
+    this.stopEditorEventPropagation(event);
+  };
+
+  constructor({ api, block, data, readOnly }: BlockToolConstructorOptions<NoteMermaidBlockData>) {
+    this.api = api;
+    this.block = block;
+    this.readOnly = readOnly;
+    this.data = {
+      code: data.code ?? "",
+      sourceCollapsed: data.sourceCollapsed ?? false,
+    };
+  }
+
+  public render() {
+    const wrapper = document.createElement("div");
+    wrapper.className = "note-mermaid-block";
+
+    const header = document.createElement("div");
+    header.className = "note-mermaid-block__header";
+
+    const langLabel = document.createElement("span");
+    langLabel.className = "note-mermaid-block__lang";
+    langLabel.textContent = "mermaid";
+    header.append(langLabel);
+
+    if (!this.readOnly) {
+      const toggleButton = document.createElement("button");
+      toggleButton.type = "button";
+      toggleButton.className = "note-mermaid-block__toggle";
+      toggleButton.addEventListener("click", this.handleToggleSource);
+      this.toggleButton = toggleButton;
+      header.append(toggleButton);
+    }
+
+    wrapper.append(header);
+
+    if (!this.readOnly) {
+      this.textarea = document.createElement("textarea");
+      this.textarea.className = "note-mermaid-block__textarea";
+      this.textarea.value = this.data.code;
+      this.textarea.placeholder = "graph TD\n  A --> B";
+      this.textarea.rows = 3;
+      this.textarea.spellcheck = false;
+      this.textarea.addEventListener("beforeinput", this.stopEditorEventPropagation);
+      this.textarea.addEventListener("input", this.handleTextareaInput);
+      this.textarea.addEventListener("keydown", this.handleTextareaKeyDown);
+      this.textarea.addEventListener("keyup", this.stopEditorEventPropagation);
+      wrapper.append(this.textarea);
+    }
+
+    this.previewNode = document.createElement("div");
+    this.previewNode.className = "note-mermaid-block__surface";
+    wrapper.append(this.previewNode);
+
+    this.syncTextareaHeight();
+    this.syncSourceVisibility();
+    this.renderPreview();
+
+    return wrapper;
+  }
+
+  public save() {
+    this.syncData();
+    return this.data;
+  }
+
+  public validate(blockData: NoteMermaidBlockData) {
+    return typeof blockData.code === "string";
+  }
+
+  public destroy() {
+    if (this.renderTimer !== null) {
+      window.clearTimeout(this.renderTimer);
+      this.renderTimer = null;
+    }
+
+    this.textarea?.removeEventListener("beforeinput", this.stopEditorEventPropagation);
+    this.textarea?.removeEventListener("input", this.handleTextareaInput);
+    this.textarea?.removeEventListener("keydown", this.handleTextareaKeyDown);
+    this.textarea?.removeEventListener("keyup", this.stopEditorEventPropagation);
+    this.toggleButton?.removeEventListener("click", this.handleToggleSource);
+
+    this.renderVersion += 1;
+    this.textarea = null;
+    this.toggleButton = null;
+    this.previewNode = null;
+  }
+
+  private readonly handleToggleSource = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.syncData();
+    this.data = {
+      ...this.data,
+      sourceCollapsed: !this.data.sourceCollapsed,
+    };
+    this.syncSourceVisibility();
+    void this.api.blocks.update(this.block.id, this.data).catch(() => undefined);
+  };
+
+  private syncData() {
+    this.data = {
+      code: this.textarea?.value ?? this.data.code,
+      sourceCollapsed: this.data.sourceCollapsed,
+    };
+  }
+
+  private syncTextareaHeight() {
+    if (!this.textarea) {
+      return;
+    }
+
+    this.textarea.style.height = "auto";
+    this.textarea.style.height = `${Math.max(this.textarea.scrollHeight, 120)}px`;
+  }
+
+  private syncSourceVisibility() {
+    const isCollapsed = Boolean(this.data.sourceCollapsed);
+
+    if (this.textarea) {
+      this.textarea.hidden = isCollapsed;
+    }
+
+    if (this.toggleButton) {
+      this.toggleButton.innerHTML = isCollapsed ? SHOW_SOURCE_ICON : HIDE_SOURCE_ICON;
+      this.toggleButton.setAttribute(
+        "aria-label",
+        isCollapsed ? "Show Mermaid code" : "Hide Mermaid code",
+      );
+      this.toggleButton.setAttribute("aria-pressed", String(isCollapsed));
+    }
+  }
+
+  private schedulePreviewRender() {
+    if (this.renderTimer !== null) {
+      window.clearTimeout(this.renderTimer);
+    }
+
+    this.renderTimer = window.setTimeout(() => {
+      this.renderTimer = null;
+      this.renderPreview();
+    }, 300);
+  }
+
+  private renderPreview() {
+    const previewNode = this.previewNode;
+    if (!previewNode) {
+      return;
+    }
+
+    const code = this.data.code.trim();
+    const version = this.renderVersion + 1;
+    this.renderVersion = version;
+
+    if (!code) {
+      previewNode.innerHTML = '<div class="note-mermaid-block__placeholder">No diagram yet.</div>';
+      return;
+    }
+
+    previewNode.innerHTML = '<div class="note-mermaid-block__status">Rendering diagram...</div>';
+
+    void renderMermaidSvg(code)
+      .then((svg) => {
+        if (this.renderVersion !== version || !this.previewNode) {
+          return;
+        }
+
+        this.previewNode.innerHTML = "";
+        const diagram = document.createElement("div");
+        diagram.className = "note-mermaid-block__diagram";
+        diagram.innerHTML = svg;
+        this.previewNode.append(diagram);
+      })
+      .catch((error: unknown) => {
+        if (this.renderVersion !== version || !this.previewNode) {
+          return;
+        }
+
+        const errorNode = document.createElement("div");
+        errorNode.className = "note-mermaid-block__error";
+        const title = document.createElement("strong");
+        title.textContent = "Could not render this Mermaid diagram.";
+        const message = document.createElement("span");
+        message.textContent = getMermaidErrorMessage(error);
+        errorNode.append(title, message);
+        this.previewNode.innerHTML = "";
+        this.previewNode.append(errorNode);
+      });
+  }
+}
diff --git a/components/note-editor/blocks/mermaid-block-view.tsx b/components/note-editor/blocks/mermaid-block-view.tsx
new file mode 100644
index 0000000..c6d3997
--- /dev/null
+++ b/components/note-editor/blocks/mermaid-block-view.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+import type { NoteMermaidBlockData } from "@/lib/notes/types";
+import {
+  getMermaidErrorMessage,
+  renderMermaidSvg,
+} from "@/components/note-editor/blocks/mermaid-renderer";
+
+type MermaidBlockViewProps = {
+  data: NoteMermaidBlockData;
+};
+
+type MermaidRenderState =
+  | { code: string; status: "success"; svg: string }
+  | { code: string; status: "error"; message: string };
+
+export function MermaidBlockView({ data }: MermaidBlockViewProps) {
+  const code = data.code.trim();
+  const [renderState, setRenderState] = useState<MermaidRenderState | null>(null);
+  const visibleState = !code
+    ? ({ status: "idle" } as const)
+    : renderState?.code === code
+      ? renderState
+      : ({ status: "loading" } as const);
+
+  useEffect(() => {
+    let disposed = false;
+
+    if (!code) {
+      return;
+    }
+
+    renderMermaidSvg(code)
+      .then((svg) => {
+        if (!disposed) {
+          setRenderState({ code, status: "success", svg });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!disposed) {
+          setRenderState({
+            code,
+            status: "error",
+            message: getMermaidErrorMessage(error),
+          });
+        }
+      });
+
+    return () => {
+      disposed = true;
+    };
+  }, [code]);
+
+  return (
+    <div className="note-mermaid-block note-mermaid-block--read">
+      <div className="note-mermaid-block__header">
+        <span className="note-mermaid-block__lang">mermaid</span>
+      </div>
+      <div className="note-mermaid-block__surface">
+        {visibleState.status === "idle" ? (
+          <div className="note-mermaid-block__placeholder">No diagram yet.</div>
+        ) : null}
+        {visibleState.status === "loading" ? (
+          <div className="note-mermaid-block__status">
+            <Loader2 className="size-4 animate-spin" />
+            Rendering diagram...
+          </div>
+        ) : null}
+        {visibleState.status === "error" ? (
+          <div className="note-mermaid-block__error">
+            <strong>Could not render this Mermaid diagram.</strong>
+            <span>{visibleState.message}</span>
+            <pre>{data.code}</pre>
+          </div>
+        ) : null}
+        {visibleState.status === "success" ? (
+          <div
+            className="note-mermaid-block__diagram"
+            dangerouslySetInnerHTML={{ __html: visibleState.svg }}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/components/note-editor/blocks/mermaid-renderer.ts b/components/note-editor/blocks/mermaid-renderer.ts
new file mode 100644
index 0000000..bb73540
--- /dev/null
+++ b/components/note-editor/blocks/mermaid-renderer.ts
@@ -0,0 +1,34 @@
+let renderCounter = 0;
+
+export function getMermaidErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message.replace(/\s+at new Promise[\s\S]*$/g, "").trim();
+  }
+
+  return "The Mermaid diagram has invalid syntax.";
+}
+
+export async function renderMermaidSvg(code: string) {
+  const { default: mermaid } = await import("mermaid");
+  const id = `taskmaster-mermaid-${Date.now()}-${renderCounter}`;
+  renderCounter += 1;
+
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: "strict",
+    theme: "base",
+    themeVariables: {
+      background: "transparent",
+      fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+      primaryColor: "#eef2ff",
+      primaryTextColor: "#18181b",
+      primaryBorderColor: "#c7d2fe",
+      lineColor: "#64748b",
+      secondaryColor: "#f8fafc",
+      tertiaryColor: "#ffffff",
+    },
+  });
+
+  const { svg } = await mermaid.render(id, code);
+  return svg;
+}
diff --git a/components/note-editor/document-utils.ts b/components/note-editor/document-utils.ts
new file mode 100644
index 0000000..1cde975
--- /dev/null
+++ b/components/note-editor/document-utils.ts
@@ -0,0 +1,5 @@
+import type { NoteDocument } from "@/lib/notes/types";
+
+export function areDocumentsEqual(left: NoteDocument, right: NoteDocument) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
diff --git a/components/note-editor/editor-menus.tsx b/components/note-editor/editor-menus.tsx
new file mode 100644
index 0000000..d4e6bda
--- /dev/null
+++ b/components/note-editor/editor-menus.tsx
@@ -0,0 +1,128 @@
+import type { NoteBlockType } from "@/lib/notes/types";
+import type { BlockConversionTarget, SlashCommand } from "@/components/note-editor/block-transforms";
+import { getSlashCommandMatches } from "@/components/note-editor/block-transforms";
+
+export type BlockContextMenuState = {
+  x: number;
+  y: number;
+  blockIndex: number;
+  blockType: NoteBlockType;
+};
+
+export type SlashCommandMenuState = {
+  x: number;
+  y: number;
+  blockIndex: number;
+  query: string;
+  activeIndex: number;
+};
+
+type SlashCommandMenuProps = {
+  state: SlashCommandMenuState;
+  onSelect: (command: SlashCommand) => void;
+};
+
+export function SlashCommandMenu({ state, onSelect }: SlashCommandMenuProps) {
+  const matches = getSlashCommandMatches(state.query);
+
+  return (
+    <div
+      data-note-slash-command-menu
+      className="note-editor__slash-menu"
+      role="menu"
+      style={{
+        left: `clamp(4px, ${state.x}px, calc(100vw - 18.5rem))`,
+        top: `clamp(4px, ${state.y}px, calc(100vh - 24rem))`,
+      }}
+    >
+      {matches.length > 0 ? (
+        matches.map((command, index) => (
+          <button
+            key={command.id}
+            type="button"
+            role="menuitem"
+            data-active={index === state.activeIndex ? "true" : undefined}
+            className={
+              index === state.activeIndex
+                ? "note-editor__slash-menu-active"
+                : undefined
+            }
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => onSelect(command)}
+          >
+            <span>{command.label}</span>
+            <span>{command.hint}</span>
+          </button>
+        ))
+      ) : (
+        <div className="note-editor__slash-menu-empty">No commands</div>
+      )}
+    </div>
+  );
+}
+
+const conversionTargets: Array<{ label: string; target: BlockConversionTarget }> = [
+  { label: "Text", target: { type: "paragraph" } },
+  { label: "Heading 1", target: { type: "header", level: 1 } },
+  { label: "Heading 2", target: { type: "header", level: 2 } },
+  { label: "Heading 3", target: { type: "header", level: 3 } },
+  { label: "Bulleted list", target: { type: "list", style: "unordered" } },
+  { label: "Numbered list", target: { type: "list", style: "ordered" } },
+  { label: "Checklist", target: { type: "list", style: "checklist" } },
+  { label: "Quote", target: { type: "quote" } },
+  { label: "Code", target: { type: "code" } },
+  { label: "Mermaid", target: { type: "mermaid" } },
+  { label: "Math", target: { type: "math" } },
+];
+
+type BlockContextMenuProps = {
+  state: BlockContextMenuState;
+  onConvert: (target: BlockConversionTarget) => void;
+  onDelete: () => void;
+};
+
+export function BlockContextMenu({
+  state,
+  onConvert,
+  onDelete,
+}: BlockContextMenuProps) {
+  return (
+    <div
+      data-note-block-context-menu
+      className="note-editor__context-menu"
+      role="menu"
+      style={{
+        left: `clamp(4px, ${state.x}px, calc(100vw - 14rem))`,
+        top: `clamp(4px, ${state.y}px, calc(100vh - 22rem))`,
+      }}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      <div className="note-editor__context-menu-item note-editor__context-menu-item--submenu">
+        <span>Turn into</span>
+        <span aria-hidden="true">›</span>
+        <div className="note-editor__context-submenu" role="menu">
+          {conversionTargets.map((item) => (
+            <button
+              key={item.label}
+              type="button"
+              role="menuitem"
+              onClick={() => onConvert(item.target)}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="note-editor__context-menu-separator" />
+      <button
+        type="button"
+        role="menuitem"
+        className="note-editor__context-menu-danger"
+        onClick={onDelete}
+      >
+        Delete block
+      </button>
+      <div className="note-editor__context-menu-meta">{state.blockType}</div>
+    </div>
+  );
+}
diff --git a/components/note-editor/editorjs-tools.ts b/components/note-editor/editorjs-tools.ts
new file mode 100644
index 0000000..e9297ed
--- /dev/null
+++ b/components/note-editor/editorjs-tools.ts
@@ -0,0 +1,96 @@
+import type { BlockToolConstructable } from "@editorjs/editorjs";
+import { CodeBlockTool } from "@/components/note-editor/blocks/code-block-tool";
+import { MathBlockTool } from "@/components/note-editor/blocks/math-block-tool";
+import { MermaidBlockTool } from "@/components/note-editor/blocks/mermaid-block-tool";
+import type { NoteImageFileData } from "@/lib/notes/types";
+
+export async function loadEditorJsClassAndTools(
+  resolveImageUpload: (file: File) => Promise<{
+    success: 1;
+    file: NoteImageFileData;
+  }>,
+) {
+  const [
+    { default: EditorJSClass },
+    { default: Paragraph },
+    { default: Header },
+    { default: EditorjsList },
+    { default: Quote },
+    { default: ImageTool },
+  ] = await Promise.all([
+    import("@editorjs/editorjs"),
+    import("@editorjs/paragraph"),
+    import("@editorjs/header"),
+    import("@editorjs/list"),
+    import("@editorjs/quote"),
+    import("@editorjs/image"),
+    import("mathlive"),
+  ]);
+
+  const paragraphTool = Paragraph as unknown as BlockToolConstructable;
+  const headerTool = Header as unknown as BlockToolConstructable;
+  const listTool = EditorjsList as unknown as BlockToolConstructable;
+  const quoteTool = Quote as unknown as BlockToolConstructable;
+  const imageTool = ImageTool as unknown as BlockToolConstructable;
+
+  return {
+    EditorJSClass,
+    tools: {
+      paragraph: {
+        class: paragraphTool,
+        inlineToolbar: true,
+        config: {
+          placeholder: "Type '/' for commands",
+        },
+      },
+      header: {
+        class: headerTool,
+        inlineToolbar: true,
+        config: {
+          levels: [1, 2, 3, 4],
+          defaultLevel: 2,
+        },
+      },
+      list: {
+        class: listTool,
+        inlineToolbar: true,
+        config: {
+          defaultStyle: "unordered",
+        },
+      },
+      quote: {
+        class: quoteTool,
+        inlineToolbar: true,
+      },
+      code: {
+        class: CodeBlockTool as unknown as BlockToolConstructable,
+      },
+      mermaid: {
+        class: MermaidBlockTool as unknown as BlockToolConstructable,
+      },
+      image: {
+        class: imageTool,
+        config: {
+          features: {
+            border: false,
+            background: false,
+            caption: "optional",
+            stretch: true,
+          },
+          uploader: {
+            uploadByFile: async (file: Blob) => {
+              if (!(file instanceof File)) {
+                throw new Error("Only file uploads are supported.");
+              }
+
+              return resolveImageUpload(file);
+            },
+          },
+        },
+      },
+      math: {
+        class: MathBlockTool as unknown as BlockToolConstructable,
+      },
+    },
+  };
+}
diff --git a/components/note-editor/image-upload.ts b/components/note-editor/image-upload.ts
new file mode 100644
index 0000000..d2a45b3
--- /dev/null
+++ b/components/note-editor/image-upload.ts
@@ -0,0 +1,41 @@
+import type { NoteImageFileData } from "@/lib/notes/types";
+
+const MAX_INLINE_IMAGE_BYTES = 2 * 1024 * 1024;
+
+export async function uploadImageToDataUrl(file: File): Promise<NoteImageFileData> {
+  if (!file.type.startsWith("image/")) {
+    throw new Error("Only image uploads are supported.");
+  }
+
+  if (file.size > MAX_INLINE_IMAGE_BYTES) {
+    throw new Error(
+      "Images larger than 2 MB are not supported by the temporary inline uploader.",
+    );
+  }
+
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+        return;
+      }
+
+      reject(new Error("Could not convert image to a data URL."));
+    };
+
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("Could not read the image file."));
+    };
+
+    reader.readAsDataURL(file);
+  });
+
+  return {
+    url: dataUrl,
+    name: file.name,
+    size: file.size,
+    type: file.type,
+  };
+}
diff --git a/components/note-editor/markdown-components.tsx b/components/note-editor/markdown-components.tsx
new file mode 100644
index 0000000..0defc5c
--- /dev/null
+++ b/components/note-editor/markdown-components.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { isValidElement, type ReactNode } from "react";
+import type { Components } from "react-markdown";
+import { CodeBlockView } from "@/components/note-editor/blocks/code-block-view";
+import { MermaidBlockView } from "@/components/note-editor/blocks/mermaid-block-view";
+
+function omitNode<T extends { node?: unknown }>(props: T): Omit<T, "node"> {
+  const { node, ...rest } = props;
+  void node;
+  return rest;
+}
+
+function getTextContent(value: ReactNode): string {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(getTextContent).join("");
+  }
+
+  if (isValidElement<{ children?: ReactNode }>(value)) {
+    return getTextContent(value.props.children);
+  }
+
+  if (value && typeof value === "object") {
+    const candidate = value as {
+      children?: unknown;
+      props?: { children?: ReactNode };
+      value?: unknown;
+    };
+
+    if (candidate.props?.children) {
+      return getTextContent(candidate.props.children);
+    }
+
+    if (typeof candidate.value === "string" || typeof candidate.value === "number") {
+      return String(candidate.value);
+    }
+
+    if (candidate.children) {
+      return getNodeText(candidate.children);
+    }
+  }
+
+  return "";
+}
+
+function getNodeText(value: unknown): string {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(getNodeText).join("");
+  }
+
+  if (value && typeof value === "object") {
+    const candidate = value as { value?: unknown; children?: unknown };
+    if (typeof candidate.value === "string" || typeof candidate.value === "number") {
+      return String(candidate.value);
+    }
+
+    return getNodeText(candidate.children);
+  }
+
+  return "";
+}
+
+function extractCode(children: ReactNode) {
+  return getTextContent(children).replace(/\n$/, "");
+}
+
+function cleanMarkdownText(value: string) {
+  return value === "[object Object]" ? "" : value;
+}
+
+function getCodeLanguage(value: unknown): string | undefined {
+  if (isValidElement<{ className?: string }>(value)) {
+    const match = value.props.className?.match(/language-([^\s]+)/);
+    return match?.[1]?.toLowerCase();
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(getCodeLanguage).find(Boolean);
+  }
+
+  if (value && typeof value === "object") {
+    const candidate = value as {
+      properties?: { className?: string | string[] };
+      props?: { className?: string };
+      children?: unknown;
+    };
+    const className = Array.isArray(candidate.properties?.className)
+      ? candidate.properties.className.join(" ")
+      : candidate.properties?.className ?? candidate.props?.className;
+    const match = className?.match(/language-([^\s]+)/);
+    return match?.[1]?.toLowerCase() ?? getCodeLanguage(candidate.children);
+  }
+
+  return undefined;
+}
+
+export const markdownComponents: Components = {
+  img: (props) => {
+    const { alt, src } = omitNode(props);
+    if (typeof src !== "string") {
+      return null;
+    }
+
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        alt={alt ?? "Embedded note image"}
+        className="max-h-[32rem] w-full rounded-lg object-contain"
+        src={src}
+      />
+    );
+  },
+  pre: (props) => {
+    const { children, node } = props;
+    const code =
+      cleanMarkdownText(extractCode(children)) ||
+      cleanMarkdownText(getTextContent(node as ReactNode));
+    const language = getCodeLanguage(children) ?? getCodeLanguage(node);
+    if (language === "mermaid" || language === "mmd") {
+      return <MermaidBlockView data={{ code }} />;
+    }
+
+    return <CodeBlockView data={{ code, ...(language ? { language } : {}) }} />;
+  },
+  code: (props) => {
+    const { children, className, node, ...rest } = props;
+    const codeText =
+      cleanMarkdownText(getTextContent(children)) ||
+      cleanMarkdownText(getTextContent(node as ReactNode));
+    if (className) {
+      return (
+        <code className={className} {...rest}>
+          {codeText}
+        </code>
+      );
+    }
+
+    return (
+      <code className="rounded bg-zinc-100 px-1 py-0.5 text-[0.9em] text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">
+        {codeText}
+      </code>
+    );
+  },
+};
diff --git a/components/note-editor/note-editor.tsx b/components/note-editor/note-editor.tsx
index cf9075b..aa1d316 100644
--- a/components/note-editor/note-editor.tsx
+++ b/components/note-editor/note-editor.tsx
@@ -9,18 +9,37 @@ import {
   type ReactNode,
 } from "react";
 import type EditorJS from "@editorjs/editorjs";
-import type { BlockToolConstructable } from "@editorjs/editorjs";
 import type {
   NoteBlock,
-  NoteBlockType,
   NoteContent,
   NoteDocument,
   NoteImageFileData,
 } from "@/lib/notes/types";
 import { emptyNoteDocument, NoteDocumentSchema } from "@/lib/notes/types";
 import { createNoteContent } from "@/lib/notes/markdown";
-import { CodeBlockTool } from "@/components/note-editor/code-block-tool";
-import { MathBlockTool } from "@/components/note-editor/math-block-tool";
+import {
+  convertBlock,
+  createEmptyBlockForTarget,
+  getBlockText,
+  getSlashCommandMatches,
+  stripHtml,
+  type BlockConversionTarget,
+  type SlashCommand,
+} from "@/components/note-editor/block-transforms";
+import { areDocumentsEqual } from "@/components/note-editor/document-utils";
+import {
+  BlockContextMenu,
+  SlashCommandMenu,
+  type BlockContextMenuState,
+  type SlashCommandMenuState,
+} from "@/components/note-editor/editor-menus";
+import { uploadImageToDataUrl } from "@/components/note-editor/image-upload";
+import {
+  readBlocksFromClipboard,
+  writeBlocksToClipboard,
+} from "@/components/note-editor/block-clipboard";
+import { loadEditorJsClassAndTools } from "@/components/note-editor/editorjs-tools";
+import { isPointInHorizontalEdgeGutter } from "@/components/note-editor/selection-geometry";
 
 export type NoteEditorProps = {
   initialDocument: NoteDocument;
@@ -31,337 +50,6 @@ export type NoteEditorProps = {
   selectionPrelude?: ReactNode;
 };
 
-const MAX_INLINE_IMAGE_BYTES = 2 * 1024 * 1024;
-const NOTE_BLOCKS_CLIPBOARD_TYPE = "application/x-taskmaster-note-blocks";
-
-type BlockContextMenuState = {
-  x: number;
-  y: number;
-  blockIndex: number;
-  blockType: NoteBlockType;
-};
-
-type SlashCommandMenuState = {
-  x: number;
-  y: number;
-  blockIndex: number;
-  query: string;
-  activeIndex: number;
-};
-
-type BlockConversionTarget =
-  | { type: "paragraph" }
-  | { type: "header"; level: 1 | 2 | 3 | 4 }
-  | { type: "list"; style: "ordered" | "unordered" | "checklist" }
-  | { type: "quote" }
-  | { type: "code" }
-  | { type: "math" };
-
-type SlashCommand = {
-  id: string;
-  label: string;
-  hint: string;
-  keywords: string[];
-  target: BlockConversionTarget;
-};
-
-const SLASH_COMMANDS: SlashCommand[] = [
-  {
-    id: "text",
-    label: "Text",
-    hint: "Plain text block",
-    keywords: ["paragraph", "plain"],
-    target: { type: "paragraph" },
-  },
-  {
-    id: "h1",
-    label: "Heading 1",
-    hint: "Large section heading",
-    keywords: ["heading", "title", "h1"],
-    target: { type: "header", level: 1 },
-  },
-  {
-    id: "h2",
-    label: "Heading 2",
-    hint: "Medium section heading",
-    keywords: ["heading", "subtitle", "h2"],
-    target: { type: "header", level: 2 },
-  },
-  {
-    id: "h3",
-    label: "Heading 3",
-    hint: "Small section heading",
-    keywords: ["heading", "h3"],
-    target: { type: "header", level: 3 },
-  },
-  {
-    id: "bullet",
-    label: "Bulleted list",
-    hint: "Simple unordered list",
-    keywords: ["list", "ul", "bullet"],
-    target: { type: "list", style: "unordered" },
-  },
-  {
-    id: "number",
-    label: "Numbered list",
-    hint: "Ordered list",
-    keywords: ["list", "ol", "number"],
-    target: { type: "list", style: "ordered" },
-  },
-  {
-    id: "todo",
-    label: "Checklist",
-    hint: "Track tasks",
-    keywords: ["todo", "task", "check"],
-    target: { type: "list", style: "checklist" },
-  },
-  {
-    id: "quote",
-    label: "Quote",
-    hint: "Callout text",
-    keywords: ["blockquote", "callout"],
-    target: { type: "quote" },
-  },
-  {
-    id: "code",
-    label: "Code",
-    hint: "Code block",
-    keywords: ["pre", "snippet"],
-    target: { type: "code" },
-  },
-  {
-    id: "math",
-    label: "Math",
-    hint: "Equation block",
-    keywords: ["equation", "latex"],
-    target: { type: "math" },
-  },
-];
-
-function areDocumentsEqual(left: NoteDocument, right: NoteDocument) {
-  return JSON.stringify(left) === JSON.stringify(right);
-}
-
-function stripHtml(value: string) {
-  return value
-    .replace(/<br\s*\/?>/gi, "\n")
-    .replace(/<\/(p|div|li|blockquote|h[1-6])>/gi, "\n")
-    .replace(/<[^>]+>/g, "")
-    .replace(/&nbsp;/g, " ")
-    .replace(/&amp;/g, "&")
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'")
-    .replace(/\n{3,}/g, "\n\n")
-    .trim();
-}
-
-function getBlockText(block: NoteBlock, options?: { plain?: boolean }) {
-  const normalize = options?.plain ? stripHtml : (value: string) => value;
-
-  switch (block.type) {
-    case "paragraph":
-    case "header":
-      return normalize(block.data.text);
-    case "quote":
-      return normalize(block.data.text);
-    case "list":
-      return normalize(block.data.items.map((item) => item.content).join("\n"));
-    case "code":
-      return block.data.code;
-    case "math":
-      return block.data.latex;
-    case "image":
-      return normalize(block.data.caption);
-    default:
-      return "";
-  }
-}
-
-function convertBlock(
-  block: NoteBlock,
-  target: BlockConversionTarget,
-): NoteBlock {
-  const richText = getBlockText(block);
-  const plainText = getBlockText(block, { plain: true });
-
-  switch (target.type) {
-    case "paragraph":
-      return {
-        type: "paragraph",
-        data: {
-          text: richText,
-        },
-      };
-    case "header":
-      return {
-        type: "header",
-        data: {
-          text: richText,
-          level: target.level,
-        },
-      };
-    case "list":
-      return {
-        type: "list",
-        data: {
-          style: target.style,
-          items: plainText
-            .split("\n")
-            .map((item) => item.trim())
-            .filter(Boolean)
-            .map((item) => ({
-              content: item,
-              meta: target.style === "checklist" ? { checked: false } : {},
-              items: [],
-            })),
-        },
-      };
-    case "quote":
-      return {
-        type: "quote",
-        data: {
-          text: richText,
-          caption: "",
-          alignment: "left",
-        },
-      };
-    case "code":
-      return {
-        type: "code",
-        data: {
-          code: plainText,
-        },
-      };
-    case "math":
-      return {
-        type: "math",
-        data: {
-          latex: plainText,
-        },
-      };
-    default:
-      return block;
-  }
-}
-
-function createEmptyBlockForTarget(target: BlockConversionTarget): NoteBlock {
-  switch (target.type) {
-    case "paragraph":
-      return {
-        type: "paragraph",
-        data: {
-          text: "",
-        },
-      };
-    case "header":
-      return {
-        type: "header",
-        data: {
-          text: "",
-          level: target.level,
-        },
-      };
-    case "list":
-      return {
-        type: "list",
-        data: {
-          style: target.style,
-          items: [
-            {
-              content: "",
-              meta: target.style === "checklist" ? { checked: false } : {},
-              items: [],
-            },
-          ],
-        },
-      };
-    case "quote":
-      return {
-        type: "quote",
-        data: {
-          text: "",
-          caption: "",
-          alignment: "left",
-        },
-      };
-    case "code":
-      return {
-        type: "code",
-        data: {
-          code: "",
-        },
-      };
-    case "math":
-      return {
-        type: "math",
-        data: {
-          latex: "",
-        },
-      };
-    default:
-      return {
-        type: "paragraph",
-        data: {
-          text: "",
-        },
-      };
-  }
-}
-
-function getSlashCommandMatches(query: string) {
-  const normalizedQuery = query.trim().toLowerCase();
-
-  if (!normalizedQuery) {
-    return SLASH_COMMANDS;
-  }
-
-  return SLASH_COMMANDS.filter((command) =>
-    [command.label, command.id, ...command.keywords].some((value) =>
-      value.toLowerCase().includes(normalizedQuery),
-    ),
-  );
-}
-
-async function uploadImageToDataUrl(file: File): Promise<NoteImageFileData> {
-  if (!file.type.startsWith("image/")) {
-    throw new Error("Only image uploads are supported.");
-  }
-
-  if (file.size > MAX_INLINE_IMAGE_BYTES) {
-    throw new Error(
-      "Images larger than 2 MB are not supported by the temporary inline uploader.",
-    );
-  }
-
-  const dataUrl = await new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-
-    reader.onload = () => {
-      if (typeof reader.result === "string") {
-        resolve(reader.result);
-        return;
-      }
-
-      reject(new Error("Could not convert image to a data URL."));
-    };
-
-    reader.onerror = () => {
-      reject(reader.error ?? new Error("Could not read the image file."));
-    };
-
-    reader.readAsDataURL(file);
-  });
-
-  return {
-    url: dataUrl,
-    name: file.name,
-    size: file.size,
-    type: file.type,
-  };
-}
-
 export function NoteEditor({
   initialDocument,
   onContentChange,
@@ -909,6 +597,73 @@ export function NoteEditor({
         ),
       );
 
+const isNativeTextSelectionTarget = (target: EventTarget | null) => {
+  const element =
+    target instanceof Element
+      ? target
+      : target instanceof Node
+        ? target.parentElement
+        : null;
+
+  return Boolean(
+    element?.closest(
+      [
+        '[contenteditable="true"]',
+        ".ce-paragraph",
+        ".ce-header",
+        ".cdx-quote__text",
+        ".cdx-quote__caption",
+        ".cdx-list",
+        ".cdx-list__item",
+        ".cdx-list__item-content",
+      ].join(", "),
+    ),
+  );
+};
+
+    const getEventBlock = (target: EventTarget | null) =>
+      target instanceof Element
+        ? target.closest<HTMLElement>(".ce-block")
+        : null;
+
+    const isInsideSelectionSurface = (
+      target: EventTarget | null,
+      clientX: number,
+      clientY: number,
+    ) => {
+      if (target instanceof Node && selectionScope.contains(target)) {
+        return true;
+      }
+
+      const rect = holder.getBoundingClientRect();
+      return (
+        clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom
+      );
+    };
+
+    const isEditorEdgeSelectionPoint = (
+      target: EventTarget | null,
+      clientX: number,
+      clientY: number,
+    ) => {
+      const rect = holder.getBoundingClientRect();
+      const isEditorDescendant =
+        target instanceof Node && selectionScope.contains(target);
+
+      // Some imported notes visually overflow the holder's measured height.
+      // For real editor descendants, gutter selection should depend on X only.
+      return isPointInHorizontalEdgeGutter(
+        isEditorDescendant
+          ? { ...rect, top: clientY - 1, bottom: clientY + 1 }
+          : rect,
+        clientX,
+        clientY,
+      );
+    };
+
     const isContextMenuControlTarget = (target: EventTarget | null) =>
       target instanceof Element &&
       Boolean(
@@ -1289,19 +1044,34 @@ export function NoteEditor({
     };
 
     const handlePointerDown = (event: PointerEvent) => {
+      if (!isInsideSelectionSurface(event.target, event.clientX, event.clientY)) {
+        return;
+      }
+
+      const isControlTarget = isEditorControlTarget(event.target);
+      const isEdgeSelectionPoint = isEditorEdgeSelectionPoint(
+        event.target,
+        event.clientX,
+        event.clientY,
+      );
       if (
         pointerMode ||
         event.button !== 0 ||
-        isEditorControlTarget(event.target)
+        (isControlTarget && !isEdgeSelectionPoint)
       ) {
         return;
       }
 
-      const block =
-        event.target instanceof Element
-          ? event.target.closest<HTMLElement>(".ce-block")
-          : null;
+      const block = isEdgeSelectionPoint ? null : getEventBlock(event.target);
       const isBlockSelected = block && selectedBlocks.has(block);
+      if (isEdgeSelectionPoint) {
+        event.preventDefault();
+      }
+
+      if (block && !isBlockSelected && isNativeTextSelectionTarget(event.target)) {
+        clearSelection();
+        return;
+      }
 
       if (block && !isBlockSelected) {
         // Block is not selected — clear any prior selection. We still set up
@@ -1394,19 +1164,34 @@ export function NoteEditor({
     };
 
     const handleMouseDown = (event: MouseEvent) => {
+      if (!isInsideSelectionSurface(event.target, event.clientX, event.clientY)) {
+        return;
+      }
+
+      const isControlTarget = isEditorControlTarget(event.target);
+      const isEdgeSelectionPoint = isEditorEdgeSelectionPoint(
+        event.target,
+        event.clientX,
+        event.clientY,
+      );
       if (
         pointerMode ||
         event.button !== 0 ||
-        isEditorControlTarget(event.target)
+        (isControlTarget && !isEdgeSelectionPoint)
       ) {
         return;
       }
 
-      const block =
-        event.target instanceof Element
-          ? event.target.closest<HTMLElement>(".ce-block")
-          : null;
+      const block = isEdgeSelectionPoint ? null : getEventBlock(event.target);
       const isBlockSelected = block && selectedBlocks.has(block);
+      if (isEdgeSelectionPoint) {
+        event.preventDefault();
+      }
+
+      if (block && !isBlockSelected && isNativeTextSelectionTarget(event.target)) {
+        clearSelection();
+        return;
+      }
 
       if (block && !isBlockSelected) {
         clearSelection();
@@ -1478,18 +1263,14 @@ export function NoteEditor({
       })();
     };
 
-    selectionScope.addEventListener("pointerdown", handlePointerDown, true);
-    selectionScope.addEventListener("mousedown", handleMouseDown, true);
+    window.addEventListener("pointerdown", handlePointerDown, true);
+    window.addEventListener("mousedown", handleMouseDown, true);
     selectionScope.addEventListener("contextmenu", handleContextMenu, true);
     window.addEventListener("blur", resetInteractionState);
 
     return () => {
-      selectionScope.removeEventListener(
-        "pointerdown",
-        handlePointerDown,
-        true,
-      );
-      selectionScope.removeEventListener("mousedown", handleMouseDown, true);
+      window.removeEventListener("pointerdown", handlePointerDown, true);
+      window.removeEventListener("mousedown", handleMouseDown, true);
       selectionScope.removeEventListener(
         "contextmenu",
         handleContextMenu,
@@ -1510,33 +1291,14 @@ export function NoteEditor({
         return;
       }
 
-      const [
-        { default: EditorJSClass },
-        { default: Paragraph },
-        { default: Header },
-        { default: EditorjsList },
-        { default: Quote },
-        { default: ImageTool },
-      ] = await Promise.all([
-        import("@editorjs/editorjs"),
-        import("@editorjs/paragraph"),
-        import("@editorjs/header"),
-        import("@editorjs/list"),
-        import("@editorjs/quote"),
-        import("@editorjs/image"),
-        import("mathlive"),
-      ]);
+      const { EditorJSClass, tools } = await loadEditorJsClassAndTools(
+        resolveImageUpload,
+      );
 
       if (disposed || !holderRef.current) {
         return;
       }
 
-      const paragraphTool = Paragraph as unknown as BlockToolConstructable;
-      const headerTool = Header as unknown as BlockToolConstructable;
-      const listTool = EditorjsList as unknown as BlockToolConstructable;
-      const quoteTool = Quote as unknown as BlockToolConstructable;
-      const imageTool = ImageTool as unknown as BlockToolConstructable;
-
       const editor = new EditorJSClass({
         holder: holderRef.current,
         autofocus: !readOnly,
@@ -1546,60 +1308,7 @@ export function NoteEditor({
           renderedDocumentRef.current.blocks.length > 0
             ? renderedDocumentRef.current
             : { ...emptyNoteDocument },
-        tools: {
-          paragraph: {
-            class: paragraphTool,
-            inlineToolbar: true,
-            config: {
-              placeholder: "Type '/' for commands",
-            },
-          },
-          header: {
-            class: headerTool,
-            inlineToolbar: true,
-            config: {
-              levels: [1, 2, 3, 4],
-              defaultLevel: 2,
-            },
-          },
-          list: {
-            class: listTool,
-            inlineToolbar: true,
-            config: {
-              defaultStyle: "unordered",
-            },
-          },
-          quote: {
-            class: quoteTool,
-            inlineToolbar: true,
-          },
-          code: {
-            class: CodeBlockTool as unknown as BlockToolConstructable,
-          },
-          image: {
-            class: imageTool,
-            config: {
-              features: {
-                border: false,
-                background: false,
-                caption: "optional",
-                stretch: true,
-              },
-              uploader: {
-                uploadByFile: async (file: Blob) => {
-                  if (!(file instanceof File)) {
-                    throw new Error("Only file uploads are supported.");
-                  }
-
-                  return resolveImageUpload(file);
-                },
-              },
-            },
-          },
-          math: {
-            class: MathBlockTool as unknown as BlockToolConstructable,
-          },
-        },
+        tools,
         async onChange() {
           if (changeTimeoutRef.current) {
             window.clearTimeout(changeTimeoutRef.current);
@@ -1729,53 +1438,6 @@ export function NoteEditor({
       return blockIndex >= 0 ? blockIndex : renderedDocumentRef.current.blocks.length - 1;
     };
 
-    const writeBlocksToClipboard = (
-      clipboardData: DataTransfer,
-      blocks: NoteBlock[],
-    ) => {
-      const document = {
-        time: Date.now(),
-        blocks,
-      };
-      const payload = JSON.stringify({
-        type: "taskmaster.noteBlocks",
-        version: 1,
-        blocks: cloneBlocksForInsert(blocks),
-      });
-
-      clipboardData.setData(NOTE_BLOCKS_CLIPBOARD_TYPE, payload);
-      clipboardData.setData("text/plain", createNoteContent(document).markdown);
-    };
-
-    const readBlocksFromClipboard = (clipboardData: DataTransfer) => {
-      const raw =
-        clipboardData.getData(NOTE_BLOCKS_CLIPBOARD_TYPE) ||
-        clipboardData.getData("text/plain");
-      if (!raw) {
-        return [];
-      }
-
-      try {
-        const payload = JSON.parse(raw) as {
-          type?: string;
-          blocks?: unknown;
-        };
-        if (
-          payload.type !== "taskmaster.noteBlocks" ||
-          !Array.isArray(payload.blocks)
-        ) {
-          return [];
-        }
-
-        return NoteDocumentSchema.parse({
-          time: Date.now(),
-          blocks: payload.blocks,
-        }).blocks;
-      } catch {
-        return [];
-      }
-    };
-
     const getSelectedBlocks = () => {
       const indexes = selectedBlockIndexesRef.current;
       if (indexes.length === 0) {
@@ -1796,7 +1458,7 @@ export function NoteEditor({
       }
 
       event.preventDefault();
-      writeBlocksToClipboard(event.clipboardData, blocks);
+      writeBlocksToClipboard(event.clipboardData, blocks, cloneBlocksForInsert);
     };
 
     const handleCut = (event: ClipboardEvent) => {
@@ -1811,7 +1473,7 @@ export function NoteEditor({
       }
 
       event.preventDefault();
-      writeBlocksToClipboard(event.clipboardData, blocks);
+      writeBlocksToClipboard(event.clipboardData, blocks, cloneBlocksForInsert);
       deleteBlocksAtIndexes(selectedIndexes);
     };
 
@@ -2098,153 +1760,25 @@ export function NoteEditor({
   return (
     <section
       ref={selectionScopeRef}
-      className="note-editor relative flex flex-1 flex-col"
+      className="note-editor relative flex min-h-full shrink-0 flex-col"
     >
       {selectionPrelude}
       <div
         ref={holderRef}
-        className="note-editor__canvas flex-1 w-full px-4 pb-28 pt-6 md:px-10 md:pb-36 md:pt-8"
+        className="note-editor__canvas min-h-full w-full shrink-0 px-4 pb-28 pt-6 md:px-10 md:pb-36 md:pt-8"
       />
       {slashCommandMenu ? (
-        <div
-          data-note-slash-command-menu
-          className="note-editor__slash-menu"
-          role="menu"
-          style={{
-            left: `clamp(4px, ${slashCommandMenu.x}px, calc(100vw - 18.5rem))`,
-            top: `clamp(4px, ${slashCommandMenu.y}px, calc(100vh - 24rem))`,
-          }}
-        >
-          {getSlashCommandMatches(slashCommandMenu.query).length > 0 ? (
-            getSlashCommandMatches(slashCommandMenu.query).map((command, index) => (
-              <button
-                key={command.id}
-                type="button"
-                role="menuitem"
-                data-active={index === slashCommandMenu.activeIndex ? "true" : undefined}
-                className={
-                  index === slashCommandMenu.activeIndex
-                    ? "note-editor__slash-menu-active"
-                    : undefined
-                }
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => handleSlashCommand(command)}
-              >
-                <span>{command.label}</span>
-                <span>{command.hint}</span>
-              </button>
-            ))
-          ) : (
-            <div className="note-editor__slash-menu-empty">No commands</div>
-          )}
-        </div>
+        <SlashCommandMenu
+          state={slashCommandMenu}
+          onSelect={handleSlashCommand}
+        />
       ) : null}
       {blockContextMenu ? (
-        <div
-          data-note-block-context-menu
-          className="note-editor__context-menu"
-          role="menu"
-          style={{
-            left: `clamp(4px, ${blockContextMenu.x}px, calc(100vw - 14rem))`,
-            top: `clamp(4px, ${blockContextMenu.y}px, calc(100vh - 22rem))`,
-          }}
-          onContextMenu={(event) => event.preventDefault()}
-        >
-          <div className="note-editor__context-menu-item note-editor__context-menu-item--submenu">
-            <span>Turn into</span>
-            <span aria-hidden="true">›</span>
-            <div className="note-editor__context-submenu" role="menu">
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "paragraph" })}
-              >
-                Text
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "header", level: 1 })}
-              >
-                Heading 1
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "header", level: 2 })}
-              >
-                Heading 2
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "header", level: 3 })}
-              >
-                Heading 3
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() =>
-                  handleConvertBlock({ type: "list", style: "unordered" })
-                }
-              >
-                Bulleted list
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() =>
-                  handleConvertBlock({ type: "list", style: "ordered" })
-                }
-              >
-                Numbered list
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() =>
-                  handleConvertBlock({ type: "list", style: "checklist" })
-                }
-              >
-                Checklist
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "quote" })}
-              >
-                Quote
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "code" })}
-              >
-                Code
-              </button>
-              <button
-                type="button"
-                role="menuitem"
-                onClick={() => handleConvertBlock({ type: "math" })}
-              >
-                Math
-              </button>
-            </div>
-          </div>
-          <div className="note-editor__context-menu-separator" />
-          <button
-            type="button"
-            role="menuitem"
-            className="note-editor__context-menu-danger"
-            onClick={() => handleDeleteBlock()}
-          >
-            Delete block
-          </button>
-          <div className="note-editor__context-menu-meta">
-            {blockContextMenu.blockType}
-          </div>
-        </div>
+        <BlockContextMenu
+          state={blockContextMenu}
+          onConvert={handleConvertBlock}
+          onDelete={handleDeleteBlock}
+        />
       ) : null}
     </section>
   );
diff --git a/components/note-editor/note-renderer.tsx b/components/note-editor/note-renderer.tsx
index 15d40da..2adb0e0 100644
--- a/components/note-editor/note-renderer.tsx
+++ b/components/note-editor/note-renderer.tsx
@@ -1,83 +1,10 @@
 "use client";
 
-import { isValidElement } from "react";
-import type { ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
-import { CodeBlockView } from "@/components/note-editor/code-block-view";
-
-function omitNode<T extends { node?: unknown }>(props: T): Omit<T, "node"> {
-  const { node, ...rest } = props;
-  void node;
-  return rest;
-}
-
-function getTextContent(value: ReactNode): string {
-  if (typeof value === "string" || typeof value === "number") {
-    return String(value);
-  }
-
-  if (Array.isArray(value)) {
-    return value.map(getTextContent).join("");
-  }
-
-  if (isValidElement<{ children?: ReactNode }>(value)) {
-    return getTextContent(value.props.children);
-  }
-
-  if (value && typeof value === "object") {
-    const candidate = value as {
-      children?: unknown;
-      props?: { children?: ReactNode };
-      value?: unknown;
-    };
-
-    if (candidate.props?.children) {
-      return getTextContent(candidate.props.children);
-    }
-
-    if (typeof candidate.value === "string" || typeof candidate.value === "number") {
-      return String(candidate.value);
-    }
-
-    if (candidate.children) {
-      return getNodeText(candidate.children);
-    }
-  }
-
-  return "";
-}
-
-function getNodeText(value: unknown): string {
-  if (typeof value === "string" || typeof value === "number") {
-    return String(value);
-  }
-
-  if (Array.isArray(value)) {
-    return value.map(getNodeText).join("");
-  }
-
-  if (value && typeof value === "object") {
-    const candidate = value as { value?: unknown; children?: unknown };
-    if (typeof candidate.value === "string" || typeof candidate.value === "number") {
-      return String(candidate.value);
-    }
-
-    return getNodeText(candidate.children);
-  }
-
-  return "";
-}
-
-function extractCode(children: ReactNode) {
-  return getTextContent(children).replace(/\n$/, "");
-}
-
-function cleanMarkdownText(value: string) {
-  return value === "[object Object]" ? "" : value;
-}
+import { markdownComponents } from "@/components/note-editor/markdown-components";
 
 export function NoteRenderer({ markdown }: { markdown: string }) {
   if (markdown.trim().length === 0) {
@@ -93,47 +20,7 @@ export function NoteRenderer({ markdown }: { markdown: string }) {
       <ReactMarkdown
         rehypePlugins={[rehypeKatex]}
         remarkPlugins={[remarkGfm, remarkMath]}
-        components={{
-          img: (props) => {
-            const { alt, src } = omitNode(props);
-            if (!src) {
-              return null;
-            }
-
-            return (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={alt ?? "Embedded note image"}
-                className="max-h-[32rem] w-full rounded-lg object-contain"
-                src={src}
-              />
-            );
-          },
-          pre: (props) => {
-            const { children, node } = props;
-            const code = cleanMarkdownText(extractCode(children)) || cleanMarkdownText(getTextContent(node as ReactNode));
-            return <CodeBlockView data={{ code }} />;
-          },
-          code: (props) => {
-            const { children, className, node, ...rest } = props;
-            const codeText =
-              cleanMarkdownText(getTextContent(children)) ||
-              cleanMarkdownText(getTextContent(node as ReactNode));
-            if (className) {
-              return (
-                <code className={className} {...rest}>
-                  {codeText}
-                </code>
-              );
-            }
-
-            return (
-              <code className="rounded bg-zinc-100 px-1 py-0.5 text-[0.9em] text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">
-                {codeText}
-              </code>
-            );
-          },
-        }}
+        components={markdownComponents}
       >
         {markdown}
       </ReactMarkdown>
diff --git a/components/note-editor/note-surface.tsx b/components/note-editor/note-surface.tsx
index 46ab6e1..d87097d 100644
--- a/components/note-editor/note-surface.tsx
+++ b/components/note-editor/note-surface.tsx
@@ -45,7 +45,7 @@ export function NoteSurface({
 
   if (!readOnly) {
     return (
-      <div className="note-surface note-surface--editing flex flex-1 flex-col">
+      <div className="note-surface note-surface--editing flex min-h-full shrink-0 flex-col">
         <NoteEditor
           initialDocument={content.document}
           onContentChange={(nextContent) => {
diff --git a/components/note-editor/selection-geometry.ts b/components/note-editor/selection-geometry.ts
new file mode 100644
index 0000000..6793863
--- /dev/null
+++ b/components/note-editor/selection-geometry.ts
@@ -0,0 +1,37 @@
+export const NOTE_BLOCK_SELECTION_GUTTER_WIDTH = 96;
+
+export type RectLike = {
+  bottom: number;
+  left: number;
+  right: number;
+  top: number;
+};
+
+export function isPointInHorizontalEdgeGutter(
+  rect: RectLike,
+  clientX: number,
+  clientY: number,
+  gutterWidth = NOTE_BLOCK_SELECTION_GUTTER_WIDTH,
+) {
+  const width = rect.right - rect.left;
+  const height = rect.bottom - rect.top;
+
+  if (width <= 0 || height <= 0) {
+    return false;
+  }
+
+  if (
+    clientX < rect.left ||
+    clientX > rect.right ||
+    clientY < rect.top ||
+    clientY > rect.bottom
+  ) {
+    return false;
+  }
+
+  const boundedGutterWidth = Math.min(gutterWidth, width / 3);
+  return (
+    clientX <= rect.left + boundedGutterWidth ||
+    clientX >= rect.right - boundedGutterWidth
+  );
+}
diff --git a/components/shell/app-shell.tsx b/components/shell/app-shell.tsx
index 07bac17..cdc5d59 100644
--- a/components/shell/app-shell.tsx
+++ b/components/shell/app-shell.tsx
@@ -4,6 +4,8 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import { usePathname } from "next/navigation";
 import { cx } from "@/lib/utils";
+import { AsciiBackground } from "./ascii-background";
+import { useAsciiBackgroundEnabled } from "./background-preference";
 import { AppSidebar } from "./app-sidebar";
 import { useSidebarBehavior } from "./sidebar-preference";
 
@@ -19,6 +21,7 @@ export function AppShell({ children, displayName }: AppShellProps) {
   const sidebarBehavior = useSidebarBehavior();
   const [collapsed, setCollapsed] = useState(true);
   const [hoverExpanded, setHoverExpanded] = useState(false);
+  const asciiBackgroundEnabled = useAsciiBackgroundEnabled();
   const hoverMode = sidebarBehavior === "hover";
   const sidebarCollapsed = hoverMode ? !hoverExpanded : collapsed;
 
@@ -32,10 +35,11 @@ export function AppShell({ children, displayName }: AppShellProps) {
         onToggleCollapsed={() => setCollapsed((current) => !current)}
         onHoverChange={setHoverExpanded}
       />
-      <div className="min-h-0 min-w-0 flex-1">
+      <div className="app-background min-h-0 min-w-0 flex-1">
+        {asciiBackgroundEnabled ? <AsciiBackground /> : null}
         <main
           className={cx(
-            "h-full w-full",
+            "relative z-10 h-full w-full",
             isNotesRoute
               ? "overflow-hidden p-0"
               : isDashboard
diff --git a/components/shell/ascii-background.tsx b/components/shell/ascii-background.tsx
new file mode 100644
index 0000000..5bedd4e
--- /dev/null
+++ b/components/shell/ascii-background.tsx
@@ -0,0 +1,8 @@
+export function AsciiBackground({ className = "" }: { className?: string }) {
+  return (
+    <div className={className ? `app-ascii-bg ${className}` : "app-ascii-bg"} aria-hidden>
+      <span />
+      <span />
+    </div>
+  );
+}
diff --git a/components/shell/background-preference.tsx b/components/shell/background-preference.tsx
new file mode 100644
index 0000000..e5b3456
--- /dev/null
+++ b/components/shell/background-preference.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { Button } from "@/components/ui/button";
+import { cx } from "@/lib/utils";
+
+const ASCII_BACKGROUND_KEY = "taskmaster.asciiBackground.enabled";
+const ASCII_BACKGROUND_EVENT = "taskmaster-ascii-background-change";
+
+function readAsciiBackgroundEnabled() {
+  if (typeof window === "undefined") {
+    return true;
+  }
+
+  return window.localStorage.getItem(ASCII_BACKGROUND_KEY) !== "false";
+}
+
+function subscribeToAsciiBackground(onStoreChange: () => void) {
+  window.addEventListener("storage", onStoreChange);
+  window.addEventListener(ASCII_BACKGROUND_EVENT, onStoreChange);
+
+  return () => {
+    window.removeEventListener("storage", onStoreChange);
+    window.removeEventListener(ASCII_BACKGROUND_EVENT, onStoreChange);
+  };
+}
+
+export function setAsciiBackgroundEnabled(value: boolean) {
+  window.localStorage.setItem(ASCII_BACKGROUND_KEY, String(value));
+  window.dispatchEvent(new Event(ASCII_BACKGROUND_EVENT));
+}
+
+export function useAsciiBackgroundEnabled() {
+  return useSyncExternalStore(
+    subscribeToAsciiBackground,
+    readAsciiBackgroundEnabled,
+    () => true,
+  );
+}
+
+export function AsciiBackgroundControl() {
+  const enabled = useAsciiBackgroundEnabled();
+
+  return (
+    <div className="grid gap-2 sm:grid-cols-2">
+      {[
+        { value: true, label: "On", description: "Show animated ASCII texture." },
+        { value: false, label: "Off", description: "Use plain backgrounds." },
+      ].map((option) => {
+        const selected = enabled === option.value;
+
+        return (
+          <Button
+            key={String(option.value)}
+            type="button"
+            variant={selected ? "primary" : "outline"}
+            className={cx(
+              "h-auto justify-start px-3 py-2 text-left",
+              selected ? "" : "text-muted-foreground",
+            )}
+            onClick={() => setAsciiBackgroundEnabled(option.value)}
+          >
+            <span>
+              <span className="block text-sm font-semibold">{option.label}</span>
+              <span className="mt-0.5 block text-xs font-normal leading-5 opacity-80">
+                {option.description}
+              </span>
+            </span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/lib/classes/archive-marker.ts b/lib/classes/archive-marker.ts
new file mode 100644
index 0000000..7c7dbb4
--- /dev/null
+++ b/lib/classes/archive-marker.ts
@@ -0,0 +1,5 @@
+export const CLASS_ARCHIVE_WARNING = "__taskmaster_class_archived__";
+
+export function isClassArchived(warnings: readonly string[] | null | undefined) {
+  return Boolean(warnings?.includes(CLASS_ARCHIVE_WARNING));
+}
diff --git a/lib/classes/archive.ts b/lib/classes/archive.ts
new file mode 100644
index 0000000..5761a4e
--- /dev/null
+++ b/lib/classes/archive.ts
@@ -0,0 +1,37 @@
+import { and, eq } from "drizzle-orm";
+import { db } from "@/lib/db";
+import { parseTestRun } from "@/lib/db/schema";
+import { CLASS_ARCHIVE_WARNING } from "./archive-marker";
+
+export async function setClassArchived(params: {
+  userId: string;
+  runId: string;
+  archived: boolean;
+}) {
+  const [run] = await db
+    .select({
+      id: parseTestRun.id,
+      warnings: parseTestRun.warnings,
+    })
+    .from(parseTestRun)
+    .where(and(eq(parseTestRun.id, params.runId), eq(parseTestRun.userId, params.userId)))
+    .limit(1);
+
+  if (!run) {
+    return null;
+  }
+
+  const warnings = run.warnings.filter((warning) => warning !== CLASS_ARCHIVE_WARNING);
+  const nextWarnings = params.archived ? [...warnings, CLASS_ARCHIVE_WARNING] : warnings;
+
+  const [updated] = await db
+    .update(parseTestRun)
+    .set({
+      warnings: nextWarnings,
+      updatedAt: new Date(),
+    })
+    .where(and(eq(parseTestRun.id, params.runId), eq(parseTestRun.userId, params.userId)))
+    .returning();
+
+  return updated ?? null;
+}
diff --git a/lib/classes/queries.ts b/lib/classes/queries.ts
index 4e041d4..27f7e5b 100644
--- a/lib/classes/queries.ts
+++ b/lib/classes/queries.ts
@@ -1,6 +1,7 @@
 import { and, asc, desc, eq } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { note, parseTestCourse, parseTestEvent, parseTestRun } from "@/lib/db/schema";
+import { isClassArchived } from "./archive-marker";
 
 export type UserClassSummary = {
   courseId: string;
@@ -31,6 +32,7 @@ export async function listUserClasses(userId: string): Promise<UserClassSummary[
       meetingTime: parseTestCourse.meetingTime,
       meetingLocation: parseTestCourse.meetingLocation,
       updatedAt: parseTestRun.updatedAt,
+      warnings: parseTestRun.warnings,
     })
     .from(parseTestRun)
     .innerJoin(parseTestCourse, eq(parseTestCourse.runId, parseTestRun.id))
@@ -56,11 +58,22 @@ export async function listUserClasses(userId: string): Promise<UserClassSummary[
     noteCounts.set(row.classId, (noteCounts.get(row.classId) ?? 0) + 1);
   }
 
-  return rows.map((row) => ({
-    ...row,
-    updatedAt: row.updatedAt.toISOString(),
-    noteCount: noteCounts.get(row.courseId) ?? 0,
-  }));
+  return rows
+    .filter((row) => !isClassArchived(row.warnings))
+    .map((row) => ({
+      courseId: row.courseId,
+      runId: row.runId,
+      title: row.title,
+      courseCode: row.courseCode,
+      courseSection: row.courseSection,
+      term: row.term,
+      instructorName: row.instructorName,
+      meetingDays: row.meetingDays,
+      meetingTime: row.meetingTime,
+      meetingLocation: row.meetingLocation,
+      updatedAt: row.updatedAt.toISOString(),
+      noteCount: noteCounts.get(row.courseId) ?? 0,
+    }));
 }
 
 export async function assertClassBelongsToUser(classId: string, userId: string) {
diff --git a/lib/notes/__tests__/generation.test.ts b/lib/notes/__tests__/generation.test.ts
new file mode 100644
index 0000000..26b77cc
--- /dev/null
+++ b/lib/notes/__tests__/generation.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { rebalanceGeneratedTopics } from "@/lib/notes/generation";
+
+describe("rebalanceGeneratedTopics", () => {
+  it("merges many small generated topics into fewer dense notes", () => {
+    const topics = Array.from({ length: 8 }, (_, index) => ({
+      title: `Slide ${index + 1}`,
+      markdown: `Important detail ${index + 1}. `.repeat(20).trim(),
+    }));
+
+    const rebalanced = rebalanceGeneratedTopics(topics);
+
+    expect(rebalanced).toHaveLength(1);
+    expect(rebalanced[0]?.title).toBe("Slide 1 + Slide 8");
+    expect(rebalanced[0]?.markdown).toContain("## Slide 1");
+    expect(rebalanced[0]?.markdown).toContain("## Slide 8");
+  });
+
+  it("caps larger documents at four generated notes", () => {
+    const topics = Array.from({ length: 12 }, (_, index) => ({
+      title: `Topic ${index + 1}`,
+      markdown: `Detailed content ${index + 1}. `.repeat(250).trim(),
+    }));
+
+    const rebalanced = rebalanceGeneratedTopics(topics);
+
+    expect(rebalanced).toHaveLength(4);
+    expect(rebalanced.every((topic) => topic.markdown.length > 1000)).toBe(true);
+  });
+});
diff --git a/lib/notes/markdown.test.ts b/lib/notes/__tests__/markdown.test.ts
similarity index 93%
rename from lib/notes/markdown.test.ts
rename to lib/notes/__tests__/markdown.test.ts
index 838786f..47c6288 100644
--- a/lib/notes/markdown.test.ts
+++ b/lib/notes/__tests__/markdown.test.ts
@@ -86,7 +86,7 @@ describe("serializeNoteDocumentToMarkdown", () => {
     );
   });
 
-  it("serializes quotes, code, images, and math blocks", () => {
+  it("serializes quotes, code, Mermaid, images, and math blocks", () => {
     const document: NoteDocument = {
       time: 1,
       blocks: [
@@ -103,6 +103,12 @@ describe("serializeNoteDocumentToMarkdown", () => {
             code: 'console.log("hello");',
           },
         },
+        {
+          type: "mermaid",
+          data: {
+            code: "graph TD\n  A --> B",
+          },
+        },
         {
           type: "image",
           data: {
@@ -134,6 +140,11 @@ describe("serializeNoteDocumentToMarkdown", () => {
         'console.log("hello");',
         "```",
         "",
+        "```mermaid",
+        "graph TD",
+        "  A --> B",
+        "```",
+        "",
         "![Chart one](https://example.com/chart.png)",
         "",
         "Chart **one**",
diff --git a/lib/notes/__tests__/parse-markdown.test.ts b/lib/notes/__tests__/parse-markdown.test.ts
new file mode 100644
index 0000000..d20f695
--- /dev/null
+++ b/lib/notes/__tests__/parse-markdown.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import { parseMarkdownToNoteDocument } from "@/lib/notes/parse-markdown";
+
+describe("parseMarkdownToNoteDocument", () => {
+  it("maps Mermaid fences to Mermaid note blocks", () => {
+    const document = parseMarkdownToNoteDocument(
+      [
+        "## Flow",
+        "",
+        "```mermaid",
+        "graph TD",
+        "  A[Start] --> B{Ready?}",
+        "  B --> C[Ship]",
+        "```",
+      ].join("\n"),
+    );
+
+    expect(document.blocks).toEqual([
+      {
+        type: "header",
+        data: {
+          level: 2,
+          text: "Flow",
+        },
+      },
+      {
+        type: "mermaid",
+        data: {
+          code: "graph TD\n  A[Start] --> B{Ready?}\n  B --> C[Ship]",
+        },
+      },
+    ]);
+  });
+
+  it("keeps non-Mermaid fences as code blocks", () => {
+    const document = parseMarkdownToNoteDocument(
+      ["```java", "System.out.println(\"hi\");", "```"].join("\n"),
+    );
+
+    expect(document.blocks).toEqual([
+      {
+        type: "code",
+        data: {
+          language: "java",
+          code: 'System.out.println("hi");',
+        },
+      },
+    ]);
+  });
+
+  it("renders inline markdown markers in note text blocks", () => {
+    const document = parseMarkdownToNoteDocument(
+      [
+        "## **Architecture** notes",
+        "",
+        "- **Logical view:** Shows object classes.",
+        "- *Process view:* Shows runtime processes.",
+        "- `Module` view uses [UML](https://example.com).",
+        "",
+        "> ~~Deprecated~~ view",
+      ].join("\n"),
+    );
+
+    expect(document.blocks).toEqual([
+      {
+        type: "header",
+        data: {
+          level: 2,
+          text: "<strong>Architecture</strong> notes",
+        },
+      },
+      {
+        type: "list",
+        data: {
+          style: "unordered",
+          items: [
+            {
+              content: "<strong>Logical view:</strong> Shows object classes.",
+              meta: {},
+              items: [],
+            },
+            {
+              content: "<em>Process view:</em> Shows runtime processes.",
+              meta: {},
+              items: [],
+            },
+            {
+              content:
+                '<code>Module</code> view uses <a href="https://example.com">UML</a>.',
+              meta: {},
+              items: [],
+            },
+          ],
+        },
+      },
+      {
+        type: "quote",
+        data: {
+          text: "<s>Deprecated</s> view",
+          caption: "",
+          alignment: "left",
+        },
+      },
+    ]);
+  });
+});
diff --git a/lib/notes/persistence.test.ts b/lib/notes/__tests__/persistence.test.ts
similarity index 100%
rename from lib/notes/persistence.test.ts
rename to lib/notes/__tests__/persistence.test.ts
diff --git a/lib/notes/__tests__/records.test.ts b/lib/notes/__tests__/records.test.ts
new file mode 100644
index 0000000..da32644
--- /dev/null
+++ b/lib/notes/__tests__/records.test.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import { noteRecordToWorkspaceNote } from "@/lib/notes/records";
+
+describe("noteRecordToWorkspaceNote", () => {
+  const baseRecord = {
+    id: "note-1",
+    title: "Architecture",
+    classId: null,
+    fileName: "lecture.pdf",
+    mimeType: "application/pdf",
+    fileSize: 100,
+    embedding: null,
+    createdAt: new Date("2026-06-08T00:00:00.000Z"),
+    updatedAt: new Date("2026-06-08T00:00:00.000Z"),
+  };
+
+  it("renders inline markdown markers from older generated note blocks", () => {
+    const note = noteRecordToWorkspaceNote({
+      ...baseRecord,
+      sourceType: "upload",
+      content: {
+        time: 1,
+        blocks: [
+          {
+            type: "header",
+            data: {
+              level: 2,
+              text: "**Views** described",
+            },
+          },
+          {
+            type: "list",
+            data: {
+              style: "unordered",
+              items: [
+                {
+                  content: "**Logical view:** Shows abstractions.",
+                  meta: {},
+                  items: [],
+                },
+              ],
+            },
+          },
+        ],
+      },
+    });
+
+    expect(note.content.document.blocks[0]).toMatchObject({
+      type: "header",
+      data: {
+        text: "<strong>Views</strong> described",
+      },
+    });
+    expect(note.content.document.blocks[1]).toMatchObject({
+      type: "list",
+      data: {
+        items: [
+          {
+            content: "<strong>Logical view:</strong> Shows abstractions.",
+          },
+        ],
+      },
+    });
+    expect(note.content.markdown).toContain("## **Views** described");
+    expect(note.content.markdown).toContain("- **Logical view:** Shows abstractions.");
+  });
+
+  it("leaves manual notes with literal markdown markers alone", () => {
+    const note = noteRecordToWorkspaceNote({
+      ...baseRecord,
+      sourceType: "manual",
+      content: {
+        time: 1,
+        blocks: [
+          {
+            type: "paragraph",
+            data: {
+              text: "Keep **literal markers** here.",
+            },
+          },
+        ],
+      },
+    });
+
+    expect(note.content.document.blocks[0]).toMatchObject({
+      type: "paragraph",
+      data: {
+        text: "Keep **literal markers** here.",
+      },
+    });
+  });
+});
diff --git a/lib/notes/generation.ts b/lib/notes/generation.ts
index 5f1c5da..18f9e9c 100644
--- a/lib/notes/generation.ts
+++ b/lib/notes/generation.ts
@@ -4,6 +4,8 @@ import { parseMarkdownToNoteDocument } from "@/lib/notes/parse-markdown";
 
 const AZURE_DOCUMENT_INTELLIGENCE_API_VERSION = "2024-11-30";
 const EMBEDDING_DIMENSIONS = 768;
+const MAX_GENERATED_TOPIC_NOTES = 4;
+const TARGET_MARKDOWN_CHARS_PER_TOPIC_NOTE = 4500;
 
 const markdownNoteSchema = z.object({
   markdown: z.string().min(1),
@@ -140,14 +142,18 @@ export async function rewriteParsedTextAsMarkdown(parsedText: string, fileName:
           {
             text: [
               "Rewrite the parsed document text into clean Markdown notes.",
+              "Prefer comprehensive class notes over a short summary.",
               "Do not add new facts, examples, interpretations, dates, names, conclusions, or context.",
               "Only reorganize, format, and lightly rewrite information that is present in the source text.",
+              "Keep definitions, examples, steps, equations, code, diagrams, table contents, and important caveats when they appear in the source.",
+              "Avoid collapsing several source details into one vague bullet. Dense notes are better than brief notes.",
               "Preserve uncertainty and omissions. If the source is unclear, keep it unclear.",
               "Convert all parsed math section into LaTeX math blocks. Do not attempt to interpret or rewrite math expressions.",
               "Convert all parsed tables into Markdown tables. Do not attempt to interpret or rewrite table contents.",
               "Convert all parsed lists into Markdown lists. Do not attempt to interpret or rewrite list contents.",
               "Convert all parsed images into Markdown image links with alt text. Do not attempt to interpret or rewrite image contents.",
               "Convert all code sections into Markdown code blocks. Do not attempt to interpret or rewrite code contents. Fix indentation and formatting if needed for valid Markdown, but do not change code syntax.",
+              "If the source contains an explicit flowchart, state diagram, or Mermaid diagram, preserve it as a fenced Mermaid block using ```mermaid. Do not invent diagrams.",
               "Return JSON only with this shape: {\"markdown\":\"...\"}.",
               `File name: ${fileName}`,
               "Parsed text:",
@@ -188,7 +194,11 @@ export async function splitMarkdownIntoTopics(markdown: string) {
           {
             text: [
               "Split these Markdown notes into large topic sections.",
+              `Return between 1 and ${MAX_GENERATED_TOPIC_NOTES} topics unless the document is extremely large.`,
+              "Prefer fewer, denser topics over many small notes.",
+              "Each topic should usually contain multiple related sections, examples, and details rather than a single slide-sized idea.",
               "Each topic must contain only text copied or rewritten from the supplied Markdown notes.",
+              "Preserve as much supplied detail as possible inside each topic. Do not make thin summaries.",
               "Do not introduce new facts. Do not summarize across missing context.",
               "A topic may be the entire note if the note covers one topic.",
               "Return JSON only with this shape: {\"topics\":[{\"title\":\"...\",\"markdown\":\"...\"}]}",
@@ -226,10 +236,95 @@ export async function splitMarkdownIntoTopics(markdown: string) {
     throw new Error("Gemini returned an empty topic split.");
   }
 
-  return topicsSchema.parse(parseJsonPayload(response.text)).topics.map((topic) => ({
+  const topics = topicsSchema.parse(parseJsonPayload(response.text)).topics.map((topic) => ({
     title: topic.title.trim() || "Generated Topic",
     markdown: topic.markdown.trim(),
   }));
+
+  return rebalanceGeneratedTopics(topics);
+}
+
+function formatTopicForMergedMarkdown(topic: { title: string; markdown: string }) {
+  const markdown = topic.markdown.trim();
+  if (/^#{1,6}\s/.test(markdown)) {
+    return markdown;
+  }
+
+  return `## ${topic.title}\n\n${markdown}`;
+}
+
+export function rebalanceGeneratedTopics<T extends { title: string; markdown: string }>(
+  topics: T[],
+) {
+  const normalizedTopics = topics
+    .map((topic) => ({
+      ...topic,
+      title: topic.title.trim() || "Generated Topic",
+      markdown: topic.markdown.trim(),
+    }))
+    .filter((topic) => topic.markdown.length > 0);
+
+  if (normalizedTopics.length <= 1) {
+    return normalizedTopics;
+  }
+
+  const totalMarkdownChars = normalizedTopics.reduce(
+    (sum, topic) => sum + topic.markdown.length,
+    0,
+  );
+  const targetTopicCount = Math.min(
+    normalizedTopics.length,
+    MAX_GENERATED_TOPIC_NOTES,
+    Math.max(1, Math.ceil(totalMarkdownChars / TARGET_MARKDOWN_CHARS_PER_TOPIC_NOTE)),
+  );
+
+  if (normalizedTopics.length <= targetTopicCount) {
+    return normalizedTopics;
+  }
+
+  const targetCharsPerGroup = Math.ceil(totalMarkdownChars / targetTopicCount);
+  const groups: Array<typeof normalizedTopics> = [];
+  let currentGroup: typeof normalizedTopics = [];
+  let currentGroupChars = 0;
+
+  normalizedTopics.forEach((topic, index) => {
+    const remainingTopics = normalizedTopics.length - index;
+    const remainingGroupsAfterCurrent = targetTopicCount - groups.length - 1;
+    const mustKeepRoomForRemainingGroups = remainingTopics <= remainingGroupsAfterCurrent;
+    const shouldStartNextGroup =
+      currentGroup.length > 0 &&
+      groups.length < targetTopicCount - 1 &&
+      currentGroupChars + topic.markdown.length > targetCharsPerGroup &&
+      !mustKeepRoomForRemainingGroups;
+
+    if (shouldStartNextGroup) {
+      groups.push(currentGroup);
+      currentGroup = [];
+      currentGroupChars = 0;
+    }
+
+    currentGroup.push(topic);
+    currentGroupChars += topic.markdown.length;
+  });
+
+  if (currentGroup.length > 0) {
+    groups.push(currentGroup);
+  }
+
+  return groups.map((group) => {
+    if (group.length === 1) {
+      return group[0];
+    }
+
+    const firstTitle = group[0].title;
+    const lastTitle = group[group.length - 1].title;
+
+    return {
+      ...group[0],
+      title: firstTitle === lastTitle ? firstTitle : `${firstTitle} + ${lastTitle}`,
+      markdown: group.map(formatTopicForMergedMarkdown).join("\n\n"),
+    };
+  });
 }
 
 function l2Normalize(values: number[]) {
diff --git a/lib/notes/markdown.ts b/lib/notes/markdown.ts
index 08bfa80..4d77f0c 100644
--- a/lib/notes/markdown.ts
+++ b/lib/notes/markdown.ts
@@ -126,6 +126,10 @@ function serializeBlock(block: NoteBlock) {
       const lang = block.data.language ?? "";
       return `${fence}${lang}\n${block.data.code}\n${fence}`;
     }
+    case "mermaid": {
+      const fence = createCodeFence(block.data.code);
+      return `${fence}mermaid\n${block.data.code}\n${fence}`;
+    }
     case "image": {
       const altText = htmlToPlainText(block.data.caption) || "Image";
       const caption = htmlToMarkdown(block.data.caption);
diff --git a/lib/notes/parse-markdown.ts b/lib/notes/parse-markdown.ts
index a47d4d4..25eaff4 100644
--- a/lib/notes/parse-markdown.ts
+++ b/lib/notes/parse-markdown.ts
@@ -6,6 +6,7 @@
  * Handles:
  *   - ATX headings (#, ##, …)
  *   - Fenced code blocks (``` or ~~~) with optional language hint
+ *   - Mermaid diagrams (```mermaid)
  *   - Block math ($$…$$)
  *   - Blockquotes (>)
  *   - Ordered / unordered / checklist lists
@@ -27,6 +28,20 @@ function escapeHtmlAttr(value: string) {
     .replace(/>/g, "&gt;");
 }
 
+function escapeHtmlText(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function restoreInlineTokens(value: string, tokens: string[]) {
+  return tokens.reduce(
+    (current, token, index) => current.replaceAll(`\u0000${index}\u0000`, token),
+    value,
+  );
+}
+
 /**
  * Detect and replace inline math ($…$) within a single line of text.
  *
@@ -61,6 +76,44 @@ function processInlineMath(line: string): string {
   });
 }
 
+export function renderInlineMarkdownText(line: string): string {
+  const tokens: string[] = [];
+  const stash = (html: string) => {
+    const token = `\u0000${tokens.length}\u0000`;
+    tokens.push(html);
+    return token;
+  };
+
+  const withCodeTokens = line.replace(/`([^`\r\n]+?)`/g, (_match, code: string) =>
+    stash(`<code>${escapeHtmlText(code)}</code>`),
+  );
+  const withMathTokens = processInlineMath(withCodeTokens).replace(
+    /<span class="note-inline-math"[\s\S]*?<\/span>/g,
+    (match) => stash(match),
+  );
+
+  let html = escapeHtmlText(withMathTokens);
+
+  html = html.replace(
+    /\[([^\]\r\n]+)\]\(([^)\s]+)\)/g,
+    (_match, label: string, href: string) =>
+      `<a href="${escapeHtmlAttr(href)}">${label}</a>`,
+  );
+  html = html.replace(
+    /(\*\*\*|___)(?=\S)([\s\S]*?\S)\1/g,
+    "<strong><em>$2</em></strong>",
+  );
+  html = html.replace(
+    /(\*\*|__)(?=\S)([\s\S]*?\S)\1/g,
+    "<strong>$2</strong>",
+  );
+  html = html.replace(/~~(?=\S)([\s\S]*?\S)~~/g, "<s>$1</s>");
+  html = html.replace(/(^|[^\*])\*(?=\S)([^*\r\n]*?\S)\*/g, "$1<em>$2</em>");
+  html = html.replace(/(^|[^_])_(?=\S)([^_\r\n]*?\S)_/g, "$1<em>$2</em>");
+
+  return restoreInlineTokens(html, tokens);
+}
+
 function isListLine(line: string) {
   return /^[-*+]\s/.test(line) || /^\d+\.\s/.test(line);
 }
@@ -76,6 +129,10 @@ function isBlockStartLine(line: string) {
   );
 }
 
+function normalizeFenceLanguage(language: string | undefined) {
+  return (language ?? "").trim().toLowerCase().replace(/^language-/, "");
+}
+
 // ---------------------------------------------------------------------------
 // Main parser
 // ---------------------------------------------------------------------------
@@ -93,6 +150,7 @@ export function parseMarkdownToNoteDocument(markdown: string): NoteDocument {
     if (codeFenceMatch) {
       const fence = codeFenceMatch[1]!;
       const lang = (codeFenceMatch[2] ?? "").trim() || undefined;
+      const normalizedLang = normalizeFenceLanguage(lang);
       i++;
       const codeLines: string[] = [];
       while (i < lines.length && !(lines[i] ?? "").startsWith(fence)) {
@@ -100,13 +158,22 @@ export function parseMarkdownToNoteDocument(markdown: string): NoteDocument {
         i++;
       }
       i++; // skip closing fence
-      blocks.push({
-        type: "code",
-        data: {
-          code: codeLines.join("\n"),
-          ...(lang ? { language: lang } : {}),
-        },
-      });
+      if (normalizedLang === "mermaid" || normalizedLang === "mmd") {
+        blocks.push({
+          type: "mermaid",
+          data: {
+            code: codeLines.join("\n"),
+          },
+        });
+      } else {
+        blocks.push({
+          type: "code",
+          data: {
+            code: codeLines.join("\n"),
+            ...(lang ? { language: lang } : {}),
+          },
+        });
+      }
       continue;
     }
 
@@ -129,7 +196,7 @@ export function parseMarkdownToNoteDocument(markdown: string): NoteDocument {
       const level = Math.min(4, headingMatch[1]!.length) as 1 | 2 | 3 | 4;
       blocks.push({
         type: "header",
-        data: { text: (headingMatch[2] ?? "").trim(), level },
+        data: { text: renderInlineMarkdownText((headingMatch[2] ?? "").trim()), level },
       });
       i++;
       continue;
@@ -145,7 +212,7 @@ export function parseMarkdownToNoteDocument(markdown: string): NoteDocument {
       blocks.push({
         type: "quote",
         data: {
-          text: quoteLines.map(processInlineMath).join("<br>"),
+          text: quoteLines.map(renderInlineMarkdownText).join("<br>"),
           caption: "",
           alignment: "left",
         },
@@ -170,7 +237,7 @@ export function parseMarkdownToNoteDocument(markdown: string): NoteDocument {
         const olMatch = itemLine.match(/^\d+\.\s+(.*)/);
         const ulMatch = itemLine.match(/^[-*+]\s+(.*)/);
         const rawContent = (clMatch?.[2] ?? olMatch?.[1] ?? ulMatch?.[1] ?? "").trim();
-        const content = processInlineMath(rawContent);
+        const content = renderInlineMarkdownText(rawContent);
         const checked = clMatch ? clMatch[1] !== " " : false;
         items.push({
           content,
@@ -199,7 +266,7 @@ export function parseMarkdownToNoteDocument(markdown: string): NoteDocument {
       i++;
     }
     if (paragraphLines.length > 0) {
-      const text = paragraphLines.map(processInlineMath).join("<br>");
+      const text = paragraphLines.map(renderInlineMarkdownText).join("<br>");
       blocks.push({ type: "paragraph", data: { text } });
     }
   }
diff --git a/lib/notes/records.ts b/lib/notes/records.ts
index a178477..18c2957 100644
--- a/lib/notes/records.ts
+++ b/lib/notes/records.ts
@@ -1,5 +1,13 @@
 import { createNoteContent } from "@/lib/notes/markdown";
-import { emptyNoteDocument, NoteDocumentSchema, type NoteContent, type NoteDocument } from "@/lib/notes/types";
+import { renderInlineMarkdownText } from "@/lib/notes/parse-markdown";
+import {
+  emptyNoteDocument,
+  NoteDocumentSchema,
+  type NoteBlock,
+  type NoteContent,
+  type NoteDocument,
+  type NoteListItem,
+} from "@/lib/notes/types";
 
 export type NoteSourceType = "manual" | "upload";
 
@@ -56,7 +64,10 @@ function normalizeDate(value: string | Date) {
   return (value instanceof Date ? value : new Date(value)).toISOString();
 }
 
-export function normalizeNoteDocument(value: unknown): NoteDocument {
+export function normalizeNoteDocument(
+  value: unknown,
+  options?: { normalizeInlineMarkdown?: boolean },
+): NoteDocument {
   if (!value) {
     return createEmptyDocument();
   }
@@ -66,7 +77,78 @@ export function normalizeNoteDocument(value: unknown): NoteDocument {
     return createEmptyDocument();
   }
 
-  return parsed.data;
+  return options?.normalizeInlineMarkdown
+    ? normalizeInlineMarkdownInDocument(parsed.data)
+    : parsed.data;
+}
+
+function looksLikePlainInlineMarkdown(value: string) {
+  return (
+    !/<\/?[a-z][\s\S]*>/i.test(value) &&
+    !/&[a-z#0-9]+;/i.test(value) &&
+    /(`[^`\r\n]+`|\*\*[^*\r\n]+\*\*|__[^_\r\n]+__|\*[^*\r\n]+\*|_[^_\r\n]+_|~~[^~\r\n]+~~|\[[^\]\r\n]+\]\([^)]+\))/.test(
+      value,
+    )
+  );
+}
+
+function normalizeInlineMarkdownText(value: string) {
+  return looksLikePlainInlineMarkdown(value) ? renderInlineMarkdownText(value) : value;
+}
+
+function normalizeListItems(items: NoteListItem[]): NoteListItem[] {
+  return items.map((item) => ({
+    ...item,
+    content: normalizeInlineMarkdownText(item.content),
+    items: normalizeListItems(item.items),
+  }));
+}
+
+function normalizeInlineMarkdownInBlock(block: NoteBlock): NoteBlock {
+  switch (block.type) {
+    case "paragraph":
+      return {
+        ...block,
+        data: {
+          ...block.data,
+          text: normalizeInlineMarkdownText(block.data.text),
+        },
+      };
+    case "header":
+      return {
+        ...block,
+        data: {
+          ...block.data,
+          text: normalizeInlineMarkdownText(block.data.text),
+        },
+      };
+    case "quote":
+      return {
+        ...block,
+        data: {
+          ...block.data,
+          text: normalizeInlineMarkdownText(block.data.text),
+          caption: normalizeInlineMarkdownText(block.data.caption),
+        },
+      };
+    case "list":
+      return {
+        ...block,
+        data: {
+          ...block.data,
+          items: normalizeListItems(block.data.items),
+        },
+      };
+    default:
+      return block;
+  }
+}
+
+function normalizeInlineMarkdownInDocument(document: NoteDocument): NoteDocument {
+  return {
+    ...document,
+    blocks: document.blocks.map(normalizeInlineMarkdownInBlock),
+  };
 }
 
 function normalizeEmbedding(value: unknown) {
@@ -120,7 +202,10 @@ function normalizeNoteGeneration(value: unknown, noteEmbedding: number[] | null)
 }
 
 export function noteRecordToWorkspaceNote(record: NoteRecord): WorkspaceNote {
-  const document = normalizeNoteDocument(record.content);
+  const shouldNormalizeInlineMarkdown = record.sourceType === "upload";
+  const document = normalizeNoteDocument(record.content, {
+    normalizeInlineMarkdown: shouldNormalizeInlineMarkdown,
+  });
   const embedding = normalizeEmbedding(record.embedding);
   const content = createNoteContent(document);
   const markdown = typeof record.markdown === "string" ? record.markdown : content.markdown;
diff --git a/lib/notes/types.ts b/lib/notes/types.ts
index 3471e39..34b38ce 100644
--- a/lib/notes/types.ts
+++ b/lib/notes/types.ts
@@ -8,6 +8,7 @@ export type NoteBlockType =
   | "list"
   | "quote"
   | "code"
+  | "mermaid"
   | "image"
   | "math";
 
@@ -51,6 +52,11 @@ export type NoteCodeBlockData = {
   language?: string;
 };
 
+export type NoteMermaidBlockData = {
+  code: string;
+  sourceCollapsed?: boolean;
+};
+
 export type NoteImageFileData = {
   url: string;
   [key: string]: unknown;
@@ -74,6 +80,7 @@ export type NoteBlock =
   | OutputBlockData<"list", NoteListBlockData>
   | OutputBlockData<"quote", NoteQuoteBlockData>
   | OutputBlockData<"code", NoteCodeBlockData>
+  | OutputBlockData<"mermaid", NoteMermaidBlockData>
   | OutputBlockData<"image", NoteImageBlockData>
   | OutputBlockData<"math", NoteMathBlockData>;
 
@@ -161,6 +168,16 @@ const codeBlockSchema = z.object({
   tunes: z.record(z.string(), z.unknown()).optional(),
 });
 
+const mermaidBlockSchema = z.object({
+  id: z.string().optional(),
+  type: z.literal("mermaid"),
+  data: z.object({
+    code: z.string(),
+    sourceCollapsed: z.boolean().optional(),
+  }),
+  tunes: z.record(z.string(), z.unknown()).optional(),
+});
+
 const imageBlockSchema = z.object({
   id: z.string().optional(),
   type: z.literal("image"),
@@ -191,6 +208,7 @@ export const NoteBlockSchema = z.discriminatedUnion("type", [
   listBlockSchema,
   quoteBlockSchema,
   codeBlockSchema,
+  mermaidBlockSchema,
   imageBlockSchema,
   mathBlockSchema,
 ]);
diff --git a/lib/parse-test/normalize.ts b/lib/parse-test/normalize.ts
index 414e625..24559db 100644
--- a/lib/parse-test/normalize.ts
+++ b/lib/parse-test/normalize.ts
@@ -1,3 +1,4 @@
+import { CLASS_ARCHIVE_WARNING } from "@/lib/classes/archive-marker";
 import type { ParseTestEventPayload, ParseTestPayload } from "./contracts";
 import { parseTestPayloadSchema } from "./contracts";
 import { ParseTestError } from "./errors";
@@ -128,6 +129,10 @@ function toAssignmentBackedEvent(assignment: ParseTestPayload["assignments"][num
 }
 
 export function isHighSignalWarning(warning: string) {
+  if (warning === CLASS_ARCHIVE_WARNING) {
+    return false;
+  }
+
   const lowered = warning.toLowerCase();
 
   if (lowered.includes("does not provide specific due dates")) {
diff --git a/package.json b/package.json
index f0235a4..4caf5b0 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "katex": "^0.16.45",
     "lucide-react": "^1.9.0",
     "mathlive": "^0.109.1",
+    "mermaid": "^11.15.0",
     "next": "16.2.2",
     "pg": "^8.20.0",
     "radix-ui": "^1.4.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7a6e69..e9eee0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       mathlive:
         specifier: ^0.109.1
         version: 0.109.1
+      mermaid:
+        specifier: ^11.15.0
+        version: 11.15.0
       next:
         specifier: 16.2.2
         version: 16.2.2(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -197,6 +200,9 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
   '@asamuzakjp/css-color@5.1.9':
     resolution: {integrity: sha512-zd9c/Wdso6v1U7v6w3i/hbAr4K7NaSHImdpvmLt+Y9ea5BhilnIGNkfhOJ7FEIuPipAnE9tZeDOll05WDT0kgg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -416,10 +422,16 @@ packages:
   '@better-fetch/fetch@1.1.21':
     resolution: {integrity: sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A==}
 
+  '@braintree/sanitize-url@7.1.2':
+    resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
+
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
 
+  '@chevrotain/types@11.1.2':
+    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
+
   '@codexteam/icons@0.0.4':
     resolution: {integrity: sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q==}
 
@@ -1072,6 +1084,12 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.1.3':
+    resolution: {integrity: sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==}
+
   '@img/colour@1.1.0':
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
@@ -1276,6 +1294,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@mermaid-js/parser@1.1.1':
+    resolution: {integrity: sha512-VuHdsYMK1bT6X2JbcAaWAhugTRvRBRyuZgd+c22swUeI9g/ntaxF7CY7dYarhZovofCbUNO0G7JesfmNtjYOCw==}
+
   '@mixmark-io/domino@2.2.0':
     resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
 
@@ -2390,6 +2411,99 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
@@ -2402,6 +2516,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -2446,6 +2563,9 @@ packages:
   '@types/statuses@2.0.6':
     resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -2620,6 +2740,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@upsetjs/venn.js@2.0.0':
+    resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
+
   '@vercel/oidc@3.1.0':
     resolution: {integrity: sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==}
     engines: {node: '>= 20'}
@@ -3007,6 +3130,10 @@ packages:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
 
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
   commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
@@ -3045,6 +3172,12 @@ packages:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
 
+  cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
   cosmiconfig@9.0.1:
     resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
     engines: {node: '>=14'}
@@ -3073,6 +3206,162 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  cytoscape-cose-bilkent@4.1.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.34.0:
+    resolution: {integrity: sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==}
+    engines: {node: '>=0.10'}
+
+  d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  dagre-d3-es@7.0.14:
+    resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
+
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
@@ -3096,6 +3385,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  dayjs@1.11.21:
+    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -3157,6 +3449,9 @@ packages:
   defu@6.1.6:
     resolution: {integrity: sha512-f8mefEW4WIVg4LckePx3mALjQSPQgFlg9U8yaPdlsbdYcHQyj9n2zL2LJEA52smeYxOvmd/nB7TpMtHGMTHcug==}
 
+  delaunator@5.1.0:
+    resolution: {integrity: sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==}
+
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -3189,6 +3484,9 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dompurify@3.4.8:
+    resolution: {integrity: sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ==}
+
   dotenv@17.4.0:
     resolution: {integrity: sha512-kCKF62fwtzwYm0IGBNjRUjtJgMfGapII+FslMHIjMR5KTnwEmBmWLDRSnc3XSNP8bNy34tekgQyDT0hr7pERRQ==}
     engines: {node: '>=12'}
@@ -3369,6 +3667,9 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.47.0:
+    resolution: {integrity: sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==}
+
   esbuild@0.18.20:
     resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
     engines: {node: '>=12'}
@@ -3771,6 +4072,9 @@ packages:
     resolution: {integrity: sha512-5bJ+nf/UCpAjHM8i06fl7eLyVC9iuNAjm9qzkiu2ZGhM0VscSvS6WDPfAwkdkBuoXGM9FJSbKl6wylMwP9Ktig==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
@@ -3868,6 +4172,10 @@ packages:
     resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
     engines: {node: '>=18.18.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   iconv-lite@0.7.2:
     resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
     engines: {node: '>=0.10.0'}
@@ -3884,6 +4192,9 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -3902,6 +4213,13 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   ip-address@10.1.0:
     resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
     engines: {node: '>= 12'}
@@ -4186,6 +4504,9 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -4205,6 +4526,12 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
+  layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -4290,6 +4617,9 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
@@ -4329,6 +4659,11 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@16.4.2:
+    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4402,6 +4737,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  mermaid@11.15.0:
+    resolution: {integrity: sha512-pTMbcf3rWdtLiYGpmoTjHEpeY8seiy6sR+9nD7LOs8KfUbHE4lOUAprTRqRAcWSQ6MQpdX+YEsxShtGsINtPtw==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -4691,6 +5029,9 @@ packages:
     resolution: {integrity: sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==}
     engines: {node: '>=8'}
 
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4719,6 +5060,9 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4792,6 +5136,12 @@ packages:
     resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
     engines: {node: '>=16.20.0'}
 
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -5010,6 +5360,9 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  robust-predicates@3.0.3:
+    resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
+
   rolldown@1.0.0-rc.15:
     resolution: {integrity: sha512-Ff31guA5zT6WjnGp0SXw76X6hzGRk/OQq2hE+1lcDe+lJdHSgnSX6nK3erbONHyCbpSj9a9E+uX/OvytZoWp2g==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5018,6 +5371,9 @@ packages:
   rou3@0.7.12:
     resolution: {integrity: sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg==}
 
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
   router@2.2.0:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
@@ -5029,6 +5385,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -5267,6 +5626,9 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  stylis@4.4.0:
+    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -5345,6 +5707,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
   ts-morph@26.0.0:
     resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
 
@@ -5503,6 +5869,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@14.0.0:
+    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
+    hasBin: true
+
   validate-npm-package-name@7.0.2:
     resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -5773,6 +6143,11 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.6.0
+      tinyexec: 1.1.1
+
   '@asamuzakjp/css-color@5.1.9':
     dependencies:
       '@csstools/css-calc': 3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
@@ -6029,10 +6404,14 @@ snapshots:
 
   '@better-fetch/fetch@1.1.21': {}
 
+  '@braintree/sanitize-url@7.1.2': {}
+
   '@bramus/specificity@2.4.2':
     dependencies:
       css-tree: 3.2.1
 
+  '@chevrotain/types@11.1.2': {}
+
   '@codexteam/icons@0.0.4': {}
 
   '@codexteam/icons@0.0.5': {}
@@ -6478,6 +6857,14 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.1.3':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      import-meta-resolve: 4.2.0
+
   '@img/colour@1.1.0':
     optional: true
 
@@ -6621,6 +7008,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@mermaid-js/parser@1.1.1':
+    dependencies:
+      '@chevrotain/types': 11.1.2
+
   '@mixmark-io/domino@2.2.0': {}
 
   '@modelcontextprotocol/sdk@1.29.0(zod@3.25.76)':
@@ -7723,6 +8114,123 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.7': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
@@ -7735,6 +8243,8 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -7781,6 +8291,9 @@ snapshots:
 
   '@types/statuses@2.0.6': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -7939,6 +8452,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  '@upsetjs/venn.js@2.0.0':
+    optionalDependencies:
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   '@vercel/oidc@3.1.0': {}
 
   '@vitest/expect@4.1.4':
@@ -8310,6 +8828,8 @@ snapshots:
 
   commander@14.0.3: {}
 
+  commander@7.2.0: {}
+
   commander@8.3.0: {}
 
   complex-esm@2.1.1-esm1: {}
@@ -8333,6 +8853,14 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  cose-base@1.0.3:
+    dependencies:
+      layout-base: 1.0.2
+
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
   cosmiconfig@9.0.1(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
@@ -8359,6 +8887,190 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.34.0):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.34.0
+
+  cytoscape-fcose@2.2.0(cytoscape@3.34.0):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.34.0
+
+  cytoscape@3.34.0: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.1.0
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.2: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@1.0.9: {}
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-sankey@0.12.3:
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@1.3.7:
+    dependencies:
+      d3-path: 1.0.9
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.2
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
+  dagre-d3-es@7.0.14:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.18.1
+
   damerau-levenshtein@1.0.8: {}
 
   data-uri-to-buffer@4.0.1: {}
@@ -8388,6 +9100,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  dayjs@1.11.21: {}
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -8431,6 +9145,10 @@ snapshots:
 
   defu@6.1.6: {}
 
+  delaunator@5.1.0:
+    dependencies:
+      robust-predicates: 3.0.3
+
   depd@2.0.0: {}
 
   dequal@2.0.3: {}
@@ -8453,6 +9171,10 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dompurify@3.4.8:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dotenv@17.4.0: {}
 
   drizzle-kit@0.31.10:
@@ -8616,6 +9338,8 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  es-toolkit@1.47.0: {}
+
   esbuild@0.18.20:
     optionalDependencies:
       '@esbuild/android-arm': 0.18.20
@@ -9214,6 +9938,8 @@ snapshots:
 
   graphql@16.13.2: {}
 
+  hachure-fill@0.5.2: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
@@ -9358,6 +10084,10 @@ snapshots:
 
   human-signals@8.0.1: {}
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   iconv-lite@0.7.2:
     dependencies:
       safer-buffer: 2.1.2
@@ -9371,6 +10101,8 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  import-meta-resolve@4.2.0: {}
+
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -9385,6 +10117,10 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  internmap@1.0.1: {}
+
+  internmap@2.0.3: {}
+
   ip-address@10.1.0: {}
 
   ipaddr.js@1.9.1: {}
@@ -9659,6 +10395,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  khroma@2.1.0: {}
+
   kleur@3.0.3: {}
 
   kleur@4.1.5: {}
@@ -9671,6 +10409,10 @@ snapshots:
     dependencies:
       language-subtag-registry: 0.3.23
 
+  layout-base@1.0.2: {}
+
+  layout-base@2.0.1: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -9731,6 +10473,8 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.18.1: {}
+
   lodash.merge@4.6.2: {}
 
   log-symbols@6.0.0:
@@ -9764,6 +10508,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked@16.4.2: {}
+
   math-intrinsics@1.1.0: {}
 
   mathlive@0.109.1:
@@ -9945,6 +10691,30 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  mermaid@11.15.0:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.2
+      '@iconify/utils': 3.1.3
+      '@mermaid-js/parser': 1.1.1
+      '@types/d3': 7.4.3
+      '@upsetjs/venn.js': 2.0.0
+      cytoscape: 3.34.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.34.0)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.14
+      dayjs: 1.11.21
+      dompurify: 3.4.8
+      es-toolkit: 1.47.0
+      katex: 0.16.45
+      khroma: 2.1.0
+      marked: 16.4.2
+      roughjs: 4.6.6
+      stylis: 4.4.0
+      ts-dedent: 2.2.0
+      uuid: 14.0.0
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -10376,6 +11146,8 @@ snapshots:
       '@types/retry': 0.12.0
       retry: 0.13.1
 
+  package-manager-detector@1.6.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -10411,6 +11183,8 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
+  path-data-parser@0.1.0: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -10468,6 +11242,13 @@ snapshots:
 
   pkce-challenge@5.0.1: {}
 
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-selector-parser@7.1.1:
@@ -10794,6 +11575,8 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  robust-predicates@3.0.3: {}
+
   rolldown@1.0.0-rc.15:
     dependencies:
       '@oxc-project/types': 0.124.0
@@ -10817,6 +11600,13 @@ snapshots:
 
   rou3@0.7.12: {}
 
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   router@2.2.0:
     dependencies:
       debug: 4.4.3
@@ -10833,6 +11623,8 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
@@ -11177,6 +11969,8 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.29.0
 
+  stylis@4.4.0: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -11234,6 +12028,8 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  ts-dedent@2.2.0: {}
+
   ts-morph@26.0.0:
     dependencies:
       '@ts-morph/common': 0.27.0
@@ -11446,6 +12242,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@14.0.0: {}
+
   validate-npm-package-name@7.0.2: {}
 
   vary@1.1.2: {}
diff --git a/public/backgrounds/ascii-art.png b/public/backgrounds/ascii-art.png
new file mode 100644
index 0000000..4920c51
Binary files /dev/null and b/public/backgrounds/ascii-art.png differ