dsh-agent-office 4.2.0 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-agent-office",
-  "version": "4.2.0",
+  "version": "4.5.0",
   "description": "实时 3D 办公室可视化 DSH 会话；Catora 发布后拓展笔记、思维导图、私人知识库与 RAG 检索。",
   "type": "module",
   "main": "lib/index.js",
@@ -27,6 +27,7 @@
     "NOTICE",
     "README.md",
     "screenshot.png",
+    "screenshot-day.png",
     "screenshot-focus.png",
     "screenshot-client.png"
   ],

package/panel-src/index.html

@@ -3,11 +3,12 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>智能体办公室 · DSH 会话办公室</title>
+<title>Office · DSH 会话办公室</title>
 <style>
   :root{
     --bg:#05070a;
-    --panel:rgba(12,15,20,.66);
+    --panel-rgb:12 15 20;
+    --panel-alpha:.66;
     --panel-2:rgba(17,21,28,.78);
     --line:rgba(255,255,255,.08);
     --line-2:rgba(255,255,255,.14);
@@ -20,6 +21,22 @@
     --red:#ff6b6b;
     --green:#7dd3a0;
     --purple:#a78bfa;
+    --surface:rgba(255,255,255,.035);
+    --surface-hover:rgba(255,255,255,.045);
+    --surface-active:rgba(61,225,198,.1);
+    --active-line:rgba(61,225,198,.28);
+    --track:rgba(255,255,255,.06);
+    --scroll:rgba(255,255,255,.2);
+    --scroll-hi:rgba(255,255,255,.32);
+    --label:rgba(8,11,15,.82);
+    --hint:rgba(12,15,20,.66);
+    --chip:rgba(12,18,22,.86);
+    --focus-line:rgba(61,225,198,.3);
+    --focus-btn:rgba(61,225,198,.16);
+    --focus-btn-hi:rgba(61,225,198,.26);
+    --check-bg:rgba(125,211,160,.14);
+    --check-line:rgba(125,211,160,.4);
+    --shadow:0 22px 60px rgba(0,0,0,.45);
     --radius:18px;
     --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
     --sans:Inter,system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
@@ -34,25 +51,54 @@
   #labels .lbl{pointer-events:auto;cursor:pointer}
 
   /* ---------- 顶部 ---------- */
-  #top{position:absolute;left:18px;right:18px;top:16px;height:58px;display:flex;align-items:center;gap:16px;padding:0 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);backdrop-filter:blur(16px);z-index:10}
-  .brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
-  .brand .mark{width:26px;height:26px;border-radius:9px;border:0;padding:0;background:conic-gradient(from 210deg,#3de1c6,#5b8cff,#a78bfa,#3de1c6);box-shadow:0 0 18px rgba(61,225,198,.35);position:relative;cursor:pointer;flex:none}
-  .brand .mark{cursor:default}
-  .brand .mark .icon{position:absolute;inset:0;margin:auto;width:14px;height:14px;color:#071014;transition:opacity .25s,transform .25s}
-  .brand .mark .sun{opacity:0;transform:rotate(-30deg) scale(.8)}
-  body.day .brand .mark .moon{opacity:0;transform:rotate(30deg) scale(.8)}
-  body.day .brand .mark .sun{opacity:1;transform:none}
-  body.day{--bg:#b9cbd8;--panel:rgba(10,13,18,.84);--panel-2:rgba(14,18,24,.9);--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.16)}
+  #top{box-shadow:0 10px 30px rgba(0,0,0,.18);position:absolute;left:18px;right:18px;top:16px;height:58px;display:flex;align-items:center;gap:16px;padding:0 18px;border:1px solid var(--line);border-radius:16px;background:rgb(var(--panel-rgb) / var(--glass-alpha, var(--panel-alpha)));backdrop-filter:blur(16px);z-index:10}
+  .brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
   .brand b{font-size:17px;font-weight:650;letter-spacing:-.2px}
-  .brand span{font-family:var(--mono);font-size:11px;letter-spacing:.8px;color:var(--dim);margin-left:6px}
+  .brand span{font-family:var(--mono);font-size:11px;letter-spacing:.8px;color:var(--dim)}
+  body.day{
+    --bg:#b9cbd8;
+    --panel-rgb:248 251 252;
+    --panel-alpha:.88;
+    --panel-2:rgba(255,255,255,.94);
+    --line:rgba(16,40,54,.12);
+    --line-2:rgba(16,40,54,.2);
+    --ink:#102029;
+    --dim:#455965;
+    --dim-2:#5d707d;
+    --acc:#087565;
+    --acc-2:#075e52;
+    --amber:#8a4d0f;
+    --red:#a83232;
+    --green:#256b45;
+    --purple:#5b4a9e;
+    --surface:rgba(16,40,54,.045);
+    --surface-hover:rgba(16,40,54,.065);
+    --surface-active:rgba(8,117,101,.1);
+    --active-line:rgba(8,117,101,.3);
+    --track:rgba(16,40,54,.07);
+    --scroll:rgba(16,40,54,.2);
+    --scroll-hi:rgba(16,40,54,.32);
+    --label:rgba(250,252,253,.95);
+    --hint:rgba(250,252,253,.84);
+    --chip:rgba(252,253,254,.92);
+    --focus-line:rgba(8,117,101,.3);
+    --focus-btn:rgba(8,117,101,.12);
+    --focus-btn-hi:rgba(8,117,101,.2);
+    --check-bg:rgba(37,107,69,.12);
+    --check-line:rgba(37,107,69,.4);
+    --shadow:0 16px 42px rgba(27,52,68,.14);
+  }
+  body.day #top{box-shadow:0 10px 26px rgba(27,52,68,.1)}
+  body.day #clock i{box-shadow:none}
+  body.day .panel,body.day #top,body.day .lbl,body.day .floorlbl,body.day #hint,body.day #focusChip{transition:background-color .45s,border-color .45s,color .45s,box-shadow .45s}
   .pills{display:flex;gap:8px;margin-left:auto}
   .pill{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
   .pill i{width:7px;height:7px;border-radius:50%;background:var(--dim-2)}
-  .pill b{color:var(--ink);font-weight:600;font-size:13px}
+  .pill b{color:var(--ink);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
   .pill.working i{background:var(--acc);box-shadow:0 0 8px var(--acc)}
   .pill.need i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
   .pill.stuck i{background:var(--red);box-shadow:0 0 8px var(--red)}
-  #clock{font-family:var(--mono);font-size:12px;color:var(--dim);display:flex;align-items:center;gap:8px;white-space:nowrap}
+  #clock{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--dim);display:flex;align-items:center;gap:8px;white-space:nowrap}
   #clock i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);animation:breathe 2.4s ease-in-out infinite}
   #headStats{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:18px;white-space:nowrap;pointer-events:auto}
   .hstat{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;color:var(--dim)}
@@ -71,9 +117,9 @@
   @keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
 
   /* ---------- 面板通用 ---------- */
-  .panel{position:absolute;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);backdrop-filter:blur(16px);box-shadow:0 22px 60px rgba(0,0,0,.45);z-index:9}
+  .panel{position:absolute;border:1px solid var(--line);border-radius:var(--radius);background:rgb(var(--panel-rgb) / var(--glass-alpha, var(--panel-alpha)));backdrop-filter:blur(16px);box-shadow:var(--shadow);z-index:9}
   .panel__head{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;color:var(--dim)}
-  .panel__head b{margin-left:auto;color:var(--dim);font-weight:500;letter-spacing:1px}
+  .panel__head b{margin-left:auto;color:var(--dim);font-weight:500;letter-spacing:1px;font-variant-numeric:tabular-nums}
   .panel__body{padding:0 10px 12px}
 
   /* ---------- 左侧栏：榜单 + 楼层 ---------- */
@@ -82,68 +128,82 @@
   #board{position:relative;left:auto;top:auto;width:auto;flex:1 1 auto;min-height:0;max-height:none;display:flex;flex-direction:column}
   #board .panel__body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:6px;scrollbar-gutter:stable}
   #board .panel__body::-webkit-scrollbar{width:8px}
-  #board .panel__body::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:4px}
-  #board .panel__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
-  #board .panel__body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
-  .row{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;cursor:pointer;transition:background .15s;appearance:none;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
-  .row:hover{background:rgba(255,255,255,.045)}
+  #board .panel__body::-webkit-scrollbar-track{background:var(--track);border-radius:4px}
+  #board .panel__body::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px}
+  #board .panel__body::-webkit-scrollbar-thumb:hover{background:var(--scroll-hi)}
+  .row{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;cursor:pointer;transition:background .15s;appearance:none;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
+  .row:hover{background:var(--surface-hover)}
+  .row:active{background:var(--surface-active)}
   .row:focus-visible,.floor:focus-visible{outline:2px solid rgba(61,225,198,.55);outline-offset:1px}
-  .row.on{background:rgba(61,225,198,.1);box-shadow:inset 0 0 0 1px rgba(61,225,198,.28)}
+  .row.on{background:var(--surface-active);box-shadow:inset 0 0 0 1px var(--active-line)}
   .dot{width:9px;height:9px;border-radius:50%;flex:none}
   .row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
   .row__name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .row__sub{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
-  .row__bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.06);margin-top:4px;overflow:hidden}
+  .row__bar{display:block;height:3px;border-radius:2px;background:var(--track);margin-top:4px;overflow:hidden}
   .row__bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--acc-2),var(--acc))}
-  .row__pct{font-family:var(--mono);font-size:13px;color:var(--ink);flex:none;min-width:42px;text-align:right}
+  .row__pct{font-family:var(--mono);font-size:13px;color:var(--ink);flex:none;min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
 
   /* ---------- 楼层 ---------- */
   #floors{position:relative;left:auto;bottom:auto;width:auto;flex:none}
   #floors .panel__body{display:flex;flex-direction:column;gap:4px;max-height:min(30vh,238px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
   #floors .panel__body::-webkit-scrollbar{width:8px}
-  #floors .panel__body::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:4px}
-  #floors .panel__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
-  #floors .panel__body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
-  .floor{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px;appearance:none;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
-  .floor:hover{background:rgba(255,255,255,.045)}
-  .floor.on{background:rgba(61,225,198,.1)}
-  .floor__no{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--dim)}
+  #floors .panel__body::-webkit-scrollbar-track{background:var(--track);border-radius:4px}
+  #floors .panel__body::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px}
+  #floors .panel__body::-webkit-scrollbar-thumb:hover{background:var(--scroll-hi)}
+  .floor{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;appearance:none;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
+  .floor:hover{background:var(--surface-hover)}
+  .floor:active{background:var(--surface-active)}
+  .floor.on{background:var(--surface-active)}
+  .floor__no{width:22px;height:22px;border-radius:7px;background:var(--surface);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--dim)}
   .floor.on .floor__no{background:rgba(61,225,198,.2);color:var(--acc)}
-  .floor__ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim)}
+  .floor__ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
 
   /* ---------- 右侧 ---------- */
   #right{position:absolute;right:18px;top:92px;bottom:18px;width:346px;display:flex;flex-direction:column;gap:14px;z-index:9;max-height:none;overflow:auto;scrollbar-width:none}
   #right::-webkit-scrollbar{display:none}
   #right > .panel{position:relative;left:auto;right:auto;top:auto;bottom:auto}
   #card{position:relative;display:none}
-  #card.show{display:block}
+  #card.show{display:block;animation:cardIn .22s cubic-bezier(.2,0,0,1) both}
+  #card.show.is-out{animation:cardOut .16s ease-out both;pointer-events:none}
+  @keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+  @keyframes cardOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px)}}
   #card .panel__head b{margin-left:0;margin-right:26px;color:var(--dim)}
