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

package/src/client/index.ts

@@ -2,10 +2,17 @@
  * `@huaqiu/dsh-tool-plugin-update` — browser half.
  *
  * Mounts one sidebar toolbutton in the Huaqiu family block ("插件更新") with a
- * numeric badge equal to the actionable plugin-update count (spec §6.3/§7.1:
- * only compatible `update` + `install` items after host/HQ-Edge filtering and
- * after excluding the ignored offer; runtime updates are NOT counted). Click
- * opens the review/confirm/ignore modal.
+ * numeric badge equal to the number of updates still on offer:
+ *
+ *   - the actionable plugin items (spec §6.3/§7.1 — compatible `update` +
+ *     `install` after host/HQ-Edge filtering, minus the ignored offer and any
+ *     muted item), PLUS
+ *   - one for the HQ Edge runtime update when hq-edge reports one (a separate
+ *     deliverable with its own card, still a pending update — see `badge.ts`).
+ *
+ * The durable job history never contributes (a settled job is not an update);
+ * a job that is still running is the only non-offer allowed to show a count.
+ * Click opens the review/confirm/ignore modal.
  *
  * The authoritative state is the hq-edge report fetched through the plugin's
  * same-origin forwarding routes. A tiny in-memory store owns the latest report
@@ -33,6 +40,7 @@ import {
 import { COPY } from './copy.js'
 import { PLUGIN_ICON } from './icons.js'
 import { openUpdateView, type UpdateStoreLike } from './update-view.js'
+import { badgeCountFor } from './badge.js'
 
 /** Stable data attributes identifying the injected entry row. */
 export const UPDATE_ENTRY_SELECTOR = '[data-hq-plugin-update-entry]'
@@ -185,7 +193,10 @@ const ENTRY_CSS_TEXT = `
  * publish is backfilled by {@link ensureDesignTokens} — see the note there.
  */
 const VIEW_CSS_TEXT = `
-/* ── Overlay + panel (ui-primitives Modal.module.css) ─────────────────── */
+/* ── Overlay + panel ─────────────────────────────────────────────────────
+ * A 360 px card, the width the prototype fixes: the panel is a decision
+ * surface inside the EDA workbench, not a page, and 360 is the width at which
+ * a card's title, version row and two actions still fit on one line each. */
 .hqpu-overlay {
   position: fixed;
   inset: 0;
@@ -200,108 +211,280 @@ const VIEW_CSS_TEXT = `
   position: absolute;
   /* Only paint excludes the native caption; the root still blocks clicks. */
   inset: var(--dsh-frame-chrome-top, 0px) 0 0;
-  background: var(--dsw-alias-bg-mask-1);
+  background: var(--dsw-alias-bg-mask-3, var(--dsw-alias-bg-mask-1));
   animation: hqpu-fade var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease);
 }
 .hqpu-panel {
   position: relative;
   z-index: 1;
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  width: min(920px, 100%);
-  max-height: 100%;
+  width: min(360px, calc(100vw - 24px));
+  max-height: min(86vh, 720px);
   overflow: hidden;
-  border: 0;
-  border-radius: var(--dsw-radius-panel);
-  background: var(--dsw-alias-bg-layer-2);
-  box-shadow: var(--dsw-elevation-prominent);
-  color: var(--dsw-alias-label-primary);
+  border: 0.5px solid var(--hq-border);
+  border-radius: 12px;
+  background: var(--hq-bg);
+  color: var(--hq-text);
+  box-shadow: var(--dsw-elevation-prominent, 0 16px 48px rgba(0, 0, 0, 0.24));
   animation: hqpu-panel-in var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease);
 }
 .hqpu-panel:focus {
   outline: none;
 }
+.hqpu-panel *,
+.hqpu-panel *::before,
+.hqpu-panel *::after {
+  box-sizing: border-box;
+}
+/* 'hidden' is the one display switch this sheet uses for drawers, so it has to
+ * beat the layout rules below it. */
+.hqpu-panel [hidden] {
+  display: none !important;
+}
+
+/* The palette, expressed once. Every rule below reads these aliases, so a
+ * theme switch (or the HuaQiu brand override) needs no rule to change. */
+.hqpu-panel,
+.hqpu-panel * {
+  --hq-bg: var(--dsw-alias-bg-layer-1);
+  --hq-card: var(--dsw-alias-bg-layer-2);
+  --hq-card-soft: var(--dsw-alias-bg-overlay);
+  --hq-border: var(--dsw-alias-border-l2);
+  --hq-border-strong: var(--dsw-alias-border-l3);
+  --hq-hover: var(--dsw-alias-interactive-bg-hover);
+  --hq-text: var(--dsw-alias-label-primary);
+  --hq-muted: var(--dsw-alias-label-secondary);
+  --hq-faint: var(--dsw-alias-label-tertiary);
+  --hq-brand: var(--dsw-alias-brand-primary);
+  --hq-brand-soft: var(--dsw-alias-button-primary-hover);
+  --hq-brand-dim: var(--dsw-alias-button-primary-dimmed);
+  --hq-emerald: var(--dsw-alias-state-success-primary);
+  --hq-amber: var(--dsw-alias-state-warn-primary);
+  --hq-amber-ink: var(--dsw-alias-state-warn-label, var(--dsw-alias-state-warn-primary));
+  /* Ink on an amber fill. Fixed rather than themed: warn-primary is a bright
+   * amber in both themes, so the readable ink is the same warm near-black. */
+  --hq-on-amber: #2b1a00;
+  --hq-rose: var(--dsw-alias-state-error-primary);
+  /* Ink on a saturated fill. 'toast-label' is white in both themes and is
+   * backfilled by ensureDesignTokens when the shell omits it. */
+  --hq-on-accent: var(--dsw-alias-brand-primary-invert, var(--dsw-alias-toast-label, #fff));
+  --hq-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  /* One type scale: 9.5 / 10.5 / 11.5 / 12 / 13. Nothing inline, nothing
+   * inherited from the shell's 20 px body default. */
+  --hq-fs-micro: 9.5px;
+  --hq-fs-meta: 10.5px;
+  --hq-fs-body: 11.5px;
+  --hq-fs-title: 13px;
+}
+
 @keyframes hqpu-fade {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 @keyframes hqpu-panel-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
 }
 
-/* ── Head row (ui-primitives Modal .header) ─────────────────────────────── */
+/* ── Header ──────────────────────────────────────────────────────────────
+ * Title + the set version / check time, then four icon actions in the order
+ * the prototype fixes: refresh · sources · job log · close. */
 .hqpu-head {
-  display: flex;
   flex: none;
-  flex-wrap: wrap;
-  align-items: flex-start;
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  box-sizing: border-box;
-  /* The official Title row: 22/14/12/24 — the toolbar sits 10px further right
-   * than the body content on purpose, matching the shell's own close button. */
-  padding: 22px 14px 12px 24px;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 0.5px solid var(--hq-border);
+  background: var(--hq-bg);
 }
 .hqpu-head-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.hqpu-brand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--hq-brand) 12%, transparent);
+  color: var(--hq-brand-soft);
+}
+.hqpu-brand-icon svg {
+  display: block;
+}
+.hqpu-title-block {
   min-width: 0;
-  max-width: 100%;
 }
 .hqpu-title {
   margin: 0;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 28px;
-  color: var(--dsw-alias-label-primary);
+  font-size: var(--hq-fs-title);
+  font-weight: 600;
+  line-height: 17px;
+  color: var(--hq-text);
+}
+.hqpu-sub {
+  margin: 1px 0 0;
+  font-size: var(--hq-fs-meta);
+  line-height: 14px;
+  color: var(--hq-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.hqpu-intro {
+.hqpu-toolbar {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin: 4px 0 0;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--dsw-alias-label-secondary);
+  flex: none;
+  gap: 1px;
 }
-.hqpu-info {
+.hqpu-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
-  width: 20px;
-  height: 20px;
+  width: 28px;
+  height: 28px;
   padding: 0;
   border: 0;
-  border-radius: var(--dsw-radius-sm);
+  border-radius: 8px;
   background: transparent;
-  color: var(--dsw-alias-label-caption);
+  color: var(--hq-muted);
   cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
 }
-.hqpu-info:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-secondary);
+.hqpu-icon-btn svg {
+  display: block;
 }
-.hqpu-info:focus-visible {
-  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
-  outline-offset: 1px;
+.hqpu-icon-btn:hover:not(:disabled) {
+  background: var(--hq-hover);
+  color: var(--hq-text);
 }
-.hqpu-toolbar {
+.hqpu-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+/* A toggled toolbar button (sources, job log) reads as "on", not just hovered —
+ * the pressed state is the only hint that a drawer is open behind the body. */
+.hqpu-icon-btn[aria-pressed='true'] {
+  background: var(--hq-hover);
+  color: var(--hq-text);
+}
+.hqpu-icon-btn--close {
+  margin-left: 4px;
+  color: var(--hq-faint);
+}
+.hqpu-icon-btn--sm {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+}
+
+/* ── Settings strip (gear) ───────────────────────────────────────────────
+ * Above the body, never inside it: opening the source editor must not reflow
+ * the list the person was reading. */
+.hqpu-settings {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 0.5px solid var(--hq-border);
+  background: var(--hq-card-soft);
+}
+.hqpu-settings-row {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.hqpu-settings-title {
+  font-size: var(--hq-fs-meta);
+  font-weight: 600;
+  color: var(--hq-muted);
+}
+.hqpu-origin-badge {
   flex: none;
+  padding: 1px 6px;
+  border: 0.5px solid;
+  border-radius: 4px;
+  font-size: var(--hq-fs-micro);
+}
+.hqpu-origin-badge[data-origin='config'] {
+  color: var(--hq-emerald);
+  border-color: color-mix(in srgb, var(--hq-emerald) 40%, transparent);
+  background: color-mix(in srgb, var(--hq-emerald) 10%, transparent);
+}
+.hqpu-origin-badge[data-origin='override'] {
+  color: var(--hq-amber-ink);
+  border-color: color-mix(in srgb, var(--hq-amber) 40%, transparent);
+  background: color-mix(in srgb, var(--hq-amber) 10%, transparent);
+}
+.hqpu-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.hqpu-field-head {
+  display: flex;
   align-items: center;
-  gap: 16px;
+  justify-content: space-between;
+  gap: 8px;
+}
+.hqpu-field label {
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-muted);
+}
+.hqpu-source-input {
+  width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  border: 0.5px solid var(--hq-border-strong);
+  border-radius: 6px;
+  background: var(--hq-bg);
+  color: var(--hq-muted);
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
+}
+.hqpu-source-input:disabled {
+  opacity: 0.6;
+}
+.hqpu-settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding-top: 2px;
 }
 
-/* ── Scrolling body: the page's centred column ────────────────────────── */
+/* ── Body: scroll + sticky footer + the log drawer over both ─────────────
+ * '.hqpu-main' is the positioning box; the drawer covers the body AND the
+ * footer, so an open log cannot be clicked through. */
+.hqpu-main {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+/* While the job-log drawer is open it covers this whole box; on a short body
+ * the box would collapse to nothing, so give it a floor. Set/cleared from
+ * update-view.ts (the drawer is absolutely positioned and cannot size it). */
+.hqpu-main[data-log-open='1'] {
+  min-height: 340px;
+}
 .hqpu-scroll {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  box-sizing: border-box;
-  /* The panel's 20px gap already separates this from the head and footer. */
-  padding: 0 clamp(16px, 3vw, 32px) 4px;
+  padding: 12px;
+  background: var(--hq-bg);
   /* Anything that scrolls inside the panel draws the l2 thumb. */
   --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
   --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
@@ -309,806 +492,653 @@ const VIEW_CSS_TEXT = `
 .hqpu-column {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  width: 100%;
-  max-width: 880px;
-  margin: 0 auto;
+  gap: 10px;
 }
 /* A stack of groups (or the single toast host) inside the column. */
 .hqpu-stack {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 10px;
 }
-.hqpu-toast-host:empty {
+.hqpu-stack:empty {
   display: none;
 }
 
-/* ── Groups (PluginManagerPage .group) ────────────────────────────────── */
-.hqpu-group {
+/* ── Decision band ───────────────────────────────────────────────────────
+ * The one row that answers "is there anything for me to do", before any list. */
+.hqpu-decision {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--hq-card-soft);
+  font-size: var(--hq-fs-meta);
+}
+.hqpu-decision-main {
+  font-weight: 600;
+  color: var(--hq-text);
+}
+.hqpu-decision-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--hq-faint);
+}
+.hqpu-decision-sub {
+  color: var(--hq-muted);
 }
-.hqpu-group-head {
+
+/* ── Section head ────────────────────────────────────────────────────────── */
+.hqpu-sec-head {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
+  padding: 0 2px 2px;
 }
-.hqpu-group-title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 22px;
-  color: var(--dsw-alias-label-primary);
+.hqpu-sec-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--hq-fs-body);
+  font-weight: 600;
+  color: var(--hq-text);
 }
