@object-ui/app-shell 6.0.4 → 6.2.0

package/dist/console/marketplace/MarketplaceInstalledPage.js

@@ -20,12 +20,14 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Card, CardContent, CardHeader, CardTitle, Badge, Button, Skeleton, } from '@object-ui/components';
 import { ArrowLeft, RefreshCcw, Store, Trash2, AlertCircle, ExternalLink } from 'lucide-react';
 import { useIsWorkspaceAdmin } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { listLocalInstalls, uninstallLocal, } from './marketplaceApi';
 import { MarketplaceAccessDenied } from './MarketplaceAccessDenied';
 export function MarketplaceInstalledPage() {
     const navigate = useNavigate();
     const { appName } = useParams();
     const isAdmin = useIsWorkspaceAdmin();
+    const { t, language } = useObjectTranslation();
     const basePath = appName ? `/apps/${appName}` : '';
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -43,7 +45,7 @@ export function MarketplaceInstalledPage() {
     };
     useEffect(() => { void load(); }, []);
     const doUninstall = async (entry) => {
-        if (!confirm(`Uninstall ${entry.manifestId} v${entry.version} from this runtime?\n\nThe cached manifest will be removed. The app will remain loaded in the running kernel until the next restart.`)) {
+        if (!confirm(t('marketplace.uninstall.confirm', { manifestId: entry.manifestId, version: entry.version }))) {
             return;
         }
         setWorking(entry.manifestId);
@@ -52,7 +54,7 @@ export function MarketplaceInstalledPage() {
             await uninstallLocal(entry.manifestId);
             setResult({
                 ok: true,
-                message: `Removed ${entry.manifestId}. Restart the runtime to fully unload it from the running kernel.`,
+                message: t('marketplace.uninstall.successInList', { manifestId: entry.manifestId }),
             });
             await load();
         }
@@ -65,5 +67,11 @@ export function MarketplaceInstalledPage() {
     };
     if (!isAdmin)
         return _jsx(MarketplaceAccessDenied, {});
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6 max-w-5xl", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "self-start", onClick: () => navigate(`${basePath}/system/marketplace`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Back to marketplace"] }), _jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Store, { className: "h-6 w-6 text-primary", "aria-hidden": "true" }), _jsx("h1", { className: "text-xl sm:text-2xl font-bold tracking-tight", children: "Installed Apps" })] }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: ["Marketplace packages currently installed into this runtime's kernel. Cached manifests live in ", _jsx("code", { className: "font-mono text-xs", children: ".objectstack/installed-packages/" }), " and survive restarts."] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void load(), disabled: loading, children: [_jsx(RefreshCcw, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Refresh"] })] }), result && (_jsx("div", { className: `rounded-md border p-3 text-sm ${result.ok ? 'border-green-500/30 bg-green-500/5 text-green-700 dark:text-green-400' : 'border-destructive/30 bg-destructive/5 text-destructive'}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }), _jsx("div", { children: result.message })] }) })), loading && items.length === 0 ? (_jsx("div", { className: "grid gap-3", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Skeleton, { className: "h-20 w-full" }, i))) })) : items.length === 0 ? (_jsxs("div", { className: "text-center py-12 text-sm text-muted-foreground border rounded-md", children: [_jsx("p", { children: "No marketplace apps installed in this runtime yet." }), _jsx(Button, { variant: "link", className: "mt-2", onClick: () => navigate(`${basePath}/system/marketplace`), children: "Browse the marketplace \u2192" })] })) : (_jsx("div", { className: "grid gap-3", children: items.map((entry) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 pb-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs(CardTitle, { className: "text-base truncate flex items-center gap-2", children: [entry.manifestId, _jsxs(Badge, { variant: "outline", children: ["v", entry.version] })] }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1 flex flex-wrap gap-x-3 gap-y-1", children: [_jsxs("span", { children: ["Installed ", new Date(entry.installedAt).toLocaleString()] }), entry.installedBy && _jsxs("span", { children: ["by ", entry.installedBy] }), _jsxs("span", { children: ["package ", _jsx("code", { className: "font-mono", children: entry.packageId })] })] })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`${basePath}/system/marketplace/${entry.packageId}`), children: [_jsx(ExternalLink, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Details"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void doUninstall(entry), disabled: working === entry.manifestId, children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), working === entry.manifestId ? 'Uninstalling…' : 'Uninstall'] })] })] }), _jsxs(CardContent, { className: "pt-0 text-xs text-muted-foreground", children: ["Cached as ", _jsxs("code", { className: "font-mono", children: [".objectstack/installed-packages/", entry.manifestId.replace(/[^a-zA-Z0-9._-]/g, '_'), ".json"] })] })] }, entry.manifestId))) })), _jsxs("p", { className: "text-xs text-muted-foreground border-t pt-4", children: [_jsx("strong", { children: "Note:" }), " The kernel API is additive only \u2014 uninstall removes the on-disk manifest so the package won't load on next boot, but the running kernel keeps the app registered until you restart the runtime."] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6 max-w-5xl", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "self-start", onClick: () => navigate(`${basePath}/system/marketplace`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.back')] }), _jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Store, { className: "h-6 w-6 text-primary", "aria-hidden": "true" }), _jsx("h1", { className: "text-xl sm:text-2xl font-bold tracking-tight", children: t('marketplace.installedTitle') })] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", 
+                                // Subtitle contains an inline <code> path; render translated HTML from our own bundle.
+                                dangerouslySetInnerHTML: { __html: t('marketplace.installedSubtitle') } })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void load(), disabled: loading, children: [_jsx(RefreshCcw, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.refresh')] })] }), result && (_jsx("div", { className: `rounded-md border p-3 text-sm ${result.ok ? 'border-green-500/30 bg-green-500/5 text-green-700 dark:text-green-400' : 'border-destructive/30 bg-destructive/5 text-destructive'}`, children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }), _jsx("div", { children: result.message })] }) })), loading && items.length === 0 ? (_jsx("div", { className: "grid gap-3", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Skeleton, { className: "h-20 w-full" }, i))) })) : items.length === 0 ? (_jsxs("div", { className: "text-center py-12 text-sm text-muted-foreground border rounded-md", children: [_jsx("p", { children: t('marketplace.installedEmpty') }), _jsx(Button, { variant: "link", className: "mt-2", onClick: () => navigate(`${basePath}/system/marketplace`), children: t('marketplace.browseLink') })] })) : (_jsx("div", { className: "grid gap-3", children: items.map((entry) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 pb-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs(CardTitle, { className: "text-base truncate flex items-center gap-2", children: [entry.manifestId, _jsx(Badge, { variant: "outline", children: t('marketplace.versionBadge', { version: entry.version }) })] }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1 flex flex-wrap gap-x-3 gap-y-1", children: [_jsx("span", { children: t('marketplace.installedAt', { when: new Date(entry.installedAt).toLocaleString(language || undefined) }) }), entry.installedBy && _jsx("span", { children: t('marketplace.installedBy', { user: entry.installedBy }) }), _jsxs("span", { children: [t('marketplace.installedPackageId'), " ", _jsx("code", { className: "font-mono", children: entry.packageId })] })] })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`${basePath}/system/marketplace/${entry.packageId}`), children: [_jsx(ExternalLink, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.action.details')] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void doUninstall(entry), disabled: working === entry.manifestId, children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), working === entry.manifestId ? t('marketplace.action.uninstalling') : t('marketplace.action.uninstall')] })] })] }), _jsx(CardContent, { className: "pt-0 text-xs text-muted-foreground", dangerouslySetInnerHTML: {
+                                __html: t('marketplace.cachedAs', {
+                                    path: `.objectstack/installed-packages/${entry.manifestId.replace(/[^a-zA-Z0-9._-]/g, '_')}.json`,
+                                }),
+                            } })] }, entry.manifestId))) })), _jsx("p", { className: "text-xs text-muted-foreground border-t pt-4", dangerouslySetInnerHTML: { __html: t('marketplace.installedAdditiveNote') } })] }));
 }