-  #cardx{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--dim);font-size:15px;line-height:1;cursor:pointer;z-index:2}
-  #cardx:hover{color:var(--ink);background:rgba(255,255,255,.12)}
+  #cardx{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--dim);cursor:pointer;z-index:2;display:grid;place-items:center;padding:0;transition:background-color .15s ease,color .15s ease,transform .12s ease}
+  #cardx::before{content:"";position:absolute;inset:-6px;border-radius:50%}
+  #cardx svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
+  #cardx:active{transform:scale(.96)}
+  #cardx:hover{color:var(--ink);background:var(--surface-hover)}
   .card__title{display:flex;align-items:center;gap:10px;padding:0 16px 8px}
   .card__title .glyph{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none}
-  .card__title b{font-size:16px;font-weight:650;line-height:1.25;word-break:break-all}
+  .card__title b{font-size:16px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty}
   .card__title span{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:2px}
-  .card__status{margin:0 16px;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font-family:var(--mono);font-size:11.5px;border:1px solid}
+  .card__status{margin:0 16px;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font-family:var(--mono);font-size:11.5px;border:1px solid;color:var(--c,var(--dim));border-color:color-mix(in srgb,var(--c,var(--dim)) 45%,transparent);background:color-mix(in srgb,var(--c,var(--dim)) 12%,transparent)}
+  .card__status[data-status="working"]{--c:var(--acc)}
+  .card__status[data-status="need_me"]{--c:var(--amber)}
+  .card__status[data-status="stuck"]{--c:var(--red)}
+  .card__status[data-status="done"]{--c:var(--green)}
+  .card__status[data-status="resting"]{--c:var(--dim)}
   .card__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 4px}
