dsh-coding-subscription-oauth 0.5.8 → 0.6.0

package/src/client/dshClientAdapter.ts

@@ -0,0 +1,109 @@
+/** Capability adapter for the unstable DSH browser client surface. */
+
+import type {} from "@deepseek-ai/dsh-client-locale/client";
+import type { ClientContext } from "@deepseek-ai/dsh-client-runtime/client";
+import type {} from "@deepseek-ai/dsh-client-ui-slots";
+
+export interface DshClientCompatibilityDiagnostic {
+	readonly id: string;
+	readonly level: "warning" | "error";
+	readonly message: string;
+	readonly expected: "function";
+	readonly actual: string;
+}
+
+function hasSlots(context: unknown): context is ClientContext {
+	if (typeof context !== "object" || context === null) return false;
+	const slots = (context as { readonly slots?: unknown }).slots;
+	return (
+		typeof slots === "object" &&
+		slots !== null &&
+		typeof (slots as { readonly inject?: unknown }).inject === "function" &&
+		typeof (slots as { readonly register?: unknown }).register === "function"
+	);
+}
+
+export interface DshClientAdapter {
+	readonly context: ClientContext;
+	readonly locale: ClientContext["locale"];
+	readonly effect: ClientContext["effect"];
+	diagnostics(): readonly DshClientCompatibilityDiagnostic[];
+	assertCompatible(): void;
+	installSlots(options: {
+		readonly register: (context: ClientContext) => () => void;
+		readonly mountFallback: () => () => void;
+	}): void;
+}
+
+type InstallSlotsOptions = Parameters<DshClientAdapter["installSlots"]>[0];
+
+export function createDshClientAdapter(context: ClientContext): DshClientAdapter {
+	const candidate = context as unknown as Record<string, unknown>;
+	const locale = candidate["locale"] as Record<string, unknown> | undefined;
+	const checks: Array<[string, unknown, DshClientCompatibilityDiagnostic["level"]]> = [
+		["client.effect", candidate["effect"], "error"],
+		["client.locale.register", locale?.["register"], "error"],
+		["client.locale.bind", locale?.["bind"], "error"],
+		["client.slots.inject", (candidate["slots"] as Record<string, unknown> | undefined)?.["inject"], "warning"],
+	];
+	const diagnostics = checks.flatMap(([id, value, level]): DshClientCompatibilityDiagnostic[] =>
+		typeof value === "function"
+			? []
+			: [
+					{
+						id,
+						level,
+						message:
+							level === "warning"
+								? `${id} is unavailable; the independent settings entry remains active`
+								: `${id} is unavailable in the DSH client runtime`,
+						expected: "function",
+						actual: typeof value,
+					},
+				],
+	);
+	const frozenDiagnostics = Object.freeze([...diagnostics]);
+	return Object.freeze({
+		context,
+		locale: context.locale,
+		effect: context.effect,
+		diagnostics: () => frozenDiagnostics,
+		assertCompatible() {
+			const errors = diagnostics.filter((item) => item.level === "error");
+			if (errors.length > 0) {
+				throw new Error(`incompatible DSH client API: ${errors.map((item) => item.id).join(", ")}`);
+			}
+		},
+		installSlots(options: InstallSlotsOptions) {
+			let disposed = false;
+			let installed = false;
+			let disposeCurrent: () => void = () => undefined;
+			const install = (slotContext: ClientContext): void => {
+				if (disposed || installed) return;
+				installed = true;
+				disposeCurrent();
+				disposeCurrent = options.register(slotContext);
+			};
+
+			if (hasSlots(context)) {
+				install(context);
+			} else {
+				disposeCurrent = options.mountFallback();
+				const inject = candidate["inject"];
+				if (typeof inject === "function") {
+					(inject as ClientContext["inject"]).call(context, ["slots"], (slotContext) => {
+						if (hasSlots(slotContext)) install(slotContext);
+					});
+				}
+			}
+
+			context.effect(
+				() => () => {
+					disposed = true;
+					disposeCurrent();
+				},
+				"dsh-coding-subscription-oauth: independent settings entry",
+			);
+		},
+	});
+}

