Build in the review tool.

web/src/components/Composer.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  onSubmit: (body: string) => Promise<void>;
+  onCancel: () => void;
+}
+
+// Composer is the inline "add a comment" box shown under a line.
+export function Composer({ onSubmit, onCancel }: Props) {
+  const [text, setText] = useState('');
+  const [busy, setBusy] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    ref.current?.focus();
+  }, []);
+
+  const submit = async () => {
+    if (!text.trim()) return;
+    setBusy(true);
+    try {
+      await onSubmit(text.trim());
+      setText('');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="composer">
+      <textarea
+        ref={ref}
+        className="composer-input"
+        placeholder="Leave a comment on this line…"
+        value={text}
+        disabled={busy}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit();
+          if (e.key === 'Escape') onCancel();
+        }}
+      />
+      <div className="composer-actions">
+        <span className="composer-hint">⌘⏎ to add · esc to cancel</span>
+        <button className="btn-ghost" onClick={onCancel} disabled={busy}>
+          Cancel
+        </button>
+        <button
+          className="btn-primary"
+          onClick={submit}
+          disabled={busy || !text.trim()}
+        >
+          Add comment
+        </button>
+      </div>
+    </div>
+  );
+}