dsh-codearts 1.2.3 → 1.2.5

package/lib/client/index.js

@@ -22,81 +22,129 @@ function stripModelSuffixes(name) {
 	return base.replace(/\s*[（(]\s*(?:(?:免费|福利)(?:\s+x\d+(?:\.\d+)?)?|x\d+(?:\.\d+)?)\s*[)）]\s*$/, "").trim();
 }
 //#endregion
+//#region src/client/panel-switch.ts
+/**
+* 「要不要在 DSH 侧边栏占一格」这个偏好，浏览器侧的单一真相。
+*
+* 为什么不靠组件返回 null 来隐藏：宿主是按**槽位里的注册条目**（entry metadata）
+* 画侧边栏导航行的 —— 只要注册还在，那一行就在；渲染函数 return null 只会留下一个
+* 「空白但可点」的按钮。所以开关必须落到「注册 / 不注册」上，这里只存那个意图，
+* 真正的注册动作由 index.tsx 的 sync 控制器按它做。
+*
+* 默认 **false**：读不到配置时必须当作关闭。侧边栏那一格是所有插件共用的全局座位，
+* 猜错的代价比「少一个入口」大得多（用户还能从「设置 → 插件」进同一张卡片）。
+*/
+let wanted = false;
+/** 当前是否要显示侧边栏入口。 */
+function sidebarPanelWanted() {
+	return wanted;
+}
+const listeners = /* @__PURE__ */ new Set();
+/**
+* 改开关。值没变就直接返回 —— 调用方会在每次刷新状态时调用它，
+* 无变化的重注册会让侧边栏闪一下。
+*/
+function setSidebarPanelWanted(next) {
+	if (wanted === next) return;
+	wanted = next;
+	for (const listener of [...listeners]) try {
+		listener();
+	} catch (error) {
+		console.error("[dsh-codearts] sidebar panel listener failed:", error);
+	}
+}
+/** 订阅开关变化，返回取消订阅函数。 */
+function subscribeSidebarPanelWanted(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+//#endregion
 //#region \0dsh-css:/home/runner/work/dsh-codearts/dsh-codearts/src/client/CodeArtsPluginCard.module.css.mjs
-const css = ".xoziZG_card{border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-settings-card-fill);max-width:720px}.xoziZG_header{align-items:flex-start;gap:12px;padding:14px 16px;display:flex}.xoziZG_headText{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.xoziZG_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:22px}.xoziZG_desc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:20px}.xoziZG_statusLine{color:var(--dsw-alias-label-primary);align-items:center;gap:6px;font-size:14px;font-weight:500;line-height:22px;display:inline-flex}.xoziZG_meta{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:12px;line-height:18px}.xoziZG_body{border-top:.5px solid var(--dsw-alias-border-l2);margin:0 16px;padding:4px 0 16px}.xoziZG_tabs{margin-top:12px}.xoziZG_tabPanel{padding-top:2px}.xoziZG_accountToolbar{gap:8px;margin-top:12px;display:flex}.xoziZG_accountToolbar>*{flex:1}.xoziZG_manualForm{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);margin-top:12px;padding:12px}.xoziZG_accountCard{flex-direction:column;gap:10px;margin-top:12px;display:flex}.xoziZG_accountEntry{border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2)}.xoziZG_accountRow{align-items:center;gap:10px;padding:12px;display:flex}.xoziZG_claimAllRow{border-top:.5px solid var(--dsw-alias-border-l2);justify-content:flex-end;padding:10px 12px 0;display:flex}.xoziZG_avatar{background:var(--dsw-alias-bg-layer-3);width:32px;height:32px;color:var(--dsw-alias-label-primary);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:inline-flex}.xoziZG_accountInfo{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.xoziZG_accountNameRow{align-items:center;gap:6px;min-width:0;display:flex}.xoziZG_accountName{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;line-height:20px;overflow:hidden}.xoziZG_accountRowActions{flex:none;gap:6px;display:flex}.xoziZG_accountHint{color:var(--dsw-alias-label-tertiary);margin:0;padding:0 12px 12px;font-size:12px;line-height:18px}.xoziZG_creditBlock{border-top:.5px solid var(--dsw-alias-border-l2);padding:12px}.xoziZG_balanceRow{flex-wrap:wrap;align-items:baseline;gap:6px;display:flex}.xoziZG_balance{color:var(--dsw-alias-label-primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;line-height:34px}.xoziZG_balanceUnit{color:var(--dsw-alias-label-secondary);font-size:12px}.xoziZG_balanceMeta{color:var(--dsw-alias-label-tertiary);margin-left:2px;font-size:12px}.xoziZG_updated{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.xoziZG_creditRows{flex-direction:column;gap:4px;margin-top:8px;display:flex}.xoziZG_creditRow{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;line-height:18px;display:flex}.xoziZG_usageBar{background:var(--dsw-alias-border-l2);border-radius:2px;height:4px;margin-top:4px;display:block;overflow:hidden}.xoziZG_usageFill{background:var(--dsw-alias-brand-primary);border-radius:2px;height:100%;transition:width .2s;display:block}.xoziZG_expiryRow{margin-top:2px}.xoziZG_expiryLabel{color:var(--dsw-alias-state-warn-label)}.xoziZG_bar{background:var(--dsw-alias-bg-layer-3);border-radius:2px;height:4px;margin-top:6px;display:block;overflow:hidden}.xoziZG_barFill{background:var(--dsw-alias-state-warn-primary);border-radius:2px;height:100%;display:block}.xoziZG_creditLink{margin-top:8px;display:inline-block}.xoziZG_creditFooter{border-top:.5px solid var(--dsw-alias-border-l2);justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;display:flex}.xoziZG_creditHint{color:var(--dsw-alias-label-tertiary);margin:8px 0 0;font-size:12px;line-height:18px}.xoziZG_section{margin-top:16px}.xoziZG_sectionHead{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.xoziZG_sectionLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;font-weight:500}.xoziZG_count{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;flex:none;font-size:12px}.xoziZG_hint{color:var(--dsw-alias-label-secondary);margin:8px 0 0;font-size:13px;line-height:20px}.xoziZG_error{color:var(--dsw-alias-state-error-primary);margin:10px 0 0;font-size:13px;line-height:20px}.xoziZG_actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;display:flex}.xoziZG_danger{color:var(--dsw-alias-state-error-primary)}.xoziZG_link{appearance:none;color:var(--dsw-alias-brand-text);font:inherit;text-align:left;word-break:break-all;cursor:pointer;background:0 0;border:none;padding:0;font-size:12px}.xoziZG_link:hover{text-decoration:underline}.xoziZG_choices{flex-direction:column;gap:2px;margin-top:8px;display:flex}.xoziZG_choiceRow{border-radius:var(--dsw-radius-sm);align-items:center;gap:8px;margin:0 -6px;padding:5px 6px;display:flex}.xoziZG_choiceRow:hover{background:var(--dsw-alias-interactive-bg-hover)}.xoziZG_modelChart{flex-direction:column;gap:2px;margin-top:8px;display:flex}.xoziZG_modelRow{font-variant-numeric:tabular-nums;grid-template-columns:minmax(0,1.2fr) minmax(48px,1fr) 56px 52px 64px;align-items:center;gap:8px;padding:4px 0;display:grid}.xoziZG_modelName{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;overflow:hidden}.xoziZG_modelTrack{background:var(--dsw-alias-border-l2);border-radius:4px;height:8px;display:block;overflow:hidden}.xoziZG_modelFill{background:var(--dsw-alias-brand-primary);border-radius:4px;height:100%;transition:width .16s;display:block}.xoziZG_modelTokens,.xoziZG_modelShare,.xoziZG_modelRequests{color:var(--dsw-alias-label-secondary);text-align:right;white-space:nowrap;font-size:11px;line-height:16px}.xoziZG_modelRequests{color:var(--dsw-alias-label-tertiary)}.xoziZG_check{flex:1;min-width:0}.xoziZG_check>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.xoziZG_manual{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);margin-top:12px;padding:0 12px}.xoziZG_manual[open]{padding-bottom:12px}.xoziZG_manualSummary{color:var(--dsw-alias-label-secondary);cursor:pointer;align-items:center;gap:6px;padding:9px 0;font-size:13px;list-style:none;display:flex}.xoziZG_manualSummary::-webkit-details-marker{display:none}.xoziZG_field{flex-direction:column;gap:5px;margin-top:10px;display:flex}.xoziZG_fieldLabel{color:var(--dsw-alias-label-tertiary);font-size:12px}.xoziZG_area{box-sizing:border-box;resize:vertical;border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);padding:6px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:20px}.xoziZG_area::placeholder{color:var(--dsw-alias-label-dimmed)}.xoziZG_area:focus{border-color:var(--dsw-alias-state-business-primary);outline:none}";
-const tagId = "dsh-codearts/CodeArtsPluginCard.module.css";
-if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+const css$1 = ".xoziZG_card{border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-settings-card-fill);max-width:720px}.xoziZG_header{align-items:flex-start;gap:12px;padding:14px 16px;display:flex}.xoziZG_headText{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.xoziZG_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:22px}.xoziZG_desc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:20px}.xoziZG_statusLine{color:var(--dsw-alias-label-primary);align-items:center;gap:6px;font-size:14px;font-weight:500;line-height:22px;display:inline-flex}.xoziZG_meta{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:12px;line-height:18px}.xoziZG_body{border-top:.5px solid var(--dsw-alias-border-l2);margin:0 16px;padding:4px 0 16px}.xoziZG_tabs{margin-top:12px}.xoziZG_tabPanel{padding-top:2px}.xoziZG_accountToolbar{gap:8px;margin-top:12px;display:flex}.xoziZG_accountToolbar>*{flex:1}.xoziZG_manualForm{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);margin-top:12px;padding:12px}.xoziZG_accountCard{flex-direction:column;gap:10px;margin-top:12px;display:flex}.xoziZG_accountEntry{border:.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-2)}.xoziZG_accountRow{align-items:center;gap:10px;padding:12px;display:flex}.xoziZG_claimAllRow{border-top:.5px solid var(--dsw-alias-border-l2);justify-content:flex-end;padding:10px 12px 0;display:flex}.xoziZG_avatar{background:var(--dsw-alias-bg-layer-3);width:32px;height:32px;color:var(--dsw-alias-label-primary);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:inline-flex}.xoziZG_accountInfo{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.xoziZG_accountNameRow{align-items:center;gap:6px;min-width:0;display:flex}.xoziZG_accountName{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;line-height:20px;overflow:hidden}.xoziZG_accountRowActions{flex:none;gap:6px;display:flex}.xoziZG_accountHint{color:var(--dsw-alias-label-tertiary);margin:0;padding:0 12px 12px;font-size:12px;line-height:18px}.xoziZG_creditBlock{border-top:.5px solid var(--dsw-alias-border-l2);padding:12px}.xoziZG_balanceRow{flex-wrap:wrap;align-items:baseline;gap:6px;display:flex}.xoziZG_balance{color:var(--dsw-alias-label-primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;line-height:34px}.xoziZG_balanceUnit{color:var(--dsw-alias-label-secondary);font-size:12px}.xoziZG_balanceMeta{color:var(--dsw-alias-label-tertiary);margin-left:2px;font-size:12px}.xoziZG_updated{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.xoziZG_creditRows{flex-direction:column;gap:4px;margin-top:8px;display:flex}.xoziZG_creditRow{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;line-height:18px;display:flex}.xoziZG_usageBar{background:var(--dsw-alias-border-l2);border-radius:2px;height:4px;margin-top:4px;display:block;overflow:hidden}.xoziZG_usageFill{background:var(--dsw-alias-brand-primary);border-radius:2px;height:100%;transition:width .2s;display:block}.xoziZG_expiryRow{margin-top:2px}.xoziZG_expiryLabel{color:var(--dsw-alias-state-warn-label)}.xoziZG_bar{background:var(--dsw-alias-bg-layer-3);border-radius:2px;height:4px;margin-top:6px;display:block;overflow:hidden}.xoziZG_barFill{background:var(--dsw-alias-state-warn-primary);border-radius:2px;height:100%;display:block}.xoziZG_creditLink{margin-top:8px;display:inline-block}.xoziZG_creditFooter{border-top:.5px solid var(--dsw-alias-border-l2);justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;display:flex}.xoziZG_creditHint{color:var(--dsw-alias-label-tertiary);margin:8px 0 0;font-size:12px;line-height:18px}.xoziZG_section{margin-top:16px}.xoziZG_sectionHead{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.xoziZG_sectionLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;font-weight:500}.xoziZG_count{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;flex:none;font-size:12px}.xoziZG_hint{color:var(--dsw-alias-label-secondary);margin:8px 0 0;font-size:13px;line-height:20px}.xoziZG_error{color:var(--dsw-alias-state-error-primary);margin:10px 0 0;font-size:13px;line-height:20px}.xoziZG_actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;display:flex}.xoziZG_danger{color:var(--dsw-alias-state-error-primary)}.xoziZG_link{appearance:none;color:var(--dsw-alias-brand-text);font:inherit;text-align:left;word-break:break-all;cursor:pointer;background:0 0;border:none;padding:0;font-size:12px}.xoziZG_link:hover{text-decoration:underline}.xoziZG_choices{flex-direction:column;gap:2px;margin-top:8px;display:flex}.xoziZG_choiceRow{border-radius:var(--dsw-radius-sm);align-items:center;gap:8px;margin:0 -6px;padding:5px 6px;display:flex}.xoziZG_choiceRow:hover{background:var(--dsw-alias-interactive-bg-hover)}.xoziZG_statGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 14px;display:grid}.xoziZG_statCard{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);flex-direction:column;gap:1px;padding:8px 10px;display:flex}.xoziZG_statLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.xoziZG_statValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;font-size:15px;line-height:20px}.xoziZG_statSub{color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;font-size:11px;line-height:16px}.xoziZG_modelChart{flex-direction:column;gap:2px;margin-top:8px;display:flex}.xoziZG_modelRow{font-variant-numeric:tabular-nums;border-radius:6px;grid-template-columns:minmax(0,1.2fr) minmax(48px,1fr) 56px 52px 64px;align-items:center;gap:8px;padding:4px 0;display:grid;position:relative}.xoziZG_modelRow:hover{background:var(--dsw-alias-interactive-bg-hover)}.xoziZG_usageTip{z-index:5;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-3);min-width:180px;max-width:260px;color:var(--dsw-alias-label-secondary);text-align:left;font-variant-numeric:tabular-nums;pointer-events:none;padding:8px 10px;font-size:12px;line-height:1.9;position:absolute;bottom:calc(100% + 6px);right:0;box-shadow:0 10px 28px #00000073}.xoziZG_usageTipName{max-width:240px;color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.xoziZG_usageTipSep{background:var(--dsw-alias-border-l2);height:1px;margin:4px 0}.xoziZG_usageTipRow{justify-content:space-between;gap:24px;display:flex}.xoziZG_usageTipRow span:last-child{color:var(--dsw-alias-label-primary);font-weight:600}.xoziZG_modelName{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;overflow:hidden}.xoziZG_modelTrack{background:var(--dsw-alias-border-l2);border-radius:4px;height:8px;display:block;overflow:hidden}.xoziZG_modelFill{background:var(--dsw-alias-brand-primary);border-radius:4px;height:100%;transition:width .16s;display:block}.xoziZG_modelTokens,.xoziZG_modelShare,.xoziZG_modelRequests{color:var(--dsw-alias-label-secondary);text-align:right;white-space:nowrap;font-size:11px;line-height:16px}.xoziZG_modelRequests{color:var(--dsw-alias-label-tertiary)}.xoziZG_check{flex:1;min-width:0}.xoziZG_check>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.xoziZG_manual{border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);margin-top:12px;padding:0 12px}.xoziZG_manual[open]{padding-bottom:12px}.xoziZG_manualSummary{color:var(--dsw-alias-label-secondary);cursor:pointer;align-items:center;gap:6px;padding:9px 0;font-size:13px;list-style:none;display:flex}.xoziZG_manualSummary::-webkit-details-marker{display:none}.xoziZG_field{flex-direction:column;gap:5px;margin-top:10px;display:flex}.xoziZG_fieldLabel{color:var(--dsw-alias-label-tertiary);font-size:12px}.xoziZG_area{box-sizing:border-box;resize:vertical;border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);width:100%;color:var(--dsw-alias-label-primary);padding:6px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:20px}.xoziZG_area::placeholder{color:var(--dsw-alias-label-dimmed)}.xoziZG_area:focus{border-color:var(--dsw-alias-state-business-primary);outline:none}";
+const tagId$1 = "dsh-codearts/CodeArtsPluginCard.module.css";
+if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 	const tag = document.createElement("style");
 	tag.dataset.plugin = "dsh-codearts";
-	tag.dataset.pluginCss = tagId;
-	tag.textContent = css;
+	tag.dataset.pluginCss = tagId$1;
+	tag.textContent = css$1;
 	document.head.appendChild(tag);
 }
 var CodeArtsPluginCard_module_css_default = {
-	"accountNameRow": "xoziZG_accountNameRow",
-	"balanceRow": "xoziZG_balanceRow",
-	"modelFill": "xoziZG_modelFill",
-	"danger": "xoziZG_danger",
-	"expiryRow": "xoziZG_expiryRow",
-	"accountEntry": "xoziZG_accountEntry",
-	"accountHint": "xoziZG_accountHint",
-	"manualSummary": "xoziZG_manualSummary",
-	"body": "xoziZG_body",
-	"barFill": "xoziZG_barFill",
+	"claimAllRow": "xoziZG_claimAllRow",
+	"bar": "xoziZG_bar",
 	"updated": "xoziZG_updated",
-	"error": "xoziZG_error",
-	"avatar": "xoziZG_avatar",
-	"balanceMeta": "xoziZG_balanceMeta",
-	"desc": "xoziZG_desc",
-	"name": "xoziZG_name",
-	"tabPanel": "xoziZG_tabPanel",
-	"accountInfo": "xoziZG_accountInfo",
+	"check": "xoziZG_check",
+	"expiryLabel": "xoziZG_expiryLabel",
+	"creditFooter": "xoziZG_creditFooter",
+	"accountName": "xoziZG_accountName",
+	"choices": "xoziZG_choices",
 	"card": "xoziZG_card",
-	"balanceUnit": "xoziZG_balanceUnit",
+	"tabPanel": "xoziZG_tabPanel",
 	"sectionHead": "xoziZG_sectionHead",
-	"choiceRow": "xoziZG_choiceRow",
-	"balance": "xoziZG_balance",
-	"creditLink": "xoziZG_creditLink",
-	"accountRow": "xoziZG_accountRow",
-	"usageFill": "xoziZG_usageFill",
+	"usageTipRow": "xoziZG_usageTipRow",
+	"fieldLabel": "xoziZG_fieldLabel",
+	"desc": "xoziZG_desc",
+	"usageTipName": "xoziZG_usageTipName",
+	"modelFill": "xoziZG_modelFill",
 	"modelTrack": "xoziZG_modelTrack",
-	"area": "xoziZG_area",
-	"check": "xoziZG_check",
+	"hint": "xoziZG_hint",
 	"headText": "xoziZG_headText",
-	"accountRowActions": "xoziZG_accountRowActions",
+	"creditRow": "xoziZG_creditRow",
+	"accountInfo": "xoziZG_accountInfo",
+	"modelRow": "xoziZG_modelRow",
+	"usageTipSep": "xoziZG_usageTipSep",
 	"creditHint": "xoziZG_creditHint",
-	"actions": "xoziZG_actions",
+	"modelRequests": "xoziZG_modelRequests",
+	"statGrid": "xoziZG_statGrid",
 	"accountCard": "xoziZG_accountCard",
-	"claimAllRow": "xoziZG_claimAllRow",
-	"link": "xoziZG_link",
-	"modelTokens": "xoziZG_modelTokens",
-	"sectionLabel": "xoziZG_sectionLabel",
+	"body": "xoziZG_body",
+	"name": "xoziZG_name",
+	"danger": "xoziZG_danger",
 	"usageBar": "xoziZG_usageBar",
-	"section": "xoziZG_section",
-	"modelName": "xoziZG_modelName",
-	"meta": "xoziZG_meta",
-	"bar": "xoziZG_bar",
-	"header": "xoziZG_header",
-	"fieldLabel": "xoziZG_fieldLabel",
-	"choices": "xoziZG_choices",
-	"creditBlock": "xoziZG_creditBlock",
-	"creditRow": "xoziZG_creditRow",
+	"accountRowActions": "xoziZG_accountRowActions",
+	"modelShare": "xoziZG_modelShare",
+	"sectionLabel": "xoziZG_sectionLabel",
 	"field": "xoziZG_field",
-	"hint": "xoziZG_hint",
-	"count": "xoziZG_count",
-	"accountName": "xoziZG_accountName",
-	"tabs": "xoziZG_tabs",
+	"statusLine": "xoziZG_statusLine",
+	"area": "xoziZG_area",
+	"accountEntry": "xoziZG_accountEntry",
+	"choiceRow": "xoziZG_choiceRow",
+	"accountRow": "xoziZG_accountRow",
+	"statValue": "xoziZG_statValue",
 	"manualForm": "xoziZG_manualForm",
-	"creditFooter": "xoziZG_creditFooter",
-	"modelRow": "xoziZG_modelRow",
-	"manual": "xoziZG_manual",
-	"modelChart": "xoziZG_modelChart",
-	"modelRequests": "xoziZG_modelRequests",
+	"balance": "xoziZG_balance",
+	"statLabel": "xoziZG_statLabel",
+	"error": "xoziZG_error",
+	"barFill": "xoziZG_barFill",
+	"creditLink": "xoziZG_creditLink",
+	"avatar": "xoziZG_avatar",
+	"balanceMeta": "xoziZG_balanceMeta",
+	"creditBlock": "xoziZG_creditBlock",
+	"manualSummary": "xoziZG_manualSummary",
+	"actions": "xoziZG_actions",
 	"accountToolbar": "xoziZG_accountToolbar",
-	"statusLine": "xoziZG_statusLine",
+	"balanceRow": "xoziZG_balanceRow",
+	"meta": "xoziZG_meta",
+	"expiryRow": "xoziZG_expiryRow",
+	"count": "xoziZG_count",
+	"statCard": "xoziZG_statCard",
+	"usageFill": "xoziZG_usageFill",
+	"modelTokens": "xoziZG_modelTokens",
+	"tabs": "xoziZG_tabs",
+	"link": "xoziZG_link",
 	"creditRows": "xoziZG_creditRows",
-	"expiryLabel": "xoziZG_expiryLabel",
-	"modelShare": "xoziZG_modelShare"
+	"modelChart": "xoziZG_modelChart",
+	"statSub": "xoziZG_statSub",
+	"accountNameRow": "xoziZG_accountNameRow",
+	"balanceUnit": "xoziZG_balanceUnit",
+	"manual": "xoziZG_manual",
+	"accountHint": "xoziZG_accountHint",
+	"header": "xoziZG_header",
+	"usageTip": "xoziZG_usageTip",
+	"section": "xoziZG_section",
+	"modelName": "xoziZG_modelName"
 };
 //#endregion
 //#region src/client/CodeArtsPluginCard.tsx
