Add custom header/OG images to all 5 blog posts

src/content/blog/agent-memory-provenance-audit-trails.mdx

@@ -4,6 +4,8 @@ slug: agent-memory-provenance-audit-trails
 date: "2026-05-25T09:00:00+02:00"
 description: When an AI agent answers from memory, you need to know where it learned the answer. This post explains the provenance model in Statewave — what we store, what it costs, and what it enables for compliance, debugging, and trust.
 author: Statewave team
+image: /images/blog/agent-memory-provenance-audit-trails/og.png
+headerImage: /images/blog/agent-memory-provenance-audit-trails/header.png
 tags:
   - provenance
   - audit

src/content/blog/ai-agent-memory-vs-rag.mdx

@@ -4,6 +4,8 @@ slug: ai-agent-memory-vs-rag
 date: "2026-05-25T09:00:00+02:00"
 description: Retrieval-augmented generation and an agent memory runtime overlap at the embedding store, but they answer different questions. Here's where the two diverge and which to reach for.
 author: Statewave team
+image: /images/blog/ai-agent-memory-vs-rag/og.png
+headerImage: /images/blog/ai-agent-memory-vs-rag/header.png
 tags:
   - memory
   - rag

src/content/blog/episodic-vs-semantic-memory.mdx

@@ -4,6 +4,8 @@ slug: episodic-vs-semantic-memory
 date: "2026-08-07T09:00:00+02:00"
 description: Episodic memory stores what happened; semantic memory stores what's true. Here's how AI agents use each, when to convert one to the other, and how to store it.
 author: Statewave team
+image: /images/blog/episodic-vs-semantic-memory/og.png
+headerImage: /images/blog/episodic-vs-semantic-memory/header.png
 tags:
   - memory
   - episodic-memory

src/content/blog/persistent-memory-for-ai-support-agents.mdx

@@ -4,6 +4,8 @@ slug: persistent-memory-for-ai-support-agents
 date: "2026-05-25T09:00:00+02:00"
 description: A practical walkthrough of giving a support agent durable memory of customers across sessions — what to record, how to compile it, how to retrieve it, and what to expect from the support workflow benchmark.
 author: Statewave team
+image: /images/blog/persistent-memory-for-ai-support-agents/og.png
+headerImage: /images/blog/persistent-memory-for-ai-support-agents/header.png
 tags:
   - support
   - tutorial

src/content/blog/self-hosted-memory-postgres-pgvector.mdx

@@ -4,6 +4,8 @@ slug: self-hosted-memory-postgres-pgvector
 date: "2026-05-25T09:00:00+02:00"
 description: Why Statewave is Postgres-only by design, what pgvector buys you over a dedicated vector database, and what the deployment shape looks like in production.
 author: Statewave team
+image: /images/blog/self-hosted-memory-postgres-pgvector/og.png
+headerImage: /images/blog/self-hosted-memory-postgres-pgvector/header.png
 tags:
   - postgres
   - pgvector

src/lib/blog.ts

@@ -28,6 +28,12 @@ export interface BlogPostFrontmatter {
    *  "/blog/my-post/cover.png"). Optional — falls back to the site-wide
    *  default OG image (DEFAULT_OG_IMAGE in lib/seo-meta.ts) when unset. */
   image?: string
+  /** Site-relative path to this post's banner image, shown inline at the
+   *  top of the post itself (below the title card, above the article
+   *  body). Separate from `image` (the OG/social-share card) because the
+   *  two can reasonably differ — this one renders on the page, `image`
+   *  never does. Optional — posts without one just skip the banner. */
+  headerImage?: string
 }
 
 export interface BlogPost {

src/pages/BlogPostPage.tsx

@@ -190,6 +190,17 @@ export function BlogPostPage() {
             <p className="mt-6 text-xs text-theme-muted">
               By {post.meta.author}
             </p>
+
+            {post.meta.headerImage && (
+              <img
+                src={post.meta.headerImage}
+                alt=""
+                aria-hidden="true"
+                className="mt-8 w-full h-auto rounded-2xl border border-brand-500/20"
+                width={1600}
+                height={640}
+              />
+            )}
           </div>
         </div>
       </section>