app.js

"use strict";

/* 01. Application model */
const STORAGE_KEY = "promptboost-release-v1";
const {
  SCHEMA_VERSION,
  PROVIDERS,
  PROVIDER_KEYS,
  extractVariableNames,
  fillVariables,
  adaptPrompt,
  normalizeStep,
  collectWorkflowVariableNames,
  compileWorkflow,
  validateImportPayload
} = globalThis.PromptBoostCore;

function uid(prefix = "id") {
  if (globalThis.crypto?.randomUUID) return `${prefix}-${crypto.randomUUID()}`;
  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`;
}

function nowIso() {
  return new Date().toISOString();
}

function clone(value) {
  return JSON.parse(JSON.stringify(value));
}

function emptyOutputs() {
  return { codex: "", claude: "", chatgpt: "", deepseek: "" };
}

function createWorkflow({ name, category = "未分类", description = "", prompt = "", tags = [], variables = {}, steps = [] } = {}) {
  const timestamp = nowIso();
  return {
    id: uid("workflow"),
    name: name || "未命名工作流",
    category,
    description,
    tags,
    prompt,
    variables,
    steps: steps.map((step, index) => normalizeStep(step, index, uid)),
    testOutputs: emptyOutputs(),
    versions: [],
    favorite: false,
    createdAt: timestamp,
    updatedAt: timestamp
  };
}

function seedData() {
  const codeReview = createWorkflow({
    name: "变更审查与修复计划",
    category: "程序开发",
    description: "把代码变更转化为按严重程度排序、可验证的审查结论。",
    tags: ["代码审查", "质量", "团队"],
    prompt: `你是一名严格、务实的高级代码审查工程师。

请审查以下变更：

{{变更内容}}

项目背景：
{{项目背景}}

重点检查：
- 正确性与边界条件
- 安全风险
- 性能退化
- 与现有架构和约定的冲突

输出要求：
1. 仅报告可以明确定位和触发的问题。
2. 按严重程度排序。
3. 每个问题包含位置、影响、触发条件和建议修复。
4. 如果没有实质问题，明确说明。`,
    variables: { "变更内容": "粘贴 diff 或相关代码", "项目背景": "说明技术栈、目标和已知约束" },
    steps: [
      { name: "分析变更", provider: "codex", prompt: "分析以下变更并识别可复现的问题：\n\n{{变更内容}}\n\n背景：{{项目背景}}", outputVariable: "审查发现" },
      { name: "生成修复计划", provider: "claude", prompt: "根据审查发现生成按优先级排序的修复与验证计划：\n\n{{审查发现}}", outputVariable: "修复计划", condition: "仅在 {{审查发现}} 非空时执行" }
    ]
  });

  const launchPlan = createWorkflow({
    name: "产品发布计划",
    category: "产品运营",
    description: "根据产品、受众和时间生成跨职能发布计划。",
    tags: ["发布", "增长", "计划"],
    prompt: `为 {{产品名称}} 制定一份可执行的产品发布计划。

目标用户：{{目标用户}}
核心价值：{{核心价值}}
发布日期：{{发布日期}}
可用资源：{{可用资源}}

计划必须覆盖：
- 发布目标和衡量指标
- 发布前、发布日、发布后的关键行动
- 内容、渠道、销售、客服和产品负责人
- 主要风险、依赖和应对措施
- 每项行动的负责人、截止时间和验收标准

请先指出仍缺失但会显著改变计划的信息，再给出基于当前信息的版本。`,
    variables: {
      "产品名称": "PromptBoost",
      "目标用户": "独立开发者和 AI 重度用户",
      "核心价值": "统一管理并适配多模型工作流",
      "发布日期": "填写日期",
      "可用资源": "填写团队、预算和渠道"
    },
    steps: [
      { name: "拆解发布约束", provider: "chatgpt", prompt: "梳理 {{产品名称}} 的目标用户、价值、日期和资源约束，列出缺失信息。", outputVariable: "发布约束" },
      { name: "生成发布路线图", provider: "deepseek", prompt: "基于以下约束生成按负责人和日期组织的发布路线图：\n\n{{发布约束}}", outputVariable: "发布路线图" }
    ]
  });

  const research = createWorkflow({
    name: "研究资料转决策简报",
    category: "研究分析",
    description: "把零散资料整理成带证据、风险和行动建议的简报。",
    tags: ["研究", "简报", "决策"],
    prompt: `将下面的研究材料整理成一份面向 {{决策者}} 的决策简报。

研究问题：{{研究问题}}

材料：
{{研究材料}}

要求：
- 先给出一句话结论。
- 区分事实、推断和未知项。
- 列出最关键的 3—5 条证据。
- 比较可选方案及其收益、成本和风险。
- 给出推荐方案、触发条件和下一步验证计划。
- 不确定的数字或来源必须明确标注，不得编造。`,
    variables: { "决策者": "产品负责人", "研究问题": "填写需要回答的问题", "研究材料": "粘贴资料、数据或访谈记录" },
    steps: [
      { name: "证据归纳", provider: "claude", prompt: "从材料中提取事实、推断、未知项和来源：\n\n{{研究材料}}", outputVariable: "证据摘要" },
      { name: "形成决策简报", provider: "chatgpt", prompt: "面向 {{决策者}}，结合 {{研究问题}} 和以下证据摘要形成决策简报：\n\n{{证据摘要}}", outputVariable: "决策简报" }
    ]
  });

  codeReview.favorite = true;
  return {
    schemaVersion: SCHEMA_VERSION,
    settings: { theme: "light" },
    activeWorkspaceId: "workspace-personal",
    activeWorkflowId: codeReview.id,
    ui: {
      activeProvider: "codex",
      editorTab: "prompt",
      previewTab: "preview",
      filter: "all",
      search: "",
      compareKind: "prompt",
      compareLeft: "current",
      compareRight: "",
      matrixKind: "prompt",
      category: "all"
    },
    workspaces: [
      {
        id: "workspace-personal",
        name: "个人工作区",
        type: "personal",
        createdAt: nowIso(),
        workflows: [codeReview, launchPlan, research]
      },
      {
        id: "workspace-team",
        name: "本地团队空间",
        type: "team",
        createdAt: nowIso(),
        workflows: []
      }
    ]
  };
}

function normalizeWorkflow(workflow) {
  const base = createWorkflow({ name: workflow?.name || "未命名工作流" });
  return {
    ...base,
    ...workflow,
    id: String(workflow?.id || base.id),
    name: String(workflow?.name || base.name),
    category: String(workflow?.category || "未分类"),
    description: String(workflow?.description || ""),
    prompt: String(workflow?.prompt || ""),
    tags: Array.isArray(workflow?.tags) ? workflow.tags.map(String).filter(Boolean) : [],
    variables: workflow?.variables && typeof workflow.variables === "object" && !Array.isArray(workflow.variables) ? workflow.variables : {},
    steps: Array.isArray(workflow?.steps) ? workflow.steps.slice(0, 100).map((step, index) => normalizeStep(step, index, uid)) : [],
    testOutputs: { ...emptyOutputs(), ...(workflow?.testOutputs || {}) },
    versions: Array.isArray(workflow?.versions) ? workflow.versions : [],
    favorite: Boolean(workflow?.favorite)
  };
}

function normalizeData(raw) {
  if (!raw || typeof raw !== "object") return seedData();
  const workspaces = Array.isArray(raw.workspaces)
    ? raw.workspaces.map(workspace => ({
        id: String(workspace?.id || uid("workspace")),
        name: String(workspace?.name || "未命名工作区"),
        type: workspace?.type === "team" ? "team" : "personal",
        createdAt: workspace?.createdAt || nowIso(),
        workflows: Array.isArray(workspace?.workflows) ? workspace.workflows.map(normalizeWorkflow) : []
      }))
    : [];

  const fallback = seedData();
  const normalized = {
    schemaVersion: SCHEMA_VERSION,
    settings: { ...fallback.settings, ...(raw.settings || {}) },
    activeWorkspaceId: raw.activeWorkspaceId,
    activeWorkflowId: raw.activeWorkflowId,
    ui: { ...fallback.ui, ...(raw.ui || {}) },
    workspaces: workspaces.length ? workspaces : fallback.workspaces
  };
  if (!normalized.workspaces.some(item => item.id === normalized.activeWorkspaceId)) {
    normalized.activeWorkspaceId = normalized.workspaces[0].id;
  }
  const workspace = normalized.workspaces.find(item => item.id === normalized.activeWorkspaceId);
  if (!workspace?.workflows.some(item => item.id === normalized.activeWorkflowId)) {
    normalized.activeWorkflowId = workspace?.workflows[0]?.id || "";
  }
  if (!PROVIDERS[normalized.ui.activeProvider]) normalized.ui.activeProvider = "codex";
  if (!["prompt", "variables", "flow", "versions"].includes(normalized.ui.editorTab)) normalized.ui.editorTab = "prompt";
  if (!["preview", "matrix", "flow", "compare"].includes(normalized.ui.previewTab)) normalized.ui.previewTab = "preview";
  if (!["all", "favorite", "recent"].includes(normalized.ui.filter)) normalized.ui.filter = "all";
  if (!["prompt", "output"].includes(normalized.ui.compareKind)) normalized.ui.compareKind = "prompt";
  if (!["prompt", "output"].includes(normalized.ui.matrixKind)) normalized.ui.matrixKind = "prompt";
  normalized.ui.category = String(normalized.ui.category || "all");
  return normalized;
}

function loadData() {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? normalizeData(JSON.parse(saved)) : seedData();
  } catch (error) {
    console.warn("Failed to load PromptBoost data:", error);
    return seedData();
  }
}

let data = loadData();
let saveTimer = 0;
let listRenderTimer = 0;

/* 02. DOM cache and state helpers */
const $ = id => document.getElementById(id);
const dom = {
  app: $("app"),
  sidebar: $("sidebar"),
  sidebarBackdrop: $("sidebarBackdrop"),
  sidebarToggle: $("sidebarToggle"),
  workspaceSelect: $("workspaceSelect"),
  newWorkspaceButton: $("newWorkspaceButton"),
  manageWorkspaceButton: $("manageWorkspaceButton"),
  sidebarMoreButton: $("sidebarMoreButton"),
  sidebarManageWorkspaceButton: $("sidebarManageWorkspaceButton"),
  sidebarImportButton: $("sidebarImportButton"),
  sidebarExportButton: $("sidebarExportButton"),
  sidebarShareButton: $("sidebarShareButton"),
  newWorkflowButton: $("newWorkflowButton"),
  emptyNewWorkflowButton: $("emptyNewWorkflowButton"),
  mainNewWorkflowButton: $("mainNewWorkflowButton"),
  searchInput: $("searchInput"),
  categoryFilter: $("categoryFilter"),
  workflowList: $("workflowList"),
  workflowEmpty: $("workflowEmpty"),
  saveStateLabel: $("saveStateLabel"),
  editorEmpty: $("editorEmpty"),
  editorContent: $("editorContent"),
  workflowNameInput: $("workflowNameInput"),
  workflowVersionLabel: $("workflowVersionLabel"),
  workflowUpdatedLabel: $("workflowUpdatedLabel"),
  favoriteButton: $("favoriteButton"),
  duplicateWorkflowButton: $("duplicateWorkflowButton"),
  deleteWorkflowButton: $("deleteWorkflowButton"),
  saveVersionButton: $("saveVersionButton"),
  paneSaveVersionButton: $("paneSaveVersionButton"),
  providerTabs: $("providerTabs"),
  categoryInput: $("categoryInput"),
  tagsInput: $("tagsInput"),
  descriptionInput: $("descriptionInput"),
  promptInput: $("promptInput"),
  promptStats: $("promptStats"),
  testOutputLabel: $("testOutputLabel"),
  testOutputInput: $("testOutputInput"),
  variableCountBadge: $("variableCountBadge"),
  stepCountBadge: $("stepCountBadge"),
  versionCountBadge: $("versionCountBadge"),
  variableFields: $("variableFields"),
  variablesEmpty: $("variablesEmpty"),
  refreshVariablesButton: $("refreshVariablesButton"),
  addStepButton: $("addStepButton"),
  stepList: $("stepList"),
  stepsEmpty: $("stepsEmpty"),
  versionList: $("versionList"),
  versionsEmpty: $("versionsEmpty"),
  previewCharCount: $("previewCharCount"),
  copyButton: $("copyButton"),
  providerMark: $("providerMark"),
  providerName: $("providerName"),
  providerDescription: $("providerDescription"),
  filledVariableBadge: $("filledVariableBadge"),
  previewOutput: $("previewOutput"),
  previewEmpty: $("previewEmpty"),
  matrixKindSelect: $("matrixKindSelect"),
  providerMatrix: $("providerMatrix"),
  copyMatrixButton: $("copyMatrixButton"),
  compiledFlow: $("compiledFlow"),
  compiledFlowEmpty: $("compiledFlowEmpty"),
  flowSummary: $("flowSummary"),
  copyFlowButton: $("copyFlowButton"),
  compareKindSelect: $("compareKindSelect"),
  compareLeftSelect: $("compareLeftSelect"),
  compareRightSelect: $("compareRightSelect"),
  compareLeftOutput: $("compareLeftOutput"),
  compareRightOutput: $("compareRightOutput"),
  compareEmpty: $("compareEmpty"),
  swapCompareButton: $("swapCompareButton"),
  importButton: $("importButton"),
  exportButton: $("exportButton"),
  shareButton: $("shareButton"),
  themeButton: $("themeButton"),
  fileInput: $("fileInput"),
  loadingOverlay: $("loadingOverlay"),
  toastRegion: $("toastRegion"),
  workflowDialog: $("workflowDialog"),
  workflowForm: $("workflowForm"),
  newWorkflowName: $("newWorkflowName"),
  newWorkflowCategory: $("newWorkflowCategory"),
  newWorkflowStarter: $("newWorkflowStarter"),
  workspaceDialog: $("workspaceDialog"),
  workspaceForm: $("workspaceForm"),
  newWorkspaceName: $("newWorkspaceName"),
  newWorkspaceType: $("newWorkspaceType"),
  workspaceManageDialog: $("workspaceManageDialog"),
  workspaceManageForm: $("workspaceManageForm"),
  manageWorkspaceName: $("manageWorkspaceName"),
  manageWorkspaceType: $("manageWorkspaceType"),
  deleteWorkspaceButton: $("deleteWorkspaceButton"),
  exportDialog: $("exportDialog"),
  exportTemplateButton: $("exportTemplateButton"),
  exportProviderPackButton: $("exportProviderPackButton"),
  exportWorkspaceButton: $("exportWorkspaceButton"),
  exportBackupButton: $("exportBackupButton"),
  versionDialog: $("versionDialog"),
  versionForm: $("versionForm"),
  versionNoteInput: $("versionNoteInput"),
  confirmDialog: $("confirmDialog"),
  confirmTitle: $("confirmTitle"),
  confirmMessage: $("confirmMessage"),
  confirmActionButton: $("confirmActionButton")
};

function activeWorkspace() {
  return data.workspaces.find(item => item.id === data.activeWorkspaceId) || null;
}

function activeWorkflow() {
  return activeWorkspace()?.workflows.find(item => item.id === data.activeWorkflowId) || null;
}

function escapeHtml(value) {
  return String(value ?? "")
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function formatRelativeTime(value) {
  const timestamp = new Date(value).getTime();
  if (!Number.isFinite(timestamp)) return "未知时间";
  const seconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
  if (seconds < 45) return "刚刚更新";
  if (seconds < 3600) return `${Math.round(seconds / 60)} 分钟前`;
  if (seconds < 86400) return `${Math.round(seconds / 3600)} 小时前`;
  if (seconds < 604800) return `${Math.round(seconds / 86400)} 天前`;
  return new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(timestamp);
}

function debounceListRender() {
  clearTimeout(listRenderTimer);
  listRenderTimer = window.setTimeout(renderWorkflowList, 120);
}

function persistSoon() {
  dom.saveStateLabel.textContent = "正在保存……";
  clearTimeout(saveTimer);
  saveTimer = window.setTimeout(persistNow, 280);
}

function persistNow() {
  clearTimeout(saveTimer);
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
    dom.saveStateLabel.textContent = "所有更改已保存";
  } catch (error) {
    dom.saveStateLabel.textContent = "保存失败";
    showToast("本地存储失败，可能已达到浏览器容量限制。", "error");
    console.error(error);
  }
}

function touchWorkflow(workflow = activeWorkflow()) {
  if (workflow) workflow.updatedAt = nowIso();
  persistSoon();
}

function showToast(message, type = "success", duration = 2600) {
  const toast = document.createElement("div");
  toast.className = `toast${type === "error" ? " is-error" : type === "warning" ? " is-warning" : ""}`;
  toast.textContent = message;
  dom.toastRegion.append(toast);
  window.setTimeout(() => {
    toast.classList.add("is-leaving");
    window.setTimeout(() => toast.remove(), 220);
  }, duration);
}

function setLoading(isLoading) {
  dom.app.setAttribute("aria-busy", String(isLoading));
  dom.loadingOverlay.hidden = !isLoading;
}

function openSidebar() {
  dom.sidebar.classList.add("is-open");
  dom.sidebarBackdrop.hidden = false;
  dom.sidebarToggle.setAttribute("aria-expanded", "true");
}

function closeSidebar() {
  dom.sidebar.classList.remove("is-open");
  dom.sidebarBackdrop.hidden = true;
  dom.sidebarToggle.setAttribute("aria-expanded", "false");
}

/* 03. Variable and snapshot helpers */
function syncVariableObject(workflow) {
  const names = collectWorkflowVariableNames(workflow);
  const next = {};
  names.forEach(name => { next[name] = String(workflow.variables?.[name] ?? ""); });
  workflow.variables = next;
  return names;
}

function snapshotWorkflow(workflow) {
  return {
    name: workflow.name,
    category: workflow.category,
    description: workflow.description,
    tags: clone(workflow.tags),
    prompt: workflow.prompt,
    variables: clone(workflow.variables),
    steps: clone(workflow.steps || []),
    testOutputs: clone(workflow.testOutputs)
  };
}

function snapshotAsWorkflow(version, fallbackWorkflow) {
  return {
    ...fallbackWorkflow,
    ...(version?.snapshot || {})
  };
}

/* 04. Rendering */
function renderWorkspaceSelect() {
  dom.workspaceSelect.innerHTML = data.workspaces.map(workspace => {
    const type = workspace.type === "team" ? "团队" : "个人";
    return `<option value="${escapeHtml(workspace.id)}">${escapeHtml(workspace.name)} · ${type}</option>`;
  }).join("");
  dom.workspaceSelect.value = data.activeWorkspaceId;
}

function renderCategoryFilter() {
  const workflows = activeWorkspace()?.workflows || [];
  const counts = workflows.reduce((map, workflow) => {
    const category = workflow.category || "未分类";
    map.set(category, (map.get(category) || 0) + 1);
    return map;
  }, new Map());
  const categories = [...counts.keys()].sort((a, b) => a.localeCompare(b, "zh-CN"));
  if (data.ui.category !== "all" && !counts.has(data.ui.category)) data.ui.category = "all";
  dom.categoryFilter.innerHTML = [
    `<button type="button" class="category-chip${data.ui.category === "all" ? " is-active" : ""}" data-category="all"><span>全部分类</span><b>${workflows.length}</b></button>`,
    ...categories.map(category => `<button type="button" class="category-chip${data.ui.category === category ? " is-active" : ""}" data-category="${escapeHtml(category)}"><span>${escapeHtml(category)}</span><b>${counts.get(category)}</b></button>`)
  ].join("");
}

function renderWorkflowList() {
  const workspace = activeWorkspace();
  const query = data.ui.search.trim().toLocaleLowerCase("zh-CN");
  const filter = data.ui.filter;
  const recentThreshold = Date.now() - 7 * 24 * 60 * 60 * 1000;
  const workflows = (workspace?.workflows || [])
    .filter(workflow => {
      if (filter === "favorite" && !workflow.favorite) return false;
      if (filter === "recent" && new Date(workflow.updatedAt).getTime() < recentThreshold) return false;
      if (data.ui.category !== "all" && workflow.category !== data.ui.category) return false;
      if (!query) return true;
      const haystack = [workflow.name, workflow.category, workflow.description, workflow.prompt, ...(workflow.tags || []), ...(workflow.steps || []).flatMap(step => [step.name, step.prompt, step.outputVariable])].join(" ").toLocaleLowerCase("zh-CN");
      return haystack.includes(query);
    })
    .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));

  dom.workflowList.innerHTML = workflows.map(workflow => {
    const initials = (workflow.category || workflow.name || "WF").replace(/\s/g, "").slice(0, 2);
    return `<button class="workflow-card${workflow.id === data.activeWorkflowId ? " is-active" : ""}" type="button" role="listitem" data-workflow-id="${escapeHtml(workflow.id)}">
      <span class="workflow-icon">${escapeHtml(initials)}</span>
      <span class="workflow-card-copy"><strong>${escapeHtml(workflow.name)}</strong><span>${escapeHtml(workflow.category)} · ${workflow.versions.length} 个版本</span></span>
      <svg class="workflow-card-star${workflow.favorite ? " is-favorite" : ""}" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9L12 3Z"/></svg>
    </button>`;
  }).join("");

  const isEmpty = workflows.length === 0;
  dom.workflowList.hidden = isEmpty;
  dom.workflowEmpty.hidden = !isEmpty;
}

function renderProviderTabs() {
  dom.providerTabs.querySelectorAll("[data-provider]").forEach(button => {
    const active = button.dataset.provider === data.ui.activeProvider;
    button.classList.toggle("is-active", active);
    button.setAttribute("aria-selected", String(active));
  });
}

function renderEditorTabs() {
  document.querySelectorAll("[data-editor-tab]").forEach(button => {
    const active = button.dataset.editorTab === data.ui.editorTab;
    button.classList.toggle("is-active", active);
    button.setAttribute("aria-selected", String(active));
  });
  document.querySelectorAll("[data-pane]").forEach(pane => {
    pane.classList.toggle("is-active", pane.dataset.pane === data.ui.editorTab);
  });
}

function renderPreviewTabs() {
  document.querySelectorAll("[data-preview-tab]").forEach(button => {
    const active = button.dataset.previewTab === data.ui.previewTab;
    button.classList.toggle("is-active", active);
    button.setAttribute("aria-selected", String(active));
  });
  document.querySelectorAll("[data-preview-pane]").forEach(pane => {
    pane.classList.toggle("is-active", pane.dataset.previewPane === data.ui.previewTab);
  });
}

function renderPromptStats() {
  const prompt = dom.promptInput.value;
  dom.promptStats.textContent = `${prompt.replace(/\s/g, "").length} 字 · ${prompt ? prompt.split("\n").length : 0} 行`;
}

function renderVariables() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const names = syncVariableObject(workflow);
  dom.variableCountBadge.textContent = String(names.length);
  dom.variableFields.innerHTML = names.map((name, index) => `
    <label class="variable-row">
      <span class="variable-name"><strong>{{${escapeHtml(name)}}}</strong><span>变量 ${index + 1}</span></span>
      <input type="text" data-variable-name="${escapeHtml(name)}" value="${escapeHtml(workflow.variables[name])}" placeholder="填写 ${escapeHtml(name)}">
    </label>
  `).join("");
  dom.variableFields.hidden = names.length === 0;
  dom.variablesEmpty.hidden = names.length !== 0;
  renderPreview();
}

function renderSteps() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const steps = workflow.steps || [];
  dom.stepCountBadge.textContent = String(steps.length);
  dom.stepList.innerHTML = steps.map((step, index) => `
    <article class="step-card" data-step-id="${escapeHtml(step.id)}">
      <header class="step-header">
        <span class="step-index">${index + 1}</span>
        <input class="step-name-input" data-step-field="name" value="${escapeHtml(step.name)}" maxlength="80" aria-label="步骤名称">
        <label class="step-enabled"><input type="checkbox" data-step-field="enabled"${step.enabled !== false ? " checked" : ""}>启用</label>
        <div class="step-actions">
          <button class="icon-button" type="button" data-step-action="up" title="上移" aria-label="上移"${index === 0 ? " disabled" : ""}><svg viewBox="0 0 24 24"><path d="m6 15 6-6 6 6"/></svg></button>
          <button class="icon-button" type="button" data-step-action="down" title="下移" aria-label="下移"${index === steps.length - 1 ? " disabled" : ""}><svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></button>
          <button class="icon-button danger-hover" type="button" data-step-action="delete" title="删除步骤" aria-label="删除步骤"><svg viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13"/></svg></button>
        </div>
      </header>
      <div class="step-grid">
        <label class="field-group"><span>目标模型</span><select data-step-field="provider">${PROVIDER_KEYS.map(key => `<option value="${key}"${step.provider === key ? " selected" : ""}>${PROVIDERS[key].name}</option>`).join("")}</select></label>
        <label class="field-group"><span>输出变量</span><input data-step-field="outputVariable" value="${escapeHtml(step.outputVariable)}" maxlength="80" placeholder="例如：分析结果"></label>
      </div>
      <label class="field-group"><span>步骤提示词</span><textarea data-step-field="prompt" rows="6" placeholder="支持 {{变量名}} 和上一步输出变量">${escapeHtml(step.prompt)}</textarea></label>
      <label class="field-group"><span>执行条件（可选）</span><input data-step-field="condition" value="${escapeHtml(step.condition)}" maxlength="300" placeholder="例如：仅当 {{分析结果}} 非空时执行"></label>
    </article>
  `).join("");
  dom.stepList.hidden = steps.length === 0;
  dom.stepsEmpty.hidden = steps.length !== 0;
}

function renderVersions() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const versions = [...workflow.versions].sort((a, b) => b.number - a.number);
  dom.versionCountBadge.textContent = String(versions.length);
  dom.versionList.innerHTML = versions.map(version => `
    <article class="version-card" data-version-id="${escapeHtml(version.id)}">
      <span class="version-number">v${version.number}</span>
      <div class="version-copy"><strong>${escapeHtml(version.note || `版本 ${version.number}`)}</strong><span>${escapeHtml(formatRelativeTime(version.createdAt))} · ${escapeHtml(version.provider || "全部模型")}</span></div>
      <div class="version-actions">
        <button class="button button-secondary" type="button" data-version-action="restore">恢复</button>
        <button class="icon-button danger-hover" type="button" data-version-action="delete" aria-label="删除版本" title="删除版本"><svg viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13"/></svg></button>
      </div>
    </article>
  `).join("");
  dom.versionList.hidden = versions.length === 0;
  dom.versionsEmpty.hidden = versions.length !== 0;
  renderCompareSelectors();
}

function renderEditor() {
  const workflow = activeWorkflow();
  const hasWorkflow = Boolean(workflow);
  dom.editorEmpty.hidden = hasWorkflow;
  dom.editorContent.hidden = !hasWorkflow;
  if (!workflow) {
    renderPreview();
    return;
  }

  dom.workflowNameInput.value = workflow.name;
  dom.categoryInput.value = workflow.category;
  dom.tagsInput.value = workflow.tags.join(", ");
  dom.descriptionInput.value = workflow.description;
  dom.promptInput.value = workflow.prompt;
  dom.testOutputInput.value = workflow.testOutputs[data.ui.activeProvider] || "";
  dom.testOutputLabel.textContent = `${PROVIDERS[data.ui.activeProvider].name} 测试输出`;
  dom.workflowVersionLabel.textContent = `v${workflow.versions.length + 1} 草稿`;
  dom.workflowUpdatedLabel.textContent = formatRelativeTime(workflow.updatedAt);
  dom.favoriteButton.classList.toggle("is-active", workflow.favorite);
  dom.favoriteButton.setAttribute("aria-pressed", String(workflow.favorite));
  renderPromptStats();
  renderProviderTabs();
  renderEditorTabs();
  renderVariables();
  renderSteps();
  renderVersions();
}

function renderMatrix() {
  const workflow = activeWorkflow();
  dom.matrixKindSelect.value = data.ui.matrixKind || "prompt";
  if (!workflow) {
    dom.providerMatrix.innerHTML = "";
    dom.copyMatrixButton.disabled = true;
    return;
  }
  const kind = data.ui.matrixKind || "prompt";
  dom.providerMatrix.innerHTML = PROVIDER_KEYS.map(key => {
    const value = kind === "output" ? workflow.testOutputs[key] || "（尚未保存测试输出）" : adaptPrompt(key, workflow);
    return `<article class="matrix-card"><header><span class="provider-mark">${PROVIDERS[key].mark}</span><div><strong>${PROVIDERS[key].name}</strong><span>${PROVIDERS[key].description}</span></div></header><pre tabindex="0">${escapeHtml(value)}</pre><button class="button button-secondary" type="button" data-copy-provider="${key}">复制</button></article>`;
  }).join("");
  dom.copyMatrixButton.disabled = false;
}

function flowExportText(workflow = activeWorkflow()) {
  const compiled = compileWorkflow(workflow);
  return compiled.map(step => `## ${step.order}. ${step.name} · ${PROVIDERS[step.provider].name}\n\n条件：${step.condition || "始终执行"}\n输出：{{${step.outputVariable}}}\n\n${step.prompt}`).join("\n\n---\n\n");
}

