release: bump version to 0.76.8

VERSION

@@ -1 +1 @@
-0.76.5
+0.76.8

docs/CHANGELOG.md

@@ -8,6 +8,46 @@ This project follows the repository versioning rule:
 - `improvement` -> `+0.0.1`（bugfix + 小功能混合）
 - `bugfix` -> `+0.0.1`
 
+## [0.76.8] — 2026-10-02
+
+Released: 2026-10-02
+
+### Highlights
+- 修复展开新闻面板时后台 ticker / realtime 更新导致卡片重建和 hover 抖动的问题。
+
+### Added / Fixed / Improved
+- 面板浏览期间冻结卡片 DOM，后台更新只写入最新 payload。
+- 关闭面板时一次性应用待处理新闻，保持滚动位置和 hover 稳定。
+- 展开面板时暂停隐藏 ticker，手动刷新仍可立即更新面板内容。
+
+---
+
+## [0.76.7] — 2026-10-02
+
+Released: 2026-10-02
+
+### Highlights
+- 统一 breaking 新闻卡片的 hover 交互，让通用 hover 行为叠加卡片自身等级颜色。
+
+### Added / Fixed / Improved
+- 红、橙、黄 breaking 卡片共用同一套 hover 提亮、边框增强和浮起逻辑。
+- 等级颜色通过卡片变量注入，避免为每种颜色复制 hover 样式。
+
+---
+
+## [0.76.6] — 2026-10-02
+
+Released: 2026-10-02
+
+### Highlights
+- 扩展 breaking ticker 的全域扫光效果，并拉开新闻卡片与上方状态内容的间距。
+
+### Added / Fixed / Improved
+- ticker 反射从局部光斑改为覆盖整条横向区域的扫光/闪烁带。
+- 桌面与移动新闻列表首卡预留顶部呼吸空间，保持内容区层次。
+
+---
+
 ## [0.76.5] — 2026-10-02
 
 Released: 2026-10-02

docs/technical/en/earth-frontend-context.md

@@ -444,11 +444,11 @@ The current state machine keeps data, ticker visibility, panel lifecycle and sel
 
 - `getNewsBreakingState()` derives the data state from `items` and `cruise_items`, ignores expired stories, and ranks `critical > breaking > watch`. The expiry timestamp only schedules the next recomputation.
 - A ticker viewport watcher runs every 120 ms and chooses the item with the greatest viewport overlap, breaking ties by distance to the viewport center. Only when that current item has a non-`none` level does the ticker switch its horizontal rules to `has-breaking-*`; it returns to neutral as soon as the current item is not breaking.
-- The panel lifecycle is `closed → opening → open → closing → closed`. Opening and closing control morphing, visibility and ticker hiding; they do not mutate the breaking data.
+- The panel lifecycle is `closed → opening → open → closing → closed`. Opening and closing control morphing, visibility and ticker hiding; they do not mutate the breaking data. During `opening/open`, the current card DOM stays stable while incoming payloads are deferred and applied once on close, so realtime updates cannot rebuild a hovered card.
 - `selectedCruiseStoryId` is independent of breaking severity. Selection, focus, hover and close only change the selected story and reading position; close also clears the selection and filter popover.
 - The expanded panel always keeps its blue glass surface. Breaking colors remain on the matching story cards, so opening the panel never turns the entire glass panel red; the ticker can still show a red signal when the currently scrolling story is breaking.
 
-The glass-reflection pulse is implemented: when the current ticker story enters a breaking state, its `::after` highlight emits a low-frequency, limited-amplitude red/amber pulse; the matching breaking card gets a single glass reflection sweep through its own `::after`. The panel base remains blue and there is no permanently flashing full border. `prefers-reduced-motion` disables the animation and keeps a low-intensity static cue. This visual sub-state stays attached to the current breaking story and matching card, independent of whether the panel is open.
+The glass-reflection pulse is implemented: when the current ticker story enters a breaking state, its `::after` emits a low-frequency, limited-amplitude full-width horizontal red/amber sweep and pulse; the matching breaking card gets a single glass reflection sweep through its own `::after`. The panel base remains blue and there is no permanently flashing full border. `prefers-reduced-motion` disables the animation and keeps a low-intensity static cue. This visual sub-state stays attached to the current breaking story and matching card, independent of whether the panel is open.
 
 Compute cards directly reuse the shared `.hud-panel` background, border, shadow, and glass treatment. Summary, essentials, and detail areas add no separate black surface. Their headers share inset spacing with the layer panel through `.hud-panel__header--inset` / `.layer-panel-header`; primary numbers remain prominent and essential information stays visible.
 

