npm - @huaqiu/dsh-tool-plugin-update - Versions diffs - 0.6.13 → 0.6.16 - Mend

@huaqiu/dsh-tool-plugin-update 0.6.13 → 0.6.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/lib/client.js +2429 -1806
package/lib/client.js.map +1 -1
package/lib/index.mjs +10 -0
package/package.json +3 -3
package/src/client/api.ts +19 -0
package/src/client/badge.ts +59 -0
package/src/client/copy.ts +171 -103
package/src/client/icons.ts +45 -0
package/src/client/index.ts +1156 -1010
package/src/client/update-view.ts +1397 -1186
package/src/client/version.ts +36 -3
package/src/routes.ts +23 -0

package/src/client/update-view.ts CHANGED Viewed

@@ -1,19 +1,35 @@
 /**
- * Plugin-update review view (browser half).
+ * Plugin-update review view (browser half) — the "更新中心" panel.
  *
- * Plain-DOM panel (no React tree) so it can never disturb the DSH shell's
- * reconciliation — same rule as the sidebar entry rows. Rendered content:
+ * Plain-DOM (no React tree) so it can never disturb the DSH shell's
+ * reconciliation — the same rule as the sidebar entry rows. The layout follows
+ * `docs/prototype/plugin_update_ui_ux_prototype.html`; the reasoning behind the
+ * order is in `docs/report/plugin-update-ui-ux-baseline.md`.
  *
- *   - head: title + intro + refresh toolbar (the shell plugin-manager head row)
- *   - state-grouped sections, each a group head + package cards
- *     (48px hairline-framed glyph, title row with a state tag, one-line
- *     version transition, end actions) — the shell's card geometry
- *   - a facts group for the independent HQ Edge runtime report
- *   - footer actions (install / ignore / show again), with a toast that
- *     reports the outcome of an install the way the shell's Toast does
+ * Information architecture, top to bottom, and why:
  *
- * Every surface rides a `--dsw-alias-*` design token (see VIEW_CSS_TEXT), so
- * the panel follows the shell's light/dark theme and its focus-ring contract.
+ *   1. **header** — brand, title, `版本集 vX · N 分钟前`, and the four icon
+ *      actions (refresh · sources · job log · close). The set version and the
+ *      relative check time live here exactly once; the body never repeats them.
+ *   2. **settings strip** (gear) — the two manifest URLs, editable in place.
+ *   3. **check-failed banner** — an error, never the silent empty state.
+ *   4. **active job card** — pulsing title + percent + bar + telemetry +
+ *      4-step pipeline, resumed on open and polled to its end.
+ *   5. **failed-result banner** — error code + Retry + 查看日志. The full log
+ *      lives in the header's drawer; the *outcome* must not hide behind it.
+ *   6. **decision band** — one line: how many plugins, and whether the runtime
+ *      is separately upgradable. This is the "what do I have to decide" row.
+ *   7. **actionable cards** — 单独更新 / 忽略 promoted onto each card; the
+ *      collapsible drawer keeps only the changelog.
+ *   8. **runtime card** — amber, because a swap is not a plugin install.
+ *   9. **已忽略 / 已是最新 / 版本说明** — collapsed by default: nothing that
+ *      needs no action may sit above something that does.
+ *  10. **footer** — the primary CTA plus its honest meta line, both reactive to
+ *      every state (idle / installing / failed check / up to date).
+ *
+ * The job log is a drawer inside the panel (`.hqpu-log`), not an inline block:
+ * a full set lists one row per component, which as inline content pushed every
+ * actionable card below the fold.
  *
  * @module
  */
