dsh-cloudq 0.1.1 → 0.1.3

package/README.md

@@ -1,61 +1,69 @@
 # dsh-cloudq
 
-面向 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) 的 CloudQ 集成插件。插件为 Web Profile 提供 CloudQ 模式，内置 `cloudq` Skill，并提供 CloudQ 用量、架构视图、本地凭证配置和插件管理能力。
+English | [简体中文](README-zh.md)
 
-## 环境要求
+CloudQ integration for [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness). It adds a CloudQ mode to the Web profile, bundles the `cloudq` skill, and provides CloudQ usage and architecture views, local credential setup, and plugin management.
+
+## Screenshots
+
+![CloudQ risk analysis conversation](assets/screenshots/chat-risk-analysis.png)
+
+![CloudQ settings and plugin management](assets/screenshots/settings.png)
+
+## Requirements
 
 - Node.js `>=22.19.0`
-- DeepSeek Harness `0.1.1-rc.2` 或兼容的更高 `0.1.x` 版本
-- `dsh plugin` 命令可调用 `pnpm`
-- 可通过 `python3` 命令运行 Python 3
-- macOS 或 Linux
+- DeepSeek Harness `0.1.1-rc.2` or a compatible newer `0.1.x` release
+- `pnpm` available to the `dsh plugin` command
+- Python 3 available as `python3`
+- macOS or Linux
 
-## 安装
+## Install
 
 ```sh
 dsh plugin --profile web add dsh-cloudq
 ```
 
-安装完成后重启 Web Profile：
+Restart the Web profile after installation:
 
 ```sh
 dsh --profile web
 ```
 
-打开 DSH 输出的访问地址，即可在对话输入区和侧边栏看到 CloudQ 入口。也可以通过 `/cloudq` 显式调用内置 Skill。
+Open the URL printed by DSH. The conversation input area and sidebar will expose the CloudQ entry. You can also invoke the bundled skill explicitly with `/cloudq`.
 
-## 升级与卸载
+## Upgrade and remove
 
 ```sh
 dsh plugin --profile web update dsh-cloudq
 dsh plugin --profile web remove dsh-cloudq
 ```
 
-修改已安装的插件后，需要重启 Web Profile。
+Restart the Web profile after changing the installed package set.
 
-## 凭证配置
+## Credentials
 
-设置卡片支持配置腾讯云 `SecretId` 和 `SecretKey` 凭证。
+The settings card accepts a Tencent Cloud `SecretId`/`SecretKey` pair.
 
-- 凭证保存在本机 `~/.tencent-cloudq/credential.json`，文件权限仅允许当前用户访问。
-- 敏感凭证通过标准输入传递给 Python 辅助脚本，不会放入命令行参数。
-- 浏览器接口仅返回凭证状态和脱敏标识，不返回凭证内容或本地凭证路径。
-- 可通过退出登录操作删除本地凭证。
+- Credentials are stored locally at `~/.tencent-cloudq/credential.json` with owner-only permissions.
+- Secret values are sent to Python helpers through standard input, never command-line arguments.
+- Browser APIs return only credential state and masked identifiers; local credential paths and secret values are not returned.
+- Use the logout action to remove the stored credential.
 
-请遵循最小权限原则，只授予 CloudQ 操作所需的权限。内置 Skill 可以调用云管理的读写操作，请在批准前检查每项操作的具体内容。
+Follow least-privilege: grant only the permissions required for the CloudQ operations you intend to run. The bundled skill can invoke read and write cloud-management operations; review each action before approving it.
 
-## 安全机制
+## Security model
 
-- Host API 只接受来自回环地址的同源请求。
-- JSON 请求体大小限制为 64 KiB。
-- Python 辅助脚本的输出大小受到限制，非预期的内部错误不会返回到浏览器。
-- 远程数据通过 DOM 文本节点渲染，不使用 HTML 注入。
-- 下载链接必须使用 HTTPS。
-- npm 包不包含凭证、Token 或本地环境文件。
+- Host APIs accept only loopback, same-origin requests.
+- JSON request bodies are limited to 64 KiB.
+- Python helper output is bounded, and unexpected internal errors are not returned to the browser.
+- Remote values are inserted with DOM text nodes rather than HTML injection.
+- Download links require HTTPS.
+- No credentials, tokens, or local environment files are included in the npm package.
 
