fix(sidebar): make entire section header row clickable

The toggle was only on the chevron button. Now the full row
(chevron + icon + label) triggers onToggle on click or Enter/Space.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/composites/CommandPalette/CommandPalette.tsx

@@ -194,7 +194,15 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
   if (!open) return null
 
   return createPortal(
-    <div className={styles.overlay} onClick={onClose} data-testid="command-palette-overlay">
+    <div
+      className={styles.overlay}
+      onClick={onClose}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClose() }}
+      role="button"
+      tabIndex={0}
+      aria-label="Close command palette"
+      data-testid="command-palette-overlay"
+    >
       <div
         className={styles.panel}
         onClick={(e) => e.stopPropagation()}
@@ -298,6 +306,12 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                         onSelect(result)
                         onClose()
                       }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          onSelect(result)
+                          onClose()
+                        }
+                      }}
                       onMouseEnter={() => { userNavigated.current = true; setFocusedIdx(flatIdx) }}
                     >
                       <div className={styles.itemMain}>

src/design-system/composites/TreeView/TreeView.tsx

@@ -230,6 +230,10 @@ function TreeNodeRow({
 
   return (
     <li role="none">
+      {/* S1082: No onKeyDown here by design — the parent <ul role="tree"> carries
+          onKeyDown={handleKeyDown} which handles Enter (select) and all arrow keys
+          per the WAI-ARIA tree widget pattern. Adding a duplicate handler here would
+          fire the action twice. */}
       <div
         role="treeitem"
         aria-expanded={hasChildren ? isExpanded : undefined}

src/design-system/layout/Sidebar/Sidebar.module.css

@@ -215,6 +215,8 @@
   gap: 2px;
   width: 100%;
   padding: 8px 0 4px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .treeSectionChevronBtn {

src/design-system/layout/Sidebar/Sidebar.tsx

@@ -115,15 +115,18 @@ function SidebarSection({
 
   return (
     <div className={`${styles.treeSection} ${active ? styles.treeSectionActive : ''} ${className ?? ''}`}>
-      <div className={styles.treeSectionToggle}>
-        <button
-          className={styles.treeSectionChevronBtn}
-          onClick={onToggle}
-          aria-expanded={open}
-          aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
-        >
+      <div
+        className={styles.treeSectionToggle}
+        onClick={onToggle}
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle() } }}
+      >
+        <span className={styles.treeSectionChevronBtn} aria-hidden="true">
           {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        </button>
+        </span>
         {icon && <span className={styles.sectionIcon}>{icon}</span>}
         <span className={styles.treeSectionLabel}>{label}</span>
       </div>

src/design-system/layout/Sidebar/SidebarTree.tsx

@@ -366,6 +366,10 @@ function SidebarTreeRow({
 
   return (
     <li role="none">
+      {/* S1082: No onKeyDown here by design — the parent <ul role="tree"> carries
+          onKeyDown={handleKeyDown} which handles Enter (navigate) and all arrow keys
+          per the WAI-ARIA tree widget pattern. Adding a duplicate handler here would
+          fire the action twice. */}
       <div
         role="treeitem"
         aria-expanded={hasChildren ? isExpanded : undefined}

src/design-system/primitives/InlineEdit/InlineEdit.tsx

@@ -59,7 +59,15 @@ export function InlineEdit({ value, onSave, placeholder, disabled, className }:
     <span className={`${styles.display} ${disabled ? styles.disabled : ''} ${className ?? ''}`}>
       <span
         className={isEmpty ? styles.placeholder : styles.value}
+        role="button"
+        tabIndex={disabled ? undefined : 0}
         onClick={startEdit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            startEdit()
+          }
+        }}
       >
         {isEmpty ? placeholder : value}
       </span>