508 lines
20 KiB
TypeScript
508 lines
20 KiB
TypeScript
import { getLocale, useI18n, translate } from "../../i18n";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { LoaderCircle, LockOpen, Square } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "../../components/ui/button";
|
|
import { ApiError, apiErrorMessage } from "../../api/client";
|
|
import {
|
|
cancelDescriptionGenerationRun,
|
|
descriptionGenerationEventsUrl,
|
|
getDescriptionGenerationRun,
|
|
listDescriptionGenerationEvents,
|
|
listDescriptionGenerationRuns,
|
|
type DescriptionGenerationEvent,
|
|
type DescriptionGenerationRun,
|
|
unlockDescriptionGenerationRun,
|
|
} from "../../api/catalog-databases";
|
|
import { useTailFollowing } from "../activityScroll";
|
|
import { FleetLedgerDrawer } from "./FleetLedgerShell";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
databaseId?: string | null;
|
|
run: DescriptionGenerationRun | null;
|
|
modelLabel: string;
|
|
onClose: () => void;
|
|
onRunUpdate: (run: DescriptionGenerationRun) => void;
|
|
onTerminal: (run: DescriptionGenerationRun) => void;
|
|
}
|
|
|
|
const APPARENTLY_STALE_AFTER_MS = 5 * 60 * 1_000;
|
|
const SAFE_FINAL_ERROR = "The run ended before all targets were processed. Review the event log for safe details.";
|
|
|
|
function statusLabel(run: DescriptionGenerationRun): string {
|
|
const label = run.status.replaceAll("_", " ");
|
|
return translate(`${label[0].toUpperCase()}${label.slice(1)}`);
|
|
}
|
|
|
|
function isTerminal(run?: DescriptionGenerationRun): boolean {
|
|
return Boolean(run && [
|
|
"completed", "completed_with_errors", "cancelled", "failed", "interrupted",
|
|
].includes(run.status));
|
|
}
|
|
|
|
function isApparentlyStale(run: DescriptionGenerationRun): boolean {
|
|
if (!["queued", "running"].includes(run.status)) return false;
|
|
const updatedAt = new Date(run.updatedAt).getTime();
|
|
return Number.isFinite(updatedAt) && Date.now() - updatedAt >= APPARENTLY_STALE_AFTER_MS;
|
|
}
|
|
|
|
function safeFinalError(summary: string | null): string | null {
|
|
const value = summary?.trim();
|
|
if (!value) return null;
|
|
if (
|
|
value.length > 500
|
|
|| /[\r\n]/.test(value)
|
|
|| /traceback|stack trace|(?:^|\s)at\s+\S+[:(]|prompt|provider\s+payload|source\s+sample|bearer\s+\S+|api[_ -]?key|sk-[a-z0-9_-]+/i.test(value)
|
|
) return SAFE_FINAL_ERROR;
|
|
return value;
|
|
}
|
|
|
|
function timestamp(value: string | null): string {
|
|
return value ? new Date(value).toLocaleString(getLocale()) : translate("Not available");
|
|
}
|
|
|
|
export function DescriptionGenerationDrawer({
|
|
open,
|
|
databaseId = null,
|
|
run: initialRun,
|
|
modelLabel,
|
|
onClose,
|
|
onRunUpdate,
|
|
onTerminal,
|
|
}: Props) {
|
|
const { t } = useI18n();
|
|
const queryClient = useQueryClient();
|
|
const runId = initialRun?.id ?? null;
|
|
const [events, setEvents] = useState<DescriptionGenerationEvent[]>([]);
|
|
const [action, setAction] = useState<"stop" | "unlock" | null>(null);
|
|
const lastSequence = useRef(0);
|
|
const terminalRuns = useRef(new Set<string>());
|
|
const finalEventsRun = useRef<string | null>(null);
|
|
const runQuery = useQuery({
|
|
queryKey: ["description-generation-run", runId],
|
|
queryFn: () => getDescriptionGenerationRun(runId!),
|
|
enabled: Boolean(runId),
|
|
initialData: initialRun ?? undefined,
|
|
retry: false,
|
|
refetchInterval: (query) => isTerminal(query.state.data) ? false : 1_000,
|
|
});
|
|
const run = runQuery.data;
|
|
const eventQuery = useQuery({
|
|
queryKey: ["description-generation-events", runId],
|
|
queryFn: () => listDescriptionGenerationEvents(runId!, lastSequence.current),
|
|
enabled: Boolean(runId),
|
|
retry: false,
|
|
refetchInterval: run && isTerminal(run) ? false : 1_500,
|
|
});
|
|
const historyQuery = useQuery({
|
|
queryKey: ["description-generation-runs", 50],
|
|
queryFn: () => listDescriptionGenerationRuns(50),
|
|
enabled: open,
|
|
retry: false,
|
|
refetchInterval: (query) => query.state.data?.some((item) => !isTerminal(item))
|
|
? 3_000
|
|
: false,
|
|
});
|
|
const visibleHistory = useMemo(
|
|
() => (historyQuery.data ?? []).filter((item) => !databaseId || item.databaseId === databaseId),
|
|
[databaseId, historyQuery.data, t],
|
|
);
|
|
const latestEventSequence = events.at(-1)?.sequence ?? 0;
|
|
const {
|
|
followingTail: followingEventTail,
|
|
handleScroll: handleEventLogScroll,
|
|
jumpToTail: jumpToLatestEvent,
|
|
viewportRef: eventLogRef,
|
|
} = useTailFollowing<HTMLDivElement>({
|
|
active: open && Boolean(run),
|
|
resetKey: runId,
|
|
tail: latestEventSequence,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!open || initialRun || !visibleHistory[0]) return;
|
|
onRunUpdate(visibleHistory[0]);
|
|
}, [initialRun, onRunUpdate, open, visibleHistory]);
|
|
|
|
const mergeEvents = useCallback((incoming: DescriptionGenerationEvent[]) => {
|
|
if (incoming.length === 0) return;
|
|
setEvents((current) => {
|
|
const bySequence = new Map(current.map((event) => [event.sequence, event]));
|
|
for (const event of incoming) bySequence.set(event.sequence, event);
|
|
const merged = [...bySequence.values()].sort((left, right) => left.sequence - right.sequence);
|
|
lastSequence.current = merged.at(-1)?.sequence ?? lastSequence.current;
|
|
return merged;
|
|
});
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
setEvents([]);
|
|
lastSequence.current = 0;
|
|
finalEventsRun.current = null;
|
|
}, [runId]);
|
|
|
|
useEffect(() => {
|
|
mergeEvents(eventQuery.data ?? []);
|
|
}, [eventQuery.data, mergeEvents]);
|
|
|
|
const live = Boolean(run && !isTerminal(run));
|
|
useEffect(() => {
|
|
if (
|
|
!runId
|
|
|| !open
|
|
|| !live
|
|
|| !eventQuery.isFetched
|
|
|| typeof EventSource === "undefined"
|
|
) return;
|
|
|
|
let source: EventSource | null = null;
|
|
let reconnectTimer: number | null = null;
|
|
let disposed = false;
|
|
|
|
const connect = () => {
|
|
if (disposed) return;
|
|
const polledSequence = (eventQuery.data ?? []).reduce(
|
|
(latest, event) => Math.max(latest, event.sequence),
|
|
0,
|
|
);
|
|
lastSequence.current = Math.max(lastSequence.current, polledSequence);
|
|
let currentSource: EventSource;
|
|
try {
|
|
currentSource = new EventSource(descriptionGenerationEventsUrl(runId, lastSequence.current));
|
|
} catch {
|
|
return;
|
|
}
|
|
source = currentSource;
|
|
const isCurrent = () => !disposed && source === currentSource;
|
|
const log = (message: MessageEvent<string>) => {
|
|
if (!isCurrent()) return;
|
|
try {
|
|
mergeEvents([JSON.parse(message.data) as DescriptionGenerationEvent]);
|
|
} catch { /* ordered polling remains authoritative */ }
|
|
};
|
|
const update = (message: MessageEvent<string>) => {
|
|
if (!isCurrent()) return;
|
|
try {
|
|
queryClient.setQueryData(
|
|
["description-generation-run", runId],
|
|
JSON.parse(message.data) as DescriptionGenerationRun,
|
|
);
|
|
} catch { /* status polling remains authoritative */ }
|
|
};
|
|
const message = (incoming: MessageEvent<string>) => {
|
|
if (!isCurrent()) return;
|
|
try {
|
|
const parsed = JSON.parse(incoming.data) as DescriptionGenerationEvent | DescriptionGenerationRun;
|
|
if ("sequence" in parsed) mergeEvents([parsed]);
|
|
else if ("status" in parsed) queryClient.setQueryData(["description-generation-run", runId], parsed);
|
|
} catch { /* polling remains authoritative */ }
|
|
};
|
|
currentSource.addEventListener("log", log as EventListener);
|
|
currentSource.addEventListener("run", update as EventListener);
|
|
currentSource.onmessage = message;
|
|
currentSource.onerror = () => {
|
|
if (!isCurrent() || reconnectTimer !== null) return;
|
|
currentSource.close();
|
|
source = null;
|
|
void eventQuery.refetch().finally(() => {
|
|
if (disposed || reconnectTimer !== null) return;
|
|
reconnectTimer = window.setTimeout(() => {
|
|
reconnectTimer = null;
|
|
connect();
|
|
}, 200);
|
|
});
|
|
};
|
|
};
|
|
|
|
connect();
|
|
return () => {
|
|
disposed = true;
|
|
source?.close();
|
|
if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
|
|
};
|
|
}, [eventQuery.isFetched, eventQuery.refetch, live, mergeEvents, open, queryClient, runId]);
|
|
|
|
useEffect(() => {
|
|
if (!run) return;
|
|
onRunUpdate(run);
|
|
queryClient.setQueryData<DescriptionGenerationRun[]>(
|
|
["description-generation-runs", 50],
|
|
(current) => {
|
|
if (!current) return [run];
|
|
return current.some((item) => item.id === run.id)
|
|
? current.map((item) => item.id === run.id ? run : item)
|
|
: [run, ...current];
|
|
},
|
|
);
|
|
}, [onRunUpdate, queryClient, run]);
|
|
|
|
useEffect(() => {
|
|
if (!run || !isTerminal(run) || finalEventsRun.current === run.id) return;
|
|
finalEventsRun.current = run.id;
|
|
void eventQuery.refetch();
|
|
}, [eventQuery.refetch, run]);
|
|
|
|
useEffect(() => {
|
|
if (!run || !isTerminal(run) || terminalRuns.current.has(run.id)) return;
|
|
terminalRuns.current.add(run.id);
|
|
onTerminal(run);
|
|
}, [onTerminal, run]);
|
|
|
|
const stop = async () => {
|
|
if (!run || isTerminal(run)) return;
|
|
setAction("stop");
|
|
try {
|
|
const next = await cancelDescriptionGenerationRun(run.id);
|
|
queryClient.setQueryData(["description-generation-run", run.id], next);
|
|
onRunUpdate(next);
|
|
await historyQuery.refetch();
|
|
} catch (error) {
|
|
toast.error(t(apiErrorMessage(error)));
|
|
} finally {
|
|
setAction(null);
|
|
}
|
|
};
|
|
|
|
const unlock = async () => {
|
|
if (!run || !isApparentlyStale(run)) return;
|
|
setAction("unlock");
|
|
try {
|
|
const next = await unlockDescriptionGenerationRun();
|
|
queryClient.setQueryData(["description-generation-run", next.id], next);
|
|
onRunUpdate(next);
|
|
await historyQuery.refetch();
|
|
} catch (error) {
|
|
toast.error(error instanceof ApiError && error.status === 409
|
|
? t("Unlock was refused because a live description worker is still running.")
|
|
: apiErrorMessage(error));
|
|
} finally {
|
|
setAction(null);
|
|
}
|
|
};
|
|
|
|
if (!open) return null;
|
|
if (!run) {
|
|
return (
|
|
<FleetLedgerDrawer
|
|
open
|
|
ariaLabel={t("Description generation")}
|
|
eyebrow={t("Description generation")}
|
|
title={t("Run history")}
|
|
onClose={onClose}
|
|
closeLabel={t("Close description generation")}
|
|
busy={action !== null}
|
|
bodyClassName="thot-catalog-drawer__body--empty"
|
|
>
|
|
{historyQuery.isError ? (
|
|
<div role="alert" className="w-full rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
|
{t(apiErrorMessage(historyQuery.error))}
|
|
</div>
|
|
) : historyQuery.isLoading || (historyQuery.data?.length ?? 0) > 0 ? (
|
|
<p className="text-sm text-muted-foreground">{t("Loading run history…")}</p>
|
|
) : (
|
|
<div className="w-full rounded-md border border-border bg-muted/25 px-4 py-5 text-sm">
|
|
<p className="font-semibold">{t("No description generation runs yet.")}</p>
|
|
<p className="mt-1 text-muted-foreground">
|
|
{t("Start a description generation to create the first history entry.")}</p>
|
|
</div>
|
|
)}
|
|
</FleetLedgerDrawer>
|
|
);
|
|
}
|
|
const apparentlyStale = isApparentlyStale(run);
|
|
const finalError = safeFinalError(run.errorSummary);
|
|
const modelDisplay = modelLabel && modelLabel !== run.modelId
|
|
? `${modelLabel} (${run.modelId})`
|
|
: run.modelId;
|
|
const progressCounters = [
|
|
["total", t("Total")],
|
|
["processed", t("Processed")],
|
|
["generated", t("Generated")],
|
|
["nonGeneratable", t("Not generated")],
|
|
["failed", t("Failed")],
|
|
] as const;
|
|
const footer = ["queued", "running"].includes(run.status) ? (
|
|
<div className="w-full">
|
|
{apparentlyStale ? (
|
|
<p
|
|
id="description-generation-unlock-help"
|
|
className="mb-3 rounded-md border border-warning/35 bg-warning/8 px-3 py-2 text-xs leading-5 text-muted-foreground"
|
|
>
|
|
{t("Unlock interrupts apparently stale work and marks the run interrupted. A live worker will prevent it.")}</p>
|
|
) : null}
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
{apparentlyStale ? (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
aria-label={t("Unlock stale run")}
|
|
aria-describedby="description-generation-unlock-help"
|
|
disabled={action !== null}
|
|
onClick={() => void unlock()}
|
|
>
|
|
{action === "unlock" ? <LoaderCircle className="animate-spin" /> : <LockOpen />}
|
|
{action === "unlock" ? t("Unlocking…") : t("Unlock")}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
disabled={action !== null}
|
|
onClick={() => void stop()}
|
|
>
|
|
{action === "stop" ? <LoaderCircle className="animate-spin" /> : <Square />}
|
|
{action === "stop" ? t("Stopping…") : t("Stop")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : undefined;
|
|
return (
|
|
<FleetLedgerDrawer
|
|
open
|
|
ariaLabel={t("Description generation")}
|
|
eyebrow={t("Description generation")}
|
|
title={(
|
|
<span className="inline-flex items-center gap-2">
|
|
{!isTerminal(run) ? <LoaderCircle className="size-5 animate-spin" aria-hidden="true" /> : null}
|
|
{t(statusLabel(run))}
|
|
</span>
|
|
)}
|
|
description={t(run.scope.replaceAll("_", " "))}
|
|
onClose={onClose}
|
|
closeLabel={t("Close description generation")}
|
|
busy={action !== null}
|
|
bodyClassName="thot-catalog-drawer__history-layout thot-catalog-drawer__run-layout"
|
|
footer={footer}
|
|
>
|
|
<div className="thot-catalog-drawer__run-main">
|
|
{runQuery.isError ? (
|
|
<div role="alert" className="rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
|
{t(apiErrorMessage(runQuery.error))}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className={`grid gap-4 sm:grid-cols-2${runQuery.isError ? " mt-4" : ""}`}>
|
|
<section aria-label={t("AI usage")}>
|
|
<h3 className="thot-label mb-2">{t("AI usage")}</h3>
|
|
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
|
|
<dt>{t("Model")}</dt><dd className="truncate text-right" title={modelDisplay}>{modelDisplay}</dd>
|
|
<dt>{t("Input tokens")}</dt><dd className="text-right tabular-nums">{(run.inputTokens ?? 0).toLocaleString(getLocale())}</dd>
|
|
<dt>{t("Cache tokens")}</dt><dd className="text-right tabular-nums">{(run.cacheReadTokens ?? 0).toLocaleString(getLocale())}</dd>
|
|
<dt>{t("Output tokens")}</dt><dd className="text-right tabular-nums">{(run.outputTokens ?? 0).toLocaleString(getLocale())}</dd>
|
|
</dl>
|
|
</section>
|
|
<section aria-label={t("Description generation timestamps")}>
|
|
<h3 className="thot-label mb-2">{t("Timestamps")}</h3>
|
|
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
|
|
<dt className="text-muted-foreground">{t("Created")}</dt><dd className="text-right tabular-nums">{timestamp(run.createdAt)}</dd>
|
|
<dt className="text-muted-foreground">{t("Started")}</dt><dd className="text-right tabular-nums">{timestamp(run.startedAt)}</dd>
|
|
<dt className="text-muted-foreground">{t("Updated")}</dt><dd className="text-right tabular-nums">{timestamp(run.updatedAt)}</dd>
|
|
<dt className="text-muted-foreground">{t("Finished")}</dt><dd className="text-right tabular-nums">{timestamp(run.finishedAt)}</dd>
|
|
</dl>
|
|
</section>
|
|
</div>
|
|
|
|
<section className="mt-4" aria-label={t("Description generation counters")}>
|
|
<h3 className="thot-label mb-2">{t("Progress")}</h3>
|
|
<div className="overflow-x-auto rounded-md border border-border bg-muted/20">
|
|
<table className="w-full min-w-[28rem] table-fixed" aria-label={t("Description generation progress")}>
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/45">
|
|
{progressCounters.map(([name, label]) => (
|
|
<th key={name} scope="col" className="border-l border-border px-2 py-1.5 text-left text-xs font-semibold text-muted-foreground first:border-l-0">
|
|
{t(label)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
{progressCounters.map(([name]) => (
|
|
<td key={name} data-count={name} className="border-l border-border px-2 py-1.5 text-base font-semibold tabular-nums first:border-l-0">
|
|
{run[name]}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
{finalError ? (
|
|
<div className="mt-3 rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
|
{t(finalError)}
|
|
</div>
|
|
) : null}
|
|
|
|
<section className="thot-catalog-drawer__events mt-3" aria-label={t("Description generation log")}>
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<h3 className="thot-label">{t("Events")}</h3>
|
|
<div className="flex items-center gap-2">
|
|
{!followingEventTail && events.length > 0 ? (
|
|
<Button type="button" variant="outline" size="xs" onClick={jumpToLatestEvent}>
|
|
{t("Jump to latest")}</Button>
|
|
) : null}
|
|
<span className="text-xs tabular-nums text-muted-foreground">{events.length}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
ref={eventLogRef}
|
|
role="log"
|
|
aria-label={t("Description generation events")}
|
|
aria-relevant="additions"
|
|
tabIndex={0}
|
|
onScroll={handleEventLogScroll}
|
|
className="thot-catalog-drawer__event-log overflow-y-auto rounded-md bg-zinc-950 p-3 font-mono text-xs leading-5 text-zinc-200"
|
|
>
|
|
{events.length === 0 ? <p className="text-zinc-500">{t("Waiting for events…")}</p> : events.map((event) => (
|
|
<p key={event.sequence} className={event.level === "error" ? "text-red-300" : event.level === "warning" ? "text-amber-300" : undefined}>
|
|
<span className="mr-2 text-zinc-500">{new Date(event.createdAt).toLocaleTimeString(getLocale())}</span>{t(event.message)}
|
|
</p>
|
|
))}
|
|
</div>
|
|
{eventQuery.isError ? <p role="alert" className="mt-2 text-sm text-destructive">{t(apiErrorMessage(eventQuery.error))}</p> : null}
|
|
</section>
|
|
</div>
|
|
|
|
<section className="thot-catalog-drawer__history" aria-label={t("Description generation history")}>
|
|
<div className="mb-2 flex items-center justify-between gap-3">
|
|
<h3 className="thot-label">{t("Recent runs")}</h3>
|
|
<span className="text-xs tabular-nums text-muted-foreground">
|
|
{visibleHistory.length}
|
|
</span>
|
|
</div>
|
|
{historyQuery.isError ? (
|
|
<p role="alert" className="text-sm text-destructive">
|
|
{t(apiErrorMessage(historyQuery.error))}
|
|
</p>
|
|
) : historyQuery.isLoading ? (
|
|
<p className="text-sm text-muted-foreground">{t("Loading run history…")}</p>
|
|
) : visibleHistory.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{t("No description generation runs yet.")}</p>
|
|
) : (
|
|
<div className="thot-catalog-drawer__history-list divide-y divide-border overflow-y-auto rounded-md border border-border">
|
|
{visibleHistory.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
aria-label={`${statusLabel(item)} · ${t(item.scope.replaceAll("_", " "))}`}
|
|
aria-current={item.id === run.id ? "true" : undefined}
|
|
data-status={item.status}
|
|
className={`flex w-full items-start justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/25${item.status === "completed" ? " bg-[oklch(var(--success)/0.1)]" : ""}`}
|
|
onClick={() => onRunUpdate(item)}
|
|
>
|
|
<span className="font-medium">{t(statusLabel(item))}</span>
|
|
<span className="shrink-0 text-right text-xs text-muted-foreground">
|
|
{item.processed}/{item.total}<br />{new Date(item.createdAt).toLocaleString(getLocale())}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</FleetLedgerDrawer>
|
|
);
|
|
}
|