@dsh-tom/dsh-css 0.2.0 → 0.2.1

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.0.tgz
+D:\product\dsh-css\dsh-tom-dsh-css-0.2.1.tgz
 ```
 
 安装并启用，然后完全退出并重新打开 dsh。
@@ -32,7 +32,7 @@ D:\product\dsh-css\dsh-tom-dsh-css-0.2.0.tgz
 包发布到 npmjs 后，先卸载已安装的旧版，再打开 **插件 → 添加插件 → 安装第三方插件**，输入：
 
 ```text
-@dsh-tom/dsh-css@0.2.0
+@dsh-tom/dsh-css@0.2.1
 ```
 
 选择 **安装源 → npm 官方源**，安装并启用，然后完全退出并重新打开 dsh。

package/dist/client.js

@@ -29,7 +29,7 @@ __export(client_exports, {
   inject: () => inject2
 });
 module.exports = __toCommonJS(client_exports);
-var import_react5 = require("react");
+var import_react6 = 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 */
@@ -1014,8 +1014,44 @@ function registerProjects(ctx) {
   }, ProjectsNav));
 }
 
+// src/cache-hit.js
+var import_react2 = require("react");
+function replacePercent(value, percent) {
+  if (typeof value === "string") return value.replace(/\d+(?:\.\d+)?%/g, `${percent}%`);
+  if (Array.isArray(value)) return import_react2.Children.map(value, (child) => replacePercent(child, percent));
+  if (!(0, import_react2.isValidElement)(value)) return value;
+  const props = {};
+  for (const key of ["label", "ariaLabel", "children"]) {
+    if (key in value.props) props[key] = replacePercent(value.props[key], percent);
+  }
+  return (0, import_react2.cloneElement)(value, props);
+}
+function registerCacheHitPrecision(ctx) {
+  const slot = "conversation.composer.dock";
+  ctx.slots.inject(slot, () => {
+    const original = ctx.slots.entries(slot).find((entry) => entry.options.id === "usage");
+    if (!original) return;
+    const renderUsage = original.component.type;
+    function UsagePill(props) {
+      const element = renderUsage(props);
+      const usage = props.useProjection("tokenUsage");
+      if (!usage) return element;
+      const input2 = usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens;
+      if (input2 === 0) return element;
+      return replacePercent(element, (usage.cacheReadTokens / input2 * 100).toFixed(2));
+    }
+    return ctx.slots.register({
+      ...original.options,
+      name: slot,
+      priority: (original.options.priority ?? 0) - 1,
+      locale: original.locale,
+      inject: original.inject
+    }, UsagePill);
+  });
+}
+
 // src/cost/client.js
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/cost/pricing.js
 var PROJECTION_KEY = "dshTomCost";
@@ -1053,7 +1089,7 @@ function formatMoney(units) {
 }
 
 // src/cost/panel.js
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/cost/panel-styles.js
@@ -1129,8 +1165,8 @@ function costRows(totals, daily, day = beijingDay()) {
   ];
 }
 function useBeijingDay() {
-  const [day, setDay] = (0, import_react2.useState)(beijingDay);
-  (0, import_react2.useEffect)(() => {
+  const [day, setDay] = (0, import_react3.useState)(beijingDay);
+  (0, import_react3.useEffect)(() => {
     let timer;
     const refresh = () => {
       const current = beijingDay();
@@ -1144,7 +1180,7 @@ function useBeijingDay() {
   return day;
 }
 function CostIcon() {
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1157,18 +1193,18 @@ function CostIcon() {
       strokeLinejoin: "round",
       "aria-hidden": true
     },
-    (0, import_react2.createElement)("circle", { cx: 12, cy: 12, r: 9 }),
-    (0, import_react2.createElement)("path", { d: "m8.5 7.5 3.5 4 3.5-4M8.5 12h7M8.5 15h7M12 11.5V18" })
+    (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" })
   );
 }
 function CostPanel({ totals, daily, balance }) {
   const day = useBeijingDay();
   const rows = costRows(totals, daily, day);
-  const [open2, setOpen] = (0, import_react2.useState)(false);
-  const anchor2 = (0, import_react2.useRef)(null);
-  const panel = (0, import_react2.useRef)(null);
-  const dialogId = (0, import_react2.useId)();
-  (0, import_react2.useLayoutEffect)(() => {
+  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)(() => {
     if (!open2) return;
     const element = panel.current;
     const document2 = element.ownerDocument;
@@ -1207,11 +1243,11 @@ function CostPanel({ totals, daily, balance }) {
       document2.removeEventListener("keydown", dismissEscape);
     };
   }, [open2]);
-  return (0, import_react2.createElement)(
+  return (0, import_react3.createElement)(
     "span",
     { className: "dsh-tom-cost-anchor", "data-composer-stat": "cost" },
-    (0, import_react2.createElement)("style", { "data-dsh-tom-cost-styles": "" }, panelStyles),
-    (0, import_react2.createElement)("button", {
+    (0, import_react3.createElement)("style", { "data-dsh-tom-cost-styles": "" }, panelStyles),
+    (0, import_react3.createElement)("button", {
       ref: anchor2,
       type: "button",
       className: "dsh-tom-cost-pill",
@@ -1221,8 +1257,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_react2.createElement)(CostIcon), (0, import_react2.createElement)("span", { className: "dsh-tom-cost-label" }, rows[1][1])),
-    open2 && (0, import_react_dom.createPortal)((0, import_react2.createElement)(
+    }, (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)(
       "div",
       {
         ref: panel,
@@ -1232,11 +1268,11 @@ function CostPanel({ totals, daily, balance }) {
         className: "dsh-tom-cost-panel",
         style: { visibility: "hidden", left: 0, top: 0 }
       },
-      (0, import_react2.createElement)("div", { className: "dsh-tom-cost-title" }, (0, import_react2.createElement)(CostIcon), "\u8D39\u7528\u660E\u7EC6"),
-      (0, import_react2.createElement)("div", { className: "dsh-tom-cost-rule", "aria-hidden": true }),
-      (0, import_react2.createElement)("dl", { className: "dsh-tom-cost-details" }, rows.flatMap(([label, value]) => [
-        (0, import_react2.createElement)("dt", { key: label }, label),
-        (0, import_react2.createElement)("dd", { key: `${label}-value` }, value)
+      (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)
       ]))
     ), anchor2.current.ownerDocument.body)
   );
@@ -21183,7 +21219,7 @@ function createBalanceStore(readBalance) {
 }
 
 // src/cost/settings.js
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/cost/settings-styles.js
 var settingsStyles = `
