@object-ui/app-shell 5.1.1 → 5.2.1

package/dist/console/AppContent.js

@@ -30,6 +30,7 @@ import { LoadingScreen } from '../chrome/LoadingScreen';
 import { ObjectView } from '../views/ObjectView';
 import { KeyboardShortcutsDialog } from '../chrome/KeyboardShortcutsDialog';
 import { OnboardingWalkthrough } from '../chrome/OnboardingWalkthrough';
+import { RouteFader } from '../chrome/RouteFader';
 import { NavigationSyncEffect } from '../hooks/useNavigationSync';
 // Route-based code splitting — lazy-load less-frequently-used routes
 const RecordDetailView = lazy(() => import('../views/RecordDetailView').then(m => ({ default: m.RecordDetailView })));
@@ -44,6 +45,11 @@ const CreateAppPage = lazy(() => import('@object-ui/plugin-designer').then(m =>
 const EditAppPage = lazy(() => import('@object-ui/plugin-designer').then(m => ({ default: m.EditAppPage })));
 const PageDesignPage = lazy(() => import('@object-ui/plugin-designer').then(m => ({ default: m.PageDesignPage })));
 const DashboardDesignPage = lazy(() => import('@object-ui/plugin-designer').then(m => ({ default: m.DashboardDesignPage })));
+// Marketplace pages — first-class platform feature; mounted at `system/marketplace`
+// under any active app so admins can browse + install from inside the runtime.
+const MarketplacePage = lazy(() => import('./marketplace/MarketplacePage').then(m => ({ default: m.MarketplacePage })));
+const MarketplacePackagePage = lazy(() => import('./marketplace/MarketplacePackagePage').then(m => ({ default: m.MarketplacePackagePage })));
+const MarketplaceInstalledPage = lazy(() => import('./marketplace/MarketplaceInstalledPage').then(m => ({ default: m.MarketplaceInstalledPage })));
 export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
     const [connectionState, setConnectionState] = useState('disconnected');
     const { user } = useAuth();
@@ -226,12 +232,12 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
     if (!activeApp && !isCreateAppRoute && !isSystemRoute)
         return (_jsx("div", { className: "h-screen flex items-center justify-center", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('empty.noAppsConfigured') }), _jsx(EmptyDescription, { children: t('empty.noAppsConfiguredDescription') }), _jsxs("div", { className: "mt-4 flex flex-col sm:flex-row items-center gap-3", children: [_jsx(Button, { onClick: () => navigate('/create-app'), "data-testid": "create-first-app-btn", children: t('empty.createFirstApp') }), _jsx(Button, { variant: "outline", onClick: () => navigate('/apps/setup'), "data-testid": "go-to-settings-btn", children: t('empty.systemSettings') })] })] }) }));
     if (!activeApp && (isCreateAppRoute || isSystemRoute)) {
-        return (_jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), extraRoutesNoApp] }) }));
+        return (_jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "system/marketplace", element: _jsx(MarketplacePage, {}) }), _jsx(Route, { path: "system/marketplace/installed", element: _jsx(MarketplaceInstalledPage, {}) }), _jsx(Route, { path: "system/marketplace/:packageId", element: _jsx(MarketplacePackagePage, {}) }), extraRoutesNoApp] }) }));
     }
     const expressionUser = user
         ? { name: user.name, email: user.email, role: user.role ?? 'user' }
         : { name: 'Anonymous', email: '', role: 'guest' };
