@parhelia/localization 0.4.12796 → 0.4.12818

package/dist/LocalizeItemCommand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeItemCommand.d.ts","sourceRoot":"","sources":["../src/LocalizeItemCommand.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EACP,cAAc,EACd,WAAW,EACX,eAAe,EACf,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAEL,uBAAuB,EACxB,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GACpC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAC1C,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC;AAEnE,wBAAsB,sBAAsB,CAAC,EAC3C,WAAW,EACX,UAAmC,EACnC,KAAK,GACN,EAAE;IACD,WAAW,EAAE,eAAe,CAAC;IAC7B,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,2CAiCA;AAED,eAAO,MAAM,mBAAmB,EAAE,mBA6BjC,CAAC"}
+{"version":3,"file":"LocalizeItemCommand.d.ts","sourceRoot":"","sources":["../src/LocalizeItemCommand.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EACP,cAAc,EACd,WAAW,EACX,eAAe,EACf,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAEL,uBAAuB,EACxB,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GACpC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAC1C,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC;AAEnE,wBAAsB,sBAAsB,CAAC,EAC3C,WAAW,EACX,UAAmC,EACnC,KAAK,GACN,EAAE;IACD,WAAW,EAAE,eAAe,CAAC;IAC7B,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,2CAiCA;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAkCjC,CAAC"}

package/dist/LocalizeItemCommand.js

@@ -39,6 +39,11 @@ export const localizeItemCommand = {
         if (!context.data?.items || context.data.items.length === 0) {
             return true;
         }
+        // Translation writes the target versions, so a selection where the user
+        // cannot write any item has nothing the wizard could do.
+        if (context.data.items.every((item) => item.canWriteItem === false)) {
+            return true;
+        }
         // Check if multi-item is disabled and multiple items are selected
         const multiItemEnabled = context.editContext?.configuration?.localization?.multiItem !==
             false;

package/dist/hooks/useTranslationWizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslationWizard.d.ts","sourceRoot":"","sources":["../../src/hooks/useTranslationWizard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAUhF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB;;;EAsGlE"}
+{"version":3,"file":"useTranslationWizard.d.ts","sourceRoot":"","sources":["../../src/hooks/useTranslationWizard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAUhF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB;;;EAuGlE"}

package/dist/hooks/useTranslationWizard.js

@@ -45,6 +45,7 @@ export function useTranslationWizard(props) {
                             name: language.name,
                             languageCode: language.languageCode,
                             items: [],
+                            canWrite: language.canWrite,
                         };
                         if (language.versions > 0 && itemDescriptors[itemIndex]) {
                             languageData.items.push(itemDescriptors[itemIndex]);

package/dist/steps/ItemSelectionTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemSelectionTree.d.ts","sourceRoot":"","sources":["../../src/steps/ItemSelectionTree.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,eAAe,EAMrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAsEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAe,EACf,sBAAsB,EACtB,MAAY,GACb,EAAE,sBAAsB,+BAiWxB"}
+{"version":3,"file":"ItemSelectionTree.d.ts","sourceRoot":"","sources":["../../src/steps/ItemSelectionTree.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,eAAe,EAMrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAuFF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAe,EACf,sBAAsB,EACtB,MAAY,GACb,EAAE,sBAAsB,+BA0WxB"}

package/dist/steps/ItemSelectionTree.js

@@ -2,7 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ItemCollectionEditor, } from "@parhelia/core";
 import { streamSubitemCount } from "../api/discovery";
-const SITECORE_ROOT = "11111111-1111-1111-1111-111111111111";
+const TRANSLATION_ROOT_ITEM_IDS = [
+    "0de95ae4-41ab-4d01-9eb0-67441b7c2450", // Content
+    "b701850a-cb8a-4943-b2bc-dddb1238c103", // Forms
+    "3d6658d8-a0bf-4e75-b3e2-d050fabcf4e1", // Media Library
+];
+const NO_WRITE_ACCESS_TITLE = "You don't have write access to this item, so it can't be translated.";
+/**
+ * Only items the user may write can receive a translation (the backend
+ * rejects the rest at start time). Sources that don't report the flag are
+ * treated as allowed and left to the backend check.
+ */
+function isWritable(item) {
+    return item.canWrite !== false && item.canWriteItem !== false;
+}
 function fullItemFromDescriptor(descriptor) {
     return {
         id: descriptor.id,
@@ -24,7 +37,7 @@ function fullItemFromDescriptor(descriptor) {
         thumbnail: "",
         path: descriptor.path ?? "",
         fields: [],
-        canWriteItem: false,
+        canWriteItem: descriptor.canWrite !== false,
         canWriteLanguage: false,
         canWriteWorkflow: false,
         canRename: false,
@@ -68,7 +81,11 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
         const seed = data.discoveredItems && data.discoveredItems.length > 0
             ? data.discoveredItems
             : data.items;
-        return seed.map((item) => fullItemToWithSubtree(item, !!data.includeSubitems));
+        // The command can be invoked on a read-only item (context menu, sidebar);
+        // such seeds are dropped so the list never holds an untranslatable item.
+        return seed
+            .filter(isWritable)
+            .map((item) => fullItemToWithSubtree(item, !!data.includeSubitems));
         // First mount only — once the user edits, wizard data is downstream.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -254,6 +271,7 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
             icon: anyNode.icon,
             templateId: anyNode.templateId,
             hasChildren: anyNode.hasChildren,
+            canWrite: anyNode.canWrite,
         }));
     }, [language]);
     const handleAddToList = useCallback(async (itemsToAdd) => {
@@ -265,6 +283,8 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
         for (const node of source) {
             if (!node.id || existing.has(node.id))
                 continue;
+            if (!isWritable(node))
+                continue;
             const nodeWithIcon = node;
             cacheTreeNode(node);
             next.push({
@@ -290,6 +310,8 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
         const id = item.id;
         if (!id || items.some((i) => i.descriptor.id === id))
             return;
+        if (!isWritable(item))
+            return;
         cacheTreeNode(item);
         const next = [
             ...items,
@@ -328,5 +350,5 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
         setItems(next);
         commitToWizard(next);
     }, [items, commitToWizard]);
-    return (_jsx(ItemCollectionEditor, { items: items, selectedInTree: selectedInTree, onSelectedInTreeChange: setSelectedInTree, selectedFromList: selectedFromList, onSelectedFromListChange: setSelectedFromList, onAddToList: handleAddToList, onRemoveFromList: handleRemoveFromList, onAddItem: handleAddItem, onRemoveItem: handleRemoveItem, onToggleSubitems: handleToggleSubitems, language: language, rootItemIds: [SITECORE_ROOT], selectedItemsLabel: "Items to Translate", emptyMessage: "No items selected", emptyHint: "Browse or search to add items", height: height, subitemCounts: subitemCounts, expandIdPath: expandIdPath, localStorageKey: "translation-wizard.itemCollectionSplitter", treeSearchContainerClassName: "border-b-0 p-0 pb-3", frameless: true }));
+    return (_jsx(ItemCollectionEditor, { items: items, selectedInTree: selectedInTree, onSelectedInTreeChange: setSelectedInTree, selectedFromList: selectedFromList, onSelectedFromListChange: setSelectedFromList, onAddToList: handleAddToList, onRemoveFromList: handleRemoveFromList, onAddItem: handleAddItem, onRemoveItem: handleRemoveItem, onToggleSubitems: handleToggleSubitems, language: language, rootItemIds: TRANSLATION_ROOT_ITEM_IDS, hideRootNodes: false, isItemSelectable: isWritable, unselectableItemTitle: NO_WRITE_ACCESS_TITLE, selectedItemsLabel: "Items to Translate", emptyMessage: "No items selected", emptyHint: "Browse or search to add items", height: height, subitemCounts: subitemCounts, expandIdPath: expandIdPath, localStorageKey: "translation-wizard.itemCollectionSplitter", treeSearchContainerClassName: "border-b-0 p-0 pb-3", frameless: true }));
 }

package/dist/steps/ProviderStep.js

@@ -228,5 +228,5 @@ export function ProviderStep({ isActive = true, data, setData, onStepCompleted,
                                         }), options: data.translationProviders.map((provider) => ({
                                             value: provider.name,
                                             label: provider.displayName || provider.name,
-                                        })), placeholder: "Select a provider...", size: "sm", className: "mt-2 w-full", "data-testid": "translation-provider-select" }), isCreateLanguageVersionsOnlyProvider && (_jsx("p", { className: "text-muted-foreground mt-2 text-xs", children: "\"Create Language Versions Only\" will create new language versions without automatic translation." }))] }), supportsPromptCustomization && (_jsxs("div", { children: [_jsxs(Label, { className: "flex cursor-pointer items-start gap-2.5", children: [_jsx("input", { type: "checkbox", checked: enableCustomPrompt, onChange: (e) => handleCustomPromptToggle(e.target.checked), className: "mt-0.5 h-3.5 w-3.5 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "enable-custom-prompt-checkbox" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-[13px] font-medium text-neutral-grey-100", children: "Customize translation prompt (optional)" }), _jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs", children: "Edit the provider prompt before starting translation." })] })] }), enableCustomPrompt && (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Textarea, { id: "custom-prompt-textarea", value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "text-xs", rows: 8, placeholder: "Enter prompt instructions here...", "data-testid": "custom-prompt-textarea" }), hasDefaultPrompt && (_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: handleResetPrompt, disabled: customPrompt === (defaultPrompt || ""), className: "gap-1.5", title: "Reset to the default prompt", "data-testid": "reset-custom-prompt-button", children: [_jsx(ResetIcon, { className: "size-3.5", strokeWidth: 1, "aria-hidden": "true" }), "Reset to default"] }))] }))] }))] })] }) }) }));
+                                        })), placeholder: "Select a provider...", size: "sm", className: "mt-2 w-full", "data-testid": "translation-provider-select" }), isCreateLanguageVersionsOnlyProvider && (_jsx("p", { className: "text-muted-foreground mt-2 text-xs", children: "\"Create Language Versions Only\" will create new language versions without automatic translation." }))] }), supportsPromptCustomization && (_jsxs("div", { children: [_jsxs(Label, { className: "flex cursor-pointer items-start gap-2.5", children: [_jsx("input", { type: "checkbox", checked: enableCustomPrompt, onChange: (e) => handleCustomPromptToggle(e.target.checked), className: "mt-0.5 h-3.5 w-3.5 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "enable-custom-prompt-checkbox" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-[13px] font-medium text-neutral-grey-100", children: "Customize translation prompt (optional)" }), _jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs", children: "Edit the provider prompt before starting translation." })] })] }), enableCustomPrompt && (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Textarea, { id: "custom-prompt-textarea", value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "text-xs", rows: 8, placeholder: "Add instructions for the translator, e.g. tone of voice, terms to keep untranslated, or formality.", "data-testid": "custom-prompt-textarea" }), hasDefaultPrompt && (_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: handleResetPrompt, disabled: customPrompt === (defaultPrompt || ""), className: "gap-1.5", title: "Reset to the default prompt", "data-testid": "reset-custom-prompt-button", children: [_jsx(ResetIcon, { className: "size-3.5", strokeWidth: 1, "aria-hidden": "true" }), "Reset to default"] }))] }))] }))] })] }) }) }));
 }

package/dist/steps/ServiceLanguageSelectionStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,+BA+RtB"}
+{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,+BAkUtB"}

package/dist/steps/ServiceLanguageSelectionStep.js

@@ -82,6 +82,12 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
                 data.languageData.get(sourceLanguage)?.name ||
                 siteLanguageMap.get(sourceLanguage)?.name ||
                 sourceLanguage;
+            // Language write ACL (language:write). Every source reports it for
+            // the same language item, so the first defined value wins; unknown
+            // is treated as allowed and left to the backend check.
+            const canWrite = editContextLang?.canWrite ??
+                languageDataLang?.canWrite ??
+                siteLanguage?.canWrite;
             return {
                 code,
                 name: editContextLang?.name ||
@@ -91,6 +97,7 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
                 icon: editContextLang?.icon || siteLanguage?.icon,
                 sourceLanguage,
                 sourceLanguageName,
+                canWrite: canWrite !== false,
             };
         })
             .filter((lang) => lang.sourceLanguage !== lang.code);
@@ -114,7 +121,8 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
         const initialSelection = {};
         for (const langCode of data.targetLanguages) {
             const lang = allLanguages.find((l) => l.code === langCode);
-            if (lang)
+            // Predefined targets the user cannot write are dropped silently.
+            if (lang?.canWrite)
                 initialSelection[langCode] = true;
         }
         setLanguageSelection(initialSelection);
@@ -137,37 +145,47 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
         };
         setData(newData);
     }, [languageSelection, setData, data.targetLanguages]);
+    // Only languages the user may write take part in toggling / select-all;
+    // the others render disabled below.
+    const writableLanguages = useMemo(() => allLanguages.filter((lang) => lang.canWrite), [allLanguages]);
     const handleLanguageToggle = (langCode) => {
+        if (!writableLanguages.some((lang) => lang.code === langCode))
+            return;
         setLanguageSelection((prev) => ({ ...prev, [langCode]: !prev[langCode] }));
     };
     const handleSelectAllLanguages = () => {
-        const allSelected = allLanguages.every((lang) => languageSelection[lang.code]);
+        const allSelected = writableLanguages.every((lang) => languageSelection[lang.code]);
         const newSelection = {};
-        allLanguages.forEach((lang) => {
+        writableLanguages.forEach((lang) => {
             newSelection[lang.code] = !allSelected;
         });
         setLanguageSelection(newSelection);
     };
     const areAllLanguagesSelected = useMemo(() => {
-        if (allLanguages.length === 0)
+        if (writableLanguages.length === 0)
             return false;
-        return allLanguages.every((lang) => languageSelection[lang.code]);
-    }, [allLanguages, languageSelection]);
+        return writableLanguages.every((lang) => languageSelection[lang.code]);
+    }, [writableLanguages, languageSelection]);
     const areSomeLanguagesSelected = useMemo(() => {
-        return allLanguages.some((lang) => languageSelection[lang.code]);
-    }, [allLanguages, languageSelection]);
+        return writableLanguages.some((lang) => languageSelection[lang.code]);
+    }, [writableLanguages, languageSelection]);
     const selectedCount = data.targetLanguages.length;
