minecodex 2.0.54 → 2.1.1

package/README.md

@@ -1,30 +1,63 @@
 <p align="center">
-  <img src="./assets/readme/hero.svg" width="100%" alt="MineCodex：让 Codex 更顺手">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/readme/hero-dark.svg">
+    <img src="./assets/readme/hero.svg" width="100%" alt="MineCodex：让 Codex 更顺手。13 项按需开启的 Codex Desktop 交互增强，支持 macOS 与 Windows。">
+  </picture>
 </p>
 
-# MineCodex
+<p align="center">
+  <a href="#安装">安装</a> ·
+  <a href="#13-项增强">全部功能</a> ·
+  <a href="#它如何工作">工作方式与隐私</a> ·
+  <a href="#常见问题">常见问题</a>
+</p>
 
-为 Codex Desktop 添加轻量扩展，按需开启，让日常使用更顺手。
+**MineCodex 是一个给 Codex Desktop 用的增强工具箱。** 它在你熟悉的 Codex 界面里补上一些顺手的小功能：更快地切换模型、一键填入常用提示词、随时看到剩余额度、更舒服地阅读长文档和图表。每一项都可以单独开关，外观沿用 Codex 原生风格，看起来就像 Codex 本来就有。
 
-## 功能
+<table>
+  <tr>
+    <td width="50%"><img src="./apps/dashboard/assets/previews/model-slider.jpg" alt="模型窗口：在输入框旁直接选择模型与思考档位"></td>
+    <td width="50%"><img src="./apps/dashboard/assets/previews/usage-meter.jpg" alt="额度环：在侧栏查看五小时与每周剩余额度"></td>
+  </tr>
+  <tr>
+    <td><b>模型窗口</b> · 在输入框旁选模型和思考档位，常用模型可收藏</td>
+    <td><b>额度环</b> · 不打开菜单，也能看到五小时和每周额度</td>
+  </tr>
+  <tr>
+    <td><img src="./apps/dashboard/assets/previews/session-status.jpg" alt="会话状态：查看当前会话的 Token 用量、上下文与生成速度"></td>
+    <td><img src="./apps/dashboard/assets/previews/mermaid-diagrams.jpg" alt="Mermaid 图表增强：在 Markdown 预览中查看排版更清楚的图表"></td>
+  </tr>
+  <tr>
+    <td><b>会话状态</b> · 当前会话的用量、上下文和生成速度集中在一处</td>
+    <td><b>Mermaid 图表增强</b> · 复杂图表排得更清楚，可缩放、可下载 PNG</td>
+  </tr>
+</table>
 
-| 插件 | 功能 |
-| --- | --- |
-| 模型窗口 | 切换模型和思考强度，搜索、收藏常用模型。 |
-| 提示词库 | 分类管理提示词，一键填入输入框，不自动发送。 |
-| 额度环 | 查看五小时与每周剩余额度，点击打开用量详情。 |
-| 会话状态 | 查看回复速度、Token 用量和上下文占用。 |
-| Markdown 阅读增强 | 改善文档排版，支持章节目录、表格展开和代码复制。 |
-| Mermaid 图表增强 | 独立开关，默认启用；支持图表缩放与 PNG 下载。 |
-| 文件级联浏览 | 点击文件路径，分列浏览目录并切换文件。 |
-| 图片集合 | 浏览本机生成图片，查看提示词，收藏到 Library。 |
-| 站点收藏 | 发现本地项目网页，收藏网址并快速打开。 |
-| 快捷聊天增强 | 恢复快捷键，发送后展开，支持历史与窗口固定。 |
-| 侧栏聚焦 | 收起其他任务分组，再次点击恢复布局。 |
+## 13 项增强
+
+全部功能都可以在控制台单独开关。控制台里每一项都配有真实录屏，可以先看效果再决定是否开启。
+
+| 场景 | 功能 | 它帮你解决什么 |
+| --- | --- | --- |
+| 选模型与提示词 | **模型窗口** | 模型和思考档位放在一起选，常用模型可搜索、可收藏。 |
+| | **提示词库** | 按分类管理常用提示词，一键填入输入框；不会自动发送，由你检查后再发。 |
+| 掌握用量 | **额度环** | 侧栏常驻五小时与每周剩余额度，点击查看用量详情。 |
+| | **会话状态** | 当前会话的 Token 用量、上下文占用和回复速度集中显示。 |
+| 阅读文档与图表 | **Markdown 阅读增强** | 长文排版更舒服，支持章节目录、脚注跳转、表格展开和代码复制。 |
+| | **Mermaid 图表增强** | 复杂图表布局更清楚，可缩放、可下载 PNG；关闭后恢复原生图表。 |
+| 浏览项目文件 | **文件级联浏览** | 点击文件路径，分列浏览相邻目录并切换文件。 |
+| | **Files 自动刷新** | Agent 新增、删除或重命名文件后，Files 列表自动更新，保留浏览位置。 |
+| 管理素材与网页 | **图片集合** | 浏览本机生成的图片，查看对应提示词，收藏到 Library。 |
+| | **站点收藏** | 自动发现正在运行的本地项目网页，收藏常用网址并快速打开。 |
+| 写作与提问 | **长指令展开编辑** | 写长指令时展开成大尺寸输入框，收起后草稿保持不变。 |
+| | **快捷聊天增强** | 恢复 Quick Chat 快捷键，发送后自动展开，支持历史与窗口固定。 |
+| 整理界面 | **侧栏聚焦** | 一键收起其他任务分组，只看当前分组；再点一次恢复原样。 |
 
 ## 安装
 
