minecodex 2.0.12 → 2.0.14

package/README.md

@@ -10,14 +10,16 @@ MineCodex 给 Codex Desktop 增加一组轻量、本地优先的扩展功能。
 
 | 插件 | 说明 |
 | --- | --- |
-| **Model Slider** | 更清晰、更顺滑的模型切换面板：具备品牌标识、常用收藏与流畅交互 |
-| **Prompts** | 专页分类管理提示词与调用统计，输入框 Quick Prompts 快速调用 |
-| **Usage Meter** | 在 Help 与 Account 之间显示剩余额度环，悬浮查看周 / 五小时额度，点击进入 Usage 设置 |
-| **Images** | 在原生 Images 中浏览本地 Image Gen 图片，查看并复制提示词 |
-| **Hide Upsell Banner** | 隐藏输入框上方的用量提示横幅，仅优化界面展示，不影响正常的用量统计 |
-| **Session Status** | 在输入框下方查看当前任务的步骤、观测速度、Token 用量与上下文明细 |
-| **Sidebar Focus** | 展开侧栏时聚焦当前任务路径，再次点击恢复布局 |
-| **Sites** | 在原生 Sites 中收录项目网页与自定义网址，按需打开或启动 |
+| **模型窗口** · Model Panel | 快速切换模型和思考强度，收藏常用模型。 |
+| **提示词库** · Prompt Library | 分类保存常用提示词，需要时一键填入输入框。 |
+| **额度环** · Usage Ring | 在侧栏查看五小时和每周剩余额度，点击打开用量详情。 |
+| **会话状态** · Session Status | 查看回复速度、Token 用量和上下文占用，了解对话消耗。 |
+| **Markdown 阅读增强** · Markdown Reader | 让 Markdown 文档更易读，支持章节目录、表格展开和代码复制。 |
+| **文件级联浏览** · Cascading File Browser | 点击文件顶部路径，分列浏览文件夹并快速切换文件。 |
+| **图片集合** · Image Collection | 集中浏览生成的图片，查看提示词并复用创作思路。 |
+| **站点收藏** · Saved Sites | 发现项目正在运行的网页，收藏常用网址，随时打开。 |
+| **侧栏聚焦** · Sidebar Focus | 一键收起侧栏中的其他分组，再次点击恢复原来的展开状态。 |
+| **隐藏额度推广** · Hide Usage Promotions | 隐藏输入框上方的套餐升级推广，让对话更清爽。 |
 
 ## 安装
 
@@ -94,3 +96,13 @@ MineCodex 是非官方独立扩展项目，与 OpenAI 无关联。项目自有
 ## 从账号菜单打开控制台
 
 在 Codex Navbar 底部打开账号菜单，点击 Settings 下方的 **MineCodex ↗**，即可在外部默认浏览器打开本地控制台，等同于 `mcx gui`。macOS 默认 Safari、Chrome/Chromium、Edge、Brave 和 Vivaldi 会定位已有控制台标签页，没有时才新建；首次定位可能需要系统自动化权限。其他浏览器与 Windows 仍由系统打开 URL。
+
+### 在电脑之间迁移数据
+
+在 `mcx gui` 底部打开「数据迁移」，导出 `.mcx.json` 文件，再到另一台 Mac 或 Windows
+电脑的同一入口导入。确认前可查看新增、重复和冲突数量。只补充缺失项，重复项跳过，
+冲突保留本机版本，不删除已有数据。
+
+支持 Prompts 与分类、公网 Sites、模型收藏。模型旧收藏在新版模型滑条首次启动后收录，
+导入收藏在下次启动 Codex 后载入。图片文件、本地站点、账号信息与设备设置不包含在文件中；
+可迁移功能的特殊说明可通过 info 查看。这是手动迁移，不是自动云同步。文件包含提示词正文，请妥善保管。

package/apps/dashboard/app.js

