docs: update spec and guide for search position and chevron removal

- COMPONENT_GUIDE: note search renders between Header and Sections,
  no chevrons on section headers
- Spec: update rendering diagrams and description to match
  implemented behavior

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

COMPONENT_GUIDE.md

@@ -114,8 +114,11 @@ Sidebar compound API:
     </Sidebar.Footer>
   </Sidebar>
 
-The app controls all content — sections, order, tree data, collapse state.
-Sidebar provides the frame, search input, and icon-rail collapse mode.
+Notes:
+- Search input auto-renders between Header and first Section (not above Header)
+- Section headers have no chevron — the entire row is clickable to toggle
+- The app controls all content — sections, order, tree data, collapse state
+- Sidebar provides the frame, search input, and icon-rail collapse mode
 ```
 
 ### Data page pattern

docs/superpowers/specs/2026-04-02-composable-sidebar-design.md

@@ -73,6 +73,7 @@ The outer shell. Renders the sidebar frame with an optional search input and col
 - Width transition: `transition: width 200ms ease`
 - Collapse toggle button (`<<` / `>>` chevron) in top-right corner
 - Search input hidden when collapsed
+- Search input auto-positioned between `Sidebar.Header` and first `Sidebar.Section` (not above Header)
 
 ### `<Sidebar.Header>`
 
@@ -119,13 +120,13 @@ An accordion section with a collapsible header and content area.
 
 **Expanded rendering:**
 ```
-v [icon] APPLICATIONS
+[icon] APPLICATIONS
   (children rendered here)
 ```
 
 **Collapsed rendering:**
 ```
-> [icon] APPLICATIONS
+[icon] APPLICATIONS
 ```
 
 **In sidebar icon-rail mode:**
@@ -133,7 +134,7 @@ v [icon] APPLICATIONS
 [icon]     <- centered, tooltip shows label on hover
 ```
 
-Header has: chevron (left), icon, label. Chevron rotates on collapse/expand. Active section gets the amber left-border accent (existing pattern). Clicking the header calls `onToggle`.
+Header has: icon and label (no chevron — the entire row is clickable). Active section gets the amber left-border accent (existing pattern). Clicking anywhere on the header row calls `onToggle`.
 
 **Implementation detail:** `Sidebar.Section` and `Sidebar.Header` need to know the parent's `collapsed` state to switch between expanded and icon-rail rendering. The `<Sidebar>` component provides `collapsed` and `onCollapseToggle` via React context (`SidebarContext`). Sub-components read from context — no prop drilling needed.
 

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

@@ -83,6 +83,20 @@ export function BarChart({
     setTooltip({ x: mx, y: my, label: catLabel, values })
   }
 
+  function showBarTooltip(e: React.MouseEvent<SVGRectElement>, cat: string) {
+    const rect = e.currentTarget.closest('svg')!.getBoundingClientRect()
+    handleMouseEnter(
+      cat,
+      e.clientX - rect.left,
+      e.clientY - rect.top,
+      series.map((ss, ssi) => ({
+        series: ss.label,
+        value: ss.data.find((d) => d.x === cat)?.y ?? 0,
+        color: ss.color ?? CHART_COLORS[ssi % CHART_COLORS.length],
+      })),
+    )
+  }
+
   return (
     <div className={`${styles.wrapper} ${className ?? ''}`}>
       {yLabel && <div className={styles.yLabel}>{yLabel}</div>}
@@ -138,19 +152,7 @@ export function BarChart({
                       height={barH}
                       fill={color}
                       className={styles.bar}
-                      onMouseEnter={(e) => {
-                        const rect = e.currentTarget.closest('svg')!.getBoundingClientRect()
-                        handleMouseEnter(
-                          cat,
-                          e.clientX - rect.left,
-                          e.clientY - rect.top,
-                          series.map((ss, ssi) => ({
-                            series: ss.label,
-                            value: ss.data.find((d) => d.x === cat)?.y ?? 0,
-                            color: ss.color ?? CHART_COLORS[ssi % CHART_COLORS.length],
-                          })),
-                        )
-                      }}
+                      onMouseEnter={(e) => showBarTooltip(e, cat)}
                     />
                   )
                 })}
@@ -184,19 +186,7 @@ export function BarChart({
                     height={barH}
                     fill={color}
                     className={styles.bar}
-                    onMouseEnter={(e) => {
-                      const svgEl = e.currentTarget.closest('svg')!.getBoundingClientRect()
-                      handleMouseEnter(
-                        cat,
-                        e.clientX - svgEl.left,
-                        e.clientY - svgEl.top,
-                        series.map((ss, ssi) => ({
-                          series: ss.label,
-                          value: ss.data.find((d) => d.x === cat)?.y ?? 0,
-                          color: ss.color ?? CHART_COLORS[ssi % CHART_COLORS.length],
-                        })),
-                      )
-                    }}
+                    onMouseEnter={(e) => showBarTooltip(e, cat)}
                   />
                 )
               })}

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

