@plannotator/ui 0.47.0 → 0.49.0

package/components/Settings.tsx

@@ -102,6 +102,10 @@ interface SettingsProps {
   aiProviders?: Array<{ id: string; name: string; capabilities: Record<string, boolean>; models?: Array<{ id: string; label: string; default?: boolean }> }>;
   /** Git user name from `git config user.name`, for quick identity set */
   gitUser?: string;
+  /** Present when the server advertises the auto-update setting (#1634);
+   *  `env` is PLANNOTATOR_AUTO_UPDATE when it overrides the config file.
+   *  Hosts that omit it get no toggle. */
+  autoUpdateSetting?: { env?: boolean };
   /** Current session is a local git review where since-base ISN'T offered
    *  (base ref unresolvable) — the Git tab shows a note that the Git-status
    *  preference can't take effect in THIS repo. */
@@ -937,8 +941,9 @@ const CommentsTab: React.FC = () => {
   );
 };
 
-export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
+export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, autoUpdateSetting, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
   const webmcpTools = useWebMcpToolsEnabled();
+  const autoUpdate = useConfigValue('autoUpdate');
   const [showDialog, setShowDialog] = useState(false);
   const settingsWasOpenRef = useRef(false);
   const [themePreview, setThemePreview] = useState(false);
@@ -1379,6 +1384,25 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </div>
                     </div>
 
