From 63630eb55a71754adb2f92037a7f90d237d879f0 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Wed, 18 Mar 2026 02:55:23 +0000
Subject: [PATCH] =?UTF-8?q?Fullf=C3=B8rer=20oppgave=2014.16:=20Presentasjo?=
 =?UTF-8?q?nselementer=20som=20noder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Publisert tittel, ingress, OG-bilde og undertittel er nå egne noder
koblet til artikler via title/subtitle/summary/og_image-edges.
Rendering bruker presentasjonselementer med fallback til artikkelfelt.

Backend:
- Ny query: GET /query/presentation_elements?article_id=...
- render_article_to_cas henter presentasjonselementer via edges
- fetch_article + fetch_index_articles bruker pres.elementer
- Batch-henting for forsideartikler (én SQL-spørring)
- ArticleData utvides med subtitle + og_image
- Alle fire temaer viser subtitle og OG-bilde
- SEO og_image-tag fylles fra presentasjonselement

Frontend:
- PresentationEditor.svelte: opprett/rediger tittel, undertittel,
  ingress, OG-bilde med variantvelger (editorial/ai/social/rss)
- Integrert i PublishDialog via <details>-seksjon
- API-klient: fetchPresentationElements(), deleteNode()

Grunnlag for A/B-testing (oppgave 14.17): edge-metadata støtter
ab_status/impressions/clicks/ctr, best_of() prioriterer winner > testing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/concepts/publisering.md                  |   7 +
 frontend/src/lib/api.ts                       |  45 +++
 .../lib/components/PresentationEditor.svelte  | 349 ++++++++++++++++++
 .../src/lib/components/PublishDialog.svelte   |  11 +
 maskinrommet/src/main.rs                      |   1 +
 maskinrommet/src/publishing.rs                | 246 +++++++++++-
 maskinrommet/src/queries.rs                   | 142 +++++++
 maskinrommet/src/templates/avis/article.html  |   2 +
 maskinrommet/src/templates/blogg/article.html |   2 +
 .../src/templates/magasin/article.html        |   2 +
 .../src/templates/tidsskrift/article.html     |   2 +
 tasks.md                                      |   3 +-
 12 files changed, 802 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/lib/components/PresentationEditor.svelte

diff --git a/docs/concepts/publisering.md b/docs/concepts/publisering.md
index 533cc2a..a34742d 100644
--- a/docs/concepts/publisering.md
+++ b/docs/concepts/publisering.md
@@ -248,6 +248,13 @@ samtale, ikke en workflow-tilstand.
 
 ## Presentasjonselementer er noder
 
+> **Status:** Implementert i oppgave 14.16. Backend: query-endpoint
+> (`/query/presentation_elements`), rendering bruker presentasjonselementer
+> (title, subtitle, summary, og_image) med fallback til artikkelnoden.
+> Frontend: PresentationEditor-komponent integrert i PublishDialog.
+> A/B-testing (automatisk rotasjon, impression-logging) er spesifisert
+> men ikke implementert (planlagt oppgave 14.17).
+
 En ingress er en tekst. En overskrift er en tekst. Et forsidebilde er
 et bilde. Alt som vises *om* en artikkel på forsiden er en *ting med
 egen forfatter, eget tidspunkt, og potensielt flere varianter*. Det
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 1aab86b..1a23373 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -567,6 +567,51 @@ export async function audioInfo(accessToken: string, hash: string): Promise<Audi
 	return res.json();
 }
 
