feat: add rich metadata display to NLP project autosuggestion (#1215)

Enhance the CodeMirror-based NLP autocomplete to display rich project
metadata (title, aliases, path, custom frontmatter) when users type the
project trigger, bringing feature parity with the manual "Add to
Project" button dropdown.

Changes:
- Use CodeMirror 6's addToOptions API for custom rendering
- Display up to 3 configurable metadata rows based on projectAutosuggest.rows settings
- Add ProjectMetadataResolver integration for consistent metadata resolution
- Add CSS styles for metadata display in autocomplete tooltip

This improves UX consistency by ensuring both project selection methods
(NLP-triggered and manual) display the same rich context to help users
identify the correct project.

Author: renatomen

src/editor/NLPCodeMirrorAutocomplete.ts

@@ -129,6 +129,29 @@ export function createNLPAutocomplete(plugin: TaskNotesPlugin): Extension[] {
 		closeOnBlur: true,
 		// Max options to show
 		maxRenderedOptions: 10,
+		// Custom rendering for project suggestions with metadata
+		addToOptions: [
+			{
+				render: (completion: any, _state: any, _view: any) => {
+					// Only render custom content for project suggestions with metadata
+					if (!completion.projectMetadata) return null;
+
+					const container = document.createElement("div");
+					container.className = "cm-project-suggestion__metadata";
+
+					const metadata = completion.projectMetadata;
+					for (const row of metadata) {
+						const metaRow = document.createElement("div");
+						metaRow.className = "cm-project-suggestion__meta";
+						metaRow.textContent = row;
+						container.appendChild(metaRow);
+					}
+
+					return container;
+				},
+				position: 100, // After label (50) and detail (80)
+			},
+		],
 	});
 
 	// Add explicit keyboard navigation for autocomplete with high priority
@@ -235,6 +258,8 @@ async function getFileSuggestions(
 ): Promise<Completion[]> {
 	try {
 		const { FileSuggestHelper } = await import("../suggest/FileSuggestHelper");
+		const { ProjectMetadataResolver } = await import("../utils/projectMetadataResolver");
+		const { parseDisplayFieldsRow } = await import("../utils/projectAutosuggestDisplayFieldsParser");
 
 		// Get autosuggest config - use projectAutosuggest for projects,
 		// or user field's autosuggestFilter for user fields
@@ -262,6 +287,95 @@ async function getFileSuggestions(
 			return !excluded.some((ex) => file.path.startsWith(ex));
 		});
 
+		// For projects, add rich metadata rendering
+		if (propertyId === "projects") {
+			const resolver = new ProjectMetadataResolver({
+				getFrontmatter: (entry) => entry.frontmatter,
+			});
+			const rowConfigs = (plugin.settings?.projectAutosuggest?.rows ?? []).slice(0, 3);
+
+			return filteredList.map((item) => {
+				const displayText = item.displayText || item.insertText;
+				const insertText = item.insertText;
+
+				// Get file metadata for rendering
+				const file = plugin.app.vault
+					.getMarkdownFiles()
+					.find((f) => f.basename === item.insertText);
+
+				// Build metadata rows
+				const metadataRows: string[] = [];
+				if (file && rowConfigs.length > 0) {
+					const cache = plugin.app.metadataCache.getFileCache(file);
+					const frontmatter: Record<string, any> = cache?.frontmatter || {};
+					const mapped = plugin.fieldMapper.mapFromFrontmatter(
+						frontmatter,
+						file.path,
+						plugin.settings.storeTitleInFilename
+					);
+
+					const title = typeof mapped.title === "string" ? mapped.title : "";
+					const aliases = Array.isArray(frontmatter["aliases"])
+						? (frontmatter["aliases"] as any[]).filter((a: any) => typeof a === "string")
+						: [];
+
+					const fileData = {
+						basename: file.basename,
+						name: file.name,
+						path: file.path,
+						parent: file.parent?.path || "",
+						title,
+						aliases,
+						frontmatter,
+					};
+
+					// Build each configured row
+					for (let i = 0; i < Math.min(rowConfigs.length, 3); i++) {
+						const row = rowConfigs[i];
+						if (!row) continue;
+
+						try {
+							const tokens = parseDisplayFieldsRow(row);
+							const parts: string[] = [];
+
+							for (const token of tokens) {
+								if (token.property.startsWith("literal:")) {
+									const lit = token.property.slice(8);
+									if (lit) parts.push(lit);
+									continue;
+								}
+
+								const value = resolver.resolve(token.property, fileData);
+								if (!value) continue;
+
+								if (token.showName) {
+									parts.push(`${token.displayName ?? token.property}: ${value}`);
+								} else {
+									parts.push(value);
+								}
+							}
+
+							if (parts.length > 0) {
+								metadataRows.push(parts.join(" "));
+							}
+						} catch {
+							// Ignore row parse errors
+						}
+					}
+				}
+
+				return {
+					label: displayText,
+					apply: `[[${insertText}]] `,
+					type: "text",
+					info: "Project",
+					// Add metadata as a custom property for the render function
+					projectMetadata: metadataRows.length > 0 ? metadataRows : undefined,
+				} as any;
+			});
+		}
+
+		// For non-project file suggestions, use simple rendering
 		return filteredList.map((item) => {
 			const displayText = item.displayText || item.insertText;
 			const insertText = item.insertText;

styles/task-modal.css

@@ -870,6 +870,61 @@
     color: var(--text-normal);
 }
 
+/* NLP Project Suggestion Styles - Rich Metadata Display (Legacy textarea-based) */
+.tasknotes-plugin .nlp-suggest-project__filename {
+    font-weight: var(--font-weight-medium);
+    color: var(--text-normal);
+    font-size: var(--font-ui-small);
+    margin-bottom: 2px;
+}
+
+.tasknotes-plugin .nlp-suggest-project__meta {
+    font-size: var(--font-ui-smaller);
+    color: var(--text-muted);
+    margin-top: 2px;
+    line-height: 1.4;
+}
+
+.tasknotes-plugin .nlp-suggest-project__meta-label {
+    color: var(--text-muted);
+    font-weight: 500;
+    margin-right: 4px;
+}
+
+.tasknotes-plugin .nlp-suggest-project__meta-value {
+    color: var(--text-normal);
+}
+
+/* CodeMirror Project Suggestion Styles - Rich Metadata Display */
+.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--size-4-1) 0;
+}
+
+.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__name {
+    font-weight: var(--font-weight-medium);
+    color: var(--text-normal);
+    font-size: var(--font-ui-small);
+}
+
+.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta {
+    font-size: var(--font-ui-smaller);
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+
+.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta-label {
+    color: var(--text-muted);
+    font-weight: 500;
+    margin-right: 4px;
+}
+
+.tasknotes-plugin .cm-tooltip-autocomplete .cm-project-suggestion__meta-value {
+    color: var(--text-normal);
+}
+
 /* =====================================================================
    PROJECT SELECTION UI
    ===================================================================== */