function renderCompiledFlow() {
  const workflow = activeWorkflow();
  const compiled = compileWorkflow(workflow);
  dom.flowSummary.textContent = `${compiled.length} 个启用步骤`;
  dom.compiledFlow.innerHTML = compiled.map(step => `<article class="compiled-step"><header><span>${step.order}</span><div><strong>${escapeHtml(step.name)}</strong><small>${escapeHtml(PROVIDERS[step.provider].name)} → {{${escapeHtml(step.outputVariable)}}}</small></div></header>${step.condition ? `<p class="compiled-condition">条件：${escapeHtml(step.condition)}</p>` : ""}<pre>${escapeHtml(step.prompt)}</pre></article>`).join("");
  dom.compiledFlow.hidden = compiled.length === 0;
  dom.compiledFlowEmpty.hidden = compiled.length !== 0;
  dom.copyFlowButton.disabled = compiled.length === 0;
}

function renderPreview() {
  const workflow = activeWorkflow();
  const profile = PROVIDERS[data.ui.activeProvider];
  dom.providerMark.textContent = profile.mark;
  dom.providerName.textContent = profile.name;
  dom.providerDescription.textContent = profile.description;
  if (!workflow) {
    dom.previewOutput.textContent = "";
    dom.previewOutput.hidden = true;
    dom.previewEmpty.hidden = false;
    dom.previewCharCount.textContent = "0 字";
    dom.copyButton.disabled = true;
    dom.filledVariableBadge.textContent = "0/0 变量";
    renderMatrix();
    renderCompiledFlow();
    renderCompare();
    return;
  }

  const output = adaptPrompt(data.ui.activeProvider, workflow);
  const names = collectWorkflowVariableNames(workflow);
  const filled = names.filter(name => String(workflow.variables[name] || "").trim()).length;
  dom.previewOutput.textContent = output;
  dom.previewOutput.hidden = !output;
  dom.previewEmpty.hidden = Boolean(output);
  dom.previewCharCount.textContent = `${output.replace(/\s/g, "").length} 字`;
  dom.copyButton.disabled = !output;
  dom.filledVariableBadge.textContent = `${filled}/${names.length} 变量`;
  renderMatrix();
  renderCompiledFlow();
  renderCompare();
}

