minecodex 2.0.31 → 2.0.32

package/apps/dashboard/app.js

@@ -1,17 +1,14 @@
+import {installFeaturePreviews} from "./assets/feature-previews.js";
 import {diagnosticReport} from "./assets/diagnostics.js";
 import {dashboardFetch} from "./transport.js";
 let savedLocale;
 try { savedLocale = localStorage.getItem("minecodex-language"); } catch { /* 存储不可用时跟随浏览器语言。 */ }
-const locale = ["en", "zh-CN"].includes(savedLocale) ? savedLocale
+let locale = ["en", "zh-CN"].includes(savedLocale) ? savedLocale
   : navigator.language.toLowerCase().startsWith("zh") ? "zh-CN" : "en";
 document.documentElement.lang = locale;
 
-const copy = {
+const messages = {
   en: {
-    connecting: "Connecting…",
-    runtimeActive: "Active in Codex",
-    runtimeStopped: "Runtime unavailable",
-    runtimeNotInjected: "Runtime running — restart Codex to apply plugins",
     plugins: "Your extensions",
     restartTitle: "Restart Codex to apply changes",
     restartCopy: "Your plugin choices are saved. Restart when you are ready.",
@@ -53,10 +50,6 @@ const copy = {
     failureDetail: "This extension could not be confirmed. Copy diagnostics to help investigate.",
   },
   "zh-CN": {
-    connecting: "正在连接…",
-    runtimeActive: "已在 Codex 中生效",
-    runtimeStopped: "运行服务不可用",
-    runtimeNotInjected: "运行服务已启动——重启 Codex 以应用插件",
     plugins: "功能扩展",
     restartTitle: "重启 Codex 以应用更改",
     restartCopy: "插件选择已经保存，可以在准备好后统一重启。",
@@ -97,11 +90,10 @@ const copy = {
     restartFailed: "MineCodex 无法重启 Codex。请重试或复制诊断信息协助排查。",
     failureDetail: "暂时无法确认这项功能的状态，可复制诊断信息协助排查。",
   },
-}[locale];
+};
+let copy = messages[locale];
 
 const elements = {
-  runtimeDot: document.querySelector("#runtime-dot"),
-  runtimeLabel: document.querySelector("#runtime-label"),
   restartNotice: document.querySelector("#restart-notice"),
   restartTitle: document.querySelector("#restart-title"),
   restartCopy: document.querySelector("#restart-copy"),
@@ -128,11 +120,18 @@ const elements = {
 let state = null;
 let toastTimer = null;
 const pendingFeatureIds = new Set();
+const previews = installFeaturePreviews(elements.pluginList, locale);
 
 function applyStaticCopy() {
+  document.querySelector("#brand-slogan").textContent = locale === "zh-CN" ? "让 Codex 更顺手。" : "Make Codex work better for you.";
+  document.querySelector("#brand-description").textContent = locale === "zh-CN" ? "按需开启交互增强，让日常使用更高效。" : "Enable the enhancements you need for a smoother daily workflow.";
+  const language = document.querySelector("#language-button");
+  const languageLabel = locale === "zh-CN" ? "语言 · 中文" : "Language · English";
+  language.setAttribute("aria-label", languageLabel);
+  language.setAttribute("data-minecodex-tooltip", languageLabel);
   elements.languageToggle.setAttribute("aria-label", locale === "zh-CN" ? "语言" : "Language");
+  document.querySelector("#language-menu").setAttribute("aria-label", locale === "zh-CN" ? "语言" : "Language");
   for (const button of elements.languageButtons) button.setAttribute("aria-pressed", String(button.dataset.languageChoice === locale));
-  elements.runtimeLabel.textContent = copy.connecting;
   elements.restartTitle.textContent = copy.restartTitle;
   elements.restartCopy.textContent = copy.restartCopy;
   elements.restartButton.querySelector(".button-label").textContent = copy.restart;
@@ -209,6 +208,7 @@ function createPluginCard(feature) {
   pluginState.append(dot, stateLabel);
   heading.append(icon, label);
   card.append(heading, pluginCopy, pluginState);
+  previews.attach(card);
   return card;
 }
 
@@ -230,6 +230,8 @@ 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) {
@@ -243,38 +245,25 @@ function renderPluginCards(features) {
     if (!child.dataset.featureId) child.remove();
   }
   const featureIds = new Set(features.map(({ id }) => id));
-  for (const feature of features) {
+  for (const [index, feature] of features.entries()) {
     let card = findPluginCard(feature.id);
     if (!card) {
       card = createPluginCard(feature);
     }
-    elements.pluginList.append(card);
+    const expected = elements.pluginList.children[index];
+    if (expected !== card) elements.pluginList.insertBefore(card, expected ?? null);
     updatePluginCard(card, feature);
   }
   for (const card of [...elements.pluginList.querySelectorAll("[data-feature-id]")]) {
-    if (card.dataset.featureId && !featureIds.has(card.dataset.featureId)) card.remove();
+    if (card.dataset.featureId && !featureIds.has(card.dataset.featureId)) {
+      if (card.classList.contains("is-previewing")) previews.close();
+      card.remove();
+    }
   }
   elements.pluginList.setAttribute("aria-busy", "false");
 }
 
 function renderRuntime() {
-  const runtimeRunning = Boolean(state?.runtime?.running);
-  const renderer = state?.renderer;
-  const rendererCurrent = Boolean(
-    renderer?.discovered
-      && renderer.runtimeSessionId
-      && renderer.runtimeSessionId === state?.runtime?.runtimeSessionId
-      && renderer.active
-      && Number(renderer.injectedTargets) > 0,
-  );
-  const active = runtimeRunning && rendererCurrent;
-  elements.runtimeLabel.closest(".overview").hidden = active;
-  elements.runtimeDot.className = `status-dot ${active ? "is-active" : "is-warning"}`;
-  elements.runtimeLabel.textContent = active
-    ? copy.runtimeActive
-    : runtimeRunning
-      ? copy.runtimeNotInjected
-      : copy.runtimeStopped;
   elements.versionValue.textContent = state?.version ?? "—";
   elements.restartNotice.hidden = !state?.pendingRestart;
 }
@@ -320,11 +309,9 @@ async function load() {
     elements.pluginList.hidden = false;
     render();
   } catch {
+    previews.close();
     elements.pluginList.hidden = true;
     elements.loadError.hidden = false;
-    elements.runtimeDot.className = "status-dot is-warning";
-    elements.runtimeLabel.textContent = copy.runtimeStopped;
-    elements.runtimeLabel.closest(".overview").hidden = true;
   }
 }
 
@@ -432,11 +419,13 @@ function applyTheme() {
   for (const button of elements.themeButtons) {
     button.setAttribute("aria-label", button.dataset.themeChoice === "light" ? copy.lightAppearance : copy.darkAppearance);
     button.setAttribute("aria-pressed", String(button.dataset.themeChoice === (dark ? "dark" : "light")));
+    button.setAttribute("data-minecodex-tooltip", button.getAttribute("aria-label"));
   }
 }
 elements.themeToggle.addEventListener("click", (event) => {
   const button = event.target.closest("[data-theme-choice]");
   if (!button) return;
+  previews.close();
   selectedTheme = button.dataset.themeChoice;
   if (!window.minecodexMcpApp) {
     try { localStorage.setItem("minecodex-appearance", selectedTheme); } catch { /* 保留内存中的选择。 */ }
@@ -449,8 +438,20 @@ elements.languageToggle.addEventListener("click", (event) => {
   const choice = button.dataset.languageChoice;
   if (choice === locale) return;
   try { localStorage.setItem("minecodex-language", choice); } catch { return; }
-  // 重载后以同一语言请求卡片内容，不影响功能配置与外观选择。
-  location.reload();
+  // 浏览器沿用重载；官方 sandbox 在当前上下文内切换，保留主题与通信。
+  previews.close();
+  if (!window.minecodexMcpApp) { location.reload(); return; }
+  locale = choice;
+  copy = messages[locale];
+  document.documentElement.lang = locale;
+  previews.setLocale(locale);
+  document.querySelector("#language-menu").hidePopover();
+  applyStaticCopy();
+  applyTheme();
+  elements.updateResult.hidden = true;
+  elements.toast.hidden = true;
+  window.dispatchEvent(new Event("minecodex-language"));
+  void load();
 });
 systemTheme.addEventListener("change", applyTheme);
 window.addEventListener("minecodex-host-theme", () => {
@@ -462,3 +463,12 @@ document.addEventListener("pointerdown", () => { document.documentElement.datase
 applyStaticCopy();
 applyTheme();
 void load();
+
+const languageMenu = document.querySelector("#language-menu");
+languageMenu.addEventListener("toggle", event => {
+  document.querySelector("#language-button").setAttribute("aria-expanded", String(event.newState === "open"));
+  if (event.newState !== "open") return;
+  const rect = document.querySelector("#language-button").getBoundingClientRect();
+  languageMenu.style.left = `${Math.max(8, Math.min(rect.right - 140, innerWidth - 148))}px`;
+  languageMenu.style.top = `${rect.bottom + 8}px`;
+});

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

@@ -3,7 +3,7 @@ import {dashboardFetch} from '../transport.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');
+let 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');
@@ -14,12 +14,18 @@ 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');
+function localize() {
+  zh = document.documentElement.lang.startsWith('zh');
+  Object.assign(featureNames, {notes:t('提示词库','Prompt Library'),sites:t('站点收藏','Saved Sites'),'model-slider':t('模型窗口','Model Panel')});
+  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');
+}
+localize();
+window.addEventListener('minecodex-language', () => { localize(); if (dialog.open) dialog.close(); });
 async function request(url, data) {
   const response = await dashboardFetch(url, data ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) } : {});
   if (!response.ok) throw new Error(String(response.status));
@@ -32,11 +38,11 @@ function setBusy(value) {
   document.querySelector('#data-close').disabled = value;
   list.setAttribute('aria-busy', String(value));
 }
-const featureHints = {
+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';
@@ -70,14 +76,14 @@ function showInventory(data) {
   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];
+      ? 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]);
+  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 () => {
@@ -121,7 +127,7 @@ importButton.addEventListener('click', async () => {
   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]);
+    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');

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

@@ -0,0 +1,206 @@
+import {previewContent} from './preview-content.js';
+
+export function installFeaturePreviews(grid, locale) {
+  let zh = locale === 'zh-CN';
+  const t = (cn, en) => zh ? cn : en;
+  const lifetime = new AbortController();
+  const on = (node, type, fn, options = {}) => node.addEventListener(type, fn, {...options, signal: lifetime.signal});
+  const fine = matchMedia('(hover: hover) and (pointer: fine)');
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+  let current = null, panel = null, video = null, enterTimer, leaveTimer, replayTimer, pinned = false, generation = 0, restoring = false, mediaAbort = null;
+  let manifest, hoveredCard = null, hoveredPanel = false, pendingCard = null;
+  const media = () => 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(() => ({}));
+  const node = (tag, cls, text) => {
+    const el = document.createElement(tag); el.className = cls; if (text) el.textContent = text; return el;
+  };
+  async function resourceUrl(id, kind, value, signal) {
+    if (!window.minecodexMcpApp) return `/assets/previews/${value}`;
+    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');
+    return `data:${resource.mimeType};base64,${resource.blob}`;
+  }
+  function close({restore = false} = {}) {
+    clearTimeout(enterTimer); clearTimeout(leaveTimer); clearTimeout(replayTimer); generation++;
+    mediaAbort?.abort(); mediaAbort = null;
+    // 先释放状态再移除节点，避免焦点退出事件重入清理。
+    const closingPanel = panel, card = current, player = video;
+    panel = null; current = null; video = null; pinned = false;
+    if (player) { player.pause(); player.removeAttribute('src'); player.load(); }
+    const trigger = card?.querySelector('.preview-entry');
+    trigger?.setAttribute('aria-expanded', 'false');
+    trigger?.removeAttribute('aria-controls');
+    card?.classList.remove('is-previewing');
+    grid.classList.remove('has-preview');
+    closingPanel?.remove();
+    if (restore && trigger?.isConnected) { restoring = true; trigger.focus({preventScroll: true}); restoring = false; }
+  }
+  function position() {
+    if (!current || !panel) return;
+    const rect = current.getBoundingClientRect();
+    const width = Math.min(360, innerWidth - 32);
+    panel.style.width = `${width}px`;
+    panel.style.maxHeight = `${Math.max(120, innerHeight - 32)}px`;
+    const height = panel.getBoundingClientRect().height;
+    let left, top;
+    if (innerWidth - rect.right >= width + 24) left = rect.right + 8;
+    else if (rect.left >= width + 24) left = rect.left - width - 8;
+    else {
+      left = Math.max(16, Math.min(rect.left, innerWidth - width - 16));
+      // 窄屏把面板放到开关下方，避免挡住当前操作。
+      const below = innerHeight - rect.bottom - 24, above = rect.top - 24;
+      if (below >= Math.min(height, 180)) {
+        panel.style.maxHeight = `${below}px`; top = rect.bottom + 8;
+      } else if (above >= Math.min(height, 180)) {
+        panel.style.maxHeight = `${above}px`; top = Math.max(16, rect.top - height - 8);
+      } else {
+        top = Math.max(16, rect.top + current.querySelector('.plugin-topline').getBoundingClientRect().height + 32);
+        panel.style.maxHeight = `${Math.max(100, innerHeight - top - 16)}px`;
+      }
+    }
+    top ??= Math.max(16, Math.min(rect.top, innerHeight - height - 16));
+    Object.assign(panel.style, {left: `${left}px`, top: `${top}px`, visibility: 'visible'});
+  }
+  function scheduleClose() {
+    if (!pinned && !hoveredCard && !hoveredPanel) leaveTimer = setTimeout(() => close(), 100);
+  }
+  async function addMedia(id, host, state, ticket) {
+    const resources = (await media())?.[id];
+    if (ticket !== generation || !panel || !resources) return;
+    mediaAbort = new AbortController();
+    const mediaSignal = mediaAbort.signal;
+    let posterUrl, videoUrl, resourceFailed = false;
+    state.textContent = t('正在加载预览…', 'Loading preview…');
+    const urls = await Promise.all(['poster', 'video'].map(async kind => {
+      if (!resources[kind]) return null;
+      try { return await resourceUrl(id, kind, resources[kind], mediaSignal); }
+      catch { resourceFailed = true; return null; }
+    }));
+    if (ticket !== generation) return;
+    [posterUrl, videoUrl] = urls;
+    state.textContent = resourceFailed ? t('资源暂不可用 · 请参考说明', 'Preview unavailable · See description') : t('演示视频准备中', 'Demo video coming soon');
+    let poster = null;
+    if (posterUrl) {
+      poster = node('img', 'preview-poster'); poster.alt = t('功能静态预览', 'Static feature preview');
+      poster.addEventListener('load', position, {once: true});
+      poster.addEventListener('error', () => { poster.remove(); resourceFailed = true; if (!video) state.textContent = t('资源暂不可用 · 请参考说明', 'Preview unavailable · See description'); position(); }, {once: true});
+      poster.src = posterUrl; host.append(poster);
+      state.textContent = t('静态预览', 'Static preview');
+    }
+    if (!videoUrl) { position(); return; }
+    if (reduced.matches) { position(); return; }
+    const player = node('video', 'preview-video'); video = player;
+    player.muted = true; player.playsInline = true; player.preload = 'metadata'; player.hidden = true;
+    const fallback = () => {
+      panel.classList.remove('is-media-only');
+      if (poster) poster.hidden = false;
+    };
+    const failed = () => {
+      if (ticket !== generation) return;
+      clearTimeout(replayTimer); player.pause(); player.removeAttribute('src'); player.load(); player.remove(); video = null; fallback();
+      state.textContent = poster?.isConnected ? t('视频暂不可用 · 静态预览', 'Video unavailable · Static preview') : t('视频暂不可用 · 请参考说明', 'Video unavailable · See description'); position();
+    };
+    player.addEventListener('error', failed, {once: true});
+    player.addEventListener('loadeddata', () => {
+      if (ticket !== generation) return;
+      position();
+    });
+    player.addEventListener('play', () => {
+      if (ticket !== generation) return;
+      player.hidden = false; if (poster) poster.hidden = true;
+      panel.classList.add('is-media-only'); position();
+    });
+    const playVideo = async () => {
+      if (ticket !== generation) return;
+      try { await player.play(); }
+      catch {
+        if (ticket === generation && video === player && player.isConnected) {
+          player.hidden = true; fallback();
+          state.textContent = poster?.isConnected ? t('静态预览', 'Static preview') : t('演示视频准备中', 'Demo video coming soon'); position();
+        }
+      }
+    };
+    player.addEventListener('ended', () => {
+      clearTimeout(replayTimer);
+      replayTimer = setTimeout(() => {
+        if (ticket !== generation || video !== player) return;
+        player.currentTime = 0; void playVideo();
+      }, 2000);
+    });
+    host.append(player); state.textContent = t('正在加载演示…', 'Loading demo…');
+    player.src = videoUrl;
+    void playVideo();
+    position();
+  }
+  function open(card, fixed = false) {
+    clearTimeout(enterTimer); clearTimeout(leaveTimer);
+    if (card === current) { pinned ||= fixed; return; }
+    close(); hoveredPanel = false; current = card; pinned = fixed;
+    panel = node('section', 'feature-preview'); panel.id = 'feature-preview'; panel.setAttribute('role', 'region');
+    const title = node('h3', 'preview-title', card.querySelector('.plugin-name').textContent);
+    title.id = 'feature-preview-title'; panel.setAttribute('aria-labelledby', title.id);
+    const dismiss = node('button', 'button quiet preview-close', t('关闭', 'Close')); dismiss.type = 'button';
+    dismiss.addEventListener('click', () => close({restore: pinned || panel.contains(document.activeElement)}));
+    const heading = node('div', 'preview-heading'); heading.append(title, dismiss); panel.append(heading);
+    const host = node('div', 'preview-media'); panel.append(host);
+    const details = node('dl', 'preview-details');
+    const labels = [t('出现位置', 'Location'), t('解决问题', 'Problem'), t('操作与效果', 'Action and result')];
+    previewContent(card.dataset.featureId, locale).forEach((value, index) => {
+      details.append(node('dt', '', labels[index]), node('dd', '', value));
+    });
+    const state = node('p', 'preview-resource-state', t('演示视频准备中', 'Demo video coming soon'));
+    panel.append(details, state);
+    panel.addEventListener('pointerenter', () => { hoveredPanel = true; clearTimeout(leaveTimer); });
+    panel.addEventListener('pointerleave', () => { hoveredPanel = false; scheduleClose(); });
+    panel.addEventListener('focusin', () => { clearTimeout(leaveTimer); });
+    panel.addEventListener('focusout', event => { if (!panel?.contains(event.relatedTarget) && !current?.contains(event.relatedTarget)) close(); });
+    document.querySelector('.dashboard-surface').append(panel);
+    card.classList.add('is-previewing'); grid.classList.add('has-preview');
+    const trigger = card.querySelector('.preview-entry'); trigger.setAttribute('aria-expanded', 'true'); trigger.setAttribute('aria-controls', panel.id);
+    position(); void addMedia(card.dataset.featureId, host, state, generation);
+  }
+  function attach(card) {
+    const entry = node('button', 'preview-entry'); entry.type = 'button'; entry.setAttribute('aria-expanded', 'false');
+    entry.setAttribute('aria-label', `${t('查看效果', 'See how it works')} · ${card.querySelector('.plugin-name').textContent || card.dataset.featureId}`);
+    card.append(entry);
+    on(card, 'pointerenter', () => {
+      if (!fine.matches) return;
+      hoveredCard = card; pendingCard = card;
+
+      clearTimeout(enterTimer); clearTimeout(leaveTimer);
+      enterTimer = setTimeout(() => { pendingCard = null; open(card); }, 200);
+    });
+    on(card, 'pointerleave', () => {
+      if (hoveredCard === card) hoveredCard = null;
+      if (pendingCard === card) { clearTimeout(enterTimer); pendingCard = null; }
+      scheduleClose();
+    });
+    on(entry, 'focus', () => { if (!restoring) open(card); });
+    on(entry, 'click', () => open(card, true));
+    on(card, 'focusout', event => { if (!card.contains(event.relatedTarget) && !panel?.contains(event.relatedTarget) && document.documentElement.dataset.input === 'keyboard') close(); });
+  }
+  on(document, 'keydown', event => {
+    if (event.key === 'Escape' && current) { event.preventDefault(); const restore = pinned || panel.contains(document.activeElement); close({restore}); }
+  });
+  on(document, 'pointerdown', event => {
+    if (!current) return;
+    if (!current.contains(event.target) && !panel.contains(event.target)) close();
+  });
+  on(window, 'scroll', event => {
+    if (panel?.contains(event.target)) return;
+    close();
+  }, {capture: true});
+  on(window, 'resize', () => close());
+  on(document, 'visibilitychange', () => { if (document.hidden) close(); });
+  on(window, 'blur', () => close());
+  on(document.querySelector('#data-dialog'), 'toggle', () => close());
+  on(document.querySelector('#language-menu'), 'toggle', () => close());
+  on(window, 'pagehide', () => { close(); lifetime.abort(); });
+  function setLocale(next) {
+    close(); locale = next; zh = locale === 'zh-CN';
+    for (const card of grid.querySelectorAll('.plugin-card')) card.querySelector('.preview-entry')?.setAttribute('aria-label', `${t('查看效果', 'See how it works')} · ${card.querySelector('.plugin-name').textContent}`);
+  }
+  return {attach, close, setLocale};
+}

package/apps/dashboard/assets/languages.svg

@@ -0,0 +1,18 @@
+<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="m5 8 6 6" />
+  <path d="m4 14 6-6 2-3" />
+  <path d="M2 5h12" />
+  <path d="M7 2h1" />
+  <path d="m22 22-5-10-5 10" />
+  <path d="M14 18h6" />
+</svg>

package/apps/dashboard/assets/preview-content.js

@@ -0,0 +1,41 @@
+// 稳定 feature ID 对应功能说明；演示资源与实时状态分开维护。
+const content = {
+  'model-slider': [
+    ['输入框的模型选择区域。', '模型与思考档位分散，切换不够直接。', '打开模型窗口，选择模型与思考档位；收藏常用模型以便再次选择。'],
+    ['The model selector beside the composer.', 'Switching models and reasoning levels takes extra steps.', 'Open the model panel, choose a model and reasoning level, and save favorites for quick access.']],
+  notes: [
+    ['官方 Prompt 页面与输入框旁的 Quick Prompts。', '常用提示词需要反复查找和复制。', '按分类管理提示词，从 Quick Prompts 填入当前输入框；填入后由你检查并发送。'],
+    ['The Prompt page and Quick Prompts beside the composer.', 'Reusable prompts are hard to find and copy repeatedly.', 'Organize prompts by category and insert one into the current composer. Review it before sending.']],
+  'usage-meter': [
+    ['Codex 侧栏的额度环。', '查看剩余额度需要打开账号菜单。', '用额度环查看使用比例，点击打开用量详情。'],
+    ['The usage ring in the Codex sidebar.', 'Checking remaining usage requires opening the account menu.', 'Read usage at a glance, then click for usage details.']],
+  'session-status': [
+    ['当前会话的状态区域。', '会话用量与生成速度不容易集中查看。', '查看当前会话的用量、上下文和生成指标；可用项目取决于会话与提供方。'],
+    ['The current conversation’s status area.', 'Usage and generation metrics are spread across the interface.', 'Read session usage, context and generation metrics when supported by the session and provider.']],
+  'markdown-reading': [
+    ['Codex 的 Markdown 文件预览。', '长文阅读、脚注跳转和表格查看不够方便。', '在文件预览中阅读增强排版，使用目录、脚注和表格操作。'],
+    ['Markdown file previews in Codex.', 'Long documents, footnotes and tables take extra effort to read.', 'Read enhanced formatting and use the outline, footnote navigation and table actions.']],
+  'file-navigation': [
+    ['Codex 文件预览上方的路径区域。', '浏览相邻目录和文件需要额外跳转。', '点击路径展开分列目录，逐级浏览并打开另一个文件。'],
+    ['The path above a file preview in Codex.', 'Browsing nearby files and folders takes extra navigation.', 'Open the path to browse cascading folder columns and choose another file.']],
+  images: [
+    ['Codex Library 的图片集合与图片查看器。', '查找图片及其提示词需要来回切换。', '浏览图片集合，打开图片查看大图及可追溯的提示词信息。'],
+    ['Image collections in Codex Library and the image viewer.', 'Finding images and their prompts requires switching views.', 'Browse collections, open an image, and inspect available prompt provenance.']],
+  sites: [
+    ['Codex 中的 Sites 页面。', '本地项目与常用网址分散在不同位置。', '收藏网址、发现正在运行的本地站点，并从 Sites 打开。'],
+    ['The Sites page in Codex.', 'Local projects and saved links are scattered.', 'Save URLs, discover running local sites, and open them from Sites.']],
+  'quick-chat': [
+    ['Codex 的浮动 Quick Chat 窗口。', '临时提问时需要切换主窗口，历史不易继续。', '通过快捷键打开 Quick Chat，发送后展开，恢复最小化输入框并固定聊天。'],
+    ['The floating Quick Chat window.', 'Quick questions and continuing recent chats require window switching.', 'Open Quick Chat with a shortcut, expand after sending, restore a minimized composer and pin the chat.']],
+  'sidebar-focus': [
+    ['Codex 左侧栏的分组标题。', '多个侧栏分组展开时，当前分组不容易聚焦。', '点击当前分组，一键收起其他分组；再次点击恢复先前的展开状态。'],
+    ['Group headings in the Codex sidebar.', 'Several expanded groups make the current group harder to focus on.', 'Click a group to collapse other groups. Click again to restore their previous expanded state.']],
+  'hide-upsell-banner': [
+    ['Codex 的额度推广提示区域。', '推广提示占用日常操作空间。', '隐藏额度推广提示，保留真实额度与运行错误反馈。'],
+    ['Usage promotion banners in Codex.', 'Promotions take space during everyday tasks.', 'Hide usage promotions while retaining real usage and error feedback.']],
+};
+export function previewContent(id, locale) {
+  return content[id]?.[locale === 'zh-CN' ? 0 : 1] ?? (locale === 'zh-CN'
+    ? ['Codex 中对应功能的位置。', '请参考功能说明。', '效果取决于当前版本与适用页面。']
+    : ['The feature’s location in Codex.', 'Refer to the feature description.', 'Availability depends on the version and current page.']);
+}

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

@@ -0,0 +1 @@
+{}

package/apps/dashboard/index.html

@@ -6,38 +6,32 @@
     <meta name="color-scheme" content="light dark">
     <title>MineCodex</title>
     <link rel="icon" href="/favicon.svg?v=minecodex-1" type="image/svg+xml">
-    <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>
+    <link rel="stylesheet" href="/styles.css?v=mcx-native-1">
+    <script type="module" src="/app.js?v=mcx-native-1"></script>
     <script type="module" src="/assets/data-transfer.js"></script>
   </head>
   <body>
     <div class="dashboard-surface">
-    <canvas id="agent-world" aria-hidden="true"></canvas>
     <main class="shell">
-      <header class="page-header">
-        <div>
-          <h1><span class="brand-icon" aria-hidden="true"></span><span class="brand-name">MineCodex</span></h1>
-        </div>
-        <div class="header-actions">
-          <div class="language-toggle" role="group" aria-label="Language">
-            <button data-language-choice="zh-CN" type="button" lang="zh-CN" aria-pressed="false">中文</button>
-            <button data-language-choice="en" type="button" lang="en" aria-pressed="false">EN</button>
+      <div class="header-actions">
+          <div class="language-toggle">
+            <button id="language-button" class="language-button" type="button" popovertarget="language-menu" aria-haspopup="true" aria-expanded="false"><span class="ui-icon language-icon" aria-hidden="true"></span></button>
+            <div id="language-menu" class="language-menu" popover="auto" role="group" aria-label="Language">
+              <button data-language-choice="zh-CN" type="button" lang="zh-CN" aria-pressed="false">中文</button>
+              <button data-language-choice="en" type="button" lang="en" aria-pressed="false">English</button>
+            </div>
           </div>
           <div class="theme-toggle" role="group" aria-label="Appearance">
             <span class="theme-selection" aria-hidden="true"></span>
             <button data-theme-choice="light" type="button" aria-label="Light appearance" aria-pressed="false"><span class="ui-icon sun-icon" aria-hidden="true"></span></button>
             <button data-theme-choice="dark" type="button" aria-label="Dark appearance" aria-pressed="false"><span class="ui-icon moon-icon" aria-hidden="true"></span></button>
           </div>
-        </div>
-      </header>
-      <div class="overview">
-        <div class="runtime-state" aria-live="polite">
-          <span id="runtime-dot" class="status-dot" aria-hidden="true"></span>
-          <span id="runtime-label">Connecting…</span>
-        </div>
       </div>
-
+      <header class="page-header">
+        <h1><span class="brand-icon" aria-hidden="true"></span><span class="brand-name">MineCodex</span></h1>
+        <p id="brand-slogan" class="brand-slogan"></p>
+        <p id="brand-description" class="brand-description"></p>
+      </header>
       <section id="restart-notice" class="restart-notice" hidden aria-live="polite">
         <span class="notice-icon ui-icon info-icon" aria-hidden="true"></span>
         <div class="notice-copy">
@@ -70,12 +64,16 @@
       </section>
 
       <footer class="diagnostics">
-        <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>
+        <div class="diagnostics-version">
+          <dl>
+            <div><dt id="version-label">Version</dt><dd id="version-value">—</dd></div>
+          </dl>
+          <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>
+        </div>
+        <div class="diagnostics-actions">
+          <button id="data-button" class="button secondary" type="button">Transfer data</button>
+          <button id="diagnostics-button" class="button secondary" type="button">Copy diagnostics</button>
+        </div>
       </footer>
       <p id="update-result" class="update-result" role="status" hidden></p>
     </main>