@@ -221,7 +221,7 @@ function updatePluginCard(card, feature) {
   const dot = card.querySelector(".plugin-state .status-dot");
   const stateLabel = card.querySelector(".plugin-state-label");
   card.dataset.featureId = feature.id;
-  image.src = `${feature.iconUrl}?v=stroke-2.1`;
+  image.src = `${feature.iconUrl}?v=resource-1`;
   name.textContent = feature.label;
   description.textContent = feature.description;
   input.checked = Boolean(feature.enabled);
@@ -232,7 +232,7 @@ function updatePluginCard(card, feature) {
 }
 
 function findPluginCard(featureId) {
-  return [...elements.pluginList.children].find((child) => child.dataset.featureId === featureId) ?? null;
+  return [...elements.pluginList.querySelectorAll("[data-feature-id]")].find((child) => child.dataset.featureId === featureId) ?? null;
 }
 
 function renderPluginCards(features) {
@@ -246,11 +246,11 @@ function renderPluginCards(features) {
     let card = findPluginCard(feature.id);
     if (!card) {
       card = createPluginCard(feature);
-      elements.pluginList.append(card);
     }
+    elements.pluginList.append(card);
     updatePluginCard(card, feature);
   }
-  for (const card of [...elements.pluginList.children]) {
+  for (const card of [...elements.pluginList.querySelectorAll("[data-feature-id]")]) {
     if (card.dataset.featureId && !featureIds.has(card.dataset.featureId)) card.remove();
   }
   elements.pluginList.setAttribute("aria-busy", "false");

package/apps/dashboard/assets/data-transfer.js

@@ -0,0 +1,129 @@
+import { installFeatureTooltips } from './ui-tooltip.js';
+const tooltipLifetime = new AbortController();
+const { tooltipSurface } = installFeatureTooltips(tooltipLifetime.signal);
+window.addEventListener('pagehide', event => { if (!event.persisted) tooltipLifetime.abort(); });
+const zh = document.documentElement.lang.startsWith('zh');
+const t = (cn, en) => zh ? cn : en;
+const dialog = document.querySelector('#data-dialog');
+const entry = document.querySelector('#data-button');
+const list = document.querySelector('#data-list');
+const featureNames = { notes: t('提示词库', 'Prompt Library'), sites: t('站点收藏', 'Saved Sites'), 'model-slider': t('模型窗口', 'Model Panel') };
+const status = document.querySelector('#data-status');
+const exportButton = document.querySelector('#data-export');
+const importButton = document.querySelector('#data-import');
+const input = document.querySelector('#data-file');
+let bundle = null, busy = false;
+entry.textContent = t('数据迁移', 'Transfer data');
+document.querySelector('#data-title').textContent = t('数据迁移', 'Transfer data');
+document.querySelector('#data-policy').textContent = t('仅补充缺失项，重复跳过，冲突保留本机。', 'Add missing items. Skip duplicates. Keep local conflicts.');
+document.querySelector('#data-close').setAttribute('aria-label', t('关闭', 'Close'));
+exportButton.querySelector('.button-label').textContent = t('导出', 'Export');
+importButton.querySelector('.button-label').textContent = t('导入', 'Import');
+async function request(url, data) {
+  const response = await fetch(url, data ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) } : {});
+  if (!response.ok) throw new Error(String(response.status));
+  return response.json();
+}
+function setBusy(value) {
+  busy = value;
+  exportButton.disabled = value;
+  importButton.disabled = value;
+  document.querySelector('#data-close').disabled = value;
+  list.setAttribute('aria-busy', String(value));
+}
+const featureHints = {
+  'model-slider': t('仅匹配相同模型标识。本机缺少的模型保留收藏，不显示选项；导入后下次启动 Codex 生效。', 'Only exact model IDs match. Missing models stay saved but hidden. Imported favorites load next time Codex starts.'),
+  notes: t('包含分类、排序与使用次数。', 'Includes categories, order and usage counts.'),
+  sites: t('仅迁移公网网址，导入后归为外部网址。', 'Public URLs only; imported as external links.'),
+};
+let hintIndex = 0;
+function row(name, detail, amount, hint = '') {
+  const item = document.createElement('div'); item.className = 'data-card';
+  const copy = document.createElement('div'), heading = document.createElement('div'), title = document.createElement('strong'), count = document.createElement('span');
+  heading.className = 'data-card-heading';
+  title.textContent = name; count.textContent = amount; count.className = 'data-count';
+  heading.append(title);
+  if (hint) {
+    const info = document.createElement('button'), icon = document.createElement('span'), tip = document.createElement('div');
+    info.type = 'button'; info.className = 'data-info'; info.setAttribute('aria-label', t(`${name} 说明`, `About ${name}`));
+    icon.className = 'ui-icon info-icon'; icon.setAttribute('aria-hidden', 'true'); info.append(icon);
+    tooltipSurface(tip);
+    tip.id = `data-hint-${++hintIndex}`; tip.className = 'data-tooltip'; tip.setAttribute('popover', 'auto'); tip.setAttribute('role', 'tooltip'); tip.textContent = hint;
+    info.setAttribute('aria-describedby', tip.id); info.setAttribute('aria-expanded', 'false');
+    info.addEventListener('click', () => {
+      tip.togglePopover();
+      if (!tip.matches(':popover-open')) return;
+      const anchor = info.getBoundingClientRect(), box = tip.getBoundingClientRect();
+      tip.style.left = `${Math.max(8, Math.min(anchor.left + anchor.width / 2 - box.width / 2, innerWidth - box.width - 8))}px`;
+      tip.style.top = `${anchor.top - box.height - 2 >= 8 ? anchor.top - box.height - 2 : anchor.bottom + 2}px`;
+    });
+    tip.addEventListener('toggle', () => info.setAttribute('aria-expanded', String(tip.matches(':popover-open'))));
+    heading.append(info, tip);
+  }
+  copy.append(heading);
+  if (detail) { const desc = document.createElement('p'); desc.textContent = detail; copy.append(desc); }
+  item.append(copy, count); list.append(item);
+}
+function showInventory(data) {
+  list.replaceChildren();
+  for (const feature of data.features.filter(item => item.portable)) {
+    const detail = feature.id === 'notes' ? t(`${feature.categories} 个分类`, `${feature.categories} categories`) : '';
+    const hint = feature.id === 'model-slider' && !feature.initialized
+      ? t('旧收藏在新版模型窗口首次启动后收录。', 'Legacy favorites are collected when the updated slider first starts.') + ' ' + featureHints[feature.id]
+      : featureHints[feature.id];
+    row(featureNames[feature.id] || feature.id, detail, t(`${feature.count} 项`, `${feature.count} items`), hint);
+  }
+}
+function showPreview(data) {
+  list.replaceChildren();
+  for (const feature of data.features) row(featureNames[feature.id] || feature.id, t(`${feature.duplicate} 项重复 · ${feature.conflict} 项冲突，保留本机${feature.categoriesAdded ? ` · 新增 ${feature.categoriesAdded} 个分类` : ''}`, `${feature.duplicate} duplicates · ${feature.conflict} conflicts kept locally${feature.categoriesAdded ? ` · ${feature.categoriesAdded} new categories` : ''}`), t(`新增 ${feature.added} 项`, `${feature.added} new`), featureHints[feature.id]);
+  if (!data.features.length) row(t('空文件', 'Empty file'), t('没有可导入的数据', 'No data to import'), '0');
+}
+entry.addEventListener('click', async () => {
+  if (busy) return;
+  bundle = null; input.value = ''; importButton.querySelector('.button-label').textContent = t('导入', 'Import');
+  status.textContent = t('正在读取本机数据…', 'Reading local data…');
+  list.replaceChildren(); dialog.showModal(); setBusy(true);
+  try { showInventory(await request('/api/data')); status.textContent = ''; }
+  catch { status.textContent = t('无法读取数据。请关闭后重试。', 'Could not read data. Close and try again.'); }
+  finally { setBusy(false); }
+});
+document.querySelector('#data-close').addEventListener('click', () => { if (!busy) dialog.close(); });
+dialog.addEventListener('cancel', event => { if (busy) event.preventDefault(); });
+exportButton.addEventListener('click', async () => {
+  setBusy(true); status.textContent = t('正在导出…', 'Exporting…');
+  try {
+    const data = await request('/api/data/export');
+    const url = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }));
+    const a = document.createElement('a'); a.href = url; a.download = `minecodex-${new Intl.DateTimeFormat('sv-SE').format(new Date())}.mcx.json`; a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    status.textContent = t('已导出', 'Exported');
+  } catch { status.textContent = t('导出失败，请重试。文件最多支持 16 MB。', 'Export failed. Try again. Files are limited to 16 MB.'); }
+  finally { setBusy(false); }
+});
+input.addEventListener('change', async () => {
+  const file = input.files[0]; if (!file) return;
+  bundle = null; setBusy(true); importButton.querySelector('.button-label').textContent = t('导入', 'Import');
+  try {
+    if (file.size > 16 * 1024 * 1024) throw new Error('size');
+    const data = JSON.parse(await file.text());
+    const preview = await request('/api/data/preview', data);
+    bundle = data; showPreview(preview);
+    status.textContent = file.name;
+    importButton.querySelector('.button-label').textContent = t('确认导入', 'Confirm import');
+  } catch { status.textContent = t('文件无效或超过 16 MB', 'Invalid file or larger than 16 MB'); }
+  finally { input.value = ''; setBusy(false); }
+});
+importButton.addEventListener('click', async () => {
+  if (!bundle) { input.click(); return; }
+  setBusy(true); status.textContent = t('正在导入…', 'Importing…');
+  try {
+    const result = await request('/api/data/import', bundle);
+    list.replaceChildren();
+    for (const feature of result.features) row(featureNames[feature.id] || feature.id, feature.status === 'failed' ? t('可重试', 'Retry available') : t(`跳过 ${feature.duplicate} 项重复 · 保留 ${feature.conflict} 项冲突${feature.categoriesAdded ? ` · 新增 ${feature.categoriesAdded} 个分类` : ''}`, `${feature.duplicate} duplicates skipped · ${feature.conflict} conflicts kept${feature.categoriesAdded ? ` · ${feature.categoriesAdded} new categories` : ''}`), feature.status === 'failed' ? t('失败', 'Failed') : t(`新增 ${feature.added} 项`, `${feature.added} added`), featureHints[feature.id]);
+    status.textContent = result.complete ? t('导入完成', 'Import complete') : t('部分失败，请重试', 'Partially imported. Retry.');
+    if (result.complete) bundle = null;
+    importButton.querySelector('.button-label').textContent = result.complete ? t('导入', 'Import') : t('重试导入', 'Retry import');
+  } catch { status.textContent = t('未能确认结果，请重试', 'Could not confirm the result. Retry.'); }
+  finally { setBusy(false); }
+});