function compareOptionLabel(key, workflow) {
  if (key === "current") return "当前草稿";
  const version = workflow.versions.find(item => item.id === key);
  return version ? `v${version.number} · ${version.note || "未命名版本"}` : "未知版本";
}

function renderCompareSelectors() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const options = ["current", ...[...workflow.versions].sort((a, b) => b.number - a.number).map(item => item.id)];
  if (!options.includes(data.ui.compareLeft)) data.ui.compareLeft = "current";
  if (!options.includes(data.ui.compareRight) || data.ui.compareRight === data.ui.compareLeft) {
    data.ui.compareRight = options.find(item => item !== data.ui.compareLeft) || "";
  }
  const html = options.map(key => `<option value="${escapeHtml(key)}">${escapeHtml(compareOptionLabel(key, workflow))}</option>`).join("");
  dom.compareLeftSelect.innerHTML = html;
  dom.compareRightSelect.innerHTML = html;
  dom.compareLeftSelect.value = data.ui.compareLeft;
  dom.compareRightSelect.value = data.ui.compareRight;
  dom.compareKindSelect.value = data.ui.compareKind;
  renderCompare();
}

function compareValue(key, kind, workflow) {
  if (!key) return "";
  const source = key === "current"
    ? workflow
    : snapshotAsWorkflow(workflow.versions.find(item => item.id === key), workflow);
  if (kind === "output") return source.testOutputs?.[data.ui.activeProvider] || "（该版本未保存测试输出）";
  return adaptPrompt(data.ui.activeProvider, source);
}

