@object-ui/app-shell 6.2.3 → 7.0.0

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FieldsListEditor — the right-panel column manager (mainstream low-code
+ * pattern: a vertical, drag-reorderable list of fields with an inline
+ * "+ Add field" picker).
+ *
+ * This is the SINGLE owner of column read / write / reorder / remove / select
+ * logic for a View variant. It is rendered in two places so the fields list is
+ * always visible:
+ *   • {@link ViewVariantInspector} (the home / variant panel) — no row is
+ *     highlighted; clicking a row drills into the scoped column inspector.
+ *   • {@link ViewColumnInspector} (the scoped column panel) — the selected row
+ *     is highlighted and the column's detail props render below it.
+ *
+ * Columns round-trip in their original shape: string variants (e.g. kanban
+ * card fields) stay strings; object variants keep `{ field, label, … }`. The
+ * raw `columns` array is reordered / spliced directly — never normalised — so
+ * round-trips stay lossless.
+ */
+import * as React from 'react';
+import { Badge, Label } from '@object-ui/components';
+import { appendArray, moveArray, spliceArray } from '../inspectors/_shared';
+import { useObjectFields } from './useObjectFields';
+import { AddFieldPopover, FieldListRow } from './ViewColumnPanes';
+import { colFieldName, colLabel, makeColumn, remapIndexAfterMove, remapIndexAfterRemove, usedFieldNames, } from './view-column-io';
+export function FieldsListEditor({ variantKey, schema, columns, allStrings, objectName, objectFieldsOverride, selectedIndex, readOnly, onPatch, onSelectionChange, }) {
+    const canEdit = !readOnly;
+    const { fields, loading, error } = useObjectFields(objectName || undefined, objectFieldsOverride);
+    const fieldTypeByName = React.useMemo(() => {
+        const m = new Map();
+        for (const f of fields)
+            m.set(f.name, f.type);
+        return m;
+    }, [fields]);
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const [overIndex, setOverIndex] = React.useState(null);
+    const writeColumns = React.useCallback((next) => {
+        onPatch({ [variantKey]: { ...schema, columns: next } });
+    }, [onPatch, variantKey, schema]);
+    const addField = React.useCallback((field) => {
+        const col = makeColumn(allStrings, field.name, field.label);
+        const next = appendArray(columns, col);
+        writeColumns(next);
+        onSelectionChange?.({
+            kind: 'column',
+            id: `${variantKey}.columns[${next.length - 1}]`,
+            label: field.label,
+        });
+    }, [allStrings, columns, writeColumns, variantKey, onSelectionChange]);
+    const removeColumn = React.useCallback((index) => {
+        const next = spliceArray(columns, index, null);
+        writeColumns(next);
+        if (selectedIndex != null) {
+            const remapped = remapIndexAfterRemove(selectedIndex, index);
+            if (remapped == null)
+                onSelectionChange?.(null);
+            else
+                onSelectionChange?.({
+                    kind: 'column',
+                    id: `${variantKey}.columns[${remapped}]`,
+                    label: colLabel(next[remapped], remapped),
+                });
+        }
+    }, [columns, writeColumns, selectedIndex, variantKey, onSelectionChange]);
+    const moveColumn = React.useCallback((from, to) => {
+        if (from === to)
+            return;
+        const next = moveArray(columns, from, to);
+        writeColumns(next);
+        if (selectedIndex != null) {
+            const remapped = remapIndexAfterMove(selectedIndex, from, to);
+            onSelectionChange?.({
+                kind: 'column',
+                id: `${variantKey}.columns[${remapped}]`,
+                label: colLabel(next[remapped], remapped),
+            });
+        }
+    }, [columns, writeColumns, selectedIndex, variantKey, onSelectionChange]);
+    const selectColumn = React.useCallback((index) => {
+        onSelectionChange?.({
+            kind: 'column',
+            id: `${variantKey}.columns[${index}]`,
+            label: colLabel(columns[index], index),
+        });
+    }, [columns, variantKey, onSelectionChange]);
+    const usedNames = usedFieldNames(columns);
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: "Columns" }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: columns.length })] }), columns.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-3 text-center text-[11px] text-muted-foreground", children: "No columns yet. Add a field below." })) : (_jsx("div", { className: "space-y-1", children: columns.map((c, i) => (_jsx(FieldListRow, { index: i, label: colLabel(c, i), fieldName: colFieldName(c), fieldType: fieldTypeByName.get(colFieldName(c) ?? '') ?? 'text', selected: selectedIndex === i, canEdit: canEdit, dragging: dragIndex !== null, dropBefore: overIndex === i && dragIndex !== null && dragIndex !== i, onSelect: () => selectColumn(i), onRemove: () => removeColumn(i), onDragStart: () => setDragIndex(i), onDragEnd: () => {
+                        setDragIndex(null);
+                        setOverIndex(null);
+                    }, onDragOverRow: () => setOverIndex(i), onDropRow: () => {
+                        if (dragIndex != null && dragIndex !== i)
+                            moveColumn(dragIndex, i);
+                        setDragIndex(null);
+                        setOverIndex(null);
+                    } }, i))) })), canEdit && (_jsx(AddFieldPopover, { fields: fields, usedNames: usedNames, loading: loading, error: error, onAdd: addField }))] }));
+}

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

