@object-ui/app-shell 7.1.0 → 7.2.0

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

@@ -21,17 +21,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `onPatch(partial)` and the host merges + persists.
  */
 import * as React from 'react';
-import { AlertTriangle, Maximize2, Plus, ZoomIn, ZoomOut } from 'lucide-react';
+import { AlertCircle, AlertTriangle, Maximize2, Plus, ZoomIn, ZoomOut } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { uniqueId, appendArray, spliceArray } from '../inspectors/_shared';
 import { t as tr } from '../i18n';
-import { computeLayout, diagramSize, bottomAnchor, topAnchor, rightAnchor, edgePath, edgeMidpoint, backEdgePath, backEdgeLabelAnchor, isBackEdge, edgeKey, conditionText, } from './flow-canvas-layout';
+import { computeLayout, diagramSize, NODE_W, NODE_H, bottomAnchor, topAnchor, rightAnchor, edgePath, edgeMidpoint, backEdgePath, backEdgeLabelAnchor, isBackEdge, edgeKey, conditionText, } from './flow-canvas-layout';
 import { NodeCard, NodePalette, defaultNodeLabel, defaultNodeExtras } from './flow-canvas-parts';
 import { useFlowNodePalette } from './useFlowNodePalette';
+import { indexProblemBadges, edgeProblemKey } from './flow-problems';
 const MIN_ZOOM = 0.4;
 const MAX_ZOOM = 1.6;
 const DRAG_THRESHOLD = 4;
-export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, validationErrors, onSelect, onSelectEdge, onPatch, }) {
+export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, onRevealProblem, problems, revealSignal, onSelect, onSelectEdge, onPatch, }) {
     const viewportRef = React.useRef(null);
     const [zoom, setZoom] = React.useState(1);
     const [pan, setPan] = React.useState({ x: 0, y: 0 });
@@ -53,6 +54,13 @@ export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, sel
     const traversedSet = React.useMemo(() => new Set(traversedEdgeIds ?? []), [traversedEdgeIds]);
     const invalidNodeSet = React.useMemo(() => new Set(invalidNodeIds ?? []), [invalidNodeIds]);
     const simRunning = (visitedNodeIds?.length ?? 0) > 0 || !!activeNodeId;
+    // Per-element validation badges (errors dominate warnings on the same
+    // element). Derived from the live `problems` list so badges clear as issues
+    // are resolved.
+    const { byNode: nodeBadges, byEdge: edgeBadges } = React.useMemo(() => indexProblemBadges(problems ?? []), [problems]);
+    // Error-level problems shown in the always-visible inline banner — driven by
+    // the same `problems` list as the panel/badges so the three stay in lock-step.
+    const bannerErrors = React.useMemo(() => (problems ?? []).filter((p) => p.level === 'error'), [problems]);
     const positionOf = React.useCallback((id) => {
         if (dragPos && dragPos.id === id)
             return { x: dragPos.x, y: dragPos.y };
@@ -272,6 +280,31 @@ export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, sel
             y: Math.max(16, (vp.clientHeight - size.height * z) / 2),
         });
     }, [size.height, size.width]);
