@arronqzy/vue-blueprint 0.1.13 → 0.1.16

package/src/components/FetchNodeConfigPanel.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
-import { Button, Input, Select } from "ant-design-vue";
+import { Button, Input, Select, Tooltip } from "ant-design-vue";
 import type {
   ExecutionTraceEntry,
   FetchHttpMethod,
   FetchRequestConfig,
   FetchResponseType,
+  FetchUrlInputMode,
 } from "@arronqzy/blueprint-dsl";
 import {
+  applyApiCollectionEndpointToFetchConfig,
   applyFetchConfigScope,
   draftFetchHeadersText,
   FETCH_CACHES,
@@ -38,6 +40,7 @@ import {
   useFetchDebugTask,
   useSwaggerLoadTask,
 } from "../fetch-config-task-store";
+import { useApiCollections } from "../library/api-collection-store";
 import ConfigHintIcon from "./ConfigHintIcon.vue";
 import FetchUrlAutocomplete from "./FetchUrlAutocomplete.vue";
 import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
@@ -127,10 +130,28 @@ const autocompleteScope = computed(() =>
   resolveFetchScopeAutocompleteRoot(incomingScope.value)
 );
 const formRef = ref<HTMLElement | null>(null);
+const apiCollections = useApiCollections();
 const endpoints = computed(() => fetchConfig.value.swaggerEndpoints ?? []);
 const hasSwaggerEndpoints = computed(() => endpoints.value.length > 0);
 const urlInputMode = computed(
-  () => fetchConfig.value.urlInputMode ?? (hasSwaggerEndpoints.value ? "swagger" : "manual")
+  (): FetchUrlInputMode =>
+    fetchConfig.value.urlInputMode ?? (hasSwaggerEndpoints.value ? "swagger" : "manual")
+);
+const usingCollection = computed(() => urlInputMode.value === "collection");
+const selectedCollection = computed(
+  () =>
+    apiCollections.value.find((item) => item.id === fetchConfig.value.apiCollectionId) ??
+    null
+);
+const collectionEndpoints = computed(() => selectedCollection.value?.document.apis ?? []);
+const selectedCollectionEndpoint = computed(
+  () =>
+    collectionEndpoints.value.find(
+      (item) => item.name === fetchConfig.value.apiCollectionEndpointName
+    ) ?? null
+);
+const selectedEndpointDescription = computed(
+  () => selectedCollectionEndpoint.value?.description?.trim() || ""
 );
 
 const swaggerTask = useSwaggerLoadTask(props.node.id);
@@ -151,10 +172,85 @@ function patchFetchConfig(node: BlueprintGraphNode, patch: Partial<FetchRequestC
   };
 }
 
