M6 1901: URL capture with link-preview unfurl (SSRF-hardened)

Paste a link → fetch its OpenGraph/meta preview (title, description, image,
site) and show a rich card. User-triggered + persisted (never auto-fetches;
cached so it never re-fetches). Opt-in via a new admin setting
enable_url_unfurl (default on, rule 26).

Security (the whole point of this task): a new dependency-free unfurl.py
does the fetch with layered SSRF defenses — http/https only; resolve the
host and reject EVERY non-public address (private/loopback/link-local/
reserved/multicast/unspecified — blocks 169.254.169.254 etc.); connect to
the vetted IP with SNI so DNS-rebinding can't slip through; ≤3 redirects
each re-validated; 5s timeout; 512 KB cap; text/html only; blocking IO in a
worker thread. No server-side image fetch — the og:image URL is loaded by
the browser.

- note_link_previews table (migration 0020), one per (note, url); serialized
  inline on notes (+ rides the sync pull feed read-only).
- POST /api/notes/<id>/unfurl {url} (owner-scoped, setting-gated, 502 on
  fetch failure); DELETE /api/notes/<id>/previews/<id>.
- enable_url_unfurl exposed in public config so the UI hides the affordance
  when disabled.

Frontend: LinkPreview.vue card; editor detects URLs in the body and offers a
"Preview <domain>" chip per un-previewed link (ensureDraft first), renders
preview cards with remove; card shows previews read-only. New link icon;
notes-store unfurl()/deletePreview().

Tests (DB-free): is_public_ip range blocking, validate_url scheme/parts,
extract_preview (OG + <title> fallback + relative-image resolve), endpoint
auth-guards.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm

frontend/src/components/Icon.vue

@@ -27,6 +27,7 @@ const paths: Record<string, string> = {
   upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
   device: '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
   paperclip: '<path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/>',
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
   copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
 };
 </script>

frontend/src/components/LinkPreview.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { LinkPreview } from "../stores/notes";
+
+defineProps<{ preview: LinkPreview; removable?: boolean }>();
+defineEmits<{ (e: "remove"): void }>();
+</script>
+
+<template>
+  <div class="group/lp relative overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700">
+    <a
+      :href="preview.url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex items-stretch hover:bg-neutral-50 dark:hover:bg-neutral-800/60"
+    >
+      <img
+        v-if="preview.image_url"
+        :src="preview.image_url"
+        alt=""
+        loading="lazy"
+        decoding="async"
+        class="h-auto w-24 shrink-0 self-stretch object-cover"
+      />
+      <div class="min-w-0 flex-1 px-3 py-2">
+        <p v-if="preview.site_name" class="truncate text-[11px] uppercase tracking-wide text-neutral-400">
+          {{ preview.site_name }}
+        </p>
+        <p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">
+          {{ preview.title || preview.url }}
+        </p>
+        <p v-if="preview.description" class="mt-0.5 line-clamp-2 text-xs text-neutral-500 dark:text-neutral-400">
+          {{ preview.description }}
+        </p>
+      </div>
+    </a>
+    <button
+      v-if="removable"
+      type="button"
+      class="absolute right-1 top-1 rounded-full bg-black/50 px-1.5 text-white opacity-0 transition group-hover/lp:opacity-100"
+      aria-label="Remove preview"
+      @click="$emit('remove')"
+    >
+      ×
+    </button>
+  </div>
+</template>

frontend/src/components/NoteCard.vue

@@ -11,6 +11,7 @@ import {
 } from "../notes/colors";
 import type { Note } from "../stores/notes";
 import Icon from "./Icon.vue";
+import LinkPreview from "./LinkPreview.vue";
 import MarkdownText from "./MarkdownText.vue";
 import NoteChecklist from "./NoteChecklist.vue";
 import { formatReminder, isOverdue } from "../notes/datetime";
@@ -162,6 +163,10 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
       </span>
     </div>
 
+    <div v-if="note.previews.length" class="mb-2 flex flex-col gap-2">
+      <LinkPreview v-for="p in note.previews" :key="p.id" :preview="p" />
+    </div>
+
     <!-- Checklist notes can't nest interactive controls in a <button>, so use a
          focusable div; text notes keep a semantic button. -->
     <template v-if="note.kind === 'list'">

frontend/src/components/NoteEditor.vue

