dsh-plugin-subscriptions 0.4.2 → 0.5.1

package/lib/client.js

@@ -29,8 +29,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
 let __deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 __deepseek_ai_dsh_client_ui_primitives = __toESM(__deepseek_ai_dsh_client_ui_primitives);
-let __deepseek_ai_dsh_client_ui_attachment = require("@deepseek-ai/dsh-client-ui-attachment");
-__deepseek_ai_dsh_client_ui_attachment = __toESM(__deepseek_ai_dsh_client_ui_attachment);
 
 //#region src/client/locales.ts
 /** Copy dictionaries for the Subscriptions settings section. */
@@ -54,6 +52,10 @@ const en = {
 	manualPlaceholder: "Paste the callback URL or code",
 	submit: "Submit",
 	loginMissingUrl: "login answered without an authorizeUrl",
+	deviceCodePrompt: "Enter this code on the GitHub verification page:",
+	deviceCodeCopy: "Copy code",
+	deviceCodeCopied: "Copied",
+	deviceCodeOpenPage: "Open GitHub verification page",
 	usageTitle: "Usage",
 	usageRefresh: "Refresh",
 	usageLoading: "Loading usage…",
@@ -74,7 +76,14 @@ const en = {
 	imageClose: "Close",
 	generatingVideo: "Generating video…",
 	videoLoading: "Loading video…",
-	videoLoadFailed: "Video failed to load: {message}"
+	videoLoadFailed: "Video failed to load: {message}",
+	speed: "Speed",
+	speedStandard: "Standard",
+	speedStandardDescription: "Default speed",
+	speedFast: "Fast",
+	speedFastDescription: "1.5x speed, more usage",
+	commandFast: "Switch the Codex speed tier (Standard/Fast)",
+	commandFastUnavailable: "The current model has no fast tier; /fast only works on Codex models whose catalog advertises one"
 };
 /** zh strings, one per {@link en} key. */
 const zh = {
@@ -96,6 +105,10 @@ const zh = {
 	manualPlaceholder: "粘贴回调 URL 或授权码",
 	submit: "提交",
 	loginMissingUrl: "login 响应缺少 authorizeUrl",
+	deviceCodePrompt: "在 GitHub 验证页面输入此验证码：",
+	deviceCodeCopy: "复制验证码",
+	deviceCodeCopied: "已复制",
+	deviceCodeOpenPage: "打开 GitHub 验证页面",
 	usageTitle: "用量",
 	usageRefresh: "刷新",
 	usageLoading: "用量加载中…",
@@ -116,7 +129,14 @@ const zh = {
 	imageClose: "关闭",
 	generatingVideo: "正在生成视频…",
 	videoLoading: "视频加载中…",
-	videoLoadFailed: "视频加载失败：{message}"
+	videoLoadFailed: "视频加载失败：{message}",
+	speed: "速度",
+	speedStandard: "标准",
+	speedStandardDescription: "默认速度",
+	speedFast: "快速",
+	speedFastDescription: "约 1.5 倍速度，消耗更多用量",
+	commandFast: "切换 Codex 速度档（标准/快速）",
+	commandFastUnavailable: "当前模型不支持快速档；/fast 仅对目录声明了 fast tier 的 Codex 模型可用"
 };
 
 //#endregion
@@ -124,7 +144,7 @@ const zh = {
 /** Logical RPC channel served by the node half of this plugin. */
 const SUBSCRIPTIONS_AUTH_CHANNEL$2 = "/subscriptions-auth";
 /** Poll cadence while a provider login attempt is busy. */
-const POLL_INTERVAL_MS = 2e3;
+const POLL_INTERVAL_MS$1 = 2e3;
 /** Card display metadata, in page order (names are brand names, not translated). */
 const PROVIDERS = [
 	{
@@ -138,18 +158,23 @@ const PROVIDERS = [
 	{
 		id: "grok",
 		name: "Grok (X Premium)"
+	},
+	{
+		id: "copilot",
+		name: "GitHub Copilot"
 	}
 ];
 /** Business error returned by the `/subscriptions-auth` channel (error branch message). */
 var SubscriptionsAuthError = class extends Error {};
 /**
 * Call one `/subscriptions-auth` endpoint and unwrap the business result.
+* Shared by the settings section and the composer Speed toggle.
 * @param rpc - Connection RPC caller.
 * @param endpoint - channel-relative endpoint.
 * @param payload - channel-owned request payload.
 * @returns the success value, cast by the caller to the endpoint's shape.
 */
-async function callSubscriptionsAuth$1(rpc, endpoint, payload) {
+async function callSubscriptionsAuth(rpc, endpoint, payload) {
 	let result;
 	try {
 		result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL$2, endpoint, payload);
@@ -170,12 +195,12 @@ function messageOf(error) {
 * @param params - `{name}` template params.
 * @returns the template with params substituted.
 */
-function fallbackTranslate$2(key, params) {
+function fallbackTranslate$3(key, params) {
 	let text = en[key];
 	for (const [name, value] of Object.entries(params ?? {})) text = text.replaceAll(`{${name}}`, String(value));
 	return text;
 }
-const styles$2 = {
+const styles$4 = {
 	section: {
 		display: "flex",
 		flexDirection: "column",
@@ -337,6 +362,24 @@ const styles$2 = {
 		lineHeight: "22px",
 		background: "var(--dsw-alias-bg-layer-1)",
 		color: "var(--dsw-alias-label-primary)"
+	},
+	deviceCode: {
+		marginTop: 4,
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		border: "1px solid var(--dsw-alias-border-l2)",
+		borderRadius: 8,
+		padding: "10px 12px",
+		background: "var(--dsw-alias-bg-layer-1)"
+	},
+	deviceCodeText: {
+		fontFamily: "monospace",
+		fontSize: 18,
+		lineHeight: "24px",
+		letterSpacing: 2,
+		color: "var(--dsw-alias-label-primary)",
+		userSelect: "all"
 	}
 };
 /** Status dot color for one provider state. */
@@ -388,14 +431,18 @@ function usageBarColor(usedPercent) {
 */
 function SubscriptionsSection(props) {
 	const { rpc } = props;
-	const t = props.t ?? fallbackTranslate$2;
+	const t = props.t ?? fallbackTranslate$3;
 	const [statuses, setStatuses] = (0, react.useState)({});
 	const [errors, setErrors] = (0, react.useState)({});
 	const [manualDrafts, setManualDrafts] = (0, react.useState)({
 		codex: "",
 		claude: "",
-		grok: ""
+		grok: "",
+		copilot: ""
 	});
+	/** Pending device-flow codes (copilot), shown while the attempt polls. */
+	const [deviceCodes, setDeviceCodes] = (0, react.useState)({});
+	const [copiedCode, setCopiedCode] = (0, react.useState)(void 0);
 	const [usages, setUsages] = (0, react.useState)({});
 	const [usageErrors, setUsageErrors] = (0, react.useState)({});
 	const [usageLoading, setUsageLoading] = (0, react.useState)({});
@@ -424,7 +471,7 @@ function SubscriptionsSection(props) {
 		if (rpc === void 0) return;
 		let response;
 		try {
-			response = await callSubscriptionsAuth$1(rpc, "status", {});
+			response = await callSubscriptionsAuth(rpc, "status", {});
 		} catch {
 			return;
 		}
@@ -432,14 +479,22 @@ function SubscriptionsSection(props) {
 		setStatuses(response.providers);
 		for (const { id } of PROVIDERS) {
 			const status = response.providers[id];
-			if (status.loggedIn || !status.busy) stopPolling(id);
+			if (status.loggedIn || !status.busy) {
+				stopPolling(id);
+				setDeviceCodes((prev) => {
+					if (prev[id] === void 0) return prev;
+					const next = { ...prev };
+					delete next[id];
+					return next;
+				});
+			}
 		}
 	}, [rpc, stopPolling]);
 	const startPolling = (0, react.useCallback)((provider) => {
 		if (pollersRef.current.has(provider)) return;
 		pollersRef.current.set(provider, setInterval(() => {
 			refresh();
-		}, POLL_INTERVAL_MS));
+		}, POLL_INTERVAL_MS$1));
 	}, [refresh]);
 	(0, react.useEffect)(() => {
 		mountedRef.current = true;
@@ -464,7 +519,7 @@ function SubscriptionsSection(props) {
 			[provider]: true
 		}));
 		try {
-			const usage = await callSubscriptionsAuth$1(rpc, "usage", { provider });
+			const usage = await callSubscriptionsAuth(rpc, "usage", { provider });
 			if (!mountedRef.current) return;
 			setUsages((prev) => ({
 				...prev,
@@ -517,13 +572,12 @@ function SubscriptionsSection(props) {
 		if (rpc === void 0) return;
 		setProviderError(provider, void 0);
 		try {
-			const response = await callSubscriptionsAuth$1(rpc, "login", { provider });
+			const response = await callSubscriptionsAuth(rpc, "login", { provider });
 			if (typeof response.authorizeUrl === "string" && response.authorizeUrl === "") {
 				await refresh();
 				return;
 			}
 			if (typeof response.authorizeUrl !== "string") throw new SubscriptionsAuthError(t("loginMissingUrl"));
-			window.open(response.authorizeUrl, "_blank", "noopener");
 			if (!mountedRef.current) return;
 			setStatuses((prev) => ({
 				...prev,
@@ -533,6 +587,14 @@ function SubscriptionsSection(props) {
 					loggedIn: false
 				}
 			}));
+			if (typeof response.userCode === "string" && response.userCode.length > 0) setDeviceCodes((prev) => ({
+				...prev,
+				[provider]: {
+					userCode: response.userCode,
+					verificationUrl: response.authorizeUrl
+				}
+			}));
+			else window.open(response.authorizeUrl, "_blank", "noopener");
 			startPolling(provider);
 		} catch (error) {
 			setProviderError(provider, messageOf(error));
@@ -547,7 +609,7 @@ function SubscriptionsSection(props) {
 		if (rpc === void 0) return;
 		stopPolling(provider);
 		try {
-			await callSubscriptionsAuth$1(rpc, "cancel", { provider });
+			await callSubscriptionsAuth(rpc, "cancel", { provider });
 		} catch (error) {
 			setProviderError(provider, messageOf(error));
 		}
@@ -564,7 +626,7 @@ function SubscriptionsSection(props) {
 		if (input === "") return;
 		setProviderError(provider, void 0);
 		try {
-			await callSubscriptionsAuth$1(rpc, "manual", {
+			await callSubscriptionsAuth(rpc, "manual", {
 				provider,
 				input
 			});
@@ -587,7 +649,7 @@ function SubscriptionsSection(props) {
 		if (!window.confirm(t("logoutConfirm", { provider: name }))) return;
 		setProviderError(provider, void 0);
 		try {
-			await callSubscriptionsAuth$1(rpc, "logout", { provider });
+			await callSubscriptionsAuth(rpc, "logout", { provider });
 		} catch (error) {
 			setProviderError(provider, messageOf(error));
 		}
@@ -598,52 +660,62 @@ function SubscriptionsSection(props) {
 		setProviderError,
 		refresh
 	]);
+	const copyDeviceCode = (0, react.useCallback)((provider, userCode) => {
+		navigator.clipboard?.writeText(userCode).then(() => {
+			if (!mountedRef.current) return;
+			setCopiedCode(provider);
+			setTimeout(() => {
+				if (mountedRef.current) setCopiedCode((current) => current === provider ? void 0 : current);
+			}, 1500);
+		}).catch(() => void 0);
+	}, []);
 	if (rpc === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		style: styles$2.intro,
+		style: styles$4.intro,
 		children: t("unavailable")
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: styles$2.section,
+		style: styles$4.section,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			style: styles$2.intro,
+			style: styles$4.intro,
 			children: t("intro")
 		}), PROVIDERS.map(({ id, name }) => {
 			const status = statuses[id];
 			const busy = status?.busy === true;
+			const deviceCode = deviceCodes[id];
 			const usage = usages[id];
 			const usageError = usageErrors[id];
 			const showUsage = status?.loggedIn === true && usage?.supported !== false && (usage !== void 0 || usageError !== void 0 || usageLoading[id] === true);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: styles$2.card,
+				style: styles$4.card,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: styles$2.cardHeader,
+						style: styles$4.cardHeader,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-							...styles$2.dot,
+							...styles$4.dot,
 							background: dotColor(status)
 						} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: styles$2.name,
+							style: styles$4.name,
 							children: name
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						style: styles$2.statusLine,
+						style: styles$4.statusLine,
 						children: statusText(t, status)
 					}),
 					status?.detail !== void 0 && status.detail !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						style: styles$2.statusLine,
+						style: styles$4.statusLine,
 						children: status.detail
 					}),
 					errors[id] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						style: styles$2.errorLine,
+						style: styles$4.errorLine,
 						children: errors[id]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: styles$2.actions,
+						style: styles$4.actions,
 						children: [
 							!busy && status?.loggedIn !== true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								style: styles$2.button,
+								style: styles$4.button,
 								onClick: () => {
 									login(id);
 								},
@@ -651,7 +723,7 @@ function SubscriptionsSection(props) {
 							}),
 							busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								style: styles$2.button,
+								style: styles$4.button,
 								onClick: () => {
 									cancel(id);
 								},
@@ -659,7 +731,7 @@ function SubscriptionsSection(props) {
 							}),
 							status?.loggedIn === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								style: styles$2.button,
+								style: styles$4.button,
 								onClick: () => {
 									logout(id, name);
 								},
@@ -668,23 +740,23 @@ function SubscriptionsSection(props) {
 						]
 					}),
 					showUsage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: styles$2.usage,
+						style: styles$4.usage,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								style: styles$2.usageHeader,
+								style: styles$4.usageHeader,
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: styles$2.usageTitle,
+										style: styles$4.usageTitle,
 										children: t("usageTitle")
 									}),
 									usage?.plan !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: styles$2.usagePlan,
+										style: styles$4.usagePlan,
 										children: t("usagePlan", { plan: usage.plan })
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										style: {
-											...styles$2.usageRefresh,
+											...styles$4.usageRefresh,
 											...usageLoading[id] === true ? {
 												opacity: .5,
 												cursor: "default"
@@ -699,28 +771,28 @@ function SubscriptionsSection(props) {
 								]
 							}),
 							usage === void 0 && usageError === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								style: styles$2.statusLine,
+								style: styles$4.statusLine,
 								children: t("usageLoading")
 							}),
 							usageError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								style: styles$2.errorLine,
+								style: styles$4.errorLine,
 								children: t("usageError", { message: usageError })
 							}),
 							usage?.windows !== void 0 && usage.windows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								style: styles$2.statusLine,
+								style: styles$4.statusLine,
 								children: t("usageEmpty")
 							}),
 							(usage?.windows ?? []).map((window$1, index) => {
 								const percent = Math.min(100, Math.max(0, window$1.usedPercent));
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: styles$2.usageRow,
+									style: styles$4.usageRow,
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										style: styles$2.usageMeta,
+										style: styles$4.usageMeta,
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: usageWindowLabel(t, window$1) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [`${String(Math.round(percent))}%`, window$1.resetsAt !== void 0 && ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`] })]
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										style: styles$2.usageTrack,
+										style: styles$4.usageTrack,
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-											...styles$2.usageFill,
+											...styles$4.usageFill,
 											width: `${String(percent)}%`,
 											background: usageBarColor(percent)
 										} })
@@ -729,12 +801,43 @@ function SubscriptionsSection(props) {
 							})
 						]
 					}),
-					busy && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-						style: styles$2.manual,
+					busy && deviceCode !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles$4.deviceCode,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: styles$4.statusLine,
+								children: t("deviceCodePrompt")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: styles$4.deviceCodeText,
+								children: deviceCode.userCode
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: styles$4.actions,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									style: styles$4.button,
+									onClick: () => {
+										copyDeviceCode(id, deviceCode.userCode);
+									},
+									children: copiedCode === id ? t("deviceCodeCopied") : t("deviceCodeCopy")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									style: styles$4.button,
+									onClick: () => {
+										window.open(deviceCode.verificationUrl, "_blank", "noopener");
+									},
+									children: t("deviceCodeOpenPage")
+								})]
+							})
+						]
+					}),
+					busy && deviceCode === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+						style: styles$4.manual,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("manualSummary") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: styles$2.manualRow,
+							style: styles$4.manualRow,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								style: styles$2.manualInput,
+								style: styles$4.manualInput,
 								value: manualDrafts[id],
 								placeholder: t("manualPlaceholder"),
 								onChange: (event) => setManualDrafts((prev) => ({
@@ -743,7 +846,7 @@ function SubscriptionsSection(props) {
 								}))
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								style: styles$2.button,
+								style: styles$4.button,
 								onClick: () => {
 									submitManual(id);
 								},
@@ -757,6 +860,229 @@ function SubscriptionsSection(props) {
 	});
 }
 
+//#endregion
+//#region src/client/ImageGallery.tsx
+/** Display box for a lone image (platform rule): long edge 240px with the
+* rendered aspect ratio clamped to [0.25, 4] — the overflow is cropped by
+* `object-fit: cover` — and never upscaled past the image's natural size. The
+* crop anchor keeps the top of very tall images and the left of very wide
+* ones, where the informative content usually starts. */
+function singleFit(attachment) {
+	const natural = attachment.width / attachment.height;
+	const ratio = Math.min(4, Math.max(.25, natural));
+	const box = ratio >= 1 ? {
+		width: 240,
+		height: 240 / ratio
+	} : {
+		width: 240 * ratio,
+		height: 240
+	};
+	const scale = Math.min(1, attachment.width / box.width, attachment.height / box.height);
+	return {
+		width: Math.max(1, Math.round(box.width * scale)),
+		height: Math.max(1, Math.round(box.height * scale)),
+		objectPosition: natural < .25 ? "center top" : natural > 4 ? "left center" : "center"
+	};
+}
+const styles$3 = {
+	gallery: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: 8,
+		justifyContent: "flex-start"
+	},
+	frame: {
+		display: "grid",
+		placeItems: "center",
+		overflow: "hidden",
+		padding: 0,
+		border: "1px solid var(--dsw-alias-border-l2-darkmode-thin)",
+		borderRadius: 8,
+		background: "var(--dsw-alias-interactive-bg-hover-solid)",
+		cursor: "zoom-in"
+	},
+	tile: {
+		width: 64,
+		height: 64
+	},
+	img: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover",
+		display: "block"
+	},
+	loading: {
+		fontSize: 12,
+		color: "var(--dsw-alias-label-tertiary)",
+		padding: "0 8px"
+	},
+	error: {
+		fontSize: 12,
+		color: "var(--dsw-alias-state-error-primary)",
+		cursor: "pointer",
+		border: "1px solid var(--dsw-alias-border-l2-darkmode-thin)",
+		borderRadius: 8,
+		background: "transparent",
+		padding: "6px 10px"
+	},
+	overlay: {
+		position: "fixed",
+		inset: 0,
+		zIndex: 1e3,
+		display: "grid",
+		placeItems: "center",
+		background: "rgba(0, 0, 0, 0.72)",
+		padding: 24
+	},
+	overlayImg: {
+		maxWidth: "92vw",
+		maxHeight: "92vh",
+		objectFit: "contain",
+		borderRadius: 4
+	},
+	close: {
+		position: "absolute",
+		top: 12,
+		right: 12,
+		width: 32,
+		height: 32,
+		display: "grid",
+		placeItems: "center",
+		border: "none",
+		borderRadius: "50%",
+		cursor: "pointer",
+		background: "rgba(255, 255, 255, 0.16)",
+		color: "#fff",
+		fontSize: 16,
+		lineHeight: 1
+	}
+};
+/**
+* Full-viewport original-image preview: backdrop or close-control click and
+* Escape all dismiss; the image itself is inert so a click on it does not
+* fall through to the backdrop dismissal.
+*/
+function ImageLightbox({ src, alt, labels, onClose }) {
+	(0, react.useEffect)(() => {
+		const onKey = (event) => {
+			if (event.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+		};
+	}, [onClose]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "dialog",
+		"aria-label": labels.dialog,
+		style: styles$3.overlay,
+		onClick: onClose,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			alt,
+			style: styles$3.overlayImg,
+			onClick: (event) => {
+				event.stopPropagation();
+			}
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": labels.close,
+			style: styles$3.close,
+			onClick: onClose,
+			children: "×"
+		})]
+	});
+}
+/**
+* Compact history renderer with retryable loading and click-to-open original
+* preview. A lone image renders at its `singleFit` size; an image among
+* several renders as a fixed 64px square tile.
+*/
+function MessageImage({ attachment, load, variant, labels }) {
+	const [src, setSrc] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)(false);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [attempt, setAttempt] = (0, react.useState)(0);
+	const retry = (0, react.useCallback)(() => {
+		setAttempt((a) => a + 1);
+	}, []);
+	const close = (0, react.useCallback)(() => {
+		setOpen(false);
+	}, []);
+	const fit = (0, react.useMemo)(() => variant === "single" ? singleFit(attachment) : void 0, [attachment, variant]);
+	(0, react.useEffect)(() => {
+		let live = true;
+		setError(false);
+		setSrc(null);
+		load(attachment).then((url) => {
+			if (live) setSrc(url);
+		}).catch(() => {
+			if (live) setError(true);
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		attachment,
+		load,
+		attempt
+	]);
+	const label = attachment.name ?? labels.image;
+	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		style: styles$3.error,
+		onClick: retry,
+		children: labels.loadFailed
+	});
+	const box = fit === void 0 ? styles$3.tile : {
+		width: fit.width,
+		height: fit.height
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		style: {
+			...styles$3.frame,
+			...box
+		},
+		title: labels.open,
+		"aria-label": labels.openNamed(label),
+		onClick: () => {
+			if (src !== null) setOpen(true);
+		},
+		children: src === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: styles$3.loading,
+			children: labels.loading
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src,
+			alt: label,
+			style: {
+				...styles$3.img,
+				objectPosition: fit?.objectPosition
+			}
+		})
+	}), open && src !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageLightbox, {
+		src,
+		alt: label,
+		labels: labels.lightbox,
+		onClose: close
+	})] });
+}
+/** Wrapping image group: a lone image renders large, several render as 64px
+* square tiles (same rule as the platform gallery). */
+function ImageGallery({ images, load, labels }) {
+	if (images.length === 0) return null;
+	const variant = images.length === 1 ? "single" : "tile";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: styles$3.gallery,
+		children: images.map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageImage, {
+			attachment: image.attachment,
+			load,
+			variant,
+			labels
+		}, `${image.attachment.attachmentId}:${index}`))
+	});
+}
+
 //#endregion
 //#region src/client/ImageGenerateToolview.tsx
 /** Logical RPC channel served by the node half of this plugin. */
@@ -770,7 +1096,7 @@ const PROMPT_MAX_LENGTH$1 = 60;
 * @param payload - channel-owned request payload.
 * @returns the success value, cast by the caller to the endpoint's shape.
 */
-async function callSubscriptionsAuth(rpc, endpoint, payload) {
+async function callSubscriptionsAuth$1(rpc, endpoint, payload) {
 	const result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL$1, endpoint, payload);
 	if (!result.ok) throw new Error(result.error.message);
 	return result.value;
@@ -781,7 +1107,7 @@ async function callSubscriptionsAuth(rpc, endpoint, payload) {
 * @returns loader resolving an attachment ref to a data URL.
 */
 function createImageLoader(rpc) {
-	return (attachment) => callSubscriptionsAuth(rpc, "image", { ...attachment }).then((result) => `data:${result.mediaType};base64,${result.dataBase64}`);
+	return (attachment) => callSubscriptionsAuth$1(rpc, "image", { ...attachment }).then((result) => `data:${result.mediaType};base64,${result.dataBase64}`);
 }
 /**
 * English-dictionary fallback for a missing locale seat (standalone renders);
@@ -790,7 +1116,7 @@ function createImageLoader(rpc) {
 * @param params - `{name}` template params.
 * @returns the template with params substituted.
 */
-function fallbackTranslate$1(key, params) {
+function fallbackTranslate$2(key, params) {
 	let text = en[key];
 	for (const [name, value] of Object.entries(params ?? {})) text = text.replaceAll(`{${name}}`, String(value));
 	return text;
@@ -830,7 +1156,7 @@ function resultImages(block) {
 	for (const part of block.content) if (part.type === "image") images.push({ attachment: part.attachment });
 	return images;
 }
-const styles$1 = {
+const styles$2 = {
 	container: {
 		display: "flex",
 		flexDirection: "column",
@@ -884,7 +1210,7 @@ const styles$1 = {
 */
 function ImageGenerateToolview(props) {
 	const { block, load } = props;
-	const t = props.t ?? fallbackTranslate$1;
+	const t = props.t ?? fallbackTranslate$2;
 	if (block === void 0) return null;
 	const settled = "kind" in block;
 	const title = `image_generate: ${derivePrompt$1((settled ? block.call?.argsRaw : block.argsRaw) ?? "")}`;
@@ -902,34 +1228,33 @@ function ImageGenerateToolview(props) {
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: styles$1.container,
+		style: styles$2.container,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: styles$1.row,
+				style: styles$2.row,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: styles$1.icon,
+					style: styles$2.icon,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconSparkle16, { size: 14 })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: styles$1.title,
+					style: styles$2.title,
 					children: title
 				})]
 			}),
 			!settled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles$1.subtle,
+				style: styles$2.subtle,
 				children: t("generating")
 			}),
 			settled && block.isError && text !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles$1.error,
+				style: styles$2.error,
 				children: text.split("\n", 1)[0]
 			}),
-			settled && !block.isError && images.length > 0 && load !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_attachment.ImageGallery, {
+			settled && !block.isError && images.length > 0 && load !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageGallery, {
 				images,
 				load,
-				align: "start",
 				labels
 			}),
 			settled && !block.isError && images.length === 0 && text !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles$1.output,
+				style: styles$2.output,
 				children: text
 			})
 		]
@@ -958,7 +1283,7 @@ function createVideoLoader(rpc) {
 * English-dictionary fallback for a missing locale seat (standalone renders);
 * the framework always supplies the namespace-bound one.
 */
-function fallbackTranslate(key, params) {
+function fallbackTranslate$1(key, params) {
 	let text = en[key];
 	for (const [name, value] of Object.entries(params ?? {})) text = text.replaceAll(`{${name}}`, String(value));
 	return text;
@@ -1015,7 +1340,7 @@ function base64Bytes(dataBase64) {
 	for (let index = 0; index < binary.length; index++) bytes[index] = binary.charCodeAt(index);
 	return bytes;
 }
-const styles = {
+const styles$1 = {
 	container: {
 		display: "flex",
 		flexDirection: "column",
@@ -1076,7 +1401,7 @@ const styles = {
 */
 function VideoGenerateToolview(props) {
 	const { block, loadVideo } = props;
-	const t = props.t ?? fallbackTranslate;
+	const t = props.t ?? fallbackTranslate$1;
 	const settled = block !== void 0 && "kind" in block;
 	const isError = settled && block.isError;
 	const fileName = block !== void 0 && settled && !isError ? resolveFileName(block) : void 0;
@@ -1109,48 +1434,285 @@ function VideoGenerateToolview(props) {
 	const title = `video_generate: ${derivePrompt((settled ? block.call?.argsRaw : block.argsRaw) ?? "")}`;
 	const text = settled ? resultText(block) : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: styles.container,
+		style: styles$1.container,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: styles.row,
+				style: styles$1.row,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: styles.icon,
+					style: styles$1.icon,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconSparkle16, { size: 14 })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: styles.title,
+					style: styles$1.title,
 					children: title
 				})]
 			}),
 			!settled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles.subtle,
+				style: styles$1.subtle,
 				children: t("generatingVideo")
 			}),
 			settled && isError && text !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles.error,
+				style: styles$1.error,
 				children: text.split("\n", 1)[0]
 			}),
 			settled && !isError && fileName !== void 0 && load.phase === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles.subtle,
+				style: styles$1.subtle,
 				children: t("videoLoading")
 			}),
 			settled && !isError && fileName !== void 0 && load.phase === "failed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles.error,
+				style: styles$1.error,
 				children: t("videoLoadFailed", { message: load.message })
 			}),
 			settled && !isError && fileName !== void 0 && load.phase === "ready" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-				style: styles.video,
+				style: styles$1.video,
 				src: load.url,
 				controls: true,
 				preload: "metadata"
 			}),
 			settled && !isError && fileName === void 0 && text !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				style: styles.output,
+				style: styles$1.output,
 				children: text
 			})
 		]
 	});
 }
 
+//#endregion
+//#region src/client/SpeedSelect.tsx
+/**
+* The `loadSpeed` half of the inject face: the plugin's own speed state plus
+* the host's current model selection (the visibility gate). A model-RPC
+* failure throws rather than answering "hidden" — the caller keeps its last
+* known state, so a transient failure never locks the toggle away.
+*
+* `sessionId` is a plain string: slot and command contexts brand it through
+* different dsh-session copies, and only the API-client boundary needs one.
+*/
+function createSpeedLoader(connection, sessionId) {
+	return async () => {
+		const state = await callSubscriptionsAuth(connection.rpc, "speed", { sessionId });
+		const { result } = await connection.api.sessions.models({ sessionId });
+		if (!result.ok) throw new Error(`session.models failed: ${result.error.code}: ${result.error.message}`);
+		const current = result.value.current;
+		return {
+			visible: current !== null && current.provider === "codex" && state.fastModels.includes(current.model),
+			tier: state.tier
+		};
+	};
+}
+/** The `setSpeed` half of the inject face: boolean outcome for the component's busy state. */
+function createSpeedSetter(connection, sessionId) {
+	return (tier) => callSubscriptionsAuth(connection.rpc, "setSpeed", {
+		sessionId,
+		tier
+	}).then(() => true, () => false);
+}
+/** English-dictionary fallback for a missing inject `t` (standalone renders). */
+function fallbackTranslate(key) {
+	return en[key];
+}
+const TIERS = ["standard", "fast"];
+/**
+* The composer Speed control: a trigger reading `速度 · 快速`/`速度 · 标准`
+* that opens a two-row menu (standard/fast with descriptions, check mark on
+* the current tier). Mount and every open reload the host state so a model
+* switch made since the last open self-corrects.
+*/
+/** How often the control re-reads the host state (model switches arrive only by asking). */
+const POLL_INTERVAL_MS = 3e3;
+/**
+* The composer Speed control: a trigger reading `速度 · 快速`/`速度 · 标准`
+* that opens a two-row menu (standard/fast with descriptions, check mark on
+* the current tier). The host pushes nothing on a model switch, so the
+* control re-reads on a slow poll with a single-flight guard; a failed read
+* keeps the last known state, so a transient RPC failure can never lock the
+* toggle away (the earlier mount-only load had no recovery path).
+*/
+function SpeedSelect({ loadSpeed, setSpeed, t }) {
+	const translate = t ?? fallbackTranslate;
+	const [state, setState] = (0, react.useState)(null);
+	const [open, setOpen] = (0, react.useState)(false);
+	const [busy, setBusy] = (0, react.useState)(false);
+	const rootRef = (0, react.useRef)(null);
+	const loadRef = (0, react.useRef)(loadSpeed);
+	loadRef.current = loadSpeed;
+	(0, react.useEffect)(() => {
+		if (loadRef.current === void 0) return;
+		let cancelled = false;
+		let inflight = false;
+		const reload = () => {
+			const load = loadRef.current;
+			if (load === void 0 || inflight) return;
+			inflight = true;
+			load().then((loaded) => {
+				if (!cancelled) setState(loaded);
+			}, () => {}).finally(() => {
+				inflight = false;
+			});
+		};
+		reload();
+		const timer = setInterval(reload, POLL_INTERVAL_MS);
+		return () => {
+			cancelled = true;
+			clearInterval(timer);
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const closeOutside = (event) => {
+			if (!rootRef.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", closeOutside);
+		return () => {
+			document.removeEventListener("mousedown", closeOutside);
+		};
+	}, [open]);
+	if (loadSpeed === void 0 || setSpeed === void 0 || state === null || !state.visible) return null;
+	const choose = (tier) => {
+		if (busy) return;
+		if (tier === state.tier) {
+			setOpen(false);
+			return;
+		}
+		setBusy(true);
+		setSpeed(tier).then((ok) => {
+			setBusy(false);
+			if (ok) {
+				setState({
+					visible: true,
+					tier
+				});
+				setOpen(false);
+			}
+		});
+	};
+	const show = () => {
+		setOpen(true);
+		const load = loadRef.current;
+		if (load === void 0) return;
+		load().then(setState, () => {});
+	};
+	const tierName = (tier) => translate(tier === "fast" ? "speedFast" : "speedStandard");
+	const tierDescription = (tier) => translate(tier === "fast" ? "speedFastDescription" : "speedStandardDescription");
+	const triggerLabel = `${translate("speed")} · ${tierName(state.tier)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		style: styles.root,
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && open) {
+				event.preventDefault();
+				setOpen(false);
+			}
+		},
+		children: [open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: styles.menu,
+			role: "menu",
+			"aria-label": translate("speed"),
+			children: TIERS.map((tier) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "menuitemradio",
+				"aria-checked": tier === state.tier,
+				style: styles.item,
+				disabled: busy,
+				onClick: () => {
+					choose(tier);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: styles.itemCheck,
+					children: tier === state.tier ? "✓" : ""
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: styles.itemText,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.itemName,
+						children: tierName(tier)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: styles.itemDescription,
+						children: tierDescription(tier)
+					})]
+				})]
+			}, tier))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			style: styles.trigger,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			title: triggerLabel,
+			disabled: busy,
+			onClick: () => {
+				if (open) setOpen(false);
+				else show();
+			},
+			children: triggerLabel
+		})]
+	});
+}
+const styles = {
+	root: {
+		position: "relative",
+		display: "inline-flex"
+	},
+	trigger: {
+		border: "1px solid var(--dsw-alias-border-l2)",
+		borderRadius: 8,
+		background: "transparent",
+		color: "var(--dsw-alias-label-secondary)",
+		font: "inherit",
+		fontSize: 12,
+		lineHeight: "18px",
+		padding: "2px 8px",
+		cursor: "pointer",
+		whiteSpace: "nowrap"
+	},
+	menu: {
+		position: "absolute",
+		bottom: "100%",
+		right: 0,
+		marginBottom: 4,
+		minWidth: 180,
+		padding: 4,
+		zIndex: 20,
+		background: "var(--dsw-alias-bg-layer-1)",
+		border: "1px solid var(--dsw-alias-border-l2)",
+		borderRadius: 8,
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	item: {
+		display: "flex",
+		alignItems: "flex-start",
+		gap: 6,
+		width: "100%",
+		border: "none",
+		borderRadius: 6,
+		background: "transparent",
+		padding: "6px 8px",
+		cursor: "pointer",
+		font: "inherit",
+		textAlign: "left"
+	},
+	itemCheck: {
+		width: 14,
+		flexShrink: 0,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	itemText: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	itemName: {
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-primary)"
+	},
+	itemDescription: {
+		fontSize: 11,
+		lineHeight: "16px",
+		color: "var(--dsw-alias-label-tertiary)"
+	}
+};
+
 //#endregion
 //#region src/client/index.ts
 /** Dictionary namespace owned by this plugin. */
@@ -1203,6 +1765,46 @@ function apply(ctx) {
 		locale: NS,
 		inject: videoToolviewInjected
 	}, VideoGenerateToolview));