-function setUrlInputMode(mode: "swagger" | "manual") {
+function dismissSyncNotice() {
+  props.onUpdateNode(
+    props.node.id,
+    patchFetchConfig(props.node, { apiCollectionSyncNotice: null })
+  );
+}
+
+function setUrlInputMode(mode: FetchUrlInputMode) {
   props.onUpdateNode(props.node.id, patchFetchConfig(props.node, { urlInputMode: mode }));
 }
 
+function setFetchSourceMode(mode: "direct" | "collection") {
+  if (mode === "collection") {
+    props.onUpdateNode(
+      props.node.id,
+      patchFetchConfig(props.node, { urlInputMode: "collection" })
+    );
+    return;
+  }
+  const nextMode: FetchUrlInputMode = hasSwaggerEndpoints.value ? "swagger" : "manual";
+  props.onUpdateNode(
+    props.node.id,
+    patchFetchConfig(props.node, {
+      urlInputMode: nextMode,
+      apiCollectionId: undefined,
+      apiCollectionEndpointName: undefined,
+    })
+  );
+}
+
+function handleSelectCollection(collectionId: string) {
+  if (!collectionId) {
+    props.onUpdateNode(
+      props.node.id,
+      patchFetchConfig(props.node, {
+        apiCollectionId: undefined,
+        apiCollectionEndpointName: undefined,
+        urlInputMode: "collection",
+      })
+    );
+    return;
+  }
+  props.onUpdateNode(
+    props.node.id,
+    patchFetchConfig(props.node, {
+      apiCollectionId: collectionId,
+      apiCollectionEndpointName: undefined,
+      urlInputMode: "collection",
+    })
+  );
+}
+
+function handleSelectCollectionEndpoint(endpointName: string) {
+  const collection = selectedCollection.value;
+  if (!collection || !endpointName) {
+    props.onUpdateNode(
+      props.node.id,
+      patchFetchConfig(props.node, {
+        apiCollectionEndpointName: undefined,
+        urlInputMode: "collection",
+      })
+    );
+    return;
+  }
+  const endpoint = collection.document.apis.find((item) => item.name === endpointName);
+  if (!endpoint) return;
+  props.onUpdateNode(
+    props.node.id,
+    patchFetchConfig(
+      props.node,
+      applyApiCollectionEndpointToFetchConfig({
+        collectionId: collection.id,
+        document: collection.document,
+        endpoint,
+      })
+    )
+  );
+}
+
 function handleLoadSwagger() {
   const docsUrl = fetchConfig.value.swaggerDocsUrl?.trim();
   if (!docsUrl) {
@@ -275,6 +371,84 @@ function handleHeadersInput(event: Event) {
         {{ t("blueprint.config.fetchHint") }}
       </ConfigHintIcon>
     </div>
+
+    <div
+      v-if="fetchConfig.apiCollectionSyncNotice"
+      class="rounded-md border border-emerald-500/40 bg-emerald-500/10 p-2.5 text-[11px] text-foreground"
+    >
+      <div class="flex items-start justify-between gap-2">
+        <div class="space-y-1">
+          <p class="font-medium text-emerald-800">
+            {{ t("blueprint.config.apiCollectionSyncUpdatedTitle") }}
+          </p>
+          <p class="text-muted-foreground">
+            {{ t("blueprint.config.apiCollectionSyncUpdatedSource") }}
+          </p>
+          <p>
+            {{
+              t("blueprint.config.apiCollectionSyncUpdatedCollection", {
+                collection: fetchConfig.apiCollectionSyncNotice.collectionName,
+                endpoint: fetchConfig.apiCollectionSyncNotice.endpointName,
+              })
+            }}
+          </p>
+          <p>
+            {{
+              fetchConfig.apiCollectionSyncNotice.changedFields.length > 0
+                ? t("blueprint.config.apiCollectionSyncUpdatedFields", {
+                    fields: fetchConfig.apiCollectionSyncNotice.changedFields
+                      .map((field) => t(`blueprint.config.apiCollectionSyncField.${field}`))
+                      .join("、"),
+                  })
+                : t("blueprint.config.apiCollectionSyncUpdatedNoFieldChange")
+            }}
+          </p>
+        </div>
+        <Button size="small" @click="dismissSyncNotice">
+          {{ t("common.close") }}
+        </Button>
+      </div>
+    </div>
+
+    <div class="space-y-1">
+      <span class="text-[11px] text-muted-foreground">
+        {{ t("blueprint.config.fetchSourceMode") }}
+      </span>
+      <div class="flex rounded-md border border-border p-0.5">
+        <button
+          type="button"
+          class="flex-1 rounded px-2 py-1 text-[11px] transition-colors"
+          :class="
+            !usingCollection
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          "
+          @click="setFetchSourceMode('direct')"
+        >
+          {{ t("blueprint.config.fetchSourceDirect") }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 rounded px-2 py-1 text-[11px] transition-colors"
+          :class="
+            usingCollection
+              ? 'bg-primary text-primary-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          "
+          @click="setFetchSourceMode('collection')"
+        >
+          {{ t("blueprint.config.fetchSourceCollection") }}
+        </button>
+      </div>
+      <p class="text-[10px] text-muted-foreground">
+        {{
+          usingCollection
+            ? t("blueprint.config.fetchSourceCollectionHint")
+            : t("blueprint.config.fetchSourceDirectHint")
+        }}
+      </p>
+    </div>
+
     <div class="space-y-1 rounded-md border border-gray-200/80 bg-white/80 p-2">
       <div class="flex items-center gap-1.5 text-[11px] font-medium text-gray-800">
         {{ t("blueprint.config.fetchScopeTitle") }}
@@ -292,6 +466,163 @@ function handleHeadersInput(event: Event) {
       </template>
     </div>
 
+    <template v-if="usingCollection">
+      <div class="space-y-2 rounded-md border border-border/60 bg-background/70 p-2">
+        <label class="block space-y-1">
+          <span class="text-muted-foreground">{{ t("blueprint.config.apiCollectionSelect") }}</span>
+          <Select
+            size="small"
+            class="w-full"
+            :value="fetchConfig.apiCollectionId || undefined"
+            :placeholder="t('blueprint.config.apiCollectionSelectPlaceholder')"
+            allow-clear
+            @change="(v) => handleSelectCollection(v == null ? '' : String(v))"
+          >
+            <Select.Option v-if="apiCollections.length === 0" value="__empty" disabled>
+              {{ t("blueprint.config.apiCollectionEmpty") }}
+            </Select.Option>
+            <Select.Option
+              v-for="item in apiCollections"
+              :key="item.id"
+              :value="item.id"
+            >
+              {{ item.name }}
+            </Select.Option>
+          </Select>
+        </label>
+        <label class="block space-y-1">
+          <span class="text-muted-foreground">{{ t("blueprint.config.apiCollectionEndpoint") }}</span>
+          <div class="flex gap-1.5">
+            <Tooltip
+              :title="selectedEndpointDescription || undefined"
+              :mouse-enter-delay="0.2"
+              placement="top"
+              overlay-class-name="max-w-sm whitespace-pre-wrap text-[11px]"
+            >
+              <div class="min-w-0 flex-1">
+                <Select
+                  size="small"
+                  class="w-full"
+                  :value="fetchConfig.apiCollectionEndpointName || undefined"
+                  :placeholder="t('blueprint.config.apiCollectionEndpointPlaceholder')"
+                  :disabled="!selectedCollection"
+                  allow-clear
+                  @change="(v) => handleSelectCollectionEndpoint(v == null ? '' : String(v))"
+                >
+                  <Select.Option v-if="collectionEndpoints.length === 0" value="__empty" disabled>
+                    {{ t("blueprint.config.apiCollectionNoEndpoints") }}
+                  </Select.Option>
+                  <Select.Option
+                    v-for="item in collectionEndpoints"
+                    :key="item.name"
+                    :value="item.name"
+                    :title="item.description?.trim() || undefined"
+                  >
+                    {{ item.name }}
+                  </Select.Option>
+                </Select>
+              </div>
+            </Tooltip>
+            <Button
+              v-if="loadingFetchDebug"
+              size="small"
+              class="h-8 w-8 shrink-0"
+              :title="t('blueprint.config.abortRequest')"
+              @click="handleAbortFetchDebug"
+            >
+              ■
+            </Button>
+            <Button
+              v-else
+              size="small"
+              class="h-8 w-8 shrink-0"
+              :disabled="!fetchConfig.url?.trim()"
+              :title="t('blueprint.config.sendDebugRequest')"
+              @click="handleSendFetchDebug"
+            >
+              ➤
+            </Button>
+          </div>
+        </label>
+        <p v-if="selectedCollection" class="text-[10px] text-muted-foreground">
+          {{ t("blueprint.config.apiCollectionFilledHint") }}
+        </p>
+        <label class="block space-y-1">
+          <span class="text-muted-foreground">{{ t("blueprint.config.requestUrl") }}</span>
+          <Input
+            size="small"
+            :value="fetchConfig.url"
+            :disabled="loadingFetchDebug"
+            class="font-mono text-[11px]"
+            @update:value="(v) => onUpdateNode(node.id, patchFetchConfig(node, { url: String(v) }))"
+          />
+        </label>
+        <p
+          v-if="usesScopeTemplate && resolvedUrlPreview"
+          class="break-all font-mono text-[10px] text-gray-500"
+        >
+          {{ t("blueprint.config.fetchScopeResolvedUrl") }}: {{ resolvedUrlPreview }}
+        </p>
+        <p v-if="loadingFetchDebug" class="text-[11px] text-muted-foreground">
+          {{ t("blueprint.config.sendingDebug") }}
+        </p>
+        <p v-if="fetchValidationError" class="text-[11px] text-destructive">
+          {{ fetchValidationError }}
+        </p>
+        <div
+          v-if="fetchDebugTask.status === 'error'"
+          class="rounded-md border border-destructive/40 bg-destructive/5 p-2"
+        >
+          <p class="text-[11px] text-destructive">
+            {{ fetchDebugTask.error ?? t("blueprint.config.requestFailed") }}
+          </p>
+        </div>
+        <div
+          v-else-if="fetchDebugTask.status === 'success' && fetchDebugTask.result"
+          class="rounded-md border border-border/70 bg-background/80"
+        >
+          <button
+            type="button"
+            class="flex w-full items-center gap-2 px-2 py-1.5 text-left"
+            @click="debugExpanded = !debugExpanded"
+          >
+            <span
+              class="text-muted-foreground transition-transform"
+              :class="debugExpanded && 'rotate-180'"
+            >
+              ▼
+            </span>
+            <span class="text-[11px] font-medium text-foreground">{{ t("blueprint.config.debugResponse") }}</span>
+            <span
+              class="rounded px-1.5 py-0.5 font-mono text-[10px]"
+              :class="
+                debugOk
+                  ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300'
+                  : 'bg-destructive/15 text-destructive'
+              "
+            >
+              {{ fetchDebugTask.result.status }} {{ fetchDebugTask.result.statusText }}
+            </span>
+            <span
+              v-if="!debugExpanded"
+              class="min-w-0 flex-1 truncate font-mono text-[10px] text-muted-foreground"
+            >
+              {{ debugPreview }}
+            </span>
+          </button>
+          <div v-if="debugExpanded" class="border-t border-border/60 px-2 py-2">
+            <div class="mb-1 truncate font-mono text-[10px] text-muted-foreground">
+              {{ fetchDebugTask.result.url }}
+            </div>
+            <pre
+              class="max-h-56 overflow-auto whitespace-pre-wrap break-all rounded bg-muted/30 p-2 font-mono text-[10px] leading-relaxed text-foreground"
+            >{{ debugBodyText }}</pre>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.swaggerUrlOptional") }}</span>
       <div class="flex gap-1.5">
@@ -527,6 +858,7 @@ function handleHeadersInput(event: Event) {
         </div>
       </div>
     </label>
+    </template>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.requestMethod") }}</span>

package/src/components/JsonLintTextarea.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useI18n } from "@arronqzy/i18n/vue";
+import {
+  renderJsonWithErrorHighlights,
+  type JsonErrorRange,
+} from "@arronqzy/blueprint-dsl";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    ranges?: JsonErrorRange[];
+    placeholder?: string;
+    rows?: number;
+    class?: string;
+  }>(),
+  {
+    ranges: () => [],
+    rows: 12,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const { t } = useI18n();
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+const highlightedHtml = computed(() =>
+  renderJsonWithErrorHighlights(props.modelValue, props.ranges)
+);
+
+const rootClass = computed(() =>
+  ["space-y-1.5", props.class].filter(Boolean).join(" ")
+);
+
+const textareaClass = computed(() =>
+  [
+    "w-full resize-y rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary",
+    props.ranges.length > 0 ? "border-destructive/60" : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLTextAreaElement).value);
+}
+
+function jumpToFirstError() {
+  const ta = textareaRef.value;
+  const first = props.ranges[0];
+  if (!ta || !first) return;
+  ta.focus();
+  const start = Math.max(0, first.start);
+  const end = Math.max(start, Math.min(props.modelValue.length, first.end));
+  ta.setSelectionRange(start, end);
+}
+</script>
+
+<template>
+  <div :class="rootClass">
+    <textarea
+      ref="textareaRef"
+      :value="modelValue"
+      :rows="rows"
+      spellcheck="false"
+      :placeholder="placeholder"
+      :class="textareaClass"
+      @input="onInput"
+    />
+    <div v-if="ranges.length > 0" class="space-y-1">
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-[10px] text-destructive">
+          {{ t("blueprint.config.jsonErrorPreviewHint") }}
+        </span>
+        <button
+          type="button"
+          class="shrink-0 text-[10px] text-destructive underline-offset-2 hover:underline"
+          @click="jumpToFirstError"
+        >
+          {{ t("blueprint.config.jsonJumpToError") }}
+        </button>
+      </div>
+      <pre
+        aria-hidden="true"
+        class="max-h-40 overflow-auto whitespace-pre-wrap break-words rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground"
+        v-html="highlightedHtml || '\n'"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.json-lint-error) {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  line-height: inherit;
+  color: hsl(var(--destructive, 0 84% 60%));
+  background: color-mix(
+    in oklab,
+    hsl(var(--destructive, 0 84% 60%)) 22%,
+    transparent
+  );
+  border-radius: 2px;
+  text-decoration: underline wavy hsl(var(--destructive, 0 84% 60%));
+  text-underline-offset: 2px;
+}
+</style>

package/src/components/JsonNodeConfigPanel.vue

@@ -1,26 +1,46 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
-import { validateJsonString } from "@arronqzy/blueprint-dsl";
-import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
+import type {
+  ExecutionTraceEntry,
+  JsonErrorRange,
+  JsonNodeConfig,
+} from "@arronqzy/blueprint-dsl";
+import {
+  latestTraceOutputsByNode,
+  resolveFetchIncomingScope,
+  resolveFetchScopeAutocompleteRoot,
+  validateJsonStringAllowingScope,
+} from "@arronqzy/blueprint-dsl";
 
 import ConfigHintIcon from "./ConfigHintIcon.vue";
-import type { BlueprintGraphNode } from "../graph/document";
+import JsonLintTextarea from "./JsonLintTextarea.vue";
+import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
 
 const { t } = useI18n();
 
 export type JsonNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "jsonConfig" | "configSource">>
   ) => void;
 };
 
-const props = defineProps<JsonNodeConfigPanelProps>();
+const props = withDefaults(defineProps<JsonNodeConfigPanelProps>(), {
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
+});
 
+const formRef = ref<HTMLDivElement | null>(null);
 const draftError = ref<string | null>(null);
+const draftRanges = ref<JsonErrorRange[] | null>(null);
 
 function patchJsonConfig(node: BlueprintGraphNode, patch: Partial<JsonNodeConfig>) {
   return {
@@ -31,24 +51,58 @@ function patchJsonConfig(node: BlueprintGraphNode, patch: Partial<JsonNodeConfig
 
 const jsonConfig = computed(() => resolveNodeJsonConfig(props.node));
 
+const incomingScope = computed(() => {
+  const outputs = latestTraceOutputsByNode(props.traceEntries);
+  return resolveFetchIncomingScope({
+    fetchNodeId: props.node.id,
+    nodes: props.graphNodes,
+    edges: props.graphEdges,
+    getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+  });
+});
+const autocompleteScope = computed(() =>
+  resolveFetchScopeAutocompleteRoot(incomingScope.value)
+);
+
 const storedValidation = computed(() =>
-  validateJsonString(jsonConfig.value.jsonString)
+  validateJsonStringAllowingScope(jsonConfig.value.jsonString)
 );
 
 const parseError = computed(
-  () => draftError.value ?? (storedValidation.value.ok ? null : storedValidation.value.error)
+  () =>
+    draftError.value ??
+    (storedValidation.value.ok ? null : storedValidation.value.error)
+);
+
+const errorRanges = computed<JsonErrorRange[]>(() => {
+  if (draftRanges.value) return draftRanges.value;
+  if (!storedValidation.value.ok && "ranges" in storedValidation.value) {
+    return storedValidation.value.ranges;
+  }
+  return [];
+});
+
+const deferredScope = computed(
+  () =>
+    storedValidation.value.ok &&
+    "deferred" in storedValidation.value &&
+    storedValidation.value.deferred === true
 );
 
-function handleChange(event: Event) {
-  const jsonString = (event.target as HTMLTextAreaElement).value;
-  const result = validateJsonString(jsonString);
+function handleChange(jsonString: string) {
+  const result = validateJsonStringAllowingScope(jsonString);
   draftError.value = result.ok ? null : result.error;
+  draftRanges.value = result.ok ? null : result.ranges;
   props.onUpdateNode(props.node.id, patchJsonConfig(props.node, { jsonString }));
 }
 </script>
 
 <template>
-  <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+  <div
+    ref="formRef"
+    class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+  >
+    <ScopeTemplateAutocompleteHost :scope="autocompleteScope" :container-ref="formRef" />
     <div class="flex items-center gap-1.5">
       <div class="font-medium text-foreground">{{ t("blueprint.config.jsonTitle") }}</div>
       <ConfigHintIcon :label="t('blueprint.config.jsonTitle')">
@@ -57,20 +111,27 @@ function handleChange(event: Event) {
     </div>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.jsonContent") }}</span>
-      <textarea
-        :value="jsonConfig.jsonString"
-        rows="12"
-        spellcheck="false"
-        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.jsonContent") }}
+        <ConfigHintIcon :label="t('blueprint.config.jsonContent')">
+          {{ t("blueprint.config.jsonScopeHint") }}
+        </ConfigHintIcon>
+      </span>
+      <JsonLintTextarea
+        :model-value="jsonConfig.jsonString"
+        :ranges="errorRanges"
+        :rows="12"
         placeholder='{
-  "key": "value"
+  "key": "{scope?.value}"
 }'
-        @input="handleChange"
+        @update:model-value="handleChange"
       />
       <p v-if="parseError" class="text-[11px] text-destructive">
         {{ t("blueprint.config.jsonFormatError", { error: parseError }) }}
       </p>
+      <p v-else-if="deferredScope" class="text-[11px] text-muted-foreground">
+        {{ t("blueprint.config.jsonScopeDeferred") }}
+      </p>
       <p v-else class="text-[11px] text-muted-foreground">{{ t("blueprint.config.jsonFormatOk") }}</p>
     </label>
   </div>