docs/technical/zh/earth-frontend-context.md

@@ -577,11 +577,11 @@ Earth 原有 Roboto Condensed 字体已随 `assets/fonts/` 本地分发，许可
 
 - 数据态由 `getNewsBreakingState()` 从 `items` 与 `cruise_items` 合并计算，只接受未过期项目，并按 `critical > breaking > watch` 排序；到期时间只负责安排下一次重新计算。
 - ticker 的显示态由滚动视口 watcher 每 120ms 取视口内重叠最多、距离中心最近的当前项目。只有当前项目的 breaking 等级非 `none` 时，ticker 的上下细线才切换为对应的 `has-breaking-*` 颜色；当前项目离开后立即恢复中性。
-- 面板生命周期 `panelPhase` 只有 `closed → opening → open → closing → closed`。打开/关闭只控制形变、可见性和 ticker 的隐藏，不改变 breaking 数据态。
+- 面板生命周期 `panelPhase` 只有 `closed → opening → open → closing → closed`。打开/关闭只控制形变、可见性和 ticker 的隐藏，不改变 breaking 数据态；进入 `opening/open` 后保留当前卡片 DOM，后台 payload 先暂存，关闭时再一次性应用，避免 hover 卡片被实时更新重建。
 - `selectedCruiseStoryId` 独立于 breaking 等级。选择、聚焦、悬停和关闭只更新选中项与阅读位置；关闭时清空选中项及筛选弹层。
 - 展开面板始终使用蓝色玻璃底。breaking 只在对应新闻卡片上使用等级颜色，因此点开面板不会把整块玻璃染成红色，之后滚动到 breaking 新闻时仍可让 ticker 显示红色提示。
 
-breaking 的玻璃反射脉冲已实现：ticker 当前项目进入 breaking 状态时，`::after` 局部高光以低频、有限幅度红/橙脉冲增强；展开面板中只在对应 breaking 新闻卡片上用 `::after` 扫过一条玻璃反射带。面板底色保持蓝色，不使用持续闪烁的整圈边缘；`prefers-reduced-motion` 下停用动画并保留低强度静态提示。该视觉子状态挂在当前 breaking 项目和对应卡片上，不与面板是否打开耦合。
+breaking 的玻璃反射脉冲已实现：ticker 当前项目进入 breaking 状态时，`::after` 以低频、有限幅度的全宽横向扫光带增强并闪烁；展开面板中只在对应 breaking 新闻卡片上用 `::after` 扫过一条玻璃反射带。面板底色保持蓝色，不使用持续闪烁的整圈边缘；`prefers-reduced-motion` 下停用动画并保留低强度静态提示。该视觉子状态挂在当前 breaking 项目和对应卡片上，不与面板是否打开耦合。
 
 算力卡片外观直接复用共享 `.hud-panel` 的背景、边框、阴影和玻璃效果，摘要、基础信息及详情区不再叠加单独黑底。标题栏与图层面板共用 `.hud-panel__header--inset` / `.layer-panel-header` 的内边距；主数字继续突出，基础信息保持常显。
 

docs/version-history.md

@@ -16,12 +16,15 @@
 ## Current Version
 
 - `main` 当前主线历史推导到：`0.16.5`
-- `dev` 当前开发分支历史推导到：`0.76.5`
+- `dev` 当前开发分支历史推导到：`0.76.8`
 
 ## Timeline
 
 | Version | Type | Branch | Commit | Summary |
 | --- | --- | --- | --- | --- |
