@plannotator/ui 0.52.1 → 0.53.0

package/components/InlineMarkdown.tsx

@@ -7,11 +7,14 @@ import { useFenceTheme } from "../hooks/useFenceTheme";
 import { transformPlainText } from "../utils/inlineTransforms";
 import { hasLinkedDocExtension } from "../utils/markdownExtensions";
 import { getImageSrc } from "./ImageThumbnail";
+import { UNAVAILABLE_IMAGE_CLASS, useImageResolver } from "./ImageResolverContext";
 import { useCodePathValidation, type CodePathValidationContextValue } from "./CodePathValidationContext";
+import { isLocalLinkTarget, isNewTabClick, useLocalLinkResolver } from "./LocalLinkContext";
 import type { ValidationEntry } from "../hooks/useValidatedCodePaths";
 import { CodeFilePicker } from "./CodeFilePicker";
 import { normalizeMathTex, renderMathToHtml } from "../utils/math";
 import { useMathRenderer } from "../hooks/useMathRenderer";
+import { HostTitle } from "./HostTitle";
 
 export interface DocPreviewResult {
   contents?: string;
@@ -471,6 +474,35 @@ function emitPlainTextWithBareUrls(
   }
 }
 
+/** An image a host resolver chose; a load failure shows the placeholder. */
+const HostResolvedImage: React.FC<{
+  src: string;
+  alt: string;
+  onImageClick?: (src: string, alt: string) => void;
+}> = ({ src, alt, onImageClick }) => {
+  const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  if (failedSrc === src) {
+    return (
+      <span className={UNAVAILABLE_IMAGE_CLASS} title="Image could not be loaded" data-image-unavailable="">
+        {alt || 'Image'}
+      </span>
+    );
+  }
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className="max-w-full rounded my-2 cursor-zoom-in"
+      loading="lazy"
+      onError={() => setFailedSrc(src)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onImageClick?.(src, alt);
+      }}
+    />
+  );
+};
+
 /**
  * Scanner that walks a text string and emits React nodes for inline markdown:
  * emphasis (**bold**, *italic*, _italic_, ***both***), `code`, ~~strikethrough~~,
@@ -508,6 +540,8 @@ export const InlineMarkdown: React.FC<{
   repoHost?: string;
 }> = ({ text, onOpenLinkedDoc, resolveLinkedDoc, onOpenCodeFile, onNavigateAnchor, imageBaseDir, onImageClick, githubRepo, repoHost }) => {
   const validation = useCodePathValidation();
+  const resolveLocalLink = useLocalLinkResolver();
+  const resolveImage = useImageResolver();
   const refLinks = forgeRefLinks({ display: githubRepo, host: repoHost });
   const parts: React.ReactNode[] = [];
   let remaining = text;
@@ -966,21 +1000,47 @@ export const InlineMarkdown: React.FC<{
     if (match) {
       const alt = match[1];
       const src = match[2];
-      const imgSrc = /^(https?:\/\/|data:|blob:)/i.test(src)
-        ? src
-        : getImageSrc(src, imageBaseDir);
+      // A host's resolver (RenderedMarkdown `resolveImage`) decides first;
+      // null from it, or no resolver, keeps the default resolution.
+      const resolvedImage = resolveImage ? resolveImage(src) : null;
+      if (resolvedImage?.kind === 'unavailable') {
+        parts.push(
+          <span
+            key={key++}
+            className={UNAVAILABLE_IMAGE_CLASS}
+            title={resolvedImage.title}
+            data-image-unavailable=""
+          >
+            {alt || 'Image'}
+          </span>,
+        );
+        remaining = remaining.slice(match[0].length);
+        previousChar = match[0][match[0].length - 1] || previousChar;
+        continue;
+      }
+      const imgSrc = resolvedImage?.kind === 'src'
+        ? resolvedImage.src
+        : /^(https?:\/\/|data:|blob:)/i.test(src)
+          ? src
+          : getImageSrc(src, imageBaseDir);
       parts.push(
-        <img
-          key={key++}
-          src={imgSrc}
-          alt={alt}
-          className="max-w-full rounded my-2 cursor-zoom-in"
-          loading="lazy"
-          onClick={(e) => {
-            e.stopPropagation();
-            onImageClick?.(imgSrc, alt);
-          }}
-        />,
+        resolveImage ? (
+          // With a host resolver, an image that fails to load becomes the
+          // same placeholder instead of a broken-image icon.
+          <HostResolvedImage key={key++} src={imgSrc} alt={alt} onImageClick={onImageClick} />
+        ) : (
+          <img
+            key={key++}
+            src={imgSrc}
+            alt={alt}
+            className="max-w-full rounded my-2 cursor-zoom-in"
+            loading="lazy"
+            onClick={(e) => {
+              e.stopPropagation();
+              onImageClick?.(imgSrc, alt);
+            }}
+          />
+        ),
       );
       remaining = remaining.slice(match[0].length);
       previousChar = match[0][match[0].length - 1] || previousChar;
@@ -1043,8 +1103,56 @@ export const InlineMarkdown: React.FC<{
       const linkedDocPath = isLocalDoc ? linkUrl.replace(/#.*$/, '') : linkUrl;
       const codeFilePath = isCodeFile ? linkUrl.replace(/#.*$/, '') : linkUrl;
       const isInPageAnchor = safeLinkUrl.startsWith('#');
+      // A host's resolver (Viewer `resolveLocalLink`) decides local paths
+      // first; null from it, or no resolver, keeps the branches below.
+      const localLink = resolveLocalLink && isLocalLinkTarget(linkUrl) ? resolveLocalLink(linkUrl) : null;
 
-      if (isInPageAnchor) {
+      if (localLink?.kind === 'open') {
+        const openLink = localLink.open;
+        const hostHref = localLink.href;
+        parts.push(
+          <HostTitle key={key++} title={localLink.title}>
+          <a
+            href={hostHref ?? safeLinkUrl}
+            onClick={(e) => {
+              // With the host's own address, a new-tab click goes there.
+              if (hostHref && isNewTabClick(e)) return;
+              e.preventDefault();
+              e.stopPropagation();
+              openLink();
+            }}
+            // Without it, a middle click would open the path on the host's own origin.
+            onAuxClick={hostHref ? undefined : (e) => e.preventDefault()}
+            className="text-primary underline underline-offset-2 hover:text-primary/80 inline-flex items-center gap-1 cursor-pointer"
+            data-local-link="open"
+          >
+            {linkText}
+            <svg
+              className="w-3 h-3 opacity-50 flex-shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+              />
+            </svg>
+          </a>
+          </HostTitle>,
+        );
+      } else if (localLink?.kind === 'unavailable') {
+        parts.push(
+          <HostTitle key={key++} title={localLink.title}>
+            <span className="text-muted-foreground underline decoration-dotted underline-offset-2" data-local-link="unavailable">
+              {linkText}
+            </span>
+          </HostTitle>,
+        );
+      } else if (isInPageAnchor) {
         parts.push(
           <a
             key={key++}

package/components/LocalLinkContext.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext } from "react";
+
+/**
+ * What a host makes of a link to a local path (`[the mock](mock.html)`):
+ *
+ * - `open`: draw a link (Enter and a click call `open`, the browser never
+ *   follows the href). `title` is its tooltip. `href`, when given, replaces
+ *   the link's own target as its href, so "Open in new tab", a modified
+ *   click (Cmd/Ctrl/Shift, middle button), drag and copy use it: a host's
+ *   own address for the same thing. Without it, a modified click also calls
+ *   `open` and the middle button does nothing.
+ * - `unavailable`: draw the link text as inert text with `title` as its
+ *   tooltip: no href, so nothing is fetched or navigated.
+ * - `null` from the resolver: the renderer's default for that link.
+ */
+export type LocalLinkResolution =
+  | { kind: "open"; open: () => void; title?: string; href?: string }
+  | { kind: "unavailable"; title: string };
+
+/** Called with the link target as written (fragment and query included). */
+export type LocalLinkResolver = (href: string) => LocalLinkResolution | null;
+
+/**
+ * Provided by `Viewer` from its optional `resolveLocalLink` prop. Absent
+ * (null), every link renders exactly as it always has.
+ */
+export const LocalLinkContext = createContext<LocalLinkResolver | null>(null);
+
+export function useLocalLinkResolver(): LocalLinkResolver | null {
+  return useContext(LocalLinkContext);
+}
+
+/** A click the browser would open in a new tab or window: Cmd/Ctrl/Shift, or not the main button. */
+export function isNewTabClick(event: { metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; button: number }): boolean {
+  return event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0;
+}
+
+/**
+ * Whether a link target names a local path a host resolver is asked about:
+ * not an in-page `#anchor`, not protocol-relative (`//host`), and no URL
+ * scheme (`https:`, `mailto:`, `file:` …). A Windows drive path (`C:\x`,
+ * `C:/x`) is a path.
+ */
+export function isLocalLinkTarget(href: string): boolean {
+  const target = href.trim();
+  if (target === "" || target.startsWith("#") || target.startsWith("//")) return false;
+  if (/^[a-z]:[\\/]/i.test(target)) return true;
+  return !/^[a-z][a-z0-9+.-]*:/i.test(target);
+}

