@stolyarovmn/dsh-ui-registry-aggregator 0.5.0 → 0.5.2

package/README.md

@@ -1,9 +1,20 @@
 # Registry Aggregator for DeepSeek Harness 0.2.x
 
-This branch is the clean DSH `0.2.0` implementation line. It does **not** carry compatibility code or UI workarounds from DSH `0.1.x`.
+Registry Aggregator adds federated plugin discovery and update discovery around the native DeepSeek Harness Plugin Manager.
 
-Current stable version: `0.5.0`  
-Current validation baseline: DSH `v0.2.0-rc.2`. Compatibility checks use the actual running DSH version from the active installation manifest rather than a hardcoded RC.
+This is the clean DSH `0.2.0` implementation line. It does **not** carry DSH `0.1.x` compatibility code.
+
+Current stable version: `0.5.2`  
+Current validation baseline: DSH `v0.2.0-rc.2`  
+Declared DSH compatibility: `>=0.2.0-rc.2 <0.3.0`
+
+Compatibility badges are evaluated against the DSH version that is actually running rather than a hardcoded RC value.
+
+## Screenshot
+
+Real Harness UI, manually verified on DSH `0.2.0-rc.2`:
+
+![Registry Aggregator integrated into the DSH 0.2 Plugin Manager](docs/screenshots/registry-aggregator-v0.5.2.webp)
 
 ## Install from npm
 
@@ -12,62 +23,84 @@ $DSH_VERSION = "0.2.0-rc.2"
 $PROFILE = "dsh-020-test"
 $env:DSH_HOME = "$env:USERPROFILE\.dsh-020-test"
 
-pnpm dlx "@deepseek-ai/dsh@$DSH_VERSION" plugin --profile $PROFILE add "@stolyarovmn/dsh-ui-registry-aggregator@0.5.0"
+pnpm dlx "@deepseek-ai/dsh@$DSH_VERSION" plugin --profile $PROFILE add "@stolyarovmn/dsh-ui-registry-aggregator@0.5.2"
 pnpm dlx "@deepseek-ai/dsh@$DSH_VERSION" --profile $PROFILE
 ```
 
-The package declares DSH compatibility as `>=0.2.0-rc.2 <0.3.0`. Registry compatibility badges are evaluated against the DSH version that is actually running.
+## What it adds
+
+The native Plugin Manager remains responsible for installation, enable/disable, uninstall, and bundle lifecycle. Registry Aggregator adds discovery, compatibility evidence, metadata, and update orchestration.
+
+### Main Plugins page
+
+On DSH `0.2.0-rc.2`, Registry Aggregator extends the main Plugins list with:
 
-## Current milestone
+- `Installed | Sources | Browse | Updates` navigation using the native Installed heading/count visual language;
+- the original native Installed cards as the **Installed** view;
+- **Sources**, **Browse**, and **Updates** directly on the main Plugins page;
+- a numeric update count beside **Updates**;
+- `Update → vX.Y.Z` directly on an installed package when a newer eligible version is available;
+- **Update all** for eligible updates, processed sequentially with Registry Aggregator updating itself last;
+- automatic teardown of the main-page surface when the Plugin Manager opens a bundle/detail page.
 
-The native Plugin Manager remains responsible for package lifecycle. Registry Aggregator adds discovery capabilities around it.
+The supported `plugins.bundle.config` detail view remains available as a fallback inside **Installed → Registry Aggregator**.
 
-Implemented in this milestone:
+> **DSH 0.2.0-rc.2 integration note:** stock rc.2 does not expose a list-level Plugin Manager slot. The main-page integration is therefore an explicit rc.2 compatibility bridge. It waits until the native Plugin Manager inventory has finished loading, does not use a `MutationObserver`, and removes itself on detail pages. When DSH exposes an appropriate list-level slot, this bridge should be replaced by the supported slot API.
+
+### Sources
 
-- native `plugins.bundle.config` integration;
-- `Sources | Browse | Updates` navigation;
-- live source configuration through `ctx.configForms.get('registry-aggregator')`; the bundle slot is presentation-only because DSH does not guarantee a single `form` for bundle-wide pages;
 - built-in npm and GitHub sources;
 - custom JSON and corporate catalog sources;
-- Host-side health checks and discovered-item counts;
-- per-source enable/disable, add, remove, refresh, copy-address, count, and error state;
-- DSH 0.2-native switch geometry and icon-action sizing copied under the plugin namespace;
-- authenticated Host RPC over the DSH Connection service;
-- bounded responses, request timeouts, redirect validation, DNS pinning, and private-network blocking;
-- no duplicate `Installed` view;
-- live federated Browse search across enabled npm, GitHub, custom JSON, and corporate sources;
-- compact single-row source/release/freshness/tag/compatibility/page-size filters on desktop, with responsive wrapping below 900px, multi-source metadata, and 20/50/100 pagination; compatibility uses the native DSH shield contour as its neutral filter icon;
-- combinable multi-sort criteria for relevance, stars, downloads, freshness, and name with per-criterion direction; when several are active they contribute equally through percentile-normalized composite ranking, so every selected criterion can affect the order;
-- npm 30-day download enrichment plus lazy paired `30d | total` stats for visible npm rows; lifetime totals are summed from the package creation date (or npm's 2015-01-10 data floor) in bounded windows, and the UI never presents a partial lifetime sum as a real total;
-- package freshness distinguishes npm release time from GitHub repository push time, so GitHub metadata churn does not make every item look newly released;
-- best-effort package artwork discovery from the DSH top-level manifest `icon` field, returned to the Client as bounded data URLs with the same SVG/PNG/JPEG/WebP and 256 KiB policy as native DSH metadata;
-- popular/default Browse results when the query is empty;
-- real npm/GitHub source marks and a package icon exposed through the DSH 0.2 manifest contract;
-- horizontal layout containment for narrow Plugin Manager detail panes;
-- one-click Browse installation through the native DSH `remote.pluginManager` service: `inspect` → `installBundle`, installed-state synchronization via `listBundles` / `plugin-manager/changed`, and inline failure reporting;
-- icon-only Browse install states using the same local DSH-style glyph language as the rest of the page;
-- explicit `v<version>` package versions plus lazy manifest evidence for GitHub/npm rows;
-- compatibility evidence against the actual running DSH version, following DSH peer semantics for `@deepseek-ai/dsh` and `@deepseek-ai/dsh-*`; Browse shows `Compatible`, `Incompatible`, or neutral `Not verified` as plain colored text, and can filter by compatibility;
-- live Updates discovery from native installed bundles plus latest npm manifests, with per-package update through `remote.pluginManager.installBundle`;
-- no runtime import of Harness Client implementation packages;
-- Harness-provided React and DSH theme tokens.
-
-Known limitations in `0.5.0`:
-
-- build-script approval UI remains in the native **Add plugin** dialog;
-- bulk **Update all** / cancel orchestration is not part of the DSH 0.2 line yet;
-- update discovery for GitHub-only installed dependencies without npm package identity is not implemented yet.
+- enable/disable, add, remove, refresh, copy-address, package/repository count, health, and error state;
+- live configuration through `ctx.configForms.get('registry-aggregator')`;
+- authenticated Host RPC through the DSH Connection service;
+- bounded responses, request timeouts, redirect validation, DNS pinning, and private-network blocking.
+
+### Browse
+
+- federated search across enabled npm, GitHub, custom JSON, and corporate sources;
+- popular/default results when the query is empty;
+- compact source, release, freshness, tag, compatibility, and page-size filters;
+- combinable sorting by relevance, stars, downloads, freshness, and name;
+- multi-criterion percentile-normalized composite ranking;
+- 20 / 50 / 100 pagination;
+- explicit package versions;
+- GitHub stars and release/repository freshness;
+- npm `30d | total` download evidence resolved lazily for visible npm rows;
+- package artwork from the DSH manifest icon contract, with safe repository-local README artwork fallback for npm packages that expose GitHub metadata;
+- `Compatible`, `Incompatible`, and `Not verified` evidence against the actual running DSH version;
+- compatibility filtering;
+- icon-only one-click installation through native `remote.pluginManager.inspect()` → `installBundle()`;
+- known-incompatible packages are disabled before installation is attempted.
+
+### Updates
+
+- update discovery from native installed bundles plus latest npm manifests;
+- per-package update through the native Plugin Manager;
+- package Update uses a two-arrow glyph while content/list Refresh keeps the single-arrow glyph;
+- native installed artwork is reused when available;
+- sequential **Update all**;
+- explicitly incompatible update targets remain disabled;
+- Registry Aggregator updates itself last so it cannot interrupt the remaining queue.
 
 ## Architecture
 
 ```text
 DSH Plugins
