@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/BulkRunsHub/SummaryStrip.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import type { BulkRunsTimeRange, BulkTranslateBatchSummary } from '../TranslationHub/BulkTranslate.types.js';
+interface Props {
+    /** All currently loaded batches (full dataset, not just the page slice). */
+    batches: BulkTranslateBatchSummary[];
+    /** Total count from the API (`total` field in list response). */
+    total: number;
+    timeRange: BulkRunsTimeRange;
+    onTimeRangeChange: (r: BulkRunsTimeRange) => void;
+    /**
+     * ROUND5-3 (v1.2.6): when the filter bar has explicit `since` /
+     * `until` dates that don't match a preset, the preset pills must
+     * NOT advertise themselves as the active window — the table is
+     * filtered by the custom range, the KPIs are scoped to the preset,
+     * and showing "Last 7 days" pressed contradicts both surfaces.
+     * When true, all preset pills go inactive and a read-only "Custom"
+     * pill lights up to communicate the actual state.
+     */
+    hasCustomDateFilter?: boolean;
+}
+export declare const SummaryStrip: React.FC<Props>;
+export {};

package/dist/views/BulkRunsHub/SummaryStrip.js

@@ -0,0 +1,249 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPillColors } from '../shared/filterPillStyle.js';
+import { formatCost } from '../shared/format.js';
+import { isActiveStatus } from '../TranslationHub/BulkTranslate.types.js';
+// ---------------------------------------------------------------------------
+// Shared styles — mirroring StatusStrip.tsx CARD_STYLE exactly.
+// ---------------------------------------------------------------------------
+const CARD_STYLE = {
+    flex: 1,
+    padding: '1rem 1.25rem',
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px'
+};
+const LABEL_STYLE = {
+    margin: 0,
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)'
+};
+const VALUE_STYLE = {
+    margin: '0.25rem 0 0',
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    color: 'var(--theme-elevation-1000)'
+};
+const SUBVALUE_STYLE = {
+    margin: '0.25rem 0 0',
+    fontSize: '0.75rem',
+    color: 'var(--theme-elevation-500)'
+};
+// ---------------------------------------------------------------------------
+// Time-range toggle
+// ---------------------------------------------------------------------------
+const TIME_RANGE_LABEL = {
+    '7d': 'Last 7 days',
+    '30d': 'Last 30 days',
+    all: 'All time'
+};
+const TIME_RANGE_MS = {
+    '7d': 7 * 24 * 60 * 60 * 1000,
+    '30d': 30 * 24 * 60 * 60 * 1000,
+    all: null
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function fmtNum(n) {
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+    return n.toString();
+}
+function relTime(iso) {
+    if (!iso) return '—';
+    const diff = Date.now() - new Date(iso).getTime();
+    const s = Math.floor(diff / 1000);
+    if (s < 60) return `${s}s ago`;
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+    if (s < 86_400) return `${Math.floor(s / 3600)}h ago`;
+    return `${Math.floor(s / 86_400)}d ago`;
+}
+function filterByRange(batches, range) {
+    const ms = TIME_RANGE_MS[range];
+    if (ms === null) return batches;
+    const cutoff = Date.now() - ms;
+    return batches.filter((b)=>new Date(b.createdAt).getTime() >= cutoff);
+}
+export const SummaryStrip = ({ batches, total, timeRange, onTimeRangeChange, hasCustomDateFilter = false })=>{
+    const activeNow = batches.filter((b)=>isActiveStatus(b.status)).length;
+    const inWindow = filterByRange(batches, timeRange);
+    const windowCost = inWindow.reduce((sum, b)=>sum + (b.actualCostUsd ?? b.estimatedCostUsd ?? 0), 0);
+    const windowUnits = inWindow.reduce((sum, b)=>sum + b.totalUnits, 0);
+    // Last completed run — pick the most recent completedAt across all loaded
+    // batches (not just the window, so it's always meaningful).
+    const lastCompletedAt = batches.reduce((latest, b)=>{
+        if (!b.completedAt) return latest;
+        if (latest === null) return b.completedAt;
+        return b.completedAt > latest ? b.completedAt : latest;
+    }, null);
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    gap: '0.25rem'
+                },
+                children: [
+                    Object.keys(TIME_RANGE_LABEL).map((t)=>{
+                        // ROUND5-3 (v1.2.6): when a custom date range is in effect
+                        // via the filter bar, no preset is the "active" window —
+                        // de-activate every preset pill so the row stops claiming a
+                        // window that contradicts the table.
+                        const isActive = !hasCustomDateFilter && timeRange === t;
+                        const colors = filterPillColors(isActive);
+                        return /*#__PURE__*/ _jsx("button", {
+                            "aria-pressed": isActive,
+                            type: "button",
+                            onClick: ()=>onTimeRangeChange(t),
+                            style: {
+                                padding: '0.3rem 0.65rem',
+                                fontSize: '0.75rem',
+                                background: colors.background,
+                                border: colors.border,
+                                borderRadius: '4px',
+                                color: colors.color,
+                                cursor: 'pointer',
+                                fontWeight: isActive ? 600 : 400
+                            },
+                            children: TIME_RANGE_LABEL[t]
+                        }, t);
+                    }),
+                    hasCustomDateFilter && (()=>{
+                        const colors = filterPillColors(true);
+                        return /*#__PURE__*/ _jsx("span", {
+                            "aria-pressed": "true",
+                            role: "status",
+                            style: {
+                                padding: '0.3rem 0.65rem',
+                                fontSize: '0.75rem',
+                                background: colors.background,
+                                border: colors.border,
+                                borderRadius: '4px',
+                                color: colors.color,
+                                fontWeight: 600,
+                                cursor: 'default'
+                            },
+                            title: "Custom date range active via the filter bar below. Clear the Since / Until fields to return to a preset window.",
+                            children: "Custom"
+                        });
+                    })()
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: LABEL_STYLE,
+                                children: "Active now"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: activeNow
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                children: activeNow === 0 ? 'No runs in progress' : 'Run(s) in progress'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: LABEL_STYLE,
+                                children: "Total batches"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: fmtNum(total)
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                children: "All time"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsxs("p", {
+                                style: LABEL_STYLE,
+                                children: [
+                                    TIME_RANGE_LABEL[timeRange],
+                                    " cost"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: formatCost(windowCost)
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                children: "Actual spend (loaded batches)"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsxs("p", {
+                                style: LABEL_STYLE,
+                                children: [
+                                    TIME_RANGE_LABEL[timeRange],
+                                    " units"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: fmtNum(windowUnits)
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                children: "Translation units processed"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: LABEL_STYLE,
+                                children: "Last run"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                title: lastCompletedAt ?? undefined,
+                                children: lastCompletedAt ? relTime(lastCompletedAt) : '—'
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                children: lastCompletedAt ? new Date(lastCompletedAt).toLocaleDateString(undefined, {
+                                    month: 'short',
+                                    day: 'numeric',
+                                    year: 'numeric'
+                                }) : 'No completed runs yet'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/views/BulkRunsHub/bucket-grouping.d.ts

@@ -0,0 +1,200 @@
+/**
+ * Group a flat list of `BatchJobSummary` units into a 2-level tree:
+ *
+ *   Bucket (collection or global)
+ *     └── Document
+ *           └── Locales (rendered inline as chips, not as separate rows)
+ *
+ * Editor mental model is collection-shaped, not unit-shaped — direct quote:
+ * "let's say 50 docs from one collection fail but 150 are completed maybe
+ * I want to trigger retry for those 50 easily." The flat list doesn't
+ * surface that grouping; this helper does.
+ *
+ * Heuristic for distinguishing globals from collections: the worker stores
+ * `documentId === collection` for globals (the slug doubles as the id),
+ * whereas collections have a numeric / UUID document id. Confirmed against
+ * `api.ts:translateGlobal` which returns
+ * `{ documentId: options.global, collection: options.global, ... }`.
+ */
+import type { BatchJobSummary, BatchUnitCountsByCollection } from '../TranslationHub/BulkTranslate.types.js';
+export type DocGroup = {
+    collection: string;
+    documentId: string;
+    /** One entry per locale for this (collection, docId). */
+    jobs: BatchJobSummary[];
+    /** How many of this doc's locales finished as `failed`. */
+    failedLocaleCount: number;
+    /** How many of this doc's locales finished as `success`. */
+    succeededLocaleCount: number;
+    /**
+     * Per-doc wallclock span: `max(completedAt) − min(startedAt)` across
+     * this doc's locales. Primary duration metric at the doc level —
+     * answers "from when we started translating this doc to when the
+     * last locale finished." Includes any throttle queue wait the doc's
+     * locales sat through. Null when timestamps aren't available
+     * (in-flight unit).
+     */
+    docSpanMs: number | null;
+    /**
+     * Sum of `processingDurationMs` across this doc's locales — total AI
+     * compute time for the doc. Null on legacy units that pre-date the
+     * `processingDurationMs` column.
+     */
+    docAiActiveMs: number | null;
+    /**
+     * `docSpanMs − docAiActiveMs`, clamped ≥0. Pairs with `docAiActiveMs`
+     * as the secondary "AI active / queue wait" sub-line. Null when
+     * either source is null.
+     */
+    docQueueWaitMs: number | null;
+    /** Total cost across all locales for this doc, in USD. */
+    totalCostUsd: number;
+    /** Max attempts across this doc's locales. */
+    maxAttempts: number;
+};
+export type Bucket = {
+    /** Collection slug, or global slug. Used as the bucket key. */
+    collection: string;
+    /** `true` when this is a global (single row), `false` for collections. */
+    isGlobal: boolean;
+    /** Docs in this bucket, keyed by `documentId`. Ordered insertion. */
+    docs: Map<string, DocGroup>;
+    /**
+     * Total units across the ENTIRE bucket (from the backend's
+     * `countsByCollection` aggregate). Not just the paginated loaded
+     * subset. The doc rows in `docs` may be a subset of this — render
+     * `docs.size` of `totalDocs` to communicate the gap.
+     */
+    totalUnits: number;
+    succeededCount: number;
+    failedCount: number;
+    pendingCount: number;
+    runningCount: number;
+    skippedCount: number;
+    revertedCount: number;
+    /** Distinct documents in this bucket (from backend, not paginated). */
+    totalDocs: number;
+    /** Docs actually loaded into the `docs` map. ≤ totalDocs when paginated. */
+    loadedDocs: number;
+    /** Top-2 failure codes by frequency, for the bucket header summary. */
+    topFailureCodes: Array<{
+        code: string;
+        count: number;
+    }>;
+    /** Distinct failure code count — used to decide "show breakdown" CTA. */
+    distinctFailureCodes: number;
+    /** UX-spec per-collection duration aggregates. See `BatchUnitCountsByCollection`. */
+    collectionSpanMs: number | null;
+    aiActiveMs: number | null;
+    queueWaitMs: number | null;
+    /**
+     * v1.2.7: filter-aware doc counts per bucket. Keyed by the UI filter
+     * chip name (`all`, `pending`, `running`, `completed`, `failed`,
+     * `skipped`, `reverted`). Drives the bucket-header count + the
+     * filter-aware "hide bucket when 0" rule. Falls back to a derived
+     * shape from the scalar counts when the backend response is pre-1.2.7.
+     */
+    docCountsByStatus: {
+        all: number;
+        pending: number;
+        running: number;
+        completed: number;
+        failed: number;
+        skipped: number;
+        reverted: number;
+    };
+};
+/**
+ * Filter chip values shared with the BatchRow drill-down. Mirrors
+ * `UNIT_FILTER_CHIPS` there — duplicated here so the bucket helpers can
+ * type the active filter without importing the React module (which
+ * would create a cycle).
+ */
+export type BucketStatusFilter = 'all' | 'pending' | 'running' | 'completed' | 'failed' | 'skipped' | 'reverted';
+/**
+ * Resolve the bucket header count for the active filter pill. Returns a
+ * UNIT-level count (the historical semantics — `succeededCount`,
+ * `failedCount` etc. on the bucket are unit-based). When the filter is
+ * `all`, returns `totalUnits`. Otherwise returns the matching scalar.
+ *
+ * Doc-level counts (`docCountsByStatus`) stay on the bucket for callers
+ * that need "how many distinct docs match this filter" — e.g. the
+ * `shouldBucketBeVisibleUnderFilter` rule below, which has to know
+ * whether any docs at all will render under the active filter.
+ */
+export declare function getBucketCountForFilter(bucket: Pick<Bucket, 'totalUnits' | 'succeededCount' | 'failedCount' | 'pendingCount' | 'runningCount' | 'skippedCount' | 'revertedCount'>, filter: BucketStatusFilter): number;
+/**
+ * Decide whether a bucket should render at all under the active filter.
+ * Hides buckets that have zero matching docs when a non-`all` filter is
+ * active — the previous behaviour rendered the bucket header with stale
+ * unfiltered counts, contradicting the global "No units match" message
+ * below. With this rule the entire bucket disappears, and the global
+ * empty state surfaces only when EVERY bucket is empty.
+ *
+ * Uses the DOC count rather than the unit count because the expanded
+ * panel renders one row per doc. A bucket with one doc whose only
+ * failed locale we'd be looking at is still worth showing — but only
+ * if at least one such doc exists.
+ */
+export declare function shouldBucketBeVisibleUnderFilter(bucket: Pick<Bucket, 'docCountsByStatus' | 'totalDocs'>, filter: BucketStatusFilter): boolean;
+/**
+ * Group the flat `jobs` array into buckets, using backend
+ * `countsByCollection` for the authoritative per-bucket totals.
+ *
+ * Two passes:
+ *   1. Seed every bucket from `countsByCollection` (the FULL totals
+ *      across the batch — not just the paginated `jobs` page). This
+ *      ensures bucket headers show correct counts even when the
+ *      `jobs` page only contains a subset.
+ *   2. Walk `jobs` and attach the loaded docs to their buckets.
+ *      `bucket.loadedDocs < bucket.totalDocs` when the page hasn't
+ *      loaded every doc in the bucket — UI surfaces this gap.
+ *
+ * Sort order:
+ *   1. Buckets with failures come first (descending failure count).
+ *   2. Then collections alphabetically.
+ *   3. Then globals alphabetically (any bucket with `isGlobal: true`).
+ *
+ * Within a bucket, docs are kept in their original insertion order from
+ * the `jobs` array — Payload's status endpoint already sorts by unit id
+ * (closely aligned with creation order), which is a reasonable default.
+ */
+export declare function groupJobsIntoBuckets(jobs: BatchJobSummary[], countsByCollection?: BatchUnitCountsByCollection): Bucket[];
+/**
+ * Whether a bucket should start expanded on initial render. Per UX
+ * recommendation: failed buckets expanded by default (problem is on
+ * screen without clicking), all-success buckets collapsed (don't
+ * clutter the triage view).
+ */
+export declare function shouldBucketBeExpandedByDefault(bucket: Bucket): boolean;
+/**
+ * Compact duration helper used by `fmtBucketAiActive` /
+ * `fmtBucketQueued`. Thin wrapper around the shared `formatDuration`
+ * helper — kept as a separate export so the bucket-grouping module
+ * doesn't need to import from `views/shared/format.ts` directly at
+ * every call site, and so the bucket-runtime tests keep their
+ * historical name. NEW-18 (v1.2.6): carries minutes → hours → days
+ * via the shared helper; the legacy implementation capped at minutes
+ * (`964m 6s`).
+ */
+export declare function fmtBucketDurationShort(ms: number | null | undefined): string;
+type BucketDurations = {
+    aiActiveMs: number | null;
+    collectionSpanMs: number | null;
+    queueWaitMs: number | null;
+};
+/**
+ * Render the bucket header "AI active" cell. When `aiActiveMs` exceeds
+ * `collectionSpanMs` (parallelism), present as `≈<span>` rather than a
+ * number that visually contradicts the total wallclock. The raw numbers
+ * are unchanged; the tooltip still shows both.
+ */
+export declare function fmtBucketAiActive(bucket: Pick<BucketDurations, 'aiActiveMs' | 'collectionSpanMs'>): string;
+/**
+ * Render the bucket header "Queued" cell. Uses the server-clamped queue
+ * wait but renders `0` as `'0s'` (instead of `'—'`) so editors can tell
+ * "no wait" from "data missing." When AI overran span, the queue wait
+ * is necessarily zero — surface that explicitly.
+ */
+export declare function fmtBucketQueued(bucket: BucketDurations): string;
+export {};