@plannotator/ui 0.53.0 → 0.54.0

package/components/CommentPopover.tsx

@@ -5,6 +5,8 @@ import { AttachmentsButton } from './AttachmentsButton';
 import { useDraggable } from '../hooks/useDraggable';
 import { SparklesIcon } from './SparklesIcon';
 import { hasUnsavedCommentContent } from '../utils/commentContent';
+import { isCommentSubmitKey } from '../utils/commentSubmitKey';
+import { useConfigValue } from '../config/useConfig';
 import { useSkillReferenceAutocomplete } from '../hooks/useSkillReferenceAutocomplete';
 import { HumanOnlySkillNotice, SkillReferenceMenu } from './SkillReferenceMenu';
 import { ComposerTokenTextarea, type ComposerMentionChips } from './ComposerTokenTextarea';
@@ -119,6 +121,20 @@ interface CommentPopoverProps {
   /** Opt-in composer yield while shift-selecting: 'near' fades the composer,
    *  'over' makes it near-invisible and click-through. Undefined → no-op. */
   yieldState?: CommentPopoverYieldState;
+  /** Opt-in: the header's text in place of the quoted `contextText` (an image
+   *  region's "Region 3 · 356 × 486 px"). Absent → the quote, as always. */
+  headerText?: string;
+  /** Opt-in: `side` opens the popover beside the anchor (right, else left),
+   *  falling back to below/above when neither side has room (an image region
+   *  in the image viewer). Absent → below/above, as always. */
+  placement?: 'below' | 'side';
+  /** Opt-in: the stacking level, for a composer over a surface that is
+   *  itself above the page (the image viewer is z-200). Absent → 100. */
+  zIndex?: number;
+  /** Opt-out: `false` mounts the composer without taking focus (an HTML
+   *  pin's composer shown again when its hidden target returns, so focus
+   *  stays where the person is). Absent → focuses on mount, as always. */
+  autoFocus?: boolean;
 }
 
 const MAX_POPOVER_WIDTH = 384;
@@ -151,7 +167,19 @@ interface CommentPopoverPosition {
 export function computeCommentPopoverPosition(
   anchorRect: Pick<DOMRect, 'top' | 'right' | 'bottom' | 'left' | 'width'>,
   bounds: VisibleViewportBounds,
+  placement: 'below' | 'side' = 'below',
 ): CommentPopoverPosition {
+  if (placement === 'side') {
+    const width = Math.min(MAX_POPOVER_WIDTH, bounds.width);
+    const right = anchorRect.right + GAP * 1.75;
+    const left = anchorRect.left - GAP * 1.75 - width;
+    const sideLeft = right + width <= bounds.right ? right : left >= bounds.left ? left : null;
+    if (sideLeft !== null) {
+      const top = Math.max(bounds.top, Math.min(anchorRect.top, bounds.bottom - 280));
+      const maxHeight = Math.max(0, bounds.bottom - top);
+      if (maxHeight >= 280) return { top, left: sideLeft, flipAbove: false, width, maxHeight, requiresExpanded: false };
+    }
+  }
   const spaceBelow = Math.max(0, bounds.bottom - anchorRect.bottom - GAP);
   const spaceAbove = Math.max(0, anchorRect.top - bounds.top - GAP);
   const flipAbove = spaceBelow < 280 && spaceAbove > spaceBelow;
@@ -199,6 +227,10 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   refocusToken,
   captureStrayKeys = false,
   yieldState,
+  headerText,
+  placement = 'below',
+  zIndex,
+  autoFocus = true,
 }) => {
   const visibleBounds = useVisibleViewportBounds(16);
   const coarsePointer = hasPrimaryCoarsePointer();
@@ -266,7 +298,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     const update = () => {
       const rect = anchorEl?.getBoundingClientRect() ?? anchorRect;
       if (!rect) return;
-      const nextPosition = computeCommentPopoverPosition(rect, visibleBounds);
+      const nextPosition = computeCommentPopoverPosition(rect, visibleBounds, placement);
       if (nextPosition.requiresExpanded) {
         setDialogIsForced(true);
         setMode('dialog');
@@ -280,7 +312,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     return () => {
       window.removeEventListener('scroll', update, true);
     };
-  }, [anchorEl, anchorRect, mode, visibleBounds, wasDragged]);
+  }, [anchorEl, anchorRect, mode, visibleBounds, wasDragged, placement]);
 
   // Surface a "jump back" arrow when an open popover scrolls out of view.
   // Re-measures whenever the popover repositions (position updates every scroll
