diff --git a/frontend/package.json b/frontend/package.json
index 66154ac..70fe166 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,7 +5,9 @@
   "description": "AI Chat Memory - Capture and review your conversations",
   "author": "Vesti",
   "scripts": {
+    "predev": "pnpm -C ../packages/vesti-content-package build",
     "dev": "plasmo dev",
+    "dev:verbose": "pnpm exec plasmo dev --verbose",
     "prebuild": "pnpm -C ../packages/vesti-content-package build && pnpm -C ../packages/vesti-ui build && pnpm -C .. install --frozen-lockfile",
     "build": "plasmo build",
     "package": "node -e \"console.error('Local packaging is disabled. Use CI workflow extension-package or run pnpm -C frontend package:safe.'); process.exit(1)\"",
diff --git a/packages/vesti-ui/src/tabs/library-tab.tsx b/packages/vesti-ui/src/tabs/library-tab.tsx
index 11b2049..d9b0075 100644
--- a/packages/vesti-ui/src/tabs/library-tab.tsx
+++ b/packages/vesti-ui/src/tabs/library-tab.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useMemo,
   useContext,
+  type ReactNode,
   type FocusEvent,
   type KeyboardEvent,
 } from "react";
@@ -96,12 +97,16 @@ type LibrarySplitContextValue = {
   exitSplit: () => void | Promise<void>;
 };
 
-const LibrarySplitContext = createContext<LibrarySplitContextValue | null>(null);
+const LibrarySplitContext = createContext<LibrarySplitContextValue | null>(
+  null,
+);
 
 function useLibrarySplitContext(): LibrarySplitContextValue {
   const context = useContext(LibrarySplitContext);
   if (!context) {
-    throw new Error("LibrarySplitContext is only available inside LibraryTab split workspace.");
+    throw new Error(
+      "LibrarySplitContext is only available inside LibraryTab split workspace.",
+    );
   }
   return context;
 }
@@ -124,6 +129,38 @@ function SplitNavigationToggle() {
   );
 }
 
