@object-ui/app-shell 5.1.1 → 5.3.0

package/dist/console/marketplace/MarketplacePackagePage.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Marketplace Package Detail Page.
+ *
+ * Shows full package metadata + readme + approved version list. Provides
+ * an "Install" button that opens a dialog with environment picker.
+ */
+import { useEffect, useState } from 'react';
+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, } from '@object-ui/components';
+import { ArrowLeft, ExternalLink, Download, AlertCircle, Package, Trash2 } from 'lucide-react';
+import { PackageIcon } from './PackageIcon';
+import { MarkdownText } from './MarkdownText';
+import { getMarketplacePackage, installPackage, installLocal, uninstallLocal, listLocalInstalls, listCloudEnvironments, listInstallableOrgIds, cloudInstallDeepLink, } from './marketplaceApi';
+export function MarketplacePackagePage() {
+    const navigate = useNavigate();
+    const { packageId, appName } = useParams();
+    const basePath = appName ? `/apps/${appName}` : '';
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [installOpen, setInstallOpen] = useState(false);
+    const [envs, setEnvs] = useState([]);
+    const [envsLoading, setEnvsLoading] = useState(false);
+    const [envsError, setEnvsError] = useState(null);
+    const [selectedEnv, setSelectedEnv] = useState('');
+    const [seedSampleData, setSeedSampleData] = useState(false);
+    const [installing, setInstalling] = useState(false);
+    const [installResult, setInstallResult] = useState(null);
+    // Local-install state (this runtime's own kernel — separate flow from cloud).
+    const [localInstalls, setLocalInstalls] = useState([]);
+    const [installingLocal, setInstallingLocal] = useState(false);
+    const [localResult, setLocalResult] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            const items = await listLocalInstalls();
+            if (!cancelled)
+                setLocalInstalls(items);
+        })();
+        return () => { cancelled = true; };
+    }, [packageId, localResult]);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            if (!packageId)
+                return;
+            setLoading(true);
+            setError(null);
+            try {
+                const resp = await getMarketplacePackage(packageId);
+                if (!cancelled)
+                    setData(resp);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e?.message ?? String(e));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [packageId]);
+    const openInstall = async () => {
+        setInstallOpen(true);
+        setInstallResult(null);
+        setEnvsError(null);
+        setEnvsLoading(true);
+        try {
+            const [list, adminOrgIds] = await Promise.all([
+                listCloudEnvironments(),
+                listInstallableOrgIds(),
+            ]);
+            // Only envs in orgs where the caller is owner/admin are installable.
+            // Backend enforces the same gate; mirroring it here avoids confusing
+            // 403s and lets us show a helpful empty-state message.
+            const installable = list.filter((env) => {
+                const orgId = env.organization_id;
+                return orgId ? adminOrgIds.has(String(orgId)) : false;
+            });
+            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.');
+            }
+            else if (installable.length === 1) {
+                setSelectedEnv(installable[0].id);
+            }
+        }
+        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.');
+            }
+            else {
+                setEnvsError(e?.message ?? String(e));
+            }
+        }
+        finally {
+            setEnvsLoading(false);
+        }
+    };
+    const doInstall = async () => {
+        if (!packageId || !selectedEnv)
+            return;
+        setInstalling(true);
+        setInstallResult(null);
+        try {
+            await installPackage({ packageId, environmentId: selectedEnv, seedSampleData });
+            setInstallResult({ ok: true, message: 'Installed successfully. Open the environment to see the new app.' });
+        }
+        catch (e) {
+            setInstallResult({ ok: false, message: e?.message ?? String(e) });
+        }
+        finally {
+            setInstalling(false);
+        }
+    };
+    /**
+     * Install this package into the LOCAL runtime kernel (not a cloud env).
+     * Single-target operation — no picker, no dialog. Same-origin POST so
+     * cloud session is not required. The local AuthPlugin session is what
+     * the backend validates.
+     */
+    const doInstallLocal = async () => {
+        if (!packageId)
+            return;
+        setInstallingLocal(true);
+        setLocalResult(null);
+        try {
+            const result = await installLocal({ packageId });
+            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.`,
+            });
+        }
+        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.`;
+            }
+            else if (code === 'unauthorized') {
+                msg = 'Sign in to this runtime first, then try again.';
+            }
+            else if (code === 'marketplace_unavailable') {
+                msg = 'This runtime has no OS_CLOUD_URL configured, so the marketplace catalog is unreachable.';
+            }
+            setLocalResult({ ok: false, message: msg });
+        }
+        finally {
+            setInstallingLocal(false);
+        }
+    };
+    /**
+     * Uninstall this package's cached manifest from the local runtime.
+     * NB: kernel API is additive only — the app remains live in the
+     * running kernel until the runtime restarts. We surface that
+     * caveat in the success message.
+     */
+    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.`)) {
+            return;
+        }
+        setInstallingLocal(true);
+        setLocalResult(null);
+        try {
+            await uninstallLocal(localInstall.manifestId);
+            setLocalResult({
+                ok: true,
+                message: `Removed cached manifest for ${localInstall.manifestId}. Restart the runtime to fully unload the app from the running kernel.`,
+            });
+        }
+        catch (e) {
+            setLocalResult({ ok: false, message: e?.message ?? String(e) });
+        }
+        finally {
+            setInstallingLocal(false);
+        }
+    };
+    if (loading) {
+        return (_jsxs("div", { className: "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: "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.' })] })] })] }));
+    }
+    const pkg = data.package;
+    const latestVersion = pkg.latest_version?.version ?? data.versions[0]?.version ?? null;
+    const localInstall = localInstalls.find((i) => i.manifestId === pkg.manifest_id) ?? null;
+    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 gap-5 flex-wrap rounded-2xl border bg-gradient-to-br from-primary/5 via-background to-background p-6", 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", initialClassName: "text-3xl font-bold" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h1", { className: "text-3xl font-bold tracking-tight truncate", children: pkg.display_name || pkg.manifest_id }), _jsxs("div", { className: "text-sm text-muted-foreground mt-2 flex flex-wrap items-center gap-2", 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", children: ["Installed \u00B7 v", localInstall.version] }))] }), pkg.description && (_jsx("p", { className: "text-base text-foreground/80 mt-4 max-w-2xl leading-relaxed", children: pkg.description }))] }), _jsxs("div", { className: "flex flex-col gap-2 shrink-0 min-w-[14rem]", children: [_jsxs(Button, { onClick: doInstallLocal, disabled: !latestVersion || installingLocal, size: "lg", children: [_jsx(Download, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), installingLocal
+                                        ? 'Working…'
+                                        : localInstall
+                                            ? `Reinstall to this runtime`
+                                            : 'Install to this runtime'] }), localInstall && (_jsxs(Button, { variant: "outline", onClick: doUninstallLocal, disabled: installingLocal, children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Uninstall from this runtime"] })), _jsxs(Button, { variant: "ghost", onClick: openInstall, disabled: !latestVersion, size: "sm", children: [_jsx(Download, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Install to cloud environment\u2026"] }), pkg.homepage_url && (_jsx("a", { href: pkg.homepage_url, target: "_blank", rel: "noopener noreferrer", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "w-full", children: [_jsx(ExternalLink, { className: "h-4 w-4 mr-1.5", "aria-hidden": "true" }), "Homepage"] }) })), localResult && (_jsx("div", { className: `rounded-md border p-2 text-xs 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.message }))] })] }), _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' }))] })] }) })] }));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Marketplace Page — browse approved, marketplace-listed packages.
+ *
+ * Card-grid catalog of public packages, fetched from the tenant runtime's
+ * `/api/v1/marketplace/packages` proxy (which forwards to the configured
+ * cloud control plane). Click-through opens the package detail page.
+ */
+export declare function MarketplacePage(): import("react/jsx-runtime").JSX.Element;

