nucleus-core-ts 0.10.116 → 0.10.118

package/dist/.build-ok

@@ -1 +1 @@
-0.10.116
+0.10.118

package/dist/fe/components/VerificationFlowPage/components/PendingTab.d.ts

@@ -9,6 +9,9 @@ interface PendingTabProps {
     onDecisionMade?: (entityName: string, entityId: string) => void;
     /** Spread over the English defaults; omit it and the tab stays English. */
     labels?: Partial<VerificationFlowLabels>;
+    /** Names the record a decision is about. See `VerificationFlowPageProps`. */
+    describeEntity?: (entityName: string, entityId: string) => string | undefined;
+    entityHref?: (entityName: string, entityId: string) => string | undefined;
 }
-export declare function PendingTab({ pendingAction, decideAction, uploadSignatureAction, onDecisionMade, labels, }: PendingTabProps): ReactElement;
+export declare function PendingTab({ pendingAction, decideAction, uploadSignatureAction, onDecisionMade, labels, describeEntity, entityHref, }: PendingTabProps): ReactElement;
 export {};

package/dist/fe/components/VerificationFlowPage/components/PendingTab.js

@@ -5,11 +5,26 @@ import { DEFAULT_VERIFICATION_FLOW_LABELS } from '../labels';
 import { useVerificationFlowStore } from '../store';
 import { getActiveTheme } from '../theme/store';
 import { planDecision, signatureFileType } from './decisionPlan';
-export function PendingTab({ pendingAction, decideAction, uploadSignatureAction, onDecisionMade, labels }) {
+export function PendingTab({ pendingAction, decideAction, uploadSignatureAction, onDecisionMade, labels, describeEntity, entityHref }) {
     // Local, not in the store: only one card is in deciding mode at a time, and
     // a chosen file must not survive cancelling out of that card.
     const [signatureFile, setSignatureFile] = useState(null);
-    const [signatureNote, setSignatureNote] = useState(null);
+    /*
+   * Renamed from `signatureNote`, and that is the whole bug.
+   *
+   * It carried every engine refusal — wrong role, already signed an earlier
+   * step, account switched off — but its ONE render site sat inside the
+   * `require_signature` branch. On a step that needs no signature (the
+   * ordinary case) pressing Approve wrote the refusal into state that nothing
+   * rendered: the card stayed open, nothing was recorded, and the reviewer was
+   * told nothing at all. It is now its own always-rendered block.
+   */ const [decisionNote, setDecisionNote] = useState(null);
+    /*
+   * A queue that could not be READ is not an empty queue. Both failure paths
+   * used to call `setPendingItems([])`, so a 500, an expired session and a
+   * genuinely clear queue all rendered the same reassuring tick and
+   * "No pending verifications".
+   */ const [loadError, setLoadError] = useState(null);
     const theme = getActiveTheme();
     const say = {
         ...DEFAULT_VERIFICATION_FLOW_LABELS,
@@ -18,6 +33,7 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
     const store = useVerificationFlowStore();
     const loadPending = useEffectEvent(()=>{
         store.setLoadingPending(true);
+        setLoadError(null);
         pendingAction.start({
             payload: undefined,
             onAfterHandle: (res)=>{
@@ -25,6 +41,7 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
                 if (response.success === false) {
                     console.error('[PendingTab] API returned success=false:', res);
                     store.setPendingItems([]);
+                    setLoadError(response.message || say.pendingLoadFailedBody);
                     store.setLoadingPending(false);
                     return;
                 }
@@ -36,6 +53,7 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
                 const msg = errObj?.message || errObj?.error || JSON.stringify(err);
                 console.error(`[PendingTab] Pending error (HTTP ${code ?? '?'}):`, msg);
                 store.setPendingItems([]);
+                setLoadError(typeof msg === 'string' ? msg : say.pendingLoadFailedBody);
                 store.setLoadingPending(false);
             }
         });
@@ -72,19 +90,19 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
            * already says exactly what is wrong, and a reviewer can act on
            * "cannot decide it" in a way they cannot act on "something failed".
            */ if (res && res.success === false) {
-                    setSignatureNote(res.message || say.decisionRefused);
+                    setDecisionNote(res.message || say.decisionRefused);
                     return;
                 }
                 store.setDecidingId(null);
                 store.setDecisionReason('');
                 setSignatureFile(null);
-                setSignatureNote(null);
+                setDecisionNote(null);
                 onDecisionMade?.(item.entity_name, item.entity_id);
                 loadPending();
             },
             onErrorHandle: (err)=>{
                 const msg = err?.message;
-                setSignatureNote(msg || say.decisionRefused);
+                setDecisionNote(msg || say.decisionRefused);
             }
         });
     });
