feat: complete catalog fleet management workflow

frontend/src/shell/database-management/DatabaseTables.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { Menu } from "@base-ui/react/menu";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AgGridReact } from "ag-grid-react";
 import type { ColDef, ICellRendererParams } from "ag-grid-community";
-import { ArrowLeft, ChevronDown, Columns3, Pencil, RefreshCw, Save, Sparkles, Trash2, X } from "lucide-react";
+import { ArrowLeft, ChevronDown, Columns3, History, Pencil, RefreshCw, Save, Sparkles, Trash2, X } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import { ApiError, apiErrorMessage } from "../../api/client";
@@ -23,6 +23,8 @@ import {
 } from "../../api/catalog-databases";
 import type { DatabaseNavigationState } from "./model";
 import { DatabaseColumns } from "./DatabaseColumns";
+import { FleetActionSelector, type FleetActionOption } from "./FleetActionSelector";
+import { FleetLedgerDrawer } from "./FleetLedgerShell";
 
 interface Props {
   database: CatalogDatabase;
@@ -34,27 +36,46 @@ interface Props {
   onOpenOverview: () => void;
   onOpenRelationships: () => void;
   onNavigationStateChange: (state: DatabaseNavigationState) => void;
+  onNestedNavigationChange?: (active: boolean) => void;
   onRunStarted: (run: CatalogSyncRun) => void;
   onOpenSync: () => void;
   onDescriptionGenerationRunStarted: (run: DescriptionGenerationRun) => void;
   onSuggestSensitive: (selection: SensitiveDataSuggestionRequest, scopeLabel: string) => Promise<void>;
+  onCatalogMetricsChanged?: () => void | Promise<void>;
+  metadataModelControl?: ReactNode;
+  presentation?: "legacy" | "fleet";
 }
 
 interface TableGridContext {
   canManage: boolean;
+  presentation: "legacy" | "fleet";
   onOpen: (table: CatalogTable, section: "overview" | "columns", origin: HTMLButtonElement) => void;
 }
 
 function TableActionsCell({ data, context }: ICellRendererParams<CatalogTable, unknown, TableGridContext>) {
   if (!data || !context) return null;
   return (
-    <div className="flex h-full items-center justify-end" onClick={(event) => event.stopPropagation()}>
-      <Button type="button" variant="ghost" size="icon-lg" aria-label={`View columns for ${data.name}`} title={`View columns for ${data.name}`} onClick={(event) => context.onOpen(data, "columns", event.currentTarget)}>
+    <div className="flex h-full items-center justify-end gap-0.5" onClick={(event) => event.stopPropagation()}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-lg"
+        className={context.presentation === "fleet" ? "thot-fleet-icon-action" : undefined}
+        data-tooltip={context.presentation === "fleet" ? "Columns" : undefined}
+        aria-label={`View columns for ${data.name}`}
+        title={context.presentation === "legacy" ? `View columns for ${data.name}` : undefined}
+        onClick={(event) => context.onOpen(data, "columns", event.currentTarget)}
+      >
         <Columns3 aria-hidden="true" />
       </Button>
-      <Button type="button" variant="ghost" size="icon-lg" aria-label={`Edit description for ${data.name}`} title={`Edit metadata for ${data.name}`} disabled={!context.canManage} onClick={(event) => context.onOpen(data, "overview", event.currentTarget)}>
+      <span
+        className={context.presentation === "fleet" ? "thot-fleet-icon-action" : undefined}
+        data-tooltip={context.presentation === "fleet" ? "Edit metadata" : undefined}
+      >
+        <Button type="button" variant="ghost" size="icon-lg" aria-label={`Edit description for ${data.name}`} title={context.presentation === "legacy" ? `Edit metadata for ${data.name}` : undefined} disabled={!context.canManage} onClick={(event) => context.onOpen(data, "overview", event.currentTarget)}>
         <Pencil aria-hidden="true" />
-      </Button>
+        </Button>
+      </span>
     </div>
   );
 }
@@ -69,15 +90,19 @@ export function DatabaseTables({
   onOpenOverview,
   onOpenRelationships,
   onNavigationStateChange,
+  onNestedNavigationChange,
   onRunStarted,
   onOpenSync,
   onDescriptionGenerationRunStarted,
   onSuggestSensitive,
+  onCatalogMetricsChanged,
+  metadataModelControl,
+  presentation = "legacy",
 }: Props) {
   const databaseId = database.id!;
   const queryClient = useQueryClient();
   const queryKey = ["catalog-tables", databaseId] as const;
-  const { data = [], isLoading, isFetching, refetch } = useQuery({ queryKey, queryFn: () => listCatalogTables(databaseId), retry: false });
+  const { data = [], error, isError, isLoading, isFetching, refetch } = useQuery({ queryKey, queryFn: () => listCatalogTables(databaseId), retry: false });
   const [search, setSearch] = useState("");
   const [displayedCount, setDisplayedCount] = useState(0);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
@@ -96,16 +121,20 @@ export function DatabaseTables({
   const originRef = useRef<HTMLButtonElement | null>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
   const actionsTriggerRef = useRef<HTMLButtonElement>(null);
+  const fleetActionSelectRef = useRef<HTMLSelectElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const activeTable = activeTableId ? data.find((table) => table.id === activeTableId) : undefined;
   const editorFingerprint = JSON.stringify([description, generatedDescription]);
   const editorDirty = Boolean(activeTableId && editorFingerprint !== baseline);
   const dirty = tableSection === "columns" ? columnNavigation.dirty : editorDirty;
   const navigationBusy = busy !== null || (tableSection === "columns" && columnNavigation.busy);
+  const nestedNavigationActive = presentation === "fleet" && Boolean(activeTable) && tableSection === "columns";
   const bindingReady = database.connectionStatus === "reachable" && database.testedVersion === database.version;
   const currentRun = activeRun ?? database.activeSyncRun;
 
   useEffect(() => { onNavigationStateChange({ dirty, busy: navigationBusy }); }, [dirty, navigationBusy, onNavigationStateChange]);
+  useEffect(() => { onNestedNavigationChange?.(nestedNavigationActive); }, [nestedNavigationActive, onNestedNavigationChange]);
+  useEffect(() => () => { onNestedNavigationChange?.(false); }, [onNestedNavigationChange]);
   useEffect(() => {
     if (!activeTableId || !activeTable || editorVersion === activeTable.version || busy) return;
     setStale(true);
@@ -118,7 +147,10 @@ export function DatabaseTables({
   }, [pendingDelete]);
   const closeDeleteConfirmation = () => {
     setPendingDelete(null);
-    window.setTimeout(() => actionsTriggerRef.current?.focus(), 0);
+    window.setTimeout(() => {
+      if (presentation === "fleet") fleetActionSelectRef.current?.focus();
+      else actionsTriggerRef.current?.focus();
+    }, 0);
   };
 
   const openTable = (table: CatalogTable, section: "overview" | "columns", origin: HTMLButtonElement) => {
@@ -161,6 +193,7 @@ export function DatabaseTables({
       setBaseline(JSON.stringify([updated.description ?? "", updated.generatedDescription ?? ""]));
       setEditorVersion(updated.version);
       setStale(false);
+      void onCatalogMetricsChanged?.();
       toast.success("Table metadata saved");
     } catch (error) {
       if (error instanceof ApiError && error.code === "table_stale") {
@@ -208,9 +241,10 @@ export function DatabaseTables({
       setSelectedIds([]);
       setPendingDelete(null);
       window.setTimeout(() => searchInputRef.current?.focus(), 0);
+      void onCatalogMetricsChanged?.();
       toast.success(target === "columns"
-        ? `Deleted ${counts.columns} catalog columns`
-        : `Deleted ${counts.relationships} catalog relationships`);
+        ? `${presentation === "fleet" ? "Cleared" : "Deleted"} ${counts.columns} catalog columns`
+        : `${presentation === "fleet" ? "Cleared" : "Deleted"} ${counts.relationships} catalog relationships`);
     } catch (error) {
       toast.error(apiErrorMessage(error));
     } finally { setBusy(null); }
@@ -222,6 +256,7 @@ export function DatabaseTables({
       await queryClient.invalidateQueries({ queryKey, exact: true });
       gridRef.current?.api.deselectAll();
       setSelectedIds([]);
+      void onCatalogMetricsChanged?.();
       toast.success(`Copied ${counts.copied} description${counts.copied === 1 ? "" : "s"}; skipped ${counts.skipped}`);
     } catch (error) {
       toast.error(apiErrorMessage(error));
@@ -258,14 +293,152 @@ export function DatabaseTables({
     }
   };
 
+  type FleetTableAction =
+    | "generate-descriptions"
+    | "sync-tables"
+    | "sync-columns"
+    | "consolidate-descriptions"
+    | "suggest-sensitive"
+    | "clear-columns"
+    | "clear-relationships";
+
+  const fleetActions: readonly FleetActionOption<FleetTableAction>[] = [
+    {
+      id: "generate-descriptions",
+      label: "Generate descriptions",
+      group: "Descriptions",
+      runLabel: "Generate",
+      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to generate descriptions."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : !selectedMetadataModel
+            ? "Choose a metadata model first."
+            : descriptionGenerationActive || Boolean(currentRun)
+              ? "Wait for the active catalog operation to finish."
+              : busy !== null
+                ? "Another action is running."
+                : undefined,
+    },
+    {
+      id: "consolidate-descriptions",
+      label: "Move generated to Description",
+      group: "Descriptions",
+      runLabel: "Move",
+      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to update metadata."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : busy !== null || Boolean(currentRun)
+            ? "Wait for the active catalog operation to finish."
+            : undefined,
+    },
+    {
+      id: "sync-tables",
+      label: "Synchronize tables",
+      group: "Synchronization",
+      scopeLabel: "All tables in this database",
+      runLabel: "Synchronize",
+      disabled: !canManage || !bindingReady || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to synchronize the catalog."
+        : !bindingReady
+          ? "Test the current database binding first."
+          : busy !== null || Boolean(currentRun)
+            ? "Wait for the active catalog operation to finish."
+            : undefined,
+    },
+    {
+      id: "sync-columns",
+      label: "Synchronize columns",
+      group: "Synchronization",
+      runLabel: "Synchronize",
+      disabled: !canManage || selectedIds.length === 0 || !bindingReady || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to synchronize the catalog."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : !bindingReady
+            ? "Test the current database binding first."
+            : busy !== null || Boolean(currentRun)
+              ? "Wait for the active catalog operation to finish."
+              : undefined,
+    },
+    {
+      id: "suggest-sensitive",
+      label: "Suggest sensitive fields",
+      group: "Sensitive data",
+      runLabel: "Suggest",
+      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to review sensitive data."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : !selectedMetadataModel
+            ? "Choose a metadata model first."
+            : descriptionGenerationActive || Boolean(currentRun)
+              ? "Wait for the active catalog operation to finish."
+              : busy !== null
+                ? "Another action is running."
+                : undefined,
+    },
+    {
+      id: "clear-columns",
+      label: "Clear catalog columns",
+      group: "Catalog cleanup",
+      tone: "destructive",
+      runLabel: "Review cleanup",
+      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to clear catalog metadata."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : busy !== null || Boolean(currentRun)
+            ? "Wait for the active catalog operation to finish."
+            : undefined,
+    },
+    {
+      id: "clear-relationships",
+      label: "Clear catalog relationships",
+      group: "Catalog cleanup",
+      tone: "destructive",
+      runLabel: "Review cleanup",
+      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
+      disabledReason: !canManage
+        ? "You do not have permission to clear catalog metadata."
+        : selectedIds.length === 0
+          ? "Select at least one table."
+          : busy !== null || Boolean(currentRun)
+            ? "Wait for the active catalog operation to finish."
+            : undefined,
+    },
+  ];
+
+  const runFleetAction = async (action: FleetTableAction) => {
+    if (action === "generate-descriptions") await generateDescriptions();
+    else if (action === "sync-tables") await synchronize("tables");
+    else if (action === "consolidate-descriptions") await consolidateDescriptions();
+    else if (action === "sync-columns") await synchronize("columns", selectedIds);
+    else if (action === "suggest-sensitive") await suggestSensitive();
+    else if (action === "clear-columns") setPendingDelete("columns");
+    else setPendingDelete("relationships");
+  };
+
+  const clearSelection = () => {
+    gridRef.current?.api.deselectAll();
+    setSelectedIds([]);
+  };
+
   const columns = useMemo<ColDef<CatalogTable>[]>(() => [
     { field: "name", headerName: "Name", minWidth: 250, flex: 1, cellClass: "font-mono text-xs" },
     { field: "sourceComment", headerName: "Source comment", minWidth: 260, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
     { field: "generatedDescription", headerName: "Generated description", minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
     { field: "description", headerName: "Description", minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
-    { colId: "actions", headerName: "", width: 104, minWidth: 104, maxWidth: 104, pinned: "right", sortable: false, filter: false, resizable: false, cellRenderer: TableActionsCell },
+    { colId: "actions", headerName: "Actions", width: 104, minWidth: 104, maxWidth: 104, pinned: "right", lockPinned: true, sortable: false, filter: false, resizable: false, suppressMovable: true, suppressHeaderMenuButton: true, cellRenderer: TableActionsCell },
   ], []);
-  const context = useMemo<TableGridContext>(() => ({ canManage, onOpen: openTable }), [canManage, data]);
+  const context = useMemo<TableGridContext>(() => ({ canManage, presentation, onOpen: openTable }), [canManage, data, presentation]);
   const visibleSelected = useMemo(() => {
     const term = search.trim().toLocaleLowerCase();
     if (!term) return selectedIds.length;
@@ -273,6 +446,17 @@ export function DatabaseTables({
     return data.filter((table) => selected.has(table.id) && [table.name, table.sourceComment, table.generatedDescription, table.description]
       .some((value) => value?.toLocaleLowerCase().includes(term))).length;
   }, [data, search, selectedIds]);
+  const fleetQueryError = presentation === "fleet" && isError ? (
+    <div className="grid min-h-[280px] flex-1 place-items-center p-6" role="alert">
+      <div className="max-w-lg rounded-lg border border-destructive/30 bg-destructive/8 p-5 text-sm">
+        <p className="font-semibold text-destructive">Catalog tables could not be loaded.</p>
+        <p className="mt-1 leading-5 text-muted-foreground">{apiErrorMessage(error)}</p>
+        <Button type="button" variant="outline" className="mt-4" disabled={isFetching} onClick={() => void refetch()}>
+          <RefreshCw className={isFetching ? "animate-spin" : ""} aria-hidden="true" /> Retry tables
+        </Button>
+      </div>
+    </div>
+  ) : null;
 
   const databaseHeader = (
     <div className="px-4 pt-5 sm:px-5">
@@ -296,6 +480,126 @@ export function DatabaseTables({
     </div>
   );
 
+  if (activeTable && presentation === "fleet") {
+    if (tableSection === "columns") {
+      return (
+        <section aria-label={`Columns for ${activeTable.name}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+          <div className="flex min-h-12 flex-wrap items-center gap-3 border-b border-border bg-muted/25 px-3 py-2">
+            <Button
+              type="button"
+              variant="outline"
+              className="thot-fleet-icon-action border-primary/35 bg-primary/8 shadow-sm"
+              disabled={navigationBusy}
+              data-tooltip="Tables"
+              aria-label="Back to tables"
+              onClick={leaveTable}
+            >
+              <ArrowLeft aria-hidden="true" /> Back to tables
+            </Button>
+            <div className="min-w-0">
+              <p className="thot-label">Physical table</p>
+              <h3 className="truncate font-heading text-lg font-semibold">{activeTable.name}</h3>
+            </div>
+          </div>
+          <DatabaseColumns
+            databaseId={databaseId}
+            table={activeTable}
+            canManage={canManage}
+            selectedMetadataModel={selectedMetadataModel}
+            descriptionGenerationActive={descriptionGenerationActive}
+            onDescriptionGenerationRunStarted={onDescriptionGenerationRunStarted}
+            onNavigationStateChange={setColumnNavigation}
+            onSync={() => void synchronize("columns", [activeTable.id])}
+            onSuggestSensitive={onSuggestSensitive}
+            bindingReady={bindingReady}
+            catalogOperationActive={Boolean(currentRun)}
+            onCatalogMetricsChanged={onCatalogMetricsChanged}
+            metadataModelControl={metadataModelControl}
+            presentation="fleet"
+          />
+        </section>
+      );
+    }
+
+    return (
+      <section aria-label={`Tables for ${database.workspaceName}`} className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
+        <div className="thot-fleet-grid-toolbar flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2">
+          <span className="thot-label whitespace-nowrap">Catalog tables</span>
+          <input
+            ref={searchInputRef}
+            className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15"
+            aria-label="Search tables"
+            placeholder="Search"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+          />
+          <span className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">
+            {search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}
+          </span>
+          <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}>
+            <RefreshCw className={isFetching ? "animate-spin" : ""} /> Refresh
+          </Button>
+        </div>
+        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
+          <div className="thot-database-grid thot-fleet-ledger-grid ag-theme-alpine absolute inset-0 h-full w-full">
+            <AgGridReact<CatalogTable>
+              ref={gridRef}
+              rowData={data}
+              columnDefs={columns}
+              context={context}
+              loading={isLoading}
+              quickFilterText={search}
+              defaultColDef={{ sortable: true, filter: true, resizable: true }}
+              getRowId={({ data: table }) => table.id}
+              rowSelection={{ mode: "multiRow", selectAll: "filtered", enableClickSelection: false }}
+              onSelectionChanged={({ api }) => setSelectedIds(api.getSelectedRows().map((table) => table.id))}
+              onModelUpdated={({ api }) => setDisplayedCount(api.getDisplayedRowCount())}
+              rowHeight={44}
+              headerHeight={38}
+              animateRows={false}
+              overlayNoRowsTemplate="No catalog tables. Test the binding, then sync tables."
+            />
+          </div>
+        </div>}
+        <FleetLedgerDrawer
+          open
+          eyebrow="Catalog metadata"
+          title="Review table description"
+          description="Physical schema fields are read-only. Review fields can be edited."
+          onClose={leaveTable}
+          closeLabel="Close table metadata"
+          busy={busy !== null}
+          footer={(
+            <>
+              <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>Cancel</Button>
+              <Button type="button" disabled={!canManage || !editorDirty || busy !== null || stale} onClick={() => void save()}>
+                <Save aria-hidden="true" />{busy === "save" ? "Saving…" : "Save metadata"}
+              </Button>
+            </>
+          )}
+        >
+          <p className="thot-label">Physical table</p>
+          <h3 className="mt-1 break-words font-heading text-xl font-semibold">{activeTable.name}</h3>
+          {stale ? (
+            staleBannerOpen ? (
+              <div className="mt-4 rounded-md border border-amber-500/50 bg-amber-500/8 p-4 text-sm">
+                <p className="font-semibold">A newer table description is available.</p>
+                <p className="mt-1 text-muted-foreground">Your draft is preserved until you reload the current metadata.</p>
+                <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>Reload latest</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>Keep editing</Button></div>
+              </div>
+            ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>Reload the latest value before this description can be saved.</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>Reload latest</Button></div>
+          ) : null}
+          <div className="mt-5 grid gap-4">
+            <label className="grid gap-1.5 text-sm font-semibold">Physical table name<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
+            <label className="grid gap-1.5 text-sm font-semibold">Source comment<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
+            <label className="grid gap-1.5 text-sm font-semibold">Generated description<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
+            <label className="grid gap-1.5 text-sm font-semibold">Description<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">Leave blank to keep the curated description empty.</span></label>
+          </div>
+        </FleetLedgerDrawer>
+      </section>
+    );
+  }
+
   if (activeTable) {
     return (
       <section aria-label={`Table ${activeTable.name}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
@@ -321,6 +625,7 @@ export function DatabaseTables({
               onNavigationStateChange={setColumnNavigation}
               onSync={() => void synchronize("columns", [activeTable.id])}
               onSuggestSensitive={onSuggestSensitive}
+              onCatalogMetricsChanged={onCatalogMetricsChanged}
             />
           ) : (
             <div className="min-h-0 overflow-y-auto px-4 py-5">
@@ -353,9 +658,9 @@ export function DatabaseTables({
 
   return (
     <section aria-label={`Tables for ${database.workspaceName}`} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
-      {databaseHeader}
-      <div className="mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5">
-        <div className="flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2">
+      {presentation === "legacy" ? databaseHeader : null}
+      <div className={presentation === "fleet" ? "thot-fleet-grid-surface flex min-h-0 flex-1 flex-col overflow-hidden bg-card" : "mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5"}>
+        <div className={`${presentation === "fleet" ? "thot-fleet-grid-toolbar " : ""}flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2`}>
           {selectedIds.length > 0 ? (
             pendingDelete ? (
               <div
@@ -368,14 +673,20 @@ export function DatabaseTables({
               >
                 <div className="mr-auto min-w-56">
                   <p id="table-cleanup-confirmation" className="text-sm font-semibold">
-                    {pendingDelete === "columns"
+                    {presentation === "fleet"
+                      ? `Clear catalog ${pendingDelete} for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`
+                      : pendingDelete === "columns"
                       ? `Delete all catalog columns for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`
                       : `Delete all relationships for ${selectedIds.length} table${selectedIds.length === 1 ? "" : "s"}?`}
                   </p>
                   <p className="text-xs text-muted-foreground">
-                    {pendingDelete === "columns"
-                      ? "Only columns belonging to the selected catalog tables will be removed."
-                      : "All incoming and outgoing relationships for the selected catalog tables will be removed."}
+                    {presentation === "fleet"
+                      ? pendingDelete === "columns"
+                        ? "Only synchronized catalog columns for these tables will be cleared. The source database is not modified."
+                        : "Only synchronized catalog relationships for these tables will be cleared. The source database is not modified."
+                      : pendingDelete === "columns"
+                        ? "Only columns belonging to the selected catalog tables will be removed."
+                        : "All incoming and outgoing relationships for the selected catalog tables will be removed."}
                   </p>
                 </div>
                 <Button type="button" variant="ghost" disabled={busy !== null} onClick={closeDeleteConfirmation}>Cancel</Button>
@@ -386,88 +697,86 @@ export function DatabaseTables({
                   disabled={busy !== null}
                   onClick={() => void deleteMetadata(pendingDelete)}
                 >
-                  <Trash2 />{pendingDelete === "columns" ? "Delete columns" : "Delete relationships"}
+                  <Trash2 />{presentation === "fleet" ? "Clear catalog" : pendingDelete === "columns" ? "Delete columns" : "Delete relationships"}
                 </Button>
               </div>
             ) : (
-              <>
-                <span className="text-sm font-semibold">{selectedIds.length} selected</span>
-                {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} hidden by filter</span> : null}
-                <Menu.Root>
-                  <Menu.Trigger ref={actionsTriggerRef} className="inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:pointer-events-none disabled:opacity-50" disabled={busy !== null}>Actions <ChevronDown className="size-4" /></Menu.Trigger>
-                  <Menu.Portal>
-                    <Menu.Positioner side="bottom" align="start" sideOffset={4}>
-                      <Menu.Popup className="z-50 min-w-64 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none">
-                        <Menu.Item
-                          className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45"
-                          disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)}
-                          onClick={() => void generateDescriptions()}
-                        >
-                          Generate {selectedIds.length === 1 ? "description" : "descriptions"}
-                        </Menu.Item>
-                        <Menu.Item
-                          className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45"
-                          disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)}
-                          onClick={() => void synchronize("columns", selectedIds)}
-                        >
-                          Synchronize columns
-                        </Menu.Item>
-                        <Menu.Item
-                          className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45"
-                          disabled={!canManage || busy !== null || Boolean(currentRun)}
-                          onClick={() => void consolidateDescriptions()}
-                        >
-                          Move generated description to Description
-                        </Menu.Item>
-                        <Menu.Separator className="my-1 h-px bg-border" />
-                        <Menu.Item
-                          className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45"
-                          disabled={!canManage || busy !== null || Boolean(currentRun)}
-                          onClick={() => setPendingDelete("columns")}
-                        >
-                          Delete all columns
-                        </Menu.Item>
-                        <Menu.Item
-                          className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45"
-                          disabled={!canManage || busy !== null || Boolean(currentRun)}
-                          onClick={() => setPendingDelete("relationships")}
-                        >
-                          Delete all relationships
-                        </Menu.Item>
-                      </Menu.Popup>
-                    </Menu.Positioner>
-                  </Menu.Portal>
-                </Menu.Root>
-                <Button
-                  type="button"
-                  variant="outline"
-                  disabled={!canManage || descriptionGenerationActive || busy !== null}
-                  title={descriptionGenerationActive ? "Wait for the active description generation to finish" : undefined}
-                  onClick={() => void suggestSensitive()}
-                >
-                  <Sparkles />{busy === "suggest" ? "Suggesting…" : "Suggest sensitive fields"}
-                </Button>
-                <Button type="button" variant="ghost" onClick={() => { gridRef.current?.api.deselectAll(); setSelectedIds([]); }}><X />Clear</Button>
-              </>
+              presentation === "fleet" ? (
+                <>
+                  <FleetActionSelector
+                    actions={fleetActions}
+                    selectedCount={selectedIds.length}
+                    hiddenSelectedCount={selectedIds.length - visibleSelected}
+                    busy={busy !== null}
+                    busyLabel={busy === "generate" ? "Generating…" : busy === "suggest" ? "Suggesting…" : "Running…"}
+                    selectRef={fleetActionSelectRef}
+                    onRun={runFleetAction}
+                    onClear={clearSelection}
+                    renderContext={(action) => action === "generate-descriptions" || action === "suggest-sensitive" ? metadataModelControl : null}
+                    label="Table action"
+                  />
+                </>
+              ) : (
+                <>
+                  <span className="text-sm font-semibold">{selectedIds.length} selected</span>
+                  {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} hidden by filter</span> : null}
+                  <Menu.Root>
+                    <Menu.Trigger ref={actionsTriggerRef} className="inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:pointer-events-none disabled:opacity-50" disabled={busy !== null}>Actions <ChevronDown className="size-4" /></Menu.Trigger>
+                    <Menu.Portal>
+                      <Menu.Positioner side="bottom" align="start" sideOffset={4}>
+                        <Menu.Popup className="z-50 min-w-64 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none">
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateDescriptions()}>Generate {selectedIds.length === 1 ? "description" : "descriptions"}</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("columns", selectedIds)}>Synchronize columns</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void consolidateDescriptions()}>Move generated description to Description</Menu.Item>
+                          <Menu.Separator className="my-1 h-px bg-border" />
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => setPendingDelete("columns")}>Delete all columns</Menu.Item>
+                          <Menu.Item className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => setPendingDelete("relationships")}>Delete all relationships</Menu.Item>
+                        </Menu.Popup>
+                      </Menu.Positioner>
+                    </Menu.Portal>
+                  </Menu.Root>
+                  <Button type="button" variant="outline" disabled={!canManage || descriptionGenerationActive || busy !== null} title={descriptionGenerationActive ? "Wait for the active description generation to finish" : undefined} onClick={() => void suggestSensitive()}><Sparkles />{busy === "suggest" ? "Suggesting…" : "Suggest sensitive fields"}</Button>
+                  <Button type="button" variant="ghost" onClick={clearSelection}><X />Clear</Button>
+                </>
+              )
             )
           ) : (
-            <>
-              <span className="thot-label whitespace-nowrap">Catalog tables</span>
-              <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label="Search tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
-              <span
-                aria-live="polite"
-                className="whitespace-nowrap text-xs tabular-nums text-muted-foreground"
-              >
-                {search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}
-              </span>
-              <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />Refresh</Button>
-              <Button type="button" disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)} title={!bindingReady ? "Test the current database binding before synchronizing tables" : undefined} onClick={() => void synchronize("tables")}><RefreshCw className={busy === "sync" ? "animate-spin" : ""} />Sync tables</Button>
-            </>
+            presentation === "fleet" ? (
+              <>
+                <FleetActionSelector
+                  actions={fleetActions}
+                  selectedCount={0}
+                  busy={busy !== null}
+                  busyLabel={busy === "generate" ? "Generating…" : busy === "suggest" ? "Suggesting…" : "Running…"}
+                  selectRef={fleetActionSelectRef}
+                  onRun={runFleetAction}
+                  onClear={clearSelection}
+                  renderContext={(action) => action === "generate-descriptions" || action === "suggest-sensitive" ? metadataModelControl : null}
+                  label="Table action"
+                />
+                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label="Search tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
+                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}</span>
+                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />Refresh</Button>
+              </>
+            ) : (
+              <>
+                <span className="thot-label whitespace-nowrap">Catalog tables</span>
+                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label="Search tables" placeholder="Search" value={search} onChange={(event) => setSearch(event.target.value)} />
+                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? `${displayedCount} of ${data.length}` : displayedCount}</span>
+                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />Refresh</Button>
+                <Button type="button" disabled={!canManage || !bindingReady || busy !== null || Boolean(currentRun)} title={!bindingReady ? "Test the current database binding before synchronizing tables" : undefined} onClick={() => void synchronize("tables")}><RefreshCw className={busy === "sync" ? "animate-spin" : ""} />Sync tables</Button>
+              </>
+            )
           )}
+          {presentation === "fleet" ? (
+            <Button type="button" size="sm" variant="outline" className="thot-fleet-nav-action thot-fleet-nav-action--below" data-tooltip="Synchronization history" onClick={onOpenSync}>
+              {currentRun ? <RefreshCw className="animate-spin" aria-hidden="true" /> : <History aria-hidden="true" />} Sync history
+            </Button>
+          ) : null}
         </div>
         {!bindingReady ? <div className="border-b border-border bg-muted/35 px-4 py-3 text-sm text-muted-foreground">Test the current database binding from Overview before synchronizing tables.</div> : null}
-        <div className="relative min-h-[280px] flex-1">
-          <div className="thot-database-grid ag-theme-alpine absolute inset-0 h-full w-full">
+        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
+          <div className={`thot-database-grid ${presentation === "fleet" ? "thot-fleet-ledger-grid " : ""}ag-theme-alpine absolute inset-0 h-full w-full`}>
             <AgGridReact<CatalogTable>
               ref={gridRef}
               rowData={data}
@@ -489,7 +798,7 @@ export function DatabaseTables({
               overlayNoRowsTemplate="No catalog tables. Test the binding, then sync tables."
             />
           </div>
-        </div>
+        </div>}
       </div>
     </section>
   );