@dsh-tom/dsh-css 0.2.1 → 0.2.10

package/README.md

@@ -22,7 +22,7 @@ npm publish --access public --registry=https://registry.npmjs.org/
 打开 **插件 → 添加插件 → 安装第三方插件**，在“包名或地址”输入：
 
 ```text
-D:\product\dsh-css\dsh-tom-dsh-css-0.2.1.tgz
+D:\product\dsh-css\dsh-tom-dsh-css-0.2.10.tgz
 ```
 
 安装并启用，然后完全退出并重新打开 dsh。
@@ -32,7 +32,7 @@ D:\product\dsh-css\dsh-tom-dsh-css-0.2.1.tgz
 包发布到 npmjs 后，先卸载已安装的旧版，再打开 **插件 → 添加插件 → 安装第三方插件**，输入：
 
 ```text
-@dsh-tom/dsh-css@0.2.1
+@dsh-tom/dsh-css@0.2.10
 ```
 
 选择 **安装源 → npm 官方源**，安装并启用，然后完全退出并重新打开 dsh。

package/dist/client.js

@@ -29,10 +29,41 @@ __export(client_exports, {
   inject: () => inject2
 });
 module.exports = __toCommonJS(client_exports);
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // theme.css
-var theme_default = `/* \u6DF1\u8272\u6A21\u5F0F\u914D\u8272\uFF0C\u4FDD\u7559\u5185\u7F6E\u6587\u5B57\u3001\u8FB9\u6846\u548C\u8BED\u6CD5\u9AD8\u4EAE\u989C\u8272\u3002 */
+var theme_default = `.dsh-css-unread-dot {
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-secondary, #aaa);
+}
+
+/* \u4F1A\u8BDD\u64CD\u4F5C\u51FA\u73B0\u65F6\u9690\u85CF\u672A\u8BFB\u63D0\u793A\uFF1B\u9879\u76EE\u6811\u4FDD\u7559\u5DE6\u4FA7\u56FE\u6807\u4F4D\u7F6E\uFF0C\u907F\u514D\u6807\u9898\u8DF3\u52A8\u3002 */
+.hIlkoa_sessionRow:is(:hover, .hIlkoa_menuOpen) > .hIlkoa_slot .dsh-css-unread-dot {
+  visibility: hidden;
+}
+
+/* \u83DC\u5355\u5173\u95ED\u53EF\u80FD\u6B8B\u7559\u5BBF\u4E3B\u7684\u6EDA\u52A8\u548C\u6E10\u9690\u72B6\u6001\uFF1B\u975E\u60AC\u505C\u65F6\u4ECE\u6807\u9898\u5F00\u5934\u6B63\u5E38\u663E\u793A\u3002 */
+.hIlkoa_sessionRow:not(:hover):not(.hIlkoa_menuOpen) > .hIlkoa_title {
+  overflow: clip;
+  mask-image: none;
+}
+
+/* \u4F1A\u8BDD\u83DC\u5355\u6539\u4E3A\u53F3\u952E\u6253\u5F00\uFF1B\u4FDD\u7559\u5BBF\u4E3B\u83DC\u5355\u951A\u70B9\uFF0C\u5E76\u79FB\u5230\u9F20\u6807\u4F4D\u7F6E\u3002 */
+.hIlkoa_sessionRow > .hIlkoa_rowActions > ._root_4ub78_1 {
+  position: fixed;
+  left: var(--dsh-css-context-x, 0px);
+  top: var(--dsh-css-context-y, 0px);
+  width: 0;
+  height: 0;
+
+  & > button { display: none; }
+}
+
+/* \u6DF1\u8272\u6A21\u5F0F\u914D\u8272\uFF0C\u4FDD\u7559\u5185\u7F6E\u6587\u5B57\u3001\u8FB9\u6846\u548C\u8BED\u6CD5\u9AD8\u4EAE\u989C\u8272\u3002 */
 html body[data-ds-dark-theme] {
   /* \u533A\u57DF 1\uFF1A\u5DE6\u4FA7\u4F1A\u8BDD\u5217\u8868\uFF1BWindows \u6807\u9898\u680F\u5728\u4E0B\u65B9\u5355\u72EC\u8BBE\u7F6E\u3002\u539F RGB(27, 27, 28)\u3002 */
   --dsw-specific-sidebar-fill: rgb(36, 37, 33) !important;
@@ -200,9 +231,17 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
     padding: 44px 0 0 12px;
   }
 