-    return (_jsx(WizardStepShell, { fillHeight: true, noPadding: true, testId: "language-selection-step", children: _jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col overflow-hidden p-6", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-2 pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium tracking-wider text-neutral-grey-50", children: "Select target languages" }), selectedCount > 0 && _jsx(CountBadge, { children: selectedCount })] }), allLanguages.length > 1 && (_jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] font-medium text-neutral-grey-50 transition-colors hover:text-neutral-grey-100", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
+    return (_jsx(WizardStepShell, { fillHeight: true, noPadding: true, testId: "language-selection-step", children: _jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col overflow-hidden p-6", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-2 pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium tracking-wider text-neutral-grey-50", children: "Select target languages" }), selectedCount > 0 && _jsx(CountBadge, { children: selectedCount })] }), writableLanguages.length > 1 && (_jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] font-medium text-neutral-grey-50 transition-colors hover:text-neutral-grey-100", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
                                         if (input) {
                                             input.indeterminate =
                                                 areSomeLanguagesSelected && !areAllLanguagesSelected;
                                         }
                                     }, onChange: handleSelectAllLanguages, className: "h-3 w-3 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "select-all-languages-checkbox" }), "Select all"] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: allLanguages.length === 0 ? (_jsx("div", { className: "grid gap-2.5 sm:grid-cols-2", children: [...Array(6)].map((_, i) => (_jsxs("div", { className: "flex animate-pulse items-center gap-2 rounded-[8px] border border-border-default px-3 py-2", children: [_jsx("div", { className: "h-3.5 w-3.5 rounded bg-neutral-grey-10" }), _jsx("div", { className: "h-4 w-4 bg-neutral-grey-10" }), _jsx("div", { className: "h-3.5 w-24 rounded bg-neutral-grey-10" }), _jsx("div", { className: "ml-auto h-3 w-10 rounded bg-neutral-grey-5" })] }, i))) })) : (_jsx("div", { className: "grid gap-2.5 sm:grid-cols-2", children: allLanguages.map((lang) => {
                             const checked = !!languageSelection[lang.code];
