@polderlabs/bizar 3.23.1 → 4.2.0

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

@@ -0,0 +1,88 @@
+// src/components/KillConfirmDialog.tsx — confirmation dialog for killing bg instances.
+// Provides both a JSX component and a convenience `openKillConfirmDialog` function.
+
+import { Button } from './Button';
+import type { ModalApi } from './Modal';
+
+export type KillConfirmDialogProps = {
+  instanceId: string;
+  instanceName?: string;
+  onConfirm: () => void | Promise<void>;
+  onClose: () => void;
+};
+
+/**
+ * Render inline inside a modal body. Usage:
+ *
+ *   modal.open({
+ *     title: 'Kill background instance?',
+ *     children: (
+ *       <KillConfirmDialog
+ *         instanceId="bgr_abc"
+ *         onConfirm={async () => { await killIt(); modal.close(); }}
+ *         onClose={() => modal.close()}
+ *       />
+ *     ),
+ *   });
+ */
+export function KillConfirmDialog({ instanceId, instanceName, onConfirm, onClose }: KillConfirmDialogProps) {
+  return (
+    <div>
+      <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
+        Instance <code>{instanceId}</code>
+        {instanceName ? <> ({instanceName})</> : null} will be terminated.
+        This cannot be undone.
+      </p>
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <Button variant="ghost" onClick={onClose}>Cancel</Button>
+        <Button
+          variant="danger"
+          onClick={async () => {
+            await onConfirm();
+            onClose();
+          }}
+        >
+          Kill
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Convenience wrapper: open a kill-confirmation modal programmatically.
+ * Calls `DELETE /api/background/${instanceId}` on confirm and shows a toast.
+ */
+export function openKillConfirmDialog(
+  modal: ModalApi,
+  toast: { success: (msg: string, duration?: number) => void; error: (msg: string) => void },
+  instanceId: string,
+  instanceName?: string,
+  onSuccess?: () => void,
+) {
+  modal.open({
+    title: `Kill instance?`,
+    width: 400,
+    children: (
+      <KillConfirmDialog
+        instanceId={instanceId}
+        instanceName={instanceName}
+        onConfirm={async () => {
+          try {
+            const r = await fetch(`/api/background/${encodeURIComponent(instanceId)}`, { method: 'DELETE' });
+            const data = await r.json();
+            if (data.ok) {
+              toast.success(`Instance ${instanceId} killed.`);
+              onSuccess?.();
+            } else {
+              toast.error(`Kill failed: ${data.error || 'unknown error'}`);
+            }
+          } catch (err) {
+            toast.error(`Kill failed: ${(err as Error).message}`);
+          }
+        }}
+        onClose={() => modal.close()}
+      />
+    ),
+  });
+}

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

@@ -0,0 +1,215 @@
+// 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

@@ -0,0 +1,241 @@
+// 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';
+
+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.
+      // eslint-disable-next-line no-console
+      console.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>
+  );
+}