feat(diff): unified comment UI with gutter plus and content-drag selection

The diff comment editor is restyled as the shared comment pill (context
line inside the box, auto-growing textarea, round attach button;
Cmd/Ctrl+Enter attaches, Enter breaks the line) and the saved-comment
card matches the composer preview entries. Pierre's gutter utility is
enabled: hovering a line shows a small primary-colored plus that opens
a comment for the line, dragging from it selects a range, and it rides
the bottom of an active selection. Clicking a diff line toggles a
single-line comment, and dragging over content maps to the same line
selection the number column produces — the native text selection is
suppressed once a drag crosses a line boundary — opening the editor for
the range on release. Placeholders and meta lines are dimmed relative
to typed text.

packages/ui/src/components/comments/InlineCommentCard.tsx

@@ -1,17 +1,9 @@
 import React, { useState } from 'react';
 import type { InlineCommentDraft } from '@/stores/useInlineCommentDraftStore';
-import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Icon } from "@/components/icon/Icon";
+import { Icon } from '@/components/icon/Icon';
 import { useI18n } from '@/lib/i18n';
 
 interface InlineCommentCardProps {
@@ -22,6 +14,14 @@ interface InlineCommentCardProps {
   maxWidth?: number;
 }
 
+const HEADER_ACTION_CLASS = 'inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[var(--surface-mutedForeground)] hover:bg-[var(--interactive-hover)] hover:text-[var(--surface-foreground)]';
+
+/**
+ * A saved inline comment shown under its lines in the diff/editor. Styled to
+ * match the composer's context preview entries: a muted header band naming
+ * the file and range with direct edit/remove actions, and the comment text
+ * below.
+ */
 export function InlineCommentCard({
   draft,
   onEdit,
@@ -30,115 +30,90 @@ export function InlineCommentCard({
   maxWidth,
 }: InlineCommentCardProps) {
   const { t } = useI18n();
-  const themeContext = useOptionalThemeSystem();
-  const currentTheme = themeContext?.currentTheme;
   const [isOpen, setIsOpen] = useState(false);
-  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-  const draftText = typeof draft.text === 'string' ? draft.text : '';
-  
+  const draftText = draft.text;
+
   // Check if content is long enough to warrant collapsing (rough estimate)
-  // In a real app we might measure line height, but length check is a good proxy for now
   const isLongContent = draftText.length > 150 || draftText.split('\n').length > 3;
 
   return (
-    <ContextMenu open={isContextMenuOpen} onOpenChange={setIsContextMenuOpen}>
-      <ContextMenuTrigger
-        render={
-          <div
-            className={cn(
-              "rounded-lg border shadow-none w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden transition-all duration-200",
-              className
-            )}
-            style={{
-              backgroundColor: currentTheme?.colors?.surface?.elevated,
-              borderColor: currentTheme?.colors?.interactive?.border,
-              maxWidth: maxWidth ? `${Math.max(200, Math.floor(maxWidth))}px` : undefined,
-            }}
-            data-comment-card="true"
-            onContextMenu={(event) => {
-              event.preventDefault();
-              setIsContextMenuOpen(true);
-            }}
-          />
-        }
+    <div
+      className={cn(
+        'w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-none',
+        className
+      )}
+      style={{
+        maxWidth: maxWidth ? `${Math.max(200, Math.floor(maxWidth))}px` : undefined,
+      }}
+      data-comment-card="true"
+    >
+      <div
+        className="flex items-center gap-1.5 px-3 py-1.5"
+        style={{ backgroundColor: 'color-mix(in srgb, var(--surface-mutedForeground) 8%, transparent)' }}
       >
-      <div className="flex items-start justify-between gap-2 p-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground mb-1.5">
-            <span className="truncate max-w-[200px]" title={draft.fileLabel}>
-              {draft.fileLabel}
-            </span>
-            <span>•</span>
-            <span>{t('inlineComment.range.lines', { start: draft.startLine, end: draft.endLine })}</span>
-            {draft.side && <span>({draft.side})</span>}
-          </div>
-          
-          <Collapsible open={isOpen || !isLongContent} onOpenChange={setIsOpen}>
-            <div className={cn("text-sm whitespace-pre-wrap break-words leading-relaxed", !isOpen && isLongContent && "line-clamp-3")}>
-              {draftText}
-            </div>
-            
-            {isLongContent && (
-              <CollapsibleTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
-                  className="h-6 px-0 mt-1 text-xs text-muted-foreground hover:text-foreground w-full justify-start"
-                >
-                  {isOpen ? (
-                    <>
-                      <Icon name="arrow-up-s" className="size-3 mr-1" />
-                      {t('inlineComment.actions.showLess')}
-                    </>
-                  ) : (
-                    <>
-                      <Icon name="arrow-down-s" className="size-3 mr-1" />
-                      {t('inlineComment.actions.showMore')}
-                    </>
-                  )}
-                </Button>
-              </CollapsibleTrigger>
-            )}
-            
-            <CollapsibleContent>
-              {/* Used for animation purposes if we want to animate height */}
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 -mr-1 text-muted-foreground hover:text-foreground"
-            >
-              <Icon name="more" className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={onEdit}>
-              <Icon name="edit" className="size-4 mr-2" />
-              {t('inlineComment.actions.editComment')}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onDelete} className="text-destructive">
-              <Icon name="delete-bin" className="size-4 mr-2" />
-              {t('inlineComment.actions.deleteComment')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <span className="min-w-0 max-w-[200px] truncate text-xs font-medium text-[var(--surface-foreground)]" title={draft.fileLabel}>
+          {draft.fileLabel}
+        </span>
+        <span className="text-xs text-[var(--surface-mutedForeground)]">•</span>
+        <span className="min-w-0 flex-1 truncate text-xs text-[var(--surface-mutedForeground)]">
+          {t('inlineComment.range.lines', { start: draft.startLine, end: draft.endLine })}
+          {draft.side ? ` (${draft.side})` : ''}
+        </span>
+        <button
+          type="button"
+          className={HEADER_ACTION_CLASS}
+          style={{ minHeight: 0, minWidth: 0 }}
+          onClick={onEdit}
+          aria-label={t('inlineComment.actions.editComment')}
+          title={t('inlineComment.actions.editComment')}
+        >
+          <Icon name="pencil" className="h-3 w-3" />
+        </button>
+        <button
+          type="button"
+          className={HEADER_ACTION_CLASS}
+          style={{ minHeight: 0, minWidth: 0 }}
+          onClick={onDelete}
+          aria-label={t('inlineComment.actions.deleteComment')}
+          title={t('inlineComment.actions.deleteComment')}
+        >
+          <Icon name="close" className="h-3 w-3" />
+        </button>
       </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem onClick={onEdit}>
-          <Icon name="edit" className="size-4 mr-2" />
-          {t('inlineComment.actions.editComment')}
-        </ContextMenuItem>
-        <ContextMenuItem onClick={onDelete} className="text-destructive focus:text-destructive">
-          <Icon name="delete-bin" className="size-4 mr-2" />
-          {t('inlineComment.actions.deleteComment')}
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+
+      <div className="px-3 py-2">
+        <Collapsible open={isOpen || !isLongContent} onOpenChange={setIsOpen}>
+          <div className={cn('whitespace-pre-wrap break-words text-sm leading-relaxed text-[var(--surface-foreground)]', !isOpen && isLongContent && 'line-clamp-3')}>
+            {draftText}
+          </div>
+
+          {isLongContent && (
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="mt-1 h-6 w-full justify-start px-0 text-xs text-muted-foreground hover:text-foreground"
+              >
+                {isOpen ? (
+                  <>
+                    <Icon name="arrow-up-s" className="mr-1 size-3" />
+                    {t('inlineComment.actions.showLess')}
+                  </>
+                ) : (
+                  <>
+                    <Icon name="arrow-down-s" className="mr-1 size-3" />
+                    {t('inlineComment.actions.showMore')}
+                  </>
+                )}
+              </Button>
+            </CollapsibleTrigger>
+          )}
+
+          <CollapsibleContent>
+            {/* Used for animation purposes if we want to animate height */}
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
   );
 }

packages/ui/src/components/comments/InlineCommentInput.tsx

@@ -1,8 +1,6 @@
 import React, { useRef, useEffect } from 'react';
-import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
-import { Button } from '@/components/ui/button';
-import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
+import { Icon } from '@/components/icon/Icon';
 import { useDeviceInfo } from '@/lib/device';
 import { useI18n } from '@/lib/i18n';
 
@@ -18,6 +16,12 @@ export interface InlineCommentInputProps {
   maxWidth?: number;
 }
 
+/**
+ * The comment editor shown under selected diff/editor lines. Styled as the
+ * same pill used by chat quote comments and browser annotations: a rounded
+ * auto-growing textarea with a round attach button, and a muted context line
+ * above naming the file and range.
+ */
 export function InlineCommentInput({
   initialText = '',
   onTextChange,
@@ -30,17 +34,24 @@ export function InlineCommentInput({
   maxWidth,
 }: InlineCommentInputProps) {
   const { t } = useI18n();
-  const themeContext = useOptionalThemeSystem();
-  const currentTheme = themeContext?.currentTheme;
   const { isMobile } = useDeviceInfo();
   const [text, setText] = React.useState(initialText);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  void isEditing;
 
   const handleTextChange = (value: string) => {
     setText(value);
     onTextChange?.(value);
+    resizeTextarea();
   };
-  
+
+  const resizeTextarea = () => {
+    const element = textareaRef.current;
+    if (!element) return;
+    element.style.height = 'auto';
+    element.style.height = `${Math.min(element.scrollHeight, 120)}px`;
+  };
+
   // Stable range snapshot to prevent race with selection clearing
   const stableRangeRef = useRef(lineRange);
   useEffect(() => {
@@ -62,8 +73,9 @@ export function InlineCommentInput({
   useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
+    resizeTextarea();
 
-    const scrollContainer = textarea.closest('.overlay-scrollbar-container') as HTMLElement | null;
+    const scrollContainer = textarea.closest<HTMLElement>('.overlay-scrollbar-container');
     const prevScrollTop = scrollContainer?.scrollTop ?? window.scrollY;
     const prevScrollLeft = scrollContainer?.scrollLeft ?? window.scrollX;
 
@@ -100,12 +112,18 @@ export function InlineCommentInput({
     });
   }, [isMobile]);
 
+  const save = () => {
+    if (text.trim()) {
+      onSave(text, normalizeRange(stableRangeRef.current));
+    }
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
+    // As the placeholder promises: Cmd/Ctrl+Enter attaches, plain Enter
+    // breaks the line, Escape cancels.
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
       e.preventDefault();
-      if (text.trim()) {
-        onSave(text, normalizeRange(stableRangeRef.current));
-      }
+      save();
     } else if (e.key === 'Escape') {
       e.preventDefault();
       onCancel();
@@ -115,75 +133,61 @@ export function InlineCommentInput({
   const handleSaveClick = (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
     // Stop propagation to prevent parent selection clearing before save
     e.stopPropagation();
-    if (text.trim()) {
-      onSave(text, normalizeRange(stableRangeRef.current));
-    }
+    save();
   };
 
   return (
     <div
       className={cn(
-        "rounded-lg border shadow-none w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+        'w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] animate-in fade-in zoom-in-95 duration-200',
         className
       )}
       style={{
-        backgroundColor: currentTheme?.colors?.surface?.elevated,
-        borderColor: currentTheme?.colors?.interactive?.border,
         maxWidth: maxWidth ? `${Math.max(200, Math.floor(maxWidth))}px` : undefined,
       }}
       data-comment-input="true"
       onPointerDown={(e) => e.stopPropagation()}
       onTouchStart={(e) => e.stopPropagation()}
     >
-      <div className="p-3">
-        {(fileLabel || lineRange) && (
-          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground mb-2">
-            {fileLabel && <span className="truncate max-w-[200px]">{fileLabel}</span>}
-            {fileLabel && lineRange && <span>•</span>}
-            {displayRange && (
-              <span>
-                {t('inlineComment.range.lines', { start: displayRange.start, end: displayRange.end })}
-              </span>
-            )}
+      <div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-[0_4px_16px_-4px_rgb(0_0_0_/_0.12)]">
+        {(fileLabel || displayRange) ? (
+          <div className="flex items-center gap-2 px-3 pt-2 text-xs font-medium text-[var(--surface-mutedForeground)] opacity-60">
+            {fileLabel ? <span className="max-w-[200px] truncate">{fileLabel}</span> : null}
+            {fileLabel && displayRange ? <span>•</span> : null}
+            {displayRange ? (
+              <span>{t('inlineComment.range.lines', { start: displayRange.start, end: displayRange.end })}</span>
+            ) : null}
           </div>
-        )}
-        
-        <Textarea
-          simple
+        ) : null}
+        <div className="flex items-end gap-2 py-1 pl-3 pr-1">
+        <textarea
           ref={textareaRef}
+          rows={1}
           value={text}
           onChange={(e) => handleTextChange(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder={isMobile ? t('inlineComment.input.placeholderShort') : t('inlineComment.input.placeholder')}
-          outerClassName="rounded-[var(--radius-xl)] bg-[var(--surface-subtle)] ring-1 ring-inset ring-border/60 focus-within:ring-2 focus-within:ring-[var(--interactive-focus-ring)]"
-          className="min-h-[80px] px-3 py-2.5 text-sm resize-y"
+          className={cn(
+            'min-w-0 flex-1 resize-none bg-transparent text-sm leading-5 text-[var(--surface-foreground)] outline-none placeholder:text-[var(--surface-mutedForeground)] placeholder:opacity-60',
+            isMobile ? 'py-1.5 text-base leading-6' : 'py-1.5'
+          )}
+          style={{ minHeight: 0, height: 'auto' }}
         />
-        
-        <div className="flex items-center justify-end gap-2 mt-3">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onCancel}
-            onPointerDown={(e) => e.stopPropagation()}
-            onTouchStart={(e) => e.stopPropagation()}
-            className="h-8 text-muted-foreground hover:text-foreground"
-          >
-            {t('inlineComment.actions.cancel')}
-          </Button>
-          <Button
-            size="sm"
-            onClick={handleSaveClick}
-            onPointerDown={(e) => e.stopPropagation()}
-            onTouchStart={(e) => e.stopPropagation()}
-            disabled={!text.trim()}
-            className="h-8 min-w-[80px]"
-            style={{
-              backgroundColor: currentTheme?.colors?.status?.success,
-              color: currentTheme?.colors?.status?.successForeground,
-            }}
-          >
-            {isEditing ? t('inlineComment.actions.save') : t('inlineComment.actions.comment')}
-          </Button>
+        <button
+          type="button"
+          onClick={handleSaveClick}
+          onPointerDown={(e) => e.stopPropagation()}
+          onTouchStart={(e) => e.stopPropagation()}
+          disabled={!text.trim()}
+          className={cn(
+            'mb-0.5 flex shrink-0 items-center justify-center rounded-full bg-[var(--primary-base)] text-[var(--primary-foreground)] transition-opacity duration-150 hover:opacity-90 disabled:opacity-40',
+            isMobile ? 'h-9 w-9' : 'h-8 w-8'
+          )}
+          aria-label={t('inlineComment.actions.comment')}
+          title={t('inlineComment.actions.comment')}
+        >
+          <Icon name="attachment-2" className="h-4 w-4" />
+        </button>
         </div>
       </div>
     </div>