@columenlabs/lumen-ui 0.0.0-stage → 0.2.1

package/dist/tasks.js

@@ -0,0 +1,278 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isActive } from '@columenlabs/lumen-ui-types/tasks';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from '@tanstack/react-router';
+import { ArrowUpRightIcon, BrushCleaningIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, Clock3Icon, ListChecksIcon, XIcon, } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { toast } from 'sonner';
+// Tasks (in Lumen for
+// every app): long work a person started on any of the product's apps (a Sweep, a
+// backfill, a sync, a Search) in one list. The header button sits left of the assistant: a ring while anything runs, the count, and a gold dot when something
+// ended unseen. It opens a popover on desktop and a bottom sheet on phone with the last 7 days;
+// opening it marks the ended ones seen. ✕ clears one ended task, the brush every ended one
+//. A task that ends while the page is open shows a toast with
+// Open. The list polls one cheap read every 3 s only while something runs and the tab is visible;
+// otherwise it reads again on focus. The product mounts `TasksProvider` and `TasksButton` in the
+// shell's slots; where the API answers 404 nothing shows.
+import { LumenConfirm } from './confirm.js';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { cn } from './lib/utils.js';
+import { IconButton } from './page.js';
+import { useShell } from './shell.js';
+import { Badge } from './ui/badge.js';
+import { Button } from './ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+import { Progress } from './ui/progress.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from './ui/sheet.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+const TasksCtx = createContext(null);
+/** The Tasks list, or null where the app has none; `refresh()` after starting one shows it at once. */
+export function useTasks() {
+    return useContext(TasksCtx);
+}
+const POLL_MS = 3000;
+export function TasksProvider({ config, children }) {
+    if (!config)
+        return children;
+    return (_jsx(TasksLive, { api: config.api, apps: config.apps, children: children }));
+}
+function TasksLive({ api, apps, children, }) {
+    const [list, setList] = useState(null);
+    const [gone, setGone] = useState(false);
+    const router = useRouter();
+    const qc = useQueryClient();
+    const shell = useShell();
+    // What was active at the last read, so a task that ends while the page is open gets a toast.
+    const activeIds = useRef(null);
+    const open = useCallback((t) => {
+        if (!t.link)
+            return;
+        const url = new URL(t.link, window.location.href);
+        if (url.origin !== window.location.origin) {
+            window.location.assign(url.href);
+            return;
+        }
+        const section = url.searchParams.get('settings');
+        if (section !== null) {
+            shell.openSettings(section || undefined);
+            return;
+        }
+        const base = (router.options.basepath ?? '/').replace(/\/$/, '');
+        const path = base && url.pathname.startsWith(base) ? url.pathname.slice(base.length) : url.pathname;
+        void router.navigate({ href: `${path || '/'}${url.search}${url.hash}` });
+    }, [router, shell]);
+    const refresh = useCallback(async () => {
+        const res = await fetch(api, { headers: { accept: 'application/json' } }).catch(() => null);
+        if (!res)
+            return;
+        if (res.status === 404) {
+            setGone(true);
+            return;
+        }
+        if (!res.ok)
+            return;
+        const next = (await res.json());
+        const before = activeIds.current;
+        if (before) {
+            const ended = next.tasks.filter((t) => before.has(t.id) && !isActive(t));
+            for (const t of ended)
+                endedToast(t, open);
+            // A task's results are new data: drop the cache once (query-client.ts).
+            if (ended.length)
+                void qc.invalidateQueries();
+        }
+        activeIds.current = new Set(next.tasks.filter(isActive).map((t) => t.id));
+        setList(next);
+    }, [api, open, qc]);
+    const post = useCallback(async (path) => {
+        await fetch(`${api}${path}`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: '{}',
+        });
+    }, [api]);
+    const cancel = useCallback(async (id) => {
+        await post(`/${encodeURIComponent(id)}/cancel`);
+        await refresh();
+    }, [post, refresh]);
+    // Gone from the list at once; the read after the POST confirms it.
+    const clear = useCallback(async (id) => {
+        setList((l) => {
+            if (!l)
+                return l;
+            const tasks = l.tasks.filter((t) => (id ? t.id !== id : isActive(t)));
+            const unseen = tasks.filter((t) => t.finished_at && !t.seen_at).length;
+            return { ...l, tasks, unseen };
+        });
+        await post(id ? `/${encodeURIComponent(id)}/clear` : '/clear');
+        await refresh();
+    }, [post, refresh]);
+    // Marked seen on the server at once; the list keeps its dots until the panel closes and reads again.
+    const seen = useCallback(async () => {
+        if (list?.unseen)
+            await post('/seen');
+    }, [list?.unseen, post]);
+    // First read, then again whenever the tab comes back.
+    useEffect(() => {
+        void refresh();
+        const again = () => {
+            if (document.visibilityState === 'visible')
+                void refresh();
+        };
+        window.addEventListener('focus', again);
+        document.addEventListener('visibilitychange', again);
+        return () => {
+            window.removeEventListener('focus', again);
+            document.removeEventListener('visibilitychange', again);
+        };
+    }, [refresh]);
+    // Every 3 s only while something is queued or running and the tab is visible.
+    const active = (list?.active ?? 0) > 0;
+    useEffect(() => {
+        if (!active)
+            return;
+        const id = window.setInterval(() => {
+            if (document.visibilityState === 'visible')
+                void refresh();
+        }, POLL_MS);
+        return () => window.clearInterval(id);
+    }, [active, refresh]);
+    const value = useMemo(() => (gone ? null : { list, refresh, cancel, seen, clear, open, apps }), [gone, list, refresh, cancel, seen, clear, open, apps]);
+    return _jsx(TasksCtx.Provider, { value: value, children: children });
+}
+function endedToast(t, open) {
+    const action = t.link ? { label: 'Open', onClick: () => open(t) } : undefined;
+    const [kind, ...rest] = t.title.split(' · ');
+    const detail = rest.join(' · ');
+    if (t.state === 'done') {
+        toast.success(`${kind} finished`, {
+            description: [detail, t.summary].filter(Boolean).join(' · ') || undefined,
+            action,
+        });
+    }
+    else if (t.state === 'failed') {
+        toast.error(`${kind} failed`, {
+            description: [detail, t.error].filter(Boolean).join(' · ') || undefined,
+            action,
+        });
+    }
+}
+/** The header button: a ring while anything runs, the count, a gold dot for ended unseen tasks. */
+export function TasksButton() {
+    const tasks = useTasks();
+    const mobile = useIsMobile();
+    const [open, setOpen] = useState(false);
+    const list = tasks?.list;
+    if (!tasks || !list || list.tasks.length === 0)
+        return null;
+    const onOpen = (o) => {
+        setOpen(o);
+        if (o)
+            void tasks.seen();
+        else
+            void tasks.refresh();
+    };
+    const running = list.tasks.filter((t) => t.state === 'running' && t.total);
+    const share = running.length
+        ? running.reduce((s, t) => s + (t.done ?? 0) / (t.total || 1), 0) / running.length
+        : null;
+    const label = [
+        'Tasks',
+        list.active ? `${list.active} running` : null,
+        list.unseen ? `${list.unseen} new` : null,
+    ]
+        .filter(Boolean)
+        .join(', ');
+    const trigger = (_jsxs(Button, { variant: "ghost", size: list.active ? 'sm' : 'icon-sm', className: cn('relative shrink-0', list.active > 0 && 'gap-1.5 px-2'), "aria-label": label, "data-slot": "tasks-button", children: [list.active > 0 ? _jsx(Ring, { share: share }) : _jsx(ListChecksIcon, {}), list.active > 0 && _jsx("span", { className: "font-mono text-xs tabular-nums", children: list.active }), list.unseen > 0 && (_jsx("span", { "aria-hidden": true, "data-slot": "tasks-unseen", className: "absolute top-1 right-0.5 size-1.5 rounded-full bg-edge" }))] }));
+    const body = _jsx(TaskPanel, { list: list, onClose: () => setOpen(false) });
+    if (mobile) {
+        return (_jsxs(Sheet, { open: open, onOpenChange: onOpen, children: [_jsx(SheetTrigger, { asChild: true, children: trigger }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "flex-row items-baseline gap-2 border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Tasks" }), _jsx(SheetDescription, { children: "last 7 days" }), _jsxs("span", { className: "mr-8 ml-auto flex items-center gap-2 self-center", children: [list.active > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [list.active, " running"] })), _jsx(ClearAll, { list: list })] })] }), body] })] }));
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: trigger }) }), _jsx(TooltipContent, { children: "Tasks" })] }), _jsxs(PopoverContent, { align: "end", className: "w-100 gap-0 p-0", "aria-label": "Tasks", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs("div", { className: "flex items-baseline gap-2 px-3.5 pt-3 pb-2", children: [_jsx("span", { className: "text-sm font-semibold", children: "Tasks" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "last 7 days" }), _jsxs("span", { className: "ml-auto flex items-center gap-2 self-center", children: [list.active > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [list.active, " running"] })), _jsx(ClearAll, { list: list })] })] }), body] })] }));
+}
+/** Clears every ended task after one confirm; shows only when there is one. */
+function ClearAll({ list }) {
+    const tasks = useTasks();
+    const [confirm, setConfirm] = useState(false);
+    const ended = list.tasks.length - list.active;
+    if (!ended)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: BrushCleaningIcon, label: "Clear finished", size: "icon-xs", className: "text-muted-foreground hover:text-destructive", onClick: () => setConfirm(true) }), _jsx(LumenConfirm, { open: confirm, onOpenChange: setConfirm, title: `Clear ${ended} finished ${ended === 1 ? 'task' : 'tasks'}?`, description: "They leave this list for good. Running tasks stay.", action: "Clear", onConfirm: () => void tasks?.clear() })] }));
+}
+/** A small progress ring: the share done of what runs, or a spinning arc when nothing says. */
+function Ring({ share }) {
+    const c = 2 * Math.PI * 7.5;
+    const arc = share === null ? c / 4 : Math.max(0.04, Math.min(1, share)) * c;
+    return (_jsxs("svg", { viewBox: "0 0 20 20", role: "img", "aria-label": "Progress", className: cn('size-4.5', share === null && 'animate-spin motion-reduce:animate-none'), children: [_jsx("circle", { cx: "10", cy: "10", r: "7.5", fill: "none", className: "stroke-muted", strokeWidth: "2.5" }), _jsx("circle", { cx: "10", cy: "10", r: "7.5", fill: "none", className: "stroke-primary", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: `${arc} ${c}`, transform: "rotate(-90 10 10)" })] }));
+}
+function TaskPanel({ list, onClose }) {
+    const { openSettings } = useShell();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "max-h-[60svh] overflow-y-auto", children: list.tasks.map((t) => (_jsx(TaskRow, { task: t, onClose: onClose }, t.id))) }), _jsxs("div", { className: "border-t px-3.5 py-2.5 text-xs text-muted-foreground", children: ["Phone or email when a task ends:", ' ', _jsx("button", { type: "button", className: "text-primary hover:underline", onClick: () => {
+                            onClose();
+                            openSettings('notifications');
+                        }, children: "Settings \u25B8 Notifications" })] })] }));
+}
+function TaskRow({ task: t, onClose }) {
+    const tasks = useTasks();
+    const apps = tasks?.apps;
+    const [confirm, setConfirm] = useState(false);
+    const unseen = !!t.finished_at && !t.seen_at;
+    const now = useNow(isActive(t));
+    const done = t.done ?? 0;
+    const pct = t.total ? Math.round((done / t.total) * 100) : null;
+    return (_jsxs("div", { "data-slot": "task-row", "data-state": t.state, className: cn('flex flex-col gap-1.5 border-t px-3.5 py-2.5', unseen && 'bg-muted/40'), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [unseen && _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-edge" }), apps && (_jsx(Badge, { variant: "outline", className: "shrink-0 text-[11px]", children: apps[t.app] ?? t.app })), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold", title: t.title, children: t.title }), isActive(t) && t.cancellable ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: XIcon, label: "Cancel task", size: "icon-xs", className: "text-muted-foreground hover:text-destructive", onClick: () => setConfirm(true) }), _jsx(LumenConfirm, { open: confirm, onOpenChange: setConfirm, title: `Cancel ${t.title}?`, description: "It stops at its next step; what it finished stays.", action: "Cancel task", onConfirm: () => void tasks?.cancel(t.id) })] })) : t.link ? (_jsx(IconButton, { icon: isActive(t) ? ChevronRightIcon : ArrowUpRightIcon, label: "Open", size: "icon-xs", onClick: () => {
+                            onClose();
+                            tasks?.open(t);
+                        } })) : null, !isActive(t) && (_jsx(IconButton, { icon: XIcon, label: "Clear", size: "icon-xs", className: "text-muted-foreground hover:text-destructive", onClick: () => void tasks?.clear(t.id) }))] }), t.state === 'running' && t.total ? (_jsxs(_Fragment, { children: [_jsx(Progress, { value: pct ?? 0 }), _jsxs("div", { className: "flex gap-2.5 font-mono text-[11.5px] text-muted-foreground tabular-nums", children: [_jsxs("span", { children: [done.toLocaleString('en-US'), " / ", t.total.toLocaleString('en-US'), t.unit ? ` ${t.unit}` : ''] }), _jsxs("span", { children: [pct, "%"] }), _jsx("span", { className: "ml-auto", children: timeLeft(t, now) })] })] })) : t.state === 'running' ? (_jsxs(_Fragment, { children: [_jsx(Progress, {}), _jsxs("div", { className: "font-mono text-[11.5px] text-muted-foreground tabular-nums", children: [done ? `${done.toLocaleString('en-US')}${t.unit ? ` ${t.unit}` : ''} · ` : '', "running ", took(Date.parse(t.started_at ?? t.created_at), now)] })] })) : t.state === 'queued' ? (_jsx(Line, { icon: _jsx(Clock3Icon, { className: "size-3" }), children: "Queued" })) : t.state === 'done' ? (_jsx(Line, { icon: _jsx(CheckIcon, { className: "size-3 text-gain", strokeWidth: 2.5 }), mono: true, children: [t.summary, tookLine(t), ago(t.finished_at, now)].filter(Boolean).join(' · ') })) : (_jsx(Line, { icon: _jsx(CircleAlertIcon, { className: "size-3" }), className: t.state === 'failed' ? 'text-loss' : undefined, children: [t.state === 'cancelled' ? 'Cancelled' : (t.error ?? 'Failed'), ago(t.finished_at, now)]
+                    .filter(Boolean)
+                    .join(' · ') }))] }));
+}
+function Line({ icon, mono, className, children, }) {
+    return (_jsxs("div", { className: cn('flex min-w-0 items-center gap-1.5 text-[11.5px] text-muted-foreground', mono && 'font-mono tabular-nums', className), children: [_jsx("span", { className: "shrink-0", children: icon }), _jsx("span", { className: "min-w-0 truncate", children: children })] }));
+}
+/** Ticks once a second while a task runs, so "left" and "running" count. */
+function useNow(live) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!live)
+            return;
+        const id = window.setInterval(() => setNow(Date.now()), 1000);
+        return () => window.clearInterval(id);
+    }, [live]);
+    return now;
+}
+function took(from, to) {
+    const s = Math.max(0, Math.round((to - from) / 1000));
+    if (s < 60)
+        return `${s} s`;
+    const m = Math.round(s / 60);
+    if (m < 60)
+        return `${m} min`;
+    const h = Math.floor(m / 60);
+    return m % 60 ? `${h} h ${m % 60} min` : `${h} h`;
+}
+function tookLine(t) {
+    if (!t.finished_at)
+        return null;
+    return `took ${took(Date.parse(t.started_at ?? t.created_at), Date.parse(t.finished_at))}`;
+}
+function ago(at, now) {
+    if (!at)
+        return null;
+    const s = Math.max(0, Math.round((now - Date.parse(at)) / 1000));
+    if (s < 60)
+        return 'just now';
+    if (s < 3600)
+        return `${Math.round(s / 60)} min ago`;
+    if (s < 86_400)
+        return `${Math.round(s / 3600)} h ago`;
+    return `${Math.round(s / 86_400)} d ago`;
+}
+/** What is left at the pace so far; nothing until a first step is done. */
+function timeLeft(t, now) {
+    if (!t.total || !t.done || t.done >= t.total || !t.started_at)
+        return '';
+    const spent = now - Date.parse(t.started_at);
+    const left = (spent / t.done) * (t.total - t.done);
+    return `~${took(0, left)} left`;
+}