feat: link dialog finds bullets of all notes; richer sample data with help notes, deep nesting and linked to-dos

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/CommandPalette.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lucide-react';
 import { SearchHit } from '../lib/types';
 import { api } from '../lib/api';
+import { SnippetRenderer } from './SnippetRenderer';
 
 interface CommandPaletteProps {
   isOpen: boolean;
@@ -19,32 +20,6 @@ interface CommandPaletteProps {
   onOpenList: (listId: string) => void;
 }
 
-// Safely render snippet containing <mark>...</mark> without dangerouslySetInnerHTML
-const SnippetRenderer: React.FC<{ snippet: string }> = ({ snippet }) => {
-  const parts = useMemo(() => {
-    if (!snippet) return [];
-    return snippet.split(/(<mark>[\s\S]*?<\/mark>)/g);
-  }, [snippet]);
-
-  return (
-    <span className="text-muted text-xs line-clamp-2 leading-relaxed">
-      {parts.map((part, i) => {
-        if (part.startsWith('<mark>') && part.endsWith('</mark>')) {
-          const text = part.slice(6, -7);
-          return (
-            <mark
-              key={i}
-              className="bg-accent-dim text-accent font-semibold px-0.5 rounded"
-            >
-              {text}
-            </mark>
-          );
-        }
-        return <span key={i}>{part}</span>;
-      })}
-    </span>
-  );
-};
 
 export const CommandPalette: React.FC<CommandPaletteProps> = ({
   isOpen,

frontend/src/components/SnippetRenderer.tsx

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+
+// Safely render snippet containing <mark>...</mark> without dangerouslySetInnerHTML
+export const SnippetRenderer: React.FC<{ snippet: string }> = ({ snippet }) => {
+  const parts = useMemo(() => {
+    if (!snippet) return [];
+    return snippet.split(/(<mark>[\s\S]*?<\/mark>)/g);
+  }, [snippet]);
+
+  return (
+    <span className="text-muted text-xs line-clamp-2 leading-relaxed">
+      {parts.map((part, i) => {
+        if (part.startsWith('<mark>') && part.endsWith('</mark>')) {
+          const text = part.slice(6, -7);
+          return (
+            <mark
+              key={i}
+              className="bg-accent-dim text-accent font-semibold px-0.5 rounded"
+            >
+              {text}
+            </mark>
+          );
+        }
+        return <span key={i}>{part}</span>;
+      })}
+    </span>
+  );
+};