@object-ui/app-shell 7.1.0 → 7.3.0

package/dist/views/metadata-admin/inspectors/flow-scope.js

@@ -0,0 +1,199 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/** Trigger types that fire on a single record (so `record` is in scope). */
+const RECORD_TRIGGER_TYPES = new Set([
+    'record-after-create',
+    'record-after-update',
+    'record-before-update',
+    'record-after-delete',
+    'record-change',
+]);
+/** Trigger types that carry a meaningful `previous` snapshot of the record. */
+const PREVIOUS_TRIGGER_TYPES = new Set([
+    'record-after-update',
+    'record-before-update',
+    'record-change',
+]);
+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;
+}
+/**
+ * Ancestor node ids of `nodeId` — every node from which `nodeId` is reachable
+ * by following edges forward (equivalently, a reverse breadth-first walk from
+ * `nodeId`). Cycle-safe (a declared `back`-edge revise loop won't spin) and
+ * never includes `nodeId` itself.
+ */
+export function flowAncestors(nodeId, edges) {
+    const rev = new Map();
+    for (const e of edges) {
+        const s = str(e.source);
+        const t = str(e.target);
+        if (!s || !t)
+            continue;
+        const list = rev.get(t);
+        if (list)
+            list.push(s);
+        else
+            rev.set(t, [s]);
+    }
+    const seen = new Set();
+    const stack = [...(rev.get(nodeId) ?? [])];
+    while (stack.length) {
+        const cur = stack.pop();
+        if (cur === nodeId || seen.has(cur))
+            continue;
+        seen.add(cur);
+        for (const p of rev.get(cur) ?? [])
+            stack.push(p);
+    }
+    return seen;
+}
+/**
+ * The variable names a node INTRODUCES into scope for its successors — mirroring
+ * what the simulator (flow-simulator.ts) and engine actually write:
+ * `outputVariable` (single), `outputVariables` (list), an assignment node's
+ * `assignments` keys (map / array / flat shapes), a screen's collected
+ * `fields[].name`, a screen object-form's `idVariable`, and a loop/map
+ * `iteratorVariable` (flagged as a `loop` ref). The start node is NOT handled
+ * here — its trigger record is resolved separately.
+ */
+export function nodeOutputRefs(node) {
+    const type = str(node.type);
+    const cfg = asRecord(node.config);
+    const nodeId = str(node.id) ?? '';
+    const label = str(node.label);
+    const detail = label && label !== nodeId ? label : nodeId || undefined;
+    const out = [];
+    const add = (token, group = 'outputs') => {
+        if (token && !out.some((r) => r.token === token)) {
+            out.push({ token, label: token, detail, group });
+        }
+    };
+    // Loop / map iterator — its own group.
+    if (type === 'loop' || type === 'map')
+        add(str(cfg.iteratorVariable), 'loop');
+    // Single + multi output variables (create/get/http/subflow/map/end/script).
+    add(str(cfg.outputVariable));
+    for (const name of asArray(cfg.outputVariables))
+        add(str(name));
+    // Screen object-form: the saved record's id is bound to a variable.
+    add(str(cfg.idVariable));
+    // Assignment node — the assigned variable names. Accepts the three authoring
+    // shapes the simulator/engine accept: an array of `{variable|name|key}`, a
+    // flat `{ var: value }` map, or (legacy) keys directly on config.
+    if (type === 'assignment') {
+        const raw = cfg.assignments;
+        if (Array.isArray(raw)) {
+            for (const item of raw) {
+                const e = asRecord(item);
+                add(str(e.variable) ?? str(e.name) ?? str(e.key));
+            }
+        }
+        else if (raw && typeof raw === 'object') {
+            for (const k of Object.keys(raw))
+                add(k);
+        }
+    }
+    // Screen — collected input field names become variables for downstream nodes.
+    if (type === 'screen' || type === 'user_task') {
+        for (const f of asArray(cfg.fields))
+            add(str(asRecord(f).name));
+    }
+    return out;
+}
+/** De-duplicate by token, keeping the first (group-priority) occurrence. */
+function dedupeByToken(refs) {
+    const seen = new Set();
+    return refs.filter((r) => (seen.has(r.token) ? false : (seen.add(r.token), true)));
+}
+/**
+ * Resolve the in-scope reference set at `nodeId` (graph-aware). Pure: the
+ * trigger object's fields are NOT expanded here (that needs an async fetch) —
+ * the returned `trigger` carries the object name and per-field token prefix for
+ * the UI layer to expand. Order: flow variables, upstream outputs, loop
+ * iterators, then trigger refs, de-duplicated by token.
+ */
+export function resolveFlowScope(draft, nodeId) {
+    const nodes = asArray(draft.nodes).map(asRecord);
+    const edges = asArray(draft.edges);
+    const refs = [];
+    // 1. Flow variables — always in scope (declared up-front).
+    for (const v of asArray(draft.variables)) {
+        const rec = asRecord(v);
+        const name = str(rec.name);
+        if (!name)
+            continue;
+        const type = str(rec.type);
+        refs.push({ token: name, label: name, detail: type ? `variable · ${type}` : 'variable', group: 'variables' });
+    }
+    if (!nodeId)
+        return { refs: dedupeByToken(refs) };
+    // 2. Upstream outputs + loop iterators — from ANCESTOR nodes only.
+    const ancestors = flowAncestors(nodeId, edges);
+    const startNode = nodes.find((n) => str(n.type) === 'start');
+    const startId = str(startNode?.id);
+    for (const node of nodes) {
+        const id = str(node.id);
+        if (!id || id === nodeId || !ancestors.has(id))
+            continue;
+        if (id === startId)
+            continue; // the start node contributes the trigger record, below
+        for (const ref of nodeOutputRefs(node))
+            refs.push(ref);
+    }
+    // 3. Trigger record — on a record-triggered flow, when the start node is in
+    //    scope: either we ARE the start node (editing its own entry condition) or
+    //    the start node is an ancestor (it is the ancestor of everything reachable).
+    if (startNode) {
+        const cfg = asRecord(startNode.config);
+        const triggerType = str(cfg.triggerType);
+        const objectName = str(cfg.objectName);
+        const isRecordTrigger = !!triggerType && RECORD_TRIGGER_TYPES.has(triggerType);
+        const startInScope = startId === nodeId || (!!startId && ancestors.has(startId));
+        if (isRecordTrigger && objectName && startInScope) {
+            const onStart = startId === nodeId;
+            const includePrevious = PREVIOUS_TRIGGER_TYPES.has(triggerType);
+            // On the start node the record's fields ARE the bare evaluation context
+            // (`status`), so the whole record is not a named ref there; `previous` is
+            // (`previous.status`). Downstream the record is the named `record` object.
+            if (!onStart) {
+                refs.push({ token: 'record', label: 'record', detail: `trigger record · ${objectName}`, group: 'trigger' });
+            }
+            if (includePrevious) {
+                refs.push({ token: 'previous', label: 'previous', detail: 'record values before the change', group: 'trigger' });
+            }
+            return { refs: dedupeByToken(refs), trigger: { objectName, fieldPrefix: onStart ? '' : 'record.', includePrevious } };
+        }
+    }
+    return { refs: dedupeByToken(refs) };
+}
+/**
+ * Expand a trigger object's fields into per-field refs — `record.<field>`
+ * downstream, bare `<field>` on the start node — given an already-fetched field
+ * list. Split out from {@link resolveFlowScope} so it is unit-testable without a
+ * metadata client.
+ */
+export function triggerFieldRefs(trigger, fields) {
+    const out = [];
+    for (const f of fields) {
+        if (!f?.name)
+            continue;
+        const token = `${trigger.fieldPrefix}${f.name}`;
+        const detail = f.label && f.label !== f.name ? f.label : f.type;
+        out.push({ token, label: token, detail, group: 'trigger' });
+        if (trigger.includePrevious) {
+            out.push({
+                token: `previous.${f.name}`,
+                label: `previous.${f.name}`,
+                detail: detail ? `prior ${detail}` : 'prior value',
+                group: 'trigger',
+            });
+        }
+    }
+    return out;
+}