-  └─ Installed
-      └─ Registry Aggregator
-          └─ plugins.bundle.config
-              ├─ Sources
-              ├─ Browse
-              └─ Updates
+  ├─ Installed | Sources | Browse | Updates
+  │   ├─ Installed
+  │   │   ├─ native DSH package cards
+  │   │   └─ Update → vX.Y.Z
+  │   ├─ Sources
+  │   ├─ Browse
+  │   └─ Updates
+  │       └─ Update all
+  │
+  └─ Installed → Registry Aggregator
+      └─ plugins.bundle.config
+          ├─ Sources
+          ├─ Browse
+          └─ Updates
 
 Sources UI
   ├─ ctx.configForms.get('registry-aggregator')
@@ -81,19 +114,33 @@ Sources UI
                  ├─ custom-json
                  └─ corporate
 
-Browse Install / Updates
+Plugin lifecycle
   └─ native DSH remote.pluginManager
        ├─ inspect(spec)
        ├─ installBundle(spec)
        └─ listBundles() / plugin-manager/changed
-
-Enable / disable / uninstall
-  └─ native DSH Plugin Manager
 ```
 
+## Known limitations
+
+- build-script approval remains in the native **Add plugin** dialog;
+- **Update all** cancellation is not implemented; eligible updates run sequentially once started;
+- automatic update discovery does not yet cover GitHub-only installed dependencies without npm package identity;
+- the main Plugins-list surface is a version-pinned DSH `0.2.0-rc.2` compatibility bridge because rc.2 has no supported list-level Plugin Manager slot.
+
+## Validation
+
+`0.5.2` was promoted from the manually verified `0.5.2-rc.6` candidate after:
+
+- JavaScript syntax checks;
+- repository unit/client contract tests;
+- `npm pack --dry-run` validation;
+- isolated install smoke test against DSH `0.2.0-rc.2`;
+- real Harness UI verification of the main Plugins-page Browse integration shown above.
+
 ## Test from GitHub
 
-Use a commit SHA from this branch rather than publishing a test package:
+For unreleased development builds, use a commit SHA instead of publishing a test package:
 
 ```powershell
 $DSH_VERSION = "0.2.0-rc.2"