-    return (_jsxs(ExpressionProvider, { user: expressionUser, app: activeApp, data: {}, children: [_jsx(NavigationSyncEffect, {}), _jsxs(ConsoleLayout, { activeAppName: activeApp.name, activeApp: activeApp, onAppChange: handleAppChange, objects: allObjects, connectionState: connectionState, children: [_jsx(CommandPalette, { apps: apps, activeApp: activeApp, objects: allObjects, onAppChange: handleAppChange }), _jsx(KeyboardShortcutsDialog, {}), _jsx(OnboardingWalkthrough, {}), _jsx(ErrorBoundary, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: findFirstRoute(activeApp.navigation || []), replace: true }) }), _jsx(Route, { path: ":objectName", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit, externalRefreshKey: refreshKey }) }), _jsx(Route, { path: ":objectName/new", element: _jsx(RecordFormPage, { mode: "create" }) }), _jsx(Route, { path: ":objectName/view/:viewId", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit, externalRefreshKey: refreshKey }) }), _jsx(Route, { path: ":objectName/record/:recordId", element: _jsx(RecordDetailView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }, refreshKey) }), _jsx(Route, { path: ":objectName/record/:recordId/edit", element: _jsx(RecordFormPage, { mode: "edit" }) }), _jsx(Route, { path: "dashboard/:dashboardName", element: _jsx(DashboardView, { dataSource: dataSource }) }), _jsx(Route, { path: "report/:reportName", element: _jsx(ReportView, { dataSource: dataSource }) }), _jsx(Route, { path: "page/:pageName", element: _jsx(PageView, {}) }), _jsx(Route, { path: "design/page/:pageName", element: _jsx(PageDesignPage, {}) }), _jsx(Route, { path: "design/dashboard/:dashboardName", element: _jsx(DashboardDesignPage, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchResultsPage, {}) }), _jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "edit-app/:editAppName", element: _jsx(EditAppPage, {}) }), extraRoutes] }) }) }), currentObjectDef && (_jsx(ModalForm, { schema: {
+    return (_jsxs(ExpressionProvider, { user: expressionUser, app: activeApp, data: {}, children: [_jsx(NavigationSyncEffect, {}), _jsxs(ConsoleLayout, { activeAppName: activeApp.name, activeApp: activeApp, onAppChange: handleAppChange, objects: allObjects, connectionState: connectionState, children: [_jsx(CommandPalette, { apps: apps, activeApp: activeApp, objects: allObjects, onAppChange: handleAppChange, dataSource: dataSource }), _jsx(KeyboardShortcutsDialog, {}), _jsx(OnboardingWalkthrough, {}), _jsx(ErrorBoundary, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(RouteFader, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: resolveLandingRoute(activeApp), replace: true }) }), _jsx(Route, { path: ":objectName", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit, externalRefreshKey: refreshKey }) }), _jsx(Route, { path: ":objectName/new", element: _jsx(RecordFormPage, { mode: "create" }) }), _jsx(Route, { path: ":objectName/view/:viewId", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit, externalRefreshKey: refreshKey }) }), _jsx(Route, { path: ":objectName/record/:recordId", element: _jsx(RecordDetailView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }, refreshKey) }), _jsx(Route, { path: ":objectName/record/:recordId/edit", element: _jsx(RecordFormPage, { mode: "edit" }) }), _jsx(Route, { path: "dashboard/:dashboardName", element: _jsx(DashboardView, { dataSource: dataSource }) }), _jsx(Route, { path: "report/:reportName", element: _jsx(ReportView, { dataSource: dataSource }) }), _jsx(Route, { path: "page/:pageName", element: _jsx(PageView, {}) }), _jsx(Route, { path: "design/page/:pageName", element: _jsx(PageDesignPage, {}) }), _jsx(Route, { path: "design/dashboard/:dashboardName", element: _jsx(DashboardDesignPage, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchResultsPage, {}) }), _jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "edit-app/:editAppName", element: _jsx(EditAppPage, {}) }), _jsx(Route, { path: "system/marketplace", element: _jsx(MarketplacePage, {}) }), _jsx(Route, { path: "system/marketplace/installed", element: _jsx(MarketplaceInstalledPage, {}) }), _jsx(Route, { path: "system/marketplace/:packageId", element: _jsx(MarketplacePackagePage, {}) }), extraRoutes, _jsx(Route, { path: ":objectName/:maybeRecordId", element: _jsx(ShorthandRecordRedirect, {}) }), _jsx(Route, { path: "*", element: _jsx(RouteNotFound, {}) })] }) }) }) }), currentObjectDef && (_jsx(ModalForm, { schema: {
                             type: 'object-form',
                             formType: 'modal',
                             objectName: currentObjectDef.name,
@@ -289,3 +295,103 @@ function findFirstRoute(items) {
     }
     return '';
 }
+// Build the per-item route segment without recursing through groups —
+// used when `homePageId` resolved to an exact match and we just need to
+// know how to address it.
+function buildItemRoute(item) {
+    if (!item)
+        return '';
+    if (item.type === 'object')
+        return item.viewName ? `${item.objectName}/view/${item.viewName}` : `${item.objectName}`;
+    if (item.type === 'page')
+        return item.pageName ? `page/${item.pageName}` : '';
+    if (item.type === 'dashboard')
+        return item.dashboardName ? `dashboard/${item.dashboardName}` : '';
+    if (item.type === 'report')
+        return item.reportName ? `report/${item.reportName}` : '';
+    return '';
+}
+function findNavItemById(items, id) {
+    if (!items)
+        return undefined;
+    for (const item of items) {
+        if (item.id === id)
+            return item;
+        if (item.type === 'group' && item.children) {
+            const hit = findNavItemById(item.children, id);
+            if (hit)
+                return hit;
+        }
+    }
+    return undefined;
+}
+/**
+ * Resolves the route to navigate to when the user lands on the bare
+ * `/console/apps/:appName` URL. Honors the app's explicit
+ * `homePageId` (Salesforce-style "Default Landing"); falls back to the
+ * first reachable nav item only when no homePageId is set or it points
+ * at something that doesn't yield a route. This is what lets the CRM
+ * example open on the Sales Dashboard instead of the Lead list.
+ */
+function resolveLandingRoute(activeApp) {
+    const homePageId = activeApp?.homePageId;
+    const navigation = activeApp?.navigation || [];
+    if (homePageId) {
+        const item = findNavItemById(navigation, homePageId);
+        const route = buildItemRoute(item);
+        if (route)
+            return route;
+    }
+    return findFirstRoute(navigation);
+}
+/**
+ * Heuristic: distinguish a record id from a route fragment.
+ *
+ * Record ids in this system are URL-safe slugs (alnum + `_` / `-`), typically
+ * 8+ chars (often 16+). They never collide with reserved second-segment
+ * keywords used by the route table (`new`, `view`, `record`, `dashboard`,
+ * `report`, `page`, `design`, `search`, `create-app`, `edit-app`).
+ */
+const RESERVED_SECOND_SEGMENTS = new Set([
+    'new', 'view', 'record', 'edit',
+    'dashboard', 'report', 'page',
+    'design', 'search', 'create-app', 'edit-app',
+]);
+function looksLikeRecordId(segment) {
+    if (!segment)
+        return false;
+    if (RESERVED_SECOND_SEGMENTS.has(segment))
+        return false;
+    // Allow URL-safe slug chars; reject anything with `/`, `?`, `#`, spaces.
+    if (!/^[A-Za-z0-9_-]+$/.test(segment))
+        return false;
+    // Most record ids are at least 6 chars (UUID, ULID, nanoid all >=8).
+    return segment.length >= 6;
+}
+/**
+ * Redirects `/apps/:appName/:objectName/:recordId` shorthand to the
+ * canonical `/apps/:appName/:objectName/record/:recordId` so externally
+ * shared / pasted links work, and legacy URL producers that built the
+ * shorthand keep functioning.
+ */
+function ShorthandRecordRedirect() {
+    const { objectName, maybeRecordId } = useParams();
+    const location = useLocation();
+    if (objectName && looksLikeRecordId(maybeRecordId)) {
+        const target = `${location.pathname.replace(/\/$/, '').replace(`/${maybeRecordId}`, `/record/${maybeRecordId}`)}${location.search}${location.hash}`;
+        return _jsx(Navigate, { to: target, replace: true });
+    }
+    return _jsx(RouteNotFound, {});
+}
+/**
+ * Visible "not found" fallback rendered for any unmatched URL inside the
+ * console app shell. Previously these URLs produced a fully blank content
+ * area with no indication that anything had gone wrong — users would think
+ * the app had crashed. An explicit Empty state with a "back to app home"
+ * action turns an opaque failure into a recoverable one.
+ */
+function RouteNotFound() {
+    const navigate = useNavigate();
+    const { t } = useObjectTranslation();
+    return (_jsx("div", { className: "flex h-full w-full items-center justify-center p-8", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('console.notFound.title', { defaultValue: 'Page not found' }) }), _jsx(EmptyDescription, { children: t('console.notFound.description', { defaultValue: 'The URL you followed does not match any view in this app.' }) }), _jsx("div", { className: "mt-4", children: _jsx(Button, { variant: "outline", onClick: () => navigate(-1), children: t('console.notFound.back', { defaultValue: 'Go back' }) }) })] }) }));
+}