@@ -128,6 +176,10 @@ function formatCount(value) {
 function formatCredits(value) {
 	return Number.isFinite(value) ? new Intl.NumberFormat().format(Math.round(value)) : "0";
 }
+/** 浮层里的明细数字要精确到个位并带千分位，不用 k/M 缩写。 */
+function exactCount(value) {
+	return formatCredits(value);
+}
 /** 批量领取的 claimingId 哨兵（真实账号 id 不会等于它）。 */
 const CLAIM_ALL = "*";
 /** 一次领取操作的文案：优先用后端逐号结果，老后端只回一条时按 id 归位。 */
@@ -142,10 +194,14 @@ function claimMessagesOf(data, accountIds, t) {
 	for (const id of accountIds) out[id] = claimText(data, t);
 	return out;
 }
-/** 开关的兜底值：后端没这条路由（老版本）时按「都显示」渲染，与原有行为一致。 */
+/**
+* 开关的兜底值：后端没这条路由（老版本）时按「都显示」渲染，与原有行为一致。
+* 侧边栏那一格相反 —— 缺省关闭。
+*/
 const DOCK_DEFAULT = {
 	credits: true,
-	queue: true
+	queue: true,
+	sidebar: false
 };
 /** 一个 Tab 面板；未选中的用 hidden 留在 DOM 里，草稿和滚动位置都别丢。 */
 function TabPanel({ id, labelledBy, active, children }) {
@@ -358,12 +414,25 @@ function ManualTokenForm({ t, token, label, busy, onToken, onLabel, onSubmit })
 	});
 }
 /**
+* 缓存命中率：缓存输入 / 全部输入，钳在 0~100。
+*
+* 上游没给缓存字段、或今天压根没有输入时返回 undefined —— 统计块里显示「—」，
+* 不要把「没有数据」写成「0%」。
+*/
+function hitPercentOf(totals) {
+	const cached = totals.cachedTokens ?? 0;
+	if (cached <= 0 || totals.promptTokens <= 0) return void 0;
+	return Math.min(100, Math.round(cached / totals.promptTokens * 100));
+}
+/**
 * 横向条形列表：名称 / 条 / token / 占比 / 请求数。
 *
 * 条长按「占组内总量的比例」画（不是按最大值归一化），所以几条加起来就是全部。
 * token 全 0 的日子（只有请求数、没收到 usage 帧）退回按请求数画。
 */
 function UsageBars({ rows, t }) {
+	/** 当前悬停的那一行；卡片浮层只在它上面出现。 */
+	const [hovered, setHovered] = (0, react.useState)(null);
 	const tokenMode = rows.some((row) => row.totals.totalTokens > 0);
 	const valueOf = (row) => tokenMode ? row.totals.totalTokens : row.totals.requests;
 	const sum = rows.reduce((total, row) => total + valueOf(row), 0);
@@ -374,13 +443,18 @@ function UsageBars({ rows, t }) {
 		children: top.map((row) => {
 			const value = valueOf(row);
 			const share = sum > 0 ? value / sum * 100 : 0;
-			const detail = [t("usageRequests", { n: formatCount(row.totals.requests) }), t("usageTokens", {
-				prompt: formatTokens$1(row.totals.promptTokens),
-				completion: formatTokens$1(row.totals.completionTokens)
+			const totals = row.totals;
+			const cached = totals.cachedTokens;
+			const pct = hitPercentOf(totals);
+			const detail = [t("usageRequests", { n: formatCount(totals.requests) }), t("usageTokens", {
+				prompt: formatTokens$1(totals.promptTokens),
+				completion: formatTokens$1(totals.completionTokens)
 			})].join(" · ");
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: CodeArtsPluginCard_module_css_default.modelRow,
 				title: `${row.label} · ${detail}`,
+				onMouseEnter: () => setHovered(row.id),
+				onMouseLeave: () => setHovered((prev) => prev === row.id ? null : prev),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: CodeArtsPluginCard_module_css_default.modelName,
@@ -403,7 +477,43 @@ function UsageBars({ rows, t }) {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: CodeArtsPluginCard_module_css_default.modelRequests,
-						children: t("usageRequestCount", { n: formatCount(row.totals.requests) })
+						children: t("usageRequestCount", { n: formatCount(totals.requests) })
+					}),
+					hovered === row.id && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: CodeArtsPluginCard_module_css_default.usageTip,
+						role: "tooltip",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipName,
+								children: row.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: CodeArtsPluginCard_module_css_default.usageTipSep }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageTipInput") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: exactCount(totals.promptTokens) })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageTipOutput") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: exactCount(totals.completionTokens) })]
+							}),
+							(totals.reasoningTokens ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageTipReasoning") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: exactCount(totals.reasoningTokens ?? 0) })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageTipCached") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: cached === void 0 ? t("usageTipNoCache") : exactCount(cached) })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: CodeArtsPluginCard_module_css_default.usageTipSep }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageTipRequests") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageRequestCount", { n: formatCount(totals.requests) }) })]
+							}),
+							pct !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: CodeArtsPluginCard_module_css_default.usageTipRow,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("usageTipHit") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [pct, "%"] })]
+							})
+						]
 					})
 				]
 			}, row.id);