package/apps/dashboard/assets/download.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 15V3" />
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  <path d="m7 10 5 5 5-5" />
+</svg>

package/apps/dashboard/assets/upload.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3v12" />
+  <path d="m17 8-5-5-5 5" />
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+</svg>

package/apps/dashboard/index.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/styles.css?v=mcx-block-1">
     <script type="module" src="/app.js?v=mcx-block-1"></script>
     <script type="module" src="/assets/terrain.js"></script>
+    <script type="module" src="/assets/data-transfer.js"></script>
   </head>
   <body>
     <canvas id="agent-world" aria-hidden="true"></canvas>
@@ -71,11 +72,20 @@
         <dl>
           <div><dt id="version-label">Version</dt><dd id="version-value">—</dd></div>
         </dl>
+        <button id="data-button" class="button quiet" type="button">Transfer data</button>
         <button id="diagnostics-button" class="button quiet" type="button">Copy diagnostics</button>
         <button id="update-button" class="button quiet" type="button"><span class="ui-icon refresh-icon" aria-hidden="true"></span><span class="button-label">Check for updates</span></button>
       </footer>
       <p id="update-result" class="update-result" role="status" hidden></p>
     </main>
+    <dialog id="data-dialog" class="data-dialog" aria-labelledby="data-title">
+      <header class="data-header"><div><h2 id="data-title">Transfer data</h2></div><button id="data-close" class="button quiet" type="button" aria-label="Close"><svg viewBox="0 0 21 21" fill="none" aria-hidden="true"><path d="M14.6549 5.57307C14.9283 5.2997 15.3718 5.2997 15.6451 5.57307C15.9185 5.84643 15.9185 6.28993 15.6451 6.5633L11.3903 10.8182L15.6451 15.0731L15.735 15.1834C15.9141 15.4551 15.8842 15.8242 15.6451 16.0633C15.4061 16.3024 15.0369 16.3322 14.7653 16.1531L14.6549 16.0633L10.4 11.8084L6.14515 16.0633C5.87178 16.3367 5.42828 16.3367 5.15492 16.0633C4.88155 15.7899 4.88155 15.3464 5.15492 15.0731L9.4098 10.8182L5.15492 6.5633L5.06507 6.45295C4.88597 6.18128 4.91584 5.81214 5.15492 5.57307C5.39399 5.33399 5.76313 5.30413 6.0348 5.48322L6.14515 5.57307L10.4 9.82795L14.6549 5.57307Z" fill="currentColor"/></svg></button></header>
+      <div id="data-list" class="data-list"></div>
+      <p id="data-policy" class="data-policy"></p>
+      <p id="data-status" class="data-help data-status" role="status" aria-live="polite"></p>
+      <footer class="data-actions"><button id="data-export" class="button secondary" type="button"><span class="ui-icon download-icon" aria-hidden="true"></span><span class="button-label">Export</span></button><button id="data-import" class="button secondary" type="button"><span class="ui-icon upload-icon" aria-hidden="true"></span><span class="button-label">Import</span></button></footer>
+      <input id="data-file" type="file" accept=".json,.mcx.json,application/json" hidden>
+    </dialog>
     <div id="toast" class="toast" hidden role="status" aria-live="polite"></div>
   </body>
 </html>

