@plannotator/ui 0.39.0 → 0.40.0

package/components/AnnotationPanel.tsx

@@ -8,6 +8,8 @@ import { OverlayScrollArea } from './OverlayScrollArea';
 import { Button } from './ui/button';
 import { cn } from '../lib/utils';
 import { resolveReplyParents, resolveThreadRootTimestamps } from '@plannotator/core/annotation-threads';
+import { ROOT_DOCUMENT_GROUP_KEY } from '../utils/annotationScope';
+import type { AnnotationScope, AnnotationDocumentGroup } from '../utils/annotationScope';
 
 // Card type-word colors. Deletion uses `destructive` (reliably red on every
 // theme, matching the in-document .deletion highlight). Comment uses the
@@ -137,6 +139,26 @@ interface PanelProps {
     *  HTML viewer's onUnanchoredChange report after a refresh). Matching
     *  cards show a small "Unanchored" chip. Absent: no chip, DOM unchanged. */
   unanchoredIds?: ReadonlySet<string>;
+  /**
+   * Multi-document sessions (annotate folder sessions, and any session whose
+   * linked documents carry feedback): which documents the timeline shows.
+   * Supplying this together with `onAnnotationScopeChange` turns on the
+   * `This file | All files` toggle and the grouped cross-file view. Omitting
+   * them — as every host that has not opted in does — leaves the panel exactly
+   * as it was, including the legacy `+N in M other files` affordance.
+   */
+  annotationScope?: AnnotationScope;
+  onAnnotationScopeChange?: (scope: AnnotationScope) => void;
+  /** One group per document carrying feedback, open document first (see
+   *  `groupAnnotationsByDocument`). Only read while the scope is `all`. */
+  documentGroups?: readonly AnnotationDocumentGroup[];
+  /** Select/jump to an annotation by its owning document. A card in another
+   *  document is the host's cue to navigate there first. */
+  onSelectInDocument?: (path: string, id: string) => void;
+  /** Delete an annotation from its owning document's store. */
+  onDeleteInDocument?: (path: string, id: string) => void;
+  /** Edit an annotation in its owning document's store. */
+  onEditInDocument?: (path: string, id: string, updates: Partial<Annotation>) => void;
 }
 
 export const AnnotationPanel: React.FC<PanelProps> = ({
@@ -164,6 +186,12 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   readOnly = false,
   presentation = 'panel',
   unanchoredIds,
+  annotationScope,
+  onAnnotationScopeChange,
+  documentGroups,
+  onSelectInDocument,
+  onDeleteInDocument,
+  onEditInDocument,
 }) => {
   const isMobile = useIsMobile();
   const embedded = presentation === 'embedded';
@@ -190,6 +218,54 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
   });
   const totalCount = annotations.length + codeAnnotations.length + (editorAnnotations?.length ?? 0);
 
