@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/DashboardConfigPanel.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DashboardConfigPanel — the runtime DashboardView's right-rail
+ * "dashboard editor".
+ *
+ * MIGRATED: this single panel replaces BOTH legacy `plugin-dashboard`
+ * panels (the dashboard-level `DashboardConfigPanel` and the per-widget
+ * `WidgetConfigPanel`). Instead of the `buildWidgetSchema` /
+ * `ConfigPanelRenderer` engine it hosts the studio's spec-driven
+ * inspectors so the runtime and the metadata studio share ONE
+ * dashboard-editing surface:
+ *
+ *   - no widget selected → {@link DashboardDefaultInspector} (dashboard level)
+ *   - widget selected     → {@link DashboardWidgetInspector} (widget level)
+ *
+ * It lives in `app-shell` (next to the studio inspectors) rather than in
+ * `plugin-dashboard`: `app-shell` depends on `plugin-dashboard`, so hosting
+ * the inspectors here avoids the circular import a plugin-side panel would
+ * need.
+ *
+ * Unlike the legacy panel, this component is CONTROLLED: it holds no draft
+ * state of its own. Both inspectors edit the FULL nested dashboard `schema`
+ * (`{...,widgets:[{id,...}]}`) directly — the dashboard-level inspector via a
+ * shallow top-level `onPatch`, the widget inspector by addressing
+ * `schema.widgets` by `w.id`. Because the inspectors work on the spec-shaped
+ * draft, the runtime's old flatten / unflatten / extract adapters are gone.
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { Button } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { ArrowLeft, Trash2, X } from 'lucide-react';
+import { DashboardDefaultInspector } from './metadata-admin/inspectors/DashboardDefaultInspector';
+import { DashboardWidgetInspector } from './metadata-admin/inspectors/DashboardWidgetInspector';
+import { RuntimeDraftBar } from './RuntimeDraftBar';
+import { detectLocale } from './metadata-admin/i18n';
+export function DashboardConfigPanel({ open, onClose, schema, selectedWidgetId, onSelectWidget, onSave, onChange, onRemoveWidget, name: artifactName, metadataClient, onAfterChange, }) {
+    const { t } = useObjectTranslation();
+    const locale = useMemo(() => detectLocale(), []);
+    // Unsaved-edits flag — gates Publish (mirrors studio's "save first"). The
+    // panel unmounts on close, so this resets to false on each open.
+    const [dirty, setDirty] = useState(false);
+    // Bumped on save so the draft chrome surfaces the indicator immediately.
+    const [savedSignal, setSavedSignal] = useState(0);
+    // Controlled: merge an inspector patch into the current schema and bubble it
+    // back up. No local draft state — `schema` is the single source of truth.
+    const handlePatch = useCallback((patch) => {
+        setDirty(true);
+        onChange({ ...(schema ?? {}), ...patch });
+    }, [schema, onChange]);
+    // ADR-0034 (#1515): resume a pending draft into the editor on open
+    // (flag-ON only). The dashboard document IS the controlled schema, so push
+    // it up as a live edit (preview only — no save) and treat it as the clean
+    // baseline.
+    const handleResumeDraft = useCallback((body) => {
+        onChange(body);
+        setDirty(false);
+    }, [onChange]);
+    const handleSelectionChange = useCallback((sel) => {
+        onSelectWidget(sel && sel.kind === 'widget' ? sel.id : null);
+    }, [onSelectWidget]);
+    const widgets = Array.isArray(schema?.widgets) ? schema.widgets : [];
+    const selectedWidget = selectedWidgetId
+        ? widgets.find((w) => w?.id === selectedWidgetId)
+        : null;
+    if (!open)
+        return null;
+    const name = typeof schema?.name === 'string' ? schema.name : '';
+    const title = selectedWidget
+        ? t('widget.editor.title', { defaultValue: 'Edit widget' })
+        : t('dashboard.editor.title', { defaultValue: 'Edit dashboard' });
+    return (_jsxs("aside", { className: "hidden sm:flex w-[440px] shrink-0 flex-col border-l bg-background h-full", "data-testid": "dashboard-config-panel", role: "complementary", "aria-label": title, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-4 py-2.5 shrink-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [selectedWidget && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSelectWidget(null), className: "h-7 w-7 p-0", "aria-label": t('dashboard.editor.backToDashboard', {
+                                    defaultValue: 'Back to dashboard',
+                                }), title: t('dashboard.editor.backToDashboard', {
+                                    defaultValue: 'Back to dashboard',
+                                }), "data-testid": "dashboard-config-back", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) })), _jsx("div", { className: "text-sm font-medium truncate", children: title })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [selectedWidget && onRemoveWidget && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onRemoveWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "aria-label": t('widget.editor.delete', { defaultValue: 'Delete widget' }), title: t('widget.editor.delete', { defaultValue: 'Delete widget' }), "data-testid": "widget-delete-button", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "h-7 w-7 p-0", "aria-label": t('common.close', { defaultValue: 'Close' }), "data-testid": "dashboard-config-close", children: _jsx(X, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: selectedWidget ? (_jsx(DashboardWidgetInspector, { type: "dashboard", name: name, draft: schema ?? {}, selection: { kind: 'widget', id: selectedWidgetId }, onPatch: handlePatch, onClearSelection: () => onSelectWidget(null), onSelectionChange: handleSelectionChange, readOnly: false, locale: locale })) : (_jsx(DashboardDefaultInspector, { type: "dashboard", name: name, draft: schema ?? {}, onPatch: handlePatch, onSelectionChange: handleSelectionChange, readOnly: false, locale: locale })) }), _jsxs("div", { "data-testid": "dashboard-config-footer", className: "flex items-center justify-end gap-2 border-t px-4 py-2.5 shrink-0", children: [_jsx(RuntimeDraftBar, { type: "dashboard", name: artifactName || name || undefined, metadataClient: metadataClient, dirty: dirty, onResume: handleResumeDraft, savedSignal: savedSignal, onAfterChange: onAfterChange }), _jsx(Button, { size: "sm", onClick: () => {
+                            onSave((schema ?? {}));
+                            setDirty(false);
+                            setSavedSignal((s) => s + 1);
+                        }, "data-testid": "dashboard-config-save", children: t('common.save', { defaultValue: 'Save' }) })] })] }));
+}