@@ -99,7 +117,7 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
    * uploaded as the signed-in user and only its id is sent. A rejection needs
    * no signature: you do not sign what you are refusing.
    */ const handleDecide = useEffectEvent((item, decision)=>{
-        setSignatureNote(null);
+        setDecisionNote(null);
         const plan = planDecision({
             decision,
             requireSignature: item.require_signature,
@@ -111,7 +129,7 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
             return;
         }
         if (plan.kind === 'blocked') {
-            setSignatureNote(plan.reason === 'no-upload-action' ? say.signatureUnavailable : say.signatureMissing);
+            setDecisionNote(plan.reason === 'no-upload-action' ? say.signatureUnavailable : say.signatureMissing);
             return;
         }
         if (!uploadSignatureAction || !signatureFile) return;
@@ -126,7 +144,7 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
             extension: signatureFile.name.split('.').pop() || '',
             type: signatureFileType(signatureFile.type)
         }));
-        setSignatureNote(say.signatureUploading);
+        setDecisionNote(say.signatureUploading);
         uploadSignatureAction.start({
             payload: form,
             onAfterHandle: (res)=>{
@@ -134,12 +152,12 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
                 if (!id) {
                     // Reported, never swallowed: a decision that silently did not happen
                     // is worse than one that failed loudly.
-                    setSignatureNote(say.signatureUploadFailed);
+                    setDecisionNote(say.signatureUploadFailed);
                     return;
                 }
                 sendDecision(item, decision, id);
             },
-            onErrorHandle: ()=>setSignatureNote(say.signatureUploadFailed)
+            onErrorHandle: ()=>setDecisionNote(say.signatureUploadFailed)
         });
     });
     if (store.isLoadingPending) {
@@ -150,6 +168,36 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
             })
         });
     }
