From 526b2df8ea11e7ae8481b5557b14e57a17219565 Mon Sep 17 00:00:00 2001
From: Qiufeng <qiufengawa@users.noreply.github.com>
Date: Thu, 3 Sep 2026 21:31:39 +0800
Subject: [PATCH] feat: refine update center and release notes

---
 package.json                                  |    2 +-
 web-next/src/pages/expenses/ExpenseDetail.tsx |    2 +-
 web-next/src/pages/update/UpdatePage.tsx      | 1051 +++++++++++++++--
 web-next/src/pages/update/mockData.ts         |  283 +++++
 web-next/src/styles/theme.css                 |  552 +++++++++
 5 files changed, 1819 insertions(+), 71 deletions(-)
 create mode 100644 web-next/src/pages/update/mockData.ts

diff --git a/package.json b/package.json
index 6108fb4..8642ef0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tallynote",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.0.6",
diff --git a/web-next/src/pages/expenses/ExpenseDetail.tsx b/web-next/src/pages/expenses/ExpenseDetail.tsx
index 709819a..b5cb2fb 100644
--- a/web-next/src/pages/expenses/ExpenseDetail.tsx
+++ b/web-next/src/pages/expenses/ExpenseDetail.tsx
@@ -66,7 +66,7 @@ export default function ExpenseDetail({ expense, timezone = "Asia/Shanghai", onC
     </Drawer>
     <Dialog visible={action === "status"} header={detail.status === "reimbursed" ? "改回未报销？" : "标记为已报销？"} confirmBtn={{ content: "确认变更", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void updateStatus()} onCancel={() => { if (!busy) setAction(null); }}>{detail.status === "reimbursed" ? "这笔账目会重新出现在未报销列表。" : "确认这笔账目已完成报销，并从未报销列表移出？"}</Dialog>
     <Dialog visible={action === "trash"} header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setAction(null); }} onConfirm={() => void trash()} onCancel={() => { if (!busy) setAction(null); }}>账目会从普通列表和导出结果中隐藏，附件会保留，可在回收站恢复。</Dialog>
-    <Dialog visible={Boolean(removeTarget)} header="删除附件？" confirmBtn={{ content: "删除附件", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setRemoveTarget(null); }} onConfirm={() => void remove()} onCancel={() => { if (!busy) setRemoveTarget(null); }}>{removeTarget && <><p>{removeTarget.kind === "payment_proof" ? "账目至少需要保留一张付款凭证。" : detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() ? "这是最后一张发票。删除后必须填写无发票原因。" : "将删除这张发票。"}</p>{removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() && <Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(removeError)} aria-describedby={removeError ? "remove-attachment-error" : undefined} value={removeReason} onChange={value => { setRemoveReason(value); setRemoveError(""); }} placeholder="例如：商家无法开具发票" maxlength={500} />}{removeError && <div id="remove-attachment-error" className="expense-error" role="alert"><AlertCircle size={16} />{removeError}</div>}</>}</Dialog>
+    <Dialog visible={Boolean(removeTarget)} header="删除附件？" confirmBtn={{ content: "删除附件", theme: "danger", loading: busy, disabled: busy }} cancelBtn="取消" onClose={() => { if (!busy) setRemoveTarget(null); }} onConfirm={() => void remove()} onCancel={() => { if (!busy) setRemoveTarget(null); }}>{removeTarget && <><p>{removeTarget.kind === "payment_proof" ? "账目至少需要保留一张付款凭证。" : detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() ? "这是最后一张发票。删除后必须填写无发票原因。" : "将删除这张发票。"}</p>{removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim() && <Textarea disabled={busy} aria-label="无发票原因" aria-invalid={Boolean(removeError)} aria-describedby={removeError ? "remove-attachment-error" : undefined} value={removeReason} onChange={value => { setRemoveReason(value); setRemoveError(""); }} placeholder="例如：商家无法开具发票" maxlength={500} />}{removeError && <div id="remove-attachment-error" className="expense-error" role="alert">{removeError}</div>}</>}</Dialog>
     <Dialog visible={Boolean(preview)} header={preview?.originalName} onClose={() => setPreview(null)} cancelBtn="关闭" footer={null}>{preview && <div className="tn-preview">{preview.mimeType.startsWith("image/") ? <img src={`/api/attachments/${preview.id}/content`} alt={preview.originalName} /> : <iframe src={`/api/attachments/${preview.id}/content`} title={preview.originalName} />}</div>}</Dialog>
   </>;
 }
diff --git a/web-next/src/pages/update/UpdatePage.tsx b/web-next/src/pages/update/UpdatePage.tsx
index 13b174e..f16fb11 100644
--- a/web-next/src/pages/update/UpdatePage.tsx
+++ b/web-next/src/pages/update/UpdatePage.tsx
@@ -1,18 +1,124 @@
-import { useEffect, useRef, useState } from "react";
-import { AlertCircle, CheckCircle2, Download, RefreshCw, Server, ShieldCheck, Terminal, Zap } from "lucide-react";
-import { Button, Dialog, Tag } from "tdesign-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import {
+  AlertCircle,
+  ArrowUpRight,
+  CheckCircle2,
+  Download,
+  FileCode,
+  HardDrive,
+  History,
+  Layers,
+  PlayCircle,
+  RefreshCw,
+  Server,
+  ShieldAlert,
+  ShieldCheck,
+  Sparkles,
+  Zap,
+} from "lucide-react";
+import { Button, Dialog, Radio, RadioGroup, Steps, Tag } from "tdesign-react";
 import { ApiError, api } from "../../services/api";
 import { dateText } from "../expenses/date";
 import { ErrorBanner, Page, Surface } from "../common";
 import type { Notify } from "../expenses/types";
+import type { MockScenario, MockUpdateState } from "./mockData";
 