-                            return (_jsxs("label", { className: `group flex cursor-pointer items-center gap-2.5 rounded-[8px] border px-2 py-1.5 transition-all ${checked
-                                    ? "border-neutral-grey-100"
-                                    : "border-border-default hover:border-border-default hover:bg-neutral-grey-5"}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => handleLanguageToggle(lang.code), className: "h-3.5 w-3.5 shrink-0 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `language-checkbox-${lang.code}` }), lang.icon ? (_jsx("img", { src: lang.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 object-cover" })) : (_jsx("span", { className: "inline-block h-4 w-5 shrink-0 bg-neutral-grey-5" })), _jsx("span", { className: `min-w-0 flex-1 truncate text-[13px] ${checked
+                            const readOnly = !lang.canWrite;
+                            return (_jsxs("label", { title: readOnly
+                                    ? "You don't have write access to this language."
+                                    : undefined, "data-testid": `language-option-${lang.code}`, "data-readonly": readOnly || undefined, className: `group flex items-center gap-2.5 rounded-[8px] border px-2 py-1.5 transition-all ${readOnly
+                                    ? "cursor-not-allowed border-border-default opacity-50"
+                                    : checked
+                                        ? "cursor-pointer border-neutral-grey-100"
+                                        : "cursor-pointer border-border-default hover:border-border-default hover:bg-neutral-grey-5"}`, children: [_jsx("input", { type: "checkbox", checked: checked, disabled: readOnly, onChange: () => handleLanguageToggle(lang.code), className: "h-3.5 w-3.5 shrink-0 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)] disabled:cursor-not-allowed", "data-testid": `language-checkbox-${lang.code}` }), lang.icon ? (_jsx("img", { src: lang.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 object-cover" })) : (_jsx("span", { className: "inline-block h-4 w-5 shrink-0 bg-neutral-grey-5" })), _jsx("span", { className: `min-w-0 flex-1 truncate text-[13px] ${checked
                                             ? "font-medium text-neutral-grey-100"
-                                            : "text-neutral-grey-100"}`, children: lang.name }), _jsxs("span", { className: "ml-auto flex max-w-[9rem] shrink-0 flex-col items-end leading-tight", children: [_jsx("span", { className: "font-mono text-[10px] tracking-wider text-neutral-grey-50", children: lang.code }), _jsxs("span", { className: "max-w-full truncate text-[10px] text-neutral-grey-50", title: `Source language: ${lang.sourceLanguageName}`, children: ["from ", lang.sourceLanguageName] })] })] }, lang.code));
+                                            : "text-neutral-grey-100"}`, children: lang.name }), _jsxs("span", { className: "ml-auto flex max-w-[9rem] shrink-0 flex-col items-end leading-tight", children: [_jsx("span", { className: "font-mono text-[10px] tracking-wider text-neutral-grey-50", children: lang.code }), readOnly ? (_jsx("span", { className: "max-w-full truncate text-[10px] text-neutral-grey-50", children: "no write access" })) : (_jsxs("span", { className: "max-w-full truncate text-[10px] text-neutral-grey-50", title: `Source language: ${lang.sourceLanguageName}`, children: ["from ", lang.sourceLanguageName] }))] })] }, lang.code));
                         }) })) })] }) }));
 }

package/dist/steps/types.d.ts

@@ -20,6 +20,8 @@ export type LanguageData = {
     languageCode: string;
     items: ItemDescriptor[];
     translationStatus?: TranslationStatus;
+    /** Language write ACL (language:write) for the current user. Undefined when not reported. */
+    canWrite?: boolean;
 };
 export type TranslationDialogResult = {
     translationProvider: string;

package/dist/steps/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"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"}

package/dist/translation-center/TranslationBatches.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TranslationBatches.d.ts","sourceRoot":"","sources":["../../src/translation-center/TranslationBatches.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyV1B,wBAAgB,kBAAkB,sBAwnCjC;AAED,eAAO,MAAM,oCAAoC,8BAA8B,CAAC;AAEhF,wBAAgB,8BAA8B,sBA0Y7C"}
+{"version":3,"file":"TranslationBatches.d.ts","sourceRoot":"","sources":["../../src/translation-center/TranslationBatches.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyV1B,wBAAgB,kBAAkB,sBA6qCjC;AAED,eAAO,MAAM,oCAAoC,8BAA8B,CAAC;AAEhF,wBAAgB,8BAA8B,sBA+Y7C"}

package/dist/translation-center/TranslationBatches.js

@@ -191,6 +191,11 @@ export function TranslationBatches() {
     const [batches, setBatches] = useState([]);
     const [sitecoreLanguages, setSitecoreLanguages] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    // False until the first list response lands. Later reloads (the user filter
+    // defaulting in, socket refreshes, the reconciliation poll) update in place
+    // instead of swapping the view for a spinner: the home view picks its slogan
+    // per mount, so every swap re-rolled the greeting.
+    const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
     const [hasMore, setHasMore] = useState(true);
     const [currentOffset, setCurrentOffset] = useState(0);
@@ -209,7 +214,11 @@ export function TranslationBatches() {
     // (e.g. when the user changes filters quickly).
     const requestIdRef = useRef(0);
     const currentUserName = editContext?.user?.name || "all";
-    const isLimitedPreviewUser = editContext?.user?.isLimitedPreviewUser ?? false;
+    // Limited-preview sessions and accounts confined to their own batches (see
+    // userInfo.canViewAllTranslationBatches) get the user filter pinned to themselves;
+    // the server enforces the same scope on every batch endpoint.
+    const userFilterLocked = (editContext?.user?.isLimitedPreviewUser ?? false) ||
+        editContext?.userInfo?.canViewAllTranslationBatches === false;
     const isMobile = editContext?.isMobile ?? false;
     const rootRef = useRef(null);
     const [isCompactBatches, setIsCompactBatches] = useState(isMobile);
@@ -253,7 +262,7 @@ export function TranslationBatches() {
     }, [currentUserName]);
     // Enforce current user filter for limited preview users
     useEffect(() => {
-        if (isLimitedPreviewUser &&
+        if (userFilterLocked &&
             currentUserName !== "all" &&
             filters.user !== currentUserName) {
             setTranslationBatchFilters((prev) => ({
@@ -261,9 +270,9 @@ export function TranslationBatches() {
                 user: currentUserName,
             }));
         }
-    }, [isLimitedPreviewUser, currentUserName, filters.user]);
+    }, [userFilterLocked, currentUserName, filters.user]);
     const effectiveFilters = useMemo(() => {
-        const userFilter = isLimitedPreviewUser ? currentUserName : filters.user;
+        const userFilter = userFilterLocked ? currentUserName : filters.user;
         const trimmedItem = filters.itemIdOrPath.trim();
         return {
             fromUtc: dateRangeToFromUtc(filters.dateRange),
@@ -276,7 +285,7 @@ export function TranslationBatches() {
             itemIdOrPath: trimmedItem ? trimmedItem : undefined,
             itemIncludeSubitems: trimmedItem && filters.itemIncludeSubitems ? true : undefined,
         };
-    }, [filters, isLimitedPreviewUser, currentUserName]);
+    }, [filters, userFilterLocked, currentUserName]);
     const loadRecentBatches = useCallback(async (offset, append, filtersToUse) => {
         const myRequestId = ++requestIdRef.current;
         if (offset === 0) {
@@ -323,6 +332,7 @@ export function TranslationBatches() {
             if (myRequestId === requestIdRef.current) {
                 setIsLoading(false);
                 setIsLoadingMore(false);
+                setHasLoadedOnce(true);
             }
         }
     }, []);
@@ -777,12 +787,18 @@ export function TranslationBatches() {
         editContext?.setShowAgentsWorkspaceEditor(true);
         await editContext?.loadItem(language ? { id: normalized, language, version: 0 } : normalized);
     }, [editContext]);
-    const showHomeView = !(isLoading && batches.length === 0) &&
-        groupedBatches.length === 0 &&
-        !hasActiveEmptyStateFilters;
+    // The blank-slate home view (no header, grey full-height greeting) also
+    // covers the initial load, so the greeting mounts exactly once.
+    const showHomeView = groupedBatches.length === 0 && !hasActiveEmptyStateFilters;
+    // Only the very first load, or a filtered reload with nothing to show,
+    // replaces the content with a spinner.
+    const showLoadingPlaceholder = !hasLoadedOnce ||
+        (isLoading && batches.length === 0 && hasActiveEmptyStateFilters);
     return (_jsxs("div", { ref: rootRef, className: "flex h-full min-h-0 flex-col bg-neutral-grey-5", style: { padding: isCompactBatches ? 12 : 40 }, "data-testid": "translation-batches", children: [!showHomeView && (_jsx(PageHeader, { title: "Translation Batches", description: isMobile
                     ? undefined
-                    : "Review translation history and manage batch progress", variant: "workspace", className: isCompactBatches ? "mb-4" : "mb-5" })), _jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-hidden rounded-[12px] bg-white", children: _jsx("div", { className: `h-full min-h-0 overflow-auto ${showHomeView ? "" : isCompactBatches ? "p-3" : "p-6"}`, children: isLoading && batches.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-neutral-grey-50", children: [_jsx(LoaderIcon, { className: "h-5 w-5 animate-spin text-highlight-100" }), "Loading recent translations..."] }) })) : groupedBatches.length === 0 ? (hasActiveEmptyStateFilters ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-neutral-grey-50", children: [_jsx(LanguagesIcon, { className: "h-8 w-8 block mx-auto mb-2 text-neutral-grey-15" }), _jsx("p", { className: "font-medium text-neutral-grey-100", children: emptyStateSlogan }), _jsx("p", { className: "text-sm mt-1", children: "Try adjusting your filters or start a translation to see it appear here" })] }) })) : (_jsx(WorkspaceHomeView, { slogans: EMPTY_STATE_SLOGANS, actionLabel: "Start your first translation", onAction: editContext ? handleStartFirstTranslation : undefined, testId: "translation-batches-home-view", actionTestId: "translation-batches-start-translation-card" }))) : (_jsxs("div", { className: isCompactBatches ? "space-y-6" : "space-y-10", children: [groupedBatches.map((dateGroup) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-2 mb-2", children: [_jsx("h2", { className: "text-[11px] font-medium tracking-[0.08em] text-neutral-grey-50", children: dateGroup.label }), _jsx("span", { className: "flex-1 ml-2 border-t border-border-default" })] }), _jsx("div", { className: "divide-border-default divide-y overflow-hidden rounded-lg bg-white", children: dateGroup.batches.map((b) => {
+                    : "Review translation history and manage batch progress", variant: "workspace", className: isCompactBatches ? "mb-4" : "mb-5" })), _jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-hidden rounded-[12px] bg-white", children: _jsx("div", { className: `h-full min-h-0 overflow-auto ${showHomeView ? "" : isCompactBatches ? "p-3" : "p-6"}`, children: showLoadingPlaceholder ? (_jsx("div", { className: showHomeView
+                            ? "bg-neutral-grey-5 flex h-full min-h-[420px] w-full items-center justify-center"
+                            : "flex items-center justify-center h-32", "data-testid": "translation-batches-loading", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-neutral-grey-50", children: [_jsx(LoaderIcon, { className: "h-5 w-5 animate-spin text-highlight-100" }), "Loading recent translations..."] }) })) : groupedBatches.length === 0 ? (hasActiveEmptyStateFilters ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-neutral-grey-50", children: [_jsx(LanguagesIcon, { className: "h-8 w-8 block mx-auto mb-2 text-neutral-grey-15" }), _jsx("p", { className: "font-medium text-neutral-grey-100", children: emptyStateSlogan }), _jsx("p", { className: "text-sm mt-1", children: "Try adjusting your filters or start a translation to see it appear here" })] }) })) : (_jsx(WorkspaceHomeView, { slogans: EMPTY_STATE_SLOGANS, actionLabel: "Start your first translation", onAction: editContext ? handleStartFirstTranslation : undefined, testId: "translation-batches-home-view", actionTestId: "translation-batches-start-translation-card" }))) : (_jsxs("div", { className: isCompactBatches ? "space-y-6" : "space-y-10", children: [groupedBatches.map((dateGroup) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-2 mb-2", children: [_jsx("h2", { className: "text-[11px] font-medium tracking-[0.08em] text-neutral-grey-50", children: dateGroup.label }), _jsx("span", { className: "flex-1 ml-2 border-t border-border-default" })] }), _jsx("div", { className: "divide-border-default divide-y overflow-hidden rounded-lg bg-white", children: dateGroup.batches.map((b) => {
                                             const batchDate = new Date(b.timestamp);
                                             const formattedBatchDate = formatDateTime(batchDate);
                                             const info = b.info;
@@ -798,8 +814,13 @@ export function TranslationBatches() {
                                             const anyError = errorJobs > 0;
                                             const anyInProgress = isActiveBatchStatus(info?.status);
                                             const anyAborted = info?.status === "Aborted";
+                                            const jobs = batchJobs[b.id];
+                                            const statusCounts = computeBatchStatusCounts(info, jobs);
+                                            const processedJobs = statusCounts.succeeded +
+                                                statusCounts.failed +
+                                                statusCounts.aborted;
                                             const metaParts = [];
-                                            metaParts.push(_jsxs("span", { className: "text-neutral-grey-100", children: [totalJobs, " translation", totalJobs !== 1 ? "s" : ""] }, "trans"));
+                                            metaParts.push(_jsx("span", { className: "text-neutral-grey-100", children: info?.status === "Pending" ? (_jsxs(_Fragment, { children: [totalJobs, " translation", totalJobs !== 1 ? "s" : "", " queued"] })) : anyInProgress ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "tabular-nums", children: [processedJobs, " of ", totalJobs] }), " ", "translation", totalJobs !== 1 ? "s" : "", " done"] })) : (_jsxs(_Fragment, { children: [totalJobs, " translation", totalJobs !== 1 ? "s" : ""] })) }, "trans"));
                                             if (typeof itemsCount === "number") {
                                                 metaParts.push(_jsxs("span", { children: [itemsCount, " item", itemsCount !== 1 ? "s" : ""] }, "items"));
                                             }
