@plannotator/ui 0.30.0 → 0.32.0

package/components/AnnotationToolstrip.tsx

@@ -25,6 +25,11 @@ interface AnnotationToolstripProps {
    * narrow and leaves room for the diff badges.
    */
   iconOnly?: boolean;
+  /**
+   * Hide the drag/pinpoint input group entirely. Live app sessions are
+   * pinpoint-only, so the switch would be a dead control there.
+   */
+  hideInputMethodSwitch?: boolean;
 }
 
 export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
@@ -36,6 +41,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
   compact = false,
   showHelpLink = true,
   iconOnly = false,
+  hideInputMethodSwitch = false,
 }) => {
   const [showHelp, setShowHelp] = useState(false);
   const [helpTab, setHelpTab] = useState<'selection' | 'plannotator'>('selection');
@@ -50,6 +56,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
     <>
       <div className={`flex items-center flex-wrap ${compact ? 'gap-1' : 'gap-1.5'}`}>
         {/* Input method group */}
+        {!hideInputMethodSwitch && (
         <div className="inline-flex items-center gap-0.5 bg-muted/50 rounded-lg p-0.5 border border-border/30">
           <ToolstripButton
             active={inputMethod === 'drag'}
@@ -89,6 +96,7 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
             }
           />
         </div>
+        )}
 
         {/* Action mode group */}
         <div className="inline-flex items-center gap-0.5 bg-muted/50 rounded-lg p-0.5 border border-border/30">
