@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/kanban/KanbanColumn.tsx

@@ -0,0 +1,186 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { Plus, MoreHorizontal } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * KanbanColumn — a single status column on the kanban board.
+ *
+ * Built per DESIGN.md §6: title row with count + actions, scrollable
+ * card list, "+ Add" quick-add affordance at the bottom.
+ */
+
+export interface KanbanColumnData {
+  id: string;
+  title: ReactNode;
+  /** Optional small description below the title. */
+  description?: ReactNode;
+  /** Number of cards in the column; auto-counted if not provided. */
+  count?: number;
+  /** WIP limit. When set, the column header shows the limit and warns when exceeded. */
+  wipLimit?: number;
+  /** Tone for the column header accent bar. */
+  accentTone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+}
+
+export interface KanbanColumnProps extends HTMLAttributes<HTMLElement> {
+  column: KanbanColumnData;
+  /** Cards rendered inside the column body. */
+  children?: ReactNode;
+  /** Click handler for the "+" add button. */
+  onAdd?: () => void;
+  /** Click handler for the "⋯" overflow button. */
+  onOverflow?: () => void;
+  /** WIP limit warning state. */
+  exceedsWip?: boolean;
+}
+
+const ACCENT_FG: Record<NonNullable<KanbanColumnData['accentTone']>, string> = {
+  neutral: 'var(--fg-subtle)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  accent: 'var(--accent)',
+};
+
+export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function KanbanColumn(
+  props,
+  ref,
+) {
+  const { column, children, onAdd, onOverflow, exceedsWip, className, style, ...rest } = props;
+  const { setNodeRef, isOver } = useDroppable({ id: column.id });
+  return (
+    <section
+      ref={ref}
+      className={cx('v8-kanban-column', isOver && 'is-over', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 320,
+        background: 'var(--surface-0)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        height: '100%',
+        boxShadow: 'var(--shadow-1)',
+        ...style,
+      }}
+      aria-label={typeof column.title === 'string' ? column.title : undefined}
+      {...rest}
+    >
+      <header
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 2,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          padding: 'var(--space-3) var(--space-4)',
+          borderBottom: '1px solid var(--border)',
+          background: 'color-mix(in oklch, var(--surface-0) 92%, transparent)',
+          backdropFilter: 'blur(8px)',
+        }}
+      >
+        <span
+          aria-hidden="true"
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: 'var(--radius-pill)',
+            background: ACCENT_FG[column.accentTone ?? 'neutral'],
+            flexShrink: 0,
+          }}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: 'var(--fs-13)',
+              fontWeight: 600,
+              color: 'var(--fg)',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {column.title}
+          </div>
+          {(column.count !== undefined || column.wipLimit !== undefined) && (
+            <div
+              style={{
+                fontSize: 'var(--fs-12)',
+                color:
+                  exceedsWip === true
+                    ? 'var(--danger)'
+                    : 'var(--fg-subtle)',
+                fontVariantNumeric: 'tabular-nums',
+              }}
+            >
+              {column.count ?? 0}
+              {column.wipLimit !== undefined && ` / ${column.wipLimit}`}
+            </div>
+          )}
+        </div>
+        {onOverflow !== undefined && (
+          <button
+            type="button"
+            onClick={onOverflow}
+            aria-label="Column options"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 24,
+              height: 24,
+              background: 'transparent',
+              border: 0,
+              borderRadius: 'var(--radius-sm)',
+              color: 'var(--fg-muted)',
+              cursor: 'pointer',
+            }}
+          >
+            <MoreHorizontal size={14} aria-hidden="true" />
+          </button>
+        )}
+        {onAdd !== undefined && (
+          <button
+            type="button"
+            onClick={onAdd}
+            aria-label="Add card"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 24,
+              height: 24,
+              background: 'transparent',
+              border: 0,
+              borderRadius: 'var(--radius-sm)',
+              color: 'var(--fg-muted)',
+              cursor: 'pointer',
+            }}
+          >
+            <Plus size={14} aria-hidden="true" />
+          </button>
+        )}
+      </header>
+      <div
+        ref={setNodeRef}
+        className="v8-kanban-column__body"
+        style={{
+          flex: 1,
+          minHeight: 0,
+          padding: 'var(--space-3) var(--space-3) var(--space-4)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 'var(--space-3)',
+          overflowY: 'auto',
+          background: isOver ? 'color-mix(in oklch, var(--accent) 6%, transparent)' : 'transparent',
+          transition: 'background var(--motion-fast) var(--ease-out)',
+        }}
+      >
+        {children}
+      </div>
+    </section>
+  );
+});