@@ -850,8 +871,6 @@ export function TranslationBatches() {
                                                     `Translation Batch · ${formattedBatchDate}`);
                                             })();
                                             const isExpanded = expandedBatchId === b.id;
-                                            const jobs = batchJobs[b.id];
-                                            const statusCounts = computeBatchStatusCounts(info, jobs);
                                             const isLoadingThis = loadingJobs.has(b.id);
                                             const canRetry = anyError;
                                             const canAbort = isActiveBatchStatus(info?.status);
@@ -880,19 +899,19 @@ export function TranslationBatches() {
                                                             if (!canAbort)
                                                                 return;
                                                             handleAbortBatch(b.id);
-                                                        }, icon: _jsx(AbortIcon, { className: `h-3.5 w-3.5 ${isAborting ? "animate-spin" : ""}`, strokeWidth: 1 }), label: "Abort translation batch", disabled: !canAbort || isAborting }))] }));
+                                                        }, icon: isAborting ? (_jsx(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : (_jsx(AbortIcon, { className: "h-3.5 w-3.5", strokeWidth: 1 })), label: "Abort translation batch", disabled: !canAbort || isAborting }))] }));
                                             return (_jsxs("div", { "data-testid": `batch-row-${b.id}`, "data-batch-status": testStatus, children: [_jsx("div", { role: "button", tabIndex: 0, className: `group w-full cursor-pointer py-3 text-left transition-colors hover:bg-neutral-grey-5 ${isCompactBatches ? "px-2.5" : "px-4"}`, onClick: () => toggleBatch(b.id), onKeyDown: (e) => {
                                                             if (e.key === "Enter" || e.key === " ") {
                                                                 e.preventDefault();
                                                                 toggleBatch(b.id);
                                                             }
-                                                        }, children: _jsxs("div", { className: `flex items-start ${isCompactBatches ? "gap-2" : "gap-4"}`, children: [_jsx("div", { className: `shrink-0 text-neutral-grey-100 transition-transform ${isCompactBatches ? "mt-0.5" : "mt-3"} ${isExpanded ? "rotate-180" : ""}`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) }), !isCompactBatches && totalJobs > 0 && (_jsx(BatchProgressIndicator, { counts: statusCounts, testId: `batch-progress-${b.id}` })), _jsxs("div", { className: `flex min-w-0 flex-1 ${isCompactBatches
+                                                        }, children: _jsxs("div", { className: `flex items-start ${isCompactBatches ? "gap-2" : "gap-4"}`, children: [_jsx("div", { className: `shrink-0 text-neutral-grey-100 transition-transform ${isCompactBatches ? "mt-0.5" : "mt-3"} ${isExpanded ? "rotate-180" : ""}`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) }), !isCompactBatches && totalJobs > 0 && (_jsx(BatchProgressIndicator, { counts: statusCounts, status: info?.status, testId: `batch-progress-${b.id}` })), _jsxs("div", { className: `flex min-w-0 flex-1 ${isCompactBatches
                                                                         ? "flex-col gap-2"
                                                                         : "items-center justify-between gap-3"}`, children: [_jsxs("div", { className: "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)]", children: [_jsx("span", { className: `min-w-0 text-[14px] font-medium text-neutral-grey-100 ${isCompactBatches
                                                                                         ? "whitespace-normal break-words leading-5"
                                                                                         : "truncate"}`, style: isCompactBatches
                                                                                         ? { overflowWrap: "anywhere" }
-                                                                                        : undefined, title: formattedBatchDate, children: batchDisplayName }), _jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: desktopMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, i))) }), mobileFooterMetaParts.length > 0 && (_jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: mobileFooterMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, `footer-${i}`))) }))] }), isCompactBatches && (_jsxs("div", { className: "mt-2 flex min-w-0 items-center gap-2", children: [totalJobs > 0 && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(BatchProgressIndicator, { counts: statusCounts, testId: `batch-progress-${b.id}`, variant: "bar" }) })), hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: batchActions }))] })), !isCompactBatches && hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: batchActions }))] })] }) }), isExpanded && (_jsxs("div", { className: "border-t border-border-default/50", children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, currentLanguage: editContext?.item?.language, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, isMobile: isMobile, onToggleItem: toggleItem, onOpenItem: openItemInEditor, onAbortJob: handleAbortJob, onRetryJobs: handleRetryJobs })] }))] }, b.id));
+                                                                                        : undefined, title: formattedBatchDate, children: batchDisplayName }), _jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: desktopMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, i))) }), mobileFooterMetaParts.length > 0 && (_jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: mobileFooterMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, `footer-${i}`))) }))] }), isCompactBatches && (_jsxs("div", { className: "mt-2 flex min-w-0 items-center gap-2", children: [totalJobs > 0 && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(BatchProgressIndicator, { counts: statusCounts, status: info?.status, testId: `batch-progress-${b.id}`, variant: "bar" }) })), hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: batchActions }))] })), !isCompactBatches && hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: batchActions }))] })] }) }), isExpanded && (_jsxs("div", { className: "border-t border-border-default/50", children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, currentLanguage: editContext?.item?.language, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, isMobile: isMobile, onToggleItem: toggleItem, onOpenItem: openItemInEditor, onAbortJob: handleAbortJob, onRetryJobs: handleRetryJobs })] }))] }, b.id));
                                         }) })] }, dateGroup.label))), hasMore && (_jsx("div", { className: "flex justify-center pt-6", children: _jsx(Button, { variant: "outline", size: "sm", onClick: loadMore, disabled: isLoadingMore, children: isLoadingMore ? (_jsxs(_Fragment, { children: [_jsx(LoaderIcon, { className: "h-4 w-4 animate-spin text-highlight-100" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDownIcon, { className: "h-4 w-4" }), "Load More Batches"] })) }) }))] })) }) })] }));
 }
 export const TRANSLATION_BATCH_FILTERS_SIDEBAR_ID = "translation-batch-filters";
@@ -903,12 +922,16 @@ export function TranslationBatchFiltersSidebar() {
     const [sitecoreLanguages, setSitecoreLanguages] = useState([]);
     const [itemPickerOpen, setItemPickerOpen] = useState(false);
     const currentUserName = editContext?.user?.name || "all";
-    const isLimitedPreviewUser = editContext?.user?.isLimitedPreviewUser ?? false;
+    // Limited-preview sessions and accounts confined to their own batches (see
+    // userInfo.canViewAllTranslationBatches) get the user filter pinned to themselves;
+    // the server enforces the same scope on every batch endpoint.
+    const userFilterLocked = (editContext?.user?.isLimitedPreviewUser ?? false) ||
+        editContext?.userInfo?.canViewAllTranslationBatches === false;
     useEffect(() => {
         ensureDefaultTranslationBatchUser(currentUserName);
     }, [currentUserName]);
     useEffect(() => {
-        if (isLimitedPreviewUser &&
+        if (userFilterLocked &&
             currentUserName !== "all" &&
             filters.user !== currentUserName) {
             setTranslationBatchFilters((prev) => ({
@@ -916,7 +939,7 @@ export function TranslationBatchFiltersSidebar() {
                 user: currentUserName,
             }));
         }
-    }, [isLimitedPreviewUser, currentUserName, filters.user]);
+    }, [userFilterLocked, currentUserName, filters.user]);
     const searchTranslationUsers = useCallback((query, limit) => searchBackendUsers(query, limit), []);
     const debouncedSetItemFilter = useDebouncedCallback((value) => setTranslationBatchFilters((prev) => ({
         ...prev,
@@ -993,20 +1016,20 @@ export function TranslationBatchFiltersSidebar() {
                                     })), placeholder: "Select date range" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Status" }), _jsx(Select, { className: "w-full bg-white", options: STATUS_OPTIONS, value: filters.status, onValueChange: (value) => setTranslationBatchFilters((prev) => ({
                                         ...prev,
                                         status: value,
-                                    })), placeholder: "Select status" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "User" }), _jsx(UserPicker, { value: isLimitedPreviewUser
+                                    })), placeholder: "Select status" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "User" }), _jsx(UserPicker, { value: userFilterLocked
                                         ? currentUserName
                                         : filters.user === "all"
                                             ? null
-                                            : filters.user, displayValue: isLimitedPreviewUser || filters.user === currentUserName
+                                            : filters.user, displayValue: userFilterLocked || filters.user === currentUserName
                                         ? `${editContext?.user?.fullName?.trim() || currentUserName} (You)`
-                                        : undefined, displayAvatarName: isLimitedPreviewUser || filters.user === currentUserName
+                                        : undefined, displayAvatarName: userFilterLocked || filters.user === currentUserName
                                         ? editContext?.user?.fullName?.trim() || currentUserName
-                                        : undefined, displayAvatarUrl: isLimitedPreviewUser || filters.user === currentUserName
+                                        : undefined, displayAvatarUrl: userFilterLocked || filters.user === currentUserName
                                         ? editContext?.user?.avatarUrl
                                         : undefined, onChange: (user) => setTranslationBatchFilters((prev) => ({
                                         ...prev,
                                         user: user?.userName ?? "all",
-                                    })), disabled: isLimitedPreviewUser, placeholder: "All Users", buttonClassName: "h-8 min-h-0 w-full justify-start rounded-[4px] border bg-white px-2 py-0 text-xs font-medium", allowClear: true, clearLabel: "All Users", showIcon: isLimitedPreviewUser || filters.user !== "all", searchUsers: searchTranslationUsers })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Provider" }), _jsx(Select, { className: "w-full bg-white", options: [
+                                    })), disabled: userFilterLocked, placeholder: "All Users", buttonClassName: "h-8 min-h-0 w-full justify-start rounded-[4px] border bg-white px-2 py-0 text-xs font-medium", allowClear: true, clearLabel: "All Users", showIcon: userFilterLocked || filters.user !== "all", searchUsers: searchTranslationUsers })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Provider" }), _jsx(Select, { className: "w-full bg-white", options: [
                                         { value: "all", label: "All Providers" },
                                         ...providers.map((p) => ({
                                             value: p.name,
@@ -1206,22 +1229,66 @@ function computeBatchStatusCounts(info, jobs) {
     const pending = info?.status === "Aborted" ? 0 : remaining;
     return { total, succeeded, failed, aborted, running: 0, pending };
 }
-function BatchProgressIndicator({ counts, testId, variant = "circle", }) {
-    const { total, succeeded, failed, aborted, running } = counts;
+// One outcome per batch, shared by the ring, the bar and the status badge so
+// the three never disagree about what colour/state a batch is in.
+function resolveBatchOutcome(status, counts) {
+    const { total, succeeded, failed } = counts;
+    if (isActiveBatchStatus(status))
+        return "active";
+    if (total > 0 && succeeded === total)
+        return "succeeded";
+    if (total > 0 && failed === total)
+        return "failed";
+    if (status === "Aborted")
+        return "aborted";
+    return "mixed";
+}
+function BatchProgressIndicator({ counts, status, testId, variant = "circle", }) {
+    const { total, succeeded, failed, aborted, running, pending } = counts;
+    const outcome = resolveBatchOutcome(status, counts);
+    const isActive = outcome === "active";
+    const processed = succeeded + failed + aborted;
+    // SVG filter ids are document-global; derive a safe one per instance.
+    const glowId = `batch-glow-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    // While the batch is running the number is "how far along are we", so it
+    // counts every finished job. Once terminal it is the success rate.
+    const percentBase = isActive ? processed : succeeded;
     const percent = total > 0
-        ? Math.max(0, Math.min(100, Math.round((succeeded / total) * 100)))
+        ? Math.max(0, Math.min(100, Math.round((percentBase / total) * 100)))
         : 0;
-    const allSucceeded = total > 0 && succeeded === total;
-    // Colour-carrying segments in tooltip order; pending stays in the track.
+    // Colour-carrying segments in tooltip order; queued work stays in the
+    // track. "Still running" is conveyed by the soft halo around the ring (and
+    // bar) rather than by a segment, so the ring stays calm and readable.
     const segments = [
         { key: "succeeded", count: succeeded, color: BATCH_SEGMENT_COLORS.succeeded },
         { key: "failed", count: failed, color: BATCH_SEGMENT_COLORS.failed },
         { key: "aborted", count: aborted, color: BATCH_SEGMENT_COLORS.aborted },
         { key: "running", count: running, color: BATCH_SEGMENT_COLORS.running },
     ].filter((seg) => seg.count > 0);
-    // The centre number is the success rate, so it always reads in the success
-    // colour; failed/aborted/running are conveyed by the ring segments instead.
-    const textToneClass = "text-feedback-green";
+    // Breathing halo shown only while the batch is active.
+    const glowShadow = "0 0 6px 1px color-mix(in srgb, var(--color-feedback-green) 45%, transparent)";
+    // The centre glyph/number follows the batch outcome so it never contradicts
+    // the ring: green only when everything succeeded, red only when everything
+    // failed, orange when aborted, neutral for running and mixed results.
+    const centreFill = outcome === "succeeded"
+        ? "var(--color-feedback-green-light)"
+        : outcome === "failed"
+            ? "var(--color-feedback-red-light)"
+            : outcome === "aborted"
+                ? "var(--color-feedback-orange-light)"
+                : null;
+    const renderCentreGlyph = (sizeClass) => {
+        if (outcome === "succeeded") {
+            return (_jsx(CheckIcon, { className: `text-feedback-green ${sizeClass}`, style: { strokeWidth: 3 }, "aria-hidden": "true" }));
+        }
+        if (outcome === "failed") {
+            return (_jsx(AlertCircleIcon, { className: `text-feedback-red ${sizeClass}`, style: { strokeWidth: 2.5 }, "aria-hidden": "true" }));
+        }
+        if (outcome === "aborted") {
+            return (_jsx(AbortIcon, { className: `text-feedback-orange ${sizeClass}`, style: { strokeWidth: 2.5 }, "aria-hidden": "true" }));
+        }
+        return null;
+    };
     const parts = [`${succeeded}/${total} succeeded`];
     if (failed > 0)
         parts.push(`${failed} failed`);
@@ -1229,20 +1296,24 @@ function BatchProgressIndicator({ counts, testId, variant = "circle", }) {
         parts.push(`${aborted} aborted`);
     if (running > 0)
         parts.push(`${running} running`);
+    if (isActive && pending > 0)
+        parts.push(`${pending} queued`);
     const label = parts.join(", ");
     if (variant === "bar") {
-        return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", "aria-label": label, "data-testid": testId, children: [_jsx("div", { className: "bg-neutral-grey-15 flex h-1.5 min-w-0 flex-1 overflow-hidden rounded-full", children: total > 0 &&
-                                    segments.map((seg) => (_jsx("div", { className: "h-full", style: {
-                                            width: `${(seg.count / total) * 100}%`,
-                                            backgroundColor: seg.color,
-                                        } }, seg.key))) }), allSucceeded ? (_jsx(CheckIcon, { className: "text-feedback-green h-3 w-3 shrink-0", style: { strokeWidth: 3 } })) : (_jsxs("span", { className: `shrink-0 text-[11px] leading-none font-medium tabular-nums ${textToneClass}`, children: [percent, "%"] }))] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
+        const glyph = renderCentreGlyph("h-3 w-3 shrink-0");
+        return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", "aria-label": label, "data-testid": testId, "data-outcome": outcome, children: [_jsxs("div", { className: "relative min-w-0 flex-1", children: [isActive && (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-full animate-pulse", style: { boxShadow: glowShadow } })), _jsx("div", { className: "bg-neutral-grey-15 flex h-1.5 min-w-0 overflow-hidden rounded-full", children: total > 0 &&
+                                            segments.map((seg) => (_jsx("div", { className: "h-full", style: {
+                                                    width: `${(seg.count / total) * 100}%`,
+                                                    backgroundColor: seg.color,
+                                                } }, seg.key))) })] }), glyph ?? (_jsxs("span", { className: "shrink-0 text-[11px] leading-none font-medium tabular-nums text-neutral-grey-100", children: [percent, "%"] }))] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
     }
     const radius = 16;
     const strokeWidth = 3;
     const circumference = 2 * Math.PI * radius;
     const gap = segments.length > 1 ? circumference * 0.02 : 0;
     let segStart = 0;
-    return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full", "aria-label": label, "data-testid": testId, children: [_jsxs("svg", { className: "h-10 w-10 -rotate-90", viewBox: "0 0 40 40", children: [allSucceeded && (_jsx("circle", { cx: "20", cy: "20", r: radius - strokeWidth / 2, fill: "var(--color-feedback-green-light)" })), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--color-neutral-grey-15)", strokeWidth: strokeWidth }), total > 0 &&
+    const glyph = renderCentreGlyph("h-4 w-4");
+    return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full", "aria-label": label, "data-testid": testId, "data-outcome": outcome, children: [_jsxs("svg", { className: "h-10 w-10 -rotate-90 overflow-visible", viewBox: "0 0 40 40", children: [isActive && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("filter", { id: glowId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feGaussianBlur", { stdDeviation: "2" }) }) }), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--color-feedback-green)", strokeWidth: strokeWidth + 4, filter: `url(#${glowId})`, opacity: 0.35, children: _jsx("animate", { attributeName: "opacity", values: "0.15;0.5;0.15", dur: "1.8s", repeatCount: "indefinite" }) })] })), centreFill && (_jsx("circle", { cx: "20", cy: "20", r: radius - strokeWidth / 2, fill: centreFill })), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--color-neutral-grey-15)", strokeWidth: strokeWidth }), total > 0 &&
                                     segments.map((seg) => {
                                         const segLen = (seg.count / total) * circumference;
                                         const dash = Math.max(0, segLen - gap);
@@ -1252,7 +1323,7 @@ function BatchProgressIndicator({ counts, testId, variant = "circle", }) {
                                                 strokeDasharray: `${dash} ${circumference}`,
                                                 strokeDashoffset: dashOffset,
                                             } }, seg.key));
