@object-ui/app-shell 5.2.1 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @object-ui/app-shell — Changelog
 
+## 5.3.0
+
+### Minor Changes
+
+- efb4c00: feat(observability): Sentry integration + bundle splitting for production launch
+
+  **Sentry (opt-in via `VITE_SENTRY_DSN`)**
+  - New `initSentry()` / `captureError()` / `setSentryUser()` / `getSentry()`
+    helpers exported from `@object-ui/app-shell`.
+  - Dynamic-import design: when `VITE_SENTRY_DSN` is unset, `@sentry/react`
+    is **never fetched** — zero bundle cost for self-hosted users.
+  - `ErrorBoundary.componentDidCatch` now best-effort reports to Sentry.
+  - Console app calls `initSentry()` before React mount; never blocks first
+    paint.
+  - Configurable via:
+    - `VITE_SENTRY_DSN` — required to enable
+    - `VITE_SENTRY_ENVIRONMENT` — defaults to `MODE`
+    - `VITE_SENTRY_RELEASE` — defaults to `VITE_APP_VERSION`
+    - `VITE_SENTRY_TRACES_SAMPLE_RATE` — defaults to `0.1`
+    - `VITE_SENTRY_REPLAY=true` — opt-in to 10% on-error replay
+  - Sensitive URL params (`token`, `access_token`, `apiKey`, etc.) are
+    stripped from breadcrumb URLs before send.
+
+  **Bundle splitting**
+  - `plugin-dashboard` (8 component types) now lazy-registered via
+    `ComponentRegistry.registerLazy()` — only loads on dashboard pages.
+  - `plugin-dashboard` and `plugin-report` each get their own chunk
+    (previously merged into `plugins-views`).
+  - Net first-paint JS reduction: **~200 KB** when the user never visits a
+    dashboard or report page.
+  - New chunks: `plugin-dashboard` (119 K), `plugin-report` (92 K),
+    `vendor-sentry` (346 K raw / 97 K brotli, lazy).
+  - `plugins-views` shrinks 387 K → 180 K (now `plugin-list` + `plugin-detail` only).
+
+### Patch Changes
+
+- @object-ui/types@5.3.0
+- @object-ui/core@5.3.0
+- @object-ui/i18n@5.3.0
+- @object-ui/react@5.3.0
+- @object-ui/components@5.3.0
+- @object-ui/fields@5.3.0
+- @object-ui/layout@5.3.0
+- @object-ui/data-objectstack@5.3.0
+- @object-ui/auth@5.3.0
+- @object-ui/permissions@5.3.0
+- @object-ui/collaboration@5.3.0
+- @object-ui/providers@5.3.0
+
 ## 5.2.1
 
 ### Patch Changes

package/dist/chrome/ErrorBoundary.js

@@ -19,6 +19,7 @@ import { Component } from 'react';
 import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { AlertTriangle, RotateCcw, Home } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