+    // Pan to center an element when the Problems panel asks to reveal it. Driven
+    // by a changing `nonce` so re-clicking the same problem re-centers it.
+    React.useEffect(() => {
+        if (!revealSignal)
+            return;
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const t = revealSignal.target;
+        let pt = null;
+        if (t.kind === 'node') {
+            const p = layout.get(t.nodeId);
+            if (p)
+                pt = { x: p.x + NODE_W / 2, y: p.y + NODE_H / 2 };
+        }
+        else if (t.kind === 'edge') {
+            const s = layout.get(t.source);
+            const d = layout.get(t.target);
+            if (s && d)
+                pt = { x: (s.x + d.x) / 2 + NODE_W / 2, y: (s.y + d.y) / 2 + NODE_H / 2 };
+        }
+        if (pt)
+            setPan({ x: vp.clientWidth / 2 - pt.x * zoom, y: vp.clientHeight / 2 - pt.y * zoom });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [revealSignal?.nonce]);
     // ── Keyboard: delete selected node ─────────────────────────────────────────
     const onKeyDown = React.useCallback((e) => {
         if (!editable || !selectedId)
@@ -286,7 +319,10 @@ export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, sel
         }
     }, [deleteNode, editable, selectedId]);
     // ── Render ─────────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "relative h-full min-h-[320px] w-full overflow-hidden", children: [validationErrors && validationErrors.length > 0 && (_jsxs("div", { className: "absolute left-2 top-2 z-30 max-w-[min(60%,420px)] space-y-1", children: [validationErrors.slice(0, 3).map((msg, i) => (_jsxs("div", { role: "alert", className: "flex items-start gap-1.5 rounded-lg border border-destructive/40 bg-destructive/10 px-2.5 py-1.5 text-[11px] leading-snug text-destructive shadow-sm backdrop-blur-sm", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: msg })] }, i))), validationErrors.length > 3 && (_jsxs("div", { className: "px-2.5 text-[10px] text-destructive/80", children: ["+", validationErrors.length - 3, " more\u2026"] }))] })), _jsxs("div", { className: "absolute right-2 top-2 z-30 flex items-center gap-1.5", children: [editable && (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setPaletteOpen((v) => !v), className: "inline-flex items-center gap-1.5 rounded-lg border bg-background/90 px-2.5 py-1.5 text-xs font-medium shadow-sm backdrop-blur-sm transition-colors hover:border-primary/50 hover:bg-accent hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), tr('engine.inspector.add.node', locale)] }), paletteOpen && (_jsx(NodePalette, { locale: locale, items: paletteItems, onClose: () => setPaletteOpen(false), onPick: (type) => addNode(type, { from: selectedId ?? undefined }) }))] })), _jsxs("div", { className: "flex items-center rounded-lg border bg-background/90 shadow-sm backdrop-blur-sm", children: [_jsx("button", { type: "button", title: "Zoom out", "aria-label": "Zoom out", onClick: () => setZoom((z) => clampZoom(z - 0.15)), className: "inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(ZoomOut, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "w-10 text-center text-[11px] tabular-nums text-muted-foreground", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", title: "Zoom in", "aria-label": "Zoom in", onClick: () => setZoom((z) => clampZoom(z + 0.15)), className: "inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(ZoomIn, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", title: "Fit to view", "aria-label": "Fit to view", onClick: fitToView, className: "inline-flex h-7 w-7 items-center justify-center border-l text-muted-foreground hover:text-foreground", children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { ref: viewportRef, tabIndex: 0, role: "application", "aria-label": "Flow canvas", onKeyDown: onKeyDown, onPointerDown: onBgPointerDown, onPointerMove: (e) => {
