@plannotator/ui 0.30.0 → 0.32.0

package/components/PlanHeaderMenu.tsx

@@ -34,6 +34,17 @@ interface PlanHeaderMenuProps {
   obsidianConfigured: boolean;
   bearConfigured: boolean;
   octarineConfigured: boolean;
+  compactTouchLayout?: boolean;
+  compactSessionActions?: CompactPlanAction[];
+  compactDocumentActions?: CompactPlanAction[];
+}
+
+export interface CompactPlanAction {
+  id: 'exit' | 'feedback' | 'approve' | 'copy' | 'done' | 'edit' | 'tools' | 'annotate' | 'annotations' | 'ai' | 'review';
+  label: string;
+  subtitle?: string;
+  onSelect: () => void;
+  disabled?: boolean;
 }
 
 export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
@@ -57,6 +68,9 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   obsidianConfigured,
   bearConfigured,
   octarineConfigured,
+  compactTouchLayout = false,
+  compactSessionActions = [],
+  compactDocumentActions = [],
 }) => {
   const { theme, setTheme } = useTheme();
 
@@ -68,13 +82,20 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   return (
     <ActionMenu
       panelWidth="wide"
+      panelClassName={compactTouchLayout
+        ? 'absolute top-full right-0 mt-1 w-[min(18rem,calc(100vw-1rem))] max-h-[calc(var(--pn-viewport-height,100vh)-4.5rem-var(--pn-safe-top)-var(--pn-safe-bottom))] overflow-y-auto rounded-lg border border-border bg-popover py-1 shadow-xl z-[70]'
+        : undefined
+      }
       renderTrigger={({ isOpen, toggleMenu }) => (
         <button
+          id={compactTouchLayout ? 'pn-compact-plan-options-trigger' : undefined}
+          data-pn-touch-target={compactTouchLayout || undefined}
+          data-pn-touch-target-icon={compactTouchLayout || undefined}
           onClick={() => {
             if (!isOpen && showUpdateDot) updateInfo?.dismiss();
             toggleMenu();
           }}
-          className={`relative flex items-center gap-1.5 p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-colors ${
+          className={`relative flex items-center justify-center gap-1.5 rounded-md text-xs font-medium transition-colors ${compactTouchLayout ? 'h-11 w-11 p-0' : 'p-1.5 md:px-2.5 md:py-1'} ${
             isOpen
               ? 'bg-muted text-foreground'
               : 'text-muted-foreground hover:text-foreground hover:bg-muted'
@@ -99,11 +120,34 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
     >
       {({ closeMenu }) => (
         <>
+          {compactTouchLayout && compactSessionActions.length > 0 && (
+            <>
+              <CompactActionSection
+                label="Review"
+                actions={compactSessionActions}
+                closeMenu={closeMenu}
+              />
+              <ActionMenuDivider />
+            </>
+          )}
+
+          {compactTouchLayout && compactDocumentActions.length > 0 && (
+            <>
+              <CompactActionSection
+                label="Document"
+                actions={compactDocumentActions}
+                closeMenu={closeMenu}
+              />
+              <ActionMenuDivider />
+            </>
+          )}
+
           <div className="px-3 py-2 space-y-1.5">
             <ActionMenuSectionLabel>Theme</ActionMenuSectionLabel>
             <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-0.5">
               {THEME_MODES.map(({ id, label, Icon }) => (
                 <button
+                  data-pn-touch-target={compactTouchLayout || undefined}
                   key={id}
                   onClick={() => {
                     closeMenu();
@@ -243,6 +287,101 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   );
 };
 
+const CompactActionSection = ({
+  label,
+  actions,
+  closeMenu,
+}: {
+  label: string;
+  actions: CompactPlanAction[];
+  closeMenu: () => void;
+}) => (
+  <div className="py-1">
+    <div className="px-3 py-1">
+      <ActionMenuSectionLabel>{label}</ActionMenuSectionLabel>
+    </div>
+    {actions.map((action) => (
+      <ActionMenuItem
+        key={action.id}
+        onClick={() => {
+          closeMenu();
+          action.onSelect();
+        }}
+        disabled={action.disabled}
+        icon={<CompactPlanActionIcon kind={action.id} />}
+        label={action.label}
+        subtitle={action.subtitle}
+      />
+    ))}
+  </div>
+);
+
+const CompactPlanActionIcon = ({ kind }: { kind: CompactPlanAction['id'] }) => {
+  if (kind === 'review') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 11l2 2 4-4m6 3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    );
+  }
+  if (kind === 'annotations') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+      </svg>
+    );
+  }
+  if (kind === 'ai') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3l1.2 3.8L17 8l-3.8 1.2L12 13l-1.2-3.8L7 8l3.8-1.2L12 3zM18.5 13l.8 2.7L22 16.5l-2.7.8-.8 2.7-.8-2.7-2.7-.8 2.7-.8.8-2.7zM5 13l.7 2.3L8 16l-2.3.7L5 19l-.7-2.3L2 16l2.3-.7L5 13z" />
+      </svg>
+    );
+  }
+  if (kind === 'approve' || kind === 'done') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    );
+  }
+  if (kind === 'feedback') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+      </svg>
+    );
+  }
+  if (kind === 'copy') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+      </svg>
+    );
+  }
+  if (kind === 'edit' || kind === 'annotate') {
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+      </svg>
+    );
+  }
+  if (kind === 'tools') {
+    // Eye, matching the desktop header's show/hide-tools toggle.
+    return (
+      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    );
+  }
+  return (
+    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  );
+};
+
 const MenuIcon = () => (
   <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />

package/components/SearchableSelect.tsx

@@ -107,6 +107,7 @@ export function SearchableSelect<T extends { id: string }>({
             />
           </svg>
           <input
+            data-pn-mobile-editable
             ref={inputRef}
             value={search}
             onChange={(e) => {
@@ -128,6 +129,7 @@ export function SearchableSelect<T extends { id: string }>({
           ) : (
             filtered.map((item, i) => (
               <button
+                data-pn-touch-target
                 key={item.id}
                 type="button"
                 data-index={i}

package/components/Settings.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import type { AnnotateAgentTerminalSide } from '@plannotator/core/agent-terminal';
 import type { Origin } from '@plannotator/core/agents';
 import type { DiffLineBgIntensity } from '@plannotator/core/config-types';
 import { configStore, useConfigValue, setReviewPanelView, setReviewDefaultDiffType } from '../config';
+import { setWebMcpToolsEnabled, useWebMcpToolsEnabled } from '../webmcp/preference';
 import { loadDiffFont } from '../utils/diffFonts';
 import { TaterSpritePullup } from './TaterSpritePullup';
 import { getIdentity, regenerateIdentity, setCustomIdentity, isIdentityEditable } from '../utils/identity';
@@ -73,8 +75,9 @@ import {
   type FileBrowserSettings,
 } from '../utils/fileBrowser';
 import { requestVimDocumentFocus } from '../hooks/useVimDocumentFocus';
+import { AnalysisLayerToggle } from './AnalysisLayerToggle';
 
-type SettingsTab = 'general' | 'theme' | 'git' | 'display' | 'saving' | 'labels' | 'vim' | 'shortcuts' | 'ai' | 'files' | 'obsidian' | 'bear' | 'octarine' | 'comments' | 'hooks';
+type SettingsTab = 'general' | 'theme' | 'git' | 'display' | 'analysis' | 'saving' | 'labels' | 'vim' | 'shortcuts' | 'ai' | 'files' | 'obsidian' | 'bear' | 'octarine' | 'comments' | 'hooks';
 
 interface SettingsProps {
   taterMode: boolean;
@@ -94,8 +97,21 @@ interface SettingsProps {
    *  (base ref unresolvable) — the Git tab shows a note that the Git-status
    *  preference can't take effect in THIS repo. */
   sinceBaseUnavailable?: boolean;
+  /** The host is rendering its compact touch shell (review only). Display
+   *  settings that the compact shell overrides for the session are hidden
+   *  there instead of silently editing the desktop preference. */
+  isCompactTouchLayout?: boolean;
   /** Override Obsidian vault detection (default = GET /api/obsidian/vaults). */
   onDetectObsidianVaults?: () => Promise<string[]>;
+  /** This annotate session actually offers the Agent TUI, so its Position
+   *  setting is worth showing. Default false: the setting is the only way back
+   *  from a Hidden position, but offering it where no terminal can ever run
+   *  would just be a dead control. */
+  agentTerminalAvailable?: boolean;
+  /** The browser exposes WebMCP (`document.modelContext`), so the "Agent
+   *  tools" opt-out is worth showing. Default false: a browser without the
+   *  API gets no row at all (the provider registers nothing there). */
+  webmcpAvailable?: boolean;
 }
 
 // --- Review-mode Display tab (diff display options) ---
@@ -148,6 +164,12 @@ const DEFAULT_DIFF_TYPE_OPTIONS = [
   { value: 'all' as const, label: 'All Files (HEAD)', description: "Every tracked file at HEAD, shown as additions" },
 ];
 
+const AGENT_TERMINAL_SIDE_OPTIONS: { value: AnnotateAgentTerminalSide; label: string }[] = [
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' },
+  { value: 'hidden', label: 'Hidden' },
+];
+
 function SegmentedControl<T extends string>({ options, value, onChange }: {
   options: { value: T; label: string }[];
   value: T;
@@ -192,12 +214,17 @@ function ToggleSwitch({ checked, onChange, label, description, disabled = false
         aria-checked={checked}
         disabled={disabled}
         onClick={() => onChange(!checked)}
-        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed ${
-          checked ? 'bg-primary' : 'bg-muted'
-        }`}
+        className="relative inline-flex h-11 w-11 shrink-0 items-center disabled:cursor-not-allowed"
       >
         <span
-          className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+          aria-hidden="true"
+          className={`absolute inset-x-0 top-2.5 h-6 rounded-full transition-colors ${
+            checked ? 'bg-primary' : 'bg-muted'
+          }`}
+        />
+        <span
+          aria-hidden="true"
+          className={`absolute top-3.5 inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
             checked ? 'translate-x-6' : 'translate-x-1'
           }`}
         />
@@ -288,6 +315,63 @@ function VimSettingsTab({
   );
 }
 
+function ReviewAnalysisTab() {
+  const semanticDiffEnabled = useConfigValue('semanticDiffEnabled');
+  const callFlowEnabled = useConfigValue('callFlowEnabled');
+  return (
+    <div className="space-y-5">
+      <div>
+        <div className="text-sm font-semibold">Analysis layers</div>
+        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+          Add structural context to the ordinary code diff. Each layer is independent and does no work while disabled.
+        </p>
+      </div>
+
+      <div className="space-y-4 rounded-xl border border-border bg-muted/20 p-4">
+        <AnalysisLayerToggle
+          checked={semanticDiffEnabled}
+          onChange={(enabled) => configStore.set('semanticDiffEnabled', enabled)}
+          label="Semantic changes"
+          description="Organize added, changed, moved, and removed functions, classes, and other named code. Enabled by default."
+        />
+        <div className="border-t border-border" />
+        <AnalysisLayerToggle
+          checked={callFlowEnabled}
+          onChange={(enabled) => configStore.set('callFlowEnabled', enabled)}
+          label="Call flow"
+          description="Diffs for function call stacks across git commits. 22 languages supported (AST-based, built using Tree-sitter)."
+        />
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div className="rounded-xl border border-border p-3.5">
+          <div className="flex items-center gap-2 text-xs font-semibold">
+            <span className="grid h-6 w-6 place-items-center rounded-md bg-primary/10 font-mono text-primary">▣</span>
+            Dock
+          </div>
+          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+            Open the complete analysis from the file panel. Rows jump to the relevant code location.
+          </p>
+        </div>
+        <div className="rounded-xl border border-border p-3.5">
+          <div className="flex items-center gap-2 text-xs font-semibold">
+            <span className="grid h-6 w-6 place-items-center rounded-md bg-primary/10 font-mono text-primary">⌁</span>
+            File lens
+          </div>
+          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+            File headers show compact counts and a focused popover for that file.
+          </p>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-warning/25 bg-warning/[0.05] p-4 text-xs leading-relaxed text-muted-foreground">
+        <span className="font-semibold text-foreground">Call flow is syntactic.</span>{' '}
+        It does not use type resolution or runtime traces, so treat it as navigation context—not proof that a path executes.
+      </div>
+    </div>
+  );
+}
+
 const GitTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavailable }) => {
   const defaultDiffType = useConfigValue('defaultDiffType');
   const reviewPanelView = useConfigValue('reviewPanelView');
@@ -358,7 +442,7 @@ const GitTab: React.FC<{ sinceBaseUnavailable?: boolean }> = ({ sinceBaseUnavail
   );
 };
 
-const ReviewDisplayTab: React.FC = () => {
+const ReviewDisplayTab: React.FC<{ isCompactTouchLayout?: boolean }> = ({ isCompactTouchLayout = false }) => {
   const diffStyle = useConfigValue('diffStyle');
   const diffOverflow = useConfigValue('diffOverflow');
   const diffIndicators = useConfigValue('diffIndicators');
@@ -456,13 +540,23 @@ const ReviewDisplayTab: React.FC = () => {
 
       <div className="border-t border-border" />
 
-      {/* Diff Style */}
+      {/* Diff Style. The compact touch shell renders a session-only unified
+          diff, so the control there would look dead while quietly rewriting
+          the DESKTOP preference. Say what the phone is doing instead. */}
       <div className="space-y-2">
         <div>
           <div className="text-sm font-medium">Diff Style</div>
           <div className="text-xs text-muted-foreground">Side-by-side or inline diff view</div>
+          {isCompactTouchLayout && (
+            <div className="text-xs text-muted-foreground mt-1">
+              This layout shows unified diffs for the session; your desktop
+              preference is unchanged.
+            </div>
+          )}
         </div>
-        <SegmentedControl options={DIFF_STYLE_OPTIONS} value={diffStyle} onChange={(v) => configStore.set('diffStyle', v)} />
+        {!isCompactTouchLayout && (
+          <SegmentedControl options={DIFF_STYLE_OPTIONS} value={diffStyle} onChange={(v) => configStore.set('diffStyle', v)} />
+        )}
       </div>
 
       <div className="border-t border-border" />
@@ -759,7 +853,8 @@ const CommentsTab: React.FC = () => {
   );
 };
 
-export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, sinceBaseUnavailable, onDetectObsidianVaults }) => {
+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 }) => {
+  const webmcpTools = useWebMcpToolsEnabled();
   const [showDialog, setShowDialog] = useState(false);
   const settingsWasOpenRef = useRef(false);
   const [themePreview, setThemePreview] = useState(false);
@@ -791,6 +886,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const vimModeEnabled = useConfigValue('vimModeEnabled');
   const vimHudEnabled = useConfigValue('vimHudEnabled');
   const vimHudKeyPanelEnabled = useConfigValue('vimHudKeyPanelEnabled');
+  const agentTerminalSide = useConfigValue('agentTerminalSide');
   const [identity, setIdentity] = useState('');
   const [obsidian, setObsidian] = useState<ObsidianSettings>({
     enabled: false,
@@ -835,6 +931,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
     if (mode === 'review') {
       t.push({ id: 'git', label: 'Git' });
       t.push({ id: 'display', label: 'Editor' });
+      t.push({ id: 'analysis', label: 'Analysis' });
       t.push({ id: 'comments', label: 'Comments' });
       if (aiProviders.length > 0) {
         t.push({ id: 'ai', label: 'AI' });
@@ -1191,6 +1288,39 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </div>
                     </div>
 
+                    {/* Agent tools (WebMCP). Shown only when the browser
+                        exposes document.modelContext; off unregisters the
+                        tools for this browser. Cookie-only and idle at its
+                        default: no cookie exists until the user opts out. */}
+                    {webmcpAvailable && (
+                      <>
+                        <div className="border-t border-border" />
+                        <div className="flex items-center justify-between" data-webmcp-setting="true">
+                          <div>
+                            <div className="text-sm font-medium">Agent tools</div>
+                            <div className="text-xs text-muted-foreground">
+                              Let your browser's agent read this document and leave comments. Approving and sending feedback stay yours.
+                            </div>
+                          </div>
+                          <button
+                            role="switch"
+                            aria-checked={webmcpTools}
+                            aria-label="Agent tools"
+                            onClick={() => setWebMcpToolsEnabled(!webmcpTools)}
+                            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                              webmcpTools ? 'bg-primary' : 'bg-muted'
+                            }`}
+                          >
+                            <span
+                              className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                                webmcpTools ? 'translate-x-6' : 'translate-x-1'
+                              }`}
+                            />
+                          </button>
+                        </div>
+                      </>
+                    )}
+
                     {/* Permission Mode (Claude Code only) */}
                     {origin === 'claude-code' && mode === 'plan' && (
                       <>
@@ -1306,6 +1436,37 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </>
                     )}
 
+                    {/* Agent TUI position. The same control lives in the
+                        terminal's own Display popover, but that one is
+                        unreachable once the position is Hidden — this is the
+                        way back. Both write the same config value. Gated on the
+                        terminal actually being available in this session, so a
+                        remote or runtime-less annotate never offers a dead
+                        control. */}
+                    {mode === 'annotate' && agentTerminalAvailable && (
+                      <>
+                        <div className="border-t border-border" />
+                        <div className="space-y-2">
+                          <div>
+                            <div className="text-sm font-medium">Agent TUI Position</div>
+                            <div className="text-xs text-muted-foreground">
+                              Which side the agent terminal docks on, or Hidden to keep it out of the layout
+                            </div>
+                          </div>
+                          <SegmentedControl
+                            options={AGENT_TERMINAL_SIDE_OPTIONS}
+                            value={agentTerminalSide}
+                            onChange={(v) => configStore.set('agentTerminalSide', v)}
+                          />
+                          {agentTerminalSide === 'hidden' && (
+                            <div className="text-[10px] text-muted-foreground/70">
+                              You can still open it for this session from the sidebar rail.
+                            </div>
+                          )}
+                        </div>
+                      </>
+                    )}
+
                     <div className="border-t border-border" />
 
                     {/* Auto-close Tab */}
@@ -1343,7 +1504,11 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
 
                 {/* === DISPLAY TAB === */}
                 {activeTab === 'display' && mode === 'review' && (
-                  <ReviewDisplayTab />
+                  <ReviewDisplayTab isCompactTouchLayout={isCompactTouchLayout} />
+                )}
+
+                {activeTab === 'analysis' && mode === 'review' && (
+                  <ReviewAnalysisTab />
                 )}
 
                 {activeTab === 'display' && mode !== 'review' && (

package/components/SkillReferenceMenu.tsx

@@ -9,6 +9,8 @@ const ROOT_LABELS: Record<SkillCatalogEntry['root'], string> = {
 };
 
 interface SkillReferenceMenuProps {
+  /** Id referenced by the focused textarea's aria-controls attribute. */
+  id: string;
   items: SkillCatalogEntry[];
   /** Explicitly activated row, or null — the menu opens with nothing active. */
   activeIndex: number | null;
@@ -79,6 +81,7 @@ function computeMenuPlacement(
  * a purely visual affordance; a pointer click inserts directly.
  */
 export const SkillReferenceMenu: React.FC<SkillReferenceMenuProps> = ({
+  id,
   items,
   activeIndex,
   onSelect,
@@ -140,6 +143,8 @@ export const SkillReferenceMenu: React.FC<SkillReferenceMenuProps> = ({
   return (
     <div
       ref={menuRef}
+      id={id}
+      role="listbox"
       data-skill-menu="true"
       data-skill-menu-placement={placement.direction}
       data-popover-layer="true"
@@ -157,6 +162,10 @@ export const SkillReferenceMenu: React.FC<SkillReferenceMenuProps> = ({
           <button
             key={item.name}
             type="button"
+            id={`${id}-option-${index}`}
+            role="option"
+            aria-selected={index === activeIndex}
+            tabIndex={-1}
             data-skill-item={item.name}
             data-skill-item-active={index === activeIndex ? 'true' : undefined}
             // Insert on pointerdown so the textarea never loses focus. A

package/components/StickyHeaderLane.tsx

@@ -27,7 +27,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { AnnotationToolstrip } from './AnnotationToolstrip';
 import { DocBadges } from './DocBadges';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  getScrollViewportIntersectionRoot,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 import type { EditorMode, InputMethod } from '../types';
 import type { PlanDiffStats } from '../utils/planDiffEngine';
 
@@ -172,7 +175,11 @@ export const StickyHeaderLane: React.FC<StickyHeaderLaneProps> = ({
     if (!sentinelRef.current || !scrollViewport) return;
     const observer = new IntersectionObserver(
       ([entry]) => setIsStuck(!entry.isIntersecting),
-      { root: scrollViewport, rootMargin: '80px 0px 0px 0px', threshold: 0 }
+      {
+        root: getScrollViewportIntersectionRoot(scrollViewport),
+        rootMargin: '80px 0px 0px 0px',
+        threshold: 0,
+      }
     );
     observer.observe(sentinelRef.current);
     return () => observer.disconnect();

package/components/TableOfContents.tsx

@@ -5,7 +5,12 @@ import {
   getAnnotationCountBySection,
   type TocItem,
 } from '../utils/annotationHelpers';
-import { useScrollViewport } from '../hooks/useScrollViewport';
+import {
+  getScrollViewportRect,
+  getScrollViewportTop,
+  scrollViewportTo,
+  useScrollViewport,
+} from '../hooks/useScrollViewport';
 
 interface TableOfContentsProps {
   blocks: Block[];
@@ -82,11 +87,11 @@ export function TableOfContents({
       if (target && scrollViewport) {
         const scrollContainer = scrollViewport;
         const headerOffset = 80; // sticky header (h-12) + breathing room
-        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerRect = getScrollViewportRect(scrollContainer);
         const targetRect = target.getBoundingClientRect();
         const offsetPosition =
-          scrollContainer.scrollTop + (targetRect.top - containerRect.top) - headerOffset;
-        scrollContainer.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+          getScrollViewportTop(scrollContainer) + (targetRect.top - containerRect.top) - headerOffset;
+        scrollViewportTo(scrollContainer, { top: offsetPosition, behavior: 'smooth' });
       }
     },
     [onNavigate, scrollViewport]

package/components/TextShimmer.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, type JSX } from 'react';
-import { motion } from 'motion/react';
+import { motion, useReducedMotion } from 'motion/react';
 
 export interface TextShimmerProps {
   children: string;
@@ -16,6 +16,7 @@ function TextShimmerComponent({
   duration = 2,
   spread = 2,
 }: TextShimmerProps) {
+  const shouldReduceMotion = useReducedMotion();
   const MotionComponent = motion.create(
     Component as keyof JSX.IntrinsicElements
   );
@@ -35,9 +36,9 @@ function TextShimmerComponent({
       ]
         .filter(Boolean)
         .join(' ')}
-      initial={{ backgroundPosition: '100% center' }}
-      animate={{ backgroundPosition: '0% center' }}
-      transition={{
+      initial={shouldReduceMotion ? false : { backgroundPosition: '100% center' }}
+      animate={shouldReduceMotion ? undefined : { backgroundPosition: '0% center' }}
+      transition={shouldReduceMotion ? undefined : {
         repeat: Infinity,
         duration,
         ease: 'linear',
@@ -45,7 +46,9 @@ function TextShimmerComponent({
       style={
         {
           '--spread': `${dynamicSpread}px`,
-          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
+          backgroundImage: shouldReduceMotion
+            ? 'linear-gradient(var(--base-color), var(--base-color))'
+            : 'var(--bg), linear-gradient(var(--base-color), var(--base-color))',
         } as React.CSSProperties
       }
     >