package/src/client/gatewaySnippets.ts

@@ -1,36 +1,37 @@
-/** 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}`,
-	};
-}
+/** Quick-setup code snippets for the local API gateway. */
+
+export type GatewaySnippetId = "curl" | "python" | "ide";
+
+export function buildGatewaySnippets(
+	openAiBaseUrl: string,
+	anthropicBaseUrl: string,
+	apiKeyPlaceholder: string,
+	model = "<gateway-model>",
+): 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":"${model}","messages":[{"role":"user","content":"Hello"}]}'`,
+		python: `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${openAiBaseUrl}",
+    api_key="${key}",
+)
+
+response = client.chat.completions.create(
+    model="${model}",
+    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/index.tsx

@@ -1,37 +1,156 @@
-/** Browser half: coding-subscription account management inside dsh Settings. */
-
-import type {} from "@deepseek-ai/dsh-client-locale/client";
-import type { ClientContext } from "@deepseek-ai/dsh-client-runtime/client";
-import type {} from "@deepseek-ai/dsh-client-ui-settings/client";
-import type {} from "@deepseek-ai/dsh-client-ui-slots";
-import type { GrokBuildSettingsInjected } from "./GrokBuildSettings.tsx";
-import { GrokBuildSettings } from "./GrokBuildSettings.tsx";
-import type { GrokBuildSettingsKey } from "./locales.ts";
-import { en, zh } from "./locales.ts";
-
-declare module "@deepseek-ai/dsh-client-ui-slots" {
-	interface LocaleNamespaceMap {
-		"settings.grok-build": GrokBuildSettingsKey;
-	}
-}
-
-export const name = "dsh-grok-build-client";
-export const inject = ["slots", "locale"];
-
-export function apply(ctx: ClientContext): void {
-	const namespace = "settings.grok-build";
-	ctx.effect(() => ctx.locale.register(namespace, { zh, en }), "dsh-coding-subscription-oauth: settings copy");
-	const t = ctx.locale.bind(namespace) as GrokBuildSettingsInjected["t"];
-	ctx.slots.inject("settings.section", () =>
-		ctx.slots.register(
-			{
-				name: "settings.section",
-				id: "grok-build",
-				order: 17,
-				label: () => t("nav"),
-				inject: (): GrokBuildSettingsInjected => ({ t }),
-			},
-			GrokBuildSettings,
-		),
-	);
-}
+/** Browser half: coding-subscription account management inside dsh Settings. */
+
+import type {} from "@deepseek-ai/dsh-client-locale/client";
+import type { ClientContext } from "@deepseek-ai/dsh-client-runtime/client";
+import type {} from "@deepseek-ai/dsh-client-ui-settings/client";
+import type {} from "@deepseek-ai/dsh-client-ui-slots";
+import { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { createDshClientAdapter } from "./dshClientAdapter.ts";
+import type { GrokBuildSettingsInjected } from "./GrokBuildSettings.tsx";
+import { GrokBuildSettings } from "./GrokBuildSettings.tsx";
+import type { GrokBuildSettingsKey } from "./locales.ts";
+import { en, zh } from "./locales.ts";
+
+declare module "@deepseek-ai/dsh-client-ui-slots" {
+	interface LocaleNamespaceMap {
+		"settings.grok-build": GrokBuildSettingsKey;
+	}
+}
+
+export const name = "dsh-grok-build-client";
+export const inject = ["locale"];
+
+function IndependentSettingsEntry({ t }: { readonly t: GrokBuildSettingsInjected["t"] }) {
+	const [open, setOpen] = useState(false);
+	const trigger = useRef<HTMLButtonElement>(null);
+	const closeButton = useRef<HTMLButtonElement>(null);
+	const dialog = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (!open) return;
+		closeButton.current?.focus();
+		const host = dialog.current?.closest("[data-dsh-coding-oauth]")?.parentElement;
+		const inertSiblings =
+			host === undefined || host === null
+				? []
+				: [...document.body.children]
+						.filter((element) => element !== host)
+						.map((element) => ({
+							element,
+							hadInert: element.hasAttribute("inert"),
+							value: element.getAttribute("inert"),
+						}));
+		for (const { element } of inertSiblings) element.setAttribute("inert", "");
+		const focusable = (): HTMLElement[] =>
+			[
+				...(dialog.current?.querySelectorAll<HTMLElement>(
+					'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+				) ?? []),
+			].filter((element) => element.getClientRects().length > 0);
+		const closeOnEscape = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") setOpen(false);
+			if (event.key !== "Tab") return;
+			const targets = focusable();
+			if (targets.length === 0) {
+				event.preventDefault();
+				dialog.current?.focus();
+				return;
+			}
+			const first = targets[0]!;
+			const last = targets.at(-1)!;
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", closeOnEscape);
+		return () => {
+			document.removeEventListener("keydown", closeOnEscape);
+			for (const { element, hadInert, value } of inertSiblings) {
+				if (hadInert) element.setAttribute("inert", value ?? "");
+				else element.removeAttribute("inert");
+			}
+			if (trigger.current?.isConnected) trigger.current.focus();
+		};
+	}, [open]);
+	return (
+		<div data-dsh-coding-oauth>
+			<button
+				ref={trigger}
+				type="button"
+				style={{ position: "fixed", right: 16, bottom: 16, zIndex: 30, padding: "10px 14px" }}
+				onClick={() => setOpen(true)}
+			>
+				{t("nav")}
+			</button>
+			{open ? (
+				<div
+					ref={dialog}
+					role="dialog"
+					aria-modal="true"
+					aria-labelledby="coding-oauth-independent-title"
+					tabIndex={-1}
+					style={{
+						position: "fixed",
+						inset: 0,
+						zIndex: 31,
+						overflow: "auto",
+						padding: 20,
+						background: "var(--dsw-alias-bg-layer-1)",
+					}}
+				>
+					<div style={{ width: "min(780px, 100%)", margin: "0 auto" }}>
+						<div style={{ display: "flex", justifyContent: "space-between", gap: 12, marginBottom: 12 }}>
+							<h2 id="coding-oauth-independent-title" style={{ margin: 0 }}>
+								{t("title")}
+							</h2>
+							<button ref={closeButton} type="button" onClick={() => setOpen(false)} aria-label={t("cancel")}>
+								×
+							</button>
+						</div>
+						<GrokBuildSettings t={t} />
+					</div>
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+function mountIndependentEntry(t: GrokBuildSettingsInjected["t"]): () => void {
+	if (typeof document === "undefined") return () => undefined;
+	const host = document.createElement("div");
+	document.body.append(host);
+	const root = createRoot(host);
+	root.render(<IndependentSettingsEntry t={t} />);
+	return () => {
+		root.unmount();
+		host.remove();
+	};
+}
+
+export function apply(ctx: ClientContext): void {
+	const dsh = createDshClientAdapter(ctx);
+	dsh.assertCompatible();
+	const namespace = "settings.grok-build";
+	dsh.effect(() => dsh.locale.register(namespace, { zh, en }), "dsh-coding-subscription-oauth: settings copy");
+	const t = dsh.locale.bind(namespace) as GrokBuildSettingsInjected["t"];
+	dsh.installSlots({
+		mountFallback: () => mountIndependentEntry(t),
+		register: (slotContext) =>
+			slotContext.slots.inject("settings.section", () =>
+				slotContext.slots.register(
+					{
+						name: "settings.section",
+						id: "grok-build",
+						order: 17,
+						label: () => t("nav"),
+						inject: (): GrokBuildSettingsInjected => ({ t }),
+					},
+					GrokBuildSettings,
+				),
+			),
+	});
+}