function renderCompare() {
  const workflow = activeWorkflow();
  const canCompare = Boolean(workflow?.versions.length);
  dom.compareEmpty.hidden = canCompare;
  document.querySelector(".compare-toolbar").hidden = !canCompare;
  document.querySelector(".compare-grid").hidden = !canCompare;
  if (!canCompare) {
    dom.compareLeftOutput.textContent = "";
    dom.compareRightOutput.textContent = "";
    return;
  }
  dom.compareLeftOutput.textContent = compareValue(data.ui.compareLeft, data.ui.compareKind, workflow);
  dom.compareRightOutput.textContent = compareValue(data.ui.compareRight, data.ui.compareKind, workflow);
}

function renderFilters() {
  document.querySelectorAll("[data-filter]").forEach(button => {
    button.classList.toggle("is-active", button.dataset.filter === data.ui.filter);
  });
  dom.searchInput.value = data.ui.search;
  renderCategoryFilter();
}

function applyTheme() {
  const theme = data.settings.theme === "dark" ? "dark" : "light";
  document.documentElement.dataset.theme = theme;
  dom.themeButton.setAttribute("aria-label", theme === "dark" ? "切换到浅色主题" : "切换到深色主题");
  dom.themeButton.title = theme === "dark" ? "切换到浅色主题" : "切换到深色主题";
}

