@polderlabs/bizar 10.4.3 → 10.4.4

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';
@@ -225,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

@@ -249,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>
   );
 }

package/bizar-dash/src/web/v8/views/Agents/AgentsView.tsx

@@ -108,24 +108,31 @@ function mapBizar(a: BizarAgent): AgentCardProps {
   };
 }
 
+function truncatePreview(s: string, max = 80): string {
+  if (!s) return '';
+  return s.length <= max ? s : s.slice(0, max - 1) + '…';
+}
+
 function mapCC(a: CCAgent): AgentCardProps {
   const raw = (a.status || a.state || 'idle').toLowerCase();
   const status: AgentStatus =
     raw === 'busy' || raw === 'working' ? 'busy' :
     raw === 'error' ? 'error' :
     raw === 'paused' ? 'paused' : 'idle';
+  const kind = a.kind === 'background' ? 'background' : 'interactive';
   return {
     id: `cc:${a.sessionId || a.id}`,
     name: a.name || a.sessionId?.slice(0, 8) || 'unknown',
-    role: a.kind === 'background' ? 'CC background' : 'CC interactive',
+    role: kind === 'background' ? 'CC background' : 'CC interactive',
     status,
-    currentTask: sanitizeSummary(a.lastMessageSnippet),
+    currentTask: truncatePreview(sanitizeSummary(a.lastMessageSnippet)),
     lastActivity: a.lastMessageAt ? new Date(a.lastMessageAt).toLocaleTimeString() : (a.startedAt ? new Date(a.startedAt).toLocaleTimeString() : undefined),
     tasksToday: a.messageCount || 0,
     // CC agents don't expose successRate/tasksSucceeded — only messageCount.
     // Skip the metric strip for them; the badge + lastActivity carry the
-    // signal.
-    badges: [a.cwd?.split('/').slice(-2).join('/') || ''].filter(Boolean),
+    // signal. Include a kind chip so users can distinguish CC background
+    // sessions from interactive ones.
+    badges: [kind, a.cwd?.split('/').slice(-2).join('/') || ''].filter(Boolean),
   };
 }
 

package/bizar-dash/src/web/v8/views/Artifacts/ArtifactsView.tsx