+    /*
+   * The failure state comes FIRST, and it is a different screen from the
+   * empty one. "You have nothing to approve" is a fact a reviewer acts on by
+   * going away; "we could not ask" is one they act on by trying again.
+   */ if (loadError) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: theme.pending.failure.container,
+            role: "alert",
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    className: theme.pending.failure.title,
+                    children: say.pendingLoadFailedTitle
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: theme.pending.failure.text,
+                    children: say.pendingLoadFailedBody
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: theme.pending.failure.text,
+                    children: loadError
+                }),
+                /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    onClick: ()=>loadPending(),
+                    className: theme.pending.failure.button,
+                    children: say.retry
+                })
+            ]
+        });
+    }
     if (store.pendingItems.length === 0) {
         return /*#__PURE__*/ _jsxs("div", {
             className: theme.pending.empty.container,
@@ -185,89 +233,109 @@ export function PendingTab({ pendingAction, decideAction, uploadSignatureAction,
                 className: theme.pending.title,
                 children: say.pendingApprovals(store.pendingItems.length)
             }),
-            store.pendingItems.map((item)=>/*#__PURE__*/ _jsx("div", {
+            store.pendingItems.map((item)=>/*#__PURE__*/ _jsxs("div", {
                     className: theme.pending.card.container,
-                    children: /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ _jsx("p", {
-                                        className: theme.pending.card.title,
-                                        children: say.pendingCardTitle(item.flow_name, item.step_order)
-                                    }),
-                                    /*#__PURE__*/ _jsxs("p", {
-                                        className: theme.pending.card.subtitle,
-                                        children: [
-                                            item.entity_name,
-                                            "/",
-                                            item.entity_id
-                                        ]
-                                    })
-                                ]
-                            }),
-                            store.decidingId === item.instance_id ? /*#__PURE__*/ _jsxs("div", {
-                                className: theme.pending.card.actions,
-                                children: [
-                                    item.require_signature ? /*#__PURE__*/ _jsxs("label", {
-                                        className: "flex flex-col gap-1 text-xs",
-                                        children: [
-                                            /*#__PURE__*/ _jsx("span", {
-                                                children: say.signaturePrompt
-                                            }),
-                                            /*#__PURE__*/ _jsx("input", {
-                                                type: "file",
-                                                onChange: (e)=>{
-                                                    setSignatureFile(e.target.files?.[0] ?? null);
-                                                    setSignatureNote(null);
-                                                },
-                                                className: theme.pending.input
-                                            }),
-                                            signatureNote ? /*#__PURE__*/ _jsx("span", {
-                                                className: "text-red-600",
-                                                children: signatureNote
-                                            }) : null
-                                        ]
-                                    }) : null,
-                                    /*#__PURE__*/ _jsx("input", {
-                                        type: "text",
-                                        placeholder: say.reasonPlaceholder,
-                                        value: store.decisionReason,
-                                        onChange: (e)=>store.setDecisionReason(e.target.value),
-                                        className: theme.pending.input
-                                    }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>handleDecide(item, 'approved'),
-                                        className: theme.pending.approveButton,
-                                        children: say.approve
-                                    }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>handleDecide(item, 'rejected'),
-                                        className: theme.pending.rejectButton,
-                                        children: say.reject
-                                    }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>{
-                                            store.setDecidingId(null);
-                                            store.setDecisionReason('');
-                                            setSignatureFile(null);
-                                            setSignatureNote(null);
-                                        },
-                                        className: theme.pending.cancelButton,
-                                        children: say.cancel
-                                    })
-                                ]
-                            }) : /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>store.setDecidingId(item.instance_id),
-                                className: theme.pending.reviewButton,
-                                children: say.review
-                            })
-                        ]
-                    })
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-wrap items-start justify-between gap-3",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "min-w-0",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.pending.card.title,
+                                            children: say.pendingCardTitle(item.flow_name, item.step_order)
+                                        }),
+                                        item.step_name ? /*#__PURE__*/ _jsx("p", {
+                                            className: theme.pending.card.subtitle,
+                                            children: item.step_name
+                                        }) : null,
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            className: theme.pending.card.recordRow,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: theme.pending.card.recordLabel,
+                                                    children: say.pendingRecordLabel
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: theme.pending.card.recordValue,
+                                                    children: describeEntity?.(item.entity_name, item.entity_id) ?? `${item.entity_name}/${item.entity_id}`
+                                                }),
+                                                entityHref?.(item.entity_name, item.entity_id) ? /*#__PURE__*/ _jsx("a", {
+                                                    href: entityHref(item.entity_name, item.entity_id),
+                                                    target: "_blank",
+                                                    rel: "noopener noreferrer",
+                                                    className: theme.pending.card.recordLink,
+                                                    children: say.openRecord
+                                                }) : null
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                store.decidingId === item.instance_id ? /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.pending.card.actions,
+                                    children: [
+                                        item.require_signature ? /*#__PURE__*/ _jsxs("label", {
+                                            className: "flex flex-col gap-1 text-xs",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: say.signaturePrompt
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    type: "file",
+                                                    onChange: (e)=>{
+                                                        setSignatureFile(e.target.files?.[0] ?? null);
+                                                        setDecisionNote(null);
+                                                    },
+                                                    className: theme.pending.input
+                                                })
+                                            ]
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "text",
+                                            placeholder: say.reasonPlaceholder,
+                                            value: store.decisionReason,
+                                            onChange: (e)=>store.setDecisionReason(e.target.value),
+                                            className: theme.pending.input
+                                        }),
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: ()=>handleDecide(item, 'approved'),
+                                            className: theme.pending.approveButton,
+                                            children: say.approve
+                                        }),
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: ()=>handleDecide(item, 'rejected'),
+                                            className: theme.pending.rejectButton,
+                                            children: say.reject
+                                        }),
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: ()=>{
+                                                store.setDecidingId(null);
+                                                store.setDecisionReason('');
+                                                setSignatureFile(null);
+                                                setDecisionNote(null);
+                                            },
+                                            className: theme.pending.cancelButton,
+                                            children: say.cancel
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: ()=>store.setDecidingId(item.instance_id),
+                                    className: theme.pending.reviewButton,
+                                    children: say.review
+                                })
+                            ]
+                        }),
+                        store.decidingId === item.instance_id && decisionNote ? /*#__PURE__*/ _jsx("p", {
+                            className: theme.pending.notice,
+                            role: "alert",
+                            children: decisionNote
+                        }) : null
+                    ]
                 }, `${item.instance_id}-${item.step_order}`))
         ]
     });