package/dist/views/metadata-admin/inspectors/useDatasetFields.d.ts

@@ -46,10 +46,21 @@ export interface NormalizedObject {
 /** Normalize a raw object metadata doc into label + fields + relationships. */
 export declare function normalizeObject(doc: Record<string, unknown> | null | undefined, name: string): NormalizedObject;
 /**
- * Build the flat `field` / `relationship.field` option list from the base
- * object and the included relationships' (already-fetched) target objects.
+ * Walk a dotted relationship PATH from the base object, returning the object at
+ * its end (whose fields a `path.field` references) plus each hop's relationship
+ * label, or undefined if any hop can't be resolved (ADR-0071 multi-hop).
+ * `objectsByName` holds the already-fetched objects along the chain.
  */
-export declare function buildFieldOptions(base: NormalizedObject, include: string[], targets: Record<string, NormalizedObject>): DatasetFieldOption[];
+export declare function resolvePath(base: NormalizedObject, path: string, objectsByName: Record<string, NormalizedObject>): {
+    target: NormalizedObject;
+    labels: string[];
+} | undefined;
+/**
+ * Build the flat `field` / `relationship[.relationship].field` option list from
+ * the base object and the (already-fetched) objects along each included PATH.
+ * Single-hop paths behave exactly as before.
+ */
+export declare function buildFieldOptions(base: NormalizedObject, include: string[], objectsByName: Record<string, NormalizedObject>): DatasetFieldOption[];
 /** Recursively test whether a metadata doc references `datasetName` via a `dataset` key. */
 export declare function referencesDataset(doc: unknown, datasetName: string): boolean;
 /** Every object as `{ name, label }`, sorted by label. Fetched once. */

package/dist/views/metadata-admin/inspectors/useFlowScope.d.ts

@@ -0,0 +1,23 @@
+import { type ScopeGroupId, type ScopeRef } from './flow-scope';
+export interface ScopeGroup {
+    id: ScopeGroupId;
+    label: string;
+    refs: ScopeRef[];
+}
+export interface UseFlowScopeResult {
+    /** Non-empty groups, in display order. */
+    groups: ScopeGroup[];
+    /** Flat, de-duplicated ref list (all groups). */
+    refs: ScopeRef[];
+    /** True while the trigger object's fields are still loading. */
+    loading: boolean;
+    /** No references in scope — the field should render as a plain input. */
+    isEmpty: boolean;
+}
+/**
+ * Resolve + (async) expand the in-scope references at a flow node. `draft` is
+ * the whole flow draft; `nodeId` the node being edited (for an edge, pass its
+ * source node id — references available on an edge are those in scope at its
+ * source).
+ */
+export declare function useFlowScope(draft: Record<string, unknown> | undefined, nodeId: string | undefined): UseFlowScopeResult;

package/dist/views/metadata-admin/inspectors/useFlowScope.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * useFlowScope — React adapter over the pure {@link resolveFlowScope} graph-walk
+ * that powers the inspector's variable data-picker (#1934).
+ *
+ * It resolves the graph-aware refs synchronously, then lazily fetches the
+ * trigger object's field catalog (via the shared metadata client) and merges
+ * the expanded `record.<field>` refs in — grouping everything into the ordered
+ * sections the picker renders. An empty result (`isEmpty`) tells the field to
+ * degrade to a plain input.
+ */
+import * as React from 'react';
+import { resolveFlowScope, triggerFieldRefs, } from './flow-scope';
+import { useObjectFields } from '../previews/useObjectFields';
+const GROUP_ORDER = ['variables', 'outputs', 'loop', 'trigger'];
+const GROUP_LABELS = {
+    variables: 'Flow variables',
+    outputs: 'Upstream outputs',
+    loop: 'Loop item',
+    trigger: 'Trigger record',
+};
+/**
+ * Resolve + (async) expand the in-scope references at a flow node. `draft` is
+ * the whole flow draft; `nodeId` the node being edited (for an edge, pass its
+ * source node id — references available on an edge are those in scope at its
+ * source).
+ */
+export function useFlowScope(draft, nodeId) {
+    const scope = React.useMemo(() => resolveFlowScope(draft ?? {}, nodeId), [draft, nodeId]);
+    const { fields, loading } = useObjectFields(scope.trigger?.objectName);
+    return React.useMemo(() => {
+        const all = [...scope.refs];
+        if (scope.trigger)
+            all.push(...triggerFieldRefs(scope.trigger, fields));
+        // Global de-dup by token (a declared var also written upstream shows once).
+        const seen = new Set();
+        const refs = all.filter((r) => (seen.has(r.token) ? false : (seen.add(r.token), true)));
+        const groups = GROUP_ORDER.map((id) => ({
+            id,
+            label: GROUP_LABELS[id],
+            refs: refs.filter((r) => r.group === id),
+        })).filter((g) => g.refs.length > 0);
+        return { groups, refs, loading: !!scope.trigger && loading, isEmpty: refs.length === 0 };
+    }, [scope, fields, loading]);
+}

package/dist/views/metadata-admin/package-scope.d.ts

@@ -1,24 +1,14 @@
 /**
- * Sentinel "package" id for this environment's runtime, DB-authored metadata —
- * items with no code-package binding (`package_id IS NULL`). The metadata
- * list/get API treats `?package=sys_metadata` as exactly that local scope on
- * READ, and a WRITE under it persists `package_id = null` (matching the
- * server's runtime-only provenance, see framework #2252).
+ * Build the Studio package-scope options from the raw `package` metadata list:
+ * the **writable bases** (project-scoped, DB-backed packages) only — the sole
+ * valid authoring destinations (ADR-0070 D2). Code/installed (system|cloud)
+ * packages are filtered out.
  *
- * Why this exists: a self-hosted, metadata-customizable environment is
- * single-tenant — there is no "org" dimension here; the real axis is
- * code-package vs. runtime (DB-authored). Before this scope, the package
- * selector only listed code packages, so metadata authored at runtime
- * (`package_id = null`) was filtered out of every code-package view and became
- * un-navigable (the route redirected to "new"). Surfacing the local scope as a
- * first-class, always-present selector entry makes it discoverable and editable.
- */
-export declare const LOCAL_PACKAGE_ID = "sys_metadata";
-/**
- * Build the Studio package-scope options from the raw `package` metadata list.
- * Filters out system/cloud-scoped packages and appends a stable
- * "Local / Custom (this environment)" scope so runtime metadata authored here
- * is always selectable/visible — even when zero items exist yet.
+ * There is no package-less "Local / Custom" scope: every runtime-authored item
+ * lives in a writable base (ADR-0070 D1/D5 — the kernel rejects orphan creates
+ * with `writable_package_required`, and legacy orphans are adopted into a base),
+ * so the selector never offers an orphan bucket. The kernel keeps `null` /
+ * `sys_metadata` provenance only as a read-side rehydration tag for legacy rows.
  */
 export declare function buildPackageScopeOptions(rawList: unknown[] | null | undefined): {
     id: string;

package/dist/views/metadata-admin/package-scope.js

@@ -1,27 +1,16 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
-import { detectLocale, t } from './i18n';
-/**
- * Sentinel "package" id for this environment's runtime, DB-authored metadata —
- * items with no code-package binding (`package_id IS NULL`). The metadata
- * list/get API treats `?package=sys_metadata` as exactly that local scope on
- * READ, and a WRITE under it persists `package_id = null` (matching the
- * server's runtime-only provenance, see framework #2252).
- *
- * Why this exists: a self-hosted, metadata-customizable environment is
- * single-tenant — there is no "org" dimension here; the real axis is
- * code-package vs. runtime (DB-authored). Before this scope, the package
- * selector only listed code packages, so metadata authored at runtime
- * (`package_id = null`) was filtered out of every code-package view and became
- * un-navigable (the route redirected to "new"). Surfacing the local scope as a
- * first-class, always-present selector entry makes it discoverable and editable.
- */
-export const LOCAL_PACKAGE_ID = 'sys_metadata';
 const SYSTEM_SCOPES = new Set(['system', 'cloud']);
 /**
- * Build the Studio package-scope options from the raw `package` metadata list.
- * Filters out system/cloud-scoped packages and appends a stable
- * "Local / Custom (this environment)" scope so runtime metadata authored here
- * is always selectable/visible — even when zero items exist yet.
+ * Build the Studio package-scope options from the raw `package` metadata list:
+ * the **writable bases** (project-scoped, DB-backed packages) only — the sole
+ * valid authoring destinations (ADR-0070 D2). Code/installed (system|cloud)
+ * packages are filtered out.
+ *
+ * There is no package-less "Local / Custom" scope: every runtime-authored item
+ * lives in a writable base (ADR-0070 D1/D5 — the kernel rejects orphan creates
+ * with `writable_package_required`, and legacy orphans are adopted into a base),
+ * so the selector never offers an orphan bucket. The kernel keeps `null` /
+ * `sys_metadata` provenance only as a read-side rehydration tag for legacy rows.
  */
 export function buildPackageScopeOptions(rawList) {
     const rows = (rawList ?? [])
@@ -36,8 +25,5 @@ export function buildPackageScopeOptions(rawList) {
     })
         .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
     rows.sort((a, b) => a.name.localeCompare(b.name));
-    const opts = rows.map((p) => ({ id: p.id, name: p.name }));
-    // Append (never default) so the existing first-code-package default is
-    // preserved; the user opts into the local scope explicitly.
-    return [...opts, { id: LOCAL_PACKAGE_ID, name: t('engine.package.local', detectLocale()) }];
+    return rows.map((p) => ({ id: p.id, name: p.name }));
 }

package/dist/views/metadata-admin/preview-registry.d.ts

@@ -84,6 +84,18 @@ export interface MetadataPreviewProps {
      * "click widget → edit widget in the right panel" pattern.
      */
     onSelectionChange?: (selection: MetadataSelection | null) => void;
+    /**
+     * Optional: server-computed validation diagnostics for the current draft
+     * (the layered record's `_diagnostics`, kept in sync with live client-side
+     * issues). Each entry carries a dotted JSON path so a preview can map it onto
+     * the offending sub-element. Used by the flow preview's Problems panel +
+     * on-canvas badges; ignored by previews that don't surface diagnostics.
+     */
+    diagnostics?: Array<{
+        path?: string;
+        message: string;
+        severity?: 'error' | 'warning';
+    }>;
 }
 export type MetadataPreview = ComponentType<MetadataPreviewProps>;
 /**

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

@@ -20,6 +20,7 @@
  */
 import * as React from 'react';
 import { type FlowNode, type FlowEdge } from './flow-canvas-layout';
+import { type FlowProblem } from './flow-problems';
 export interface FlowCanvasProps {
     nodes: FlowNode[];
     edges: FlowEdge[];
@@ -39,11 +40,29 @@ export interface FlowCanvasProps {
     invalidNodeIds?: string[];
     /** Structural-validation: edges (keyed `${source}->${target}`) to paint red. */
     invalidEdges?: ReadonlySet<string>;
-    /** Structural-validation error messages shown in an inline canvas banner. */
-    validationErrors?: string[];
+    /**
+     * Select + reveal a problem when its inline-banner row is clicked — wired to
+     * the same handler the Problems panel uses, so the always-visible banner is
+     * actionable without opening the panel.
+     */
+    onRevealProblem?: (problem: FlowProblem) => void;
+    /**
+     * Unified validation issues (structural + server) rendered as per-element
+     * badges; the Problems panel shares the same list.
+     */
+    problems?: FlowProblem[];
+    /**
+     * Imperative "reveal" request from the Problems panel: when `nonce` changes
+     * the canvas pans to center the targeted node/edge. Selection highlight is
+     * driven separately via `selectedId` / `selectedEdgeId`.
+     */
+    revealSignal?: {
+        target: FlowProblem['target'];
+        nonce: number;
+    } | null;
     onSelect: (node: FlowNode | null) => void;
     /** Select an edge (its `edgeKey`), or clear selection with `null`. */
     onSelectEdge?: (edge: FlowEdge | null, key: string) => void;
     onPatch?: (partial: Record<string, unknown>) => void;
 }
-export declare function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, validationErrors, onSelect, onSelectEdge, onPatch, }: FlowCanvasProps): React.JSX.Element;
+export declare function FlowCanvas({ nodes, edges, editable, designMode, selectedId, selectedEdgeId, locale, activeNodeId, visitedNodeIds, traversedEdgeIds, invalidNodeIds, invalidEdges, onRevealProblem, problems, revealSignal, onSelect, onSelectEdge, onPatch, }: FlowCanvasProps): React.JSX.Element;

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;