dsh-coding-subscription-oauth 0.5.3 → 0.5.5

package/src/client/components/CopyButton.tsx

@@ -0,0 +1,57 @@
+/** Compact copy button with copied / failed feedback. */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { copyText } from "../api.ts";
+import { compactButtonStyle, primaryButtonStyle } from "../styles.ts";
+
+export interface CopyButtonProps {
+	text: string;
+	idleLabel: string;
+	copiedLabel: string;
+	failedLabel: string;
+	primary?: boolean;
+	disabled?: boolean;
+}
+
+export function CopyButton({
+	text,
+	idleLabel,
+	copiedLabel,
+	failedLabel,
+	primary = false,
+	disabled = false,
+}: CopyButtonProps) {
+	const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+	const timerRef = useRef<number | undefined>(undefined);
+
+	useEffect(() => {
+		return () => {
+			if (timerRef.current !== undefined) window.clearTimeout(timerRef.current);
+		};
+	}, []);
+
+	const handleClick = useCallback(async () => {
+		const ok = await copyText(text);
+		setState(ok ? "copied" : "failed");
+		if (timerRef.current !== undefined) window.clearTimeout(timerRef.current);
+		timerRef.current = window.setTimeout(() => {
+			setState("idle");
+			timerRef.current = undefined;
+		}, 2000);
+	}, [text]);
+
+	const label = state === "copied" ? copiedLabel : state === "failed" ? failedLabel : idleLabel;
+
+	return (
+		<button
+			type="button"
+			style={primary ? primaryButtonStyle : compactButtonStyle}
+			disabled={disabled || text.length === 0}
+			onClick={() => {
+				void handleClick();
+			}}
+		>
+			{label}
+		</button>
+	);
+}

package/src/client/components/GatewayTab.tsx

