ui(review): global diff-settings cog in toolbar + aligned file headers

- DiffOptionsPopover moves out of every FileHeader into the top toolbar,
  right of the action buttons (settings cog, shadcn-style popover
  unchanged). The options were always global config — rendering them
  per-file implied a per-file scope that never existed.
- Trigger restyled to toolbar sizing (matches sidebar toggles, active
  state while open).
- SemanticFileBadge: fixed badge min-width + fixed-width count so 1- vs
  2-digit counts don't skew the header button column; files with no
  semantic changes render an invisible same-size ghost so all headers
  stay aligned when sem is available.

Author: backnotprop

packages/review-editor/App.tsx

@@ -6,6 +6,7 @@ import { ConfirmDialog } from '@plannotator/ui/components/ConfirmDialog';
 import { Settings } from '@plannotator/ui/components/Settings';
 import { FeedbackButton, ApproveButton, ExitButton } from '@plannotator/ui/components/ToolbarButtons';
 import { AgentReviewActions } from './components/AgentReviewActions';
+import { DiffOptionsPopover } from './components/DiffOptionsPopover';
 import { useUpdateCheck } from '@plannotator/ui/hooks/useUpdateCheck';
 import { storage } from '@plannotator/ui/utils/storage';
 import { CompletionOverlay } from '@plannotator/ui/components/CompletionOverlay';
@@ -2231,6 +2232,11 @@ const ReviewApp: React.FC = () => {
               </button>
             )}
 
+            {/* Global diff display options. These settings apply to every
+                file's diff, so they live once in the toolbar instead of being
+                repeated in every FileHeader. */}
+            <DiffOptionsPopover />
+
             <div className="w-px h-5 bg-border/50 mx-1 hidden md:block" />
 
             {/* Sidebar tab toggles */}

packages/review-editor/components/DiffOptionsPopover.tsx

@@ -103,10 +103,10 @@ export const DiffOptionsPopover: React.FC = () => {
     <Popover.Root>
       <Popover.Trigger asChild>
         <button
-          className="text-xs text-muted-foreground hover:text-foreground rounded hover:bg-muted transition-colors flex items-center px-1.5 py-1"
+          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all flex items-center data-[state=open]:bg-primary/15 data-[state=open]:text-primary"
           title="Diff display options"
         >
-          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
             <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
           </svg>

packages/review-editor/components/FileHeader.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { DiffOptionsPopover } from './DiffOptionsPopover';
 import { SemanticFileBadge } from './SemanticFileBadge';
 
 interface FileHeaderProps {
@@ -215,7 +214,6 @@ export const FileHeader: React.FC<FileHeaderProps> = ({
           )}
         </button>
         <SemanticFileBadge filePath={filePath} />
-        <DiffOptionsPopover />
       </div>
     </div>
   );

packages/review-editor/components/SemanticFileBadge.tsx

@@ -39,7 +39,13 @@ export const SemanticFileBadge: React.FC<{ filePath: string }> = ({ filePath })
   };
 
   const count = changes.length + binaryChanges.length;
-  if (!state || !available || loading || count === 0) return null;
+  if (!state || !available) return null;
+  // Sem is available but this file has no named changes (or is still
+  // resolving): reserve the badge's exact footprint so the header buttons stay
+  // column-aligned across files with and without a badge.
+  if (loading || count === 0) {
+    return <span className="semantic-file-badge semantic-file-badge-ghost" aria-hidden="true" />;
+  }
 
   const openChange = (change: SemanticDiffChange) => {
     state.openDiffFile(change.filePath);

packages/review-editor/index.css

@@ -449,12 +449,16 @@ diffs-container {
   padding: 0 0.5rem;
 }
 
-/* "sem · N" pill in a diff file header */
+/* "sem · N" pill in a diff file header. Fixed min-width (and a fixed-width
+   count, below) so 1- vs 2-digit counts — and files with no badge at all,
+   via the ghost — never skew the header button column across files. */
 .semantic-file-badge {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.3125rem;
   height: 1.5rem;
+  min-width: 4.125rem;
   padding: 0 0.4375rem;
   border: 0;
   border-radius: var(--radius-sm);
@@ -467,6 +471,13 @@ diffs-container {
   transition: color 120ms ease, background 120ms ease;
 }
 
+/* Invisible spacer with the badge's exact footprint, rendered when sem is
+   available but a file has no named changes — keeps headers aligned. */
+.semantic-file-badge-ghost {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .semantic-file-badge:hover,
 .semantic-file-badge[data-state="open"] {
   color: var(--foreground);
@@ -484,11 +495,13 @@ diffs-container {
 }
 
 .semantic-file-badge-count {
+  min-width: 1.5em;
   padding: 0.0625rem 0.3125rem;
   border-radius: calc(var(--radius-sm) - 2px);
   background: oklch(from var(--primary) l c h / 0.14);
   color: var(--primary);
   font-variant-numeric: tabular-nums;
+  text-align: center;
 }
 
 /* Hover popover — same terminal rows as the panel, shadcn surface */