feat: mindmap image thumbnails, equal-width layout, click-to-zoom, editor heading hierarchy.

- Mindmap nodes can now embed same-origin images (`![alt](/api/media/...)`)
  parsed from headings or trailing paragraphs; cross-origin / data: / scheme
  URLs are rejected.
- Layout: every node at the same depth shares a width (per-depth equalization
  in addition to per-parent height alignment), so blocks on the same level
  read as visually flush regardless of their parent.
- Lightbox: clicking a thumbnail in the mindmap or any image in the markdown
  viewer opens a full-screen overlay; click outside or press Esc to close.
  CSS class is shared (`image-lightbox-*`).
- Editor: h1-h6 now have distinct sizes, weights, and a leading `#` / `##`
  / ... badge so heading depth is unambiguous even between consecutive
  levels.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: PttCodingMan

frontend/src/components/MindmapView.jsx

@@ -119,6 +119,7 @@ function ThemeDropdown({ value, onChange }) {
 export default function MindmapView({ content, title }) {
   const mindmapTheme = useMindmapTheme((s) => s.theme)
   const setMindmapTheme = useMindmapTheme((s) => s.setTheme)
+  const [zoomed, setZoomed] = useState(null)
 
   const parsed = useMemo(() => {
     try {
@@ -134,6 +135,15 @@ export default function MindmapView({ content, title }) {
     [parsed.tree],
   )
 
+  useEffect(() => {
+    if (!zoomed) return
+    const onKey = (e) => {
+      if (e.key === 'Escape') setZoomed(null)
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [zoomed])
+
   if (parsed.error) {
     return (
       <div className="p-4 text-amber-800 bg-amber-50 border border-amber-200 rounded-lg">
@@ -170,6 +180,21 @@ export default function MindmapView({ content, title }) {
         <g className="mindmap-nodes" fontFamily={LAYOUT.FONT_FAMILY} fontSize={LAYOUT.FONT_SIZE}>
           {layout.nodes.map((n) => {
             const s = levelStyle(palette, n.depth)
+            const hasImage = !!n.image
+            const hasText = !!n.text
+            // Layout image + text within the node's local frame (origin = rect
+            // center). Image-and-text: a left-anchored block centered in the
+            // rect, image on the left. Image-only: image centered. Text-only:
+            // text centered (matches the legacy behavior).
+            let imgX = 0
+            let textX = 0
+            if (hasImage && hasText) {
+              const contentW = LAYOUT.IMG_SIZE + LAYOUT.IMG_GAP + n.textW
+              imgX = -contentW / 2
+              textX = imgX + LAYOUT.IMG_SIZE + LAYOUT.IMG_GAP + n.textW / 2
+            } else if (hasImage) {
+              imgX = -LAYOUT.IMG_SIZE / 2
+            }
             return (
               <g key={n.id} transform={`translate(${n.x},${n.y})`}>
                 <rect
@@ -183,20 +208,55 @@ export default function MindmapView({ content, title }) {
                   stroke={s.stroke}
                   strokeWidth="1.5"
                 />
-                <text
-                  x="0"
-                  y="0"
-                  fill={s.text}
-                  textAnchor="middle"
-                  dominantBaseline="central"
-                >
-                  {n.text}
-                </text>
+                {hasImage && (
+                  <image
+                    href={n.image.src}
+                    x={imgX}
+                    y={-LAYOUT.IMG_SIZE / 2}
+                    width={LAYOUT.IMG_SIZE}
+                    height={LAYOUT.IMG_SIZE}
+                    preserveAspectRatio="xMidYMid meet"
+                    style={{ cursor: 'zoom-in' }}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setZoomed(n.image)
+                    }}
+                  >
+                    {n.image.alt ? <title>{n.image.alt}</title> : null}
+                  </image>
+                )}
+                {hasText && (
+                  <text
+                    x={textX}
+                    y="0"
+                    fill={s.text}
+                    textAnchor="middle"
+                    dominantBaseline="central"
+                  >
+                    {n.text}
+                  </text>
+                )}
               </g>
             )
           })}
         </g>
       </svg>
+      {zoomed && (
+        <div
+          className="image-lightbox-overlay"
+          onClick={() => setZoomed(null)}
+          role="dialog"
+          aria-modal="true"
+          aria-label={zoomed.alt || 'Image preview'}
+        >
+          <img
+            src={zoomed.src}
+            alt={zoomed.alt || ''}
+            className="image-lightbox-image"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
     </div>
   )
 }

frontend/src/components/MindmapView.test.jsx

@@ -66,6 +66,37 @@ describe('MindmapView', () => {
     expect(firstRect.getAttribute('fill')).toBe('var(--mindmap-lv0-fill)')
   })
 
+  it('renders an SVG <image> for nodes with a same-origin image', () => {
+    const md = `# Root\n\n## ![logo](/api/media/abc.png) Branded\n## Plain\n`
+    const { container } = render(<MindmapView content={md} title="" />)
+    const mindmap = container.querySelector('svg[role="img"]')
+    const images = mindmap.querySelectorAll('image')
+    expect(images.length).toBe(1)
+    const img = images[0]
+    // jsdom serializes the SVG `href` attribute as either `href` or `xlink:href`
+    // depending on React version; either is acceptable here.
+    expect(img.getAttribute('href') || img.getAttribute('xlink:href')).toBe(
+      '/api/media/abc.png',
+    )
+    expect(img.getAttribute('preserveAspectRatio')).toBe('xMidYMid meet')
+  })
+
+  it('omits the <image> element entirely when no image is parsed', () => {
+    const md = `# R\n\n## A\n`
+    const { container } = render(<MindmapView content={md} title="" />)
+    const mindmap = container.querySelector('svg[role="img"]')
+    expect(mindmap.querySelectorAll('image').length).toBe(0)
+  })
+
+  it('drops cross-origin image URLs but still renders the surrounding text', () => {
+    const md = `# R\n\n## ![bad](https://evil.example.com/x.png) Hello\n`
+    const { container } = render(<MindmapView content={md} title="" />)
+    const mindmap = container.querySelector('svg[role="img"]')
+    expect(mindmap.querySelectorAll('image').length).toBe(0)
+    const texts = [...mindmap.querySelectorAll('text')].map((t) => t.textContent)
+    expect(texts).toContain('Hello')
+  })
+
   it('persists a chosen palette to localStorage', () => {
     const md = `# R\n\n## A\n`
     render(<MindmapView content={md} title="" />)

frontend/src/components/Viewer/MarkdownViewer.jsx

@@ -73,6 +73,7 @@ export default function MarkdownViewer({
   const containerRef = useRef(null)
   const navigate = useNavigate()
   const [lightboxSvg, setLightboxSvg] = useState(null)
+  const [lightboxImg, setLightboxImg] = useState(null)
 
   // React 19 re-applies dangerouslySetInnerHTML on every re-render even when the
   // string is referentially equal, which wipes the Mermaid SVGs and transcluded
@@ -83,6 +84,18 @@ export default function MarkdownViewer({
     if (containerRef.current) containerRef.current.innerHTML = html
   }, [html])
 
+  useEffect(() => {
+    if (!lightboxSvg && !lightboxImg) return
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        setLightboxSvg(null)
+        setLightboxImg(null)
+      }
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [lightboxSvg, lightboxImg])
+
   // Extract h1-h3 headings for the TOC. Runs after DOM is populated.
   useEffect(() => {
     if (!onHeadings || !containerRef.current) return
@@ -106,6 +119,22 @@ export default function MarkdownViewer({
         return
       }
 
+      // Inline image click → open lightbox. Skip when the image is wrapped in
+      // a link (the link wins) or sits inside a draw.io / mermaid block (those
+      // have their own handlers right below).
+      if (
+        e.target.tagName === 'IMG' &&
+        !e.target.closest('a') &&
+        !e.target.closest('.drawio-embed') &&
+        !e.target.closest('[data-mermaid]')
+      ) {
+        const src = e.target.getAttribute('src')
+        if (src) {
+          setLightboxImg({ src, alt: e.target.getAttribute('alt') || '' })
+          return
+        }
+      }
+
       // Draw.io diagram click
       const diagram = e.target.closest('.drawio-embed')
       if (diagram) {
@@ -245,6 +274,22 @@ export default function MarkdownViewer({
           />
         </div>
       )}
+      {lightboxImg && (
+        <div
+          className="image-lightbox-overlay"
+          onClick={() => setLightboxImg(null)}
+          role="dialog"
+          aria-modal="true"
+          aria-label={lightboxImg.alt || 'Image preview'}
+        >
+          <img
+            src={lightboxImg.src}
+            alt={lightboxImg.alt}
+            className="image-lightbox-image"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
     </>
   )
 }

frontend/src/index.css

@@ -190,9 +190,67 @@ body {
   margin: 0.5em 0;
 }
 
-.milkdown .editor h1 { font-size: 2em; font-weight: 700; margin: 0.67em 0; }
-.milkdown .editor h2 { font-size: 1.5em; font-weight: 600; margin: 0.75em 0; }
-.milkdown .editor h3 { font-size: 1.25em; font-weight: 600; margin: 0.75em 0; }
+.milkdown .editor :is(h1, h2, h3, h4, h5, h6)::before {
+  display: inline-block;
+  margin-right: 0.5em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+  font-size: 0.7em;
+  vertical-align: 0.25em;
+  user-select: none;
+}
+.milkdown .editor h1 {
+  font-size: 2.2em;
+  font-weight: 800;
+  margin: 0.67em 0 0.5em;
+  padding-bottom: 0.2em;
+  border-bottom: 2px solid var(--color-border);
+  line-height: 1.2;
+}
+.milkdown .editor h1::before { content: "#"; }
+.milkdown .editor h2 {
+  font-size: 1.7em;
+  font-weight: 700;
+  margin: 1em 0 0.5em;
+  padding-bottom: 0.15em;
+  border-bottom: 1px solid var(--color-border);
+  line-height: 1.25;
+}
+.milkdown .editor h2::before { content: "##"; }
+.milkdown .editor h3 {
+  font-size: 1.4em;
+  font-weight: 700;
+  margin: 0.9em 0 0.4em;
+  line-height: 1.3;
+}
+.milkdown .editor h3::before { content: "###"; }
+.milkdown .editor h4 {
+  font-size: 1.18em;
+  font-weight: 700;
+  margin: 0.85em 0 0.35em;
+  line-height: 1.35;
+}
+.milkdown .editor h4::before { content: "####"; }
+.milkdown .editor h5 {
+  font-size: 1.05em;
+  font-weight: 700;
+  margin: 0.8em 0 0.3em;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+.milkdown .editor h5::before { content: "#####"; }
+.milkdown .editor h6 {
+  font-size: 0.95em;
+  font-weight: 700;
+  margin: 0.8em 0 0.3em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+.milkdown .editor h6::before { content: "######"; }
 
 .milkdown .editor ul {
   padding-left: 1.5em;
@@ -458,7 +516,8 @@ mark {
 .markdown-viewer code { background: var(--color-surface-hover); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
 .markdown-viewer pre { background: #1e293b; color: #e2e8f0; padding: 1em; border-radius: 8px; overflow-x: auto; }
 .markdown-viewer pre code { background: none; padding: 0; color: inherit; }
-.markdown-viewer img { max-width: 100%; border-radius: 8px; }
+.markdown-viewer img { max-width: 100%; border-radius: 8px; cursor: zoom-in; }
+.markdown-viewer a img { cursor: pointer; }
 .markdown-viewer a { color: var(--color-primary); text-decoration: underline; }
 .markdown-viewer table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
 .markdown-viewer th, .markdown-viewer td { border: 1px solid var(--color-border); padding: 0.5em 0.75em; }
@@ -607,6 +666,28 @@ mark {
   border-radius: 8px;
 }
 
+/* Image zoom lightbox (mindmap thumbnails + viewer images) */
+.image-lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+  padding: 2rem;
+}
+.image-lightbox-image {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  cursor: default;
+  background: white;
+}
+
 /* Draw.io zoom lightbox */
 .drawio-lightbox-overlay {
   position: fixed;