@@ -105,8 +152,6 @@ pnpm dlx "@deepseek-ai/dsh@$DSH_VERSION" plugin --profile $PROFILE add "github:S
 pnpm dlx "@deepseek-ai/dsh@$DSH_VERSION" --profile $PROFILE
 ```
 
-Then open **Plugins → Installed → Registry Aggregator** and verify **Sources**, **Browse**, installation, compatibility filtering, download statistics, and **Updates** in the real Harness UI.
-
 ## Historical lines
 
 - `dsh-0.1.7` — stable `v0.4.17` line for DSH `0.1.7-rc.2`.

package/client.js

@@ -86,6 +86,9 @@ window.__ModuleLoader__.load({
       updateNone: 'Installed plugins are up to date',
       updateNoneBody: 'No newer package versions were found in the connected registries.',
       updateRefresh: 'Check for updates',
+      updatesAvailable: 'Updates: {count} available',
+      updateAll: 'Update all',
+      updatingAll: 'Updating all…',
       downloads30d: 'npm downloads in the last 30 days',
       downloadsTotal: 'npm total downloads',
       filterSource: 'Source',
@@ -198,6 +201,9 @@ window.__ModuleLoader__.load({
       updateNone: '已安装插件均为最新版本',
       updateNoneBody: '在已连接的注册表中没有发现更高版本。',
       updateRefresh: '检查更新',
+      updatesAvailable: '更新：{count} 个可用',
+      updateAll: '全部更新',
+      updatingAll: '正在全部更新…',
       downloads30d: 'npm 最近 30 天下载量',
       downloadsTotal: 'npm 总下载量',
       filterSource: '来源',
@@ -241,6 +247,8 @@ window.__ModuleLoader__.load({
       '.ra-root{box-sizing:border-box;min-width:0;max-width:100%;overflow-x:hidden;color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;padding:2px 0 8px}',
       '.ra-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,440px);padding:4px;margin:12px 0 24px;border-radius:12px;background:var(--dsw-alias-bg-module-platform,var(--dsw-alias-bg-layer-2))}',
       '.ra-tab{height:34px;padding:0 14px;border:.5px solid transparent;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer}',
+      '.ra-tab-label{display:inline-flex;align-items:center;justify-content:center;gap:6px}',
+      '.ra-update-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-foreground);font-size:10px;line-height:16px;font-weight:700}',
       '.ra-tab:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}',
       '.ra-tab:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}',
       '.ra-tab[aria-selected=true]{border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-bg-layer-3,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary);font-weight:600}',
@@ -254,6 +262,7 @@ window.__ModuleLoader__.load({
       '.ra-button:focus-visible,.ra-input:focus-visible,.ra-select:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}',
       '.ra-button:disabled{opacity:.5;cursor:not-allowed}',
       '.ra-button-primary{background:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-foreground)}',
+      '.ra-update-all{display:inline-flex;align-items:center;justify-content:center;gap:6px}',
       '.ra-panel{border:.5px solid var(--dsw-alias-border-l4);border-radius:12px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}',
       '.ra-add-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px}',
       '.ra-add-form{display:grid;grid-template-columns:minmax(160px,1fr) minmax(130px,180px) minmax(220px,1.2fr) auto;gap:10px;padding:12px 13px;border-top:.5px solid var(--dsw-alias-border-l4);align-items:end}',
@@ -615,6 +624,15 @@ window.__ModuleLoader__.load({
       ] })
     }
 
+    function IconUpdate({ size = 16 }) {
+      return h(SvgIcon, { size, children: [
+        h('path', { d: 'M13.5 5.5C12.6 3.2 10.5 1.75 8 1.75C5.9 1.75 4.05 2.75 2.9 4.3L1.75 5.75', stroke: 'currentColor' }),
+        h('path', { d: 'M1.75 2.75V5.75H4.75', stroke: 'currentColor' }),
+        h('path', { d: 'M2.5 10.5C3.4 12.8 5.5 14.25 8 14.25C10.1 14.25 11.95 13.25 13.1 11.7L14.25 10.25', stroke: 'currentColor' }),
+        h('path', { d: 'M14.25 13.25V10.25H11.25', stroke: 'currentColor' }),
+      ] })
+    }
+
     function IconPlus({ size = 16 }) {
       return h(SvgIcon, { size, children: [
         h('path', { d: 'M8 2V14', stroke: 'currentColor' }),
@@ -1669,12 +1687,12 @@ window.__ModuleLoader__.load({
       )
     }
 
-    function UpdatesView({ t }) {
+    function useUpdateDiscovery(enabled = true) {
       const [revision, setRevision] = React.useState(0)
-      const [state, setState] = React.useState({ loading: true, items: [], error: '' })
-      const [operations, setOperations] = React.useState({})
+      const [state, setState] = React.useState({ loading: enabled, items: [], error: '' })
 
       React.useEffect(() => {
+        if (!enabled) return undefined
         let active = true
         const controller = new AbortController()
         const load = async () => {
@@ -1716,36 +1734,76 @@ window.__ModuleLoader__.load({
           controller.abort()
           if (typeof dispose === 'function') dispose()
         }
-      }, [revision])
+      }, [enabled, revision])
+
+      const refresh = React.useCallback(() => setRevision(value => value + 1), [])
+      return { state, refresh }
+    }
+
+    function UpdatesView({ t, discovery }) {
+      const { state, refresh } = discovery
+      const [operations, setOperations] = React.useState({})
+      const [bulkUpdating, setBulkUpdating] = React.useState(false)
 
-      const runUpdate = async item => {
+      const runUpdate = async (item, refreshAfter = true) => {
         const key = item.bundle.name
         const current = operations[key]
-        if (['starting', 'installing', 'applying'].includes(current?.phase)) return
+        if (['starting', 'installing', 'applying'].includes(current?.phase)) return false
         setOperations(value => ({ ...value, [key]: { phase: 'starting', error: '' } }))
         try {
           await updateInstalledPlugin(item.bundle, item.availableVersion, progress => {
             setOperations(value => ({ ...value, [key]: { ...(value[key] ?? {}), ...progress, error: '' } }))
           })
           setOperations(value => ({ ...value, [key]: { phase: 'done', error: '' } }))
-          setRevision(value => value + 1)
+          if (refreshAfter) refresh()
+          return true
         } catch (error) {
           setOperations(value => ({ ...value, [key]: { phase: 'failed', error: String(error?.message ?? error) } }))
+          return false
+        }
+      }
+
+      const runUpdateAll = async () => {
+        if (bulkUpdating || state.loading) return
+        const queue = state.items
+          .filter(item => item.metadata?.compatibility !== 'unsupported')
+          .sort((left, right) => Number(left.bundle.name === PACKAGE) - Number(right.bundle.name === PACKAGE))
+        if (!queue.length) return
+        setBulkUpdating(true)
+        try {
+          for (const item of queue) await runUpdate(item, false)
+        } finally {
+          setBulkUpdating(false)
+          refresh()
         }
       }
 
+      const updatableCount = state.items.filter(item => item.metadata?.compatibility !== 'unsupported').length
+
       return h('section', { className: 'ra-section', 'aria-labelledby': 'ra-updates-title' },
         h('div', { className: 'ra-section-head' },
           h('div', null,
             h('h3', { id: 'ra-updates-title', className: 'ra-heading' }, t('updatesTitle')),
             h('p', { className: 'ra-lead' }, t('updatesLead')),
           ),
-          h(IconButton, {
-            label: t('updateRefresh'),
-            disabled: state.loading,
-            onClick: () => setRevision(value => value + 1),
-            icon: h(IconRefresh, { size: 16, className: state.loading ? 'ra-spin' : undefined }),
-          }),
+          h('div', { className: 'ra-actions' },
+            state.items.length > 1 ? h('button', {
+              type: 'button',
+              className: 'ra-button ra-update-all',
+              title: bulkUpdating ? t('updatingAll') : t('updateAll'),
+              disabled: state.loading || bulkUpdating || updatableCount === 0,
+              onClick: () => { void runUpdateAll() },
+            },
+              h(IconUpdate, { size: 14 }),
+              h('span', null, bulkUpdating ? t('updatingAll') : t('updateAll')),
+            ) : null,
+            h(IconButton, {
+              label: t('updateRefresh'),
+              disabled: state.loading || bulkUpdating,
+              onClick: refresh,
+              icon: h(IconRefresh, { size: 16, className: state.loading ? 'ra-spin' : undefined }),
+            }),
+          ),
         ),
         state.loading
           ? h('div', { className: 'ra-plugin-meta', role: 'status' }, t('updateChecking'))
@@ -1775,7 +1833,7 @@ window.__ModuleLoader__.load({
                     ? t('updateRetry')
                     : format(t, 'updateAction', { version: item.availableVersion })
                   return h('li', { key, className: 'ra-update-row' },
-                    h('span', { className: 'ra-plugin-icon', 'aria-hidden': true }, h(IconPlugin, { size: 16 })),
+                    h('span', { className: 'ra-plugin-icon', 'aria-hidden': true }, h(PluginArtwork, { src: item.bundle?.meta?.icon })),
                     h('div', { className: 'ra-update-main' },
                       h('div', { className: 'ra-update-title' },
                         h('span', null, key),
@@ -1790,13 +1848,13 @@ window.__ModuleLoader__.load({
                     h(IconButton, {
                       label,
                       state: done ? 'done' : failed ? 'error' : undefined,
-                      disabled: busy || done || incompatible,
+                      disabled: bulkUpdating || busy || done || incompatible,
                       onClick: () => { void runUpdate(item) },
                       icon: done
                         ? h(IconCheck, { size: 16 })
                         : busy
                           ? h(IconRefresh, { size: 16, className: 'ra-spin' })
-                          : h(IconRefresh, { size: 16 }),
+                          : h(IconUpdate, { size: 16 }),
                     }),
                   )
                 }),
@@ -1806,6 +1864,7 @@ window.__ModuleLoader__.load({
 
     function RegistryAggregator({ t, view }) {
       const [tab, setTab] = React.useState('sources')
+      const updateDiscovery = useUpdateDiscovery(view === 'page')
       const formState = React.useSyncExternalStore(
         listener => sourceConfigForm.subscribe(listener),
         () => sourceConfigForm.getSnapshot(),
@@ -1816,10 +1875,15 @@ window.__ModuleLoader__.load({
         mutate: (operations, expectedRevision) => sourceConfigForm.mutate(operations, expectedRevision),
       }), [formState])
       if (view !== 'page') return null
+      const updateCount = updateDiscovery.state.items.length
+      const updateLabel = h('span', { className: 'ra-tab-label' },
+        t('updates'),
+        updateCount > 0 ? h('span', { className: 'ra-update-badge', 'aria-hidden': true }, updateCount > 99 ? '99+' : String(updateCount)) : null,
+      )
       const tabs = [
-        ['sources', t('sources')],
-        ['browse', t('browse')],
-        ['updates', t('updates')],
+        ['sources', t('sources'), t('sources')],
+        ['browse', t('browse'), t('browse')],
+        ['updates', updateLabel, updateCount > 0 ? format(t, 'updatesAvailable', { count: updateCount }) : t('updates')],
       ]
       const selectRelative = delta => {
         const index = tabs.findIndex(item => item[0] === tab)
@@ -1829,18 +1893,19 @@ window.__ModuleLoader__.load({
       const body = tab === 'browse'
         ? h(BrowseView, { t })
         : tab === 'updates'
-          ? h(UpdatesView, { t })
+          ? h(UpdatesView, { t, discovery: updateDiscovery })
           : h(SourcesView, { t, form })
 
       return h('div', { className: 'ra-root' },
         h('style', null, css),
         h('div', { className: 'ra-tabs', role: 'tablist', 'aria-label': 'Registry Aggregator' },
-          ...tabs.map(([id, label]) => h('button', {
+          ...tabs.map(([id, label, ariaLabel]) => h('button', {
             key: id,
             type: 'button',
             role: 'tab',
             className: 'ra-tab',
             'aria-selected': tab === id,
+            'aria-label': ariaLabel,
             tabIndex: tab === id ? 0 : -1,
             onClick: () => setTab(id),
             onKeyDown: event => {
@@ -1858,6 +1923,290 @@ window.__ModuleLoader__.load({
       )
     }
 
+
+    // Temporary DSH 0.2.0-rc.2 compatibility surface.
+    // Stock rc.2 has no supported list-level Plugin Manager slot, so this bridge
+    // is deliberately version-pinned and mounts only after the native Installed
+    // group exists. It never observes React DOM mutations and removes itself as
+    // soon as the Plugin Manager navigates to a detail page.
+    function PluginsPageBridgeSurface({ t, installed, cards }) {
+      const [tab, setTab] = React.useState('installed')
+      const discovery = useUpdateDiscovery(true)
+      const [operations, setOperations] = React.useState({})
+      const [bulkUpdating, setBulkUpdating] = React.useState(false)
+      const formState = React.useSyncExternalStore(
+        listener => sourceConfigForm.subscribe(listener),
+        () => sourceConfigForm.getSnapshot(),
+        () => sourceConfigForm.getSnapshot(),
+      )
+      const form = React.useMemo(() => ({
+        state: formState,
+        mutate: (operations, expectedRevision) => sourceConfigForm.mutate(operations, expectedRevision),
+      }), [formState])
+
+      const installedCount = installed.querySelector('[data-plugin-count]')?.textContent
+        ?? String(installed.querySelectorAll('[data-plugin-package]').length)
+      const updateCount = discovery.state.items.length
+      const updatableCount = discovery.state.items.filter(item => item.metadata?.compatibility !== 'unsupported').length
+
+      const runUpdate = async (item, refreshAfter = true) => {
+        const key = item.bundle.name
+        const current = operations[key]
+        if (['starting', 'installing', 'applying'].includes(current?.phase)) return false
+        setOperations(value => ({ ...value, [key]: { phase: 'starting', error: '' } }))
+        try {
+          await updateInstalledPlugin(item.bundle, item.availableVersion, progress => {
+            setOperations(value => ({ ...value, [key]: { ...(value[key] ?? {}), ...progress, error: '' } }))
+          })
+          setOperations(value => ({ ...value, [key]: { phase: 'done', error: '' } }))
+          if (refreshAfter) discovery.refresh()
+          return true
+        } catch (error) {
+          setOperations(value => ({ ...value, [key]: { phase: 'failed', error: String(error?.message ?? error) } }))
+          return false
+        }
+      }
+
+      const runUpdateAll = async () => {
+        if (bulkUpdating || discovery.state.loading) return
+        const queue = discovery.state.items
+          .filter(item => item.metadata?.compatibility !== 'unsupported')
+          .sort((left, right) => Number(left.bundle.name === PACKAGE) - Number(right.bundle.name === PACKAGE))
+        if (!queue.length) return
+        setBulkUpdating(true)
+        try {
+          for (const item of queue) await runUpdate(item, false)
+        } finally {
+          setBulkUpdating(false)
+          discovery.refresh()
+        }
+      }
+
+      React.useEffect(() => {
+        cards.style.display = tab === 'installed' ? '' : 'none'
+        return () => { cards.style.display = '' }
+      }, [cards, tab])
+
+      const updateSignature = discovery.state.items
+        .map(item => [item.bundle?.name, item.bundle?.version, item.availableVersion, item.metadata?.compatibility].join(':'))
+        .join('|')
+      const operationSignature = Object.entries(operations)
+        .map(([key, value]) => [key, value?.phase, value?.error].join(':'))
+        .join('|')
+
+      React.useEffect(() => {
+        const updateByName = new Map(discovery.state.items.map(item => [item.bundle?.name, item]))
+        const created = []
+        for (const card of installed.querySelectorAll('[data-plugin-package]')) {
+          const packageName = card.getAttribute('data-plugin-package')
+          const item = updateByName.get(packageName)
+          const old = card.querySelector('[data-ra-installed-update]')
+          if (old) old.remove()
+          if (!item?.availableVersion) continue
+
+          const toggle = card.querySelector('[role="switch"]')
+          const actionHost = toggle?.parentElement
+          if (!actionHost) continue
+
+          const operation = operations[packageName] ?? {}
+          const busy = bulkUpdating || ['starting', 'installing', 'applying'].includes(operation.phase)
+          const incompatible = item.metadata?.compatibility === 'unsupported'
+          const button = document.createElement('button')
+          button.type = 'button'
+          button.className = 'ra-installed-update'
+          button.setAttribute('data-ra-installed-update', '')
+          button.setAttribute('data-state', operation.phase === 'failed' ? 'error' : busy ? 'busy' : 'ready')
+          button.textContent = 'Update → v' + item.availableVersion
+          button.title = operation.error || (incompatible
+            ? format(t, 'incompatibleTitle', { version: item.metadata?.runtimeVersion ?? '?' })
+            : format(t, 'updateAction', { version: 'v' + item.availableVersion }))
+          button.disabled = busy || incompatible
+          button.addEventListener('click', event => {
+            event.preventDefault()
+            event.stopPropagation()
+            void runUpdate(item)
+          })
+          actionHost.insertBefore(button, toggle)
+          created.push(button)
+        }
+        return () => {
+          for (const button of created) button.remove()
+        }
+      }, [installed, updateSignature, operationSignature, bulkUpdating])
+
+      const bridgeTabs = [
+        ['installed', t('installed'), installedCount],
+        ['sources', t('sources'), ''],
+        ['browse', t('browse'), ''],
+        ['updates', t('updates'), updateCount > 0 ? String(updateCount) : ''],
+      ]
+      const selectRelative = delta => {
+        const index = bridgeTabs.findIndex(item => item[0] === tab)
+        setTab(bridgeTabs[(index + delta + bridgeTabs.length) % bridgeTabs.length][0])
+      }
+      const body = tab === 'sources'
+        ? h(SourcesView, { t, form })
+        : tab === 'browse'
+          ? h(BrowseView, { t })
+          : tab === 'updates'
+            ? h(UpdatesView, { t, discovery })
+            : null
+
+      return h('div', { className: 'ra-native-surface' },
+        h('div', { className: 'ra-native-nav-row' },
+          h('div', { className: 'ra-native-tabs', role: 'tablist', 'aria-label': 'Plugin Manager views' },
+            ...bridgeTabs.flatMap(([id, label, count], index) => [
+              index === 0 ? null : h('span', { key: id + '-separator', className: 'ra-native-separator', 'aria-hidden': true }, '|'),
+              h('button', {
+                key: id,
+                type: 'button',
+                role: 'tab',
+                className: 'ra-native-tab',
+                'aria-selected': tab === id,
+                tabIndex: tab === id ? 0 : -1,
+                onClick: () => setTab(id),
+                onKeyDown: event => {
+                  if (event.key === 'ArrowRight') {
+                    event.preventDefault()
+                    selectRelative(1)
+                  } else if (event.key === 'ArrowLeft') {
+                    event.preventDefault()
+                    selectRelative(-1)
+                  }
+                },
+              },
+                h('span', null, label),
+                count ? h('span', { className: 'ra-native-count' }, count) : null,
+              ),
+            ].filter(Boolean)),
+          ),
+          tab === 'installed' && updateCount > 0
+            ? h('button', {
+              type: 'button',
+              className: 'ra-native-update-all',
+              disabled: discovery.state.loading || bulkUpdating || updatableCount === 0,
+              onClick: () => { void runUpdateAll() },
+            },
+              h(IconUpdate, { size: 14 }),
+              h('span', null, bulkUpdating ? t('updatingAll') : t('updateAll')),
+            )
+            : null,
+        ),
+        body ? h('div', { className: 'ra-native-body' }, body) : null,
+      )
+    }
+
+    function installPluginsPagePollingBridge(ctx) {
+      const doc = window.document
+      if (!doc?.querySelector) return () => {}
+
+      const HOST_ATTR = 'data-registry-aggregator-main-surface'
+      const bridgeCss = [
+        '[' + HOST_ATTR + ']{box-sizing:border-box;min-width:0;width:100%}',
+        '[' + HOST_ATTR + '] .ra-native-surface{min-width:0;width:100%}',
+        '[' + HOST_ATTR + '] .ra-native-nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:22px}',
+        '[' + HOST_ATTR + '] .ra-native-tabs{display:flex;align-items:baseline;min-width:0;flex-wrap:wrap}',
+        '[' + HOST_ATTR + '] .ra-native-tab{display:inline-flex;align-items:baseline;gap:8px;margin:0;padding:0;border:0;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:14px;line-height:22px;font-weight:500;cursor:pointer}',
+        '[' + HOST_ATTR + '] .ra-native-tab[aria-selected=true]{color:var(--dsw-alias-label-primary)}',
+        '[' + HOST_ATTR + '] .ra-native-tab:hover{color:var(--dsw-alias-label-primary)}',
+        '[' + HOST_ATTR + '] .ra-native-tab:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px;border-radius:var(--dsw-radius-xs)}',
+        '[' + HOST_ATTR + '] .ra-native-count{color:var(--dsw-alias-label-caption);font-weight:400;font-variant-numeric:tabular-nums}',
+        '[' + HOST_ATTR + '] .ra-native-separator{padding:0 10px;color:var(--dsw-alias-label-caption);font-size:12px;line-height:22px}',
+        '[' + HOST_ATTR + '] .ra-native-update-all{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:30px;padding:0 10px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;cursor:pointer}',
+        '[' + HOST_ATTR + '] .ra-native-update-all:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}',
+        '[' + HOST_ATTR + '] .ra-native-update-all:disabled{opacity:.5;cursor:default}',
+        '[' + HOST_ATTR + '] .ra-native-body{padding-top:16px}',
+        '.ra-installed-update{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 9px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:18px;white-space:nowrap;cursor:pointer}',
+        '.ra-installed-update:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}',
+        '.ra-installed-update:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:1px}',
+        '.ra-installed-update:disabled{opacity:.5;cursor:default}',
+        '.ra-installed-update[data-state=error]{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 30%,transparent)}',
+      ].join('')
+      let host
+      let root
+      let createRoot
+      let installedGroup
+      let installedHead
+      let cardsList
+      let headDisplay = ''
+      let cardsDisplay = ''
+      let disposed = false
+
+      const disposeRoot = () => {
+        if (root) {
+          try { root.unmount() } catch {}
+          root = undefined
+        }
+        if (installedHead?.isConnected) installedHead.style.display = headDisplay
+        if (cardsList?.isConnected) cardsList.style.display = cardsDisplay
+        if (installedGroup?.querySelectorAll) {
+          for (const button of installedGroup.querySelectorAll('[data-ra-installed-update]')) button.remove()
+        }
+        if (host?.isConnected) host.remove()
+        host = undefined
+        installedGroup = undefined
+        installedHead = undefined
+        cardsList = undefined
+      }
+
+      const reconcile = () => {
+        if (disposed) return
+        const panel = doc.querySelector('section[data-plugin-panel]')
+        if (!panel) {
+          disposeRoot()
+          return
+        }
+        if (panel.querySelector('[data-plugin-loading]')) return
+
+        const installed = panel.querySelector('section[data-plugin-group="bundles"]')
+        if (!installed) {
+          // Detail pages intentionally have no Installed group. Removing the
+          // bridge here prevents the duplicate UI shown above bundle details.
+          disposeRoot()
+          return
+        }
+        const head = installed.firstElementChild
+        const cards = Array.from(installed.children).find(element => element.tagName === 'UL')
+        if (!head || !cards) return
+        if (host?.isConnected && installedGroup === installed && host.parentElement === installed && head.nextElementSibling === host) return
+
+        disposeRoot()
+        installedGroup = installed
+        installedHead = head
+        cardsList = cards
+        headDisplay = head.style.display
+        cardsDisplay = cards.style.display
+        head.style.display = 'none'
+
+        host = doc.createElement('div')
+        host.setAttribute(HOST_ATTR, '')
+        host.setAttribute('aria-label', 'Registry Aggregator')
+        head.insertAdjacentElement('afterend', host)
+
+        try {
+          if (!createRoot) ({ createRoot } = require('react-dom/client'))
+          if (typeof createRoot !== 'function') throw new Error('react-dom/client createRoot is unavailable')
+          root = createRoot(host)
+          root.render(h(React.Fragment, null,
+            h('style', null, css + '\n' + bridgeCss),
+            h(PluginsPageBridgeSurface, { t: ctx.locale.bind(NS), installed, cards }),
+          ))
+        } catch {
+          disposeRoot()
+        }
+      }
+
+      const timer = window.setInterval(reconcile, 750)
+      const initial = window.setTimeout(reconcile, 900)
+
+      return () => {
+        disposed = true
+        window.clearInterval(timer)
+        window.clearTimeout(initial)
+        disposeRoot()
+      }
+    }
+
     return {
       inject: ['slots', 'locale', 'connection', 'configForms', 'remote', 'remote.pluginManager'],
       apply(ctx) {
@@ -1865,6 +2214,7 @@ window.__ModuleLoader__.load({
         remote = ctx.remote
         sourceConfigForm = ctx.configForms.get(HOST_ENTRY)
         ctx.effect(() => ctx.locale.register(NS, { en, zh }), 'registry-aggregator: locale')
+        ctx.effect(() => ctx.configForms.whileServed([HOST_ENTRY], () => installPluginsPagePollingBridge(ctx)), 'registry-aggregator: DSH 0.2.0-rc.2 Plugins page polling bridge')
         ctx.effect(() => ctx.configForms.whileServed([HOST_ENTRY], () =>
           ctx.slots.inject('plugins.bundle.config', () => ctx.slots.register({
             name: 'plugins.bundle.config',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stolyarovmn/dsh-ui-registry-aggregator",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Federated plugin discovery and update UI for DeepSeek Harness 0.2.x, integrated with the native Plugin Manager.",
   "author": {
     "name": "Stolyarovmn",

package/source-core.js

@@ -505,6 +505,13 @@ function cleanUrl(value) {
   }
 }
 
+function manifestRepositoryUrl(manifest) {
+  const repository = manifest?.repository
+  if (typeof repository === 'string') return cleanUrl(repository)
+  if (repository && typeof repository === 'object' && !Array.isArray(repository)) return cleanUrl(repository.url)
+  return undefined
+}
+
 function npmPlugin(entry, source) {
   const pkg = entry?.package
   const name = text(pkg?.name)
@@ -722,6 +729,41 @@ function safeIconPath(value) {
   return { path: clean, mediaType }
 }
 
+function readmeIconPath(markdown) {
+  const source = String(markdown ?? '')
+  const candidates = []
+  const add = (raw, label = '') => {
+    const candidate = text(raw)?.replace(/^<|>$/g, '').split(/[?#]/u)[0]
+    const icon = safeIconPath(candidate)
+    if (!icon) return
+    const signal = (String(label) + ' ' + icon.path).toLowerCase()
+    if (!/(^|[\/_.\s-])(icon|logo|avatar|brand|mark)([\/_.\s-]|$)/u.test(signal)) return
+    const lowerPath = icon.path.toLowerCase()
+    const basename = lowerPath.split('/').pop() ?? ''
+    const score = /^(icon|logo)([._-]|$)/u.test(basename)
+      ? 3
+      : /(^|\/)(assets?|images?|img|media)\//u.test(lowerPath)
+        ? 2
+        : 1
+    candidates.push({ ...icon, score })
+  }
+
+  const htmlImage = /<img\b([^>]*?)>/giu
+  let match
+  while ((match = htmlImage.exec(source))) {
+    const attrs = match[1]
+    const src = /\bsrc\s*=\s*["']([^"']+)["']/iu.exec(attrs)?.[1]
+    const alt = /\balt\s*=\s*["']([^"']*)["']/iu.exec(attrs)?.[1] ?? ''
+    add(src, alt)
+  }
+
+  const markdownImage = /!\[([^\]]*)\]\(([^)\s]+)(?:\s+["'][^"']*["'])?\)/gu
+  while ((match = markdownImage.exec(source))) add(match[2], match[1])
+
+  candidates.sort((left, right) => right.score - left.score)
+  return candidates[0]
+}
+
 function encodedPath(path) {
   return path.split('/').map(part => encodeURIComponent(part)).join('/')
 }
@@ -900,8 +942,10 @@ export async function resolvePluginMetadata(items, options = {}) {
     }
 
     const compatibility = dshCompatibility(manifest, options.runtimeVersion)
+    const repository = manifestRepositoryUrl(manifest) ?? cleanUrl(item?.repository)
     const value = {
       ...(text(manifest?.version) ? { version: text(manifest.version) } : {}),
+      ...(repository ? { repository } : {}),
       compatibility: compatibility.status,
       ...(compatibility.peers.length ? { dshPeers: compatibility.peers } : {}),
       runtimeVersion: text(options.runtimeVersion),
@@ -917,22 +961,54 @@ async function resolveNpmIcon(item, options) {
   if (!packageName || !version) return undefined
   const manifest = await npmManifest(item, options)
   const icon = safeIconPath(manifest?.icon)
-  if (!icon) return undefined
-  const packagePath = packageName.startsWith('@')
-    ? packageName.split('/').map(part => encodeURIComponent(part)).join('/')
-    : encodeURIComponent(packageName)
-  const iconUrl = 'https://unpkg.com/' + packagePath + '@' + encodeURIComponent(version) + '/' + encodedPath(icon.path)
-  return iconDataFromUrl(iconUrl, icon.mediaType, options)
+  if (icon) {
+    const packagePath = packageName.startsWith('@')
+      ? packageName.split('/').map(part => encodeURIComponent(part)).join('/')
+      : encodeURIComponent(packageName)
+    const iconUrl = 'https://unpkg.com/' + packagePath + '@' + encodeURIComponent(version) + '/' + encodedPath(icon.path)
+    return iconDataFromUrl(iconUrl, icon.mediaType, options)
+  }
+  const parts = githubRepositoryParts(manifestRepositoryUrl(manifest))
+  return parts ? githubReadmeIcon(parts, options) : undefined
+}
+
+async function githubReadmeIcon(parts, options) {
+  const source = { id: 'plugin-readme-icon', name: 'plugin README icon', type: 'github', enabled: true }
+  for (const filename of ['README.md', 'readme.md']) {
+    try {
+      const readmeUrl = 'https://raw.githubusercontent.com/' + encodeURIComponent(parts.owner) + '/' + encodeURIComponent(parts.repo) + '/HEAD/' + filename
+      const bytes = await fetchBinary(readmeUrl, source, {
+        ...options,
+        authToken: undefined,
+        allowPrivateNetwork: false,
+        maxBytes: Math.min(options.maxResponseBytes ?? DEFAULT_MAX_RESPONSE_BYTES, 512 * 1024),
+      })
+      const icon = readmeIconPath(new TextDecoder().decode(bytes))
+      if (!icon) continue
+      const iconUrl = 'https://raw.githubusercontent.com/' + encodeURIComponent(parts.owner) + '/' + encodeURIComponent(parts.repo) + '/HEAD/' + encodedPath(icon.path)
+      return await iconDataFromUrl(iconUrl, icon.mediaType, options)
+    } catch {
+      // README artwork is optional evidence; try the next conventional filename.
+    }
+  }
+  return undefined
 }
 
 async function resolveGithubIcon(item, options) {
   const parts = githubRepositoryParts(item?.repository)
   if (!parts) return undefined
-  const manifest = await githubManifest(item, options)
+  let manifest
+  try {
+    manifest = await githubManifest(item, options)
+  } catch {
+    manifest = undefined
+  }
   const icon = safeIconPath(manifest?.icon)
-  if (!icon) return undefined
-  const iconUrl = 'https://raw.githubusercontent.com/' + encodeURIComponent(parts.owner) + '/' + encodeURIComponent(parts.repo) + '/HEAD/' + encodedPath(icon.path)
-  return iconDataFromUrl(iconUrl, icon.mediaType, options)
+  if (icon) {
+    const iconUrl = 'https://raw.githubusercontent.com/' + encodeURIComponent(parts.owner) + '/' + encodeURIComponent(parts.repo) + '/HEAD/' + encodedPath(icon.path)
+    return iconDataFromUrl(iconUrl, icon.mediaType, options)
+  }
+  return githubReadmeIcon(parts, options)
 }
 
 export async function resolvePluginIcons(items, options = {}) {