function renderAll() {
  applyTheme();
  renderWorkspaceSelect();
  renderFilters();
  renderWorkflowList();
  renderEditor();
  renderPreviewTabs();
}

/* 05. Workspace and workflow operations */
function selectWorkspace(workspaceId) {
  const workspace = data.workspaces.find(item => item.id === workspaceId);
  if (!workspace) return;
  data.activeWorkspaceId = workspace.id;
  data.activeWorkflowId = workspace.workflows[0]?.id || "";
  data.ui.search = "";
  data.ui.filter = "all";
  data.ui.category = "all";
  data.ui.compareLeft = "current";
  data.ui.compareRight = "";
  persistNow();
  renderAll();
  closeSidebar();
}

function selectWorkflow(workflowId) {
  if (!activeWorkspace()?.workflows.some(item => item.id === workflowId)) return;
  data.activeWorkflowId = workflowId;
  data.ui.compareLeft = "current";
  data.ui.compareRight = "";
  persistSoon();
  renderWorkflowList();
  renderEditor();
  closeSidebar();
}

function openWorkflowDialog() {
  dom.newWorkflowName.value = "";
  dom.newWorkflowCategory.value = activeWorkflow()?.category || "未分类";
  dom.newWorkflowStarter.value = activeWorkflow() ? "blank" : "blank";
  dom.newWorkflowStarter.querySelector('[value="duplicate"]').disabled = !activeWorkflow();
  dom.workflowDialog.showModal();
  window.setTimeout(() => dom.newWorkflowName.focus(), 50);
}

function createNewWorkflow(name, category, starter) {
  const workspace = activeWorkspace();
  if (!workspace) return;
  let workflow;
  if (starter === "duplicate" && activeWorkflow()) {
    workflow = normalizeWorkflow({ ...clone(activeWorkflow()), id: uid("workflow"), name, category, versions: [], createdAt: nowIso(), updatedAt: nowIso() });
  } else {
    workflow = createWorkflow({ name, category });
  }
  workspace.workflows.unshift(workflow);
  data.activeWorkflowId = workflow.id;
  data.ui.editorTab = "prompt";
  data.ui.previewTab = "preview";
  persistNow();
  renderAll();
  showToast("工作流已创建");
}

function duplicateActiveWorkflow() {
  const workspace = activeWorkspace();
  const workflow = activeWorkflow();
  if (!workspace || !workflow) return;
  const copyWorkflow = normalizeWorkflow({
    ...clone(workflow),
    id: uid("workflow"),
    name: `${workflow.name} 副本`,
    versions: clone(workflow.versions),
    favorite: false,
    createdAt: nowIso(),
    updatedAt: nowIso()
  });
  workspace.workflows.unshift(copyWorkflow);
  data.activeWorkflowId = copyWorkflow.id;
  persistNow();
  renderAll();
  showToast("工作流副本已创建");
}

async function deleteActiveWorkflow() {
  const workspace = activeWorkspace();
  const workflow = activeWorkflow();
  if (!workspace || !workflow) return;
  const confirmed = await confirmAction("删除工作流", `确定删除“${workflow.name}”吗？该操作会同时删除其本地版本记录。`);
  if (!confirmed) return;
  const index = workspace.workflows.findIndex(item => item.id === workflow.id);
  workspace.workflows.splice(index, 1);
  data.activeWorkflowId = workspace.workflows[Math.max(0, index - 1)]?.id || workspace.workflows[0]?.id || "";
  persistNow();
  renderAll();
  showToast("工作流已删除", "warning");
}

function addWorkflowStep() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const index = workflow.steps.length;
  workflow.steps.push(normalizeStep({
    name: `步骤 ${index + 1}`,
    provider: data.ui.activeProvider,
    prompt: index === 0 ? workflow.prompt : "根据上一步的 {{输出结果}} 继续完成任务。",
    outputVariable: index === 0 ? "输出结果" : `步骤${index + 1}输出`
  }, index, uid));
  syncVariableObject(workflow);
  touchWorkflow(workflow);
  renderSteps();
  renderVariables();
  renderCompiledFlow();
  showToast("步骤已添加");
}

function updateWorkflowStep(stepId, field, value) {
  const workflow = activeWorkflow();
  const step = workflow?.steps.find(item => item.id === stepId);
  if (!workflow || !step || !["name", "provider", "prompt", "outputVariable", "condition", "enabled"].includes(field)) return;
  step[field] = field === "enabled" ? Boolean(value) : String(value);
  if (field === "prompt" || field === "condition") syncVariableObject(workflow);
  touchWorkflow(workflow);
  dom.stepCountBadge.textContent = String(workflow.steps.length);
  renderVariables();
  renderCompiledFlow();
  renderMatrix();
}

async function deleteWorkflowStep(stepId) {
  const workflow = activeWorkflow();
  const step = workflow?.steps.find(item => item.id === stepId);
  if (!workflow || !step) return;
  const confirmed = await confirmAction("删除流程步骤", `确定删除“${step.name}”吗？`);
  if (!confirmed) return;
  workflow.steps = workflow.steps.filter(item => item.id !== stepId);
  syncVariableObject(workflow);
  touchWorkflow(workflow);
  renderSteps();
  renderVariables();
  showToast("步骤已删除", "warning");
}

function moveWorkflowStep(stepId, direction) {
  const workflow = activeWorkflow();
  const index = workflow?.steps.findIndex(item => item.id === stepId) ?? -1;
  const nextIndex = index + direction;
  if (!workflow || index < 0 || nextIndex < 0 || nextIndex >= workflow.steps.length) return;
  [workflow.steps[index], workflow.steps[nextIndex]] = [workflow.steps[nextIndex], workflow.steps[index]];
  touchWorkflow(workflow);
  renderSteps();
  renderCompiledFlow();
}

/* 06. Version operations */
function openVersionDialog() {
  if (!activeWorkflow()) return;
  dom.versionNoteInput.value = "";
  dom.versionDialog.showModal();
  window.setTimeout(() => dom.versionNoteInput.focus(), 50);
}

function saveVersion(note) {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const nextNumber = workflow.versions.reduce((max, item) => Math.max(max, Number(item.number) || 0), 0) + 1;
  workflow.versions.push({
    id: uid("version"),
    number: nextNumber,
    note: note || `版本 ${nextNumber}`,
    provider: "全部模型",
    createdAt: nowIso(),
    snapshot: snapshotWorkflow(workflow)
  });
  workflow.updatedAt = nowIso();
  data.ui.compareRight = workflow.versions.at(-1).id;
  persistNow();
  renderEditor();
  renderPreview();
  showToast(`已保存 v${nextNumber}`);
}