@@ -0,0 +1,43 @@
+/**
+ * FlowCanvas — an industry-standard visual flowchart designer for flow
+ * automation metadata (mirrors Power Automate / Salesforce Flow Builder).
+ *
+ * Dependency-free: no reactflow/@xyflow. Nodes are absolutely-positioned
+ * Shadcn cards over an SVG edge layer, laid out top-to-bottom by a
+ * deterministic layered algorithm (`flow-canvas-layout`). Authors can:
+ *
+ *   - drag to reposition nodes (committed to `node.ui = {x,y}` on drop),
+ *   - add nodes from a palette (toolbar or a node's bottom "+" handle),
+ *   - insert a node on an edge ("+" at the edge midpoint splits A→B),
+ *   - delete the selected node (Delete/Backspace) with full edge cleanup,
+ *   - pan (background drag) and zoom / fit-to-view.
+ *
+ * Selection is delegated to the existing FlowNodeInspector via
+ * onSelectionChange — the canvas never duplicates the inspector.
+ *
+ * The component is a pure renderer of `draft`; all mutations go through
+ * `onPatch(partial)` and the host merges + persists.
+ */
+import * as React from 'react';
+import { type FlowNode, type FlowEdge } from './flow-canvas-layout';
+export interface FlowCanvasProps {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    editable: boolean;
+    designMode: boolean;
+    selectedId: string | null;
+    /** Stable key (see `edgeKey`) of the currently-selected edge, or null. */
+    selectedEdgeId?: string | null;
+    locale?: string;
+    /** Simulation overlay: currently-executing node. */
+    activeNodeId?: string | null;
+    /** Simulation overlay: nodes already executed. */
+    visitedNodeIds?: string[];
+    /** Simulation overlay: ids of edges that were traversed. */
+    traversedEdgeIds?: string[];
+    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, onSelect, onSelectEdge, onPatch, }: FlowCanvasProps): React.JSX.Element;

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

