npm - @polderlabs/bizar - Versions diffs - 7.0.0 → 7.0.2 - Mend

@polderlabs/bizar 7.0.0 → 7.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/bizar-dash/dist/index.html CHANGED Viewed

@@ -29,19 +29,13 @@
         }
       })();
     </script>
-    <script type="module" crossorigin src="/assets/main-CO8fIxQK.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/vendor-Di7Cp-rw.js">
-    <link rel="modulepreload" crossorigin href="/assets/flow-BpU0-gK2.js">
-    <link rel="modulepreload" crossorigin href="/assets/react-vendor-D3pra6w-.js">
-    <link rel="modulepreload" crossorigin href="/assets/icons-B0AKnYI3.js">
-    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-DSmtNPja.js">
-    <link rel="modulepreload" crossorigin href="/assets/Toast-WTxc3m2g.js">
-    <link rel="modulepreload" crossorigin href="/assets/EnvVarsSection-CW6fWKds.js">
-    <link rel="modulepreload" crossorigin href="/assets/markdown-w2bDDkAH.js">
-    <link rel="modulepreload" crossorigin href="/assets/useSlashCommands-3DFLOfpk.js">
-    <link rel="stylesheet" crossorigin href="/assets/mobile-layout-CJnZNLy3.css">
-    <link rel="stylesheet" crossorigin href="/assets/react-vendor-BnuhLJ6X.css">
-    <link rel="stylesheet" crossorigin href="/assets/main-C-Md3DaY.css">
+    <script type="module" crossorigin src="/assets/main-306CZfn6.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-GZ3bE8L6.js">
+    <link rel="modulepreload" crossorigin href="/assets/Toast-ATSAmbdi.js">
+    <link rel="modulepreload" crossorigin href="/assets/EnvVarsSection-BfhAz3ax.js">
+    <link rel="modulepreload" crossorigin href="/assets/useSlashCommands-BOwD7lNb.js">
+    <link rel="stylesheet" crossorigin href="/assets/mobile-layout-BWLtwtfQ.css">
+    <link rel="stylesheet" crossorigin href="/assets/main-G3bNDpY3.css">
   </head>
   <body>
     <div id="root"></div>

package/bizar-dash/dist/mobile.html CHANGED Viewed

@@ -12,14 +12,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <script type="module" crossorigin src="/assets/mobile-DXYCA0hC.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/vendor-Di7Cp-rw.js">
-    <link rel="modulepreload" crossorigin href="/assets/flow-BpU0-gK2.js">
-    <link rel="modulepreload" crossorigin href="/assets/react-vendor-D3pra6w-.js">
-    <link rel="modulepreload" crossorigin href="/assets/icons-B0AKnYI3.js">
-    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-DSmtNPja.js">
-    <link rel="stylesheet" crossorigin href="/assets/react-vendor-BnuhLJ6X.css">
-    <link rel="stylesheet" crossorigin href="/assets/mobile-layout-CJnZNLy3.css">
+    <script type="module" crossorigin src="/assets/mobile-C_naUN91.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/mobile-layout-GZ3bE8L6.js">
+    <link rel="stylesheet" crossorigin href="/assets/mobile-layout-BWLtwtfQ.css">
   </head>
   <body>
     <div id="root"></div>

package/bizar-dash/src/server/memory-consolidator.mjs CHANGED Viewed