async function restoreVersion(versionId) {
  const workflow = activeWorkflow();
  const version = workflow?.versions.find(item => item.id === versionId);
  if (!workflow || !version) return;
  const confirmed = await confirmAction("恢复版本", `使用 v${version.number} 覆盖当前草稿？现有版本历史会保留。`);
  if (!confirmed) return;
  const snapshot = clone(version.snapshot);
  workflow.name = snapshot.name;
  workflow.category = snapshot.category;
  workflow.description = snapshot.description;
  workflow.tags = snapshot.tags;
  workflow.prompt = snapshot.prompt;
  workflow.variables = snapshot.variables;
  workflow.steps = Array.isArray(snapshot.steps) ? snapshot.steps.map((step, index) => normalizeStep(step, index, uid)) : [];
  workflow.testOutputs = { ...emptyOutputs(), ...snapshot.testOutputs };
  workflow.updatedAt = nowIso();
  persistNow();
  renderAll();
  showToast(`已恢复 v${version.number}`);
}

async function deleteVersion(versionId) {
  const workflow = activeWorkflow();
  const version = workflow?.versions.find(item => item.id === versionId);
  if (!workflow || !version) return;
  const confirmed = await confirmAction("删除版本", `确定删除 v${version.number} 吗？`);
  if (!confirmed) return;
  workflow.versions = workflow.versions.filter(item => item.id !== versionId);
  if (data.ui.compareLeft === versionId) data.ui.compareLeft = "current";
  if (data.ui.compareRight === versionId) data.ui.compareRight = "";
  touchWorkflow(workflow);
  renderVersions();
  showToast(`v${version.number} 已删除`, "warning");
}

/* 07. Import, export, sharing */
function downloadBlob(content, filename, type = "application/json;charset=utf-8") {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = filename;
  document.body.append(anchor);
  anchor.click();
  anchor.remove();
  URL.revokeObjectURL(url);
}

function safeFilename(value) {
  return String(value || "promptboost")
    .trim()
    .replace(/[\\/:*?"<>|]+/g, "-")
    .replace(/\s+/g, "-")
    .slice(0, 80) || "promptboost";
}

function exportWorkspace() {
  const workspace = activeWorkspace();
  if (!workspace) return;
  const payload = {
    kind: "promptboost-workspace",
    schemaVersion: SCHEMA_VERSION,
    exportedAt: nowIso(),
    workspace: clone(workspace)
  };
  downloadBlob(JSON.stringify(payload, null, 2), `${safeFilename(workspace.name)}.promptboost.json`);
  showToast("工作区已导出");
}

function exportTemplate(workflow = activeWorkflow()) {
  if (!workflow) return;
  const payload = {
    kind: "promptboost-template",
    schemaVersion: SCHEMA_VERSION,
    exportedAt: nowIso(),
    workflow: clone(workflow)
  };
  downloadBlob(JSON.stringify(payload, null, 2), `${safeFilename(workflow.name)}.pboost`);
  showToast("模板文件已导出");
}

function exportProviderPack(workflow = activeWorkflow()) {
  if (!workflow) return;
  const sections = PROVIDER_KEYS.map(key => `# ${PROVIDERS[key].name}\n\n${adaptPrompt(key, workflow)}`);
  const flow = flowExportText(workflow);
  const content = [`# ${workflow.name}`, workflow.description, ...sections, flow ? `# Workflow steps\n\n${flow}` : ""].filter(Boolean).join("\n\n---\n\n");
  downloadBlob(content, `${safeFilename(workflow.name)}-provider-pack.md`, "text/markdown;charset=utf-8");
  showToast("四模型配置包已导出");
}

function exportBackup() {
  const payload = {
    ...clone(data),
    kind: "promptboost-backup",
    schemaVersion: SCHEMA_VERSION,
    exportedAt: nowIso()
  };
  downloadBlob(JSON.stringify(payload, null, 2), `PromptBoost-backup-${new Date().toISOString().slice(0, 10)}.json`);
  showToast("完整备份已导出");
}

function openExportDialog() {
  const hasWorkflow = Boolean(activeWorkflow());
  dom.exportTemplateButton.disabled = !hasWorkflow;
  dom.exportProviderPackButton.disabled = !hasWorkflow;
  dom.exportDialog.showModal();
}

function encodeSharePayload(payload) {
  const bytes = new TextEncoder().encode(JSON.stringify(payload));
  let binary = "";
  bytes.forEach(byte => { binary += String.fromCharCode(byte); });
  return btoa(binary).replaceAll("+", "-").replaceAll("/", "_").replace(/=+$/g, "");
}

function decodeSharePayload(encoded) {
  const base64 = encoded.replaceAll("-", "+").replaceAll("_", "/") + "===".slice((encoded.length + 3) % 4);
  const binary = atob(base64);
  const bytes = Uint8Array.from(binary, character => character.charCodeAt(0));
  return JSON.parse(new TextDecoder().decode(bytes));
}

async function shareTemplate() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const payload = { kind: "promptboost-share", schemaVersion: SCHEMA_VERSION, workflow: clone(workflow) };
  const code = encodeSharePayload(payload);
  if (location.protocol === "http:" || location.protocol === "https:") {
    const url = `${location.href.split("#")[0]}#share=${code}`;
    if (url.length > 12000) {
      exportTemplate(workflow);
      showToast("模板数据较大，已改为导出模板文件。", "warning");
      return;
    }
    await copyText(url);
    showToast("模板分享链接已复制");
  } else {
    exportTemplate(workflow);
    showToast("离线环境无法生成公共网址，已导出可转发模板文件。", "warning", 3600);
  }
}

async function importFile(file) {
  if (!file) return;
  setLoading(true);
  try {
    if (file.size > 5 * 1024 * 1024) throw new Error("文件超过 5 MB 安全限制");
    const payload = JSON.parse(await file.text());
    const validation = validateImportPayload(payload);
    if (!validation.ok) throw new Error(validation.errors.join("；"));
    if (validation.kind === "promptboost-workspace" && payload.workspace) {
      const importedWorkspace = {
        ...payload.workspace,
        id: uid("workspace"),
        name: `${payload.workspace.name || "导入工作区"}（导入）`,
        createdAt: nowIso(),
        workflows: Array.isArray(payload.workspace.workflows) ? payload.workspace.workflows.map(item => normalizeWorkflow({ ...item, id: uid("workflow") })) : []
      };
      data.workspaces.push(importedWorkspace);
      data.activeWorkspaceId = importedWorkspace.id;
      data.activeWorkflowId = importedWorkspace.workflows[0]?.id || "";
      persistNow();
      renderAll();
      showToast("工作区导入成功");
      return;
    }
    if ((validation.kind === "promptboost-template" || validation.kind === "promptboost-share") && payload.workflow) {
      importWorkflowPayload(payload.workflow);
      showToast("模板导入成功");
      return;
    }
    if (validation.kind === "promptboost-backup") {
      const confirmed = await confirmAction("恢复完整备份", "该文件包含完整 PromptBoost 数据。是否用它替换当前本地数据？");
      if (!confirmed) return;
      data = normalizeData(payload);
      persistNow();
      renderAll();
      showToast("完整备份已恢复");
      return;
    }
    throw new Error("无法识别的 PromptBoost 文件格式");
  } catch (error) {
    console.error(error);
    showToast(`导入失败：${error.message}`, "error", 4200);
  } finally {
    setLoading(false);
    dom.fileInput.value = "";
  }
}

function importWorkflowPayload(source) {
  const workspace = activeWorkspace() || data.workspaces[0];
  const workflow = normalizeWorkflow({
    ...clone(source),
    id: uid("workflow"),
    name: `${source.name || "共享模板"}（导入）`,
    createdAt: nowIso(),
    updatedAt: nowIso()
  });
  workspace.workflows.unshift(workflow);
  data.activeWorkspaceId = workspace.id;
  data.activeWorkflowId = workflow.id;
  persistNow();
  renderAll();
}

async function importSharedHash() {
  const match = location.hash.match(/^#share=(.+)$/);
  if (!match) return;
  try {
    const payload = decodeSharePayload(match[1]);
    const validation = validateImportPayload(payload);
    if (!validation.ok || validation.kind !== "promptboost-share") throw new Error(validation.errors.join("；") || "分享数据格式错误");
    const confirmed = await confirmAction("导入共享模板", `是否将“${payload.workflow.name || "未命名模板"}”导入当前工作区？`);
    if (!confirmed) {
      history.replaceState(null, "", location.href.split("#")[0]);
      return;
    }
    importWorkflowPayload(payload.workflow);
    history.replaceState(null, "", location.href.split("#")[0]);
    showToast("共享模板已导入当前工作区");
  } catch (error) {
    history.replaceState(null, "", location.href.split("#")[0]);
    showToast(`分享链接无效：${error.message}`, "error", 4200);
  }
}

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed";
    textarea.style.opacity = "0";
    document.body.append(textarea);
    textarea.select();
    const copied = document.execCommand("copy");
    textarea.remove();
    if (!copied) throw new Error("浏览器拒绝访问剪贴板");
  }
}