@@ -0,0 +1,364 @@
+/** Local API gateway settings tab. */
+
+import { 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";
+import {
+	bodyStyle,
+	buttonStyle,
+	cardStyle,
+	checkRowStyle,
+	copyRowStyle,
+	dotStyle,
+	errorStyle,
+	hintStyle,
+	inputStyle,
+	monoStyle,
+	nestedStyle,
+	primaryButtonStyle,
+	segmentedNavStyle,
+	segmentedTabActiveStyle,
+	segmentedTabStyle,
+	skeletonStyle,
+	snippetStyle,
+	statusStyle,
+	titleStyle,
+	warningStyle,
+} from "../styles.ts";
+import type { CopyField, GatewayView, GrokBuildSettingsInjected } from "../types.ts";
+import { Badge } from "./Badge.tsx";
+import { CopyButton } from "./CopyButton.tsx";
+
+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;
+}
+
+const SNIPPET_TABS: readonly {
+	id: GatewaySnippetId;
+	labelKey: "gatewaySnippetCurl" | "gatewaySnippetPython" | "gatewaySnippetIde";
+}[] = [
+	{ id: "curl", labelKey: "gatewaySnippetCurl" },
+	{ id: "python", labelKey: "gatewaySnippetPython" },
+	{ id: "ide", labelKey: "gatewaySnippetIde" },
+];
+
+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 [activeSnippet, setActiveSnippet] = useState<GatewaySnippetId>("curl");
+
+	const portValid = parseGatewayPort(portDraft) !== undefined;
+	const portChanged = gateway !== undefined && portDraft !== String(gateway.port);
+
+	const snippets = useMemo(() => {
+		if (gateway === undefined) return undefined;
+		const openAi = `${formatGatewayBaseUrl(gateway.bind, gateway.port)}/v1`;
+		const anthropic = formatGatewayBaseUrl(gateway.bind, gateway.port);
+		const key =
+			gatewayKeyVisible && gatewayOnceKey !== undefined
+				? gatewayOnceKey
+				: gateway.keyHint.length > 0
+					? gateway.keyHint
+					: "";
+		return buildGatewaySnippets(openAi, anthropic, key);
+	}, [gateway, gatewayKeyVisible, gatewayOnceKey]);
+
+	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}>
+					<Badge
+						label={gateway.running ? t("gatewayRunning") : t("gatewayStopped")}
+						tone={gateway.running ? "success" : "neutral"}
+					/>
+					{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>
+						{!portValid && portDraft.length > 0 ? (
+							<p style={{ ...hintStyle, color: "var(--dsw-alias-state-error-primary)" }} role="alert">
+								{t("gatewayPortInvalid")}
+							</p>
+						) : null}
+						<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"
+								aria-invalid={!portValid && portDraft.length > 0}
+								style={{
+									...inputStyle,
+									width: 112,
+									flex: "0 0 112px",
+									borderColor:
+										!portValid && portDraft.length > 0
+											? "var(--dsw-alias-state-error-primary)"
+											: "var(--dsw-alias-border-l2)",
+								}}
+								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 || !portChanged || !portValid}
+								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>
+					{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}>
+								{SNIPPET_TABS.map((tab) => {
+									const selected = activeSnippet === tab.id;
+									return (
+										<button
+											key={tab.id}
+											type="button"
+											role="tab"
+											aria-selected={selected}
+											style={selected ? segmentedTabActiveStyle : segmentedTabStyle}
+											onClick={() => {
+												setActiveSnippet(tab.id);
+											}}
+										>
+											{t(tab.labelKey)}
+										</button>
+									);
+								})}
+							</div>
+							<code style={snippetStyle}>{snippets[activeSnippet]}</code>
+							<CopyButton
+								text={snippets[activeSnippet]}
+								idleLabel={t("copy")}
+								copiedLabel={t("copied")}
+								failedLabel={t("copyFailed")}
+								primary
+							/>
+						</div>
+					) : null}
+					{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/NoticeBanner.tsx

@@ -0,0 +1,46 @@
+/** Dismissible notice banner with optional auto-hide. */
+
+import { useEffect } from "react";
+import { bodyStyle, buttonStyle, noticeStyle } from "../styles.ts";
+
+export interface NoticeBannerProps {
+	message: string;
+	dismissLabel?: string;
+	onDismiss?: () => void;
+	autoHideMs?: number;
+	tone?: "info" | "success";
+}
+
+export function NoticeBanner({ message, dismissLabel, onDismiss, autoHideMs, tone = "info" }: NoticeBannerProps) {
+	useEffect(() => {
+		if (autoHideMs === undefined || onDismiss === undefined) return;
+		const timer = window.setTimeout(onDismiss, autoHideMs);
+		return () => {
+			window.clearTimeout(timer);
+		};
+	}, [autoHideMs, onDismiss]);
+
+	const borderColor =
+		tone === "success" ? "var(--dsw-alias-state-success-primary, #22a06b)" : "var(--dsw-alias-brand-primary, #1677ff)";
+
+	return (
+		<div
+			style={{
+				...noticeStyle,
+				display: "flex",
+				alignItems: "flex-start",
+				justifyContent: "space-between",
+				gap: 12,
+				borderLeft: `3px solid ${borderColor}`,
+			}}
+			role="status"
+		>
+			<p style={{ ...bodyStyle, margin: 0, color: "var(--dsw-alias-label-primary)" }}>{message}</p>
+			{onDismiss === undefined || dismissLabel === undefined ? null : (
+				<button type="button" style={buttonStyle} onClick={onDismiss}>
+					{dismissLabel}
+				</button>
+			)}
+		</div>
+	);
+}

package/src/client/components/ProgressBar.tsx

@@ -0,0 +1,52 @@
+/** Usage quota progress bar with threshold-based color. */
+
+import { hintStyle } from "../styles.ts";
+
+export interface ProgressBarProps {
+	/** 0–100 used percentage. */
+	value: number;
+	label?: string;
+	meta?: string;
+}
+
+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)";
+}
+
+export function ProgressBar({ value, label, meta }: ProgressBarProps) {
+	const clamped = Math.max(0, Math.min(100, value));
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+			{label === undefined ? null : (
+				<div style={{ display: "flex", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }}>
+					<span style={{ ...hintStyle, color: "var(--dsw-alias-label-primary)" }}>{label}</span>
+					{meta === undefined ? null : <span style={hintStyle}>{meta}</span>}
+				</div>
+			)}
+			<div
+				role="progressbar"
+				aria-valuenow={clamped}
+				aria-valuemin={0}
+				aria-valuemax={100}
+				style={{
+					height: 8,
+					borderRadius: 4,
+					background: "var(--dsw-alias-border-l2)",
+					overflow: "hidden",
+				}}
+			>
+				<div
+					style={{
+						width: `${String(clamped)}%`,
+						height: "100%",
+						borderRadius: 4,
+						background: barColor(clamped),
+						transition: "width 0.3s ease, background 0.3s ease",
+					}}
+				/>
+			</div>
+		</div>
+	);
+}