-                                    })] }), _jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: allSucceeded ? (_jsx(CheckIcon, { className: "text-feedback-green h-4 w-4", style: { strokeWidth: 3 } })) : (_jsxs("span", { className: `text-[10px] leading-none font-medium tabular-nums ${textToneClass}`, children: [percent, "%"] })) })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
+                                    })] }), _jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: glyph ?? (_jsxs("span", { className: "text-[10px] leading-none font-medium tabular-nums text-neutral-grey-100", children: [percent, "%"] })) })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
 }
 function itemStatusDot(jobs) {
     const hasError = jobs.some((j) => j.status === "Error");
@@ -1269,7 +1340,44 @@ function itemStatusDot(jobs) {
         return { cls: "bg-feedback-orange", label: "Aborted" };
     return { cls: "bg-feedback-green/70", label: "Completed" };
 }
-function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isExpanded, batchStartedAtUtc, abortingJobIds, retryingKeys, singleLine = false, onToggle, onOpenItem, onAbortJob, onRetryJobs, }) {
+// Fallback one-row cap used until the first chip row has been measured.
+const COLLAPSED_CHIP_ROW_HEIGHT_PX = 28;
+function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isExpanded, batchStartedAtUtc, abortingJobIds, retryingKeys, onToggle, onOpenItem, onAbortJob, onRetryJobs, }) {
+    const chipAreaRef = React.useRef(null);
+    const [hiddenCount, setHiddenCount] = React.useState(0);
+    const [firstRowHeight, setFirstRowHeight] = React.useState(null);
+    // Chips always wrap so they can never run into the neighbouring column.
+    // When the item is collapsed only the first line is shown; count the chips
+    // that wrapped onto later lines so a "+N" chip can stand in for them.
+    React.useLayoutEffect(() => {
+        const el = chipAreaRef.current;
+        if (!el || isExpanded) {
+            setHiddenCount(0);
+            return;
+        }
+        const measure = () => {
+            const children = Array.from(el.children);
+            if (children.length === 0) {
+                setHiddenCount(0);
+                return;
+            }
+            const firstTop = children[0]?.offsetTop ?? 0;
+            let hidden = 0;
+            for (const child of children) {
+                if (child.offsetTop > firstTop)
+                    hidden += 1;
+            }
+            setHiddenCount(hidden);
+            setFirstRowHeight(children[0]?.offsetHeight ?? null);
+        };
+        measure();
+        let observer;
+        if (typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(measure);
+            observer.observe(el);
+        }
+        return () => observer?.disconnect();
+    }, [isExpanded, jobs.length]);
     if (jobs.length === 0)
         return null;
     const handleCellClick = (event) => {
@@ -1283,15 +1391,20 @@ function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isE
             onToggle();
         }
     };