-  .card__grid div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:10px}
-  .card__grid b{display:block;font-family:var(--mono);font-size:19px;font-weight:650;letter-spacing:-.5px}
+  .card__grid div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px}
+  .card__grid b{display:block;font-family:var(--mono);font-size:19px;font-weight:650;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
   .card__grid span{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;color:var(--dim)}
   .card__row{display:flex;justify-content:space-between;gap:12px;margin:10px 16px 0;padding-top:10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--dim)}
-  .card__row b{color:var(--ink);font-weight:500;text-align:right;word-break:break-all;max-width:220px}
+  .card__row b{color:var(--ink);font-weight:500;text-align:right;overflow-wrap:anywhere;word-break:normal;max-width:220px;text-wrap:pretty}
   .card__foot{height:10px}
 
   #checks .panel__body{display:flex;flex-direction:column;gap:7px}
   .check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);font-family:var(--mono)}
   .check i{width:15px;height:15px;border-radius:5px;border:1px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:10px;color:transparent}
+  .check i svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
   .check.ok{color:var(--ink)}
-  .check.ok i{background:rgba(125,211,160,.14);border-color:rgba(125,211,160,.4);color:var(--green)}
+  .check.ok i{background:var(--check-bg);border-color:var(--check-line);color:var(--green)}
 
   /* ---------- 动态 ---------- */
   #feed{left:358px;right:382px;bottom:18px;width:auto;max-height:168px;display:flex;flex-direction:column;overflow:hidden}
   #feed .panel__body{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
   .evt{display:flex;align-items:center;gap:9px;padding:5px 6px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}
