wip(app): better diff/code comments

anomalyco · adamdotdevin · Feb 27, 2026 · Feb 22, 2026 · Feb 22, 2026 · Feb 22, 2026
commit d4c7d2ba05082cec39627bd9bdecae6be5affcd2
@@ -379,11 +379,32 @@ export default function Page() {
     })
   }
 
+  const isEditableTarget = (target: EventTarget | null | undefined) => {
+    if (!(target instanceof HTMLElement)) return false
+    return /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(target.tagName) || target.isContentEditable
+  }
+
+  const deepActiveElement = () => {
+    let current: Element | null = document.activeElement
+    while (current instanceof HTMLElement && current.shadowRoot?.activeElement) {
+      current = current.shadowRoot.activeElement
+    }
+    return current instanceof HTMLElement ? current : undefined
+  }
+
   const handleKeyDown = (event: KeyboardEvent) => {
-    const activeElement = document.activeElement as HTMLElement | undefined
+    const path = event.composedPath()
+    const target = path.find((item): item is HTMLElement => item instanceof HTMLElement)
+    const activeElement = deepActiveElement()
+
+    const protectedTarget = path.some(
+      (item) => item instanceof HTMLElement && item.closest("[data-prevent-autofocus]") !== null,
+    )
+    if (protectedTarget || isEditableTarget(target)) return
+
     if (activeElement) {
       const isProtected = activeElement.closest("[data-prevent-autofocus]")
-      const isInput = /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(activeElement.tagName) || activeElement.isContentEditable
+      const isInput = isEditableTarget(activeElement)
       if (isProtected || isInput) return
     }
     if (dialog.active) return

diff --git a/packages/ui/src/components/line-comment-annotations.tsx b/packages/ui/src/components/line-comment-annotations.tsx
@@ -42,39 +42,53 @@ export function createLineCommentAnnotationRenderer<T>(props: {
     if (typeof document === "undefined") return
 
     const host = document.createElement("div")
+    host.setAttribute("data-prevent-autofocus", "")
     const [current, setCurrent] = createSignal(meta)
-    const view = createMemo<JSX.Element>(() => {
-      const next = current()
-
-      if (next.kind === "comment") {
-        const view = props.renderComment(next.comment)
-        return (
+    if (meta.kind === "comment") {
+      const view = createMemo(() => {
+        const next = current()
+        if (next.kind !== "comment") return props.renderComment(meta.comment)
+        return props.renderComment(next.comment)
+      })
+      const dispose = renderSolid(
+        () => (
           <LineComment
             inline
-            id={view.id}
-            open={view.open}
-            comment={view.comment}
-            selection={view.selection}
-            onClick={view.onClick}
-            onMouseEnter={view.onMouseEnter}
+            id={view().id}
+            open={view().open}
+            comment={view().comment}
+            selection={view().selection}
+            onClick={view().onClick}
+            onMouseEnter={view().onMouseEnter}
           />
-        )
-      }
+        ),
+        host,
+      )
+
+      const node = { host, dispose, setMeta: setCurrent }
+      nodes.set(meta.key, node)
+      return node
+    }
 
-      const view = props.renderDraft(next.range)
-      return (
+    const view = createMemo(() => {
+      const next = current()
+      if (next.kind !== "draft") return props.renderDraft(meta.range)
+      return props.renderDraft(next.range)
+    })
+    const dispose = renderSolid(
+      () => (
         <LineCommentEditor
           inline
-          value={view.value}
-          selection={view.selection}
-          onInput={view.onInput}
-          onCancel={view.onCancel}
-          onSubmit={view.onSubmit}
-          onPopoverFocusOut={view.onPopoverFocusOut}
+          value={view().value}
+          selection={view().selection}
+          onInput={view().onInput}
+          onCancel={view().onCancel}
+          onSubmit={view().onSubmit}
+          onPopoverFocusOut={view().onPopoverFocusOut}
         />
-      )
-    })
-    const dispose = renderSolid(() => <>{view()}</>, host)
+      ),
+      host,
+    )
 
     const node = { host, dispose, setMeta: setCurrent }
     nodes.set(meta.key, node)

diff --git a/packages/ui/src/components/line-comment.tsx b/packages/ui/src/components/line-comment.tsx
@@ -53,6 +53,7 @@ export const LineCommentAnchor = (props: LineCommentAnchorProps) => {
   return (
     <div
       data-component="line-comment"
+      data-prevent-autofocus=""
       data-variant={variant()}
       data-comment-id={props.id}
       data-open={props.open ? "" : undefined}
@@ -233,16 +234,15 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
           }}
           on:keydown={(e) => {
             const event = e as KeyboardEvent
+            event.stopPropagation()
             if (e.key === "Escape") {
               event.preventDefault()
-              event.stopPropagation()
               split.onCancel()
               return
             }
             if (e.key !== "Enter") return
             if (e.shiftKey) return
             event.preventDefault()
-            event.stopPropagation()
             submit()
           }}
         />