feat: complete catalog fleet management workflow

2026-08-31 15:58:43 +02:00
parent 866aee4249
commit 9c697dc062
56 changed files with 6692 additions and 611 deletions
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { LoaderCircle, LockOpen, Square, X } from "lucide-react";
+import { LoaderCircle, LockOpen, Square } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import { ApiError, apiErrorMessage } from "../../api/client";
@@ -14,6 +14,7 @@ import {
  type DescriptionGenerationRun,
  unlockDescriptionGenerationRun,
 } from "../../api/catalog-databases";
+import { FleetLedgerDrawer } from "./FleetLedgerShell";

 interface Props {
  open: boolean;
@@ -100,6 +101,11 @@ export function DescriptionGenerationDrawer({
      : false,
  });

+  useEffect(() => {
+    if (!open || initialRun || !historyQuery.data?.[0]) return;
+    onRunUpdate(historyQuery.data[0]);
+  }, [historyQuery.data, initialRun, onRunUpdate, open]);
+
  const mergeEvents = useCallback((incoming: DescriptionGenerationEvent[]) => {
    if (incoming.length === 0) return;
    setEvents((current) => {
@@ -256,28 +262,88 @@ export function DescriptionGenerationDrawer({
    }
  };

-  if (!open || !run) return null;
+  if (!open) return null;
+  if (!run) {
+    return (
+      <FleetLedgerDrawer
+        open
+        ariaLabel="Description generation"
+        eyebrow="Description generation"
+        title="Run history"
+        onClose={onClose}
+        closeLabel="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">
+            {apiErrorMessage(historyQuery.error)}
+          </div>
+        ) : historyQuery.isLoading || (historyQuery.data?.length ?? 0) > 0 ? (
+          <p className="text-sm text-muted-foreground">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">No description generation runs yet.</p>
+            <p className="mt-1 text-muted-foreground">
+              Start a description generation to create the first history entry.
+            </p>
+          </div>
+        )}
+      </FleetLedgerDrawer>
+    );
+  }
  const apparentlyStale = isApparentlyStale(run);
  const finalError = safeFinalError(run.errorSummary);
-  return (
-    <aside
-      aria-label="Description generation"
-      className="fixed inset-y-2 right-0 z-50 flex w-full max-w-[400px] flex-col border-l border-border bg-background shadow-2xl sm:inset-y-4"
-    >
-      <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
-        <div>
-          <p className="thot-label">Description generation</p>
-          <h2 className="mt-1 font-heading text-xl font-semibold">{statusLabel(run)}</h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {modelLabel}{modelLabel !== run.modelId ? ` (${run.modelId})` : ""} · {run.scope.replaceAll("_", " ")}
-          </p>
-        </div>
-        <Button type="button" variant="ghost" size="icon-lg" aria-label="Close description generation" onClick={onClose}>
-          <X aria-hidden="true" />
+  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-amber-500/35 bg-amber-500/8 px-3 py-2 text-xs leading-5 text-muted-foreground"
+        >
+          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="Unlock stale run"
+            aria-describedby="description-generation-unlock-help"
+            disabled={action !== null}
+            onClick={() => void unlock()}
+          >
+            {action === "unlock" ? <LoaderCircle className="animate-spin" /> : <LockOpen />}
+            {action === "unlock" ? "Unlocking…" : "Unlock"}
+          </Button>
+        ) : null}
+        <Button
+          type="button"
+          variant="destructive"
+          disabled={action !== null}
+          onClick={() => void stop()}
+        >
+          {action === "stop" ? <LoaderCircle className="animate-spin" /> : <Square />}
+          {action === "stop" ? "Stopping…" : "Stop"}
        </Button>
      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
-        {runQuery.isError ? (
+    </div>
+  ) : undefined;
+  return (
+    <FleetLedgerDrawer
+      open
+      ariaLabel="Description generation"
+      eyebrow="Description generation"
+      title={statusLabel(run)}
+      description={`${modelLabel}${modelLabel !== run.modelId ? ` (${run.modelId})` : ""} · ${run.scope.replaceAll("_", " ")}`}
+      onClose={onClose}
+      closeLabel="Close description generation"
+      busy={action !== null}
+      bodyClassName="thot-catalog-drawer__history-layout"
+      footer={footer}
+    >
+      {runQuery.isError ? (
          <div role="alert" className="rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
            {apiErrorMessage(runQuery.error)}
          </div>
@@ -336,7 +402,7 @@ export function DescriptionGenerationDrawer({
          {eventQuery.isError ? <p role="alert" className="mt-2 text-sm text-destructive">{apiErrorMessage(eventQuery.error)}</p> : null}
        </section>

-        <section className="mt-5" aria-label="Description generation history">
+        <section className="thot-catalog-drawer__history mt-5" aria-label="Description generation history">
          <div className="mb-2 flex items-center justify-between gap-3">
            <h3 className="thot-label">Recent runs</h3>
            <span className="text-xs tabular-nums text-muted-foreground">
@@ -371,43 +437,6 @@ export function DescriptionGenerationDrawer({
            </div>
          )}
        </section>
-      </div>
-      {["queued", "running"].includes(run.status) ? (
-        <div className="border-t border-border px-5 py-4">
-          {apparentlyStale ? (
-            <p
-              id="description-generation-unlock-help"
-              className="mb-3 rounded-md border border-amber-500/35 bg-amber-500/8 px-3 py-2 text-xs leading-5 text-muted-foreground"
-            >
-              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="Unlock stale run"
-                aria-describedby="description-generation-unlock-help"
-                disabled={action !== null}
-                onClick={() => void unlock()}
-              >
-                {action === "unlock" ? <LoaderCircle className="animate-spin" /> : <LockOpen />}
-                {action === "unlock" ? "Unlocking…" : "Unlock"}
-              </Button>
-            ) : null}
-            <Button
-              type="button"
-              variant="destructive"
-              disabled={action !== null}
-              onClick={() => void stop()}
-            >
-              {action === "stop" ? <LoaderCircle className="animate-spin" /> : <Square />}
-              {action === "stop" ? "Stopping…" : "Stop"}
-            </Button>
-          </div>
-        </div>
-      ) : null}
-    </aside>
+    </FleetLedgerDrawer>
  );
 }