package/dist/console/marketplace/MarketplacePackagePage.js

@@ -10,16 +10,21 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Button, Badge, Card, CardContent, CardHeader, CardTitle, Skeleton, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Label, Checkbox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, } from '@object-ui/components';
 import { ArrowLeft, ExternalLink, Download, AlertCircle, Package, Trash2, MoreHorizontal, CheckCircle2 } from 'lucide-react';
 import { useIsWorkspaceAdmin } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { PackageIcon } from './PackageIcon';
 import { MarkdownText } from './MarkdownText';
 import { MarketplaceAccessDenied } from './MarketplaceAccessDenied';
+import { localizePackage } from './usePackageL10n';
 import { getMarketplacePackage, installPackage, installLocal, uninstallLocal, listLocalInstalls, listCloudEnvironments, listInstallableOrgIds, cloudInstallDeepLink, } from './marketplaceApi';
 import { getRuntimeConfig } from '../../runtime-config';
+import { useMetadata } from '../../providers/MetadataProvider';
 export function MarketplacePackagePage() {
     const navigate = useNavigate();
     const { packageId, appName } = useParams();
     const isAdmin = useIsWorkspaceAdmin();
+    const { t, language } = useObjectTranslation();
     const basePath = appName ? `/apps/${appName}` : '';
+    const { refresh: refreshMetadata } = useMetadata();
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -73,6 +78,18 @@ export function MarketplacePackagePage() {
         setInstallOpen(true);
         setInstallResult(null);
         setEnvsError(null);
+        // When the runtime tells us which env we're on (tenant subdomain
+        // like demo.objectos.app), skip the picker entirely — the operator's
+        // domain already identifies the target. Just open the dialog with
+        // the env pre-selected so the sample-data checkbox + Install button
+        // remain in place.
+        const currentEnvId = getRuntimeConfig().defaultEnvironmentId;
+        if (currentEnvId) {
+            setEnvsLoading(false);
+            setSelectedEnv(currentEnvId);
+            setEnvs([]);
+            return;
+        }
         setEnvsLoading(true);
         try {
             const [list, adminOrgIds] = await Promise.all([
@@ -88,8 +105,7 @@ export function MarketplacePackagePage() {
             });
             setEnvs(installable);
             if (list.length > 0 && installable.length === 0) {
-                setEnvsError('You do not have permission to install apps in any environment. ' +
-                    'Only organization owners and admins can install — ask your workspace admin.');
+                setEnvsError(t('marketplace.install.noPermission'));
             }
             else if (installable.length === 1) {
                 setSelectedEnv(installable[0].id);
@@ -98,7 +114,7 @@ export function MarketplacePackagePage() {
         catch (e) {
             const status = e?.status;
             if (status === 401 || status === 403) {
-                setEnvsError('You need to sign into ObjectStack Cloud first. Click "Open on cloud" below.');
+                setEnvsError(t('marketplace.install.signInFirst'));
             }
             else {
                 setEnvsError(e?.message ?? String(e));
@@ -115,7 +131,36 @@ export function MarketplacePackagePage() {
         setInstallResult(null);
         try {
             await installPackage({ packageId, environmentId: selectedEnv, seedSampleData });
-            setInstallResult({ ok: true, message: 'Installed successfully. Open the environment to see the new app.' });
+            // Invalidate the metadata cache so the newly-installed app's
+            // objects/views/menus are fetched fresh on next access. Without
+            // this the user sees the new app in the switcher (the `app` list
+            // gets refreshed) but clicking a menu entry fails with "metadata
+            // not found" because objects/views/etc. are still cached from
+            // before the install. Only useful when installing into the env
+            // currently rendered by this SPA — for cross-env installs the
+            // refresh is a harmless no-op (re-fetches the current env's
+            // metadata, which is unchanged).
+            const currentEnvId = getRuntimeConfig().defaultEnvironmentId;
+            if (!currentEnvId || currentEnvId === selectedEnv) {
+                try {
+                    // Drop the persisted `app` cache too — refresh() overwrites it
+                    // when the new app list comes back, but clearing first protects
+                    // against partial failures leaving stale data on next reload.
+                    if (typeof sessionStorage !== 'undefined') {
+                        for (const key of Object.keys(sessionStorage)) {
+                            if (key.startsWith('objectui:metadata:')) {
+                                sessionStorage.removeItem(key);
+                            }
+                        }
+                    }
+                    await refreshMetadata();
+                }
+                catch {
+                    // Non-fatal: install succeeded; worst case the user navigates
+                    // away and back to pick up the new metadata.
+                }
+            }
+            setInstallResult({ ok: true, message: t('marketplace.install.success') });
         }
         catch (e) {
             setInstallResult({ ok: false, message: e?.message ?? String(e) });
@@ -137,22 +182,31 @@ export function MarketplacePackagePage() {
         setLocalResult(null);
         try {
             const result = await installLocal({ packageId });
+            try {
+                await refreshMetadata('app');
+            }
+            catch {
+                // Non-fatal: the install succeeded; the app list will refresh on next navigation.
+            }
             setLocalResult({
                 ok: true,
-                message: `Installed v${result.version} to this runtime. Refresh the console to see "${data?.package?.display_name ?? result.manifestId}" in the app switcher.`,
+                message: t('marketplace.install.localSuccess', {
+                    version: result.version,
+                    name: data?.package ? localizePackage(data.package, language).displayName : result.manifestId,
+                }),
             });
         }
         catch (e) {
             const code = e?.code;
             let msg = e?.message ?? String(e);
             if (code === 'manifest_conflict') {
-                msg = `${msg}\nTip: a local app already owns this manifest_id. Remove it from objectstack.config.ts first.`;
+                msg = t('marketplace.install.localManifestConflict', { message: msg });
             }
             else if (code === 'unauthorized') {
-                msg = 'Sign in to this runtime first, then try again.';
+                msg = t('marketplace.install.localUnauthorized');
             }
             else if (code === 'marketplace_unavailable') {
-                msg = 'This runtime has no OS_CLOUD_URL configured, so the marketplace catalog is unreachable.';
+                msg = t('marketplace.install.localMarketplaceUnavailable');
             }
             setLocalResult({ ok: false, message: msg });
         }
@@ -169,16 +223,22 @@ export function MarketplacePackagePage() {
     const doUninstallLocal = async () => {
         if (!localInstall)
             return;
-        if (!confirm(`Uninstall ${localInstall.manifestId} v${localInstall.version} from this runtime?\n\nThe cached manifest will be removed. The app will remain loaded in the running kernel until the next restart.`)) {
+        if (!confirm(t('marketplace.uninstall.confirm', { manifestId: localInstall.manifestId, version: localInstall.version }))) {
             return;
         }
         setInstallingLocal(true);
         setLocalResult(null);
         try {
             await uninstallLocal(localInstall.manifestId);
+            try {
+                await refreshMetadata('app');
+            }
+            catch {
+                // Non-fatal.
+            }
             setLocalResult({
                 ok: true,
-                message: `Removed cached manifest for ${localInstall.manifestId}. Restart the runtime to fully unload the app from the running kernel.`,
+                message: t('marketplace.uninstall.successInDetail', { manifestId: localInstall.manifestId }),
             });
         }
         catch (e) {
@@ -192,9 +252,10 @@ export function MarketplacePackagePage() {
         return (_jsxs("div", { className: "mx-auto w-full max-w-6xl flex flex-col gap-6 p-4 sm:p-6", children: [_jsx(Skeleton, { className: "h-8 w-32" }), _jsx(Skeleton, { className: "h-16 w-full" }), _jsx(Skeleton, { className: "h-64 w-full" })] }));
     }
     if (error || !data) {
-        return (_jsxs("div", { className: "mx-auto w-full max-w-6xl flex flex-col gap-6 p-4 sm:p-6", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`${basePath}/system/marketplace`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Back to marketplace"] }), _jsxs("div", { className: "flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 text-destructive", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-destructive", children: "Failed to load package" }), _jsx("div", { className: "text-muted-foreground mt-1", children: error ?? 'Not found.' })] })] })] }));
+        return (_jsxs("div", { className: "mx-auto w-full max-w-6xl flex flex-col gap-6 p-4 sm:p-6", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`${basePath}/system/marketplace`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.back')] }), _jsxs("div", { className: "flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 text-destructive", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-destructive", children: t('marketplace.load.packageFailed') }), _jsx("div", { className: "text-muted-foreground mt-1", children: error ?? t('marketplace.load.notFound') })] })] })] }));
     }
     const pkg = data.package;
+    const loc = localizePackage(pkg, language);
     const latestVersion = pkg.latest_version?.version ?? data.versions[0]?.version ?? null;
     const localInstall = localInstalls.find((i) => i.manifestId === pkg.manifest_id) ?? null;
     const supportsLocal = getRuntimeConfig().features.installLocal;
@@ -202,18 +263,23 @@ export function MarketplacePackagePage() {
     const primaryAction = supportsLocal
         ? {
             label: installingLocal
-                ? 'Working…'
+                ? t('marketplace.action.working')
                 : localInstall
-                    ? 'Reinstall'
-                    : 'Install',
+                    ? t('marketplace.action.reinstall')
+                    : t('marketplace.action.install'),
             onClick: doInstallLocal,
         }
         : {
-            label: installing ? 'Installing…' : 'Install to cloud…',
+            label: installing ? t('marketplace.action.installing') : t('marketplace.action.installToCloud'),
             onClick: openInstall,
         };
+    const categoryLabel = pkg.category
+        ? t(`marketplace.category.${pkg.category}`, { defaultValue: pkg.category })
+        : null;
     if (!isAdmin)
         return _jsx(MarketplaceAccessDenied, {});
-    return (_jsxs("div", { className: "mx-auto w-full max-w-6xl flex flex-col gap-6 p-4 sm:p-6", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "self-start -ml-2 text-muted-foreground hover:text-foreground", onClick: () => navigate(`${basePath}/system/marketplace`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Back to marketplace"] }), _jsxs("div", { className: "flex items-start gap-5 flex-wrap sm:flex-nowrap rounded-2xl border bg-gradient-to-br from-primary/5 via-background to-background p-6 sm:p-8", children: [_jsx(PackageIcon, { iconUrl: pkg.icon_url, displayName: pkg.display_name, manifestId: pkg.manifest_id, className: "h-20 w-20 rounded-2xl shadow-sm ring-1 ring-border shrink-0", initialClassName: "text-3xl font-bold" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight truncate", children: pkg.display_name || pkg.manifest_id }), pkg.homepage_url && (_jsxs("a", { href: pkg.homepage_url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors", title: "Homepage", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { className: "hidden sm:inline", children: "Homepage" })] }))] }), _jsxs("div", { className: "text-sm text-muted-foreground mt-2 flex flex-wrap items-center gap-1.5", children: [_jsx("code", { className: "font-mono text-xs px-1.5 py-0.5 rounded bg-muted", children: pkg.manifest_id }), latestVersion && _jsxs(Badge, { variant: "outline", children: ["v", latestVersion] }), pkg.publisher && pkg.publisher !== 'private' && (_jsx(Badge, { variant: pkg.publisher === 'objectstack' ? 'default' : 'secondary', children: pkg.publisher })), pkg.category && _jsx(Badge, { variant: "outline", children: pkg.category }), pkg.license && _jsx(Badge, { variant: "outline", className: "font-normal", children: pkg.license }), localInstall && (_jsxs(Badge, { variant: "default", className: "bg-green-600 hover:bg-green-600 gap-1", children: [_jsx(CheckCircle2, { className: "h-3 w-3", "aria-hidden": "true" }), "Installed \u00B7 v", localInstall.version] }))] }), pkg.description && (_jsx("p", { className: "text-sm sm:text-base text-foreground/80 mt-3 max-w-2xl leading-relaxed", children: pkg.description }))] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0 self-start", children: [_jsxs(Button, { onClick: primaryAction.onClick, disabled: primaryDisabled, size: "lg", className: "min-w-[8rem]", children: [_jsx(Download, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), primaryAction.label] }), localInstall && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "lg", className: "px-2.5", "aria-label": "More install options", children: _jsx(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56", children: _jsxs(DropdownMenuItem, { onSelect: doUninstallLocal, disabled: installingLocal, className: "text-destructive focus:text-destructive", children: [_jsx(Trash2, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), "Uninstall from this runtime"] }) })] }))] })] }), localResult && (_jsxs("div", { role: "status", className: `flex items-start gap-2 rounded-md border p-3 text-sm whitespace-pre-wrap ${localResult.ok ? 'border-green-500/30 bg-green-500/5 text-green-700 dark:text-green-400' : 'border-destructive/30 bg-destructive/5 text-destructive'}`, children: [localResult.ok ? _jsx(CheckCircle2, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }) : _jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }), _jsx("div", { className: "flex-1", children: localResult.message }), _jsx("button", { type: "button", className: "text-xs underline opacity-60 hover:opacity-100", onClick: () => setLocalResult(null), children: "Dismiss" })] })), _jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [_jsx("div", { className: "lg:col-span-2 space-y-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "About" }) }), _jsx(CardContent, { children: pkg.readme ? (_jsx(MarkdownText, { source: pkg.readme })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No readme provided." })) })] }) }), _jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Versions" }) }), _jsx(CardContent, { children: data.versions.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No approved versions." })) : (_jsx("ul", { className: "space-y-2", children: data.versions.map((v) => (_jsxs("li", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Package, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-hidden": "true" }), _jsxs("code", { className: "font-mono", children: ["v", v.version] }), v.is_prerelease && _jsx(Badge, { variant: "outline", className: "text-xs", children: "pre" })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: v.published_at ? new Date(v.published_at).toLocaleDateString() : '—' })] }, v.id))) })) })] }) })] }), _jsx(Dialog, { open: installOpen, onOpenChange: (o) => { setInstallOpen(o); if (!o)
-                    setInstallResult(null); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: ["Install ", pkg.display_name || pkg.manifest_id] }), _jsx(DialogDescription, { children: "Choose an environment to install this app into. You need to be signed into ObjectStack Cloud." })] }), envsLoading ? (_jsx(Skeleton, { className: "h-10 w-full" })) : envsError ? (_jsxs("div", { className: "rounded-md border border-amber-500/30 bg-amber-500/5 p-3 text-sm space-y-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 text-amber-600", "aria-hidden": "true" }), _jsx("div", { className: "flex-1", children: envsError })] }), _jsx("a", { href: cloudInstallDeepLink(pkg.id), target: "_blank", rel: "noopener noreferrer", children: _jsxs(Button, { variant: "outline", size: "sm", className: "w-full", children: [_jsx(ExternalLink, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Open on cloud"] }) })] })) : envs.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No environments found in your active organization." })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "env-select", children: "Environment" }), _jsxs(Select, { value: selectedEnv, onValueChange: setSelectedEnv, children: [_jsx(SelectTrigger, { id: "env-select", children: _jsx(SelectValue, { placeholder: "Pick an environment" }) }), _jsx(SelectContent, { children: envs.map((e) => (_jsxs(SelectItem, { value: e.id, children: [e.display_name || e.hostname || e.id, e.plan && _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", e.plan] })] }, e.id))) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "seed", checked: seedSampleData, onCheckedChange: (c) => setSeedSampleData(c === true) }), _jsx(Label, { htmlFor: "seed", className: "text-sm font-normal cursor-pointer", children: "Include sample data" })] })] })), installResult && (_jsx("div", { className: `rounded-md border p-3 text-sm ${installResult.ok ? 'border-green-500/30 bg-green-500/5 text-green-700' : 'border-destructive/30 bg-destructive/5 text-destructive'}`, children: installResult.message })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setInstallOpen(false), children: "Close" }), !envsError && (_jsx(Button, { onClick: doInstall, disabled: !selectedEnv || installing || installResult?.ok === true, children: installing ? 'Installing…' : 'Install' }))] })] }) })] }));
+    return (_jsxs("div", { className: "mx-auto w-full max-w-6xl flex flex-col gap-6 p-4 sm:p-6", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "self-start -ml-2 text-muted-foreground hover:text-foreground", onClick: () => navigate(`${basePath}/system/marketplace`), children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.back')] }), _jsxs("div", { className: "flex items-start gap-5 flex-wrap sm:flex-nowrap rounded-2xl border bg-gradient-to-br from-primary/5 via-background to-background p-6 sm:p-8", children: [_jsx(PackageIcon, { iconUrl: pkg.icon_url, displayName: loc.displayName, manifestId: pkg.manifest_id, className: "h-20 w-20 rounded-2xl shadow-sm ring-1 ring-border shrink-0", initialClassName: "text-3xl font-bold" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight truncate", children: loc.displayName || pkg.manifest_id }), pkg.homepage_url && (_jsxs("a", { href: pkg.homepage_url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors", title: t('marketplace.detail.homepage'), children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { className: "hidden sm:inline", children: t('marketplace.detail.homepage') })] }))] }), _jsxs("div", { className: "text-sm text-muted-foreground mt-2 flex flex-wrap items-center gap-1.5", children: [_jsx("code", { className: "font-mono text-xs px-1.5 py-0.5 rounded bg-muted", children: pkg.manifest_id }), latestVersion && _jsx(Badge, { variant: "outline", children: t('marketplace.versionBadge', { version: latestVersion }) }), pkg.publisher && pkg.publisher !== 'private' && (_jsx(Badge, { variant: pkg.publisher === 'objectstack' ? 'default' : 'secondary', children: pkg.publisher })), categoryLabel && _jsx(Badge, { variant: "outline", children: categoryLabel }), pkg.license && _jsx(Badge, { variant: "outline", className: "font-normal", children: pkg.license }), localInstall && (_jsxs(Badge, { variant: "default", className: "bg-green-600 hover:bg-green-600 gap-1", children: [_jsx(CheckCircle2, { className: "h-3 w-3", "aria-hidden": "true" }), t('marketplace.detail.installedV', { version: localInstall.version })] }))] }), loc.description && (_jsx("p", { className: "text-sm sm:text-base text-foreground/80 mt-3 max-w-2xl leading-relaxed", children: loc.description }))] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0 self-start", children: [_jsxs(Button, { onClick: primaryAction.onClick, disabled: primaryDisabled, size: "lg", className: "min-w-[8rem]", children: [_jsx(Download, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), primaryAction.label] }), localInstall && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "lg", className: "px-2.5", "aria-label": t('marketplace.detail.moreOptions'), children: _jsx(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56", children: _jsxs(DropdownMenuItem, { onSelect: doUninstallLocal, disabled: installingLocal, className: "text-destructive focus:text-destructive", children: [_jsx(Trash2, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }), t('marketplace.detail.uninstallFromRuntime')] }) })] }))] })] }), localResult && (_jsxs("div", { role: "status", className: `flex items-start gap-2 rounded-md border p-3 text-sm whitespace-pre-wrap ${localResult.ok ? 'border-green-500/30 bg-green-500/5 text-green-700 dark:text-green-400' : 'border-destructive/30 bg-destructive/5 text-destructive'}`, children: [localResult.ok ? _jsx(CheckCircle2, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }) : _jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 shrink-0", "aria-hidden": "true" }), _jsx("div", { className: "flex-1", children: localResult.message }), _jsx("button", { type: "button", className: "text-xs underline opacity-60 hover:opacity-100", onClick: () => setLocalResult(null), children: t('marketplace.action.dismiss') })] })), _jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [_jsx("div", { className: "lg:col-span-2 space-y-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: t('marketplace.detail.about') }) }), _jsx(CardContent, { children: loc.readme ? (_jsx(MarkdownText, { source: loc.readme })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: t('marketplace.detail.noReadme') })) })] }) }), _jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: t('marketplace.detail.versions') }) }), _jsx(CardContent, { children: data.versions.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('marketplace.detail.noApprovedVersions') })) : (_jsx("ul", { className: "space-y-2", children: data.versions.map((v) => (_jsxs("li", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Package, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-hidden": "true" }), _jsxs("code", { className: "font-mono", children: ["v", v.version] }), v.is_prerelease && _jsx(Badge, { variant: "outline", className: "text-xs", children: t('marketplace.detail.prerelease') })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: v.published_at ? new Date(v.published_at).toLocaleDateString() : '—' })] }, v.id))) })) })] }) })] }), _jsx(Dialog, { open: installOpen, onOpenChange: (o) => { setInstallOpen(o); if (!o)
+                    setInstallResult(null); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('marketplace.install.dialogTitle', { name: loc.displayName || pkg.manifest_id }) }), _jsx(DialogDescription, { children: getRuntimeConfig().defaultEnvironmentId
+                                        ? t('marketplace.install.dialogDescCurrent', { host: typeof window !== 'undefined' ? window.location.host : '' })
+                                        : t('marketplace.install.dialogDescPicker') })] }), envsLoading ? (_jsx(Skeleton, { className: "h-10 w-full" })) : envsError ? (_jsxs("div", { className: "rounded-md border border-amber-500/30 bg-amber-500/5 p-3 text-sm space-y-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 text-amber-600", "aria-hidden": "true" }), _jsx("div", { className: "flex-1", children: envsError })] }), _jsx("a", { href: cloudInstallDeepLink(pkg.id), target: "_blank", rel: "noopener noreferrer", children: _jsxs(Button, { variant: "outline", size: "sm", className: "w-full", children: [_jsx(ExternalLink, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.action.openOnCloud')] }) })] })) : getRuntimeConfig().defaultEnvironmentId ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "seed", checked: seedSampleData, onCheckedChange: (c) => setSeedSampleData(c === true) }), _jsx(Label, { htmlFor: "seed", className: "text-sm font-normal cursor-pointer", children: t('marketplace.install.includeSampleData') })] })) : envs.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('marketplace.install.noEnvs') })) : (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "env-select", children: t('marketplace.install.environment') }), _jsxs(Select, { value: selectedEnv, onValueChange: setSelectedEnv, children: [_jsx(SelectTrigger, { id: "env-select", children: _jsx(SelectValue, { placeholder: t('marketplace.install.environmentPlaceholder') }) }), _jsx(SelectContent, { children: envs.map((e) => (_jsxs(SelectItem, { value: e.id, children: [e.display_name || e.hostname || e.id, e.plan && _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", e.plan] })] }, e.id))) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "seed", checked: seedSampleData, onCheckedChange: (c) => setSeedSampleData(c === true) }), _jsx(Label, { htmlFor: "seed", className: "text-sm font-normal cursor-pointer", children: t('marketplace.install.includeSampleData') })] })] })), installResult && (_jsx("div", { className: `rounded-md border p-3 text-sm ${installResult.ok ? 'border-green-500/30 bg-green-500/5 text-green-700' : 'border-destructive/30 bg-destructive/5 text-destructive'}`, children: installResult.message })), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setInstallOpen(false), children: t('marketplace.action.close') }), !envsError && (_jsx(Button, { onClick: doInstall, disabled: !selectedEnv || installing || installResult?.ok === true, children: installing ? t('marketplace.action.installing') : t('marketplace.action.install') }))] })] }) })] }));
 }

package/dist/console/marketplace/MarketplacePage.js

@@ -11,28 +11,52 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription, Badge, Input, Button, Skeleton, } from '@object-ui/components';
 import { Package, Search, RefreshCcw, Store, AlertCircle, CheckCircle2, Settings } from 'lucide-react';
 import { useIsWorkspaceAdmin } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { PackageIcon } from './PackageIcon';
 import { MarketplaceAccessDenied } from './MarketplaceAccessDenied';
+import { localizePackage } from './usePackageL10n';
 import { listMarketplacePackages, listLocalInstalls, } from './marketplaceApi';
-function formatRelative(iso) {
-    if (!iso)
-        return '';
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime()))
-        return '';
-    const days = Math.floor((Date.now() - d.getTime()) / 86400000);
-    if (days < 1)
-        return 'today';
-    if (days < 30)
-        return `${days}d ago`;
-    if (days < 365)
-        return `${Math.floor(days / 30)}mo ago`;
-    return `${Math.floor(days / 365)}y ago`;
+/**
+ * Format a published-at timestamp as a localized relative string.
+ *
+ * Uses `Intl.RelativeTimeFormat` for proper plural/grammatical rules in
+ * the active locale (e.g. "il y a 3 jours", "3 天前"). Falls back to
+ * translation keys for environments without RTF support.
+ */
+function useRelativeFormatter() {
+    const { language, t } = useObjectTranslation();
+    return (iso) => {
+        if (!iso)
+            return '';
+        const d = new Date(iso);
+        if (Number.isNaN(d.getTime()))
+            return '';
+        const days = Math.floor((Date.now() - d.getTime()) / 86400000);
+        if (days < 1)
+            return t('marketplace.relativeTime.today');
+        try {
+            const rtf = new Intl.RelativeTimeFormat(language || 'en', { numeric: 'auto' });
+            if (days < 30)
+                return rtf.format(-days, 'day');
+            if (days < 365)
+                return rtf.format(-Math.floor(days / 30), 'month');
+            return rtf.format(-Math.floor(days / 365), 'year');
+        }
+        catch {
+            if (days < 30)
+                return t('marketplace.relativeTime.daysAgo', { count: days });
+            if (days < 365)
+                return t('marketplace.relativeTime.monthsAgo', { count: Math.floor(days / 30) });
+            return t('marketplace.relativeTime.yearsAgo', { count: Math.floor(days / 365) });
+        }
+    };
 }
 export function MarketplacePage() {
     const navigate = useNavigate();
     const { appName } = useParams();
     const isAdmin = useIsWorkspaceAdmin();
+    const { t, language } = useObjectTranslation();
+    const formatRelative = useRelativeFormatter();
     const basePath = appName ? `/apps/${appName}` : '';
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -74,6 +98,13 @@ export function MarketplacePage() {
         }
         return Array.from(s).sort();
     }, [items]);
+    // Translate a category enum value via the i18n bundle; fall back to the
+    // raw value (lowercased) so unknown publisher categories still render.
+    const categoryLabel = (cat) => {
+        const key = `marketplace.category.${cat}`;
+        const translated = t(key, { defaultValue: cat });
+        return translated === key ? cat : translated;
+    };
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
         return items.filter((it) => {
@@ -81,19 +112,25 @@ export function MarketplacePage() {
                 return false;
             if (!q)
                 return true;
-            const hay = `${it.display_name} ${it.manifest_id} ${it.description ?? ''}`.toLowerCase();
+            const loc = localizePackage(it, language);
+            const hay = `${loc.displayName} ${it.manifest_id} ${loc.description ?? ''}`.toLowerCase();
             return hay.includes(q);
         });
-    }, [items, query, category]);
+    }, [items, query, category, language]);
     if (!isAdmin)
         return _jsx(MarketplaceAccessDenied, {});
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Store, { className: "h-6 w-6 text-primary", "aria-hidden": "true" }), _jsx("h1", { className: "text-xl sm:text-2xl font-bold tracking-tight", children: "App Marketplace" })] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Browse approved apps published to the ObjectStack catalog. Click an app to view details and install it into one of your environments." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => navigate(`${basePath}/system/marketplace/installed`), children: [_jsx(Settings, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Installed", installed.length > 0 ? ` (${installed.length})` : ''] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void load(), disabled: loading, children: [_jsx(RefreshCcw, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Refresh"] })] })] }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps by name or manifest ID\u2026", className: "pl-9", "aria-label": "Search marketplace apps" })] }), categories.length > 0 && (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(Button, { size: "sm", variant: category === '' ? 'default' : 'outline', onClick: () => setCategory(''), children: "All" }), categories.map((cat) => (_jsx(Button, { size: "sm", variant: category === cat ? 'default' : 'outline', onClick: () => setCategory(cat), children: cat }, cat)))] }))] }), error && (_jsxs("div", { className: "flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 text-destructive", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-destructive", children: "Failed to load marketplace" }), _jsx("div", { className: "text-muted-foreground mt-1", children: error }), _jsxs("div", { className: "text-xs text-muted-foreground mt-2", children: ["By default this runtime points at the public ObjectStack cloud. Check the runtime is online, or override ", _jsx("code", { className: "font-mono", children: "OS_CLOUD_URL" }), " to point at a self-hosted control plane."] })] })] })), loading && items.length === 0 ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-lg mb-2" }), _jsx(Skeleton, { className: "h-5 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2 mt-1" })] }), _jsx(CardContent, { children: _jsx(Skeleton, { className: "h-12 w-full" }) })] }, i))) })) : filtered.length === 0 ? (_jsx("div", { className: "text-center py-12 text-sm text-muted-foreground", children: items.length === 0 ? 'No apps have been approved for the marketplace yet.' : 'No apps match your filters.' })) : (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((pkg) => {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Store, { className: "h-6 w-6 text-primary", "aria-hidden": "true" }), _jsx("h1", { className: "text-xl sm:text-2xl font-bold tracking-tight", children: t('marketplace.title') })] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: t('marketplace.subtitle') })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => navigate(`${basePath}/system/marketplace/installed`), children: [_jsx(Settings, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), installed.length > 0
+                                        ? t('marketplace.installedCount', { count: installed.length })
+                                        : t('marketplace.installed')] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void load(), disabled: loading, children: [_jsx(RefreshCcw, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), t('marketplace.refresh')] })] })] }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: t('marketplace.searchPlaceholder'), className: "pl-9", "aria-label": t('marketplace.searchAria') })] }), categories.length > 0 && (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(Button, { size: "sm", variant: category === '' ? 'default' : 'outline', onClick: () => setCategory(''), children: t('marketplace.all') }), categories.map((cat) => (_jsx(Button, { size: "sm", variant: category === cat ? 'default' : 'outline', onClick: () => setCategory(cat), children: categoryLabel(cat) }, cat)))] }))] }), error && (_jsxs("div", { className: "flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 mt-0.5 text-destructive", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-destructive", children: t('marketplace.load.failed') }), _jsx("div", { className: "text-muted-foreground mt-1", children: error }), _jsx("div", { className: "text-xs text-muted-foreground mt-2", 
+                                // Hint message contains an inline <code> tag — render translated HTML safely from our own bundle.
+                                dangerouslySetInnerHTML: { __html: t('marketplace.load.failedHint') } })] })] })), loading && items.length === 0 ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-lg mb-2" }), _jsx(Skeleton, { className: "h-5 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2 mt-1" })] }), _jsx(CardContent, { children: _jsx(Skeleton, { className: "h-12 w-full" }) })] }, i))) })) : filtered.length === 0 ? (_jsx("div", { className: "text-center py-12 text-sm text-muted-foreground", children: items.length === 0 ? t('marketplace.noApprovedYet') : t('marketplace.noMatchFilters') })) : (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((pkg) => {
                     const localEntry = installedByManifestId.get(pkg.manifest_id);