@@ -22,7 +22,14 @@ import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { listNotes, writeNote } from "./memory-store.mjs";
-import { resolveVaultRoot } from "../../../packages/sdk/src/memory/index.js";
+// F-041 follow-up: import the BUILT SDK memory module from `dist/`,
+// not the TS source at `src/`. The src/ directory only ships the
+// .ts files; the dashboard runs against the compiled .js output in
+// dist/. v7.0.0 shipped with the src/ path, which makes the dashboard
+// crash with `Cannot find module .../src/memory/index.js` on startup.
+// Pointing at `dist/` matches what the SDK's package.json `exports`
+// map already advertises.
+import { resolveVaultRoot } from "../../../packages/sdk/dist/memory/index.js";
 import { runDistillation } from "./memory-distillation.mjs";
 /**

package/bizar-dash/src/web/mobile/MobileApp.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 // src/mobile/MobileApp.tsx — mobile root with state-based routing + stack navigation.
-import { useCallback, useEffect, useState } from 'react';
+import { Component, useCallback, useEffect, useState, type ReactNode } from 'react';
 import { Activity, MessageSquare, CheckSquare, Settings, Grid } from 'lucide-react';
 import { api } from '../lib/api';
 import type { Snapshot, Settings as SettingsType } from '../lib/types';
@@ -20,6 +20,37 @@ import { MobileSchedules } from './views/MobileSchedules';
 import { MobileHistory } from './views/MobileHistory';
 import { MobileConfig } from './views/MobileConfig';
+/** Tiny ErrorBoundary for mobile views — keeps a render error from
+ *  blanking the whole shell so the user sees a "Reload" prompt with
+ *  the chrome (topbar + back button) still intact. */
+class MobileViewBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { error: null };
+  }
+  componentDidCatch(error: Error) {
+    this.setState({ error });
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="mobile-view-error">
+          <h2>Something went wrong</h2>
+          <p>{this.state.error.message}</p>
+          <button
+            type="button"
+            className="mobile-btn mobile-btn-secondary"
+            onClick={() => window.location.reload()}
+          >
+            Reload
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
 export type MobileView =
   | { id: 'activity' }
   | { id: 'chat' }
@@ -212,7 +243,7 @@ export function MobileApp() {
       />
       <main className="mobile-content">
-        {renderView()}
+        <MobileViewBoundary>{renderView()}</MobileViewBoundary>
       </main>
       {/* Bottom nav only on main tabs */}

package/bizar-dash/src/web/mobile/MobileBottomNav.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 // src/mobile/MobileBottomNav.tsx — bottom tab bar for mobile.
 import type { LucideIcon } from 'lucide-react';
-import { cn } from '../lib/utils';
+import { cx } from '../ui/utils/cx';
 export type MobileTab = {
   id: string;
@@ -23,7 +23,7 @@ export function MobileBottomNav({ tabs, activeTab, onChange }: Props) {
           <button
             key={t.id}
             type="button"
-            className={cn('mobile-nav-btn', activeTab === t.id && 'mobile-nav-btn-active')}
+            className={cx('mobile-nav-btn', { 'mobile-nav-btn-active': activeTab === t.id })}
             onClick={() => onChange(t.id)}
             aria-label={t.label}
             aria-current={activeTab === t.id ? 'page' : undefined}

package/bizar-dash/src/web/mobile/MobileEval.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // src/web/mobile/MobileEval.tsx — v5.4 mobile eval view with runs and schedules tabs.
 import { useEffect, useState } from 'react';
 import { ClipboardCheck, Clock } from 'lucide-react';
-import { cn } from '../lib/utils';
+import { cx } from '../ui/utils/cx';
 import { api } from '../lib/api';
 import type { EvalRunSummary } from '../components/EvalRunCard';
@@ -54,7 +54,7 @@ export function MobileEval() {
       <div className="mobile-eval-tabs">
         <button
           type="button"
-          className={cn('mobile-eval-tab', tab === 'runs' && 'is-active')}
+          className={cx('mobile-eval-tab', tab === 'runs' && 'is-active')}
           onClick={() => setTab('runs')}
         >
           <ClipboardCheck size={12} aria-hidden />
@@ -62,7 +62,7 @@ export function MobileEval() {
         </button>
         <button
           type="button"
-          className={cn('mobile-eval-tab', tab === 'schedules' && 'is-active')}
+          className={cx('mobile-eval-tab', tab === 'schedules' && 'is-active')}
           onClick={() => setTab('schedules')}
         >
           <Clock size={12} aria-hidden />
@@ -91,7 +91,7 @@ export function MobileEval() {
                   tabIndex={0}
                   onKeyDown={(e) => e.key === 'Enter' && setSelectedRun(r)}
                 >
-                  <div className={cn('mobile-eval-status', `is-${status}`)}>
+                  <div className={cx('mobile-eval-status', `is-${status}`)}>
                     {r.passed}/{r.total}
                   </div>
                   <div className="mobile-eval-run-info">

package/bizar-dash/src/web/mobile/MobileMemory.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ import {
   Clipboard,
   Scan,
 } from 'lucide-react';
-import { cn } from '../lib/utils';
+import { cx } from '../ui/utils/cx';
 import { MemoryOverview } from '../views/memory/MemoryOverview';
 import { LightragPanel } from '../views/memory/LightragPanel';
 import { ObsidianPanel } from '../views/memory/ObsidianPanel';
@@ -89,7 +89,7 @@ export function MobileMemory({ vaultPath }: Props) {
             <button
               key={s.id}
               type="button"
-              className={cn('mobile-memory-tab', activeSource === s.id && 'is-active')}
+              className={cx('mobile-memory-tab', activeSource === s.id && 'is-active')}
               onClick={() => setActiveSource(s.id)}
               aria-pressed={activeSource === s.id}
             >

package/bizar-dash/src/web/mobile/MobileSettings.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import {
   Settings2, Brain, KeyRound, Cpu, RefreshCw, Globe, Info, ChevronRight,
 } from 'lucide-react';
-import { cn } from '../lib/utils';
+import { cx } from '../ui/utils/cx';
 import type { Settings, Snapshot } from '../lib/types';
 // Sub-section components — each renders its section content inline.
@@ -206,7 +206,7 @@ export function MobileSettings({ settings, onSettingsChange, autoSave, snapshot
           const Icon = s.icon;
           const isExpanded = expandedSection === s.id;
           return (
-            <div key={s.id} className={cn('mobile-settings-item', isExpanded && 'is-expanded')}>
+            <div key={s.id} className={cx('mobile-settings-item', isExpanded && 'is-expanded')}>
               <button
                 className="mobile-settings-item-head"
                 onClick={() => setExpandedSection(isExpanded ? null : s.id)}
@@ -222,7 +222,7 @@ export function MobileSettings({ settings, onSettingsChange, autoSave, snapshot
                 </div>
                 <ChevronRight
                   size={16}
-                  className={cn('mobile-settings-item-chevron', isExpanded && 'is-rotated')}
+                  className={cx('mobile-settings-item-chevron', isExpanded && 'is-rotated')}
                 />
               </button>
               {isExpanded && (

package/bizar-dash/src/web/mobile/MobileTasks.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 // src/mobile/MobileTasks.tsx — filter-tab task list with search and FAB create sheet.
 import { useState } from 'react';
 import { Search, Plus } from 'lucide-react';
-import { cn } from '../lib/utils';
+import { cx } from '../ui/utils/cx';
 import { TaskCard } from '../components/TaskCard';
 import { TaskCreateSheet } from '../components/TaskCreateSheet';
 import type { Snapshot } from '../lib/types';
@@ -54,7 +54,7 @@ export function MobileTasks({ snapshot, refreshSnapshot, userId, workspaceId }:
           <button
             key={f}
             type="button"
-            className={cn('mobile-tasks-tab', filter === f && 'is-active')}
+            className={cx('mobile-tasks-tab', filter === f && 'is-active')}
             onClick={() => setFilter(f)}
           >
             {f.charAt(0).toUpperCase() + f.slice(1)}

package/bizar-dash/src/web/mobile/components/MobileListItem.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 // src/mobile/components/MobileListItem.tsx — reusable list row for mobile.
 import { type ComponentType } from 'react';
-import { cn } from '../../lib/utils';
+import { cx } from '../../ui/utils/cx';
 type Props = {
   icon?: ComponentType<{ size?: number }>;
@@ -30,7 +30,7 @@ export function MobileListItem({
   return (
     <Tag
       {...(onClick ? { type: 'button' as const } : {})}
-      className={cn('mobile-list-item', onClick && 'mobile-list-item-interactive', className)}
+      className={cx('mobile-list-item', onClick && 'mobile-list-item-interactive', className)}
       onClick={onClick}
     >
       {Icon && (
@@ -46,7 +46,7 @@ export function MobileListItem({
         {meta && <span className="mobile-list-meta">{meta}</span>}
       </div>
       {badge && (
-        <span className={cn('mobile-list-badge', badgeVariant !== 'default' && `badge-${badgeVariant}`)}>
+        <span className={cx('mobile-list-badge', badgeVariant !== 'default' && `badge-${badgeVariant}`)}>
           {badge}
         </span>
       )}

package/bizar-dash/src/web/styles/mobile.css CHANGED Viewed

@@ -243,6 +243,17 @@ code,
   color: var(--accent);
 }
+/* Active-state pulse per DESIGN.md §9.1: a soft --accent-soft wash
+   behind the icon so the active tab reads at a glance without a heavy
+   fill. The pulse sits behind the icon, not the whole button, so the
+   tap target keeps its full nav-btn footprint for thumb reach. */
+.mobile-nav-btn-active > svg {
+  background: var(--accent-soft);
+  border-radius: 999px;
+  padding: 4px;
+  box-sizing: content-box;
+}
 .mobile-nav-label {
   font-size: 10px;
   font-weight: 500;
@@ -2129,6 +2140,36 @@ code,
   cursor: pointer;
 }
+/* ─── View error boundary ───────────────────────────────────────────── */
+/* Shown when a child view throws during render (see MobileViewBoundary
+   in MobileApp.tsx). Keeps the chrome intact so the user can still tap
+   the back button or reload instead of staring at a blank white screen. */
+.mobile-view-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 32px 24px;
+  text-align: center;
+  min-height: 50vh;
+}
+.mobile-view-error h2 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+.mobile-view-error p {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin: 0;
+  max-width: 32ch;
+  word-break: break-word;
+}
 /* ─── Reduce motion ──────────────────────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   *,

package/bizar-dash/src/web/styles/tasks-redesign.css CHANGED Viewed

@@ -135,7 +135,6 @@
   padding: var(--space-3);
   background: var(--surface-0);
   border: 1px solid var(--border-subtle);
-  border-left-width: 3px;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: border-color var(--duration-fast) var(--ease-out),
@@ -153,17 +152,11 @@
   outline-offset: 1px;
 }
-.tasks-wave3__row--priority-high {
-  border-left-color: var(--danger);
-}
-.tasks-wave3__row--priority-normal {
-  border-left-color: var(--info);
-}
-.tasks-wave3__row--priority-low {
-  border-left-color: var(--text-tertiary);
-}
+/* Priority hint inside the row is encoded by the <Badge> + <StatusDot>
+   rendered in JSX (see PRIORITY_BADGE in Tasks.tsx). We deliberately
+   drop the previous left-edge priority stripe — DESIGN.md §14 bans
+   vertical accent edges on containers; the badge + dot handle the
+   state encoding in one canonical place. */
 .tasks-wave3__row-title-row {
   display: flex;
@@ -229,3 +222,32 @@
 .tasks-wave3__dot--success { background: var(--success); }
 .tasks-wave3__dot--warning { background: var(--warning); }
 .tasks-wave3__dot--danger  { background: var(--danger); }
+/* ── Responsive (F-041) ─────────────────────────────────────────── */
+/* Below 1099px the 5-column kanban becomes a single vertical stack
+   with section dividers — DESIGN.md §13 lists 1099px as the "info
+   panel becomes sheet" breakpoint, so the kanban degrades the same
+   way. Each Panel becomes a section, not a column. */
+@media (max-width: 1099px) {
+  .tasks-wave3__kanban {
+    grid-template-columns: 1fr !important;
+    gap: var(--space-4) !important;
+  }
+  .tasks-wave3__column {
+    /* Drop the panel chrome on the collapsed view — section header
+       carries the title. */
+    border-color: transparent;
+    background: transparent;
+    padding: 0 !important;
+  }
+}
+/* On the mobile shell (< 768px) the mobile view takes over so we
+   just make sure no horizontal scroll leaks through if the desktop
+   view is briefly shown at that width. */
+@media (max-width: 767px) {
+  .tasks-wave3 {
+    overflow-x: hidden;
+  }
+}

package/bizar-dash/src/web/ui/controls/Textarea.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+/*
+ * Textarea.tsx — multi-line text field (F-041).
+ *
+ * Sibling of TextInput. Wraps a native <textarea> so vertical resize,
+ * mobile keyboard avoidance, and selection behave natively. Same focus
+ * ring, error state, and disabled treatment as TextInput via the shared
+ * .field wrapper in controls.css. Use for any free-form multi-line input
+ * (prompts, descriptions, system prompts).
+ */
+import {
+  forwardRef,
+  type TextareaHTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cx } from '../utils/cx';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'children'
+> & {
+  inputSize?: TextareaSize;
+  error?: string | null;
+  hint?: ReactNode;
+};
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function Textarea(
+    {
+      inputSize = 'md',
+      error,
+      hint,
+      disabled,
+      className,
+      rows = 4,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <span className={cx('field', 'field-textarea', `field-size-${inputSize}`, className)}>
+        <textarea
+          ref={ref}
+          rows={rows}
+          disabled={disabled}
+          aria-invalid={error ? true : undefined}
+          className={cx('field-input', 'field-input-textarea', error && 'field-error')}
+          {...rest}
+        />
+        {hint && <span className="field-hint">{hint}</span>}
+      </span>
+    );
+  },
+);

package/bizar-dash/src/web/ui/controls/controls.css CHANGED Viewed

@@ -243,6 +243,28 @@
 }
 .field-clear:hover { color: var(--text-primary); background-color: var(--surface-3); }
+/* ===== Textarea (F-041) ===== */
+.field-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.field-input-textarea {
+  /* Resets the single-line .field-input height so the textarea can grow. */
+  height: auto;
+  min-height: 80px;
+  resize: vertical;
+  font-family: var(--font-sans);
+  line-height: var(--leading-normal);
+}
+.field-size-sm .field-input-textarea { font-size: var(--text-sm); min-height: 60px; }
+.field-size-md .field-input-textarea { font-size: var(--text-base); min-height: 80px; }
+.field-size-lg .field-input-textarea { font-size: var(--text-md); min-height: 120px; }
+.field-hint {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
 /* ===== Select ===== */
 .select {
   display: inline-block;

package/bizar-dash/src/web/ui/controls/index.ts CHANGED Viewed

@@ -17,6 +17,8 @@ export { Toggle } from './Toggle';
 export type { ToggleProps, ToggleSize } from './Toggle';
 export { TextInput } from './TextInput';
 export type { TextInputProps, TextInputSize } from './TextInput';
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaSize } from './Textarea';
 export { NumberInput } from './NumberInput';
 export type { NumberInputProps, NumberInputSize } from './NumberInput';
 export { Select } from './Select';

package/bizar-dash/src/web/ui/layout/ViewHeader.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+/*
+ * ViewHeader.tsx — top-of-view title row (F-041).
+ *
+ * Distinct from PanelHeader (which lives inside a Panel). Sits above the
+ * view's content as the page-level header: a single row with the title on
+ * the left, an optional subtitle, and a right-aligned actions slot. Used
+ * at the top of every top-level view (Overview, Tasks, Agents, Chat,
+ * Settings, MobileOverview, MobileTasks, etc.) so the dashboard reads as
+ * one system instead of five bespoke title bars.
+ *
+ * Visual contract (see DESIGN.md §9.22):
+ *   - Title: --fs-h3 (16px) weight 600, --text-primary
+ *   - Subtitle: --text-sm (12px), --text-secondary
+ *   - Actions: right-aligned via Inline; typically IconButton + Button
+ *   - Padding: --space-3 from top, --space-4 horizontal
+ *   - No bottom border (the first child panel provides the visual divider)
+ */
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+export type ViewHeaderProps = {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+  /** Optional eyebrow row above the title (e.g. breadcrumbs, view label). */
+  eyebrow?: ReactNode;
+  className?: string;
+};
+export function ViewHeader({
+  title,
+  subtitle,
+  actions,
+  eyebrow,
+  className,
+}: ViewHeaderProps): React.JSX.Element {
+  return (
+    <header className={cx('bizar-view-header', className)}>
+      <div className="bizar-view-header__text">
+        {eyebrow && <div className="bizar-view-header__eyebrow">{eyebrow}</div>}
+        {title && <h1 className="bizar-view-header__title">{title}</h1>}
+        {subtitle && <p className="bizar-view-header__subtitle">{subtitle}</p>}
+      </div>
+      {actions && <div className="bizar-view-header__actions">{actions}</div>}
+    </header>
+  );
+}

package/bizar-dash/src/web/ui/layout/index.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export {
   type PanelVariant,
 } from './Panel';
 export { PanelHeader, type PanelHeaderProps } from './PanelHeader';
+export { ViewHeader, type ViewHeaderProps } from './ViewHeader';
 export { Tabs, type TabsProps, type TabDef } from './Tabs';
 export {
   Breadcrumbs,

package/bizar-dash/src/web/ui/layout/layout.css CHANGED Viewed

@@ -263,6 +263,57 @@
 .bizar-panel__padding--4 { padding: var(--space-4); }
 .bizar-panel__padding--5 { padding: var(--space-5); }
+/* ─────────────────────────────────────────────────────────────────────
+ * ViewHeader — top-of-view title row (F-041)
+ *
+ * Sibling of PanelHeader, distinct because it lives at the page level
+ * (above the first Panel) rather than inside one. One header per top-
+ * level view so the dashboard reads as one system.
+ * ──────────────────────────────────────────────────────────────────── */
+.bizar-view-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) 0 var(--space-4);
+  flex-wrap: wrap;
+}
+.bizar-view-header__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.bizar-view-header__eyebrow {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.bizar-view-header__title {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+  line-height: var(--leading-tight);
+}
+.bizar-view-header__subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-snug);
+}
+.bizar-view-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  flex: 0 0 auto;
+}
 /* ─────────────────────────────────────────────────────────────────────
  * Tabs — horizontal tab strip
  * ──────────────────────────────────────────────────────────────────── */

package/bizar-dash/src/web/ui/styles/tokens.css CHANGED Viewed

@@ -174,6 +174,19 @@
     0 8px 24px rgba(0, 0, 0, 0.40);
   --shadow-tooltip: 0 0 0 1px var(--border-default),
     0 4px 12px rgba(0, 0, 0, 0.50);
+  /* Agent swatch (F-041) — used as the placeholder when an agent has
+     no configured color; falls back to the brand accent so empty swatches
+     still read as "this is the brand". */
+  --default-agent-swatch: var(--accent);
+  /* Safe-area insets (F-041) — wire to env(safe-area-inset-*) so the
+     mobile shell clears the iOS notch + home indicator on phones and
+     the macOS notch on laptops without per-component media queries. */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
 }
 :root[data-theme='light'] {

package/bizar-dash/src/web/views/Agents.tsx CHANGED Viewed

@@ -62,6 +62,14 @@ const MODELS = [
   'openrouter/minimax/minimax-m2.7',
 ];
+// Default agent swatch — the only place in the dashboard where a
+// literal hex appears. HTML <input type="color"> requires CSS Color
+// Module Level 3 hex format (no `oklch()`, no `var(--token)`). Keep
+// this in sync with --default-agent-swatch in ui/styles/tokens.css;
+// the token is what every CSS-side swatch reads, this is just the
+// native color-input seed value.
+const DEFAULT_AGENT_SWATCH_HEX = '#8b5cf6';
 const CATEGORIES = [
   { id: 'reasoning', label: 'Reasoning', variant: 'accent' as const },
   { id: 'code', label: 'Code', variant: 'info' as const },
@@ -229,7 +237,7 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
             </div>
             <div className="task-form-field" style={{ flex: '0 0 80px' }}>
               <label className="field-label" htmlFor="agent-new-color">Color</label>
-              <input id="agent-new-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue="#8b5cf6" />
+              <input id="agent-new-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={DEFAULT_AGENT_SWATCH_HEX} />
             </div>
           </div>
           <div className="task-form-row">
@@ -362,7 +370,7 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
               </div>
               <div className="task-form-field" style={{ flex: '0 0 80px' }}>
                 <label className="field-label" htmlFor="agent-edit-color">Color</label>
-                <input id="agent-edit-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={full.color || '#8b5cf6'} />
+                <input id="agent-edit-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={full.color || DEFAULT_AGENT_SWATCH_HEX} />
               </div>
             </div>
             <div className="task-form-row">