codex-context-map 0.1.0

package/site/app.js

@@ -0,0 +1,581 @@
+/* All workspace processing happens in this page. No fetch, telemetry or storage. */
+const $ = (id) => document.getElementById(id);
+const esc = (value) =>
+  String(value).replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+let snapshot = validateSnapshot(initialData.snapshot);
+let isDemo = initialData.demo;
+let target = snapshot.defaultTarget;
+let budget = snapshot.settings.maxBytes;
+let fallbackNames = [...snapshot.settings.fallbackNames];
+let compareTarget =
+  snapshot.directories.find((d) => d === "apps/web") ??
+  snapshot.directories.find((d) => d !== target) ??
+  target;
+let view = "map";
+let language = "en";
+let result;
+const english = Object.fromEntries(
+  [...document.querySelectorAll("[data-i18n]")].map((el) => [
+    el.dataset.i18n,
+    el.innerHTML,
+  ]),
+);
+const chinese = {
+  local: "在你的设备上运行",
+  eyebrow: "看清 AGENTS.md 的作用范围",
+  headline: "看清你的 Agent 读到了什么<span>。</span>",
+  subhead: "追踪指令来源，找出覆盖关系，定位截断位置。",
+  quickstart: "查看你自己的项目",
+  quickhint: "无需账号，无需 API Key，零运行时依赖。",
+  demo: "演示",
+  importJson: "打开快照",
+  export: "导出 JSON",
+  importFolder: "打开项目文件夹",
+  directories: "项目目录",
+  hasRules: "有指令文件",
+  hasOverride: "有覆盖文件",
+  inherits: "没有本地指令",
+  privacyTitle: "文件留在当前设备。",
+  privacy: "仅读取指令文件，不上传，也不写入浏览器存储。",
+  launchFrom: "模拟从此目录启动 CODEX",
+  map: "指令地图",
+  compare: "对比目录",
+  try: "试试这些场景",
+  scenarioOverride: "01 · 隐藏的覆盖",
+  scenarioBudget: "02 · 超出长度预算",
+  scenarioEmpty: "03 · 空覆盖文件",
+  loaded: "贡献内容的文件",
+  loadedHint: "按发现顺序排列",
+  shadowed: "被遮盖的文件",
+  shadowedHint: "同目录中的低优先级文件",
+  budgetLabel: "项目指令字节预算",
+  limit: "字节上限",
+  defaultLimit: "恢复 32 KiB",
+  fallbackSettings: "备用文件名",
+  fallbackLabel: "按优先级排列，用逗号分隔",
+  apply: "应用",
+  fallbackHint: "先设置文件名，再打开文件夹。添加新文件名后需重新导入。",
+  budgetHint: "按内容字节计算 · 全局指令单独统计",
+  chain: "指令加载链",
+  chainHint: "较大范围 → 当前目录",
+  compareTo: "对比另一目录",
+  preview: "合并后的指令预览",
+  copy: "复制文本",
+  readOnly: "只读",
+  boundaries: "这张地图的适用范围",
+  boundaryText:
+    "这是对单个可信项目的静态发现模拟。它不读取运行中的会话，不判断自然语言冲突，也不包含系统提示、技能、MCP、任务及账号指令或额外环境。请使预算、备用文件名和根目录与实际配置一致。更深目录的文件追加到加载链中，不会删除此前文件。",
+  boundaryImport:
+    "文件夹导入将所选目录作为显式项目根目录。命令行检测最近的 .git 标记，包括嵌套仓库，并跳过符号链接、给出提示。浏览器文件夹选择器不提供符号链接元数据。全局文件仅由命令行在使用 --global 时读取。",
+  semanticsLink: "查看有版本依据的解析规则与限制 ↗",
+  independent: "独立项目，与 OpenAI 无隶属关系。",
+  feedback: "发现行为不一致？反馈问题 ↗",
+};
+const say = (en, zh) => (language === "zh" ? zh : en);
+const fmt = (value) =>
+  value.toLocaleString(language === "zh" ? "zh-CN" : "en-US");
+const statusLabels = {
+  loaded: ["Loaded", "已加载"],
+  shadowed: ["Shadowed", "被遮盖"],
+  partial: ["Cut off", "已截断"],
+  excluded: ["No budget", "预算耗尽"],
+  empty: ["Empty", "空文件"],
+  outside: ["Other directory", "范围以外"],
+  unrecognized: ["Not configured", "未配置"],
+};
+const label = (status) =>
+  statusLabels[status]?.[language === "zh" ? 1 : 0] ?? status;
+function announce(message, error = false) {
+  $("status").textContent = message;
+  $("status").className = `status-message visible${error ? " error" : ""}`;
+}
+function applyLanguage() {
+  document.documentElement.lang = language === "zh" ? "zh-CN" : "en";
+  for (const el of document.querySelectorAll("[data-i18n]"))
+    el.innerHTML =
+      language === "zh"
+        ? (chinese[el.dataset.i18n] ?? english[el.dataset.i18n])
+        : english[el.dataset.i18n];
+  $("language").textContent = language === "zh" ? "EN" : "中文";
+  $("search").placeholder = say("Find a directory…", "搜索目录…");
+  $("search").setAttribute("aria-label", say("Find a directory", "搜索目录"));
+  $("budget").setAttribute(
+    "aria-label",
+    say("Project byte limit", "项目字节上限"),
+  );
+  $("compare-target").setAttribute(
+    "aria-label",
+    say("Comparison directory", "对比目录"),
+  );
+}
+function renderTree() {
+  const query = $("search").value.trim().toLowerCase();
+  const dirs = snapshot.directories.filter((d) =>
+    d.toLowerCase().includes(query),
+  );
+  const shown = dirs.slice(0, 200);
+  $("dir-count").textContent = snapshot.directories.length;
+  $("tree").innerHTML =
+    shown
+      .map((d) => {
+        const local = snapshot.files.filter(
+          (f) => f.scope === "project" && parentPath(f.path) === d,
+        );
+        const color = local.some(
+          (f) => baseName(f.path) === "AGENTS.override.md",
+        )
+          ? "amber"
+          : local.length
+            ? "teal"
+            : "gray";
+        const depth = d === "." ? 0 : d.split("/").length;
+        return `<button class="tree-button${d === target ? " active" : ""}" data-target="${esc(d)}" title="${esc(d)}" aria-label="${esc(d)}"${d === target ? ' aria-current="location"' : ""} style="--indent:${10 + Math.min(depth, 8) * 12}px"><span class="dir-icon" aria-hidden="true">${d === "." ? "▦" : "▱"}</span><span class="dir-name">${esc(d === "." ? snapshot.projectName : baseName(d))}</span><i class="dot ${color}" aria-hidden="true"></i></button>`;
+      })
+      .join("") ||
+    `<p class="small-note">${say("No matching directories.", "没有匹配目录。")}</p>`;
+  $("tree-limit").textContent =
+    dirs.length > 200
+      ? say(
+          `Showing 200 of ${dirs.length}. Search to narrow the list.`,
+          `显示 ${dirs.length} 个目录中的前 200 个，请搜索定位。`,
+        )
+      : "";
+}
+function fileReason(file) {
+  if (file.status === "empty" && file.truncated)
+    return say(
+      "Only a whitespace prefix fits. Later content is cut off; this file adds no text or budget usage.",
+      "只读到了空白前缀，后续内容已被截去。此文件不贡献文本，也不消耗预算。",
+    );
+  if (file.status === "partial")
+    return say(
+      `${fmt(file.bytes - file.usedBytes)} bytes lost at this file. Later files have no remaining budget.`,
+      `此文件截去了 ${fmt(file.bytes - file.usedBytes)} 字节，后续文件没有剩余预算。`,
+    );
+  if (file.status === "excluded")
+    return say(
+      "An earlier file consumed the project budget. This file contributes no text.",
+      "此前的文件已耗尽项目预算，此文件没有贡献文本。",
+    );
+  if (file.status === "empty")
+    return say(
+      "The first existing filename wins here, even when its content is empty.",
+      "这里先选取存在的最高优先级文件，即使其内容为空。",
+    );
+  if (file.scope === "global")
+    return say(
+      "Global guidance, outside the project byte budget.",
+      "全局指令，不占用项目字节预算。",
+    );
+  const lower = result.records.filter((f) => f.shadowedBy === file.id);
+  if (lower.length)
+    return say(
+      `Selected before ${lower.map((f) => baseName(f.path)).join(", ")} in this directory.`,
+      `在此目录中优先于 ${lower.map((f) => baseName(f.path)).join("、")}。`,
+    );
+  return file.directory === result.chain[0]
+    ? say(
+        "Project boundary. Broader guidance enters first.",
+        "项目边界，较大范围的指令先加载。",
+      )
+    : say(
+        "Added after parent guidance. Parent files remain in the chain.",
+        "在上级指令之后追加，上级文件仍在加载链中。",
+      );
+}
+function renderChain() {
+  $("chain").innerHTML =
+    result.selected
+      .map(
+        (f, i) =>
+          `<article class="chain-entry"><span class="chain-number${f.status !== "loaded" ? " warn" : ""}">${String(i + 1).padStart(2, "0")}</span><div class="file-card"><div class="file-top"><span class="file-icon" aria-hidden="true">≡</span><span class="file-name">${esc((f.scope === "global" ? "$CODEX_HOME/" : "") + f.path)}</span><span class="chip ${f.status}">${label(f.status)}</span><span class="file-bytes">${fmt(f.usedBytes)} / ${fmt(f.bytes)} B</span></div><div class="file-summary">${esc(fileReason(f))}</div><details class="file-source"><summary>${say("Inspect original file", "查看原始文件")}</summary><pre>${esc(f.content || say("(empty file)", "（空文件）"))}</pre></details></div></article>`,
+      )
+      .join("") ||
+    `<div class="empty-state">${say("No instruction file is discovered from this directory. Add an AGENTS.md at the project root or in this directory, then import again.", "此目录未发现指令文件。在项目根目录或此目录添加 AGENTS.md，再重新导入。")}</div>`;
+  const ignored = result.records.filter((f) =>
+    ["shadowed", "outside", "unrecognized"].includes(f.status),
+  );
+  $("ignored-panel").hidden = !ignored.length;
+  $("ignored-title").textContent = say(
+    `${ignored.length} other files · shadowed or outside this chain`,
+    `另外 ${ignored.length} 个文件：被遮盖或不在当前加载链内`,
+  );
+  $("ignored").innerHTML = ignored
+    .map(
+      (f) =>
+        `<div class="ignored-item"><span>${esc((f.scope === "global" ? "$CODEX_HOME/" : "") + f.path)}</span><span>${esc(label(f.status))}${f.shadowedBy ? ` · ${esc(f.shadowedBy.replace(/^(project|global):/, ""))}` : ""}</span></div>`,
+    )
+    .join("");
+}
+function renderFindings() {
+  const html = [];
+  if (result.hasCutoff)
+    html.push(
+      `<div class="finding"><span aria-hidden="true">⚑</span><div><b>${say("Some instructions never make it into the preview.", "部分指令未进入预览。")}</b> ${say("Increase the byte limit to see the missing content, then check your Codex configuration.", "提高字节上限可查看缺失内容，再核对实际 Codex 配置。")}</div></div>`,
+    );
+  for (const finding of result.findings.filter(
+    (f) => f.type === "empty-override",
+  ))
+    html.push(
+      `<div class="finding"><span aria-hidden="true">⚑</span><div><b>${say("An empty override still shadows its sibling.", "空覆盖文件仍会遮盖同目录文件。")}</b> <code>${esc(finding.path)}</code> ${say("is selected before the regular file in the pinned Codex source model.", "在所依据的 Codex 源码模型中被优先选中。")}</div></div>`,
+    );
+  if (!snapshot.projectRoots.some((p) => result.chain.includes(p)))
+    html.push(
+      `<div class="finding info">${say("No project marker: only the launch directory is searched.", "没有项目标记：只检查启动目录。")}</div>`,
+    );
+  for (const warning of snapshot.warnings)
+    html.push(`<div class="finding info">${esc(warning)}</div>`);
+  $("findings").innerHTML = html.join("");
+}
+function renderComparison() {
+  const other = resolveContext(snapshot, compareTarget, {
+    maxBytes: budget,
+    fallbackNames,
+  });
+  const diff = compareContexts(result, other);
+  const titles = {
+    added: say("Added in comparison directory", "对比目录新增的指令"),
+    removed: say("No longer included", "对比目录不再包含的指令"),
+    shared: say("Shared instructions", "共同包含的指令"),
+    changed: say("Same source, different cutoff", "相同来源，不同截断位置"),
+  };
+  $("comparison").innerHTML = `<div class="compare-grid">${Object.entries(
+    titles,
+  )
+    .map(
+      ([key, title]) =>
+        `<article class="compare-card ${key}"><h4>${esc(title)} <span class="tag">${diff[key].length}</span></h4><ul>${diff[key].map((p) => `<li>${key === "added" ? "+ " : key === "removed" ? "− " : ""}${esc(p)}</li>`).join("") || `<li>${say("None", "无")}</li>`}</ul></article>`,
+    )
+    .join(
+      "",
+    )}</div><p class="compare-delta">${say("Project content change", "项目指令字节变化")}: ${diff.byteDelta >= 0 ? "+" : ""}${fmt(diff.byteDelta)} B · ${say("Both directories use the same settings.", "两个目录使用相同设置。")}</p>`;
+}
+function renderPreview() {
+  const lines = result.text.split("\n");
+  $("preview-content").innerHTML = result.text
+    ? lines
+        .slice(0, 500)
+        .map(
+          (line, i) =>
+            `<div class="code-line${/^#{1,6} /.test(line) ? " heading" : ""}"><span class="line-number" aria-hidden="true">${i + 1}</span><span class="line-text">${esc(line) || " "}</span></div>`,
+        )
+        .join("")
+    : `<div class="empty-state">${say("No instruction text is included.", "没有包含任何指令文本。")}</div>`;
+  $("preview-footnote").textContent =
+    (lines.length > 500
+      ? say(
+          "First 500 lines shown · Copy includes all text · ",
+          "显示前 500 行 · 复制包含全文 · ",
+        )
+      : "") +
+    say(
+      `Global: ${result.globalBytes ? `${fmt(result.globalBytes)} B` : "not included"}`,
+      `全局指令：${result.globalBytes ? `${fmt(result.globalBytes)} 字节` : "未包含"}`,
+    );
+  $("copy-preview").disabled = !result.text;
+}
+function render() {
+  result = resolveContext(snapshot, target, {
+    maxBytes: budget,
+    fallbackNames,
+  });
+  $("project-name").textContent = snapshot.projectName;
+  $("workspace-kind").textContent = isDemo
+    ? say("DEMO WORKSPACE", "演示项目")
+    : say("LOCAL SNAPSHOT", "本地快照");
+  $("scenarios").hidden = !isDemo;
+  $("current-path").innerHTML =
+    `<span style="color:var(--muted)">${esc(snapshot.projectName)}</span>${
+      target === "."
+        ? ""
+        : target
+            .split("/")
+            .map((p) => `<span class="path-slash">/</span>${esc(p)}`)
+            .join("")
+    }`;
+  $("metric-loaded").textContent = String(result.loadedCount).padStart(2, "0");
+  $("metric-shadowed").textContent = String(result.shadowedCount).padStart(
+    2,
+    "0",
+  );
+  $("metric-budget").innerHTML =
+    `${fmt(result.usedBytes)} <span>/ ${fmt(budget)} B</span>`;
+  $("meter-fill").style.width =
+    `${budget ? (result.usedBytes / budget) * 100 : 0}%`;
+  $("meter-fill").className = result.hasCutoff ? "cutoff" : "";
+  $("budget").value = budget;
+  $("fallbacks").value = fallbackNames.join(", ");
+  $("map-panel").hidden = view !== "map";
+  $("compare-panel").hidden = view !== "compare";
+  $("map-view").classList.toggle("selected", view === "map");
+  $("compare-view").classList.toggle("selected", view === "compare");
+  $("map-view").setAttribute("aria-pressed", String(view === "map"));
+  $("compare-view").setAttribute("aria-pressed", String(view === "compare"));
+  $("compare-target").innerHTML = snapshot.directories
+    .map((d) => `<option value="${esc(d)}">${esc(d)}</option>`)
+    .join("");
+  $("compare-target").value = compareTarget;
+  renderTree();
+  renderChain();
+  renderFindings();
+  renderPreview();
+  if (view === "compare") renderComparison();
+}
+function loadSnapshot(input, demo = false) {
+  const validated = validateSnapshot(input);
+  snapshot = validated;
+  isDemo = demo;
+  target = snapshot.defaultTarget;
+  budget = snapshot.settings.maxBytes;
+  fallbackNames = [...snapshot.settings.fallbackNames];
+  compareTarget =
+    snapshot.directories.find((d) => d === "apps/web" && d !== target) ??
+    snapshot.directories.find((d) => d !== target) ??
+    target;
+  $("search").value = "";
+  view = "map";
+  render();
+}
+async function copy(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    announce(say("Copied to clipboard.", "已复制到剪贴板。"));
+  } catch {
+    announce(
+      say(
+        "Clipboard is unavailable. Select the preview text and copy it manually.",
+        "剪贴板不可用，请选择预览中的文本后手动复制。",
+      ),
+      true,
+    );
+  }
+}
+function downloadJson() {
+  const data = {
+    ...snapshot,
+    defaultTarget: target,
+    settings: { maxBytes: budget, fallbackNames },
+  };
+  const url = URL.createObjectURL(
+    new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }),
+  );
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "codex-context-map.json";
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 3000);
+  announce(
+    say(
+      "Exported locally. The snapshot includes instruction text and relative paths; review it before sharing.",
+      "已导出到本地。快照包含指令内容和相对路径，分享前请检查。",
+    ),
+  );
+}
+async function importFolder(list) {
+  if (!list.length) return;
+  if (list.length > 100000)
+    throw new Error(
+      say(
+        "Too many files. Select a smaller project folder.",
+        "文件数量过多，请选择更小的项目目录。",
+      ),
+    );
+  const names = candidateNames(fallbackNames);
+  const dirs = new Set(["."]),
+    roots = new Set(["."]),
+    files = [];
+  const skip = new Set([
+    ".git",
+    ".hg",
+    ".svn",
+    "node_modules",
+    ".venv",
+    "venv",
+    "__pycache__",
+    ".next",
+    ".nuxt",
+    "coverage",
+    "dist",
+    "build",
+    "target",
+    "vendor",
+    ".codex-context-map",
+    ".artifacts",
+  ]);
+  let total = 0;
+  const folderName = list[0].webkitRelativePath.split("/")[0];
+  for (const file of list) {
+    const parts = file.webkitRelativePath.split("/").slice(1);
+    const gitAt = parts.indexOf(".git");
+    if (gitAt >= 0) {
+      roots.add(parts.slice(0, gitAt).join("/") || ".");
+      continue;
+    }
+    if (parts.slice(0, -1).some((p) => skip.has(p))) continue;
+    const relative = normalizePath(parts.join("/"));
+    for (const dir of ancestors(parentPath(relative))) dirs.add(dir);
+    if (baseName(relative) === ".git") roots.add(parentPath(relative));
+    if (dirs.size > MAX_DIRECTORIES)
+      throw new Error(
+        "Too many directories. Use the CLI with a smaller --root.",
+      );
+    if (!names.includes(baseName(relative))) continue;
+    if (
+      files.length >= MAX_FILES ||
+      file.size > MAX_BUDGET ||
+      total + file.size > MAX_SNAPSHOT_BYTES
+    )
+      throw new Error("Instruction files exceed import size limits.");
+    total += file.size;
+    let content;
+    try {
+      content = new TextDecoder("utf-8", {
+        fatal: true,
+        ignoreBOM: true,
+      }).decode(await file.arrayBuffer());
+    } catch {
+      throw new Error(`Instruction file is not valid UTF-8: ${relative}`);
+    }
+    files.push({ path: relative, scope: "project", content });
+  }
+  for (const root of roots) for (const dir of ancestors(root)) dirs.add(dir);
+  loadSnapshot({
+    schemaVersion: 1,
+    projectName: folderName,
+    directories: [...dirs],
+    projectRoots: [...roots],
+    files,
+    defaultTarget: ".",
+    settings: { maxBytes: budget, fallbackNames },
+  });
+  announce(
+    say(
+      `Read ${files.length} instruction files locally. The selected folder is the project root. Empty directories are not exposed by the folder picker.`,
+      `已在本地读取 ${files.length} 个指令文件。所选文件夹作为项目根目录。文件夹选择器不提供空目录。`,
+    ),
+  );
+}
+$("tree").addEventListener("click", (event) => {
+  const button = event.target.closest("[data-target]");
+  if (button) {
+    target = button.dataset.target;
+    render();
+  }
+});
+$("search").addEventListener("input", renderTree);
+$("budget").addEventListener("change", () => {
+  try {
+    if (!/^\d+$/.test($("budget").value))
+      throw new Error("Use an integer byte limit.");
+    budget = validateBudget(Number($("budget").value));
+    render();
+  } catch (error) {
+    announce(error.message, true);
+    $("budget").value = budget;
+  }
+});
+$("reset-budget").addEventListener("click", () => {
+  budget = DEFAULT_BUDGET;
+  render();
+});
+$("apply-fallbacks").addEventListener("click", () => {
+  try {
+    const next = $("fallbacks")
+      .value.split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    candidateNames(next);
+    fallbackNames = next;
+    render();
+    announce(
+      say(
+        "Fallback order updated. Re-open the folder to read any newly configured filenames.",
+        "备用文件优先级已更新。请重新打开文件夹以读取新增文件名。",
+      ),
+    );
+  } catch (error) {
+    announce(error.message, true);
+  }
+});
+$("scenarios").addEventListener("click", (event) => {
+  const scenario = event.target.closest("[data-scenario]")?.dataset.scenario;
+  if (!scenario) return;
+  target = scenario === "empty" ? "tools/lab" : "services/payments";
+  budget = scenario === "budget" ? 1024 : DEFAULT_BUDGET;
+  view = "map";
+  render();
+});
+$("map-view").addEventListener("click", () => {
+  view = "map";
+  render();
+});
+$("compare-view").addEventListener("click", () => {
+  view = "compare";
+  render();
+});
+$("compare-target").addEventListener("change", () => {
+  compareTarget = $("compare-target").value;
+  renderComparison();
+});
+$("language").addEventListener("click", () => {
+  language = language === "en" ? "zh" : "en";
+  applyLanguage();
+  render();
+});
+$("copy-command").addEventListener("click", () =>
+  copy("npx codex-context-map . --html context-map.html"),
+);
+$("copy-preview").addEventListener("click", () => copy(result.text));
+$("reset").addEventListener("click", () => {
+  loadSnapshot(createDemo(), true);
+  announce(
+    say(
+      "Fictional demo workspace loaded. Your imported data has been replaced in memory.",
+      "已加载虚构演示项目，内存中的导入数据已替换。",
+    ),
+  );
+});
+$("export").addEventListener("click", downloadJson);
+$("import-folder").addEventListener("click", () => {
+  $("folder-input").value = "";
+  $("folder-input").click();
+});
+$("import-json").addEventListener("click", () => {
+  $("json-input").value = "";
+  $("json-input").click();
+});
+$("folder-input").addEventListener("change", async (event) => {
+  try {
+    $("import-folder").disabled = true;
+    await importFolder([...event.target.files]);
+  } catch (error) {
+    announce(error.message, true);
+  } finally {
+    $("import-folder").disabled = false;
+    event.target.value = "";
+  }
+});
+$("json-input").addEventListener("change", async (event) => {
+  try {
+    const file = event.target.files[0];
+    if (!file) return;
+    if (file.size > MAX_SNAPSHOT_BYTES * 3)
+      throw new Error("Snapshot file is too large.");
+    loadSnapshot(JSON.parse(await file.text()));
+    announce(say("Snapshot opened locally.", "快照已在本地打开。"));
+  } catch (error) {
+    announce(error.message, true);
+  } finally {
+    event.target.value = "";
+  }
+});
+applyLanguage();
+render();