@@ -2,10 +2,12 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { api } from "../api/client";
 import { useNotesStore } from "../stores/notes";
+import { useConfigStore } from "../stores/config";
 import { useTitlesStore, type TitleEntry } from "../stores/titles";
 import ColorPicker from "./ColorPicker.vue";
 import Icon from "./Icon.vue";
 import LabelPicker from "./LabelPicker.vue";
+import LinkPreview from "./LinkPreview.vue";
 import NoteChecklist from "./NoteChecklist.vue";
 import { fromLocalInput, toLocalInput } from "../notes/datetime";
 import type { Note, NoteLabel, NoteRevision } from "../stores/notes";
@@ -23,6 +25,7 @@ const props = withDefaults(defineProps<{ note?: Note | null; inline?: boolean; a
 });
 const emit = defineEmits<{ (e: "close"): void; (e: "navigate", id: string): void }>();
 const notes = useNotesStore();
+const config = useConfigStore();
 const titles = useTitlesStore();
 
 const noteId = ref<string | null>(props.note?.id ?? null);
@@ -68,6 +71,7 @@ const draftNote = computed<Note>(() => ({
   labels: labelList.value,
   items: [],
   attachments: [],
+  previews: [],
   created_at: null,
   updated_at: null,
 }));
@@ -447,6 +451,42 @@ async function uploadFile(file: File) {
     uploadError.value = (e as { error?: string }).error ?? "Could not upload file.";
   }
 }
+
+// ---- link previews (URL unfurl) ----
+const unfurling = ref<string | null>(null); // the URL currently being fetched
+const unfurlError = ref("");
+// Bare http(s) URLs in the body; trailing sentence punctuation trimmed.
+const URL_RE = /(https?:\/\/[^\s<>"'\])]+)/g;
+const detectedUrls = computed(() => {
+  const out: string[] = [];
+  for (const m of body.value.matchAll(URL_RE)) {
+    const u = m[1].replace(/[.,;:!?]+$/, "");
+    if (!out.includes(u)) out.push(u);
+  }
+  return out;
+});
+const previewedUrls = computed(() => new Set(liveNote.value.previews.map((p) => p.url)));
+const unpreviewedUrls = computed(() => detectedUrls.value.filter((u) => !previewedUrls.value.has(u)));
+async function addPreview(url: string) {
+  const id = await ensureDraft();
+  if (!id) return;
+  unfurling.value = url;
+  unfurlError.value = "";
+  try {
+    await notes.unfurl(id, url);
+  } catch (e) {
+    unfurlError.value = (e as { error?: string }).error ?? "Couldn't fetch a preview for that link.";
+  } finally {
+    unfurling.value = null;
+  }
+}
+function shortUrl(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
 async function onFileChange(e: Event) {
   const input = e.target as HTMLInputElement;
   const file = input.files?.[0];
@@ -604,6 +644,34 @@ defineExpose({ open });
         </div>
         <p v-if="uploadError" class="text-xs text-red-600 dark:text-red-400">{{ uploadError }}</p>
 
+        <!-- Link previews: stored preview cards + one "Preview <domain>" per detected URL -->
+        <div v-if="liveNote.previews.length" class="flex flex-col gap-2">
+          <LinkPreview
+            v-for="p in liveNote.previews"
+            :key="p.id"
+            :preview="p"
+            :removable="!liveNote.trashed"
+            @remove="notes.deletePreview(liveNote.id, p.id)"
+          />
+        </div>
+        <div
+          v-if="config.enableUrlUnfurl && !liveNote.trashed && unpreviewedUrls.length"
+          class="flex flex-wrap gap-1.5"
+        >
+          <button
+            v-for="u in unpreviewedUrls"
+            :key="u"
+            type="button"
+            class="inline-flex items-center gap-1 rounded-full border border-neutral-200 px-2 py-0.5 text-xs text-neutral-500 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60 dark:border-neutral-700 dark:hover:bg-neutral-800"
+            :disabled="unfurling === u"
+            @click="addPreview(u)"
+          >
+            <Icon name="link" />
+            {{ unfurling === u ? "Fetching…" : `Preview ${shortUrl(u)}` }}
+          </button>
+        </div>
+        <p v-if="unfurlError" class="text-xs text-red-600 dark:text-red-400">{{ unfurlError }}</p>
+
         <input
           v-model="title"
           type="text"