@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/Mods/ModsView.tsx

@@ -0,0 +1,348 @@
+/**
+ * v8/views/Mods/ModsView.tsx — Sprint S42, v9.3.0.
+ *
+ * Two-section mod manager:
+ *  - Installed (GET /api/mods): list with enable toggle (PUT
+ *    /api/mods/:id {enabled}) and inline-confirm Uninstall (DELETE
+ *    /api/mods/:id). Upgrade button if registry reports a newer
+ *    version (POST /api/mods/:id/upgrade).
+ *  - Registry (GET /api/mods/registry): list of available mods from
+ *    the public registry, with Install button for un-installed ones.
+ *
+ * Install Sheet accepts either `path` (local) or `id` (registry).
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Boxes, Download, FileEdit, Plus, Power, PowerOff, RefreshCcw, RotateCcw, Trash2, Upload, ArrowUpCircle } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { ListHeader } from '../../ui/data/ListHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface Mod {
+  id: string;
+  name?: string;
+  version?: string;
+  enabled?: boolean;
+  description?: string;
+  installed?: boolean;
+  installedVersion?: string | null;
+  upgradeAvailable?: string | null;
+  latest?: string;
+}
+
+interface RegistryResponse {
+  registry?: { version?: number; updatedAt?: string; source?: string };
+  mods?: Mod[];
+}
+
+export function ModsView(): JSX.Element {
+  const payload = useFetch<{ mods: Mod[] }>('/api/mods');
+  const registryPayload = useFetch<RegistryResponse>('/api/mods/registry');
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+  const [installing, setInstalling] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mods = useMemo<Mod[]>(() => payload.data?.mods ?? [], [payload.data]);
+  const registryMods = useMemo<Mod[]>(() => registryPayload.data?.mods ?? [], [registryPayload.data]);
+  const refresh = useCallback(() => { void payload.refetch(); void registryPayload.refetch(); }, [payload, registryPayload]);
+
+  const drop = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/mods/${id}`, { method: 'DELETE' });
+      setConfirmDelete(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const toggle = async (id: string, enabled: boolean): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/mods/${id}`, { method: 'PUT', body: { enabled } });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const upgrade = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/mods/${id}/upgrade`, { method: 'POST' });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const reinstallInstructions = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/mods/${id}/instructions/reinstall`, { method: 'POST' });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const editModFile = async (id: string): Promise<void> => {
+    const content = window.prompt(`Edit mod file content for ${id} (JSON or YAML)`);
+    if (content === null) return;
+    setError(null);
+    try {
+      await fetchJson(`/api/mods/${id}/mod-file/content`, { method: 'PUT', body: { content } });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  return (
+    <Stack gap={4} data-testid="mods-view">
+      <ViewHeader
+        title="Mods"
+        description="Installed + registry-installed mods. Each mod ships its own UI view(s)."
+        actions={
+          <Inline align="center" gap={2}>
+            {error !== null && (
+              <span role="alert" data-testid="mods-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+                {error}
+              </span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="mods-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="primary" onClick={() => setInstalling(true)} data-testid="mods-install">
+              <Plus size={14} aria-hidden /> Install
+            </Button>
+          </Inline>
+        }
+      />
+      <ListHeader title="Installed" count={mods.length} testid="mods-list-header" />
+
+      <Card variant="default">
+        <CardBody>
+          <strong style={{ fontSize: 'var(--fs-13)' }}>Installed ({mods.length})</strong>
+          {payload.loading && mods.length === 0 ? (
+            <Stack gap={1} style={{ marginTop: 'var(--space-2)' }}>
+              <Skeleton style={{ height: 40 }} />
+            </Stack>
+          ) : mods.length === 0 ? (
+            <EmptyState icon={<Boxes size={28} aria-hidden />} title="No mods installed" description="Install one from the registry or a local path." />
+          ) : (
+            <Stack gap={1} style={{ marginTop: 'var(--space-2)' }}>
+              {mods.map((m) => {
+                const isConfirming = confirmDelete === m.id;
+                const registryMatch = registryMods.find((r) => r.id === m.id);
+                const upgradeTarget = registryMatch?.upgradeAvailable ?? null;
+                return (
+                  <div
+                    key={m.id}
+                    data-testid={`mod-row-${m.id}`}
+                    style={{
+                      padding: 'var(--space-2)',
+                      border: '1px solid var(--border)',
+                      borderRadius: 'var(--radius-sm)',
+                      background: 'var(--surface-0)',
+                    }}
+                  >
+                    <Inline align="center" justify="between" gap={2}>
+                      <Stack gap={0} style={{ minWidth: 0 }}>
+                        <Inline align="center" gap={2}>
+                          <strong>{m.name || m.id}</strong>
+                          <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{m.id}</code>
+                          {m.version && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>v{m.version}</span>}
+                          {m.enabled === false && (
+                            <span style={{ fontSize: 'var(--fs-11)', color: 'var(--warning)', fontWeight: 600 }}>DISABLED</span>
+                          )}
+                          {upgradeTarget && (
+                            <span data-testid={`mod-upgrade-available-${m.id}`} style={{ fontSize: 'var(--fs-11)', color: 'var(--accent)', fontWeight: 600 }}>
+                              ↑ v{upgradeTarget} available
+                            </span>
+                          )}
+                        </Inline>
+                        {m.description && (
+                          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{m.description}</span>
+                        )}
+                      </Stack>
+                      <Inline gap={1}>
+                        {upgradeTarget && (
+                          <Button variant="ghost" onClick={() => void upgrade(m.id)} data-testid={`mod-upgrade-${m.id}`} aria-label={`Upgrade ${m.id}`}>
+                            <ArrowUpCircle size={14} aria-hidden /> Upgrade
+                          </Button>
+                        )}
+                        <Button variant="ghost" onClick={() => void toggle(m.id, !(m.enabled ?? true))} data-testid={`mod-toggle-${m.id}`} aria-label={m.enabled === false ? `Enable ${m.id}` : `Disable ${m.id}`}>
+                          {m.enabled === false ? <Power size={14} aria-hidden /> : <PowerOff size={14} aria-hidden />}
+                        </Button>
+                        <Button variant="ghost" onClick={() => void reinstallInstructions(m.id)} data-testid={`mod-reinstall-instructions-${m.id}`} aria-label={`Reinstall instructions ${m.id}`}>
+                          <RotateCcw size={14} aria-hidden />
+                        </Button>
+                        <Button variant="ghost" onClick={() => void editModFile(m.id)} data-testid={`mod-edit-${m.id}`} aria-label={`Edit mod file ${m.id}`}>
+                          <FileEdit size={14} aria-hidden />
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmDelete((cur) => (cur === m.id ? null : m.id))} data-testid={`mod-uninstall-${m.id}`} aria-label={`Uninstall ${m.id}`}>
+                          <Trash2 size={14} aria-hidden />
+                        </Button>
+                      </Inline>
+                    </Inline>
+                    {isConfirming && (
+                      <Inline gap={1} style={{ marginTop: 'var(--space-1)' }}>
+                        <Button variant="danger" onClick={() => void drop(m.id)} data-testid={`mod-confirm-uninstall-${m.id}`}>
+                          Confirm uninstall
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmDelete(null)}>Cancel</Button>
+                      </Inline>
+                    )}
+                  </div>
+                );
+              })}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      <Card variant="default">
+        <CardBody>
+          <strong style={{ fontSize: 'var(--fs-13)' }}>Registry</strong>
+          {registryPayload.loading && registryMods.length === 0 ? (
+            <Stack gap={1} style={{ marginTop: 'var(--space-2)' }}>
+              <Skeleton style={{ height: 40 }} />
+            </Stack>
+          ) : registryMods.length === 0 ? (
+            <EmptyState icon={<Download size={28} aria-hidden />} title="Registry unreachable" description="Cannot reach the public mod registry right now." />
+          ) : (
+            <Stack gap={1} style={{ marginTop: 'var(--space-2)' }}>
+              {registryMods.slice(0, 30).map((m) => (
+                <div
+                  key={m.id}
+                  data-testid={`mod-registry-row-${m.id}`}
+                  style={{
+                    padding: 'var(--space-2)',
+                    border: '1px solid var(--border)',
+                    borderRadius: 'var(--radius-sm)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    gap: 'var(--space-2)',
+                  }}
+                >
+                  <Stack gap={0} style={{ minWidth: 0 }}>
+                    <Inline align="center" gap={2}>
+                      <strong>{m.name || m.id}</strong>
+                      <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{m.id}</code>
+                      <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>v{m.latest}</span>
+                      {m.installed && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--success)' }}>installed</span>}
+                    </Inline>
+                    {m.description && (
+                      <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{m.description}</span>
+                    )}
+                  </Stack>
+                  {!m.installed && (
+                    <Button variant="ghost" onClick={async () => {
+                      setError(null);
+                      try {
+                        await fetchJson('/api/mods', { method: 'POST', body: { id: m.id } });
+                        refresh();
+                      } catch (err) {
+                        setError(err instanceof FetchError ? err.message : (err as Error).message);
+                      }
+                    }} data-testid={`mod-registry-install-${m.id}`}>
+                      <Download size={14} aria-hidden /> Install
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      <Sheet open={installing} onOpenChange={setInstalling}>
+        <SheetContent side="right" title="Install mod" description="From registry id or local path.">
+          <InstallForm
+            onSubmit={async (body) => {
+              await fetchJson('/api/mods', { method: 'POST', body });
+              setInstalling(false);
+              refresh();
+            }}
+            onCancel={() => setInstalling(false)}
+          />
+        </SheetContent>
+      </Sheet>
+    </Stack>
+  );
+}
+
+function InstallForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (body: { id?: string; path?: string }) => Promise<void>;
+  onCancel: () => void;
+}): JSX.Element {
+  const [mode, setMode] = useState<'registry' | 'path'>('registry');
+  const [value, setValue] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <Stack gap={3} style={{ padding: 'var(--space-4)' }}>
+      <Inline gap={1} role="tablist">
+        <button type="button" role="tab" aria-selected={mode === 'registry'} onClick={() => setMode('registry')} data-testid="mod-install-mode-registry"
+          style={{ padding: 'var(--space-1) var(--space-3)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)', background: mode === 'registry' ? 'var(--accent-soft)' : 'var(--surface-0)', color: mode === 'registry' ? 'var(--accent)' : 'var(--fg-muted)', fontSize: 'var(--fs-12)', cursor: 'pointer' }}>
+          Registry id
+        </button>
+        <button type="button" role="tab" aria-selected={mode === 'path'} onClick={() => setMode('path')} data-testid="mod-install-mode-path"
+          style={{ padding: 'var(--space-1) var(--space-3)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)', background: mode === 'path' ? 'var(--accent-soft)' : 'var(--surface-0)', color: mode === 'path' ? 'var(--accent)' : 'var(--fg-muted)', fontSize: 'var(--fs-12)', cursor: 'pointer' }}>
+          Local path
+        </button>
+      </Inline>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+          {mode === 'registry' ? 'Registry id (e.g. @bizar/mod-foo)' : 'Local path (e.g. /abs/path/to/mod)'}
+        </span>
+        <Input
+          value={value}
+          onChange={(e) => setValue((e.target as HTMLInputElement).value)}
+          placeholder={mode === 'registry' ? '@org/mod-name' : '/abs/path/to/mod'}
+          data-testid="mod-install-input"
+        />
+      </label>
+      {error !== null && (
+        <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>
+      )}
+      <Inline justify="end" gap={2}>
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button
+          variant="primary"
+          disabled={busy || !value.trim()}
+          data-testid="mod-install-submit"
+          onClick={async () => {
+            setBusy(true);
+            setError(null);
+            try {
+              const body = mode === 'registry' ? { id: value.trim() } : { path: value.trim() };
+              await onSubmit(body);
+            } catch (err) {
+              setError(err instanceof FetchError ? err.message : (err as Error).message);
+            } finally {
+              setBusy(false);
+            }
+          }}
+        >
+          <Upload size={14} aria-hidden /> {busy ? 'Installing…' : 'Install'}
+        </Button>
+      </Inline>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Notifications/NotificationsView.tsx

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Bell, CheckCheck, Trash2, RefreshCw } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Badge } from '../../ui/data/Badge.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+import type { WsMessage } from '../../data/types.js';
+
+/**
+ * NotificationsView — Sprint S35. Per-user notification stream backed
+ * by `/api/notifications`. Pulls unread + read mixed, supports
+ * mark-one-read, mark-all-read, and dismiss.
+ */
+
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+
+interface NotificationItem {
+  id: string;
+  title?: string;
+  body?: string;
+  source?: string;
+  tone?: Tone;
+  read?: boolean;
+  createdAt?: string;
+}
+
+interface NotificationsResponse {
+  notifications: NotificationItem[];
+  stats?: { total: number; unread: number };
+}
+
+function toneFor(item: NotificationItem): Tone {
+  if (item.tone && ['info', 'success', 'warning', 'danger', 'neutral'].includes(item.tone)) {
+    return item.tone as Tone;
+  }
+  return 'neutral';
+}
+
+function fmtRel(iso: string | undefined): string {
+  if (!iso) return '';
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return '';
+  const delta = Math.max(0, Date.now() - t);
+  if (delta < 60_000) return 'just now';
+  if (delta < 3_600_000) return `${Math.round(delta / 60_000)}m ago`;
+  if (delta < 86_400_000) return `${Math.round(delta / 3_600_000)}h ago`;
+  return new Date(t).toLocaleString();
+}
+
+export function NotificationsView(): JSX.Element {
+  const res = useFetch<NotificationsResponse>('/api/notifications?limit=200');
+  const [items, setItems] = useState<NotificationItem[]>([]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (res.data?.notifications) setItems(res.data.notifications);
+  }, [res.data]);
+
+  const onChange = useCallback((msg: WsMessage) => {
+    if (msg.type === 'notifications:change') res.refetch();
+  }, [res]);
+  useWsMessage('notifications:change', onChange);
+
+  const markRead = async (id: string): Promise<void> => {
+    setBusy(id);
+    setError(null);
+    try {
+      await fetchJson(`/api/notifications/${encodeURIComponent(id)}/read`, { method: 'POST' });
+      setItems((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)));
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const markAll = async (): Promise<void> => {
+    setBusy('all');
+    setError(null);
+    try {
+      await fetchJson('/api/notifications/read-all', { method: 'POST' });
+      setItems((prev) => prev.map((n) => ({ ...n, read: true })));
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const dismiss = async (id: string): Promise<void> => {
+    setBusy(id);
+    setError(null);
+    try {
+      await fetchJson(`/api/notifications/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      setItems((prev) => prev.filter((n) => n.id !== id));
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const unread = items.filter((n) => !n.read).length;
+
+  return (
+    <Stack gap={5} data-testid="notifications-view">
+      <ViewHeader
+        title="Notifications"
+        description={`${unread} unread of ${items.length} total. Backed by ~/.config/bizar/notifications.jsonl.`}
+        actions={
+          <Inline gap={2} align="center">
+            {error !== null && <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>}
+            <Button variant="ghost" onClick={() => void res.refetch()} data-testid="notifications-refresh">
+              <RefreshCw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="secondary" onClick={() => void markAll()} disabled={busy === 'all' || unread === 0} data-testid="notifications-mark-all">
+              <CheckCheck size={14} aria-hidden /> Mark all read
+            </Button>
+          </Inline>
+        }
+      />
+      {res.loading && items.length === 0 ? (
+        <Stack gap={2}>
+          <Skeleton style={{ height: 64 }} />
+          <Skeleton style={{ height: 64 }} />
+          <Skeleton style={{ height: 64 }} />
+        </Stack>
+      ) : items.length === 0 ? (
+        <EmptyState
+          icon={<Bell size={32} aria-hidden />}
+          title="No notifications"
+          description="Agent runs, task moves, and CI results will land here."
+        />
+      ) : (
+        <Stack gap={2}>
+          {items.map((n) => {
+            const tone = toneFor(n);
+            return (
+              <Card key={n.id} variant="default" style={{ opacity: n.read ? 0.7 : 1 }}>
+                <CardBody>
+                  <Inline align="start" justify="between" gap={3}>
+                    <Stack gap={1} style={{ flex: 1, minWidth: 0 }}>
+                      <Inline align="center" gap={2}>
+                        {!n.read && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: 'var(--radius-pill)', background: 'var(--accent)' }} />}
+                        <strong style={{ fontSize: 'var(--fs-13)' }}>{n.title || n.source || n.id}</strong>
+                        {n.source && <Badge tone={tone}>{n.source}</Badge>}
+                        <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--fs-12)' }}>{fmtRel(n.createdAt)}</span>
+                      </Inline>
+                      {n.body && <span style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}>{n.body}</span>}
+                    </Stack>
+                    <Inline gap={1}>
+                      {!n.read && (
+                        <Button variant="ghost" onClick={() => void markRead(n.id)} disabled={busy === n.id} data-testid={`notification-read-${n.id}`}>
+                          Mark read
+                        </Button>
+                      )}
+                      <Button variant="ghost" onClick={() => void dismiss(n.id)} disabled={busy === n.id} data-testid={`notification-dismiss-${n.id}`}>
+                        <Trash2 size={12} aria-hidden /> Dismiss
+                      </Button>
+                    </Inline>
+                  </Inline>
+                </CardBody>
+              </Card>
+            );
+          })}
+        </Stack>
+      )}
+    </Stack>
+  );
+}