@polderlabs/bizar 6.3.0 → 7.0.1

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

@@ -0,0 +1,464 @@
+/*
+ * layout.css — Styles for Bizar layout components (Wave 2C).
+ *
+ * Ships the visual surface for AppShell, Sidebar, Topbar, Panel,
+ * PanelHeader, Tabs, and Breadcrumbs. Every value references a token —
+ * no literals — so the design-system lights up both light and dark by
+ * inheriting tokens.css. Side-effect import from `ui/layout/index.ts`.
+ *
+ * Layout primitives here are additive: the legacy main.css / topbar
+ * styles in styles/ keep working unchanged. Class names are scoped
+ * under `.bizar-` so they never collide with legacy `.sidebar` etc.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────
+ * AppShell — topbar + sidebar + content
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-app-shell {
+  display: grid;
+  grid-template-areas:
+    'topbar topbar'
+    'sidebar main';
+  grid-template-rows: var(--layout-topbar-height) 1fr;
+  grid-template-columns: auto 1fr;
+  min-height: 100vh;
+  background: var(--surface-0);
+  color: var(--text-primary);
+}
+
+.bizar-app-shell__topbar {
+  grid-area: topbar;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  background: var(--surface-0);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bizar-app-shell__sidebar {
+  grid-area: sidebar;
+  width: var(--layout-sidebar-width);
+  border-right: 1px solid var(--border-subtle);
+  background: var(--surface-1);
+  overflow-y: auto;
+}
+
+.bizar-app-shell__sidebar--collapsed {
+  width: 0;
+  border-right: 0;
+  overflow: hidden;
+}
+
+.bizar-app-shell__main {
+  grid-area: main;
+  min-width: 0;
+  overflow-y: auto;
+  background: var(--surface-0);
+}
+
+.bizar-app-shell__main-inner {
+  max-width: var(--layout-content-max);
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-7);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Sidebar — left vertical nav rail
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--space-4) var(--space-3);
+  font-size: var(--text-base);
+}
+
+.bizar-sidebar__group + .bizar-sidebar__group {
+  margin-top: var(--space-5);
+}
+
+.bizar-sidebar__label {
+  padding: 0 var(--space-3);
+  margin-bottom: var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-tertiary);
+}
+
+.bizar-sidebar__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.bizar-sidebar__footer {
+  margin-top: auto;
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border-subtle);
+}
+
+.bizar-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-base);
+  font-family: inherit;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+  line-height: var(--leading-snug);
+}
+
+.bizar-sidebar__item:hover:not([disabled]):not([aria-disabled='true']) {
+  background: var(--surface-overlay);
+  color: var(--text-primary);
+}
+
+.bizar-sidebar__item--active {
+  background: var(--accent-subtle);
+  color: var(--text-primary);
+  font-weight: var(--weight-medium);
+}
+
+.bizar-sidebar__item[disabled],
+.bizar-sidebar__item[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--text-tertiary);
+}
+
+.bizar-sidebar__item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bizar-sidebar__item-badge {
+  font-size: var(--text-xs);
+  padding: 0 var(--space-2);
+  background: var(--surface-overlay);
+  color: var(--text-secondary);
+  border-radius: var(--radius-full);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Topbar — header bar
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-topbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--layout-topbar-height);
+  padding: 0 var(--space-5);
+  gap: var(--space-4);
+  background: var(--surface-0);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bizar-topbar--sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+
+.bizar-topbar__brand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.bizar-topbar__center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.bizar-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Panel — bordered card
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-panel {
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.bizar-panel--filled {
+  background: var(--surface-2);
+  border-color: var(--border-default);
+}
+
+.bizar-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bizar-panel__header-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bizar-panel__title {
+  margin: 0;
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+  line-height: var(--leading-tight);
+}
+
+.bizar-panel__description {
+  margin: var(--space-1) 0 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-snug);
+}
+
+.bizar-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.bizar-panel__body {
+  flex: 1 1 auto;
+}
+
+.bizar-panel__padding--0 { padding: 0; }
+.bizar-panel__padding--1 { padding: var(--space-1); }
+.bizar-panel__padding--2 { padding: var(--space-2); }
+.bizar-panel__padding--3 { padding: var(--space-3); }
+.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
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-tabs {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.bizar-tabs--sm .bizar-tab {
+  font-size: var(--text-sm);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+
+/* Underline variant */
+.bizar-tabs--underline {
+  border-bottom: 1px solid var(--border-subtle);
+  gap: var(--space-2);
+}
+
+.bizar-tabs--underline .bizar-tab {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  border-radius: 0;
+  font-size: var(--text-base);
+  color: var(--text-secondary);
+  background: transparent;
+  transition: color var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.bizar-tabs--underline .bizar-tab:hover:not([disabled]) {
+  color: var(--text-primary);
+}
+
+.bizar-tabs--underline .bizar-tab--active {
+  color: var(--text-primary);
+  border-bottom-color: var(--accent);
+}
+
+.bizar-tabs--underline .bizar-tab[disabled] {
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+
+/* Pill variant */
+.bizar-tabs--pill {
+  gap: var(--space-2);
+  padding: var(--space-1);
+}
+
+.bizar-tabs--pill .bizar-tab {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-base);
+  color: var(--text-secondary);
+  background: transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  transition: background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+}
+
+.bizar-tabs--pill .bizar-tab:hover:not([disabled]) {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
+
+.bizar-tabs--pill .bizar-tab--active {
+  background: var(--surface-3);
+  color: var(--text-primary);
+  font-weight: var(--weight-medium);
+}
+
+.bizar-tabs--pill .bizar-tab[disabled] {
+  color: var(--text-tertiary);
+  cursor: not-allowed;
+}
+
+.bizar-tab__badge {
+  background: var(--surface-overlay);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-full);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+}
+
+.bizar-tab__icon {
+  flex-shrink: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Breadcrumbs
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  gap: var(--space-2);
+}
+
+.bizar-breadcrumbs__item {
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-sm);
+}
+
+.bizar-breadcrumbs__item:hover:not([disabled]) {
+  color: var(--text-primary);
+}
+
+.bizar-breadcrumbs__item[disabled] {
+  color: var(--text-tertiary);
+  cursor: default;
+}
+
+.bizar-breadcrumbs__item--current {
+  color: var(--text-primary);
+  font-weight: var(--weight-medium);
+  cursor: default;
+}
+
+.bizar-breadcrumbs__separator {
+  color: var(--text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/bizar-dash/src/web/ui/navigation/CommandPalette.tsx

@@ -0,0 +1,199 @@
+/*
+ * CommandPalette.tsx — Cmd+K command palette (Wave 2B).
+ *
+ * Self-contained palette: provides its own overlay, input, results list
+ * and keyboard handling. The next Wave 2C Dialog component will replace
+ * the overlay/modal wrapper, but the search/filter/keyboard guts stay here
+ * because the search UX (fuzzy match, grouping, arrow nav) is intrinsic to
+ * the palette rather than the modal primitive.
+ *
+ * Filter pipeline: input change → fuse.js (weighted across label +
+ * description, threshold loose so typos still hit) → group-by-type →
+ * flatten into a flat list for arrow-key navigation.
+ */
+
+import {
+  useCallback, useEffect, useMemo, useRef, useState, type ReactNode,
+} from 'react';
+import { Search } from 'lucide-react';
+import Fuse from 'fuse.js';
+import { cx } from '../utils/cx';
+
+export type CommandPaletteItemType =
+  | 'agent' | 'task' | 'mod' | 'schedule' | 'project' | 'command' | 'setting';
+
+export type CommandPaletteItem = {
+  id: string;
+  type: CommandPaletteItemType;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  shortcut?: string[];
+  onSelect: () => void;
+};
+
+export type CommandPaletteProps = {
+  open: boolean;
+  onClose: () => void;
+  items: CommandPaletteItem[];
+  placeholder?: string;
+  className?: string;
+};
+
+const TYPE_LABELS: Record<CommandPaletteItemType, string> = {
+  agent: 'Agents', task: 'Tasks', mod: 'Mods', schedule: 'Schedules',
+  project: 'Projects', command: 'Commands', setting: 'Settings',
+};
+const TYPE_ORDER = Object.keys(TYPE_LABELS) as CommandPaletteItemType[];
+
+type Grouped = Array<readonly [CommandPaletteItemType, CommandPaletteItem[]]>;
+type FlatRow = { index: number; item: CommandPaletteItem };
+
+function groupByType(items: CommandPaletteItem[]): Grouped {
+  const byType = new Map<CommandPaletteItemType, CommandPaletteItem[]>();
+  for (const it of items) {
+    const arr = byType.get(it.type) ?? [];
+    arr.push(it);
+    byType.set(it.type, arr);
+  }
+  return TYPE_ORDER.flatMap((t) => {
+    const arr = byType.get(t);
+    return arr && arr.length > 0 ? ([[t, arr]] as const) : [];
+  });
+}
+
+function flatten(rows: Grouped): FlatRow[] {
+  const flat: FlatRow[] = [];
+  let i = 0;
+  for (const [, items] of rows) for (const it of items) flat.push({ index: i++, item: it });
+  return flat;
+}
+
+export function CommandPalette({
+  open, onClose, items, placeholder = 'Search anything…', className,
+}: CommandPaletteProps): React.JSX.Element | null {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  const fuse = useMemo(
+    () => new Fuse(items, {
+      keys: [{ name: 'label', weight: 2 }, { name: 'description', weight: 1 }],
+      threshold: 0.4, ignoreLocation: true,
+    }),
+    [items],
+  );
+
+  const grouped = useMemo<Grouped>(() => {
+    const base = query.trim() === '' ? items : fuse.search(query).map((r) => r.item);
+    return groupByType(base);
+  }, [query, items, fuse]);
+  const flat = useMemo(() => flatten(grouped), [grouped]);
+
+  // Side-effects: reset on open, clamp activeIndex, focus input, scroll into
+  // view, lock body scroll. jsdom lacks scrollIntoView so we guard the call.
+  useEffect(() => { if (open) { setQuery(''); setActiveIndex(0); } }, [open]);
+  useEffect(() => {
+    if (activeIndex >= flat.length) setActiveIndex(Math.max(0, flat.length - 1));
+  }, [flat.length, activeIndex]);
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [open]);
+  useEffect(() => {
+    const el = listRef.current?.querySelector<HTMLElement>(
+      `[data-cmdk-index="${activeIndex}"]`,
+    );
+    if (el && typeof el.scrollIntoView === 'function') el.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex]);
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, [open]);
+
+  const selectIndex = useCallback(
+    (i: number) => { const row = flat[i]; if (!row) return; row.item.onSelect(); onClose(); },
+    [flat, onClose],
+  );
+  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }
+    if (flat.length === 0) return;
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIndex((i) => (i + 1) % flat.length); return; }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIndex((i) => (i - 1 + flat.length) % flat.length); return; }
+    if (e.key === 'Enter') { e.preventDefault(); selectIndex(activeIndex); }
+  }, [flat.length, activeIndex, onClose, selectIndex]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="bd-cmdk-overlay" role="dialog" aria-modal="true" aria-label="Command palette"
+      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className={cx('bd-cmdk', className)} onKeyDown={onKeyDown}>
+        <div className="bd-cmdk__input-wrap">
+          <Search size={16} aria-hidden="true" />
+          <input
+            ref={inputRef} className="bd-cmdk__input" value={query}
+            onChange={(e) => { setQuery(e.target.value); setActiveIndex(0); }}
+            placeholder={placeholder} autoComplete="off" spellCheck={false}
+          />
+          <kbd className="bd-cmdk__kbd-hint">esc</kbd>
+        </div>
+        <div className="bd-cmdk__results" ref={listRef}>
+          {flat.length === 0 ? <div className="bd-cmdk__empty">No results</div> : (
+            grouped.map(([type, list]) => (
+              <div key={type} className="bd-cmdk__group">
+                <div className="bd-cmdk__group-header">{TYPE_LABELS[type]}</div>
+                {list.map((item) => {
+                  const rowIndex = flat.find((r) => r.item === item)!.index;
+                  return <PaletteRow
+                    key={item.id}
+                    item={item}
+                    rowIndex={rowIndex}
+                    active={rowIndex === activeIndex}
+                    onHover={setActiveIndex}
+                    onSelect={selectIndex}
+                  />;
+                })}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type PaletteRowProps = {
+  item: CommandPaletteItem;
+  rowIndex: number;
+  active: boolean;
+  onHover: (i: number) => void;
+  onSelect: (i: number) => void;
+};
+function PaletteRow({ item, rowIndex, active, onHover, onSelect }: PaletteRowProps): React.JSX.Element {
+  return (
+    <button
+      type="button" data-cmdk-index={rowIndex}
+      className={cx('bd-cmdk__item', active && 'bd-cmdk__item--active')}
+      onMouseEnter={() => onHover(rowIndex)}
+      onClick={() => onSelect(rowIndex)}
+    >
+      {item.icon && <span className="bd-cmdk__item-icon" aria-hidden="true">{item.icon}</span>}
+      <span className="bd-cmdk__item-body">
+        <span className="bd-cmdk__item-label">{item.label}</span>
+        {item.description && <span className="bd-cmdk__item-description">{item.description}</span>}
+      </span>
+      {item.shortcut && item.shortcut.length > 0 && (
+        <span className="bd-cmdk__item-shortcut">
+          {item.shortcut.map((k, i) => <kbd key={`${k}-${i}`}>{k}</kbd>)}
+        </span>
+      )}
+    </button>
+  );
+}