dsh-coding-subscription-oauth 0.5.2 → 0.5.4

package/src/client/components/GatewayTab.tsx

@@ -0,0 +1,287 @@
+/** Local API gateway settings tab. */
+
+import { useState } from "react";
+import { GATEWAY_PORT_MAX, GATEWAY_PORT_MIN } from "../constants.ts";
+import { formatGatewayBaseUrl, parseGatewayPort, randomGatewayPort } from "../parsers.ts";
+import {
+	bodyStyle,
+	buttonStyle,
+	cardStyle,
+	checkRowStyle,
+	copyRowStyle,
+	dotStyle,
+	errorStyle,
+	hintStyle,
+	inputStyle,
+	monoStyle,
+	nestedStyle,
+	primaryButtonStyle,
+	skeletonStyle,
+	statusStyle,
+	titleStyle,
+	warningStyle,
+} from "../styles.ts";
+import type { CopyField, GatewayView, GrokBuildSettingsInjected } from "../types.ts";
+
+export interface GatewayTabProps {
+	t: GrokBuildSettingsInjected["t"];
+	gateway: GatewayView | undefined;
+	gatewayError: string | undefined;
+	gatewayBusy: boolean;
+	gatewayOnceKey: string | undefined;
+	gatewayKeyVisible: boolean;
+	gatewayRotateConfirm: boolean;
+	gatewayRevealError: string | undefined;
+	portDraft: string;
+	copiedField: CopyField | undefined;
+	copyFailedField: CopyField | undefined;
+	onEnabledChange: (enabled: boolean) => void;
+	onPortDraftChange: (value: string) => void;
+	onApplyPort: () => void;
+	onRandomPort: (port: number) => void;
+	onCopy: (field: CopyField, text: string) => void;
+	onCopyKey: () => void;
+	onToggleKeyVisible: () => void;
+	onRotateConfirm: () => void;
+	onRotateCancel: () => void;
+	onRotate: () => void;
+}
+
+export function GatewayTab({
+	t,
+	gateway,
+	gatewayError,
+	gatewayBusy,
+	gatewayOnceKey,
+	gatewayKeyVisible,
+	gatewayRotateConfirm,
+	gatewayRevealError,
+	portDraft,
+	copiedField,
+	copyFailedField,
+	onEnabledChange,
+	onPortDraftChange,
+	onApplyPort,
+	onRandomPort,
+	onCopy,
+	onCopyKey,
+	onToggleKeyVisible,
+	onRotateConfirm,
+	onRotateCancel,
+	onRotate,
+}: GatewayTabProps) {
+	const [enableConfirm, setEnableConfirm] = useState(false);
+
+	const copyLabel = (field: CopyField, idle?: string): string => {
+		if (copyFailedField === field) return t("copyFailed");
+		if (copiedField === field) return t("copied");
+		return idle ?? t("copy");
+	};
+
+	return (
+		<section style={cardStyle} aria-labelledby="coding-oauth-gateway-title">
+			<div>
+				<h3 id="coding-oauth-gateway-title" style={{ ...titleStyle, fontSize: 16 }}>
+					{t("gatewayTitle")}
+				</h3>
+				<p style={{ ...bodyStyle, marginTop: 4 }}>{t("gatewayIntro")}</p>
+				<p style={{ ...warningStyle, marginTop: 8 }}>{t("gatewayWarning")}</p>
+				<p style={{ ...hintStyle, marginTop: 8 }}>{t("gatewayLoopbackHint")}</p>
+			</div>
+			{gatewayError === undefined ? null : (
+				<p style={errorStyle} role="alert">
+					{gatewayError}
+				</p>
+			)}
+			{gatewayRevealError === undefined ? null : (
+				<p style={errorStyle} role="alert">
+					{gatewayRevealError}
+				</p>
+			)}
+			{gateway === undefined && gatewayError === undefined ? (
+				<div style={skeletonStyle} role="status" aria-busy="true">
+					<div style={statusStyle}>
+						<span aria-hidden="true" style={dotStyle("loading")} />
+						{t("gatewayLoading")}
+					</div>
+				</div>
+			) : gateway === undefined ? null : (
+				<div style={nestedStyle}>
+					<p style={statusStyle} role="status">
+						<span aria-hidden="true" style={dotStyle(gateway.running ? "available" : "unavailable")} />
+						<span>{gateway.running ? t("gatewayRunning") : t("gatewayStopped")}</span>
+					</p>
+					{enableConfirm ? (
+						<div style={nestedStyle}>
+							<p style={bodyStyle}>{t("gatewayEnableConfirm")}</p>
+							<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+								<button
+									type="button"
+									style={primaryButtonStyle}
+									disabled={gatewayBusy}
+									onClick={() => {
+										setEnableConfirm(false);
+										onEnabledChange(true);
+									}}
+								>
+									{t("gatewayEnableConfirmAction")}
+								</button>
+								<button
+									type="button"
+									style={buttonStyle}
+									disabled={gatewayBusy}
+									onClick={() => {
+										setEnableConfirm(false);
+									}}
+								>
+									{t("gatewayEnableCancel")}
+								</button>
+							</div>
+						</div>
+					) : (
+						<label style={checkRowStyle}>
+							<input
+								type="checkbox"
+								checked={gateway.enabled}
+								disabled={gatewayBusy}
+								onChange={(event) => {
+									const enabled = event.target.checked;
+									if (enabled) {
+										setEnableConfirm(true);
+										return;
+									}
+									onEnabledChange(false);
+								}}
+							/>
+							<span>{t("gatewayEnabled")}</span>
+						</label>
+					)}
+					<div>
+						<label
+							htmlFor="coding-oauth-gateway-port"
+							style={{ ...bodyStyle, color: "var(--dsw-alias-label-primary)" }}
+						>
+							{t("gatewayPort")}
+						</label>
+						<p id="coding-oauth-gateway-port-hint" style={hintStyle}>
+							{t("gatewayPortHint")}
+						</p>
+						<div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }}>
+							<input
+								id="coding-oauth-gateway-port"
+								type="number"
+								inputMode="numeric"
+								min={GATEWAY_PORT_MIN}
+								max={GATEWAY_PORT_MAX}
+								step={1}
+								value={portDraft}
+								disabled={gatewayBusy}
+								aria-describedby="coding-oauth-gateway-port-hint"
+								style={{ ...inputStyle, width: 112, flex: "0 0 112px" }}
+								onChange={(event) => {
+									onPortDraftChange(event.target.value);
+								}}
+								onKeyDown={(event) => {
+									if (event.key === "Enter") {
+										event.preventDefault();
+										onApplyPort();
+									}
+									if (event.key === "Escape") {
+										onPortDraftChange(String(gateway.port));
+									}
+								}}
+							/>
+							<button
+								type="button"
+								style={primaryButtonStyle}
+								disabled={
+									gatewayBusy || portDraft === String(gateway.port) || parseGatewayPort(portDraft) === undefined
+								}
+								onClick={onApplyPort}
+							>
+								{t("gatewayPortApply")}
+							</button>
+							<button
+								type="button"
+								style={buttonStyle}
+								disabled={gatewayBusy}
+								onClick={() => {
+									onRandomPort(randomGatewayPort(gateway.port));
+								}}
+							>
+								{t("gatewayPortRandom")}
+							</button>
+						</div>
+					</div>
+					<p style={copyRowStyle}>
+						<span style={hintStyle}>
+							{t("gatewayOpenAiUrl")}
+							<span style={{ display: "block", ...monoStyle }}>
+								{`${formatGatewayBaseUrl(gateway.bind, gateway.port)}/v1`}
+							</span>
+						</span>
+						<button
+							type="button"
+							style={primaryButtonStyle}
+							onClick={() => {
+								onCopy("openai", `${formatGatewayBaseUrl(gateway.bind, gateway.port)}/v1`);
+							}}
+						>
+							{copyLabel("openai")}
+						</button>
+					</p>
+					<p style={copyRowStyle}>
+						<span style={hintStyle}>
+							{t("gatewayAnthropicUrl")}
+							<span style={{ display: "block", ...monoStyle }}>{formatGatewayBaseUrl(gateway.bind, gateway.port)}</span>
+						</span>
+						<button
+							type="button"
+							style={buttonStyle}
+							onClick={() => {
+								onCopy("anthropic", formatGatewayBaseUrl(gateway.bind, gateway.port));
+							}}
+						>
+							{copyLabel("anthropic")}
+						</button>
+					</p>
+					<p style={copyRowStyle}>
+						<span style={hintStyle}>
+							{t("gatewayKeyHint")}
+							<span style={{ display: "block", ...monoStyle, overflowWrap: "anywhere" }}>
+								{gatewayKeyVisible && gatewayOnceKey !== undefined ? gatewayOnceKey : gateway.keyHint || "—"}
+							</span>
+						</span>
+						<span style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+							<button type="button" style={primaryButtonStyle} disabled={gatewayBusy} onClick={onCopyKey}>
+								{copyLabel("key", t("gatewayCopyKey"))}
+							</button>
+							<button type="button" style={buttonStyle} disabled={gatewayBusy} onClick={onToggleKeyVisible}>
+								{gatewayKeyVisible ? t("gatewayHideKey") : t("gatewayShowKey")}
+							</button>
+						</span>
+					</p>
+					<p style={hintStyle}>{t("gatewayKeyCopyHint")}</p>
+					{gatewayRotateConfirm ? (
+						<div style={nestedStyle}>
+							<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}>
+									{t("gatewayRotateConfirmAction")}
+								</button>
+								<button type="button" style={buttonStyle} disabled={gatewayBusy} onClick={onRotateCancel}>
+									{t("gatewayRotateCancel")}
+								</button>
+							</div>
+						</div>
+					) : (
+						<button type="button" style={buttonStyle} disabled={gatewayBusy} onClick={onRotateConfirm}>
+							{t("gatewayRotate")}
+						</button>
+					)}
+				</div>
+			)}
+		</section>
+	);
+}

