@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/layout/AppHeader.js

@@ -8,7 +8,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Variants:
  *   - `app`  (default when `appName` is present): sidebar trigger + AppSwitcher
  *              + breadcrumb path. Used by `ConsoleLayout` inside `/apps/:appName/*`.
- *   - `home` : no breadcrumb; displays the "ObjectStack" wordmark next to the
+ *   - `home` : no breadcrumb; displays the product wordmark (from
+ *              `getProductName()`, default "ObjectOS") next to the brand
  *              logo. Used by `/home`.
  *   - `orgs` : no breadcrumb; logo + "Organizations" title. Used by the
  *              `/organizations` landing page.
@@ -18,8 +19,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * @module
  */
 import { useLocation, useParams, Link, useNavigate } from 'react-router-dom';
-import { SidebarTrigger, Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, cn, } from '@object-ui/components';
-import { Search, HelpCircle, ChevronDown, Check, Lock, Settings, LogOut, User as UserIcon, Boxes, Bot, } from 'lucide-react';
+import { Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, cn, } from '@object-ui/components';
+import { Search, HelpCircle, ChevronDown, Check, Lock, LogOut, Boxes, Layers, Bot, User, BookOpen, ExternalLink, Keyboard, } from 'lucide-react';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useOffline } from '@object-ui/react';
 import { PresenceAvatars, useTenantPresence } from '@object-ui/collaboration';
@@ -32,8 +33,14 @@ import { useAdapter } from '../providers/AdapterProvider';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { useAuth, getUserInitials } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider';
+import { resolveI18nLabel, preferLocal, matchAppBySegment, appRouteSegment } from '../utils';
+import { getIcon } from '../utils/getIcon';
 import { useMobileViewSwitcher } from './MobileViewSwitcherContext';
 import { useNavigationContext } from '../context/NavigationContext';