-    return (_jsx("div", { role: "button", tabIndex: 0, className: `flex min-w-0 cursor-pointer items-start justify-start gap-1.5 ${singleLine
-            ? "flex-nowrap"
-            : isExpanded
-                ? "flex-wrap"
-                : "max-h-7 flex-wrap overflow-hidden"}`, "aria-label": `${jobs.length} target language${jobs.length !== 1 ? "s" : ""}`, "aria-expanded": isExpanded, onClick: handleCellClick, onKeyDown: handleCellKeyDown, children: jobs.map((job, idx) => {
-            const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
-            const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
-            return (_jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: _jsx(LanguageJobChip, { job: job, language: lang, provider: batchProvider, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage), isAborting: !!job.id && abortingJobIds.has(job.id), onAbort: () => onAbortJob(job), isRetrying: retryingKeys.has(retryKey), onRetry: () => onRetryJobs(batchId, batchProvider, [job], retryKey) }) }, `${job.id ?? idx}-${job.targetLanguage}`));
-        }) }));
+    return (_jsxs("div", { role: "button", tabIndex: 0, className: "flex cursor-pointer items-start gap-1.5", "aria-label": `${jobs.length} target language${jobs.length !== 1 ? "s" : ""}`, "aria-expanded": isExpanded, onClick: handleCellClick, onKeyDown: handleCellKeyDown, children: [_jsx("div", { ref: chipAreaRef, className: `flex flex-1 flex-wrap items-start gap-1.5 ${isExpanded ? "" : "overflow-hidden"}`, 
+                // The cap is the measured height of one chip row, applied inline so
+                // the clip does not depend on a Tailwind max-height utility being
+                // emitted for this file.
+                style: isExpanded
+                    ? undefined
+                    : { maxHeight: firstRowHeight ?? COLLAPSED_CHIP_ROW_HEIGHT_PX }, children: jobs.map((job, idx) => {
+                    const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
+                    const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
+                    return (_jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: _jsx(LanguageJobChip, { job: job, language: lang, provider: batchProvider, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage), isAborting: !!job.id && abortingJobIds.has(job.id), onAbort: () => onAbortJob(job), isRetrying: retryingKeys.has(retryKey), onRetry: () => onRetryJobs(batchId, batchProvider, [job], retryKey) }) }, `${job.id ?? idx}-${job.targetLanguage}`));
+                }) }), !isExpanded && hiddenCount > 0 && (_jsxs("button", { type: "button", className: "mt-px shrink-0 rounded border border-border-default bg-neutral-grey-5 badge-pad-sm text-[12px] leading-none tabular-nums text-neutral-grey-50 transition-colors hover:bg-neutral-grey-15 hover:text-neutral-grey-100", "aria-label": `Show ${hiddenCount} more language${hiddenCount !== 1 ? "s" : ""}`, title: `${hiddenCount} more language${hiddenCount !== 1 ? "s" : ""}`, onClick: (event) => {
+                    event.stopPropagation();
+                    onToggle();
+                }, children: ["+", hiddenCount] }))] }));
 }
 function CustomPromptPanel({ prompts }) {
     const [openProvider, setOpenProvider] = React.useState(null);
@@ -1431,7 +1544,10 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             }
             if (stackLanguageChips) {
                 const normalMinWidth = normalTableMinWidthRef.current;
-                if (normalMinWidth && availableWidth >= normalMinWidth) {
+                // Unstack once the columns layout fits again. Before that layout has
+                // ever been measured, fall back to the threshold that forced stacking
+                // so a narrow-then-wide resize does not stay stacked forever.
+                if (availableWidth >= (normalMinWidth ?? 640)) {
                     setStackLanguageChips(false);
                 }
                 return;
@@ -1476,7 +1592,7 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             byItem.set(key, []);
         byItem.get(key).push(job);
     }
-    return (_jsx("div", { ref: itemTableContainerRef, className: "w-full overflow-hidden", "data-language-layout": stackLanguageChips ? "stacked" : "columns", children: _jsxs("table", { ref: itemTableRef, className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [!stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "px-3 pt-3 pb-1 md:px-4" })), _jsx("th", { scope: "col", className: `pt-3 pb-1 text-left align-top text-[11px] font-medium text-neutral-grey-50 ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Pages / Items" })] }) }), !stackLanguageChips && (_jsx("th", { scope: "col", className: "pt-3 pb-1 pr-2 text-left align-top text-[11px] font-medium text-neutral-grey-50", children: "Languages" })), !stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "pt-3 pr-3 pb-1 md:pr-4" }))] }) }), _jsx("tbody", { children: Array.from(byItem.entries()).map(([itemId, itemJobs], itemIndex) => {
+    return (_jsx("div", { ref: itemTableContainerRef, className: "w-full overflow-hidden", "data-language-layout": stackLanguageChips ? "stacked" : "columns", children: _jsxs("table", { ref: itemTableRef, className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [!stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "px-3 pt-3 pb-1 md:px-4" })), _jsx("th", { scope: "col", className: `pt-3 pb-1 text-left align-top text-[11px] font-medium text-neutral-grey-50 ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Pages / Items" })] }) }), !stackLanguageChips && (_jsx("th", { scope: "col", className: "pt-3 pb-1 pr-2 text-left align-top text-[11px] font-medium text-neutral-grey-50", children: "Languages" })), !stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "w-12 pt-3 pr-3 pb-1 md:pr-4" }))] }) }), _jsx("tbody", { children: Array.from(byItem.entries()).map(([itemId, itemJobs], itemIndex) => {
                         const isItemExpanded = expandedItems.has(itemId);
                         const itemAnyInProgress = itemJobs.some((j) => j.status === "In Progress");
                         const itemAnyPending = itemJobs.some((j) => j.status === "Pending");
@@ -1496,7 +1612,7 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
                             .filter((language) => Boolean(language));
                         const normalizedCurrentLanguage = normalizeLanguageCode(currentLanguage);
                         const rowOpenLanguage = rowLanguages.find((language) => normalizeLanguageCode(language) === normalizedCurrentLanguage) ?? rowLanguages[0];
-                        const languageChips = (_jsx(InlineLanguageJobChips, { batchId: batchId, batchProvider: batchProvider, jobs: itemJobs, languageMap: languageMap, isExpanded: isItemExpanded, batchStartedAtUtc: batchStartedAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, singleLine: !stackLanguageChips, onToggle: () => onToggleItem(itemId), onOpenItem: onOpenItem, onAbortJob: onAbortJob, onRetryJobs: onRetryJobs }));
+                        const languageChips = (_jsx(InlineLanguageJobChips, { batchId: batchId, batchProvider: batchProvider, jobs: itemJobs, languageMap: languageMap, isExpanded: isItemExpanded, batchStartedAtUtc: batchStartedAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, onToggle: () => onToggleItem(itemId), onOpenItem: onOpenItem, onAbortJob: onAbortJob, onRetryJobs: onRetryJobs }));
                         const showRetryAction = itemErrorJobs.length > 0;
                         const retryAction = showRetryAction ? (_jsx("div", { className: "flex shrink-0 items-center justify-end", children: _jsx(SimpleIconButton, { onClick: (event) => {
                                     event.stopPropagation();
@@ -1514,7 +1630,7 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
                                     e.preventDefault();
                                     void onOpenItem(itemId, rowOpenLanguage);
                                 }
-                            }, children: [!stackLanguageChips && (_jsx("td", { "aria-hidden": "true", className: "px-3 py-2 md:px-4" })), _jsx("td", { className: `py-2 align-top ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: itemContent }), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-2 align-top", children: languageChips })), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-3 align-top md:pr-4", children: retryAction }))] }, itemId));
+                            }, children: [!stackLanguageChips && (_jsx("td", { "aria-hidden": "true", className: "px-3 py-2 md:px-4" })), _jsx("td", { className: `py-2 align-top ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: itemContent }), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-2 align-top", children: languageChips })), !stackLanguageChips && (_jsx("td", { className: "w-12 py-2 pr-3 align-top whitespace-nowrap md:pr-4", children: retryAction }))] }, itemId));
                     }) })] }) }));
 }
 function LanguageJobChip({ job, language, provider, batchStartedAtUtc, onOpen, isAborting = false, onAbort, isRetrying = false, onRetry, }) {
@@ -1607,10 +1723,10 @@ function LanguageJobChip({ job, language, provider, batchStartedAtUtc, onOpen, i
     const emptyFieldText = statistics && statistics.emptyFieldCount > 0
         ? `${formatCount(statistics.emptyFieldCount)} empty`
         : null;
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `group inline-flex items-center gap-1.5 rounded border badge-pad-sm text-[12px] transition-colors cursor-pointer ${chipCls}`, children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-3.5 shrink-0" })) : null, _jsx("span", { className: "font-mono tracking-tight", children: job.targetLanguage }), jobInProgress && (_jsx(LoaderIcon, { className: "h-3 w-3 shrink-0 animate-spin" })), jobPending && (_jsx(QueuedIcon, { className: "h-3 w-3 shrink-0", strokeWidth: 1, "aria-label": "Queued" })), jobError && _jsx(AlertCircleIcon, { className: "h-3 w-3 shrink-0" }), !jobInProgress && !jobError && !jobPending && !jobAborted && (_jsx(CheckIcon, { className: "h-3 w-3 shrink-0 text-feedback-green" }))] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[22rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border-default px-3 py-2", children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-4 shrink-0" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[13px] font-medium text-neutral-grey-100 truncate", children: langName }), _jsxs("div", { className: "text-[11px] text-neutral-grey-50 font-mono truncate", children: [job.targetLanguage, job.sourceLanguage ? ` ← ${job.sourceLanguage}` : ""] })] }), _jsxs(Badge, { size: "sm", className: statusBadgeCls, children: [jobInProgress && (_jsx(LoaderIcon, { className: "h-2.5 w-2.5 animate-spin" })), jobStatus || "Unknown"] })] }), _jsxs("dl", { className: "divide-y divide-border-default/60", children: [claimedAtValid && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Claimed" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: formatDateTime(claimedAt) })] })), timestampValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Updated" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: formatDateTime(timestamp) })] })), durationMs != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: jobInProgress || jobPending ? "Running" : "Duration" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", title: durationApproximated
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `group inline-flex items-center gap-1.5 rounded border badge-pad-sm text-[12px] transition-colors cursor-pointer ${chipCls}`, children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-3.5 shrink-0" })) : null, _jsx("span", { className: "font-mono tracking-tight", children: job.targetLanguage }), jobInProgress && (_jsx(LoaderIcon, { className: "h-3 w-3 shrink-0 animate-spin" })), jobPending && (_jsx(QueuedIcon, { className: "h-3 w-3 shrink-0", strokeWidth: 1, "aria-label": "Queued" })), jobError && _jsx(AlertCircleIcon, { className: "h-3 w-3 shrink-0" }), !jobInProgress && !jobError && !jobPending && !jobAborted && (_jsx(CheckIcon, { className: "h-3 w-3 shrink-0 text-feedback-green" }))] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[26rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border-default px-3 py-2", children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-4 shrink-0" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[13px] font-medium text-neutral-grey-100 truncate", children: langName }), _jsxs("div", { className: "text-[11px] text-neutral-grey-50 font-mono truncate", children: [job.targetLanguage, job.sourceLanguage ? ` ← ${job.sourceLanguage}` : ""] })] }), _jsxs(Badge, { size: "sm", className: statusBadgeCls, children: [jobInProgress && (_jsx(LoaderIcon, { className: "h-2.5 w-2.5 animate-spin" })), jobStatus || "Unknown"] })] }), _jsxs("dl", { className: "divide-y divide-border-default/60", children: [claimedAtValid && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Claimed" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: formatDateTime(claimedAt) })] })), timestampValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Updated" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: formatDateTime(timestamp) })] })), durationMs != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: jobInProgress || jobPending ? "Running" : "Duration" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", title: durationApproximated
                                             ? "Approximate — measured from batch start"
                                             : undefined, children: [durationApproximated ? "~" : "", formatDuration(durationMs)] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Fields" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: [fieldText, emptyFieldText ? (_jsxs("span", { className: "ml-1.5 text-neutral-grey-50", children: ["(", emptyFieldText, ")"] })) : null] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Text" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: [formatCount(statistics.sourceCharacterCount), " chars"] })] })), job.totalCost != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Cost" }), _jsx("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: formatUsdCost(job.totalCost) })] })), lastHeartbeatValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Heartbeat" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: formatDateTime(lastHeartbeat) })] })), attemptCount > 1 && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Attempts" }), _jsx("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: attemptCount })] })), job.hash && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Hash" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-100 break-all", children: job.hash })] })), job.message &&
-                                (jobError || jobAborted ? (_jsxs("div", { className: "flex flex-col gap-1 px-3 py-2", children: [_jsx("dt", { className: "text-[10px] tracking-wide text-neutral-grey-50", children: jobError ? "Error" : "Aborted" }), _jsx("dd", { className: `max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-sm bg-neutral-grey-5 p-2 font-mono text-[11px] leading-snug ${jobError ? "text-feedback-red" : "text-feedback-orange"}`, children: job.message })] })) : (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Progress" }), _jsx("dd", { className: "text-[12px] break-words text-neutral-grey-100", children: job.message })] }))), job.batchId && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Batch" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-50 break-all", children: job.batchId })] }))] }), _jsxs("div", { className: "flex justify-end gap-2 border-t border-border-default px-3 py-2", children: [canInspectRawResponse && (_jsx(ContentInspectorPopover, { title: "Raw AI response", emptyMessage: "Nothing captured for this job yet. Captures are kept in memory only and exist for AI provider jobs that ran since the last restart.", downloadFileName: `translation-job-${job.id}-raw-response.txt`, className: "w-[min(64rem,calc(100vw-2rem))]", side: "left", align: "start", loadSections: async () => {
+                                (jobError || jobAborted ? (_jsxs("div", { className: "flex flex-col gap-1 px-3 py-2", children: [_jsx("dt", { className: "text-[10px] tracking-wide text-neutral-grey-50", children: jobError ? "Error" : "Aborted" }), _jsx("dd", { className: `max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-sm bg-neutral-grey-5 p-2 font-mono text-[11px] leading-snug ${jobError ? "text-feedback-red" : "text-feedback-orange"}`, children: job.message })] })) : (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Progress" }), _jsx("dd", { className: "text-[12px] break-words text-neutral-grey-100", children: job.message })] }))), job.batchId && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Batch" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-50 break-all", children: job.batchId })] }))] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2 border-t border-border-default px-3 py-2", children: [canInspectRawResponse && (_jsx(ContentInspectorPopover, { title: "Raw AI response", emptyMessage: "Nothing captured for this job yet. Captures are kept in memory only and exist for AI provider jobs that ran since the last restart.", downloadFileName: `translation-job-${job.id}-raw-response.txt`, className: "w-[min(64rem,calc(100vw-2rem))]", side: "bottom", align: "end", loadSections: async () => {
                                     const { payload, rawResponse } = await getTranslationJobLastPayload(job.id);
                                     const sections = [];
                                     if (rawResponse) {
@@ -1620,14 +1736,17 @@ function LanguageJobChip({ job, language, provider, batchStartedAtUtc, onOpen, i
                                         });
                                     }
                                     if (payload) {
-                                        sections.push({ title: "Last request payload", content: payload });
+                                        sections.push({
+                                            title: "Last request payload",
+                                            content: payload,
+                                        });
                                     }
                                     return sections;
                                 }, trigger: _jsxs(Button, { size: "sm", variant: "outline", "data-testid": "translation-job-raw-response-button", onClick: (e) => e.stopPropagation(), className: "mr-auto gap-1.5 text-neutral-grey-50", title: "Show the raw AI request and responses for this job", children: [_jsx(BugIcon, { className: "h-3.5 w-3.5" }), "Raw response"] }) })), canAbort && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isAborting, onClick: (e) => {
                                     e.stopPropagation();
                                     void onAbort?.();
                                     setOpen(false);
-                                }, className: "gap-1.5 text-feedback-orange hover:text-feedback-orange", children: [_jsx(AbortIcon, { className: `h-3.5 w-3.5 ${isAborting ? "animate-spin" : ""}` }), "Abort"] })), jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
+                                }, className: "gap-1.5 text-neutral-grey-50 hover:text-neutral-grey-100", children: [isAborting ? (_jsx(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(AbortIcon, { className: "h-3.5 w-3.5" })), "Abort"] })), jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
                                     e.stopPropagation();
                                     void onRetry();
                                     setOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parhelia/localization",
-  "version": "0.4.12796",
+  "version": "0.4.12818",
   "type": "module",
   "publishConfig": {
     "access": "public"