@@ -21239,62 +21275,62 @@ function usageSummary(row) {
 function CostSettings({ useCostReport }) {
   const report = useCostReport((value2) => value2);
   const day = useBeijingDay();
-  const [hideZero, setHideZero] = (0, import_react3.useState)(true);
+  const [hideZero, setHideZero] = (0, import_react4.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_react3.createElement)(
+  return (0, import_react4.createElement)(
     "section",
     { className: "dsh-tom-cost-settings", "aria-label": "\u8D39\u7528" },
-    (0, import_react3.createElement)("style", null, settingsStyles),
-    (0, import_react3.createElement)("div", { className: "dsh-tom-cost-cards" }, summaries.map(([key, label]) => {
+    (0, import_react4.createElement)("style", null, settingsStyles),
+    (0, import_react4.createElement)("div", { className: "dsh-tom-cost-cards" }, summaries.map(([key, label]) => {
       const row = value?.[key];
-      return (0, import_react3.createElement)(
+      return (0, import_react4.createElement)(
         "div",
         { key, className: "dsh-tom-cost-card" },
-        (0, import_react3.createElement)("div", { className: "dsh-tom-cost-card-label" }, label),
-        (0, import_react3.createElement)("div", { className: "dsh-tom-cost-amount" }, row ? costValue(row.totals, row.failedSessions) : status),
-        (0, import_react3.createElement)("div", { className: "dsh-tom-cost-usage" }, usageSummary(row))
+        (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_react3.createElement)(
+    (0, import_react4.createElement)(
       "div",
       { className: "dsh-tom-cost-history-heading" },
-      (0, import_react3.createElement)("h3", null, "\u5386\u53F2\u8BB0\u5F55", (0, import_react3.createElement)("span", null, "\u6700\u8FD1 30 \u5929")),
-      (0, import_react3.createElement)(
+      (0, import_react4.createElement)("h3", null, "\u5386\u53F2\u8BB0\u5F55", (0, import_react4.createElement)("span", null, "\u6700\u8FD1 30 \u5929")),
+      (0, import_react4.createElement)(
         "label",
         { className: "dsh-tom-cost-filter" },
-        (0, import_react3.createElement)("input", { type: "checkbox", checked: hideZero, onChange: (event) => setHideZero(event.target.checked) }),
+        (0, import_react4.createElement)("input", { type: "checkbox", checked: hideZero, onChange: (event) => setHideZero(event.target.checked) }),
         "\u8FC7\u6EE4\u96F6\u8D39\u7528\u65E5\u671F"
       )
     ),
-    (0, import_react3.createElement)(
+    (0, import_react4.createElement)(
       "div",
       { className: "dsh-tom-cost-table-wrap", tabIndex: 0, role: "region", "aria-label": "\u6BCF\u65E5\u8D39\u7528\u5386\u53F2\u8BB0\u5F55" },
-      (0, import_react3.createElement)(
+      (0, import_react4.createElement)(
         "table",
         { className: "dsh-tom-cost-table" },
-        (0, import_react3.createElement)("thead", null, (0, import_react3.createElement)("tr", null, ["\u65E5\u671F", "\u8C03\u7528", "\u8F93\u5165 tok", "\u7F13\u5B58 tok", "\u8F93\u51FA tok", "\u8D39\u7528"].map((label) => (0, import_react3.createElement)("th", { key: label, scope: "col" }, label)))),
-        (0, import_react3.createElement)("tbody", null, value && rows.length ? rows.map((row) => {
+        (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) => {
           const totals = row.totals;
           const unavailable = row.failedSessions > 0 && calls(totals) === 0;
-          return (0, import_react3.createElement)(
+          return (0, import_react4.createElement)(
             "tr",
             { key: row.day },
-            (0, import_react3.createElement)("td", null, row.day),
-            (0, import_react3.createElement)("td", null, unavailable ? "\u2014" : calls(totals).toLocaleString("zh-CN")),
-            ...["inputTokens", "cacheTokens", "outputTokens"].map((key) => (0, import_react3.createElement)("td", {
+            (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", {
               key,
               title: unavailable ? void 0 : totals[key].toLocaleString("zh-CN")
             }, unavailable ? "\u2014" : formatTokens(totals[key]))),
-            (0, import_react3.createElement)("td", null, costValue(totals, row.failedSessions))
+            (0, import_react4.createElement)("td", null, costValue(totals, row.failedSessions))
           );
-        }) : (0, import_react3.createElement)("tr", null, (0, import_react3.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)("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_react3.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_react3.createElement)(
+    (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)(
       "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"
@@ -21308,7 +21344,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_react4.createElement)(CostPanel, { key: sessionId, totals, daily, balance });
+  return (0, import_react5.createElement)(CostPanel, { key: sessionId, totals, daily, balance });
 }
 async function apply(ctx) {
   await ctx.remote.$mount(dailyRemote);
@@ -21344,10 +21380,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_react5.createElement)(
+  return (0, import_react6.createElement)(
     "div",
     { className: "dsh-css-project", title: path },
-    (0, import_react5.createElement)("svg", {
+    (0, import_react6.createElement)("svg", {
       width: 14,
       height: 14,
       viewBox: "0 0 24 24",
@@ -21356,8 +21392,8 @@ function ProjectHover({ sessionId, useWorkspaces, useSessions }) {
       strokeWidth: 1.7,
       strokeLinejoin: "round",
       "aria-hidden": true
-    }, (0, import_react5.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_react5.createElement)("span", null, name)
+    }, (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)
   );
 }
 function applySidebarWidth(layout) {
@@ -21409,6 +21445,7 @@ async function apply2(ctx) {
     return () => style.remove();
   });
   ctx.effect(() => applySidebarWidth(ctx.layout));
+  registerCacheHitPrecision(ctx);
   registerProjects(ctx);
   ctx.slots.inject("sidebar.session.row.hover", () => ctx.slots.register({
     name: "sidebar.session.row.hover",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-tom/dsh-css",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "为 DeepSeek Harness 调整深色界面，增加项目管理、会话费用和费用历史统计。",
   "type": "module",
   "main": "./dist/index.js",