package/dist/fe/components/VerificationFlowPage/components/PropertiesPanel.d.ts

@@ -34,6 +34,8 @@ interface PropertiesPanelProps {
     panelTheme: VerificationFlowPageTheme['propertiesPanel'];
     /** Spread over the English defaults; omit it and the panel stays English. */
     labels?: Partial<VerificationFlowLabels>;
+    /** The channels this install can deliver on. Omit = all five, as before. */
+    availableChannels?: NotificationChannel[];
 }
-export declare function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, panelTheme, labels, }: PropertiesPanelProps): ReactElement;
+export declare function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, panelTheme, labels, availableChannels, }: PropertiesPanelProps): ReactElement;
 export {};

package/dist/fe/components/VerificationFlowPage/components/PropertiesPanel.js

@@ -28,10 +28,11 @@ const ALL_RECIPIENT_TYPES = [
     'user'
 ];
 // ─── Channel Multi-Select ─────────────────────────────────────────
-function ChannelMultiSelect({ selected, onChange, msTheme, say }) {
+function ChannelMultiSelect({ selected, onChange, msTheme, say, available }) {
     const theme = msTheme;
     const channelLabels = notificationChannelLabels(say);
     const [isOpen, setIsOpen] = useState(false);
+    const canDeliver = (ch)=>!available || available.includes(ch);
     const toggle = (channel)=>{
         if (selected.includes(channel)) {
             onChange(selected.filter((c)=>c !== channel));
@@ -91,15 +92,28 @@ function ChannelMultiSelect({ selected, onChange, msTheme, say }) {
             }),
             isOpen && /*#__PURE__*/ _jsx("div", {
                 className: theme.dropdown,
-                children: ALL_CHANNELS.map((ch)=>/*#__PURE__*/ _jsxs("button", {
+                children: ALL_CHANNELS.map((ch)=>{
+                    /*
+             * A channel this install cannot deliver on is shown and refused,
+             * not hidden: the author should see that SMS exists as a product
+             * feature and that THIS deployment does not have it, which is a
+             * different thing from it not existing at all.
+             */ const deliverable = canDeliver(ch);
+                    return /*#__PURE__*/ _jsxs("button", {
                         type: "button",
-                        className: selected.includes(ch) ? theme.optionSelected : theme.option,
-                        onClick: ()=>toggle(ch),
+                        disabled: !deliverable,
+                        title: deliverable ? undefined : say.channelUnavailable,
+                        className: `${selected.includes(ch) ? theme.optionSelected : theme.option}${deliverable ? '' : ' opacity-40 cursor-not-allowed'}`,
+                        onClick: ()=>{
+                            if (deliverable) toggle(ch);
+                        },
                         children: [
                             selected.includes(ch) ? '✓ ' : '',
-                            channelLabels[ch] ?? ch
+                            channelLabels[ch] ?? ch,
+                            deliverable ? '' : ` — ${say.channelUnavailable}`
                         ]
-                    }, ch))
+                    }, ch);
+                })
             })
         ]
     });
@@ -420,7 +434,7 @@ function RoleSearchList({ listRolesAction, selectedRole, onSelect, ursTheme, say
     });
 }
 // ─── Main Properties Panel ────────────────────────────────────────
-export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, panelTheme, labels }) {
+export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, panelTheme, labels, availableChannels }) {
     const theme = panelTheme;
     const say = {
         ...DEFAULT_VERIFICATION_FLOW_LABELS,
@@ -698,6 +712,7 @@ export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode,
                                         onChange: (channels)=>update({
                                                 channels
                                             }),
+                                        available: availableChannels,
                                         msTheme: theme.multiSelect,
                                         say: say
                                     })