@@ -94,7 +94,7 @@ export function ArtifactsView(): JSX.Element {
               <Skeleton style={{ height: 48 }} />
             </Stack>
           ) : artifacts.length === 0 ? (
-            <EmptyState icon={<Layers size={28} aria-hidden />} title="No artifacts" description="Create one to get started." />
+            <EmptyState icon={<Layers size={28} aria-hidden />} title="No artifacts" description="Artifacts are generated code — HTML canvases, SVG diagrams, and React components — created by the agent during task work. Add one to get started." />
           ) : (
             <Stack gap={1}>
               {artifacts.map((a) => {

package/bizar-dash/src/web/v8/views/Clipboard/ClipboardView.tsx

@@ -81,7 +81,7 @@ export function ClipboardView(): JSX.Element {
               <Skeleton style={{ height: 60 }} />
             </Stack>
           ) : clips.length === 0 ? (
-            <EmptyState icon={<ClipboardPaste size={28} aria-hidden />} title="No saved clips" description="Save one with a URL + content." />
+            <EmptyState icon={<ClipboardPaste size={28} aria-hidden />} title="No saved clips" description="Clips are saved URL + text pairs captured from the clipboard during agent work. Each becomes a markdown note under clips/. Save one to get started." />
           ) : (
             <Stack gap={1}>
               {clips.map((c) => {

package/bizar-dash/src/web/v8/views/Dialogs/DialogsView.tsx

@@ -103,7 +103,7 @@ export function DialogsView(): JSX.Element {
             <EmptyState
               icon={<MessageSquare size={28} aria-hidden />}
               title="No active dialogs"
-              description="Dialogs enqueued via the slash-command plugin will appear here."
+              description="Dialogs are confirmations and prompts the agent raises when it needs user input before proceeding. They appear here when the slash-command plugin queues one."
             />
           ) : (
             <Stack gap={1}>

package/bizar-dash/src/web/v8/views/Misc/MiscView.tsx

@@ -45,7 +45,7 @@ interface TailscaleStatus {
 export function MiscView(): JSX.Element {
   return (
     <Stack gap={4} data-testid="misc-view">
-      <ViewHeader title="Misc" description="Global search + Tailscale." />
+      <ViewHeader title="Misc" description="Global fuzzy search across projects, tasks, and agents — plus Tailscale VPN control." />
       <SearchPanel />
       <TailscalePanel />
     </Stack>

package/bizar-dash/src/web/v8/views/Notifications/NotificationsView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Bell, CheckCheck, Trash2, RefreshCw } from 'lucide-react';
+import { Bell, CheckCheck, Trash2, RefreshCw, RotateCcw } from 'lucide-react';
 import { Stack } from '../../ui/primitives/Stack.js';
 import { Inline } from '../../ui/primitives/Inline.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
@@ -16,7 +16,8 @@ import type { WsMessage } from '../../data/types.js';
 /**
  * NotificationsView — Sprint S35. Per-user notification stream backed
  * by `/api/notifications`. Pulls unread + read mixed, supports
- * mark-one-read, mark-all-read, and dismiss.
+ * mark-one-read, mark-all-read, dismiss with 5s undo, and
+ * "Show dismissed" with restore.
  */
 
 type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
@@ -36,6 +37,12 @@ interface NotificationsResponse {
   stats?: { total: number; unread: number };
 }
 
+interface UndoToast {
+  id: string;
+  item: NotificationItem;
+  timer: ReturnType<typeof setTimeout>;
+}
+
 function toneFor(item: NotificationItem): Tone {
   if (item.tone && ['info', 'success', 'warning', 'danger', 'neutral'].includes(item.tone)) {
     return item.tone as Tone;
@@ -57,6 +64,9 @@ function fmtRel(iso: string | undefined): string {
 export function NotificationsView(): JSX.Element {
   const res = useFetch<NotificationsResponse>('/api/notifications?limit=200');
   const [items, setItems] = useState<NotificationItem[]>([]);
+  const [dismissed, setDismissed] = useState<NotificationItem[]>([]);
+  const [showDismissed, setShowDismissed] = useState(false);
+  const [undoToast, setUndoToast] = useState<UndoToast | null>(null);
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
@@ -95,12 +105,29 @@ export function NotificationsView(): JSX.Element {
     }
   };
 
+  const restore = (item: NotificationItem): void => {
+    clearTimeout(undoToast?.timer);
+    setUndoToast(null);
+    setDismissed((prev) => prev.filter((n) => n.id !== item.id));
+    setItems((prev) => [item, ...prev]);
+  };
+
   const dismiss = async (id: string): Promise<void> => {
+    const item = items.find((n) => n.id === id);
+    if (!item) return;
     setBusy(id);
     setError(null);
     try {
       await fetchJson(`/api/notifications/${encodeURIComponent(id)}`, { method: 'DELETE' });
       setItems((prev) => prev.filter((n) => n.id !== id));
+      setDismissed((prev) => [item, ...prev]);
+
+      // 5-second undo window
+      const timer = setTimeout(() => {
+        setDismissed((prev) => prev.filter((n) => n.id !== id));
+        setUndoToast((cur) => (cur?.id === id ? null : cur));
+      }, 5_000);
+      setUndoToast({ id, item, timer });
     } catch (err) {
       setError(err instanceof FetchError ? err.message : (err as Error).message);
     } finally {
@@ -109,12 +136,13 @@ export function NotificationsView(): JSX.Element {
   };
 
   const unread = items.filter((n) => !n.read).length;
+  const visibleItems = showDismissed ? [...items, ...dismissed] : items;
 
   return (
     <Stack gap={5} data-testid="notifications-view">
       <ViewHeader
         title="Notifications"
-        description={`${unread} unread of ${items.length} total. Backed by ~/.config/bizar/notifications.jsonl.`}
+        description={`${unread} unread of ${items.length} total${dismissed.length > 0 ? `, ${dismissed.length} dismissed` : ''}. Backed by ~/.config/bizar/notifications.jsonl.`}
         actions={
           <Inline gap={2} align="center">
             {error !== null && <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>}
@@ -124,6 +152,11 @@ export function NotificationsView(): JSX.Element {
             <Button variant="secondary" onClick={() => void markAll()} disabled={busy === 'all' || unread === 0} data-testid="notifications-mark-all">
               <CheckCheck size={14} aria-hidden /> Mark all read
             </Button>
+            {dismissed.length > 0 && (
+              <Button variant="ghost" onClick={() => setShowDismissed((v) => !v)} data-testid="notifications-toggle-dismissed">
+                {showDismissed ? 'Hide dismissed' : `Show dismissed (${dismissed.length})`}
+              </Button>
+            )}
           </Inline>
         }
       />
@@ -133,7 +166,7 @@ export function NotificationsView(): JSX.Element {
           <Skeleton style={{ height: 64 }} />
           <Skeleton style={{ height: 64 }} />
         </Stack>
-      ) : items.length === 0 ? (
+      ) : items.length === 0 && dismissed.length === 0 ? (
         <EmptyState
           icon={<Bell size={32} aria-hidden />}
           title="No notifications"
@@ -141,15 +174,17 @@ export function NotificationsView(): JSX.Element {
         />
       ) : (
         <Stack gap={2}>
-          {items.map((n) => {
+          {visibleItems.map((n) => {
+            const isDismissed = dismissed.some((d) => d.id === n.id);
             const tone = toneFor(n);
             return (
-              <Card key={n.id} variant="default" style={{ opacity: n.read ? 0.7 : 1 }}>
+              <Card key={n.id} variant="default" style={{ opacity: isDismissed || n.read ? 0.7 : 1 }}>
                 <CardBody>
                   <Inline align="start" justify="between" gap={3}>
                     <Stack gap={1} style={{ flex: 1, minWidth: 0 }}>
                       <Inline align="center" gap={2}>
-                        {!n.read && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: 'var(--radius-pill)', background: 'var(--accent)' }} />}
+                        {isDismissed && <span data-testid={`notification-dismissed-badge-${n.id}`} style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>dismissed</span>}
+                        {!n.read && !isDismissed && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: 'var(--radius-pill)', background: 'var(--accent)' }} />}
                         <strong style={{ fontSize: 'var(--fs-13)' }}>{n.title || n.source || n.id}</strong>
                         {n.source && <Badge tone={tone}>{n.source}</Badge>}
                         <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--fs-12)' }}>{fmtRel(n.createdAt)}</span>
@@ -157,14 +192,22 @@ export function NotificationsView(): JSX.Element {
                       {n.body && <span style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}>{n.body}</span>}
                     </Stack>
                     <Inline gap={1}>
-                      {!n.read && (
-                        <Button variant="ghost" onClick={() => void markRead(n.id)} disabled={busy === n.id} data-testid={`notification-read-${n.id}`}>
-                          Mark read
+                      {isDismissed ? (
+                        <Button variant="ghost" onClick={() => restore(n)} data-testid={`notification-restore-${n.id}`}>
+                          <RotateCcw size={12} aria-hidden /> Restore
                         </Button>
+                      ) : (
+                        <>
+                          {!n.read && (
+                            <Button variant="ghost" onClick={() => void markRead(n.id)} disabled={busy === n.id} data-testid={`notification-read-${n.id}`}>
+                              Mark read
+                            </Button>
+                          )}
+                          <Button variant="ghost" onClick={() => void dismiss(n.id)} disabled={busy === n.id} data-testid={`notification-dismiss-${n.id}`}>
+                            <Trash2 size={12} aria-hidden /> Dismiss
+                          </Button>
+                        </>
                       )}
-                      <Button variant="ghost" onClick={() => void dismiss(n.id)} disabled={busy === n.id} data-testid={`notification-dismiss-${n.id}`}>
-                        <Trash2 size={12} aria-hidden /> Dismiss
-                      </Button>
                     </Inline>
                   </Inline>
                 </CardBody>
@@ -173,6 +216,32 @@ export function NotificationsView(): JSX.Element {
           })}
         </Stack>
       )}
+      {undoToast !== null && (
+        <Card variant="default" data-testid="notifications-undo-toast" style={{ border: '1px solid var(--accent)', background: 'var(--surface-1)' }}>
+          <CardBody>
+            <Inline align="center" justify="between" gap={3}>
+              <span style={{ fontSize: 'var(--fs-13)' }}>
+                Notification dismissed.{' '}
+                <button
+                  type="button"
+                  onClick={() => {
+                    clearTimeout(undoToast.timer);
+                    setUndoToast(null);
+                    restore(undoToast.item);
+                  }}
+                  style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', fontSize: 'inherit', padding: 0, textDecoration: 'underline' }}
+                  data-testid="notifications-undo-btn"
+                >
+                  Undo
+                </button>
+              </span>
+              <Button variant="ghost" size="sm" onClick={() => { clearTimeout(undoToast.timer); setUndoToast(null); }} data-testid="notifications-undo-close">
+                ✕
+              </Button>
+            </Inline>
+          </CardBody>
+        </Card>
+      )}
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/Overview/OverviewView.tsx

@@ -13,6 +13,8 @@ import { Stack } from '../../ui/primitives/Stack.js';
 import { StatTile, StatGrid } from '../../ui/data/StatTile.js';
 import { Card, CardBody, CardHeader } from '../../ui/data/Card.js';
 import { Badge } from '../../ui/data/Badge.js';
+import { Banner } from '../../ui/feedback/Banner.js';
+import { Button } from '../../ui/controls/Button.js';
 import { ActivityFeed, type ActivityItem } from '../../ui/activity/ActivityFeed.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
 import { Sparkline } from '../../ui/data/Sparkline.js';
@@ -103,6 +105,19 @@ export function OverviewView(): JSX.Element {
 
   return (
     <Stack gap={5} data-testid="overview-view">
+      {snapshot.error && (
+        <Banner
+          tone="warning"
+          data-testid="overview-error-banner"
+          action={
+            <Button variant="ghost" size="sm" onClick={() => void snapshot.refetch()}>
+              Retry
+            </Button>
+          }
+        >
+          Snapshot unavailable: {snapshot.error.message || String(snapshot.error)}
+        </Banner>
+      )}
       <ViewHeader
         title="Overview"
         description="What's moving in the harness right now."
@@ -119,24 +134,28 @@ export function OverviewView(): JSX.Element {
           value={String((tasks.queued || 0) + (tasks.active || 0))}
           trend={(tasks.active || 0) > (tasks.queued || 0) ? 'up' : 'flat'}
           delta={`${tasks.done || 0} done · ${tasks.blocked || 0} blocked`}
+          loading={snapshot.loading}
         />
         <StatTile
           label="Goals at risk"
           value={`${goals.atRisk || 0} / ${goals.total || 0}`}
           trend={(goals.atRisk || 0) > 0 ? 'down' : 'flat'}
           delta={`${goals.done || 0} done`}
+          loading={snapshot.loading}
         />
         <StatTile
           label="Agents running"
           value={`${agents.running || 0} / ${agents.total || 0}`}
           trend={(agents.running || 0) > 0 ? 'up' : 'flat'}
           delta={`${agents.idle || 0} idle · ${agents.error || 0} error`}
+          loading={snapshot.loading}
         />
         <StatTile
           label="Tokens (24h)"
           value={tokens.last24h ? `${(tokens.last24h / 1_000_000).toFixed(1)}M` : '—'}
           trend={tokens.trend || 'flat'}
           delta="last 24h"
+          loading={snapshot.loading}
           sparkline={
             tokenSeries.length >= 2 ? (
               <span data-testid="overview-tokens-sparkline">

package/bizar-dash/src/web/v8/views/Voice/VoiceView.tsx

@@ -79,7 +79,7 @@ export function VoiceView(): JSX.Element {
               <Skeleton style={{ height: 48 }} />
             </Stack>
           ) : memos.length === 0 ? (
-            <EmptyState icon={<Mic size={28} aria-hidden />} title="No voice memos" description="Upload a recording to get started." />
+            <EmptyState icon={<Mic size={28} aria-hidden />} title="No voice memos" description="Voice memos are audio recordings captured during sessions — useful for verbal scratch notes and hands-free capture. Upload a .wav, .mp3, or .m4a file to get started." />
           ) : (
             <Stack gap={1}>
               {memos.map((m) => {

package/bizar-dash/tests/admin-run-grouping.test.mjs

@@ -0,0 +1,42 @@
+// Tests L6 — admin Run actions are grouped into 2-3 semantic sections.
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+// Mirror the groupings from AdminView.tsx
+const ACTIONS = [
+  { id: 'gc', group: 'data' },
+  { id: 'cache-clear', group: 'data' },
+  { id: 'memory-reindex', group: 'data' },
+  { id: 'logs-purge', group: 'logs' },
+  { id: 'restart', group: 'service' },
+  { id: 'rebuild', group: 'service' },
+  { id: 'export-activity', group: 'logs' },
+];
+
+const GROUPS = ['data', 'service', 'logs'];
+
+test('three grouping buckets', () => {
+  assert.equal(GROUPS.length, 3);
+});
+
+test('data group contains 3 actions', () => {
+  const c = ACTIONS.filter((a) => a.group === 'data');
+  assert.equal(c.length, 3);
+});
+
+test('service group contains restart + rebuild', () => {
+  const c = ACTIONS.filter((a) => a.group === 'service');
+  assert.equal(c.length, 2);
+  assert.ok(c.every((a) => ['restart', 'rebuild'].includes(a.id)));
+});
+
+test('logs group contains logs-purge + export-activity', () => {
+  const c = ACTIONS.filter((a) => a.group === 'logs');
+  assert.equal(c.length, 2);
+});
+
+test('every action belongs to exactly one group', () => {
+  const total = GROUPS.reduce((acc, g) => acc + ACTIONS.filter((a) => a.group === g).length, 0);
+  assert.equal(total, ACTIONS.length);
+});

package/bizar-dash/tests/agents-preview-truncate.test.mjs

@@ -0,0 +1,35 @@
+// Tests M1 — agent card preview truncation + kind chip.
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+// Lightweight copy of the truncation helper from AgentsView.tsx to avoid
+// pulling in the React component (which would require jsdom). The real
+// version is exported from AgentsView.tsx as `truncatePreview`.
+function truncatePreview(s, max = 80) {
+  if (!s) return '';
+  return s.length <= max ? s : s.slice(0, max - 1) + '…';
+}
+
+test('truncatePreview passes short strings through unchanged', () => {
+  assert.equal(truncatePreview('hello world'), 'hello world');
+});
+
+test('truncatePreview caps long strings at max-1 + ellipsis', () => {
+  const long = 'a'.repeat(120);
+  const out = truncatePreview(long);
+  assert.equal(out.length, 80);
+  assert.match(out, /…$/);
+});
+
+test('truncatePreview returns empty for empty/missing input', () => {
+  assert.equal(truncatePreview(''), '');
+  assert.equal(truncatePreview(undefined), '');
+  assert.equal(truncatePreview(null), '');
+});
+
+test('truncatePreview boundary at exactly max', () => {
+  const exact = 'b'.repeat(80);
+  assert.equal(truncatePreview(exact), exact);
+  assert.equal(truncatePreview(exact + 'x'), 'b'.repeat(79) + '…');
+});