@@ -418,7 +528,6 @@ function UsageBars({ rows, t }) {
 * 「打断后重新提问要等」的原因。
 */
 function UsageSection({ usage, accounts, t }) {
-	const total = usage.today.requests;
 	const stateLabel = {
 		ok: t("usageStateOk"),
 		capped: t("usageStateCapped"),
@@ -436,7 +545,9 @@ function UsageSection({ usage, accounts, t }) {
 		label: entry.id.split(" · ")[0],
 		totals: entry.totals
 	}));
-	const hasUsage = usage.allTime.requests > 0 || total > 0;
+	const today = usage.today;
+	const hasUsage = usage.allTime.requests > 0 || today.requests > 0;
+	const hit = hitPercentOf(today);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: CodeArtsPluginCard_module_css_default.section,
 		children: [
@@ -447,7 +558,10 @@ function UsageSection({ usage, accounts, t }) {
 					children: t("usageTitle")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: CodeArtsPluginCard_module_css_default.count,
-					children: t("usageRequests", { n: formatCount(total) })
+					children: t("usageRange", {
+						today: formatCount(today.requests),
+						last30: formatCount(usage.last30.requests)
+					})
 				})]
 			}),
 			!hasUsage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -455,38 +569,46 @@ function UsageSection({ usage, accounts, t }) {
 				children: t("usageEmpty")
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: CodeArtsPluginCard_module_css_default.choiceRow,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: CodeArtsPluginCard_module_css_default.name,
-						children: t("usageTodayTotal")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: CodeArtsPluginCard_module_css_default.meta,
-						children: [
-							t("usageRequests", { n: formatCount(total) }),
-							" · ",
-							t("usageTokens", {
-								prompt: formatTokens$1(usage.today.promptTokens),
-								completion: formatTokens$1(usage.today.completionTokens)
-							})
-						]
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: CodeArtsPluginCard_module_css_default.choiceRow,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: CodeArtsPluginCard_module_css_default.name,
-						children: t("usageLast30")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: CodeArtsPluginCard_module_css_default.meta,
-						children: [
-							t("usageRequests", { n: formatCount(usage.last30.requests) }),
-							" · ",
-							t("usageTokens", {
-								prompt: formatTokens$1(usage.last30.promptTokens),
-								completion: formatTokens$1(usage.last30.completionTokens)
-							})
-						]
-					})]
+					className: CodeArtsPluginCard_module_css_default.statGrid,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: CodeArtsPluginCard_module_css_default.statCard,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: CodeArtsPluginCard_module_css_default.statLabel,
+									children: t("usageStatTokens")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: CodeArtsPluginCard_module_css_default.statValue,
+									children: formatTokens$1(today.totalTokens)
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: CodeArtsPluginCard_module_css_default.statSub,
+									children: [t("usageStatIn", { n: formatTokens$1(today.promptTokens) }), (today.reasoningTokens ?? 0) > 0 ? ` · ${t("usageStatThinking", { n: formatTokens$1(today.reasoningTokens ?? 0) })}` : ""]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: CodeArtsPluginCard_module_css_default.statCard,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: CodeArtsPluginCard_module_css_default.statLabel,
+								children: t("usageStatHit")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: CodeArtsPluginCard_module_css_default.statValue,
+								children: hit === void 0 ? "—" : `${hit}%`
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: CodeArtsPluginCard_module_css_default.statCard,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: CodeArtsPluginCard_module_css_default.statLabel,
+								children: t("usageStatRequests")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: CodeArtsPluginCard_module_css_default.statValue,
+								children: formatCount(today.requests)
+							})]
+						})
+					]
 				}),
 				accounts.length > 1 && accountRows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: CodeArtsPluginCard_module_css_default.hint,