+| `0.76.8` | bugfix | `dev` | `v0.76.8` | 展开新闻面板时冻结卡片 DOM，隔离 ticker/realtime 更新并修复 hover 抖动 |
+| `0.76.7` | bugfix | `dev` | `v0.76.7` | 统一 breaking 卡片 hover 行为并通过卡片等级变量注入颜色 tint |
+| `0.76.6` | bugfix | `dev` | `v0.76.6` | breaking ticker 全域扫光闪烁，新闻列表首卡增加顶部呼吸空间 |
 | `0.76.5` | bugfix | `dev` | `v0.76.5` | breaking 玻璃反射式警灯脉冲、等级颜色统一及新闻卡片内容高度修复 |
 | `0.76.4` | bugfix | `dev` | `v0.76.4` | 修正 breaking 新闻 ticker 与面板状态边界，当前滚动到 breaking 项时才显示红色 |
 | `0.76.3` | bugfix | `dev` | `v0.76.3` | 修复新闻栏关闭后残留 breaking 橙色边线，分离 ticker、面板、选择和过期状态 |

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "planet-frontend",
-  "version": "0.76.5",
+  "version": "0.76.8",
   "private": true,
   "packageManager": "bun@1",
   "dependencies": {

frontend/public/earth/css/news-panel.css

@@ -50,15 +50,20 @@
 .earth-news-ticker::after {
   content: "";
   position: absolute;
-  inset: calc(-8px * var(--hud-scale)) calc(14px * var(--hud-scale));
+  inset: calc(-8px * var(--hud-scale)) calc(-14px * var(--hud-scale));
   z-index: 0;
   pointer-events: none;
   opacity: 0;
-  background: radial-gradient(
-    ellipse 24% 120% at 72% 50%,
-    var(--news-breaking-color),
-    transparent 72%
-  );
+  background: linear-gradient(
+    102deg,
+    transparent 0%,
+    transparent 34%,
+    color-mix(in srgb, var(--news-breaking-color) 18%, transparent) 43%,
+    var(--news-breaking-color) 50%,
+    color-mix(in srgb, var(--news-breaking-color) 18%, transparent) 57%,
+    transparent 66%,
+    transparent 100%
+  ) 140% 0 / 220% 100% no-repeat;
   filter: blur(calc(8px * var(--hud-scale)));
   mix-blend-mode: screen;
 }
@@ -263,12 +268,16 @@
 @keyframes earthNewsBreakingGlassPulse {
   0%,
   100% {
-    opacity: 0.12;
-    transform: translateX(-8%) scaleX(0.88);
+    opacity: 0;
+    background-position: 140% 0;
+  }
+  18%,
+  74% {
+    opacity: 0.76;
   }
   50% {
-    opacity: 0.76;
-    transform: translateX(8%) scaleX(1);
+    opacity: 0.9;
+    background-position: -40% 0;
   }
 }
 
@@ -508,6 +517,7 @@
   min-height: 0;
   max-height: none;
   overflow-y: auto;
+  padding-top: calc(8px * var(--hud-scale));
   padding-right: calc(4px * var(--hud-scale));
   scrollbar-width: thin;
   scrollbar-color: rgba(160, 220, 255, 0.36) transparent;
@@ -527,7 +537,7 @@
 }
 
 .news-story-card {
-  --news-breaking-color: rgba(255, 166, 102, 0.46);
+  --news-hover-tint: rgba(214, 235, 255, 0.16);
   position: relative;
   overflow: hidden;
   flex: 0 0 auto;
@@ -552,10 +562,18 @@
   z-index: 1;
 }
 
+.earth-mobile-news-board-list {
+  padding-top: 8px;
+}
+
 .news-story-card:hover {
-  border-color: rgba(214, 235, 255, 0.16);
+  border-color: color-mix(in srgb, var(--news-hover-tint) 76%, rgba(214, 235, 255, 0.16));
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(92, 151, 218, 0.06));
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--news-hover-tint) 30%, rgba(255, 255, 255, 0.05)),
+      color-mix(in srgb, var(--news-hover-tint) 24%, rgba(92, 151, 218, 0.03))
+    );
   transform: translateY(-1px);
 }
 