@@ -0,0 +1,328 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FlowCanvas — an industry-standard visual flowchart designer for flow
+ * automation metadata (mirrors Power Automate / Salesforce Flow Builder).
+ *
+ * Dependency-free: no reactflow/@xyflow. Nodes are absolutely-positioned
+ * Shadcn cards over an SVG edge layer, laid out top-to-bottom by a
+ * deterministic layered algorithm (`flow-canvas-layout`). Authors can:
+ *
+ *   - drag to reposition nodes (committed to `node.ui = {x,y}` on drop),
+ *   - add nodes from a palette (toolbar or a node's bottom "+" handle),
+ *   - insert a node on an edge ("+" at the edge midpoint splits A→B),
+ *   - delete the selected node (Delete/Backspace) with full edge cleanup,
+ *   - pan (background drag) and zoom / fit-to-view.
+ *
+ * Selection is delegated to the existing FlowNodeInspector via
+ * onSelectionChange — the canvas never duplicates the inspector.
+ *
+ * The component is a pure renderer of `draft`; all mutations go through
+ * `onPatch(partial)` and the host merges + persists.
+ */
+import * as React from 'react';
+import { 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, edgePath, edgeMidpoint, edgeKey, conditionText, } from './flow-canvas-layout';
+import { NodeCard, NodePalette, defaultNodeLabel, defaultNodeExtras } from './flow-canvas-parts';
+import { useFlowNodePalette } from './useFlowNodePalette';
+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, onSelect, onSelectEdge, onPatch, }) {
+    const viewportRef = React.useRef(null);
+    const [zoom, setZoom] = React.useState(1);
+    const [pan, setPan] = React.useState({ x: 0, y: 0 });
+    const [paletteOpen, setPaletteOpen] = React.useState(false);
+    // Node types offered by the add-node palette, driven by the engine's
+    // published descriptors (`GET /api/v1/automation/actions`) merged with the
+    // hardcoded base — so the palette reflects what the backend actually supports
+    // (e.g. the `approval` node, third-party connector actions).
+    const paletteItems = useFlowNodePalette();
+    // Transient drag position override (commit-on-drop) so rapid pointer moves
+    // never spam onPatch and never diverge from the persisted draft.
+    const [dragPos, setDragPos] = React.useState(null);
+    const dragRef = React.useRef(null);
+    const panRef = React.useRef(null);
+    const layout = React.useMemo(() => computeLayout(nodes, edges), [nodes, edges]);
+    const size = React.useMemo(() => diagramSize(layout), [layout]);
+    // Simulation overlay sets (display-only; never drives engine behavior).
+    const visitedSet = React.useMemo(() => new Set(visitedNodeIds ?? []), [visitedNodeIds]);
+    const traversedSet = React.useMemo(() => new Set(traversedEdgeIds ?? []), [traversedEdgeIds]);
+    const simRunning = (visitedNodeIds?.length ?? 0) > 0 || !!activeNodeId;
+    const positionOf = React.useCallback((id) => {
+        if (dragPos && dragPos.id === id)
+            return { x: dragPos.x, y: dragPos.y };
+        return layout.get(id) ?? { x: 0, y: 0 };
+    }, [dragPos, layout]);
+    // ── Mutations ────────────────────────────────────────────────────────────
+    const persistPosition = React.useCallback((id, x, y) => {
+        if (!onPatch)
+            return;
+        const idx = nodes.findIndex((n) => n.id === id);
+        if (idx < 0)
+            return;
+        const node = nodes[idx];
+        const nextNode = { ...node, ui: { ...(node.ui ?? {}), x, y } };
+        onPatch({ nodes: spliceArray(nodes, idx, nextNode) });
+    }, [nodes, onPatch]);
+    const addNode = React.useCallback((type, opts) => {
+        if (!onPatch)
+            return;
+        const existing = nodes.map((n) => n.id).filter(Boolean);
+        const id = uniqueId('node', existing);
+        const label = type === 'end' ? 'End' : defaultNodeLabel(type);
+        // Only an explicit `at` pins a manual position. A `from`-append is left
+        // unpinned so the layered auto-layout slots it below its parent and
+        // spaces it horizontally among siblings — pinning it directly under the
+        // parent (the old behavior) made every sibling stack on the same spot.
+        const at = opts?.at;
+        const newNode = { id, type, label, ...defaultNodeExtras(type), ...(at ? { ui: { x: at.x, y: at.y } } : {}) };
+        const nextNodes = appendArray(nodes, newNode);
+        const patch = { nodes: nextNodes };
+        if (opts?.from) {
+            const newEdge = {
+                id: uniqueId('edge', edges.map((e) => e.id).filter(Boolean)),
+                source: opts.from,
+                target: id,
+            };
+            patch.edges = appendArray(edges, newEdge);
+        }
+        onPatch(patch);
+        onSelect(newNode);
+        setPaletteOpen(false);
+    }, [edges, nodes, onPatch, onSelect, positionOf]);
+    /** Split edge A→B by inserting a new node N: A→N (keeps guard) + N→B. */
+    const insertOnEdge = React.useCallback((edge, type = 'create_record') => {
+        if (!onPatch)
+            return;
+        const edgeIdx = edges.findIndex((e) => e === edge);
+        if (edgeIdx < 0)
+            return;
+        const existing = nodes.map((n) => n.id).filter(Boolean);
+        const id = uniqueId('node', existing);
+        const from = positionOf(edge.source);
+        const to = positionOf(edge.target);
+        const at = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+        const newNode = {
+            id,
+            type,
+            label: defaultNodeLabel(type),
+            ...defaultNodeExtras(type),
+            ui: { x: at.x, y: at.y },
+        };
+        // A→N inherits the original edge's branch semantics; N→B is plain.
+        const firstSegment = { ...edge, target: id };
+        const secondSegment = {
+            id: uniqueId('edge', [...edges.map((e) => e.id).filter(Boolean), 'edge']),
+            source: id,
+            target: edge.target,
+        };
+        const nextEdges = spliceArray(edges, edgeIdx, firstSegment);
+        onPatch({ nodes: appendArray(nodes, newNode), edges: appendArray(nextEdges, secondSegment) });
+        onSelect(newNode);
+    }, [edges, nodes, onPatch, onSelect, positionOf]);
+    const deleteNode = React.useCallback((id) => {
+        if (!onPatch)
+            return;
+        const nextNodes = nodes.filter((n) => n.id !== id);
+        const nextEdges = edges.filter((e) => e.source !== id && e.target !== id);
+        onPatch({ nodes: nextNodes, edges: nextEdges });
+        onSelect(null);
+    }, [edges, nodes, onPatch, onSelect]);
+    // ── Drag (reposition) — pointer capture, commit on pointer-up ──────────────
+    const onNodePointerDown = React.useCallback((id) => (e) => {
+        if (!editable || e.button !== 0)
+            return;
+        e.stopPropagation();
+        const origin = positionOf(id);
+        dragRef.current = {
+            nodeId: id,
+            startX: e.clientX,
+            startY: e.clientY,
+            originX: origin.x,
+            originY: origin.y,
+            moved: false,
+        };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+    }, [editable, positionOf]);
+    const onNodePointerMove = React.useCallback((e) => {
+        const d = dragRef.current;
+        if (!d)
+            return;
+        const dx = (e.clientX - d.startX) / zoom;
+        const dy = (e.clientY - d.startY) / zoom;
+        if (!d.moved && Math.hypot(e.clientX - d.startX, e.clientY - d.startY) < DRAG_THRESHOLD) {
+            return;
+        }
+        d.moved = true;
+        setDragPos({ id: d.nodeId, x: Math.max(0, d.originX + dx), y: Math.max(0, d.originY + dy) });
+    }, [zoom]);
+    const onNodePointerUp = React.useCallback((e) => {
+        const d = dragRef.current;
+        dragRef.current = null;
+        if (!d)
+            return;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        if (d.moved && dragPos) {
+            persistPosition(d.nodeId, Math.round(dragPos.x), Math.round(dragPos.y));
+        }
+        setDragPos(null);
+    }, [dragPos, persistPosition]);
+    // ── Pan (background drag) ──────────────────────────────────────────────────
+    const onBgPointerDown = React.useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        onSelect(null);
+        panRef.current = { startX: e.clientX, startY: e.clientY, originX: pan.x, originY: pan.y };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+    }, [onSelect, pan.x, pan.y]);
+    const onBgPointerMove = React.useCallback((e) => {
+        const p = panRef.current;
+        if (!p)
+            return;
+        setPan({ x: p.originX + (e.clientX - p.startX), y: p.originY + (e.clientY - p.startY) });
+    }, []);
+    const onBgPointerUp = React.useCallback((e) => {
+        if (panRef.current)
+            e.currentTarget.releasePointerCapture?.(e.pointerId);
+        panRef.current = null;
+    }, []);
+    // ── Zoom / fit ─────────────────────────────────────────────────────────────
+    const clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));
+    const fitToView = React.useCallback(() => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const pad = 32;
+        const zx = (vp.clientWidth - pad) / size.width;
+        const zy = (vp.clientHeight - pad) / size.height;
+        const z = clampZoom(Math.min(zx, zy, 1));
+        setZoom(z);
+        setPan({
+            x: (vp.clientWidth - size.width * z) / 2,
+            y: Math.max(16, (vp.clientHeight - size.height * z) / 2),
+        });
+    }, [size.height, size.width]);
+    // ── Keyboard: delete selected node ─────────────────────────────────────────
+    const onKeyDown = React.useCallback((e) => {
+        if (!editable || !selectedId)
+            return;
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return;
+            }
+            e.preventDefault();
+            deleteNode(selectedId);
+        }
+    }, [deleteNode, editable, selectedId]);
+    // ── Render ─────────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "relative h-full min-h-[320px] w-full overflow-hidden", children: [_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) => {
+                    onBgPointerUp(e);
+                    onNodePointerUp(e);
+                }, className: cn('h-full w-full cursor-grab outline-none active:cursor-grabbing', 'bg-muted/15 dark:bg-background/30', 
+                // Subtle inset vignette gives the canvas surface depth.
+                'shadow-[inset_0_0_90px_rgba(0,0,0,0.05)]'), style: {
+                    // Dot grid tied to pan + zoom so the surface tracks the diagram
+                    // (rather than floating behind a static texture).
+                    backgroundImage: 'radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0)',
+                    backgroundSize: `${18 * zoom}px ${18 * zoom}px`,
+                    backgroundPosition: `${pan.x}px ${pan.y}px`,
+                }, children: _jsxs("div", { className: "relative origin-top-left", style: {
+                        width: size.width,
+                        height: size.height,
+                        transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                    }, children: [_jsxs("svg", { className: "pointer-events-none absolute left-0 top-0 overflow-visible", width: size.width, height: size.height, children: [_jsx("defs", { children: _jsx("marker", { id: "flow-arrow", viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: _jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "fill-muted-foreground/55" }) }) }), edges.map((edge, i) => {
+                                    const sp = layout.get(edge.source);
+                                    const tp = layout.get(edge.target);
+                                    if (!sp || !tp)
+                                        return null;
+                                    const from = bottomAnchor(dragPos?.id === edge.source ? positionOf(edge.source) : sp);
+                                    const to = topAnchor(dragPos?.id === edge.target ? positionOf(edge.target) : tp);
+                                    const mid = edgeMidpoint(from, to);
+                                    const cond = conditionText(edge.condition);
+                                    const branchLabel = edge.isDefault ? 'else' : cond ? `if ${cond}` : edge.label;
+                                    const eid = edgeKey(edge, i);
+                                    const traversed = traversedSet.has(eid);
+                                    const selected = selectedEdgeId === eid;
+                                    const d = edgePath(from, to);
+                                    // Edges are selectable in design mode; the host opens the edge
+                                    // inspector. A wide transparent hit-path widens the click target
+                                    // beyond the 1.5px visible stroke without altering the visuals.
+                                    const selectable = designMode && !!onSelectEdge;
+                                    return (_jsxs("g", { children: [_jsx("path", { d: d, strokeLinecap: "round", className: cn('fill-none transition-[stroke] duration-150', traversed
+                                                    ? 'stroke-sky-500'
+                                                    : selected
+                                                        ? 'stroke-primary'
+                                                        : simRunning
+                                                            ? 'stroke-muted-foreground/20'
+                                                            : 'stroke-muted-foreground/40'), strokeWidth: traversed || selected ? 2.5 : 1.75, markerEnd: "url(#flow-arrow)" }), selectable && (_jsx("path", { d: d, className: "pointer-events-auto cursor-pointer fill-none stroke-transparent", strokeWidth: 14, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onSelectEdge(edge, eid);
+                                                }, children: _jsx("title", { children: `${edge.source} → ${edge.target}` }) })), branchLabel && (_jsx("foreignObject", { x: mid.x - 60, y: mid.y - 11, width: 120, height: 22, className: cn(selectable && 'pointer-events-auto'), children: _jsx("div", { className: "flex justify-center", children: _jsx("span", { onPointerDown: selectable ? (e) => e.stopPropagation() : undefined, onClick: selectable ? (e) => { e.stopPropagation(); onSelectEdge(edge, eid); } : undefined, className: cn('max-w-full truncate rounded-full border bg-background/95 px-2 py-0.5 text-[10px] font-medium shadow-sm backdrop-blur-sm transition-colors', selectable && 'cursor-pointer hover:border-primary/60', selected ? 'border-primary text-primary' : 'border-border text-muted-foreground'), children: branchLabel }) }) })), editable && (_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.
+                                                x: branchLabel ? mid.x + 66 : mid.x - 11, y: mid.y - 11, width: 22, height: 22, className: "pointer-events-auto", children: _jsx("button", { type: "button", title: "Insert node here", "aria-label": "Insert node here", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        insertOnEdge(edge);
+                                                    }, className: "inline-flex h-[22px] w-[22px] items-center justify-center rounded-full border bg-background/90 text-muted-foreground opacity-50 shadow-sm backdrop-blur-sm transition-all hover:scale-110 hover:border-primary hover:bg-background hover:text-primary hover:opacity-100 focus-visible:opacity-100", children: _jsx(Plus, { className: "h-3 w-3" }) }) }))] }, edge.id || `${edge.source}-${edge.target}-${i}`));
+                                })] }), nodes.map((node) => {
+                            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 }) }, node.id));
+                        })] }) })] }));
+}
+/** One-line config summary shown on the node card (best-effort, type-aware). */
+function nodeSummary(node) {
+    const c = node.config;
+    const str = (v) => (typeof v === 'string' && v ? v : undefined);
+    const block = (key, inner) => {
+        const b = node[key];
+        return b && typeof b === 'object' ? str(b[inner]) : undefined;
+    };
+    const pick = (k) => (c ? str(c[k]) : undefined);
+    if (node.type === 'start') {
+        return pick('condition') || pick('criteria') || pick('objectName') || pick('cron') || pick('schedule') || pick('triggerType');
+    }
+    if (node.type === 'decision') {
+        const conds = c?.conditions;
+        if (Array.isArray(conds) && conds.length) {
+            const labels = conds
+                .map((x) => (x && typeof x === 'object' ? str(x.label) : undefined))
+                .filter(Boolean);
+            return labels.length ? labels.join(' / ') : `${conds.length} branches`;
+        }
+        return pick('condition');
+    }
+    if (node.type === 'script') {
+        return pick('actionType') || pick('template') || (c && c.script ? 'code' : undefined);
+    }
+    if (node.type === 'approval') {
+        const approvers = c?.approvers;
+        const n = Array.isArray(approvers) ? approvers.length : 0;
+        const behavior = pick('behavior');
+        if (n > 0)
+            return `${n} approver${n === 1 ? '' : 's'}${behavior === 'unanimous' ? ' · all' : ''}`;
+        return behavior || undefined;
+    }
+    return (pick('objectName') ||
+        block('connectorConfig', 'actionId') ||
+        block('waitEventConfig', 'timerDuration') ||
+        block('waitEventConfig', 'eventType') ||
+        block('boundaryConfig', 'eventType') ||
+        pick('condition') ||
+        pick('flowName') ||
+        pick('url') ||
+        pick('collection') ||
+        pick('action') ||
+        pick('flow') ||
+        pick('event') ||
+        pick('duration') ||
+        undefined);
+}

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

