cli-jaw 2.0.1 → 2.0.2

package/public/manager/src/notes/NotesFileTree.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, type CSSProperties, type DragEvent, type KeyboardEvent, type MouseEvent } from 'react';
+import { useCallback, useEffect, useMemo, useState, type CSSProperties, type DragEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import type { NotesTreeEntry } from './notes-types';
 
 type NotesTrashItem = { path: string; kind: NotesTreeEntry['kind'] };
@@ -122,6 +122,12 @@ function buildTrashItems(
     return items;
 }
 
+function isEditableShortcutTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false;
+    const tag = target.tagName.toLowerCase();
+    return target.isContentEditable || tag === 'input' || tag === 'textarea' || tag === 'select';
+}
+
 function rangeSelect(flatPaths: string[], anchor: string, target: string): Set<string> {
     const anchorIndex = flatPaths.indexOf(anchor);
     const targetIndex = flatPaths.indexOf(target);
@@ -324,6 +330,7 @@ export function NotesFileTree(props: NotesFileTreeProps) {
     const [dropTargetPath, setDropTargetPath] = useState<string | null>(null);
     const [multiSelected, setMultiSelected] = useState<Set<string>>(() => new Set());
     const [anchorPath, setAnchorPath] = useState<string | null>(null);
+    const [activeTreePath, setActiveTreePath] = useState<string | null>(null);
 
     function toggleFolder(path: string): void {
         setExpandedFolders(current => {
@@ -335,11 +342,11 @@ export function NotesFileTree(props: NotesFileTreeProps) {
     }
 
     const flatPaths = flattenEntries(props.entries, expandedFolders);
-    const pathKindLookup = (() => {
+    const pathKindLookup = useMemo(() => {
         const map = new Map<string, NotesTreeEntry['kind']>();
         collectPathKinds(props.entries, map);
         return map;
-    })();
+    }, [props.entries]);
 
     function trashSelected(): void {
         if (multiSelected.size === 0) return;
@@ -349,6 +356,7 @@ export function NotesFileTree(props: NotesFileTreeProps) {
     }
 
     const onEntryClick = useCallback((path: string, event: MouseEvent) => {
+        setActiveTreePath(path);
         if (event.shiftKey && anchorPath) {
             const range = rangeSelect(flatPaths, anchorPath, path);
             setMultiSelected(range);
@@ -374,6 +382,9 @@ export function NotesFileTree(props: NotesFileTreeProps) {
     }, [props.selectedPath]);
 
     useEffect(() => {
+        if (activeTreePath && !pathKindLookup.has(activeTreePath)) {
+            setActiveTreePath(null);
+        }
         if (multiSelected.size === 0) return;
         setMultiSelected(prev => {
             let changed = false;
@@ -384,17 +395,20 @@ export function NotesFileTree(props: NotesFileTreeProps) {
             }
             return changed ? next : prev;
         });
-    }, [props.entries]);
+    }, [activeTreePath, multiSelected.size, pathKindLookup]);
 
     useEffect(() => {
         function handleCopyPath(event: globalThis.KeyboardEvent): void {
             if (!(event.metaKey || event.ctrlKey) || !event.shiftKey || event.key.toLowerCase() !== 'c') return;
+            if (isEditableShortcutTarget(event.target)) return;
             const root = props.notesRoot;
             if (!root) return;
 
             const paths = multiSelected.size > 0
                 ? Array.from(multiSelected)
-                : props.selectedPath ? [props.selectedPath] : [];
+                : activeTreePath && pathKindLookup.has(activeTreePath)
+                    ? [activeTreePath]
+                    : props.selectedPath ? [props.selectedPath] : [];
             if (paths.length === 0) return;
 
             event.preventDefault();
@@ -404,7 +418,32 @@ export function NotesFileTree(props: NotesFileTreeProps) {
 
         window.addEventListener('keydown', handleCopyPath);
         return () => window.removeEventListener('keydown', handleCopyPath);
-    }, [multiSelected, props.selectedPath, props.notesRoot]);
+    }, [activeTreePath, multiSelected, pathKindLookup, props.selectedPath, props.notesRoot]);
+
+    useEffect(() => {
+        function handleCommandTrash(event: globalThis.KeyboardEvent): void {
+            if (event.defaultPrevented) return;
+            if (!(event.metaKey || event.ctrlKey)) return;
+            if (event.key !== 'Delete' && event.key !== 'Backspace') return;
+            if (isEditableShortcutTarget(event.target)) return;
+
+            const items = multiSelected.size > 0
+                ? buildTrashItems(multiSelected, pathKindLookup)
+                : props.selectedFolderPath && pathKindLookup.get(props.selectedFolderPath) === 'folder'
+                    ? [{ path: props.selectedFolderPath, kind: 'folder' as const }]
+                    : props.selectedPath && pathKindLookup.get(props.selectedPath) === 'file'
+                        ? [{ path: props.selectedPath, kind: 'file' as const }]
+                        : [];
+            if (items.length === 0) return;
+
+            event.preventDefault();
+            if (items.length > 1) props.onTrashPaths(items);
+            else props.onTrashPath(items[0].path, items[0].kind);
+        }
+
+        window.addEventListener('keydown', handleCommandTrash);
+        return () => window.removeEventListener('keydown', handleCommandTrash);
+    }, [multiSelected, pathKindLookup, props]);
 
     return (
         <aside

package/public/manager/src/notes/NotesSidebar.tsx

@@ -1,32 +1,21 @@
 import { useEffect, useState } from 'react';
-import { createNoteFile, createNoteFolder, fetchNotesInfo, fetchNotesTree, renameNotePath, trashNotePath } from './notes-api';
+import { createNoteFile, createNoteFolder, renameNotePath, trashNotePath } from './notes-api';
 import { NotesFileTree } from './NotesFileTree';
+import { publishInvalidation } from '../sync/invalidation-bus';
 import type { NotesTreeEntry } from './notes-types';
 
 type NotesSidebarProps = {
+    tree: NotesTreeEntry[];
+    loading: boolean;
+    error: string | null;
+    notesRoot: string | null;
     selectedPath: string | null;
     dirtyPath: string | null;
     treeWidth: number;
     onSelectedPathChange: (path: string | null) => void;
+    onRefreshTree: (selectPath?: string | null) => Promise<void>;
 };
 
-function firstFile(entries: NotesTreeEntry[]): string | null {
-    for (const entry of entries) {
-        if (entry.kind === 'file') return entry.path;
-        const child = firstFile(entry.children || []);
-        if (child) return child;
-    }
-    return null;
-}
-
-function hasFile(entries: NotesTreeEntry[], path: string): boolean {
-    for (const entry of entries) {
-        if (entry.kind === 'file' && entry.path === path) return true;
-        if (hasFile(entry.children || [], path)) return true;
-    }
-    return false;
-}
-
 function movePathToFolder(path: string, folderPath: string | null): string {
     const parts = path.split('/').filter(Boolean);
     const name = parts[parts.length - 1];
@@ -87,35 +76,9 @@ function batchTrashConfirmMessage(items: { path: string; kind: NotesTreeEntry['k
 }
 
 export function NotesSidebar(props: NotesSidebarProps) {
-    const [tree, setTree] = useState<NotesTreeEntry[]>([]);
-    const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [status, setStatus] = useState<string | null>(null);
     const [selectedFolderPath, setSelectedFolderPath] = useState<string | null>(null);
-    const [notesRoot, setNotesRoot] = useState<string | null>(null);
-
-    useEffect(() => {
-        void fetchNotesInfo().then(info => setNotesRoot(info.root)).catch(() => {});
-    }, []);
-
-    async function refreshTree(selectPath = props.selectedPath): Promise<void> {
-        setLoading(true);
-        setError(null);
-        try {
-            const next = await fetchNotesTree();
-            setTree(next);
-            const nextSelected = selectPath && hasFile(next, selectPath) ? selectPath : firstFile(next);
-            if (nextSelected !== props.selectedPath) props.onSelectedPathChange(nextSelected);
-        } catch (err) {
-            setError((err as Error).message);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    useEffect(() => {
-        void refreshTree();
-    }, []);
 
     async function createNote(): Promise<void> {
         const fallback = selectedFolderPath ? `${selectedFolderPath}/untitled.md` : 'untitled.md';
@@ -125,7 +88,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
             setStatus(null);
             const created = await createNoteFile(name.endsWith('.md') ? name : `${name}.md`, '');
             props.onSelectedPathChange(created.path);
-            await refreshTree(created.path);
+            await props.onRefreshTree(created.path);
+            publishInvalidation({ topics: ['notes'], reason: 'note:created', source: 'ui', sourceId: 'notes-sidebar' });
         } catch (err) {
             setError((err as Error).message);
         }
@@ -150,7 +114,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
             setStatus(null);
             const created = await createNoteFolder(name);
             setSelectedFolderPath(created.path);
-            await refreshTree();
+            await props.onRefreshTree();
+            publishInvalidation({ topics: ['notes'], reason: 'folder:created', source: 'ui', sourceId: 'notes-sidebar' });
         } catch (err) {
             setError((err as Error).message);
         }
@@ -163,7 +128,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
             setStatus(null);
             const moved = await renameNotePath(from, to);
             if (props.selectedPath === from) props.onSelectedPathChange(moved.to);
-            await refreshTree(moved.to);
+            await props.onRefreshTree(moved.to);
+            publishInvalidation({ topics: ['notes'], reason: 'note:moved', source: 'ui', sourceId: 'notes-sidebar' });
         } catch (err) {
             setError((err as Error).message);
         }
@@ -182,7 +148,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
             const nextSelectedFolderPath = rebasePath(selectedFolderPath, renamed.from, renamed.to);
             if (nextSelectedFolderPath !== selectedFolderPath) setSelectedFolderPath(nextSelectedFolderPath);
             if (nextSelectedPath !== props.selectedPath) props.onSelectedPathChange(nextSelectedPath);
-            await refreshTree(nextSelectedPath);
+            await props.onRefreshTree(nextSelectedPath);
+            publishInvalidation({ topics: ['notes'], reason: 'note:renamed', source: 'ui', sourceId: 'notes-sidebar' });
         } catch (err) {
             setError((err as Error).message);
         }
@@ -232,7 +199,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
             setStatus(`Moved ${succeeded} item${succeeded === 1 ? '' : 's'} to trash.`);
         }
 
-        await refreshTree(selectedCleared ? null : props.selectedPath);
+        await props.onRefreshTree(selectedCleared ? null : props.selectedPath);
+        publishInvalidation({ topics: ['notes'], reason: 'notes:batch-trashed', source: 'ui', sourceId: 'notes-sidebar' });
     }
 
     async function trashPath(path: string, kind: NotesTreeEntry['kind']): Promise<void> {
@@ -256,7 +224,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
                 ? ` Restore from: ${result.restoreHint}`
                 : '';
             setStatus(`Moved ${result.path} to ${destination}.${restoreHint}`);
-            await refreshTree(selectedWasInside ? null : props.selectedPath);
+            await props.onRefreshTree(selectedWasInside ? null : props.selectedPath);
+            publishInvalidation({ topics: ['notes'], reason: 'note:trashed', source: 'ui', sourceId: 'notes-sidebar' });
         } catch (err) {
             setError((err as Error).message);
         }
@@ -264,16 +233,16 @@ export function NotesSidebar(props: NotesSidebarProps) {
 
     return (
         <>
-            {error && <section className="state error-state">{error}</section>}
+            {(props.error || error) && <section className="state error-state">{props.error || error}</section>}
             {status && <section className="state notes-status-state">{status}</section>}
             <NotesFileTree
-                entries={tree}
+                entries={props.tree}
                 selectedPath={props.selectedPath}
                 selectedFolderPath={selectedFolderPath}
                 dirtyPath={props.dirtyPath}
-                loading={loading}
+                loading={props.loading}
                 width={props.treeWidth}
-                notesRoot={notesRoot}
+                notesRoot={props.notesRoot}
                 onSelectPath={props.onSelectedPathChange}
                 onSelectFolder={setSelectedFolderPath}
                 onMovePath={(from, toFolder) => void moveNote(from, toFolder)}
@@ -282,7 +251,7 @@ export function NotesSidebar(props: NotesSidebarProps) {
                 onTrashPaths={items => void trashPaths(items)}
                 onCreateNote={() => void createNote()}
                 onCreateFolder={() => void createFolder()}
-                onRefresh={() => void refreshTree()}
+                onRefresh={() => void props.onRefreshTree()}
             />
         </>
     );

package/public/manager/src/notes/NotesWorkspace.tsx

@@ -1,16 +1,19 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { MarkdownEditor } from './MarkdownEditor';
 import { MarkdownPreview } from './MarkdownPreview';
 import { NotesEmptyState } from './NotesEmptyState';
 import { NotesToolbar } from './NotesToolbar';
+import { renameNotePath } from './notes-api';
 import { useNoteDocument } from './useNoteDocument';
-import type { NotesAuthoringMode, NotesViewMode } from './notes-types';
+import { publishInvalidation } from '../sync/invalidation-bus';
+import type { NotesAuthoringMode, NotesVaultIndexSnapshot, NotesViewMode } from './notes-types';
 
 type NotesPrimaryMode = 'raw' | 'preview' | 'wysiwyg';
 
 type NotesWorkspaceProps = {
     active: boolean;
     selectedPath: string | null;
+    vaultIndex: NotesVaultIndexSnapshot | null;
     viewMode: NotesViewMode;
     authoringMode: NotesAuthoringMode;
     wordWrap: boolean;
@@ -24,6 +27,12 @@ type NotesWorkspaceProps = {
 };
 
 const PRIMARY_MODE_CYCLE: NotesPrimaryMode[] = ['raw', 'preview', 'wysiwyg'];
+const INVALID_TITLE_CHARS = /[/\\]/g;
+
+function titleFromPath(path: string): string {
+    const name = path.split('/').pop() ?? path;
+    return name.endsWith('.md') ? name.slice(0, -3) : name;
+}
 
 function primaryModeFor(viewMode: NotesViewMode, authoringMode: NotesAuthoringMode): NotesPrimaryMode {
     if (viewMode === 'preview') return 'preview';
@@ -33,6 +42,7 @@ function primaryModeFor(viewMode: NotesViewMode, authoringMode: NotesAuthoringMo
 
 export function NotesWorkspace(props: NotesWorkspaceProps) {
     const document = useNoteDocument();
+    const renamingRef = useRef(false);
 
     useEffect(() => {
         if (!props.selectedPath) return;
@@ -74,6 +84,34 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
         return () => window.removeEventListener('keydown', handleModeShortcut);
     }, [props.active, props.viewMode, props.authoringMode, props.onViewModeChange, props.onAuthoringModeChange]);
 
+    async function handleTitleBlur(event: React.FocusEvent<HTMLInputElement>): Promise<void> {
+        if (renamingRef.current || !props.selectedPath) return;
+        const newTitle = event.currentTarget.value.trim().replace(INVALID_TITLE_CHARS, '');
+        const currentTitle = titleFromPath(props.selectedPath);
+        if (!newTitle || newTitle === currentTitle) {
+            event.currentTarget.value = currentTitle;
+            return;
+        }
+        const parts = props.selectedPath.split('/');
+        parts[parts.length - 1] = newTitle.endsWith('.md') ? newTitle : `${newTitle}.md`;
+        const newPath = parts.join('/');
+        if (newPath === props.selectedPath) {
+            event.currentTarget.value = currentTitle;
+            return;
+        }
+        renamingRef.current = true;
+        try {
+            await renameNotePath(props.selectedPath, newPath);
+            props.onSelectedPathChange(newPath);
+            publishInvalidation({ topics: ['notes'], reason: 'note:title-renamed', source: 'ui' });
+        } catch (error) {
+            console.warn('[notes-rename]', error);
+            event.currentTarget.value = currentTitle;
+        } finally {
+            renamingRef.current = false;
+        }
+    }
+
     const showEditor = props.viewMode === 'raw' || props.viewMode === 'split';
     const showPreview = props.viewMode === 'preview' || props.viewMode === 'split';
 
@@ -128,8 +166,17 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
                     {!props.selectedPath && props.viewMode !== 'settings' && <NotesEmptyState />}
                     {props.selectedPath && props.viewMode !== 'settings' && (
                         <div className="notes-document-grid">
+                            <input
+                                className="notes-inline-title"
+                                key={props.selectedPath}
+                                defaultValue={titleFromPath(props.selectedPath)}
+                                onBlur={handleTitleBlur}
+                                onKeyDown={event => { if (event.key === 'Enter') event.currentTarget.blur(); }}
+                                spellCheck={false}
+                                aria-label="Note title"
+                            />
                             {showEditor && <div className="notes-editor-pane">
-                                <MarkdownEditor key={props.selectedPath} active={props.active && showEditor} authoringMode={props.authoringMode} content={document.content} wordWrap={props.wordWrap} onChange={document.setContent} />
+                                <MarkdownEditor key={props.selectedPath} active={props.active && showEditor} authoringMode={props.authoringMode} content={document.content} notePath={props.selectedPath} wordWrap={props.wordWrap} onChange={document.setContent} />
                             </div>}
                             {showPreview && <MarkdownPreview markdown={document.content} />}
                         </div>

package/public/manager/src/notes/image-assets/clipboard-images.ts

@@ -0,0 +1,100 @@
+const ALLOWED_IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif']);
+
+const EXTENSION_BY_MIME: Record<string, string> = {
+    'image/png': 'png',
+    'image/jpeg': 'jpg',
+    'image/webp': 'webp',
+    'image/gif': 'gif',
+};
+
+const DATA_IMAGE_RE = /<img\b[^>]*\bsrc=["'](data:(image\/(?:png|jpeg|webp|gif));base64,([^"']+))["'][^>]*>/i;
+const HTML_IMAGE_SRC_RE = /<img\b[^>]*\bsrc=["']([^"']+)["'][^>]*>/i;
+
+function isAllowedImage(file: File | null): file is File {
+    return Boolean(file && ALLOWED_IMAGE_TYPES.has(file.type));
+}
+
+function fileFromDataUrl(mime: string, base64: string): File | null {
+    if (!ALLOWED_IMAGE_TYPES.has(mime)) return null;
+    try {
+        const binary = atob(base64.replace(/\s+/g, ''));
+        const bytes = new Uint8Array(binary.length);
+        for (let index = 0; index < binary.length; index += 1) {
+            bytes[index] = binary.charCodeAt(index);
+        }
+        const extension = EXTENSION_BY_MIME[mime] ?? 'png';
+        return new File([bytes], `pasted-image.${extension}`, { type: mime });
+    } catch {
+        console.warn('[notes-image-paste] Failed to decode clipboard image data URL');
+        return null;
+    }
+}
+
+function namedClipboardFile(file: File): File {
+    if (file.name) return file;
+    const extension = EXTENSION_BY_MIME[file.type] ?? 'png';
+    return new File([file], `pasted-image.${extension}`, {
+        type: file.type,
+        lastModified: file.lastModified,
+    });
+}
+
+export function firstClipboardImage(data: DataTransfer | null): File | null {
+    if (!data) return null;
+    for (const item of Array.from(data.items ?? [])) {
+        if (item.kind !== 'file' || !ALLOWED_IMAGE_TYPES.has(item.type)) continue;
+        const file = item.getAsFile();
+        if (isAllowedImage(file)) return namedClipboardFile(file);
+    }
+    for (const file of Array.from(data.files ?? [])) {
+        if (isAllowedImage(file)) return namedClipboardFile(file);
+    }
+    const html = data.getData?.('text/html') ?? '';
+    const match = DATA_IMAGE_RE.exec(html);
+    if (match) {
+        const [, , mime, base64] = match;
+        return fileFromDataUrl(mime, base64);
+    }
+    return null;
+}
+
+const REMOTE_IMAGE_EXT_RE = /\.(?:png|jpe?g|gif|webp)$/i;
+
+function cleanRemoteImageUrl(input: string): string | null {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    try {
+        const url = new URL(trimmed);
+        if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+        url.hash = '';
+        return url.toString();
+    } catch {
+        return null;
+    }
+}
+
+function looksLikeImageUrl(url: string): boolean {
+    try { return REMOTE_IMAGE_EXT_RE.test(new URL(url).pathname); } catch { return false; }
+}
+
+export function firstRemoteClipboardImageUrl(data: DataTransfer | null): string | null {
+    if (!data) return null;
+    const html = data.getData?.('text/html') ?? '';
+    const htmlMatch = HTML_IMAGE_SRC_RE.exec(html);
+    if (htmlMatch) {
+        const url = cleanRemoteImageUrl(htmlMatch[1]);
+        if (url && looksLikeImageUrl(url)) return url;
+    }
+    const uriList = data.getData?.('text/uri-list') ?? '';
+    for (const line of uriList.split(/\r?\n/)) {
+        if (!line || line.startsWith('#')) continue;
+        const url = cleanRemoteImageUrl(line);
+        if (url && looksLikeImageUrl(url)) return url;
+    }
+    const plain = cleanRemoteImageUrl(data.getData?.('text/plain') ?? '');
+    return plain && looksLikeImageUrl(plain) ? plain : null;
+}
+
+export function hasImportableClipboardImage(data: DataTransfer | null): boolean {
+    return Boolean(firstClipboardImage(data) || firstRemoteClipboardImageUrl(data));
+}

package/public/manager/src/notes/image-assets/insert-image-markdown.ts

@@ -0,0 +1,85 @@
+import type { EditorView } from '@codemirror/view';
+import { uploadNoteAsset, uploadRemoteNoteAsset } from '../../api';
+import { firstClipboardImage, firstRemoteClipboardImageUrl, hasImportableClipboardImage } from './clipboard-images';
+
+export type NotesImagePasteOptions = {
+    notePath: string;
+    onError?: (error: Error) => void;
+};
+
+function errorFromUnknown(error: unknown): Error {
+    return error instanceof Error ? error : new Error(String(error));
+}
+
+const NOTE_IMAGE_MAX_BYTES = 5 * 1024 * 1024;
+
+async function compressImageFile(file: File, maxBytes: number): Promise<File> {
+    const bitmap = await createImageBitmap(file);
+    const maxDim = 4096;
+    let { width, height } = bitmap;
+    if (width > maxDim || height > maxDim) {
+        const scale = maxDim / Math.max(width, height);
+        width = Math.round(width * scale);
+        height = Math.round(height * scale);
+    }
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Canvas 2D context unavailable');
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    bitmap.close();
+    const name = file.name.replace(/\.\w+$/, '') + '.jpg';
+    for (const quality of [0.85, 0.7, 0.5, 0.3]) {
+        const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality });
+        if (blob.size <= maxBytes) {
+            return new File([blob], name, { type: 'image/jpeg', lastModified: file.lastModified });
+        }
+    }
+    const half = new OffscreenCanvas(Math.round(width / 2), Math.round(height / 2));
+    const halfCtx = half.getContext('2d');
+    if (!halfCtx) throw new Error('Canvas 2D context unavailable');
+    halfCtx.drawImage(canvas, 0, 0, half.width, half.height);
+    const blob = await half.convertToBlob({ type: 'image/jpeg', quality: 0.7 });
+    if (blob.size > maxBytes) throw new Error('Image too large even after compression');
+    return new File([blob], name, { type: 'image/jpeg', lastModified: file.lastModified });
+}
+
+export async function uploadClipboardImageMarkdown(notePath: string, data: DataTransfer | null): Promise<string | null> {
+    let image = firstClipboardImage(data);
+    const remoteUrl = image ? null : firstRemoteClipboardImageUrl(data);
+    if (!image && !remoteUrl) return null;
+    if (image && image.size > NOTE_IMAGE_MAX_BYTES) {
+        image = await compressImageFile(image, NOTE_IMAGE_MAX_BYTES);
+    }
+    const result = image
+        ? await uploadNoteAsset(notePath, image)
+        : await uploadRemoteNoteAsset(notePath, remoteUrl!);
+    return result.markdown;
+}
+
+export function handleImageDataTransfer(
+    event: ClipboardEvent | DragEvent,
+    view: EditorView,
+    options: NotesImagePasteOptions,
+): boolean {
+    const data = 'clipboardData' in event ? event.clipboardData : event.dataTransfer;
+    if (!hasImportableClipboardImage(data)) return false;
+    const textFallback = data?.getData('text/plain') ?? '';
+    event.preventDefault();
+    void uploadClipboardImageMarkdown(options.notePath, data)
+        .then(result => {
+            if (result) view.dispatch(view.state.replaceSelection(result));
+        })
+        .catch(error => {
+            if (textFallback) view.dispatch(view.state.replaceSelection(textFallback));
+            options.onError?.(errorFromUnknown(error));
+        });
+    return true;
+}
+
+export function handleClipboardImagePaste(
+    event: ClipboardEvent,
+    view: EditorView,
+    options: NotesImagePasteOptions,
+): boolean {
+    return handleImageDataTransfer(event, view, options);
+}

package/public/manager/src/notes/notes-api.ts

@@ -1,5 +1,7 @@
 export {
     fetchNotesInfo,
+    fetchNotesIndex,
+    fetchNotesCapabilities,
     fetchNotesTree,
     fetchNoteFile,
     createNoteFile,

package/public/manager/src/notes/notes-types.ts

@@ -1,4 +1,9 @@
-import type { DashboardNoteFileResponse, DashboardNoteTreeEntry } from '../types';
+import type {
+    DashboardNoteFileResponse,
+    DashboardNotesCapabilities,
+    DashboardNoteTreeEntry,
+    VaultIndexSnapshot,
+} from '../types';
 
 export type NotesViewMode = 'raw' | 'split' | 'preview' | 'settings';
 export type NotesAuthoringMode = 'plain' | 'rich' | 'wysiwyg';
@@ -15,3 +20,5 @@ export type NoteConflictState = {
 
 export type NotesTreeEntry = DashboardNoteTreeEntry;
 export type NoteFile = DashboardNoteFileResponse;
+export type NotesVaultIndexSnapshot = VaultIndexSnapshot;
+export type NotesCapabilities = DashboardNotesCapabilities;

package/public/manager/src/notes/rendering/MarkdownRenderer.tsx

@@ -11,6 +11,7 @@ import { MermaidBlock } from './MermaidBlock';
 import {
     isSafeExternalHref,
     markdownSanitizeSchema,
+    notesImageSrc,
     safeMarkdownUrl,
 } from './markdown-render-security';
 
@@ -70,6 +71,11 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
                     if (language === 'mermaid') return <MermaidBlock code={code} />;
                     return <CodeBlock code={code} language={language} />;
                 },
+                img: ({ src, alt, ...imageProps }: ComponentProps<'img'>) => {
+                    const safeSrc = typeof src === 'string' ? notesImageSrc(src) : '';
+                    if (!safeSrc) return null;
+                    return <img {...imageProps} src={safeSrc} alt={alt ?? ''} loading="lazy" />;
+                },
             }}
         >
             {props.markdown}

package/public/manager/src/notes/rendering/markdown-render-security.ts

@@ -17,6 +17,24 @@ export function safeMarkdownUrl(url: string): string {
     return isSafeExternalHref(url) ? url : '';
 }
 
+export function notesImageSrc(src: string): string {
+    const trimmed = src.trim();
+    if (!trimmed || /^(?:javascript|data|file):/i.test(trimmed)) return '';
+    if (/^\/(?:Users|home|var|tmp|private|etc)\//i.test(trimmed)) return '';
+    const assetPath = trimmed.startsWith('./.assets/')
+        ? trimmed.slice(2)
+        : trimmed.startsWith('.assets/')
+            ? trimmed
+            : null;
+    if (assetPath) {
+        if (assetPath.includes('\\') || assetPath.split('/').some(segment => !segment || segment === '.' || segment === '..')) {
+            return '';
+        }
+        return `/api/dashboard/notes/asset?path=${encodeURIComponent(assetPath)}`;
+    }
+    return isSafeExternalHref(trimmed) ? trimmed : '';
+}
+
 // rehype-raw is intentionally absent: Notes render user-authored markdown only,
 // and raw HTML must stay disabled before future WYSIWYG reuse.
 export const markdownSanitizeSchema: RehypeSanitizeSchema = {
@@ -24,7 +42,7 @@ export const markdownSanitizeSchema: RehypeSanitizeSchema = {
     attributes: {
         ...defaultSchema.attributes,
         code: [
-            ...(defaultSchema.attributes?.code ?? []),
+            ...(defaultSchema.attributes?.['code'] ?? []),
             ['className', /^language-./, 'math-inline', 'math-display'],
         ],
     },

package/public/manager/src/notes/rich-markdown/paste-policy.ts

@@ -1,4 +1,5 @@
 import { EditorView } from '@codemirror/view';
+import { handleClipboardImagePaste, handleImageDataTransfer, type NotesImagePasteOptions } from '../image-assets/insert-image-markdown';
 
 function htmlToPlainText(html: string): string {
     const template = document.createElement('template');
@@ -6,9 +7,10 @@ function htmlToPlainText(html: string): string {
     return template.content.textContent || '';
 }
 
-export function richMarkdownPastePolicy() {
+export function richMarkdownPastePolicy(options?: NotesImagePasteOptions) {
     return EditorView.domEventHandlers({
         paste(event, view) {
+            if (options && handleClipboardImagePaste(event, view, options)) return true;
             const text = event.clipboardData?.getData('text/plain');
             if (text) return false;
             const html = event.clipboardData?.getData('text/html');
@@ -17,6 +19,8 @@ export function richMarkdownPastePolicy() {
             view.dispatch(view.state.replaceSelection(htmlToPlainText(html)));
             return true;
         },
+        drop(event, view) {
+            return Boolean(options && handleImageDataTransfer(event, view, options));
+        },
     });
 }
-