package/src/client/components/ProviderCard.tsx

@@ -0,0 +1,322 @@
+/** Single provider account card for the Accounts tab. */
+
+import { SOURCE_REASON_KEY } from "../constants.ts";
+import { methodLabel, orderedLoginMethods, shouldShowPerCardSourceReason } from "../display.ts";
+import { formatEpoch, modelFields, usageHasVisibleFields } from "../parsers.ts";
+import {
+	bodyStyle,
+	buttonStyle,
+	cardStyle,
+	checkRowStyle,
+	codeStyle,
+	dotStyle,
+	errorStyle,
+	hintStyle,
+	inputStyle,
+	linkStyle,
+	listStyle,
+	monoStyle,
+	nestedStyle,
+	primaryButtonStyle,
+	rowStyle,
+	statusStyle,
+	titleStyle,
+} from "../styles.ts";
+import type {
+	GrokBuildSettingsInjected,
+	GrokStatus,
+	LoginMethod,
+	ProviderCardDefinition,
+	ProviderStatus,
+	SourceStatus,
+	UsageView,
+} from "../types.ts";
+
+export interface ProviderCardProps {
+	t: GrokBuildSettingsInjected["t"];
+	definition: ProviderCardDefinition;
+	providerStatus: ProviderStatus;
+	busy: boolean;
+	sourcesBusy: boolean;
+	remote: boolean;
+	codeInput: string;
+	popupBlocked: boolean;
+	expanded: boolean;
+	source: SourceStatus | undefined;
+	showUsage: boolean;
+	usage: UsageView | undefined;
+	usageError: string | undefined;
+	usageLoading: boolean;
+	onSignIn: (method: LoginMethod) => void;
+	onSignOut: () => void;
+	onCancelLogin: () => void;
+	onSubmitCode: () => void;
+	onCodeChange: (value: string) => void;
+	onToggleExpanded: () => void;
+	onPreviewSource: () => void;
+	onSaveModels: (selected: string[]) => void;
+}
+
+export function ProviderCard({
+	t,
+	definition,
+	providerStatus,
+	busy,
+	sourcesBusy,
+	remote,
+	codeInput,
+	popupBlocked,
+	expanded,
+	source,
+	showUsage,
+	usage,
+	usageError,
+	usageLoading,
+	onSignIn,
+	onSignOut,
+	onCancelLogin,
+	onSubmitCode,
+	onCodeChange,
+	onToggleExpanded,
+	onPreviewSource,
+	onSaveModels,
+}: ProviderCardProps) {
+	const ordered = orderedLoginMethods(definition, remote);
+	const statusLabel =
+		providerStatus.status === "signed-in"
+			? t("signedIn")
+			: providerStatus.status === "signing-in"
+				? t("signingIn")
+				: providerStatus.status === "error"
+					? t("requestFailed")
+					: t("signedOut");
+	const activeMethod = providerStatus.status === "signing-in" ? providerStatus.method : ordered[0];
+	const { available, selected } = modelFields(providerStatus);
+	const grokProviderStatus = definition.slug === "grok" ? (providerStatus as GrokStatus) : undefined;
+	const showSourceReason = shouldShowPerCardSourceReason(source);
+	const usagePercent =
+		definition.slug === "codex" && showUsage
+			? usage?.individualRemainingPercent === undefined
+				? usage?.rateLimits[0]?.windows[0]?.usedPercent
+				: 100 - usage.individualRemainingPercent
+			: undefined;
+	const fetchedAt = formatEpoch(usage?.fetchedAt);
+
+	return (
+		<div style={cardStyle}>
+			<div style={rowStyle}>
+				<div>
+					<h3 style={{ ...titleStyle, fontSize: 16 }}>{t(definition.titleKey)}</h3>
+					{providerStatus.status === "signed-in" && !expanded ? (
+						<p style={{ ...hintStyle, marginTop: 4 }}>
+							{t("modelsSummary", { selected: selected.length, total: available.length })}
+							{usagePercent === undefined ? "" : ` · ${t("usageUsedShort", { value: `${String(usagePercent)}%` })}`}
+						</p>
+					) : (
+						<>
+							<p style={{ ...bodyStyle, marginTop: 4 }}>{t(definition.descriptionKey)}</p>
+							<p style={{ ...bodyStyle, marginTop: 4 }}>
+								<span style={monoStyle}>{definition.route}</span>
+							</p>
+						</>
+					)}
+				</div>
+				<div style={statusStyle} role="status">
+					<span aria-hidden="true" style={dotStyle(providerStatus.status)} />
+					<span>{statusLabel}</span>
+				</div>
+			</div>
+			<div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+				{providerStatus.status === "signed-in" ? (
+					<>
+						<button type="button" style={buttonStyle} disabled={busy} onClick={onSignOut}>
+							{busy ? t("working") : t("logout")}
+						</button>
+						<button type="button" style={buttonStyle} onClick={onToggleExpanded}>
+							{expanded ? t("collapseModels") : t("expandModels")}
+						</button>
+						{source?.available === true ? (
+							<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onPreviewSource}>
+								{t("sourcesPullCopy")}
+							</button>
+						) : null}
+					</>
+				) : 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>
+					</>
+				) : (
+					<>
+						{ordered.map((method, index) => (
+							<button
+								key={method}
+								type="button"
+								style={index === 0 ? primaryButtonStyle : buttonStyle}
+								disabled={busy}
+								onClick={() => {
+									onSignIn(method);
+								}}
+							>
+								{busy ? t("working") : methodLabel(method, t, { remote, primary: index === 0 })}
+							</button>
+						))}
+						{source?.available === true ? (
+							<button type="button" style={buttonStyle} disabled={sourcesBusy} onClick={onPreviewSource}>
+								{t("sourcesPullCopy")}
+							</button>
+						) : showSourceReason && source?.reason !== undefined ? (
+							<span style={hintStyle}>{t(SOURCE_REASON_KEY[source.reason])}</span>
+						) : null}
+					</>
+				)}
+			</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>
+			) : 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>
+			) : 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" }}
+							value={codeInput}
+							placeholder={t("pasteCodePlaceholder")}
+							disabled={busy}
+							onChange={(event) => {
+								onCodeChange(event.target.value);
+							}}
+							onKeyDown={(event) => {
+								if (event.key === "Enter") {
+									event.preventDefault();
+									onSubmitCode();
+								}
+							}}
+						/>
+						<button
+							type="button"
+							style={primaryButtonStyle}
+							disabled={busy || codeInput.trim().length === 0}
+							onClick={onSubmitCode}
+						>
+							{t("submitCode")}
+						</button>
+					</div>
+				</div>
+			) : null}
+			{providerStatus.status === "signed-in" && expanded ? (
+				<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>
+					{grokProviderStatus?.status === "signed-in" ? (
+						<p style={bodyStyle}>
+							{grokProviderStatus.catalogSource === "live"
+								? t("catalogLive")
+								: grokProviderStatus.catalogSource === "cache"
+									? t("catalogCache")
+									: t("catalogFallback")}
+						</p>
+					) : null}
+					<p style={bodyStyle}>
+						{t("modelHint")} <span style={monoStyle}>{definition.route}/&lt;id&gt;</span>
+					</p>
+					<ul style={listStyle}>
+						{available.map((id) => {
+							const checked = selected.includes(id);
+							return (
+								<li key={id}>
+									<label style={checkRowStyle}>
+										<input
+											type="checkbox"
+											checked={checked}
+											disabled={busy}
+											onChange={() => {
+												const current = new Set(selected);
+												if (checked) current.delete(id);
+												else current.add(id);
+												onSaveModels([...current]);
+											}}
+										/>
+										<span style={monoStyle}>{id}</span>
+									</label>
+								</li>
+							);
+						})}
+					</ul>
+					{grokProviderStatus?.status === "signed-in" && grokProviderStatus.catalogError !== undefined ? (
+						<p style={errorStyle}>{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">
+									{usageError}
+								</p>
+							)}
+							{usageLoading && usage === undefined ? (
+								<p style={hintStyle}>{t("usageLoading")}</p>
+							) : usage === undefined || !usageHasVisibleFields(usage) ? (
+								<p style={hintStyle}>{t("usageEmpty")}</p>
+							) : (
+								<>
+									{fetchedAt === undefined ? null : <p style={hintStyle}>{t("usageFetchedAt", { time: fetchedAt })}</p>}
+									{usage.rateLimits.map((limit) => {
+										const resetsAt = formatEpoch(limit.windows[0]?.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>
+					) : null}
+				</div>
+			) : null}
+		</div>
+	);
+}

package/src/client/components/SettingsTabs.tsx

@@ -0,0 +1,65 @@
+/** Accessible tablist for Coding OAuth settings. */
+
+import type { KeyboardEvent } from "react";
+import { SETTINGS_TABS } from "../constants.ts";
+import { tabButtonActiveStyle, tabButtonStyle, tabNavStyle } from "../styles.ts";
+import type { GrokBuildSettingsInjected, SettingsTabId } from "../types.ts";
+
+export interface SettingsTabsProps {
+	t: GrokBuildSettingsInjected["t"];
+	activeTab: SettingsTabId;
+	onChange: (tab: SettingsTabId) => void;
+}
+
+export function SettingsTabs({ t, activeTab, onChange }: SettingsTabsProps) {
+	const focusTab = (index: number): void => {
+		const tab = SETTINGS_TABS[index];
+		if (tab === undefined) return;
+		onChange(tab.id);
+		const button = document.getElementById(`coding-oauth-tab-${tab.id}`);
+		button?.focus();
+	};
+
+	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		const current = SETTINGS_TABS.findIndex((tab) => tab.id === activeTab);
+		if (current < 0) return;
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			event.preventDefault();
+			focusTab((current + 1) % SETTINGS_TABS.length);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			event.preventDefault();
+			focusTab((current - 1 + SETTINGS_TABS.length) % SETTINGS_TABS.length);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			focusTab(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focusTab(SETTINGS_TABS.length - 1);
+		}
+	};
+
+	return (
+		<div role="tablist" aria-label={t("title")} style={tabNavStyle} onKeyDown={onKeyDown}>
+			{SETTINGS_TABS.map((tab) => {
+				const selected = activeTab === tab.id;
+				return (
+					<button
+						key={tab.id}
+						id={`coding-oauth-tab-${tab.id}`}
+						type="button"
+						role="tab"
+						aria-selected={selected}
+						aria-controls={`coding-oauth-panel-${tab.id}`}
+						tabIndex={selected ? 0 : -1}
+						style={selected ? tabButtonActiveStyle : tabButtonStyle}
+						onClick={() => {
+							onChange(tab.id);
+						}}
+					>
+						{t(tab.label)}
+					</button>
+				);
+			})}
+		</div>
+	);
+}