dsh-coding-subscription-oauth 0.5.6 → 0.5.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-coding-subscription-oauth",
   "description": "DeepSeek Harness coding-subscription OAuth: SuperGrok/Grok Build, ChatGPT Plus Codex, Kimi Code, Claude Code. Fixes AUTH API key is invalid, INVALID_REPLAY_STATE, grok-4.6 xhigh, Kimi Bearer vs x-api-key.",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/scripts/release.mjs

@@ -73,6 +73,10 @@ if (releaseVersions[0] !== manifest.version) {
 	fail(`top CHANGELOG release (${releaseVersions[0] ?? "missing"}) does not match package version ${manifest.version}`);
 }
 if (!readme.includes(manifest.version)) fail(`README.md does not mention ${manifest.version}`);
+const installDoc = await readFile(join(root, "INSTALL.md"), "utf8");
+if (!installDoc.includes(manifest.version)) fail(`INSTALL.md does not mention ${manifest.version}`);
+const readmeZh = await readFile(join(root, "README.zh-CN.md"), "utf8");
+if (!readmeZh.includes(manifest.version)) fail(`README.zh-CN.md does not mention ${manifest.version}`);
 
 if (mode === "pack") run("pnpm", ["run", "release:build"]);
 else run("pnpm", ["run", "release:verify"]);

package/src/client/components/AboutTab.tsx

@@ -1,9 +1,11 @@
 /** About tab: terms, remote help, and plugin version. */
 
 import { PLUGIN_VERSION } from "../constants.ts";
-import { bodyStyle, cardStyle, hintStyle, warningStyle } from "../styles.ts";
+import { bodyStyle, cardStyle, hintStyle, linkStyle, titleStyle, warningStyle } from "../styles.ts";
 import type { GrokBuildSettingsInjected } from "../types.ts";
 
+const README_URL = "https://github.com/lninghaha/dsh-coding-subscription-oauth#readme";
+
 export interface AboutTabProps {
 	t: GrokBuildSettingsInjected["t"];
 }