package/apps/dashboard/styles.css

@@ -186,8 +186,8 @@ h2 { font-size: 14px; font-weight: 620; }
 .plugin-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
 .plugin-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 216px; padding: var(--card-padding); border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); box-shadow: 0 3px 0 var(--block-shadow); }
 .plugin-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
-.plugin-icon { display: grid; place-items: center; width: 28px; height: 28px; }
-.plugin-icon img { width: 24px; height: 24px; opacity: 0.75; }
+.plugin-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
+.plugin-icon img { display: block; width: 24px; height: 24px; object-fit: contain; opacity: 0.75; }
 .plugin-copy { flex: 1; }
 .plugin-name { font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; }
 .plugin-description { margin-top: 8px; font-size: 14px; line-height: 1.65; }
@@ -224,7 +224,7 @@ h2 { font-size: 14px; font-weight: 620; }
 .diagnostics .button { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; }
 .diagnostics .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
 .diagnostics dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
-.diagnostics dl div { display: flex; gap: 6px; }
+.diagnostics dl div { display: flex; align-items: baseline; gap: 6px; }
 .diagnostics dt { color: var(--ink-tertiary); }
 .diagnostics dd { margin: 0; color: var(--ink-secondary); }
 
@@ -265,3 +265,50 @@ h2 { font-size: 14px; font-weight: 620; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
 }