-  /* \u5E73\u94FA\u4F1A\u8BDD\u6807\u9898\u4E0E\u201C\u4F1A\u8BDD\u201D\u5DE6\u5BF9\u9F50\uFF0C\u72B6\u6001\u56FE\u6807\u653E\u5230\u53F3\u4FA7\u3002 */
+  /* \u64CD\u4F5C\u6309\u94AE\u95F4\u8DDD 15px \u2192 10px\uFF1B\u53F3\u4FA7\u5185\u8FB9\u8DDD 8px \u2192 4px\u3002 */
+  & .hIlkoa_sessionRow {
+    padding-inline-end: 4px;
+
+    & > .hIlkoa_rowActions { gap: 10px; }
+  }
+
+  /* \u884C\u80CC\u666F\u5411\u5DE6\u5EF6\u4F38 4px\uFF0C\u7559\u8DB3\u6807\u9898\u5185\u8FB9\u8DDD\u5E76\u4E0E\u201C\u4F1A\u8BDD\u201D\u4FDD\u6301\u5DE6\u5BF9\u9F50\u3002 */
   & ._9lTDKa_flatList .hIlkoa_sessionRow {
-    padding-inline-start: 4px;
+    margin-inline-start: -4px;
+    padding-inline-start: 8px;
 
     & > .hIlkoa_title {
       margin-left: 0;
@@ -212,7 +251,13 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
       order: 1;
     }
 
-    & > .hIlkoa_slot:empty {
+    /* \u7A7A\u72B6\u6001\u5360\u4F4D\u51CF\u534A\uFF0C\u4E0E\u53F3\u5185\u8FB9\u8DDD\u5408\u8BA1 12px\uFF1B\u5B9E\u9645\u72B6\u6001\u56FE\u6807\u4FDD\u7559\u539F\u5BBD\u5EA6\u3002 */
+    & > .hIlkoa_slot:has(> [data-slot="sidebar.session.row.leading"]:empty) {
+      width: 8px;
+    }
+
+    & > .hIlkoa_slot:empty,
+    &:is(:hover, .hIlkoa_menuOpen) > .hIlkoa_slot:has(.dsh-css-unread-dot) {
       display: none;
     }
   }
@@ -289,6 +334,15 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
   }
 }
 
+.dsh-css-date-heading {
+  padding: 16px 4px 6px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+
+  &:first-child { padding-top: 6px; }
+}
+
 /* \u60AC\u6D6E\u5361\u7247\u7531\u5BBF\u4E3B\u901A\u8FC7 portal \u6302\u5728\u4FA7\u680F\u5916\u3002 */
 .dsh-css-project {
   display: none;
@@ -1050,8 +1104,210 @@ function registerCacheHitPrecision(ctx) {
   });
 }
 