@@ -11,10 +13,18 @@ export interface AboutTabProps {
 export function AboutTab({ t }: AboutTabProps) {
 	return (
 		<section style={cardStyle} aria-labelledby="coding-oauth-about-title">
-			<p style={warningStyle}>{t("termsWarning")}</p>
+			<h3 id="coding-oauth-about-title" style={{ ...titleStyle, fontSize: 16 }}>
+				{t("aboutTitle")}
+			</h3>
+			<p style={{ ...warningStyle, marginTop: 12 }}>{t("termsWarning")}</p>
 			<p style={{ ...bodyStyle, marginTop: 12 }}>{t("remoteLoginHelp")}</p>
 			<p style={{ ...hintStyle, marginTop: 12 }}>{t("pluginVersion", { version: PLUGIN_VERSION })}</p>
 			<p style={{ ...hintStyle, marginTop: 8 }}>{t("aboutDocsHint")}</p>
+			<p style={{ marginTop: 8 }}>
+				<a href={README_URL} target="_blank" rel="noreferrer" style={linkStyle}>
+					{t("aboutDocsLink")}
+				</a>
+			</p>
 		</section>
 	);
 }

package/src/client/components/GatewayTab.tsx

@@ -1,6 +1,6 @@
 /** Local API gateway settings tab. */
 
-import { useMemo, useState } from "react";
+import { type KeyboardEvent, useMemo, useState } from "react";
 import { GATEWAY_PORT_MAX, GATEWAY_PORT_MIN } from "../constants.ts";
 import { buildGatewaySnippets, type GatewaySnippetId } from "../gatewaySnippets.ts";
 import { formatGatewayBaseUrl, parseGatewayPort, randomGatewayPort } from "../parsers.ts";
@@ -8,7 +8,6 @@ import {
 	bodyStyle,
 	buttonStyle,
 	cardStyle,
-	checkRowStyle,
 	copyRowStyle,
 	dotStyle,
 	errorStyle,
@@ -29,6 +28,7 @@ import {
 import type { CopyField, GatewayView, GrokBuildSettingsInjected } from "../types.ts";
 import { Badge } from "./Badge.tsx";
 import { CopyButton } from "./CopyButton.tsx";
+import { ToggleSwitch } from "./ToggleSwitch.tsx";
 
 export interface GatewayTabProps {
 	t: GrokBuildSettingsInjected["t"];
@@ -79,7 +79,6 @@ export function GatewayTab({
 	onPortDraftChange,
 	onApplyPort,
 	onRandomPort,
-	onCopy,
 	onCopyKey,
 	onToggleKeyVisible,
 	onRotateConfirm,
@@ -111,6 +110,34 @@ export function GatewayTab({
 		return idle ?? t("copy");
 	};
 
+	const focusSnippetTab = (index: number): void => {
+		const tab = SNIPPET_TABS[index];
+		if (tab === undefined) return;
+		setActiveSnippet(tab.id);
+		document.getElementById(`coding-oauth-snippet-tab-${tab.id}`)?.focus();
+	};
+
+	const onSnippetKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		const current = SNIPPET_TABS.findIndex((tab) => tab.id === activeSnippet);
+		if (current < 0) return;
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			event.preventDefault();
+			focusSnippetTab((current + 1) % SNIPPET_TABS.length);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			event.preventDefault();
+			focusSnippetTab((current - 1 + SNIPPET_TABS.length) % SNIPPET_TABS.length);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			focusSnippetTab(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focusSnippetTab(SNIPPET_TABS.length - 1);
+		}
+	};
+
+	const openAiUrl = gateway === undefined ? "" : `${formatGatewayBaseUrl(gateway.bind, gateway.port)}/v1`;
+	const anthropicUrl = gateway === undefined ? "" : formatGatewayBaseUrl(gateway.bind, gateway.port);
+
 	return (
 		<section style={cardStyle} aria-labelledby="coding-oauth-gateway-title">
 			<div>
@@ -138,7 +165,11 @@ export function GatewayTab({
 						{t("gatewayLoading")}
 					</div>
 				</div>
-			) : gateway === undefined ? null : (
+			) : gateway === undefined ? (
+				<p style={hintStyle} role="status">
+					{t("gatewayLoadFailed")}
+				</p>
+			) : (
 				<div style={nestedStyle}>
 					<Badge
 						label={gateway.running ? t("gatewayRunning") : t("gatewayStopped")}
@@ -172,13 +203,23 @@ export function GatewayTab({
 							</div>
 						</div>
 					) : (
-						<label style={checkRowStyle}>
-							<input
-								type="checkbox"
+						<label
+							htmlFor="coding-oauth-gateway-enabled"
+							style={{
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between",
+								gap: 12,
+								fontSize: 14,
+								color: "var(--dsw-alias-label-primary)",
+							}}
+						>
+							<span>{t("gatewayEnabled")}</span>
+							<ToggleSwitch
+								id="coding-oauth-gateway-enabled"
 								checked={gateway.enabled}
 								disabled={gatewayBusy}
-								onChange={(event) => {
-									const enabled = event.target.checked;
+								onChange={(enabled) => {
 									if (enabled) {
 										setEnableConfirm(true);
 										return;
@@ -186,7 +227,6 @@ export function GatewayTab({
 									onEnabledChange(false);
 								}}
 							/>
-							<span>{t("gatewayEnabled")}</span>
 						</label>
 					)}
 					<div>
@@ -261,34 +301,26 @@ export function GatewayTab({
 					<p style={copyRowStyle}>
 						<span style={hintStyle}>
 							{t("gatewayOpenAiUrl")}
-							<span style={{ display: "block", ...monoStyle }}>
-								{`${formatGatewayBaseUrl(gateway.bind, gateway.port)}/v1`}
-							</span>
+							<span style={{ display: "block", ...monoStyle }}>{openAiUrl}</span>
 						</span>
-						<button
-							type="button"
-							style={primaryButtonStyle}
-							onClick={() => {
-								onCopy("openai", `${formatGatewayBaseUrl(gateway.bind, gateway.port)}/v1`);
-							}}
-						>
-							{copyLabel("openai")}
-						</button>
+						<CopyButton
+							text={openAiUrl}
+							idleLabel={t("copy")}
+							copiedLabel={t("copied")}
+							failedLabel={t("copyFailed")}
+						/>
 					</p>
 					<p style={copyRowStyle}>
 						<span style={hintStyle}>
 							{t("gatewayAnthropicUrl")}
-							<span style={{ display: "block", ...monoStyle }}>{formatGatewayBaseUrl(gateway.bind, gateway.port)}</span>
+							<span style={{ display: "block", ...monoStyle }}>{anthropicUrl}</span>
 						</span>
-						<button
-							type="button"
-							style={buttonStyle}
-							onClick={() => {
-								onCopy("anthropic", formatGatewayBaseUrl(gateway.bind, gateway.port));
-							}}
-						>
-							{copyLabel("anthropic")}
-						</button>
+						<CopyButton
+							text={anthropicUrl}
+							idleLabel={t("copy")}
+							copiedLabel={t("copied")}
+							failedLabel={t("copyFailed")}
+						/>
 					</p>
 					<p style={copyRowStyle}>
 						<span style={hintStyle}>
@@ -310,15 +342,23 @@ export function GatewayTab({
 					{gateway.enabled && snippets !== undefined ? (
 						<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
 							<h4 style={{ ...titleStyle, fontSize: 14 }}>{t("gatewaySnippetsTitle")}</h4>
-							<div role="tablist" aria-label={t("gatewaySnippetsTitle")} style={segmentedNavStyle}>
+							<div
+								role="tablist"
+								aria-label={t("gatewaySnippetsTitle")}
+								style={segmentedNavStyle}
+								onKeyDown={onSnippetKeyDown}
+							>
 								{SNIPPET_TABS.map((tab) => {
 									const selected = activeSnippet === tab.id;
 									return (
 										<button
 											key={tab.id}
+											id={`coding-oauth-snippet-tab-${tab.id}`}
 											type="button"
 											role="tab"
 											aria-selected={selected}
+											aria-controls="coding-oauth-snippet-panel"
+											tabIndex={selected ? 0 : -1}
 											style={selected ? segmentedTabActiveStyle : segmentedTabStyle}
 											onClick={() => {
 												setActiveSnippet(tab.id);
@@ -329,13 +369,18 @@ export function GatewayTab({
 									);
 								})}
 							</div>
-							<code style={snippetStyle}>{snippets[activeSnippet]}</code>
+							<div
+								id="coding-oauth-snippet-panel"
+								role="tabpanel"
+								aria-labelledby={`coding-oauth-snippet-tab-${activeSnippet}`}
+							>
+								<code style={snippetStyle}>{snippets[activeSnippet]}</code>
+							</div>
 							<CopyButton
 								text={snippets[activeSnippet]}
 								idleLabel={t("copy")}
 								copiedLabel={t("copied")}
 								failedLabel={t("copyFailed")}
-								primary
 							/>
 						</div>
 					) : null}
@@ -344,7 +389,7 @@ export function GatewayTab({
 							<p style={bodyStyle}>{t("gatewayRotateConfirm")}</p>
 							<p style={hintStyle}>{t("gatewayRotateConfirmHint")}</p>
 							<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
-								<button type="button" style={buttonStyle} disabled={gatewayBusy} onClick={onRotate}>
+								<button type="button" style={primaryButtonStyle} disabled={gatewayBusy} onClick={onRotate}>
 									{t("gatewayRotateConfirmAction")}
 								</button>
 								<button type="button" style={buttonStyle} disabled={gatewayBusy} onClick={onRotateCancel}>

package/src/client/components/ProgressBar.tsx

@@ -11,8 +11,9 @@ export interface ProgressBarProps {
 
 function barColor(percent: number): string {
 	if (percent >= 90) return "var(--dsw-alias-state-error-primary, #d92d20)";
-	if (percent >= 75) return "var(--dsw-alias-state-warning-primary, #e06c00)";
-	return "var(--dsw-alias-brand-primary, #1677ff)";
+	if (percent >= 75) return "var(--dsw-alias-state-warn-primary, #e06c00)";
+	// Prefer info fill over brand-primary: dark theme inverts brand-primary to near-white.
+	return "var(--dsw-alias-button-info-fill, var(--dsw-static-deepseek-500, #4f6ef7))";
 }
 
 export function ProgressBar({ value, label, meta }: ProgressBarProps) {

package/src/client/components/ToggleSwitch.tsx

@@ -19,7 +19,7 @@ const trackStyle = (checked: boolean, disabled: boolean): CSSProperties => ({
 	borderRadius: 11,
 	flex: "0 0 auto",
 	background: checked
-		? "var(--dsw-alias-brand-primary, #315fc7)"
+		? "var(--dsw-alias-button-primary-fill)"
 		: "var(--dsw-alias-border-l4, rgba(127, 127, 127, 0.45))",
 	opacity: disabled ? 0.5 : 1,
 	cursor: disabled ? "not-allowed" : "pointer",
@@ -35,7 +35,9 @@ const thumbStyle = (checked: boolean): CSSProperties => ({
 	width: 18,
 	height: 18,
 	borderRadius: "50%",
-	background: "#ffffff",
+	// Match DSH primary fill/foreground pairing so the thumb stays visible when
+	// dark theme inverts brand-primary to near-white.
+	background: checked ? "var(--dsw-alias-label-primary-foreground)" : "var(--dsw-alias-button-elevated-fill)",
 	boxShadow: "0 1px 3px rgba(0, 0, 0, 0.25)",
 	transition: TRANSITION,
 });

package/src/client/constants.ts

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

package/src/client/locales.ts

@@ -226,8 +226,10 @@ export const en = {
 	remoteLoginHelp:
 		"On a remote DSH host, open Settings here and use device-code sign-in for each provider. Complete the code on any browser that can reach the provider, then return to chat and pick the provider route model.",
 	pluginVersion: "Plugin version {version}",
+	aboutTitle: "About",
 	aboutDocsHint:
 		"See the plugin README and INSTALL docs in the repository for setup, supported providers, and gateway safety notes.",
+	aboutDocsLink: "Open README on GitHub",
 	otherLoginMethods: "Other sign-in methods",
 	hideOtherLoginMethods: "Hide other methods",
 	signInStepOpen: "Open the provider authorization page",
@@ -466,7 +468,9 @@ export const zh: { [Key in GrokBuildSettingsKey]: string } = {
 	remoteLoginHelp:
 		"在远程 DSH 主机上，打开此处 Settings，对每个供应商使用设备码登录。在能访问供应商的任意浏览器完成验证码，再回到聊天选择对应路由模型。",
 	pluginVersion: "插件版本 {version}",
+	aboutTitle: "关于",
 	aboutDocsHint: "仓库中的 README 与 INSTALL 文档介绍了安装步骤、支持的供应商以及网关安全注意事项。",
+	aboutDocsLink: "在 GitHub 打开 README",
 	otherLoginMethods: "其他登录方式",
 	hideOtherLoginMethods: "收起其他方式",
 	signInStepOpen: "打开供应商授权页面",

package/src/client/styles.ts

@@ -61,9 +61,11 @@ export const buttonStyle: CSSProperties = {
 };
 export const primaryButtonStyle: CSSProperties = {
 	...buttonStyle,
-	borderColor: "var(--dsw-alias-brand-primary, #315fc7)",
-	background: "var(--dsw-alias-brand-primary, #315fc7)",
-	color: "#ffffff",
+	// DSH dark theme flips brand-primary to near-white; use the button/foreground
+	// pair so primary CTAs stay readable in both light and dark mode.
+	border: "none",
+	background: "var(--dsw-alias-button-primary-fill)",
+	color: "var(--dsw-alias-label-primary-foreground)",
 	boxShadow: "0 1px 3px rgba(0, 0, 0, 0.28)",
 	fontWeight: 600,
 };
@@ -80,7 +82,9 @@ export const warningStyle: CSSProperties = {
 	...bodyStyle,
 	padding: "10px 12px",
 	borderRadius: 8,
-	background: "var(--dsw-alias-bg-layer-1)",
+	border: "1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary, #e06c00) 35%, transparent)",
+	background: "color-mix(in srgb, var(--dsw-alias-state-warn-primary, #e06c00) 10%, transparent)",
+	color: "var(--dsw-alias-label-primary)",
 };
 export const tipStyle: CSSProperties = {
 	...bodyStyle,
@@ -234,9 +238,9 @@ export const stepNumberStyle: CSSProperties = {
 };
 export const stepNumberActiveStyle: CSSProperties = {
 	...stepNumberStyle,
-	background: "var(--dsw-alias-brand-primary, #315fc7)",
-	borderColor: "var(--dsw-alias-brand-primary, #315fc7)",
-	color: "#ffffff",
+	background: "var(--dsw-alias-button-primary-fill)",
+	borderColor: "var(--dsw-alias-button-primary-fill)",
+	color: "var(--dsw-alias-label-primary-foreground)",
 };
 
 export type StatusTone = "success" | "error" | "warning" | "info" | "neutral";
@@ -248,11 +252,15 @@ export function statusToneColor(tone: StatusTone): string {
 		case "error":
 			return "var(--dsw-alias-state-error-primary, #d92d20)";
 		case "warning":
-			return "var(--dsw-alias-state-warning-primary, #e06c00)";
+			// DSH token is `state-warn-*` (not `state-warning-*`).
+			return "var(--dsw-alias-state-warn-primary, #e06c00)";
 		case "info":
+			// Accent/text color (not a solid fill + white text pair).
 			return "var(--dsw-alias-brand-primary, #1677ff)";
 		default:
-			return "var(--dsw-alias-label-dimmed, #9aa0a6)";
+			// Prefer tertiary over dimmed: dimmed is near-invisible on light cards
+			// and too dark on dark cards.
+			return "var(--dsw-alias-label-tertiary, #81858c)";
 	}
 }
 
@@ -279,14 +287,14 @@ export function dotStyle(
 	installed = true,
 ): CSSProperties {
 	const color = !installed
-		? "var(--dsw-alias-label-dimmed, #9aa0a6)"
+		? "var(--dsw-alias-label-tertiary, #81858c)"
 		: status === "signed-in" || status === "available"
 			? "var(--dsw-alias-state-success-primary, #22a06b)"
 			: status === "error"
 				? "var(--dsw-alias-state-error-primary, #d92d20)"
 				: status === "signing-in" || status === "loading"
 					? "var(--dsw-alias-brand-primary, #1677ff)"
-					: "var(--dsw-alias-label-dimmed, #9aa0a6)";
+					: "var(--dsw-alias-label-tertiary, #81858c)";
 	return { width: 9, height: 9, borderRadius: "50%", flex: "0 0 auto", background: color };
 }
 
@@ -297,10 +305,3 @@ export function providerStatusTone(status: ProviderStatus["status"], installed =
 	if (status === "signing-in") return "info";
 	return "neutral";
 }
-
-/** @deprecated Use segmentedTabStyle / segmentedTabActiveStyle */
-export const tabNavStyle: CSSProperties = segmentedNavStyle;
-/** @deprecated Use segmentedTabStyle */
-export const tabButtonStyle: CSSProperties = segmentedTabStyle;
-/** @deprecated Use segmentedTabActiveStyle */
-export const tabButtonActiveStyle: CSSProperties = segmentedTabActiveStyle;