+    return (_jsxs("div", { className: "relative h-full min-h-[320px] w-full overflow-hidden", children: [bannerErrors.length > 0 && (_jsxs("div", { className: "absolute left-2 top-2 z-30 max-w-[min(60%,420px)] space-y-1", children: [bannerErrors.slice(0, 3).map((p) => {
+                        const clickable = !!onRevealProblem && p.target.kind !== 'flow';
+                        return (_jsxs("button", { type: "button", role: "alert", disabled: !clickable, onPointerDown: (e) => e.stopPropagation(), onClick: clickable ? (e) => { e.stopPropagation(); onRevealProblem(p); } : undefined, title: clickable ? 'Reveal on canvas' : undefined, className: cn('flex w-full items-start gap-1.5 rounded-lg border border-destructive/40 bg-destructive/10 px-2.5 py-1.5 text-left text-[11px] leading-snug text-destructive shadow-sm backdrop-blur-sm transition-colors', clickable && 'cursor-pointer hover:border-destructive/60 hover:bg-destructive/20'), children: [_jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsx("span", { children: p.message })] }, p.id));
+                    }), bannerErrors.length > 3 && (_jsxs("div", { className: "px-2.5 text-[10px] text-destructive/80", children: ["+", bannerErrors.length - 3, " more\u2026"] }))] })), _jsxs("div", { className: "absolute right-2 top-2 z-30 flex items-center gap-1.5", children: [editable && (_jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setPaletteOpen((v) => !v), className: "inline-flex items-center gap-1.5 rounded-lg border bg-background/90 px-2.5 py-1.5 text-xs font-medium shadow-sm backdrop-blur-sm transition-colors hover:border-primary/50 hover:bg-accent hover:text-foreground", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), tr('engine.inspector.add.node', locale)] }), paletteOpen && (_jsx(NodePalette, { locale: locale, items: paletteItems, onClose: () => setPaletteOpen(false), onPick: (type) => addNode(type, { from: selectedId ?? undefined }) }))] })), _jsxs("div", { className: "flex items-center rounded-lg border bg-background/90 shadow-sm backdrop-blur-sm", children: [_jsx("button", { type: "button", title: "Zoom out", "aria-label": "Zoom out", onClick: () => setZoom((z) => clampZoom(z - 0.15)), className: "inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(ZoomOut, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "w-10 text-center text-[11px] tabular-nums text-muted-foreground", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", title: "Zoom in", "aria-label": "Zoom in", onClick: () => setZoom((z) => clampZoom(z + 0.15)), className: "inline-flex h-7 w-7 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(ZoomIn, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", title: "Fit to view", "aria-label": "Fit to view", onClick: fitToView, className: "inline-flex h-7 w-7 items-center justify-center border-l text-muted-foreground hover:text-foreground", children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { ref: viewportRef, tabIndex: 0, role: "application", "aria-label": "Flow canvas", onKeyDown: onKeyDown, onPointerDown: onBgPointerDown, onPointerMove: (e) => {
                     onBgPointerMove(e);
                     onNodePointerMove(e);
                 }, onPointerUp: (e) => {
@@ -325,6 +361,7 @@ export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, sel
                                     const cond = conditionText(edge.condition);
                                     const branchLabel = edge.isDefault ? 'else' : cond ? `if ${cond}` : edge.label;
                                     const eid = edgeKey(edge, i);
+                                    const edgeBadge = edgeBadges.get(edgeProblemKey(edge.source, edge.target));
                                     const traversed = traversedSet.has(eid);
                                     const selected = selectedEdgeId === eid;
                                     const d = back ? backEdgePath(from, to) : edgePath(from, to);
@@ -351,7 +388,9 @@ export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, sel
                                                                 ? 'border-destructive/60 text-destructive'
                                                                 : back
                                                                     ? 'border-amber-500/50 text-amber-600 dark:text-amber-400'
-                                                                    : 'border-border text-muted-foreground'), children: branchLabel }) }) })), editable && !back && (_jsx("foreignObject", { 
+                                                                    : 'border-border text-muted-foreground'), children: branchLabel }) }) })), edgeBadge && (_jsx("foreignObject", { x: labelPos.x - 9, y: labelPos.y - 30, width: 18, height: 18, className: "pointer-events-auto overflow-visible", children: _jsx("span", { title: edgeBadge.title, "data-problem": edgeBadge.level, className: cn('inline-flex h-[18px] w-[18px] items-center justify-center rounded-full border bg-background shadow-sm', edgeBadge.level === 'error'
+                                                        ? 'border-destructive/50 text-destructive'
+                                                        : 'border-amber-500/50 text-amber-600 dark:text-amber-400'), children: edgeBadge.level === 'error' ? (_jsx(AlertCircle, { className: "h-3 w-3" })) : (_jsx(AlertTriangle, { className: "h-3 w-3" })) }) })), editable && !back && (_jsx("foreignObject", { 
                                                 // Sit the insert handle at the edge midpoint, but slide it
                                                 // to the right of the branch-label pill when one is present
                                                 // so the two don't stack on the same spot.
@@ -363,7 +402,7 @@ export function FlowCanvas({ nodes, edges, editable, designMode, selectedId, sel
                             const runState = activeNodeId === node.id ? 'active' : visitedSet.has(node.id) ? 'visited' : undefined;
                             return (_jsx(NodeCard, { id: node.id, type: node.type, label: node.label || node.id, summary: nodeSummary(node), position: positionOf(node.id), selected: selectedId === node.id, editable: editable, runState: runState, dimmed: simRunning && !runState, onPointerDown: onNodePointerDown(node.id), onSelect: () => designMode && onSelect(node), onAppend: () => addNode('create_record', { from: node.id }), onAddReviseLoop: editable && node.type === 'approval' && !reviseLoopSources.has(node.id)
                                     ? () => addReviseLoop(node.id)
-                                    : undefined, invalid: invalidNodeSet.has(node.id) }, node.id));
+                                    : undefined, invalid: invalidNodeSet.has(node.id), badge: nodeBadges.get(node.id) }, node.id));
                         })] }) })] }));
 }
 /** One-line config summary shown on the node card (best-effort, type-aware). */

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

@@ -17,4 +17,4 @@
  */
 import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function FlowPreview({ draft, editing, selection, onSelectionChange, onPatch, locale }: MetadataPreviewProps): React.JSX.Element;
+export declare function FlowPreview({ draft, editing, selection, onSelectionChange, onPatch, locale, diagnostics }: MetadataPreviewProps): React.JSX.Element;

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[];