@object-ui/app-shell 6.2.2 → 7.0.0

package/dist/console/cloud-connection/CloudConnectionPanel.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * CloudConnectionPanel — the RFC 8628 device-code binding state machine,
+ * registered as the SDUI widget `cloud-connection:panel`.
+ *
+ * This is deliberately the ONLY React in the Cloud Connection surface:
+ * the page shell, nav placement and labels ship as metadata WITH the
+ * `@objectstack/cloud-connection` plugin (cloud ADR-0008 / console
+ * SDUI-first direction). The widget talks to the runtime's same-origin
+ * `/api/v1/cloud-connection/*` routes.
+ *
+ * Zero-input flow (ADR runtime-identity-binding §2.3): [Connect] →
+ * bind/start (no environment id — the registration is created cloud-side
+ * at approval) → the approval page auto-opens in a popup with the code
+ * pre-filled and the device named → bind/poll … → bound. The visible
+ * user code is the popup-blocked fallback, not the primary path.
+ *
+ * The runtime credential never reaches the browser — bind/poll persists
+ * it server-side and strips it from the response.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Cloud, CloudOff, Copy, ExternalLink, Loader2, AlertCircle, CheckCircle2, Unplug, } from 'lucide-react';
+import { ComponentRegistry } from '@object-ui/core';
+const BASE = '/api/v1/cloud-connection';
+async function getJson(url, init) {
+    const resp = await fetch(url, {
+        credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json' },
+        ...init,
+    });
+    const body = await resp.json().catch(() => ({}));
+    if (!resp.ok && body?.success !== true) {
+        const msg = body?.error?.message ?? body?.error?.code ?? body?.error ?? `HTTP ${resp.status}`;
+        throw new Error(typeof msg === 'string' ? msg : JSON.stringify(msg));
+    }
+    return body;
+}
+export function CloudConnectionPanel() {
+    const [phase, setPhase] = useState({ kind: 'loading' });
+    const [busy, setBusy] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const pollTimer = useRef(null);
+    const stopPolling = useCallback(() => {
+        if (pollTimer.current) {
+            clearTimeout(pollTimer.current);
+            pollTimer.current = null;
+        }
+    }, []);
+    const refreshStatus = useCallback(async () => {
+        try {
+            const body = await getJson(`${BASE}/status`);
+            const data = body?.data ?? { environmentId: null, bound: false, connection: null };
+            setPhase(data.bound ? { kind: 'bound', status: data } : { kind: 'unbound' });
+        }
+        catch (err) {
+            setPhase({ kind: 'error', message: err?.message ?? String(err) });
+        }
+    }, []);
+    useEffect(() => {
+        void refreshStatus();
+        return stopPolling;
+    }, [refreshStatus, stopPolling]);
+    const poll = useCallback((code, startedAt) => {
+        const intervalMs = Math.max(code.interval, 2) * 1000;
+        const tick = async () => {
+            if (Date.now() - startedAt > code.expires_in * 1000) {
+                setPhase({ kind: 'error', message: 'The request expired before it was approved. Start again.' });
+                return;
+            }
+            try {
+                const body = await getJson(`${BASE}/bind/poll`, {
+                    method: 'POST',
+                    body: JSON.stringify({ device_code: code.device_code }),
+                });
+                if (body?.data?.pending) {
+                    pollTimer.current = setTimeout(tick, intervalMs);
+                    return;
+                }
+                if (body?.data?.bound || body?.success) {
+                    await refreshStatus();
+                    return;
+                }
+                setPhase({ kind: 'error', message: body?.error?.code ?? 'Binding failed.' });
+            }
+            catch (err) {
+                setPhase({ kind: 'error', message: err?.message ?? String(err) });
+            }
+        };
+        pollTimer.current = setTimeout(tick, intervalMs);
+    }, [refreshStatus]);
+    const connect = useCallback(async () => {
+        setBusy(true);
+        try {
+            const body = await getJson(`${BASE}/bind/start`, { method: 'POST', body: '{}' });
+            const code = body?.data;
+            if (!code?.device_code || !code?.user_code)
+                throw new Error('Device code request failed.');
+            // Auto-open the approval page — the GitHub-login moment. Still within
+            // the click's transient activation, so popup blockers generally allow
+            // it; the code display below is the blocked-popup fallback.
+            const link = code.verification_uri_complete ?? code.verification_uri;
+            let popupOpened = false;
+            if (link) {
+                try {
+                    popupOpened = Boolean(window.open(link, '_blank', 'noopener,width=520,height=720'));
+                }
+                catch { /* blocked — fallback UI below */ }
+            }
+            setPhase({ kind: 'waiting', code, popupOpened });
+            poll(code, Date.now());
+        }
+        catch (err) {
+            setPhase({ kind: 'error', message: err?.message ?? String(err) });
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [poll]);
+    const disconnect = useCallback(async () => {
+        setBusy(true);
+        try {
+            await getJson(`${BASE}/unbind`, { method: 'POST', body: '{}' });
+            await refreshStatus();
+        }
+        catch (err) {
+            setPhase({ kind: 'error', message: err?.message ?? String(err) });
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [refreshStatus]);
+    const copyCode = useCallback(async (code) => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch { /* clipboard unavailable — user can select the text */ }
+    }, []);
+    if (phase.kind === 'loading') {
+        return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border p-6 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }), " Checking connection\u2026"] }));
+    }
+    if (phase.kind === 'error') {
+        return (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-destructive/40 bg-destructive/5 p-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive", children: [_jsx(AlertCircle, { className: "h-4 w-4", "aria-hidden": "true" }), " ", phase.message] }), _jsx("button", { type: "button", className: "self-start rounded-md border px-3 py-1.5 text-sm hover:bg-accent", onClick: () => { stopPolling(); void refreshStatus(); }, children: "Try again" })] }));
+    }
+    if (phase.kind === 'waiting') {
+        const link = phase.code.verification_uri_complete ?? phase.code.verification_uri;
+        return (_jsxs("div", { className: "flex flex-col gap-4 rounded-lg border p-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }), phase.popupOpened
+                            ? 'Approve the connection in the window that just opened — this page updates by itself.'
+                            : 'Waiting for approval in the cloud console…'] }), !phase.popupOpened && link ? (_jsxs("a", { className: "inline-flex items-center gap-1.5 self-start rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90", href: link, target: "_blank", rel: "noreferrer", children: ["Open the approval page ", _jsx(ExternalLink, { className: "h-3.5 w-3.5", "aria-hidden": "true" })] })) : null, _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("code", { className: "rounded-md bg-muted px-4 py-2 text-2xl font-semibold tracking-[0.25em]", children: phase.code.user_code }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm hover:bg-accent", onClick: () => void copyCode(phase.code.user_code), children: [_jsx(Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), " ", copied ? 'Copied' : 'Copy'] })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["The code is pre-filled on the approval page", phase.popupOpened && link ? (_jsxs(_Fragment, { children: [' ', "\u2014 if the window did not appear,", ' ', _jsxs("a", { className: "inline-flex items-center gap-1 text-primary underline-offset-2 hover:underline", href: link, target: "_blank", rel: "noreferrer", children: ["open it here ", _jsx(ExternalLink, { className: "h-3 w-3", "aria-hidden": "true" })] }), "."] })) : '.'] }), _jsx("button", { type: "button", className: "self-start rounded-md border px-3 py-1.5 text-sm hover:bg-accent", onClick: () => { stopPolling(); void refreshStatus(); }, children: "Cancel" })] }));
+    }
+    if (phase.kind === 'bound') {
+        const conn = phase.status.connection ?? {};
+        const runtimeId = conn.runtime_id ?? phase.status.runtimeId;
+        return (_jsxs("div", { className: "flex flex-col gap-4 rounded-lg border p-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-5 w-5 text-emerald-600", "aria-hidden": "true" }), _jsx("span", { className: "font-medium", children: "Connected to ObjectStack Cloud" })] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-sm", children: [conn.name ? (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Runtime" }), _jsx("dd", { children: conn.name })] })) : null, conn.organization_id ? (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Organization" }), _jsx("dd", { className: "font-mono", children: conn.organization_id })] })) : null, conn.account_email ? (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Approved by" }), _jsx("dd", { children: conn.account_email })] })) : null, runtimeId ? (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Runtime ID" }), _jsx("dd", { className: "font-mono text-xs", children: runtimeId })] })) : null, phase.status.environmentId ? (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Environment" }), _jsx("dd", { className: "font-mono", children: phase.status.environmentId })] })) : null, conn.bound_at ? (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Since" }), _jsx("dd", { children: new Date(conn.bound_at).toLocaleString() })] })) : null] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Your organization's private packages now appear in the Marketplace under \u201CYour organization\u201D." }), _jsxs("button", { type: "button", disabled: busy, className: "inline-flex items-center gap-1.5 self-start rounded-md border border-destructive/40 px-3 py-1.5 text-sm text-destructive hover:bg-destructive/5 disabled:opacity-50", onClick: () => void disconnect(), children: [_jsx(Unplug, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), " Disconnect"] })] }));
+    }
+    // unbound — zero input: no environment id, nothing to paste anywhere.
+    return (_jsxs("div", { className: "flex flex-col gap-4 rounded-lg border p-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CloudOff, { className: "h-5 w-5 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "font-medium", children: "Not connected" })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Connect this runtime to an ObjectStack control plane to browse your organization's private packages and install them here. Approval is a single click in your cloud account \u2014 no ids or credentials are typed into this page." }), _jsxs("button", { type: "button", disabled: busy, className: "inline-flex items-center gap-1.5 self-start rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", onClick: () => void connect(), children: [busy ? _jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : _jsx(Cloud, { className: "h-4 w-4", "aria-hidden": "true" }), "Connect"] })] }));
+}
+// SDUI registration: page metadata (shipped by @objectstack/cloud-connection)
+// references this widget by type. The renderer passes the component node as
+// `schema`; the panel needs no properties today.
+ComponentRegistry.register('cloud-connection:panel', () => _jsx(CloudConnectionPanel, {}), {
+    namespace: 'app-shell',
+    label: 'Cloud Connection Panel',
+    category: 'plugin',
+    inputs: [],
+});