@@ -0,0 +1,20 @@
+/**
+ * FlowPreview — read-only summary of a Flow metadata draft.
+ *
+ * A full DAG canvas lives in `@object-ui/plugin-designer` and would
+ * pull in ReactFlow + its deps every time the metadata-admin loads,
+ * which is too heavy for a glance-preview. Instead we render:
+ *
+ *   1. A header strip with type / status / runAs / version.
+ *   2. A topologically ordered step list inferred from `nodes` +
+ *      `edges`. Each step shows label, action type, branch markers,
+ *      and outgoing edge conditions so authors can sanity-check the
+ *      logic without launching the designer.
+ *   3. A variables side panel listing declared flow variables.
+ *
+ * The renderer is defensive — drafts may be mid-edit with dangling
+ * edges or duplicate node ids; we never throw, we just degrade.
+ */
+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;

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * FlowPreview — read-only summary of a Flow metadata draft.
+ *
+ * A full DAG canvas lives in `@object-ui/plugin-designer` and would
+ * pull in ReactFlow + its deps every time the metadata-admin loads,
+ * which is too heavy for a glance-preview. Instead we render:
+ *
+ *   1. A header strip with type / status / runAs / version.
+ *   2. A topologically ordered step list inferred from `nodes` +
+ *      `edges`. Each step shows label, action type, branch markers,
+ *      and outgoing edge conditions so authors can sanity-check the
+ *      logic without launching the designer.
+ *   3. A variables side panel listing declared flow variables.
+ *
+ * The renderer is defensive — drafts may be mid-edit with dangling
+ * 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 { 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';
+export function FlowPreview({ draft, editing, selection, onSelectionChange, onPatch, locale }) {
+    const d = draft;
+    const nodes = Array.isArray(d.nodes) ? d.nodes : [];
+    const edges = Array.isArray(d.edges) ? d.edges : [];
+    const variables = Array.isArray(d.variables) ? d.variables : [];
+    const designMode = !!(editing && onSelectionChange);
+    const canEdit = designMode && !!onPatch;
+    const selectedId = selection && selection.kind === 'node' ? selection.id : null;
+    const selectedEdgeId = selection && selection.kind === 'edge' ? selection.id : null;
+    const [showDebug, setShowDebug] = React.useState(false);
+    const [showVars, setShowVars] = React.useState(true);
+    const [showRuns, setShowRuns] = React.useState(false);
+    const [runHL, setRunHL] = React.useState(null);
+    const handleAddNode = React.useCallback(() => {
+        if (!canEdit)
+            return;
+        const existingIds = nodes.map((n) => n.id).filter(Boolean);
+        // A flow's first node is its trigger — seed a `start` node (not a generic
+        // `task`) so the canvas opens on the canonical entry point and the author
+        // adds subsequent steps from there.
+        const newNode = { id: uniqueId('node', existingIds), type: 'start', label: 'Start' };
+        const next = appendArray(nodes, newNode);
+        onPatch({ nodes: next });
+        onSelectionChange?.({ kind: 'node', id: newNode.id, label: newNode.label || newNode.id });
+    }, [canEdit, nodes, onPatch, onSelectionChange]);
+    // Run history needs the published flow name (the engine keys runs by it).
+    const flowName = typeof d.name === 'string' && d.name ? d.name : '';
+    const flowType = String(d.type ?? 'autolaunched');
+    const status = String(d.status ?? (d.active ? 'active' : 'draft'));
+    const runAs = String(d.runAs ?? 'user');
+    const version = d.version != null ? String(d.version) : undefined;
+    const errorStrategy = d.errorHandling?.strategy;
+    if (nodes.length === 0) {
+        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 ' +
+                                                    (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);
+                                                }, 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: () => {
+                                                    setShowDebug((v) => !v);
+                                                    setShowRuns(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, 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] }) }) }));
+}
+function Pill({ icon: Icon, label, value, tone = 'gray', }) {
+    const cls = tone === 'green'
+        ? 'text-emerald-700'
+        : tone === 'amber'
+            ? 'text-amber-700'
+            : 'text-foreground';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsxs("span", { className: "text-muted-foreground", children: [label, ":"] }), _jsx("span", { className: `font-medium ${cls}`, children: value })] }));
+}

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