@@ -571,14 +693,21 @@ function CodeArtsPluginCard({ t }) {
 			const res = await fetch("/api/codearts/dock", { headers: { Accept: "application/json" } });
 			if (!res.ok) return;
 			const data = await res.json();
-			if (data.dock !== void 0) setDock(data.dock);
+			if (data.dock !== void 0) {
+				const next = {
+					...DOCK_DEFAULT,
+					...data.dock
+				};
+				setDock(next);
+				setSidebarPanelWanted(next.sidebar);
+			}
 			setDockWritable(data.writable === true);
 		} catch {}
 	}
 	/**
 	* 改一个开关：先按新值渲染，写失败再退回去。
 	*
-	* 这里不像模型勾选那样攒草稿再点保存 —— 只有两个布尔，攒草稿反而让用户猜
+	* 这里不像模型勾选那样攒草稿再点保存 —— 只有几个布尔，攒草稿反而让用户猜
 	* 「我刚才那一下到底生效没有」。
 	*/
 	async function toggleDock(key, on) {
@@ -589,6 +718,7 @@ function CodeArtsPluginCard({ t }) {
 		});
 		setDockSaving(true);
 		setDockError(null);
+		if (key === "sidebar") setSidebarPanelWanted(on);
 		try {
 			const res = await fetch("/api/codearts/dock", {
 				method: "POST",
@@ -603,9 +733,17 @@ function CodeArtsPluginCard({ t }) {
 				throw new Error(typeof data.error === "string" ? data.error : `HTTP ${res.status}`);
 			}
 			const data = await res.json();
-			if (data.dock !== void 0) setDock(data.dock);
+			if (data.dock !== void 0) {
+				const next = {
+					...DOCK_DEFAULT,
+					...data.dock
+				};
+				setDock(next);
+				setSidebarPanelWanted(next.sidebar);
+			}
 		} catch (error) {
 			setDock(previous);
+			if (key === "sidebar") setSidebarPanelWanted(previous.sidebar);
 			setDockError(error instanceof Error ? error.message : String(error));
 		} finally {
 			setDockSaving(false);
@@ -1282,11 +1420,11 @@ function CodeArtsPluginCard({ t }) {
 							t
 						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabPanel, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabPanel, {
 						id: panelId("display"),
 						labelledBy: tabId("display"),
 						active: activeTab === "display",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: CodeArtsPluginCard_module_css_default.section,
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1331,7 +1469,35 @@ function CodeArtsPluginCard({ t }) {
 									children: t("displayFailed", { message: dockError })
 								})
 							]
-						})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: CodeArtsPluginCard_module_css_default.section,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: CodeArtsPluginCard_module_css_default.sectionHead,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: CodeArtsPluginCard_module_css_default.sectionLabel,
+										children: t("displaySidebarTitle")
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: CodeArtsPluginCard_module_css_default.hint,
+									children: t("displaySidebarHint")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: CodeArtsPluginCard_module_css_default.choices,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: CodeArtsPluginCard_module_css_default.choiceRow,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Checkbox, {
+											className: CodeArtsPluginCard_module_css_default.check,
+											checked: dock.sidebar,
+											disabled: !dockWritable || dockSaving,
+											onChange: (on) => void toggleDock("sidebar", on),
+											label: t("displaySidebarToggle")
+										})
+									})
+								})
+							]
+						})]
 					})
 				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: CodeArtsPluginCard_module_css_default.section,
