feat: curate default labels, add cyan/amber colors, bare digit shortcuts

Finalize the 10 default quick labels based on user feedback data:
clarify, overview, verify, example, patterns, alternatives, regression,
out-of-scope, tests, nice-approach. Each label gets a unique color
(added cyan and amber to the palette). Bare digit keys (1-0) now apply
labels when the picker is open, Alt+N still works everywhere. Tip editor
cursor starts at beginning for readability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: backnotprop

packages/ui/components/AnnotationToolbar.tsx

@@ -103,7 +103,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
     };
   }, [element, positionMode, closeOnScrollOut, onClose]);
 
-  // Type-to-comment + Alt+N quick label shortcuts
+  // Type-to-comment + Alt+N / bare digit quick label shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.isComposing) return;
@@ -114,10 +114,12 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
         return;
       }
 
-      // Alt+1..8: apply quick label
-      if (e.altKey && e.code >= 'Digit1' && e.code <= 'Digit9') {
+      // Quick label by digit — Alt+N always works, bare digit when picker is open
+      const isDigit = (e.code >= 'Digit1' && e.code <= 'Digit9') || e.code === 'Digit0';
+      if (isDigit && !e.ctrlKey && !e.metaKey && (e.altKey || showQuickLabels)) {
         e.preventDefault();
-        const index = parseInt(e.code.slice(5), 10) - 1;
+        const digit = parseInt(e.code.slice(5), 10);
+        const index = digit === 0 ? 9 : digit - 1;
         if (index < quickLabels.length) {
           onQuickLabel?.(quickLabels[index]);
         }
@@ -133,7 +135,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onClose, onRequestComment, onQuickLabel, quickLabels]);
+  }, [onClose, onRequestComment, onQuickLabel, quickLabels, showQuickLabels]);
 
   useDismissOnOutsideAndEscape({
     enabled: !showQuickLabels,

packages/ui/components/FloatingQuickLabelPicker.tsx

@@ -65,17 +65,20 @@ export const FloatingQuickLabelPicker: React.FC<FloatingQuickLabelPickerProps> =
     };
   }, [anchorEl, cursorHint]);
 
-  // Keyboard: Alt+1..8 and Escape
+  // Keyboard: 1-9/0 or Alt+1-9/0 to apply label, Escape to dismiss
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault();
         onDismiss();
         return;
       }