@@ -24,6 +40,7 @@ import {
   installSet,
   requestRuntimeUpdate,
   runtimeLatestVersion,
+  runtimeUpdateOffered,
   setPluginUpdateSource,
   setRuntimeUpdateSource,
   unignoreOffer,
@@ -34,14 +51,18 @@ import {
   type ReleaseInfo,
   type RuntimeUpdateSource,
   type UpdateJob,
+  type UpdateStep,
 } from './api.js'
 import { formatMb, type UpdateCopy } from './copy.js'
+import { actionableUpdateCount } from './version.js'
 import {
+  BOLT_ICON,
   CHECK_CIRCLE_ICON,
+  CHEVRON_RIGHT_ICON,
   CLOSE_ICON,
-  DOWNLOAD_ICON,
-  INFO_ICON,
-  PLUGIN_ICON,
+  COPY_ICON,
+  EYE_OFF_ICON,
+  LOG_ICON,
   REFRESH_ICON,
   WARNING_ICON,
 } from './icons.js'
@@ -53,7 +74,7 @@ export interface UpdateStoreLike {
   setInstalling(flag: boolean): void
   /** The durable job the server currently reports as active (resumed). */
   activeJob(): UpdateJob | null
-  /** Bounded recent jobs (newest first), for the result/history view. */
+  /** Bounded recent jobs (newest first), for the log drawer. */
   recentJobs(): UpdateJob[]
   refresh(): Promise<PluginUpdateReport | null>
   /** Force a fresh update check (used by the failed-check Retry action). */
@@ -66,6 +87,11 @@ export interface UpdateStoreLike {
 /** How long the outcome toast stays up, in milliseconds. */
 const TOAST_HOLD_MS = 4000
+/** Which manifest an editor belongs to — drives data attributes + CSS hook. */
+export type SourceKind = 'runtime' | 'plugin'
+// ── Small DOM helpers ──────────────────────────────────────────────────────
 function el<K extends keyof HTMLElementTagNameMap>(
   tag: K,
   className = '',
@@ -93,6 +119,14 @@ function iconButton(
   return button
 }
+/** A text-link button (重新尝试, 展开版本日志, 忽略此版本 …). */
+function linkButton(className: string, label: string, onClick: () => void): HTMLButtonElement {
+  const button = el('button', className, label)
+  button.type = 'button'
+  button.addEventListener('click', onClick)
+  return button
+}
 /**
  * Compact a package name to what a person calls it — the shell plugin
  * manager's own rule (`presentation.ts` `shortName`), so both UIs read the
@@ -103,211 +137,30 @@ export function shortName(name: string): string {
   return unscoped.replace(/^dsh-(?:host-|client-)?/, '')
 }
-/** The one-line version transition under a card's title. */
-function versionLine(item: PluginUpdateItem): string {
-  switch (item.state) {
-    case 'current':
-      return item.currentVersion ?? item.availableVersion
-    case 'install':
-      return item.availableVersion
-    default:
-      // An absent plugin names only the version it would gain.
-      return item.currentVersion === null
-        ? item.availableVersion
-        : `${item.currentVersion} → ${item.availableVersion}`
-  }
-}
 /** Two-letter avatar initials for a card (CJK-safe). */
 function avatarInitials(item: PluginUpdateItem): string {
   const src =
     typeof item.displayName === 'string' && item.displayName.trim().length > 0
       ? item.displayName.trim()
       : shortName(item.name)
-  if (/[⺀-鿿]/.test(src)) return src.slice(0, 2)
+  if (/[\u2E80-\u9FFF]/.test(src)) return src.slice(0, 2)
   const words = src.split(/[\s_\-./@]+/).filter(Boolean)
   if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase()
   return src.replace(/^@/, '').slice(0, 2).toUpperCase()
 }
-/** Shared per-card changelog toggle drawer (the per-plugin changes[] list). */
-function changelogDrawer(
-  item: PluginUpdateItem,
-  copy: UpdateCopy,
-  open: boolean,
-  onInstall: () => void,
-  onIgnore: () => void,
-): HTMLElement {
-  const drawer = el('div', 'hqpu-changelog-drawer')
-  drawer.style.display = open ? '' : 'none'
-  drawer.append(el('div', 'hqpu-changelog-drawer-title', copy.ui.changelogTitle))
-  const ul = el('ul')
-  for (const change of item.changes ?? []) {
-    if (typeof change === 'string' && change.length > 0) ul.append(el('li', '', change))
-  }
-  if (ul.childElementCount > 0) drawer.append(ul)
-  const actions = el('div', 'hqpu-changelog-actions')
-  if (item.state === 'update' || item.state === 'install') {
-    const install = el('button', 'hqpu-card-action hqpu-card-action--install', copy.installOnePlugin)
-    install.type = 'button'
-    install.title = copy.installOneTip
-    install.addEventListener('click', onInstall)
-    const ignore = el('button', 'hqpu-card-action', copy.ignore)
-    ignore.type = 'button'
-    ignore.addEventListener('click', onIgnore)
-    actions.append(install, ignore)
-  } else if (item.state === 'ignored') {
-    const show = el('button', 'hqpu-card-action hqpu-card-action--install', copy.unignore)
-    show.type = 'button'
-    show.addEventListener('click', onIgnore)
-    actions.append(show)
-  }
-  if (actions.childElementCount > 0) drawer.append(actions)
-  return drawer
-}
-/** One package card per the mockup: avatar initials, display name + package
- *  subtitle, old→new version row (new in emerald), a 日志 toggle expanding the
- *  inline changelog. */
-function packageCard(
-  item: PluginUpdateItem,
-  copy: UpdateCopy,
-  open: boolean,
-  onToggle: () => void,
-  onInstall: () => void,
-  onIgnore: () => void,
-): HTMLLIElement {
-  const card = el('li', 'hqpu-card')
-  card.dataset.pluginName = item.name
-  card.dataset.state = item.state
-  const head = el('div', 'hqpu-card-head')
-  const left = el('div')
-  const avatar = el('span', 'hqpu-avatar', avatarInitials(item))
-  avatar.setAttribute('aria-hidden', 'true')
-  const main = el('div', 'hqpu-card-main')
-  const titleText =
-    typeof item.displayName === 'string' && item.displayName.trim().length > 0
-      ? item.displayName.trim()
-      : shortName(item.name)
-  main.append(el('span', 'hqpu-card-title', titleText))
-  main.append(el('span', 'hqpu-card-sub', shortName(item.name)))
-  // old → new version row; the NEW version renders in emerald.
-  const ver = el('div', 'hqpu-version-row')
-  if (item.currentVersion !== null && item.currentVersion !== undefined) {
-    ver.append(el('span', 'hqpu-ver-old', item.currentVersion))
-    ver.append(el('span', 'hqpu-ver-arrow', '→'))
-  }
-  const size = formatMb(item.sizeBytes ?? 0)
-  ver.append(
-    el('span', 'hqpu-ver-new', size.length > 0 ? `${item.availableVersion} (${size})` : item.availableVersion),
-  )
-  main.append(ver)
-  left.append(avatar, main)
-  const right = el('div', 'hqpu-card-end')
-  const hasDetails = (Array.isArray(item.changes) && item.changes.length > 0) ||
-    item.state === 'update' || item.state === 'install' || item.state === 'ignored'
-  if (hasDetails) {
-    const toggle = el('button', 'hqpu-log-toggle')
-    toggle.type = 'button'
-    toggle.dataset.open = open ? 'true' : 'false'
-    toggle.innerHTML = `${copy.ui.changelogBtn}<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6"/></svg>`
-    toggle.addEventListener('click', onToggle)
-    right.append(toggle)
-  }
-  head.append(left, right)
-  card.append(head)
-  // The actions live in the expanded changelog/details drawer so cards keep
-  // their compact layout until a person asks for more information.
-  if (hasDetails) {
-    card.append(changelogDrawer(item, copy, open, onInstall, onIgnore))
-  }
-  return card
-}
-/** A section: head (title + count pill + expand-all toggle) then its cards. */
-function group(
-  heading: string,
-  items: PluginUpdateItem[],
-  copy: UpdateCopy,
-  changelogOpen: Set<string>,
-  allOpen: boolean,
-  onToggle: (name: string) => void,
-  onToggleAll: () => void,
-  onInstall: (name: string) => void,
-  onIgnore: (item: PluginUpdateItem) => void,
-): HTMLElement | null {
-  if (items.length === 0) return null
-  const section = el('section', 'hqpu-group')
-  section.dataset.group = heading
-  const head = el('div', 'hqpu-section-head')
-  const titleWrap = el('div', 'hqpu-section-title')
-  titleWrap.append(el('span', '', heading))
-  titleWrap.append(el('span', 'hqpu-count-pill', String(items.length)))
-  head.append(titleWrap)
-  // Expand-all only makes sense over actionable, changelog-bearing cards.
-  const actionable = items.some((i) => Array.isArray(i.changes) && i.changes.length > 0)
-  if (actionable) {
-    const all = el('button', 'hqpu-all-changelog', copy.ui.allChangelog)
-    all.type = 'button'
-    all.addEventListener('click', onToggleAll)
-    head.append(all)
-  }
-  const list = el('ul', 'hqpu-cards')
-  for (const item of items) {
-    list.append(packageCard(item, copy, allOpen || changelogOpen.has(item.name), () => onToggle(item.name), () => onInstall(item.name), () => onIgnore(item)))
-  }
-  section.append(head, list)
-  return section
+/** The name a card shows: the manifest's displayName, else the short name. */
+function displayNameOf(item: PluginUpdateItem): string {
+  return typeof item.displayName === 'string' && item.displayName.trim().length > 0
+    ? item.displayName.trim()
+    : shortName(item.name)
 }
-/** First-read placeholders, sharing the card and text-line layout. */
-function skeleton(copy: UpdateCopy): HTMLElement {
-  const section = el('section', 'hqpu-group')
-  section.setAttribute('role', 'status')
-  section.dataset.loading = ''
-  const head = el('div', 'hqpu-group-head')
-  head.setAttribute('aria-hidden', 'true')
-  const heading = el('span', 'hqpu-group-title hqpu-skeleton-text hqpu-skeleton-heading')
-  const headingBar = el('span', 'hqpu-skeleton-fill hqpu-skeleton-bar')
-  heading.append(headingBar)
-  head.append(heading)
-  const list = el('ul', 'hqpu-cards')
-  list.setAttribute('aria-hidden', 'true')
-  for (let index = 0; index < 3; index += 1) {
-    const card = el('li', 'hqpu-card')
-    const cardHead = el('div', 'hqpu-card-head')
-    const glyph = el('span', 'hqpu-card-icon hqpu-skeleton-fill hqpu-skeleton-icon')
-    const main = el('div', 'hqpu-card-main')
-    const titleRow = el('div', 'hqpu-title-row')
-    const title = el('span', 'hqpu-card-title hqpu-skeleton-text hqpu-skeleton-title')
-    title.append(el('span', 'hqpu-skeleton-fill hqpu-skeleton-bar'))
-    titleRow.append(title)
-    const desc = el('span', 'hqpu-card-desc hqpu-skeleton-text hqpu-skeleton-desc')
-    desc.append(el('span', 'hqpu-skeleton-fill hqpu-skeleton-bar'))
-    main.append(titleRow, desc)
-    cardHead.append(glyph, main)
-    const end = el('div', 'hqpu-card-end')
-    end.setAttribute('aria-hidden', 'true')
-    cardHead.append(end)
-    card.append(cardHead)
-    list.append(card)
-  }
-  section.append(head, list)
-  // The skeleton replaces the whole column, so label it for screen readers.
-  section.setAttribute('aria-label', copy.loading)
-  return section
+function isActionable(item: PluginUpdateItem): boolean {
+  return item.state === 'update' || item.state === 'install'
 }
-// ── Durable job views (active / result / recent) ───────────────────────────
+// ── Time / size formatting ────────────────────────────────────────────────
 /** Format a byte count for the progress line, or null when unknown. */
 function formatBytes(n: number | undefined): string | null {
@@ -318,16 +171,7 @@ function formatBytes(n: number | undefined): string | null {
   return `${n} B`
 }
-/** Format an ETA in seconds to a short human string, or null when unknown. */
-function formatEta(seconds: number | undefined): string | null {
-  if (seconds === undefined || !Number.isFinite(seconds) || seconds <= 0) return null
-  if (seconds < 60) return `${Math.round(seconds)} s`
-  const minutes = Math.round(seconds / 60)
-  if (minutes < 60) return `${minutes} min`
-  return `${Math.floor(minutes / 60)} h ${minutes % 60} min`
-}
-/** "上次检查: N 分钟前" — relative time from an ISO timestamp. */
+/** "N 分钟前" — relative time from an ISO timestamp. */
 function relativeAgo(iso: string | null | undefined, copy: UpdateCopy): string | null {
   if (typeof iso !== 'string' || iso.length === 0) return null
   const then = new Date(iso).getTime()
@@ -340,6 +184,19 @@ function relativeAgo(iso: string | null | undefined, copy: UpdateCopy): string |
   return copy.ui.agoDays(Math.round(hours / 24))
 }
+/** Short absolute time for log rows: "10/29 14:34". */
+function shortWhen(iso: string | null | undefined): string {
+  if (typeof iso !== 'string' || iso.length === 0) return ''
+  const at = new Date(iso)
+  if (Number.isNaN(at.getTime())) return ''
+  return at.toLocaleString(undefined, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
 function jobKindLabel(job: UpdateJob, copy: UpdateCopy): string {
   return job.kind === 'runtime' ? copy.job.kindRuntime : copy.job.kindPluginSet
 }
@@ -349,39 +206,13 @@ function phaseLabel(job: UpdateJob, copy: UpdateCopy): string {
   return copy.job.phase[job.phase] ?? job.phase
 }
-/** One per-step line for plugin-set installs (and any job that reports steps). */
-function stepsList(job: UpdateJob, copy: UpdateCopy): HTMLElement | null {
-  if (!Array.isArray(job.steps) || job.steps.length === 0) return null
-  const wrap = el('div', 'hqpu-job-steps')
-  wrap.append(el('p', 'hqpu-group-count', copy.job.stepsTitle))
-  const ol = el('ol', 'hqpu-steps')
-  for (const step of job.steps) {
-    const li = el('li', `hqpu-step hqpu-step--${step.state}`)
-    const dot = el('span', 'hqpu-dot')
-    dot.dataset.state =
-      step.state === 'installed'
-        ? 'done'
-        : step.state === 'failed'
-          ? 'error'
-          : step.state === 'running'
-            ? 'warning'
-            : 'idle'
-    li.append(dot)
-    const text = step.message && step.message.length > 0 ? `${step.name} — ${step.message}` : step.name
-    li.append(el('span', '', text))
-    ol.append(li)
-  }
-  wrap.append(ol)
-  return wrap
-}
 /** Map a job phase onto the 4-step indicator index (下载/校验/替换/重启). */
 function stepIndex(phase: UpdateJob['phase']): number {
   switch (phase) {
     case 'downloading':
+    case 'resolving':
       return 0
     case 'verifying':
-    case 'resolving':
       return 1
     case 'staging':
     case 'activating':
@@ -391,25 +222,228 @@ function stepIndex(phase: UpdateJob['phase']): number {
     case 'verifying-after-restart':
       return 3
     case 'queued':
-      return -1
     default:
       return -1
   }
 }
+// ── Section pieces ────────────────────────────────────────────────────────
+/**
+ * A collapsible section: chevron + title + count, an optional right-hand note,
+ * and a body that only exists in the DOM while open.
+ *
+ * Native `<details>` was the alternative, but it cannot express the
+ * "collapsed by default, opened by state" rule the 已是最新 group needs without
+ * a JS patch anyway, and its summary cannot host the trailing note in one row.
+ */
+function disclosure(opts: {
+  id: string
+  title: string
+  count?: string
+  note?: string
+  open: boolean
+  onToggle: () => void
+  build: () => HTMLElement[]
+}): HTMLElement {
+  const section = el('section', 'hqpu-disc')
+  // The title doubles as the group hook (`[data-group="已是最新"]`), matching
+  // the actionable group's convention so callers need one selector style.
+  section.dataset.group = opts.title
+  const head = el('button', 'hqpu-disc-head')
+  head.type = 'button'
+  head.setAttribute('aria-expanded', opts.open ? 'true' : 'false')
+  head.setAttribute('aria-controls', opts.id)
+  const left = el('span', 'hqpu-disc-left')
+  const chevron = el('span', 'hqpu-disc-chevron')
+  chevron.innerHTML = CHEVRON_RIGHT_ICON(12)
+  left.append(chevron, el('span', 'hqpu-disc-title', opts.title))
+  if (opts.count !== undefined) left.append(el('span', 'hqpu-disc-count', opts.count))
+  head.append(left)
+  if (opts.note !== undefined && opts.note.length > 0) {
+    head.append(el('span', 'hqpu-disc-note', opts.note))
+  }
+  head.addEventListener('click', opts.onToggle)
+  section.append(head)
+  if (opts.open) {
+    const body = el('div', 'hqpu-disc-body')
+    body.id = opts.id
+    for (const node of opts.build()) body.append(node)
+    section.append(body)
+  }
+  return section
+}
+/** One muted row in a collapsed group (current or ignored plugin). */
+function pluginRow(
+  item: PluginUpdateItem,
+  copy: UpdateCopy,
+  onToggleIgnore: () => void,
+): HTMLLIElement {
+  const row = el('li', 'hqpu-row')
+  row.dataset.pluginName = item.name
+  row.dataset.state = item.state
+  row.append(el('span', 'hqpu-row-name', displayNameOf(item)))
+  const end = el('span', 'hqpu-row-end')
+  const version = item.currentVersion ?? item.availableVersion
+  end.append(el('span', 'hqpu-row-meta', copy.ui.upToDateRow(version)))
+  if (item.state === 'ignored') {
+    end.append(
+      linkButton('hqpu-link hqpu-link--tiny', copy.unignore, onToggleIgnore),
+    )
+  }
+  row.append(end)
+  return row
+}
+/**
+ * One actionable plugin card.
+ *
+ * Actions live on the card, not inside the changelog drawer: the drawer is for
+ * content (what changed), and hiding 单独更新 / 忽略 behind a disclosure made
+ * the set-level footer CTA the only discoverable action.
+ */
+function pluginCard(
+  item: PluginUpdateItem,
+  copy: UpdateCopy,
+  opts: { changesOpen: boolean; onToggleChanges: () => void; onInstall: () => void; onIgnore: () => void; busy: boolean },
+): HTMLLIElement {
+  const card = el('li', 'hqpu-card')
+  card.dataset.pluginName = item.name
+  card.dataset.state = item.state
+  const head = el('div', 'hqpu-card-head')
+  const id = el('div', 'hqpu-card-id')
+  const avatar = el('span', 'hqpu-avatar', avatarInitials(item))
+  avatar.setAttribute('aria-hidden', 'true')
+  const main = el('div', 'hqpu-card-main')
+  main.append(el('span', 'hqpu-card-title', displayNameOf(item)))
+  main.append(el('span', 'hqpu-card-sub', shortName(item.name)))
+  id.append(avatar, main)
+  const end = el('div', 'hqpu-card-end')
+  const install = el(
+    'button',
+    'hqpu-card-action hqpu-card-action--install',
+    item.state === 'install' ? copy.ui.singleInstall : copy.ui.singleUpdate,
+  )
+  install.type = 'button'
+  install.title = copy.ui.singleUpdateTip
+  install.disabled = opts.busy
+  install.addEventListener('click', opts.onInstall)
+  const ignore = iconButton(
+    'hqpu-icon-btn hqpu-icon-btn--sm',
+    EYE_OFF_ICON(14),
+    copy.ui.ignorePlugin,
+    opts.onIgnore,
+  )
+  ignore.disabled = opts.busy
+  end.append(install, ignore)
+  head.append(id, end)
+  card.append(head)
+  // Version row + the changelog toggle, on one line.
+  const foot = el('div', 'hqpu-card-foot')
+  const ver = el('div', 'hqpu-version-row')
+  if (item.currentVersion !== null && item.currentVersion !== undefined) {
+    ver.append(el('span', 'hqpu-ver-old', item.currentVersion))
+    ver.append(el('span', 'hqpu-ver-arrow', '→'))
+  }
+  ver.append(el('span', 'hqpu-ver-new', item.availableVersion))
+  const size = formatMb(item.sizeBytes ?? 0)
+  if (size.length > 0) ver.append(el('span', 'hqpu-ver-size', `(${size})`))
+  foot.append(ver)
+  const changes = Array.isArray(item.changes)
+    ? item.changes.filter((c) => typeof c === 'string' && c.length > 0)
+    : []
+  if (changes.length > 0) {
+    const toggle = el('button', 'hqpu-toggle')
+    toggle.type = 'button'
+    toggle.dataset.changesToggle = ''
+    toggle.dataset.open = opts.changesOpen ? 'true' : 'false'
+    toggle.setAttribute('aria-expanded', opts.changesOpen ? 'true' : 'false')
+    toggle.append(el('span', '', copy.ui.changesToggle))
+    const chevron = el('span', 'hqpu-toggle-chevron')
+    chevron.innerHTML = CHEVRON_RIGHT_ICON(12)
+    toggle.append(chevron)
+    toggle.addEventListener('click', opts.onToggleChanges)
+    foot.append(toggle)
+  }
+  card.append(foot)
+  if (changes.length > 0 && opts.changesOpen) {
+    const drawer = el('div', 'hqpu-changes')
+    drawer.append(el('p', 'hqpu-changes-title', copy.ui.changesTitle(item.availableVersion)))
+    const ul = el('ul')
+    for (const change of changes) ul.append(el('li', '', change))
+    drawer.append(ul)
+    card.append(drawer)
+  }
+  return card
+}
+/** The "what do I actually have to decide" band, above every list. */
+function decisionBand(report: PluginUpdateReport, copy: UpdateCopy): HTMLElement | null {
+  const plugins = actionableUpdateCount(report)
+  const runtime = runtimeUpdateOffered(report.runtime)
+  if (plugins === 0 && !runtime) return null
+  const band = el('div', 'hqpu-decision')
+  band.dataset.role = 'decision-band'
+  if (plugins > 0) band.append(el('span', 'hqpu-decision-main', copy.ui.summaryPlugins(plugins)))
+  if (plugins > 0 && runtime) {
+    const dot = el('span', 'hqpu-decision-dot')
+    dot.setAttribute('aria-hidden', 'true')
+    band.append(dot)
+  }
+  if (runtime) band.append(el('span', 'hqpu-decision-sub', copy.ui.summaryRuntime))
+  return band
+}
 /**
- * The ACTIVE-JOB banner per the mockup: pulsing brand dot + job title with the
- * target version, mono percentage, a gradient bar only when `percent != null`,
- * phase + speed line ("3.1 MB/s (286MB / 450MB)"), and a 4-step indicator row
- * (done=emerald, active=pulsing brand, upcoming=muted).
+ * Check-status banner. A FAILED check is a red alert with its reason and a
+ * retry — never the silent "no updates" empty state, which reads as success.
+ */
+function checkBanner(
+  report: PluginUpdateReport,
+  copy: UpdateCopy,
+  onRetry: () => void,
+): HTMLElement | null {
+  const failed = typeof report.lastError === 'string' && report.lastError.length > 0
+  if (!failed) return null
+  const section = el('section', 'hqpu-group')
+  section.dataset.group = 'check-status'
+  const card = el('div', 'hqpu-error')
+  card.dataset.tone = 'danger'
+  const head = el('div', 'hqpu-error-head')
+  const icon = el('span', 'hqpu-error-icon')
+  icon.innerHTML = WARNING_ICON(14)
+  const text = el('div', 'hqpu-error-text')
+  text.append(el('p', 'hqpu-error-title', copy.checkFailedTitle))
+  text.append(el('p', 'hqpu-error-body', report.lastError as string))
+  head.append(icon, text)
+  card.append(head)
+  const foot = el('div', 'hqpu-error-foot')
+  if (report.items.length > 0) foot.append(el('span', '', copy.staleNote))
+  foot.append(linkButton('hqpu-link', copy.retryNow, onRetry))
+  card.append(foot)
+  section.append(card)
+  return section
+}
+/**
+ * The active job card: title (with the target version) + percent, a
+ * determinate bar when the server publishes one, phase + telemetry, the honest
+ * "closing does not cancel" note, and the 4-step pipeline.
  */
 function activeJobView(job: UpdateJob, copy: UpdateCopy): HTMLElement {
   const section = el('section', 'hqpu-group')
   section.dataset.group = 'active-job'
   const card = el('div', 'hqpu-active')
-  // Top row: pulse dot + title, mono percent.
   const top = el('div', 'hqpu-active-top')
   const titleWrap = el('div', 'hqpu-active-title')
   const pulse = el('span', 'hqpu-pulse-dot')
@@ -418,23 +452,24 @@ function activeJobView(job: UpdateJob, copy: UpdateCopy): HTMLElement {
     job.kind === 'runtime'
       ? copy.ui.jobRuntimeTitle(job.targetVersion)
       : copy.ui.jobPluginTitle(job.targetVersion)
-  titleWrap.append(pulse, el('span', '', title))
+  titleWrap.append(pulse, el('span', 'hqpu-active-label', title))
+  top.append(titleWrap)
   const pct = job.progress.percent
-  if (pct !== null) {
-    top.append(el('span', 'hqpu-active-percent', `${Math.round(pct)}%`))
-  }
+  if (pct !== null) top.append(el('span', 'hqpu-active-percent', `${Math.round(pct)}%`))
   card.append(top)
-  // Gradient bar — only when the server publishes a real percentage.
   if (pct !== null) {
     const bar = el('div', 'hqpu-progress')
+    bar.setAttribute('role', 'progressbar')
+    bar.setAttribute('aria-valuemin', '0')
+    bar.setAttribute('aria-valuemax', '100')
+    bar.setAttribute('aria-valuenow', String(Math.round(pct)))
     const fill = el('div', 'hqpu-progress-fill')
     fill.style.width = `${Math.min(100, Math.max(0, pct))}%`
     bar.append(fill)
     card.append(bar)
   }
-  // Phase text + telemetry line: "3.1 MB/s (286MB / 450MB)".
   const meta = el('div', 'hqpu-active-meta')
   const phaseText =
     typeof job.message === 'string' && job.message.length > 0 ? job.message : phaseLabel(job, copy)
@@ -450,28 +485,29 @@ function activeJobView(job: UpdateJob, copy: UpdateCopy): HTMLElement {
         : done !== null && total !== null
           ? copy.job.bytes(done, total)
           : ''
-  if (telemetry.length > 0) meta.append(el('span', '', telemetry))
+  if (telemetry.length > 0) meta.append(el('span', 'hqpu-num', telemetry))
   card.append(meta)
-  // previous → target transition + what happens next (restart / elevation),
-  // and the honest "closing does not cancel" note.
-  const transition = el('div', 'hqpu-active-meta')
-  transition.append(
+  // previous → target on its own line (mono), then what happens next. A
+  // plugin set keeps the "closing does not cancel" note; a runtime swap has a
+  // stronger one of its own (HQ Edge exits, the host swaps it out).
+  card.append(
     el(
-      'span',
-      '',
+      'div',
+      'hqpu-active-versions',
       job.previousVersion !== null && job.previousVersion.length > 0
         ? `${job.previousVersion} → ${job.targetVersion}`
         : job.targetVersion,
     ),
   )
-  transition.append(
-    el('span', '', job.kind === 'runtime' ? copy.job.willSwapRuntime : copy.job.willRestartDsh),
+  card.append(
+    el(
+      'p',
+      'hqpu-active-note',
+      job.kind === 'runtime' ? copy.job.willSwapRuntime : copy.ui.activeCloseNote,
+    ),
   )
-  card.append(transition)
-  card.append(el('p', 'hqpu-job-meta', copy.job.closeNote))
-  // 4-step indicator: done=emerald, active=pulsing brand, upcoming=muted.
   const current = stepIndex(job.phase)
   const stepsRow = el('div', 'hqpu-job-steps4')
   copy.ui.jobSteps.forEach((label: string, index: number) => {
@@ -483,7 +519,9 @@ function activeJobView(job: UpdateJob, copy: UpdateCopy): HTMLElement {
           : index === current
             ? 'hqpu-job-step--active'
             : 'hqpu-job-step--todo'
-    stepsRow.append(el('div', cls, label))
+    // Numbered like the prototype's pipeline ("1. 下载"): the count is the
+    // only cue for how much is left when the active step blinks.
+    stepsRow.append(el('div', cls, `${index + 1}. ${label}`))
   })
   card.append(stepsRow)
@@ -491,226 +529,410 @@ function activeJobView(job: UpdateJob, copy: UpdateCopy): HTMLElement {
   return section
 }
+/** Phase → the word the log rows use for a component. */
+function stepWord(state: UpdateStep['state'], copy: UpdateCopy): string {
+  switch (state) {
+    case 'installed':
+      return copy.job.phase.done ?? ''
+    case 'skipped':
+      return copy.ui.stepSkipped
+    case 'failed':
+      return copy.job.phase.failed ?? ''
+    case 'running':
+      return copy.job.phase.downloading ?? ''
+    default:
+      return copy.ui.stepPending
+  }
+}
+/** Dot tone for one step row. */
+function stepDotState(state: UpdateStep['state']): string {
+  switch (state) {
+    case 'installed':
+      return 'done'
+    case 'failed':
+      return 'error'
+    case 'running':
+      return 'warning'
+    default:
+      return 'idle'
+  }
+}
 /**
- * The RESULT view for a terminal job: success / failed / rolled-back /
- * abandoned, previous→installed, per-package steps, errorCode + message, a log
- * correlation hint, and retry guidance (a retry starts a NEW job).
+ * The terminal-result banner for a job that did NOT succeed.
+ *
+ * A successful install needs no banner — the list and the footer already say
+ * "everything is current". A failure does: the error code and the retry must be
+ * on screen, not one drawer-click away.
  */
-function resultView(job: UpdateJob, copy: UpdateCopy, onRetry: () => void): HTMLElement {
+function jobResultBanner(
+  job: UpdateJob,
+  copy: UpdateCopy,
+  onRetry: () => void,
+  onOpenLog: () => void,
+): HTMLElement {
   const section = el('section', 'hqpu-group')
   section.dataset.group = 'job-result'
-  const tone =
-    job.phase === 'done' ? 'success' : job.phase === 'failed' ? 'danger' : 'warning'
-  const titleText =
-    job.phase === 'done'
-      ? copy.job.resultDone
-      : job.phase === 'failed'
-        ? copy.job.resultFailed
-        : job.phase === 'rolled-back'
-          ? copy.job.resultRolledBack
-          : copy.job.resultAbandoned
-  const head = el('div', 'hqpu-group-head')
-  const tag = el('span', 'hqpu-tag')
-  tag.dataset.tone = tone
-  tag.textContent = titleText
-  head.append(el('h3', 'hqpu-group-title', `${jobKindLabel(job, copy)} ${job.targetVersion}`), tag)
-  section.append(head)
-  const card = el('div', 'hqpu-job')
+  const tone = job.phase === 'failed' ? 'danger' : 'warning'
+  const card = el('div', 'hqpu-error')
+  card.dataset.tone = tone
+  const head = el('div', 'hqpu-error-head')
+  const icon = el('span', 'hqpu-error-icon')
+  icon.innerHTML = WARNING_ICON(14)
+  const text = el('div', 'hqpu-error-text')
+  const title =
+    job.phase === 'rolled-back' ? copy.job.resultRolledBack : copy.job.resultFailed
+  text.append(el('p', 'hqpu-error-title', title))
   const res = job.result
   const from = job.previousVersion ?? res?.installedVersion ?? '—'
   const to = res?.installedVersion ?? job.targetVersion
-  const finished =
-    res !== undefined && res.finishedAt.length > 0
-      ? ` · ${new Date(res.finishedAt).toLocaleString()}`
-      : ''
-  card.append(el('p', 'hqpu-status', `${from} → ${to}${finished}`))
-  if (res !== undefined && res.message !== undefined && res.message.length > 0) {
-    card.append(el('p', 'hqpu-status', res.message))
+  const when = res !== undefined && res.finishedAt.length > 0 ? ` · ${shortWhen(res.finishedAt)}` : ''
+  text.append(el('p', 'hqpu-error-body', `${from} → ${to}${when}`))
+  if (res?.message !== undefined && res.message.length > 0) {
+    text.append(el('p', 'hqpu-error-body', res.message))
   }
-  if (res !== undefined && res.errorCode !== undefined && res.errorCode.length > 0) {
-    card.append(el('p', 'hqpu-status', res.errorCode))
+  if (res?.errorCode !== undefined && res.errorCode.length > 0) {
+    text.append(el('code', 'hqpu-error-code', res.errorCode))
   }
-  if (typeof job.logHint === 'string' && job.logHint.length > 0) {
-    card.append(el('p', 'hqpu-status hqpu-job-meta', copy.job.logHint(job.logHint)))
-  }
-  const steps = stepsList(job, copy)
-  if (steps !== null) card.append(steps)
+  head.append(icon, text)
+  card.append(head)
-  // Retry starts a NEW update job — never re-click the settled job id.
-  if (job.phase === 'failed' || job.phase === 'abandoned') {
-    const retry = el('button', 'hqpu-btn hqpu-btn--outline hqpu-btn--sm', copy.job.retry)
-    retry.type = 'button'
-    retry.addEventListener('click', onRetry)
-    card.append(retry)
-  }
+  const foot = el('div', 'hqpu-error-foot')
+  foot.append(el('span', '', jobKindLabel(job, copy)))
+  const actions = el('span', 'hqpu-error-actions')
+  actions.append(linkButton('hqpu-link', copy.ui.viewLog, onOpenLog))
+  actions.append(linkButton('hqpu-link', copy.job.retry, onRetry))
+  foot.append(actions)
+  card.append(foot)
   section.append(card)
   return section
 }
-/** A one-line row for older recent jobs (newest already shown as the card). */
-function recentJobsList(jobs: UpdateJob[], copy: UpdateCopy): HTMLElement | null {
-  const older = jobs.slice(1, 5)
-  if (older.length === 0) return null
-  const wrap = el('div', 'hqpu-group')
-  wrap.dataset.group = 'recent-jobs'
-  wrap.append(el('h3', 'hqpu-group-count', copy.job.recentTitle))
-  const ul = el('ul', 'hqpu-cards')
-  for (const job of older) {
-    const li = el('li', 'hqpu-status')
-    const when = job.updatedAt.length > 0 ? ` · ${new Date(job.updatedAt).toLocaleString()}` : ''
-    li.textContent = `${jobKindLabel(job, copy)} ${job.targetVersion} · ${phaseLabel(job, copy)}${when}`
-    ul.append(li)
-  }
-  wrap.append(ul)
-  return wrap
-}
 /**
- * Check-status banner: a FAILED check shows a clear error row + Retry (never
- * the silent "no updates" empty state); a successful check shows the time;
- * when a check failed but a prior report exists it is labelled stale.
+ * The host's own report of the last runtime swap. Rolled-back / failed renders
+ * as an AMBER alert card; succeeded renders as a quiet green line. The plugin
+ * has no log-open affordance for this, so none is invented.
  */
-function checkBanner(
+function runtimeResultAlert(
   report: PluginUpdateReport,
   copy: UpdateCopy,
-  onRetry: () => void,
+  dismissed: boolean,
+  onDismiss: () => void,
 ): HTMLElement | null {
-  const failed = typeof report.lastError === 'string' && report.lastError.length > 0
-  const checked = typeof report.checkedAt === 'string' && report.checkedAt.length > 0
-  if (!failed && !checked) return null
+  const lastResult = report.runtime.lastResult
+  if (lastResult === null || lastResult === undefined) return null
-  const wrap = el('section', 'hqpu-group')
-  wrap.dataset.group = 'check-status'
-  if (failed) {
-    const banner = el('div', 'hqpu-banner')
-    banner.dataset.tone = 'danger'
-    banner.innerHTML = WARNING_ICON(14)
-    banner.append(el('span', '', copy.checkFailedBanner(report.lastError as string)))
-    wrap.append(banner)
-    if (report.items.length > 0) {
-      wrap.append(el('p', 'hqpu-status', copy.staleNote))
-    }
-    const row = el('div', 'hqpu-actions')
-    const retry = el('button', 'hqpu-btn hqpu-btn--primary hqpu-btn--sm', copy.retry)
-    retry.type = 'button'
-    retry.addEventListener('click', onRetry)
-    row.append(retry)
-    wrap.append(row)
-    return wrap
+  if (lastResult.state === 'succeeded') {
+    const line = el('p', 'hqpu-alert-green')
+    line.dataset.role = 'runtime-success'
+    line.textContent = copy.ui.successInline
+    return line
   }
-  wrap.append(
-    el('p', 'hqpu-status', copy.checkedAt(new Date(report.checkedAt as string).toLocaleString())),
-  )
-  return wrap
-}
-/** Set-level release metadata (v2 manifest): summary, notes, breaking, link. */
-function releaseHeader(release: ReleaseInfo | null | undefined, copy: UpdateCopy): HTMLElement | null {
-  if (release === null || release === undefined) return null
-  const notes = Array.isArray(release.notes) ? release.notes.filter((n) => typeof n === 'string' && n.length > 0) : []
-  const breaking = Array.isArray(release.breaking)
-    ? release.breaking.filter((n) => typeof n === 'string' && n.length > 0)
-    : []
-  const hasContent =
-    (typeof release.summary === 'string' && release.summary.length > 0) ||
-    notes.length > 0 ||
-    breaking.length > 0 ||
-    typeof release.notesUrl === 'string' ||
-    typeof release.publishedAt === 'string'
-  if (!hasContent) return null
+  if (dismissed) return null
   const section = el('section', 'hqpu-group')
-  section.dataset.group = 'release'
-  section.append(el('h3', 'hqpu-group-title', copy.release.summaryTitle))
-  if (typeof release.summary === 'string' && release.summary.length > 0) {
-    section.append(el('p', 'hqpu-status', release.summary))
-  }
-  if (typeof release.publishedAt === 'string' && release.publishedAt.length > 0) {
-    section.append(el('p', 'hqpu-status', copy.release.publishedAt(new Date(release.publishedAt).toLocaleString())))
-  }
-  if (release.requiresRestart === true) {
-    section.append(el('p', 'hqpu-status', copy.job.willRestartDsh))
-  }
-  if (notes.length > 0) {
-    const ul = el('ul', 'hqpu-release-notes')
-    for (const note of notes) ul.append(el('li', '', note as string))
-    section.append(ul)
+  section.dataset.group = 'runtime-alert'
+  const card = el('div', 'hqpu-alert hqpu-alert--amber')
+  const icon = el('span', 'hqpu-alert-icon')
+  icon.innerHTML = WARNING_ICON(14)
+  card.append(icon)
+  const body = el('div', 'hqpu-alert-main')
+  body.append(
+    el(
+      'div',
+      'hqpu-alert-title',
+      lastResult.state === 'failed' ? copy.ui.failedTitle : copy.ui.rollbackTitle,
+    ),
+  )
+  const oldVer = lastResult.installedVersion ?? lastResult.targetVersion ?? '—'
+  const bodyP = el('p', 'hqpu-alert-body')
+  bodyP.append(
+    document.createTextNode(
+      lastResult.state === 'failed'
+        ? copy.ui.failedBody(oldVer, '')
+        : copy.ui.rollbackBody(oldVer, ''),
+    ),
+  )
+  if (typeof lastResult.errorCode === 'string' && lastResult.errorCode.length > 0) {
+    bodyP.append(el('code', '', lastResult.errorCode))
   }
-  if (breaking.length > 0) {
-    const banner = el('div', 'hqpu-banner')
-    banner.dataset.tone = 'danger'
-    banner.innerHTML = WARNING_ICON(14)
-    const inner = el('span')
-    inner.append(el('strong', '', `${copy.release.breakingTitle}: `))
-    inner.append(document.createTextNode(breaking.join(' · ')))
-    banner.append(inner)
-    section.append(banner)
-  }
-  if (typeof release.notesUrl === 'string' && release.notesUrl.length > 0) {
-    const link = el('a', 'hqpu-status hqpu-release-link', copy.release.notesLink)
-    link.href = release.notesUrl
-    link.target = '_blank'
-    link.rel = 'noreferrer'
-    section.append(link)
+  if (typeof lastResult.message === 'string' && lastResult.message.length > 0) {
+    bodyP.append(el('br'), document.createTextNode(lastResult.message))
   }
+  body.append(bodyP)
+  const actions = el('div', 'hqpu-alert-actions')
+  actions.append(linkButton('hqpu-alert-dismiss', copy.ui.dismiss, onDismiss))
+  body.append(actions)
+  card.append(body)
+  section.append(card)
   return section
 }
-/** Native disclosure that hides the developer-facing source editors by
- *  default (end users should never need to type a manifest URL). */
-function advancedBlock(copy: UpdateCopy, nodes: Array<HTMLElement | null>): HTMLElement {
-  const details = el('details', 'hqpu-advanced')
-  details.append(el('summary', '', copy.release.advanced))
-  for (const node of nodes) {
-    if (node !== null) details.append(node)
+/**
+ * The HQ Edge runtime card: current chip, the offered version with its size and
+ * summary, and the 升级核心 action — arm → confirm, because a runtime swap
+ * shuts HQ Edge down and is not undoable from here.
+ */
+function runtimeEngineCard(
+  report: PluginUpdateReport,
+  copy: UpdateCopy,
+  actions: RuntimeActions,
+): HTMLElement | null {
+  const runtime = report.runtime
+  const latestVersion = runtimeLatestVersion(runtime)
+  const card = el('section', 'hqpu-engine')
+  card.dataset.group = 'runtime'
+  const head = el('div', 'hqpu-engine-head')
+  const titleWrap = el('div', 'hqpu-engine-title')
+  const bolt = el('span', 'hqpu-engine-bolt')
+  bolt.innerHTML = BOLT_ICON(14)
+  titleWrap.append(bolt, el('span', '', copy.ui.runtimeEngine))
+  head.append(titleWrap)
+  if (typeof runtime.currentVersion === 'string' && runtime.currentVersion.length > 0) {
+    head.append(el('span', 'hqpu-chip', copy.ui.currentChip(runtime.currentVersion)))
+  }
+  card.append(head)
+  const offered = runtime.updateAvailable && latestVersion !== null
+  if (!offered && typeof runtime.lastError === 'string' && runtime.lastError.length > 0) {
+    card.append(el('p', 'hqpu-engine-error', `${copy.lastError}: ${runtime.lastError}`))
+    return card
+  }
+  if (!offered) return card
+  const latestEntry = runtime.latest
+  const row = el('div', 'hqpu-engine-row')
+  const info = el('div', 'hqpu-engine-info')
+  const newLine = el('div', 'hqpu-engine-new')
+  newLine.append(el('span', 'hqpu-ver-new hqpu-ver-new--lg', copy.ui.newVersion(latestVersion as string)))
+  const hasCritical =
+    (Array.isArray(latestEntry?.breaking) && (latestEntry?.breaking?.length ?? 0) > 0) ||
+    (Array.isArray(latestEntry?.notes) && (latestEntry?.notes?.length ?? 0) > 0)
+  if (hasCritical) newLine.append(el('span', 'hqpu-tag--brand', copy.ui.breakingTag))
+  info.append(newLine)
+  const size = typeof latestEntry?.sizeBytes === 'number' ? formatMb(latestEntry.sizeBytes) : ''
+  const summary = typeof latestEntry?.summary === 'string' ? latestEntry.summary : ''
+  if (size.length > 0 || summary.length > 0) {
+    info.append(el('p', 'hqpu-engine-size', copy.ui.sizeLine(size, summary)))
+  }
+  row.append(info)
+  if (actions.accepted) {
+    row.append(el('span', 'hqpu-engine-state', copy.runtime.updateAccepted))
+  } else if (actions.busy) {
+    row.append(el('span', 'hqpu-engine-state', copy.runtime.updating))
+  } else if (!actions.armed) {
+    const start = el('button', 'hqpu-btn--engine', copy.ui.upgradeCore)
+    start.type = 'button'
+    start.dataset.runtimeUpdate = ''
+    start.addEventListener('click', actions.onArm)
+    row.append(start)
   }
-  return details
+  card.append(row)
+  // Confirm replaces the action: a full-width block, never a 150 px column.
+  if (actions.armed && !actions.busy && !actions.accepted) {
+    const confirm = el('div', 'hqpu-engine-confirm')
+    confirm.append(
+      el('p', 'hqpu-engine-confirm-text', copy.runtime.updateConfirm(latestVersion as string)),
+    )
+    const buttons = el('div', 'hqpu-engine-confirm-actions')
+    const no = el('button', 'hqpu-btn hqpu-btn--ghost hqpu-btn--sm', copy.cancel)
+    no.type = 'button'
+    no.addEventListener('click', actions.onCancel)
+    const yes = el('button', 'hqpu-btn--engine hqpu-btn--engine-solid', copy.ui.confirmRuntime)
+    yes.type = 'button'
+    yes.dataset.runtimeConfirm = ''
+    yes.addEventListener('click', actions.onConfirm)
+    buttons.append(no, yes)
+    confirm.append(buttons)
+    card.append(confirm)
+  }
+  const note = el('p', 'hqpu-engine-note')
+  note.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2L14.4 13.4H1.6L8 2Z"/><path d="M8 6.4V9.2"/><path d="M8 10.6V11.6"/></svg>`
+  note.append(el('span', '', copy.ui.runtimeRestartNote))
+  card.append(note)
+  return card
 }
-/** Mutable editor state for one manifest source (lives in the panel closure). */
-interface SourceState {
-  editing: boolean
-  saving: boolean
-  draft: string
+/** Set-level release metadata (v2 manifest): summary, notes, breaking, link. */
+function releaseBody(release: ReleaseInfo, copy: UpdateCopy): HTMLElement[] {
+  const out: HTMLElement[] = []
+  const notes = Array.isArray(release.notes)
+    ? release.notes.filter((n) => typeof n === 'string' && n.length > 0)
+    : []
+  const breaking = Array.isArray(release.breaking)
+    ? release.breaking.filter((n) => typeof n === 'string' && n.length > 0)
+    : []
+  if (typeof release.summary === 'string' && release.summary.length > 0) {
+    out.push(el('p', 'hqpu-release-summary', release.summary))
+  }
+  if (notes.length > 0) {
+    const ul = el('ul', 'hqpu-release-notes')
+    for (const note of notes) ul.append(el('li', '', note as string))
+    out.push(ul)
+  }
+  if (breaking.length > 0) {
+    const banner = el('div', 'hqpu-banner')
+    banner.dataset.tone = 'danger'
+    const icon = el('span')
+    icon.innerHTML = WARNING_ICON(14)
+    banner.append(icon)
+    const inner = el('span')
+    inner.append(el('strong', '', `${copy.release.breakingTitle}: `))
+    inner.append(document.createTextNode(breaking.join(' · ')))
+    banner.append(inner)
+    out.push(banner)
+  }
+  if (typeof release.publishedAt === 'string' && release.publishedAt.length > 0) {
+    out.push(
+      el('p', 'hqpu-release-meta', copy.release.publishedAt(new Date(release.publishedAt).toLocaleString())),
+    )
+  }
+  if (release.requiresRestart === true) {
+    out.push(el('p', 'hqpu-release-meta', copy.job.willRestartDsh))
+  }
+  if (typeof release.notesUrl === 'string' && release.notesUrl.length > 0) {
+    const link = el('a', 'hqpu-release-link', copy.release.notesLink)
+    link.href = release.notesUrl
+    link.target = '_blank'
+    link.rel = 'noreferrer'
+    out.push(link)
+  }
+  return out
+}
+function hasReleaseContent(release: ReleaseInfo | null | undefined): boolean {
+  if (release === null || release === undefined) return false
+  return (
+    (typeof release.summary === 'string' && release.summary.length > 0) ||
+    (Array.isArray(release.notes) && release.notes.length > 0) ||
+    (Array.isArray(release.breaking) && release.breaking.length > 0) ||
+    typeof release.notesUrl === 'string' ||
+    typeof release.publishedAt === 'string'
+  )
 }
 /**
- * Shared state + callbacks for one update-source editor.
- *
- * hq-edge serves both manifest sources from one shape (plugin release
- * manifest, runtime-update manifest), and both are editable from this panel:
- * an override is persisted per host, so pointing discovery at a staging
- * channel (or a local test rig) needs no env var and no restart. The editor
- * state lives in the panel closure for the same reason `armed` does — a store
- * refresh must not discard a half-typed URL or silently close the editor.
+ * The job log drawer: title + outcome tag, the mono component list with a
+ * JOB_ID header, the result detail, older runs, and 复制日志 ID / 关闭.
  */
-export interface SourceEditorActions {
-  /** The source editor is open (input shown instead of the read-only row). */
-  sourceEditing: boolean
-  /** A save is in flight. */
-  sourceSaving: boolean
-  /** The URL being edited (what the input shows). */
-  sourceDraft: string
-  onSourceEdit(): void
-  onSourceDraft(value: string): void
-  onSourceSave(): void
-  onSourceCancel(): void
-  /** Clear the user override, falling back to the configured URL. */
-  onSourceReset(): void
+function buildLogDrawer(
+  job: UpdateJob,
+  recent: UpdateJob[],
+  copy: UpdateCopy,
+  onCopy: (id: string) => void,
+  onClose: () => void,
+): HTMLElement[] {
+  const out: HTMLElement[] = []
+  const head = el('div', 'hqpu-log-head')
+  const titleWrap = el('div', 'hqpu-log-title')
+  titleWrap.append(el('span', 'hqpu-log-name', copy.ui.logTitle))
+  const tag = el('span', 'hqpu-tag')
+  tag.dataset.tone =
+    job.phase === 'done' ? 'success' : job.phase === 'failed' ? 'danger' : 'warning'
+  tag.textContent =
+    job.phase === 'done'
+      ? copy.job.resultDone
+      : job.phase === 'failed'
+        ? copy.job.resultFailed
+        : job.phase === 'rolled-back'
+          ? copy.job.resultRolledBack
+          : copy.job.resultAbandoned
+  titleWrap.append(tag)
+  const closeBtn = iconButton('hqpu-icon-btn hqpu-icon-btn--sm', CLOSE_ICON(14), copy.close, onClose)
+  head.append(titleWrap, closeBtn)
+  out.push(head)
+  const body = el('div', 'hqpu-log-body')
+  const block = el('div', 'hqpu-log-block')
+  const meta = el('div', 'hqpu-log-meta')
+  const logId = job.logHint !== undefined && job.logHint.length > 0 ? job.logHint : job.id
+  meta.append(el('span', '', `${copy.ui.jobIdLabel}: ${logId}`))
+  meta.append(el('span', '', shortWhen(job.result?.finishedAt ?? job.updatedAt)))
+  block.append(meta)
+  const steps = Array.isArray(job.steps) ? job.steps : []
+  if (steps.length > 0) {
+    for (const step of steps) {
+      const line = el('div', 'hqpu-log-line')
+      const dot = el('span', 'hqpu-log-dot')
+      dot.dataset.state = stepDotState(step.state)
+      line.append(dot)
+      const word = stepWord(step.state, copy)
+      const text =
+        step.message !== undefined && step.message.length > 0
+          ? `${step.name} — ${step.message}`
+          : step.name
+      line.append(el('span', 'hqpu-log-line-text', word.length > 0 ? `${text} (${word})` : text))
+      block.append(line)
+    }
+  } else {
+    block.append(el('div', 'hqpu-log-line hqpu-log-line--empty', copy.job.stepsTitle))
+  }
+  body.append(block)
+  // Result detail: the transition, the error code, the server's own message.
+  const res = job.result
+  const from = job.previousVersion ?? res?.installedVersion ?? '—'
+  const to = res?.installedVersion ?? job.targetVersion
+  const detail = el('div', 'hqpu-log-detail')
+  detail.append(el('p', '', `${from} → ${to}`))
+  if (res?.errorCode !== undefined && res.errorCode.length > 0) {
+    detail.append(el('code', 'hqpu-error-code', res.errorCode))
+  }
+  if (res?.message !== undefined && res.message.length > 0) {
+    detail.append(el('p', '', res.message))
+  }
+  body.append(detail)
+  const older = recent.filter((entry) => entry.id !== job.id).slice(0, 4)
+  if (older.length > 0) {
+    const list = el('div', 'hqpu-log-recent')
+    list.append(el('p', 'hqpu-log-recent-title', copy.job.recentTitle))
+    for (const entry of older) {
+      const row = el('div', 'hqpu-log-recent-row')
+      row.append(el('span', '', `${jobKindLabel(entry, copy)} ${entry.targetVersion}`))
+      row.append(el('span', 'hqpu-log-recent-meta', `${phaseLabel(entry, copy)} · ${shortWhen(entry.updatedAt)}`))
+      list.append(row)
+    }
+    body.append(list)
+  }
+  out.push(body)
+  const foot = el('div', 'hqpu-log-foot')
+  const copyBtn = el('button', 'hqpu-link hqpu-link--icon')
+  copyBtn.type = 'button'
+  copyBtn.dataset.copyLog = ''
+  const copyIcon = el('span')
+  copyIcon.innerHTML = COPY_ICON(12)
+  copyBtn.append(copyIcon, el('span', '', copy.ui.copyLogId))
+  copyBtn.addEventListener('click', () => onCopy(logId))
+  const closeFoot = el('button', 'hqpu-btn hqpu-btn--sm', copy.close)
+  closeFoot.type = 'button'
+  closeFoot.addEventListener('click', onClose)
+  foot.append(copyBtn, closeFoot)
+  out.push(foot)
+  return out
 }
+// ── The runtime action contract ────────────────────────────────────────────
 /**
  * The runtime-update action row's state and callbacks.
  *
- * Installing the runtime is destructive in a way a plugin install is not: hq-edge
- * shuts itself down so the EDA host can swap the runtime directory. So the row
- * is a two-step confirm (arm → confirm), never a single fire-and-forget click.
+ * Installing the runtime is destructive in a way a plugin install is not:
+ * hq-edge shuts itself down so the EDA host can swap the runtime directory. So
+ * the row is a two-step confirm (arm → confirm), never a single click.
  */
-export interface RuntimeActions extends SourceEditorActions {
+export interface RuntimeActions {
   /** A request is in flight (hq-edge accepted it and is restarting). */
   busy: boolean
   /** The confirm step is armed for the version the row names. */
@@ -718,8 +940,7 @@ export interface RuntimeActions extends SourceEditorActions {
   /**
    * hq-edge answered `202 Accepted`: from here on the outcome belongs to the
    * EDA host, and this process is about to be replaced. Terminal — the row
-   * must never re-offer the button once this is true, because hq-edge is
-   * already gone and a second request could only fail.
+   * must never re-offer the button once this is true.
    */
   accepted: boolean
   onArm(): void
@@ -728,11 +949,11 @@ export interface RuntimeActions extends SourceEditorActions {
 }
 /**
- * Normalize the report's `runtime.source` to the full shape.
+ * Normalize a report's source field to the full shape.
  *
  * An older hq-edge predates the feature and sends no `source` at all — that
- * must degrade to a read-only panel, not crash the render. A future server
- * may add fields; unknown extras are dropped here rather than trusted.
+ * must degrade to no editor, not crash the render. A future server may add
+ * fields; unknown extras are dropped here rather than trusted.
  */
 function normalizeSource(raw: unknown): RuntimeUpdateSource | null {
   if (raw === null || typeof raw !== 'object') return null
@@ -746,465 +967,36 @@ function normalizeSource(raw: unknown): RuntimeUpdateSource | null {
   }
 }
-/** The tag naming where the URL in effect came from. */
-function originLabel(origin: RuntimeUpdateSource['origin'], copy: UpdateCopy): string {
-  switch (origin) {
-    case 'override':
-      return copy.originOverride
-    case 'config':
-      return copy.originConfig
-    default:
-      return copy.originUnset
-  }
-}
-/** The 更新源 fact row: the URL in effect plus an origin tag. */
-function sourceFactRow(
-  facts: HTMLElement,
-  source: RuntimeUpdateSource,
-  copy: UpdateCopy,
-): void {
-  const wrap = el('div')
-  wrap.append(el('dt', '', copy.runtime.source))
-  const dd = el('dd')
-  const line = el('div', 'hqpu-source-line')
-  const code = el(
-    'code',
-    'hqpu-source-url',
-    source.url.length > 0 ? source.url : copy.runtime.notConfigured,
-  )
-  const tag = el('span', 'hqpu-tag')
-  tag.dataset.tone = source.override ? 'info' : source.origin === 'config' ? 'success' : 'neutral'
-  tag.textContent = originLabel(source.origin, copy)
-  line.append(code, tag)
-  dd.append(line)
-  wrap.append(dd)
-  facts.append(wrap)
-}
-/** Which manifest an editor belongs to — drives data attributes + CSS hook. */
-export type SourceKind = 'runtime' | 'plugin'
-/** The localized strings one source editor needs (both kinds share the flow). */
-interface SourceEditorLabels {
-  hint: string
-  edit: string
-  save: string
-  reset: string
-  inputLabel: string
-  placeholder: string
-}
-/** Pick the labels for one kind out of the copy table. */
-function sourceLabels(copy: UpdateCopy, kind: SourceKind): SourceEditorLabels {
-  return kind === 'runtime'
-    ? {
-        hint: copy.runtime.sourceHint,
-        edit: copy.runtime.sourceEdit,
-        save: copy.runtime.sourceSave,
-        reset: copy.runtime.sourceReset,
-        inputLabel: copy.runtime.sourceInputLabel,
-        placeholder: copy.runtime.sourcePlaceholder,
-      }
-    : {
-        hint: copy.pluginSource.hint,
-        edit: copy.pluginSource.edit,
-        save: copy.pluginSource.save,
-        reset: copy.pluginSource.reset,
-        inputLabel: copy.pluginSource.inputLabel,
-        placeholder: copy.pluginSource.placeholder,
-      }
-}
-/**
- * One update-source editor, shared by the plugin manifest and the runtime
- * manifest (the only differences are the labels and the data-attribute
- * prefix, so tests and CSS can target each).
- *
- * Read mode is a hint plus a 修改 button; edit mode is the URL field with
- * 保存 / 取消 — plus 恢复默认 while a user override shadows the configured
- * URL. The draft lives in {@link SourceEditorActions} (the panel closure), so
- * a background store refresh re-renders the typed URL instead of discarding it.
- */
-function sourceEditor(
-  kind: SourceKind,
-  source: RuntimeUpdateSource,
-  copy: UpdateCopy,
-  actions: SourceEditorActions,
-): HTMLElement {
-  const labels = sourceLabels(copy, kind)
-  const block = el('div', `hqpu-source-editor hqpu-source-editor--${kind}`)
-  if (!actions.sourceEditing) {
-    // Read mode: show the URL currently in effect (mono, muted), then edit.
-    const urlLine = el('p', 'hqpu-source-current-url', source.url)
-    urlLine.style.cssText =
-      'margin:2px 0 6px;font-size:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-tertiary);word-break:break-all;'
-    block.append(urlLine)
-    block.append(el('p', 'hqpu-status hqpu-source-hint', labels.hint))
-    const edit = el('button', 'hqpu-btn hqpu-btn--outline hqpu-btn--sm', labels.edit)
-    edit.type = 'button'
-    edit.setAttribute(`data-${kind}-source-edit`, '')
-    edit.disabled = actions.sourceSaving
-    edit.addEventListener('click', actions.onSourceEdit)
-    block.append(edit)
-    return block
-  }
-  const input = el('input', 'hqpu-source-input')
-  input.type = 'url'
-  input.value = actions.sourceDraft
-  input.placeholder = labels.placeholder
-  input.setAttribute('aria-label', labels.inputLabel)
-  input.setAttribute(`data-${kind}-source-input`, '')
-  input.disabled = actions.sourceSaving
-  input.addEventListener('input', () => {
-    // Draft-only: no re-render, so the caret and IME stay untouched.
-    actions.onSourceDraft(input.value)
-  })
-  // Enter saves, Escape cancels — the field is the whole editor, and Escape
-  // must not fall through to the panel-wide close handler.
-  input.addEventListener('keydown', (ev) => {
-    if (ev.key === 'Enter') {
-      ev.preventDefault()
-      actions.onSourceSave()
-    } else if (ev.key === 'Escape') {
-      ev.preventDefault()
-      ev.stopPropagation()
-      actions.onSourceCancel()
-    }
-  })
-  const save = el('button', 'hqpu-btn hqpu-btn--primary hqpu-btn--sm', labels.save)
-  save.type = 'button'
-  save.setAttribute(`data-${kind}-source-save`, '')
-  save.disabled = actions.sourceSaving
-  save.addEventListener('click', actions.onSourceSave)
-  const cancel = el('button', 'hqpu-btn hqpu-btn--outline hqpu-btn--sm', copy.cancel)
-  cancel.type = 'button'
-  cancel.setAttribute(`data-${kind}-source-cancel`, '')
-  cancel.disabled = actions.sourceSaving
-  cancel.addEventListener('click', actions.onSourceCancel)
-  const controls = el('div', 'hqpu-actions hqpu-source-controls')
-  controls.append(input, save, cancel)
-  if (source.override) {
-    const reset = el('button', 'hqpu-btn hqpu-btn--ghost hqpu-btn--sm', labels.reset)
-    reset.type = 'button'
-    reset.setAttribute(`data-${kind}-source-reset`, '')
-    reset.disabled = actions.sourceSaving
-    reset.addEventListener('click', actions.onSourceReset)
-    controls.append(reset)
-  }
-  block.append(controls)
-  // Focus on open — and on any re-render while editing, which is exactly what
-  // a rejected save wants (the user is dropped back into the field to fix it).
-  input.focus()
-  return block
-}
-/**
- * The plugin release-manifest source, as its own group above the plugin
- * groups: it says where the whole list comes from, so it belongs above the
- * list rather than inside it. Absent on an older hq-edge (no `pluginSource`
- * in the report) — then nothing is rendered at all.
- */
-function pluginSourceGroup(
-  report: PluginUpdateReport,
-  copy: UpdateCopy,
-  actions: SourceEditorActions,
-): HTMLElement | null {
-  const source = normalizeSource(report.pluginSource)
-  if (source === null) return null
-  const section = el('section', 'hqpu-group')
-  section.dataset.group = 'plugin-source'
-  const head = el('div', 'hqpu-group-head')
-  head.append(el('h3', 'hqpu-group-title', copy.pluginSource.title))
-  section.append(head)
-  const facts = el('dl', 'hqpu-facts')
-  sourceFactRow(facts, source, copy)
-  section.append(facts)
-  section.append(sourceEditor('plugin', source, copy, actions))
-  return section
-}
-/**
- * The host's own report of the last runtime swap. Rolled-back / failed renders
- * as an AMBER alert card (title, old→new body, errorCode chip, 忽略 dismiss);
- * succeeded renders as a subtle green inline line — not a loud banner. The
- * plugin has NO log-open affordance, so "查看诊断日志" is omitted (never faked).
- */
-function runtimeResultAlert(
-  report: PluginUpdateReport,
-  copy: UpdateCopy,
-  dismissed: boolean,
-  onDismiss: () => void,
-): HTMLElement | null {
-  const lastResult = report.runtime.lastResult
-  if (lastResult === null || lastResult === undefined) return null
-  // Green inline confirmation — quiet by design.
-  if (lastResult.state === 'succeeded') {
-    const line = el('p', 'hqpu-alert-green')
-    line.dataset.role = 'runtime-success'
-    line.textContent = copy.ui.successInline
-    return line
-  }
-  if (dismissed) return null
-  const section = el('section', 'hqpu-group')
-  section.dataset.group = 'runtime-alert'
-  const card = el('div', 'hqpu-alert hqpu-alert--amber')
-  card.innerHTML = WARNING_ICON(14)
-  const body = el('div')
-  const title = el('div', 'hqpu-alert-title')
-  title.textContent = lastResult.state === 'failed' ? copy.ui.failedTitle : copy.ui.rollbackTitle
-  body.append(title)
-  const oldVer = lastResult.installedVersion ?? lastResult.targetVersion ?? '—'
-  const code = typeof lastResult.errorCode === 'string' && lastResult.errorCode.length > 0
-    ? lastResult.errorCode
-    : '—'
-  const text =
-    lastResult.state === 'failed'
-      ? copy.ui.failedBody(oldVer, code)
-      : copy.ui.rollbackBody(oldVer, code)
-  // Build the body as text + an inline <code> chip for the error code.
-  const bodyP = el('p', 'hqpu-alert-body')
-  const textOnly =
-    lastResult.state === 'failed'
-      ? copy.ui.failedBody(oldVer, '')
-      : copy.ui.rollbackBody(oldVer, '')
-  // Strip the trailing "code" placeholder we appended; re-add as a chip.
-  bodyP.append(document.createTextNode(textOnly.replace(/\s*$/, '')))
-  if (typeof lastResult.errorCode === 'string' && lastResult.errorCode.length > 0) {
-    bodyP.append(document.createTextNode(' '))
-    const chip = el('code', '', lastResult.errorCode)
-    bodyP.append(chip)
-  }
-  if (typeof lastResult.message === 'string' && lastResult.message.length > 0) {
-    bodyP.append(el('br'), document.createTextNode(lastResult.message))
-  }
-  body.append(bodyP)
-  // Dismiss action (no log button — the plugin has no log-open affordance).
-  const actions = el('div', 'hqpu-alert-actions')
-  const dismiss = el('button', 'hqpu-alert-dismiss', copy.ui.dismiss)
-  dismiss.type = 'button'
-  dismiss.addEventListener('click', onDismiss)
-  actions.append(dismiss)
-  body.append(actions)
-  card.append(body)
-  section.append(card)
-  return section
-}
-/** The HQ Edge runtime engine card per the mockup: current chip, "新版本 vY
- *  可用" with a 关键修复 tag when breaking/notes exist, size+summary line, a
- *  升级核心 button (existing arm→confirm flow), and the amber restart note. */
-function runtimeEngineCard(
-  report: PluginUpdateReport,
-  copy: UpdateCopy,
-  actions: RuntimeActions,
-): HTMLElement | null {
-  const runtime = report.runtime
-  const latestVersion = runtimeLatestVersion(runtime)
-  const card = el('section', 'hqpu-engine')
-  card.dataset.group = 'runtime'
-  const head = el('div', 'hqpu-engine-head')
-  const titleWrap = el('div', 'hqpu-engine-title')
-  titleWrap.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.33333 2L4.66667 8H8L6.66667 14L11.33333 8H8L9.33333 2Z"/></svg>`
-  titleWrap.append(el('span', '', copy.ui.runtimeEngine))
-  head.append(titleWrap)
-  if (typeof runtime.currentVersion === 'string' && runtime.currentVersion.length > 0) {
-    head.append(el('span', 'hqpu-chip', copy.ui.currentChip(runtime.currentVersion)))
-  }
-  card.append(head)
-  // Update row (only when a newer distribution is known).
-  if (runtime.updateAvailable && latestVersion !== null) {
-    const row = el('div', 'hqpu-engine-update-row')
-    const left = el('div')
-    const newLine = el('div', 'hqpu-engine-new-line')
-    newLine.append(el('span', '', copy.ui.newVersion(latestVersion)))
-    const latestEntry = runtime.latest
-    const hasCritical =
-      (Array.isArray(latestEntry?.breaking) && (latestEntry?.breaking?.length ?? 0) > 0) ||
-      (Array.isArray(latestEntry?.notes) && (latestEntry?.notes?.length ?? 0) > 0)
-    if (hasCritical) newLine.append(el('span', 'hqpu-tag--brand', copy.ui.breakingTag))
-    left.append(newLine)
-    const size = typeof latestEntry?.sizeBytes === 'number' ? formatMb(latestEntry.sizeBytes) : ''
-    const summary = typeof latestEntry?.summary === 'string' ? latestEntry.summary : ''
-    if (size.length > 0 || summary.length > 0) {
-      left.append(el('p', 'hqpu-engine-size', copy.ui.sizeLine(size, summary)))
-    }
-    row.append(left)
-    // Upgrade action: arm → confirm, accepted/busy states preserved.
-    if (actions.accepted) {
-      row.append(el('span', 'hqpu-status', copy.runtime.updateAccepted))
-    } else if (actions.busy) {
-      row.append(el('span', 'hqpu-status', copy.runtime.updating))
-    } else if (actions.armed) {
-      const confirmWrap = el('div')
-      confirmWrap.append(el('p', 'hqpu-status', copy.runtime.updateConfirm(latestVersion)))
-      const yes = el('button', 'hqpu-btn hqpu-btn--engine', copy.confirmInstall)
-      yes.type = 'button'
-      yes.dataset.runtimeConfirm = ''
-      yes.addEventListener('click', actions.onConfirm)
-      const no = el('button', 'hqpu-btn hqpu-btn--engine', copy.cancel)
-      no.type = 'button'
-      no.addEventListener('click', actions.onCancel)
-      confirmWrap.append(yes, no)
-      row.append(confirmWrap)
-    } else {
-      const start = el('button', 'hqpu-btn hqpu-btn--engine', copy.ui.upgradeCore)
-      start.type = 'button'
-      start.dataset.runtimeUpdate = ''
-      start.addEventListener('click', actions.onArm)
-      row.append(start)
-    }
-    card.append(row)
-    const note = el('p', 'hqpu-engine-note')
-    note.innerHTML =
-      `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2.5L14 13H2L8 2.5Z"/></svg><span>${copy.ui.runtimeRestartNote}</span>`
-    card.append(note)
-  } else if (typeof runtime.lastError === 'string' && runtime.lastError.length > 0) {
-    card.append(el('p', 'hqpu-status', `${copy.lastError}: ${runtime.lastError}`))
-  }
-  return card
-}
-function renderList(
-  section: HTMLElement,
-  report: PluginUpdateReport | null,
-  copy: UpdateCopy,
-  changelogOpen: Set<string>,
-  allOpen: boolean,
-  onToggleCard: (name: string) => void,
-  onToggleAll: () => void,
-  onRetryCheck: () => void,
-  onInstall: (name: string) => void,
-  onIgnore: (item: PluginUpdateItem) => void,
-): void {
-  section.textContent = ''
-  if (report === null) {
-    section.append(skeleton(copy))
-    return
-  }
-  // Check-status banner: a failed check shows an error row + Retry (never the
-  // silent "no updates" empty state); a successful check shows the time.
-  const banner = checkBanner(report, copy, onRetryCheck)
-  if (banner !== null) section.append(banner)
-  // Set-level release metadata (v2 manifest): summary, notes, breaking.
-  const release = releaseHeader(report.release, copy)
-  if (release !== null) section.append(release)
-  if (report.items.length === 0) {
-    // A successful check with zero updates — distinct from a failed check,
-    // which already rendered its error row above.
-    if (typeof report.lastError !== 'string' || report.lastError.length === 0) {
-      section.append(el('div', 'hqpu-empty', copy.empty))
-    }
-    return
-  }
-  const byState = (state: PluginUpdateItem['state']): PluginUpdateItem[] =>
-    report.items.filter((item) => item.state === state)
-  // Most important first: what can be acted on, then what was muted, then what
-  // is already settled. Blocked plugins are intentionally skipped — the server
-  // still reports them, but they carry no user-actionable offer, so surfacing
-  // them only adds noise without a path forward.
-  const order: Array<[string, PluginUpdateItem[]]> = [
-    [copy.group.actionable, [...byState('update'), ...byState('install')]],
-    [copy.group.ignored, byState('ignored')],
-    [copy.group.current, byState('current')],
-  ]
-  for (const [heading, items] of order) {
-    const node = group(heading, items, copy, changelogOpen, allOpen, onToggleCard, onToggleAll, onInstall, onIgnore)
-    if (node !== null) section.append(node)
-  }
-}
-function renderRuntime(
-  section: HTMLElement,
-  report: PluginUpdateReport | null,
-  copy: UpdateCopy,
-  actions: RuntimeActions,
-  dismissedAlert: boolean,
-  onDismissAlert: () => void,
-): void {
-  section.textContent = ''
-  if (report === null) return
-  const alert = runtimeResultAlert(report, copy, dismissedAlert, onDismissAlert)
-  if (alert !== null) section.append(alert)
-  const engine = runtimeEngineCard(report, copy, actions)
-  if (engine !== null) section.append(engine)
-}
-/** The plugin-source group, above the plugin groups, hidden behind an advanced
- *  disclosure (manifest-URL editing is a developer affordance). No-op without
- *  the field. */
-function renderPluginSource(
-  section: HTMLElement,
-  report: PluginUpdateReport | null,
-  copy: UpdateCopy,
-  actions: SourceEditorActions,
-): void {
-  section.textContent = ''
-  if (report === null) return
-  const node = pluginSourceGroup(report, copy, actions)
-  if (node !== null) section.append(advancedBlock(copy, [node]))
-}
-/** Run the install transaction (a new durable job), then let the store poll it. */
-async function runInstall(store: UpdateStoreLike, copy: UpdateCopy, pluginNames?: string[]): Promise<void> {
-  const report = store.report()
-  if (report === null) return
-  // Without an evaluated set there is nothing to install: hq-edge has not read
-  // a manifest yet, so the report is still its empty shell.
-  if (report.manifestVersion === null) {
-    showToast(copy.checkFailed, 'error')
-    return
-  }
-  // Flip the installing flag BEFORE the request: this is what disables the
-  // action buttons and shows the "DSH will restart" footer state (previously
-  // dead code — runInstall never called it).
-  store.setInstalling(true)
-  try {
-    const result = await installSet(report.manifestVersion, pluginNames)
-    if (result.error !== undefined) {
-      store.setInstalling(false)
-      showToast(`${copy.installError}: ${result.error}`, 'error')
-      return
-    }
-    // 202 accepted: a durable job now owns the lifecycle. The store's /status
-    // poller renders progress and clears the flag when the job settles.
-    showToast(copy.installSuccess, 'success')
-    void store.fetchStatus()
-  } catch (err: unknown) {
-    store.setInstalling(false)
-    showToast(
-      `${copy.installError}: ${err instanceof Error ? err.message : String(err)}`,
-      'error',
-    )
-  }
-}
+// ── Toast ─────────────────────────────────────────────────────────────────
 /** The single live toast; a new message replaces the one on screen. */
 let toastHost: HTMLElement | null = null
 let toastTimer: number | null = null
+/** Copy for the toast's close affordance; set when the panel mounts. */
+let activeCopy: UpdateCopy | null = null
 function showToast(message: string, tone: 'success' | 'error'): void {
   if (toastHost === null) return
   if (toastTimer !== null) window.clearTimeout(toastTimer)
   toastHost.textContent = ''
   const toast = el('div', 'hqpu-toast')
-  toast.setAttribute('role', 'status')
+  // An error must interrupt; a success may wait for a pause.
+  toast.setAttribute('role', tone === 'error' ? 'alert' : 'status')
   const icon = el('span', 'hqpu-toast-icon')
   icon.dataset.tone = tone
   icon.innerHTML = tone === 'success' ? CHECK_CIRCLE_ICON(16) : WARNING_ICON(16)
   toast.append(icon, el('span', 'hqpu-toast-text', message))
+  const close = iconButton(
+    'hqpu-toast-close',
+    CLOSE_ICON(12),
+    activeCopy?.close ?? 'Close',
+    () => {
+      toastHost?.replaceChildren()
+      if (toastTimer !== null) window.clearTimeout(toastTimer)
+      toastTimer = null
+    },
+  )
+  toast.append(close)
   toastHost.append(toast)
   toastTimer = window.setTimeout(() => {
     toastHost?.replaceChildren()
@@ -1212,100 +1004,7 @@ function showToast(message: string, tone: 'success' | 'error'): void {
   }, TOAST_HOLD_MS)
 }
-/**
- * The collapsible "更新源配置 (高级)" panel (gear-toggled). It hosts the
- * EXISTING plugin-source and runtime-source editors (POST /plugin-source,
- * POST /runtime-source, save→check→refresh already wired). No new endpoints:
- * if a manifest source has no data, that field is omitted rather than faked.
- */
-function renderSettingsPanel(
-  panel: HTMLElement,
-  report: PluginUpdateReport | null,
-  copy: UpdateCopy,
-  open: boolean,
-  pluginActions: SourceEditorActions,
-  runtimeActions: SourceEditorActions,
-): void {
-  panel.textContent = ''
-  panel.style.display = open ? '' : 'none'
-  if (!open || report === null) return
-  const row = el('div', 'hqpu-settings-row')
-  row.append(el('div', 'hqpu-settings-title', copy.ui.settingsTitle))
-  // Origin badge: custom override (amber) vs the default configured source (green).
-  const pluginSource = normalizeSource(report.pluginSource)
-  const runtimeSource = normalizeSource(report.runtime.source)
-  const overridden = (pluginSource?.override ?? false) || (runtimeSource?.override ?? false)
-  const badge = el('span', 'hqpu-origin-badge', overridden ? copy.ui.originCustom : copy.ui.originDefault)
-  badge.dataset.origin = overridden ? 'override' : 'config'
-  row.append(badge)
-  panel.append(row)
-  if (pluginSource !== null) {
-    panel.append(el('label', '', copy.ui.pluginUrlLabel))
-    panel.append(sourceEditor('plugin', pluginSource, copy, pluginActions))
-  }
-  if (runtimeSource !== null) {
-    panel.append(el('label', '', copy.ui.runtimeUrlLabel))
-    panel.append(sourceEditor('runtime', runtimeSource, copy, runtimeActions))
-  }
-}
-/**
- * The sticky footer: left meta ("准备安装 N 项兼容插件" / "版本集: vX"), a
- * full-width primary "一键更新全套插件 (vX)" (install = one durable job),
- * a secondary 忽略 wired to the existing ignore/unignore affordance, and the
- * footnote. The count EXCLUDES ignored / already-current entries.
- */
-function renderFooter(
-  footer: HTMLElement,
-  installBtn: HTMLButtonElement,
-  ignoreBtn: HTMLButtonElement,
-  countEl: HTMLElement,
-  setEl: HTMLElement,
-  report: PluginUpdateReport | null,
-  copy: UpdateCopy,
-  installing: boolean,
-  store: UpdateStoreLike,
-): void {
-  if (report === null) {
-    countEl.textContent = ''
-    setEl.textContent = ''
-    installBtn.disabled = true
-    ignoreBtn.style.display = 'none'
-    return
-  }
-  const actionable = report.items.filter(
-    (item) => item.state === 'update' || item.state === 'install',
-  ).length
-  const hasSet = report.manifestVersion !== null
-  const setVersion: string = report.manifestVersion ?? ''
-  countEl.textContent = copy.ui.footerCount(actionable)
-  setEl.textContent = hasSet ? copy.ui.footerSet(setVersion) : ''
-  // Install-all: honest set-level label; disabled while busy or nothing to do.
-  installBtn.textContent = hasSet
-    ? copy.ui.installAllSet(setVersion)
-    : copy.ui.installAllSet('—')
-  installBtn.disabled = installing || actionable === 0 || !hasSet || report.ignoredSet
-  installBtn.dataset.busy = installing ? 'true' : 'false'
-  installBtn.onclick = () => {
-    void runInstall(store, copy)
-  }
-  // Secondary ignore button: only when there is an evaluated set to ignore.
-  ignoreBtn.style.display = hasSet ? '' : 'none'
-  ignoreBtn.textContent = report.ignoredSet ? copy.unignore : copy.ui.ignoreBtn
-  ignoreBtn.onclick = () => {
-    const version = report.manifestVersion as string
-    const action = report.ignoredSet ? unignoreOffer(version) : ignoreOffer(version)
-    void action
-      .then(() => store.refresh())
-      .catch(() => undefined)
-  }
-}
+// ── Panel ─────────────────────────────────────────────────────────────────
 /**
  * Open (or focus) the update panel. Re-renders from the store; when the store
@@ -1318,6 +1017,8 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
     return
   }
+  const previouslyFocused = document.activeElement as HTMLElement | null
   const overlay = el('div', 'hqpu-overlay')
   overlay.setAttribute('data-hq-plugin-update-view', '')
   overlay.addEventListener('click', (ev) => {
@@ -1328,15 +1029,14 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
   const panel = el('div', 'hqpu-panel')
   panel.setAttribute('role', 'dialog')
   panel.setAttribute('aria-modal', 'true')
-  panel.setAttribute('aria-label', copy.viewTitle)
+  panel.setAttribute('aria-label', copy.ui.title)
   panel.tabIndex = -1
-  // ── Sticky header: brand icon + title + relative checked time, refresh +
-  //    gear (advanced source settings) + close ──
-  const head = el('div', 'hqpu-head')
+  // ── Header ──
+  const head = el('header', 'hqpu-head')
   const headMain = el('div', 'hqpu-head-main')
   const brandIcon = el('span', 'hqpu-brand-icon')
-  brandIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5.6 2.6a6 6 0 015.6 1.6M12.4 13.4a6 6 0 01-5.6-1.6M10.6 2V5.4H7.2M5.4 14V10.6H8.8"/></svg>`
+  brandIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13.8 8.6A5.8 5.8 0 012.2 6.4"/><path d="M13.8 4.4V8.6H9.6"/><path d="M2.2 7.4A5.8 5.8 0 0113.8 9.6"/><path d="M2.2 11.6V7.4H6.4"/></svg>`
   const titleBlock = el('div', 'hqpu-title-block')
   titleBlock.append(el('h1', 'hqpu-title', copy.ui.title))
   const sub = el('p', 'hqpu-sub')
@@ -1344,89 +1044,96 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
   headMain.append(brandIcon, titleBlock)
   const toolbar = el('div', 'hqpu-toolbar')
-  const refreshBtn = iconButton('hqpu-icon-btn', REFRESH_ICON(16), copy.refresh, () => {
+  const refreshBtn = iconButton('hqpu-icon-btn', REFRESH_ICON(15), copy.refresh, () => {
     void store.check()
   })
-  toolbar.append(refreshBtn)
   const gearBtn = iconButton(
     'hqpu-icon-btn',
-    `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2.2"/><path d="M13.5 9.2v-2.4l-1.8-.6a4.4 4.4 0 00-.5-1.2l.9-1.7-1.7-1.7-1.7.9a4.4 4.4 0 00-1.2-.5L7.2 2.5H4.8l-.6 1.8a4.4 4.4 0 00-1.2.5l-1.7-.9-1.7 1.7.9 1.7a4.4 4.4 0 00-.5 1.2L2.5 7.2v2.4l1.8.6a4.4 4.4 0 00.5 1.2l-.9 1.7 1.7 1.7 1.7-.9a4.4 4.4 0 001.2.5l.6 1.8h2.4l.6-1.8a4.4 4.4 0 001.2-.5l1.7.9 1.7-1.7-.9-1.7a4.4 4.4 0 00.5-1.2l1.8-.6z"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2.2"/><path d="M13.5 9.2v-2.4l-1.8-.6a4.4 4.4 0 00-.5-1.2l.9-1.7-1.7-1.7-1.7.9a4.4 4.4 0 00-1.2-.5L7.2 2.5H4.8l-.6 1.8a4.4 4.4 0 00-1.2.5l-1.7-.9-1.7 1.7.9 1.7a4.4 4.4 0 00-.5 1.2L2.5 7.2v2.4l1.8.6a4.4 4.4 0 00.5 1.2l-.9 1.7 1.7 1.7 1.7-.9a4.4 4.4 0 001.2.5l.6 1.8h2.4l.6-1.8a4.4 4.4 0 001.2-.5l1.7.9 1.7-1.7-.9-1.7a4.4 4.4 0 00.5-1.2l1.8-.6z"/></svg>`,
     copy.ui.gearTooltip,
     () => {
-      settingsOpen = !settingsOpen
-      render()
+      toggleSettings()
     },
   )
-  toolbar.append(gearBtn)
-  const closeBtn = iconButton('hqpu-icon-btn', CLOSE_ICON(16), copy.close, () => {
+  gearBtn.dataset.settingsToggle = ''
+  gearBtn.setAttribute('aria-pressed', 'false')
+  const logBtn = iconButton('hqpu-icon-btn', LOG_ICON(15), copy.ui.logShow, () => {
+    toggleLog()
+  })
+  logBtn.dataset.logToggle = ''
+  logBtn.setAttribute('aria-pressed', 'false')
+  const closeBtn = iconButton('hqpu-icon-btn hqpu-icon-btn--close', CLOSE_ICON(15), copy.close, () => {
     onClose()
   })
-  toolbar.append(closeBtn)
+  toolbar.append(refreshBtn, gearBtn, logBtn, closeBtn)
   head.append(headMain, toolbar)
   panel.append(head)
-  // ── Collapsible advanced settings panel (gear-toggled) ──
-  const settingsPanel = el('div', 'hqpu-settings')
-  panel.append(settingsPanel)
+  // ── Settings strip (gear-toggled, above the body so it never shrinks it) ──
+  const settingsEl = el('div', 'hqpu-settings')
+  settingsEl.hidden = true
+  panel.append(settingsEl)
-  // ── Scrolling body: the narrow column ──
+  // ── Body + footer + log drawer share one positioned box, so the drawer can
+  //    cover the body without covering the header ──
+  const main = el('div', 'hqpu-main')
   const scroll = el('div', 'hqpu-scroll')
   const column = el('div', 'hqpu-column')
-  // The durable-job view leads: an active install/runtime update is resumed on
-  // open BEFORE anything else, and a recent terminal result is shown here too.
   const jobSection = el('div', 'hqpu-stack')
+  const bannerSection = el('div', 'hqpu-stack')
+  const bandSection = el('div', 'hqpu-stack')
   const listSection = el('div', 'hqpu-stack')
-  const runtimeSection = el('div', 'hqpu-stack')
-  const toastSection = el('div', 'hqpu-toast-host')
-  column.append(jobSection, listSection, runtimeSection, toastSection)
+  const extraSection = el('div', 'hqpu-stack')
+  column.append(jobSection, bannerSection, bandSection, listSection, extraSection)
   scroll.append(column)
-  panel.append(scroll)
-  // ── Sticky footer ──
-  const footer = el('div', 'hqpu-footer')
+  const footer = el('footer', 'hqpu-footer')
+  const cta = el('button', 'hqpu-btn--block')
+  cta.type = 'button'
+  const ctaSpinner = el('span', 'hqpu-cta-spinner')
+  ctaSpinner.hidden = true
+  const ctaLabel = el('span', 'hqpu-cta-label')
+  cta.append(ctaSpinner, ctaLabel)
   const footMeta = el('div', 'hqpu-foot-meta')
   const footCount = el('span', '')
-  const footSet = el('span', 'hqpu-foot-set')
-  footMeta.append(footCount, footSet)
-  const footActions = el('div', 'hqpu-foot-actions')
-  const installAllBtn = el('button', 'hqpu-btn hqpu-btn--block')
-  installAllBtn.type = 'button'
-  const ignoreBtn = el('button', 'hqpu-btn--ignore', copy.ui.ignoreBtn)
+  const ignoreBtn = el('button', 'hqpu-link')
   ignoreBtn.type = 'button'
-  footActions.append(installAllBtn, ignoreBtn)
-  const footnote = el('p', 'hqpu-footnote', copy.ui.footnote)
-  footer.append(footMeta, footActions, footnote)
-  panel.append(footer)
+  footMeta.append(footCount, ignoreBtn)
+  footer.append(cta, footMeta, el('p', 'hqpu-footnote', copy.ui.footnote))
+  const logDrawer = el('div', 'hqpu-log')
+  logDrawer.dataset.logDrawer = ''
+  logDrawer.hidden = true
+  const toastSection = el('div', 'hqpu-toast-host')
+  main.append(scroll, footer, logDrawer, toastSection)
+  panel.append(main)
   overlay.append(scrim, panel)
   document.body.appendChild(overlay)
   toastHost = toastSection
+  activeCopy = copy
   panel.focus()
   const disposers: Array<() => void> = []
-  // ── Runtime update: arm → confirm, then hand off to hq-edge ──
-  // Live in the panel's closure (not the report) because they are UI state, and
-  // a store refresh must not silently disarm a confirm the user just armed.
+  // ── Panel-closure UI state (survives store refreshes) ──
   let runtimeArmed = false
   let runtimeBusy = false
   let runtimeAccepted = false
-  // ── Panel-closure UI state (survive store refreshes) ──
-  const changelogOpen = new Set<string>()
-  let allOpen = false
   let settingsOpen = false
+  let settingsBuilt = false
+  let logOpen = false
   let dismissedAlert = false
+  let changesAllOpen = false
+  const changesOpen = new Set<string>()
+  let upToDateOpen = false
+  let ignoredOpen = false
+  let releaseOpen = false
+  let saving = false
+  let pluginDraft = ''
+  let runtimeDraft = ''
-  // Source-editor state, same reasoning: a background refresh must not discard
-  // a half-typed URL or silently close either editor.
-  const runtimeSourceState: SourceState = { editing: false, saving: false, draft: '' }
-  const pluginSourceState: SourceState = { editing: false, saving: false, draft: '' }
-  // Delegated, not spread: `...sourceActionsFor(...)` would evaluate the
-  // getters once and freeze `sourceEditing: false` — the editor would never
-  // open. Read every member through the live object instead.
-  const runtimeSourceActions = sourceActionsFor('runtime', runtimeSourceState)
   const runtimeActions: RuntimeActions = {
     get busy() {
       return runtimeBusy
@@ -1448,87 +1155,51 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
     onConfirm: () => {
       void requestRuntime()
     },
-    get sourceEditing() {
-      return runtimeSourceActions.sourceEditing
-    },
-    get sourceSaving() {
-      return runtimeSourceActions.sourceSaving
-    },
-    get sourceDraft() {
-      return runtimeSourceActions.sourceDraft
-    },
-    onSourceEdit: () => runtimeSourceActions.onSourceEdit(),
-    onSourceDraft: (value: string) => runtimeSourceActions.onSourceDraft(value),
-    onSourceSave: () => runtimeSourceActions.onSourceSave(),
-    onSourceCancel: () => runtimeSourceActions.onSourceCancel(),
-    onSourceReset: () => runtimeSourceActions.onSourceReset(),
   }
-  const pluginActions: SourceEditorActions = sourceActionsFor('plugin', pluginSourceState)
+  /** Fill both drafts from the report's URLs in effect. */
+  function syncDrafts(): void {
+    const report = store.report()
+    pluginDraft = normalizeSource(report?.pluginSource)?.url ?? ''
+    runtimeDraft = normalizeSource(report?.runtime.source)?.url ?? ''
+  }
-  /** Build the {@link SourceEditorActions} half for one manifest source. */
-  function sourceActionsFor(
-    kind: SourceKind,
-    state: SourceState,
-  ): SourceEditorActions {
-    return {
-      get sourceEditing() {
-        return state.editing
-      },
-      get sourceSaving() {
-        return state.saving
-      },
-      get sourceDraft() {
-        return state.draft
-      },
-      onSourceEdit: () => {
-        // Prefill with the URL in effect, so 保存 is a no-op unless edited.
-        const report = store.report()
-        const source =
-          kind === 'runtime' ? normalizeSource(report?.runtime.source) : normalizeSource(report?.pluginSource)
-        state.draft = source?.url ?? ''
-        state.editing = true
-        render()
-      },
-      onSourceDraft: (value: string) => {
-        state.draft = value
-      },
-      onSourceSave: () => {
-        void submitSource(kind, state)
-      },
-      onSourceCancel: () => {
-        state.editing = false
-        render()
-      },
-      onSourceReset: () => {
-        void submitSource(kind, state, '')
-      },
+  function toggleSettings(): void {
+    settingsOpen = !settingsOpen
+    if (settingsOpen) {
+      syncDrafts()
+      settingsBuilt = false
     }
+    render()
   }
   /**
-   * Save one manifest source — or clear the override with an empty URL —
-   * then re-run discovery.
+   * Save both manifest sources, then re-run discovery and close the strip.
    *
    * The re-check is not optional: the report is cached, so without a fresh
-   * `POST /check` the facts and the update button would keep naming the OLD
-   * manifest's offer after the source changed. hq-edge answers 422 with a
-   * message meant for a person on refusal (bad scheme, credentials, …), which
-   * the toast shows verbatim.
+   * `POST /check` the list would keep naming the OLD manifest's offer after the
+   * source changed. hq-edge answers 422 with a message meant for a person on
+   * refusal (bad scheme, credentials, …), which the toast shows verbatim —
+   * and the strip stays open with the draft intact so it can be fixed.
    */
-  async function submitSource(
-    kind: SourceKind,
-    state: SourceState,
-    url: string = state.draft,
-  ): Promise<void> {
-    state.saving = true
+  async function saveSources(): Promise<void> {
+    const report = store.report()
+    const pluginSource = normalizeSource(report?.pluginSource)
+    const runtimeSource = normalizeSource(report?.runtime.source)
+    saving = true
+    settingsBuilt = false
     render()
-    const labels = kind === 'runtime' ? copy.runtime : copy.pluginSource
     try {
-      if (kind === 'runtime') await setRuntimeUpdateSource(url)
-      else await setPluginUpdateSource(url)
-      state.editing = false
-      showToast(labels.saved, 'success')
+      const calls: Array<Promise<unknown>> = []
+      if (pluginSource !== null && pluginDraft !== pluginSource.url) {
+        calls.push(setPluginUpdateSource(pluginDraft))
+      }
+      if (runtimeSource !== null && runtimeDraft !== runtimeSource.url) {
+        calls.push(setRuntimeUpdateSource(runtimeDraft))
+      }
+      await Promise.all(calls)
+      settingsOpen = false
+      showToast(copy.pluginSource.saved, 'success')
       try {
         await checkUpdates()
         await store.refresh()
@@ -1538,11 +1209,40 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
       }
     } catch (err: unknown) {
       showToast(
-        `${labels.saveFailed}: ${err instanceof Error ? err.message : String(err)}`,
+        `${copy.pluginSource.saveFailed}: ${err instanceof Error ? err.message : String(err)}`,
         'error',
       )
     } finally {
-      state.saving = false
+      saving = false
+      settingsBuilt = false
+      render()
+    }
+  }
+  /** Clear one user override so the configured URL applies again. */
+  async function resetSource(kind: SourceKind): Promise<void> {
+    saving = true
+    settingsBuilt = false
+    render()
+    try {
+      if (kind === 'runtime') await setRuntimeUpdateSource('')
+      else await setPluginUpdateSource('')
+      showToast(kind === 'runtime' ? copy.runtime.saved : copy.pluginSource.saved, 'success')
+      try {
+        await checkUpdates()
+        await store.refresh()
+      } catch {
+        /* saved anyway */
+      }
+      syncDrafts()
+    } catch (err: unknown) {
+      showToast(
+        `${copy.pluginSource.saveFailed}: ${err instanceof Error ? err.message : String(err)}`,
+        'error',
+      )
+    } finally {
+      saving = false
+      settingsBuilt = false
       render()
     }
   }
@@ -1563,13 +1263,10 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
         return
       }
       // 202 Accepted: hq-edge exits to let the EDA host swap the runtime and
-      // relaunch. This panel is about to go away with the restart, so say so —
-      // and latch it, so a store refresh cannot re-offer the button for a
-      // server that is already gone.
+      // relaunch. Latch it, so a store refresh cannot re-offer the button for
+      // a server that is already gone.
       runtimeAccepted = true
       showToast(copy.runtime.updateAccepted, 'success')
-      // Adopt the new durable job immediately so the active-job view renders
-      // (it polls from here; this process is about to be swapped away anyway).
       void store.fetchStatus()
     } catch (err: unknown) {
       showToast(
@@ -1585,7 +1282,7 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
   /** Retry a failed/abandoned job: plugin-set → a fresh install; runtime →
    *  re-arm the runtime confirm flow. Always a NEW job, never re-clicking the
    *  settled job id. */
-  const retryJob = (kind: 'plugin-set' | 'runtime'): void => {
+  function retryJob(kind: 'plugin-set' | 'runtime'): void {
     if (kind === 'runtime') {
       runtimeArmed = true
       render()
@@ -1594,100 +1291,543 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
     }
   }
-  const renderJobSection = (): void => {
+  /** The newest settled job — what the log drawer is about. */
+  function settledJob(): UpdateJob | null {
+    const latest = store.recentJobs()[0]
+    return latest !== undefined && TERMINAL_PHASES.has(latest.phase) ? latest : null
+  }
+  function toggleLog(): void {
+    logOpen = !logOpen
+    render()
+  }
+  async function copyLogId(id: string): Promise<void> {
+    try {
+      const clipboard = navigator.clipboard
+      if (clipboard === undefined) throw new Error('clipboard unavailable')
+      await clipboard.writeText(id)
+      showToast(copy.ui.logCopied, 'success')
+    } catch {
+      showToast(copy.ui.logCopyFailed, 'error')
+    }
+  }
+  // ── Section renderers ──
+  function renderSettings(): void {
+    if (!settingsOpen) {
+      settingsEl.hidden = true
+      settingsEl.textContent = ''
+      return
+    }
+    settingsEl.hidden = false
+    // Rebuilding on every store emit would blow away the caret of whoever is
+    // typing, so the DOM is built once per open (or per explicit force).
+    if (settingsBuilt) return
+    settingsBuilt = true
+    settingsEl.textContent = ''
+    const report = store.report()
+    const pluginSource = normalizeSource(report?.pluginSource)
+    const runtimeSource = normalizeSource(report?.runtime.source)
+    const row = el('div', 'hqpu-settings-row')
+    row.append(el('span', 'hqpu-settings-title', copy.ui.settingsTitle))
+    const overridden = (pluginSource?.override ?? false) || (runtimeSource?.override ?? false)
+    const badge = el('span', 'hqpu-origin-badge', overridden ? copy.ui.originCustom : copy.ui.originDefault)
+    badge.dataset.origin = overridden ? 'override' : 'config'
+    row.append(badge)
+    settingsEl.append(row)
+    const field = (
+      kind: SourceKind,
+      source: RuntimeUpdateSource | null,
+      label: string,
+      ariaLabel: string,
+      placeholder: string,
+      draft: string,
+      onDraft: (value: string) => void,
+    ): void => {
+      if (source === null) return
+      const wrap = el('div', 'hqpu-field')
+      const labelRow = el('div', 'hqpu-field-head')
+      const id = `hqpu-source-${kind}`
+      const labelEl = el('label', '', label)
+      labelEl.htmlFor = id
+      labelRow.append(labelEl)
+      if (source.override) {
+        const reset = linkButton('hqpu-link hqpu-link--tiny', copy.ui.resetSource, () => {
+          void resetSource(kind)
+        })
+        reset.setAttribute(`data-${kind}-source-reset`, '')
+        labelRow.append(reset)
+      }
+      wrap.append(labelRow)
+      const input = el('input', 'hqpu-source-input')
+      input.id = id
+      input.type = 'url'
+      input.value = draft
+      input.placeholder = placeholder
+      input.setAttribute('aria-label', ariaLabel)
+      input.setAttribute(`data-${kind}-source-input`, '')
+      input.disabled = saving
+      input.spellcheck = false
+      input.addEventListener('input', () => {
+        // Draft-only: no re-render, so the caret and IME stay untouched.
+        onDraft(input.value)
+      })
+      // Enter saves both; Escape closes the strip without saving.
+      input.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter') {
+          ev.preventDefault()
+          void saveSources()
+        } else if (ev.key === 'Escape') {
+          ev.preventDefault()
+          ev.stopPropagation()
+          settingsOpen = false
+          syncDrafts()
+          render()
+        }
+      })
+      wrap.append(input)
+      settingsEl.append(wrap)
+    }
+    field(
+      'plugin',
+      pluginSource,
+      copy.ui.pluginUrlLabel,
+      copy.pluginSource.inputLabel,
+      copy.pluginSource.placeholder,
+      pluginDraft,
+      (value) => {
+        pluginDraft = value
+      },
+    )
+    field(
+      'runtime',
+      runtimeSource,
+      copy.ui.runtimeUrlLabel,
+      copy.runtime.sourceInputLabel,
+      copy.runtime.sourcePlaceholder,
+      runtimeDraft,
+      (value) => {
+        runtimeDraft = value
+      },
+    )
+    if (pluginSource === null && runtimeSource === null) {
+      settingsEl.append(el('p', 'hqpu-status', copy.runtime.notConfigured))
+    }
+    const actions = el('div', 'hqpu-settings-actions')
+    const cancel = el('button', 'hqpu-btn hqpu-btn--ghost hqpu-btn--sm', copy.cancel)
+    cancel.type = 'button'
+    cancel.addEventListener('click', () => {
+      settingsOpen = false
+      syncDrafts()
+      render()
+    })
+    const save = el('button', 'hqpu-btn hqpu-btn--brand hqpu-btn--sm', copy.ui.saveAndRefresh)
+    save.type = 'button'
+    save.disabled = saving
+    save.setAttribute('data-source-save', '')
+    save.addEventListener('click', () => {
+      void saveSources()
+    })
+    actions.append(cancel, save)
+    settingsEl.append(actions)
+  }
+  function renderJobSection(): void {
     jobSection.textContent = ''
     const active = store.activeJob()
     if (active !== null && !TERMINAL_PHASES.has(active.phase)) {
-      // An active job leads the panel — resumed on open, polled to its end.
       jobSection.append(activeJobView(active, copy))
+    }
+  }
+  function renderBanners(report: PluginUpdateReport | null, jobActive: boolean): void {
+    bannerSection.textContent = ''
+    if (report !== null) {
+      const banner = checkBanner(report, copy, () => {
+        void store.check()
+      })
+      if (banner !== null) bannerSection.append(banner)
+    }
+    // A terminal non-success job leads the body; the full log is one click away
+    // in the drawer, but the outcome itself must not hide there.
+    if (jobActive) return
+    const settled = settledJob()
+    if (settled !== null && settled.phase !== 'done') {
+      bannerSection.append(
+        jobResultBanner(
+          settled,
+          copy,
+          () => retryJob(settled.kind),
+          () => {
+            logOpen = true
+            render()
+          },
+        ),
+      )
+    }
+  }
+  function renderList(report: PluginUpdateReport | null, busy: boolean): void {
+    listSection.textContent = ''
+    bandSection.textContent = ''
+    if (report === null) {
+      listSection.append(skeleton(copy))
       return
     }
-    const recent = store.recentJobs()
-    const latest = recent[0]
-    if (latest !== undefined && TERMINAL_PHASES.has(latest.phase)) {
-      jobSection.append(resultView(latest, copy, () => retryJob(latest.kind)))
-      const older = recentJobsList(recent, copy)
-      if (older !== null) jobSection.append(older)
+    const band = decisionBand(report, copy)
+    if (band !== null) bandSection.append(band)
+    const actionable = report.items.filter(isActionable)
+    if (actionable.length > 0) {
+      const section = el('section', 'hqpu-group')
+      section.dataset.group = copy.group.actionable
+      const head = el('div', 'hqpu-sec-head')
+      const titleWrap = el('div', 'hqpu-sec-title')
+      titleWrap.append(el('span', '', copy.group.actionable))
+      titleWrap.append(el('span', 'hqpu-count-pill', String(actionable.length)))
+      head.append(titleWrap)
+      const anyChanges = actionable.some((i) => Array.isArray(i.changes) && i.changes.length > 0)
+      if (anyChanges) {
+        head.append(
+          linkButton(
+            'hqpu-link',
+            changesAllOpen ? copy.ui.collapseLogs : copy.ui.expandLogs,
+            () => {
+              changesAllOpen = !changesAllOpen
+              if (!changesAllOpen) changesOpen.clear()
+              render()
+            },
+          ),
+        )
+      }
+      section.append(head)
+      const list = el('ul', 'hqpu-cards')
+      for (const item of actionable) {
+        list.append(
+          pluginCard(item, copy, {
+            changesOpen: changesAllOpen || changesOpen.has(item.name),
+            onToggleChanges: () => {
+              if (changesOpen.has(item.name)) changesOpen.delete(item.name)
+              else changesOpen.add(item.name)
+              render()
+            },
+            onInstall: () => {
+              void runInstall(store, copy, [item.name])
+            },
+            onIgnore: () => {
+              void togglePluginIgnore(item)
+            },
+            busy,
+          }),
+        )
+      }
+      section.append(list)
+      listSection.append(section)
+    }
+  }
+  function renderExtras(report: PluginUpdateReport | null): void {
+    extraSection.textContent = ''
+    if (report === null) return
+    const alert = runtimeResultAlert(report, copy, dismissedAlert, () => {
+      dismissedAlert = true
+      render()
+    })
+    if (alert !== null) extraSection.append(alert)
+    const engine = runtimeEngineCard(report, copy, runtimeActions)
+    if (engine !== null) extraSection.append(engine)
+    const byState = (state: PluginUpdateItem['state']): PluginUpdateItem[] =>
+      report.items.filter((item) => item.state === state)
+    const ignored = byState('ignored')
+    if (ignored.length > 0) {
+      extraSection.append(
+        disclosure({
+          id: 'hqpu-disc-ignored',
+          title: copy.group.ignored,
+          count: `(${ignored.length})`,
+          note: copy.ui.ignoredNote,
+          open: ignoredOpen,
+          onToggle: () => {
+            ignoredOpen = !ignoredOpen
+            render()
+          },
+          build: () => {
+            const ul = el('ul', 'hqpu-rows')
+            for (const item of ignored) {
+              ul.append(
+                pluginRow(item, copy, () => {
+                  void togglePluginIgnore(item)
+                }),
+              )
+            }
+            return [ul]
+          },
+        }),
+      )
+    }
+    const current = byState('current')
+    if (current.length > 0) {
+      extraSection.append(
+        disclosure({
+          id: 'hqpu-disc-current',
+          title: copy.group.current,
+          count: `(${current.length})`,
+          note: copy.ui.upToDateNote,
+          open: upToDateOpen,
+          onToggle: () => {
+            upToDateOpen = !upToDateOpen
+            render()
+          },
+          build: () => {
+            const ul = el('ul', 'hqpu-rows')
+            for (const item of current) ul.append(pluginRow(item, copy, () => undefined))
+            return [ul]
+          },
+        }),
+      )
+    }
+    if (hasReleaseContent(report.release)) {
+      extraSection.append(
+        disclosure({
+          id: 'hqpu-disc-release',
+          title: copy.ui.releaseTitle,
+          note: report.manifestVersion !== null ? `v${report.manifestVersion}` : undefined,
+          open: releaseOpen,
+          onToggle: () => {
+            releaseOpen = !releaseOpen
+            render()
+          },
+          build: () => releaseBody(report.release as ReleaseInfo, copy),
+        }),
+      )
+    }
+    if (report.items.length === 0 && typeof report.lastError !== 'string') {
+      extraSection.append(el('div', 'hqpu-empty', copy.empty))
     }
   }
-  const render = (): void => {
+  function renderFooter(report: PluginUpdateReport | null, busy: boolean): void {
+    const actionable = report === null ? 0 : actionableUpdateCount(report)
+    const setVersion = report?.manifestVersion ?? null
+    const failed = typeof report?.lastError === 'string' && (report?.lastError ?? '').length > 0
+    const runtimePending = report !== null && runtimeUpdateOffered(report.runtime)
+    const anything = actionable > 0 || runtimePending
+    ctaSpinner.hidden = !busy
+    cta.dataset.busy = busy ? 'true' : 'false'
+    cta.setAttribute('aria-busy', busy ? 'true' : 'false')
+    if (busy) {
+      ctaLabel.textContent = copy.ui.ctaInstalling
+      cta.disabled = true
+      footCount.textContent = copy.ui.footerBusy
+    } else if (report === null) {
+      ctaLabel.textContent = copy.ui.ctaNoSet
+      cta.disabled = true
+      footCount.textContent = ''
+    } else if (failed) {
+      // Installing against a stale manifest is the one path that can only end
+      // in a 422 — say so instead of offering a button that cannot work.
+      ctaLabel.textContent = copy.ui.ctaFailed
+      cta.disabled = true
+      footCount.textContent = copy.ui.footerFailed
+    } else if (setVersion === null) {
+      ctaLabel.textContent = copy.ui.ctaNoSet
+      cta.disabled = true
+      footCount.textContent = copy.ui.checkedNever
+    } else if (actionable === 0 && runtimePending) {
+      // The plugin set is done; the only remaining offer is the runtime, which
+      // needs its own confirm — the CTA must not imply it would install it.
+      ctaLabel.textContent = copy.ui.ctaNoPlugins
+      cta.disabled = true
+      footCount.textContent = copy.ui.footerRuntimeOnly
+    } else if (actionable === 0 && !runtimePending) {
+      ctaLabel.textContent = copy.ui.ctaUpToDate
+      cta.disabled = true
+      footCount.textContent = copy.ui.footerAllGood
+    } else {
+      ctaLabel.textContent = copy.ui.cta(actionable)
+      cta.disabled = false
+      footCount.textContent = copy.ui.footerCount(actionable)
+    }
+    cta.onclick = () => {
+      void runInstall(store, copy)
+    }
+    // Set-level mute: only with an evaluated set and something to mute.
+    const canMute = setVersion !== null && report !== null && !busy
+    ignoreBtn.hidden = !canMute || (!anything && !report?.ignoredSet)
+    ignoreBtn.textContent = report?.ignoredSet === true ? copy.ui.unignoreBtn : copy.ui.ignoreBtn
+    ignoreBtn.onclick = () => {
+      if (setVersion === null) return
+      const ignored = report?.ignoredSet === true
+      const action = ignored ? unignoreOffer(setVersion) : ignoreOffer(setVersion)
+      // `check()`, never `refresh()`: ignoring only writes the decision to
+      // hq-edge's state file, and its cached report keeps every item at
+      // `update` until discovery runs again.
+      void action
+        .then(() => store.check())
+        .catch((err: unknown) => {
+          showToast(
+            `${copy.ignoreError}: ${err instanceof Error ? err.message : String(err)}`,
+            'error',
+          )
+        })
+    }
+  }
+  function renderLogDrawer(jobActive: boolean): void {
+    const job = settledJob()
+    const available = !jobActive && job !== null
+    logBtn.disabled = !available
+    logBtn.setAttribute('aria-pressed', logOpen && available ? 'true' : 'false')
+    const label =
+      jobActive ? copy.ui.logBusy : job === null ? copy.ui.logNone : logOpen ? copy.ui.logHide : copy.ui.logShow
+    logBtn.title = label
+    logBtn.setAttribute('aria-label', label)
+    // A running job (or none at all) cannot have a log; drop the open flag so
+    // the drawer does not snap back open once the job settles.
+    if (!available || !logOpen) {
+      if (!available) logOpen = false
+      logDrawer.hidden = true
+      logDrawer.textContent = ''
+      main.dataset.logOpen = '0'
+      return
+    }
+    logDrawer.hidden = false
+    logDrawer.textContent = ''
+    // The drawer is absolutely positioned, so it cannot size its own box: on a
+    // short body (nothing left to update) it would be squeezed between the
+    // header and the panel edge. The flag gives `.hqpu-main` a floor while it
+    // is open, and nothing at all once it closes.
+    main.dataset.logOpen = '1'
+    for (const node of buildLogDrawer(
+      job,
+      store.recentJobs(),
+      copy,
+      (id) => {
+        void copyLogId(id)
+      },
+      () => {
+        logOpen = false
+        render()
+      },
+    )) {
+      logDrawer.append(node)
+    }
+  }
+  function render(): void {
     const report = store.report()
-    // The footer "installing" state is owned by the store flag OR any active
-    // durable job — buttons stay disabled while either is true.
-    const jobActive =
-      store.activeJob() !== null && !TERMINAL_PHASES.has(store.activeJob()!.phase)
-    const installing = store.installing() || jobActive
-    const stale = report === null
-    refreshBtn.disabled = stale
-    refreshBtn.title = copy.refresh
-    // Header sub-line: "上次检查: N 分钟前" (from report.checkedAt).
-    const ago = relativeAgo(report?.checkedAt, copy)
-    sub.textContent = ago !== null ? copy.ui.checkedAgo(ago) : copy.ui.checkedUnknown
+    const active = store.activeJob()
+    const jobActive = active !== null && !TERMINAL_PHASES.has(active.phase)
+    const busy = store.installing() || jobActive
-    // Collapsible advanced settings panel (gear-toggled): existing source
-    // editors — plugin + runtime manifest URL override, save→check→refresh.
-    renderSettingsPanel(settingsPanel, report, copy, settingsOpen, pluginActions, runtimeSourceActions)
+    refreshBtn.disabled = report === null
+    gearBtn.setAttribute('aria-pressed', settingsOpen ? 'true' : 'false')
+    gearBtn.title = copy.ui.gearTooltip
+    // Header sub-line: the set version and the relative check time, once.
+    const ago = relativeAgo(report?.checkedAt, copy)
+    const setLabel =
+      report?.manifestVersion !== null && report?.manifestVersion !== undefined
+        ? copy.ui.setVersion(report.manifestVersion)
+        : null
+    if (setLabel !== null && ago !== null) sub.textContent = copy.ui.subJoined(setLabel, ago)
+    else sub.textContent = setLabel ?? ago ?? copy.ui.checkedUnknown
+    renderSettings()
     renderJobSection()
-    if (stale) {
-      listSection.textContent = ''
-      listSection.append(skeleton(copy))
-    } else {
-      renderList(
-        listSection,
-        report,
-        copy,
-        changelogOpen,
-        allOpen,
-        (name) => {
-          if (changelogOpen.has(name)) changelogOpen.delete(name)
-          else changelogOpen.add(name)
-          render()
-        },
-        () => {
-          allOpen = !allOpen
-          render()
-        },
-        () => {
-          void store.check()
-        },
-        (name) => {
-          void runInstall(store, copy, [name])
-        },
-        (item) => {
-          const report = store.report()
-          if (report?.manifestVersion === null || report?.manifestVersion === undefined) return
-          const action = item.state === 'ignored'
-            ? unignorePlugin(report.manifestVersion, item.name)
-            : ignorePlugin(report.manifestVersion, item.name)
-          void action.then(() => store.check()).catch(() => undefined)
-        },
+    renderBanners(report, jobActive)
+    renderList(report, busy)
+    renderExtras(report)
+    renderFooter(report, busy)
+    renderLogDrawer(jobActive)
+  }
+  /** Flip one plugin's per-item ignore flag, then re-run discovery. */
+  async function togglePluginIgnore(item: PluginUpdateItem): Promise<void> {
+    const setVersion = store.report()?.manifestVersion ?? null
+    if (setVersion === null) return
+    const action =
+      item.state === 'ignored'
+        ? unignorePlugin(setVersion, item.name)
+        : ignorePlugin(setVersion, item.name)
+    try {
+      await action
+      // Discovery must re-run for the item to come back as `ignored`; a
+      // refusal has to be visible, never silently swallowed.
+      await store.check()
+    } catch (err: unknown) {
+      showToast(
+        `${copy.ignoreError}: ${err instanceof Error ? err.message : String(err)}`,
+        'error',
       )
     }
-    renderRuntime(runtimeSection, report, copy, runtimeActions, dismissedAlert, () => {
-      dismissedAlert = true
-      render()
-    })
-    renderFooter(footer, installAllBtn, ignoreBtn, footCount, footSet, report, copy, installing, store)
   }
   const unsubscribe = store.subscribe(render)
   disposers.push(unsubscribe)
   // Refresh on open (bounded; never block the shell).
-  void store.refresh().then(() => {
-    // Store notification re-renders already; nothing extra to do.
-  })
+  void store.refresh()
-  // Escape closes, the shell-wide dialog contract.
+  // Escape peels one layer at a time; the shell-wide contract still holds.
   const onKeyDown = (ev: KeyboardEvent): void => {
     if (ev.key === 'Escape') {
       ev.stopPropagation()
+      if (logOpen) {
+        logOpen = false
+        render()
+        return
+      }
+      if (settingsOpen) {
+        settingsOpen = false
+        syncDrafts()
+        render()
+        return
+      }
       onClose()
+      return
+    }
+    if (ev.key === 'Tab') trapFocus(ev)
+  }
+  /** Keep Tab inside the dialog — it declares `aria-modal="true"`. */
+  function trapFocus(ev: KeyboardEvent): void {
+    const focusable = [
+      ...panel.querySelectorAll<HTMLElement>(
+        'button:not(:disabled), [href], input:not(:disabled), [tabindex]:not([tabindex="-1"])',
+      ),
+    ].filter((node) => node.closest('[hidden]') === null)
+    if (focusable.length === 0) return
+    const first = focusable[0]!
+    const last = focusable[focusable.length - 1]!
+    const activeEl = document.activeElement
+    if (ev.shiftKey && (activeEl === first || activeEl === panel)) {
+      ev.preventDefault()
+      last.focus()
+    } else if (!ev.shiftKey && activeEl === last) {
+      ev.preventDefault()
+      first.focus()
     }
   }
   document.addEventListener('keydown', onKeyDown)
   disposers.push(() => document.removeEventListener('keydown', onKeyDown))
@@ -1702,8 +1842,79 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
     if (toastTimer !== null) window.clearTimeout(toastTimer)
     toastTimer = null
     if (toastHost === toastSection) toastHost = null
+    if (activeCopy === copy) activeCopy = null
     overlay.remove()
+    // Focus goes back where it came from — the sidebar row that opened this.
+    if (previouslyFocused !== null && previouslyFocused.isConnected) previouslyFocused.focus()
   }
   render()
 }
+/**
+ * Run the install transaction (a new durable job), then let the store poll it.
+ *
+ * @param pluginNames - omit for the whole set (the footer CTA), or pass one
+ *   name for a card's 单独更新. hq-edge honours the subset.
+ */
+async function runInstall(
+  store: UpdateStoreLike,
+  copy: UpdateCopy,
+  pluginNames?: string[],
+): Promise<void> {
+  const report = store.report()
+  if (report === null) return
+  // Without an evaluated set there is nothing to install: hq-edge has not read
+  // a manifest yet, so the report is still its empty shell.
+  if (report.manifestVersion === null) {
+    showToast(copy.checkFailed, 'error')
+    return
+  }
+  // Flip the installing flag BEFORE the request: this is what disables the
+  // action buttons and shows the in-flight footer state.
+  store.setInstalling(true)
+  try {
+    const result = await installSet(report.manifestVersion, pluginNames)
+    if (result.error !== undefined) {
+      store.setInstalling(false)
+      showToast(`${copy.installError}: ${result.error}`, 'error')
+      return
+    }
+    // 202 accepted: a durable job now owns the lifecycle. The store's /status
+    // poller renders progress and clears the flag when the job settles.
+    showToast(copy.installSuccess, 'success')
+    void store.fetchStatus()
+  } catch (err: unknown) {
+    store.setInstalling(false)
+    showToast(
+      `${copy.installError}: ${err instanceof Error ? err.message : String(err)}`,
+      'error',
+    )
+  }
+}
+/** First-read placeholders, sharing the card layout. */
+function skeleton(copy: UpdateCopy): HTMLElement {
+  const section = el('section', 'hqpu-group')
+  section.setAttribute('role', 'status')
+  section.dataset.loading = ''
+  section.setAttribute('aria-label', copy.loading)
+  const list = el('ul', 'hqpu-cards')
+  list.setAttribute('aria-hidden', 'true')
+  for (let index = 0; index < 3; index += 1) {
+    const card = el('li', 'hqpu-card')
+    const head = el('div', 'hqpu-card-head')
+    const id = el('div', 'hqpu-card-id')
+    id.append(el('span', 'hqpu-avatar hqpu-skeleton-fill'))
+    const main = el('div', 'hqpu-card-main')
+    const title = el('span', 'hqpu-card-title hqpu-skeleton-fill hqpu-skeleton-title')
+    const sub = el('span', 'hqpu-card-sub hqpu-skeleton-fill hqpu-skeleton-sub')
+    main.append(title, sub)
+    id.append(main)
+    head.append(id)
+    card.append(head)
+    list.append(card)
+  }
+  section.append(list)
+  return section
+}