feat(markdown): KB/process render + working in-document anchor links

KB/process content was shown via a bare unsanitized ReactMarkdown in the
ops view dialog (the /ops/[id] route is the editor, not a view). Route
it through the shared SafeMarkdown instead. New dependency-free
lib/markdown-anchors.ts (heading-text flatten, GitHub-ish slug,
per-render dedupe, in-doc href test; unit-tested) is wired into both
SafeMarkdown and MarkdownBody so headings get stable ids and a
[link](#heading) resolves. In-document links no longer force a new tab,
which previously broke the anchor jump for policies/proposals too.
rehype-slug was not added (no offline install); the helper is equivalent
and tested.

components/markdown.tsx

@@ -1,5 +1,6 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import { makeHeadingSlugger, isInDocumentHref } from '@/lib/markdown-anchors'
 
 /**
  * Server-renderable markdown component for governance text (proposals,
@@ -15,28 +16,38 @@ export function MarkdownBody({ content, className = '' }: { content: string | nu
     return null
   }
 
+  const slug = makeHeadingSlugger()
+
   return (
     <div className={`markdown-body font-sans text-sm text-foreground/90 ${className}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
-          h1: ({ children }) => <h1 className="text-xl font-semibold text-foreground mt-4 mb-2">{children}</h1>,
-          h2: ({ children }) => <h2 className="text-lg font-semibold text-foreground mt-4 mb-2">{children}</h2>,
-          h3: ({ children }) => <h3 className="text-base font-semibold text-foreground mt-3 mb-1">{children}</h3>,
+          h1: ({ children }) => <h1 id={slug(children)} className="text-xl font-semibold text-foreground mt-4 mb-2">{children}</h1>,
+          h2: ({ children }) => <h2 id={slug(children)} className="text-lg font-semibold text-foreground mt-4 mb-2">{children}</h2>,
+          h3: ({ children }) => <h3 id={slug(children)} className="text-base font-semibold text-foreground mt-3 mb-1">{children}</h3>,
+          h4: ({ children }) => <h4 id={slug(children)} className="text-sm font-semibold text-foreground mt-3 mb-1">{children}</h4>,
+          h5: ({ children }) => <h5 id={slug(children)} className="text-sm font-semibold text-foreground/90 mt-2 mb-1">{children}</h5>,
+          h6: ({ children }) => <h6 id={slug(children)} className="text-xs font-semibold text-muted-foreground mt-2 mb-1">{children}</h6>,
           p: ({ children }) => <p className="my-2 leading-relaxed">{children}</p>,
           ul: ({ children }) => <ul className="list-disc list-outside pl-5 my-2 space-y-1">{children}</ul>,
           ol: ({ children }) => <ol className="list-decimal list-outside pl-5 my-2 space-y-1">{children}</ol>,
           li: ({ children }) => <li className="leading-relaxed">{children}</li>,
-          a: ({ href, children }) => (
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary underline hover:no-underline"
-            >
-              {children}
-            </a>
-          ),
+          a: ({ href, children }) =>
+            isInDocumentHref(href) ? (
+              <a href={href} className="text-primary underline hover:no-underline">
+                {children}
+              </a>
+            ) : (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary underline hover:no-underline"
+              >
+                {children}
+              </a>
+            ),
           code: ({ children }) => (
             <code className="bg-muted px-1 py-0.5 rounded font-mono text-xs">{children}</code>
           ),

components/safe-markdown.tsx

@@ -1,9 +1,11 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
+import { makeHeadingSlugger, isInDocumentHref } from '@/lib/markdown-anchors'
 
 // Renders admin-authored markdown that MAY contain a constrained subset of raw
 // HTML. rehype-raw parses the HTML; rehype-sanitize then strips anything
@@ -27,11 +29,35 @@ const schema = {
 }
 
 export function SafeMarkdown({ children, className }: { children: string; className?: string }) {
+  // Per-render so heading ids are stable and de-duplicated within this doc.
+  const slug = makeHeadingSlugger()
+  const heading = (Tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') =>
+    function H({ children: c }: { children?: ReactNode }) {
+      return <Tag id={slug(c)}>{c}</Tag>
+    }
   return (
     <div className={`prose prose-sm prose-neutral dark:prose-invert max-w-none break-words ${className ?? ''}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeRaw, [rehypeSanitize, schema]]}
+        components={{
+          h1: heading('h1'),
+          h2: heading('h2'),
+          h3: heading('h3'),
+          h4: heading('h4'),
+          h5: heading('h5'),
+          h6: heading('h6'),
+          // In-document links (#section) must stay in the page so the anchor
+          // jump works; everything else opens safely in a new tab.
+          a: ({ href, children: c }) =>
+            isInDocumentHref(href) ? (
+              <a href={href}>{c}</a>
+            ) : (
+              <a href={href} target="_blank" rel="noopener noreferrer">
+                {c}
+              </a>
+            ),
+        }}
       >
         {children}
       </ReactMarkdown>