@@ -321,6 +329,7 @@ const ToolstripButton: React.FC<{
       onClick={onClick}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
+      aria-pressed={active}
       className={`relative flex items-center h-7 rounded-md overflow-hidden ${colorClass}`}
       style={{ width: currentWidth, transition }}
     >

package/components/CommentPopover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import type { ImageAttachment } from '../types';
 import { AttachmentsButton } from './AttachmentsButton';
@@ -9,6 +9,12 @@ import { hasUnsavedCommentContent } from '../utils/commentContent';
 import { useSkillReferenceAutocomplete } from '../hooks/useSkillReferenceAutocomplete';
 import { HumanOnlySkillNotice, SkillReferenceMenu } from './SkillReferenceMenu';
 import type { SkillReferenceToken } from '../utils/skillReferences';
+import {
+  hasPrimaryCoarsePointer,
+  shouldUseExpandedComposer,
+  useVisibleViewportBounds,
+  type VisibleViewportBounds,
+} from '../hooks/useViewportEnvironment';
 
 export interface CommentAskAIContext {
   kind: 'general' | 'selection';
@@ -47,6 +53,14 @@ interface CommentPopoverProps {
   initialText?: string;
   /** Called on submit with comment text and optional images */
   onSubmit: (text: string, images?: ImageAttachment[]) => void;
+  /**
+   * One-click "Looks good" action (comment-only HTML/live surfaces, where
+   * pinpoint clicks open this composer directly and never see the selection
+   * toolbar's 👍). Renders a thumbs-up button in the footer; disabled once
+   * the user has typed or attached anything, so a click can never discard a
+   * draft. The parent owns annotation creation and closing.
+   */
+  onQuickLookGood?: () => void;
   /** Optional live draft observer for submit paths outside the popover. */
   onDraftChange?: (text: string, images?: ImageAttachment[]) => void;
   /** Called when popover is closed/cancelled */
@@ -99,19 +113,40 @@ function useCommentDraftSync(draftKey: string | undefined, text: string, images:
   }, [draftKey, text, images]);
 }
 
-function computePosition(anchorRect: DOMRect): { top: number; left: number; flipAbove: boolean; width: number } {
-  const spaceBelow = window.innerHeight - anchorRect.bottom;
-  const flipAbove = spaceBelow < 280;
-  const width = Math.min(MAX_POPOVER_WIDTH, window.innerWidth - 32);
+interface CommentPopoverPosition {
+  top: number;
+  left: number;
+  flipAbove: boolean;
+  width: number;
+  maxHeight: number;
+  requiresExpanded: boolean;
+}
+
+export function computeCommentPopoverPosition(
+  anchorRect: Pick<DOMRect, 'top' | 'right' | 'bottom' | 'left' | 'width'>,
+  bounds: VisibleViewportBounds,
+): CommentPopoverPosition {
+  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;
+  const width = Math.min(MAX_POPOVER_WIDTH, bounds.width);
 
   const top = flipAbove
     ? anchorRect.top - GAP
     : anchorRect.bottom + GAP;
 
   let left = anchorRect.left + anchorRect.width / 2 - width / 2;
-  left = Math.max(16, Math.min(left, window.innerWidth - width - 16));
-
-  return { top, left, flipAbove, width };
+  left = Math.max(bounds.left, Math.min(left, bounds.right - width));
+  const maxHeight = flipAbove ? spaceAbove : spaceBelow;
+
+  return {
+    top,
+    left,
+    flipAbove,
+    width,
+    maxHeight,
+    requiresExpanded: maxHeight < 280,
+  };
 }
 
 export const CommentPopover: React.FC<CommentPopoverProps> = ({
@@ -121,6 +156,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   isGlobal,
   initialText = '',
   onSubmit,
+  onQuickLookGood,
   onDraftChange,
   onClose,
   draftKey,
@@ -137,11 +173,27 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   captureStrayKeys = false,
   yieldState,
 }) => {
-  const [mode, setMode] = useState<'popover' | 'dialog'>('popover');
+  const visibleBounds = useVisibleViewportBounds(16);
+  const coarsePointer = hasPrimaryCoarsePointer();
+  const prefersExpandedComposer = shouldUseExpandedComposer({
+    bounds: visibleBounds,
+    coarsePointer,
+  });
+  const [mode, setMode] = useState<'popover' | 'dialog'>(() =>
+    prefersExpandedComposer ? 'dialog' : 'popover'
+  );
+  // Dialog mode has two very different origins. Either the viewport PREFERS an
+  // expanded composer (phones, small windows), or the anchor simply has no room
+  // for a popover and the geometry FORCED it. Only the forced kind can bounce:
+  // collapsing recomputes the same geometry and immediately re-expands, which
+  // ate Escape and made the Collapse button a no-op. Track which one we are in.
+  const [dialogIsForced, setDialogIsForced] = useState(false);
+  // A preference-driven dialog is never the forced kind.
+  const forcedDialog = dialogIsForced && !prefersExpandedComposer;
   const initialDraft = draftKey ? draftStore.get(draftKey) : undefined;
   const [text, setText] = useState(initialDraft?.text ?? initialText);
   const [images, setImages] = useState<ImageAttachment[]>(allowImages ? initialDraft?.images ?? [] : []);
-  const [position, setPosition] = useState<{ top: number; left: number; flipAbove: boolean; width: number } | null>(null);
+  const [position, setPosition] = useState<CommentPopoverPosition | null>(null);
   // Direction of an open popover that has scrolled out of view, or null when on-screen.
   const [offscreen, setOffscreen] = useState<'above' | 'below' | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -150,6 +202,18 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   const hasUnsavedContentRef = useRef(hasUnsavedContent);
   hasUnsavedContentRef.current = hasUnsavedContent;
   const { dragPosition, dragHandleProps, wasDragged, reset: resetDrag } = useDraggable(popoverRef);
+  const openingFocusRef = useRef<HTMLElement | null>(
+    typeof document !== 'undefined'
+      && document.activeElement instanceof HTMLElement
+      && document.activeElement !== document.body
+      && document.activeElement !== document.documentElement
+      ? document.activeElement
+      : anchorEl ?? null,
+  );
+
+  useEffect(() => {
+    if (prefersExpandedComposer && mode === 'popover') setMode('dialog');
+  }, [mode, prefersExpandedComposer]);
 
   useEffect(() => {
     const nextDraft = draftKey ? draftStore.get(draftKey) : undefined;
@@ -167,23 +231,29 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   useEffect(() => { resetDrag(); }, [anchorEl, anchorRect, resetDrag]);
   useEffect(() => { if (mode === 'popover') resetDrag(); }, [mode, resetDrag]);
 
-  // Track anchor position on scroll/resize (popover mode only, not after user drag)
+  // Track anchor position on scroll and observed viewport changes (popover
+  // mode only, not after user drag).
   useEffect(() => {
     if (mode !== 'popover' || wasDragged) return;
 
     const update = () => {
       const rect = anchorEl?.getBoundingClientRect() ?? anchorRect;
-      if (rect) setPosition(computePosition(rect));
+      if (!rect) return;
+      const nextPosition = computeCommentPopoverPosition(rect, visibleBounds);
+      if (nextPosition.requiresExpanded) {
+        setDialogIsForced(true);
+        setMode('dialog');
+        return;
+      }
+      setPosition(nextPosition);
     };
 
     update();
     window.addEventListener('scroll', update, true);
-    window.addEventListener('resize', update);
     return () => {
       window.removeEventListener('scroll', update, true);
-      window.removeEventListener('resize', update);
     };
-  }, [anchorEl, anchorRect, mode, wasDragged]);
+  }, [anchorEl, anchorRect, mode, visibleBounds, wasDragged]);
 
   // Surface a "jump back" arrow when an open popover scrolls out of view.
   // Re-measures whenever the popover repositions (position updates every scroll
@@ -194,14 +264,12 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       const el = popoverRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
-      if (rect.bottom < 8) setOffscreen('above');
-      else if (rect.top > window.innerHeight - 8) setOffscreen('below');
+      if (rect.bottom < visibleBounds.top) setOffscreen('above');
+      else if (rect.top > visibleBounds.bottom) setOffscreen('below');
       else setOffscreen(null);
     };
     measure();
-    window.addEventListener('resize', measure);
-    return () => window.removeEventListener('resize', measure);
-  }, [position, dragPosition, mode]);
+  }, [position, dragPosition, mode, visibleBounds]);
 
   const scrollToPopover = useCallback(() => {
     anchorEl?.scrollIntoView({ block: 'center', behavior: 'smooth' });
@@ -212,19 +280,56 @@ 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 focusOnMountRef = useCallback((el: HTMLTextAreaElement | null) => {
     textareaRef.current = el;
-    if (!el) return;
+    if (!el || !shouldAutoFocus) return;
     setTimeout(() => {
       if (!el.isConnected) return;
       el.focus();
       el.selectionStart = el.selectionEnd = el.value.length;
     }, 0);
+  }, [shouldAutoFocus]);
+
+  // A touch-opened composer deliberately does not focus the textarea (and
+  // summon the software keyboard), but hardware-keyboard users still need a
+  // coherent focus target and Escape dismissal.
+  useEffect(() => {
+    if (mode !== 'dialog' || shouldAutoFocus) return;
+    const timer = setTimeout(() => {
+      if (!popoverRef.current?.isConnected) return;
+      popoverRef.current.focus({ preventScroll: true });
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [mode, shouldAutoFocus]);
+
+  const restoreOpeningFocus = useCallback(() => {
+    const target = openingFocusRef.current;
+    requestAnimationFrame(() => {
+      if (!target?.isConnected) return;
+      target.focus({ preventScroll: true });
+    });
   }, []);
 
+  const handleClose = useCallback(
+    (focusDisposition: 'restore-opener' | 'preserve-pointer-target' = 'restore-opener') => {
+      if (draftKey) {
+        if (hasUnsavedCommentContent(text, allowImages ? images : [])) {
+          draftStore.set(draftKey, { text, images: allowImages ? images : [] });
+        } else {
+          draftStore.delete(draftKey);
+        }
+      }
+      onClose();
+      if (focusDisposition === 'restore-opener') restoreOpeningFocus();
+    },
+    [allowImages, draftKey, images, onClose, restoreOpeningFocus, text],
+  );
+
   // Click-outside for popover mode
   useEffect(() => {
     if (mode !== 'popover') return;
+    const shiftSelectionActive = Boolean(targetChips?.length);
 
     const handlePointerDown = (e: PointerEvent) => {
       const target = e.target as Node | null;
@@ -234,12 +339,16 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       const el = target as HTMLElement;
       if (el.closest?.('[data-popover-layer]')) return;
       if (hasUnsavedContentRef.current) return;
-      onClose();
+      // A same-document multi-select target receives pointerdown before click.
+      // Preserve the existing draft so the following Shift-click can extend
+      // it instead of silently replacing it with a new one.
+      if (shiftSelectionActive && e.shiftKey) return;
+      handleClose('preserve-pointer-target');
     };
 
     document.addEventListener('pointerdown', handlePointerDown, true);
     return () => document.removeEventListener('pointerdown', handlePointerDown, true);
-  }, [mode, onClose]);
+  }, [handleClose, mode, targetChips?.length]);
 
   // Focus choreography (multi-select): after a shift-click adds/removes a
   // target, focus returns to the textarea so typing continues uninterrupted.
@@ -347,8 +456,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     if (hasUnsavedContent || canSubmitEmpty) {
       if (draftKey) draftStore.delete(draftKey);
       onSubmit(text, allowImages && images.length > 0 ? images : undefined);
+      restoreOpeningFocus();
     }
-  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent]);
+  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent, restoreOpeningFocus]);
 
   const handleAskAI = useCallback(async () => {
     const question = text.trim();
@@ -382,15 +492,24 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     textareaRef,
     enabled: skillReferences,
   });