+	ctx.slots.inject("conversation.input.right", () => ctx.slots.register({
+		name: "conversation.input.right",
+		id: "codex-speed",
+		order: 0,
+		locale: NS,
+		inject: (sessionId) => ({
+			loadSpeed: createSpeedLoader(connection, sessionId),
+			setSpeed: createSpeedSetter(connection, sessionId)
+		})
+	}, SpeedSelect));
+	ctx.inject(["commandUi"], (scope) => {
+		const command = scope.get("commandUi");
+		scope.effect(() => command.register({
+			name: "fast",
+			description: t("commandFast"),
+			available: () => true,
+			ui: {
+				kind: "popupSelect",
+				options: async (session) => {
+					const state = await createSpeedLoader(connection, session.sessionId)();
+					if (!state.visible) throw new Error(t("commandFastUnavailable"));
+					return [{
+						id: "standard",
+						label: t("speedStandard"),
+						detail: t("speedStandardDescription")
+					}, {
+						id: "fast",
+						label: t("speedFast"),
+						detail: t("speedFastDescription")
+					}].map((option) => ({
+						...option,
+						active: option.id === state.tier
+					}));
+				},
+				onSelect: async (option, session) => {
+					await createSpeedSetter(connection, session.sessionId)(option.id);
+				}
+			}
+		}), "dsh-plugin-subscriptions: /fast contribution");
+	});
 }
 
 //#endregion