package/dist/console/marketplace/MarketplacePage.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Marketplace Page — browse approved, marketplace-listed packages.
+ *
+ * Card-grid catalog of public packages, fetched from the tenant runtime's
+ * `/api/v1/marketplace/packages` proxy (which forwards to the configured
+ * cloud control plane). Click-through opens the package detail page.
+ */
+import { useEffect, useMemo, useState } from 'react';
+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 { PackageIcon } from './PackageIcon';
+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`;
+}
+export function MarketplacePage() {
+    const navigate = useNavigate();
+    const { appName } = useParams();
+    const basePath = appName ? `/apps/${appName}` : '';
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [query, setQuery] = useState('');
+    const [category, setCategory] = useState('');
+    const [installed, setInstalled] = useState([]);
+    const installedByManifestId = useMemo(() => {
+        const m = new Map();
+        for (const e of installed)
+            m.set(e.manifestId, e);
+        return m;
+    }, [installed]);
+    const load = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [resp, installs] = await Promise.all([
+                listMarketplacePackages({ limit: 100 }),
+                listLocalInstalls(),
+            ]);
+            setItems(resp.items ?? []);
+            setInstalled(installs);
+        }
+        catch (e) {
+            setError(e?.message ?? String(e));
+            setItems([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => { void load(); }, []);
+    const categories = useMemo(() => {
+        const s = new Set();
+        for (const it of items) {
+            if (it.category)
+                s.add(it.category);
+        }
+        return Array.from(s).sort();
+    }, [items]);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        return items.filter((it) => {
+            if (category && it.category !== category)
+                return false;
+            if (!q)
+                return true;
+            const hay = `${it.display_name} ${it.manifest_id} ${it.description ?? ''}`.toLowerCase();
+            return hay.includes(q);
+        });
+    }, [items, query, category]);
+    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) => {
+                    const localEntry = installedByManifestId.get(pkg.manifest_id);
+                    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));
+                }) }))] }));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * PackageIcon — square icon tile for marketplace packages.
+ *
+ * Renders the package's `icon_url` when present, falling back to the
+ * first letter of the display name (or manifest id) on missing-URL,
+ * load-error, or empty URL. The fallback also covers the common
+ * case where cloud rows point at icon assets that don't yet exist
+ * on the configured CDN.
+ */
+export interface PackageIconProps {
+    iconUrl?: string | null;
+    displayName?: string | null;
+    manifestId?: string | null;
+    /** Tailwind size classes — caller controls outer dimensions. */
+    className?: string;
+    /** Text size for the initial-letter fallback. */
+    initialClassName?: string;
+}
+export declare function PackageIcon({ iconUrl, displayName, manifestId, className, initialClassName, }: PackageIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/console/marketplace/PackageIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PackageIcon — square icon tile for marketplace packages.
+ *
+ * Renders the package's `icon_url` when present, falling back to the
+ * first letter of the display name (or manifest id) on missing-URL,
+ * load-error, or empty URL. The fallback also covers the common
+ * case where cloud rows point at icon assets that don't yet exist
+ * on the configured CDN.
+ */
+import { useState } from 'react';
+export function PackageIcon({ iconUrl, displayName, manifestId, className = 'h-10 w-10', initialClassName = 'text-base font-semibold', }) {
+    const [broken, setBroken] = useState(false);
+    const initial = ((displayName ?? manifestId ?? '?').trim()[0] ?? '?').toUpperCase();
+    const showImg = !!iconUrl && !broken;
+    return (_jsx("div", { className: `flex shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary overflow-hidden ${className}`, children: showImg ? (_jsx("img", { src: iconUrl, alt: "", className: `${className} object-cover`, onError: () => setBroken(true), loading: "lazy" })) : (_jsx("span", { className: initialClassName, children: initial })) }));
+}

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

@@ -0,0 +1,122 @@
+/**
+ * Marketplace REST helper.
+ *
+ * Thin fetch wrapper around the tenant runtime's marketplace proxy
+ * (`/api/v1/marketplace/*`). The proxy forwards to the configured
+ * cloud control plane (`OS_CLOUD_URL`) — only browse endpoints are
+ * exposed. Install is performed against the cloud action endpoint
+ * directly (via `installPackage()` below), which requires the user
+ * to have a cloud session.
+ *
+ * See:
+ *   cloud/packages/service-cloud/src/routes/marketplace.ts
+ *   framework/packages/runtime/src/cloud/marketplace-proxy-plugin.ts
+ */
+export interface MarketplacePackageSummary {
+    id: string;
+    manifest_id: string;
+    display_name: string;
+    description?: string | null;
+    category?: string | null;
+    tags?: string | null;
+    icon_url?: string | null;
+    homepage_url?: string | null;
+    license?: string | null;
+    publisher?: string | null;
+    is_starter?: boolean;
+    created_at?: string;
+    updated_at?: string;
+    latest_version: MarketplacePackageVersion | null;
+}
+export interface MarketplacePackageDetail extends MarketplacePackageSummary {
+    readme?: string | null;
+}
+export interface MarketplacePackageVersion {
+    id: string;
+    version: string;
+    status?: string;
+    is_prerelease?: boolean;
+    published_at?: string | null;
+    listing_status?: string;
+    reviewed_at?: string | null;
+}
+export interface MarketplaceListResponse {
+    items: MarketplacePackageSummary[];
+    total: number;
+    limit: number;
+    offset: number;
+}
+export interface MarketplaceDetailResponse {
+    package: MarketplacePackageDetail;
+    versions: MarketplacePackageVersion[];
+}
+export declare function listMarketplacePackages(params?: {
+    q?: string;
+    category?: string;
+    limit?: number;
+    offset?: number;
+}): Promise<MarketplaceListResponse>;
+export declare function getMarketplacePackage(id: string): Promise<MarketplaceDetailResponse>;
+export interface InstallResponse {
+    installation?: {
+        id: string;
+        environment_id: string;
+        package_id: string;
+        version: string;
+    };
+    message?: string;
+    [k: string]: any;
+}
+export declare function installPackage(input: {
+    packageId: string;
+    environmentId: string;
+    seedSampleData?: boolean;
+}): Promise<InstallResponse>;
+/**
+ * Helper: list environments visible to the current cloud user (active
+ * organisation). Used to populate the install dialog's environment picker.
+ * Calls cloud directly — same auth model as `installPackage`.
+ */
+export interface CloudEnvironment {
+    id: string;
+    display_name?: string;
+    hostname?: string;
+    organization_id?: string;
+    plan?: string;
+    status?: string;
+}
+export declare function listCloudEnvironments(): Promise<CloudEnvironment[]>;
+/**
+ * List orgs in which the current cloud user has an `owner` or `admin`
+ * role on `sys_member`. Used to filter the install dialog's env picker
+ * — only envs whose `organization_id` is in this set are installable
+ * (the backend enforces the same gate; this is the UX mirror).
+ *
+ * Returns an empty set on 401 / network failure so the install dialog
+ * can render a clean "no installable environments" state.
+ */
+export declare function listInstallableOrgIds(): Promise<Set<string>>;
+export declare function cloudInstallDeepLink(packageId: string): string;
+export interface LocalInstallEntry {
+    packageId: string;
+    versionId: string;
+    manifestId: string;
+    version: string;
+    installedAt: string;
+    installedBy: string | null;
+}
+export interface LocalInstallResult {
+    manifestId: string;
+    version: string;
+    versionId: string;
+    installedAt: string;
+    hotLoaded: boolean;
+    upgradedFrom: string | null;
+    note?: string;
+}
+export declare function installLocal(input: {
+    packageId: string;
+    versionId?: string;
+}): Promise<LocalInstallResult>;
+export declare function listLocalInstalls(): Promise<LocalInstallEntry[]>;
+export declare function uninstallLocal(manifestId: string): Promise<void>;