+  const skillListboxId = `skill-reference-listbox-${useId().replace(/:/g, '')}`;
+  const activeSkillOptionId =
+    skillAc.menu?.activeIndex === null || skillAc.menu?.activeIndex === undefined
+      ? undefined
+      : `${skillListboxId}-option-${skillAc.menu.activeIndex}`;
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (skillAc.onKeyDown(e)) return;
     if (e.key === 'Escape') {
       e.stopPropagation();
       if (mode === 'dialog') {
-        setMode('popover');
+        // Collapsing a forced dialog is geometrically impossible, so Escape
+        // closes it (draft-preserving) instead of being swallowed by the
+        // re-expand.
+        if (prefersExpandedComposer || forcedDialog) handleClose();
+        else setMode('popover');
       } else {
-        onClose();
+        handleClose();
       }
       return;
     }
@@ -411,11 +530,34 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     (allowEmptySubmit && initialText.trim().length > 0);
   const canAskAI = !!onAskAI && !askAIDisabled && text.trim().length > 0;
 
+  // Shared by both footers. Disabled once anything is typed or attached so a
+  // click can never discard a draft; with content present, Save is the path.
+  const quickLookGoodButton = onQuickLookGood ? (
+    <button
+      type="button"
+      onClick={onQuickLookGood}
+      disabled={hasUnsavedContent}
+      className="inline-flex items-center gap-1 px-2 py-1.5 text-xs font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-green-500/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+      title={hasUnsavedContent ? 'Clear the comment to use Looks good' : 'Add "Looks good" without typing'}
+    >
+      <span aria-hidden="true">👍</span>
+      Looks good
+    </button>
+  ) : null;
+
   if (mode === 'dialog') {
     return createPortal(
-      <div data-comment-popover="true" className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      <div
+        data-comment-popover="true"
+        className="pn-visible-viewport-overlay z-[100] flex items-center justify-center"
+      >
         {/* Backdrop */}
-        <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+        <button
+          type="button"
+          aria-label="Dismiss comment"
+          className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+          onClick={() => handleClose()}
+        />
 
         {/* Dialog card */}
         {/* The expanded dialog deliberately does not yield: it is an explicit
@@ -424,11 +566,21 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
             meaningless there. */}
         <div
           ref={popoverRef}
-          className="relative w-full max-w-xl bg-popover border border-border rounded-xl shadow-2xl flex flex-col"
+          role="dialog"
+          aria-modal="true"
+          aria-label={isGlobal ? 'Global comment' : 'Comment'}
+          tabIndex={-1}
+          className="relative w-full max-w-xl max-h-full min-h-0 bg-popover border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden"
           style={{
             animation: 'comment-dialog-in 0.15s ease-out',
           }}
           onPointerDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => {
+            if (e.key !== 'Escape') return;
+            e.preventDefault();
+            e.stopPropagation();
+            handleClose();
+          }}
         >
           <style>{`
             @keyframes comment-dialog-in {
@@ -443,15 +595,17 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               {headerLabel}
             </span>
             <div className="flex items-center gap-1">
+              {!prefersExpandedComposer && !forcedDialog && (
+                <button
+                  onClick={() => { setDialogIsForced(false); setMode('popover'); }}
+                  className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                  title="Collapse"
+                >
+                  <CollapseIcon />
+                </button>
+              )}
               <button
-                onClick={() => setMode('popover')}
-                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-                title="Collapse"
-              >
-                <CollapseIcon />
-              </button>
-              <button
-                onClick={onClose}
+                onClick={() => handleClose()}
                 className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
                 title="Close"
               >
@@ -463,9 +617,10 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           {chipsRow}
 
           {/* Textarea */}
-          <div className="relative px-4 py-3 flex-1">
+          <div className="relative px-4 py-3 min-h-0 flex-1 overflow-y-auto">
             {skillAc.menu && (
               <SkillReferenceMenu
+                id={skillListboxId}
                 items={skillAc.menu.items}
                 activeIndex={skillAc.menu.activeIndex}
                 onSelect={skillAc.select}
@@ -478,16 +633,19 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               onKeyDown={handleKeyDown}
               onSelectCaret={skillAc.onSelect}
               placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
-              sizeClassName="min-h-48 max-h-96"
+              sizeClassName="min-h-32 max-h-full"
               skillReferences={skillReferences}
               tokens={skillAc.referenceTokens}
+              listboxId={skillListboxId}
+              listboxOpen={skillAc.menu !== null}
+              activeOptionId={activeSkillOptionId}
             />
             <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
           </div>
 
           {/* Footer — DOM order sets tab order (Save first); row-reverse keeps the visual layout unchanged */}
-          <div className="flex flex-row-reverse items-center justify-between px-4 py-3 border-t border-border/50">
-            <div className="flex flex-row-reverse items-center gap-3">
+          <div className="flex flex-row-reverse flex-wrap items-center justify-between gap-2 px-4 py-3 border-t border-border/50">
+            <div className="flex flex-row-reverse flex-wrap items-center gap-3">
               <button
                 onClick={handleSubmit}
                 disabled={!canSubmit}
@@ -495,7 +653,10 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
               >
                 {isGlobal ? 'Add' : 'Save'}
               </button>
-              <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+              {!coarsePointer && (
+                <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+              )}
+              {quickLookGoodButton}
               {onAskAI && (
                 <button
                   onClick={handleAskAI}
@@ -547,11 +708,19 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
         data-comment-popover="true"
       className={`fixed z-[100] bg-popover border border-border rounded-xl shadow-2xl flex flex-col${yieldClass}`}
       style={dragPosition
-        ? { top: dragPosition.top, left: dragPosition.left, width: position.width }
+        ? {
+            top: dragPosition.top,
+            left: dragPosition.left,
+            width: position.width,
+            maxHeight: visibleBounds.height,
+            overflowY: 'auto',
+          }
         : {
             top: position.top,
             left: position.left,
             width: position.width,
+            maxHeight: position.maxHeight,
+            overflowY: 'auto',
             ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
             animation: position.flipAbove
               ? 'comment-popover-in-above 0.15s ease-out'
@@ -579,14 +748,14 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
         </span>
         <div className="flex items-center gap-1">
           <button
-            onClick={() => setMode('dialog')}
+            onClick={() => { setDialogIsForced(false); setMode('dialog'); }}
             className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
             title="Expand"
           >
             <ExpandIcon />
           </button>
           <button
-            onClick={onClose}
+            onClick={() => handleClose()}
             className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
             title="Close"
           >
@@ -601,6 +770,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
       <div className="relative px-3 py-2">
         {skillAc.menu && (
           <SkillReferenceMenu
+            id={skillListboxId}
             items={skillAc.menu.items}
             activeIndex={skillAc.menu.activeIndex}
             onSelect={skillAc.select}
@@ -616,6 +786,9 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           sizeClassName="max-h-64 min-h-[4.5rem]"
           skillReferences={skillReferences}
           tokens={skillAc.referenceTokens}
+          listboxId={skillListboxId}
+          listboxOpen={skillAc.menu !== null}
+          activeOptionId={activeSkillOptionId}
         />
         <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
       </div>
@@ -630,7 +803,10 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
           >
             {isGlobal ? 'Add' : 'Save'}
           </button>
-          <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+          {!coarsePointer && (
+            <span className="text-[10px] text-muted-foreground">{submitHint}</span>
+          )}
+          {quickLookGoodButton}
           {onAskAI && (
             <button
               onClick={handleAskAI}
@@ -682,6 +858,10 @@ interface ComposerTextareaProps {
   tokens: SkillReferenceToken[];
   /** Off → render the plain pre-feature textarea, byte-for-byte. */
   skillReferences: boolean;
+  /** ARIA relationship to the skill-reference listbox. */
+  listboxId: string;
+  listboxOpen: boolean;
+  activeOptionId?: string;
 }
 
 /**
@@ -706,6 +886,9 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
   textareaRef,
   tokens,
   skillReferences,
+  listboxId,
+  listboxOpen,
+  activeOptionId,
 }) => {
   const overlayRef = useRef<HTMLDivElement>(null);
   const [composing, setComposing] = useState(false);
@@ -735,6 +918,7 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
   if (!skillReferences) {
     return (
       <textarea
+        data-pn-mobile-editable="true"
         ref={attachRef}
         value={value}
         onChange={onChange}
@@ -780,6 +964,7 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
         ref={overlayRef}
         aria-hidden="true"
         data-skill-ref-overlay="true"
+        data-pn-mobile-editable-mirror="true"
         className={`${COMPOSER_TEXT_CLASSES} ${sizeClassName} pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words`}
         style={composing ? { visibility: 'hidden' } : undefined}
       >
@@ -787,6 +972,13 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
         {'\n'}
       </div>
       <textarea
+        data-pn-mobile-editable="true"
+        aria-label={placeholder}
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        aria-controls={listboxOpen ? listboxId : undefined}
+        aria-owns={listboxOpen ? listboxId : undefined}
+        aria-activedescendant={activeOptionId}
         ref={attachRef}
         value={value}
         onChange={onChange}