@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/components/Modal.tsx

@@ -1,215 +0,0 @@
-// src/components/Modal.tsx — modal context + provider + portal.
-
-import {
-  createContext,
-  useId,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-
-export type ModalProps = {
-  title?: string;
-  children: ReactNode;
-  footer?: ReactNode;
-  onClose?: () => void;
-  width?: number;
-};
-
-export type ModalApi = {
-  open: (props: ModalProps) => string;
-  close: (id?: string) => void;
-  isModalOpen: boolean;
-};
-
-const ModalContext = createContext<ModalApi | null>(null);
-
-const FOCUSABLE_SELECTOR = [
-  'button:not([disabled])',
-  '[href]',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(', ');
-
-export function useModal(): ModalApi {
-  const ctx = useContext(ModalContext);
-  if (!ctx) {
-    return { open: () => '', close: () => undefined, isModalOpen: false };
-  }
-  return ctx;
-}
-
-type OpenModal = ModalProps & { id: string };
-
-export function ModalProvider({ children }: { children: ReactNode }) {
-  const [stack, setStack] = useState<OpenModal[]>([]);
-
-  const close = useCallback((id?: string) => {
-    setStack((cur) => {
-      if (!id) return cur.slice(0, -1);
-      const idx = cur.findIndex((m) => m.id === id);
-      if (idx === -1) return cur;
-      // close only the top-most matching
-      if (idx !== cur.length - 1) return cur;
-      return cur.slice(0, -1);
-    });
-  }, []);
-
-  const open = useCallback((props: ModalProps) => {
-    const id = `m${Math.random().toString(36).slice(2, 9)}`;
-    setStack((cur) => [...cur, { ...props, id }]);
-    return id;
-  }, []);
-
-  // Escape key — close the topmost
-  useEffect(() => {
-    if (stack.length === 0) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        close();
-      }
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [stack.length, close]);
-
-  return (
-    <ModalContext.Provider value={{ open, close, isModalOpen: stack.length > 0 }}>
-      {children}
-      {typeof document !== 'undefined' &&
-        createPortal(
-          <div className="modal-stack" aria-hidden={stack.length === 0}>
-            {stack.map((m, idx) => (
-              <ModalShell
-                key={m.id}
-                modal={m}
-                onClose={() => {
-                  m.onClose?.();
-                  close(m.id);
-                }}
-                depth={idx}
-              />
-            ))}
-          </div>,
-          document.body,
-        )}
-    </ModalContext.Provider>
-  );
-}
-
-function ModalShell({
-  modal,
-  onClose,
-  depth,
-}: {
-  modal: OpenModal;
-  onClose: () => void;
-  depth: number;
-}) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
-  const titleId = useId();
-
-  const getFocusableElements = (): HTMLElement[] => {
-    const root = modalRef.current;
-    if (!root) return [];
-    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
-      (el) => !el.hasAttribute('disabled') && el.tabIndex !== -1,
-    );
-  };
-
-  useEffect(() => {
-    previousFocusRef.current = document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null;
-    const focusable = getFocusableElements();
-    (focusable[0] ?? modalRef.current)?.focus();
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Tab') return;
-      const focusableElements = getFocusableElements();
-      if (focusableElements.length === 0) {
-        e.preventDefault();
-        modalRef.current?.focus();
-        return;
-      }
-
-      const first = focusableElements[0];
-      const last = focusableElements[focusableElements.length - 1];
-      const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-
-      if (e.shiftKey) {
-        if (!active || active === first || !modalRef.current?.contains(active)) {
-          e.preventDefault();
-          last.focus();
-        }
-        return;
-      }
-
-      if (!active || active === last || !modalRef.current?.contains(active)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-
-    document.addEventListener('keydown', onKeyDown);
-    return () => {
-      document.removeEventListener('keydown', onKeyDown);
-      const previous = previousFocusRef.current;
-      if (previous && previous.isConnected) previous.focus();
-    };
-  }, []);
-
-  // v3.3.0 — Backdrop click stops propagation. This stops a click on
-  // the dim area from bubbling to the document/App level where it
-  // could otherwise be misread by the digit-key shortcut handler
-  // (the click that closes the modal would otherwise leave focus on
-  // <body>, and any subsequent accidental digit press would fire
-  // setActiveTab("overview")). The click itself only fires onClose()
-  // when the user actually clicked the backdrop, not a child.
-  return (
-    <div
-      className="modal-backdrop"
-      onClick={(e) => {
-        e.stopPropagation();
-        if (e.target === e.currentTarget) onClose();
-      }}
-      style={depth > 0 ? { background: 'rgba(0,0,0,0.4)' } : undefined}
-    >
-      <div
-        ref={modalRef}
-        className="modal"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={modal.title ? titleId : undefined}
-        tabIndex={-1}
-        onClick={(e) => e.stopPropagation()}
-        style={modal.width ? { maxWidth: modal.width } : undefined}
-      >
-        {modal.title && (
-          <header className="modal-header">
-            <h2 id={titleId} className="modal-title">{modal.title}</h2>
-            <button
-              type="button"
-              className="icon-btn"
-              aria-label="Close"
-              onClick={onClose}
-            >
-              <X size={16} />
-            </button>
-          </header>
-        )}
-        <div className="modal-body">{modal.children}</div>
-        {modal.footer && <footer className="modal-footer">{modal.footer}</footer>}
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/components/Notifications.tsx

@@ -1,242 +0,0 @@
-// src/components/Notifications.tsx — v3.3.0 bell icon + dropdown panel.
-
-import { useEffect, useRef, useState } from 'react';
-import { Bell, Check, X, Info, AlertTriangle, AlertCircle, CheckCircle2 } from 'lucide-react';
-import { Button } from './Button';
-import { useToast } from './Toast';
-import { api } from '../lib/api';
-import { cn, formatRelative } from '../lib/utils';
-import type { Notification, NotificationStats, WsMessage } from '../lib/types';
-import { logger } from '../lib/logger';
-
-const ICONS: Record<string, typeof Info> = {
-  info: Info,
-  success: CheckCircle2,
-  warning: AlertTriangle,
-  error: AlertCircle,
-};
-
-type Props = {
-  /** Setter for unread count so the rest of the app can react. */
-  onCountChange?: (unread: number) => void;
-  /** Optional hook to subscribe to incoming WS messages. */
-  wsSubscribe?: (cb: (msg: WsMessage) => void) => () => void;
-};
-
-export function Notifications({ onCountChange, wsSubscribe }: Props) {
-  const toast = useToast();
-  const [open, setOpen] = useState(false);
-  const [items, setItems] = useState<Notification[]>([]);
-  const [stats, setStats] = useState<NotificationStats | null>(null);
-  const [loading, setLoading] = useState(false);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const unreadRef = useRef(0);
-
-  const reload = async () => {
-    try {
-      setLoading(true);
-      const r = await api.get<{ notifications: Notification[]; stats: NotificationStats }>(
-        '/notifications?limit=200',
-      );
-      setItems(r.notifications || []);
-      setStats(r.stats || null);
-      unreadRef.current = r.stats?.unread || 0;
-      onCountChange?.(unreadRef.current);
-    } catch (err) {
-      // Soft-fail: the bell just shows no items.
-      
-      logger.warn('[notifications] reload failed:', (err as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    reload();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Subscribe to incoming notification:new events.
-  useEffect(() => {
-    if (!wsSubscribe) return;
-    const off = wsSubscribe((msg) => {
-      if (msg.type === 'notification:new') {
-        const incoming = msg.notification;
-        setItems((cur) => [incoming, ...cur.filter((n) => n.id !== incoming.id)]);
-        // Bump unread count.
-        if (!incoming.read) {
-          unreadRef.current += 1;
-          setStats((cur) =>
-            cur ? { ...cur, unread: (cur.unread || 0) + 1 } : { total: 1, unread: 1, lastTs: incoming.ts, counts: { [incoming.severity || 'info']: 1 } },
-          );
-          onCountChange?.(unreadRef.current);
-        }
-      } else if (msg.type === 'notifications:change') {
-        // External change (mark-all-read, etc.) — refresh from server.
-        reload();
-      }
-    });
-    return off;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [wsSubscribe]);
-
-  // Close the panel on outside click.
-  useEffect(() => {
-    if (!open) return;
-    const onDocClick = (e: MouseEvent) => {
-      if (!rootRef.current) return;
-      if (!rootRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('mousedown', onDocClick);
-    document.addEventListener('keydown', onKeyDown);
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('keydown', onKeyDown);
-    };
-  }, [open]);
-
-  const onMarkAllRead = async () => {
-    try {
-      await api.post('/notifications/read-all', {});
-      setItems((cur) => cur.map((n) => ({ ...n, read: true })));
-      setStats((cur) => (cur ? { ...cur, unread: 0 } : cur));
-      unreadRef.current = 0;
-      onCountChange?.(0);
-      toast.success('All notifications marked as read.', 1500);
-    } catch (err) {
-      toast.error(`Failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onMarkRead = async (id: string) => {
-    try {
-      await api.post(`/notifications/${encodeURIComponent(id)}/read`, {});
-      setItems((cur) => cur.map((n) => (n.id === id ? { ...n, read: true } : n)));
-      setStats((cur) => (cur ? { ...cur, unread: Math.max(0, (cur.unread || 1) - 1) } : cur));
-      unreadRef.current = Math.max(0, unreadRef.current - 1);
-      onCountChange?.(unreadRef.current);
-    } catch (err) {
-      toast.error(`Failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onRemove = async (id: string) => {
-    try {
-      await api.del(`/notifications/${encodeURIComponent(id)}`);
-      setItems((cur) => {
-        const removed = cur.find((n) => n.id === id);
-        if (removed && !removed.read) {
-          unreadRef.current = Math.max(0, unreadRef.current - 1);
-          setStats((statsCur) => (statsCur ? { ...statsCur, unread: Math.max(0, statsCur.unread - 1) } : statsCur));
-          onCountChange?.(unreadRef.current);
-        }
-        return cur.filter((n) => n.id !== id);
-      });
-    } catch (err) {
-      toast.error(`Failed: ${(err as Error).message}`);
-    }
-  };
-
-  const unread = stats?.unread || 0;
-
-  return (
-    <div className="notifications-root" ref={rootRef}>
-      <button
-        type="button"
-        className={cn('topbar-icon-btn notifications-bell', open && 'is-open')}
-        onClick={() => setOpen((v) => !v)}
-        title="Notifications"
-        aria-label="Notifications"
-        aria-haspopup="true"
-        aria-expanded={open}
-      >
-        <Bell size={16} />
-        {unread > 0 && <span className="notifications-badge">{unread > 99 ? '99+' : unread}</span>}
-      </button>
-      {open && (
-        <div className="notifications-panel" role="dialog" aria-label="Notifications">
-          <header className="notifications-panel-head">
-            <div>
-              <strong>Notifications</strong>
-              {unread > 0 && <span className="muted text-sm"> · {unread} unread</span>}
-            </div>
-            <div className="notifications-panel-head-actions">
-              <Button size="sm" variant="ghost" onClick={onMarkAllRead} disabled={unread === 0}>
-                <Check size={12} /> Mark all read
-              </Button>
-              <button
-                type="button"
-                className="icon-btn"
-                onClick={() => setOpen(false)}
-                aria-label="Close"
-                title="Close"
-              >
-                <X size={14} />
-              </button>
-            </div>
-          </header>
-          <div className="notifications-list">
-            {loading && items.length === 0 ? (
-              <div className="notifications-empty muted">Loading…</div>
-            ) : items.length === 0 ? (
-              <div className="notifications-empty muted">No notifications yet.</div>
-            ) : (
-              items.map((n) => {
-                const Icon = ICONS[n.severity] || Info;
-                return (
-                  <div
-                    key={n.id}
-                    className={cn('notification-item', !n.read && 'is-unread', `severity-${n.severity}`)}
-                  >
-                    <Icon size={14} className={`notification-icon severity-${n.severity}`} />
-                    <div className="notification-body">
-                      {n.title && <div className="notification-title">{n.title}</div>}
-                      <div className="notification-msg">{n.message}</div>
-                      <div className="notification-meta muted">
-                        <span className="mono">{n.source}</span>
-                        <span>·</span>
-                        <span>{formatRelative(n.ts)}</span>
-                      </div>
-                    </div>
-                    <div className="notification-actions">
-                      {!n.read && (
-                        <button
-                          type="button"
-                          className="icon-btn"
-                          onClick={() => onMarkRead(n.id)}
-                          title="Mark as read"
-                          aria-label="Mark as read"
-                        >
-                          <Check size={12} />
-                        </button>
-                      )}
-                      <button
-                        type="button"
-                        className="icon-btn icon-btn-danger"
-                        onClick={() => onRemove(n.id)}
-                        title="Remove"
-                        aria-label="Remove"
-                      >
-                        <X size={12} />
-                      </button>
-                    </div>
-                  </div>
-                );
-              })
-            )}
-          </div>
-          <footer className="notifications-panel-foot">
-            <span className="muted text-sm">
-              {stats ? `${stats.total} total · last ${formatRelative(stats.lastTs || new Date().toISOString())}` : ''}
-            </span>
-          </footer>
-        </div>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/components/ScheduleTemplateCard.tsx

@@ -1,72 +0,0 @@
-// src/components/ScheduleTemplateCard.tsx — template preview card for the Schedules Templates tab.
-
-import { Card, CardTitle, CardMeta } from './Card';
-import { Button } from './Button';
-
-export type ScheduleTemplate = {
-  id: string;
-  name: string;
-  description: string;
-  type: 'cron' | 'interval' | 'once' | 'webhook';
-  schedule?: string;
-  intervalMs?: number;
-  action: {
-    type: 'command' | 'agent' | 'webhook';
-    target?: string;
-    prompt?: string;
-    method?: string;
-  };
-  tags?: string[];
-  source?: string;
-  templateFile?: string;
-};
-
-type Props = {
-  template: ScheduleTemplate;
-  onUse: (template: ScheduleTemplate) => void;
-};
-
-function formatSchedule(template: ScheduleTemplate): string {
-  if (template.type === 'cron' && template.schedule) {
-    return `cron: ${template.schedule}`;
-  }
-  if (template.type === 'interval') {
-    const ms = template.intervalMs || 0;
-    const secs = ms / 1000;
-    if (secs >= 3600) return `every ${secs / 3600}h`;
-    if (secs >= 60) return `every ${secs / 60}m`;
-    return `every ${secs}s`;
-  }
-  return template.type;
-}
-
-export function ScheduleTemplateCard({ template, onUse }: Props) {
-  return (
-    <Card className="schedule-template-card">
-      <div className="schedule-template-header">
-        <CardTitle>{template.name}</CardTitle>
-        {template.tags && template.tags.length > 0 && (
-          <div className="schedule-template-tags">
-            {template.tags.map((tag) => (
-              <span key={tag} className="tag">{tag}</span>
-            ))}
-          </div>
-        )}
-      </div>
-      <CardMeta>{template.description}</CardMeta>
-      <div className="schedule-template-summary">
-        <code>{formatSchedule(template)}</code>
-        {' · '}
-        <code>{template.action.type}</code>
-      </div>
-      <Button
-        variant="secondary"
-        size="sm"
-        onClick={() => onUse(template)}
-        aria-label={`Use template: ${template.name}`}
-      >
-        Use this template
-      </Button>
-    </Card>
-  );
-}

package/bizar-dash/src/web/components/ScreenshotCapture.tsx

@@ -1,138 +0,0 @@
-// src/web/components/ScreenshotCapture.tsx — v5.0.0
-//
-// Uses browser's getDisplayMedia() to capture a screen, window, or browser tab.
-// Returns a blob URL for preview and uploads to /api/ocr/process for text extraction.
-
-import { useState, useCallback } from 'react';
-import { Camera, Loader2 } from 'lucide-react';
-import { Button } from './Button';
-import { Card, CardTitle } from './Card';
-import { useToast } from './Toast';
-import { api } from '../lib/api';
-
-export type ScreenshotCaptureProps = {
-  onTextExtracted?: (text: string, notePath: string) => void;
-};
-
-export function ScreenshotCapture({ onTextExtracted }: ScreenshotCaptureProps) {
-  const toast = useToast();
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [processing, setProcessing] = useState(false);
-  const [capturing, setCapturing] = useState(false);
-
-  const capture = useCallback(async () => {
-    setCapturing(true);
-    try {
-      const stream = await navigator.mediaDevices.getDisplayMedia({
-        video: { mediaSource: 'screen' } as MediaTrackConstraints,
-      });
-      const video = document.createElement('video');
-      video.srcObject = stream;
-      await video.play();
-
-      const canvas = document.createElement('canvas');
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) {
-        toast.error('Failed to get canvas context');
-        return;
-      }
-      ctx.drawImage(video, 0, 0);
-
-      // Stop all tracks
-      stream.getTracks().forEach((t) => t.stop());
-      video.remove();
-
-      canvas.toBlob(async (blob) => {
-        if (!blob) {
-          toast.error('Failed to capture screenshot');
-          return;
-        }
-        const url = URL.createObjectURL(blob);
-        setImageUrl(url);
-        await processImage(blob);
-      }, 'image/png');
-    } catch (err) {
-      if ((err as Error).name !== 'NotAllowedError') {
-        toast.error(`Capture failed: ${(err as Error).message}`);
-      }
-      // NotAllowedError = user cancelled the picker — no toast needed
-    } finally {
-      setCapturing(false);
-    }
-  }, [toast]);
-
-  const processImage = useCallback(async (blob: Blob) => {
-    setProcessing(true);
-    try {
-      const reader = new FileReader();
-      const base64 = await new Promise<string>((resolve, reject) => {
-        reader.onload = () => {
-          const result = reader.result as string;
-          // Strip data:image/png;base64, prefix for API
-          const b64 = result.includes(',') ? result.split(',')[1] : result;
-          resolve(b64);
-        };
-        reader.onerror = () => reject(new Error('FileReader failed'));
-        reader.readAsDataURL(blob);
-      });
-
-      const r = await api.post<{ ok: boolean; text: string; notePath: string }>('/ocr/process', {
-        image: base64,
-        lang: 'eng',
-      });
-
-      if (r.ok) {
-        toast.success('Text extracted from screenshot');
-        onTextExtracted?.(r.text, r.notePath);
-      }
-    } catch (err) {
-      toast.error(`OCR failed: ${(err as Error).message}`);
-    } finally {
-      setProcessing(false);
-    }
-  }, [toast, onTextExtracted]);
-
-  const dismiss = useCallback(() => {
-    setImageUrl(null);
-  }, []);
-
-  return (
-    <Card variant="outlined" className="screenshot-capture-card">
-      <CardTitle><Camera size={14} /> Screenshot Capture</CardTitle>
-
-      <div className="screenshot-capture-body">
-        {!imageUrl ? (
-          <div className="screenshot-capture-empty">
-            <Camera size={32} className="muted" />
-            <p className="muted text-sm">Capture your screen to extract text via OCR.</p>
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={capture}
-              disabled={capturing}
-            >
-              {capturing ? <Loader2 size={12} className="spinner" /> : <Camera size={12} />}
-              {capturing ? 'Selecting…' : 'Capture Screen'}
-            </Button>
-          </div>
-        ) : (
-          <div className="screenshot-capture-preview">
-            <img src={imageUrl} alt="Captured screenshot" className="screenshot-capture-img" />
-            <div className="screenshot-capture-actions">
-              {processing && (
-                <span className="text-sm muted">
-                  <Loader2 size={12} className="spinner" /> Extracting text…
-                </span>
-              )}
-              <Button variant="ghost" size="sm" onClick={dismiss} disabled={processing}>
-                Dismiss
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-    </Card>
-  );
-}