dsh-codex-subscription 2.4.2 → 2.5.1

package/README.en.md

@@ -105,7 +105,7 @@ This plugin supports the latest DeepSeek Harness release recorded in its package
 2. Paste this package name, with its version, into the **Package name or address** field:
 
    ```text
-   dsh-codex-subscription@2.4.2
+   dsh-codex-subscription@2.5.1
    ```
 
 3. Click **Install** and wait for completion. Follow the page instructions; save your work before restarting if requested.
@@ -220,11 +220,15 @@ Here the reference image is attached to the message and the model copies it on t
 
 The SVG runs have finer hair highlights, lace trim and lettering, and Sol was almost 9 minutes faster with SVG than stroke by stroke; Astra spent about 3 extra minutes on SVG for clearly richer detail. Neither model got the face shape right (too long and flat) or the small whale motif on the apron, though Sol's whale looks more like a whale.
 
-The full Chinese prompts for all three subjects are in the [Chinese README](README.md#从草图到作品).
+**The same challenge again, with the model checking itself against the reference**
 
-Each example is a single run, not a measure of consistent quality. Sol Xhigh is much slower; Astra or a lower reasoning level is enough for everyday sketches.
+Same prompt and the same way of attaching the image as above; the plugin just gives the model two more things. It can use `reference` to put the image attached in the chat onto the board as a hidden picture layer, and while previewing it can turn on `compare` (the drawing and the reference blended 50/50, so position errors show up as ghosting) and `grid` (a labelled line every 100 pixels). Same Astra Medium on the official desktop app, one run, no image generation: 20 min 57 s, 7 drawing layers and 686 native strokes. The model also generated hair strands and lace with scripts, and checked against the overlay several times while drawing, fixing lettering and lace overlaps.
 
-</details>
+<table>
+<tr><td><img src="docs/assets/sketch-niang-astra-compare.webp" alt="Astra Medium with overlay checks" width="380"><br><sub><b>Astra Medium</b> · 20 min 57 s · 686 strokes</sub></td><td><img src="docs/assets/sketch-niang-astra-overlay.webp" alt="The overlay preview the model saw" width="260"><br><sub>The overlay the model saw: ghosting on the lettering and hair edges is the error</sub></td></tr>
+</table>
+
+The face shape, hair flow, lace, hand and speech-bubble lettering are all closer to the reference than the two Astra runs above, at about twice the time of the SVG run. This is a single run; other prompts and references may behave differently.
 
 <details>
 <summary>View Images & sketch settings</summary>

package/README.md

@@ -105,7 +105,7 @@
 2. 在 **包名或地址** 输入框中粘贴下面的包名（已带版本号）：
 
    ```text
-   dsh-codex-subscription@2.4.2
+   dsh-codex-subscription@2.5.1
    ```
 
 3. 点击 **安装**，等待安装完成；按页面提示操作，需要重启时先保存工作。
@@ -222,6 +222,16 @@ Sol Xhigh 约 28 分钟，Astra Low 约 5 分钟。两者都保留了主峰、
 
 SVG 版的发丝高光、蕾丝褶边和手写字更精细，Sol 用 SVG 还比逐笔绘制快了近 9 分钟；Astra 用 SVG 多花约 3 分钟，换来明显更丰富的细节。两个模型都没能画准脸型（偏长偏平）和围裙上的小鲸鱼图案，Sol 的鲸鱼更像鲸。
 
+**同一题再跑一次：让模型自己叠图对照**
+
+这一次提示词和附件方式都和上面一样，只是插件多了两样东西：模型可以用 `reference` 把聊天里附的参考图放进画板（作为隐藏的图片图层），并且在预览时打开 `compare`（把画作和参考图各占 50% 叠在一起，位置偏差会显示成重影）和 `grid`（每 100 像素一条带数字的网格）。同一题、同一个 Astra Medium，在官方桌面版上跑了一次，没有调用生图，共 20 分 57 秒、7 个绘画图层、686 条原生笔画；模型还用脚本批量生成了发丝和花边，并在画的过程中多次叠图检查、修正文字和蕾丝遮挡。
+
+<table>
+<tr><td><img src="docs/assets/sketch-niang-astra-compare.webp" alt="Astra Medium 叠图对照版" width="380"><br><sub><b>Astra Medium</b> · 20 分 57 秒 · 686 笔</sub></td><td><img src="docs/assets/sketch-niang-astra-overlay.webp" alt="模型看到的叠图对照预览" width="260"><br><sub>模型看到的叠图预览：文字和发丝边缘的重影就是偏差</sub></td></tr>
+</table>
+
+脸型、长发走向、蕾丝、手和气泡字都比上面的两个 Astra 版更接近参考图，耗时约是 SVG 版的两倍。这是单次运行，不同提示词和参考图的效果可能不同。
+
 <details>
 <summary>展开三道题的完整提示词</summary>
 

package/lib/client.js

@@ -3327,11 +3327,22 @@ window.__ModuleLoader__.load({
 				}
 				if (request.documentId !== current.documentId) throw Error("Document changed; inspect again");
 				if (pending || adapter.busy()) throw Error("Sketch is being edited; retry after it settles");
-				if (request.action === "preview") return {
-					...current,
-					png: await adapter.preview()
-				};
-				if (!["apply", "save"].includes(request.action)) throw Error("Unknown sketch action");
+				if (request.action === "preview") {
+					for (const key of ["compare", "grid"]) if (request[key] !== void 0 && typeof request[key] !== "boolean") throw Error(`${key} must be true or false`);
+					return {
+						...current,
+						png: await adapter.preview({
+							compare: request.compare === true,
+							grid: request.grid === true
+						}),
+						...request.grid ? { gridStep: 100 } : {}
+					};
+				}
+				if (![
+					"apply",
+					"save",
+					"reference"
+				].includes(request.action)) throw Error("Unknown sketch action");
 				if (typeof request.requestId !== "string" || !request.requestId.length || request.requestId.length > 100) throw Error("A unique requestId is required");
 				const key = `${current.documentId}:${request.requestId}`, fingerprint = JSON.stringify({
 					...request,
@@ -3361,6 +3372,14 @@ window.__ModuleLoader__.load({
 						layer: l.id,
 						id: s.id
 					})));
+				} else if (request.action === "reference") {
+					if (typeof request.image !== "string" || !/^data:image\/(png|jpeg|webp);base64,/.test(request.image) || request.image.length > 19e5) throw Error("A PNG, JPEG or WebP reference image is required");
+					pending = true;
+					try {
+						await adapter.addReference(request.image, typeof request.name === "string" ? request.name.slice(0, 40) : "reference");
+					} finally {
+						pending = false;
+					}
 				} else {
 					if (request.name !== void 0 && (typeof request.name !== "string" || request.name.length > 60)) throw Error("Invalid draft name");
 					pending = true;
@@ -3645,7 +3664,7 @@ window.__ModuleLoader__.load({
 					name: row.name
 				});
 			};
-			const importImage = async (file) => {
+			const importImage = async (file, { visible = true } = {}) => {
 				if (file.name?.toLowerCase().endsWith(".psd") || file.name?.toLowerCase().endsWith(".dsh-sketch.json")) {
 					if (file.size > 32 * 1024 * 1024) throw Error("File exceeds 32 MB");
 					if (file.name.toLowerCase().endsWith(".psd") && !await confirmPsd()) return;
@@ -3663,7 +3682,7 @@ window.__ModuleLoader__.load({
 				const layer = {
 					id: doc.current.nextId,
 					name: file.name?.slice(0, 40) || t("sketchImport"),
-					visible: true,
+					visible,
 					strokes: [],
 					image: {
 						src: image.src,
@@ -3678,7 +3697,7 @@ window.__ModuleLoader__.load({
 				doc.current = {
 					...doc.current,
 					nextId: layer.id + 1,
-					active: layer.id,
+					active: visible ? layer.id : doc.current.active,
 					layers: [...doc.current.layers, layer]
 				};
 				schedule();
@@ -3882,6 +3901,60 @@ window.__ModuleLoader__.load({
 			}
 		}
 		//#endregion
+		//#region src/sketch-preview.js
+		const GRID_STEP = 100;
+		function composeSketchPreview({ doc, images, width, height, options = {}, makeSurface, paintLayers }) {
+			const surface = makeSurface(width, height), context = surface.getContext("2d");
+			if (options.compare) {
+				if (!doc.layers.some((layer) => layer.image)) throw Error("compare needs a reference picture layer on the board; ask the user to add the reference with the pictures button");
+				const reference = makeSurface(width, height), drawing = makeSurface(width, height);
+				paintLayers(reference.getContext("2d"), {
+					...doc,
+					layers: doc.layers.map((layer) => ({
+						...layer,
+						strokes: [],
+						visible: Boolean(layer.image)
+					}))
+				}, /* @__PURE__ */ new Map(), width, height, void 0, images);
+				paintLayers(drawing.getContext("2d"), {
+					...doc,
+					layers: doc.layers.map((layer) => ({
+						...layer,
+						image: void 0
+					}))
+				}, /* @__PURE__ */ new Map(), width, height, void 0, images);
+				context.drawImage(reference, 0, 0);
+				context.globalAlpha = .5;
+				context.drawImage(drawing, 0, 0);
+				context.globalAlpha = 1;
+			} else paintLayers(context, doc, /* @__PURE__ */ new Map(), width, height, void 0, images);
+			if (options.grid) paintGrid(context, width, height);
+			return surface.toDataURL("image/png");
+		}
+		function paintGrid(context, width, height) {
+			context.save();
+			context.lineWidth = 1;
+			context.strokeStyle = "rgba(214,0,120,0.45)";
+			context.fillStyle = "rgba(214,0,120,0.9)";
+			context.font = "12px sans-serif";
+			context.textBaseline = "top";
+			for (let x = GRID_STEP; x < width; x += GRID_STEP) {
+				context.beginPath();
+				context.moveTo(x + .5, 0);
+				context.lineTo(x + .5, height);
+				context.stroke();
+				context.fillText(String(x), x + 3, 2);
+			}
+			for (let y = GRID_STEP; y < height; y += GRID_STEP) {
+				context.beginPath();
+				context.moveTo(0, y + .5);
+				context.lineTo(width, y + .5);
+				context.stroke();
+				context.fillText(String(y), 3, y + 2);
+			}
+			context.restore();
+		}
+		//#endregion
 		//#region src/sketch-files.jsx
 		function SketchFiles({ save, load, fresh, importImage, download, hasContent, disabled, t, runOperation }) {
 			const [open, setOpen] = (0, react.useState)(false), [rows, setRows] = (0, react.useState)([]), [name, setName] = (0, react.useState)(""), [remove, setRemove] = (0, react.useState)(null), [working, setWorking] = (0, react.useState)(false);
@@ -4101,7 +4174,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/sketch-agent-run.js
-		function createSketchAgentRun({ execute, open, changed, busy = () => false, previewEnabled = () => false, idleMs = 18e4 }) {
+		function createSketchAgentRun({ execute, open, changed, busy = () => false, idleMs = 18e4 }) {
 			let state = "idle", generation = 0, runNumber = 0, pending = false, runId, timer, completed;
 			const update = (next) => {
 				state = next;
@@ -4165,15 +4238,10 @@ window.__ModuleLoader__.load({
 							...value,
 							runId
 						};
-						const result = previewEnabled() ? await execute({
-							action: "preview",
-							documentId: value.documentId
-						}) : value;
-						if (version !== generation) throw Error("Drawing interrupted");
 						completed = {
 							key: JSON.stringify(request),
 							value: {
-								...result,
+								...value,
 								runId
 							}
 						};
@@ -4294,7 +4362,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/sketch-studio.jsx
-		function SketchStudio({ open, agentEnabled, agentPreview, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc, sessionState }) {
+		function SketchStudio({ open, agentEnabled, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc, sessionState }) {
 			const localSession = (0, react.useRef)(null);
 			const psdImport = useSketchImportConfirm(t);
 			localSession.current ??= sessionState ?? createSketchSessionState();
@@ -4591,7 +4659,6 @@ window.__ModuleLoader__.load({
 					setNoticeHidden(false);
 				},
 				available: () => enabled && agentEnabled,
-				previewEnabled: () => agentPreview,
 				open: () => onOpen(),
 				busy: () => operationGate.current.running || busy || Boolean(active.current) || Boolean(textEdit) || sizeGesture.current,
 				document: () => doc.current,
@@ -4625,9 +4692,24 @@ window.__ModuleLoader__.load({
 					setError("");
 					schedule();
 				},
-				preview: async () => {
-					paint();
-					return canvas.current.toDataURL("image/png");
+				preview: async (options) => {
+					const w = doc.current.width ?? 1024, h = doc.current.height ?? 1024;
+					return composeSketchPreview({
+						doc: doc.current,
+						images: images.current,
+						width: w,
+						height: h,
+						options,
+						paintLayers: paintSketchLayers,
+						makeSurface: (width, height) => Object.assign(document.createElement("canvas"), {
+							width,
+							height
+						})
+					});
+				},
+				addReference: async (dataUrl, name) => {
+					const blob = await (await fetch(dataUrl)).blob();
+					await importImage(new File([blob], name, { type: blob.type }), { visible: false });
 				},
 				save
 			});
@@ -4636,8 +4718,7 @@ window.__ModuleLoader__.load({
 				execute: (request) => agentSession.current(request),
 				open: () => agentAdapter.current.open(),
 				changed: (state) => agentAdapter.current.changed?.(state),
-				busy: () => agentAdapter.current.busy(),
-				previewEnabled: () => agentAdapter.current.previewEnabled()
+				busy: () => agentAdapter.current.busy()
 			});
 			(0, react.useEffect)(() => {
 				if (!enabled || !agentEnabled || !hydrated) return;
@@ -5317,7 +5398,6 @@ window.__ModuleLoader__.load({
 			}), [registerOpen]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchStudio, {
 				sessionState,
-				agentPreview: settings.imageSketchAgentPreview,
 				agentEnabled: settings.imageSketchAgent,
 				onOpen: () => {
 					opener.current = document.activeElement;
@@ -5713,10 +5793,6 @@ window.__ModuleLoader__.load({
 			sketchRun_failed: "绘制失败",
 			sketchRunStop: "停止绘制",
 			sketchRunResume: "允许继续绘制",
-			sketchAgentPreview: "完成后返回预览 · Beta",
-			sketchAgentPreviewHint: "默认关闭；完成绘制后向模型返回画布图片，会增加图片输入用量。",
-			sketchAgentPreview_on: "开启",
-			sketchAgentPreview_off: "关闭",
 			sketchAgent_on: "开启",
 			sketchAgent_off: "关闭",
 			imageSettings: "图片",
@@ -5891,6 +5967,12 @@ window.__ModuleLoader__.load({
 			resetAccountChanged: "登录账号已变更，请重新开始。",
 			resetUncertain: "服务端返回结果不确定。请再次确认，插件会复用同一个请求，不会另外发起一次重置。",
 			creditsNote: "额外 Credits、消费上限、重置次数分别显示。",
+			creditsExpires: "预计 {date} 到期，还剩 {days} 天",
+			creditsExpiredToday: "今天 {date} 到期",
+			creditsExpiryEstimate: "（估计：官方公布的 Pro 200 补偿 Credits 到期日，接口未返回，以 ChatGPT 使用情况页为准）",
+			creditsAfterAllowance: "Credits 要等套餐额度用完后才会开始消耗，官方没有“先用 Credits”的开关。",
+			creditsMessages: "约可发 {local} 条本地消息 / {cloud} 条云端消息",
+			chatPass: "ChatPass 每周额度",
 			creditsUsed: "已用 {used} / {limit} credits",
 			spendReached: "Credits 月度消费上限已用尽。",
 			unavailable: "暂无数据",
@@ -5922,7 +6004,6 @@ window.__ModuleLoader__.load({
 			diagnosticsHint: "遇到问题时生成报告，可复制后用于反馈。不含登录凭据和账号标识。",
 			sketchCanvasSetting: "画板入口",
 			sketchAgentSetting: "Agent 绘图",
-			sketchAgentPreviewSetting: "完成后返回预览",
 			quotaShowIndicator: "显示额度",
 			quotaIndicatorHint: "输入框只显示图标，点击查看详情。关闭时暂停续航采样。",
 			quotaForecastOptional: "续航预测 · 实验",
@@ -6279,10 +6360,6 @@ window.__ModuleLoader__.load({
 			sketchRun_failed: "Drawing failed",
 			sketchRunStop: "Stop drawing",
 			sketchRunResume: "Allow drawing again",
-			sketchAgentPreview: "Preview on completion · Beta",
-			sketchAgentPreviewHint: "Off by default. Returns the canvas to the model on completion, adding image input usage.",
-			sketchAgentPreview_on: "On",
-			sketchAgentPreview_off: "Off",
 			sketchAgent_on: "On",
 			sketchAgent_off: "Off",
 			imageSettings: "Images",
@@ -6457,6 +6534,12 @@ window.__ModuleLoader__.load({
 			resetAccountChanged: "The signed-in account changed. Start again.",
 			resetUncertain: "The server result is uncertain. Confirm again to check the same request; the plugin will not start a separate reset.",
 			creditsNote: "Extra Credits, spending caps, and resets are separate items.",
+			creditsExpires: "Expires {date} ({days} days left)",
+			creditsExpiredToday: "Expires today ({date})",
+			creditsExpiryEstimate: "(Estimate: the published expiry of the Pro 200 compensation Credits; the API does not report it, so check ChatGPT usage settings)",
+			creditsAfterAllowance: "Credits are only drawn once the plan allowance runs out; there is no official switch to spend them first.",
+			creditsMessages: "Roughly {local} local / {cloud} cloud messages",
+			chatPass: "ChatPass weekly",
 			creditsUsed: "{used} / {limit} credits used",
 			spendReached: "The monthly Credits spending cap has been reached.",
 			unavailable: "No data yet",
@@ -6488,7 +6571,6 @@ window.__ModuleLoader__.load({
 			diagnosticsHint: "Generate a report to copy into a support request. Sign-in credentials and account identifiers are excluded.",
 			sketchCanvasSetting: "Board entry",
 			sketchAgentSetting: "Agent drawing",
-			sketchAgentPreviewSetting: "Return preview on completion",
 			quotaShowIndicator: "Show quota",
 			quotaIndicatorHint: "Show an icon in the composer; click for details. Hiding it pauses forecast sampling.",
 			quotaForecastOptional: "Runway forecast · Experimental",
@@ -6700,6 +6782,7 @@ window.__ModuleLoader__.load({
 .codexSubscriptionSearchOptions[open]>summary{margin-bottom:8px}
 .codexSubscriptionCreditSection{display:flex;flex-direction:column;gap:7px}
 .codexSubscriptionCreditNote{font-size:11px;line-height:17px;color:var(--dsw-alias-label-tertiary)}
+.codexSubscriptionCreditExpiry{display:grid;gap:2px;font-size:11px;line-height:17px;color:var(--dsw-alias-label-tertiary)}.codexSubscriptionCreditExpiry p{margin:0}.codexSubscriptionCreditExpiry[data-soon=true]{color:var(--dsw-alias-label-secondary);font-weight:600}
 .codexSubscriptionCreditRows{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
 .codexSubscriptionCreditBalance,.codexSubscriptionSpendLimit{min-width:0;border-radius:10px;padding:12px 14px;background:var(--dsw-alias-bg-module-platform)}
 .codexSubscriptionCreditBalance{display:flex;flex-direction:column;gap:6px}
@@ -7796,8 +7879,7 @@ window.__ModuleLoader__.load({
 			imageViewer: true,
 			imageAnnotations: true,
 			imageSketch: false,
-			imageSketchAgent: false,
-			imageSketchAgentPreview: false
+			imageSketchAgent: false
 		});
 		function readImageFeatures(value = {}) {
 			return Object.fromEntries(Object.entries(IMAGE_FEATURE_DEFAULTS).map(([key, fallback]) => [key, typeof value?.[key] === "boolean" ? value[key] : fallback]));
@@ -8603,7 +8685,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.4.2";
+		const PACKAGE_VERSION = "2.5.1";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -9202,7 +9284,6 @@ window.__ModuleLoader__.load({
 			imageEntryPoints: ["imageShortcut"],
 			sketchCanvas: ["imageSketch"],
 			sketchAgent: ["imageSketchAgent"],
-			sketchAgentPreview: ["imageSketchAgentPreview"],
 			imageBrowsing: ["imageViewer", "imageAnnotations"]
 		});
 		function imageGroupValue(snapshot, group) {
@@ -11228,8 +11309,38 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		Object.freeze({
+			credits: 62500,
+			expiresAt: Date.UTC(2026, 11, 31, 12)
+		});
+		const DAY_MS = 864e5;
+		/** Whole days left, and whether the expiry is close enough to call out. */
+		function creditExpiryStatus(expiry, now = Date.now()) {
+			if (expiry === void 0) return void 0;
+			const daysLeft = Math.max(0, Math.ceil((expiry.expiresAt - now) / DAY_MS));
+			return {
+				daysLeft,
+				soon: daysLeft <= 30
+			};
+		}
 		//#endregion
 		//#region src/client-usage.jsx
+		const count = (value) => Number(value).toLocaleString();
+		function CreditExpiry({ credits, t }) {
+			const date = validDate(credits.expiresAt);
+			if (date === void 0 || credits.unlimited) return null;
+			const status = creditExpiryStatus({ expiresAt: credits.expiresAt });
+			const estimate = credits.expirySource === "estimate";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "codexSubscriptionCreditExpiry",
+				"data-soon": status.soon,
+				role: "status",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [fill(t(status.daysLeft === 0 ? "creditsExpiredToday" : "creditsExpires"), {
+					date: date.toLocaleDateString(),
+					days: status.daysLeft
+				}), estimate ? ` ${t("creditsExpiryEstimate")}` : ""] })
+			});
+		}
 		function ResetTime({ resetsAt, t }) {
 			const date = Number.isSafeInteger(resetsAt) ? validDate(resetsAt * 1e3) : void 0;
 			if (date === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("resetUnknown") });
@@ -11491,7 +11602,7 @@ window.__ModuleLoader__.load({
 			const visibleUsage = signedIn ? usage : void 0;
 			const limits = visibleUsage?.rateLimits ?? [];
 			const exhausted = limits.some((limit) => limit.id !== "code_review" && limit.windows.some((window) => window.usedPercent >= 100));
-			const hasUsageDetails = limits.length > 0 || visibleUsage?.credits !== void 0 || visibleUsage?.individualLimit !== void 0 || visibleUsage?.resetCredits?.availableCount > 0;
+			const hasUsageDetails = limits.length > 0 || visibleUsage?.chatPass !== void 0 || visibleUsage?.credits !== void 0 || visibleUsage?.individualLimit !== void 0 || visibleUsage?.resetCredits?.availableCount > 0;
 			const fetchedAt = typeof visibleUsage?.fetchedAt === "number" ? validDate(visibleUsage.fetchedAt) : void 0;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "codexSubscriptionCard codexSubscriptionUsageCard",
@@ -11574,6 +11685,36 @@ window.__ModuleLoader__.load({
 							]
 						}, `${limit.id}-${window.windowSeconds}-${index}`)))
 					}),
+					visibleUsage?.chatPass === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "codexSubscriptionLimits",
+						children: visibleUsage.chatPass.windows.map((window, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "codexSubscriptionLimit",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "codexSubscriptionLimitTop",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "codexSubscriptionLimitLabel",
+										children: t("chatPass")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [percent(window.remainingPercent), "%"] })]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", {
+									max: "100",
+									value: window.remainingPercent,
+									"aria-label": `${t("chatPass")} ${fill(t("remaining"), { value: percent(window.remainingPercent) })}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "codexSubscriptionLimitMeta",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "codexSubscriptionLimitPeriod",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: windowLabel(window.windowSeconds, t) })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetTime, {
+										resetsAt: window.resetsAt,
+										t
+									})]
+								})
+							]
+						}, `chatpass-${window.windowSeconds}-${index}`))
+					}),
 					visibleUsage?.credits === void 0 && visibleUsage?.individualLimit === void 0 && !(visibleUsage?.resetCredits?.availableCount > 0) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "codexSubscriptionCreditSection",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -11586,6 +11727,21 @@ window.__ModuleLoader__.load({
 									className: "codexSubscriptionCreditBalance",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("creditsBalance") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: visibleUsage.credits.unlimited ? t("unlimited") : `${visibleUsage.credits.balance ?? t("unavailable")} ${t("creditsUnit")}` })]
 								}) : null,
+								visibleUsage?.credits ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CreditExpiry, {
+									credits: visibleUsage.credits,
+									t
+								}) : null,
+								visibleUsage?.credits && !visibleUsage.credits.unlimited ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "codexSubscriptionCreditNote",
+									children: t("creditsAfterAllowance")
+								}) : null,
+								visibleUsage?.credits?.approxLocalMessages ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "codexSubscriptionCreditNote",
+									children: fill(t("creditsMessages"), {
+										local: `${count(visibleUsage.credits.approxLocalMessages[0])}–${count(visibleUsage.credits.approxLocalMessages[1])}`,
+										cloud: visibleUsage.credits.approxCloudMessages ? `${count(visibleUsage.credits.approxCloudMessages[0])}–${count(visibleUsage.credits.approxCloudMessages[1])}` : t("unavailable")
+									})
+								}) : null,
 								visibleUsage?.resetCredits?.availableCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
 									className: "codexSubscriptionCreditBalance codexSubscriptionResetDisclosure",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: fill(t("resetCreditsAvailable"), { count: visibleUsage.resetCredits.availableCount }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetCreditList, {