+                    const loc = localizePackage(pkg, language);
                     return (_jsxs(Card, { className: "cursor-pointer transition-colors hover:bg-accent/50 flex flex-col", onClick: () => navigate(`${basePath}/system/marketplace/${pkg.id}`), role: "link", tabIndex: 0, onKeyDown: (e) => {
                             if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
                                 navigate(`${basePath}/system/marketplace/${pkg.id}`);
                             }
-                        }, "data-testid": `marketplace-card-${pkg.manifest_id}`, children: [_jsxs(CardHeader, { className: "flex flex-row items-start gap-3 pb-2", children: [_jsx(PackageIcon, { iconUrl: pkg.icon_url, displayName: pkg.display_name, manifestId: pkg.manifest_id }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(CardTitle, { className: "text-base truncate", children: pkg.display_name || pkg.manifest_id }), _jsx(CardDescription, { className: "text-xs truncate", children: _jsx("code", { className: "font-mono", children: pkg.manifest_id }) })] }), pkg.publisher && pkg.publisher !== 'private' && (_jsx(Badge, { variant: pkg.publisher === 'objectstack' ? 'default' : 'secondary', className: "shrink-0", children: pkg.publisher }))] }), _jsxs(CardContent, { className: "flex-1 flex flex-col gap-2", children: [_jsx("p", { className: "text-sm text-muted-foreground line-clamp-2", children: pkg.description || 'No description provided.' }), _jsxs("div", { className: "flex items-center gap-2 mt-auto pt-2 flex-wrap", children: [localEntry && (_jsxs(Badge, { variant: "default", className: "text-xs bg-green-600 hover:bg-green-600", children: [_jsx(CheckCircle2, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }), "Installed v", localEntry.version] })), pkg.latest_version?.version && (_jsxs(Badge, { variant: "outline", className: "text-xs", children: [_jsx(Package, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }), "v", pkg.latest_version.version] })), pkg.category && (_jsx(Badge, { variant: "outline", className: "text-xs", children: pkg.category })), pkg.latest_version?.published_at && (_jsx("span", { className: "text-xs text-muted-foreground ml-auto", children: formatRelative(pkg.latest_version.published_at) }))] })] })] }, pkg.id));
+                        }, "data-testid": `marketplace-card-${pkg.manifest_id}`, children: [_jsxs(CardHeader, { className: "flex flex-row items-start gap-3 pb-2", children: [_jsx(PackageIcon, { iconUrl: pkg.icon_url, displayName: loc.displayName, manifestId: pkg.manifest_id }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(CardTitle, { className: "text-base truncate", children: loc.displayName }), _jsx(CardDescription, { className: "text-xs truncate", children: _jsx("code", { className: "font-mono", children: pkg.manifest_id }) })] }), pkg.publisher && pkg.publisher !== 'private' && (_jsx(Badge, { variant: pkg.publisher === 'objectstack' ? 'default' : 'secondary', className: "shrink-0", children: pkg.publisher }))] }), _jsxs(CardContent, { className: "flex-1 flex flex-col gap-2", children: [_jsx("p", { className: "text-sm text-muted-foreground line-clamp-2", children: loc.description || t('marketplace.noDescription') }), _jsxs("div", { className: "flex items-center gap-2 mt-auto pt-2 flex-wrap", children: [localEntry && (_jsxs(Badge, { variant: "default", className: "text-xs bg-green-600 hover:bg-green-600", children: [_jsx(CheckCircle2, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }), t('marketplace.installedBadge', { version: localEntry.version })] })), pkg.latest_version?.version && (_jsxs(Badge, { variant: "outline", className: "text-xs", children: [_jsx(Package, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }), t('marketplace.versionBadge', { version: pkg.latest_version.version })] })), pkg.category && (_jsx(Badge, { variant: "outline", className: "text-xs", children: categoryLabel(pkg.category) })), pkg.latest_version?.published_at && (_jsx("span", { className: "text-xs text-muted-foreground ml-auto", children: formatRelative(pkg.latest_version.published_at) }))] })] })] }, pkg.id));
                 }) }))] }));
 }