-支持 macOS 与 Windows。先安装 Codex Desktop 和 [Node.js](https://nodejs.org/) 22.5 或更高版本，然后在终端运行：
+**准备：** macOS 或 Windows，已安装 Codex Desktop 和 [Node.js](https://nodejs.org/) 22.5 或更高版本。
+
+在终端依次运行：
 
 ```bash
 npm install -g minecodex
@@ -32,22 +65,53 @@ mcx install
 mcx open
 ```
 
-安装后重启 Codex 即可使用。在控制台按需开关功能，修改后运行 `mcx restart` 应用设置。
+`mcx install` 会安装后台服务，完成后询问是否立即重启 Codex；重启后增强即生效。`mcx open` 会在浏览器中打开控制台，你可以在这里按需开关功能，修改后运行 `mcx restart` 应用设置。
+
+<details>
+<summary><b>可选：在 Codex 里直接打开控制台和 Prompt 页面</b></summary>
+
+<br>
+
+1. 先安装 [Codex CLI](https://developers.openai.com/codex/cli/)，再运行：
 
-如需在 Codex 内打开控制台和 Prompt 页面，先安装 [Codex CLI](https://developers.openai.com/codex/cli/)，再运行 `mcx plugin install`。这一步独立于后台增强安装；更换全局包或源码安装位置后，再运行一次以更新插件路径。
+   ```bash
+   mcx plugin install
+   ```
 
-注册后，在 Codex 的插件页点击刷新，再从 Explore／探索找到 MineCodex 和 Prompt。需要常驻 Navbar 时，分别点击它们旁边的“固定到侧边栏”。插件已安装、页面入口已发现、入口已固定是不同状态；未固定的入口不会常驻 Navbar。此路径已在 Codex 26.1013.4894.0 的 Windows 简体中文窗口验证。
+2. 在 Codex 的插件页点击刷新，从 Explore／探索找到 MineCodex 和 Prompt。
+3. 需要常驻侧边栏时，分别点击它们旁边的“固定到侧边栏”。
 
-## 常用命令
+</details>
+
+### 常用命令
 
 | 命令 | 作用 |
 | --- | --- |
 | `mcx open` | 打开控制台 |
-| `mcx update` | 更新到最新版本 |
 | `mcx restart` | 重启 Codex 并应用设置 |
-| `mcx status` | 查看运行状态 |
-| `mcx uninstall` | 卸载，保留个人数据 |
+| `mcx status` | 查看安装与运行状态 |
+| `mcx update` | 更新到最新稳定版 |
+| `mcx uninstall` | 卸载，保留个人数据；加 `--purge` 同时删除数据 |
+
+## 它如何工作
+
+MineCodex 在本机运行一个后台服务。它让 Codex 以只对本机开放（`127.0.0.1`）的调试端口启动，并在运行时把增强加载进 Codex 窗口。
+
+- **不修改 Codex 安装文件。** 卸载 MineCodex 后重新打开 Codex，就是原本的样子。
+- **数据留在本机。** 提示词、收藏和设置保存在你的电脑上；除了检查新版本时访问 npm，MineCodex 不上传任何内容。
+- **单项失效不影响整体。** 某个增强出问题时，Codex 和其他增强照常运行。
+
+## 常见问题
+
+**Codex 更新后某个增强不见了？**
+MineCodex 依赖 Codex 的界面结构。Codex 改版后，个别增强可能暂时失效。先运行 `mcx update` 获取最新版本，再运行 `mcx restart`；问题仍在时，可以在控制台页尾复制诊断信息并[提交 Issue](https://github.com/Vontean/MineCodex/issues)。
+
+**会影响我正在进行的会话吗？**
+`mcx restart`（以及安装结束时你确认的重启）会重启 Codex。建议在没有正在运行的任务时操作。
+
+**这是 OpenAI 官方产品吗？**
+不是。MineCodex 是非官方的独立项目，与 OpenAI 无关联。
 
 ## 许可
 
-[MIT](LICENSE)。MineCodex 是非官方独立扩展，与 OpenAI 无关联；第三方素材遵循各自的[权利说明](features/model-slider/THIRD_PARTY_NOTICES.md)。
+[MIT](LICENSE)。第三方素材遵循各自的[权利说明](features/model-slider/THIRD_PARTY_NOTICES.md)。

package/apps/dashboard/app.js

@@ -1,4 +1,4 @@
-import {installFeaturePreviews} from "./assets/feature-previews.js";
+import {installFeatureShowcase} from "./assets/feature-showcase.js";
 import {diagnosticReport} from "./assets/diagnostics.js";
 import {dashboardFetch} from "./transport.js";
 let savedLocale;
@@ -9,7 +9,8 @@ document.documentElement.lang = locale;
 
 const messages = {
   en: {
-    plugins: "Your extensions",
+    plugins: "All enhancements",
+    pluginsHint: "Click a card to watch its demo above. Use the switch to turn it on or off.",
     restartTitle: "Restart Codex to apply changes",
     restartCopy: "Your plugin choices are saved. Restart when you are ready.",
     restart: "Restart Codex",
@@ -50,7 +51,8 @@ const messages = {
     failureDetail: "This extension could not be confirmed. Copy diagnostics to help investigate.",
   },
   "zh-CN": {
-    plugins: "功能扩展",
+    plugins: "全部增强",
+    pluginsHint: "点击卡片在上方查看演示，开关控制是否启用。",
     restartTitle: "重启 Codex 以应用更改",
     restartCopy: "插件选择已经保存，可以在准备好后统一重启。",
     restart: "重启 Codex",
@@ -120,7 +122,7 @@ const elements = {
 let state = null;
 let toastTimer = null;
 const pendingFeatureIds = new Set();
-const previews = installFeaturePreviews(elements.pluginList, locale);
+const showcase = installFeatureShowcase(document.querySelector("#feature-showcase"), locale);
 
 function applyStaticCopy() {
   document.querySelector("#brand-slogan").textContent = locale === "zh-CN" ? "让 Codex 更顺手。" : "Make Codex work better for you.";
@@ -136,6 +138,8 @@ function applyStaticCopy() {
   elements.restartCopy.textContent = copy.restartCopy;
   elements.restartButton.querySelector(".button-label").textContent = copy.restart;
   elements.pluginsHeading.textContent = copy.plugins;
+  document.querySelector("#plugins-hint").textContent = copy.pluginsHint;
+  renderEyebrow();
   elements.errorTitle.textContent = copy.loadError;
   elements.errorCopy.textContent = copy.loadErrorCopy;
   elements.retryButton.textContent = copy.retry;
@@ -208,7 +212,7 @@ function createPluginCard(feature) {
   pluginState.append(dot, stateLabel);
   heading.append(icon, label);
   card.append(heading, pluginCopy, pluginState);
-  previews.attach(card);
+  showcase.attach(card);
   return card;
 }
 
@@ -230,8 +234,6 @@ function updatePluginCard(card, feature) {
   input.setAttribute("aria-label", feature.label);
   dot.className = `status-dot ${status.className}`;
   stateLabel.textContent = status.label;
-  const previewEntry = card.querySelector(".preview-entry");
-  previewEntry?.setAttribute("aria-label", `${locale === "zh-CN" ? "查看效果" : "See how it works"} · ${feature.label}`);
 }
 
 function findPluginCard(featureId) {
@@ -239,8 +241,6 @@ function findPluginCard(featureId) {
 }
 
 function renderPluginCards(features) {
-  // Task 暂停接入，旧版服务返回的卡片也不展示。
-  features = features.filter(feature => !["unread-inbox", "hide-upsell-banner"].includes(feature.id));
   for (const child of [...elements.pluginList.children]) {
     if (!child.dataset.featureId) child.remove();
   }
@@ -256,11 +256,19 @@ function renderPluginCards(features) {
   }
   for (const card of [...elements.pluginList.querySelectorAll("[data-feature-id]")]) {
     if (card.dataset.featureId && !featureIds.has(card.dataset.featureId)) {
-      if (card.classList.contains("is-previewing")) previews.close();
+      showcase.detach(card);
       card.remove();
     }
   }
   elements.pluginList.setAttribute("aria-busy", "false");
+  showcase.setFeatures(features);
+  renderEyebrow();
+}
+
+function renderEyebrow() {
+  const total = state?.features?.length;
+  const base = locale === "zh-CN" ? "Codex 增强工具箱" : "Enhancements for Codex";
+  document.querySelector("#hero-eyebrow-text").textContent = total ? `${base} · ${total}${locale === "zh-CN" ? " 项" : ""}` : base;
 }
 
 function renderRuntime() {
@@ -309,7 +317,7 @@ async function load() {
     elements.pluginList.hidden = false;
     render();
   } catch {
-    previews.close();
+    showcase.setFeatures([]);
     elements.pluginList.hidden = true;
     elements.loadError.hidden = false;
   }
@@ -429,7 +437,6 @@ function applyTheme() {
 let themeTransition = null;
 async function toggleTheme(button) {
   if (themeTransition) return;
-  previews.close();
   selectedTheme = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
   if (!window.minecodexMcpApp) {
     try { localStorage.setItem("minecodex-appearance", selectedTheme); } catch { /* 保留内存中的选择。 */ }
@@ -462,12 +469,11 @@ elements.languageToggle.addEventListener("click", (event) => {
   if (choice === locale) return;
   try { localStorage.setItem("minecodex-language", choice); } catch { return; }
   // 浏览器沿用重载；官方 sandbox 在当前上下文内切换，保留主题与通信。
-  previews.close();
   if (!window.minecodexMcpApp) { location.reload(); return; }
   locale = choice;
   copy = messages[locale];
   document.documentElement.lang = locale;
-  previews.setLocale(locale);
+  showcase.setLocale(locale);
   document.querySelector("#language-menu").hidePopover();
   applyStaticCopy();
   applyTheme();

package/apps/dashboard/assets/chevron-left.svg

@@ -0,0 +1,13 @@
+<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="m15 18-6-6 6-6" />
+</svg>

package/apps/dashboard/assets/chevron-right.svg

@@ -0,0 +1,13 @@
+<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="m9 18 6-6-6-6" />
+</svg>

package/apps/dashboard/assets/feature-showcase.js

@@ -0,0 +1,185 @@
+import {previewContent} from './preview-content.js';
+
+// 功能演示轮播：按卡片顺序自动播放各功能的真实录屏；点击卡片切换到对应功能。
+export function installFeatureShowcase(root, locale) {
+  let zh = locale === 'zh-CN';
+  const t = (cn, en) => zh ? cn : en;
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+  const $ = selector => root.querySelector(selector);
+  const media = $('.showcase-media'), video = $('.showcase-video'), poster = $('.showcase-poster'), status = $('.showcase-state');
+  const count = $('.showcase-count'), name = $('.showcase-name'), details = $('.showcase-details'), progress = $('.showcase-progress');
+  const prevButton = $('[data-showcase="prev"]'), nextButton = $('[data-showcase="next"]'), toggleButton = $('[data-showcase="toggle"]');
+  let features = [], index = -1, generation = 0, mediaAbort = null, advanceTimer = 0, frame = 0;
+  // userPaused 只由暂停按钮改变；inView / pageVisible 只暂停播放，不改变用户选择。
+  let userPaused = reduced.matches, inView = false, pageVisible = !document.hidden, manifest;
+  const cards = new Map();
+  const urls = new Map();
+
+  const loadManifest = () => manifest ??= window.minecodexPreviewMedia !== undefined
+    ? Promise.resolve(window.minecodexPreviewMedia)
+    : fetch('/assets/previews/manifest.json').then(r => r.ok ? r.json() : {}).then(value => value && typeof value === 'object' ? value : {}).catch(() => ({}));
+  async function resourceUrl(id, kind, value, signal) {
+    if (!window.minecodexMcpApp) return `/assets/previews/${value}`;
+    const key = `${id}/${kind}`;
+    if (urls.has(key)) return urls.get(key);
+    const response = await window.minecodexMcpApp.readServerResource({uri:`resource://minecodex/previews/${id}/${kind}`}, {signal});
+    const resource = response.contents?.[0];
+    if (!resource?.blob) throw new Error('Preview resource unavailable');
+    const url = `data:${resource.mimeType};base64,${resource.blob}`;
+    urls.set(key, url);
+    return url;
+  }
+
+  const shouldPlay = () => !userPaused && inView && pageVisible;
+  const current = () => features[index];
+
+  function renderControls() {
+    const playing = !userPaused;
+    toggleButton.querySelector('.ui-icon').className = `ui-icon ${playing ? 'pause-icon' : 'play-icon'}`;
+    const label = playing ? t('暂停演示', 'Pause demos') : t('播放演示', 'Play demos');
+    toggleButton.setAttribute('aria-label', label); toggleButton.setAttribute('data-minecodex-tooltip', label);
+    for (const [button, cn, en] of [[prevButton, '上一个功能', 'Previous feature'], [nextButton, '下一个功能', 'Next feature']]) {
+      button.setAttribute('aria-label', t(cn, en)); button.setAttribute('data-minecodex-tooltip', t(cn, en));
+      button.disabled = features.length < 2;
+    }
+    root.setAttribute('aria-label', t('功能演示', 'Feature demos'));
+  }
+  function renderInfo() {
+    const feature = current();
+    if (!feature) return;
+    const pad = n => String(n).padStart(2, '0');
+    count.textContent = `${pad(index + 1)} / ${pad(features.length)}`;
+    name.textContent = feature.label;
+    details.replaceChildren();
+    const labels = [t('出现位置', 'Where'), t('解决问题', 'Problem'), t('操作与效果', 'What it does')];
+    previewContent(feature.id, locale).forEach((value, i) => {
+      const dt = document.createElement('dt'); dt.textContent = labels[i];
+      const dd = document.createElement('dd'); dd.textContent = value;
+      details.append(dt, dd);
+    });
+  }
+  function renderProgress() {
+    if (progress.children.length !== features.length) {
+      progress.replaceChildren(...features.map(() => {
+        const segment = document.createElement('span'); segment.className = 'showcase-segment';
+        segment.append(Object.assign(document.createElement('span'), {className: 'showcase-fill'}));
+        return segment;
+      }));
+    }
+    [...progress.children].forEach((segment, i) => {
+      segment.classList.toggle('is-done', i < index);
+      segment.classList.toggle('is-current', i === index);
+      if (i !== index) segment.firstChild.style.transform = i < index ? 'scaleX(1)' : 'scaleX(0)';
+    });
+  }
+  // 当前段进度跟随视频时间；没有视频时停在起点。
+  function tick() {
+    cancelAnimationFrame(frame);
+    const fill = progress.children[index]?.firstChild;
+    if (fill && video.duration) fill.style.transform = `scaleX(${Math.min(1, video.currentTime / video.duration)})`;
+    if (!video.paused) frame = requestAnimationFrame(tick);
+  }
+
+  function releaseVideo() {
+    cancelAnimationFrame(frame); clearTimeout(advanceTimer);
+    video.pause(); video.removeAttribute('src'); video.load(); video.hidden = true;
+  }
+  function sync() {
+    clearTimeout(advanceTimer);
+    if (!video.getAttribute('src')) {
+      // 没有视频的功能只展示封面或说明，自动轮播时停留后前进。
+      if (shouldPlay() && features.length > 1 && media.dataset.state !== 'loading') advanceTimer = setTimeout(() => step(1), 6000);
+      return;
+    }
+    if (shouldPlay()) {
+      const ticket = generation;
+      video.play().catch(error => {
+        // 切换素材或暂停造成的中断，不代表用户选择暂停或宿主拒绝播放。
+        if (ticket !== generation || error.name !== 'NotAllowedError' || !shouldPlay()) return;
+        userPaused = true; renderControls();
+      });
+    } else video.pause();
+  }
+  async function select(nextIndex) {
+    if (!features.length) return;
+    index = (nextIndex + features.length) % features.length;
+    const ticket = ++generation;
+    mediaAbort?.abort(); mediaAbort = new AbortController();
+    const signal = mediaAbort.signal;
+    releaseVideo(); delete video.dataset.ready;
+    renderInfo(); renderProgress();
+    const feature = current();
+    media.dataset.state = 'loading'; status.textContent = t('正在加载演示…', 'Loading demo…');
+    poster.hidden = true; poster.removeAttribute('src');
+    const resources = (await loadManifest())?.[feature.id];
+    if (ticket !== generation) return;
+    if (!resources) { media.dataset.state = 'empty'; status.textContent = t('演示视频准备中', 'Demo video coming soon'); sync(); return; }
+    const [posterUrl, videoUrl] = await Promise.all(['poster', 'video'].map(kind => resources[kind] ? resourceUrl(feature.id, kind, resources[kind], signal).catch(() => null) : null));
+    if (ticket !== generation) return;
+    if (posterUrl) { poster.src = posterUrl; poster.hidden = false; }
+    media.dataset.state = posterUrl ? 'poster' : 'empty';
+    status.textContent = posterUrl ? '' : t('演示暂不可用', 'Demo unavailable');
+    if (videoUrl) {
+      video.src = videoUrl; video.hidden = false;
+      video.addEventListener('loadeddata', () => { if (ticket === generation) { video.dataset.ready = '1'; media.dataset.state = 'video'; poster.hidden = true; } }, {once: true});
+    }
+    sync();
+  }
+  const step = delta => select(index + delta);
+
+  video.addEventListener('play', tick);
+  video.addEventListener('ended', () => {
+    tick();
+    if (shouldPlay()) advanceTimer = setTimeout(() => step(1), 600);
+  });
+  video.addEventListener('error', () => {
+    if (!video.getAttribute('src')) return;
+    releaseVideo(); poster.hidden = !poster.getAttribute('src');
+    media.dataset.state = poster.hidden ? 'empty' : 'poster';
+    status.textContent = poster.hidden ? t('演示暂不可用', 'Demo unavailable') : '';
+    sync();
+  });
+  prevButton.addEventListener('click', () => step(-1));
+  nextButton.addEventListener('click', () => step(1));
+  toggleButton.addEventListener('click', () => {
+    userPaused = !userPaused; renderControls();
+    // 播完停在最后一帧时，继续播放从下一个功能开始。
+    if (!userPaused && video.ended) step(1); else sync();
+  });
+  new IntersectionObserver(([entry]) => { inView = entry.isIntersecting && entry.intersectionRatio >= 0.35; sync(); }, {threshold: 0.35}).observe(media);
+  document.addEventListener('visibilitychange', () => { pageVisible = !document.hidden; sync(); });
+  window.addEventListener('pagehide', () => { mediaAbort?.abort(); releaseVideo(); });
+
+  function attach(card) {
+    const entry = document.createElement('button');
+    entry.type = 'button'; entry.className = 'showcase-entry';
+    entry.setAttribute('aria-controls', root.id);
+    entry.addEventListener('click', () => {
+      const target = features.findIndex(feature => feature.id === card.dataset.featureId);
+      if (target < 0) return;
+      if (target !== index) void select(target);
+      root.scrollIntoView({block: 'start', behavior: reduced.matches ? 'auto' : 'smooth'});
+    });
+    card.append(entry);
+    cards.set(card.dataset.featureId, card);
+  }
+  function detach(card) { cards.delete(card.dataset.featureId); }
+  function labelEntries() {
+    for (const card of cards.values()) card.querySelector('.showcase-entry')?.setAttribute('aria-label', `${t('在演示中查看', 'Show in demo')} · ${card.querySelector('.plugin-name').textContent || card.dataset.featureId}`);
+  }
+  function setFeatures(next) {
+    const id = current()?.id;
+    features = next.map(({id, label}) => ({id, label}));
+    root.hidden = features.length === 0;
+    renderControls(); labelEntries();
+    const kept = features.findIndex(feature => feature.id === id);
+    if (kept >= 0) { index = kept; renderInfo(); renderProgress(); }
+    else void select(0);
+  }
+  function setLocale(next) {
+    locale = next; zh = locale === 'zh-CN';
+    renderControls(); renderInfo(); labelEntries();
+  }
+  renderControls();
+  return {attach, detach, setFeatures, setLocale};
+}

package/apps/dashboard/assets/pause.svg

@@ -0,0 +1,14 @@
+<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"
+>
+  <rect x="14" y="4" width="4" height="16" rx="1" />
+  <rect x="6" y="4" width="4" height="16" rx="1" />
+</svg>

package/apps/dashboard/assets/play.svg

@@ -0,0 +1,13 @@
+<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"
+>
+  <polygon points="6 3 20 12 6 21 6 3" />
+</svg>

package/apps/dashboard/assets/previews/manifest.json

@@ -1 +1,67 @@
-{}
+{
+  "composer-expand": {
+    "video": "composer-expand.mp4",
+    "poster": "composer-expand.jpg",
+    "version": "26.1103.60933"
+  },
+  "file-navigation": {
+    "video": "file-navigation.mp4",
+    "poster": "file-navigation.jpg",
+    "version": "26.1103.60933"
+  },
+  "files-auto-refresh": {
+    "video": "files-auto-refresh.mp4",
+    "poster": "files-auto-refresh.jpg",
+    "version": "26.1103.60933"
+  },
+  "images": {
+    "video": "images.mp4",
+    "poster": "images.jpg",
+    "version": "26.1103.60933"
+  },
+  "markdown-reading": {
+    "video": "markdown-reading.mp4",
+    "poster": "markdown-reading.jpg",
+    "version": "26.1103.60933"
+  },
+  "mermaid-diagrams": {
+    "video": "mermaid-diagrams.mp4",
+    "poster": "mermaid-diagrams.jpg",
+    "version": "26.1103.60933"
+  },
+  "model-slider": {
+    "video": "model-slider.mp4",
+    "poster": "model-slider.jpg",
+    "version": "26.1103.60933"
+  },
+  "notes": {
+    "video": "notes.mp4",
+    "poster": "notes.jpg",
+    "version": "26.1103.60933"
+  },
+  "quick-chat": {
+    "video": "quick-chat.mp4",
+    "poster": "quick-chat.jpg",
+    "version": "26.1103.60933"
+  },
+  "session-status": {
+    "video": "session-status.mp4",
+    "poster": "session-status.jpg",
+    "version": "26.1103.60933"
+  },
+  "sidebar-focus": {
+    "video": "sidebar-focus.mp4",
+    "poster": "sidebar-focus.jpg",
+    "version": "26.1103.60933"
+  },
+  "sites": {
+    "video": "sites.mp4",
+    "poster": "sites.jpg",
+    "version": "26.1103.60933"
+  },
+  "usage-meter": {
+    "video": "usage-meter.mp4",
+    "poster": "usage-meter.jpg",
+    "version": "26.1103.60933"
+  }
+}