+import { useCommandPalette } from '../context/CommandPaletteProvider';
+import { useUrlOverlay } from '../hooks/useUrlOverlay';
+import { getProductName } from '../runtime-config';
+import { LocalizedSidebarTrigger } from './LocalizedSidebarTrigger';
 function humanizeSlug(slug) {
     return slug.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
@@ -51,21 +58,85 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const params = useParams();
     const navigate = useNavigate();
     const { isOnline } = useOffline();
+    // Idempotent, direct open of the ⌘K command palette (ADR-0054 C1). Replaces a
+    // synthetic `⌘K` KeyboardEvent re-dispatch that did nothing under automation.
+    const { openCommandPalette } = useCommandPalette();
+    // Click-reachable entry for the keyboard-shortcuts dialog (was `?`-key only).
+    // Shares the `?shortcuts=1` URL param with KeyboardShortcutsDialog (C2/C3).
+    const { openOverlay: openShortcuts } = useUrlOverlay('shortcuts');
     const { user, signOut, isAuthEnabled, organizations, activeOrganization, isOrganizationsLoading, } = useAuth();
     const dataSource = useAdapter();
     const { t } = useObjectTranslation();
-    const { objectLabel, dashboardLabel, pageLabel, reportLabel, viewLabel } = useObjectLabel();
+    const { objectLabel, dashboardLabel, pageLabel, reportLabel, viewLabel, appLabel } = useObjectLabel();
     const { apps: metadataApps, dashboards: metadataDashboards, pages: metadataPages, reports: metadataReports } = useMetadata();
     const { currentAppName, recordTitle } = useNavigationContext();
     const mobileSwitcher = useMobileViewSwitcher();
+    /**
+     * Help menu — lazily-loaded `doc` metadata (ADR-0046) so the "?" menu can
+     * surface a contextual "This app's docs" entry. Fetched once on first menu
+     * open (names/labels only — `content` is omitted from the list response);
+     * `null` = not yet loaded, `[]` = loaded-but-empty.
+     */
+    const [helpDocs, setHelpDocs] = useState(null);
+    const loadHelpDocs = useCallback(async () => {
+        if (helpDocs !== null)
+            return; // fetch at most once per mount
+        try {
+            const client = dataSource?.getClient?.();
+            if (!client?.meta?.getItems) {
+                setHelpDocs([]);
+                return;
+            }
+            const result = await client.meta.getItems('doc');
+            const items = Array.isArray(result)
+                ? result
+                : Array.isArray(result?.items)
+                    ? result.items
+                    : Array.isArray(result?.value)
+                        ? result.value
+                        : [];
+            setHelpDocs(items
+                .map((it) => ({ name: it?.name, label: it?.label, _packageId: it?._packageId }))
+                .filter((d) => d.name));
+        }
+        catch {
+            // Soft-degrade: docs are an optional feature — a failed fetch just
+            // means the menu shows the static entries (All docs / Online docs).
+            setHelpDocs([]);
+        }
+    }, [helpDocs, dataSource]);
     const [apiActivities, setApiActivities] = useState(null);
-    /** M10.8: in-header notifications. Polled from sys_notification scoped to current user. */
+    /**
+     * In-header notifications (ADR-0030). Polled from `sys_inbox_message` (the L5
+     * in-app materialization, `mine` scope) joined with `sys_notification_receipt`
+     * for read-state — the bell no longer reads the re-modeled `sys_notification`
+     * L2 event (which carries no recipient/read columns).
+     */
     const [notifications, setNotifications] = useState([]);
     // Once the server returns 404 for these collections we stop retrying for
     // the lifetime of the page — they're optional features and re-requesting
     // on every navigation creates console noise + wasted round trips.
     const activityUnavailableRef = useRef(false);
     const notificationsUnavailableRef = useRef(false);
+    // Tracks whether the component is still mounted. Used by the pollers to
+    // decide whether to apply an in-flight fetch's result, independent of any
+    // single effect run's `cancelled` flag — so a fetch that outlives the
+    // effect run that started it (because deps settled mid-flight during
+    // bootstrap) still populates state instead of being silently dropped.
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        // Reset on (re)mount too, so StrictMode's mount→cleanup→mount cycle
+        // doesn't leave it latched false and silence the pollers.
+        mountedRef.current = true;
+        return () => { mountedRef.current = false; };
+    }, []);
+    // In-flight guards: during bootstrap the poller effects re-run several
+    // times as `dataSource` / `isApp` / `user.id` settle, and each run kicks
+    // an immediate fetch. Without these the same query fired 5× concurrently
+    // (nothing cached yet) and flooded the backend. They coalesce to one.
+    const notifInFlightRef = useRef(false);
+    const approvalsInFlightRef = useRef(false);
+    const activityInFlightRef = useRef(false);
     /** M11.C15: pending approvals count for the topbar shortcut. */
     const [pendingApprovalsCount, setPendingApprovalsCount] = useState(0);
     const approvalsUnavailableRef = useRef(false);
@@ -84,6 +155,12 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
         // wired — see ROADMAP for the realtime plan.
         if (activityUnavailableRef.current)
             return;
+        // In-flight dedupe: this callback's identity changes as dataSource/isApp
+        // settle during bootstrap, re-firing the mount effect below; coalesce the
+        // immediate fetches into one instead of N (sys_activity fired 3×+).
+        if (activityInFlightRef.current)
+            return;
+        activityInFlightRef.current = true;
         try {
             const activityResult = await dataSource
                 .find('sys_activity', { $orderby: { timestamp: 'desc' }, $top: 20 })
@@ -99,25 +176,31 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
             }
         }
         catch { /* fallback below */ }
