@arronqzy/react-blueprint 1.0.1 → 1.0.4

package/src/components/JsonNodeConfigPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState, type ChangeEvent } from "react";
 import { validateJsonString } from "@arronqzy/blueprint-dsl";
 import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
@@ -27,6 +28,7 @@ export function JsonNodeConfigPanel({
   node,
   onUpdateNode,
 }: JsonNodeConfigPanelProps) {
+  const { t } = useI18n();
   const jsonConfig = resolveNodeJsonConfig(node);
   const [draftError, setDraftError] = useState<string | null>(null);
 
@@ -51,15 +53,17 @@ export function JsonNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">JSON 节点</div>
+      <div className="font-medium text-foreground">
+        {t("blueprint.config.jsonTitle")}
+      </div>
       <p className="text-[11px] text-muted-foreground">
-        收到<strong>真信号</strong>后，将下方 JSON 解析为 JavaScript object（或
-        array）并从输出口发出<strong>真信号</strong>；解析失败则发出
-        <strong>假信号</strong>。
+        {t("blueprint.config.jsonHint")}
       </p>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">JSON 内容</span>
+        <span className="text-muted-foreground">
+          {t("blueprint.config.jsonContent")}
+        </span>
         <textarea
           value={jsonConfig.jsonString}
           onChange={handleChange}
@@ -69,9 +73,13 @@ export function JsonNodeConfigPanel({
           placeholder={'{\n  "key": "value"\n}'}
         />
         {parseError ? (
-          <p className="text-[11px] text-destructive">JSON 格式错误：{parseError}</p>
+          <p className="text-[11px] text-destructive">
+            {t("blueprint.config.jsonFormatError", { error: parseError })}
+          </p>
         ) : (
-          <p className="text-[11px] text-muted-foreground">JSON 格式正确</p>
+          <p className="text-[11px] text-muted-foreground">
+            {t("blueprint.config.jsonFormatOk")}
+          </p>
         )}
       </label>
     </div>

package/src/components/LogicNodeConfigPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState, type ChangeEvent } from "react";
 import { validateLogicSourceCode } from "@arronqzy/blueprint-dsl";
 import type { LogicNodeConfig } from "@arronqzy/blueprint-dsl";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";
@@ -27,6 +28,7 @@ export function LogicNodeConfigPanel({
   node,
   onUpdateNode,
 }: LogicNodeConfigPanelProps) {
+  const { t } = useI18n();
   const logicConfig = resolveNodeLogicConfig(node);
   const [draftError, setDraftError] = useState<string | null>(null);
 
@@ -50,15 +52,17 @@ export function LogicNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">逻辑节点</div>
+      <div className="font-medium text-foreground">
+        {t("blueprint.config.logicTitle")}
+      </div>
       <p className="text-[11px] text-muted-foreground">
-        收到<strong>真信号</strong>后，将输入数据传入下方 <code>update</code>{" "}
-        函数并执行；返回值作为<strong>真信号</strong>输出。代码语法错误或运行时报错则发出
-        <strong>假信号</strong>（错误信息为输出值）。
+        {t("blueprint.config.logicHint")}
       </p>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">JavaScript 代码</span>
+        <span className="text-muted-foreground">
+          {t("blueprint.config.jsCode")}
+        </span>
         <textarea
           value={logicConfig.sourceCode}
           onChange={handleChange}
@@ -69,10 +73,12 @@ export function LogicNodeConfigPanel({
         />
         {parseError ? (
           <p className="text-[11px] text-destructive">
-            JavaScript 错误：{parseError}
+            {t("blueprint.config.jsError", { error: parseError })}
           </p>
         ) : (
-          <p className="text-[11px] text-muted-foreground">JavaScript 语法正确</p>
+          <p className="text-[11px] text-muted-foreground">
+            {t("blueprint.config.jsSyntaxOk")}
+          </p>
         )}
       </label>
     </div>

package/src/components/ViewElementMultiSelect.tsx

@@ -12,6 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
 
 export type ViewElementMultiSelectOption = {
   id: string;
@@ -45,35 +46,38 @@ function ChevronDownIcon({ className }: { className?: string }) {
   );
 }
 
-function resolveTriggerText(
-  value: string[],
-  labelById: Map<string, string>,
-  placeholder: string
-): string {
-  if (value.length === 0) return placeholder;
-  const labels = value.map((id) => labelById.get(id) ?? id);
-  if (labels.length === 1) return labels[0]!;
-  const joined = labels.join("、");
-  if (joined.length <= 26) return joined;
-  return `已选 ${value.length} 项`;
-}
-
 export function ViewElementMultiSelect({
   options,
   value,
   onChange,
-  placeholder = "选择视图节点",
+  placeholder,
   disabled = false,
 }: ViewElementMultiSelectProps) {
+  const { t } = useI18n();
   const [open, setOpen] = useState(false);
+  const resolvedPlaceholder =
+    placeholder ?? t("blueprint.config.selectViewNode");
   const labelById = useMemo(
     () => new Map(options.map((opt) => [opt.id, opt.label])),
     [options]
   );
   const selectedSet = useMemo(() => new Set(value), [value]);
-  const triggerText = resolveTriggerText(value, labelById, placeholder);
   const emptyOptions = options.length === 0;
 
+  let triggerText = resolvedPlaceholder;
+  if (value.length > 0) {
+    const labels = value.map((id) => labelById.get(id) ?? id);
+    if (labels.length === 1) {
+      triggerText = labels[0]!;
+    } else {
+      const joined = labels.join("、");
+      triggerText =
+        joined.length <= 26
+          ? joined
+          : t("blueprint.config.selectedCount", { count: value.length });
+    }
+  }
+
   const toggle = (id: string) => {
     onChange(
       selectedSet.has(id)
@@ -97,7 +101,7 @@ export function ViewElementMultiSelect({
           )}
         >
           <span className="min-w-0 flex-1 truncate text-left">
-            {emptyOptions ? "视图画布暂无节点" : triggerText}
+            {emptyOptions ? t("blueprint.config.noViewOnCanvas") : triggerText}
           </span>
           <ChevronDownIcon className="h-4 w-4 shrink-0 opacity-50" />
         </Button>
@@ -107,9 +111,12 @@ export function ViewElementMultiSelect({
         align="start"
       >
         <Command>
-          <CommandInput placeholder="搜索视图节点…" className="h-9 text-xs" />
+          <CommandInput
+            placeholder={t("blueprint.config.searchViewNodes")}
+            className="h-9 text-xs"
+          />
           <CommandList>
-            <CommandEmpty>无匹配节点</CommandEmpty>
+            <CommandEmpty>{t("blueprint.config.noMatchingNodes")}</CommandEmpty>
             <CommandGroup>
               {options.map((opt) => {
                 const selected = selectedSet.has(opt.id);

package/src/dev-seed.ts

@@ -11,9 +11,9 @@ import {
 /** DevApp 初始图：两个节点 + 一条连线，便于直接验证边是否渲染 */
 export function createDevBlueprintGraph(): BlueprintGraph {
   let graph = BlueprintGraph.empty();
-  graph = graph.addBlueprintNode({ x: 40, y: 80 }, "节点 A");
+  graph = graph.addBlueprintNode({ x: 40, y: 80 }, "Node A");
   const nodeA = graph.document.nodes[0]!;
-  graph = graph.addBlueprintNode({ x: 300, y: 80 }, "节点 B");
+  graph = graph.addBlueprintNode({ x: 300, y: 80 }, "Node B");
   const nodeB = graph.document.nodes[1]!;
 
   const withEdge = addEdge(

package/src/fetch-config-task-store.ts

@@ -6,6 +6,7 @@ import type {
   ParsedSwaggerDocument,
 } from "@arronqzy/blueprint-dsl";
 import { executeFetch } from "@arronqzy/blueprint-dsl";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
 
 import { loadSwaggerDocument } from "./library/swagger-docs";
 
@@ -143,7 +144,9 @@ export function startSwaggerLoadTask(params: {
       }
 
       const message =
-        error instanceof Error ? error.message : "Swagger 文档解析失败";
+        error instanceof Error
+          ? error.message
+          : tForLocale(resolveLocale())("blueprint.config.swaggerParseFailed");
       swaggerTasks.set(params.nodeId, {
         record: { status: "error", error: message },
         abortController,
@@ -186,7 +189,10 @@ export function startFetchDebugTask(params: {
         return;
       }
 
-      const message = error instanceof Error ? error.message : "请求失败";
+      const message =
+        error instanceof Error
+          ? error.message
+          : tForLocale(resolveLocale())("blueprint.config.requestFailed");
       fetchDebugTasks.set(params.nodeId, {
         record: { status: "error", error: message },
         abortController,

package/src/graph/blueprint-graph.ts

@@ -8,6 +8,7 @@ import {
   resolveNodeFetchConfig,
   resolveNodeJsonConfig,
   resolveNodeLogicConfig,
+  resolveRunnableNodeType,
   sanitizeBlueprintDocument,
   type BlueprintDocument,
   type BlueprintGraphEdge,
@@ -250,7 +251,10 @@ export class BlueprintGraph {
             ...patch.clockConfig,
           };
         }
-        return nextNode;
+        return {
+          ...nextNode,
+          nodeType: resolveRunnableNodeType(nextNode),
+        };
       }),
     });
   }

package/src/graph/document.ts

@@ -89,48 +89,116 @@ export function pruneViewElementIds(
 export function resolveBlueprintConfigSource(
   node: Pick<
     BlueprintGraphNode,
-    "role" | "configSource" | "viewElementId" | "viewElementIds"
+    "role" | "nodeType" | "configSource" | "viewElementId" | "viewElementIds"
   >
 ): BlueprintConfigSource {
   if (node.configSource) return node.configSource;
-  if (resolveViewElementIds(node).length > 0) return "view";
   if (node.role === "lifecycle") return "lifecycle";
   if (node.role === "clock") return "clock";
   if (node.role === "and") return "and";
   if (node.role === "fetch") return "fetch";
   if (node.role === "json") return "json";
+  if (node.nodeType === FETCH_NODE_TYPE) return "fetch";
+  if (node.nodeType === JSON_NODE_TYPE) return "json";
+  if (node.nodeType === CLOCK_NODE_TYPE) return "clock";
+  if (node.nodeType === VIEW_NODE_TYPE) return "view";
+  if (resolveViewElementIds(node).length > 0) return "view";
   return node.role === "logic" ? "logic" : "blueprint";
 }
 
-/** 画布节点顶部（拖拽区）展示的配置类型文案 */
-export const BLUEPRINT_CONFIG_TYPE_LABELS: Record<
+/** 可执行图节点类型：与配置类型对齐，避免文档里残留旧 nodeType */
+export function resolveRunnableNodeType(
+  node: Pick<
+    BlueprintGraphNode,
+    "role" | "nodeType" | "configSource" | "viewElementId" | "viewElementIds"
+  >
+): string {
+  switch (resolveBlueprintConfigSource(node)) {
+    case "view":
+      return VIEW_NODE_TYPE;
+    case "lifecycle":
+      return LIFECYCLE_NODE_TYPE;
+    case "clock":
+      return CLOCK_NODE_TYPE;
+    case "and":
+      return AND_NODE_TYPE;
+    case "fetch":
+      return FETCH_NODE_TYPE;
+    case "json":
+      return JSON_NODE_TYPE;
+    case "logic":
+      return DEFAULT_LOGIC_NODE_TYPE;
+    default:
+      return BLUEPRINT_NODE_TYPE;
+  }
+}
+
+import type { TranslateFn } from "@arronqzy/i18n";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
+
+/** 画布节点顶部（拖拽区）配置类型对应的 i18n key */
+export const BLUEPRINT_CONFIG_TYPE_LABEL_KEYS: Record<
   BlueprintConfigSource,
   string
 > = {
-  blueprint: "蓝图",
-  logic: "逻辑",
-  and: "并运算",
-  lifecycle: "生命周期",
-  view: "视图",
-  fetch: "数据源获取",
-  json: "JSON 节点",
-  clock: "时钟",
+  blueprint: "blueprint.node.typeBlueprint",
+  logic: "blueprint.node.typeLogic",
+  and: "blueprint.node.typeAnd",
+  lifecycle: "blueprint.node.typeLifecycle",
+  view: "blueprint.node.typeView",
+  fetch: "blueprint.node.typeFetch",
+  json: "blueprint.node.typeJson",
+  clock: "blueprint.node.typeClock",
 };
 
+export const BLUEPRINT_LIFECYCLE_PHASE_KEYS: Record<PageLifecyclePhase, string> =
+  {
+    created: "blueprint.node.phaseCreated",
+    beforeMount: "blueprint.node.phaseBeforeMount",
+    mounted: "blueprint.node.phaseMounted",
+    updated: "blueprint.node.phaseUpdated",
+    beforeDestroy: "blueprint.node.phaseBeforeDestroy",
+    destroy: "blueprint.node.phaseDestroy",
+    activated: "blueprint.node.phaseActivated",
+    deactivated: "blueprint.node.phaseDeactivated",
+    blueprintActivated: "blueprint.node.phaseBlueprintActivated",
+  };
+
+function defaultTranslate(): TranslateFn {
+  return tForLocale(resolveLocale());
+}
+
+export function getBlueprintNodeTypeLabel(
+  t: TranslateFn,
+  type: BlueprintConfigSource
+): string {
+  return t(BLUEPRINT_CONFIG_TYPE_LABEL_KEYS[type]);
+}
+
+export function getLifecyclePhaseLabel(
+  t: TranslateFn,
+  phase: PageLifecyclePhase
+): string {
+  const key = BLUEPRINT_LIFECYCLE_PHASE_KEYS[phase];
+  return key ? t(key) : phase;
+}
+
 export function resolveBlueprintNodeTypeLabel(
   node: Pick<
     BlueprintGraphNode,
-    "role" | "configSource" | "viewElementId" | "viewElementIds"
-  >
+    "role" | "nodeType" | "configSource" | "viewElementId" | "viewElementIds"
+  >,
+  t: TranslateFn = defaultTranslate()
 ): string {
-  return BLUEPRINT_CONFIG_TYPE_LABELS[resolveBlueprintConfigSource(node)];
+  return getBlueprintNodeTypeLabel(t, resolveBlueprintConfigSource(node));
 }
 
 /** 新建节点时的默认显示名称（与类型文案一致） */
 export function defaultBlueprintNodeLabel(
-  configSource: BlueprintConfigSource
+  configSource: BlueprintConfigSource,
+  t: TranslateFn = defaultTranslate()
 ): string {
-  return BLUEPRINT_CONFIG_TYPE_LABELS[configSource];
+  return getBlueprintNodeTypeLabel(t, configSource);
 }
 
 export function resolveNodeFetchConfig(
@@ -221,11 +289,9 @@ export function sanitizeBlueprintDocument(
         viewElementId: undefined,
       };
     }
-    if (
-      resolveBlueprintConfigSource(next) === "view" &&
-      next.nodeType !== VIEW_NODE_TYPE
-    ) {
-      next = { ...next, nodeType: VIEW_NODE_TYPE };
+    const runnableNodeType = resolveRunnableNodeType(next);
+    if (next.nodeType !== runnableNodeType) {
+      next = { ...next, nodeType: runnableNodeType };
     }
     if (next.role === "lifecycle") {
       return { ...next, configSource: "lifecycle" as const };
@@ -233,6 +299,15 @@ export function sanitizeBlueprintDocument(
     if (next.role === "clock") {
       return { ...next, configSource: "clock" as const };
     }
+    if (next.role === "fetch") {
+      return { ...next, configSource: "fetch" as const };
+    }
+    if (next.role === "json") {
+      return { ...next, configSource: "json" as const };
+    }
+    if (next.role === "and") {
+      return { ...next, configSource: "and" as const };
+    }
     if (next.configSource === "lifecycle" || next.configSource === "clock") {
       return { ...next, configSource: undefined };
     }

package/src/graph/node-summary.ts

@@ -1,9 +1,9 @@
-import {
-  PAGE_LIFECYCLE_LABELS,
-  resolveFetchRequestUrl,
-} from "@arronqzy/blueprint-dsl";
+import { resolveFetchRequestUrl } from "@arronqzy/blueprint-dsl";
+import type { TranslateFn } from "@arronqzy/i18n";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
 
 import {
+  getLifecyclePhaseLabel,
   resolveBlueprintConfigSource,
   resolveNodeClockConfig,
   resolveNodeFetchConfig,
@@ -19,21 +19,26 @@ function truncate(text: string, max: number): string {
   return `${trimmed.slice(0, Math.max(0, max - 1))}…`;
 }
 
+function defaultTranslate(): TranslateFn {
+  return tForLocale(resolveLocale());
+}
+
 /** 画布节点正文区展示的配置摘要 */
 export function resolveBlueprintNodeSummary(
-  data: BlueprintFlowNodeData
+  data: BlueprintFlowNodeData,
+  t: TranslateFn = defaultTranslate()
 ): string | undefined {
   const configSource = resolveBlueprintConfigSource(data);
 
   switch (configSource) {
     case "fetch": {
       const config = resolveNodeFetchConfig(data);
-      if (!config.url?.trim()) return "未配置 URL";
+      if (!config.url?.trim()) return t("blueprint.node.summaryNoUrl");
       let url = config.url.trim();
       try {
         url = resolveFetchRequestUrl(config);
       } catch {
-        /* 保留原始输入 */
+        /* keep raw input */
       }
       const method = config.method ?? "GET";
       return truncate(`${method} ${url}`, 44);
@@ -41,20 +46,26 @@ export function resolveBlueprintNodeSummary(
     case "clock": {
       const clock = resolveNodeClockConfig(data);
       const parts = [
-        `${clock.outputCount} 次`,
-        clock.intervalSeconds > 0 ? `间隔 ${clock.intervalSeconds}s` : null,
-        clock.emitImmediately ? "立即首发" : "延迟首发",
+        t("blueprint.node.summaryOutputCount", { count: clock.outputCount }),
+        clock.intervalSeconds > 0
+          ? t("blueprint.node.summaryInterval", {
+              seconds: clock.intervalSeconds,
+            })
+          : null,
+        clock.emitImmediately
+          ? t("blueprint.node.summaryEmitImmediate")
+          : t("blueprint.node.summaryEmitDelayed"),
       ].filter(Boolean);
       return parts.join(" · ");
     }
     case "json": {
       const json = resolveNodeJsonConfig(data).jsonString?.trim();
-      if (!json) return "空 JSON";
+      if (!json) return t("blueprint.node.summaryEmptyJson");
       return truncate(json.replace(/\s+/g, " "), 44);
     }
     case "logic": {
       const code = resolveNodeLogicConfig(data).sourceCode?.trim();
-      if (!code) return "未配置脚本";
+      if (!code) return t("blueprint.node.summaryNoScript");
       const firstLine =
         code.split("\n").find((line) => line.trim())?.trim() ?? code;
       return truncate(firstLine, 44);
@@ -66,22 +77,25 @@ export function resolveBlueprintNodeSummary(
       if (data.libraryBlueprintId) {
         return truncate(data.libraryBlueprintId, 44);
       }
-      return "未选择蓝图";
+      return t("blueprint.node.summaryNoBlueprint");
     }
     case "lifecycle": {
       const phase = data.lifecyclePhase ?? "mounted";
-      return PAGE_LIFECYCLE_LABELS[phase] ?? phase;
+      return getLifecyclePhaseLabel(t, phase);
     }
     case "view": {
       const ids = resolveViewElementIds(data);
-      if (ids.length === 0) return "未关联视图节点";
+      if (ids.length === 0) return t("blueprint.node.summaryNoView");
       if (ids.length === 1) {
-        return truncate(`视图节点 ${ids[0]}`, 44);
+        return truncate(
+          t("blueprint.node.summaryViewOne", { id: ids[0] }),
+          44
+        );
       }
-      return `已关联 ${ids.length} 个视图节点`;
+      return t("blueprint.node.summaryViewMany", { count: ids.length });
     }
     case "and":
-      return "两路输入均为真时输出";
+      return t("blueprint.node.summaryAnd");
     default:
       return undefined;
   }

package/src/graph/sync-nodes.ts

@@ -42,6 +42,8 @@ export function nodeStructureSignature(
     lifecyclePhase?: string;
     libraryBlueprintId?: string;
     nodeType?: string;
+    viewElementId?: string;
+    viewElementIds?: string[];
     fetchConfig?: { url?: string; method?: string; apiBaseUrl?: string; swaggerDocsUrl?: string };
     jsonConfig?: { jsonString?: string };
     logicConfig?: { sourceCode?: string };
@@ -51,7 +53,7 @@ export function nodeStructureSignature(
   return nodes
     .map(
       (n) =>
-        `${n.id}:${n.role}:${n.label}:${n.configSource ?? ""}:${n.lifecyclePhase ?? ""}:${n.libraryBlueprintId ?? ""}:${n.nodeType ?? ""}:${n.fetchConfig?.url ?? ""}:${n.fetchConfig?.method ?? ""}:${n.fetchConfig?.apiBaseUrl ?? ""}:${n.fetchConfig?.swaggerDocsUrl ?? ""}:${n.jsonConfig?.jsonString ?? ""}:${n.logicConfig?.sourceCode ?? ""}:${n.clockConfig?.intervalSeconds ?? ""}:${n.clockConfig?.timeFormat ?? ""}:${n.clockConfig?.outputCount ?? ""}:${n.clockConfig?.emitImmediately ?? ""}`
+        `${n.id}:${n.role}:${n.label}:${n.configSource ?? ""}:${n.lifecyclePhase ?? ""}:${n.libraryBlueprintId ?? ""}:${n.nodeType ?? ""}:${(n.viewElementIds ?? (n.viewElementId ? [n.viewElementId] : [])).join(",")}:${n.fetchConfig?.url ?? ""}:${n.fetchConfig?.method ?? ""}:${n.fetchConfig?.apiBaseUrl ?? ""}:${n.fetchConfig?.swaggerDocsUrl ?? ""}:${n.jsonConfig?.jsonString ?? ""}:${n.logicConfig?.sourceCode ?? ""}:${n.clockConfig?.intervalSeconds ?? ""}:${n.clockConfig?.timeFormat ?? ""}:${n.clockConfig?.outputCount ?? ""}:${n.clockConfig?.emitImmediately ?? ""}`
     )
     .sort()
     .join("|");

package/src/hooks/useBlueprintDebugSession.ts

@@ -112,16 +112,22 @@ export function useBlueprintDebugSession({
     [graph.document, libraryNameById]
   );
 
-  const syncRunnerWithLatestGraph = useCallback(() => {
+  const syncRunnerGraphConfig = useCallback(() => {
     const runner = runnerRef.current;
     if (!runner?.isDebugSessionActive()) return;
     runner.updateGraph(buildRunnableGraph());
     if (selectedLifecycleNodeId) {
       runner.refreshDebugLifecycleScope(selectedLifecycleNodeId);
     }
-    runner.refreshPendingQueueFromLatestGraph();
   }, [buildRunnableGraph, selectedLifecycleNodeId]);
 
+  const syncRunnerWithLatestGraph = useCallback(() => {
+    syncRunnerGraphConfig();
+    const runner = runnerRef.current;
+    if (!runner?.isDebugSessionActive()) return;
+    runner.refreshPendingQueueFromLatestGraph();
+  }, [syncRunnerGraphConfig]);
+
   const resolveBlueprintName = useCallback(
     (id: string) => libraryNameById?.get(id) ?? id,
     [libraryNameById]
@@ -242,12 +248,9 @@ export function useBlueprintDebugSession({
   useEffect(() => {
     const runner = runnerRef.current;
     if (!runner?.isDebugSessionActive()) return;
-    runner.updateGraph(buildRunnableGraph());
-    if (selectedLifecycleNodeId) {
-      runner.refreshDebugLifecycleScope(selectedLifecycleNodeId);
-    }
+    syncRunnerGraphConfig();
     runner.refreshPendingQueueFromLatestGraph();
-  }, [buildRunnableGraph, graphDebugSig, selectedLifecycleNodeId]);
+  }, [graphDebugSig, syncRunnerGraphConfig]);
 
   useEffect(() => {
     if (running) return;
@@ -277,24 +280,14 @@ export function useBlueprintDebugSession({
     try {
       const runner = beginRun();
       if (!runner) return;
+      runner.updateGraph(buildRunnableGraph());
+      runner.refreshDebugLifecycleScope(selectedLifecycleNodeId);
       const labels = buildNodeLabelMap(graph);
       const onProgress = (trace: ExecutionTraceEntry[]) => {
         setEntries([...trace]);
       };
-      while (runner.isDebugSessionActive() && !runner.isDebugQueueEmpty()) {
-        syncRunnerWithLatestGraph();
-        await runner.debugStep(labels, onProgress);
-        const trace = runner.getTraceEntries();
-        setEntries(trace);
-        if (shouldHaltDebugOnFalseSignal(trace, allowFalseSignalPropagation)) {
-          setChainComplete(true);
-          break;
-        }
-        await new Promise<void>((resolve) => {
-          requestAnimationFrame(() => resolve());
-        });
-      }
-      const result = runner.getTraceEntries();
+      const result = await runner.debugRunAll(labels, onProgress);
+      setEntries(result);
       setChainComplete(
         shouldHaltDebugOnFalseSignal(result, allowFalseSignalPropagation) ||
           (runner.isDebugQueueEmpty() && result.length > 0)
@@ -304,7 +297,16 @@ export function useBlueprintDebugSession({
     } finally {
       setRunning(false);
     }
-  }, [allowFalseSignalPropagation, beginRun, buildRunRecord, graph, persistRunIfNeeded, selectedLifecycleNodeId, syncRunnerWithLatestGraph, validateBlueprintGraph]);
+  }, [
+    allowFalseSignalPropagation,
+    beginRun,
+    buildRunRecord,
+    buildRunnableGraph,
+    graph,
+    persistRunIfNeeded,
+    selectedLifecycleNodeId,
+    validateBlueprintGraph,
+  ]);
 
   const stepNext = useCallback(async () => {
     if (