+
+
+/* 数据迁移沿用控制台的不透明表面与卡片尺寸。 */
+.data-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--border); border-bottom: 3px solid var(--block-shadow); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
+.data-dialog::backdrop { background: #10172280; }
+.data-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
+.data-header h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
+.data-header #data-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; padding: 0; width: 32px; height: 32px; min-height: 32px; }
+.data-header #data-close svg { display: block; width: 16px; height: 16px; }
+.data-list { display: grid; gap: 10px; }
+.data-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); }
+.data-card-heading { display: flex; align-items: center; gap: 6px; }
+.data-card strong { font-size: 14px; font-weight: 600; line-height: 22px; }
+.data-card p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-tertiary); }
+.data-count { white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
+.data-info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-tertiary); cursor: pointer; }
+.data-info .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
+.data-info:hover, .data-info[aria-expanded="true"] { background: var(--surface-muted); color: var(--ink-secondary); }
+.data-tooltip { inset: auto; margin: 0; width: max-content; max-width: min(320px, calc(100vw - 16px)); text-align: center; overflow-wrap: anywhere; }
+.data-policy { margin: 14px 0 0; color: var(--ink-tertiary); font-size: 11px; line-height: 1.6; }
+.data-status { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-secondary); overflow-wrap: anywhere; }
+.data-status:empty { display: none; }
+.data-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+.data-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 88px; }
+.data-actions .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
+.download-icon { --icon: url("/assets/download.svg"); }
+.upload-icon { --icon: url("/assets/upload.svg"); }
+@media (max-width: 600px) { .data-dialog { padding: 20px; } .data-card { gap: 12px; } }
+
+/* 独立控制台没有原生主题桥，只映射 token；Tooltip 材质由共享组件安装。 */
+:root {
+  --mcx-spacing: 4px;
+  --mcx-radius-2xl: 16px;
+  --mcx-codex-corner-shape: round;
+  --mcx-color-background-tooltip: var(--ink);
+  --mcx-color-text-tooltip: var(--surface);
+  --mcx-color-border-tooltip: color-mix(in oklab, var(--mcx-color-text-tooltip) 5%, transparent);
+  --mcx-shadow-tooltip: 0 8px 18px #0f172a33;
+  --mcx-font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --mcx-text-sm: 13px;
+  --mcx-tooltip-compact-font-weight: 400;
+  --mcx-tracking-tooltip: -.15px;
+}
+:root[data-theme="dark"] { --mcx-color-background-tooltip: var(--surface); --mcx-color-text-tooltip: var(--ink); }
+@supports (corner-shape: superellipse(1.5)) {
+  :root { --mcx-codex-corner-shape: superellipse(1.5); --mcx-radius-2xl: 24px; }
+}

package/features/file-navigation/assets/book-open.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.577.0 - ISC -->
+<svg
+  class="lucide lucide-book-open"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2.1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 7v14" />
+  <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+</svg>