@@ -186,10 +186,23 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
     setScopeFilters((prev) => prev.filter((_, i) => i !== idx))
   }
 
+  function toggleExpanded(e: React.MouseEvent, id: string) {
+    e.stopPropagation()
+    setExpandedId((prev) => (prev === id ? null : id))
+  }
+
   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()}
@@ -293,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}>
@@ -328,10 +347,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                         {result.expandedContent && (
                           <button
                             className={styles.expandBtn}
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              setExpandedId((prev) => (prev === result.id ? null : result.id))
-                            }}
+                            onClick={(e) => toggleExpanded(e, result.id)}
                             aria-expanded={isExpanded}
                             aria-label="Toggle detail"
                           >

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

@@ -57,6 +57,10 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastItem[]>([])
   const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())
 
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
   const dismiss = useCallback((id: string) => {
     // Clear auto-dismiss timer if running
     const timer = timersRef.current.get(id)
@@ -71,10 +75,8 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     )
 
     // Remove after animation completes
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id))
-    }, EXIT_ANIMATION_MS)
-  }, [])
+    setTimeout(() => removeToast(id), EXIT_ANIMATION_MS)
+  }, [removeToast])
 
   const toast = useCallback(
     (options: ToastOptions): string => {

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

@@ -31,6 +31,52 @@ function flattenVisibleNodes(
   return result
 }
 
+// ── Keyboard nav helpers ─────────────────────────────────────────────────────
+
+function handleArrowDown(visibleNodes: FlatNode[], currentIndex: number, focusNode: (id: string) => void) {
+  const next = visibleNodes[currentIndex + 1]
+  if (next) focusNode(next.node.id)
+}
+
+function handleArrowUp(visibleNodes: FlatNode[], currentIndex: number, focusNode: (id: string) => void) {
+  const prev = visibleNodes[currentIndex - 1]
+  if (prev) focusNode(prev.node.id)
+}
+
+function handleArrowRight(
+  current: FlatNode | undefined,
+  currentIndex: number,
+  expandedSet: Set<string>,
+  visibleNodes: FlatNode[],
+  handleToggle: (id: string) => void,
+  focusNode: (id: string) => void,
+) {
+  if (!current) return
+  const hasChildren = current.node.children && current.node.children.length > 0
+  if (!hasChildren) return
+  if (!expandedSet.has(current.node.id)) {
+    handleToggle(current.node.id)
+  } else {
+    const next = visibleNodes[currentIndex + 1]
+    if (next) focusNode(next.node.id)
+  }
+}
+
+function handleArrowLeft(
+  current: FlatNode | undefined,
+  expandedSet: Set<string>,
+  handleToggle: (id: string) => void,
+  focusNode: (id: string) => void,
+) {
+  if (!current) return
+  const hasChildren = current.node.children && current.node.children.length > 0
+  if (hasChildren && expandedSet.has(current.node.id)) {
+    handleToggle(current.node.id)
+  } else if (current.parentId !== null) {
+    focusNode(current.parentId)
+  }
+}
+
 interface TreeViewProps {
   nodes: TreeNode[]
   onSelect?: (id: string) => void
@@ -105,68 +151,13 @@ export function TreeView({
       const current = visibleNodes[currentIndex]
 
       switch (e.key) {
-        case 'ArrowDown': {
-          e.preventDefault()
-          const next = visibleNodes[currentIndex + 1]
-          if (next) focusNode(next.node.id)
-          break
-        }
-        case 'ArrowUp': {
-          e.preventDefault()
-          const prev = visibleNodes[currentIndex - 1]
-          if (prev) focusNode(prev.node.id)
-          break
-        }
-        case 'ArrowRight': {
-          e.preventDefault()
-          if (!current) break
-          const hasChildren = current.node.children && current.node.children.length > 0
-          if (hasChildren) {
-            if (!expandedSet.has(current.node.id)) {
-              // Expand it
-              handleToggle(current.node.id)
-            } else {
-              // Move to first child (it will be the next visible node)
-              const next = visibleNodes[currentIndex + 1]
-              if (next) focusNode(next.node.id)
-            }
-          }
-          break
-        }
-        case 'ArrowLeft': {
-          e.preventDefault()
-          if (!current) break
-          const hasChildren = current.node.children && current.node.children.length > 0
-          if (hasChildren && expandedSet.has(current.node.id)) {
-            // Collapse
-            handleToggle(current.node.id)
-          } else if (current.parentId !== null) {
-            // Move to parent
-            focusNode(current.parentId)
-          }
-          break
-        }
-        case 'Enter': {
-          e.preventDefault()
-          if (current) {
-            onSelect?.(current.node.id)
-          }
-          break
-        }
-        case 'Home': {
-          e.preventDefault()
-          if (visibleNodes.length > 0) {
-            focusNode(visibleNodes[0].node.id)
-          }
-          break
-        }
-        case 'End': {
-          e.preventDefault()
-          if (visibleNodes.length > 0) {
-            focusNode(visibleNodes[visibleNodes.length - 1].node.id)
-          }
-          break
-        }
+        case 'ArrowDown': { e.preventDefault(); handleArrowDown(visibleNodes, currentIndex, focusNode); break }
+        case 'ArrowUp': { e.preventDefault(); handleArrowUp(visibleNodes, currentIndex, focusNode); break }
+        case 'ArrowRight': { e.preventDefault(); handleArrowRight(current, currentIndex, expandedSet, visibleNodes, handleToggle, focusNode); break }
+        case 'ArrowLeft': { e.preventDefault(); handleArrowLeft(current, expandedSet, handleToggle, focusNode); break }
+        case 'Enter': { e.preventDefault(); if (current) onSelect?.(current.node.id); break }
+        case 'Home': { e.preventDefault(); if (visibleNodes.length > 0) focusNode(visibleNodes[0].node.id); break }
+        case 'End': { e.preventDefault(); if (visibleNodes.length > 0) focusNode(visibleNodes[visibleNodes.length - 1].node.id); break }
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -239,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

@@ -1,11 +1,9 @@
-import { type ReactNode } from 'react'
+import { type ReactNode, Children, isValidElement } from 'react'
 import {
   Search,
   X,
   ChevronsLeft,
   ChevronsRight,
-  ChevronRight,
-  ChevronDown,
 } from 'lucide-react'
 import styles from './Sidebar.module.css'
 import { SidebarContext, useSidebarContext } from './SidebarContext'
@@ -115,15 +113,15 @@ 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}`}
-        >
-          {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        </button>
+      <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() } }}
+      >
         {icon && <span className={styles.sectionIcon}>{icon}</span>}
         <span className={styles.treeSectionLabel}>{label}</span>
       </div>
@@ -196,35 +194,50 @@ function SidebarRoot({
           </button>
         )}
 
-        {/* Search (only when expanded and handler provided) */}
-        {onSearchChange && !collapsed && (
-          <div className={styles.searchWrap}>
-            <div className={styles.searchInner}>
-              <span className={styles.searchIcon} aria-hidden="true">
-                <Search size={12} />
-              </span>
-              <input
-                className={styles.searchInput}
-                type="text"
-                placeholder="Filter..."
-                value={searchValue ?? ''}
-                onChange={(e) => onSearchChange(e.target.value)}
-              />
-              {searchValue && (
-                <button
-                  type="button"
-                  className={styles.searchClear}
-                  onClick={() => onSearchChange('')}
-                  aria-label="Clear search"
-                >
-                  <X size={12} />
-                </button>
-              )}
-            </div>
-          </div>
-        )}
+        {/* Render Header first, then search, then remaining children */}
+        {(() => {
+          const childArray = Children.toArray(children)
+          const headerIdx = childArray.findIndex(
+            (child) => isValidElement(child) && child.type === SidebarHeader,
+          )
+          const header = headerIdx >= 0 ? childArray[headerIdx] : null
+          const rest = headerIdx >= 0
+            ? [...childArray.slice(0, headerIdx), ...childArray.slice(headerIdx + 1)]
+            : childArray
 
-        {children}
+          return (
+            <>
+              {header}
+              {onSearchChange && !collapsed && (
+                <div className={styles.searchWrap}>
+                  <div className={styles.searchInner}>
+                    <span className={styles.searchIcon} aria-hidden="true">
+                      <Search size={12} />
+                    </span>
+                    <input
+                      className={styles.searchInput}
+                      type="text"
+                      placeholder="Filter..."
+                      value={searchValue ?? ''}
+                      onChange={(e) => onSearchChange(e.target.value)}
+                    />
+                    {searchValue && (
+                      <button
+                        type="button"
+                        className={styles.searchClear}
+                        onClick={() => onSearchChange('')}
+                        aria-label="Clear search"
+                      >
+                        <X size={12} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+              {rest}
+            </>
+          )
+        })()}
       </aside>
     </SidebarContext.Provider>
   )

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

@@ -124,6 +124,52 @@ function filterNodes(
   return { filtered: walk(nodes), matchedParentIds }
 }
 
+// ── Keyboard nav helpers ─────────────────────────────────────────────────────
+
+function handleArrowDown(visibleNodes: FlatNode[], currentIndex: number, focusNode: (id: string) => void) {
+  const next = visibleNodes[currentIndex + 1]
+  if (next) focusNode(next.node.id)
+}
+
+function handleArrowUp(visibleNodes: FlatNode[], currentIndex: number, focusNode: (id: string) => void) {
+  const prev = visibleNodes[currentIndex - 1]
+  if (prev) focusNode(prev.node.id)
+}
+
+function handleArrowRight(
+  current: FlatNode | undefined,
+  currentIndex: number,
+  expandedSet: Set<string>,
+  visibleNodes: FlatNode[],
+  handleToggle: (id: string) => void,
+  focusNode: (id: string) => void,
+) {
+  if (!current) return
+  const hasChildren = current.node.children && current.node.children.length > 0
+  if (!hasChildren) return
+  if (!expandedSet.has(current.node.id)) {
+    handleToggle(current.node.id)
+  } else {
+    const next = visibleNodes[currentIndex + 1]
+    if (next) focusNode(next.node.id)
+  }
+}
+
+function handleArrowLeft(
+  current: FlatNode | undefined,
+  expandedSet: Set<string>,
+  handleToggle: (id: string) => void,
+  focusNode: (id: string) => void,
+) {
+  if (!current) return
+  const hasChildren = current.node.children && current.node.children.length > 0
+  if (hasChildren && expandedSet.has(current.node.id)) {
+    handleToggle(current.node.id)
+  } else if (current.parentId !== null) {
+    focusNode(current.parentId)
+  }
+}
+
 // ── SidebarTree ──────────────────────────────────────────────────────────────
 
 export function SidebarTree({
@@ -222,64 +268,13 @@ export function SidebarTree({
       const current = visibleNodes[currentIndex]
 
       switch (e.key) {
-        case 'ArrowDown': {
-          e.preventDefault()
-          const next = visibleNodes[currentIndex + 1]
-          if (next) focusNode(next.node.id)
-          break
-        }
-        case 'ArrowUp': {
-          e.preventDefault()
-          const prev = visibleNodes[currentIndex - 1]
-          if (prev) focusNode(prev.node.id)
-          break
-        }
-        case 'ArrowRight': {
-          e.preventDefault()
-          if (!current) break
-          const hasChildren = current.node.children && current.node.children.length > 0
-          if (hasChildren) {
-            if (!expandedSet.has(current.node.id)) {
-              handleToggle(current.node.id)
-            } else {
-              const next = visibleNodes[currentIndex + 1]
-              if (next) focusNode(next.node.id)
-            }
-          }
-          break
-        }
-        case 'ArrowLeft': {
-          e.preventDefault()
-          if (!current) break
-          const hasChildren = current.node.children && current.node.children.length > 0
-          if (hasChildren && expandedSet.has(current.node.id)) {
-            handleToggle(current.node.id)
-          } else if (current.parentId !== null) {
-            focusNode(current.parentId)
-          }
-          break
-        }
-        case 'Enter': {
-          e.preventDefault()
-          if (current?.node.path) {
-            navigate(current.node.path)
-          }
-          break
-        }
-        case 'Home': {
-          e.preventDefault()
-          if (visibleNodes.length > 0) {
-            focusNode(visibleNodes[0].node.id)
-          }
-          break
-        }
-        case 'End': {
-          e.preventDefault()
-          if (visibleNodes.length > 0) {
-            focusNode(visibleNodes[visibleNodes.length - 1].node.id)
-          }
-          break
-        }
+        case 'ArrowDown': { e.preventDefault(); handleArrowDown(visibleNodes, currentIndex, focusNode); break }
+        case 'ArrowUp': { e.preventDefault(); handleArrowUp(visibleNodes, currentIndex, focusNode); break }
+        case 'ArrowRight': { e.preventDefault(); handleArrowRight(current, currentIndex, expandedSet, visibleNodes, handleToggle, focusNode); break }
+        case 'ArrowLeft': { e.preventDefault(); handleArrowLeft(current, expandedSet, handleToggle, focusNode); break }
+        case 'Enter': { e.preventDefault(); if (current?.node.path) navigate(current.node.path); break }
+        case 'Home': { e.preventDefault(); if (visibleNodes.length > 0) focusNode(visibleNodes[0].node.id); break }
+        case 'End': { e.preventDefault(); if (visibleNodes.length > 0) focusNode(visibleNodes[visibleNodes.length - 1].node.id); break }
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -371,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>