diff --git a/packages/morph/CLAUDE.md b/packages/morph/CLAUDE.md
new file mode 100644
index 00000000..2e684bb1
--- /dev/null
+++ b/packages/morph/CLAUDE.md
@@ -0,0 +1,30 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build Commands
+
+- Development: `pnpm dev`
+- Build: `pnpm build`
+- Lint: `pnpm lint`
+- Format: `pnpm format`
+- Format check: `pnpm format:check`
+- Database migrations: `pnpm migrate`
+
+## Code Style Guidelines
+
+- TypeScript with strict typing (avoid `any` when possible)
+- Use Next.js and React best practices with functional components
+- Format: 100 char width, single quotes, no semicolons, trailing commas
+- Naming: camelCase for variables/functions, PascalCase for components/classes, and snake-case for filenames.
+- Imports: Follow order - React/Next imports first, then external libs, internal modules
+- Error handling: Prefer early returns over deep nesting
+- Component organization: Keep components focused on single responsibility
+- Performance: Use memoization where appropriate, ensure proper cleanup in useEffect
+
+## Architecture
+
+- Next.js frontend with TypeScript
+- DrizzleORM for database operations
+- React Context for state management
+- Follow existing patterns when adding new components or features
diff --git a/packages/morph/app/globals.css b/packages/morph/app/globals.css
index d9dd4a39..157ec87f 100644
--- a/packages/morph/app/globals.css
+++ b/packages/morph/app/globals.css
@@ -1973,7 +1973,9 @@ canvas {
   max-width: 300px;
   min-width: 260px;
   width: auto;
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
+    0 5px 10px -5px rgba(0, 0, 0, 0.05);
 }
 
 /* Hide the default CodeMirror search panel */
diff --git a/packages/morph/app/layout.tsx b/packages/morph/app/layout.tsx
index 2ce38e08..8f0602e4 100644
--- a/packages/morph/app/layout.tsx
+++ b/packages/morph/app/layout.tsx
@@ -3,7 +3,7 @@ import PlausibleProvider from "next-plausible"
 import Script from "next/script"
 import type React from "react"
 
-import { Toaster } from "@/components/ui/toaster"
+import { Toaster } from "@/components/ui/sonner"
 
 import ClientProvider from "@/context/providers"
 
@@ -49,7 +49,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <PlausibleProvider domain="morph-editor.app" trackOutboundLinks trackFileDownloads>
           <ClientProvider>{children}</ClientProvider>
         </PlausibleProvider>
-        <Toaster />
+        <Toaster position="bottom-center" />
         {process.env.NODE_ENV === "production" && (
           <Script
             defer
diff --git a/packages/morph/app/template.tsx b/packages/morph/app/template.tsx
deleted file mode 100644
index 9ed21edc..00000000
--- a/packages/morph/app/template.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client"
-
-import { AnimatePresence } from "motion/react"
-
-export default function Template({ children }: { children: React.ReactNode }) {
-  return (
-    <AnimatePresence mode="wait" initial={false}>
-      {children}
-    </AnimatePresence>
-  )
-}
diff --git a/packages/morph/app/vaults/[vault]/page.tsx b/packages/morph/app/vaults/[vault]/page.tsx
index d3645d72..154358f1 100644
--- a/packages/morph/app/vaults/[vault]/page.tsx
+++ b/packages/morph/app/vaults/[vault]/page.tsx
@@ -1,82 +1,42 @@
 "use client"
 
-import { motion } from "motion/react"
 import { useParams } from "next/navigation"
-import { useCallback, useEffect } from "react"
+import { useEffect } from "react"
 
 import Editor from "@/components/editor"
 
 import { FilePreloader } from "@/context/providers"
+import { useNotesContext } from "@/context/notes"
 import { useVaultContext } from "@/context/vault"
 
-// Define page transition variants
-const pageVariants = {
-  initial: {
-    opacity: 0,
-    scale: 0.98,
-  },
-  animate: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      duration: 0.4,
-      ease: [0.25, 0.1, 0.25, 1],
-      staggerChildren: 0.1,
-    },
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.98,
-    transition: {
-      duration: 0.3,
-      ease: [0.25, 0.1, 0.25, 1],
-    },
-  },
-};
-
-// Define child element variants for staggered animation
-const childVariants = {
-  initial: { opacity: 0, y: 10 },
-  animate: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.3 }
-  },
-};
-
 export default function VaultPage() {
   const params = useParams()
   const vaultId = params.vault as string
   const { vaults } = useVaultContext()
+  const { dispatch } = useNotesContext()
 
   // Set active vault ID in localStorage whenever the vault ID changes
   useEffect(() => {
     if (vaultId) {
       localStorage.setItem("morph:active-vault", vaultId)
+      // Set the current vault ID in the notes context
+      dispatch({ type: 'SET_CURRENT_VAULT_ID', vaultId })
     }
-  }, [vaultId])
 
-  const MemoizedEditor = useCallback(
-    () => <Editor vaultId={vaultId} vaults={vaults} />,
-    [vaultId, vaults],
-  )
+    // Clean up when unmounting
+    return () => {
+      dispatch({ type: 'SET_CURRENT_VAULT_ID', vaultId: null })
+      dispatch({ type: 'SET_CURRENT_FILE_ID', fileId: null })
+      dispatch({ type: 'CLEAR_NOTES' })
+    }
+  }, [vaultId, dispatch])
 
   return (
-    <motion.main
-      className="min-h-screen bg-background overflow-hidden"
-      variants={pageVariants}
-      initial="initial"
-      animate="animate"
-      exit="exit"
-      layoutId={`vault-page-${vaultId}`}
-    >
-      <motion.div
-        variants={childVariants}
-        className="w-full h-full"
-      >
+    <main className="min-h-screen bg-background overflow-hidden">
+      <div className="w-full h-full">
         <FilePreloader />
-        <MemoizedEditor />
-      </motion.div>
-    </motion.main>
+        <Editor vaultId={vaultId} vaults={vaults} />
+      </div>
+    </main>
   )
 }
diff --git a/packages/morph/app/vaults/page.tsx b/packages/morph/app/vaults/page.tsx
index d7476872..ca944983 100644
--- a/packages/morph/app/vaults/page.tsx
+++ b/packages/morph/app/vaults/page.tsx
@@ -56,7 +56,14 @@ const Notch = memo(function Notch({ onClickBanner }: { onClickBanner: () => void
         }}
       >
         <defs>
-          <filter id="shadow" x="-10%" y="-10%" width="120%" height="150%" colorInterpolationFilters="sRGB">
+          <filter
+            id="shadow"
+            x="-10%"
+            y="-10%"
+            width="120%"
+            height="150%"
+            colorInterpolationFilters="sRGB"
+          >
             {/* Combine multiple drop shadows into a single filter for better performance */}
             <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(251, 191, 36, 0.5)" />
           </filter>
diff --git a/packages/morph/components/author-processor.tsx b/packages/morph/components/author-processor.tsx
index 778025f9..49165424 100644
--- a/packages/morph/components/author-processor.tsx
+++ b/packages/morph/components/author-processor.tsx
@@ -1,55 +1,78 @@
-import { useAuthorTasks } from "@/context/authors"
 import { useQueryAuthorStatus } from "@/services/authors"
-import { useEffect } from "react"
+import { useCallback, useEffect, memo } from "react"
+import { PgliteDatabase } from "drizzle-orm/pglite"
+
+import { useAuthorTasks } from "@/context/authors"
+
+import * as schema from "@/db/schema"
 
-export function AuthorProcessor() {
+export const AuthorProcessor = memo(function AuthorProcessor({
+  db,
+}: {
+  db: PgliteDatabase<typeof schema>
+}) {
   const { pendingTaskIds, getFileIdForTask, removeTask } = useAuthorTasks()
 
-  // Process each pending task in parallel with separate queries
-  return (
-    <>
-      {pendingTaskIds.map((taskId) => (
-        <AuthorTaskProcessor
-          key={taskId}
-          taskId={taskId}
-          fileId={getFileIdForTask(taskId)}
-          onComplete={removeTask}
-        />
-      ))}
-    </>
+  // Memoize the removeTask callback to prevent unnecessary rerenders
+  const handleTaskComplete = useCallback(
+    (taskId: string) => {
+      removeTask(taskId)
+    },
+    [removeTask]
   )
-}
+
+  // Create a memoized component factory function for task processors
+  const TaskProcessors = useCallback(() => {
+    if (pendingTaskIds.length === 0) return null
+
+    return pendingTaskIds.map((taskId) => (
+      <AuthorTaskProcessor
+        key={taskId}
+        taskId={taskId}
+        fileId={getFileIdForTask(taskId)}
+        db={db}
+        onComplete={() => handleTaskComplete(taskId)}
+      />
+    ))
+  }, [pendingTaskIds, getFileIdForTask, handleTaskComplete, db])
+
+  // Return the task processors
+  return <TaskProcessors />
+})
 
 function AuthorTaskProcessor({
   taskId,
   fileId,
+  db,
   onComplete,
 }: {
   taskId: string
   fileId: string
+  db: PgliteDatabase<typeof schema>
   onComplete: (taskId: string) => void
 }) {
   // Use the query hook to poll the task status
-  const { data, isError } = useQueryAuthorStatus(taskId, fileId)
+  const { data, isSuccess, isError } = useQueryAuthorStatus(taskId, fileId, db)
 
-  // When the task completes (success or failure), remove it from pending tasks
+  // When task is successful or fails, call the onComplete callback
   useEffect(() => {
-    if (!data) return
+    // Check for success status
+    const isSuccessful =
+      isSuccess && data && typeof data === "object" && "status" in data && data.status === "success"
 
-    const isComplete =
-      data.status === "success" || data.status === "failure" || data.status === "cancelled"
+    // Check for failure status
+    const isFailed =
+      (isSuccess &&
+        data &&
+        typeof data === "object" &&
+        "status" in data &&
+        (data.status === "failure" || data.status === "cancelled")) ||
+      isError
 
-    if (isComplete) {
-      onComplete(taskId)
-    }
-  }, [data, taskId, onComplete])
-
-  // If there's an error, also remove the task
-  useEffect(() => {
-    if (isError) {
+    if (isSuccessful || isFailed) {
       onComplete(taskId)
     }
-  }, [isError, taskId, onComplete])
+  }, [isSuccess, isError, data, taskId, onComplete])
 
   // This component doesn't render anything visible
   return null
diff --git a/packages/morph/components/context-notes.tsx b/packages/morph/components/context-notes.tsx
index f3586361..6524c277 100644
--- a/packages/morph/components/context-notes.tsx
+++ b/packages/morph/components/context-notes.tsx
@@ -9,15 +9,12 @@ import { useDebouncedCallback } from "use-debounce"
 
 import { NoteCard } from "@/components/note-card"
 
-import type { Note } from "@/db/interfaces"
+import { useNotesContext } from "@/context/notes"
 
 interface ContextNotesProps extends React.HTMLAttributes<HTMLDivElement> {
   editorViewRef: React.RefObject<EditorView | null>
   readingModeRef: React.RefObject<HTMLDivElement | null>
-  droppedNotes: Note[]
   isEditMode: boolean
-  fileId: string
-  vaultId: string
   onVisibleNotesChange?: (visibleNoteIds: string[]) => void
 }
 
@@ -25,13 +22,15 @@ export default memo(function ContextNotes({
   className,
   editorViewRef,
   readingModeRef,
-  droppedNotes,
   isEditMode,
-  fileId,
-  vaultId,
   onVisibleNotesChange,
   ...props
 }: ContextNotesProps) {
+  // Get state from NotesContext instead of props
+  const {
+    state: { droppedNotes, currentFileId, currentVaultId },
+  } = useNotesContext()
+
   const [visibleContextNotes, setVisibleContextNotes] = useState<ContextNote[]>([])
   const [visibleLines, setVisibleLines] = useState<{ start: number; end: number }>({
     start: 0,
@@ -44,11 +43,15 @@ export default memo(function ContextNotes({
 
   // Track if we've already loaded notes for this combination
   const loadedRef = useRef<boolean>(false)
-  const previousFileIdRef = useRef<string>(fileId)
+  const previousFileIdRef = useRef<string | null>(currentFileId)
   const previousNoteIdsRef = useRef<string[]>(noteIds)
 
-  // Use our context notes hook
-  const { getSimilarNotes } = useContextAwareNotes(fileId, vaultId, noteIds)
+  // Use our context notes hook with currentFileId and currentVaultId from context
+  const { getSimilarNotes } = useContextAwareNotes(
+    currentFileId || "",
+    currentVaultId || "",
+    noteIds,
+  )
 
   // Context notes data - cached until fileId, vaultId, or noteIds change
   const [contextNotes, setContextNotes] = useState<ContextNote[]>([])
@@ -59,8 +62,7 @@ export default memo(function ContextNotes({
   // Add debug toggle handler
   const toggleDebugMode = useCallback(() => {
     setDebugMode((prev) => !prev)
-    console.log(`[ContextNotes] Debug mode ${!debugMode ? "enabled" : "disabled"}`)
-  }, [debugMode])
+  }, [])
 
   // Check if noteIds have changed
   const haveNoteIdsChanged = useCallback(() => {
@@ -135,11 +137,11 @@ export default memo(function ContextNotes({
   // Load context notes data when dependencies change
   useEffect(() => {
     // Only reload if the file ID changed or notes changed
-    const fileChanged = previousFileIdRef.current !== fileId
+    const fileChanged = previousFileIdRef.current !== currentFileId
     const notesChanged = haveNoteIdsChanged()
 
     // Skip loading if we don't have needed data
-    if (!fileId || !vaultId || noteIds.length === 0) {
+    if (!currentFileId || !currentVaultId || noteIds.length === 0) {
       loadedRef.current = false
       return
     }
@@ -147,7 +149,7 @@ export default memo(function ContextNotes({
     // Reduce unnecessary loads - only load on initial mount or when data changes
     if (!loadedRef.current || fileChanged || notesChanged) {
       loadedRef.current = true
-      previousFileIdRef.current = fileId
+      previousFileIdRef.current = currentFileId
       previousNoteIdsRef.current = [...noteIds]
 
       const loadContextNotes = async () => {
@@ -162,12 +164,16 @@ export default memo(function ContextNotes({
         }
       }
 
-      const timeout = setTimeout(() => {
-        loadContextNotes()
-      }, 200)
-      return () => clearTimeout(timeout)
+      loadContextNotes()
     }
-  }, [fileId, vaultId, noteIds, getSimilarNotes, updateVisibleLines, haveNoteIdsChanged])
+  }, [
+    currentFileId,
+    currentVaultId,
+    noteIds,
+    getSimilarNotes,
+    updateVisibleLines,
+    haveNoteIdsChanged,
+  ])
 
   // Set up scroll listeners
   useEffect(() => {
@@ -201,8 +207,8 @@ export default memo(function ContextNotes({
     }
   }, [visibleContextNotes, onVisibleNotesChange])
 
-  // No visible notes, no render
-  if (visibleContextNotes.length === 0) {
+  // No visible notes or no dropped notes, no render
+  if (visibleContextNotes.length === 0 || droppedNotes.length === 0) {
     // Don't call onVisibleNotesChange here - that's done in the effect above
     return null
   }
@@ -276,7 +282,7 @@ export default memo(function ContextNotes({
               <div className="bg-green-500/80 text-white px-2 py-1 rounded text-xs z-50 my-4">
                 {contextNotes.length} context matches found
               </div>
-              <div>File ID: {fileId}</div>
+              <div>File ID: {currentFileId || "none"}</div>
               <div>
                 Notes: {noteIds.length} (with {contextNotes.length} matches)
               </div>
diff --git a/packages/morph/components/dnd.tsx b/packages/morph/components/dnd.tsx
index 83c73624..bc1a188a 100644
--- a/packages/morph/components/dnd.tsx
+++ b/packages/morph/components/dnd.tsx
@@ -1,6 +1,5 @@
 import { cn } from "@/lib"
 import { NOTES_DND_TYPE } from "@/lib/notes"
-import { motion } from "motion/react"
 import { memo, useCallback, useEffect, useRef } from "react"
 import { useDragLayer, useDrop } from "react-dnd"
 
@@ -64,12 +63,9 @@ export const EditorDropTarget = memo(function EditorDropTarget({
     handleDroppedRef.current = handleNoteDropped
   }, [handleNoteDropped])
 
-  const onDropped = useCallback(
-    (item: Note) => {
-      handleNoteDropped(item)
-    },
-    [handleNoteDropped],
-  )
+  const onDropped = useCallback((item: Note) => {
+    handleDroppedRef.current?.(item)
+  }, [])
 
   const [{ isOver }, drop] = useDrop(
     () => ({
@@ -104,36 +100,3 @@ export const EditorDropTarget = memo(function EditorDropTarget({
     </div>
   )
 })
-
-interface PlayspaceProps {
-  children: React.ReactNode
-  vaultId: string
-}
-
-export const Playspace = memo(function Playspace({ children, vaultId }: PlayspaceProps) {
-  return (
-    <motion.section
-      className="flex flex-1 overflow-hidden m-4 border"
-      layout
-      layoutId={`vault-card-${vaultId}`}
-      transition={{
-        type: "spring",
-        stiffness: 200,
-        damping: 20,
-        mass: 0.3,
-      }}
-      initial={{ borderRadius: 0 }}
-      animate={{
-        margin: "16px",
-        borderRadius: "8px",
-      }}
-      exit={{
-        margin: "16px",
-        borderRadius: "8px",
-        opacity: 0,
-      }}
-    >
-      {children}
-    </motion.section>
-  )
-})
diff --git a/packages/morph/components/editor.tsx b/packages/morph/components/editor.tsx
index 2b9239aa..94b338cd 100644
--- a/packages/morph/components/editor.tsx
+++ b/packages/morph/components/editor.tsx
@@ -1,23 +1,9 @@
 "use client"
 
-import { cn, sanitizeStreamingContent, toJsx } from "@/lib"
-import { generatePastelColor } from "@/lib/notes"
+import { cn, toJsx } from "@/lib"
 import { groupNotesByDate } from "@/lib/notes"
-import {
-  GeneratedNote,
-  NewlyGeneratedNotes,
-  SuggestionRequest,
-  SuggestionResponse,
-  checkAgentAvailability,
-  checkAgentHealth,
-} from "@/services/agents"
-import { submitContentForAuthors } from "@/services/authors"
 import { checkFileHasEmbeddings, useProcessPendingEssayEmbeddings } from "@/services/essays"
-import {
-  checkNoteHasEmbedding,
-  submitNoteForEmbedding,
-  useProcessPendingEmbeddings,
-} from "@/services/notes"
+import { logNotesForFile } from "@/services/notes"
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"
 import { markdown, markdownLanguage } from "@codemirror/lang-markdown"
 import { languages } from "@codemirror/language-data"
@@ -25,11 +11,11 @@ import { Compartment, EditorState } from "@codemirror/state"
 import { keymap } from "@codemirror/view"
 import { EditorView } from "@codemirror/view"
 import { createId } from "@paralleldrive/cuid2"
-import { CopyIcon, Cross2Icon, GlobeIcon } from "@radix-ui/react-icons"
+import { CopyIcon, Cross2Icon } from "@radix-ui/react-icons"
 import { Vim, vim } from "@replit/codemirror-vim"
 import { hyperLink } from "@uiw/codemirror-extensions-hyper-link"
 import CodeMirror from "@uiw/react-codemirror"
-import { and, eq, inArray } from "drizzle-orm"
+import { and, eq } from "drizzle-orm"
 import { drizzle } from "drizzle-orm/pglite"
 import type { Root } from "hast"
 import { AnimatePresence, motion } from "motion/react"
@@ -38,17 +24,18 @@ import * as React from "react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { DndProvider } from "react-dnd"
 import { HTML5Backend } from "react-dnd-html5-backend"
+import { toast } from "sonner"
+import { useDebouncedCallback } from "use-debounce"
 
 import { AuthorProcessor } from "@/components/author-processor"
 import ContextNotes from "@/components/context-notes"
-import { CustomDragLayer, EditorDropTarget, Playspace } from "@/components/dnd"
+import { CustomDragLayer, EditorDropTarget } from "@/components/dnd"
 import { EmbeddingStatus } from "@/components/embedding-status"
 import { EssayEmbeddingProcessor } from "@/components/essay-embedding-processor"
-import { fileField, mdToHtml } from "@/components/markdown-inline"
-import { setFile } from "@/components/markdown-inline"
+import { fileField, mdToHtml, setFile } from "@/components/markdown-inline"
 import { NoteEmbeddingProcessor } from "@/components/note-embedding-processor"
 import { DroppedNoteGroup } from "@/components/note-group"
-import { NotesPanel, StreamingNote } from "@/components/note-panel"
+import { NotesPanel } from "@/components/note-panel"
 import { theme as editorTheme, frontmatter, md, syntaxHighlighting } from "@/components/parser"
 import { search } from "@/components/parser/codemirror"
 import Rails from "@/components/rails"
@@ -58,20 +45,20 @@ import { VaultButton } from "@/components/ui/button"
 import { DotIcon } from "@/components/ui/icons"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 
-import { useAuthorTasks } from "@/context/authors"
 import { usePGlite } from "@/context/db"
-import { useEmbeddingTasks, useEssayEmbeddingTasks } from "@/context/embedding"
+import { useEssayEmbeddingTasks } from "@/context/embedding"
 import { useRestoredFile } from "@/context/file-restoration"
+import { useNotesContext } from "@/context/notes"
 import { SearchProvider } from "@/context/search"
-import { SteeringProvider, SteeringSettings } from "@/context/steering"
+import { SteeringProvider } from "@/context/steering"
 import { useVaultContext } from "@/context/vault"
 import { verifyHandle } from "@/context/vault-reducer"
 
 import useFsHandles from "@/hooks/use-fs-handles"
 import usePersistedSettings from "@/hooks/use-persisted-settings"
-import { useToast } from "@/hooks/use-toast"
 
-import type { FileSystemTreeNode, Note, Vault } from "@/db/interfaces"
+import type { Settings } from "@/db/interfaces"
+import type { FileSystemTreeNode, Vault } from "@/db/interfaces"
 import * as schema from "@/db/schema"
 
 interface EditorProps {
@@ -79,18 +66,6 @@ interface EditorProps {
   vaults: Vault[]
 }
 
-interface ReasoningHistory {
-  id: string
-  content: string
-  timestamp: Date
-  noteIds: string[]
-  reasoningElapsedTime: number
-  authors?: string[]
-  tonality?: Record<string, number>
-  temperature?: number
-  numSuggestions?: number
-}
-
 export interface AuthorRequest {
   essay: string
   authors?: string[]
@@ -101,1182 +76,186 @@ export interface AuthorRequest {
   num_search_results?: number
 }
 
-// Replace the wrapper component with a direct export of EditorComponent
+function saveLastFileInfo(vaultId: string | null, fileId: string | null, handleId: string) {
+  if (!vaultId || !fileId) return
+  try {
+    localStorage.setItem(
+      `morph:last-file:${vaultId}`,
+      JSON.stringify({
+        lastAccessed: new Date().toISOString(),
+        handleId,
+        fileId,
+      }),
+    )
+  } catch (storageError) {
+    console.error("Failed to save file info to localStorage:", storageError)
+  }
+}
+
+async function renderHastNode(value: string, settings: Settings, vaultId: string, fileId: string) {
+  try {
+    return await mdToHtml({
+      value,
+      settings,
+      vaultId,
+      fileId,
+      returnHast: true,
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
 export default memo(function Editor({ vaultId, vaults }: EditorProps) {
   const { theme } = useTheme()
-  const { toast } = useToast()
   const { storeHandle } = useFsHandles()
   const { restoredFile, setRestoredFile } = useRestoredFile()
   const { settings } = usePersistedSettings()
 
   const { refreshVault, flattenedFileIds } = useVaultContext()
-  const [currentFile, setCurrentFile] = useState<string>("Untitled")
   const [isEditMode, setIsEditMode] = useState(true)
   const [isSettingsOpen, setIsSettingsOpen] = useState(false)
   const [previewNode, setPreviewNode] = useState<Root | null>(null)
-  const [isNotesLoading, setIsNotesLoading] = useState(false)
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
   const [currentFileHandle, setCurrentFileHandle] = useState<FileSystemFileHandle | null>(null)
-  const [scanAnimationComplete, setScanAnimationComplete] = useState(false)
   const [showEphemeralBanner, setShowEphemeralBanner] = useState(false)
-  const [isOnline, setIsOnline] = useState(true)
-  const [isClient, setIsClient] = useState(false)
   const codeMirrorViewRef = useRef<EditorView | null>(null)
   const readingModeRef = useRef<HTMLDivElement>(null)
   const [showNotes, setShowNotes] = useState(false)
-  const [notes, setNotes] = useState<Note[]>([])
   const [markdownContent, setMarkdownContent] = useState<string>("")
-  const [notesError, setNotesError] = useState<string | null>(null)
-  const [droppedNotes, setDroppedNotes] = useState<Note[]>([])
-  const [streamingReasoning, setStreamingReasoning] = useState<string>("")
-  const [reasoningComplete, setReasoningComplete] = useState(false)
-  const [currentReasoningElapsedTime, setCurrentReasoningElapsedTime] = useState(0)
-  const [lastNotesGeneratedTime, setLastNotesGeneratedTime] = useState<Date | null>(null)
-  const notesContainerRef = useRef<HTMLDivElement>(null)
-  const [reasoningHistory, setReasoningHistory] = useState<ReasoningHistory[]>([])
-  const [currentReasoningId, setCurrentReasoningId] = useState<string>("")
-  const [currentlyGeneratingDateKey, setCurrentlyGeneratingDateKey] = useState<string | null>(null)
   const [isStackExpanded, setIsStackExpanded] = useState(false)
-  const [streamingSuggestionColors, setStreamingSuggestionColors] = useState<string[]>([])
-  // Add a state to track current generation notes
-  const [currentGenerationNotes, setCurrentGenerationNotes] = useState<Note[]>([])
-  const [streamingNotes, setStreamingNotes] = useState<StreamingNote[]>([])
   const [vimMode, setVimMode] = useState(settings.vimMode ?? false)
   // Add a ref to track if we've already attempted to restore a file
   const fileRestorationAttempted = useRef(false)
-  // Add state to show vim mode change notification
-  const [showVimModeChangeNotification, setShowVimModeChangeNotification] = useState(false)
-  const [currentFileId, setCurrentFileId] = useState<string | null>(null)
   // Add a state for visible context note IDs (around line 150, with other state declarations)
   const [visibleContextNoteIds, setVisibleContextNoteIds] = useState<string[]>([])
-
-  // Add a ref to track loaded files to prevent duplicate note loading
-  const loadedFiles = useRef<Set<string>>(new Set())
+  // Add state for author understanding indicator
+  const [isAuthorProcessing, setIsAuthorProcessing] = useState(false)
+  // Add state for essay embedding status
+  const [embeddingStatus, setEmbeddingStatus] = useState<
+    "in_progress" | "success" | "failure" | "cancelled" | null
+  >(null)
+
+  // Use the notes context instead of local state
+  const {
+    state: { droppedNotes, notes, currentGenerationNotes, currentFileId, dbFile: dbFileState },
+    dispatch,
+    handleNoteDropped,
+    handleNoteRemoved,
+    loadFileMetadata,
+    updateDbFile,
+  } = useNotesContext()
 
   const client = usePGlite()
   const db = drizzle({ client, schema })
 
   const vault = vaults.find((v) => v.id === vaultId)
 
-  // Add the process pending embeddings mutation
-  const processEmbeddings = useProcessPendingEmbeddings()
-
   // Add the process pending embeddings mutation for essays
-  const processEssayEmbeddings = useProcessPendingEssayEmbeddings()
+  const processEssayEmbeddings = useProcessPendingEssayEmbeddings(db)
 
-  // Get the task actions for adding tasks
-  const { addTask, pendingTaskIds } = useEmbeddingTasks()
-  const { addTask: addEssayTask, pendingTaskIds: essayPendingTaskIds } = useEssayEmbeddingTasks()
-  const { addTask: addAuthorTask } = useAuthorTasks()
+  // create a ref for contents to batch updates
+  const contentRef = useRef({ content: "" })
 
-  const toggleStackExpand = useCallback(() => {
-    setIsStackExpanded((prev) => !prev)
-  }, [])
+  // Create a ref for the keyboard handler to ensure stable identity
+  const keyHandlerRef = useRef<(e: KeyboardEvent) => void>(() => {})
 
-  // Effect to set isClient to true after component mounts
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
+  // Add a ref to track if we've processed essay embeddings for the current file
+  const essayEmbeddingProcessedRef = useRef<string | null>(null)
 
-  // Add a ref to track initial settings load
-  const initialSettingsLoadComplete = useRef(false)
+  // Add a ref to track the last time embeddings were processed for rate limiting
+  const lastEmbeddingProcessedTimestampRef = useRef<Record<string, number>>({})
+
+  // Use a ref to store the timeout ID so we can access it in the cleanup function
+  const embeddingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Get the task actions for adding tasks
+  const { addTask: addEssayTask } = useEssayEmbeddingTasks()
+
+  // Get essay embedding tasks to track essay embedding progress
+  const { pendingTaskIds: essayEmbeddingTaskIds } = useEssayEmbeddingTasks()
 
-  // Effect to update vimMode state when settings change
   useEffect(() => {
-    // Only show notification if this isn't the initial settings load
-    if (settings.vimMode !== vimMode) {
-      setVimMode(settings.vimMode ?? false)
+    if (restoredFile && restoredFile.fileId)
+      dispatch({ type: "SET_CURRENT_FILE_ID", fileId: restoredFile.fileId })
+  }, [restoredFile, dispatch])
 
-      // Only show notification if initial settings have already been loaded once
-      if (initialSettingsLoadComplete.current) {
-        setShowVimModeChangeNotification(true)
-      } else {
-        // Mark that we've completed the initial settings load
-        initialSettingsLoadComplete.current = true
-      }
-    }
-  }, [settings.vimMode, vimMode])
+  // Define updateContentRef function that updates content without logging
+  const updateContentRef = useCallback(() => {
+    contentRef.current = { content: markdownContent }
+  }, [markdownContent])
+
+  const toggleStackExpand = useCallback(() => {
+    setIsStackExpanded((prev) => !prev)
+  }, [])
 
   const updatePreview = useCallback(
-    async (value: string) => {
-      try {
-        const tree = await mdToHtml({
-          value,
-          settings,
-          vaultId,
-          filename: currentFile,
-          returnHast: true,
-        })
-        setPreviewNode(tree)
-      } catch (error) {
-        console.error(error)
-      }
+    async (content: string) => {
+      const tree = await renderHastNode(content, settings, vaultId, currentFileId!)
+      setPreviewNode(tree)
     },
-    [currentFile, settings, vaultId],
+    [currentFileId, settings, vaultId],
   )
 
+  // Debounce the preview update function
+  const debouncedUpdatePreview = useDebouncedCallback(updatePreview, 300) // 300ms debounce delay
+
   // Helper function to load file content and UI state
   const loadFileContent = useCallback(
-    (fileName: string, fileHandle: FileSystemFileHandle, content: string) => {
+    (fileId: string, fileHandle: FileSystemFileHandle, content: string) => {
       if (!codeMirrorViewRef.current) return false
 
       try {
-        // Update CodeMirror
         codeMirrorViewRef.current.dispatch({
           changes: {
             from: 0,
             to: codeMirrorViewRef.current.state.doc.length,
             insert: content,
           },
-          effects: setFile.of(fileName),
+          effects: setFile.of(fileId),
         })
 
         // Update state
         setCurrentFileHandle(fileHandle)
-        setCurrentFile(fileName)
+        dispatch({ type: "SET_CURRENT_FILE_ID", fileId })
         setMarkdownContent(content)
         setHasUnsavedChanges(false)
         setIsEditMode(true)
-
         // Update preview
-        updatePreview(content)
-
+        debouncedUpdatePreview(content)
         return true
       } catch (error) {
         console.error("Error loading file content:", error)
         return false
       }
     },
-    [updatePreview],
+    [debouncedUpdatePreview, dispatch],
   )
 
-  // Helper function to load file metadata (notes, reasonings, etc.)
-  const loadFileMetadata = useCallback(
-    async (fileName: string) => {
-      if (!vault) return
-
-      try {
-        // Find the file in database
-        let dbFile = await db.query.files.findFirst({
-          where: (files, { and, eq }) => and(eq(files.name, fileName), eq(files.vaultId, vault.id)),
-        })
-
-        // If file doesn't exist in DB, create it
-        if (!dbFile) {
-          // Extract extension
-          const extension = fileName.includes(".") ? fileName.split(".").pop() || "" : ""
-
-          try {
-            // Insert file into database
-            await db.insert(schema.files).values({
-              name: fileName,
-              extension,
-              vaultId: vault.id,
-              lastModified: new Date(),
-              embeddingStatus: "in_progress",
-            })
-
-            // Re-fetch the file to get its ID
-            dbFile = await db.query.files.findFirst({
-              where: (files, { and, eq }) =>
-                and(eq(files.name, fileName), eq(files.vaultId, vault.id)),
-            })
-          } catch (dbError) {
-            console.error("Error inserting file into database:", dbError)
-            return // Exit early if we can't create the file
-          }
-        }
-
-        // Only continue if we have a valid file reference
-        if (!dbFile) {
-          console.error("Failed to find or create file in database")
-          return
-        }
-
-        // Fetch notes associated with this file in a single query
-        try {
-          // Query all notes for this file
-          const fileNotes = await db
-            .select()
-            .from(schema.notes)
-            .where(and(eq(schema.notes.fileId, dbFile.id), eq(schema.notes.vaultId, vault.id)))
-
-          if (fileNotes && fileNotes.length > 0) {
-            // Process notes and reasoning in parallel
-            // Separate notes into regular and dropped notes
-            const regularNotes = fileNotes.filter((note) => !note.dropped)
-            const droppedNotesList = fileNotes.filter((note) => note.dropped)
-
-            // Prepare notes for the UI
-            const uiReadyRegularNotes = regularNotes.map((note) => ({
-              ...note,
-              color: note.color || generatePastelColor(),
-              lastModified: new Date(note.accessedAt),
-            }))
-
-            const uiReadyDroppedNotes = droppedNotesList.map((note) => ({
-              ...note,
-              color: note.color || generatePastelColor(),
-              lastModified: new Date(note.accessedAt),
-            }))
-
-            // Update the state with fetched notes in a non-blocking way
-            setNotes(uiReadyRegularNotes)
-            setDroppedNotes(uiReadyDroppedNotes)
-
-            // In parallel, fetch and process reasoning if needed
-            const reasoningIds = [...new Set(fileNotes.map((note) => note.reasoningId))]
-            if (reasoningIds.length > 0) {
-              const reasonings = await db
-                .select()
-                .from(schema.reasonings)
-                .where(inArray(schema.reasonings.id, reasoningIds))
-
-              if (reasonings && reasonings.length > 0) {
-                // Convert to ReasoningHistory format
-                const reasoningHistory = reasonings.map((r) => ({
-                  id: r.id,
-                  content: r.content,
-                  timestamp: r.createdAt,
-                  noteIds: fileNotes.filter((n) => n.reasoningId === r.id).map((n) => n.id),
-                  reasoningElapsedTime: r.duration,
-                  authors: r.steering?.authors,
-                  tonality: r.steering?.tonality,
-                  temperature: r.steering?.temperature,
-                  numSuggestions: r.steering?.numSuggestions,
-                }))
-
-                // Update reasoning history state in a non-blocking way
-                React.startTransition(() => {
-                  setReasoningHistory(reasoningHistory)
-                })
-              }
-            }
-          }
-        } catch (error) {
-          console.error("Error fetching notes for file:", error)
-        }
-      } catch (dbError) {
-        console.error("Error with database operations:", dbError)
-      }
-    },
-    [db, vault],
-  )
-
-  // Helper function to load file metadata with deduplication
-  const loadFileMetadataOnce = useCallback(
-    async (fileName: string) => {
-      // Create a unique key for this file
-      const fileKey = `${vaultId}:${fileName}`
-
-      // Skip if we've already loaded this file
-      if (loadedFiles.current.has(fileKey)) return
-
-      // Mark file as loaded before we start loading to prevent race conditions
-      loadedFiles.current.add(fileKey)
-
-      try {
-        await loadFileMetadata(fileName)
-      } catch (error) {
-        // If loading fails, remove from the loaded set so we can try again
-        loadedFiles.current.delete(fileKey)
-        console.error(`[Debug] Error loading file metadata for ${fileName}:`, error)
-      }
-    },
-    [vaultId, loadFileMetadata],
-  )
-
-  // Effect to use preloaded file from context if available
-  useEffect(() => {
-    if (!isClient || !restoredFile || fileRestorationAttempted.current) return
-
-    // Update local state even before CodeMirror is ready
-    setCurrentFile(restoredFile.fileName)
-    setMarkdownContent(restoredFile.content)
-    setCurrentFileHandle(restoredFile.fileHandle)
-    setHasUnsavedChanges(false)
-
-    // Update preview immediately with the restored content
-    updatePreview(restoredFile.content)
-
-    // Reset all notes states in one batch to ensure clean state for the restored file
-    setCurrentGenerationNotes([])
-    setCurrentlyGeneratingDateKey(null)
-    setNotesError(null)
-    setNotes([])
-    setDroppedNotes([])
-    setReasoningHistory([])
-
-    // Reset the processing flags to ensure new embeddings are processed
-    embeddingProcessedRef.current = false
-    essayEmbeddingProcessedRef.current = false
-
-    // If CodeMirror is ready, also update it
-    if (codeMirrorViewRef.current) {
-      loadFileContent(restoredFile.fileName, restoredFile.fileHandle, restoredFile.content)
-
-      // Load file metadata once
-      loadFileMetadataOnce(restoredFile.fileName)
-
-      // Process essay embeddings for restored file (only if online)
-      if (isOnline && vault) {
-        // Use a small timeout to let the file load completely first
-        setTimeout(async () => {
-          try {
-            // Find the file in the database to get its ID
-            const dbFile = await db.query.files.findFirst({
-              where: (files, { and, eq }) =>
-                and(eq(files.name, restoredFile.fileName), eq(files.vaultId, vault.id)),
-            })
-
-            if (dbFile) {
-              // Check if this file already has embeddings
-              const hasEmbeddings = await checkFileHasEmbeddings(db, dbFile.id)
-
-              if (!hasEmbeddings) {
-                // Process essay embeddings asynchronously using the md content function
-                const content = md(restoredFile.content).content
-                processEssayEmbeddings.mutate({
-                  addTask: addEssayTask,
-                  currentContent: content,
-                  currentVaultId: vault.id,
-                  currentFileId: dbFile.id,
-                })
-              }
-
-              // Process any existing notes for this file
-              processEmbeddings.mutate({ addTask })
-            }
-
-            // Also process author recommendations if online
-            if (!authorsProcessedRef.current && dbFile) {
-              try {
-                // Get the file content
-                const fileContent = md(restoredFile.content).content
-                const taskId = await submitContentForAuthors(db, dbFile.id, fileContent)
-                if (taskId) {
-                  addAuthorTask(taskId, dbFile.id)
-                  authorsProcessedRef.current = true
-                }
-              } catch (error) {
-                console.error("[Editor] Error processing authors:", error)
-              }
-            }
-          } catch (error) {
-            console.error("Error processing file data:", error)
-          }
-        }, 1000) // 1 second delay to ensure DB operations are ready
-      }
-    }
-
-    // Mark file as restored so we don't try again
-    fileRestorationAttempted.current = true
-  }, [
-    isClient,
-    setRestoredFile,
-    restoredFile,
-    loadFileContent,
-    loadFileMetadataOnce,
-    isOnline,
-    vault,
-    db,
-    processEmbeddings,
-    processEssayEmbeddings,
-    addTask,
-    addEssayTask,
-    addAuthorTask,
-    updatePreview,
-  ])
-
-  // Reset loaded files cache when vault changes
-  useEffect(() => {
-    loadedFiles.current.clear()
-  }, [vaultId])
-
-  // Effect to track online/offline status
-  useEffect(() => {
-    // Only run this effect on the client after it has mounted
-    if (!isClient) return
-
-    // Set initial state based on navigator now that we are on the client
-    setIsOnline(navigator.onLine)
-
-    const handleOnline = () => setIsOnline(true)
-    const handleOffline = () => setIsOnline(false)
-
-    window.addEventListener("online", handleOnline)
-    window.addEventListener("offline", handleOffline)
-
-    // Initial check in case the event listeners haven't fired yet
-    setIsOnline(navigator.onLine)
-
-    return () => {
-      window.removeEventListener("online", handleOnline)
-      window.removeEventListener("offline", handleOffline)
-    }
-    // Rerun specifically when isClient becomes true to set initial state
-  }, [isClient])
-
   const toggleNotes = useCallback(() => {
-    // Check isClient here for safety, though interaction implies client-side
-    if (isClient && !isOnline) {
-      toast({
-        title: "Notes panel requires an internet connection.",
-        description: "Please check your connection and try again.",
-        duration: 5000,
-        variant: "destructive",
-      })
-      return // Prevent opening the panel
-    }
-
-    // Instead of using setState callback, directly use a variable for performance
-    const shouldShowNotes = !showNotes
-
-    // If we're hiding the panel
-    if (!shouldShowNotes) {
-      // Reset reasoning state
-      setStreamingReasoning("")
-      setReasoningComplete(false)
-      setNotesError(null) // Reset error state when closing panel
-
-      // Synchronize current generation notes with history if they exist
-      if (currentGenerationNotes.length > 0 && currentlyGeneratingDateKey) {
-        // Process the notes synchronously, rather than in state updater
-        // Filter out any duplicates that might already exist
-        const notesToAdd = currentGenerationNotes.filter(
-          (note) => !notes.some((existingNote) => existingNote.id === note.id),
-        )
-
-        if (notesToAdd.length > 0) {
-          // Add to notes and sort by creation date
-          const combined = [...notesToAdd, ...notes]
-          const sorted = combined.sort(
-            (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-          )
-          setNotes(sorted)
-        }
-
-        // Save notes to database if the file isn't "Untitled" and we have a vault
-        if (currentFile !== "Untitled" && vault) {
-          // We use a self-executing async function to avoid making the whole callback async
-          ;(async () => {
-            try {
-              // First, find the file in database
-              const dbFile = await db.query.files.findFirst({
-                where: (files, { and, eq }) =>
-                  and(eq(files.name, currentFile), eq(files.vaultId, vault.id)),
-              })
-
-              if (!dbFile) {
-                console.error("Failed to find file in database when synchronizing notes")
-                return
-              }
-
-              // Get the current reasoning for these notes
-              const currentReasoning = reasoningHistory.find((r) => r.id === currentReasoningId)
-              if (currentReasoning && currentReasoningId) {
-                // Check if reasoning exists in database
-                const existingReasoning = await db.query.reasonings.findFirst({
-                  where: eq(schema.reasonings.id, currentReasoningId),
-                })
-
-                // If reasoning doesn't exist yet, create it
-                if (!existingReasoning && currentReasoning) {
-                  // Get note IDs for the reasoning
-                  const noteIds = currentGenerationNotes.map((note) => note.id)
-
-                  // Insert reasoning with properly typed steering (can be null)
-                  await db.insert(schema.reasonings).values({
-                    id: currentReasoningId,
-                    fileId: dbFile.id,
-                    vaultId: vault.id,
-                    content: currentReasoning.content,
-                    noteIds: noteIds,
-                    createdAt: currentReasoning.timestamp,
-                    accessedAt: new Date(),
-                    duration: currentReasoning.reasoningElapsedTime,
-                    steering: currentGenerationNotes[0]?.steering || null,
-                  })
-                }
-              }
-
-              // For each note, ensure it's saved to database if not already
-              for (const note of currentGenerationNotes) {
-                // Check if note exists in database
-                const existingNote = await db.query.notes.findFirst({
-                  where: eq(schema.notes.id, note.id),
-                })
-
-                if (!existingNote) {
-                  // Insert note with properly typed steering (can be null)
-                  await db.insert(schema.notes).values({
-                    id: note.id,
-                    content: note.content,
-                    color: note.color,
-                    createdAt: note.createdAt,
-                    accessedAt: new Date(),
-                    dropped: note.dropped ?? false,
-                    fileId: dbFile.id,
-                    vaultId: note.vaultId,
-                    reasoningId: note.reasoningId!,
-                    steering: note.steering || null,
-                    embeddingStatus: "in_progress",
-                    embeddingTaskId: null,
-                  })
-                }
-              }
-
-              // Process notes for embedding one by one and set up polling
-              for (const note of currentGenerationNotes) {
-                const hasEmbedding = await checkNoteHasEmbedding(db, note.id)
-                if (!hasEmbedding) {
-                  const result = await submitNoteForEmbedding(db, note)
-
-                  // If successful and we have a task ID, add it for polling
-                  if (result) {
-                    // Wait a small amount of time to ensure DB updates are complete
-                    await new Promise((resolve) => setTimeout(resolve, 100))
-
-                    const updatedNote = await db.query.notes.findFirst({
-                      where: eq(schema.notes.id, note.id),
-                    })
-
-                    if (updatedNote?.embeddingTaskId) {
-                      addTask(updatedNote.embeddingTaskId)
-                    }
-                  }
-                }
-              }
-            } catch (error) {
-              console.error("Failed to sync notes to database:", error)
-            }
-          })()
-        }
-
-        // Reset current generation state to prevent duplication when reopening
-        setCurrentGenerationNotes([])
-        setCurrentlyGeneratingDateKey(null)
-      }
-    } else {
-      // When opening the notes panel, check for notes that need embeddings
-      // but only process once per file to avoid excessive processing
-      if (notes.length > 0 && !embeddingProcessedRef.current) {
-        processEmbeddings.mutate({ addTask })
-        embeddingProcessedRef.current = true
-      }
-    }
-
-    // Update state after all synchronous operations
-    setShowNotes(shouldShowNotes)
-  }, [
-    isOnline,
-    isClient,
-    toast,
-    currentGenerationNotes,
-    currentlyGeneratingDateKey,
-    currentFile,
-    vault,
-    db,
-    currentReasoningId,
-    reasoningHistory,
-    processEmbeddings,
-    addTask,
-    notes,
-    showNotes,
-  ])
-
-  const contentRef = useRef({ content: "", filename: "" })
-
-  const handleNoteDropped = useCallback(
-    async (note: Note) => {
-      // Ensure note has a color if it doesn't already
-      const noteWithColor = {
-        ...note,
-        color: note.color || generatePastelColor(),
-        dropped: true,
-        lastModified: new Date(),
-        // Preserve existing embedding status or set to "in_progress" if undefined
-        embeddingStatus: note.embeddingStatus || "in_progress",
-      }
-
-      // Update droppedNotes optimistically without triggering unnecessary motion
-      setDroppedNotes((prev) => {
-        if (prev.find((n) => n.id === noteWithColor.id)) return prev
-        // Add note to the end of the array for proper scroll-to behavior
-        return [...prev, noteWithColor]
-      })
-
-      // Find the file in the database to get its ID
-      try {
-        // First, find the file in the database
-        const dbFile = await db.query.files.findFirst({
-          where: (files, { and, eq }) =>
-            and(eq(files.name, currentFile), eq(files.vaultId, vault?.id || "")),
-        })
-
-        if (!dbFile) {
-          console.error("Failed to find file in database when dropping note")
-          return
-        }
-
-        // Save to database - update the note's dropped flag
-        await db
-          .update(schema.notes)
-          .set({
-            dropped: true,
-            color: noteWithColor.color,
-            accessedAt: new Date(), // Update accessedAt timestamp
-            fileId: dbFile.id,
-            // Only update embeddingStatus if it's not already set
-            ...(noteWithColor.embeddingStatus !== "success" && { embeddingStatus: "in_progress" }),
-          })
-          .where(eq(schema.notes.id, noteWithColor.id))
-
-        // After updating the note's dropped status, check if it needs embedding
-        // If it doesn't already have an embedding, submit it
-        const hasEmbedding = await checkNoteHasEmbedding(db, noteWithColor.id)
-        if (!hasEmbedding) {
-          // Get the full note with all fields
-          const fullNote = await db.query.notes.findFirst({
-            where: eq(schema.notes.id, noteWithColor.id),
-          })
-
-          if (fullNote) {
-            // Submit for embedding and get task ID
-            const result = await submitNoteForEmbedding(db, fullNote)
-
-            // If successful, update the local state with the latest status
-            if (result) {
-              // Wait a small amount of time to ensure DB updates are complete
-              await new Promise((resolve) => setTimeout(resolve, 100))
-
-              // Get the updated note with task ID
-              const updatedNote = await db.query.notes.findFirst({
-                where: eq(schema.notes.id, noteWithColor.id),
-              })
-
-              if (updatedNote?.embeddingTaskId) {
-                addTask(updatedNote.embeddingTaskId)
-
-                // Update dropped notes with the new status and task ID
-                setDroppedNotes((prev) =>
-                  prev.map((n) =>
-                    n.id === noteWithColor.id
-                      ? {
-                          ...n,
-                          embeddingStatus: "in_progress",
-                          embeddingTaskId: updatedNote.embeddingTaskId,
-                        }
-                      : n,
-                  ),
-                )
-              }
-            } else {
-              // Update dropped notes to show failure
-              setDroppedNotes((prev) =>
-                prev.map((n) =>
-                  n.id === noteWithColor.id ? { ...n, embeddingStatus: "failure" } : n,
-                ),
-              )
-            }
-          }
-        } else {
-          // Update dropped notes to show success
-          setDroppedNotes((prev) =>
-            prev.map((n) => (n.id === noteWithColor.id ? { ...n, embeddingStatus: "success" } : n)),
-          )
-        }
-      } catch (error) {
-        console.error("Failed to update note dropped status:", error)
-        // Update dropped notes to show failure
-        setDroppedNotes((prev) =>
-          prev.map((n) => (n.id === noteWithColor.id ? { ...n, embeddingStatus: "failure" } : n)),
-        )
-      }
-    },
-    [db, currentFile, vault, addTask],
-  )
-
-  useEffect(() => {
-    contentRef.current = { content: markdownContent, filename: currentFile }
-  }, [markdownContent, currentFile])
-
-  const onContentChange = useCallback(
-    async (value: string) => {
-      setMarkdownContent(value)
-      if (value !== markdownContent) {
-        setHasUnsavedChanges(true)
-      }
-
-      const timeoutId = setTimeout(() => updatePreview(value), 100)
-
-      return () => clearTimeout(timeoutId)
-    },
-    [updatePreview, markdownContent],
-  )
-
-  const fetchNewNotes = useCallback(
-    async (
-      content: string,
-      numSuggestions: number,
-      steeringOptions?: {
-        authors?: string[]
-        tonality?: Record<string, number>
-        temperature?: number
-      },
-    ): Promise<NewlyGeneratedNotes> => {
-      try {
-        const apiEndpoint = process.env.NEXT_PUBLIC_API_ENDPOINT || "http://localhost:8000"
-
-        const isAgentAvailable = await checkAgentAvailability()
-        if (!isAgentAvailable) {
-          throw new Error("Agent service is not available. Please try again later.")
-        }
-
-        // Check agent health to ensure it's functioning properly
-        const healthStatus = await checkAgentHealth()
-        if (!healthStatus.healthy) {
-          const unhealthyServices = healthStatus.services
-            .filter((service) => !service.healthy)
-            .map((service) => `${service.name} (${service.error || "Unknown error"})`)
-            .join(", ")
-
-          console.error("Service health check failed:", {
-            timestamp: healthStatus.timestamp,
-            overallHealth: healthStatus.healthy,
-            unhealthyServices,
-            allServices: healthStatus.services,
-          })
-
-          const errorMsg = `Services unavailable: ${unhealthyServices}`
-          toast({
-            title: "Service Health Error",
-            description: errorMsg,
-            variant: "destructive",
-            duration: 5000,
-          })
-          throw new Error(errorMsg)
-        }
-
-        // Create a new reasoning ID for this generation
-        const reasoningId = createId()
-
-        // Reset states for new generation
-        setStreamingReasoning("")
-        setReasoningComplete(false)
-        setCurrentReasoningElapsedTime(0) // Reset elapsed time at the start
-        setStreamingNotes([]) // Reset streaming notes
-        setScanAnimationComplete(false) // Reset scan animation state
-
-        // Set a current date key for the new notes group with 15-second interval
-        const now = new Date()
-        const seconds = now.getSeconds()
-        const interval = Math.floor(seconds / 15) * 15
-        const dateKey = `${now.toDateString()}-${now.getHours()}-${now.getMinutes()}-${interval}`
-        setCurrentlyGeneratingDateKey(dateKey)
-
-        const max_tokens = 16384
-        const essay = md(content).content
-        const request: SuggestionRequest = {
-          essay,
-          num_suggestions: numSuggestions,
-          temperature: steeringOptions?.temperature ?? 0.6,
-          max_tokens,
-          ...(steeringOptions?.authors && { authors: steeringOptions.authors }),
-          ...(steeringOptions?.tonality && { tonality: steeringOptions.tonality }),
-          usage: true,
-        }
-
-        // Add dropped notes to the request if there are any
-        if (droppedNotes.length > 0) {
-          request.notes = droppedNotes.map((note) => ({
-            vault_id: note.vaultId,
-            file_id: note.fileId,
-            note_id: note.id,
-            content: note.content,
-          }))
-        }
-
-        // Start timing reasoning phase
-        const reasoningStartTime = Date.now()
-        let reasoningEndTime: number | null = null
-
-        // Create streaming request
-        let response: Response
-        try {
-          response = await fetch(`${apiEndpoint}/suggests`, {
-            method: "POST",
-            headers: { Accept: "text/event-stream", "Content-Type": "application/json" },
-            body: JSON.stringify(request),
-          })
-
-          if (!response.ok) {
-            const errorMsg = `Failed to fetch suggestions: ${response.statusText || "Unknown error"}`
-            toast({
-              title: "Suggestion Error",
-              description: errorMsg,
-              variant: "destructive",
-              duration: 5000,
-            })
-            throw new Error(errorMsg)
-          }
-
-          if (!response.body) {
-            const errorMsg = "Response body is empty"
-            toast({
-              title: "Empty Response",
-              description: errorMsg,
-              variant: "destructive",
-              duration: 5000,
-            })
-            throw new Error(errorMsg)
-          }
-        } catch (suggestError: any) {
-          const errorMsg = `Failed to get suggestions: ${suggestError.message || "Unknown error"}`
-          toast({
-            title: "Suggestion Error",
-            description: errorMsg,
-            variant: "destructive",
-            duration: 5000,
-          })
-          throw new Error(errorMsg)
-        }
-
-        const reader = response.body.getReader()
-        const decoder = new TextDecoder()
-
-        // We'll collect all suggestion JSON data here
-        let suggestionString = ""
-        let inReasoningPhase = true
-        let collectedReasoning = ""
-
-        // Initialize variables for streaming JSON parsing
-        const colors = Array(numSuggestions)
-          .fill(null)
-          .map(() => generatePastelColor())
-        setStreamingSuggestionColors(colors)
-
-        // Create empty streaming notes with unique IDs
-        const initialStreamingNotes = Array(numSuggestions)
-          .fill(null)
-          .map((_, index) => ({
-            id: createId(),
-            content: "",
-            color: colors[index] || generatePastelColor(),
-            isComplete: false,
-            isScanComplete: false,
-          }))
-        setStreamingNotes(initialStreamingNotes)
-
-        // Variables for tracking streaming JSON state
-        let currentNoteIndex = 0
-        let partialJSON = ""
-        let inJsonSuggestion = false
-        let currentSuggestion = ""
-        let isFirstNote = true
-
-        // Pattern variables that account for whitespace
-        const firstNoteStartPattern = '{"suggestions":\\s*\\[\\s*{"suggestion":\\s*"'
-        const subsequentNoteStartPattern = '\\s*{"suggestion":\\s*"'
-        const endPatternWithComma = '"\\s*}\\s*,'
-        const endPatternFinal = '"\\s*}\\s*]\\s*}'
-
-        // Process the stream
-        while (true) {
-          const { value, done } = await reader.read()
-          if (done) break
-
-          const chunk = decoder.decode(value, { stream: true })
-
-          // Process each line
-          for (const line of chunk.split("\n\n")) {
-            if (!line.trim()) continue
-
-            try {
-              // Assuming delta structure based on previous code
-              const delta = JSON.parse(line) as { reasoning?: string; suggestion?: string }
-
-              // Handle reasoning phase
-              if (delta.reasoning) {
-                collectedReasoning += delta.reasoning
-                setStreamingReasoning((prev) => prev + delta.reasoning)
-              }
-
-              // Check for phase transition
-              if (delta.reasoning === "" && delta.suggestion !== "") {
-                // First time we see suggestion means reasoning is complete
-                if (inReasoningPhase) {
-                  // Record when reasoning phase ended
-                  if (!reasoningEndTime) {
-                    reasoningEndTime = Date.now()
-                    // Calculate and update elapsed time when reasoning ends
-                    const elapsedTime = Math.round((reasoningEndTime - reasoningStartTime) / 1000)
-                    setCurrentReasoningElapsedTime(elapsedTime)
-                  }
-                  setReasoningComplete(true)
-                  inReasoningPhase = false
-                }
-
-                // Handle each delta suggestion chunk for streaming JSON
-                // Ensure delta.suggestion is not null/undefined before adding
-                const suggestionChunk = delta.suggestion || ""
-                partialJSON += suggestionChunk
-
-                // First note has a different start pattern than subsequent ones
-                if (!inJsonSuggestion) {
-                  if (isFirstNote) {
-                    // Check for the first note start pattern
-                    const firstStartRegex = new RegExp(firstNoteStartPattern)
-                    const match = firstStartRegex.exec(partialJSON)
-
-                    if (match) {
-                      inJsonSuggestion = true
-                      const matchIndex = match.index + match[0].length
-                      currentSuggestion = partialJSON.substring(matchIndex)
-                      partialJSON = ""
-                      isFirstNote = false
-                    }
-                  } else {
-                    // Check for subsequent note start pattern
-                    const subsequentStartRegex = new RegExp(subsequentNoteStartPattern)
-                    const match = subsequentStartRegex.exec(partialJSON)
-
-                    if (match) {
-                      inJsonSuggestion = true
-                      const matchIndex = match.index + match[0].length
-                      currentSuggestion = partialJSON.substring(matchIndex)
-                      partialJSON = ""
-                    }
-                  }
-                }
-                // If we're inside a suggestion object, accumulate content
-                else if (inJsonSuggestion) {
-                  currentSuggestion += suggestionChunk // Use the checked suggestionChunk
-
-                  // For a better streaming experience, update the note's content with each delta
-                  setStreamingNotes((prevNotes) => {
-                    if (!prevNotes[currentNoteIndex]) return prevNotes
-
-                    // Create a new array to avoid mutating the previous state
-                    const updatedNotes = [...prevNotes]
-
-                    updatedNotes[currentNoteIndex] = {
-                      ...updatedNotes[currentNoteIndex],
-                      content: sanitizeStreamingContent(currentSuggestion),
-                    }
-
-                    return updatedNotes
-                  })
-
-                  // Check for end patterns - either with comma (more notes to come) or final closing pattern
-                  const endWithCommaRegex = new RegExp(endPatternWithComma)
-                  const endFinalRegex = new RegExp(endPatternFinal)
-
-                  const endWithCommaMatch = endWithCommaRegex.exec(currentSuggestion)
-                  const endFinalMatch = endFinalRegex.exec(currentSuggestion)
-
-                  // Process if we found either ending pattern
-                  if (endWithCommaMatch || endFinalMatch) {
-                    // Get the end index based on which pattern matched
-                    const match = endWithCommaMatch || endFinalMatch
-                    const endIndex = match!.index
-
-                    // Extract the suggestion content up to the end pattern
-                    let suggestionContent = currentSuggestion.substring(0, endIndex)
-
-                    // Update the streaming note with the current content
-                    setStreamingNotes((prevNotes) => {
-                      if (!prevNotes[currentNoteIndex]) return prevNotes
-
-                      // Create a new array to avoid mutating the previous state
-                      const updatedNotes = [...prevNotes]
-
-                      updatedNotes[currentNoteIndex] = {
-                        ...updatedNotes[currentNoteIndex],
-                        content: sanitizeStreamingContent(suggestionContent),
-                        isComplete:
-                          endFinalMatch !== null && currentNoteIndex === numSuggestions - 1,
-                      }
-
-                      return updatedNotes
-                    })
-
-                    // Reset suggestion tracking
-                    inJsonSuggestion = false
-
-                    // Important: Clear both variables to prevent flashing
-                    currentSuggestion = ""
-                    suggestionContent = ""
-                    partialJSON = ""
-
-                    // Move to next note if there's more to process
-                    if (endWithCommaMatch) {
-                      currentNoteIndex = Math.min(currentNoteIndex + 1, numSuggestions - 1)
-                    }
-                  }
-                }
-
-                // Collect suggestion data for final processing
-                suggestionString += suggestionChunk // Use the checked suggestionChunk
-              }
-            } catch (e) {
-              console.error("Error parsing line:", e)
-              // Clean up on error to avoid stuck partial content
-              partialJSON = ""
-              currentSuggestion = ""
-            }
-          }
-        }
-
-        // Ensure we mark reasoning as complete
-        if (inReasoningPhase) {
-          // If we never set the end time but are now complete, set it
-          if (!reasoningEndTime) {
-            reasoningEndTime = Date.now()
-            // Calculate and update elapsed time when reasoning ends
-            const elapsedTime = Math.round((reasoningEndTime - reasoningStartTime) / 1000)
-            setCurrentReasoningElapsedTime(elapsedTime)
-          }
-          setReasoningComplete(true)
-        }
-
-        // Mark all streaming notes as complete
-        setStreamingNotes((prevNotes) => {
-          const allComplete = prevNotes.map((note) => ({ ...note, isComplete: true }))
-          return allComplete
-        })
-
-        // Calculate elapsed time for reasoning
-        const reasoningElapsedTime = Math.round((reasoningEndTime! - reasoningStartTime) / 1000)
-        setCurrentReasoningElapsedTime(reasoningElapsedTime)
-
-        // Run scan animation after a small delay
-        const runScanAnimation = async () => {
-          const noteCount = initialStreamingNotes.length
-          let currentDelay = 100
-          for (let i = 0; i < noteCount; i++) {
-            setStreamingNotes((prevNotes) => {
-              // Important: Always work with the *latest* state inside the loop
-              const currentNotes = prevNotes
-              const updatedNotes = [...currentNotes]
-              if (updatedNotes[i]) {
-                updatedNotes[i] = {
-                  ...updatedNotes[i],
-                  isScanComplete: true,
-                }
-              }
-              return updatedNotes
-            })
-            // Gradually reduce the delay for a smooth acceleration effect
-            currentDelay = Math.max(10, currentDelay * 0.85)
-          }
-          // Set loading to false which will trigger showing the final notes
-          setIsNotesLoading(false)
-          setScanAnimationComplete(true)
-        }
-
-        // Start the scan animation sequence
-        runScanAnimation()
-
-        // At this point we have the complete reasoning, but we don't yet know which notes it produced
-        // We'll update reasoningHistory later when we know the noteIds
-        setCurrentReasoningId(reasoningId)
-
-        // Clean up
-        reader.releaseLock()
-
-        // Parse collected suggestions
-        let generatedNotes: GeneratedNote[] = []
-
-        if (suggestionString.trim()) {
-          try {
-            const suggestionData: SuggestionResponse = JSON.parse(suggestionString.trim())
-
-            if (suggestionData.suggestions && Array.isArray(suggestionData.suggestions)) {
-              generatedNotes = suggestionData.suggestions.map((suggestion) => ({
-                content: suggestion.suggestion,
-              }))
-            }
-          } catch (e) {
-            console.error("Error parsing suggestions:", e)
-            const errorMsg = "Failed to parse suggestion data"
-            toast({
-              title: "Parsing Error",
-              description: errorMsg,
-              variant: "destructive",
-              duration: 5000,
-            })
-          }
-        }
-
-        if (generatedNotes.length === 0) {
-          // Set error state when no suggestions could be generated
-          setNotesError("Could not generate suggestions for this content")
-          setCurrentlyGeneratingDateKey(null)
-        } else {
-          // Save the reasoning content to be associated with the notes later
-          const reasoningData = {
-            id: reasoningId,
-            content: collectedReasoning,
-            timestamp: new Date(),
-            noteIds: [], // Will be populated after creating notes
-            reasoningElapsedTime,
-            // Add steering parameters if they exist
-            authors: steeringOptions?.authors,
-            tonality: steeringOptions?.tonality && steeringOptions?.tonality,
-            temperature: steeringOptions?.temperature,
-            numSuggestions: numSuggestions,
-          }
-          setReasoningHistory((prev) => [...prev, { ...reasoningData }])
-          setNotesError(null)
-        }
-
-        return {
-          generatedNotes,
-          reasoningId,
-          reasoningElapsedTime,
-          reasoningContent: collectedReasoning,
-        }
-      } catch (error: any) {
-        // Catch specific error type
-        const errorMsg = `Notes not available: ${error.message || "Unknown error"}`
-        setNotesError(errorMsg)
-        setReasoningComplete(true)
-        setCurrentlyGeneratingDateKey(null)
-
-        // Only show toast if not already shown by specific error handlers
-        if (
-          !error.message ||
-          (!error.message.includes("Service") &&
-            !error.message.includes("Connection") &&
-            !error.message.includes("Health") &&
-            !error.message.includes("Suggestion") &&
-            !error.message.includes("Empty") &&
-            !error.message.includes("Parsing"))
-        ) {
-          toast({
-            title: "Error",
-            description: errorMsg,
-            variant: "destructive",
-            duration: 5000,
-          })
-        }
-
-        // Ensure we return a rejected promise
-        return Promise.reject(error)
-      }
-    },
-    [toast, droppedNotes],
-  )
+    setShowNotes(!showNotes)
+  }, [showNotes])
 
   const handleSave = useCallback(async () => {
     try {
       let targetHandle = currentFileHandle
+      let fileId = currentFileId
+      const handleId = createId() // Always generate a new handle ID
+      let isNewFile = false
+
+      // If we're working with the default file or don't have a handle, we need to save as a new file
+      if (!targetHandle || fileId === null) {
+        isNewFile = true
+        // For new files, create a new unique file ID if we're using null
+        if (fileId === null) {
+          fileId = createId()
+        }
 
-      if (!targetHandle) {
+        // Show the save file picker
         targetHandle = await window.showSaveFilePicker({
           id: vaultId,
-          suggestedName: currentFile.endsWith(".md") ? currentFile : `${currentFile}.md`,
+          suggestedName: `morph-${fileId}.md`,
           types: [
             {
               description: "Markdown Files",
@@ -1286,456 +265,161 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
         })
       }
 
+      // Write the file content
       const writable = await targetHandle.createWritable()
       await writable.write(markdownContent)
       await writable.close()
 
-      // When saving a new file, we need to get a handle ID for it
-      const handleId = createId() // Generate a new ID for this handle
-
-      if (!currentFileHandle && vault) {
-        // Store the handle in IndexedDB with the new ID
-        await storeHandle(handleId, vaultId, handleId, targetHandle)
+      const file = await targetHandle.getFile()
 
-        setCurrentFileHandle(targetHandle)
-        setCurrentFile(targetHandle.name)
+      // If this is a new file and we have a vault, create a db entry
+      if (isNewFile && vault) {
+        // Extract the filename and extension
+        const filename = targetHandle.name
+        const extension = filename.includes(".") ? filename.split(".").pop() || "" : ""
 
-        await refreshVault(vault.id)
-      }
-
-      // Save the current file info to localStorage for this vault
-      if (isClient && vaultId) {
         try {
-          const fileName = targetHandle.name
-          localStorage.setItem(
-            `morph:last-file:${vaultId}`,
-            JSON.stringify({
-              fileName,
-              lastAccessed: new Date().toISOString(),
-              handleId: handleId, // Use the newly created handleId
-            }),
-          )
-        } catch (storageError) {
-          console.error("Failed to save file info to localStorage:", storageError)
-          // Non-critical, we can continue
-        }
-      }
-
-      setHasUnsavedChanges(false)
-    } catch {}
-  }, [
-    currentFileHandle,
-    markdownContent,
-    currentFile,
-    vault,
-    refreshVault,
-    vaultId,
-    isClient,
-    storeHandle,
-  ])
-
-  const memoizedExtensions = useMemo(() => {
-    const tabSize = new Compartment()
-
-    const exts = [
-      history(),
-      keymap.of([...defaultKeymap, ...historyKeymap]),
-      markdown({ base: markdownLanguage, codeLanguages: languages }),
-      frontmatter(),
-      EditorView.lineWrapping,
-      tabSize.of(EditorState.tabSize.of(settings.tabSize)),
-      fileField.init(() => currentFile),
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged || update.selectionSet) {
-          // We only update the filename if it explicitly changes via the effect
-          const newFilename = update.state.field(fileField)
-          setCurrentFile(newFilename)
-        }
-      }),
-      syntaxHighlighting(),
-      search(),
-      hyperLink,
-    ]
-
-    if (vimMode) exts.push(vim())
-    return exts
-  }, [settings, currentFile, vimMode])
+          // Create a new file entry in the database
+          const newFile = await db
+            .insert(schema.files)
+            .values({
+              id: fileId,
+              name: filename,
+              extension,
+              vaultId: vaultId,
+              lastModified: new Date(),
+              embeddingStatus: "in_progress",
+            })
+            .returning()
 
-  useEffect(() => {
-    if (restoredFile?.content) {
-      updatePreview(restoredFile.content)
-    } else if (markdownContent) {
-      updatePreview(markdownContent)
-    }
-  }, [markdownContent, updatePreview, restoredFile])
+          if (newFile && newFile.length > 0) {
+            // Use the database-generated ID if available
+            const dbFileId = newFile[0].id
 
-  // Add an effect to update preview specifically when a file is restored
-  useEffect(() => {
-    if (restoredFile?.content) {
-      updatePreview(restoredFile.content)
-    }
-  }, [restoredFile, updatePreview])
+            // Store the handle in IndexedDB with the new ID
+            await storeHandle(handleId, vaultId, dbFileId, targetHandle)
 
-  const onNewFile = useCallback(() => {
-    setCurrentFileHandle(null)
-    setCurrentFile("Untitled")
-    setMarkdownContent("") // Clear content for new file
-    setIsEditMode(true)
-    setPreviewNode(null) // Clear preview
-    setNotes([]) // Clear notes associated with previous file
-    setDroppedNotes([]) // Clear dropped notes
-    setReasoningHistory([]) // Clear reasoning history
-    setHasUnsavedChanges(false) // Reset unsaved changes
-
-    // Clear the last file info from localStorage
-    if (isClient && vaultId) {
-      try {
-        localStorage.removeItem(`morph:last-file:${vaultId}`)
-      } catch (storageError) {
-        console.error("Failed to clear file info from localStorage:", storageError)
-      }
-    }
-  }, [isClient, vaultId])
-
-  // Create a function to toggle settings that we can pass to Rails
-  const toggleSettings = useCallback(() => {
-    setIsSettingsOpen((prev) => !prev)
-  }, [])
+            // Update component state with the new file information
+            dispatch({ type: "SET_CURRENT_FILE_ID", fileId: dbFileId })
+            setCurrentFileHandle(targetHandle)
 
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      // Special handling for settings shortcut - high priority
-      if ((event.metaKey || event.ctrlKey) && event.key === ",") {
-        event.preventDefault()
-        event.stopPropagation() // Stop event from bubbling up
-        toggleSettings()
-        return
-      }
+            // Refresh the vault to show the new file
+            await refreshVault(vaultId)
 
-      // Other keyboard shortcuts
-      if (event.key === settings.toggleNotes && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault()
-        toggleNotes()
-      } else if (event.key === settings.toggleEditMode && (event.metaKey || event.altKey)) {
-        event.preventDefault()
-        setIsEditMode((prev) => !prev)
-      } else if ((event.ctrlKey || event.metaKey) && event.key === "s") {
-        event.preventDefault()
-        handleSave()
+            // Update fileId to use the DB one for localStorage
+            fileId = dbFileId
+          }
+        } catch (dbError) {
+          console.error("Error creating file in database:", dbError)
+          // If database save fails, still update local state
+          dispatch({ type: "SET_CURRENT_FILE_ID", fileId: fileId })
+          setCurrentFileHandle(targetHandle)
+
+          // Store the handle even if DB fails
+          await storeHandle(handleId, vaultId, fileId, targetHandle)
+        }
+      } else if (currentFileId !== null) {
+        // Update last modified time for existing files
+        try {
+          await db
+            .update(schema.files)
+            .set({ lastModified: new Date() })
+            .where(
+              and(eq(schema.files.id, currentFileId), eq(schema.files.vaultId, vault?.id || "")),
+            )
+        } catch (error) {
+          console.error("Error updating file last modified time:", error)
+        }
       }
-    },
-    [handleSave, toggleNotes, settings, toggleSettings],
-  )
 
-  // Separate effect specifically for global keyboard shortcuts
-  useEffect(() => {
-    // Add event listener for keyboard shortcuts
-    const handler = (e: KeyboardEvent) => handleKeyDown(e)
-    window.addEventListener("keydown", handler, { capture: true }) // Use capture to get event before other handlers
-
-    return () => window.removeEventListener("keydown", handler, { capture: true })
-  }, [handleKeyDown])
+      // Save the current file info to localStorage
+      saveLastFileInfo(vaultId, fileId, handleId)
 
-  // Effect for vim mode and vim-specific keybindings
-  useEffect(() => {
-    Vim.defineEx("w", "w", handleSave)
-    Vim.defineEx("wa", "w", handleSave)
-    Vim.map(";", ":", "normal")
-    Vim.map("jj", "<Esc>", "insert")
-    Vim.map("jk", "<Esc>", "insert")
-  }, [handleSave])
-
-  const generateNewSuggestions = useCallback(
-    async (steeringSettings: SteeringSettings) => {
-      if (!currentFile || !vault || !markdownContent) return
-
-      // Move current generation notes to history by adding them to notes array without the currentGenerationNotes flag
-      if (currentGenerationNotes.length > 0) {
-        // First ensure the current notes are in the main notes array (if they aren't already)
-        setNotes((prev) => {
-          // Filter out any notes that might already exist in the array
-          const notesToAdd = currentGenerationNotes.filter(
-            (note) => !prev.some((existingNote) => existingNote.id === note.id),
-          )
-
-          if (notesToAdd.length === 0) return prev
+      // Update the restored file context
+      setRestoredFile({
+        file,
+        fileHandle: targetHandle,
+        fileId,
+        content: markdownContent,
+        handleId,
+      })
 
-          // Add to notes and sort
-          const combined = [...notesToAdd, ...prev]
-          return combined.sort(
-            (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-          )
-        })
+      // Refresh metadata to update notes
+      if (fileId) {
+        await loadFileMetadata(fileId)
       }
 
-      // Clear current generation notes before starting new generation
-      setCurrentGenerationNotes([])
-      setNotesError(null)
-      setIsNotesLoading(true)
-      setStreamingReasoning("")
-      setReasoningComplete(false)
-      setStreamingSuggestionColors([])
-      setScanAnimationComplete(false) // Reset scan animation state
-      setLastNotesGeneratedTime(new Date())
-      const now = new Date()
-      const seconds = now.getSeconds()
-      const interval = Math.floor(seconds / 15) * 15
-      const dateKey = `${now.toDateString()}-${now.getHours()}-${now.getMinutes()}-${interval}`
-      setCurrentlyGeneratingDateKey(dateKey)
+      // Update the content reference only after successful save
+      updateContentRef()
 
-      try {
-        // Check if we're online before attempting to generate suggestions
-        if (!isOnline) {
-          throw new Error(
-            "Cannot generate suggestions while offline. Please check your internet connection.",
-          )
-        }
-
-        // First, find or create the file in the database to ensure proper ID reference
-        let dbFile = await db.query.files.findFirst({
-          where: (files, { and, eq }) =>
-            and(eq(files.name, currentFile), eq(files.vaultId, vault.id)),
-        })
-
-        if (!dbFile) {
-          // Extract extension
-          const extension = currentFile.includes(".") ? currentFile.split(".").pop() || "" : ""
-
-          // Insert file into database
-          await db.insert(schema.files).values({
-            name: currentFile,
-            extension,
-            vaultId: vault.id,
-            lastModified: new Date(),
-            embeddingStatus: "in_progress",
-          })
-
-          // Re-fetch the file to get its ID
-          dbFile = await db.query.files.findFirst({
-            where: (files, { and, eq }) =>
-              and(eq(files.name, currentFile), eq(files.vaultId, vault.id)),
-          })
+      // Reset unsaved changes flag
+      setHasUnsavedChanges(false)
+      toast.success("File saved successfully!")
 
-          if (!dbFile) {
-            throw new Error("Failed to create file in database")
-          }
-        }
+      // Process essay embeddings with rate limiting (avoid spamming)
+      if (fileId) {
+        const currentTime = Date.now()
+        const fileKey = `${vaultId}:${fileId}`
+        const lastProcessed = lastEmbeddingProcessedTimestampRef.current[fileKey] || 0
+        const timeSinceLastProcess = currentTime - lastProcessed
 
-        try {
-          // Now that we have the file, generate the suggestions
-          const { generatedNotes, reasoningId, reasoningElapsedTime, reasoningContent } =
-            await fetchNewNotes(
-              markdownContent,
-              steeringSettings.numSuggestions,
-              steeringSettings
-                ? {
-                    authors: steeringSettings.authors,
-                    tonality: steeringSettings.tonalityEnabled
-                      ? steeringSettings.tonality
-                      : undefined,
-                    temperature: steeringSettings.temperature,
-                  }
-                : undefined,
-            )
-
-          const newNoteIds: string[] = []
-          const newNotes: Note[] = generatedNotes.map((note, index) => {
-            const id = createId()
-            newNoteIds.push(id)
-            return {
-              id,
-              content: note.content,
-              color: streamingSuggestionColors[index] || generatePastelColor(),
-              fileId: dbFile!.id, // Use the actual DB file ID here
-              vaultId: vault.id,
-              isInEditor: false,
-              createdAt: new Date(),
-              lastModified: new Date(),
-              reasoningId: reasoningId,
-              steering: {
-                authors: steeringSettings.authors,
-                tonality: steeringSettings.tonalityEnabled ? steeringSettings.tonality : undefined,
-                temperature: steeringSettings.temperature,
-                numSuggestions: steeringSettings.numSuggestions,
-              },
-              embeddingStatus: "in_progress",
-              embeddingTaskId: null,
-            }
-          })
+        // Only process if it's been at least 2 minutes since last processing for this file
+        // or if it's a new file (isNewFile is true)
+        const RATE_LIMIT_MS = 3 * 60 * 1000 // 3 minutes
 
-          // Add note IDs to reasoning history
-          setReasoningHistory((prev) =>
-            prev.map((r) => (r.id === reasoningId ? { ...r, noteIds: newNoteIds } : r)),
-          )
+        if (isNewFile || timeSinceLastProcess > RATE_LIMIT_MS) {
+          console.debug(`[Notes Debug] Processing essay embeddings on save for ${fileId}`)
 
-          // Only save if the file is not "Untitled" and we have notes to save
-          if (currentFile !== "Untitled" && vault && newNotes.length > 0) {
-            try {
-              await db.insert(schema.reasonings).values({
-                id: reasoningId,
-                fileId: dbFile!.id,
-                vaultId: vault.id,
-                content: reasoningContent,
-                noteIds: newNoteIds,
-                createdAt: now,
-                accessedAt: now,
-                duration: reasoningElapsedTime,
-                steering: {
-                  authors: steeringSettings.authors,
-                  tonality: steeringSettings.tonalityEnabled
-                    ? steeringSettings.tonality
-                    : undefined,
-                  temperature: steeringSettings.temperature,
-                  numSuggestions: steeringSettings.numSuggestions,
-                },
-              })
-
-              // Insert notes into database
-              for (const note of newNotes) {
-                await db.insert(schema.notes).values({
-                  id: note.id,
-                  content: note.content,
-                  color: note.color,
-                  createdAt: note.createdAt,
-                  accessedAt: new Date(),
-                  dropped: note.dropped ?? false,
-                  fileId: dbFile!.id,
-                  vaultId: note.vaultId,
-                  reasoningId: note.reasoningId!,
-                  steering: note.steering || null,
-                  embeddingStatus: "in_progress",
-                  embeddingTaskId: null,
-                })
-              }
-
-              // Add the newly created notes to our state
-              setNotes((prev) => {
-                const combined = [...newNotes, ...prev]
-                return combined.sort(
-                  (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-                )
-              })
-
-              // Set current generation notes for UI
-              setCurrentGenerationNotes(newNotes)
-
-              // Submit each note for embedding individually and track task IDs for polling
-              for (const note of newNotes) {
-                const result = await submitNoteForEmbedding(db, note)
+          try {
+            // Process the saved content
+            const content = md(markdownContent).content
 
-                // If successful and we have a task ID, add it for polling
-                if (result) {
-                  // Wait a small amount of time to ensure DB updates are complete
-                  await new Promise((resolve) => setTimeout(resolve, 100))
+            // Update the last processed timestamp
+            lastEmbeddingProcessedTimestampRef.current[fileKey] = currentTime
 
-                  // Then get the updated note with task ID
-                  const updatedNote = await db.query.notes.findFirst({
-                    where: eq(schema.notes.id, note.id),
-                  })
+            // Set embedding status to processing in database
+            await db
+              .update(schema.files)
+              .set({ embeddingStatus: "in_progress" })
+              .where(and(eq(schema.files.id, fileId), eq(schema.files.vaultId, vaultId)))
 
-                  if (updatedNote?.embeddingTaskId) {
-                    addTask(updatedNote.embeddingTaskId)
-                  }
-                }
-              }
-            } catch (dbError) {
-              console.error("Failed to save notes to database:", dbError)
-              // Still show notes in UI even if DB fails
-              setCurrentGenerationNotes(newNotes)
-              setNotes((prev) => {
-                const combined = [...newNotes, ...prev]
-                return combined.sort(
-                  (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-                )
-              })
-            }
-          } else {
-            // For unsaved files, just display in UI without saving to DB
-            setShowEphemeralBanner(true)
-            setTimeout(() => setShowEphemeralBanner(false), 7000)
-            setCurrentGenerationNotes(newNotes)
-            setNotes((prev) => {
-              const combined = [...newNotes, ...prev]
-              return combined.sort(
-                (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-              )
+            // Trigger embedding processing
+            processEssayEmbeddings.mutate({
+              addTask: addEssayTask,
+              currentContent: content,
+              currentVaultId: vaultId,
+              currentFileId: fileId,
             })
+          } catch (error) {
+            console.error("Error processing essay embeddings on save:", error)
           }
-        } catch (error: any) {
-          const errorMessage =
-            error.message || "Notes not available for this generation, try again later"
-          setNotesError(errorMessage)
-          setCurrentlyGeneratingDateKey(null)
-          console.error("Failed to generate notes:", error)
-        } finally {
-          setIsNotesLoading(false)
+        } else {
+          console.debug(
+            `[Notes Debug] Skipping embedding update due to rate limiting (${Math.round(
+              timeSinceLastProcess / 1000,
+            )}s < ${RATE_LIMIT_MS / 1000}s)`,
+          )
         }
-      } catch {}
-    },
-    [
-      currentFile,
-      fetchNewNotes,
-      vault,
-      streamingSuggestionColors,
-      markdownContent,
-      db,
-      currentGenerationNotes,
-      addTask,
-      isOnline,
-    ],
-  )
-
-  // Handle removing a note from the notes array
-  const handleNoteRemoved = useCallback((noteId: string) => {
-    setNotes((prev) => prev.filter((n) => n.id !== noteId))
-  }, [])
-
-  const noteGroupsData = useMemo(() => {
-    // Filter out current generation notes and dropped notes
-    const currentGenerationNoteIds = new Set(currentGenerationNotes.map((note) => note.id))
-    const droppedNoteIds = new Set(droppedNotes.map((note) => note.id))
-
-    // Filter out both current generation notes and dropped notes
-    const filteredNotes = notes.filter(
-      (note) =>
-        !currentGenerationNoteIds.has(note.id) && !droppedNoteIds.has(note.id) && !note.dropped,
-    )
-
-    return groupNotesByDate(filteredNotes)
-  }, [notes, currentGenerationNotes, droppedNotes])
-
-  const handleCurrentGenerationNote = useCallback((note: Note) => {
-    // Remove from current generation notes
-    setCurrentGenerationNotes((prev) => prev.filter((n) => n.id !== note.id))
-
-    // Ensure the note is in the main notes array if it's not already
-    setNotes((prev) => {
-      // Check if note already exists in notes array
-      if (prev.some((existingNote) => existingNote.id === note.id)) return prev
-
-      // Add to notes and sort
-      const combined = [...prev, note]
-      return combined.sort(
-        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-      )
-    })
-  }, [])
-
-  // Memoize dropped notes to prevent unnecessary re-renders
-  const memoizedDroppedNotes = useMemo(() => {
-    return droppedNotes.map((note) => ({
-      ...note,
-      color: note.color || generatePastelColor(),
-    }))
-  }, [droppedNotes])
-
-  // Check if notes were recently generated (within the last 5 minutes)
-  // TODO: a small tool calling Qwen to determine if we should recommends users to generate suggestions.
-  const isNotesRecentlyGenerated = useMemo(() => {
-    if (!lastNotesGeneratedTime) return false
-    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000) // 5 minutes in milliseconds
-    return lastNotesGeneratedTime > fiveMinutesAgo
-  }, [lastNotesGeneratedTime])
+      }
+    } catch (error) {
+      console.error("Error saving file:", error)
+    }
+  }, [
+    dispatch,
+    setRestoredFile,
+    currentFileHandle,
+    markdownContent,
+    vault,
+    refreshVault,
+    vaultId,
+    storeHandle,
+    currentFileId,
+    db,
+    updateContentRef,
+    loadFileMetadata,
+    processEssayEmbeddings,
+    addEssayTask,
+  ])
 
   // Handle dragging a dropped note back to the panel
   const handleNoteDragBackToPanel = useCallback(
@@ -1758,17 +442,13 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
       }
 
       // Remove from droppedNotes state
-      setDroppedNotes((prev) => prev.filter((n) => n.id !== noteId))
+      dispatch({ type: "REMOVE_DROPPED_NOTE", noteId })
 
       try {
-        // Find the file in the database to make sure we have the right reference
-        const dbFile = await db.query.files.findFirst({
-          where: (files, { and, eq }) =>
-            and(eq(files.name, currentFile), eq(files.vaultId, vault?.id || "")),
-        })
-
+        // Ensure we have a valid dbFile
+        const dbFile = dbFileState || (await updateDbFile(currentFileId))
         if (!dbFile) {
-          console.error("Failed to find file in database when undropping note")
+          console.error("DB file not found when trying to move note back to panel")
           return
         }
 
@@ -1778,49 +458,105 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
           .set({
             dropped: false,
             accessedAt: new Date(),
-            fileId: dbFile.id, // Ensure we're using the database file ID
+            fileId: dbFile.id,
             // Preserve existing embedding values
             embeddingStatus: undropNote.embeddingStatus,
             embeddingTaskId: undropNote.embeddingTaskId,
           })
           .where(eq(schema.notes.id, noteId))
 
-        // Add back to main notes collection if not already there
-        setNotes((prevNotes) => {
-          // If it exists, just update its dropped status
-          if (prevNotes.some((n) => n.id === noteId)) {
-            return prevNotes.map((n) =>
-              n.id === noteId
-                ? {
-                    ...n,
-                    dropped: false,
-                    embeddingStatus: undropNote.embeddingStatus,
-                    embeddingTaskId: undropNote.embeddingTaskId,
-                  }
-                : n,
-            )
-          } else {
-            // Add to the beginning of the notes array to make it appear at the top
-            return [undropNote, ...prevNotes]
-          }
-        })
+        // Add back to main notes collection
+        dispatch({ type: "ADD_NOTES", notes: [undropNote] })
       } catch (error) {
         console.error("Failed to update note status:", error)
       }
     },
-    [droppedNotes, db, currentFile, vault, setNotes],
+    [droppedNotes, db, currentFileId, dbFileState, dispatch, updateDbFile],
+  )
+
+  const baseExtensions = useMemo(() => {
+    const tabSize = new Compartment()
+
+    return [
+      history(),
+      keymap.of([...defaultKeymap, ...historyKeymap]),
+      markdown({ base: markdownLanguage, codeLanguages: languages }),
+      frontmatter(),
+      EditorView.lineWrapping,
+      tabSize.of(EditorState.tabSize.of(settings.tabSize)),
+      fileField.init(() => currentFileId),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged || update.selectionSet) {
+          // We only update the filename if it explicitly changes via the effect
+          const newFileId = update.state.field(fileField)
+          dispatch({ type: "SET_CURRENT_FILE_ID", fileId: newFileId })
+        }
+      }),
+      syntaxHighlighting(),
+      search(),
+      hyperLink,
+    ]
+  }, [settings.tabSize, currentFileId, dispatch])
+
+  // Only compute extensions that will be used in the editor
+  const memoizedExtensions = useMemo(() => {
+    return vimMode ? [...baseExtensions, vim()] : baseExtensions
+  }, [baseExtensions, vimMode])
+
+  // Memoize the basicSetup object
+  const memoizedBasicSetup = useMemo(
+    () => ({
+      rectangularSelection: false,
+      indentOnInput: true,
+      syntaxHighlighting: true,
+      highlightActiveLine: true,
+      highlightSelectionMatches: true,
+    }),
+    [],
   )
 
-  // Update handleFileSelect to save the handle ID
+  const onNewFile = useCallback(() => {
+    setCurrentFileHandle(null)
+    setMarkdownContent("") // Clear content for new file
+    setIsEditMode(true)
+    setPreviewNode(null) // Clear preview
+
+    // Reset embedding processing flags
+    essayEmbeddingProcessedRef.current = null
+
+    setHasUnsavedChanges(false) // Reset unsaved changes
+    // Set currentFileId to null for new file
+    dispatch({ type: "SET_CURRENT_FILE_ID", fileId: null })
+    // Also reset dbFile state for new file
+    dispatch({ type: "SET_DB_FILE", dbFile: null })
+
+    // Clear the last file info from localStorage
+    if (vaultId) {
+      try {
+        localStorage.removeItem(`morph:last-file:${vaultId}`)
+      } catch (storageError) {
+        console.error("Failed to clear file info from localStorage:", storageError)
+      }
+    }
+  }, [vaultId, dispatch])
+
+  // Create a function to toggle settings that we can pass to Rails
+  const toggleSettings = useCallback(() => {
+    setIsSettingsOpen((prev) => !prev)
+  }, [])
+
   const handleFileSelect = useCallback(
     async (node: FileSystemTreeNode) => {
       if (!vault || node.kind !== "file" || !codeMirrorViewRef.current || !node.handle) return
 
       try {
-        // Only do file I/O once
+        console.debug(`[Notes Debug] Selecting file: ${node.name} (${node.id})`)
+
+        // Reset embedding processing flags for new file selection
+        essayEmbeddingProcessedRef.current = null
+
         const file = await node.handle!.getFile()
         const content = await file.text()
-        const fileName = file.name
 
         // If the node doesn't have a handleId, create one and store it
         let handleId = node.handleId
@@ -1828,7 +564,7 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
           handleId = createId()
           // Store the handle for future use
           try {
-            await storeHandle(handleId, vaultId, handleId, node.handle as FileSystemFileHandle)
+            await storeHandle(handleId, vaultId, node.id, node.handle as FileSystemFileHandle)
           } catch (storeError) {
             console.error("Failed to store handle:", storeError)
             // Continue without storing - non-critical
@@ -1838,401 +574,373 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
           try {
             const isValid = await verifyHandle(node.handle)
             if (!isValid) {
-              await storeHandle(handleId, vaultId, handleId, node.handle as FileSystemFileHandle)
+              await storeHandle(handleId, vaultId, node.id, node.handle as FileSystemFileHandle)
             }
           } catch (verifyError) {
             console.error("Failed to verify handle:", verifyError)
           }
         }
 
-        // Save the current file info to localStorage for this vault
-        if (isClient && vaultId) {
+        // Set the fileId early so it can be used immediately
+        const targetFileId = node.id
+
+        // Update file ID in notes context
+        dispatch({ type: "SET_CURRENT_FILE_ID", fileId: targetFileId })
+
+        // Update dbFile state when selecting a new file
+        await updateDbFile(targetFileId)
+          .catch((error) => {
+            console.error("Error updating dbFile during file selection:", error)
+          })
+          .then()
+
+        // Load file content - this should now find the correct file ID
+        const success = loadFileContent(targetFileId, node.handle as FileSystemFileHandle, content)
+
+        if (success) {
+          console.debug(`[Notes Debug] Successfully loaded content for file ${targetFileId}`)
+
+          console.debug(
+            `[Notes Debug] Saving file info with ID: ${targetFileId}, handleId: ${handleId || node.id}`,
+          )
+          // Save the last accessed file info with the correct ID
+          saveLastFileInfo(vaultId, targetFileId, handleId || node.id)
+
+          // Update restored file in context for future restorations
+          setRestoredFile({
+            file,
+            fileHandle: node.handle as FileSystemFileHandle,
+            fileId: targetFileId,
+            content,
+            handleId: handleId || node.id,
+          })
+
+          // Load file metadata to populate notes
           try {
-            localStorage.setItem(
-              `morph:last-file:${vaultId}`,
-              JSON.stringify({
-                fileName,
-                lastAccessed: new Date().toISOString(),
-                handleId: handleId || node.id, // Use handleId if available, fall back to node.id
-              }),
+            await loadFileMetadata(targetFileId)
+            console.debug(`[Notes Debug] Loaded metadata for file ${targetFileId}`)
+          } catch (metadataError) {
+            console.error(
+              `[Notes Debug] Error loading metadata for file ${targetFileId}:`,
+              metadataError,
             )
-          } catch (storageError) {
-            console.error("Failed to save file info to localStorage:", storageError)
-            // Non-critical, we can continue
           }
-        }
 
-        // Load file content first
-        const success = loadFileContent(fileName, node.handle as FileSystemFileHandle, content)
-
-        if (success) {
-          // Reset all notes states in one batch
-          setCurrentGenerationNotes([])
-          setCurrentlyGeneratingDateKey(null)
-          setNotesError(null)
-          setNotes([])
-          setDroppedNotes([])
-          setReasoningHistory([])
-
-          // Reset the processing flags to ensure new embeddings are processed
-          embeddingProcessedRef.current = false
-          essayEmbeddingProcessedRef.current = false
-
-          // Load file metadata once
-          await loadFileMetadataOnce(fileName)
-
-          // Process essay embeddings if we're online
-          if (isClient && isOnline) {
+          // Process essay embeddings if needed
+          if (targetFileId !== null) {
             try {
-              // Find the file in the database to get its ID
-              const dbFile = await db.query.files.findFirst({
-                where: (files, { and, eq }) =>
-                  and(eq(files.name, fileName), eq(files.vaultId, vault.id)),
-              })
-
-              if (dbFile) {
-                // Check if this file already has embeddings
-                const hasEmbeddings = await checkFileHasEmbeddings(db, dbFile.id)
-
-                if (!hasEmbeddings) {
-                  // Process essay embeddings asynchronously
-                  const cleaned = md(content).content
-                  processEssayEmbeddings.mutate({
-                    addTask: addEssayTask,
-                    currentContent: cleaned,
-                    currentVaultId: vault.id,
-                    currentFileId: dbFile.id,
-                  })
-                }
-
-                // Process any existing notes for this file
-                processEmbeddings.mutate({ addTask })
+              // Skip if already being processed
+              if (essayEmbeddingProcessedRef.current === `${vaultId}:${targetFileId}`) {
+                console.debug(
+                  `[Notes Debug] Skipping duplicate essay embedding processing for ${node.name}`,
+                )
+                return
               }
 
-              // Also process author recommendations
-              if (!authorsProcessedRef.current && dbFile) {
-                try {
-                  // Get the file content
-                  const fileContent = content // Use the content variable directly
-                  const taskId = await submitContentForAuthors(db, dbFile.id, fileContent)
-                  if (taskId) {
-                    addAuthorTask(taskId, dbFile.id)
-                    authorsProcessedRef.current = true
-                  }
-                } catch (error) {
-                  console.error("[Editor] Error processing authors:", error)
-                }
+              // Mark as processing immediately using ID
+              essayEmbeddingProcessedRef.current = `${vaultId}:${targetFileId}`
+
+              // Check if this file already has embeddings
+              const hasEmbeddings = await checkFileHasEmbeddings(db, targetFileId)
+
+              if (!hasEmbeddings) {
+                console.debug(`[Notes Debug] Processing essay embeddings for ${node.name}`)
+                const cleaned = md(content).content
+                processEssayEmbeddings.mutate({
+                  addTask: addEssayTask,
+                  currentContent: cleaned,
+                  currentVaultId: vaultId,
+                  currentFileId: targetFileId,
+                })
+              } else {
+                console.debug(
+                  `[Notes Debug] File ${node.name} already has embeddings, skipping processing`,
+                )
               }
             } catch (error) {
               console.error("Error processing file data:", error)
+              // Reset flags on error to allow retrying
+              essayEmbeddingProcessedRef.current = null
             }
           }
         } else {
-          toast({
-            title: "Error Loading File",
-            description: `Could not load file ${node.name}. Please try again.`,
-            variant: "destructive",
-          })
+          console.debug(`[Notes Debug] Failed to load content for file ${targetFileId}`)
         }
       } catch (error) {
         console.error("Error handling file selection:", error)
-        toast({
-          title: "Error Loading File",
-          description: `Could not load file ${node.name}. Please try again.`,
-          variant: "destructive",
-        })
+
+        toast.error(`Could not load file ${node.name}. Please try again.`)
       }
     },
     [
+      dispatch,
       vault,
       vaultId,
-      isClient,
-      isOnline,
       loadFileContent,
-      loadFileMetadataOnce,
-      toast,
       storeHandle,
       db,
       addEssayTask,
-      addTask,
-      processEmbeddings,
       processEssayEmbeddings,
-      addAuthorTask,
+      setRestoredFile,
+      updateDbFile,
+      loadFileMetadata,
     ],
   )
 
-  // Add this ref to track if we've processed embeddings for the current file
-  const embeddingProcessedRef = useRef(false)
-
-  // Reset the embedding processed flag when the file changes
-  useEffect(() => {
-    embeddingProcessedRef.current = false
-  }, [currentFile])
-
-  // Add an effect to process all notes in the editor for embeddings
-  useEffect(() => {
-    if (!isClient || !isOnline || notes.length === 0) return
-
-    // Check and process notes for embeddings after a short delay to avoid performance issues
-    const timeoutId = setTimeout(async () => {
-      try {
-        // Only process if we haven't already for this file
-        if (embeddingProcessedRef.current) return
-
-        // Process up to 3 notes that don't have embeddings yet
-        const notesToProcess = []
-        let processedCount = 0
-
-        // Create a stable copy of the notes array to avoid race conditions
-        const currentNotes = [...notes]
-
-        for (const note of currentNotes) {
-          if (processedCount >= 3) break // Limit to 3 per batch
-
-          // Only process notes that aren't already in progress or success
-          if (
-            note.embeddingStatus !== "success" &&
-            note.embeddingStatus !== "in_progress" &&
-            !note.dropped
-          ) {
-            const hasEmbedding = await checkNoteHasEmbedding(db, note.id)
-            if (!hasEmbedding) {
-              notesToProcess.push(note)
-              processedCount++
-            }
-          }
-        }
-
-        // Process collected notes one by one
-        for (const note of notesToProcess) {
-          const result = await submitNoteForEmbedding(db, note)
-
-          // If successful and we have a task ID, add it for polling
-          if (result) {
-            const updatedNote = await db.query.notes.findFirst({
-              where: eq(schema.notes.id, note.id),
-            })
-
-            if (updatedNote?.embeddingTaskId) {
-              addTask(updatedNote.embeddingTaskId)
-            }
-          }
-        }
+  // Add the handler function (around line 500, with other handler functions)
+  const handleVisibleContextNotesChange = useCallback((noteIds: string[]) => {
+    setVisibleContextNoteIds(noteIds)
+  }, [])
 
-        // Mark as processed after we're done
-        embeddingProcessedRef.current = true
-      } catch (error) {
-        console.error("[Embedding] Failed to check and process notes for embeddings:", error)
+  const onContentChange = useCallback(
+    async (value: string) => {
+      // Check if the content has changed compared to the saved content
+      if (value !== contentRef.current.content) {
+        setHasUnsavedChanges(true)
       }
-    }, 2000) // 2 second delay
 
-    return () => clearTimeout(timeoutId)
-  }, [isClient, isOnline, currentFile, addTask, db, notes]) // Only depend on stable values, not notes array itself
+      // Always update the current content
+      setMarkdownContent(value)
 
-  // Use the embedding status hook
-  // This hooks has some side-effects, and must be called at the very last.
-  const [embeddingStatus, setEmbeddingStatus] = useState<Note["embeddingStatus"]>(null)
+      // Update preview with the new content using the debounced function
+      debouncedUpdatePreview(value)
+    },
+    [debouncedUpdatePreview, contentRef],
+  )
 
+  // Effect to use preloaded file from context if available
   useEffect(() => {
-    // If there are pending tasks (either notes or essays), show in-progress status
-    if (pendingTaskIds.length > 0 || essayPendingTaskIds.length > 0) {
-      setEmbeddingStatus("in_progress")
-      return
-    }
-
-    // If no active tasks, but we need to see if notes have embeddings
-    const allNotes = [...notes, ...currentGenerationNotes, ...droppedNotes].filter(Boolean)
+    if (!restoredFile || fileRestorationAttempted.current) return
 
-    if (allNotes.length === 0) {
-      setEmbeddingStatus(null)
-      return
-    }
+    // Mark file as restored so we don't try again
+    fileRestorationAttempted.current = true
 
-    // Check if any notes still show in-progress (but might not have active tasks)
-    const anyInProgress = allNotes.some((note) => note.embeddingStatus === "in_progress")
-    if (anyInProgress) {
-      setEmbeddingStatus("in_progress")
-      return
-    }
+    // Update preview immediately with the restored content
+    debouncedUpdatePreview(restoredFile.content)
 
-    // Check if all notes have successful embeddings
-    const allSuccess = allNotes.every((note) => note.embeddingStatus === "success")
-    if (allSuccess && allNotes.length > 0) {
-      setEmbeddingStatus("success")
-      return
-    }
+    // Create flags to track processing status
+    let embeddingProcessingStarted = false
 
-    // Check if any notes failed
-    const anyFailed = allNotes.some(
-      (note) => note.embeddingStatus === "failure" || note.embeddingStatus === "cancelled",
-    )
-    if (anyFailed) {
-      setEmbeddingStatus("failure")
-      return
-    }
+    // Set the initial states synchronously
+    setMarkdownContent(restoredFile.content)
+    dispatch({ type: "SET_CURRENT_FILE_ID", fileId: restoredFile.fileId })
+    setCurrentFileHandle(restoredFile.fileHandle)
+    setHasUnsavedChanges(false)
 
-    // Default to null if we can't determine status
-    setEmbeddingStatus(null)
-  }, [notes, currentGenerationNotes, droppedNotes, pendingTaskIds, essayPendingTaskIds])
+    const loadFile = async () => {
+      // This will also set currentFileId via the loadFileContent function
+      const success = loadFileContent(
+        restoredFile.fileId,
+        restoredFile.fileHandle,
+        restoredFile.content,
+      )
 
-  // Add a ref to track if we've processed essay embeddings for the current file
-  const essayEmbeddingProcessedRef = useRef(false)
+      // Use restoredFile.fileId directly instead of currentFileId
+      const targetFileId = restoredFile.fileId
 
-  // Reset the essay embedding processed flag when the file changes
-  useEffect(() => {
-    essayEmbeddingProcessedRef.current = false
-  }, [currentFile])
+      if (success && targetFileId) {
+        try {
+          // Reset note states *before* loading new metadata
+          console.debug(
+            `[Notes Debug] Resetting notes state before loading metadata for ${targetFileId}`,
+          )
 
-  // Add an effect to process file embeddings on mount and file change
-  useEffect(() => {
-    if (!isClient || !isOnline || currentFile === "Untitled") return
+          console.debug(`[Notes Debug] Loading metadata for restored file: ${targetFileId}`)
+          // Load file metadata to populate notes
+          await loadFileMetadata(targetFileId)
+          console.debug(`[Notes Debug] Metadata loaded for ${targetFileId}`)
 
-    // Process only if we haven't already for this file
-    if (essayEmbeddingProcessedRef.current) return
+          // Log notes after metadata loading attempt
+          await logNotesForFile(db, targetFileId, vaultId, "After restoring file")
 
-    // Use a timeout to avoid processing immediately on mount
-    const timeoutId = setTimeout(async () => {
-      try {
-        // Find the file in the database
-        const dbFile = await db.query.files.findFirst({
-          where: (files, { and, eq }) =>
-            and(eq(files.name, currentFile), eq(files.vaultId, vault?.id || "")),
-        })
+          // Process essay embeddings for restored file (only if online)
+          // Use a small timeout to let the file load completely first
+          embeddingTimeoutRef.current = setTimeout(async () => {
+            try {
+              // Skip if processing has already started or if file is already processed
+              if (
+                embeddingProcessingStarted ||
+                essayEmbeddingProcessedRef.current === `${vaultId}:${targetFileId}`
+              )
+                return
 
-        if (dbFile && markdownContent) {
-          // Check if this file already has embeddings
-          const hasEmbeddings = await checkFileHasEmbeddings(db, dbFile.id)
+              // Mark as processing immediately
+              embeddingProcessingStarted = true
+              essayEmbeddingProcessedRef.current = `${vaultId}:${targetFileId}`
 
-          if (!hasEmbeddings) {
-            // Process essay embeddings asynchronously
-            const content = md(markdownContent).content
-            processEssayEmbeddings.mutate({
-              addTask: addEssayTask,
-              currentContent: content,
-              currentVaultId: vault?.id || "",
-              currentFileId: dbFile.id,
-            })
-          }
+              // Check if this file already has embeddings - use the target file ID
+              const hasEmbeddings = await checkFileHasEmbeddings(db, targetFileId)
 
-          // Mark as processed
-          essayEmbeddingProcessedRef.current = true
+              if (!hasEmbeddings) {
+                console.debug(`[Debug] Processing embeddings for restored file ${targetFileId}`)
+                // Process essay embeddings asynchronously using the md content function
+                const content = md(restoredFile.content).content
+                processEssayEmbeddings.mutate({
+                  addTask: addEssayTask,
+                  currentContent: content,
+                  currentVaultId: vaultId,
+                  currentFileId: targetFileId,
+                })
+              }
+            } catch (error) {
+              console.error(`Error processing file data for ${targetFileId}:`, error)
+              // Reset flags on error to allow retrying
+              essayEmbeddingProcessedRef.current = null
+            }
+          }, 1000) // 1 second delay to ensure DB operations are ready
+        } catch (error) {
+          console.error(`Error loading file metadata for ${targetFileId}:`, error)
         }
-      } catch (error) {
-        console.error("[EssayEmbedding] Failed to process file embeddings:", error)
       }
-    }, 3000) // 3 second delay
+    }
 
-    return () => clearTimeout(timeoutId)
+    const loadingFile = setTimeout(loadFile, 1000)
+    // Cleanup timeout on unmount or if dependencies change
+    return () => {
+      if (embeddingTimeoutRef.current) {
+        clearTimeout(embeddingTimeoutRef.current)
+        clearTimeout(loadingFile)
+      }
+    }
   }, [
-    isClient,
-    isOnline,
-    currentFile,
+    dispatch,
+    vaultId,
+    restoredFile,
+    loadFileContent,
     vault,
     db,
-    markdownContent,
     processEssayEmbeddings,
     addEssayTask,
+    debouncedUpdatePreview,
+    currentFileId,
+    loadFileMetadata,
   ])
 
-  // Add an effect to update CodeMirror when vim mode changes
+  // Update the ref when dependencies change, but don't recreate the event listener
   useEffect(() => {
-    // Only run if CodeMirror view is available
-    if (codeMirrorViewRef.current) {
-      // Create a new state that either includes or excludes vim() based on vimMode
-      const newState = EditorState.create({
-        doc: codeMirrorViewRef.current.state.doc,
-        selection: codeMirrorViewRef.current.state.selection,
-        extensions: [
-          ...memoizedExtensions.filter((ext) => ext !== vim()),
-          ...(vimMode ? [vim()] : []),
-        ],
-      })
+    keyHandlerRef.current = (event: KeyboardEvent) => {
+      // Special handling for settings shortcut - high priority
+      if ((event.metaKey || event.ctrlKey) && event.key === ",") {
+        event.preventDefault()
+        event.stopPropagation() // Stop event from bubbling up
+        toggleSettings()
+        return
+      }
 
-      // Update the view with the new state
-      codeMirrorViewRef.current.setState(newState)
+      // Save shortcut should have priority
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+        event.preventDefault()
+        event.stopPropagation()
+        handleSave()
+        return
+      }
+
+      // Other keyboard shortcuts
+      if (event.key === settings.toggleNotes && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        toggleNotes()
+      } else if (event.key === settings.toggleEditMode && (event.metaKey || event.altKey)) {
+        event.preventDefault()
+        setIsEditMode((prev) => !prev)
+      }
     }
-  }, [vimMode, memoizedExtensions])
+  }, [handleSave, toggleNotes, settings.toggleNotes, settings.toggleEditMode, toggleSettings])
 
-  // Effect to check for vim mode change notification in localStorage
+  // Effect to update vimMode state when settings change
   useEffect(() => {
-    // Only run on the client side
-    if (!isClient) return
-
-    // Check if there's a vim mode change notification in localStorage
-    const vimModeChanged = localStorage.getItem("morph:vim-mode-changed") === "true"
+    // Only update vimMode if it differs from settings.vimMode
+    if (settings.vimMode !== vimMode) {
+      console.debug("Updating vim mode from settings")
+      setVimMode(settings.vimMode ?? false)
+    }
+  }, [settings.vimMode, vimMode])
 
-    if (vimModeChanged) {
-      // Show the notification
-      setShowVimModeChangeNotification(true)
+  // Register vim commands separately to avoid type errors
+  useEffect(() => {
+    if (vimMode) {
+      // Register our vim commands for saving
+      Vim.defineEx("w", "w", () => {
+        handleSave()
+      })
+      Vim.defineEx("wa", "wa", () => {
+        handleSave()
+      })
+      // Register other vim commands
+      Vim.map(";", ":", "normal")
+      Vim.map("jj", "<Esc>", "insert")
+      Vim.map("jk", "<Esc>", "insert")
+    }
+    return () => {
+      // Clean up vim commands when dependencies change
+      Vim.unmap(";", "normal")
+      Vim.unmap("jj", "insert")
+      Vim.unmap("jk", "insert")
+    }
+  }, [vimMode, handleSave])
 
-      // Clear the notification flag from localStorage
-      localStorage.removeItem("morph:vim-mode-changed")
+  // Stable keyboard handler event listener setup
+  useEffect(() => {
+    // Create a stable handler that uses the current ref value
+    const stableHandler = (e: KeyboardEvent) => {
+      keyHandlerRef.current?.(e)
+    }
 
-      // Set a timeout to dismiss the notification after a few seconds
-      const timer = setTimeout(() => {
-        setShowVimModeChangeNotification(false)
-      }, 5000)
+    // Add event listener only once
+    console.debug("Registering keyboard handler")
+    window.addEventListener("keydown", stableHandler, { capture: true })
 
-      return () => clearTimeout(timer)
+    // Clean up on unmount only
+    return () => {
+      console.debug("Removing keyboard handler")
+      window.removeEventListener("keydown", stableHandler, { capture: true })
     }
-  }, [isClient]) // Add isClient as a dependency
-
-  // Add a ref to track if we've processed authors for the current file
-  const authorsProcessedRef = useRef(false)
+  }, [])
 
-  // Reset the author processed flag when the file changes
+  // Add an effect to update CodeMirror when vim mode changes
   useEffect(() => {
-    authorsProcessedRef.current = false
-  }, [currentFile])
+    // Only run if CodeMirror view is available
+    if (codeMirrorViewRef.current) {
+      console.debug("Updating CodeMirror vim mode")
 
-  // Add a ref to track the current file name to avoid unnecessary database queries
-  // Add near other ref declarations (around line 150)
-  const currentFileRef = useRef<string>("")
+      // Instead of trying to query facets directly, just create a new state when mode changes
+      const newState = EditorState.create({
+        doc: codeMirrorViewRef.current.state.doc,
+        selection: codeMirrorViewRef.current.state.selection,
+        extensions: vimMode ? [...baseExtensions, vim()] : baseExtensions,
+      })
 
-  useEffect(() => {
-    // Only attempt to find the file ID if we have a valid vault and a non-default file name
-    if (vault && currentFile && currentFile !== "Untitled") {
-      // Skip if we've already processed this file
-      if (currentFile === currentFileRef.current && currentFileId) {
-        return
-      }
+      // Update the view with the new state
+      codeMirrorViewRef.current.setState(newState)
+    }
+  }, [vimMode, baseExtensions])
 
-      const caller = async () => {
-        try {
-          // Find the current file in the database
-          const dbFile = await db.query.files.findFirst({
-            where: (files, { and, eq }) =>
-              and(eq(files.name, currentFile), eq(files.vaultId, vault.id)),
-          })
+  const noteGroupsData = useMemo(() => {
+    // Filter out current generation notes and dropped notes
+    const currentGenerationNoteIds = new Set(currentGenerationNotes.map((note) => note.id))
+    const droppedNoteIds = new Set(droppedNotes.map((note) => note.id))
 
-          // Update the state with the file ID if found
-          if (dbFile) {
-            setCurrentFileId(dbFile.id)
-            currentFileRef.current = currentFile
-          } else {
-            setCurrentFileId(null)
-            currentFileRef.current = ""
-          }
-        } catch (error) {
-          console.error(`[ContextNotes] Error finding file ID for ${currentFile}:`, error)
-          setCurrentFileId(null)
-          currentFileRef.current = ""
-        }
-      }
-      const timeout = setTimeout(caller, 1000)
+    // Filter out both current generation notes and dropped notes
+    const filteredNotes = notes.filter(
+      (note) =>
+        !currentGenerationNoteIds.has(note.id) && !droppedNoteIds.has(note.id) && !note.dropped,
+    )
+
+    return groupNotesByDate(filteredNotes)
+  }, [droppedNotes, notes, currentGenerationNotes])
 
-      return () => clearTimeout(timeout)
+  // Update essay embedding status when tasks change
+  useEffect(() => {
+    if (essayEmbeddingTaskIds.length > 0) {
+      setEmbeddingStatus("in_progress")
+    } else if (dbFileState?.embeddingStatus) {
+      // When tasks complete, use the status from the database
+      setEmbeddingStatus(
+        dbFileState.embeddingStatus as "in_progress" | "success" | "failure" | "cancelled",
+      )
     } else {
-      // Reset the file ID if we don't have a valid file
-      setCurrentFileId(null)
-      currentFileRef.current = ""
+      setEmbeddingStatus(null)
     }
-  }, [db, vault, currentFile, currentFileId])
-
-  // Add the handler function (around line 500, with other handler functions)
-  const handleVisibleContextNotesChange = useCallback((noteIds: string[]) => {
-    setVisibleContextNoteIds(noteIds)
-  }, [])
+  }, [essayEmbeddingTaskIds, dbFileState?.embeddingStatus])
 
   return (
     <DndProvider backend={HTML5Backend}>
@@ -2249,10 +957,10 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
               setIsSettingsOpen={toggleSettings}
             />
             <SidebarInset className="flex flex-col h-screen flex-1 overflow-hidden">
-              <Playspace vaultId={vaultId}>
-                <NoteEmbeddingProcessor />
-                <EssayEmbeddingProcessor />
-                <AuthorProcessor />
+              <section className="flex flex-1 overflow-hidden m-4 border rounded-[8px]">
+                <NoteEmbeddingProcessor db={db} />
+                <EssayEmbeddingProcessor db={db} />
+                <AuthorProcessor db={db} />
                 <AnimatePresence initial={false}>
                   {showEphemeralBanner && (
                     <motion.div
@@ -2278,24 +986,42 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
                   )}
                 </AnimatePresence>
 
-                {/* Add vim mode change notification banner */}
+                {/* Author processing indicator */}
                 <AnimatePresence initial={false}>
-                  {showVimModeChangeNotification && (
+                  {isAuthorProcessing && (
                     <motion.div
                       initial={{ opacity: 0, y: -20 }}
                       animate={{ opacity: 1, y: 0 }}
                       exit={{ opacity: 0, y: -20 }}
                       transition={{ duration: 0.3 }}
-                      className="absolute top-2 left-1/2 transform -translate-x-1/2 z-50 bg-blue-400/70 border border-blue-300 text-blue-800 px-4 py-2 rounded-md shadow-md text-xs flex items-center space-x-2"
+                      className="absolute top-2 right-2 z-50 bg-blue-100 border border-blue-300 text-blue-800 px-4 py-2 rounded-md shadow-md text-xs flex items-center space-x-2"
                     >
-                      <span>
-                        ⚠️ Turning{" "}
-                        {localStorage.getItem("morph:vim-mode-value") === "true" ? "on" : "off"} Vim
-                        mode requires a page refresh to take effect
+                      <span className="flex items-center gap-2">
+                        <svg
+                          className="animate-spin h-4 w-4 text-blue-600"
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                        >
+                          <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                          ></circle>
+                          <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          ></path>
+                        </svg>
+                        Building document context for better suggestions...
                       </span>
                       <button
-                        onClick={() => setShowVimModeChangeNotification(false)}
-                        className="text-blue-800 hover:text-blue-900 hover:cursor-pointer"
+                        onClick={() => setIsAuthorProcessing(false)}
+                        className="text-blue-600 hover:text-blue-800 hover:cursor-pointer"
                         aria-label="Dismiss notification"
                       >
                         <Cross2Icon className="w-3 h-3" />
@@ -2305,55 +1031,33 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
                 </AnimatePresence>
 
                 <EditorDropTarget handleNoteDropped={handleNoteDropped}>
-                  <AnimatePresence initial={false} mode="sync">
-                    {memoizedDroppedNotes.length > 0 && (
-                      <DroppedNoteGroup
-                        droppedNotes={memoizedDroppedNotes}
-                        isStackExpanded={isStackExpanded}
-                        onExpandStack={toggleStackExpand}
-                        onDragBackToPanel={handleNoteDragBackToPanel}
-                        className="before:mix-blend-multiply before:bg-noise-pattern"
-                        visibleContextNoteIds={visibleContextNoteIds}
-                      />
-                    )}
-                  </AnimatePresence>
-                  <div className="flex flex-col items-center space-y-2 absolute bottom-2 right-2 z-20">
+                  <DroppedNoteGroup
+                    droppedNotes={droppedNotes}
+                    isStackExpanded={isStackExpanded}
+                    onExpandStack={toggleStackExpand}
+                    onDragBackToPanel={handleNoteDragBackToPanel}
+                    className="before:mix-blend-multiply before:bg-noise-pattern"
+                    visibleContextNoteIds={visibleContextNoteIds}
+                  />
+                  <div className="flex flex-col items-center space-y-2 absolute bottom-2 right-2 z-100">
                     <VaultButton
-                      className={cn(
-                        isClient &&
-                          (isNotesLoading || !isOnline) &&
-                          "cursor-not-allowed opacity-50 hover:cursor-not-allowed",
-                      )}
                       onClick={toggleNotes}
-                      disabled={!isClient || isNotesLoading || !isOnline}
                       size="small"
-                      title={
-                        showNotes
-                          ? "Hide Notes"
-                          : isClient && isOnline
-                            ? "Show Notes"
-                            : isClient && !isOnline
-                              ? "Notes unavailable offline"
-                              : "Loading..."
-                      }
+                      title={showNotes ? "Hide Notes" : "Show Notes"}
                     >
                       <CopyIcon className="w-3 h-3" />
                     </VaultButton>
                   </div>
                   <div className="absolute top-2 left-2 text-sm/7 z-10 flex flex-col items-start justify-self gap-2">
                     {hasUnsavedChanges && <DotIcon className="text-yellow-200" />}
-                    {isClient && !isOnline && <GlobeIcon className="w-4 h-4 text-destructive" />}
-                    {embeddingStatus && <EmbeddingStatus status={embeddingStatus} />}
+                    <EmbeddingStatus status={embeddingStatus} />
                   </div>
-                  {vault && currentFileId && memoizedDroppedNotes.length > 0 && !isNotesLoading && (
+                  {droppedNotes.length > 0 && (
                     <ContextNotes
                       className={`${isEditMode ? "block" : "hidden"}`}
                       editorViewRef={codeMirrorViewRef}
                       readingModeRef={readingModeRef}
-                      droppedNotes={memoizedDroppedNotes}
                       isEditMode={isEditMode}
-                      fileId={currentFileId}
-                      vaultId={vault.id}
                       onVisibleNotesChange={handleVisibleContextNotesChange}
                     />
                   )}
@@ -2366,13 +1070,7 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
                         height="100%"
                         autoFocus
                         placeholder={"What's on your mind?"}
-                        basicSetup={{
-                          rectangularSelection: false,
-                          indentOnInput: true,
-                          syntaxHighlighting: true,
-                          highlightActiveLine: true,
-                          highlightSelectionMatches: true,
-                        }}
+                        basicSetup={memoizedBasicSetup} // Use memoized object
                         indentWithTab={true}
                         extensions={memoizedExtensions}
                         onChange={onContentChange}
@@ -2395,43 +1093,22 @@ export default memo(function Editor({ vaultId, vaults }: EditorProps) {
                     </div>
                   </div>
                 </EditorDropTarget>
-                <AnimatePresence mode="wait" initial={false}>
-                  {showNotes && (
-                    <motion.div
-                      key="notes-panel"
-                      initial={{ width: "22rem", opacity: 1, overflow: "visible" }}
-                      animate={{ width: "22rem", opacity: 1, overflow: "visible" }}
-                      exit={{ width: 0, opacity: 0, overflow: "hidden" }}
-                      transition={{ duration: 0 }}
-                    >
-                      <NotesPanel
-                        notes={notes}
-                        isNotesLoading={isNotesLoading}
-                        notesError={notesError}
-                        currentlyGeneratingDateKey={currentlyGeneratingDateKey}
-                        currentGenerationNotes={currentGenerationNotes}
-                        droppedNotes={droppedNotes}
-                        streamingReasoning={streamingReasoning}
-                        reasoningComplete={reasoningComplete}
-                        currentFile={currentFile}
-                        vaultId={vault?.id}
-                        currentReasoningId={currentReasoningId}
-                        reasoningHistory={reasoningHistory}
-                        handleNoteDropped={handleNoteDropped}
-                        handleNoteRemoved={handleNoteRemoved}
-                        handleCurrentGenerationNote={handleCurrentGenerationNote}
-                        isNotesRecentlyGenerated={isNotesRecentlyGenerated}
-                        currentReasoningElapsedTime={currentReasoningElapsedTime}
-                        generateNewSuggestions={generateNewSuggestions}
-                        noteGroupsData={noteGroupsData}
-                        notesContainerRef={notesContainerRef}
-                        streamingNotes={streamingNotes}
-                        scanAnimationComplete={scanAnimationComplete}
-                      />
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </Playspace>
+                {showNotes && (
+                  <div className={cn("flex flex-col", showNotes ? "w-88 visible" : "w-0 hidden")}>
+                    <NotesPanel
+                      handleNoteDropped={handleNoteDropped}
+                      handleNoteRemoved={handleNoteRemoved}
+                      noteGroupsData={noteGroupsData}
+                      droppedNotes={droppedNotes}
+                      fileId={currentFileId!}
+                      vaultId={vaultId}
+                      markdownContent={markdownContent}
+                      currentFileHandle={currentFileHandle}
+                      dbFile={dbFileState}
+                    />
+                  </div>
+                )}
+              </section>
               <SearchCommand
                 maps={flattenedFileIds}
                 vault={vault!}
diff --git a/packages/morph/components/embedding-status.tsx b/packages/morph/components/embedding-status.tsx
index 07018254..91f3aec1 100644
--- a/packages/morph/components/embedding-status.tsx
+++ b/packages/morph/components/embedding-status.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib"
-import { CheckIcon, EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons"
+import { CheckIcon, Cross2Icon, EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons"
 import { useEffect, useState } from "react"
 
 interface EmbeddingStatusProps {
@@ -72,12 +72,12 @@ export function EmbeddingStatus({ status, className }: EmbeddingStatusProps) {
         title="Processing embeddings"
       >
         {eyeIconState === "open" ? (
-          <EyeOpenIcon className="w-4 h-4 text-blue-400 animate-pulse" />
+          <EyeOpenIcon className="w-4 h-4 text-blue-300 animate-pulse" />
         ) : (
-          <EyeClosedIcon className="w-4 h-4 text-blue-400/70" />
+          <EyeClosedIcon className="w-4 h-4 text-blue-300/70" />
         )}
-        <span className="text-xs text-blue-400 hidden sm:inline-block animate-text-shimmer">
-          Indexing...
+        <span className="text-xs text-blue-300 hidden sm:inline-block animate-text-shimmer">
+          indexing
         </span>
       </div>
     )
@@ -93,7 +93,7 @@ export function EmbeddingStatus({ status, className }: EmbeddingStatusProps) {
         )}
         title="Indexing complete"
       >
-        <CheckIcon className="w-4 h-4 text-green-400" />
+        <CheckIcon className="w-4 h-4 text-green-300" />
       </div>
     )
   }
@@ -101,7 +101,7 @@ export function EmbeddingStatus({ status, className }: EmbeddingStatusProps) {
   if (status === "failure" || status === "cancelled") {
     return (
       <div className={cn("relative flex items-center gap-1.5", className)} title="Indexing failed">
-        <EyeClosedIcon className="w-4 h-4 text-red-400" />
+        <Cross2Icon className="w-4 h-4 text-red-300" />
       </div>
     )
   }
diff --git a/packages/morph/components/essay-embedding-processor.tsx b/packages/morph/components/essay-embedding-processor.tsx
index 2b566c76..4ec9ea1c 100644
--- a/packages/morph/components/essay-embedding-processor.tsx
+++ b/packages/morph/components/essay-embedding-processor.tsx
@@ -1,13 +1,20 @@
 import { useQueryEssayEmbeddingStatus } from "@/services/essays"
-import { memo, useCallback, useEffect, useMemo } from "react"
+import { PgliteDatabase } from "drizzle-orm/pglite"
+import { memo, useCallback, useEffect } from "react"
 
 import { useEssayEmbeddingTasks } from "@/context/embedding"
 
+import * as schema from "@/db/schema"
+
 /**
  * Component that manages essay embedding tasks polling.
  * This is a "headless" component that doesn't render anything.
  */
-export const EssayEmbeddingProcessor = memo(function EssayEmbeddingProcessor() {
+export const EssayEmbeddingProcessor = memo(function EssayEmbeddingProcessor({
+  db,
+}: {
+  db: PgliteDatabase<typeof schema>
+}) {
   // Use our context hook instead of local state
   const { pendingTaskIds, removeTask } = useEssayEmbeddingTasks()
 
@@ -18,30 +25,29 @@ export const EssayEmbeddingProcessor = memo(function EssayEmbeddingProcessor() {
     },
     [removeTask],
   )
-
   // Only create task pollers if there are pending tasks to process
   // This prevents unnecessary polling when there are no essays to process
-  const taskPollers = useMemo(() => {
-    if (pendingTaskIds.length === 0) {
-      return null // Return null if there are no pending tasks
-    }
+  const TaskPollers = useCallback(() => {
+    if (pendingTaskIds.length === 0) return null
 
     return pendingTaskIds.map((taskId) => (
       <EssayEmbeddingTaskPoller
         key={taskId}
         taskId={taskId}
+        db={db}
         onComplete={() => handleTaskComplete(taskId)}
       />
     ))
-  }, [pendingTaskIds, handleTaskComplete])
+  }, [pendingTaskIds, handleTaskComplete, db])
 
   // Return the task pollers only if there are tasks to poll
-  return <>{taskPollers}</>
+  return <TaskPollers />
 })
 
 interface EssayEmbeddingTaskPollerProps {
   taskId: string
   onComplete: () => void
+  db: PgliteDatabase<typeof schema>
 }
 
 /**
@@ -50,9 +56,10 @@ interface EssayEmbeddingTaskPollerProps {
 const EssayEmbeddingTaskPoller = memo(function EssayEmbeddingTaskPoller({
   taskId,
   onComplete,
+  db,
 }: EssayEmbeddingTaskPollerProps) {
   // Use the hook to poll this task, but only if we have a valid taskId
-  const { data, isSuccess, isError } = useQueryEssayEmbeddingStatus(taskId)
+  const { data, isSuccess, isError } = useQueryEssayEmbeddingStatus(taskId, db)
 
   // When task is successful or fails, call the onComplete callback
   useEffect(() => {
diff --git a/packages/morph/components/formatted-date.tsx b/packages/morph/components/formatted-date.tsx
index e0255002..c7e6969b 100644
--- a/packages/morph/components/formatted-date.tsx
+++ b/packages/morph/components/formatted-date.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
 import { cn } from "@/lib"
 import { formatDateString } from "@/lib"
+import * as React from "react"
 
 interface FormattedDateProps {
   dateString: string
diff --git a/packages/morph/components/landing/page-transition.tsx b/packages/morph/components/landing/page-transition.tsx
deleted file mode 100644
index 4853e40c..00000000
--- a/packages/morph/components/landing/page-transition.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client"
-
-import { useRouter } from "next/navigation"
-import { useEffect, useRef } from "react"
-
-export function PageTransition({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  const router = useRouter()
-  const transitionRef = useRef<HTMLDivElement>(null)
-
-  // Effect for page transitions
-  useEffect(() => {
-    // Add event listener to Links with href="/vaults"
-    const handleLinkClick = (e: Event) => {
-      e.preventDefault()
-
-      // Start the transition animation
-      if (transitionRef.current) {
-        transitionRef.current.classList.add("active")
-
-        // Navigate after animation completes
-        setTimeout(() => {
-          router.push("/vaults")
-        }, 600) // Slightly shorter than animation duration
-      }
-    }
-
-    // Find all vault links
-    const vaultLinks = document.querySelectorAll('a[href="/vaults"]')
-    vaultLinks.forEach((link) => {
-      link.addEventListener("click", handleLinkClick)
-    })
-
-    return () => {
-      vaultLinks.forEach((link) => {
-        link.removeEventListener("click", handleLinkClick)
-      })
-    }
-  }, [router])
-
-  return (
-    <>
-      {children}
-      <div
-        ref={transitionRef}
-        className="fixed inset-0 z-50 pointer-events-none transition-transform duration-700 ease-in-out"
-        style={{
-          transform: "translateX(-100%)",
-          background: "linear-gradient(90deg, rgba(22,163,74,0.9) 0%, rgba(22,163,74,0.4) 100%)",
-        }}
-      />
-      <style jsx global>{`
-        .active {
-          transform: translateX(0) !important;
-        }
-      `}</style>
-    </>
-  )
-}
diff --git a/packages/morph/components/markdown-inline.ts b/packages/morph/components/markdown-inline.ts
index 55e98b81..aacc632c 100644
--- a/packages/morph/components/markdown-inline.ts
+++ b/packages/morph/components/markdown-inline.ts
@@ -21,16 +21,7 @@ import { htmlPlugins, markdownPlugins } from "./parser"
 
 export type HtmlContent = [HtmlRoot, VFile, string]
 
-function shouldProcessFile(filename: string): boolean {
-  const processableExtensions = [".md", ".mdx", ".markdown", ".txt"]
-  return processableExtensions.some((ext) => filename.toLowerCase().endsWith(ext))
-}
-
-function processor(filename: string, settings: Settings, vaultId: string) {
-  if (filename.endsWith(".mdx")) {
-    return unified()
-  }
-
+function processor(settings: Settings, vaultId: string) {
   return unified()
     .use(remarkParse)
     .use(markdownPlugins(settings, vaultId))
@@ -41,13 +32,11 @@ function processor(filename: string, settings: Settings, vaultId: string) {
 
 let mdProcessor: ReturnType<typeof processor> | null = null
 
-const cached = new Map<string, HtmlContent>()
-
 interface ConverterOptions {
   value: string
   vaultId: string
   settings: Settings
-  filename: string
+  fileId: string | null
   returnHast?: boolean
 }
 
@@ -56,40 +45,27 @@ export async function mdToHtml(opts: ConverterOptions): Promise<HtmlRoot>
 export async function mdToHtml({
   value,
   vaultId,
-  filename,
+  fileId,
   settings,
   returnHast,
 }: ConverterOptions): Promise<HtmlRoot | string> {
   returnHast = returnHast ?? false
   if (!value.trim()) return returnHast ? { type: "root", children: [] } : ""
-  if (filename && !shouldProcessFile(filename))
-    return returnHast
-      ? {
-          type: "root",
-          children: [{ type: "text", value }],
-        }
-      : value
-
   value = value
     .replace(/^ +/, (spaces) => spaces.replace(/ /g, "\u00A0"))
     .toString()
     .trim()
 
-  const cacheKey = `${filename || "local"}:${value}`
-  const cachedResult = cached.get(cacheKey)
-  if (cachedResult) return returnHast ? cachedResult[0] : String(cachedResult[2])
-
   const file = new VFile()
   file.value = value
-  if (filename) file.path = filename
+  file.path = fileId || "<default>"
 
   try {
-    if (!mdProcessor) mdProcessor = processor(filename, settings, vaultId)
+    if (!mdProcessor) mdProcessor = processor(settings, vaultId)
     const ast = mdProcessor.parse(file) as MdRoot
     const newAst = (await mdProcessor.run(ast, file)) as HtmlRoot
     const result = mdProcessor.stringify(newAst, file)
     // save ast for parsing reading mode
-    cached.set(cacheKey, [newAst, file, result.toString()])
     return returnHast ? newAst : result.toString()
   } catch (error) {
     console.error("Error rendering content:", error)
@@ -102,10 +78,10 @@ export async function mdToHtml({
   }
 }
 
-export const setFile = StateEffect.define<string>()
+export const setFile = StateEffect.define<string | null>()
 
-export const fileField = StateField.define<string>({
-  create: () => "",
+export const fileField = StateField.define<string | null>({
+  create: () => null,
   update: (value, tr) => {
     for (const effect of tr.effects) {
       if (effect.is(setFile)) return effect.value
diff --git a/packages/morph/components/note-embedding-processor.tsx b/packages/morph/components/note-embedding-processor.tsx
index f79b12b1..44ef1b84 100644
--- a/packages/morph/components/note-embedding-processor.tsx
+++ b/packages/morph/components/note-embedding-processor.tsx
@@ -1,13 +1,20 @@
 import { useQueryNoteEmbeddingStatus } from "@/services/notes"
-import { memo, useCallback, useEffect, useMemo } from "react"
+import { PgliteDatabase } from "drizzle-orm/pglite"
+import { memo, useCallback, useEffect } from "react"
 
 import { useEmbeddingTasks } from "@/context/embedding"
 
+import * as schema from "@/db/schema"
+
 /**
  * Component that manages embedding tasks polling.
  * This is a "headless" component that doesn't render anything.
  */
-export const NoteEmbeddingProcessor = memo(function NoteEmbeddingProcessor() {
+export const NoteEmbeddingProcessor = memo(function NoteEmbeddingProcessor({
+  db,
+}: {
+  db: PgliteDatabase<typeof schema>
+}) {
   // Use our context hook instead of local state
   const { pendingTaskIds, removeTask } = useEmbeddingTasks()
 
@@ -21,27 +28,27 @@ export const NoteEmbeddingProcessor = memo(function NoteEmbeddingProcessor() {
 
   // Only create task pollers if there are pending tasks to process
   // This prevents unnecessary polling when there are no notes to process
-  const taskPollers = useMemo(() => {
-    if (pendingTaskIds.length === 0) {
-      return null // Return null if there are no pending tasks
-    }
+  const TaskPollers = useCallback(() => {
+    if (pendingTaskIds.length === 0) return null
 
     return pendingTaskIds.map((taskId) => (
       <NoteEmbeddingTaskPoller
         key={taskId}
         taskId={taskId}
+        db={db}
         onComplete={() => handleTaskComplete(taskId)}
       />
     ))
-  }, [pendingTaskIds, handleTaskComplete])
+  }, [pendingTaskIds, handleTaskComplete, db])
 
   // Return the task pollers only if there are tasks to poll
-  return <>{taskPollers}</>
+  return <TaskPollers />
 })
 
 interface NoteEmbeddingTaskPollerProps {
   taskId: string
   onComplete: () => void
+  db: PgliteDatabase<typeof schema>
 }
 
 /**
@@ -50,9 +57,10 @@ interface NoteEmbeddingTaskPollerProps {
 const NoteEmbeddingTaskPoller = memo(function NoteEmbeddingTaskPoller({
   taskId,
   onComplete,
+  db,
 }: NoteEmbeddingTaskPollerProps) {
   // Use the hook to poll this task, but only if we have a valid taskId
-  const { data, isSuccess, isError } = useQueryNoteEmbeddingStatus(taskId)
+  const { data, isSuccess, isError } = useQueryNoteEmbeddingStatus(taskId, db)
 
   // When task is successful or fails, call the onComplete callback
   useEffect(() => {
diff --git a/packages/morph/components/note-group.tsx b/packages/morph/components/note-group.tsx
index 6fcbad53..af744ffc 100644
--- a/packages/morph/components/note-group.tsx
+++ b/packages/morph/components/note-group.tsx
@@ -1,5 +1,4 @@
 import { cn } from "@/lib"
-import { generatePastelColor } from "@/lib/notes"
 import { submitNotesForEmbedding } from "@/services/notes"
 import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
 import { eq } from "drizzle-orm"
@@ -7,9 +6,9 @@ import { drizzle } from "drizzle-orm/pglite"
 import { AnimatePresence, motion, useMotionValue, useTransform } from "motion/react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 
+import { FormattedDate } from "@/components/formatted-date"
 import { AttachedNoteCard, DraggableNoteCard } from "@/components/note-card"
 import { ReasoningPanel } from "@/components/reasoning-panel"
-import { FormattedDate } from "@/components/formatted-date"
 
 import { usePGlite } from "@/context/db"
 
@@ -36,140 +35,121 @@ interface NoteGroupProps {
     content: string
     reasoningElapsedTime: number
   }
-  currentFile: string
+  fileId: string
   vaultId?: string
   handleNoteDropped: (note: Note) => void
   onNoteRemoved: (noteId: string) => void
   isGenerating?: boolean
 }
 
-export const NoteGroup = memo(
-  function NoteGroup({
-    dateStr,
-    dateNotes,
-    reasoning,
-    currentFile,
-    vaultId,
-    handleNoteDropped,
-    onNoteRemoved,
-    isGenerating = false,
-  }: NoteGroupProps) {
-    const [isExpanded, setIsExpanded] = useState<boolean>(false)
-
-    // Define staggered animation variants
-    const containerVariants = {
-      hidden: { opacity: 0 },
-      visible: {
-        opacity: 1,
-        transition: {
-          staggerChildren: 0.07,
-          delayChildren: 0.05,
-        },
-      },
-      exit: {
-        opacity: 0,
-        transition: {
-          staggerChildren: 0.03,
-          staggerDirection: -1,
-        },
-      },
-    }
-
-    const itemVariants = {
-      hidden: { opacity: 0, y: 15 },
-      visible: {
-        opacity: 1,
-        y: 0,
-        transition: {
-          type: "spring",
-          stiffness: 350,
-          damping: 30,
-        },
+export const NoteGroup = memo(function NoteGroup({
+  dateStr,
+  dateNotes,
+  reasoning,
+  vaultId,
+  handleNoteDropped,
+  onNoteRemoved,
+  isGenerating = false,
+}: NoteGroupProps) {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false)
+
+  // Define staggered animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.07,
+        delayChildren: 0.05,
       },
-      exit: {
-        opacity: 0,
-        y: -10,
-        transition: { duration: 0.2 },
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        staggerChildren: 0.03,
+        staggerDirection: -1,
       },
-    }
+    },
+  }
 
-    // Memoize the callbacks to ensure they have stable references
-    const stableHandleNoteDropped = useCallback(
-      (note: Note) => {
-        handleNoteDropped(note)
+  const itemVariants = {
+    hidden: { opacity: 0, y: 15 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 350,
+        damping: 30,
       },
-      [handleNoteDropped],
-    )
+    },
+    exit: {
+      opacity: 0,
+      y: -10,
+      transition: { duration: 0.2 },
+    },
+  }
 
-    const stableOnNoteRemoved = useCallback(
-      (noteId: string) => {
-        onNoteRemoved(noteId)
-      },
-      [onNoteRemoved],
-    )
+  // Memoize the callbacks to ensure they have stable references
+  const stableHandleNoteDropped = useCallback(
+    (note: Note) => {
+      handleNoteDropped(note)
+    },
+    [handleNoteDropped],
+  )
 
-    const MemoizedNotes = useMemo(() => {
-      return dateNotes.map((note) => ({
-        ...note,
-        color: note.color ?? generatePastelColor(),
-      }))
-    }, [dateNotes])
-
-    const MemoizedReasoningPanel = useMemo(() => {
-      if (!reasoning) return null
-      return (
-        <ReasoningPanel
-          reasoning={reasoning.content}
-          isStreaming={false}
-          isComplete={true}
-          currentFile={currentFile}
-          vaultId={vaultId}
-          reasoningId={reasoning.id}
-          shouldExpand={isExpanded}
-          elapsedTime={reasoning.reasoningElapsedTime || 0}
-          onExpandChange={setIsExpanded}
-        />
-      )
-    }, [reasoning, currentFile, vaultId, isExpanded])
+  const stableOnNoteRemoved = useCallback(
+    (noteId: string) => {
+      onNoteRemoved(noteId)
+    },
+    [onNoteRemoved],
+  )
 
+  const MemoizedReasoningPanel = useMemo(() => {
+    if (!reasoning) return null
     return (
-      <div className="mb-3">
-        <div className="mb-2 space-y-4 bg-background">
-          <DateDisplay dateStr={dateStr} />
-          {MemoizedReasoningPanel}
-        </div>
-
-        <motion.div
-          className="grid gap-4"
-          variants={containerVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-        >
-          {MemoizedNotes.map((note) => (
-            <motion.div key={note.id} variants={itemVariants}>
-              <DraggableNoteCard
-                note={note}
-                handleNoteDropped={stableHandleNoteDropped}
-                onNoteRemoved={stableOnNoteRemoved}
-                isGenerating={isGenerating}
-              />
-            </motion.div>
-          ))}
-        </motion.div>
-      </div>
+      <ReasoningPanel
+        reasoning={reasoning.content}
+        isStreaming={false}
+        isComplete={true}
+        vaultId={vaultId}
+        reasoningId={reasoning.id}
+        shouldExpand={isExpanded}
+        elapsedTime={reasoning.reasoningElapsedTime || 0}
+        onExpandChange={setIsExpanded}
+      />
     )
-  },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.dateStr === nextProps.dateStr &&
-      prevProps.dateNotes === nextProps.dateNotes &&
-      prevProps.reasoning === nextProps.reasoning &&
-      prevProps.currentFile === nextProps.currentFile &&
-      prevProps.isGenerating === nextProps.isGenerating
-    )
-  },
-)
+  }, [reasoning, vaultId, isExpanded])
+
+  return (
+    <div className="mb-3">
+      <div className="mb-2 space-y-4 bg-background">
+        <DateDisplay dateStr={dateStr} />
+        {MemoizedReasoningPanel}
+      </div>
+
+      <motion.div
+        className="grid gap-4"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        exit="exit"
+      >
+        {dateNotes.map((note) => (
+          <motion.div key={note.id} variants={itemVariants}>
+            <DraggableNoteCard
+              key={note.id}
+              note={note}
+              handleNoteDropped={stableHandleNoteDropped}
+              onNoteRemoved={stableOnNoteRemoved}
+              isGenerating={isGenerating}
+            />
+          </motion.div>
+        ))}
+      </motion.div>
+    </div>
+  )
+})
 
 interface DroppedNoteGroupProps {
   droppedNotes: Note[]
@@ -180,218 +160,232 @@ interface DroppedNoteGroupProps {
   visibleContextNoteIds?: string[]
 }
 
-export const DroppedNoteGroup = memo(
-  function DroppedNoteGroup({
-    droppedNotes,
-    isStackExpanded,
-    onExpandStack,
-    onDragBackToPanel,
-    className,
-    visibleContextNoteIds,
-  }: DroppedNoteGroupProps) {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const scrollContainerRef = useRef<HTMLDivElement>(null)
-    const lastNoteRef = useRef<HTMLDivElement>(null)
-    const prevNotesLengthRef = useRef(droppedNotes.length)
-    const MAX_VISIBLE_NOTES = 5
-    const hasMoreNotes = droppedNotes.length > MAX_VISIBLE_NOTES
-    const hasNotes = droppedNotes.length > 0
-
-    // Use empty array if visibleContextNoteIds is undefined
-    const safeVisibleContextNoteIds = useMemo(() => visibleContextNoteIds || [], [visibleContextNoteIds])
-
-    // Filter out notes that are visible in context view
-    const filteredNotes = useMemo(() => {
-      return droppedNotes.filter(note => !safeVisibleContextNoteIds.includes(note.id))
-    }, [droppedNotes, safeVisibleContextNoteIds])
-
-    // Get the actual notes to display (either filtered or all)
-    const notesToDisplay = useMemo(
-      () => (isStackExpanded ? filteredNotes : filteredNotes.slice(0, MAX_VISIBLE_NOTES)),
-      [filteredNotes, isStackExpanded, MAX_VISIBLE_NOTES],
-    )
+export const DroppedNoteGroup = memo(function DroppedNoteGroup({
+  droppedNotes,
+  isStackExpanded,
+  onExpandStack,
+  onDragBackToPanel,
+  className,
+  visibleContextNoteIds,
+}: DroppedNoteGroupProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const lastNoteRef = useRef<HTMLDivElement>(null)
+  const prevNotesLengthRef = useRef(droppedNotes.length)
+  const MAX_VISIBLE_NOTES = 5
+  const hasMoreNotes = droppedNotes.length > MAX_VISIBLE_NOTES
+  const hasNotes = droppedNotes.length > 0
+
+  // Use empty array if visibleContextNoteIds is undefined
+  const safeVisibleContextNoteIds = useMemo(
+    () => visibleContextNoteIds || [],
+    [visibleContextNoteIds],
+  )
 
-    // Keep track of notes currently in context view
-    const inContextNotes = useMemo(() => {
-      return droppedNotes.filter(note => safeVisibleContextNoteIds.includes(note.id))
-    }, [droppedNotes, safeVisibleContextNoteIds])
-
-    // Motion values for chevron drag
-    const dragY = useMotionValue(0)
-    const chevronScale = useTransform(
-      dragY,
-      isStackExpanded ? [0, 30] : [0, -30],
-      isStackExpanded ? [1, 1.3] : [1, 1.3],
-    )
+  // Filter out notes that are visible in context view
+  const filteredNotes = useMemo(() => {
+    return droppedNotes.filter((note) => !safeVisibleContextNoteIds.includes(note.id))
+  }, [droppedNotes, safeVisibleContextNoteIds])
+
+  // Get the actual notes to display (either filtered or all)
+  const notesToDisplay = useMemo(
+    () => (isStackExpanded ? filteredNotes : filteredNotes.slice(0, MAX_VISIBLE_NOTES)),
+    [filteredNotes, isStackExpanded, MAX_VISIBLE_NOTES],
+  )
 
-    // Function to handle drag end
-    const handleDragEnd = () => {
-      const threshold = 15
-      const currentY = dragY.get()
+  // Keep track of notes currently in context view
+  const inContextNotes = useMemo(() => {
+    return droppedNotes.filter((note) => safeVisibleContextNoteIds.includes(note.id))
+  }, [droppedNotes, safeVisibleContextNoteIds])
+
+  // Motion values for chevron drag
+  const dragY = useMotionValue(0)
+  const chevronScale = useTransform(
+    dragY,
+    isStackExpanded ? [0, 30] : [0, -30],
+    isStackExpanded ? [1, 1.3] : [1, 1.3],
+  )
 
-      // If expanded and dragged up beyond threshold, collapse
-      if (isStackExpanded && currentY < -threshold) {
-        onExpandStack()
-      }
-      // If collapsed and dragged down beyond threshold, expand
-      else if (!isStackExpanded && currentY > threshold) {
-        onExpandStack()
-      }
+  // Function to handle drag end
+  const handleDragEnd = () => {
+    const threshold = 15
+    const currentY = dragY.get()
 
-      // Reset drag position
-      dragY.set(0)
+    // If expanded and dragged up beyond threshold, collapse
+    if (isStackExpanded && currentY < -threshold) {
+      onExpandStack()
+    }
+    // If collapsed and dragged down beyond threshold, expand
+    else if (!isStackExpanded && currentY > threshold) {
+      onExpandStack()
     }
 
-    // Get database client
-    const client = usePGlite()
-    const db = useMemo(() => drizzle({ client, schema }), [client])
-
-    // Process notes for embeddings whenever droppedNotes changes
-    useEffect(() => {
-      // Skip if no notes to process
-      if (droppedNotes.length === 0) return
-
-      // Debounce the embedding check to prevent excessive processing
-      const timeoutId = setTimeout(() => {
-        // Only process notes that are visible
-        const visibleNotes = isStackExpanded
-          ? filteredNotes
-          : filteredNotes.slice(0, MAX_VISIBLE_NOTES)
-
-        // Check which notes need embeddings by checking for notes with no embedding status or non-success status
-        const notesRequiringEmbedding = visibleNotes.filter(
-          (note) => note.embeddingStatus !== "success",
-        )
+    // Reset drag position
+    dragY.set(0)
+  }
 
-        // Only process if we have notes that need embeddings
-        if (notesRequiringEmbedding.length > 0) {
-          console.log(
-            `[DroppedNotes] Processing ${notesRequiringEmbedding.length} visible notes for embedding`,
-          )
+  // Get database client
+  const client = usePGlite()
+  const db = useMemo(() => drizzle({ client, schema }), [client])
+
+  // Process notes for embeddings whenever droppedNotes changes
+  useEffect(() => {
+    // Skip if no notes to process
+    if (droppedNotes.length === 0) return
+
+    // Debounce the embedding check to prevent excessive processing
+    const timeoutId = setTimeout(() => {
+      // Only process notes that are visible
+      const visibleNotes = isStackExpanded
+        ? filteredNotes
+        : filteredNotes.slice(0, MAX_VISIBLE_NOTES)
+
+      // Check which notes need embeddings by checking for notes with no embedding status or non-success status
+      const notesRequiringEmbedding = visibleNotes.filter(
+        (note) => note.embeddingStatus !== "success",
+      )
 
-          // Process these notes - use as any to handle type mismatch
-          submitNotesForEmbedding(db, notesRequiringEmbedding as any).catch((error) => {
-            console.error("[DroppedNotes] Error submitting notes for embedding:", error)
-          })
-        }
-      }, 500) // Wait 500ms before processing to avoid excessive calls
-
-      return () => clearTimeout(timeoutId)
-    }, [droppedNotes, isStackExpanded, db, filteredNotes, MAX_VISIBLE_NOTES])
-
-    // Update the database when a note is reordered - use batching for efficiency
-    const updateNotesInDB = useCallback(
-      async (noteIds: string[]) => {
-        try {
-          if (noteIds.length === 0) return
-
-          // Use Promise.all to batch all updates
-          const now = new Date()
-          const updatePromises = noteIds.map((noteId) =>
-            db.update(schema.notes).set({ accessedAt: now }).where(eq(schema.notes.id, noteId)),
-          )
+      // Only process if we have notes that need embeddings
+      if (notesRequiringEmbedding.length > 0) {
+        // Process these notes - use as any to handle type mismatch
+        submitNotesForEmbedding(db, notesRequiringEmbedding as any).catch((error) => {
+          console.error("[DroppedNotes] Error submitting notes for embedding:", error)
+        })
+      }
+    }, 500) // Wait 500ms before processing to avoid excessive calls
 
-          await Promise.all(updatePromises)
-        } catch (error) {
-          console.error("Failed to batch update notes in database:", error)
-        }
-      },
-      [db],
-    )
+    return () => clearTimeout(timeoutId)
+  }, [droppedNotes, isStackExpanded, db, filteredNotes, MAX_VISIBLE_NOTES])
 
-    // Scroll to the newly added note when in expanded mode
-    useEffect(() => {
-      // Check if a new note was added
-      if (
-        droppedNotes.length > prevNotesLengthRef.current &&
-        isStackExpanded &&
-        lastNoteRef.current &&
-        scrollContainerRef.current
-      ) {
-        // Scroll to the last note
-        lastNoteRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" })
-
-        // Update the database to reflect the new note was viewed
-        const lastNoteId = droppedNotes[droppedNotes.length - 1]?.id
-        if (lastNoteId) {
-          updateNotesInDB([lastNoteId])
-        }
-      }
+  // Update the database when a note is reordered - use batching for efficiency
+  const updateNotesInDB = useCallback(
+    async (noteIds: string[]) => {
+      try {
+        if (noteIds.length === 0) return
 
-      // Update the reference for next comparison
-      prevNotesLengthRef.current = droppedNotes.length
-    }, [droppedNotes.length, isStackExpanded, droppedNotes, updateNotesInDB])
+        // Use Promise.all to batch all updates
+        const now = new Date()
+        const updatePromises = noteIds.map((noteId) =>
+          db.update(schema.notes).set({ accessedAt: now }).where(eq(schema.notes.id, noteId)),
+        )
 
-    // When stack expansion state changes, update the database - but only once, not per note
-    useEffect(() => {
-      // If we expand the stack, update access time for all notes with a single batch operation
-      if (isStackExpanded && droppedNotes.length > 0) {
-        // Extract all note IDs for a single batch update
-        const noteIds = droppedNotes.map((note) => note.id)
+        await Promise.all(updatePromises)
+      } catch (error) {
+        console.error("Failed to batch update notes in database:", error)
+      }
+    },
+    [db],
+  )
 
-        // Use our batched update function
-        updateNotesInDB(noteIds)
+  // Scroll to the newly added note when in expanded mode
+  useEffect(() => {
+    // Check if a new note was added
+    if (
+      droppedNotes.length > prevNotesLengthRef.current &&
+      isStackExpanded &&
+      lastNoteRef.current &&
+      scrollContainerRef.current
+    ) {
+      // Scroll to the last note
+      lastNoteRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" })
+
+      // Update the database to reflect the new note was viewed
+      const lastNoteId = droppedNotes[droppedNotes.length - 1]?.id
+      if (lastNoteId) {
+        updateNotesInDB([lastNoteId])
       }
-    }, [isStackExpanded, droppedNotes, updateNotesInDB])
+    }
 
-    // Render nothing if there are no notes or all notes are in context view
-    if (!hasNotes || (filteredNotes.length === 0 && inContextNotes.length > 0)) return null
+    // Update the reference for next comparison
+    prevNotesLengthRef.current = droppedNotes.length
+  }, [droppedNotes.length, isStackExpanded, droppedNotes, updateNotesInDB])
 
-    return (
+  // When stack expansion state changes, update the database - but only once, not per note
+  useEffect(() => {
+    // If we expand the stack, update access time for all notes with a single batch operation
+    if (isStackExpanded && droppedNotes.length > 0) {
+      // Extract all note IDs for a single batch update
+      const noteIds = droppedNotes.map((note) => note.id)
+
+      // Use our batched update function
+      updateNotesInDB(noteIds)
+    }
+  }, [isStackExpanded, droppedNotes, updateNotesInDB])
+
+  // Render nothing if there are no notes or all notes are in context view
+  if (!hasNotes || (filteredNotes.length === 0 && inContextNotes.length > 0)) return null
+
+  return (
+    <motion.div
+      ref={containerRef}
+      className={cn(
+        "absolute top-2 right-2 z-40",
+        isStackExpanded && "bg-background/80 backdrop-blur-sm border rounded-md shadow-md p-2",
+      )}
+      key={`dropped-notes-${droppedNotes.length}-${safeVisibleContextNoteIds.length}`}
+      initial={{ opacity: 0, scale: 0.95, y: 0 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95, y: 0 }}
+    >
       <motion.div
-        ref={containerRef}
+        ref={scrollContainerRef}
         className={cn(
-          "absolute top-2 right-2 z-40",
-          isStackExpanded && "bg-background/80 backdrop-blur-sm border rounded-md shadow-md p-2",
+          "flex flex-col items-center gap-1.5",
+          isStackExpanded && "max-h-[20vh] overflow-y-auto scrollbar-hidden",
         )}
-        key={`dropped-notes-${droppedNotes.length}-${safeVisibleContextNoteIds.length}`}
-        initial={{ opacity: 0, scale: 0.95, y: 0 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 0 }}
+        layout
+      >
+        <AnimatePresence mode="sync" initial={false}>
+          {notesToDisplay.map((note, index) => (
+            <div key={note.id} ref={index === notesToDisplay.length - 1 ? lastNoteRef : undefined}>
+              <AttachedNoteCard
+                note={note}
+                index={index}
+                isStackExpanded={isStackExpanded}
+                onDragBackToPanel={onDragBackToPanel}
+                className={className}
+              />
+            </div>
+          ))}
+        </AnimatePresence>
+      </motion.div>
+
+      {/* Chevron for drag interaction - separate from scrollable content */}
+      <motion.div
+        animate={{ y: [0, 4, 0] }}
+        transition={{
+          duration: 2,
+          ease: "easeInOut",
+          repeat: Infinity,
+        }}
+        className="flex justify-center mt-1"
       >
-        <motion.div
-          ref={scrollContainerRef}
-          className={cn(
-            "flex flex-col items-center gap-1.5",
-            isStackExpanded && "max-h-[20vh] overflow-y-auto scrollbar-hidden",
-          )}
-          layout
-        >
-          <AnimatePresence mode="sync" initial={false}>
-            {notesToDisplay.map((note, index) => (
-              <div
-                key={note.id}
-                ref={index === notesToDisplay.length - 1 ? lastNoteRef : undefined}
-              >
-                <AttachedNoteCard
-                  note={note}
-                  index={index}
-                  isStackExpanded={isStackExpanded}
-                  onDragBackToPanel={onDragBackToPanel}
-                  className={className}
-                />
-              </div>
-            ))}
-          </AnimatePresence>
-        </motion.div>
-
-        {/* Chevron for drag interaction - separate from scrollable content */}
-        <motion.div
-          animate={{ y: [0, 4, 0] }}
-          transition={{
-            duration: 2,
-            ease: "easeInOut",
-            repeat: Infinity,
-          }}
-          className="flex justify-center mt-1"
-        >
-          {isStackExpanded ? (
+        {isStackExpanded ? (
+          <motion.div
+            className="text-primary/50 cursor-grab active:cursor-grabbing flex justify-center items-center py-1"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.1 }}
+            title="Drag up to collapse notes"
+            drag="y"
+            dragDirectionLock
+            dragConstraints={{ top: 0, bottom: 0 }}
+            dragElastic={0.2}
+            style={{ y: dragY, scale: chevronScale }}
+            onDragEnd={handleDragEnd}
+          >
+            <ChevronUpIcon className="w-4 h-4" />
+          </motion.div>
+        ) : (
+          hasMoreNotes && (
             <motion.div
+              key="more-notes-indicator"
               className="text-primary/50 cursor-grab active:cursor-grabbing flex justify-center items-center py-1"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
               transition={{ duration: 0.1 }}
-              title="Drag up to collapse notes"
+              title="Drag down to expand notes"
               drag="y"
               dragDirectionLock
               dragConstraints={{ top: 0, bottom: 0 }}
@@ -399,61 +393,11 @@ export const DroppedNoteGroup = memo(
               style={{ y: dragY, scale: chevronScale }}
               onDragEnd={handleDragEnd}
             >
-              <ChevronUpIcon className="w-4 h-4" />
+              <ChevronDownIcon className="w-4 h-4" />
             </motion.div>
-          ) : (
-            hasMoreNotes && (
-              <motion.div
-                key="more-notes-indicator"
-                className="text-primary/50 cursor-grab active:cursor-grabbing flex justify-center items-center py-1"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.1 }}
-                title="Drag down to expand notes"
-                drag="y"
-                dragDirectionLock
-                dragConstraints={{ top: 0, bottom: 0 }}
-                dragElastic={0.2}
-                style={{ y: dragY, scale: chevronScale }}
-                onDragEnd={handleDragEnd}
-              >
-                <ChevronDownIcon className="w-4 h-4" />
-              </motion.div>
-            )
-          )}
-        </motion.div>
+          )
+        )}
       </motion.div>
-    )
-  },
-  (prevProps, nextProps) => {
-    // Only re-render if the notes array has changed in length or content
-    if (prevProps.droppedNotes.length !== nextProps.droppedNotes.length) {
-      return false // Re-render if number of notes changed
-    }
-    if (prevProps.isStackExpanded !== nextProps.isStackExpanded) {
-      return false // Re-render if expansion state changed
-    }
-    if (prevProps.onDragBackToPanel !== nextProps.onDragBackToPanel) {
-      return false // Re-render if the handler changed
-    }
-
-    // Safe handling of visibleContextNoteIds
-    const prevVisibleIds = prevProps.visibleContextNoteIds || []
-    const nextVisibleIds = nextProps.visibleContextNoteIds || []
-
-    if (prevVisibleIds.length !== nextVisibleIds.length) {
-      return false // Re-render if length of visibleContextNoteIds changed
-    }
-
-    if (!prevVisibleIds.every(id => nextVisibleIds.includes(id))) {
-      return false // Re-render if contents of visibleContextNoteIds changed
-    }
-
-    // Check if any note content or IDs have changed
-    return prevProps.droppedNotes.every((prevNote, index) => {
-      const nextNote = nextProps.droppedNotes[index]
-      return prevNote.id === nextNote.id && prevNote.color === nextNote.color
-    })
-  },
-)
+    </motion.div>
+  )
+})
diff --git a/packages/morph/components/note-panel.tsx b/packages/morph/components/note-panel.tsx
index 9ad3520b..aaf4d7cf 100644
--- a/packages/morph/components/note-panel.tsx
+++ b/packages/morph/components/note-panel.tsx
@@ -1,14 +1,28 @@
-import { cn } from "@/lib"
+import { cn, sanitizeStreamingContent } from "@/lib"
 import { generatePastelColor } from "@/lib/notes"
 import { NOTES_DND_TYPE } from "@/lib/notes"
+import {
+  GeneratedNote,
+  NewlyGeneratedNotes,
+  SuggestionRequest,
+  SuggestionResponse,
+  checkAgentAvailability,
+  checkAgentHealth,
+} from "@/services/agents"
+import { logNotesForFile, submitNoteForEmbedding } from "@/services/notes"
+import { createId } from "@paralleldrive/cuid2"
 import { Cross2Icon, MixerHorizontalIcon, ShadowInnerIcon } from "@radix-ui/react-icons"
+import { eq } from "drizzle-orm"
+import { drizzle } from "drizzle-orm/pglite"
 import { AnimatePresence, motion } from "motion/react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useDrop } from "react-dnd"
 import { Components, Virtuoso } from "react-virtuoso"
+import { toast } from "sonner"
 
 import { DraggableNoteCard, NoteCard } from "@/components/note-card"
 import { DateDisplay, NoteGroup } from "@/components/note-group"
+import { md } from "@/components/parser"
 import { ReasoningPanel } from "@/components/reasoning-panel"
 import {
   AuthorsSelector,
@@ -18,47 +32,25 @@ import {
 } from "@/components/steering-panel"
 import { VaultButton } from "@/components/ui/button"
 
+import { usePGlite } from "@/context/db"
+import { useEmbeddingTasks } from "@/context/embedding"
+import { useNotesContext } from "@/context/notes"
 import { SteeringSettings, useSteeringContext } from "@/context/steering"
 
+import type { ReasoningHistory, StreamingNote } from "@/db/interfaces"
 import type { Note } from "@/db/interfaces"
+import * as schema from "@/db/schema"
 
 interface NotesPanelProps {
-  notes: Note[]
-  isNotesLoading: boolean
-  notesError: string | null
-  currentlyGeneratingDateKey: string | null
-  currentGenerationNotes: Note[]
   droppedNotes: Note[]
-  streamingReasoning: string
-  reasoningComplete: boolean
-  currentFile: string
-  vaultId?: string
-  currentReasoningId: string
-  reasoningHistory: {
-    id: string
-    content: string
-    timestamp: Date
-    noteIds: string[]
-    reasoningElapsedTime: number
-  }[]
+  fileId: string
+  vaultId: string
+  noteGroupsData: [string, Note[]][]
   handleNoteDropped: (note: Note) => void
   handleNoteRemoved: (noteId: string) => void
-  handleCurrentGenerationNote: (note: Note) => void
-  isNotesRecentlyGenerated: boolean
-  currentReasoningElapsedTime: number
-  generateNewSuggestions: (steeringSettings: SteeringSettings) => void
-  noteGroupsData: [string, Note[]][]
-  notesContainerRef: React.RefObject<HTMLDivElement | null>
-  streamingNotes?: StreamingNote[]
-  scanAnimationComplete?: boolean
-}
-
-export interface StreamingNote {
-  id: string
-  content: string
-  color: string
-  isComplete: boolean
-  isScanComplete?: boolean
+  dbFile: typeof schema.files.$inferSelect | null
+  markdownContent?: string
+  currentFileHandle?: FileSystemFileHandle | null
 }
 
 const ScrollSeekPlaceholder: Components["ScrollSeekPlaceholder"] = memo(
@@ -85,228 +77,1120 @@ const ScrollSeekPlaceholder: Components["ScrollSeekPlaceholder"] = memo(
   },
 )
 
+interface HistoricalNotesProps {
+  fileId: string
+  reasoningHistory: ReasoningHistory[]
+  handleNoteDropped: (note: Note) => void
+  handleNoteRemoved: (noteId: string) => void
+  vaultId?: string
+  notesContainerRef: React.RefObject<HTMLDivElement | null>
+  noteGroupsData: [string, Note[]][]
+}
+
+// Extract HistoricalNotes into a separate memoized component
+const HistoricalNotes = memo(function HistoricalNotes({
+  fileId,
+  reasoningHistory,
+  vaultId,
+  notesContainerRef,
+  handleNoteDropped,
+  noteGroupsData,
+  handleNoteRemoved,
+}: HistoricalNotesProps) {
+  const memoizedNoteSkeletons = useMemo(() => <NoteCard variant="skeleton" />, [])
+
+  return (
+    <div className="flex-1 min-h-0">
+      <Virtuoso
+        style={{ height: "100%", width: "100%" }}
+        data={noteGroupsData}
+        overscan={5}
+        increaseViewportBy={{ top: 100, bottom: 100 }}
+        initialItemCount={1}
+        components={{ ScrollSeekPlaceholder }}
+        itemContent={(_: number, group: [string, Note[]]) => {
+          // Add a safety check for when group is undefined or not properly formed
+          if (!group || !Array.isArray(group) || group.length < 2) {
+            return memoizedNoteSkeletons
+          }
+          const [dateStr, dateNotes] = group
+
+          // Only handle historical notes now
+          const dateReasoning = reasoningHistory.find((r) =>
+            r.noteIds.some((id: string) => dateNotes.some((note: Note) => note.id === id)),
+          )
+
+          return (
+            <div className="mb-6">
+              <NoteGroup
+                dateStr={dateStr}
+                dateNotes={dateNotes}
+                reasoning={dateReasoning}
+                fileId={fileId}
+                vaultId={vaultId}
+                handleNoteDropped={handleNoteDropped}
+                onNoteRemoved={handleNoteRemoved}
+                isGenerating={false}
+              />
+            </div>
+          )
+        }}
+        scrollSeekConfiguration={{
+          enter: (velocity) => Math.abs(velocity) > 1000,
+          exit: (velocity) => Math.abs(velocity) < 100,
+        }}
+        customScrollParent={notesContainerRef.current!}
+      />
+    </div>
+  )
+})
+
 // Create a memoized driver bar component for the notes panel
 interface DriversBarProps {
   handleGenerateNewSuggestions: (steeringSettings: SteeringSettings) => void
-  isNotesLoading: boolean
   isNotesRecentlyGenerated: boolean
+  isNotesLoading: boolean
+  markdownContent: string
 }
 
-const DriversBar = memo(
-  function DriversBar({
-    handleGenerateNewSuggestions,
-    isNotesLoading,
-    isNotesRecentlyGenerated,
-  }: DriversBarProps) {
-    const [isSteeringExpanded, setIsSteeringExpanded] = useState(false)
-    const {
-      settings,
-      updateAuthors,
-      updateTonality,
-      updateTemperature,
-      updateNumSuggestions,
-      toggleTonality,
-    } = useSteeringContext()
-
-    const toggleSteeringPanel = useCallback(() => {
-      setIsSteeringExpanded((prev) => !prev)
-    }, [])
+const DriversBarButtons = memo(function DriversBarButtons({
+  onToggleSteeringPanel,
+  onGenerateNewSuggestions,
+  isNotesRecentlyGenerated,
+  isNotesLoading,
+}: {
+  onToggleSteeringPanel: () => void
+  onGenerateNewSuggestions: () => void
+  isNotesRecentlyGenerated: boolean
+  isNotesLoading: boolean
+}) {
+  return (
+    <div className="flex items-center justify-end gap-3 p-2">
+      <VaultButton
+        onClick={onToggleSteeringPanel}
+        size="small"
+        color="yellow"
+        title="Interpreter Settings"
+      >
+        <MixerHorizontalIcon className="h-3 w-3" />
+      </VaultButton>
+      <VaultButton
+        onClick={onGenerateNewSuggestions}
+        disabled={isNotesLoading}
+        color="none"
+        size="small"
+        className={cn(
+          "text-primary border border-accent-foreground/40",
+          !isNotesRecentlyGenerated && "button-shimmer-border",
+          isNotesLoading && "cursor-not-allowed opacity-50 hover:cursor-not-allowed",
+        )}
+        title="Generate Suggestions"
+      >
+        <ShadowInnerIcon className="w-3 h-3" />
+      </VaultButton>
+    </div>
+  )
+})
 
-    // Close steering panel when the notes panel is closed
-    useEffect(() => {
-      return () => {
-        // This cleanup function will run when the component unmounts
-        // (which happens when the notes panel is closed)
-        if (isSteeringExpanded) {
-          setIsSteeringExpanded(false)
-        }
+export const DriversBar = memo(function DriversBar({
+  handleGenerateNewSuggestions,
+  isNotesRecentlyGenerated,
+  isNotesLoading,
+  markdownContent,
+}: DriversBarProps) {
+  const [isSteeringExpanded, setIsSteeringExpanded] = useState(false)
+  const {
+    settings,
+    updateAuthors,
+    updateTonality,
+    updateTemperature,
+    updateNumSuggestions,
+    toggleTonality,
+  } = useSteeringContext()
+
+  const toggleSteeringPanel = useCallback(() => {
+    setIsSteeringExpanded((prev) => !prev)
+  }, [])
+
+  // Close steering panel when the notes panel is closed
+  useEffect(() => {
+    return () => {
+      // This cleanup function will run when the component unmounts
+      // (which happens when the notes panel is closed)
+      if (isSteeringExpanded) {
+        setIsSteeringExpanded(false)
       }
-    }, [isSteeringExpanded])
+    }
+  }, [isSteeringExpanded])
 
-    // Handler functions for steering controls
-    const handleUpdateAuthors = useCallback(
-      (authors: string[]) => {
-        updateAuthors(authors)
-      },
-      [updateAuthors],
-    )
+  // Handler functions for steering controls
+  const handleUpdateAuthors = useCallback(
+    (authors: string[]) => {
+      updateAuthors(authors)
+    },
+    [updateAuthors],
+  )
 
-    const handleUpdateTonality = useCallback(
-      (tonality: Record<string, number>) => {
-        updateTonality(tonality)
-      },
-      [updateTonality],
-    )
+  const handleUpdateTonality = useCallback(
+    (tonality: Record<string, number>) => {
+      updateTonality(tonality)
+    },
+    [updateTonality],
+  )
 
-    const handleUpdateTemperature = useCallback(
-      (temperature: number) => {
-        updateTemperature(temperature)
-      },
-      [updateTemperature],
-    )
+  const handleUpdateTemperature = useCallback(
+    (temperature: number) => {
+      updateTemperature(temperature)
+    },
+    [updateTemperature],
+  )
 
-    const handleUpdateNumSuggestions = useCallback(
-      (numSuggestions: number) => {
-        updateNumSuggestions(numSuggestions)
-      },
-      [updateNumSuggestions],
-    )
+  const handleUpdateNumSuggestions = useCallback(
+    (numSuggestions: number) => {
+      updateNumSuggestions(numSuggestions)
+    },
+    [updateNumSuggestions],
+  )
 
-    const handleToggleTonality = useCallback(
-      (enabled: boolean) => {
-        toggleTonality(enabled)
-      },
-      [toggleTonality],
-    )
+  const handleToggleTonality = useCallback(
+    (enabled: boolean) => {
+      toggleTonality(enabled)
+    },
+    [toggleTonality],
+  )
 
-    return (
-      <div className="flex flex-col border-t bg-background/95 backdrop-blur-sm shadow-md z-10 relative">
-        <AnimatePresence initial={false}>
-          {isSteeringExpanded && (
-            <motion.div
-              key="steering-controls"
-              initial={{ height: "auto", opacity: 1 }}
-              animate={{ height: "auto", opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0 }}
-              className="px-4 pb-2 overflow-hidden border-b border-border"
+  const handleGenerate = useCallback(() => {
+    handleGenerateNewSuggestions(settings)
+  }, [handleGenerateNewSuggestions, settings])
+
+  return (
+    <div className="flex flex-col border-t bg-background/95 backdrop-blur-sm shadow-md z-10 relative">
+      {isSteeringExpanded && (
+        <div className="px-4 pb-2 overflow-hidden border-b border-border">
+          <div className="pt-4 flex justify-between items-center">
+            <h2 className="text-base font-semibold">Interpreter</h2>
+            <button
+              onClick={() => setIsSteeringExpanded(false)}
+              className="flex items-center justify-center h-5 w-5 hover:bg-muted rounded-sm"
             >
-              <div className="pt-4 flex justify-between items-center">
-                <h2 className="text-base font-semibold">Interpreter</h2>
-                <button
-                  onClick={() => setIsSteeringExpanded(false)}
-                  className="flex items-center justify-center h-5 w-5 hover:bg-muted rounded-sm"
-                >
-                  <Cross2Icon className="h-3 w-3" />
-                </button>
-              </div>
-
-              <div className="space-y-6 pt-4 max-h-[60vh] overflow-y-auto pr-2">
-                <div className="pb-4 border-b border-border">
-                  <AuthorsSelector value={settings.authors} onChange={handleUpdateAuthors} />
-                </div>
+              <Cross2Icon className="h-3 w-3" />
+            </button>
+          </div>
 
-                <div className="pb-4 border-b border-border">
-                  <TonalityRadar
-                    value={settings.tonality}
-                    onChange={handleUpdateTonality}
-                    enabled={settings.tonalityEnabled}
-                    onToggle={handleToggleTonality}
-                  />
-                </div>
+          <div className="space-y-6 pt-4 max-h-[60vh] overflow-y-auto pr-2">
+            <div className="pb-4 border-b border-border">
+              <AuthorsSelector
+                value={settings.authors}
+                onChange={handleUpdateAuthors}
+                markdownContent={markdownContent}
+              />
+            </div>
 
-                <div className="pb-4 border-b border-border">
-                  <TemperatureSlider
-                    value={settings.temperature}
-                    onChange={handleUpdateTemperature}
-                  />
-                </div>
+            <div className="pb-4 border-b border-border">
+              <TonalityRadar
+                value={settings.tonality}
+                onChange={handleUpdateTonality}
+                enabled={settings.tonalityEnabled}
+                onToggle={handleToggleTonality}
+              />
+            </div>
 
-                <div>
-                  <SuggestionsSlider
-                    value={settings.numSuggestions}
-                    onChange={handleUpdateNumSuggestions}
-                  />
-                </div>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <div className="flex items-center justify-end gap-3 p-2">
-          <VaultButton
-            onClick={toggleSteeringPanel}
-            size="small"
-            color="yellow"
-            title="Interpreter Settings"
-            disabled={isNotesLoading}
-            className={cn(
-              isNotesLoading && "cursor-not-allowed opacity-50 hover:cursor-not-allowed",
-            )}
-          >
-            <MixerHorizontalIcon className="h-3 w-3" />
-          </VaultButton>
-
-          <VaultButton
-            onClick={() => handleGenerateNewSuggestions(settings)}
-            disabled={isNotesLoading}
-            color="none"
-            size="small"
-            className={cn(
-              "text-primary border border-accent-foreground/40",
-              !isNotesRecentlyGenerated && "button-shimmer-border",
-              isNotesLoading && "cursor-not-allowed opacity-50 hover:cursor-not-allowed",
-            )}
-            title="Generate Suggestions"
-          >
-            <ShadowInnerIcon className="w-3 h-3" />
-          </VaultButton>
+            <div className="pb-4 border-b border-border">
+              <TemperatureSlider value={settings.temperature} onChange={handleUpdateTemperature} />
+            </div>
+
+            <div>
+              <SuggestionsSlider
+                value={settings.numSuggestions}
+                onChange={handleUpdateNumSuggestions}
+              />
+            </div>
+          </div>
         </div>
-      </div>
-    )
-  },
-  // Include all props in equality check
-  (prevProps, nextProps) =>
-    prevProps.isNotesLoading === nextProps.isNotesLoading &&
-    prevProps.isNotesRecentlyGenerated === nextProps.isNotesRecentlyGenerated &&
-    prevProps.handleGenerateNewSuggestions === nextProps.handleGenerateNewSuggestions,
-)
+      )}
+      <DriversBarButtons
+        onToggleSteeringPanel={toggleSteeringPanel}
+        onGenerateNewSuggestions={handleGenerate}
+        isNotesLoading={isNotesLoading}
+        isNotesRecentlyGenerated={isNotesRecentlyGenerated}
+      />
+    </div>
+  )
+})
 
-export const NotesPanel = memo(function NotesPanel({
+// Create a memoized error display component
+const ErrorDisplay = memo(function ErrorDisplay({ error }: { error: string | null }) {
+  if (!error) return null
+
+  return (
+    <div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-md text-sm text-destructive mb-6">
+      {error}
+    </div>
+  )
+})
+
+const EmptyState = memo(function EmptyState({
   notes,
+  droppedNotes,
   isNotesLoading,
-  notesError,
-  currentlyGeneratingDateKey,
-  currentGenerationNotes,
+}: {
+  notes: Note[]
+  droppedNotes: Note[]
+  isNotesLoading: boolean
+}) {
+  if (isNotesLoading || notes.length !== 0) return null
+  return (
+    <div className="flex flex-col items-center justify-center h-32 text-sm text-muted-foreground p-4 pt-0">
+      <p className="mb-4">
+        {droppedNotes.length !== 0
+          ? "All notes are currently in the stack."
+          : "No notes found for this document"}
+      </p>
+    </div>
+  )
+})
+
+export const NotesPanel = memo(function NotesPanel({
   droppedNotes,
-  streamingReasoning,
-  reasoningComplete,
-  currentFile,
   vaultId,
-  currentReasoningId,
-  reasoningHistory,
+  fileId,
+  noteGroupsData,
+  markdownContent: initialMarkdownContent,
+  currentFileHandle: initialFileHandle,
+  dbFile: initialDbFile,
   handleNoteDropped,
   handleNoteRemoved,
-  handleCurrentGenerationNote,
-  isNotesRecentlyGenerated,
-  currentReasoningElapsedTime,
-  generateNewSuggestions,
-  noteGroupsData,
-  notesContainerRef,
-  streamingNotes,
-  scanAnimationComplete,
 }: NotesPanelProps) {
-  const memoizedNoteSkeletons = useMemo(() => <NoteCard variant="skeleton" />, [])
-
   // Get steering settings and fileId update function from context
-  const { settings, updateFileId } = useSteeringContext()
+  const { settings } = useSteeringContext()
+  const {
+    state: {
+      reasoningHistory,
+      streamingReasoning,
+      reasoningComplete,
+      currentReasoningId,
+      currentlyGeneratingDateKey,
+      currentGenerationNotes,
+      scanAnimationComplete,
+      isNotesLoading,
+      notesError,
+      lastNotesGeneratedTime,
+      notes,
+    },
+    dispatch,
+  } = useNotesContext()
+
+  // Local state for data that isn't in context yet
+  const [currentReasoningElapsedTime, setCurrentReasoningElapsedTime] = useState(0)
+  const [streamingSuggestionColors, setStreamingSuggestionColors] = useState<string[]>([])
+  const [streamingNotes, setStreamingNotes] = useState<StreamingNote[]>([])
+  const [markdownContent, setMarkdownContent] = useState<string>(initialMarkdownContent || "")
+  const [currentFileHandle, setCurrentFileHandle] = useState<FileSystemFileHandle | null>(
+    initialFileHandle || null,
+  )
+  const [dbFile, setDbFile] = useState<typeof schema.files.$inferSelect | null>(
+    initialDbFile || null,
+  )
+  const notesContainerRef = useRef<HTMLDivElement>(null)
 
   // Track settings changes with a ref to detect actual value changes
   const prevSettingsRef = useRef(settings)
-  const currentFileRef = useRef<string | null>(null)
 
-  // Add effect to properly track settings changes
+  const client = usePGlite()
+  const db = useMemo(() => drizzle({ client, schema }), [client])
+
+  const { addTask } = useEmbeddingTasks()
+
+  // When unmounting or when fileId changes, save any pending notes to DB
   useEffect(() => {
-    if (JSON.stringify(prevSettingsRef.current) !== JSON.stringify(settings)) {
-      prevSettingsRef.current = settings
+    return () => {
+      // Save current generation notes to DB when unmounting
+      if (currentGenerationNotes.length > 0 && currentlyGeneratingDateKey && fileId) {
+        console.debug(
+          `[NotesPanel] Saving ${currentGenerationNotes.length} current generation notes to DB on unmount`,
+        )
+
+        // We can't await in useEffect cleanup, so we use a fire-and-forget approach
+        // This is okay for cleanup operations
+        const saveNotes = async () => {
+          try {
+            // Find the file in database
+            let currentDbFile = dbFile
+
+            if (!currentDbFile) {
+              currentDbFile =
+                (await db.query.files.findFirst({
+                  where: (files, { and, eq }) =>
+                    and(eq(files.id, fileId), eq(files.vaultId, vaultId || "")),
+                })) || null
+            }
+
+            if (!currentDbFile) {
+              console.error("Failed to find file in database when saving notes on unmount")
+              return
+            }
+
+            // For each note, ensure it's saved to database if not already
+            for (const note of currentGenerationNotes) {
+              const existingNote = await db.query.notes.findFirst({
+                where: eq(schema.notes.id, note.id),
+              })
+
+              if (!existingNote) {
+                console.debug(`[NotesPanel] Saving note ${note.id} to DB on unmount`)
+
+                await db.insert(schema.notes).values({
+                  content: note.content,
+                  color: note.color,
+                  createdAt: note.createdAt,
+                  accessedAt: new Date(),
+                  dropped: note.dropped ?? false,
+                  fileId: currentDbFile.id,
+                  vaultId: note.vaultId || vaultId,
+                  reasoningId: note.reasoningId || undefined,
+                  steering: note.steering || undefined,
+                  embeddingStatus: "in_progress",
+                  embeddingTaskId: null,
+                })
+              }
+            }
+          } catch (error) {
+            console.error("Failed to save notes to database on unmount:", error)
+          }
+        }
+
+        saveNotes()
+      }
     }
-  }, [settings])
+  }, [currentGenerationNotes, currentlyGeneratingDateKey, fileId, vaultId, db, dbFile])
 
-  // Add effect to update fileId in steering context when it changes
+  // Update markdownContent, vault state, and dbFile with props
   useEffect(() => {
-    // Skip for non-persisted files
-    if (currentFile === "Untitled") {
-      updateFileId(null)
-      currentFileRef.current = null
-      return
+    if (initialMarkdownContent) {
+      setMarkdownContent(initialMarkdownContent)
+    }
+    if (initialFileHandle) {
+      setCurrentFileHandle(initialFileHandle)
     }
+    if (initialDbFile) {
+      setDbFile(initialDbFile)
+    }
+  }, [initialMarkdownContent, initialFileHandle, initialDbFile])
+
+  const fetchNewNotes = useCallback(
+    async (
+      content: string,
+      numSuggestions: number,
+      steeringOptions?: {
+        authors?: string[]
+        tonality?: Record<string, number>
+        temperature?: number
+      },
+    ): Promise<NewlyGeneratedNotes> => {
+      try {
+        const apiEndpoint = process.env.NEXT_PUBLIC_API_ENDPOINT || "http://localhost:8000"
+
+        const isAgentAvailable = await checkAgentAvailability()
+        if (!isAgentAvailable) {
+          throw new Error("Agent service is not available. Please try again later.")
+        }
+
+        // Check agent health to ensure it's functioning properly
+        const healthStatus = await checkAgentHealth()
+        if (!healthStatus.healthy) {
+          const unhealthyServices = healthStatus.services
+            .filter((service) => !service.healthy)
+            .map((service) => `${service.name} (${service.error || "Unknown error"})`)
+            .join(", ")
+
+          console.error("Service health check failed:", {
+            timestamp: healthStatus.timestamp,
+            overallHealth: healthStatus.healthy,
+            unhealthyServices,
+            allServices: healthStatus.services,
+          })
+          toast.error(`Services unavailable: ${unhealthyServices}`)
+        }
+
+        // Create a new reasoning ID for this generation
+        const reasoningId = createId()
+
+        // Reset states for new generation
+        dispatch({ type: "SET_STREAMING_REASONING", reasoning: "" })
+        dispatch({ type: "SET_REASONING_COMPLETE", complete: false })
+        setCurrentReasoningElapsedTime(0) // Reset elapsed time at the start
+        dispatch({ type: "SET_STREAMING_NOTES", streamingNotes: [] }) // Reset streaming notes
+        dispatch({ type: "SET_SCAN_ANIMATION_COMPLETE", complete: false }) // Reset scan animation state
+
+        // Set a current date key for the new notes group with 15-second interval
+        const now = new Date()
+        const seconds = now.getSeconds()
+        const interval = Math.floor(seconds / 15) * 15
+        const dateKey = `${now.toDateString()}-${now.getHours()}-${now.getMinutes()}-${interval}`
+        dispatch({ type: "SET_CURRENT_GENERATING_DATE_KEY", dateKey })
+
+        const max_tokens = 16384
+        const essay = md(content).content
+        const request: SuggestionRequest = {
+          essay,
+          num_suggestions: numSuggestions,
+          temperature: steeringOptions?.temperature ?? 0.6,
+          max_tokens,
+          ...(steeringOptions?.authors && { authors: steeringOptions.authors }),
+          ...(steeringOptions?.tonality && { tonality: steeringOptions.tonality }),
+          usage: true,
+        }
+
+        // Add dropped notes to the request if there are any
+        if (droppedNotes.length > 0) {
+          request.notes = droppedNotes.map((note) => ({
+            vault_id: note.vaultId,
+            file_id: note.fileId,
+            note_id: note.id,
+            content: note.content,
+          }))
+        }
+
+        // Start timing reasoning phase
+        const reasoningStartTime = Date.now()
+        let reasoningEndTime: number | null = null
+
+        // Create streaming request
+        let response: Response
+        try {
+          response = await fetch(`${apiEndpoint}/suggests`, {
+            method: "POST",
+            headers: { Accept: "text/event-stream", "Content-Type": "application/json" },
+            body: JSON.stringify(request),
+          })
+
+          if (!response.ok) {
+            const errorMsg = `Failed to fetch suggestions: ${response.statusText || "Unknown error"}`
+            toast.error(errorMsg)
+            throw new Error(errorMsg)
+          }
+
+          if (!response.body) {
+            const errorMsg = "Response body is empty"
+            toast.error(errorMsg)
+            throw new Error(errorMsg)
+          }
+        } catch (suggestError: any) {
+          const errorMsg = `Failed to get suggestions: ${suggestError.message || "Unknown error"}`
+          toast.error(errorMsg)
+          throw new Error(errorMsg)
+        }
+
+        const reader = response.body.getReader()
+        const decoder = new TextDecoder()
+
+        // We'll collect all suggestion JSON data here
+        let suggestionString = ""
+        let inReasoningPhase = true
+        let collectedReasoning = ""
+
+        // Initialize variables for streaming JSON parsing
+        const colors = Array(numSuggestions)
+          .fill(null)
+          .map(() => generatePastelColor())
+        setStreamingSuggestionColors(colors)
+
+        // Create empty streaming notes with unique IDs
+        const initialStreamingNotes = Array(numSuggestions)
+          .fill(null)
+          .map((_, index) => ({
+            id: createId(),
+            content: "",
+            color: colors[index] || generatePastelColor(),
+            isComplete: false,
+            isScanComplete: false,
+          }))
+        setStreamingNotes(initialStreamingNotes)
+
+        // Variables for tracking streaming JSON state
+        let currentNoteIndex = 0
+        let partialJSON = ""
+        let inJsonSuggestion = false
+        let currentSuggestion = ""
+        let isFirstNote = true
+
+        // Pattern variables that account for whitespace
+        const firstNoteStartPattern = '{"suggestions":\\s*\\[\\s*{"suggestion":\\s*"'
+        const subsequentNoteStartPattern = '\\s*{"suggestion":\\s*"'
+        const endPatternWithComma = '"\\s*}\\s*,'
+        const endPatternFinal = '"\\s*}\\s*]\\s*}'
+
+        // Process the stream
+        while (true) {
+          const { value, done } = await reader.read()
+          if (done) break
+
+          const chunk = decoder.decode(value, { stream: true })
+
+          // Process each line
+          for (const line of chunk.split("\n\n")) {
+            if (!line.trim()) continue
+
+            try {
+              // Assuming delta structure based on previous code
+              const delta = JSON.parse(line) as { reasoning?: string; suggestion?: string }
+
+              // Handle reasoning phase
+              if (delta.reasoning) {
+                collectedReasoning += delta.reasoning
+                dispatch({ type: "SET_STREAMING_REASONING", reasoning: collectedReasoning })
+              }
+
+              // Check for phase transition
+              if (delta.reasoning === "" && delta.suggestion !== "") {
+                // First time we see suggestion means reasoning is complete
+                if (inReasoningPhase) {
+                  // Record when reasoning phase ended
+                  if (!reasoningEndTime) {
+                    reasoningEndTime = Date.now()
+                    // Calculate and update elapsed time when reasoning ends
+                    const elapsedTime = Math.round((reasoningEndTime - reasoningStartTime) / 1000)
+                    setCurrentReasoningElapsedTime(elapsedTime)
+                  }
+                  dispatch({ type: "SET_REASONING_COMPLETE", complete: true })
+                  inReasoningPhase = false
+                }
+
+                // Handle each delta suggestion chunk for streaming JSON
+                // Ensure delta.suggestion is not null/undefined before adding
+                const suggestionChunk = delta.suggestion || ""
+                partialJSON += suggestionChunk
+
+                // First note has a different start pattern than subsequent ones
+                if (!inJsonSuggestion) {
+                  if (isFirstNote) {
+                    // Check for the first note start pattern
+                    const firstStartRegex = new RegExp(firstNoteStartPattern)
+                    const match = firstStartRegex.exec(partialJSON)
+
+                    if (match) {
+                      inJsonSuggestion = true
+                      const matchIndex = match.index + match[0].length
+                      currentSuggestion = partialJSON.substring(matchIndex)
+                      partialJSON = ""
+                      isFirstNote = false
+                    }
+                  } else {
+                    // Check for subsequent note start pattern
+                    const subsequentStartRegex = new RegExp(subsequentNoteStartPattern)
+                    const match = subsequentStartRegex.exec(partialJSON)
+
+                    if (match) {
+                      inJsonSuggestion = true
+                      const matchIndex = match.index + match[0].length
+                      currentSuggestion = partialJSON.substring(matchIndex)
+                      partialJSON = ""
+                    }
+                  }
+                }
+                // If we're inside a suggestion object, accumulate content
+                else if (inJsonSuggestion) {
+                  currentSuggestion += suggestionChunk // Use the checked suggestionChunk
+
+                  // For a better streaming experience, update the note's content with each delta
+                  setStreamingNotes((prevNotes) => {
+                    if (!prevNotes[currentNoteIndex]) return prevNotes
+
+                    // Create a new array to avoid mutating the previous state
+                    const updatedNotes = [...prevNotes]
+
+                    updatedNotes[currentNoteIndex] = {
+                      ...updatedNotes[currentNoteIndex],
+                      content: sanitizeStreamingContent(currentSuggestion),
+                    }
+
+                    return updatedNotes
+                  })
+
+                  // Check for end patterns - either with comma (more notes to come) or final closing pattern
+                  const endWithCommaRegex = new RegExp(endPatternWithComma)
+                  const endFinalRegex = new RegExp(endPatternFinal)
+
+                  const endWithCommaMatch = endWithCommaRegex.exec(currentSuggestion)
+                  const endFinalMatch = endFinalRegex.exec(currentSuggestion)
+
+                  // Process if we found either ending pattern
+                  if (endWithCommaMatch || endFinalMatch) {
+                    // Get the end index based on which pattern matched
+                    const match = endWithCommaMatch || endFinalMatch
+                    const endIndex = match!.index
+
+                    // Extract the suggestion content up to the end pattern
+                    let suggestionContent = currentSuggestion.substring(0, endIndex)
+
+                    // Update the streaming note with the current content
+                    setStreamingNotes((prevNotes) => {
+                      if (!prevNotes[currentNoteIndex]) return prevNotes
+
+                      // Create a new array to avoid mutating the previous state
+                      const updatedNotes = [...prevNotes]
+
+                      updatedNotes[currentNoteIndex] = {
+                        ...updatedNotes[currentNoteIndex],
+                        content: sanitizeStreamingContent(suggestionContent),
+                        isComplete:
+                          endFinalMatch !== null && currentNoteIndex === numSuggestions - 1,
+                      }
+
+                      return updatedNotes
+                    })
+
+                    // Reset suggestion tracking
+                    inJsonSuggestion = false
+
+                    // Important: Clear both variables to prevent flashing
+                    currentSuggestion = ""
+                    suggestionContent = ""
+                    partialJSON = ""
+
+                    // Move to next note if there's more to process
+                    if (endWithCommaMatch) {
+                      currentNoteIndex = Math.min(currentNoteIndex + 1, numSuggestions - 1)
+                    }
+                  }
+                }
+
+                // Collect suggestion data for final processing
+                suggestionString += suggestionChunk // Use the checked suggestionChunk
+              }
+            } catch (e) {
+              console.error("Error parsing line:", e)
+              // Clean up on error to avoid stuck partial content
+              partialJSON = ""
+              currentSuggestion = ""
+            }
+          }
+        }
+
+        // Ensure we mark reasoning as complete
+        if (inReasoningPhase) {
+          // If we never set the end time but are now complete, set it
+          if (!reasoningEndTime) {
+            reasoningEndTime = Date.now()
+            // Calculate and update elapsed time when reasoning ends
+            const elapsedTime = Math.round((reasoningEndTime - reasoningStartTime) / 1000)
+            setCurrentReasoningElapsedTime(elapsedTime)
+          }
+          dispatch({ type: "SET_REASONING_COMPLETE", complete: true })
+        }
+
+        // Mark all streaming notes as complete
+        setStreamingNotes((prevNotes) => {
+          const allComplete = prevNotes.map((note) => ({ ...note, isComplete: true }))
+          return allComplete
+        })
+
+        // Calculate elapsed time for reasoning
+        const reasoningElapsedTime = Math.round((reasoningEndTime! - reasoningStartTime) / 1000)
+        setCurrentReasoningElapsedTime(reasoningElapsedTime)
+
+        // Run scan animation after a small delay
+        const runScanAnimation = async () => {
+          const noteCount = initialStreamingNotes.length
+          let currentDelay = 100
+          for (let i = 0; i < noteCount; i++) {
+            setStreamingNotes((prevNotes) => {
+              // Important: Always work with the *latest* state inside the loop
+              const currentNotes = prevNotes
+              const updatedNotes = [...currentNotes]
+              if (updatedNotes[i]) {
+                updatedNotes[i] = {
+                  ...updatedNotes[i],
+                  isScanComplete: true,
+                }
+              }
+              return updatedNotes
+            })
+            // Gradually reduce the delay for a smooth acceleration effect
+            currentDelay = Math.max(10, currentDelay * 0.85)
+          }
+          // Set loading to false which will trigger showing the final notes
+          dispatch({ type: "SET_IS_NOTES_LOADING", loading: false })
+          dispatch({ type: "SET_SCAN_ANIMATION_COMPLETE", complete: true })
+        }
+
+        // Start the scan animation sequence
+        runScanAnimation()
+        dispatch({ type: "SET_CURRENT_REASONING_ID", reasoningId })
+
+        // Clean up
+        reader.releaseLock()
+
+        // Parse collected suggestions
+        let generatedNotes: GeneratedNote[] = []
+
+        if (suggestionString.trim()) {
+          try {
+            const suggestionData: SuggestionResponse = JSON.parse(suggestionString.trim())
+
+            if (suggestionData.suggestions && Array.isArray(suggestionData.suggestions)) {
+              generatedNotes = suggestionData.suggestions.map((suggestion) => ({
+                content: suggestion.suggestion,
+              }))
+            }
+          } catch (e) {
+            console.error("Error parsing suggestions:", e)
+            toast.error("Failed to parse suggestion data. Please report this issue to GitHub.")
+          }
+        }
 
-    // Find the file ID from notes array
-    if (notes.length > 0 && notes[0].fileId && currentFileRef.current !== notes[0].fileId) {
-      currentFileRef.current = notes[0].fileId
-      updateFileId(notes[0].fileId)
+        if (generatedNotes.length === 0) {
+          // Set error state when no suggestions could be generated
+          dispatch({
+            type: "SET_NOTES_ERROR",
+            error:
+              "Could not generate suggestions for this content. Please report this issue to GitHub.",
+          })
+          dispatch({ type: "SET_CURRENT_GENERATING_DATE_KEY", dateKey: null })
+        } else {
+          // Save the reasoning content to be associated with the notes later
+          const reasoningData = {
+            id: reasoningId,
+            content: collectedReasoning,
+            timestamp: new Date(),
+            noteIds: [], // Will be populated after creating notes
+            reasoningElapsedTime,
+            // Add steering parameters if they exist
+            authors: steeringOptions?.authors,
+            tonality: steeringOptions?.tonality,
+            temperature: steeringOptions?.temperature,
+            numSuggestions: numSuggestions,
+          }
+          dispatch({ type: "ADD_REASONING_HISTORY", reasoning: reasoningData })
+          dispatch({ type: "SET_NOTES_ERROR", error: null })
+        }
+
+        return {
+          generatedNotes,
+          reasoningId,
+          reasoningElapsedTime,
+          reasoningContent: collectedReasoning,
+        }
+      } catch (error: any) {
+        // Catch specific error type
+        const errorMsg = `Notes not available: ${error.message || "Unknown error"}`
+        dispatch({ type: "SET_NOTES_ERROR", error: errorMsg })
+        dispatch({ type: "SET_REASONING_COMPLETE", complete: true })
+        dispatch({ type: "SET_CURRENT_GENERATING_DATE_KEY", dateKey: null })
+
+        // Ensure we return a rejected promise
+        return Promise.reject(error)
+      }
+    },
+    [droppedNotes, dispatch],
+  )
+
+  // Check if notes were recently generated (within the last 5 minutes)
+  const isNotesRecentlyGenerated = useMemo(() => {
+    if (!lastNotesGeneratedTime) return false
+    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000) // 5 minutes in milliseconds
+    return lastNotesGeneratedTime > fiveMinutesAgo
+  }, [lastNotesGeneratedTime])
+
+  const generateNewSuggestions = useCallback(
+    async (steeringSettings: SteeringSettings) => {
+      if (!vaultId || !fileId || !markdownContent) {
+        return
+      }
+
+      // Move current generation notes to history by adding them to notes array
+      if (currentGenerationNotes && currentGenerationNotes.length > 0) {
+        console.debug(
+          `[NotesPanel] Moving ${currentGenerationNotes.length} current generation notes to history`,
+        )
+
+        // Filter out any notes that might already exist in the array
+        const notesToAdd = currentGenerationNotes.filter(
+          (note) => !notes.some((existingNote: Note) => existingNote.id === note.id),
+        )
+
+        if (notesToAdd.length > 0) {
+          console.debug(`[NotesPanel] Adding ${notesToAdd.length} notes to main notes array`)
+          dispatch({ type: "ADD_NOTES", notes: notesToAdd })
+        }
+      }
+
+      // Clear current generation notes before starting new generation
+      dispatch({ type: "SET_CURRENT_GENERATION_NOTES", notes: [] })
+      dispatch({ type: "SET_NOTES_ERROR", error: null })
+      // Update loading state
+      dispatch({ type: "SET_IS_NOTES_LOADING", loading: true })
+      dispatch({ type: "SET_STREAMING_REASONING", reasoning: "" })
+      dispatch({ type: "SET_REASONING_COMPLETE", complete: false })
+      setStreamingSuggestionColors([])
+      dispatch({ type: "SET_SCAN_ANIMATION_COMPLETE", complete: false }) // Reset scan animation state
+      dispatch({ type: "SET_LAST_NOTES_GENERATED_TIME", time: new Date() })
+      const now = new Date()
+      const seconds = now.getSeconds()
+      const interval = Math.floor(seconds / 15) * 15
+      const dateKey = `${now.toDateString()}-${now.getHours()}-${now.getMinutes()}-${interval}`
+      dispatch({ type: "SET_CURRENT_GENERATING_DATE_KEY", dateKey })
+
+      try {
+        // First, find or create the file in the database to ensure proper ID reference
+        let currentDbFile = dbFile
+
+        if (!currentDbFile) {
+          // Only query the database if we don't have a dbFile from props
+          currentDbFile =
+            (await db.query.files.findFirst({
+              where: (files, { and, eq }) => and(eq(files.id, fileId), eq(files.vaultId, vaultId)),
+            })) || null
+
+          console.debug(`[NotesPanel] Found file in DB: ${currentDbFile?.id || "not found"}`)
+        } else {
+          console.debug(`[NotesPanel] Using existing file from props: ${currentDbFile.id}`)
+        }
+
+        if (!currentDbFile) {
+          if (!currentFileHandle) {
+            console.error("[NotesPanel] No file handle available to create DB entry")
+            throw new Error("No file handle available")
+          }
+
+          console.debug(
+            `[NotesPanel] File not found in DB, creating new file entry for ${currentFileHandle.name}`,
+          )
+          // Insert file into database
+          await db.insert(schema.files).values({
+            id: fileId,
+            name: currentFileHandle.name,
+            extension: "md",
+            vaultId: vaultId,
+            lastModified: new Date(),
+            embeddingStatus: "in_progress",
+          })
+
+          // Re-fetch the file to get its ID
+          currentDbFile =
+            (await db.query.files.findFirst({
+              where: (files, { and, eq }) => and(eq(files.id, fileId), eq(files.vaultId, vaultId)),
+            })) || null
+
+          if (!currentDbFile) {
+            throw new Error("Failed to create file in database")
+          }
+          console.debug(`[NotesPanel] Created new file in DB with ID: ${currentDbFile.id}`)
+
+          // Update local state with the new file
+          setDbFile(currentDbFile)
+        }
+
+        try {
+          // Get authors from database if in pending status
+          const authorRecord = await db.query.authors.findFirst({
+            where: (authors, { and, eq }) =>
+              and(eq(authors.fileId, fileId), eq(authors.authorStatus, "in_progress")),
+          })
+
+          // Use authors from DB if available and in pending status
+          const effectiveAuthors =
+            authorRecord && authorRecord.recommendedAuthors.length > 0
+              ? authorRecord.recommendedAuthors
+              : steeringSettings.authors
+
+          console.debug(`[NotesPanel] Using authors: ${effectiveAuthors.join(", ")}`)
+
+          // Now that we have the file, generate the suggestions
+          console.debug(`[NotesPanel] Fetching new notes from API`)
+          const { generatedNotes, reasoningId, reasoningElapsedTime, reasoningContent } =
+            await fetchNewNotes(markdownContent, steeringSettings.numSuggestions, {
+              authors: effectiveAuthors,
+              tonality: steeringSettings.tonalityEnabled ? steeringSettings.tonality : undefined,
+              temperature: steeringSettings.temperature,
+            })
+
+          console.debug(
+            `[NotesPanel] Received ${generatedNotes.length} generated notes with reasoning ID: ${reasoningId}`,
+          )
+
+          const newNoteIds: string[] = []
+          const newNotes = generatedNotes.map((note, index) => {
+            const id = createId()
+            newNoteIds.push(id)
+            return {
+              id,
+              content: note.content,
+              color: streamingSuggestionColors[index] || generatePastelColor(),
+              fileId: currentDbFile!.id, // Use the actual DB file ID here
+              vaultId,
+              isInEditor: false,
+              createdAt: new Date(),
+              lastModified: new Date(),
+              reasoningId: reasoningId,
+              steering: {
+                authors: steeringSettings.authors,
+                tonality: steeringSettings.tonalityEnabled ? steeringSettings.tonality : undefined,
+                temperature: steeringSettings.temperature,
+                numSuggestions: steeringSettings.numSuggestions,
+              },
+              embeddingStatus: "in_progress",
+              embeddingTaskId: null,
+            } as Note
+          })
+
+          // Prepare the reasoning record to be saved
+          const reasoningRecordToSave = {
+            id: reasoningId,
+            fileId: currentDbFile!.id,
+            vaultId,
+            content: reasoningContent,
+            noteIds: newNoteIds,
+            createdAt: now,
+            accessedAt: now,
+            duration: reasoningElapsedTime,
+            steering: {
+              authors: steeringSettings.authors,
+              tonality: steeringSettings.tonalityEnabled ? steeringSettings.tonality : undefined,
+              temperature: steeringSettings.temperature,
+              numSuggestions: steeringSettings.numSuggestions,
+            },
+          }
+
+          // Only save if the file is not null and we have notes to save
+          if (fileId && newNotes.length > 0) {
+            try {
+              console.debug(`[NotesPanel] Saving reasoning with ID ${reasoningId} to DB`)
+              // Use Promise.all to save reasoning and notes concurrently
+              await Promise.all([
+                // Ensure reasoningRecordToSave matches the schema expectations
+                db.insert(schema.reasonings).values(reasoningRecordToSave),
+                ...newNotes.map((note) => {
+                  console.debug(`[NotesPanel] Saving note ${note.id} to DB`)
+                  return db.insert(schema.notes).values({
+                    content: note.content,
+                    color: note.color,
+                    createdAt: note.createdAt,
+                    accessedAt: new Date(),
+                    dropped: note.dropped ?? false,
+                    fileId: currentDbFile!.id,
+                    vaultId: note.vaultId || vaultId || "",
+                    reasoningId: note.reasoningId || undefined,
+                    steering: note.steering || undefined,
+                    embeddingStatus: "in_progress",
+                    embeddingTaskId: null,
+                  })
+                }),
+              ])
+
+              console.debug(`[NotesPanel] Saving ${newNotes.length} new notes to DB`)
+              console.debug(`[NotesPanel] Notes and reasoning saved successfully.`)
+
+              // **Update UI state AFTER successful DB operations**
+              dispatch({
+                type: "ADD_REASONING_HISTORY",
+                reasoning: {
+                  ...reasoningRecordToSave,
+                  timestamp: now,
+                  reasoningElapsedTime: reasoningRecordToSave.duration,
+                },
+              })
+
+              dispatch({ type: "ADD_NOTES", notes: newNotes })
+
+              // Set current generation notes for UI
+              dispatch({ type: "SET_CURRENT_GENERATION_NOTES", notes: newNotes })
+
+              console.debug(`[NotesPanel] Processing embeddings for ${newNotes.length} new notes`)
+              // Submit each note for embedding individually and track task IDs for polling
+              for (const note of newNotes) {
+                console.debug(`[NotesPanel] Submitting note ${note.id} for embedding`)
+                const result = await submitNoteForEmbedding(db, note)
+
+                // If successful and we have a task ID, add it for polling
+                if (result) {
+                  // Wait a small amount of time to ensure DB updates are complete
+                  await new Promise((resolve) => setTimeout(resolve, 100))
+
+                  // Then get the updated note with task ID
+                  const updatedNote = await db.query.notes.findFirst({
+                    where: eq(schema.notes.id, note.id),
+                  })
+
+                  if (updatedNote?.embeddingTaskId) {
+                    addTask(updatedNote.embeddingTaskId)
+                    console.debug(
+                      `[NotesPanel] Added embedding task ${updatedNote.embeddingTaskId} for note ${note.id}`,
+                    )
+                  } else {
+                    console.debug(
+                      `[NotesPanel] Note ${note.id} has no embedding task ID after submission`,
+                    )
+                  }
+                } else {
+                  console.debug(`[NotesPanel] Failed to submit note ${note.id} for embedding`)
+                }
+              }
+
+              // Log the notes after saving to verify they were saved correctly
+              await logNotesForFile(
+                db,
+                currentDbFile!.id,
+                vaultId,
+                "After generating new suggestions",
+              )
+            } catch (dbError) {
+              console.error("Failed to save notes to database:", dbError)
+              // Still show notes in UI even if DB fails
+              console.debug(`[NotesPanel] Showing notes in UI despite DB save failure`)
+              dispatch({ type: "SET_CURRENT_GENERATION_NOTES", notes: newNotes })
+              dispatch({ type: "ADD_NOTES", notes: newNotes })
+            }
+          } else {
+            // For unsaved files, just display in UI without saving to DB
+            console.debug(`[NotesPanel] Displaying ephemeral notes for unsaved file`)
+            // Update UI immediately for ephemeral notes
+            dispatch({
+              type: "ADD_REASONING_HISTORY",
+              reasoning: {
+                ...reasoningRecordToSave,
+                timestamp: now,
+                reasoningElapsedTime: reasoningRecordToSave.duration,
+              },
+            })
+            dispatch({ type: "SET_CURRENT_GENERATION_NOTES", notes: newNotes })
+            dispatch({ type: "ADD_NOTES", notes: newNotes })
+          }
+        } catch (error: any) {
+          const errorMessage =
+            error.message || "Notes not available for this generation, try again later"
+          dispatch({ type: "SET_NOTES_ERROR", error: errorMessage })
+          dispatch({ type: "SET_CURRENT_GENERATING_DATE_KEY", dateKey: null })
+          console.error(`[NotesPanel] Failed to generate notes: ${errorMessage}`, error)
+        } finally {
+          dispatch({ type: "SET_IS_NOTES_LOADING", loading: false })
+        }
+      } catch (error) {
+        console.error("[NotesPanel] Error in generateNewSuggestions:", error)
+      }
+    },
+    [
+      notes,
+      vaultId,
+      fileId,
+      fetchNewNotes,
+      markdownContent,
+      db,
+      currentGenerationNotes,
+      addTask,
+      streamingSuggestionColors,
+      currentFileHandle,
+      dbFile,
+      dispatch,
+    ],
+  )
+
+  // Add effect to properly track settings changes
+  useEffect(() => {
+    if (JSON.stringify(prevSettingsRef.current) !== JSON.stringify(settings)) {
+      prevSettingsRef.current = settings
     }
-  }, [currentFile, notes, updateFileId])
+  }, [settings])
 
   const [{ isOver }, drop] = useDrop(
     () => ({
@@ -331,43 +1215,21 @@ export const NotesPanel = memo(function NotesPanel({
     [drop],
   )
 
-  const itemContent = useCallback(
-    (_index: number, group: [string, Note[]]) => {
-      // Add a safety check for when group is undefined or not properly formed
-      if (!group || !Array.isArray(group) || group.length < 2) {
-        return memoizedNoteSkeletons
+  const handleCurrentGenerationNote = useCallback(
+    (note: Note) => {
+      // Remove from current generation notes
+      if (currentGenerationNotes) {
+        const updatedNotes = currentGenerationNotes.filter((n) => n.id !== note.id)
+        dispatch({ type: "SET_CURRENT_GENERATION_NOTES", notes: updatedNotes })
       }
 
-      const [dateStr, dateNotes] = group
-
-      // Only handle historical notes now
-      const dateReasoning = reasoningHistory.find((r) =>
-        r.noteIds.some((id) => dateNotes.some((note: Note) => note.id === id)),
-      )
-
-      return (
-        <div className="mb-6">
-          <NoteGroup
-            dateStr={dateStr}
-            dateNotes={dateNotes}
-            reasoning={dateReasoning}
-            currentFile={currentFile}
-            vaultId={vaultId}
-            handleNoteDropped={handleNoteDropped}
-            onNoteRemoved={handleNoteRemoved}
-            isGenerating={false}
-          />
-        </div>
-      )
+      // Ensure the note is in the main notes array if it's not already
+      if (!notes.some((existingNote) => existingNote.id === note.id)) {
+        // Add note to the array
+        dispatch({ type: "ADD_NOTES", notes: [note] })
+      }
     },
-    [
-      memoizedNoteSkeletons,
-      currentFile,
-      vaultId,
-      handleNoteDropped,
-      handleNoteRemoved,
-      reasoningHistory,
-    ],
+    [dispatch, currentGenerationNotes, notes],
   )
 
   return (
@@ -378,138 +1240,113 @@ export const NotesPanel = memo(function NotesPanel({
         isOver && "border-red-200 border rounded-e-md rounded-n-md",
       )}
     >
-      <div className="flex-1 overflow-auto scrollbar-hidden px-2 pt-2 gap-4">
-        {!isNotesLoading && notes.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-32 text-sm text-muted-foreground p-4">
-            <p className="mb-4">
-              {droppedNotes.length !== 0
-                ? "All notes are currently in the stack."
-                : "No notes found for this document"}
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-6 h-full">
-            {notesError ? (
-              <div className="px-4 py-3 bg-destructive/10 border border-destructive/20 rounded-md text-sm text-destructive">
-                {notesError}
-              </div>
-            ) : (
-              <div
-                className={cn("h-full flex flex-col overflow-auto scrollbar-hidden scroll-smooth")}
-                ref={notesContainerRef}
-              >
-                {/* Only show current generation section if there are active notes in it */}
-                {currentlyGeneratingDateKey &&
-                  (isNotesLoading ||
-                    (!scanAnimationComplete && reasoningComplete) ||
-                    (scanAnimationComplete &&
-                      currentGenerationNotes.length > 0 &&
-                      !droppedNotes.some((d) => d.id === currentGenerationNotes[0]?.id))) && (
-                    <div className="space-y-4 flex-shrink-0 mb-6">
-                      <div className="mb-2 space-y-4 bg-background">
-                        <DateDisplay
-                          dateStr={currentlyGeneratingDateKey!}
-                        />
-
-                        <ReasoningPanel
-                          reasoning={streamingReasoning}
-                          isStreaming={isNotesLoading && !reasoningComplete}
-                          isComplete={reasoningComplete}
-                          currentFile={currentFile}
-                          vaultspace-y-4
-                          px-2Id={vaultId}
-                          reasoningId={currentReasoningId}
-                          shouldExpand={isNotesLoading || currentGenerationNotes.length > 0}
-                          elapsedTime={currentReasoningElapsedTime}
-                        />
+      <div className="flex-1 overflow-auto scrollbar-hidden px-2 pt-2 gap-4 min-h-0">
+        <EmptyState notes={notes} droppedNotes={droppedNotes} isNotesLoading={isNotesLoading} />
+        <div className="space-y-6 h-full">
+          <div
+            className={cn("h-full flex flex-col overflow-auto scrollbar-hidden scroll-smooth")}
+            ref={notesContainerRef}
+          >
+            <ErrorDisplay error={notesError} />
+            {/* Only show current generation section if there are active notes in it */}
+            {!notesError &&
+              currentlyGeneratingDateKey &&
+              (isNotesLoading ||
+                (!scanAnimationComplete && reasoningComplete) ||
+                (scanAnimationComplete &&
+                  currentGenerationNotes.length > 0 &&
+                  !droppedNotes.some((d) => d.id === currentGenerationNotes[0]?.id))) && (
+                <div className="space-y-4 flex-shrink-0 mb-6">
+                  <div className="mb-2 space-y-4 bg-background">
+                    <DateDisplay dateStr={currentlyGeneratingDateKey!} />
+
+                    <ReasoningPanel
+                      reasoning={streamingReasoning}
+                      isStreaming={isNotesLoading && !reasoningComplete}
+                      isComplete={reasoningComplete}
+                      vaultId={vaultId}
+                      reasoningId={currentReasoningId}
+                      shouldExpand={isNotesLoading || currentGenerationNotes.length > 0}
+                      elapsedTime={currentReasoningElapsedTime}
+                    />
+                  </div>
+
+                  {/* Show streaming notes during generation phase */}
+                  {reasoningComplete &&
+                    !scanAnimationComplete &&
+                    streamingNotes &&
+                    streamingNotes.length > 0 && (
+                      <div className="grid gap-4">
+                        {streamingNotes.map((note) => (
+                          <NoteCard
+                            key={note.id}
+                            color={generatePastelColor()}
+                            className={cn(
+                              "w-full h-full",
+                              !note.isComplete && "will-change-contents",
+                            )}
+                            note={{
+                              id: note.id,
+                              content: note.content,
+                              color: generatePastelColor(),
+                              fileId,
+                              vaultId: vaultId,
+                              createdAt: new Date(),
+                              embeddingStatus: "in_progress" as const,
+                              embeddingTaskId: null,
+                            }}
+                            isGenerating={!note.isComplete}
+                            isStreaming={!note.isComplete}
+                            isScanComplete={note.isScanComplete}
+                          />
+                        ))}
                       </div>
+                    )}
 
-                      {/* Show streaming notes during generation phase */}
-                      {reasoningComplete &&
-                        !scanAnimationComplete &&
-                        streamingNotes &&
-                        streamingNotes.length > 0 && (
-                          <div className="grid gap-4">
-                            {streamingNotes.map((note) => (
-                              <NoteCard
-                                key={note.id}
-                                color={generatePastelColor()}
-                                className={cn(
-                                  "w-full h-full",
-                                  !note.isComplete && "will-change-contents",
-                                )}
-                                note={{
-                                  id: note.id,
-                                  content: note.content,
-                                  color: generatePastelColor(),
-                                  fileId: currentFile,
-                                  vaultId: vaultId || "",
-                                  createdAt: new Date(),
-                                  embeddingStatus: null,
-                                  embeddingTaskId: null,
-                                }}
-                                isGenerating={!note.isComplete}
-                                isStreaming={!note.isComplete}
-                                isScanComplete={note.isScanComplete}
-                              />
-                            ))}
-                          </div>
-                        )}
-
-                      {/* Show actual generated notes when complete */}
-                      {!isNotesLoading &&
-                        scanAnimationComplete &&
-                        currentGenerationNotes.length > 0 &&
-                        !notesError && (
-                          <AnimatePresence mode="wait" initial={false}>
-                            <motion.div
-                              className="space-y-4 px-2"
-                              initial={{ opacity: 1 }}
-                              animate={{ opacity: 1 }}
-                              transition={{ duration: 0 }}
-                            >
-                              {currentGenerationNotes.map((note) => (
-                                <DraggableNoteCard
-                                  key={note.id}
-                                  note={note}
-                                  handleNoteDropped={handleNoteDropped}
-                                  onNoteRemoved={handleNoteRemoved}
-                                  onCurrentGenerationNote={handleCurrentGenerationNote}
-                                  isGenerating={false}
-                                />
-                              ))}
-                            </motion.div>
-                          </AnimatePresence>
-                        )}
-                    </div>
-                  )}
-                <div className="flex-1 min-h-0">
-                  <Virtuoso
-                    key={`note-list-${currentFile}-${noteGroupsData.length}`}
-                    style={{ height: "100%", width: "100%" }}
-                    totalCount={noteGroupsData.length}
-                    data={noteGroupsData}
-                    overscan={5}
-                    components={{ ScrollSeekPlaceholder }}
-                    itemContent={itemContent}
-                    initialItemCount={1}
-                    increaseViewportBy={{ top: 100, bottom: 100 }}
-                    scrollSeekConfiguration={{
-                      enter: (velocity) => Math.abs(velocity) > 1000,
-                      exit: (velocity) => Math.abs(velocity) < 100,
-                    }}
-                    customScrollParent={notesContainerRef.current!}
-                  />
+                  {/* Show actual generated notes when complete */}
+                  {!isNotesLoading &&
+                    scanAnimationComplete &&
+                    currentGenerationNotes.length > 0 &&
+                    !notesError && (
+                      <AnimatePresence mode="wait" initial={false}>
+                        <motion.div
+                          className="space-y-4 px-2"
+                          initial={{ opacity: 1 }}
+                          animate={{ opacity: 1 }}
+                          transition={{ duration: 0 }}
+                        >
+                          {currentGenerationNotes.map((note) => (
+                            <DraggableNoteCard
+                              key={note.id}
+                              note={note}
+                              handleNoteDropped={handleNoteDropped}
+                              onNoteRemoved={handleNoteRemoved}
+                              onCurrentGenerationNote={handleCurrentGenerationNote}
+                              isGenerating={false}
+                            />
+                          ))}
+                        </motion.div>
+                      </AnimatePresence>
+                    )}
                 </div>
-              </div>
-            )}
+              )}
+            <HistoricalNotes
+              fileId={fileId}
+              reasoningHistory={reasoningHistory}
+              handleNoteDropped={handleNoteDropped}
+              handleNoteRemoved={handleNoteRemoved}
+              noteGroupsData={noteGroupsData}
+              vaultId={vaultId}
+              notesContainerRef={notesContainerRef}
+            />
           </div>
-        )}
+        </div>
       </div>
       <DriversBar
         handleGenerateNewSuggestions={generateNewSuggestions}
         isNotesLoading={isNotesLoading}
         isNotesRecentlyGenerated={isNotesRecentlyGenerated}
+        markdownContent={markdownContent}
       />
     </div>
   )
diff --git a/packages/morph/components/parser/codemirror/index.ts b/packages/morph/components/parser/codemirror/index.ts
index 32ac21e4..cb453d6a 100644
--- a/packages/morph/components/parser/codemirror/index.ts
+++ b/packages/morph/components/parser/codemirror/index.ts
@@ -1,4 +1,5 @@
 import frontmatter from "./frontmatter"
-import { syntaxHighlighting, theme } from "./themes"
 import { search } from "./search"
+import { syntaxHighlighting, theme } from "./themes"
+
 export { frontmatter, syntaxHighlighting, theme, search }
diff --git a/packages/morph/components/parser/codemirror/search.tsx b/packages/morph/components/parser/codemirror/search.tsx
index 55890630..304d8a09 100644
--- a/packages/morph/components/parser/codemirror/search.tsx
+++ b/packages/morph/components/parser/codemirror/search.tsx
@@ -55,7 +55,7 @@ export function search() {
 
         // Dispatch effect to close panel
         view.dispatch({
-          effects: [toggleSearchPanel.of(false)]
+          effects: [toggleSearchPanel.of(false)],
         })
 
         // Focus the editor
@@ -114,7 +114,9 @@ export function search() {
       run: (view: EditorView) => {
         // If panel is already open, focus it
         if (panelOpen) {
-          const input = view.dom.querySelector(".cm-search-panel-container input") as HTMLInputElement
+          const input = view.dom.querySelector(
+            ".cm-search-panel-container input",
+          ) as HTMLInputElement
           if (input) input.focus()
           return true
         }
diff --git a/packages/morph/components/rails.tsx b/packages/morph/components/rails.tsx
index 033e5bd2..785eba8b 100644
--- a/packages/morph/components/rails.tsx
+++ b/packages/morph/components/rails.tsx
@@ -18,6 +18,7 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { useRouter } from "next/navigation"
 import * as React from "react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { toast } from "sonner"
 
 import { setFile } from "@/components/markdown-inline"
 import { VaultButton } from "@/components/ui/button"
@@ -34,7 +35,6 @@ import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 
 import usePersistedSettings from "@/hooks/use-persisted-settings"
-import { useToast } from "@/hooks/use-toast"
 
 import { FileSystemTreeNode, Vault } from "@/db/interfaces"
 
@@ -152,7 +152,6 @@ export const FileTreeNode = memo(
     node,
     nodePath = "",
   }: Omit<FileTreeNodeProps, "onFileSelect" | "isExpanded"> & { nodePath?: string }) {
-    const { toast } = useToast()
     const { onFileSelect, isExpanded } = React.useContext(FileTreeContext)
     const { expandedFolders, setExpandedFolder } = React.useContext(ExpandedFoldersContext)
 
@@ -205,13 +204,9 @@ export const FileTreeNode = memo(
         }, 1000)
       } catch (error) {
         console.error("Error opening file:", error)
-        toast({
-          title: "Error opening file",
-          description: "Could not open the file with the system's default application",
-          variant: "destructive",
-        })
+        toast.error("Could not open the file with the system's default application")
       }
-    }, [node, toast])
+    }, [node])
 
     const MemoizedSidebarFolderItem = useMemo(
       () => (
@@ -727,7 +722,6 @@ export default memo(function Rails({
   onContentUpdate,
   setIsSettingsOpen,
 }: RailsProps) {
-  const { toast } = useToast()
   const { toggleSidebar, state } = useSidebar()
   const isExpanded = state === "expanded"
   const router = useRouter()
@@ -776,7 +770,7 @@ export default memo(function Rails({
     async (node: FileSystemTreeNode) => {
       if (!node || node.kind !== "file" || node.extension !== "md") {
         if (node && node.kind === "file" && node.extension !== "md") {
-          toast({ title: "File picker", description: "Can only open markdown files" })
+          toast.warning("Can only open markdown files")
         }
         return
       }
@@ -811,7 +805,7 @@ export default memo(function Rails({
         console.error("Error reading file:", error)
       }
     },
-    [vault, editorViewRef, onContentUpdate, onFileSelect, toast],
+    [vault, editorViewRef, onContentUpdate, onFileSelect],
   )
 
   // Memoize the motion components to prevent unnecessary recalculations
@@ -821,14 +815,14 @@ export default memo(function Rails({
         width: isExpanded ? "16rem" : "3.05rem",
       },
       transition: {
+        duration: 0,
         type: "tween",
-        duration: shouldAnimate ? 0.2 : 0.01, // Almost instant when not visible or reduced motion preferred
         ease: "easeOut",
         layoutDependency: false,
         willChange: "width",
       },
     }),
-    [isExpanded, shouldAnimate],
+    [isExpanded],
   )
 
   // Memoize the vault icons buttons to prevent re-renders when toggling keyboard shortcuts
diff --git a/packages/morph/components/reasoning-panel.tsx b/packages/morph/components/reasoning-panel.tsx
index 52618252..f339329a 100644
--- a/packages/morph/components/reasoning-panel.tsx
+++ b/packages/morph/components/reasoning-panel.tsx
@@ -2,7 +2,6 @@ import { cn } from "@/lib/utils"
 import { ChevronRightIcon, TransformIcon } from "@radix-ui/react-icons"
 import { eq } from "drizzle-orm"
 import { drizzle } from "drizzle-orm/pglite"
-import { AnimatePresence, motion } from "motion/react"
 import * as React from "react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 
@@ -10,48 +9,63 @@ import { usePGlite } from "@/context/db"
 
 import * as schema from "@/db/schema"
 
-// Triple dot loading animation component
-const LoadingDots = memo(function LoadingDots() {
-  const containerVariants = {
-    animate: {
-      transition: {
-        staggerChildren: 0.12,
-      },
-    },
-  }
-  const dotVariants = {
-    initial: {
-      scaleY: 1,
-      opacity: 0.5,
-    },
-    animate: {
-      scaleY: [1, 2.2, 1],
-      opacity: [0.5, 1, 0.5],
-      transition: {
-        duration: 0.7,
-        repeat: Infinity,
-        repeatType: "loop" as const,
-        ease: "easeInOut",
-      },
-    },
+// Memoized header component to prevent redundant renders
+const ReasoningHeader = memo(function ReasoningHeader({
+  isExpanded,
+  isHovering,
+  isStreaming,
+  isComplete,
+  elapsedTime,
+  toggleExpand,
+}: {
+  isExpanded: boolean
+  isHovering: boolean
+  isStreaming: boolean
+  isComplete: boolean
+  elapsedTime: number
+  toggleExpand: () => void
+}) {
+  // Format the duration nicely
+  const formattedDuration = (seconds: number) => {
+    if (seconds < 60) {
+      return `${seconds} second${seconds !== 1 ? "s" : ""}`
+    } else {
+      const minutes = Math.floor(seconds / 60)
+      const remainingSeconds = seconds % 60
+      return `${minutes} minute${minutes !== 1 ? "s" : ""} ${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`
+    }
   }
 
   return (
-    <motion.div
-      className="flex items-center space-x-1.5 ml-1"
-      variants={containerVariants}
-      initial="initial"
-      animate="animate"
+    <div
+      className={cn(
+        "flex items-center justify-between text-xs p-1",
+        isHovering ? "text-foreground" : "text-muted-foreground",
+      )}
     >
-      {[0, 1, 2].map((dot) => (
-        <motion.span
-          key={dot}
-          className="w-[2px] h-[3px] bg-current text-primary/70 inline-block"
-          style={{ transformOrigin: "center" }}
-          variants={dotVariants}
-        />
-      ))}
-    </motion.div>
+      <button
+        onClick={toggleExpand}
+        className="flex items-center gap-1 transition-colors text-left"
+      >
+        <div
+          className={cn(
+            "cursor-pointer transition-transform duration-200",
+            isExpanded && "rotate-90",
+          )}
+        >
+          {isHovering ? (
+            <ChevronRightIcon className="h-3 w-3" />
+          ) : (
+            <TransformIcon className="h-3 w-3" />
+          )}
+        </div>
+        {isComplete ? (
+          <span>Finished scheming for {formattedDuration(elapsedTime)}</span>
+        ) : (
+          <span className={isStreaming ? "animate-text-shimmer" : ""}>Scheming</span>
+        )}
+      </button>
+    </div>
   )
 })
 
@@ -61,7 +75,6 @@ interface ReasoningPanelProps {
   isStreaming: boolean
   isComplete: boolean
   reasoningId: string
-  currentFile?: string
   vaultId?: string
   shouldExpand: boolean
   elapsedTime?: number
@@ -74,7 +87,6 @@ export const ReasoningPanel = memo(function ReasoningPanel({
   isStreaming,
   isComplete,
   reasoningId,
-  currentFile,
   vaultId,
   shouldExpand = false,
   elapsedTime = 0,
@@ -112,20 +124,15 @@ export const ReasoningPanel = memo(function ReasoningPanel({
     }
   }, [isStreaming])
 
-  // Save reasoning to database when complete - batch updates to reduce database writes
+  // Save reasoning to database when complete, not during streaming
   useEffect(() => {
-    if (isStreaming && reasoning && currentFile && vaultId) {
-      // Debounce database updates to reduce writes
-      const debouncedUpdate = setTimeout(() => {
-        db.update(schema.reasonings)
-          .set({ content: reasoning })
-          .where(eq(schema.reasonings.id, reasoningId))
-          .execute()
-      }, 500)
-
-      return () => clearTimeout(debouncedUpdate)
+    if (!isStreaming && isComplete && reasoning && vaultId) {
+      db.update(schema.reasonings)
+        .set({ content: reasoning })
+        .where(eq(schema.reasonings.id, reasoningId))
+        .execute()
     }
-  }, [isStreaming, reasoning, currentFile, vaultId, reasoningId, db])
+  }, [isStreaming, isComplete, reasoning, vaultId, reasoningId, db])
 
   // Auto-scroll to bottom when content changes and panel is expanded
   useEffect(() => {
@@ -158,17 +165,6 @@ export const ReasoningPanel = memo(function ReasoningPanel({
     onExpandChange?.(newExpandState)
   }, [isExpanded, onExpandChange])
 
-  // Format the duration nicely
-  const formattedDuration = (seconds: number) => {
-    if (seconds < 60) {
-      return `${seconds} second${seconds !== 1 ? "s" : ""}`
-    } else {
-      const minutes = Math.floor(seconds / 60)
-      const remainingSeconds = seconds % 60
-      return `${minutes} minute${minutes !== 1 ? "s" : ""} ${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`
-    }
-  }
-
   // Virtualized text rendering for performance
   const renderReasoningText = useMemo(() => {
     if (!reasoning) return null
@@ -196,55 +192,28 @@ export const ReasoningPanel = memo(function ReasoningPanel({
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      <div
-        className={cn(
-          "flex items-center justify-between text-xs p-1",
-          isExpanded && "shadow-lg transition-shadow duration-300",
-          isHovering ? "text-foreground" : "text-muted-foreground",
-        )}
-      >
-        <button
-          onClick={toggleExpand}
-          className="flex items-center gap-1 transition-colors text-left"
-        >
-          <motion.div
-            animate={{ rotate: isExpanded ? 90 : 0 }}
-            transition={{ duration: 0.2 }}
-            className="cursor-pointer"
-          >
-            {isHovering ? (
-              <ChevronRightIcon className="h-3 w-3" />
-            ) : (
-              <TransformIcon className="h-3 w-3" />
-            )}
-          </motion.div>
-          {isComplete ? (
-            <span>Finished scheming for {formattedDuration(elapsedTime)}</span>
-          ) : (
-            <span className={isStreaming ? "animate-text-shimmer" : ""}>Scheming</span>
+      <ReasoningHeader
+        isExpanded={isExpanded}
+        isHovering={isHovering}
+        isStreaming={isStreaming}
+        isComplete={isComplete}
+        elapsedTime={elapsedTime}
+        toggleExpand={toggleExpand}
+      />
+
+      {/* TODO: make the whole current notes panel scrollable */}
+      {isExpanded && reasoning && (
+        <div
+          ref={reasoningRef}
+          className={cn(
+            "whitespace-pre-wrap ml-2 p-2 border-l-2 border-muted overflow-y-auto scrollbar-hidden max-h-168 transition-all duration-500 ease-in-out",
+            "text-xs text-muted-foreground",
+            isExpanded ? "opacity-100 h-auto" : "opacity-0 h-0",
           )}
-        </button>
-
-        <div className="flex items-center">{isStreaming && <LoadingDots />}</div>
-      </div>
-
-      <AnimatePresence>
-        {isExpanded && reasoning && (
-          <motion.div
-            ref={reasoningRef}
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.5, ease: "easeInOut" }}
-            className={cn(
-              "whitespace-pre-wrap ml-2 p-2 border-l-2 border-muted overflow-y-auto scrollbar-hidden max-h-72 transition-colors duration-200 will-change-transform",
-              "text-xs text-muted-foreground",
-            )}
-          >
-            <span>{renderReasoningText}</span>
-          </motion.div>
-        )}
-      </AnimatePresence>
+        >
+          <span>{renderReasoningText}</span>
+        </div>
+      )}
     </div>
   )
 })
diff --git a/packages/morph/components/search-command.tsx b/packages/morph/components/search-command.tsx
index 6f47d789..323cf042 100644
--- a/packages/morph/components/search-command.tsx
+++ b/packages/morph/components/search-command.tsx
@@ -2,6 +2,7 @@ import { highlight, slugifyFilePath, toJsx } from "@/lib"
 import { CommandGroup } from "cmdk"
 import { fromHtmlIsomorphic } from "hast-util-from-html-isomorphic"
 import { useCallback, useEffect, useMemo, useState } from "react"
+import { toast } from "sonner"
 
 import {
   CommandDialog,
@@ -14,8 +15,6 @@ import {
 import { type UserDocument, useSearch } from "@/context/search"
 import { type FlattenedFileMapping } from "@/context/vault"
 
-import { useToast } from "@/hooks/use-toast"
-
 import type { FileSystemTreeNode, Vault } from "@/db/interfaces"
 
 type SearchCommandProps = {
@@ -31,7 +30,6 @@ export function SearchCommand({ maps, vault, onFileSelect }: SearchCommandProps)
   const [results, setResults] = useState<Array<UserDocument>>([])
   const [searchKey, setSearchKey] = useState(0)
   const { isIndexReady, searchDocuments } = useSearch()
-  const { toast } = useToast()
 
   // Debounce the query input to reduce the number of search operations
   useEffect(() => {
@@ -111,7 +109,7 @@ export function SearchCommand({ maps, vault, onFileSelect }: SearchCommandProps)
       } catch (error) {
         if (isMounted) {
           console.error("Search error:", error)
-          toast({ title: "Cmd-K", description: "Failed to search query" })
+          toast.error("Failed to search query")
           setResults([])
         }
       }
@@ -122,7 +120,7 @@ export function SearchCommand({ maps, vault, onFileSelect }: SearchCommandProps)
     return () => {
       isMounted = false
     }
-  }, [debouncedQuery, open, searchDocuments, maps, toast, isIndexReady])
+  }, [debouncedQuery, open, searchDocuments, maps, isIndexReady])
 
   // Update the search key when the dialog opens
   useEffect(() => {
diff --git a/packages/morph/components/steering-panel.tsx b/packages/morph/components/steering-panel.tsx
index b90ce5d8..de66d0ec 100644
--- a/packages/morph/components/steering-panel.tsx
+++ b/packages/morph/components/steering-panel.tsx
@@ -1,21 +1,66 @@
 "use client"
 
 import { cn } from "@/lib"
-import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons"
+import {
+  submitContentForAuthors,
+  useProcessPendingAuthor,
+  useRecommendedAuthors,
+} from "@/services/authors"
+import { CheckIcon, Cross2Icon, MagicWandIcon, PlusIcon } from "@radix-ui/react-icons"
+import { drizzle } from "drizzle-orm/pglite"
 import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
 
+import { md } from "@/components/parser"
 import { Input } from "@/components/ui/input"
 
+import { useAuthorTasks } from "@/context/authors"
+import { usePGlite } from "@/context/db"
+import { useNotesContext } from "@/context/notes"
+
+import * as schema from "@/db/schema"
+
 interface AuthorsSelectorProps {
   value: string[]
   onChange: (authors: string[]) => void
   className?: string
+  markdownContent: string
 }
 
-export function AuthorsSelector({ value, onChange, className }: AuthorsSelectorProps) {
+export function AuthorsSelector({
+  value,
+  onChange,
+  className,
+  markdownContent,
+}: AuthorsSelectorProps) {
   const [authors, setAuthors] = useState<string[]>(value)
   const [newAuthor, setNewAuthor] = useState<string>("")
   const [isAdding, setIsAdding] = useState(false)
+  const [isInferring, setIsInferring] = useState(false)
+  const [isPending, setIsPending] = useState(false)
+
+  // Get current content and fileId from notes context
+  const {
+    state: { currentFileId },
+  } = useNotesContext()
+  const { addTask, pendingTaskIds } = useAuthorTasks()
+
+  // Get DB client
+  const client = usePGlite()
+  const db = drizzle({ client, schema })
+
+  // Load recommended authors from the database
+  const { data: recommendedAuthors } = useRecommendedAuthors(currentFileId)
+
+  // Process pending authors function
+  const processPendingAuthor = useProcessPendingAuthor(db)
+
+  // Check if we should stop inferring when pending tasks change
+  useEffect(() => {
+    if (isInferring && pendingTaskIds.length === 0) {
+      setIsInferring(false)
+    }
+  }, [pendingTaskIds, isInferring])
 
   // Update local state when context changes
   useEffect(() => {
@@ -25,8 +70,67 @@ export function AuthorsSelector({ value, onChange, className }: AuthorsSelectorP
     }
   }, [value, authors])
 
-  // Debug log local state changes
-  useEffect(() => {}, [authors])
+  // When recommended authors are loaded, update the authors list if it's empty
+  useEffect(() => {
+    if (
+      recommendedAuthors?.authors &&
+      recommendedAuthors.authors.length > 0 &&
+      authors.length === 0
+    ) {
+      // Only update if we don't already have authors
+      const newAuthors = [...recommendedAuthors.authors]
+      setAuthors(newAuthors)
+      onChange(newAuthors)
+    }
+  }, [recommendedAuthors, authors.length, onChange])
+
+  // When isInferring changes to false after being true, get the latest recommended authors
+  const wasInferring = useRef(false)
+
+  useEffect(() => {
+    if (wasInferring.current && !isInferring) {
+      // Refresh recommended authors after inference completes
+      if (recommendedAuthors?.authors && recommendedAuthors.authors.length > 0) {
+        const newAuthors = [...recommendedAuthors.authors]
+        setAuthors(newAuthors)
+        onChange(newAuthors)
+        toast.success("Updated authors based on document content")
+      }
+    }
+    wasInferring.current = isInferring
+  }, [isInferring, recommendedAuthors, onChange])
+
+  // Inference handler
+  const handleInferAuthors = useCallback(async () => {
+    // We need both the current file ID and document content
+    if (!currentFileId) {
+      toast.error("Please save the file first before inferring authors")
+      return
+    }
+
+    try {
+      setIsInferring(true)
+      toast.info("Analyzing document to infer authors...")
+
+      // Clean the content using the md parser
+      const cleanedContent = md(markdownContent).content
+      // Submit the content for author inference
+      const taskId = await submitContentForAuthors(db, currentFileId, cleanedContent)
+
+      if (taskId) {
+        // Add the task to the queue
+        addTask(taskId, currentFileId)
+        toast.success("Authors are being inferred. This may take a moment.")
+      } else {
+        toast.info("Authors have already been inferred for this document")
+        setIsInferring(false)
+      }
+    } catch (error) {
+      console.error("Error inferring authors:", error)
+      toast.error("Failed to infer authors from content")
+      setIsInferring(false)
+    }
+  }, [currentFileId, db, addTask, markdownContent])
 
   const handleAddAuthor = useCallback(() => {
     if (!newAuthor.trim()) return
@@ -64,6 +168,24 @@ export function AuthorsSelector({ value, onChange, className }: AuthorsSelectorP
     [authors, onChange],
   )
 
+  // Handle saving pending authors
+  const handleSavePendingAuthors = useCallback(async () => {
+    if (!currentFileId || authors.length === 0) {
+      return
+    }
+
+    setIsPending(true)
+    try {
+      await processPendingAuthor(currentFileId, { authors })
+      toast.success("Saved pending authors")
+    } catch (error) {
+      console.error("Error saving pending authors:", error)
+      toast.error("Failed to save pending authors")
+    } finally {
+      setIsPending(false)
+    }
+  }, [currentFileId, authors, processPendingAuthor])
+
   const handleKeyPress = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === "Enter") {
@@ -77,16 +199,45 @@ export function AuthorsSelector({ value, onChange, className }: AuthorsSelectorP
     <div className={cn("space-y-2", className)}>
       <div className="flex items-center justify-between">
         <label className="text-sm font-medium text-foreground">Authors</label>
-        <button
-          type="button"
-          className="text-xs text-muted-foreground hover:text-foreground"
-          onClick={() => setIsAdding(true)}
-        >
-          <PlusIcon className="h-3 w-3" />
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 hover:cursor-pointer"
+            onClick={handleInferAuthors}
+            disabled={isInferring || isPending}
+            title="Auto-infer authors from document"
+          >
+            <MagicWandIcon className={cn("h-3 w-3", isInferring && "animate-pulse")} />
+            {isInferring && <span className="text-xs">Inferring...</span>}
+          </button>
+          <button
+            type="button"
+            className={cn(
+              "text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 hover:cursor-pointer",
+              (isInferring || isPending) && "opacity-50 cursor-not-allowed",
+            )}
+            onClick={handleSavePendingAuthors}
+            disabled={isInferring || isPending}
+            title="Save as pending authors"
+          >
+            <CheckIcon className={cn("h-3 w-3", isPending && "animate-pulse")} />
+            {isPending && <span className="text-xs">Saving...</span>}
+          </button>
+          <button
+            type="button"
+            className={cn(
+              "text-xs text-muted-foreground hover:text-foreground  hover:cursor-pointer",
+              (isInferring || isPending) && "opacity-50 cursor-not-allowed",
+            )}
+            onClick={() => setIsAdding(true)}
+            disabled={isInferring || isPending}
+          >
+            <PlusIcon className="h-3 w-3" />
+          </button>
+        </div>
       </div>
 
-      {isAdding && (
+      {isAdding && !isInferring && !isPending && (
         <div className="flex items-center gap-2">
           <Input
             className="h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
@@ -111,13 +262,14 @@ export function AuthorsSelector({ value, onChange, className }: AuthorsSelectorP
         {authors.map((author, index) => (
           <div
             key={index}
-            className="flex items-center gap-1 rounded-full bg-muted px-3 py-1 text-xs"
+            className="flex items-center gap-1 rounded-full bg-muted px-3 py-1 text-xs cursor-pointer"
           >
             <span>{author}</span>
             <button
               type="button"
               onClick={() => handleRemoveAuthor(index)}
-              className="hover:text-primary"
+              className={cn("hover:text-primary", isInferring && "opacity-50 cursor-not-allowed")}
+              disabled={isInferring}
             >
               <Cross2Icon className="h-3 w-3" />
             </button>
diff --git a/packages/morph/components/ui/sonner.tsx b/packages/morph/components/ui/sonner.tsx
new file mode 100644
index 00000000..92f390d0
--- /dev/null
+++ b/packages/morph/components/ui/sonner.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/packages/morph/components/ui/toast.tsx b/packages/morph/components/ui/toast.tsx
deleted file mode 100644
index a280462c..00000000
--- a/packages/morph/components/ui/toast.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Cross1Icon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <Cross1Icon className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
diff --git a/packages/morph/components/ui/toaster.tsx b/packages/morph/components/ui/toaster.tsx
deleted file mode 100644
index 171beb46..00000000
--- a/packages/morph/components/ui/toaster.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client"
-
-import { useToast } from "@/hooks/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
diff --git a/packages/morph/context/authors.tsx b/packages/morph/context/authors.tsx
index 7faf9eab..d8446aeb 100644
--- a/packages/morph/context/authors.tsx
+++ b/packages/morph/context/authors.tsx
@@ -22,14 +22,9 @@ const initialAuthorTasksState: AuthorTasksState = {
 }
 
 const AuthorTasksStateContext = createContext<AuthorTasksState | undefined>(undefined)
-const AuthorTasksDispatchContext = createContext<Dispatch<AuthorTasksAction> | undefined>(
-  undefined
-)
+const AuthorTasksDispatchContext = createContext<Dispatch<AuthorTasksAction> | undefined>(undefined)
 
-function authorTasksReducer(
-  state: AuthorTasksState,
-  action: AuthorTasksAction,
-): AuthorTasksState {
+function authorTasksReducer(state: AuthorTasksState, action: AuthorTasksAction): AuthorTasksState {
   switch (action.type) {
     case "ADD_TASK": {
       // Only add the task if it's not already in the list
diff --git a/packages/morph/context/file-restoration.tsx b/packages/morph/context/file-restoration.tsx
index f4d84102..3e32bdb2 100644
--- a/packages/morph/context/file-restoration.tsx
+++ b/packages/morph/context/file-restoration.tsx
@@ -3,7 +3,7 @@ import { createContext, useContext, useState } from "react"
 interface RestoredFileData {
   file: File
   fileHandle: FileSystemFileHandle
-  fileName: string
+  fileId: string
   content: string
   handleId: string
 }
diff --git a/packages/morph/context/notes.tsx b/packages/morph/context/notes.tsx
new file mode 100644
index 00000000..7b6d6ba7
--- /dev/null
+++ b/packages/morph/context/notes.tsx
@@ -0,0 +1,471 @@
+import { generatePastelColor } from "@/lib/notes"
+import { submitNoteForEmbedding } from "@/services/notes"
+import { and, eq } from "drizzle-orm"
+import { drizzle } from "drizzle-orm/pglite"
+import React, { createContext, useCallback, useContext, useEffect, useReducer } from "react"
+
+import { usePGlite } from "@/context/db"
+import { useEmbeddingTasks } from "@/context/embedding"
+
+import type { Note, ReasoningHistory, StreamingNote } from "@/db/interfaces"
+import * as schema from "@/db/schema"
+
+// Define the action types for the notes reducer
+export type NotesAction =
+  | { type: "SET_NOTES"; notes: Note[] }
+  | { type: "ADD_NOTES"; notes: Note[] }
+  | { type: "REMOVE_NOTE"; noteId: string }
+  | { type: "SET_DROPPED_NOTES"; droppedNotes: Note[] }
+  | { type: "ADD_DROPPED_NOTE"; note: Note }
+  | { type: "REMOVE_DROPPED_NOTE"; noteId: string }
+  | { type: "CLEAR_NOTES" }
+  | { type: "SET_CURRENT_FILE_ID"; fileId: string | null }
+  | { type: "SET_CURRENT_VAULT_ID"; vaultId: string | null }
+  | { type: "SET_REASONING_HISTORY"; reasoningHistory: ReasoningHistory[] }
+  | { type: "ADD_REASONING_HISTORY"; reasoning: ReasoningHistory }
+  | { type: "SET_CURRENT_REASONING_ID"; reasoningId: string }
+  | { type: "SET_CURRENT_GENERATING_DATE_KEY"; dateKey: string | null }
+  | { type: "SET_STREAMING_NOTES"; streamingNotes: StreamingNote[] }
+  | { type: "SET_STREAMING_REASONING"; reasoning: string }
+  | { type: "SET_CURRENT_GENERATION_NOTES"; notes: Note[] }
+  | { type: "SET_REASONING_COMPLETE"; complete: boolean }
+  | { type: "SET_SCAN_ANIMATION_COMPLETE"; complete: boolean }
+  | { type: "SET_IS_NOTES_LOADING"; loading: boolean }
+  | { type: "SET_NOTES_ERROR"; error: string | null }
+  | { type: "SET_LAST_NOTES_GENERATED_TIME"; time: Date | null }
+  | { type: "SET_DB_FILE"; dbFile: typeof schema.files.$inferSelect | null }
+  | { type: "FORCE_REFRESH" }
+
+// Define the state interface for the notes reducer
+export interface NotesState {
+  notes: Note[]
+  droppedNotes: Note[]
+  currentFileId: string | null
+  currentVaultId: string | null
+  reasoningHistory: ReasoningHistory[]
+  currentlyGeneratingDateKey: string | null
+  streamingNotes: StreamingNote[]
+  streamingReasoning: string
+  currentGenerationNotes: Note[]
+  currentReasoningId: string
+  reasoningComplete: boolean
+  scanAnimationComplete: boolean
+  isNotesLoading: boolean
+  notesError: string | null
+  lastNotesGeneratedTime: Date | null
+  dbFile: typeof schema.files.$inferSelect | null
+}
+
+// Initial state for the reducer
+export const initialNotesState: NotesState = {
+  notes: [],
+  droppedNotes: [],
+  currentFileId: null,
+  currentVaultId: null,
+  reasoningHistory: [],
+  currentlyGeneratingDateKey: null,
+  streamingNotes: [],
+  streamingReasoning: "",
+  currentGenerationNotes: [],
+  currentReasoningId: "",
+  reasoningComplete: false,
+  scanAnimationComplete: false,
+  isNotesLoading: false,
+  notesError: null,
+  lastNotesGeneratedTime: null,
+  dbFile: null,
+}
+
+// Define the notes reducer function
+export function notesReducer(state: NotesState, action: NotesAction): NotesState {
+  switch (action.type) {
+    case "SET_NOTES":
+      return {
+        ...state,
+        notes: action.notes,
+      }
+    case "ADD_NOTES":
+      // Avoid duplicates by checking IDs
+      const newNotes = action.notes.filter(
+        (note) => !state.notes.some((existingNote) => existingNote.id === note.id),
+      )
+      return {
+        ...state,
+        notes: [...newNotes, ...state.notes].sort(
+          (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        ),
+      }
+    case "REMOVE_NOTE":
+      return {
+        ...state,
+        notes: state.notes.filter((note) => note.id !== action.noteId),
+      }
+    case "SET_DROPPED_NOTES":
+      return {
+        ...state,
+        droppedNotes: action.droppedNotes,
+      }
+    case "ADD_DROPPED_NOTE":
+      // Avoid duplicates
+      if (state.droppedNotes.some((note) => note.id === action.note.id)) {
+        return state
+      }
+      return {
+        ...state,
+        droppedNotes: [...state.droppedNotes, action.note],
+      }
+    case "REMOVE_DROPPED_NOTE":
+      return {
+        ...state,
+        droppedNotes: state.droppedNotes.filter((note) => note.id !== action.noteId),
+      }
+    case "CLEAR_NOTES":
+      return {
+        ...state,
+        notes: [],
+        droppedNotes: [],
+        reasoningHistory: [],
+        currentlyGeneratingDateKey: null,
+        streamingNotes: [],
+        streamingReasoning: "",
+        currentGenerationNotes: [],
+        currentReasoningId: "",
+        reasoningComplete: false,
+        scanAnimationComplete: false,
+        isNotesLoading: false,
+        notesError: null,
+      }
+    case "SET_CURRENT_FILE_ID":
+      return {
+        ...state,
+        currentFileId: action.fileId,
+      }
+    case "SET_CURRENT_REASONING_ID":
+      return {
+        ...state,
+        currentReasoningId: action.reasoningId,
+      }
+    case "SET_CURRENT_VAULT_ID":
+      return {
+        ...state,
+        currentVaultId: action.vaultId,
+      }
+    case "SET_REASONING_HISTORY":
+      return {
+        ...state,
+        reasoningHistory: action.reasoningHistory,
+      }
+    case "ADD_REASONING_HISTORY":
+      return {
+        ...state,
+        reasoningHistory: [...state.reasoningHistory, action.reasoning],
+      }
+    case "SET_CURRENT_GENERATING_DATE_KEY":
+      return {
+        ...state,
+        currentlyGeneratingDateKey: action.dateKey,
+      }
+    case "SET_STREAMING_NOTES":
+      return {
+        ...state,
+        streamingNotes: action.streamingNotes,
+      }
+    case "SET_STREAMING_REASONING":
+      return {
+        ...state,
+        streamingReasoning: action.reasoning,
+      }
+    case "SET_CURRENT_GENERATION_NOTES":
+      return {
+        ...state,
+        currentGenerationNotes: action.notes,
+      }
+    case "SET_REASONING_COMPLETE":
+      return {
+        ...state,
+        reasoningComplete: action.complete,
+      }
+    case "SET_SCAN_ANIMATION_COMPLETE":
+      return {
+        ...state,
+        scanAnimationComplete: action.complete,
+      }
+    case "SET_IS_NOTES_LOADING":
+      return {
+        ...state,
+        isNotesLoading: action.loading,
+      }
+    case "SET_NOTES_ERROR":
+      return {
+        ...state,
+        notesError: action.error,
+      }
+    case "SET_LAST_NOTES_GENERATED_TIME":
+      return {
+        ...state,
+        lastNotesGeneratedTime: action.time,
+      }
+    case "SET_DB_FILE":
+      return {
+        ...state,
+        dbFile: action.dbFile,
+      }
+    default:
+      return state
+  }
+}
+
+// Create the context
+interface NotesContextType {
+  state: NotesState
+  dispatch: React.Dispatch<NotesAction>
+  handleNoteDropped: (note: Note) => Promise<void>
+  handleNoteRemoved: (noteId: string) => void
+  loadFileMetadata: (fileId: string) => Promise<void>
+  updateDbFile: (fileId: string | null) => Promise<typeof schema.files.$inferSelect | null>
+}
+
+const NotesContext = createContext<NotesContextType | undefined>(undefined)
+
+// Create the provider component
+export function NotesProvider({ children }: { children: React.ReactNode }) {
+  const [state, dispatch] = useReducer(notesReducer, initialNotesState)
+  const client = usePGlite()
+  const db = drizzle({ client, schema })
+  const { addTask } = useEmbeddingTasks()
+
+  // Helper function to update the database file information
+  const updateDbFile = useCallback(
+    async (fileId: string | null) => {
+      if (!fileId || !state.currentVaultId) {
+        dispatch({ type: "SET_DB_FILE", dbFile: null })
+        return null
+      }
+
+      try {
+        const file = await db.query.files.findFirst({
+          where: (files, { and, eq }) =>
+            and(eq(files.id, fileId), eq(files.vaultId, state.currentVaultId!)),
+        })
+
+        dispatch({ type: "SET_DB_FILE", dbFile: file || null })
+        return file || null
+      } catch (error) {
+        console.error("Error fetching file from database:", error)
+        return null
+      }
+    },
+    [db, state.currentVaultId],
+  )
+
+  // Load file metadata (notes and reasoning history)
+  const loadFileMetadata = useCallback(
+    async (fileId: string) => {
+      if (!state.currentVaultId) return
+      console.debug(`[Notes Debug] Starting to load metadata for file ${fileId}`)
+
+      try {
+        // First get or update the DB file
+        const dbFile = state.dbFile || (await updateDbFile(fileId))
+        if (!dbFile) return
+
+        try {
+          // Query all notes for this file
+          const fileNotes = await db
+            .select()
+            .from(schema.notes)
+            .where(
+              and(
+                eq(schema.notes.fileId, dbFile.id),
+                eq(schema.notes.vaultId, state.currentVaultId),
+              ),
+            )
+
+          console.debug(
+            `[Notes Debug] Retrieved ${fileNotes?.length || 0} notes from DB for file ${fileId}`,
+          )
+
+          if (fileNotes && fileNotes.length > 0) {
+            // Separate notes into regular and dropped notes
+            const regularNotes = fileNotes.filter((note) => !note.dropped)
+            const droppedNotesList = fileNotes.filter((note) => note.dropped)
+
+            console.debug(
+              `[Notes Debug] Regular notes: ${regularNotes.length}, Dropped notes: ${droppedNotesList.length}`,
+            )
+
+            // Prepare notes for the UI
+            const uiReadyRegularNotes = regularNotes.map((note) => ({
+              ...note,
+              color: note.color || generatePastelColor(),
+              lastModified: new Date(note.accessedAt),
+            }))
+
+            const uiReadyDroppedNotes = droppedNotesList.map((note) => ({
+              ...note,
+              color: note.color || generatePastelColor(),
+              lastModified: new Date(note.accessedAt),
+            }))
+
+            // Update state with the notes
+            dispatch({ type: "SET_NOTES", notes: uiReadyRegularNotes })
+            dispatch({ type: "SET_DROPPED_NOTES", droppedNotes: uiReadyDroppedNotes })
+
+            // Load reasoning history for this file
+            const reasoningRecords = await db.query.reasonings.findMany({
+              where: (reasoning, { and, eq }) =>
+                and(eq(reasoning.fileId, dbFile.id), eq(reasoning.vaultId, state.currentVaultId!)),
+            })
+
+            if (reasoningRecords && reasoningRecords.length > 0) {
+              const formattedReasoningHistory: ReasoningHistory[] = reasoningRecords.map(
+                (record) => ({
+                  id: record.id,
+                  content: record.content,
+                  timestamp: record.createdAt,
+                  noteIds: record.noteIds as string[],
+                  reasoningElapsedTime: record.duration,
+                  authors: record.steering?.authors,
+                  tonality: record.steering?.tonality,
+                  temperature: record.steering?.temperature,
+                  numSuggestions: record.steering?.numSuggestions,
+                }),
+              )
+
+              dispatch({
+                type: "SET_REASONING_HISTORY",
+                reasoningHistory: formattedReasoningHistory,
+              })
+            }
+          }
+        } catch (error) {
+          console.error("Error fetching notes for file:", error)
+        }
+      } catch (dbError) {
+        console.error("Error with database operations:", dbError)
+      }
+    },
+    [db, state.currentVaultId, state.dbFile, updateDbFile],
+  )
+
+  // Handle note being dropped (moved to the dropped notes stack)
+  const handleNoteDropped = useCallback(
+    async (note: Note) => {
+      if (!state.currentFileId || !state.currentVaultId) return
+      console.debug(`[NotesContext] Handling note drop for note ${note.id}`)
+
+      // Ensure note has a color if it doesn't already
+      const droppedNote: Note = {
+        ...note,
+        dropped: true,
+        accessedAt: new Date(),
+      }
+
+      // Update droppedNotes optimistically
+      dispatch({ type: "ADD_DROPPED_NOTE", note: droppedNote })
+
+      // Find the file in the database to get its ID
+      try {
+        // First, find the file in the database
+        const dbFile = state.dbFile || (await updateDbFile(state.currentFileId))
+
+        if (!dbFile) {
+          console.error("Failed to find file in database when dropping note")
+          return
+        }
+
+        console.debug(`[Notes Debug] Updating note ${note.id} in DB to mark as dropped`)
+
+        // Save to database - update the note's dropped flag
+        await db
+          .update(schema.notes)
+          .set({
+            dropped: true,
+            accessedAt: droppedNote.accessedAt!,
+            ...(droppedNote.embeddingStatus !== "success" && { embeddingStatus: "in_progress" }),
+          })
+          .where(eq(schema.notes.id, droppedNote.id))
+
+        console.debug(`[Notes Debug] Successfully updated note ${note.id} as dropped in DB`)
+      } catch (error) {
+        console.error("Failed to update note dropped status:", error)
+      }
+    },
+    [db, state.currentFileId, state.currentVaultId, state.dbFile, updateDbFile],
+  )
+
+  // Handle note being removed
+  const handleNoteRemoved = useCallback((noteId: string) => {
+    dispatch({ type: "REMOVE_NOTE", noteId })
+  }, [])
+
+  // Set current file and vault IDs, and clear notes when they change
+  useEffect(() => {
+    if (!state.currentFileId || !state.currentVaultId) {
+      // Clear notes when file/vault is unset
+      if (state.notes.length > 0 || state.droppedNotes.length > 0) {
+        dispatch({ type: "CLEAR_NOTES" })
+      }
+    }
+  }, [state.currentFileId, state.currentVaultId, state.notes.length, state.droppedNotes.length])
+
+  // Process any notes with in_progress embedding status when the component mounts
+  useEffect(() => {
+    const processInProgressEmbeddings = async () => {
+      try {
+        const notesNeedingEmbedding = await db.query.notes.findMany({
+          where: eq(schema.notes.embeddingStatus, "in_progress"),
+        })
+
+        if (notesNeedingEmbedding.length > 0) {
+          console.debug(
+            `[Notes Debug] Found ${notesNeedingEmbedding.length} notes needing embedding`,
+          )
+
+          for (const note of notesNeedingEmbedding) {
+            const result = await submitNoteForEmbedding(db, note)
+
+            if (result && note.embeddingTaskId) {
+              addTask(note.embeddingTaskId)
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error processing in-progress embeddings:", error)
+      }
+    }
+
+    processInProgressEmbeddings()
+  }, [db, addTask])
+
+  return (
+    <NotesContext.Provider
+      value={{
+        state,
+        dispatch,
+        handleNoteDropped,
+        handleNoteRemoved,
+        loadFileMetadata,
+        updateDbFile,
+      }}
+    >
+      {children}
+    </NotesContext.Provider>
+  )
+}
+
+// Create a custom hook to use the notes context
+export function useNotesContext() {
+  const context = useContext(NotesContext)
+  if (context === undefined) {
+    throw new Error("useNotesContext must be used within a NotesProvider")
+  }
+  return context
+}
+
+// Helper type for note interfaces
+export interface NotesInterface {
+  Note: typeof schema.notes.$inferSelect
+  StreamingNote: StreamingNote
+  ReasoningHistory: ReasoningHistory
+}
diff --git a/packages/morph/context/providers.tsx b/packages/morph/context/providers.tsx
index 87182497..0d5470f7 100644
--- a/packages/morph/context/providers.tsx
+++ b/packages/morph/context/providers.tsx
@@ -1,22 +1,23 @@
 "use client"
 
-import { applyPgLiteMigrations, initializeDb } from "@/db"
+import { applyMigrations, initialize } from "@/db"
 import migrations from "@/generated/migrations.json"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { AnimatePresence, motion } from "motion/react"
 import type React from "react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import PixelatedLoading from "@/components/landing/pixelated-loading"
-import { TooltipProvider } from "@/components/ui/tooltip"
 
+import { AuthorTasksProvider } from "@/context/authors"
 import { MorphPgLite, PGliteProvider } from "@/context/db"
 import { EmbeddingProvider } from "@/context/embedding"
 import { FileRestorationProvider, useRestoredFile } from "@/context/file-restoration"
+import { NotesProvider } from "@/context/notes"
 import { ThemeProvider } from "@/context/theme"
 import { VaultProvider } from "@/context/vault"
 import { verifyHandle } from "@/context/vault-reducer"
-import { AuthorTasksProvider } from "@/context/authors"
 
 import useFsHandles from "@/hooks/use-fs-handles"
 import { SettingsProvider } from "@/hooks/use-persisted-settings"
@@ -57,9 +58,9 @@ async function restoreLastFile(vaultId: string, getHandle: any) {
     return {
       file,
       fileHandle,
-      fileName: file.name,
       content: await file.text(),
       handleId: lastFileInfo.handleId,
+      fileId: lastFileInfo.fileId || "",
     }
   } catch (error) {
     console.error("Error pre-loading file:", error)
@@ -113,48 +114,27 @@ export default memo(function ClientProvider({ children }: ClientProviderProps) {
   const [contentReady, setContentReady] = useState(false)
 
   useEffect(() => {
-    async function setupDbAndMigrate() {
+    async function setup() {
       setIsDbLoading(true)
       setLoadingProgress(0)
 
       try {
-        // Simulate progress updates for 0-70% with faster intervals
-        const progressInterval = setInterval(() => {
-          setLoadingProgress((prev) => {
-            const newProgress = prev + 0.05 // Slower increment to reduce state changes
-            return newProgress > 0.7 ? 0.7 : newProgress
-          })
-        }, 100) // Longer interval to reduce state change frequency
-
-        const dbInstance = await initializeDb()
-        await applyPgLiteMigrations(dbInstance, migrations)
+        // Show some initial progress
+        setLoadingProgress(0.3)
 
-        clearInterval(progressInterval)
-
-        // Set DB instance first before progressing further
+        const dbInstance = await initialize()
+        await applyMigrations(dbInstance, migrations)
+        // Set DB instance and finish loading
         setDb(dbInstance)
-
-        // After a short delay, continue progress
-        setTimeout(() => {
-          setLoadingProgress(0.8) // DB is ready at 80%
-
-          // Stagger the remaining progress updates
-          setTimeout(() => {
-            setLoadingProgress(0.9)
-            setTimeout(() => {
-              setLoadingProgress(1)
-            }, 50)
-          }, 100)
-        }, 150)
+        setLoadingProgress(1)
       } catch (err) {
         console.error("Error initializing database:", err)
-        setLoadingProgress(1) // Move to 100% even on error so UI can show
+        setLoadingProgress(1)
       } finally {
         setIsDbLoading(false)
       }
     }
-
-    setupDbAndMigrate()
+    setup()
   }, [])
 
   // Handle transition from loading to content
@@ -211,15 +191,21 @@ export default memo(function ClientProvider({ children }: ClientProviderProps) {
                             enableSystem
                             disableTransitionOnChange
                           >
-                            <TooltipProvider delayDuration={0} skipDelayDuration={0}>
+                            <NotesProvider>
                               {children}
-                            </TooltipProvider>
+                            </NotesProvider>
                           </ThemeProvider>
                         </SettingsProvider>
                       </VaultProvider>
                     </AuthorTasksProvider>
                   </EmbeddingProvider>
                 </FileRestorationProvider>
+                <ReactQueryDevtools
+                  initialIsOpen={false}
+                  buttonPosition="bottom-left"
+                  position="bottom"
+                  client={queryClient}
+                />
               </QueryClientProvider>
             </PGliteProvider>
           </motion.div>
diff --git a/packages/morph/context/steering.tsx b/packages/morph/context/steering.tsx
index daaf04d0..40663ebf 100644
--- a/packages/morph/context/steering.tsx
+++ b/packages/morph/context/steering.tsx
@@ -1,8 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { createContext, useCallback, useContext, useEffect, useState } from "react"
-import { useRecommendedAuthors } from "@/services/authors"
+import { createContext, useCallback, useContext, useState } from "react"
+
+// import { useRecommendedAuthors } from "@/services/authors"
 
 // Default steering parameters
 export const DEFAULT_AUTHORS = [
@@ -34,8 +35,6 @@ export interface SteeringSettings {
 
 interface SteeringContextType {
   settings: SteeringSettings
-  fileId: string | null
-  updateFileId: (fileId: string | null) => void
   updateAuthors: (authors: string[]) => void
   updateTonality: (tonality: Record<string, number>) => void
   updateTemperature: (temperature: number) => void
@@ -50,7 +49,6 @@ interface SteeringProviderProps {
 }
 
 export function SteeringProvider({ children }: SteeringProviderProps) {
-  const [fileId, setFileId] = useState<string | null>(null)
   const [settings, setSettings] = useState<SteeringSettings>({
     authors: [...DEFAULT_AUTHORS], // Start with default authors
     tonality: { ...DEFAULT_TONALITY }, // Create a new object to avoid reference issues
@@ -59,19 +57,6 @@ export function SteeringProvider({ children }: SteeringProviderProps) {
     tonalityEnabled: false,
   })
 
-  // Fetch recommended authors if fileId is available
-  const { data: recommendedAuthors } = useRecommendedAuthors(fileId)
-
-  // Update authors when recommendations are available
-  useEffect(() => {
-    if (recommendedAuthors?.authors && recommendedAuthors.authors.length > 0) {
-      setSettings(prev => ({
-        ...prev,
-        authors: [...recommendedAuthors.authors]
-      }))
-    }
-  }, [recommendedAuthors])
-
   const updateSettings = useCallback(
     <K extends keyof SteeringSettings>(key: K, value: SteeringSettings[K]) => {
       setSettings((prev) => {
@@ -92,10 +77,6 @@ export function SteeringProvider({ children }: SteeringProviderProps) {
     [],
   )
 
-  const updateFileId = useCallback((id: string | null) => {
-    setFileId(id)
-  }, [])
-
   const updateAuthors = useCallback(
     (authors: string[]) => {
       updateSettings("authors", authors)
@@ -133,8 +114,6 @@ export function SteeringProvider({ children }: SteeringProviderProps) {
 
   const value = {
     settings,
-    fileId,
-    updateFileId,
     updateAuthors,
     updateTonality,
     updateTemperature,
diff --git a/packages/morph/db/index.ts b/packages/morph/db/index.ts
index ac766ff9..d70e920f 100644
--- a/packages/morph/db/index.ts
+++ b/packages/morph/db/index.ts
@@ -8,40 +8,30 @@ import { MorphPgLite } from "@/context/db"
 export * from "@/db/schema"
 export * from "@/db/interfaces"
 
-export const PGLITE_DB_NAME = "morph-pglite"
+const PGLITE_DB_NAME = "morph-pglite"
 
 // Singleton instance and promise
-let db: MorphPgLite | null = null // Use PGlite type directly
-let initPromise: Promise<MorphPgLite> | null = null
-
-// Function to get the initialized PGlite instance (singleton pattern)
-// This function ONLY ensures the PGlite client is created and extensions are loaded.
-// It does NOT handle schema creation/migration.
-export async function initializeDb(): Promise<MorphPgLite> {
-  if (db) {
-    return db
-  }
-  if (!initPromise) {
-    initPromise = (async () => {
-      try {
-        const pg = await PGlite.create({
-          fs: new IdbFs(PGLITE_DB_NAME),
-          relaxedDurability: true,
-          extensions: { live, vector },
-        })
-        // Ensure vector extension exists - this is lightweight
-        await pg.exec(`CREATE EXTENSION IF NOT EXISTS vector;`)
-        db = pg
-        return pg
-      } catch (error) {
-        console.error("getDbInstance: Failed to initialize PGlite client:", error)
-        db = null // Reset instance on failure
-        initPromise = null // Reset promise on failure
-        throw error
-      }
-    })()
+let db: MorphPgLite | null = null
+
+export async function initialize() {
+  if (db) return db
+
+  try {
+    const pg = (await PGlite.create({
+      fs: new IdbFs(PGLITE_DB_NAME),
+      relaxedDurability: true,
+      extensions: { live, vector },
+    })) as MorphPgLite
+
+    // Ensure vector extension exists - this is lightweight
+    await pg.exec(`CREATE EXTENSION IF NOT EXISTS vector;`)
+    db = pg
+    return pg
+  } catch (error) {
+    db = null
+    console.error("getDbInstance: Failed to initialize PGlite client:", error)
+    throw new Error("Failed to initialize database")
   }
-  return initPromise
 }
 
 // --- Browser Migration Runner --- //
@@ -85,7 +75,7 @@ async function recordMigration(db: MorphPgLite, hash: string) {
  * @param db The initialized PGlite instance.
  * @param migrations The compiled migration data (array of MigrationMeta).
  */
-export async function applyPgLiteMigrations(db: MorphPgLite, migrations: MigrationMeta[]) {
+export async function applyMigrations(db: MorphPgLite, migrations: MigrationMeta[]) {
   if (!migrations || migrations.length === 0) {
     return
   }
@@ -130,4 +120,5 @@ export async function applyPgLiteMigrations(db: MorphPgLite, migrations: Migrati
     console.error("applyPgLiteMigrations: Migration process failed:", error)
     throw error
   }
+  return db
 }
diff --git a/packages/morph/db/interfaces.ts b/packages/morph/db/interfaces.ts
index fce3e97c..ef2d9c68 100644
--- a/packages/morph/db/interfaces.ts
+++ b/packages/morph/db/interfaces.ts
@@ -125,3 +125,23 @@ export interface Reasoning {
   duration: number
   steering: Steering
 }
+
+export interface StreamingNote {
+  id: string
+  content: string
+  color: string
+  isComplete: boolean
+  isScanComplete?: boolean
+}
+
+export interface ReasoningHistory {
+  id: string
+  content: string
+  timestamp: Date
+  noteIds: string[]
+  reasoningElapsedTime: number
+  authors?: string[]
+  tonality?: Record<string, number>
+  temperature?: number
+  numSuggestions?: number
+}
diff --git a/packages/morph/hooks/use-fs-handles.ts b/packages/morph/hooks/use-fs-handles.ts
index 2225124e..7dbbb2d1 100644
--- a/packages/morph/hooks/use-fs-handles.ts
+++ b/packages/morph/hooks/use-fs-handles.ts
@@ -1,3 +1,4 @@
+import { createId } from "@paralleldrive/cuid2"
 import Dexie from "dexie"
 import { useCallback } from "react"
 
diff --git a/packages/morph/hooks/use-persisted-settings.tsx b/packages/morph/hooks/use-persisted-settings.tsx
index 36338b37..dcb25551 100644
--- a/packages/morph/hooks/use-persisted-settings.tsx
+++ b/packages/morph/hooks/use-persisted-settings.tsx
@@ -1,83 +1,143 @@
-import { createContext, ReactNode, useContext, useEffect, useState } from "react"
+import {
+  Dispatch,
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer,
+  useRef,
+} from "react"
 
 import { useVaultContext } from "@/context/vault"
 
 import { DEFAULT_SETTINGS, Settings } from "@/db/interfaces"
 
+// Define action types
+type SettingsAction =
+  | { type: "LOAD_SETTINGS"; payload: Settings }
+  | { type: "UPDATE_SETTINGS"; payload: Partial<Settings> }
+  | { type: "SET_LOADED" }
+
+// Settings reducer function
+function settingsReducer(state: { settings: Settings; isLoaded: boolean }, action: SettingsAction) {
+  switch (action.type) {
+    case "LOAD_SETTINGS":
+      return {
+        ...state,
+        settings: { ...DEFAULT_SETTINGS, ...action.payload },
+        isLoaded: true,
+      }
+    case "UPDATE_SETTINGS":
+      return {
+        ...state,
+        settings: { ...state.settings, ...action.payload },
+      }
+    case "SET_LOADED":
+      return {
+        ...state,
+        isLoaded: true,
+      }
+    default:
+      return state
+  }
+}
+
 // Create a context for settings
 interface SettingsContextType {
   settings: Settings
-  updateSettings: (newSettings: Partial<Settings>) => Promise<void>
+  updateSettings: (newSettings: Partial<Settings>) => void
   isLoaded: boolean
 }
 
 const SettingsContext = createContext<SettingsContextType | undefined>(undefined)
+const SettingsDispatchContext = createContext<Dispatch<SettingsAction> | undefined>(undefined)
 
 // Create a provider component
 export function SettingsProvider({ children }: { children: ReactNode }) {
-  const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS)
-  const [isLoaded, setIsLoaded] = useState(false)
+  const [state, dispatch] = useReducer(settingsReducer, {
+    settings: DEFAULT_SETTINGS,
+    isLoaded: false,
+  })
+
   const { getActiveVault } = useVaultContext()
+  const loadedVaultIds = useRef<Set<string>>(new Set())
 
   useEffect(() => {
-    const loadSettings = async () => {
+    const loadSettings = () => {
       try {
         const vault = getActiveVault()
-        if (!vault?.tree.handle) {
-          setIsLoaded(true)
+        if (!vault) {
+          dispatch({ type: "SET_LOADED" })
+          return
+        }
+
+        const vaultId = vault.id
+
+        // Skip if we've already loaded settings for this vault
+        if (loadedVaultIds.current.has(vaultId)) {
           return
         }
 
-        // Get the .morph directory handle
-        const handle = vault.tree.handle as FileSystemDirectoryHandle
-        const morphDir = await handle.getDirectoryHandle(".morph", { create: true })
-        const configFile = await morphDir.getFileHandle("config.json", { create: true })
-        const file = await configFile.getFile()
-        const text = await file.text()
+        // Mark this vault as loaded
+        loadedVaultIds.current.add(vaultId)
+
+        // Load settings from localStorage
+        const storageKey = `morph:vaults:${vaultId}`
+        const storedSettings = localStorage.getItem(storageKey)
 
-        if (text) {
-          const parsedSettings = { ...DEFAULT_SETTINGS, ...JSON.parse(text) }
-          setSettings(parsedSettings)
+        if (storedSettings) {
+          const parsedSettings = JSON.parse(storedSettings)
+          dispatch({ type: "LOAD_SETTINGS", payload: parsedSettings })
+        } else {
+          dispatch({ type: "LOAD_SETTINGS", payload: DEFAULT_SETTINGS })
         }
       } catch (error) {
         console.error("Failed to load settings:", error)
-      } finally {
-        setIsLoaded(true)
+        dispatch({ type: "SET_LOADED" })
       }
     }
 
     loadSettings()
   }, [getActiveVault])
 
-  const updateSettings = async (newSettings: Partial<Settings>) => {
-    try {
-      const vault = getActiveVault()
-      if (!vault?.tree.handle) return
+  const updateSettings = useCallback(
+    (newSettings: Partial<Settings>) => {
+      try {
+        const vault = getActiveVault()
+        if (!vault) return
+
+        // Update state through reducer
+        dispatch({ type: "UPDATE_SETTINGS", payload: newSettings })
 
-      const updated = { ...settings, ...newSettings }
-      setSettings(updated)
+        // Set a localStorage flag if vim mode is changed
+        if (newSettings.vimMode !== undefined && newSettings.vimMode !== state.settings.vimMode) {
+          localStorage.setItem("morph:vim-mode-changed", "true")
+          localStorage.setItem("morph:vim-mode-value", newSettings.vimMode ? "true" : "false")
+        }
 
-      // Set a localStorage flag if vim mode is changed
-      if (newSettings.vimMode !== undefined && newSettings.vimMode !== settings.vimMode) {
-        localStorage.setItem('morph:vim-mode-changed', 'true')
-        localStorage.setItem('morph:vim-mode-value', newSettings.vimMode ? 'true' : 'false')
+        // Save to localStorage
+        const storageKey = `morph:vaults:${vault.id}`
+        const updatedSettings = { ...state.settings, ...newSettings }
+        localStorage.setItem(storageKey, JSON.stringify(updatedSettings))
+      } catch (error) {
+        console.error("Failed to save settings:", error)
       }
+    },
+    [getActiveVault, state.settings],
+  )
 
-      // Save to .morph/config.json
-      const handle = vault.tree.handle as FileSystemDirectoryHandle
-      const morphDir = await handle.getDirectoryHandle(".morph", { create: true })
-      const configFile = await morphDir.getFileHandle("config.json", { create: true })
-      const writable = await configFile.createWritable()
-      await writable.write(JSON.stringify(updated, null, 2))
-      await writable.close()
-    } catch (error) {
-      console.error("Failed to save settings:", error)
-    }
+  const contextValue = {
+    settings: state.settings,
+    updateSettings,
+    isLoaded: state.isLoaded,
   }
 
   return (
-    <SettingsContext.Provider value={{ settings, updateSettings, isLoaded }}>
-      {children}
+    <SettingsContext.Provider value={contextValue}>
+      <SettingsDispatchContext.Provider value={dispatch}>
+        {children}
+      </SettingsDispatchContext.Provider>
     </SettingsContext.Provider>
   )
 }
diff --git a/packages/morph/hooks/use-toast.ts b/packages/morph/hooks/use-toast.ts
deleted file mode 100644
index 747fd4ef..00000000
--- a/packages/morph/hooks/use-toast.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 100000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-export const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }
diff --git a/packages/morph/lib/index.ts b/packages/morph/lib/index.ts
index b5cf7921..1a3bce7a 100644
--- a/packages/morph/lib/index.ts
+++ b/packages/morph/lib/index.ts
@@ -1,5 +1,8 @@
+import { ReasoningHistory } from "@/db"
 import rfdc from "rfdc"
 
+import type { Note } from "@/db/interfaces"
+
 export function stripSlashes(s: string, onlyStripPrefix?: boolean): string {
   if (s.startsWith("/")) {
     s = s.substring(1)
@@ -195,3 +198,122 @@ export function formatDateString(dateStr: string): FormattedDateResult {
     relativeTime,
   }
 }
+
+export function safeDate(dateStr: string | null | undefined): Date | null {
+  if (!dateStr) return null
+
+  try {
+    const date = new Date(dateStr)
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      return null
+    }
+    return date
+  } catch (error) {
+    console.error(`Failed to parse date string: ${dateStr}`, error)
+    return null
+  }
+}
+
+// Add a debug logging helper function that only runs in development
+export function debugLog(message: string, ...data: any) {
+  if (process.env.NODE_ENV !== "development") return
+  console.debug(message, ...data)
+}
+
+// Add a function to log reasoning and note groups data
+export function logReasoningAndGroups(
+  reasoningHistory: ReasoningHistory[],
+  noteGroups: [string, Note[]][],
+) {
+  if (process.env.NODE_ENV !== "development") return
+
+  debugLog(
+    `[NotesPanel] Reasoning history: ${reasoningHistory.length}, Note groups: ${noteGroups.length}`,
+  )
+
+  if (reasoningHistory.length > 0) {
+    const allNoteIds = reasoningHistory.map((r) => r.noteIds).flat()
+    debugLog(`[NotesPanel] All reasoning noteIds:`, allNoteIds)
+
+    reasoningHistory.forEach((r) => {
+      debugLog(`[NotesPanel] Reasoning ${r.id} has ${r.noteIds?.length || 0} noteIds:`, r.noteIds)
+    })
+  }
+
+  if (noteGroups.length > 0) {
+    debugLog(`[NotesPanel] Found ${noteGroups.length} note groups:`)
+    noteGroups.forEach(([dateStr, notes]) => {
+      debugLog(
+        `[NotesPanel] Group '${dateStr}' has ${notes.length} notes:`,
+        notes.map((n) => n.id),
+      )
+    })
+  } else {
+    debugLog(`[NotesPanel] No note groups found - check filtering in noteGroupsData creation`)
+  }
+}
+
+// Add an analysis function that helps diagnose noteGroupsData filtering issues
+export function analyzeNotesFiltering(allNotes: Note[], droppedNotes: Note[]) {
+  if (process.env.NODE_ENV !== "development") return
+
+  // Get counts to understand filtering
+  const totalNotes = allNotes.length
+  const droppedNotesCount = droppedNotes.length
+  const droppedNoteIds = new Set(droppedNotes.map((note) => note.id))
+
+  // Count notes with dropped flag
+  const notesWithDroppedFlag = allNotes.filter((note) => note.dropped).length
+
+  // Count notes that are in allNotes but not in droppedNotes
+  const nonDroppedNotes = allNotes.filter(
+    (note) => !droppedNoteIds.has(note.id) && !note.dropped,
+  ).length
+
+  debugLog(`[Notes Analysis] Total notes: ${totalNotes}, Dropped notes: ${droppedNotesCount}`)
+  debugLog(`[Notes Analysis] Notes with dropped flag: ${notesWithDroppedFlag}`)
+  debugLog(`[Notes Analysis] Non-dropped notes that should appear in groups: ${nonDroppedNotes}`)
+
+  if (nonDroppedNotes === 0) {
+    // Detailed analysis of what might be happening
+    const droppedFlagButNotInDroppedNotes = allNotes.filter(
+      (note) => note.dropped && !droppedNoteIds.has(note.id),
+    ).length
+
+    const inDroppedNotesButNoFlag = allNotes.filter(
+      (note) => !note.dropped && droppedNoteIds.has(note.id),
+    ).length
+
+    debugLog(
+      `[Notes Analysis] Notes with dropped flag but not in droppedNotes array: ${droppedFlagButNotInDroppedNotes}`,
+    )
+    debugLog(
+      `[Notes Analysis] Notes in droppedNotes array but without dropped flag: ${inDroppedNotesButNoFlag}`,
+    )
+
+    if (droppedFlagButNotInDroppedNotes > 0) {
+      debugLog(
+        "[Notes Analysis] ISSUE: There are notes marked as dropped but not in the droppedNotes array",
+      )
+    }
+
+    if (inDroppedNotesButNoFlag > 0) {
+      debugLog(
+        "[Notes Analysis] ISSUE: There are notes in the droppedNotes array but without the dropped flag",
+      )
+    }
+
+    if (totalNotes === droppedNotesCount) {
+      debugLog(
+        "[Notes Analysis] All notes are in the droppedNotes array, which is why noteGroupsData is empty",
+      )
+    }
+
+    if (totalNotes === notesWithDroppedFlag) {
+      debugLog(
+        "[Notes Analysis] All notes have the dropped flag set to true, which is why noteGroupsData is empty",
+      )
+    }
+  }
+}
diff --git a/packages/morph/next.config.ts b/packages/morph/next.config.ts
index c1423bd1..47cd8544 100644
--- a/packages/morph/next.config.ts
+++ b/packages/morph/next.config.ts
@@ -12,6 +12,12 @@ export default plausible({
     "@electric-sql/pglite",
   ],
   devIndicators: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.(woff|woff2|eot|ttf|otf)$/,
diff --git a/packages/morph/package.json b/packages/morph/package.json
index 7fafaf53..79bfea5b 100644
--- a/packages/morph/package.json
+++ b/packages/morph/package.json
@@ -22,6 +22,7 @@
     "@codemirror/view": "^6.36.5",
     "@electric-sql/pglite": "^0.2.17",
     "@electric-sql/pglite-react": "^0.2.17",
+    "@electric-sql/pglite-repl": "^0.2.17",
     "@hookform/resolvers": "^4.1.3",
     "@lezer/highlight": "^1.2.1",
     "@paralleldrive/cuid2": "github:paralleldrive/cuid2",
@@ -58,6 +59,7 @@
     "@uiw/codemirror-extensions-hyper-link": "^4.23.10",
     "@uiw/codemirror-themes": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
+    "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
@@ -86,7 +88,7 @@
     "micromark-extension-gfm": "^3.0.0",
     "minimatch": "^10.0.1",
     "motion": "^12.6.3",
-    "next": "15.2.2",
+    "next": "15.3.0-canary.41",
     "next-plausible": "^3.12.4",
     "next-themes": "^0.4.6",
     "popmotion": "^11.0.5",
@@ -118,6 +120,7 @@
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
     "shiki": "^1.29.2",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.174.0",
@@ -134,7 +137,7 @@
     "node": ">=22"
   },
   "devDependencies": {
-    "@anthropic-ai/claude-code": "^0.2.61",
+    "@anthropic-ai/claude-code": "^0.2.65",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.23.0",
     "@tailwindcss/postcss": "^4.1.1",
diff --git a/packages/morph/services/agents.ts b/packages/morph/services/agents.ts
index e2bc0ff8..4c557b9a 100644
--- a/packages/morph/services/agents.ts
+++ b/packages/morph/services/agents.ts
@@ -1,4 +1,5 @@
 import { API_ENDPOINT } from "@/services/constants"
+import axios, { AxiosResponse } from "axios"
 
 // Interfaces
 export interface SuggestionRequest {
@@ -59,22 +60,26 @@ export interface StreamingCallbacks {
  * Checks if the agent API is available
  */
 export async function checkAgentAvailability(): Promise<boolean> {
-  try {
-    const readyz = await fetch(`${API_ENDPOINT}/readyz`)
-    return readyz.ok
-  } catch (error) {
-    console.error("Error checking agent availability:", error)
-    return false
-  }
+  return await axios
+    .get(`${API_ENDPOINT}/readyz`)
+    .then((resp) => resp.status === 200)
+    .catch((err) => {
+      console.error("Error checking agent availability:", err)
+      return false
+    })
 }
 
 /**
  * Checks the health of the agent API
  */
 export async function checkAgentHealth(timeout: number = 30): Promise<ReadinessResponse> {
-  return fetch(`${API_ENDPOINT}/health`, {
-    method: "POST",
-    headers: { Accept: "application/json", "Content-Type": "application/json" },
-    body: JSON.stringify({ timeout }),
-  }).then((data) => data.json())
+  return await axios
+    .post<{ timeout: number }, AxiosResponse<ReadinessResponse>>(`${API_ENDPOINT}/health`, {
+      timeout,
+    })
+    .then((response) => response.data)
+    .catch((err) => {
+      console.error("Services aren't ready:", err)
+      throw err
+    })
 }
diff --git a/packages/morph/services/authors.ts b/packages/morph/services/authors.ts
index f0c88c35..6c9a4fc8 100644
--- a/packages/morph/services/authors.ts
+++ b/packages/morph/services/authors.ts
@@ -1,9 +1,12 @@
+import { safeDate } from "@/lib"
 import { API_ENDPOINT, POLLING_INTERVAL, TaskStatusResponse } from "@/services/constants"
 import { useMutation, useQuery } from "@tanstack/react-query"
+import axios from "axios"
 import { eq } from "drizzle-orm"
 import { PgliteDatabase, drizzle } from "drizzle-orm/pglite"
 
 import { usePGlite } from "@/context/db"
+import { DEFAULT_AUTHORS } from "@/context/steering"
 
 import * as schema from "@/db/schema"
 
@@ -62,106 +65,78 @@ async function submitAuthorTask(
     max_tokens?: number
     use_tool?: boolean
   } = {},
-): Promise<TaskStatusResponse> {
-  const req: AuthorRequest = {
-    essay: content,
-    num_authors: options.num_authors || 8,
-    temperature: options.temperature || 0.7,
-    max_tokens: options.max_tokens || 16384,
-    search_backend: "exa",
-    num_search_results: 3,
-    use_tool: options.use_tool || false,
-  }
-
-  const response = await fetch(`${API_ENDPOINT}/authors/submit`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(req),
-  })
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: "Unknown error" }))
-    console.error(
-      `[Authors] Failed to submit content for author recommendations:`,
-      error.error || response.statusText,
-    )
-    throw new Error(`Failed to submit for author recommendations: ${error.error || response.statusText}`)
-  }
-
-  const responseData = await response.json()
-  return responseData
+) {
+  return axios
+    .post<AuthorRequest, { data: TaskStatusResponse }>(`${API_ENDPOINT}/authors/submit`, {
+      essay: content,
+      num_authors: options.num_authors || 8,
+      temperature: options.temperature || 0.7,
+      max_tokens: options.max_tokens || 16384,
+      search_backend: "exa",
+      num_search_results: 3,
+      use_tool: options.use_tool || false,
+    })
+    .then((resp) => resp.data)
+    .catch((err) => {
+      console.error(
+        `[Authors] Failed to submit content for author recommendations:`,
+        err.response.data?.error || err.message,
+      )
+      throw new Error(
+        `Failed to submit for author recommendations: ${err.response.data?.error || err.message}`,
+      )
+    })
 }
 
 // Check the status of an author task
-async function checkAuthorTask(taskId: string): Promise<TaskStatusResponse> {
-  try {
-    const response = await fetch(`${API_ENDPOINT}/authors/status?task_id=${taskId}`)
-
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: "Unknown error" }))
+async function checkAuthorTask(taskId: string) {
+  return await axios
+    .get<TaskStatusResponse>(`${API_ENDPOINT}/authors/status`, {
+      params: { task_id: taskId },
+    })
+    .then((resp) => resp.data)
+    .catch((error) => {
       console.error(
         `[Authors] Status check failed for task ${taskId}:`,
-        error.error || response.statusText,
+        error.response.data?.error || error.message,
       )
-      throw new Error(`Failed to check status: ${error.error || response.statusText}`)
-    }
-
-    const statusData = await response.json()
-    return statusData
-  } catch (error) {
-    console.error(`[Authors] Error checking task status for ${taskId}:`, error)
-    // Return a failure status for any errors
-    return {
-      task_id: taskId,
-      status: "failure" as const,
-      created_at: new Date().toISOString(),
-      executed_at: new Date().toISOString(),
-    }
-  }
+      return {
+        task_id: taskId,
+        status: "failure" as const,
+        created_at: new Date().toISOString(),
+        executed_at: new Date().toISOString(),
+      }
+    })
 }
 
 // Get author recommendations for a completed task
-async function getAuthorTask(taskId: string): Promise<AuthorResponse> {
-  const response = await fetch(`${API_ENDPOINT}/authors/get?task_id=${taskId}`)
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: "Unknown error" }))
-    console.error(
-      `[Authors] Failed to get recommendations for task ${taskId}:`,
-      error.error || response.statusText,
-    )
-    throw new Error(`Failed to get recommendations: ${error.error || response.statusText}`)
-  }
-
-  const authorsData = await response.json()
-
-  // Verify we received the correct type of response
-  if (!authorsData.authors || !Array.isArray(authorsData.authors)) {
-    console.error(
-      `[Authors] Invalid response format for task ${taskId}, missing authors array:`,
-      authorsData,
-    )
-    throw new Error(`Invalid response format: missing authors array`)
-  }
-
-  return authorsData
-}
-
-// Add a helper function to safely create dates
-function safeDate(dateStr: string | null | undefined): Date | null {
-  if (!dateStr) return null
-
-  try {
-    const date = new Date(dateStr)
-    // Check if date is valid
-    if (isNaN(date.getTime())) {
-      return null
-    }
-    return date
-  } catch (error) {
-    console.error(`Failed to parse date string: ${dateStr}`, error)
-    return null
-  }
+async function getAuthorTask(taskId: string) {
+  return await axios
+    .get<AuthorResponse>(`${API_ENDPOINT}/authors/get`, {
+      params: { task_id: taskId },
+    })
+    .then((resp) => {
+      const authorsData = resp.data
+
+      // Verify we received the correct type of response
+      if (!authorsData.authors || !Array.isArray(authorsData.authors)) {
+        console.error(
+          `[Authors] Invalid response format for task ${taskId}, missing authors array:`,
+          authorsData,
+        )
+        throw new Error(`Invalid response format: missing authors array`)
+      }
+      return authorsData
+    })
+    .catch((error) => {
+      console.error(
+        `[Authors] Failed to get recommendations for task ${taskId}:`,
+        error.response.data?.error || error.message,
+      )
+      return {
+        authors: DEFAULT_AUTHORS,
+      }
+    })
 }
 
 // Save author recommendations to database
@@ -177,9 +152,7 @@ async function saveAuthorRecommendations(
     })
 
     if (!existingFile) {
-      console.error(
-        `[Authors] Cannot save recommendations: File ${fileId} not found in database`,
-      )
+      console.error(`[Authors] Cannot save recommendations: File ${fileId} not found in database`)
       return
     }
 
@@ -234,11 +207,78 @@ async function saveAuthorRecommendations(
   }
 }
 
-// Hook for polling author task status and handling completion
-export function useQueryAuthorStatus(taskId: string | null | undefined, fileId: string | null | undefined) {
-  const client = usePGlite()
-  const db = drizzle({ client, schema })
+// Process pending author recommendations
+export function useProcessPendingAuthor(db: PgliteDatabase<typeof schema>) {
+  return async (fileId: string, result: AuthorResponse): Promise<void> => {
+    try {
+      // Check if file exists before updating it
+      const existingFile = await db.query.files.findFirst({
+        where: eq(schema.files.id, fileId),
+      })
+
+      if (!existingFile) {
+        console.error(`[Authors] Cannot save pending authors: File ${fileId} not found in database`)
+        return
+      }
+
+      // Check if this file already has an author record
+      const existingAuthor = await db.query.authors.findFirst({
+        where: eq(schema.authors.fileId, fileId),
+      })
 
+      if (existingAuthor) {
+        // Update existing record with pending status
+        await db
+          .update(schema.authors)
+          .set({
+            recommendedAuthors: result.authors,
+            queries: result.queries || [],
+            authorStatus: "pending",
+            authorTaskId: null,
+          })
+          .where(eq(schema.authors.id, existingAuthor.id))
+      } else {
+        // Insert new record with pending status
+        await db.insert(schema.authors).values({
+          fileId: fileId,
+          recommendedAuthors: result.authors,
+          queries: result.queries || [],
+          createdAt: new Date(),
+          authorStatus: "pending",
+          authorTaskId: null,
+        })
+      }
+    } catch (error) {
+      console.error(`[Authors] Error saving pending authors for file ${fileId}:`, error)
+
+      // Try to update the author record to indicate failure
+      try {
+        const existingAuthor = await db.query.authors.findFirst({
+          where: eq(schema.authors.fileId, fileId),
+        })
+
+        if (existingAuthor) {
+          await db
+            .update(schema.authors)
+            .set({
+              authorStatus: "failure",
+              authorTaskId: null,
+            })
+            .where(eq(schema.authors.id, existingAuthor.id))
+        }
+      } catch (err) {
+        console.error(`[Authors] Failed to update author status for ${fileId}:`, err)
+      }
+    }
+  }
+}
+
+// Hook for polling author task status and handling completion
+export function useQueryAuthorStatus(
+  taskId: string | null | undefined,
+  fileId: string | null | undefined,
+  db: PgliteDatabase<typeof schema>,
+) {
   return useQuery({
     queryKey: ["authors", taskId, fileId],
     queryFn: async () => {
@@ -257,10 +297,7 @@ export function useQueryAuthorStatus(taskId: string | null | undefined, fileId:
 
             // Verify this is a valid response before saving
             if (!result.authors || !Array.isArray(result.authors)) {
-              console.error(
-                `[Authors] Received invalid response for task ${taskId}:`,
-                result,
-              )
+              console.error(`[Authors] Received invalid response for task ${taskId}:`, result)
               throw new Error("Invalid response format: missing authors array")
             }
 
@@ -506,6 +543,6 @@ export function useProcessAuthors() {
         console.error(`[Authors] Failed to process authors for ${fileId}:`, error)
         return { submitted: false, error }
       }
-    }
+    },
   })
 }
diff --git a/packages/morph/services/context-aware-notes.ts b/packages/morph/services/context-aware-notes.ts
index 199ffb73..72c7471b 100644
--- a/packages/morph/services/context-aware-notes.ts
+++ b/packages/morph/services/context-aware-notes.ts
@@ -1,4 +1,3 @@
-import { API_ENDPOINT } from "@/services/constants"
 import { and, cosineDistance, eq, inArray, sql } from "drizzle-orm"
 import { PgliteDatabase, drizzle } from "drizzle-orm/pglite"
 import { useCallback } from "react"
@@ -111,36 +110,6 @@ export async function findSimilarNotesForFile(
   }
 }
 
-/**
- * Get embeddings from OpenAI-compatible endpoint
- * @param text Text to get embeddings for
- * @returns Embedding vector
- */
-export async function getEmbedding(text: string): Promise<number[]> {
-  try {
-    const response = await fetch(`${API_ENDPOINT}/v1/embeddings`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        input: text,
-        model: "text-embedding-3-small",
-      }),
-    })
-
-    if (!response.ok) {
-      throw new Error(`Failed to get embedding: ${response.statusText}`)
-    }
-
-    const data = await response.json()
-    return data.data[0].embedding
-  } catch (error) {
-    console.error("Error getting embedding:", error)
-    throw error
-  }
-}
-
 // Add a retry wrapper function and improve the useContextAwareNotes hook
 // Add a function to retry operations
 async function withRetry<T>(operation: () => Promise<T>, retries = 3, delay = 500): Promise<T> {
diff --git a/packages/morph/services/essays.ts b/packages/morph/services/essays.ts
index dd2c5d78..935f1d2a 100644
--- a/packages/morph/services/essays.ts
+++ b/packages/morph/services/essays.ts
@@ -1,10 +1,10 @@
+import { safeDate } from "@/lib"
 import { API_ENDPOINT, ESAAY_POLLING_INTERVAL } from "@/services/constants"
 import { TaskStatusResponse } from "@/services/constants"
 import { useMutation, useQuery } from "@tanstack/react-query"
+import axios from "axios"
 import { and, eq, isNull, not } from "drizzle-orm"
-import { PgliteDatabase, drizzle } from "drizzle-orm/pglite"
-
-import { usePGlite } from "@/context/db"
+import { PgliteDatabase } from "drizzle-orm/pglite"
 
 import * as schema from "@/db/schema"
 
@@ -57,7 +57,7 @@ export async function checkFileHasEmbeddings(
     })
 
     if (!file) {
-      console.error(`[EssayEmbedding] File ${fileId} not found in database`)
+      console.debug(`[EssayEmbedding] File ${fileId} not found in database`)
       return false
     }
 
@@ -85,101 +85,70 @@ async function submitFileEmbeddingTask(
   fileId: string,
   content: string,
 ): Promise<TaskStatusResponse> {
-  const req: EssayEmbeddingRequest = {
-    vault_id: vaultId,
-    file_id: fileId,
-    content,
-  }
-
-  const response = await fetch(`${API_ENDPOINT}/essays/submit`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(req),
-  })
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: "Unknown error" }))
-    console.error(
-      `[EssayEmbedding] Failed to submit file ${fileId}:`,
-      error.error || response.statusText,
-    )
-    throw new Error(`Failed to submit file: ${error.error || response.statusText}`)
-  }
-
-  const responseData = await response.json()
-  return responseData
+  return axios
+    .post<EssayEmbeddingRequest, { data: TaskStatusResponse }>(`${API_ENDPOINT}/essays/submit`, {
+      vault_id: vaultId,
+      file_id: fileId,
+      content,
+    })
+    .then((resp) => resp.data)
+    .catch((err) => {
+      console.error(
+        `[EssayEmbedding] Failed to submit file ${fileId}:`,
+        err.response?.data?.error || err.message,
+      )
+      throw new Error(`Failed to submit file: ${err.response?.data?.error || err.message}`)
+    })
 }
 
 // Check the status of an embedding task
 async function checkFileEmbeddingTask(taskId: string): Promise<TaskStatusResponse> {
-  try {
-    const response = await fetch(`${API_ENDPOINT}/essays/status?task_id=${taskId}`)
-
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: "Unknown error" }))
+  return axios
+    .get<TaskStatusResponse>(`${API_ENDPOINT}/essays/status`, {
+      params: { task_id: taskId },
+    })
+    .then((resp) => resp.data)
+    .catch((error) => {
       console.error(
         `[EssayEmbedding] Status check failed for task ${taskId}:`,
-        error.error || response.statusText,
+        error.response?.data?.error || error.message,
       )
-      throw new Error(`Failed to check status: ${error.error || response.statusText}`)
-    }
-
-    const statusData = await response.json()
-    return statusData
-  } catch (error) {
-    console.error(`[EssayEmbedding] Error checking task status for ${taskId}:`, error)
-    // Return a failure status for any errors
-    return {
-      task_id: taskId,
-      status: "failure" as const,
-      created_at: new Date().toISOString(),
-      executed_at: new Date().toISOString(),
-    }
-  }
+      return {
+        task_id: taskId,
+        status: "failure" as const,
+        created_at: new Date().toISOString(),
+        executed_at: new Date().toISOString(),
+      }
+    })
 }
 
 // Get embedding results for a completed task
 async function getFileEmbeddingTask(taskId: string): Promise<EssayEmbeddingResponse> {
-  const response = await fetch(`${API_ENDPOINT}/essays/get?task_id=${taskId}`)
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: "Unknown error" }))
-    console.error(
-      `[EssayEmbedding] Failed to get embedding for task ${taskId}:`,
-      error.error || response.statusText,
-    )
-    throw new Error(`Failed to get embedding: ${error.error || response.statusText}`)
-  }
-
-  const embedData = await response.json()
-
-  // Verify we received the correct type of response
-  if (!embedData.nodes || !Array.isArray(embedData.nodes)) {
-    console.error(
-      `[EssayEmbedding] Invalid response format for task ${taskId}, missing nodes array:`,
-      embedData,
-    )
-    throw new Error(`Invalid response format: missing nodes array`)
-  }
-
-  return embedData
-}
-
-// Add a helper function to safely create dates
-function safeDate(dateStr: string | null | undefined): Date | null {
-  if (!dateStr) return null
+  return axios
+    .get<EssayEmbeddingResponse>(`${API_ENDPOINT}/essays/get`, {
+      params: { task_id: taskId },
+    })
+    .then((resp) => {
+      const embedData = resp.data
+
+      // Verify we received the correct type of response
+      if (!embedData.nodes || !Array.isArray(embedData.nodes)) {
+        console.error(
+          `[EssayEmbedding] Invalid response format for task ${taskId}, missing nodes array:`,
+          embedData,
+        )
+        throw new Error(`Invalid response format: missing nodes array`)
+      }
 
-  try {
-    const date = new Date(dateStr)
-    // Check if date is valid
-    if (isNaN(date.getTime())) {
-      return null
-    }
-    return date
-  } catch (error) {
-    console.error(`Failed to parse date string: ${dateStr}`, error)
-    return null
-  }
+      return embedData
+    })
+    .catch((error) => {
+      console.error(
+        `[EssayEmbedding] Failed to get embedding for task ${taskId}:`,
+        error.response?.data?.error || error.message,
+      )
+      throw new Error(`Failed to get embedding: ${error.response?.data?.error || error.message}`)
+    })
 }
 
 // Save embeddings to database
@@ -289,10 +258,10 @@ async function saveFileEmbeddings(
 }
 
 // Hook for polling embedding status and handling completion
-export function useQueryEssayEmbeddingStatus(taskId: string | null | undefined) {
-  const client = usePGlite()
-  const db = drizzle({ client, schema })
-
+export function useQueryEssayEmbeddingStatus(
+  taskId: string | null | undefined,
+  db: PgliteDatabase<typeof schema>,
+) {
   return useQuery({
     queryKey: ["essayEmbedding", taskId],
     queryFn: async () => {
@@ -492,10 +461,7 @@ export async function submitFileForEmbedding(
 }
 
 // Hook to process pending file embeddings
-export function useProcessPendingEssayEmbeddings() {
-  const client = usePGlite()
-  const db = drizzle({ client, schema })
-
+export function useProcessPendingEssayEmbeddings(db: PgliteDatabase<typeof schema>) {
   return useMutation({
     mutationFn: async (options?: {
       addTask?: (taskId: string) => void
diff --git a/packages/morph/services/notes.ts b/packages/morph/services/notes.ts
index 2772e0c5..c1199867 100644
--- a/packages/morph/services/notes.ts
+++ b/packages/morph/services/notes.ts
@@ -1,10 +1,10 @@
+import { safeDate } from "@/lib"
 import { API_ENDPOINT, POLLING_INTERVAL } from "@/services/constants"
 import { TaskStatusResponse } from "@/services/constants"
 import { useMutation, useQuery } from "@tanstack/react-query"
-import { and, eq, isNull, not } from "drizzle-orm"
-import { PgliteDatabase, drizzle } from "drizzle-orm/pglite"
-
-import { usePGlite } from "@/context/db"
+import axios from "axios"
+import { and, eq, inArray, isNull, not } from "drizzle-orm"
+import { PgliteDatabase } from "drizzle-orm/pglite"
 
 import type { Note } from "@/db/interfaces"
 import * as schema from "@/db/schema"
@@ -40,86 +40,139 @@ export async function checkNoteHasEmbedding(
   return !!embedding
 }
 
-// Submit a note for embedding
-async function submitNoteEmbeddingTask(note: Note): Promise<TaskStatusResponse> {
-  const req: NoteEmbeddingRequest = {
-    vault_id: note.vaultId,
-    file_id: note.fileId,
-    note_id: note.id,
-    content: note.content,
-  }
-  const response = await fetch(`${API_ENDPOINT}/notes/submit`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(req),
-  })
+// Function to log notes for a file (utility function)
+export async function logNotesForFile(
+  db: any,
+  fileId: string,
+  vaultId: string,
+  label: string = "Notes query",
+) {
+  if (process.env.NODE_ENV !== "development") return
+
+  try {
+    console.log(`[Notes Debug] ${label} - Querying all notes for file ${fileId}`)
+
+    // Query all notes for this file
+    const fileNotes = await db
+      .select()
+      .from(schema.notes)
+      .where(and(eq(schema.notes.fileId, fileId), eq(schema.notes.vaultId, vaultId)))
 
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: "Unknown error" }))
-    console.error(
-      `[Embedding] Failed to submit note ${note.id}:`,
-      error.error || response.statusText,
+    const regularNotes = fileNotes.filter((note: any) => !note.dropped)
+    const droppedNotes = fileNotes.filter((note: any) => note.dropped)
+
+    console.log(`[Notes Debug] ${label} - Found ${fileNotes.length} total notes:`)
+    console.log(
+      `[Notes Debug] ${label} - Regular notes: ${regularNotes.length}, Dropped notes: ${droppedNotes.length}`,
     )
-    throw new Error(`Failed to submit note: ${error.error || response.statusText}`)
+
+    // Query all reasonings associated with these notes
+    const reasoningIds = [
+      ...new Set(fileNotes.map((note: any) => note.reasoningId).filter(Boolean)),
+    ] as string[] // Explicitly type as string[]
+
+    if (reasoningIds.length > 0) {
+      console.log(`[Notes Debug] ${label} - Found ${reasoningIds.length} unique reasoning IDs`)
+
+      const reasonings = await db
+        .select()
+        .from(schema.reasonings)
+        .where(inArray(schema.reasonings.id, reasoningIds))
+
+      console.log(
+        `[Notes Debug] ${label} - Retrieved ${reasonings?.length || 0} reasonings from DB`,
+      )
+
+      // Log a summary of each reasoning and its notes
+      for (const reasoning of reasonings) {
+        const notesForReasoning = fileNotes.filter((n: any) => n.reasoningId === reasoning.id)
+        console.log(
+          `[Notes Debug] ${label} - Reasoning ${reasoning.id} has ${notesForReasoning.length} notes:`,
+          notesForReasoning.map((n: any) => ({
+            id: n.id,
+            dropped: n.dropped,
+            embeddingStatus: n.embeddingStatus,
+          })),
+        )
+      }
+    } else {
+      console.log(`[Notes Debug] ${label} - No reasoning IDs found`)
+    }
+
+    return { fileNotes, regularNotes, droppedNotes }
+  } catch (error) {
+    console.error(`[Notes Debug] ${label} - Error querying notes:`, error)
+    return { fileNotes: [], regularNotes: [], droppedNotes: [] }
   }
+}
 
-  const responseData = await response.json()
-  return responseData
+// Submit a note for embedding
+async function submitNoteEmbeddingTask(note: Note): Promise<TaskStatusResponse> {
+  return axios
+    .post<NoteEmbeddingRequest, { data: TaskStatusResponse }>(`${API_ENDPOINT}/notes/submit`, {
+      vault_id: note.vaultId,
+      file_id: note.fileId,
+      note_id: note.id,
+      content: note.content,
+    })
+    .then((resp) => resp.data)
+    .catch((err) => {
+      console.error(
+        `[Embedding] Failed to submit note ${note.id}:`,
+        err.response?.data?.error || err.message,
+      )
+      throw new Error(`Failed to submit note: ${err.response?.data?.error || err.message}`)
+    })
 }
 
 // Check the status of an embedding task
 async function checkNoteEmbeddingTask(taskId: string): Promise<TaskStatusResponse> {
-  try {
-    const response = await fetch(`${API_ENDPOINT}/notes/status?task_id=${taskId}`)
-
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: "Unknown error" }))
+  return axios
+    .get<TaskStatusResponse>(`${API_ENDPOINT}/notes/status`, {
+      params: { task_id: taskId },
+    })
+    .then((resp) => resp.data)
+    .catch((error) => {
       console.error(
         `[Embedding] Status check failed for task ${taskId}:`,
-        error.error || response.statusText,
+        error.response?.data?.error || error.message,
       )
-      throw new Error(`Failed to check status: ${error.error || response.statusText}`)
-    }
-
-    const statusData = await response.json()
-    return statusData
-  } catch (error) {
-    console.error(`[Embedding] Error checking task status for ${taskId}:`, error)
-    // Return a failure status for any errors
-    return {
-      task_id: taskId,
-      status: "failure" as const,
-      created_at: new Date().toISOString(),
-      executed_at: new Date().toISOString(),
-    }
-  }
+      return {
+        task_id: taskId,
+        status: "failure" as const,
+        created_at: new Date().toISOString(),
+        executed_at: new Date().toISOString(),
+      }
+    })
 }
 
 // Get embedding results for a completed task
 async function getNoteEmbeddingTask(taskId: string): Promise<NoteEmbeddingResponse> {
-  const response = await fetch(`${API_ENDPOINT}/notes/get?task_id=${taskId}`)
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: "Unknown error" }))
-    console.error(
-      `[Embedding] Failed to get embedding for task ${taskId}:`,
-      error.error || response.statusText,
-    )
-    throw new Error(`Failed to get embedding: ${error.error || response.statusText}`)
-  }
-
-  const embedData = await response.json()
-
-  // Validate the response is a note embedding response
-  if (!embedData.note_id || !embedData.embedding || !Array.isArray(embedData.embedding)) {
-    console.error(
-      `[Embedding] Invalid note embedding response format for task ${taskId}:`,
-      embedData,
-    )
-    throw new Error(`Invalid response format: missing note_id or embedding array`)
-  }
+  return axios
+    .get<NoteEmbeddingResponse>(`${API_ENDPOINT}/notes/get`, {
+      params: { task_id: taskId },
+    })
+    .then((resp) => {
+      const embedData = resp.data
+
+      // Validate the response is a note embedding response
+      if (!embedData.note_id || !embedData.embedding || !Array.isArray(embedData.embedding)) {
+        console.error(
+          `[Embedding] Invalid note embedding response format for task ${taskId}:`,
+          embedData,
+        )
+        throw new Error(`Invalid response format: missing note_id or embedding array`)
+      }
 
-  return embedData
+      return embedData
+    })
+    .catch((error) => {
+      console.error(
+        `[Embedding] Failed to get embedding for task ${taskId}:`,
+        error.response?.data?.error || error.message,
+      )
+      throw new Error(`Failed to get embedding: ${error.response?.data?.error || error.message}`)
+    })
 }
 
 // Save embedding to database
@@ -206,35 +259,17 @@ async function saveNoteEmbedding(
   }
 }
 
-// Add a helper function to safely create dates
-function safeDate(dateStr: string | null | undefined): Date | null {
-  if (!dateStr) return null
-
-  try {
-    const date = new Date(dateStr)
-    // Check if date is valid
-    if (isNaN(date.getTime())) {
-      return null
-    }
-    return date
-  } catch (error) {
-    console.error(`Failed to parse date string: ${dateStr}`, error)
-    return null
-  }
-}
-
 // Hook for polling embedding status and handling completion
-export function useQueryNoteEmbeddingStatus(taskId: string | null | undefined) {
-  const client = usePGlite()
-  const db = drizzle({ client, schema })
-
+export function useQueryNoteEmbeddingStatus(
+  taskId: string | null | undefined,
+  db: PgliteDatabase<typeof schema>,
+) {
   return useQuery({
     queryKey: ["noteEmbedding", taskId],
     queryFn: async () => {
       if (!taskId) {
         throw new Error("Task ID is required")
       }
-
       try {
         // Check task status
         const statusData = await checkNoteEmbeddingTask(taskId)
@@ -427,10 +462,7 @@ export async function submitNotesForEmbedding(
 }
 
 // Hook to process notes that need embedding
-export function useProcessPendingEmbeddings() {
-  const client = usePGlite()
-  const db = drizzle({ client, schema })
-
+export function useProcessPendingEmbeddings(db: PgliteDatabase<typeof schema>) {
   return useMutation({
     mutationFn: async (options?: { addTask?: (taskId: string) => void }) => {
       const { addTask } = options || {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87710160..721ad060 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -495,6 +495,9 @@ importers:
       '@electric-sql/pglite-react':
         specifier: ^0.2.17
         version: 0.2.17(@electric-sql/pglite@0.2.17)(react@19.1.0)
+      '@electric-sql/pglite-repl':
+        specifier: ^0.2.17
+        version: 0.2.17(@babel/runtime@7.27.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@electric-sql/pglite@0.2.17)(codemirror@6.0.1)
       '@hookform/resolvers':
         specifier: ^4.1.3
         version: 4.1.3(react-hook-form@7.55.0(react@19.1.0))
@@ -603,6 +606,9 @@ importers:
       '@uiw/react-codemirror':
         specifier: ^4.23.10
         version: 4.23.10(@babel/runtime@7.27.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.5)(codemirror@6.0.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      axios:
+        specifier: ^1.8.4
+        version: 1.8.4
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -688,11 +694,11 @@ importers:
         specifier: ^12.6.3
         version: 12.6.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next:
-        specifier: 15.2.2
-        version: 15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3)
+        specifier: 15.3.0-canary.41
+        version: 15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3)
       next-plausible:
         specifier: ^3.12.4
-        version: 3.12.4(next@15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 3.12.4(next@15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -783,6 +789,9 @@ importers:
       shiki:
         specifier: ^1.29.2
         version: 1.29.2
+      sonner:
+        specifier: ^2.0.3
+        version: 2.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       tailwind-merge:
         specifier: ^3.1.0
         version: 3.1.0
@@ -815,8 +824,8 @@ importers:
         version: 3.24.2
     devDependencies:
       '@anthropic-ai/claude-code':
-        specifier: ^0.2.61
-        version: 0.2.61
+        specifier: ^0.2.65
+        version: 0.2.65
       '@eslint/eslintrc':
         specifier: ^3.3.1
         version: 3.3.1
@@ -882,7 +891,7 @@ importers:
         version: 8.5.3
       react-scan:
         specifier: ^0.3.3
-        version: 0.3.3(@types/react@19.1.0)(next@15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 0.3.3(@types/react@19.1.0)(next@15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       tailwindcss:
         specifier: ^4.1.1
         version: 4.1.1
@@ -906,8 +915,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@anthropic-ai/claude-code@0.2.61':
-    resolution: {integrity: sha512-GBSY2hNZg1MdcZpRzGinW3ouwM0vOF16ZaHLC6G9c7lJPtQzHdd228M2n4sUPPvnAUBwe8CQceo4fq01mMgcYw==}
+  '@anthropic-ai/claude-code@0.2.65':
+    resolution: {integrity: sha512-LCxFb/WeHoHfVhQfEQGbGlFURYCm5Brcff4GHD+lVX2N3GtexLTcf0iXElAYz3S2vlWX9km8nGVfB/Yd/ieVUw==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -1122,6 +1131,14 @@ packages:
       '@electric-sql/pglite': ^0.2.17
       react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
+  '@electric-sql/pglite-repl@0.2.17':
+    resolution: {integrity: sha512-gvqYrTc+vPn26MGWH55zkbDQWPETiZ/UNp9OV6gPn7dqfKjnyCRccopmc07zA16Kmv5mBHxI30mab1fq0lTCYA==}
+    peerDependencies:
+      '@electric-sql/pglite': ^0.2.17
+    peerDependenciesMeta:
+      '@electric-sql/pglite':
+        optional: true
+
   '@electric-sql/pglite@0.2.17':
     resolution: {integrity: sha512-qEpKRT2oUaWDH6tjRxLHjdzMqRUGYDnGZlKrnL4dJ77JVMcP2Hpo3NYnOSPKdZdeec57B6QPprCUFg0picx5Pw==}
 
@@ -2297,56 +2314,56 @@ packages:
   '@napi-rs/wasm-runtime@0.2.8':
     resolution: {integrity: sha512-OBlgKdX7gin7OIq4fadsjpg+cp2ZphvAIKucHsNfTdJiqdOmOEwQd/bHi0VwNrcw5xpBJyUw6cK/QilCqy1BSg==}
 
-  '@next/env@15.2.2':
-    resolution: {integrity: sha512-yWgopCfA9XDR8ZH3taB5nRKtKJ1Q5fYsTOuYkzIIoS8TJ0UAUKAGF73JnGszbjk2ufAQDj6mDdgsJAFx5CLtYQ==}
+  '@next/env@15.3.0-canary.41':
+    resolution: {integrity: sha512-M+gqSE/plVT1JEsgyyrstLLWtF1PY0CP80dRxP4qRd7LvI8qJYTLJrFuLojt/WQTdTaCHOOg0F1cmZld+QuT9A==}
 
   '@next/eslint-plugin-next@15.2.2':
     resolution: {integrity: sha512-1+BzokFuFQIfLaRxUKf2u5In4xhPV7tUgKcK53ywvFl6+LXHWHpFkcV7VNeKlyQKUotwiq4fy/aDNF9EiUp4RQ==}
 
-  '@next/swc-darwin-arm64@15.2.2':
-    resolution: {integrity: sha512-HNBRnz+bkZ+KfyOExpUxTMR0Ow8nkkcE6IlsdEa9W/rI7gefud19+Sn1xYKwB9pdCdxIP1lPru/ZfjfA+iT8pw==}
+  '@next/swc-darwin-arm64@15.3.0-canary.41':
+    resolution: {integrity: sha512-p6soiDBtZTzkvhHmmKqag2xo26N77yZvvACmULieLBOqmgz4kbH7GoVW7OetRJcJ4J+3tyWNkJTX17Y2/SwZlg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@15.2.2':
-    resolution: {integrity: sha512-mJOUwp7al63tDpLpEFpKwwg5jwvtL1lhRW2fI1Aog0nYCPAhxbJsaZKdoVyPZCy8MYf/iQVNDuk/+i29iLCzIA==}
+  '@next/swc-darwin-x64@15.3.0-canary.41':
+    resolution: {integrity: sha512-6PwzOqeJn0D8QHB/gJAZ4Ypl9RDMcaqDIKsvWdojXSYVplVxJ9bRrfl+k3MQLV1jBeUSx2IRFRng00/z3iBaxw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@15.2.2':
-    resolution: {integrity: sha512-5ZZ0Zwy3SgMr7MfWtRE7cQWVssfOvxYfD9O7XHM7KM4nrf5EOeqwq67ZXDgo86LVmffgsu5tPO57EeFKRnrfSQ==}
+  '@next/swc-linux-arm64-gnu@15.3.0-canary.41':
+    resolution: {integrity: sha512-Q02F1gYR6jAzbbJRKeCBfGVKqFs3kKWS8PxEOYGCY4sROmFrrtel2fmLiKbdUOWpZ7Uhrij+fqzFXS413W9xhQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@15.2.2':
-    resolution: {integrity: sha512-cgKWBuFMLlJ4TWcFHl1KOaVVUAF8vy4qEvX5KsNd0Yj5mhu989QFCq1WjuaEbv/tO1ZpsQI6h/0YR8bLwEi+nA==}
+  '@next/swc-linux-arm64-musl@15.3.0-canary.41':
+    resolution: {integrity: sha512-XLsAUQyUGszbbGAoJMiMLeJKUSRfLb7PGqrguVBYDX6QQph7siE2be78DvU0nh1CtWJrCyLeyDCLUw7UDdLCUg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@15.2.2':
-    resolution: {integrity: sha512-c3kWSOSsVL8rcNBBfOq1+/j2PKs2nsMwJUV4icUxRgGBwUOfppeh7YhN5s79enBQFU+8xRgVatFkhHU1QW7yUA==}
+  '@next/swc-linux-x64-gnu@15.3.0-canary.41':
+    resolution: {integrity: sha512-4peIAKvJQh633m6vMA6Y+PSuRO3LoW41KKF7MgOgdbsKSXFzY4GAMmItrubMke4FvCyO7raI0Dv0gJjER6dogA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@15.2.2':
-    resolution: {integrity: sha512-PXTW9PLTxdNlVYgPJ0equojcq1kNu5NtwcNjRjHAB+/sdoKZ+X8FBu70fdJFadkxFIGekQTyRvPMFF+SOJaQjw==}
+  '@next/swc-linux-x64-musl@15.3.0-canary.41':
+    resolution: {integrity: sha512-HLq8CkS66WKr96cijy7RhHkuJxRbS7I0oVcbZmL00Lr0t/kO6OPyGRlazjyMQEQgcEsny/4LAvYZL/ZzZMTltg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@15.2.2':
-    resolution: {integrity: sha512-nG644Es5llSGEcTaXhnGWR/aThM/hIaz0jx4MDg4gWC8GfTCp8eDBWZ77CVuv2ha/uL9Ce+nPTfYkSLG67/sHg==}
+  '@next/swc-win32-arm64-msvc@15.3.0-canary.41':
+    resolution: {integrity: sha512-gcY2HlPBuqLGXZ6lEmn0e/T5ae5XUJLP9Rn1UHcuze/RXpVTMEL5VkJw2LOj4VhJpcKs1G5zm7GzfwrjtDd/zw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@15.2.2':
-    resolution: {integrity: sha512-52nWy65S/R6/kejz3jpvHAjZDPKIbEQu4x9jDBzmB9jJfuOy5rspjKu4u77+fI4M/WzLXrrQd57hlFGzz1ubcQ==}
+  '@next/swc-win32-x64-msvc@15.3.0-canary.41':
+    resolution: {integrity: sha512-Ay4afan1UBLu3QjWEZeC2bTpIXLbQDrSsZykRBcpGaQUq113OtM5pMhmPni1qLBtXTIHdLVTgeJjh4duKfZICQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -3561,6 +3578,12 @@ packages:
       '@codemirror/state': '>=6.0.0'
       '@codemirror/view': '>=6.0.0'
 
+  '@uiw/codemirror-theme-github@4.23.10':
+    resolution: {integrity: sha512-jTg2sHAcU1d+8x0O+EBDI71rtJ8PWKIW8gzy+SW4wShQTAdsqGHk5y1ynt3KIeoaUkqngLqAK4SkhPaUKlqZqg==}
+
+  '@uiw/codemirror-theme-xcode@4.23.10':
+    resolution: {integrity: sha512-meYMRLr0mTqGZerihSTKpjceRkxbFfpnXX9RyDZFwloydxzWY/6iGEt1/RMY+cWoxgjBYSiunqtU0qgQH0WAuA==}
+
   '@uiw/codemirror-themes@4.23.10':
     resolution: {integrity: sha512-dU0UgEEgEXCAYpxuVDQ6fovE82XsqgHZckTJOH6Bs8xCi3Z7dwBKO4pXuiA8qGDwTOXOMjSzfi+pRViDm7OfWw==}
     peerDependencies:
@@ -3770,6 +3793,9 @@ packages:
   async-mutex@0.5.0:
     resolution: {integrity: sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3778,6 +3804,9 @@ packages:
     resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
 
+  axios@1.8.4:
+    resolution: {integrity: sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -3939,6 +3968,10 @@ packages:
   colorjs.io@0.5.2:
     resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -4175,6 +4208,10 @@ packages:
   delaunator@5.0.1:
     resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -4663,6 +4700,15 @@ packages:
   flexsearch@0.8.149:
     resolution: {integrity: sha512-VoqwZoEJ9sAsFfkagE7e11B7ZG7C9iz00bPcTpgA8sZnsIeioenpM4DUhlTKRQvpepqoKPPW7kCur7j28pxrpw==}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -4671,6 +4717,10 @@ packages:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
   format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
@@ -5608,8 +5658,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@15.2.2:
-    resolution: {integrity: sha512-dgp8Kcx5XZRjMw2KNwBtUzhngRaURPioxoNIVl5BOyJbhi9CUgEtKDO7fx5wh8Z8vOVX1nYZ9meawJoRrlASYA==}
+  next@15.3.0-canary.41:
+    resolution: {integrity: sha512-jQANaTx8vXRyMUlwOlv4nB2t6rWvQ5K/mXE/lcm4GY1NOcMdOODZEsRFuxr2F/DrUHSGwnHl/RXu+2RKFfNulQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
     peerDependencies:
@@ -5882,9 +5932,15 @@ packages:
   property-information@7.0.0:
     resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   pseudocode@2.4.1:
     resolution: {integrity: sha512-PUslrULyVbqk72+L4D4dvDwD8KPOGazSM9oQhB9a05ab+BPsvwFy6rm/pX6vSFp0IiCa1Isi/lmNE2oHqmr+rw==}
 
+  psql-describe@0.1.6:
+    resolution: {integrity: sha512-cZqmsO1FOTmKZFnwbZxViPzEkH/Kyof/t1O2QI25oN5TEexXl6AXVFNIYpoIVBGm2Ic+ImJDR760zUgBMBv+KQ==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -6417,6 +6473,12 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  sonner@2.0.3:
+    resolution: {integrity: sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -6960,7 +7022,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@anthropic-ai/claude-code@0.2.61':
+  '@anthropic-ai/claude-code@0.2.65':
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.33.5
       '@img/sharp-linux-arm': 0.33.5
@@ -7377,6 +7439,31 @@ snapshots:
       '@electric-sql/pglite': 0.2.17
       react: 19.1.0
 
+  '@electric-sql/pglite-repl@0.2.17(@babel/runtime@7.27.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@electric-sql/pglite@0.2.17)(codemirror@6.0.1)':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.1
+      '@codemirror/lang-sql': 6.8.0
+      '@codemirror/language': 6.11.0
+      '@codemirror/view': 6.36.5
+      '@electric-sql/pglite-react': 0.2.17(@electric-sql/pglite@0.2.17)(react@19.1.0)
+      '@uiw/codemirror-theme-github': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
+      '@uiw/codemirror-theme-xcode': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
+      '@uiw/codemirror-themes': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
+      '@uiw/react-codemirror': 4.23.10(@babel/runtime@7.27.0)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.11.0)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.10)(@codemirror/state@6.5.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.36.5)(codemirror@6.0.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      psql-describe: 0.1.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@electric-sql/pglite': 0.2.17
+    transitivePeerDependencies:
+      - '@babel/runtime'
+      - '@codemirror/lint'
+      - '@codemirror/search'
+      - '@codemirror/state'
+      - '@codemirror/theme-one-dark'
+      - codemirror
+
   '@electric-sql/pglite@0.2.17': {}
 
   '@emnapi/core@1.4.0':
@@ -8177,34 +8264,34 @@ snapshots:
       '@tybys/wasm-util': 0.9.0
     optional: true
 
-  '@next/env@15.2.2': {}
+  '@next/env@15.3.0-canary.41': {}
 
   '@next/eslint-plugin-next@15.2.2':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@15.2.2':
+  '@next/swc-darwin-arm64@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-darwin-x64@15.2.2':
+  '@next/swc-darwin-x64@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@15.2.2':
+  '@next/swc-linux-arm64-gnu@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-linux-arm64-musl@15.2.2':
+  '@next/swc-linux-arm64-musl@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-linux-x64-gnu@15.2.2':
+  '@next/swc-linux-x64-gnu@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-linux-x64-musl@15.2.2':
+  '@next/swc-linux-x64-musl@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@15.2.2':
+  '@next/swc-win32-arm64-msvc@15.3.0-canary.41':
     optional: true
 
-  '@next/swc-win32-x64-msvc@15.2.2':
+  '@next/swc-win32-x64-msvc@15.3.0-canary.41':
     optional: true
 
   '@noble/hashes@1.7.1': {}
@@ -9502,6 +9589,22 @@ snapshots:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.36.5
 
+  '@uiw/codemirror-theme-github@4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/codemirror-theme-xcode@4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
   '@uiw/codemirror-themes@4.23.10(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.5)':
     dependencies:
       '@codemirror/language': 6.11.0
@@ -9703,12 +9806,22 @@ snapshots:
     dependencies:
       tslib: 2.8.0
 
+  asynckit@0.4.0: {}
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
 
   axe-core@4.10.3: {}
 
+  axios@1.8.4:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   axobject-query@4.1.0: {}
 
   bail@2.0.2: {}
@@ -9876,6 +9989,10 @@ snapshots:
 
   colorjs.io@0.5.2: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   comma-separated-tokens@2.0.3: {}
 
   commander@7.2.0: {}
@@ -10126,6 +10243,8 @@ snapshots:
     dependencies:
       robust-predicates: 3.0.2
 
+  delayed-stream@1.0.0: {}
+
   dequal@2.0.3: {}
 
   detect-gpu@5.0.70:
@@ -10772,6 +10891,8 @@ snapshots:
 
   flexsearch@0.8.149: {}
 
+  follow-redirects@1.15.9: {}
+
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
@@ -10781,6 +10902,13 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.18
+
   format@0.2.2: {}
 
   framer-motion@12.6.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
@@ -11957,9 +12085,9 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  next-plausible@3.12.4(next@15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  next-plausible@3.12.4(next@15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      next: 15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3)
+      next: 15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
@@ -11968,9 +12096,9 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  next@15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3):
+  next@15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3):
     dependencies:
-      '@next/env': 15.2.2
+      '@next/env': 15.3.0-canary.41
       '@swc/counter': 0.1.3
       '@swc/helpers': 0.5.15
       busboy: 1.6.0
@@ -11980,14 +12108,14 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       styled-jsx: 5.1.6(@babel/core@7.26.10)(react@19.1.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.2.2
-      '@next/swc-darwin-x64': 15.2.2
-      '@next/swc-linux-arm64-gnu': 15.2.2
-      '@next/swc-linux-arm64-musl': 15.2.2
-      '@next/swc-linux-x64-gnu': 15.2.2
-      '@next/swc-linux-x64-musl': 15.2.2
-      '@next/swc-win32-arm64-msvc': 15.2.2
-      '@next/swc-win32-x64-msvc': 15.2.2
+      '@next/swc-darwin-arm64': 15.3.0-canary.41
+      '@next/swc-darwin-x64': 15.3.0-canary.41
+      '@next/swc-linux-arm64-gnu': 15.3.0-canary.41
+      '@next/swc-linux-arm64-musl': 15.3.0-canary.41
+      '@next/swc-linux-x64-gnu': 15.3.0-canary.41
+      '@next/swc-linux-x64-musl': 15.3.0-canary.41
+      '@next/swc-win32-arm64-msvc': 15.3.0-canary.41
+      '@next/swc-win32-x64-msvc': 15.3.0-canary.41
       sass: 1.80.3
       sharp: 0.33.5
     transitivePeerDependencies:
@@ -12272,12 +12400,16 @@ snapshots:
 
   property-information@7.0.0: {}
 
+  proxy-from-env@1.1.0: {}
+
   pseudocode@2.4.1:
     dependencies:
       katex: 0.16.21
     optionalDependencies:
       mathjax: 3.2.2
 
+  psql-describe@0.1.6: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -12345,7 +12477,7 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  react-scan@0.3.3(@types/react@19.1.0)(next@15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  react-scan@0.3.3(@types/react@19.1.0)(next@15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@babel/core': 7.26.10
       '@babel/generator': 7.27.0
@@ -12367,7 +12499,7 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       tsx: 4.19.3
     optionalDependencies:
-      next: 15.2.2(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3)
+      next: 15.3.0-canary.41(@babel/core@7.26.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.80.3)
       unplugin: 2.1.0
     transitivePeerDependencies:
       - '@types/react'
@@ -13015,6 +13147,11 @@ snapshots:
 
   slash@5.1.0: {}
 
+  sonner@2.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
diff --git a/python/asteraceae/libs/protocol.py b/python/asteraceae/libs/protocol.py
index c04a2056..cf65e2a1 100644
--- a/python/asteraceae/libs/protocol.py
+++ b/python/asteraceae/libs/protocol.py
@@ -112,7 +112,7 @@ class ServiceOpts(t.TypedDict, total=False):
     top_p=0.95,
     max_model_len=48 * 1024,
     max_tokens=32 * 1024,
-    resources={'gpu': 1, 'gpu_type': 'nvidia-a100-80gb'},
+    resources={'gpu': 2, 'gpu_type': 'nvidia-a100-80gb'},
   ),
 }
 
diff --git a/python/asteraceae/service.py b/python/asteraceae/service.py
index d66a9faf..ad5779f0 100644
--- a/python/asteraceae/service.py
+++ b/python/asteraceae/service.py
@@ -183,7 +183,7 @@ def make_args(
   *,
   task: TaskType,
   max_log_len: int = 2000,
-  max_num_seqs: int = 256,
+  max_num_seqs: int = 128,
   max_model_len: int = MAX_MODEL_LEN,
   reasoning: bool = True,
   reasoning_parser: str = 'deepseek_r1',
@@ -256,7 +256,7 @@ def setup_client(self):
   async def init_engine(self) -> None:
     import vllm.entrypoints.openai.api_server as vllm_api_server
 
-    args = make_args(self.model, self.model_id, task='generate', gpu_memory_utilization=0.99)
+    args = make_args(self.model, self.model_id, task='generate', gpu_memory_utilization=0.90)
 
     router = fastapi.APIRouter(lifespan=vllm_api_server.lifespan)
     OPENAI_ENDPOINTS = [