package/features/file-navigation/assets/folder-tree.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" />
+  <path d="M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" />
+  <path d="M3 5a2 2 0 0 0 2 2h3" />
+  <path d="M3 3v13a2 2 0 0 0 2 2h3" />
+</svg>

package/features/file-navigation/codex-feature.json

@@ -0,0 +1,27 @@
+{
+  "schemaVersion": 1,
+  "id": "file-navigation",
+  "version": "0.1.0",
+  "label": {
+    "en": "Cascading File Browser",
+    "zh-CN": "文件级联浏览"
+  },
+  "description": {
+    "en": "Click the path above a file to browse folders in columns and open another file.",
+    "zh-CN": "点击文件顶部路径，分列浏览文件夹并快速切换文件。"
+  },
+  "entry": {
+    "kind": "page-script",
+    "script": "src/entry.mjs",
+    "sourceFactory": "src/injection-source.mjs",
+    "resources": {
+      "styles": "src/navigation.css"
+    }
+  },
+  "icon": {
+    "resource": "assets/folder-tree.svg"
+  },
+  "placement": {
+    "order": 91
+  }
+}

package/features/file-navigation/src/adapters/codex/modules.mjs

@@ -0,0 +1,67 @@
+// 依照原生 breadcrumb 的依赖角色查找公开模块，不绑定产物 hash 或短变量名。
+export async function loadFileNavigationModules() {
+  const urls = [...document.querySelectorAll('link[rel="modulepreload"],script[src]')].map(n => n.href || n.src);
+  const breadcrumbUrl = urls.find(url => /\/review-file-source-breadcrumb-[^/]+\.js$/.test(url));
+  const mainUrl = urls.find(url => /\/app-main-[^/]+\.js$/.test(url));
+  if (!breadcrumbUrl || !mainUrl) throw new Error('file-navigation-modules-unavailable');
+  const read = async url => {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error('file-navigation-source-unavailable');
+    return response.text();
+  };
+  const imports = (source, url) => {
+    const result = new Map();
+    for (const match of source.matchAll(/import\{([^}]+)\}from["']([^"']+)["']/g))
+      for (const entry of match[1].split(',')) {
+        const parts = entry.trim().split(/\s+as\s+/);
+        result.set(parts.at(-1), { name: parts[0], url: new URL(match[2], url).href });
+      }
+    return result;
+  };
+  const binding = async (map, name) => {
+    const value = map.get(name);
+    if (!value) throw new Error('file-navigation-dependency-unavailable');
+    return (await import(value.url))[value.name];
+  };
+  const source = await read(breadcrumbUrl), deps = imports(source, breadcrumbUrl);
+  const treeUrl = [...deps.values()].find(v => /\/base-file-tree-/.test(v.url))?.url;
+  const queryUrl = [...deps.values()].find(v => /\/workspace-directory-entries-query-/.test(v.url))?.url;
+  if (!treeUrl || !queryUrl) throw new Error('file-navigation-contract-changed');
+  const [treeSource, querySource, main] = await Promise.all([read(treeUrl), read(queryUrl), read(mainUrl)]);
+  const [treeModule, queryModule] = await Promise.all([import(treeUrl), import(queryUrl)]);
+  for (const module of [treeModule, queryModule])
+    for (const value of Object.values(module))
+      if (typeof value === 'function' && /^function ([\w$]+)\(\)\{return\(\1=/.test(String(value))) value();
+  const Tree = Object.values(treeModule).find(value => typeof value === 'function' && String(value).includes('contextMenuEnabled:'));
+  const reactOwner = treeSource.match(/\(0,([\w$]+)\.useState\)/)?.[1];
+  const reactFactory = reactOwner && treeSource.match(new RegExp(`\\b${reactOwner}=([\\w$]+)\\(\\)`))?.[1];
+  const rootOwner = main.match(/\(0,([\w$]+)\.createRoot\)/)?.[1];
+  const rootFactory = rootOwner && main.match(new RegExp(`\\b${rootOwner}=([\\w$]+)\\(\\)`))?.[1];
+  const requestName = querySource.match(/queryFn:\(\{signal:[\w$]+\}\)=>([\w$]+)\(`workspace-directory-entries`/)?.[1];
+  const [react, dom, request] = await Promise.all([
+    binding(imports(treeSource, treeUrl), reactFactory),
+    binding(imports(main, mainUrl), rootFactory),
+    binding(imports(querySource, queryUrl), requestName),
+  ]);
+  const React = react(), ReactDOM = dom();
+  if (!Tree || !React.createElement || !ReactDOM.createRoot || typeof request !== 'function')
+    throw new Error('file-navigation-components-unavailable');
+  const sharedUrl = [...imports(treeSource, treeUrl).values()].find(value => /\/app-shared-/.test(value.url))?.url;
+  const shared = sharedUrl && await import(sharedUrl);
+  const folder = shared && Object.values(shared).find(value => value?.name === 'folder-light-16');
+  if (!folder?.canvas?.viewBox || typeof folder.body !== 'string')
+    throw new Error('file-navigation-folder-icon-unavailable');
+  // 分列导航没有纵向展开状态；通过原生样式入口使用固定的原生文件夹图标。
+  const folderImage = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${folder.canvas.viewBox}">${folder.body}</svg>`)}")`;
+  const columnStyles = `
+    /* 原生树的逻辑焦点也响应鼠标；描边仅保留给键盘可见焦点。 */
+    [data-type="item"]:not(:focus-visible)::before { outline:none; }
+    [data-item-type="folder"] [data-item-section="icon"] { width:16px; height:16px; transform:none; }
+    [data-item-type="folder"] [data-item-section="icon"] svg { display:none; }
+    [data-item-type="folder"] [data-item-section="icon"]::before {
+      content:""; display:block; width:16px; height:16px; background:currentColor;
+      mask:${folderImage} center / contain no-repeat;
+    }
+  `;
+  return { Tree, React, ReactDOM, request, columnStyles };
+}

package/features/file-navigation/src/adapters/codex/navigation.mjs

@@ -0,0 +1,84 @@
+import { loadFileNavigationModules } from './modules.mjs';
+
+export function createFileNavigationAdapter(codex, loadModules = loadFileNavigationModules) {
+  let pending;
+  const modules = () => pending ??= loadModules().catch(error => { pending = null; throw error; });
+  function read(nav) {
+    const button = [...nav.querySelectorAll('button')].at(-1);
+    const props = button && codex.props(button, p => typeof p.root === 'string' && typeof p.activePath === 'string' && typeof p.onSelectFile === 'function');
+    if (!props || !nav.parentElement || !props.hostId) return null;
+    const rootName = nav.querySelector('button')?.textContent;
+    const separator = nav.querySelector('li > span')?.cloneNode(true);
+    let boundary = nav.parentElement;
+    while (boundary.parentElement && boundary.getBoundingClientRect().height < 160) boundary = boundary.parentElement;
+    const key = JSON.stringify([props.hostId, props.root, props.activePath]);
+    return {
+      key, nav, capsule: nav.parentElement, boundary, rootName, path: props.activePath, separator,
+      async list(directory, signal) {
+        const { request } = await modules();
+        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+        const result = await request('workspace-directory-entries', { params: {
+          hostId: props.hostId, workspaceRoot: props.root, directoryPath: directory || null, includeHidden: true,
+        }, signal });
+        if (!Array.isArray(result?.entries)) throw new Error('file-navigation-directory-contract-changed');
+        return result.entries.map(entry => {
+          if (typeof entry.path !== 'string' || !['file', 'directory'].includes(entry.type))
+            throw new Error('file-navigation-entry-contract-changed');
+          return { path: entry.path, name: entry.path.split('/').at(-1), directory: entry.type === 'directory' };
+        });
+      },
+      open(entry) {
+        if (entry.directory) return;
+        props.onSelectFile(`${props.root.replace(/[\\/]$/, '')}/${entry.path}`, { isPreview: true });
+      },
+      async prepare() {
+        const native = await modules();
+        const providers = [], seen = new Set();
+        for (let fiber = codex.currentFiber(nav); fiber; fiber = fiber.return) {
+          if (fiber.tag !== 10 || seen.has(fiber.type)) continue;
+          providers.push({ type: fiber.type, value: fiber.memoizedProps.value }); seen.add(fiber.type);
+        }
+        return {
+          mountColumn(element, entries, selected, onSelect, onBack) {
+            const { React, ReactDOM, Tree } = native;
+            const root = ReactDOM.createRoot(element);
+            const byName = new Map(entries.map(entry => [entry.name, entry]));
+            const activate = event => {
+              const row = event.nativeEvent.composedPath().find(node => node instanceof Element && node.hasAttribute('data-item-path'));
+              const entry = byName.get(row?.getAttribute('data-item-path')?.replace(/\/$/, ''));
+              if (entry) onSelect(entry);
+            };
+            let tree = React.createElement(Tree, {
+              cwd: props.root, hostId: props.hostId, contextMenuEnabled: false, surface: 'dropdown', unsafeCSS: native.columnStyles,
+              paths: entries.map(entry => ({ path: entry.path, displayPath: entry.name + (entry.directory ? '/' : '') })),
+              selectedPath: entries.find(entry => entry.path === selected)?.name,
+              initialExpandedPaths: [], flattenEmptyDirectories: false, revealSelectedPath: true, revealSelectedPathScrollOffset: 'center',
+              onClick: activate,
+            });
+            for (const provider of providers) tree = React.createElement(provider.type, { value: provider.value }, tree);
+            root.render(tree);
+            const keys = event => {
+              const row = event.composedPath().find(node => node instanceof Element && node.hasAttribute('data-item-path'));
+              const entry = byName.get(row?.getAttribute('data-item-path')?.replace(/\/$/, ''));
+              if (event.key === 'ArrowLeft') { event.preventDefault(); event.stopPropagation(); onBack(); }
+              if (entry && (event.key === 'Enter' || (event.key === 'ArrowRight' && entry.directory))) {
+                event.preventDefault(); event.stopPropagation(); onSelect(entry);
+              }
+            };
+            element.addEventListener('keydown', keys, true);
+            return {
+              dispose() { element.removeEventListener('keydown', keys, true); root.unmount(); },
+              focus() {
+                const shadow = element.querySelector('file-tree-container')?.shadowRoot;
+                (shadow?.querySelector('[aria-selected="true"]') ?? shadow?.querySelector('[role="treeitem"]'))?.focus();
+              },
+            };
+          },
+        };
+      },
+    };
+  }
+  return {
+    scan: () => [...document.querySelectorAll('nav:has(> ol)')].map(read).filter(Boolean),
+  };
+}

package/features/file-navigation/src/domain/navigation.mjs

@@ -0,0 +1,12 @@
+export function fileNavigationPath(rootName, path) {
+  const parts = path.split('/').filter(Boolean);
+  const names = [rootName, ...parts];
+  return {
+    labels: names.length > 3 ? ['…', ...names.slice(-2)] : names,
+    directories: ['', ...parts.slice(0, -1).map((_, index) => parts.slice(0, index + 1).join('/'))],
+  };
+}
+
+export function selectFileNavigationDirectory(directories, index, path) {
+  return [...directories.slice(0, index + 1), path];
+}

package/features/file-navigation/src/entry.mjs

@@ -0,0 +1,34 @@
+const adapter = createFileNavigationAdapter(config.codex);
+const mounted = new Map();
+const style = document.createElement('style');
+style.setAttribute('data-mcx-file-navigation-style', ''); style.textContent = config.resources.styles;
+document.head.append(style);
+let frame = null, disposed = false;
+function reconcile() {
+  frame = null;
+  if (disposed) return;
+  const views = adapter.scan(), active = new Set(views.map(view => view.nav));
+  for (const [nav, item] of mounted) if (!active.has(nav)) { item.session.dispose(); mounted.delete(nav); }
+  for (const view of views) {
+    const existing = mounted.get(view.nav);
+    if (existing?.key === view.key) continue;
+    existing?.session.dispose();
+    mounted.set(view.nav, { key: view.key, session: installFileNavigation(view, config.ui, config.locale) });
+  }
+}
+const observer = new MutationObserver(records => {
+  if (records.every(record => record.target.closest?.('.mcx-file-navigation-popover,.mcx-file-navigation-trigger,.cm-content'))) return;
+  if (frame === null && !disposed) frame = requestAnimationFrame(reconcile);
+});
+signal.addEventListener('abort', disposeFileNavigation, { once: true });
+observer.observe(document.body, { childList: true, subtree: true }); reconcile();
+config.registerSelfCheck?.(() => ({
+  state: mounted.size ? [...mounted.values()].every(item => item.session.available()) ? 'available' : 'unavailable' : 'not-applicable',
+  checks: [...mounted.values()].map(item => ({ name: 'file-navigation-trigger', available: item.session.available() })),
+  scopes: [...mounted.keys()].map(nav => ({ name: 'file-navigation', element: nav.parentElement })),
+}));
+function disposeFileNavigation() {
+  disposed = true; observer.disconnect(); if (frame !== null) cancelAnimationFrame(frame);
+  for (const item of mounted.values()) item.session.dispose(); mounted.clear(); style.remove();
+}
+return disposeFileNavigation;