@@ -0,0 +1,46 @@
+/**
+ * FlowRunsPanel — run history for a flow, fetched from the automation engine
+ * (`GET /api/v1/automation/{name}/runs`, the observability surface next to
+ * resume/screen). Renders each run's status / start time / duration with an
+ * expandable per-node step log (the `ExecutionLog.steps` ADR-0019/#1479 shape),
+ * so authors can see where a run paused or failed without leaving the Studio.
+ *
+ * Degrades like the palette fetch: offline / plugin-absent / older backend →
+ * a quiet "history unavailable" note, never an error state that blocks the
+ * designer.
+ */
+import * as React from 'react';
+/** Step entry of a run log (spec `ExecutionStepLogSchema`, fields we render). */
+interface RunStep {
+    nodeId: string;
+    nodeType?: string;
+    status: 'success' | 'failure' | 'skipped' | string;
+    durationMs?: number;
+    error?: {
+        code?: string;
+        message?: string;
+    };
+}
+/** Run log entry (spec `ExecutionLogSchema`, fields we render). */
+export interface FlowRun {
+    id: string;
+    status: 'completed' | 'failed' | 'paused' | 'running' | 'cancelled' | string;
+    startedAt?: string;
+    completedAt?: string;
+    durationMs?: number;
+    trigger?: {
+        type?: string;
+        userId?: string;
+        object?: string;
+    };
+    steps?: RunStep[];
+    error?: {
+        message?: string;
+    };
+}
+/** Fetch a flow's run history. Exposed for tests. */
+export declare function fetchFlowRuns(flowName: string, signal?: AbortSignal): Promise<FlowRun[] | null>;
+export declare function FlowRunsPanel({ flowName }: {
+    flowName: string;
+}): React.JSX.Element;
+export {};