@plannotator/ui 0.51.0 → 0.52.1

package/HANDOFF.md

@@ -1880,6 +1880,241 @@ Pinned by `components/DiagramBlock.askAI.test.tsx` and
 
 ---
 
+## Ask AI names a text selection's source lines (ui 0.52.0; additive, no core change)
+
+An Ask AI question asked from a markdown text selection now says which
+source lines the selection is on, so a phrase that occurs more than once in
+the document is no longer ambiguous (#1731). Nothing to pass; a host that
+ignores the new fields keeps working.
+
+- **`CommentAskAIContext.lineStart?` / `lineEnd?`** and
+  **`AIQuestion.scope.lineStart?` / `lineEnd?`** (1-based, additive). `Viewer`
+  fills them on the context its text-selection composer and its code-block
+  composer hand to `onAskAI`: the span of the enclosing block, which for a
+  selection within one block is the same span the exported annotation from
+  that selection prints as `(line 41)` / `(lines 41–44)`. A selection over
+  several blocks gives a range from the first block's start line to the last
+  block's end line, while the export names only the first block. The global
+  composer, HTML / live-app
+  pinpoints and diagram comments carry none (diagrams already send their line
+  in `detail`).
+- **`buildDefaultPrompt`** appends them to the `Source:` line:
+  `Source: /docs/plan.md, line 41` or `Source: /docs/plan.md, lines 41–44`
+  (`Source: line 41` with no `sourcePath`). A scope without them, or with a
+  value that is not a positive integer, prints exactly what it printed before.
+  A host that maps `CommentAskAIContext` onto `AIQuestion.scope` field by
+  field must copy the two fields to get the line into the question.
+- **New pure helper `selectionSourceLines(blocks, blockIds)`** (`utils/parser`)
+  returns `{ lineStart, lineEnd }` or `null`.
+- **`CommentPopoverState.blockIds?`** (`hooks/useAnnotationHighlighter`,
+  additive): the `data-block-id`s the pending selection covers, which is what
+  `Viewer` maps to lines.
+
+Lines are document lines of the markdown the `Viewer` was given (frontmatter
+counted). Plannotator drops them for a converted HTML / URL source, whose
+converted markdown lines do not exist in the original file (its mapping is
+`packages/editor/askScope.ts`, pinned by `askScope.test.ts`). Pinned by
+`components/Viewer.askAISelectionLine.test.tsx` (DOM-gated),
+`utils/parser.selectionLines.test.ts` (including parity with the export
+heading for single-block selections) and `utils/aiPrompt.test.ts`.
+
+---
+
+## `CompletionOverlay` `done` state (ui 0.52.0; additive)
+
+`submitted` accepts a new value, `'done'`: the session finished with nothing
+sent (Plannotator uses it for an annotate Done with nothing to send). It
+renders a neutral check icon; the host still supplies the title and subtitle.
+`ComponentProps<typeof CompletionOverlay>['submitted']` therefore now includes
+`'done'`, so a host that switches exhaustively over that type gets one more
+case to handle.
+
+Neither `'done'` nor `'exited'` (Close) renders the footer's "Your response
+has been sent." line any more, since neither sends anything. That line only
+appears in the auto-close `closed` phase (an immediate auto-close whose close
+request went to a host window such as Glimpse or the VS Code panel's parent),
+so this is a visible change for `'exited'` only there. Every other value
+renders exactly as before. The overlay root now carries
+`data-completion-state={submitted}`.
+
+## Quick Labels: reorder and editable emoji (ui 0.52.0; additive, no core change)
+
+Settings → Labels (#1736) lets a person move a label up or down (per-row
+buttons, `aria-label="Move <text> up|down"`, a polite live region announces
+the new position and key) and change its emoji (a one-emoji field; anything
+that is not exactly one emoji is shown invalid, never saved, and reverts on
+blur). The tab now lives in `components/settings/QuickLabelsTab` and
+`Settings` renders it; nothing about `Settings`' props changed.
+
+**The persisted shape is unchanged.** Labels are still saved as
+`QuickLabel[]` under `plannotator-quick-labels` through the storage backend,
+with the same fields; a reorder is just a different array order and an emoji
+edit a different `emoji` value. Rows get a stable identity for the editing
+session only (it is never written, so an older reader sees nothing new and the
+cookie does not grow). `QuickLabel.id` keeps its old meaning (derived from the
+text when the text is edited; `custom-<ts>` for new labels) and is still not
+unique: the list renderer `QuickLabelDropdown` now keys rows by position, so
+two labels with the same text no longer collide.
+
+What a host should know:
+
+- **Position is the key binding.** Alt/⌥1…9, 0 apply the label at positions
+  1…10 (`quickLabelShortcutDigit` / `quickLabelIndexForDigit`); moving a label
+  in Settings is what remaps its key. Lists are read once when a toolbar or
+  picker mounts, so a change applies to the next selection.
+- **An annotation keeps the emoji it was created with.** The label is copied
+  into the annotation as `${emoji} ${text}`; editing the emoji (like editing
+  the text) affects only annotations created afterwards.
+- New pure exports in `utils/quickLabels`: `quickLabelShortcutDigit`,
+  `quickLabelIndexForDigit`, `moveQuickLabel`, `parseQuickLabelEmoji` (one
+  emoji grapheme, including ZWJ sequences, flags, keycaps and skin tones, or
+  null) and `emojiFromFieldInput`. Nothing was removed or renamed.
+
+## Question decision toggle and status tag (ui 0.52.0; additive, no core change)
+
+What Workspaces asked for: the reviewer can switch a `Decision: when answered`
+question's recording off and on from the card itself, and the host can draw
+its own status tag. Three optional props on `Viewer`, forwarded through
+`BlockRenderer` to `QuestionBlock` the way `renderQuestionFooter` is.
+Plannotator passes none of them, so its cards render exactly as before.
+
+| `Viewer` | `BlockRenderer` | `QuestionBlock` |
+| --- | --- | --- |
+| `questionDecisionRecording?: (question: IndexedQuestion) => boolean \| undefined` | `questionDecisionRecording?: boolean` | `decisionRecording?: boolean` |
+| `onToggleQuestionDecisionRecording?: (key, next) => void` | same | `onToggleDecisionRecording?: (key, next) => void` |
+| `questionStatusTag?: 'card' \| 'none'` | same | `statusTag?: 'card' \| 'none'` |
+
+- **Recording state** (`decisionRecording`, default `true`; on `Viewer` a
+  function of the question, called per question card, so it can read your
+  store by `question.question.key`). It applies only to a question carrying
+  `Decision: when answered` (`decisionOnAnswer`) whose decision is not
+  already recorded. Off draws the same "Records a decision" tag dimmed (in
+  the theme's `--muted-foreground`, not by opacity, so it stays as legible as
+  any secondary text) with a dotted outline and no fill (never different
+  words), and hides the "Answering this
+  records a decision" row (`[data-question-decision-row]`). A recorded
+  decision (`Decision: [statement](url)`) and a question with no decision line
+  are never affected.
+- **The toggle** (`onToggleDecisionRecording`): the tag becomes
+  `<button type="button" aria-pressed>` with `[data-question-decision-toggle]`,
+  keyboard operable, a focus ring (a ring, not an outline: the dotted outline
+  draws the off state). A click calls the handler with the question's key and
+  the NEXT state; the card does not keep the state itself, so pass it back
+  through `decisionRecording` / `questionDecisionRecording`.
+- **Read-only cards never offer the toggle.** A card is read-only when it has
+  no answer handler (`Viewer`: `readOnly`, or neither `onAnswerQuestion` nor
+  `onSaveQuestionAnswer`); it draws the tag in its current state as a plain
+  tag. `Viewer` also drops `onToggleQuestionDecisionRecording` under
+  `readOnly`, like the answer handlers.
+- **`decisionRecording: false` without a handler** is honored: the static tag
+  is drawn off and the row is hidden. Use it to show a state the reviewer may
+  not change.
+- **Attributes.** `data-question-decision` keeps its values (`on-answer`,
+  `recorded`) whatever the toggle says, so a selector keyed on the question's
+  kind does not move. A separate `data-question-decision-recording="on" | "off"`
+  appears on the card only for a `decisionOnAnswer` question when the host
+  passed `decisionRecording` or the handler; a card with neither carries no
+  new attribute.
+- **`statusTag: 'none'`** hides the card's own Open / Answered / Settled /
+  Skipped tag; the decision tags ("Decision", "Records a decision") stay, and
+  `data-question-status` still carries the status for your own tag.
+- **No stylesheet change.** The toggle reuses utility classes the package
+  already ships, and the off state is an inline style, so `styles.css` and
+  the guides.show viewer manifest are unchanged (no guides.show deploy needed
+  for this).
+
+Pinned by `components/blocks/QuestionBlock.decisionToggle.test.tsx`
+(DOM-gated): the toggle's button, `aria-pressed` and handler arguments, the
+row hidden when off, recorded and plain questions untouched, read-only cards
+static, `statusTag: 'none'`, the `Viewer` threading, and a card with none of
+the props rendering the same markup.
+
+## Decision toggle on any question, and an opener for the host's decision card (ui 0.52.1; additive, no core change)
+
+Two gaps Workspaces found in 0.52.0 against its approved Inbox design
+("the tag is the switch" on every question, off by default; "clicking the
+tag's words opens the decision card"). Plannotator passes none of this, and a
+card without the new props renders byte-identically to 0.52.0 (checked by
+rendering main and the branch through `BlockRenderer` and `Viewer`,
+interactive and read-only, with no props, with a 0.52.0-shaped host, and with
+a 0.52.0 host returning a boolean for every question).
+
+| `Viewer` | `BlockRenderer` | `QuestionBlock` |
+| --- | --- | --- |
+| `questionDecisionScope?: 'when-answered' \| 'any'` | same | `decisionScope?: 'when-answered' \| 'any'` |
+| `onOpenQuestionDecision?: (key, anchor: HTMLElement) => void` | same | `onOpenDecision?: (key, anchor: HTMLElement) => void` |
+
+1. **Any question can record a decision, opt-in.** With
+   `questionDecisionScope="any"` (`decisionScope: 'any'`),
+   `decisionRecording` / `questionDecisionRecording` also reaches a question
+   WITHOUT a decision line: a boolean adds the "◇ Records a decision" tag in
+   that state (and, with `onToggleDecisionRecording`, makes it the toggle),
+   `undefined` leaves the question as it was (no tag). The default,
+   `'when-answered'`, is the 0.52.0 behaviour: only `Decision: when answered`
+   questions carry the tag, and a boolean returned for a plain question is
+   ignored, as 0.52.0 documented. It is an explicit opt-in rather than
+   "a boolean means show it" so that a 0.52.0 host that returns a boolean for
+   every question does not grow tags on its plain questions in a patch
+   release. On shows the same "Answering this records
+   a decision" row a `Decision: when answered` question shows; off hides it.
+   The default for such a question is whatever you return: start it `false`
+   for "off by default". A question with a recorded decision
+   (`Decision: [statement](url)`) is still never affected, and
+   `data-question-decision` still describes the question's own line (absent
+   for a plain question); `data-question-decision-recording="on" | "off"`
+   appears once you supply a state.
+2. **A separate opener (`onOpenDecision` / `onOpenQuestionDecision`).** Given,
+   the tag is drawn as two adjacent targets inside one visual tag
+   (`[data-question-decision-tag]`), siblings, never nested:
+   - the diamond is the switch: `<button aria-pressed aria-label="Record as a
+     decision" data-question-decision-toggle>` calling
+     `onToggleDecisionRecording(key, next)`. Without a toggle handler the
+     diamond is decoration, not a control.
+   - the words "Records a decision" are `<button aria-haspopup="dialog"
+     data-question-decision-open>`, calling `onOpenDecision(key, element)`
+     with the words' own button as the popover anchor. The card keeps no
+     open state; your popover owns focus and returns it to the anchor.
+   The opener is offered whether recording is on or off: what an off
+   question's card does (switch it on as it opens, or open a card that says
+   it is off) is the host's call. Tab order is switch, then words, both with
+   the `ring-2 ring-primary` focus ring the 0.52.0 toggle uses (a ring, not
+   an outline, because the dotted outline draws the off state, which is now
+   on the wrapping tag). The off look is unchanged: muted-foreground text and
+   a dotted outline (#1744's contrast fix). Without `onOpenDecision` the
+   whole tag is the toggle exactly as in 0.52.0.
+3. **Read-only cards are never interactive.** No answer handler (or
+   `Viewer` `readOnly`, which also drops `onOpenQuestionDecision`) draws the
+   tag as a plain tag in its current state.
+
+Measured in headless Chromium with the default theme: switch and words are
+7.37:1 (dark) / 8.98:1 (light) off, 5.84:1 / 5.15:1 on; the focus ring is
+7.53:1 / 6.53:1 against the card. The split tag draws exactly the 0.52.0 tag
+(127.66 × 17.75 px, the same 4 px between diamond and words). Target size
+(WCAG 2.5.8) is met without changing that look: the diamond (18 × 17.75 px
+drawn) carries an invisible `before:` box 6 px past it on every side, so it
+clicks as 24 × 29.75 px; the words, positioned and later in the tree, paint
+over the box's right-hand part, so a click on the words is always the words,
+and the words (110 px wide) meet the spacing exception.
+
+**No stylesheet change**: only utility classes the package already ships
+(the hit box is the `before:absolute before:-inset-1.5 before:content-['']`
+pattern of the annotation panel's icon buttons), so `styles.css` and the
+guides.show viewer manifest are unchanged (`check:manifest` in sync).
+
+Pinned by `components/blocks/QuestionBlock.decisionAnyQuestion.test.tsx`
+(DOM-gated): the tag on a plain question only with the `'any'` scope and a
+supplied state (a boolean without the scope changes nothing), the
+toggle's arguments and the row on/off, the switch and the opener as sibling
+buttons with the anchor element, tab order, the opener without a toggle
+handler, 0.52.0 behavior without `onOpenDecision`, read-only cards, `Viewer`
+threading, and no-prop markup.
+
+---
+
+## Stale-tab guard: `serverSession` (ui 0.52.0, core 0.25.12; additive)
+
+Plannotator's servers issue one random `serverSession` nonce per process (new `@plannotator/core/server-session`) and refuse a decision that echoes a different one with `409 { code: "session_mismatch" }`, so a tab left open on a reused port cannot decide a new session. The client half is `utils/serverSession` (`adoptServerSession`, `withServerSession`, `withServerSessionQuery`, `noteServerSessionMismatch`, `useServerSessionReplaced`) plus `components/ServerSessionReplacedBanner`. Hosts that post decisions to their own backend need none of it: nothing in the shared components sends the field on its own, and a request without it is always accepted.
+
 ## The law (guardrails for anyone editing `@plannotator/ui`)
 
 These are enforced socially and, where possible, by CI. They exist because a prior from-scratch reimplementation of this UI broke the app and was reverted.

package/README.md

@@ -384,6 +384,21 @@ See HANDOFF.md § "Questions in documents (0.48.0, core 0.25.8)".
 
 See HANDOFF.md § "Question host seams (ui 0.49.0, core 0.25.9)".
 
+**Decision recording toggle and status tag (ui 0.52.0, unreleased).** Also optional on `Viewer`, also unused by Plannotator:
+
+- `questionDecisionRecording(question) => boolean | undefined`: false draws a `Decision: when answered` question's "Records a decision" tag dimmed with a dotted outline and hides its "Answering this records a decision" row. A recorded decision is never affected.
+- `onToggleQuestionDecisionRecording(key, next)`: makes that tag an `aria-pressed` toggle button; store `next` and return it from `questionDecisionRecording`. Not offered under `readOnly` or in a card without an answer handler.
+- `questionStatusTag: 'none'`: hides the card's own Open / Answered / Settled / Skipped tag so you can draw your own; the decision tags stay.
+
+See HANDOFF.md § "Question decision toggle and status tag (ui 0.52.0, unreleased; …)".
+
+**Decision toggle on any question, and a decision-card opener (ui 0.52.1, unreleased).** Also optional on `Viewer`, also unused by Plannotator:
+
+- `questionDecisionScope?: 'when-answered' | 'any'` (default `'when-answered'`, the 0.52.0 behaviour). With `'any'`, `questionDecisionRecording(question)` also applies to a question with no decision line: a boolean adds the "Records a decision" tag in that state (true also shows the "Answering this records a decision" row); `undefined` leaves it tag-less. Return `false` for "off by default".
+- `onOpenQuestionDecision(key, anchor)`: splits the tag into a diamond switch (`aria-pressed`, "Record as a decision", driven by `onToggleQuestionDecisionRecording`) and the words as a button (`aria-haspopup="dialog"`) that calls this with its own element to anchor your decision card. Offered on and off; not offered under `readOnly`. Without it the whole tag is the toggle, as in 0.52.0.
+
+See HANDOFF.md § "Decision toggle on any question, and an opener for the host's decision card (ui 0.52.1, …)".
+
 ### Diff file tree (`components/DiffFileTree`; next ui release)
 
 A read-only file tree for a list of changed files, to sit beside a host's own per-file diff list. It is Plannotator's code-review tree, not a lookalike: the builder (`utils/diffFileTree`), the folder open/closed hook (`hooks/useDiffFileTreeExpansion`) and the row atoms moved here from `packages/review-editor`, and the review now renders from them.

package/components/AnnotationToolbar.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from "react";
 import { AnnotationType } from "../types";
 import { createPortal } from "react-dom";
 import { useDismissOnOutsideAndEscape } from "../hooks/useDismissOnOutsideAndEscape";
-import { type QuickLabel, getQuickLabels, THUMBS_UP_LABEL } from "../utils/quickLabels";
+import { type QuickLabel, getQuickLabels, quickLabelIndexForDigit, THUMBS_UP_LABEL } from "../utils/quickLabels";
 import { copyTextToClipboard } from "../utils/clipboard";
 import { acquireTypeToCommentCapture } from "../shortcuts/plan-review/annotationMode.shortcuts";
 import { FloatingQuickLabelPicker } from "./FloatingQuickLabelPicker";
@@ -174,7 +174,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
         e.preventDefault();
         if (!commentOnly && quickLabelsEnabled) {
           const digit = parseInt(e.code.slice(5), 10);
-          const index = digit === 0 ? 9 : digit - 1;
+          const index = quickLabelIndexForDigit(digit);
           if (index < quickLabels.length) {
             onQuickLabel?.(quickLabels[index]);
           }

package/components/BlockRenderer.tsx

@@ -51,7 +51,17 @@ export const BlockRenderer: React.FC<{
   saveQuestionAnswerLabel?: QuestionBlockProps['saveLabel'];
   /** Host actions in a question card's footer (see `QuestionBlock`). */
   renderQuestionFooter?: QuestionBlockProps['renderFooter'];
-}> = ({ block, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, onToggleCheckbox, checkboxOverrides, orderedIndex, githubRepo, repoHost, headingAnchorId, onNavigateAnchor, question, questionTotal, questionAnswer, onAnswerQuestion, onSaveQuestionAnswer, saveQuestionAnswerLabel, renderQuestionFooter }) => {
+  /** Whether answering this question records a decision (see `QuestionBlock`). */
+  questionDecisionRecording?: QuestionBlockProps['decisionRecording'];
+  /** `'any'` lets a question without a decision line carry the tag (see `QuestionBlock`). */
+  questionDecisionScope?: QuestionBlockProps['decisionScope'];
+  /** Makes the "Records a decision" tag a toggle (see `QuestionBlock`). */
+  onToggleQuestionDecisionRecording?: QuestionBlockProps['onToggleDecisionRecording'];
+  /** Opens the host's decision card from the tag's words (see `QuestionBlock`). */
+  onOpenQuestionDecision?: QuestionBlockProps['onOpenDecision'];
+  /** `'none'` hides the card's own status tag (see `QuestionBlock`). */
+  questionStatusTag?: QuestionBlockProps['statusTag'];
+}> = ({ block, onOpenLinkedDoc, onOpenCodeFile, imageBaseDir, onImageClick, onToggleCheckbox, checkboxOverrides, orderedIndex, githubRepo, repoHost, headingAnchorId, onNavigateAnchor, question, questionTotal, questionAnswer, onAnswerQuestion, onSaveQuestionAnswer, saveQuestionAnswerLabel, renderQuestionFooter, questionDecisionRecording, questionDecisionScope, onToggleQuestionDecisionRecording, onOpenQuestionDecision, questionStatusTag }) => {
   switch (block.type) {
     case 'heading': {
       const Tag = `h${block.level || 1}` as React.ElementType;
@@ -178,6 +188,11 @@ export const BlockRenderer: React.FC<{
               onSaveAnswer={onSaveQuestionAnswer}
               saveLabel={saveQuestionAnswerLabel}
               renderFooter={renderQuestionFooter}
+              decisionRecording={questionDecisionRecording}
+              decisionScope={questionDecisionScope}
+              onToggleDecisionRecording={onToggleQuestionDecisionRecording}
+              onOpenDecision={onOpenQuestionDecision}
+              statusTag={questionStatusTag}
               onOpenLinkedDoc={onOpenLinkedDoc}
               onOpenCodeFile={onOpenCodeFile}
               imageBaseDir={imageBaseDir}

package/components/CommentPopover.tsx

@@ -32,6 +32,10 @@ export interface CommentAskAIContext {
   /** Agent-facing identity of the selected element(s), for a pinpoint on a
    *  raw-HTML or live-app surface. Rides with the question; not displayed. */
   detail?: string;
+  /** 1-based source lines of a markdown text selection (see
+   *  `AIQuestion.scope.lineStart`). Rides with the question; not displayed. */
+  lineStart?: number;
+  lineEnd?: number;
 }
 
 export type CommentAskAIHandler = (

package/components/CompletionOverlay.tsx

@@ -25,7 +25,10 @@ const ChatBubbleIcon = () => (
 // ---------------------------------------------------------------------------
 
 interface CompletionOverlayProps {
-  submitted: 'approved' | 'denied' | 'feedback' | 'exited' | null | false;
+  /** `done`: the session finished with nothing sent (an annotate Done with
+   *  no feedback). Neutral styling. `done` and `exited` (Close) send nothing,
+   *  so neither shows the "response has been sent" line. */
+  submitted: 'approved' | 'denied' | 'feedback' | 'done' | 'exited' | null | false;
   title: string;
   subtitle: string;
   agentLabel: string;
@@ -43,16 +46,20 @@ export function CompletionOverlay({ submitted, title, subtitle, agentLabel, link
   if (!submitted) return null;
 
   const isApproved = submitted === 'approved';
+  const isDone = submitted === 'done';
+  const sentNothing = isDone || submitted === 'exited';
 
   return (
-    <div className="fixed inset-0 z-[100] bg-background flex items-center justify-center">
+    <div className="fixed inset-0 z-[100] bg-background flex items-center justify-center" data-completion-state={submitted}>
       <div className="text-center space-y-6 max-w-md px-8">
         <div
           className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center ${
-            isApproved ? 'bg-success/20 text-success' : 'bg-accent/20 text-accent'
+            isApproved ? 'bg-success/20 text-success'
+            : isDone ? 'bg-muted text-muted-foreground'
+            : 'bg-accent/20 text-accent'
           }`}
         >
-          {isApproved ? <CheckIcon /> : <ChatBubbleIcon />}
+          {isApproved || isDone ? <CheckIcon /> : <ChatBubbleIcon />}
         </div>
 
         <div className="space-y-2">
@@ -109,7 +116,7 @@ export function CompletionOverlay({ submitted, title, subtitle, agentLabel, link
                   </label>
                   <p className="text-xs text-muted-foreground/60">You can change the delay in Settings.</p>
                 </>
-              ) : (
+              ) : sentNothing ? null : (
                 <p className="text-xs text-muted-foreground/60">Your response has been sent.</p>
               )}
             </>

package/components/FloatingQuickLabelPicker.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { type QuickLabel, getQuickLabels } from '../utils/quickLabels';
+import { type QuickLabel, getQuickLabels, quickLabelIndexForDigit } from '../utils/quickLabels';
 import { QuickLabelDropdown } from './QuickLabelDropdown';
 
 interface FloatingQuickLabelPickerProps {
@@ -78,7 +78,7 @@ export const FloatingQuickLabelPicker: React.FC<FloatingQuickLabelPickerProps> =
       if (isDigit && !e.ctrlKey && !e.metaKey) {
         e.preventDefault();
         const digit = parseInt(e.code.slice(5), 10);
-        const index = digit === 0 ? 9 : digit - 1;
+        const index = quickLabelIndexForDigit(digit);
         if (index < quickLabels.length) {
           onSelect(quickLabels[index]);
         }

package/components/QuickLabelDropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type QuickLabel, getLabelColors } from '../utils/quickLabels';
+import { type QuickLabel, getLabelColors, quickLabelShortcutDigit } from '../utils/quickLabels';
 
 /**
  * Shared vertical label list used by both FloatingQuickLabelPicker
@@ -25,9 +25,14 @@ export const QuickLabelDropdown: React.FC<{
       )}
       {labels.map((label, index) => {
         const colors = getLabelColors(label.color);
+        const digit = quickLabelShortcutDigit(index);
         return (
           <button
-            key={label.id}
+            // Keyed by position, not label.id: ids are derived from the
+            // label text, so two labels with the same text share one (#1736).
+            // The list never reorders while open, and position is exactly
+            // what the digit key on each row names.
+            key={index}
             onClick={() => onSelect(label)}
             className="group w-full flex items-center gap-2 px-2 py-[5px] text-left transition-colors hover:bg-muted/60 active:bg-muted"
             style={animate ? {
@@ -50,9 +55,9 @@ export const QuickLabelDropdown: React.FC<{
               {label.text}
             </span>
             {/* Shortcut hint */}
-            {index < 10 && (
+            {digit && (
               <span className="text-[9px] tabular-nums text-muted-foreground/40 group-hover:text-muted-foreground/60 flex-shrink-0 font-mono">
-                {index === 9 ? '0' : index + 1}
+                {digit}
               </span>
             )}
           </button>

package/components/ServerSessionReplacedBanner.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useServerSessionReplaced } from '../utils/serverSession';
+
+/**
+ * The stale-tab prompt (packages/ui/utils/serverSession.ts): shown once a
+ * decision was refused with `409 session_mismatch`, i.e. the Plannotator
+ * session this tab was opened for is gone and a newer one owns the address.
+ * Nothing was submitted; reloading shows what is open there now.
+ */
+export const ServerSessionReplacedBanner: React.FC<{ onReload?: () => void }> = ({ onReload }) => {
+  const replaced = useServerSessionReplaced();
+  if (!replaced) return null;
+  return (
+    <div
+      role="alert"
+      data-server-session-replaced
+      className="fixed inset-x-0 top-0 z-[110] flex items-center justify-center gap-3 border-b border-border bg-destructive/95 px-4 py-2 text-sm text-destructive-foreground shadow-md"
+    >
+      <span>This review was replaced — reload to see what is open now. Nothing was submitted.</span>
+      <button
+        type="button"
+        onClick={onReload ?? (() => window.location.reload())}
+        className="rounded border border-destructive-foreground/40 px-2 py-0.5 font-medium hover:bg-destructive-foreground/10"
+      >
+        Reload
+      </button>
+    </div>
+  );
+};