package/dist/console/home/HomePage.js

@@ -22,12 +22,12 @@ import { useMetadata } from '../../providers/MetadataProvider';
 import { useRecentItems } from '../../hooks/useRecentItems';
 import { useFavorites } from '../../hooks/useFavorites';
 import { useObjectTranslation } from '@object-ui/i18n';
-import { useAuth } from '@object-ui/auth';
+import { useAuth, useIsWorkspaceAdmin } from '@object-ui/auth';
 import { AppCard } from './AppCard';
 import { RecentApps } from './RecentApps';
 import { StarredApps } from './StarredApps';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
-import { Plus, Settings, Sparkles, Star, Clock, ArrowDown } from 'lucide-react';
+import { Plus, Settings, Sparkles, Star, Clock, ArrowDown, Store } from 'lucide-react';
 function pickGreetingKey(hour) {
     if (hour < 5)
         return 'home.greetingNight';
@@ -56,6 +56,7 @@ export function HomePage() {
     const { recentItems } = useRecentItems();
     const { favorites } = useFavorites();
     const { user } = useAuth();
+    const isAdmin = useIsWorkspaceAdmin();
     const activeApps = apps.filter((a) => a.active !== false);
     const recentApps = recentItems
         .filter(item => item.type === 'object' || item.type === 'dashboard' || item.type === 'page' || item.type === 'record')
@@ -71,7 +72,7 @@ export function HomePage() {
     if (activeApps.length === 0) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center p-6", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('home.welcome', { defaultValue: 'Welcome to ObjectUI' }) }), _jsx(EmptyDescription, { children: t('home.welcomeDescription', {
                             defaultValue: 'Get started by creating your first application or configure your system settings.',
-                        }) }), _jsxs("div", { className: "mt-6 flex flex-col sm:flex-row items-center gap-3", children: [_jsxs(Button, { onClick: () => navigate('/create-app'), "data-testid": "create-first-app-btn", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t('home.createFirstApp', { defaultValue: 'Create Your First App' })] }), _jsxs(Button, { variant: "outline", onClick: () => navigate('/apps/setup'), "data-testid": "go-to-settings-btn", children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('home.systemSettings', { defaultValue: 'System Settings' })] })] })] }) }));
+                        }) }), _jsxs("div", { className: "mt-6 flex flex-col sm:flex-row items-center gap-3", children: [_jsxs(Button, { onClick: () => navigate('/create-app'), "data-testid": "create-first-app-btn", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t('home.createFirstApp', { defaultValue: 'Create Your First App' })] }), isAdmin && (_jsxs(Button, { variant: "outline", onClick: () => navigate('/apps/setup/system/marketplace'), "data-testid": "browse-marketplace-empty-btn", children: [_jsx(Store, { className: "mr-2 h-4 w-4" }), t('home.browseMarketplace', { defaultValue: 'Browse App Marketplace' })] })), _jsxs(Button, { variant: "outline", onClick: () => navigate('/apps/setup'), "data-testid": "go-to-settings-btn", children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('home.systemSettings', { defaultValue: 'System Settings' })] })] })] }) }));
     }