@@ -1494,10 +1660,27 @@ const QUEUE_PATH = "/api/codearts/queue";
 const REFRESH_INTERVAL_MS = 6e4;
 /** 排队位置变得快：官方客户端也是 5 秒一次；这是本机路由，打不疼上游。 */
 const QUEUE_INTERVAL_MS = 5e3;
-/** 弹层宽度固定，好算它会不会顶出屏幕右边。 */
-const PANEL_WIDTH = 280;
+/**
+* 弹层宽度：只放「账号 + 积分」两列，所以按同类插件（dsh-connect-trae 的
+* `min(248px, …)`）取一档窄宽度 —— 这一层回答的是「哪个号还有多少积分」，
+* 用量数字不该把它撑成一张报表。
+*/
+const PANEL_WIDTH = 260;
 /** 弹层与那一行之间的缝隙。 */
 const PANEL_GAP = 8;
+/**
+* 弹层里每行的列模板：账号 | 积分。
+*
+* 数字列用 `auto`：它跟着最宽的那个余额自适应，面板不必为「12,600」预留固定宽度。
+* 输入 / 输出 / 缓存这些用量数字不进表格，收进整行的悬浮提示（{@link usageLine}），
+* 完整明细在设置卡片里看。
+*/
+const PANEL_ROW_COLUMNS = "minmax(0, 1fr) auto";
+/** 数字格统一右对齐 + 等宽数字，列才对得齐。 */
+const PANEL_NUM_CELL = {
+	justifySelf: "end",
+	fontVariantNumeric: "tabular-nums"
+};
 /** 那一行在输入框下方，往上开才够空间；给弹层留的最小高度，不够就翻到下面。 */
 const PANEL_MIN_ABOVE = 260;
 function readSelection(useProjection) {
@@ -1535,6 +1718,24 @@ function formatClock(ts) {
 		return "";
 	}
 }
+/**
+* 弹层里那行用量：`入 12.3k · 出 697（思 505）· 命中 94% · 37 条`。
+*
+* 刻意比设置卡片里的完整版短：面板只有 260px，把「缓存 11.5k」也列上就会折成
+* 两三行，比原来那个悬浮提示还难看。缓存值本身由命中率表达（它是输入的占比），
+* 思考 token 也不在这里——它是输出的子集，放在设置卡片的统计块里。上游不给缓存
+* 字段就不显示命中率：显示成 0% 会被当成「没命中」而不是「没数据」。
+*/
+function usageLine(usage, t) {
+	const cached = usage.cachedTokens ?? 0;
+	const parts = [t("usageCompact", {
+		prompt: formatTokens(usage.promptTokens),
+		completion: formatTokens(usage.completionTokens)
+	})];
+	if (cached > 0 && usage.promptTokens > 0) parts.push(t("usageCacheHit", { pct: Math.min(100, Math.round(cached / usage.promptTokens * 100)) }));
+	parts.push(t("usageRequestCount", { n: formatNumber(usage.requests) }));
+	return parts.join(" · ");
+}
 /** 账号名与设置卡片同一套取法：备注 > 用户名 > id。 */
 function accountName(account) {
 	return account.label?.trim() || account.userName?.trim() || account.id;
@@ -1566,21 +1767,20 @@ function rowsOf(data) {
 		};
 	});
 }
