@object-ui/app-shell 7.1.0 → 7.3.0

package/dist/views/metadata-admin/previews/FlowPreview.js

@@ -18,15 +18,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * edges or duplicate node ids; we never throw, we just degrade.
  */
 import * as React from 'react';
-import { Bug, CircleDot, GitBranch, History, PanelRight, Plus, Settings2, Variable, Zap, } from 'lucide-react';
+import { AlertCircle, Bug, CircleDot, GitBranch, History, PanelRight, Plus, Settings2, Variable, Zap, } from 'lucide-react';
 import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
 import { uniqueId, appendArray } from '../inspectors/_shared';
 import { t as tr } from '../i18n';
 import { FlowCanvas } from './FlowCanvas';
 import { FlowSimulatorPanel } from './FlowSimulatorPanel';
 import { FlowRunsPanel } from './FlowRunsPanel';
-import { validateFlowDraft } from './simulator/flow-sim-validate';
-export function FlowPreview({ draft, editing, selection, onSelectionChange, onPatch, locale }) {
+import { ProblemsPanel } from './ProblemsPanel';
+import { buildFlowProblems, deriveInvalidElements } from './flow-problems';
+export function FlowPreview({ draft, editing, selection, onSelectionChange, onPatch, locale, diagnostics }) {
     const d = draft;
     // Memoized so hook deps (validation memo, handleAddNode) get a stable array
     // reference across renders instead of a fresh `[]`/cast each time.
@@ -40,32 +41,33 @@ export function FlowPreview({ draft, editing, selection, onSelectionChange, onPa
     const [showDebug, setShowDebug] = React.useState(false);
     const [showVars, setShowVars] = React.useState(true);
     const [showRuns, setShowRuns] = React.useState(false);
+    const [showProblems, setShowProblems] = React.useState(false);
     const [runHL, setRunHL] = React.useState(null);
-    // Continuous structural validation surfaced INLINE on the canvas (ADR-0044):
-    // an un-declared cycle (and other structural errors) paints the offending
-    // edges/nodes red and shows a banner — so the author sees it without opening
-    // the Debug panel. Same `validateFlowDraft` the simulator preflight uses.
-    const { invalidNodeIds, invalidEdges, validationErrors } = React.useMemo(() => {
-        const v = validateFlowDraft(nodes, edges);
-        const nodeSet = new Set();
-        const edgeSet = new Set();
-        for (const diag of v.errors) {
-            if (diag.nodeId)
-                nodeSet.add(diag.nodeId);
-            // A cycle error carries its closing node path → mark each hop's edge red.
-            if (diag.cycle) {
-                for (let i = 0; i < diag.cycle.length - 1; i++) {
-                    nodeSet.add(diag.cycle[i]);
-                    edgeSet.add(`${diag.cycle[i]}->${diag.cycle[i + 1]}`);
-                }
-            }
+    // Unified problem list (structural + server `_diagnostics`) is the SINGLE
+    // source for every validation surface — the clickable inline banner, the
+    // per-element badges, the red error ring/stroke, and the Problems panel.
+    // Recomputed from the live draft so they all clear as the author fixes each issue.
+    const problems = React.useMemo(() => buildFlowProblems({ nodes, edges, serverDiagnostics: diagnostics, variables }), [nodes, edges, diagnostics, d.variables]);
+    const errorCount = problems.filter((p) => p.level === 'error').length;
+    // Red error ring/stroke derived from the same list (errors only; a cycle
+    // paints its whole loop) — no second validateFlowDraft pass.
+    const { invalidNodeIds, invalidEdges } = React.useMemo(() => deriveInvalidElements(problems), [problems]);
+    // "Reveal" handshake with the canvas: a changing nonce pans to the element.
+    const [reveal, setReveal] = React.useState(null);
+    const selectedKey = selectedId ? `node:${selectedId}` : (selectedEdgeId ?? null);
+    const handleSelectProblem = React.useCallback((p) => {
+        if (p.target.kind === 'node') {
+            // Destructure before the .find() closure — TS drops the union narrowing
+            // of `p.target` inside a nested callback, so capture nodeId as a string.
+            const { nodeId } = p.target;
+            const node = nodes.find((n) => n.id === nodeId);
+            onSelectionChange?.({ kind: 'node', id: nodeId, label: node?.label || nodeId });
         }
-        return {
-            invalidNodeIds: [...nodeSet],
-            invalidEdges: edgeSet,
-            validationErrors: v.errors.map((diag) => diag.message),
-        };
-    }, [nodes, edges]);
+        else if (p.target.kind === 'edge') {
+            onSelectionChange?.({ kind: 'edge', id: p.target.edgeKey, label: `${p.target.source} → ${p.target.target}` });
+        }
+        setReveal((r) => ({ target: p.target, nonce: (r?.nonce ?? 0) + 1 }));
+    }, [nodes, onSelectionChange]);
     const handleAddNode = React.useCallback(() => {
         if (!canEdit)
             return;
@@ -89,26 +91,36 @@ export function FlowPreview({ draft, editing, selection, onSelectionChange, onPa
         return (_jsx(PreviewShell, { hint: `flow${designMode ? ' · design' : ''}`, children: canEdit ? (_jsx("div", { className: "p-3", children: _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-dashed px-3 py-2 text-xs text-muted-foreground hover:bg-muted/30 hover:text-foreground", onClick: handleAddNode, children: [_jsx(Plus, { className: "h-3 w-3" }), tr('engine.inspector.add.node', locale)] }) })) : (_jsx(PreviewMessage, { children: "Add nodes in the Form tab to see the flow preview." })) }));
     }
     return (_jsx(PreviewShell, { hint: `flow · ${nodes.length} node${nodes.length === 1 ? '' : 's'}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "One of the flow nodes or edges is malformed.", children: _jsxs("div", { className: 'grid gap-0 h-full min-h-[440px] ' +
-                    (showDebug || showVars || showRuns ? 'lg:grid-cols-[1fr_240px]' : 'grid-cols-1'), children: [_jsxs("div", { className: "flex flex-col min-w-0 min-h-0", children: [_jsxs("div", { className: "rounded-none border-b bg-muted/30 px-3 py-2 text-xs flex flex-wrap items-center gap-x-4 gap-y-1", children: [_jsx(Pill, { icon: Zap, label: "Trigger", value: flowType }), _jsx(Pill, { icon: CircleDot, label: "Status", value: status, tone: status === 'active' ? 'green' : status === 'draft' ? 'gray' : 'amber' }), _jsx(Pill, { icon: Settings2, label: "Run as", value: runAs }), version && _jsx(Pill, { label: "v", value: version }), errorStrategy && _jsx(Pill, { icon: GitBranch, label: "On error", value: errorStrategy }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [!showDebug && !showRuns && (_jsxs("button", { type: "button", onClick: () => setShowVars((v) => !v), className: 'inline-flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium transition-colors ' +
+                    (showDebug || showVars || showRuns || showProblems ? 'lg:grid-cols-[1fr_240px]' : 'grid-cols-1'), children: [_jsxs("div", { className: "flex flex-col min-w-0 min-h-0", children: [_jsxs("div", { className: "rounded-none border-b bg-muted/30 px-3 py-2 text-xs flex flex-wrap items-center gap-x-4 gap-y-1", children: [_jsx(Pill, { icon: Zap, label: "Trigger", value: flowType }), _jsx(Pill, { icon: CircleDot, label: "Status", value: status, tone: status === 'active' ? 'green' : status === 'draft' ? 'gray' : 'amber' }), _jsx(Pill, { icon: Settings2, label: "Run as", value: runAs }), version && _jsx(Pill, { label: "v", value: version }), errorStrategy && _jsx(Pill, { icon: GitBranch, label: "On error", value: errorStrategy }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [!showDebug && !showRuns && !showProblems && (_jsxs("button", { type: "button", onClick: () => setShowVars((v) => !v), className: 'inline-flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium transition-colors ' +
                                                     (showVars
                                                         ? 'border-violet-500 bg-violet-50 text-violet-700'
                                                         : 'border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground'), title: showVars ? 'Hide variables panel' : 'Show variables panel', children: [_jsx(PanelRight, { className: "h-3 w-3" }), " Variables"] })), flowName && (_jsxs("button", { type: "button", onClick: () => {
                                                     setShowRuns((v) => !v);
                                                     setShowDebug(false);
+                                                    setShowProblems(false);
                                                 }, className: 'inline-flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium transition-colors ' +
                                                     (showRuns
                                                         ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
                                                         : 'border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground'), title: "Run history from the automation engine", children: [_jsx(History, { className: "h-3 w-3" }), " Runs"] })), _jsxs("button", { type: "button", onClick: () => {
+                                                    setShowProblems((v) => !v);
+                                                    setShowDebug(false);
+                                                    setShowRuns(false);
+                                                }, className: 'inline-flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium transition-colors ' +
+                                                    (showProblems
+                                                        ? 'border-rose-500 bg-rose-50 text-rose-700'
+                                                        : 'border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground'), title: "Validation problems", children: [_jsx(AlertCircle, { className: "h-3 w-3" }), " Problems", problems.length > 0 && (_jsx("span", { className: 'ml-0.5 inline-flex min-w-[16px] items-center justify-center rounded-full px-1 text-[10px] font-semibold ' +
+                                                            (errorCount > 0 ? 'bg-destructive/15 text-destructive' : 'bg-amber-500/15 text-amber-600'), children: problems.length }))] }), _jsxs("button", { type: "button", onClick: () => {
                                                     setShowDebug((v) => !v);
                                                     setShowRuns(false);
+                                                    setShowProblems(false);
                                                 }, className: 'inline-flex items-center gap-1 rounded border px-2 py-0.5 text-[11px] font-medium transition-colors ' +
                                                     (showDebug
                                                         ? 'border-sky-500 bg-sky-50 text-sky-700'
-                                                        : 'border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground'), children: [_jsx(Bug, { className: "h-3 w-3" }), " Debug"] })] })] }), _jsx("div", { className: "flex-1 min-h-0", children: _jsx(FlowCanvas, { nodes: nodes, edges: edges, editable: canEdit, designMode: designMode, selectedId: selectedId, selectedEdgeId: selectedEdgeId, locale: locale, activeNodeId: runHL?.activeNodeId ?? null, visitedNodeIds: runHL?.visitedNodeIds, traversedEdgeIds: runHL?.traversedEdgeIds, invalidNodeIds: invalidNodeIds, invalidEdges: invalidEdges, validationErrors: validationErrors, onSelect: (n) => n
+                                                        : 'border-border text-muted-foreground hover:bg-muted/50 hover:text-foreground'), children: [_jsx(Bug, { className: "h-3 w-3" }), " Debug"] })] })] }), _jsx("div", { className: "flex-1 min-h-0", children: _jsx(FlowCanvas, { nodes: nodes, edges: edges, editable: canEdit, designMode: designMode, selectedId: selectedId, selectedEdgeId: selectedEdgeId, locale: locale, activeNodeId: runHL?.activeNodeId ?? null, visitedNodeIds: runHL?.visitedNodeIds, traversedEdgeIds: runHL?.traversedEdgeIds, invalidNodeIds: invalidNodeIds, invalidEdges: invalidEdges, onRevealProblem: handleSelectProblem, problems: problems, revealSignal: reveal, onSelect: (n) => n
                                         ? onSelectionChange?.({ kind: 'node', id: n.id, label: n.label || n.id })
                                         : onSelectionChange?.(null), onSelectEdge: (e, key) => e
                                         ? onSelectionChange?.({ kind: 'edge', id: key, label: `${e.source} → ${e.target}` })
-                                        : onSelectionChange?.(null), onPatch: onPatch }) })] }), showDebug ? (_jsx("div", { className: "border-l bg-muted/20", children: _jsx(FlowSimulatorPanel, { nodes: nodes, edges: edges, variables: variables, onRunStateChange: setRunHL }) })) : showRuns && flowName ? (_jsx("div", { className: "border-l bg-muted/20", children: _jsx(FlowRunsPanel, { flowName: flowName }) })) : showVars ? (_jsxs("div", { className: "border-l bg-muted/20 p-3 text-xs space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-muted-foreground", children: [_jsx(Variable, { className: "h-3 w-3" }), " Variables"] }), variables.length === 0 ? (_jsx("div", { className: "text-muted-foreground italic", children: "No variables declared." })) : (_jsx("ul", { className: "space-y-1.5", children: variables.map((v, i) => (_jsxs("li", { className: "rounded border bg-background p-1.5", children: [_jsxs("div", { className: "flex items-baseline gap-1 flex-wrap", children: [_jsx("span", { className: "font-mono", children: v.name }), v.type && (_jsx("span", { className: "text-[10px] uppercase text-muted-foreground", children: v.type })), v.isInput && (_jsx("span", { className: "text-[9px] font-semibold uppercase px-1 rounded bg-sky-100 text-sky-700", children: "in" })), v.isOutput && (_jsx("span", { className: "text-[9px] font-semibold uppercase px-1 rounded bg-emerald-100 text-emerald-700", children: "out" }))] }), v.defaultValue !== undefined && (_jsxs("div", { className: "text-[10px] text-muted-foreground font-mono truncate", children: ["= ", String(v.defaultValue)] }))] }, v.name || i))) }))] })) : null] }) }) }));
+                                        : onSelectionChange?.(null), onPatch: onPatch }) })] }), showProblems ? (_jsx("div", { className: "border-l bg-muted/20", children: _jsx(ProblemsPanel, { problems: problems, selectedKey: selectedKey, onSelectProblem: handleSelectProblem }) })) : showDebug ? (_jsx("div", { className: "border-l bg-muted/20", children: _jsx(FlowSimulatorPanel, { nodes: nodes, edges: edges, variables: variables, onRunStateChange: setRunHL }) })) : showRuns && flowName ? (_jsx("div", { className: "border-l bg-muted/20", children: _jsx(FlowRunsPanel, { flowName: flowName }) })) : showVars ? (_jsxs("div", { className: "border-l bg-muted/20 p-3 text-xs space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5 font-medium text-muted-foreground", children: [_jsx(Variable, { className: "h-3 w-3" }), " Variables"] }), variables.length === 0 ? (_jsx("div", { className: "text-muted-foreground italic", children: "No variables declared." })) : (_jsx("ul", { className: "space-y-1.5", children: variables.map((v, i) => (_jsxs("li", { className: "rounded border bg-background p-1.5", children: [_jsxs("div", { className: "flex items-baseline gap-1 flex-wrap", children: [_jsx("span", { className: "font-mono", children: v.name }), v.type && (_jsx("span", { className: "text-[10px] uppercase text-muted-foreground", children: v.type })), v.isInput && (_jsx("span", { className: "text-[9px] font-semibold uppercase px-1 rounded bg-sky-100 text-sky-700", children: "in" })), v.isOutput && (_jsx("span", { className: "text-[9px] font-semibold uppercase px-1 rounded bg-emerald-100 text-emerald-700", children: "out" }))] }), v.defaultValue !== undefined && (_jsxs("div", { className: "text-[10px] text-muted-foreground font-mono truncate", children: ["= ", String(v.defaultValue)] }))] }, v.name || i))) }))] })) : null] }) }) }));
 }
 function Pill({ icon: Icon, label, value, tone = 'gray', }) {
     const cls = tone === 'green'

package/dist/views/metadata-admin/previews/ObjectFormCanvas.js

@@ -19,6 +19,7 @@ import * as React from 'react';
 import { Badge, Button, cn, Popover, PopoverContent, PopoverTrigger, } from '@object-ui/components';
 import { GripVertical, Plus, ChevronDown, ChevronRight, Trash2, ArrowUp, ArrowDown, FolderPlus, FolderInput, ChevronsDownUp, ChevronsUpDown, CheckSquare, GitCompareArrows, Sparkles, X, } from 'lucide-react';
 import { requestAssistantOpen } from '../../../assistant/assistantBus';
+import { useAiSurfaceEnabled } from '../../../hooks/useAiSurface';
 import { readFields, writeFields, newField, toFieldName, groupEntries, readGroups, addGroup, renameGroup, removeGroup, moveGroup, clearFieldGroup, diffFields, } from './object-fields-io';
 import { FIELD_TYPE_META, TYPES_BY_CATEGORY, CATEGORY_LABEL_EN, CATEGORY_LABEL_ZH, CATEGORY_TONE, } from './field-types';
 import { FieldStub } from './FieldStub';
@@ -30,6 +31,10 @@ const typeLabel = (meta, locale) => meta ? (isZh(locale) ? meta.labelZh : meta.l
 const categoryLabel = (cat, locale) => (isZh(locale) ? CATEGORY_LABEL_ZH : CATEGORY_LABEL_EN)[cat];
 export function ObjectFormCanvas({ objectName, draft, baseline, onPatch, selection, onSelectionChange, locale, }) {
     const readOnly = !onPatch;
+    // The "Ask AI" affordances arm the global chat FAB (requestAssistantOpen).
+    // Hide them when the runtime serves no AI — otherwise they'd dead-end with no
+    // FAB to open. Same server-pushed signal the FAB itself gates on.
+    const { enabled: aiEnabled } = useAiSurfaceEnabled();
     const view = React.useMemo(() => readFields(draft.fields), [draft]);
     /* ─── Review/diff mode — draft vs last published ─── */
     const diff = React.useMemo(() => (baseline ? diffFields(baseline.fields, draft.fields) : null), [baseline, draft]);
@@ -311,14 +316,14 @@ export function ObjectFormCanvas({ objectName, draft, baseline, onPatch, selecti
     // Section chrome (headers, collapse, drop-to-assign) only appears once
     // groups exist — otherwise the canvas stays a flat field list.
     const showSectionChrome = hasGroups || groups.length > 1;
-    return (_jsxs("div", { className: "h-full overflow-auto bg-muted/20", onClick: handleBgClick, "data-object-name": objectName, children: [!readOnly && multiSel.size > 0 && (_jsx(BulkActionBar, { count: multiSel.size, groups: declaredGroups, onMoveToGroup: bulkSetGroup, onDelete: bulkDelete, onClear: clearMulti, locale: locale })), _jsxs("div", { className: "mx-auto max-w-3xl px-6 py-6 space-y-4", onClick: handleBgClick, children: [!emptyState && (_jsx(CanvasToolbar, { fieldCount: view.entries.length, requiredCount: requiredCount, sectionCount: declaredGroups.length, allCollapsed: allCollapsed, onToggleAll: showSectionChrome ? () => setAllCollapsed(!allCollapsed) : undefined, reviewAvailable: changeCount > 0, reviewing: reviewing, diffCounts: diff?.counts, onToggleReview: () => setReviewMode((v) => !v), locale: locale })), emptyState ? (_jsx(EmptyCanvas, { onAdd: readOnly ? undefined : addField, locale: locale })) : (_jsx("div", { className: "space-y-5", children: groups.map((g) => {
+    return (_jsxs("div", { className: "h-full overflow-auto bg-muted/20", onClick: handleBgClick, "data-object-name": objectName, children: [!readOnly && multiSel.size > 0 && (_jsx(BulkActionBar, { count: multiSel.size, groups: declaredGroups, onMoveToGroup: bulkSetGroup, onDelete: bulkDelete, onClear: clearMulti, locale: locale })), _jsxs("div", { className: "mx-auto max-w-3xl px-6 py-6 space-y-4", onClick: handleBgClick, children: [!emptyState && (_jsx(CanvasToolbar, { fieldCount: view.entries.length, requiredCount: requiredCount, sectionCount: declaredGroups.length, allCollapsed: allCollapsed, onToggleAll: showSectionChrome ? () => setAllCollapsed(!allCollapsed) : undefined, reviewAvailable: changeCount > 0, reviewing: reviewing, diffCounts: diff?.counts, onToggleReview: () => setReviewMode((v) => !v), locale: locale })), emptyState ? (_jsx(EmptyCanvas, { onAdd: readOnly ? undefined : addField, locale: locale, aiEnabled: aiEnabled })) : (_jsx("div", { className: "space-y-5", children: groups.map((g) => {
                             const declaredIdx = g.key
                                 ? declaredGroups.findIndex((d) => d.key === g.key)
                                 : -1;
                             return (_jsxs(GroupSection, { groupKey: g.key, label: g.key === null ? t('designer.canvas.ungrouped', locale) : g.label, count: g.entries.length, showHeader: showSectionChrome, collapsed: !!collapsed[collapseKey(g.key)], onToggleCollapse: () => toggleCollapse(g.key), readOnly: readOnly, locale: locale, canMoveUp: declaredIdx > 0, canMoveDown: declaredIdx >= 0 && declaredIdx < declaredGroups.length - 1, onRename: g.key ? (label) => renameSection(g.key, label) : undefined, onRemove: g.key ? () => removeSection(g.key) : undefined, onMove: g.key ? (dir) => moveSection(g.key, dir) : undefined, onAddField: readOnly ? undefined : (type) => addField(type, g.key), onDropField: readOnly ? undefined : moveToGroup, children: [g.entries.map((entry) => (_jsx(FieldRow, { entry: entry, selected: entry.name === selectedName, multiSelected: multiSel.has(entry.name), diffStatus: statusOf(entry.name), changedKeys: changedKeysOf(entry.name), readOnly: readOnly, locale: locale, onClick: (e) => handleRowClick(entry, e), onReorder: readOnly ? undefined : reorderField, onRenameLabel: readOnly ? undefined : renameLabel, onMoveOffset: readOnly ? undefined : (dir) => moveFieldByOffset(entry.name, dir) }, entry.name))), g.entries.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed bg-background/40 px-3 py-4 text-center text-[11px] text-muted-foreground", children: readOnly
                                             ? t('designer.canvas.emptySection', locale)
                                             : t('designer.canvas.dropHint', locale) }))] }, g.key ?? '__ungrouped__'));
-                        }) })), reviewing && diff && diff.removed.length > 0 && (_jsxs("div", { className: "space-y-2.5", children: [_jsx("div", { className: "text-[11px] font-medium uppercase tracking-wider text-destructive/80 pl-1", children: t('designer.canvas.diffRemoved', locale) }), diff.removed.map((entry) => (_jsx(GhostFieldRow, { entry: entry, locale: locale }, entry.name)))] })), !emptyState && !readOnly && (_jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(AddFieldButton, { onPick: (type) => addField(type), locale: locale }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-muted-foreground hover:text-foreground", onClick: addSection, children: [_jsx(FolderPlus, { className: "h-3.5 w-3.5" }), t('designer.canvas.addSection', locale)] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 ml-auto text-primary/80 hover:text-primary", onClick: () => requestAssistantOpen(), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), t('designer.canvas.askAi', locale)] })] }))] })] }));
+                        }) })), reviewing && diff && diff.removed.length > 0 && (_jsxs("div", { className: "space-y-2.5", children: [_jsx("div", { className: "text-[11px] font-medium uppercase tracking-wider text-destructive/80 pl-1", children: t('designer.canvas.diffRemoved', locale) }), diff.removed.map((entry) => (_jsx(GhostFieldRow, { entry: entry, locale: locale }, entry.name)))] })), !emptyState && !readOnly && (_jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(AddFieldButton, { onPick: (type) => addField(type), locale: locale }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-muted-foreground hover:text-foreground", onClick: addSection, children: [_jsx(FolderPlus, { className: "h-3.5 w-3.5" }), t('designer.canvas.addSection', locale)] }), aiEnabled && (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 ml-auto text-primary/80 hover:text-primary", onClick: () => requestAssistantOpen(), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), t('designer.canvas.askAi', locale)] }))] }))] })] }));
 }
 /* ─────────────── Review toolbar ─────────────── */
 function CanvasToolbar({ fieldCount, requiredCount, sectionCount, allCollapsed, onToggleAll, reviewAvailable, reviewing, diffCounts, onToggleReview, locale, }) {
@@ -509,8 +514,8 @@ function FieldRow({ entry, selected, multiSelected, diffStatus, changedKeys, rea
                                             ? tFormat('designer.canvas.diffChangedKeys', locale, { keys: changedKeys.join(', ') })
                                             : undefined, children: t('designer.canvas.diffChanged', locale) })), _jsx(Badge, { variant: "outline", className: cn('text-[10px] font-medium', tone.badge), children: typeLabel(meta, locale) ?? typeStr })] })] }), description && (_jsx("div", { className: "text-[11px] text-muted-foreground mb-1.5 line-clamp-1", children: description })), _jsx(FieldStub, { type: typeStr, label: label, placeholder: placeholder, options: options, referenceTo: referenceTo, formula: formula, locale: locale })] }), dropZone === 'after' && (_jsx("div", { className: "absolute left-0 right-0 -bottom-1 h-0.5 bg-primary rounded-full" }))] }));
 }
-function EmptyCanvas({ onAdd, locale }) {
-    return (_jsxs("div", { className: "rounded-lg border-2 border-dashed bg-background py-16 px-6 text-center space-y-3", children: [_jsx("div", { className: "text-sm font-medium", children: t('designer.canvas.noFields', locale) }), _jsx("div", { className: "text-xs text-muted-foreground", children: t('designer.canvas.noFieldsHint', locale) }), onAdd && (_jsxs("div", { className: "pt-2 flex items-center justify-center gap-2", children: [_jsx(AddFieldButton, { onPick: onAdd, locale: locale }), _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-primary/80 hover:text-primary", onClick: () => requestAssistantOpen(), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), t('designer.canvas.askAiGenerate', locale)] })] }))] }));
+function EmptyCanvas({ onAdd, locale, aiEnabled, }) {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-dashed bg-background py-16 px-6 text-center space-y-3", children: [_jsx("div", { className: "text-sm font-medium", children: t('designer.canvas.noFields', locale) }), _jsx("div", { className: "text-xs text-muted-foreground", children: t('designer.canvas.noFieldsHint', locale) }), onAdd && (_jsxs("div", { className: "pt-2 flex items-center justify-center gap-2", children: [_jsx(AddFieldButton, { onPick: onAdd, locale: locale }), aiEnabled && (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1.5 text-primary/80 hover:text-primary", onClick: () => requestAssistantOpen(), children: [_jsx(Sparkles, { className: "h-3.5 w-3.5" }), t('designer.canvas.askAiGenerate', locale)] }))] }))] }));
 }
 function AddFieldButton({ onPick, compact, locale }) {
     const [open, setOpen] = React.useState(false);

package/dist/views/metadata-admin/previews/ProblemsPanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ProblemsPanel — lists every structural + server validation issue for the
+ * flow draft. Each row shows the severity icon and the message; clicking a row
+ * selects and reveals (pans to) the offending node/edge on the canvas. Mirrors
+ * the "Problems" tab of an IDE / the error panel in Salesforce Flow Builder.
+ *
+ * Pure presentation: the issue list is derived upstream (see `flow-problems`)
+ * from the live draft, so rows clear as the author fixes each problem.
+ */
+import * as React from 'react';
+import type { FlowProblem } from './flow-problems';
+export interface ProblemsPanelProps {
+    problems: FlowProblem[];
+    /** Selected element key (`node:<id>` or an edge's `edgeKey`) to highlight matching rows. */
+    selectedKey?: string | null;
+    onSelectProblem: (problem: FlowProblem) => void;
+}
+export declare function ProblemsPanel({ problems, selectedKey, onSelectProblem }: ProblemsPanelProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/ProblemsPanel.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle2, CircleDot, GitBranch } from 'lucide-react';
+import { cn } from '@object-ui/components';
+function targetLabel(p) {
+    if (p.target.kind === 'node')
+        return p.target.nodeId;
+    if (p.target.kind === 'edge')
+        return `${p.target.source} → ${p.target.target}`;
+    return 'flow';
+}
+export function ProblemsPanel({ problems, selectedKey, onSelectProblem }) {
+    const errorCount = problems.filter((p) => p.level === 'error').length;
+    const warningCount = problems.length - errorCount;
+    return (_jsxs("div", { className: "flex h-full flex-col text-xs", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-2 font-medium text-muted-foreground", children: [_jsx("span", { children: "Problems" }), errorCount > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1 text-destructive", children: [_jsx(AlertCircle, { className: "h-3 w-3" }), " ", errorCount] })), warningCount > 0 && (_jsxs("span", { className: "inline-flex items-center gap-1 text-amber-600 dark:text-amber-400", children: [_jsx(AlertTriangle, { className: "h-3 w-3" }), " ", warningCount] }))] }), problems.length === 0 ? (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-1.5 p-4 text-center text-muted-foreground", children: [_jsx(CheckCircle2, { className: "h-5 w-5 text-emerald-500" }), _jsx("span", { children: "No problems \u2014 this flow is structurally valid." })] })) : (_jsx("ul", { className: "flex-1 overflow-auto p-1.5", children: problems.map((p) => {
+                    const isEdge = p.target.kind === 'edge';
+                    const isFlow = p.target.kind === 'flow';
+                    const key = p.target.kind === 'node'
+                        ? `node:${p.target.nodeId}`
+                        : p.target.kind === 'edge'
+                            ? p.target.edgeKey
+                            : null;
+                    const active = !!key && key === selectedKey;
+                    const Icon = p.level === 'error' ? AlertCircle : AlertTriangle;
+                    const TargetIcon = isEdge ? GitBranch : CircleDot;
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", disabled: isFlow, onClick: () => onSelectProblem(p), className: cn('flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left transition-colors', isFlow ? 'cursor-default' : 'cursor-pointer hover:bg-accent', active && 'bg-accent ring-1 ring-primary/40'), children: [_jsx(Icon, { className: cn('mt-0.5 h-3.5 w-3.5 shrink-0', p.level === 'error' ? 'text-destructive' : 'text-amber-500') }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block leading-snug text-foreground", children: p.message }), _jsxs("span", { className: "mt-0.5 flex items-center gap-1 text-[10px] text-muted-foreground", children: [_jsx(TargetIcon, { className: "h-2.5 w-2.5 shrink-0" }), _jsx("span", { className: "truncate font-mono", children: targetLabel(p) }), p.source === 'server' && _jsx("span", { className: "uppercase tracking-wide", children: "\u00B7 schema" }), p.source === 'expression' && _jsx("span", { className: "uppercase tracking-wide", children: "\u00B7 expression" })] })] })] }) }, p.id));
+                }) }))] }));
+}

package/dist/views/metadata-admin/previews/ReportPreview.d.ts

@@ -4,15 +4,16 @@
  *
  * A 9.0 report binds a semantic-layer `dataset` and selects its measures
  * (`values`) grouped by dimensions (`rows`, plus `columns` across for a
- * matrix); rendering through plugin-report's `ReportRenderer` keeps the
- * studio preview pixel-equal with the runtime — including the matrix
- * cross-tab — and the numbers consistent with every other surface on the
- * same dataset (`adapter.queryDataset`). Drill-down stays inert here: the
- * preview passes no `onDrill` sink.
+ * matrix); a `joined` report instead stacks dataset-bound `blocks`. Both
+ * render through plugin-report's `ReportRenderer` (→ DatasetReportRenderer),
+ * keeping the studio preview pixel-equal with the runtime — including the
+ * matrix cross-tab and the joined block stack — and the numbers consistent
+ * with every other surface on the same dataset (`adapter.queryDataset`).
+ * Drill-down stays inert here: the preview passes no `onDrill` sink.
  *
- * A draft without a dataset binding (e.g. stored pre-9.0 query-form JSON)
- * gets an actionable empty state pointing at the inspector's Dataset control
- * instead of the retired legacy renderer.
+ * A draft with neither a dataset nor any dataset-bound block gets an
+ * actionable empty state pointing at the right inspector control instead of
+ * the retired pre-9.0 inline-query renderer.
  */
 import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';

package/dist/views/metadata-admin/previews/ReportPreview.js

@@ -6,15 +6,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * A 9.0 report binds a semantic-layer `dataset` and selects its measures
  * (`values`) grouped by dimensions (`rows`, plus `columns` across for a
- * matrix); rendering through plugin-report's `ReportRenderer` keeps the
- * studio preview pixel-equal with the runtime — including the matrix
- * cross-tab — and the numbers consistent with every other surface on the
- * same dataset (`adapter.queryDataset`). Drill-down stays inert here: the
- * preview passes no `onDrill` sink.
+ * matrix); a `joined` report instead stacks dataset-bound `blocks`. Both
+ * render through plugin-report's `ReportRenderer` (→ DatasetReportRenderer),
+ * keeping the studio preview pixel-equal with the runtime — including the
+ * matrix cross-tab and the joined block stack — and the numbers consistent
+ * with every other surface on the same dataset (`adapter.queryDataset`).
+ * Drill-down stays inert here: the preview passes no `onDrill` sink.
  *
- * A draft without a dataset binding (e.g. stored pre-9.0 query-form JSON)
- * gets an actionable empty state pointing at the inspector's Dataset control
- * instead of the retired legacy renderer.
+ * A draft with neither a dataset nor any dataset-bound block gets an
+ * actionable empty state pointing at the right inspector control instead of
+ * the retired pre-9.0 inline-query renderer.
  */
 import * as React from 'react';
 import { Database, Loader2 } from 'lucide-react';
@@ -23,13 +24,29 @@ import { PreviewShell, PreviewErrorBoundary, PreviewEmptyState } from './Preview
 const ReportRenderer = React.lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportRenderer })));
 export function ReportPreview({ draft }) {
     const adapter = useAdapter();
-    // ADR-0021 single-form: a report binds a semantic-layer dataset.
-    if (typeof draft.dataset === 'string' && draft.dataset) {
-        const rows = Array.isArray(draft.rows) ? draft.rows.filter(Boolean) : [];
-        return (_jsx(PreviewShell, { hint: `report · dataset "${draft.dataset}"${rows.length ? ' · by ' + rows.join(', ') : ''}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The Report references a dataset/measure that doesn't resolve, or its config is incomplete.", children: _jsx(React.Suspense, { fallback: _jsxs("div", { className: "flex items-center gap-2 p-4 text-xs text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading report renderer\u2026"] }), children: _jsx("div", { className: "p-3 min-h-[200px] max-h-[70vh] overflow-auto", children: _jsx(ReportRenderer, { schema: draft, dataSource: adapter }) }) }) }) }));
+    const d = draft;
+    // ADR-0021 single-form: a report binds a semantic-layer dataset; a `joined`
+    // report instead carries its data on dataset-bound `blocks`. Both render
+    // through plugin-report's ReportRenderer (→ DatasetReportRenderer, which
+    // stacks each block). Previously only the single-dataset shape was
+    // previewed, so a joined report fell through to the "bind a dataset" empty
+    // state and the author designed blind.
+    const hasDataset = typeof d.dataset === 'string' && !!d.dataset;
+    const isJoinedWithBlocks = d.type === 'joined' &&
+        Array.isArray(d.blocks) &&
+        d.blocks.some((b) => typeof b?.dataset === 'string' && !!b.dataset);
+    if (hasDataset || isJoinedWithBlocks) {
+        const rows = Array.isArray(d.rows) ? d.rows.filter(Boolean) : [];
+        const hint = isJoinedWithBlocks
+            ? `report · joined · ${d.blocks.length} block${d.blocks.length === 1 ? '' : 's'}`
+            : `report · dataset "${d.dataset}"${rows.length ? ' · by ' + rows.join(', ') : ''}`;
+        return (_jsx(PreviewShell, { hint: hint, children: _jsx(PreviewErrorBoundary, { fallbackHint: "The Report references a dataset/measure that doesn't resolve, or its config is incomplete.", children: _jsx(React.Suspense, { fallback: _jsxs("div", { className: "flex items-center gap-2 p-4 text-xs text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading report renderer\u2026"] }), children: _jsx("div", { className: "p-3 min-h-[200px] max-h-[70vh] overflow-auto", children: _jsx(ReportRenderer, { schema: draft, dataSource: adapter }) }) }) }) }));
     }
-    // No dataset bound — either a fresh draft or stored pre-9.0 query-form
-    // JSON (objectName/columns), whose inline-query renderer was retired with
-    // the 9.0 cutover. Point the author at the dataset binding.
-    return (_jsx(PreviewShell, { children: _jsx(PreviewEmptyState, { icon: _jsx(Database, { className: "h-8 w-8" }), title: "Bind a dataset to preview this report", description: "Since the 9.0 single-form cutover a report renders its dataset's measures (values) grouped by dimensions (rows). Choose a Dataset in the right panel to start designing." }) }));
+    // Nothing renderable yet. A joined report needs at least one dataset-bound
+    // block; every other type needs a top-level dataset. Point the author at the
+    // right control instead of the retired pre-9.0 inline-query renderer.
+    const joined = d.type === 'joined';
+    return (_jsx(PreviewShell, { children: _jsx(PreviewEmptyState, { icon: _jsx(Database, { className: "h-8 w-8" }), title: joined ? 'Add a block to preview this joined report' : 'Bind a dataset to preview this report', description: joined
+                ? 'A joined report stacks dataset-bound blocks. Add a block and bind its dataset + measures in the right panel to start designing.'
+                : "Since the 9.0 single-form cutover a report renders its dataset's measures (values) grouped by dimensions (rows). Choose a Dataset in the right panel to start designing." }) }));
 }

package/dist/views/metadata-admin/previews/flow-canvas-parts.d.ts

@@ -68,6 +68,14 @@ export interface NodeCardProps {
     dimmed?: boolean;
     /** Structural-validation error highlight (e.g. part of an un-declared cycle). */
     invalid?: boolean;
+    /**
+     * Validation badge shown at the card's top-right corner (error or warning),
+     * with the issue message(s) as its tooltip. Cleared when the issue resolves.
+     */
+    badge?: {
+        level: 'error' | 'warning';
+        title: string;
+    };
     onPointerDown?: (e: React.PointerEvent) => void;
     onSelect?: () => void;
     onAppend?: () => void;
@@ -83,7 +91,7 @@ export interface NodeCardProps {
  * The card body drives selection + reposition; a dedicated bottom "+" handle
  * (edit mode only) appends a connected child without ambiguity.
  */
-export declare function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, invalid, onPointerDown, onSelect, onAppend, onAddReviseLoop, }: NodeCardProps): React.JSX.Element;
+export declare function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, invalid, badge, onPointerDown, onSelect, onAppend, onAddReviseLoop, }: NodeCardProps): React.JSX.Element;
 export interface NodePaletteProps {
     locale?: string;
     /** Node types to offer. Defaults to the hardcoded {@link NODE_PALETTE}. */

package/dist/views/metadata-admin/previews/flow-canvas-parts.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * palette popover. Kept dependency-free and Shadcn-native (Tailwind + lucide).
  */
 import * as React from 'react';
-import { Code, CircleDot, CircleStop, Diamond, FilePen, FilePlus, FileSearch, FileX, GitFork, Globe, IterationCcw, ListChecks, MonitorSmartphone, Play, Plug, Plus, Repeat, ShieldAlert, TimerReset, UserCheck, Variable, Workflow, Zap, } from 'lucide-react';
+import { AlertCircle, AlertTriangle, Code, CircleDot, CircleStop, Diamond, FilePen, FilePlus, FileSearch, FileX, GitFork, Globe, IterationCcw, ListChecks, MonitorSmartphone, Play, Plug, Plus, Repeat, ShieldAlert, TimerReset, UserCheck, Variable, Workflow, Zap, } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { NODE_W, NODE_H } from './flow-canvas-layout';
 export function nodeIcon(type) {
@@ -317,7 +317,7 @@ export function defaultNodeExtras(type) {
  * The card body drives selection + reposition; a dedicated bottom "+" handle
  * (edit mode only) appends a connected child without ambiguity.
  */
-export function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, invalid, onPointerDown, onSelect, onAppend, onAddReviseLoop, }) {
+export function NodeCard({ type, label, summary, position, selected, editable, runState, dimmed, invalid, badge, onPointerDown, onSelect, onAppend, onAddReviseLoop, }) {
     const tone = nodeTone(type);
     return (_jsxs("div", { 
         // `group` so the hover-revealed affordances (append "+", revise loop)
@@ -339,7 +339,9 @@ export function NodeCard({ type, label, summary, position, selected, editable, r
                             ? 'border-primary shadow-md ring-2 ring-primary/30'
                             : invalid
                                 ? 'border-destructive ring-2 ring-destructive/50'
-                                : 'border-border/80'), children: [_jsx("div", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-transform duration-150 group-hover:scale-105', tone.chip, runState === 'active' && 'animate-pulse'), children: _jsx(NodeTypeIcon, { type: type, className: cn('h-[18px] w-[18px]', tone.icon) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { title: label, className: "truncate text-[13px] font-semibold leading-tight text-foreground", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-1.5 leading-tight", children: [_jsx("span", { className: cn('shrink-0 text-[10px] font-semibold uppercase tracking-[0.08em]', tone.label), children: type }), summary && (_jsx("span", { className: "min-w-0 truncate font-mono text-[10px] text-muted-foreground", title: summary, children: summary }))] })] })] }), editable && type !== 'end' && (_jsx("button", { type: "button", title: "Add connected node", "aria-label": "Add connected node", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                : 'border-border/80'), children: [_jsx("div", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-transform duration-150 group-hover:scale-105', tone.chip, runState === 'active' && 'animate-pulse'), children: _jsx(NodeTypeIcon, { type: type, className: cn('h-[18px] w-[18px]', tone.icon) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { title: label, className: "truncate text-[13px] font-semibold leading-tight text-foreground", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-1.5 leading-tight", children: [_jsx("span", { className: cn('shrink-0 text-[10px] font-semibold uppercase tracking-[0.08em]', tone.label), children: type }), summary && (_jsx("span", { className: "min-w-0 truncate font-mono text-[10px] text-muted-foreground", title: summary, children: summary }))] })] })] }), badge && (_jsx("span", { title: badge.title, "data-problem": badge.level, className: cn('absolute -right-2 -top-2 z-20 inline-flex h-5 w-5 items-center justify-center rounded-full border bg-background shadow-sm', badge.level === 'error'
+                    ? 'border-destructive/50 text-destructive'
+                    : 'border-amber-500/50 text-amber-600 dark:text-amber-400'), children: badge.level === 'error' ? (_jsx(AlertCircle, { className: "h-3 w-3" })) : (_jsx(AlertTriangle, { className: "h-3 w-3" })) })), editable && type !== 'end' && (_jsx("button", { type: "button", title: "Add connected node", "aria-label": "Add connected node", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
                     e.stopPropagation();
                     onAppend?.();
                 }, className: cn('absolute left-1/2 -bottom-3 z-10 inline-flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full border bg-background text-muted-foreground shadow-sm transition-colors', 'opacity-0 hover:border-primary hover:text-primary group-hover:opacity-100 focus-visible:opacity-100'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })), onAddReviseLoop && (_jsx("button", { type: "button", title: "Add revision loop (send back for revision)", "aria-label": "Add revision loop", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {

package/dist/views/metadata-admin/previews/flow-expr-problems.d.ts

@@ -0,0 +1,19 @@
+import type { DiagnosticLevel } from './simulator/flow-sim-types';
+export interface ExprProblem {
+    target: {
+        kind: 'node';
+        nodeId: string;
+    } | {
+        kind: 'edge';
+        source: string;
+        target: string;
+    };
+    level: DiagnosticLevel;
+    message: string;
+}
+/**
+ * Scan a flow draft for expression problems, resolved onto node / edge targets.
+ * Pure: no network — the trigger object's fields are not expanded (root-only
+ * scope), which is why the start node is excluded from the ref check.
+ */
+export declare function flowExpressionProblems(draft: Record<string, unknown>): ExprProblem[];

package/dist/views/metadata-admin/previews/flow-expr-problems.js

@@ -0,0 +1,97 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * flow-expr-problems — pure, client-side detection of EXPRESSION issues across a
+ * whole flow draft, for surfacing in the Problems panel + canvas badges (#1934).
+ *
+ * Two kinds, mirroring the inline inspector checks but aggregated per node/edge:
+ *   • ADR-0032 brace / shape ERRORS on every CEL field (decision conditions +
+ *     branch expressions, screen `visibleWhen`, loop collection, edge guards…).
+ *     Deterministic, scope-free → zero false positives.
+ *   • Scope-aware "unknown reference" WARNINGS — a bare root not in scope at the
+ *     node. The START node is skipped: its entry condition legitimately uses the
+ *     trigger record's fields *bare* (`status`), which can't be told apart from a
+ *     typo without the object schema (an async fetch this pure pass avoids); the
+ *     inline inspector check, which does fetch, still covers it.
+ *
+ * Only CEL (`expression`) surfaces are scanned — template (`{var}`) values use
+ * single braces legally and are left to the inline check.
+ */
+import { fieldsForNodeType, getFieldValue } from '../inspectors/flow-node-config';
+import { resolveFlowScope } from '../inspectors/flow-scope';
+import { scopeRoots, findUnknownRefs, describeUnknownRefs } from '../inspectors/flow-ref-check';
+import { validateExpressionClient } from '../inspectors/expression-validate';
+function asArray(v) {
+    return Array.isArray(v) ? v : [];
+}
+function asRecord(v) {
+    return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+}
+function str(v) {
+    return typeof v === 'string' && v ? v : undefined;
+}
+/** Brace error (error) else unknown-ref (warning, when `roots` given) for one CEL value. */
+function checkCel(value, roots) {
+    const issue = validateExpressionClient('predicate', value);
+    if (issue)
+        return { level: 'error', message: issue.message };
+    if (roots && roots.size > 0) {
+        const unknown = findUnknownRefs(value, 'predicate', roots);
+        if (unknown.length > 0)
+            return { level: 'warning', message: describeUnknownRefs(unknown) };
+    }
+    return null;
+}
+/**
+ * Scan a flow draft for expression problems, resolved onto node / edge targets.
+ * Pure: no network — the trigger object's fields are not expanded (root-only
+ * scope), which is why the start node is excluded from the ref check.
+ */
+export function flowExpressionProblems(draft) {
+    const nodes = asArray(draft.nodes).map(asRecord);
+    const edges = asArray(draft.edges).map(asRecord);
+    const startId = str(nodes.find((n) => str(n.type) === 'start')?.id);
+    const out = [];
+    for (const node of nodes) {
+        const nodeId = str(node.id);
+        const type = str(node.type);
+        if (!nodeId || !type)
+            continue;
+        // Root-only scope at this node; skip the ref check on the start node (its
+        // bare trigger-record fields are indistinguishable from typos here).
+        const roots = nodeId === startId ? null : scopeRoots(resolveFlowScope(draft, nodeId).refs);
+        for (const field of fieldsForNodeType(type)) {
+            if (field.kind === 'expression') {
+                const hit = checkCel(getFieldValue(node, field), roots);
+                if (hit)
+                    out.push({ target: { kind: 'node', nodeId }, level: hit.level, message: hit.message });
+            }
+            else if (field.kind === 'objectList' && field.columns) {
+                const exprCols = field.columns.filter((c) => c.kind === 'expression');
+                if (exprCols.length === 0)
+                    continue;
+                for (const row of asArray(getFieldValue(node, field))) {
+                    const r = asRecord(row);
+                    const rowLabel = str(r.label);
+                    for (const col of exprCols) {
+                        const hit = checkCel(r[col.key], roots);
+                        if (hit) {
+                            const prefix = rowLabel || col.label;
+                            out.push({ target: { kind: 'node', nodeId }, level: hit.level, message: prefix ? `${prefix}: ${hit.message}` : hit.message });
+                        }
+                    }
+                }
+            }
+        }
+    }
+    for (const edge of edges) {
+        const source = str(edge.source);
+        const target = str(edge.target);
+        if (!source || !target || edge.isDefault === true)
+            continue;
+        const roots = source === startId ? null : scopeRoots(resolveFlowScope(draft, source).refs);
+        const hit = checkCel(edge.condition, roots);
+        if (hit)
+            out.push({ target: { kind: 'edge', source, target }, level: hit.level, message: hit.message });
+    }
+    return out;
+}

package/dist/views/metadata-admin/previews/flow-problems.d.ts

@@ -0,0 +1,84 @@
+import type { DiagnosticLevel } from './simulator/flow-sim-types';
+import { type FlowEdge, type FlowNode } from './flow-canvas-layout';
+/** What a problem points at on the canvas — drives badge placement + reveal. */
+export type FlowProblemTarget = {
+    kind: 'node';
+    nodeId: string;
+} | {
+    kind: 'edge';
+    edgeKey: string;
+    source: string;
+    target: string;
+} | {
+    kind: 'flow';
+};
+/** Origin of a problem — labels the panel row and lets the UI group counts. */
+export type FlowProblemSource = 'structural' | 'server' | 'expression';
+/** One actionable issue, resolved onto a concrete canvas element. */
+export interface FlowProblem {
+    /** Stable-enough key for React lists. */
+    id: string;
+    level: DiagnosticLevel;
+    message: string;
+    target: FlowProblemTarget;
+    source: FlowProblemSource;
+    /**
+     * Extra elements to flag with the red error ring/stroke beyond `target` —
+     * e.g. every hop of a cycle. The badge + click-reveal still use `target`.
+     */
+    highlight?: {
+        nodeIds: string[];
+        edges: Array<{
+            source: string;
+            target: string;
+        }>;
+    };
+}
+/** A server diagnostic entry (subset of the layered record's `_diagnostics`). */
+export interface ServerDiagnostic {
+    /** Dotted (or array) JSON path, e.g. `nodes.2.config.objectName`. */
+    path?: string | Array<string | number>;
+    message: string;
+    /** Defaults to `'error'`. */
+    severity?: DiagnosticLevel;
+}
+/** Stable `source->target` key matching an edge problem to a rendered edge. */
+export declare function edgeProblemKey(source: string, target: string): string;
+export interface BuildFlowProblemsArgs {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    /** Server `_diagnostics`, flattened to a severity-tagged, path-keyed list. */
+    serverDiagnostics?: ServerDiagnostic[];
+    /** Declared flow variables — needed to resolve scope for the expression check. */
+    variables?: unknown[];
+}
+/**
+ * Build the unified problem list from structural validation + server
+ * diagnostics. Errors are listed before warnings; within a level each source
+ * keeps its own emit order (structural before server).
+ */
+export declare function buildFlowProblems({ nodes, edges, serverDiagnostics, variables }: BuildFlowProblemsArgs): FlowProblem[];
+/** A folded badge for one canvas element (errors dominate warnings). */
+export interface ProblemBadge {
+    level: DiagnosticLevel;
+    /** Tooltip text — each problem message on its own line. */
+    title: string;
+    count: number;
+}
+export interface ProblemIndex {
+    byNode: Map<string, ProblemBadge>;
+    byEdge: Map<string, ProblemBadge>;
+}
+/** Group problems into per-node / per-edge badges for the canvas overlay. */
+export declare function indexProblemBadges(problems: FlowProblem[]): ProblemIndex;
+/**
+ * Error elements to paint with the red ring/stroke, derived from the unified
+ * problem list. ERRORS ONLY — warnings get an amber badge but no ring. Includes
+ * each error's `highlight` set, so a cycle paints its whole loop (every hop node
+ * + edge) red while its badge still sits on the closing edge. Lets the preview
+ * derive the red sets from `problems` instead of a second validateFlowDraft pass.
+ */
+export declare function deriveInvalidElements(problems: FlowProblem[]): {
+    invalidNodeIds: string[];
+    invalidEdges: Set<string>;
+};