+function DetailSectionEyebrow({ children }: { children: string }) {
+  return (
+    <div className="mb-3 text-[11px] font-sans font-medium uppercase tracking-[0.16em] text-text-tertiary">
+      {children}
+    </div>
+  );
+}
+
+function DetailSectionCard({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={`overflow-hidden rounded-[24px] border border-border-subtle bg-bg-surface-card shadow-[0_12px_36px_rgba(15,23,42,0.04)] ${className}`}
+    >
+      {children}
+    </section>
+  );
+}
+
+function MetaChip({ children }: { children: string }) {
+  return (
+    <span className="inline-flex items-center rounded-full bg-bg-secondary px-3 py-1 text-[12px] font-sans text-text-secondary">
+      {children}
+    </span>
+  );
+}
+
 type SplitNoteEditorPanelProps = {
   selectedConversation: Conversation;
   selectedNote: Note | null;
@@ -153,12 +190,8 @@ function SplitNoteEditorPanel({
   onOpenConversation,
   formatTimeAgo,
 }: SplitNoteEditorPanelProps) {
-  const {
-    pendingExcerpts,
-    consumePendingExcerpt,
-    noteSaveStatus,
-    exitSplit,
-  } = useLibrarySplitContext();
+  const { pendingExcerpts, consumePendingExcerpt, noteSaveStatus, exitSplit } =
+    useLibrarySplitContext();
   const splitTextareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -242,7 +275,7 @@ function SplitNoteEditorPanel({
                   placeholder="Extracted excerpts and your notes will appear here..."
                   className="min-h-[520px] w-full resize-none overflow-hidden border-0 bg-transparent px-0 pb-14 text-[13px] leading-[1.75] text-text-primary outline-none placeholder:text-text-tertiary"
                   style={{
-                    fontFamily: "\"JetBrains Mono\", \"SF Mono\", Menlo, monospace",
+                    fontFamily: '"JetBrains Mono", "SF Mono", Menlo, monospace',
                   }}
                 />
                 <button
@@ -294,8 +327,10 @@ function SplitNoteEditorPanel({
                 No note linked yet
               </h2>
               <p className="mt-3 max-w-md text-[13px] font-sans leading-relaxed text-text-secondary">
-                Start extracting from the reader or create a conversation note for
-                {` ${selectedConversation.title}`} to keep your reading and writing side by side.
+                Start extracting from the reader or create a conversation note
+                for
+                {` ${selectedConversation.title}`} to keep your reading and
+                writing side by side.
               </p>
               <button
                 type="button"
@@ -335,40 +370,58 @@ export function LibraryTab({
   const renameFolderTag = storage.renameFolderTag;
   const removeFolderTag = storage.removeFolderTag;
   const [viewMode, setViewMode] = useState<ViewMode>("conversations");
-  const [selectedConversationId, setSelectedConversationId] = useState<number | null>(null);
+  const [selectedConversationId, setSelectedConversationId] = useState<
+    number | null
+  >(null);
   const [selectedNoteId, setSelectedNoteId] = useState<number | null>(null);
-  const [listFilter, setListFilter] = useState<"all" | "starred" | "recent">("all");
+  const [listFilter, setListFilter] = useState<"all" | "starred" | "recent">(
+    "all",
+  );
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
-  const [relatedConversations, setRelatedConversations] = useState<RelatedConversation[]>([]);
+  const [relatedConversations, setRelatedConversations] = useState<
+    RelatedConversation[]
+  >([]);
   const [relatedLoading, setRelatedLoading] = useState(false);
   const [relatedError, setRelatedError] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const [messagesLoading, setMessagesLoading] = useState(false);
-  const [loadedMessagesConversationId, setLoadedMessagesConversationId] = useState<number | null>(
-    null
-  );
+  const [loadedMessagesConversationId, setLoadedMessagesConversationId] =
+    useState<number | null>(null);
   const [messagesError, setMessagesError] = useState<string | null>(null);
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
-  const [annotationDrafts, setAnnotationDrafts] = useState<Record<number, string>>({});
-  const [annotationSaving, setAnnotationSaving] = useState<Record<number, boolean>>({});
-  const [annotationActionBusy, setAnnotationActionBusy] = useState<Record<string, boolean>>({});
-  const [activeAnnotationMessageId, setActiveAnnotationMessageId] = useState<number | null>(null);
-  const [annotationPendingDeleteId, setAnnotationPendingDeleteId] = useState<number | null>(null);
+  const [annotationDrafts, setAnnotationDrafts] = useState<
+    Record<number, string>
+  >({});
+  const [annotationSaving, setAnnotationSaving] = useState<
+    Record<number, boolean>
+  >({});
+  const [annotationActionBusy, setAnnotationActionBusy] = useState<
+    Record<string, boolean>
+  >({});
+  const [activeAnnotationMessageId, setActiveAnnotationMessageId] = useState<
+    number | null
+  >(null);
+  const [annotationPendingDeleteId, setAnnotationPendingDeleteId] = useState<
+    number | null
+  >(null);
   const [annotationNotice, setAnnotationNotice] = useState<{
     tone: "error" | "success";
     message: string;
     annotationId?: number;
   } | null>(null);
-  const [isAnnotationDrawerOverlay, setIsAnnotationDrawerOverlay] = useState(false);
-  const [isAnnotationTriggerAlwaysVisible, setIsAnnotationTriggerAlwaysVisible] =
+  const [isAnnotationDrawerOverlay, setIsAnnotationDrawerOverlay] =
     useState(false);
+  const [
+    isAnnotationTriggerAlwaysVisible,
+    setIsAnnotationTriggerAlwaysVisible,
+  ] = useState(false);
   const [annotationPopoverStyle, setAnnotationPopoverStyle] = useState<{
     top: number;
     left: number;
     width: number;
     maxHeight: number;
   } | null>(null);
-  const [isConversationExpanded, setIsConversationExpanded] = useState(true);
+  const [isConversationExpanded, setIsConversationExpanded] = useState(false);
   const [, setAnalysisData] = useState<{
     summary?: string;
     keyInsights?: string[];
@@ -377,10 +430,16 @@ export function LibraryTab({
   const [summaryLoading, setSummaryLoading] = useState(false);
   const [summaryGenerating, setSummaryGenerating] = useState(false);
   const [summaryExpanded, setSummaryExpanded] = useState(false);
-  const [pipelineStages, setPipelineStages] = useState<PipelineStageState[]>([]);
+  const [pipelineStages, setPipelineStages] = useState<PipelineStageState[]>(
+    [],
+  );
   const [customFolders, setCustomFolders] = useState<string[]>([]);
-  const [openConversationMenuId, setOpenConversationMenuId] = useState<number | null>(null);
-  const [openFolderMenuName, setOpenFolderMenuName] = useState<string | null>(null);
+  const [openConversationMenuId, setOpenConversationMenuId] = useState<
+    number | null
+  >(null);
+  const [openFolderMenuName, setOpenFolderMenuName] = useState<string | null>(
+    null,
+  );
 
   const [notes, setNotes] = useState<Note[]>([]);
   const [notesLoading, setNotesLoading] = useState(false);
@@ -406,7 +465,9 @@ export function LibraryTab({
   const annotationTextareaRef = useRef<HTMLTextAreaElement>(null);
   const annotationSurfaceRef = useRef<HTMLDivElement>(null);
   const annotationDismissInFlightRef = useRef(false);
-  const annotationTriggerRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+  const annotationTriggerRefs = useRef<Map<number, HTMLButtonElement>>(
+    new Map(),
+  );
   const messageContentRefs = useRef<Map<number, HTMLDivElement>>(new Map());
   const conversationPreviewScrollRef = useRef<HTMLDivElement>(null);
   const notesRef = useRef<Note[]>([]);
@@ -452,7 +513,7 @@ export function LibraryTab({
   }
 
   function isPipelineStageStatus(
-    status: string
+    status: string,
   ): status is PipelineStageState["status"] {
     return (
       status === "pending" ||
@@ -487,12 +548,14 @@ export function LibraryTab({
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(min-width: 1024px)");
-    const syncSplitAvailability = () => setIsDesktopSplitAvailable(mediaQuery.matches);
+    const syncSplitAvailability = () =>
+      setIsDesktopSplitAvailable(mediaQuery.matches);
 
     syncSplitAvailability();
     if (typeof mediaQuery.addEventListener === "function") {
       mediaQuery.addEventListener("change", syncSplitAvailability);
-      return () => mediaQuery.removeEventListener("change", syncSplitAvailability);
+      return () =>
+        mediaQuery.removeEventListener("change", syncSplitAvailability);
     }
 
     mediaQuery.addListener(syncSplitAvailability);
@@ -545,7 +608,7 @@ export function LibraryTab({
       { [FOLDER_META_KEY]: { customFolders: nextCustom } },
       () => {
         void chrome.runtime?.lastError;
-      }
+      },
     );
   };
 
@@ -579,7 +642,7 @@ export function LibraryTab({
     syncNotionConfig();
     const listener = (
       changes: Record<string, chrome.storage.StorageChange>,
-      areaName: string
+      areaName: string,
     ) => {
       if (areaName !== "local" || !changes[NOTION_SETTINGS_KEY]) return;
       syncNotionConfig();
@@ -631,18 +694,15 @@ export function LibraryTab({
       .finally(() => setSummaryLoading(false));
   }, [selectedConversationId, storage]);
 
-  useEffect(() => {
-    setIsConversationExpanded(true);
-    setSummaryExpanded(false);
-  }, [selectedConversationId]);
-
   useEffect(() => {
     if (!selectedConversationId) {
       setHasLinkedNote(false);
       return;
     }
     setHasLinkedNote(
-      notes.some((note) => note.linked_conversation_ids.includes(selectedConversationId))
+      notes.some((note) =>
+        note.linked_conversation_ids.includes(selectedConversationId),
+      ),
     );
   }, [selectedConversationId, notes]);
 
@@ -667,7 +727,7 @@ export function LibraryTab({
         if (!cancelled) {
           setRelatedConversations([]);
           setRelatedError(
-            (error as Error)?.message ?? "Failed to load related conversations"
+            (error as Error)?.message ?? "Failed to load related conversations",
           );
         }
       } finally {
@@ -706,7 +766,7 @@ export function LibraryTab({
         if (!cancelled) {
           setMessages([]);
           setMessagesError(
-            (error as Error)?.message ?? "Failed to load messages"
+            (error as Error)?.message ?? "Failed to load messages",
           );
         }
       } finally {
@@ -768,7 +828,8 @@ export function LibraryTab({
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 1279px)");
-    const syncOverlayMode = () => setIsAnnotationDrawerOverlay(mediaQuery.matches);
+    const syncOverlayMode = () =>
+      setIsAnnotationDrawerOverlay(mediaQuery.matches);
 
     syncOverlayMode();
     if (typeof mediaQuery.addEventListener === "function") {
@@ -783,12 +844,14 @@ export function LibraryTab({
   useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(hover: none), (pointer: coarse)");
-    const syncTriggerVisibility = () => setIsAnnotationTriggerAlwaysVisible(mediaQuery.matches);
+    const syncTriggerVisibility = () =>
+      setIsAnnotationTriggerAlwaysVisible(mediaQuery.matches);
 
     syncTriggerVisibility();
     if (typeof mediaQuery.addEventListener === "function") {
       mediaQuery.addEventListener("change", syncTriggerVisibility);
-      return () => mediaQuery.removeEventListener("change", syncTriggerVisibility);
+      return () =>
+        mediaQuery.removeEventListener("change", syncTriggerVisibility);
     }
 
     mediaQuery.addListener(syncTriggerVisibility);
@@ -811,7 +874,7 @@ export function LibraryTab({
     annotationTextareaRef.current.focus();
     annotationTextareaRef.current.setSelectionRange(
       annotationTextareaRef.current.value.length,
-      annotationTextareaRef.current.value.length
+      annotationTextareaRef.current.value.length,
     );
   }, [activeAnnotationMessageId]);
 
@@ -828,17 +891,20 @@ export function LibraryTab({
       return;
     }
 
-    const trigger = annotationTriggerRefs.current.get(activeAnnotationMessageId);
+    const trigger = annotationTriggerRefs.current.get(
+      activeAnnotationMessageId,
+    );
     const container = conversationPreviewScrollRef.current;
     if (!trigger || !container) return;
 
     const triggerRect = trigger.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
     const width = Math.min(360, Math.max(240, container.clientWidth - 24));
-    const top = triggerRect.bottom - containerRect.top + container.scrollTop + 8;
+    const top =
+      triggerRect.bottom - containerRect.top + container.scrollTop + 8;
     const left = Math.min(
       Math.max(triggerRect.right - containerRect.left - width, 12),
-      Math.max(12, container.clientWidth - width - 12)
+      Math.max(12, container.clientWidth - width - 12),
     );
 
     setAnnotationPopoverStyle({
@@ -847,13 +913,18 @@ export function LibraryTab({
       width,
       maxHeight: Math.min(360, Math.max(180, container.clientHeight - 24)),
     });
-  }, [activeAnnotationMessageId, isAnnotationDrawerOverlay, isConversationExpanded]);
+  }, [
+    activeAnnotationMessageId,
+    isAnnotationDrawerOverlay,
+    isConversationExpanded,
+  ]);
 
   // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + "px";
     }
   }, [noteContent]);
 
@@ -878,14 +949,19 @@ export function LibraryTab({
     }
   }, [renameNoteTarget]);
 
-  const selectedConversation = conversations.find((c) => c.id === selectedConversationId);
+  const selectedConversation = conversations.find(
+    (c) => c.id === selectedConversationId,
+  );
   const selectedNote = notes.find((n) => n.id === selectedNoteId);
   const activeAnnotationMessage =
     activeAnnotationMessageId !== null
-      ? messages.find((message) => message.id === activeAnnotationMessageId) ?? null
+      ? messages.find((message) => message.id === activeAnnotationMessageId) ??
+        null
       : null;
   const activeAnnotationDraft =
-    activeAnnotationMessageId !== null ? annotationDrafts[activeAnnotationMessageId] ?? "" : "";
+    activeAnnotationMessageId !== null
+      ? annotationDrafts[activeAnnotationMessageId] ?? ""
+      : "";
   const annotationsByMessage = useMemo(() => {
     const map = new Map<number, Annotation[]>();
     annotations
@@ -908,15 +984,17 @@ export function LibraryTab({
   const renameNoteTrimmed = renameNoteTitle.trim();
   const canSaveRenamedNote = Boolean(
     renameNoteTarget &&
-    storage.updateNote &&
-    renameNoteTrimmed &&
-    renameNoteTrimmed !== renameNoteTarget.title
+      storage.updateNote &&
+      renameNoteTrimmed &&
+      renameNoteTrimmed !== renameNoteTarget.title,
   );
   const messageCount = messages.length;
   const timestampFooter = useMemo(
     () =>
-      selectedConversation ? buildReaderTimestampFooterModel(selectedConversation) : null,
-    [selectedConversation]
+      selectedConversation
+        ? buildReaderTimestampFooterModel(selectedConversation)
+        : null,
+    [selectedConversation],
   );
   const isConversationContentSettled =
     selectedConversation !== undefined &&
@@ -924,23 +1002,49 @@ export function LibraryTab({
     !messagesLoading &&
     loadedMessagesConversationId === selectedConversation.id;
   const messageDate =
-    messages.length > 0 ? messages[0].created_at : selectedConversation?.updated_at;
+    messages.length > 0
+      ? messages[0].created_at
+      : selectedConversation?.updated_at;
   const renderedNoteContent = useMemo(() => {
     if (!noteContent.trim()) return "";
-    const html = marked.parse(noteContent, { gfm: true, breaks: true }) as string;
+    const html = marked.parse(noteContent, {
+      gfm: true,
+      breaks: true,
+    }) as string;
     return DOMPurify.sanitize(html);
   }, [noteContent]);
   const normalizeTags = (value: unknown): string[] => {
     if (!Array.isArray(value)) return [];
-    return value.filter((tag): tag is string => typeof tag === "string" && tag.trim().length > 0);
+    return value.filter(
+      (tag): tag is string => typeof tag === "string" && tag.trim().length > 0,
+    );
   };
 
   const activeTags = normalizeTags(selectedConversation?.tags);
-  const activeTopicName =
-    selectedConversation?.topic_id
-      ? findTopicById(topics, selectedConversation.topic_id)?.name
-      : undefined;
+  const activeTopicName = selectedConversation?.topic_id
+    ? findTopicById(topics, selectedConversation.topic_id)?.name
+    : undefined;
   const hasAnalysis = Boolean(activeTags.length > 0 || activeTopicName);
+  const overviewSectionLabel = activeTopicName ?? activeTags[0] ?? "General";
+  const relatedNotesForConversation = useMemo(
+    () =>
+      selectedConversation
+        ? getConversationLinkedNotes(selectedConversation.id)
+        : [],
+    [notes, selectedConversation],
+  );
+  const originalConversationPreview = useMemo(() => {
+    if (messagesLoading) {
+      return "Loading messages...";
+    }
+    if (messages.length === 0) {
+      return "No messages captured yet.";
+    }
+    const preview = buildMessagePreviewText(messages[0], {
+      maxChars: 160,
+    }).trim();
+    return preview || "Messages are available, but preview text is empty.";
+  }, [messages, messagesLoading]);
   const tagCounts = useMemo(() => {
     const counts = new Map<string, number>();
     for (const conversation of conversations) {
@@ -956,11 +1060,14 @@ export function LibraryTab({
   }, [conversations]);
 
   const starredCount = useMemo(
-    () => conversations.filter((conversation) => conversation.is_starred).length,
-    [conversations]
+    () =>
+      conversations.filter((conversation) => conversation.is_starred).length,
+    [conversations],
   );
   const recentConversations = useMemo(() => {
-    const sorted = [...conversations].sort((a, b) => b.updated_at - a.updated_at);
+    const sorted = [...conversations].sort(
+      (a, b) => b.updated_at - a.updated_at,
+    );
     return sorted.slice(0, 20);
   }, [conversations]);
   const folderItems = useMemo<FolderItem[]>(() => {
@@ -1000,17 +1107,25 @@ export function LibraryTab({
       ? conversations.filter((conversation) => conversation.is_starred)
       : listFilter === "recent"
         ? recentConversations
-      : conversations;
+        : conversations;
   const tagFilteredConversations = selectedTag
     ? baseConversations.filter((conversation) =>
-        normalizeTags(conversation.tags).includes(selectedTag)
+        normalizeTags(conversation.tags).includes(selectedTag),
       )
     : baseConversations;
 
   const filteredConversations = tagFilteredConversations;
   const isSplitActive =
-    workspaceMode === "split" && isDesktopSplitAvailable && Boolean(selectedConversation);
+    workspaceMode === "split" &&
+    isDesktopSplitAvailable &&
+    Boolean(selectedConversation);
   const isReaderConversationExpanded = isSplitActive || isConversationExpanded;
+  const canToggleConversationExpanded = !isSplitActive && messageCount > 0;
+
+  useEffect(() => {
+    setIsConversationExpanded(isSplitActive);
+    setSummaryExpanded(false);
+  }, [selectedConversationId, isSplitActive]);
 
   useEffect(() => {
     if (typeof openConversationId !== "number") return;
@@ -1020,7 +1135,12 @@ export function LibraryTab({
       });
     }
     onConversationOpened?.();
-  }, [isSplitActive, openConversationId, onConversationOpened, selectedConversationId]);
+  }, [
+    isSplitActive,
+    openConversationId,
+    onConversationOpened,
+    selectedConversationId,
+  ]);
 
   function clearPendingNotePersistTimer() {
     if (notePersistTimerRef.current !== null) {
@@ -1036,7 +1156,10 @@ export function LibraryTab({
   }
 
   function resolveConversationSplitNote(conversationId: number): Note | null {
-    if (selectedNote && selectedNote.linked_conversation_ids.includes(conversationId)) {
+    if (
+      selectedNote &&
+      selectedNote.linked_conversation_ids.includes(conversationId)
+    ) {
       return selectedNote;
     }
     return getConversationLinkedNotes(conversationId)[0] ?? null;
@@ -1068,7 +1191,9 @@ export function LibraryTab({
         title: draft.title,
         content: draft.content,
       });
-      setNotes((prev) => prev.map((note) => (note.id === updated.id ? updated : note)));
+      setNotes((prev) =>
+        prev.map((note) => (note.id === updated.id ? updated : note)),
+      );
       setNoteSaveStatus("saved");
     } catch (error) {
       console.error("[library] updateNote failed", error);
@@ -1078,7 +1203,7 @@ export function LibraryTab({
 
   async function ensureConversationNote(
     conversationId: number,
-    options?: { createIfMissing?: boolean }
+    options?: { createIfMissing?: boolean },
   ): Promise<Note | null> {
     const existingNote = resolveConversationSplitNote(conversationId);
     if (existingNote) {
@@ -1091,13 +1216,18 @@ export function LibraryTab({
       return null;
     }
 
-    const conversation = conversations.find((item) => item.id === conversationId);
+    const conversation = conversations.find(
+      (item) => item.id === conversationId,
+    );
     const createdNote = await storage.saveNote({
       title: conversation?.title ?? "Untitled",
       content: "",
       linked_conversation_ids: [conversationId],
     });
-    setNotes((prev) => [createdNote, ...prev.filter((note) => note.id !== createdNote.id)]);
+    setNotes((prev) => [
+      createdNote,
+      ...prev.filter((note) => note.id !== createdNote.id),
+    ]);
     setSelectedNoteId(createdNote.id);
     return createdNote;
   }
@@ -1114,7 +1244,9 @@ export function LibraryTab({
   }
 
   function consumePendingExcerpt(excerptId: string) {
-    setPendingExcerpts((prev) => prev.filter((excerpt) => excerpt.id !== excerptId));
+    setPendingExcerpts((prev) =>
+      prev.filter((excerpt) => excerpt.id !== excerptId),
+    );
   }
 
   function appendExcerptToDraft(excerpt: PendingExcerpt) {
@@ -1163,7 +1295,7 @@ export function LibraryTab({
       resetFilters?: boolean;
       closeNavigation?: boolean;
       resetSelectedNote?: boolean;
-    }
+    },
   ) {
     await flushPendingNoteSave();
     setViewMode("conversations");
@@ -1205,13 +1337,15 @@ export function LibraryTab({
             ...summaryData.thinking_journey.map(
               (item) =>
                 `**Step ${item.step} · ${item.speaker}**: ${item.assertion}${
-                  item.real_world_anchor ? `\n  _Example: ${item.real_world_anchor}_` : ""
-                }`
+                  item.real_world_anchor
+                    ? `\n  _Example: ${item.real_world_anchor}_`
+                    : ""
+                }`,
             ),
             "",
             "### Key Insights",
             ...summaryData.key_insights.map(
-              (item) => `**${item.term}**: ${item.definition}`
+              (item) => `**${item.term}**: ${item.definition}`,
             ),
             "",
             "### Unresolved Threads",
@@ -1226,7 +1360,10 @@ export function LibraryTab({
         content,
         linked_conversation_ids: [selectedConversationId],
       });
-      setNotes((prev) => [note as Note, ...prev.filter((item) => item.id !== note?.id)]);
+      setNotes((prev) => [
+        note as Note,
+        ...prev.filter((item) => item.id !== note?.id),
+      ]);
       setSelectedNoteId(note.id);
     }
     if (!note) return;
@@ -1276,7 +1413,7 @@ export function LibraryTab({
   function updateReaderSelectionAction(
     message: Message,
     messageIndex: number,
-    element: HTMLDivElement | null
+    element: HTMLDivElement | null,
   ) {
     if (!element || !selectedConversation || !isDesktopSplitAvailable) {
       setReaderSelectionAction(null);
@@ -1293,7 +1430,12 @@ export function LibraryTab({
     const anchorNode = selection.anchorNode;
     const focusNode = selection.focusNode;
 
-    if (!anchorNode || !focusNode || !element.contains(anchorNode) || !element.contains(focusNode)) {
+    if (
+      !anchorNode ||
+      !focusNode ||
+      !element.contains(anchorNode) ||
+      !element.contains(focusNode)
+    ) {
       setReaderSelectionAction(null);
       return;
     }
@@ -1310,13 +1452,15 @@ export function LibraryTab({
       return;
     }
 
-    const maxLeft = typeof window !== "undefined" ? window.innerWidth - 148 : rect.left;
+    const maxLeft =
+      typeof window !== "undefined" ? window.innerWidth - 148 : rect.left;
     setReaderSelectionAction({
       id: `${message.id}-${Date.now()}`,
       conversationId: selectedConversation.id,
       messageId: message.id,
       messageIndex,
-      sourceLabel: message.role === "user" ? "You" : selectedConversation.platform,
+      sourceLabel:
+        message.role === "user" ? "You" : selectedConversation.platform,
       content,
       top: Math.max(12, rect.bottom + 10),
       left: Math.max(12, Math.min(rect.left + rect.width / 2 - 60, maxLeft)),
@@ -1346,7 +1490,9 @@ export function LibraryTab({
     }
 
     if (!selectedNoteId || !storage.updateNote) return;
-    const baseline = notesRef.current.find((note) => note.id === selectedNoteId);
+    const baseline = notesRef.current.find(
+      (note) => note.id === selectedNoteId,
+    );
     if (!baseline) return;
 
     if (baseline.title === noteTitle && baseline.content === noteContent) {
@@ -1412,7 +1558,7 @@ export function LibraryTab({
     if (!trimmed) return;
     const normalized = trimmed.toLowerCase();
     const exists = folderItems.some(
-      (item) => item.name.trim().toLowerCase() === normalized
+      (item) => item.name.trim().toLowerCase() === normalized,
     );
     if (exists) {
       window.alert("A folder with that name already exists.");
@@ -1435,7 +1581,7 @@ export function LibraryTab({
     const exists = folderItems.some(
       (folder) =>
         folder.name.trim().toLowerCase() === normalized &&
-        folder.name.trim().toLowerCase() !== item.name.trim().toLowerCase()
+        folder.name.trim().toLowerCase() !== item.name.trim().toLowerCase(),
     );
     if (exists) {
       window.alert("A folder with that name already exists.");
@@ -1444,7 +1590,7 @@ export function LibraryTab({
 
     const currentKey = item.name.trim().toLowerCase();
     const nextCustom = customFolders.map((folder) =>
-      folder.trim().toLowerCase() === currentKey ? trimmed : folder
+      folder.trim().toLowerCase() === currentKey ? trimmed : folder,
     );
 
     if (item.isTag) {
@@ -1473,7 +1619,7 @@ export function LibraryTab({
 
     const currentKey = item.name.trim().toLowerCase();
     let nextCustom = customFolders.filter(
-      (folder) => folder.trim().toLowerCase() !== currentKey
+      (folder) => folder.trim().toLowerCase() !== currentKey,
     );
 
     if (item.isTag) {
@@ -1540,7 +1686,9 @@ export function LibraryTab({
       await updateConversationTitle(conversation.id, trimmed);
       await refresh();
     } catch (error) {
-      window.alert((error as Error)?.message ?? "Failed to rename conversation.");
+      window.alert(
+        (error as Error)?.message ?? "Failed to rename conversation.",
+      );
     }
   };
 
@@ -1558,14 +1706,18 @@ export function LibraryTab({
     let nextTags = dedupeTagList(normalizeTags(conversation.tags));
     if (selectedKey) {
       nextTags = nextTags.filter(
-        (tag) => tag.trim().toLowerCase() !== selectedKey
+        (tag) => tag.trim().toLowerCase() !== selectedKey,
       );
     }
     nextTags = dedupeTagList([...nextTags, trimmed]).slice(0, 6);
 
     try {
       await updateConversation(conversation.id, { tags: nextTags });
-      if (!customFolders.some((folder) => folder.trim().toLowerCase() === trimmed.toLowerCase())) {
+      if (
+        !customFolders.some(
+          (folder) => folder.trim().toLowerCase() === trimmed.toLowerCase(),
+        )
+      ) {
         persistFolderMeta([...customFolders, trimmed]);
       }
       await refresh();
@@ -1574,7 +1726,9 @@ export function LibraryTab({
     }
   };
 
-  const handleConversationRemoveFromFolder = async (conversation: Conversation) => {
+  const handleConversationRemoveFromFolder = async (
+    conversation: Conversation,
+  ) => {
     if (!updateConversation) {
       window.alert("Removing from folder is not available yet.");
       return;
@@ -1585,12 +1739,16 @@ export function LibraryTab({
     }
     const selectedKey = selectedTag.trim().toLowerCase();
     let nextTags = dedupeTagList(normalizeTags(conversation.tags));
-    nextTags = nextTags.filter((tag) => tag.trim().toLowerCase() !== selectedKey);
+    nextTags = nextTags.filter(
+      (tag) => tag.trim().toLowerCase() !== selectedKey,
+    );
     try {
       await updateConversation(conversation.id, { tags: nextTags });
       await refresh();
     } catch (error) {
-      window.alert((error as Error)?.message ?? "Failed to remove from folder.");
+      window.alert(
+        (error as Error)?.message ?? "Failed to remove from folder.",
+      );
     }
   };
 
@@ -1605,7 +1763,9 @@ export function LibraryTab({
       await deleteConversation(conversation.id);
       await refresh();
     } catch (error) {
-      window.alert((error as Error)?.message ?? "Failed to delete conversation.");
+      window.alert(
+        (error as Error)?.message ?? "Failed to delete conversation.",
+      );
     }
   };
 
@@ -1648,7 +1808,9 @@ export function LibraryTab({
       const updated = await storage.updateNote(renameNoteTarget.id, {
         title: trimmedTitle,
       });
-      setNotes((prev) => prev.map((note) => (note.id === updated.id ? updated : note)));
+      setNotes((prev) =>
+        prev.map((note) => (note.id === updated.id ? updated : note)),
+      );
       if (selectedNoteId === updated.id) {
         setNoteTitle(updated.title);
       }
@@ -1683,12 +1845,17 @@ export function LibraryTab({
     return annotationsByMessage.get(messageId) ?? [];
   }
 
-  function getLatestAnnotationForMessage(messageId: number): Annotation | undefined {
+  function getLatestAnnotationForMessage(
+    messageId: number,
+  ): Annotation | undefined {
     const items = getAnnotationsForMessage(messageId);
     return items[items.length - 1];
   }
 
-  function setAnnotationTriggerRef(messageId: number, node: HTMLButtonElement | null) {
+  function setAnnotationTriggerRef(
+    messageId: number,
+    node: HTMLButtonElement | null,
+  ) {
     if (node) {
       annotationTriggerRefs.current.set(messageId, node);
       return;
@@ -1696,7 +1863,10 @@ export function LibraryTab({
     annotationTriggerRefs.current.delete(messageId);
   }
 
-  function setMessageContentRef(messageId: number, node: HTMLDivElement | null) {
+  function setMessageContentRef(
+    messageId: number,
+    node: HTMLDivElement | null,
+  ) {
     if (node) {
       messageContentRefs.current.set(messageId, node);
       return;
@@ -1705,7 +1875,10 @@ export function LibraryTab({
   }
 
   function isAnnotationTriggerTarget(target: EventTarget | null): boolean {
-    return target instanceof Element && Boolean(target.closest("[data-annotation-trigger='true']"));
+    return (
+      target instanceof Element &&
+      Boolean(target.closest("[data-annotation-trigger='true']"))
+    );
   }
 
   function openAnnotationPanel(message: Message) {
@@ -1753,7 +1926,7 @@ export function LibraryTab({
     options?: {
       closeOnComplete?: boolean;
       silentIfEmpty?: boolean;
-    }
+    },
   ): Promise<"saved" | "empty" | "error"> => {
     if (!selectedConversationId || !saveAnnotation) {
       setAnnotationNotice({
@@ -1780,7 +1953,9 @@ export function LibraryTab({
         contentText: draft,
       });
       setAnnotations((prev) => {
-        return [...prev, annotation].sort((a, b) => a.created_at - b.created_at);
+        return [...prev, annotation].sort(
+          (a, b) => a.created_at - b.created_at,
+        );
       });
       setAnnotationDrafts((prev) => ({
         ...prev,
@@ -1861,7 +2036,9 @@ export function LibraryTab({
     setAnnotationNotice(null);
     try {
       await deleteAnnotation(annotation.id);
-      setAnnotations((prev) => prev.filter((item) => item.id !== annotation.id));
+      setAnnotations((prev) =>
+        prev.filter((item) => item.id !== annotation.id),
+      );
       setAnnotationPendingDeleteId(null);
       setAnnotationNotice(null);
     } catch (error) {
@@ -1928,7 +2105,8 @@ export function LibraryTab({
       const message =
         error instanceof Error && error.message === "NOTION_SETTINGS_MISSING"
           ? "Connect to Notion and choose a database in Settings before exporting."
-          : error instanceof Error && error.message === "NOTION_RECONNECT_REQUIRED"
+          : error instanceof Error &&
+              error.message === "NOTION_RECONNECT_REQUIRED"
             ? "Your Notion session expired. Reconnect in Settings and try again."
             : "Couldn't export this comment to Notion.";
       setAnnotationNotice({
@@ -1954,7 +2132,9 @@ export function LibraryTab({
     return `${Math.floor(months / 12)}y ago`;
   }
 
-  function handleAnnotationComposerBlur(event: FocusEvent<HTMLTextAreaElement>) {
+  function handleAnnotationComposerBlur(
+    event: FocusEvent<HTMLTextAreaElement>,
+  ) {
     const nextTarget = event.relatedTarget;
     if (
       (nextTarget && annotationSurfaceRef.current?.contains(nextTarget)) ||
@@ -1966,7 +2146,9 @@ export function LibraryTab({
     void dismissAnnotationSurface();
   }
 
-  function handleAnnotationComposerKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+  function handleAnnotationComposerKeyDown(
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) {
     if (event.key !== "Enter" || (!event.metaKey && !event.ctrlKey)) return;
     event.preventDefault();
     if (!activeAnnotationMessage) return;
@@ -1979,7 +2161,8 @@ export function LibraryTab({
     const handlePointerDown = (event: MouseEvent) => {
       const target = event.target;
       if (
-        (target instanceof Node && annotationSurfaceRef.current?.contains(target)) ||
+        (target instanceof Node &&
+          annotationSurfaceRef.current?.contains(target)) ||
         isAnnotationTriggerTarget(target)
       ) {
         return;
@@ -1999,13 +2182,17 @@ export function LibraryTab({
       document.removeEventListener("mousedown", handlePointerDown);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isAnnotationPanelOpen, isAnnotationDrawerOverlay, activeAnnotationMessage]);
+  }, [
+    isAnnotationPanelOpen,
+    isAnnotationDrawerOverlay,
+    activeAnnotationMessage,
+  ]);
 
   useEffect(() => {
     if (annotationNotice?.tone !== "success") return;
     const timer = window.setTimeout(() => {
       setAnnotationNotice((current) =>
-        current?.tone === "success" ? null : current
+        current?.tone === "success" ? null : current,
       );
     }, 1800);
     return () => window.clearTimeout(timer);
@@ -2018,7 +2205,9 @@ export function LibraryTab({
       <>
         <div className="border-b border-border-subtle px-4 py-4">
           <div className="text-[11px] font-sans uppercase tracking-[0.16em] text-text-tertiary">
-            {activeAnnotationMessage.role === "user" ? "You" : selectedConversation.platform}
+            {activeAnnotationMessage.role === "user"
+              ? "You"
+              : selectedConversation.platform}
           </div>
           <p className="mt-1 text-[13px] font-sans leading-relaxed text-text-secondary">
             {getAnnotationPreview(activeAnnotationMessage)}
@@ -2036,9 +2225,11 @@ export function LibraryTab({
         {activeMessageAnnotations.length > 0 ? (
           <div className="divide-y divide-border-subtle px-4">
             {activeMessageAnnotations.map((annotation) => {
-              const isDeleteBusy = annotationActionBusy[`delete:${annotation.id}`];
+              const isDeleteBusy =
+                annotationActionBusy[`delete:${annotation.id}`];
               const isNoteBusy = annotationActionBusy[`note:${annotation.id}`];
-              const isNotionBusy = annotationActionBusy[`notion:${annotation.id}`];
+              const isNotionBusy =
+                annotationActionBusy[`notion:${annotation.id}`];
               const inlineSuccessNotice =
                 annotationNotice?.tone === "success" &&
                 annotationNotice.annotationId === annotation.id
@@ -2093,7 +2284,9 @@ export function LibraryTab({
                     >
                       <button
                         type="button"
-                        onClick={() => void handleExportAnnotationToNote(annotation)}
+                        onClick={() =>
+                          void handleExportAnnotationToNote(annotation)
+                        }
                         disabled={Boolean(isNoteBusy)}
                         className="inline-flex items-center gap-1 text-text-secondary hover:text-text-primary disabled:opacity-50"
                       >
@@ -2102,8 +2295,12 @@ export function LibraryTab({
                       </button>
                       <button
                         type="button"
-                        onClick={() => void handleExportAnnotationToNotion(annotation)}
-                        disabled={Boolean(isNotionBusy) || !hasNotionExportConfig}
+                        onClick={() =>
+                          void handleExportAnnotationToNotion(annotation)
+                        }
+                        disabled={
+                          Boolean(isNotionBusy) || !hasNotionExportConfig
+                        }
                         className="inline-flex items-center gap-1 text-text-secondary hover:text-text-primary disabled:opacity-50"
                         title={
                           hasNotionExportConfig
@@ -2116,7 +2313,9 @@ export function LibraryTab({
                       </button>
                       <button
                         type="button"
-                        onClick={() => setAnnotationPendingDeleteId(annotation.id)}
+                        onClick={() =>
+                          setAnnotationPendingDeleteId(annotation.id)
+                        }
                         className="inline-flex items-center gap-1 text-[#B42318] hover:text-[#922018]"
                       >
                         <Trash2 strokeWidth={1.6} className="h-3.5 w-3.5" />
@@ -2140,7 +2339,10 @@ export function LibraryTab({
             ref={annotationTextareaRef}
             value={activeAnnotationDraft}
             onChange={(event) =>
-              updateAnnotationDraft(activeAnnotationMessage.id, event.target.value)
+              updateAnnotationDraft(
+                activeAnnotationMessage.id,
+                event.target.value,
+              )
             }
             onBlur={handleAnnotationComposerBlur}
             onKeyDown={handleAnnotationComposerKeyDown}
@@ -2205,1461 +2407,1684 @@ export function LibraryTab({
         </div>
       ) : null}
       <LibrarySplitContext.Provider value={splitContextValue}>
-      <div className="relative flex min-h-0 flex-1 overflow-hidden">
-        <SplitNavigationToggle />
-        {isSplitActive && isSplitNavigationOpen ? (
-          <button
-            type="button"
-            className="absolute inset-0 z-20 bg-black/10 backdrop-blur-[1px]"
-            onClick={() => setIsSplitNavigationOpen(false)}
-            aria-label="Close library navigation"
-          />
-        ) : null}
-        <div
-          className={`${
-            isSplitActive
-              ? "absolute inset-y-0 left-0 z-30 flex w-[520px] max-w-[calc(100%-32px)] overflow-hidden transition-[transform,opacity] duration-300 ease-out"
-              : "flex shrink-0"
-          } ${
-            isSplitActive
-              ? isSplitNavigationOpen
-                ? "translate-x-0 opacity-100"
-                : "-translate-x-[calc(100%+16px)] opacity-0 pointer-events-none"
-              : ""
-          }`}
-        >
-        {/* Left Column - Sidebar (200px) */}
-        <aside className="w-[200px] bg-bg-secondary flex flex-col">
-        <div className="px-2 pt-3 pb-2">
-          <button
-            onClick={() => {
-              void flushPendingNoteSave();
-              setViewMode("conversations");
-              setListFilter("all");
-              setSelectedTag(null);
-              setSelectedConversationId(null);
-              setIsSplitNavigationOpen(false);
-            }}
-            className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
-              isAllActive ? "bg-accent-primary-light" : "hover:bg-bg-surface-card"
-            }`}
-          >
-            <List
-              strokeWidth={1.5}
-              className={`w-4 h-4 ${isAllActive ? "text-accent-primary" : "text-text-secondary"}`}
-            />
-            <span
-              className={`flex-1 text-sm font-sans ${
-                isAllActive ? "text-accent-primary" : "text-text-primary"
-              }`}
-            >
-              All Conversations
-            </span>
-            <span className="text-xs font-sans text-text-tertiary">{conversations.length}</span>
-          </button>
-          <button
-            onClick={() => {
-              void flushPendingNoteSave();
-              setViewMode("conversations");
-              setListFilter("starred");
-              setSelectedTag(null);
-              setSelectedConversationId(null);
-              setIsSplitNavigationOpen(false);
-            }}
-            className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
-              isStarredActive ? "bg-accent-primary-light" : "hover:bg-bg-surface-card"
-            }`}
-          >
-            <Star
-              strokeWidth={1.5}
-              className={`w-4 h-4 ${isStarredActive ? "text-accent-primary" : "text-text-secondary"}`}
+        <div className="relative flex min-h-0 flex-1 overflow-hidden">
+          <SplitNavigationToggle />
+          {isSplitActive && isSplitNavigationOpen ? (
+            <button
+              type="button"
+              className="absolute inset-0 z-20 bg-black/10 backdrop-blur-[1px]"
+              onClick={() => setIsSplitNavigationOpen(false)}
+              aria-label="Close library navigation"
             />
-            <span
-              className={`flex-1 text-sm font-sans ${
-                isStarredActive ? "text-accent-primary" : "text-text-primary"
-              }`}
-            >
-              Starred
-            </span>
-            <span className="text-xs font-sans text-text-tertiary">{starredCount}</span>
-          </button>
-          <button
-            onClick={() => {
-              void flushPendingNoteSave();
-              setViewMode("conversations");
-              setListFilter("recent");
-              setSelectedTag(null);
-              setSelectedConversationId(null);
-              setIsSplitNavigationOpen(false);
-            }}
-            className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
-              isRecentActive ? "bg-accent-primary-light" : "hover:bg-bg-surface-card"
+          ) : null}
+          <div
+            className={`${
+              isSplitActive
+                ? "absolute inset-y-0 left-0 z-30 flex w-[520px] max-w-[calc(100%-32px)] overflow-hidden transition-[transform,opacity] duration-300 ease-out"
+                : "flex shrink-0"
+            } ${
+              isSplitActive
+                ? isSplitNavigationOpen
+                  ? "translate-x-0 opacity-100"
+                  : "-translate-x-[calc(100%+16px)] opacity-0 pointer-events-none"
+                : ""
             }`}
           >
-            <Clock
-              strokeWidth={1.5}
-              className={`w-4 h-4 ${isRecentActive ? "text-accent-primary" : "text-text-secondary"}`}
-            />
-            <span
-              className={`flex-1 text-sm font-sans ${
-                isRecentActive ? "text-accent-primary" : "text-text-primary"
-              }`}
-            >
-              Recent
-            </span>
-            <span className="text-xs font-sans text-text-tertiary">{recentConversations.length}</span>
-          </button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto px-2">
-          <div className="flex items-center justify-between px-2 py-2">
-            <span className="text-[10px] font-sans font-semibold text-text-tertiary uppercase tracking-wider">
-              Folders
-            </span>
-            <button
-              onClick={handleCreateFolder}
-              className="w-5 h-5 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-secondary hover:bg-bg-surface-card transition-colors"
-              aria-label="Create new folder"
-              title="New folder"
-            >
-              +
-            </button>
-          </div>
-          {folderItems.length > 0 && (
-            <div className="flex flex-col">
-              {folderItems.map((folder) => {
-                const isSelected = selectedTag === folder.name;
-                return (
-                  <div
-                    key={folder.name}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => {
-                      void flushPendingNoteSave();
-                      setViewMode("conversations");
-                      setListFilter("all");
-                      setSelectedTag(folder.name);
-                      setSelectedConversationId(null);
-                      setIsSplitNavigationOpen(false);
-                    }}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault();
-                        void flushPendingNoteSave();
-                        setViewMode("conversations");
-                        setListFilter("all");
-                        setSelectedTag(folder.name);
-                        setSelectedConversationId(null);
-                        setIsSplitNavigationOpen(false);
-                      }
-                    }}
-                    className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors duration-200 my-1 rounded-lg group cursor-pointer relative ${
-                      isSelected && viewMode === "conversations"
-                        ? "bg-bg-surface-card-active"
-                        : "hover:bg-bg-surface-card"
+            {/* Left Column - Sidebar (200px) */}
+            <aside className="w-[200px] bg-bg-secondary flex flex-col">
+              <div className="px-2 pt-3 pb-2">
+                <button
+                  onClick={() => {
+                    void flushPendingNoteSave();
+                    setViewMode("conversations");
+                    setListFilter("all");
+                    setSelectedTag(null);
+                    setSelectedConversationId(null);
+                    setIsSplitNavigationOpen(false);
+                  }}
+                  className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
+                    isAllActive
+                      ? "bg-accent-primary-light"
+                      : "hover:bg-bg-surface-card"
+                  }`}
+                >
+                  <List
+                    strokeWidth={1.5}
+                    className={`w-4 h-4 ${isAllActive ? "text-accent-primary" : "text-text-secondary"}`}
+                  />
+                  <span
+                    className={`flex-1 text-sm font-sans ${
+                      isAllActive ? "text-accent-primary" : "text-text-primary"
                     }`}
                   >
-                    <span className="flex-1 text-sm font-sans text-text-primary truncate">
-                      {folder.name}
-                    </span>
-                    <div className="ml-2 flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button
-                        type="button"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          setOpenFolderMenuName((prev) =>
-                            prev === folder.name ? null : folder.name
-                          );
-                        }}
-                        className="w-5 h-5 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-secondary hover:bg-bg-surface-card"
-                        title="Folder actions"
-                        aria-label={`Folder actions for ${folder.name}`}
-                      >
-                        <MoreHorizontal strokeWidth={1.5} className="w-3.5 h-3.5" />
-                      </button>
-                    </div>
-                    {openFolderMenuName === folder.name && (
-                      <div
-                        className="absolute right-2 top-9 z-30 w-44 rounded-md border border-border-subtle bg-bg-primary shadow-[0_8px_24px_rgba(0,0,0,0.08)] py-1"
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleRenameFolder(folder);
-                            setOpenFolderMenuName(null);
-                          }}
-                          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
-                        >
-                          <Pencil strokeWidth={1.5} className="w-4 h-4" />
-                          <span>Rename</span>
-                        </button>
-                        <div className="my-1 h-px bg-border-subtle" />
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleDeleteFolder(folder);
-                            setOpenFolderMenuName(null);
-                          }}
-                          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-[#B42318] hover:bg-bg-surface-card transition-colors"
-                        >
-                          <Trash2 strokeWidth={1.5} className="w-4 h-4" />
-                          <span>Delete</span>
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-
-        <div className="border-t border-border-subtle px-2 py-2">
-          <button
-            onClick={() => void openNotesView()}
-            className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
-              viewMode === "notes" ? "bg-bg-surface-card-active" : "hover:bg-bg-surface-card"
-            }`}
-          >
-            <BookOpen strokeWidth={1.5} className="w-4 h-4 text-text-secondary" />
-            <span className="flex-1 text-sm font-sans text-text-primary">My Notes</span>
-            <span className="text-xs font-sans text-text-tertiary">{notes.length}</span>
-          </button>
-        </div>
-      </aside>
-
-      {/* Middle Column - Conversation/Note List (320px) */}
-      <div className="w-[320px] bg-bg-tertiary flex flex-col">
-        {viewMode === "conversations" ? (
-          <>
-            <div className="px-4 py-3">
-              <div className="flex items-baseline justify-between">
-                <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-serif font-normal text-text-primary">
-                    {selectedTag
-                        ? selectedTag
-                      : listFilter === "starred"
-                        ? "Starred"
-                        : listFilter === "recent"
-                          ? "Recent"
-                        : "All Conversations"}
-                  </h2>
+                    All Conversations
+                  </span>
                   <span className="text-xs font-sans text-text-tertiary">
-                    · {filteredConversations.length} conversations
+                    {conversations.length}
                   </span>
-                </div>
+                </button>
+                <button
+                  onClick={() => {
+                    void flushPendingNoteSave();
+                    setViewMode("conversations");
+                    setListFilter("starred");
+                    setSelectedTag(null);
+                    setSelectedConversationId(null);
+                    setIsSplitNavigationOpen(false);
+                  }}
+                  className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
+                    isStarredActive
+                      ? "bg-accent-primary-light"
+                      : "hover:bg-bg-surface-card"
+                  }`}
+                >
+                  <Star
+                    strokeWidth={1.5}
+                    className={`w-4 h-4 ${isStarredActive ? "text-accent-primary" : "text-text-secondary"}`}
+                  />
+                  <span
+                    className={`flex-1 text-sm font-sans ${
+                      isStarredActive
+                        ? "text-accent-primary"
+                        : "text-text-primary"
+                    }`}
+                  >
+                    Starred
+                  </span>
+                  <span className="text-xs font-sans text-text-tertiary">
+                    {starredCount}
+                  </span>
+                </button>
+                <button
+                  onClick={() => {
+                    void flushPendingNoteSave();
+                    setViewMode("conversations");
+                    setListFilter("recent");
+                    setSelectedTag(null);
+                    setSelectedConversationId(null);
+                    setIsSplitNavigationOpen(false);
+                  }}
+                  className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
+                    isRecentActive
+                      ? "bg-accent-primary-light"
+                      : "hover:bg-bg-surface-card"
+                  }`}
+                >
+                  <Clock
+                    strokeWidth={1.5}
+                    className={`w-4 h-4 ${isRecentActive ? "text-accent-primary" : "text-text-secondary"}`}
+                  />
+                  <span
+                    className={`flex-1 text-sm font-sans ${
+                      isRecentActive
+                        ? "text-accent-primary"
+                        : "text-text-primary"
+                    }`}
+                  >
+                    Recent
+                  </span>
+                  <span className="text-xs font-sans text-text-tertiary">
+                    {recentConversations.length}
+                  </span>
+                </button>
               </div>
-            </div>
 
-            <div className="flex-1 overflow-y-auto p-3 space-y-1.5 mt-2">
-              {filteredConversations.map((conv) => {
-                const isSelected = conv.id === selectedConversationId;
-                return (
-                  <div
-                    key={conv.id}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() =>
-                      void selectConversation(conv.id, {
-                        closeNavigation: isSplitActive,
-                      })
-                    }
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter" || event.key === " ") {
-                        event.preventDefault();
-                        void selectConversation(conv.id, {
-                          closeNavigation: isSplitActive,
-                        });
-                      }
-                    }}
-                    className={`w-full text-left p-3 rounded-lg transition-all duration-200 relative group cursor-pointer ${
-                      isSelected
-                        ? "bg-bg-surface-card-active shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
-                        : "bg-bg-surface-card hover:bg-bg-surface-card-hover hover:shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
-                    }`}
+              <div className="flex-1 overflow-y-auto px-2">
+                <div className="flex items-center justify-between px-2 py-2">
+                  <span className="text-[10px] font-sans font-semibold text-text-tertiary uppercase tracking-wider">
+                    Folders
+                  </span>
+                  <button
+                    onClick={handleCreateFolder}
+                    className="w-5 h-5 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-secondary hover:bg-bg-surface-card transition-colors"
+                    aria-label="Create new folder"
+                    title="New folder"
                   >
-                    <button
-                      type="button"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        void selectConversation(conv.id, {
-                          closeNavigation: isSplitActive,
-                        });
-                        setOpenConversationMenuId((prev) =>
-                          prev === conv.id ? null : conv.id
-                        );
-                      }}
-                      className="absolute right-2 top-2 w-7 h-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-secondary hover:bg-bg-surface-card transition-colors opacity-0 group-hover:opacity-100"
-                      aria-label="Conversation actions"
-                    >
-                      <MoreHorizontal strokeWidth={1.5} className="w-4 h-4" />
-                    </button>
-                    {openConversationMenuId === conv.id && (
-                      <div
-                        className="absolute right-2 top-10 z-30 w-52 rounded-md border border-border-subtle bg-bg-primary shadow-[0_8px_24px_rgba(0,0,0,0.08)] py-1"
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleConversationStar(conv);
-                            setOpenConversationMenuId(null);
-                          }}
-                          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
-                        >
-                          <Star strokeWidth={1.5} className="w-4 h-4" />
-                          <span>{conv.is_starred ? "Unstar" : "Star"}</span>
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleConversationRename(conv);
-                            setOpenConversationMenuId(null);
-                          }}
-                          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
-                        >
-                          <Pencil strokeWidth={1.5} className="w-4 h-4" />
-                          <span>Rename</span>
-                        </button>
-                        <button
-                          type="button"
+                    +
+                  </button>
+                </div>
+                {folderItems.length > 0 && (
+                  <div className="flex flex-col">
+                    {folderItems.map((folder) => {
+                      const isSelected = selectedTag === folder.name;
+                      return (
+                        <div
+                          key={folder.name}
+                          role="button"
+                          tabIndex={0}
                           onClick={() => {
-                            void handleConversationChangeFolder(conv);
-                            setOpenConversationMenuId(null);
+                            void flushPendingNoteSave();
+                            setViewMode("conversations");
+                            setListFilter("all");
+                            setSelectedTag(folder.name);
+                            setSelectedConversationId(null);
+                            setIsSplitNavigationOpen(false);
                           }}
-                          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
-                        >
-                          <ArrowRight strokeWidth={1.5} className="w-4 h-4" />
-                          <span>Change folder</span>
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleConversationRemoveFromFolder(conv);
-                            setOpenConversationMenuId(null);
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              void flushPendingNoteSave();
+                              setViewMode("conversations");
+                              setListFilter("all");
+                              setSelectedTag(folder.name);
+                              setSelectedConversationId(null);
+                              setIsSplitNavigationOpen(false);
+                            }
                           }}
-                          disabled={!selectedTag}
-                          className={`w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans transition-colors ${
-                            selectedTag
-                              ? "text-text-primary hover:bg-bg-surface-card"
-                              : "text-text-tertiary cursor-not-allowed"
+                          className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors duration-200 my-1 rounded-lg group cursor-pointer relative ${
+                            isSelected && viewMode === "conversations"
+                              ? "bg-bg-surface-card-active"
+                              : "hover:bg-bg-surface-card"
                           }`}
                         >
-                          <X strokeWidth={1.5} className="w-4 h-4" />
-                          <span>Remove from folder</span>
-                        </button>
-                        <div className="my-1 h-px bg-border-subtle" />
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleConversationDelete(conv);
-                            setOpenConversationMenuId(null);
-                          }}
-                          className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-[#B42318] hover:bg-bg-surface-card transition-colors"
-                        >
-                          <Trash2 strokeWidth={1.5} className="w-4 h-4" />
-                          <span>Delete</span>
-                        </button>
-                      </div>
-                    )}
-                    <h3 className="text-sm font-sans font-medium text-text-primary mb-1.5 leading-snug line-clamp-1">
-                      {conv.title}
-                    </h3>
-                    <div
-                      className={`grid transition-[grid-template-rows,opacity] duration-150 ease-in-out ${
-                        isSelected ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 group-hover:opacity-100 group-hover:grid-rows-[1fr]"
-                      }`}
-                    >
-                      <div className="overflow-hidden">
-                        <p className="text-[13px] font-sans text-text-secondary leading-relaxed mb-2 line-clamp-2">
-                          {conv.snippet}
-                        </p>
-                        <div className="flex items-center gap-1.5 flex-wrap">
-                          <span
-                            className="px-2 py-0.5 rounded-md text-[11px] font-sans font-medium leading-none"
-                            style={getPlatformBadgeStyle(conv.platform, themeMode)}
-                          >
-                            {getPlatformLabel(conv.platform)}
-                          </span>
-                          {normalizeTags(conv.tags).slice(0, 2).map((tag) => (
-                            <span
-                              key={tag}
-                              className="px-2 py-0.5 rounded-full text-[11px] font-sans text-text-secondary bg-bg-secondary"
-                            >
-                              {tag}
-                            </span>
-                          ))}
-                          <span className="ml-auto text-[11px] font-sans text-text-tertiary">
-                            {formatTimeAgo(conv.updated_at)}
+                          <span className="flex-1 text-sm font-sans text-text-primary truncate">
+                            {folder.name}
                           </span>
-                          {conv.has_note && (
-                            <span
-                              title="Has notes"
-                              style={{
-                                display: "inline-block",
-                                width: 6,
-                                height: 6,
-                                borderRadius: "50%",
-                                backgroundColor: "#3266AD",
-                                flexShrink: 0,
+                          <div className="ml-2 flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button
+                              type="button"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                setOpenFolderMenuName((prev) =>
+                                  prev === folder.name ? null : folder.name,
+                                );
                               }}
-                            />
+                              className="w-5 h-5 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-secondary hover:bg-bg-surface-card"
+                              title="Folder actions"
+                              aria-label={`Folder actions for ${folder.name}`}
+                            >
+                              <MoreHorizontal
+                                strokeWidth={1.5}
+                                className="w-3.5 h-3.5"
+                              />
+                            </button>
+                          </div>
+                          {openFolderMenuName === folder.name && (
+                            <div
+                              className="absolute right-2 top-9 z-30 w-44 rounded-md border border-border-subtle bg-bg-primary shadow-[0_8px_24px_rgba(0,0,0,0.08)] py-1"
+                              onClick={(event) => event.stopPropagation()}
+                            >
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleRenameFolder(folder);
+                                  setOpenFolderMenuName(null);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
+                              >
+                                <Pencil strokeWidth={1.5} className="w-4 h-4" />
+                                <span>Rename</span>
+                              </button>
+                              <div className="my-1 h-px bg-border-subtle" />
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleDeleteFolder(folder);
+                                  setOpenFolderMenuName(null);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-[#B42318] hover:bg-bg-surface-card transition-colors"
+                              >
+                                <Trash2 strokeWidth={1.5} className="w-4 h-4" />
+                                <span>Delete</span>
+                              </button>
+                            </div>
                           )}
                         </div>
-                      </div>
-                    </div>
+                      );
+                    })}
                   </div>
-                );
-              })}
-            </div>
-          </>
-        ) : (
-          <>
-            <div className="px-4 py-3 border-b border-border-subtle">
-              <div className="flex items-baseline justify-between">
-                <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-serif font-normal text-text-primary">My Notes</h2>
-                  <span className="text-xs font-sans text-text-tertiary">· {notes.length} notes</span>
-                </div>
+                )}
+              </div>
+
+              <div className="border-t border-border-subtle px-2 py-2">
                 <button
-                  onClick={async () => {
-                    if (!storage.saveNote) return;
-                    try {
-                      await flushPendingNoteSave();
-                      const newNote = await storage.saveNote({
-                        title: "New Note",
-                        content: "",
-                        linked_conversation_ids: selectedConversationId
-                          ? [selectedConversationId]
-                          : [],
-                      });
-                      setNotes((prev) => [newNote, ...prev]);
-                      await openNotesView(newNote.id);
-                    } catch (error) {
-                      console.error("[library] New Note failed", error);
-                    }
-                  }}
-                  className="px-3 py-1.5 text-[13px] font-sans font-medium text-text-primary bg-bg-surface-card hover:bg-bg-surface-card-hover rounded-md transition-colors"
+                  onClick={() => void openNotesView()}
+                  className={`w-full flex items-center gap-2 px-3 py-2 transition-colors my-1 rounded-lg ${
+                    viewMode === "notes"
+                      ? "bg-bg-surface-card-active"
+                      : "hover:bg-bg-surface-card"
+                  }`}
                 >
-                  + New Note
+                  <BookOpen
+                    strokeWidth={1.5}
+                    className="w-4 h-4 text-text-secondary"
+                  />
+                  <span className="flex-1 text-sm font-sans text-text-primary">
+                    My Notes
+                  </span>
+                  <span className="text-xs font-sans text-text-tertiary">
+                    {notes.length}
+                  </span>
                 </button>
               </div>
-            </div>
+            </aside>
+
+            {/* Middle Column - Conversation/Note List (320px) */}
+            <div className="w-[320px] bg-bg-tertiary flex flex-col">
+              {viewMode === "conversations" ? (
+                <>
+                  <div className="px-4 py-3">
+                    <div className="flex items-baseline justify-between">
+                      <div className="flex items-center gap-2">
+                        <h2 className="text-lg font-serif font-normal text-text-primary">
+                          {selectedTag
+                            ? selectedTag
+                            : listFilter === "starred"
+                              ? "Starred"
+                              : listFilter === "recent"
+                                ? "Recent"
+                                : "All Conversations"}
+                        </h2>
+                        <span className="text-xs font-sans text-text-tertiary">
+                          · {filteredConversations.length} conversations
+                        </span>
+                      </div>
+                    </div>
+                  </div>
 
-            <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-              {notesLoading && notes.length === 0 ? (
-                <div className="text-[13px] font-sans text-text-tertiary">
-                  Loading notes...
-                </div>
-              ) : (
-                notes.map((note) => {
-                  const isSelected = note.id === selectedNoteId;
-                  const preview = note.content.replace(/[#*\[\]]/g, "").slice(0, 100);
-                  return (
-                    <div
-                      key={note.id}
-                      className={`w-full text-left p-3 rounded-lg transition-all duration-200 relative group ${
-                        isSelected
-                          ? "bg-bg-surface-card-active shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
-                          : "bg-bg-surface-card hover:bg-bg-surface-card-hover hover:shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
-                      }`}
-                    >
-                      <span className="absolute right-3 top-3 text-[11px] font-sans text-text-tertiary">
-                        {formatTimeAgo(note.updated_at)}
-                      </span>
-                      <button
-                        type="button"
-                        onClick={() => void selectNote(note.id)}
-                        className="w-full text-left"
-                      >
-                        <h3 className="text-sm font-sans font-medium text-text-primary mb-1.5 leading-snug pr-16">
-                          {note.title}
-                        </h3>
+                  <div className="flex-1 overflow-y-auto p-3 space-y-1.5 mt-2">
+                    {filteredConversations.map((conv) => {
+                      const isSelected = conv.id === selectedConversationId;
+                      return (
                         <div
-                          className={`grid transition-[grid-template-rows,opacity] duration-150 ease-in-out ${
+                          key={conv.id}
+                          role="button"
+                          tabIndex={0}
+                          onClick={() =>
+                            void selectConversation(conv.id, {
+                              closeNavigation: isSplitActive,
+                            })
+                          }
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              void selectConversation(conv.id, {
+                                closeNavigation: isSplitActive,
+                              });
+                            }
+                          }}
+                          className={`w-full text-left p-3 rounded-lg transition-all duration-200 relative group cursor-pointer ${
                             isSelected
-                              ? "grid-rows-[1fr] opacity-100"
-                              : "grid-rows-[0fr] opacity-0 group-hover:opacity-100 group-hover:grid-rows-[1fr]"
+                              ? "bg-bg-surface-card-active shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
+                              : "bg-bg-surface-card hover:bg-bg-surface-card-hover hover:shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
                           }`}
                         >
-                          <div className="overflow-hidden pb-7">
-                            <p className="text-[13px] font-sans text-text-secondary leading-relaxed mb-2 line-clamp-2">
-                              {preview}
-                            </p>
-                            <div className="flex items-center gap-1.5 flex-wrap">
-                              {note.linked_conversation_ids.length > 0 && (
-                                <span
-                                  title={`Linked to ${note.linked_conversation_ids.length} conversation${
-                                    note.linked_conversation_ids.length > 1 ? "s" : ""
-                                  }`}
-                                  style={{
-                                    display: "inline-block",
-                                    width: 6,
-                                    height: 6,
-                                    borderRadius: "50%",
-                                    backgroundColor: "#3266AD",
-                                    flexShrink: 0,
-                                  }}
+                          <button
+                            type="button"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              void selectConversation(conv.id, {
+                                closeNavigation: isSplitActive,
+                              });
+                              setOpenConversationMenuId((prev) =>
+                                prev === conv.id ? null : conv.id,
+                              );
+                            }}
+                            className="absolute right-2 top-2 w-7 h-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-secondary hover:bg-bg-surface-card transition-colors opacity-0 group-hover:opacity-100"
+                            aria-label="Conversation actions"
+                          >
+                            <MoreHorizontal
+                              strokeWidth={1.5}
+                              className="w-4 h-4"
+                            />
+                          </button>
+                          {openConversationMenuId === conv.id && (
+                            <div
+                              className="absolute right-2 top-10 z-30 w-52 rounded-md border border-border-subtle bg-bg-primary shadow-[0_8px_24px_rgba(0,0,0,0.08)] py-1"
+                              onClick={(event) => event.stopPropagation()}
+                            >
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleConversationStar(conv);
+                                  setOpenConversationMenuId(null);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
+                              >
+                                <Star strokeWidth={1.5} className="w-4 h-4" />
+                                <span>
+                                  {conv.is_starred ? "Unstar" : "Star"}
+                                </span>
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleConversationRename(conv);
+                                  setOpenConversationMenuId(null);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
+                              >
+                                <Pencil strokeWidth={1.5} className="w-4 h-4" />
+                                <span>Rename</span>
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleConversationChangeFolder(conv);
+                                  setOpenConversationMenuId(null);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-text-primary hover:bg-bg-surface-card transition-colors"
+                              >
+                                <ArrowRight
+                                  strokeWidth={1.5}
+                                  className="w-4 h-4"
                                 />
-                              )}
+                                <span>Change folder</span>
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleConversationRemoveFromFolder(conv);
+                                  setOpenConversationMenuId(null);
+                                }}
+                                disabled={!selectedTag}
+                                className={`w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans transition-colors ${
+                                  selectedTag
+                                    ? "text-text-primary hover:bg-bg-surface-card"
+                                    : "text-text-tertiary cursor-not-allowed"
+                                }`}
+                              >
+                                <X strokeWidth={1.5} className="w-4 h-4" />
+                                <span>Remove from folder</span>
+                              </button>
+                              <div className="my-1 h-px bg-border-subtle" />
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleConversationDelete(conv);
+                                  setOpenConversationMenuId(null);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-2 text-[13px] font-sans text-[#B42318] hover:bg-bg-surface-card transition-colors"
+                              >
+                                <Trash2 strokeWidth={1.5} className="w-4 h-4" />
+                                <span>Delete</span>
+                              </button>
+                            </div>
+                          )}
+                          <h3 className="text-sm font-sans font-medium text-text-primary mb-1.5 leading-snug line-clamp-1">
+                            {conv.title}
+                          </h3>
+                          <div
+                            className={`grid transition-[grid-template-rows,opacity] duration-150 ease-in-out ${
+                              isSelected
+                                ? "grid-rows-[1fr] opacity-100"
+                                : "grid-rows-[0fr] opacity-0 group-hover:opacity-100 group-hover:grid-rows-[1fr]"
+                            }`}
+                          >
+                            <div className="overflow-hidden">
+                              <p className="text-[13px] font-sans text-text-secondary leading-relaxed mb-2 line-clamp-2">
+                                {conv.snippet}
+                              </p>
+                              <div className="flex items-center gap-1.5 flex-wrap">
+                                <span
+                                  className="px-2 py-0.5 rounded-md text-[11px] font-sans font-medium leading-none"
+                                  style={getPlatformBadgeStyle(
+                                    conv.platform,
+                                    themeMode,
+                                  )}
+                                >
+                                  {getPlatformLabel(conv.platform)}
+                                </span>
+                                {normalizeTags(conv.tags)
+                                  .slice(0, 2)
+                                  .map((tag) => (
+                                    <span
+                                      key={tag}
+                                      className="px-2 py-0.5 rounded-full text-[11px] font-sans text-text-secondary bg-bg-secondary"
+                                    >
+                                      {tag}
+                                    </span>
+                                  ))}
+                                <span className="ml-auto text-[11px] font-sans text-text-tertiary">
+                                  {formatTimeAgo(conv.updated_at)}
+                                </span>
+                                {conv.has_note && (
+                                  <span
+                                    title="Has notes"
+                                    style={{
+                                      display: "inline-block",
+                                      width: 6,
+                                      height: 6,
+                                      borderRadius: "50%",
+                                      backgroundColor: "#3266AD",
+                                      flexShrink: 0,
+                                    }}
+                                  />
+                                )}
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </button>
-                      <div
-                        className={`absolute right-2 bottom-2 flex items-center gap-1 transition-opacity ${
-                          isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                        }`}
-                      >
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void selectNote(note.id);
-                            openNoteRenameDialog(note);
-                          }}
-                          className="w-7 h-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-primary hover:bg-bg-surface-card transition-colors"
-                          aria-label={`Rename note ${note.title}`}
-                        >
-                          <Pencil strokeWidth={1.5} className="w-4 h-4" />
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            void handleNoteDelete(note);
-                          }}
-                          className="w-7 h-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-[#B42318] hover:bg-bg-surface-card transition-colors"
-                          aria-label={`Delete note ${note.title}`}
-                        >
-                          <Trash2 strokeWidth={1.5} className="w-4 h-4" />
-                        </button>
+                      );
+                    })}
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="px-4 py-3 border-b border-border-subtle">
+                    <div className="flex items-baseline justify-between">
+                      <div className="flex items-center gap-2">
+                        <h2 className="text-lg font-serif font-normal text-text-primary">
+                          My Notes
+                        </h2>
+                        <span className="text-xs font-sans text-text-tertiary">
+                          · {notes.length} notes
+                        </span>
                       </div>
+                      <button
+                        onClick={async () => {
+                          if (!storage.saveNote) return;
+                          try {
+                            await flushPendingNoteSave();
+                            const newNote = await storage.saveNote({
+                              title: "New Note",
+                              content: "",
+                              linked_conversation_ids: selectedConversationId
+                                ? [selectedConversationId]
+                                : [],
+                            });
+                            setNotes((prev) => [newNote, ...prev]);
+                            await openNotesView(newNote.id);
+                          } catch (error) {
+                            console.error("[library] New Note failed", error);
+                          }
+                        }}
+                        className="px-3 py-1.5 text-[13px] font-sans font-medium text-text-primary bg-bg-surface-card hover:bg-bg-surface-card-hover rounded-md transition-colors"
+                      >
+                        + New Note
+                      </button>
                     </div>
-                  );
-                })
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
+                    {notesLoading && notes.length === 0 ? (
+                      <div className="text-[13px] font-sans text-text-tertiary">
+                        Loading notes...
+                      </div>
+                    ) : (
+                      notes.map((note) => {
+                        const isSelected = note.id === selectedNoteId;
+                        const preview = note.content
+                          .replace(/[#*\[\]]/g, "")
+                          .slice(0, 100);
+                        return (
+                          <div
+                            key={note.id}
+                            className={`w-full text-left p-3 rounded-lg transition-all duration-200 relative group ${
+                              isSelected
+                                ? "bg-bg-surface-card-active shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
+                                : "bg-bg-surface-card hover:bg-bg-surface-card-hover hover:shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
+                            }`}
+                          >
+                            <span className="absolute right-3 top-3 text-[11px] font-sans text-text-tertiary">
+                              {formatTimeAgo(note.updated_at)}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={() => void selectNote(note.id)}
+                              className="w-full text-left"
+                            >
+                              <h3 className="text-sm font-sans font-medium text-text-primary mb-1.5 leading-snug pr-16">
+                                {note.title}
+                              </h3>
+                              <div
+                                className={`grid transition-[grid-template-rows,opacity] duration-150 ease-in-out ${
+                                  isSelected
+                                    ? "grid-rows-[1fr] opacity-100"
+                                    : "grid-rows-[0fr] opacity-0 group-hover:opacity-100 group-hover:grid-rows-[1fr]"
+                                }`}
+                              >
+                                <div className="overflow-hidden pb-7">
+                                  <p className="text-[13px] font-sans text-text-secondary leading-relaxed mb-2 line-clamp-2">
+                                    {preview}
+                                  </p>
+                                  <div className="flex items-center gap-1.5 flex-wrap">
+                                    {note.linked_conversation_ids.length >
+                                      0 && (
+                                      <span
+                                        title={`Linked to ${note.linked_conversation_ids.length} conversation${
+                                          note.linked_conversation_ids.length >
+                                          1
+                                            ? "s"
+                                            : ""
+                                        }`}
+                                        style={{
+                                          display: "inline-block",
+                                          width: 6,
+                                          height: 6,
+                                          borderRadius: "50%",
+                                          backgroundColor: "#3266AD",
+                                          flexShrink: 0,
+                                        }}
+                                      />
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </button>
+                            <div
+                              className={`absolute right-2 bottom-2 flex items-center gap-1 transition-opacity ${
+                                isSelected
+                                  ? "opacity-100"
+                                  : "opacity-0 group-hover:opacity-100"
+                              }`}
+                            >
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void selectNote(note.id);
+                                  openNoteRenameDialog(note);
+                                }}
+                                className="w-7 h-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-text-primary hover:bg-bg-surface-card transition-colors"
+                                aria-label={`Rename note ${note.title}`}
+                              >
+                                <Pencil strokeWidth={1.5} className="w-4 h-4" />
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  void handleNoteDelete(note);
+                                }}
+                                className="w-7 h-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-[#B42318] hover:bg-bg-surface-card transition-colors"
+                                aria-label={`Delete note ${note.title}`}
+                              >
+                                <Trash2 strokeWidth={1.5} className="w-4 h-4" />
+                              </button>
+                            </div>
+                          </div>
+                        );
+                      })
+                    )}
+                  </div>
+                </>
               )}
             </div>
-          </>
-        )}
-      </div>
-      </div>
+          </div>
 
-      <div
-        className={`min-w-0 flex-1 ${
-          isSplitActive
-            ? "grid grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]"
-            : "flex"
-        }`}
-      >
-      {/* Right Column - Reader/Editor (flex-1) */}
-      {viewMode === "conversations" && selectedConversation && (
-        <div
-          className={`min-w-0 bg-bg-primary overflow-y-auto ${
-            isSplitActive ? "border-r border-border-subtle" : "flex-1"
-          }`}
-        >
-          <div className="max-w-3xl mx-auto px-8 py-6">
-            {/* Block A - Header */}
-            <div className="mb-6 border-b border-border-subtle pb-6">
-              <div className="flex items-start justify-between gap-4">
-                <div className="min-w-0">
-                  <h1 className="mb-3 text-2xl font-serif font-normal leading-tight text-text-primary">
-                    {selectedConversation.title}
-                  </h1>
-                  <div className="mb-4 flex flex-wrap items-center gap-2 text-[13px] font-sans text-text-secondary">
-                    <span
-                      className="px-2 py-0.5 rounded-md text-[11px] font-sans font-medium leading-none"
-                      style={getPlatformBadgeStyle(selectedConversation.platform, themeMode)}
-                    >
-                      {getPlatformLabel(selectedConversation.platform)}
-                    </span>
-                    <span>·</span>
-                    <span>{formatDate(messageDate)}</span>
-                    <span>·</span>
-                    <span>{messageCount} messages</span>
-                    {selectedConversation.url && (
-                      <>
-                        <span>·</span>
+          <div
+            className={`min-w-0 flex-1 ${
+              isSplitActive
+                ? "grid grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]"
+                : "flex"
+            }`}
+          >
+            {/* Right Column - Reader/Editor (flex-1) */}
+            {viewMode === "conversations" && selectedConversation && (
+              <div
+                className={`min-w-0 bg-bg-primary overflow-y-auto ${
+                  isSplitActive ? "border-r border-border-subtle" : "flex-1"
+                }`}
+              >
+                <div className="max-w-3xl mx-auto px-8 py-6">
+                  {/* Block A - Header */}
+                  <div className="mb-6 border-b border-border-subtle pb-6">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="min-w-0">
+                        <h1 className="mb-3 text-2xl font-serif font-normal leading-tight text-text-primary">
+                          {selectedConversation.title}
+                        </h1>
+                        <div className="mb-4 flex flex-wrap items-center gap-2 text-[13px] font-sans text-text-secondary">
+                          <span
+                            className="px-2 py-0.5 rounded-md text-[11px] font-sans font-medium leading-none"
+                            style={getPlatformBadgeStyle(
+                              selectedConversation.platform,
+                              themeMode,
+                            )}
+                          >
+                            {getPlatformLabel(selectedConversation.platform)}
+                          </span>
+                          <span>·</span>
+                          <span>{formatDate(messageDate)}</span>
+                          <span>·</span>
+                          <span>{messageCount} messages</span>
+                          {selectedConversation.url && (
+                            <>
+                              <span>·</span>
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  window.open(
+                                    selectedConversation.url,
+                                    "_blank",
+                                    "noopener,noreferrer",
+                                  )
+                                }
+                                className="inline-flex items-center gap-1 text-accent-primary transition-colors hover:text-accent-primary/80"
+                                title="Open original conversation"
+                              >
+                                <ExternalLink
+                                  className="h-3.5 w-3.5"
+                                  strokeWidth={1.5}
+                                />
+                                <span>Open</span>
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      {isDesktopSplitAvailable && !isSplitActive ? (
                         <button
                           type="button"
                           onClick={() =>
-                            window.open(
-                              selectedConversation.url,
-                              "_blank",
-                              "noopener,noreferrer"
-                            )
+                            void handleSplitViewForCurrentConversation()
                           }
-                          className="inline-flex items-center gap-1 text-accent-primary transition-colors hover:text-accent-primary/80"
-                          title="Open original conversation"
+                          aria-label="Open split view"
+                          title="Split view"
+                          className="group inline-flex h-9 shrink-0 items-center bg-transparent px-1 text-[12px] font-sans text-text-tertiary transition-colors duration-200 hover:text-text-primary"
                         >
-                          <ExternalLink className="h-3.5 w-3.5" strokeWidth={1.5} />
-                          <span>Open</span>
+                          <Expand
+                            strokeWidth={1.7}
+                            className="h-4 w-4 shrink-0"
+                          />
+                          <span className="ml-0 max-w-0 overflow-hidden whitespace-nowrap text-[11px] uppercase tracking-[0.18em] opacity-0 transition-[max-width,opacity,margin] duration-200 group-hover:ml-2 group-hover:max-w-[108px] group-hover:opacity-100 group-focus-visible:ml-2 group-focus-visible:max-w-[108px] group-focus-visible:opacity-100">
+                            Split View
+                          </span>
                         </button>
-                      </>
-                    )}
+                      ) : null}
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {activeTags.map((tag) => (
+                        <MetaChip key={tag}>{tag}</MetaChip>
+                      ))}
+                    </div>
                   </div>
-                </div>
-                {isDesktopSplitAvailable && !isSplitActive ? (
-                  <button
-                    type="button"
-                    onClick={() => void handleSplitViewForCurrentConversation()}
-                    aria-label="Open split view"
-                    title="Split view"
-                    className="group inline-flex h-9 shrink-0 items-center bg-transparent px-1 text-[12px] font-sans text-text-tertiary transition-colors duration-200 hover:text-text-primary"
-                  >
-                    <Expand strokeWidth={1.7} className="h-4 w-4 shrink-0" />
-                    <span className="ml-0 max-w-0 overflow-hidden whitespace-nowrap text-[11px] uppercase tracking-[0.18em] opacity-0 transition-[max-width,opacity,margin] duration-200 group-hover:ml-2 group-hover:max-w-[108px] group-hover:opacity-100 group-focus-visible:ml-2 group-focus-visible:max-w-[108px] group-focus-visible:opacity-100">
-                      Split View
-                    </span>
-                  </button>
-                ) : null}
-              </div>
-              <div className="flex flex-wrap gap-2">
-                {activeTags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="px-2.5 py-1 rounded-md text-[13px] font-sans text-text-secondary bg-bg-secondary"
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            </div>
 
-            {/* Block B - Gardener Summary Card */}
-            <div className="mb-6">
-              <div className="rounded-lg bg-bg-surface-card overflow-hidden">
-                <div className="w-full p-3 flex items-center justify-between">
-                  <div className="flex items-center gap-2 text-sm font-sans">
-                    {hasAnalysis ? (
-                      <>
-                        <Check strokeWidth={1.5} className="w-4 h-4 text-accent-primary" />
-                        <span className="text-text-primary">Analyzed</span>
-                        {activeTopicName && (
-                          <>
-                            <span className="text-text-tertiary">·</span>
-                            <span className="text-text-tertiary">{activeTopicName}</span>
-                          </>
-                        )}
-                        {activeTags.length > 0 && (
+                  <DetailSectionEyebrow>
+                    {overviewSectionLabel}
+                  </DetailSectionEyebrow>
+                  <DetailSectionCard className="mb-8">
+                    <div className="w-full p-3 flex items-center justify-between">
+                      <div className="flex items-center gap-2 text-sm font-sans">
+                        {hasAnalysis ? (
                           <>
-                            <span className="text-text-tertiary">·</span>
-                            <span className="text-text-tertiary">
-                              {activeTags.join(", ")}
-                            </span>
+                            <Check
+                              strokeWidth={1.5}
+                              className="w-4 h-4 text-accent-primary"
+                            />
+                            <span className="text-text-primary">Analyzed</span>
+                            {activeTopicName && (
+                              <>
+                                <span className="text-text-tertiary">·</span>
+                                <span className="text-text-tertiary">
+                                  {activeTopicName}
+                                </span>
+                              </>
+                            )}
+                            {activeTags.length > 0 && (
+                              <>
+                                <span className="text-text-tertiary">·</span>
+                                <span className="text-text-tertiary">
+                                  {activeTags.join(", ")}
+                                </span>
+                              </>
+                            )}
                           </>
+                        ) : (
+                          <span className="text-text-tertiary">
+                            Not analyzed yet
+                          </span>
                         )}
-                      </>
-                    ) : (
-                      <span className="text-text-tertiary">Not analyzed yet</span>
-                    )}
-                  </div>
-                </div>
+                      </div>
+                    </div>
 
-                <div className="border-t border-border-subtle" />
+                    <div className="border-t border-border-subtle" />
 
-                {/* Summary 区域 */}
-                <div className="p-4">
-                  {summaryLoading ? (
-                    <p className="text-[13px] font-sans text-text-tertiary">
-                      Loading summary...
-                    </p>
-                  ) : summaryData ? (
-                    <div>
-                      <button
-                        type="button"
-                        onClick={() => setSummaryExpanded((prev) => !prev)}
-                        className="w-full flex items-center justify-between py-1 text-[13px]
+                    {/* Summary 区域 */}
+                    <div className="p-4">
+                      {summaryLoading ? (
+                        <p className="text-[13px] font-sans text-text-tertiary">
+                          Loading summary...
+                        </p>
+                      ) : summaryData ? (
+                        <div>
+                          <button
+                            type="button"
+                            onClick={() => setSummaryExpanded((prev) => !prev)}
+                            className="w-full flex items-center justify-between py-1 text-[13px]
                    font-sans text-text-secondary hover:text-text-primary
                    transition-colors duration-150"
-                      >
-                        <span className="font-medium">{summaryData.meta?.title || "Summary"}</span>
-                        <ChevronDown
-                          className={`w-4 h-4 transition-transform duration-200 ${
-                            summaryExpanded ? "rotate-180" : ""
-                          }`}
-                          strokeWidth={1.75}
-                        />
-                      </button>
-                      <div
-                        className={`grid transition-[grid-template-rows,opacity] duration-300 ease-in-out ${
-                          summaryExpanded
-                            ? "grid-rows-[1fr] opacity-100 mt-3"
-                            : "grid-rows-[0fr] opacity-0"
-                        }`}
-                      >
-                        <div className="overflow-hidden">
-                          <StructuredSummaryCard data={summaryData} compact />
+                          >
+                            <span className="font-medium">
+                              {summaryData.meta?.title || "Summary"}
+                            </span>
+                            <ChevronDown
+                              className={`w-4 h-4 transition-transform duration-200 ${
+                                summaryExpanded ? "rotate-180" : ""
+                              }`}
+                              strokeWidth={1.75}
+                            />
+                          </button>
+                          <div
+                            className={`grid transition-[grid-template-rows,opacity] duration-300 ease-in-out ${
+                              summaryExpanded
+                                ? "grid-rows-[1fr] opacity-100 mt-3"
+                                : "grid-rows-[0fr] opacity-0"
+                            }`}
+                          >
+                            <div className="overflow-hidden">
+                              <StructuredSummaryCard
+                                data={summaryData}
+                                compact
+                              />
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="flex flex-col gap-3">
-                      <p className="text-[13px] font-sans text-text-tertiary leading-relaxed">
-                        No summary yet. Generate one to see structured insights.
-                      </p>
-                      {storage.generateSummary && (
-                        <>
-                          {summaryGenerating && pipelineStages.length > 0 && (
-                            <SummaryPipelineProgress stages={pipelineStages} />
-                          )}
-                          <button
-                            type="button"
-                            disabled={summaryGenerating}
-                            onClick={async () => {
-                              if (!selectedConversationId || !storage.generateSummary) return;
-                              setSummaryGenerating(true);
-                              setPipelineStages(getInitialStages());
-                              setPipelineStages((prev) =>
-                                prev.map((stage, index) =>
-                                  index === 0
-                                    ? { ...stage, status: "in_progress" }
-                                    : stage
-                                )
-                              );
-
-                              let progressListener:
-                                | ((
-                                    message: unknown,
-                                    _sender: chrome.runtime.MessageSender,
-                                    _sendResponse: (response?: unknown) => void
-                                  ) => void)
-                                | null = null;
-
-                              try {
-                                if (typeof chrome !== "undefined" && chrome.runtime?.onMessage) {
-                                  progressListener = (message) => {
-                                    if (!message || typeof message !== "object") return;
-                                    const maybeMessage = message as {
-                                      type?: unknown;
-                                      payload?: { stage?: unknown; status?: unknown };
-                                    };
-                                    if (maybeMessage.type !== "INSIGHT_PIPELINE_PROGRESS") return;
-
-                                    const stage = maybeMessage.payload?.stage;
-                                    const status = maybeMessage.payload?.status;
-                                    if (typeof stage !== "string" || typeof status !== "string") {
-                                      return;
-                                    }
-                                    if (!isPipelineStageStatus(status)) {
-                                      return;
-                                    }
-
-                                    setPipelineStages((prev) => {
-                                      const currentIdx = prev.findIndex((item) => item.stage === stage);
-                                      if (currentIdx === -1) return prev;
-
-                                      return prev.map((item, idx) => {
-                                        if (item.stage === stage) {
-                                          return { ...item, status };
+                      ) : (
+                        <div className="flex flex-col gap-3">
+                          <p className="text-[13px] font-sans text-text-tertiary leading-relaxed">
+                            No summary yet. Generate one to see structured
+                            insights.
+                          </p>
+                          {storage.generateSummary && (
+                            <>
+                              {summaryGenerating &&
+                                pipelineStages.length > 0 && (
+                                  <SummaryPipelineProgress
+                                    stages={pipelineStages}
+                                  />
+                                )}
+                              <button
+                                type="button"
+                                disabled={summaryGenerating}
+                                onClick={async () => {
+                                  if (
+                                    !selectedConversationId ||
+                                    !storage.generateSummary
+                                  )
+                                    return;
+                                  setSummaryGenerating(true);
+                                  setPipelineStages(getInitialStages());
+                                  setPipelineStages((prev) =>
+                                    prev.map((stage, index) =>
+                                      index === 0
+                                        ? { ...stage, status: "in_progress" }
+                                        : stage,
+                                    ),
+                                  );
+
+                                  let progressListener:
+                                    | ((
+                                        message: unknown,
+                                        _sender: chrome.runtime.MessageSender,
+                                        _sendResponse: (
+                                          response?: unknown,
+                                        ) => void,
+                                      ) => void)
+                                    | null = null;
+
+                                  try {
+                                    if (
+                                      typeof chrome !== "undefined" &&
+                                      chrome.runtime?.onMessage
+                                    ) {
+                                      progressListener = (message) => {
+                                        if (
+                                          !message ||
+                                          typeof message !== "object"
+                                        )
+                                          return;
+                                        const maybeMessage = message as {
+                                          type?: unknown;
+                                          payload?: {
+                                            stage?: unknown;
+                                            status?: unknown;
+                                          };
+                                        };
+                                        if (
+                                          maybeMessage.type !==
+                                          "INSIGHT_PIPELINE_PROGRESS"
+                                        )
+                                          return;
+
+                                        const stage =
+                                          maybeMessage.payload?.stage;
+                                        const status =
+                                          maybeMessage.payload?.status;
+                                        if (
+                                          typeof stage !== "string" ||
+                                          typeof status !== "string"
+                                        ) {
+                                          return;
                                         }
-                                        if (status === "completed" && idx === currentIdx + 1) {
-                                          return { ...item, status: "in_progress" };
+                                        if (!isPipelineStageStatus(status)) {
+                                          return;
                                         }
-                                        return item;
-                                      });
-                                    });
-                                  };
-                                  chrome.runtime.onMessage.addListener(progressListener);
-                                } else {
-                                  const simulateProgress = async () => {
-                                    const stages = getInitialStages().map((item) => item.stage);
-                                    for (let i = 0; i < stages.length; i += 1) {
-                                      await new Promise((resolve) => {
-                                        setTimeout(resolve, 600);
-                                      });
-                                      setPipelineStages((prev) =>
-                                        prev.map((stage, idx) => ({
-                                          ...stage,
-                                          status:
-                                            idx < i
-                                              ? "completed"
-                                              : idx === i
-                                                ? "in_progress"
-                                                : "pending",
-                                        }))
+
+                                        setPipelineStages((prev) => {
+                                          const currentIdx = prev.findIndex(
+                                            (item) => item.stage === stage,
+                                          );
+                                          if (currentIdx === -1) return prev;
+
+                                          return prev.map((item, idx) => {
+                                            if (item.stage === stage) {
+                                              return { ...item, status };
+                                            }
+                                            if (
+                                              status === "completed" &&
+                                              idx === currentIdx + 1
+                                            ) {
+                                              return {
+                                                ...item,
+                                                status: "in_progress",
+                                              };
+                                            }
+                                            return item;
+                                          });
+                                        });
+                                      };
+                                      chrome.runtime.onMessage.addListener(
+                                        progressListener,
                                       );
+                                    } else {
+                                      const simulateProgress = async () => {
+                                        const stages = getInitialStages().map(
+                                          (item) => item.stage,
+                                        );
+                                        for (
+                                          let i = 0;
+                                          i < stages.length;
+                                          i += 1
+                                        ) {
+                                          await new Promise((resolve) => {
+                                            setTimeout(resolve, 600);
+                                          });
+                                          setPipelineStages((prev) =>
+                                            prev.map((stage, idx) => ({
+                                              ...stage,
+                                              status:
+                                                idx < i
+                                                  ? "completed"
+                                                  : idx === i
+                                                    ? "in_progress"
+                                                    : "pending",
+                                            })),
+                                          );
+                                        }
+                                      };
+                                      void simulateProgress();
                                     }
-                                  };
-                                  void simulateProgress();
-                                }
 
-                                const data = await storage.generateSummary(selectedConversationId);
-                                setPipelineStages((prev) =>
-                                  prev.map((stage) => ({ ...stage, status: "completed" }))
-                                );
-                                setSummaryData(data);
-                                setSummaryExpanded(true);
-                              } catch (error) {
-                                console.error("[library] generateSummary failed", error);
-                                setPipelineStages((prev) =>
-                                  prev.map((stage) =>
-                                    stage.status === "in_progress"
-                                      ? { ...stage, status: "degraded_fallback" }
-                                      : stage
-                                  )
-                                );
-                              } finally {
-                                if (
-                                  progressListener &&
-                                  typeof chrome !== "undefined" &&
-                                  chrome.runtime?.onMessage
-                                ) {
-                                  chrome.runtime.onMessage.removeListener(progressListener);
-                                }
-                                setSummaryGenerating(false);
-                              }
-                            }}
-                            className="self-start inline-flex items-center gap-1.5 px-3 py-1.5
+                                    const data = await storage.generateSummary(
+                                      selectedConversationId,
+                                    );
+                                    setPipelineStages((prev) =>
+                                      prev.map((stage) => ({
+                                        ...stage,
+                                        status: "completed",
+                                      })),
+                                    );
+                                    setSummaryData(data);
+                                    setSummaryExpanded(true);
+                                  } catch (error) {
+                                    console.error(
+                                      "[library] generateSummary failed",
+                                      error,
+                                    );
+                                    setPipelineStages((prev) =>
+                                      prev.map((stage) =>
+                                        stage.status === "in_progress"
+                                          ? {
+                                              ...stage,
+                                              status: "degraded_fallback",
+                                            }
+                                          : stage,
+                                      ),
+                                    );
+                                  } finally {
+                                    if (
+                                      progressListener &&
+                                      typeof chrome !== "undefined" &&
+                                      chrome.runtime?.onMessage
+                                    ) {
+                                      chrome.runtime.onMessage.removeListener(
+                                        progressListener,
+                                      );
+                                    }
+                                    setSummaryGenerating(false);
+                                  }
+                                }}
+                                className="self-start inline-flex items-center gap-1.5 px-3 py-1.5
                              rounded-md text-[13px] font-sans text-text-secondary
                              hover:text-accent-primary hover:bg-accent-primary-light
                              transition-colors duration-150 disabled:opacity-50
                              disabled:cursor-not-allowed"
-                          >
-                            Generate Summary
-                          </button>
-                        </>
+                              >
+                                Generate Summary
+                              </button>
+                            </>
+                          )}
+                        </div>
                       )}
                     </div>
-                  )}
-                </div>
 
-                {/* 操作栏 */}
-                <div className="px-4 pb-3 flex items-center gap-2 border-t border-border-subtle pt-3">
-                  {storage.generateSummary && summaryData && (
-                    <button
-                      type="button"
-                      disabled={summaryGenerating}
-                      onClick={async () => {
-                        if (!selectedConversationId || !storage.generateSummary) return;
-                        setSummaryData(null);
-                        setSummaryExpanded(false);
-                        setSummaryGenerating(true);
-                        setPipelineStages(getInitialStages());
-                        setPipelineStages((prev) =>
-                          prev.map((stage, index) =>
-                            index === 0 ? { ...stage, status: "in_progress" } : stage
-                          )
-                        );
-                        try {
-                          const data = await storage.generateSummary(selectedConversationId);
-                          setPipelineStages((prev) =>
-                            prev.map((stage) => ({ ...stage, status: "completed" }))
-                          );
-                          setSummaryData(data);
-                          setSummaryExpanded(true);
-                        } catch (error) {
-                          console.error("[library] regenerateSummary failed", error);
-                          setPipelineStages((prev) =>
-                            prev.map((stage) =>
-                              stage.status === "in_progress"
-                                ? { ...stage, status: "degraded_fallback" }
-                                : stage
+                    {/* 操作栏 */}
+                    <div className="px-4 pb-3 flex items-center gap-2 border-t border-border-subtle pt-3">
+                      {storage.generateSummary && summaryData && (
+                        <button
+                          type="button"
+                          disabled={summaryGenerating}
+                          onClick={async () => {
+                            if (
+                              !selectedConversationId ||
+                              !storage.generateSummary
                             )
-                          );
-                        } finally {
-                          setSummaryGenerating(false);
-                        }
-                      }}
-                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md
+                              return;
+                            setSummaryData(null);
+                            setSummaryExpanded(false);
+                            setSummaryGenerating(true);
+                            setPipelineStages(getInitialStages());
+                            setPipelineStages((prev) =>
+                              prev.map((stage, index) =>
+                                index === 0
+                                  ? { ...stage, status: "in_progress" }
+                                  : stage,
+                              ),
+                            );
+                            try {
+                              const data = await storage.generateSummary(
+                                selectedConversationId,
+                              );
+                              setPipelineStages((prev) =>
+                                prev.map((stage) => ({
+                                  ...stage,
+                                  status: "completed",
+                                })),
+                              );
+                              setSummaryData(data);
+                              setSummaryExpanded(true);
+                            } catch (error) {
+                              console.error(
+                                "[library] regenerateSummary failed",
+                                error,
+                              );
+                              setPipelineStages((prev) =>
+                                prev.map((stage) =>
+                                  stage.status === "in_progress"
+                                    ? { ...stage, status: "degraded_fallback" }
+                                    : stage,
+                                ),
+                              );
+                            } finally {
+                              setSummaryGenerating(false);
+                            }
+                          }}
+                          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md
                  text-[13px] font-sans text-text-secondary
                  hover:text-accent-primary hover:bg-accent-primary-light
                  transition-colors duration-150 disabled:opacity-50
                  disabled:cursor-not-allowed"
-                    >
-                      <RefreshCw className="w-3.5 h-3.5" strokeWidth={1.75} />
-                      Regenerate
-                    </button>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => void handleImportConversationToNotes()}
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-sans
-                      text-text-secondary hover:text-accent-primary hover:bg-accent-primary-light
-                      transition-colors duration-150"
-                  >
-                    <BookOpen strokeWidth={1.5} className="w-3.5 h-3.5" />
-                    Import to Notes
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      const linkedNote = notes.find((n) =>
-                        n.linked_conversation_ids.includes(selectedConversationId ?? -1)
-                      );
-                      if (linkedNote) {
-                        void openNotesView(linkedNote.id);
-                      }
-                    }}
-                    disabled={!hasLinkedNote}
-                    className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-sans
-                      transition-colors duration-150
-                      ${hasLinkedNote
-                        ? "text-text-secondary hover:text-accent-primary hover:bg-accent-primary-light"
-                        : "text-text-tertiary cursor-not-allowed opacity-50"
-                      }`}
-                  >
-                    <ArrowRight strokeWidth={1.5} className="w-3.5 h-3.5" />
-                    View Note
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            {/* Block C - Conversation Preview */}
-            <div className="mt-6">
-              {/* 默认预览条 - 折叠时显示 */}
-              {!isReaderConversationExpanded && (
-                <div className="space-y-4">
-                  <div className="flex items-start justify-between gap-4">
-                    <p className="text-[13px] font-sans text-text-secondary leading-relaxed line-clamp-2 flex-1">
-                      {messagesLoading
-                        ? "Loading..."
-                        : messages.length === 0
-                          ? "No messages captured yet."
-                          : buildMessagePreviewText(messages[0], { maxChars: 120 })}
-                    </p>
-                    {messageCount > 1 && (
+                        >
+                          <RefreshCw
+                            className="w-3.5 h-3.5"
+                            strokeWidth={1.75}
+                          />
+                          Regenerate
+                        </button>
+                      )}
                       <button
                         type="button"
-                        onClick={() => setIsConversationExpanded((prev) => !prev)}
-                        className="shrink-0 whitespace-nowrap text-[12px] font-sans text-text-tertiary transition-colors hover:text-text-secondary"
+                        onClick={() => void handleImportConversationToNotes()}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-sans
+                      text-text-secondary hover:text-accent-primary hover:bg-accent-primary-light
+                      transition-colors duration-150"
                       >
-                        Show all {messageCount} messages ↓
+                        <BookOpen strokeWidth={1.5} className="w-3.5 h-3.5" />
+                        Import to Notes
                       </button>
-                    )}
-                  </div>
-                  {isConversationContentSettled && timestampFooter && (
-                    <ReaderTimestampFooter
-                      key={selectedConversation.id}
-                      model={timestampFooter}
-                      className="border-t border-border-subtle pt-4"
-                    />
-                  )}
-                </div>
-              )}
-
-              {/* 展开后的完整消息流 */}
-              <div
-                className={`transition-all duration-300 ease-in-out ${
-                  isSplitActive
-                    ? "mt-6 opacity-100"
-                    : isConversationExpanded
-                      ? "mt-6 overflow-hidden opacity-100"
-                      : "max-h-0 overflow-hidden opacity-0 pointer-events-none"
-                }`}
-              >
-                <div
-                  ref={conversationPreviewScrollRef}
-                  className={`relative ${
-                    isSplitActive
-                      ? ""
-                      : "max-h-[440px] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface-card p-4"
-                  }`}
-                  style={isSplitActive ? undefined : { scrollbarGutter: "stable" }}
-                >
-                  {!isSplitActive && messageCount > 1 && (
-                    <div className="sticky top-0 z-10 flex justify-end bg-bg-surface-card pb-2">
                       <button
                         type="button"
-                        onClick={() => setIsConversationExpanded(false)}
-                        className="text-[12px] font-sans text-text-tertiary hover:text-text-secondary transition-colors whitespace-nowrap"
+                        onClick={() => {
+                          const linkedNote = notes.find((n) =>
+                            n.linked_conversation_ids.includes(
+                              selectedConversationId ?? -1,
+                            ),
+                          );
+                          if (linkedNote) {
+                            void openNotesView(linkedNote.id);
+                          }
+                        }}
+                        disabled={!hasLinkedNote}
+                        className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[13px] font-sans
+                      transition-colors duration-150
+                      ${
+                        hasLinkedNote
+                          ? "text-text-secondary hover:text-accent-primary hover:bg-accent-primary-light"
+                          : "text-text-tertiary cursor-not-allowed opacity-50"
+                      }`}
                       >
-                        Hide ↑
+                        <ArrowRight strokeWidth={1.5} className="w-3.5 h-3.5" />
+                        View Note
                       </button>
                     </div>
-                  )}
-                  <div>
-                    <div className="prose prose-slate max-w-none min-w-0">
-                      {messagesLoading && (
-                        <div className="text-[13px] font-sans text-text-tertiary">
-                          Loading messages...
-                        </div>
-                      )}
-                      {!messagesLoading && messagesError && (
-                        <div className="text-[13px] font-sans text-text-tertiary">
-                          Unable to load messages.
+                  </DetailSectionCard>
+
+                  <DetailSectionEyebrow>
+                    Original Conversation
+                  </DetailSectionEyebrow>
+                  <DetailSectionCard className="mb-8">
+                    {/* 默认预览条 - 折叠时显示 */}
+                    {!isReaderConversationExpanded && (
+                      <div className="space-y-4 p-5">
+                        <div className="rounded-[20px] border border-border-subtle bg-bg-secondary/40 px-4 py-4">
+                          <div className="flex flex-wrap items-center gap-2 text-[11px] font-sans uppercase tracking-[0.14em] text-text-tertiary">
+                            <span>Preview</span>
+                            <span
+                              className="h-1 w-1 rounded-full bg-border-default/80"
+                              aria-hidden="true"
+                            />
+                            <span>{messageCount} messages</span>
+                          </div>
+                          <p
+                            className={`mt-3 max-w-[60ch] break-words font-sans text-[14px] leading-[1.75] ${
+                              messagesLoading
+                                ? "text-text-tertiary"
+                                : "line-clamp-3 text-text-primary"
+                            }`}
+                          >
+                            {messagesLoading
+                              ? "Loading original conversation..."
+                              : originalConversationPreview}
+                          </p>
+                          {canToggleConversationExpanded && (
+                            <div className="mt-4 flex justify-end border-t border-border-subtle pt-3">
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  setIsConversationExpanded((prev) => !prev)
+                                }
+                                className="inline-flex items-center rounded-full bg-bg-primary px-3.5 py-1.5 text-[12px] font-sans text-text-secondary transition-colors hover:bg-white hover:text-text-primary"
+                              >
+                                Show original messages ({messageCount})
+                              </button>
+                            </div>
+                          )}
                         </div>
-                      )}
-                      {messages.map((message, messageIndex) => {
-                        const isUser = message.role === "user";
-                        const messageAnnotations = getAnnotationsForMessage(message.id);
-                        const latestAnnotation = getLatestAnnotationForMessage(message.id);
-                        const annotationCount = messageAnnotations.length;
-                        const isAnnotationActive = activeAnnotationMessageId === message.id;
+                        {isConversationContentSettled && timestampFooter && (
+                          <ReaderTimestampFooter
+                            key={selectedConversation.id}
+                            model={timestampFooter}
+                          />
+                        )}
+                      </div>
+                    )}
 
-                        return (
-                          <div key={message.id} className="group mb-5">
-                            <div
-                              className={`rounded-[22px] border px-4 py-4 transition-all duration-150 md:px-5 ${
-                                isAnnotationActive
-                                  ? "border-accent-primary/40 bg-accent-primary-light/40 shadow-[0_8px_28px_rgba(15,23,42,0.06)]"
-                                  : "border-transparent hover:border-border-subtle hover:bg-bg-secondary/40"
-                              }`}
+                    {/* 展开后的完整消息流 */}
+                    <div
+                      className={`transition-all duration-300 ease-in-out ${
+                        isSplitActive
+                          ? "border-t border-border-subtle opacity-100"
+                          : isConversationExpanded
+                            ? "overflow-hidden border-t border-border-subtle opacity-100"
+                            : "max-h-0 overflow-hidden opacity-0 pointer-events-none"
+                      }`}
+                    >
+                      <div
+                        ref={conversationPreviewScrollRef}
+                        className={`relative ${
+                          isSplitActive
+                            ? ""
+                            : "max-h-[440px] overflow-y-auto p-4"
+                        }`}
+                        style={
+                          isSplitActive
+                            ? undefined
+                            : { scrollbarGutter: "stable" }
+                        }
+                      >
+                        {canToggleConversationExpanded && (
+                          <div className="mb-3 flex justify-end">
+                            <button
+                              type="button"
+                              onClick={() => setIsConversationExpanded(false)}
+                              className="inline-flex items-center rounded-full border border-border-subtle bg-bg-primary px-3.5 py-1.5 text-[12px] font-sans text-text-secondary transition-colors whitespace-nowrap hover:bg-bg-secondary hover:text-text-primary"
                             >
-                              <div className="flex items-start justify-between gap-3">
-                                {isUser ? (
-                                  <div className="text-[11px] font-sans text-text-tertiary uppercase tracking-wide">
-                                    You
-                                  </div>
-                                ) : (
-                                  <span
-                                    className="inline-block px-2 py-0.5 rounded-md text-[11px] font-sans font-medium leading-none uppercase tracking-wide"
-                                    style={getPlatformBadgeStyle(
-                                      selectedConversation.platform,
-                                      themeMode
-                                    )}
+                              Hide original messages
+                            </button>
+                          </div>
+                        )}
+                        <div>
+                          <div className="prose prose-slate max-w-none min-w-0">
+                            {messagesLoading && (
+                              <div className="text-[13px] font-sans text-text-tertiary">
+                                Loading messages...
+                              </div>
+                            )}
+                            {!messagesLoading && messagesError && (
+                              <div className="text-[13px] font-sans text-text-tertiary">
+                                Unable to load messages.
+                              </div>
+                            )}
+                            {messages.map((message, messageIndex) => {
+                              const isUser = message.role === "user";
+                              const messageAnnotations =
+                                getAnnotationsForMessage(message.id);
+                              const latestAnnotation =
+                                getLatestAnnotationForMessage(message.id);
+                              const annotationCount = messageAnnotations.length;
+                              const isAnnotationActive =
+                                activeAnnotationMessageId === message.id;
+
+                              return (
+                                <div key={message.id} className="group mb-5">
+                                  <div
+                                    className={`rounded-[22px] border px-4 py-4 transition-all duration-150 md:px-5 ${
+                                      isAnnotationActive
+                                        ? "border-accent-primary/40 bg-accent-primary-light/40 shadow-[0_8px_28px_rgba(15,23,42,0.06)]"
+                                        : "border-transparent hover:border-border-subtle hover:bg-bg-secondary/40"
+                                    }`}
                                   >
-                                    {getPlatformLabel(selectedConversation.platform)}
-                                  </span>
-                                )}
-
-                                <button
-                                  type="button"
-                                  ref={(node) => setAnnotationTriggerRef(message.id, node)}
-                                  data-annotation-trigger="true"
-                                  onClick={() => void handleAnnotationTriggerClick(message)}
-                                  className={`relative inline-flex h-9 w-9 items-center justify-center rounded-2xl transition-all ${
-                                    annotationCount > 0
-                                      ? isAnnotationActive
-                                        ? "bg-accent-primary-light/70 text-accent-primary opacity-100"
-                                        : "bg-transparent text-text-secondary opacity-100"
-                                      : isAnnotationActive
-                                        ? "border border-border-subtle bg-bg-primary text-text-secondary"
-                                        : isAnnotationTriggerAlwaysVisible
-                                          ? "border border-border-subtle/80 bg-bg-primary/90 text-text-tertiary opacity-100"
-                                          : "border border-border-subtle/80 bg-bg-primary/90 text-text-tertiary opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
-                                  }`}
-                                  aria-label={`${getAnnotationTriggerLabel(latestAnnotation)}: ${
-                                    isUser ? "user message" : `${selectedConversation.platform} reply`
-                                  }`}
-                                  title={
-                                    annotationCount > 0
-                                      ? "Open annotations"
-                                      : getAnnotationTriggerLabel(latestAnnotation)
-                                  }
-                                >
-                                  {annotationCount === 0 ? (
-                                    <MessageSquarePlus strokeWidth={1.8} className="h-4 w-4" />
-                                  ) : (
-                                    <MessageSquare
-                                      strokeWidth={1.8}
-                                      className={`h-4 w-4 transition-opacity ${
-                                        isAnnotationActive || isAnnotationTriggerAlwaysVisible
-                                          ? "opacity-100"
-                                          : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
-                                      }`}
-                                    />
-                                  )}
-                                  {annotationCount > 0 ? (
-                                    <span
-                                      className={`absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-accent-primary transition-transform ${
-                                        isAnnotationActive ? "scale-125" : ""
+                                    <div className="flex items-start justify-between gap-3">
+                                      {isUser ? (
+                                        <div className="text-[11px] font-sans text-text-tertiary uppercase tracking-wide">
+                                          You
+                                        </div>
+                                      ) : (
+                                        <span
+                                          className="inline-block px-2 py-0.5 rounded-md text-[11px] font-sans font-medium leading-none uppercase tracking-wide"
+                                          style={getPlatformBadgeStyle(
+                                            selectedConversation.platform,
+                                            themeMode,
+                                          )}
+                                        >
+                                          {getPlatformLabel(
+                                            selectedConversation.platform,
+                                          )}
+                                        </span>
+                                      )}
+
+                                      <button
+                                        type="button"
+                                        ref={(node) =>
+                                          setAnnotationTriggerRef(
+                                            message.id,
+                                            node,
+                                          )
+                                        }
+                                        data-annotation-trigger="true"
+                                        onClick={() =>
+                                          void handleAnnotationTriggerClick(
+                                            message,
+                                          )
+                                        }
+                                        className={`relative inline-flex h-9 w-9 items-center justify-center rounded-2xl transition-all ${
+                                          annotationCount > 0
+                                            ? isAnnotationActive
+                                              ? "bg-accent-primary-light/70 text-accent-primary opacity-100"
+                                              : "bg-transparent text-text-secondary opacity-100"
+                                            : isAnnotationActive
+                                              ? "border border-border-subtle bg-bg-primary text-text-secondary"
+                                              : isAnnotationTriggerAlwaysVisible
+                                                ? "border border-border-subtle/80 bg-bg-primary/90 text-text-tertiary opacity-100"
+                                                : "border border-border-subtle/80 bg-bg-primary/90 text-text-tertiary opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
+                                        }`}
+                                        aria-label={`${getAnnotationTriggerLabel(latestAnnotation)}: ${
+                                          isUser
+                                            ? "user message"
+                                            : `${selectedConversation.platform} reply`
+                                        }`}
+                                        title={
+                                          annotationCount > 0
+                                            ? "Open annotations"
+                                            : getAnnotationTriggerLabel(
+                                                latestAnnotation,
+                                              )
+                                        }
+                                      >
+                                        {annotationCount === 0 ? (
+                                          <MessageSquarePlus
+                                            strokeWidth={1.8}
+                                            className="h-4 w-4"
+                                          />
+                                        ) : (
+                                          <MessageSquare
+                                            strokeWidth={1.8}
+                                            className={`h-4 w-4 transition-opacity ${
+                                              isAnnotationActive ||
+                                              isAnnotationTriggerAlwaysVisible
+                                                ? "opacity-100"
+                                                : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
+                                            }`}
+                                          />
+                                        )}
+                                        {annotationCount > 0 ? (
+                                          <span
+                                            className={`absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-accent-primary transition-transform ${
+                                              isAnnotationActive
+                                                ? "scale-125"
+                                                : ""
+                                            }`}
+                                            aria-hidden="true"
+                                          ></span>
+                                        ) : null}
+                                      </button>
+                                    </div>
+
+                                    <div
+                                      className={`mt-3 text-base leading-relaxed ${
+                                        isUser
+                                          ? "text-text-primary font-semibold"
+                                          : "text-text-secondary"
                                       }`}
-                                      aria-hidden="true"
                                     >
-                                    </span>
-                                  ) : null}
-                                </button>
-                              </div>
+                                      <div
+                                        className={
+                                          isUser
+                                            ? ""
+                                            : "rounded-2xl bg-bg-surface-ai-message p-3"
+                                        }
+                                        ref={(node) =>
+                                          setMessageContentRef(message.id, node)
+                                        }
+                                        onMouseUp={() => {
+                                          const element =
+                                            messageContentRefs.current.get(
+                                              message.id,
+                                            ) ?? null;
+                                          window.setTimeout(() => {
+                                            updateReaderSelectionAction(
+                                              message,
+                                              messageIndex + 1,
+                                              element,
+                                            );
+                                          }, 0);
+                                        }}
+                                      >
+                                        <RichMessageContent message={message} />
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
 
+                          {isAnnotationPanelOpen &&
+                            !isAnnotationDrawerOverlay &&
+                            activeAnnotationMessage &&
+                            annotationPopoverStyle && (
                               <div
-                                className={`mt-3 text-base leading-relaxed ${
-                                  isUser
-                                    ? "text-text-primary font-semibold"
-                                    : "text-text-secondary"
-                                }`}
+                                ref={annotationSurfaceRef}
+                                style={{
+                                  top: annotationPopoverStyle.top,
+                                  left: annotationPopoverStyle.left,
+                                  width: annotationPopoverStyle.width,
+                                  maxHeight: annotationPopoverStyle.maxHeight,
+                                }}
+                                className="absolute z-20 overflow-y-auto rounded-[22px] border border-border-subtle bg-bg-primary shadow-[0_18px_48px_rgba(15,23,42,0.18)]"
                               >
-                                <div
-                                  className={
-                                    isUser
-                                      ? ""
-                                      : "rounded-2xl bg-bg-surface-ai-message p-3"
-                                  }
-                                  ref={(node) => setMessageContentRef(message.id, node)}
-                                  onMouseUp={() => {
-                                    const element =
-                                      messageContentRefs.current.get(message.id) ?? null;
-                                    window.setTimeout(() => {
-                                      updateReaderSelectionAction(
-                                        message,
-                                        messageIndex + 1,
-                                        element
-                                      );
-                                    }, 0);
-                                  }}
-                                >
-                                  <RichMessageContent message={message} />
-                                </div>
+                                {renderAnnotationPanelContent()}
                               </div>
-                            </div>
-                          </div>
-                        );
-                      })}
+                            )}
+                          {readerSelectionAction ? (
+                            <button
+                              type="button"
+                              onMouseDown={(event) => event.preventDefault()}
+                              onClick={() => void handleExtractSelection()}
+                              className="fixed z-30 inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-primary px-3 py-1.5 text-[12px] font-sans text-text-primary shadow-[0_10px_28px_rgba(15,23,42,0.18)] transition-colors hover:bg-bg-secondary"
+                              style={{
+                                top: readerSelectionAction.top,
+                                left: readerSelectionAction.left,
+                              }}
+                            >
+                              <BookOpen
+                                strokeWidth={1.6}
+                                className="h-3.5 w-3.5"
+                              />
+                              Extract
+                            </button>
+                          ) : null}
+                        </div>
+                      </div>
+
+                      {isConversationContentSettled && timestampFooter && (
+                        <ReaderTimestampFooter
+                          key={selectedConversation.id}
+                          model={timestampFooter}
+                          className="mt-4 border-t border-border-subtle pt-4"
+                        />
+                      )}
                     </div>
+                  </DetailSectionCard>
 
-                    {isAnnotationPanelOpen &&
-                      !isAnnotationDrawerOverlay &&
-                      activeAnnotationMessage &&
-                      annotationPopoverStyle && (
-                        <div
+                  {isAnnotationPanelOpen &&
+                    isAnnotationDrawerOverlay &&
+                    activeAnnotationMessage && (
+                      <>
+                        <button
+                          type="button"
+                          aria-label="Close annotation panel backdrop"
+                          onClick={() => void dismissAnnotationSurface()}
+                          className="fixed inset-0 z-40 bg-black/20 xl:hidden"
+                        />
+                        <aside
                           ref={annotationSurfaceRef}
-                          style={{
-                            top: annotationPopoverStyle.top,
-                            left: annotationPopoverStyle.left,
-                            width: annotationPopoverStyle.width,
-                            maxHeight: annotationPopoverStyle.maxHeight,
-                          }}
-                          className="absolute z-20 overflow-y-auto rounded-[22px] border border-border-subtle bg-bg-primary shadow-[0_18px_48px_rgba(15,23,42,0.18)]"
+                          className="fixed inset-x-0 bottom-0 z-50 flex max-h-[78vh] flex-col rounded-t-[28px] border border-border-subtle bg-bg-primary shadow-[0_-12px_48px_rgba(15,23,42,0.18)] xl:hidden"
                         >
-                          {renderAnnotationPanelContent()}
+                          <div className="mx-auto mt-3 h-1.5 w-12 rounded-full bg-border-subtle" />
+                          <div className="flex items-center justify-between gap-3 border-b border-border-subtle px-5 py-4">
+                            <div>
+                              <div className="text-[11px] font-sans uppercase tracking-[0.16em] text-text-tertiary">
+                                Comment
+                              </div>
+                              <div className="mt-1 text-sm font-sans font-medium text-text-primary">
+                                {activeAnnotationMessage.role === "user"
+                                  ? "You"
+                                  : selectedConversation.platform}
+                              </div>
+                            </div>
+                            <button
+                              type="button"
+                              onClick={() => void dismissAnnotationSurface()}
+                              className="rounded-md p-1 text-text-secondary hover:bg-bg-surface-card hover:text-text-primary transition-colors"
+                              aria-label="Close annotation panel"
+                            >
+                              <X strokeWidth={1.8} className="h-4 w-4" />
+                            </button>
+                          </div>
+                          <div className="min-h-0 flex-1 overflow-y-auto">
+                            {renderAnnotationPanelContent()}
+                          </div>
+                        </aside>
+                      </>
+                    )}
+
+                  {/* Related Notes */}
+                  {selectedConversation &&
+                    relatedNotesForConversation.length > 0 && (
+                      <>
+                        <DetailSectionEyebrow>
+                          Related Notes
+                        </DetailSectionEyebrow>
+                        <DetailSectionCard className="mb-8">
+                          <div className="space-y-2 p-2">
+                            {relatedNotesForConversation.map((note) => (
+                              <button
+                                key={note.id}
+                                onClick={() => void openNotesView(note.id)}
+                                className="w-full flex items-center justify-between gap-4 rounded-lg px-3 py-3 text-left transition-colors hover:bg-bg-secondary/60 group"
+                              >
+                                <span className="min-w-0 flex-1 truncate text-[13px] font-sans text-text-primary">
+                                  {note.title}
+                                </span>
+                                <span className="shrink-0 text-[12px] font-sans font-medium text-accent-primary">
+                                  Open
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        </DetailSectionCard>
+                      </>
+                    )}
+
+                  <DetailSectionEyebrow>
+                    Related Conversations
+                  </DetailSectionEyebrow>
+                  <DetailSectionCard>
+                    <div className="space-y-2 p-2">
+                      {relatedLoading && (
+                        <div className="px-3 py-2 text-[13px] font-sans text-text-tertiary">
+                          Finding related conversations...
                         </div>
                       )}
-                    {readerSelectionAction ? (
-                      <button
-                        type="button"
-                        onMouseDown={(event) => event.preventDefault()}
-                        onClick={() => void handleExtractSelection()}
-                        className="fixed z-30 inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-primary px-3 py-1.5 text-[12px] font-sans text-text-primary shadow-[0_10px_28px_rgba(15,23,42,0.18)] transition-colors hover:bg-bg-secondary"
-                        style={{
-                          top: readerSelectionAction.top,
-                          left: readerSelectionAction.left,
+                      {!relatedLoading && relatedConversations.length === 0 && (
+                        <div className="px-3 py-2 text-[13px] font-sans text-text-tertiary">
+                          {relatedError
+                            ? "Unable to load related conversations."
+                            : "No related conversations yet."}
+                        </div>
+                      )}
+                      {!relatedLoading &&
+                        relatedConversations.map((related) => (
+                          <button
+                            key={related.id}
+                            onClick={() => switchToConversation(related.id)}
+                            className="w-full flex items-center justify-between gap-4 rounded-lg px-3 py-3 text-left transition-colors hover:bg-bg-secondary/60"
+                          >
+                            <div className="flex items-center gap-3 flex-1 min-w-0">
+                              <span className="text-[13px] font-sans text-text-primary truncate">
+                                {related.title}
+                              </span>
+                            </div>
+                            <span className="shrink-0 text-xs font-sans text-accent-primary font-medium">
+                              {related.similarity}%
+                            </span>
+                          </button>
+                        ))}
+                    </div>
+                  </DetailSectionCard>
+                </div>
+              </div>
+            )}
+
+            {isSplitActive && selectedConversation ? (
+              <div className="min-h-0 min-w-0 bg-bg-primary">
+                <SplitNoteEditorPanel
+                  selectedConversation={selectedConversation}
+                  selectedNote={selectedNote}
+                  noteTitle={noteTitle}
+                  noteContent={noteContent}
+                  linkedConversations={
+                    selectedNote
+                      ? selectedNote.linked_conversation_ids
+                          .map((convId) =>
+                            conversations.find(
+                              (conversation) => conversation.id === convId,
+                            ),
+                          )
+                          .filter(
+                            (conversation): conversation is Conversation =>
+                              Boolean(conversation),
+                          )
+                      : []
+                  }
+                  onTitleChange={setNoteTitle}
+                  onContentChange={setNoteContent}
+                  onAppendExcerpt={appendExcerptToDraft}
+                  onCreateConversationNote={handleCreateConversationNote}
+                  onDeleteCurrentNote={handleDeleteCurrentSplitNote}
+                  onOpenConversation={switchToConversation}
+                  formatTimeAgo={formatTimeAgo}
+                />
+              </div>
+            ) : null}
+
+            {!isSplitActive && viewMode === "notes" && selectedNote && (
+              <div className="flex-1 bg-bg-primary overflow-y-auto">
+                <div className="max-w-3xl mx-auto px-8 py-6">
+                  <div className="mb-4">
+                    {editingTitle ? (
+                      <input
+                        ref={titleInputRef}
+                        type="text"
+                        value={noteTitle}
+                        onChange={(e) => setNoteTitle(e.target.value)}
+                        onBlur={() => setEditingTitle(false)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") setEditingTitle(false);
+                          if (e.key === "Escape") {
+                            setNoteTitle(selectedNote.title);
+                            setEditingTitle(false);
+                          }
                         }}
+                        className="w-full text-2xl font-serif font-normal text-text-primary bg-transparent border-b border-accent-primary outline-none"
+                      />
+                    ) : (
+                      <h1
+                        onClick={() => setEditingTitle(true)}
+                        className="text-2xl font-serif font-normal text-text-primary cursor-text hover:opacity-70 transition-opacity"
                       >
-                        <BookOpen strokeWidth={1.6} className="h-3.5 w-3.5" />
-                        Extract
-                      </button>
-                    ) : null}
+                        {noteTitle || selectedNote.title}
+                      </h1>
+                    )}
                   </div>
-                </div>
 
-                {isConversationContentSettled && timestampFooter && (
-                  <ReaderTimestampFooter
-                    key={selectedConversation.id}
-                    model={timestampFooter}
-                    className="mt-4 border-t border-border-subtle pt-4"
-                  />
-                )}
-              </div>
-            </div>
+                  <div className="flex items-center text-[13px] font-sans text-text-secondary mb-6 pb-6 border-b border-border-subtle">
+                    <span className="ml-auto">
+                      {noteSaveStatus === "saving"
+                        ? "Saving..."
+                        : noteSaveStatus === "unsaved"
+                          ? "Unsaved changes"
+                          : `Updated ${formatTimeAgo(selectedNote.updated_at)}`}
+                    </span>
+                  </div>
 
-            {isAnnotationPanelOpen && isAnnotationDrawerOverlay && activeAnnotationMessage && (
-              <>
-                <button
-                  type="button"
-                  aria-label="Close annotation panel backdrop"
-                  onClick={() => void dismissAnnotationSurface()}
-                  className="fixed inset-0 z-40 bg-black/20 xl:hidden"
-                />
-                <aside
-                  ref={annotationSurfaceRef}
-                  className="fixed inset-x-0 bottom-0 z-50 flex max-h-[78vh] flex-col rounded-t-[28px] border border-border-subtle bg-bg-primary shadow-[0_-12px_48px_rgba(15,23,42,0.18)] xl:hidden"
-                >
-                  <div className="mx-auto mt-3 h-1.5 w-12 rounded-full bg-border-subtle" />
-                  <div className="flex items-center justify-between gap-3 border-b border-border-subtle px-5 py-4">
-                    <div>
-                      <div className="text-[11px] font-sans uppercase tracking-[0.16em] text-text-tertiary">
-                        Comment
-                      </div>
-                      <div className="mt-1 text-sm font-sans font-medium text-text-primary">
-                        {activeAnnotationMessage.role === "user"
-                          ? "You"
-                          : selectedConversation.platform}
-                      </div>
-                    </div>
-                    <button
-                      type="button"
-                      onClick={() => void dismissAnnotationSurface()}
-                      className="rounded-md p-1 text-text-secondary hover:bg-bg-surface-card hover:text-text-primary transition-colors"
-                      aria-label="Close annotation panel"
+                  {isEditingNoteBody ? (
+                    <textarea
+                      ref={textareaRef}
+                      value={noteContent}
+                      onChange={(e) => setNoteContent(e.target.value)}
+                      onBlur={() => setIsEditingNoteBody(false)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" && event.metaKey) {
+                          event.preventDefault();
+                          setIsEditingNoteBody(false);
+                        }
+                      }}
+                      placeholder="Start writing..."
+                      className="w-full bg-transparent border-none outline-none resize-none text-[13px] leading-[1.7] text-text-primary placeholder:text-text-tertiary mb-12"
+                      style={{
+                        fontFamily:
+                          '"JetBrains Mono", "SF Mono", Menlo, monospace',
+                        minHeight: "240px",
+                      }}
+                    />
+                  ) : (
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setIsEditingNoteBody(true)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          setIsEditingNoteBody(true);
+                        }
+                      }}
+                      className="mb-12 cursor-text"
+                      style={{ minHeight: "240px" }}
                     >
-                      <X strokeWidth={1.8} className="h-4 w-4" />
-                    </button>
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-y-auto">{renderAnnotationPanelContent()}</div>
-                </aside>
-              </>
-            )}
+                      {renderedNoteContent ? (
+                        <div
+                          className="prose prose-slate max-w-none text-text-primary"
+                          dangerouslySetInnerHTML={{
+                            __html: renderedNoteContent,
+                          }}
+                        />
+                      ) : (
+                        <div className="text-[13px] font-sans text-text-tertiary">
+                          Start writing...
+                        </div>
+                      )}
+                    </div>
+                  )}
 
-            {/* Related Notes */}
-            {selectedConversation && (
-              <div className="mt-10">
-                {notes.filter((note) =>
-                  note.linked_conversation_ids.includes(selectedConversation.id)
-                ).length > 0 && (
-                  <>
-                    <h3 className="text-[11px] font-sans font-medium text-text-tertiary uppercase tracking-wider mb-4">
-                      RELATED NOTES
+                  <div className="mt-8">
+                    <h3 className="text-[11px] font-sans font-medium text-text-tertiary uppercase tracking-wider mb-3">
+                      Linked Conversations
                     </h3>
-                    <div className="space-y-2">
-                      {notes.filter((note) =>
-                        note.linked_conversation_ids.includes(selectedConversation.id)
-                      ).map((note) => (
+                    {selectedNote.linked_conversation_ids.length > 0 ? (
+                      <div className="space-y-2">
+                        {selectedNote.linked_conversation_ids.map((convId) => {
+                          const conversation = conversations.find(
+                            (c) => c.id === convId,
+                          );
+                          if (!conversation) return null;
+                          return (
+                            <button
+                              key={convId}
+                              onClick={() =>
+                                switchToConversation(conversation.id)
+                              }
+                              className="w-full flex items-center justify-between p-3 rounded-lg bg-bg-surface-card hover:bg-bg-surface-card-hover transition-colors"
+                            >
+                              <div className="flex items-center gap-3 flex-1 min-w-0">
+                                <span className="text-[13px] font-sans text-text-primary truncate">
+                                  {conversation.title}
+                                </span>
+                              </div>
+                              <span className="text-xs font-sans text-accent-primary font-medium">
+                                Preview →
+                              </span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-between p-3 rounded-lg bg-bg-surface-card">
+                        <span className="text-[13px] font-sans text-text-tertiary">
+                          No linked conversations
+                        </span>
                         <button
-                          key={note.id}
-                          onClick={() => void openNotesView(note.id)}
-                          className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-bg-surface-card transition-colors group"
+                          onClick={() =>
+                            console.log("[dashboard] Link a conversation")
+                          }
+                          className="text-xs font-sans text-accent-primary"
                         >
-                          <span className="text-[13px] font-sans text-text-primary">
-                            {note.title}
-                          </span>
-                          <span className="text-[13px] font-sans text-accent-primary">
-                            Open →
-                          </span>
+                          + Link a conversation
                         </button>
-                      ))}
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-
-            {/* Related Conversations */}
-            <div className="mt-12 pt-6 border-t border-border-subtle">
-              <h3 className="text-[11px] font-sans font-medium text-text-tertiary uppercase tracking-wider mb-4">
-                RELATED CONVERSATIONS
-              </h3>
-              <div className="space-y-2">
-                {relatedLoading && (
-                  <div className="text-[13px] font-sans text-text-tertiary">
-                    Finding related conversations...
-                  </div>
-                )}
-                {!relatedLoading && relatedConversations.length === 0 && (
-                  <div className="text-[13px] font-sans text-text-tertiary">
-                    {relatedError ? "Unable to load related conversations." : "No related conversations yet."}
-                  </div>
-                )}
-                {!relatedLoading &&
-                  relatedConversations.map((related) => (
-                    <button
-                      key={related.id}
-                      onClick={() => switchToConversation(related.id)}
-                      className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-bg-surface-card transition-colors"
-                    >
-                      <div className="flex items-center gap-3 flex-1 min-w-0">
-                        <span className="text-[13px] font-sans text-text-primary truncate">
-                          {related.title}
-                        </span>
                       </div>
-                      <span className="text-xs font-sans text-accent-primary font-medium">
-                        {related.similarity}%
-                      </span>
-                    </button>
-                  ))}
+                    )}
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
           </div>
-        </div>
-      )}
-
-      {isSplitActive && selectedConversation ? (
-        <div className="min-h-0 min-w-0 bg-bg-primary">
-          <SplitNoteEditorPanel
-            selectedConversation={selectedConversation}
-            selectedNote={selectedNote}
-            noteTitle={noteTitle}
-            noteContent={noteContent}
-            linkedConversations={selectedNote
-              ? selectedNote.linked_conversation_ids
-                  .map((convId) => conversations.find((conversation) => conversation.id === convId))
-                  .filter((conversation): conversation is Conversation => Boolean(conversation))
-              : []}
-            onTitleChange={setNoteTitle}
-            onContentChange={setNoteContent}
-            onAppendExcerpt={appendExcerptToDraft}
-            onCreateConversationNote={handleCreateConversationNote}
-            onDeleteCurrentNote={handleDeleteCurrentSplitNote}
-            onOpenConversation={switchToConversation}
-            formatTimeAgo={formatTimeAgo}
-          />
-        </div>
-      ) : null}
-
-      {!isSplitActive && viewMode === "notes" && selectedNote && (
-        <div className="flex-1 bg-bg-primary overflow-y-auto">
-          <div className="max-w-3xl mx-auto px-8 py-6">
-            <div className="mb-4">
-              {editingTitle ? (
+          {renameNoteTarget && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+              <button
+                type="button"
+                onClick={() => setRenameNoteTarget(null)}
+                className="absolute inset-0 bg-black/25"
+                aria-label="Close rename note dialog"
+              />
+              <div className="relative w-full max-w-md rounded-xl border border-border-subtle bg-bg-primary shadow-[0_16px_48px_rgba(0,0,0,0.18)] p-4">
+                <h3 className="text-[16px] font-sans font-medium text-text-primary">
+                  Rename Note
+                </h3>
+                <p className="mt-1 text-[13px] font-sans text-text-tertiary">
+                  Update the title for this note.
+                </p>
                 <input
-                  ref={titleInputRef}
+                  ref={renameNoteInputRef}
                   type="text"
-                  value={noteTitle}
-                  onChange={(e) => setNoteTitle(e.target.value)}
-                  onBlur={() => setEditingTitle(false)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") setEditingTitle(false);
-                    if (e.key === "Escape") {
-                      setNoteTitle(selectedNote.title);
-                      setEditingTitle(false);
+                  value={renameNoteTitle}
+                  onChange={(event) => setRenameNoteTitle(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      void submitNoteRename();
+                    }
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      setRenameNoteTarget(null);
                     }
                   }}
-                  className="w-full text-2xl font-serif font-normal text-text-primary bg-transparent border-b border-accent-primary outline-none"
+                  placeholder="Note title"
+                  className="mt-3 w-full rounded-md border border-border-subtle bg-bg-surface-card px-3 py-2 text-[13px] font-sans text-text-primary placeholder:text-text-tertiary outline-none focus:border-accent-primary"
                 />
-              ) : (
-                <h1
-                  onClick={() => setEditingTitle(true)}
-                  className="text-2xl font-serif font-normal text-text-primary cursor-text hover:opacity-70 transition-opacity"
-                >
-                  {noteTitle || selectedNote.title}
-                </h1>
-              )}
-            </div>
-
-            <div className="flex items-center text-[13px] font-sans text-text-secondary mb-6 pb-6 border-b border-border-subtle">
-              <span className="ml-auto">
-                {noteSaveStatus === "saving"
-                  ? "Saving..."
-                  : noteSaveStatus === "unsaved"
-                    ? "Unsaved changes"
-                    : `Updated ${formatTimeAgo(selectedNote.updated_at)}`}
-              </span>
-            </div>
-
-            {isEditingNoteBody ? (
-              <textarea
-                ref={textareaRef}
-                value={noteContent}
-                onChange={(e) => setNoteContent(e.target.value)}
-                onBlur={() => setIsEditingNoteBody(false)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" && event.metaKey) {
-                    event.preventDefault();
-                    setIsEditingNoteBody(false);
-                  }
-                }}
-                placeholder="Start writing..."
-                className="w-full bg-transparent border-none outline-none resize-none text-[13px] leading-[1.7] text-text-primary placeholder:text-text-tertiary mb-12"
-                style={{
-                  fontFamily: "\"JetBrains Mono\", \"SF Mono\", Menlo, monospace",
-                  minHeight: "240px",
-                }}
-              />
-            ) : (
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={() => setIsEditingNoteBody(true)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    setIsEditingNoteBody(true);
-                  }
-                }}
-                className="mb-12 cursor-text"
-                style={{ minHeight: "240px" }}
-              >
-                {renderedNoteContent ? (
-                  <div
-                    className="prose prose-slate max-w-none text-text-primary"
-                    dangerouslySetInnerHTML={{ __html: renderedNoteContent }}
-                  />
-                ) : (
-                  <div className="text-[13px] font-sans text-text-tertiary">
-                    Start writing...
-                  </div>
-                )}
-              </div>
-            )}
-
-            <div className="mt-8">
-              <h3 className="text-[11px] font-sans font-medium text-text-tertiary uppercase tracking-wider mb-3">
-                Linked Conversations
-              </h3>
-              {selectedNote.linked_conversation_ids.length > 0 ? (
-                <div className="space-y-2">
-                  {selectedNote.linked_conversation_ids.map((convId) => {
-                    const conversation = conversations.find((c) => c.id === convId);
-                    if (!conversation) return null;
-                    return (
-                      <button
-                        key={convId}
-                        onClick={() => switchToConversation(conversation.id)}
-                        className="w-full flex items-center justify-between p-3 rounded-lg bg-bg-surface-card hover:bg-bg-surface-card-hover transition-colors"
-                      >
-                        <div className="flex items-center gap-3 flex-1 min-w-0">
-                          <span className="text-[13px] font-sans text-text-primary truncate">
-                            {conversation.title}
-                          </span>
-                        </div>
-                        <span className="text-xs font-sans text-accent-primary font-medium">
-                          Preview →
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : (
-                <div className="flex items-center justify-between p-3 rounded-lg bg-bg-surface-card">
-                  <span className="text-[13px] font-sans text-text-tertiary">No linked conversations</span>
+                <div className="mt-4 flex justify-end gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setRenameNoteTarget(null)}
+                    className="px-3 py-1.5 rounded-md text-[13px] font-sans text-text-secondary hover:text-text-primary hover:bg-bg-surface-card transition-colors"
+                  >
+                    Cancel
+                  </button>
                   <button
-                    onClick={() => console.log("[dashboard] Link a conversation")}
-                    className="text-xs font-sans text-accent-primary"
+                    type="button"
+                    onClick={() => {
+                      void submitNoteRename();
+                    }}
+                    disabled={!canSaveRenamedNote}
+                    className="px-3 py-1.5 rounded-md text-[13px] font-sans bg-accent-primary text-white hover:bg-accent-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    + Link a conversation
+                    Save
                   </button>
                 </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      </div>
-      {renameNoteTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <button
-            type="button"
-            onClick={() => setRenameNoteTarget(null)}
-            className="absolute inset-0 bg-black/25"
-            aria-label="Close rename note dialog"
-          />
-          <div className="relative w-full max-w-md rounded-xl border border-border-subtle bg-bg-primary shadow-[0_16px_48px_rgba(0,0,0,0.18)] p-4">
-            <h3 className="text-[16px] font-sans font-medium text-text-primary">Rename Note</h3>
-            <p className="mt-1 text-[13px] font-sans text-text-tertiary">
-              Update the title for this note.
-            </p>
-            <input
-              ref={renameNoteInputRef}
-              type="text"
-              value={renameNoteTitle}
-              onChange={(event) => setRenameNoteTitle(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  void submitNoteRename();
-                }
-                if (event.key === "Escape") {
-                  event.preventDefault();
-                  setRenameNoteTarget(null);
-                }
-              }}
-              placeholder="Note title"
-              className="mt-3 w-full rounded-md border border-border-subtle bg-bg-surface-card px-3 py-2 text-[13px] font-sans text-text-primary placeholder:text-text-tertiary outline-none focus:border-accent-primary"
-            />
-            <div className="mt-4 flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setRenameNoteTarget(null)}
-                className="px-3 py-1.5 rounded-md text-[13px] font-sans text-text-secondary hover:text-text-primary hover:bg-bg-surface-card transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  void submitNoteRename();
-                }}
-                disabled={!canSaveRenamedNote}
-                className="px-3 py-1.5 rounded-md text-[13px] font-sans bg-accent-primary text-white hover:bg-accent-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Save
-              </button>
+              </div>
             </div>
-          </div>
+          )}
         </div>
-      )}
-      </div>
       </LibrarySplitContext.Provider>
     </div>
   );