package/dist/console/marketplace/marketplaceApi.d.ts

@@ -12,6 +12,20 @@
  *   cloud/packages/service-cloud/src/routes/marketplace.ts
  *   framework/packages/runtime/src/cloud/marketplace-proxy-plugin.ts
  */
+/**
+ * Per-locale overrides for translatable package fields. Mirrors
+ * `PackageTranslation` from @objectstack/spec/cloud — duplicated here
+ * to avoid pulling the spec package into the app-shell bundle.
+ * See framework/packages/spec/src/cloud/package.zod.ts.
+ */
+export interface MarketplacePackageTranslation {
+    displayName?: string;
+    description?: string;
+    readme?: string;
+    tagline?: string;
+    screenshotCaptions?: Record<string, string>;
+}
+export type MarketplacePackageTranslations = Record<string, MarketplacePackageTranslation>;
 export interface MarketplacePackageSummary {
     id: string;
     manifest_id: string;
@@ -26,6 +40,12 @@ export interface MarketplacePackageSummary {
     is_starter?: boolean;
     created_at?: string;
     updated_at?: string;
+    /**
+     * Locale-keyed overrides for display_name / description / readme.
+     * Optional on the wire: older control planes / older runtimes may not
+     * project this column yet. UI should fall back to the base field.
+     */
+    translations?: MarketplacePackageTranslations | null;
     latest_version: MarketplacePackageVersion | null;
 }
 export interface MarketplacePackageDetail extends MarketplacePackageSummary {

package/dist/console/marketplace/usePackageL10n.d.ts

@@ -0,0 +1,38 @@
+/**
+ * usePackageL10n
+ *
+ * Resolves a marketplace package's translatable fields against the
+ * current i18n locale. Mirrors the server-side resolver
+ * `resolvePackageL10n` in @objectstack/spec/cloud but stays inline here
+ * so the app-shell doesn't pull the full spec package into its bundle.
+ *
+ * Resolution chain (first hit wins):
+ *   1. translations[<exact requested locale>]   (e.g. `zh-CN`)
+ *   2. translations[<language-only locale>]     (e.g. `zh`)
+ *   3. translations[<fallback locale>]          (default `en`)
+ *   4. base column on the package row           (snake_case from REST)
+ */
+import type { MarketplacePackageSummary } from './marketplaceApi';
+export interface LocalizedPackage {
+    displayName: string;
+    description: string | undefined;
+    readme: string | undefined;
+    tagline: string | undefined;
+}
+/**
+ * Resolve `displayName`, `description`, `readme`, and `tagline` for a
+ * package against the active locale. `displayName` is guaranteed to be
+ * a non-empty string (falls back to `manifest_id` as a last resort) so
+ * callers can render it without further guards.
+ */
+export declare function usePackageL10n(pkg: Pick<MarketplacePackageSummary, 'manifest_id' | 'display_name' | 'translations'> & {
+    description?: string | null;
+    readme?: string | null;
+} | null | undefined): LocalizedPackage;
+/**
+ * Stateless variant for use in `.map()` over a list of packages where
+ * calling `usePackageL10n` per row would violate the rules of hooks.
+ * The caller passes the language they obtained once from
+ * `useObjectTranslation()` at the top of the component.
+ */
+export declare function localizePackage(pkg: MarketplacePackageSummary, language: string): LocalizedPackage;

package/dist/console/marketplace/usePackageL10n.js

@@ -0,0 +1,110 @@
+/**
+ * usePackageL10n
+ *
+ * Resolves a marketplace package's translatable fields against the
+ * current i18n locale. Mirrors the server-side resolver
+ * `resolvePackageL10n` in @objectstack/spec/cloud but stays inline here
+ * so the app-shell doesn't pull the full spec package into its bundle.
+ *
+ * Resolution chain (first hit wins):
+ *   1. translations[<exact requested locale>]   (e.g. `zh-CN`)
+ *   2. translations[<language-only locale>]     (e.g. `zh`)
+ *   3. translations[<fallback locale>]          (default `en`)
+ *   4. base column on the package row           (snake_case from REST)
+ */
+import { useMemo } from 'react';
+import { useObjectTranslation } from '@object-ui/i18n';
+const FALLBACK_LOCALE = 'en';
+function languageOf(locale) {
+    const dash = locale.indexOf('-');
+    return dash === -1 ? locale : locale.slice(0, dash);
+}
+function uniqueLocales(codes) {
+    const seen = new Set();
+    const out = [];
+    for (const c of codes) {
+        if (!c || seen.has(c))
+            continue;
+        seen.add(c);
+        out.push(c);
+    }
+    return out;
+}
+function pickFromTranslations(translations, locale, field) {
+    if (!translations)
+        return undefined;
+    const lang = languageOf(locale);
+    // Build chain: exact → language-only → any regional variant matching the
+    // language (e.g. 'zh' → 'zh-CN' / 'zh-Hans') → fallback. The regional
+    // expansion covers the common case where the i18n provider returns a
+    // bare language code ('zh') but package manifests ship region-tagged
+    // translations ('zh-CN').
+    const variants = Object.keys(translations).filter((code) => code === lang || code.startsWith(`${lang}-`));
+    const chain = uniqueLocales([locale, lang, ...variants, FALLBACK_LOCALE]);
+    for (const code of chain) {
+        const entry = translations[code];
+        if (!entry)
+            continue;
+        const value = entry[field];
+        if (typeof value === 'string' && value.length > 0)
+            return value;
+    }
+    return undefined;
+}
+function baseColumn(pkg, field) {
+    // Map camelCase L10n field → REST snake_case column.
+    const SNAKE = {
+        displayName: 'display_name',
+        description: 'description',
+        readme: 'readme',
+        tagline: 'tagline',
+        // Captions live only inside translations on the wire — no base column.
+        screenshotCaptions: 'screenshotCaptions',
+    };
+    const v = pkg[SNAKE[field]] ?? pkg[field];
+    return typeof v === 'string' && v.length > 0 ? v : undefined;
+}
+/**
+ * Resolve `displayName`, `description`, `readme`, and `tagline` for a
+ * package against the active locale. `displayName` is guaranteed to be
+ * a non-empty string (falls back to `manifest_id` as a last resort) so
+ * callers can render it without further guards.
+ */
+export function usePackageL10n(pkg) {
+    const { language } = useObjectTranslation();
+    return useMemo(() => {
+        if (!pkg) {
+            return { displayName: '', description: undefined, readme: undefined, tagline: undefined };
+        }
+        const locale = language || FALLBACK_LOCALE;
+        const displayName = pickFromTranslations(pkg.translations ?? undefined, locale, 'displayName')
+            ?? baseColumn(pkg, 'displayName')
+            ?? pkg.manifest_id;
+        const description = pickFromTranslations(pkg.translations ?? undefined, locale, 'description')
+            ?? baseColumn(pkg, 'description');
+        const readme = pickFromTranslations(pkg.translations ?? undefined, locale, 'readme')
+            ?? baseColumn(pkg, 'readme');
+        const tagline = pickFromTranslations(pkg.translations ?? undefined, locale, 'tagline')
+            ?? baseColumn(pkg, 'tagline');
+        return { displayName, description, readme, tagline };
+    }, [pkg, language]);
+}
+/**
+ * Stateless variant for use in `.map()` over a list of packages where
+ * calling `usePackageL10n` per row would violate the rules of hooks.
+ * The caller passes the language they obtained once from
+ * `useObjectTranslation()` at the top of the component.
+ */
+export function localizePackage(pkg, language) {
+    const locale = language || FALLBACK_LOCALE;
+    const displayName = pickFromTranslations(pkg.translations ?? undefined, locale, 'displayName')
+        ?? baseColumn(pkg, 'displayName')
+        ?? pkg.manifest_id;
+    const description = pickFromTranslations(pkg.translations ?? undefined, locale, 'description')
+        ?? baseColumn(pkg, 'description');
+    const readme = pickFromTranslations(pkg.translations ?? undefined, locale, 'readme')
+        ?? baseColumn(pkg, 'readme');
+    const tagline = pickFromTranslations(pkg.translations ?? undefined, locale, 'tagline')
+        ?? baseColumn(pkg, 'tagline');
+    return { displayName, description, readme, tagline };
+}