@world-engines/project-host 0.1.0-alpha.0

package/assets/gui/app.js

@@ -0,0 +1,1326 @@
+import { attachLocalPreviewBridge } from "./local-preview-bridge.js";
+import { renderWorkspaceStatus } from "./workspace-status.js";
+
+const API = "/api";
+const state = {
+  status: null,
+  graph: { entities: [], relations: [], spatial_world: null, cg_defs: [] },
+  graphLayout: { positions: {} },
+  graphEntityKinds: [],
+  graphSchema: {},
+  graphLayoutDirty: false,
+  graphSaveBusy: false,
+  graphEditorInitial: null,
+  graphEditorEpoch: 0,
+  graphPanelTab: "metadata",
+  graphHighlightNodeId: null,
+  graphPropertiesDraft: null,
+  graphPropertiesOwner: null,
+  graphRowDraft: null,
+  graphRowDraftOwner: null,
+  selectedGraph: null,
+  graphMode: "entity",
+  files: { view: [], docs: [] },
+  currentViewFile: null,
+  tools: [],
+  selectedTool: null,
+  toolOperationId: "",
+  events: [],
+  jobs: [],
+  pollingJobs: new Set(),
+  validatedTriggerText: null,
+  triggerSchema: null,
+  triggerDocument: null,
+  triggerDraftRevision: null,
+  triggerValidation: null,
+  triggerSimulation: null,
+  triggerPositions: {},
+  triggerBlueprintLayout: { positions: {}, boards: [], membership: {} },
+  triggerLayoutPending: null,
+  triggerLayoutSaving: false,
+  triggerLoadState: "idle",
+  triggerLoadError: null,
+  triggerBusy: false,
+  triggerDirty: false,
+  triggerEntities: [],
+  triggerSpatialWorld: null,
+};
+
+const $ = (selector, root = document) => root.querySelector(selector);
+const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
+const formatJson = (value) => JSON.stringify(value, null, 2);
+const asArray = (value) => Array.isArray(value) ? value : [];
+const asObject = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {};
+const operationId = (prefix) => `${prefix}_${Date.now().toString(36)}_${crypto.randomUUID().replaceAll("-", "").slice(0, 12)}`;
+function chevronIcon() {
+  const ns = "http://www.w3.org/2000/svg";
+  const icon = document.createElementNS(ns, "svg");
+  for (const [key, value] of Object.entries({ viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "aria-hidden": "true" })) icon.setAttribute(key, value);
+  const path = document.createElementNS(ns, "path"); path.setAttribute("d", "m9 5 7 7-7 7"); icon.append(path);
+  return icon;
+}
+let graphModule;
+let graphController;
+let graphPropertyController;
+let graphPropertyPropsFactory;
+let graphRenderVersion = 0;
+let graphLayoutSaveQueue;
+let triggerModule;
+let triggerController;
+let triggerRenderVersion = 0;
+let triggerLayoutWorker = null;
+let triggerLoadFailure = null;
+let triggerStatusHost = null;
+let previewRequestId = 0;
+let versionRequestId = 0;
+let lastKnownCurrentVersion = "";
+let previewBridge;
+let worldMapController;
+let worldMapModulePromise;
+let worldMapViewEpoch = 0;
+let spatialTemplateController;
+let spatialTemplateModulePromise;
+let spatialTemplateLibrary = [];
+let modelSettingsRequestEpoch = 0;
+
+function spatialTemplateRecords(value) {
+  const root = asObject(value);
+  const presets = Array.isArray(root.presets) ? root.presets : Array.isArray(value) ? value : [];
+  return presets.filter((preset) => preset && typeof preset === "object");
+}
+
+function worldTemplateConfiguration(source) {
+  return asObject(asObject(asObject(source).topology).templates);
+}
+
+async function readSpatialTemplateState() {
+  const [library, spatial] = await Promise.all([
+    callTool("spatial_template_library", {}),
+    callTool("world_search", { query: "spatial:", mode: "keyword", limit: 1 }),
+  ]);
+  spatialTemplateLibrary = spatialTemplateRecords(library);
+  const source = asObject(spatial).spatial_world ?? null;
+  const configuration = worldTemplateConfiguration(source);
+  worldMapController?.setCityTemplates?.(cityTemplatesFromLibrary());
+  const current = await loadStatusStrict();
+  const revision = source?.revision ?? current.project_revision;
+  if (!Number.isSafeInteger(revision) || revision !== current.project_revision) throw new Error("项目已变化，请重新读取模板。");
+  return { presets: spatialTemplateLibrary, configuration, revision };
+}
+
+function cityTemplatesFromLibrary() {
+  const latest = new Map();
+  for (const preset of spatialTemplateLibrary) {
+    if (preset.kind !== "city" || typeof preset.id !== "string" || typeof preset.label !== "string" || !preset.parameters || typeof preset.parameters !== "object") continue;
+    const previous = latest.get(preset.id);
+    if (!previous || preset.revision > previous.revision) latest.set(preset.id, preset);
+  }
+  return [...latest.values()].map((preset) => ({ id: preset.id, label: preset.label, parameters: preset.parameters }));
+}
+
+async function openSpatialTemplates(kind) {
+  const root = $("#spatial-template-root");
+  try {
+    const snapshot = await readSpatialTemplateState();
+    spatialTemplateModulePromise ??= import("./spatial-template-panel.js");
+    const module = await spatialTemplateModulePromise;
+    const update = async (operation, selection) => {
+      const before = await readSpatialTemplateState();
+      const op = ["city", "parcel", "building", "interior"].includes(operation)
+        ? { type: "apply_template_selection", kind: operation, selection, confirmedImpact: true }
+        : null;
+      if (!op) throw new Error("未知模板类别。");
+      await callTool("world_apply", { operations: [op] }, {
+        operation_id: operationId("gui_spatial_template_apply"), expected_project_revision: before.revision,
+      });
+      const readback = await readSpatialTemplateState();
+      const saved = asObject(readback.configuration)[operation];
+      if (!saved || saved.presetId !== selection.presetId || saved.revision !== selection.revision) throw new Error("模板写入未通过 source 读回验证。");
+      return readback;
+    };
+    const saveDefinition = async (definition) => {
+      const before = await readSpatialTemplateState();
+      const editable = typeof definition.id === "string" && definition.id.startsWith("custom:");
+      const sameId = editable ? before.presets.filter((preset) => preset.kind === definition.kind && preset.id === definition.id) : [];
+      const nextRevision = sameId.length === 0 ? 1 : Math.max(...sameId.map((preset) => preset.revision)) + 1;
+      const id = sameId.length === 0 ? `custom:${definition.kind}:${crypto.randomUUID()}` : definition.id;
+      const savedDefinition = { kind: definition.kind, id, revision: nextRevision, label: definition.label, parameters: definition.parameters };
+      await callTool("world_apply", { operations: [{ type: "save_template_definition", definition: savedDefinition }] }, {
+        operation_id: operationId("gui_spatial_template_save"), expected_project_revision: before.revision,
+      });
+      const readback = await readSpatialTemplateState();
+      if (!readback.presets.some((preset) => preset.kind === savedDefinition.kind && preset.id === id && preset.revision === nextRevision)) throw new Error("模板定义写入未通过 source 读回验证。");
+      return readback;
+    };
+    const options = {
+      ...snapshot,
+      initialKind: kind,
+      onKindChange: (nextKind) => { document.querySelectorAll("[data-template-kind]").forEach((button) => button.classList.toggle("active", button.dataset.templateKind === nextKind)); },
+      onSaveDefinition: (selectionKind, definition) => saveDefinition({ ...definition, kind: selectionKind }),
+      onApply: (selectionKind, selection) => update(selectionKind, selection),
+    };
+    if (!spatialTemplateController) spatialTemplateController = module.mountSpatialTemplatePanel(root, options);
+    else spatialTemplateController.update({ ...options, activeKind: kind });
+  } catch (error) {
+    renderWorkspaceStatus(root, { state: "error", surface: "模板", error, onRetry: () => { void openSpatialTemplates(kind); }, retryLabel: "重试读取" });
+    reportFailure("SPATIAL_TEMPLATE", error);
+  }
+}
+
+async function readWorldMapSource() {
+  const spatial = asObject(await callTool("world_search", { query: "spatial:", mode: "keyword", limit: 1 }));
+  const graph = normalizeGraph(await api("/graph"));
+  const current = await loadStatusStrict();
+  const source = spatial.spatial_world ?? null;
+  const revision = source?.revision ?? current.project_revision;
+  if (!Number.isSafeInteger(revision) || revision !== current.project_revision) throw new Error("项目已变化，请重新读取地图。");
+  const actorChoices = graph.entities.filter(entity => entity.kind === "character" || entity.kind === "npc")
+    .map(entity => ({ id: String(entity.id), label: graphNodeLabel(entity) }));
+  worldMapController?.setCityTemplates?.(cityTemplatesFromLibrary());
+  return { projectId: current.project_id, revision, source, actorChoices };
+}
+
+async function openWorldMap(epoch) {
+  const root = $("#world-map-root");
+  if (!worldMapController) renderWorkspaceStatus(root, { state: "loading", surface: "map" });
+  try {
+    if (spatialTemplateLibrary.length === 0) {
+      try { spatialTemplateLibrary = spatialTemplateRecords(await callTool("spatial_template_library", {})); }
+      catch (error) { reportFailure("SPATIAL_TEMPLATE", error); }
+    }
+    worldMapModulePromise ??= import("./world-map.js");
+    const module = await worldMapModulePromise;
+    if (epoch !== worldMapViewEpoch) return;
+    worldMapController ??= module.mountWorldMap(root, {
+      read: readWorldMapSource,
+      cityTemplates: cityTemplatesFromLibrary(),
+      setControlledActor: async (actorId, expectedRevision) => {
+        await callTool("world_apply", { operations: [{ type: "spatial_set_controlled_actor", actorId }] }, {
+          operation_id: operationId("gui_spatial_actor"), expected_project_revision: expectedRevision,
+        });
+        return readWorldMapSource();
+      },
+      createCity: async (city, expectedRevision) => {
+        await callTool("world_apply", { operations: [{ type: "spatial_city_create", city }] }, {
+          operation_id: operationId("gui_city_create"), expected_project_revision: expectedRevision,
+        });
+        return readWorldMapSource();
+      },
+      save: async (generation, expectedRevision, confirmed) => {
+        await callTool("world_apply", { operations: [{ type: "spatial_set_generation", generation, confirmed }] }, {
+          operation_id: operationId("gui_map_save"), expected_project_revision: expectedRevision,
+        });
+        return readWorldMapSource();
+      },
+      saveRoadGeneration: async (roadGeneration, expectedRevision, confirmed) => {
+        await callTool("world_apply", { operations: [{ type: "spatial_set_road_generation", roadGeneration, confirmed }] }, {
+          operation_id: operationId("gui_road_generation_save"), expected_project_revision: expectedRevision,
+        });
+        return readWorldMapSource();
+      },
+      notify: (message, error) => toast(message, error),
+    });
+    await worldMapController.open();
+  } catch (error) {
+    worldMapController?.destroy(); worldMapController = undefined; worldMapModulePromise = undefined;
+    renderWorkspaceStatus(root, { state: "error", surface: "map", error, onRetry: () => { void openWorldMap(worldMapViewEpoch); }, retryLabel: "重试加载" });
+    reportFailure("MAP", error);
+  }
+}
+
+function errorMessage(error) {
+  if (error && typeof error === "object") {
+    const code = typeof error.code === "string" ? error.code : "E_REQUEST_FAILED";
+    const message = typeof error.message === "string" ? error.message : String(error);
+    return `${code}: ${message}`;
+  }
+  return String(error || "请求失败");
+}
+
+async function api(path, options = {}) {
+  const response = await fetch(`${API}${path}`, {
+    credentials: "same-origin",
+    headers: { "content-type": "application/json", ...(options.headers || {}) },
+    ...options,
+  });
+  let envelope;
+  try { envelope = await response.json(); }
+  catch { throw { code: "E_INVALID_RESPONSE", message: `NodeHost 返回了非 JSON 响应（HTTP ${response.status}）` }; }
+  if (!response.ok || !envelope || envelope.ok !== true) {
+    throw envelope?.error || { code: `E_HTTP_${response.status}`, message: response.statusText || "请求失败" };
+  }
+  return envelope.result;
+}
+
+function addEvent(kind, message, error = false) {
+  state.events.unshift({ at: new Date(), kind, message, error });
+  state.events = state.events.slice(0, 40);
+  renderEvents();
+}
+
+function toast(message, error = false) {
+  const element = document.createElement("div");
+  element.className = `toast${error ? " error" : ""}`;
+  element.textContent = message;
+  $("#toasts").append(element);
+  setTimeout(() => element.remove(), 4500);
+}
+
+function reportFailure(kind, error, target) {
+  const message = errorMessage(error);
+  if (target) target.textContent = message;
+  addEvent(kind, message, true);
+  toast(message, true);
+}
+
+function renderEvents() {
+  const root = $("#event-log"); root.replaceChildren();
+  if (state.events.length === 0) { const p = document.createElement("p"); p.className = "empty-copy"; p.textContent = "还没有操作。"; root.append(p); return; }
+  state.events.forEach((event) => {
+    const row = document.createElement("div"); row.className = `event-item${event.error ? " error" : ""}`;
+    const time = document.createElement("time"); time.textContent = event.at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    const kind = document.createElement("b"); kind.textContent = event.kind;
+    const message = document.createElement("span"); message.textContent = event.message;
+    row.append(time, kind, message); root.append(row);
+  });
+}
+
+function setConnection(connected, label) {
+  const connection = $("#connection-state"); connection.className = `connection ${connected ? "online" : "offline"}`; connection.lastChild.textContent = label;
+  const dot = $("#side-dot"); dot.className = `pulse-dot ${connected ? "online" : "offline"}`;
+  $("#side-status").textContent = connected ? "NodeHost 已连接" : "NodeHost 连接失败";
+}
+
+function renderStatus() {
+  const project = asObject(state.status);
+  const projectId = project.project_id || "—";
+  const revision = project.project_revision ?? 0;
+  const viewState = project.view_state || "";
+  const previewReady = project.view_dependencies_installed === true;
+  const worldReady = typeof project.scenario_integrity === "string" && !["", "missing", "invalid", "error"].includes(project.scenario_integrity.toLowerCase());
+  $("#project-name").textContent = "本地作者项目";
+  $("#project-id").textContent = projectId;
+  $("#project-revision").textContent = String(revision);
+  globalThis.dispatchEvent(new CustomEvent("worldengine:project-revision-change", { detail: { project_revision: revision } }));
+  $("#expected-revision").value = String(revision);
+  $("#runtime-tag").textContent = previewReady && worldReady ? "可以继续" : "需要准备";
+  $("#project-health-copy").textContent = previewReady
+    ? "作品已准备好。你可以继续完善世界设定，或打开实时预览查看画面。"
+    : "作品内容已保留；安装本地 View 依赖后即可打开实时预览。";
+  const metrics = [
+    ["世界设定", worldReady ? "已就绪" : "等待完善", "角色与关系"],
+    ["作品画面", previewReady ? "可以预览" : "尚未就绪", viewState ? "Vite 实时更新" : "等待创建画面"],
+  ];
+  const metricRoot = $("#project-metrics"); metricRoot.replaceChildren();
+  metrics.forEach(([label, value, suffix]) => { const card = document.createElement("div"); card.className = "metric"; const small = document.createElement("small"); small.textContent = label; const strong = document.createElement("strong"); strong.textContent = String(value); const em = document.createElement("em"); em.textContent = suffix; card.append(small, strong, em); metricRoot.append(card); });
+  const details = [
+    ["Project ID", projectId], ["Snapshot ID", project.snapshot_id || "—"],
+    ["Snapshot digest", project.snapshot_digest || "—"], ["Scenario integrity", project.scenario_integrity || "—"],
+    ["Root dependencies", project.root_dependencies_installed ? "已安装" : "未安装"], ["View dependencies", project.view_dependencies_installed ? "已安装" : "未安装"],
+  ];
+  const dl = $("#status-details"); dl.replaceChildren();
+  details.forEach(([key, value]) => { const div = document.createElement("div"); const dt = document.createElement("dt"); const dd = document.createElement("dd"); dt.textContent = key; dd.textContent = String(value); dd.title = String(value); div.append(dt, dd); dl.append(div); });
+}
+
+async function loadStatus(silent = false) {
+  try { state.status = asObject(await api("/status")); renderStatus(); setConnection(true, "已连接"); if (!silent) addEvent("STATUS", "项目状态已刷新"); }
+  catch (error) { setConnection(false, "连接失败"); reportFailure("STATUS", error); }
+}
+async function loadStatusStrict() { state.status = asObject(await api("/status")); renderStatus(); setConnection(true, "已连接"); return state.status; }
+
+function switchView(name) {
+  const mapEpoch = ++worldMapViewEpoch;
+  document.body.classList.toggle("world-map-active", name === "world-map");
+  if (name !== "world-map") worldMapController?.close();
+  document.body.classList.toggle("graph-active", name === "graph");
+  $$(".nav-item,.nav-subitem").forEach((button) => button.classList.toggle("active", button.dataset.view === name));
+  $$("[data-view-panel]").forEach((panel) => panel.classList.toggle("active", panel.dataset.viewPanel === name));
+  $("#main").focus({ preventScroll: true });
+  if (name === "graph" && state.graph.entities.length === 0) loadGraph();
+  if (name === "trigger") { if (state.triggerSchema === null && state.triggerLoadState === "idle") void readTriggers(); else void renderTriggerBlueprint(); }
+  if (name === "view") preview("start");
+  if (name === "world-map") void openWorldMap(mapEpoch);
+  if (name === "spatial-templates") void openSpatialTemplates(document.querySelector("[data-template-kind].active")?.dataset.templateKind ?? "city");
+}
+
+function normalizeGraph(result) {
+  const root = asObject(result);
+  const graph = asObject(root.graph || root.logical_graph || root);
+  const authoring = asObject(root.authoring);
+  const entities = Array.isArray(authoring.entities) ? authoring.entities : asArray(graph.entities || graph.nodes || root.entities || root.nodes);
+  const relations = Array.isArray(authoring.relations) ? authoring.relations : asArray(graph.relations || graph.edges || root.relations || root.edges);
+  const runtimeDefinitions = asObject(authoring.runtime_definitions || root.runtime_definitions || graph.runtime_definitions);
+  return {
+    entities: entities.map((entity) => ({ ...entity, id: entity.entity_id ?? entity.id, props: asObject(entity.props) })),
+    relations: relations.map((relation) => ({ ...relation, src: relation.from_id ?? relation.src, dst: relation.to_id ?? relation.dst, kind: relation.kind ?? relation.title, fields: asObject(relation.fields ?? relation.props) })),
+    spatial_world: root.spatial_world ?? graph.spatial_world ?? null,
+    metadata: authoring.metadata ?? root.metadata ?? graph.metadata ?? null,
+    cg_defs: asArray(runtimeDefinitions.cg_defs),
+  };
+}
+
+async function loadGraph() {
+  const canvas = $("#graph-canvas");
+  if (!graphController) renderWorkspaceStatus(canvas, { state: "loading", surface: "graph" });
+  try {
+    const [graphResult, spatialResult, layoutResult, schemaResult] = await Promise.allSettled([
+      api("/graph"),
+      callTool("world_search", { query: "spatial:", mode: "keyword", limit: 1 }),
+      callTool("interaction_layout_read", { viewport: "pc" }),
+      callTool("world_schema", {}),
+    ]);
+    if (graphResult.status === "rejected") throw graphResult.reason;
+    if (layoutResult.status === "rejected") throw layoutResult.reason;
+    state.graph = normalizeGraph(graphResult.value);
+    if (state.selectedGraph?.type === "entity") { const currentId = state.selectedGraph.item.id; const readback = state.graph.entities.find((item) => item.id === currentId); if (readback) state.selectedGraph = { type: "entity", item: readback }; }
+    else if (state.selectedGraph?.type === "relation") { const currentId = graphRelationId(state.selectedGraph.item); const readback = state.graph.relations.find((item) => graphRelationId(item) === currentId); if (readback) state.selectedGraph = { type: "relation", item: readback }; }
+    state.graphLayout = await parseGraphLayoutWithSharedGeometry(layoutResult.value);
+    state.graphSchema = schemaResult.status === "fulfilled" ? asObject(schemaResult.value) : {}; state.graphEntityKinds = asArray(state.graphSchema.entity_kinds).filter((kind) => typeof kind === "string");
+    if (spatialResult.status === "fulfilled") state.graph.spatial_world = asObject(spatialResult.value).spatial_world ?? null;
+    await renderGraph(); addEvent("GRAPH", `已读回 ${state.graph.entities.length} 个实体、${state.graph.relations.length} 条关系`);
+  }
+  catch (error) {
+    graphController?.destroy(); graphController = undefined; graphModule = undefined;
+    renderWorkspaceStatus(canvas, { state: "error", surface: "graph", error, onRetry: () => { void loadGraph(); }, retryLabel: "重新读取" });
+    reportFailure("GRAPH", error);
+  }
+}
+
+function parseGraphLayout(value, validateBounds) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) throw { code: "E_SCHEMA_INVALID", message: "图谱布局读回格式无效" };
+  if (value.graph_canvas === undefined) return { positions: {}, groups: [] };
+  const layout = value.graph_canvas;
+  if (!layout || typeof layout !== "object" || !layout.positions || typeof layout.positions !== "object" || Array.isArray(layout.positions)) throw { code: "E_SCHEMA_INVALID", message: "图谱坐标读回格式无效" };
+  for (const point of Object.values(layout.positions)) {
+    if (!point || !Number.isFinite(point.x) || !Number.isFinite(point.y)) throw { code: "E_SCHEMA_INVALID", message: "图谱坐标不是有限数值" };
+  }
+  const groups = layout.groups === undefined ? [] : layout.groups;
+  if (!Array.isArray(groups)) throw { code: "E_SCHEMA_INVALID", message: "图谱视觉分组读回格式无效" };
+  const ids = new Set();
+  for (const group of groups) {
+    if (!group || typeof group !== "object" || typeof group.id !== "string" || !group.id || ids.has(group.id)
+      || !Number.isFinite(group.x) || !Number.isFinite(group.y) || !Number.isFinite(group.width) || !Number.isFinite(group.height)
+      || (group.label !== undefined && typeof group.label !== "string")
+      || (group.nodeIds !== undefined && (!Array.isArray(group.nodeIds) || group.nodeIds.some((id) => typeof id !== "string")))) {
+      throw { code: "E_SCHEMA_INVALID", message: "图谱视觉分组字段无效" };
+    }
+    ids.add(group.id);
+  }
+  if (groups.length > 0 && typeof validateBounds !== "function") throw { code: "E_SCHEMA_INVALID", message: "图谱视觉分组校验器不可用" };
+  if (groups.some((group) => !validateBounds(group, groups, group.id))) throw { code: "E_SCHEMA_INVALID", message: "图谱视觉分组不能重叠、嵌套或小于最小尺寸" };
+  return { ...layout, groups };
+}
+
+async function parseGraphLayoutWithSharedGeometry(value) {
+  graphModule ??= import("/graph.js");
+  const { isGraphGroupBoundsValid } = await graphModule;
+  return parseGraphLayout(value, isGraphGroupBoundsValid);
+}
+
+function graphRelationId(relation) { return relation.relation_id || JSON.stringify([relation.src, relation.dst, relation.kind]); }
+
+function graphNodeLabel(entity) {
+  if (Array.isArray(entity.name) && typeof entity.name[0] === "string") return entity.name[0];
+  const props = asObject(entity.props);
+  const name = props.name ?? props.label;
+  return typeof name === "string" ? name : Array.isArray(name) && typeof name[0] === "string" ? name[0] : String(entity.id);
+}
+
+async function renderGraph() {
+  const version = ++graphRenderVersion;
+  const { entities, relations } = state.graph;
+  $("#graph-summary").textContent = `${entities.length} 节点 · ${relations.length} 关系${graphLayoutSaveQueue?.isConflicted() ? " · 布局冲突，刷新前请保留未保存位置" : state.graphLayoutDirty ? " · 布局未保存" : ""}`;
+  renderSpatial();
+  // 只加载共享包的编译产物；此处不再定义节点、边或布局算法。
+  graphModule ??= import("/graph.js");
+  const { mountLocalGraph } = await graphModule;
+  if (version !== graphRenderVersion) return;
+  const layout = state.graphLayout;
+  const props = {
+    nodes: entities.map((entity) => ({
+      id: entity.id, label: graphNodeLabel(entity), kind: entity.kind,
+      content: { name: graphNodeLabel(entity), props: Object.fromEntries(Object.entries(asObject(entity.props)).map(([key, value]) => [key, { value }])) },
+      disabled: asArray(layout.disabled_node_ids).includes(entity.id),
+      pending: asArray(layout.pending_node_ids).includes(entity.id),
+      ...(["ready", "pending", "missing"].includes(layout.vector_state_by_node_id?.[entity.id]) ? { vector: layout.vector_state_by_node_id[entity.id] } : {}),
+    })),
+    relations: relations.map((relation) => ({ id: graphRelationId(relation), source: relation.src, target: relation.dst, label: relation.kind })),
+    selectedNodeId: state.selectedGraph?.type === "entity" ? state.selectedGraph.item.id : null,
+    selectedRelationId: state.selectedGraph?.type === "relation" ? graphRelationId(state.selectedGraph.item) : state.selectedGraph?.type === "group" ? state.selectedGraph.item.pairId : null,
+    highlightNodeId: state.graphHighlightNodeId,
+    searchQuery: "", disabled: state.graphSaveBusy,
+    positions: layout.positions,
+    groups: layout.groups,
+    onSelectNode: (id) => { const entity = state.graph.entities.find((item) => item.id === id); if (entity) openGraphDetails("entity", entity); },
+    onSelectRelation: (id) => { const relation = state.graph.relations.find((item) => graphRelationId(item) === id); if (relation) openGraphDetails("relation", relation); },
+    onSelectRelationGroup: openGraphRelationGroup,
+    onClearSelection: clearGraphSelection,
+    onCommitLayout: commitGraphLayout,
+    onCommitPositions: commitGraphPositions,
+    onRelationDragIntent: (source, target) => {
+      openGraphEditor("relation", null, { source, target });
+    },
+  };
+  if (graphController) graphController.update(props);
+  else { const root = $("#graph-canvas"); root.replaceChildren(); graphController = mountLocalGraph(root, props); }
+}
+
+function graphLayoutQueue() {
+  graphLayoutSaveQueue ??= createGraphLayoutSaveQueue({
+    onOptimistic: (layout) => { state.graphLayout = layout; state.graphLayoutDirty = true; void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error)); },
+    save: (layout) => executeEffect("interaction_layout_apply", { viewport: "pc", patch: buildGraphLayoutPatch(layout) }, "gui_graph_layout"),
+    onSaved: async (layout, receipt) => {
+      if (Number.isSafeInteger(receipt?.next_project_revision)) state.status = withGraphProjectRevision(state.status, receipt.next_project_revision);
+      if (!graphLayoutSaveQueue.isLatest(layout)) return;
+      const [layoutResult] = await Promise.all([callTool("interaction_layout_read", { viewport: "pc" }), loadStatusStrict()]);
+      if (!graphLayoutSaveQueue.isLatest(layout)) return;
+      state.graphLayout = await parseGraphLayoutWithSharedGeometry(layoutResult); state.graphLayoutDirty = false; addEvent("GRAPH_LAYOUT", "布局已保存并读回"); await renderGraph();
+    },
+    onError: async (error) => { state.graphLayoutDirty = true; reportFailure("GRAPH_LAYOUT", error); try { await loadStatusStrict(); } catch (readbackError) { reportFailure("GRAPH_LAYOUT_READBACK", readbackError); } await renderGraph(); },
+  });
+  return graphLayoutSaveQueue;
+}
+function commitGraphLayout(layout) { graphLayoutQueue().enqueue({ ...state.graphLayout, ...layout }); }
+function commitGraphPositions(positions) { commitGraphLayout({ positions }); }
+
+function renderSpatial() {
+  const root = $("#spatial-canvas"); root.replaceChildren(); const spatial = asObject(state.graph.spatial_world); const objects = asArray(spatial.objects);
+  if (!state.graph.spatial_world || objects.length === 0) { const p = document.createElement("p"); p.className = "empty-copy"; p.style.padding = "18px"; p.textContent = state.graph.spatial_world ? "空间地图还没有地点等对象，目前仅支持查看坐标。" : "尚未设置空间地图。这里用于查看地点等对象的二维坐标，不是实体关系图。"; root.append(p); return; }
+  const ns = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(ns, "svg"); svg.setAttribute("viewBox", "0 0 900 460"); const topology = asObject(spatial.topology); const width = Number(topology.width) || 100, height = Number(topology.height) || 100;
+  objects.forEach((object) => { const group = document.createElementNS(ns, "g"); group.classList.add("graph-node"); group.setAttribute("transform", `translate(${45 + (Number(object.x) / width) * 810} ${35 + (Number(object.y) / height) * 390})`); const circle = document.createElementNS(ns, "circle"); circle.setAttribute("r", object.kind === "region" ? "30" : "21"); const label = document.createElementNS(ns, "text"); label.setAttribute("text-anchor", "middle"); label.setAttribute("y", "4"); label.textContent = String(object.label || object.id).slice(0, 18); const kind = document.createElementNS(ns, "text"); kind.classList.add("kind"); kind.setAttribute("text-anchor", "middle"); kind.setAttribute("y", "35"); kind.textContent = `${object.kind || "spatial"} · ${object.x},${object.y}`; group.append(circle, label, kind); svg.append(group); }); root.append(svg);
+}
+
+const ENTITY_TYPES = Object.freeze({ character: "人物", location: "地点", faction: "势力", item: "物品", event: "事件", other: "其他" });
+// WORLD_GRAPH_PURE_BEGIN
+const GRAPH_CUSTOM_KIND_SENTINEL = "__worldengine_ui_custom_kind__";
+function graphOwn(value, key) { return value !== null && typeof value === "object" && !Array.isArray(value) && Object.hasOwn(value, key); }
+function graphFriendlyField(props, primaryKey, fallbackKey, arrayFirst = false) {
+  const key = graphOwn(props, primaryKey) ? primaryKey : graphOwn(props, fallbackKey) ? fallbackKey : primaryKey;
+  const present = graphOwn(props, key); const raw = present ? props[key] : undefined;
+  if (!present) return { key, value: "", editable: true, mode: "absent", raw };
+  if (typeof raw === "string") return { key, value: raw, editable: true, mode: "string", raw };
+  if (arrayFirst && Array.isArray(raw) && typeof raw[0] === "string") return { key, value: raw[0], editable: true, mode: "array", raw: [...raw] };
+  return { key, value: "", editable: false, mode: "complex", raw };
+}
+function graphFriendlyRaw(raw) {
+  if (typeof raw === "string") return { key: null, value: raw, editable: true, mode: "string", raw };
+  return { key: null, value: "", editable: raw === undefined, mode: raw === undefined ? "absent" : "complex", raw };
+}
+function graphAliasValues(form) { if (typeof form.querySelectorAll === "function") return [...form.querySelectorAll('[name="alias"]')].map((input) => input.value.trim()).filter(Boolean); return String(form.elements.aliases?.value || "").split(/[,，、;；\n]+/u).map((value) => value.trim()).filter(Boolean); }
+function makeGraphEditorInitial(mode, item) {
+  const sourceProps = mode === "relation" ? item?.fields ?? item?.props : item?.props;
+  const props = sourceProps && typeof sourceProps === "object" && !Array.isArray(sourceProps) ? sourceProps : {};
+  const canonicalNames = Array.isArray(item?.name) && item.name.every((name) => typeof name === "string") ? [...item.name] : null;
+  const description = mode === "relation" && item && Object.hasOwn(item, "content") ? { ...graphFriendlyRaw(item.content), source: "content" } : { ...graphFriendlyField(props, "description", "summary"), source: "props" };
+  return { mode, itemKind: item?.kind ?? null, row: item ? structuredClone(item) : null, canonical: mode === "entity" ? typeof item?.entity_id === "string" : typeof item?.relation_id === "string", name: canonicalNames ? { key: "name", value: canonicalNames[0] ?? "", editable: true, mode: "array", raw: canonicalNames } : graphFriendlyField(props, "name", "label", true), description };
+}
+function buildGraphOperation(form, initial) {
+  const parsed = JSON.parse(form.elements.props.value);
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) throw { code: "E_SCHEMA_INVALID", message: "属性 JSON 必须是 object" };
+  const props = parsed;
+  const descriptionInput = initial.mode === "entity" ? form.elements.description : form.elements.relation_description;
+  if (initial.description.source === "props" && initial.description.editable && descriptionInput.value !== initial.description.value) props[initial.description.key] = descriptionInput.value;
+  if (initial.mode === "entity") {
+    if (!initial.canonical && initial.name.editable && form.elements.name.value !== initial.name.value) {
+      if (initial.name.mode === "array") { const current = props[initial.name.key]; const aliases = Array.isArray(current) ? current.slice(1) : initial.name.raw.slice(1); props[initial.name.key] = [form.elements.name.value, ...aliases]; }
+      else props[initial.name.key] = form.elements.name.value;
+    }
+    const selectedKind = form.elements.entity_type.value;
+    const kind = selectedKind === GRAPH_CUSTOM_KIND_SENTINEL ? (initial.itemKind === "__custom__" ? initial.itemKind : form.elements.custom_kind.value.trim()) : selectedKind;
+    if (!kind) throw { code: "E_SCHEMA_INVALID", message: "自定义类型不能为空" };
+    const aliases = graphAliasValues(form); const names = [form.elements.name.value.trim(), ...aliases].filter(Boolean);
+    const row = { ...(initial.row || {}), entity_id: initial.row?.entity_id || initial.row?.id || form.elements.id.value.trim(), name: names, kind, props };
+    if (form.elements.entity_view_access.value) row.view_access = form.elements.entity_view_access.value; else delete row.view_access;
+    if (form.elements.online_supplement.checked) { row.props.realworld_provenance = "has_prototype"; if (form.elements.prototype_name.value.trim()) row.props.prototype_name = form.elements.prototype_name.value.trim(); else delete row.props.prototype_name; } else { delete row.props.realworld_provenance; delete row.props.prototype_name; }
+    return { type: "upsert_entity_row", entity: row };
+  }
+  const row = { ...(initial.row || {}), relation_id: initial.row?.relation_id || form.elements.id.value.trim(), from_id: form.elements.src.value.trim(), to_id: form.elements.dst.value.trim(), kind: form.elements.kind.value.trim(), fields: props };
+  if (form.elements.relation_title.value.trim()) row.title = form.elements.relation_title.value.trim(); else delete row.title;
+  if (initial.description.editable && form.elements.relation_description.value !== initial.description.value) row.content = form.elements.relation_description.value;
+  if (form.elements.relation_view_access.value) row.view_access = form.elements.relation_view_access.value; else delete row.view_access;
+  row.initial_available = form.elements.relation_initial_available.checked;
+  return { type: "upsert_relation_row", relation: row };
+}
+function buildGraphLayoutPatch(layout, positions) { return { graph_canvas: positions === undefined ? layout : { ...layout, positions } }; }
+function withGraphProjectRevision(status, revision) { const source = status && typeof status === "object" && !Array.isArray(status) ? status : {}; return { ...source, project_revision: revision, ...(source.project && typeof source.project === "object" && !Array.isArray(source.project) ? { project: { ...source.project, project_revision: revision } } : {}) }; }
+function partitionGraphRelations(relations, entityId) { return { outgoing: relations.filter((relation) => relation.src === entityId), incoming: relations.filter((relation) => relation.dst === entityId) }; }
+function createGraphLayoutSaveQueue(callbacks) {
+  let pending = null; let running = false; let dirty = false; let latest = null; let conflicted = false; const idleWaiters = [];
+  const settleIdle = () => { if (running || pending !== null) return; while (idleWaiters.length > 0) idleWaiters.shift()(); };
+  const drain = async () => {
+    if (running || conflicted || pending === null) return; running = true;
+    while (pending !== null) {
+      const current = pending; pending = null;
+      try { const receipt = await callbacks.save(current); await callbacks.onSaved(current, receipt); if (pending === null && latest === current) dirty = false; }
+      catch (error) { if (pending === null) pending = current; dirty = true; if (error?.code === "E_STALE_PROJECT_REVISION") conflicted = true; await callbacks.onError(error, pending); break; }
+    }
+    running = false; settleIdle();
+  };
+  return {
+    enqueue(positions) { latest = positions; pending = positions; dirty = true; callbacks.onOptimistic(positions); void drain(); },
+    retry() { void drain(); },
+    isLatest(positions) { return latest === positions && pending === null; },
+    isDirty() { return dirty; },
+    isConflicted() { return conflicted; },
+    idle() { return !running && pending === null ? Promise.resolve() : new Promise((resolve) => idleWaiters.push(resolve)); },
+  };
+}
+function beginGraphSave(graphState, button) { if (graphState.graphSaveBusy) return false; graphState.graphSaveBusy = true; button.disabled = true; return true; }
+function endGraphSave(graphState, button) { graphState.graphSaveBusy = false; button.disabled = false; }
+function shouldCloseGraphEditor(submittedEpoch, currentEpoch) { return submittedEpoch === currentEpoch; }
+function mergeGraphTabDraft(type, item, owner, propertiesOwner, propertiesDraft) { if (propertiesOwner !== owner || !propertiesDraft) return item; return type === "entity" ? { ...item, props: propertiesDraft } : type === "relation" ? { ...item, fields: propertiesDraft } : item; }
+function graphSaveRoute(editorHidden, selectionType, panelTab) { if (!editorHidden) return "metadata"; if (selectionType && selectionType !== "group" && panelTab === "attributes") return "attributes"; return null; }
+// WORLD_GRAPH_PURE_END
+function entityTypeLabel(kind) { return ENTITY_TYPES[kind] || `其他（${kind}）`; }
+function graphCloseIcon() { const ns = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(ns, "svg"); svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("aria-hidden", "true"); const path = document.createElementNS(ns, "path"); path.setAttribute("d", "M6 6l12 12M18 6 6 18"); svg.append(path); return svg; }
+function graphFabIcon(kind) { const ns = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(ns, "svg"); svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("aria-hidden", "true"); const path = document.createElementNS(ns, "path"); path.setAttribute("d", kind === "add" ? "M12 5v14M5 12h14" : kind === "save" ? "M5 4h12l2 2v14H5zM8 4v6h8V4M8 20v-6h8v6" : "M4 7h16M9 7V4h6v3m-9 0 1 13h10l1-13M10 11v5m4-5v5"); svg.append(path); return svg; }
+function renderGraphAliases(values = []) { const root = $("#graph-alias-list"); root.replaceChildren(); values.forEach((value) => { const row = document.createElement("div"); row.className = "graph-alias-row"; const input = document.createElement("input"); input.name = "alias"; input.value = value; input.setAttribute("aria-label", "别名"); const remove = document.createElement("button"); remove.type = "button"; remove.className = "graph-fab danger"; remove.setAttribute("aria-label", "删除别名"); remove.title = "删除别名"; remove.replaceChildren(graphFabIcon("delete")); remove.addEventListener("click", () => row.remove()); row.append(input, remove); root.append(row); }); }
+function addGraphAlias() { renderGraphAliases([...graphAliasValues($("#graph-editor")), ""]); const inputs = $$('#graph-alias-list [name="alias"]'); inputs.at(-1)?.focus(); }
+function updateGraphOnlineSearchField() { const input = $("#graph-editor").elements.online_supplement; input.setAttribute("aria-checked", String(input.checked)); $("#prototype-name-field").hidden = !input.checked; }
+function resetGraphHighlight() { if (state.graphHighlightNodeId === null) return; state.graphHighlightNodeId = null; void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error)); }
+function closeGraphPanel() { resetGraphHighlight(); state.graphEditorEpoch += 1; state.graphEditorInitial = null; $("#graph-side-panel").hidden = true; $("#graph-detail-view").hidden = false; $("#graph-editor").hidden = true; $("#graph-editor-cg").hidden = true; }
+function clearGraphSelection() { state.selectedGraph = null; closeGraphPanel(); void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error)); }
+function detailRow(label, value) { const row = document.createElement("div"); const key = document.createElement("span"); const content = document.createElement("p"); key.textContent = label; content.textContent = String(value ?? "—"); row.append(key, content); return row; }
+function graphPropertyValue(value) { if (typeof value === "string") return value; if (typeof value === "number" || typeof value === "boolean") return String(value); if (value === null) return "空值"; return "复杂值，请在原始信息中查看"; }
+function graphRelationGroup(title, relations, direction, ownerId) {
+  const section = document.createElement("section"); section.className = "graph-relation-group"; const heading = document.createElement("h3"); heading.textContent = title; section.append(heading);
+  if (relations.length === 0) { const empty = document.createElement("p"); empty.className = "graph-relation-empty"; empty.textContent = "暂无关系"; section.append(empty); return section; }
+  relations.forEach((relation) => {
+    const otherId = direction === "outgoing" ? relation.dst : relation.src; const other = state.graph.entities.find((entity) => entity.id === otherId);
+    const row = document.createElement("div"); row.className = "graph-relation-row";
+    const edgeButton = document.createElement("button"); edgeButton.type = "button"; edgeButton.className = "graph-relation-edge"; edgeButton.textContent = `${relation.kind} · ${graphNodeLabel(other || { id: otherId })}`; edgeButton.addEventListener("click", () => openGraphDetails("relation", relation));
+    const nodeButton = document.createElement("button"); nodeButton.type = "button"; nodeButton.className = "graph-relation-node graph-fab"; nodeButton.setAttribute("aria-label", "查看关联节点"); nodeButton.title = "查看关联节点"; nodeButton.replaceChildren(graphNodeLinkIcon()); nodeButton.disabled = !other; if (other) { nodeButton.addEventListener("click", () => openGraphDetails("entity", other)); nodeButton.addEventListener("mouseenter", () => setGraphHighlightNode(otherId)); nodeButton.addEventListener("focus", () => setGraphHighlightNode(otherId)); nodeButton.addEventListener("mouseleave", () => clearGraphHighlightNode(otherId)); nodeButton.addEventListener("blur", () => clearGraphHighlightNode(otherId)); }
+    row.append(edgeButton, nodeButton); section.append(row);
+  });
+  return section;
+}
+function graphNodeLinkIcon() { const ns = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(ns, "svg"); svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("aria-hidden", "true"); const circle = document.createElementNS(ns, "circle"); circle.setAttribute("cx", "9"); circle.setAttribute("cy", "12"); circle.setAttribute("r", "4"); const path = document.createElementNS(ns, "path"); path.setAttribute("d", "M13 12h7m-3-3 3 3-3 3"); svg.append(circle, path); return svg; }
+function setGraphHighlightNode(id) { if (state.graphHighlightNodeId === id) return; state.graphHighlightNodeId = id; void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error)); }
+function clearGraphHighlightNode(id) { if (state.graphHighlightNodeId !== id) return; state.graphHighlightNodeId = null; void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error)); }
+function openGraphRelationGroup(selection) {
+  resetGraphHighlight();
+  const relations = asArray(selection.relationIds).map((id) => state.graph.relations.find((relation) => graphRelationId(relation) === id)).filter(Boolean);
+  state.selectedGraph = { type: "group", item: { ...selection, relations } }; state.graphPropertiesOwner = null; state.graphPropertiesDraft = null; state.graphPanelTab = "metadata"; renderGraphPanelSelection(); void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error));
+}
+function graphItemProperties(type, item) { return asObject(type === "relation" ? item.fields ?? item.props : item.props); }
+function openGraphDetails(type, item) {
+  resetGraphHighlight();
+  const previousKey = graphSelectionKey(state.selectedGraph); const preserveTab = state.selectedGraph?.type === "entity" && type === "entity"; state.selectedGraph = { type, item }; if (previousKey !== graphSelectionKey(state.selectedGraph)) { state.graphEditorEpoch += 1; state.graphPropertiesOwner = null; state.graphPropertiesDraft = null; state.graphRowDraft = null; state.graphRowDraftOwner = null; } if (!preserveTab) state.graphPanelTab = "metadata"; renderGraphPanelSelection(); void renderGraph().catch((error) => reportFailure("GRAPH_RENDER", error));
+}
+function graphSelectionKey(selection) { if (!selection) return null; return selection.type === "entity" ? `entity:${selection.item.id}` : selection.type === "relation" ? `relation:${graphRelationId(selection.item)}` : `group:${selection.item.pairId}`; }
+function renderGraphPanelSelection() {
+  const selection = state.selectedGraph; if (!selection) return; const type = selection.type; const owner = graphSelectionKey(selection); let item = state.graphRowDraftOwner === owner && state.graphRowDraft ? state.graphRowDraft : selection.item;
+  if (state.graphPanelTab === "metadata") item = mergeGraphTabDraft(type, item, owner, state.graphPropertiesOwner, state.graphPropertiesDraft);
+  $$("[data-graph-panel-tab]").forEach((button) => { const active = button.dataset.graphPanelTab === state.graphPanelTab; button.classList.toggle("active", active); button.setAttribute("aria-selected", String(active)); });
+  if (state.graphPanelTab === "metadata" && type !== "group") { openGraphEditor(type, item); return; }
+  graphPropertyController?.destroy(); graphPropertyController = undefined; graphPropertyPropsFactory = undefined; $("#graph-editor-cg").hidden = true;
+  $("#graph-side-panel").hidden = false; $("#graph-detail-view").hidden = false; $("#graph-editor").hidden = true;
+  $("#graph-panel-kicker").textContent = type === "entity" ? entityTypeLabel(item.kind) : type === "group" ? "关系组" : "关系";
+  $("#graph-panel-title").textContent = type === "entity" ? graphNodeLabel(item) : type === "group" ? `${item.relations.length} 条关系` : item.kind;
+  $("#save-graph-item").disabled = type === "group" || !["metadata", "attributes"].includes(state.graphPanelTab); $("#delete-graph-item").disabled = type === "group";
+  const content = $("#graph-detail-content"); content.replaceChildren();
+  if (type === "group") { const chosen = state.graphPanelTab === "incoming" ? item.relations.filter((relation) => relation.dst === item.source) : state.graphPanelTab === "outgoing" ? item.relations.filter((relation) => relation.src === item.source) : item.relations; content.append(graphRelationGroup(state.graphPanelTab === "incoming" ? `指入 ${item.source}` : state.graphPanelTab === "outgoing" ? `从 ${item.source} 指出` : "全部关系", chosen, state.graphPanelTab === "incoming" ? "incoming" : "outgoing", item.source)); return; }
+  const props = graphItemProperties(type, item); const description = type === "relation" && Object.hasOwn(item, "content") ? graphFriendlyRaw(item.content) : graphFriendlyField(props, "description", "summary"); const descriptionLabel = description.editable ? description.value : "复杂值，请查看原始属性";
+  if (state.graphPanelTab === "metadata") {
+    if (type === "entity") { const names = Array.isArray(item.name) ? { value: item.name[0] ?? "", aliases: item.name.slice(1) } : (() => { const legacy = graphFriendlyField(props, "name", "label", true); return { value: legacy.editable ? legacy.value : "复杂值", aliases: legacy.mode === "array" ? legacy.raw.slice(1) : [] }; })(); content.append(detailRow("类型", entityTypeLabel(item.kind)), detailRow("名称", names.value), detailRow("别名", names.aliases.length ? names.aliases.join("、") : "—"), detailRow("简介", descriptionLabel), detailRow("访问策略", item.view_access || "继承"), detailRow("状态", item.disabled === true ? "禁用" : "启用"), detailRow("联网补充", graphOnlineSupplementLabel(props))); renderGraphCgDefinitions(content, selection); }
+    else { const source = state.graph.entities.find((entity) => entity.id === item.src); const target = state.graph.entities.find((entity) => entity.id === item.dst); const endpoints = document.createElement("div"); endpoints.className = "graph-edge-endpoints"; [["起点", source, item.src], ["终点", target, item.dst]].forEach(([label, entity, id]) => { const button = document.createElement("button"); button.type = "button"; button.textContent = `${label}：${graphNodeLabel(entity || { id })}`; button.disabled = !entity; if (entity) button.addEventListener("click", () => openGraphDetails("entity", entity)); endpoints.append(button); }); content.append(endpoints, detailRow("关系类型", item.kind), detailRow("显示标题", item.title || "—"), detailRow("内容", descriptionLabel), detailRow("访问策略", item.view_access || "继承"), detailRow("初始可见", item.initial_available === false ? "否" : "是")); renderGraphCgDefinitions(content, selection); }
+  } else if (state.graphPanelTab === "attributes") renderGraphProperties(content, props, selection);
+  else if (type === "entity") { const groups = partitionGraphRelations(state.graph.relations, item.id); const relations = state.graphPanelTab === "incoming" ? groups.incoming : groups.outgoing; content.append(graphRelationGroup(state.graphPanelTab === "incoming" ? "指入关系" : "指出关系", relations, state.graphPanelTab, item.id)); }
+  else content.append(detailRow("提示", "请先跳转到起点或终点节点查看方向关系。"));
+}
+function graphOnlineSupplementLabel(props) { const provenance = graphPropValue(props.realworld_provenance); const prototype = graphPropValue(props.prototype_name); return provenance === "has_prototype" ? `已允许${typeof prototype === "string" && prototype ? ` · ${prototype}` : ""}` : "未启用"; }
+function graphPropValue(value) { return value && typeof value === "object" && !Array.isArray(value) && value._system_prop_envelope_v1 === true && Object.hasOwn(value, "value") ? value.value : value; }
+function renderGraphCgDefinitions(content, selection) {
+  const available = Boolean(state.graphSchema.runtime_definitions?.cg_defs); const anchorId = selection.type === "entity" ? selection.item.id : selection.item.relation_id || graphRelationId(selection.item);
+  const matches = asArray(state.graph.cg_defs).filter((cg) => cg?.anchor?.id === anchorId); const section = document.createElement("section"); section.className = "graph-cg-list"; const heading = document.createElement("div"); heading.className = "graph-property-heading"; const title = document.createElement("h3"); title.textContent = "CG"; const add = document.createElement("button"); add.type = "button"; add.className = "graph-fab"; add.setAttribute("aria-label", `选择 CG 图片，当前 ${matches.length} 个`); add.title = "选择 CG 图片"; add.replaceChildren(graphFabIcon("add")); add.disabled = !available; add.addEventListener("click", () => graphCgEditor(null, selection, null, add)); heading.append(title, add); section.append(heading);
+  if (!available) { const note = document.createElement("p"); note.className = "graph-capability-note"; note.textContent = "当前 Host 未提供 CG runtime definition adapter。"; section.append(note); }
+  content.append(section);
+}
+function graphCgAssetUrl(assetPath) { return `${API}/${String(assetPath).startsWith("gallery/") ? "gallery/file" : "asset"}?path=${encodeURIComponent(assetPath)}`; }
+function graphCgAssetLabel(assetPath) { const file = String(assetPath || "").split(/[\\/]/u).at(-1) || "CG 图片"; return file.replace(/\.[^.]+$/u, "") || "CG 图片"; }
+function graphCgDefinition(cg, selection, attributePath, assetPath) {
+  if (cg) return { ...cg, asset_path: assetPath };
+  const anchorId = selection.type === "entity" ? selection.item.id : selection.item.relation_id || graphRelationId(selection.item);
+  const anchor = attributePath ? { kind: "attr", id: anchorId, attr_key: attributePath[0] } : { kind: selection.type === "entity" ? "node" : "edge", id: anchorId };
+  return { cg_id: `cg_${crypto.randomUUID()}`, name: graphCgAssetLabel(assetPath), asset_path: assetPath, anchor };
+}
+async function importGraphCgImage(file, selection) {
+  const ownerId = selection.type === "entity" ? selection.item.id : selection.item.relation_id || graphRelationId(selection.item);
+  const bytes = new Uint8Array(await file.arrayBuffer()); let binary = ""; for (let offset = 0; offset < bytes.length; offset += 0x8000) binary += String.fromCharCode(...bytes.subarray(offset, offset + 0x8000));
+  const expectedRevision = Number(state.status?.project_revision ?? state.status?.project?.project_revision ?? state.status?.revision); if (!Number.isSafeInteger(expectedRevision) || expectedRevision < 0) throw { code: "E_SCHEMA_INVALID", message: "当前项目 revision 无效，请重新读取后再试" };
+  const ownerKind = selection.type === "entity" ? "entity" : "relation"; const imported = await api("/gallery/import", { method: "POST", body: JSON.stringify({ operation_id: operationId("gallery_import"), expected_project_revision: expectedRevision, area: "scenario", owner_kind: ownerKind, owner_id: ownerId, filename: file.name, content_base64: btoa(binary) }) });
+  if (!imported || imported.path !== imported.asset_path || typeof imported.asset_path !== "string" || !imported.asset_path.startsWith("gallery/scenario/") || imported.owner_kind !== ownerKind || imported.owner_id !== ownerId || imported.readback_verified !== true || !Number.isSafeInteger(imported.next_project_revision) || typeof imported.mime !== "string" || !Number.isInteger(imported.size) || typeof imported.sha256 !== "string") throw { code: "E_INVALID_RESPONSE", message: "NodeHost 未返回 canonical Gallery 图片回读" };
+  return imported;
+}
+function graphCgImportFailure(error) { return String(error?.code || "").includes("MIGRATION") ? "项目需要先完成图片库迁移；没有写入 CG 绑定。" : `图片导入失败：${errorMessage(error)}`; }
+function graphCgEditor(cg, selection, attributePath = null, opener = document.activeElement) {
+  if (attributePath && attributePath.length > 1) { const warning = document.createElement("p"); warning.className = "graph-capability-note"; warning.setAttribute("role", "alert"); warning.textContent = "当前 Host 不支持深层属性 CG 锚点；没有创建或修改任何绑定。"; return warning; }
+  $(".graph-cg-modal-backdrop")?.click();
+  const backdrop = document.createElement("div"); backdrop.className = "graph-cg-modal-backdrop";
+  const dialog = document.createElement("section"); dialog.className = "graph-cg-modal"; dialog.setAttribute("role", "dialog"); dialog.setAttribute("aria-modal", "true"); const titleId = `graph-cg-modal-title-${crypto.randomUUID()}`; dialog.setAttribute("aria-labelledby", titleId);
+  const header = document.createElement("header"); const title = document.createElement("h2"); title.id = titleId; title.textContent = cg ? "更换 CG 图片" : "选择 CG 图片"; const close = document.createElement("button"); close.type = "button"; close.className = "graph-fab"; close.setAttribute("aria-label", "关闭图片选择"); close.title = "关闭图片选择"; close.replaceChildren(graphCloseIcon()); header.append(title, close);
+  const body = document.createElement("div"); body.className = "graph-cg-modal-body"; const currentSection = document.createElement("section"); currentSection.className = "graph-cg-current"; const currentHeading = document.createElement("div"); currentHeading.className = "graph-cg-current-heading"; const currentTitle = document.createElement("h3"); currentTitle.textContent = "当前绑定图片"; const importButton = document.createElement("button"); importButton.type = "button"; importButton.className = "graph-fab"; importButton.setAttribute("aria-label", "选择本地图片"); importButton.title = "选择本地图片"; importButton.replaceChildren(graphFabIcon("add")); const fileInput = document.createElement("input"); fileInput.type = "file"; fileInput.accept = "image/png,image/jpeg,image/webp,image/gif,image/avif"; fileInput.hidden = true; currentHeading.append(currentTitle, importButton); const currentGrid = document.createElement("div"); currentGrid.className = "graph-cg-current-grid"; const status = document.createElement("p"); status.className = "graph-cg-modal-status"; status.setAttribute("role", "status"); currentSection.append(currentHeading, currentGrid); body.append(currentSection, status); dialog.append(header, body, fileInput); backdrop.append(dialog); document.body.append(backdrop);
+  const modalOwner = graphSelectionKey(selection); const anchorId = selection.type === "entity" ? selection.item.id : selection.item.relation_id || graphRelationId(selection.item); const matches = asArray(state.graph.cg_defs).filter((candidate) => candidate?.anchor?.id === anchorId && (!attributePath || (candidate.anchor.kind === "attr" && candidate.anchor.attr_key === attributePath[0]))); let editingCg = cg; let closed = false;
+  const syncSelection = () => { $$(".graph-cg-current-cell", currentGrid).forEach((cell) => { const selected = cell.dataset.cgId === editingCg?.cg_id; cell.classList.toggle("selected", selected); cell.setAttribute("aria-pressed", String(selected)); }); title.textContent = editingCg ? "更换 CG 图片" : "CG 图片"; status.textContent = editingCg ? "已选择一个绑定；点击加号从本机更换图片。" : "点击加号从本机选择图片并新建 CG。"; status.setAttribute("role", "status"); };
+  matches.forEach((candidate, index) => { const cell = document.createElement("button"); cell.type = "button"; cell.className = "graph-cg-current-cell"; cell.dataset.cgId = candidate.cg_id; cell.setAttribute("aria-label", `选择当前 CG ${index + 1}`); const image = document.createElement("img"); image.src = graphCgAssetUrl(candidate.asset_path); image.alt = `当前 CG 图片 ${index + 1}`; image.loading = "lazy"; image.decoding = "async"; cell.append(image); cell.addEventListener("click", () => { editingCg = editingCg?.cg_id === candidate.cg_id ? null : candidate; syncSelection(); }); currentGrid.append(cell); });
+  if (matches.length === 0) { const empty = document.createElement("p"); empty.className = "graph-cg-modal-empty"; empty.textContent = "当前还没有绑定图片。"; currentGrid.append(empty); } syncSelection();
+  const closeModal = () => { if (closed) return; closed = true; document.removeEventListener("keydown", onKeyDown, true); backdrop.remove(); if (opener instanceof HTMLElement && opener.isConnected) opener.focus(); };
+  const modalControls = () => $$("button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[href],[tabindex]:not([tabindex='-1'])", dialog).filter((control) => !control.hidden);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") { event.preventDefault(); event.stopImmediatePropagation(); closeModal(); return; }
+    if (event.key !== "Tab") return; const controls = modalControls(); if (controls.length === 0) { event.preventDefault(); return; } const first = controls[0]; const last = controls.at(-1); if (event.shiftKey && (document.activeElement === first || !dialog.contains(document.activeElement))) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+  };
+  close.addEventListener("click", closeModal); backdrop.addEventListener("click", (event) => { if (event.target === backdrop) closeModal(); }); document.addEventListener("keydown", onKeyDown, true); close.focus();
+  importButton.addEventListener("click", () => fileInput.click());
+  fileInput.addEventListener("change", async () => {
+    const file = fileInput.files?.[0]; fileInput.value = ""; if (!file) return;
+    if (file.size <= 0 || file.size > 2 * 1024 * 1024) { status.textContent = "图片必须大于 0 且不超过 2 MiB。"; status.setAttribute("role", "alert"); return; }
+    if (graphSelectionKey(state.selectedGraph) !== modalOwner) { closeModal(); return; }
+    importButton.disabled = true; status.textContent = "正在导入本地图片…";
+    try {
+      const imported = await importGraphCgImage(file, selection); if (!backdrop.isConnected) return; if (graphSelectionKey(state.selectedGraph) !== modalOwner) { closeModal(); return; } state.status = withGraphProjectRevision(state.status, imported.next_project_revision);
+      status.textContent = "图片已安全导入，正在保存 CG…"; const definition = graphCgDefinition(editingCg, selection, attributePath, imported.asset_path); if (await saveGraphCg({ type: "upsert_cg", cg: definition }, importButton)) closeModal();
+    } catch (error) { if (!backdrop.isConnected) return; status.textContent = graphCgImportFailure(error); status.setAttribute("role", "alert"); }
+    finally { if (backdrop.isConnected) importButton.disabled = false; }
+  });
+  return backdrop;
+}
+async function saveGraphCg(operation, button) { if (!beginGraphSave(state, button)) return false; refreshGraphPropertyTree(); const owner = graphSelectionKey(state.selectedGraph); try { await executeEffect("world_apply", { operations: [operation] }, "gui_graph_cg"); toast("CG 已保存"); await loadStatus(true); await loadGraph(); if (owner === graphSelectionKey(state.selectedGraph) && state.graphPanelTab === "metadata") { const host = $("#graph-editor-cg"); host.replaceChildren(); renderGraphCgDefinitions(host, state.selectedGraph); } return true; } catch (error) { reportFailure("WORLD_APPLY", error); return false; } finally { endGraphSave(state, button); refreshGraphPropertyTree(); } }
+function renderGraphProperties(content, props, selection) {
+  const owner = graphSelectionKey(selection); if (state.graphPropertiesOwner !== owner) { state.graphPropertiesOwner = owner; state.graphPropertiesDraft = structuredClone(props); }
+  const properties = document.createElement("section"); properties.className = "graph-property-list"; const mount = document.createElement("div"); mount.className = "graph-property-tree-mount"; properties.append(mount); content.append(properties); void mountGraphPropertyTree(mount, selection, owner);
+}
+async function mountGraphPropertyTree(element, selection, owner) {
+  graphModule ??= import("/graph.js"); const { mountLocalWorldPropertyTree } = await graphModule;
+  if (!element.isConnected || graphSelectionKey(state.selectedGraph) !== owner || state.graphPanelTab !== "attributes") return;
+  const cgBindings = asArray(state.graph.cg_defs).filter((cg) => cg?.anchor?.kind === "attr" && cg.anchor.id === selection.item.id).map((cg) => ({ path: [cg.anchor.attr_key], count: 1, entry: cg.name }));
+  const makeProps = () => ({ value: state.graphPropertiesDraft, cgBindings, disabled: state.graphSaveBusy, canEditCg: (path) => path.length === 1, onDraftChange: (next) => { state.graphPropertiesDraft = next; graphPropertyController?.update(makeProps()); }, onEditCg: (path) => { graphCgEditor(null, selection, path, document.activeElement); } });
+  graphPropertyPropsFactory = makeProps; graphPropertyController = mountLocalWorldPropertyTree(element, makeProps());
+}
+function refreshGraphPropertyTree() { if (graphPropertyController && graphPropertyPropsFactory) graphPropertyController.update(graphPropertyPropsFactory()); }
+async function saveGraphPropertyDraft(selection, button) { if (!selection || !button || !beginGraphSave(state, button)) return; refreshGraphPropertyTree(); try { const owner = graphSelectionKey(selection); const item = state.graphRowDraftOwner === owner && state.graphRowDraft ? state.graphRowDraft : selection.item; const operation = selection.type === "entity" ? { type: "upsert_entity_row", entity: { ...item, entity_id: item.entity_id || item.id, props: state.graphPropertiesDraft } } : { type: "upsert_relation_row", relation: { ...item, relation_id: item.relation_id || graphRelationId(item), from_id: item.from_id || item.src, to_id: item.to_id || item.dst, fields: state.graphPropertiesDraft } }; await executeEffect("world_apply", { operations: [operation] }, "gui_graph_properties"); toast("属性已保存"); await loadStatus(true); await loadGraph(); if (owner === graphSelectionKey(state.selectedGraph)) { state.graphRowDraft = operation.entity || operation.relation; state.graphRowDraftOwner = owner; } } catch (error) { reportFailure("WORLD_APPLY", error); } finally { endGraphSave(state, button); refreshGraphPropertyTree(); } }
+function openGraphEditor(mode, item = null, intent = null) {
+  state.graphEditorEpoch += 1;
+  state.graphMode = mode; state.selectedGraph = item ? { type: mode, item } : null; $("#graph-side-panel").hidden = false; $("#graph-detail-view").hidden = true; $("#graph-editor").hidden = false;
+  const form = $("#graph-editor"); form.reset(); form.elements.props.value = formatJson(mode === "relation" ? item?.fields ?? item?.props ?? {} : item?.props || {});
+  state.graphEditorInitial = makeGraphEditorInitial(mode, item);
+  state.graphRowDraft = item ? structuredClone(item) : null; state.graphRowDraftOwner = graphSelectionKey(state.selectedGraph);
+  const relation = mode === "relation"; $("#entity-fields").hidden = relation; $("#relation-fields").hidden = !relation;
+  form.elements.name.required = !relation; form.elements.src.required = relation; form.elements.dst.required = relation; form.elements.kind.required = relation;
+  $("#graph-panel-kicker").textContent = relation ? "关系" : "节点"; $("#graph-panel-title").textContent = item ? (relation ? item.title || item.kind : graphNodeLabel(item)) : `新建${relation ? "关系" : "节点"}`;
+  const cgHost = $("#graph-editor-cg"); cgHost.replaceChildren(); cgHost.hidden = !item; if (item) renderGraphCgDefinitions(cgHost, { type: mode, item });
+  $("#delete-graph-item").disabled = !item; $("#save-graph-item").disabled = false;
+  if (relation) {
+    form.elements.src.value = item?.src || intent?.source || ""; form.elements.dst.value = item?.dst || intent?.target || ""; form.elements.kind.value = item?.kind || "";
+    form.elements.src.readOnly = false; form.elements.dst.readOnly = false; form.elements.kind.readOnly = false;
+    const description = state.graphEditorInitial.description; form.elements.relation_title.value = item?.title || ""; form.elements.relation_description.value = description.value; form.elements.relation_description.disabled = !description.editable; form.elements.relation_view_access.value = item?.view_access || ""; form.elements.relation_initial_available.checked = item?.initial_available !== false; $("#relation-description-help").hidden = !form.elements.relation_description.disabled; form.elements.id.value = item?.relation_id || `relation:${crypto.randomUUID()}`;
+  } else {
+    const kind = item?.kind || "character"; const select = form.elements.entity_type; $$("option[data-runtime-kind]", select).forEach((option) => option.remove());
+    for (const runtimeKind of [...new Set([...state.graphEntityKinds, kind])]) if (!Object.hasOwn(ENTITY_TYPES, runtimeKind) && runtimeKind !== GRAPH_CUSTOM_KIND_SENTINEL) { const option = document.createElement("option"); option.value = runtimeKind; option.dataset.runtimeKind = "true"; option.textContent = entityTypeLabel(runtimeKind); select.append(option); }
+    select.value = kind; select.disabled = false; form.elements.custom_kind.value = ""; $("#custom-kind-field").hidden = true; form.elements.custom_kind.required = false;
+    const { name, description } = state.graphEditorInitial; form.elements.name.value = name.value; renderGraphAliases(name.mode === "array" ? name.raw.slice(1) : []); form.elements.name.disabled = !name.editable; form.elements.entity_view_access.value = item?.view_access || ""; form.elements.entity_initial_hidden.checked = false; form.elements.entity_initial_hidden.setAttribute("aria-checked", "false"); form.elements.online_supplement.checked = graphPropValue(item?.props?.realworld_provenance) === "has_prototype"; form.elements.prototype_name.value = typeof graphPropValue(item?.props?.prototype_name) === "string" ? graphPropValue(item.props.prototype_name) : ""; updateGraphOnlineSearchField(); form.elements.description.value = description.value; form.elements.description.disabled = !description.editable; form.elements.id.value = item?.entity_id || item?.id || `entity:${crypto.randomUUID()}`;
+  }
+  queueMicrotask(() => (relation ? form.elements.kind : form.elements.name).focus());
+}
+function updateGraphCustomKindField() { const custom = $("#graph-editor").elements.entity_type.value === GRAPH_CUSTOM_KIND_SENTINEL; $("#custom-kind-field").hidden = !custom; $("#graph-editor").elements.custom_kind.required = custom; }
+function captureGraphMetadataDraft() { if ($("#graph-editor").hidden || !state.graphEditorInitial || !state.selectedGraph) return; try { const operation = buildGraphOperation($("#graph-editor"), state.graphEditorInitial); state.graphRowDraft = operation.entity || operation.relation; state.graphRowDraftOwner = graphSelectionKey(state.selectedGraph); state.graphPropertiesDraft = structuredClone(state.graphMode === "entity" ? state.graphRowDraft.props : state.graphRowDraft.fields); state.graphPropertiesOwner = state.graphRowDraftOwner; } catch (error) { reportFailure("WORLD_DRAFT", error); throw error; } }
+
+async function executeEffect(name, input, prefix = name) {
+  const revision = Number(state.status?.project_revision ?? state.status?.project?.project_revision ?? state.status?.revision ?? $("#project-revision").textContent);
+  const id = operationId(prefix);
+  return api("/tool", { method: "POST", body: JSON.stringify({ name, input, effect_identity: { operation_id: id, expected_project_revision: revision } }) });
+}
+
+async function submitGraphEditor(event) {
+  event.preventDefault(); const form = event.currentTarget;
+  if (state.graphEditorInitial === null) return;
+  const saveButton = $("#save-graph-item"); if (!beginGraphSave(state, saveButton)) return; const submittedEpoch = state.graphEditorEpoch; const submittedOwner = graphSelectionKey(state.selectedGraph); const submittedMode = state.graphMode; let operation;
+  try { operation = buildGraphOperation(form, state.graphEditorInitial); }
+  catch (error) { endGraphSave(state, saveButton); reportFailure("WORLD_APPLY", error); return; }
+  try {
+    await renderGraph();
+    await executeEffect("world_apply", { operations: [operation] }, `gui_${operation.type}`); addEvent("WORLD_APPLY", `${operation.type} 已提交并读回`); toast("世界图已保存"); await loadStatus(true); await loadGraph();
+    if (shouldCloseGraphEditor(submittedEpoch, state.graphEditorEpoch) && submittedOwner === graphSelectionKey(state.selectedGraph)) { const savedItem = operation.type === "upsert_entity_row" ? state.graph.entities.find((item) => item.id === operation.entity.entity_id) || operation.entity : state.graph.relations.find((item) => graphRelationId(item) === operation.relation.relation_id) || operation.relation; state.selectedGraph = { type: submittedMode, item: savedItem }; state.graphRowDraft = savedItem; state.graphRowDraftOwner = submittedOwner; state.graphEditorInitial = makeGraphEditorInitial(submittedMode, savedItem); $("#delete-graph-item").disabled = false; }
+  } catch (error) { reportFailure("WORLD_APPLY", error); }
+  finally { endGraphSave(state, saveButton); await renderGraph(); }
+}
+function saveActiveGraphPanel() { const selection = state.selectedGraph; const route = graphSaveRoute($("#graph-editor").hidden, selection?.type, state.graphPanelTab); if (route === "metadata") { $("#graph-editor").requestSubmit(); return; } if (route === "attributes") void saveGraphPropertyDraft(selection, $("#save-graph-item")); }
+
+async function deleteGraphItem() {
+  if (!state.selectedGraph) return; const { type, item } = state.selectedGraph;
+  const operation = type === "entity" ? { type: "delete_entity", id: item.id } : { type: "delete_relation", src: item.src, dst: item.dst, kind: item.kind };
+  if (!confirm(`确定删除这个${type === "entity" ? "节点" : "关系"}吗？此操作将写入世界图。`)) return;
+  const deleteButton = $("#delete-graph-item"); if (!beginGraphSave(state, deleteButton)) return;
+  try { await renderGraph(); await executeEffect("world_apply", { operations: [operation] }, `gui_${operation.type}`); toast("已删除并读回"); addEvent("WORLD_APPLY", `${operation.type} 已提交`); state.selectedGraph = null; closeGraphPanel(); await loadStatus(true); await loadGraph(); }
+  catch (error) { reportFailure("WORLD_APPLY", error); }
+  finally { endGraphSave(state, deleteButton); await renderGraph(); }
+}
+
+async function callTool(name, input, effectIdentity) {
+  const body = { name, input, ...(effectIdentity ? { effect_identity: effectIdentity } : {}) };
+  return api("/tool", { method: "POST", body: JSON.stringify(body) });
+}
+
+function getTriggerStatusHost() {
+  const root = $("#trigger-blueprint-root");
+  if (triggerStatusHost?.parentElement !== root.parentElement) {
+    triggerStatusHost?.remove();
+    triggerStatusHost = document.createElement("div");
+    triggerStatusHost.className = "trigger-workspace-status";
+    triggerStatusHost.hidden = true;
+    root.insertAdjacentElement("afterend", triggerStatusHost);
+  }
+  return triggerStatusHost;
+}
+
+function renderTriggerStatus(status, error = null) {
+  const root = $("#trigger-blueprint-root");
+  const host = getTriggerStatusHost();
+  if (status === null) {
+    root.hidden = false;
+    host.hidden = true;
+    host.replaceChildren();
+    return;
+  }
+  root.hidden = true;
+  host.hidden = false;
+  renderWorkspaceStatus(host, {
+    state: status,
+    surface: "trigger",
+    ...(error === null ? {} : { error, onRetry: () => { triggerLoadFailure = null; void readTriggers(); }, retryLabel: "重新读取" }),
+  });
+}
+
+async function readTriggers() {
+  state.triggerLoadState = "loading";
+  state.triggerLoadError = null;
+  state.triggerBusy = true;
+  triggerLoadFailure = null;
+  renderTriggerStatus("loading");
+  await waitForTriggerBlueprintLayout();
+  try {
+    const [schema, current, layout, graphResult, spatialResult] = await Promise.all([
+      callTool("trigger_schema", {}),
+      callTool("trigger_read", { include_document: true }),
+      callTool("trigger_blueprint_layout_read", {}),
+      api("/graph"),
+      callTool("world_search", { query: "spatial:", mode: "keyword", limit: 1 }),
+    ]);
+    const readback = asObject(current);
+    const layoutObject = asObject(layout);
+    const positions = asObject(layoutObject.positions);
+    state.triggerSchema = asObject(schema);
+    state.triggerDocument = readback.document ?? current;
+    state.triggerDraftRevision = Number.isSafeInteger(readback.project_revision) ? readback.project_revision : null;
+    state.triggerBlueprintLayout = layoutObject;
+    state.triggerPositions = Object.fromEntries(Object.entries(positions).filter(([, point]) => Number.isFinite(point?.x) && Number.isFinite(point?.y)));
+    const triggerGraph = normalizeGraph(graphResult);
+    state.triggerEntities = triggerGraph.entities;
+    state.triggerSpatialWorld = asObject(spatialResult).spatial_world ?? triggerGraph.spatial_world;
+    state.triggerValidation = null;
+    state.triggerSimulation = null;
+    state.triggerDirty = false;
+    state.validatedTriggerText = null;
+    state.triggerLoadState = "ready";
+    addEvent("TRIGGER", "触发器文档与蓝图布局已读取");
+  }
+  catch (error) { state.triggerLoadState = "error"; state.triggerLoadError = errorMessage(error); triggerLoadFailure = error; reportFailure("TRIGGER", error); }
+  finally { state.triggerBusy = false; ensureTriggerLayoutWorker(); await renderTriggerBlueprint(); }
+}
+
+function parseEditor(selector, label) { try { return JSON.parse($(selector).value); } catch (error) { throw { code: "E_INVALID_JSON", message: `${label} 不是有效 JSON：${error.message}` }; } }
+
+function localTriggerCapabilities() {
+  return asArray(asObject(state.triggerSchema).local_effect_capabilities)
+    .map((capability) => typeof capability === "string" ? capability : asObject(capability).capability_id)
+    .filter((capability) => typeof capability === "string");
+}
+
+function triggerSpatialRefChoices() {
+  const spatial = asObject(state.triggerSpatialWorld);
+  const worldId = typeof spatial.worldId === "string" ? spatial.worldId : "";
+  const sourceRevision = spatial.spatialRevision;
+  if (!worldId || !Number.isSafeInteger(sourceRevision)) return [];
+  const objectChoices = asArray(spatial.objects).flatMap((object) => {
+    const value = asObject(object);
+    if (typeof value.id !== "string" || value.id.length === 0) return [];
+    return [{
+      label: typeof value.label === "string" && value.label.length > 0 ? value.label : value.id,
+      ref: { worldId, sourceRevision, spatialId: value.id },
+    }];
+  });
+  const cityChoices = asArray(asObject(asObject(spatial.topology).procedural).cities).flatMap((city) => {
+    const value = asObject(city);
+    if (typeof value.id !== "string" || value.id.length === 0) return [];
+    return [{
+      label: typeof value.label === "string" && value.label.length > 0 ? value.label : value.id,
+      ref: { worldId, sourceRevision, spatialId: value.id },
+    }];
+  });
+  return [...objectChoices, ...cityChoices];
+}
+
+async function renderTriggerBlueprint() {
+  const version = ++triggerRenderVersion;
+  const root = $("#trigger-blueprint-root");
+  if (state.triggerLoadState === "loading") { renderTriggerStatus("loading"); return; }
+  if (state.triggerLoadState === "error") { renderTriggerStatus("error", triggerLoadFailure ?? state.triggerLoadError); return; }
+  let mountLocalTriggerBlueprint;
+  try {
+    triggerModule ??= import("/trigger.js");
+    ({ mountLocalTriggerBlueprint } = await triggerModule);
+  } catch (error) {
+    if (version !== triggerRenderVersion) return;
+    triggerModule = undefined;
+    state.triggerLoadState = "error";
+    state.triggerLoadError = errorMessage(error);
+    triggerLoadFailure = error;
+    renderTriggerStatus("error", error);
+    reportFailure("TRIGGER", error);
+    return;
+  }
+  if (version !== triggerRenderVersion) return;
+  renderTriggerStatus(null);
+  const props = {
+    schema: state.triggerSchema,
+    document: state.triggerDocument,
+    layoutPositions: state.triggerPositions,
+    blueprintLayout: state.triggerBlueprintLayout,
+    localEffectCapabilities: localTriggerCapabilities(),
+    entityChoices: state.triggerEntities.map((entity) => ({ id: String(entity.id), label: graphNodeLabel(entity) })),
+    spatialRefChoices: triggerSpatialRefChoices(),
+    canLocateSpatialRef: typeof worldMapController?.focusObject === "function",
+    validation: state.triggerValidation,
+    simulation: state.triggerSimulation,
+    loadState: state.triggerLoadState,
+    loadError: state.triggerLoadError,
+    busy: state.triggerBusy,
+    canSimulate: !state.triggerDirty,
+    onRead: readTriggers,
+    onDraftChange: (document) => { state.triggerDocument = document; state.triggerValidation = null; state.triggerSimulation = null; state.triggerDirty = true; state.validatedTriggerText = null; renderTriggerBlueprint(); },
+    onValidate: validateTrigger,
+    onSave: applyTrigger,
+    onSimulate: simulateTrigger,
+    onLayoutChange: (positions) => queueTriggerBlueprintLayout({ ...state.triggerBlueprintLayout, positions }),
+    onBlueprintLayoutChange: queueTriggerBlueprintLayout,
+    onOpenMap: () => switchView("world-map"),
+    onLocateSpatialRef: (spatialId) => {
+      if (typeof worldMapController?.focusObject !== "function") return;
+      switchView("world-map");
+      void worldMapController.open().then(() => worldMapController?.focusObject(spatialId));
+    },
+  };
+  if (triggerController) triggerController.update(props);
+  else { root.replaceChildren(); triggerController = mountLocalTriggerBlueprint(root, props); }
+}
+
+async function validateTrigger(candidate = state.triggerDocument) {
+  state.triggerBusy = true; await renderTriggerBlueprint();
+  try {
+    const result = asObject(await callTool("trigger_validate", { candidate_document: candidate }));
+    state.triggerValidation = result;
+    state.validatedTriggerText = result.ok === true ? formatJson(candidate) : null;
+    addEvent("TRIGGER_VALIDATE", result.ok === true ? "触发器验证通过" : "触发器验证失败", result.ok !== true);
+    toast(result.ok === true ? "验证通过" : "触发器验证失败", result.ok !== true);
+  } catch (error) { state.triggerValidation = { ok: false, issues: [errorMessage(error)] }; state.validatedTriggerText = null; reportFailure("TRIGGER_VALIDATE", error); }
+  finally { state.triggerBusy = false; ensureTriggerLayoutWorker(); await renderTriggerBlueprint(); }
+}
+async function applyTrigger(document = state.triggerDocument) {
+  state.triggerBusy = true; await renderTriggerBlueprint();
+  try {
+    await waitForTriggerBlueprintLayout();
+    if (state.triggerDraftRevision === null) throw { code: "E_READ_REQUIRED", message: "缺少触发器草稿 revision，请重新读取" };
+    if (state.validatedTriggerText !== formatJson(document)) throw { code: "E_VALIDATION_REQUIRED", message: "当前候选蓝图尚未验证，或验证后已修改" };
+    const result = asObject(await callTool("trigger_apply", { operations: [{ type: "replace_document", document }] }, { operation_id: operationId("gui_trigger_apply"), expected_project_revision: state.triggerDraftRevision }));
+    state.triggerDraftRevision = Number.isSafeInteger(result.next_project_revision) ? result.next_project_revision : state.triggerDraftRevision + 1;
+    state.triggerDirty = false;
+    state.triggerValidation = null;
+    state.validatedTriggerText = null;
+    addEvent("TRIGGER_APPLY", "触发器已保存并读回验证"); toast("触发器已保存"); await loadStatus(true);
+  } catch (error) { reportFailure("TRIGGER_APPLY", error); }
+  finally { state.triggerBusy = false; ensureTriggerLayoutWorker(); await renderTriggerBlueprint(); }
+}
+
+async function simulateTrigger(input) {
+  state.triggerBusy = true; await renderTriggerBlueprint();
+  try {
+    if (state.triggerDirty) throw { code: "E_SAVE_REQUIRED", message: "候选蓝图尚未保存，不能冒充项目中的真实触发器模拟" };
+    const result = asObject(await callTool("trigger_simulate", input));
+    state.triggerSimulation = result;
+    addEvent("TRIGGER_SIMULATE", result.ok === false ? "触发器模拟失败" : "触发器模拟完成", result.ok === false);
+    if (result.ok === false) toast("触发器模拟失败", true);
+  } catch (error) { state.triggerSimulation = { ok: false, issues: [errorMessage(error)] }; reportFailure("TRIGGER_SIMULATE", error); }
+  finally { state.triggerBusy = false; ensureTriggerLayoutWorker(); await renderTriggerBlueprint(); }
+}
+
+function queueTriggerBlueprintLayout(layout) {
+  state.triggerBlueprintLayout = asObject(layout);
+  state.triggerPositions = asObject(state.triggerBlueprintLayout.positions);
+  state.triggerLayoutPending = state.triggerBlueprintLayout;
+  renderTriggerBlueprint();
+  ensureTriggerLayoutWorker();
+}
+
+function ensureTriggerLayoutWorker() {
+  if (triggerLayoutWorker !== null || state.triggerLayoutPending === null || state.triggerBusy) return;
+  triggerLayoutWorker = flushTriggerBlueprintLayout().finally(() => { triggerLayoutWorker = null; ensureTriggerLayoutWorker(); });
+}
+
+async function waitForTriggerBlueprintLayout() {
+  while (triggerLayoutWorker !== null) await triggerLayoutWorker;
+}
+
+async function flushTriggerBlueprintLayout() {
+  while (state.triggerLayoutPending !== null) {
+    const layout = state.triggerLayoutPending;
+    state.triggerLayoutPending = null;
+    if (state.triggerDraftRevision === null) { reportFailure("TRIGGER_LAYOUT", { code: "E_READ_REQUIRED", message: "缺少触发器草稿 revision，请重新读取" }); return; }
+    state.triggerLayoutSaving = true;
+    try {
+      const result = asObject(await callTool("trigger_blueprint_layout_apply", { patch: layout }, { operation_id: operationId("gui_trigger_layout"), expected_project_revision: state.triggerDraftRevision }));
+      state.triggerDraftRevision = Number.isSafeInteger(result.next_project_revision) ? result.next_project_revision : state.triggerDraftRevision + 1;
+      addEvent("TRIGGER_LAYOUT", "触发器文件与蓝图布局已保存");
+    } catch (error) {
+      state.triggerLayoutPending = null;
+      reportFailure("TRIGGER_LAYOUT", error);
+      return;
+    } finally {
+      state.triggerLayoutSaving = false;
+    }
+  }
+  await loadStatus(true);
+  await renderTriggerBlueprint();
+}
+
+function normalizeFiles(result) { const root = asObject(result); return asArray(root.files || root.entries || result).map((entry) => typeof entry === "string" ? { path: entry } : entry).filter((entry) => typeof entry?.path === "string"); }
+async function loadFiles(area) {
+  const root = $(`#${area}-files`); root.textContent = "正在读取…";
+  try { state.files[area] = normalizeFiles(await api(`/files?area=${encodeURIComponent(area)}`)); renderFiles(area); addEvent("FILES", `${area} 文件列表已刷新`); }
+  catch (error) { root.textContent = errorMessage(error); reportFailure("FILES", error); }
+}
+function renderFiles(area) { const root = $(`#${area}-files`); root.replaceChildren(); if (state.files[area].length === 0) { const p = document.createElement("p"); p.className = "empty-copy"; p.textContent = "没有可用文件。"; root.append(p); return; } state.files[area].forEach((file) => { const button = document.createElement("button"); button.className = "tree-file"; button.textContent = file.path; button.title = file.path; button.addEventListener("click", () => readFile(area, file.path, button)); root.append(button); }); }
+async function readFile(area, path, button) {
+  $$(".tree-file", button.parentElement).forEach((item) => item.classList.toggle("active", item === button));
+  try { const result = asObject(await api(`/file?area=${encodeURIComponent(area)}&path=${encodeURIComponent(path)}`)); const content = typeof result.content === "string" ? result.content : ""; const sha256 = result.sha256 || result.content_sha256 || result.expected_sha256 || ""; if (area === "view") { state.currentViewFile = { path, sha256 }; $("#view-file-name").textContent = path; $("#view-file-sha").textContent = sha256 || "摘要不可用"; $("#view-file-content").value = content; $("#view-file-content").disabled = false; $("#save-view-file").disabled = !sha256; } else { $("#doc-file-name").textContent = path; $("#doc-content").textContent = content; } addEvent("FILE_READ", path); }
+  catch (error) { reportFailure("FILE_READ", error); }
+}
+async function saveViewFile() { if (!state.currentViewFile) return; const button = $("#save-view-file"); button.disabled = true; try { const result = asObject(await api("/file", { method: "POST", body: JSON.stringify({ area: "view", path: state.currentViewFile.path, content: $("#view-file-content").value, expected_sha256: state.currentViewFile.sha256 }) })); state.currentViewFile.sha256 = result.sha256 || result.content_sha256 || state.currentViewFile.sha256; $("#view-file-sha").textContent = state.currentViewFile.sha256; toast("View 文件已保存"); addEvent("FILE_WRITE", `${state.currentViewFile.path} 已 CAS 保存`); await loadStatus(true); } catch (error) { reportFailure("FILE_WRITE", error); } finally { button.disabled = !state.currentViewFile?.sha256; } }
+
+function localPreviewBridge() {
+  previewBridge ??= attachLocalPreviewBridge(globalThis, () => $("#preview-frame"), () => state.status, {
+    host: {
+      inspect: () => api("/preview/session"),
+      request: (method, params, requestId) => api("/preview/session/command", { method: "POST", body: JSON.stringify({ method, params, ...(requestId === undefined ? {} : { request_id: requestId }) }) }),
+      viewInteractionConfig: () => api("/preview/view-config"),
+      emitViewInteraction: (event) => api("/preview/view-event", { method: "POST", body: JSON.stringify({ event }) }),
+      recoverViewDeliveries: () => api("/preview/view-delivery-recovery"),
+      recordViewDeliveryFailure: (operation_id) => api("/preview/view-delivery-failed", { method: "POST", body: JSON.stringify({ operation_id }) }),
+      resolveViewDeliveryFailure: (operation_id) => api("/preview/view-delivery-resolved", { method: "POST", body: JSON.stringify({ operation_id }) }),
+      wait: (revision, timeoutMs) => api(`/preview/session?after_revision=${encodeURIComponent(revision)}&timeout_ms=${encodeURIComponent(timeoutMs)}`),
+      fetchAssetCapability: async (id) => {
+        const response = await fetch(`${API}/preview/asset-capability?id=${encodeURIComponent(id)}`, { credentials: "same-origin" });
+        if (!response.ok) throw { code: `E_HTTP_${response.status}`, message: "获取本地 Preview 资源能力失败" };
+        return response;
+      },
+      revokeAssetCapabilities: async (tokens) => {
+        await fetch(`${API}/preview/asset-capabilities/revoke`, { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ tokens }) });
+      },
+    },
+    onLoad: () => { $("#preview-status").textContent = "作品已载入，正在初始化 ChatPlay bridge…"; },
+    onReady: () => { $("#preview-status").textContent = "实时预览与 ChatPlay bridge 已就绪；保存源文件即可看到 HMR 更新。"; },
+    onRequestSettings: async () => { await openModelSettings(); },
+  });
+  return previewBridge;
+}
+
+function modelSettingsDialog() { return $("#model-settings-dialog"); }
+function renderModelSettings(result) {
+  const config = asObject(result.config); const settings = asObject(config.settings); const catalog = asObject(result.account_catalog);
+  const current = typeof settings.model === "string" ? settings.model : ""; const sha256 = typeof config.sha256 === "string" ? config.sha256 : "";
+  const models = asArray(catalog.models).flatMap((entry) => { const item = asObject(entry); return typeof item.model === "string" ? [{ model: item.model, label: typeof item.label === "string" ? item.label : item.model }] : []; });
+  const select = $("#model-settings-select"); select.replaceChildren();
+  for (const item of models) { const option = document.createElement("option"); option.value = item.model; option.textContent = item.label === item.model ? item.model : `${item.label} · ${item.model}`; select.append(option); }
+  if (!models.some((item) => item.model === current) && current) { const option = document.createElement("option"); option.value = current; option.textContent = `${current}（当前配置，已不在目录）`; select.prepend(option); }
+  select.value = current; select.disabled = models.length === 0;
+  $("#model-settings-current").textContent = current || "未配置"; $("#model-settings-sha").value = sha256;
+  $("#model-settings-catalog-token").value = typeof catalog.catalog_token === "string" ? catalog.catalog_token : "";
+  const state = typeof catalog.state === "string" ? catalog.state : "unavailable";
+  $("#model-settings-note").textContent = models.length === 0
+    ? state === "sign_in_required" ? "请先使用左下角“未登录”完成登录。"
+      : "账户模型目录暂不可用，请稍后重试。"
+    : "可保存的列表来自当前已登录账户。";
+  $("#model-settings-save").disabled = models.length === 0 || !models.some((item) => item.model === select.value);
+  select.onchange = () => { $("#model-settings-save").disabled = !models.some((item) => item.model === select.value); };
+}
+async function openModelSettings() {
+  const dialog = modelSettingsDialog(); const epoch = ++modelSettingsRequestEpoch;
+  if (!dialog || typeof dialog.showModal !== "function") throw { code: "E_CAPABILITY_UNAVAILABLE", message: "模型设置窗口不可用" };
+  $("#model-settings-note").textContent = "正在读取当前模型设置与官方目录…"; $("#model-settings-save").disabled = true;
+  if (!dialog.open) dialog.showModal();
+  if (!dialog.open) throw { code: "E_CAPABILITY_UNAVAILABLE", message: "模型设置窗口未能显示" };
+  try { const result = await api("/model-settings"); if (epoch === modelSettingsRequestEpoch) renderModelSettings(asObject(result)); }
+  catch (error) { if (epoch === modelSettingsRequestEpoch) $("#model-settings-note").textContent = errorMessage(error); }
+}
+async function saveModelSettings() {
+  const button = $("#model-settings-save"); button.disabled = true;
+  try { await api("/model-settings", { method: "POST", body: JSON.stringify({ model: $("#model-settings-select").value, expected_sha256: $("#model-settings-sha").value, catalog_token: $("#model-settings-catalog-token").value }) }); toast("预览模型设置已保存"); await openModelSettings(); }
+  catch (error) { $("#model-settings-note").textContent = errorMessage(error); }
+}
+function safePreviewUrl(value) {
+  let parsed;
+  try { parsed = new URL(value); }
+  catch { throw { code: "E_PREVIEW_URL_INVALID", message: "Vite 返回的预览地址无效" }; }
+  const port = Number(parsed.port);
+  if (parsed.protocol !== "http:" || parsed.hostname !== "localhost" || !Number.isInteger(port) || port < 1 || port > 65535 || parsed.username || parsed.password || !/^\/_worldengine_preview\/[a-f0-9]{32}\/$/u.test(parsed.pathname) || parsed.search || parsed.hash) {
+    throw { code: "E_PREVIEW_URL_INVALID", message: "Vite 预览地址不符合隔离 loopback 约束" };
+  }
+  return parsed.toString();
+}
+async function waitForPreviewReady(initial, requestId) {
+  let session = initial;
+  for (let attempt = 0; attempt < 60; attempt += 1) {
+    if (requestId !== previewRequestId) return null;
+    if (session.state === "running") return session;
+    if (session.state === "failed" || session.state === "stopped") throw { code: "E_PREVIEW_START_FAILED", message: session.stderr || "Vite 预览未能启动" };
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    session = asObject(await api("/preview", { method: "POST", body: JSON.stringify({ action: "status" }) }));
+  }
+  throw { code: "E_PREVIEW_START_TIMEOUT", message: "等待 Vite 启动超时，请重新连接" };
+}
+async function preview(action) {
+  const requestId = ++previewRequestId;
+  const target = $("#preview-status");
+  const open = $("#preview-open");
+  target.textContent = `${action === "start" ? "正在启动本地 Vite" : "正在停止预览"}…`;
+  try {
+    if (action === "stop") localPreviewBridge().clear();
+    let result = asObject(await api("/preview", { method: "POST", body: JSON.stringify({ action }) }));
+    if (action === "stop") {
+      open.hidden = true;
+      target.textContent = "预览已停止。";
+      addEvent("PREVIEW", target.textContent);
+      return;
+    }
+    result = await waitForPreviewReady(result, requestId);
+    if (result === null) return;
+    const value = typeof result.url === "string" ? result.url : typeof result.preview_url === "string" ? result.preview_url : "";
+    if (!value) throw { code: "E_PREVIEW_URL_MISSING", message: "Vite 已启动，但未返回预览地址" };
+    const url = safePreviewUrl(value);
+    open.href = url;
+    open.hidden = false;
+    localPreviewBridge().load(url);
+    target.textContent = "Vite 已就绪，正在载入隔离预览…";
+    addEvent("PREVIEW", target.textContent);
+  } catch (error) {
+    localPreviewBridge().clear();
+    reportFailure("PREVIEW", error, target);
+  }
+}
+
+function normalizeTools(result) { const root = asObject(result); return asArray(root.tools || result).map((tool) => ({ ...tool, input_schema: tool.input_schema || tool.inputSchema || {}, project_effect: tool.project_effect === true || tool.effect === true, available: tool.available !== false && tool.enabled !== false })); }
+async function loadTools() { const root = $("#tool-list"); root.textContent = "正在读取能力…"; try { state.tools = normalizeTools(await api("/tools")); renderTools(); addEvent("TOOLS", `已读取 ${state.tools.length} 项工具能力`); } catch (error) { root.textContent = errorMessage(error); reportFailure("TOOLS", error); } }
+function renderTools() { const root = $("#tool-list"); root.replaceChildren(); state.tools.forEach((tool) => { const button = document.createElement("button"); button.className = "tool-item"; button.disabled = !tool.available; const strong = document.createElement("strong"); strong.textContent = tool.name || "未命名工具"; const small = document.createElement("small"); small.textContent = tool.available ? `${tool.domain || "runtime"} · ${tool.project_effect ? "写项目" : "只读/运行时"}` : `不可用 · ${tool.unavailable_reason || tool.reason || "当前 runtime 未提供"}`; button.append(strong, small); button.addEventListener("click", () => selectTool(tool, button)); root.append(button); }); }
+function selectTool(tool, button) { state.selectedTool = tool; state.toolOperationId = tool.project_effect ? operationId(`gui_${tool.name}`) : ""; $$(".tool-item").forEach((item) => item.classList.toggle("active", item === button)); $("#tool-name").textContent = tool.name; $("#tool-description").textContent = tool.description || `${tool.domain || "runtime"} 域当前能力`; $("#tool-effect").textContent = tool.project_effect ? "WRITE" : "READ"; $("#tool-schema").textContent = formatJson(tool.input_schema); $("#tool-input").value = formatJson(defaultFromSchema(tool.input_schema)); $("#effect-fields").hidden = !tool.project_effect; $("#operation-id").value = state.toolOperationId; $("#expected-revision").value = $("#project-revision").textContent === "—" ? "0" : $("#project-revision").textContent; $("#run-tool").disabled = !tool.available; }
+function defaultFromSchema(schema) { const object = asObject(schema); if (object.type !== "object") return {}; const result = {}; asArray(object.required).forEach((key) => { const child = asObject(object.properties?.[key]); result[key] = child.type === "array" ? [] : child.type === "integer" ? child.minimum ?? 0 : child.type === "boolean" ? false : child.type === "object" ? {} : child.enum?.[0] ?? ""; }); return result; }
+async function runSelectedTool() { const tool = state.selectedTool, target = $("#tool-result"); if (!tool) return; try { const input = parseEditor("#tool-input", "工具输入"); const identity = tool.project_effect ? { operation_id: $("#operation-id").value.trim(), expected_project_revision: Number($("#expected-revision").value) } : undefined; const result = await callTool(tool.name, input, identity); target.textContent = formatJson(result); addEvent("TOOL", `${tool.name} 执行成功`); toast(`${tool.name} 执行成功`); if (tool.project_effect) { await loadStatus(true); state.toolOperationId = operationId(`gui_${tool.name}`); $("#operation-id").value = state.toolOperationId; } } catch (error) { reportFailure("TOOL", error, target); } }
+
+async function createSnapshot() { const button = $("#snapshot-button"); button.disabled = true; try { const revision = Number($("#project-revision").textContent); const id = operationId("gui_snapshot"); const result = await api("/snapshot", { method: "POST", body: JSON.stringify({ operation_id: id, expected_project_revision: revision }) }); addEvent("SNAPSHOT", `快照已创建：${asObject(result).snapshot_id || id}`); toast("项目快照已创建"); await loadStatus(true); } catch (error) { reportFailure("SNAPSHOT", error); } finally { button.disabled = false; } }
+
+function jobArgs(kind, args) {
+  if (kind === "doctor") return ["doctor"];
+  if (kind === "recall") return ["recall", String(args.query), String(args.limit)];
+  if (kind === "ingest") return ["ingest", String(args.path), String(args.scope_id), String(args.source_id), String(args.source_revision)];
+  throw { code: "E_COMMAND_NOT_ALLOWED", message: `未知任务类型：${kind}` };
+}
+function jobId(job) { return job.id || job.job_id; }
+function jobState(job) { return job.state || job.status || "unknown"; }
+function isTerminalJob(job) { return ["completed", "complete", "succeeded", "failed", "error", "cancelled"].includes(jobState(job)); }
+function upsertJob(job) { const id = jobId(job); const index = state.jobs.findIndex((item) => jobId(item) === id); if (index === -1) state.jobs.unshift(job); else state.jobs[index] = job; }
+async function createJob(kind, args) { try { const result = asObject(await api("/jobs", { method: "POST", body: JSON.stringify({ args: jobArgs(kind, args) }) })); const id = jobId(result); if (id) upsertJob(result); addEvent("JOB", `${kind} 已创建${id ? `：${id}` : ""}`); toast(`${kind} 任务已创建`); switchView("jobs"); renderJobs(); if (id) await readJob(id); } catch (error) { reportFailure("JOB", error); } }
+async function loadJobs() {
+  if (state.jobs.length === 0) { renderJobs(); return; }
+  const refreshed = await Promise.all(state.jobs.map(async (job) => {
+    const id = jobId(job);
+    if (!id) return job;
+    try { return await api(`/jobs/${encodeURIComponent(id)}`); } catch { return job; }
+  }));
+  state.jobs = refreshed; renderJobs(); state.jobs.filter((job) => !isTerminalJob(job)).forEach((job) => pollJob(jobId(job)));
+}
+function renderJobs() { const root = $("#jobs-table"); root.replaceChildren(); if (state.jobs.length === 0) { const p = document.createElement("p"); p.className = "empty-copy"; p.textContent = "当前没有任务。"; root.append(p); return; } state.jobs.forEach((job) => { const id = jobId(job) || "—"; const row = document.createElement("div"); row.className = "job-row"; const code = document.createElement("code"); code.textContent = String(id); const kind = document.createElement("span"); kind.textContent = String(asArray(job.args)[0] || "任务"); const status = document.createElement("span"); status.className = `job-state ${jobState(job)}`; status.textContent = String(jobState(job)); row.append(code, kind, status, chevronIcon()); if (id !== "—") row.addEventListener("click", () => readJob(id)); root.append(row); }); }
+async function readJob(id) { const target = $("#job-result"); target.textContent = "正在读取任务结果…"; $("#job-result-caption").textContent = String(id); try { const result = asObject(await api(`/jobs/${encodeURIComponent(id)}`)); upsertJob(result); renderJobs(); target.textContent = formatJson(result); if (!isTerminalJob(result)) pollJob(id); } catch (error) { reportFailure("JOB_READ", error, target); } }
+function pollJob(id) {
+  if (!id || state.pollingJobs.has(id)) return;
+  state.pollingJobs.add(id); let remaining = 120;
+  const tick = async () => {
+    try {
+      const job = asObject(await api(`/jobs/${encodeURIComponent(id)}`)); upsertJob(job); renderJobs();
+      if (isTerminalJob(job)) { state.pollingJobs.delete(id); $("#job-result-caption").textContent = String(id); $("#job-result").textContent = formatJson(job); addEvent("JOB", `${asArray(job.args)[0] || "任务"} 已${jobState(job)}`); return; }
+    } catch (error) { if (remaining <= 0) reportFailure("JOB_READ", error); }
+    remaining -= 1;
+    if (remaining > 0) setTimeout(tick, 1000); else { state.pollingJobs.delete(id); addEvent("JOB", `${id} 仍在运行，可稍后手动刷新`); }
+  };
+  setTimeout(tick, 1000);
+}
+
+let accountRequestEpoch = 0;
+async function loadAuth() {
+  const epoch = ++accountRequestEpoch;
+  const form = $("#auth-start-form"), button = $("#auth-button"), logout = $("#logout-button");
+  try {
+    const auth = asObject(await api("/auth/status"));
+    if (epoch !== accountRequestEpoch) return;
+    const connected = auth.state === "signed_in" || auth.authenticated === true || auth.connected === true;
+    const pending = auth.state === "challenge_pending";
+    const available = auth.available !== false;
+    form.hidden = connected;
+    logout.hidden = !connected;
+    button.disabled = !available || pending;
+    button.textContent = !available ? "登录不可用" : pending ? "等待登录…" : "未登录";
+    button.title = !available ? String(auth.reason || auth.unavailable_reason || "当前 NodeHost 未提供云端认证能力") : "";
+    $("#account-details").hidden = !connected;
+    $("#account-retry").hidden = true;
+    $("#account-name").textContent = connected ? "正在读取用户名…" : "";
+    $("#account-balance").textContent = connected ? "🪙 正在读取余额…" : "";
+    if (connected) {
+      const result = asObject(await api("/auth/account"));
+      if (epoch !== accountRequestEpoch) return;
+      if (result.state !== "signed_in") { await loadAuth(); return; }
+      const account = asObject(result.account);
+      $("#account-name").textContent = account.profile_state === "ready" ? String(account.display_name) : "用户名读取失败";
+      // 与 canonical formatUnit(units, "spend") 一致：账本整数原样千分位，不换算人民币。
+      $("#account-balance").textContent = account.wallet_state === "ready" && /^(?:0|[1-9]\d*)$/u.test(account.balance_units)
+        ? `🪙 ${BigInt(account.balance_units).toLocaleString("en-US")}` : "🪙 余额读取失败";
+      $("#account-retry").hidden = account.profile_state === "ready" && account.wallet_state === "ready";
+    }
+  } catch {
+    if (epoch !== accountRequestEpoch) return;
+    $("#account-name").textContent = "账户读取失败"; $("#account-balance").textContent = "🪙 余额不可用";
+    $("#account-retry").hidden = false;
+    if (logout.hidden) { form.hidden = false; button.disabled = true; button.textContent = "登录状态不可用"; }
+  }
+}
+// LOCAL_GUI_AUTH_START_BEGIN
+let authStartPending = false;
+async function startAuth(event) {
+  event.preventDefault();
+  if (authStartPending) return;
+  const button = $("#auth-button");
+  if (button.disabled) return;
+  authStartPending = true;
+  button.disabled = true;
+  button.textContent = "正在打开登录…";
+  button.title = "";
+  try {
+    const started = asObject(await api("/auth/start", { method: "POST", headers: { accept: "application/json" }, body: "{}" }));
+    const authorizationUrl = typeof started.authorization_url === "string" ? started.authorization_url : "";
+    const authorization = new URL(authorizationUrl);
+    const keys = [...authorization.searchParams.keys()];
+    if (!["https://late-frost.com", "https://world-engines.org"].includes(authorization.origin)
+      || authorization.pathname !== "/desktop-login" || authorization.username !== "" || authorization.password !== "" || authorization.hash !== ""
+      || keys.length !== 2 || new Set(keys).size !== 2 || !authorization.searchParams.get("request_id") || !authorization.searchParams.get("state")) {
+      throw { code: "E_INVALID_RESPONSE", message: "登录服务返回无效授权地址" };
+    }
+    window.location.assign(authorization.href);
+  } catch (error) {
+    authStartPending = false;
+    button.disabled = false;
+    button.textContent = "重试登录";
+    button.title = errorMessage(error);
+    reportFailure("AUTH", error);
+  }
+}
+// LOCAL_GUI_AUTH_START_END
+async function logoutAuth() { accountRequestEpoch += 1; $("#account-details").hidden = true; $("#account-name").textContent = ""; $("#account-balance").textContent = ""; try { await api("/auth/logout", { method: "POST", body: "{}" }); addEvent("AUTH", "已退出云端连接"); await loadAuth(); } catch (error) { reportFailure("AUTH", error); await loadAuth(); } }
+
+function renderVersion(result) {
+  const incomingCurrent = typeof result.current === "string" ? result.current.trim() : "";
+  if (incomingCurrent) lastKnownCurrentVersion = incomingCurrent;
+  const current = lastKnownCurrentVersion || "未知";
+  const latest = typeof result.latest === "string" && result.latest.trim() ? result.latest.trim() : "";
+  const status = typeof result.status === "string" ? result.status : "unavailable";
+  const updateAvailable = status === "update_available";
+  const canUpdate = updateAvailable && result.can_update === true;
+  const button = $("#version-update");
+  $("#version-current").textContent = current;
+  $("#version-update-note").hidden = !updateAvailable;
+  button.classList.toggle("is-update-available", updateAvailable);
+  button.disabled = !canUpdate;
+  button.title = typeof result.message === "string" && result.message
+    ? result.message
+    : canUpdate ? `可更新至 ${latest}`
+      : updateAvailable ? `发现新版本 ${latest || ""}，但当前升级器不可用`
+        : status === "up_to_date" ? "已是最新版本"
+          : status === "checking" ? "正在检查最新版本"
+            : status === "unpublished" ? "当前版本尚未发布" : "暂时无法检查更新";
+}
+
+async function loadVersion() {
+  const requestId = ++versionRequestId;
+  for (let attempt = 0; attempt < 8; attempt += 1) {
+    try {
+      const result = asObject(await api("/version"));
+      if (requestId !== versionRequestId) return;
+      renderVersion(result);
+      if (result.status !== "checking") return;
+    } catch (error) {
+      if (requestId !== versionRequestId) return;
+      renderVersion({ status: "unavailable", message: errorMessage(error) });
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 750));
+  }
+  if (requestId === versionRequestId) renderVersion({ status: "unavailable", message: "版本检查暂未完成" });
+}
+
+async function updateVersion() {
+  const button = $("#version-update");
+  if (button.disabled || !button.classList.contains("is-update-available")) return;
+  button.disabled = true;
+  button.title = "正在请求更新";
+  try {
+    await api("/update", { method: "POST", body: "{}" });
+    await loadVersion();
+  } catch (error) {
+    renderVersion({ status: "error", message: errorMessage(error) });
+    reportFailure("UPDATE", error);
+  }
+}
+
+function bindEvents() {
+  $("#account-retry").addEventListener("click", loadAuth);
+  $("#auth-start-form").addEventListener("submit", startAuth);
+  window.addEventListener("focus", loadAuth);
+  window.addEventListener("pageshow", (event) => { if (event.persisted) loadAuth(); });
+  $$(".graph-close").forEach((button) => button.replaceChildren(graphCloseIcon()));
+  $("#primary-nav").addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const toggle = target?.closest(".nav-group-toggle");
+    if (toggle) {
+      const group = toggle.closest(".nav-group"); const subnav = group?.querySelector(".nav-subitems");
+      if (subnav) { const expanded = toggle.getAttribute("aria-expanded") === "true"; toggle.setAttribute("aria-expanded", String(!expanded)); subnav.hidden = expanded; }
+      return;
+    }
+    const template = target?.closest("[data-template-kind]");
+    if (template) { const kind = template.dataset.templateKind; if (kind) { document.querySelectorAll("[data-template-kind]").forEach((button) => button.classList.toggle("active", button === template)); switchView("spatial-templates"); } return; }
+    const button = target?.closest("[data-view]"); if (button) switchView(button.dataset.view);
+  });
+  $$('[data-view-jump]').forEach((button) => button.addEventListener("click", () => switchView(button.dataset.viewJump)));
+  $("#refresh-button").addEventListener("click", () => Promise.allSettled([loadStatus(), loadAuth()])); $("#clear-events").addEventListener("click", () => { state.events = []; renderEvents(); });
+  $("#snapshot-button").addEventListener("click", createSnapshot); $$('[data-job-kind]').forEach((button) => button.addEventListener("click", () => createJob(button.dataset.jobKind, {})));
+  $("#reload-graph").addEventListener("click", loadGraph);
+  $("#new-graph-node").addEventListener("click", () => openGraphEditor("entity")); $("#graph-editor").addEventListener("submit", submitGraphEditor); $("#delete-graph-item").addEventListener("click", deleteGraphItem); $("#save-graph-item").addEventListener("click", saveActiveGraphPanel);
+  $$("[data-graph-panel-tab]").forEach((button) => button.addEventListener("click", () => { if (!$("#graph-editor").hidden) { try { captureGraphMetadataDraft(); } catch { return; } } state.graphPanelTab = button.dataset.graphPanelTab; renderGraphPanelSelection(); }));
+  $("#graph-editor").elements.entity_type.addEventListener("change", updateGraphCustomKindField);
+  $("#add-graph-alias").addEventListener("click", addGraphAlias); $("#graph-editor").elements.online_supplement.addEventListener("change", updateGraphOnlineSearchField);
+  $$('[data-close-graph-panel]').forEach((button) => button.addEventListener("click", clearGraphSelection)); document.addEventListener("keydown", (event) => { if (event.key === "Escape" && !$("#graph-side-panel").hidden) clearGraphSelection(); });
+  $$('[data-files-refresh]').forEach((button) => button.addEventListener("click", () => loadFiles(button.dataset.filesRefresh))); $("#save-view-file").addEventListener("click", saveViewFile); $("#preview-start").addEventListener("click", () => preview("start")); $("#preview-stop").addEventListener("click", () => preview("stop"));
+  $("#model-settings-close").addEventListener("click", () => modelSettingsDialog().close()); $("#model-settings-cancel").addEventListener("click", () => modelSettingsDialog().close()); $("#model-settings-save").addEventListener("click", saveModelSettings);
+  $("#reload-tools").addEventListener("click", loadTools); $("#run-tool").addEventListener("click", runSelectedTool); $("#reload-jobs").addEventListener("click", loadJobs);
+  $("#recall-form").addEventListener("submit", (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); createJob("recall", { query: data.get("query"), limit: Number(data.get("limit")) }); });
+  $("#ingest-form").addEventListener("submit", (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); createJob("ingest", { path: data.get("path"), scope_id: data.get("scope_id"), source_id: data.get("source_id"), source_revision: Number(data.get("source_revision")) }); });
+  $("#logout-button").addEventListener("click", logoutAuth);
+  $("#version-update").addEventListener("click", updateVersion);
+}
+
+bindEvents();
+Promise.allSettled([loadStatus(true), loadAuth(), loadVersion()]);