package/dist/views/DashboardView.d.ts

@@ -1,9 +1,10 @@
 /**
  * Dashboard View Component
  * Renders a dashboard based on the dashboardName parameter.
- * Edit mode shows an inline config panel (DashboardConfigPanel / WidgetConfigPanel)
- * on the right side, following the same pattern as ListView.
+ * Edit mode shows a single inline config panel (DashboardConfigPanel) on the
+ * right side that hosts the studio's dashboard / widget inspectors, following
+ * the same pattern as ReportView.
  */
 export declare function DashboardView({ dataSource }: {
     dataSource?: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/views/DashboardView.js

@@ -2,21 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Dashboard View Component
  * Renders a dashboard based on the dashboardName parameter.
- * Edit mode shows an inline config panel (DashboardConfigPanel / WidgetConfigPanel)
- * on the right side, following the same pattern as ListView.
+ * Edit mode shows a single inline config panel (DashboardConfigPanel) on the
+ * right side that hosts the studio's dashboard / widget inspectors, following
+ * the same pattern as ReportView.
  */
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { DashboardRenderer, DashboardConfigPanel, WidgetConfigPanel, } from '@object-ui/plugin-dashboard';
+import { DashboardRenderer } from '@object-ui/plugin-dashboard';
+import { DrillNavigationProvider } from '@object-ui/react';
+import { useOpenRecordList } from './useOpenRecordList';
 import { ModalForm } from '@object-ui/plugin-form';
+import { DashboardConfigPanel } from './DashboardConfigPanel';
+import { useAuth } from '@object-ui/auth';
 import { toast } from 'sonner';
 import { Empty, EmptyTitle, EmptyDescription, Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@object-ui/components';
-import { LayoutDashboard, Pencil, TrendingUp, BarChart3, LineChart, PieChart, Table2, LayoutGrid, Plus, Trash2, } from 'lucide-react';
+import { LayoutDashboard, Pencil, TrendingUp, BarChart3, LineChart, PieChart, Table2, LayoutGrid, Plus, } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDashboard } from '../skeletons';
 import { useMetadata } from '../providers/MetadataProvider';
-import { resolveI18nLabel } from '../utils';
+import { useExpressionContext } from '../providers/ExpressionProvider';
+import { resolveI18nLabel, preferLocal } from '../utils';
 import { useAdapter } from '../providers/AdapterProvider';
+import { useMetadataClient } from './metadata-admin/useMetadata';
+import { persistRuntimeMetadata } from './runtime-metadata-persistence';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 // ---------------------------------------------------------------------------
 // Widget type palette for the add-widget toolbar
@@ -55,127 +63,25 @@ function defaultWidgetTitle(type) {
     return entry ? `New ${entry.label}` : 'New Widget';
 }
 // ---------------------------------------------------------------------------
-// Helpers: flatten / unflatten widget config for WidgetConfigPanel
-// ---------------------------------------------------------------------------
-// Top-level widget schema keys that the config panel exposes as flat fields.
-// Anything outside this set (e.g. pivot rowField/columnField, table searchable,
-// chart xAxisField/yAxisFields, list itemTemplate, custom component) is stored
-// under `widget.options` per the spec and round-tripped via spread.
-const TOP_LEVEL_WIDGET_KEYS = new Set([
-    'title',
-    'description',
-    'type',
-    'object',
-    'categoryField',
-    'valueField',
-    'aggregate',
-    'colorVariant',
-    'actionUrl',
-    'layoutW',
-    'layoutH',
-    'id',
-    // Spec-declared top-level fields that the renderer reads directly off the
-    // widget (not from options). Keeping them here ensures the unflatten path
-    // does not silently drop them into options where the renderer ignores them.
-    'searchable',
-    'pagination',
-    // Drill-down virtual flat keys are handled explicitly below — listing them
-    // here keeps the generic options-collector from duplicating them.
-    'drillDownEnabled',
-    'drillDownTarget',
-]);
-function flattenWidgetConfig(widget) {
-    // Spread options first so explicit top-level widget fields take precedence
-    // on collision. This surfaces type-specific options (pivot/table/chart axes,
-    // list itemTemplate, etc.) so they appear pre-filled in the config panel.
-    const options = (widget.options ?? {});
-    const drillDown = (options.drillDown ?? {});
-    return {
-        ...options,
-        title: widget.title ?? '',
-        description: widget.description ?? '',
-        type: widget.type ?? 'metric',
-        object: widget.object ?? '',
-        categoryField: widget.categoryField ?? options.categoryField ?? '',
-        valueField: widget.valueField ?? options.valueField ?? '',
-        aggregate: widget.aggregate ?? options.aggregate ?? 'count',
-        layoutW: widget.layout?.w ?? 1,
-        layoutH: widget.layout?.h ?? 1,
-        colorVariant: widget.colorVariant ?? options.colorVariant ?? 'default',
-        actionUrl: widget.actionUrl ?? options.actionUrl ?? '',
-        searchable: widget.searchable ?? options.searchable ?? false,
-        pagination: widget.pagination ?? options.pagination ?? false,
-        // Surface drill-down nested shape as flat switches for the panel
-        drillDownEnabled: drillDown.enabled ?? false,
-        drillDownTarget: drillDown.target ?? 'drawer',
-    };
-}
-function unflattenWidgetConfig(config, base) {
-    // Collect any unknown keys (pivot/table/chart-specific) into options so the
-    // serialized widget keeps the spec-compliant nested shape.
-    const baseOptions = (base.options ?? {});
-    const newOptions = { ...baseOptions };
-    for (const [key, value] of Object.entries(config)) {
-        if (TOP_LEVEL_WIDGET_KEYS.has(key))
-            continue;
-        if (value === undefined)
-            continue;
-        newOptions[key] = value;
-    }
-    // Re-nest drill-down flat keys back under options.drillDown so the renderer
-    // (which reads `options.drillDown`) picks them up.
-    const drillDownEnabled = config.drillDownEnabled;
-    const drillDownTarget = config.drillDownTarget;
-    if (drillDownEnabled !== undefined || drillDownTarget !== undefined) {
-        newOptions.drillDown = {
-            ...(baseOptions.drillDown || {}),
-            ...(drillDownEnabled !== undefined ? { enabled: !!drillDownEnabled } : {}),
-            ...(drillDownTarget !== undefined ? { target: drillDownTarget } : {}),
-        };
-    }
-    return {
-        title: config.title,
-        description: config.description,
-        type: config.type,
-        object: config.object,
-        categoryField: config.categoryField,
-        valueField: config.valueField,
-        aggregate: config.aggregate,
-        layout: { ...(base.layout || {}), w: config.layoutW, h: config.layoutH },
-        colorVariant: config.colorVariant,
-        actionUrl: config.actionUrl,
-        ...(config.searchable !== undefined ? { searchable: !!config.searchable } : {}),
-        ...(config.pagination !== undefined ? { pagination: !!config.pagination } : {}),
-        ...(Object.keys(newOptions).length > 0 ? { options: newOptions } : {}),
-    };
-}
-function extractDashboardConfig(schema) {
-    const s = (schema ?? {});
-    return {
-        columns: s.columns ?? 3,
-        gap: s.gap ?? 4,
-        rowHeight: String(s.rowHeight ?? '120'),
-        refreshInterval: String(s.refreshInterval ?? '0'),
-        title: s.title ?? '',
-        description: s.description ?? '',
-        showDescription: s.showDescription ?? true,
-        theme: s.theme ?? 'auto',
-    };
-}
-// ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 export function DashboardView({ dataSource }) {
+    // Drill "escape hatch": lets the drill drawers open an object's full list page.
+    const openRecordList = useOpenRecordList();
     const { dashboardName } = useParams();
     const { showDebug } = useMetadataInspector();
     const adapter = useAdapter();
+    // ADR-0034: dashboard edits persist via the metadata draft/publish model.
+    const metadataClient = useMetadataClient();
     const { t } = useObjectTranslation();
     const { dashboardLabel, dashboardDescription } = useObjectLabel();
+    // Editing a dashboard mutates the SHARED definition, so it is an admin-only
+    // quick-edit affordance (mirrors ObjectView's view-config gate).
+    const { user } = useAuth();
+    const isAdmin = user?.role === 'admin';
     const [isLoading, setIsLoading] = useState(true);
     const [configPanelOpen, setConfigPanelOpen] = useState(false);
     const [selectedWidgetId, setSelectedWidgetId] = useState(null);
-    // Version counter — incremented on save to refresh the stable config reference
-    const [configVersion, setConfigVersion] = useState(0);
     // Modal state for header action buttons that request a modal (e.g. New Opportunity)
     const [modalState, setModalState] = useState(null);
     const closeModal = useCallback((result) => {
@@ -235,7 +141,9 @@ export function DashboardView({ dataSource }) {
         queueMicrotask(() => setIsLoading(false));
     }, [dashboardName]);
     const { dashboards, objects: metadataObjects, refresh } = useMetadata();
-    const dashboard = dashboards?.find((d) => d.name === dashboardName);
+    // ADR-0048 Phase 2 — prefer the dashboard owned by the current app's package.
+    const { app: activeApp } = useExpressionContext();
+    const dashboard = preferLocal(dashboards, dashboardName, activeApp?._packageId);
     // Local schema state for live preview — initialized from metadata
     const [editSchema, setEditSchema] = useState(null);
     // When metadata refreshes (dashboard reference changes), discard stale
@@ -249,12 +157,12 @@ export function DashboardView({ dataSource }) {
     // ---- Save helper --------------------------------------------------------
     const saveSchema = useCallback(async (schema) => {
         try {
-            if (adapter && adapter.updateDashboard) {
-                await adapter.updateDashboard(dashboardName, schema);
-            }
-            else if (adapter) {
-                // Fallback for adapters that don't expose updateDashboard
-                await adapter.update('sys_dashboard', dashboardName, schema);
+            if (metadataClient) {
+                // ADR-0034: save stages a per-item draft; an explicit Publish
+                // promotes it (RuntimeDraftBar). `sys_dashboard` is retired.
+                await persistRuntimeMetadata('dashboard', dashboardName, schema, {
+                    metadataClient,
+                });
             }
             // Refresh metadata cache so closing the config panel shows saved data
             refresh().catch(() => { });
@@ -267,12 +175,11 @@ export function DashboardView({ dataSource }) {
             console.warn('[DashboardView] Auto-save failed:', err);
             toast.error(`Failed to save dashboard: ${message}`);
         }
-    }, [adapter, dashboardName, refresh]);
+    }, [metadataClient, dashboardName, refresh]);
     // ---- Open / close config panel ------------------------------------------
     const handleOpenConfigPanel = useCallback(() => {
         setEditSchema(ensureWidgetIds(dashboard));
         setConfigPanelOpen(true);
-        setConfigVersion((v) => v + 1);
     }, [dashboard]);
     const handleCloseConfigPanel = useCallback(() => {
         setConfigPanelOpen(false);
@@ -298,7 +205,6 @@ export function DashboardView({ dataSource }) {
         setEditSchema(newSchema);
         saveSchema(newSchema);
         setSelectedWidgetId(id);
-        setConfigVersion((v) => v + 1);
     }, [editSchema, saveSchema]);
     const removeWidget = useCallback((widgetId) => {
         if (!editSchema)
@@ -325,119 +231,12 @@ export function DashboardView({ dataSource }) {
         setEditSchema(newSchema);
         saveSchema(newSchema);
     }, [editSchema, dashboard, saveSchema]);
-    // ---- Dashboard config panel handlers ------------------------------------
-    // Stabilize config reference: only recompute after explicit actions (panel
-    // open, save, widget add). configVersion is incremented on those actions.
-    // This prevents useConfigDraft from resetting the draft on every live field
-    // change (same pattern as ViewConfigPanel's stableActiveView).
-    const dashboardConfig = useMemo(() => extractDashboardConfig(editSchema || dashboard), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [configVersion]);
-    const handleDashboardConfigSave = useCallback((config) => {
-        if (!editSchema)
-            return;
-        const toNum = (v, fallback) => {
-            const n = Number(v);
-            return Number.isFinite(n) ? n : fallback;
-        };
-        const newSchema = {
-            ...editSchema,
-            columns: toNum(config.columns, editSchema.columns),
-            gap: toNum(config.gap, editSchema.gap),
-            rowHeight: toNum(config.rowHeight, editSchema.rowHeight),
-            refreshInterval: toNum(config.refreshInterval, 0) ?? 0,
-            title: config.title,
-            description: config.description,
-            showDescription: config.showDescription,
-            theme: config.theme,
-        };
-        setEditSchema(newSchema);
-        saveSchema(newSchema);
-        setConfigVersion((v) => v + 1);
-    }, [editSchema, saveSchema]);
-    const handleDashboardFieldChange = useCallback((field, value) => {
-        if (!editSchema)
-            return;
-        // Map config field keys to proper DashboardSchema updates for live preview.
-        // Coerce numeric layout fields so previews/save payloads stay typed.
-        setEditSchema((prev) => {
-            if (!prev)
-                return prev;
-            const numericFields = new Set(['columns', 'gap', 'rowHeight', 'refreshInterval']);
-            if (numericFields.has(field)) {
-                const n = Number(value);
-                return { ...prev, [field]: Number.isFinite(n) ? n : prev[field] };
-            }
-            return { ...prev, [field]: value };
-        });
-    }, [editSchema]);
-    // ---- Widget config panel handlers ---------------------------------------
-    const selectedWidget = editSchema?.widgets?.find((w) => w.id === selectedWidgetId);
-    // Stabilize widget config: only recompute after explicit actions (widget
-    // switch, save, add). configVersion is incremented on save/add, and
-    // selectedWidgetId changes on widget switch — this prevents useConfigDraft
-    // from resetting the draft on every live field change.
-    const widgetConfig = useMemo(() => (selectedWidget ? flattenWidgetConfig(selectedWidget) : {}), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedWidgetId, configVersion]);
-    const handleWidgetConfigSave = useCallback((config) => {
-        if (!editSchema || !selectedWidgetId || !selectedWidget)
-            return;
-        const updates = unflattenWidgetConfig(config, selectedWidget);
-        const newSchema = {
-            ...editSchema,
-            widgets: editSchema.widgets.map((w) => w.id === selectedWidgetId ? { ...w, ...updates } : w),
-        };
-        setEditSchema(newSchema);
-        saveSchema(newSchema);
-        setConfigVersion((v) => v + 1);
-    }, [editSchema, selectedWidgetId, selectedWidget, saveSchema]);
-    const handleWidgetFieldChange = useCallback((field, value) => {
-        if (!selectedWidgetId)
-            return;
-        setEditSchema((prev) => {
-            if (!prev)
-                return prev;
-            const widget = prev.widgets?.find((w) => w.id === selectedWidgetId);
-            if (!widget)
-                return prev;
-            const flat = flattenWidgetConfig(widget);
-            flat[field] = value;
-            const updates = unflattenWidgetConfig(flat, widget);
-            return {
-                ...prev,
-                widgets: prev.widgets.map((w) => w.id === selectedWidgetId ? { ...w, ...updates } : w),
-            };
-        });
-    }, [selectedWidgetId]);
-    // ---- Metadata-driven dropdown options -----------------------------------
-    const availableObjects = useMemo(() => {
-        if (!metadataObjects?.length)
-            return undefined;
-        return metadataObjects.map((obj) => ({
-            value: obj.name,
-            label: obj.label || obj.name,
-        }));
-    }, [metadataObjects]);
-    const availableFields = useMemo(() => {
-        const objectName = selectedWidget?.object;
-        if (!objectName || !metadataObjects?.length)
-            return undefined;
-        const obj = metadataObjects.find((o) => o.name === objectName);
-        if (!obj?.fields)
-            return undefined;
-        const fields = obj.fields;
-        if (Array.isArray(fields)) {
-            return fields
-                .filter((f) => f.name)
-                .map((f) => ({ value: f.name, label: f.label || f.name }));
-        }
-        // fields can be Record<string, FieldMetadata>
-        return Object.entries(fields).map(([key, f]) => ({
-            value: key,
-            label: f.label || key,
-        }));
-    }, [selectedWidget?.object, metadataObjects]);
+    // ---- Live-edit schema for the config panel ------------------------------
+    // The single controlled config panel hosts the studio inspectors, which edit
+    // the FULL nested dashboard draft directly (dashboard-level via shallow patch,
+    // widget-level by addressing `widgets` by id). No flatten / unflatten / config
+    // extraction is required anymore.
+    const panelSchema = (editSchema || dashboard) ?? null;
     // ---- Runtime capability gate (must run before guards to respect Rules of Hooks)
     // Hide widgets whose `requiresObject` is not registered (mirrors
     // NavigationItem.requiresObject for nav entries). Defaults to widget.object
@@ -495,7 +294,7 @@ export function DashboardView({ dataSource }) {
                                     description: resolveI18nLabel(rawDesc, t),
                                 });
                                 return desc ? (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: desc })) : null;
-                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, onWidgetsReorder: handleWidgetsReorder, modalHandler: modalHandler, scriptHandlers: scriptHandlers, hideHeaderText: true }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
+                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), isAdmin && (_jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] }))] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DrillNavigationProvider, { value: { openRecordList }, children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, onWidgetsReorder: handleWidgetsReorder, modalHandler: modalHandler, scriptHandlers: scriptHandlers, hideHeaderText: true }) }) }), _jsx(DashboardConfigPanel, { open: configPanelOpen && isAdmin, onClose: handleCloseConfigPanel, schema: panelSchema, selectedWidgetId: selectedWidgetId, onSelectWidget: setSelectedWidgetId, onSave: saveSchema, onChange: setEditSchema, onRemoveWidget: removeWidget, name: dashboardName, metadataClient: metadataClient, onAfterChange: () => refresh().catch(() => { }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
                     type: 'object-form',
                     formType: 'modal',
                     objectName: modalState.schema.objectName,

package/dist/views/FlowRunner.d.ts

@@ -0,0 +1,31 @@
+import { type ScreenSpec } from './ScreenView';
+export type { ScreenSpec, ScreenFieldSpec } from './ScreenView';
+export interface ScreenFlowState {
+    flowName: string;
+    runId: string;
+    screen: ScreenSpec;
+}
+export interface FlowRunnerProps {
+    /** The paused screen-flow to drive, or `null` when closed. */
+    state: ScreenFlowState | null;
+    /** Authenticated fetch (shared with the host view). */
+    authFetch: (url: string, init?: RequestInit) => Promise<Response>;
+    /** API base (e.g. `import.meta.env.VITE_SERVER_URL || ''`). */
+    baseUrl: string;
+    /** User dismissed the runner without completing. */
+    onClose: () => void;
+    /** The flow ran to completion — host should refresh. */
+    onComplete: () => void;
+    /**
+     * Data source — required to render `object-form` wizard steps. ObjectForm
+     * fetches the object schema and persists (incl. atomic master-detail batch)
+     * through this adapter.
+     */
+    dataSource?: any;
+    /**
+     * Object definitions — used to derive an `object-form` step's inline
+     * master-detail `subforms` (mirrors RecordFormPage's create form).
+     */
+    objects?: any[];
+}
+export declare function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dataSource, objects }: FlowRunnerProps): import("react").JSX.Element | null;

package/dist/views/FlowRunner.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FlowRunner — renders the interactive `screen` of a paused screen-flow run
+ * (framework screen-flow runtime, ADR-0019) and resumes it with the collected
+ * input.
+ *
+ * A `type: 'flow'` action launches a flow; when the run pauses at a `screen`
+ * node the launch response carries `{ status: 'paused', runId, screen }`. The
+ * host view (ObjectView / RecordDetailView) opens this modal with that state.
+ * On submit it POSTs `/api/v1/automation/{flow}/runs/{runId}/resume` with the
+ * field values as `inputs`; a `paused` response renders the next screen
+ * (multi-screen wizards), a terminal response closes and refreshes the view.
+ *
+ * The screen BODY (flat fields / object-form) is rendered by the shared
+ * {@link ScreenView} — the same renderer the Studio design preview reuses, so
+ * the two can never drift (cf. #1927).
+ */
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, Button, } from '@object-ui/components';
+import { toast } from 'sonner';
+import { ScreenView, isObjectFormScreen, initialScreenValues } from './ScreenView';
+export function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dataSource, objects }) {
+    const [screen, setScreen] = useState(null);
+    const [runId, setRunId] = useState('');
+    const [flowName, setFlowName] = useState('');
+    const [values, setValues] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+    useEffect(() => {
+        if (state) {
+            setScreen(state.screen);
+            setRunId(state.runId);
+            setFlowName(state.flowName);
+            setValues(initialScreenValues(state.screen));
+        }
+    }, [state]);
+    if (!state || !screen)
+        return null;
+    const setVal = (name, v) => setValues((p) => ({ ...p, [name]: v }));
+    // Resume the paused run with `inputs` (applied as bare flow variables) and
+    // advance: render the next screen (multi-step wizard) or finish + refresh.
+    // Shared by the flat-field submit and the object-form save callback.
+    const resumeWith = async (inputs) => {
+        const res = await authFetch(`${baseUrl}/api/v1/automation/${encodeURIComponent(flowName)}/runs/${encodeURIComponent(runId)}/resume`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ inputs }) });
+        const json = await res.json().catch(() => null);
+        if (!res.ok || json?.success === false) {
+            // Transport / envelope failure — possibly transient (network, 5xx), so
+            // keep the dialog open and let the user retry the same run.
+            toast.error(json?.error || `Resume failed (HTTP ${res.status})`);
+            return;
+        }
+        const data = json?.data ?? {};
+        // The HTTP envelope is `{ success:true, data: AutomationResult }`; a flow
+        // that errored downstream surfaces as `data.success === false`. That is
+        // TERMINAL: the engine consumes the suspension before running downstream
+        // nodes (resume-once), so this run can never be resumed again — a retry
+        // would only hit "No suspended run". Close the runner instead of leaving
+        // a dead form open.
+        if (data.success === false || data.status === 'failed') {
+            // Prefer the flow's friendly `errorMessage`; fall back to the raw error.
+            toast.error(data.errorMessage || data.error || 'The flow failed to complete.');
+            onClose();
+            return;
+        }
+        if (data.status === 'paused' && data.screen) {
+            setScreen(data.screen);
+            setRunId(data.runId || runId);
+            setValues(initialScreenValues(data.screen));
+            toast.success('Saved — next step');
+        }
+        else {
+            // Terminal success — show the flow's declared completion message.
+            toast.success(data.successMessage || 'Done');
+            onComplete();
+        }
+    };
+    const submit = async () => {
+        const missing = screen.fields.filter((f) => f.required && (values[f.name] === undefined || values[f.name] === '' || values[f.name] === null));
+        if (missing.length) {
+            toast.error(`Please fill: ${missing.map((f) => f.label || f.name).join(', ')}`);
+            return;
+        }
+        setSubmitting(true);
+        try {
+            await resumeWith(values);
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    // Object-form step: ObjectForm has already persisted the record (and its
+    // children, atomically). Resume the run with the new record's id bound to the
+    // step's `idVariable` so later steps can reference it (e.g. the Opportunity
+    // form's `account` FK = the Customer step's new id).
+    const onObjectFormSaved = async (saved) => {
+        const id = saved?.id ?? saved?.data?.id ?? saved?.record?.id;
+        const inputs = screen.idVariable && id != null ? { [screen.idVariable]: id } : {};
+        setSubmitting(true);
+        try {
+            await resumeWith(inputs);
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const isObjectForm = isObjectFormScreen(screen);
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => { if (!o && !submitting)
+            onClose(); }, children: _jsxs(DialogContent, { className: isObjectForm ? 'sm:max-w-3xl max-h-[90vh] overflow-y-auto' : 'sm:max-w-md', children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: screen.title || 'Input' }), screen.description && _jsx(DialogDescription, { children: screen.description })] }), _jsx(ScreenView, { screen: screen, values: values, onValueChange: setVal, dataSource: dataSource, objects: objects, objectForm: {
+                        onSuccess: onObjectFormSaved,
+                        onCancel: onClose,
+                        showSubmit: true,
+                        showCancel: true,
+                        submitText: 'Save & Continue',
+                        cancelText: 'Cancel',
+                    } }), !isObjectForm && (_jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx(Button, { onClick: submit, disabled: submitting, children: submitting ? 'Submitting…' : 'Submit' })] }))] }) }));
+}