feat(ui): show embedded post images instead of raw base64

ARCHITECTURE.md

@@ -64,7 +64,7 @@ flowchart LR
 | `chunking.py` | Splits a document into meaning-identifiable units (paragraph, sentence, DOM, conversation-turn) plus embedded-image extraction, in document order |
 | `embedding_client.py` | Pluggable text-embedding channel (`Null` default, `OpenAiCompatible` real impl) + `chunked_max_similarity` |
 | `adjudication_client.py` | Pluggable LLM-judgment channel (`Null` default, `ContextualOrchestrator` real impl) |
-| `image_content.py` | Pluggable vision channel: OCR + object recognition/tagging for embedded images (`Null` default, `OpenAiCompatibleVisionClient` real impl) |
+| `image_content.py` | Pluggable vision channel: OCR + object recognition/tagging for embedded images (`Null` default, `OpenAiCompatibleVisionClient` real impl). The product popup (`frontend/src/PostBody.tsx`) renders each `data:image` payload in document order so the buyer sees the picture, not the base64 string; GET does not call the vision client. |
 | `tepp_client.py` | TEPP's published `AnalysisRunRequest` wire contract, pluggable transport |
 | `reconstruct.py` | The pipeline: group → candidate window → score → fuse → thread |
 | `lineage_persistence.py` | Flattens reconstruct trees into `post_lineage_edge` row specs (parent, child, fused_score) |

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning follows
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.86.1] - 2026-08-16
+
+### Changed
+
+- Opening a post or its evidence panel now shows each embedded
+  `data:image` picture in document order, with the surrounding sentences
+  as text. The raw base64 string is no longer dumped into the popup.
+  Remote `http(s)` image URLs stay unloaded. After `make seed`, a post
+  whose body includes a data-URI image shows the picture; Extract Keyman
+  or Ask still runs OCR on that image for search.
+
 ## [0.86.0] - 2026-08-16
 
 ### Added

docs/image-content-schema.md

@@ -82,6 +82,18 @@ picture sat relative to the surrounding paragraphs."
 | `chunk_position` | `integer not null` | 0-based index among ALL of this document's chunks (text and image together) -- matches `Chunk.index` from `chunk_by_dom` |
 | primary key | `(source_document_id, chunk_position)` | one image slot per position per document |
 
+## Viewer contract (before persistence exists)
+
+The demo popup does not yet read these tables. It splits the live
+`post_body` the same way `extract_base64_images` does: each
+`data:image/...;base64,...` payload becomes an `<img>` at its original
+character offset, and the surrounding HTML is shown as text. A buyer who
+opens the post sees the picture that sat between the paragraphs, not the
+base64 wall. Remote `src="https://..."` tags are stripped, never fetched.
+OCR, caption, and tag search still require the vision client on extract /
+Ask (Li et al., 2023; Radford et al., 2021) and, in a real deployment,
+the tables below.
+
 ## Query shapes this supports
 
 - **"Find images whose extracted text or tags match a search query, then