-.hqpu-group-count {
-  flex: none;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-tertiary);
-  font-variant-numeric: tabular-nums;
+.hqpu-count-pill {
+  padding: 0 5px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--hq-brand) 14%, transparent);
+  color: var(--hq-brand-soft);
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
+  font-weight: 700;
+}
+
+/* ── Text links ──────────────────────────────────────────────────────────── */
+.hqpu-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--hq-muted);
+  font: inherit;
+  font-size: var(--hq-fs-meta);
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+.hqpu-link:hover {
+  color: var(--hq-text);
+}
+.hqpu-link--tiny {
+  font-size: var(--hq-fs-micro);
+}
+.hqpu-link--icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.hqpu-link--icon svg {
+  display: block;
 }
 
-/* ── Cards (PluginManagerPage .card) ──────────────────────────────────── */
+/* ── Plugin cards ────────────────────────────────────────────────────────── */
 .hqpu-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   margin: 0;
   padding: 0;
   list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
 }
 .hqpu-card {
-  min-width: 0;
-  /* The hover surface reaches 8px past the content on both sides. */
-  margin: 0 -8px;
-  border-radius: var(--dsw-radius-xl);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 0.5px solid var(--hq-border);
+  border-radius: 8px;
+  background: var(--hq-card);
+  transition: border-color 0.15s ease, background 0.15s ease;
 }
 .hqpu-card:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
+  border-color: var(--hq-border-strong);
 }
 .hqpu-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.hqpu-card-id {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 8px;
+  gap: 8px;
+  min-width: 0;
 }
-.hqpu-card-icon {
+.hqpu-avatar {
   display: inline-flex;
-  flex: none;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
-  border: 0.5px solid var(--dsw-alias-border-l3);
-  border-radius: var(--dsw-radius-lg);
-  color: var(--dsw-alias-label-secondary);
-}
-.hqpu-card-icon svg {
-  display: block;
-  width: 24px;
-  height: 24px;
+  flex: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: var(--hq-card-soft);
+  color: var(--hq-muted);
+  font-size: var(--hq-fs-micro);
+  font-weight: 700;
 }
 .hqpu-card-main {
-  flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-}
-.hqpu-title-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
   min-width: 0;
+  gap: 1px;
 }
 .hqpu-card-title {
-  min-width: 0;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--dsw-alias-label-primary);
+  font-size: var(--hq-fs-body);
+  font-weight: 600;
+  line-height: 15px;
+  color: var(--hq-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.hqpu-card-desc {
-  font-size: 13px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-tertiary);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+.hqpu-card-sub {
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
+  line-height: 12px;
+  color: var(--hq-faint);
   overflow: hidden;
-  overflow-wrap: anywhere;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .hqpu-card-end {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 8px;
-}
-.hqpu-card-reason {
-  margin: 0;
-  padding: 0 8px 8px 70px;
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--dsw-alias-state-error-primary);
-  overflow-wrap: anywhere;
-}
-
-/* ── Tags (ui-primitives Tag.module.css) ──────────────────────────────── */
-.hqpu-tag {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   flex: none;
-  border-radius: 999px;
-  corner-shape: round;
-  padding: 1px 8px;
-  font-size: 11px;
+  gap: 2px;
+}
+/* The card's own action: tinted, not filled — the filled brand fill belongs to
+ * the one set-level CTA in the footer. */
+.hqpu-card-action {
+  height: 24px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--hq-brand) 12%, transparent);
+  color: var(--hq-brand-soft);
+  font: inherit;
+  font-size: var(--hq-fs-meta);
   font-weight: 500;
-  line-height: 17px;
   white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
 }