-type JobStatus = "queued" | "downloading" | "verifying" | "staged" | "backing_up" | "applying" | "completed" | "failed" | "cancelled";
-type UpdateJob = { id: string; operation?: "download" | "apply"; status: JobStatus; version: string; platform: string; assetName?: string | null; sizeBytes?: number | null; downloadedBytes?: number | null; downloadStartedAt?: number | null; downloadSpeedBps?: number | null; errorMessage?: string | null; createdAt?: number; updatedAt?: number; completedAt?: number | null; applyQueuedAt?: number | string | null; restartWindowSeconds?: number | null; restartDeadline?: number | string | null; restartAt?: number | string | null; expectedRecoveryAt?: number | string | null };
-type LatestRelease = { version: string; tagName?: string; releaseName?: string; publishedAt?: string; compatible: boolean; integrityReady: boolean; signatureReady: boolean; isNewer: boolean; assetName?: string; assetSize?: number; notes?: string | null; releaseNotes?: string | null; body?: string | null; htmlUrl?: string | null };
-type UpdateInfo = { configured: boolean; strategy: "disabled" | "systemd"; currentVersion: string; platform: { target: string; os: string; arch: string }; checkedAt: number; latest: LatestRelease | null; job: UpdateJob | null };
-const active = new Set<JobStatus>(["queued", "downloading", "verifying", "staged", "backing_up", "applying"]);
-const pollable = new Set<JobStatus>(["queued", "downloading", "verifying", "backing_up", "applying"]);
-const labels: Record<JobStatus, string> = { queued: "等待系统服务", downloading: "下载中", verifying: "校验文件", staged: "下载完成，等待应用", backing_up: "备份数据", applying: "切换并检查服务", completed: "已完成", failed: "失败", cancelled: "已取消" };
+// The interactive scenario console is a development-only aid. Keep its data
+// behind a compile-time DEV guard so Vite can remove the dynamic import and
+// the mock catalog from production/release bundles entirely.
+const MOCK_PREVIEW_ENABLED = import.meta.env.DEV;
+
+const { StepItem } = Steps;
+
+type JobStatus =
+  | "queued"
+  | "downloading"
+  | "verifying"
+  | "staged"
+  | "backing_up"
+  | "applying"
+  | "completed"
+  | "failed"
+  | "cancelled";
+
+type UpdateJob = {
+  id: string;
+  operation?: "download" | "apply";
+  status: JobStatus;
+  version: string;
+  platform: string;
+  assetName?: string | null;
+  sizeBytes?: number | null;
+  downloadedBytes?: number | null;
+  downloadStartedAt?: number | null;
+  downloadSpeedBps?: number | null;
+  errorMessage?: string | null;
+  createdAt?: number;
+  updatedAt?: number;
+  completedAt?: number | null;
+  applyQueuedAt?: number | string | null;
+  restartWindowSeconds?: number | null;
+  restartDeadline?: number | string | null;
+  restartAt?: number | string | null;
+  expectedRecoveryAt?: number | string | null;
+};
+
+type LatestRelease = {
+  version: string;
+  tagName?: string;
+  releaseName?: string;
+  publishedAt?: string;
+  compatible: boolean;
+  integrityReady: boolean;
+  signatureReady: boolean;
+  isNewer: boolean;
+  assetName?: string;
+  assetSize?: number;
+  notes?: string | null;
+  releaseNotes?: string | null;
+  body?: string | null;
+  htmlUrl?: string | null;
+};
+
+type UpdateInfo = {
+  configured: boolean;
+  strategy: "disabled" | "systemd";
+  currentVersion: string;
+  platform: { target: string; os: string; arch: string };
+  checkedAt: number;
+  latest: LatestRelease | null;
+  job: UpdateJob | null;
+};
+
+const activeStatuses = new Set<JobStatus>([
+  "queued",
+  "downloading",
+  "verifying",
+  "staged",
+  "backing_up",
+  "applying",
+]);
+
+const pollableStatuses = new Set<JobStatus>([
+  "queued",
+  "downloading",
+  "verifying",
+  "backing_up",
+  "applying",
+]);
+
+const statusLabels: Record<JobStatus, string> = {
+  queued: "等待系统调度",
+  downloading: "下载更新包中",
+  verifying: "校验发布包完整性",
+  staged: "更新包就绪，待应用",
+  backing_up: "备份数据与附件快照",
+  applying: "原子切换与重启服务",
+  completed: "更新成功",
+  failed: "更新失败",
+  cancelled: "已取消",
+};
 
 function timestamp(value: number | string | null | undefined): number | null {
   if (value === null || value === undefined || value === "") return null;
@@ -20,10 +126,117 @@ function timestamp(value: number | string | null | undefined): number | null {
   if (!Number.isFinite(n)) return null;
   return n < 10_000_000_000 ? n * 1000 : n;
 }
-function notesFor(latest: LatestRelease): string | null {
+
+function notesFor(latest?: LatestRelease | null): string | null {
+  if (!latest) return null;
   const value = latest.notes ?? latest.releaseNotes ?? latest.body;
   return typeof value === "string" && value.trim() ? value.trim() : null;
 }
+
+/**
+ * Render the small, predictable Markdown subset used by release notes.
+ *
+ * Release notes are already reduced to text on the server. Keeping this
+ * renderer text-only (no HTML parsing/innerHTML) means a malformed or
+ * untrusted note can never inject markup into the update console.
+ */
+function inlineMarkdown(value: string): ReactNode[] {
+  const tokens = /(`[^`\n]+`|\*\*[^*\n]+\*\*|\[[^\]\n]+\]\((?:https?:\/\/)[^)\s]+\))/g;
+  const result: ReactNode[] = [];
+  let last = 0;
+  let match: RegExpExecArray | null;
+  while ((match = tokens.exec(value))) {
+    if (match.index > last) result.push(value.slice(last, match.index));
+    const token = match[0];
+    if (token.startsWith("**")) {
+      result.push(<strong key={`strong-${match.index}`}>{token.slice(2, -2)}</strong>);
+    } else if (token.startsWith("`")) {
+      result.push(<code key={`code-${match.index}`}>{token.slice(1, -1)}</code>);
+    } else {
+      const link = /^\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)$/.exec(token);
+      if (link) {
+        result.push(
+          <a key={`link-${match.index}`} href={link[2]} target="_blank" rel="noreferrer">
+            {link[1]}
+          </a>,
+        );
+      } else {
+        result.push(token);
+      }
+    }
+    last = match.index + token.length;
+  }
+  if (last < value.length) result.push(value.slice(last));
+  return result;
+}
+
+function MarkdownNotes({ value, compact = false }: { value: string; compact?: boolean }) {
+  const lines = value.replace(/\r\n?/g, "\n").split("\n");
+  const blocks: ReactNode[] = [];
+  let paragraph: string[] = [];
+  let list: string[] = [];
+  let code: string[] | null = null;
+
+  const flushParagraph = () => {
+    if (!paragraph.length) return;
+    blocks.push(<p key={`p-${blocks.length}`}>{inlineMarkdown(paragraph.join(" ").trim())}</p>);
+    paragraph = [];
+  };
+  const flushList = () => {
+    if (!list.length) return;
+    blocks.push(
+      <ul key={`ul-${blocks.length}`}>
+        {list.map((item, index) => <li key={`${index}-${item}`}>{inlineMarkdown(item)}</li>)}
+      </ul>,
+    );
+    list = [];
+  };
+
+  lines.forEach((line, index) => {
+    if (code) {
+      if (line.trim().startsWith("```")) {
+        blocks.push(<pre key={`pre-${index}`}><code>{code.join("\n")}</code></pre>);
+        code = null;
+      } else code.push(line);
+      return;
+    }
+    if (line.trim().startsWith("```")) {
+      flushParagraph();
+      flushList();
+      code = [];
+      return;
+    }
+    const heading = /^(#{1,3})\s+(.+)$/.exec(line.trim());
+    if (heading) {
+      flushParagraph();
+      flushList();
+      const level = heading[1]!.length;
+      const Heading = `h${level + 2}` as "h3" | "h4" | "h5";
+      blocks.push(<Heading key={`h-${index}`}>{inlineMarkdown(heading[2]!)}</Heading>);
+      return;
+    }
+    const item = /^[-*+]\s+(.+)$/.exec(line.trim());
+    if (item) {
+      flushParagraph();
+      list.push(item[1]!);
+      return;
+    }
+    if (!line.trim()) {
+      flushParagraph();
+      flushList();
+      return;
+    }
+    flushList();
+    paragraph.push(line.trim());
+  });
+  const unfinishedCode = code as string[] | null;
+  if (unfinishedCode) blocks.push(<pre key={`pre-${blocks.length}`}><code>{unfinishedCode.join("\n")}</code></pre>);
+  flushParagraph();
+  flushList();
+
+  return <div className={`tn-markdown-notes${compact ? " tn-markdown-notes-compact" : ""}`}>{blocks}</div>;
+}
+
 function bytesText(value: number | null | undefined): string {
   if (!Number.isFinite(value) || !value || value < 0) return "0 B";
   if (value >= 1024 * 1024 * 1024) return `${(value / 1024 / 1024 / 1024).toFixed(1)} GB`;
@@ -31,12 +244,26 @@ function bytesText(value: number | null | undefined): string {
   if (value >= 1024) return `${(value / 1024).toFixed(1)} KB`;
   return `${Math.round(value)} B`;
 }
+
 function speedText(value: number | null | undefined): string {
-  return value && value > 0 ? `${bytesText(value)}/s` : "计算中";
+  return value && value > 0 ? `${bytesText(value)}/s` : "计算中…";
 }
 
-export default function UpdatePage({ timezone = "Asia/Shanghai", notify }: { timezone?: string; notify?: Notify }) {
-  const [info, setInfo] = useState<UpdateInfo | null>(null);
+export default function UpdatePage({
+  timezone = "Asia/Shanghai",
+  notify,
+}: {
+  timezone?: string;
+  notify?: Notify;
+}) {
+  // Mock Mode switcher: "live" or specific scenario key
+  const [mockScenario, setMockScenario] = useState<"live" | MockScenario>("live");
+  const mockTimer = useRef<number | null>(null);
+  const [mockCatalog, setMockCatalog] = useState<Record<MockScenario, MockUpdateState> | null>(null);
+
+  // Live state
+  const [liveInfo, setLiveInfo] = useState<UpdateInfo | null>(null);
+  const [mockInfoState, setMockInfoState] = useState<UpdateInfo | null>(null);
   const [loading, setLoading] = useState(true);
   const [checking, setChecking] = useState(false);
   const [error, setError] = useState("");
@@ -45,92 +272,778 @@ export default function UpdatePage({ timezone = "Asia/Shanghai", notify }: { tim
   const [confirmAction, setConfirmAction] = useState<"download" | "apply">("download");
   const [actionBusy, setActionBusy] = useState(false);
   const [reloadReady, setReloadReady] = useState(false);
+  const [showNotesDialog, setShowNotesDialog] = useState(false);
   const [now, setNow] = useState(() => Date.now());
+
   const announced = useRef<string | null>(null);
   const checkInFlight = useRef(false);
   const actionInFlight = useRef(false);
   const disconnected = useRef(false);
   const recoveredNotice = useRef(false);
 
-  const load = async () => { setLoading(true); setError(""); try { setInfo(await api<UpdateInfo>("/api/update/status")); } catch (e) { setError((e as Error).message); } finally { setLoading(false); } };
-  useEffect(() => { void load(); }, []);
-  const job = info?.job;
-  const applyQueuedAt = timestamp(job?.applyQueuedAt);
-  const restartAt = timestamp(job?.restartDeadline)
-    ?? timestamp(job?.restartAt)
-    ?? timestamp(job?.expectedRecoveryAt)
-    ?? (job?.operation === "apply" && applyQueuedAt ? applyQueuedAt + (job.restartWindowSeconds ?? 30) * 1000 : null)
-    ?? (job?.status === "applying" && job.updatedAt ? timestamp(job.updatedAt)! + 30_000 : null);
-  const restartSeconds = restartAt ? Math.max(0, Math.ceil((restartAt - now) / 1000)) : null;
-  useEffect(() => { if (!restartAt) return; const timer = window.setInterval(() => setNow(Date.now()), 1000); return () => window.clearInterval(timer); }, [restartAt]);
+  // Active info depending on mock vs live
+  const isMock = MOCK_PREVIEW_ENABLED && mockScenario !== "live" && Boolean(mockCatalog);
+  const selectedMock = mockScenario !== "live" ? mockCatalog?.[mockScenario] : undefined;
+  const info = isMock && selectedMock ? (mockInfoState ?? selectedMock.info) : liveInfo;
+
+  // Handle mock scenario change
+  const handleScenarioChange = (scenario: "live" | MockScenario) => {
+    setMockScenario(scenario);
+    if (mockTimer.current !== null) {
+      window.clearTimeout(mockTimer.current);
+      mockTimer.current = null;
+    }
+    if (scenario !== "live") {
+      const next = mockCatalog?.[scenario];
+      if (!next) return;
+      setMockInfoState(JSON.parse(JSON.stringify(next.info)));
+      notify?.(`已切换至 Mock 场景：${next.title}`, "info");
+    } else {
+      setMockInfoState(null);
+      notify?.("已切回真实后端模式", "info");
+    }
+  };
+
+  useEffect(() => () => {
+    if (mockTimer.current !== null) window.clearTimeout(mockTimer.current);
+  }, []);
 
   useEffect(() => {
-    const shouldPoll = Boolean(job && (pollable.has(job.status) || (job.status === "staged" && job.operation === "apply")));
-    if (!shouldPoll || !job) { setPollError(""); return; }
-    let disposed = false; let timer: number | undefined; let failures = 0;
-    const schedule = (delay: number) => { timer = window.setTimeout(() => void poll(), delay); };
+    if (!import.meta.env.DEV) return;
+    let disposed = false;
+    void import("./mockData").then(({ MOCK_SCENARIOS }) => {
+      if (!disposed) setMockCatalog(MOCK_SCENARIOS);
+    });
+    return () => {
+      disposed = true;
+    };
+  }, []);
+
+  const load = async () => {
+    if (isMock) return;
+    setLoading(true);
+    setError("");
+    try {
+      setLiveInfo(await api<UpdateInfo>("/api/update/status"));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isMock) void load();
+    else setLoading(false);
+  }, [isMock]);
+
+  const job = info?.job;
+  const applyQueuedAt = timestamp(job?.applyQueuedAt);
+  const restartAt =
+    timestamp(job?.restartDeadline) ??
+    timestamp(job?.restartAt) ??
+    timestamp(job?.expectedRecoveryAt) ??
+    (job?.operation === "apply" && applyQueuedAt
+      ? applyQueuedAt + (job.restartWindowSeconds ?? 30) * 1000
+      : null) ??
+    (job?.status === "applying" && job.updatedAt ? timestamp(job.updatedAt)! + 30_000 : null);
+
+  const restartSeconds = restartAt ? Math.max(0, Math.ceil((restartAt - now) / 1000)) : null;
+
+  useEffect(() => {
+    if (!restartAt) return;
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [restartAt]);
+
+  // Live polling effect
+  useEffect(() => {
+    if (isMock) return;
+    const shouldPoll = Boolean(
+      job && (pollableStatuses.has(job.status) || (job.status === "staged" && job.operation === "apply"))
+    );
+    if (!shouldPoll || !job) {
+      setPollError("");
+      return;
+    }
+    let disposed = false;
+    let timer: number | undefined;
+    let failures = 0;
+    const schedule = (delay: number) => {
+      timer = window.setTimeout(() => void poll(), delay);
+    };
+
     const poll = async () => {
       try {
         const result = await api<{ job: UpdateJob }>(`/api/update/jobs/${job.id}`);
         if (disposed) return;
         failures = 0;
-        if (disconnected.current && !recoveredNotice.current) { recoveredNotice.current = true; notify?.("服务已恢复，更新状态已刷新", "success"); }
-        disconnected.current = false; setPollError("");
-        setInfo(current => current ? { ...current, job: result.job } : current);
-        if (result.job.status === "completed" && announced.current !== result.job.id) { announced.current = result.job.id; setReloadReady(true); notify?.("更新完成，请重新加载页面", "success"); }
-        if (pollable.has(result.job.status) || (result.job.status === "staged" && result.job.operation === "apply")) schedule(1500);
+        if (disconnected.current && !recoveredNotice.current) {
+          recoveredNotice.current = true;
+          notify?.("服务已恢复，更新状态已刷新", "success");
+        }
+        disconnected.current = false;
+        setPollError("");
+        setLiveInfo((current) => (current ? { ...current, job: result.job } : current));
+        if (result.job.status === "completed" && announced.current !== result.job.id) {
+          announced.current = result.job.id;
+          setReloadReady(true);
+          notify?.("更新完成，请重新加载页面", "success");
+        }
+        if (
+          pollableStatuses.has(result.job.status) ||
+          (result.job.status === "staged" && result.job.operation === "apply")
+        ) {
+          schedule(1500);
+        }
       } catch {
         if (disposed) return;
-        failures += 1; disconnected.current = true; recoveredNotice.current = false;
-        setPollError(`服务暂时不可用${restartSeconds !== null ? `，预计 ${restartSeconds} 秒后恢复` : "，页面会自动重试"}。更新任务仍在后台运行。`);
-        schedule(Math.min(1500 * (2 ** Math.min(failures, 3)), 12_000));
+        failures += 1;
+        disconnected.current = true;
+        recoveredNotice.current = false;
+        setPollError(
+          `服务暂时不可用${
+            restartSeconds !== null ? `，预计 ${restartSeconds} 秒后恢复` : "，页面会自动重试"
+          }。更新任务仍在后台运行。`
+        );
+        schedule(Math.min(1500 * 2 ** Math.min(failures, 3), 12_000));
       }
     };
     void poll();
-    return () => { disposed = true; if (timer !== undefined) window.clearTimeout(timer); };
-  }, [job?.id, job?.status, job?.operation, notify]);
+    return () => {
+      disposed = true;
+      if (timer !== undefined) window.clearTimeout(timer);
+    };
+  }, [isMock, job?.id, job?.status, job?.operation, notify]);
 
+  // Check update handler
   const check = async () => {
+    if (isMock) {
+      setChecking(true);
+      mockTimer.current = window.setTimeout(() => {
+        mockTimer.current = null;
+        setChecking(false);
+        notify?.("Mock：检查完成，已是最新配置状态", "success");
+      }, 600);
+      return;
+    }
     if (checkInFlight.current) return;
-    checkInFlight.current = true; setChecking(true); setError("");
+    checkInFlight.current = true;
+    setChecking(true);
+    setError("");
     try {
-      const result = await api<Omit<UpdateInfo, "job"> & { job?: UpdateJob | null }>("/api/update/check", { method: "POST", body: "{}" });
-      setInfo(current => ({ ...result, job: result.job ?? current?.job ?? null })); notify?.(result.latest?.isNewer ? "发现新版本" : "当前已是最新版本", "success");
+      const result = await api<Omit<UpdateInfo, "job"> & { job?: UpdateJob | null }>("/api/update/check", {
+        method: "POST",
+        body: "{}",
+      });
+      setLiveInfo((current) => ({ ...result, job: result.job ?? current?.job ?? null }));
+      notify?.(result.latest?.isNewer ? "发现新版本" : "当前已是最新版本", "success");
     } catch (caught) {
-      if (caught instanceof ApiError && caught.code === "UPDATE_RATE_LIMITED") { try { await load(); notify?.(`已显示最近一次检查结果${caught.retryAfter ? `，请 ${caught.retryAfter} 秒后再检查` : "，请稍后再检查"}`, "info"); return; } catch { /* fall through */ } }
+      if (caught instanceof ApiError && caught.code === "UPDATE_RATE_LIMITED") {
+        try {
+          await load();
+          notify?.(
+            `已显示最近一次检查结果${caught.retryAfter ? `，请 ${caught.retryAfter} 秒后再检查` : "，请稍后再检查"}`,
+            "info"
+          );
+          return;
+        } catch {
+          /* fall through */
+        }
+      }
       setError((caught as Error).message);
-    } finally { checkInFlight.current = false; setChecking(false); }
+    } finally {
+      checkInFlight.current = false;
+      setChecking(false);
+    }
   };
+
+  // Submit download or apply action
   const submitAction = async () => {
-    if (!confirmVersion || actionInFlight.current) return;
-    actionInFlight.current = true; setActionBusy(true); setError("");
+    if (!confirmVersion) return;
+
+    if (isMock) {
+      setActionBusy(true);
+      mockTimer.current = window.setTimeout(() => {
+        mockTimer.current = null;
+        setActionBusy(false);
+        setConfirmVersion(null);
+        if (confirmAction === "download") {
+          handleScenarioChange("downloading_30");
+          notify?.("Mock：开始模拟下载，状态已流转至 [下载中]", "info");
+        } else {
+          handleScenarioChange("applying");
+          notify?.("Mock：开始模拟平滑重启，状态已流转至 [应用中/倒计时]", "info");
+        }
+      }, 700);
+      return;
+    }
+
+    if (actionInFlight.current) return;
+    actionInFlight.current = true;
+    setActionBusy(true);
+    setError("");
     try {
       const endpoint = confirmAction === "download" ? "/api/update/download" : "/api/update/apply";
-      const body = confirmAction === "download" ? { version: confirmVersion, confirm: true } : { jobId: job?.id, version: confirmVersion, confirm: true };
-      const result = await api<{ job: UpdateJob }>(endpoint, { method: "POST", body: JSON.stringify(body) });
-      setConfirmVersion(null); setReloadReady(false); setInfo(current => current ? { ...current, job: result.job } : current); notify?.(confirmAction === "download" ? "更新包下载已开始" : "更新已开始，服务会短暂重启", "info");
-    } catch (caught) { setError((caught as Error).message); } finally { actionInFlight.current = false; setActionBusy(false); }
+      const body =
+        confirmAction === "download"
+          ? { version: confirmVersion, confirm: true }
+          : { jobId: job?.id, version: confirmVersion, confirm: true };
+      const result = await api<{ job: UpdateJob }>(endpoint, {
+        method: "POST",
+        body: JSON.stringify(body),
+      });
+      setConfirmVersion(null);
+      setReloadReady(false);
+      setLiveInfo((current) => (current ? { ...current, job: result.job } : current));
+      notify?.(
+        confirmAction === "download" ? "更新包下载已开始" : "更新已开始，服务会短暂重启",
+        "info"
+      );
+    } catch (caught) {
+      setError((caught as Error).message);
+    } finally {
+      actionInFlight.current = false;
+      setActionBusy(false);
+    }
   };
 
-  const latest = info?.latest; const hasActiveJob = Boolean(job && active.has(job.status));
+  const latest = info?.latest;
+  const hasActiveJob = Boolean(job && activeStatuses.has(job.status));
   const sameCompleted = Boolean(job?.status === "completed" && latest && job.version === latest.version);
-  const canDownload = Boolean(info?.strategy === "systemd" && latest?.isNewer && latest.compatible && latest.integrityReady && !hasActiveJob && !sameCompleted && (!job || job.version !== latest.version || job.status === "failed" || job.status === "cancelled"));
-  const canApply = Boolean(info?.strategy === "systemd" && latest?.isNewer && latest.compatible && latest.integrityReady && job?.operation === "download" && job.status === "staged" && job.version === latest.version);
-  const progress = job?.status === "staged" && job.operation === "download"
-    ? 100
-    : job?.status === "downloading" && job.sizeBytes && job.downloadedBytes !== null && job.downloadedBytes !== undefined
-    ? Math.min(99, Math.max(8, Math.round(job.downloadedBytes / job.sizeBytes * 100)))
-    : job ? ({ queued: 8, downloading: 28, verifying: 48, staged: 65, backing_up: 80, applying: 92 } as Partial<Record<JobStatus, number>>)[job.status] ?? 100 : 0;
-  const notes = latest ? notesFor(latest) : null;
+  const canDownload = Boolean(
+    info?.strategy === "systemd" &&
+      latest?.isNewer &&
+      latest.compatible &&
+      latest.integrityReady &&
+      !hasActiveJob &&
+      !sameCompleted
+  );
+  const canApply = Boolean(
+    info?.strategy === "systemd" &&
+      job?.status === "staged" &&
+      job.operation === "download" &&
+      latest &&
+      job.version === latest.version
+  );
 
-  return <Page title="系统更新" subtitle="检查受信任的 Release；更新前会校验文件并保护现有数据。" actions={<Button variant="outline" onClick={() => void check()} disabled={checking || loading} icon={<RefreshCw size={15} />}>{checking ? "检查中…" : "检查更新"}</Button>}>
-    {error && <ErrorBanner message={error} onRetry={() => void load()} />}{pollError && <ErrorBanner message={pollError} />}
-    {loading ? <div className="tn-empty" role="status" aria-live="polite">正在读取版本信息…</div> : info && <>
-      <div className="tn-update-grid"><Surface className="tn-update-block"><Server size={20} /><span className="tn-eyebrow">当前版本</span><strong className="tn-update-value">v{info.currentVersion}</strong><small>运行平台：{info.platform.target}</small></Surface><Surface className="tn-update-block"><ShieldCheck size={20} /><span className="tn-eyebrow">更新方式</span><strong>{info.strategy === "systemd" ? "后台一键更新" : "手动命令行更新"}</strong><small>{info.strategy === "systemd" ? (info.configured ? "由 systemd 更新服务执行" : "尚未配置发布源") : "当前安装未启用后台更新"}</small></Surface></div>
-      {latest ? <Surface className="tn-update-release"><div className="tn-update-release-head"><div><span className="tn-eyebrow">最新 Release</span><h2>{latest.releaseName || latest.tagName || `v${latest.version}`}</h2>{latest.publishedAt && <small>发布时间：{dateText(Date.parse(latest.publishedAt), timezone)}</small>}</div><Tag theme={latest.isNewer ? "primary" : "success"}>{latest.isNewer ? "有新版本" : "已是最新"}</Tag></div>{notes && <div className="tn-release-notes"><span className="tn-eyebrow">Release notes</span><div>{notes}</div></div>}<div className="tn-facts"><div><span>平台文件</span><strong>{latest.compatible ? latest.assetName : "无匹配文件"}</strong></div><div><span>完整性</span><strong className={latest.integrityReady ? "text-success" : "text-danger"}>{latest.integrityReady ? "SHA-256 + 签名可验证" : "不可验证"}</strong></div><div><span>文件大小</span><strong>{latest.assetSize ? `${(latest.assetSize / 1024 / 1024).toFixed(1)} MB` : "-"}</strong></div></div>{latest.isNewer && !latest.compatible && <div className="tn-inline-error"><AlertCircle size={16} />当前平台没有可安装的 Release 文件。</div>}{latest.isNewer && latest.compatible && !latest.integrityReady && <div className="tn-inline-error"><AlertCircle size={16} />发布文件缺少完整校验，已禁用更新。</div>}<div className="tn-page-actions">{canDownload && <Button theme="primary" onClick={() => { setConfirmAction("download"); setConfirmVersion(latest.version); }} disabled={actionBusy} loading={actionBusy && confirmAction === "download"} icon={<Download size={16} />}>下载更新包</Button>}{canApply && <Button theme="primary" onClick={() => { setConfirmAction("apply"); setConfirmVersion(latest.version); }} disabled={actionBusy} loading={actionBusy && confirmAction === "apply"} icon={<Zap size={16} />}>立即更新</Button>}{reloadReady && <Button theme="primary" onClick={() => window.location.reload()}>重新加载</Button>}</div></Surface> : <div className="tn-empty">点击“检查更新”获取最新 Release。</div>}
-      {!info.configured && <div className="tn-update-explainer"><Terminal size={17} /><div><strong>当前为手动更新模式</strong><p>源码安装默认不启用后台更新。需要更新时，在服务器拉取对应 Release 后重新构建并重启服务；安装器部署并配置 systemd 后，才会显示后台一键更新。</p></div></div>}
-      {job && <Surface className="tn-update-release"><span className="tn-sr-only" aria-live="polite">更新任务状态：{labels[job.status]}{job.status === "downloading" ? `，已下载 ${progress}%` : ""}</span><div className="tn-update-release-head"><div><span className="tn-eyebrow">最近任务</span><h2>v{job.version}</h2></div><Tag theme={job.status === "completed" ? "success" : job.status === "failed" ? "danger" : "primary"}>{labels[job.status]}</Tag></div>{active.has(job.status) && <><div className="tn-progress" role="progressbar" aria-label="系统更新进度" aria-valuemin={0} aria-valuemax={100} aria-valuenow={progress}><span style={{ width: `${progress}%` }} /></div>{job.status === "downloading" ? <small>已下载 {bytesText(job.downloadedBytes)} / {bytesText(job.sizeBytes)}（{progress}%） · {speedText(job.downloadSpeedBps)}</small> : <small>{job.status === "staged" && job.operation === "download" ? "更新包已下载并校验，可以立即应用。" : job.status === "staged" && job.operation === "apply" ? "立即更新请求已提交，服务即将重启。" : "更新服务正在后台运行，页面会自动刷新状态。"}</small>}{restartSeconds !== null && (job.status === "applying" || disconnected.current) && <div className="tn-restart-countdown" role="status">服务正在重启，预计 {restartSeconds} 秒后恢复</div>}</>}{job.status === "failed" && job.errorMessage && <div className="tn-inline-error" role="alert">{job.errorMessage}</div>}{job.status === "completed" && <div className="tn-inline-info"><CheckCircle2 size={16} />新版本已通过健康检查，数据和附件保持不变。</div>}</Surface>}
-    </>}
-    <Dialog visible={Boolean(confirmVersion)} header={confirmAction === "download" ? "下载更新包" : "确认立即更新"} confirmBtn={{ content: confirmAction === "download" ? "开始下载" : "立即更新", theme: "primary", loading: actionBusy, disabled: actionBusy }} cancelBtn="取消" onClose={() => { if (!actionBusy) setConfirmVersion(null); }} onConfirm={() => void submitAction()} onCancel={() => { if (!actionBusy) setConfirmVersion(null); }}>{confirmAction === "download" ? `将下载并校验 v${confirmVersion}，完成后可选择立即更新。` : `将应用已下载的 v${confirmVersion}。服务会短暂重启，更新前会备份数据目录。`}</Dialog>
-  </Page>;
+  const notes = notesFor(latest);
+
+  // Download progress computation
+  const progress = useMemo(() => {
+    if (!job) return 0;
+    if (job.status === "staged" || job.status === "backing_up" || job.status === "applying" || job.status === "completed") {
+      return 100;
+    }
+    if (job.status === "downloading" && job.sizeBytes && job.downloadedBytes) {
+      return Math.min(100, Math.max(1, Math.round((job.downloadedBytes / job.sizeBytes) * 100)));
+    }
+    if (job.status === "verifying") return 99;
+    return 0;
+  }, [job]);
+
+  // Calculate active step for Stepper (0: Check -> 1: Download -> 2: Verify -> 3: Apply)
+  const currentStep = useMemo(() => {
+    if (!latest?.isNewer && (!job || job.status === "completed")) return 0;
+    if (job?.status === "downloading") return 1;
+    if (job?.status === "verifying") return 2;
+    if (job?.status === "staged" || job?.status === "backing_up" || job?.status === "applying") return 3;
+    if (job?.status === "completed") return 4;
+    return 1;
+  }, [latest?.isNewer, job]);
+
+  // Estimated remaining time for download
+  const etaSeconds = useMemo(() => {
+    if (
+      job?.status === "downloading" &&
+      job.sizeBytes &&
+      job.downloadedBytes &&
+      job.downloadSpeedBps &&
+      job.downloadSpeedBps > 0
+    ) {
+      const remainingBytes = job.sizeBytes - job.downloadedBytes;
+      if (remainingBytes <= 0) return 0;
+      return Math.ceil(remainingBytes / job.downloadSpeedBps);
+    }
+    return null;
+  }, [job]);
+
+  return (
+    <Page
+      eyebrow="运维与维护"
+      title="系统更新中心"
+      subtitle="管理 TallyNote 本地账本版本升级、下载验证与安全平滑重启"
+      actions={
+        <div className="tn-update-page-actions">
+          <Button
+            theme="default"
+            variant="outline"
+            onClick={() => void check()}
+            loading={checking}
+            disabled={checking || hasActiveJob}
+            icon={<RefreshCw size={15} />}
+          >
+            检查新版本
+          </Button>
+          {canDownload && (
+            <Button
+              theme="primary"
+              onClick={() => {
+                setConfirmAction("download");
+                setConfirmVersion(latest.version);
+              }}
+              disabled={actionBusy}
+              loading={actionBusy && confirmAction === "download"}
+              icon={<Download size={15} />}
+            >
+              下载更新包
+            </Button>
+          )}
+          {canApply && (
+            <Button
+              theme="primary"
+              onClick={() => {
+                setConfirmAction("apply");
+                setConfirmVersion(latest.version);
+              }}
+              disabled={actionBusy}
+              loading={actionBusy && confirmAction === "apply"}
+              icon={<Zap size={15} />}
+            >
+              立即应用更新
+            </Button>
+          )}
+          {reloadReady && (
+            <Button theme="success" onClick={() => window.location.reload()} icon={<CheckCircle2 size={15} />}>
+              更新就绪，刷新页面
+            </Button>
+          )}
+        </div>
+      }
+    >
+      {/* Local Mock Preview Console - Interactive controller */}
+      {MOCK_PREVIEW_ENABLED && mockCatalog && <Surface className="tn-mock-console">
+        <div className="tn-mock-console-header">
+          <div className="tn-mock-console-title">
+            <Sparkles size={16} className="text-brand" />
+            <strong>前端交互预览控制台 (Mock Preview Console)</strong>
+            <Tag theme={isMock ? "warning" : "primary"} size="small" variant="light">
+              {isMock ? "Mock 模拟预览中" : "真实后端模式"}
+            </Tag>
+          </div>
+          <small className="tn-mock-console-tip">
+            无需真实更新或升级，点击下方场景可立即体验 10 种不同生命周期与实时流光效果
+          </small>
+        </div>
+        <div className="tn-mock-scenario-chips">
+          <button
+            type="button"
+            className={`tn-scenario-chip ${mockScenario === "live" ? "active" : ""}`}
+            onClick={() => handleScenarioChange("live")}
+          >
+            <Server size={15} aria-hidden="true" />
+            <span>真实后端数据</span>
+          </button>
+          {Object.entries(mockCatalog).map(([key, item]) => (
+            <button
+              type="button"
+              key={key}
+              className={`tn-scenario-chip ${mockScenario === key ? "active" : ""}`}
+              onClick={() => handleScenarioChange(key as MockScenario)}
+              title={item.description}
+            >
+              {item.title}
+            </button>
+          ))}
+        </div>
+      </Surface>}
+
+      {error && <ErrorBanner message={error} onRetry={() => void load()} />}
+      {pollError && !error && (
+        <div className="tn-inline-warning" role="status">
+          <AlertCircle size={16} />
+          <span>{pollError}</span>
+        </div>
+      )}
+
+      {loading && !info && <div className="tn-empty">正在加载更新状态…</div>}
+
+      {info && (
+        <>
+          {/* Top 4 Metric Cards */}
+          <div className="tn-update-metrics-grid">
+            <Surface className="tn-metric-card">
+              <div className="tn-metric-content">
+                <span className="tn-metric-label">当前运行版本</span>
+                <div className="tn-metric-value">v{info.currentVersion}</div>
+                <div className="tn-metric-foot">
+                  {latest?.isNewer ? (
+                    <Tag theme="primary" size="small">可更新至 v{latest.version}</Tag>
+                  ) : (
+                    <Tag theme="success" size="small">已是最新版本</Tag>
+                  )}
+                </div>
+              </div>
+            </Surface>
+
+            <Surface className="tn-metric-card">
+              <div className="tn-metric-content">
+                <span className="tn-metric-label">运行目标架构</span>
+                <div className="tn-metric-value">{info.platform.target}</div>
+                <div className="tn-metric-foot">
+                  <small>{info.platform.os} / {info.platform.arch}</small>
+                </div>
+              </div>
+            </Surface>
+
+            <Surface className="tn-metric-card">
+              <div className="tn-metric-content">
+                <span className="tn-metric-label">更新守护方式</span>
+                <div className="tn-metric-value">
+                  {info.strategy === "systemd" ? "systemd 守护" : "手动源码模式"}
+                </div>
+                <div className="tn-metric-foot">
+                  <small>
+                    {info.strategy === "systemd"
+                      ? (info.configured ? "支持后台一键更新" : "尚未配置发布源")
+                      : "仅支持命令行维护"}
+                  </small>
+                </div>
+              </div>
+            </Surface>
+
+            <Surface className="tn-metric-card">
+              <div className="tn-metric-content">
+                <span className="tn-metric-label">最近一次检查</span>
+                <div className="tn-metric-value">
+                  {info.checkedAt ? dateText(info.checkedAt, timezone) : "未检查"}
+                </div>
+                <div className="tn-metric-foot">
+                  <small>数据源：Gitea Releases</small>
+                </div>
+              </div>
+            </Surface>
+          </div>
+
+          {/* Stepper Process Card */}
+          <Surface className="tn-stepper-surface">
+            <div className="tn-stepper-head">
+              <div>
+                <h3 className="tn-section-heading">版本升级流水线</h3>
+                <small className="tn-section-subheading">
+                  标准化发布流程：版本发现 → 校验签名与清单 → 安全暂存 → 原子切换并重启
+                </small>
+              </div>
+              {job && (
+                <Tag
+                  theme={
+                    job.status === "completed"
+                      ? "success"
+                      : job.status === "failed"
+                      ? "danger"
+                      : "primary"
+                  }
+                >
+                  {statusLabels[job.status as JobStatus] || job.status}
+                </Tag>
+              )}
+            </div>
+
+            <div className="tn-stepper-wrap">
+              <Steps current={currentStep} theme="default">
+                <StepItem title="检查新版" content="获取 Release 元数据" />
+                <StepItem title="下载更新包" content="安全暂存 tar.gz 归档" />
+                <StepItem title="完整性校验" content="SHA-256 + 签名核验" />
+                <StepItem title="立即应用" content="原子切换与平滑重启" />
+              </Steps>
+            </div>
+
+            {/* Active Download Progress Bar & Speed */}
+            {job && activeStatuses.has(job.status) && (
+              <div className="tn-job-runtime-panel">
+                <div className="tn-job-runtime-header">
+                  <div className="tn-job-status-badge">
+                    <span className="tn-pulse-dot" />
+                    <strong>{statusLabels[job.status as JobStatus] || job.status}</strong>
+                    {job.status === "downloading" && (
+                      <span className="tn-job-subtext">
+                        （{bytesText(job.downloadedBytes)} / {bytesText(job.sizeBytes)} · {progress}%）
+                      </span>
+                    )}
+                  </div>
+                  {job.status === "downloading" && (
+                    <div className="tn-speed-indicator">
+                      <span className="tn-speed-badge"><Zap size={14} aria-hidden="true" /> {speedText(job.downloadSpeedBps)}</span>
+                      {etaSeconds !== null && (
+                        <span className="tn-eta-badge">预估剩余 {etaSeconds} 秒</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {/* Progress Bar */}
+                <div
+                  className="tn-progress-stream"
+                  role="progressbar"
+                  aria-label="系统更新进度"
+                  aria-valuenow={progress}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                >
+                  <div className="tn-progress-stream-bar" style={{ width: `${progress}%` }} />
+                </div>
+
+                {/* Status-specific descriptions */}
+                <div className="tn-job-runtime-desc">
+                  {job.status === "downloading" && (
+                    <span>正在从受信仓库高速拉取发布包，数据经过 TLS 1.3 传输加密，不影响前台正常记账。</span>
+                  )}
+                  {job.status === "verifying" && (
+                    <span>已下载完成，正在对发布包进行 SHA-256 哈希比对与 Ed25519 签名真伪验证…</span>
+                  )}
+                  {job.status === "staged" && (
+                    <span className="text-success">
+                      <CheckCircle2 size={15} aria-hidden="true" />
+                      <span>更新包已下载并通过全部完整性校验。随时可以点击右上方【立即应用更新】。</span>
+                    </span>
+                  )}
+                  {job.status === "backing_up" && (
+                    <span>升级前安全保护中：正在自动为 SQLite 数据库与凭据附件生成安全快照备份…</span>
+                  )}
+                  {job.status === "applying" && (
+                    <div className="tn-restarting-banner">
+                      <div className="tn-restarting-spinner">
+                        <RefreshCw size={18} className="tn-spin" />
+                      </div>
+                      <div>
+                        <strong>服务正在平滑重启并执行健康检查…</strong>
+                        {restartSeconds !== null && (
+                          <div className="tn-restart-countdown">
+                            预计 {restartSeconds} 秒后自动恢复，前端正保持心跳轮询，无需手动刷新。
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Error banner */}
+            {job?.status === "failed" && job.errorMessage && (
+              <div className="tn-inline-error" role="alert">
+                <ShieldAlert size={16} />
+                <span>{job.errorMessage}</span>
+              </div>
+            )}
+
+            {/* Success banner */}
+            {job?.status === "completed" && (
+              <div className="tn-inline-info">
+                <CheckCircle2 size={16} />
+                <span>更新成功完成！新版本已通过内置端点健康检查，账本数据与附件完整无损。</span>
+              </div>
+            )}
+          </Surface>
+
+          {/* Release Details Section */}
+          {latest ? (
+            <Surface className="tn-release-surface">
+              <div className="tn-release-header">
+                <div>
+                  <div className="tn-release-tag-row">
+                    <span className="tn-eyebrow">发布版本</span>
+                    <Tag theme={latest.isNewer ? "primary" : "success"} variant="light-outline">
+                      {latest.isNewer ? "发现新版本" : "已是最新版本"}
+                    </Tag>
+                  </div>
+                  <h2 className="tn-release-title">
+                    {latest.releaseName || latest.tagName || `v${latest.version}`}
+                  </h2>
+                  {latest.publishedAt && (
+                    <small className="tn-release-time">
+                      发布于：{dateText(Date.parse(latest.publishedAt), timezone)}
+                    </small>
+                  )}
+                </div>
+                <div className="tn-release-header-actions">
+                  {notes && (
+                    <Button
+                      variant="outline"
+                      size="medium"
+                      onClick={() => setShowNotesDialog(true)}
+                      icon={<FileCode size={15} />}
+                    >
+                      查看完整更新日志
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* Release Notes Preview snippet */}
+              {notes && (
+                <div className="tn-release-notes-box">
+                  <div className="tn-release-notes-heading">
+                    <span>更新内容概览</span>
+                  </div>
+                  <div className="tn-release-notes-content">
+                    <MarkdownNotes value={notes} compact />
+                  </div>
+                </div>
+              )}
+
+              {/* Integrity & compatibility facts grid */}
+              <div className="tn-facts-grid">
+                <div className="tn-fact-item">
+                  <span className="tn-fact-label">目标平台发布包</span>
+                  <strong className="tn-fact-value">{latest.compatible ? latest.assetName : "无匹配架构包"}</strong>
+                  <small className="tn-fact-hint">
+                    {latest.compatible ? "与当前操作系统及 CPU 架构完全匹配" : "请在对应架构 runner 上单独构建"}
+                  </small>
+                </div>
+
+                <div className="tn-fact-item">
+                  <span className="tn-fact-label">安全完整性核验</span>
+                  <strong
+                    className={`tn-fact-value ${
+                      latest.integrityReady ? "text-success" : "text-danger"
+                    }`}
+                  >
+                    {latest.integrityReady ? "SHA-256 + 签名就绪" : "未通过或缺少清单"}
+                  </strong>
+                  <small className="tn-fact-hint">
+                    {latest.integrityReady ? "官方发布通道受保护资产" : "缺少完整校验清单"}
+                  </small>
+                </div>
+
+                <div className="tn-fact-item">
+                  <span className="tn-fact-label">发布包体积</span>
+                  <strong className="tn-fact-value">
+                    {latest.assetSize ? bytesText(latest.assetSize) : "-"}
+                  </strong>
+                  <small className="tn-fact-hint">包含独立运行时与全量生产静态资源</small>
+                </div>
+              </div>
+
+              {/* Action bar inside release card */}
+              <div className="tn-release-card-actions">
+                {canDownload && (
+                  <Button
+                    theme="primary"
+                    size="large"
+                    onClick={() => {
+                      setConfirmAction("download");
+                      setConfirmVersion(latest.version);
+                    }}
+                    disabled={actionBusy}
+                    loading={actionBusy && confirmAction === "download"}
+                    icon={<Download size={16} />}
+                  >
+                    下载更新包 ({bytesText(latest.assetSize)})
+                  </Button>
+                )}
+                {canApply && (
+                  <Button
+                    theme="primary"
+                    size="large"
+                    onClick={() => {
+                      setConfirmAction("apply");
+                      setConfirmVersion(latest.version);
+                    }}
+                    disabled={actionBusy}
+                    loading={actionBusy && confirmAction === "apply"}
+                    icon={<Zap size={16} />}
+                  >
+                    立即更新至 v{latest.version}
+                  </Button>
+                )}
+                {reloadReady && (
+                  <Button theme="success" size="large" onClick={() => window.location.reload()}>
+                    重新加载控制台
+                  </Button>
+                )}
+              </div>
+            </Surface>
+          ) : (
+            <Surface className="tn-empty-surface">
+              <div className="tn-empty-content">
+                <RefreshCw size={28} className="text-muted" />
+                <p>暂无待显示的 Release 信息，可点击右上角“检查新版本”主动拉取。</p>
+              </div>
+            </Surface>
+          )}
+
+          {/* Manual source warning if not systemd */}
+          {!info.configured && (
+            <div className="tn-update-explainer">
+              <div>
+                <strong>当前为手动开发/源码维护模式</strong>
+                <p>
+                  检测到当前以开发或无守护模式运行。生产服务器使用 curl / systemd 安装并部署后，将自动启用此处的一键全自动在线更新。
+                </p>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Confirmation Dialog */}
+      <Dialog
+        visible={Boolean(confirmVersion)}
+        header={confirmAction === "download" ? "确认下载更新包" : "确认立即更新并平滑重启"}
+        confirmBtn={{
+          content: confirmAction === "download" ? "确认下载" : "立即更新",
+          theme: "primary",
+          loading: actionBusy,
+          disabled: actionBusy,
+        }}
+        cancelBtn="取消"
+        onClose={() => {
+          if (!actionBusy) setConfirmVersion(null);
+        }}
+        onConfirm={() => void submitAction()}
+        onCancel={() => {
+          if (!actionBusy) setConfirmVersion(null);
+        }}
+      >
+        <div className="tn-confirm-dialog-content">
+          {confirmAction === "download" ? (
+            <>
+              <p>
+                即将从官方 Release 源拉取 <strong>v{confirmVersion}</strong> 安装包。
+              </p>
+              <p className="text-secondary">
+                下载将在后台独立执行，并自动校验 SHA-256 哈希清单与 Ed25519 签名，不会中断当前记账工作。
+              </p>
+            </>
+          ) : (
+            <>
+              <p>
+                即将应用已就绪的 <strong>v{confirmVersion}</strong> 更新包。
+              </p>
+              <div className="tn-update-safety-tips">
+                <div>• 系统更新前将自动备份当前 SQLite 数据库与附件目录；</div>
+                <div>• 服务将短暂重启约 15~30 秒，期间页面保持心跳重连并在完成后平滑刷新；</div>
+                <div>• 切换操作具备原子性，若健康检查异常将自动回退至当前版本。</div>
+              </div>
+            </>
+          )}
+        </div>
+      </Dialog>
+
+      {/* Full Release Notes Dialog */}
+      <Dialog
+        visible={showNotesDialog}
+        header={`${latest?.releaseName || latest?.tagName || `v${latest?.version}`} 更新日志`}
+        cancelBtn={null}
+        confirmBtn={{ content: "关闭", theme: "default" }}
+        onConfirm={() => setShowNotesDialog(false)}
+        onClose={() => setShowNotesDialog(false)}
+      >
+        <div className="tn-full-notes-modal">
+          {notes ? <MarkdownNotes value={notes} /> : <p className="text-secondary">暂无更新日志。</p>}
+        </div>
+      </Dialog>
+    </Page>
+  );
 }
diff --git a/web-next/src/pages/update/mockData.ts b/web-next/src/pages/update/mockData.ts
new file mode 100644
index 0000000..7b09a1a
--- /dev/null
+++ b/web-next/src/pages/update/mockData.ts
@@ -0,0 +1,283 @@
+export type MockScenario =
+  | "latest"          // 已是最新
+  | "available"       // 发现新版本（待下载）
+  | "downloading_30"  // 下载中 30%
+  | "downloading_85"  // 下载中 85% + 高速
+  | "staged"          // 下载完成已校验，待立即更新
+  | "backing_up"      // 正在备份数据
+  | "applying"        // 正在原子切换并重启中（倒计时）
+  | "completed"       // 更新完成
+  | "failed_verify"   // 完整性校验失败
+  | "disabled";       // 手动模式未配置源
+
+export interface MockUpdateState {
+  info: any;
+  title: string;
+  description: string;
+}
+
+export const MOCK_SCENARIOS: Record<MockScenario, MockUpdateState> = {
+  latest: {
+    title: "版本健康（已是最新）",
+    description: "展示当前运行版本已是最新，各项指标正常，无待处理任务",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 600_000,
+      latest: {
+        version: "1.1.22",
+        tagName: "v1.1.22",
+        releaseName: "v1.1.22 稳定版",
+        publishedAt: new Date(Date.now() - 3600_000 * 24).toISOString(),
+        compatible: true,
+        integrityReady: true,
+        signatureReady: true,
+        isNewer: false,
+        assetName: "tallynote-1.1.22-linux-x64-glibc.tar.gz",
+        assetSize: 120540160,
+        notes: "### TallyNote 1.1.22\n\n- 优化反向代理下登录兼容性\n- 增强安全审计与防重放机制\n- 前端组件性能深度优化",
+      },
+      job: null,
+    },
+  },
+  available: {
+    title: "发现新版本（待下载）",
+    description: "检查到官方发布了更高版本，显示更新日志与文件校验信息，可点击下载",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 60_000,
+      latest: {
+        version: "1.1.23",
+        tagName: "v1.1.23",
+        releaseName: "v1.1.23 重大更新",
+        publishedAt: new Date(Date.now() - 1800_000).toISOString(),
+        compatible: true,
+        integrityReady: true,
+        signatureReady: true,
+        isNewer: true,
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        assetSize: 121000000,
+        notes: "### TallyNote 1.1.23\n\n- 【新功能】系统更新中心全面重构，支持动态速率流光进度条与平滑重启倒计时\n- 【交互】优化抽屉展开动效与手机端自适应导航\n- 【安全】发布包支持双重 Ed25519 签名与 SHA-256 清单交叉校验",
+      },
+      job: null,
+    },
+  },
+  downloading_30: {
+    title: "下载更新中（进度 38%）",
+    description: "展示真实下载速率、已下载字节数与动态流光进度条",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 120_000,
+      latest: {
+        version: "1.1.23",
+        tagName: "v1.1.23",
+        compatible: true,
+        integrityReady: true,
+        signatureReady: true,
+        isNewer: true,
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        assetSize: 121000000,
+      },
+      job: {
+        id: "mock-job-001",
+        operation: "download",
+        status: "downloading",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        sizeBytes: 121000000,
+        downloadedBytes: 46200000,
+        downloadStartedAt: Date.now() - 10000,
+        downloadSpeedBps: 8800000, // 8.4 MB/s
+        createdAt: Date.now() - 10000,
+        updatedAt: Date.now(),
+      },
+    },
+  },
+  downloading_85: {
+    title: "下载冲刺中（进度 88%）",
+    description: "高速冲刺状态，即将触发 SHA-256 校验",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 120_000,
+      latest: {
+        version: "1.1.23",
+        tagName: "v1.1.23",
+        compatible: true,
+        integrityReady: true,
+        signatureReady: true,
+        isNewer: true,
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        assetSize: 121000000,
+      },
+      job: {
+        id: "mock-job-002",
+        operation: "download",
+        status: "downloading",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        sizeBytes: 121000000,
+        downloadedBytes: 106480000,
+        downloadStartedAt: Date.now() - 15000,
+        downloadSpeedBps: 12500000, // 11.9 MB/s
+        createdAt: Date.now() - 15000,
+        updatedAt: Date.now(),
+      },
+    },
+  },
+  staged: {
+    title: "下载完成（待立即应用）",
+    description: "更新包与签名均已校验就绪，随时可以安全点击【立即更新】",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 120_000,
+      latest: {
+        version: "1.1.23",
+        tagName: "v1.1.23",
+        compatible: true,
+        integrityReady: true,
+        signatureReady: true,
+        isNewer: true,
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        assetSize: 121000000,
+        notes: "### TallyNote 1.1.23\n\n- 更新包已完整解压检验通过，具备升级条件。",
+      },
+      job: {
+        id: "mock-job-003",
+        operation: "download",
+        status: "staged",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        assetName: "tallynote-1.1.23-linux-x64-glibc.tar.gz",
+        sizeBytes: 121000000,
+        downloadedBytes: 121000000,
+        createdAt: Date.now() - 60000,
+        updatedAt: Date.now() - 5000,
+      },
+    },
+  },
+  backing_up: {
+    title: "数据备份中（更新保护）",
+    description: "正在为 /var/lib/tallynote 生成自动还原快照",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 120_000,
+      latest: { version: "1.1.23", tagName: "v1.1.23", compatible: true, integrityReady: true, signatureReady: true, isNewer: true },
+      job: {
+        id: "mock-job-004",
+        operation: "apply",
+        status: "backing_up",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        createdAt: Date.now() - 20000,
+        updatedAt: Date.now() - 2000,
+      },
+    },
+  },
+  applying: {
+    title: "服务平滑重启中（倒计时中）",
+    description: "已原子切换版本，systemd 正在热重启，前端实时探活",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 120_000,
+      latest: { version: "1.1.23", tagName: "v1.1.23", compatible: true, integrityReady: true, signatureReady: true, isNewer: true },
+      job: {
+        id: "mock-job-005",
+        operation: "apply",
+        status: "applying",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        applyQueuedAt: Date.now() - 12000,
+        restartWindowSeconds: 30,
+        restartDeadline: Date.now() + 18000,
+        createdAt: Date.now() - 25000,
+        updatedAt: Date.now() - 2000,
+      },
+    },
+  },
+  completed: {
+    title: "更新成功完成",
+    description: "新版本健康检查通过，已平滑无感升级至最新",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.23",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 30_000,
+      latest: { version: "1.1.23", tagName: "v1.1.23", compatible: true, integrityReady: true, signatureReady: true, isNewer: false },
+      job: {
+        id: "mock-job-006",
+        operation: "apply",
+        status: "completed",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        completedAt: Date.now() - 10000,
+        createdAt: Date.now() - 45000,
+        updatedAt: Date.now() - 10000,
+      },
+    },
+  },
+  failed_verify: {
+    title: "更新失败状态（安全拦截）",
+    description: "模拟签名不匹配或发布包篡改时的安全拦截展示与错误提示",
+    info: {
+      configured: true,
+      strategy: "systemd",
+      currentVersion: "1.1.22",
+      platform: { target: "x64/glibc", os: "linux", arch: "x64" },
+      checkedAt: Date.now() - 120_000,
+      latest: {
+        version: "1.1.23",
+        tagName: "v1.1.23",
+        compatible: true,
+        integrityReady: false,
+        signatureReady: false,
+        isNewer: true,
+      },
+      job: {
+        id: "mock-job-007",
+        operation: "download",
+        status: "failed",
+        version: "1.1.23",
+        platform: "x64/glibc",
+        errorMessage: "发布包 SHA-256 校验与清单不一致，系统已自动阻断并保护原有数据。",
+        createdAt: Date.now() - 30000,
+        updatedAt: Date.now() - 5000,
+      },
+    },
+  },
+  disabled: {
+    title: "手动源码模式",
+    description: "未接入 systemd 时的只读说明与命令引导展示",
+    info: {
+      configured: false,
+      strategy: "disabled",
+      currentVersion: "1.1.22",
+      platform: { target: "macOS/darwin", os: "darwin", arch: "arm64" },
+      checkedAt: Date.now() - 3600_000,
+      latest: null,
+      job: null,
+    },
+  },
+};
diff --git a/web-next/src/styles/theme.css b/web-next/src/styles/theme.css
index c66b03a..2a3bf84 100644
--- a/web-next/src/styles/theme.css
+++ b/web-next/src/styles/theme.css
@@ -410,6 +410,34 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 @keyframes tn-app-enter { from { opacity: 0; } to { opacity: 1; } }
 @keyframes tn-auth-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 .t-dialog { border: 1px solid var(--tn-border); border-radius: 4px; box-shadow: 0 18px 42px rgba(8, 47, 118, .18); }
+/* TDesign Dialog global no-icon & pure baseline typography normalization */
+.t-dialog__header .t-icon:not(.t-icon-close),
+.t-dialog__body .t-icon,
+.t-dialog .t-icon.t-is-info,
+.t-dialog .t-icon.t-is-success,
+.t-dialog .t-icon.t-is-warning,
+.t-dialog .t-icon.t-is-error {
+  display: none !important;
+}
+.t-dialog__header {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--tn-navy-900);
+  line-height: 1.4;
+  margin-bottom: 8px;
+  gap: 0 !important;
+}
+.t-dialog__header-content {
+  display: block !important;
+  width: 100%;
+}
+.t-dialog__body {
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: var(--tn-text);
+  padding: 8px 0 20px 0;
+}
+
 .t-dialog__mask { background: var(--td-mask-active) !important; }
 .t-dialog__footer .t-button { min-width: 76px; }
 @media (max-width: 900px) {
@@ -537,3 +565,527 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
 }
+
+/* ==========================================================================
+   TallyNote Update Center (Redesigned UI & Interactive Styles)
+   ========================================================================== */
+
+/* Mock Console Controller */
+.tn-mock-console {
+  margin-bottom: 16px;
+  padding: 14px 18px;
+  background: #f8fbff;
+  border: 1px dashed var(--td-brand-color-3);
+  border-radius: 4px;
+}
+.tn-mock-console-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.tn-mock-console-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--tn-navy-900);
+}
+.tn-mock-console-tip {
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+}
+.tn-mock-scenario-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.tn-scenario-chip {
+  padding: 5px 11px;
+  font-size: 12px;
+  border: 1px solid var(--tn-border);
+  border-radius: 3px;
+  background: #ffffff;
+  color: var(--tn-text-secondary);
+  cursor: pointer;
+  transition: all 0.16s ease;
+}
+.tn-scenario-chip:hover {
+  border-color: var(--td-brand-color-4);
+  color: var(--td-brand-color);
+  background: var(--td-brand-color-1);
+}
+.tn-scenario-chip.active {
+  background: var(--td-brand-color);
+  border-color: var(--td-brand-color);
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(23, 92, 211, 0.2);
+}
+
+/* Update Page Actions */
+.tn-update-page-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* 4 Metrics Grid */
+.tn-update-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 16px;
+}
+.tn-metric-card .t-card__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px 18px;
+  min-height: 104px;
+}
+.tn-metric-content {
+  width: 100%;
+}
+.tn-metric-label {
+  display: block;
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+  margin-bottom: 4px;
+}
+.tn-metric-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--tn-navy-900);
+  font-family: "Plus Jakarta Sans Variable", sans-serif;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+.tn-metric-foot {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--tn-text-muted);
+}
+
+/* Stepper Surface */
+.tn-stepper-surface {
+  margin-bottom: 16px;
+  padding: 20px;
+}
+.tn-stepper-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.tn-section-heading {
+  margin: 0 0 4px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--tn-text);
+}
+.tn-section-subheading {
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+}
+.tn-stepper-wrap {
+  padding: 10px 0 20px;
+}
+.tn-stepper-wrap .t-steps {
+  max-width: 860px;
+  margin: 0 auto;
+}
+.tn-stepper-wrap {
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--td-brand-color-3) transparent;
+}
+.tn-stepper-wrap .t-steps {
+  min-width: 680px;
+}
+
+/* Job Runtime Panel (Active download & progress) */
+.tn-job-runtime-panel {
+  margin-top: 14px;
+  padding: 16px;
+  background: #f8fbff;
+  border: 1px solid var(--td-brand-color-2);
+  border-radius: 4px;
+}
+.tn-job-runtime-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.tn-job-status-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--tn-navy-900);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.tn-pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--td-brand-color);
+  box-shadow: 0 0 0 0 rgba(23, 92, 211, 0.7);
+  animation: tn-pulse 1.8s infinite;
+}
+@keyframes tn-pulse {
+  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(23, 92, 211, 0.7); }
+  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(23, 92, 211, 0); }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(23, 92, 211, 0); }
+}
+.tn-job-subtext {
+  color: var(--tn-text-secondary);
+  font-size: 12px;
+  font-family: "Plus Jakarta Sans Variable", sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+.tn-speed-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.tn-speed-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: #ffffff;
+  border: 1px solid var(--td-brand-color-3);
+  color: var(--td-brand-color);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: "Plus Jakarta Sans Variable", sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+.tn-eta-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: #f2f5f9;
+  color: var(--tn-text-secondary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Progress Bar with modern stream light effect */
+.tn-progress-stream {
+  position: relative;
+  height: 8px;
+  background: #e1e9f4;
+  border-radius: 999px;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.tn-progress-stream-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #175cd3 0%, #3d7be5 100%);
+  border-radius: inherit;
+  transition: width 0.35s ease;
+  position: relative;
+}
+.tn-progress-stream-bar::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.25) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.25) 50%,
+    rgba(255, 255, 255, 0.25) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 30px 30px;
+  animation: tn-stream-flow 1.5s linear infinite;
+}
+@keyframes tn-stream-flow {
+  0% { background-position: 0 0; }
+  100% { background-position: 30px 30px; }
+}
+
+.tn-job-runtime-desc {
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+  line-height: 1.6;
+}
+
+/* Restarting State Banner */
+.tn-restarting-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: #fff8e6;
+  border: 1px solid #ffd666;
+  border-radius: 3px;
+  color: #8c5b00;
+}
+.tn-restarting-spinner {
+  color: #faad14;
+}
+
+/* Release Surface */
+.tn-release-surface {
+  margin-bottom: 16px;
+  padding: 20px;
+}
+.tn-release-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.tn-release-tag-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.tn-release-title {
+  margin: 0 0 6px;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--tn-navy-900);
+}
+.tn-release-time {
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+}
+.tn-release-notes-box {
+  margin: 16px 0;
+  padding: 12px 16px;
+  background: #f8fafc;
+  border: 1px solid var(--tn-border);
+  border-left: 3px solid var(--td-brand-color);
+  border-radius: 3px;
+}
+.tn-release-notes-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--tn-navy-900);
+  margin-bottom: 6px;
+}
+.tn-release-notes-content {
+  font-size: 13px;
+  color: var(--tn-text-secondary);
+  line-height: 1.6;
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.tn-markdown-notes {
+  color: inherit;
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+}
+.tn-markdown-notes p,
+.tn-markdown-notes h3,
+.tn-markdown-notes h4,
+.tn-markdown-notes h5 {
+  margin: 0 0 8px;
+}
+.tn-markdown-notes p:last-child,
+.tn-markdown-notes ul:last-child,
+.tn-markdown-notes pre:last-child,
+.tn-markdown-notes h3:last-child,
+.tn-markdown-notes h4:last-child,
+.tn-markdown-notes h5:last-child {
+  margin-bottom: 0;
+}
+.tn-markdown-notes h3,
+.tn-markdown-notes h4,
+.tn-markdown-notes h5 {
+  color: var(--tn-navy-900);
+  font-weight: 700;
+}
+.tn-markdown-notes h3 { font-size: 15px; }
+.tn-markdown-notes h4 { font-size: 14px; }
+.tn-markdown-notes h5 { font-size: 13px; }
+.tn-markdown-notes ul {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+.tn-markdown-notes li { margin: 3px 0; }
+.tn-markdown-notes strong { color: var(--tn-navy-900); font-weight: 700; }
+.tn-markdown-notes code {
+  padding: 1px 4px;
+  border: 1px solid var(--tn-border-subtle);
+  border-radius: 3px;
+  background: #f2f5f9;
+  color: var(--tn-navy-900);
+  font-family: "Plus Jakarta Sans Variable", ui-monospace, monospace;
+  font-size: .92em;
+}
+.tn-markdown-notes pre {
+  margin: 0 0 8px;
+  padding: 10px 12px;
+  overflow-x: auto;
+  border: 1px solid var(--tn-border-subtle);
+  border-radius: 3px;
+  background: #f8fafc;
+  white-space: pre-wrap;
+}
+.tn-markdown-notes pre code { padding: 0; border: 0; background: transparent; }
+.tn-markdown-notes a { color: var(--td-brand-color); text-decoration: underline; text-underline-offset: 2px; }
+.tn-markdown-notes-compact { font-size: 13px; }
+
+/* Facts Grid */
+.tn-facts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin: 18px 0;
+  padding: 14px 0;
+  border-top: 1px solid var(--tn-border-subtle);
+  border-bottom: 1px solid var(--tn-border-subtle);
+}
+.tn-fact-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.tn-fact-label {
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+}
+.tn-fact-value {
+  font-size: 14px;
+  color: var(--tn-text);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.tn-fact-hint {
+  font-size: 11px;
+  color: var(--tn-text-muted);
+}
+
+.tn-release-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+/* Dialog content styles */
+.tn-confirm-dialog-content {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--tn-text);
+}
+.tn-update-safety-tips {
+  margin-top: 10px;
+  padding: 10px 14px;
+  background: #f6f8fb;
+  border-radius: 3px;
+  border: 1px solid var(--tn-border-subtle);
+  font-size: 12px;
+  color: var(--tn-text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tn-full-notes-modal {
+  margin: 0;
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 3px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--tn-text);
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.tn-empty-surface {
+  padding: 36px 20px;
+  text-align: center;
+}
+.tn-empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--tn-text-secondary);
+  font-size: 13px;
+}
+
+.tn-inline-warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-radius: 3px;
+  color: #d48806;
+  font-size: 13px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+  .tn-update-metrics-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .tn-facts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 640px) {
+  .tn-update-metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  .tn-mock-console-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .tn-release-header {
+    flex-direction: column;
+  }
+  .tn-release-card-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+  .tn-release-card-actions .t-button {
+    width: 100%;
+  }
+  .tn-stepper-wrap {
+    margin-inline: -4px;
+    padding-inline: 4px;
+  }
+  .tn-stepper-wrap .t-steps {
+    min-width: 620px;
+  }
+  .tn-job-runtime-header {
+    align-items: stretch;
+  }
+  .tn-job-status-badge,
+  .tn-speed-indicator {
+    width: 100%;
+  }
+  .tn-speed-indicator {
+    justify-content: flex-start;
+  }
+}