@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/ui/goals/GoalDetail.tsx

@@ -37,6 +37,23 @@ export interface GoalDetailProps {
 
 export function GoalDetail(props: GoalDetailProps): JSX.Element {
   const { goal, open, onOpenChange } = props;
+  const [deleting, setDeleting] = useState<boolean>(false);
+
+  const removeGoal = async (): Promise<void> => {
+    const ok = typeof window !== 'undefined' && typeof window.confirm === 'function'
+      ? window.confirm(`Delete goal "${goal.title}"? This removes it from PROGRESS.md.`)
+      : true;
+    if (!ok) return;
+    setDeleting(true);
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}`, { method: 'DELETE' });
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setDeleting(false);
+    }
+  };
   const [title, setTitle] = useState<string>(goal.title);
   const [status, setStatus] = useState<string>(goal.status);
   const [owner, setOwner] = useState<string>(goal.owner || '');
@@ -237,6 +254,16 @@ export function GoalDetail(props: GoalDetailProps): JSX.Element {
           </Inline>
         </Stack>
 
+        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--space-3)' }}>
+          <Button
+            variant="danger"
+            onClick={() => { void removeGoal(); }}
+            disabled={deleting || busy !== null}
+          >
+            <Trash2 size={14} aria-hidden /> {deleting ? 'Deleting…' : 'Delete goal'}
+          </Button>
+        </div>
+
         {message !== null && (
           <div role="status" style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>{message}</div>
         )}

package/bizar-dash/src/web/v8/ui/index.ts

@@ -248,9 +248,41 @@ export {
   type KanbanColumnProps,
   type KanbanColumnData,
 } from './kanban/KanbanColumn.js';
-export { KanbanBoard, type KanbanBoardProps } from './kanban/KanbanBoard.js';
+export {
+  KanbanBoard,
+  KanbanBoardContext,
+  useKanbanBoard,
+  type KanbanBoardProps,
+  type KanbanBoardContextValue,
+} from './kanban/KanbanBoard.js';
 export { KanbanQuickAdd, type KanbanQuickAddProps } from './kanban/KanbanQuickAdd.js';
 export { KanbanContextMenu, type KanbanContextMenuProps } from './kanban/KanbanContextMenu.js';
+export {
+  KanbanToolbar,
+  type KanbanToolbarProps,
+  type KanbanFilter,
+} from './kanban/KanbanToolbar.js';
+export {
+  KanbanDetailDialog,
+  type KanbanDetailDialogProps,
+} from './kanban/KanbanDetailDialog.js';
+export {
+  KanbanEmptyColumn,
+  type KanbanEmptyColumnProps,
+} from './kanban/KanbanEmptyColumn.js';
+export {
+  KanbanProgress,
+  type KanbanProgressProps,
+} from './kanban/KanbanProgress.js';
+export {
+  KanbanCardBadges,
+  type KanbanCardBadgesProps,
+  type KanbanCardBadge,
+} from './kanban/KanbanCardBadges.js';
+export {
+  useKanbanSelection,
+  type UseKanbanSelectionApi,
+} from './kanban/useKanbanSelection.js';
 
 // ── goals (Sprint S6) ─────────────────────────────────────────────────────
 
@@ -286,6 +318,15 @@ export {
   type ActivityItem,
   type ActivityTone,
 } from './activity/ActivityFeed.js';
+export {
+  ActivityLane,
+  type ActivityLaneProps,
+  type ActivityLaneEvent,
+} from './activity/ActivityLane.js';
+export {
+  ActivityLanes,
+  type ActivityLanesProps,
+} from './activity/ActivityLanes.js';
 
 // ── memory (Sprint S7) ────────────────────────────────────────────────────
 
@@ -319,4 +360,10 @@ export {
   SettingsNav,
   type SettingsNavProps,
   type SettingsNavItem,
-} from './settings/SettingsNav.js';
+} from './settings/SettingsNav.js';
+
+// ── chat (Sprint S37, v9.3.0) ───────────────────────────────────────────
+
+export { readEventStream, type EventStreamHandlers, type EventStreamOptions } from './chat/EventStream.js';
+export { MessageBubble, EmptyTranscript, type MessageBubbleProps } from './chat/MessageBubble.js';
+export { ChatDrawer, type ChatDrawerProps } from './chat/ChatDrawer.js';

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

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { createContext, useContext, useState, type ReactNode } from 'react';
 import {
   DndContext,
   closestCorners,
@@ -16,7 +16,6 @@ import { cx } from '../utils/cx.js';
  *
  * The board owns drag state. It receives:
  *   - columns: definition + droppable ids
- *   - renderColumn: function that takes column data + isOver flag + children
  *   - onCardMove: invoked when a card moves between columns (or reorders within)
  *
  * For most cases, prefer using the higher-level `KanbanBoardSimple` wrapper
@@ -28,9 +27,36 @@ export interface KanbanBoardProps {
   onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string) => void;
   children: ReactNode;
   className?: string;
+  /** Set of selected card ids; passed down via context. */
+  selection?: ReadonlySet<string>;
+  /** Called when the user toggles the selection checkbox on a card. */
+  onSelectionChange?: (id: string, next: boolean) => void;
+  /** When true, all cards render their selection checkbox always-on. */
+  selectionMode?: boolean;
 }
 
-export function KanbanBoard({ columns, onCardMove, children, className }: KanbanBoardProps) {
+/**
+ * Context exposed to children of <KanbanBoard> so cards know about the
+ * selection state without prop-drilling through every column.
+ */
+export interface KanbanBoardContextValue {
+  selection: ReadonlySet<string>;
+  selectionMode: boolean;
+  onSelectionChange?: (id: string, next: boolean) => void;
+}
+
+export const KanbanBoardContext = createContext<KanbanBoardContextValue>({
+  selection: new Set(),
+  selectionMode: false,
+});
+
+/** Hook for descendants to read the board's selection state. */
+export function useKanbanBoard(): KanbanBoardContextValue {
+  return useContext(KanbanBoardContext);
+}
+
+export function KanbanBoard(props: KanbanBoardProps): JSX.Element {
+  const { columns, onCardMove, children, className, selection, onSelectionChange, selectionMode } = props;
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -53,31 +79,39 @@ export function KanbanBoard({ columns, onCardMove, children, className }: Kanban
   };
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCorners}
-      onDragStart={(e) => setActiveId(String(e.active.id))}
-      onDragEnd={handleDragEnd}
+    <KanbanBoardContext.Provider
+      value={{
+        selection: selection ?? new Set(),
+        selectionMode: selectionMode === true,
+        onSelectionChange,
+      }}
     >
-      <div
-        className={cx('v8-kanban-board', className)}
-        style={{
-          display: 'grid',
-          gridAutoFlow: 'column',
-          gridAutoColumns: 'minmax(320px, 1fr)',
-          gap: 'var(--space-4)',
-          padding: 'var(--space-4) var(--space-5)',
-          overflowX: 'auto',
-          overflowY: 'hidden',
-          height: '100%',
-          width: '100%',
-          alignItems: 'stretch',
-        }}
-        role="region"
-        aria-label="Kanban board"
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCorners}
+        onDragStart={(e) => setActiveId(String(e.active.id))}
+        onDragEnd={handleDragEnd}
       >
-        {children}
-      </div>
-    </DndContext>
+        <div
+          className={cx('v8-kanban-board', className)}
+          style={{
+            display: 'grid',
+            gridAutoFlow: 'column',
+            gridAutoColumns: 'minmax(320px, 1fr)',
+            gap: 'var(--space-4)',
+            padding: 'var(--space-4) var(--space-5)',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            height: '100%',
+            width: '100%',
+            alignItems: 'stretch',
+          }}
+          role="region"
+          aria-label="Kanban board"
+        >
+          {children}
+        </div>
+      </DndContext>
+    </KanbanBoardContext.Provider>
   );
 }

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

@@ -1,8 +1,11 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Calendar, MessageSquare, Paperclip, GitBranch } from 'lucide-react';
+import { Check } from 'lucide-react';
+import { Calendar, MessageSquare, Paperclip, GitBranch, Repeat, User as UserIcon } from 'lucide-react';
 import { cx } from '../utils/cx.js';
+import { KanbanProgress } from './KanbanProgress.js';
+import { KanbanCardBadges, type KanbanCardBadge } from './KanbanCardBadges.js';
 
 /**
  * KanbanCard — the primary surface of the v8 dashboard.
@@ -33,12 +36,28 @@ export interface KanbanCardData {
   attachments?: number;
   /** Branch name to show in the meta row. */
   branch?: string;
+  /** Assignee name (single). Rendered as a chip when set. */
+  assignee?: string;
   /** IDs of assigned agents/users; rendered as AvatarStack. */
   assignees?: readonly string[];
   /** Tone of the leading priority stripe. */
   accentTone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
   /** Custom badge / chip to render after the title. */
   badges?: ReactNode;
+  /** Live progress 0..100. */
+  progress?: number;
+  /** Current step description (rendered under the progress bar). */
+  currentStep?: string;
+  /** Optional badges array. */
+  cardBadges?: readonly KanbanCardBadge[];
+  /** Tags (rendered as small chips when no badges are provided). */
+  tags?: readonly string[];
+  /** Recurring task indicator. */
+  recurring?: boolean;
+  /** Number of subtasks. */
+  subtaskCount?: number;
+  /** Number of dependencies. */
+  dependencyCount?: number;
 }
 
 export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
@@ -48,6 +67,14 @@ export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'i
   isDragging?: boolean;
   /** Drag handlers from useSortable (omit to make the card non-draggable). */
   dragHandleProps?: Record<string, unknown>;
+  /** When true, the card is checked in the multi-select toolbar. */
+  selected?: boolean;
+  /** Indeterminate state (selection box between checked/unchecked). */
+  indeterminate?: boolean;
+  /** Called when the selection checkbox toggles. Omit to hide the checkbox. */
+  onSelectionChange?: (id: string, next: boolean) => void;
+  /** When true, render the selection checkbox even without hover. */
+  showSelection?: boolean;
 }
 
 const PRIORITY_FG: Record<KanbanPriority, string> = {
@@ -77,28 +104,122 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function K
   props,
   ref,
 ) {
-  const { card, variant = 'default', isDragging, dragHandleProps, className, style, ...rest } =
-    props;
+  const {
+    card,
+    variant = 'default',
+    isDragging,
+    dragHandleProps,
+    selected,
+    indeterminate,
+    onSelectionChange,
+    showSelection,
+    className,
+    style,
+    ...rest
+  } = props;
+
+  const showCheckbox = onSelectionChange !== undefined;
+
+  // Resolve which badges to render. Prefer caller-provided badges, else
+  // derive from the convenience props on `card`.
+  const derivedBadges: KanbanCardBadge[] = [];
+  if (card.cardBadges === undefined) {
+    if (card.recurring === true) {
+      derivedBadges.push({ label: 'Recurring', tone: 'info', icon: <Repeat size={10} aria-hidden="true" /> });
+    }
+    if (card.assignee) {
+      derivedBadges.push({
+        label: card.assignee,
+        tone: 'accent',
+        icon: <UserIcon size={10} aria-hidden="true" />,
+      });
+    }
+    if (card.subtaskCount !== undefined && card.subtaskCount > 0) {
+      derivedBadges.push({ label: `${card.subtaskCount} subtasks`, tone: 'neutral' });
+    }
+    if (card.dependencyCount !== undefined && card.dependencyCount > 0) {
+      derivedBadges.push({ label: `${card.dependencyCount} deps`, tone: 'warning' });
+    }
+    if (card.tags) {
+      for (const t of card.tags.slice(0, 3)) {
+        derivedBadges.push({ label: t, tone: 'neutral' });
+      }
+    }
+  }
+  const badges = card.cardBadges ?? derivedBadges;
 
   return (
     <div
       ref={ref}
       data-kanban-card-id={card.id}
-      className={cx('v8-kanban-card', `v8-kanban-card--${variant}`, isDragging && 'is-dragging', className)}
+      data-selected={selected === true ? 'true' : undefined}
+      className={cx(
+        'v8-kanban-card',
+        `v8-kanban-card--${variant}`,
+        isDragging && 'is-dragging',
+        selected === true && 'is-selected',
+        className,
+      )}
       style={{
         position: 'relative',
-        background: 'var(--surface-1)',
-        border: '1px solid var(--border)',
-        borderRadius: 'var(--radius-md)',
-        padding: 'var(--space-4) var(--space-4) var(--space-3)',
-        boxShadow: isDragging === true ? 'var(--shadow-3)' : 'var(--shadow-1)',
+        background: selected === true ? 'var(--surface-2)' : 'var(--surface-1)',
+        border: `1px solid ${selected === true ? 'var(--accent)' : 'var(--border)'}`,
+        borderRadius: 'var(--radius)',
+        padding: 'var(--space-3)',
+        boxShadow: isDragging === true ? 'var(--shadow-3)' : 'none',
         transform: isDragging === true ? 'rotate(1.5deg)' : undefined,
-        transition: 'box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out)',
+        transition:
+          'box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
         ...style,
       }}
       {...(dragHandleProps as Record<string, unknown>)}
       {...rest}
     >
+      {showCheckbox && (
+        <button
+          type="button"
+          role="checkbox"
+          aria-checked={indeterminate === true ? 'mixed' : selected === true}
+          aria-label={selected === true ? 'Deselect card' : 'Select card'}
+          onClick={(e) => {
+            // Stop the click from initiating a drag or bubbling up.
+            e.stopPropagation();
+            onSelectionChange?.(card.id, !(selected === true));
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+          style={{
+            position: 'absolute',
+            top: 6,
+            left: 6,
+            width: 16,
+            height: 16,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'var(--radius-sm)',
+            border: `1px solid ${selected === true ? 'var(--accent)' : 'var(--border-strong)'}`,
+            background: selected === true ? 'var(--accent)' : 'var(--surface-0)',
+            color: 'var(--fg-on-accent)',
+            cursor: 'pointer',
+            opacity: showSelection === true || selected === true ? 1 : 0,
+            zIndex: 2,
+          }}
+          className="v8-kanban-card__checkbox"
+        >
+          {selected === true && <Check size={10} aria-hidden="true" />}
+          {indeterminate === true && (
+            <span
+              aria-hidden="true"
+              style={{
+                width: 8,
+                height: 2,
+                background: 'var(--fg-on-accent)',
+                borderRadius: 1,
+              }}
+            />
+          )}
+        </button>
+      )}
       {/* Leading accent stripe — colored by priority or accentTone. */}
       {variant !== 'compact' && (
         <span
@@ -117,7 +238,16 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function K
           }}
         />
       )}
-      <div style={{ paddingLeft: variant !== 'compact' ? 'var(--space-2)' : 0 }}>
+      <div
+        style={{
+          paddingLeft:
+            showCheckbox
+              ? `calc(${variant !== 'compact' ? 'var(--space-2)' : '0'} + 18px)`
+              : variant !== 'compact'
+                ? 'var(--space-2)'
+                : 0,
+        }}
+      >
         <div
           style={{
             display: 'flex',
@@ -172,6 +302,20 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(function K
             {card.badges}
           </div>
         )}
+        {badges.length > 0 && (
+          <KanbanCardBadges badges={badges} />
+        )}
+        {card.progress !== undefined && (
+          <div style={{ marginTop: 'var(--space-2)' }}>
+            <KanbanProgress
+              value={card.progress}
+              label={`${Math.round(card.progress)}%`}
+              caption={card.currentStep}
+              tone={card.progress >= 100 ? 'success' : 'accent'}
+              layout={card.currentStep ? 'block' : 'inline'}
+            />
+          </div>
+        )}
         {variant !== 'compact' &&
           (card.due !== undefined ||
             card.comments !== undefined ||
@@ -244,4 +388,4 @@ export function useKanbanCardSortable(id: string) {
     isDragging: sortable.isDragging,
     style,
   };
-}
+}

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

@@ -57,12 +57,12 @@ export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function
       style={{
         display: 'flex',
         flexDirection: 'column',
-        minWidth: 320,
+        width: 280,
+        flexShrink: 0,
         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}
@@ -70,16 +70,11 @@ export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function
     >
       <header
         style={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 2,
           display: 'flex',
           alignItems: 'center',
           gap: 'var(--space-2)',
-          padding: 'var(--space-3) var(--space-4)',
+          padding: 'var(--space-3) var(--space-3)',
           borderBottom: '1px solid var(--border)',
-          background: 'color-mix(in oklch, var(--surface-0) 92%, transparent)',
-          backdropFilter: 'blur(8px)',
         }}
       >
         <span
@@ -170,10 +165,10 @@ export const KanbanColumn = forwardRef<HTMLElement, KanbanColumnProps>(function
         style={{
           flex: 1,
           minHeight: 0,
-          padding: 'var(--space-3) var(--space-3) var(--space-4)',
+          padding: 'var(--space-2)',
           display: 'flex',
           flexDirection: 'column',
-          gap: 'var(--space-3)',
+          gap: 'var(--space-2)',
           overflowY: 'auto',
           background: isOver ? 'color-mix(in oklch, var(--accent) 6%, transparent)' : 'transparent',
           transition: 'background var(--motion-fast) var(--ease-out)',

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

@@ -46,6 +46,8 @@ export interface KanbanContextMenuProps {
   canMoveLeft?: boolean;
   /** Whether "move right" is available (not the rightmost column). */
   canMoveRight?: boolean;
+  /** Optional card-specific items rendered between Move and Archive. */
+  extraItems?: ReactNode;
 }
 
 export function KanbanContextMenu(props: KanbanContextMenuProps) {
@@ -62,6 +64,7 @@ export function KanbanContextMenu(props: KanbanContextMenuProps) {
     onDelete,
     canMoveLeft = true,
     canMoveRight = true,
+    extraItems,
   } = props;
 
   return (
@@ -100,6 +103,7 @@ export function KanbanContextMenu(props: KanbanContextMenuProps) {
           Move to next column
           <kbd style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10 }}>→</kbd>
         </ContextMenuItem>
+        {extraItems}
         <ContextMenuSeparator />
         <ContextMenuItem leftIcon={<UserPlus size={14} aria-hidden="true" />} onSelect={onAssign}>
           Assign…