-.hqpu-tag[data-tone='success'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);
-  color: var(--dsw-alias-state-success-primary);
-}
-.hqpu-tag[data-tone='info'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent);
-  color: var(--dsw-alias-state-business-primary);
-}
-.hqpu-tag[data-tone='warning'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);
-  color: var(--dsw-alias-state-warn-primary);
-}
-.hqpu-tag[data-tone='danger'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);
-  color: var(--dsw-alias-state-error-primary);
-}
-.hqpu-tag[data-tone='neutral'] {
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-secondary);
+.hqpu-card-action:hover:not(:disabled) {
+  background: var(--hq-brand);
+  color: var(--hq-on-accent);
 }
-
-/* ── Fact rows (PluginManagerPage .facts / .rows) ─────────────────────── */
-.hqpu-facts {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
+.hqpu-card-action:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
-.hqpu-facts > div {
+.hqpu-card-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  min-height: 44px;
-  padding: 8px 2px;
-  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
-}
-.hqpu-facts > div:last-child {
-  border-bottom: 0;
-}
-.hqpu-facts dt {
-  flex: none;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--dsw-alias-label-secondary);
+  gap: 8px;
 }
-.hqpu-facts dd {
+.hqpu-version-row {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
   min-width: 0;
-  margin: 0;
-  font-size: 13px;
-  line-height: 20px;
-  text-align: end;
-  overflow-wrap: anywhere;
-  color: var(--dsw-alias-label-primary);
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-meta);
+  color: var(--hq-muted);
 }
-.hqpu-facts code {
-  padding: 2px 6px;
-  border-radius: var(--dsw-radius-xs);
-  background: var(--dsw-alias-bg-module-platform);
-  font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 12px;
+.hqpu-ver-old {
+  color: var(--hq-muted);
 }
-
-/* ── Banner (PluginManagerPage .installSafety) ────────────────────────── */
-.hqpu-banner {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 12px;
-  border-radius: var(--dsw-radius-md);
-  background: var(--dsw-alias-state-warn-tertiary);
-  font-size: 12.5px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-secondary);
+.hqpu-ver-arrow {
+  color: var(--hq-border-strong);
 }
-.hqpu-banner > svg {
-  flex: none;
-  margin-top: 2px;
-  color: var(--dsw-alias-state-warn-primary);
+.hqpu-ver-new {
+  color: var(--hq-emerald);
+  font-weight: 600;
 }
-
-/* ── Status, empty, failure (PluginManagerPage .status / .empty / .failure) */
-.hqpu-status {
-  margin: 0;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--dsw-alias-label-tertiary);
+.hqpu-ver-new--lg {
+  font-size: var(--hq-fs-body);
 }
-.hqpu-status--dot {
+.hqpu-ver-size {
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-faint);
+}
+.hqpu-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 2px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--hq-faint);
+  font: inherit;
+  font-size: var(--hq-fs-micro);
+  white-space: nowrap;
+  cursor: pointer;
 }
-.hqpu-failure {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--dsw-alias-state-error-primary);
+.hqpu-toggle:hover {
+  color: var(--hq-text);
 }
