From 391cf5c76bb53cecc937c8c4cd97b78863c1236a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 8 Jul 2026 22:37:10 +0000
Subject: [PATCH 1/2] I've updated the CommentsPanel to support native form
 posting. I wrapped the comment input and post button in a `<form>` element to
 restore the native "Enter to send" functionality. This greatly improves
 keyboard accessibility and overall UX without requiring brittle keydown
 handlers. Additionally, I added an aria-label to the input to further improve
 accessibility.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md                |  3 +++
 src/components/CommentsPanel.tsx | 13 ++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..5746fc84
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - Faux Forms to Native Forms
+**Learning:** Users naturally expect to submit chat/comment inputs by hitting the "Enter" key. When using a `<div>` wrapper with an `<input>` and an `onClick` `<button>`, this core behavior breaks, leading to poor keyboard UX and accessibility.
+**Action:** Always wrap text inputs and submit buttons in a native `<form onSubmit={...}>` rather than using standalone inputs with button click handlers. This natively restores 'Enter to submit' behavior without brittle `onKeyDown` listeners, and correctly connects the inputs semantics.
diff --git a/src/components/CommentsPanel.tsx b/src/components/CommentsPanel.tsx
index 2a595884..a20930a9 100644
--- a/src/components/CommentsPanel.tsx
+++ b/src/components/CommentsPanel.tsx
@@ -52,21 +52,28 @@ export default function CommentsPanel({ entityType, entityId }: Props) {
           <div className="text-xs text-slate-500 text-center py-4">No comments yet.</div>
         )}
       </div>
-      <div className="mt-3 flex gap-2">
+      <form
+        className="mt-3 flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          post()
+        }}
+      >
         <input
           value={text}
           onChange={(e) => setText(e.target.value)}
           placeholder="Write a comment..."
+          aria-label="Write a comment"
           className="flex-1 rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-400/40"
         />
         <button
-          onClick={post}
+          type="submit"
           disabled={loading || !text.trim()}
           className="rounded-md bg-[#6C63FF] px-3 py-2 text-xs font-semibold text-white disabled:opacity-50 hover:bg-[#5A52E6] transition-colors duration-150"
         >
           Post
         </button>
-      </div>
+      </form>
     </div>
   )
 }

From bc76d97759a0385960fcfbea5e67cd9c501e604f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 8 Jul 2026 22:41:15 +0000
Subject: [PATCH 2/2] I have updated the UX for the CommentsPanel by enabling
 native form posting. I wrapped the comment input and post button in a
 `<form>` element to restore the native "Enter to post" functionality. This
 greatly improves keyboard accessibility and UX without requiring brittle
 keydown handlers. Additionally, I added an aria-label to the input.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>