dsh-coding-subscription-oauth 0.5.4 → 0.5.6

package/src/client/components/ProviderCard.tsx

@@ -1,5 +1,6 @@
 /** Single provider account card for the Accounts tab. */
 
+import { useMemo, useState } from "react";
 import { SOURCE_REASON_KEY } from "../constants.ts";
 import { methodLabel, orderedLoginMethods, shouldShowPerCardSourceReason } from "../display.ts";
 import { formatEpoch, modelFields, usageHasVisibleFields } from "../parsers.ts";
@@ -9,17 +10,18 @@ import {
 	cardStyle,
 	checkRowStyle,
 	codeStyle,
-	dotStyle,
-	errorStyle,
+	compactButtonStyle,
 	hintStyle,
 	inputStyle,
-	linkStyle,
 	listStyle,
 	monoStyle,
 	nestedStyle,
 	primaryButtonStyle,
 	rowStyle,
-	statusStyle,
+	stepActiveStyle,
+	stepNumberActiveStyle,
+	stepNumberStyle,
+	stepRowStyle,
 	titleStyle,
 } from "../styles.ts";
 import type {
@@ -31,6 +33,9 @@ import type {
 	SourceStatus,
 	UsageView,
 } from "../types.ts";
+import { Badge } from "./Badge.tsx";
+import { CopyButton } from "./CopyButton.tsx";
+import { ProgressBar } from "./ProgressBar.tsx";
 
 export interface ProviderCardProps {
 	t: GrokBuildSettingsInjected["t"];
@@ -57,6 +62,88 @@ export interface ProviderCardProps {
 	onSaveModels: (selected: string[]) => void;
 }
 
+function SignInSteps({
+	t,
+	activeMethod,
+	userCode,
+	url,
+	popupBlocked,
+}: {
+	t: GrokBuildSettingsInjected["t"];
+	activeMethod: LoginMethod;
+	userCode: string | undefined;
+	url: string | undefined;
+	popupBlocked: boolean;
+}) {
+	const hasCode = userCode !== undefined && userCode.length > 0;
+	const hasUrl = url !== undefined && url.length > 0;
+	const needsPaste = activeMethod !== "device";
+
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+			<div style={hasUrl ? stepActiveStyle : stepRowStyle}>
+				<span style={hasUrl ? stepNumberActiveStyle : stepNumberStyle} aria-hidden="true">
+					1
+				</span>
+				<span>{t("signInStepOpen")}</span>
+			</div>
+			{hasUrl ? (
+				<div style={{ display: "flex", flexWrap: "wrap", gap: 8, paddingLeft: 32 }}>
+					<a href={url} target="_blank" rel="noreferrer" style={primaryButtonStyle}>
+						{t("openAuthUrl")}
+					</a>
+					<CopyButton text={url} idleLabel={t("copy")} copiedLabel={t("copied")} failedLabel={t("copyFailed")} />
+				</div>
+			) : null}
+			{popupBlocked && hasUrl ? <p style={hintStyle}>{t("popupBlocked")}</p> : null}
+			{hasCode ? (
+				<>
+					<div style={stepActiveStyle}>
+						<span style={stepNumberActiveStyle} aria-hidden="true">
+							2
+						</span>
+						<span>{t("signInStepCode")}</span>
+					</div>
+					<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, paddingLeft: 32 }}>
+						<span style={codeStyle}>{userCode}</span>
+						<CopyButton
+							text={userCode}
+							idleLabel={t("copyUserCode")}
+							copiedLabel={t("copied")}
+							failedLabel={t("copyFailed")}
+							primary
+						/>
+					</div>
+				</>
+			) : null}
+			<div style={stepActiveStyle}>
+				<span style={stepNumberActiveStyle} aria-hidden="true">
+					{hasCode ? 3 : 2}
+				</span>
+				<span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+					<span
+						aria-hidden="true"
+						style={{
+							width: 14,
+							height: 14,
+							border: "2px solid var(--dsw-alias-brand-primary, #1677ff)",
+							borderTopColor: "transparent",
+							borderRadius: "50%",
+							animation: "dsh-coding-oauth-spin 0.8s linear infinite",
+						}}
+					/>
+					{t("signInStepWait")}
+				</span>
+			</div>
+			{needsPaste ? (
+				<div style={{ display: "flex", flexDirection: "column", gap: 8, paddingLeft: 32 }}>
+					<p style={bodyStyle}>{t(activeMethod === "browser" ? "pasteBrowserCodeHint" : "pasteCodeHint")}</p>
+				</div>
+			) : null}
+		</div>
+	);
+}
+
 export function ProviderCard({
 	t,
 	definition,
@@ -81,7 +168,13 @@ export function ProviderCard({
 	onPreviewSource,
 	onSaveModels,
 }: ProviderCardProps) {
+	const [showAltMethods, setShowAltMethods] = useState(false);
+	const [modelFilter, setModelFilter] = useState("");
+
 	const ordered = orderedLoginMethods(definition, remote);
+	const primaryMethod: LoginMethod = ordered[0] ?? definition.recommended;
+	const altMethods = ordered.filter((method) => method !== primaryMethod);
+
 	const statusLabel =
 		providerStatus.status === "signed-in"
 			? t("signedIn")
@@ -90,10 +183,17 @@ export function ProviderCard({
 				: providerStatus.status === "error"
 					? t("requestFailed")
 					: t("signedOut");
-	const activeMethod = providerStatus.status === "signing-in" ? providerStatus.method : ordered[0];
+	const activeMethod = providerStatus.status === "signing-in" ? providerStatus.method : primaryMethod;
 	const { available, selected } = modelFields(providerStatus);
 	const grokProviderStatus = definition.slug === "grok" ? (providerStatus as GrokStatus) : undefined;
 	const showSourceReason = shouldShowPerCardSourceReason(source);
+
+	const filteredModels = useMemo(() => {
+		const query = modelFilter.trim().toLowerCase();
+		if (query.length === 0) return available;
+		return available.filter((id) => id.toLowerCase().includes(query));
+	}, [available, modelFilter]);
+
 	const usagePercent =
 		definition.slug === "codex" && showUsage
 			? usage?.individualRemainingPercent === undefined
@@ -121,10 +221,7 @@ export function ProviderCard({
 						</>
 					)}
 				</div>
-				<div style={statusStyle} role="status">
-					<span aria-hidden="true" style={dotStyle(providerStatus.status)} />
-					<span>{statusLabel}</span>
-				</div>
+				<Badge label={statusLabel} providerStatus={providerStatus.status} />
 			</div>
 			<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
 				{providerStatus.status === "signed-in" ? (
@@ -143,40 +240,76 @@ export function ProviderCard({
 					</>
 				) : providerStatus.status === "signing-in" ? (
 					<>
-						{ordered
-							.filter((method) => method !== activeMethod)
-							.map((method) => (
-								<button
-									key={method}
-									type="button"
-									style={buttonStyle}
-									disabled={busy}
-									onClick={() => {
-										onSignIn(method);
-									}}
-								>
-									{methodLabel(method, t, { remote, primary: method === ordered[0] })}
-								</button>
-							))}
 						<button type="button" style={buttonStyle} disabled={busy} onClick={onCancelLogin}>
 							{t("cancelLogin")}
 						</button>
+						{altMethods.length > 0 ? (
+							<button
+								type="button"
+								style={compactButtonStyle}
+								disabled={busy}
+								onClick={() => {
+									setShowAltMethods((current) => !current);
+								}}
+							>
+								{showAltMethods ? t("hideOtherLoginMethods") : t("otherLoginMethods")}
+							</button>
+						) : null}
+						{showAltMethods
+							? altMethods.map((method) => (
+									<button
+										key={method}
+										type="button"
+										style={compactButtonStyle}
+										disabled={busy}
+										onClick={() => {
+											onSignIn(method);
+										}}
+									>
+										{methodLabel(method, t, { remote, primary: false })}
+									</button>
+								))
+							: null}
 					</>
 				) : (
 					<>
-						{ordered.map((method, index) => (
+						<button
+							type="button"
+							style={primaryButtonStyle}
+							disabled={busy}
+							onClick={() => {
+								onSignIn(primaryMethod);
+							}}
+						>
+							{busy ? t("working") : methodLabel(primaryMethod, t, { remote, primary: true })}
+						</button>
+						{altMethods.length > 0 ? (
 							<button
-								key={method}
 								type="button"
-								style={index === 0 ? primaryButtonStyle : buttonStyle}
+								style={compactButtonStyle}
 								disabled={busy}
 								onClick={() => {
-									onSignIn(method);
+									setShowAltMethods((current) => !current);
 								}}
 							>
-								{busy ? t("working") : methodLabel(method, t, { remote, primary: index === 0 })}
+								{showAltMethods ? t("hideOtherLoginMethods") : t("otherLoginMethods")}
 							</button>
-						))}
+						) : null}
+						{showAltMethods
+							? altMethods.map((method) => (
+									<button
+										key={method}
+										type="button"
+										style={compactButtonStyle}
+										disabled={busy}
+										onClick={() => {
+											onSignIn(method);
+										}}
+									>
+										{methodLabel(method, t, { remote, primary: false })}
+									</button>
+								))
+							: null}
 						{source?.available === true ? (
 							<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onPreviewSource}>
 								{t("sourcesPullCopy")}
@@ -187,23 +320,20 @@ export function ProviderCard({
 					</>
 				)}
 			</div>
-			{providerStatus.status === "error" ? <p style={errorStyle}>{providerStatus.message}</p> : null}
-			{providerStatus.status === "signing-in" && providerStatus.userCode !== undefined ? (
-				<p style={bodyStyle}>
-					{t("userCode")} <span style={codeStyle}>{providerStatus.userCode}</span>
-				</p>
+			{providerStatus.status === "error" ? (
+				<p style={{ ...bodyStyle, color: "var(--dsw-alias-state-error-primary)" }}>{providerStatus.message}</p>
 			) : null}
-			{providerStatus.status === "signing-in" && providerStatus.url !== undefined ? (
-				<p style={bodyStyle}>
-					{popupBlocked ? t("popupBlocked") : t("openUrl")}{" "}
-					<a href={providerStatus.url} target="_blank" rel="noreferrer" style={linkStyle}>
-						{providerStatus.url}
-					</a>
-				</p>
+			{providerStatus.status === "signing-in" ? (
+				<SignInSteps
+					t={t}
+					activeMethod={activeMethod}
+					userCode={providerStatus.userCode}
+					url={providerStatus.url}
+					popupBlocked={popupBlocked}
+				/>
 			) : null}
 			{providerStatus.status === "signing-in" && activeMethod !== "device" ? (
 				<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-					<p style={bodyStyle}>{t(activeMethod === "browser" ? "pasteBrowserCodeHint" : "pasteCodeHint")}</p>
 					<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
 						<input
 							style={{ ...inputStyle, flex: "1 1 360px" }}
@@ -235,17 +365,49 @@ export function ProviderCard({
 				<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
 					<div style={rowStyle}>
 						<h4 style={{ ...titleStyle, fontSize: 14 }}>{t("models")}</h4>
-						<button
-							type="button"
-							style={buttonStyle}
-							disabled={busy}
-							onClick={() => {
-								onSaveModels([]);
-							}}
-						>
-							{t("selectAll")}
-						</button>
+						<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+							<button
+								type="button"
+								style={compactButtonStyle}
+								disabled={busy}
+								onClick={() => {
+									onSaveModels([]);
+								}}
+							>
+								{t("deselectAll")}
+							</button>
+							<button
+								type="button"
+								style={compactButtonStyle}
+								disabled={busy}
+								onClick={() => {
+									onSaveModels([...available]);
+								}}
+							>
+								{t("selectAll")}
+							</button>
+							<button
+								type="button"
+								style={compactButtonStyle}
+								disabled={busy}
+								onClick={() => {
+									onSaveModels(available.length > 0 ? [available[0]!] : []);
+								}}
+							>
+								{t("resetModelsDefault")}
+							</button>
+						</div>
 					</div>
+					<input
+						type="search"
+						style={inputStyle}
+						value={modelFilter}
+						placeholder={t("modelFilterPlaceholder")}
+						disabled={busy}
+						onChange={(event) => {
+							setModelFilter(event.target.value);
+						}}
+					/>
 					{grokProviderStatus?.status === "signed-in" ? (
 						<p style={bodyStyle}>
 							{grokProviderStatus.catalogSource === "live"
@@ -259,7 +421,7 @@ export function ProviderCard({
 						{t("modelHint")} <span style={monoStyle}>{definition.route}/&lt;id&gt;</span>
 					</p>
 					<ul style={listStyle}>
-						{available.map((id) => {
+						{filteredModels.map((id) => {
 							const checked = selected.includes(id);
 							return (
 								<li key={id}>
@@ -281,14 +443,15 @@ export function ProviderCard({
 							);
 						})}
 					</ul>
+					{filteredModels.length === 0 ? <p style={hintStyle}>{t("modelFilterPlaceholder")}</p> : null}
 					{grokProviderStatus?.status === "signed-in" && grokProviderStatus.catalogError !== undefined ? (
-						<p style={errorStyle}>{t("catalogError")}</p>
+						<p style={{ ...bodyStyle, color: "var(--dsw-alias-state-error-primary)" }}>{t("catalogError")}</p>
 					) : null}
 					{definition.slug === "codex" && showUsage ? (
 						<div style={nestedStyle}>
 							<p style={{ ...bodyStyle, color: "var(--dsw-alias-label-primary)" }}>{t("usageTitle")}</p>
 							{usageError === undefined ? null : (
-								<p style={errorStyle} role="alert">
+								<p style={{ ...bodyStyle, color: "var(--dsw-alias-state-error-primary)" }} role="alert">
 									{usageError}
 								</p>
 							)}
@@ -299,16 +462,33 @@ export function ProviderCard({
 							) : (
 								<>
 									{fetchedAt === undefined ? null : <p style={hintStyle}>{t("usageFetchedAt", { time: fetchedAt })}</p>}
+									{usagePercent !== undefined ? (
+										<ProgressBar
+											value={usagePercent}
+											label={t("usageRateLimit")}
+											meta={t("usageUsed", { value: `${String(usagePercent)}%` })}
+										/>
+									) : null}
 									{usage.rateLimits.map((limit) => {
-										const resetsAt = formatEpoch(limit.windows[0]?.resetsAt);
+										const window = limit.windows[0];
+										const used = window?.usedPercent;
+										const resetsAt = formatEpoch(window?.resetsAt);
 										return (
-											<p key={limit.id} style={hintStyle}>
-												{limit.name ?? t("usageRateLimit")}
-												{limit.windows[0]?.usedPercent === undefined
-													? ""
-													: ` · ${t("usageUsed", { value: `${String(limit.windows[0].usedPercent)}%` })}`}
-												{resetsAt === undefined ? "" : ` · ${t("usageResets", { time: resetsAt })}`}
-											</p>
+											<div key={limit.id} style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+												{used === undefined ? (
+													<p style={hintStyle}>{limit.name ?? t("usageRateLimit")}</p>
+												) : (
+													<ProgressBar
+														value={used}
+														label={limit.name ?? t("usageRateLimit")}
+														meta={
+															resetsAt === undefined
+																? t("usageUsed", { value: `${String(used)}%` })
+																: `${t("usageUsed", { value: `${String(used)}%` })} · ${t("usageResets", { time: resetsAt })}`
+														}
+													/>
+												)}
+											</div>
 										);
 									})}
 								</>

package/src/client/components/SettingsTabs.tsx

@@ -1,17 +1,25 @@
-/** Accessible tablist for Coding OAuth settings. */
+/** Accessible segmented tablist for Coding OAuth settings. */
 
 import type { KeyboardEvent } from "react";
 import { SETTINGS_TABS } from "../constants.ts";
-import { tabButtonActiveStyle, tabButtonStyle, tabNavStyle } from "../styles.ts";
+import { segmentedNavStyle, segmentedTabActiveStyle, segmentedTabStyle } from "../styles.ts";
 import type { GrokBuildSettingsInjected, SettingsTabId } from "../types.ts";
 
+export interface SettingsTabHint {
+	id: SettingsTabId;
+	suffix?: string;
+}
+
 export interface SettingsTabsProps {
 	t: GrokBuildSettingsInjected["t"];
 	activeTab: SettingsTabId;
 	onChange: (tab: SettingsTabId) => void;
+	hints?: readonly SettingsTabHint[];
 }
 
-export function SettingsTabs({ t, activeTab, onChange }: SettingsTabsProps) {
+export function SettingsTabs({ t, activeTab, onChange, hints }: SettingsTabsProps) {
+	const hintFor = (id: SettingsTabId): string | undefined => hints?.find((entry) => entry.id === id)?.suffix;
+
 	const focusTab = (index: number): void => {
 		const tab = SETTINGS_TABS[index];
 		if (tab === undefined) return;
@@ -39,9 +47,11 @@ export function SettingsTabs({ t, activeTab, onChange }: SettingsTabsProps) {
 	};
 
 	return (
-		<div role="tablist" aria-label={t("title")} style={tabNavStyle} onKeyDown={onKeyDown}>
+		<div role="tablist" aria-label={t("title")} style={segmentedNavStyle} onKeyDown={onKeyDown}>
 			{SETTINGS_TABS.map((tab) => {
 				const selected = activeTab === tab.id;
+				const suffix = hintFor(tab.id);
+				const label = suffix === undefined ? t(tab.label) : `${t(tab.label)} (${suffix})`;
 				return (
 					<button
 						key={tab.id}
@@ -51,12 +61,12 @@ export function SettingsTabs({ t, activeTab, onChange }: SettingsTabsProps) {
 						aria-selected={selected}
 						aria-controls={`coding-oauth-panel-${tab.id}`}
 						tabIndex={selected ? 0 : -1}
-						style={selected ? tabButtonActiveStyle : tabButtonStyle}
+						style={selected ? segmentedTabActiveStyle : segmentedTabStyle}
 						onClick={() => {
 							onChange(tab.id);
 						}}
 					>
-						{t(tab.label)}
+						{label}
 					</button>
 				);
 			})}

package/src/client/components/ToggleSwitch.tsx

@@ -0,0 +1,60 @@
+/** Accessible toggle switch replacing native checkboxes for capability settings. */
+
+import type { CSSProperties } from "react";
+import { TRANSITION } from "../styles.ts";
+
+export interface ToggleSwitchProps {
+	checked: boolean;
+	disabled?: boolean;
+	onChange: (checked: boolean) => void;
+	/** Accessible label (visually hidden when label prop is rendered externally). */
+	ariaLabel?: string;
+	id?: string;
+}
+
+const trackStyle = (checked: boolean, disabled: boolean): CSSProperties => ({
+	position: "relative",
+	width: 40,
+	height: 22,
+	borderRadius: 11,
+	flex: "0 0 auto",
+	background: checked
+		? "var(--dsw-alias-brand-primary, #315fc7)"
+		: "var(--dsw-alias-border-l4, rgba(127, 127, 127, 0.45))",
+	opacity: disabled ? 0.5 : 1,
+	cursor: disabled ? "not-allowed" : "pointer",
+	transition: TRANSITION,
+	border: "none",
+	padding: 0,
+});
+
+const thumbStyle = (checked: boolean): CSSProperties => ({
+	position: "absolute",
+	top: 2,
+	left: checked ? 20 : 2,
+	width: 18,
+	height: 18,
+	borderRadius: "50%",
+	background: "#ffffff",
+	boxShadow: "0 1px 3px rgba(0, 0, 0, 0.25)",
+	transition: TRANSITION,
+});
+
+export function ToggleSwitch({ checked, disabled = false, onChange, ariaLabel, id }: ToggleSwitchProps) {
+	return (
+		<button
+			id={id}
+			type="button"
+			role="switch"
+			aria-checked={checked}
+			aria-label={ariaLabel}
+			disabled={disabled}
+			style={trackStyle(checked, disabled)}
+			onClick={() => {
+				if (!disabled) onChange(!checked);
+			}}
+		>
+			<span aria-hidden="true" style={thumbStyle(checked)} />
+		</button>
+	);
+}

package/src/client/constants.ts

@@ -203,4 +203,4 @@ export const CONSUMED_PREVIEW_CODES = new Set([
 	"unsafe_destination",
 ]);
 
-export const PLUGIN_VERSION = "0.5.4";
+export const PLUGIN_VERSION = "0.5.6";

package/src/client/gatewaySnippets.ts

@@ -0,0 +1,36 @@
+/** Quick-setup code snippets for the local API gateway. */
+
+export type GatewaySnippetId = "curl" | "python" | "ide";
+
+export function buildGatewaySnippets(
+	openAiBaseUrl: string,
+	anthropicBaseUrl: string,
+	apiKeyPlaceholder: string,
+): Record<GatewaySnippetId, string> {
+	const key = apiKeyPlaceholder.length > 0 ? apiKeyPlaceholder : "<your-gateway-key>";
+	return {
+		curl: `curl ${openAiBaseUrl}/chat/completions \\
+  -H "Authorization: Bearer ${key}" \\
+  -H "Content-Type: application/json" \\
+  -d '{"model":"codex-oauth/gpt-4.1","messages":[{"role":"user","content":"Hello"}]}'`,
+		python: `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${openAiBaseUrl}",
+    api_key="${key}",
+)
+
+response = client.chat.completions.create(
+    model="codex-oauth/gpt-4.1",
+    messages=[{"role": "user", "content": "Hello"}],
+)
+print(response.choices[0].message.content)`,
+		ide: `# OpenAI-compatible client
+base_url: ${openAiBaseUrl}
+api_key: ${key}
+
+# Anthropic-compatible client
+base_url: ${anthropicBaseUrl}
+api_key: ${key}`,
+	};
+}

package/src/client/locales.ts

@@ -228,6 +228,23 @@ export const en = {
 	pluginVersion: "Plugin version {version}",
 	aboutDocsHint:
 		"See the plugin README and INSTALL docs in the repository for setup, supported providers, and gateway safety notes.",
+	otherLoginMethods: "Other sign-in methods",
+	hideOtherLoginMethods: "Hide other methods",
+	signInStepOpen: "Open the provider authorization page",
+	signInStepCode: "Enter the device code when prompted",
+	signInStepWait: "Waiting for authorization to complete",
+	copyUserCode: "Copy code",
+	openAuthUrl: "Open authorization page",
+	modelFilterPlaceholder: "Filter models…",
+	deselectAll: "Hide all",
+	resetModelsDefault: "Reset selection",
+	requiresCodexImages: "Turn on Codex images first.",
+	gatewaySnippetsTitle: "Quick setup snippets",
+	gatewaySnippetCurl: "cURL",
+	gatewaySnippetPython: "Python (OpenAI SDK)",
+	gatewaySnippetIde: "IDE / client",
+	tabAccountsSignedIn: "{count} signed in",
+	tabGatewayActive: "Running",
 };
 
 export type GrokBuildSettingsKey = keyof typeof en;
@@ -450,4 +467,21 @@ export const zh: { [Key in GrokBuildSettingsKey]: string } = {
 		"在远程 DSH 主机上，打开此处 Settings，对每个供应商使用设备码登录。在能访问供应商的任意浏览器完成验证码，再回到聊天选择对应路由模型。",
 	pluginVersion: "插件版本 {version}",
 	aboutDocsHint: "仓库中的 README 与 INSTALL 文档介绍了安装步骤、支持的供应商以及网关安全注意事项。",
+	otherLoginMethods: "其他登录方式",
+	hideOtherLoginMethods: "收起其他方式",
+	signInStepOpen: "打开供应商授权页面",
+	signInStepCode: "在提示处输入设备码",
+	signInStepWait: "等待授权完成",
+	copyUserCode: "复制设备码",
+	openAuthUrl: "打开授权页面",
+	modelFilterPlaceholder: "筛选模型…",
+	deselectAll: "全部隐藏",
+	resetModelsDefault: "重置选择",
+	requiresCodexImages: "需先开启 Codex 出图。",
+	gatewaySnippetsTitle: "快速配置片段",
+	gatewaySnippetCurl: "cURL",
+	gatewaySnippetPython: "Python (OpenAI SDK)",
+	gatewaySnippetIde: "IDE / 客户端",
+	tabAccountsSignedIn: "已登录 {count} 个",
+	tabGatewayActive: "运行中",
 };

package/src/client/microStyles.ts

@@ -0,0 +1,33 @@
+/** Injects global keyframes once for skeleton pulse and spinner animations. */
+
+const STYLE_ID = "dsh-coding-oauth-micro-styles";
+
+const CSS = `
+@keyframes dsh-coding-oauth-skeleton-pulse {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+@keyframes dsh-coding-oauth-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes dsh-coding-oauth-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;
+
+let injected = false;
+
+export function ensureMicroStyles(): void {
+	if (injected || typeof document === "undefined") return;
+	if (document.getElementById(STYLE_ID) !== null) {
+		injected = true;
+		return;
+	}
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = CSS;
+	document.head.appendChild(style);
+	injected = true;
+}