package/dist/console/home/AppCard.d.ts

@@ -11,5 +11,5 @@ interface AppCardProps {
     isFavorite: boolean;
     index?: number;
 }
-export declare function AppCard({ app, onClick, isFavorite, index }: AppCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppCard({ app, onClick, isFavorite, index }: AppCardProps): import("react").JSX.Element;
 export {};

package/dist/console/home/AppCard.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Star, StarOff, ArrowUpRight } from 'lucide-react';
 import { Card, CardContent, Button, Badge } from '@object-ui/components';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
-import { resolveI18nLabel } from '../../utils';
+import { resolveI18nLabel, appRouteSegment } from '../../utils';
 import { useFavorites } from '../../hooks/useFavorites';
 import { getIcon } from '../../utils/getIcon';
 import { cn } from '@object-ui/components';
@@ -36,25 +36,19 @@ export function AppCard({ app, onClick, isFavorite, index = 0 }) {
     const Icon = getIcon(app.icon);
     const label = appLabel({ name: app.name, label: resolveI18nLabel(app.label, t) });
     const description = appDescription({ name: app.name, description: resolveI18nLabel(app.description, t) });
-    const primaryColor = app.branding?.primaryColor;
     const accent = ACCENTS[(hashStr(app.name) + index) % ACCENTS.length];
     const handleToggleFavorite = (e) => {
         e.stopPropagation();
         toggleFavorite({
             id: `app:${app.name}`,
             label,
-            href: `/apps/${app.name}`,
+            // ADR-0048 — link to the canonical package-id route segment, not the
+            // app name, so the favorite opens `/apps/<packageId>` like the nav does.
+            href: `/apps/${appRouteSegment(app) ?? app.name}`,
             type: 'object',
         });
     };
-    return (_jsxs(Card, { role: "button", tabIndex: 0, "aria-label": label, className: cn('group relative cursor-pointer overflow-hidden border border-border/70 bg-card/80 backdrop-blur-sm', 'transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-lg', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'motion-reduce:transition-none motion-reduce:hover:transform-none', !primaryColor && accent.ring), onClick: onClick, onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick();
-            }
-        }, "data-testid": `app-card-${app.name}`, style: primaryColor ? { borderColor: undefined } : undefined, children: [_jsx("div", { "aria-hidden": true, className: cn('absolute inset-x-0 top-0 h-1', primaryColor ? '' : accent.solid), style: primaryColor ? { backgroundColor: primaryColor } : undefined }), !primaryColor && (_jsx("div", { "aria-hidden": true, className: cn('absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100', accent.from, accent.to) })), _jsxs(CardContent, { className: "relative p-5", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity", onClick: handleToggleFavorite, "aria-label": isFavorite
+    return (_jsxs(Card, { className: cn('group relative overflow-hidden border border-border/70 bg-card/80 backdrop-blur-sm', 'transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.985] active:-translate-y-0', 'motion-reduce:transition-none motion-reduce:hover:transform-none', accent.ring), "data-testid": `app-card-${app.name}`, children: [_jsx("button", { type: "button", "aria-label": label, className: "absolute inset-0 z-10 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", onClick: onClick, "data-testid": `app-card-open-${app.name}` }), _jsx("div", { "aria-hidden": true, className: cn('absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100', accent.from, accent.to) }), _jsxs(CardContent, { className: "relative flex h-full flex-col p-5", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-2 right-2 z-20 h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100", onClick: handleToggleFavorite, "aria-label": isFavorite
                             ? t('common.removeFromFavorites', { defaultValue: 'Remove from favorites' }) + ` — ${label}`
-                            : t('common.addToFavorites', { defaultValue: 'Add to favorites' }) + ` — ${label}`, "aria-pressed": isFavorite, "data-testid": `favorite-btn-${app.name}`, children: isFavorite ? (_jsx(Star, { className: "h-4 w-4 fill-amber-400 text-amber-400" })) : (_jsx(StarOff, { className: "h-4 w-4" })) }), _jsx("div", { className: cn('inline-flex h-14 w-14 items-center justify-center rounded-xl mb-4 ring-1 ring-inset', primaryColor ? '' : cn('bg-gradient-to-br', accent.from, accent.to, 'ring-border/40')), style: primaryColor
-                            ? { backgroundColor: `${primaryColor}1f`, boxShadow: `inset 0 0 0 1px ${primaryColor}33` }
-                            : undefined, children: _jsx(Icon, { className: cn('h-7 w-7', primaryColor ? '' : accent.text), style: primaryColor ? { color: primaryColor } : undefined }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-base sm:text-lg leading-tight truncate", children: label }), app.isDefault && (_jsx(Badge, { variant: "secondary", className: "shrink-0 text-[10px] px-1.5 py-0", children: t('home.appCard.default', { defaultValue: 'Default' }) }))] }), _jsx("p", { className: cn('text-sm text-muted-foreground mt-1.5 line-clamp-2 min-h-[2.5rem]', !description && 'italic'), children: description || t('home.appCard.noDescription', { defaultValue: 'No description' }) })] }), _jsx("div", { className: "mt-4 flex items-center justify-between text-xs font-medium", children: _jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground transition-colors group-hover:text-foreground", children: [t('home.open', { defaultValue: 'Open' }), _jsx(ArrowUpRight, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" })] }) })] })] }));
+                            : t('common.addToFavorites', { defaultValue: 'Add to favorites' }) + ` — ${label}`, "aria-pressed": isFavorite, "data-testid": `favorite-btn-${app.name}`, children: isFavorite ? (_jsx(Star, { className: "h-4 w-4 fill-amber-400 text-amber-400" })) : (_jsx(StarOff, { className: "h-4 w-4" })) }), _jsx("div", { className: cn('inline-flex h-14 w-14 items-center justify-center rounded-2xl mb-4 ring-1 ring-inset', 'bg-gradient-to-br ring-border/40', accent.from, accent.to), children: _jsx(Icon, { className: cn('h-7 w-7', accent.text) }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-base sm:text-lg leading-tight truncate", children: label }), app.isDefault && (_jsx(Badge, { variant: "secondary", className: "shrink-0 text-[10px] px-1.5 py-0", children: t('home.appCard.default', { defaultValue: 'Default' }) }))] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1.5 line-clamp-2 min-h-[2.5rem]", children: description || t('home.appCard.noDescription', { defaultValue: 'No description' }) })] }), _jsx("div", { className: "mt-auto pt-4 flex items-center justify-between text-xs font-medium", children: _jsxs("span", { className: "inline-flex items-center gap-1 text-muted-foreground transition-colors group-hover:text-foreground", children: [t('home.open', { defaultValue: 'Open' }), _jsx(ArrowUpRight, { className: "h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" })] }) })] })] }));
 }

package/dist/console/home/HomeAppsStrip.d.ts

@@ -0,0 +1,8 @@
+import type { FavoriteItem } from '../../hooks/useFavorites';
+export declare function HomeAppsStrip({ apps, favorites, onOpen, onBrowseMarketplace, isAdmin, }: {
+    apps: any[];
+    favorites: FavoriteItem[];
+    onOpen: (app: any) => void;
+    onBrowseMarketplace: () => void;
+    isAdmin: boolean;
+}): import("react").JSX.Element;

package/dist/console/home/HomeAppsStrip.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * HomeAppsStrip
+ *
+ * iOS-springboard-style app launcher for Home: vibrant gradient squircle
+ * icons with the name beneath. Business users live in a handful of apps and
+ * switch via the top-bar AppSwitcher / ⌘K — so Home shows apps as recognizable
+ * icons, not a wall of marketing cards.
+ *
+ * Scales from a few apps to hundreds: a capped grid with a "+N more / Show all"
+ * toggle keeps the fold stable no matter how many apps exist. Favorites sort
+ * first.
+ *
+ * @module
+ */
+import { useMemo, useState } from 'react';
+import { LayoutGrid, Store, Star } from 'lucide-react';
+import { Button, cn } from '@object-ui/components';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+import { resolveI18nLabel } from '../../utils';
+import { getIcon } from '../../utils/getIcon';
+const COMPACT_LIMIT = 19;
+// iOS-springboard icon tints: a vibrant gradient per app, assigned
+// deterministically by name so an app keeps its colour across sessions.
+// (Literal class strings so Tailwind's source scan emits them.)
+const ICON_GRADIENTS = [
+    'from-blue-500 to-indigo-600',
+    'from-violet-500 to-purple-600',
+    'from-pink-500 to-rose-600',
+    'from-amber-400 to-orange-500',
+    'from-emerald-500 to-teal-600',
+    'from-sky-500 to-cyan-600',
+    'from-fuchsia-500 to-pink-600',
+    'from-orange-500 to-red-600',
+    'from-indigo-500 to-blue-600',
+    'from-teal-500 to-green-600',
+];
+// Soft top-highlight + drop shadow → iOS icon depth/gloss.
+const ICON_GLOSS = 'shadow-[0_4px_10px_-2px_rgb(0_0_0/0.25),inset_0_1px_0_0_rgb(255_255_255/0.45)]';
+function hashStr(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) | 0;
+    return Math.abs(h);
+}
+export function HomeAppsStrip({ apps, favorites, onOpen, onBrowseMarketplace, isAdmin, }) {
+    const { t } = useObjectTranslation();
+    const { appLabel } = useObjectLabel();
+    const [showAll, setShowAll] = useState(false);
+    const favNames = useMemo(() => new Set(favorites.filter((f) => f.id.startsWith('app:')).map((f) => f.id.slice(4))), [favorites]);
+    const ordered = useMemo(() => [...apps].sort((a, b) => (favNames.has(b.name) ? 1 : 0) - (favNames.has(a.name) ? 1 : 0)), [apps, favNames]);
+    const overflow = ordered.length - COMPACT_LIMIT;
+    const visible = showAll ? ordered : ordered.slice(0, COMPACT_LIMIT);
+    return (_jsxs("section", { className: "mb-6", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2.5", children: [_jsx("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-xl border border-border bg-muted text-muted-foreground", children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("h2", { className: "text-base font-semibold tracking-tight", children: t('home.yourApps', { defaultValue: 'Your apps' }) }), _jsx("span", { className: "text-sm text-muted-foreground", children: ordered.length }), isAdmin && (_jsxs(Button, { variant: "ghost", size: "sm", className: "ml-auto h-8 text-muted-foreground", onClick: onBrowseMarketplace, "data-testid": "browse-marketplace-btn", children: [_jsx(Store, { className: "mr-1.5 h-4 w-4" }), t('home.browseMarketplace', { defaultValue: 'Browse App Marketplace' })] }))] }), _jsxs("div", { className: "grid grid-cols-4 gap-1 sm:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10", children: [visible.map((app) => {
+                        const Icon = getIcon(app.icon);
+                        const label = appLabel({ name: app.name, label: resolveI18nLabel(app.label, t) });
+                        const fav = favNames.has(app.name);
+                        const grad = ICON_GRADIENTS[hashStr(app.name) % ICON_GRADIENTS.length];
+                        return (_jsxs("button", { type: "button", onClick: () => onOpen(app), className: "group relative flex flex-col items-center gap-2 rounded-xl p-2.5 text-center transition hover:bg-muted/40 active:scale-[0.96]", "data-testid": `app-tile-${app.name}`, children: [_jsxs("span", { className: cn('relative inline-flex h-12 w-12 items-center justify-center rounded-[13px]', 'bg-gradient-to-br text-white transition-transform group-hover:scale-105', ICON_GLOSS, grad), children: [_jsx(Icon, { className: "h-6 w-6" }), fav && (_jsx("span", { className: "absolute -right-1 -top-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-amber-400 ring-2 ring-background", children: _jsx(Star, { className: "h-2.5 w-2.5 fill-white text-white" }) }))] }), _jsx("span", { className: "w-full truncate text-xs font-medium", children: label })] }, app.name));
+                    }), !showAll && overflow > 0 && (_jsxs("button", { type: "button", onClick: () => setShowAll(true), className: "group flex flex-col items-center gap-2 rounded-xl p-2.5 text-center transition hover:bg-muted/40 active:scale-[0.96]", "data-testid": "apps-show-all", children: [_jsxs("span", { className: "inline-flex h-12 w-12 items-center justify-center rounded-[13px] border border-dashed border-border text-sm font-medium text-muted-foreground transition-colors group-hover:border-foreground/30 group-hover:text-foreground", children: ["+", overflow] }), _jsx("span", { className: "w-full truncate text-xs text-muted-foreground", children: t('home.showMoreApps', { defaultValue: 'More' }) })] }))] }), showAll && overflow > 0 && (_jsx("button", { type: "button", onClick: () => setShowAll(false), className: "mt-2.5 text-xs text-primary hover:underline", children: t('home.showLess', { defaultValue: 'Show less' }) }))] }));
+}