-  .evt .t{font-family:var(--mono);font-size:10.5px;color:var(--dim-2);flex:none}
+  .evt .t{font-family:var(--mono);font-size:10.5px;color:var(--dim-2);flex:none;font-variant-numeric:tabular-nums}
   .evt i{width:6px;height:6px;border-radius:50%;flex:none}
   .evt b{color:var(--ink);font-weight:600;flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis}
   .evt span{overflow:hidden;text-overflow:ellipsis}
@@ -167,26 +227,29 @@
   #balance .sub b{color:var(--ink);font-weight:500}
 
   /* ---------- 提示/空态 ---------- */
-  #focusChip{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid rgba(61,225,198,.3);border-radius:999px;background:rgba(12,18,22,.86);backdrop-filter:blur(14px);font-family:var(--mono);font-size:11.5px;color:var(--ink);white-space:nowrap}
+  #focusChip{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--focus-line);border-radius:999px;background:var(--chip);backdrop-filter:blur(14px);font-family:var(--mono);font-size:11.5px;color:var(--ink);white-space:nowrap}
   #focusChip[hidden]{display:none}
   #focusChip .focus__dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
-  #focusChip button{height:26px;padding:0 12px;border-radius:999px;border:0;background:rgba(61,225,198,.16);color:var(--acc);font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer}
-  #focusChip button:hover{background:rgba(61,225,198,.26)}
+  #focusChip button{position:relative;height:26px;padding:0 12px;border-radius:999px;border:0;background:var(--focus-btn);color:var(--acc);font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer;transition:background-color .15s ease,transform .12s ease}
+  #focusChip button:hover{background:var(--focus-btn-hi)}
+  #focusChip button:active{transform:scale(.96)}
+  #focusChip button::before{content:"";position:absolute;inset:-7px;border-radius:999px}
   #focusChip button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
   #credit{position:absolute;left:24px;bottom:5px;z-index:8;font-family:var(--mono);font-size:9.5px;letter-spacing:.3px;color:var(--dim-2);opacity:.72;pointer-events:none;white-space:nowrap}
   #credit b{font-weight:600;color:var(--dim)}