package/dist/fe/components/VerificationFlowPage/components/VerificationEntityList.d.ts

@@ -1,5 +1,5 @@
 import type { VerificationFlowLabels } from '../labels';
-import type { VerificationBulkStatusItem, VerificationEntityStatusesAction } from '../types';
+import type { VerificationBulkStatusItem, VerificationCancelAction, VerificationEntityStatusesAction } from '../types';
 export type VerificationEntityListTheme = {
     container: string;
     header: string;
@@ -46,5 +46,11 @@ export type VerificationEntityListProps = {
     pageSize?: number;
     /** Spread over the English defaults; omit it and the list stays English. */
     labels?: Partial<VerificationFlowLabels>;
+    /**
+     * Ends a chain that cannot finish. This list is the only screen that knows
+     * which chains are still `active`, so it is where the exit belongs — until
+     * now the API had one and the product offered none.
+     */
+    cancelAction?: VerificationCancelAction;
 };
-export declare function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, themeMode, onEntityClick, pageSize, labels, }: VerificationEntityListProps): import("react/jsx-runtime").JSX.Element;
+export declare function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, themeMode, onEntityClick, pageSize, labels, cancelAction, }: VerificationEntityListProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/VerificationFlowPage/components/VerificationEntityList.js

@@ -97,7 +97,7 @@ const lightTheme = {
     };
     return map[status] ?? status;
 }
