cortico 0.1.0 → 0.1.2

package/src/web/client/features/extensions/index.ts

@@ -32,12 +32,88 @@ export interface SearchHitView {
   description: string;
   date?: string;
   publisher?: string;
+  license?: string;
+  keywords?: string[];
   downloads: number;
+  dependents: number;
   links: { npm?: string; repository?: string; homepage?: string };
   installed: boolean;
   kind?: ExtensionKindView;
 }
 
+/** 与 `ExtensionPackageDetail` 同形。点开一张结果卡时才取。 */
+export interface PackageDetailView {
+  name: string;
+  version: string;
+  description?: string;
+  license?: string;
+  keywords?: string[];
+  published?: string;
+  created?: string;
+  versionCount: number;
+  history: Array<{ version: string; date: string }>;
+  deprecated?: string;
+  manifest?: { kind: ExtensionKindView; api: number; consoleClient?: string; consoleStyle?: string };
+  problems?: string[];
+  warnings: string[];
+  frameworkApi: number;
+  engines?: string;
+  unpackedSize?: number;
+  fileCount?: number;
+  dependencies: string[];
+  maintainers: string[];
+  publisher?: string;
+  links: { npm: string; repository?: string; homepage?: string; bugs?: string };
+  installed: boolean;
+  installedSpec?: string;
+}
+
+/** 结果的排序口径。npm 自己的相关度不在其中:同一关键字下的包它给的分全是 0。 */
+export type HitSort = 'downloads' | 'date' | 'name' | 'dependents';
+export const HIT_SORTS: readonly HitSort[] = ['downloads', 'date', 'name', 'dependents'];
+
+/** 一页放几张卡。 */
+export const HITS_PER_PAGE = 12;
+
+export interface ArrangeOptions {
+  filter: string;
+  hideInstalled: boolean;
+  sort: HitSort;
+  page: number;
+  pageSize: number;
+}
+
+/**
+ * 在整份结果上筛选、排序、切页。registry 的搜索端点在 `keywords:` 过滤下不按文本
+ * 缩小结果,所以文本匹配在这里做:包名、描述、关键字任一命中即算。
+ * `page` 超出范围时收回最后一页,返回值里的 `page` 是实际用的那一页。
+ */
+export function arrangeHits(
+  hits: readonly SearchHitView[],
+  opts: ArrangeOptions,
+): { matched: number; pages: number; page: number; shown: SearchHitView[] } {
+  const needle = opts.filter.trim().toLowerCase();
+  const matched = hits.filter((h) => {
+    if (opts.hideInstalled && h.installed) return false;
+    if (!needle) return true;
+    return h.name.toLowerCase().includes(needle)
+      || h.description.toLowerCase().includes(needle)
+      || (h.keywords ?? []).some((k) => k.toLowerCase().includes(needle));
+  });
+  matched.sort((a, b) => {
+    switch (opts.sort) {
+      case 'downloads': return b.downloads - a.downloads || a.name.localeCompare(b.name);
+      // 发布时间是 ISO 串,按串比就是按时间比;没有日期的排在最后
+      case 'date': return (b.date ?? '').localeCompare(a.date ?? '') || a.name.localeCompare(b.name);
+      case 'dependents': return b.dependents - a.dependents || a.name.localeCompare(b.name);
+      default: return a.name.localeCompare(b.name);
+    }
+  });
+  const pages = Math.max(1, Math.ceil(matched.length / opts.pageSize));
+  const page = Math.min(Math.max(opts.page, 0), pages - 1);
+  return { matched: matched.length, pages, page, shown: matched.slice(page * opts.pageSize, (page + 1) * opts.pageSize) };
+}
+
 interface PowerReport {
   ok?: boolean;
   localComplete?: boolean;
@@ -187,6 +263,7 @@ export function mountExtensions(ctx: FeatureContext): void {
       const out = await post<{ result?: string }>('/api/extensions/uninstall', { name: p.name }, { signal: ctx.signal });
       if (ctx.signal.aborted) return;
       setMsg(out?.result?.split('\n')[0] || S.uninstalled);
+      markHit(p.name, false);
       await load();
     } catch (err) {
       if (isAbort(err) || ctx.signal.aborted) return;
@@ -198,32 +275,35 @@ export function mountExtensions(ctx: FeatureContext): void {
   }
 
   /** 装完问一句要不要顺手重启;答"否"也留在清单里标「待重启」。 */
-  async function install(target: { name: string; version?: string } | { path: string }, btn?: HTMLButtonElement): Promise<void> {
+  /** 返回值是"装上了没有":搜索结果与详细页按它更新自己的已安装标记。 */
+  async function install(target: { name: string; version?: string } | { path: string }, btn?: HTMLButtonElement): Promise<boolean> {
     const lock = btn ? ui.disable(btn) : null;
     const hold = ui.toast(S.installing);
     let result = '';
     try {
       const out = await post<{ result?: string }>('/api/extensions/install', target, { signal: ctx.signal });
-      if (ctx.signal.aborted) return;
+      if (ctx.signal.aborted) return false;
       result = out?.result ?? S.installed;
       setMsg(result.split('\n')[0]);
+      if ('name' in target) markHit(target.name, true);
       await load();
     } catch (err) {
-      if (isAbort(err) || ctx.signal.aborted) return;
+      if (isAbort(err) || ctx.signal.aborted) return false;
       setMsg(S.installFailed(errText(err)), true);
-      return;
+      return false;
     } finally {
       hold.dispose();
       lock?.dispose();
     }
-    if (!canRestart) return;
+    if (!canRestart) return true;
     const go = await ui.confirm({
       title: S.installedRestartTitle,
       body: result + '\n\n' + (supervised ? S.installedRestartNote : S.installedNoLoopNote),
       danger: !supervised,
     });
-    if (!go || ctx.signal.aborted) return;
+    if (!go || ctx.signal.aborted) return true;
     await restartProcess(undefined, true);
+    return true;
   }
 
   function extensionCard(p: ExtensionView): HTMLElement {
@@ -299,6 +379,13 @@ export function mountExtensions(ctx: FeatureContext): void {
     desc: S.searchDesc,
   });
   let searchKind: ExtensionKindView = 'world';
+  /** 当前这一类在 npm 上的全部包。筛选、排序、分页都在它上面做,不再往 registry 跑。 */
+  let allHits: SearchHitView[] = [];
+  let filter = '';
+  let sort: HitSort = 'downloads';
+  let hideInstalled = false;
+  let page = 0;
+
   const searchBar = ui.rowbar();
   const kindSeg = ui.segmented(
     [
@@ -312,69 +399,126 @@ export function mountExtensions(ctx: FeatureContext): void {
       onSelect: (v) => {
         searchKind = v as ExtensionKindView;
         paintKeyword();
-        // 换了类就换了关键字,上一类的命中留在屏幕上会被当成这一类的结果
-        resultGrid.replaceChildren();
-        searchMsg.textContent = '';
+        void search();
       },
     },
   );
-  const searchInput = ui.input({ type: 'search', placeholder: S.searchPlaceholder });
-  const searchBtn = ui.button(S.search, { size: 'sm', variant: 'primary', onClick: () => void search() });
-  searchInput.addEventListener('keydown', (ev) => { if (ev.key === 'Enter') void search(); }, { signal: ctx.signal });
-  searchBar.append(kindSeg.el, searchInput, searchBtn);
+  const filterInput = ui.input({
+    type: 'search',
+    placeholder: S.filterPlaceholder,
+    onInput: (v) => {
+      filter = v;
+      page = 0;
+      renderHits();
+    },
+  });
+  const sortSelect = ui.select({
+    value: sort,
+    options: HIT_SORTS.map((value) => ({ value, label: S.sortLabel[value] })),
+    onChange: (v) => {
+      sort = v as HitSort;
+      page = 0;
+      renderHits();
+    },
+  });
+  const hideBox = ui.checkbox(S.hideInstalled, {
+    checked: hideInstalled,
+    onChange: (on) => {
+      hideInstalled = on;
+      page = 0;
+      renderHits();
+    },
+  });
+  const searchBtn = ui.button(S.refresh, { size: 'sm', onClick: () => void search() });
+  searchBar.append(kindSeg.el, filterInput, sortSelect, hideBox.el);
+  // 关键字说明与重取键共一行:上面那行控件已经占满,刷新键挤下去会单独占一行
+  const keywordBar = ui.rowbar();
   const keywordLine = ui.msgline();
   function paintKeyword(): void {
     keywordLine.textContent = S.searchKeywordNote(KIND_KEYWORD[searchKind]);
   }
   paintKeyword();
+  keywordBar.append(keywordLine, ui.h('span', 'grow'), searchBtn);
   const searchMsg = ui.msgline();
   const resultGrid = ui.h('div', 'iogrid');
-  searchSheet.body.append(searchBar, keywordLine, searchMsg, resultGrid);
+  const pager = ui.rowbar();
+  searchSheet.body.append(searchBar, keywordBar, searchMsg, resultGrid, pager);
 
   function openLink(href: string): void {
     view?.open(href, '_blank', 'noopener');
   }
 
+  /** 结果卡只放搜索端点给得起的那几项；契约版本、体积、版本史等着操作员点开再取。 */
   function hitCard(h: SearchHitView): HTMLElement {
-    const card = ui.sheet({ title: h.name, en: S.hitMeta(h.version, h.downloads, h.publisher) });
-    card.el.classList.add('iocard');
-    if (h.kind) {
-      const bar = ui.rowbar();
-      bar.appendChild(ui.pill(KIND_LABEL[h.kind]));
-      card.body.appendChild(bar);
-    }
-    if (h.description) card.body.appendChild(ui.msgline(h.description));
-    const actions = ui.actions();
-    const links: Array<[string, string | undefined]> = [['npm', h.links.npm], [S.linkRepo, h.links.repository], [S.linkHome, h.links.homepage]];
-    for (const [label, href] of links) {
-      if (href) actions.appendChild(ui.button(label, { size: 'sm', onClick: () => openLink(href) }));
-    }
-    const installBtn = ui.button(h.installed ? S.alreadyInstalled : S.install, {
-      size: 'sm',
-      variant: 'primary',
-      onClick: (ev) => void install({ name: h.name, version: h.version }, ev.currentTarget as HTMLButtonElement),
-    });
-    installBtn.disabled = h.installed;
-    actions.appendChild(installBtn);
-    card.body.appendChild(actions);
+    const card = ui.sheet({ title: h.name, en: S.hitMeta(h.version, ui.fmt.count(h.downloads), h.publisher) });
+    card.el.classList.add('iocard', 'iocard-open');
+    if (h.installed) card.el.classList.add('is-installed');
+    card.el.tabIndex = 0;
+    card.el.setAttribute('role', 'button');
+    card.el.title = S.openDetail;
+    // 描述走中性灰(与 provider 卡一致),msgline 的绿留给状态
+    if (h.description) card.body.appendChild(ui.h('div', 'tdesc', h.description));
+    const bar = ui.rowbar();
+    if (h.installed) bar.appendChild(ui.pill(S.alreadyInstalled, 'on'));
+    if (h.license) bar.appendChild(ui.chip(h.license));
+    if (h.date) bar.appendChild(ui.chip(h.date.slice(0, 10)));
+    if (h.dependents > 0) bar.appendChild(ui.chip(S.dependents(h.dependents)));
+    card.body.appendChild(bar);
+    const open = (): void => openDetail(h);
+    card.el.addEventListener('click', open, { signal: ctx.signal });
+    card.el.addEventListener('keydown', (ev: KeyboardEvent) => {
+      if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); open(); }
+    }, { signal: ctx.signal });
     return card.el;
   }
 
+  /** 筛选、排序、翻页一次画完,含结果计数与页脚。 */
+  function renderHits(): void {
+    const arranged = arrangeHits(allHits, { filter, hideInstalled, sort, page, pageSize: HITS_PER_PAGE });
+    page = arranged.page;
+    resultGrid.replaceChildren();
+    for (const h of arranged.shown) resultGrid.appendChild(hitCard(h));
+    if (arranged.matched === 0) {
+      resultGrid.appendChild(ui.placeholder(allHits.length === 0 ? S.noPackages : S.noHits));
+    }
+    searchMsg.className = 'msgline';
+    searchMsg.textContent = arranged.matched === allHits.length
+      ? S.hitCount(allHits.length)
+      : S.hitCountFiltered(arranged.matched, allHits.length);
+
+    pager.replaceChildren();
+    if (arranged.pages <= 1) return;
+    const prev = ui.button(S.prevPage, { size: 'sm', onClick: () => { page -= 1; renderHits(); } });
+    const next = ui.button(S.nextPage, { size: 'sm', onClick: () => { page += 1; renderHits(); } });
+    prev.disabled = arranged.page === 0;
+    next.disabled = arranged.page >= arranged.pages - 1;
+    pager.append(prev, ui.chip(S.pageOf(arranged.page + 1, arranged.pages)), next);
+  }
+
+  /** 装完、卸完之后就地更新这一份结果里的已安装标记,不必再往 registry 跑一趟。 */
+  function markHit(name: string, installed: boolean): void {
+    let touched = false;
+    for (const h of allHits) if (h.name === name && h.installed !== installed) { h.installed = installed; touched = true; }
+    if (touched) renderHits();
+  }
+
   async function search(): Promise<void> {
     const lock = ui.disable(searchBtn);
     searchMsg.textContent = S.searching;
     searchMsg.className = 'msgline';
+    // 换了类就换了关键字:上一类的命中留在屏幕上会被当成这一类的结果
+    resultGrid.replaceChildren();
+    pager.replaceChildren();
+    allHits = [];
+    page = 0;
     try {
-      const q = encodeURIComponent(searchInput.value.trim());
       const data = await get<{ hits?: SearchHitView[] }>(
-        `/api/extensions/search?q=${q}&kind=${searchKind}`,
+        `/api/extensions/search?kind=${searchKind}`,
         { signal: ctx.signal },
       );
       if (ctx.signal.aborted) return;
-      const hits = Array.isArray(data?.hits) ? data.hits : [];
-      resultGrid.replaceChildren();
-      searchMsg.textContent = hits.length === 0 ? S.noHits : S.hitCount(hits.length);
-      for (const h of hits) resultGrid.appendChild(hitCard(h));
+      allHits = Array.isArray(data?.hits) ? data.hits : [];
+      renderHits();
     } catch (err) {
       if (isAbort(err) || ctx.signal.aborted) return;
       searchMsg.textContent = S.searchFailed(errText(err));
@@ -384,6 +528,95 @@ export function mountExtensions(ctx: FeatureContext): void {
     }
   }
 
+  // -------------------------------------------------------------------------
+  // 一个包的详细页
+  // -------------------------------------------------------------------------
+
+  /** 抽屉正文。契约版本、体积、依赖、版本史只有这里有,来自 /api/extensions/package。 */
+  function detailBody(d: PackageDetailView, hit: SearchHitView): HTMLElement {
+    const box = ui.h('div');
+    const bar = ui.rowbar();
+    if (d.manifest) {
+      bar.appendChild(ui.pill(KIND_LABEL[d.manifest.kind]));
+      bar.appendChild(ui.pill(S.apiPill(d.manifest.api), d.manifest.api === d.frameworkApi ? 'on' : 'off'));
+      if (d.manifest.consoleClient) bar.appendChild(ui.pill(S.hasPanel, 'on'));
+    } else {
+      bar.appendChild(ui.pill(S.notLoadable, 'off'));
+    }
+    if (d.installed) bar.appendChild(ui.pill(d.installedSpec ? S.installedSpec(d.installedSpec) : S.alreadyInstalled, 'on'));
+    box.appendChild(bar);
+
+    if (d.description) box.appendChild(ui.h('div', 'tdesc', d.description));
+    if (d.deprecated) box.appendChild(ui.msgline(S.deprecated(d.deprecated), true));
+    for (const p of d.problems ?? []) box.appendChild(ui.msgline(p, true));
+    for (const w of d.warnings ?? []) box.appendChild(ui.msgline(w));
+
+    const rows: Array<{ k: string; v: string }> = [
+      { k: S.fieldVersion, v: `${d.version}${d.published ? ` · ${d.published.slice(0, 10)}` : ''}` },
+      { k: S.fieldReleases, v: S.releaseCount(d.versionCount, d.created ? d.created.slice(0, 10) : '') },
+    ];
+    if (d.history.length > 1) {
+      rows.push({ k: S.fieldHistory, v: d.history.map((h) => `${h.version} ${h.date.slice(0, 10)}`).join('   ') });
+    }
+    if (d.license) rows.push({ k: S.fieldLicense, v: d.license });
+    if (d.unpackedSize) rows.push({ k: S.fieldSize, v: S.sizeAndFiles(ui.fmt.bytes(d.unpackedSize), d.fileCount ?? 0) });
+    if (d.engines) rows.push({ k: S.fieldNode, v: d.engines });
+    rows.push({ k: S.fieldDeps, v: d.dependencies.length ? d.dependencies.join(', ') : S.none });
+    rows.push({ k: S.fieldDownloads, v: S.perMonth(ui.fmt.count(hit.downloads)) });
+    if (hit.dependents > 0) rows.push({ k: S.fieldDependents, v: String(hit.dependents) });
+    if (d.maintainers.length) rows.push({ k: S.fieldMaintainers, v: d.maintainers.join(', ') });
+    if (d.keywords?.length) rows.push({ k: S.fieldKeywords, v: d.keywords.join(', ') });
+    box.appendChild(ui.kv(rows));
+
+    const actions = ui.actions();
+    const links: Array<[string, string | undefined]> = [
+      ['npm', d.links.npm],
+      [S.linkRepo, d.links.repository],
+      [S.linkHome, d.links.homepage],
+      [S.linkBugs, d.links.bugs],
+    ];
+    for (const [label, href] of links) {
+      if (href) actions.appendChild(ui.button(label, { size: 'sm', onClick: () => openLink(href) }));
+    }
+    actions.appendChild(ui.h('span', 'grow'));
+    // 契约版本对不上还是可以装(操作员也许就是要先装上再升级框架),但按钮按危险样式给
+    const loadable = d.manifest !== undefined && d.manifest.api === d.frameworkApi;
+    const installBtn = ui.button(d.installed ? S.alreadyInstalled : S.install, {
+      size: 'sm',
+      variant: loadable ? 'primary' : 'danger',
+      onClick: async (ev) => {
+        const ok = await install({ name: d.name, version: d.version }, ev.currentTarget as HTMLButtonElement);
+        if (!ok) return;
+        installBtn.disabled = true;
+        installBtn.textContent = S.alreadyInstalled;
+      },
+    });
+    installBtn.disabled = d.installed;
+    actions.appendChild(installBtn);
+    box.appendChild(actions);
+    return box;
+  }
+
+  /** 点开一张卡:先开抽屉再取详情,registry 慢的时候抽屉里是"读取中"而不是空白。 */
+  function openDetail(hit: SearchHitView): void {
+    const box = ui.h('div');
+    box.appendChild(ui.placeholder(S.loadingDetail));
+    ui.drawer(hit.name, box);
+    void (async () => {
+      try {
+        const d = await get<PackageDetailView>(
+          `/api/extensions/package?name=${encodeURIComponent(hit.name)}`,
+          { signal: ctx.signal },
+        );
+        if (ctx.signal.aborted) return;
+        box.replaceChildren(detailBody(d, hit));
+      } catch (err) {
+        if (isAbort(err) || ctx.signal.aborted) return;
+        box.replaceChildren(ui.msgline(S.detailFailed(errText(err)), true));
+      }
+    })();
+  }
+
   // -------------------------------------------------------------------------
   // 手动安装
   // -------------------------------------------------------------------------
@@ -410,6 +643,8 @@ export function mountExtensions(ctx: FeatureContext): void {
   root.append(intro, installedSheet.el, installedGroups, searchSheet.el, manualSheet.el);
   installedGroups.appendChild(ui.placeholder(S.loading));
   void load();
+  // 这一类在 npm 上的包一进页就列出来:筛选与排序都在整份结果上做,没有「先搜一下」这一步
+  void search();
 }
 
 export const extensionsFeature: FrameworkFeature = {

package/src/web/client/features/extensions/strings.ts

@@ -60,17 +60,54 @@ const zh = {
 
   searchTitle: '从 npm 安装',
   searchDesc: '扩展拥有与框架相同的文件和网络权限。',
-  searchPlaceholder: '关键字;留空列出全部',
-  search: '搜索',
+  filterPlaceholder: '筛选:包名、描述、关键字',
+  sortLabel: {
+    downloads: '按月下载量',
+    date: '按最近发布',
+    name: '按名字',
+    dependents: '按被依赖数',
+  },
+  hideInstalled: '隐藏已安装',
   searchKeywordNote: (keyword: string) => `列出 npm 上带 ${keyword} 关键字的包。`,
-  searching: '搜索中…',
+  searching: '读取中…',
+  noPackages: 'npm 上还没有这一类的包',
   noHits: '没有匹配的包',
   hitCount: (n: number) => `${n} 个包`,
-  searchFailed: (msg: string) => `搜索失败: ${msg}`,
-  hitMeta: (version: string, downloads: number, publisher?: string) =>
+  hitCountFiltered: (shown: number, total: number) => `${shown} / ${total} 个包`,
+  searchFailed: (msg: string) => `读取失败: ${msg}`,
+  hitMeta: (version: string, downloads: string, publisher?: string) =>
     `${version} · 月下载 ${downloads}${publisher ? ` · ${publisher}` : ''}`,
+  dependents: (n: number) => `被依赖 ${n}`,
+  openDetail: '点开看详情',
+  prevPage: '‹ 上一页',
+  nextPage: '下一页 ›',
+  pageOf: (page: number, pages: number) => `${page} / ${pages}`,
+
+  loadingDetail: '读取包信息…',
+  detailFailed: (msg: string) => `包信息读取失败: ${msg}`,
+  apiPill: (api: number) => `契约 v${api}`,
+  hasPanel: '自带控制台面板',
+  notLoadable: '不是可装载的扩展',
+  deprecated: (note: string) => `npm 上标了弃用: ${note}`,
+  installedSpec: (spec: string) => `已安装 ${spec}`,
+  fieldVersion: '最新版本',
+  fieldReleases: '发布',
+  releaseCount: (n: number, created: string) => `${n} 个版本${created ? `,首发 ${created}` : ''}`,
+  fieldHistory: '近几版',
+  fieldLicense: '许可证',
+  fieldSize: '体积',
+  sizeAndFiles: (size: string, files: number) => `${size} · ${files} 个文件`,
+  fieldNode: 'Node',
+  fieldDeps: '依赖',
+  fieldDownloads: '下载',
+  perMonth: (count: string) => `${count} / 月`,
+  fieldDependents: '被依赖',
+  fieldMaintainers: '维护者',
+  fieldKeywords: '关键字',
+  none: '无',
   linkRepo: '仓库',
   linkHome: '主页',
+  linkBugs: 'issues',
   install: '安装',
   alreadyInstalled: '已安装',
 
@@ -141,17 +178,54 @@ const en: typeof zh = {
 
   searchTitle: 'Install from npm',
   searchDesc: 'Extensions have the same file and network access as the framework.',
-  searchPlaceholder: 'Keyword; empty lists everything',
-  search: 'Search',
+  filterPlaceholder: 'Filter: name, description, keywords',
+  sortLabel: {
+    downloads: 'Monthly downloads',
+    date: 'Recently published',
+    name: 'Name',
+    dependents: 'Dependents',
+  },
+  hideInstalled: 'Hide installed',
   searchKeywordNote: (keyword: string) => `Lists npm packages carrying the ${keyword} keyword.`,
-  searching: 'Searching…',
+  searching: 'Loading…',
+  noPackages: 'No packages of this kind on npm yet',
   noHits: 'No matching packages',
   hitCount: (n: number) => `${n} packages`,
-  searchFailed: (msg: string) => `Search failed: ${msg}`,
-  hitMeta: (version: string, downloads: number, publisher?: string) =>
+  hitCountFiltered: (shown: number, total: number) => `${shown} / ${total} packages`,
+  searchFailed: (msg: string) => `Loading failed: ${msg}`,
+  hitMeta: (version: string, downloads: string, publisher?: string) =>
     `${version} · ${downloads}/month${publisher ? ` · ${publisher}` : ''}`,
+  dependents: (n: number) => `${n} dependents`,
+  openDetail: 'Open for details',
+  prevPage: '‹ Previous',
+  nextPage: 'Next ›',
+  pageOf: (page: number, pages: number) => `${page} / ${pages}`,
+
+  loadingDetail: 'Loading package info…',
+  detailFailed: (msg: string) => `Package info failed to load: ${msg}`,
+  apiPill: (api: number) => `API v${api}`,
+  hasPanel: 'Ships a console panel',
+  notLoadable: 'Not a loadable extension',
+  deprecated: (note: string) => `Deprecated on npm: ${note}`,
+  installedSpec: (spec: string) => `Installed ${spec}`,
+  fieldVersion: 'Latest',
+  fieldReleases: 'Releases',
+  releaseCount: (n: number, created: string) => `${n} versions${created ? `, first ${created}` : ''}`,
+  fieldHistory: 'Recent',
+  fieldLicense: 'License',
+  fieldSize: 'Size',
+  sizeAndFiles: (size: string, files: number) => `${size} · ${files} files`,
+  fieldNode: 'Node',
+  fieldDeps: 'Dependencies',
+  fieldDownloads: 'Downloads',
+  perMonth: (count: string) => `${count}/month`,
+  fieldDependents: 'Dependents',
+  fieldMaintainers: 'Maintainers',
+  fieldKeywords: 'Keywords',
+  none: 'none',
   linkRepo: 'Repository',
   linkHome: 'Homepage',
+  linkBugs: 'Issues',
   install: 'Install',
   alreadyInstalled: 'Installed',
 

package/src/web/client/features/feature.ts

@@ -11,7 +11,7 @@ import type { ConsolePageHost } from '../console-pages/host.ts';
 import type { ConsoleIconName } from '../ui/icons.ts';
 
 /** 嵌在框架页里的控制台页宿主:manifest 与面板加载都由它管,页面只给容器与路由前缀。 */
-export type EmbeddedConsolePageHost = Pick<ConsolePageHost, 'load' | 'show' | 'unmount' | 'pages' | 'find'>;
+export type EmbeddedConsolePageHost = Pick<ConsolePageHost, 'load' | 'show' | 'unmount' | 'pages' | 'find' | 'mountConnection'>;
 
 export interface FeatureContext {
   /** 本页面的 DOM 根。离开时由 host 清空。 */
@@ -57,7 +57,7 @@ export type FrameworkFeature = {
   readonly label: string;
   /** 左栏图标。 World 那一页不走此字段。 */
   readonly icon?: ConsoleIconName;
-  /** 状态灯表中的键；缺省时不声明状态灯。 */
+  /** 这一行那盏灯在灯表里的键。省略就不点灯。 */
   readonly lampId?: string;
   /** 列出的 capability 任一已挂载即显示导航项；省略或为空时始终显示。 */
   readonly needsAny?: readonly string[];

package/src/web/client/features/live/diagnostics.ts

@@ -0,0 +1,32 @@
+import { get } from '../../core/api.ts';
+
+/** `cortico-diagnostics-r-20260917-104402-c2ab-20260917-142530.json`;没有 run id 时写 norun。 */
+export function diagnosticsFileName(runId: string | null, at: Date): string {
+  const p = (n: number): string => String(n).padStart(2, '0');
+  const stamp = `${at.getFullYear()}${p(at.getMonth() + 1)}${p(at.getDate())}`
+    + `-${p(at.getHours())}${p(at.getMinutes())}${p(at.getSeconds())}`;
+  const run = (runId ?? 'norun').replace(/[^\w.-]/g, '_');
+  return `cortico-diagnostics-${run}-${stamp}.json`;
+}
+
+/** 交给浏览器下载。对象 URL 在同一轮事件循环之后撤掉。 */
+export function downloadJson(doc: Document, name: string, data: unknown): void {
+  const url = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }));
+  const link = doc.createElement('a');
+  link.href = url;
+  link.download = name;
+  doc.body.appendChild(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+export interface DiagnosticsDeps {
+  doc: Document;
+  signal: AbortSignal;
+}
+
+export async function exportDiagnostics(deps: DiagnosticsDeps): Promise<void> {
+  const bundle = await get<{ run?: { id?: string | null } }>('/api/diagnostics', { signal: deps.signal });
+  downloadJson(deps.doc, diagnosticsFileName(bundle?.run?.id ?? null, new Date()), bundle);
+}