+                    {/* Auto-update (#1634): opt-in, default off. Writes
+                        autoUpdate to ~/.plannotator/config.json. */}
+                    {autoUpdateSetting && (
+                      <>
+                        <div className="border-t border-border" />
+                        <ToggleSwitch
+                          checked={autoUpdateSetting.env ?? autoUpdate}
+                          onChange={(v) => configStore.set('autoUpdate', v)}
+                          disabled={autoUpdateSetting.env !== undefined}
+                          label="Keep Plannotator up to date"
+                          description={
+                            autoUpdateSetting.env !== undefined
+                              ? 'Set by PLANNOTATOR_AUTO_UPDATE in your environment.'
+                              : 'Installs new releases in the background, at most once a day, never while another review is open.'
+                          }
+                        />
+                      </>
+                    )}
+
                     {/* Agent tools (WebMCP). Shown only when the browser
                         exposes document.modelContext; off unregisters the
                         tools for this browser. Cookie-only and idle at its

package/components/Viewer.tsx

@@ -1,5 +1,5 @@
 import { generateId } from '../utils/generateId';
-import React, { useRef, useState, useEffect, useMemo, forwardRef, useImperativeHandle, useCallback, lazy, Suspense } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect, useMemo, forwardRef, useImperativeHandle, useCallback, lazy, Suspense } from 'react';
 import { createPortal } from 'react-dom';
 import { AnnotationType, type Block, type Annotation, type EditorMode, type InputMethod, type ImageAttachment, type ActionsLabelMode } from '../types';
 import { applyHighlight, codeBlockClassName, onCodeHighlightSwap } from '../utils/codeHighlight';
@@ -9,6 +9,8 @@ import { computeListIndices, groupBlocks, type Frontmatter, type FrontmatterValu
 import { buildHeadingSlugMap } from '../utils/slugify';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { BlockRenderer } from './BlockRenderer';
+import { indexQuestionBlocks, type IndexedQuestion, type ParsedQuestion, type QuestionAnswer } from '@plannotator/core/question-block';
+import { resolveQuestionAnswers } from '../utils/questionAnswers';
 import { CodeBlock } from './blocks/CodeBlock';
 import { TableBlock } from './blocks/TableBlock';
 import { TableToolbar } from './blocks/TableToolbar';
@@ -187,6 +189,34 @@ export interface ViewerProps {
   // Checkbox toggle props
   onToggleCheckbox?: (blockId: string, checked: boolean) => void;
   checkboxOverrides?: Map<string, boolean>;
+  /** Answer handler for `:::question` blocks. The Viewer draws each answer
+   *  from the `annotations` row carrying `questionAnswer` for that question's
+   *  key; a change calls this with the next answer, or null when it became
+   *  empty, and the host upserts or removes that annotation (see
+   *  `upsertQuestionAnswerAnnotation` in `utils/questionAnswers`). Absent (or
+   *  `readOnly`), question blocks render read-only. */
+  onAnswerQuestion?: (blockId: string, answer: QuestionAnswer | null, key: string) => void;
+  /** Host-kept answers, keyed by the question's (de-duplicated) key from
+   *  `indexQuestionBlocks` / `findQuestionBlocks`. When given, the cards read
+   *  their answers from here and never from `annotations`; entries that fail
+   *  `parseQuestionAnswer` are ignored. Absent: answers come from the
+   *  annotations carrying `questionAnswer` (Plannotator's own path). */
+  questionAnswers?: ReadonlyMap<string, QuestionAnswer> | Readonly<Record<string, QuestionAnswer>>;
+  /** Explicit save mode for question cards: edits stay a draft in the card,
+   *  which shows Save answer and Cancel (and no Skip); Save calls this with
+   *  the question's key and the answer, or null when the draft is empty. Return
+   *  a promise to keep the draft until it settles (a rejection keeps it for a
+   *  retry). Takes precedence over `onAnswerQuestion`. Ignored when
+   *  `readOnly`. */
+  onSaveQuestionAnswer?: (key: string, answer: QuestionAnswer | null) => void | Promise<unknown>;
+  /** Label of the explicit-save-mode Save button, or a function of the
+   *  question returning it. Default "Save answer"; never derived from
+   *  `decisionOnAnswer` (only the host knows whether saving records one). */
+  saveQuestionAnswerLabel?: string | ((question: ParsedQuestion) => string);
+  /** Host actions at the right of a question card's footer (e.g. "Mark as
+   *  decision"), given the indexed question and its saved answer. Rendered in
+   *  read-only cards too; return null for none. */
+  renderQuestionFooter?: (question: IndexedQuestion, answer: QuestionAnswer | undefined) => React.ReactNode;
   onAskAI?: CommentAskAIHandler;
   /** Whether comment popovers offer image attachments. Hosts without an
    *  uploadTransport pass false so the attach affordance never dead-ends.
@@ -310,6 +340,87 @@ const FrontmatterCard: React.FC<{ frontmatter: Frontmatter }> = ({ frontmatter }
   );
 };
 
+/** Viewport offset (px) the legacy action cluster pins to while stuck (`top-3`). */
+const STICKY_ACTIONS_TOP_PX = 12;
+
+interface StickyActionsBox {
+  readonly width: number;
+  readonly height: number;
+  readonly marginTop: number;
+  readonly marginRight: number;
+}
+
+/**
+ * Legacy top-right action cluster, pinned while the document scrolls.
+ *
+ * The cluster must not be a sticky float: when float-avoiding siblings (the
+ * `overflow-x-auto` table and code wrappers) reflow, Firefox lays them out
+ * around the float's *stuck* position, so annotating a long table while
+ * scrolled squeezed it to a sliver. A static float spacer reserves the title's
+ * wrap space instead, and the cluster sticks inside a zero-height lane. Both
+ * copy the cluster's measured box and margins, so host CSS that restyles
+ * `[data-sticky-actions]` keeps its effect.
+ */
+const StickyActionsLane: React.FC<{ className: string; children: React.ReactNode }> = ({ className, children }) => {
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const [box, setBox] = useState<StickyActionsBox | null>(null);
+
+  useLayoutEffect(() => {
+    const el = actionsRef.current;
+    if (!el) return;
+    const measure = () => {
+      const style = window.getComputedStyle(el);
+      const next: StickyActionsBox = {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+        marginTop: Number.parseFloat(style.marginTop) || 0,
+        marginRight: Number.parseFloat(style.marginRight) || 0,
+      };
+      setBox((prev) =>
+        prev
+        && prev.width === next.width
+        && prev.height === next.height
+        && prev.marginTop === next.marginTop
+        && prev.marginRight === next.marginRight
+          ? prev
+          : next);
+    };
+    measure();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+    observer?.observe(el);
+    // Breakpoint-only margin changes (lg/xl) don't resize the cluster.
+    window.addEventListener('resize', measure);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        data-print-hide
+        data-sticky-actions-lane
+        className="sticky z-30 flex h-0 items-start justify-end"
+        // The lane carries no margin, so offset it by the cluster's own top
+        // margin to pin the cluster's border box exactly where the float did.
+        style={{ top: STICKY_ACTIONS_TOP_PX - (box?.marginTop ?? 0) }}
+      >
+        <div ref={actionsRef} data-print-hide data-sticky-actions className={className}>
+          {children}
+        </div>
+      </div>
+      {/* After the lane: the lane is a flex box, so a float placed before it would narrow it. */}
+      <div
+        data-print-hide
+        aria-hidden="true"
+        className="float-right"
+        style={box ? { width: box.width, height: box.height, marginTop: box.marginTop, marginRight: box.marginRight } : undefined}
+      />
+    </>
+  );
+};
+
 interface ViewerDocumentHeaderProps {
   readonly config: ViewerAnnotationHeaderConfig;
   readonly inputMethod: InputMethod;
@@ -473,6 +584,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   messagePickerInfo,
   onToggleCheckbox,
   checkboxOverrides,
+  onAnswerQuestion,
+  questionAnswers: hostQuestionAnswers,
+  onSaveQuestionAnswer,
+  saveQuestionAnswerLabel,
+  renderQuestionFooter,
   onAskAI,
   allowImages = true,
   readOnly = false,
@@ -535,6 +651,19 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   // anchor ids stay stable across re-renders and duplicate heading texts get
   // `-1`/`-2`/... suffixes rather than colliding on the same id.
   const headingSlugMap = useMemo(() => buildHeadingSlugMap(blocks), [blocks]);
+  // `:::question` blocks: numbered in document order, answers drawn from the
+  // annotations that carry `questionAnswer` (matched by question key, so an
+  // answer follows its question across re-parses).
+  const questionIndex = useMemo(() => {
+    const list = indexQuestionBlocks(blocks);
+    return { byBlock: new Map(list.map((q) => [q.blockId, q])), total: list.length };
+  }, [blocks]);
+  // A host that keeps answers itself (`questionAnswers`) replaces the
+  // annotation-derived map; each entry is validated like any other reader.
+  const answersByKey = useMemo(
+    () => resolveQuestionAnswers(annotations, hostQuestionAnswers),
+    [annotations, hostQuestionAnswers],
+  );
   const isTouchDevice = useMemo(() => window.matchMedia('(pointer: coarse)').matches, []);
   const [codeBlockToolbar, setCodeBlockToolbar] =
     useState<CodeBlockToolbarTarget | null>(null);
@@ -911,8 +1040,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
       ? container.querySelector<HTMLElement>('[data-viewer-document-header]')
         ?? container.querySelector<HTMLElement>('[data-sticky-actions]')
       : null;
+    // The legacy cluster sticks via its lane, so its own `top` is `auto`.
     const stickyTop = documentHeader
-      ? Number.parseFloat(window.getComputedStyle(documentHeader).top || '0') || 0
+      ? documentHeader.hasAttribute('data-viewer-document-header')
+        ? Number.parseFloat(window.getComputedStyle(documentHeader).top || '0') || 0
+        : STICKY_ACTIONS_TOP_PX
       : 0;
     const headerOffset = documentHeader
       ? documentHeader.getBoundingClientRect().height + stickyTop
@@ -1252,9 +1384,15 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
           <>
             {badgeClearance > 0 && <div data-print-hide style={{ height: badgeClearance }} aria-hidden="true" />}
             {stickyActions && <div ref={stickySentinelRef} className="h-0 w-0 float-right" aria-hidden="true" />}
-            <div data-print-hide data-sticky-actions className={`${stickyActions ? 'sticky top-3' : ''} z-30 float-right flex items-start gap-1 md:gap-2 rounded-lg p-1 md:p-2 transition-colors duration-150 ${isStuck ? 'bg-card/95 backdrop-blur-sm shadow-sm' : ''} ${gridEnabled ? '-mr-3 md:-mr-5 lg:-mr-7 xl:-mr-9' : '-mr-1 md:-mr-2'} mt-6 md:-mt-5 lg:-mt-7 xl:-mt-9`}>
-              {documentActions}
-            </div>
+            {stickyActions ? (
+              <StickyActionsLane className={`flex items-start gap-1 md:gap-2 rounded-lg p-1 md:p-2 transition-colors duration-150 ${isStuck ? 'bg-card/95 backdrop-blur-sm shadow-sm' : ''} ${gridEnabled ? '-mr-3 md:-mr-5 lg:-mr-7 xl:-mr-9' : '-mr-1 md:-mr-2'} mt-6 md:-mt-5 lg:-mt-7 xl:-mt-9`}>
+                {documentActions}
+              </StickyActionsLane>
+            ) : (
+              <div data-print-hide data-sticky-actions className={`z-30 float-right flex items-start gap-1 md:gap-2 rounded-lg p-1 md:p-2 transition-colors duration-150 ${gridEnabled ? '-mr-3 md:-mr-5 lg:-mr-7 xl:-mr-9' : '-mr-1 md:-mr-2'} mt-6 md:-mt-5 lg:-mt-7 xl:-mt-9`}>
+                {documentActions}
+              </div>
+            )}
           </>
         )}
         {frontmatter && <><div className="clear-right md:hidden" /><FrontmatterCard frontmatter={frontmatter} /></>}
@@ -1385,7 +1523,32 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               }
             />
           ) : (
-            <BlockRenderer imageBaseDir={imageBaseDir} onImageClick={(src, alt) => setLightbox({ src, alt })} key={group.block.id} block={group.block} onOpenLinkedDoc={onOpenLinkedDoc} onOpenCodeFile={onOpenCodeFile} onNavigateAnchor={scrollToAnchor} onToggleCheckbox={readOnly ? undefined : onToggleCheckbox} checkboxOverrides={checkboxOverrides} githubRepo={repoInfo?.display} repoHost={repoInfo?.host} headingAnchorId={headingSlugMap.get(group.block.id)} />
+            (() => {
+              const question = questionIndex.byBlock.get(group.block.id);
+              return (
+                <BlockRenderer
+                  imageBaseDir={imageBaseDir}
+                  onImageClick={(src, alt) => setLightbox({ src, alt })}
+                  key={group.block.id}
+                  block={group.block}
+                  onOpenLinkedDoc={onOpenLinkedDoc}
+                  onOpenCodeFile={onOpenCodeFile}
+                  onNavigateAnchor={scrollToAnchor}
+                  onToggleCheckbox={readOnly ? undefined : onToggleCheckbox}
+                  checkboxOverrides={checkboxOverrides}
+                  githubRepo={repoInfo?.display}
+                  repoHost={repoInfo?.host}
+                  headingAnchorId={headingSlugMap.get(group.block.id)}
+                  question={question}
+                  questionTotal={questionIndex.total}
+                  questionAnswer={question ? answersByKey.get(question.question.key) : undefined}
+                  onAnswerQuestion={readOnly ? undefined : onAnswerQuestion}
+                  onSaveQuestionAnswer={readOnly ? undefined : onSaveQuestionAnswer}
+                  saveQuestionAnswerLabel={saveQuestionAnswerLabel}
+                  renderQuestionFooter={renderQuestionFooter}
+                />
+              );
+            })()
           )
         )}
 