async function copyPreview() {
  const text = dom.previewOutput.textContent;
  if (!text) return;
  try {
    await copyText(text);
    showToast(`${PROVIDERS[data.ui.activeProvider].name} 提示词已复制`);
  } catch (error) {
    showToast(`复制失败：${error.message}`, "error");
  }
}

async function copyProviderMatrix() {
  const workflow = activeWorkflow();
  if (!workflow) return;
  const kind = data.ui.matrixKind || "prompt";
  const text = PROVIDER_KEYS.map(key => {
    const value = kind === "output" ? workflow.testOutputs[key] || "（尚未保存测试输出）" : adaptPrompt(key, workflow);
    return `## ${PROVIDERS[key].name}\n\n${value}`;
  }).join("\n\n---\n\n");
  await copyText(text);
  showToast("四模型矩阵已复制");
}

async function copyCompiledFlow() {
  const text = flowExportText();
  if (!text) return;
  await copyText(text);
  showToast("流程配置已复制");
}

function openWorkspaceManager() {
  const workspace = activeWorkspace();
  if (!workspace) return;
  dom.manageWorkspaceName.value = workspace.name;
  dom.manageWorkspaceType.value = workspace.type;
  dom.deleteWorkspaceButton.disabled = data.workspaces.length <= 1;
  dom.workspaceManageDialog.showModal();
}

async function deleteActiveWorkspace() {
  const workspace = activeWorkspace();
  if (!workspace || data.workspaces.length <= 1) return;
  const confirmed = await confirmAction("删除工作区", `确定删除“${workspace.name}”及其中 ${workspace.workflows.length} 个工作流吗？`);
  if (!confirmed) return;
  data.workspaces = data.workspaces.filter(item => item.id !== workspace.id);
  data.activeWorkspaceId = data.workspaces[0].id;
  data.activeWorkflowId = data.workspaces[0].workflows[0]?.id || "";
  dom.workspaceManageDialog.close("delete");
  persistNow();
  renderAll();
  showToast("工作区已删除", "warning");
}

/* 08. Dialog and confirmation helpers */
function confirmAction(title, message, actionLabel = "确认") {
  dom.confirmTitle.textContent = title;
  dom.confirmMessage.textContent = message;
  dom.confirmActionButton.textContent = actionLabel;
  dom.confirmDialog.showModal();
  return new Promise(resolve => {
    const onClose = () => {
      dom.confirmDialog.removeEventListener("close", onClose);
      resolve(dom.confirmDialog.returnValue === "confirm");
    };
    dom.confirmDialog.addEventListener("close", onClose);
  });
}

function closeDialogById(id) {
  const dialog = document.getElementById(id);
  if (dialog?.open) dialog.close("cancel");
}

