@morit/cli 1.2.0 → 1.4.0

package/assets/plugin_contract.json

@@ -1,5 +1,5 @@
 {
-  "sdk_version": "1.7.8",
+  "sdk_version": "1.7.12",
   "manifest_schema_versions": [1, 2],
   "recommended_schema_version": 2,
   "package_content_type": "application/vnd.morit.plugin+zip",
@@ -45,7 +45,7 @@
     "slash_commands": {"target": "slash_commands", "kind": null}
   },
   "object_fields": {
-    "capability": ["id", "kind", "title", "description", "permissions", "timeout_seconds", "runtime"],
+    "capability": ["id", "kind", "title", "description", "permissions", "timeout_seconds", "runtime", "input_schema", "output_schema"],
     "ui_extension": ["id", "point", "title", "order", "permissions", "config"],
     "credential": ["id", "label", "description", "kind", "required", "oauth_provider", "allow_multiple"],
     "slash_command": ["id", "command", "title", "description", "capability", "argument_template"],
@@ -112,10 +112,26 @@
     "permission_revalidation": true
   },
   "ai_response": {
+    "a2ui_version": "v0.9",
+    "catalog_id": "https://moring.co/a2ui/catalogs/morit-ai/v1",
+    "selection": "ai_explicit_host_validated",
+    "selection_limit": 4,
+      "skill": "morit_a2ui",
+      "tool": "render_a2ui",
+      "model_selection_fields": ["candidate_id", "component", "values", "chart_type"],
+      "host_injects_tool_data": false,
+      "tool_values_must_equal_candidate": false,
+      "tool_values_must_be_candidate_grounded": true,
+    "fallback": "text_only",
+    "built_in_components": ["weather", "world_clock", "chart", "image_gallery", "exchange_rate", "article_list", "article_card", "file_result", "image_preview", "video_preview"],
+    "validation_gates": ["completed_or_partial", "non_empty", "component_data", "answer_relevance", "not_duplicate", "plugin_schema", "plugin_permission", "plugin_version"],
+    "plugin_component_prefix": "plugin.",
+    "plugin_metadata_fields": ["version", "description", "schema"],
+    "plugin_schema_types": ["object", "array", "string", "number", "integer", "boolean", "null"],
+    "plugin_schema_max_bytes": 16384,
+    "plugin_schema_max_depth": 6,
     "state_field": "data.__morit_response.state",
-    "states": ["loading", "partial", "completed", "failed"],
-    "retryable_field": "data.__morit_response.retryable",
-    "fallback_nodes": ["metric", "progress", "list", "timeline", "calendar", "chart", "table", "empty"],
+    "emitted_states": ["partial", "completed"],
     "image_artifact_mime_types": ["image/png", "image/jpeg", "image/gif", "image/webp"],
     "max_inline_image_bytes": 25165824,
     "max_inline_image_dimension": 4096,
@@ -192,6 +208,7 @@
       "theme",
       "initial_state",
       "data_sources",
+      "a2ui",
       "view"
     ],
     "node_fields": ["id", "type", "props", "children", "action", "visible_when"],
@@ -265,6 +282,17 @@
       "top",
       "right",
       "bottom"
+      ,"required"
+      ,"min_length"
+      ,"max_length"
+      ,"minimum"
+      ,"maximum"
+      ,"error_text"
+      ,"suggestions"
+      ,"suggestions_source"
+      ,"searchable"
+      ,"options_source"
+      ,"submit_label"
     ],
     "app_bar_fields": ["title", "subtitle", "center_title", "pinned", "leading", "actions"],
     "navigation_fields": ["type", "items", "selected_state_key", "persist", "label_behavior", "rail_breakpoint"],
@@ -276,8 +304,11 @@
     "theme_border_fields": ["color", "width", "radius"],
     "theme_icon_fields": ["color", "size"],
     "theme_state_fields": ["disabled_opacity", "selected_color", "focus_color"],