-如需报告安全问题，请通过 [GitHub Issues](https://github.com/TencentCloud/cloudq-for-dsh/issues) 提交，且不要附带真实凭证。
+Report security issues through [GitHub Issues](https://github.com/TencentCloud/cloudq-for-dsh/issues) without including live credentials.
 
-## 本地开发
+## Development
 
 ```sh
 pnpm install
@@ -67,23 +75,28 @@ pnpm run check:client
 npm pack --dry-run --registry=https://registry.npmjs.org/
 ```
 
-npm 包内包含预构建的 Host 和 Web Client 产物、Bundle Patch、CloudQ 运行时图标以及内置 Skill。用户从 Registry 安装时不需要执行构建脚本。
+The npm package ships prebuilt Host and Web client artifacts, the bundle patch, the runtime logo, and the bundled skill. Registry installation runs no build scripts.
 
-## 目录结构
+## Repository layout
 
 ```text
-src/                         Host 与 Web Client 源码
-skills/cloudq/               内置 CloudQ Skill 与 Python 辅助脚本
-assets/cloudq.png            Host 提供的运行时图标
-scripts/                     构建和发布检查脚本
-tests/                       单元测试、集成测试与包契约测试
-cordis.patch.yml             DSH Bundle 配置层
+src/                         Host and Web client source
+skills/cloudq/               Bundled CloudQ skill and Python helpers
+assets/cloudq.png            Runtime logo served by the Host
+scripts/                     Build and release checks
+tests/                       Unit, integration, and package-contract tests
+cordis.patch.yml             DSH bundle layer
 ```
 
-## 发布
+## Release
+
+Source is reviewed and versioned in [TencentCloud/cloudq-for-dsh](https://github.com/TencentCloud/cloudq-for-dsh). An npm version is published to the official registry only after the repository checks and the package-install smoke test pass.
+
+## More documentation
 
-源码在 [TencentCloud/cloudq-for-dsh](https://github.com/TencentCloud/cloudq-for-dsh) 完成评审和版本管理。只有仓库检查与安装包冒烟测试全部通过后，才可将 npm 版本发布到官方 Registry。
+- Changelog: [`CHANGELOG.md`](CHANGELOG.md)
+- Development & maintenance guide: [`DEVELOPMENT.md`](DEVELOPMENT.md)
 
-## 许可证
+## License
 
-本项目采用 MIT 许可证，详情请参阅 [`LICENSE`](LICENSE)。
+MIT. See [`LICENSE`](LICENSE).

package/lib/client.js

@@ -432,10 +432,6 @@ window.__ModuleLoader__.load({
   font-size: 11px;
   font-weight: 500;
 }
-.dsh-cloudq-pm__row-tag--self {
-  background: var(--dsw-alias-state-business-primary, #315efb);
-  color: #fff;
-}
 .dsh-cloudq-pm__row-tag--off {
   background: var(--dsw-alias-state-danger, #d54941);
   color: #fff;
@@ -1143,12 +1139,145 @@ body.dsh-cloudq-mode-active [class*=composerHero] [class*=root][class*=hero] {
   margin-bottom: 16px;
 }
 .dsh-cloudq-usage__card {
-  flex: 1;
+  flex: 0 1 auto;
+  min-width: 240px;
   padding: 14px 16px;
   border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
   border-radius: 10px;
   background: var(--dsw-alias-bg-sub, #f7f8fa);
 }
+.dsh-cloudq-usage__card-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.dsh-cloudq-usage__card-unit {
+  font-size: 13px;
+  color: var(--dsw-alias-label-secondary, #626a76);
+}
+.dsh-cloudq-usage__free-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-state-business-primary-bg, #e8efff);
+  color: var(--dsw-alias-state-business-primary, #315efb);
+  font-size: 12px;
+  cursor: help;
+}
+.dsh-cloudq-usage__free-badge .dsh-cloudq-tooltip {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .12s ease;
+}
+.dsh-cloudq-usage__free-badge:hover .dsh-cloudq-tooltip,
+.dsh-cloudq-usage__free-badge:focus-visible .dsh-cloudq-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+.dsh-cloudq-usage__range {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.dsh-cloudq-usage__range-picker {
+  position: relative;
+}
+.dsh-cloudq-usage__range-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-interactive-border, #cdd3da);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-card, #fff);
+  color: var(--dsw-alias-label-primary, #1d2129);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.dsh-cloudq-usage__range-btn:hover {
+  border-color: var(--dsw-alias-state-business-primary, #315efb);
+}
+.dsh-cloudq-usage__range-picker.is-open .dsh-cloudq-usage__range-btn {
+  border-color: var(--dsw-alias-state-business-primary, #315efb);
+  box-shadow: 0 0 0 2px rgba(49, 94, 251, .12);
+}
+.dsh-cloudq-usage__range-btn-chevron {
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary, #9aa1ab);
+  transition: transform .15s ease;
+}
+.dsh-cloudq-usage__range-picker.is-open .dsh-cloudq-usage__range-btn-chevron {
+  transform: rotate(180deg);
+}
+.dsh-cloudq-usage__range-menu {
+  position: absolute;
+  z-index: 1400;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 136px;
+  padding: 4px;
+  border: 1px solid var(--dsw-alias-border-l2, #e1e4e8);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-card, #fff);
+  box-shadow: 0 8px 24px rgba(29, 33, 41, .12);
+}
+.dsh-cloudq-usage__range-option {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #1d2129);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.dsh-cloudq-usage__range-option:hover {
+  background: var(--dsw-alias-bg-sub, #f2f4f8);
+}
+.dsh-cloudq-usage__range-option.is-active {
+  color: var(--dsw-alias-state-business-primary, #315efb);
+  font-weight: 500;
+}
+.dsh-cloudq-usage__range-option-check {
+  width: 14px;
+  flex: none;
+  color: var(--dsw-alias-state-business-primary, #315efb);
+  visibility: hidden;
+}
+.dsh-cloudq-usage__range-option.is-active .dsh-cloudq-usage__range-option-check {
+  visibility: visible;
+}
+.dsh-cloudq-usage__date {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--dsw-alias-interactive-border, #cdd3da);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-card, #fff);
+  color: var(--dsw-alias-label-primary, #1d2129);
+  font-size: 12px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+.dsh-cloudq-usage__date:focus {
+  border-color: var(--dsw-alias-state-business-primary, #315efb);
+  box-shadow: 0 0 0 2px rgba(49, 94, 251, .12);
+}
+.dsh-cloudq-usage__range-error {
+  font-size: 12px;
+  color: var(--dsw-alias-state-danger, #d54941);
+}
 .dsh-cloudq-usage__card-label {
   font-size: 12px;
   color: var(--dsw-alias-label-tertiary, #9aa1ab);
@@ -1751,22 +1880,58 @@ display: none;
 		const API_ARCH_DIRECTORIES = "/api/dsh-cloudq/architecture/directories";
 		const API_ARCH_LIST = "/api/dsh-cloudq/architecture/list";
 		const CLOUDQ_ARCH_FOLDER_KEY = "dsh-cloudq.architecture-folder-id";
-		function defaultUsageRange() {
+		const USAGE_RANGE_PRESETS = [
+			{
+				id: "3d",
+				label: "最近 3 天",
+				days: 3
+			},
+			{
+				id: "7d",
+				label: "最近 1 周",
+				days: 7
+			},
+			{
+				id: "30d",
+				label: "最近 1 月",
+				days: 30
+			},
+			{
+				id: "custom",
+				label: "自定义",
+				days: 0
+			}
+		];
+		let usagePreset = "7d";
+		let usageCustomStart = "";
+		let usageCustomEnd = "";
+		function formatUsageTimestamp(d) {
+			const pad = (n) => String(n).padStart(2, "0");
+			return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+		}
+		/** Resolve the current range to API timestamps; null when custom dates are incomplete. */
+		function usageRangeTimestamps() {
+			if (usagePreset === "custom") {
+				if (!usageCustomStart || !usageCustomEnd) return null;
+				return {
+					start: `${usageCustomStart} 00:00:00`,
+					end: `${usageCustomEnd} 23:59:59`
+				};
+			}
+			const preset = USAGE_RANGE_PRESETS.find((item) => item.id === usagePreset) ?? USAGE_RANGE_PRESETS[1];
 			const end = /* @__PURE__ */ new Date();
-			const start = /* @__PURE__ */ new Date(end.getTime() - 6048e5);
-			const fmt = (d) => {
-				const pad = (n) => String(n).padStart(2, "0");
-				return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
-			};
 			return {
-				start: fmt(start),
-				end: fmt(end)
+				start: formatUsageTimestamp(/* @__PURE__ */ new Date(end.getTime() - preset.days * 24 * 60 * 60 * 1e3)),
+				end: formatUsageTimestamp(end)
 			};
 		}
 		function formatCredits(value) {
 			const num = typeof value === "number" ? value : Number(value);
 			if (!Number.isFinite(num)) return "—";
-			return num.toFixed(2);
+			return num.toLocaleString("en-US", {
+				minimumFractionDigits: 2,
+				maximumFractionDigits: 2
+			});
 		}
 		function formatDateTime(raw) {
 			if (!raw) return "—";
@@ -1828,93 +1993,221 @@ display: none;
 		let architecturePickerCleanup = null;
 		function renderUsageView() {
 			panelBody.textContent = "";
-			const range = defaultUsageRange();
-			const hint = document.createElement("div");
-			hint.className = "dsh-cloudq-panel__hint";
-			hint.textContent = "正在加载用量…";
-			panelBody.appendChild(hint);
-			cloudqRequest(`${API_USAGE}?start=${encodeURIComponent(range.start)}&end=${encodeURIComponent(range.end)}`).then((data) => {
-				if (panelView !== "usage" || !panelExpanded) return;
-				panelBody.textContent = "";
-				const overview = data.overview ?? {};
-				const rows = Array.isArray(data.detail) ? data.detail : [];
-				const overviewWrap = document.createElement("div");
-				overviewWrap.className = "dsh-cloudq-usage__overview";
-				const createUsageCard = (labelText, valueText, detailText) => {
-					const card = document.createElement("div");
-					card.className = "dsh-cloudq-usage__card";
-					const label = document.createElement("div");
-					label.className = "dsh-cloudq-usage__card-label";
-					label.textContent = labelText;
-					const value = document.createElement("div");
-					value.className = "dsh-cloudq-usage__card-value";
-					value.textContent = valueText;
-					const detail = document.createElement("div");
-					detail.className = "dsh-cloudq-usage__card-sub";
-					detail.textContent = detailText;
-					card.append(label, value, detail);
-					return card;
-				};
-				const cardTotal = createUsageCard("剩余积分", formatCredits(overview.TotalCredits), `自 ${overview.TotalStartDate ?? "—"} 起累计`);
-				const monthly = overview.MonthlyCredits;
-				const cardMonthly = createUsageCard("本月积分", monthly === null || monthly === void 0 ? "—" : formatCredits(monthly), overview.MonthlyStartDate ? `起于 ${overview.MonthlyStartDate}` : "暂无月度数据");
-				overviewWrap.append(cardTotal, cardMonthly);
-				const table = document.createElement("table");
-				table.className = "dsh-cloudq-usage__table";
-				const thead = document.createElement("thead");
-				const headerRow = document.createElement("tr");
-				for (const heading of [
-					"时间",
-					"渠道",
-					"内容",
-					"积分"
-				]) {
-					const cell = document.createElement("th");
-					cell.textContent = heading;
-					headerRow.appendChild(cell);
-				}
-				thead.appendChild(headerRow);
-				table.appendChild(thead);
-				const tbody = document.createElement("tbody");
-				if (rows.length === 0) {
-					const tr = document.createElement("tr");
-					const empty = document.createElement("td");
-					empty.colSpan = 4;
-					empty.className = "dsh-cloudq-usage__table__empty";
-					empty.textContent = "近 7 天暂无用量记录";
-					tr.appendChild(empty);
-					tbody.appendChild(tr);
-				} else for (const row of rows) {
-					const tr = document.createElement("tr");
-					const time = document.createElement("td");
-					time.textContent = formatDateTime(row.StartTime);
-					const channel = document.createElement("td");
-					channel.textContent = row.Channel ?? "—";
-					const message = document.createElement("td");
-					const msgSpan = document.createElement("span");
-					msgSpan.className = "dsh-cloudq-usage__table__message";
-					msgSpan.textContent = row.Message ?? "";
-					message.appendChild(msgSpan);
-					const credits = document.createElement("td");
-					credits.className = "dsh-cloudq-usage__table__credits";
-					credits.textContent = formatCredits(row.Credits);
-					tr.appendChild(time);
-					tr.appendChild(channel);
-					tr.appendChild(message);
-					tr.appendChild(credits);
-					tbody.appendChild(tr);
+			const overviewWrap = document.createElement("div");
+			overviewWrap.className = "dsh-cloudq-usage__overview";
+			const card = document.createElement("div");
+			card.className = "dsh-cloudq-usage__card";
+			const label = document.createElement("div");
+			label.className = "dsh-cloudq-usage__card-label";
+			label.textContent = "累计消耗 Credit";
+			const valueRow = document.createElement("div");
+			valueRow.className = "dsh-cloudq-usage__card-value-row";
+			const value = document.createElement("span");
+			value.className = "dsh-cloudq-usage__card-value";
+			value.textContent = "…";
+			const unit = document.createElement("span");
+			unit.className = "dsh-cloudq-usage__card-unit";
+			unit.textContent = "个";
+			const freeBadge = document.createElement("span");
+			freeBadge.className = "dsh-cloudq-usage__free-badge";
+			freeBadge.textContent = "公测期免费 ⓘ";
+			freeBadge.tabIndex = 0;
+			const freeBadgeTip = document.createElement("span");
+			freeBadgeTip.className = "dsh-cloudq-tooltip";
+			freeBadgeTip.setAttribute("role", "tooltip");
+			freeBadgeTip.textContent = "正式计费将提前 1 个月通知";
+			freeBadge.appendChild(freeBadgeTip);
+			valueRow.append(value, unit, freeBadge);
+			card.append(label, valueRow);
+			overviewWrap.appendChild(card);
+			panelBody.appendChild(overviewWrap);
+			const rangeBar = document.createElement("div");
+			rangeBar.className = "dsh-cloudq-usage__range";
+			const picker = document.createElement("div");
+			picker.className = "dsh-cloudq-usage__range-picker";
+			const pickerBtn = document.createElement("button");
+			pickerBtn.type = "button";
+			pickerBtn.className = "dsh-cloudq-usage__range-btn";
+			pickerBtn.setAttribute("aria-haspopup", "listbox");
+			pickerBtn.setAttribute("aria-expanded", "false");
+			pickerBtn.setAttribute("aria-label", "用量时间范围");
+			const pickerLabel = document.createElement("span");
+			pickerLabel.className = "dsh-cloudq-usage__range-btn-label";
+			const pickerChevron = document.createElement("span");
+			pickerChevron.className = "dsh-cloudq-usage__range-btn-chevron";
+			pickerChevron.textContent = "▾";
+			pickerBtn.append(pickerLabel, pickerChevron);
+			const menu = document.createElement("div");
+			menu.className = "dsh-cloudq-usage__range-menu";
+			menu.setAttribute("role", "listbox");
+			menu.hidden = true;
+			const optionButtons = /* @__PURE__ */ new Map();
+			for (const preset of USAGE_RANGE_PRESETS) {
+				const option = document.createElement("button");
+				option.type = "button";
+				option.className = "dsh-cloudq-usage__range-option";
+				option.setAttribute("role", "option");
+				const check = document.createElement("span");
+				check.className = "dsh-cloudq-usage__range-option-check";
+				check.textContent = "✓";
+				const text = document.createElement("span");
+				text.textContent = preset.label;
+				option.append(check, text);
+				option.addEventListener("click", () => {
+					usagePreset = preset.id;
+					syncPicker();
+					closeMenu();
+					syncCustomVisibility();
+					loadUsage();
+				});
+				optionButtons.set(preset.id, option);
+				menu.appendChild(option);
+			}
+			const syncPicker = () => {
+				const active = USAGE_RANGE_PRESETS.find((item) => item.id === usagePreset) ?? USAGE_RANGE_PRESETS[1];
+				pickerLabel.textContent = active.label;
+				for (const [id, option] of optionButtons) {
+					const isActive = id === active.id;
+					option.classList.toggle("is-active", isActive);
+					option.setAttribute("aria-selected", String(isActive));
 				}
-				table.appendChild(tbody);
-				panelBody.appendChild(overviewWrap);
-				panelBody.appendChild(table);
-			}).catch((error) => {
-				if (!panelExpanded) return;
-				panelBody.textContent = "";
-				const err = document.createElement("div");
-				err.className = "dsh-cloudq-panel__error";
-				err.textContent = cloudqPanelErrorText(error, "用量加载失败");
-				panelBody.appendChild(err);
+			};
+			const pickerAbort = new AbortController();
+			const closeMenu = () => {
+				menu.hidden = true;
+				picker.classList.remove("is-open");
+				pickerBtn.setAttribute("aria-expanded", "false");
+			};
+			pickerBtn.addEventListener("click", () => {
+				const willOpen = menu.hidden;
+				menu.hidden = !willOpen;
+				picker.classList.toggle("is-open", willOpen);
+				pickerBtn.setAttribute("aria-expanded", String(willOpen));
 			});
+			document.addEventListener("mousedown", (event) => {
+				if (!menu.isConnected) {
+					pickerAbort.abort();
+					return;
+				}
+				if (!picker.contains(event.target)) closeMenu();
+			}, { signal: pickerAbort.signal });
+			document.addEventListener("keydown", (event) => {
+				if (!menu.isConnected) return;
+				if (event.key === "Escape") closeMenu();
+			}, { signal: pickerAbort.signal });
+			syncPicker();
+			const startDate = document.createElement("input");
+			startDate.type = "date";
+			startDate.className = "dsh-cloudq-usage__date";
+			startDate.setAttribute("aria-label", "开始日期");
+			startDate.value = usageCustomStart;
+			const endDate = document.createElement("input");
+			endDate.type = "date";
+			endDate.className = "dsh-cloudq-usage__date";
+			endDate.setAttribute("aria-label", "结束日期");
+			endDate.value = usageCustomEnd;
+			const rangeError = document.createElement("span");
+			rangeError.className = "dsh-cloudq-usage__range-error";
+			const syncCustomVisibility = () => {
+				const custom = usagePreset === "custom";
+				startDate.hidden = !custom;
+				endDate.hidden = !custom;
+			};
+			const tableWrap = document.createElement("div");
+			const loadUsage = () => {
+				const range = usageRangeTimestamps();
+				rangeError.textContent = "";
+				if (!range) {
+					tableWrap.textContent = "";
+					const hint = document.createElement("div");
+					hint.className = "dsh-cloudq-panel__hint";
+					hint.textContent = "请选择开始日期与结束日期。";
+					tableWrap.appendChild(hint);
+					return;
+				}
+				if (usagePreset === "custom" && usageCustomStart > usageCustomEnd) {
+					rangeError.textContent = "开始日期不能晚于结束日期。";
+					return;
+				}
+				tableWrap.textContent = "";
+				const hint = document.createElement("div");
+				hint.className = "dsh-cloudq-panel__hint";
+				hint.textContent = "正在加载用量…";
+				tableWrap.appendChild(hint);
+				cloudqRequest(`${API_USAGE}?start=${encodeURIComponent(range.start)}&end=${encodeURIComponent(range.end)}`).then((data) => {
+					if (panelView !== "usage" || !panelExpanded) return;
+					value.textContent = formatCredits(data.overview?.TotalCredits);
+					const rows = Array.isArray(data.detail) ? data.detail : [];
+					tableWrap.textContent = "";
+					const table = document.createElement("table");
+					table.className = "dsh-cloudq-usage__table";
+					const thead = document.createElement("thead");
+					const headerRow = document.createElement("tr");
+					for (const heading of [
+						"时间",
+						"渠道",
+						"内容",
+						"积分"
+					]) {
+						const cell = document.createElement("th");
+						cell.textContent = heading;
+						headerRow.appendChild(cell);
+					}
+					thead.appendChild(headerRow);
+					table.appendChild(thead);
+					const tbody = document.createElement("tbody");
+					if (rows.length === 0) {
+						const tr = document.createElement("tr");
+						const empty = document.createElement("td");
+						empty.colSpan = 4;
+						empty.className = "dsh-cloudq-usage__table__empty";
+						empty.textContent = "当前时间范围内暂无用量记录";
+						tr.appendChild(empty);
+						tbody.appendChild(tr);
+					} else for (const row of rows) {
+						const tr = document.createElement("tr");
+						const time = document.createElement("td");
+						time.textContent = formatDateTime(row.StartTime);
+						const channel = document.createElement("td");
+						channel.textContent = row.Channel ?? "—";
+						const message = document.createElement("td");
+						const msgSpan = document.createElement("span");
+						msgSpan.className = "dsh-cloudq-usage__table__message";
+						msgSpan.textContent = row.Message ?? "";
+						message.appendChild(msgSpan);
+						const credits = document.createElement("td");
+						credits.className = "dsh-cloudq-usage__table__credits";
+						credits.textContent = formatCredits(row.Credits);
+						tr.appendChild(time);
+						tr.appendChild(channel);
+						tr.appendChild(message);
+						tr.appendChild(credits);
+						tbody.appendChild(tr);
+					}
+					table.appendChild(tbody);
+					tableWrap.appendChild(table);
+				}).catch((error) => {
+					if (panelView !== "usage" || !panelExpanded) return;
+					tableWrap.textContent = "";
+					const err = document.createElement("div");
+					err.className = "dsh-cloudq-panel__error";
+					err.textContent = cloudqPanelErrorText(error, "用量加载失败");
+					tableWrap.appendChild(err);
+				});
+			};
+			const onCustomDateChange = () => {
+				usageCustomStart = startDate.value;
+				usageCustomEnd = endDate.value;
+				loadUsage();
+			};
+			startDate.addEventListener("change", onCustomDateChange);
+			endDate.addEventListener("change", onCustomDateChange);
+			picker.append(pickerBtn, menu);
+			rangeBar.append(picker, startDate, endDate, rangeError);
+			syncCustomVisibility();
+			panelBody.appendChild(rangeBar);
+			panelBody.appendChild(tableWrap);
+			loadUsage();
 		}
 		const INSPIRATION_TABS = [
 			{
@@ -3206,17 +3499,10 @@ display: none;
 											className: "dsh-cloudq-pm__row-info",
 											children: [react_jsx_runtime.jsx("div", {
 												className: "dsh-cloudq-pm__row-name",
-												children: [
-													plugin.name,
-													plugin.self ? react_jsx_runtime.jsx("span", {
-														className: "dsh-cloudq-pm__row-tag dsh-cloudq-pm__row-tag--self",
-														children: "本插件"
-													}) : null,
-													!on ? react_jsx_runtime.jsx("span", {
-														className: "dsh-cloudq-pm__row-tag dsh-cloudq-pm__row-tag--off",
-														children: "已停用"
-													}) : null
-												]
+												children: [plugin.name, !on ? react_jsx_runtime.jsx("span", {
+													className: "dsh-cloudq-pm__row-tag dsh-cloudq-pm__row-tag--off",
+													children: "已停用"
+												}) : null]
 											}), react_jsx_runtime.jsx("div", {
 												className: "dsh-cloudq-pm__row-bundle",
 												children: `${plugin.id} · ${plugin.bundle}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-cloudq",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "CloudQ integration for DeepSeek Harness with secure credential, workspace, and plugin-management surfaces",
   "license": "MIT",
   "type": "module",