-      if (e.altKey && e.code >= 'Digit1' && e.code <= 'Digit9') {
+      // Accept bare digit or Alt+digit — picker is open so digits mean labels
+      const isDigit = (e.code >= 'Digit1' && e.code <= 'Digit9') || e.code === 'Digit0';
+      if (isDigit && !e.ctrlKey && !e.metaKey) {
         e.preventDefault();
-        const index = parseInt(e.code.slice(5), 10) - 1;
+        const digit = parseInt(e.code.slice(5), 10);
+        const index = digit === 0 ? 9 : digit - 1;
         if (index < quickLabels.length) {
           onSelect(quickLabels[index]);
         }

packages/ui/components/KeyboardShortcuts.tsx

@@ -94,7 +94,7 @@ const planShortcuts: ShortcutSection[] = [
     title: 'Annotations',
     shortcuts: [
       { keys: ['a-z'], desc: 'Start typing comment', hint: 'When the annotation toolbar is open, any letter key opens the comment editor with that character' },
-      { keys: [alt, '1-9'], desc: 'Apply quick label', hint: 'When the toolbar or label picker is open, instantly applies the Nth preset label' },
+      { keys: [alt, '1-0'], desc: 'Apply quick label', hint: 'Instantly applies the Nth preset label (0 = 10th). When the label picker is open, bare digits also work.' },
       { keys: [mod, enter], desc: 'Submit comment' },
       { keys: [mod, 'C'], desc: 'Copy selected text' },
       { keys: ['Esc'], desc: 'Close toolbar / Cancel' },

packages/ui/components/QuickLabelDropdown.tsx

@@ -50,9 +50,9 @@ export const QuickLabelDropdown: React.FC<{
               {label.text}
             </span>
             {/* Shortcut hint */}
-            {index < 9 && (
+            {index < 10 && (
               <span className="text-[9px] tabular-nums text-muted-foreground/40 group-hover:text-muted-foreground/60 flex-shrink-0 font-mono">
-                {index + 1}
+                {index === 9 ? '0' : index + 1}
               </span>
             )}
           </button>

packages/ui/components/Settings.tsx

@@ -713,7 +713,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                                 ))}
                               </select>
                               <span className="text-[10px] text-muted-foreground/50 font-mono w-8 text-center flex-shrink-0">
-                                {index < 9 ? `${navigator.platform?.includes('Mac') ? '⌥' : 'Alt+'}${index + 1}` : ''}
+                                {index < 10 ? `${navigator.platform?.includes('Mac') ? '⌥' : 'Alt+'}${index === 9 ? '0' : index + 1}` : ''}
                               </span>
                               <button
                                 onClick={() => {
@@ -756,6 +756,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                                   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={() => {
@@ -799,7 +800,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                     )}
 
                     <div className="text-[10px] text-muted-foreground/70">
-                      Use {navigator.platform?.includes('Mac') ? '⌥' : 'Alt+'}1 through {navigator.platform?.includes('Mac') ? '⌥' : 'Alt+'}9 when the annotation toolbar is visible to apply a label instantly.
+                      Use {navigator.platform?.includes('Mac') ? '⌥' : 'Alt+'}1 through {navigator.platform?.includes('Mac') ? '⌥' : 'Alt+'}0 when the annotation toolbar is visible to apply a label instantly.
                     </div>
                   </>
                 )}

packages/ui/utils/quickLabels.ts

@@ -27,18 +27,21 @@ export const LABEL_COLOR_MAP: Record<string, { bg: string; text: string; darkTex
   teal:   { bg: 'rgba(20,184,166,0.15)',  text: '#0d9488', darkText: '#2dd4bf' },
   pink:   { bg: 'rgba(236,72,153,0.15)',  text: '#db2777', darkText: '#f472b6' },
   green:  { bg: 'rgba(34,197,94,0.15)',   text: '#16a34a', darkText: '#4ade80' },
+  cyan:   { bg: 'rgba(8,145,178,0.15)',   text: '#0891b2', darkText: '#22d3ee' },
+  amber:  { bg: 'rgba(180,83,9,0.15)',    text: '#b45309', darkText: '#fbbf24' },
 };
 
 export const DEFAULT_QUICK_LABELS: QuickLabel[] = [
-  { id: 'clarify-this',        emoji: '❓', text: 'Clarify this',        color: 'yellow' },
-  { id: 'needs-tests',         emoji: '🧪', text: 'Needs tests',         color: 'blue' },
-  { id: 'consider-edge-cases', emoji: '🧩', text: 'Consider edge cases', color: 'teal' },
-  { id: 'missing-overview',    emoji: '🗺️', text: 'Missing overview',    color: 'purple', tip: 'Provide a narrative overview of what is being built, why it is being built, and how it will be built. Add this before the implementation details.' },
-  { id: 'security-concern',    emoji: '🔒', text: 'Security concern',    color: 'red' },
-  { id: 'break-this-up',       emoji: '✂️',  text: 'Break this up',       color: 'orange' },
-  { id: 'wrong-order',         emoji: '🔀', text: 'Wrong order',         color: 'purple' },
-  { id: 'discuss-first',       emoji: '💬', text: 'Discuss first',       color: 'pink' },
-  { id: 'nice-approach',       emoji: '👍', text: 'Nice approach',       color: 'green' },
+  { id: 'clarify-this',            emoji: '❓', text: 'Clarify this',            color: 'yellow' },
+  { id: 'missing-overview',        emoji: '🗺️', text: 'Missing overview',        color: 'purple', tip: 'Provide a narrative overview of what is being built, why it is being built, and how it will be built. Add this before the implementation details.' },
+  { id: 'verify-this',             emoji: '🔍', text: 'Verify this',             color: 'orange', tip: 'This seems like an assumption. Verify by reading the actual code before proceeding.' },
+  { id: 'give-me-an-example',      emoji: '🔬', text: 'Give me an example',      color: 'cyan', tip: 'This is too abstract. Show a before/after, a sample input/output, or a specific scenario so I can see how this actually works.' },
+  { id: 'match-existing-patterns',  emoji: '🧬', text: 'Match existing patterns',  color: 'teal', tip: 'Search the codebase for existing patterns, components, or utilities that already solve this. Reuse what exists rather than introducing a new approach.' },
+  { id: 'consider-alternatives',    emoji: '🔄', text: 'Consider alternatives',    color: 'pink', tip: 'Propose 2-3 alternative approaches with trade-offs based on the actual codebase. Also check ~/.plannotator/plans/ for prior plan versions that may have already explored or rejected similar approaches.' },
+  { id: 'ensure-no-regression',     emoji: '📉', text: 'Ensure no regression',     color: 'amber', tip: 'Verify that this change will not break existing behavior. Identify what could regress and how to protect against it.' },
+  { id: 'out-of-scope',            emoji: '🚫', text: 'Out of scope',            color: 'red', tip: 'This is not part of the current task. Remove it and stay focused on what was actually requested.' },
+  { id: 'needs-tests',             emoji: '🧪', text: 'Needs tests',             color: 'blue' },
+  { id: 'nice-approach',           emoji: '👍', text: 'Nice approach',           color: 'green' },
 ];
 
 export function getQuickLabels(): QuickLabel[] {