style(topbar): make .env badge match neutral button style of liveToggle/themeToggle

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.
+Notes:
-Sidebar provides the frame, search input, and icon-rail collapse mode.
+- 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
@@ -243,7 +246,7 @@ import {
 | Checkbox | primitive | Boolean input with label |
 | CodeBlock | primitive | Syntax-highlighted code/JSON display |
 | Collapsible | primitive | Single expand/collapse section |
-| CommandPalette | composite | Full-screen search and command interface |
+| CommandPalette | composite | Full-screen search and command interface. `SearchCategory` is an open `string` type — known categories (application, exchange, attribute, route, agent) have built-in labels; custom categories render with title-cased labels and appear as dynamic tabs. |
 | ConfirmDialog | composite | Type-to-confirm destructive action dialog built on Modal. Props: open, onClose, onConfirm, title, message, confirmText, confirmLabel, cancelLabel, variant, loading, className |
 | DataTable | composite | Sortable, paginated data table with row actions. Use `flush` prop when embedded inside a container that provides its own border/radius |
 | DateRangePicker | primitive | Date range selection with presets |
@@ -303,7 +306,7 @@ import {
 | Sidebar | Composable compound sidebar shell with icon-rail collapse mode. Sub-components: `Sidebar.Header`, `Sidebar.Section`, `Sidebar.Footer`, `Sidebar.FooterLink`. The app controls all content via children — the DS provides the frame. |
 | SidebarTree | Data-driven tree for sidebar sections. Accepts `nodes: SidebarTreeNode[]` with expand/collapse, starring, keyboard nav, search filter, and path-based selection highlighting. |
 | useStarred | Hook for localStorage-backed starred item IDs. Returns `{ starredIds, isStarred, toggleStar }`. |
-| TopBar | Header bar with breadcrumb, search trigger, ButtonGroup status filters, time range selector, theme toggle, environment badge, user avatar |
+| TopBar | Header bar with breadcrumb, search trigger, ButtonGroup status filters, time range selector, theme toggle, environment slot (`ReactNode` — pass a string for a static label or a custom dropdown for interactive selection), user avatar |
 
 ## Import Paths
 

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/CommandPalette/CommandPalette.tsx

@@ -19,8 +19,7 @@ interface CommandPaletteProps {
   onSubmit?: (query: string) => void
 }
 
-const CATEGORY_LABELS: Record<SearchCategory | 'all', string> = {
+const KNOWN_CATEGORY_LABELS: Record<string, string> = {
-  all: 'All',
   application: 'Applications',
   exchange: 'Exchanges',
   attribute: 'Attributes',
@@ -28,8 +27,8 @@ const CATEGORY_LABELS: Record<SearchCategory | 'all', string> = {
   agent: 'Agents',
 }
 
-const ALL_CATEGORIES: Array<SearchCategory | 'all'> = [
+/** Preferred display order for known categories */
-  'all',
+const KNOWN_CATEGORY_ORDER: string[] = [
   'application',
   'exchange',
   'attribute',
@@ -37,6 +36,13 @@ const ALL_CATEGORIES: Array<SearchCategory | 'all'> = [
   'agent',
 ]
 
+function categoryLabel(cat: string): string {
+  if (cat === 'all') return 'All'
+  if (KNOWN_CATEGORY_LABELS[cat]) return KNOWN_CATEGORY_LABELS[cat]
+  // Title-case unknown categories: "my-thing" → "My Thing", "foo_bar" → "Foo Bar"
+  return cat.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
 function highlightText(text: string, query: string, matchRanges?: [number, number][]): ReactNode {
   if (!query && (!matchRanges || matchRanges.length === 0)) return text
 
@@ -69,7 +75,7 @@ function highlightText(text: string, query: string, matchRanges?: [number, numbe
 
 export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryChange, onSubmit }: CommandPaletteProps) {
   const [query, setQuery] = useState('')
-  const [activeCategory, setActiveCategory] = useState<SearchCategory | 'all'>('all')
+  const [activeCategory, setActiveCategory] = useState<string>('all')
   const [scopeFilters, setScopeFilters] = useState<ScopeFilter[]>([])
   const [focusedIdx, setFocusedIdx] = useState(0)
   const [expandedId, setExpandedId] = useState<string | null>(null)
@@ -128,7 +134,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
 
   // Group results by category
   const grouped = useMemo(() => {
-    const map = new Map<SearchCategory, SearchResult[]>()
+    const map = new Map<string, SearchResult[]>()
     for (const r of filtered) {
       if (!map.has(r.category)) map.set(r.category, [])
       map.get(r.category)!.push(r)
@@ -148,6 +154,19 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
     return counts
   }, [queryFiltered])
 
+  // Build tab list dynamically: 'all' + known categories (in order) + any unknown categories found in data
+  const visibleCategories = useMemo(() => {
+    const dataCategories = new Set(data.map((r) => r.category))
+    const tabs: string[] = ['all']
+    for (const cat of KNOWN_CATEGORY_ORDER) {
+      if (dataCategories.has(cat)) tabs.push(cat)
+    }
+    for (const cat of dataCategories) {
+      if (!tabs.includes(cat)) tabs.push(cat)
+    }
+    return tabs
+  }, [data])
+
   function handleKeyDown(e: React.KeyboardEvent) {
     switch (e.key) {
       case 'Escape':
@@ -246,7 +265,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
 
         {/* Category tabs */}
         <div className={styles.tabs} role="tablist">
-          {ALL_CATEGORIES.map((cat) => (
+          {visibleCategories.map((cat) => (
             <button
               key={cat}
               role="tab"
@@ -262,7 +281,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                 setFocusedIdx(0)
               }}
             >
-              {CATEGORY_LABELS[cat]}
+              {categoryLabel(cat)}
               {categoryCounts[cat] != null && (
                 <span className={styles.tabCount}>{categoryCounts[cat]}</span>
               )}
@@ -283,7 +302,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
             Array.from(grouped.entries()).map(([category, items]) => (
               <div key={category} className={styles.group}>
                 <div className={styles.groupHeader}>
-                  <SectionHeader>{CATEGORY_LABELS[category]}</SectionHeader>
+                  <SectionHeader>{categoryLabel(category)}</SectionHeader>
                 </div>
                 {items.map((result) => {
                   const flatIdx = flatResults.indexOf(result)

src/design-system/composites/CommandPalette/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
-export type SearchCategory = 'application' | 'exchange' | 'attribute' | 'route' | 'agent'
+/** Known categories: 'application' | 'exchange' | 'attribute' | 'route' | 'agent'. Custom categories are rendered with title-cased labels and a default icon. */
+export type SearchCategory = string
 
 export interface SearchResult {
   id: string

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'
@@ -124,9 +122,6 @@ function SidebarSection({
         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} />}
-        </span>
         {icon && <span className={styles.sectionIcon}>{icon}</span>}
         <span className={styles.treeSectionLabel}>{label}</span>
       </div>
@@ -199,35 +194,50 @@ function SidebarRoot({
           </button>
         )}
 
-        {/* Search (only when expanded and handler provided) */}
+        {/* Render Header first, then search, then remaining children */}
-        {onSearchChange && !collapsed && (
+        {(() => {
-          <div className={styles.searchWrap}>
+          const childArray = Children.toArray(children)
-            <div className={styles.searchInner}>
+          const headerIdx = childArray.findIndex(
-              <span className={styles.searchIcon} aria-hidden="true">
+            (child) => isValidElement(child) && child.type === SidebarHeader,
-                <Search size={12} />
+          )
-              </span>
+          const header = headerIdx >= 0 ? childArray[headerIdx] : null
-              <input
+          const rest = headerIdx >= 0
-                className={styles.searchInput}
+            ? [...childArray.slice(0, headerIdx), ...childArray.slice(headerIdx + 1)]
-                type="text"
+            : childArray
-                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>
-        )}
 
-        {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/TopBar/TopBar.module.css

@@ -153,14 +153,17 @@
 }
 
 .env {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-raised);
+  color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 600;
-  padding: 3px 10px;
-  border-radius: 10px;
-  background: var(--success-bg);
-  color: var(--success);
-  border: 1px solid var(--success-border);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react'
 import { Search, Moon, Sun, Power } from 'lucide-react'
 import styles from './TopBar.module.css'
 import { Breadcrumb } from '../../composites/Breadcrumb/Breadcrumb'
@@ -14,7 +15,7 @@ import type { BreadcrumbItem } from '../../providers/BreadcrumbProvider'
 
 interface TopBarProps {
   breadcrumb: BreadcrumbItem[]
-  environment?: string
+  environment?: ReactNode
   user?: { name: string }
   onLogout?: () => void
   className?: string
@@ -90,7 +91,7 @@ export function TopBar({
           title={globalFilters.autoRefresh ? 'Auto-refresh is on — click to pause' : 'Auto-refresh is paused — click to resume'}
         >
           <span className={styles.liveDot} />
-          {globalFilters.autoRefresh ? 'LIVE' : 'PAUSED'}
+          {globalFilters.autoRefresh ? 'AUTO' : 'MANUAL'}
         </button>
         <button
           className={styles.themeToggle}
@@ -102,7 +103,7 @@ export function TopBar({
           {theme === 'light' ? <Moon size={16} /> : <Sun size={16} />}
         </button>
         {environment && (
-          <span className={styles.env}>{environment}</span>
+          <div className={styles.env}>{environment}</div>
         )}
         {user && (
           <Dropdown

src/design-system/providers/GlobalFilterProvider.tsx

@@ -12,6 +12,7 @@ export type ExchangeStatus = 'completed' | 'failed' | 'running' | 'warning'
 interface GlobalFilterContextValue {
   timeRange: TimeRange
   setTimeRange: (range: TimeRange) => void
+  refreshTimeRange: () => void
   statusFilters: Set<ExchangeStatus>
   toggleStatus: (status: ExchangeStatus) => void
   clearStatusFilters: () => void
@@ -76,6 +77,14 @@ export function GlobalFilterProvider({ children }: { children: ReactNode }) {
     return () => clearInterval(id)
   }, [autoRefresh, timeRange.preset])
 
+  // Recompute time range from preset on demand (for manual refresh in PAUSED mode)
+  const refreshTimeRange = useCallback(() => {
+    if (timeRange.preset) {
+      const { start, end } = computePresetRange(timeRange.preset)
+      setTimeRangeState({ start, end, preset: timeRange.preset })
+    }
+  }, [timeRange.preset])
+
   const isInTimeRange = useCallback(
     (timestamp: Date) => {
       if (timeRange.preset) {
@@ -90,7 +99,7 @@ export function GlobalFilterProvider({ children }: { children: ReactNode }) {
 
   return (
     <GlobalFilterContext.Provider
-      value={{ timeRange, setTimeRange, statusFilters, toggleStatus, clearStatusFilters, isInTimeRange, autoRefresh, setAutoRefresh }}
+      value={{ timeRange, setTimeRange, refreshTimeRange, statusFilters, toggleStatus, clearStatusFilters, isInTimeRange, autoRefresh, setAutoRefresh }}
     >
       {children}
     </GlobalFilterContext.Provider>