+        finally {
+            activityInFlightRef.current = false;
+        }
     }, [dataSource, isApp]);
     useEffect(() => { fetchPresenceAndActivities(); }, [fetchPresenceAndActivities]);
     /**
-     * M10.8 + M11.B3: poll sys_notification for the signed-in user.
+     * Poll the signed-in user's in-app inbox (ADR-0030 L5).
+     *
+     * Two scoped reads, joined client-side:
+     *   - `sys_inbox_message` filtered by `user_id` (the `mine` materialization),
+     *     20 most-recent — the notification rows themselves.
+     *   - `sys_notification_receipt` filtered by `user_id` + `channel:'inbox'` —
+     *     the read-state spine. A message is unread until its event has a
+     *     `read`/`clicked`/`dismissed` receipt; the unread count drives the badge.
      *
-     * - Limited to the 20 most-recent entries; unread count drives the bell badge.
-     * - Adaptive interval: 10s while the tab is foregrounded (was 30s) so the
-     *   bell reflects mentions / assignments within seconds without requiring a
-     *   server-push transport.
-     * - Immediate refetch on `visibilitychange` when the user returns to the
-     *   tab, so a backgrounded tab catches up the moment it regains focus.
-     * - On transient errors, switches to exponential backoff (cap 2 min) and
-     *   resets on the first successful fetch.
-     * - Tolerates 404 so deployments without sys_notification degrade silently.
+     * - Adaptive interval: 10s while the tab is foregrounded so the bell reflects
+     *   mentions / assignments within seconds without a server-push transport.
+     * - Immediate refetch on `visibilitychange` when the user returns to the tab.
+     * - On transient errors, exponential backoff (cap 2 min), reset on success.
+     * - Tolerates 404 so deployments without the messaging pipeline degrade
+     *   silently.
      *
-     * Full server-push (SSE / WebSocket) is tracked separately as a M12
-     * enhancement; this adaptive poll already reduces perceived latency from
-     * ~15s (average half of the old 30s window) to ~5s and is sufficient for
-     * pilots up to ~50 concurrent users.
+     * Full server-push (SSE / WebSocket) is tracked separately; this adaptive
+     * poll keeps perceived latency ~5s and is sufficient for pilots up to ~50
+     * concurrent users.
      */
     useEffect(() => {
         if (!dataSource || !isApp || !user?.id)
@@ -131,17 +214,57 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
         const MAX_BACKOFF_MS = 120000;
         let backoffMs = ACTIVE_INTERVAL_MS;
         const isMissingResource = (err) => err?.httpStatus === 404 || err?.status === 404 || err?.code === 'object_not_found';
+        const READ_STATES = new Set(['read', 'clicked', 'dismissed']);
         const fetchOnce = async () => {
+            if (notifInFlightRef.current)
+                return;
+            notifInFlightRef.current = true;
             try {
-                const res = await dataSource.find('sys_notification', {
-                    $filter: { recipient_id: user.id },
-                    $orderby: { created_at: 'desc' },
-                    $top: 20,
-                });
-                if (cancelled)
+                const [inboxRes, receiptRes] = await Promise.all([
+                    dataSource.find('sys_inbox_message', {
+                        $filter: { user_id: user.id },
+                        $orderby: { created_at: 'desc' },
+                        $top: 20,
+                    }),
+                    // Read-state spine. Best-effort: if receipts are unavailable the
+                    // inbox still renders (everything shows unread) rather than erroring.
+                    dataSource.find('sys_notification_receipt', {
+                        $filter: { user_id: user.id, channel: 'inbox' },
+                        $top: 200,
+                    }).catch(() => ({ data: [] })),
+                ]);
+                if (!mountedRef.current)
                     return;
-                if (Array.isArray(res?.data))
-                    setNotifications(res.data);
+                const rows = Array.isArray(inboxRes?.data) ? inboxRes.data : [];
+                const receipts = Array.isArray(receiptRes?.data) ? receiptRes.data : [];
+                // notification_id → { id, state } (most-advanced receipt wins).
+                const receiptByNotif = new Map();
+                for (const r of receipts) {
+                    const nid = r?.notification_id != null ? String(r.notification_id) : '';
+                    if (!nid)
+                        continue;
+                    const prev = receiptByNotif.get(nid);
+                    // Prefer a read/clicked/dismissed receipt over a plain delivered one.
+                    if (!prev || (!READ_STATES.has(prev.state) && READ_STATES.has(r.state))) {
+                        receiptByNotif.set(nid, { id: String(r.id), state: String(r.state) });
+                    }
+                }
+                const merged = rows.map((m) => {
+                    const nid = m?.notification_id != null ? String(m.notification_id) : null;
+                    const rec = nid ? receiptByNotif.get(nid) : undefined;
+                    return {
+                        id: String(m.id),
+                        notification_id: nid,
+                        receipt_id: rec?.id ?? null,
+                        type: m.topic ?? 'notification',
+                        title: m.title ?? '',
+                        body: m.body_md ?? null,
+                        action_url: m.action_url ?? null,
+                        is_read: rec ? READ_STATES.has(rec.state) : false,
+                        created_at: m.created_at,
+                    };
+                });
+                setNotifications(merged);
                 backoffMs = ACTIVE_INTERVAL_MS;
             }
             catch (err) {
@@ -151,6 +274,9 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
                 }
                 backoffMs = Math.min(backoffMs * 2, MAX_BACKOFF_MS);
             }
+            finally {
+                notifInFlightRef.current = false;
+            }
         };
         const scheduleNext = () => {
             if (cancelled || notificationsUnavailableRef.current)
@@ -192,6 +318,13 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
      * Hits the framework's `/api/v1/approvals/requests?status=pending`
      * endpoint with the user's identities (id, email, role:<r>). Degrades
      * silently to zero on 404 (approvals plugin not installed).
+     *
+     * The endpoint accepts a comma-separated `approverId` and matches a
+     * request when ANY identity is a pending approver, so this issues ONE
+     * request per poll. (It previously looped one fetch per identity, firing
+     * N near-simultaneous calls every cycle — the dominant duplicate-request
+     * offender on the control plane. Requires framework with multi-approverId
+     * support; ship the framework + console SHA bumps together.)
      */
     useEffect(() => {
         if (!isApp || !user?.id)
@@ -213,27 +346,35 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
         let timer = null;
         const POLL_MS = 30000;
         const fetchOnce = async () => {
+            if (identities.length === 0)
+                return;
+            // In-flight dedupe: bootstrap re-runs this effect a few times; coalesce
+            // the immediate fetches into one instead of firing them concurrently.
+            if (approvalsInFlightRef.current)
+                return;
+            approvalsInFlightRef.current = true;
             try {
-                const seen = new Set();
-                if (identities.length === 0)
+                const qs = new URLSearchParams({ status: 'pending', approverId: identities.join(',') });
+                const res = await fetch(`${base}?${qs}`, { credentials: 'include' });
+                if (res.status === 404) {
+                    approvalsUnavailableRef.current = true;
                     return;
-                for (const id of identities) {
-                    const qs = new URLSearchParams({ status: 'pending', approverId: id });
-                    const res = await fetch(`${base}?${qs}`, { credentials: 'include' });
-                    if (res.status === 404) {
-                        approvalsUnavailableRef.current = true;
-                        return;
-                    }
-                    if (!res.ok)
-                        return;
-                    const payload = await res.json().catch(() => null);
-                    for (const row of (payload?.data || []))
-                        seen.add(row.id);
                 }
-                if (!cancelled)
+                if (!res.ok)
+                    return;
+                const payload = await res.json().catch(() => null);
+                const seen = new Set();
+                for (const row of (payload?.data || []))
+                    seen.add(row.id);
+                // Apply if still mounted (not gated on this run's `cancelled`, so the
+                // single in-flight fetch survives a bootstrap re-run mid-flight).
+                if (mountedRef.current)
                     setPendingApprovalsCount(seen.size);
             }
             catch { /* transient — keep last value */ }
+            finally {
+                approvalsInFlightRef.current = false;
+            }
         };
         const schedule = () => {
             if (cancelled || approvalsUnavailableRef.current)
@@ -245,41 +386,47 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
             clearTimeout(timer); };
     }, [isApp, user?.id]);
     const unreadCount = notifications.reduce((n, x) => n + (x.is_read ? 0 : 1), 0);
+    // Read-state lives in `sys_notification_receipt`, keyed
+    // (notification_id, user_id, channel) — ADR-0030. Marking read UPDATEs the
+    // existing `delivered` receipt to `read` (the inbox channel always writes one
+    // on materialization); we INSERT only as a fallback for the rare row whose
+    // receipt is missing. Rows without a `notification_id` (legacy/synthetic)
+    // can't be keyed, so they update optimistically but don't persist.
+    const writeReadReceipt = useCallback(async (n, now) => {
+        if (!dataSource || !n.notification_id)
+            return;
+        if (n.receipt_id) {
+            await dataSource.update('sys_notification_receipt', n.receipt_id, { state: 'read', at: now });
+        }
+        else {
+            await dataSource.create('sys_notification_receipt', {
+                notification_id: n.notification_id,
+                user_id: user?.id,
+                channel: 'inbox',
+                state: 'read',
+                at: now,
+                created_at: now,
+            });
+        }
+    }, [dataSource, user?.id]);
     const markNotificationRead = useCallback(async (id) => {
+        const target = notifications.find(n => n.id === id);
         setNotifications(prev => prev.map(n => n.id === id ? { ...n, is_read: true } : n));
-        if (!dataSource)
+        if (!target)
             return;
         try {
-            await dataSource.update('sys_notification', id, {
-                is_read: true,
-                read_at: new Date().toISOString(),
-            });
+            await writeReadReceipt(target, new Date().toISOString());
         }
         catch { /* best-effort */ }
-    }, [dataSource]);
+    }, [notifications, writeReadReceipt]);
     const markAllRead = useCallback(async () => {
         const unread = notifications.filter(n => !n.is_read);
         if (!unread.length)
             return;
         setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
-        if (!dataSource)
-            return;
         const now = new Date().toISOString();
-        const ids = unread.map(n => n.id);
-        // Prefer the bulk endpoint — one HTTP/auth/RLS round-trip instead of
-        // N parallel PATCHes, which previously caused noticeable hitching
-        // (Slack-style "mark all read" jank) on inboxes with 50+ unread.
-        // Fall back to the per-id loop on adapters that don't implement it.
-        const ds = dataSource;
-        if (typeof ds.bulkUpdate === 'function') {
-            try {
-                await ds.bulkUpdate('sys_notification', ids, { is_read: true, read_at: now });
-                return;
-            }
-            catch { /* fall through to per-id loop */ }
-        }
-        await Promise.all(unread.map(n => dataSource.update('sys_notification', n.id, { is_read: true, read_at: now }).catch(() => { })));
-    }, [dataSource, notifications]);
+        await Promise.all(unread.map(n => writeReadReceipt(n, now).catch(() => { })));
+    }, [notifications, writeReadReceipt]);
     const tenantPresence = useTenantPresence();
     const activeUsers = presenceUsers ?? (tenantPresence.length > 0 ? tenantPresence : EMPTY_PRESENCE_USERS);
     const activeActivities = activities ?? apiActivities ?? [];
