dsh-annual-activity 1.1.4 → 1.1.5

package/README.md

@@ -1,4 +1,4 @@
-# 📅 全年活跃记录 — dsh-annual-activity
+# 📅 DSH-活跃记录 — dsh-annual-activity
 
 [![npm version](https://img.shields.io/npm/v/dsh-annual-activity?color=blue)](https://www.npmjs.com/package/dsh-annual-activity) [![GitHub](https://img.shields.io/badge/source-GitHub-181717?logo=github)](https://github.com/Moveharder/dsh_plugins)
 
@@ -7,11 +7,13 @@
 
 ```
         DSH 会话头部右上角 ↓
-  … 项目 / 会话名                              ▦  ▢▯   ← ▦ 本插件入口（14 天迷你热力图）
-                                                       ▢▯ 是官方「打开右侧边栏」
+  … 项目 / 会话名          ▦  ▢▯  …   ⊞
+                           │  │       └ 官方「打开右侧边栏」（corner 槽）
+                           │  └──────── 官方「选择打开方式」（utilities 槽，order -10）
+                           └─────────── 本插件入口（utilities 槽，order -100 → 该槽第一个子元素）
 
   ┌──────────────────────────────────────────────────────────────────────────────┐
-  │ 全年活跃记录   24 天活跃 · 活跃率 9%                        ‹ 2026 年 ▾ ›   ✕ │
+  │ DSH-活跃记录   24 天活跃 · 活跃率 9%                          ‹ 2026 ▾ ›   ✕ │
   │ ──────────────────────────────────────────────────────────────────────────── │
   │  24 天      9%        6 周       5 天              未活跃 ▢▢▢▢▢ 活跃        │
   │  活跃       活跃率     连登       最长连续                                   │
@@ -24,11 +26,15 @@
   └──────────────────────────────────────────────────────────────────────────────┘
 ```
 
-入口在**会话头部右上角**：紧挨「打开右侧边栏」按钮的左边，同高同圆角（28×28）。
-图标是**最近 14 天的迷你热力图**（等级越高颜色越深）；按钮带常驻底色与 1px 细边
-（用官方 token，深浅主题都跟随），悬停加深一档。鼠标悬浮时说明浮层出现在**按钮下方**
-（不会遮挡按钮与会话标题），显示今日 / 今年 / 连登摘要；点击展开上面的年度面板。
-有新版本时按钮右上角带一个小圆点。
+入口在**会话头部右上角的最左侧**：注册在 `conversation.session.header.utilities` 槽，
+`order: -100` 让它成为该槽容器的**第一个子元素**，排在官方「选择打开方式」
+（`.CAgGvG_split`，`order: -10`）之前；同高同圆角（28×28）。
+图标是**最近 14 天的迷你热力图**（等级越高颜色越深）；按钮带常驻底色
+（用官方 token，深浅主题都跟随），悬停加深一档，**不使用 `box-shadow` 描边**。
+鼠标悬浮时说明浮层出现在**按钮下方**（不会遮挡按钮与会话标题），显示今日 / 今年 /
+连登摘要；点击展开上面的年度面板。有新版本时按钮右上角带一个小圆点。
+挂载后会**立刻**拉取一次数据（不等面板打开），在此之前按钮显示 14 格**呼吸骨架**，
+所以任何时刻它都不会是一个空按钮。
 
 ## 安装
 
@@ -70,11 +76,11 @@ dsh plugin --profile web remove dsh-annual-activity
 
 | 区域 | 说明 |
 | --- | --- |
-| **头部入口** | 会话右上角、「打开右侧边栏」左侧；14 天迷你热力图字形 + 悬浮摘要；有更新时带圆点 |
-| **标题行** | `N 天活跃 · 活跃率 X%`，右侧是**年份切换**（`‹ 2026 年 ▾ ›`，多于一年时可下拉直选）与关闭按钮 |
+| **头部入口** | 会话右上角最左侧（utilities 槽第一个子元素，官方「选择打开方式」之前）；14 天迷你热力图字形 + 悬浮摘要；有更新时带圆点 |
+| **标题行** | `N 天活跃 · 活跃率 X%`，右侧是**年份切换**（`‹ 2026 ▾ ›`，只显示年份数字；多于一年时可下拉直选）与关闭按钮 |
 | **统计行** | 活跃天数 / 活跃率 / **周连登** / 年内最长连续天数 |
 | **图例** | 未活跃 → 活跃 的 5 级色块，悬浮可看每级阈值 |
-| **热力图** | 一周一列（周一在顶），最多 53 列；今天的格子有独立描边；悬浮任一格看当天明细 |
+| **热力图** | 一周一列（周一在顶），最多 53 列；**列宽自适应铺满面板宽度**（不会在右侧留白，窄到放不下才横向滚动）；今天的格子有独立描边；悬浮任一格看当天明细 |
 | **底部** | 数据更新时间、时区口径、跨年累计（轮次 / tokens / 会话数）、手动 ⟳ 重扫、⚙ 设置 |
 
 关闭方式：右上角 `✕` / 点击遮罩空白处 / `Esc`。
@@ -153,6 +159,7 @@ dsh plugin --profile web remove dsh-annual-activity
 | 现象 | 原因 / 处理 |
 | --- | --- |
 | 会话右上角没有入口按钮 | 先看 `curl http://127.0.0.1:3080/activity/hello`：404 说明 Host 层没装配（`--dump-config` 确认 `activity` 行存在、没被 `disabled: true`）；若 Host 正常，浏览器半区需**重启 dsh web**（客户端 bundle 在启动时注入 `__DSH_BOOT__`）。入口注册在 `conversation.session.header.utilities` 槽，只有会话页头部存在时才可见 |
+| 入口按钮是个「空按钮」 | 正常情况下不该出现：挂载后**立刻**拉一次 `/activity/pull`，数据到达前画 14 格**呼吸骨架**。若骨架一直呼吸，说明拉取没回来（看 Network 里 `/activity/pull`）；若骨架变成琥珀色静止，说明 `state.error` 非空——Host 路由没装配 |
 | 面板显示「host 未就绪：…（重试中…）」 | Host 路由未注册或已被禁用；入口仍在，恢复后自动接上 |
 | 数字全是 0 / 只有今天有数据 | `$DSH_HOME` 指向了别的目录。插件默认读 `$DSH_HOME/sessions`，其次 `~/.dsh/sessions`；可用 `DSH_ACTIVITY_ROOT` 覆盖 |
 | 今天色块没变深 | 面板打开时 20s 轮询一次；点底部 ⟳ 可立即重扫（有 5s 最小间隔限流） |

package/lib/client.js

@@ -95,6 +95,12 @@ window.__ModuleLoader__.load({
       return out;
     }
 
+    /**
+     * 数据未到时的字形骨架：固定 14 格占位（不区分「未来格」），
+     * 配合 .daa-glyph-loading 的呼吸动画表示「正在加载」。
+     */
+    const GLYPH_SKELETON = Array.from({ length: 14 }, () => ({ level: 0 }));
+
     /**
      * 把一年的数据排成 GitHub 风格的热力图网格：列 = 周（周一在顶），最多 53 列。
      * 首列前用 null 占位，使 1 月 1 日落在它真实的星期行上。
@@ -227,7 +233,10 @@ window.__ModuleLoader__.load({
         if (timer) return;
         // 面板打开时 20s 一次（今天的新活动很快可见），关闭时 3 分钟一次保活
         const tick = () => { void pull(); timer = setTimeout(tick, state.panelOpen ? 20000 : 180000); };
-        timer = setTimeout(tick, state.panelOpen ? 1000 : 8000);
+        // 首次订阅必须**立刻**拉一次：入口按钮的字形就靠这份数据渲染，等 8s 会让
+        // 按钮在页面刚打开的一段时间里看起来是个空按钮（像是坏了）。延迟 0 而不是
+        // 直接调用，是为了避免在订阅（React effect / 渲染期）中同步 setState。
+        timer = setTimeout(tick, 0);
       }
 
       return {
@@ -348,11 +357,13 @@ window.__ModuleLoader__.load({
     // ==================== 小组件 ====================
 
     function HeatCell(props) {
-      const { day, rec, isToday, size, onHover } = props;
+      const { day, rec, isToday, onHover } = props;
       const ref = React.useRef(null);
 
+      // 尺寸交给 CSS（列宽 minmax(9px,1fr) + aspect-ratio:1）——写死像素会让网格
+      // 与卡片内容宽对不齐，日历右侧留白。
       if (!day) {
-        return React.createElement('div', { className: 'daa-cell daa-cell-pad', style: { width: size, height: size } });
+        return React.createElement('div', { className: 'daa-cell daa-cell-pad' });
       }
       const level = levelOfDay(rec);
       const cls = 'daa-cell daa-l' + level + (isToday ? ' daa-today' : '');
@@ -365,7 +376,6 @@ window.__ModuleLoader__.load({
       return React.createElement('div', {
         ref,
         className: cls,
-        style: { width: size, height: size },
         onMouseEnter: onEnter,
         onMouseLeave: () => { if (onHover) onHover(null); },
         'aria-label': day + (rec ? ' 活跃 ' + (rec.turns || 0) + ' 轮' : ' 未活跃'),
@@ -424,7 +434,7 @@ window.__ModuleLoader__.load({
           title: years.length > 1 ? '切换年份' : '仅记录到这一年',
           onClick: () => years.length > 1 && setOpen(!open),
         },
-          React.createElement('span', null, year + ' 年'),
+          React.createElement('span', null, String(year)),
           years.length > 1 ? React.createElement('span', { className: 'daa-year-caret' }, '▾') : null),
         React.createElement('button', {
           type: 'button', className: 'daa-year-btn', disabled: !hasNext,
@@ -436,7 +446,7 @@ window.__ModuleLoader__.load({
             key: y, type: 'button',
             className: 'daa-year-item' + (y === year ? ' on' : ''),
             onClick: () => { setOpen(false); onPick(y); },
-          }, y + ' 年', y === currentYear ? React.createElement('span', { className: 'daa-year-badge' }, '今年') : null))) : null,
+          }, String(y), y === currentYear ? React.createElement('span', { className: 'daa-year-badge' }, '今年') : null))) : null,
         React.createElement('button', { type: 'button', className: 'daa-close', title: '关闭 (Esc)', onClick: onClose }, '✕'));
     }
 
@@ -516,11 +526,11 @@ window.__ModuleLoader__.load({
         style: { zIndex: Z_PORTAL },
         onMouseDown: (e) => { if (e.target === e.currentTarget) onClose(); },
       },
-        React.createElement('div', { className: 'daa-card', role: 'dialog', 'aria-label': summary || '全年活跃记录' },
+        React.createElement('div', { className: 'daa-card', role: 'dialog', 'aria-label': summary || 'DSH-活跃记录' },
           // ---- 头部 ----
           React.createElement('div', { className: 'daa-head' },
             React.createElement('div', { className: 'daa-head-l' },
-              React.createElement('span', { className: 'daa-title' }, '全年活跃记录'),
+              React.createElement('span', { className: 'daa-title' }, 'DSH-活跃记录'),
               React.createElement('span', { className: 'daa-sub' },
                 fmtInt(stats0.activeDays) + ' 天活跃 · 活跃率 ' + fmtPercent(stats0.rate))),
             React.createElement('div', { className: 'daa-head-r' },
@@ -542,7 +552,7 @@ window.__ModuleLoader__.load({
             React.createElement('div', { className: 'daa-grid', style: gridStyle },
               weeks.map((week, ci) => React.createElement('div', { className: 'daa-col', key: ci },
                 week.map((day, ri) => React.createElement(HeatCell, {
-                  key: ri, day, rec: day ? byDay[day] : null, size: 11, isToday: day === today, onHover: setTip,
+                  key: ri, day, rec: day ? byDay[day] : null, isToday: day === today, onHover: setTip,
                 })))))),
 
           // ---- 底部 ----
@@ -645,8 +655,11 @@ window.__ModuleLoader__.load({
       const curStats = data && data.yearStats ? data.yearStats[data.currentYear] : null;
       const meta = metaState.meta;
       const updateAvailable = !!(meta && meta.updateAvailable);
+      // 还没拿到数据时画骨架：'loading' 呼吸、'error' 用警示色（host 路由没装配）
+      const pending = !data;
+      const glyphMode = pending ? (state.error ? 'error' : 'loading') : 'ok';
 
-      const title = '全年活跃记录 (dsh-annual-activity)'
+      const title = 'DSH-活跃记录 (dsh-annual-activity)'
         + (data
           ? '：' + fmtInt(curStats ? curStats.activeDays : 0) + ' 天活跃 · 活跃率 ' + fmtPercent(curStats ? curStats.rate : 0)
             + ' · 今日 ' + (rec ? fmtInt(rec.turns) + ' 轮' : '未活跃')
@@ -666,16 +679,21 @@ window.__ModuleLoader__.load({
           ref: btnRef,
           type: 'button',
           className: 'daa-hbtn' + (open ? ' on' : ''),
-          'aria-label': '全年活跃记录',
+          'aria-label': 'DSH-活跃记录' + (pending ? '（数据加载中）' : ''),
+          'aria-busy': pending ? 'true' : undefined,
           // 刻意不设原生 title：浏览器自带的提示框会浮在按钮上方并遮挡按钮，
           // 提示改由下方自绘浮层承担（EntryTip）。
           onClick: () => setOpen(!open),
           onMouseEnter: onEnter,
           onMouseLeave: () => setTip(null),
         },
-          React.createElement('span', { className: 'daa-glyph', 'aria-hidden': 'true' },
-            glyphCells(byDay).map((c, i) => React.createElement('span', {
-              key: i, className: 'daa-glyph-cell' + (c.level < 0 ? ' daa-glyph-void' : ' daa-l' + c.level),
+          React.createElement('span', {
+            className: 'daa-glyph' + (pending ? ' daa-glyph-' + glyphMode : ''),
+            'aria-hidden': 'true',
+          },
+            (pending ? GLYPH_SKELETON : glyphCells(byDay)).map((c, i) => React.createElement('span', {
+              key: i,
+              className: 'daa-glyph-cell' + (pending ? '' : c.level < 0 ? ' daa-glyph-void' : ' daa-l' + c.level),
             }))),
           updateAvailable ? React.createElement('span', { className: 'daa-hbtn-dot', 'aria-label': '有新版本' }) : null),
         tip ? portalToBody(React.createElement(EntryTip, { tip })) : null,
@@ -747,30 +765,40 @@ window.__ModuleLoader__.load({
   color:var(--dsh-text-1,#1f2937);}
 /* ---------- 头部入口按钮（对齐「打开右侧边栏」：28×28 / radius 28 / 16px 图标）
    官方按钮是纯透明底，放在标题行里太「隐形」，所以这里给一个比悬停态更浅的
-   常驻底色 + 一层细边（同样是官方 token，深色主题自动跟随）。---------- */
+   常驻底色（官方 token，深色主题自动跟随）。刻意不用 box-shadow：描边在浅色
+   主题下显脏，纯色底 + 悬停加深一档已经足够区分层级，也更贴近官方按钮观感。 */
 .daa-hbtn{position:relative;box-sizing:border-box;width:28px;height:28px;flex:none;padding:6px;
   display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
   background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));
-  border:none;border-radius:28px;box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l2,rgba(0,0,0,.10));
+  border:none;border-radius:28px;
   color:var(--dsw-alias-label-secondary,#4b5563);
-  transition:background .14s ease,color .14s ease,box-shadow .14s ease;}
+  transition:background .14s ease,color .14s ease;}
 .daa-hbtn:hover{background:var(--dsw-alias-interactive-bg-active,rgba(38,49,72,.10));
-  box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l3,rgba(0,0,0,.16));
   color:var(--dsw-alias-label-primary,#111827);}
 .daa-hbtn.on{background:var(--dsw-alias-interactive-bg-active,rgba(38,49,72,.10));
-  box-shadow:inset 0 0 0 1px var(--dsw-alias-border-l3,rgba(0,0,0,.16));
   color:var(--dsw-alias-label-primary,#111827);}
 .daa-glyph{display:grid;grid-template-columns:repeat(7,2px);grid-template-rows:repeat(2,2px);gap:1px;}
 .daa-glyph-cell{width:2px;height:2px;border-radius:.5px;}
 .daa-glyph-void{background:transparent;}
+/* 数据还没到时画 14 格骨架并做呼吸动画：否则「全 0 级」的浅灰几乎看不见，
+   入口按钮会像个坏掉的空按钮（页面刚打开、还没点开过面板时最明显）。 */
+.daa-glyph-loading{animation:daa-glyph-pulse 1.2s ease-in-out infinite;}
+.daa-glyph-loading .daa-glyph-cell{background:var(--dsw-alias-border-l2,rgba(0,0,0,.14));}
+/* host 路由没装配时骨架不再呼吸，改用警示色，避免一直「转圈」像是卡住了 */
+.daa-glyph-error .daa-glyph-cell{background:var(--dsw-alias-state-business-primary,#f59e0b);opacity:.55;}
+@keyframes daa-glyph-pulse{0%,100%{opacity:.4}50%{opacity:1}}
+/* 「有新版本」圆点：不加 box-shadow 描边环，琥珀色在深浅两套底色上都够醒目 */
 .daa-hbtn-dot{position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;
-  background:var(--dsw-alias-state-business-primary,#f59e0b);
-  box-shadow:0 0 0 1.5px var(--dsw-alias-bg-layer-1,#fff);}
+  background:var(--dsw-alias-state-business-primary,#f59e0b);}
 /* ---------- 遮罩 + 卡片 ---------- */
 .daa-backdrop{position:fixed;inset:0;pointer-events:auto;background:rgba(15,23,42,.42);
   display:flex;align-items:center;justify-content:center;padding:24px;animation:daa-fade .14s ease-out;}
 @keyframes daa-fade{from{opacity:0}to{opacity:1}}
-.daa-card{position:relative;width:min(828px,calc(100vw - 40px));max-height:calc(100vh - 48px);overflow:auto;
+/* box-sizing:border-box 是显式声明的：面板总宽就等于这里的 760px（含内边距与描边），
+   不依赖宿主是否提供全局 reset。min-width:0 也是必须的：卡片是 flex item，默认
+   min-width:auto 会取内容的 min-content 宽度，内容偏宽时会把卡片顶得比 760px 还宽。
+   改宽度时注意热力图要跟着放得下——见 .daa-grid 的自适应列宽。 */
+.daa-card{position:relative;box-sizing:border-box;min-width:0;width:min(760px,calc(100vw - 40px));max-height:calc(100vh - 48px);overflow:auto;
   background:var(--dsh-surface-1,#fff);border:1px solid var(--dsh-border,#e8eaee);border-radius:14px;
   box-shadow:0 24px 64px rgba(15,23,42,.26);padding:16px 20px 12px;
   animation:daa-pop .16s cubic-bezier(.2,.9,.3,1.2);}
@@ -816,12 +844,17 @@ window.__ModuleLoader__.load({
 .daa-legend-cap{padding:0 3px;}
 .daa-legend-cell{width:11px;height:11px;border-radius:3px;display:inline-block;}
 /* ---------- 热力图 ---------- */
+/* 列宽用 minmax(9px,1fr) 自适应：网格铺满卡片内容宽，最后一列的右边缘正好落在内容区
+   右边界上，因此**日历右侧不会留下一条空白**（固定列宽 + 左对齐会留下
+   「内容宽 − 53×列宽 − 52×间距」的空档，实测有 31~73px）。9px 是下限：窄到放不下时
+   由 .daa-heat 出横向滚动条，而不是把格子压成看不清的碎片。 */
 .daa-heat{overflow-x:auto;overflow-y:hidden;padding-bottom:2px;}
-.daa-months{display:grid;grid-template-columns:repeat(var(--daa-cols,53),11px);gap:3px;margin-bottom:6px;min-width:max-content;}
+.daa-months{display:grid;grid-template-columns:repeat(var(--daa-cols,53),minmax(9px,1fr));gap:2px;margin-bottom:6px;}
 .daa-month{font-size:11.5px;color:var(--dsh-text-3,#9aa1ab);white-space:nowrap;line-height:1;overflow:visible;}
-.daa-grid{display:grid;grid-template-columns:repeat(var(--daa-cols,53),11px);gap:3px;min-width:max-content;}
-.daa-col{display:flex;flex-direction:column;gap:3px;}
-.daa-cell{border-radius:3px;position:relative;background:#eef0f2;transition:transform .1s ease,box-shadow .1s ease;}
+.daa-grid{display:grid;grid-template-columns:repeat(var(--daa-cols,53),minmax(9px,1fr));gap:2px;}
+.daa-col{display:flex;flex-direction:column;gap:2px;}
+/* 格子尺寸由列宽决定（正方形），不再写死像素——见 .daa-grid 的列定义 */
+.daa-cell{width:100%;aspect-ratio:1/1;border-radius:3px;position:relative;background:#eef0f2;transition:transform .1s ease,box-shadow .1s ease;}
 .daa-cell-pad{background:transparent;}
 .daa-cell:not(.daa-cell-pad):hover{transform:scale(1.18);box-shadow:0 0 0 1.5px rgba(22,163,74,.45);}
 .daa-today{box-shadow:inset 0 0 0 1.5px #16a34a;}
@@ -893,7 +926,6 @@ window.__ModuleLoader__.load({
   .daa-setup-btn,.daa-setup-notice{
     background:var(--dsh-surface-1,#1b1e24);border-color:var(--dsh-border,#2f343d);}
   .daa-setup{background:var(--dsh-surface-2,#171a1f);border-color:var(--dsh-border,#2f343d);}
-  .daa-hbtn-dot{box-shadow:0 0 0 1.5px var(--dsh-surface-1,#1b1e24);}
   .daa-l0{background:#2a2f37;}
   .daa-foot,.daa-toolbar,.daa-setup-foot{border-color:var(--dsh-border,#2f343d);}
   .daa-error{background:#3a2a12;border-color:#7c5310;color:#fbbf24;}
@@ -927,8 +959,14 @@ window.__ModuleLoader__.load({
       // corner 槽（「打开右侧边栏」按钮所在处）渲染，所以这个入口会落在
       // 那个按钮的左边、同一行内。按钮尺寸/圆角/色板都与 corner 里的
       // 官方按钮保持一致（28×28、图标 16px、interactive-bg-hover 悬停底色）。
+      //
+      // order 决定槽内顺序：renderer 按 order 升序渲染（`sort((a,b)=>a.order-b.order)`），
+      // 这些条目都渲染在 `[data-slot="conversation.session.header.utilities"]`
+      // 这个 display:contents 锚点下、成为 flex 容器的直接子元素。官方
+      // 「选择打开方式」的分裂按钮（.CAgGvG_split）用 -10、官方会话日志导出
+      // 用默认 0，所以这里取 -100，让本入口成为该容器的**第一个**子元素。
       slots.inject('conversation.session.header.utilities', () => slots.register(
-        { name: 'conversation.session.header.utilities', id: 'annual-activity', order: 50 },
+        { name: 'conversation.session.header.utilities', id: 'annual-activity', order: -100 },
         () => React.createElement(HeaderEntry, null)
       ));
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-annual-activity",
-  "version": "1.1.4",
-  "description": "全年活跃记录 (Annual Activity) — 一个纯本地的 DSH 活跃度统计面板：Host 半区扫描 $DSH_HOME/sessions 下的历史会话日志，按本地日期聚合每一天的活跃天/轮次/工具调用/Token 消耗，Client 半区以「年度热力图」面板渲染（统计行 + 5 级色块 + 月份轴 + 年份切换 + 连登统计），数据全部来自本机会话文件，不联网、不上报。",
+  "version": "1.1.5",
+  "description": "DSH-活跃记录 (Annual Activity) — 一个纯本地的 DSH 活跃度统计面板：Host 半区扫描 $DSH_HOME/sessions 下的历史会话日志，按本地日期聚合每一天的活跃天/轮次/工具调用/Token 消耗，Client 半区以「年度热力图」面板渲染（统计行 + 5 级色块 + 月份轴 + 年份切换 + 连登统计），数据全部来自本机会话文件，不联网、不上报。",
   "author": "spartaattack",
   "type": "module",
   "main": "lib/index.js",