@parhelia/localization 0.1.11464 → 0.1.11519

package/dist/LocalizeItemDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeItemDialog.d.ts","sourceRoot":"","sources":["../src/LocalizeItemDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EAExB,MAAM,eAAe,CAAC;AAiBvB,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAAG,WAAW,CAAC,uBAAuB,CAAC,2CA8VtE"}
+{"version":3,"file":"LocalizeItemDialog.d.ts","sourceRoot":"","sources":["../src/LocalizeItemDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EAExB,MAAM,eAAe,CAAC;AAiBvB,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAAG,WAAW,CAAC,uBAAuB,CAAC,2CAmWtE"}

package/dist/LocalizeItemDialog.js

@@ -186,7 +186,9 @@ export function LocalizeItemDialog(props) {
                 minHeight: '700px'
             }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { "data-testid": "translation-wizard-title", children: "Translation Wizard" }), _jsx("div", { id: "translation-wizard-description", className: "sr-only", children: currentStep?.description || "Configure and start translation for your content." })] }), _jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [_jsx("div", { className: "border-b border-[var(--color-gray-3)] bg-background px-6", "data-testid": "translation-wizard-step-navigation", children: _jsx("div", { className: "flex items-center gap-3 py-3", children: activeSteps.map((step, index) => (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `step-indicator-${step.id}`, children: [_jsx("div", { className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", currentStepIndex === index &&
                                                 "border-[#9650fb] text-[#9650fb] bg-[#f6eeff]", currentStepIndex < index && "border-[var(--color-gray-3)] text-[var(--color-gray-2)]", currentStepIndex > index &&
-                                                "bg-[#9650fb] text-white border-[#9650fb]"), "data-testid": `step-indicator-circle-${step.id}`, children: currentStepIndex > index ? "✓" : index + 1 }), _jsx("span", { className: cn("text-sm", currentStepIndex === index
+                                                "bg-[#9650fb] text-white border-[#9650fb]"), style: currentStepIndex > index
+                                                ? { backgroundColor: "#9650fb", color: "#ffffff" }
+                                                : undefined, "data-testid": `step-indicator-circle-${step.id}`, children: currentStepIndex > index ? "✓" : index + 1 }), _jsx("span", { className: cn("text-sm", currentStepIndex === index
                                                 ? "text-[#9650fb] font-medium"
                                                 : currentStepIndex > index
                                                     ? "text-[#9650fb]"

package/dist/LocalizeItemUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeItemUtils.d.ts","sourceRoot":"","sources":["../src/LocalizeItemUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,eAAe,EAC5B,iBAAiB,CAAC,EAAE,MAAM,GACzB,OAAO,CAAC,iBAAiB,CAAC,CAiG5B;AAGD,eAAO,MAAM,mBAAmB,GAAU,eAAe,MAAM,EAAE,EAAE,mBAAmB,iBAAiB,EAAE,EAAE,WAAW,MAAM,EAAE,MAAM,QAAQ,EAAE,qBAAqB,MAAM,+BA0BxK,CAAC"}
+{"version":3,"file":"LocalizeItemUtils.d.ts","sourceRoot":"","sources":["../src/LocalizeItemUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,eAAe,EAC5B,iBAAiB,CAAC,EAAE,MAAM,GACzB,OAAO,CAAC,iBAAiB,CAAC,CAqH5B;AAGD,eAAO,MAAM,mBAAmB,GAAU,eAAe,MAAM,EAAE,EAAE,mBAAmB,iBAAiB,EAAE,EAAE,WAAW,MAAM,EAAE,MAAM,QAAQ,EAAE,qBAAqB,MAAM,+BA0BxK,CAAC"}

package/dist/LocalizeItemUtils.js

@@ -46,12 +46,27 @@ export async function performDefaultTranslation(wizardData, editContext, predefi
     if (wizardData.serviceCustomData && wizardData.serviceCustomData.size > 0) {
         const serviceData = wizardData.serviceCustomData.get(wizardData.translationProvider);
         if (serviceData && serviceData.enableCustomPrompt) {
+            const provider = wizardData.translationProviders.find(p => p.name === wizardData.translationProvider);
+            const defaultPrompt = provider?.defaultPrompt && provider.defaultPrompt.trim()
+                ? provider.defaultPrompt
+                : null;
+            const customizationType = serviceData.promptCustomizationType === "replace" ? "replace" : "extend";
+            const rawCustomPrompt = (serviceData.customPrompt || "").trim();
+            let finalCustomPrompt = "";
+            if (rawCustomPrompt) {
+                if (defaultPrompt && customizationType === "extend") {
+                    finalCustomPrompt = `${defaultPrompt}\n\n${rawCustomPrompt}`;
+                }
+                else {
+                    finalCustomPrompt = rawCustomPrompt;
+                }
+            }
             // Merge service-specific custom data into batch metadata
             const metadataObj = batchMetadata ? (typeof batchMetadata === 'string' ? JSON.parse(batchMetadata) : batchMetadata) : {};
             metadataObj.serviceCustomData = {
                 [wizardData.translationProvider]: {
                     enableCustomPrompt: serviceData.enableCustomPrompt,
-                    customPrompt: serviceData.customPrompt || ""
+                    customPrompt: finalCustomPrompt
                 }
             };
             batchMetadata = JSON.stringify(metadataObj);

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

@@ -1 +1 @@
-{"version":3,"file":"PromptCustomizationStep.d.ts","sourceRoot":"","sources":["../../src/steps/PromptCustomizationStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAEtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CA6MtB"}
+{"version":3,"file":"PromptCustomizationStep.d.ts","sourceRoot":"","sources":["../../src/steps/PromptCustomizationStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAEtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CAwPtB"}

package/dist/steps/PromptCustomizationStep.js

@@ -1,8 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 export function PromptCustomizationStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, }) {
     const [customPrompt, setCustomPrompt] = useState("");
     const [customizationType, setCustomizationType] = useState("extend");
+    const customPromptRef = useRef(customPrompt);
+    const customizationTypeRef = useRef(customizationType);
+    useEffect(() => {
+        customPromptRef.current = customPrompt;
+    }, [customPrompt]);
+    useEffect(() => {
+        customizationTypeRef.current = customizationType;
+    }, [customizationType]);
     // Get service-specific custom data for the selected provider
     const serviceData = useMemo(() => {
         if (!data.serviceCustomData || !data.translationProvider)
@@ -10,17 +18,6 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
         return data.serviceCustomData.get(data.translationProvider);
     }, [data.serviceCustomData, data.translationProvider]);
     const enableCustomPrompt = serviceData?.enableCustomPrompt === true;
-    // Initialize from existing data
-    useEffect(() => {
-        if (enableCustomPrompt && serviceData) {
-            setCustomPrompt(serviceData.customPrompt || "");
-            setCustomizationType(serviceData.promptCustomizationType || "extend");
-        }
-        else {
-            setCustomPrompt("");
-            setCustomizationType("extend");
-        }
-    }, [enableCustomPrompt, serviceData]);
     // Get default prompt from provider settings (no fallback)
     const defaultPrompt = useMemo(() => {
         const provider = data.translationProviders.find(p => p.name === data.translationProvider);
@@ -29,6 +26,37 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
         return prompt && prompt.trim() ? prompt : null;
     }, [data.translationProviders, data.translationProvider]);
     const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.trim().length > 0;
+    // Initialize from existing data
+    useEffect(() => {
+        const nextCustomizationType = serviceData?.promptCustomizationType || "extend";
+        let nextCustomPrompt = serviceData?.customPrompt || "";
+        // If stored prompt already includes default (legacy), strip it for editing
+        if (hasDefaultPrompt && nextCustomizationType === "extend" && nextCustomPrompt.startsWith(defaultPrompt || "")) {
+            nextCustomPrompt = nextCustomPrompt.slice((defaultPrompt || "").length);
+            nextCustomPrompt = nextCustomPrompt.replace(/^\s*\n\s*\n?/, "");
+        }
+        if (enableCustomPrompt && serviceData) {
+            if (customPromptRef.current !== nextCustomPrompt) {
+                setCustomPrompt(nextCustomPrompt);
+            }
+            if (customizationTypeRef.current !== nextCustomizationType) {
+                setCustomizationType(nextCustomizationType);
+            }
+        }
+        else {
+            if (customPromptRef.current !== "") {
+                setCustomPrompt("");
+            }
+            if (customizationTypeRef.current !== "extend") {
+                setCustomizationType("extend");
+            }
+        }
+    }, [
+        enableCustomPrompt,
+        serviceData,
+        hasDefaultPrompt,
+        defaultPrompt,
+    ]);
     // Preview of final prompt
     const previewPrompt = useMemo(() => {
         if (!enableCustomPrompt || !customPrompt.trim()) {
@@ -49,34 +77,29 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
         if (!isActive)
             return;
         const newServiceCustomData = new Map(data.serviceCustomData || new Map());
-        // Compute final custom prompt based on extend/replace of Default Prompt
-        let finalCustomPrompt = "";
-        if (enableCustomPrompt && customPrompt.trim()) {
-            if (hasDefaultPrompt) {
-                // If default prompt exists, apply extend/replace logic
-                if (customizationType === "replace") {
-                    // Replace Default Prompt entirely
-                    finalCustomPrompt = customPrompt.trim();
-                }
-                else {
-                    // Extend Default Prompt
-                    finalCustomPrompt = `${defaultPrompt}\n\n${customPrompt.trim()}`;
-                }
-            }
-            else {
-                // No default prompt, just use custom prompt as-is
-                finalCustomPrompt = customPrompt.trim();
-            }
-        }
+        const trimmedCustomPrompt = customPrompt.trim();
+        const nextCustomizationType = customizationType === "replace" ? "replace" : "extend";
+        const currentServiceData = data.serviceCustomData?.get(data.translationProvider);
         if (enableCustomPrompt) {
-            newServiceCustomData.set(data.translationProvider, {
+            const nextServiceData = {
                 enableCustomPrompt: true,
-                customPrompt: finalCustomPrompt,
-                // Note: promptCustomizationType is no longer sent to backend
-            });
+                // Store raw custom prompt only; final prompt is composed when sending metadata.
+                customPrompt: trimmedCustomPrompt,
+                promptCustomizationType: nextCustomizationType,
+            };
+            const isSame = currentServiceData?.enableCustomPrompt === true &&
+                (currentServiceData.customPrompt || "") === trimmedCustomPrompt &&
+                (currentServiceData.promptCustomizationType || "extend") === nextCustomizationType;
+            if (isSame) {
+                return;
+            }
+            newServiceCustomData.set(data.translationProvider, nextServiceData);
         }
         else {
             // Remove custom data if disabled
+            if (!currentServiceData) {
+                return;
+            }
             newServiceCustomData.delete(data.translationProvider);
         }
         const newData = {
@@ -84,7 +107,15 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
             serviceCustomData: newServiceCustomData,
         };
         setData(newData);
-    }, [enableCustomPrompt, customPrompt, customizationType, defaultPrompt, hasDefaultPrompt, data.translationProvider, isActive, setData]);
+    }, [
+        enableCustomPrompt,
+        customPrompt,
+        customizationType,
+        data.serviceCustomData,
+        data.translationProvider,
+        isActive,
+        setData,
+    ]);
     // Update completion status
     useEffect(() => {
         if (!isActive)

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

@@ -1 +1 @@
-{"version":3,"file":"BatchTranslationView.d.ts","sourceRoot":"","sources":["../../src/translation-center/BatchTranslationView.tsx"],"names":[],"mappings":"AAwBA,OAAO,qCAAqC,CAAC;AAa7C,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,yBAAyB,2CAq8BlF"}
+{"version":3,"file":"BatchTranslationView.d.ts","sourceRoot":"","sources":["../../src/translation-center/BatchTranslationView.tsx"],"names":[],"mappings":"AAyBA,OAAO,qCAAqC,CAAC;AAsB7C,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAoCD,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,yBAAyB,2CAo9BlF"}

package/dist/translation-center/BatchTranslationView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useState, useMemo, useRef, useCallback, } from "react";
+import React, { useEffect, useState, useMemo, useRef, useCallback, memo, } from "react";
 import { useEditContext, SimpleTable, Progress as CoreProgress, Button, } from "@parhelia/core";
 import { listBatchTranslationJobs, subscribeToBatch, unsubscribeFromBatch, getBatchInfo, getTranslationProviders } from "../services/translationService";
 import { ChevronDown, ChevronUp } from "lucide-react";
@@ -10,6 +10,9 @@ const Progress = (props) => React.createElement(CoreProgress, props);
 // Wrappers for lucide-react icons to work with React 19
 const ChevronUpIcon = (props) => React.createElement(ChevronUp, props);
 const ChevronDownIcon = (props) => React.createElement(ChevronDown, props);
+const MemoizedJsonView = memo(({ data }) => (_jsx(JsonView, { data: data, shouldExpandNode: (level) => level < 2, style: defaultStyles })), (prevProps, nextProps) => {
+    return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data);
+});
 // Normalize API shape/casing to what the UI expects
 function normalizeBatchInfo(raw) {
     if (!raw)
@@ -52,6 +55,7 @@ export function BatchTranslationView({ batchId, onBack }) {
     const isSubscribedRef = useRef(false);
     const initGuardRef = useRef(false);
     const lastBatchIdRef = useRef(null);
+    const completionRefreshRef = useRef(null);
     // Helper function to get display name from service name
     const getProviderDisplayName = useCallback((serviceName) => {
         if (!serviceName)
@@ -165,6 +169,7 @@ export function BatchTranslationView({ batchId, onBack }) {
             hasLoadedRef.current = false;
             isSubscribedRef.current = false;
             initGuardRef.current = false;
+            completionRefreshRef.current = null;
         }
         let cancelled = false;
         const init = async () => {
@@ -302,6 +307,7 @@ export function BatchTranslationView({ batchId, onBack }) {
                         const info = normalizeBatchInfo(raw);
                         if (info)
                             setBatchInfo(info);
+                        await loadBatchJobs();
                     }
                     catch { }
                 })();
@@ -495,13 +501,32 @@ export function BatchTranslationView({ batchId, onBack }) {
         progressSegments.inProgressCount === 0
         ? "Completed"
         : batchInfo?.status;
+    // Ensure terminal state is reflected in UI even if a websocket message was missed.
+    useEffect(() => {
+        if (effectiveStatus !== "Completed" && effectiveStatus !== "Error")
+            return;
+        if (completionRefreshRef.current === batchId)
+            return;
+        completionRefreshRef.current = batchId;
+        (async () => {
+            try {
+                const resInfo = await getBatchInfo(batchId);
+                const raw = resInfo?.data ?? resInfo;
+                const info = normalizeBatchInfo(raw);
+                if (info)
+                    setBatchInfo(info);
+                await loadBatchJobs();
+            }
+            catch { }
+        })();
+    }, [effectiveStatus, batchId, loadBatchJobs]);
     return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-[var(--color-gray-5)]", "data-testid": "batch-translation-view", children: [_jsxs("div", { className: "flex-shrink-0 border-b border-[var(--color-gray-3)] bg-background p-4 md:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [onBack && (_jsxs(Button, { size: "sm", variant: "outline", onClick: onBack, children: [_jsx("i", { className: "pi pi-arrow-left" }), "Back"] })), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold text-[var(--color-dark)]", children: "Translation Batch" }), _jsxs("p", { className: "text-sm text-[var(--color-gray-2)] mt-1", children: ["Batch ID: ", _jsx("span", { className: "font-mono text-xs bg-[var(--color-gray-4)] px-2 py-0.5 rounded-md", children: batchId })] }), batchInfo && (_jsxs("div", { className: "mt-2 flex flex-wrap gap-2 items-center text-xs", children: [effectiveStatus && (_jsx("span", { "data-testid": "translation-job-status", className: `inline-flex items-center rounded-full px-2.5 py-1 font-medium ${effectiveStatus === 'Completed'
                                                             ? 'bg-green-100 text-green-700'
                                                             : effectiveStatus === 'In Progress'
                                                                 ? ''
                                                                 : effectiveStatus === 'Error'
                                                                     ? 'bg-red-100 text-red-600'
-                                                                    : 'bg-[var(--color-gray-4)] text-[var(--color-gray-1)]'}`, style: effectiveStatus === 'In Progress' ? { backgroundColor: '#f6eeff', color: '#9650fb' } : undefined, children: effectiveStatus })), batchInfo.provider && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["Provider: ", _jsx("span", { className: "font-medium", children: getProviderDisplayName(batchInfo.provider) })] })), batchInfo.initiatedByUser && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["By: ", _jsx("span", { className: "font-medium", children: batchInfo.initiatedByUser })] })), batchInfo.includeSubitems !== undefined && batchInfo.includeSubitems !== null && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["Include subitems: ", _jsx("span", { className: "font-medium", children: batchInfo.includeSubitems ? 'Yes' : 'No' })] })), batchInfo.scopeItemPath && (_jsxs("span", { className: "text-[var(--color-gray-1)] truncate max-w-[40rem]", children: ["Scope: ", _jsx("span", { className: "font-mono", children: batchInfo.scopeItemPath })] })), (batchInfo.startedAtUtc || batchInfo.completedAtUtc || batchInfo.lastUpdatedUtc) && (_jsxs("span", { className: "text-[var(--color-gray-2)]", children: [batchInfo.startedAtUtc && (_jsxs(_Fragment, { children: ["Started: ", new Date(batchInfo.startedAtUtc).toLocaleString()] })), batchInfo.completedAtUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Completed: ", new Date(batchInfo.completedAtUtc).toLocaleString()] })), !batchInfo.completedAtUtc && batchInfo.lastUpdatedUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Updated: ", new Date(batchInfo.lastUpdatedUtc).toLocaleString()] }))] }))] }))] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "text-sm text-[var(--color-gray-2)]", children: [`${progressSegments.completedCount}/${progressSegments.total} completed`, progressSegments.errorCount ? `, ${progressSegments.errorCount} errors` : ''] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: loadBatchJobs, disabled: isLoading, title: "Manual refresh - normally updates come through websocket subscriptions", children: [_jsx("i", { className: `pi pi-refresh ${isLoading ? 'pi-spin' : ''}` }), "Refresh"] })] })] }), parsedMetadata && (_jsxs("div", { className: "border-t border-[var(--color-gray-3)] bg-[var(--color-gray-5)] mt-4 rounded-b-lg", children: [_jsxs("button", { onClick: () => setIsMetadataExpanded(!isMetadataExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-[var(--color-gray-4)]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "pi pi-info-circle text-[var(--color-gray-2)]" }), _jsx("span", { className: "text-xs font-medium text-[var(--color-gray-1)]", children: "Batch Metadata" })] }), isMetadataExpanded ? (_jsx(ChevronUpIcon, { className: "h-4 w-4 text-[var(--color-gray-2)]", strokeWidth: 1 })) : (_jsx(ChevronDownIcon, { className: "h-4 w-4 text-[var(--color-gray-2)]", strokeWidth: 1 }))] }), isMetadataExpanded && (_jsx("div", { className: "max-h-96 overflow-y-auto px-4 pb-3", children: _jsx("div", { className: "rounded-lg border border-[var(--color-gray-3)] bg-background p-3 text-xs shadow-sm mt-2", children: _jsx(JsonView, { data: parsedMetadata, shouldExpandNode: (level) => level < 2, style: defaultStyles }) }) }))] })), _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium text-[var(--color-dark)]", children: "Overall Progress" }), _jsxs("span", { className: "text-sm text-[var(--color-gray-2)]", children: [progressSegments.completedCount, " / ", progressSegments.total, " completed"] })] }), _jsxs("div", { className: "relative h-4 rounded-full overflow-hidden", style: { backgroundColor: 'var(--color-gray-3)' }, children: [_jsxs("div", { className: "absolute inset-0 flex", children: [progressSegments.completed > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.completed}%`, backgroundColor: '#8ae048' } })), progressSegments.inProgress > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.inProgress}%`, backgroundColor: '#9650fb' } })), progressSegments.error > 0 && (_jsx("div", { className: "bg-destructive h-full transition-all duration-300", style: { width: `${progressSegments.error}%` } })), progressSegments.pending > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.pending}%`, backgroundColor: 'var(--color-gray-4)' } }))] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("span", { className: "text-xs font-medium text-white drop-shadow-sm", children: [overallProgress, "%"] }) })] }), _jsxs("div", { className: "flex flex-wrap gap-3 mt-2 text-xs", children: [progressSegments.completedCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: '#8ae048' } }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.completedCount, " completed"] })] })), progressSegments.inProgressCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: '#9650fb' } }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.inProgressCount, " in progress"] })] })), progressSegments.errorCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-destructive rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.errorCount, " errors"] })] })), progressSegments.pendingCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-[var(--color-gray-4)] rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.pendingCount, " pending"] })] })), typeof batchInfo?.expectedJobs === 'number' && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-[var(--color-gray-4)] rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [(batchInfo.expectedJobs || 0) - (batchInfo.completedJobs || 0) - (batchInfo.errorJobs || 0), " pending (server)"] })] }))] })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-[var(--color-gray-2)]", children: [_jsx("i", { className: "pi pi-spin pi-spinner text-[#9650fb]" }), "Loading batch translations..."] }) })) : batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-[var(--color-gray-2)]", children: [_jsx("i", { className: "pi pi-language text-2xl block mb-2 text-[var(--color-gray-3)]" }), _jsx("p", { className: "font-medium text-[var(--color-gray-1)]", children: "No translations found for this batch" }), _jsx("p", { className: "text-sm mt-1", children: "The batch may not exist or no translation jobs have started yet" })] }) })) : (_jsx("div", { className: "space-y-4", children: sortedItemGroups.map(([itemId, jobs]) => {
+                                                                    : 'bg-[var(--color-gray-4)] text-[var(--color-gray-1)]'}`, style: effectiveStatus === 'In Progress' ? { backgroundColor: '#f6eeff', color: '#9650fb' } : undefined, children: effectiveStatus })), batchInfo.provider && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["Provider: ", _jsx("span", { className: "font-medium", children: getProviderDisplayName(batchInfo.provider) })] })), batchInfo.initiatedByUser && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["By: ", _jsx("span", { className: "font-medium", children: batchInfo.initiatedByUser })] })), batchInfo.includeSubitems !== undefined && batchInfo.includeSubitems !== null && (_jsxs("span", { className: "text-[var(--color-gray-1)]", children: ["Include subitems: ", _jsx("span", { className: "font-medium", children: batchInfo.includeSubitems ? 'Yes' : 'No' })] })), batchInfo.scopeItemPath && (_jsxs("span", { className: "text-[var(--color-gray-1)] truncate max-w-[40rem]", children: ["Scope: ", _jsx("span", { className: "font-mono", children: batchInfo.scopeItemPath })] })), (batchInfo.startedAtUtc || batchInfo.completedAtUtc || batchInfo.lastUpdatedUtc) && (_jsxs("span", { className: "text-[var(--color-gray-2)]", children: [batchInfo.startedAtUtc && (_jsxs(_Fragment, { children: ["Started: ", new Date(batchInfo.startedAtUtc).toLocaleString()] })), batchInfo.completedAtUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Completed: ", new Date(batchInfo.completedAtUtc).toLocaleString()] })), !batchInfo.completedAtUtc && batchInfo.lastUpdatedUtc && (_jsxs(_Fragment, { children: [batchInfo.startedAtUtc ? ' • ' : '', "Updated: ", new Date(batchInfo.lastUpdatedUtc).toLocaleString()] }))] }))] }))] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "text-sm text-[var(--color-gray-2)]", children: [`${progressSegments.completedCount}/${progressSegments.total} completed`, progressSegments.errorCount ? `, ${progressSegments.errorCount} errors` : ''] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: loadBatchJobs, disabled: isLoading, title: "Manual refresh - normally updates come through websocket subscriptions", children: [_jsx("i", { className: `pi pi-refresh ${isLoading ? 'pi-spin' : ''}` }), "Refresh"] })] })] }), parsedMetadata && (_jsxs("div", { className: "border-t border-[var(--color-gray-3)] bg-[var(--color-gray-5)] mt-4 rounded-b-lg", children: [_jsxs("button", { onClick: () => setIsMetadataExpanded(!isMetadataExpanded), className: "flex w-full cursor-pointer items-center justify-between px-4 py-2.5 text-left transition-colors hover:bg-[var(--color-gray-4)]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "pi pi-info-circle text-[var(--color-gray-2)]" }), _jsx("span", { className: "text-xs font-medium text-[var(--color-gray-1)]", children: "Batch Metadata" })] }), isMetadataExpanded ? (_jsx(ChevronUpIcon, { className: "h-4 w-4 text-[var(--color-gray-2)]", strokeWidth: 1 })) : (_jsx(ChevronDownIcon, { className: "h-4 w-4 text-[var(--color-gray-2)]", strokeWidth: 1 }))] }), isMetadataExpanded && (_jsx("div", { className: "max-h-96 overflow-y-auto px-4 pb-3", children: _jsx("div", { className: "rounded-lg border border-[var(--color-gray-3)] bg-background p-3 text-xs shadow-sm mt-2", children: _jsx(MemoizedJsonView, { data: parsedMetadata }) }) }))] })), _jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-medium text-[var(--color-dark)]", children: "Overall Progress" }), _jsxs("span", { className: "text-sm text-[var(--color-gray-2)]", children: [progressSegments.completedCount, " / ", progressSegments.total, " completed"] })] }), _jsxs("div", { className: "relative h-4 rounded-full overflow-hidden", style: { backgroundColor: 'var(--color-gray-3)' }, children: [_jsxs("div", { className: "absolute inset-0 flex", children: [progressSegments.completed > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.completed}%`, backgroundColor: '#8ae048' } })), progressSegments.inProgress > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.inProgress}%`, backgroundColor: '#9650fb' } })), progressSegments.error > 0 && (_jsx("div", { className: "bg-destructive h-full transition-all duration-300", style: { width: `${progressSegments.error}%` } })), progressSegments.pending > 0 && (_jsx("div", { className: "h-full transition-all duration-300", style: { width: `${progressSegments.pending}%`, backgroundColor: 'var(--color-gray-4)' } }))] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("span", { className: "text-xs font-medium text-white drop-shadow-sm", children: [overallProgress, "%"] }) })] }), _jsxs("div", { className: "flex flex-wrap gap-3 mt-2 text-xs", children: [progressSegments.completedCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: '#8ae048' } }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.completedCount, " completed"] })] })), progressSegments.inProgressCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: '#9650fb' } }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.inProgressCount, " in progress"] })] })), progressSegments.errorCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-destructive rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.errorCount, " errors"] })] })), progressSegments.pendingCount > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-[var(--color-gray-4)] rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [progressSegments.pendingCount, " pending"] })] })), typeof batchInfo?.expectedJobs === 'number' && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "w-3 h-3 bg-[var(--color-gray-4)] rounded-sm" }), _jsxs("span", { className: "text-[var(--color-gray-1)]", children: [(batchInfo.expectedJobs || 0) - (batchInfo.completedJobs || 0) - (batchInfo.errorJobs || 0), " pending (server)"] })] }))] })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-[var(--color-gray-2)]", children: [_jsx("i", { className: "pi pi-spin pi-spinner text-[#9650fb]" }), "Loading batch translations..."] }) })) : batchJobs.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-[var(--color-gray-2)]", children: [_jsx("i", { className: "pi pi-language text-2xl block mb-2 text-[var(--color-gray-3)]" }), _jsx("p", { className: "font-medium text-[var(--color-gray-1)]", children: "No translations found for this batch" }), _jsx("p", { className: "text-sm mt-1", children: "The batch may not exist or no translation jobs have started yet" })] }) })) : (_jsx("div", { className: "space-y-4", children: sortedItemGroups.map(([itemId, jobs]) => {
                         const itemCompleted = jobs.filter(j => j.status === "Completed").length;
                         // Calculate item progress including in-progress job progress
                         // Performance: item-level calculation is always fast (typically 2-10 jobs per item)

package/package.json

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