+import { captureError } from '../observability';
 /** Inner fallback component that uses the i18n hook */
 function DefaultErrorFallback({ error, onReset }) {
     const { t } = useObjectTranslation();
@@ -42,6 +43,8 @@ export class ErrorBoundary extends Component {
     }
     componentDidCatch(error, errorInfo) {
         console.error('[ErrorBoundary] Caught error:', error, errorInfo);
+        // Best-effort: report to Sentry if initialized. No-op when DSN absent.
+        captureError(error, { componentStack: errorInfo.componentStack });
         this.props.onError?.(error, errorInfo);
     }
     render() {

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

@@ -0,0 +1,19 @@
+/**
+ * Tiny CommonMark-subset renderer for marketplace READMEs.
+ *
+ * Covers what app authors actually write in their README field:
+ *   • `#`, `##`, `###` headings
+ *   • Blank-line-separated paragraphs
+ *   • `- ` / `* ` bulleted lists (single level)
+ *   • `1. ` numbered lists (single level)
+ *   • `**bold**`, `*italic*`, `` `code` ``, `[text](url)` inline
+ *   • Triple-backtick fenced code blocks
+ *
+ * Deliberately NOT a full Markdown engine — we want zero new deps and
+ * predictable output. If a README really needs tables or images, the
+ * publisher can host their own docs and link via `homepage_url`.
+ */
+export declare function MarkdownText({ source, className }: {
+    source: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/console/marketplace/MarkdownText.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tiny CommonMark-subset renderer for marketplace READMEs.
+ *
+ * Covers what app authors actually write in their README field:
+ *   • `#`, `##`, `###` headings
+ *   • Blank-line-separated paragraphs
+ *   • `- ` / `* ` bulleted lists (single level)
+ *   • `1. ` numbered lists (single level)
+ *   • `**bold**`, `*italic*`, `` `code` ``, `[text](url)` inline
+ *   • Triple-backtick fenced code blocks
+ *
+ * Deliberately NOT a full Markdown engine — we want zero new deps and
+ * predictable output. If a README really needs tables or images, the
+ * publisher can host their own docs and link via `homepage_url`.
+ */
+import { Fragment } from 'react';
+function parseBlocks(src) {
+    const lines = src.replace(/\r\n/g, '\n').split('\n');
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Fenced code block
+        if (line.startsWith('```')) {
+            const lang = line.slice(3).trim();
+            i++;
+            const buf = [];
+            while (i < lines.length && !lines[i].startsWith('```')) {
+                buf.push(lines[i]);
+                i++;
+            }
+            i++; // closing fence
+            blocks.push({ type: 'code', text: buf.join('\n'), lang });
+            continue;
+        }
+        // Headings
+        const h = /^(#{1,3})\s+(.*)$/.exec(line);
+        if (h) {
+            const level = h[1].length;
+            blocks.push({ type: `h${level}`, text: h[2].trim() });
+            i++;
+            continue;
+        }
+        // Bullet list
+        if (/^[-*]\s+/.test(line)) {
+            const items = [];
+            while (i < lines.length && /^[-*]\s+/.test(lines[i])) {
+                items.push(lines[i].replace(/^[-*]\s+/, ''));
+                i++;
+            }
+            blocks.push({ type: 'ul', items });
+            continue;
+        }
+        // Numbered list
+        if (/^\d+\.\s+/.test(line)) {
+            const items = [];
+            while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
+                items.push(lines[i].replace(/^\d+\.\s+/, ''));
+                i++;
+            }
+            blocks.push({ type: 'ol', items });
+            continue;
+        }
+        // Blank line → flush
+        if (!line.trim()) {
+            i++;
+            continue;
+        }
+        // Paragraph (collect until blank / heading / list)
+        const buf = [];
+        while (i < lines.length &&
+            lines[i].trim() &&
+            !/^#{1,3}\s+/.test(lines[i]) &&
+            !/^[-*]\s+/.test(lines[i]) &&
+            !/^\d+\.\s+/.test(lines[i]) &&
+            !lines[i].startsWith('```')) {
+            buf.push(lines[i]);
+            i++;
+        }
+        blocks.push({ type: 'p', text: buf.join(' ') });
+    }
+    return blocks;
+}
+// Inline pass: **bold**, *italic*, `code`, [text](url). Order matters
+// so we tokenize once and replace by position.
+function renderInline(input) {
+    const out = [];
+    let remaining = input;
+    let key = 0;
+    const patterns = [
+        { re: /`([^`]+)`/, render: (m) => _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[0.85em]", children: m[1] }, `k${key++}`) },
+        { re: /\*\*([^*]+)\*\*/, render: (m) => _jsx("strong", { className: "font-semibold text-foreground", children: m[1] }, `k${key++}`) },
+        { re: /\*([^*]+)\*/, render: (m) => _jsx("em", { children: m[1] }, `k${key++}`) },
+        { re: /\[([^\]]+)\]\(([^)]+)\)/, render: (m) => (_jsx("a", { href: m[2], target: "_blank", rel: "noopener noreferrer", className: "text-violet-600 underline-offset-2 hover:underline dark:text-violet-400", children: m[1] }, `k${key++}`)) },
+    ];
+    while (remaining) {
+        let bestIdx = -1;
+        let bestMatch = null;
+        let bestPattern = null;
+        for (const p of patterns) {
+            const m = p.re.exec(remaining);
+            if (m && (bestIdx === -1 || m.index < bestIdx)) {
+                bestIdx = m.index;
+                bestMatch = m;
+                bestPattern = p;
+            }
+        }
+        if (!bestMatch || !bestPattern) {
+            out.push(remaining);
+            break;
+        }
+        if (bestIdx > 0)
+            out.push(remaining.slice(0, bestIdx));
+        out.push(bestPattern.render(bestMatch));
+        remaining = remaining.slice(bestIdx + bestMatch[0].length);
+    }
+    return _jsx(_Fragment, { children: out.map((n, i) => _jsx(Fragment, { children: n }, i)) });
+}
+export function MarkdownText({ source, className }) {
+    const blocks = parseBlocks(source);
+    return (_jsx("div", { className: `flex flex-col gap-4 text-sm leading-relaxed text-foreground/90 ${className ?? ''}`, children: blocks.map((b, i) => {
+            switch (b.type) {
+                case 'h1':
+                    return _jsx("h2", { className: "mt-2 text-xl font-bold tracking-tight", children: renderInline(b.text ?? '') }, i);
+                case 'h2':
+                    return _jsx("h3", { className: "mt-3 text-base font-semibold tracking-tight", children: renderInline(b.text ?? '') }, i);
+                case 'h3':
+                    return _jsx("h4", { className: "mt-2 text-sm font-semibold tracking-tight text-foreground/80", children: renderInline(b.text ?? '') }, i);
+                case 'p':
+                    return _jsx("p", { children: renderInline(b.text ?? '') }, i);
+                case 'ul':
+                    return (_jsx("ul", { className: "ml-1 flex list-none flex-col gap-1.5", children: (b.items ?? []).map((it, j) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-violet-500/70" }), _jsx("span", { children: renderInline(it) })] }, j))) }, i));
+                case 'ol':
+                    return (_jsx("ol", { className: "ml-5 flex list-decimal flex-col gap-1.5 marker:text-muted-foreground", children: (b.items ?? []).map((it, j) => (_jsx("li", { className: "pl-1", children: renderInline(it) }, j))) }, i));
+                case 'code':
+                    return (_jsx("pre", { className: "overflow-x-auto rounded-lg border bg-muted/40 p-3 text-xs leading-relaxed", children: _jsx("code", { className: "font-mono", children: b.text }) }, i));
+            }
+            return null;
+        }) }));
+}

package/dist/console/marketplace/MarketplacePackagePage.js

@@ -10,6 +10,7 @@ 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();
@@ -190,10 +191,10 @@ export function MarketplacePackagePage() {
     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
+    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: "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)
+                                            : '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.js

@@ -82,7 +82,7 @@ export function MarketplacePage() {
             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) => {
+    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 === ' ') {

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute,
 export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
 export type { ActivityItem } from './layout';
 export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, RouteFader, toastWithUndo, type ToastWithUndoOptions, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
+export { initSentry, captureError, setSentryUser, getSentry } from './observability';
 export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
 export type { RecordFormPageProps } from './views';
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';

package/dist/index.js

@@ -20,6 +20,8 @@ export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute,
 export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
 // Top-level chrome (dialogs, providers, error boundaries)
 export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, RouteFader, toastWithUndo, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
+// Observability — Sentry integration, opt-in via VITE_SENTRY_DSN
+export { initSentry, captureError, setSentryUser, getSentry } from './observability';
 // Standard inner-SPA views
 export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
 // Hooks

package/dist/observability/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Observability primitives — Sentry integration.
+ *
+ * All exports are no-op safe when no DSN is configured. See sentry.ts for
+ * configuration via `VITE_SENTRY_*` envvars.
+ *
+ * @module
+ */
+export { initSentry, captureError, setSentryUser, getSentry } from './sentry';

package/dist/observability/index.js

@@ -0,0 +1,9 @@
+/**
+ * Observability primitives — Sentry integration.
+ *
+ * All exports are no-op safe when no DSN is configured. See sentry.ts for
+ * configuration via `VITE_SENTRY_*` envvars.
+ *
+ * @module
+ */
+export { initSentry, captureError, setSentryUser, getSentry } from './sentry';

package/dist/observability/sentry.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Sentry integration — opt-in via `VITE_SENTRY_DSN`.
+ *
+ * Design goals:
+ *  - **Zero cost when disabled.** `@sentry/react` is dynamically imported only
+ *    when a DSN is configured, so apps without Sentry pay zero bundle bytes.
+ *  - **Graceful degradation.** If init fails (network, CSP, etc.) we log a
+ *    warning and continue — the host app must still render.
+ *  - **Sensible defaults.** 10% transaction sampling, no session replay,
+ *    `release` + `environment` pulled from Vite envvars.
+ *
+ * Env vars consumed (all optional):
+ *  - `VITE_SENTRY_DSN`         — DSN; absent disables the integration entirely
+ *  - `VITE_SENTRY_ENVIRONMENT` — defaults to `MODE` (production/development)
+ *  - `VITE_SENTRY_RELEASE`     — defaults to `VITE_APP_VERSION` or `unknown`
+ *  - `VITE_SENTRY_TRACES_SAMPLE_RATE` — defaults to `0.1`
+ *
+ * @module
+ */
+type SentryModule = typeof import('@sentry/react');
+/**
+ * Returns the loaded Sentry module, or `null` if Sentry was never initialized
+ * (e.g. DSN missing). Callers must handle the null case.
+ */
+export declare function getSentry(): SentryModule | null;
+/**
+ * Initializes Sentry if `VITE_SENTRY_DSN` is configured. Safe to call multiple
+ * times — only the first invocation runs.
+ *
+ * @returns `true` if Sentry was initialized, `false` if disabled or failed.
+ */
+export declare function initSentry(): Promise<boolean>;
+/**
+ * Reports an error to Sentry if initialized; otherwise no-op. Use this from
+ * ErrorBoundary or any catch block where you want best-effort reporting.
+ */
+export declare function captureError(error: unknown, context?: Record<string, unknown>): void;
+/**
+ * Sets the active user context for subsequent events. Pass `null` on logout.
+ */
+export declare function setSentryUser(user: {
+    id?: string;
+    email?: string;
+    username?: string;
+} | null): void;
+export {};

package/dist/observability/sentry.js

@@ -0,0 +1,120 @@
+/**
+ * Sentry integration — opt-in via `VITE_SENTRY_DSN`.
+ *
+ * Design goals:
+ *  - **Zero cost when disabled.** `@sentry/react` is dynamically imported only
+ *    when a DSN is configured, so apps without Sentry pay zero bundle bytes.
+ *  - **Graceful degradation.** If init fails (network, CSP, etc.) we log a
+ *    warning and continue — the host app must still render.
+ *  - **Sensible defaults.** 10% transaction sampling, no session replay,
+ *    `release` + `environment` pulled from Vite envvars.
+ *
+ * Env vars consumed (all optional):
+ *  - `VITE_SENTRY_DSN`         — DSN; absent disables the integration entirely
+ *  - `VITE_SENTRY_ENVIRONMENT` — defaults to `MODE` (production/development)
+ *  - `VITE_SENTRY_RELEASE`     — defaults to `VITE_APP_VERSION` or `unknown`
+ *  - `VITE_SENTRY_TRACES_SAMPLE_RATE` — defaults to `0.1`
+ *
+ * @module
+ */
+let sentryModule = null;
+let initPromise = null;
+/**
+ * Returns the loaded Sentry module, or `null` if Sentry was never initialized
+ * (e.g. DSN missing). Callers must handle the null case.
+ */
+export function getSentry() {
+    return sentryModule;
+}
+/**
+ * Initializes Sentry if `VITE_SENTRY_DSN` is configured. Safe to call multiple
+ * times — only the first invocation runs.
+ *
+ * @returns `true` if Sentry was initialized, `false` if disabled or failed.
+ */
+export function initSentry() {
+    if (initPromise)
+        return initPromise;
+    initPromise = (async () => {
+        const env = import.meta.env ?? {};
+        const dsn = env.VITE_SENTRY_DSN;
+        if (!dsn)
+            return false;
+        try {
+            const Sentry = (await import('@sentry/react'));
+            const tracesSampleRate = Number(env.VITE_SENTRY_TRACES_SAMPLE_RATE ?? '0.1');
+            Sentry.init({
+                dsn,
+                environment: env.VITE_SENTRY_ENVIRONMENT || env.MODE || 'production',
+                release: env.VITE_SENTRY_RELEASE || env.VITE_APP_VERSION || 'unknown',
+                tracesSampleRate: Number.isFinite(tracesSampleRate) ? tracesSampleRate : 0.1,
+                // Send IP address + user agent on events. Sentry's recommended default
+                // for production. Disable by setting VITE_SENTRY_SEND_DEFAULT_PII=false.
+                sendDefaultPii: env.VITE_SENTRY_SEND_DEFAULT_PII !== 'false',
+                // Replay is opt-in via VITE_SENTRY_REPLAY=true to keep payload small.
+                // When enabled, only 10% of error sessions are recorded.
+                replaysSessionSampleRate: 0,
+                replaysOnErrorSampleRate: env.VITE_SENTRY_REPLAY === 'true' ? 0.1 : 0,
+                // Browser tracing — captures pageloads + navigation transactions.
+                integrations: [Sentry.browserTracingIntegration()],
+                // Strip query strings + Authorization from breadcrumbs before send.
+                beforeBreadcrumb(breadcrumb) {
+                    if (breadcrumb.category === 'fetch' || breadcrumb.category === 'xhr') {
+                        if (breadcrumb.data?.url && typeof breadcrumb.data.url === 'string') {
+                            breadcrumb.data.url = stripSensitive(breadcrumb.data.url);
+                        }
+                    }
+                    return breadcrumb;
+                },
+            });
+            sentryModule = Sentry;
+            return true;
+        }
+        catch (err) {
+            console.warn('[sentry] init failed; continuing without observability:', err);
+            return false;
+        }
+    })();
+    return initPromise;
+}
+/**
+ * Reports an error to Sentry if initialized; otherwise no-op. Use this from
+ * ErrorBoundary or any catch block where you want best-effort reporting.
+ */
+export function captureError(error, context) {
+    if (!sentryModule)
+        return;
+    try {
+        sentryModule.captureException(error, context ? { extra: context } : undefined);
+    }
+    catch {
+        // never let observability break the host app
+    }
+}
+/**
+ * Sets the active user context for subsequent events. Pass `null` on logout.
+ */
+export function setSentryUser(user) {
+    if (!sentryModule)
+        return;
+    try {
+        sentryModule.setUser(user);
+    }
+    catch {
+        /* swallow */
+    }
+}
+function stripSensitive(url) {
+    try {
+        const u = new URL(url, 'http://localhost');
+        // Drop common token-shaped query params before sending to Sentry.
+        for (const key of ['token', 'access_token', 'id_token', 'apiKey', 'api_key', 'password']) {
+            if (u.searchParams.has(key))
+                u.searchParams.set(key, '[redacted]');
+        }
+        return u.pathname + (u.searchParams.toString() ? '?' + u.searchParams.toString() : '');
+    }
+    catch {
+        return url;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -25,37 +25,38 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
+    "@sentry/react": "^8.55.2",
     "lucide-react": "^1.16.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "5.2.1",
-    "@object-ui/collaboration": "5.2.1",
-    "@object-ui/components": "5.2.1",
-    "@object-ui/core": "5.2.1",
-    "@object-ui/data-objectstack": "5.2.1",
-    "@object-ui/fields": "5.2.1",
-    "@object-ui/i18n": "5.2.1",
-    "@object-ui/layout": "5.2.1",
-    "@object-ui/permissions": "5.2.1",
-    "@object-ui/providers": "5.2.1",
-    "@object-ui/react": "5.2.1",
-    "@object-ui/types": "5.2.1"
+    "@object-ui/auth": "5.3.0",
+    "@object-ui/collaboration": "5.3.0",
+    "@object-ui/components": "5.3.0",
+    "@object-ui/core": "5.3.0",
+    "@object-ui/data-objectstack": "5.3.0",
+    "@object-ui/fields": "5.3.0",
+    "@object-ui/i18n": "5.3.0",
+    "@object-ui/layout": "5.3.0",
+    "@object-ui/permissions": "5.3.0",
+    "@object-ui/providers": "5.3.0",
+    "@object-ui/react": "5.3.0",
+    "@object-ui/types": "5.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "^5.2.1",
-    "@object-ui/plugin-charts": "^5.2.1",
-    "@object-ui/plugin-chatbot": "^5.2.1",
-    "@object-ui/plugin-dashboard": "^5.2.1",
-    "@object-ui/plugin-designer": "^5.2.1",
-    "@object-ui/plugin-detail": "^5.2.1",
-    "@object-ui/plugin-form": "^5.2.1",
-    "@object-ui/plugin-grid": "^5.2.1",
-    "@object-ui/plugin-kanban": "^5.2.1",
-    "@object-ui/plugin-list": "^5.2.1",
-    "@object-ui/plugin-report": "^5.2.1",
-    "@object-ui/plugin-view": "^5.2.1"
+    "@object-ui/plugin-calendar": "^5.3.0",
+    "@object-ui/plugin-charts": "^5.3.0",
+    "@object-ui/plugin-chatbot": "^5.3.0",
+    "@object-ui/plugin-dashboard": "^5.3.0",
+    "@object-ui/plugin-designer": "^5.3.0",
+    "@object-ui/plugin-detail": "^5.3.0",
+    "@object-ui/plugin-form": "^5.3.0",
+    "@object-ui/plugin-grid": "^5.3.0",
+    "@object-ui/plugin-kanban": "^5.3.0",
+    "@object-ui/plugin-list": "^5.3.0",
+    "@object-ui/plugin-report": "^5.3.0",
+    "@object-ui/plugin-view": "^5.3.0"
   },
   "devDependencies": {
     "@types/node": "^25.9.0",