package/dist/console/home/HomeLayout.d.ts

@@ -16,5 +16,5 @@ interface HomeLayoutProps {
      */
     userId?: string;
 }
-export declare function HomeLayout({ children, userId }: HomeLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function HomeLayout({ children, userId }: HomeLayoutProps): React.JSX.Element;
 export {};

package/dist/console/home/HomeLayout.js

@@ -12,12 +12,14 @@ import { useEffect } from 'react';
 import { useNavigationContext } from '../../context/NavigationContext';
 import { AppHeader } from '../../layout/AppHeader';
 import { useDiscovery } from '@object-ui/react';
+import { useObjectTranslation } from '@object-ui/i18n';
 // Lightweight FAB stub — the heavy chat chunk graph only downloads on
 // first hover/click. See ../../layout/ConsoleChatbotFab.tsx.
 import { ConsoleChatbotFab } from '../../layout/ConsoleChatbotFab';
 export function HomeLayout({ children, userId }) {
     const { setContext } = useNavigationContext();
     const { isAiEnabled } = useDiscovery();
+    const { t } = useObjectTranslation();
     // Render the chatbot whenever AI is reachable. If the developer has explicitly
     // configured `VITE_AI_BASE_URL`, trust that opt-in even when discovery
     // reports AI as disabled (e.g. framework started without `--preset full`).
@@ -26,5 +28,5 @@ export function HomeLayout({ children, userId }) {
     useEffect(() => {
         setContext('home');
     }, [setContext]);
-    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "home-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "home" }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto pb-20 sm:pb-0", children: children }), showChatbot && _jsx(ConsoleChatbotFab, { appLabel: "Workspace", objects: [], userId: userId })] }));
+    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "home-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "home" }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto pb-20 sm:pb-0", children: children }), showChatbot && _jsx(ConsoleChatbotFab, { appLabel: t('workspace.default', { defaultValue: 'Workspace' }), objects: [], userId: userId })] }));
 }