+  // --- Cross-file scope (opt-in: a host that passes neither prop is unchanged) ---
+  const scopeEnabled = annotationScope !== undefined && onAnnotationScopeChange !== undefined;
+  const scope: AnnotationScope = scopeEnabled ? annotationScope! : 'current';
+  const groups = documentGroups ?? [];
+  const otherGroups = groups.filter((group) => !group.isCurrent);
+  const otherGroupCount = otherGroups.reduce((n, group) => n + group.annotations.length, 0);
+  const groupedTotal = groups.reduce((n, group) => n + group.annotations.length, 0);
+  const showGroups = scope === 'all' && groups.length > 0;
+  const headerCount = showGroups
+    ? groupedTotal + codeAnnotations.length + (editorAnnotations?.length ?? 0)
+    : totalCount;
+  const [collapsedGroups, setCollapsedGroups] = useState<ReadonlySet<string>>(() => new Set());
+  const toggleGroup = (path: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  };
+  const scopeToggle = scopeEnabled ? (
+    <div
+      data-annotation-scope-toggle="true"
+      role="group"
+      aria-label="Annotation scope"
+      className="flex items-center gap-0.5 rounded-md bg-surface-1/60 p-0.5"
+    >
+      {(['current', 'all'] as const).map((value) => (
+        <button
+          key={value}
+          type="button"
+          data-pn-touch-target="true"
+          data-annotation-scope={value}
+          aria-pressed={scope === value}
+          onClick={() => onAnnotationScopeChange!(value)}
+          className={cn(
+            'cursor-pointer rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors',
+            scope === value
+              ? 'bg-card text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground',
+          )}
+        >
+          {value === 'current' ? 'This file' : 'All files'}
+        </button>
+      ))}
+    </div>
+  ) : null;
+
   // Scroll selected annotation card into view
   useEffect(() => {
     if (!selectedId || !listRef.current) return;
@@ -218,9 +294,9 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
               <h2 className="text-xs font-medium text-foreground">
                 Annotations
               </h2>
-              {totalCount > 0 && (
+              {headerCount > 0 && (
                 <span className="flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary/10 px-1 font-mono text-[10px] font-medium tabular-nums text-primary">
-                  {totalCount}
+                  {headerCount}
                 </span>
               )}
             </div>
@@ -237,19 +313,39 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
               </button>
             )}
           </div>
-          {otherFileAnnotations && otherFileAnnotations.count > 0 && (
-            <button
-              onClick={onOtherFileAnnotationsClick}
-              className="px-3 pb-2 text-[10px] text-primary/70 hover:text-primary transition-colors cursor-pointer"
-              title="Show annotated files in sidebar"
-            >
-              +{otherFileAnnotations.count} in {otherFileAnnotations.files} other file{otherFileAnnotations.files === 1 ? '' : 's'}
-            </button>
+          {scopeEnabled ? (
+            <div className="flex items-center justify-between gap-2 px-3 pb-2">
+              {scopeToggle}
+              {otherGroupCount > 0 && scope === 'current' && (
+                <span className="truncate text-[10px] text-muted-foreground/70">
+                  +{otherGroupCount} elsewhere
+                </span>
+              )}
+            </div>
+          ) : (
+            otherFileAnnotations && otherFileAnnotations.count > 0 && (
+              <button
+                onClick={onOtherFileAnnotationsClick}
+                className="px-3 pb-2 text-[10px] text-primary/70 hover:text-primary transition-colors cursor-pointer"
+                title="Show annotated files in sidebar"
+              >
+                +{otherFileAnnotations.count} in {otherFileAnnotations.files} other file{otherFileAnnotations.files === 1 ? '' : 's'}
+              </button>
+            )
+          )}
+        </div>
+      )}
+
+      {embedded && scopeEnabled && (
+        <div className="flex min-h-11 flex-shrink-0 items-center justify-between gap-2 border-b border-border/50 px-3">
+          {scopeToggle}
+          {otherGroupCount > 0 && scope === 'current' && (
+            <span className="truncate text-[10px] text-muted-foreground/70">+{otherGroupCount} elsewhere</span>
           )}
         </div>
       )}
 
-      {embedded && otherFileAnnotations && otherFileAnnotations.count > 0 && (
+      {embedded && !scopeEnabled && otherFileAnnotations && otherFileAnnotations.count > 0 && (
         <button
           type="button"
           data-pn-touch-target="true"
@@ -267,7 +363,131 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
         {directEdits?.map((item) => (
           <DirectEditsCard key={item.id} {...item} onDiscard={readOnly ? undefined : item.onDiscard} />
         ))}
-        {totalCount === 0 ? (
+        {showGroups ? (
+          <>
+            {groups.map((group) => {
+              const collapsed = collapsedGroups.has(group.path);
+              const sorted = [...group.annotations].sort((a, b) => a.createdA - b.createdA);
+              const threaded = threadReplies(sorted);
+              return (
+                <section key={group.path} data-annotation-group={group.path}>
+                  <button
+                    type="button"
+                    data-pn-touch-target="true"
+                    onClick={() => toggleGroup(group.path)}
+                    aria-expanded={!collapsed}
+                    className="flex w-full cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-left transition-colors hover:bg-surface-1/50"
+                  >
+                    <svg
+                      className={cn('h-2.5 w-2.5 flex-shrink-0 text-muted-foreground/60 transition-transform', collapsed ? '' : 'rotate-90')}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={3}
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                    </svg>
+                    <span
+                      className={cn('min-w-0 flex-1 truncate font-mono text-[10px]', group.isCurrent ? 'text-foreground' : 'text-muted-foreground')}
+                      // The pathless root document (plan review) is keyed by a
+                      // sentinel, which is not something to show a reader.
+                      title={group.path === ROOT_DOCUMENT_GROUP_KEY ? group.label : group.path}
+                    >
+                      {group.label}
+                    </span>
+                    {group.isCurrent && (
+                      <span className="flex-shrink-0 text-[9px] text-muted-foreground/50">open</span>
+                    )}
+                    <span className="flex h-[16px] min-w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-primary/10 px-1 font-mono text-[9px] font-medium tabular-nums text-primary">
+                      {group.annotations.length}
+                    </span>
+                  </button>
+                  {!collapsed && (
+                    <div className="mt-0.5 flex flex-col gap-1.5">
+                      {threaded.map(({ annotation, isReply }) => {
+                        const card = (
+                          <AnnotationCard
+                            annotation={annotation}
+                            isSelected={selectedId === annotation.id}
+                            isMe={isCurrentUser(annotation.author)}
+                            onSelect={() => (group.isCurrent
+                              ? onSelect(annotation.id)
+                              : onSelectInDocument?.(group.path, annotation.id))}
+                            onDelete={() => (group.isCurrent
+                              ? onDelete(annotation.id)
+                              : onDeleteInDocument?.(group.path, annotation.id))}
+                            onEdit={group.isCurrent
+                              ? (onEdit ? (updates: Partial<Annotation>) => onEdit(annotation.id, updates) : undefined)
+                              : (onEditInDocument ? (updates: Partial<Annotation>) => onEditInDocument(group.path, annotation.id, updates) : undefined)}
+                            readOnly={readOnly}
+                            footer={group.isCurrent ? renderCardFooter?.(annotation) : undefined}
+                            unanchored={group.isCurrent ? (unanchoredIds?.has(annotation.id) ?? false) : false}
+                          />
+                        );
+                        return isReply ? (
+                          <div key={annotation.id} data-annotation-reply="true" className="ml-3 border-l-2 border-border/40 pl-1.5">
+                            {card}
+                          </div>
+                        ) : (
+                          <React.Fragment key={annotation.id}>{card}</React.Fragment>
+                        );
+                      })}
+                    </div>
+                  )}
+                </section>
+              );
+            })}
+            {sortedCodeAnnotations.length > 0 && (
+              <>
+                <div className="flex items-center gap-2 pt-2 pb-1">
+                  <div className="flex-1 border-t border-border/30" />
+                  <span className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/60">Code</span>
+                  <div className="flex-1 border-t border-border/30" />
+                </div>
+                {sortedCodeAnnotations.map((annotation) => (
+                  <CodeAnnotationCard
+                    key={annotation.id}
+                    annotation={annotation}
+                    isSelected={selectedId === annotation.id}
+                    isMe={isCurrentUser(annotation.author)}
+                    onSelect={() => onSelectCodeAnnotation?.(annotation.id)}
+                    onDelete={() => onDeleteCodeAnnotation?.(annotation.id)}
+                    onEdit={onEditCodeAnnotation ? (updates: Partial<CodeAnnotation>) => onEditCodeAnnotation(annotation.id, updates) : undefined}
+                    readOnly={readOnly}
+                  />
+                ))}
+              </>
+            )}
+            {editorAnnotations && editorAnnotations.length > 0 && (
+              <>
+                <div className="flex items-center gap-2 pt-2 pb-1">
+                  <div className="flex-1 border-t border-border/30" />
+                  <span className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/60">Editor</span>
+                  <div className="flex-1 border-t border-border/30" />
+                </div>
+                {editorAnnotations.map(ann => (
+                  <EditorAnnotationCard
+                    key={ann.id}
+                    annotation={ann}
+                    onDelete={readOnly ? undefined : () => onDeleteEditorAnnotation?.(ann.id)}
+                  />
+                ))}
+              </>
+            )}
+            {otherGroups.length > 0 && onOtherFileAnnotationsClick && (
+              <button
+                type="button"
+                data-pn-touch-target="true"
+                data-annotation-show-in-files="true"
+                onClick={onOtherFileAnnotationsClick}
+                className="mt-1 cursor-pointer self-start px-1.5 text-[10px] text-muted-foreground/60 transition-colors hover:text-primary"
+                title="Show annotated files in the navigator"
+              >
+                Show in files
+              </button>
+            )}
+          </>
+        ) : totalCount === 0 ? (
           (!directEdits || directEdits.length === 0) && (
             <div className="flex flex-col items-center justify-center px-4 py-16 text-center">
               <p className="text-xs text-muted-foreground/60">
@@ -276,6 +496,17 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
               <p className="mt-1 text-[11px] text-muted-foreground/40">
                 Select text to annotate
               </p>
+              {scopeEnabled && otherGroupCount > 0 && (
+                <button
+                  type="button"
+                  data-pn-touch-target="true"
+                  data-annotation-view-all="true"
+                  onClick={() => onAnnotationScopeChange!('all')}
+                  className="mt-3 cursor-pointer rounded-md px-2 py-1 text-[11px] text-primary/80 transition-colors hover:bg-surface-1 hover:text-primary"
+                >
+                  View all {otherGroupCount} in {otherGroups.length} other file{otherGroups.length === 1 ? '' : 's'}
+                </button>
+              )}
             </div>
           )
         ) : (
@@ -352,7 +583,7 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
       </OverlayScrollArea>
 
       {/* Quick Actions Footer */}
-      {totalCount > 0 && (
+      {headerCount > 0 && (
         <div className="border-t border-border/50 px-3 py-2 flex gap-1.5">
           {onQuickCopy && (
             <button

package/components/CommentPopover.tsx

@@ -849,6 +849,77 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
  * and box metrics MUST stay identical or the overlay drifts out of alignment. */
 const COMPOSER_TEXT_CLASSES = 'w-full bg-transparent text-sm px-1 py-0.5';
 
+/** Per-composer memo for the overlay gutter sync below. */
+interface OverlayGutterState {
+  /** The overlay the applied value belongs to (a remount invalidates it). */
+  overlay: HTMLElement | null;
+  /** Last `offsetWidth - clientWidth` seen on the textarea. */
+  raw: number;
+  /** Extra right padding currently written inline on the overlay, in px. */
+  applied: number;
+}
+
+const cssPx = (value: string): number => {
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+};
+
+/**
+ * Keep the mirror's text column exactly as wide as the textarea's (#1525).
+ *
+ * A layout-consuming vertical scrollbar (Windows/Linux classic scrollbars; the
+ * app's `scrollbar-width: thin` makes them ~12px) narrows the textarea's
+ * content box once the composer hits its max height — but the overlay is
+ * `overflow: hidden` and keeps its full width, so from the first line that
+ * wraps differently the painted glyphs drift away from the native caret, which
+ * is the one thing the textarea itself still draws. `scrollbar-gutter: stable`
+ * cannot fix this: it is ignored on an `overflow: hidden` box. Mirroring the
+ * measured scrollbar width onto the overlay's right padding makes both boxes
+ * wrap identically again (and stops the overlay painting under the scrollbar).
+ *
+ * Overlay scrollbars (macOS, iOS, any touch surface) consume no layout, so the
+ * measured width is 0 — and then this writes NOTHING at all, leaving the
+ * class-driven padding untouched exactly as before the fix.
+ */
+function syncOverlayGutter(
+  el: HTMLTextAreaElement,
+  overlay: HTMLElement,
+  state: OverlayGutterState,
+  raw: number,
+): void {
+  // Nothing measurable changed since the last sync — the common case.
+  if (overlay === state.overlay && raw === state.raw) return;
+  state.overlay = overlay;
+  state.raw = raw;
+
+  const clear = () => {
+    if (state.applied === 0) return; // never wrote anything; leave the DOM alone
+    overlay.style.removeProperty('padding-right');
+    state.applied = 0;
+  };
+
+  const style = getComputedStyle(el);
+  // `offsetWidth - clientWidth` is scrollbar + left/right borders. The borders
+  // are shared with the overlay (both boxes are border-box), so only the
+  // scrollbar part is the extra gutter the mirror is missing.
+  const borders = cssPx(style.borderLeftWidth) + cssPx(style.borderRightWidth);
+  const scrollbar = Math.max(0, raw - borders);
+  if (scrollbar === 0) {
+    clear();
+    return;
+  }
+  // Base padding is read from the textarea (never the overlay, whose computed
+  // value may already include a gutter we wrote), so the two can never drift
+  // apart if COMPOSER_TEXT_CLASSES changes.
+  const base = parseFloat(style.paddingRight);
+  if (!Number.isFinite(base)) {
+    clear(); // unmeasurable: fall back to the pre-fix behavior
+    return;
+  }
+  overlay.style.paddingRight = `${base + scrollbar}px`;
+  state.applied = scrollbar;
+}
+
 interface ComposerTextareaProps {
   value: string;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -897,12 +968,17 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
 }) => {
   const overlayRef = useRef<HTMLDivElement>(null);
   const [composing, setComposing] = useState(false);
+  const gutterRef = useRef<OverlayGutterState>({ overlay: null, raw: 0, applied: 0 });
 
   const syncScroll = useCallback((el: HTMLTextAreaElement) => {
     const overlay = overlayRef.current;
     if (!overlay) return;
-    overlay.scrollTop = el.scrollTop;
-    overlay.scrollLeft = el.scrollLeft;
+    // Reads before writes so a sync costs at most one forced layout.
+    const { scrollTop, scrollLeft } = el;
+    const raw = el.offsetWidth - el.clientWidth;
+    overlay.scrollTop = scrollTop;
+    overlay.scrollLeft = scrollLeft;
+    syncOverlayGutter(el, overlay, gutterRef.current, raw);
   }, []);
 
   const innerRef = useRef<HTMLTextAreaElement | null>(null);
@@ -920,6 +996,19 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
     if (innerRef.current) syncScroll(innerRef.current);
   }, [value, syncScroll]);
 
+  // `syncScroll` otherwise only runs on scroll and on value change, so a
+  // window/panel resize that grows or drops the textarea's scrollbar without a
+  // keystroke would leave the gutter stale until the next one.
+  useEffect(() => {
+    const el = innerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => {
+      if (innerRef.current) syncScroll(innerRef.current);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [skillReferences, syncScroll]);
+
   if (!skillReferences) {
     return (
       <textarea