package/components/MenuVersionSection.tsx

@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
-import { TextShimmer } from './TextShimmer';
 import type { UpdateInfo } from '../hooks/useUpdateCheck';
 import type { Origin } from '@plannotator/core/agents';
 import { isWindows } from '../utils/platform';
 import { copyTextToClipboard } from '../utils/clipboard';
+import { requestUpdateNow } from '../utils/updateNotice';
 
-const PI_INSTALL_COMMAND = 'pi install npm:@plannotator/pi-extension';
-
-function getInstallCommand(origin?: Origin | null, isWSL = false): string {
-  if (origin === 'pi') return PI_INSTALL_COMMAND;
+/** The command when the server sent none (an advert always carries one). */
+function fallbackCommand(origin?: Origin | null, isWSL = false): string {
+  if (origin === 'pi') return 'pi update --extensions';
   return isWindows && !isWSL
-    ? 'powershell -c "irm https://plannotator.ai/install.ps1 | iex"'
+    ? 'irm https://plannotator.ai/install.ps1 | iex'
     : 'curl -fsSL https://plannotator.ai/install.sh | bash';
 }
 
@@ -22,6 +21,12 @@ interface MenuVersionSectionProps {
   closeMenu: () => void;
 }
 
+/**
+ * The Options menu's version section: the running version and, when the
+ * machine knows of a newer release, "X is available · What's new" with the
+ * command for this host (remembered install flags included) and, for the
+ * binary the install script manages, Update now.
+ */
 export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
   appVersion,
   updateInfo,
@@ -30,19 +35,25 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
   closeMenu,
 }) => {
   const [copied, setCopied] = useState(false);
+  const [updating, setUpdating] = useState<'idle' | 'starting' | 'started' | string>('idle');
   const hasUpdate = !!updateInfo?.updateAvailable;
+  const command = updateInfo?.command ?? fallbackCommand(origin, isWSL);
 
   const handleCopy = async () => {
-    if (await copyTextToClipboard(getInstallCommand(origin, isWSL))) {
+    if (await copyTextToClipboard(command)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } else {
-      console.error('Failed to copy');
     }
   };
 
+  const handleUpdate = async () => {
+    setUpdating('starting');
+    const result = await requestUpdateNow();
+    setUpdating('error' in result ? result.error : 'started');
+  };
+
   return (
-    <div className="px-3 py-2 space-y-2">
+    <div className="px-3 py-2 space-y-2" data-menu-version="">
       <div className="flex items-center justify-between gap-3">
         <a
           href="https://github.com/backnotprop/plannotator"
@@ -59,6 +70,12 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
       </div>
       <div className="flex flex-col items-start gap-1 text-[11px]">
         <span className="flex items-center gap-1.5">
+          {hasUpdate && (
+            <>
+              <span className="font-medium text-foreground">{updateInfo!.latestVersion} is available</span>
+              <span className="text-muted-foreground/40">·</span>
+            </>
+          )}
           <a
             href={hasUpdate ? updateInfo!.releaseUrl : 'https://github.com/backnotprop/plannotator/releases'}
             target="_blank"
@@ -66,24 +83,33 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
             onClick={closeMenu}
             className="text-muted-foreground hover:text-foreground transition-colors"
           >
-            Release notes
+            {hasUpdate ? "What's new" : 'Release notes'}
           </a>
-          {hasUpdate && (
-            <>
-              <span className="text-muted-foreground/40">·</span>
-              <TextShimmer className="text-[10px] font-medium" duration={2.5} spread={1.5}>
-                New update available!
-              </TextShimmer>
-            </>
-          )}
         </span>
         {hasUpdate && (
-          <button
-            onClick={handleCopy}
-            className="w-full mt-1 px-2.5 py-1.5 rounded-md text-[11px] font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
-          >
-            {copied ? 'Copied!' : 'Copy update command'}
-          </button>
+          <>
+            <div className="w-full mt-1 flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1">
+              <code className="flex-1 min-w-0 overflow-x-auto whitespace-nowrap font-mono text-[10px] text-foreground">{command}</code>
+              <button
+                onClick={handleCopy}
+                className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium border border-border hover:bg-muted transition-colors"
+              >
+                {copied ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+            {updateInfo!.action === 'script' && (
+              <button
+                onClick={handleUpdate}
+                disabled={updating === 'starting' || updating === 'started'}
+                className="w-full mt-1 px-2.5 py-1.5 rounded-md text-[11px] font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-60"
+              >
+                {updating === 'started' ? `Updating to ${updateInfo!.latestVersion}…` : updating === 'starting' ? 'Starting…' : 'Update now'}
+              </button>
+            )}
+            {updating !== 'idle' && updating !== 'starting' && updating !== 'started' && (
+              <span className="text-[10px] text-destructive">{updating}</span>
+            )}
+          </>
         )}
       </div>
     </div>

package/components/OpenInAppButton.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ChevronDown, Check, Copy, MoreHorizontal } from 'lucide-react';
 import { AppIcon } from './icons/AppIcon';
-import { getLastOpenInApp, setLastOpenInApp } from '../utils/storage';
+import { useOpenInApps, useRememberedOpenInApp } from '../hooks/useOpenInApps';
 import { copyTextToClipboard } from '../utils/clipboard';
-import type { OpenInKind } from '@plannotator/core/open-in-apps';
+import { noteServerSessionMismatch, withServerSession } from '../utils/serverSession';
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -27,13 +27,6 @@ import {
  * nothing when there is neither an app to open nor a diff to copy.
  */
 
-interface DetectedApp {
-  id: string;
-  label: string;
-  kind: OpenInKind;
-  icon: string;
-}
-
 interface OpenInAppButtonProps {
   filePath: string | null | undefined;
   base?: string | null;
@@ -50,28 +43,9 @@ interface OpenInAppButtonProps {
 }
 
 // The host app catalog is static for the session, but the all-files view
-// renders one OpenInAppButton per file — so fetch /api/open-in/apps once and
-// share the promise across every instance instead of N identical requests.
-interface OpenInAppsResponse {
-  available: boolean;
-  apps: DetectedApp[];
-}
-let openInAppsPromise: Promise<OpenInAppsResponse> | null = null;
-function loadOpenInApps(): Promise<OpenInAppsResponse> {
-  if (!openInAppsPromise) {
-    openInAppsPromise = fetch('/api/open-in/apps')
-      .then((r) => r.json())
-      .then((data: OpenInAppsResponse) => ({
-        available: !!data.available,
-        apps: Array.isArray(data.apps) ? data.apps : [],
-      }))
-      .catch(() => {
-        openInAppsPromise = null; // don't memoize failure — let the next mount retry
-        return { available: false, apps: [] };
-      });
-  }
-  return openInAppsPromise;
-}
+// renders one OpenInAppButton per file — so /api/open-in/apps is fetched once
+// and the promise shared across every instance (useOpenInApps).
+const OPEN_IN_APPS_URL = '/api/open-in/apps';
 
 export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
   filePath,
@@ -81,26 +55,17 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
   showLabel = false,
   disabled = false,
 }) => {
-  const [apps, setApps] = useState<DetectedApp[] | null>(null);
-  const [available, setAvailable] = useState<boolean | null>(null);
-  const [currentId, setCurrentId] = useState<string>(() => getLastOpenInApp());
+  const detected = useOpenInApps(OPEN_IN_APPS_URL);
+  const apps = detected?.apps ?? null;
+  const available = detected ? detected.available : null;
+  const [storedId, rememberApp] = useRememberedOpenInApp();
+  // Nothing picked yet: the file manager, as before.
+  const currentId = storedId ?? 'reveal';
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const errorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(() => {
-    let cancelled = false;
-    loadOpenInApps().then((data) => {
-      if (cancelled) return;
-      setAvailable(data.available);
-      setApps(data.apps);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
   useEffect(() => {
     return () => {
       if (errorTimer.current) clearTimeout(errorTimer.current);
@@ -141,8 +106,13 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
       const res = await fetch('/api/open-in', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ filePath, base: base ?? null, appId }),
+        // The stale-tab guard: a server that took over this port refuses it.
+        body: JSON.stringify(withServerSession({ filePath, base: base ?? null, appId })),
       });
+      if (await noteServerSessionMismatch(res)) {
+        flashError('This review was replaced. Reload the page.');
+        return;
+      }
       const data = (await res.json().catch(() => null)) as
         | { ok: boolean; error?: string }
         | null;
@@ -157,8 +127,7 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
   };
 
   const selectApp = (appId: string) => {
-    setLastOpenInApp(appId);
-    setCurrentId(appId);
+    rememberApp(appId);
     setMenuOpen(false);
     void open(appId);
   };

package/components/PlanHeaderMenu.tsx

@@ -9,7 +9,6 @@ import { useTheme } from './ThemeProvider';
 import { THEME_MODES } from './themeModes';
 import { ReviewAgentsIcon } from './ReviewAgentsIcon';
 import { MenuVersionSection } from './MenuVersionSection';
-import { TextShimmer } from './TextShimmer';
 import type { UpdateInfo } from '../hooks/useUpdateCheck';
 import type { Origin } from '@plannotator/core/agents';
 
@@ -105,13 +104,8 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
           aria-expanded={isOpen}
         >
           {isOpen ? <CloseIcon /> : <MenuIcon />}
-          {showUpdateDot ? (
-            <TextShimmer className="hidden md:inline text-xs font-medium" duration={2.5} spread={1.5}>
-              Options
-            </TextShimmer>
-          ) : (
-            <span className="hidden md:inline">Options</span>
-          )}
+          {/* The dot says an update is out; the label never moves (no shimmer). */}
+          <span className="hidden md:inline">Options</span>
           {showUpdateDot && (
             <span className="absolute top-0.5 right-0.5 md:-top-0.5 md:-right-0.5 w-2 h-2 rounded-full bg-primary ring-2 ring-background" />
           )}

package/components/ProviderIcons.tsx

@@ -14,11 +14,17 @@ export const CodexIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h
   <img src={codexPng} alt="" className={`${className} rounded-sm`} />
 );
 
-/** Pi icon — extracted from apps/marketing/public/assets/icon-pi.svg */
+/**
+ * Pi icon: the pi.dev logo (https://pi.dev/logo.svg), the same file as
+ * apps/marketing/public/assets/icon-pi.svg. It keeps its own three colours in
+ * every theme; the viewBox crops pi.dev's 800-unit canvas to the mark plus an
+ * even margin so it sits level with the other marks.
+ */
 export const PiIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" className={className}>
-    <path fill="currentColor" fillRule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/>
-    <path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="130 130 540 540" className={className}>
+    <path fill="#F09082" d="M165.29 165.29H517.36V400H400V282.65H165.29Z"/>
+    <path fill="#4D9ABF" d="M165.29 282.65H282.65V400H400V517.36H282.65V634.72H165.29Z"/>
+    <path fill="#F1BE58" d="M517.36 400H634.72V634.72H517.36Z"/>
   </svg>
 );
 

package/components/RenderedMarkdown.tsx

@@ -1,6 +1,9 @@
 import React, { useMemo } from 'react';
 import { parseMarkdownToBlocks, groupBlocks, computeListIndices } from '../utils/parser';
 import { BlockRenderer } from './BlockRenderer';
+import { LocalLinkContext, type LocalLinkResolver } from './LocalLinkContext';
+import { ImageResolverContext, type ImageResolver } from './ImageResolverContext';
+import { buildHeadingSlugMap } from '../utils/slugify';
 
 /**
  * Full markdown renderer for surfaces outside the plan editor (e.g. the PR
@@ -19,6 +22,22 @@ export interface RenderedMarkdownProps {
   onOpenCodeFile?: (path: string) => void;
   githubRepo?: string;
   repoHost?: string;
+  /**
+   * Optional: decides what a link to a local path does (open it in the host,
+   * or render it inert). Same contract as Viewer's `resolveLocalLink`.
+   * Absent, links render exactly as before.
+   */
+  resolveLocalLink?: LocalLinkResolver;
+  /**
+   * Optional: decides where an image loads from, or that it is not shown.
+   * Absent, images resolve exactly as before.
+   */
+  resolveImage?: ImageResolver;
+  /**
+   * Optional: give headings slug ids (Viewer's slugger, GitHub dedup), so a
+   * host can scroll to `#section` links. Absent/false, headings carry no id.
+   */
+  headingAnchors?: boolean;
 }
 
 export const RenderedMarkdown: React.FC<RenderedMarkdownProps> = ({
@@ -29,11 +48,19 @@ export const RenderedMarkdown: React.FC<RenderedMarkdownProps> = ({
   onOpenCodeFile,
   githubRepo,
   repoHost,
+  resolveLocalLink,
+  resolveImage,
+  headingAnchors = false,
 }) => {
-  const groups = useMemo(() => groupBlocks(parseMarkdownToBlocks(markdown)), [markdown]);
+  const blocks = useMemo(() => parseMarkdownToBlocks(markdown), [markdown]);
+  const groups = useMemo(() => groupBlocks(blocks), [blocks]);
+  const headingSlugMap = useMemo(
+    () => (headingAnchors ? buildHeadingSlugMap(blocks) : null),
+    [blocks, headingAnchors],
+  );
   const cb = { onImageClick, onOpenLinkedDoc, onOpenCodeFile, githubRepo, repoHost };
 
-  return (
+  let body = (
     <div className={className}>
       {groups.map((group) =>
         group.type === 'list-group' ? (
@@ -42,15 +69,24 @@ export const RenderedMarkdown: React.FC<RenderedMarkdownProps> = ({
             return (
               <div key={group.key}>
                 {group.blocks.map((block, i) => (
-                  <BlockRenderer key={block.id} block={block} orderedIndex={indices[i]} {...cb} />
+                  <BlockRenderer key={block.id} block={block} orderedIndex={indices[i]} headingAnchorId={headingSlugMap?.get(block.id)} {...cb} />
                 ))}
               </div>
             );
           })()
         ) : (
-          <BlockRenderer key={group.block.id} block={group.block} {...cb} />
+          <BlockRenderer key={group.block.id} block={group.block} headingAnchorId={headingSlugMap?.get(group.block.id)} {...cb} />
         ),
       )}
     </div>
   );
+  // Provide only what the caller passed, so an enclosing provider still
+  // applies when a prop is absent.
+  if (resolveImage) {
+    body = <ImageResolverContext.Provider value={resolveImage}>{body}</ImageResolverContext.Provider>;
+  }
+  if (resolveLocalLink) {
+    body = <LocalLinkContext.Provider value={resolveLocalLink}>{body}</LocalLinkContext.Provider>;
+  }
+  return body;
 };