package/bizar-dash/src/web/v8/ui/kanban/KanbanContextMenu.tsx

@@ -0,0 +1,122 @@
+import { type ReactNode } from 'react';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+} from '../feedback/ContextMenu.js';
+import {
+  Copy,
+  Trash2,
+  Archive,
+  ArrowRight,
+  ArrowLeft,
+  Pencil,
+  Eye,
+  Link as LinkIcon,
+  UserPlus,
+} from 'lucide-react';
+
+/**
+ * KanbanContextMenu — the right-click menu every kanban card gets.
+ *
+ * Per DESIGN.md Rule #1, EVERY card must right-click. This is the
+ * standard menu: Open, Rename, Duplicate, Move (left/right), Copy link,
+ * Assign, Archive, Delete.
+ *
+ * Callers can extend with `extraItems` between Move and Archive for
+ * card-specific actions (e.g. "Run agent", "Open in agent").
+ */
+
+export interface KanbanContextMenuProps {
+  /** The card content (the visible card surface). */
+  children: ReactNode;
+  onOpen?: () => void;
+  onRename?: () => void;
+  onDuplicate?: () => void;
+  onCopyLink?: () => void;
+  onMoveLeft?: () => void;
+  onMoveRight?: () => void;
+  onAssign?: () => void;
+  onArchive?: () => void;
+  onDelete?: () => void;
+  /** Whether "move left" is available (not the leftmost column). */
+  canMoveLeft?: boolean;
+  /** Whether "move right" is available (not the rightmost column). */
+  canMoveRight?: boolean;
+}
+
+export function KanbanContextMenu(props: KanbanContextMenuProps) {
+  const {
+    children,
+    onOpen,
+    onRename,
+    onDuplicate,
+    onCopyLink,
+    onMoveLeft,
+    onMoveRight,
+    onAssign,
+    onArchive,
+    onDelete,
+    canMoveLeft = true,
+    canMoveRight = true,
+  } = props;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuLabel>Task</ContextMenuLabel>
+        <ContextMenuItem leftIcon={<Eye size={14} aria-hidden="true" />} onSelect={onOpen}>
+          Open detail
+        </ContextMenuItem>
+        <ContextMenuItem leftIcon={<Pencil size={14} aria-hidden="true" />} onSelect={onRename}>
+          Rename
+          <kbd style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10 }}>F2</kbd>
+        </ContextMenuItem>
+        <ContextMenuItem leftIcon={<Copy size={14} aria-hidden="true" />} onSelect={onDuplicate}>
+          Duplicate
+        </ContextMenuItem>
+        <ContextMenuItem leftIcon={<LinkIcon size={14} aria-hidden="true" />} onSelect={onCopyLink}>
+          Copy link
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>Move</ContextMenuLabel>
+        <ContextMenuItem
+          leftIcon={<ArrowLeft size={14} aria-hidden="true" />}
+          disabled={canMoveLeft === false}
+          onSelect={onMoveLeft}
+        >
+          Move to previous column
+          <kbd style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10 }}>←</kbd>
+        </ContextMenuItem>
+        <ContextMenuItem
+          leftIcon={<ArrowRight size={14} aria-hidden="true" />}
+          disabled={canMoveRight === false}
+          onSelect={onMoveRight}
+        >
+          Move to next column
+          <kbd style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10 }}>→</kbd>
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem leftIcon={<UserPlus size={14} aria-hidden="true" />} onSelect={onAssign}>
+          Assign…
+        </ContextMenuItem>
+        <ContextMenuItem leftIcon={<Archive size={14} aria-hidden="true" />} onSelect={onArchive}>
+          Archive
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          leftIcon={<Trash2 size={14} aria-hidden="true" />}
+          danger
+          onSelect={onDelete}
+        >
+          Delete
+          <kbd style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10 }}>⌫</kbd>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/bizar-dash/src/web/v8/ui/kanban/KanbanQuickAdd.tsx