-/** 把弹层钉在按钮边上：优先往上开（那一行本来就在输入框下面），放不下就翻到下面。 */
-function anchorOf(rect) {
-	const above = rect.top > PANEL_MIN_ABOVE;
-	const width = Math.min(PANEL_WIDTH, window.innerWidth - 16);
-	return {
-		left: Math.max(8, Math.min(rect.left, window.innerWidth - width - 8)),
-		top: above ? rect.top - PANEL_GAP : rect.bottom + PANEL_GAP,
-		above
-	};
+/**
+* 弹层往上开还是往下开。
+*
+* 位置不在这里算：fixed 元素遇到带 transform / backdrop-filter 的祖先时，坐标会
+* 相对那个祖先而不是视口（工具行就长在输入框卡片里），所以真实偏移要渲染后实测
+* （见组件里的 layout effect），这里只决定朝哪边翻。
+*/
+function placeAbove(rect) {
+	return rect.top > PANEL_MIN_ABOVE;
 }
-function CodeArtsCreditDock({ useProjection, t }) {
+function CodeArtsCreditDock({ useProjection, t, zone = "dock" }) {
 	const selection = readSelection(useProjection);
 	const active = isCodeArts(selection);
 	const [remain, setRemain] = (0, react.useState)(null);
-	const [total, setTotal] = (0, react.useState)(0);
 	const [rows, setRows] = (0, react.useState)([]);
 	/**
 	* 模型 id -> 目录条目（显示名 + 已格式化的倍率）。
@@ -1591,10 +1791,20 @@ function CodeArtsCreditDock({ useProjection, t }) {
 	const [modelInfo, setModelInfo] = (0, react.useState)({});
 	const [flags, setFlags] = (0, react.useState)({
 		credits: true,
-		queue: true
+		queue: true,
+		sidebar: false
 	});
 	const [queued, setQueued] = (0, react.useState)(null);
 	const [anchor, setAnchor] = (0, react.useState)(null);
+	/**
+	* 弹层的包含块原点（视口坐标）。
+	*
+	* fixed 只有在祖先没有 transform / backdrop-filter 时才是视口坐标；工具行长在输入框
+	* 卡片里，一旦撞上这类祖先，left/top 就会相对那个祖先算，弹层会飞到窗口外。做法是
+	* 先按 0,0 渲染但不可见，量出面板实际落在哪（就是包含块原点），再把目标坐标减掉它；
+	* 视口情形下量到 (0,0)，等于没动。
+	*/
+	const [origin, setOrigin] = (0, react.useState)(null);
 	const [refreshing, setRefreshing] = (0, react.useState)(false);
 	const mounted = (0, react.useRef)(true);
 	const triggerRef = (0, react.useRef)(null);
@@ -1618,7 +1828,8 @@ function CodeArtsCreditDock({ useProjection, t }) {
 			if (data === void 0 || !mounted.current) return;
 			setFlags(data.dock ?? {
 				credits: true,
-				queue: true
+				queue: true,
+				sidebar: false
 			});
 			setRows(rowsOf(data));
 			setModelInfo(Object.fromEntries((data.models ?? []).map((model) => [model.id, {
@@ -1632,7 +1843,6 @@ function CodeArtsCreditDock({ useProjection, t }) {
 				return;
 			}
 			setRemain(Math.round(pool.reduce((sum, item) => sum + item.credits.total.remain, 0)));
-			setTotal(Math.round(pool.reduce((sum, item) => sum + item.credits.total.total, 0)));
 		} catch {}
 	}, []);
 	(0, react.useEffect)(() => {
@@ -1695,6 +1905,19 @@ function CodeArtsCreditDock({ useProjection, t }) {
 			window.removeEventListener("scroll", close, true);
 		};
 	}, [anchor, close]);
+	(0, react.useLayoutEffect)(() => {
+		if (anchor === null) {
+			setOrigin(null);
+			return;
+		}
+		const el = panelRef.current;
+		if (el === null) return;
+		const rect = el.getBoundingClientRect();
+		setOrigin((prev) => prev !== null && Math.abs(prev.x - rect.left) < .5 && Math.abs(prev.y - rect.top) < .5 ? prev : {
+			x: rect.left,
+			y: rect.top
+		});
+	}, [anchor]);
 	(0, react.useEffect)(() => {
 		if (!active) return;
 		const self = rootRef.current;
@@ -1719,26 +1942,18 @@ function CodeArtsCreditDock({ useProjection, t }) {
 	if (!active) return null;
 	const showCredits = flags.credits && remain !== null;
 	const showQueue = flags.queue && queued !== null;
+	if (zone === "bar" && !showCredits) return null;
 	const modelId = currentOf(selection)?.model;
 	const entry = modelId === void 0 ? void 0 : modelInfo[modelId];
 	const modelLabel = entry === void 0 ? modelId ?? "" : stripModelSuffixes(entry.name);
 	const ratio = entry?.ratio;
 	const line = buildDockLine({
-		...showCredits ? { credits: t("creditsDock", { remain: formatNumber(remain ?? 0) }) } : {},
+		...zone === "bar" && showCredits ? { credits: t("creditsDock", { remain: formatNumber(remain ?? 0) }) } : {},
 		provider: "CodeArts",
 		...modelLabel === "" ? {} : { model: modelLabel },
 		...ratio === void 0 ? {} : { ratio },
-		...showQueue && queued !== null ? { queue: t("queueDock", { position: queued.position }) } : {}
+		...zone === "dock" && showQueue && queued !== null ? { queue: t("queueDock", { position: queued.position }) } : {}
 	}, t);
-	const queueTitle = queued === null ? void 0 : t("queueDockTitle", {
-		model: queued.model,
-		position: queued.position,
-		length: queued.length
-	});
-	const creditsTitle = showCredits ? t("creditsDockTitle", {
-		remain: remain ?? 0,
-		total
-	}) : void 0;
 	const fetchedAt = rows.reduce((latest, row) => Math.max(latest, row.fetchedAt ?? 0), 0);
 	const lastUpdated = fetchedAt > 0 ? formatClock(fetchedAt) : "";
 	const toggle = (event) => {
@@ -1746,7 +1961,13 @@ function CodeArtsCreditDock({ useProjection, t }) {
 			close();
 			return;
 		}
-		setAnchor(anchorOf(event.currentTarget.getBoundingClientRect()));
+		const rect = event.currentTarget.getBoundingClientRect();
+		const above = placeAbove(rect);
+		setAnchor({
+			left: rect.left,
+			top: above ? rect.top - PANEL_GAP : rect.bottom + PANEL_GAP,
+			above
+		});
 	};
 	const forceRefresh = async () => {
 		setRefreshing(true);
@@ -1770,7 +1991,6 @@ function CodeArtsCreditDock({ useProjection, t }) {
 			flex: "0 0 auto",
 			minWidth: "max-content"
 		},
-		title: queueTitle ?? creditsTitle,
 		children: [
 			line.credits !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				ref: triggerRef,
@@ -1778,7 +1998,6 @@ function CodeArtsCreditDock({ useProjection, t }) {
 				"aria-haspopup": "dialog",
 				"aria-expanded": anchor !== null,
 				"aria-label": t("creditsDockPanelTitle"),
-				title: creditsTitle,
 				onClick: toggle,
 				style: {
 					all: "unset",
@@ -1790,20 +2009,21 @@ function CodeArtsCreditDock({ useProjection, t }) {
 					whiteSpace: "inherit"
 				},
 				children: line.credits
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			}), zone === "dock" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"aria-hidden": "true",
 				children: " · "
 			})] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: line.rest }),
+			zone === "dock" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: line.rest }),
 			anchor !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: panelRef,
 				role: "dialog",
 				"aria-label": t("creditsDockPanelTitle"),
 				style: {
 					position: "fixed",
-					left: anchor.left,
-					top: anchor.top,
-					transform: anchor.above ? "translateY(-100%)" : void 0,
+					left: origin === null ? 0 : anchor.left - origin.x,
+					top: origin === null ? 0 : anchor.top - origin.y,
+					transform: anchor.above && origin !== null ? "translateY(-100%)" : void 0,
+					visibility: origin === null ? "hidden" : "visible",
 					width: PANEL_WIDTH,
 					maxWidth: "calc(100vw - 16px)",
 					zIndex: 1e3,
@@ -1842,73 +2062,60 @@ function CodeArtsCreditDock({ useProjection, t }) {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: {
-							display: "grid",
-							gridTemplateColumns: "minmax(0, 1fr) auto auto",
-							gap: "4px 12px",
-							alignItems: "center",
+							display: "flex",
+							flexDirection: "column",
+							gap: 10,
 							borderTop: "0.5px solid var(--dsw-alias-border-l2, rgba(127, 127, 127, 0.22))",
 							paddingTop: 8,
+							fontSize: 12,
 							color: "var(--dsw-alias-label-tertiary)"
 						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("creditsDockColAccount") }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: { justifySelf: "end" },
-								children: t("creditsDockColTokens")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: { justifySelf: "end" },
-								children: t("creditsDockColBalance")
-							}),
-							rows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: { gridColumn: "1 / -1" },
-								children: t("creditsDockEmpty")
-							}),
-							rows.map((row) => {
-								const detail = row.usage === void 0 ? "" : [t("usageTokens", {
-									prompt: formatTokens(row.usage.promptTokens),
-									completion: formatTokens(row.usage.completionTokens)
-								}), t("usageRequestCount", { n: formatNumber(row.usage.requests) })].join(" · ");
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: { display: "contents" },
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 6,
-												minWidth: 0
-											},
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: row.remain === null ? "warning" : "done" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												style: {
-													overflow: "hidden",
-													textOverflow: "ellipsis",
-													whiteSpace: "nowrap",
-													color: "var(--dsw-alias-label-primary)"
-												},
-												title: row.error === void 0 ? row.name : row.error,
-												children: row.name
-											})]
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											style: {
-												justifySelf: "end",
-												fontVariantNumeric: "tabular-nums"
-											},
-											title: row.usage === void 0 ? t("creditsDockNoTokens") : detail,
-											children: row.usage === void 0 ? "—" : formatTokens(row.usage.totalTokens)
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											style: {
-												justifySelf: "end",
-												fontVariantNumeric: "tabular-nums"
-											},
-											children: row.remain === null ? "—" : formatNumber(row.remain)
-										})
-									]
-								}, row.id);
-							})
-						]
+						children: [rows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("creditsDockEmpty") }), rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 2,
+								minWidth: 0
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: PANEL_ROW_COLUMNS,
+									gap: "0 8px",
+									alignItems: "center",
+									minWidth: 0
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: 5,
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: row.remain === null ? "warning" : "done" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: {
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+											color: "var(--dsw-alias-label-primary)"
+										},
+										title: row.error === void 0 ? row.name : row.error,
+										children: row.name
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: PANEL_NUM_CELL,
+									children: row.remain === null ? "—" : formatNumber(row.remain)
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: {
+									paddingLeft: 11,
+									fontSize: 11,
+									lineHeight: "15px",
+									color: "var(--dsw-alias-label-tertiary)"
+								},
+								children: row.usage === void 0 ? t("creditsDockNoTokens") : `${t("usageToday")} ${usageLine(row.usage, t)}`
+							})]
+						}, row.id))]
 					}),
 					rows.filter((row) => row.expiring > 0).map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						style: {
@@ -1930,6 +2137,84 @@ function CodeArtsCreditDock({ useProjection, t }) {
 	});
 }
 //#endregion