+// src/date-groups.js
+var import_react3 = require("react");
+var DAY = 864e5;
+var calendarDay = (date5) => Date.UTC(date5.getFullYear(), date5.getMonth(), date5.getDate()) / DAY;
+function dateHeading(timestamp, now) {
+  const date5 = new Date(timestamp);
+  const day = calendarDay(date5);
+  const age = calendarDay(new Date(now)) - day;
+  const label = ["\u4ECA\u5929", "\u6628\u5929", "\u524D\u5929"][age] ?? `${String(date5.getMonth() + 1).padStart(2, "0")}-${String(date5.getDate()).padStart(2, "0")}`;
+  return { day, label };
+}
+function mapElements(value, visit2) {
+  if (Array.isArray(value)) return import_react3.Children.map(value, (child) => mapElements(child, visit2));
+  if (!(0, import_react3.isValidElement)(value)) return value;
+  const replacement = visit2(value);
+  if (replacement !== value) return replacement;
+  return "children" in value.props ? (0, import_react3.cloneElement)(value, {}, mapElements(value.props.children, visit2)) : value;
+}
+function DateViewOptions({ renderMenu, dateMode, ...props }) {
+  const menu = renderMenu(props);
+  const items = menu.props.items.flatMap((item) => item.id === "flat" ? [item, {
+    id: "date",
+    label: "\u6309\u65E5\u671F",
+    icon: (0, import_react3.createElement)("svg", {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.7,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true
+    }, (0, import_react3.createElement)("path", { d: "M8 3v4M16 3v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" }))
+  }] : [item]);
+  return (0, import_react3.cloneElement)(menu, {
+    items,
+    selectedIds: menu.props.selectedIds.map((id) => dateMode && id === "flat" ? "date" : id),
+    onSelect: (id) => {
+      if (id !== "date") return menu.props.onSelect(id);
+      props.onGroupPick("date");
+      menu.props.onClose();
+    }
+  });
+}
+function DateFlatList({ renderList, enabled, ...props }) {
+  const [clock, setClock] = (0, import_react3.useState)(Date.now);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    const now2 = /* @__PURE__ */ new Date();
+    const midnight = new Date(now2.getFullYear(), now2.getMonth(), now2.getDate() + 1);
+    const timer = setTimeout(() => setClock(Date.now()), midnight - now2);
+    return () => clearTimeout(timer);
+  }, [enabled, clock]);
+  const tree = renderList(props);
+  if (!enabled) return tree;
+  const now = Date.now();
+  return mapElements(tree, (element) => {
+    if (!element.props.className?.split(" ").includes("_9lTDKa_flatList")) return element;
+    let previousDay;
+    const children = mapElements(element.props.children, (row) => {
+      const node2 = row.props.node;
+      if (!node2 || node2.pinned || node2.blank) return row;
+      const { day, label } = dateHeading(node2.updatedAt, now);
+      if (day === previousDay) return row;
+      previousDay = day;
+      return [(0, import_react3.createElement)("div", {
+        key: `date:${node2.id}`,
+        className: "dsh-css-date-heading",
+        role: "presentation"
+      }, label), row];
+    });
+    return (0, import_react3.cloneElement)(element, {}, children);
+  });
+}
+function registerDateGroups(ctx) {
+  const slot = "sidebar.workspaces";
+  ctx.slots.inject(slot, () => {
+    const original = ctx.slots.entries(slot)[0];
+    if (!original) return;
+    const renderBrowser = original.component;
+    function DateWorkspaceBrowser(props) {
+      const dateMode = props.useStore((state) => state.groupBy === "date");
+      const tree = renderBrowser({
+        ...props,
+        useStore: (selector) => props.useStore((state) => selector(state.groupBy === "date" ? { ...state, groupBy: "flat" } : state))
+      });
+      return mapElements(tree, (element) => {
+        if (element.props.onGroupPick && element.props.onOrderPick) {
+          return (0, import_react3.createElement)(DateViewOptions, {
+            ...element.props,
+            key: element.key ?? void 0,
+            renderMenu: element.type,
+            dateMode
+          });
+        }
+        if (element.props.sessionIds && element.props.setSessionOrder) {
+          return (0, import_react3.createElement)(DateFlatList, {
+            ...element.props,
+            key: element.key ?? void 0,
+            renderList: element.type,
+            enabled: dateMode
+          });
+        }
+        return element;
+      });
+    }
+    const priority = Math.max(...ctx.slots.entries(slot).map((entry) => entry.options.priority ?? 0)) + 1;
+    const dispose = ctx.slots.register({ name: slot, priority }, renderBrowser);
+    original.component = DateWorkspaceBrowser;
+    return () => {
+      original.component = renderBrowser;
+      dispose();
+    };
+  });
+}
+
+// src/unread.js
+var import_react4 = require("react");
+var import_dsh_client_ui_primitives2 = require("@deepseek-ai/dsh-client-ui-primitives");
+
+// src/unread-store.js
+var STORAGE_KEY = "dsh-css.unread.v1";
+function createUnreadStore(sessions, storage) {
+  let snapshot = /* @__PURE__ */ new Set();
+  const listeners = /* @__PURE__ */ new Set();
+  try {
+    const saved = JSON.parse((storage ?? window.localStorage).getItem(STORAGE_KEY) ?? "[]");
+    if (Array.isArray(saved)) snapshot = new Set(saved.filter((id) => typeof id === "string"));
+  } catch {
+  }
+  const publish = (next) => {
+    snapshot = next;
+    try {
+      (storage ?? window.localStorage).setItem(STORAGE_KEY, JSON.stringify([...next]));
+    } catch {
+      console.warn("[dsh-css] \u672A\u8BFB\u6807\u8BB0\u65E0\u6CD5\u4FDD\u5B58\uFF0C\u91CD\u542F\u540E\u53EF\u80FD\u4E22\u5931\u3002");
+    }
+    for (const listener of listeners) listener();
+  };
+  const mainCount = (row) => row?.retainedBy?.mainView ?? 0;
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    setUnread(id, unread) {
+      if (snapshot.has(id) === unread) return;
+      const next = new Set(snapshot);
+      if (unread) next.add(id);
+      else next.delete(id);
+      publish(next);
+    },
+    watch() {
+      let previous = sessions.getSnapshot().byId;
+      return sessions.subscribe(() => {
+        const current = sessions.getSnapshot().byId;
+        const next = new Set(snapshot);
+        for (const id of snapshot) {
+          if (mainCount(current[id]) > mainCount(previous[id])) next.delete(id);
+        }
+        previous = current;
+        if (next.size !== snapshot.size) publish(next);
+      });
+    }
+  };
+}
+
+// src/unread.js
+function UnreadMenuItem({ sessionId, useUnread, useWorkspaces, useMenuOpenState, setUnread }) {
+  const unread = useUnread((state) => state.has(sessionId));
+  const archived = useWorkspaces((state) => state.archivedSessionIds.includes(sessionId));
+  const [, setMenuOpen] = useMenuOpenState();
+  if (archived) return null;
+  return (0, import_react4.createElement)(import_dsh_client_ui_primitives2.MenuItemButton, {
+    icon: unread ? (0, import_react4.createElement)(import_dsh_client_ui_primitives2.IconCheckOutlineRegular, { size: 14 }) : (0, import_react4.createElement)("span", { className: "dsh-css-unread-dot", "aria-hidden": true }),
+    onSelect: () => {
+      setUnread(sessionId, !unread);
+      setMenuOpen(false);
+    }
+  }, unread ? "\u6807\u8BB0\u4E3A\u5DF2\u8BFB" : "\u6807\u8BB0\u4E3A\u672A\u8BFB");
+}
+function UnreadIndicator({ sessionId, useUnread }) {
+  return useUnread((state) => state.has(sessionId)) ? (0, import_react4.createElement)("span", { className: "dsh-css-unread-dot", role: "img", "aria-label": "\u672A\u8BFB", title: "\u672A\u8BFB" }) : null;
+}
+function registerUnread(ctx) {
+  const unread = createUnreadStore(ctx.sessions.list);
+  ctx.effect(() => unread.watch());
+  ctx.slots.inject("sidebar.workspaces.session.menu.item", () => ctx.slots.register({
+    name: "sidebar.workspaces.session.menu.item",
+    id: "dsh-css-unread",
+    order: 250,
+    inject: () => ({ setUnread: unread.setUnread, hooks: { unread, workspaces: ctx.workspaces.list } })
+  }, UnreadMenuItem));
+  ctx.slots.inject("sidebar.session.row.leading", () => ctx.slots.register({
+    name: "sidebar.session.row.leading",
+    id: "dsh-css-unread",
+    inject: () => ({ hooks: { unread } })
+  }, UnreadIndicator));
+}
+
 // src/cost/client.js
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/cost/pricing.js
 var PROJECTION_KEY = "dshTomCost";