package/dist/console/home/HomePage.d.ts

@@ -9,10 +9,9 @@
  * - Quick actions for creating apps, importing data, etc.
  * - Recent apps section (from useRecentItems)
  * - Starred/Favorite apps section (from useFavorites)
- * - Empty state guidance for new users
  * - Responsive grid layout
  * - i18n support
  *
  * @module
  */
-export declare function HomePage(): import("react/jsx-runtime").JSX.Element;
+export declare function HomePage(): import("react").JSX.Element;

package/dist/console/home/HomePage.js

@@ -10,24 +10,72 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Quick actions for creating apps, importing data, etc.
  * - Recent apps section (from useRecentItems)
  * - Starred/Favorite apps section (from useFavorites)
- * - Empty state guidance for new users
  * - Responsive grid layout
  * - i18n support
  *
  * @module
  */
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMetadata } from '../../providers/MetadataProvider';
 import { useRecentItems } from '../../hooks/useRecentItems';
 import { useFavorites } from '../../hooks/useFavorites';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { useAuth, useIsWorkspaceAdmin } from '@object-ui/auth';
-import { AppCard } from './AppCard';
-import { RecentApps } from './RecentApps';
-import { StarredApps } from './StarredApps';
+import { useAgents, isBuildAgent, isAskAgent } from '@object-ui/plugin-chatbot';
+import { HomeAppsStrip } from './HomeAppsStrip';
+import { HomeActionCenter, HomeContinue, HomeActivity } from './HomeRail';
+import { useHomeInbox } from '../../hooks/useHomeInbox';
+import { appRouteSegment } from '../../utils';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
-import { Plus, Settings, Sparkles, Star, Clock, ArrowDown, Store } from 'lucide-react';
+import { Sparkles, ShieldAlert, X, UploadCloud, MessageSquareText } from 'lucide-react';
+import { useMetadataClient } from '../../views/metadata-admin/useMetadata';
+import { usePublishAllDrafts } from '../../preview/usePublishAllDrafts';
+/** Resolve the AI service base, mirroring AiChatPage/ConsoleFloatingChatbot. */
+function resolveAiApiBase() {
+    const env = import.meta.env ?? {};
+    const fromEnv = env.VITE_AI_BASE_URL;
+    if (fromEnv)
+        return fromEnv.replace(/\/$/, '');
+    const serverUrl = env.VITE_SERVER_URL ?? '';
+    return `${serverUrl.replace(/\/$/, '')}/api/v1/ai`;
+}
+/**
+ * Which AI home CTAs to surface, driven by the live agent catalog (the single
+ * source of truth) — gated PER agent, because the community edition can be in
+ * any of three states:
+ *  - `askAvailable` — a data/query agent (`ask`/`data_chat`) is deployed → "Ask AI".
+ *  - `buildAvailable` — a build/authoring agent is deployed → "Build with AI".
+ *    That's a cloud / AI-Studio feature, ABSENT on open-source builds.
+ *  - `aiEnabled` — any agent at all (AI is on here in some form).
+ * All false while the catalog loads or when AI isn't enabled, so nothing
+ * flashes and no AI CTA appears where there's no agent to back it.
+ */
+function useHomeAiAvailability() {
+    const apiBase = useMemo(() => resolveAiApiBase(), []);
+    const { agents } = useAgents({ apiBase });
+    return {
+        aiEnabled: agents.length > 0,
+        askAvailable: agents.some((a) => isAskAgent(a.name)),
+        buildAvailable: agents.some((a) => isBuildAgent(a.name)),
+    };
+}
+/**
+ * Home AI call-to-action(s). "Build with AI" only when a build agent is
+ * deployed; "Ask AI" only when a data/query agent is deployed. Renders nothing
+ * when neither exists (AI off, or only custom agents — those are reachable via
+ * the assistant launcher / FAB). `layout="stack"` is used by the empty-state;
+ * the hero uses the default inline row. Availability is passed in so the host
+ * fetches the catalog once.
+ */
+function HomeAiActions({ askAvailable, buildAvailable, navigate, t, layout = 'row', }) {
+    if (!askAvailable && !buildAvailable)
+        return null;
+    const container = layout === 'stack'
+        ? 'mt-6 flex flex-col sm:flex-row items-center gap-3'
+        : 'flex shrink-0 items-center gap-2';
+    return (_jsxs("div", { className: container, children: [buildAvailable && (_jsxs(Button, { onClick: () => navigate('/ai/build'), "data-testid": "home-build-with-ai", children: [_jsx(Sparkles, { className: "mr-2 h-4 w-4" }), t('home.buildWithAI', { defaultValue: 'Build with AI' })] })), askAvailable && (_jsxs(Button, { variant: buildAvailable ? 'outline' : 'default', onClick: () => navigate('/ai/ask'), "data-testid": "home-ask-ai", children: [_jsx(MessageSquareText, { className: "mr-2 h-4 w-4" }), t('home.askAI', { defaultValue: 'Ask AI' })] }))] }));
+}
 function pickGreetingKey(hour) {
     if (hour < 5)
         return 'home.greetingNight';
@@ -40,14 +88,82 @@ function pickGreetingKey(hour) {
     return 'home.greetingNight';
 }
 /**
- * Friendly onboarding hint shown above the All Apps grid when the user has
- * no starred or recent items yet. Replaces per-section empty states (which
- * would flicker as the backend adapter hydrates).
+ * Pending-drafts banner — closes the AI magic-moment loop. After the metadata
+ * assistant drafts objects/views/apps (ADR-0033 draft-gated authoring), nothing
+ * is live until the human publishes. Without this, a user who just had AI build
+ * their whole system landed back on an empty-looking home with no trace of it
+ * and no path to publish. This surfaces the pending drafts and routes to the
+ * designer to review + publish. Disappears automatically once published
+ * (listDrafts → 0).
+ */
+function PendingDraftsBanner({ t }) {
+    const client = useMetadataClient();
+    const [drafts, setDrafts] = useState([]);
+    // Shared one-click publish (also used by the ADR-0037 draft-preview bar):
+    // packages via the probed publish-drafts path, orphans by reference, health
+    // surfaced in toasts. See usePublishAllDrafts for the full story.
+    const { publishAll, publishing } = usePublishAllDrafts(t);
+    const count = drafts.length;
+    useEffect(() => {
+        let cancelled = false;
+        Promise.resolve(client.listDrafts?.({}))
+            .then((rows) => {
+            if (cancelled || !Array.isArray(rows))
+                return;
+            setDrafts(rows
+                .filter((d) => d && typeof d.type === 'string' && typeof d.name === 'string')
+                .map((d) => ({ type: d.type, name: d.name })));
+        })
+            .catch(() => { });
+        return () => { cancelled = true; };
+    }, [client]);
+    const publish = async () => {
+        const result = await publishAll();
+        if (!result.ok)
+            return;
+        setDrafts([]);
+        // Surface the now-live app — reload so the populated home shows it.
+        setTimeout(() => { try {
+            window.location.reload();
+        }
+        catch { /* ignore */ } }, 700);
+    };
+    if (count <= 0)
+        return null;
+    return (_jsx("div", { className: "px-4 sm:px-6 lg:px-8 pt-4", children: _jsx("div", { className: "max-w-7xl mx-auto", children: _jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-indigo-300/60 dark:border-indigo-700/50 bg-indigo-50 dark:bg-indigo-950/30 px-4 py-3", children: [_jsx(UploadCloud, { className: "h-5 w-5 shrink-0 text-indigo-600 dark:text-indigo-400" }), _jsx("p", { className: "flex-1 min-w-0 text-sm text-indigo-900 dark:text-indigo-200", children: t('home.pendingDrafts.message', { count, defaultValue: 'You have {{count}} unpublished change(s) — publish to make them live.' }) }), _jsx(Button, { size: "sm", onClick: publish, disabled: publishing, "data-testid": "pending-drafts-publish", children: publishing
+                            ? t('home.pendingDrafts.publishing', { defaultValue: 'Publishing…' })
+                            : t('home.pendingDrafts.cta', { defaultValue: 'Publish' }) })] }) }) }));
+}
+/**
+ * Dismissible nudge to set a local recovery password — shown when the user
+ * signed in via SSO and has no local credential yet. We no longer force this
+ * before the first session (it walled off the magic moment); this gentle,
+ * one-time reminder preserves instance self-sufficiency without the friction.
  */