-    return (_jsxs("div", { className: "relative isolate min-h-full bg-gradient-to-b from-background via-background to-muted/40", children: [_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0 -z-10 h-[28rem] overflow-hidden", children: [_jsx("div", { className: "absolute -top-32 -left-24 h-[28rem] w-[28rem] rounded-full bg-primary/30 blur-3xl opacity-70 dark:opacity-40" }), _jsx("div", { className: "absolute -top-20 right-[-6rem] h-[26rem] w-[36rem] rounded-full bg-sky-400/30 blur-3xl opacity-70 dark:opacity-35" }), _jsx("div", { className: "absolute top-32 left-1/3 h-[18rem] w-[24rem] rounded-full bg-fuchsia-400/25 blur-3xl opacity-60 dark:opacity-25" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-background/40 to-background" })] }), _jsx("section", { className: "px-4 sm:px-6 lg:px-8 pt-10 pb-6", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground mb-3", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 text-primary" }), _jsx("span", { className: "uppercase tracking-wider", children: t('home.title', { defaultValue: 'Home' }) })] }), _jsxs("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-pretty", children: [_jsxs("span", { className: "bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent", children: [greeting, displayName ? `, ${displayName}` : ''] }), _jsx("span", { className: "text-foreground/40", children: "." })] }), _jsx("p", { className: "text-base sm:text-lg text-muted-foreground mt-2 max-w-2xl", children: t('home.heroTagline', { defaultValue: 'Pick up where you left off, or explore something new.' }) })] }) }), _jsx("div", { className: "px-4 sm:px-6 lg:px-8 pb-16", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-10", children: [starredApps.length === 0 && recentApps.length === 0 && (_jsx(GettingStartedHint, { t: t })), starredApps.length > 0 && _jsx(StarredApps, { items: starredApps }), recentApps.length > 0 && _jsx(RecentApps, { items: recentApps }), _jsxs("section", { children: [_jsx("div", { className: "flex items-end justify-between mb-5", children: _jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.allApps', { defaultValue: 'All Applications' }) }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [activeApps.length, ' · ', t('home.stats.apps', { defaultValue: 'Applications' })] })] }) }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: activeApps.map((app, idx) => (_jsx(AppCard, { app: app, index: idx, onClick: () => navigate(`/apps/${app.name}`), isFavorite: favorites.some(f => f.id === `app:${app.name}`) }, app.name))) })] })] }) })] }));
+    return (_jsxs("div", { className: "relative isolate min-h-full bg-gradient-to-b from-background via-background to-muted/40", children: [_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0 -z-10 h-[28rem] overflow-hidden", children: [_jsx("div", { className: "absolute -top-32 -left-24 h-[28rem] w-[28rem] rounded-full bg-primary/30 blur-3xl opacity-70 dark:opacity-40" }), _jsx("div", { className: "absolute -top-20 right-[-6rem] h-[26rem] w-[36rem] rounded-full bg-sky-400/30 blur-3xl opacity-70 dark:opacity-35" }), _jsx("div", { className: "absolute top-32 left-1/3 h-[18rem] w-[24rem] rounded-full bg-fuchsia-400/25 blur-3xl opacity-60 dark:opacity-25" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-background/40 to-background" })] }), _jsx("section", { className: "px-4 sm:px-6 lg:px-8 pt-10 pb-6", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground mb-3", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 text-primary" }), _jsx("span", { className: "uppercase tracking-wider", children: t('home.title', { defaultValue: 'Home' }) })] }), _jsxs("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-pretty", children: [_jsxs("span", { className: "bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent", children: [greeting, displayName ? `, ${displayName}` : ''] }), _jsx("span", { className: "text-foreground/40", children: "." })] }), _jsx("p", { className: "text-base sm:text-lg text-muted-foreground mt-2 max-w-2xl", children: t('home.heroTagline', { defaultValue: 'Pick up where you left off, or explore something new.' }) })] }) }), _jsx("div", { className: "px-4 sm:px-6 lg:px-8 pb-16", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-10", children: [starredApps.length === 0 && recentApps.length === 0 && (_jsx(GettingStartedHint, { t: t })), starredApps.length > 0 && _jsx(StarredApps, { items: starredApps }), recentApps.length > 0 && _jsx(RecentApps, { items: recentApps }), _jsxs("section", { children: [_jsxs("div", { className: "flex items-end justify-between mb-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: t('home.allApps', { defaultValue: 'All Applications' }) }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [activeApps.length, ' · ', t('home.stats.apps', { defaultValue: 'Applications' })] })] }), isAdmin && (_jsxs(Button, { variant: "outline", onClick: () => navigate('/apps/setup/system/marketplace'), "data-testid": "browse-marketplace-btn", children: [_jsx(Store, { className: "mr-2 h-4 w-4" }), t('home.browseMarketplace', { defaultValue: 'Browse App Marketplace' })] }))] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: activeApps.map((app, idx) => (_jsx(AppCard, { app: app, index: idx, onClick: () => navigate(`/apps/${app.name}`), isFavorite: favorites.some(f => f.id === `app:${app.name}`) }, app.name))) })] })] }) })] }));
 }

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

