@arronqzy/react-blueprint 1.0.0

package/dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>blue-print</title>
+    <script type="module" crossorigin src="/assets/index-DsVhHV0-.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CneNgzWb.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>blue-print</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/index.ts

@@ -0,0 +1,70 @@
+export { BluePrintReactRoot } from "./src/index";
+export type { BluePrintReactRootProps } from "./src/index";
+export { BlueprintNodeConfigSidebar } from "./src/BlueprintNodeConfigSidebar";
+export type {
+  BlueprintNodeConfigSidebarProps,
+  BlueprintViewElementOption,
+  BlueprintLibraryOption,
+} from "./src/BlueprintNodeConfigSidebar";
+export * from "./src/graph";
+export { resolveBlueprintConfigSource, resolveBlueprintNodeTypeLabel } from "./src/graph/document";
+export type { BlueprintConfigSource } from "./src/graph/document";
+export { documentToRunnableGraph } from "./src/runtime/document-to-runnable-graph";
+export { BlueprintExecutionLogPanel } from "./src/components/BlueprintExecutionLogPanel";
+export type { BlueprintExecutionLogPanelProps } from "./src/components/BlueprintExecutionLogPanel";
+export { useBlueprintDebugSession } from "./src/hooks/useBlueprintDebugSession";
+export type {
+  LifecycleNodeOption,
+  UseBlueprintDebugSessionOptions,
+  UseBlueprintDebugSessionReturn,
+} from "./src/hooks/useBlueprintDebugSession";
+export {
+  listExecutionRunRecords,
+  putExecutionRunRecord,
+  purgeExecutionRunsOlderThan,
+  clearAllExecutionRunRecords,
+  trimExecutionRunRecordsToMax,
+  downloadExecutionRunExport,
+} from "./src/library/execution-log-db";
+export type { UseBlueprintPageLifecycleOptions } from "./src/hooks/useBlueprintPageLifecycle";
+export { useBlueprintPageLifecycle } from "./src/hooks/useBlueprintPageLifecycle";
+export { stopAllClockSchedules } from "@arronqzy/blueprint-dsl";
+export { BlueprintNodeSwitchTaskDialog } from "./src/components/BlueprintNodeSwitchTaskDialog";
+export type { BlueprintNodeSwitchTaskDialogProps } from "./src/components/BlueprintNodeSwitchTaskDialog";
+export { useBlueprintNodeSelectionGuard } from "./src/hooks/useBlueprintNodeSelectionGuard";
+export type { PendingBlueprintNodeSwitch } from "./src/hooks/useBlueprintNodeSelectionGuard";
+export { BlueprintMetaDialog } from "./src/components/BlueprintMetaDialog";
+export type { BlueprintMetaDialogProps } from "./src/components/BlueprintMetaDialog";
+export { BlueprintLibrarySelect } from "./src/components/BlueprintLibrarySelect";
+export type { BlueprintLibrarySelectProps } from "./src/components/BlueprintLibrarySelect";
+export { BlueprintPanelToolbar, BlueprintRenameDialog, BlueprintDeleteDialog } from "./src/components/BlueprintPanelToolbar";
+export type {
+  BlueprintPanelToolbarProps,
+  BlueprintRenameDialogProps,
+  BlueprintDeleteDialogProps,
+  BlueprintDebugToolbarProps,
+} from "./src/components/BlueprintPanelToolbar";
+export type { ExecutionLogSettings } from "./src/library/execution-log-settings";
+export type {
+  ExecutionTraceEntry,
+  ExecutionRunRecord,
+} from "@arronqzy/blueprint-dsl";
+export type { BlueprintExecutionOverlay } from "./src/runtime/execution-overlay";
+export { buildExecutionOverlay, shouldHaltDebugOnFalseSignal } from "./src/runtime/execution-overlay";
+export * from "./src/library/types";
+export {
+  blueprintDocumentsEqual,
+  buildBlueprintExportPayload,
+  buildLibraryRecord,
+  createLibraryBlueprintId,
+  downloadBlueprintExport,
+  libraryRecordFromImport,
+  parseBlueprintImportFile,
+} from "./src/library/blueprint-io";
+export {
+  deleteBlueprintLibraryRecord,
+  getBlueprintLibraryRecord,
+  listBlueprintLibrary,
+  putBlueprintLibraryRecord,
+  updateBlueprintLibraryMeta,
+} from "./src/library/blueprint-library-db";

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@arronqzy/react-blueprint",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./blueprint.css": "./src/blueprint.css"
+  },
+  "dependencies": {
+    "react": "^19",
+    "dayjs": "^1.11.13",
+    "react-dom": "^19",
+    "@xyflow/react": "^12.9.3",
+    "@arronqzy/blueprint-dsl": "0.0.1",
+    "@arronqzy/react-rx-store": "1.0.0",
+    "@arronqzy/ui": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "@types/use-sync-external-store": "^1.5.0",
+    "eslint": "^8.57.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.1.4",
+    "@arronqzy/tailwind": "0.0.1",
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "0.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "build": "pnpm run lint && pnpm run typecheck && vite build",
+    "dev": "vite"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/BlueprintCanvasContext.tsx

@@ -0,0 +1,61 @@
+import {
+  createContext,
+  useContext,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { isClockNodeActive, subscribeActiveClockNodes } from "@arronqzy/blueprint-dsl";
+
+type BlueprintCanvasContextValue = {
+  onSelectNodeRef: RefObject<((nodeId: string | null) => void) | undefined>;
+  onAbortClockRef: RefObject<((nodeId: string) => void) | undefined>;
+};
+
+const BlueprintCanvasContext = createContext<BlueprintCanvasContextValue | null>(
+  null
+);
+
+export function BlueprintCanvasProvider({
+  onSelectNode,
+  onAbortClock,
+  children,
+}: {
+  onSelectNode?: (nodeId: string | null) => void;
+  onAbortClock?: (nodeId: string) => void;
+  children: ReactNode;
+}) {
+  const onSelectNodeRef = useRef(onSelectNode);
+  onSelectNodeRef.current = onSelectNode;
+  const onAbortClockRef = useRef(onAbortClock);
+  onAbortClockRef.current = onAbortClock;
+
+  return (
+    <BlueprintCanvasContext.Provider value={{ onSelectNodeRef, onAbortClockRef }}>
+      {children}
+    </BlueprintCanvasContext.Provider>
+  );
+}
+
+export function useBlueprintNodeSelect() {
+  const ctx = useContext(BlueprintCanvasContext);
+  return (nodeId: string) => {
+    ctx?.onSelectNodeRef.current?.(nodeId);
+  };
+}
+
+export function useBlueprintClockAbort() {
+  const ctx = useContext(BlueprintCanvasContext);
+  return (nodeId: string) => {
+    ctx?.onAbortClockRef.current?.(nodeId);
+  };
+}
+
+export function useClockNodeCanAbort(nodeId: string) {
+  return useSyncExternalStore(
+    subscribeActiveClockNodes,
+    () => isClockNodeActive(nodeId),
+    () => false
+  );
+}

package/src/BlueprintContextMenu.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from "react";
+
+export type BlueprintContextMenuState =
+  | {
+      kind: "pane";
+      clientX: number;
+      clientY: number;
+    }
+  | {
+      kind: "node";
+      clientX: number;
+      clientY: number;
+      nodeId: string;
+      role: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+    }
+  | {
+      kind: "edge";
+      clientX: number;
+      clientY: number;
+      edgeId: string;
+    };
+
+type BlueprintContextMenuProps = {
+  menu: BlueprintContextMenuState | null;
+  onClose: () => void;
+  onAddBlueprintNode: (clientX: number, clientY: number) => void;
+  onDeleteNode: (nodeId: string) => void;
+  onDeleteEdge: (edgeId: string) => void;
+};
+
+export function BlueprintContextMenu({
+  menu,
+  onClose,
+  onAddBlueprintNode,
+  onDeleteNode,
+  onDeleteEdge,
+}: BlueprintContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menu) return;
+    const closeOnPointerDown = (event: Event) => {
+      const target = event.target as globalThis.Node | null;
+      if (target && menuRef.current?.contains(target)) return;
+      onClose();
+    };
+    const close = () => onClose();
+    window.addEventListener("pointerdown", closeOnPointerDown);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("pointerdown", closeOnPointerDown);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [menu, onClose]);
+
+  if (!menu) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      className="bp-context-menu"
+      style={{ left: menu.clientX, top: menu.clientY }}
+      onMouseDown={(e) => e.stopPropagation()}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      {menu.kind === "pane" ? (
+        <button
+          type="button"
+          className="bp-context-menu__item"
+          onClick={() => {
+            onAddBlueprintNode(menu.clientX, menu.clientY);
+            onClose();
+          }}
+        >
+          新增节点
+        </button>
+      ) : null}
+
+      {menu.kind === "node" ? (
+        <button
+          type="button"
+          className="bp-context-menu__item bp-context-menu__item--danger"
+          onClick={() => {
+            onDeleteNode(menu.nodeId);
+            onClose();
+          }}
+        >
+          删除节点
+        </button>
+      ) : null}
+
+      {menu.kind === "edge" ? (
+        <button
+          type="button"
+          className="bp-context-menu__item bp-context-menu__item--danger"
+          onClick={() => {
+            onDeleteEdge(menu.edgeId);
+            onClose();
+          }}
+        >
+          删除连线
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/BlueprintNodeConfigSidebar.tsx

@@ -0,0 +1,358 @@
+import { useEffect, useMemo, type ChangeEvent } from "react";
+import {
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import {
+  LIFECYCLE_NODE_TYPE,
+  PAGE_LIFECYCLE_LABELS,
+  PAGE_LIFECYCLE_PHASES,
+  type PageLifecyclePhase,
+} from "@arronqzy/blueprint-dsl";
+
+import { FetchNodeConfigPanel } from "./components/FetchNodeConfigPanel";
+import { ClockNodeConfigPanel } from "./components/ClockNodeConfigPanel";
+import { JsonNodeConfigPanel } from "./components/JsonNodeConfigPanel";
+import { LogicNodeConfigPanel } from "./components/LogicNodeConfigPanel";
+import { ViewElementMultiSelect } from "./components/ViewElementMultiSelect";
+import {
+  patchNodeConfigSource,
+  pruneViewElementIds,
+  resolveBlueprintConfigSource,
+  resolveViewElementIds,
+  type BlueprintConfigSource,
+  type BlueprintGraphNode,
+} from "./graph/document";
+
+export type BlueprintViewElementOption = {
+  id: string;
+  label: string;
+};
+
+export type BlueprintLibraryOption = {
+  id: string;
+  label: string;
+};
+
+export type BlueprintNodeConfigSidebarProps = {
+  node: BlueprintGraphNode;
+  viewElementOptions?: BlueprintViewElementOption[];
+  blueprintLibraryOptions?: BlueprintLibraryOption[];
+  allowFalseSignalPropagation?: boolean;
+  onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
+  onUpdateNode: (
+    nodeId: string,
+    patch: Partial<
+      Pick<
+        BlueprintGraphNode,
+        | "label"
+        | "role"
+        | "nodeType"
+        | "configSource"
+        | "viewElementId"
+        | "viewElementIds"
+        | "nestedBlueprintId"
+        | "libraryBlueprintId"
+        | "lifecyclePhase"
+        | "fetchConfig"
+        | "jsonConfig"
+        | "logicConfig"
+        | "clockConfig"
+      >
+    >
+  ) => void;
+};
+
+export function BlueprintNodeConfigSidebar({
+  node,
+  viewElementOptions = [],
+  blueprintLibraryOptions = [],
+  allowFalseSignalPropagation = false,
+  onUpdateAllowFalseSignalPropagation,
+  onUpdateNode,
+}: BlueprintNodeConfigSidebarProps) {
+  const configSource = resolveBlueprintConfigSource(node);
+  const linkedViewElementIds = resolveViewElementIds(node);
+  const existingViewElementIdSet = useMemo(
+    () => new Set(viewElementOptions.map((opt) => opt.id)),
+    [viewElementOptions]
+  );
+  const viewElementLabelById = new Map(
+    viewElementOptions.map((opt) => [opt.id, opt.label])
+  );
+
+  useEffect(() => {
+    if (configSource !== "view") return;
+    const linked = resolveViewElementIds(node);
+    if (linked.length === 0) return;
+    const pruned = pruneViewElementIds(linked, existingViewElementIdSet);
+    if (pruned.length === linked.length) return;
+    onUpdateNode(node.id, {
+      viewElementIds: pruned.length > 0 ? pruned : undefined,
+      viewElementId: undefined,
+      configSource: "view",
+    });
+  }, [
+    configSource,
+    existingViewElementIdSet,
+    node.id,
+    node.viewElementId,
+    node.viewElementIds,
+    onUpdateNode,
+  ]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
+      <div className="shrink-0 border-b border-border px-3 py-2">
+        <div className="text-xs font-semibold">蓝图节点配置</div>
+        <div className="mt-0.5 text-[11px] text-muted-foreground">
+          {node.role === "blueprint"
+            ? "蓝图节点"
+            : node.role === "lifecycle"
+              ? "生命周期节点"
+              : node.role === "and"
+                ? "并运算节点"
+              : node.role === "fetch"
+                ? "数据源节点"
+                : node.role === "json"
+                  ? "JSON 节点"
+                  : "逻辑节点"}{" "}
+          · {node.id}
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 space-y-3 overflow-auto p-3 text-xs">
+        <label className="block space-y-1">
+          <span className="text-muted-foreground">节点名称</span>
+          <Input
+            value={node.label}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              onUpdateNode(node.id, { label: e.target.value })
+            }
+            className="h-8"
+          />
+        </label>
+
+        <label className="block space-y-1">
+          <span className="text-muted-foreground">配置类型</span>
+          <Select
+            value={configSource}
+            onValueChange={(value: string) => {
+              const nextSource = value as BlueprintConfigSource;
+              onUpdateNode(node.id, {
+                ...patchNodeConfigSource(node, nextSource),
+                ...(nextSource === "view"
+                  ? {
+                      viewElementIds: linkedViewElementIds,
+                      viewElementId: undefined,
+                    }
+                  : {
+                      viewElementIds: undefined,
+                      viewElementId: undefined,
+                    }),
+              });
+            }}
+          >
+            <SelectTrigger className="h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="blueprint">蓝图配置</SelectItem>
+              <SelectItem value="logic">逻辑配置</SelectItem>
+              <SelectItem value="and">并运算</SelectItem>
+              <SelectItem value="lifecycle">生命周期配置</SelectItem>
+              <SelectItem value="fetch">数据源获取</SelectItem>
+              <SelectItem value="json">JSON 节点</SelectItem>
+              <SelectItem value="clock">时钟</SelectItem>
+              <SelectItem value="view">视图节点配置</SelectItem>
+            </SelectContent>
+          </Select>
+        </label>
+
+        {configSource === "view" ? (
+          <div className="block space-y-1">
+            <span className="text-muted-foreground">关联视图节点</span>
+            <ViewElementMultiSelect
+              options={viewElementOptions}
+              value={linkedViewElementIds}
+              placeholder="选择视图节点"
+              onChange={(next) =>
+                onUpdateNode(node.id, {
+                  viewElementIds: next,
+                  viewElementId: undefined,
+                  configSource: "view",
+                })
+              }
+            />
+            {linkedViewElementIds.length === 0 ? (
+              <p className="text-[11px] text-muted-foreground">
+                可多选视图画布节点；关联后仍在此配置蓝图节点，视图属性请在视图面板中编辑。
+              </p>
+            ) : (
+              <p className="text-[11px] text-muted-foreground">
+                已关联 {linkedViewElementIds.length} 个视图节点：
+                {linkedViewElementIds
+                  .map((id) => viewElementLabelById.get(id) ?? id)
+                  .join("、")}
+                。
+              </p>
+            )}
+          </div>
+        ) : null}
+
+        {configSource === "blueprint" ? (
+          <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+            <div className="font-medium text-foreground">蓝图属性</div>
+            <p className="text-[11px] text-muted-foreground">
+              选中蓝图库中的蓝图后，当输入端收到<strong>真信号</strong>
+              时才会执行该蓝图；执行完成后从输出端发出
+              <strong>真信号</strong>（含嵌套蓝图输出值与当前节点信息），执行失败则发出
+              <strong>假信号</strong>。
+            </p>
+            <label className="block space-y-1">
+              <span className="text-muted-foreground">引用蓝图库</span>
+              <Select
+                value={node.libraryBlueprintId ?? "__none__"}
+                onValueChange={(value: string) => {
+                  onUpdateNode(node.id, {
+                    libraryBlueprintId: value === "__none__" ? undefined : value,
+                    configSource: "blueprint",
+                  });
+                }}
+              >
+                <SelectTrigger className="h-8">
+                  <SelectValue placeholder="选择蓝图库中的蓝图" />
+                </SelectTrigger>
+                <SelectContent className="z-[10100]">
+                  <SelectItem value="__none__">未关联</SelectItem>
+                  {blueprintLibraryOptions.map((opt) => (
+                    <SelectItem key={opt.id} value={opt.id}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+            {!node.libraryBlueprintId ? (
+              <p className="text-[11px] text-muted-foreground">
+                请先从蓝图库选择要引用的蓝图。
+              </p>
+            ) : null}
+            <label className="flex items-start gap-2 pt-1">
+              <input
+                type="checkbox"
+                checked={allowFalseSignalPropagation}
+                onChange={(e) =>
+                  onUpdateAllowFalseSignalPropagation?.(e.target.checked)
+                }
+                className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
+              />
+              <span className="text-[11px] leading-relaxed text-muted-foreground">
+                允许假信号传递：开启后，节点输出假信号时不会阻塞任务链，错误信息会继续向下游传递。
+              </span>
+            </label>
+          </div>
+        ) : null}
+
+        {configSource === "lifecycle" ? (
+          <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+            <div className="font-medium text-foreground">生命周期钩子</div>
+            <p className="text-[11px] text-muted-foreground">
+              生命周期节点<strong>没有输入口</strong>，仅右侧输出口。
+              {node.lifecyclePhase === "blueprintActivated"
+                ? "当本蓝图被其他蓝图的蓝图配置节点引用且收到真信号时，自动向下游发出真信号，输出值为父级传入的输入数据。"
+                : "当页面进入对应生命周期时，自动向下游发出真/假信号。"}
+            </p>
+            <label className="block space-y-1">
+              <span className="text-muted-foreground">监听阶段</span>
+              <Select
+                value={node.lifecyclePhase ?? "mounted"}
+                onValueChange={(value: string) =>
+                  onUpdateNode(node.id, {
+                    role: "lifecycle",
+                    nodeType: LIFECYCLE_NODE_TYPE,
+                    lifecyclePhase: value as PageLifecyclePhase,
+                    configSource: "lifecycle",
+                  })
+                }
+              >
+                <SelectTrigger className="h-8">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PAGE_LIFECYCLE_PHASES.map((phase) => (
+                    <SelectItem key={phase} value={phase}>
+                      {PAGE_LIFECYCLE_LABELS[phase]}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+            {node.parentId ? (
+              <p className="text-[11px] text-muted-foreground">
+                所属蓝图节点：{node.parentId}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+
+        {configSource === "fetch" ? (
+          <FetchNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+        ) : null}
+
+        {configSource === "json" ? (
+          <JsonNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+        ) : null}
+
+        {configSource === "clock" ? (
+          <ClockNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+        ) : null}
+
+        {configSource === "and" ? (
+          <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+            <div className="font-medium text-foreground">并运算</div>
+            <p className="text-[11px] text-muted-foreground">
+              左侧两个输入口 <strong>inA</strong>、<strong>inB</strong>。
+              每个输入口可连 n 条线，同端口任一为真则该端口视为真（或）。
+              仅当 <strong>inA 与 inB 均为真信号</strong> 时，从输出口发出真信号；
+              否则发出假信号。
+            </p>
+          </div>
+        ) : null}
+
+        {configSource === "logic" ? (
+          <>
+            <LogicNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+            {node.parentId ? (
+              <p className="text-[11px] text-muted-foreground">
+                所属蓝图节点：{node.parentId}
+              </p>
+            ) : null}
+          </>
+        ) : null}
+
+        {configSource !== "blueprint" && configSource !== "and" ? (
+          <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+            <div className="font-medium text-foreground">任务链执行</div>
+            <label className="flex items-start gap-2">
+              <input
+                type="checkbox"
+                checked={allowFalseSignalPropagation}
+                onChange={(e) =>
+                  onUpdateAllowFalseSignalPropagation?.(e.target.checked)
+                }
+                className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
+              />
+              <span className="text-[11px] leading-relaxed text-muted-foreground">
+                允许假信号传递：默认假信号会阻塞任务链；开启后继续向下游传递假信号与错误信息。
+              </span>
+            </label>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}