@@ -1089,7 +1345,7 @@ function formatMoney(units) {
 }
 
 // src/cost/panel.js
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/cost/panel-styles.js
@@ -1165,8 +1421,8 @@ function costRows(totals, daily, day = beijingDay()) {
   ];
 }
 function useBeijingDay() {
-  const [day, setDay] = (0, import_react3.useState)(beijingDay);
-  (0, import_react3.useEffect)(() => {
+  const [day, setDay] = (0, import_react5.useState)(beijingDay);
+  (0, import_react5.useEffect)(() => {
     let timer;
     const refresh = () => {
       const current = beijingDay();
@@ -1180,7 +1436,7 @@ function useBeijingDay() {
   return day;
 }
 function CostIcon() {
-  return (0, import_react3.createElement)(
+  return (0, import_react5.createElement)(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1193,18 +1449,18 @@ function CostIcon() {
       strokeLinejoin: "round",
       "aria-hidden": true
     },
-    (0, import_react3.createElement)("circle", { cx: 12, cy: 12, r: 9 }),
-    (0, import_react3.createElement)("path", { d: "m8.5 7.5 3.5 4 3.5-4M8.5 12h7M8.5 15h7M12 11.5V18" })
+    (0, import_react5.createElement)("circle", { cx: 12, cy: 12, r: 9 }),
+    (0, import_react5.createElement)("path", { d: "m8.5 7.5 3.5 4 3.5-4M8.5 12h7M8.5 15h7M12 11.5V18" })
   );
 }
 function CostPanel({ totals, daily, balance }) {
   const day = useBeijingDay();
   const rows = costRows(totals, daily, day);
-  const [open2, setOpen] = (0, import_react3.useState)(false);
-  const anchor2 = (0, import_react3.useRef)(null);
-  const panel = (0, import_react3.useRef)(null);
-  const dialogId = (0, import_react3.useId)();
-  (0, import_react3.useLayoutEffect)(() => {
+  const [open2, setOpen] = (0, import_react5.useState)(false);
+  const anchor2 = (0, import_react5.useRef)(null);
+  const panel = (0, import_react5.useRef)(null);
+  const dialogId = (0, import_react5.useId)();
+  (0, import_react5.useLayoutEffect)(() => {
     if (!open2) return;
     const element = panel.current;
     const document2 = element.ownerDocument;
@@ -1243,11 +1499,11 @@ function CostPanel({ totals, daily, balance }) {
       document2.removeEventListener("keydown", dismissEscape);
     };
   }, [open2]);
-  return (0, import_react3.createElement)(
+  return (0, import_react5.createElement)(
     "span",
     { className: "dsh-tom-cost-anchor", "data-composer-stat": "cost" },
-    (0, import_react3.createElement)("style", { "data-dsh-tom-cost-styles": "" }, panelStyles),
-    (0, import_react3.createElement)("button", {
+    (0, import_react5.createElement)("style", { "data-dsh-tom-cost-styles": "" }, panelStyles),
+    (0, import_react5.createElement)("button", {
       ref: anchor2,
       type: "button",
       className: "dsh-tom-cost-pill",
@@ -1257,8 +1513,8 @@ function CostPanel({ totals, daily, balance }) {
       "aria-controls": open2 ? dialogId : void 0,
       "aria-label": `\u4F1A\u8BDD\u7D2F\u8BA1\u8D39\u7528 ${rows[1][1]}`,
       onClick: () => setOpen(!open2)
-    }, (0, import_react3.createElement)(CostIcon), (0, import_react3.createElement)("span", { className: "dsh-tom-cost-label" }, rows[1][1])),
-    open2 && (0, import_react_dom.createPortal)((0, import_react3.createElement)(
+    }, (0, import_react5.createElement)(CostIcon), (0, import_react5.createElement)("span", { className: "dsh-tom-cost-label" }, rows[1][1])),
+    open2 && (0, import_react_dom.createPortal)((0, import_react5.createElement)(
       "div",
       {
         ref: panel,
@@ -1268,11 +1524,11 @@ function CostPanel({ totals, daily, balance }) {
         className: "dsh-tom-cost-panel",
         style: { visibility: "hidden", left: 0, top: 0 }
       },
-      (0, import_react3.createElement)("div", { className: "dsh-tom-cost-title" }, (0, import_react3.createElement)(CostIcon), "\u8D39\u7528\u660E\u7EC6"),
-      (0, import_react3.createElement)("div", { className: "dsh-tom-cost-rule", "aria-hidden": true }),
-      (0, import_react3.createElement)("dl", { className: "dsh-tom-cost-details" }, rows.flatMap(([label, value]) => [
-        (0, import_react3.createElement)("dt", { key: label }, label),
-        (0, import_react3.createElement)("dd", { key: `${label}-value` }, value)
+      (0, import_react5.createElement)("div", { className: "dsh-tom-cost-title" }, (0, import_react5.createElement)(CostIcon), "\u8D39\u7528\u660E\u7EC6"),
+      (0, import_react5.createElement)("div", { className: "dsh-tom-cost-rule", "aria-hidden": true }),
+      (0, import_react5.createElement)("dl", { className: "dsh-tom-cost-details" }, rows.flatMap(([label, value]) => [
+        (0, import_react5.createElement)("dt", { key: label }, label),
+        (0, import_react5.createElement)("dd", { key: `${label}-value` }, value)
       ]))
     ), anchor2.current.ownerDocument.body)
   );
@@ -21219,7 +21475,7 @@ function createBalanceStore(readBalance) {
 }
 
 // src/cost/settings.js
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/cost/settings-styles.js
 var settingsStyles = `
@@ -21275,62 +21531,62 @@ function usageSummary(row) {
 function CostSettings({ useCostReport }) {
   const report = useCostReport((value2) => value2);
   const day = useBeijingDay();
-  const [hideZero, setHideZero] = (0, import_react4.useState)(true);
+  const [hideZero, setHideZero] = (0, import_react6.useState)(true);
   const value = report.status === "ready" && report.value.day === day ? report.value : void 0;
   const status = report.status === "error" ? "\u8BFB\u53D6\u5931\u8D25" : "\u52A0\u8F7D\u4E2D\u2026";
   const rows = value ? visibleHistory(value.history, hideZero) : [];
   const summaries = [["today", "\u4ECA\u65E5\u8D39\u7528"], ["week", "\u672C\u5468\u8D39\u7528"], ["month", "\u672C\u6708\u8D39\u7528"]];
-  return (0, import_react4.createElement)(
+  return (0, import_react6.createElement)(
     "section",
     { className: "dsh-tom-cost-settings", "aria-label": "\u8D39\u7528" },
-    (0, import_react4.createElement)("style", null, settingsStyles),
-    (0, import_react4.createElement)("div", { className: "dsh-tom-cost-cards" }, summaries.map(([key, label]) => {
+    (0, import_react6.createElement)("style", null, settingsStyles),
+    (0, import_react6.createElement)("div", { className: "dsh-tom-cost-cards" }, summaries.map(([key, label]) => {
       const row = value?.[key];
-      return (0, import_react4.createElement)(
+      return (0, import_react6.createElement)(
         "div",
         { key, className: "dsh-tom-cost-card" },
-        (0, import_react4.createElement)("div", { className: "dsh-tom-cost-card-label" }, label),
-        (0, import_react4.createElement)("div", { className: "dsh-tom-cost-amount" }, row ? costValue(row.totals, row.failedSessions) : status),
-        (0, import_react4.createElement)("div", { className: "dsh-tom-cost-usage" }, usageSummary(row))
+        (0, import_react6.createElement)("div", { className: "dsh-tom-cost-card-label" }, label),
+        (0, import_react6.createElement)("div", { className: "dsh-tom-cost-amount" }, row ? costValue(row.totals, row.failedSessions) : status),
+        (0, import_react6.createElement)("div", { className: "dsh-tom-cost-usage" }, usageSummary(row))
       );
     })),
-    (0, import_react4.createElement)(
+    (0, import_react6.createElement)(
       "div",
       { className: "dsh-tom-cost-history-heading" },
-      (0, import_react4.createElement)("h3", null, "\u5386\u53F2\u8BB0\u5F55", (0, import_react4.createElement)("span", null, "\u6700\u8FD1 30 \u5929")),
-      (0, import_react4.createElement)(
+      (0, import_react6.createElement)("h3", null, "\u5386\u53F2\u8BB0\u5F55", (0, import_react6.createElement)("span", null, "\u6700\u8FD1 30 \u5929")),
+      (0, import_react6.createElement)(
         "label",
         { className: "dsh-tom-cost-filter" },
-        (0, import_react4.createElement)("input", { type: "checkbox", checked: hideZero, onChange: (event) => setHideZero(event.target.checked) }),
+        (0, import_react6.createElement)("input", { type: "checkbox", checked: hideZero, onChange: (event) => setHideZero(event.target.checked) }),
         "\u8FC7\u6EE4\u96F6\u8D39\u7528\u65E5\u671F"
       )
     ),
-    (0, import_react4.createElement)(
+    (0, import_react6.createElement)(
       "div",
       { className: "dsh-tom-cost-table-wrap", tabIndex: 0, role: "region", "aria-label": "\u6BCF\u65E5\u8D39\u7528\u5386\u53F2\u8BB0\u5F55" },
-      (0, import_react4.createElement)(
+      (0, import_react6.createElement)(
         "table",
         { className: "dsh-tom-cost-table" },
-        (0, import_react4.createElement)("thead", null, (0, import_react4.createElement)("tr", null, ["\u65E5\u671F", "\u8C03\u7528", "\u8F93\u5165 tok", "\u7F13\u5B58 tok", "\u8F93\u51FA tok", "\u8D39\u7528"].map((label) => (0, import_react4.createElement)("th", { key: label, scope: "col" }, label)))),
-        (0, import_react4.createElement)("tbody", null, value && rows.length ? rows.map((row) => {
+        (0, import_react6.createElement)("thead", null, (0, import_react6.createElement)("tr", null, ["\u65E5\u671F", "\u8C03\u7528", "\u8F93\u5165 tok", "\u7F13\u5B58 tok", "\u8F93\u51FA tok", "\u8D39\u7528"].map((label) => (0, import_react6.createElement)("th", { key: label, scope: "col" }, label)))),
+        (0, import_react6.createElement)("tbody", null, value && rows.length ? rows.map((row) => {
           const totals = row.totals;
           const unavailable = row.failedSessions > 0 && calls(totals) === 0;
-          return (0, import_react4.createElement)(
+          return (0, import_react6.createElement)(
             "tr",
             { key: row.day },
-            (0, import_react4.createElement)("td", null, row.day),
-            (0, import_react4.createElement)("td", null, unavailable ? "\u2014" : calls(totals).toLocaleString("zh-CN")),
-            ...["inputTokens", "cacheTokens", "outputTokens"].map((key) => (0, import_react4.createElement)("td", {
+            (0, import_react6.createElement)("td", null, row.day),
+            (0, import_react6.createElement)("td", null, unavailable ? "\u2014" : calls(totals).toLocaleString("zh-CN")),
+            ...["inputTokens", "cacheTokens", "outputTokens"].map((key) => (0, import_react6.createElement)("td", {
               key,
               title: unavailable ? void 0 : totals[key].toLocaleString("zh-CN")
             }, unavailable ? "\u2014" : formatTokens(totals[key]))),
-            (0, import_react4.createElement)("td", null, costValue(totals, row.failedSessions))
+            (0, import_react6.createElement)("td", null, costValue(totals, row.failedSessions))
           );
-        }) : (0, import_react4.createElement)("tr", null, (0, import_react4.createElement)("td", { colSpan: 6, className: "dsh-tom-cost-empty", role: "status" }, value ? "\u6700\u8FD1 30 \u5929\u6682\u65E0\u975E\u96F6\u8D39\u7528\u8BB0\u5F55" : status)))
+        }) : (0, import_react6.createElement)("tr", null, (0, import_react6.createElement)("td", { colSpan: 6, className: "dsh-tom-cost-empty", role: "status" }, value ? "\u6700\u8FD1 30 \u5929\u6682\u65E0\u975E\u96F6\u8D39\u7528\u8BB0\u5F55" : status)))
       )
     ),
-    (0, import_react4.createElement)("p", { className: "dsh-tom-cost-note" }, "\u5317\u4EAC\u65F6\u95F4 \xB7 \u672C\u5468\u4ECE\u5468\u4E00\u5F00\u59CB \xB7 \u8D39\u7528\u6309\u672C\u673A\u4F1A\u8BDD\u8BB0\u5F55\u4F30\u7B97"),
-    value && value.history.some(incomplete) && (0, import_react4.createElement)(
+    (0, import_react6.createElement)("p", { className: "dsh-tom-cost-note" }, "\u5317\u4EAC\u65F6\u95F4 \xB7 \u672C\u5468\u4ECE\u5468\u4E00\u5F00\u59CB \xB7 \u8D39\u7528\u6309\u672C\u673A\u4F1A\u8BDD\u8BB0\u5F55\u4F30\u7B97"),
+    value && value.history.some(incomplete) && (0, import_react6.createElement)(
       "p",
       { className: "dsh-tom-cost-note", role: "status" },
       "\u90E8\u5206\u8BB0\u5F55\u65E0\u6CD5\u8BFB\u53D6\u6216\u8BA1\u4EF7\uFF0C\u76F8\u5173\u91D1\u989D\u53EF\u80FD\u4E0D\u5B8C\u6574\u3002"
@@ -21344,7 +21600,7 @@ function CostMount({ useProjection, useDailyCost, useAccountBalance, sessionId }
   const totals = useProjection(PROJECTION_KEY);
   const daily = useDailyCost((value) => value);
   const balance = useAccountBalance((value) => value);
-  return (0, import_react5.createElement)(CostPanel, { key: sessionId, totals, daily, balance });
+  return (0, import_react7.createElement)(CostPanel, { key: sessionId, totals, daily, balance });
 }
 async function apply(ctx) {
   await ctx.remote.$mount(dailyRemote);
@@ -21380,10 +21636,10 @@ function ProjectHover({ sessionId, useWorkspaces, useSessions }) {
   const cwd = useSessions((state) => state.byId[sessionId]?.cwd);
   const path = workspace?.path || cwd;
   const name = workspace?.title || path?.split(/[\\/]/).filter(Boolean).at(-1) || path || "\u672A\u5F52\u5C5E\u9879\u76EE";
-  return (0, import_react6.createElement)(
+  return (0, import_react8.createElement)(
     "div",
     { className: "dsh-css-project", title: path },
-    (0, import_react6.createElement)("svg", {
+    (0, import_react8.createElement)("svg", {
       width: 14,
       height: 14,
       viewBox: "0 0 24 24",
@@ -21392,8 +21648,8 @@ function ProjectHover({ sessionId, useWorkspaces, useSessions }) {
       strokeWidth: 1.7,
       strokeLinejoin: "round",
       "aria-hidden": true
-    }, (0, import_react6.createElement)("path", { d: "M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm0 2h18" })),
-    (0, import_react6.createElement)("span", null, name)
+    }, (0, import_react8.createElement)("path", { d: "M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm0 2h18" })),
+    (0, import_react8.createElement)("span", null, name)
   );
 }
 function applySidebarWidth(layout) {
@@ -21435,6 +21691,28 @@ function applySidebarWidth(layout) {
     restore();
   };
 }
+function applySessionContextMenu() {
+  const menuSelector = ".hIlkoa_sessionRow > .hIlkoa_rowActions > ._root_4ub78_1";
+  const open2 = (event) => {
+    const row = event.target.closest?.(".hIlkoa_sessionRow");
+    const menu = row?.querySelector(menuSelector);
+    const button = menu?.querySelector(":scope > button");
+    if (!button) return;
+    event.preventDefault();
+    event.stopPropagation();
+    menu.style.setProperty("--dsh-css-context-x", `${event.clientX}px`);
+    menu.style.setProperty("--dsh-css-context-y", `${event.clientY}px`);
+    if (!row.classList.contains("hIlkoa_menuOpen")) button.click();
+  };
+  document.addEventListener("contextmenu", open2);
+  return () => {
+    document.removeEventListener("contextmenu", open2);
+    for (const menu of document.querySelectorAll(menuSelector)) {
+      menu.style.removeProperty("--dsh-css-context-x");
+      menu.style.removeProperty("--dsh-css-context-y");
+    }
+  };
+}
 async function apply2(ctx) {
   ctx.effect(() => {
     const style = document.createElement("style");
@@ -21445,8 +21723,11 @@ async function apply2(ctx) {
     return () => style.remove();
   });
   ctx.effect(() => applySidebarWidth(ctx.layout));
+  ctx.effect(applySessionContextMenu);
   registerCacheHitPrecision(ctx);
+  registerDateGroups(ctx);
   registerProjects(ctx);
+  registerUnread(ctx);
   ctx.slots.inject("sidebar.session.row.hover", () => ctx.slots.register({
     name: "sidebar.session.row.hover",
     id: "dsh-css-project",

package/dist/index.js

@@ -20064,10 +20064,33 @@ function apply(ctx) {
   });
 }
 
+// src/progress.js
+var PROGRESS_SECTION = "dsh-tom:progress-updates";
+var instructions = `# \u4EFB\u52A1\u8FDB\u5C55\u64AD\u62A5
+\u6267\u884C\u9700\u8981\u8C03\u67E5\u3001\u4FEE\u6539\u3001\u9A8C\u8BC1\u6216\u591A\u6B65\u5DE5\u5177\u64CD\u4F5C\u7684\u4EFB\u52A1\u65F6\uFF0C\u4E3B\u52A8\u5411\u7528\u6237\u7B80\u77ED\u6C47\u62A5\u8FDB\u5C55\uFF1A
+- \u7B2C\u4E00\u6B21\u8C03\u7528\u5DE5\u5177\u524D\uFF0C\u7528\u4E00\u4E24\u53E5\u8BDD\u8BF4\u660E\u63A5\u4E0B\u6765\u51C6\u5907\u505A\u4EC0\u4E48\u3002
+- \u83B7\u5F97\u5173\u952E\u53D1\u73B0\u3001\u8C03\u6574\u65B9\u5411\u6216\u8FDB\u5165\u9A8C\u8BC1\u9636\u6BB5\u65F6\uFF0C\u7B80\u77ED\u8BF4\u660E\u5DF2\u786E\u8BA4\u7684\u7ED3\u679C\u4EE5\u53CA\u4E0B\u4E00\u6B65\u3002\u8FDE\u7EED\u591A\u8F6E\u5DE5\u5177\u64CD\u4F5C\u65F6\u9002\u65F6\u66F4\u65B0\uFF0C\u4E0D\u8981\u59CB\u7EC8\u6C89\u9ED8\u76F4\u5230\u7ED3\u675F\uFF1B\u65E0\u9700\u6BCF\u6B21\u8C03\u7528\u5DE5\u5177\u90FD\u6C47\u62A5\uFF0C\u4E5F\u4E0D\u8981\u91CD\u590D\u7A7A\u6CDB\u7684\u201C\u6B63\u5728\u5904\u7406\u201D\u3002
+- \u8FDB\u5C55\u5FC5\u987B\u4F5C\u4E3A\u7528\u6237\u53EF\u89C1\u7684\u666E\u901A\u52A9\u624B\u6B63\u6587\u8F93\u51FA\uFF0C\u4E0D\u8981\u53EA\u653E\u5728\u601D\u8003\u5185\u5BB9\u3001\u5DE5\u5177\u53C2\u6570\u6216\u6700\u7EC8\u56DE\u7B54\u91CC\u3002\u9700\u8981\u7EE7\u7EED\u6267\u884C\u65F6\uFF0C\u5728\u540C\u4E00\u54CD\u5E94\u4E2D\u5148\u8F93\u51FA\u8FDB\u5C55\u6B63\u6587\uFF0C\u518D\u53D1\u8D77\u5B9E\u9645\u5DE5\u5177\u8C03\u7528\uFF1B\u4E0D\u8981\u4EC5\u8BF4\u201C\u63A5\u4E0B\u6765\u4F1A\u505A\u201D\u5C31\u7ED3\u675F\u4EFB\u52A1\u6216\u7B49\u5F85\u786E\u8BA4\u3002
+- \u53EA\u62A5\u544A\u771F\u5B9E\u89C2\u5BDF\u3001\u5DF2\u7ECF\u5B8C\u6210\u7684\u64CD\u4F5C\u548C\u660E\u786E\u7684\u4E0B\u4E00\u6B65\uFF0C\u4E0D\u8981\u63D0\u524D\u58F0\u79F0\u6210\u529F\uFF0C\u4E0D\u8981\u5C55\u793A\u5185\u90E8\u63A8\u7406\u8FC7\u7A0B\u3002\u9ED8\u8BA4\u4F7F\u7528\u7528\u6237\u7684\u8BED\u8A00\uFF0C\u6BCF\u6B21\u4E00\u4E24\u53E5\u8BDD\u3002
+- \u7B80\u5355\u95EE\u7B54\u76F4\u63A5\u56DE\u7B54\u3002\u7528\u6237\u660E\u786E\u8981\u6C42\u4E0D\u64AD\u62A5\u3001\u4EC5\u7ED9\u7ED3\u8BBA\u6216\u7279\u5B9A\u8F93\u51FA\u683C\u5F0F\u65F6\uFF0C\u9075\u5FAA\u7528\u6237\u8981\u6C42\u3002
+- \u4EFB\u52A1\u5B8C\u6210\u540E\u6309\u539F\u6709\u65B9\u5F0F\u7ED9\u51FA\u6700\u7EC8\u56DE\u7B54\uFF0C\u4E0D\u8981\u628A\u4E2D\u9014\u64AD\u62A5\u91CD\u65B0\u62FC\u6210\u4E00\u4EFD\u91CD\u590D\u7684\u603B\u7ED3\u3002`;
+function registerProgressUpdates(ctx) {
+  ctx.systemPrompt.section({
+    name: PROGRESS_SECTION,
+    order: 10300,
+    interpolate: false,
+    text: ({ agent }) => agent && agent.session.header.origin !== "subagent" ? instructions : ""
+  });
+}
+
 // index.js
 var name = "dsh-css";
+function apply2(ctx) {
+  apply(ctx);
+  ctx.inject(["systemPrompt"], registerProgressUpdates);
+}
 export {
-  apply,
+  apply2 as apply,
   inject,
   name
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dsh-tom/dsh-css",
-  "version": "0.2.1",
-  "description": "为 DeepSeek Harness 调整深色界面，增加项目管理、会话费用和费用历史统计。",
+  "version": "0.2.10",
+  "description": "为 DeepSeek Harness 调整深色界面，增加项目管理、费用统计和任务进展播报。",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -43,7 +43,7 @@
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "node --test test/*.test.mjs",
-    "check": "node --check index.js && node --check src/client.js && node --check src/projects.js && node --check scripts/build.mjs && npm run build && node --check dist/index.js && node --check dist/client.js && npm test",
+    "check": "node --check index.js && node --check src/client.js && node --check src/projects.js && node --check src/progress.js && node --check scripts/build.mjs && npm run build && node --check dist/index.js && node --check dist/client.js && npm test",
     "prepack": "npm run check"
   },
   "license": "MIT",
@@ -65,6 +65,7 @@
     "@deepseek-ai/dsh-typert-registry": "0.2.1-rc.2",
     "@deepseek-ai/dsh-typert-protocol": "0.2.1-rc.2",
     "@deepseek-ai/dsh-session-projection": "0.2.1-rc.2",
+    "@deepseek-ai/dsh-system-prompt": "0.2.1-rc.2",
     "esbuild": "0.28.2",
     "jsdom": "^27.0.0",
     "react": "18.3.1",

package/theme.css

@@ -1,3 +1,34 @@
+.dsh-css-unread-dot {
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-secondary, #aaa);
+}
+
+/* 会话操作出现时隐藏未读提示；项目树保留左侧图标位置，避免标题跳动。 */
+.hIlkoa_sessionRow:is(:hover, .hIlkoa_menuOpen) > .hIlkoa_slot .dsh-css-unread-dot {
+  visibility: hidden;
+}
+
+/* 菜单关闭可能残留宿主的滚动和渐隐状态；非悬停时从标题开头正常显示。 */
+.hIlkoa_sessionRow:not(:hover):not(.hIlkoa_menuOpen) > .hIlkoa_title {
+  overflow: clip;
+  mask-image: none;
+}
+
+/* 会话菜单改为右键打开；保留宿主菜单锚点，并移到鼠标位置。 */
+.hIlkoa_sessionRow > .hIlkoa_rowActions > ._root_4ub78_1 {
+  position: fixed;
+  left: var(--dsh-css-context-x, 0px);
+  top: var(--dsh-css-context-y, 0px);
+  width: 0;
+  height: 0;
+
+  & > button { display: none; }
+}
+
 /* 深色模式配色，保留内置文字、边框和语法高亮颜色。 */
 html body[data-ds-dark-theme] {
   /* 区域 1：左侧会话列表；Windows 标题栏在下方单独设置。原 RGB(27, 27, 28)。 */
@@ -166,9 +197,17 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
     padding: 44px 0 0 12px;
   }
 
-  /* 平铺会话标题与“会话”左对齐，状态图标放到右侧。 */
+  /* 操作按钮间距 15px → 10px；右侧内边距 8px → 4px。 */
+  & .hIlkoa_sessionRow {
+    padding-inline-end: 4px;
+
+    & > .hIlkoa_rowActions { gap: 10px; }
+  }
+
+  /* 行背景向左延伸 4px，留足标题内边距并与“会话”保持左对齐。 */
   & ._9lTDKa_flatList .hIlkoa_sessionRow {
-    padding-inline-start: 4px;
+    margin-inline-start: -4px;
+    padding-inline-start: 8px;
 
     & > .hIlkoa_title {
       margin-left: 0;
@@ -178,7 +217,13 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
       order: 1;
     }
 
-    & > .hIlkoa_slot:empty {
+    /* 空状态占位减半，与右内边距合计 12px；实际状态图标保留原宽度。 */
+    & > .hIlkoa_slot:has(> [data-slot="sidebar.session.row.leading"]:empty) {
+      width: 8px;
+    }
+
+    & > .hIlkoa_slot:empty,
+    &:is(:hover, .hIlkoa_menuOpen) > .hIlkoa_slot:has(.dsh-css-unread-dot) {
       display: none;
     }
   }
@@ -255,6 +300,15 @@ html[data-windows-titlebar] body[data-ds-dark-theme] ._2H3hWW_root:not(._2H3hWW_
   }
 }
 
+.dsh-css-date-heading {
+  padding: 16px 4px 6px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+
+  &:first-child { padding-top: 6px; }
+}
+
 /* 悬浮卡片由宿主通过 portal 挂在侧栏外。 */
 .dsh-css-project {
   display: none;