@plannotator/ui 0.51.0 → 0.52.1

package/components/Settings.tsx

@@ -70,12 +70,12 @@ import {
 } from '../utils/defaultNotesApp';
 import { useAgents } from '../hooks/useAgents';
 import { KeyboardShortcuts } from './KeyboardShortcuts';
-import { type QuickLabel, getQuickLabels, saveQuickLabels, resetQuickLabels, DEFAULT_QUICK_LABELS, getLabelColors, LABEL_COLOR_MAP } from '../utils/quickLabels';
 import { ThemeTab } from './ThemeTab';
-import { isMac, modKey, modKeyWord, altKey } from '../utils/platform';
+import { modKey, modKeyWord } from '../utils/platform';
 import { getAIProviderSettings, resolveAIProviderSelection } from '../utils/aiProvider';
 import { AISettingsTab } from './AISettingsTab';
 import { HooksTab } from './settings/HooksTab';
+import { QuickLabelsTab } from './settings/QuickLabelsTab';
 import { OverlayScrollArea } from './OverlayScrollArea';
 import {
   getFileBrowserSettings,
@@ -1063,9 +1063,6 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
   const [agentWarning, setAgentWarning] = useState<string | null>(null);
   const [autoCloseDelay, setAutoCloseDelayState] = useState<AutoCloseDelay>('off');
   const [defaultNotesApp, setDefaultNotesApp] = useState<DefaultNotesApp>('ask');
-  const [quickLabelsState, setQuickLabelsState] = useState<QuickLabel[]>([]);
-  const [editingTipIndex, setEditingTipIndex] = useState<number | null>(null);
-  const [editingTipValue, setEditingTipValue] = useState('');
   const [aiProvider, setAiProvider] = useState<string | null>(null);
   const [fileBrowserSettings, setFileBrowserSettings] = useState<FileBrowserSettings>({ enabled: false, directories: [] });
   const [newDirPath, setNewDirPath] = useState('');
@@ -1134,7 +1131,6 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
       setPermissionMode(getPermissionModeSettings().mode);
       setAutoCloseDelayState(getAutoCloseDelay());
       setDefaultNotesApp(getDefaultNotesApp());
-      setQuickLabelsState(getQuickLabels());
       const aiSettings = getAIProviderSettings();
       setAiProvider(resolveAIProviderSelection({ providers: aiProviders, origin, settings: aiSettings }).providerId);
       setFileBrowserSettings(getFileBrowserSettings());
@@ -2054,191 +2050,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                 )}
 
                 {/* === LABELS TAB === */}