-.hqpu-empty {
-  padding: 32px 0;
-  text-align: center;
-  font-size: 13px;
-  line-height: 20px;
-  color: var(--dsw-alias-label-tertiary);
+.hqpu-toggle-chevron {
+  display: inline-flex;
+  transition: transform 0.15s ease;
 }
-
-/* ── State dot + spinner (ui-primitives StateDot.module.css) ──────────── */
-.hqpu-dot {
-  position: relative;
-  display: inline-block;
-  flex: none;
-  width: 10px;
-  height: 10px;
+.hqpu-toggle[data-open='true'] .hqpu-toggle-chevron {
+  transform: rotate(90deg);
 }
-.hqpu-dot::after {
-  content: '';
-  position: absolute;
-  inset: 20%;
-  border-radius: 50%;
-  corner-shape: round;
-  background: currentColor;
-}
-.hqpu-dot[data-state='done'] { color: var(--dsw-alias-state-success-primary); }
-.hqpu-dot[data-state='warning'] { color: var(--dsw-alias-state-warn-primary); }
-.hqpu-dot[data-state='error'] { color: var(--dsw-alias-state-error-primary); }
-.hqpu-dot[data-state='idle'] { color: var(--dsw-alias-state-idle-primary); }
-.hqpu-spinner {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
-  border-top-color: currentColor;
-  animation: hqpu-spin 1.5s linear infinite;
+.hqpu-changes {
+  padding-top: 8px;
+  border-top: 0.5px solid var(--hq-border);
+  font-size: var(--hq-fs-meta);
+  color: var(--hq-muted);
 }
-@keyframes hqpu-spin {
-  to { transform: rotate(360deg); }
+.hqpu-changes-title {
+  margin: 0 0 4px;
+  font-size: var(--hq-fs-micro);
+  font-weight: 600;
+  color: var(--hq-muted);
+}
+.hqpu-changes ul {
+  margin: 0;
+  padding-left: 16px;
+  font-size: var(--hq-fs-micro);
+  line-height: 16px;
 }
 
-/* ── Skeleton (PluginManagerPage .skeleton*) ──────────────────────────── */
-.hqpu-skeleton-fill {
-  background: var(--dsw-alias-bg-skeleton);
-  animation: hqpu-skeleton 2s cubic-bezier(0.36, 0, 0.64, 1) infinite;
+/* ── Collapsed groups (已忽略 / 已是最新 / 版本说明) ─────────────────────── */
+.hqpu-disc {
+  padding-top: 6px;
+  border-top: 0.5px solid var(--hq-border);
 }
-.hqpu-skeleton-text {
+.hqpu-disc-head {
   display: flex;
   align-items: center;
-  height: 1lh;
-}
-.hqpu-skeleton-bar {
+  justify-content: space-between;
+  gap: 8px;
   width: 100%;
-  height: 12px;
-  border-radius: var(--dsw-radius-xs);
-}
-.hqpu-skeleton-heading { width: 96px; }
-.hqpu-skeleton-title { width: min(144px, 60%); }
-.hqpu-skeleton-desc { width: min(280px, 85%); }
-.hqpu-skeleton-icon { border-color: transparent; }
-@keyframes hqpu-skeleton {
-  0% { opacity: 1; }
-  40% { opacity: 0.6; }
-  80%, 100% { opacity: 1; }
+  padding: 2px 0;
+  border: 0;
+  background: none;
+  color: var(--hq-muted);
+  font: inherit;
+  cursor: pointer;
 }
-
-/* ── Toast (ui-primitives Toast.module.css, held inside the panel) ────── */
-.hqpu-toast {
+.hqpu-disc-left {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  border-radius: var(--dsw-radius-lg);
-  background: var(--dsw-alias-toast-bg);
-  color: var(--dsw-alias-toast-label);
-  font-size: 14px;
-  line-height: 22px;
-  box-shadow: var(--dsw-shadow-lv3);
-  animation: hqpu-toast-in 160ms ease-out;
-}
-.hqpu-toast-icon {
-  display: grid;
-  place-items: center;
-  flex: none;
-  color: var(--dsw-alias-state-warn-label);
-}
-.hqpu-toast-icon[data-tone='success'] { color: var(--dsw-alias-state-success-primary); }
-.hqpu-toast-text { min-width: 0; }
-@keyframes hqpu-toast-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to { opacity: 1; transform: none; }
+  gap: 6px;
+  min-width: 0;
 }
-
-/* ── Buttons (PluginManagerPage .addButton / .iconButton) ─────────────── */
-.hqpu-icon-btn {
+.hqpu-disc-chevron {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex: none;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--dsw-radius-sm);
-  background: transparent;
-  color: var(--dsw-alias-label-caption);
-  cursor: pointer;
-}
-.hqpu-icon-btn svg { display: block; }
-.hqpu-icon-btn:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-secondary);
-}
-.hqpu-icon-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.hqpu-icon-btn:focus-visible {
-  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
-  outline-offset: 1px;
+  color: var(--hq-faint);
+  transition: transform 0.15s ease;
 }
-.hqpu-btn {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: var(--dsw-radius-md);
-  background: var(--dsw-alias-bg-layer-3);
-  color: var(--dsw-alias-label-primary);
-  font: inherit;
-  font-size: 13px;
-  line-height: 20px;
-  cursor: pointer;
+.hqpu-disc-head[aria-expanded='true'] .hqpu-disc-chevron {
+  transform: rotate(90deg);
 }
-.hqpu-btn svg { display: block; }
-.hqpu-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-solid); }
-.hqpu-btn:disabled { opacity: 0.5; cursor: default; }
-.hqpu-btn:focus-visible {
-  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
-  outline-offset: 1px;
+.hqpu-disc-title {
+  font-size: var(--hq-fs-body);
+  font-weight: 600;
+  color: var(--hq-text);
 }
-.hqpu-btn--primary {
-  background: var(--dsw-alias-button-primary-fill);
-  color: var(--dsw-alias-label-primary-foreground);
+.hqpu-disc-count {
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-meta);
+  color: var(--hq-faint);
 }
-.hqpu-btn--primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }
-.hqpu-btn--outline {
-  background: transparent;
-  border: 0.5px solid var(--dsw-alias-border-l4);
-  color: var(--dsw-alias-label-secondary);
+.hqpu-disc-note {
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.hqpu-btn--outline:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
-.hqpu-btn--ghost { background: transparent; color: var(--dsw-alias-label-secondary); }
-.hqpu-btn--ghost:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
-.hqpu-btn--danger { color: var(--dsw-alias-state-error-primary); }
-.hqpu-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
-.hqpu-actions {
+.hqpu-disc-body {
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-/* ── Runtime update action row (arm → confirm step) ───────────────────── */
-.hqpu-runtime-actions {
-  margin-top: 12px;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 6px;
 }
-.hqpu-runtime-confirm {
-  flex: 1 1 100%;
+.hqpu-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   margin: 0;
+  padding: 0;
+  list-style: none;
 }
-
-/* ── Runtime update source (fact row + editable URL field) ────────────── */
-.hqpu-source-line {
-  display: inline-flex;
+.hqpu-row {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
-  min-width: 0;
-  max-width: 100%;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: var(--hq-card-soft);
+  font-size: var(--hq-fs-meta);
 }
-.hqpu-source-url {
-  min-width: 0;
+.hqpu-row-name {
+  font-weight: 500;
+  color: var(--hq-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.hqpu-source-editor {
+.hqpu-row-end {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex: none;
   gap: 8px;
-  margin-top: 12px;
 }
-/* The plugin-source editor sits inside its own group right under the fact
- * row, so it needs less air than the runtime one under the facts block. */
-.hqpu-source-editor--plugin {
-  margin-top: 4px;
-}
-.hqpu-source-hint {
-  flex: 1 1 100%;
-  margin: 0;
-}
-.hqpu-source-controls {
-  flex: 1 1 100%;
-}
-.hqpu-source-input {
-  flex: 1 1 240px;
-  min-width: 0;
-  height: 28px;
-  box-sizing: border-box;
-  padding: 0 10px;
-  border: 0.5px solid var(--dsw-alias-border-l4);
-  border-radius: var(--dsw-radius-md);
-  background: var(--dsw-alias-bg-layer-3);
-  color: var(--dsw-alias-label-primary);
-  font: inherit;
-  font-size: 12.5px;
-}
-.hqpu-source-input:disabled {
-  opacity: 0.5;
-}
-.hqpu-source-input:focus-visible {
-  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
-  outline-offset: 1px;
+.hqpu-row-meta {
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-faint);
 }
 
-/* ── Footer action row (ui-primitives Modal .footer) ───────────────────── */
-.hqpu-footer {
+/* ── Runtime card (amber: a swap is not a plugin install) ───────────────── */
+.hqpu-engine {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border: 0.5px solid color-mix(in srgb, var(--hq-amber) 32%, transparent);
+  border-radius: 10px;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--hq-amber) 10%, var(--hq-card)) 0%,
+    var(--hq-card) 60%,
+    var(--hq-card-soft) 100%
+  );
+}
+.hqpu-engine-head {
   display: flex;
-  flex: none;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   gap: 8px;
-  padding: 0 24px 20px;
 }
-
-/* ── Durable job (active / result) ────────────────────────────────────── */
-.hqpu-job {
+.hqpu-engine-title {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 6px;
-  padding: 12px;
-  border: 0.5px solid var(--dsw-alias-border-l2);
-  border-radius: var(--dsw-radius-lg);
-  background: var(--dsw-alias-bg-layer-3);
-}
-.hqpu-job-meta {
-  font-variant-numeric: tabular-nums;
+  font-size: var(--hq-fs-body);
+  font-weight: 600;
+  color: var(--hq-text);
 }
-.hqpu-progress {
-  height: 6px;
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-module-platform);
-  overflow: hidden;
+.hqpu-engine-bolt {
+  display: inline-flex;
+  color: var(--hq-amber);
 }
-.hqpu-progress-fill {
-  height: 100%;
-  border-radius: 999px;
-  background: var(--dsw-alias-state-business-primary);
-  transition: width var(--ds-transition-duration, 0.2s) ease;
+.hqpu-chip {
+  flex: none;
+  padding: 1px 6px;
+  border: 0.5px solid var(--hq-border-strong);
+  border-radius: 4px;
+  background: var(--hq-card);
+  color: var(--hq-muted);
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
 }
-.hqpu-job-steps {
+.hqpu-engine-row {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
 }
-.hqpu-steps {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.hqpu-engine-info {
+  min-width: 0;
 }
-.hqpu-step {
+.hqpu-engine-new {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 12.5px;
-  line-height: 18px;
-  color: var(--dsw-alias-label-secondary);
-}
-.hqpu-step--skipped,
-.hqpu-step--pending { opacity: 0.6; }
-
-/* ── Per-plugin change list + release notes ────────────────────────────── */
-.hqpu-changes {
-  padding: 0 8px 8px 70px;
 }
-.hqpu-changes-list,
-.hqpu-release-notes {
-  margin: 4px 0 0;
-  padding-left: 18px;
-  font-size: 12.5px;
-  line-height: 19px;
-  color: var(--dsw-alias-label-secondary);
-}
-.hqpu-release-link {
-  align-self: flex-start;
-}
-
-/* ── Advanced disclosure (source editors) ───────────────────────────────── */
-.hqpu-advanced > summary {
-  cursor: pointer;
-  font-size: 12.5px;
-  line-height: 20px;
-  color: var(--dsw-alias-label-tertiary);
-  list-style: none;
-  padding: 2px 0;
-}
-.hqpu-advanced > summary::-webkit-details-marker { display: none; }
-.hqpu-advanced > summary::before {
-  content: '▸ ';
+.hqpu-engine-size {
+  margin: 2px 0 0;
+  font-size: var(--hq-fs-micro);
+  line-height: 14px;
+  color: var(--hq-muted);
 }
-.hqpu-advanced[open] > summary::before {
-  content: '▾ ';
+.hqpu-engine-state {
+  flex: none;
+  max-width: 45%;
+  font-size: var(--hq-fs-micro);
+  line-height: 14px;
+  color: var(--hq-muted);
+  text-align: right;
 }
-
-/* Danger-toned banner (check failure, breaking changes) */
-.hqpu-banner[data-tone='danger'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);
-  color: var(--dsw-alias-label-secondary);
+.hqpu-engine-error {
+  margin: 0;
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-rose);
 }
-.hqpu-banner[data-tone='danger'] > svg {
-  color: var(--dsw-alias-state-error-primary);
+.hqpu-tag--brand {
+  flex: none;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--hq-amber) 14%, transparent);
+  color: var(--hq-amber-ink);
+  font-size: var(--hq-fs-micro);
+  font-weight: 500;
 }
-
-.hqpu-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+.hqpu-btn--engine {
+  flex: none;
+  height: 26px;
+  padding: 0 10px;
   border: 0;
+  border-radius: 6px;
+  background: var(--hq-amber);
+  color: var(--hq-on-amber);
+  font: inherit;
+  font-size: var(--hq-fs-meta);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s ease;
 }
-
-/* ── Reduced motion: drop every decorative animation ──────────────────── */
-@media (prefers-reduced-motion: reduce) {
-  .hqpu-scrim,
-  .hqpu-panel,
-  .hqpu-skeleton-fill,
-  .hqpu-spinner,
-  .hqpu-toast,
-  .hqpu-pulse-ring,
-  .hqpu-job-step--active {
-    animation: none;
-  }
+.hqpu-btn--engine:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--hq-amber) 85%, #000);
 }
-
-/* ════════════════════════════════════════════════════════════════════════
- * Refactored dock (interactive_refactored_ui_mockup.html) — a fluid
- * update-center column. These rules cascade over the shell-token base: the
- * panel takes the available width (up to 720px), every colour is a
- * --dsw-alias-* token so light/dark follow the shell's
- * body[data-ds-dark-theme] and the brand follows the HuaQiu theme overrides,
- * with a sticky header / scroll body / sticky footer. No Tailwind, no
- * dependencies.
- * ════════════════════════════════════════════════════════════════════════ */
-.hqpu-panel,
-.hqpu-panel * {
-  /* Every colour rides a shell theme token, so light/dark follow
-   * body[data-ds-dark-theme] automatically. The brand tokens are exactly the
-   * ones @huaqiu/dsh-ui-theme-huaqiu overrides (light #C7000B / dark #FF6B74),
-   * so the dock honours the HuaQiu brand scheme in both themes without knowing
-   * which theme is active. */
-  --hq-bg: var(--dsw-alias-bg-layer-1);
-  --hq-card: var(--dsw-alias-bg-layer-2);
-  --hq-card-soft: var(--dsw-alias-bg-overlay);
-  --hq-border: var(--dsw-alias-border-l2);
-  --hq-border-strong: var(--dsw-alias-border-l3);
-  --hq-hover: var(--dsw-alias-interactive-bg-hover);
-  --hq-text: var(--dsw-alias-label-primary);
-  --hq-text-strong: var(--dsw-alias-label-primary);
-  --hq-text-code: var(--dsw-alias-label-secondary);
-  --hq-muted: var(--dsw-alias-label-secondary);
-  --hq-faint: var(--dsw-alias-label-tertiary);
-  --hq-brand: var(--dsw-alias-brand-primary);
-  --hq-brand-soft: var(--dsw-alias-button-primary-hover);
-  --hq-brand-dim: var(--dsw-alias-button-primary-dimmed);
-  --hq-brand-fg: var(--dsw-alias-brand-primary-invert);
-  --hq-emerald: var(--dsw-alias-state-success-primary);
-  --hq-amber: var(--dsw-alias-state-warn-primary);
-  --hq-rose: var(--dsw-alias-state-error-primary);
+.hqpu-btn--engine:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
-.hqpu-panel {
-  width: min(360px, calc(100vw - 32px));
-  max-height: min(86vh, 720px);
-  background: var(--hq-bg);
-  color: var(--hq-text);
-  border: 0.5px solid var(--hq-border);
-  border-radius: 12px;
-  gap: 0;
-  overflow: hidden;
+.hqpu-engine-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border: 0.5px solid color-mix(in srgb, var(--hq-amber) 24%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--hq-amber) 10%, transparent);
 }
-.hqpu-scrim {
-  background: var(--dsw-alias-bg-mask-3);
+.hqpu-engine-confirm-text {
+  margin: 0;
+  font-size: var(--hq-fs-meta);
+  line-height: 16px;
+  color: var(--hq-amber-ink);
 }
-
-/* Sticky header */
-.hqpu-head {
-  flex: none;
+.hqpu-engine-confirm-actions {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 0.5px solid var(--hq-border);
-  background: color-mix(in srgb, var(--hq-bg) 95%, transparent);
-  position: sticky;
-  top: 0;
-  z-index: 2;
+  justify-content: flex-end;
+  gap: 6px;
 }
-.hqpu-head-main {
+.hqpu-engine-note {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-width: 0;
+  gap: 4px;
   margin: 0;
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-faint);
 }
-.hqpu-brand-icon {
+.hqpu-engine-note svg {
+  flex: none;
+  color: var(--hq-amber);
+}
+
+/* ── Error / result banners ──────────────────────────────────────────────── */
+.hqpu-error {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 0.5px solid;
+  border-radius: 8px;
+}
+.hqpu-error[data-tone='danger'] {
+  border-color: color-mix(in srgb, var(--hq-rose) 35%, transparent);
+  background: color-mix(in srgb, var(--hq-rose) 8%, transparent);
+}
+.hqpu-error[data-tone='warning'] {
+  border-color: color-mix(in srgb, var(--hq-amber) 35%, transparent);
+  background: color-mix(in srgb, var(--hq-amber) 8%, transparent);
+}
+.hqpu-error-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+.hqpu-error-icon {
+  display: inline-flex;
   flex: none;
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--hq-brand) 20%, transparent);
-  color: var(--hq-brand-soft);
+  margin-top: 1px;
+  color: var(--hq-rose);
 }
-.hqpu-brand-icon svg { width: 14px; height: 14px; display: block; }
-.hqpu-title-block { min-width: 0; }
-.hqpu-title {
+.hqpu-error[data-tone='warning'] .hqpu-error-icon {
+  color: var(--hq-amber);
+}
+.hqpu-error-text {
+  min-width: 0;
+}
+.hqpu-error-title {
   margin: 0;
-  font-size: 13px;
+  font-size: var(--hq-fs-body);
   font-weight: 600;
-  line-height: 16px;
-  color: var(--hq-text);
+  line-height: 15px;
+  color: var(--hq-rose);
 }
-.hqpu-sub {
+.hqpu-error[data-tone='warning'] .hqpu-error-title {
+  color: var(--hq-amber-ink);
+}
+.hqpu-error-body {
   margin: 2px 0 0;
-  font-size: 10px;
+  font-size: var(--hq-fs-micro);
   line-height: 14px;
   color: var(--hq-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.hqpu-toolbar { gap: 2px; }
-.hqpu-icon-btn {
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-  color: var(--hq-muted);
+  overflow-wrap: anywhere;
 }
-.hqpu-icon-btn:hover:not(:disabled) {
-  background: var(--hq-hover);
-  color: var(--hq-text);
+.hqpu-error-code {
+  display: inline-block;
+  margin-top: 3px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--hq-rose) 12%, transparent);
+  color: var(--hq-rose);
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
 }
-.hqpu-icon-btn svg { width: 14px; height: 14px; }
-
-/* Collapsible settings panel */
-.hqpu-settings {
-  flex: none;
-  padding: 10px 12px;
-  border-bottom: 0.5px solid var(--hq-border);
-  background: var(--hq-card-soft);
+.hqpu-error[data-tone='warning'] .hqpu-error-code {
+  background: color-mix(in srgb, var(--hq-amber) 14%, transparent);
+  color: var(--hq-amber-ink);
 }
-.hqpu-settings-row {
+.hqpu-error-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 8px;
+  padding-top: 6px;
+  border-top: 0.5px solid color-mix(in srgb, currentColor 12%, transparent);
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-muted);
 }
-.hqpu-settings-title {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--hq-text-code);
+.hqpu-error-actions {
+  display: flex;
+  flex: none;
+  gap: 10px;
 }
-.hqpu-origin-badge {
-  font-size: 9px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  border: 0.5px solid;
+
+.hqpu-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 8px;
 }
-.hqpu-origin-badge[data-origin='config'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-success-tertiary) 55%, transparent);
-  color: var(--hq-emerald);
-  border-color: color-mix(in srgb, var(--hq-emerald) 40%, transparent);
+.hqpu-alert--amber {
+  border: 0.5px solid color-mix(in srgb, var(--hq-amber) 32%, transparent);
+  background: color-mix(in srgb, var(--hq-amber) 10%, transparent);
 }
-.hqpu-origin-badge[data-origin='override'] {
-  background: color-mix(in srgb, var(--dsw-alias-state-warn-tertiary) 55%, transparent);
+.hqpu-alert-icon {
+  display: inline-flex;
+  flex: none;
   color: var(--hq-amber);
-  border-color: color-mix(in srgb, var(--hq-amber) 40%, transparent);
 }
-.hqpu-settings label {
-  display: block;
-  font-size: 10px;
-  color: var(--hq-muted);
-  margin: 6px 0 3px;
+.hqpu-alert-main {
+  min-width: 0;
 }
-.hqpu-source-input {
-  width: 100%;
-  height: 26px;
-  font-size: 10px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  background: var(--hq-bg);
-  border: 0.5px solid var(--hq-border);
-  border-radius: 5px;
-  color: var(--hq-text-code);
-  padding: 0 8px;
-  box-sizing: border-box;
+.hqpu-alert-title {
+  font-size: var(--hq-fs-meta);
+  font-weight: 600;
+  color: var(--hq-amber-ink);
 }
-.hqpu-source-input:focus-visible {
-  outline: none;
-  border-color: var(--hq-brand-soft);
+.hqpu-alert-body {
+  margin: 2px 0 0;
+  font-size: var(--hq-fs-micro);
+  line-height: 14px;
+  color: var(--hq-muted);
 }
-.hqpu-settings-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
-  margin-top: 8px;
+.hqpu-alert-body code {
+  padding: 0 3px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--hq-amber) 16%, transparent);
+  font-family: var(--hq-mono);
 }
-
-/* Scroll body */
-.hqpu-scroll {
-  flex: 1;
-  padding: 12px;
-  background: var(--hq-bg);
-  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
-  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+.hqpu-alert-actions {
+  margin-top: 4px;
 }
-.hqpu-column {
-  max-width: none;
+.hqpu-alert-dismiss {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--hq-amber-ink);
+  font: inherit;
+  font-size: var(--hq-fs-micro);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.hqpu-alert-green {
   margin: 0;
-  gap: 10px;
+  padding: 6px 10px;
+  border: 0.5px solid color-mix(in srgb, var(--hq-emerald) 30%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--hq-emerald) 8%, transparent);
+  color: var(--hq-emerald);
+  font-size: var(--hq-fs-micro);
 }
-.hqpu-stack { gap: 10px; }
 
-/* ── Active-job banner ─────────────────────────────────────────────────── */
+/* ── Active job ──────────────────────────────────────────────────────────── */
 .hqpu-active {
-  position: relative;
-  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border: 0.5px solid color-mix(in srgb, var(--hq-brand) 40%, transparent);
   border-radius: 8px;
-  border: 0.5px solid color-mix(in srgb, var(--hq-brand-soft) 30%, transparent);
-  background: var(--hq-bg);
-  box-shadow: var(--dsw-elevation-prominent);
+  background: var(--hq-card);
 }
 .hqpu-active-top {
   display: flex;
@@ -1121,9 +1151,14 @@ const VIEW_CSS_TEXT = `
   align-items: center;
   gap: 6px;
   min-width: 0;
-  font-size: 11px;
+  font-size: var(--hq-fs-body);
   font-weight: 600;
-  color: var(--hq-text-strong);
+  color: var(--hq-text);
+}
+.hqpu-active-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .hqpu-pulse-dot {
   position: relative;
@@ -1136,401 +1171,548 @@ const VIEW_CSS_TEXT = `
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  background: var(--hq-brand-soft);
+  background: var(--hq-brand);
 }
 .hqpu-pulse-ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  background: var(--hq-brand-soft);
+  background: var(--hq-brand);
   opacity: 0.6;
   animation: hqpu-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 @keyframes hqpu-ping {
-  75%, 100% { transform: scale(2.2); opacity: 0; }
+  75%, 100% { transform: scale(2.4); opacity: 0; }
 }
 .hqpu-active-percent {
   flex: none;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  font-weight: 500;
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-body);
+  font-weight: 700;
   color: var(--hq-brand-soft);
 }
 .hqpu-progress {
   height: 6px;
-  margin-top: 10px;
   border-radius: 999px;
-  background: var(--hq-card);
+  background: var(--hq-border);
   overflow: hidden;
 }
 .hqpu-progress-fill {
-  background: linear-gradient(to right, var(--hq-brand), var(--hq-brand-soft));
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--hq-brand), var(--hq-brand-soft));
   transition: width 0.3s ease;
 }
 .hqpu-active-meta {
   display: flex;
+  align-items: baseline;
   justify-content: space-between;
   gap: 8px;
-  margin-top: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
+  font-size: var(--hq-fs-micro);
+  line-height: 14px;
+  color: var(--hq-muted);
+}
+.hqpu-num {
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
+}
+.hqpu-active-versions {
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
   color: var(--hq-muted);
 }
-/* 4-step indicator row */
+.hqpu-active-note {
+  margin: 0;
+  font-size: var(--hq-fs-micro);
+  line-height: 14px;
+  color: var(--hq-faint);
+}
 .hqpu-job-steps4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 4px;
-  margin-top: 10px;
+  gap: 2px;
   padding-top: 8px;
   border-top: 0.5px solid var(--hq-border);
   text-align: center;
-  font-size: 9px;
+  font-size: var(--hq-fs-micro);
   font-weight: 500;
 }
-.hqpu-job-step--done { color: var(--hq-emerald); }
+.hqpu-job-step--done {
+  color: var(--hq-emerald);
+}
 .hqpu-job-step--active {
   color: var(--hq-brand-soft);
   animation: hqpu-step-pulse 1.2s ease-in-out infinite;
 }
-.hqpu-job-step--todo { color: var(--hq-muted); }
+.hqpu-job-step--todo {
+  color: var(--hq-faint);
+}
 @keyframes hqpu-step-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.45; }
 }
 
-/* ── Result / rollback alert (amber) vs green success ──────────────────── */
-.hqpu-alert {
+/* ── Footer ──────────────────────────────────────────────────────────────── */
+.hqpu-footer {
+  flex: none;
   display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px;
-  border-radius: 8px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px 12px;
+  border-top: 0.5px solid var(--hq-border);
+  background: var(--hq-bg);
 }
-.hqpu-alert--amber {
-  background: color-mix(in srgb, var(--dsw-alias-state-warn-tertiary) 60%, transparent);
-  border: 0.5px solid color-mix(in srgb, var(--hq-amber) 35%, transparent);
+.hqpu-btn--block {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--hq-brand);
+  color: var(--hq-on-accent);
+  font: inherit;
+  font-size: var(--hq-fs-body);
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--hq-brand) 35%, transparent);
+  transition: background 0.15s ease, box-shadow 0.15s ease;
 }
-.hqpu-alert--amber svg { color: var(--hq-amber); flex: none; margin-top: 1px; }
-.hqpu-alert-green {
-  background: color-mix(in srgb, var(--dsw-alias-state-success-tertiary) 55%, transparent);
-  border: 0.5px solid color-mix(in srgb, var(--hq-emerald) 35%, transparent);
-  color: var(--hq-emerald);
-  font-size: 11px;
+.hqpu-btn--block:hover:not(:disabled) {
+  background: var(--hq-brand-soft);
 }
-.hqpu-alert-title {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--dsw-alias-state-warn-label);
+/* The disabled CTA states the reason in its own label, so it must stay legible
+ * (a 40 %-opacity red button reads as "broken", not as "nothing to do"). */
+.hqpu-btn--block:disabled {
+  background: var(--hq-card-soft);
+  color: var(--hq-faint);
+  box-shadow: none;
+  cursor: not-allowed;
 }
-.hqpu-alert-body {
-  margin: 2px 0 0;
-  font-size: 10px;
-  line-height: 15px;
-  color: color-mix(in srgb, var(--dsw-alias-state-warn-label) 85%, transparent);
+.hqpu-cta-spinner {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: currentColor;
+  animation: hqpu-spin 0.9s linear infinite;
 }
-.hqpu-alert-body code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  background: color-mix(in srgb, var(--hq-amber) 18%, transparent);
-  padding: 1px 4px;
-  border-radius: 3px;
+@keyframes hqpu-spin {
+  to { transform: rotate(360deg); }
 }
-.hqpu-alert-actions {
+.hqpu-foot-meta {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
-  margin-top: 6px;
+  min-height: 14px;
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-faint);
 }
-.hqpu-alert-dismiss {
-  background: none;
-  border: 0;
-  padding: 0;
-  font-size: 10px;
-  color: var(--dsw-alias-state-warn-label);
-  cursor: pointer;
-  text-decoration: underline;
+.hqpu-footnote {
+  margin: 0;
+  font-size: var(--hq-fs-micro);
+  line-height: 13px;
+  text-align: center;
+  color: var(--hq-faint);
 }
 
-/* ── Runtime engine card ────────────────────────────────────────────────── */
-.hqpu-engine {
+/* ── Job log drawer ──────────────────────────────────────────────────────
+ * Covers the body and the footer, never the header: the log button and the
+ * close button stay in place while it is open. */
+.hqpu-log {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   padding: 12px;
+  background: var(--hq-bg);
+}
+.hqpu-log-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 0.5px solid var(--hq-border);
+}
+.hqpu-log-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.hqpu-log-name {
+  font-size: var(--hq-fs-body);
+  font-weight: 600;
+  color: var(--hq-text);
+  white-space: nowrap;
+}
+.hqpu-log-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow-y: auto;
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+}
+.hqpu-log-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
   border-radius: 8px;
+  background: var(--hq-card-soft);
+  font-family: var(--hq-mono);
+  font-size: var(--hq-fs-micro);
+}
+.hqpu-log-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 4px;
+  border-bottom: 0.5px solid var(--hq-border);
+  color: var(--hq-faint);
+  overflow-wrap: anywhere;
+}
+.hqpu-log-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--hq-muted);
+  line-height: 15px;
+}
+.hqpu-log-line--empty {
+  color: var(--hq-faint);
+}
+.hqpu-log-line-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.hqpu-log-dot {
+  flex: none;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--hq-border-strong);
+}
+.hqpu-log-dot[data-state='done'] { background: var(--hq-emerald); }
+.hqpu-log-dot[data-state='error'] { background: var(--hq-rose); }
+.hqpu-log-dot[data-state='warning'] { background: var(--hq-amber); }
+.hqpu-log-dot[data-state='idle'] { background: var(--hq-border-strong); }
+.hqpu-log-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px;
   border: 0.5px solid var(--hq-border);
-  background: var(--hq-card);
+  border-radius: 8px;
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-muted);
+}
+.hqpu-log-detail p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.hqpu-log-recent {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.hqpu-log-recent-title {
+  margin: 0 0 2px;
+  font-size: var(--hq-fs-micro);
+  font-weight: 600;
+  color: var(--hq-muted);
+}
+.hqpu-log-recent-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: 5px;
+  background: var(--hq-card-soft);
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-muted);
 }
-.hqpu-engine-head {
+.hqpu-log-recent-meta {
+  flex: none;
+  font-family: var(--hq-mono);
+  color: var(--hq-faint);
+}
+.hqpu-log-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
+  padding-top: 8px;
+  border-top: 0.5px solid var(--hq-border);
 }
-.hqpu-engine-title {
+
+/* ── Toast ──────────────────────────────────────────────────────────────── */
+.hqpu-toast-host {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  right: 12px;
+  z-index: 20;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--hq-text-strong);
+  pointer-events: none;
 }
-.hqpu-engine-title svg { width: 14px; height: 14px; color: var(--hq-muted); }
-.hqpu-chip {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 9px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: var(--hq-card);
-  border: 0.5px solid var(--hq-border-strong);
-  color: var(--hq-text-code);
+.hqpu-toast-host:empty {
+  display: none;
 }
-.hqpu-engine-update-row {
+.hqpu-toast {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
-  margin-top: 10px;
-  padding: 8px;
-  border-radius: 6px;
-  border: 0.5px solid color-mix(in srgb, var(--hq-border) 70%, transparent);
-  background: color-mix(in srgb, var(--hq-card) 60%, transparent);
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--dsw-alias-toast-bg, var(--hq-card));
+  color: var(--dsw-alias-toast-label, var(--hq-text));
+  font-size: var(--hq-fs-meta);
+  box-shadow: var(--dsw-shadow-lv3, 0 8px 24px rgba(0, 0, 0, 0.2));
+  pointer-events: auto;
+  animation: hqpu-toast-in 160ms ease-out;
 }
-.hqpu-engine-new-line {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--hq-text-code);
+.hqpu-toast-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--hq-amber);
 }
-.hqpu-tag--brand {
-  font-size: 9px;
-  padding: 1px 4px;
-  border-radius: 3px;
-  color: var(--hq-brand-soft);
-  background: color-mix(in srgb, var(--hq-brand-dim) 60%, transparent);
-  border: 0.5px solid color-mix(in srgb, var(--hq-brand) 45%, transparent);
+.hqpu-toast-icon[data-tone='success'] {
+  color: var(--hq-emerald);
 }
-.hqpu-engine-size {
-  margin: 3px 0 0;
-  font-size: 10px;
-  color: var(--hq-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.hqpu-toast-icon[data-tone='error'] {
+  color: var(--hq-rose);
 }
-.hqpu-btn--engine {
+.hqpu-toast-text {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+.hqpu-toast-close {
+  display: inline-flex;
   flex: none;
-  height: auto;
-  padding: 6px 10px;
-  font-size: 10px;
-  background: var(--hq-card);
-  border: 0.5px solid var(--hq-border-strong);
-  color: var(--hq-text-strong);
-  border-radius: 5px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  opacity: 0.55;
+  cursor: pointer;
 }
-.hqpu-btn--engine:hover:not(:disabled) { background: var(--hq-border); }
-.hqpu-engine-note {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 8px 0 0;
-  font-size: 9px;
-  color: var(--hq-muted);
+.hqpu-toast-close:hover {
+  opacity: 1;
+}
+@keyframes hqpu-toast-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
 }
-.hqpu-engine-note svg { width: 10px; height: 10px; color: var(--hq-amber); flex: none; }
 
-/* ── Plugin cards ───────────────────────────────────────────────────────── */
-.hqpu-section-head {
-  display: flex;
+/* ── Badges, banners, misc shared bits ──────────────────────────────────── */
+.hqpu-tag {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 2px;
+  flex: none;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: var(--hq-fs-micro);
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+.hqpu-tag[data-tone='success'] {
+  background: color-mix(in srgb, var(--hq-emerald) 12%, transparent);
+  color: var(--hq-emerald);
+}
+.hqpu-tag[data-tone='warning'] {
+  background: color-mix(in srgb, var(--hq-amber) 14%, transparent);
+  color: var(--hq-amber-ink);
+}
+.hqpu-tag[data-tone='danger'] {
+  background: color-mix(in srgb, var(--hq-rose) 12%, transparent);
+  color: var(--hq-rose);
+}
+.hqpu-tag[data-tone='info'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary, var(--hq-brand)) 12%, transparent);
+  color: var(--dsw-alias-state-business-primary, var(--hq-brand));
+}
+.hqpu-tag[data-tone='neutral'] {
+  background: var(--hq-card-soft);
+  color: var(--hq-muted);
 }
-.hqpu-section-title {
+.hqpu-banner {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--hq-text-strong);
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: var(--hq-fs-micro);
+  line-height: 15px;
+  color: var(--hq-muted);
 }
-.hqpu-count-pill {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--hq-brand) 20%, transparent);
-  color: var(--hq-brand-soft);
+.hqpu-banner[data-tone='danger'] {
+  background: color-mix(in srgb, var(--hq-rose) 8%, transparent);
 }
-.hqpu-all-changelog {
-  background: none;
-  border: 0;
-  padding: 0;
-  font-size: 10px;
+.hqpu-banner[data-tone='danger'] span {
+  color: var(--hq-rose);
+}
+.hqpu-release-summary {
+  margin: 0;
+  font-size: var(--hq-fs-meta);
+  line-height: 16px;
   color: var(--hq-muted);
-  cursor: pointer;
 }
-.hqpu-all-changelog:hover { color: var(--hq-text); }
-
-.hqpu-cards {
-  gap: 8px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-  align-items: start;
+.hqpu-release-notes {
+  margin: 0;
+  padding-left: 16px;
+  font-size: var(--hq-fs-micro);
+  line-height: 16px;
+  color: var(--hq-muted);
 }
-.hqpu-card {
+.hqpu-release-meta {
   margin: 0;
-  padding: 10px;
-  border-radius: 8px;
-  border: 0.5px solid var(--hq-border);
-  background: var(--hq-card);
-  transition: border-color 0.15s ease;
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-faint);
 }
-.hqpu-card:hover { border-color: var(--hq-border-strong); }
-.hqpu-card-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0;
+.hqpu-release-link {
+  font-size: var(--hq-fs-micro);
+  color: var(--hq-brand-soft);
+  text-decoration: none;
 }
-.hqpu-card-head > * { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.hqpu-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: 0.5px solid var(--hq-border-strong);
-  background: var(--hq-card);
-  color: var(--hq-text-code);
-  font-size: 10px;
-  font-weight: 700;
+.hqpu-release-link:hover {
+  text-decoration: underline;
 }
-.hqpu-card-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--hq-text-strong);
+.hqpu-status {
+  margin: 0;
+  font-size: var(--hq-fs-meta);
+  line-height: 15px;
+  color: var(--hq-muted);
 }
-.hqpu-card-sub {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 9px;
+.hqpu-empty {
+  padding: 24px 0;
+  text-align: center;
+  font-size: var(--hq-fs-meta);
   color: var(--hq-faint);
 }
-.hqpu-version-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 2px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
-}
-.hqpu-ver-old { color: var(--hq-muted); }
-.hqpu-ver-arrow { color: var(--hq-border-strong); }
-.hqpu-ver-new { color: var(--hq-emerald); font-weight: 700; }
-.hqpu-log-toggle {
+
+/* ── Buttons (settings / log drawer) ─────────────────────────────────────── */
+.hqpu-btn {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  background: none;
+  justify-content: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
   border: 0;
-  padding: 4px;
-  font-size: 10px;
-  color: var(--hq-muted);
+  border-radius: 8px;
+  background: var(--hq-card-soft);
+  color: var(--hq-text);
+  font: inherit;
+  font-size: var(--hq-fs-meta);
   cursor: pointer;
 }
-.hqpu-log-toggle:hover { color: var(--hq-text); }
-.hqpu-log-toggle svg { width: 12px; height: 12px; transition: transform 0.15s ease; }
-.hqpu-log-toggle[data-open='true'] svg { transform: rotate(180deg); }
-.hqpu-changelog-drawer {
-  margin-top: 8px;
-  padding: 8px;
-  border-radius: 6px;
-  border: 0.5px solid var(--hq-border);
-  background: color-mix(in srgb, var(--hq-card) 80%, transparent);
-  font-size: 10px;
+.hqpu-btn svg {
+  display: block;
 }
-.hqpu-changelog-drawer-title {
-  font-size: 9px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.hqpu-btn:hover:not(:disabled) {
+  background: var(--hq-hover);
+}
+.hqpu-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.hqpu-btn--sm {
+  height: 26px;
+  padding: 0 8px;
+  font-size: var(--hq-fs-micro);
+}
+.hqpu-btn--ghost {
+  background: transparent;
   color: var(--hq-muted);
 }
-.hqpu-changelog-drawer ul {
-  margin: 4px 0 0;
-  padding-left: 16px;
-  color: var(--hq-text-code);
-  line-height: 16px;
+.hqpu-btn--brand {
+  background: var(--hq-brand);
+  color: var(--hq-on-accent);
+}
+.hqpu-btn--brand:hover:not(:disabled) {
+  background: var(--hq-brand-soft);
+}
+/* The runtime confirm is the same amber as the card it lives in (the
+ * prototype's treatment): red is the plugin-set path, amber the runtime path.
+ * Ink is a warm near-black because amber stays bright in both themes — white
+ * on amber-500 sits near 2:1 and reads as a disabled button. */
+.hqpu-btn--engine-solid {
+  height: 28px;
+  padding: 0 12px;
+  background: var(--hq-amber);
+  color: var(--hq-on-amber);
+  font-size: var(--hq-fs-meta);
+  font-weight: 600;
+}
+.hqpu-btn--engine-solid:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--hq-amber) 85%, #000);
 }
 
-/* Sticky footer */
-.hqpu-footer {
-  flex: none;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
-  padding: 10px 12px 12px;
-  border-top: 0.5px solid var(--hq-border);
-  background: color-mix(in srgb, var(--hq-bg) 95%, transparent);
+/* ── Skeleton ────────────────────────────────────────────────────────────── */
+.hqpu-skeleton-fill {
+  background: var(--hq-border);
+  animation: hqpu-skeleton 2s cubic-bezier(0.36, 0, 0.64, 1) infinite;
 }
-.hqpu-foot-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 10px;
-  color: var(--hq-muted);
+.hqpu-skeleton-title {
+  width: 60%;
+  height: 10px;
+  border-radius: 3px;
 }
-.hqpu-foot-set {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+.hqpu-skeleton-sub {
+  width: 40%;
+  height: 8px;
+  border-radius: 3px;
 }
-.hqpu-foot-actions {
-  display: flex;
-  gap: 8px;
+.hqpu-card .hqpu-avatar.hqpu-skeleton-fill {
+  background: var(--hq-border);
 }
-.hqpu-btn--block {
-  flex: 1;
-  height: 32px;
-  background: var(--hq-brand);
-  color: var(--hq-brand-fg);
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--hq-brand) 40%, transparent);
+@keyframes hqpu-skeleton {
+  0% { opacity: 1; }
+  40% { opacity: 0.55; }
+  80%, 100% { opacity: 1; }
 }
-.hqpu-btn--block:hover:not(:disabled) { background: var(--hq-brand-soft); }
-.hqpu-btn--block:disabled { opacity: 0.5; box-shadow: none; }
-.hqpu-btn--ignore {
-  height: 32px;
-  padding: 0 10px;
-  background: var(--hq-card);
-  border: 0.5px solid var(--hq-border);
-  color: var(--hq-muted);
-  font-size: 10px;
-  border-radius: 6px;
+
+/* ── Focus + reduced motion ──────────────────────────────────────────────── */
+.hqpu-panel button:focus-visible,
+.hqpu-panel a:focus-visible,
+.hqpu-panel input:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 1px;
 }
-.hqpu-btn--ignore:hover:not(:disabled) { background: var(--hq-hover); color: var(--hq-text); }
-.hqpu-footnote {
-  margin: 0;
-  font-size: 9px;
-  text-align: center;
-  color: var(--hq-muted);
+.hqpu-panel input:focus-visible {
+  outline: none;
+  border-color: var(--hq-brand-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hqpu-scrim,
+  .hqpu-panel,
+  .hqpu-skeleton-fill,
+  .hqpu-cta-spinner,
+  .hqpu-toast,
+  .hqpu-pulse-ring,
+  .hqpu-job-step--active {
+    animation: none;
+  }
 }
 
-/* Shared bits on the new palette */
-.hqpu-status { color: var(--hq-muted); font-size: 11px; }
-.hqpu-empty { color: var(--hq-muted); font-size: 11px; padding: 16px 0; }
-.hqpu-toast { background: var(--hq-card); border: 0.5px solid var(--hq-border); color: var(--hq-text); font-size: 12px; }
-.hqpu-skeleton-fill { background: var(--hq-border); }
-.hqpu-job { background: var(--hq-card); border-color: var(--hq-border); }
-.hqpu-job-meta { color: var(--hq-muted); }
-.hqpu-release-notes { color: var(--hq-muted); font-size: 11px; }
-.hqpu-advanced > summary { color: var(--hq-muted); }
-.hqpu-recent-jobs li { color: var(--hq-muted); font-size: 10px; }
 `
 
 const STYLE_TAG_ID = 'data-plugin-css="huaqiu-plugin-update"'
@@ -1705,31 +1887,14 @@ class UpdateStore implements UpdateStoreLike {
   }
 
   /**
-   * Badge: counts actionable plugin updates AND an available runtime update AND
-   * (while a job runs) an attention pill. A recent failed/rolled-back job with
-   * nothing actionable left also keeps a dot, so the outcome is never silently
-   * forgotten after the panel closes.
+   * Sidebar badge: how many updates are still on offer — actionable plugin
+   * items plus (once) the HQ Edge runtime update.
+   *
+   * The whole rule lives in {@link badgeCountFor}; in particular the job
+   * history never contributes, which is what used to pin this at 1 forever.
    */
   badgeCount(): number {
-    const job = this.active
-    if (job !== null && !TERMINAL_PHASES.has(job.phase)) return 1
-    const report = this.current
-    if (report === null) return 0
-    let count = report.items.filter(
-      (item) => item.state === 'update' || item.state === 'install',
-    ).length
-    if (report.runtime?.updateAvailable) count += 1
-    if (count === 0) {
-      const latest = this.recent[0]
-      // Keep a visible attention dot for every terminal outcome, including
-      // success. Without this, a background update could finish while the
-      // panel was closed and the user would have no indication that a result
-      // is waiting in the update centre.
-      if (latest !== undefined && TERMINAL_PHASES.has(latest.phase)) {
-        count = 1
-      }
-    }
-    return count
+    return badgeCountFor(this.current, this.active)
   }
 
   private emit(): void {
@@ -1751,6 +1916,12 @@ class UpdateStore implements UpdateStoreLike {
       // The active job settled (moved to recent/terminal) — the installing
       // footer state must clear on its own, without the panel's closure.
       this.installingFlag = false
+      // …and the report is now stale: it still names the versions this job
+      // just installed. hq-edge refreshes its own copy before it settles the
+      // job, so one cheap read of `/report` is enough to bring the list (and
+      // the badge) down to zero. Without it the badge kept counting updates
+      // that no longer exist until the 60 s idle poll came round.
+      void this.refresh()
     }
     this.emit()
     this.schedulePoll()