@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/mobile/components/MobileBottomSheet.tsx

@@ -1,182 +0,0 @@
-// src/mobile/components/MobileBottomSheet.tsx — slide-up bottom sheet for mobile.
-import { useEffect, useId, useRef, type PointerEvent as ReactPointerEvent } from 'react';
-import { X } from 'lucide-react';
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  actions?: React.ReactNode;
-  maxHeight?: string;
-};
-
-export function MobileBottomSheet({ open, onClose, title, children, actions, maxHeight = '85vh' }: Props) {
-  const sheetRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const titleId = useId();
-  const lastActiveRef = useRef<HTMLElement | null>(null);
-  const dragStartYRef = useRef<number | null>(null);
-  const dragDeltaRef = useRef(0);
-  const scrollLockYRef = useRef(0);
-
-  const getFocusable = () => {
-    return sheetRef.current?.querySelectorAll<HTMLElement>(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
-    ) ?? [];
-  };
-
-  // Close on ESC
-  useEffect(() => {
-    if (!open) return;
-    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-      if (e.key !== 'Tab') return;
-
-      const focusable = Array.from(getFocusable());
-      if (focusable.length === 0) {
-        e.preventDefault();
-        sheetRef.current?.focus();
-        return;
-      }
-
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-
-      if (e.shiftKey) {
-        if (!active || active === first || active === sheetRef.current) {
-          e.preventDefault();
-          last?.focus();
-        }
-        return;
-      }
-
-      if (active === last) {
-        e.preventDefault();
-        first?.focus();
-      }
-    };
-
-    window.addEventListener('keydown', onKey);
-    requestAnimationFrame(() => {
-      closeButtonRef.current?.focus() ?? sheetRef.current?.focus();
-    });
-
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      lastActiveRef.current?.focus();
-    };
-  }, [open, onClose]);
-
-  // Prevent body scroll when open
-  useEffect(() => {
-    if (open) {
-      scrollLockYRef.current = window.scrollY;
-      document.documentElement.style.overflow = 'hidden';
-      document.body.style.overflow = 'hidden';
-      document.body.style.position = 'fixed';
-      document.body.style.top = `-${scrollLockYRef.current}px`;
-      document.body.style.left = '0';
-      document.body.style.right = '0';
-      document.body.style.width = '100%';
-    } else {
-      document.documentElement.style.overflow = '';
-      document.body.style.overflow = '';
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
-      document.body.style.width = '';
-    }
-    return () => {
-      document.documentElement.style.overflow = '';
-      document.body.style.overflow = '';
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
-      document.body.style.width = '';
-      window.scrollTo(0, scrollLockYRef.current);
-    };
-  }, [open]);
-
-  if (!open) return null;
-
-  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (!e.isPrimary) return;
-    dragStartYRef.current = e.clientY;
-    dragDeltaRef.current = 0;
-    sheetRef.current?.setPointerCapture(e.pointerId);
-  };
-
-  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
-    if (dragStartYRef.current == null || !sheetRef.current) return;
-    const delta = Math.max(0, e.clientY - dragStartYRef.current);
-    dragDeltaRef.current = delta;
-    sheetRef.current.style.transform = `translateY(${delta}px)`;
-  };
-
-  const endDrag = (e?: ReactPointerEvent<HTMLDivElement>) => {
-    if (!sheetRef.current) return;
-    if (e && sheetRef.current.hasPointerCapture(e.pointerId)) {
-      sheetRef.current.releasePointerCapture(e.pointerId);
-    }
-    const delta = dragDeltaRef.current;
-    sheetRef.current.style.transform = '';
-    dragStartYRef.current = null;
-    dragDeltaRef.current = 0;
-    if (delta > 72) onClose();
-  };
-
-  return (
-    <div className="mobile-sheet-overlay" onClick={onClose}>
-      <div
-        ref={sheetRef}
-        className="mobile-sheet"
-        style={{ maxHeight }}
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal
-        aria-label={title ? undefined : 'Sheet'}
-        aria-labelledby={title ? titleId : undefined}
-        tabIndex={-1}
-      >
-        {/* Drag handle */}
-        <div
-          className="mobile-sheet-handle"
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={endDrag}
-          onPointerCancel={endDrag}
-          aria-hidden="true"
-        />
-
-        <div className="mobile-sheet-header">
-          {title ? <h3 id={titleId} className="mobile-sheet-title">{title}</h3> : <div />}
-          <button
-            ref={closeButtonRef}
-            type="button"
-            className="mobile-icon-btn"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            <X size={18} />
-          </button>
-        </div>
-
-        <div className="mobile-sheet-content">
-          {children}
-        </div>
-
-        {actions && (
-          <div className="mobile-sheet-actions">
-            {actions}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,64 +0,0 @@
-// src/mobile/components/MobileListItem.tsx — reusable list row for mobile.
-import { type ComponentType } from 'react';
-import { cx } from '../../ui/utils/cx';
-
-type Props = {
-  icon?: ComponentType<{ size?: number }>;
-  title: string;
-  meta?: string;
-  badge?: string | React.ReactNode;
-  badgeVariant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
-  onClick?: () => void;
-  arrow?: boolean;
-  className?: string;
-  status?: string;
-};
-
-export function MobileListItem({
-  icon: Icon,
-  title,
-  meta,
-  badge,
-  badgeVariant = 'default',
-  onClick,
-  arrow,
-  className,
-  status,
-}: Props) {
-  const Tag = onClick ? 'button' : 'div';
-
-  return (
-    <Tag
-      {...(onClick ? { type: 'button' as const } : {})}
-      className={cx('mobile-list-item', onClick && 'mobile-list-item-interactive', className)}
-      onClick={onClick}
-    >
-      {Icon && (
-        <div className="mobile-list-icon">
-          <Icon size={16} />
-        </div>
-      )}
-      {status && (
-        <div className="mobile-list-status-dot" data-status={status} />
-      )}
-      <div className="mobile-list-content">
-        <span className="mobile-list-title">{title}</span>
-        {meta && <span className="mobile-list-meta">{meta}</span>}
-      </div>
-      {badge && (
-        <span className={cx('mobile-list-badge', badgeVariant !== 'default' && `badge-${badgeVariant}`)}>
-          {badge}
-        </span>
-      )}
-      {arrow && <ChevronRight size={14} style={{ color: 'var(--text-dim)', flexShrink: 0 }} />}
-    </Tag>
-  );
-}
-
-function ChevronRight({ size, style }: { size: number; style?: React.CSSProperties }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={style}>
-      <polyline points="9 18 15 12 9 6" />
-    </svg>
-  );
-}

package/bizar-dash/src/web/mobile/components/MobileModal.tsx

@@ -1,123 +0,0 @@
-// src/mobile/components/MobileModal.tsx — full-screen mobile modal.
-import { useEffect, useId, useRef } from 'react';
-import { X } from 'lucide-react';
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  actions?: React.ReactNode;
-};
-
-export function MobileModal({ open, onClose, title, children, actions }: Props) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const lastActiveRef = useRef<HTMLElement | null>(null);
-  const titleId = useId();
-  const scrollLockYRef = useRef(0);
-
-  useEffect(() => {
-    if (!open) return;
-
-    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-
-    const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-      if (e.key !== 'Tab') return;
-
-      const focusable = Array.from(modalRef.current?.querySelectorAll<HTMLElement>(focusableSelector) ?? []);
-      if (focusable.length === 0) {
-        e.preventDefault();
-        modalRef.current?.focus();
-        return;
-      }
-
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-
-      if (e.shiftKey) {
-        if (!active || active === first || active === modalRef.current) {
-          e.preventDefault();
-          last?.focus();
-        }
-        return;
-      }
-
-      if (active === last) {
-        e.preventDefault();
-        first?.focus();
-      }
-    };
-
-    window.addEventListener('keydown', onKey);
-    scrollLockYRef.current = window.scrollY;
-    document.documentElement.style.overflow = 'hidden';
-    document.body.style.overflow = 'hidden';
-    document.body.style.position = 'fixed';
-    document.body.style.top = `-${scrollLockYRef.current}px`;
-    document.body.style.left = '0';
-    document.body.style.right = '0';
-    document.body.style.width = '100%';
-    requestAnimationFrame(() => {
-      closeButtonRef.current?.focus() ?? modalRef.current?.focus();
-    });
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      document.documentElement.style.overflow = '';
-      document.body.style.overflow = '';
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
-      document.body.style.width = '';
-      window.scrollTo(0, scrollLockYRef.current);
-      lastActiveRef.current?.focus();
-    };
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      className="mobile-modal-overlay"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={modalRef}
-        className="mobile-modal"
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal
-        aria-label={title ? undefined : 'Modal'}
-        aria-labelledby={title ? titleId : undefined}
-        tabIndex={-1}
-      >
-        <div className="mobile-modal-header">
-          {title ? <h2 id={titleId} className="mobile-modal-title">{title}</h2> : <div />}
-          <button
-            ref={closeButtonRef}
-            type="button"
-            className="mobile-icon-btn"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            <X size={20} />
-          </button>
-        </div>
-        <div className="mobile-modal-content">
-          {children}
-        </div>
-        {actions && (
-          <div className="mobile-modal-actions">
-            {actions}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/views/MobileActivity.tsx

@@ -1,273 +0,0 @@
-// src/mobile/views/MobileActivity.tsx — enhanced activity with filters, event detail, and snapshot submit hero.
-import { useEffect, useState } from 'react';
-import { RefreshCw, Bot, Activity as ActivityIcon, Pause, Play, Send } from 'lucide-react';
-import { api } from '../../lib/api';
-import { formatRelative } from '../../lib/utils';
-import type { ActivityItem, Snapshot } from '../../lib/types';
-import { MobileBottomSheet } from '../components/MobileBottomSheet';
-
-type Props = {
-  snapshot: Snapshot;
-  onRefresh: () => Promise<void>;
-};
-
-const EVENT_KINDS = ['all', 'tasks', 'agents', 'bg', 'artifacts', 'mods'] as const;
-type EventKind = typeof EVENT_KINDS[number];
-
-const KIND_LABELS: Record<string, string> = {
-  all: 'All',
-  tasks: 'Tasks',
-  agents: 'Agents',
-  bg: 'Background',
-  artifacts: 'Plans',
-  mods: 'Mods',
-};
-
-export function MobileActivity({ snapshot, onRefresh }: Props) {
-  const [events, setEvents] = useState<ActivityItem[]>(snapshot.overview?.recentActivity || []);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState<EventKind>('all');
-  const [paused, setPaused] = useState(false);
-  const [detail, setDetail] = useState<ActivityItem | null>(null);
-  const [submitText, setSubmitText] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  useEffect(() => {
-    if (snapshot.overview?.recentActivity) {
-      setEvents(snapshot.overview.recentActivity);
-      setLoading(false);
-    } else {
-      loadEvents();
-    }
-  }, [snapshot.overview]);
-
-  const loadEvents = async () => {
-    try {
-      const data = await api.get<Snapshot>('/snapshot');
-      setEvents(data.overview?.recentActivity || []);
-    } catch {
-      // best-effort
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const filtered = filter === 'all' ? events : events.filter((e) => {
-    if (filter === 'tasks') return e.kind?.startsWith('task');
-    if (filter === 'agents') return e.kind?.startsWith('agent');
-    if (filter === 'bg') return e.kind?.includes('bg') || e.kind?.includes('schedule');
-    if (filter === 'artifacts') return e.kind?.includes('artifacts');
-    if (filter === 'mods') return e.kind?.includes('mod');
-    return true;
-  });
-
-  const agents = snapshot.agents || [];
-  const tasks = snapshot.tasks || [];
-  const activeTasks = tasks.filter((t) => t.status === 'doing' || t.status === 'queued');
-  const doneTasks = tasks.filter((t) => t.status === 'done');
-
-  const handleSubmit = async () => {
-    if (!submitText.trim() || submitting) return;
-    setSubmitting(true);
-    try {
-      await api.post('/chat', { message: submitText.trim(), agent: 'odin' });
-      setSubmitText('');
-      await onRefresh().catch(() => undefined);
-      await loadEvents();
-    } catch {
-      // best-effort
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleRefresh = async () => {
-    await onRefresh().catch(() => undefined);
-    await loadEvents();
-  };
-
-  return (
-    <div className="mobile-view">
-      {/* Snapshot Submit Hero */}
-      <div className="mobile-submit-hero">
-        <textarea
-          className="mobile-submit-input"
-          placeholder="What needs to be done? Describe a task, bug, or refactor for Odin to artifacts…"
-          value={submitText}
-          onChange={(e) => setSubmitText(e.target.value)}
-          rows={2}
-        />
-        <div className="mobile-submit-actions">
-          <div className="mobile-submit-chips">
-            {['Implement feature', 'Fix bug', 'Refactor', 'Investigate', 'Write tests'].map((chip) => (
-              <button
-                key={chip}
-                type="button"
-                className="mobile-submit-chip"
-                onClick={() => setSubmitText((cur) => cur ? `${cur} ${chip}` : chip)}
-              >
-                {chip}
-              </button>
-            ))}
-          </div>
-          <button
-            type="button"
-            className="mobile-btn"
-            disabled={!submitText.trim() || submitting}
-            onClick={handleSubmit}
-          >
-            <Send size={14} /> Submit to Odin
-          </button>
-        </div>
-      </div>
-
-      {/* Quick stats */}
-      <div className="mobile-stats">
-        <div className="mobile-stat">
-          <div className="mobile-stat-value">{agents.length}</div>
-          <div className="mobile-stat-label">Agents</div>
-        </div>
-        <div className="mobile-stat">
-          <div className="mobile-stat-value">{activeTasks.length}</div>
-          <div className="mobile-stat-label">Active</div>
-        </div>
-        <div className="mobile-stat">
-          <div className="mobile-stat-value">{doneTasks.length}</div>
-          <div className="mobile-stat-label">Done</div>
-        </div>
-        <div className="mobile-stat">
-          <div className="mobile-stat-value">{snapshot.artifacts.length || 0}</div>
-          <div className="mobile-stat-label">Plans</div>
-        </div>
-      </div>
-
-      {loading && events.length === 0 && (
-        <div className="mobile-loading mobile-loading-inline">
-          <p>Loading activity…</p>
-        </div>
-      )}
-
-      {/* Filter chips */}
-      <div className="mobile-activity-header">
-        <h3 className="mobile-section-title" style={{ margin: 0 }}>Recent Activity</h3>
-        <div style={{ display: 'flex', gap: 4 }}>
-          <button
-            type="button"
-            className="mobile-icon-btn"
-            onClick={() => setPaused((v) => !v)}
-            aria-label={paused ? 'Resume' : 'Pause'}
-          >
-            {paused ? <Play size={14} /> : <Pause size={14} />}
-          </button>
-          <button type="button" className="mobile-icon-btn" onClick={handleRefresh} aria-label="Refresh">
-            <RefreshCw size={14} />
-          </button>
-        </div>
-      </div>
-
-      <div className="mobile-search-scopes">
-        {EVENT_KINDS.map((k) => (
-          <button
-            key={k}
-            type="button"
-            className={`mobile-scope-chip ${filter === k ? 'active' : ''}`}
-            onClick={() => setFilter(k)}
-          >
-            {KIND_LABELS[k]}
-          </button>
-        ))}
-      </div>
-
-      {/* Active agents */}
-      {agents.length > 0 && (
-        <section className="mobile-section">
-          <h3 className="mobile-section-title"><Bot size={14} /> Agents</h3>
-          <div className="mobile-card-list">
-            {agents.slice(0, 6).map((a) => (
-              <div key={a.name} className="mobile-agent-card">
-                <div className="mobile-agent-dot" data-status={a.status || 'idle'} />
-                <div className="mobile-agent-info">
-                  <span className="mobile-agent-name">{a.name}</span>
-                  <span className="mobile-agent-meta">{a.status || 'idle'}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Event feed */}
-      {!paused && filtered.length > 0 && (
-        <section className="mobile-section">
-          <div className="mobile-card-list">
-            {filtered.slice(0, 30).map((e, i) => (
-              <button
-                key={`${e.ts}-${e.kind}-${i}`}
-                type="button"
-                className="mobile-event-item"
-                onClick={() => setDetail(e)}
-              >
-                <span className="mobile-event-kind" data-kind={e.kind}>{KIND_LABELS[e.kind as keyof typeof KIND_LABELS] || e.kind}</span>
-                <span className="mobile-event-msg">
-                  {renderEventMessage(e)}
-                </span>
-                <span className="mobile-event-time">{formatRelative(e.ts)}</span>
-              </button>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {!paused && filtered.length === 0 && events.length > 0 && (
-        <div className="mobile-empty">
-          <ActivityIcon size={40} />
-          <p>No matching activity.</p>
-          <p className="muted">Try a different filter.</p>
-        </div>
-      )}
-
-      {/* Event detail sheet */}
-      {detail && (
-        <MobileBottomSheet
-          open={true}
-          onClose={() => setDetail(null)}
-          title={KIND_LABELS[detail.kind as keyof typeof KIND_LABELS] || detail.kind}
-        >
-          <div className="mobile-agent-detail-meta">
-            <div className="mobile-task-detail-row"><span>Kind</span><span>{detail.kind}</span></div>
-            <div className="mobile-task-detail-row"><span>Time</span><span>{new Date(detail.ts).toLocaleString()}</span></div>
-            {Object.entries(detail)
-              .filter(([k]) => !['ts', 'kind'].includes(k))
-              .map(([k, v]) => (
-                <div key={k} className="mobile-task-detail-row">
-                  <span>{k}</span>
-                  <span style={{ fontSize: 12, maxWidth: 200, wordBreak: 'break-all' }}>
-                    {typeof v === 'object' ? JSON.stringify(v) : String(v)}
-                  </span>
-                </div>
-              ))}
-          </div>
-        </MobileBottomSheet>
-      )}
-
-      {/* Empty state */}
-      {agents.length === 0 && activeTasks.length === 0 && (
-        <div className="mobile-empty">
-          <ActivityIcon size={40} />
-          <p>No activity yet.</p>
-          <p className="muted">Start a task or chat to see things here.</p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function renderEventMessage(e: ActivityItem): string {
-  const k = e.kind || '';
-  if (k.includes('task')) return `Task: ${e.title || e.id || 'updated'}`;
-  if (k.includes('agent')) return `Agent: ${e.name || 'status changed'}`;
-  if (k.includes('artifacts')) return `Plan: ${e.slug || 'changed'}`;
-  if (k.includes('mod')) return `Mod: ${e.name || 'changed'}`;
-  if (k.includes('schedule')) return `Schedule: ${e.name || 'triggered'}`;
-  return JSON.stringify(e).slice(0, 80);
-}