+// =============================================================================
+// Presentasjonselementer
+// =============================================================================
+
+export interface PresentationElement {
+	node_id: string;
+	edge_id: string;
+	element_type: string;
+	title: string | null;
+	content: string | null;
+	node_kind: string;
+	metadata: Record<string, unknown>;
+	edge_metadata: Record<string, unknown>;
+	created_at: string;
+}
+
+export interface PresentationElementsResponse {
+	article_id: string;
+	elements: PresentationElement[];
+}
+
+/** Hent presentasjonselementer (tittel, undertittel, ingress, OG-bilde) for en artikkel. */
+export async function fetchPresentationElements(
+	accessToken: string,
+	articleId: string
+): Promise<PresentationElementsResponse> {
+	const res = await fetch(
+		`${BASE_URL}/query/presentation_elements?article_id=${encodeURIComponent(articleId)}`,
+		{ headers: { Authorization: `Bearer ${accessToken}` } }
+	);
+	if (!res.ok) {
+		const body = await res.text();
+		throw new Error(`presentation_elements failed (${res.status}): ${body}`);
+	}
+	return res.json();
+}
+
+/** Slett en node (brukes for å fjerne presentasjonselementer). */
+export function deleteNode(
+	accessToken: string,
+	nodeId: string
+): Promise<{ deleted: boolean }> {
+	return post(accessToken, '/intentions/delete_node', { node_id: nodeId });
+}
+
 /** Anvend brukerens per-segment-valg etter re-transkripsjon. */
 export function resolveRetranscription(
 	accessToken: string,
diff --git a/frontend/src/lib/components/PresentationEditor.svelte b/frontend/src/lib/components/PresentationEditor.svelte
new file mode 100644
index 0000000..a3e48a3
--- /dev/null
+++ b/frontend/src/lib/components/PresentationEditor.svelte
@@ -0,0 +1,349 @@
+<script lang="ts">
+	import {
+		createNode,
+		createEdge,
+		updateNode,
+		deleteEdge,
+		deleteNode,
+		uploadMedia,
+		casUrl,
+		fetchPresentationElements,
+		type PresentationElement
+	} from '$lib/api';
+
+	interface Props {
+		/** Artikkelens node-ID */
+		articleId: string;
+		/** Auth token */
+		accessToken: string;
+	}
+
+	let { articleId, accessToken }: Props = $props();
+
+	let elements = $state<PresentationElement[]>([]);
+	let loading = $state(true);
+	let error = $state('');
+	let saving = $state(false);
+
+	// Nye verdier for opprettelse
+	let newTitle = $state('');
+	let newSubtitle = $state('');
+	let newSummary = $state('');
+	let newVariant = $state('editorial');
+
+	const variantOptions = ['editorial', 'ai', 'social', 'rss'];
+
+	// Grupper elementer etter type
+	const titles = $derived(elements.filter((e) => e.element_type === 'title'));
+	const subtitles = $derived(elements.filter((e) => e.element_type === 'subtitle'));
+	const summaries = $derived(elements.filter((e) => e.element_type === 'summary'));
+	const ogImages = $derived(elements.filter((e) => e.element_type === 'og_image'));
+
+	async function loadElements() {
+		loading = true;
+		error = '';
+		try {
+			const resp = await fetchPresentationElements(accessToken, articleId);
+			elements = resp.elements;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Feil ved lasting';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Last elementer ved oppstart og når articleId endrer seg
+	$effect(() => {
+		if (articleId && accessToken) {
+			loadElements();
+		}
+	});
+
+	async function createPresentationElement(
+		type: 'title' | 'subtitle' | 'summary',
+		value: string,
+		variant: string
+	) {
+		if (!value.trim() || saving) return;
+		saving = true;
+		error = '';
+		try {
+			// Opprett en content-node med verdien
+			const isTitle = type === 'title' || type === 'subtitle';
+			const nodeData = isTitle
+				? { node_kind: 'content', title: value.trim(), visibility: 'hidden' }
+				: { node_kind: 'content', content: value.trim(), visibility: 'hidden' };
+
+			const { node_id } = await createNode(accessToken, nodeData);
+
+			// Opprett edge fra element-noden til artikkelen
+			await createEdge(accessToken, {
+				source_id: node_id,
+				target_id: articleId,
+				edge_type: type,
+				metadata: { variant }
+			});
+
+			// Tøm felt og last inn på nytt
+			if (type === 'title') newTitle = '';
+			if (type === 'subtitle') newSubtitle = '';
+			if (type === 'summary') newSummary = '';
+
+			await loadElements();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Feil ved opprettelse';
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleImageUpload(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file || saving) return;
+		saving = true;
+		error = '';
+		try {
+			const result = await uploadMedia(accessToken, {
+				file,
+				title: file.name,
+				visibility: 'hidden'
+			});
+
+			// Opprett edge fra media-noden til artikkelen
+			await createEdge(accessToken, {
+				source_id: result.media_node_id,
+				target_id: articleId,
+				edge_type: 'og_image',
+				metadata: { variant: newVariant }
+			});
+
+			await loadElements();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Feil ved bildeopplasting';
+		} finally {
+			saving = false;
+			input.value = '';
+		}
+	}
+
+	async function removeElement(el: PresentationElement) {
+		if (saving) return;
+		saving = true;
+		error = '';
+		try {
+			// Slett edge og node
+			await deleteEdge(accessToken, { edge_id: el.edge_id });
+			await deleteNode(accessToken, el.node_id);
+			await loadElements();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Feil ved sletting';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function getVariant(el: PresentationElement): string {
+		return (el.edge_metadata?.variant as string) ?? 'editorial';
+	}
+
+	function getAbStatus(el: PresentationElement): string {
+		return (el.edge_metadata?.ab_status as string) ?? '';
+	}
+
+	function getDisplayValue(el: PresentationElement): string {
+		if (el.element_type === 'og_image') {
+			const hash = el.metadata?.cas_hash as string;
+			return hash ? casUrl(hash) : '(bilde)';
+		}
+		return el.title ?? el.content ?? '(tom)';
+	}
+</script>
+
+<div class="space-y-4">
+	{#if loading}
+		<p class="text-sm text-gray-400">Laster presentasjonselementer...</p>
+	{:else}
+		{#if error}
+			<div class="rounded-lg border border-red-200 bg-red-50 p-2 text-xs text-red-700">
+				{error}
+			</div>
+		{/if}
+
+		<!-- Variant-velger -->
+		<div class="flex items-center gap-2">
+			<label for="variant-select" class="text-xs font-medium text-gray-500">Variant:</label>
+			<select
+				id="variant-select"
+				bind:value={newVariant}
+				class="rounded border border-gray-300 px-2 py-1 text-xs"
+			>
+				{#each variantOptions as v}
+					<option value={v}>{v}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Tittel -->
+		<fieldset class="rounded-lg border border-gray-200 p-3">
+			<legend class="px-1 text-xs font-medium text-gray-500">Publisert tittel</legend>
+			{#each titles as el}
+				<div class="mb-2 flex items-center gap-2 text-sm">
+					<span class="flex-1 truncate">{getDisplayValue(el)}</span>
+					<span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500"
+						>{getVariant(el)}</span
+					>
+					{#if getAbStatus(el)}
+						<span
+							class="rounded px-1.5 py-0.5 text-xs"
+							class:bg-green-100={getAbStatus(el) === 'winner'}
+							class:text-green-700={getAbStatus(el) === 'winner'}
+							class:bg-yellow-100={getAbStatus(el) === 'testing'}
+							class:text-yellow-700={getAbStatus(el) === 'testing'}
+							class:bg-gray-100={getAbStatus(el) === 'retired'}
+							class:text-gray-500={getAbStatus(el) === 'retired'}>{getAbStatus(el)}</span
+						>
+					{/if}
+					<button
+						onclick={() => removeElement(el)}
+						disabled={saving}
+						class="text-red-400 hover:text-red-600"
+						aria-label="Fjern"
+					>
+						&times;
+					</button>
+				</div>
+			{/each}
+			<div class="flex gap-2">
+				<input
+					type="text"
+					bind:value={newTitle}
+					placeholder="Skriv publisert tittel..."
+					disabled={saving}
+					class="flex-1 rounded border border-gray-300 px-2 py-1 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none"
+				/>
+				<button
+					onclick={() => createPresentationElement('title', newTitle, newVariant)}
+					disabled={saving || !newTitle.trim()}
+					class="rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-40"
+				>
+					Legg til
+				</button>
+			</div>
+		</fieldset>
+
+		<!-- Undertittel -->
+		<fieldset class="rounded-lg border border-gray-200 p-3">
+			<legend class="px-1 text-xs font-medium text-gray-500">Undertittel</legend>
+			{#each subtitles as el}
+				<div class="mb-2 flex items-center gap-2 text-sm">
+					<span class="flex-1 truncate">{getDisplayValue(el)}</span>
+					<span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500"
+						>{getVariant(el)}</span
+					>
+					<button
+						onclick={() => removeElement(el)}
+						disabled={saving}
+						class="text-red-400 hover:text-red-600"
+						aria-label="Fjern"
+					>
+						&times;
+					</button>
+				</div>
+			{/each}
+			<div class="flex gap-2">
+				<input
+					type="text"
+					bind:value={newSubtitle}
+					placeholder="Skriv undertittel..."
+					disabled={saving}
+					class="flex-1 rounded border border-gray-300 px-2 py-1 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none"
+				/>
+				<button
+					onclick={() => createPresentationElement('subtitle', newSubtitle, newVariant)}
+					disabled={saving || !newSubtitle.trim()}
+					class="rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-40"
+				>
+					Legg til
+				</button>
+			</div>
+		</fieldset>
+
+		<!-- Ingress / Summary -->
+		<fieldset class="rounded-lg border border-gray-200 p-3">
+			<legend class="px-1 text-xs font-medium text-gray-500">Ingress</legend>
+			{#each summaries as el}
+				<div class="mb-2 flex items-center gap-2 text-sm">
+					<span class="flex-1 truncate">{getDisplayValue(el)}</span>
+					<span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500"
+						>{getVariant(el)}</span
+					>
+					<button
+						onclick={() => removeElement(el)}
+						disabled={saving}
+						class="text-red-400 hover:text-red-600"
+						aria-label="Fjern"
+					>
+						&times;
+					</button>
+				</div>
+			{/each}
+			<div class="flex gap-2">
+				<textarea
+					bind:value={newSummary}
+					placeholder="Skriv ingress (1-2 setninger)..."
+					disabled={saving}
+					rows="2"
+					class="flex-1 rounded border border-gray-300 px-2 py-1 text-sm focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none"
+				></textarea>
+				<button
+					onclick={() => createPresentationElement('summary', newSummary, newVariant)}
+					disabled={saving || !newSummary.trim()}
+					class="self-end rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700 disabled:opacity-40"
+				>
+					Legg til
+				</button>
+			</div>
+		</fieldset>
+
+		<!-- OG-bilde -->
+		<fieldset class="rounded-lg border border-gray-200 p-3">
+			<legend class="px-1 text-xs font-medium text-gray-500">OG-bilde (forside/deling)</legend>
+			{#each ogImages as el}
+				<div class="mb-2 flex items-center gap-2">
+					{#if el.metadata?.cas_hash}
+						<img
+							src={casUrl(el.metadata.cas_hash as string)}
+							alt="OG-bilde"
+							class="h-12 w-20 rounded border object-cover"
+						/>
+					{/if}
+					<span class="flex-1 text-xs text-gray-500">{getVariant(el)}</span>
+					<button
+						onclick={() => removeElement(el)}
+						disabled={saving}
+						class="text-red-400 hover:text-red-600"
+						aria-label="Fjern"
+					>
+						&times;
+					</button>
+				</div>
+			{/each}
+			<div>
+				<input
+					type="file"
+					accept="image/*"
+					onchange={handleImageUpload}
+					disabled={saving}
+					class="text-xs text-gray-500 file:mr-2 file:rounded file:border-0 file:bg-emerald-50 file:px-3 file:py-1 file:text-xs file:font-medium file:text-emerald-700 hover:file:bg-emerald-100"
+				/>
+			</div>
+		</fieldset>
+
+		{#if elements.length > 1}
+			<p class="text-xs text-gray-400">
+				Flere varianter av samme type aktiverer automatisk A/B-testing.
+			</p>
+		{/if}
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/PublishDialog.svelte b/frontend/src/lib/components/PublishDialog.svelte
index f7596d4..19e8b0a 100644
--- a/frontend/src/lib/components/PublishDialog.svelte
+++ b/frontend/src/lib/components/PublishDialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Node } from '$lib/spacetime';
 	import { createEdge } from '$lib/api';
+	import PresentationEditor from './PresentationEditor.svelte';
 
 	interface Props {
 		/** The content node to publish */
@@ -136,6 +137,16 @@
 				{/if}
 			</div>
 
+			<!-- Presentasjonselementer -->
+			<details class="rounded-lg border border-gray-200" open>
+				<summary class="cursor-pointer px-3 py-2 text-xs font-medium text-gray-700">
+					Presentasjonselementer (tittel, ingress, bilde)
+				</summary>
+				<div class="border-t border-gray-100 px-3 py-3">
+					<PresentationEditor articleId={node.id} {accessToken} />
+				</div>
+			</details>
+
 			<!-- Theme info -->
 			<div class="flex items-center gap-4 text-xs text-gray-500">
 				<span>Tema: <span class="font-medium text-gray-700">{theme}</span></span>
diff --git a/maskinrommet/src/main.rs b/maskinrommet/src/main.rs
index 8e1cfb0..69ebc6c 100644
--- a/maskinrommet/src/main.rs
+++ b/maskinrommet/src/main.rs
@@ -178,6 +178,7 @@ async fn main() {
         .route("/intentions/close_communication", post(intentions::close_communication))
         .route("/query/aliases", get(queries::query_aliases))
         .route("/query/graph", get(queries::query_graph))
+        .route("/query/presentation_elements", get(queries::query_presentation_elements))
         .route("/query/transcription_versions", get(queries::query_transcription_versions))
         .route("/query/segments_version", get(queries::query_segments_version))
         .route("/intentions/audio_analyze", post(intentions::audio_analyze))
diff --git a/maskinrommet/src/publishing.rs b/maskinrommet/src/publishing.rs
index bc31deb..a6e4b0e 100644
--- a/maskinrommet/src/publishing.rs
+++ b/maskinrommet/src/publishing.rs
@@ -121,11 +121,14 @@ fn build_seo_data(
 
     let json_ld = build_json_ld(article, collection_title, canonical_url);
 
+    // Bygg OG-image URL fra CAS-hash hvis tilgjengelig
+    let og_image = article.og_image.as_ref().map(|hash| format!("/cas/{hash}"));
+
     SeoData {
         og_title: article.title.clone(),
         description,
         canonical_url: canonical_url.to_string(),
-        og_image: None,
+        og_image,
         json_ld,
     }
 }
@@ -297,8 +300,10 @@ pub struct ArticleData {
     pub id: String,
     pub short_id: String,
     pub title: String,
+    pub subtitle: Option<String>,
     pub content: String,
     pub summary: Option<String>,
+    pub og_image: Option<String>,
     pub published_at: String,
     pub published_at_short: String,
 }
@@ -501,16 +506,28 @@ pub async fn render_article_to_cas(
         content.unwrap_or_default()
     };
 
-    let article_title = title.unwrap_or_else(|| "Uten tittel".to_string());
     let short_id = id.to_string()[..8].to_string();
-    let summary_text = truncate(&article_html.replace("<p>", "").replace("</p>", " ").replace('\n', " "), 200);
+
+    // 3b. Hent presentasjonselementer (title/subtitle/summary/og_image/og_description)
+    let pres = fetch_presentation_elements(db, node_id).await
+        .map_err(|e| format!("Feil ved henting av presentasjonselementer: {e}"))?;
+
+    // Bruk presentasjonselement-tittel hvis tilgjengelig, ellers artikkelens interne tittel
+    let article_title = pres.best_title()
+        .unwrap_or_else(|| title.unwrap_or_else(|| "Uten tittel".to_string()));
+
+    // Bruk presentasjonselement-ingress hvis tilgjengelig, ellers auto-generert
+    let summary_text = pres.best_summary()
+        .unwrap_or_else(|| truncate(&article_html.replace("<p>", "").replace("</p>", " ").replace('\n', " "), 200));
 
     let article_data = ArticleData {
         id: id.to_string(),
         short_id: short_id.clone(),
         title: article_title,
+        subtitle: pres.best_subtitle(),
         content: article_html,
         summary: Some(summary_text),
+        og_image: pres.best_og_image(),
         published_at: publish_at.to_rfc3339(),
         published_at_short: publish_at.format("%e. %B %Y").to_string(),
     };
@@ -858,17 +875,26 @@ async fn fetch_article(
         content.unwrap_or_default()
     };
 
-    let summary_text = truncate(
-        &article_html.replace("<p>", "").replace("</p>", " ").replace('\n', " "),
-        200,
-    );
+    // Hent presentasjonselementer
+    let pres = fetch_presentation_elements(db, id).await?;
+
+    let article_title = pres.best_title()
+        .unwrap_or_else(|| title.unwrap_or_else(|| "Uten tittel".to_string()));
+
+    let summary_text = pres.best_summary()
+        .unwrap_or_else(|| truncate(
+            &article_html.replace("<p>", "").replace("</p>", " ").replace('\n', " "),
+            200,
+        ));
 
     let article = ArticleData {
         id: id.to_string(),
         short_id: id.to_string()[..8].to_string(),
-        title: title.unwrap_or_else(|| "Uten tittel".to_string()),
+        title: article_title,
+        subtitle: pres.best_subtitle(),
         content: article_html,
         summary: Some(summary_text),
+        og_image: pres.best_og_image(),
         published_at: publish_at.to_rfc3339(),
         published_at_short: publish_at.format("%e. %B %Y").to_string(),
     };
@@ -919,8 +945,10 @@ async fn fetch_index_articles_optimized(
             id: id.to_string(),
             short_id: id.to_string()[..8].to_string(),
             title: title.unwrap_or_else(|| "Uten tittel".to_string()),
+            subtitle: None,
             content: content.unwrap_or_default(),
             summary,
+            og_image: None,
             published_at: publish_at.to_rfc3339(),
             published_at_short: publish_at.format("%e. %B %Y").to_string(),
         }
@@ -1001,9 +1029,203 @@ async fn fetch_index_articles_optimized(
         })
         .collect();
 
+    // Berik med presentasjonselementer (batch: hent alle i én spørring)
+    let mut all_ids: Vec<Uuid> = vec![];
+    if let Some(ref h) = hero {
+        if let Ok(uid) = h.id.parse::<Uuid>() { all_ids.push(uid); }
+    }
+    for a in &featured { if let Ok(uid) = a.id.parse::<Uuid>() { all_ids.push(uid); } }
+    for a in &stream { if let Ok(uid) = a.id.parse::<Uuid>() { all_ids.push(uid); } }
+
+    let pres_map = fetch_presentation_elements_batch(db, &all_ids).await
+        .unwrap_or_default();
+
+    fn enrich(article: &mut ArticleData, pres: &PresentationElements) {
+        if let Some(t) = pres.best_title() { article.title = t; }
+        if let Some(s) = pres.best_subtitle() { article.subtitle = Some(s); }
+        if let Some(s) = pres.best_summary() { article.summary = Some(s); }
+        if let Some(img) = pres.best_og_image() { article.og_image = Some(img); }
+    }
+
+    let mut hero = hero;
+    if let Some(ref mut h) = hero {
+        if let Ok(uid) = h.id.parse::<Uuid>() {
+            if let Some(pres) = pres_map.get(&uid) { enrich(h, pres); }
+        }
+    }
+    let mut featured = featured;
+    for a in &mut featured {
+        if let Ok(uid) = a.id.parse::<Uuid>() {
+            if let Some(pres) = pres_map.get(&uid) { enrich(a, pres); }
+        }
+    }
+    let mut stream = stream;
+    for a in &mut stream {
+        if let Ok(uid) = a.id.parse::<Uuid>() {
+            if let Some(pres) = pres_map.get(&uid) { enrich(a, pres); }
+        }
+    }
+
     Ok((hero, featured, stream))
 }
 
+// =============================================================================
+// Presentasjonselementer: hent title/subtitle/summary/og_image fra edge-koblede noder
+// =============================================================================
+
+/// Presentasjonselementer for en artikkel.
+/// Inneholder lister per type — flere varianter støttes for A/B-testing.
+struct PresentationElements {
+    titles: Vec<PresEl>,
+    subtitles: Vec<PresEl>,
+    summaries: Vec<PresEl>,
+    og_images: Vec<PresEl>,
+    og_descriptions: Vec<PresEl>,
+}
+
+struct PresEl {
+    title: Option<String>,
+    content: Option<String>,
+    #[allow(dead_code)]
+    node_kind: String,
+    metadata: serde_json::Value,
+    edge_metadata: serde_json::Value,
+}
+
+impl PresEl {
+    fn ab_status(&self) -> &str {
+        self.edge_metadata
+            .get("ab_status")
+            .and_then(|v| v.as_str())
+            .unwrap_or("")
+    }
+}
+
+impl PresentationElements {
+    /// Velg beste variant: "winner" > "testing" > første tilgjengelige
+    fn best_of(elements: &[PresEl]) -> Option<&PresEl> {
+        // Prioriter "winner"
+        if let Some(el) = elements.iter().find(|e| e.ab_status() == "winner") {
+            return Some(el);
+        }
+        // Så "testing" eller de uten ab_status (enkeltvariant)
+        elements.iter().find(|e| e.ab_status() != "retired")
+    }
+
+    fn best_title(&self) -> Option<String> {
+        Self::best_of(&self.titles)
+            .and_then(|el| el.title.clone().or(el.content.clone()))
+    }
+
+    fn best_subtitle(&self) -> Option<String> {
+        Self::best_of(&self.subtitles)
+            .and_then(|el| el.title.clone().or(el.content.clone()))
+    }
+
+    fn best_summary(&self) -> Option<String> {
+        Self::best_of(&self.summaries)
+            .and_then(|el| el.content.clone().or(el.title.clone()))
+    }
+
+    fn best_og_image(&self) -> Option<String> {
+        Self::best_of(&self.og_images)
+            .and_then(|el| el.metadata.get("cas_hash").and_then(|h| h.as_str()).map(|s| s.to_string()))
+    }
+
+    #[allow(dead_code)]
+    fn best_og_description(&self) -> Option<String> {
+        Self::best_of(&self.og_descriptions)
+            .and_then(|el| el.content.clone().or(el.title.clone()))
+    }
+}
+
+/// Hent alle presentasjonselementer for en artikkel.
+/// Noder koblet via title/subtitle/summary/og_image/og_description-edges
+/// der source_id = elementnode, target_id = artikkel.
+async fn fetch_presentation_elements(
+    db: &PgPool,
+    article_id: Uuid,
+) -> Result<PresentationElements, sqlx::Error> {
+    let rows: Vec<(String, Option<String>, Option<String>, String, serde_json::Value, serde_json::Value)> = sqlx::query_as(
+        r#"
+        SELECT e.edge_type, n.title, n.content, n.node_kind, n.metadata, e.metadata AS edge_metadata
+        FROM edges e
+        JOIN nodes n ON n.id = e.source_id
+        WHERE e.target_id = $1
+          AND e.edge_type IN ('title', 'subtitle', 'summary', 'og_image', 'og_description')
+        ORDER BY e.created_at
+        "#,
+    )
+    .bind(article_id)
+    .fetch_all(db)
+    .await?;
+
+    let mut titles = vec![];
+    let mut subtitles = vec![];
+    let mut summaries = vec![];
+    let mut og_images = vec![];
+    let mut og_descriptions = vec![];
+
+    for (edge_type, title, content, node_kind, metadata, edge_metadata) in rows {
+        let el = PresEl { title, content, node_kind, metadata, edge_metadata };
+        match edge_type.as_str() {
+            "title" => titles.push(el),
+            "subtitle" => subtitles.push(el),
+            "summary" => summaries.push(el),
+            "og_image" => og_images.push(el),
+            "og_description" => og_descriptions.push(el),
+            _ => {}
+        }
+    }
+
+    Ok(PresentationElements { titles, subtitles, summaries, og_images, og_descriptions })
+}
+
+/// Hent presentasjonselementer for flere artikler i én spørring.
+/// Returnerer et HashMap fra artikkel-ID til PresentationElements.
+async fn fetch_presentation_elements_batch(
+    db: &PgPool,
+    article_ids: &[Uuid],
+) -> Result<HashMap<Uuid, PresentationElements>, sqlx::Error> {
+    if article_ids.is_empty() {
+        return Ok(HashMap::new());
+    }
+
+    let rows: Vec<(Uuid, String, Option<String>, Option<String>, String, serde_json::Value, serde_json::Value)> = sqlx::query_as(
+        r#"
+        SELECT e.target_id AS article_id, e.edge_type, n.title, n.content, n.node_kind, n.metadata, e.metadata AS edge_metadata
+        FROM edges e
+        JOIN nodes n ON n.id = e.source_id
+        WHERE e.target_id = ANY($1)
+          AND e.edge_type IN ('title', 'subtitle', 'summary', 'og_image', 'og_description')
+        ORDER BY e.created_at
+        "#,
+    )
+    .bind(article_ids)
+    .fetch_all(db)
+    .await?;
+
+    let mut map: HashMap<Uuid, PresentationElements> = HashMap::new();
+
+    for (article_id, edge_type, title, content, node_kind, metadata, edge_metadata) in rows {
+        let el = PresEl { title, content, node_kind, metadata, edge_metadata };
+        let pres = map.entry(article_id).or_insert_with(|| PresentationElements {
+            titles: vec![], subtitles: vec![], summaries: vec![],
+            og_images: vec![], og_descriptions: vec![],
+        });
+        match edge_type.as_str() {
+            "title" => pres.titles.push(el),
+            "subtitle" => pres.subtitles.push(el),
+            "summary" => pres.summaries.push(el),
+            "og_image" => pres.og_images.push(el),
+            "og_description" => pres.og_descriptions.push(el),
+            _ => {}
+        }
+    }
+
+    Ok(map)
+}
+
 fn truncate(s: &str, max: usize) -> String {
     if s.len() <= max {
         return s.to_string();
@@ -1248,11 +1470,13 @@ pub async fn preview_theme(
             id: format!("00000000-0000-0000-0000-00000000000{i}"),
             short_id: format!("0000000{i}"),
             title: format!("Eksempelartikkel {i}"),
+            subtitle: None,
             content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. \
                 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \
                 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
                 .to_string(),
             summary: Some("Lorem ipsum dolor sit amet, consectetur adipiscing elit.".to_string()),
+            og_image: None,
             published_at: "2026-03-18T12:00:00Z".to_string(),
             published_at_short: "18. mars 2026".to_string(),
         })
@@ -1700,8 +1924,10 @@ pub async fn serve_category(
             id: id.to_string(),
             short_id: id.to_string()[..8].to_string(),
             title: title.unwrap_or_else(|| "Uten tittel".to_string()),
+            subtitle: None,
             content: content.unwrap_or_default(),
             summary,
+            og_image: None,
             published_at: publish_at.to_rfc3339(),
             published_at_short: publish_at.format("%e. %B %Y").to_string(),
         }
@@ -1836,8 +2062,10 @@ pub async fn serve_archive(
             id: id.to_string(),
             short_id: id.to_string()[..8].to_string(),
             title: title.unwrap_or_else(|| "Uten tittel".to_string()),
+            subtitle: None,
             content: content.unwrap_or_default(),
             summary,
+            og_image: None,
             published_at: publish_at.to_rfc3339(),
             published_at_short: publish_at.format("%e. %B %Y").to_string(),
         };
@@ -2004,8 +2232,10 @@ pub async fn serve_search(
                 id: id.to_string(),
                 short_id: id.to_string()[..8].to_string(),
                 title: title.unwrap_or_else(|| "Uten tittel".to_string()),
+                subtitle: None,
                 content: content.unwrap_or_default(),
                 summary,
+                og_image: None,
                 published_at: publish_at.to_rfc3339(),
                 published_at_short: publish_at.format("%e. %B %Y").to_string(),
             }
diff --git a/maskinrommet/src/queries.rs b/maskinrommet/src/queries.rs
index 85d31c2..7b6e66d 100644
--- a/maskinrommet/src/queries.rs
+++ b/maskinrommet/src/queries.rs
@@ -1194,6 +1194,148 @@ async fn run_query_graph(
     })
 }
 
+// =============================================================================
+// GET /query/presentation_elements — presentasjonselementer for en artikkel
+// =============================================================================
+//
+// Henter noder koblet til en artikkel via title/subtitle/summary/og_image/
+// og_description-edges. Disse er separate noder med variantmetadata.
+// Ref: docs/concepts/publisering.md § "Presentasjonselementer"
+
+#[derive(Deserialize)]
+pub struct QueryPresentationRequest {
+    /// Artikkelens node-ID.
+    pub article_id: Uuid,
+}
+
+#[derive(Serialize)]
+pub struct PresentationElement {
+    /// Presentasjonselementets node-ID.
+    pub node_id: Uuid,
+    /// Edge-ID (for oppdatering/sletting).
+    pub edge_id: Uuid,
+    /// Edge-type: title, subtitle, summary, og_image, og_description.
+    pub element_type: String,
+    /// Nodens tittel (brukt for title/subtitle).
+    pub title: Option<String>,
+    /// Nodens innhold (brukt for summary/og_description).
+    pub content: Option<String>,
+    /// Node-kind (content eller media).
+    pub node_kind: String,
+    /// Node metadata (inkl. cas_hash for media).
+    pub metadata: serde_json::Value,
+    /// Edge metadata (variant, language, ab_status etc.).
+    pub edge_metadata: serde_json::Value,
+    pub created_at: chrono::DateTime<chrono::Utc>,
+}
+
+#[derive(Serialize)]
+pub struct QueryPresentationResponse {
+    pub article_id: Uuid,
+    pub elements: Vec<PresentationElement>,
+}
+
+/// GET /query/presentation_elements?article_id=...
+///
+/// Henter alle presentasjonselementer (tittel, undertittel, ingress,
+/// OG-bilde, OG-beskrivelse) knyttet til en artikkel.
+/// Returnerer nodene med edge-metadata (variant, ab_status etc.).
+pub async fn query_presentation_elements(
+    State(state): State<AppState>,
+    user: AuthUser,
+    axum::extract::Query(params): axum::extract::Query<QueryPresentationRequest>,
+) -> Result<Json<QueryPresentationResponse>, (StatusCode, Json<ErrorResponse>)> {
+    // Verifiser tilgang til artikkelen via RLS
+    let mut tx = state.db.begin().await.map_err(|e| {
+        tracing::error!(error = %e, "Transaksjon feilet");
+        internal_error("Databasefeil")
+    })?;
+    set_rls_context(&mut tx, user.node_id).await.map_err(|e| {
+        tracing::error!(error = %e, "RLS-kontekst feilet");
+        internal_error("Databasefeil")
+    })?;
+
+    let exists = sqlx::query_scalar::<_, bool>(
+        "SELECT EXISTS(SELECT 1 FROM nodes WHERE id = $1)",
+    )
+    .bind(params.article_id)
+    .fetch_one(&mut *tx)
+    .await
+    .map_err(|e| {
+        tracing::error!(error = %e, "Tilgangssjekk feilet");
+        internal_error("Databasefeil")
+    })?;
+
+    tx.commit().await.map_err(|e| {
+        tracing::error!(error = %e, "Commit feilet");
+        internal_error("Databasefeil")
+    })?;
+
+    if !exists {
+        return Err((
+            StatusCode::NOT_FOUND,
+            Json(ErrorResponse {
+                error: format!("Artikkel {} finnes ikke eller du har ikke tilgang", params.article_id),
+            }),
+        ));
+    }
+
+    // Hent presentasjonselementer: noder med title/subtitle/summary/og_image/og_description-edge
+    // til artikkelen (source_id = element-node, target_id = article)
+    let rows = sqlx::query_as::<_, (
+        Uuid,                             // n.id
+        Uuid,                             // e.id
+        String,                           // e.edge_type
+        Option<String>,                   // n.title
+        Option<String>,                   // n.content
+        String,                           // n.node_kind
+        serde_json::Value,                // n.metadata
+        serde_json::Value,                // e.metadata
+        chrono::DateTime<chrono::Utc>,    // n.created_at
+    )>(
+        r#"
+        SELECT
+            n.id, e.id AS edge_id, e.edge_type,
+            n.title, n.content, n.node_kind, n.metadata,
+            e.metadata AS edge_metadata, n.created_at
+        FROM edges e
+        JOIN nodes n ON n.id = e.source_id
+        WHERE e.target_id = $1
+          AND e.edge_type IN ('title', 'subtitle', 'summary', 'og_image', 'og_description')
+        ORDER BY e.edge_type, e.created_at
+        "#,
+    )
+    .bind(params.article_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| {
+        tracing::error!(error = %e, "Feil ved henting av presentasjonselementer");
+        internal_error("Databasefeil ved henting av presentasjonselementer")
+    })?;
+
+    let elements: Vec<PresentationElement> = rows
+        .into_iter()
+        .map(|(node_id, edge_id, element_type, title, content, node_kind, metadata, edge_metadata, created_at)| {
+            PresentationElement {
+                node_id,
+                edge_id,
+                element_type,
+                title,
+                content,
+                node_kind,
+                metadata,
+                edge_metadata,
+                created_at,
+            }
+        })
+        .collect();
+
+    Ok(Json(QueryPresentationResponse {
+        article_id: params.article_id,
+        elements,
+    }))
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
diff --git a/maskinrommet/src/templates/avis/article.html b/maskinrommet/src/templates/avis/article.html
index b8f961c..b4f0701 100644
--- a/maskinrommet/src/templates/avis/article.html
+++ b/maskinrommet/src/templates/avis/article.html
@@ -69,7 +69,9 @@
 {% block content %}
 <article class="article">
   <div class="article__main">
+    {% if article.og_image %}<img src="/cas/{{ article.og_image }}" alt="{{ article.title }}" style="width:100%;max-height:400px;object-fit:cover;margin-bottom:1.5rem;">{% endif %}
     <h1 class="article__title">{{ article.title }}</h1>
+    {% if article.subtitle %}<p style="font-size:1.15rem;color:var(--color-muted);margin-bottom:0.5rem;font-family:var(--font-heading);">{{ article.subtitle }}</p>{% endif %}
     <div class="article__meta">Publisert {{ article.published_at_short }}</div>
     <div class="article__content">{{ article.content | safe }}</div>
     <a class="article__back" href="{{ base_url }}">&larr; Tilbake til forsiden</a>
diff --git a/maskinrommet/src/templates/blogg/article.html b/maskinrommet/src/templates/blogg/article.html
index 9d1bdb9..53f4910 100644
--- a/maskinrommet/src/templates/blogg/article.html
+++ b/maskinrommet/src/templates/blogg/article.html
@@ -48,7 +48,9 @@
 
 {% block content %}
 <article class="blog-article">
+  {% if article.og_image %}<img src="/cas/{{ article.og_image }}" alt="{{ article.title }}" style="width:100%;max-height:400px;object-fit:cover;border-radius:0.5rem;margin-bottom:1.5rem;">{% endif %}
   <h1 class="blog-article__title">{{ article.title }}</h1>
+  {% if article.subtitle %}<p style="font-size:1.2rem;color:var(--color-muted);margin-bottom:0.5rem;font-family:var(--font-heading);">{{ article.subtitle }}</p>{% endif %}
   <div class="blog-article__meta">{{ article.published_at_short }}</div>
   <div class="blog-article__content">
     {{ article.content | safe }}
diff --git a/maskinrommet/src/templates/magasin/article.html b/maskinrommet/src/templates/magasin/article.html
index 4e5400b..faa1ea5 100644
--- a/maskinrommet/src/templates/magasin/article.html
+++ b/maskinrommet/src/templates/magasin/article.html
@@ -61,8 +61,10 @@
 
 {% block content %}
 <article class="mag-article">
+  {% if article.og_image %}<img src="/cas/{{ article.og_image }}" alt="{{ article.title }}" style="width:100%;max-height:500px;object-fit:cover;margin-bottom:0;">{% endif %}
   <header class="mag-article__header">
     <h1 class="mag-article__title">{{ article.title }}</h1>
+    {% if article.subtitle %}<p style="font-size:1.25rem;color:var(--color-muted);margin-top:0.5rem;font-family:var(--font-heading);">{{ article.subtitle }}</p>{% endif %}
     <div class="mag-article__meta">Publisert {{ article.published_at_short }}</div>
   </header>
   <div class="mag-article__content">
diff --git a/maskinrommet/src/templates/tidsskrift/article.html b/maskinrommet/src/templates/tidsskrift/article.html
index b208fbb..6744df0 100644
--- a/maskinrommet/src/templates/tidsskrift/article.html
+++ b/maskinrommet/src/templates/tidsskrift/article.html
@@ -55,7 +55,9 @@
 
 {% block content %}
 <article class="journal-article">
+  {% if article.og_image %}<div style="text-align:center;margin-bottom:1.5rem;"><img src="/cas/{{ article.og_image }}" alt="{{ article.title }}" style="max-width:100%;max-height:400px;object-fit:cover;"></div>{% endif %}
   <h1 class="journal-article__title">{{ article.title }}</h1>
+  {% if article.subtitle %}<p style="font-size:1.1rem;color:var(--color-muted);text-align:center;margin-bottom:0.5rem;font-family:var(--font-heading);">{{ article.subtitle }}</p>{% endif %}
   <div class="journal-article__meta">Publisert {{ article.published_at_short }}</div>
   <div class="journal-article__content">
     {{ article.content | safe }}
diff --git a/tasks.md b/tasks.md
index fe0d4df..2c541a2 100644
--- a/tasks.md
+++ b/tasks.md
@@ -158,8 +158,7 @@ Uavhengige faser kan fortsatt plukkes.
 - [x] 14.13 Redaksjonell samtale: ved innsending kan redaktør opprette kommunikasjonsnode knyttet til artikkel + forfatter for diskusjon/feedback utover kort notat i edge-metadata.
 - [x] 14.14 Bulk re-rendering: batch-jobb via jobbkø ved temaendring. Paginert (100 artikler om gangen), oppdaterer `renderer_version`. Artikler serveres med gammelt tema til re-rendret.
 - [x] 14.15 Dynamiske sider: kategori-sider (filtrert på tag-edges), arkiv (kronologisk med månedsgruppering), søk (PG fulltekst). Alle paginerte, cachet i maskinrommet. Om-side som statisk CAS-node.
-- [~] 14.16 Presentasjonselementer som noder: publisert tittel, ingress, OG-bilde, undertittel er egne noder med `title`/`summary`/`og_image`-edges til artikkelen. Frontend for å opprette/redigere varianter. Ref: `docs/concepts/publisering.md` § "Presentasjonselementer".
-  > Påbegynt: 2026-03-18T02:42
+- [x] 14.16 Presentasjonselementer som noder: publisert tittel, ingress, OG-bilde, undertittel er egne noder med `title`/`summary`/`og_image`-edges til artikkelen. Frontend for å opprette/redigere varianter. Ref: `docs/concepts/publisering.md` § "Presentasjonselementer".
 - [ ] 14.17 A/B-testing: maskinrommet roterer varianter ved forside-rendering, logger impressions/klikk per variant, normaliserer CTR mot tidspunkt-baseline. Etter statistisk signifikans markeres vinner. Redaktør kan overstyre. Edge-metadata: `ab_status`, `impressions`, `clicks`, `ctr`.
 
 ## Fase 15: Adminpanel