feat(tui): github-style bar and inline box for diff line comments

Hovering a line of an in-chat edit, patch or write block shows a + in the
gutter, and dragging the line numbers grows or shrinks a bar there with the
+ on its top line. Releasing floats a comment box right below the last picked
line instead of opening a dialog; enter sends, esc cancels.

The sent prompt drops the "Review comment on" lead-in: just the file, the line
range, the quoted lines and the comment. The bar and + use the new
diff.highlight.selected theme token, which falls back to the interactive hue.

Author: sharunkumar

PATCH.md

@@ -105,7 +105,7 @@ The vertical tab subtree lists unresolved children (running, pending, permission
 
 ## Diff Line Comments (TUI)
 
-In the session transcript, the diffs of `edit` and `apply_patch` tool calls and the numbered content of `write` calls (quoted as added lines) take review comments: pressing or dragging down the line numbers picks lines within one hunk (and one side in split view); text on the code side still selects for copying. Releasing opens a one-line comment prompt, and submitting sends a normal prompt to the viewed session (`Review comment on <file> L<a>-L<b>:`, the picked lines in a `diff` fence, then the comment), so it queues while the session works. Ranges name new line numbers, or old ones marked `(removed)` when only removed lines are picked. Picked lines use the theme token `diff.background.selected`, which defaults to `$hue.interactive.700` for themes that do not set it. `createLineSelection` (`component/line-selection.ts`) owns picking and painting on any `LineNumberRenderable`; `PatchDiff` only uses it when given `onSelectLines`; `useLineComment` (`component/line-comment.tsx`) owns the prompt and message format.
+Dragging down the line numbers of an in-chat edit, patch or write block picks lines, GitHub style, and sends a comment on them to the session as a prompt.
 
 ## Message Actions Jump (TUI)
 

packages/theme/src/tui/expand.ts

@@ -78,12 +78,13 @@ function expandBackground(definition: BackgroundDefinition | undefined): Backgro
   }
 }
 
-// Themes from before the selection token pick a tint of their interactive hue.
+// Themes from before the selection tokens pick their interactive hue: a tint for picked lines, full for the marker.
 function expandDiff(definition: ThemeTokensDefinition["diff"]): ThemeTokensDefinition["diff"] {
   if (!definition?.background?.context) return definition
   return {
     ...definition,
     background: { ...definition.background, selected: definition.background.selected ?? "$hue.interactive.700" },
+    highlight: { ...definition.highlight, selected: definition.highlight?.selected ?? "$hue.interactive.200" },
   }
 }
 

packages/theme/src/tui/schema.ts

