@polderlabs/bizar 10.4.2 → 10.4.4

package/bizar-dash/src/web/v8/App.tsx

@@ -1,9 +1,11 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { Menu } from 'lucide-react';
 import { AppShell } from './shell/AppShell.js';
 import { Topbar } from './shell/Topbar.js';
 import { Sidebar, type SidebarSection } from './shell/Sidebar.js';
 import { Box } from './ui/primitives/Box.js';
 import { Inline } from './ui/primitives/Inline.js';
+import { Button } from './ui/controls/Button.js';
 import { useViewForId } from './views/Router.js';
 import { AppCommandPalette } from './views/CommandPalette/AppCommandPalette.js';
 import { useCommandPaletteHotkey } from './ui/navigation/CommandPalette.js';
@@ -139,6 +141,7 @@ function iconFor(id: string): LucideIcon {
 
 export function App(): JSX.Element {
   const [activeId, setActiveId] = useState<string>('overview');
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const theme = useTheme();
   const density = useDensity();
 
@@ -154,6 +157,36 @@ export function App(): JSX.Element {
     mainRef.current?.focus({ preventScroll: true });
   }, [activeId]);
 
+  // H6 — URL routing: sync activeId to/from window.location.hash.
+  // On mount, parse the hash (e.g. "#/tasks") and set activeId.
+  // On popstate (browser back/forward), re-parse and update.
+  // On every activeId change, push the new hash so deep links work.
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash.startsWith('#/')) {
+      const id = hash.slice(2);
+      if (id) setActiveId(id);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
+
+  useEffect(() => {
+    const onPop = (): void => {
+      const hash = window.location.hash;
+      if (hash.startsWith('#/')) {
+        const id = hash.slice(2);
+        if (id) setActiveId(id);
+      } else {
+        setActiveId('overview');
+      }
+    };
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, []);
+
+  useEffect(() => {
+    window.history.pushState(null, '', '#/' + activeId);
+  }, [activeId]);
+
   // Live counts for the sidebar. Polled on mount + WS refresh.
   const tasksRes = useFetch<{ tasks?: { id: string; status: string }[]; count?: number }>('/api/tasks');
   const goalsRes = useFetch<{ goals?: { id: string }[]; count?: number }>('/api/goals');
@@ -288,11 +321,37 @@ export function App(): JSX.Element {
       ref={mainRef}
       topbar={
         <Topbar
+          leading={
+            <button
+              type="button"
+              aria-label="Open navigation menu"
+              data-testid="mobile-menu-toggle"
+              onClick={() => setMobileMenuOpen(true)}
+              style={{
+                display: 'none',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 32,
+                height: 32,
+                background: 'transparent',
+                border: '1px solid var(--border)',
+                borderRadius: 'var(--radius-sm)',
+                color: 'var(--fg-muted)',
+                cursor: 'pointer',
+              }}
+              className="mobile-menu-toggle"
+            >
+              <Menu size={16} aria-hidden="true" />
+            </button>
+          }
           center={
             <Inline align="center" gap={2}>
-              <button
-                type="button"
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setPaletteOpen(true)}
+                aria-label="Open command palette"
+                data-testid="palette-trigger"
                 style={{
                   display: 'inline-flex',
                   alignItems: 'center',
@@ -307,7 +366,6 @@ export function App(): JSX.Element {
                   maxWidth: '100%',
                   justifyContent: 'space-between',
                 }}
-                aria-label="Open command palette"
               >
                 <span>Type a command, page, or setting…</span>
                 <Box
@@ -320,7 +378,25 @@ export function App(): JSX.Element {
                 >
                   ⌘K
                 </Box>
-              </button>
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                aria-label="Keyboard shortcuts"
+                data-testid="shortcuts-help"
+                title="Keyboard shortcuts"
+                onClick={() => {
+                  const shortcuts = [
+                    '⌘K — Command palette',
+                    '⌘/ — Toggle sidebar',
+                    '⌘, — Settings',
+                    '⌘. — Dismiss notification',
+                  ].join('\n');
+                  window.alert('Keyboard Shortcuts\n\n' + shortcuts);
+                }}
+              >
+                ?
+              </Button>
             </Inline>
           }
         />
@@ -330,9 +406,14 @@ export function App(): JSX.Element {
           sections={sections}
           defaultSections={false}
           activeId={activeId}
-          onItemSelect={handleNavigate}
+          onItemSelect={(id) => {
+            handleNavigate(id);
+            setMobileMenuOpen(false);
+          }}
         />
       }
+      mobileMenuOpen={mobileMenuOpen}
+      onMobileMenuClose={() => setMobileMenuOpen(false)}
     >
       <Suspense fallback={<PageSkeleton />}>{view}</Suspense>
       <AppCommandPalette
@@ -342,4 +423,4 @@ export function App(): JSX.Element {
       />
     </AppShell>
   );
-}
+}

package/bizar-dash/src/web/v8/__tests__/chat-view.test.tsx

@@ -92,17 +92,17 @@ describe('S38 ChatView', () => {
     expect(await screen.findByTestId('chat-bubble-assistant')).toBeTruthy();
   });
 
-  it('POSTs to /api/chat/sessions on `+ New session`', async () => {
-    const state = installFetchMock([
+  it('opens the New session modal on `+ New session` click', async () => {
+    installFetchMock([
       [/^\/api\/chat(\?|$)/, () => jsonResponse(200, { messages: [], sessions: [] })],
       [/^\/api\/chat\/sessions/, () => jsonResponse(200, { sessions: [] })],
     ]);
     render(<ChatView />);
     const create = await screen.findByTestId('chat-create-session');
     fireEvent.click(create);
+    // Modal should open with title "New Claude session"
     await waitFor(() => {
-      const hit = state.posts.find((p) => p.url.endsWith('/api/chat/sessions') && p.method === 'POST');
-      expect(hit).toBeTruthy();
+      expect(screen.getByText('New Claude session')).toBeTruthy();
     });
   });
 

package/bizar-dash/src/web/v8/shell/AppShell.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, type ReactNode } from 'react';
+import * as RxDialog from '@radix-ui/react-dialog';
 import { Box } from '../ui/primitives/Box.js';
 import { Topbar } from './Topbar.js';
 import { Sidebar } from './Sidebar.js';
@@ -27,11 +28,14 @@ import { Sidebar } from './Sidebar.js';
 export interface AppShellProps {
   topbar?: ReactNode;
   sidebar?: ReactNode;
+  /** Controls the mobile sidebar drawer (open/close). */
+  mobileMenuOpen?: boolean;
+  onMobileMenuClose?: () => void;
   children?: ReactNode;
 }
 
 export const AppShell = forwardRef<HTMLElement, AppShellProps>(function AppShell(
-  { topbar, sidebar, children },
+  { topbar, sidebar, mobileMenuOpen, onMobileMenuClose, children },
   ref,
 ) {
   return (
@@ -55,7 +59,39 @@ export const AppShell = forwardRef<HTMLElement, AppShellProps>(function AppShell
           minHeight: 0, // critical: lets the body actually scroll instead of expanding
         }}
       >
-        {sidebar ?? <Sidebar />}
+        {/* Desktop sidebar — always present at >=768px */}
+        <Box className="v8-desktop-sidebar" style={{ flexShrink: 0 }}>
+          {sidebar ?? <Sidebar />}
+        </Box>
+
+        {/* Mobile sidebar drawer — shown via Dialog overlay on <768px */}
+        <RxDialog.Root open={mobileMenuOpen} onOpenChange={(open) => { if (!open) onMobileMenuClose?.(); }}>
+          <RxDialog.Portal>
+            <RxDialog.Overlay
+              className="v8-mobile-sidebar-overlay"
+              style={{
+                position: 'fixed',
+                inset: 0,
+                background: 'oklch(0 0 0 / 0.4)',
+                zIndex: 'var(--z-modal)',
+              }}
+            />
+            <RxDialog.Content
+              className="v8-mobile-sidebar"
+              aria-label="Navigation"
+              style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: 'var(--sidebar-w)',
+                zIndex: 'calc(var(--z-modal) + 1)',
+              }}
+            >
+              {sidebar ?? <Sidebar />}
+            </RxDialog.Content>
+          </RxDialog.Portal>
+        </RxDialog.Root>
 
         <Box
           as="main"

package/bizar-dash/src/web/v8/shell/Sidebar.tsx

@@ -14,9 +14,11 @@ import {
   Folder,
   Goal,
   History,
-  Layers,
+  LayoutDashboard,
   Library,
   Network,
+  Package,
+  Webhook,
   ServerCog,
   Settings as SettingsIcon,
   Stethoscope,
@@ -117,7 +119,7 @@ const DEFAULT_SECTIONS: SidebarSection[] = [
     id: 'workspace',
     label: 'Workspace',
     items: [
-      { id: 'overview', label: 'Overview', icon: Layers },
+      { id: 'overview', label: 'Overview', icon: LayoutDashboard },
       { id: 'tasks', label: 'Tasks', icon: CheckSquare, count: 47, active: true },
       { id: 'goals', label: 'Goals', icon: Target, count: 3 },
       { id: 'chat', label: 'Chat', icon: MessageSquareText, live: true },
@@ -140,7 +142,7 @@ const DEFAULT_SECTIONS: SidebarSection[] = [
     items: [
       { id: 'skills', label: 'Skills', icon: Goal, count: 18 },
       { id: 'mcps', label: 'MCPs', icon: Library, count: 3 },
-      { id: 'hooks', label: 'Hooks', icon: Layers, count: 5 },
+      { id: 'hooks', label: 'Hooks', icon: Webhook, count: 5 },
     ],
   },
   {
@@ -156,7 +158,7 @@ const DEFAULT_SECTIONS: SidebarSection[] = [
       { id: 'providers', label: 'Providers', icon: Sparkles },
       { id: 'mods', label: 'Mods', icon: Boxes },
       { id: 'update', label: 'Update', icon: ArrowUpCircle },
-      { id: 'artifacts', label: 'Artifacts', icon: Layers },
+      { id: 'artifacts', label: 'Artifacts', icon: Package },
       { id: 'lightrag', label: 'LightRAG', icon: Database },
       { id: 'voice', label: 'Voice', icon: Mic },
       { id: 'clipboard', label: 'Clipboard', icon: ClipboardPaste },
@@ -283,8 +285,9 @@ export function Sidebar({
         ) : (
           <>
             <Box style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
-              <div>◉ online · v8.0.0</div>
+              <div data-testid="sidebar-version">◉ online · v{import.meta.env.VITE_APP_VERSION}</div>
               <div
+                data-testid="sidebar-build-sha"
                 style={{ fontFamily: 'var(--font-mono)' }}
                 title={`build ${import.meta.env.VITE_BUILD_SHA}`}
               >
@@ -359,44 +362,54 @@ function SidebarSectionView({
   return (
     <Stack gap={1} data-sidebar-section={section.id}>
       {!collapsed && (
-        <button
-          type="button"
-          onClick={toggle}
-          aria-expanded={sectionOpen}
-          aria-controls={`sidebar-section-${section.id}`}
-          data-testid={`sidebar-section-toggle-${section.id}`}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 'var(--space-2)',
-            padding: 'var(--space-1) var(--space-3)',
-            background: 'transparent',
-            border: 0,
-            fontSize: 'var(--fs-12)',
-            fontWeight: 600,
-            color: 'var(--fg-subtle)',
-            letterSpacing: 'var(--tracking-wide)',
-            textTransform: 'uppercase',
-            cursor: 'pointer',
-            width: '100%',
-            textAlign: 'left',
-          }}
-        >
-          <span>{section.label}</span>
+        <div role="presentation" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
           <span
-            aria-hidden="true"
-            data-testid={`sidebar-section-chevron-${section.id}`}
             style={{
-              display: 'inline-block',
-              transition: 'transform var(--motion-fast) var(--ease-out)',
-              transform: sectionOpen ? 'rotate(90deg)' : 'rotate(0deg)',
-              fontSize: 10,
+              fontSize: 'var(--fs-12)',
+              fontWeight: 600,
+              color: 'var(--fg-subtle)',
+              letterSpacing: 'var(--tracking-wide)',
+              textTransform: 'uppercase',
+              flex: 1,
+              padding: 'var(--space-1) var(--space-3)',
             }}
           >
-            ▸
+            {section.label}
           </span>
-        </button>
+          <button
+            type="button"
+            onClick={toggle}
+            aria-expanded={sectionOpen}
+            aria-controls={`sidebar-section-${section.id}`}
+            data-section-toggle={section.id}
+            data-testid={`sidebar-section-toggle-${section.id}`}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 20,
+              height: 20,
+              background: 'transparent',
+              border: 0,
+              color: 'var(--fg-subtle)',
+              cursor: 'pointer',
+              padding: 0,
+            }}
+          >
+            <span
+              aria-hidden="true"
+              data-testid={`sidebar-section-chevron-${section.id}`}
+              style={{
+                display: 'inline-block',
+                transition: 'transform var(--motion-fast) var(--ease-out)',
+                transform: sectionOpen ? 'rotate(90deg)' : 'rotate(0deg)',
+                fontSize: 10,
+              }}
+            >
+              ▸
+            </span>
+          </button>
+        </div>
       )}
       {sectionOpen && (
         <div id={`sidebar-section-${section.id}`} role="group" aria-label={section.label}>
@@ -435,6 +448,7 @@ function SidebarItemView({
       aria-label={item.label}
       title={collapsed ? item.label : undefined}
       data-sidebar-item={item.id}
+      data-nav-item={item.id}
       className={cx('v8-sidebar-item', active && 'is-active')}
       style={{
         display: 'flex',

package/bizar-dash/src/web/v8/shell/Topbar.tsx

@@ -1,5 +1,5 @@
 import { useState, type ReactNode } from 'react';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Search } from 'lucide-react';
 import { Box } from '../ui/primitives/Box.js';
 import { Inline } from '../ui/primitives/Inline.js';
 import { Cluster } from '../ui/primitives/Cluster.js';
@@ -28,6 +28,8 @@ import { fetchJson, FetchError } from '../data/fetcher.js';
 
 export interface TopbarProps {
   brand?: ReactNode;
+  /** Leading slot — renders before brand (hamburger on mobile). */
+  leading?: ReactNode;
   center?: ReactNode;
   /** Right-aligned action cluster. */
   actions?: ReactNode;
@@ -35,7 +37,7 @@ export interface TopbarProps {
   status?: ReactNode;
 }
 
-export function Topbar({ brand, center, actions, status }: TopbarProps): JSX.Element {
+export function Topbar({ leading, brand, center, actions, status }: TopbarProps): JSX.Element {
   return (
     <Box
       as="header"
@@ -51,8 +53,9 @@ export function Topbar({ brand, center, actions, status }: TopbarProps): JSX.Ele
       }}
     >
       <Inline align="center" justify="between" gap={4} style={{ height: '100%' }}>
-        {/* left: brand */}
+        {/* left: leading (hamburger) + brand */}
         <Cluster align="center" gap={3}>
+          {leading}
           {brand ?? <BrandPlaceholder />}
         </Cluster>
 
@@ -222,10 +225,66 @@ function DefaultActions({ status }: { status?: ReactNode }): JSX.Element {
         </Inline>
       )}
       <Separator orientation="vertical" style={{ height: 16 }} />
+      <CommandPaletteTrigger />
+      <Separator orientation="vertical" style={{ height: 16 }} />
       <NotificationsPopover />
       <Separator orientation="vertical" style={{ height: 16 }} />
       <DensityToggle />
       <ThemeToggle />
     </>
   );
+}
+
+/**
+ * CommandPaletteTrigger — a single inline button that opens the command
+ * palette. Renders a kbd hint next to the magnifier icon so users discover
+ * the ⌘K shortcut. The full palette is wired through `useCommandPaletteHotkey`
+ * in App.tsx; this trigger just dispatches the same shortcut keydown.
+ */
+function CommandPaletteTrigger(): JSX.Element {
+  const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+  const kbd = isMac ? '⌘K' : 'Ctrl K';
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        // Dispatch the same key the global hotkey listens for so we don't
+        // duplicate the open/close logic.
+        window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: isMac, ctrlKey: !isMac, bubbles: true }));
+      }}
+      aria-label="Open command palette"
+      title={`Open command palette (${kbd})`}
+      data-testid="topbar-palette-trigger"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        height: 28,
+        padding: '0 8px 0 6px',
+        borderRadius: 'var(--radius-sm)',
+        border: '1px solid var(--border)',
+        background: 'var(--surface-1)',
+        color: 'var(--fg-muted)',
+        fontSize: 'var(--fs-12)',
+        cursor: 'pointer',
+      }}
+    >
+      <Search size={14} aria-hidden="true" />
+      <span>Search…</span>
+      <kbd
+        aria-hidden="true"
+        style={{
+          padding: '1px 4px',
+          borderRadius: 'var(--radius-sm)',
+          border: '1px solid var(--border)',
+          background: 'var(--surface-2)',
+          fontSize: 'var(--fs-11)',
+          fontFamily: 'var(--font-mono)',
+          color: 'var(--fg)',
+        }}
+      >
+        {kbd}
+      </kbd>
+    </button>
+  );
 }

package/bizar-dash/src/web/v8/ui/styles/globals.css

@@ -103,6 +103,32 @@ h4 {
   font-weight: var(--fw-medium);
 }
 
+/* ── mobile sidebar (C2 — < 768px) ─────────────────────────────────── */
+@media (max-width: 767px) {
+  /* Desktop sidebar hidden on mobile */
+  .v8-desktop-sidebar {
+    display: none;
+  }
+
+  /* Show hamburger button on mobile */
+  .mobile-menu-toggle {
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 768px) {
+  /* Mobile sidebar hidden on desktop */
+  .v8-mobile-sidebar,
+  .v8-mobile-sidebar-overlay {
+    display: none !important;
+  }
+
+  /* Hide hamburger on desktop */
+  .mobile-menu-toggle {
+    display: none !important;
+  }
+}
+
 /* ── a11y helpers (see VisuallyHidden primitive) ────────────────────── */
 .sr-only {
   position: absolute;
@@ -223,3 +249,17 @@ h4 {
 .v8-dropdown-menu__radio[data-state='checked'] .v8-dropdown-menu__radio-indicator {
   display: inline-flex;
 }
+
+/* Universal focus-visible ring for keyboard navigation across custom
+   buttons, sidebar items, and design-system Button variants. v10.4.3
+   L4 audit fix. */
+.v8-btn:focus-visible,
+.v8-button:focus-visible,
+button[data-section-toggle]:focus-visible,
+button[data-nav-item]:focus-visible,
+.v8-theme-toggle:focus-visible,
+.v8-density-toggle:focus-visible,
+.v8-icon-button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}

package/bizar-dash/src/web/v8/ui/theme/ThemeToggle.tsx

@@ -1,4 +1,4 @@
-import { Monitor, Moon, Sun } from 'lucide-react';
+import { AlignJustify, Monitor, Moon, Rows3, Sun } from 'lucide-react';
 import { useTheme } from './useTheme.js';
 import { useDensity } from './useDensity.js';
 import { cx } from '../utils/cx.js';
@@ -36,7 +36,10 @@ export interface ThemeToggleProps {
 
 export function ThemeToggle({ className }: ThemeToggleProps): JSX.Element {
   const { mode, resolved, cycle } = useTheme();
-  const Icon = RESOLVED_ICON[mode];
+  // Show the icon for the *resolved* (actually applied) theme so the visual
+  // matches what the user is seeing — Sun when light is active, Moon when
+  // dark is active, Monitor when system is in effect.
+  const Icon = RESOLVED_ICON[resolved];
   return (
     <button
       type="button"
@@ -66,23 +69,25 @@ export interface DensityToggleProps {
 }
 export function DensityToggle({ className }: DensityToggleProps): JSX.Element {
   const { density, toggle } = useDensity();
+  const isCozy = density === 'comfortable';
+  const Icon = isCozy ? Rows3 : AlignJustify;
   return (
     <button
       type="button"
       onClick={toggle}
-      aria-label={`Switch to ${density === 'comfortable' ? 'compact' : 'comfortable'} density`}
+      aria-label={`Switch to ${isCozy ? 'compact' : 'comfortable'} density`}
       title={`Density: ${density}`}
+      data-density={density}
       className={cx(
         'v8-density-toggle',
-        'inline-flex h-8 px-2 items-center justify-center',
+        'inline-flex h-8 w-8 items-center justify-center',
         'rounded-[var(--radius-sm)]',
-        'text-[var(--fs-12)] font-medium tracking-[var(--tracking-wide)] uppercase',
         'text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--surface-1)]',
         'transition-colors duration-[var(--motion-fast)]',
         className,
       )}
     >
-      {density === 'comfortable' ? 'Cozy' : 'Compact'}
+      <Icon size={16} aria-hidden="true" />
     </button>
   );
 }

package/bizar-dash/src/web/v8/views/Admin/AdminView.tsx

@@ -37,6 +37,7 @@ interface AdminAction {
   endpoint: string;
   method: 'POST' | 'GET';
   destructive: boolean;
+  group: 'data' | 'service' | 'logs';
 }
 
 const ACTIONS: AdminAction[] = [
@@ -48,6 +49,7 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/gc',
     method: 'POST',
     destructive: false,
+    group: 'data',
   },
   {
     id: 'cache-clear',
@@ -57,6 +59,7 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/cache/clear',
     method: 'POST',
     destructive: true,
+    group: 'data',
   },
   {
     id: 'memory-reindex',
@@ -66,6 +69,7 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/memory/reindex',
     method: 'POST',
     destructive: false,
+    group: 'data',
   },
   {
     id: 'logs-purge',
@@ -75,6 +79,7 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/logs/purge',
     method: 'POST',
     destructive: true,
+    group: 'logs',
   },
   {
     id: 'restart',
@@ -84,6 +89,7 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/restart',
     method: 'POST',
     destructive: true,
+    group: 'service',
   },
   {
     id: 'rebuild',
@@ -93,6 +99,7 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/rebuild',
     method: 'POST',
     destructive: true,
+    group: 'service',
   },
   {
     id: 'export-activity',
@@ -102,9 +109,16 @@ const ACTIONS: AdminAction[] = [
     endpoint: '/api/admin/activity/export',
     method: 'GET',
     destructive: false,
+    group: 'logs',
   },
 ];
 
+const GROUPS: Array<{ id: 'data' | 'service' | 'logs'; title: string }> = [
+  { id: 'data', title: 'Data & cache' },
+  { id: 'service', title: 'Service' },
+  { id: 'logs', title: 'Logs' },
+];
+
 export function AdminView(): JSX.Element {
   return (
     <Stack gap={4} data-testid="admin-view">
@@ -112,11 +126,24 @@ export function AdminView(): JSX.Element {
         title="Admin"
         description="Maintenance actions. Destructive actions require an inline confirm."
       />
-      <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={3}>
-        {ACTIONS.map((a) => (
-          <AdminTile key={a.id} action={a} />
-        ))}
-      </Grid>
+      <Stack gap={4} data-testid="admin-groups">
+        {GROUPS.map((group) => {
+          const items = ACTIONS.filter((a) => a.group === group.id);
+          if (items.length === 0) return null;
+          return (
+            <Stack key={group.id} gap={2} data-testid={`admin-group-${group.id}`}>
+              <h3 style={{ margin: 0, fontSize: 'var(--fs-12)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)', color: 'var(--fg-muted)' }}>
+                {group.title}
+              </h3>
+              <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={3}>
+                {items.map((a) => (
+                  <AdminTile key={a.id} action={a} />
+                ))}
+              </Grid>
+            </Stack>
+          );
+        })}
+      </Stack>
     </Stack>
   );
 }