@plannotator/ui 0.45.1 → 0.46.0

package/components/InlineMarkdown.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { isCodeFilePath, isCodeFilePathStrict, CODE_PATH_BARE_REGEX, parseCodePath } from "@plannotator/core/code-file";
+import { forgeRefLinks } from "@plannotator/core/forge-refs";
 import { ensureHighlight, highlightToHtml } from "../utils/codeHighlight";
 import { useFenceTheme } from "../hooks/useFenceTheme";
 import { transformPlainText } from "../utils/inlineTransforms";
@@ -501,9 +502,13 @@ export const InlineMarkdown: React.FC<{
   onNavigateAnchor?: (hash: string) => void;
   imageBaseDir?: string;
   onImageClick?: (src: string, alt: string) => void;
+  /** Repo path (`owner/repo`, `group/sub/project`) bare `#123` / `@user` refs link into. */
   githubRepo?: string;
-}> = ({ text, onOpenLinkedDoc, resolveLinkedDoc, onOpenCodeFile, onNavigateAnchor, imageBaseDir, onImageClick, githubRepo }) => {
+  /** Host of that repo's git remote; picks the forge refs link to. Absent means github.com. */
+  repoHost?: string;
+}> = ({ text, onOpenLinkedDoc, resolveLinkedDoc, onOpenCodeFile, onNavigateAnchor, imageBaseDir, onImageClick, githubRepo, repoHost }) => {
   const validation = useCodePathValidation();
+  const refLinks = forgeRefLinks({ display: githubRepo, host: repoHost });
   const parts: React.ReactNode[] = [];
   let remaining = text;
   let key = 0;
@@ -672,6 +677,7 @@ export const InlineMarkdown: React.FC<{
             onOpenCodeFile={onOpenCodeFile}
             onNavigateAnchor={onNavigateAnchor}
             githubRepo={githubRepo}
+            repoHost={repoHost}
           />
         </del>,
       );
@@ -695,6 +701,7 @@ export const InlineMarkdown: React.FC<{
               onOpenCodeFile={onOpenCodeFile}
               onNavigateAnchor={onNavigateAnchor}
               githubRepo={githubRepo}
+              repoHost={repoHost}
             />
           </em>
         </strong>,
@@ -718,6 +725,7 @@ export const InlineMarkdown: React.FC<{
             onOpenCodeFile={onOpenCodeFile}
             onNavigateAnchor={onNavigateAnchor}
             githubRepo={githubRepo}
+            repoHost={repoHost}
           />
         </strong>,
       );
@@ -740,6 +748,7 @@ export const InlineMarkdown: React.FC<{
             onOpenCodeFile={onOpenCodeFile}
             onNavigateAnchor={onNavigateAnchor}
             githubRepo={githubRepo}
+            repoHost={repoHost}
           />
         </em>,
       );
@@ -763,6 +772,7 @@ export const InlineMarkdown: React.FC<{
             onOpenCodeFile={onOpenCodeFile}
             onNavigateAnchor={onNavigateAnchor}
             githubRepo={githubRepo}
+            repoHost={repoHost}
           />
         </em>,
       );
@@ -834,9 +844,7 @@ export const InlineMarkdown: React.FC<{
       match = remaining.match(/^#(\d+)(?!\w)/);
       if (match) {
         const num = match[1];
-        const href = githubRepo && githubRepo.includes('/')
-          ? `https://github.com/${githubRepo}/issues/${num}`
-          : null;
+        const href = refLinks?.issue(num) ?? null;
         const label = `#${num}`;
         parts.push(
           href ? (
@@ -864,9 +872,7 @@ export const InlineMarkdown: React.FC<{
       match = remaining.match(/^@([a-zA-Z][a-zA-Z0-9_-]{0,38})(?!\w)/);
       if (match) {
         const handle = match[1];
-        const href = githubRepo && githubRepo.includes('/')
-          ? `https://github.com/${handle}`
-          : null;
+        const href = refLinks?.user(handle) ?? null;
         const label = `@${handle}`;
         parts.push(
           href ? (
@@ -1140,6 +1146,7 @@ export const InlineMarkdown: React.FC<{
             onOpenCodeFile={onOpenCodeFile}
             onNavigateAnchor={onNavigateAnchor}
             githubRepo={githubRepo}
+            repoHost={repoHost}
             imageBaseDir={imageBaseDir}
             onImageClick={onImageClick}
           />,

package/components/RenderedMarkdown.tsx

@@ -18,6 +18,7 @@ export interface RenderedMarkdownProps {
   onOpenLinkedDoc?: (path: string) => void;
   onOpenCodeFile?: (path: string) => void;
   githubRepo?: string;
+  repoHost?: string;
 }
 
 export const RenderedMarkdown: React.FC<RenderedMarkdownProps> = ({
@@ -27,9 +28,10 @@ export const RenderedMarkdown: React.FC<RenderedMarkdownProps> = ({
   onOpenLinkedDoc,
   onOpenCodeFile,
   githubRepo,
+  repoHost,
 }) => {
   const groups = useMemo(() => groupBlocks(parseMarkdownToBlocks(markdown)), [markdown]);
-  const cb = { onImageClick, onOpenLinkedDoc, onOpenCodeFile, githubRepo };
+  const cb = { onImageClick, onOpenLinkedDoc, onOpenCodeFile, githubRepo, repoHost };
 
   return (
     <div className={className}>

package/components/Settings.tsx

@@ -87,6 +87,13 @@ interface SettingsProps {
   onIdentityChange?: (oldIdentity: string, newIdentity: string) => void;
   origin?: Origin | null;
   mode?: 'plan' | 'annotate' | 'review';
+  /**
+   * `mode="annotate"` only: offer the document tabs plan review has (Display,
+   * Saving, Labels, and the Obsidian / Bear / Octarine integrations) and hide
+   * the plan-only OpenCode agent-switch row. Plannotator's annotate app passes
+   * true; a host that omits it keeps the pre-parity annotate tab set.
+   */
+  annotateParity?: boolean;
   onUIPreferencesChange?: (prefs: UIPreferences) => void;
   /** Externally controlled open state (for mobile menu integration) */
   externalOpen?: boolean;
@@ -930,7 +937,7 @@ const CommentsTab: React.FC = () => {
   );
 };
 
-export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
+export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
   const webmcpTools = useWebMcpToolsEnabled();
   const [showDialog, setShowDialog] = useState(false);
   const settingsWasOpenRef = useRef(false);
@@ -981,6 +988,8 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   // The agent switch default depends on the surface: plan approval hands off to
   // the build agent, review feedback stays on the current agent.
   const agentSurface: AgentSwitchSurface = mode === 'review' ? 'review' : 'plan';
+  // Annotate with parity on gets the same document tabs as plan review.
+  const annotateDocumentTabs = mode === 'annotate' && annotateParity;
   const [agent, setAgent] = useState<AgentSwitchSettings>(() => getAgentSwitchDefaults(agentSurface));
   const [planSave, setPlanSave] = useState<PlanSaveSettings>({ enabled: true, customPath: null });
   const [uiPrefs, setUiPrefs] = useState<UIPreferences>({ tocEnabled: true, stickyActionsEnabled: true, planWidth: 'compact' });
@@ -1001,7 +1010,11 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const mainTabs = useMemo(() => {
     const t: { id: SettingsTab; label: string }[] = [{ id: 'general', label: 'General' }];
     t.push({ id: 'theme', label: 'Theme' });
-    if (mode === 'plan') {
+    // Annotate renders the same document viewer as plan review, so the
+    // document-level tabs apply there too. Only rows that describe a plan
+    // decision (plan snapshots, plan-arrival auto-save, plan-time hooks,
+    // post-approval permission mode / agent switch) stay plan-only.
+    if (mode === 'plan' || annotateDocumentTabs) {
       t.push({ id: 'display', label: 'Display' });
       t.push({ id: 'saving', label: 'Saving' });
       t.push({ id: 'labels', label: 'Labels' });
@@ -1023,11 +1036,11 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
       t.push({ id: 'hooks', label: 'Hooks' });
     }
     return t;
-  }, [mode, aiProviders.length]);
+  }, [mode, annotateDocumentTabs, aiProviders.length]);
 
   const integrationTabs: { id: SettingsTab; label: string }[] = [
     { id: 'files', label: 'Files' },
-    ...(mode === 'plan'
+    ...(mode === 'plan' || annotateDocumentTabs
       ? [{ id: 'obsidian' as SettingsTab, label: 'Obsidian' }, { id: 'bear' as SettingsTab, label: 'Bear' }, { id: 'octarine' as SettingsTab, label: 'Octarine' }]
       : []),
   ];
@@ -1428,8 +1441,9 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </>
                     )}
 
-                    {/* Agent Switching (OpenCode only) */}
-                    {origin === 'opencode' && (
+                    {/* Agent Switching (OpenCode only). Applied on plan
+                        approval only; annotate decisions never switch agents. */}
+                    {origin === 'opencode' && !annotateDocumentTabs && (
                       <>
                         <div className="border-t border-border" />
                         <div className="space-y-2">
@@ -1689,9 +1703,9 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                     {/* Plan Width */}
                     <div className="space-y-3">
                       <div>
-                        <div className="text-sm font-medium flex items-center gap-2">Plan Width</div>
+                        <div className="text-sm font-medium flex items-center gap-2">{mode === 'annotate' ? 'Document Width' : 'Plan Width'}</div>
                         <div className="text-xs text-muted-foreground">
-                          Maximum width of the plan card
+                          {mode === 'annotate' ? 'Maximum width of the document card' : 'Maximum width of the plan card'}
                         </div>
                       </div>
                       <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-0.5">
@@ -1815,7 +1829,9 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                 {/* === SAVING TAB === */}
                 {activeTab === 'saving' && (
                   <>
-                    {/* Plan Saving */}
+                    {/* Plan Saving — decision snapshots in plans/ are written
+                        on plan approve/deny only. */}
+                    {mode === 'plan' && (<>
                     <div className="space-y-3">
                       <div className="flex items-center justify-between">
                         <div>
@@ -1858,6 +1874,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                     </div>
 
                     <div className="border-t border-border" />
+                    </>)}
 
                     {/* Default Notes App */}
                     <div className="space-y-2">
@@ -2256,7 +2273,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       <div>
                         <div className="text-sm font-medium">Obsidian Integration</div>
                         <div className="text-xs text-muted-foreground">
-                          Auto-save approved plans to your vault
+                          {mode === 'annotate' ? 'Save documents to your vault from the Options menu. When on, plan review also saves each approved plan here.' : 'Auto-save approved plans to your vault'}
                         </div>
                       </div>
                       <button
@@ -2385,7 +2402,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                           </div>
 
                           <div className="text-[10px] text-muted-foreground/70">
-                            Plans saved to: {obsidian.vaultPath === CUSTOM_PATH_SENTINEL
+                            {mode === 'annotate' ? 'Saved to' : 'Plans saved to'}: {obsidian.vaultPath === CUSTOM_PATH_SENTINEL
                               ? (obsidian.customPath || '...')
                               : (obsidian.vaultPath || '...')}/{obsidian.folder || 'plannotator'}/
                           </div>
@@ -2396,13 +2413,14 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
 {`---
 created: ${new Date().toISOString().slice(0, 19)}Z
 source: plannotator
-tags: [plan, ...]
+tags: [${mode === 'annotate' ? 'plannotator' : 'plan'}, ...]
 ---`}
                             </pre>
                           </div>
 
                           <div className="border-t border-border/30" />
 
+                          {mode === 'plan' && (<>
                           <div className="flex items-center justify-between">
                             <div>
                               <div className="text-xs font-medium">Auto-save on Plan Arrival</div>
@@ -2423,6 +2441,7 @@ tags: [plan, ...]
                               }`} />
                             </button>
                           </div>
+                          </>)}
 
                           <div className="flex items-center justify-between">
                             <div>
@@ -2457,7 +2476,7 @@ tags: [plan, ...]
                       <div>
                         <div className="text-sm font-medium">Bear Notes</div>
                         <div className="text-xs text-muted-foreground">
-                          Auto-save approved plans to Bear
+                          {mode === 'annotate' ? 'Save documents to Bear from the Options menu. When on, plan review also saves each approved plan here.' : 'Auto-save approved plans to Bear'}
                         </div>
                       </div>
                       <button
@@ -2503,6 +2522,7 @@ tags: [plan, ...]
                           </select>
                         </div>
 
+                        {mode === 'plan' && (<>
                         <div className="border-t border-border/30" />
 
                         <div className="flex items-center justify-between">
@@ -2525,6 +2545,7 @@ tags: [plan, ...]
                             }`} />
                           </button>
                         </div>
+                        </>)}
                       </div>
                     )}
                   </>
@@ -2537,7 +2558,7 @@ tags: [plan, ...]
                       <div>
                         <div className="text-sm font-medium">Octarine</div>
                         <div className="text-xs text-muted-foreground">
-                          Auto-save approved plans to Octarine
+                          {mode === 'annotate' ? 'Save documents to Octarine from the Options menu. When on, plan review also saves each approved plan here.' : 'Auto-save approved plans to Octarine'}
                         </div>
                       </div>
                       <button
@@ -2585,9 +2606,10 @@ tags: [plan, ...]
                         </div>
 
                         <div className="text-[10px] text-muted-foreground/70">
-                          Plans saved to: {octarine.workspace || '...'} / {octarine.folder || 'plannotator'}/
+                          {mode === 'annotate' ? 'Saved to' : 'Plans saved to'}: {octarine.workspace || '...'} / {octarine.folder || 'plannotator'}/
                         </div>
 
+                        {mode === 'plan' && (<>
                         <div className="border-t border-border/30" />
 
                         <div className="flex items-center justify-between">
@@ -2610,6 +2632,7 @@ tags: [plan, ...]
                             }`} />
                           </button>
                         </div>
+                        </>)}
                       </div>
                     )}
                   </>

package/components/Viewer.tsx

@@ -5,7 +5,7 @@ import { AnnotationType, type Block, type Annotation, type EditorMode, type Inpu
 import { applyHighlight, codeBlockClassName, onCodeHighlightSwap } from '../utils/codeHighlight';
 import { paintCodeBlockMark } from '../utils/codeBlockMark';
 import { useFenceTheme } from '../hooks/useFenceTheme';
-import { computeListIndices, groupBlocks, type Frontmatter } from '../utils/parser';
+import { computeListIndices, groupBlocks, type Frontmatter, type FrontmatterValue } from '../utils/parser';
 import { buildHeadingSlugMap } from '../utils/slugify';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { BlockRenderer } from './BlockRenderer';
@@ -222,6 +222,76 @@ interface CodeBlockToolbarTarget {
   readonly activation: 'pointer' | 'keyboard';
 }
 
+// Named type guard so both taken and fallthrough branches narrow.
+function isFrontmatterMap(value: FrontmatterValue): value is { [key: string]: FrontmatterValue } {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Renders a single frontmatter field or recursive sub-structure.
+ */
+const FrontmatterRow: React.FC<{ field: string; value: FrontmatterValue }> = ({ field, value }) => {
+  if (isFrontmatterMap(value)) {
+    const subEntries = Object.entries(value);
+    return (
+      <div className="flex flex-col gap-1.5">
+        <span className="font-medium text-muted-foreground">{field}:</span>
+        <div className="pl-4 grid gap-1.5">
+          {subEntries.map(([k, v]) => (
+            <FrontmatterRow key={k} field={k} value={v} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (Array.isArray(value)) {
+    const isArrayOfMaps = value.some((v) => typeof v === 'object' && v !== null);
+    if (isArrayOfMaps) {
+      return (
+        <div className="flex flex-col gap-1.5">
+          <span className="font-medium text-muted-foreground">{field}:</span>
+          <div className="pl-4 grid gap-2">
+            {value.map((item, i) => (
+              <div key={i} className="p-2 bg-muted/40 border border-border/40 rounded grid gap-1.5">
+                {isFrontmatterMap(item) ? (
+                  Object.entries(item).map(([k, v]) => (
+                    <FrontmatterRow key={k} field={k} value={v} />
+                  ))
+                ) : (
+                  <span className="text-foreground">{typeof item === 'string' ? item : String(item)}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex gap-2">
+        <span className="font-medium text-muted-foreground min-w-[80px]">{field}:</span>
+        <span className="text-foreground">
+          <span className="flex flex-wrap gap-1">
+            {value.map((v, i) => (
+              <span key={i} className="px-1.5 py-0.5 bg-primary/10 text-primary rounded text-xs">
+                {typeof v === 'string' ? v : String(v)}
+              </span>
+            ))}
+          </span>
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2">
+      <span className="font-medium text-muted-foreground min-w-[80px]">{field}:</span>
+      <span className="text-foreground">{value}</span>
+    </div>
+  );
+};
+
 /**
  * Renders YAML frontmatter as a styled metadata card.
  */
@@ -233,22 +303,7 @@ const FrontmatterCard: React.FC<{ frontmatter: Frontmatter }> = ({ frontmatter }
     <div className="mt-4 mb-6 p-4 bg-muted/30 border border-border/50 rounded-lg">
       <div className="grid gap-2 text-sm">
         {entries.map(([key, value]) => (
-          <div key={key} className="flex gap-2">
-            <span className="font-medium text-muted-foreground min-w-[80px]">{key}:</span>
-            <span className="text-foreground">
-              {Array.isArray(value) ? (
-                <span className="flex flex-wrap gap-1">
-                  {value.map((v, i) => (
-                    <span key={i} className="px-1.5 py-0.5 bg-primary/10 text-primary rounded text-xs">
-                      {v}
-                    </span>
-                  ))}
-                </span>
-              ) : (
-                value
-              )}
-            </span>
-          </div>
+          <FrontmatterRow key={key} field={key} value={value} />
         ))}
       </div>
     </div>
@@ -1222,6 +1277,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                       onToggleCheckbox={readOnly ? undefined : onToggleCheckbox}
                       checkboxOverrides={checkboxOverrides}
                       githubRepo={repoInfo?.display}
+                      repoHost={repoInfo?.host}
                       headingAnchorId={headingSlugMap.get(block.id)}
                       onNavigateAnchor={scrollToAnchor}
                     />
@@ -1262,6 +1318,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               onOpenLinkedDoc={onOpenLinkedDoc}
               onOpenCodeFile={onOpenCodeFile}
               githubRepo={repoInfo?.display}
+              repoHost={repoInfo?.host}
               onNavigateAnchor={scrollToAnchor}
               onHover={(element) => {
                 if (tableHoverTimeoutRef.current) {
@@ -1328,7 +1385,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               }
             />
           ) : (
-            <BlockRenderer imageBaseDir={imageBaseDir} onImageClick={(src, alt) => setLightbox({ src, alt })} key={group.block.id} block={group.block} onOpenLinkedDoc={onOpenLinkedDoc} onOpenCodeFile={onOpenCodeFile} onNavigateAnchor={scrollToAnchor} onToggleCheckbox={readOnly ? undefined : onToggleCheckbox} checkboxOverrides={checkboxOverrides} githubRepo={repoInfo?.display} headingAnchorId={headingSlugMap.get(group.block.id)} />
+            <BlockRenderer imageBaseDir={imageBaseDir} onImageClick={(src, alt) => setLightbox({ src, alt })} key={group.block.id} block={group.block} onOpenLinkedDoc={onOpenLinkedDoc} onOpenCodeFile={onOpenCodeFile} onNavigateAnchor={scrollToAnchor} onToggleCheckbox={readOnly ? undefined : onToggleCheckbox} checkboxOverrides={checkboxOverrides} githubRepo={repoInfo?.display} repoHost={repoInfo?.host} headingAnchorId={headingSlugMap.get(group.block.id)} />
           )
         )}
 
@@ -1438,6 +1495,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             onOpenLinkedDoc={onOpenLinkedDoc}
             onOpenCodeFile={onOpenCodeFile}
             githubRepo={repoInfo?.display}
+            repoHost={repoInfo?.host}
             onNavigateAnchor={scrollToAnchor}
           />
         )}

package/components/blocks/AlertBlock.tsx

@@ -13,6 +13,7 @@ interface AlertBlockProps {
   imageBaseDir?: string;
   onImageClick?: (src: string, alt: string) => void;
   githubRepo?: string;
+  repoHost?: string;
   onNavigateAnchor?: (hash: string) => void;
 }
 
@@ -60,9 +61,9 @@ const Icon: React.FC<{ kind: AlertKind }> = ({ kind }) => {
 };
 
 export const AlertBlock: React.FC<AlertBlockProps> = ({
-  blockId, kind, body, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, githubRepo, onNavigateAnchor,
+  blockId, kind, body, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, githubRepo, repoHost, onNavigateAnchor,
 }) => {
-  const proseProps = { imageBaseDir, onImageClick, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor, githubRepo };
+  const proseProps = { imageBaseDir, onImageClick, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor, githubRepo, repoHost };
 
   // A bold-only first line (optionally led by one emoji, optionally trailed by
   // an `<!-- icon: name -->` comment) is the alert's title and rides the icon

package/components/blocks/Callout.tsx

@@ -13,6 +13,7 @@ interface CalloutProps {
   imageBaseDir?: string;
   onImageClick?: (src: string, alt: string) => void;
   githubRepo?: string;
+  repoHost?: string;
   onNavigateAnchor?: (hash: string) => void;
 }
 
@@ -28,6 +29,7 @@ export const Callout: React.FC<CalloutProps> = ({
   imageBaseDir,
   onImageClick,
   githubRepo,
+  repoHost,
   onNavigateAnchor,
 }) => {
   const kindAttr =
@@ -54,6 +56,7 @@ export const Callout: React.FC<CalloutProps> = ({
         onOpenCodeFile,
         onNavigateAnchor,
         githubRepo,
+        repoHost,
       })}
     </div>
   );

package/components/blocks/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import type { Block } from '../../types';
 import { copyTextToClipboard } from '../../utils/clipboard';
-import { applyHighlight, codeBlockClassName } from '../../utils/codeHighlight';
+import { applyHighlight, codeBlockClassName, codeBlockKeepsLayout } from '../../utils/codeHighlight';
 import { useFenceTheme } from '../../hooks/useFenceTheme';
 
 interface CodeBlockProps {
@@ -68,7 +68,11 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave })
         )}
       </button>
       <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30">
-        <code ref={codeRef} className={codeClassName}>{block.content}</code>
+        <code
+          ref={codeRef}
+          className={codeClassName}
+          data-keep-layout={codeBlockKeepsLayout(block.content) ? '' : undefined}
+        >{block.content}</code>
       </pre>
     </div>
   );

package/components/blocks/TableBlock.tsx

@@ -12,6 +12,7 @@ interface TableBlockProps {
   imageBaseDir?: string;
   onImageClick?: (src: string, alt: string) => void;
   githubRepo?: string;
+  repoHost?: string;
 }
 
 // Parse pipe-delimited markdown table content into headers + rows.
@@ -87,6 +88,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
   imageBaseDir,
   onImageClick,
   githubRepo,
+  repoHost,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { headers, rows } = parseTableContent(block.content);
@@ -116,6 +118,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
                   onOpenCodeFile={onOpenCodeFile}
                   onNavigateAnchor={onNavigateAnchor}
                   githubRepo={githubRepo}
+                  repoHost={repoHost}
                 />
               </th>
             ))}
@@ -134,6 +137,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
                     onOpenCodeFile={onOpenCodeFile}
                     onNavigateAnchor={onNavigateAnchor}
                     githubRepo={githubRepo}
+                    repoHost={repoHost}
                   />
                 </td>
               ))}

package/components/blocks/TablePopout.tsx

@@ -28,6 +28,7 @@ interface TablePopoutProps {
   imageBaseDir?: string;
   onImageClick?: (src: string, alt: string) => void;
   githubRepo?: string;
+  repoHost?: string;
 }
 
 type Row = Record<string, string>;
@@ -43,6 +44,7 @@ const TablePopoutImpl: React.FC<TablePopoutProps> = ({
   imageBaseDir,
   onImageClick,
   githubRepo,
+  repoHost,
 }) => {
   const { headers, rows } = useMemo(() => parseTableContent(block.content), [block.content]);
 
@@ -83,11 +85,12 @@ const TablePopoutImpl: React.FC<TablePopoutProps> = ({
             onOpenCodeFile={onOpenCodeFile}
             onNavigateAnchor={onNavigateAnchor}
             githubRepo={githubRepo}
+            repoHost={repoHost}
           />
         ),
       }),
     );
-  }, [columnIds, headers, imageBaseDir, onImageClick, onOpenLinkedDoc, onNavigateAnchor, githubRepo]);
+  }, [columnIds, headers, imageBaseDir, onImageClick, onOpenLinkedDoc, onNavigateAnchor, githubRepo, repoHost]);
 
   const [sorting, setSorting] = useState<SortingState>([]);
   const [globalFilter, setGlobalFilter] = useState('');
@@ -263,7 +266,8 @@ export const TablePopout = React.memo(
     prev.open === next.open &&
     prev.container === next.container &&
     prev.imageBaseDir === next.imageBaseDir &&
-    prev.githubRepo === next.githubRepo,
+    prev.githubRepo === next.githubRepo &&
+    prev.repoHost === next.repoHost,
 );
 
 const SortIndicator: React.FC<{ dir: false | 'asc' | 'desc' }> = ({ dir }) => {

package/components/blocks/proseBody.tsx

@@ -19,6 +19,7 @@ export function renderProseBody(args: {
   onOpenCodeFile?: (path: string) => void;
   onNavigateAnchor?: (hash: string) => void;
   githubRepo?: string;
+  repoHost?: string;
 }): React.ReactNode {
   const {
     body,
@@ -30,6 +31,7 @@ export function renderProseBody(args: {
     onOpenCodeFile,
     onNavigateAnchor,
     githubRepo,
+    repoHost,
   } = args;
 
   const inline = (text: string) => (
@@ -41,6 +43,7 @@ export function renderProseBody(args: {
       onOpenCodeFile={onOpenCodeFile}
       onNavigateAnchor={onNavigateAnchor}
       githubRepo={githubRepo}
+      repoHost={repoHost}
     />
   );
 

package/components/plan-diff/PlanCleanDiffView.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import { parseMarkdownToBlocks, computeListIndices } from "../../utils/parser";
-import { applyHighlight, codeBlockClassName } from "../../utils/codeHighlight";
+import { applyHighlight, codeBlockClassName, codeBlockKeepsLayout } from "../../utils/codeHighlight";
 import { useFenceTheme } from "../../hooks/useFenceTheme";
 import { ListItemBody } from "../ListItemBody";
 import type { Block, Annotation, EditorMode, ImageAttachment } from "../../types";
@@ -711,7 +711,11 @@ const SimpleCodeBlock: React.FC<{ block: Block }> = ({ block }) => {
   return (
     <div className="relative group my-5">
       <pre className="bg-muted/50 border border-border/30 rounded-lg overflow-x-auto">
-        <code ref={codeRef} className={codeBlockClassName(block.language)}>
+        <code
+          ref={codeRef}
+          className={codeBlockClassName(block.language)}
+          data-keep-layout={codeBlockKeepsLayout(block.content) ? "" : undefined}
+        >
           {block.content}
         </code>
       </pre>

package/config/reviewView.ts

@@ -20,6 +20,10 @@ import { storage } from '../utils/storage';
  * remains the one non-writer that can produce a conflicted pair from a
  * stale config.json; the App-level load reconciler heals that case by
  * calling setReviewPanelView('sections', { recordLastUsed: false }).
+ *
+ * The registry default is 'tree', which any diff type can render, so the pair
+ * only ever needs reconciling for a reviewer who explicitly persisted
+ * 'sections'.
  */
 
 /** Store seam for tests (fresh ConfigStoreForTest); production always uses the singleton. */
@@ -33,7 +37,7 @@ export function setReviewPanelView(
   store.set('reviewPanelView', view);
   // An explicit persisted choice also becomes the last-used view — otherwise
   // a stale last-used cookie would immediately shadow what the user just
-  // picked in Settings / the setup dialog. recordLastUsed: false is for
+  // picked in Settings. recordLastUsed: false is for
   // NON-choices: the App self-heal repairs a conflicted persisted pair
   // without any user action, so it must not overwrite the user's memo.
   if (options?.recordLastUsed !== false) {
@@ -47,8 +51,9 @@ export function setReviewPanelView(
 /**
  * The panel view the reviewer has actually persisted, or `undefined` when they
  * never chose one. Distinct from `configStore.get('reviewPanelView')`, which
- * cannot tell a stored choice apart from the built-in default, which is the
- * difference first-run seeding has to respect before it writes over anything.
+ * cannot tell a stored choice apart from the built-in default. Plannotator
+ * itself no longer needs the distinction (nothing seeds this setting any
+ * more); it stays exported for hosts that must not write over a real choice.
  */
 export function getPersistedReviewPanelView(): 'sections' | 'tree' | undefined {
   return SETTINGS.reviewPanelView.fromCookie();