@huaqiu/dsh-tool-plugin-update 0.6.6 → 0.6.8

package/src/client/update-view.ts

@@ -26,11 +26,14 @@ import {
   setPluginUpdateSource,
   setRuntimeUpdateSource,
   unignoreOffer,
+  TERMINAL_PHASES,
   type PluginUpdateItem,
   type PluginUpdateReport,
+  type ReleaseInfo,
   type RuntimeUpdateSource,
+  type UpdateJob,
 } from './api.js'
-import type { UpdateCopy } from './copy.js'
+import { formatMb, type UpdateCopy } from './copy.js'
 import {
   CHECK_CIRCLE_ICON,
   CLOSE_ICON,
@@ -44,7 +47,17 @@ import {
 export interface UpdateStoreLike {
   report(): PluginUpdateReport | null
   installing(): boolean
+  /** Mark the installing footer state (set by the panel before the restart). */
+  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. */
+  recentJobs(): UpdateJob[]
   refresh(): Promise<PluginUpdateReport | null>
+  /** Force a fresh update check (used by the failed-check Retry action). */
+  check(): Promise<PluginUpdateReport | null>
+  /** Re-read `/status` (resume an active job immediately after submitting). */
+  fetchStatus(): Promise<void>
   subscribe(listener: () => void): () => void
 }
 
@@ -149,80 +162,142 @@ function blockedReason(item: PluginUpdateItem, copy: UpdateCopy): string | undef
   return by.length > 0 ? by.join(', ') : undefined
 }
 
-/** One package card: glyph, name with its state tag, version line, end actions. */
+/** 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)
+  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. Blocked/incompatible cards are dimmed with a rose
+ *  无法安装 badge and a reason line, and carry NO install button. */
 function packageCard(
   item: PluginUpdateItem,
   copy: UpdateCopy,
-  installing: boolean,
-  store: UpdateStoreLike,
+  open: boolean,
+  onToggle: () => void,
 ): HTMLLIElement {
-  const card = el('li', 'hqpu-card')
+  const blocked = item.state === 'blocked'
+  const card = el('li', blocked ? 'hqpu-card hqpu-card--blocked' : 'hqpu-card')
   card.dataset.pluginName = item.name
   card.dataset.state = item.state
-  // The full package name is the card's tooltip; the row shows the short name.
-  card.title = `${item.name} · ${versionLine(item)}`
 
   const head = el('div', 'hqpu-card-head')
-
-  const glyph = el('span', 'hqpu-card-icon')
-  glyph.setAttribute('aria-hidden', 'true')
-  glyph.innerHTML = PLUGIN_ICON(24)
+  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 titleRow = el('div', 'hqpu-title-row')
-  const title = el('span', 'hqpu-card-title', shortName(item.name))
-  const tag = el('span', 'hqpu-tag')
-  tag.dataset.tone = stateTone(item)
-  tag.textContent = stateLabel(item, copy)
-  titleRow.append(title, tag)
-
-  const desc = el('span', 'hqpu-card-desc', versionLine(item))
-
-  main.append(titleRow, desc)
-  head.append(glyph, main)
-
-  const end = el('div', 'hqpu-card-end')
-  if (item.state === 'update' || item.state === 'install') {
-    const button = el('button', 'hqpu-btn hqpu-btn--sm hqpu-btn--primary')
-    button.type = 'button'
-    button.disabled = installing
-    button.innerHTML = `${DOWNLOAD_ICON(13)}<span>${copy.installOne}</span>`
-    button.addEventListener('click', () => {
-      void runInstall(store, copy)
-    })
-    end.append(button)
+  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 (blocked) {
+    right.append(el('span', 'hqpu-blocked-badge', copy.ui.blockedBadge))
+  } else 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(end)
+  head.append(left, right)
   card.append(head)
 
-  // A block reason belongs to a blocked offer only.
-  if (item.state === 'blocked') {
+  // Inline changelog drawer (actionable items only).
+  if (!blocked && Array.isArray(item.changes) && item.changes.length > 0) {
+    card.append(changelogDrawer(item, copy, open))
+  }
+
+  // Blocked reason line(s): mapped copy plus the server's full reasons/notes.
+  if (blocked) {
     const reason = blockedReason(item, copy)
-    if (reason !== undefined) {
-      card.append(el('p', 'hqpu-card-reason', reason))
+    const entries = [
+      ...(reason !== undefined ? [reason] : []),
+      ...[...(item.reasons ?? []), ...(item.notes ?? [])].filter(
+        (e): e is string => typeof e === 'string' && e.length > 0,
+      ),
+    ]
+    for (const entry of entries) {
+      const line = el('p', 'hqpu-reason-line')
+      line.innerHTML = `<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="M8 5V8.5M8 11.25h.01M14.5 8a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0Z"/></svg>`
+      line.append(document.createTextNode(entry))
+      card.append(line)
     }
   }
   return card
 }
 
-/** A section: group head with its count, then the cards. */
+/** A section: head (title + count pill + expand-all toggle) then its cards. */
 function group(
   heading: string,
   items: PluginUpdateItem[],
   copy: UpdateCopy,
-  installing: boolean,
-  store: UpdateStoreLike,
+  changelogOpen: Set<string>,
+  allOpen: boolean,
+  onToggle: (name: string) => void,
+  onToggleAll: () => void,
 ): HTMLElement | null {
   if (items.length === 0) return null
   const section = el('section', 'hqpu-group')
   section.dataset.group = heading
 
-  const head = el('div', 'hqpu-group-head')
-  head.append(el('h3', 'hqpu-group-title', heading))
-  head.append(el('span', 'hqpu-group-count', copy.groupCount(items.length)))
+  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) => i.state !== 'blocked' && 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, installing, store))
+  for (const item of items) {
+    list.append(packageCard(item, copy, allOpen || changelogOpen.has(item.name), () => onToggle(item.name)))
+  }
 
   section.append(head, list)
   return section
@@ -267,6 +342,370 @@ function skeleton(copy: UpdateCopy): HTMLElement {
   return section
 }
 
+// ── Durable job views (active / result / recent) ───────────────────────────
+
+/** Format a byte count for the progress line, or null when unknown. */
+function formatBytes(n: number | undefined): string | null {
+  if (n === undefined || !Number.isFinite(n) || n < 0) return null
+  if (n >= 1024 ** 3) return `${(n / 1024 ** 3).toFixed(1)} GB`
+  if (n >= 1024 ** 2) return `${(n / 1024 ** 2).toFixed(1)} MB`
+  if (n >= 1024) return `${(n / 1024).toFixed(0)} KB`
+  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. */
+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()
+  if (!Number.isFinite(then)) return null
+  const diffMin = Math.round((Date.now() - then) / 60_000)
+  if (diffMin < 1) return copy.ui.agoJust
+  if (diffMin < 60) return copy.ui.agoMinutes(diffMin)
+  const hours = Math.round(diffMin / 60)
+  if (hours < 24) return copy.ui.agoHours(hours)
+  return copy.ui.agoDays(Math.round(hours / 24))
+}
+
+function jobKindLabel(job: UpdateJob, copy: UpdateCopy): string {
+  return job.kind === 'runtime' ? copy.job.kindRuntime : copy.job.kindPluginSet
+}
+
+/** The phase in human words, falling back to the raw code. */
+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':
+      return 0
+    case 'verifying':
+    case 'resolving':
+      return 1
+    case 'staging':
+    case 'activating':
+    case 'awaiting-host':
+      return 2
+    case 'restarting':
+    case 'verifying-after-restart':
+      return 3
+    case 'queued':
+      return -1
+    default:
+      return -1
+  }
+}
+
+/**
+ * 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).
+ */
+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')
+  pulse.append(el('span', 'hqpu-pulse-ring'))
+  const title =
+    job.kind === 'runtime'
+      ? copy.ui.jobRuntimeTitle(job.targetVersion)
+      : copy.ui.jobPluginTitle(job.targetVersion)
+  titleWrap.append(pulse, el('span', '', title))
+  const pct = job.progress.percent
+  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')
+    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)
+  meta.append(el('span', '', phaseText))
+  const speed = formatBytes(job.progress.bytesPerSecond)
+  const done = formatBytes(job.progress.bytesDone)
+  const total = formatBytes(job.progress.bytesTotal)
+  const telemetry =
+    speed !== null && done !== null && total !== null
+      ? `${speed}/s (${done} / ${total})`
+      : speed !== null
+        ? `${speed}/s`
+        : done !== null && total !== null
+          ? copy.job.bytes(done, total)
+          : ''
+  if (telemetry.length > 0) meta.append(el('span', '', 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(
+    el(
+      'span',
+      '',
+      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(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) => {
+    const cls =
+      current === -1
+        ? 'hqpu-job-step--todo'
+        : index < current
+          ? 'hqpu-job-step--done'
+          : index === current
+            ? 'hqpu-job-step--active'
+            : 'hqpu-job-step--todo'
+    stepsRow.append(el('div', cls, label))
+  })
+  card.append(stepsRow)
+
+  section.append(card)
+  return section
+}
+
+/**
+ * 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).
+ */
+function resultView(job: UpdateJob, copy: UpdateCopy, onRetry: () => 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 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))
+  }
+  if (typeof job.logHint === 'string' && job.logHint.length > 0) {
+    card.append(el('p', 'hqpu-status hqpu-job-meta', copy.job.logHint(job.logHint)))
+  }
+
+  const steps = stepsList(job, copy)
+  if (steps !== null) card.append(steps)
+
+  // 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)
+  }
+  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.
+ */
+function checkBanner(
+  report: PluginUpdateReport,
+  copy: UpdateCopy,
+  onRetry: () => 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 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
+  }
+  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
+
+  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)
+  }
+  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)
+  }
+  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)
+  }
+  return details
+}
+
 /** Mutable editor state for one manifest source (lives in the panel closure). */
 interface SourceState {
   editing: boolean
@@ -431,6 +870,11 @@ function sourceEditor(
   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:#a1a1aa;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'
@@ -516,140 +960,184 @@ function pluginSourceGroup(
   return section
 }
 
-/** The independent HQ Edge runtime report, as ruled fact rows. */
-function runtimeGroup(
+/**
+ * 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,
-  actions: RuntimeActions,
-): HTMLElement {
+  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'
-  const head = el('div', 'hqpu-group-head')
-  head.append(el('h3', 'hqpu-group-title', copy.runtime.title))
-  section.append(head)
+  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
+}
 
-  const facts = el('dl', 'hqpu-facts')
+/** 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
-  // `runtime.latest` is a release ENTRY; only its version is ever displayed or
-  // sent back as `targetVersion`.
   const latestVersion = runtimeLatestVersion(runtime)
-
-  const row = (label: string, value: string, code = false): void => {
-    const wrap = el('div')
-    wrap.append(el('dt', '', label))
-    const dd = el('dd')
-    if (code) {
-      const node = el('code', '', value)
-      dd.append(node)
-    } else {
-      dd.textContent = value
-    }
-    wrap.append(dd)
-    facts.append(wrap)
+  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)
 
-  // The source row: which manifest URL is in effect and where it came from.
-  // Absent on an older hq-edge — then only the legacy notConfigured row shows.
-  const source = normalizeSource(runtime.source)
-
-  if (runtime.configured === false) {
-    if (source !== null) {
-      sourceFactRow(facts, source, copy)
-    } else {
-      row(copy.runtime.source, copy.runtime.notConfigured)
-    }
-  } else {
-    row(copy.runtime.current, runtime.currentVersion ?? copy.runtime.unknown)
-    if (runtime.updateAvailable && latestVersion !== null) {
-      row(copy.runtime.latest, latestVersion)
-    }
-    if (report.manifestVersion !== null) {
-      row(copy.runtime.set, report.manifestVersion, true)
-    }
-    if (typeof runtime.checkedAt === 'string' && runtime.checkedAt.length > 0) {
-      row(copy.runtime.checkedAt, new Date(runtime.checkedAt).toLocaleString())
-    }
-    if (source !== null) {
-      sourceFactRow(facts, source, copy)
+  // 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)))
     }
-  }
-  section.append(facts)
+    row.append(left)
 
-  // The editor: point the runtime at another release channel (a staging
-  // manifest, a local rig) without an env var and a restart. hq-edge persists
-  // the override per host, so it survives restarts of both processes.
-  if (source !== null) {
-    section.append(sourceEditor('runtime', source, copy, actions))
-  }
-
-  // ── Runtime update action row ──
-  // Only offered when hq-edge reports a newer distribution AND named its
-  // version: the request needs `targetVersion`, so an entry without one has
-  // nothing to send.
-  if (runtime.updateAvailable && latestVersion !== null) {
-    const row = el('div', 'hqpu-actions hqpu-runtime-actions')
+    // Upgrade action: arm → confirm, accepted/busy states preserved.
     if (actions.accepted) {
-      // Terminal state: no button. hq-edge has already exited, so re-offering
-      // "update" here could only produce a transport error.
-      const line = el('span', 'hqpu-status hqpu-status--dot')
-      line.setAttribute('role', 'status')
-      line.append(el('span', 'hqpu-spinner'), el('span', '', copy.runtime.updateAccepted))
-      row.append(line)
+      row.append(el('span', 'hqpu-status', copy.runtime.updateAccepted))
     } else if (actions.busy) {
-      // Downloading + verifying + staging the bundle: tens of seconds to a few
-      // minutes. Say what is happening instead of an open-ended spinner.
-      const line = el('span', 'hqpu-status hqpu-status--dot')
-      line.setAttribute('role', 'status')
-      line.append(el('span', 'hqpu-spinner'), el('span', '', copy.runtime.updating))
-      row.append(line)
+      row.append(el('span', 'hqpu-status', copy.runtime.updating))
     } else if (actions.armed) {
-      row.append(el('p', 'hqpu-status hqpu-runtime-confirm', copy.runtime.updateConfirm(latestVersion)))
-      const yes = el('button', 'hqpu-btn hqpu-btn--primary hqpu-btn--sm', copy.confirmInstall)
+      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--outline hqpu-btn--sm', copy.cancel)
+      const no = el('button', 'hqpu-btn hqpu-btn--engine', copy.cancel)
       no.type = 'button'
       no.addEventListener('click', actions.onCancel)
-      row.append(yes, no)
+      confirmWrap.append(yes, no)
+      row.append(confirmWrap)
     } else {
-      const start = el('button', 'hqpu-btn hqpu-btn--primary hqpu-btn--sm')
+      const start = el('button', 'hqpu-btn hqpu-btn--engine', copy.ui.upgradeCore)
       start.type = 'button'
       start.dataset.runtimeUpdate = ''
-      start.innerHTML = `${DOWNLOAD_ICON(13)}<span>${copy.runtime.update}</span>`
       start.addEventListener('click', actions.onArm)
       row.append(start)
     }
-    section.append(row)
-  } else {
-    section.append(el('p', 'hqpu-status', copy.runtime.note))
+    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}`))
   }
-
-  if (typeof runtime.lastError === 'string' && runtime.lastError.length > 0) {
-    const line = el('p', 'hqpu-status hqpu-status--dot')
-    line.setAttribute('role', 'status')
-    const dot = el('span', 'hqpu-dot')
-    dot.dataset.state = 'error'
-    line.append(dot, el('span', '', `${copy.lastError}: ${runtime.lastError}`))
-    section.append(line)
-  }
-  return section
+  return card
 }
 
 function renderList(
   section: HTMLElement,
   report: PluginUpdateReport | null,
   copy: UpdateCopy,
-  installing: boolean,
-  store: UpdateStoreLike,
+  changelogOpen: Set<string>,
+  allOpen: boolean,
+  onToggleCard: (name: string) => void,
+  onToggleAll: () => void,
+  onRetryCheck: () => 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) {
-    section.append(el('div', 'hqpu-empty', copy.empty))
+    // 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
   }
 
@@ -665,7 +1153,7 @@ function renderList(
     [copy.group.current, byState('current')],
   ]
   for (const [heading, items] of order) {
-    const node = group(heading, items, copy, installing, store)
+    const node = group(heading, items, copy, changelogOpen, allOpen, onToggleCard, onToggleAll)
     if (node !== null) section.append(node)
   }
 }
@@ -675,13 +1163,20 @@ function renderRuntime(
   report: PluginUpdateReport | null,
   copy: UpdateCopy,
   actions: RuntimeActions,
+  dismissedAlert: boolean,
+  onDismissAlert: () => void,
 ): void {
   section.textContent = ''
   if (report === null) return
-  section.append(runtimeGroup(report, copy, actions))
+  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. No-op without the field. */
+/** 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,
@@ -691,10 +1186,10 @@ function renderPluginSource(
   section.textContent = ''
   if (report === null) return
   const node = pluginSourceGroup(report, copy, actions)
-  if (node !== null) section.append(node)
+  if (node !== null) section.append(advancedBlock(copy, [node]))
 }
 
-/** Run the install transaction, then keep polling until the state settles. */
+/** Run the install transaction (a new durable job), then let the store poll it. */
 async function runInstall(store: UpdateStoreLike, copy: UpdateCopy): Promise<void> {
   const report = store.report()
   if (report === null) return
@@ -704,17 +1199,23 @@ async function runInstall(store: UpdateStoreLike, copy: UpdateCopy): Promise<voi
     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)
     if (result.error !== undefined) {
+      store.setInstalling(false)
       showToast(`${copy.installError}: ${result.error}`, 'error')
       return
     }
-    // The set activates atomically and DSH restarts. Keep polling the backend
-    // state rather than trusting the response alone (spec §7.1).
+    // 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 pollUntilSettled(store)
+    void store.fetchStatus()
   } catch (err: unknown) {
+    store.setInstalling(false)
     showToast(
       `${copy.installError}: ${err instanceof Error ? err.message : String(err)}`,
       'error',
@@ -743,90 +1244,99 @@ function showToast(message: string, tone: 'success' | 'error'): void {
   }, TOAST_HOLD_MS)
 }
 
-function renderActions(
-  bar: HTMLElement,
+/**
+ * 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,
-  store: UpdateStoreLike,
-  installing: boolean,
+  open: boolean,
+  pluginActions: SourceEditorActions,
+  runtimeActions: SourceEditorActions,
 ): void {
-  bar.textContent = ''
-  if (report === null) return
+  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))
+  }
+}
 
-  if (installing) {
-    const line = el('span', 'hqpu-status hqpu-status--dot')
-    const spinner = el('span', 'hqpu-spinner')
-    line.append(spinner, el('span', '', copy.installing))
-    bar.append(line)
+/**
+ * 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 blocked / 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
-  // Every write needs an evaluated set; hq-edge reports `null` until it has
-  // read a manifest, and posting `null` would only earn a 400.
   const hasSet = report.manifestVersion !== null
-
-  if (actionable === 0) {
-    // The official page shows no install control when there is nothing to
-    // commit, so mirror that with a muted line rather than a dead button.
-    bar.append(el('span', 'hqpu-status', copy.nothingToInstall))
-  } else {
-    const installBtn = el('button', 'hqpu-btn hqpu-btn--primary')
-    installBtn.type = 'button'
-    installBtn.disabled = !hasSet || report.ignoredSet
-    installBtn.innerHTML = `${DOWNLOAD_ICON(13)}<span>${copy.installAll(actionable)}</span>`
-    installBtn.addEventListener('click', () => {
-      void runInstall(store, copy)
-    })
-    bar.append(installBtn)
+  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)
   }
 
-  if (!hasSet) return
-
-  if (report.ignoredSet) {
-    const unignore = el('button', 'hqpu-btn hqpu-btn--outline hqpu-btn--sm', copy.unignore)
-    unignore.type = 'button'
-    unignore.addEventListener('click', () => {
-      void unignoreOffer(report.manifestVersion as string)
-        .then(() => store.refresh())
-        .catch(() => undefined)
-    })
-    bar.append(unignore)
-  } else if (actionable > 0) {
-    const ignore = el('button', 'hqpu-btn hqpu-btn--ghost hqpu-btn--sm', copy.ignore)
-    ignore.type = 'button'
-    ignore.addEventListener('click', () => {
-      void ignoreOffer(report.manifestVersion as string)
-        .then(() => store.refresh())
-        .catch(() => undefined)
-    })
-    bar.append(ignore)
-  }
-}
-
-/** After an install, poll the backend until the update report settles
- *  (installing flag clears or DSH restarts under us — the next load re-reads
- *  the fresh state). */
-function pollUntilSettled(store: UpdateStoreLike): void {
-  let attempts = 0
-  const tick = (): void => {
-    void store
-      .refresh()
-      .then((report) => {
-        if (store.installing()) return
-        if (report !== null && report.ignoredSet === false && attempts >= 2) return
-      })
+  // 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)
-      .finally(() => {
-        attempts += 1
-        if (attempts < 10) {
-          window.setTimeout(tick, 2000)
-        }
-      })
   }
-  tick()
 }
 
 /**
@@ -853,48 +1363,71 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
   panel.setAttribute('aria-label', copy.viewTitle)
   panel.tabIndex = -1
 
-  // ── Head row: title + intro, refresh toolbar ──
+  // ── Sticky header: brand icon + title + relative checked time, refresh +
+  //    gear (advanced source settings) + close ──
   const head = el('div', 'hqpu-head')
   const headMain = el('div', 'hqpu-head-main')
-  headMain.append(el('h1', 'hqpu-title', copy.viewTitle))
-  const intro = el('p', 'hqpu-intro')
-  intro.append(el('span', '', copy.viewIntro))
-  const info = el('button', 'hqpu-info')
-  info.type = 'button'
-  info.setAttribute('aria-label', copy.viewInfo)
-  info.title = copy.viewInfo
-  info.innerHTML = INFO_ICON(11)
-  intro.append(info)
-  headMain.append(intro)
+  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>`
+  const titleBlock = el('div', 'hqpu-title-block')
+  titleBlock.append(el('h1', 'hqpu-title', copy.ui.title))
+  const sub = el('p', 'hqpu-sub')
+  titleBlock.append(sub)
+  headMain.append(brandIcon, titleBlock)
 
   const toolbar = el('div', 'hqpu-toolbar')
   const refreshBtn = iconButton('hqpu-icon-btn', REFRESH_ICON(16), copy.refresh, () => {
-    void store.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>`,
+    copy.ui.gearTooltip,
+    () => {
+      settingsOpen = !settingsOpen
+      render()
+    },
+  )
+  toolbar.append(gearBtn)
   const closeBtn = iconButton('hqpu-icon-btn', CLOSE_ICON(16), copy.close, () => {
     onClose()
   })
   toolbar.append(closeBtn)
-
   head.append(headMain, toolbar)
   panel.append(head)
 
-  // ── Scrolling body: the centred column ──
+  // ── Collapsible advanced settings panel (gear-toggled) ──
+  const settingsPanel = el('div', 'hqpu-settings')
+  panel.append(settingsPanel)
+
+  // ── Scrolling body: the narrow column ──
   const scroll = el('div', 'hqpu-scroll')
   const column = el('div', 'hqpu-column')
-  const pluginSourceSection = el('div', 'hqpu-stack')
+  // 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 listSection = el('div', 'hqpu-stack')
   const runtimeSection = el('div', 'hqpu-stack')
   const toastSection = el('div', 'hqpu-toast-host')
-  column.append(pluginSourceSection, listSection, runtimeSection, toastSection)
+  column.append(jobSection, listSection, runtimeSection, toastSection)
   scroll.append(column)
   panel.append(scroll)
 
-  // ── Footer actions (ui-primitives Modal .footer) ──
+  // ── Sticky footer ──
   const footer = el('div', 'hqpu-footer')
-  const actionBar = el('div', 'hqpu-actions')
-  footer.append(actionBar)
+  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)
+  ignoreBtn.type = 'button'
+  footActions.append(installAllBtn, ignoreBtn)
+  const footnote = el('p', 'hqpu-footnote', copy.ui.footnote)
+  footer.append(footMeta, footActions, footnote)
   panel.append(footer)
 
   overlay.append(scrim, panel)
@@ -911,6 +1444,12 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
   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 dismissedAlert = false
+
   // 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: '' }
@@ -1061,6 +1600,9 @@ export function openUpdateView(store: UpdateStoreLike, copy: UpdateCopy): void {
       // 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(
         `${copy.installError}: ${err instanceof Error ? err.message : String(err)}`,
@@ -1072,20 +1614,84 @@ 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 => {
+    if (kind === 'runtime') {
+      runtimeArmed = true
+      render()
+    } else {
+      void runInstall(store, copy)
+    }
+  }
+
+  const 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))
+      return
+    }
+    const recent = store.recentJobs()
+    const latest = recent[0]
+    if (latest !== undefined && TERMINAL_PHASES.has(latest.phase)) {
+      jobSection.append(resultView(latest, copy, () => retryJob(latest.kind)))
+      const older = recentJobsList(recent, copy)
+      if (older !== null) jobSection.append(older)
+    }
+  }
+
   const render = (): void => {
     const report = store.report()
-    const installing = store.installing()
+    // 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
+
+    // Collapsible advanced settings panel (gear-toggled): existing source
+    // editors — plugin + runtime manifest URL override, save→check→refresh.
+    renderSettingsPanel(settingsPanel, report, copy, settingsOpen, pluginActions, runtimeSourceActions)
+
+    renderJobSection()
     if (stale) {
       listSection.textContent = ''
       listSection.append(skeleton(copy))
     } else {
-      renderList(listSection, report, copy, installing, store)
+      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()
+        },
+      )
     }
-    renderPluginSource(pluginSourceSection, report, copy, pluginActions)
-    renderRuntime(runtimeSection, report, copy, runtimeActions)
-    renderActions(actionBar, report, copy, store, installing)
+    renderRuntime(runtimeSection, report, copy, runtimeActions, dismissedAlert, () => {
+      dismissedAlert = true
+      render()
+    })
+    renderFooter(footer, installAllBtn, ignoreBtn, footCount, footSet, report, copy, installing, store)
   }
 
   const unsubscribe = store.subscribe(render)