/* 09. Event handlers */
function bindEvents() {
  dom.sidebarToggle.addEventListener("click", () => dom.sidebar.classList.contains("is-open") ? closeSidebar() : openSidebar());
  dom.sidebarBackdrop.addEventListener("click", closeSidebar);
  dom.workspaceSelect.addEventListener("change", event => selectWorkspace(event.target.value));
  dom.newWorkspaceButton.addEventListener("click", () => {
    dom.newWorkspaceName.value = "";
    dom.newWorkspaceType.value = "personal";
    dom.workspaceDialog.showModal();
    window.setTimeout(() => dom.newWorkspaceName.focus(), 50);
  });
  dom.sidebarMoreButton.addEventListener("click", () => {
    dom.newWorkspaceName.value = "";
    dom.newWorkspaceType.value = "personal";
    dom.workspaceDialog.showModal();
    window.setTimeout(() => dom.newWorkspaceName.focus(), 50);
  });
  dom.manageWorkspaceButton.addEventListener("click", openWorkspaceManager);
  dom.sidebarManageWorkspaceButton.addEventListener("click", openWorkspaceManager);

  [dom.newWorkflowButton, dom.emptyNewWorkflowButton, dom.mainNewWorkflowButton].forEach(button => button.addEventListener("click", openWorkflowDialog));
  dom.workflowList.addEventListener("click", event => {
    const card = event.target.closest("[data-workflow-id]");
    if (card) selectWorkflow(card.dataset.workflowId);
  });
  dom.searchInput.addEventListener("input", event => {
    data.ui.search = event.target.value;
    persistSoon();
    renderWorkflowList();
  });
  document.querySelectorAll("[data-filter]").forEach(button => button.addEventListener("click", () => {
    data.ui.filter = button.dataset.filter;
    persistSoon();
    renderFilters();
    renderWorkflowList();
  }));
  dom.categoryFilter.addEventListener("click", event => {
    const button = event.target.closest("[data-category]");
    if (!button) return;
    data.ui.category = button.dataset.category;
    persistSoon();
    renderCategoryFilter();
    renderWorkflowList();
  });

  dom.providerTabs.addEventListener("click", event => {
    const button = event.target.closest("[data-provider]");
    if (!button) return;
    data.ui.activeProvider = button.dataset.provider;
    persistSoon();
    renderProviderTabs();
    const workflow = activeWorkflow();
    dom.testOutputInput.value = workflow?.testOutputs[data.ui.activeProvider] || "";
    dom.testOutputLabel.textContent = `${PROVIDERS[data.ui.activeProvider].name} 测试输出`;
    renderPreview();
  });

  document.querySelectorAll("[data-editor-tab]").forEach(button => button.addEventListener("click", () => {
    data.ui.editorTab = button.dataset.editorTab;
    persistSoon();
    renderEditorTabs();
  }));
  document.querySelectorAll("[data-preview-tab]").forEach(button => button.addEventListener("click", () => {
    data.ui.previewTab = button.dataset.previewTab;
    persistSoon();
    renderPreviewTabs();
    if (data.ui.previewTab === "compare") renderCompareSelectors();
    if (data.ui.previewTab === "matrix") renderMatrix();
    if (data.ui.previewTab === "flow") renderCompiledFlow();
  }));

  dom.workflowNameInput.addEventListener("input", event => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.name = event.target.value || "未命名工作流";
    touchWorkflow(workflow);
    debounceListRender();
  });
  dom.categoryInput.addEventListener("input", event => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.category = event.target.value;
    touchWorkflow(workflow);
    debounceListRender();
    renderCategoryFilter();
    renderPreview();
  });
  dom.tagsInput.addEventListener("input", event => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.tags = event.target.value.split(/[,，]/).map(item => item.trim()).filter(Boolean).slice(0, 20);
    touchWorkflow(workflow);
    debounceListRender();
    renderPreview();
  });
  dom.descriptionInput.addEventListener("input", event => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.description = event.target.value;
    touchWorkflow(workflow);
    renderPreview();
  });
  dom.promptInput.addEventListener("input", event => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.prompt = event.target.value;
    syncVariableObject(workflow);
    touchWorkflow(workflow);
    renderPromptStats();
    dom.variableCountBadge.textContent = String(Object.keys(workflow.variables).length);
    renderPreview();
  });
  dom.promptInput.addEventListener("blur", renderVariables);
  dom.testOutputInput.addEventListener("input", event => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.testOutputs[data.ui.activeProvider] = event.target.value;
    touchWorkflow(workflow);
    renderCompare();
  });
  dom.variableFields.addEventListener("input", event => {
    const input = event.target.closest("[data-variable-name]");
    const workflow = activeWorkflow();
    if (!input || !workflow) return;
    workflow.variables[input.dataset.variableName] = input.value;
    touchWorkflow(workflow);
    renderPreview();
  });
  dom.addStepButton.addEventListener("click", addWorkflowStep);
  dom.stepList.addEventListener("input", event => {
    const card = event.target.closest("[data-step-id]");
    const field = event.target.dataset.stepField;
    if (!card || !field || event.target.type === "checkbox") return;
    updateWorkflowStep(card.dataset.stepId, field, event.target.value);
  });
  dom.stepList.addEventListener("change", event => {
    const card = event.target.closest("[data-step-id]");
    const field = event.target.dataset.stepField;
    if (!card || !field) return;
    updateWorkflowStep(card.dataset.stepId, field, event.target.type === "checkbox" ? event.target.checked : event.target.value);
  });
  dom.stepList.addEventListener("click", event => {
    const card = event.target.closest("[data-step-id]");
    const action = event.target.closest("[data-step-action]")?.dataset.stepAction;
    if (!card || !action) return;
    if (action === "delete") deleteWorkflowStep(card.dataset.stepId);
    if (action === "up") moveWorkflowStep(card.dataset.stepId, -1);
    if (action === "down") moveWorkflowStep(card.dataset.stepId, 1);
  });
  dom.refreshVariablesButton.addEventListener("click", () => {
    renderVariables();
    persistSoon();
    showToast("变量列表已重新识别");
  });

  dom.favoriteButton.addEventListener("click", () => {
    const workflow = activeWorkflow();
    if (!workflow) return;
    workflow.favorite = !workflow.favorite;
    touchWorkflow(workflow);
    dom.favoriteButton.classList.toggle("is-active", workflow.favorite);
    dom.favoriteButton.setAttribute("aria-pressed", String(workflow.favorite));
    renderWorkflowList();
  });
  dom.duplicateWorkflowButton.addEventListener("click", duplicateActiveWorkflow);
  dom.deleteWorkflowButton.addEventListener("click", deleteActiveWorkflow);
  [dom.saveVersionButton, dom.paneSaveVersionButton].forEach(button => button.addEventListener("click", openVersionDialog));
  dom.versionList.addEventListener("click", event => {
    const card = event.target.closest("[data-version-id]");
    const action = event.target.closest("[data-version-action]")?.dataset.versionAction;
    if (!card || !action) return;
    if (action === "restore") restoreVersion(card.dataset.versionId);
    if (action === "delete") deleteVersion(card.dataset.versionId);
  });

  dom.compareKindSelect.addEventListener("change", event => {
    data.ui.compareKind = event.target.value;
    persistSoon();
    renderCompare();
  });
  dom.compareLeftSelect.addEventListener("change", event => {
    data.ui.compareLeft = event.target.value;
    persistSoon();
    renderCompare();
  });
  dom.compareRightSelect.addEventListener("change", event => {
    data.ui.compareRight = event.target.value;
    persistSoon();
    renderCompare();
  });
  dom.swapCompareButton.addEventListener("click", () => {
    [data.ui.compareLeft, data.ui.compareRight] = [data.ui.compareRight, data.ui.compareLeft];
    persistSoon();
    renderCompareSelectors();
  });
  dom.matrixKindSelect.addEventListener("change", event => {
    data.ui.matrixKind = event.target.value;
    persistSoon();
    renderMatrix();
  });
  dom.copyMatrixButton.addEventListener("click", () => copyProviderMatrix().catch(error => showToast(`复制失败：${error.message}`, "error")));
  dom.copyFlowButton.addEventListener("click", () => copyCompiledFlow().catch(error => showToast(`复制失败：${error.message}`, "error")));
  dom.providerMatrix.addEventListener("click", event => {
    const button = event.target.closest("[data-copy-provider]");
    const workflow = activeWorkflow();
    if (!button || !workflow) return;
    const key = button.dataset.copyProvider;
    const value = data.ui.matrixKind === "output" ? workflow.testOutputs[key] || "" : adaptPrompt(key, workflow);
    copyText(value).then(() => showToast(`${PROVIDERS[key].name} 内容已复制`)).catch(error => showToast(`复制失败：${error.message}`, "error"));
  });

  dom.copyButton.addEventListener("click", copyPreview);
  dom.importButton.addEventListener("click", () => dom.fileInput.click());
  dom.exportButton.addEventListener("click", openExportDialog);
  dom.shareButton.addEventListener("click", shareTemplate);
  dom.sidebarImportButton.addEventListener("click", () => dom.fileInput.click());
  dom.sidebarExportButton.addEventListener("click", openExportDialog);
  dom.sidebarShareButton.addEventListener("click", shareTemplate);
  dom.fileInput.addEventListener("change", event => importFile(event.target.files?.[0]));
  dom.themeButton.addEventListener("click", () => {
    data.settings.theme = data.settings.theme === "dark" ? "light" : "dark";
    applyTheme();
    persistNow();
  });
  dom.exportTemplateButton.addEventListener("click", () => { dom.exportDialog.close("template"); exportTemplate(); });
  dom.exportProviderPackButton.addEventListener("click", () => { dom.exportDialog.close("provider-pack"); exportProviderPack(); });
  dom.exportWorkspaceButton.addEventListener("click", () => { dom.exportDialog.close("workspace"); exportWorkspace(); });
  dom.exportBackupButton.addEventListener("click", () => { dom.exportDialog.close("backup"); exportBackup(); });

  dom.workflowForm.addEventListener("submit", event => {
    event.preventDefault();
    const name = dom.newWorkflowName.value.trim();
    if (!name) {
      dom.newWorkflowName.focus();
      return;
    }
    dom.workflowDialog.close("submit");
    createNewWorkflow(name, dom.newWorkflowCategory.value.trim() || "未分类", dom.newWorkflowStarter.value);
  });
  dom.workspaceForm.addEventListener("submit", event => {
    event.preventDefault();
    const name = dom.newWorkspaceName.value.trim();
    if (!name) {
      dom.newWorkspaceName.focus();
      return;
    }
    const workspace = { id: uid("workspace"), name, type: dom.newWorkspaceType.value, createdAt: nowIso(), workflows: [] };
    data.workspaces.push(workspace);
    data.activeWorkspaceId = workspace.id;
    data.activeWorkflowId = "";
    dom.workspaceDialog.close("submit");
    persistNow();
    renderAll();
    showToast("工作区已创建");
  });
  dom.workspaceManageForm.addEventListener("submit", event => {
    event.preventDefault();
    const workspace = activeWorkspace();
    const name = dom.manageWorkspaceName.value.trim();
    if (!workspace || !name) return;
    workspace.name = name;
    workspace.type = dom.manageWorkspaceType.value === "team" ? "team" : "personal";
    dom.workspaceManageDialog.close("submit");
    persistNow();
    renderAll();
    showToast("工作区已更新");
  });
  dom.deleteWorkspaceButton.addEventListener("click", deleteActiveWorkspace);
  dom.versionForm.addEventListener("submit", event => {
    event.preventDefault();
    dom.versionDialog.close("submit");
    saveVersion(dom.versionNoteInput.value.trim());
  });
  document.querySelectorAll("[data-close-dialog]").forEach(button => button.addEventListener("click", () => closeDialogById(button.dataset.closeDialog)));

  window.addEventListener("keydown", event => {
    const modifier = event.ctrlKey || event.metaKey;
    if (event.key === "/" && !modifier && !event.altKey) {
      const targetTag = document.activeElement?.tagName;
      if (!["INPUT", "TEXTAREA", "SELECT"].includes(targetTag)) {
        event.preventDefault();
        openSidebar();
        dom.searchInput.focus();
      }
    }
    if (modifier && event.key.toLowerCase() === "s") {
      event.preventDefault();
      openVersionDialog();
    }
    if (modifier && event.shiftKey && event.key.toLowerCase() === "c") {
      event.preventDefault();
      copyPreview();
    }
    if (event.key === "Escape") closeSidebar();
  });

  window.addEventListener("storage", event => {
    if (event.key !== STORAGE_KEY || !event.newValue) return;
    try {
      data = normalizeData(JSON.parse(event.newValue));
      renderAll();
      showToast("已同步另一个标签页中的本地更改");
    } catch (error) {
      console.warn("Cross-tab sync failed:", error);
    }
  });
}

/* 10. Initialization */
function initialize() {
  bindEvents();
  renderAll();
  importSharedHash();
  dom.app.setAttribute("aria-busy", "false");
  if ("serviceWorker" in navigator && /^https?:$/.test(location.protocol)) {
    navigator.serviceWorker.register("./sw.js").catch(error => console.warn("Service worker registration failed:", error));
  }
}

window.addEventListener("error", event => {
  console.error(event.error || event.message);
  showToast("页面发生未预期错误，请导出数据后刷新重试。", "error", 5000);
});

window.addEventListener("unhandledrejection", event => {
  console.error(event.reason);
  showToast("操作失败，请重试。", "error", 4200);
});

initialize();