-  #hint{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:8;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:rgba(138,148,163,.85);background:rgba(12,15,20,.66);border:1px solid var(--line);border-radius:999px;padding:7px 14px;backdrop-filter:blur(12px);transition:opacity .8s;white-space:nowrap}
+  #hint{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:8;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:rgba(138,148,163,.85);background:var(--hint);border:1px solid var(--line);border-radius:999px;padding:7px 14px;backdrop-filter:blur(12px);transition:opacity .8s;white-space:nowrap}
   #hint.hide{opacity:0}
   #hint.lower{top:auto;bottom:20px}
   #offline{position:absolute;left:50%;top:88px;transform:translateX(-50%);z-index:20;display:none;font-family:var(--mono);font-size:11.5px;color:var(--amber);background:rgba(255,184,107,.12);border:1px solid rgba(255,184,107,.35);border-radius:999px;padding:6px 14px}
   #offline.show{display:block}
-  .lbl{position:absolute;transform:translate(-50%,-100%);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(8,11,15,.82);color:var(--ink);font-family:var(--mono);font-size:10.5px;white-space:nowrap;backdrop-filter:blur(6px);transition:border-color .2s,transform .2s}
-  .lbl em{font-style:normal;color:var(--dim);margin-left:6px}
+  .lbl{position:absolute;transform:translate(-50%,-100%);max-width:250px;overflow:hidden;text-overflow:ellipsis;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--label);color:var(--ink);font-family:var(--mono);font-size:10.5px;white-space:nowrap;backdrop-filter:blur(6px);transition:border-color .2s,transform .2s}
+  .lbl em{font-style:normal;color:var(--dim);margin-left:6px;font-variant-numeric:tabular-nums}
   .lbl:hover{border-color:rgba(61,225,198,.6);transform:translate(-50%,-100%) scale(1.06)}
   .lbl.on{border-color:var(--acc);box-shadow:0 0 14px rgba(61,225,198,.35)}
   .lbl .badge{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:1px}
-  .floorlbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:11px;letter-spacing:2px;color:rgba(138,148,163,.9);padding:3px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(8,11,15,.6);white-space:nowrap}
+  .floorlbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:11px;letter-spacing:2px;color:rgba(138,148,163,.9);padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--label);white-space:nowrap}
   .floorlbl b{color:var(--ink);font-weight:600;margin-left:6px;letter-spacing:0}
+  .officeTag{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;color:var(--dim);padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;background:var(--label);white-space:nowrap;backdrop-filter:blur(6px)}
   @media (max-width:1180px){
     #left{width:280px}
     #right{width:300px}
@@ -225,6 +288,10 @@
     #right{top:calc(86px + 28vh + 12px)}
     #meter .big{font-size:32px}
   }
+  @media (prefers-reduced-motion:reduce){
+    #card.show,#card.show.is-out{animation:none}
+    .row,.floor,#cardx,#focusChip button{transition:none!important}
+  }
   @media (max-height:760px){
     #floors{display:none}
     #feed{max-height:112px}
@@ -237,10 +304,7 @@
   <div id="labels"></div>
 
   <header id="top">
-    <div class="brand"><span class="mark" id="themeToggle" title="昼夜跟随系统时间（06:00–18:00 白天）" aria-label="当前时段">
-      <svg class="icon moon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9.6 1.8a6.3 6.3 0 1 0 4.6 10.4A6.9 6.9 0 0 1 9.6 1.8Z"/></svg>
-      <svg class="icon sun" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="2.6" fill="currentColor" stroke="none"/><path d="M8 1v1.6M8 13.4V15M1 8h1.6M13.4 8H15M2.9 2.9l1.1 1.1M12 12l1.1 1.1M13.1 2.9 12 4M4 12l-1.1 1.1"/></svg>
-    </span><b>智能体办公室</b><span>DSH 实时会话办公室</span></div>
+    <div class="brand"><b>Office</b><span>DSH 实时会话办公室</span></div>
     <div id="headStats">
       <div class="hstat tokens" title="本周 token 用量"><span>本周</span><b id="headTokens">—</b><small>tokens</small></div>
       <div class="hstat" title="DeepSeek 平台余额"><span>余额</span><b id="headBalance">—</b></div>
@@ -258,7 +322,7 @@
 
   <aside id="right">
     <section id="card" class="panel">
-      <button id="cardx" title="关闭">×</button>
+      <button id="cardx" title="关闭" aria-label="关闭详情"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
       <div class="panel__head"><span>会话详情</span><b id="cardTeam"></b></div>
       <div class="card__title"><span class="glyph" id="cardGlyph">◆</span><div><b id="cardName"></b><span id="cardSub"></span></div></div>
       <div class="card__status" id="cardStatus"></div>