From a69859a556de063ce8a498300df0e2841d2b34ae Mon Sep 17 00:00:00 2001 From: Neil <4138956+nwparker@users.noreply.github.com> Date: Mon, 18 May 2026 16:56:55 -0700 Subject: [PATCH] Update browser annotation feedback controls (#2285) --- .../components/browser-pane/BrowserPane.tsx | 232 ++++++++++-------- .../browser-annotation-output.test.ts | 2 +- .../browser-pane/browser-annotation-output.ts | 1 - 3 files changed, 132 insertions(+), 103 deletions(-) diff --git a/src/renderer/src/components/browser-pane/BrowserPane.tsx b/src/renderer/src/components/browser-pane/BrowserPane.tsx index e80379491..6086bc2c7 100644 --- a/src/renderer/src/components/browser-pane/BrowserPane.tsx +++ b/src/renderer/src/components/browser-pane/BrowserPane.tsx @@ -20,18 +20,25 @@ import { ArrowRight, CircleCheck, Copy, + CornerDownLeft, Crosshair, ExternalLink, Globe, Image, Loader2, + MessageCircleQuestionMark, MessageSquarePlus, OctagonX, + PencilLine, RefreshCw, + Send, SquareCode, Trash2 } from 'lucide-react' import { Button } from '@/components/ui/button' +import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' +import { QuickLaunchAgentMenuItems } from '@/components/tab-bar/QuickLaunchButton' +import { focusTerminalTabSurface } from '@/lib/focus-terminal-tab-surface' import { DropdownMenu, DropdownMenuContent, @@ -41,13 +48,6 @@ import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue -} from '@/components/ui/select' import { Label } from '@/components/ui/label' import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover' import { useAppStore } from '@/store' @@ -166,6 +166,15 @@ type BrowserOverlayAnchor = { below: boolean } +const BROWSER_ANNOTATION_INTENT_OPTIONS = [ + { value: 'change', label: 'Change', icon: PencilLine }, + { value: 'question', label: 'Question', icon: MessageCircleQuestionMark } +] as const + +// Why: priority remains in the persisted annotation shape for backwards +// compatibility, but the annotation UI no longer exposes urgency choices. +const DEFAULT_BROWSER_ANNOTATION_PRIORITY: BrowserAnnotationPriority = 'important' + type BrowserOverlayViewport = { scrollX: number scrollY: number @@ -303,17 +312,13 @@ function PendingBrowserAnnotationCard({ payload: BrowserGrabPayload anchor: BrowserOverlayAnchor portalContainer: HTMLElement | null - onAdd: ( - comment: string, - intent: BrowserAnnotationIntent, - priority: BrowserAnnotationPriority - ) => void + onAdd: (comment: string, intent: BrowserAnnotationIntent) => void onCancel: () => void }): React.JSX.Element { const [comment, setComment] = useState('') const [intent, setIntent] = useState('change') - const [priority, setPriority] = useState('important') const trimmed = comment.trim() + const isMac = navigator.userAgent.includes('Mac') return ( -
-
- - -
-
- - -
+
+ + { + if (value) { + setIntent(value as BrowserAnnotationIntent) + } + }} + className="h-8 w-full [&_[data-slot=toggle-group-item]]:h-8 [&_[data-slot=toggle-group-item]]:flex-1 [&_[data-slot=toggle-group-item]]:px-2" + aria-label="Annotation intent" + > + {BROWSER_ANNOTATION_INTENT_OPTIONS.map((option) => { + const Icon = option.icon + return ( + + + {option.label} + + ) + })} +
@@ -2576,10 +2582,15 @@ function BrowserPagePane({ const browserAnnotations = useAppStore( (s) => s.browserAnnotationsByPageId[browserTab.id] ?? EMPTY_BROWSER_ANNOTATIONS ) + const activeGroupId = useAppStore((s) => s.activeGroupIdByWorktree[worktreeId]) const browserAnnotationsRef = useRef(browserAnnotations) browserAnnotationsRef.current = browserAnnotations const [browserAnnotationTrayOpen, setBrowserAnnotationTrayOpen] = useState(true) const [browserAnnotationsCopied, setBrowserAnnotationsCopied] = useState(false) + const browserAnnotationsPrompt = useMemo( + () => formatBrowserAnnotationsAsMarkdown(browserAnnotations), + [browserAnnotations] + ) const addBrowserPageAnnotation = useAppStore((s) => s.addBrowserPageAnnotation) const deleteBrowserPageAnnotation = useAppStore((s) => s.deleteBrowserPageAnnotation) const clearBrowserPageAnnotations = useAppStore((s) => s.clearBrowserPageAnnotations) @@ -3910,11 +3921,7 @@ function BrowserPagePane({ }, [grab, showGrabToast]) const handleAddBrowserAnnotation = useCallback( - ( - comment: string, - intent: BrowserAnnotationIntent, - priority: BrowserAnnotationPriority - ): void => { + (comment: string, intent: BrowserAnnotationIntent): void => { const payload = pendingAnnotationPayload if (!payload) { return @@ -3924,7 +3931,7 @@ function BrowserPagePane({ browserPageId: browserTab.id, comment, intent, - priority, + priority: DEFAULT_BROWSER_ANNOTATION_PRIORITY, createdAt: new Date().toISOString(), payload: createBrowserAnnotationPayload(payload) }) @@ -3944,21 +3951,14 @@ function BrowserPagePane({ }, [grab, grabIntent]) const handleCopyBrowserAnnotations = useCallback((): void => { - const markdown = formatBrowserAnnotationsAsMarkdown(browserAnnotations) - if (!markdown) { + if (!browserAnnotationsPrompt) { return } - void window.api.ui.writeClipboardText(markdown) + void window.api.ui.writeClipboardText(browserAnnotationsPrompt) clearTimeout(annotationCopyTimerRef.current) setBrowserAnnotationsCopied(true) annotationCopyTimerRef.current = setTimeout(() => setBrowserAnnotationsCopied(false), 1400) - }, [browserAnnotations]) - - const handleClearBrowserAnnotations = useCallback((): void => { - clearTimeout(annotationCopyTimerRef.current) - setBrowserAnnotationsCopied(false) - clearBrowserPageAnnotations(browserTab.id) - }, [browserTab.id, clearBrowserPageAnnotations]) + }, [browserAnnotationsPrompt]) const navigateToUrl = useCallback( (url: string): void => { @@ -4517,6 +4517,31 @@ function BrowserPagePane({ {grabIntent === 'annotate' && browserAnnotations.length > 0 ? ( <> + + + + + + + + + Send feedback to a new agent + + + + + + ) : null}
+ + + + + + + + + Send feedback to a new agent + + + + + +
{browserAnnotations.map((annotation, index) => ( @@ -4712,10 +4744,8 @@ function BrowserPagePane({
{annotation.comment}
-
+
{annotation.intent} - - - {annotation.priority}