@@ -178,7 +178,11 @@ const DiffDefinition = Schema.Struct({
     }),
   ),
   highlight: Schema.optional(
-    Schema.Struct({ added: Schema.optional(ColorValue), removed: Schema.optional(ColorValue) }),
+    Schema.Struct({
+      added: Schema.optional(ColorValue),
+      removed: Schema.optional(ColorValue),
+      selected: Schema.optional(ColorValue),
+    }),
   ),
   lineNumber: Schema.optional(
     Schema.Struct({
@@ -262,7 +266,7 @@ const CompleteThemeTokensDefinition = Schema.Struct({
       context: ColorValue,
       selected: Schema.optional(ColorValue),
     }),
-    highlight: Schema.Struct({ added: ColorValue, removed: ColorValue }),
+    highlight: Schema.Struct({ added: ColorValue, removed: ColorValue, selected: Schema.optional(ColorValue) }),
     lineNumber: Schema.Struct({
       text: ColorValue,
       background: Schema.Struct({ added: ColorValue, removed: ColorValue }),

packages/theme/src/tui/types.ts

@@ -63,7 +63,12 @@ export type ResolvedThemeTokens = {
       /** Lines picked in a diff, such as the range a review comment covers. */
       readonly selected: RGBA
     }
-    readonly highlight: { readonly added: RGBA; readonly removed: RGBA }
+    readonly highlight: {
+      readonly added: RGBA
+      readonly removed: RGBA
+      /** The bar and `+` marking lines picked in a diff. */
+      readonly selected: RGBA
+    }
     readonly lineNumber: {
       readonly text: RGBA
       readonly background: { readonly added: RGBA; readonly removed: RGBA }

packages/theme/test/theme.test.ts

@@ -15,9 +15,10 @@ test.each(["light", "dark"] as const)("resolves %s themes without status tokens"
 })
 
 test.each(["light", "dark"] as const)(
-  "gives %s themes without a diff selection color a tint of the interactive hue",
+  "gives %s themes without diff selection colors their interactive hue",
   (mode) => {
     const theme = resolveThemeDocument(document, mode)
     expect(theme.diff.background.selected).toEqual(theme.hue.interactive[700])
+    expect(theme.diff.highlight.selected).toEqual(theme.hue.interactive[200])
   },
 )

packages/tui/src/component/line-comment.tsx

@@ -1,38 +1,153 @@
-import { useDialog } from "../ui/dialog"
-import { DialogPrompt } from "../ui/dialog-prompt"
+import { TextareaRenderable, type BoxRenderable, type MouseEvent } from "@opentui/core"
+import { useRenderer } from "@opentui/solid"
+import { createSignal, onCleanup, onMount, Show } from "solid-js"
+import { useCursorStyle } from "../config"
+import { Keymap } from "../context/keymap"
+import { useTheme } from "../context/theme"
+import { EmptyBorder } from "../ui/border"
 import { useToast } from "../ui/toast"
 import type { PatchLine } from "../util/diff"
+import type { LineAnchor } from "./line-selection"
+
+type Pending = {
+  readonly at: string
+  readonly file: string
+  readonly lines: readonly PatchLine[]
+  readonly anchor: LineAnchor
+  readonly close: () => void
+}
 
 /**
- * Returns a function that asks for a comment on lines picked in a diff and sends it with `send`. Prompts steer by
- * default, so a comment made while the session works is queued for its next step.
+ * A box for commenting on lines picked in a diff. `open` shows it floating over the code just below the picked lines,
+ * from a `Box` with the same `at` placed inside a container of the diff, and settles once the comment is sent or
+ * dismissed, so the picked lines can stay marked until then. Sent comments go through `send`; prompts steer by default,
+ * so a comment made while the session works is queued for its next step.
  */
-export function useLineComment() {
-  const dialog = useDialog()
+export function createLineComment(send: (text: string) => Promise<unknown>) {
   const toast = useToast()
-  return (input: { file: string; lines: readonly PatchLine[]; send: (text: string) => Promise<unknown> }) =>
-    new Promise<string | undefined>((resolve) =>
-      dialog.replace(
-        () => (
-          <DialogPrompt
-            title="Comment"
-            description={() => <text>{`${input.file} ${lineRange(input.lines)}`}</text>}
-            placeholder="Leave a comment"
-            onConfirm={(value) => {
-              resolve(value)
-              dialog.clear()
-            }}
+  const [pending, setPending] = createSignal<Pending>()
+
+  const open = (at: string, file: string, lines: readonly PatchLine[], anchor: LineAnchor) =>
+    new Promise<void>((resolve) => {
+      pending()?.close()
+      const entry: Pending = {
+        at,
+        file,
+        lines,
+        anchor,
+        close() {
+          if (pending() === entry) setPending(undefined)
+          resolve()
+        },
+      }
+      setPending(entry)
+    })
+
+  const submit = (entry: Pending, comment: string) => {
+    entry.close()
+    if (!comment.trim()) return
+    void send(lineCommentPrompt(entry.file, entry.lines, comment))
+      .then(() => toast.show({ message: "Comment sent", variant: "success" }))
+      .catch(toast.error)
+  }
+
+  function Box(props: { at: string }) {
+    return (
+      <Show when={pending()?.at === props.at ? pending() : undefined} keyed>
+        {(entry) => (
+          <LineCommentBox
+            anchor={entry.anchor}
+            range={lineRange(entry.lines)}
+            onSubmit={(comment) => submit(entry, comment)}
+            onCancel={entry.close}
           />
-        ),
-        () => resolve(undefined),
-      ),
+        )}
+      </Show>
     )
-      .then(async (comment) => {
-        if (!comment?.trim()) return
-        await input.send(lineCommentPrompt(input.file, input.lines, comment))
-        toast.show({ message: "Comment sent", variant: "success" })
-      })
-      .catch(toast.error)
+  }
+
+  return { open, Box }
+}
+
+function LineCommentBox(props: {
+  anchor: LineAnchor
+  range: string
+  onSubmit: (comment: string) => void
+  onCancel: () => void
+}) {
+  const theme = useTheme()
+  const renderer = useRenderer()
+  const cursorStyle = useCursorStyle()
+  const [textarea, setTextarea] = createSignal<TextareaRenderable>()
+  const previous = renderer.currentFocusedRenderable
+
+  Keymap.createLayer(() => ({
+    target: textarea,
+    enabled: textarea() !== undefined,
+    // Above the composer's layers, whose Enter and Escape would otherwise submit the prompt or interrupt the session.
+    priority: 2,
+    commands: [
+      {
+        bind: "return",
+        title: "Send comment",
+        group: "Comment",
+        run: () => props.onSubmit(textarea()?.plainText ?? ""),
+      },
+      { bind: "escape", title: "Cancel comment", group: "Comment", run: props.onCancel },
+    ],
+  }))
+
+  onMount(() => textarea()?.focus())
+  onCleanup(() => {
+    if (previous && !previous.isDestroyed) previous.focus()
+  })
+
+  // The box floats inside a transcript row, whose clicks open message actions.
+  const keep = (event: MouseEvent) => event.stopPropagation()
+
+  // Layout moves the anchor's renderable (scrolling, wrapping, rebuilt diffs), so follow it every frame.
+  const follow = (element: BoxRenderable) => {
+    element.onLifecyclePass = () => {
+      if (props.anchor.target.isDestroyed) return
+      element.translateY = props.anchor.target.y + props.anchor.offset - (element.y - element.translateY)
+    }
+    renderer.registerLifecyclePass(element)
+    onCleanup(() => renderer.unregisterLifecyclePass(element))
+  }
+
+  return (
+    <box
+      ref={follow}
+      position="absolute"
+      top={0}
+      left={0}
+      right={0}
+      zIndex={10}
+      border={["left"]}
+      borderColor={theme.diff.highlight.selected}
+      customBorderChars={{ ...EmptyBorder, vertical: "▌" }}
+      paddingLeft={1}
+      backgroundColor={theme.background.raised.high}
+      onMouseDown={keep}
+      onMouseUp={keep}
+    >
+      <textarea
+        ref={setTextarea}
+        minHeight={1}
+        maxHeight={6}
+        wrapMode="word"
+        placeholder="Leave a comment"
+        placeholderColor={theme.text.muted}
+        textColor={theme.text.formfield.base}
+        focusedTextColor={theme.text.formfield.base}
+        cursorColor={theme.text.base}
+        cursorStyle={cursorStyle()}
+      />
+      <text fg={theme.text.muted} wrapMode="none" truncate>
+        {`${props.range} · enter send · esc cancel`}
+      </text>
+    </box>
+  )
 }
 
 /** Names the picked lines by their new line numbers, or by their old ones when only removed lines are picked. */
@@ -50,7 +165,7 @@ function lineCommentPrompt(file: string, lines: readonly PatchLine[], comment: s
   const fence = "`".repeat(Math.max(3, ticks + 1))
   const sign = { add: "+", remove: "-", context: " " } as const
   return [
-    `Review comment on ${file} ${lineRange(lines)}:`,
+    `${file} ${lineRange(lines)}`,
     "",
     `${fence}diff`,
     ...lines.map((line) => sign[line.kind] + line.text),