@@ -307,7 +339,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   // renders after `position` is measured, and WebKit fires 0ms timers ahead of
   // that commit, so an effect keyed on mode alone can run before the textarea
   // exists and never focus it (e.g. in WKWebView hosts like Glimpse).
-  const shouldAutoFocus = !coarsePointer || initialText.length > 0 || isGlobal;
+  const shouldAutoFocus = autoFocus && (!coarsePointer || initialText.length > 0 || isGlobal);
   const focusOnMountRef = useCallback((el: HTMLTextAreaElement | null) => {
     textareaRef.current = el;
     if (!el || !shouldAutoFocus) return;
@@ -322,13 +354,13 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   // summon the software keyboard), but hardware-keyboard users still need a
   // coherent focus target and Escape dismissal.
   useEffect(() => {
-    if (mode !== 'dialog' || shouldAutoFocus) return;
+    if (mode !== 'dialog' || shouldAutoFocus || !autoFocus) return;
     const timer = setTimeout(() => {
       if (!popoverRef.current?.isConnected) return;
       popoverRef.current.focus({ preventScroll: true });
     }, 0);
     return () => clearTimeout(timer);
-  }, [mode, shouldAutoFocus]);
+  }, [autoFocus, mode, shouldAutoFocus]);
 
   const restoreOpeningFocus = useCallback(() => {
     const target = openingFocusRef.current;
@@ -561,6 +593,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   const composerListboxOpen = skillAc.menu !== null || mentionAc.menu !== null;
   const activeComposerOptionId = activeSkillOptionId ?? activeMentionOptionId;
 
+  const enterSavesComment = useConfigValue('enterSavesComment');
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (skillAc.onKeyDown(e)) return;
     if (mentionAc.onKeyDown(e)) return;
@@ -577,17 +610,17 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       }
       return;
     }
-    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !e.nativeEvent.isComposing) {
+    if (isCommentSubmitKey(e, enterSavesComment)) {
       e.preventDefault();
       handleSubmit();
     }
   };
 
-  const headerLabel = isGlobal
+  const headerLabel = headerText ?? (isGlobal
     ? 'Global Comment'
     : contextText
       ? `"${contextText.length > 50 ? contextText.slice(0, 50) + '...' : contextText}"`
-      : 'Comment';
+      : 'Comment');
 
   const canSubmit =
     hasUnsavedContent ||
@@ -630,6 +663,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       <div
         data-comment-popover="true"
         className="pn-visible-viewport-overlay z-[100] flex items-center justify-center"
+        style={zIndex !== undefined ? { zIndex } : undefined}
       >
         {/* Backdrop */}
         <button
@@ -726,6 +760,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               activeOptionId={activeComposerOptionId}
             />
             <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
+            {mentionSource?.renderNotice?.(mentionChipPeople)}
             <MentionAutocompleteMenu
               id={mentionListboxId}
               menu={mentionAc.menu}