@@ -0,0 +1,17 @@
+/**
+ * Marketplace Installed Apps Page.
+ *
+ * Lists packages currently installed into THIS runtime's kernel (the
+ * `install-local` path, not cloud environments). Each row has an
+ * Uninstall action that removes the cached manifest from
+ * `<cwd>/.objectstack/installed-packages/<id>.json`.
+ *
+ * Note the explicit caveat: the framework kernel API is additive only
+ * (`engine.registerApp(manifest)`) — there is no `unregisterApp`. So
+ * uninstall removes the on-disk cache (preventing the package from
+ * re-loading on next boot) but the app remains live in the running
+ * kernel until the runtime is restarted. We show this in the UI so a
+ * developer doesn't get confused when the app stays visible in the
+ * switcher after clicking Uninstall.
+ */
+export declare function MarketplaceInstalledPage(): import("react/jsx-runtime").JSX.Element;

package/dist/console/marketplace/MarketplaceInstalledPage.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Marketplace Installed Apps Page.
+ *
+ * Lists packages currently installed into THIS runtime's kernel (the
+ * `install-local` path, not cloud environments). Each row has an
+ * Uninstall action that removes the cached manifest from
+ * `<cwd>/.objectstack/installed-packages/<id>.json`.
+ *
+ * Note the explicit caveat: the framework kernel API is additive only
+ * (`engine.registerApp(manifest)`) — there is no `unregisterApp`. So
+ * uninstall removes the on-disk cache (preventing the package from
+ * re-loading on next boot) but the app remains live in the running
+ * kernel until the runtime is restarted. We show this in the UI so a
+ * developer doesn't get confused when the app stays visible in the
+ * switcher after clicking Uninstall.
+ */
+import { useEffect, useState } from 'react';
+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 { listLocalInstalls, uninstallLocal, } from './marketplaceApi';
+export function MarketplaceInstalledPage() {
+    const navigate = useNavigate();
+    const { appName } = useParams();
+    const basePath = appName ? `/apps/${appName}` : '';
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [working, setWorking] = useState(null);
+    const [result, setResult] = useState(null);
+    const load = async () => {
+        setLoading(true);
+        try {
+            const list = await listLocalInstalls();
+            setItems(list);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    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.`)) {
+            return;
+        }
+        setWorking(entry.manifestId);
+        setResult(null);
+        try {
+            await uninstallLocal(entry.manifestId);
+            setResult({
+                ok: true,
+                message: `Removed ${entry.manifestId}. Restart the runtime to fully unload it from the running kernel.`,
+            });
+            await load();
+        }
+        catch (e) {
+            setResult({ ok: false, message: e?.message ?? String(e) });
+        }
+        finally {
+            setWorking(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 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."] })] }));
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Marketplace Package Detail Page.
+ *
+ * Shows full package metadata + readme + approved version list. Provides
+ * an "Install" button that opens a dialog with environment picker.
+ */
+export declare function MarketplacePackagePage(): import("react/jsx-runtime").JSX.Element;

package/dist/console/marketplace/MarketplacePackagePage.js

@@ -0,0 +1,199 @@
+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 { 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-4 flex-wrap", children: [_jsx(PackageIcon, { iconUrl: pkg.icon_url, displayName: pkg.display_name, manifestId: pkg.manifest_id, className: "h-16 w-16 rounded-xl", initialClassName: "text-2xl font-bold" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight truncate", children: pkg.display_name || pkg.manifest_id }), _jsxs("div", { className: "text-sm text-muted-foreground mt-1 flex flex-wrap items-center gap-2", children: [_jsx("code", { className: "font-mono", 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 && _jsxs("span", { className: "text-xs", children: ["License: ", pkg.license] }), localInstall && (_jsxs(Badge, { variant: "default", className: "bg-green-600 hover:bg-green-600", children: ["Installed locally \u00B7 v", localInstall.version] }))] }), pkg.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-3 max-w-2xl", children: pkg.description }))] }), _jsxs("div", { className: "flex flex-col gap-2 shrink-0 min-w-[14rem]", children: [_jsxs(Button, { onClick: doInstallLocal, disabled: !latestVersion || installingLocal, 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: "outline", onClick: openInstall, disabled: !latestVersion, 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", 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("pre", { className: "whitespace-pre-wrap text-sm font-sans", children: 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: ["Check that this runtime is configured with ", _jsx("code", { className: "font-mono", children: "OS_CLOUD_URL" }), " pointing at a reachable ObjectStack Cloud."] })] })] })), 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));
+                }) }))] }));
+}