-function GettingStartedHint({ t }) {
-    return (_jsxs("section", { "data-testid": "home-getting-started", className: "relative overflow-hidden rounded-2xl border border-border/60 bg-card/70 backdrop-blur-sm p-6 sm:p-8", children: [_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-fuchsia-500/5" }), _jsxs("div", { className: "relative flex flex-col sm:flex-row sm:items-center gap-5", children: [_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsx("span", { className: "inline-flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 ring-1 ring-amber-500/20 text-amber-600 dark:text-amber-400", children: _jsx(Star, { className: "h-5 w-5" }) }), _jsx("span", { className: "inline-flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 ring-1 ring-emerald-500/20 text-emerald-600 dark:text-emerald-400", children: _jsx(Clock, { className: "h-5 w-5" }) })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: t('home.gettingStarted.title', { defaultValue: 'Make this home yours' }) }), _jsx("p", { className: "text-sm text-muted-foreground mt-1 max-w-xl", children: t('home.gettingStarted.description', {
-                                    defaultValue: 'Star an app to pin it here for one-click access. Anything you open will show up under Recently Accessed automatically.',
-                                }) })] }), _jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [_jsx("span", { children: t('home.gettingStarted.cta', { defaultValue: 'Browse all applications' }) }), _jsx(ArrowDown, { className: "h-3.5 w-3.5" })] })] })] }));
+function RecoveryPasswordReminder({ t }) {
+    const navigate = useNavigate();
+    const { hasLocalPassword } = useAuth();
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('os:recovery-pw-dismissed') === '1')
+            return;
+        let cancelled = false;
+        Promise.resolve(hasLocalPassword?.())
+            .then((has) => { if (!cancelled && has === false)
+            setShow(true); })
+            .catch(() => { });
+        return () => { cancelled = true; };
+    }, [hasLocalPassword]);
+    const dismiss = () => {
+        try {
+            localStorage.setItem('os:recovery-pw-dismissed', '1');
+        }
+        catch { /* ignore */ }
+        setShow(false);
+    };
+    if (!show)
+        return null;
+    return (_jsx("div", { className: "px-4 sm:px-6 lg:px-8 pt-4", children: _jsx("div", { className: "max-w-7xl mx-auto", children: _jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-amber-300/60 dark:border-amber-700/50 bg-amber-50 dark:bg-amber-950/30 px-4 py-3", children: [_jsx(ShieldAlert, { className: "h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400" }), _jsx("p", { className: "flex-1 min-w-0 text-sm text-amber-900 dark:text-amber-200", children: t('home.recoveryReminder.message', { defaultValue: 'Set a recovery password so you can still sign in if single sign-on is ever unavailable.' }) }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => navigate('/set-password'), "data-testid": "recovery-pw-set", children: t('home.recoveryReminder.cta', { defaultValue: 'Set password' }) }), _jsx("button", { type: "button", onClick: dismiss, "aria-label": t('home.recoveryReminder.dismiss', { defaultValue: 'Dismiss' }), className: "shrink-0 rounded-md p-1 text-amber-700/70 hover:text-amber-900 dark:text-amber-300/70 dark:hover:text-amber-100", children: _jsx(X, { className: "h-4 w-4" }) })] }) }) }));
 }
 export function HomePage() {
     const navigate = useNavigate();
@@ -57,22 +173,34 @@ export function HomePage() {
     const { favorites } = useFavorites();
     const { user } = useAuth();
     const isAdmin = useIsWorkspaceAdmin();
-    const activeApps = apps.filter((a) => a.active !== false);
+    const { pendingApprovalsCount, notifications, activities } = useHomeInbox();
+    // AI CTA gating, per agent: "Build with AI" only when a build agent is
+    // deployed (cloud / AI Studio); "Ask AI" only when a data agent is; neither
+    // when AI isn't enabled. Community builds typically land in the ask-only state.
+    const { askAvailable, buildAvailable } = useHomeAiAvailability();
+    const activeApps = apps.filter((a) => a.active !== false && a.hidden !== true);
     const recentApps = recentItems
         .filter(item => item.type === 'object' || item.type === 'dashboard' || item.type === 'page' || item.type === 'record')
         .slice(0, 6);
-    const starredApps = favorites
-        .filter(item => item.type === 'object' || item.type === 'dashboard' || item.type === 'page' || item.type === 'record')
-        .slice(0, 8);
     const greeting = useMemo(() => t(pickGreetingKey(new Date().getHours()), { defaultValue: 'Welcome' }), [t]);
     const displayName = (user?.name?.trim() || user?.email?.split('@')[0] || '').trim();
     if (loading) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center py-20", children: _jsx("div", { className: "text-muted-foreground", children: t('home.loading', { defaultValue: 'Loading workspace…' }) }) }));
     }
     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' })] }), 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: "flex flex-col flex-1", children: [_jsx(PendingDraftsBanner, { t: t }), _jsx(RecoveryPasswordReminder, { t: t }), _jsx("div", { className: "flex flex-1 items-center justify-center p-6", children: isAdmin ? (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('home.welcome', { defaultValue: 'Welcome to ObjectUI' }) }), _jsx(EmptyDescription, { children: buildAvailable
+                                    ? t('home.welcomeAdminDescription', {
+                                        defaultValue: 'Describe your business in one sentence — AI generates the objects, screens, APIs and agent tools. Or set things up yourself from the Administration menu on the left.',
+                                    })
+                                    : askAvailable
+                                        ? t('home.welcomeAdminDescriptionNoBuild', {
+                                            defaultValue: 'Set up your first application from the Administration menu on the left. Once you have data, the AI assistant can help you explore it.',
+                                        })
+                                        : t('home.welcomeAdminDescriptionNoAi', {
+                                            defaultValue: 'Set up your first application from the Administration menu on the left.',
+                                        }) }), _jsx(HomeAiActions, { askAvailable: askAvailable, buildAvailable: buildAvailable, navigate: navigate, t: t, layout: "stack" })] })) : (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: t('home.noAppsTitle', { defaultValue: 'No applications yet' }) }), _jsx(EmptyDescription, { children: t('home.noAppsDescription', {
+                                    defaultValue: 'There are no applications available to you yet. Please contact your workspace administrator.',
+                                }) })] })) })] }));
     }
