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

package/src/client/update-view.ts

@@ -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,200 +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): 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))
-  }
-  drawer.append(ul)
-  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')
-  if (item.state === 'update' || item.state === 'install') {
-    const install = el('button', 'hqpu-log-toggle', copy.installOne)
-    install.type = 'button'
-    install.title = copy.installOneTip
-    install.addEventListener('click', onInstall)
-    const ignore = el('button', 'hqpu-log-toggle', copy.ignore)
-    ignore.type = 'button'
-    ignore.addEventListener('click', onIgnore)
-    right.append(install, ignore)
-  } else if (item.state === 'ignored') {
-    const show = el('button', 'hqpu-log-toggle', copy.unignore)
-    show.type = 'button'
-    show.addEventListener('click', onIgnore)
-    right.append(show)
-  }
-  if (Array.isArray(item.changes) && item.changes.length > 0) {
-    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)
-
-  // Inline changelog drawer (actionable items only).
-  if (Array.isArray(item.changes) && item.changes.length > 0) {
-    card.append(changelogDrawer(item, copy, open))
-  }
-  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 {
@@ -307,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()
@@ -329,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
 }
@@ -338,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':
@@ -380,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
+}
+
+/**
+ * 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 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).
+ * 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')
@@ -407,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)
@@ -439,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) => {
@@ -472,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)
 
@@ -480,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))
-  }
-  if (res !== undefined && res.errorCode !== undefined && res.errorCode.length > 0) {
-    card.append(el('p', 'hqpu-status', res.errorCode))
+  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 (typeof job.logHint === 'string' && job.logHint.length > 0) {
-    card.append(el('p', 'hqpu-status hqpu-job-meta', copy.job.logHint(job.logHint)))
+  if (res?.errorCode !== undefined && res.errorCode.length > 0) {
+    text.append(el('code', 'hqpu-error-code', res.errorCode))
   }
+  head.append(icon, text)
+  card.append(head)
 
-  const steps = stepsList(job, copy)
-  if (steps !== null) card.append(steps)
-
-  // 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)
-  }
-  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)
+  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 (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)
+  }
+  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)
   }
-  return details
+
+  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. */
@@ -707,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
@@ -717,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
@@ -735,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()
@@ -1201,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
@@ -1307,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) => {
@@ -1317,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')
@@ -1333,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
@@ -1437,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()
@@ -1527,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()
     }
   }
@@ -1552,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(
@@ -1574,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()
@@ -1583,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 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))
+    }
+  }
+
+  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
     }
-    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)
+    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)
     }
   }
 
-  const render = (): void => {
+  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))
 
@@ -1691,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
+}