fix: resolve nested button DOM nesting in approval pill

Change the approval group header from <button> to a <div> with
role='button' and keyboard handling to avoid nesting the GroupToggle
<button> inside another <button>, which is invalid HTML.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/components/chat/InlinePills.tsx

@@ -540,10 +540,12 @@ export function InlineApprovalPill({
                       {group.label}
                     </div>
                   ) : (
-                    <button
+                    <div
-                      className={`flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left transition hover:bg-zinc-800/60 ${groupIdx > 0 ? 'mt-0.5' : ''}`}
+                      className={`flex w-full cursor-pointer items-center gap-1.5 px-2.5 py-1.5 text-left transition hover:bg-zinc-800/60 ${groupIdx > 0 ? 'mt-0.5' : ''}`}
                       onClick={() => toggleExpanded(group.id)}
-                      type="button"
+                      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleExpanded(group.id); } }}
+                      role="button"
+                      tabIndex={0}
                     >
                       {group.tools.length > 0 ? (
                         <ChevronRight className={`size-3 shrink-0 text-zinc-600 transition ${expanded ? 'rotate-90' : ''}`} />
@@ -559,7 +561,7 @@ export function InlineApprovalPill({
                         someApproved={someApproved}
                         onToggle={(e) => { e.stopPropagation(); toggleGroup(group); }}
                       />
-                    </button>
+                    </div>
                   )}
 
                   {/* Group tools */}