+//#region \0dsh-css:/home/runner/work/dsh-codearts/dsh-codearts/src/client/CodeArtsPanel.module.css.mjs
+const css = ".Z66cgG_page{box-sizing:border-box;height:100%;min-height:0;padding:calc(28px + var(--dsh-frame-top-clearance,0px)) clamp(24px, 4vw, 48px) 48px;color:var(--dsw-alias-label-primary);flex-direction:column;display:flex;overflow:auto}.Z66cgG_head{flex-direction:column;gap:6px;width:100%;max-width:860px;margin:0 auto;display:flex}.Z66cgG_back{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);align-self:flex-start;align-items:center;gap:6px;margin-bottom:10px;padding:5px 12px;font-size:13px;line-height:20px;display:inline-flex}.Z66cgG_back:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.Z66cgG_backCaret{border-bottom:1.6px solid;border-left:1.6px solid;width:7px;height:7px;display:inline-block;transform:rotate(45deg)}.Z66cgG_title{margin:0;font-size:20px;font-weight:600;line-height:1.4}.Z66cgG_desc{color:var(--dsw-alias-label-tertiary);margin:0;font-size:13px;line-height:1.5}.Z66cgG_body{width:100%;max-width:860px;margin:20px auto 0}.Z66cgG_icon{flex:none;display:block}";
+const tagId = "dsh-codearts/CodeArtsPanel.module.css";
+if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+	const tag = document.createElement("style");
+	tag.dataset.plugin = "dsh-codearts";
+	tag.dataset.pluginCss = tagId;
+	tag.textContent = css;
+	document.head.appendChild(tag);
+}
+var CodeArtsPanel_module_css_default = {
+	"icon": "Z66cgG_icon",
+	"backCaret": "Z66cgG_backCaret",
+	"title": "Z66cgG_title",
+	"head": "Z66cgG_head",
+	"desc": "Z66cgG_desc",
+	"back": "Z66cgG_back",
+	"page": "Z66cgG_page",
+	"body": "Z66cgG_body"
+};
+//#endregion
+//#region src/client/CodeArtsPanel.tsx
+/** 侧边栏按钮里的图标。宿主按 { size, active } 渲染，我们用 currentColor 跟随主题。 */
+function CodeArtsPanelIcon({ size }) {
+	const px = typeof size === "number" && size > 0 ? size : 16;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		className: CodeArtsPanel_module_css_default.icon,
+		width: px,
+		height: px,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M9.9 2.6a1.4 1.4 0 0 1 2 0l1.5 1.5a1.4 1.4 0 0 1 0 2l-6.4 6.4-3.6.9a.6.6 0 0 1-.7-.7l.9-3.6 6.3-6.5Z",
+			stroke: "currentColor",
+			strokeWidth: "1.2",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M8.9 3.6 12.4 7.1",
+			stroke: "currentColor",
+			strokeWidth: "1.2",
+			strokeLinecap: "round"
+		})]
+	});
+}
+/** 侧边栏入口页：一个返回按钮 + 标题，正文直接复用设置里那张卡片。 */
+function CodeArtsPanelPage({ t, backToConversation }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: CodeArtsPanel_module_css_default.page,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: CodeArtsPanel_module_css_default.head,
+			children: [
+				backToConversation !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: CodeArtsPanel_module_css_default.back,
+					onClick: backToConversation,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: CodeArtsPanel_module_css_default.backCaret,
+						"aria-hidden": "true"
+					}), t("panelBack")]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+					className: CodeArtsPanel_module_css_default.title,
+					children: t("cardTitle")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: CodeArtsPanel_module_css_default.desc,
+					children: t("panelDesc")
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: CodeArtsPanel_module_css_default.body,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeArtsPluginCard, { t })
+		})]
+	});
+}
+//#endregion
 //#region src/client/locales.ts
 const zh = {
 	tabLabel: "CodeArts",
@@ -1993,12 +2278,25 @@ const zh = {
 	modelsLoading: "模型勾选区加载中…（若长期不出现，请确认已登录且 DSH 已完全重启）",
 	usageTitle: "本机用量",
 	usageToday: "今日",
-	usageTodayTotal: "今日合计",
-	usageLast30: "近 30 天",
-	usageByAccount: "今日按账号",
+	usageRange: "今日 {today} 条 · 近 30 天 {last30} 条",
+	usageStatTokens: "今日 token",
+	usageStatIn: "输入 {n}",
+	usageStatThinking: "思考 {n}",
+	usageTipInput: "输入",
+	usageTipOutput: "输出",
+	usageTipReasoning: "思考",
+	usageTipCached: "缓存命中",
+	usageTipNoCache: "上游未下发",
+	usageTipRequests: "请求",
+	usageTipHit: "命中率",
+	usageStatHit: "缓存命中",
+	usageStatRequests: "今日请求",
 	usageRequests: "{n} 次请求",
+	usageByAccount: "今日按账号",
 	usageRequestCount: "{n} 条",
 	usageTokens: "输入 {prompt} · 输出 {completion}",
+	usageCompact: "入 {prompt} · 出 {completion}",
+	usageCacheHit: "命中 {pct}%",
 	usageAllTime: "累计（{days} 天）",
 	usageByModel: "今日按模型",
 	usageSlots: "会话槽位",
@@ -2025,9 +2323,6 @@ const zh = {
 	creditsDockPanelTitle: "CodeArts 积分",
 	creditsDockRefresh: "刷新积分",
 	creditsDockRefreshing: "刷新中…",
-	creditsDockColAccount: "账号",
-	creditsDockColBalance: "剩余积分",
-	creditsDockColTokens: "今日 Token",
 	creditsDockNoTokens: "今天还没有经插件发出的请求",
 	creditsDockEmpty: "暂时没有积分数据",
 	creditsDockExpiring: "{account}：{expiring} 积分将在本周期结束时作废",
@@ -2036,12 +2331,15 @@ const zh = {
 	dockModel: "Model {model}",
 	dockNoModel: "未选择模型",
 	tabDisplay: "显示",
-	displayTitle: "对话底部显示",
+	displayTitle: "输入框两侧显示",
 	displayHint: "这两项只管输入框下方那一行的积分与排队两段；中间那段「Provider CodeArts · Model 模型 · 倍率」一直显示，不受开关影响。底部那条每 60 秒读一次设置，所以关掉最多要等一分钟才见效。",
-	displayCreditsToggle: "显示剩余积分（点开可看各账号明细）",
+	displayCreditsToggle: "在输入框工具行显示剩余积分（点开可看各账号明细）",
 	displayQueueToggle: "显示上游排队位置",
 	displayNotWritable: "这个宿主没给插件开配置存储，开关只能看不能改。",
 	displayFailed: "保存失败：{message}",
+	displaySidebarTitle: "侧边栏图标",
+	displaySidebarHint: "勾上以后，DSH 左侧那一列图标里会多一个 CodeArts，点它直接在中间列打开当前这一页，不必每次都绕进设置。默认不勾：这列图标是全宿主共用的，每个插件都来占一格很快就挤满了。改完立刻生效，没有保存步骤。",
+	displaySidebarToggle: "在侧边栏图标列显示 CodeArts",
 	queueDock: "排队第 {position} 位",
 	queueDockTitle: "上游排队：{model} · 第 {position} 位 / 共 {length} 条",
 	claimButton: "签到领积分",
@@ -2052,7 +2350,9 @@ const zh = {
 	claimDone: "已领取 {amount} 积分",
 	claimAlready: "今日已领，明天再来",
 	claimUnavailable: "这个账号当前没有可领的签到活动",
-	claimFailed: "领取失败：{message}"
+	claimFailed: "领取失败：{message}",
+	panelBack: "返回对话",
+	panelDesc: "账号、模型开关与用量都在这一页里管，和设置 → 插件里那张卡片是同一份状态。"
 };
 const en = {
 	tabLabel: "CodeArts",
@@ -2116,12 +2416,25 @@ const en = {
 	modelsLoading: "Loading model selection… (if it never appears, make sure you are signed in and DSH was fully restarted)",
 	usageTitle: "Local usage",
 	usageToday: "Today",
-	usageTodayTotal: "Today",
-	usageLast30: "Last 30 days",
-	usageByAccount: "Today by account",
+	usageRange: "Today {today} · last 30 days {last30}",
+	usageStatTokens: "Today tokens",
+	usageStatIn: "in {n}",
+	usageStatThinking: "thinking {n}",
+	usageTipInput: "Input",
+	usageTipOutput: "Output",
+	usageTipReasoning: "Reasoning",
+	usageTipCached: "Cached",
+	usageTipNoCache: "not reported",
+	usageTipRequests: "Requests",
+	usageTipHit: "Hit rate",
+	usageStatHit: "Cache hit",
+	usageStatRequests: "Today requests",
 	usageRequests: "{n} request(s)",
+	usageByAccount: "Today by account",
 	usageRequestCount: "{n} reqs",
 	usageTokens: "in {prompt} · out {completion}",
+	usageCompact: "in {prompt} · out {completion}",
+	usageCacheHit: "{pct}% cached",
 	usageAllTime: "All time ({days} days)",
 	usageByModel: "Today by model",
 	usageSlots: "Session slots",
@@ -2148,9 +2461,6 @@ const en = {
 	creditsDockPanelTitle: "CodeArts credits",
 	creditsDockRefresh: "Refresh credits",
 	creditsDockRefreshing: "Refreshing…",
-	creditsDockColAccount: "Account",
-	creditsDockColBalance: "Credits left",
-	creditsDockColTokens: "Tokens today",
 	creditsDockNoTokens: "No requests through the plugin today yet",
 	creditsDockEmpty: "No credit data yet",
 	creditsDockExpiring: "{account}: {expiring} credits expire when this cycle ends",
@@ -2159,12 +2469,15 @@ const en = {
 	dockModel: "Model {model}",
 	dockNoModel: "No model selected",
 	tabDisplay: "Display",
-	displayTitle: "Under the chat input box",
+	displayTitle: "Around the chat input box",
 	displayHint: "These two only control the credits and queue segments of that line under the input box; the middle “Provider CodeArts · Model … · rate” segments always show. The bar re-reads settings every 60 seconds, so hiding the rest can take up to a minute.",
-	displayCreditsToggle: "Show remaining credits (click it for per-account details)",
+	displayCreditsToggle: "Show remaining credits in the composer tool row (click for per-account details)",
 	displayQueueToggle: "Show the upstream queue position",
 	displayNotWritable: "This host gives the plugin nowhere to persist settings, so the switches are read-only.",
 	displayFailed: "Failed to save: {message}",
+	displaySidebarTitle: "Sidebar icon",
+	displaySidebarHint: "Once checked, a CodeArts icon joins the icon column on the left of DSH and opens this very page in the middle column, so you do not have to go through Settings each time. Off by default: that column is shared by the whole host, and it fills up quickly if every plugin claims a slot. Takes effect immediately — there is nothing to save.",
+	displaySidebarToggle: "Show CodeArts in the sidebar icon column",
 	queueDock: "Queued #{position}",
 	queueDockTitle: "Upstream queue: {model} · position {position} of {length}",
 	claimButton: "Claim daily credits",
@@ -2175,13 +2488,32 @@ const en = {
 	claimDone: "Claimed {amount} credits",
 	claimAlready: "Already claimed today — come back tomorrow",
 	claimUnavailable: "No check-in campaign available for this account",
-	claimFailed: "Claim failed: {message}"
+	claimFailed: "Claim failed: {message}",
+	panelBack: "Back to chat",
+	panelDesc: "Manage accounts, model switches and usage here — same state as the card under Settings → Plugins."
 };
 //#endregion
 //#region src/client/index.tsx
 const name = "dsh-codearts-client";
 const inject = ["slots", "locale"];
+/**
+* 侧边栏按钮的 id，同时也是中间列面板的 key —— 宿主靠这两个同名值把
+* 「点了哪一行」和「中间列画哪一页」配对。
+*/
+const PANEL_ID = "dsh-codearts";
 function apply(ctx) {
+	/**
+	* 回对话页。软取 layout 服务：`ctx.get` 在服务没提供时返回 undefined 而不会抛，
+	* 所以老宿主/非桌面端只是没有返回按钮，不影响整块 client 加载。
+	* 故意不写进 `inject` —— 依赖缺失会让 apply 整个不跑。
+	*/
+	const backToConversation = () => {
+		try {
+			ctx.get("layout")?.selectPanel?.(null);
+		} catch (error) {
+			console.error("[dsh-codearts] failed to switch back to conversation:", error);
+		}
+	};
 	try {
 		const namespace = "settings.codearts";
 		ctx.effect(() => ctx.locale.register(namespace, {
@@ -2194,13 +2526,105 @@ function apply(ctx) {
 			key: "dsh-codearts",
 			locale: namespace
 		}, () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeArtsPluginCard, { t })));
+		ctx.slots.inject("conversation.input.left", () => ctx.slots.register({
+			name: "conversation.input.left",
+			id: "codearts-credits-bar",
+			order: 20,
+			locale: namespace,
+			inject: () => ({
+				t,
+				zone: "bar"
+			})
+		}, CodeArtsCreditDock));
 		ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register({
 			name: "conversation.composer.dock",
 			id: "codearts-credits",
 			order: 20,
 			locale: namespace,
-			inject: () => ({ t })
+			inject: () => ({
+				t,
+				zone: "dock"
+			})
 		}, CodeArtsCreditDock));
+		/** 每次 claim 拿到的 inject disposer；拆的时候逐个调用（连带注销里面的注册）。 */
+		const panelClaims = [];
+		const dropPanelSlots = () => {
+			for (const dispose of panelClaims.splice(0)) try {
+				dispose();
+			} catch (error) {
+				console.error("[dsh-codearts] failed to release sidebar panel:", error);
+			}
+		};
+		const syncPanelRegistration = () => {
+			dropPanelSlots();
+			if (!sidebarPanelWanted()) return;
+			try {
+				panelClaims.push(ctx.slots.inject("sidebar.panellist", () => {
+					try {
+						return ctx.slots.register({
+							name: "sidebar.panellist",
+							id: PANEL_ID,
+							order: 50,
+							label: () => t("tabLabel"),
+							locale: namespace
+						}, CodeArtsPanelIcon);
+					} catch (error) {
+						console.error("[dsh-codearts] sidebar panel entry unavailable:", error);
+						return () => {};
+					}
+				}));
+			} catch (error) {
+				console.error("[dsh-codearts] sidebar panel slot unavailable:", error);
+			}
+			try {
+				panelClaims.push(ctx.slots.inject("main", () => {
+					try {
+						return ctx.slots.register({
+							name: "main",
+							key: PANEL_ID,
+							locale: namespace,
+							inject: () => ({
+								t,
+								backToConversation
+							})
+						}, CodeArtsPanelPage);
+					} catch (error) {
+						console.error("[dsh-codearts] main panel page unavailable:", error);
+						return () => {};
+					}
+				}));
+			} catch (error) {
+				console.error("[dsh-codearts] main panel slot unavailable:", error);
+			}
+		};
+		/**
+		* 开关关掉时如果用户正站在那一页上，先回对话 —— 否则中间列会留在
+		* 一个已经没了的 key 上。软取 layout：没有这个服务就跳过。
+		*/
+		const leavePanelIfActive = () => {
+			try {
+				const layout = ctx.get("layout");
+				if (layout?.panelInfo?.getSnapshot?.()?.activePanelId === PANEL_ID) layout.selectPanel?.(null);
+			} catch {}
+		};
+		ctx.effect(() => {
+			const off = subscribeSidebarPanelWanted(() => {
+				if (!sidebarPanelWanted()) leavePanelIfActive();
+				syncPanelRegistration();
+			});
+			syncPanelRegistration();
+			return () => {
+				off();
+				dropPanelSlots();
+			};
+		}, "dsh-codearts: sidebar panel opt-in");
+		(async () => {
+			try {
+				const res = await fetch("/api/codearts/dock", { headers: { Accept: "application/json" } });
+				if (!res.ok) return;
+				setSidebarPanelWanted((await res.json()).dock?.sidebar === true);
+			} catch {}
+		})();
 	} catch (error) {
 		console.error("[dsh-codearts] client card failed to load (host provider unaffected):", error);
 	}