@@ -796,6 +831,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       className={`fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl flex flex-col${yieldClass}`}
       style={dragPosition
         ? {
+            ...(zIndex !== undefined ? { zIndex } : {}),
             top: dragPosition.top,
             left: dragPosition.left,
             width: position.width,
@@ -803,6 +839,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
             overflowY: showsSkillMenu ? 'visible' : 'auto',
           }
         : {
+            ...(zIndex !== undefined ? { zIndex } : {}),
             top: position.top,
             left: position.left,
             width: position.width,
@@ -879,6 +916,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           activeOptionId={activeComposerOptionId}
         />
         <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
+        {mentionSource?.renderNotice?.(mentionChipPeople)}
         <MentionAutocompleteMenu
           id={mentionListboxId}
           menu={mentionAc.menu}

package/components/DecisionControl.tsx

@@ -8,6 +8,7 @@ import { ConfirmDialog, type ConfirmDialogProps } from './ConfirmDialog';
 import { useDismissablePopover } from '../hooks/useDismissablePopover';
 import { useCompactTouchLayout } from '../hooks/useIsMobile';
 import { cn } from '../lib/utils';
+import { isCommentSubmitKey } from '../utils/commentSubmitKey';
 import type {
   DecisionActionId,
   DecisionComposer,
@@ -57,6 +58,16 @@ export interface DecisionControlProps {
   dismissOnIframeFocus?: boolean;
   /** Confirm surface override; defaults to the ui ConfirmDialog. */
   confirmDialog?: React.ComponentType<ConfirmDialogProps>;
+  /**
+   * Rows rendered under the decisions, inside the same menu (#1057: plan
+   * review's "After approval, switch to" agent picker and Claude Code's
+   * permission-mode line). Not decisions: they never close the menu by
+   * themselves. Interactive rows use `role="menuitem"` or
+   * `role="menuitemradio"` so the arrow keys reach them. Absent: the menu is
+   * the decisions alone, exactly as before. A function receives
+   * `closeMenu`, for a row that leaves the menu (e.g. one opening Settings).
+   */
+  menuFooter?: React.ReactNode | ((api: { closeMenu: () => void }) => React.ReactNode);
 }
 
 const NOTE_MAX_HEIGHT_PX = 144;
@@ -98,6 +109,14 @@ export interface DecisionNoteFieldProps {
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  /**
+   * The field is a COMMENT composer (the review sidebar's "+ General
+   * comment"), so the "Enter saves a comment" setting applies: pass its value
+   * and a plain Enter also submits (Shift+Enter stays a new line). Default
+   * false: in the decision control's own composer a note rides a decision,
+   * and only Mod+Enter fires it.
+   */
+  enterSubmits?: boolean;
 }
 
 /**
@@ -114,6 +133,7 @@ export const DecisionNoteField: React.FC<DecisionNoteFieldProps> = ({
   placeholder = 'Add a note...',
   disabled = false,
   autoFocus = true,
+  enterSubmits = false,
 }) => {
   const ref = useAutoGrow(text);
 
@@ -132,15 +152,15 @@ export const DecisionNoteField: React.FC<DecisionNoteFieldProps> = ({
         onCancel();
         return;
       }
-      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      if (enterSubmits ? isCommentSubmitKey(event, true) : event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
         event.stopPropagation();
         if (!disabled) onSubmit();
       }
-      // Plain Enter falls through: the field is multi-line and Enter's job is
-      // a newline.
+      // Otherwise plain Enter falls through: the field is multi-line and
+      // Enter's job is a newline.
     },
-    [disabled, onCancel, onSubmit],
+    [disabled, enterSubmits, onCancel, onSubmit],
   );
 
   return (
@@ -255,6 +275,7 @@ export const DecisionControl: React.FC<DecisionControlProps> = ({
   labelBreakpoint = 'md',
   dismissOnIframeFocus = false,
   confirmDialog,
+  menuFooter,
 }) => {
   const rootRef = useRef<HTMLDivElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -402,7 +423,9 @@ export const DecisionControl: React.FC<DecisionControlProps> = ({
       const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
       if (!keys.includes(event.key)) return;
       const items = Array.from(
-        popoverRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? [],
+        popoverRef.current?.querySelectorAll<HTMLButtonElement>(
+          '[role="menuitem"]:not(:disabled), [role="menuitemradio"]:not(:disabled)',
+        ) ?? [],
       );
       if (items.length === 0) return;
       event.preventDefault();
@@ -548,6 +571,9 @@ export const DecisionControl: React.FC<DecisionControlProps> = ({
                   />
                 </React.Fragment>
               ))}
+              {typeof menuFooter === 'function'
+                ? menuFooter({ closeMenu: () => closePopover() })
+                : menuFooter}
             </div>
           ) : activeItem?.composer ? (
             <div className="p-2">

package/components/DiagramBlock.tsx

@@ -16,6 +16,7 @@ import { svgContentSize } from './diagram/svgContentSize';
 import type { DiagramComment, DiagramCreateComment } from './diagram/useDiagramComments';
 import type { DiagramRenderState } from './diagram/useDiagramRender';
 import { useTheme } from './ThemeProvider';
+import { LazyBlockBoundary } from './LazyBlockBoundary';
 
 /**
  * A diagram fence in the document: the fence's language picks the engine
@@ -345,7 +346,7 @@ export const DiagramBlock: React.FC<DiagramBlockProps & { kind: DiagramKind }> =
           appears in a node label) can never wrap a <mark> inside the svg. */}
       <div ref={rootRef} className="annotation-exclude my-5 group relative" data-block-id={block.id} data-pinpoint-ignore="" data-diagram-block={kind}>
         {svgReady && !showSource && (
-          <div data-print-hide="" className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
+          <div data-print-hide="" className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100 transition-opacity">
             <button
               type="button"
               onClick={() => setShowSource(true)}
@@ -404,17 +405,21 @@ export const DiagramBlock: React.FC<DiagramBlockProps & { kind: DiagramKind }> =
         )}
       </div>
       {isExpanded && svgReady && typeof document !== 'undefined' && (
-        <Suspense fallback={null}>
-          <DiagramPopout
-            {...viewerProps}
-            open
-            onClose={() => setIsExpanded(false)}
-            title={`${label} diagram`}
-            renderId={`${kind}-${block.id}-popout`}
-            onAskAI={handlePopoutAskAI}
-            dataAttributes={{ 'data-block-id': block.id }}
-          />
-        </Suspense>
+        // A popout chunk that cannot load leaves the inline diagram as it is
+        // and says so under it.
+        <LazyBlockBoundary fallback={(notice) => <div className="mb-5">{notice}</div>}>
+          <Suspense fallback={null}>
+            <DiagramPopout
+              {...viewerProps}
+              open
+              onClose={() => setIsExpanded(false)}
+              title={`${label} diagram`}
+              renderId={`${kind}-${block.id}-popout`}
+              onAskAI={handlePopoutAskAI}
+              dataAttributes={{ 'data-block-id': block.id }}
+            />
+          </Suspense>
+        </LazyBlockBoundary>
       )}
     </>
   );

package/components/EditorAnnotationCard.tsx

@@ -42,7 +42,7 @@ export const EditorAnnotationCard: React.FC<EditorAnnotationCardProps> = ({ anno
         {onDelete && (
           <button
             onClick={(e) => { e.stopPropagation(); onDelete(); }}
-            className="ml-auto relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 hover:text-destructive"
+            className="ml-auto relative rounded-md p-1.5 text-muted-foreground transition-colors before:absolute before:-inset-1.5 before:content-[''] opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100 hover:text-destructive"
             title="Delete annotation"
           >
             <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

package/components/ExportModal.tsx

@@ -10,6 +10,7 @@ import React, { useState, useEffect } from 'react';
 import { getObsidianSettings, getEffectiveVaultPath } from '../utils/obsidian';
 import { getBearSettings } from '../utils/bear';
 import { getOctarineSettings } from '../utils/octarine';
+import { getNotionParentPageId, isNotionAvailable } from '../utils/notion';
 import { wrapFeedbackForAgent } from '../utils/parser';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { noteServerSessionMismatch, withServerSession } from '../utils/serverSession';
@@ -20,11 +21,12 @@ interface SaveToNotesPayload {
   obsidian?: object;
   bear?: object;
   octarine?: object;
+  notion?: object;
 }
 
 /** Parsed response from the notes endpoint. */
 interface SaveToNotesResult {
-  results?: Record<string, { success?: boolean; error?: string }>;
+  results?: Record<string, { success?: boolean; error?: string; url?: string }>;
 }
 
 /** Default save-to-notes wire: today's literal POST to /api/save-notes. */
@@ -74,7 +76,7 @@ interface ExportModalProps {
 
 type Tab = 'share' | 'annotations' | 'notes';
 
-type SaveTarget = 'obsidian' | 'bear' | 'octarine';
+type SaveTarget = 'obsidian' | 'bear' | 'octarine' | 'notion';
 type SaveStatus = 'idle' | 'saving' | 'success' | 'error';
 
 export const ExportModal: React.FC<ExportModalProps> = ({
@@ -99,8 +101,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const defaultTab = initialTab || (sharingEnabled ? 'share' : 'annotations');
   const [activeTab, setActiveTab] = useState<Tab>(defaultTab);
   const [copied, setCopied] = useState<'short' | 'full' | 'annotations' | false>(false);
-  const [saveStatus, setSaveStatus] = useState<Record<SaveTarget, SaveStatus>>({ obsidian: 'idle', bear: 'idle', octarine: 'idle' });
+  const [saveStatus, setSaveStatus] = useState<Record<SaveTarget, SaveStatus>>({ obsidian: 'idle', bear: 'idle', octarine: 'idle', notion: 'idle' });
   const [saveErrors, setSaveErrors] = useState<Record<string, string>>({});
+  const [savedUrls, setSavedUrls] = useState<Partial<Record<SaveTarget, string>>>({});
 
   // Reset tab when modal opens
   useEffect(() => {
@@ -112,8 +115,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   // Reset save status when modal opens
   useEffect(() => {
     if (isOpen) {
-      setSaveStatus({ obsidian: 'idle', bear: 'idle', octarine: 'idle' });
+      setSaveStatus({ obsidian: 'idle', bear: 'idle', octarine: 'idle', notion: 'idle' });
       setSaveErrors({});
+      setSavedUrls({});
     }
   }, [isOpen]);
 
@@ -127,6 +131,10 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const isObsidianReady = obsidianSettings.enabled && effectiveVaultPath.trim().length > 0;
   const isBearReady = bearSettings.enabled;
   const isOctarineReady = octarineSettings.enabled && octarineSettings.workspace.trim().length > 0;
+  // Notion shows only when this server offers it (NOTION_TOKEN set, local session).
+  const notionAvailable = isNotionAvailable();
+  const notionParentPageId = getNotionParentPageId();
+  const isNotionReady = notionParentPageId !== null;
 
   const handleCopy = async (text: string, which: 'short' | 'full' | 'annotations') => {
     if (await copyTextToClipboard(text)) {
@@ -162,7 +170,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     setSaveStatus(prev => ({ ...prev, [target]: 'saving' }));
     setSaveErrors(prev => { const next = { ...prev }; delete next[target]; return next; });
 
-    const body: { obsidian?: object; bear?: object; octarine?: object } = {};
+    const body: { obsidian?: object; bear?: object; octarine?: object; notion?: object } = {};
 
     if (target === 'obsidian') {
       body.obsidian = {
@@ -183,6 +191,9 @@ export const ExportModal: React.FC<ExportModalProps> = ({
         folder: octarineSettings.folder || 'plannotator',
       };
     }
+    if (target === 'notion' && notionParentPageId) {
+      body.notion = { plan: markdown, parentPageId: notionParentPageId };
+    }
 
     try {
       const data = await onSaveToNotes(body);
@@ -190,6 +201,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
 
       if (result?.success) {
         setSaveStatus(prev => ({ ...prev, [target]: 'success' }));
+        if (result.url) setSavedUrls(prev => ({ ...prev, [target]: result.url! }));
       } else {
         setSaveStatus(prev => ({ ...prev, [target]: 'error' }));
         setSaveErrors(prev => ({ ...prev, [target]: result?.error || 'Save failed' }));
@@ -205,10 +217,11 @@ export const ExportModal: React.FC<ExportModalProps> = ({
     if (isObsidianReady) targets.push('obsidian');
     if (isBearReady) targets.push('bear');
     if (isOctarineReady) targets.push('octarine');
+    if (isNotionReady) targets.push('notion');
     await Promise.all(targets.map(t => handleSaveToNotes(t)));
   };
 
-  const readyCount = [isObsidianReady, isBearReady, isOctarineReady].filter(Boolean).length;
+  const readyCount = [isObsidianReady, isBearReady, isOctarineReady, isNotionReady].filter(Boolean).length;
 
   // Determine which tabs to show
   const showTabs = sharingEnabled || showNotesTab;
@@ -538,12 +551,69 @@ export const ExportModal: React.FC<ExportModalProps> = ({
                 )}
               </div>
 
+              {/* Notion */}
+              {notionAvailable && (
+                <div className="border border-border rounded-lg p-3 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2 h-2 rounded-full ${isNotionReady ? 'bg-success' : 'bg-muted-foreground/30'}`} />
+                      <span className="text-sm font-medium">Notion</span>
+                    </div>
+                    {isNotionReady ? (
+                      <button
+                        onClick={() => handleSaveToNotes('notion')}
+                        disabled={saveStatus.notion === 'saving'}
+                        className={`px-3 py-1 rounded-md text-xs font-medium transition-all ${
+                          saveStatus.notion === 'success'
+                            ? 'bg-success/15 text-success'
+                            : saveStatus.notion === 'error'
+                              ? 'bg-destructive/15 text-destructive'
+                              : saveStatus.notion === 'saving'
+                                ? 'bg-muted text-muted-foreground opacity-50'
+                                : 'bg-primary text-primary-foreground hover:opacity-90'
+                        }`}
+                      >
+                        {saveStatus.notion === 'saving' ? 'Saving...'
+                          : saveStatus.notion === 'success' ? 'Saved'
+                          : saveStatus.notion === 'error' ? 'Failed'
+                          : 'Save'}
+                      </button>
+                    ) : (
+                      <span className="text-xs text-muted-foreground">Not configured</span>
+                    )}
+                  </div>
+                  {isNotionReady && (
+                    <div className="text-[10px] text-muted-foreground/70">
+                      Parent page: {notionParentPageId}
+                    </div>
+                  )}
+                  {savedUrls.notion?.startsWith('https://') && (
+                    <a
+                      href={savedUrls.notion}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="block text-[10px] text-primary hover:underline truncate"
+                    >
+                      Open saved page
+                    </a>
+                  )}
+                  {!isNotionReady && (
+                    <div className="text-[10px] text-muted-foreground/70">
+                      Enable in Settings &gt; Saving &gt; Notion
+                    </div>
+                  )}
+                  {saveErrors.notion && (
+                    <div className="text-[10px] text-destructive">{saveErrors.notion}</div>
+                  )}
+                </div>
+              )}
+
               {/* Save All button */}
               {readyCount >= 2 && (
                 <div className="flex justify-end">
                   <button
                     onClick={handleSaveAll}
-                    disabled={saveStatus.obsidian === 'saving' || saveStatus.bear === 'saving' || saveStatus.octarine === 'saving'}
+                    disabled={saveStatus.obsidian === 'saving' || saveStatus.bear === 'saving' || saveStatus.octarine === 'saving' || saveStatus.notion === 'saving'}
                     className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
                   >
                     Save All

package/components/HostTitle.tsx

@@ -33,9 +33,6 @@ export function getComponentTooltips(): boolean {
   return componentTooltips;
 }
 
-/** How long the pointer rests before a component tooltip opens. */
-const HOST_TITLE_DELAY_MS = 150;
-
 /**
  * Where a tooltip for `trigger` is portaled: the open native `<dialog>` it
  * sits in (a popup in the body is drawn under the dialog's top layer), else
@@ -83,7 +80,6 @@ export function HostTitle({
       content={title}
       side={side}
       wide
-      delayDuration={HOST_TITLE_DELAY_MS}
       escapePassesThrough
       shouldOpen={(trigger) => {
         if (noHover() || (cut && !isTextCut(trigger))) return false;

package/components/HtmlSurfaceControls.tsx

@@ -31,6 +31,7 @@
  */
 import React from 'react';
 import { Tooltip } from './Tooltip';
+import { modKey } from '../utils/platform';
 import { formatShortcutBindingText, formatShortcutBindingTokens } from '../shortcuts/core';
 import { htmlAnnotateShortcuts } from '../shortcuts/plan-review/htmlAnnotate.shortcuts';
 
@@ -135,7 +136,7 @@ export interface HtmlSurfaceControlLabels {
 export const DEFAULT_HTML_SURFACE_CONTROL_LABELS: Required<
   Omit<HtmlSurfaceControlLabels, 'annotateLabel' | 'interactLabel'>
 > = {
-  annotateTitle: 'Annotate mode: click an element or select text to comment. Esc to interact',
+  annotateTitle: `Annotate mode: click an element or select text to comment; links open (${modKey}-click one to comment on it). Esc to interact`,
   interactTitle: 'Interact mode: clicks reach the page (text selection still comments). Click to annotate',
   hideTools: 'Hide tools',
   showTools: 'Show tools',

package/components/ImageAnnotator/Toolbar.tsx

@@ -15,6 +15,8 @@ interface ToolbarProps {
   onRedo?: () => void;
   onClear: () => void;
   onSave: () => void;
+  /** The key named in the ✓'s title: Escape by default; Enter where Escape cancels (`escapeCancels`). */
+  saveKey?: 'Escape' | 'Enter';
 }
 
 const PenIcon = () => (
@@ -85,6 +87,15 @@ const TOOLS: { id: Tool; icon: React.FC; label: string }[] = [
 
 const STROKE_SIZES = [3, 6, 10, 16, 24];
 
+/** The colours' names, for a screen reader (the swatch shows only the colour). */
+const COLOR_NAMES: Record<string, string> = {
+  '#ef4444': 'Red',
+  '#eab308': 'Yellow',
+  '#22c55e': 'Green',
+  '#3b82f6': 'Blue',
+  '#ffffff': 'White',
+};
+
 export const Toolbar: React.FC<ToolbarProps> = ({
   tool,
   color,
@@ -98,6 +109,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   onRedo,
   onClear,
   onSave,
+  saveKey = 'Escape',
 }) => {
   const currentSizeIndex = STROKE_SIZES.indexOf(strokeSize);
   const canDecrease = currentSizeIndex > 0;
@@ -121,6 +133,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             type="button"
             onClick={() => onToolChange(id)}
             title={label}
+            aria-label={label}
+            aria-pressed={tool === id}
             className={`p-1.5 rounded transition-colors ${
               tool === id
                 ? 'bg-primary text-primary-foreground'
@@ -141,6 +155,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => canDecrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex - 1])}
           disabled={!canDecrease}
           title="Smaller stroke"
+          aria-label="Smaller stroke"
           className={`p-1 rounded transition-colors ${
             canDecrease
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -152,6 +167,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         <div
           className="w-5 h-5 flex items-center justify-center"
           title={`Stroke size: ${strokeSize}`}
+          role="img"
+          aria-label={`Stroke size: ${strokeSize}`}
         >
           <div
             className="rounded-full"
@@ -167,6 +184,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={() => canIncrease && onStrokeSizeChange(STROKE_SIZES[currentSizeIndex + 1])}
           disabled={!canIncrease}
           title="Larger stroke"
+          aria-label="Larger stroke"
           className={`p-1 rounded transition-colors ${
             canIncrease
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -186,6 +204,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             key={c}
             type="button"
             onClick={() => onColorChange(c)}
+            aria-label={`Colour: ${COLOR_NAMES[c] ?? c}`}
+            aria-pressed={color === c}
             className={`w-5 h-5 rounded-full border-2 transition-transform ${
               color === c ? 'scale-110 border-foreground' : 'border-transparent hover:scale-105'
             }`}
@@ -202,6 +222,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         onClick={onUndo}
         disabled={!canUndo}
         title="Undo (Cmd+Z)"
+        aria-label="Undo"
         className={`p-1.5 rounded transition-colors ${
           canUndo
             ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -217,6 +238,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
           onClick={onRedo}
           disabled={!canRedo}
           title="Redo (Cmd+Shift+Z)"
+          aria-label="Redo"
           className={`p-1.5 rounded transition-colors ${
             canRedo
               ? 'hover:bg-muted text-muted-foreground hover:text-foreground'
@@ -232,6 +254,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         type="button"
         onClick={onClear}
         title="Clear all"
+        aria-label="Clear all"
         className="p-1.5 rounded transition-colors hover:bg-muted text-muted-foreground hover:text-destructive"
       >
         <ClearIcon />
@@ -245,7 +268,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
       <button
         type="button"
         onClick={onSave}
-        title="Save (Esc)"
+        title={saveKey === 'Enter' ? 'Save (Enter)' : 'Save (Esc)'}
+        aria-label="Save"
         className="shrink-0 p-1.5 rounded transition-colors bg-success text-success-foreground hover:opacity-90"
       >
         <CheckIcon />