@@ -0,0 +1,141 @@
+import { useState, type KeyboardEvent, type ReactNode } from 'react';
+import { Plus } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * KanbanQuickAdd — inline card composer at the bottom of a column.
+ *
+ * Two states:
+ *   - idle: shows a "+ Add task" affordance.
+ *   - editing: shows a textarea with submit/cancel.
+ *
+ * On submit, the typed title is reported via onAdd and the field clears.
+ */
+
+export interface KanbanQuickAddProps {
+  /** Called when the user submits a new card title. */
+  onAdd: (title: string) => void;
+  /** Placeholder shown in the textarea. */
+  placeholder?: string;
+  /** Optional label for the idle button. */
+  addLabel?: ReactNode;
+  className?: string;
+}
+
+export function KanbanQuickAdd({
+  onAdd,
+  placeholder = 'Task title…',
+  addLabel = 'Add task',
+  className,
+}: KanbanQuickAddProps) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState('');
+
+  const submit = () => {
+    const title = value.trim();
+    if (title === '') return;
+    onAdd(title);
+    setValue('');
+    // Keep the editor open so users can add multiple in a row.
+  };
+
+  const handleKey = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setEditing(false);
+      setValue('');
+    }
+  };
+
+  if (!editing) {
+    return (
+      <button
+        type="button"
+        onClick={() => setEditing(true)}
+        className={cx('v8-kanban-quick-add v8-kanban-quick-add--idle', className)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          width: '100%',
+          padding: 'var(--space-2) var(--space-3)',
+          background: 'transparent',
+          border: '1px dashed var(--border)',
+          borderRadius: 'var(--radius)',
+          color: 'var(--fg-muted)',
+          fontSize: 'var(--fs-13)',
+          fontFamily: 'inherit',
+          cursor: 'pointer',
+        }}
+      >
+        <Plus size={14} aria-hidden="true" />
+        {addLabel}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={cx('v8-kanban-quick-add v8-kanban-quick-add--editing', className)}
+      style={{
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius)',
+        padding: 'var(--space-2)',
+      }}
+    >
+      <textarea
+        autoFocus
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKey}
+        placeholder={placeholder}
+        rows={2}
+        style={{
+          width: '100%',
+          border: 0,
+          outline: 0,
+          background: 'transparent',
+          resize: 'none',
+          fontFamily: 'inherit',
+          fontSize: 'var(--fs-13)',
+          color: 'var(--fg)',
+          lineHeight: 'var(--lh-snug)',
+        }}
+      />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 'var(--space-2)',
+          marginTop: 'var(--space-2)',
+        }}
+      >
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>
+          <kbd style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>↵</kbd> add ·{' '}
+          <kbd style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>Esc</kbd> cancel
+        </span>
+        <button
+          type="button"
+          onClick={() => {
+            setEditing(false);
+            setValue('');
+          }}
+          style={{
+            background: 'transparent',
+            border: 0,
+            fontSize: 'var(--fs-12)',
+            color: 'var(--fg-muted)',
+            cursor: 'pointer',
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/v8/ui/libraries/LibraryGrid.tsx

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * LibraryGrid — responsive grid for LibraryItem lists.
+ *
+ * Renders 1 column on narrow viewports, 2 columns on md, 3 columns on lg.
+ * Uses CSS grid + auto-fit; items auto-size to fill available space.
+ */
+
+export interface LibraryGridProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function LibraryGrid(props: LibraryGridProps) {
+  const { children, className } = props;
+  return (
+    <div
+      className={cx('v8-library-grid', className)}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 320px), 1fr))',
+        gap: 'var(--space-3)',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/bizar-dash/src/web/v8/ui/libraries/LibraryItem.tsx

@@ -0,0 +1,161 @@
+import { type ReactNode } from 'react';
+import { ChevronRight, Power } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { Badge, type BadgeTone } from '../data/Badge.js';
+
+/**
+ * LibraryItem — generic inventory card used by the Skill/MCP/Hook libraries.
+ *
+ * PLAN.md: each "library" lists the same three facts about an installable
+ * resource: identity (name + slug), status (enabled/disabled/error), and
+ * provenance (description, version, last-used, owner). LibraryItem renders
+ * those facts consistently so all three libraries feel like one product.
+ */
+
+export type LibraryStatus = 'enabled' | 'disabled' | 'error';
+
+export interface LibraryItemProps {
+  id: string;
+  /** Display name (e.g. "Frigg — Codebase Q&A"). */
+  name: string;
+  /** Identifier (e.g. "frigg", "semble", "PreToolUse:check-arch"). */
+  slug: string;
+  status: LibraryStatus;
+  description?: string;
+  /** One-line metadata row (e.g. "v1.2.0 · used 14× today · @anthropic"). */
+  meta?: string;
+  /** Optional trailing action area (toggle, menu trigger, etc). */
+  actions?: ReactNode;
+  /** Click handler — opens detail. */
+  onOpen?: () => void;
+  className?: string;
+}
+
+const STATUS_LABEL: Record<LibraryStatus, string> = {
+  enabled: 'Enabled',
+  disabled: 'Disabled',
+  error: 'Error',
+};
+
+const STATUS_TONE: Record<LibraryStatus, BadgeTone> = {
+  enabled: 'success',
+  disabled: 'neutral',
+  error: 'danger',
+};
+
+export function LibraryItem(props: LibraryItemProps) {
+  const { name, slug, status, description, meta, actions, onOpen, className } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cx('v8-library-item', `v8-library-item--${status}`, className)}
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 'var(--space-3)',
+        width: '100%',
+        padding: 'var(--space-3) var(--space-4)',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius)',
+        textAlign: 'left',
+        cursor: onOpen !== undefined ? 'pointer' : 'default',
+        font: 'inherit',
+        color: 'inherit',
+        transition: 'border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 28,
+          height: 28,
+          marginTop: 2,
+          borderRadius: 'var(--radius-sm)',
+          background:
+            status === 'enabled'
+              ? 'color-mix(in oklch, var(--success) 14%, transparent)'
+              : status === 'error'
+                ? 'color-mix(in oklch, var(--danger) 14%, transparent)'
+                : 'var(--surface-2)',
+          color:
+            status === 'enabled' ? 'var(--success)' : status === 'error' ? 'var(--danger)' : 'var(--fg-muted)',
+          flexShrink: 0,
+        }}
+      >
+        <Power size={14} aria-hidden="true" />
+      </span>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <span
+            style={{
+              fontSize: 'var(--fs-13)',
+              fontWeight: 600,
+              color: 'var(--fg)',
+              lineHeight: 'var(--lh-snug)',
+            }}
+          >
+            {name}
+          </span>
+          <code
+            style={{
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-subtle)',
+              fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+            }}
+          >
+            {slug}
+          </code>
+        </div>
+        {description !== undefined && (
+          <div
+            style={{
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-muted)',
+              marginTop: 2,
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {description}
+          </div>
+        )}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 'var(--space-2)',
+            marginTop: 6,
+          }}
+        >
+          {meta !== undefined ? (
+            <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>{meta}</span>
+          ) : (
+            <span />
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+            <Badge tone={STATUS_TONE[status]} size="sm">
+              {STATUS_LABEL[status]}
+            </Badge>
+            {actions}
+            <ChevronRight size={14} aria-hidden="true" style={{ color: 'var(--fg-subtle)' }} />
+          </div>
+        </div>
+      </div>
+      <style>{`
+        .v8-library-item:hover {
+          border-color: var(--accent);
+          background: var(--surface-2);
+        }
+      `}</style>
+    </button>
+  );
+}