package/components/ai/AIProviderBar.tsx

@@ -49,7 +49,7 @@ export const AIProviderBar: React.FC<AIProviderBarProps> = ({
       <select
         value={effectiveProviderId ?? ''}
         onChange={(event) => onProviderChange(event.target.value)}
-        className="min-w-0 max-w-[8rem] bg-transparent text-[11px] text-foreground focus:outline-none"
+        className="min-w-0 max-w-[8rem] bg-transparent text-[11px] text-foreground focus:outline-none [&>option]:bg-card [&>option]:text-foreground"
         aria-label="AI provider"
       >
         {providers.map(provider => {
@@ -66,7 +66,7 @@ export const AIProviderBar: React.FC<AIProviderBarProps> = ({
         <select
           value={effectiveModel}
           onChange={(event) => onModelChange(event.target.value)}
-          className="min-w-0 flex-1 bg-transparent text-[11px] text-foreground focus:outline-none"
+          className="min-w-0 flex-1 bg-transparent text-[11px] text-foreground focus:outline-none [&>option]:bg-card [&>option]:text-foreground"
           aria-label="AI model"
         >
           {models.map(model => (
@@ -81,7 +81,7 @@ export const AIProviderBar: React.FC<AIProviderBarProps> = ({
         <select
           value={selectedReasoningEffort ?? ''}
           onChange={(event) => onReasoningEffortChange?.(event.target.value || null)}
-          className="w-16 bg-transparent text-[11px] text-foreground focus:outline-none"
+          className="w-16 bg-transparent text-[11px] text-foreground focus:outline-none [&>option]:bg-card [&>option]:text-foreground"
           aria-label="Reasoning effort"
         >
           <option value="">Auto</option>