-export function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, themeMode = 'dark', onEntityClick, pageSize = 20, labels }) {
+export function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, themeMode = 'dark', onEntityClick, pageSize = 20, labels, cancelAction }) {
     const baseTheme = themeMode === 'light' ? lightTheme : darkTheme;
     const t = {
         ...baseTheme,
@@ -109,6 +109,10 @@ export function VerificationEntityList({ entityName, entityStatusesAction, theme
     };
     const [activeTab, setActiveTab] = useState('all');
     const [currentPage, setCurrentPage] = useState(1);
+    // Which row is asking for confirmation, and what it is being told.
+    const [cancellingId, setCancellingId] = useState(null);
+    const [cancelReason, setCancelReason] = useState('');
+    const [cancelNote, setCancelNote] = useState(null);
     const loadStatuses = useEffectEvent((status, page)=>{
         entityStatusesAction.start({
             payload: {
@@ -128,6 +132,39 @@ export function VerificationEntityList({ entityName, entityStatusesAction, theme
         setCurrentPage(page);
         loadStatuses(activeTab === 'all' ? undefined : activeTab, page);
     });
+    const sendCancel = useEffectEvent((item)=>{
+        if (!cancelAction) return;
+        setCancelNote(null);
+        cancelAction.start({
+            payload: {
+                entity_name: item.entity_name,
+                entity_id: item.entity_id,
+                ...cancelReason ? {
+                    reason: cancelReason
+                } : {}
+            },
+            onAfterHandle: (res)=>{
+                /*
+         * A refusal — "only the person who started this verification, or a
+         * godmin, can cancel it" — arrives as a body, not always as a status,
+         * so it is read from the body. The row is NOT closed on a refusal:
+         * closing it here is the bug that made every other decision screen
+         * look like it had worked.
+         */ const response = res;
+                if (response?.success === false) {
+                    setCancelNote(response.message || say.cancelChainFailed);
+                    return;
+                }
+                setCancellingId(null);
+                setCancelReason('');
+                loadStatuses(activeTab === 'all' ? undefined : activeTab, currentPage);
+            },
+            onErrorHandle: (err)=>{
+                const msg = err?.message;
+                setCancelNote(msg || say.cancelChainFailed);
+            }
+        });
+    });
     useEffect(()=>{
         loadStatuses(undefined, 1);
     }, []);
@@ -294,7 +331,68 @@ export function VerificationEntityList({ entityName, entityStatusesAction, theme
                             /*#__PURE__*/ _jsx("span", {
                                 className: `${t.statusBadge} ${getStatusBadgeClass(item.status)}`,
                                 children: statusLabel(say, item.status)
-                            })
+                            }),
+                            cancelAction && item.status === 'active' ? cancellingId === item.instance_id ? // No handlers on this wrapper: the row above is a button
+                            // when `onEntityClick` is set, so each INTERACTIVE child
+                            // stops the bubble itself rather than a bare div doing it
+                            // for them.
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col items-stretch gap-2 shrink-0",
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: t.metaLabel,
+                                        children: say.cancelChainConfirm
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "text",
+                                        value: cancelReason,
+                                        placeholder: say.cancelChainReasonPlaceholder,
+                                        onClick: (e)=>e.stopPropagation(),
+                                        onKeyDown: (e)=>e.stopPropagation(),
+                                        onChange: (e)=>setCancelReason(e.target.value),
+                                        className: themeMode === 'light' ? 'rounded-lg border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-800 outline-none focus:border-gray-400' : 'rounded-lg border border-white/[0.08] bg-white/[0.04] px-2 py-1 text-[11px] text-white/80 outline-none focus:border-white/20'
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center gap-2",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                    sendCancel(item);
+                                                },
+                                                className: themeMode === 'light' ? 'rounded-lg border border-red-200 bg-red-50 px-2.5 py-1 text-[11px] font-medium text-red-600 hover:bg-red-100' : 'rounded-lg border border-red-500/30 bg-red-500/20 px-2.5 py-1 text-[11px] font-medium text-red-400 hover:bg-red-500/30',
+                                                children: say.cancelChain
+                                            }),
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                    setCancellingId(null);
+                                                    setCancelReason('');
+                                                    setCancelNote(null);
+                                                },
+                                                className: themeMode === 'light' ? 'rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1 text-[11px] font-medium text-gray-500 hover:bg-gray-100' : 'rounded-lg border border-white/[0.08] bg-white/[0.06] px-2.5 py-1 text-[11px] font-medium text-white/50 hover:bg-white/[0.1]',
+                                                children: say.cancel
+                                            })
+                                        ]
+                                    }),
+                                    cancelNote ? /*#__PURE__*/ _jsx("p", {
+                                        role: "alert",
+                                        className: themeMode === 'light' ? 'text-[11px] leading-4 text-amber-900' : 'text-[11px] leading-4 text-amber-200',
+                                        children: cancelNote
+                                    }) : null
+                                ]
+                            }) : /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: (e)=>{
+                                    e.stopPropagation();
+                                    setCancellingId(item.instance_id);
+                                    setCancelNote(null);
+                                },
+                                className: themeMode === 'light' ? 'shrink-0 rounded-lg border border-gray-200 bg-white px-2.5 py-1 text-[11px] font-medium text-gray-600 hover:bg-gray-100' : 'shrink-0 rounded-lg border border-white/[0.08] bg-white/[0.04] px-2.5 py-1 text-[11px] font-medium text-white/60 hover:bg-white/[0.1]',
+                                children: say.cancelChain
+                            }) : null
                         ]
                     }, item.instance_id);
                 })

package/dist/fe/components/VerificationFlowPage/components/VerificationFlowPage.d.ts

@@ -1,4 +1,4 @@
 import '@xyflow/react/dist/style.css';
 import type { ReactElement } from 'react';
 import type { VerificationFlowPageProps } from '../types';
-export declare function VerificationFlowPage({ entityName, title, subtitle, flowListAction, flowGetAction, flowSaveAction, flowPublishAction, flowUnpublishAction, flowDeleteAction, pendingAction, decideAction, uploadSignatureAction, listUsersAction, listRolesAction, entityStatusesAction, onFlowSelected, onDecisionMade, onEntityClick, onBack, showPending, showEntityStatuses, className, themeMode, labels, }: VerificationFlowPageProps): ReactElement;
+export declare function VerificationFlowPage({ entityName, title, subtitle, flowListAction, flowGetAction, flowSaveAction, flowPublishAction, flowUnpublishAction, flowDeleteAction, pendingAction, decideAction, uploadSignatureAction, listUsersAction, listRolesAction, entityStatusesAction, onFlowSelected, onDecisionMade, onEntityClick, onBack, showPending, showEntityStatuses, className, themeMode, labels, describeEntity, entityHref, availableChannels, initialTab, cancelAction, }: VerificationFlowPageProps): ReactElement;