-    "action_fields": ["type", "capability", "query", "arguments", "store", "target", "source", "values", "persist", "transition", "replace"],
-    "actions": ["invoke", "navigate", "set_state", "refresh", "back"],
+    "action_fields": ["type", "capability", "query", "arguments", "store", "target", "source", "values", "persist", "transition", "replace", "mode", "actions", "continue_on_error", "validate", "parameters", "result_state", "result"],
+    "actions": ["invoke", "navigate", "set_state", "refresh", "back", "flow"],
+    "condition_fields": ["path", "equals", "not_equals", "exists", "all", "any", "not"],
+    "condition_context_roots": ["platform", "screen", "permissions", "connections", "connected", "loading", "errors", "route"],
+    "action_flow_modes": ["sequential", "parallel"],
     "navigation_transitions": ["platform", "fade", "slide", "none"],
     "chart_types": ["bar", "line", "donut", "scatter"],
     "navigation_types": ["tabs", "bar", "rail", "drawer", "adaptive"],
@@ -395,7 +426,13 @@
       "data_sources": 8,
       "state_keys": 32,
       "navigation_items": 8,
-      "app_bar_actions": 6
+      "app_bar_actions": 6,
+      "condition_depth": 4,
+      "condition_nodes": 32,
+      "action_flow_depth": 4,
+      "action_flow_actions": 16,
+      "actions_per_flow": 8,
+      "input_options": 32
     }
   },
   "signature": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morit/cli",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Official Morit Developer CLI for Cloud Projects, validation, builds, and deployments",
   "type": "module",
   "bin": {

package/src/preview.js

@@ -51,27 +51,53 @@ function themeVariables(config) {
   return values.join(";");
 }
 
+function jsonAttribute(value) {
+  return escape(JSON.stringify(value));
+}
+
+function nodeAttributes(node) {
+  const attributes = [];
+  if (node.visible_when) attributes.push('data-visible="' + jsonAttribute(node.visible_when) + '"');
+  if (node.action) attributes.push('data-action="' + jsonAttribute(node.action) + '"');
+  return attributes.length ? " " + attributes.join(" ") : "";
+}
+
 function nodeHtml(node) {
   if (!node || typeof node !== "object") return "";
   const type = String(node.type || "surface");
   const props = node.props && typeof node.props === "object" ? node.props : {};
   const children = Array.isArray(node.children) ? node.children.map(nodeHtml).join("") : "";
   const label = escape(props.label || props.title || type);
-  const action = node.action ? ' data-action="' + escape(node.action.type) + '"' : "";
-  if (type === "text") return '<p class="ui-text ' + escape(props.style) + '">' + escape(props.text) + "</p>";
-  if (type === "icon") return '<span class="ui-icon" role="img" aria-label="' + escape(props.semantic_label || props.icon) + '">' + escape(props.icon) + "</span>";
-  if (type === "image") return '<div class="ui-image" role="img" aria-label="' + escape(props.semantic_label || "image") + '">🖼 ' + escape(props.asset || props.url || "image") + "</div>";
-  if (type === "avatar") return '<span class="ui-avatar">' + escape(props.label || "M").slice(0, 1) + "</span>";
-  if (type === "badge") return '<span class="ui-badge">' + label + children + "</span>";
+  const attributes = nodeAttributes(node);
+  const template = (value) => ' data-template="' + escape(value ?? "") + '"';
+  if (type === "text") return '<p class="ui-text ' + escape(props.style) + '"' + attributes + template(props.text) + '>' + escape(props.text) + "</p>";
+  if (type === "icon") return '<span class="ui-icon" role="img" aria-label="' + escape(props.semantic_label || props.icon) + '"' + attributes + '>' + escape(props.icon) + "</span>";
+  if (type === "image") return '<div class="ui-image" role="img" aria-label="' + escape(props.semantic_label || "image") + '"' + attributes + '>🖼 ' + escape(props.asset || props.url || "image") + "</div>";
+  if (type === "avatar") return '<span class="ui-avatar"' + attributes + '>' + escape(props.label || "M").slice(0, 1) + "</span>";
+  if (type === "badge") return '<span class="ui-badge"' + attributes + '>' + label + children + "</span>";
   if (type === "divider") return "<hr>";
   if (type === "spacer") return '<span class="ui-spacer" aria-hidden="true"></span>';
-  if (type === "button") return "<button" + action + ">" + (props.icon ? escape(props.icon) + " " : "") + label + "</button>";
-  if (type === "chip") return '<span class="ui-chip"' + action + ">" + label + "</span>";
-  if (type === "metric") return '<div class="ui-metric"><strong>' + escape(props.value) + "</strong><span>" + label + "</span></div>";
-  if (type === "progress") return '<div class="ui-progress"><span>' + label + '</span><progress value="' + Number(props.value ?? .5) + '" max="1"></progress></div>';
-  if (type === "field") return '<label class="ui-field">' + label + '<input disabled placeholder="' + escape(props.hint || props.placeholder) + '"></label>';
-  if (type === "select") return '<label class="ui-field">' + label + '<select disabled><option>' + escape(props.placeholder || "선택") + "</option></select></label>";
-  if (type === "switch") return '<label class="ui-switch"><input type="checkbox" disabled> ' + label + "</label>";
+  if (type === "button") return "<button type=\"button\"" + attributes + ">" + (props.icon ? escape(props.icon) + " " : "") + label + "</button>";
+  if (type === "chip") return '<button type="button" class="ui-chip"' + attributes + '>' + label + "</button>";
+  if (type === "metric") return '<div class="ui-metric"' + attributes + '><strong' + template(props.value) + '>' + escape(props.value) + "</strong><span>" + label + "</span></div>";
+  if (type === "progress") return '<div class="ui-progress"' + attributes + '><span>' + label + '</span><progress data-value-template="' + escape(props.value ?? .5) + '" value="' + Number(props.value ?? .5) + '" max="1"></progress></div>';
+  if (type === "field") {
+    const inputType = props.input_type === "number" ? "number" : props.input_type === "email" ? "email" : props.input_type === "url" ? "url" : "text";
+    const constraints = (props.required ? " required" : "") + (props.min_length != null ? ' minlength="' + Number(props.min_length) + '"' : "") + (props.max_length != null ? ' maxlength="' + Number(props.max_length) + '"' : "") + (props.minimum != null ? ' min="' + Number(props.minimum) + '"' : "") + (props.maximum != null ? ' max="' + Number(props.maximum) + '"' : "");
+    const suggestions = Array.isArray(props.suggestions) ? '<datalist id="list-' + escape(props.state_key) + '">' + props.suggestions.map((value) => '<option value="' + escape(value) + '"></option>').join("") + "</datalist>" : "";
+    const listId = props.suggestions || props.suggestions_source ? "list-" + props.state_key : "";
+    return '<label class="ui-field"' + attributes + '>' + label + '<input type="' + inputType + '" data-state-key="' + escape(props.state_key) + '" data-suggestions-source="' + escape(props.suggestions_source || "") + '" placeholder="' + escape(props.hint || props.placeholder) + '"' + constraints + (listId ? ' list="' + escape(listId) + '"' : "") + ">" + (suggestions || (listId ? '<datalist id="' + escape(listId) + '"></datalist>' : "")) + "</label>";
+  }
+  if (type === "select") {
+    const options = Array.isArray(props.options) ? props.options : [];
+    if (props.searchable) {
+      const listId = "select-" + props.state_key;
+      return '<label class="ui-field"' + attributes + '>' + label + '<input data-search-select="true" data-state-key="' + escape(props.state_key) + '" data-options-source="' + escape(props.options_source || "") + '" data-options="' + jsonAttribute(options) + '" list="' + escape(listId) + '" placeholder="' + escape(props.placeholder || "검색하여 선택") + '"' + (props.required ? " required" : "") + '><datalist id="' + escape(listId) + '">' + options.map((option) => '<option value="' + escape(option.label) + '"></option>').join("") + "</datalist></label>";
+    }
+    const optionHtml = options.map((option, index) => '<option value="' + index + '" data-value="' + jsonAttribute(option.value) + '">' + escape(option.label) + "</option>").join("");
+    return '<label class="ui-field"' + attributes + '>' + label + '<select data-state-key="' + escape(props.state_key) + '" data-options-source="' + escape(props.options_source || "") + '"' + (props.required ? " required" : "") + '><option value="">' + escape(props.placeholder || "선택") + "</option>" + optionHtml + "</select></label>";
+  }
+  if (type === "switch") return '<label class="ui-switch"' + attributes + '><input type="checkbox" data-state-key="' + escape(props.state_key) + '"' + (props.required ? " required" : "") + "> " + label + "</label>";
   if (type === "empty") return '<div class="ui-empty"><strong>' + escape(props.title || "표시할 내용이 없어요.") + "</strong><p>" + escape(props.supporting) + "</p></div>";
   if (["list", "timeline", "calendar", "chart", "table"].includes(type)) {
     return '<section class="ui-collection"><small>' + escape(type + (props.source ? " · " + props.source : "")) + "</small>" + (children || '<p>' + escape(props.empty_text || "데이터가 연결되면 표시됩니다.") + "</p>") + "</section>";
@@ -83,7 +109,8 @@ function nodeHtml(node) {
   const heading = surface && (props.title || props.label)
     ? "<h3>" + label + "</h3>" + (props.subtitle ? "<p>" + escape(props.subtitle) + "</p>" : "")
     : "";
-  return '<div class="' + className + '"' + action + ">" + heading + children + "</div>";
+  if (type === "form") return '<form class="' + className + '"' + attributes + ">" + heading + children + (props.submit_label ? '<button type="submit">' + escape(props.submit_label) + "</button>" : "") + "</form>";
+  return '<div class="' + className + '"' + attributes + ">" + heading + children + "</div>";
 }
 
 function chromeHtml(config) {
@@ -100,6 +127,214 @@ function chromeHtml(config) {
   return bar + nav;
 }
 
+export function resolvePreviewPath(roots, path) {
+  const parts = String(path || "").split(".");
+  let value = roots[parts.shift()];
+  for (const part of parts) {
+    if (value == null) return null;
+    if (Array.isArray(value) && part === "length") value = value.length;
+    else if (Array.isArray(value) && /^\d+$/.test(part)) value = value[Number(part)];
+    else if (typeof value === "object") value = value[part];
+    else return null;
+  }
+  return value ?? null;
+}
+
+export function previewValuesEqual(left, right) {
+  if (Object.is(left, right)) return true;
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length && left.every((value, index) => previewValuesEqual(value, right[index]));
+  }
+  if (left && right && typeof left === "object" && typeof right === "object" && !Array.isArray(left) && !Array.isArray(right)) {
+    const keys = Object.keys(left);
+    return keys.length === Object.keys(right).length && keys.every((key) => Object.hasOwn(right, key) && previewValuesEqual(left[key], right[key]));
+  }
+  return typeof left === "number" && typeof right === "number" && left === right;
+}
+
+export function resolvePreviewValue(value, roots) {
+  if (Array.isArray(value)) return value.map((item) => resolvePreviewValue(item, roots));
+  if (value && typeof value === "object") {
+    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, resolvePreviewValue(item, roots)]));
+  }
+  if (typeof value !== "string") return value;
+  const exact = value.match(/^\{\{((?:state|data|context|item)\.[A-Za-z0-9_.-]+)\}\}$/);
+  if (exact) return resolvePreviewPath(roots, exact[1]);
+  return value.replace(/\{\{((?:state|data|context|item)\.[A-Za-z0-9_.-]+)\}\}/g, (_, path) => String(resolvePreviewPath(roots, path) ?? ""));
+}
+
+export function evaluatePreviewCondition(condition, roots) {
+  if (!condition) return true;
+  if (Array.isArray(condition.all)) return condition.all.every((item) => evaluatePreviewCondition(item, roots));
+  if (Array.isArray(condition.any)) return condition.any.some((item) => evaluatePreviewCondition(item, roots));
+  if (condition.not) return !evaluatePreviewCondition(condition.not, roots);
+  const value = resolvePreviewPath(roots, condition.path);
+  if (Object.hasOwn(condition, "equals")) return previewValuesEqual(value, resolvePreviewValue(condition.equals, roots));
+  if (Object.hasOwn(condition, "not_equals")) return !previewValuesEqual(value, resolvePreviewValue(condition.not_equals, roots));
+  if (Object.hasOwn(condition, "exists")) return condition.exists === (value !== null);
+  return true;
+}
+
+function previewRuntime() {
+  const parse = (element, key) => element.dataset[key] ? JSON.parse(element.dataset[key]) : null;
+  const same = previewValuesEqual;
+  for (const article of document.querySelectorAll(".screen[data-extension]")) {
+    const config = JSON.parse(article.querySelector(".runtime-config").textContent);
+    const state = structuredClone(config.initial_state || {});
+    const data = {};
+    const context = {
+      platform: "web",
+      permissions: {}, connections: {}, connected: false,
+      loading: {}, errors: {}, route: {},
+      screen: { width: article.clientWidth, height: innerHeight, size_class: article.clientWidth < 600 ? "compact" : article.clientWidth < 840 ? "medium" : "expanded" },
+    };
+    const roots = () => ({ state, data, context, item: {} });
+    const inspector = article.querySelector(".runtime-inspector pre");
+    const log = [];
+
+    function optionValue(option) {
+      if (!option?.dataset.value) return option?.value ?? null;
+      return JSON.parse(option.dataset.value);
+    }
+
+    function update() {
+      for (const element of article.querySelectorAll("[data-visible]")) {
+        element.hidden = !evaluatePreviewCondition(parse(element, "visible"), roots());
+      }
+      for (const element of article.querySelectorAll("[data-template]")) {
+        element.textContent = String(resolvePreviewValue(element.dataset.template, roots()) ?? "");
+      }
+      for (const element of article.querySelectorAll("progress[data-value-template]")) {
+        element.value = Number(resolvePreviewValue(element.dataset.valueTemplate, roots()) ?? 0);
+      }
+      for (const input of article.querySelectorAll("input[data-suggestions-source]")) {
+        if (!input.dataset.suggestionsSource) continue;
+        const values = resolvePreviewPath(roots(), input.dataset.suggestionsSource);
+        const list = document.getElementById(input.getAttribute("list"));
+        if (list && Array.isArray(values)) list.replaceChildren(...values.filter((value) => typeof value === "string").map((value) => Object.assign(document.createElement("option"), { value })));
+      }
+      for (const select of article.querySelectorAll("select[data-options-source]")) {
+        if (!select.dataset.optionsSource) continue;
+        const values = resolvePreviewPath(roots(), select.dataset.optionsSource);
+        const placeholder = select.options[0]?.cloneNode(true) || document.createElement("option");
+        const options = Array.isArray(values) ? values.filter((value) => value && typeof value === "object" && typeof value.label === "string") : [];
+        select.replaceChildren(placeholder, ...options.map((value, index) => {
+          const option = document.createElement("option");
+          option.value = String(index);
+          option.textContent = value.label;
+          option.dataset.value = JSON.stringify(value.value);
+          return option;
+        }));
+      }
+      for (const input of article.querySelectorAll("input[data-search-select]")) {
+        const values = input.dataset.optionsSource ? resolvePreviewPath(roots(), input.dataset.optionsSource) : JSON.parse(input.dataset.options || "[]");
+        input._previewOptions = Array.isArray(values) ? values.filter((value) => value && typeof value === "object" && typeof value.label === "string") : [];
+        const list = document.getElementById(input.getAttribute("list"));
+        if (list) list.replaceChildren(...input._previewOptions.map((value) => Object.assign(document.createElement("option"), { value: value.label })));
+      }
+      for (const input of article.querySelectorAll("[data-state-key]")) {
+        const value = state[input.dataset.stateKey];
+        if (input.type === "checkbox") input.checked = value === true;
+        else if (input.dataset.searchSelect) {
+          const match = (input._previewOptions || []).find((option) => same(option.value, value));
+          if (document.activeElement !== input && match && input.value !== match.label) input.value = match.label;
+        }
+        else if (input.tagName === "SELECT") {
+          const match = [...input.options].find((option) => same(optionValue(option), value));
+          if (match && input.value !== match.value) input.value = match.value;
+        } else if (document.activeElement !== input && input.value !== String(value ?? "")) input.value = String(value ?? "");
+      }
+      inspector.textContent = JSON.stringify({ state, data, context, log: log.slice(-8) }, null, 2);
+    }
+
+    async function perform(action) {
+      if (!action) return false;
+      if (action.validate && ![...article.querySelectorAll("form")].every((form) => form.reportValidity())) return false;
+      if (action.type === "flow") {
+        const tasks = action.actions || [];
+        if (action.mode === "parallel") {
+          const results = await Promise.all(tasks.map(perform));
+          return action.continue_on_error || results.every(Boolean);
+        }
+        for (const child of tasks) if (!await perform(child) && !action.continue_on_error) return false;
+        return true;
+      }
+      if (action.type === "set_state") Object.assign(state, resolvePreviewValue(action.values || {}, roots()));
+      else if (action.type === "invoke") {
+        const detail = { capability: action.capability, query: resolvePreviewValue(action.query, roots()), arguments: resolvePreviewValue(action.arguments || {}, roots()), result: null };
+        article.dispatchEvent(new CustomEvent("morit-preview-invoke", { detail, bubbles: true }));
+        if (action.store && detail.result != null) data[action.store] = detail.result;
+        log.push({ invoke: detail.capability, arguments: detail.arguments });
+      } else if (action.type === "refresh") {
+        const detail = { source: action.source, result: null };
+        article.dispatchEvent(new CustomEvent("morit-preview-refresh", { detail, bubbles: true }));
+        if (detail.result != null) data[action.source] = detail.result;
+        log.push({ refresh: action.source });
+      } else if (action.type === "navigate") {
+        const detail = { target: action.target, parameters: resolvePreviewValue(action.parameters || {}, roots()), result: null };
+        article.dispatchEvent(new CustomEvent("morit-preview-navigate", { detail, bubbles: true }));
+        context.route = detail.parameters;
+        document.querySelector('.screen[data-extension="' + CSS.escape(action.target) + '"]')?.scrollIntoView({ behavior: "smooth" });
+        if (action.result_state && detail.result != null) state[action.result_state] = detail.result;
+        log.push({ navigate: action.target, parameters: detail.parameters });
+      } else if (action.type === "back") {
+        article.dispatchEvent(new CustomEvent("morit-preview-back", { detail: { result: resolvePreviewValue(action.result || {}, roots()) }, bubbles: true }));
+        log.push({ back: true });
+      }
+      update();
+      return true;
+    }
+
+    article.addEventListener("input", (event) => {
+      const input = event.target.closest("[data-state-key]");
+      if (!input) return;
+      if (input.dataset.searchSelect) return;
+      state[input.dataset.stateKey] = input.type === "checkbox" ? input.checked : input.type === "number" && input.value !== "" ? Number(input.value) : input.value;
+      update();
+    });
+    article.addEventListener("change", (event) => {
+      const input = event.target.closest("[data-state-key]");
+      if (!input) return;
+      if (input.dataset.searchSelect) {
+        const match = (input._previewOptions || []).find((option) => option.label === input.value);
+        if (!match) { input.setCustomValidity("목록에서 선택해 주세요."); input.reportValidity(); return; }
+        input.setCustomValidity("");
+        state[input.dataset.stateKey] = match.value;
+      } else state[input.dataset.stateKey] = input.tagName === "SELECT" ? optionValue(input.selectedOptions[0]) : input.type === "checkbox" ? input.checked : input.type === "number" && input.value !== "" ? Number(input.value) : input.value;
+      const actionHost = input.closest("[data-action]");
+      if (actionHost) perform(parse(actionHost, "action"));
+      update();
+    });
+    article.addEventListener("submit", (event) => {
+      event.preventDefault();
+      perform(parse(event.target, "action"));
+    });
+    article.addEventListener("click", (event) => {
+      const host = event.target.closest("button[data-action], .ui-surface[data-action], .ui-layout[data-action]");
+      if (host) perform(parse(host, "action"));
+    });
+    article.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" || event.isComposing) return;
+      const field = event.target.closest(".ui-field[data-action]");
+      if (field) { event.preventDefault(); perform(parse(field, "action")); }
+    });
+    new ResizeObserver(() => {
+      context.screen.width = article.clientWidth;
+      context.screen.size_class = article.clientWidth < 600 ? "compact" : article.clientWidth < 840 ? "medium" : "expanded";
+      update();
+    }).observe(article);
+    update();
+  }
+}
+
+const RUNTIME_SCRIPT = [
+  resolvePreviewPath.toString(),
+  previewValuesEqual.toString(),
+  resolvePreviewValue.toString(),
+  evaluatePreviewCondition.toString(),
+  "(" + previewRuntime.toString() + ")();",
+].join("\n");
+
 const CSS = [
   "*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,sans-serif;background:#0d1211}",
   ".theme-toggle{position:fixed;right:18px;top:16px;z-index:3;padding:9px 13px;border-radius:999px;background:#fff;color:#17211f;box-shadow:0 4px 18px #0003;cursor:pointer}",
@@ -110,6 +345,7 @@ const CSS = [
   ".screen-meta,.app-bar,.screen-body,.ui-nav{padding:var(--space)}.screen-meta{display:flex;gap:8px;background:var(--surface-variant);color:var(--on-surface-variant)}.screen-meta span{margin-right:auto}.app-bar{display:flex;align-items:center;border-bottom:1px solid var(--outline-variant)}.app-bar div:first-child{display:grid}.app-bar small{color:var(--on-surface-variant)}.app-actions{margin-left:auto;display:flex;gap:6px}",
   ".screen-body,.ui-layout,.ui-surface,.ui-collection{display:flex;flex-direction:column;gap:var(--space)}.ui-layout.row{flex-direction:row;align-items:center}.ui-layout.wrap,.ui-nav{display:flex;flex-flow:row wrap;gap:8px}.ui-layout.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.ui-surface,.ui-collection,.ui-empty{padding:var(--space);border:1px solid var(--outline-variant);border-radius:var(--radius);background:color-mix(in srgb,var(--surface),var(--primary-container) 9%)}",
   "h3,p{margin:0}.ui-text.heading{font-size:1.25em;font-weight:750}.ui-text.caption,small{color:var(--on-surface-variant)}button,.ui-chip{border:0;border-radius:999px;padding:8px 13px;background:var(--primary-container);color:var(--on-primary-container);font:inherit}.ui-icon{font:600 .75em monospace;color:var(--primary)}.ui-image{min-height:90px;display:grid;place-items:center;border-radius:var(--radius);background:var(--surface-variant);color:var(--on-surface-variant)}.ui-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:var(--on-primary)}.ui-badge{padding:3px 7px;border-radius:99px;background:var(--error-container);color:var(--on-error-container)}.ui-metric{display:grid;padding:12px;border-radius:var(--radius);background:var(--secondary-container);color:var(--on-secondary-container)}.ui-metric strong{font-size:1.35em}.ui-field{display:grid;gap:5px}input,select{width:100%;padding:11px;border:1px solid var(--outline);border-radius:var(--radius);background:var(--surface);color:var(--on-surface)}progress{accent-color:var(--primary);width:100%}hr{width:100%;border:0;border-top:1px solid var(--outline-variant)}.ui-spacer{min-height:12px}.ui-nav{border-top:1px solid var(--outline-variant)}",
+  "[hidden]{display:none!important}[data-action]{cursor:pointer}.runtime-inspector{margin:0 var(--space) var(--space);border-top:1px solid var(--outline-variant);padding-top:8px}.runtime-inspector pre{max-height:260px;overflow:auto;white-space:pre-wrap;font:12px/1.4 ui-monospace,monospace;color:var(--on-surface-variant)}",
 ].join("");
 
 export function renderPreviewHtml(manifest) {
@@ -117,9 +353,10 @@ export function renderPreviewHtml(manifest) {
   const screens = extensions.length
     ? extensions.map((extension) => {
       const config = extension.config;
-      return '<article class="screen" style="' + themeVariables(config) + '">' +
+      const safeConfig = JSON.stringify(config).replaceAll("<", "\\u003c").replaceAll(">", "\\u003e").replaceAll("&", "\\u0026");
+      return '<article class="screen" data-extension="' + escape(extension.id) + '" style="' + themeVariables(config) + '">' +
         '<div class="screen-meta"><span>' + escape(extension.point) + "</span><strong>" + escape(extension.title) + "</strong></div>" +
-        chromeHtml(config) + '<main class="screen-body">' + nodeHtml(config.view) + "</main></article>";
+        chromeHtml(config) + '<main class="screen-body">' + nodeHtml(config.view) + '</main><details class="runtime-inspector"><summary>Runtime Inspector</summary><pre></pre></details><script type="application/json" class="runtime-config">' + safeConfig + "</script></article>";
     }).join("")
     : '<article class="screen"><div class="ui-empty"><strong>UI extension 없음</strong><p>UI Runtime v2 화면을 추가하면 여기에 표시됩니다.</p></div></article>';
   const title = escape(manifest.name);
@@ -127,6 +364,6 @@ export function renderPreviewHtml(manifest) {
     title + " preview</title><style>" + CSS +
     '</style></head><body><input id="preview-dark" type="checkbox"><label class="theme-toggle" for="preview-dark">☀︎ / ☾</label><div class="preview"><header class="preview-head"><small>Morit UI Runtime v2 · 안전한 계약 Preview</small><h1>' +
     title + "</h1><p>" + escape(manifest.description || "") +
-    '</p></header><section class="screens">' + screens + "</section></div></body></html>";
+    '</p></header><section class="screens">' + screens + "</section></div><script>" + RUNTIME_SCRIPT + "</script></body></html>";
   return Buffer.from(content, "utf8");
 }