@eddyskywalker/dsh-chatgpt-subscription 0.1.9 → 0.1.11

package/lib/client.js

@@ -7,6 +7,242 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		const ROUTE_PREFIX = "/api/dsh-chatgpt-subscription";
+		const CODEX_CHATGPT_PROVIDER_ID = "codex-chatgpt";
+		const CODEX_IMAGE_TOOL_NAME = "codex_image_generate";
+		//#endregion
+		//#region src/client/quota.ts
+		function selectQuotaForModel(quota, modelId) {
+			if (quota === void 0 || quota.buckets.length === 0) return null;
+			const bucket = (modelId?.toLowerCase() ?? "").includes("spark") ? quota.buckets.find((candidate) => `${candidate.id} ${candidate.name}`.toLowerCase().includes("spark")) : quota.buckets.find((candidate) => candidate.id === "codex") ?? quota.buckets.find((candidate) => candidate.name.toLowerCase() === "codex");
+			if (bucket === void 0) return null;
+			const windows = quotaWindows(bucket);
+			if (windows.length === 0) return null;
+			const window = windows.reduce((tightest, candidate) => candidate.usedPercent > tightest.usedPercent ? candidate : tightest, windows[0]);
+			return {
+				bucket,
+				window,
+				remainingPercent: Math.max(0, 100 - window.usedPercent)
+			};
+		}
+		function quotaWindows(bucket) {
+			if (bucket.windows.length > 0) return bucket.windows;
+			return [bucket.primary, bucket.secondary].filter((window) => window !== null);
+		}
+		//#endregion
+		//#region src/client/CodexComposerQuota.tsx
+		function CodexComposerQuota({ api, directory, loadModelDirectory, t }) {
+			const modelState = useStore(directory);
+			const [status, setStatus] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const mountedRef = (0, react.useRef)(false);
+			const selected = modelState.current;
+			const isCodex = selected?.provider === CODEX_CHATGPT_PROVIDER_ID;
+			(0, react.useEffect)(() => {
+				loadModelDirectory();
+			}, [loadModelDirectory]);
+			(0, react.useEffect)(() => {
+				mountedRef.current = true;
+				return () => {
+					mountedRef.current = false;
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!isCodex) return;
+				let disposed = false;
+				const refresh = async () => {
+					setLoading(true);
+					try {
+						const next = await api.status();
+						if (!disposed && mountedRef.current) setStatus(next);
+					} catch {
+						if (!disposed && mountedRef.current) setStatus(null);
+					} finally {
+						if (!disposed && mountedRef.current) setLoading(false);
+					}
+				};
+				refresh();
+				const timer = window.setInterval(() => {
+					if (document.visibilityState === "visible") refresh();
+				}, 6e4);
+				return () => {
+					disposed = true;
+					window.clearInterval(timer);
+				};
+			}, [api, isCodex]);
+			const quota = (0, react.useMemo)(() => selectQuotaForModel(status?.quota, selected?.model), [selected?.model, status?.quota]);
+			if (!isCodex || status?.preferences.quickQuotaVisible !== true) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "dsh-codex-composer-quota",
+				"data-level": quota === null ? "normal" : quota.remainingPercent <= 5 ? "danger" : quota.remainingPercent <= 20 ? "warning" : "normal",
+				"aria-label": quota === null ? t("quickQuotaLoading") : `${t("quickQuotaLabel")}: ${formatPercent$1(quota.remainingPercent)}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("quickQuotaLabel") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: quota === null ? loading ? t("quickQuotaLoading") : "—" : formatPercent$1(quota.remainingPercent) })]
+			});
+		}
+		function useStore(store) {
+			return (0, react.useSyncExternalStore)((listener) => store.subscribe(listener), () => store.getSnapshot(), () => store.getSnapshot());
+		}
+		function formatPercent$1(value) {
+			return `${new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }).format(value)}%`;
+		}
+		//#endregion
+		//#region src/client/CodexImageToolView.tsx
+		function CodexImageToolView({ block, loadImage, t }) {
+			const settled = "kind" in block;
+			const isError = settled ? block.isError : false;
+			const prompt = promptFromBlock(block);
+			const images = settled && !isError ? imageBlocks(block.content) : [];
+			const label = isError ? t("imageToolFailed") : settled ? t("imageToolDone") : t("imageToolRunning");
+			const summary = prompt ?? textSummary(settled ? block.content : []);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-codex-image-tool",
+				"data-state": isError ? "error" : settled ? "done" : "running",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-codex-image-tool-head",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-codex-image-dot",
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-codex-image-title",
+							children: label
+						}),
+						summary !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-codex-image-summary",
+							children: summary
+						}) : null
+					]
+				}), images.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-codex-image-grid",
+					children: images.map((attachment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GeneratedImage, {
+						attachment,
+						load: loadImage,
+						label: attachment.name ?? t("image"),
+						t
+					}, String(attachment.attachmentId)))
+				}) : null]
+			});
+		}
+		function GeneratedImage({ attachment, load, label, t }) {
+			const [src, setSrc] = (0, react.useState)(null);
+			const [failed, setFailed] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				let disposed = false;
+				setSrc(null);
+				setFailed(false);
+				load(attachment).then((url) => {
+					if (!disposed) setSrc(url);
+				}, () => {
+					if (!disposed) setFailed(true);
+				});
+				return () => {
+					disposed = true;
+				};
+			}, [attachment, load]);
+			if (failed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-codex-image-failed",
+				children: t("imageLoadFailed")
+			});
+			if (src === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-codex-image-loading",
+				children: t("imageLoading")
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				className: "dsh-codex-image-preview",
+				src,
+				alt: label
+			});
+		}
+		function promptFromBlock(block) {
+			const raw = "kind" in block ? block.call?.argsRaw : block.argsRaw;
+			if (typeof raw !== "string" || raw.trim() === "") return null;
+			try {
+				const value = JSON.parse(raw);
+				return typeof value === "object" && value !== null && !Array.isArray(value) && typeof value.prompt === "string" ? value.prompt : null;
+			} catch {
+				return null;
+			}
+		}
+		function imageBlocks(blocks) {
+			const result = [];
+			for (const block of blocks) {
+				if (block.type === "image") result.push(block.attachment);
+				if (block.type === "tool-result") result.push(...imageBlocks(block.content));
+			}
+			return result;
+		}
+		function textSummary(blocks) {
+			const text = blocks.map((block) => block.type === "text" || block.type === "reasoning" ? block.text : "").filter(Boolean).join(" ").trim();
+			return text === "" ? null : text;
+		}
+		//#endregion
+		//#region src/shared/model-catalog.ts
+		const CODEX_MODEL_CATALOG = [
+			{
+				id: "gpt-5.6-sol",
+				name: "5.6 Sol",
+				contextWindow: 272e3,
+				inputModalities: ["text", "image"],
+				defaultReasoningEffort: "medium",
+				reasoningProfile: "gpt-5.6",
+				supportsReasoningSummary: true
+			},
+			{
+				id: "gpt-5.6-terra",
+				name: "5.6 Terra",
+				contextWindow: 272e3,
+				inputModalities: ["text", "image"],
+				defaultReasoningEffort: "medium",
+				reasoningProfile: "gpt-5.6",
+				supportsReasoningSummary: true
+			},
+			{
+				id: "gpt-5.6-luna",
+				name: "5.6 Luna",
+				contextWindow: 272e3,
+				inputModalities: ["text", "image"],
+				defaultReasoningEffort: "medium",
+				reasoningProfile: "gpt-5.6",
+				supportsReasoningSummary: true
+			},
+			{
+				id: "gpt-5.5",
+				name: "5.5",
+				contextWindow: 272e3,
+				inputModalities: ["text", "image"],
+				defaultReasoningEffort: "medium",
+				reasoningProfile: "standard",
+				supportsReasoningSummary: true
+			},
+			{
+				id: "gpt-5.4",
+				name: "5.4",
+				contextWindow: 272e3,
+				inputModalities: ["text", "image"],
+				defaultReasoningEffort: "none",
+				reasoningProfile: "standard",
+				supportsReasoningSummary: true
+			},
+			{
+				id: "gpt-5.4-mini",
+				name: "5.4 Mini",
+				contextWindow: 272e3,
+				inputModalities: ["text", "image"],
+				defaultReasoningEffort: "none",
+				reasoningProfile: "standard",
+				supportsReasoningSummary: true
+			},
+			{
+				id: "gpt-5.3-codex-spark",
+				name: "5.3 Codex Spark",
+				contextWindow: 258e3,
+				inputModalities: ["text"],
+				defaultReasoningEffort: "high",
+				reasoningProfile: "standard",
+				supportsReasoningSummary: false
+			}
+		];
+		CODEX_MODEL_CATALOG[0];
 		//#endregion
 		//#region src/client/api.ts
 		var SubscriptionApi = class {
@@ -31,6 +267,9 @@ window.__ModuleLoader__.load({
 			testConnection() {
 				return post(`${ROUTE_PREFIX}/connection/test`, {});
 			}
+			updatePreferences(patch) {
+				return post(`${ROUTE_PREFIX}/preferences/update`, patch);
+			}
 			events(loginId) {
 				return new EventSource(`${ROUTE_PREFIX}/login/events?loginId=${encodeURIComponent(loginId)}`);
 			}
@@ -61,15 +300,6 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/CodexSubscriptionSection.tsx
-		const MODELS = [
-			"gpt-5.6-sol",
-			"gpt-5.6-terra",
-			"gpt-5.6-luna",
-			"gpt-5.5",
-			"gpt-5.4",
-			"gpt-5.4-mini",
-			"gpt-5.2"
-		];
 		function CodexSubscriptionSection({ t }) {
 			const apiRef = (0, react.useRef)(new SubscriptionApi());
 			const eventSourceRef = (0, react.useRef)(null);
@@ -182,6 +412,13 @@ window.__ModuleLoader__.load({
 					checkedAt: result.checkedAt
 				});
 			});
+			const updatePreferences = async (patch) => run("preferences", async () => {
+				const preferences = await apiRef.current.updatePreferences(patch);
+				setStatus((current) => current === null ? current : {
+					...current,
+					preferences
+				});
+			});
 			const logout = async () => run("logout", async () => {
 				await apiRef.current.logout();
 				eventSourceRef.current?.close();
@@ -310,7 +547,10 @@ window.__ModuleLoader__.load({
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "dsh-codex-models",
 									"aria-label": t("models"),
-									children: MODELS.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: model }, model))
+									children: CODEX_MODEL_CATALOG.map((model) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+										title: model.id,
+										children: model.name
+									}, model.id))
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "dsh-codex-actions",
@@ -322,6 +562,41 @@ window.__ModuleLoader__.load({
 								})
 							]
 						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Section, {
+							title: t("enhancements"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-codex-pref-row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("searchProvider") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsh-codex-muted",
+									children: t("searchProviderHint")
+								})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-codex-segments",
+									role: "radiogroup",
+									"aria-label": t("searchProvider"),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "radio",
+										name: "dsh-codex-search-provider",
+										checked: status?.preferences.searchProvider === "dsh",
+										disabled: busy !== null,
+										onChange: () => updatePreferences({ searchProvider: "dsh" })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("searchProviderDsh") })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "radio",
+										name: "dsh-codex-search-provider",
+										checked: status?.preferences.searchProvider === "codex",
+										disabled: busy !== null,
+										onChange: () => updatePreferences({ searchProvider: "codex" })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("searchProviderCodex") })] })]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "dsh-codex-check",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: status?.preferences.quickQuotaVisible === true,
+									disabled: busy !== null,
+									onChange: (event) => updatePreferences({ quickQuotaVisible: event.currentTarget.checked })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("quickQuota") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("quickQuotaHint") })] })]
+							})]
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Section, {
 							title: t("quota"),
 							aside: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -342,6 +617,23 @@ window.__ModuleLoader__.load({
 									bucket,
 									t
 								}, bucket.id)),
+								status?.quota.credits !== null && status?.quota.credits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaFact, {
+									label: t("credits"),
+									value: status.quota.credits.unlimited ? t("unlimited") : status.quota.credits.balance ?? (status.quota.credits.hasCredits ? t("available") : t("unavailable"))
+								}) : null,
+								status?.quota.individualLimit !== null && status?.quota.individualLimit !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaFact, {
+									label: t("monthlySpend"),
+									value: individualLimitLabel(status.quota.individualLimit, t)
+								}) : null,
+								status?.quota.resetCredits !== null && status?.quota.resetCredits !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaFact, {
+									label: t("resetCredits"),
+									value: String(status.quota.resetCredits.availableCount)
+								}) : null,
+								status?.quota.spendControlReached === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dsh-codex-warning",
+									role: "status",
+									children: t("spendControlReached")
+								}) : null,
 								status?.quota.state === "empty" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: "dsh-codex-empty",
 									children: t("noQuota")
@@ -420,24 +712,23 @@ window.__ModuleLoader__.load({
 			return t("securityUnavailable");
 		}
 		function QuotaBucket({ bucket, t }) {
+			const windows = quotaWindows(bucket);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 				className: "dsh-codex-quota-card",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-codex-quota-title",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: bucket.name }), bucket.planType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: bucket.planType }) : null]
-					}),
-					bucket.primary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaBar, {
-						label: windowLabel(bucket.primary.windowDurationMins, t),
-						window: bucket.primary,
-						t
-					}) : null,
-					bucket.secondary ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaBar, {
-						label: windowLabel(bucket.secondary.windowDurationMins, t),
-						window: bucket.secondary,
-						t
-					}) : null
-				]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-codex-quota-title",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: bucket.name }), bucket.planType ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: bucket.planType }) : null]
+				}), windows.map((window, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuotaBar, {
+					label: windowLabel(window.windowDurationMins, t),
+					window,
+					t
+				}, `${window.windowDurationMins ?? "x"}:${window.resetsAt ?? "x"}:${index}`))]
+			});
+		}
+		function QuotaFact({ label, value }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-codex-quota-fact",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: value })]
 			});
 		}
 		function QuotaBar({ label, window, t }) {
@@ -487,6 +778,15 @@ window.__ModuleLoader__.load({
 		function formatPercent(value) {
 			return `${new Intl.NumberFormat(void 0, { maximumFractionDigits: 1 }).format(value)}%`;
 		}
+		function individualLimitLabel(limit, t) {
+			const parts = [
+				limit.remainingPercent !== null ? `${formatPercent(limit.remainingPercent)} ${t("remaining")}` : null,
+				limit.limit !== null ? `${t("limit")}: ${limit.limit}` : null,
+				limit.used !== null ? `${t("used")}: ${limit.used}` : null,
+				limit.resetsAt !== null ? `${t("resets")}: ${formatReset(limit.resetsAt)}` : null
+			].filter((part) => part !== null);
+			return parts.length > 0 ? parts.join(" · ") : t("unknown");
+		}
 		function formatDate(seconds) {
 			if (seconds === void 0) return "—";
 			return new Intl.DateTimeFormat(void 0, {
@@ -544,6 +844,13 @@ window.__ModuleLoader__.load({
 				testing: "测试中…",
 				latency: "最近延迟",
 				models: "可用模型",
+				enhancements: "增强功能",
+				searchProvider: "搜索来源",
+				searchProviderHint: "选择 DSH Web 搜索工具使用默认来源，或改用当前 ChatGPT 订阅的 Codex 搜索来源。",
+				searchProviderDsh: "DSH 默认",
+				searchProviderCodex: "Codex 订阅",
+				quickQuota: "在输入框旁显示快捷用量",
+				quickQuotaHint: "仅在当前会话选中 codex-chatgpt 模型时显示。",
 				quota: "用量与限额",
 				quotaIntro: "数据来自 ChatGPT Codex 用量服务。页面可见时最多每 60 秒刷新一次。",
 				refreshQuota: "刷新用量",
@@ -557,8 +864,28 @@ window.__ModuleLoader__.load({
 				limitWindow: "额度",
 				used: "已使用",
 				remaining: "剩余",
+				available: "可用",
+				unavailable: "不可用",
+				unlimited: "无限",
+				credits: "Credits",
+				monthlySpend: "月度消费控制",
+				resetCredits: "重置次数",
+				spendControlReached: "已触发月度消费控制，新的订阅调用可能被限制。",
+				limit: "上限",
 				exhausted: "额度已用尽",
 				resets: "重置",
+				quickQuotaLabel: "Codex 剩余",
+				quickQuotaLoading: "用量…",
+				imageToolRunning: "正在生成图片",
+				imageToolDone: "已生成图片",
+				imageToolFailed: "图片生成失败",
+				image: "图片",
+				openImage: "打开图片",
+				openNamedImage: "打开 {name}",
+				imageLoading: "加载图片…",
+				imageLoadFailed: "图片加载失败，点击重试",
+				imagePreviewClose: "关闭",
+				imagePreviewOpenOriginal: "打开原图",
 				retry: "重试",
 				unknown: "未知"
 			},
@@ -598,6 +925,13 @@ window.__ModuleLoader__.load({
 				testing: "Testing…",
 				latency: "Last latency",
 				models: "Available models",
+				enhancements: "Enhancements",
+				searchProvider: "Search provider",
+				searchProviderHint: "Choose whether DSH web search uses its default provider or the Codex search source from this ChatGPT subscription.",
+				searchProviderDsh: "DSH default",
+				searchProviderCodex: "Codex subscription",
+				quickQuota: "Show quick usage beside the composer",
+				quickQuotaHint: "Shown only when the current session uses a codex-chatgpt model.",
 				quota: "Usage and limits",
 				quotaIntro: "Data comes from the ChatGPT Codex usage service and refreshes at most once per minute while visible.",
 				refreshQuota: "Refresh usage",
@@ -611,8 +945,28 @@ window.__ModuleLoader__.load({
 				limitWindow: "limit",
 				used: "used",
 				remaining: "remaining",
+				available: "Available",
+				unavailable: "Unavailable",
+				unlimited: "Unlimited",
+				credits: "Credits",
+				monthlySpend: "Monthly spend control",
+				resetCredits: "Reset credits",
+				spendControlReached: "Monthly spend control has been reached; new subscription calls may be limited.",
+				limit: "Limit",
 				exhausted: "Quota exhausted",
 				resets: "Resets",
+				quickQuotaLabel: "Codex left",
+				quickQuotaLoading: "Usage…",
+				imageToolRunning: "Generating image",
+				imageToolDone: "Generated image",
+				imageToolFailed: "Image generation failed",
+				image: "Image",
+				openImage: "Open image",
+				openNamedImage: "Open {name}",
+				imageLoading: "Loading image…",
+				imageLoadFailed: "Image failed to load. Click to retry",
+				imagePreviewClose: "Close",
+				imagePreviewOpenOriginal: "Open original",
 				retry: "Retry",
 				unknown: "Unknown"
 			}
@@ -645,9 +999,24 @@ window.__ModuleLoader__.load({
 .dsh-codex-link{color:var(--dsw-alias-label-link,#3278d4);display:inline-block;font-size:13px;margin-top:8px}
 .dsh-codex-models{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px}
 .dsh-codex-models code{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;padding:4px 6px}
+.dsh-codex-pref-row{align-items:center;border-bottom:1px solid var(--dsw-alias-border-l2);display:flex;gap:16px;justify-content:space-between;min-height:58px;padding:10px 0}
+.dsh-codex-pref-row strong,.dsh-codex-check strong{display:block;font-size:13px;font-weight:600;line-height:1.35}
+.dsh-codex-segments{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;display:flex;flex:none;gap:2px;padding:2px}
+.dsh-codex-segments label{cursor:pointer;display:block}
+.dsh-codex-segments input{position:absolute;opacity:0;pointer-events:none}
+.dsh-codex-segments span{border-radius:6px;color:var(--dsw-alias-label-secondary);display:block;font-size:12px;line-height:1;padding:7px 10px;white-space:nowrap}
+.dsh-codex-segments input:checked+span{background:var(--dsw-alias-bg-base);box-shadow:0 1px 2px rgba(0,0,0,.08);color:var(--dsw-alias-label-primary)}
+.dsh-codex-segments input:focus-visible+span{outline:2px solid var(--dsw-alias-button-info-fill,#397ee8);outline-offset:2px}
+.dsh-codex-segments input:disabled+span{cursor:default;opacity:.5}
+.dsh-codex-check{align-items:flex-start;border-bottom:1px solid var(--dsw-alias-border-l2);cursor:pointer;display:flex;gap:10px;padding:12px 0}
+.dsh-codex-check input{flex:none;margin-top:2px}
+.dsh-codex-check small{color:var(--dsw-alias-label-secondary);display:block;font-size:12px;line-height:1.45;margin-top:2px}
 .dsh-codex-quota-card{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;margin-top:12px;padding:12px}
 .dsh-codex-quota-title{align-items:center;display:flex;font-size:13px;gap:8px;justify-content:space-between}
 .dsh-codex-quota-title span{color:var(--dsw-alias-label-tertiary);font-size:11px;text-transform:uppercase}
+.dsh-codex-quota-fact{align-items:flex-start;border-bottom:1px solid var(--dsw-alias-border-l2);display:flex;font-size:12px;gap:12px;justify-content:space-between;line-height:1.45;padding:10px 0}
+.dsh-codex-quota-fact span{color:var(--dsw-alias-label-secondary);flex:none}
+.dsh-codex-quota-fact strong{font-weight:600;min-width:0;overflow-wrap:anywhere;text-align:right}
 .dsh-codex-meter-wrap{margin-top:13px}
 .dsh-codex-meter-label,.dsh-codex-meter-meta{display:flex;gap:10px;justify-content:space-between}
 .dsh-codex-meter-label{font-size:12px;margin-bottom:6px}
@@ -662,8 +1031,22 @@ window.__ModuleLoader__.load({
 .dsh-codex-skeleton span{animation:dsh-codex-pulse 1.4s ease-in-out infinite;background:var(--dsw-alias-bg-layer-2);border-radius:5px;height:42px}
 .dsh-codex-skeleton span:nth-child(2){animation-delay:.12s}.dsh-codex-skeleton span:nth-child(3){animation-delay:.24s}
 .dsh-codex-sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);white-space:nowrap}
+.dsh-codex-composer-quota{align-items:center;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:999px;color:var(--dsw-alias-label-secondary);display:inline-flex;font-size:11px;gap:6px;height:28px;line-height:1;max-width:160px;padding:0 9px;white-space:nowrap}
+.dsh-codex-composer-quota strong{color:var(--dsw-alias-label-primary);font-size:11px;font-weight:650}
+.dsh-codex-composer-quota[data-level=warning] strong{color:var(--dsw-alias-label-warning,#d58a24)}
+.dsh-codex-composer-quota[data-level=danger] strong{color:var(--dsw-alias-label-danger,#d94b4b)}
+.dsh-codex-image-tool{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;display:flex;flex-direction:column;gap:8px;margin:4px 0 4px 4px;max-width:520px;padding:10px 12px}
+.dsh-codex-image-tool-head{align-items:center;display:flex;font-size:13px;gap:8px;min-width:0}
+.dsh-codex-image-dot{background:var(--dsw-alias-button-info-fill,#397ee8);border-radius:50%;display:inline-block;flex:none;height:8px;width:8px}
+.dsh-codex-image-tool[data-state=error] .dsh-codex-image-dot{background:var(--dsw-alias-label-danger,#d94b4b)}
+.dsh-codex-image-title{font-weight:600}
+.dsh-codex-image-summary{color:var(--dsw-alias-label-tertiary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsh-codex-image-grid{display:flex;flex-wrap:wrap;gap:8px}
+.dsh-codex-image-preview{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;display:block;max-height:260px;max-width:min(100%,360px);object-fit:contain}
+.dsh-codex-image-loading,.dsh-codex-image-failed{border:1px dashed var(--dsw-alias-border-l2);border-radius:8px;color:var(--dsw-alias-label-tertiary);display:inline-flex;font-size:12px;line-height:1.4;padding:18px 20px}
+.dsh-codex-image-failed{color:var(--dsw-alias-label-danger,#d94b4b)}
 @keyframes dsh-codex-pulse{0%,100%{opacity:.55}50%{opacity:1}}
-@media(max-width:560px){.dsh-codex-row{align-items:flex-start;flex-direction:column;gap:3px}.dsh-codex-value{text-align:left}.dsh-codex-actions{justify-content:flex-start}.dsh-codex-grouphead{align-items:flex-start;flex-direction:column;gap:0;padding:12px 0}.dsh-codex-meter-meta{align-items:flex-start;flex-direction:column;gap:2px}.dsh-codex-errorbar{align-items:flex-start;flex-direction:column}}
+@media(max-width:560px){.dsh-codex-row,.dsh-codex-pref-row,.dsh-codex-quota-fact{align-items:flex-start;flex-direction:column;gap:3px}.dsh-codex-value,.dsh-codex-quota-fact strong{text-align:left}.dsh-codex-actions{justify-content:flex-start}.dsh-codex-grouphead{align-items:flex-start;flex-direction:column;gap:0;padding:12px 0}.dsh-codex-meter-meta{align-items:flex-start;flex-direction:column;gap:2px}.dsh-codex-errorbar{align-items:flex-start;flex-direction:column}.dsh-codex-segments{width:100%}.dsh-codex-segments label{flex:1}.dsh-codex-segments span{text-align:center}.dsh-codex-image-tool{max-width:100%;margin-left:0}}
 @media(prefers-reduced-motion:reduce){.dsh-codex-meter>span{transition:none}.dsh-codex-skeleton span{animation:none}}
 `;
 		function installStyles() {
@@ -677,7 +1060,12 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/index.tsx
-		const inject = ["slots", "locale"];
+		const inject = [
+			"slots",
+			"locale",
+			"modelDirectories",
+			"conversation"
+		];
 		function apply(ctx) {
 			ctx.effect(() => ctx.locale.register(NS, dictionaries), "dsh-chatgpt-subscription: dictionaries");
 			ctx.effect(() => installStyles(), "dsh-chatgpt-subscription: styles");
@@ -688,6 +1076,32 @@ window.__ModuleLoader__.load({
 				label: "Codex 订阅",
 				locale: NS
 			}, CodexSubscriptionSection));
+			ctx.slots.inject("conversation.input.right", () => ctx.slots.register({
+				name: "conversation.input.right",
+				id: "codex-subscription-quota",
+				order: 35,
+				locale: NS,
+				inject: (sessionId) => {
+					const directory = ctx.modelDirectories.directoryFor(sessionId);
+					return {
+						api: new SubscriptionApi(),
+						directory: directory.store,
+						loadModelDirectory: () => {
+							directory.load().catch(() => void 0);
+						}
+					};
+				}
+			}, CodexComposerQuota));
+			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+				name: "tool.call.toolview",
+				key: CODEX_IMAGE_TOOL_NAME,
+				locale: NS,
+				inject: (sessionId) => ({ loadImage: imageLoader(ctx, sessionId) })
+			}, CodexImageToolView));
+		}
+		function imageLoader(ctx, sessionId) {
+			const conversation = ctx.conversation;
+			return (attachment) => conversation.resolveImage(sessionId, attachment);
 		}
 		//#endregion
 		exports.apply = apply;