@@ -575,6 +593,7 @@
 
 .news-story-card--breaking-watch {
   --news-breaking-color: rgba(255, 213, 128, 0.42);
+  --news-hover-tint: var(--news-breaking-color);
   border-color: var(--news-breaking-color);
   background:
     linear-gradient(180deg, rgba(255, 248, 220, 0.08), rgba(255, 184, 77, 0.05));
@@ -582,6 +601,7 @@
 
 .news-story-card--breaking-breaking {
   --news-breaking-color: rgba(255, 151, 78, 0.5);
+  --news-hover-tint: var(--news-breaking-color);
   border-color: var(--news-breaking-color);
   background:
     linear-gradient(180deg, rgba(255, 205, 150, 0.1), rgba(255, 135, 80, 0.07));
@@ -589,6 +609,7 @@
 
 .news-story-card--breaking-critical {
   --news-breaking-color: rgba(255, 95, 95, 0.56);
+  --news-hover-tint: var(--news-breaking-color);
   border-color: var(--news-breaking-color);
   background:
     linear-gradient(180deg, rgba(255, 155, 155, 0.11), rgba(205, 58, 58, 0.08));

frontend/public/earth/js/news.js

@@ -61,6 +61,7 @@ let selectedCruiseStoryId = null;
 let morphTimer = null;
 let morphFrame = null;
 let panelPhase = "closed";
+let deferredPanelPayload = null;
 let breakingExpiryTimer = null;
 let tickerBreakingTimer = null;
 let newsRealtimeSocket = null;
@@ -215,6 +216,8 @@ function finishHudOpen(hud) {
 }
 
 function finishHudClose(hud, ticker, restoreRect = null) {
+  const pendingPayload = deferredPanelPayload;
+  deferredPanelPayload = null;
   panelPhase = "closed";
   hud.classList.add("hud-panel-hidden");
   hud.classList.remove("is-morphing");
@@ -230,6 +233,14 @@ function finishHudClose(hud, ticker, restoreRect = null) {
     hud.style.transform = "";
   }
   ticker?.classList.remove("is-hidden");
+  setTickerPlayback(true);
+  if (pendingPayload) renderPayload(pendingPayload, { forcePanelRender: true });
+}
+
+function setTickerPlayback(running) {
+  const { tickerTrack } = getElements();
+  if (!(tickerTrack instanceof HTMLElement)) return;
+  tickerTrack.style.animationPlayState = running ? "" : "paused";
 }
 
 function setNewsHudOpen(open, { highlightId = null } = {}) {
@@ -258,6 +269,7 @@ function setNewsHudOpen(open, { highlightId = null } = {}) {
     hud.classList.add("is-morphing");
     setHudRectWithoutTransition(hud, tickerRect, 1);
     ticker?.classList.add("is-hidden");
+    setTickerPlayback(false);
     morphFrame = requestAnimationFrame(() => {
       morphFrame = null;
       setHudRect(hud, targetRect, 1);
@@ -814,7 +826,7 @@ function renderEmptyState(message) {
   renderTicker({ items: [], focus: payload?.focus || { region: "global" } });
 }
 
-function renderPayload(nextPayload) {
+function renderPayload(nextPayload, { forcePanelRender = false } = {}) {
   payload = nextPayload;
   reconcileNewsSourceFilters(nextPayload);
   const {
@@ -847,6 +859,12 @@ function renderPayload(nextPayload) {
   syncFilterSummaries(nextPayload);
   applyNewsBreakingShellState(nextPayload);
 
+  if (!forcePanelRender && (panelPhase === "opening" || panelPhase === "open")) {
+    deferredPanelPayload = nextPayload;
+    return;
+  }
+  if (forcePanelRender) deferredPanelPayload = null;
+
   if (!board || !status || !focusLabel || !focusCoords || !sourceCount || !regionChip) {
     if (document.body.classList.contains("layout-mode-mobile")) {
       // Mobile page omits the region chip shell, but the rest of the page is still renderable.
@@ -1103,7 +1121,7 @@ async function fetchNews(lat, lon, context = {}) {
   return response.json();
 }
 
-async function refreshNews(lat, lon, { silent = false } = {}) {
+async function refreshNews(lat, lon, { silent = false, forcePanelRender = false } = {}) {
   const targetRegion = inferRegion(lat, lon);
   const categorySignature = getNewsCategorySignature();
   const sourceSignature = getNewsSourceSignatureForFetch(lat, lon);
@@ -1129,7 +1147,7 @@ async function refreshNews(lat, lon, { silent = false } = {}) {
       if (requestToken !== activeRefreshToken) {
         return nextPayload;
       }
-      renderPayload(nextPayload);
+      renderPayload(nextPayload, { forcePanelRender });
       lastFetchAt = Date.now();
       lastCategorySignature = getNewsCategorySignature();
       lastSourceSignature = getNewsSourceSignature(nextPayload);
@@ -1369,7 +1387,7 @@ export function initNewsPanel() {
     const refreshBtn = document.getElementById(id);
     refreshBtn?.addEventListener("click", async () => {
       try {
-        await refreshNews(lastFocus?.lat, lastFocus?.lon);
+        await refreshNews(lastFocus?.lat, lastFocus?.lon, { forcePanelRender: true });
         showStatusMessage(earthMessage("status.newsRefresh", { ok: true }), "info");
       } catch {
         showStatusMessage(earthMessage("status.newsRefresh", { ok: false }), "error");

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "planet"
-version = "0.76.5"
+version = "0.76.8"
 description = "智能星球计划 - 态势感知系统"
 requires-python = ">=3.14"
 dependencies = [

uv.lock

@@ -757,7 +757,7 @@ wheels = [
 
 [[package]]
 name = "planet"
-version = "0.76.5"
+version = "0.76.8"
 source = { virtual = "." }
 dependencies = [
     { name = "aiofiles" },