dscs-server 0.1.3 → 0.1.5

package/web/admin.html

@@ -30,6 +30,15 @@
   }
   * { box-sizing: border-box; }
   html, body { min-height: 100%; }
+  html { scrollbar-width: thin; scrollbar-color: #3a4350 transparent; scrollbar-gutter: stable; }
+  @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
+  *::-webkit-scrollbar { width: 8px; height: 8px; }
+  *::-webkit-scrollbar-track { background: transparent; }
+  *::-webkit-scrollbar-thumb { background: #3a4350; border: 2px solid transparent; border-radius: 999px; background-clip: content-box; }
+  *::-webkit-scrollbar-thumb:hover { background: #4a5566; border: 2px solid transparent; background-clip: content-box; }
+  *::-webkit-scrollbar-corner { background: transparent; }
+  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+  .table-wrap { scrollbar-gutter: stable; overflow-x: auto; overflow-y: hidden; }
   body {
     margin: 0;
     background:
@@ -64,7 +73,12 @@
   .btn.danger { background: transparent; border-color: rgba(239,119,119,.38); color: #ffabab; }
   .btn.danger:hover { background: var(--bad-soft); border-color: rgba(239,119,119,.58); }
   .btn.small { min-height: 27px; padding: 3px 9px; font-size: 11.5px; }
+  .btn.tiny { min-height: 22px; padding: 1px 7px; font-size: 10.5px; border-radius: 6px; }
+  .row-actions { display: flex; gap: 4px; }
   .btn.wide { width: 100%; }
+  .btn svg { flex: 0 0 auto; }
+  .spinner { animation: spin .9s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
 
   .input, input, select {
     width: 100%; min-height: 36px;
@@ -82,36 +96,12 @@
   input::placeholder { color: var(--faint); }
 
   /* login */
-  .login-page {
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: 28px 20px;
-  }
-  .login-inner {
-    width: min(420px, 100%);
-    display: flex; flex-direction: column; align-items: center;
-    animation: card-in .38s cubic-bezier(.16,1,.3,1) both;
-  }
-  .brand-mark {
-    width: 44px; height: 44px; border-radius: 13px;
-    display: grid; place-items: center;
-    background: linear-gradient(145deg, #24314a, #17202f);
-    border: 1px solid #33415a;
-    box-shadow: 0 12px 30px rgba(0,0,0,.28);
-  }
+  .login-page { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; }
+  .login-inner { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; animation: card-in .38s cubic-bezier(.16,1,.3,1) both; }
+  .brand-mark { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #24314a, #17202f); border: 1px solid #33415a; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
   .brand-mark img { width: 26px; height: 26px; }
-  .auth-card {
-    width: 100%; margin-top: 18px; padding: 28px;
-    border: 1px solid var(--line); border-radius: 18px;
-    background: linear-gradient(180deg, rgba(32,37,46,.92), rgba(26,30,37,.96));
-    box-shadow: var(--shadow);
-  }
-  .eyebrow {
-    display: inline-block;
-    color: var(--accent-2); font-size: 10.5px; font-weight: 700;
-    letter-spacing: .14em; text-transform: uppercase;
-  }
+  .auth-card { width: 100%; margin-top: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(32,37,46,.92), rgba(26,30,37,.96)); box-shadow: var(--shadow); }
+  .eyebrow { display: inline-block; color: var(--accent-2); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
   .auth-card h1 { margin: 8px 0 4px; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
   .auth-card .muted { margin: 0; }
   .auth-card .field { margin-top: 22px; }
@@ -120,96 +110,115 @@
   .field > span, .field-label { color: var(--muted); font-size: 12px; font-weight: 500; }
   .input-wrap { position: relative; }
   .input-wrap input { padding-right: 58px; }
-  .input-wrap .reveal {
-    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
-    border: 0; background: transparent; color: var(--muted);
-    font-size: 11.5px; padding: 5px 7px; border-radius: 6px;
-  }
+  .input-wrap .reveal { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 11.5px; padding: 5px 7px; border-radius: 6px; }
   .input-wrap .reveal:hover { color: var(--text); background: rgba(255,255,255,.05); }
   .error { min-height: 20px; margin-top: 7px; color: #ffaaaa; font-size: 12px; }
   .login-card .error { margin-top: 9px; }
 
+  /* 背景：斜向胶囊条带，低频漂移 + 首屏入场 */
+  .admin-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(60vw 40vw at 20% 0%, rgba(111,141,255,.08), transparent 70%); }
+  .admin-bg-plane { position: absolute; inset: -55% -30%; transform: rotate(37deg); }
+  .admin-bg-rows { position: absolute; inset: 0; }
+  .admin-bg-row { position: absolute; left: -280px; right: -280px; height: var(--row, 30px); background-repeat: repeat; opacity: .7; animation: admin-drift-right var(--dur, 8s) linear infinite, admin-enter 2.8s cubic-bezier(.2,.8,.2,1) both; }
+  .admin-bg-row.odd { animation-name: admin-drift-left, admin-enter; }
+  .admin-bg-shade { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(125% 94% at 0% 0%, rgba(130,160,255,.10), transparent 62%), radial-gradient(135% 135% at 50% 50%, transparent 20%, rgba(0,0,0,.55) 100%); }
+  @keyframes admin-enter { from { translate: var(--enter-from, 0px) 0; } to { translate: var(--enter-to, 0px) 0; } }
+  @keyframes admin-drift-right { from { transform: translateX(0); } to { transform: translateX(var(--tile, 58px)); } }
+  @keyframes admin-drift-left { from { transform: translateX(0); } to { transform: translateX(calc(var(--tile, 58px) * -1)); } }
+  @media (prefers-reduced-motion: reduce) { .admin-bg-row { animation: none; opacity: .45; } }
+
   /* app shell */
-  .app { max-width: 1180px; margin: 0 auto; padding: 24px 24px 52px; }
-  .topbar {
-    display: flex; align-items: center; justify-content: space-between; gap: 16px;
-    padding: 8px 0 22px;
-    animation: fade-in .24s ease both;
-  }
-  .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
-  .brand img { width: 26px; height: 26px; }
+  .app { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 22px 24px 60px; }
+  .topbar { display: flex; align-items: center; gap: 12px; padding: 8px 0 18px; animation: fade-in .24s ease both; }
+  .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; }
+  .brand img { width: 30px; height: 30px; border-radius: 9px; }
   .brand h1 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
-  .brand .brand-sub { color: var(--faint); font-size: 11.5px; margin-left: 2px; }
-  .top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
-  .version-pill {
-    display: inline-flex; align-items: center; gap: 6px;
-    color: var(--faint); font-size: 11.5px;
-    padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
-  }
+  .brand .brand-sub { color: var(--faint); font-size: 11.5px; margin-left: 2px; white-space: nowrap; }
+  .topbar .spacer { flex: 1 1 auto; }
+  .version-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11.5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
   .version-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
-  .hero {
-    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
-    margin: 4px 0 18px;
-    animation: rise-in .32s cubic-bezier(.16,1,.3,1) both;
-  }
-  .hero h2 { margin: 5px 0 4px; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
+  .topbar .badge { white-space: nowrap; }
+  .top-actions { display: flex; align-items: center; gap: 8px; }
+
+  .hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 18px; }
+  .hero h2 { margin: 5px 0 4px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
   .hero .muted { margin: 0; }
-  .health { display: inline-flex; align-items: center; gap: 7px; color: var(--good); font-size: 12px; white-space: nowrap; }
-  .health i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
-
-  .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
-  .metric {
-    padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius);
-    background: linear-gradient(180deg, rgba(30,35,44,.9), rgba(24,28,35,.94));
-    animation: rise-in .34s cubic-bezier(.16,1,.3,1) both;
-  }
-  .metric:nth-child(2) { animation-delay: .04s; }
-  .metric:nth-child(3) { animation-delay: .08s; }
-  .metric:nth-child(4) { animation-delay: .12s; }
-  .metric .k { color: var(--faint); font-size: 11.5px; }
-  .metric .v { margin-top: 4px; font-size: 23px; line-height: 1.15; font-weight: 650; font-variant-numeric: tabular-nums; }
+  .health { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(94,211,146,.28); border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 12px; white-space: nowrap; }
+  .health i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
+  .health.bad { border-color: rgba(239,119,119,.35); background: var(--bad-soft); color: #ffabab; }
+  .health.bad i { background: var(--bad); }
+
+  .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
+  .metric { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(30,35,44,.9), rgba(24,28,35,.94)); animation: rise-in .34s cubic-bezier(.16,1,.3,1) both; }
+  .metric .k { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
+  .metric .k svg { color: var(--muted); }
+  .metric .v { margin-top: 6px; font-size: 24px; line-height: 1.1; font-weight: 650; font-variant-numeric: tabular-nums; }
   .metric .hint { margin-top: 3px; color: var(--faint); font-size: 11px; }
+  .metric .bar { height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
+  .metric .bar i { display: block; height: 100%; background: var(--accent); }
 
-  .layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1.48fr) minmax(320px, .82fr);
-    grid-template-areas: "sessions storage" "devices devices";
-    gap: 16px;
-    align-items: stretch;
-  }
+  .activity-panel { margin-bottom: 12px; }
+  .activity-range { position: relative; }
+  .range-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 280px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
+  .range-presets { display: flex; gap: 6px; margin-bottom: 12px; }
+  .range-presets button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 7px; min-height: 26px; padding: 0 9px; font-size: 11px; cursor: pointer; }
+  .range-presets button:hover { color: var(--text); border-color: var(--line-strong); }
+  .range-fields { display: grid; gap: 9px; }
+  .range-fields label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11.5px; }
+  .range-fields input { width: 160px; min-height: 32px; }
+  .range-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 13px; }
+  .activity-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
+  .activity-device { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
+  .activity-device:hover { color: var(--text); border-color: var(--line-strong); }
+  .activity-device.on { color: var(--text); border-color: rgba(91,136,255,.55); background: var(--accent-soft); }
+  .activity-device i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
+  .activity-grid-wrap { overflow-x: auto; padding: 2px 0 4px; }
+  .activity-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 15px); grid-auto-columns: 15px; gap: 4px; width: max-content; }
+  .heat-cell { width: 15px; height: 15px; border-radius: 3px; background: rgba(255,255,255,.045); cursor: pointer; }
+  .heat-cell:hover { outline: 1px solid rgba(255,255,255,.65); }
+  .heat-blank { background: transparent; }
+  .heat-level-1 { background: rgba(94,211,146,.22); }
+  .heat-level-2 { background: rgba(94,211,146,.4); }
+  .heat-level-3 { background: rgba(94,211,146,.65); }
+  .heat-level-4 { background: rgba(94,211,146,.92); }
+  .activity-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: var(--faint); font-size: 11px; flex-wrap: wrap; }
+  .heat-legend { display: inline-flex; align-items: center; gap: 4px; }
+  .heat-legend .heat-cell { width: 10px; height: 10px; }
+  .layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-areas: "sessions sessions" "storage devices"; gap: 12px; align-items: stretch; }
   .sessions-panel { grid-area: sessions; }
+  .audit-panel { margin-top: 12px; }
+  .audit-more { display: flex; justify-content: center; padding-top: 10px; }
+  .audit-detail { max-width: 360px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
+  .audit-target { color: var(--muted); font-size: 11px; }
+  .audit-action { font-weight: 600; }
+  .audit-action.good { color: #9ce8bc; }
+  .audit-action.bad { color: #ffb0b0; }
+  .audit-action.warn { color: var(--warn); }
   .storage-panel { grid-area: storage; display: flex; flex-direction: column; }
-  .storage-panel .panel-body { display: flex; flex-direction: column; flex: 1 1 auto; }
-  .storage-panel .quota-form { margin-top: auto; padding-top: 14px; }
   .devices-panel { grid-area: devices; }
-  .panel {
-    border: 1px solid var(--line); border-radius: var(--radius);
-    background: linear-gradient(180deg, rgba(28,33,41,.92), rgba(23,27,34,.96));
-    overflow: hidden;
-    animation: rise-in .36s cubic-bezier(.16,1,.3,1) both;
-  }
-  .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 0; }
-  .panel-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
-  .panel-head p { margin: 3px 0 0; color: var(--faint); font-size: 11.5px; }
-  .panel-body { padding: 14px 16px 16px; }
-  .badge {
-    display: inline-flex; align-items: center; gap: 5px;
-    min-height: 22px; padding: 1px 8px;
-    border: 1px solid var(--line); border-radius: 999px;
-    color: var(--muted); background: rgba(255,255,255,.025);
-    font-size: 11px; white-space: nowrap;
-  }
+  .panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(28,33,41,.92), rgba(23,27,34,.96)); overflow: hidden; animation: rise-in .36s cubic-bezier(.16,1,.3,1) both; }
+  .panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
+  .panel-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); }
+  .panel-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+  .panel-title b { margin: 0; font-size: 14px; font-weight: 650; }
+  .panel-title span { margin: 0; color: var(--faint); font-size: 11.5px; }
+  .panel-head .spacer { flex: 1 1 auto; }
+  .panel-body { padding: 4px 16px 16px; }
+  .badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 11px; white-space: nowrap; }
   .badge.good { color: #9ce8bc; border-color: rgba(94,211,146,.28); background: var(--good-soft); }
   .badge.bad { color: #ffb0b0; border-color: rgba(239,119,119,.3); background: var(--bad-soft); }
   .badge.accent { color: #b9ccff; border-color: rgba(91,136,255,.32); background: var(--accent-soft); }
 
-  /* storage */
-  .storage-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
-  .storage-line b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
+  .storage-line { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
+  .storage-line b { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
   .storage-line span { color: var(--faint); font-size: 11.5px; }
-  .bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
+  .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
   .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s cubic-bezier(.16,1,.3,1); }
-  .quota-form { display: flex; align-items: center; gap: 7px; margin-top: 13px; }
+  .presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
+  .preset { height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11.5px; }
+  .preset:hover { color: var(--text); border-color: var(--line-strong); }
+  .preset.on { border-color: rgba(91,136,255,.5); background: var(--accent-soft); color: var(--accent-2); }
+  .quota-form { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
   .quota-form input { width: 84px; min-height: 32px; }
   .quota-form .unit { color: var(--faint); font-size: 11.5px; }
   .quota-form .btn { margin-left: auto; }
@@ -217,129 +226,172 @@
   .inline-result.good { color: var(--good); }
   .inline-result.bad { color: #ffaaaa; }
 
-  /* devices */
-  .device-form { display: flex; gap: 7px; }
+  .device-form { display: flex; gap: 7px; max-width: 520px; }
   .device-form input { min-width: 0; }
   .device-form .btn { flex: 0 0 auto; }
-  .device-list { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
-  .device-form { max-width: 520px; }
-  .device-row {
-    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 10px;
-    padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
-    background: rgba(255,255,255,.018);
-  }
-  .device-main { min-width: 0; }
-  .device-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
-  .device-id { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--faint); font-size: 10.5px; }
-  .device-id code { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
-  .icon-btn {
-    border: 0; background: transparent; color: var(--faint);
-    border-radius: 6px; padding: 2px 5px; font-size: 10.5px;
-  }
+  .device-list { margin-top: 10px; display: flex; flex-direction: column; }
+  .device-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--line); }
+  .device-row:first-child { border-top: 0; }
+  .device-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
+  .device-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
+  .device-label .device-color { width: 7px; height: 7px; border-radius: 2px; background: var(--faint); flex: 0 0 auto; }
+  .device-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
+  .device-label .dot.good { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
+  .device-label .dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(240,182,74,.12); }
+  .device-id { display: flex; align-items: center; gap: 4px; color: var(--faint); font-size: 11px; }
+  .device-id code { color: var(--muted); }
+  .device-meta { display: flex; gap: 12px; color: var(--faint); font-size: 11px; flex-wrap: wrap; }
+  .device-actions { display: flex; gap: 6px; flex: 0 0 auto; }
+  .inline-edit { display: flex; align-items: center; gap: 6px; }
+  .inline-edit input { height: 28px; width: 160px; min-height: 28px; padding: 0 8px; font-size: 12.5px; border-color: var(--accent); }
+  .icon-btn { border: 0; background: transparent; color: var(--faint); border-radius: 6px; padding: 2px 5px; font-size: 10.5px; display: inline-flex; align-items: center; gap: 3px; }
   .icon-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
-  .device-meta { color: var(--faint); font-size: 10.5px; line-height: 1.5; margin-top: 3px; display: flex; flex-direction: column; gap: 1px; }
-  .device-actions { display: flex; align-items: flex-start; }
+  .icon-btn.danger:hover { color: #ffb0b0; background: var(--bad-soft); }
 
-  /* sessions */
-  .session-tools { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
-  .session-tools input { min-width: 0; flex: 1 1 auto; max-width: 300px; min-height: 32px; }
+  .session-tools { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; flex-wrap: wrap; }
+  .session-tools input { min-width: 0; flex: 1 1 220px; max-width: 360px; min-height: 32px; }
   .session-tools select { width: auto; min-width: 112px; min-height: 32px; }
+  .session-tools .spacer { flex: 1 1 auto; }
+  .switch { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; }
+  .switch input { display: none; }
+  .switch i { width: 30px; height: 17px; border-radius: 999px; background: #303845; position: relative; transition: background .15s; }
+  .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #9aa5b5; transition: transform .15s, background .15s; }
+  .switch input:checked + i { background: rgba(91,136,255,.6); }
+  .switch input:checked + i::after { transform: translateX(13px); background: #fff; }
+
   .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
   table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
   th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.055); white-space: nowrap; }
   th { color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; background: rgba(255,255,255,.025); position: sticky; top: 0; }
   tr:last-child td { border-bottom: 0; }
   tbody tr:hover td { background: rgba(255,255,255,.025); }
-
-  /* session groups */
+  td.session-id { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
+  td.session-id code { color: #b8c7de; }
+  .row-copy { border: 0; background: transparent; color: var(--faint); padding: 2px 4px; border-radius: 5px; font-size: 10px; display: inline-flex; align-items: center; }
+  .row-copy:hover { color: var(--text); background: rgba(255,255,255,.07); }
   .session-group td { background: rgba(255,255,255,.03); padding: 7px 10px; }
   .session-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .chev { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); transition: transform .15s; padding: 0; }
+  .chev.closed { transform: rotate(-90deg); }
   .workspace-alias { width: 150px; min-height: 26px; font-size: 11px; }
   .session-group-key { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: 10.5px; }
   .session-group-key code { color: var(--muted); font-size: 10.5px; }
-  .session-group-meta { margin-left: auto; color: var(--faint); font-size: 10.5px; }
-  td.session-id { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
-  td.session-id code { color: #b8c7de; }
-  .row-copy { border: 0; background: transparent; color: var(--faint); padding: 2px 4px; border-radius: 5px; font-size: 10px; }
-  .row-copy:hover { color: var(--text); background: rgba(255,255,255,.07); }
-  .empty { padding: 24px 14px; text-align: center; color: var(--faint); }
+  .session-group-meta { margin-left: auto; color: var(--faint); font-size: 10.5px; white-space: nowrap; }
+  .empty { padding: 30px 16px; text-align: center; color: var(--faint); }
+  .empty .icon { color: var(--muted); margin-bottom: 6px; }
   .empty b { display: block; margin-bottom: 3px; color: var(--muted); font-size: 12.5px; }
   .empty .btn { margin-top: 10px; }
-  .empty-filter { color: var(--faint); font-size: 11.5px; padding: 16px; text-align: center; }
 
   .muted { color: var(--muted); }
   .faint { color: var(--faint); }
   .mono { font-variant-ligatures: none; }
 
-  /* toast + modal */
-  .toast {
-    position: fixed; left: 50%; bottom: 24px; z-index: 80;
-    max-width: min(520px, calc(100vw - 32px));
-    padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 10px;
-    background: rgba(30,35,44,.97); color: var(--text);
-    box-shadow: 0 16px 40px rgba(0,0,0,.4);
-    font-size: 12px; opacity: 0; pointer-events: none;
-    transform: translate(-50%, 8px);
-    transition: opacity .18s, transform .18s;
-  }
+  .toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; max-width: min(520px, calc(100vw - 32px)); padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(30,35,44,.97); color: var(--text); box-shadow: 0 16px 40px rgba(0,0,0,.4); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .18s, transform .18s; }
   .toast.on { opacity: 1; transform: translate(-50%, 0); }
   .toast.bad { border-color: rgba(239,119,119,.4); color: #ffb0b0; }
-  .modal {
-    position: fixed; inset: 0; z-index: 70;
-    display: grid; place-items: center; padding: 24px;
-    background: rgba(6,8,11,.66); backdrop-filter: blur(6px);
-    animation: fade-in .18s ease both;
-  }
+  .modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(6,8,11,.66); backdrop-filter: blur(6px); animation: fade-in .18s ease both; }
   body.modal-open { overflow: hidden; }
-  .modal-card {
-    width: min(520px, 100%);
-    padding: 24px; border: 1px solid var(--line-strong); border-radius: 17px;
-    background: var(--panel); box-shadow: 0 28px 80px rgba(0,0,0,.55);
-    animation: card-in .28s cubic-bezier(.16,1,.3,1) both;
-  }
+  .modal-card { width: min(520px, 100%); padding: 24px; border: 1px solid var(--line-strong); border-radius: 17px; background: var(--panel); box-shadow: 0 28px 80px rgba(0,0,0,.55); animation: card-in .28s cubic-bezier(.16,1,.3,1) both; }
   .modal-card h2 { margin: 0 0 4px; font-size: 18px; }
   .modal-card p { margin: 0; color: var(--muted); font-size: 12.5px; }
-  .token-box {
-    margin: 16px 0 6px; padding: 12px;
-    border: 1px solid var(--line); border-radius: 10px;
-    background: var(--bg);
-    color: #c7dbff; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
-    word-break: break-all;
-  }
+  .modal-card .field { margin-top: 12px; }
+  .modal-card .field input { min-height: 34px; }
+  .device-color-btn { border: 0; background: transparent; padding: 0; display: inline-flex; cursor: pointer; border-radius: 8px; }
+  .device-color-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .device-avatar { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
+  .device-status { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 11px; font-weight: 400; }
+  .device-status .dot { width: 6px; height: 6px; box-shadow: none; }
+  .device-status .dot.idle { background: transparent; border: 1px solid var(--faint); }
+  .device-status.online { color: var(--good); }
+  .color-picker-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
+  .color-picker-row input[type="color"] { width: 62px; height: 42px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-soft); cursor: pointer; }
+  .color-picker-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+  .color-picker-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
+  .color-hex { width: 112px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-soft); color: var(--text); outline: none; font: 12px ui-monospace, Consolas, monospace; }
+  .color-hex:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+  .color-hint { margin-top: 9px; color: var(--faint); font-size: 11px; }
+  .color-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
+  .color-preset { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
+  .color-preset.on { border-color: #fff; }
+  .color-live { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.12); color: var(--muted); font-size: 11px; flex-wrap: wrap; }
+  .color-live .swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
+  .color-live .online { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
+  .history-card { width: min(760px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
+  .history-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
+  .history-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; white-space: nowrap; }
+  .history-chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
+  .history-tabs { display: flex; gap: 6px; margin: 12px 0 8px; }
+  .history-tab { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 7px; min-height: 26px; padding: 0 9px; font-size: 11px; cursor: pointer; }
+  .history-tab:hover { color: var(--text); border-color: var(--line-strong); }
+  .history-tab.on { color: var(--text); border-color: rgba(91,136,255,.5); background: var(--accent-soft); }
+  .history-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+  .history-list { flex: 1 1 auto; min-height: 80px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.12); }
+  .history-gantt { flex: 1 1 auto; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.12); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+  .history-gantt-row { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px; align-items: center; }
+  .history-gantt-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .history-gantt-label i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
+  .history-gantt-track { height: 12px; border-radius: 6px; background: rgba(255,255,255,.04); position: relative; }
+  .history-gantt-bar { position: absolute; top: 2px; height: 8px; min-width: 3px; border-radius: 4px; }
+  .history-heatmap { flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); grid-auto-columns: 11px; gap: 3px; width: max-content; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.12); }
+  .history-heatmap .heat-cell { width: 11px; height: 11px; cursor: default; }
+  .history-item { display: grid; grid-template-columns: 82px 16px minmax(0, 1fr); gap: 9px; padding: 9px 11px; border-top: 1px solid rgba(255,255,255,.055); }
+  .history-item:first-child { border-top: 0; }
+  .history-time { color: var(--faint); font-size: 11px; padding-top: 1px; white-space: nowrap; }
+  .history-rail { position: relative; display: flex; justify-content: center; }
+  .history-rail::before { content: ""; position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--line); }
+  .history-item:first-child .history-rail::before { top: 6px; }
+  .history-item:last-child .history-rail::before { bottom: calc(100% - 7px); }
+  .history-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--dot-color, var(--muted)); position: relative; z-index: 1; box-shadow: 0 0 0 3px rgba(15,17,21,.9); }
+  .history-item.admin .history-dot { --dot-color: var(--warn); }
+  .history-item.gone .history-dot { --dot-color: var(--bad); }
+  .history-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+  .history-title { color: var(--text); font-size: 12.5px; font-weight: 600; }
+  .history-detail { color: var(--faint); font-size: 11px; }
+  .history-item.admin .history-title { color: var(--warn); }
+  .history-item.gone .history-title { color: #ffb0b0; }
+  .history-empty { padding: 30px 16px; text-align: center; color: var(--faint); }
+  .token-box { margin: 16px 0 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: #c7dbff; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
   .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
 
+  /* 单行元素统一禁止换行，避免窄列被压成竖排。 */
+  .topbar, .brand, .brand h1, .brand .brand-sub, .version-pill, .badge, .btn, .health,
+  .eyebrow, .hero h2, .metric .k, .metric .v, .metric .hint,
+  .panel-title b, .panel-head > .badge, .device-label, .device-id, .device-meta,
+  .storage-line, .preset, .quota-form, .session-tools, th, td { white-space: nowrap; }
+
   @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
   @keyframes card-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
+  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes card-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.98); } }
+  .modal.closing { animation: fade-out .16s ease both; }
+  .modal.closing .modal-card { animation: card-out .16s ease both; }
   @keyframes rise-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
-  @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
-  }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
 
-  @media (max-width: 980px) {
-    .layout { grid-template-columns: 1fr; grid-template-areas: "sessions" "storage" "devices"; }
-  }
+  @media (max-width: 980px) { .layout { grid-template-columns: 1fr; grid-template-areas: "sessions" "storage" "devices"; } }
   @media (max-width: 760px) {
     body { font-size: 13px; }
-    .app { padding: 16px 14px 36px; }
+    .app { padding: 16px 14px 40px; }
     .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 16px; }
     .top-actions { width: 100%; justify-content: space-between; }
     .hero { align-items: flex-start; flex-direction: column; gap: 8px; }
-    .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
-    .metric { padding: 12px; }
-    .metric .v { font-size: 20px; }
-    .session-tools { flex-wrap: wrap; }
+    .hero h2 { font-size: 22px; }
     .session-tools input { max-width: none; }
     .session-tools select { flex: 1 1 auto; }
+    .device-row { flex-wrap: wrap; }
+    .device-actions { width: 100%; justify-content: flex-end; }
     .auth-card { padding: 22px; }
   }
-  @media (max-width: 420px) {
-    .metrics { grid-template-columns: 1fr; }
-    .brand h1 { font-size: 14px; }
-    .brand-sub { display: none; }
-  }
 </style>
 </head>
 <body>
+<div class="admin-bg" aria-hidden="true">
+  <div class="admin-bg-plane">
+    <div class="admin-bg-rows" id="adminBgRows"></div>
+  </div>
+  <div class="admin-bg-shade"></div>
+</div>
+
 <div id="loginView" class="login-page">
   <div class="login-inner">
     <div class="brand-mark"><img src="/logo.svg" alt=""></div>
@@ -368,9 +420,12 @@
       <h1>dsh-session-cloudsync</h1>
       <span class="brand-sub">管理台</span>
     </div>
+    <span class="version-pill"><i></i><span id="version">连接中…</span></span>
+    <span class="spacer"></span>
+    <span id="updatedBadge" class="badge">更新于刚刚</span>
     <div class="top-actions">
-      <span class="version-pill"><i></i><span id="version">连接中…</span></span>
-      <button id="refresh" class="btn secondary" type="button">刷新</button>
+      <button id="refresh" class="btn secondary" type="button"></button>
+      <button id="changePassword" class="btn ghost" type="button">密码</button>
       <button id="logout" class="btn ghost" type="button">退出</button>
     </div>
   </header>
@@ -382,33 +437,75 @@
         <h2>同步概览</h2>
         <p class="muted">自部署节点、设备与会话视图；设备可签发、改名、吊销。</p>
       </div>
-      <div class="health"><i></i><span id="healthText">服务正常</span></div>
+      <div id="health" class="health"><i></i><span id="healthText">服务正常</span></div>
     </section>
 
     <section id="metrics" class="metrics" aria-label="概览指标"></section>
 
+    <section class="panel activity-panel">
+      <div class="panel-head">
+        <span class="panel-icon" id="activityIcon"></span>
+        <div class="panel-title">
+          <b>工作强度</b>
+          <span>按天统计新增事件；只反映同步活动，不代表内容。</span>
+        </div>
+        <span class="spacer"></span>
+        <div class="activity-range">
+          <button id="activityRangeButton" class="btn small secondary" type="button">最近 90 天</button>
+          <div id="activityRangePopover" class="range-popover" hidden>
+            <div class="range-presets" id="activityPresets">
+              <button type="button" data-days="30">30 天</button>
+              <button type="button" data-days="90">90 天</button>
+              <button type="button" data-days="365">365 天</button>
+            </div>
+            <div class="range-fields">
+              <label>开始日期<input id="activityFrom" type="date"></label>
+              <label>结束日期<input id="activityTo" type="date"></label>
+            </div>
+            <div class="range-actions">
+              <button id="activityCancel" class="btn small ghost" type="button">取消</button>
+              <button id="activityApply" class="btn small" type="button">应用</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="panel-body">
+        <div id="activityDevices" class="activity-legend"></div>
+        <div class="activity-grid-wrap"><div id="activityGrid" class="activity-grid"></div></div>
+        <div class="activity-foot">
+          <span id="activityNote" class="faint">正在读取活动…</span>
+          <span class="heat-legend"><span>少</span><i class="heat-cell heat-level-1"></i><i class="heat-cell heat-level-2"></i><i class="heat-cell heat-level-3"></i><i class="heat-cell heat-level-4"></i><span>多</span></span>
+        </div>
+      </div>
+    </section>
+
     <div class="layout">
       <section class="panel sessions-panel">
         <div class="panel-head">
-          <div>
-            <h2>会话</h2>
-            <p>按服务端更新时间倒序；只展示元数据。</p>
+          <span class="panel-icon" id="sessionsIcon"></span>
+          <div class="panel-title">
+            <b>会话</b>
+            <span>按服务端更新时间倒序；只显示同步时间、大小等摘要，内容端到端加密。</span>
           </div>
+          <span class="spacer"></span>
           <span id="sessionBadge" class="badge">0 个</span>
         </div>
         <div class="panel-body">
           <div class="session-tools">
-            <input id="sessionSearch" type="search" placeholder="搜索 session id…" autocomplete="off">
+            <input id="sessionSearch" type="search" placeholder="搜索 session id 或工作区…" autocomplete="off">
             <select id="sessionFilter" aria-label="筛选会话">
               <option value="all">全部状态</option>
               <option value="active">正常</option>
               <option value="deleted">已删除</option>
             </select>
+            <button id="sessionDayChip" class="badge accent" type="button" hidden></button>
+            <span class="spacer"></span>
+            <label class="switch"><input id="autoRefresh" type="checkbox" checked><i></i>自动刷新 10s</label>
           </div>
-          <div class="table-wrap">
+          <div class="table-wrap" id="sessionTableWrap">
             <table>
               <thead>
-                <tr><th>会话 id</th><th>格式</th><th>批次</th><th>最后序号</th><th>更新时间</th><th>状态</th></tr>
+                <tr><th>会话</th><th>格式</th><th>批次</th><th>最后序号</th><th>大小</th><th>更新时间</th><th>状态</th><th>操作</th></tr>
               </thead>
               <tbody id="sessions"></tbody>
             </table>
@@ -419,19 +516,22 @@
 
       <section class="panel storage-panel">
         <div class="panel-head">
-          <div>
-            <h2>存储</h2>
-            <p>按唯一密文字节计算。</p>
+          <span class="panel-icon" id="storageIcon"></span>
+          <div class="panel-title">
+            <b>存储</b>
+            <span>只统计服务端实际占用的加密数据。</span>
           </div>
+          <span class="spacer"></span>
           <span id="storageBadge" class="badge">0%</span>
         </div>
         <div class="panel-body">
-          <div class="storage-line">
-            <b id="storageUsed">0 B</b>
-            <span id="storageTotal">/ 0 GiB</span>
-          </div>
-          <div class="bar" role="progressbar" aria-label="存储配额使用率" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-            <i id="storageBar"></i>
+          <div class="storage-line"><b id="storageUsed">0 B</b><span id="storageTotal">/ 0 GiB</span></div>
+          <div class="bar" role="progressbar" aria-label="存储配额使用率" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i id="storageBar"></i></div>
+          <div class="presets" id="quotaPresets">
+            <button class="preset" type="button" data-gb="1">1 GiB</button>
+            <button class="preset" type="button" data-gb="5">5 GiB</button>
+            <button class="preset" type="button" data-gb="10">10 GiB</button>
+            <button class="preset" type="button" data-gb="50">50 GiB</button>
           </div>
           <form id="quotaForm" class="quota-form">
             <input id="quotaGb" type="number" min="1" step="1" inputmode="numeric" aria-label="配额 GiB">
@@ -444,10 +544,12 @@
 
       <section class="panel devices-panel">
         <div class="panel-head">
-          <div>
-            <h2>设备</h2>
-            <p>每台设备一个 token；token 只显示一次。</p>
+          <span class="panel-icon" id="devicesIcon"></span>
+          <div class="panel-title">
+            <b>设备</b>
+            <span>每台设备一把接入密钥，只在创建时显示一次；点击头像可自定义颜色。</span>
           </div>
+          <span class="spacer"></span>
           <span id="deviceBadge" class="badge">0 台</span>
         </div>
         <div class="panel-body">
@@ -460,6 +562,40 @@
         </div>
       </section>
     </div>
+
+    <section class="panel audit-panel">
+      <div class="panel-head">
+        <span class="panel-icon" id="auditIcon"></span>
+        <div class="panel-title">
+          <b>审计</b>
+          <span>管理动作流水；不记录会话内容、设备密钥或管理密码。</span>
+        </div>
+        <span class="spacer"></span>
+        <span id="auditBadge" class="badge">0 条</span>
+      </div>
+      <div class="panel-body">
+        <div class="session-tools">
+          <select id="auditFilter" aria-label="筛选审计动作">
+            <option value="">全部动作</option>
+          </select>
+          <input id="auditSearch" type="search" placeholder="搜索操作者或目标…" autocomplete="off" aria-label="搜索审计">
+          <span class="spacer"></span>
+          <button id="auditRefresh" class="btn small secondary" type="button">刷新</button>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr><th>时间</th><th>动作</th><th>操作者</th><th>目标</th><th>详情</th></tr>
+            </thead>
+            <tbody id="auditRows"></tbody>
+          </table>
+        </div>
+        <div id="auditEmpty" class="empty" hidden></div>
+        <div id="auditMoreWrap" class="audit-more" hidden>
+          <button id="auditMore" class="btn small ghost" type="button">加载更多</button>
+        </div>
+      </div>
+    </section>
   </main>
 </div>
 
@@ -467,20 +603,175 @@
 
 <div id="tokenDialog" class="modal" hidden>
   <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="tokenTitle">
-    <h2 id="tokenTitle">设备 token</h2>
+    <h2 id="tokenTitle">设备接入密钥</h2>
     <p>只显示这一次。关闭后无法再次查看，只能重新签发。</p>
     <div id="tokenValue" class="token-box" tabindex="0"></div>
     <div class="modal-actions">
-      <button id="copyToken" class="btn secondary" type="button">复制 token</button>
+      <button id="copyToken" class="btn secondary" type="button">复制密钥</button>
       <button id="closeToken" class="btn" type="button">我已保存</button>
     </div>
   </div>
 </div>
 
+<div id="revokeDialog" class="modal" hidden>
+  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="revokeTitle">
+    <h2 id="revokeTitle">吊销设备</h2>
+    <p id="revokeText"></p>
+    <div class="modal-actions">
+      <button id="cancelRevoke" class="btn ghost" type="button">取消</button>
+      <button id="confirmRevoke" class="btn danger" type="button">确认吊销</button>
+    </div>
+  </div>
+</div>
+
+<div id="passwordDialog" class="modal" hidden>
+  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="passwordTitle">
+    <h2 id="passwordTitle">修改管理密码</h2>
+    <p>修改后其它管理会话会退出登录，当前会话保持在线。</p>
+    <label class="field">
+      <span>当前密码</span>
+      <input id="currentPassword" type="password" autocomplete="current-password">
+    </label>
+    <label class="field">
+      <span>新密码</span>
+      <input id="newPassword" type="password" autocomplete="new-password">
+    </label>
+    <label class="field">
+      <span>确认新密码</span>
+      <input id="confirmPassword" type="password" autocomplete="new-password">
+    </label>
+    <div id="passwordError" class="inline-result bad" role="alert"></div>
+    <div class="modal-actions">
+      <button id="cancelPassword" class="btn ghost" type="button">取消</button>
+      <button id="savePassword" class="btn" type="button">保存</button>
+    </div>
+  </div>
+</div>
+
+<div id="colorDialog" class="modal" hidden>
+  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="colorTitle">
+    <h2 id="colorTitle">设备颜色</h2>
+    <p id="colorDeviceName"></p>
+    <div class="color-picker-row">
+      <input id="deviceColorPicker" type="color" value="#5b88ff" aria-label="自定义设备颜色">
+      <input id="deviceColorHex" class="color-hex" value="#5b88ff" spellcheck="false" aria-label="颜色十六进制值">
+    </div>
+    <div id="deviceColorPresets" class="color-presets"></div>
+    <div class="color-hint">支持系统调色板、预设色，也可以直接输入 #rrggbb。</div>
+    <div class="color-live">
+      <span class="device-avatar" id="colorPreviewAvatar">L</span>
+      <span id="colorPreviewName"></span>
+      <span class="faint">颜色预览</span>
+    </div>
+    <div id="colorError" class="inline-result bad" role="alert"></div>
+    <div class="modal-actions">
+      <button id="cancelColor" class="btn ghost" type="button">取消</button>
+      <button id="saveColor" class="btn" type="button">保存颜色</button>
+    </div>
+  </div>
+</div>
+
+<div id="historyDialog" class="modal" hidden>
+  <div class="modal-card history-card" role="dialog" aria-modal="true" aria-labelledby="historyTitle">
+    <h2 id="historyTitle">会话历史</h2>
+    <p id="historySession"></p>
+    <div id="historySummary" class="history-summary"></div>
+    <div class="history-tabs">
+      <button class="history-tab on" type="button" data-pane="timeline">时间线</button>
+      <button class="history-tab" type="button" data-pane="devices">设备</button>
+      <button class="history-tab" type="button" data-pane="heatmap">热力图</button>
+    </div>
+    <div id="historyTimelinePane" class="history-pane">
+      <div id="historyList" class="history-list"></div>
+    </div>
+    <div id="historyDevicesPane" class="history-pane" hidden>
+      <div id="historyGantt" class="history-gantt"></div>
+    </div>
+    <div id="historyHeatmapPane" class="history-pane" hidden>
+      <div id="historyHeatmap" class="history-heatmap"></div>
+      <div class="faint" style="margin-top:8px;font-size:11px">最近 90 天 · 按新增事件</div>
+    </div>
+    <div id="historyError" class="inline-result bad" role="alert"></div>
+    <div class="modal-actions">
+      <button id="closeHistory" class="btn secondary" type="button">关闭</button>
+    </div>
+  </div>
+</div>
+
+<div id="sessionDialog" class="modal" hidden>
+  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="sessionActionTitle">
+    <h2 id="sessionActionTitle">会话操作</h2>
+    <p id="sessionActionText"></p>
+    <label class="field" id="sessionResetField" hidden>
+      <span>指定重建设备</span>
+      <select id="sessionResetDevice"></select>
+    </label>
+    <div id="sessionActionError" class="inline-result bad" role="alert"></div>
+    <div class="modal-actions">
+      <button id="cancelSessionAction" class="btn ghost" type="button">取消</button>
+      <button id="confirmSessionAction" class="btn danger" type="button">确认</button>
+    </div>
+  </div>
+</div>
+
 <script>
 const $ = (id) => document.getElementById(id)
-const state = { overview: null, devices: [], sessions: [] }
+const GiB = 1024 ** 3
+const state = {
+  overview: null,
+  devices: [],
+  sessions: [],
+  autoRefresh: true,
+  editingDeviceId: null,
+  revokeTarget: null,
+  sessionAction: null,
+  colorTarget: null,
+  collapsed: new Set(['__unmapped__']),
+  audit: [],
+  auditBefore: null,
+  auditHasMore: false,
+  activityStart: null,
+  activityEnd: null,
+  activityPresetDays: 90,
+  activityDeviceId: null,
+  activityDays: [],
+  sessionDayFilter: null,
+  activityDaySessionIds: null,
+}
 let toastTimer = null
+let updatedAt = 0
+let pollTimer = null
+
+const ICONS = {
+  devices: ['M2.5 3.5h8v6h-8z', 'M11.5 7h2v5.5h-2z', 'M4.5 12h4'],
+  sessions: ['M2 3.5h12v7H7l-3 2.5v-2.5H2z'],
+  storage: ['M3 3.5h10v3H3z', 'M3 6.5h10v3H3z', 'M3 9.5h10v3H3z'],
+  refresh: ['M13 8a5 5 0 1 1-1.5-3.5', 'M13 3.5V6h-2.5'],
+  copy: ['M6 5V3.5A1.5 1.5 0 0 1 7.5 2h5A1.5 1.5 0 0 1 14 3.5v5A1.5 1.5 0 0 1 12.5 10H11', 'M2 6.5A1.5 1.5 0 0 1 3.5 5h5A1.5 1.5 0 0 1 10 6.5v5A1.5 1.5 0 0 1 8.5 13h-5A1.5 1.5 0 0 1 2 11.5z'],
+  pencil: ['M11 2.5l2.5 2.5-8 8H3v-2.5z'],
+  chevron: ['M4 6l4 4 4-4'],
+  audit: ['M3 2.5h10v11H3z', 'M5.5 5.5h5', 'M5.5 8h5', 'M5.5 10.5h3'],
+  activity: ['M2.5 13.5h11', 'M3.5 11.5l3-4 2 2 3-5 2 2.5'],
+}
+
+function icon(name, size = 16) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('viewBox', '0 0 16 16')
+  svg.setAttribute('width', String(size))
+  svg.setAttribute('height', String(size))
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('aria-hidden', 'true')
+  for (const d of ICONS[name] || []) {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('d', d)
+    path.setAttribute('stroke', 'currentColor')
+    path.setAttribute('stroke-width', '1.5')
+    path.setAttribute('stroke-linecap', 'round')
+    path.setAttribute('stroke-linejoin', 'round')
+    svg.append(path)
+  }
+  return svg
+}
 
 function el(tag, className, text) {
   const node = document.createElement(tag)
@@ -493,14 +784,44 @@ function formatBytes(value) {
   const bytes = Number(value) || 0
   if (bytes < 1024) return bytes + ' B'
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
-  if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB'
-  return (bytes / 1024 / 1024 / 1024).toFixed(2) + ' GiB'
+  if (bytes < GiB) return (bytes / 1024 / 1024).toFixed(1) + ' MB'
+  return (bytes / GiB).toFixed(2) + ' GiB'
 }
 
 function time(value) {
   return value === null || value === undefined ? '—' : new Date(value).toLocaleString()
 }
 
+function formatAgo(value) {
+  if (value === null || value === undefined) return '从未'
+  const diff = Date.now() - value
+  if (diff < 0) return '刚刚'
+  if (diff < 60 * 1000) return '刚刚'
+  if (diff < 3600 * 1000) return Math.floor(diff / 60000) + ' 分钟前'
+  if (diff < 86400 * 1000) return Math.floor(diff / 3600000) + ' 小时前'
+  return Math.floor(diff / 86400000) + ' 天前'
+}
+
+function agoCell(value) {
+  const cell = el('td', 'muted', formatAgo(value))
+  cell.title = time(value)
+  return cell
+}
+
+const MODAL_EXIT_MS = 160
+
+function closeModal(id) {
+  const node = $(id)
+  if (node === null || node.hidden || node.classList.contains('closing')) return
+  node.classList.add('closing')
+  setTimeout(() => {
+    node.hidden = true
+    node.classList.remove('closing')
+    const open = [...document.querySelectorAll('.modal')].some((modal) => !modal.hidden)
+    if (!open) document.body.classList.remove('modal-open')
+  }, MODAL_EXIT_MS)
+}
+
 function showToast(text, bad) {
   const node = $('toast')
   node.textContent = text
@@ -538,15 +859,36 @@ async function api(path, options) {
     throw new Error('unauthorized')
   }
   const payload = await response.json().catch(() => ({}))
-  if (!response.ok) throw new Error((payload && payload.error && payload.error.message) || '请求失败')
+  if (!response.ok) {
+    const error = new Error((payload && payload.error && payload.error.message) || '请求失败')
+    error.status = response.status
+    throw error
+  }
   return payload.value
 }
 
+function isUninitialized(error) {
+  return error !== null && typeof error === 'object'
+    && error.status === 409
+    && /初始化/u.test(String(error.message || ''))
+}
+
 function showLogin() {
   $('loginView').hidden = false
   $('appView').hidden = true
   $('loginError').textContent = ''
+  if (!$('passwordDialog').hidden) closePassword()
+  if (!$('sessionDialog').hidden) closeSessionAction()
+  if (!$('historyDialog').hidden) closeHistory()
+  if (!$('colorDialog').hidden) closeColorDialog()
   setTimeout(() => $('password').focus(), 30)
+  // 服务端数据被清空（开发 --clean 或换库）时，直接回初始化向导。
+  fetch('/setup/state', { credentials: 'same-origin' })
+    .then((response) => response.json())
+    .then((payload) => {
+      if (payload && payload.value && payload.value.initialized === false) location.replace('/setup')
+    })
+    .catch(() => {})
 }
 
 function showApp() {
@@ -557,14 +899,22 @@ function showApp() {
 function renderMetrics(overview) {
   const percent = overview.maxBytes > 0 ? Math.min(100, Math.round(overview.usedBytes / overview.maxBytes * 1000) / 10) : 0
   const items = [
-    { key: '设备', value: overview.devices, hint: '已签发 token' },
-    { key: '会话', value: overview.sessions, hint: overview.deletedSessions > 0 ? overview.deletedSessions + ' 个墓碑' : '没有墓碑' },
-    { key: '已用存储', value: formatBytes(overview.usedBytes), hint: percent + '% · 配额 ' + formatBytes(overview.maxBytes) },
-    { key: '同步版本', value: overview.revision, hint: '服务端 revision' },
+    { icon: 'devices', key: '设备', value: overview.devices, hint: '已签发接入密钥' },
+    { icon: 'sessions', key: '会话', value: overview.sessions, hint: overview.deletedSessions > 0 ? overview.deletedSessions + ' 个已删除' : '没有删除记录' },
+    { icon: 'storage', key: '已用存储', value: formatBytes(overview.usedBytes), hint: percent + '% · 配额 ' + formatBytes(overview.maxBytes), bar: percent },
   ]
   $('metrics').replaceChildren(...items.map((item) => {
     const box = el('div', 'metric')
-    box.append(el('div', 'k', item.key), el('div', 'v', String(item.value)), el('div', 'hint', item.hint))
+    const head = el('div', 'k')
+    head.append(icon(item.icon, 13), el('span', null, item.key))
+    box.append(head, el('div', 'v', String(item.value)), el('div', 'hint', item.hint))
+    if (item.bar !== undefined) {
+      const bar = el('div', 'bar')
+      const fill = el('i', null)
+      fill.style.width = item.bar + '%'
+      bar.append(fill)
+      box.append(bar)
+    }
     return box
   }))
   $('version').textContent = 'v' + overview.version + ' · protocol ' + overview.protocol
@@ -572,9 +922,222 @@ function renderMetrics(overview) {
   $('storageUsed').textContent = formatBytes(overview.usedBytes)
   $('storageTotal').textContent = '/ ' + formatBytes(overview.maxBytes)
   $('storageBar').style.width = Math.min(100, percent) + '%'
-  const bar = $('storageBar').parentElement
-  bar.setAttribute('aria-valuenow', String(percent))
-  $('quotaGb').value = String(Math.max(1, Math.round(overview.maxBytes / 1024 / 1024 / 1024)))
+  $('storageBar').parentElement.setAttribute('aria-valuenow', String(percent))
+  const quotaGb = Math.max(1, Math.round(overview.maxBytes / GiB))
+  $('quotaGb').value = String(quotaGb)
+  for (const button of $('quotaPresets').querySelectorAll('.preset')) {
+    const gb = Number(button.dataset.gb)
+    button.classList.toggle('on', gb === quotaGb)
+  }
+}
+
+function dateKey(date) {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return year + '-' + month + '-' + day
+}
+
+function parseDateInput(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/u.exec(String(value || ''))
+  if (match === null) return null
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+function defaultActivityRange(days) {
+  const end = new Date()
+  end.setHours(0, 0, 0, 0)
+  const start = new Date(end)
+  start.setDate(start.getDate() - (days - 1))
+  return { start, end }
+}
+
+function activityThresholds(days) {
+  const counts = days.map((day) => day.events).filter((events) => events > 0).sort((left, right) => left - right)
+  if (counts.length === 0) return []
+  const pick = (quantile) => counts[Math.min(counts.length - 1, Math.floor(quantile * (counts.length - 1)))]
+  return [...new Set([pick(0.25), pick(0.5), pick(0.75)])]
+}
+
+function activityLevel(events, thresholds, maxEvents) {
+  if (events <= 0) return 0
+  if (maxEvents !== undefined && events >= maxEvents) return 4
+  let level = 1
+  for (const threshold of thresholds || []) {
+    if (events > threshold) level += 1
+  }
+  return Math.min(4, level)
+}
+
+function setActivityRange(start, end, presetDays) {
+  state.activityStart = start
+  state.activityEnd = end
+  state.activityPresetDays = presetDays
+  $('activityRangeButton').textContent = presetDays === null
+    ? dateKey(start) + ' → ' + dateKey(end)
+    : '最近 ' + presetDays + ' 天'
+}
+
+function openActivityRange() {
+  $('activityFrom').value = dateKey(state.activityStart)
+  $('activityTo').value = dateKey(state.activityEnd)
+  $('activityRangePopover').hidden = false
+}
+
+function closeActivityRange() {
+  $('activityRangePopover').hidden = true
+}
+
+function applyActivityRange() {
+  const start = parseDateInput($('activityFrom').value)
+  const end = parseDateInput($('activityTo').value)
+  if (start === null || end === null) { showToast('请选择有效的开始和结束日期', true); return }
+  if (start > end) { showToast('开始日期不能晚于结束日期', true); return }
+  setActivityRange(start, end, null)
+  closeActivityRange()
+  void loadActivity()
+}
+
+function renderActivityDevices() {
+  const wrap = $('activityDevices')
+  const options = [{ id: null, label: '全部设备', color: '#94a3b8' }]
+  for (const device of state.devices) {
+    options.push({ id: device.deviceId, label: device.label || device.deviceId, color: device.color || historyDeviceColor(device.deviceId) })
+  }
+  wrap.replaceChildren(...options.map((option) => {
+    const button = el('button', 'activity-device' + (state.activityDeviceId === option.id ? ' on' : ''))
+    button.type = 'button'
+    const dot = el('i')
+    dot.style.background = option.color
+    button.append(dot, el('span', null, option.label))
+    button.onclick = () => {
+      state.activityDeviceId = state.activityDeviceId === option.id ? null : option.id
+      void loadActivity()
+    }
+    return button
+  }))
+}
+
+function renderActivity() {
+  renderActivityDevices()
+  const grid = $('activityGrid')
+  if (state.activityStart === null || state.activityEnd === null) {
+    grid.replaceChildren()
+    return
+  }
+  const byDay = new Map(state.activityDays.map((day) => [day.day, day]))
+  const thresholds = activityThresholds(state.activityDays)
+  const maxEvents = state.activityDays.reduce((max, day) => Math.max(max, day.events), 0)
+  const cells = []
+  const startWeekday = (state.activityStart.getDay() + 6) % 7
+  for (let index = 0; index < startWeekday; index += 1) cells.push(el('div', 'heat-cell heat-blank'))
+  let totalEvents = 0
+  let activeDays = 0
+  for (let cursor = new Date(state.activityStart); cursor <= state.activityEnd; cursor.setDate(cursor.getDate() + 1)) {
+    const key = dateKey(cursor)
+    const data = byDay.get(key)
+    const events = data === undefined ? 0 : data.events
+    totalEvents += events
+    if (events > 0) activeDays += 1
+    const cell = el('div', 'heat-cell heat-level-' + activityLevel(events, thresholds, maxEvents))
+    cell.setAttribute('aria-label', key + '：' + events + ' 事件')
+    cell.title = data === undefined
+      ? key + ' · 没有同步活动'
+      : key + ' · ' + data.events + ' 事件 · ' + formatBytes(data.bytes) + ' · ' + data.appends + ' 次 · ' + data.sessions + ' 会话 · ' + data.devices + ' 设备'
+    cell.dataset.day = key
+    cell.onclick = () => { void toggleSessionDayFilter(key) }
+    cells.push(cell)
+  }
+  grid.replaceChildren(...cells)
+  const scope = state.activityDeviceId === null ? '全部设备' : historyDeviceLabel(state.activityDeviceId)
+  $('activityNote').textContent = activeDays === 0
+    ? scope + ' · 这个范围还没有同步活动'
+    : scope + ' · ' + totalEvents + ' 事件 · ' + activeDays + ' 个活跃日 · 颜色按当前范围分档'
+  const legend = document.querySelector('.heat-legend')
+  if (legend !== null) {
+    legend.title = thresholds.length === 0
+      ? '没有活动时不分档'
+      : '事件分档阈值：' + thresholds.join(' / ')
+  }
+}
+
+async function loadActivity() {
+  if (state.activityStart === null || state.activityEnd === null) return
+  const params = new URLSearchParams({
+    from: String(state.activityStart.getTime()),
+    to: String(state.activityEnd.getTime() + 24 * 60 * 60 * 1000),
+    tzOffset: String(-new Date().getTimezoneOffset()),
+  })
+  if (state.activityDeviceId !== null) params.set('deviceId', state.activityDeviceId)
+  try {
+    const data = await api('/admin/activity?' + params.toString())
+    state.activityDays = data.days
+    renderActivity()
+  } catch (error) {
+    if (error.message !== 'unauthorized') {
+      $('activityNote').textContent = '活动读取失败：' + error.message
+    }
+  }
+}
+
+function updateSessionDayChip() {
+  const chip = $('sessionDayChip')
+  if (state.sessionDayFilter === null) {
+    chip.hidden = true
+    chip.textContent = ''
+    return
+  }
+  chip.hidden = false
+  chip.textContent = '活动日 ' + state.sessionDayFilter + ' ×'
+  chip.title = '清除日期筛选'
+}
+
+async function toggleSessionDayFilter(day) {
+  if (state.sessionDayFilter === day) {
+    state.sessionDayFilter = null
+    state.activityDaySessionIds = null
+    updateSessionDayChip()
+    renderSessions()
+    return
+  }
+  try {
+    const params = new URLSearchParams({
+      day,
+      tzOffset: String(-new Date().getTimezoneOffset()),
+    })
+    const data = await api('/admin/activity/sessions?' + params.toString())
+    state.sessionDayFilter = day
+    state.activityDaySessionIds = new Set(data.sessions.map((session) => session.sessionId))
+    updateSessionDayChip()
+    renderSessions()
+  } catch (error) {
+    if (error.message !== 'unauthorized') showToast(error.message, true)
+  }
+}
+
+function deviceOnline(device) {
+  return device.lastSeenAt !== null && device.lastSeenAt !== undefined
+    && Date.now() - device.lastSeenAt < 5 * 60 * 1000
+}
+
+function deviceStatus(device) {
+  if (device.lastSeenAt === null || device.lastSeenAt === undefined) return { label: '从未在线', idle: true }
+  if (deviceOnline(device)) return { label: '在线', idle: false }
+  return { label: '离线', idle: true }
+}
+
+function deviceInitial(device) {
+  const label = String(device.label || device.deviceId || '?').trim()
+  return label === '' ? '?' : label.slice(0, 1).toUpperCase()
+}
+
+function readableOn(hex) {
+  const color = /^#[0-9a-f]{6}$/iu.test(String(hex)) ? String(hex).slice(1) : '5b88ff'
+  const r = parseInt(color.slice(0, 2), 16)
+  const g = parseInt(color.slice(2, 4), 16)
+  const b = parseInt(color.slice(4, 6), 16)
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#10131a' : '#ffffff'
 }
 
 function renderDevices(devices) {
@@ -582,7 +1145,9 @@ function renderDevices(devices) {
   const list = $('devices')
   if (devices.length === 0) {
     const empty = el('div', 'empty')
-    empty.append(el('b', null, '还没有设备'), el('span', null, '签发一个 token，把 DSH 插件接到这台服务器。'))
+    const mark = el('div', 'icon')
+    mark.append(icon('devices', 22))
+    empty.append(mark, el('b', null, '还没有设备'), el('span', null, '签发一把接入密钥，把 DSH 插件接到这台服务器。'))
     list.replaceChildren(empty)
     return
   }
@@ -590,72 +1155,611 @@ function renderDevices(devices) {
     const row = el('div', 'device-row')
     const main = el('div', 'device-main')
     const label = el('div', 'device-label')
-    label.append(el('span', null, device.label || 'device'), el('span', 'badge good', '有效'))
+    const avatarColor = device.color || historyDeviceColor(device.deviceId)
+    const colorButton = el('button', 'device-color-btn')
+    colorButton.type = 'button'
+    colorButton.title = '修改设备颜色'
+    colorButton.setAttribute('aria-label', '修改设备颜色')
+    const avatar = el('span', 'device-avatar', deviceInitial(device))
+    avatar.style.background = avatarColor
+    avatar.style.color = readableOn(avatarColor)
+    colorButton.append(avatar)
+    colorButton.onclick = () => openColorDialog(device)
+    const status = deviceStatus(device)
+    const statusChip = el('span', 'device-status' + (status.idle ? '' : ' online'))
+    statusChip.append(el('i', 'dot' + (status.idle ? ' idle' : ' good')), el('span', null, status.label))
+    statusChip.title = device.lastSeenAt === null || device.lastSeenAt === undefined
+      ? '从未在线'
+      : '最后在线：' + time(device.lastSeenAt)
+    label.append(colorButton)
+    if (state.editingDeviceId === device.deviceId) {
+      const form = el('div', 'inline-edit')
+      const input = el('input')
+      input.value = device.label || 'device'
+      input.maxLength = 64
+      input.setAttribute('aria-label', '设备名称')
+      const save = el('button', 'btn small', '保存')
+      save.type = 'button'
+      save.onclick = () => saveDeviceLabel(device, input.value)
+      const cancel = el('button', 'btn small ghost', '取消')
+      cancel.type = 'button'
+      cancel.onclick = () => { state.editingDeviceId = null; renderDevices(state.devices) }
+      form.append(input, save, cancel)
+      label.append(form, statusChip)
+      input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') save.click()
+        if (event.key === 'Escape') cancel.click()
+      })
+      setTimeout(() => input.focus(), 0)
+    } else {
+      label.append(el('b', null, device.label || 'device'), statusChip)
+    }
     const idLine = el('div', 'device-id')
-    idLine.append(el('code', null, device.deviceId))
-    const copy = el('button', 'row-copy', '复制')
+    const copy = el('button', 'row-copy')
     copy.type = 'button'
+    copy.title = '复制设备 ID'
+    copy.append(icon('copy', 11))
     copy.onclick = () => copyText(device.deviceId)
-    idLine.append(copy)
+    idLine.append(el('code', null, device.deviceId), copy)
     const meta = el('div', 'device-meta')
-    meta.append(
-      el('span', null, '创建 ' + time(device.createdAt)),
-      el('span', null, '最后在线 ' + (device.lastSeenAt === null || device.lastSeenAt === undefined ? '从未' : time(device.lastSeenAt))),
-    )
+    const created = el('span', null, '创建 ' + formatAgo(device.createdAt))
+    created.title = time(device.createdAt)
+    const seen = el('span', null, '最后在线 ' + formatAgo(device.lastSeenAt))
+    seen.title = time(device.lastSeenAt)
+    meta.append(created, seen)
     main.append(label, idLine, meta)
     const actions = el('div', 'device-actions')
-    const rename = el('button', 'btn small', '改名')
+    const rename = el('button', 'icon-btn')
     rename.type = 'button'
-    rename.onclick = async () => {
-      const next = prompt('新设备名（1–64 个字符）', device.label || 'device')
-      if (next === null) return
-      const label = next.trim()
-      if (label === '') {
-        showToast('设备名不能为空', true)
-        return
-      }
-      rename.disabled = true
-      rename.textContent = '改名中…'
-      try {
-        await api('/admin/devices/' + encodeURIComponent(device.deviceId), {
-          method: 'PATCH',
-          body: JSON.stringify({ label }),
-        })
-        showToast('设备已改名')
-        await refresh(true)
-      } catch (error) {
-        showToast(error.message, true)
-        rename.disabled = false
-        rename.textContent = '改名'
-      }
-    }
-    const revoke = el('button', 'btn small danger', '吊销')
+    rename.append(icon('pencil', 12), el('span', null, '改名'))
+    rename.onclick = () => { state.editingDeviceId = device.deviceId; renderDevices(state.devices) }
+    const revoke = el('button', 'icon-btn danger')
     revoke.type = 'button'
-    revoke.onclick = async () => {
-      if (!confirm('吊销后该设备 token 立即失效，确定？')) return
-      revoke.disabled = true
-      revoke.textContent = '吊销中…'
-      try {
-        await api('/admin/devices/' + encodeURIComponent(device.deviceId), { method: 'DELETE' })
-        showToast('设备已吊销')
-        await refresh(true)
-      } catch (error) {
-        showToast(error.message, true)
-        revoke.disabled = false
-        revoke.textContent = '吊销'
-      }
-    }
+    revoke.append(el('span', null, '吊销'))
+    revoke.onclick = () => openRevoke(device)
     actions.append(rename, revoke)
     row.append(main, actions)
     return row
   }))
 }
 
+async function saveDeviceLabel(device, raw) {
+  const label = String(raw || '').trim()
+  if (label === '') { showToast('设备名不能为空', true); return }
+  try {
+    await api('/admin/devices/' + encodeURIComponent(device.deviceId), {
+      method: 'PATCH',
+      body: JSON.stringify({ label }),
+    })
+    state.editingDeviceId = null
+    showToast('设备已改名')
+    await refresh(true)
+  } catch (error) {
+    showToast(error.message, true)
+  }
+}
+
+function openRevoke(device) {
+  state.revokeTarget = device.deviceId
+  $('revokeText').textContent = '吊销「' + (device.label || 'device') + '」后，它的接入密钥立即失效；该设备将无法再推送或拉取。'
+  $('revokeDialog').classList.remove('closing')
+  $('revokeDialog').hidden = false
+  document.body.classList.add('modal-open')
+  setTimeout(() => $('confirmRevoke').focus(), 30)
+}
+
+function closeRevoke() {
+  state.revokeTarget = null
+  closeModal('revokeDialog')
+}
+
+function openPassword() {
+  $('currentPassword').value = ''
+  $('newPassword').value = ''
+  $('confirmPassword').value = ''
+  $('passwordError').textContent = ''
+  $('passwordDialog').classList.remove('closing')
+  $('passwordDialog').hidden = false
+  document.body.classList.add('modal-open')
+  setTimeout(() => $('currentPassword').focus(), 30)
+}
+
+function closePassword() {
+  closeModal('passwordDialog')
+}
+
+const SESSION_ACTIONS = {
+  archive: {
+    title: '存档会话',
+    text: '停止同步，但保留服务端保存的完整数据；之后可以恢复。其他设备上的本地副本不会被删除。',
+    confirm: '存档',
+    danger: false,
+  },
+  restore: {
+    title: '恢复会话',
+    text: '让这个会话重新参与同步。其他设备上的副本可能与服务端版本不一致，请确认。',
+    confirm: '恢复',
+    danger: false,
+  },
+  remove: {
+    title: '移除并释放空间',
+    text: '停止同步并永久删除服务端保存的数据，以释放空间；不可恢复。其他设备上的本地副本仍会保留。',
+    confirm: '移除并释放',
+    danger: true,
+  },
+  reset: {
+    title: '重置远端会话',
+    text: '删除服务端保存的这个会话及删除标记，允许指定设备把本地完整副本重新上传。会中断正在进行的同步；请先让目标设备同步。',
+    confirm: '重置',
+    danger: true,
+  },
+  'clear-reset': {
+    title: '取消重置',
+    text: '清除等待重建状态；之后任意设备都可以重新上传这个会话。',
+    confirm: '取消重置',
+    danger: false,
+  },
+}
+
+function openSessionAction(session, action) {
+  const info = SESSION_ACTIONS[action]
+  if (info === undefined) return
+  state.sessionAction = { session, action }
+  $('sessionActionTitle').textContent = info.title
+  $('sessionActionText').textContent = info.text
+  $('sessionActionError').textContent = ''
+  const field = $('sessionResetField')
+  const select = $('sessionResetDevice')
+  const confirm = $('confirmSessionAction')
+  confirm.className = 'btn' + (info.danger ? ' danger' : '')
+  confirm.textContent = info.confirm
+  confirm.disabled = false
+  if (action === 'reset') {
+    field.hidden = false
+    select.replaceChildren()
+    for (const device of state.devices) {
+      const option = el('option', null, device.label || device.deviceId)
+      option.value = device.deviceId
+      select.append(option)
+    }
+    if (state.devices.length === 0) {
+      const option = el('option', null, '没有可用设备')
+      option.value = ''
+      select.append(option)
+      $('sessionActionError').textContent = '没有可指定的设备；请先创建设备接入密钥'
+      confirm.disabled = true
+    }
+  } else {
+    field.hidden = true
+  }
+  $('sessionDialog').classList.remove('closing')
+  $('sessionDialog').hidden = false
+  document.body.classList.add('modal-open')
+  setTimeout(() => confirm.focus(), 30)
+}
+
+function closeSessionAction() {
+  state.sessionAction = null
+  closeModal('sessionDialog')
+}
+
+function normalizeColor(value) {
+  const color = String(value || '').trim().toLowerCase()
+  return /^#[0-9a-f]{6}$/u.test(color) ? color : null
+}
+
+function applyColorDraft(value) {
+  const color = normalizeColor(value)
+  if (color === null) return
+  $('deviceColorPicker').value = color
+  $('deviceColorHex').value = color
+  $('colorPreviewAvatar').style.background = color
+  $('colorPreviewAvatar').style.color = readableOn(color)
+  for (const button of $('deviceColorPresets').querySelectorAll('.color-preset')) {
+    button.classList.toggle('on', button.dataset.color === color)
+  }
+}
+
+function openColorDialog(device) {
+  state.colorTarget = device
+  $('colorDeviceName').textContent = device.label || device.deviceId
+  $('colorPreviewName').textContent = device.label || device.deviceId
+  $('colorPreviewAvatar').textContent = deviceInitial(device)
+  $('colorError').textContent = ''
+  $('deviceColorPresets').replaceChildren(...DEVICE_COLOR_PRESETS.map((color) => {
+    const button = el('button', 'color-preset')
+    button.type = 'button'
+    button.dataset.color = color
+    button.style.background = color
+    button.title = color
+    button.onclick = () => applyColorDraft(color)
+    return button
+  }))
+  applyColorDraft(device.color || historyDeviceColor(device.deviceId))
+  $('colorDialog').classList.remove('closing')
+  $('colorDialog').hidden = false
+  document.body.classList.add('modal-open')
+  setTimeout(() => $('deviceColorPicker').focus(), 30)
+}
+
+function closeColorDialog() {
+  state.colorTarget = null
+  closeModal('colorDialog')
+}
+
+async function saveDeviceColor() {
+  const target = state.colorTarget
+  if (target === null) return
+  const color = normalizeColor($('deviceColorHex').value)
+  if (color === null) {
+    $('colorError').textContent = '请输入 #rrggbb 格式的颜色'
+    return
+  }
+  const button = $('saveColor')
+  button.disabled = true
+  button.textContent = '保存中…'
+  try {
+    await api('/admin/devices/' + encodeURIComponent(target.deviceId), {
+      method: 'PATCH',
+      body: JSON.stringify({ color }),
+    })
+    closeColorDialog()
+    showToast('设备颜色已更新')
+    await refresh(true)
+  } catch (error) {
+    $('colorError').textContent = error.message
+  } finally {
+    button.disabled = false
+    button.textContent = '保存颜色'
+  }
+}
+
+function switchHistoryPane(name) {
+  for (const tab of document.querySelectorAll('.history-tab')) {
+    tab.classList.toggle('on', tab.dataset.pane === name)
+  }
+  for (const pane of ['timeline', 'devices', 'heatmap']) {
+    const node = $('history' + pane[0].toUpperCase() + pane.slice(1) + 'Pane')
+    if (node !== null) node.hidden = pane !== name
+  }
+}
+
+function renderHistoryGantt(events) {
+  const wrap = $('historyGantt')
+  const byDevice = new Map()
+  for (const event of events) {
+    if ((event.kind !== 'create' && event.kind !== 'append') || !event.deviceId) continue
+    const entry = byDevice.get(event.deviceId) || {
+      deviceId: event.deviceId,
+      label: event.deviceLabel || historyDeviceLabel(event.deviceId),
+      color: event.deviceColor || historyDeviceColor(event.deviceId),
+      firstAt: event.at,
+      lastAt: event.at,
+      events: 0,
+      bytes: 0,
+    }
+    entry.firstAt = Math.min(entry.firstAt, event.at)
+    entry.lastAt = Math.max(entry.lastAt, event.at)
+    entry.events += event.events
+    entry.bytes += event.bytes
+    byDevice.set(event.deviceId, entry)
+  }
+  if (byDevice.size === 0) {
+    wrap.replaceChildren(el('div', 'history-empty', '还没有设备活动。'))
+    return
+  }
+  const entries = [...byDevice.values()]
+  const minAt = Math.min(...entries.map((entry) => entry.firstAt))
+  const maxAt = Math.max(...entries.map((entry) => entry.lastAt))
+  const span = Math.max(1, maxAt - minAt)
+  wrap.replaceChildren(...entries.map((entry) => {
+    const row = el('div', 'history-gantt-row')
+    const label = el('div', 'history-gantt-label')
+    const dot = el('i')
+    dot.style.background = entry.color
+    label.append(dot, el('span', null, entry.label))
+    const track = el('div', 'history-gantt-track')
+    const bar = el('div', 'history-gantt-bar')
+    bar.style.background = entry.color
+    bar.style.left = ((entry.firstAt - minAt) / span * 100) + '%'
+    bar.style.width = Math.max(2, (entry.lastAt - entry.firstAt) / span * 100) + '%'
+    bar.title = entry.label + ' · ' + formatAgo(entry.firstAt) + ' → ' + formatAgo(entry.lastAt) + ' · ' + entry.events + ' 事件'
+    track.append(bar)
+    row.append(label, track)
+    return row
+  }))
+}
+
+async function renderHistoryHeatmap(session) {
+  const grid = $('historyHeatmap')
+  grid.replaceChildren(el('div', 'history-empty', '正在读取…'))
+  const end = new Date()
+  end.setHours(0, 0, 0, 0)
+  const start = new Date(end)
+  start.setDate(start.getDate() - 89)
+  const params = new URLSearchParams({
+    from: String(start.getTime()),
+    to: String(end.getTime() + 24 * 60 * 60 * 1000),
+    tzOffset: String(-new Date().getTimezoneOffset()),
+    sessionId: session.sessionId,
+  })
+  try {
+    const data = await api('/admin/activity?' + params.toString())
+    const byDay = new Map(data.days.map((day) => [day.day, day]))
+    const thresholds = activityThresholds(data.days)
+    const maxEvents = data.days.reduce((max, day) => Math.max(max, day.events), 0)
+    const cells = []
+    const startWeekday = (start.getDay() + 6) % 7
+    for (let index = 0; index < startWeekday; index += 1) cells.push(el('div', 'heat-cell heat-blank'))
+    for (let cursor = new Date(start); cursor <= end; cursor.setDate(cursor.getDate() + 1)) {
+      const key = dateKey(cursor)
+      const day = byDay.get(key)
+      const events = day === undefined ? 0 : day.events
+      const cell = el('div', 'heat-cell heat-level-' + activityLevel(events, thresholds, maxEvents))
+      cell.title = key + ' · ' + events + ' 事件' + (day === undefined ? '' : ' · ' + formatBytes(day.bytes))
+      cells.push(cell)
+    }
+    grid.replaceChildren(...cells)
+  } catch (error) {
+    if (error.message !== 'unauthorized') grid.replaceChildren(el('div', 'history-empty', '热力图读取失败：' + error.message))
+  }
+}
+
+function openHistory(session) {
+  $('historySession').textContent = shortDisplayId(session.sessionId) + (session.workspaceKey ? ' · 工作区 ' + session.workspaceKey.slice(0, 12) + '…' : '')
+  $('historySummary').replaceChildren()
+  $('historyList').replaceChildren(el('div', 'history-empty', '正在读取历史…'))
+  $('historyError').textContent = ''
+  switchHistoryPane('timeline')
+  $('historyDialog').classList.remove('closing')
+  $('historyDialog').hidden = false
+  document.body.classList.add('modal-open')
+  void loadHistory(session)
+}
+
+function closeHistory() {
+  closeModal('historyDialog')
+}
+
+function shortDisplayId(id) {
+  return id.length > 32 ? id.slice(0, 30) + '…' : id
+}
+
+function historyEventLabel(kind) {
+  const labels = {
+    create: '创建并上传',
+    append: '更新',
+    'device-delete': '设备删除',
+    archive: '存档',
+    remove: '移除',
+    reset: '重置',
+    restore: '恢复',
+  }
+  return labels[kind] || kind
+}
+
+const DEVICE_COLOR_PRESETS = ['#5b88ff', '#5ed392', '#f0b64a', '#c084fc', '#38bdf8', '#f472b6', '#a3e635', '#fb923c', '#94a3b8', '#f87171']
+const HISTORY_DEVICE_COLORS = DEVICE_COLOR_PRESETS
+
+function historyDeviceColor(id) {
+  let hash = 0
+  for (const char of String(id || '')) hash = (hash * 31 + char.charCodeAt(0)) | 0
+  return HISTORY_DEVICE_COLORS[Math.abs(hash) % HISTORY_DEVICE_COLORS.length]
+}
+
+function historyDeviceLabel(id) {
+  if (!id) return '管理台'
+  const device = state.devices.find((item) => item.deviceId === id)
+  return device ? device.label || device.deviceId : id
+}
+
+function historyEventDetail(event) {
+  const parts = []
+  if (event.kind === 'create' || event.kind === 'append') {
+    if (event.events > 0) parts.push('+' + event.events + ' 事件')
+    if (event.bytes > 0) parts.push(formatBytes(event.bytes))
+    if (event.batchCount > 0) parts.push(event.batchCount + ' 批')
+    if (event.seqFrom !== null && event.seqTo !== null) parts.push('seq ' + event.seqFrom + '–' + event.seqTo)
+    if (event.detail && event.detail.tailReplaced === true) parts.push('替换尾部')
+  } else if (event.kind === 'reset') {
+    const deviceId = event.detail && typeof event.detail === 'object' ? event.detail.deviceId : null
+    if (deviceId) parts.push('指定 ' + historyDeviceLabel(deviceId))
+    if (event.bytes > 0) parts.push('释放 ' + formatBytes(event.bytes))
+  } else if (event.kind === 'remove') {
+    if (event.bytes > 0) parts.push('释放 ' + formatBytes(event.bytes))
+  }
+  if (event.detail && event.detail.backfilled === true) parts.push('回填')
+  return parts.join(' · ')
+}
+
+function historyRunDetail(run) {
+  const parts = []
+  if (run.events > 0) parts.push('+' + run.events + ' 事件')
+  if (run.bytes > 0) parts.push(formatBytes(run.bytes))
+  if (run.batches > 0) parts.push(run.batches + ' 批')
+  if (run.seqFrom !== null && run.seqTo !== null) parts.push('seq ' + run.seqFrom + '–' + run.seqTo)
+  return parts.join(' · ')
+}
+
+async function loadHistory(session) {
+  try {
+    const data = await api('/admin/sessions/' + encodeURIComponent(session.sessionId) + '/history?limit=200')
+    const summary = data.summary
+    const chips = [
+      '总事件 ' + summary.events,
+      '总批次 ' + summary.batches,
+      '总大小 ' + formatBytes(summary.bytes),
+      '设备 ' + summary.devices,
+      summary.firstAt !== null ? '首次 ' + formatAgo(summary.firstAt) : '还没有事件',
+      summary.lastAt !== null ? '最后 ' + formatAgo(summary.lastAt) : '',
+    ].filter((chip) => chip !== '')
+    const deviceLegend = new Map()
+    for (const event of data.events) {
+      if (event.deviceId && !deviceLegend.has(event.deviceId)) {
+        deviceLegend.set(event.deviceId, {
+          label: event.deviceLabel || historyDeviceLabel(event.deviceId),
+          color: event.deviceColor || historyDeviceColor(event.deviceId),
+        })
+      }
+    }
+    function deviceLegendColor(deviceId) {
+      return deviceLegend.get(deviceId)?.color || historyDeviceColor(deviceId)
+    }
+    $('historySummary').replaceChildren(
+      ...chips.map((chip) => el('span', 'history-chip', chip)),
+      ...[...deviceLegend.entries()].map(([deviceId, entry]) => {
+        const chip = el('span', 'history-chip')
+        const dot = el('i')
+        dot.style.background = deviceLegendColor(deviceId)
+        chip.append(dot, el('span', null, entry.label))
+        return chip
+      }),
+    )
+    const list = $('historyList')
+    if (data.events.length === 0) {
+      list.replaceChildren(el('div', 'history-empty', '还没有这个会话的历史记录。'))
+      renderHistoryGantt([])
+      void renderHistoryHeatmap(session)
+      return
+    }
+    const ordered = [...data.events].reverse()
+    const rows = []
+    let run = null
+    for (const event of ordered) {
+      if (event.kind === 'create') {
+        if (run !== null) { rows.push(run); run = null }
+        rows.push({ kind: 'event', event })
+        continue
+      }
+      if (event.kind === 'append') {
+        if (run !== null && run.deviceId === event.deviceId) {
+          run.events += event.events
+          run.bytes += event.bytes
+          run.batches += event.batchCount
+          run.lastAt = event.at
+          if (event.seqFrom !== null) run.seqFrom = run.seqFrom === null ? event.seqFrom : Math.min(run.seqFrom, event.seqFrom)
+          if (event.seqTo !== null) run.seqTo = run.seqTo === null ? event.seqTo : Math.max(run.seqTo, event.seqTo)
+          run.last = event
+          continue
+        }
+        if (run !== null) rows.push(run)
+        run = {
+          kind: 'run', deviceId: event.deviceId, first: event, last: event,
+          events: event.events, bytes: event.bytes, batches: event.batchCount,
+          seqFrom: event.seqFrom, seqTo: event.seqTo, firstAt: event.at, lastAt: event.at,
+        }
+        continue
+      }
+      if (run !== null) { rows.push(run); run = null }
+      rows.push({ kind: 'event', event })
+    }
+    if (run !== null) rows.push(run)
+    list.replaceChildren(...rows.map((row) => {
+      if (row.kind === 'run') {
+        const timeCell = el('div', 'history-time', formatAgo(row.firstAt))
+        timeCell.title = time(row.firstAt) + ' → ' + time(row.lastAt)
+        const main = el('div', 'history-main')
+        main.append(
+          el('div', 'history-title', historyEventLabel(row.first.kind) + ' · ' + historyDeviceLabel(row.deviceId)),
+          el('div', 'history-detail', historyRunDetail(row)),
+        )
+        const rail = el('div', 'history-rail')
+        const dot = el('i', 'history-dot')
+        dot.style.setProperty('--dot-color', row.first.deviceColor || historyDeviceColor(row.deviceId))
+        rail.append(dot)
+        const item = el('div', 'history-item')
+        item.append(timeCell, rail, main)
+        return item
+      }
+      const event = row.event
+      const timeCell = el('div', 'history-time', formatAgo(event.at))
+      timeCell.title = time(event.at)
+      const main = el('div', 'history-main')
+      const title = historyEventLabel(event.kind) + (event.kind === 'reset' || event.kind === 'archive' || event.kind === 'remove' || event.kind === 'restore' ? ' · 管理台' : ' · ' + historyDeviceLabel(event.deviceId))
+      main.append(el('div', 'history-title', title))
+      const detail = historyEventDetail(event)
+      if (detail !== '') main.append(el('div', 'history-detail', detail))
+      const className = event.kind === 'remove' || event.kind === 'reset' || event.kind === 'device-delete' ? 'history-item gone' : event.kind === 'archive' || event.kind === 'restore' ? 'history-item admin' : 'history-item'
+      const rail = el('div', 'history-rail')
+      const dot = el('i', 'history-dot')
+      if (event.kind === 'create' || event.kind === 'append') dot.style.setProperty('--dot-color', event.deviceColor || historyDeviceColor(event.deviceId))
+      rail.append(dot)
+      const item = el('div', className)
+      item.append(timeCell, rail, main)
+      return item
+    }))
+    renderHistoryGantt(data.events)
+    void renderHistoryHeatmap(session)
+  } catch (error) {
+    $('historyError').textContent = error.message
+  }
+}
+
+async function confirmSessionAction() {
+  const pending = state.sessionAction
+  if (pending === null) return
+  const { session, action } = pending
+  const button = $('confirmSessionAction')
+  $('sessionActionError').textContent = ''
+  button.disabled = true
+  const label = button.textContent
+  button.textContent = '处理中…'
+  try {
+    const body = { createdAt: session.createdAt }
+    if (action === 'reset') {
+      const deviceId = $('sessionResetDevice').value
+      if (deviceId === '') throw new Error('请选择一台设备')
+      body.deviceId = deviceId
+    }
+    await api('/admin/sessions/' + encodeURIComponent(session.sessionId) + '/' + action, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    })
+    closeSessionAction()
+    showToast('会话操作完成')
+    await refresh(true)
+    await loadAudit(true)
+  } catch (error) {
+    $('sessionActionError').textContent = error.message
+  } finally {
+    button.disabled = false
+    button.textContent = label
+  }
+}
+
+async function savePassword() {
+  const current = $('currentPassword').value
+  const next = $('newPassword').value
+  const confirm = $('confirmPassword').value
+  $('passwordError').textContent = ''
+  if (current === '') { $('passwordError').textContent = '请输入当前密码'; return }
+  if (next !== confirm) { $('passwordError').textContent = '两次输入的新密码不一致'; return }
+  if (next === '') { $('passwordError').textContent = '请输入新密码'; return }
+  const button = $('savePassword')
+  button.disabled = true
+  button.textContent = '保存中…'
+  try {
+    await api('/admin/password', {
+      method: 'POST',
+      body: JSON.stringify({ currentPassword: current, newPassword: next }),
+    })
+    closePassword()
+    showToast('管理密码已修改')
+    await loadAudit(true)
+  } catch (error) {
+    $('passwordError').textContent = error.message
+  } finally {
+    button.disabled = false
+    button.textContent = '保存'
+  }
+}
+
 function filteredSessions() {
   const query = $('sessionSearch').value.trim().toLowerCase()
   const mode = $('sessionFilter').value
   return state.sessions.filter((session) => {
-    if (query && !session.sessionId.toLowerCase().includes(query)) return false
+    if (state.activityDaySessionIds !== null && !state.activityDaySessionIds.has(session.sessionId)) return false
+    if (query && !session.sessionId.toLowerCase().includes(query) && !(session.workspaceKey || '').toLowerCase().includes(query)) return false
     if (mode === 'active' && session.deletedAt !== null) return false
     if (mode === 'deleted' && session.deletedAt === null) return false
     return true
@@ -664,42 +1768,125 @@ function filteredSessions() {
 
 function sessionRow(session) {
   const row = el('tr')
+  const resetting = session.resetExpiresAt !== null && session.resetExpiresAt !== undefined && session.resetExpiresAt > Date.now()
   const idCell = el('td', 'session-id')
   idCell.append(el('code', null, session.sessionId))
-  const copy = el('button', 'row-copy', '复制')
+  const copy = el('button', 'row-copy')
   copy.type = 'button'
+  copy.title = '复制 session id'
+  copy.append(icon('copy', 11))
   copy.onclick = () => copyText(session.sessionId)
   idCell.append(copy)
-  row.append(idCell, el('td', null, 'v' + session.formatVersion), el('td', null, String(session.batchCount)), el('td', null, String(session.lastSeq)), el('td', null, time(session.updatedAt)))
+  row.append(
+    idCell,
+    el('td', null, resetting ? '—' : 'v' + session.formatVersion),
+    el('td', null, resetting ? '—' : String(session.batchCount)),
+    el('td', null, resetting ? '—' : String(session.lastSeq)),
+    el('td', null, resetting ? '—' : formatBytes(session.storedBytes)),
+    agoCell(session.updatedAt),
+  )
   const status = el('td')
-  status.append(el('span', 'badge' + (session.deletedAt === null ? ' good' : ' bad'), session.deletedAt === null ? '正常' : '已删除'))
-  row.append(status)
+  const purged = session.purgedAt !== null && session.purgedAt !== undefined
+  const deleted = session.deletedAt !== null && session.deletedAt !== undefined
+  status.append(el('span', 'badge' + (resetting ? ' accent' : deleted ? ' bad' : ' good'), resetting ? '重置中' : purged ? '已移除' : deleted ? (session.deletedBy === 'admin:archive' ? '已存档' : '已删除') : '正常'))
+  const actions = el('td')
+  const actionBox = el('div', 'row-actions')
+  if (resetting) {
+    actionBox.append(sessionActionButton(session, '取消重置', 'clear-reset'))
+  } else {
+    if (!deleted) actionBox.append(sessionActionButton(session, '存档', 'archive'))
+    if (deleted && !purged) actionBox.append(sessionActionButton(session, '恢复', 'restore'))
+    if (!purged) actionBox.append(sessionActionButton(session, '移除', 'remove', true))
+    actionBox.append(sessionActionButton(session, '重置', 'reset'))
+  }
+  actionBox.append(sessionHistoryButton(session))
+  actions.append(actionBox)
+  row.append(status, actions)
   return row
 }
 
+/**
+ * 生成会话操作按钮；具体行为由 openSessionAction 处理。
+ * @param {object} session - 会话行。
+ * @param {string} label - 按钮文字。
+ * @param {'archive'|'restore'|'remove'|'reset'|'clear-reset'} action - 动作。
+ * @param {boolean} danger - 是否危险色。
+ */
+function sessionHistoryButton(session) {
+  const button = el('button', 'btn tiny secondary')
+  button.type = 'button'
+  button.textContent = '详情'
+  button.onclick = () => openHistory(session)
+  return button
+}
+
+function sessionActionButton(session, label, action, danger) {
+  const button = el('button', 'btn tiny' + (danger ? ' danger' : ' secondary'))
+  button.type = 'button'
+  button.textContent = label
+  button.onclick = () => openSessionAction(session, action)
+  return button
+}
+
+function workspaceAlias(key) {
+  if (!key) return ''
+  try { return localStorage.getItem(WORKSPACE_ALIAS_PREFIX + key) || '' } catch { return '' }
+}
+
+function saveWorkspaceAlias(key, value) {
+  if (!key) return
+  try {
+    const trimmed = String(value || '').trim()
+    if (trimmed === '') localStorage.removeItem(WORKSPACE_ALIAS_PREFIX + key)
+    else localStorage.setItem(WORKSPACE_ALIAS_PREFIX + key, trimmed)
+  } catch {
+    // 浏览器禁用 localStorage 时别名不持久化，不影响服务端数据。
+  }
+}
+const WORKSPACE_ALIAS_PREFIX = 'dsh-sync-workspace-alias:'
+
 function workspaceGroupRow(group) {
   const row = el('tr', 'session-group')
   const cell = el('td')
-  cell.colSpan = 6
+  cell.colSpan = 8
   const head = el('div', 'session-group-head')
+  const collapseKey = group.key || '__unmapped__'
+  const collapsed = state.collapsed.has(collapseKey)
+  const chev = el('button', 'chev' + (collapsed ? ' closed' : ''))
+  chev.type = 'button'
+  chev.title = collapsed ? '展开' : '折叠'
+  chev.append(icon('chevron', 12))
+  chev.onclick = (event) => {
+    event.stopPropagation()
+    if (collapsed) state.collapsed.delete(collapseKey)
+    else state.collapsed.add(collapseKey)
+    renderSessions()
+  }
+  head.append(chev)
   if (group.key) {
     const input = el('input', 'workspace-alias')
     input.value = workspaceAlias(group.key)
-    input.placeholder = '工作区本机别名（仅浏览器）'
+    input.placeholder = '工作区别名（可选）'
     input.setAttribute('aria-label', '工作区别名')
+    input.onclick = (event) => event.stopPropagation()
     input.onchange = () => saveWorkspaceAlias(group.key, input.value)
     head.append(input)
+  } else {
+    head.append(el('b', null, '未归属'))
   }
   const keyLine = el('div', 'session-group-key')
-  keyLine.append(el('code', null, group.key ? group.key.slice(0, 16) + '…' : '未归属（子代理/旧 manifest）'))
+  keyLine.append(el('code', null, group.key ? group.key.slice(0, 16) + '…' : '子代理 / 较早版本'))
   if (group.key) {
-    const copy = el('button', 'row-copy', '复制')
+    const copy = el('button', 'row-copy')
     copy.type = 'button'
-    copy.onclick = () => copyText(group.key)
+    copy.title = '复制工作区标识'
+    copy.append(icon('copy', 11))
+    copy.onclick = (event) => { event.stopPropagation(); copyText(group.key) }
     keyLine.append(copy)
   }
   head.append(keyLine)
-  head.append(el('div', 'session-group-meta', group.sessions.length + ' 个会话 · 最近 ' + time(group.sessions[0].updatedAt)))
+  const totalBytes = group.sessions.reduce((sum, session) => sum + (session.storedBytes || 0), 0)
+  head.append(el('div', 'session-group-meta', group.sessions.length + ' 个 · ' + formatBytes(totalBytes)))
   cell.append(head)
   row.append(cell)
   return row
@@ -710,7 +1897,6 @@ function renderSessions() {
   const sessions = filteredSessions()
   $('sessionBadge').textContent = (sessions.length === all.length ? all.length : sessions.length + ' / ' + all.length) + ' 个'
   const body = $('sessions')
-  // 会话按 manifest 里的 opaque workspaceKey 分组；子代理没有 key，归到“未归属”。
   const groups = new Map()
   for (const session of sessions) {
     const key = session.workspaceKey || null
@@ -725,18 +1911,21 @@ function renderSessions() {
   })
   const rows = []
   for (const group of ordered) {
+    const collapseKey = group.key || '__unmapped__'
     rows.push(workspaceGroupRow(group))
+    if (state.collapsed.has(collapseKey)) continue
     for (const session of group.sessions) rows.push(sessionRow(session))
   }
   body.replaceChildren(...rows)
   const empty = $('sessionsEmpty')
-  const table = body.closest('.table-wrap')
+  const table = $('sessionTableWrap')
   if (sessions.length === 0) {
     table.hidden = true
     empty.hidden = false
     empty.replaceChildren()
     if (all.length === 0) {
-      empty.append(el('b', null, '还没有同步过会话'), el('span', null, '接入 DSH 插件后，会话会出现在这里。'))
+      const mark = el('div', 'icon'); mark.append(icon('sessions', 22))
+      empty.append(mark, el('b', null, '还没有同步过会话'), el('span', null, '接入 DSH 插件后，会话会出现在这里。'))
       const button = el('button', 'btn secondary small', '签发第一台设备')
       button.type = 'button'
       button.onclick = () => { $('deviceLabel').focus(); $('deviceLabel').scrollIntoView({ behavior: 'smooth', block: 'center' }) }
@@ -754,29 +1943,140 @@ function renderSessions() {
   }
 }
 
-const WORKSPACE_ALIAS_PREFIX = 'dsh-sync-workspace-alias:'
+const AUDIT_ACTIONS = {
+  'login': '登录',
+  'login_failed': '登录失败',
+  'logout': '退出登录',
+  'device.create': '签发设备',
+  'device.rename': '设备改名',
+  'device.revoke': '吊销设备',
+  'quota.change': '修改配额',
+  'password.change': '修改密码',
+  'password.change_failed': '修改密码失败',
+  'password.reset_cli': 'CLI 重置密码',
+  'setup.password': '初始化密码',
+  'setup.quota': '初始化配额',
+  'setup.device': '初始化设备',
+  'setup.complete': '完成初始化',
+  'session.delete': '删除会话',
+  'session.archive': '存档会话',
+  'session.remove': '移除会话',
+  'session.reset': '重置会话',
+  'session.restore': '恢复会话',
+  'session.reset_cleared': '取消重置',
+}
 
-function workspaceAlias(key) {
-  if (!key) return ''
-  try { return localStorage.getItem(WORKSPACE_ALIAS_PREFIX + key) || '' } catch { return '' }
+function auditActionLabel(action) {
+  return AUDIT_ACTIONS[action] || action
 }
 
-function saveWorkspaceAlias(key, value) {
-  if (!key) return
+function auditActionTone(action) {
+  if (action === 'device.revoke' || action === 'session.delete' || action === 'session.remove' || action === 'session.reset' || action === 'login_failed' || action === 'password.change_failed') return 'bad'
+  if (action === 'device.create' || action === 'login' || action === 'setup.complete') return 'good'
+  if (action === 'device.rename' || action === 'quota.change' || action === 'password.change' || action === 'password.reset_cli' || action === 'session.archive' || action === 'session.restore' || action === 'session.reset_cleared') return 'warn'
+  return ''
+}
+
+function auditTargetText(target) {
+  if (target === null || target === '') return '—'
+  return target
+}
+
+function auditDetailText(action, detail) {
+  if (detail === null || detail === undefined) return '—'
+  if (typeof detail !== 'object') return String(detail)
+  if ('reason' in detail) return String(detail.reason)
+  if ('from' in detail && 'to' in detail) {
+    if (action === 'quota.change') return formatBytes(detail.from) + ' → ' + formatBytes(detail.to)
+    return String(detail.from) + ' → ' + String(detail.to)
+  }
+  if ('maxBytes' in detail) return formatBytes(detail.maxBytes)
+  if ('label' in detail) return '标签 ' + String(detail.label)
+  if ('createdAt' in detail) return 'createdAt ' + time(detail.createdAt)
+  return Object.entries(detail).map(([key, value]) => {
+    const text = value !== null && typeof value === 'object' ? JSON.stringify(value) : String(value)
+    return key + ': ' + text
+  }).join(' · ')
+}
+
+function renderAudit() {
+  const query = $('auditSearch').value.trim().toLowerCase()
+  const rows = state.audit.filter((event) => {
+    if (query === '') return true
+    return (event.actorLabel || '').toLowerCase().includes(query)
+      || (event.target || '').toLowerCase().includes(query)
+      || (event.action || '').toLowerCase().includes(query)
+  })
+  const body = $('auditRows')
+  body.replaceChildren(...rows.map((event) => {
+    const row = el('tr')
+    const timeCell = el('td', 'muted', formatAgo(event.at))
+    timeCell.title = time(event.at)
+    const actionCell = el('td')
+    actionCell.append(el('span', 'audit-action ' + auditActionTone(event.action), auditActionLabel(event.action)))
+    const actorCell = el('td')
+    actorCell.append(el('span', null, event.actorLabel || event.actorId))
+    if (event.actorKind === 'device') {
+      const id = el('span', 'audit-target', ' · ' + event.actorId)
+      id.title = event.actorId
+      actorCell.append(id)
+    }
+    const targetCell = el('td')
+    const target = auditTargetText(event.target)
+    targetCell.append(el('code', 'audit-target', target))
+    targetCell.title = target
+    const detailCell = el('td', 'audit-detail', auditDetailText(event.action, event.detail))
+    const meta = [event.ip, event.userAgent].filter((value) => value !== null && value !== undefined && value !== '')
+    if (meta.length > 0) detailCell.title = meta.join(' · ')
+    row.title = event.actorId + (meta.length > 0 ? ' · ' + meta.join(' · ') : '')
+    row.append(timeCell, actionCell, actorCell, targetCell, detailCell)
+    return row
+  }))
+  $('auditBadge').textContent = rows.length + ' 条'
+  const table = body.closest('.table-wrap')
+  table.hidden = rows.length === 0
+  const empty = $('auditEmpty')
+  empty.hidden = rows.length > 0
+  empty.replaceChildren()
+  if (rows.length === 0) {
+    const mark = el('div', 'icon'); mark.append(icon('audit', 22))
+    empty.append(mark, el('b', null, '还没有审计记录'), el('span', null, '登录、签发设备、修改配额等动作会出现在这里。'))
+  }
+  $('auditMoreWrap').hidden = !state.auditHasMore
+}
+
+async function loadAudit(reset) {
+  const button = $('auditRefresh')
+  button.disabled = true
   try {
-    const trimmed = String(value || '').trim()
-    if (trimmed === '') localStorage.removeItem(WORKSPACE_ALIAS_PREFIX + key)
-    else localStorage.setItem(WORKSPACE_ALIAS_PREFIX + key, trimmed)
-  } catch {
-    // 浏览器禁用 localStorage 时别名只是不持久化，不影响服务端数据。
+    const action = $('auditFilter').value
+    const params = new URLSearchParams({ limit: '100' })
+    if (action !== '') params.set('action', action)
+    if (!reset && state.auditBefore !== null) params.set('before', String(state.auditBefore))
+    const data = await api('/admin/audit?' + params.toString())
+    state.audit = reset ? data.events : state.audit.concat(data.events)
+    state.auditBefore = data.nextBefore
+    state.auditHasMore = data.nextBefore !== null
+    renderAudit()
+  } catch (error) {
+    if (isUninitialized(error)) {
+      location.replace('/setup')
+      return
+    }
+    if (error.message !== 'unauthorized') showToast(error.message, true)
+  } finally {
+    button.disabled = false
   }
 }
 
 async function refresh(silent) {
   const button = $('refresh')
+  const svg = button.querySelector('svg')
   if (!silent) {
     button.disabled = true
-    button.textContent = '刷新中…'
+    if (svg) svg.classList.add('spinner')
+    button.textContent = ''
+    button.append(svg || icon('refresh', 14), el('span', null, '刷新中…'))
   }
   try {
     const [overview, devices, sessions] = await Promise.all([
@@ -787,25 +2087,53 @@ async function refresh(silent) {
     state.overview = overview
     state.devices = devices
     state.sessions = sessions
+    updatedAt = Date.now()
     showApp()
     renderMetrics(overview)
-    renderDevices(devices)
-    // 正在编辑工作区别名时不重绘会话表，避免 10 秒轮询抢走焦点。
+    if (state.editingDeviceId === null) renderDevices(devices)
     if (!$('sessions').contains(document.activeElement)) renderSessions()
     $('healthText').textContent = '服务正常'
+    $('health').classList.remove('bad')
+    $('updatedBadge').textContent = '更新于 ' + formatAgo(updatedAt)
+    void loadActivity()
   } catch (error) {
+    if (isUninitialized(error)) {
+      location.replace('/setup')
+      return
+    }
     if (error.message !== 'unauthorized') {
       $('healthText').textContent = '连接异常'
+      $('health').classList.add('bad')
       showToast(error.message, true)
     }
   } finally {
     if (!silent) {
       button.disabled = false
-      button.textContent = '刷新'
+      button.textContent = ''
+      button.append(icon('refresh', 14), el('span', null, '刷新'))
     }
   }
 }
 
+function startPolling() {
+  if (pollTimer !== null) clearInterval(pollTimer)
+  pollTimer = setInterval(() => {
+    if (state.autoRefresh && !$('appView').hidden) refresh(true)
+  }, 10000)
+}
+
+$('refresh').append(icon('refresh', 14), el('span', null, '刷新'))
+$('sessionsIcon').append(icon('sessions', 15))
+$('storageIcon').append(icon('storage', 15))
+$('devicesIcon').append(icon('devices', 15))
+$('activityIcon').append(icon('activity', 15))
+$('auditIcon').append(icon('audit', 15))
+for (const [action, label] of Object.entries(AUDIT_ACTIONS)) {
+  const option = el('option', null, label)
+  option.value = action
+  $('auditFilter').append(option)
+}
+
 $('loginButton').onclick = async () => {
   const button = $('loginButton')
   $('loginError').textContent = ''
@@ -824,11 +2152,17 @@ $('loginButton').onclick = async () => {
     })
     if (!response.ok) {
       const payload = await response.json().catch(() => ({}))
-      $('loginError').textContent = (payload && payload.error && payload.error.message) || '登录失败'
+      const message = (payload && payload.error && payload.error.message) || '登录失败'
+      if (response.status === 409 && /初始化/u.test(message)) {
+        location.replace('/setup')
+        return
+      }
+      $('loginError').textContent = message
       return
     }
     $('password').value = ''
     await refresh(false)
+    await loadAudit(true)
   } catch (error) {
     $('loginError').textContent = error.message || '登录失败'
   } finally {
@@ -848,7 +2182,14 @@ $('logout').onclick = async () => {
   await fetch('/admin/logout', { method: 'POST' }).catch(() => {})
   showLogin()
 }
-$('refresh').onclick = () => refresh(false)
+$('refresh').onclick = () => { refresh(false); loadAudit(true) }
+$('autoRefresh').addEventListener('change', (event) => { state.autoRefresh = event.target.checked })
+$('quotaPresets').addEventListener('click', (event) => {
+  const button = event.target.closest('.preset')
+  if (!button) return
+  $('quotaGb').value = button.dataset.gb
+  for (const item of $('quotaPresets').querySelectorAll('.preset')) item.classList.toggle('on', item === button)
+})
 $('quotaForm').addEventListener('submit', async (event) => {
   event.preventDefault()
   const button = $('saveQuota')
@@ -863,7 +2204,7 @@ $('quotaForm').addEventListener('submit', async (event) => {
   button.disabled = true
   button.textContent = '保存中…'
   try {
-    await api('/admin/quota', { method: 'POST', body: JSON.stringify({ maxBytes: Math.round(gib * 1024 * 1024 * 1024) }) })
+    await api('/admin/quota', { method: 'POST', body: JSON.stringify({ maxBytes: Math.round(gib * GiB) }) })
     $('quotaResult').textContent = '已保存'
     $('quotaResult').className = 'inline-result good'
     await refresh(true)
@@ -895,26 +2236,221 @@ $('deviceForm').addEventListener('submit', async (event) => {
 })
 function showToken(created) {
   $('tokenValue').textContent = created.token
+  $('tokenDialog').classList.remove('closing')
   $('tokenDialog').hidden = false
   document.body.classList.add('modal-open')
   $('copyToken').onclick = () => copyText(created.token)
   setTimeout(() => $('copyToken').focus(), 30)
 }
 function closeToken() {
-  $('tokenDialog').hidden = true
-  document.body.classList.remove('modal-open')
-  $('tokenValue').textContent = ''
+  closeModal('tokenDialog')
+  setTimeout(() => { $('tokenValue').textContent = '' }, MODAL_EXIT_MS)
 }
 $('closeToken').onclick = closeToken
 $('tokenDialog').addEventListener('click', (event) => { if (event.target === $('tokenDialog')) closeToken() })
+$('cancelRevoke').onclick = closeRevoke
+$('revokeDialog').addEventListener('click', (event) => { if (event.target === $('revokeDialog')) closeRevoke() })
+$('changePassword').onclick = openPassword
+$('cancelPassword').onclick = closePassword
+$('passwordDialog').addEventListener('click', (event) => { if (event.target === $('passwordDialog')) closePassword() })
+$('savePassword').onclick = savePassword
+$('cancelSessionAction').onclick = closeSessionAction
+$('sessionDialog').addEventListener('click', (event) => { if (event.target === $('sessionDialog')) closeSessionAction() })
+$('confirmSessionAction').onclick = confirmSessionAction
+$('closeHistory').onclick = closeHistory
+for (const tab of document.querySelectorAll('.history-tab')) {
+  tab.addEventListener('click', () => switchHistoryPane(tab.dataset.pane))
+}
+$('historyDialog').addEventListener('click', (event) => { if (event.target === $('historyDialog')) closeHistory() })
+$('cancelColor').onclick = closeColorDialog
+$('colorDialog').addEventListener('click', (event) => { if (event.target === $('colorDialog')) closeColorDialog() })
+$('saveColor').onclick = saveDeviceColor
+$('deviceColorPicker').addEventListener('input', () => applyColorDraft($('deviceColorPicker').value))
+$('deviceColorHex').addEventListener('change', () => {
+  const color = normalizeColor($('deviceColorHex').value)
+  if (color === null) {
+    $('colorError').textContent = '请输入 #rrggbb 格式的颜色'
+    return
+  }
+  $('colorError').textContent = ''
+  applyColorDraft(color)
+})
+$('deviceColorHex').addEventListener('keydown', (event) => { if (event.key === 'Enter') saveDeviceColor() })
+for (const id of ['currentPassword', 'newPassword', 'confirmPassword']) {
+  $(id).addEventListener('keydown', (event) => { if (event.key === 'Enter') savePassword() })
+}
+$('confirmRevoke').onclick = async () => {
+  const deviceId = state.revokeTarget
+  if (deviceId === null) return
+  const button = $('confirmRevoke')
+  button.disabled = true
+  button.textContent = '吊销中…'
+  try {
+    await api('/admin/devices/' + encodeURIComponent(deviceId), { method: 'DELETE' })
+    closeRevoke()
+    showToast('设备已吊销')
+    await refresh(true)
+  } catch (error) {
+    showToast(error.message, true)
+  } finally {
+    button.disabled = false
+    button.textContent = '确认吊销'
+  }
+}
 document.addEventListener('keydown', (event) => {
-  if (event.key === 'Escape' && !$('tokenDialog').hidden) closeToken()
+  if (event.key !== 'Escape') return
+  if (!$('tokenDialog').hidden) closeToken()
+  if (!$('revokeDialog').hidden) closeRevoke()
+  if (!$('passwordDialog').hidden) closePassword()
+  if (!$('sessionDialog').hidden) closeSessionAction()
+  if (!$('historyDialog').hidden) closeHistory()
+  if (!$('colorDialog').hidden) closeColorDialog()
+  if (!$('activityRangePopover').hidden) closeActivityRange()
 })
 $('sessionSearch').addEventListener('input', renderSessions)
 $('sessionFilter').addEventListener('change', renderSessions)
+$('sessionDayChip').addEventListener('click', () => {
+  state.sessionDayFilter = null
+  state.activityDaySessionIds = null
+  updateSessionDayChip()
+  renderSessions()
+})
+$('auditSearch').addEventListener('input', renderAudit)
+$('auditFilter').addEventListener('change', () => loadAudit(true))
+$('auditRefresh').addEventListener('click', () => loadAudit(true))
+$('auditMore').addEventListener('click', () => loadAudit(false))
+$('activityRangeButton').addEventListener('click', (event) => {
+  event.stopPropagation()
+  if ($('activityRangePopover').hidden) openActivityRange()
+  else closeActivityRange()
+})
+$('activityCancel').addEventListener('click', closeActivityRange)
+$('activityApply').addEventListener('click', applyActivityRange)
+$('activityPresets').addEventListener('click', (event) => {
+  const button = event.target.closest('[data-days]')
+  if (!button) return
+  const days = Number(button.dataset.days)
+  const range = defaultActivityRange(days)
+  setActivityRange(range.start, range.end, days)
+  closeActivityRange()
+  void loadActivity()
+})
+for (const id of ['activityFrom', 'activityTo']) {
+  $(id).addEventListener('keydown', (event) => { if (event.key === 'Enter') applyActivityRange() })
+}
+document.addEventListener('click', (event) => {
+  if ($('activityRangePopover').hidden) return
+  const wrap = document.querySelector('.activity-range')
+  if (wrap !== null && !wrap.contains(event.target)) closeActivityRange()
+})
 
+const initialDays = window.matchMedia('(max-width: 900px)').matches ? 90 : 365
+const initialActivity = defaultActivityRange(initialDays)
+setActivityRange(initialActivity.start, initialActivity.end, initialDays)
 refresh(false)
-setInterval(() => { if (!$('appView').hidden) refresh(true) }, 10000)
+loadAudit(true)
+startPolling()
+
+// 背景：同尺寸胶囊条带；偶数行向右、奇数行向左，入场结束后只保留低速漂移。
+// 参数来自 site/bg-tune.html，控制台里降低透明度与速度，避免干扰阅读。
+;(function initAdminBackground() {
+  var CONFIG = {
+    length: 48, height: 10, radius: 5, gap: 9, row: 28,
+    alpha: 0.26, tint: '76, 98, 150', duration: 2.2, variance: 2.8,
+    rotation: 37, jitter: true,
+  }
+  var rowsBox = document.getElementById('adminBgRows')
+  if (rowsBox === null) return
+
+  var seed = 20261113
+  function random() {
+    seed = (seed + 0x6D2B79F5) | 0
+    var value = Math.imul(seed ^ (seed >>> 15), 1 | seed)
+    value = (value + Math.imul(value ^ (value >>> 7), 61 | value)) ^ value
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296
+  }
+
+  var lo = CONFIG.duration
+  var hi = Math.max(CONFIG.duration + CONFIG.variance, CONFIG.duration * 2)
+  var usedDurations = {}
+  var durations = []
+
+  function takeDuration(index) {
+    var previous = index >= 2 ? durations[index - 2] : undefined
+    for (var attempt = 0; attempt < 80; attempt += 1) {
+      var candidate = lo + random() * (hi - lo)
+      var key = candidate.toFixed(3)
+      if (usedDurations[key] === true) continue
+      if (previous !== undefined) {
+        var ratio = candidate / previous
+        if (ratio >= 0.7 && ratio <= 1.3) continue
+      }
+      usedDurations[key] = true
+      return candidate
+    }
+    var fallback = previous !== undefined && previous * 1.3 <= hi ? previous * 1.31 : lo
+    usedDurations[fallback.toFixed(3)] = true
+    return fallback
+  }
+
+  var stageW = window.innerWidth
+  var stageH = window.innerHeight
+  var planeWidth = stageW * 1.6
+  var planeHeight = stageH * 2.1
+  var lineLeft = -280
+  var lineRight = planeWidth + 280
+  var angle = CONFIG.rotation * Math.PI / 180
+  var cos = Math.cos(angle)
+  var sin = Math.sin(angle)
+  var margin = 300
+  var height = planeHeight
+  var count = Math.ceil(height / CONFIG.row) + 2
+  var fragment = document.createDocumentFragment()
+
+  for (var index = 0; index < count; index += 1) {
+    var rowGap = CONFIG.jitter
+      ? Math.max(2, Math.round(CONFIG.gap * (0.7 + random() * 0.6)))
+      : CONFIG.gap
+    var rowTile = CONFIG.length + rowGap
+    var odd = index % 2 === 1
+    var top = (CONFIG.row - CONFIG.height) / 2
+    var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + rowTile + '" height="' + CONFIG.row + '">'
+      + '<rect x="0" y="' + top + '" width="' + CONFIG.length + '" height="' + CONFIG.height
+      + '" rx="' + Math.min(CONFIG.radius, CONFIG.height / 2) + '" fill="rgba(' + CONFIG.tint + ',' + CONFIG.alpha + ')"/></svg>'
+    var duration = takeDuration(index)
+    durations[index] = duration
+    var row = document.createElement('div')
+    row.className = 'admin-bg-row' + (odd ? ' odd' : '')
+    row.style.top = (index * CONFIG.row - CONFIG.row) + 'px'
+    row.style.setProperty('--row', CONFIG.row + 'px')
+    row.style.backgroundImage = 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")'
+    row.style.backgroundPositionX = (-random() * rowTile).toFixed(1) + 'px'
+    row.style.setProperty('--dur', duration.toFixed(2) + 's')
+    row.style.animationDelay = (-random() * duration).toFixed(2) + 's, 0s'
+    row.style.setProperty('--tile', rowTile + 'px')
+
+    var yRel = (index * CONFIG.row - CONFIG.row + CONFIG.row / 2) - planeHeight / 2
+    var halfW = stageW / 2 + CONFIG.length
+    var halfH = stageH / 2 + CONFIG.height
+    var xHi = Math.min((halfW + yRel * sin) / cos, (halfH - yRel * cos) / sin)
+    var xLo = Math.max((-halfW + yRel * sin) / cos, (-halfH - yRel * cos) / sin)
+    var visHi = xHi + planeWidth / 2
+    var visLo = xLo + planeWidth / 2
+    var enterFrom
+    var enterTo
+    if (odd) {
+      enterFrom = visHi + margin - lineLeft
+      enterTo = visLo - margin - lineLeft
+    } else {
+      enterFrom = visLo - margin - lineRight
+      enterTo = visHi + margin - lineRight
+    }
+    row.style.setProperty('--enter-from', enterFrom.toFixed(1) + 'px')
+    row.style.setProperty('--enter-to', enterTo.toFixed(1) + 'px')
+    fragment.appendChild(row)
+  }
+  rowsBox.replaceChildren(fragment)
+})()
 </script>
 </body>
 </html>