-    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))) })] })] }) })] }));
+    return (_jsxs("div", { className: "relative min-h-full bg-background", children: [_jsx(PendingDraftsBanner, { t: t }), _jsx(RecoveryPasswordReminder, { t: t }), _jsx("div", { className: "px-4 sm:px-6 lg:px-8 pt-8 pb-16", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "mb-7 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("h1", { className: "text-2xl sm:text-3xl font-bold tracking-tight text-pretty", children: [_jsxs("span", { className: "text-foreground", children: [greeting, displayName ? ', ' : ''] }), displayName && _jsx("span", { className: "text-primary", children: displayName }), _jsx("span", { className: "text-foreground/40", children: "." })] }), _jsx("p", { className: "mt-1 text-sm sm:text-base text-muted-foreground", children: t('home.heroTagline', { defaultValue: 'Pick up where you left off, or explore something new.' }) })] }), _jsx(HomeAiActions, { askAvailable: askAvailable, buildAvailable: buildAvailable, navigate: navigate, t: t })] }), _jsx(HomeAppsStrip, { apps: activeApps, favorites: favorites, onOpen: (app) => navigate(`/apps/${appRouteSegment(app) ?? app.name}`), onBrowseMarketplace: () => navigate('/apps/setup/system/marketplace'), isAdmin: isAdmin }), _jsx("div", { className: "mb-6", children: _jsx(HomeActionCenter, { pendingApprovalsCount: pendingApprovalsCount, notifications: notifications, onOpenApprovals: () => navigate('/apps/setup/system/approvals'), onOpenNotification: (n) => navigate(n.actionUrl || '/apps/setup/sys_inbox_message?view=mine'), t: t }) }), _jsxs("div", { className: "grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_360px]", children: [_jsx(HomeContinue, { items: recentApps, onOpen: (href) => navigate(href), t: t }), _jsx(HomeActivity, { items: activities, onViewAll: () => navigate('/apps/setup/sys_activity'), t: t })] })] }) })] }));
 }

package/dist/console/home/HomeRail.d.ts

@@ -0,0 +1,22 @@
+import type { ActivityItem } from '../../layout/ActivityFeed';
+import type { HomeNotification } from '../../hooks/useHomeInbox';
+import type { RecentItem } from '../../hooks/useRecentItems';
+type TFn = (key: string, opts?: any) => string;
+export declare function HomeActionCenter({ pendingApprovalsCount, notifications, onOpenApprovals, onOpenNotification, t, }: {
+    pendingApprovalsCount: number;
+    notifications: HomeNotification[];
+    onOpenApprovals: () => void;
+    onOpenNotification: (n: HomeNotification) => void;
+    t: TFn;
+}): import("react").JSX.Element;
+export declare function HomeContinue({ items, onOpen, t }: {
+    items: RecentItem[];
+    onOpen: (href: string) => void;
+    t: TFn;
+}): import("react").JSX.Element;
+export declare function HomeActivity({ items, onViewAll, t }: {
+    items: ActivityItem[];
+    onViewAll: () => void;
+    t: TFn;
+}): import("react").JSX.Element;
+export {};