feat: MVP-3 Sprint 2 - Auto tag suggestions, note connections panel

- Add auto tag suggestions to note form with debounced API calls
- Rename related notes to "También podrías necesitar" in detail view
- Create NoteConnections component showing backlinks, outgoing links, and related notes
- Add tests for backlinks module and tags/suggest API endpoint

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

src/app/notes/[id]/page.tsx

@@ -1,7 +1,8 @@
 import { prisma } from '@/lib/prisma'
 import { notFound } from 'next/navigation'
-import { RelatedNotes } from '@/components/related-notes'
 import { getRelatedNotes } from '@/lib/related'
+import { getBacklinksForNote, getOutgoingLinksForNote } from '@/lib/backlinks'
+import { NoteConnections } from '@/components/note-connections'
 import { MarkdownContent } from '@/components/markdown-content'
 import { DeleteNoteButton } from '@/components/delete-note-button'
 import { TrackNoteView } from '@/components/track-note-view'
@@ -33,6 +34,8 @@ export default async function NoteDetailPage({ params }: { params: Promise<{ id:
   }
 
   const related = await getRelatedNotes(id, 5)
+  const backlinks = await getBacklinksForNote(id)
+  const outgoingLinks = await getOutgoingLinksForNote(id)
   const noteType = note.type as NoteType
 
   return (
@@ -92,9 +95,12 @@ export default async function NoteDetailPage({ params }: { params: Promise<{ id:
         />
       </div>
 
-      {related.length > 0 && (
-        <RelatedNotes notes={related} />
-      )}
+      <NoteConnections
+        noteId={note.id}
+        backlinks={backlinks}
+        outgoingLinks={outgoingLinks}
+        relatedNotes={related}
+      />
     </main>
     </>
   )

src/components/note-connections.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import Link from 'next/link'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { ArrowRight, Link2, RefreshCw, ExternalLink } from 'lucide-react'
+
+interface BacklinkInfo {
+  id: string
+  sourceNoteId: string
+  targetNoteId: string
+  sourceNote: {
+    id: string
+    title: string
+    type: string
+  }
+}
+
+interface RelatedNote {
+  id: string
+  title: string
+  type: string
+  tags: string[]
+  score: number
+  reason: string
+}
+
+interface NoteConnectionsProps {
+  noteId: string
+  backlinks: BacklinkInfo[]
+  outgoingLinks: BacklinkInfo[]
+  relatedNotes: RelatedNote[]
+}
+
+function ConnectionGroup({
+  title,
+  icon: Icon,
+  notes,
+  emptyMessage,
+}: {
+  title: string
+  icon: React.ComponentType<{ className?: string }>
+  notes: { id: string; title: string; type: string }[]
+  emptyMessage: string
+}) {
+  if (notes.length === 0) {
+    return (
+      <div className="space-y-2">
+        <h4 className="text-sm font-medium flex items-center gap-2 text-muted-foreground">
+          <Icon className="h-4 w-4" />
+          {title}
+        </h4>
+        <p className="text-xs text-muted-foreground pl-6">{emptyMessage}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-sm font-medium flex items-center gap-2">
+        <Icon className="h-4 w-4" />
+        {title}
+        <Badge variant="secondary" className="ml-auto text-xs">
+          {notes.length}
+        </Badge>
+      </h4>
+      <div className="pl-6 space-y-1">
+        {notes.map((note) => (
+          <Link
+            key={note.id}
+            href={`/notes/${note.id}`}
+            className="block text-sm text-foreground hover:text-primary transition-colors"
+          >
+            {note.title}
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function NoteConnections({
+  noteId,
+  backlinks,
+  outgoingLinks,
+  relatedNotes,
+}: NoteConnectionsProps) {
+  const hasAnyConnections =
+    backlinks.length > 0 || outgoingLinks.length > 0 || relatedNotes.length > 0
+
+  if (!hasAnyConnections) {
+    return null
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Link2 className="h-5 w-5" />
+          Conectado con
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Backlinks - notes that link TO this note */}
+        <ConnectionGroup
+          title="Enlaces entrantes"
+          icon={ExternalLink}
+          notes={backlinks.map((bl) => ({
+            id: bl.sourceNote.id,
+            title: bl.sourceNote.title,
+            type: bl.sourceNote.type,
+          }))}
+          emptyMessage="Ningún otro documento enlaza a esta nota"
+        />
+
+        {/* Outgoing links - notes this note links TO */}
+        <ConnectionGroup
+          title="Enlaces salientes"
+          icon={ArrowRight}
+          notes={outgoingLinks.map((ol) => ({
+            id: ol.sourceNote.id,
+            title: ol.sourceNote.title,
+            type: ol.sourceNote.type,
+          }))}
+          emptyMessage="Esta nota no enlaza a ningún otro documento"
+        />
+
+        {/* Related notes - by content similarity and scoring */}
+        <ConnectionGroup
+          title="Relacionadas"
+          icon={RefreshCw}
+          notes={relatedNotes.map((rn) => ({
+            id: rn.id,
+            title: rn.title,
+            type: rn.type,
+          }))}
+          emptyMessage="No hay notas relacionadas"
+        />
+      </CardContent>
+    </Card>
+  )
+}

src/components/note-form.tsx

@@ -614,6 +614,7 @@ export function NoteForm({ initialData, isEdit = false }: NoteFormProps) {
     return defaultFields[type]
   })
   const [tags, setTags] = useState<string[]>(initialData?.tags.map(t => t.tag.name) || [])
+  const [autoSuggestedTags, setAutoSuggestedTags] = useState<string[]>([])
   const [isFavorite, setIsFavorite] = useState(initialData?.isFavorite || false)
   const [isPinned, setIsPinned] = useState(initialData?.isPinned || false)
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -625,6 +626,33 @@ export function NoteForm({ initialData, isEdit = false }: NoteFormProps) {
 
   const content = useMemo(() => serializeToMarkdown(type, fields), [type, fields])
 
+  // Auto-suggest tags based on title and content
+  useEffect(() => {
+    const fetchSuggestions = async () => {
+      if (title.trim().length < 3 && content.trim().length < 10) {
+        setAutoSuggestedTags([])
+        return
+      }
+
+      try {
+        const res = await fetch(
+          `/api/tags/suggest?title=${encodeURIComponent(title)}&content=${encodeURIComponent(content)}`
+        )
+        if (res.ok) {
+          const data = await res.json()
+          const suggested: string[] = data.data || data || []
+          // Filter out tags already added
+          setAutoSuggestedTags(suggested.filter((t: string) => !tags.includes(t)))
+        }
+      } catch (error) {
+        console.error('Error fetching tag suggestions:', error)
+      }
+    }
+
+    const timeoutId = setTimeout(fetchSuggestions, 500)
+    return () => clearTimeout(timeoutId)
+  }, [title, content, tags])
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsSubmitting(true)
@@ -717,6 +745,30 @@ export function NoteForm({ initialData, isEdit = false }: NoteFormProps) {
         <TagInput value={tags} onChange={setTags} />
       </div>
 
+      {autoSuggestedTags.length > 0 && (
+        <div className="bg-muted/50 rounded-lg p-3">
+          <p className="text-xs text-muted-foreground mb-2">Sugerencias basadas en tu contenido:</p>
+          <div className="flex flex-wrap gap-2">
+            {autoSuggestedTags.map((tag) => (
+              <button
+                key={tag}
+                type="button"
+                onClick={() => {
+                  if (!tags.includes(tag)) {
+                    setTags([...tags, tag])
+                  }
+                  setAutoSuggestedTags(autoSuggestedTags.filter(t => t !== tag))
+                }}
+                className="inline-flex items-center gap-1 px-2 py-1 text-sm bg-background border rounded-full hover:bg-accent hover:text-accent-foreground transition-colors"
+              >
+                <span>{tag}</span>
+                <span className="text-xs opacity-60">+</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
       <div className="flex gap-4">
         <label className="flex items-center gap-2">
           <input

src/components/related-notes.tsx

@@ -19,7 +19,7 @@ export function RelatedNotes({ notes }: { notes: RelatedNote[] }) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="text-lg">Notas relacionadas</CardTitle>
+        <CardTitle className="text-lg">También podrías necesitar</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-3">