@@ -105,3 +117,17 @@ picture sat relative to the surrounding paragraphs."
   ON CONFLICT DO NOTHING` before the provider call, or a short-lived
   lease row) to close that race; this schema documents the storage
   guarantee, not that concurrency control.
+
+## References
+
+Li, M., Lv, T., Chen, J., Cui, L., Lu, Y., Florencio, D., Zhang, C., Li, Z.,
+& Wei, F. (2023). TrOCR: Transformer-based optical character recognition
+with pre-trained models. *Proceedings of the AAAI Conference on Artificial
+Intelligence, 37*(11), 13094–13102. https://doi.org/10.1609/aaai.v37i11.26538
+
+Radford, A., Kim, J. W., Hallacy, C., Ramesh, A., Goh, G., Agarwal, S.,
+Sastry, G., Askell, A., Mishkin, P., Clark, J., Krueger, G., & Sutskever, I.
+(2021). Learning transferable visual models from natural language
+supervision. In M. Meila & T. Zhang (Eds.), *Proceedings of the 38th
+International Conference on Machine Learning* (pp. 8748–8763). PMLR.
+https://proceedings.mlr.press/v139/radford21a.html

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.86.0",
+  "version": "0.86.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/App.css

@@ -108,9 +108,36 @@
 }
 
 .post-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--post-body-gap);
+}
+
+.post-body-text {
+  margin: 0;
   white-space: pre-wrap;
 }
 
+.post-embedded-image {
+  margin: 0;
+  padding: var(--post-image-padding);
+  border: 1px solid var(--post-image-border);
+  border-radius: var(--post-image-radius);
+  background: var(--post-image-bg);
+}
+
+.post-embedded-image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.post-embedded-image figcaption {
+  margin-top: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--text);
+}
+
 .popup-placeholder {
   margin-top: 1.5rem;
   padding: 1rem;

frontend/src/App.test.tsx

@@ -63,6 +63,7 @@
     failedReportRun?: boolean;
     succeededTeppRun?: boolean;
     pendingTeppRun?: boolean;
+    postBody?: string;
   }) {
     const statusLabel: Record<string, string> = {
       open: "Open",
@@ -668,7 +669,7 @@
           jsonResponse({
             post_id: "post-1",
             post_title: "Public post",
-            post_body: "The full body text.",
+            post_body: options?.postBody ?? "The full body text.",
             voc_type_code: "voc",
             voc_type_label: "Voice of Customer",
             visibility_code: "public",
@@ -1088,6 +1089,23 @@
     await waitFor(() => expect(screen.getByText("The full body text.")).toBeInTheDocument());
   });
 
+  it("shows an embedded invoice image instead of the raw base64 string", async () => {
+    const tinyPng =
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+    stubBackend({
+      postBody: `<p>Quote attached.</p><img src="data:image/png;base64,${tinyPng}" alt=""><p>Please confirm.</p>`,
+    });
+    render(<App />);
+    await userEvent.click(await screen.findByRole("button", { name: "View post: Public post" }));
+
+    const image = await screen.findByRole("img", { name: /embedded image at character offset/i });
+    expect(image).toHaveAttribute("src", `data:image/png;base64,${tinyPng}`);
+    expect(screen.getByText("Quote attached.")).toBeInTheDocument();
+    expect(screen.getByText("Please confirm.")).toBeInTheDocument();
+    expect(screen.getByText(/Extract Keyman or ask a question/)).toBeInTheDocument();
+    expect(screen.queryByText(new RegExp(tinyPng))).not.toBeInTheDocument();
+  });
+
   it("fetches and renders the post list, then opens a detail popup on click", async () => {
     const fetchMock = stubBackend();
 
@@ -1781,7 +1799,7 @@
     expect(
       await screen.findByRole("heading", { name: "Lineage reconstruction · Pending · Demo Corp" }),
     ).toBeInTheDocument();
     expect(screen.getByText(/has not started yet/)).toBeInTheDocument();
     const postCall = fetchMock.mock.calls.find(
       (call) => String(call[0]).endsWith("/api/analysis-runs") && call[1]?.method === "POST",
     );

frontend/src/App.tsx

@@ -59,6 +59,7 @@ import {
   type VocEvidence,
 } from "./api";
 import { LineageDag } from "./LineageDag";
+import { PostBody } from "./PostBody";
 import { subgraphForPost } from "./lineageLayout";
 import "./App.css";
 
@@ -119,7 +120,7 @@ function EvidencePanel({
       {post && (
         <>
           <h4>{post.post_title}</h4>
-          <p className="post-body">{post.post_body}</p>
+          <PostBody body={post.post_body} />
         </>
       )}
     </div>
@@ -1245,7 +1246,7 @@ function PostDetailPopup({
               {post.visibility_label ?? post.visibility_code} &middot;{" "}
               {new Date(post.created_at).toLocaleString()}
             </p>
-            <p className="post-body">{post.post_body}</p>
+            <PostBody body={post.post_body} />
 
             <section className="popup-section">
               <h3>요약 (Summary)</h3>

frontend/src/PostBody.tsx

@@ -0,0 +1,33 @@
+import { splitPostBody, type PostBodySegment } from "./postBodyDisplay";
+
+function renderSegment(segment: PostBodySegment, index: number) {
+  switch (segment.kind) {
+    case "text":
+      return (
+        <p key={`post-body-text-${index}`} className="post-body-text">
+          {segment.text}
+        </p>
+      );
+    case "image":
+      return (
+        <figure key={`post-body-image-${index}`} className="post-embedded-image">
+          <img
+            src={segment.src}
+            alt={`Embedded image at character offset ${segment.position}`}
+          />
+          <figcaption>
+            Image from this post. Extract Keyman or ask a question to read text
+            inside it.
+          </figcaption>
+        </figure>
+      );
+    default: {
+      const _exhaustive: never = segment;
+      throw new Error(`unexpected post body segment: ${JSON.stringify(_exhaustive)}`);
+    }
+  }
+}
+
+export function PostBody({ body }: { body: string }) {
+  return <div className="post-body">{splitPostBody(body).map(renderSegment)}</div>;
+}

frontend/src/index.css

@@ -8,6 +8,11 @@
   --accent-bg: rgba(170, 59, 255, 0.1);
   --accent-border: rgba(170, 59, 255, 0.5);
   --social-bg: rgba(244, 243, 236, 0.5);
+  --post-body-gap: 0.75rem;
+  --post-image-padding: 0.75rem;
+  --post-image-radius: 8px;
+  --post-image-border: var(--border);
+  --post-image-bg: var(--code-bg);
   --shadow:
     rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 

frontend/src/postBodyDisplay.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { splitPostBody } from "./postBodyDisplay";
+
+/** 1x1 transparent PNG — the same synthetic fixture the Python vision tests use. */
+const TINY_PNG_B64 =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+
+describe("splitPostBody", () => {
+  it("leaves a plain-text post unchanged so existing popups keep their wording", () => {
+    expect(splitPostBody("The full body text.")).toEqual([
+      { kind: "text", text: "The full body text." },
+    ]);
+  });
+
+  it("keeps comparison operators that look like broken HTML", () => {
+    expect(splitPostBody("qty < 50 and price > 10")).toEqual([
+      { kind: "text", text: "qty < 50 and price > 10" },
+    ]);
+  });
+
+  it("renders a data-URI image as its own segment and never leaks the raw base64 into text", () => {
+    const html =
+      `<p>Quote attached.</p><img src="data:image/png;base64,${TINY_PNG_B64}" alt=""><p>Please confirm.</p>`;
+    const segments = splitPostBody(html);
+
+    expect(segments).toEqual([
+      { kind: "text", text: "Quote attached." },
+      {
+        kind: "image",
+        src: `data:image/png;base64,${TINY_PNG_B64}`,
+        mimeType: "image/png",
+        position: html.indexOf("<img"),
+      },
+      { kind: "text", text: "Please confirm." },
+    ]);
+    for (const segment of segments) {
+      if (segment.kind === "text") {
+        expect(segment.text).not.toContain(TINY_PNG_B64);
+        expect(segment.text).not.toContain("data:image");
+      }
+    }
+  });
+
+  it("keeps two images in document order when a paragraph sits between them", () => {
+    const html =
+      `<img src="data:image/png;base64,${TINY_PNG_B64}"><p>between</p>` +
+      `<img src="data:image/png;base64,${TINY_PNG_B64}">`;
+    const segments = splitPostBody(html);
+    expect(segments.map((segment) => segment.kind)).toEqual(["image", "text", "image"]);
+    expect(segments[1]).toEqual({ kind: "text", text: "between" });
+    expect(segments[0]?.kind === "image" && segments[0].position).toBe(0);
+    expect(segments[2]?.kind === "image" && segments[2].position).toBeGreaterThan(0);
+  });
+
+  it("tells the operator to re-export when the base64 payload is not decodable", () => {
+    const html = '<img src="data:image/png;base64,A">';
+    expect(splitPostBody(html)).toEqual([
+      {
+        kind: "text",
+        text: "Embedded image could not be decoded. Re-export the source post and open it again.",
+      },
+    ]);
+  });
+
+  it("does not turn a remote http img into a loaded image", () => {
+    const html = '<p>See</p><img src="https://example.test/invoice.png"><p>end</p>';
+    const segments = splitPostBody(html);
+    expect(segments.every((segment) => segment.kind === "text")).toBe(true);
+    expect(segments.map((segment) => (segment.kind === "text" ? segment.text : "")).join(" ")).toContain(
+      "See",
+    );
+    expect(JSON.stringify(segments)).not.toContain("https://example.test");
+  });
+});

frontend/src/postBodyDisplay.ts

@@ -0,0 +1,72 @@
+/**
+ * Split a raw `post_body` into text and in-place data-URI images.
+ *
+ * The popup used to dump the source string, so a buyer who opened a post
+ * with an embedded invoice saw a base64 wall instead of the picture.
+ * Only `data:image/...;base64,...` payloads are turned into images —
+ * remote `http(s)` img tags are stripped, never fetched.
+ */
+
+export type PostBodySegment =
+  | { kind: "text"; text: string }
+  | { kind: "image"; src: string; mimeType: string; position: number };
+
+const DATA_URI_IMG =
+  /<img\b[^>]*\bsrc\s*=\s*["']data:(image\/[a-zA-Z0-9.+-]+);base64,([A-Za-z0-9+/=\s]+)["'][^>]*>/gi;
+
+const HTML_TAG = /<\/?[a-zA-Z][^>]*>/g;
+
+const UNDECODEABLE_IMAGE =
+  "Embedded image could not be decoded. Re-export the source post and open it again.";
+
+function stripHtmlTags(text: string): string {
+  return text.replace(HTML_TAG, " ").replace(/\s+/g, " ").trim();
+}
+
+function isDecodableBase64(raw: string): boolean {
+  if (raw.length === 0) {
+    return false;
+  }
+  try {
+    atob(raw);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function pushText(segments: PostBodySegment[], raw: string): void {
+  const text = stripHtmlTags(raw);
+  if (text) {
+    segments.push({ kind: "text", text });
+  }
+}
+
+export function splitPostBody(body: string): PostBodySegment[] {
+  const segments: PostBodySegment[] = [];
+  const pattern = new RegExp(DATA_URI_IMG.source, "gi");
+  let lastIndex = 0;
+  let match = pattern.exec(body);
+  while (match !== null) {
+    pushText(segments, body.slice(lastIndex, match.index));
+    const mimeType = match[1];
+    const rawB64 = match[2].replace(/\s+/g, "");
+    if (isDecodableBase64(rawB64)) {
+      segments.push({
+        kind: "image",
+        src: `data:${mimeType};base64,${rawB64}`,
+        mimeType,
+        position: match.index,
+      });
+    } else {
+      segments.push({ kind: "text", text: UNDECODEABLE_IMAGE });
+    }
+    lastIndex = match.index + match[0].length;
+    match = pattern.exec(body);
+  }
+  pushText(segments, body.slice(lastIndex));
+  if (segments.length === 0) {
+    return [{ kind: "text", text: body }];
+  }
+  return segments;
+}

lineageweave/__init__.py

@@ -55,4 +55,4 @@
     "sentence_excerpts",
 ]
 
-__version__ = "0.86.0"
+__version__ = "0.86.1"

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "lineageweave"
-version = "0.86.0"
+version = "0.86.1"
 description = "Reconstructs git-branch-style lineage DAGs from scattered short records using multi-channel score fusion and LLM adjudication."
 readme = "README.md"
 license = { text = "MIT" }