@@ -293,7 +440,8 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const safeObjects = objects ?? [];
     // Filter objects to only those belonging to the current app via its navigation
     const appNameKey = activeAppName || currentAppName || appNameFromRoute;
-    const currentApp = (metadataApps || []).find((a) => a.name === appNameKey);
+    // ADR-0048 (A) — appNameKey may be a package id (route segment); match by it.
+    const currentApp = matchAppBySegment(metadataApps || [], appNameKey);
     const appNavObjectNames = new Set();
     const collectNavObjects = (items) => {
         for (const item of items || []) {
@@ -309,6 +457,13 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const appObjects = appNavObjectNames.size > 0
         ? safeObjects.filter((o) => appNavObjectNames.has(o.name))
         : safeObjects.filter((o) => !o.name.startsWith('sys_') && !o.name.startsWith('auth_'));
+    // Help menu — docs owned by the current app (matched by package id, the
+    // precise owner link; ADR-0048). Empty when not inside an app, the app
+    // ships no docs, or the lazy fetch hasn't run yet.
+    const currentAppPackageId = currentApp?._packageId;
+    const currentAppDocs = currentAppPackageId
+        ? (helpDocs ?? []).filter((d) => d._packageId === currentAppPackageId)
+        : [];
     const objectSiblings = appObjects.map((o) => ({
         label: objectLabel(o),
         href: `${baseHref}/${o.name}`,
@@ -319,7 +474,8 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
             extraSegments.push({ label: t('console.breadcrumb.dashboards'), href: baseHref });
             if (pathParts[3]) {
                 const dashboardName = pathParts[3];
-                const dashboardDef = (metadataDashboards || []).find((d) => d.name === dashboardName);
+                // ADR-0048 Phase 2 — prefer the current app's package (container-scoped).
+                const dashboardDef = preferLocal(metadataDashboards, dashboardName, currentApp?._packageId);
                 const fallback = dashboardDef?.label || humanizeSlug(dashboardName);
                 extraSegments.push({ label: dashboardLabel({ name: dashboardName, label: fallback }) });
             }
@@ -328,7 +484,7 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
             extraSegments.push({ label: t('console.breadcrumb.pages'), href: baseHref });
             if (pathParts[3]) {
                 const pageName = pathParts[3];
-                const pageDef = (metadataPages || []).find((p) => p.name === pageName);
+                const pageDef = preferLocal(metadataPages, pageName, currentApp?._packageId);
                 const fallback = pageDef?.label || humanizeSlug(pageName);
                 extraSegments.push({ label: pageLabel({ name: pageName, label: fallback }) });
             }
@@ -337,7 +493,7 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
             extraSegments.push({ label: t('console.breadcrumb.reports'), href: baseHref });
             if (pathParts[3]) {
                 const reportName = pathParts[3];
-                const reportDef = (metadataReports || []).find((r) => r.name === reportName);
+                const reportDef = preferLocal(metadataReports, reportName, currentApp?._packageId);
                 const fallback = reportDef?.label || humanizeSlug(reportName);
                 extraSegments.push({ label: reportLabel({ name: reportName, label: fallback }) });
             }
@@ -378,10 +534,10 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
         }
     }
     const lastSegmentLabel = extraSegments[extraSegments.length - 1]?.label || appName || '';
-    return (_jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [_jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [_jsx(Link, { to: "/home", className: cn("flex items-center justify-center h-7 w-7 shrink-0 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", isApp && "hidden sm:flex"), title: "ObjectStack", children: _jsx(Boxes, { className: "h-4 w-4" }) }), resolvedVariant === 'home' && (_jsx("span", { className: "hidden sm:inline ml-2 text-sm font-semibold tracking-tight", children: "ObjectStack" })), resolvedVariant === 'orgs' && (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx("span", { className: "text-sm font-medium text-foreground/80 px-1.5", children: t('organizations.title', { defaultValue: 'Organizations' }) })] })), isApp && (_jsxs(_Fragment, { children: [_jsx(SidebarTrigger, { className: "md:hidden shrink-0 ml-1", "aria-label": t('common.toggleSidebar') || 'Toggle sidebar' }), activeAppName && onAppChange ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:flex items-center", children: _jsx(PathSep, {}) }), _jsx("div", { className: "hidden sm:flex items-center", children: _jsx(AppSwitcher, { activeAppName: activeAppName, onAppChange: onAppChange }) })] })) : appName ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:flex items-center", children: _jsx(PathSep, {}) }), _jsx("span", { className: "hidden sm:inline text-sm font-medium text-foreground/80 px-1.5", children: appName })] })) : null, extraSegments.map((seg, i) => {
+    return (_jsxs("div", { className: "flex items-center justify-between w-full h-full", children: [_jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [_jsx(Link, { to: "/home", className: cn("flex items-center justify-center h-7 w-7 shrink-0 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", isApp && "hidden sm:flex"), title: getProductName(), children: _jsx(Layers, { className: "h-4 w-4" }) }), resolvedVariant === 'home' && (_jsx("span", { className: "hidden sm:inline ml-2 text-sm font-semibold tracking-tight", children: getProductName() })), resolvedVariant === 'orgs' && (_jsxs(_Fragment, { children: [_jsx(PathSep, {}), _jsx("span", { className: "text-sm font-medium text-foreground/80 px-1.5", children: t('organizations.title', { defaultValue: 'Organizations' }) })] })), isApp && (_jsxs(_Fragment, { children: [_jsx(LocalizedSidebarTrigger, { className: "lg:hidden shrink-0 ml-1", "aria-label": t('common.toggleSidebar', { defaultValue: 'Toggle sidebar' }) }), activeAppName && onAppChange ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:flex items-center", children: _jsx(PathSep, {}) }), _jsx("div", { className: "hidden sm:flex items-center", children: _jsx(AppSwitcher, { activeAppName: activeAppName, onAppChange: onAppChange }) })] })) : appName ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:flex items-center", children: _jsx(PathSep, {}) }), _jsx("span", { className: "hidden sm:inline text-sm font-medium text-foreground/80 px-1.5", children: appName })] })) : null, extraSegments.map((seg, i) => {
                                 const isLast = i === extraSegments.length - 1;
                                 return (_jsxs("span", { className: "hidden sm:flex items-center min-w-0", children: [_jsx(PathSep, {}), seg.siblings && seg.siblings.length > 1 ? (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: `flex items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:bg-accent hover:text-foreground ${!isLast ? 'text-foreground/60' : 'text-foreground/80'}`, children: [seg.label, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 8, className: "w-56 max-h-72 overflow-y-auto", children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground font-normal", children: "Switch Object" }), _jsx(DropdownMenuSeparator, {}), seg.siblings.map((sibling) => (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Link, { to: sibling.href, className: "w-full", children: sibling.label }) }, sibling.href)))] })] })) : seg.href ? (_jsx(Link, { to: seg.href, className: `rounded-md px-1.5 py-1 text-sm font-medium transition-colors hover:bg-accent hover:text-foreground truncate max-w-[160px] ${isLast ? 'text-foreground/80' : 'text-foreground/60'}`, children: seg.label })) : (_jsx("span", { className: `px-1.5 py-1 text-sm font-medium truncate max-w-[160px] ${isLast ? 'text-foreground/80' : 'text-foreground/60'}`, children: seg.label }))] }, i));
-                            }), mobileSwitcher && mobileSwitcher.views.length > 0 ? (mobileSwitcher.views.length > 1 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "sm:hidden flex items-center gap-0.5 min-w-0 ml-1 rounded-md px-1.5 py-1 text-sm font-medium hover:bg-accent active:bg-accent/80 transition-colors", "aria-label": "Switch view", children: [_jsx("span", { className: "truncate max-w-[180px]", children: mobileSwitcher.triggerLabel ??
+                            }), mobileSwitcher && mobileSwitcher.views.length > 0 ? (mobileSwitcher.views.length > 1 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "sm:hidden flex items-center gap-0.5 min-w-0 ml-1 rounded-md px-1.5 py-1 text-sm font-medium hover:bg-accent active:bg-accent/80 transition-colors", "aria-label": t('topbar.switchView', { defaultValue: 'Switch view' }), children: [_jsx("span", { className: "truncate max-w-[180px]", children: mobileSwitcher.triggerLabel ??
                                                         mobileSwitcher.views.find((v) => v.id === mobileSwitcher.activeViewId)?.label ??
                                                         lastSegmentLabel }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-[220px] max-w-[280px]", children: mobileSwitcher.views.map((v) => {
                                             const isActive = v.id === mobileSwitcher.activeViewId;
@@ -389,5 +545,14 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
                                                     if (!isActive)
                                                         mobileSwitcher.onChange(v.id);
                                                 }, className: "gap-2", children: [v.icon ? (_jsx("span", { className: "shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: v.icon })) : null, _jsx("span", { className: "flex-1 truncate", children: v.label }), v.locked ? (_jsx(Lock, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true })) : null, isActive ? (_jsx(Check, { className: "h-4 w-4 shrink-0 text-foreground", "aria-hidden": true })) : null] }, v.id));
-                                        }) })] })) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: mobileSwitcher.triggerLabel ?? mobileSwitcher.views[0].label }))) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel }))] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), "Offline"] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: "Users currently online", children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search…' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", onClick: () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true })), "aria-label": t('console.search', { defaultValue: 'Search…' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", asChild: true, "aria-label": t('topbar.aiAssistant', { defaultValue: 'AI Assistant' }), children: _jsx(Link, { to: "/ai", children: _jsx(Bot, { className: "h-4 w-4" }) }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", asChild: true, "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: ["        ", _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup/system/profile'), children: [_jsx(UserIcon, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), _jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/setup'), children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), t('sidebar.settings', { defaultValue: 'Settings' })] })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-[11px] font-normal text-muted-foreground uppercase tracking-wide px-2", children: t('user.preferences', { defaultValue: 'Preferences' }) }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.theme', { defaultValue: 'Theme' }) }), _jsx(ModeToggle, {})] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.language', { defaultValue: 'Language' }) }), _jsx(LocaleSwitcher, {})] }), isAuthEnabled && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] }))] })] })] })] })] }));
+                                        }) })] })) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: mobileSwitcher.triggerLabel ?? mobileSwitcher.views[0].label }))) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel }))] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), t('topbar.offline', { defaultValue: 'Offline' })] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: t('topbar.usersOnline', { defaultValue: 'Users currently online' }), children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { type: "button", "data-testid": "action:command-palette:open", "aria-label": t('console.search', { defaultValue: 'Search…' }), "aria-keyshortcuts": "Meta+K Control+K", onClick: openCommandPalette, className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search…' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", "data-testid": "action:command-palette:open-mobile", onClick: openCommandPalette, "aria-label": t('console.search', { defaultValue: 'Search…' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", asChild: true, "aria-label": t('topbar.aiAssistant', { defaultValue: 'AI Assistant' }), children: _jsx(Link, { to: "/ai", children: _jsx(Bot, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenu, { onOpenChange: (open) => { if (open)
+                                    void loadHelpDocs(); }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-56 rounded-lg", sideOffset: 4, children: [currentAppDocs.length > 0 && currentAppPackageId ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onClick: () => navigate(currentAppDocs.length === 1
+                                                    ? `/apps/${currentAppPackageId}/docs/${currentAppDocs[0].name}`
+                                                    : `/apps/${currentAppPackageId}/docs`), children: [_jsx(BookOpen, { className: "mr-2 h-4 w-4" }), t('help.appDocs', { defaultValue: "This app's docs" })] })) : null, _jsxs(DropdownMenuItem, { className: "cursor-pointer", onClick: () => navigate('/docs'), children: [_jsx(Layers, { className: "mr-2 h-4 w-4" }), t('help.allDocs', { defaultValue: 'All documentation' })] }), isApp ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", "data-testid": "action:keyboard-shortcuts:open", onClick: openShortcuts, children: [_jsx(Keyboard, { className: "mr-2 h-4 w-4" }), t('help.keyboardShortcuts', { defaultValue: 'Keyboard shortcuts' })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsxs("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), t('help.onlineDocs', { defaultValue: 'Online documentation' })] }) })] })] })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: ["        ", _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/account/component/account/profile_card'), className: "cursor-pointer", children: [_jsx(User, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), hasOrgSection && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations'), className: "cursor-pointer", children: [_jsx(Boxes, { className: "mr-2 h-4 w-4" }), t('organizations.mine', { defaultValue: 'My Organizations' })] })), (metadataApps || [])
+                                                        .filter((a) => a.active !== false && a.hidden === true && a.name !== 'account')
+                                                        .map((app) => {
+                                                        const AppIcon = getIcon(app.icon);
+                                                        const label = appLabel({ name: app.name, label: resolveI18nLabel(app.label, t) });
+                                                        return (_jsxs(DropdownMenuItem, { onClick: () => navigate(`/apps/${appRouteSegment(app) ?? app.name}`), className: "cursor-pointer", children: [_jsx(AppIcon, { className: "mr-2 h-4 w-4" }), label] }, `hidden_app_${app.name}`));
+                                                    })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-[11px] font-normal text-muted-foreground uppercase tracking-wide px-2", children: t('user.preferences', { defaultValue: 'Preferences' }) }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.theme', { defaultValue: 'Theme' }) }), _jsx(ModeToggle, {})] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-sm", children: [_jsx("span", { className: "text-foreground/80", children: t('user.language', { defaultValue: 'Language' }) }), _jsx(LocaleSwitcher, {})] }), isAuthEnabled && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => signOut(), children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), t('user.logout', { defaultValue: 'Log out' })] })] }))] })] })] })] })] }));
 }

package/dist/layout/AppSidebar.d.ts

@@ -8,7 +8,8 @@
  * and mobile swipe gesture.
  * @module
  */
+import * as React from 'react';
 export declare function AppSidebar({ activeAppName, onAppChange }: {
     activeAppName: string;
     onAppChange: (name: string) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;