-                {activeTab === 'labels' && (
-                  <>
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <div className="text-sm font-medium flex items-center gap-2">Quick Labels</div>
-                        <div className="text-xs text-muted-foreground">
-                          Preset annotations for one-click feedback
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => {
-                          resetQuickLabels();
-                          setQuickLabelsState(DEFAULT_QUICK_LABELS);
-                        }}
-                        className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
-                      >
-                        Reset to defaults
-                      </button>
-                    </div>
-
-                    <style>{`
-                      @keyframes tip-slide-open {
-                        from { opacity: 0; transform: translateY(-4px); }
-                        to   { opacity: 1; transform: translateY(0); }
-                      }
-                    `}</style>
-                    <div className="space-y-1.5">
-                      {quickLabelsState.map((label, index) => {
-                        const colors = getLabelColors(label.color);
-                        const hasTip = !!label.tip;
-                        const isEditingTip = editingTipIndex === index;
-                        return (
-                          <div key={index} className="rounded-lg overflow-hidden" style={{ backgroundColor: colors.bg }}>
-                            {/* Main row */}
-                            <div className="flex items-center gap-2 p-2">
-                              <span className="text-sm flex-shrink-0">{label.emoji}</span>
-                              <input
-                                type="text"
-                                value={label.text}
-                                onChange={(e) => {
-                                  const updated = [...quickLabelsState];
-                                  updated[index] = {
-                                    ...label,
-                                    text: e.target.value,
-                                    id: e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
-                                  };
-                                  setQuickLabelsState(updated);
-                                  saveQuickLabels(updated);
-                                }}
-                                className="flex-1 px-2 py-1 bg-background/80 rounded text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
-                              />
-                              {/* Tip indicator button */}
-                              <button
-                                onClick={() => {
-                                  if (isEditingTip) {
-                                    setEditingTipIndex(null);
-                                  } else {
-                                    setEditingTipIndex(index);
-                                    setEditingTipValue(label.tip || '');
-                                  }
-                                }}
-                                className={`relative p-1 rounded transition-all flex-shrink-0 ${
-                                  hasTip
-                                    ? 'bg-foreground/10 text-foreground/70 hover:text-foreground border border-foreground/15'
-                                    : 'text-muted-foreground/30 hover:text-muted-foreground/60 border border-dashed border-muted-foreground/20 hover:border-muted-foreground/40'
-                                }`}
-                                title={hasTip ? `Tip: ${label.tip}` : 'Add AI instruction tip'}
-                              >
-                                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                                </svg>
-                                {hasTip && (
-                                  <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-foreground/50" />
-                                )}
-                              </button>
-                              <select
-                                value={label.color}
-                                onChange={(e) => {
-                                  const updated = [...quickLabelsState];
-                                  updated[index] = { ...label, color: e.target.value };
-                                  setQuickLabelsState(updated);
-                                  saveQuickLabels(updated);
-                                }}
-                                className="px-1.5 py-1 bg-background/80 rounded text-[10px] focus:outline-none focus:ring-1 focus:ring-primary/50"
-                              >
-                                {Object.keys(LABEL_COLOR_MAP).map(c => (
-                                  <option key={c} value={c}>{c}</option>
-                                ))}
-                              </select>
-                              <span className="text-[10px] text-muted-foreground/50 font-mono w-8 text-center flex-shrink-0">
-                                {index < 10 ? `${altKey}${isMac ? '' : '+'}${index === 9 ? '0' : index + 1}` : ''}
-                              </span>
-                              <button
-                                onClick={() => {
-                                  const updated = quickLabelsState.filter((_, i) => i !== index);
-                                  setQuickLabelsState(updated);
-                                  saveQuickLabels(updated);
-                                  if (editingTipIndex === index) setEditingTipIndex(null);
-                                }}
-                                className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors flex-shrink-0"
-                                title="Remove label"
-                              >
-                                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                              </button>
-                            </div>
-                            {/* Tip editor — slides open below the row */}
-                            {isEditingTip && (
-                              <div
-                                className="flex items-center gap-1.5 px-2 pb-2 pt-0"
-                                style={{ animation: 'tip-slide-open 0.15s ease-out' }}
-                              >
-                                <svg className="w-3 h-3 text-muted-foreground/40 flex-shrink-0 ml-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                                  <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-                                </svg>
-                                <input
-                                  type="text"
-                                  value={editingTipValue}
-                                  onChange={(e) => setEditingTipValue(e.target.value)}
-                                  onKeyDown={(e) => {
-                                    if (e.key === 'Enter') {
-                                      const updated = [...quickLabelsState];
-                                      updated[index] = { ...label, tip: editingTipValue || undefined };
-                                      setQuickLabelsState(updated);
-                                      saveQuickLabels(updated);
-                                      setEditingTipIndex(null);
-                                    }
-                                    if (e.key === 'Escape') {
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                      setEditingTipIndex(null);
-                                    }
-                                  }}
-                                  placeholder="AI instruction tip..."
-                                  className="flex-1 px-2 py-1 bg-background/60 rounded text-[10px] text-muted-foreground placeholder:text-muted-foreground/30 focus:outline-none focus:ring-1 focus:ring-primary/50"
-                                  autoFocus
-                                  onFocus={(e) => { e.target.setSelectionRange(0, 0); e.target.scrollLeft = 0; }}
-                                />
-                                <button
-                                  onClick={() => {
-                                    const updated = [...quickLabelsState];
-                                    updated[index] = { ...label, tip: editingTipValue || undefined };
-                                    setQuickLabelsState(updated);
-                                    saveQuickLabels(updated);
-                                    setEditingTipIndex(null);
-                                  }}
-                                  className="p-1 rounded text-muted-foreground/50 hover:text-green-500 hover:bg-green-500/10 transition-colors flex-shrink-0"
-                                  title="Save tip"
-                                >
-                                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                                  </svg>
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-
-                    {quickLabelsState.length < 12 && (
-                      <button
-                        onClick={() => {
-                          const newLabel: QuickLabel = {
-                            id: `custom-${Date.now()}`,
-                            emoji: '📌',
-                            text: 'New label',
-                            color: 'blue',
-                          };
-                          const updated = [...quickLabelsState, newLabel];
-                          setQuickLabelsState(updated);
-                          saveQuickLabels(updated);
-                        }}
-                        className="w-full py-1.5 text-xs text-muted-foreground hover:text-foreground border border-dashed border-border rounded-lg hover:border-foreground/30 transition-colors"
-                      >
-                        + Add label
-                      </button>
-                    )}
-
-                    <div className="text-[10px] text-muted-foreground/70">
-                      Use {altKey}{isMac ? '' : '+'}1 through {altKey}{isMac ? '' : '+'}0 when the annotation toolbar is visible to apply a label instantly.
-                    </div>
-                  </>
-                )}
+                {activeTab === 'labels' && <QuickLabelsTab />}
 
                 {/* === VIM TAB === */}
                 {activeTab === 'vim' && mode !== 'review' && (

package/components/Viewer.tsx

@@ -6,7 +6,7 @@ import { AnnotationType, type Block, type Annotation, type EditorMode, type Inpu
 import { applyHighlight, codeBlockClassName, onCodeHighlightSwap } from '../utils/codeHighlight';
 import { paintCodeBlockMark } from '../utils/codeBlockMark';
 import { useFenceTheme } from '../hooks/useFenceTheme';
-import { computeListIndices, groupBlocks, type Frontmatter, type FrontmatterValue } from '../utils/parser';
+import { computeListIndices, groupBlocks, selectionSourceLines, type Frontmatter, type FrontmatterValue } from '../utils/parser';
 import { buildHeadingSlugMap } from '../utils/slugify';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { BlockRenderer } from './BlockRenderer';
@@ -218,6 +218,35 @@ export interface ViewerProps {
    *  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;
+  /** Whether answering a question records a decision, per question. On a
+   *  `Decision: when answered` question: false draws its "Records a
+   *  decision" tag dimmed with a dotted outline and hides the "Answering this
+   *  records a decision" row; true or undefined keeps today's card. On a
+   *  question with no decision line it is ignored unless
+   *  `questionDecisionScope` is `'any'`; then a boolean adds the tag in that
+   *  state (true also shows the row) and undefined adds nothing. Has no
+   *  effect on a question whose decision is already recorded. */
+  questionDecisionRecording?: (question: IndexedQuestion) => boolean | undefined;
+  /** Which questions can carry the "Records a decision" tag (ui 0.52.1).
+   *  `'when-answered'` (default, the 0.52.0 behaviour): only questions with
+   *  `Decision: when answered`. `'any'`: also a question with no decision
+   *  line, when `questionDecisionRecording` returns a boolean for it. */
+  questionDecisionScope?: 'when-answered' | 'any';
+  /** Makes a question's "Records a decision" tag a toggle button
+   *  (`aria-pressed`); a click calls this with the question's key and the
+   *  next state, which the host stores and returns from
+   *  `questionDecisionRecording`. Ignored when `readOnly`. */
+  onToggleQuestionDecisionRecording?: (key: string, next: boolean) => void;
+  /** Opens the host's decision card (ui 0.52.1): the tag splits into a
+   *  diamond switch (the toggle above) and the words "Records a decision" as
+   *  a button that calls this with the question's key and the words' element
+   *  (anchor your popover to it). Offered on and off. Ignored when
+   *  `readOnly`. */
+  onOpenQuestionDecision?: (key: string, anchor: HTMLElement) => void;
+  /** `'none'` hides each question card's own status tag (Open / Answered /
+   *  Settled / Skipped) so the host can draw its own; the decision tags stay.
+   *  Default `'card'`. */
+  questionStatusTag?: 'card' | 'none';
   onAskAI?: CommentAskAIHandler;
   /** Whether comment popovers offer image attachments. Hosts without an
    *  uploadTransport pass false so the attach affordance never dead-ends.
@@ -590,6 +619,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   onSaveQuestionAnswer,
   saveQuestionAnswerLabel,
   renderQuestionFooter,
+  questionDecisionRecording,
+  questionDecisionScope,
+  onToggleQuestionDecisionRecording,
+  onOpenQuestionDecision,
+  questionStatusTag,
   onAskAI,
   allowImages = true,
   readOnly = false,
@@ -1551,6 +1585,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   onSaveQuestionAnswer={readOnly ? undefined : onSaveQuestionAnswer}
                   saveQuestionAnswerLabel={saveQuestionAnswerLabel}
                   renderQuestionFooter={renderQuestionFooter}
+                  questionDecisionRecording={question ? questionDecisionRecording?.(question) : undefined}
+                  questionDecisionScope={questionDecisionScope}
+                  onToggleQuestionDecisionRecording={readOnly ? undefined : onToggleQuestionDecisionRecording}
+                  onOpenQuestionDecision={readOnly ? undefined : onOpenQuestionDecision}
+                  questionStatusTag={questionStatusTag}
                 />
               );
             })()
@@ -1715,6 +1754,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                 label: 'Selected text',
                 text: hookCommentPopover.selectedText ?? hookCommentPopover.contextText,
                 sourcePath: linkedDocInfo?.filepath ?? sourceInfo,
+                ...selectionSourceLines(blocks, hookCommentPopover.blockIds ?? []),
               }}
             />
           )}
@@ -1740,6 +1780,9 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               label: viewerCommentPopover.isGlobal ? 'Document' : 'Code block',
               text: viewerCommentPopover.selectedText,
               sourcePath: linkedDocInfo?.filepath ?? sourceInfo,
+              ...(!viewerCommentPopover.isGlobal && viewerCommentPopover.codeBlock
+                ? selectionSourceLines(blocks, [viewerCommentPopover.codeBlock.block.id])
+                : null),
             }}
           />
         )}

package/components/blocks/QuestionBlock.tsx

@@ -36,7 +36,13 @@ import { QuestionContext } from './QuestionContext';
  *
  * A host can add its own actions at the right of the footer
  * (`renderFooter`), and a question carrying `Decision: when answered` or a
- * `Decision: [statement](url)` link shows that beside the prompt.
+ * `Decision: [statement](url)` link shows that beside the prompt. A host can
+ * also let the reviewer switch a question's decision recording off and on
+ * (`decisionRecording` + `onToggleDecisionRecording`; with
+ * `decisionScope: 'any'`, any question without a recorded decision once the
+ * host supplies a state), open its own decision
+ * card from the tag's words (`onOpenDecision`), and hide the card's own
+ * status tag to draw its own (`statusTag: 'none'`).
  */
 
 /** Pointer travel (px) above which a press on a choice row is a drag. */
@@ -50,7 +56,7 @@ const now = (): number => (typeof performance !== 'undefined' ? performance.now(
 
 const cx = (...parts: Array<string | false | null | undefined>) => parts.filter(Boolean).join(' ');
 
-const Tag: React.FC<{ tone: 'rec' | 'ok' | 'skip' | 'open'; children: React.ReactNode; className?: string }> = ({ tone, children, className }) => (
+const Tag: React.FC<{ tone: 'rec' | 'ok' | 'skip' | 'open'; children: React.ReactNode; className?: string; style?: React.CSSProperties }> = ({ tone, children, className, style }) => (
   <span
     className={cx(
       'annotation-exclude select-none inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-px align-[1px] text-[10.5px] font-semibold tracking-[0.03em]',
@@ -60,6 +66,7 @@ const Tag: React.FC<{ tone: 'rec' | 'ok' | 'skip' | 'open'; children: React.Reac
       tone === 'open' && 'border border-dashed border-border text-muted-foreground',
       className,
     )}
+    style={style}
     data-pinpoint-ignore=""
   >
     {children}
@@ -78,6 +85,19 @@ const DiamondGlyph = () => (
   </svg>
 );
 
+/** Draws a decision tag in its "off" state: the same words, dimmed, with a
+ *  dotted outline instead of the tinted fill. Dimmed means the theme's
+ *  muted-foreground, not opacity: 60% opacity on primary text dropped the
+ *  default light theme under 3:1, while muted-foreground is the token every
+ *  theme already tunes for secondary text. Inline so it adds no utility
+ *  classes to the shared stylesheet and wins over the tag's `text-primary`. */
+const DECISION_OFF_STYLE: React.CSSProperties = {
+  background: 'transparent',
+  color: 'var(--muted-foreground)',
+  outline: '1px dotted currentColor',
+  outlineOffset: '-1px',
+};
+
 /** Two answers say the same thing (identity and line ignored). */
 const sameAnswer = (a: QuestionAnswer | null | undefined, b: QuestionAnswer | null | undefined): boolean => {
   const norm = (x: QuestionAnswer | null | undefined) =>
@@ -110,6 +130,40 @@ export interface QuestionBlockProps {
    *  saved answer (never the unsaved draft). Rendered in read-only cards too;
    *  return null for nothing. */
   renderFooter?: (question: IndexedQuestion, answer: QuestionAnswer | undefined) => React.ReactNode;
+  /** Whether answering this question records a decision. On a question
+   *  carrying `Decision: when answered` it defaults to true; false draws the
+   *  "Records a decision" tag dimmed with a dotted outline and hides the
+   *  "Answering this records a decision" row. On a question WITHOUT a
+   *  decision line it is ignored unless `decisionScope` is `'any'` (ui
+   *  0.52.1); then a defined value adds the tag in that state (false: off;
+   *  true: on, with the row), so a host can let any answer become a
+   *  decision, and undefined leaves the question with no tag. Has no effect
+   *  on a question whose decision is already recorded
+   *  (`Decision: [statement](url)`). */
+  decisionRecording?: boolean;
+  /** Which questions can carry the "Records a decision" tag (ui 0.52.1).
+   *  `'when-answered'` (default, the 0.52.0 behaviour): only a question that
+   *  carries `Decision: when answered`. `'any'`: also a question with no
+   *  decision line, once the host passes a `decisionRecording` for it. */
+  decisionScope?: 'when-answered' | 'any';
+  /** Makes the "Records a decision" tag a toggle button (`aria-pressed`):
+   *  a click calls this with the question's key and the next state. The host
+   *  stores it and passes it back as `decisionRecording`. Not offered in a
+   *  read-only card (no answer handler), which draws the tag as it stands. */
+  onToggleDecisionRecording?: (key: string, next: boolean) => void;
+  /** Opens the host's decision card (ui 0.52.1). Given, the tag splits into
+   *  two targets inside one visual tag: the diamond is the switch
+   *  (`onToggleDecisionRecording`, labelled "Record as a decision") and the
+   *  words "Records a decision" are a button (`aria-haspopup="dialog"`) that
+   *  calls this with the question's key and the words' own element, to
+   *  anchor a popover. Offered whether recording is on or off (the host
+   *  decides what an off question's card does). Not offered in a read-only
+   *  card. */
+  onOpenDecision?: (key: string, anchor: HTMLElement) => void;
+  /** `'none'` hides the card's own status tag (Open / Answered / Settled /
+   *  Skipped) so the host can draw its own; the decision tags stay. Default
+   *  `'card'`. */
+  statusTag?: 'card' | 'none';
   onOpenLinkedDoc?: (path: string) => void;
   onOpenCodeFile?: (path: string) => void;
   imageBaseDir?: string;
@@ -128,6 +182,11 @@ export const QuestionBlock: React.FC<QuestionBlockProps> = ({
   onSaveAnswer,
   saveLabel,
   renderFooter,
+  decisionRecording,
+  decisionScope = 'when-answered',
+  onToggleDecisionRecording,
+  onOpenDecision,
+  statusTag = 'card',
   onOpenLinkedDoc,
   onOpenCodeFile,
   imageBaseDir,
@@ -320,6 +379,21 @@ export const QuestionBlock: React.FC<QuestionBlockProps> = ({
   const other = answer?.other ?? '';
   const otherOn = other.trim() !== '';
 
+  // A `Decision: when answered` question the host may switch off, or (with
+  // `decisionScope: 'any'`) any other question once the host supplies a
+  // recording state for it. A recorded decision (`question.decision`) is
+  // never affected.
+  const decisionCapable = !question.decision
+    && (!!question.decisionOnAnswer || (decisionScope === 'any' && decisionRecording !== undefined));
+  const recordingOn = decisionRecording ?? true;
+  const decisionToggleable = decisionCapable && !readOnly && !!onToggleDecisionRecording;
+  const decisionOpenable = decisionCapable && !readOnly && !!onOpenDecision;
+  // Present only when the host speaks to recording, so a card without these
+  // props carries exactly the attributes it always did.
+  const recordingAttr = decisionCapable && (decisionRecording !== undefined || !!onToggleDecisionRecording)
+    ? (recordingOn ? 'on' : 'off')
+    : undefined;
+
   const describedBy = [question.context ? contextId : null, question.kind === 'text' && question.suggestedText && !answered ? suggestId : null]
     .filter(Boolean)
     .join(' ') || undefined;
@@ -344,23 +418,78 @@ export const QuestionBlock: React.FC<QuestionBlockProps> = ({
       aria-describedby={describedBy}
       aria-disabled={readOnly || undefined}
       data-question-decision={question.decision ? 'recorded' : question.decisionOnAnswer ? 'on-answer' : undefined}
+      data-question-decision-recording={recordingAttr}
     >
       <div className="annotation-exclude select-none mb-1.5 flex items-center gap-2" data-pinpoint-ignore="">
         <span className="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">{eyebrow}</span>
         <span className="ml-auto">
           {question.decision && <><Tag tone="rec"><DiamondGlyph />Decision</Tag>{' '}</>}
-          {!question.decision && question.decisionOnAnswer && <><Tag tone="rec"><DiamondGlyph />Records a decision</Tag>{' '}</>}
-          {status === 'answered' && <Tag tone="ok"><CheckGlyph />Answered</Tag>}
-          {status === 'settled' && <Tag tone="ok"><CheckGlyph />Settled</Tag>}
-          {status === 'skipped' && <Tag tone="skip">Skipped</Tag>}
-          {status === 'open' && <Tag tone="open">Open</Tag>}
+          {decisionCapable && (decisionOpenable ? (
+            // Two targets in one tag: the diamond switches recording, the
+            // words open the host's decision card. Siblings, never nested.
+            // Target size (WCAG 2.5.8) without changing the drawn tag: the
+            // diamond's invisible `before:` box reaches 6 px past it on every
+            // side (24 px wide, about 30 px tall), and the words, positioned
+            // and later in the tree, paint over its right-hand part, so a
+            // click on the words is always the words. The words (110 px wide)
+            // meet the spacing exception: nothing else to click within 12 px
+            // of their centre line.
+            <><span
+              className="annotation-exclude select-none inline-flex items-stretch whitespace-nowrap rounded align-[1px] text-[10.5px] font-semibold tracking-[0.03em] bg-primary/15 text-primary"
+              style={recordingOn ? undefined : DECISION_OFF_STYLE}
+              data-pinpoint-ignore=""
+              data-question-decision-tag=""
+            >{decisionToggleable ? (
+              <button
+                type="button"
+                aria-pressed={recordingOn}
+                aria-label="Record as a decision"
+                title="Record as a decision"
+                onClick={() => onToggleDecisionRecording!(question.key, !recordingOn)}
+                className="relative inline-flex cursor-pointer items-center rounded pl-1.5 pr-0.5 before:absolute before:-inset-1.5 before:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                data-question-decision-toggle=""
+              ><DiamondGlyph /></button>
+            ) : (
+              <span className="inline-flex items-center pl-1.5 pr-0.5"><DiamondGlyph /></span>
+            )}<button
+              type="button"
+              aria-haspopup="dialog"
+              onClick={(event) => onOpenDecision!(question.key, event.currentTarget)}
+              className="relative cursor-pointer rounded py-px pl-0.5 pr-1.5 hover:underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              data-question-decision-open=""
+            >Records a decision</button></span>{' '}</>
+          ) : decisionToggleable ? (
+            // Focus shows as a ring, not an outline: the dotted outline is
+            // what draws the off state.
+            <><button
+              type="button"
+              aria-pressed={recordingOn}
+              onClick={() => onToggleDecisionRecording!(question.key, !recordingOn)}
+              className="annotation-exclude select-none inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded px-1.5 py-px align-[1px] text-[10.5px] font-semibold tracking-[0.03em] bg-primary/15 text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              style={recordingOn ? undefined : DECISION_OFF_STYLE}
+              data-pinpoint-ignore=""
+              data-question-decision-toggle=""
+            ><DiamondGlyph />Records a decision</button>{' '}</>
+          ) : recordingOn ? (
+            <><Tag tone="rec"><DiamondGlyph />Records a decision</Tag>{' '}</>
+          ) : (
+            <><Tag tone="rec" style={DECISION_OFF_STYLE}><DiamondGlyph />Records a decision</Tag>{' '}</>
+          ))}
+          {statusTag !== 'none' && (
+            <>
+              {status === 'answered' && <Tag tone="ok"><CheckGlyph />Answered</Tag>}
+              {status === 'settled' && <Tag tone="ok"><CheckGlyph />Settled</Tag>}
+              {status === 'skipped' && <Tag tone="skip">Skipped</Tag>}
+              {status === 'open' && <Tag tone="open">Open</Tag>}
+            </>
+          )}
         </span>
       </div>
 
       <p id={promptId} className="m-0 text-[15px] font-semibold leading-[1.45] text-foreground" data-question-part="prompt">
         {inline(question.prompt)}
       </p>
-      {(question.decision || question.decisionOnAnswer) && (
+      {(question.decision || (decisionCapable && recordingOn)) && (
         <div
           className="annotation-exclude mt-2 mb-0.5 flex items-center gap-2 rounded-lg bg-primary/8 px-[9px] py-1.5 text-[12.5px] leading-[18px] text-foreground [&>svg]:text-primary"
           data-pinpoint-ignore=""